website refactor

apps/website/components/sponsors/BillingSummaryPanel.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Box, BoxProps } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
 import { LucideIcon } from 'lucide-react';
+import { Grid } from '@/ui/Grid';
 
 interface BillingStatProps {
   label: string;
@@ -31,16 +31,16 @@ function BillingStat({ label, value, subValue, icon, variant = 'default' }: Bill
   };
 
   return (
-    <Box p={4} bg="bg-iron-gray/20" rounded="lg" border borderColor="border-charcoal-outline/50">
+    <Stack p={4} bg="bg-iron-gray/20" rounded="lg" border borderColor="border-charcoal-outline/50">
       <Stack direction="row" align="center" gap={3} mb={2}>
-        <Box p={2} rounded="md" bg={bgMap[variant] as BoxProps<'div'>['bg']}>
+        <Stack p={2} rounded="md" bg={bgMap[variant]}>
           <Icon icon={icon} size={4} color={colorMap[variant] as any} />
-        </Box>
+        </Stack>
         <Text size="xs" weight="medium" color="text-gray-500" uppercase letterSpacing="wider">
           {label}
         </Text>
       </Stack>
-      <Box>
+      <Stack>
         <Text size="xl" weight="bold" color={colorMap[variant] as any}>
           {value}
         </Text>
@@ -49,8 +49,8 @@ function BillingStat({ label, value, subValue, icon, variant = 'default' }: Bill
             {subValue}
           </Text>
         )}
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }
 
@@ -66,10 +66,10 @@ interface BillingSummaryPanelProps {
  */
 export function BillingSummaryPanel({ stats }: BillingSummaryPanelProps) {
   return (
-    <Box display="grid" gridCols={{ base: 1, sm: 2, lg: 4 }} gap={4} mb={8}>
+    <Grid cols={1} mdCols={2} lgCols={4} gap={4} mb={8}>
       {stats.map((stat, index) => (
         <BillingStat key={index} {...stat} />
       ))}
-    </Box>
+    </Grid>
   );
 }