website refactor

apps/website/components/leagues/AvailableLeagueCard.tsx

@@ -6,7 +6,8 @@ import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
 import { Text } from '@/ui/Text';
 import { CheckCircle2, Clock, Star } from 'lucide-react';
 
@@ -39,9 +40,9 @@ export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
   };
 
   const statusConfig = {
-    active: { color: 'text-performance-green', bgColor: 'bg-performance-green/10', label: 'Active Season' },
-    upcoming: { color: 'text-warning-amber', bgColor: 'bg-warning-amber/10', label: 'Starting Soon' },
-    completed: { color: 'text-gray-400', bgColor: 'bg-gray-400/10', label: 'Season Ended' },
+    active: { intent: 'success' as const, label: 'Active Season' },
+    upcoming: { intent: 'warning' as const, label: 'Starting Soon' },
+    completed: { intent: 'default' as const, label: 'Season Ended' },
   };
 
   const config = tierConfig[league.tier];
@@ -51,41 +52,38 @@ export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
     <Card>
       <Stack gap={4}>
         {/* Header */}
-        <Stack direction="row" align="start" justify="between">
-          <Stack flexGrow={1}>
-            <Stack direction="row" align="center" gap={2} mb={1} wrap>
+        <Stack align="start" justify="between">
+          <Stack>
+            <Stack gap={2}>
               <Badge variant="primary">{config.icon} {config.label}</Badge>
-              <Stack px={2} py={0.5} rounded="full" className={status.bgColor}>
-                <Text size="xs" weight="medium" className={status.color}>{status.label}</Text>
-              </Stack>
+              <Badge variant={status.intent}>{status.label}</Badge>
             </Stack>
             <Heading level={3}>{league.name}</Heading>
-            <Text size="sm" color="text-gray-500" block mt={1}>{league.game}</Text>
+            <Text size="sm" variant="low">{league.game}</Text>
           </Stack>
-          <Stack px={2} py={1} rounded="lg" bg="bg-iron-gray/50">
-            <Stack direction="row" align="center" gap={1}>
-              <Icon icon={Star} size={3.5} color="text-yellow-400" />
-              <Text size="sm" weight="medium" color="text-white">{league.rating}</Text>
+          <Badge variant="default">
+            <Stack align="center" gap={1}>
+              <Icon icon={Star} size={3.5} intent="warning" />
+              <Text size="sm" weight="medium" variant="high">{league.rating}</Text>
             </Stack>
-          </Stack>
+          </Badge>
         </Stack>
 
         {/* Description */}
-        <Text size="sm" color="text-gray-400" block truncate>{league.description}</Text>
+        <Text size="sm" variant="low">{league.description}</Text>
 
         {/* Stats Grid */}
-        <Stack display="grid" gridCols={3} gap={2}>
+        <Grid cols={3} gap={2}>
           <StatItem label="Drivers" value={league.drivers} />
           <StatItem label="Avg Views" value={league.formattedAvgViews} />
-          <StatItem label="CPM" value={league.formattedCpm} color="text-performance-green" />
-        </Stack>
+          <StatItem label="CPM" value={league.formattedCpm} intent="success" />
+        </Grid>
 
         {/* Next Race */}
         {league.nextRace && (
-          <Stack direction="row" align="center" gap={2}>
-            <Icon icon={Clock} size={4} color="text-gray-400" />
-            <Text size="sm" color="text-gray-400">Next:</Text>
-            <Text size="sm" color="text-white">{league.nextRace}</Text>
+          <Stack align="center" gap={2}>
+            <Icon icon={Clock} size={4} intent="low" />
+            <Text size="sm" variant="low">Next: {league.nextRace}</Text>
           </Stack>
         )}
 
@@ -104,22 +102,18 @@ export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
         </Stack>
 
         {/* Actions */}
-        <Stack direction="row" gap={2}>
-          <Stack flexGrow={1}>
-            <Link href={`/sponsor/leagues/${league.id}`} block>
-              <Button variant="secondary" fullWidth size="sm">
-                View Details
+        <Stack gap={2}>
+          <Link href={`/sponsor/leagues/${league.id}`}>
+            <Button variant="secondary" fullWidth size="sm">
+              View Details
+            </Button>
+          </Link>
+          {(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
+            <Link href={`/sponsor/leagues/${league.id}?action=sponsor`}>
+              <Button variant="primary" fullWidth size="sm">
+                Sponsor
               </Button>
             </Link>
-          </Stack>
-          {(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
-            <Stack flexGrow={1}>
-              <Link href={`/sponsor/leagues/${league.id}?action=sponsor`} block>
-                <Button variant="primary" fullWidth size="sm">
-                  Sponsor
-                </Button>
-              </Link>
-            </Stack>
           )}
         </Stack>
       </Stack>
@@ -127,34 +121,36 @@ export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
   );
 }
 
-function StatItem({ label, value, color = 'text-white' }: { label: string, value: string | number, color?: string }) {
+function StatItem({ label, value, intent = 'high' }: { label: string, value: string | number, intent?: 'high' | 'success' }) {
   return (
-    <Stack p={2} bg="bg-iron-gray/50" rounded="lg" textAlign="center">
-      <Text weight="bold" className={color}>{value}</Text>
-      <Text size="xs" color="text-gray-500" block mt={1}>{label}</Text>
-    </Stack>
+    <Card variant="dark">
+      <Stack align="center">
+        <Text weight="bold" variant={intent}>{value}</Text>
+        <Text size="xs" variant="low" uppercase>{label}</Text>
+      </Stack>
+    </Card>
   );
 }
 
 function SlotRow({ label, available, price }: { label: string, available: boolean, price: string }) {
   return (
-    <Stack p={2} rounded="lg" bg="bg-iron-gray/30">
-      <Stack direction="row" align="center" justify="between">
-        <Stack direction="row" align="center" gap={2}>
-          <Stack width="2.5" height="2.5" rounded="full" bg={available ? 'bg-performance-green' : 'bg-error-red'} />
-          <Text size="sm" color="text-gray-300">{label}</Text>
+    <Card variant="dark">
+      <Stack align="center" justify="between">
+        <Stack align="center" gap={2}>
+          <Icon icon={CheckCircle2} size={3} intent={available ? 'success' : 'critical'} />
+          <Text size="sm" variant="low">{label}</Text>
         </Stack>
         <Stack>
           {available ? (
-            <Text size="sm" weight="semibold" color="text-white">{price}</Text>
+            <Text size="sm" weight="semibold" variant="high">{price}</Text>
           ) : (
-            <Stack direction="row" align="center" gap={1}>
-              <Icon icon={CheckCircle2} size={3} color="text-gray-500" />
-              <Text size="sm" color="text-gray-500">Filled</Text>
+            <Stack align="center" gap={1}>
+              <Icon icon={CheckCircle2} size={3} intent="low" />
+              <Text size="sm" variant="low">Filled</Text>
             </Stack>
           )}
         </Stack>
       </Stack>
-    </Stack>
+    </Card>
   );
 }

apps/website/components/leagues/ChampionshipStandings.tsx

@@ -6,7 +6,7 @@ import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { SummaryItem } from '@/ui/SummaryItem';
 import { Text } from '@/ui/Text';
 import { Award, ChevronRight } from 'lucide-react';

apps/website/components/leagues/ChampionshipStandingsList.tsx

@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { ReactNode } from 'react';
 
 interface ChampionshipStandingsListProps {

apps/website/components/leagues/EndRaceModal.tsx

@@ -4,7 +4,7 @@ import { InfoBanner } from '@/ui/InfoBanner';
 import { Modal } from '@/ui/Modal';
 import { ModalIcon } from '@/ui/ModalIcon';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { TestTube } from 'lucide-react';
 
 interface EndRaceModalProps {

apps/website/components/leagues/JoinLeagueButton.tsx

@@ -3,9 +3,9 @@
 import { useLeagueMembershipMutation } from "@/hooks/league/useLeagueMembershipMutation";
 import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
 import { getMembership } from '@/lib/leagueMembership';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Modal } from '@/ui/Modal';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { useState } from 'react';
 

apps/website/components/leagues/JoinRequestItem.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface JoinRequestItemProps {

apps/website/components/leagues/JoinRequestList.tsx

@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { ReactNode } from 'react';
 
 interface JoinRequestListProps {

apps/website/components/leagues/LeagueActivityFeed.tsx

@@ -3,7 +3,7 @@ import { useLeagueRaces } from "@/hooks/league/useLeagueRaces";
 import { LeagueActivityService } from '@/lib/services/league/LeagueActivityService';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { AlertTriangle, Calendar, Flag, Shield, UserMinus, UserPlus } from 'lucide-react';
 import { useMemo } from 'react';
 

apps/website/components/leagues/LeagueBasicsSection.tsx

@@ -2,12 +2,12 @@
 
 import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
 import { Button } from '@/ui/Button';
-import { Grid } from '@/ui/primitives/Grid';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';
 import { Check, FileText, Gamepad2 } from 'lucide-react';

apps/website/components/leagues/LeagueChampionshipStats.tsx

@@ -1,6 +1,6 @@
 import { HorizontalStatCard } from '@/ui/HorizontalStatCard';
 import { Text } from '@/ui/Text';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 
 interface LeagueChampionshipStatsProps {
   standings: Array<{

apps/website/components/leagues/LeagueCover.tsx

@@ -1,6 +1,6 @@
 import { SafeImage } from '@/components/shared/SafeImage';
+import { Box } from '@/ui/Box';
 import { ImagePlaceholder } from '@/ui/ImagePlaceholder';
-import { Box } from '@/ui/primitives/Box';
 
 export interface LeagueCoverProps {
   leagueId?: string;

apps/website/components/leagues/LeagueDecalPlacementEditor.tsx

@@ -4,7 +4,7 @@ import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
     Image as ImageIcon,

apps/website/components/leagues/LeagueHeader.tsx

@@ -2,7 +2,7 @@
 
 import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ReactNode } from 'react';
 

apps/website/components/leagues/LeagueHeaderPanel.tsx

@@ -4,7 +4,7 @@ import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData'
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Activity, Timer, Trophy, Users, type LucideIcon } from 'lucide-react';
 

apps/website/components/leagues/LeagueLogo.tsx

@@ -1,6 +1,6 @@
 import { SafeImage } from '@/components/shared/SafeImage';
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
 import { Trophy } from 'lucide-react';
 
 export interface LeagueLogoProps {

apps/website/components/leagues/LeagueMemberRow.tsx

@@ -1,4 +1,4 @@
-import { DriverIdentity } from '@/components/drivers/DriverIdentity';
+import { DriverIdentity } from '@/ui/DriverIdentity';
 import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { Badge } from '@/ui/Badge';
 import { TableCell, TableRow } from '@/ui/Table';

apps/website/components/leagues/LeagueMembershipFeesSection.tsx

@@ -4,7 +4,7 @@ import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Calendar, DollarSign, TrendingUp, User } from 'lucide-react';
 import { useState } from 'react';

apps/website/components/leagues/LeagueNavTabs.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 interface Tab {
   label: string;

apps/website/components/leagues/LeagueOwnershipTransfer.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
 import { UserCog } from 'lucide-react';

apps/website/components/leagues/LeagueReviewSummary.tsx

@@ -20,12 +20,12 @@ import {
 } from 'lucide-react';
 import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
 import type { LeagueScoringPresetViewModel } from '@/lib/view-models/LeagueScoringPresetViewModel';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Card } from '@/ui/Card';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
  
 interface LeagueReviewSummaryProps {
   form: LeagueConfigFormModel;

apps/website/components/leagues/LeagueRulesPanel.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Info, Shield } from 'lucide-react';
 

apps/website/components/leagues/LeagueSchedule.tsx

@@ -7,11 +7,11 @@ import type { LeagueScheduleRaceViewModel } from '@/lib/view-models/LeagueSchedu
 import { useState } from 'react';
 
 // Shared state components
-import { StateContainer } from '@/components/shared/state/StateContainer';
+import { StateContainer } from '@/ui/StateContainer';
 import { useLeagueSchedule } from "@/hooks/league/useLeagueSchedule";
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Calendar } from 'lucide-react';
 

apps/website/components/leagues/LeagueSchedulePanel.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Clock, MapPin } from 'lucide-react';
 

apps/website/components/leagues/LeagueScoringSection.tsx

@@ -4,11 +4,11 @@ import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
 import type { LeagueScoringPresetViewModel } from '@/lib/view-models/LeagueScoringPresetViewModel';
 import type { CustomPointsConfig } from '@/lib/view-models/ScoringConfigurationViewModel';
 import { Button } from '@/ui/Button';
-import { Grid } from '@/ui/primitives/Grid';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Award, Check, Globe, HelpCircle, Medal, Minus, Plus, RotateCcw, Settings, Trophy, X, Zap } from 'lucide-react';
 import React, { useEffect, useRef, useState } from 'react';

apps/website/components/leagues/LeagueSlider.tsx

@@ -8,7 +8,7 @@ import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ChevronLeft, ChevronRight, type LucideIcon } from 'lucide-react';
 import { useCallback, useRef, useState } from 'react';

apps/website/components/leagues/LeagueSponsorshipsSection.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { StatBox } from '@/ui/StatBox';
 import { Text } from '@/ui/Text';
 import { Award, DollarSign, Star, X } from 'lucide-react';

apps/website/components/leagues/LeagueStandingsTable.tsx

@@ -2,7 +2,7 @@
 
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 interface StandingEntry {
   position: number;

apps/website/components/leagues/LeagueStewardingSection.tsx

@@ -4,7 +4,7 @@ import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
 import { Checkbox } from '@/ui/Checkbox';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
 import { AlertTriangle, Bell, Clock, Scale, Shield, Vote } from 'lucide-react';

apps/website/components/leagues/LeagueStructureSection.tsx

@@ -4,7 +4,7 @@ import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Check, HelpCircle, User, Users2, X } from 'lucide-react';
 import type * as React from 'react';

apps/website/components/leagues/LeagueSummaryCard.tsx

@@ -1,13 +1,13 @@
 import { ArrowRight } from 'lucide-react';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { LeagueLogo } from './LeagueLogo';
 import { Link } from '@/ui/Link';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 interface LeagueSummaryCardProps {
   id: string;

apps/website/components/leagues/LeagueTabs.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface Tab {

apps/website/components/leagues/LeagueTimingsSection.tsx

@@ -6,7 +6,7 @@ import type { Weekday } from '@/lib/types/Weekday';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
     Calendar,

apps/website/components/leagues/LeagueVisibilitySection.tsx

@@ -3,7 +3,7 @@
 import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Check, HelpCircle, Trophy, Users, X } from 'lucide-react';
 import type * as React from 'react';

apps/website/components/leagues/PenaltyHistoryList.tsx

@@ -5,7 +5,7 @@ import { ProtestViewModel } from "@/lib/view-models/ProtestViewModel";
 import { RaceViewModel } from "@/lib/view-models/RaceViewModel";
 import { DriverViewModel } from "@/lib/view-models/DriverViewModel";
 import { Card } from "@/ui/Card";
-import { Stack } from "@/ui/primitives/Stack";
+import { Stack } from "@/ui/Stack";
 import { Text } from "@/ui/Text";
 import { Heading } from "@/ui/Heading";
 import { Icon } from "@/ui/Icon";

apps/website/components/leagues/PendingProtestsList.tsx

@@ -1,7 +1,7 @@
 import { DriverViewModel } from "@/lib/view-models/DriverViewModel";
 import { ProtestViewModel } from "@/lib/view-models/ProtestViewModel";
 import { RaceViewModel } from "@/lib/view-models/RaceViewModel";
-import { Stack } from "@/ui/primitives/Stack";
+import { Stack } from "@/ui/Stack";
 import { Card } from "@/ui/Card";
 import { ProtestListItem } from "./ProtestListItem";
 import { Text } from "@/ui/Text";

apps/website/components/leagues/ProtestListItem.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertCircle, AlertTriangle, Video } from 'lucide-react';
 

apps/website/components/leagues/QuickPenaltyModal.tsx

@@ -4,7 +4,7 @@ import { usePenaltyMutation } from "@/hooks/league/usePenaltyMutation";
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';

apps/website/components/leagues/ReadonlyLeagueInfo.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { InfoItem } from '@/ui/InfoItem';
-import { Box } from '@/ui/primitives/Box';
 import { Award, Calendar, Eye, Gamepad2, Hash, Trophy, Users } from 'lucide-react';
 
 interface ReadonlyLeagueInfoProps {

apps/website/components/leagues/ReviewProtestModal.tsx

@@ -7,13 +7,13 @@ import { ProtestViewModel } from "../../lib/view-models/ProtestViewModel";
 import { Modal } from "@/ui/Modal";
 import { Button } from "@/ui/Button";
 import { Card } from "@/ui/Card";
-import { Stack } from "@/ui/primitives/Stack";
+import { Stack } from "@/ui/Stack";
 import { Text } from "@/ui/Text";
 import { Heading } from "@/ui/Heading";
 import { Icon } from "@/ui/Icon";
 import { TextArea } from "@/ui/TextArea";
 import { Input } from "@/ui/Input";
-import { Grid } from "@/ui/primitives/Grid";
+import { Grid } from "@/ui/Grid";
 import {
   AlertCircle,
   Video,

apps/website/components/leagues/RosterTable.tsx

@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { ReactNode } from 'react';

apps/website/components/leagues/ScheduleRaceCard.tsx

@@ -3,11 +3,11 @@
 import React from 'react';
 import { Calendar, Clock, MapPin, Car, Trophy } from 'lucide-react';
 import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Badge } from '@/ui/Badge';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { Icon } from '@/ui/Icon';
 
 interface Race {

apps/website/components/leagues/ScheduleTable.tsx

@@ -3,8 +3,8 @@
 import { routes } from '@/lib/routing/RouteConfig';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { Calendar, ChevronRight, MapPin } from 'lucide-react';

apps/website/components/leagues/SponsorshipRequestCard.tsx

@@ -2,8 +2,8 @@
 
 import { Badge } from '@/ui/Badge';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { AlertCircle, CheckCircle, XCircle } from 'lucide-react';
 

apps/website/components/leagues/StandingsTable.tsx

@@ -7,7 +7,7 @@ import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
 import { Link } from '@/ui/Link';
 import { PlaceholderImage } from '@/ui/PlaceholderImage';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { Edit, User } from 'lucide-react';

apps/website/components/leagues/StewardingQueuePanel.tsx

@@ -3,7 +3,7 @@
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Clock, MessageSquare, ShieldAlert } from 'lucide-react';
 

apps/website/components/leagues/StewardingStats.tsx

@@ -1,5 +1,5 @@
 import { StatBox } from '@/ui/StatBox';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { CheckCircle, Clock, Gavel } from 'lucide-react';
 
 interface StewardingStatsProps {

apps/website/components/leagues/TransactionRow.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { ArrowDownRight, ArrowUpRight, DollarSign, LucideIcon, TrendingUp } from 'lucide-react';
 

apps/website/components/leagues/WalletSummaryPanel.tsx

@@ -2,8 +2,8 @@
 
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { ArrowDownLeft, ArrowUpRight, History, Wallet } from 'lucide-react';