website refactor

apps/website/components/teams/TeamRoster.tsx

@@ -4,7 +4,6 @@ import React, { useMemo, useState } from 'react';
 import { Card } from '@/ui/Card';
 import { useTeamRoster } from "@/hooks/team/useTeamRoster";
 import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
@@ -76,9 +75,9 @@ export function TeamRoster({
   if (loading) {
     return (
       <Card>
-        <Box display="flex" justifyContent="center" py={8}>
+        <Stack display="flex" justifyContent="center" py={8}>
           <Text color="text-gray-400">Loading roster...</Text>
-        </Box>
+        </Stack>
       </Card>
     );
   }
@@ -86,17 +85,17 @@ export function TeamRoster({
   return (
     <Card>
       <Stack direction="row" align="center" justify="between" mb={6} wrap gap={4}>
-        <Box>
+        <Stack>
           <Heading level={3}>Team Roster</Heading>
           <Text size="sm" color="text-gray-400" block mt={1}>
             {memberships.length} {memberships.length === 1 ? 'member' : 'members'} • Avg Rating:{' '}
             <Text color="text-primary-blue" weight="medium">{teamAverageRating.toFixed(0)}</Text>
           </Text>
-        </Box>
+        </Stack>
 
         <Stack direction="row" align="center" gap={2}>
           <Text size="sm" color="text-gray-400">Sort by:</Text>
-          <Box width="32">
+          <Stack width="32">
             <Select
               value={sortBy}
               onChange={(e) => setSortBy(e.target.value as typeof sortBy)}
@@ -106,7 +105,7 @@ export function TeamRoster({
                 { value: 'name', label: 'Name' },
               ]}
             />
-          </Box>
+          </Stack>
         </Stack>
       </Stack>
 
@@ -130,7 +129,7 @@ export function TeamRoster({
                 overallRank={overallRank}
                 actions={canManageMembership ? (
                   <>
-                    <Box width="32">
+                    <Stack width="32">
                       <Select
                         value={displayRole}
                         onChange={(e) =>
@@ -141,7 +140,7 @@ export function TeamRoster({
                           { value: 'admin', label: 'Admin' },
                         ]}
                       />
-                    </Box>
+                    </Stack>
 
                     <Button
                       variant="danger"