fix: what i messed up with bottomsheet

src/app/[name]/(Dialogs)/order/track/[id]/page.tsx

@@ -108,7 +108,7 @@ function OrderTrackingPage() {
                         visible={bottomSheet1State}
                         showCloseButton={false}
                         showTitle={false}
-                        overrideClassName='!pt-6'
+                        overrideClassName='!pt-6 bg-container!'
                     >
                         <div className='grid grid-cols-2 gap-4 px-4'>
                             <Button
@@ -135,7 +135,7 @@ function OrderTrackingPage() {
                         showTitle={false}
                         title='آدرس'
                         onClick={toggleCancelModal}
-                        overrideClassName='pt-1!'
+                        overrideClassName='pt-1! bg-container!'
                     >
                         <div className='px-4'>
                             <div className='px-4 mt-2 bg-container flex flex-col gap-6'>

src/app/[name]/(Profile)/profile/address/new/page.tsx

@@ -176,7 +176,7 @@ function OrderTrackingPage() {
                         visible={bottomSheet1State}
                         showCloseButton={false}
                         showTitle={false}
-                        overrideClassName='!pt-6'
+                        overrideClassName='!pt-6 bg-container!'
                     >
                         <div className='grid grid-cols-2 gap-4 px-4'>
                             <Button
@@ -201,6 +201,7 @@ function OrderTrackingPage() {
                         visible={bottomSheet2State}
                         title='آدرس'
                         onClick={toggleBottomSheet2}
+                        overrideClassName='bg-container!'
                     >
                         <form action={submitAddressAction}>
                             <div className='px-4'>

src/components/bottomsheet/AnimatedBottomSheet.tsx

@@ -46,11 +46,12 @@ const AnimatedBottomSheet = ({ blurOpacity = 64, overrideClassName = '', showTit
                 dragElastic={0.05}
                 onDragEnd={onDrag}
                 data-visible={props.visible}
+                data-bg-opacity={blurOpacity}
                 className={clsx(
                     overrideClassName ?? '',
                     'absolute left-0 w-full rounded-t-4xl pt-[39px] pb-6',
                     'bottom-0',
-                    blurOpacity ? `bg-container/${blurOpacity}` : 'bg-container'
+                    'bg-container/64'
                 )}
                 initial="hidden"
                 animate={props.visible ? 'visible' : 'hidden'}