website refactor

apps/website/components/admin/BulkActionBar.tsx

@@ -2,7 +2,6 @@
 
 import React from 'react';
 import { Stack } from '@/ui/Stack';
-import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -31,7 +30,7 @@ export function BulkActionBar({
   return (
     <AnimatePresence>
       {selectedCount > 0 && (
-        <Box
+        <Stack
           as={motion.div}
           initial={{ y: 100, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
@@ -53,17 +52,17 @@ export function BulkActionBar({
         >
           <Stack direction="row" align="center" gap={8}>
             <Stack direction="row" align="center" gap={3}>
-              <Box bg="bg-primary-blue" rounded="full" px={2} py={0.5}>
+              <Stack bg="bg-primary-blue" rounded="full" px={2} py={0.5}>
                 <Text size="xs" weight="bold" color="text-white">
                   {selectedCount}
                 </Text>
-              </Box>
+              </Stack>
               <Text size="sm" weight="medium" color="text-white">
                 Items Selected
               </Text>
             </Stack>
 
-            <Box w="px" h="6" bg="bg-charcoal-outline" />
+            <Stack w="px" h="6" bg="bg-charcoal-outline">{null}</Stack>
 
             <Stack direction="row" align="center" gap={3}>
               {actions.map((action) => (
@@ -86,7 +85,7 @@ export function BulkActionBar({
               </Button>
             </Stack>
           </Stack>
-        </Box>
+        </Stack>
       )}
     </AnimatePresence>
   );