website refactor

apps/website/components/onboarding/OnboardingStepper.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { motion } from 'framer-motion';
@@ -22,8 +21,8 @@ export function OnboardingStepper({ currentStep, totalSteps, steps }: Onboarding
 
   return (
     <Stack gap={4} w="full">
-      <Box w="full" h="1.5" bg="bg-iron-gray" rounded="full" overflow="hidden" position="relative">
-        <Box
+      <Stack w="full" h="1.5" bg="bg-iron-gray" rounded="full" overflow="hidden" position="relative">
+        <Stack
           as={motion.div}
           initial={{ width: 0 }}
           animate={{ width: `${progress}%` }}
@@ -31,9 +30,9 @@ export function OnboardingStepper({ currentStep, totalSteps, steps }: Onboarding
           h="full"
           bg="bg-primary-blue"
         />
-      </Box>
+      </Stack>
       
-      <Box display="flex" justify="between">
+      <Stack display="flex" justify="between">
         {steps.map((label, index) => {
           const stepNumber = index + 1;
           const isActive = stepNumber === currentStep;
@@ -41,7 +40,7 @@ export function OnboardingStepper({ currentStep, totalSteps, steps }: Onboarding
           
           return (
             <Stack key={label} direction="row" align="center" gap={2}>
-              <Box 
+              <Stack 
                 w="6" 
                 h="6" 
                 rounded="full" 
@@ -59,7 +58,7 @@ export function OnboardingStepper({ currentStep, totalSteps, steps }: Onboarding
                 >
                   {stepNumber}
                 </Text>
-              </Box>
+              </Stack>
               <Text 
                 size="sm" 
                 weight={isActive ? 'bold' : 'medium'} 
@@ -72,7 +71,7 @@ export function OnboardingStepper({ currentStep, totalSteps, steps }: Onboarding
             </Stack>
           );
         })}
-      </Box>
+      </Stack>
     </Stack>
   );
 }