@tipp/ui 2.3.4 → 2.3.6

package/src/atoms/drawer.tsx

@@ -4,9 +4,7 @@ import { Grid, Theme } from '@radix-ui/themes';
 import { usePortalContainer } from '@/theme/portal-provider';
 import { ClosePanelArrowIcon } from '../icons/close-panel-arrow';
 import { Flex } from './flex';
-import { Separator } from './separator';
 import { IconButton } from './icon-button';
-import { ToastContainer } from 'react-toastify';
 
 export function Root(props: Dialog.DialogProps): React.ReactNode {
   return <Dialog.Root {...props} />;
@@ -37,7 +35,6 @@ export function Content(props: ContentProps): React.ReactNode {
 
   const mobileHeaderSize = 48;
   const desktopHeaderSize = 64;
-  const separatorSize = 1;
   const { drawerContainerRef } = usePortalContainer();
 
   return (
@@ -52,27 +49,28 @@ export function Content(props: ContentProps): React.ReactNode {
           <Grid
             height="100%"
             overflow="hidden"
-            rows={hideHeader ? "1" :{
-              initial: `${mobileHeaderSize}px ${separatorSize}px calc(100% - ${mobileHeaderSize + separatorSize}px)`,
-              sm: `${desktopHeaderSize}px ${separatorSize}px calc(100% - ${desktopHeaderSize + separatorSize}px)`,
-            }}
+            rows={
+              hideHeader
+                ? '1'
+                : {
+                    initial: `${mobileHeaderSize}px calc(100% - ${mobileHeaderSize}px)`,
+                    sm: `${desktopHeaderSize}px calc(100% - ${desktopHeaderSize}px)`,
+                  }
+            }
           >
             {!hideHeader && (
-              <>
-                <Flex align="center" gap="3" px={{ initial: '4', md: '6' }}>
-                  <Dialog.Close asChild>
-                    <IconButton color="gray" variant="outline">
-                      <ClosePanelArrowIcon />
-                    </IconButton>
-                  </Dialog.Close>
-                  {HeaderContent}
-                </Flex>
-                <Separator orientation="horizontal" size="4" />
-              </>
+              <Flex align="center" gap="3" px={{ initial: '4', md: '6' }}>
+                <Dialog.Close asChild>
+                  <IconButton color="gray" variant="outline">
+                    <ClosePanelArrowIcon />
+                  </IconButton>
+                </Dialog.Close>
+                {HeaderContent}
+              </Flex>
             )}
             {children}
           </Grid>
-        </Dialog.Content> 
+        </Dialog.Content>
       </Theme>
     </Dialog.Portal>
   );