Divider converted to tailwind

src/components/Divider/Divider.tsx

@@ -1,17 +1,17 @@
-import { Box, BoxProps } from '~/components/Box'
+import { HTMLAttributes } from 'react'
 
-type DividerProps = BoxProps
+import { cn } from '~/utils'
+
+interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+  className?: string
+}
 
 export const Divider = (props: DividerProps) => {
-  const { color = 'borderNormal', marginY = '4', ...rest } = props
+  const { className, ...rest } = props
 
   return (
-    <Box
-      as="hr"
-      marginY={marginY}
-      background={color}
-      height="px"
-      borderWidth="none"
+    <hr
+      className={cn('my-4 h-px bg-border-normal border-none', className)}
       {...rest}
     />
   )

src/components/DropdownMenu/DropdownMenu.tsx

@@ -65,7 +65,7 @@ const DropdownMenuItemIndicator = ({
 
 export const DropdownMenuSeparator = () => (
   <DropdownMenuPrimitive.Separator className={styles.separator} asChild>
-    <Divider marginTop="1" marginBottom="1" />
+    <Divider className="my-1" />
   </DropdownMenuPrimitive.Separator>
 )