website refactor

apps/website/components/races/RaceSidebarPanel.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
 import { LucideIcon } from 'lucide-react';
 
@@ -17,24 +16,24 @@ export function RaceSidebarPanel({
   children
 }: RaceSidebarPanelProps) {
   return (
-    <Box 
+    <Stack 
       bg="bg-panel-gray" 
       rounded="xl" 
       border 
       borderColor="border-charcoal-outline" 
       overflow="hidden"
     >
-      <Box p={4} borderBottom="1px solid" borderColor="border-charcoal-outline" bg="bg-graphite-black/30">
+      <Stack p={4} borderBottom="1px solid" borderColor="border-charcoal-outline" bg="bg-graphite-black/30">
         <Stack direction="row" align="center" gap={2}>
           {icon && <Icon icon={icon} size={4} color="#198CFF" />}
           <Text weight="bold" size="sm" color="text-white" uppercase>
             {title}
           </Text>
         </Stack>
-      </Box>
-      <Box p={4}>
+      </Stack>
+      <Stack p={4}>
         {children}
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }