website refactor

apps/website/templates/AdminDashboardTemplate.tsx

@@ -6,23 +6,23 @@ import { AdminSectionHeader } from '@/components/admin/AdminSectionHeader';
 import { AdminStatsPanel } from '@/components/admin/AdminStatsPanel';
 import { routes } from '@/lib/routing/RouteConfig';
 import { AdminDashboardViewData } from '@/lib/view-data/AdminDashboardViewData';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
-import { Grid } from '@/ui/primitives/Grid';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { QuickActionLink } from '@/ui/QuickActionLink';
-import { Stack } from '@/ui/primitives/Stack';
 import { StatusBadge } from '@/ui/StatusBadge';
 import { Text } from '@/ui/Text';
 import {
-    Activity,
-    ArrowRight,
-    Clock,
-    RefreshCw,
-    Shield,
-    Users
+  Activity,
+  ArrowRight,
+  Clock,
+  RefreshCw,
+  Shield,
+  Users
 } from 'lucide-react';
 
 /**

apps/website/templates/AdminUsersTemplate.tsx

@@ -7,12 +7,12 @@ import { AdminStatsPanel } from '@/components/admin/AdminStatsPanel';
 import { AdminUsersTable } from '@/components/admin/AdminUsersTable';
 import { BulkActionBar } from '@/components/admin/BulkActionBar';
 import { UserFilters } from '@/components/admin/UserFilters';
-import { InlineNotice } from '@/components/shared/ux/InlineNotice';
+import { InlineNotice } from '@/ui/InlineNotice';
 import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { RefreshCw, ShieldAlert, Users } from 'lucide-react';
 
 interface AdminUsersTemplateProps {

apps/website/templates/DashboardTemplate.tsx

@@ -9,11 +9,11 @@ import { TelemetryPanel } from '@/components/dashboard/TelemetryPanel';
 import { routes } from '@/lib/routing/RouteConfig';
 import type { DashboardViewData } from '@/lib/view-data/DashboardViewData';
 import { Avatar } from '@/ui/Avatar';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
-import { Grid } from '@/ui/primitives/Grid';
 import { IconButton } from '@/ui/IconButton';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Bell, Calendar, LayoutDashboard, Search, Settings, Trophy, Users } from 'lucide-react';
 import { useRouter } from 'next/navigation';

apps/website/templates/DriverProfileTemplate.tsx

@@ -4,12 +4,12 @@ import { AchievementGrid } from '@/components/achievements/AchievementGrid';
 import { RatingBreakdown } from '@/components/drivers/RatingBreakdown';
 import { FriendsPreview } from '@/components/social/FriendsPreview';
 import { TeamMembershipGrid } from '@/components/teams/TeamMembershipGrid';
+import { Box } from '@/ui/Box';
 import { Breadcrumbs } from '@/ui/Breadcrumbs';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ArrowLeft } from 'lucide-react';
 import React from 'react';

apps/website/templates/DriversTemplate.tsx

@@ -4,10 +4,10 @@ import { DriversDirectoryHeader } from '@/components/drivers/DriversDirectoryHea
 import { DriverSearchBar } from '@/components/drivers/DriverSearchBar';
 import { DriverTable } from '@/components/drivers/DriverTable';
 import { DriverTableRow } from '@/components/drivers/DriverTableRow';
-import { EmptyState } from '@/components/shared/state/EmptyState';
+import { EmptyState } from '@/ui/EmptyState';
 import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';
 import { Container } from '@/ui/Container';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Search } from 'lucide-react';
 
 interface DriversTemplateProps {

apps/website/templates/HomeTemplate.tsx

@@ -15,10 +15,10 @@ import { CompanionAutomationMockup } from '@/components/mockups/CompanionAutomat
 import { RaceHistoryMockup } from '@/components/mockups/RaceHistoryMockup';
 import { SimPlatformMockup } from '@/components/mockups/SimPlatformMockup';
 import { ModeGuard } from '@/components/shared/ModeGuard';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { Section } from '@/ui/Section';
 import { Text } from '@/ui/Text';
 

apps/website/templates/LeaderboardsTemplate.tsx

@@ -4,9 +4,9 @@ import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeader
 import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
 import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
 import { Container } from '@/ui/Container';
-import { GridItem } from '@/ui/primitives/GridItem';
+import { GridItem } from '@/ui/GridItem';
 import { PageHero } from '@/ui/PageHero';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { Trophy, Users } from 'lucide-react';
 
 interface LeaderboardsTemplateProps {

apps/website/templates/LeagueAdminScheduleTemplate.tsx

@@ -1,16 +1,16 @@
 'use client';
 
-import { InlineNotice } from '@/components/shared/ux/InlineNotice';
+import { InlineNotice } from '@/ui/InlineNotice';
 import type { LeagueAdminScheduleViewData } from '@/lib/view-data/LeagueAdminScheduleViewData';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Input } from '@/ui/Input';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 
 interface LeagueAdminScheduleTemplateProps {

apps/website/templates/LeagueDetailTemplate.tsx

@@ -3,8 +3,8 @@
 import { LeagueHeaderPanel } from '@/components/leagues/LeagueHeaderPanel';
 import { LeagueNavTabs } from '@/components/leagues/LeagueNavTabs';
 import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
+import { Box } from '@/ui/Box';
 import { Link } from '@/ui/Link';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { ChevronRight } from 'lucide-react';
 import { usePathname } from 'next/navigation';

apps/website/templates/LeagueOverviewTemplate.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Calendar, Shield, Trophy, Users, type LucideIcon } from 'lucide-react';
 

apps/website/templates/LeagueRulebookTemplate.tsx

@@ -3,12 +3,12 @@
 import { RulebookTabs, type RulebookSection } from '@/components/leagues/RulebookTabs';
 import { PointsTable } from '@/components/races/PointsTable';
 import type { LeagueRulebookViewData } from '@/lib/view-data/LeagueRulebookViewData';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { AlertTriangle, Book, Clock, Info, Scale, Shield, type LucideIcon } from 'lucide-react';

apps/website/templates/LeagueScheduleTemplate.tsx

@@ -2,7 +2,7 @@
 
 import { LeagueSchedulePanel } from '@/components/leagues/LeagueSchedulePanel';
 import type { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 
 interface LeagueScheduleTemplateProps {

apps/website/templates/LeagueSettingsTemplate.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import type { LeagueSettingsViewData } from '@/lib/view-data/leagues/LeagueSettingsViewData';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Clock, Settings, Shield, Trophy, Users, type LucideIcon } from 'lucide-react';
 

apps/website/templates/LeagueSponsorshipsTemplate.tsx

@@ -4,13 +4,13 @@ import { LeagueDecalPlacementEditor } from '@/components/leagues/LeagueDecalPlac
 import { SponsorshipRequestCard } from '@/components/leagues/SponsorshipRequestCard';
 import { SponsorshipSlotCard } from '@/components/leagues/SponsorshipSlotCard';
 import type { LeagueSponsorshipsViewData } from '@/lib/view-data/leagues/LeagueSponsorshipsViewData';
+import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-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 { Building, Clock, Palette } from 'lucide-react';
 

apps/website/templates/LeagueStandingsTemplate.tsx

@@ -2,7 +2,7 @@
 
 import { LeagueStandingsTable } from '@/components/leagues/LeagueStandingsTable';
 import type { LeagueStandingsViewData } from '@/lib/view-data/LeagueStandingsViewData';
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 
 interface LeagueStandingsTemplateProps {

apps/website/templates/MediaTemplate.tsx

@@ -2,8 +2,8 @@
 
 import { MediaGallery } from '@/components/media/MediaGallery';
 import { MediaViewData } from '@/lib/view-data/MediaViewData';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
-import { Box } from '@/ui/primitives/Box';
 
 export function MediaTemplate(viewData: MediaViewData) {
   const { assets, categories, title, description } = viewData;

apps/website/templates/ProfileLayoutShellTemplate.tsx

@@ -1,8 +1,8 @@
 import { ProfileLayoutViewData } from '@/lib/view-data/ProfileLayoutViewData';
 import { ProfileSidebarTemplate } from '@/templates/ProfileSidebarTemplate';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import type { ReactNode } from 'react';
 
 interface ProfileLayoutShellTemplateProps {

apps/website/templates/ProfileLeaguesTemplate.tsx

@@ -2,9 +2,9 @@
 
 import { MembershipPanel } from '@/components/profile/MembershipPanel';
 import type { ProfileLeaguesViewData } from '@/lib/view-data/ProfileLeaguesViewData';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 interface ProfileLeaguesTemplateProps {
   viewData: ProfileLeaguesViewData;

apps/website/templates/ProfileLiveriesTemplate.tsx

@@ -3,10 +3,10 @@
 import { LiveryGallery } from '@/components/profile/LiveryGallery';
 import { routes } from '@/lib/routing/RouteConfig';
 import type { ProfileLiveriesViewData } from '@/lib/view-data/ProfileLiveriesViewData';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Plus } from 'lucide-react';
 import Link from 'next/link';
 

apps/website/templates/ProfileSettingsTemplate.tsx

@@ -4,10 +4,10 @@ import { ConnectedAccountsPanel } from '@/components/profile/ConnectedAccountsPa
 import { PreferencesPanel } from '@/components/profile/PreferencesPanel';
 import { ProfileDetailsPanel } from '@/components/profile/ProfileDetailsPanel';
 import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 interface ProfileSettingsTemplateProps {
   viewData: ProfileViewData;

apps/website/templates/ProfileSidebarTemplate.tsx

@@ -1,16 +1,16 @@
 'use client';
 
 import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
-    Handshake,
-    Palette,
-    Settings,
-    Trophy,
-    User
+  Handshake,
+  Palette,
+  Settings,
+  Trophy,
+  User
 } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';

apps/website/templates/ProfileTemplate.tsx

@@ -9,12 +9,12 @@ import { ProfileStatGrid } from '@/components/profile/ProfileStatGrid';
 import { SessionHistoryTable } from '@/components/profile/SessionHistoryTable';
 import { TeamMembershipGrid } from '@/components/teams/TeamMembershipGrid';
 import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
+import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-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 { User } from 'lucide-react';
 

apps/website/templates/RaceDetailTemplate.tsx

@@ -7,11 +7,11 @@ import { RaceDetailsHeader } from '@/components/races/RaceDetailsHeader';
 import { RaceUserResult } from '@/components/races/RaceUserResultWrapper';
 import type { SessionStatus } from '@/components/races/SessionStatusBadge';
 import { TrackConditionsPanel } from '@/components/races/TrackConditionsPanel';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
 import { Skeleton } from '@/ui/Skeleton';
 import { Text } from '@/ui/Text';
 

apps/website/templates/RaceResultsTemplate.tsx

@@ -3,12 +3,12 @@
 import { RaceDetailsHeader } from '@/components/races/RaceDetailsHeader';
 import { RaceResultsTable } from '@/components/races/RaceResultsTable';
 import type { RaceResultsViewData } from '@/lib/view-data/races/RaceResultsViewData';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertTriangle, Trophy, Zap, type LucideIcon } from 'lucide-react';
 

apps/website/templates/RaceStewardingTemplate.tsx

@@ -6,12 +6,12 @@ import { RaceDetailsHeader } from '@/components/races/RaceDetailsHeader';
 import { RacePenaltyRow } from '@/components/races/RacePenaltyRowWrapper';
 import { RaceStewardingStats } from '@/components/races/RaceStewardingStats';
 import type { RaceStewardingViewData } from '@/lib/view-data/races/RaceStewardingViewData';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { CheckCircle, Flag, Gavel, Info } from 'lucide-react';
 

apps/website/templates/RacesAllTemplate.tsx

@@ -5,12 +5,12 @@ import { RacePageHeader } from '@/components/races/RacePageHeader';
 import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
 import type { SessionStatus } from '@/components/races/SessionStatusBadge';
 import type { RacesViewData } from '@/lib/view-data/RacesViewData';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
 import { Pagination } from '@/ui/Pagination';
+import { Stack } from '@/ui/Stack';
 import { Skeleton } from '@/ui/Skeleton';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
 
 export type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
 

apps/website/templates/RacesTemplate.tsx

@@ -8,11 +8,11 @@ import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
 import { RaceSidebar } from '@/components/races/RaceSidebar';
 import type { SessionStatus } from '@/components/races/SessionStatusBadge';
 import type { RacesViewData } from '@/lib/view-data/RacesViewData';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 export type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';

apps/website/templates/RosterAdminTemplate.tsx

@@ -2,12 +2,12 @@
 
 import type { MembershipRole } from '@/lib/types/MembershipRole';
 import type { LeagueRosterAdminViewData } from '@/lib/view-data/LeagueRosterAdminViewData';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-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 { Shield, UserMinus, UserPlus } from 'lucide-react';

apps/website/templates/RulebookTemplate.tsx

@@ -2,7 +2,7 @@
 
 import { LeagueRulesPanel } from '@/components/leagues/LeagueRulesPanel';
 import type { RulebookViewData } from '@/lib/view-data/leagues/RulebookViewData';
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 
 interface RulebookTemplateProps {

apps/website/templates/ServerErrorTemplate.tsx

@@ -3,10 +3,10 @@
 import { ErrorDetails } from '@/components/errors/ErrorDetails';
 import { RecoveryActions } from '@/components/errors/RecoveryActions';
 import { ServerErrorPanel } from '@/components/errors/ServerErrorPanel';
+import { Box } from '@/ui/Box';
 import { Glow } from '@/ui/Glow';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 
 export interface ServerErrorViewData {
   error: Error & { digest?: string };

apps/website/templates/SponsorBillingTemplate.tsx

@@ -5,23 +5,23 @@ import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHe
 import { PayoutItem, SponsorPayoutQueueTable } from '@/components/sponsors/SponsorPayoutQueueTable';
 import { siteConfig } from '@/lib/siteConfig';
 import type { InvoiceDTO, PaymentMethodDTO } from '@/lib/types/tbd/SponsorBillingDTO';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { InfoBanner } from '@/ui/InfoBanner';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
-    Building2,
-    CreditCard,
-    Download,
-    ExternalLink,
-    LucideIcon,
-    Percent,
-    Receipt
+  Building2,
+  CreditCard,
+  Download,
+  ExternalLink,
+  LucideIcon,
+  Percent,
+  Receipt
 } from 'lucide-react';
 
 export interface SponsorBillingViewData {

apps/website/templates/SponsorCampaignsTemplate.tsx

@@ -1,18 +1,18 @@
 import { BillingSummaryPanel } from '@/components/sponsors/BillingSummaryPanel';
 import { SponsorContractCard } from '@/components/sponsors/SponsorContractCard';
 import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import {
-    BarChart3,
-    Check,
-    Clock,
-    Eye,
-    LucideIcon,
-    Search
+  BarChart3,
+  Check,
+  Clock,
+  Eye,
+  LucideIcon,
+  Search
 } from 'lucide-react';
 import React from 'react';
 

apps/website/templates/SponsorDashboardTemplate.tsx

@@ -9,30 +9,30 @@ import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHe
 import { SponsorshipCategoryCard } from '@/components/sponsors/SponsorshipCategoryCard';
 import { routes } from '@/lib/routing/RouteConfig';
 import type { SponsorDashboardViewData } from '@/lib/view-data/SponsorDashboardViewData';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
 import {
-    Bell,
-    Car,
-    ChevronRight,
-    Clock,
-    DollarSign,
-    Eye,
-    Flag,
-    LucideIcon,
-    Megaphone,
-    Plus,
-    TrendingUp,
-    Trophy,
-    Users
+  Bell,
+  Car,
+  ChevronRight,
+  Clock,
+  DollarSign,
+  Eye,
+  Flag,
+  LucideIcon,
+  Megaphone,
+  Plus,
+  TrendingUp,
+  Trophy,
+  Users
 } from 'lucide-react';
 
 interface SponsorDashboardTemplateProps {

apps/website/templates/SponsorLeagueDetailTemplate.tsx

@@ -7,29 +7,29 @@ import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHe
 import { SponsorStatusChip } from '@/components/sponsors/SponsorStatusChip';
 import { routes } from '@/lib/routing/RouteConfig';
 import { siteConfig } from '@/lib/siteConfig';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import {
-    BarChart3,
-    Calendar,
-    CreditCard,
-    Eye,
-    FileText,
-    Flag,
-    Megaphone,
-    TrendingUp,
-    Trophy,
-    type LucideIcon
+  BarChart3,
+  Calendar,
+  CreditCard,
+  Eye,
+  FileText,
+  Flag,
+  Megaphone,
+  TrendingUp,
+  Trophy,
+  type LucideIcon
 } from 'lucide-react';
 
 interface SponsorLeagueDetailViewData {

apps/website/templates/SponsorLeaguesTemplate.tsx

@@ -4,6 +4,7 @@ import { AvailableLeagueCard } from '@/components/sponsors/AvailableLeagueCard';
 import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
 import { routes } from '@/lib/routing/RouteConfig';
 import { siteConfig } from '@/lib/siteConfig';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
@@ -11,18 +12,17 @@ import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { Link } from '@/ui/Link';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import {
-    Car,
-    Megaphone,
-    Search,
-    Trophy,
-    Users,
+  Car,
+  Megaphone,
+  Search,
+  Trophy,
+  Users,
 } from 'lucide-react';
 
 interface AvailableLeague {

apps/website/templates/SponsorSettingsTemplate.tsx

@@ -1,4 +1,5 @@
 import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
@@ -6,16 +7,15 @@ import { FormField } from '@/ui/FormField';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Toggle } from '@/ui/Toggle';
 import {
-    AlertCircle,
-    Bell,
-    Building2,
-    RefreshCw,
-    Save
+  AlertCircle,
+  Bell,
+  Building2,
+  RefreshCw,
+  Save
 } from 'lucide-react';
 import React from 'react';
 

apps/website/templates/SponsorshipRequestsTemplate.tsx

@@ -2,9 +2,9 @@
 
 import { SponsorshipRequestsPanel } from '@/components/profile/SponsorshipRequestsPanel';
 import type { SponsorshipRequestsViewData } from '@/lib/view-data/SponsorshipRequestsViewData';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 export interface SponsorshipRequestsTemplateProps {
   viewData: SponsorshipRequestsViewData;

apps/website/templates/TeamDetailTemplate.tsx

@@ -3,15 +3,15 @@
 import { SlotTemplates } from '@/components/sponsors/SlotTemplates';
 import { SponsorInsightsCard } from '@/components/sponsors/SponsorInsightsCard';
 import { useSponsorMode } from '@/hooks/sponsor/useSponsorMode';
+import { Box } from '@/ui/Box';
 import { Breadcrumbs } from '@/ui/Breadcrumbs';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { HorizontalStatItem } from '@/ui/HorizontalStatItem';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 import { TeamAdmin } from '@/components/teams/TeamAdmin';

apps/website/templates/TeamLeaderboardTemplate.tsx

@@ -2,12 +2,12 @@
 
 import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
 import type { SkillLevel, SortBy, TeamLeaderboardViewData } from '@/lib/view-data/TeamLeaderboardViewData';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-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 { Award, ChevronLeft } from 'lucide-react';

apps/website/templates/TeamsTemplate.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import { EmptyState } from '@/components/shared/state/EmptyState';
+import { EmptyState } from '@/ui/EmptyState';
 import { TeamCard } from '@/components/teams/TeamCardWrapper';
 import { TeamGrid } from '@/components/teams/TeamGrid';
 import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
 import { TeamsDirectoryHeader } from '@/components/teams/TeamsDirectoryHeader';
 import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Users } from 'lucide-react';
 

apps/website/templates/actions/ActionsTemplate.tsx

@@ -4,7 +4,7 @@ import { ActionFiltersBar } from '@/components/actions/ActionFiltersBar';
 import { ActionList } from '@/components/actions/ActionList';
 import { ActionsHeader } from '@/components/actions/ActionsHeader';
 import { ActionsViewData } from '@/lib/view-data/ActionsViewData';
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 
 export function ActionsTemplate({ actions }: ActionsViewData) {
   return (

apps/website/templates/auth/ForgotPasswordTemplate.tsx

@@ -5,13 +5,13 @@ import { AuthFooterLinks } from '@/components/auth/AuthFooterLinks';
 import { AuthForm } from '@/components/auth/AuthForm';
 import { ForgotPasswordViewData } from '@/lib/builders/view-data/types/ForgotPasswordViewData';
 import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { Link } from '@/ui/Link';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertCircle, ArrowLeft, CheckCircle2, Mail, Shield } from 'lucide-react';
 import React from 'react';

apps/website/templates/auth/LoginTemplate.tsx

@@ -7,14 +7,14 @@ import { EnhancedFormError } from '@/components/errors/EnhancedFormError';
 import { FormState } from '@/lib/builders/view-data/types/FormState';
 import { LoginViewData } from '@/lib/builders/view-data/types/LoginViewData';
 import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { Link } from '@/ui/Link';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
 import { PasswordField } from '@/ui/PasswordField';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertCircle, LogIn, Mail } from 'lucide-react';
 import React from 'react';

apps/website/templates/auth/ResetPasswordTemplate.tsx

@@ -5,13 +5,13 @@ import { AuthFooterLinks } from '@/components/auth/AuthFooterLinks';
 import { AuthForm } from '@/components/auth/AuthForm';
 import { ResetPasswordViewData } from '@/lib/builders/view-data/types/ResetPasswordViewData';
 import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
 import { PasswordField } from '@/ui/PasswordField';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertCircle, ArrowLeft, CheckCircle2, Shield } from 'lucide-react';
 import React from 'react';

apps/website/templates/auth/SignupTemplate.tsx

@@ -5,14 +5,14 @@ import { AuthFooterLinks } from '@/components/auth/AuthFooterLinks';
 import { AuthForm } from '@/components/auth/AuthForm';
 import { SignupViewData } from '@/lib/builders/view-data/types/SignupViewData';
 import { checkPasswordStrength } from '@/lib/utils/validation';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { Link } from '@/ui/Link';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
 import { PasswordField } from '@/ui/PasswordField';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertCircle, Check, Mail, User, UserPlus, X } from 'lucide-react';
 import React from 'react';

apps/website/templates/layout/GlobalFooterTemplate.tsx

@@ -1,6 +1,6 @@
 import { AppFooter } from '@/components/app/AppFooter';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import Image from 'next/image';
 import Link from 'next/link';

apps/website/templates/layout/GlobalSidebarTemplate.tsx

@@ -3,8 +3,8 @@
 import { AuthedNav } from '@/components/layout/AuthedNav';
 import { PublicNav } from '@/components/layout/PublicNav';
 import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
+import { Box } from '@/ui/Box';
 import { DashboardRail } from '@/ui/DashboardRail';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { usePathname } from 'next/navigation';
 

apps/website/templates/layout/HeaderContentTemplate.tsx

@@ -3,8 +3,8 @@ import { HeaderActions } from '@/components/layout/HeaderActions';
 import { PublicNav } from '@/components/layout/PublicNav';
 import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
 import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { usePathname } from 'next/navigation';
 

apps/website/templates/layout/RootAppShellTemplate.tsx

@@ -3,9 +3,9 @@
 import { AppShell } from '@/components/app/AppShell';
 import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
 import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
 import { ContentViewport } from '@/ui/ContentViewport';
 import { ControlBar } from '@/ui/ControlBar';
-import { Box } from '@/ui/primitives/Box';
 import { TopNav } from '@/ui/TopNav';
 import { usePathname } from 'next/navigation';
 import React from 'react';

apps/website/templates/onboarding/OnboardingTemplate.tsx

@@ -8,8 +8,8 @@ import { OnboardingShell } from '@/components/onboarding/OnboardingShell';
 import { OnboardingStepPanel } from '@/components/onboarding/OnboardingStepPanel';
 import { OnboardingStepper } from '@/components/onboarding/OnboardingStepper';
 import { PersonalInfo, PersonalInfoStep } from '@/components/onboarding/PersonalInfoStep';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { FormEvent } from 'react';