website refactor

apps/website/components/teams/TeamStatItem.tsx

@@ -1,25 +1,22 @@
-import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
-
+import { Group } from '@/ui/Group';
+ 
 interface TeamStatItemProps {
   label: string;
   value: string | number;
-  color?: string;
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'high' | 'med' | 'low';
   align?: 'left' | 'center' | 'right';
 }
-
-export function TeamStatItem({ label, value, color = 'text-white', align = 'left' }: TeamStatItemProps) {
+ 
+export function TeamStatItem({ label, value, intent = 'high', align = 'left' }: TeamStatItemProps) {
   return (
-    <Box 
-      p={2} 
-      rounded="lg" 
-      bg="bg-iron-gray/30" 
-      display="flex" 
-      flexDirection="col" 
-      alignItems={align === 'center' ? 'center' : align === 'right' ? 'end' : 'start'}
+    <Group 
+      direction="col" 
+      align={align === 'center' ? 'center' : align === 'right' ? 'end' : 'start'}
+      gap={1}
     >
-      <Text size="xs" color="text-gray-500" block mb={0.5}>{label}</Text>
-      <Text size="sm" weight="semibold" color={color}>{value}</Text>
-    </Box>
+      <Text size="xs" variant="low" block>{label}</Text>
+      <Text size="sm" weight="semibold" variant={intent}>{value}</Text>
+    </Group>
   );
 }