website refactor

apps/website/components/leagues/StewardingStats.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CheckCircle, Clock, Gavel } from 'lucide-react';
-import { Box } from '@/ui/Box';
 import { StatBox } from '@/ui/StatBox';
+import { Grid } from '@/ui/Grid';
 
 interface StewardingStatsProps {
   totalPending: number;
@@ -11,7 +11,7 @@ interface StewardingStatsProps {
 
 export function StewardingStats({ totalPending, totalResolved, totalPenalties }: StewardingStatsProps) {
   return (
-    <Box display="grid" responsiveGridCols={{ base: 1, sm: 3 }} gap={4} mb={6}>
+    <Grid cols={1} mdCols={3} gap={4} mb={6}>
       <StatBox
         icon={Clock}
         label="Pending Review"
@@ -30,6 +30,6 @@ export function StewardingStats({ totalPending, totalResolved, totalPenalties }:
         value={totalPenalties}
         color="var(--racing-red)"
       />
-    </Box>
+    </Grid>
   );
 }