website refactor

apps/website/components/races/RaceStewardingStats.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@/ui/primitives/Box';
+import { Grid } from '@/ui/Grid';
 import { StatGridItem } from '@/ui/StatGridItem';
 import { CheckCircle, Clock, Gavel } from 'lucide-react';
 
@@ -10,25 +10,25 @@ interface RaceStewardingStatsProps {
 
 export function RaceStewardingStats({ pendingCount, resolvedCount, penaltiesCount }: RaceStewardingStatsProps) {
   return (
-    <Box display="grid" gridCols={3} gap={4}>
+    <Grid cols={3} gap={4}>
       <StatGridItem
         label="Pending"
         value={pendingCount}
         icon={Clock}
-        color="text-warning-amber"
+        intent="warning"
       />
       <StatGridItem
         label="Resolved"
         value={resolvedCount}
         icon={CheckCircle}
-        color="text-performance-green"
+        intent="success"
       />
       <StatGridItem
         label="Penalties"
         value={penaltiesCount}
         icon={Gavel}
-        color="text-red-400"
+        intent="critical"
       />
-    </Box>
+    </Grid>
   );
 }