website refactor

apps/website/app/drivers/DriversPageClient.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import React, { useState, useMemo } from 'react';
-import { useRouter } from 'next/navigation';
-import { DriversTemplate } from '@/templates/DriversTemplate';
 import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';
+import { DriversTemplate } from '@/templates/DriversTemplate';
 import { Container } from '@/ui/Container';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import { useRouter } from 'next/navigation';
+import { useMemo, useState } from 'react';
 
 import { routes } from '@/lib/routing/RouteConfig';
 

apps/website/app/drivers/[id]/DriverProfilePageClient.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import React, { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
 import type { DriverProfileViewData } from '@/lib/types/view-data/DriverProfileViewData';
-import type { ProfileTab } from '@/ui/ProfileTabs';
+import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
 import { Container } from '@/ui/Container';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import type { ProfileTab } from '@/ui/ProfileTabs';
 import { Text } from '@/ui/Text';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 interface DriverProfilePageClientProps {
   viewData: DriverProfileViewData | null;

apps/website/app/leagues/LeaguesPageClient.tsx

@@ -1,32 +1,32 @@
 'use client';
 
-import React, { useState } from 'react';
 import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
-import { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
 import { routes } from '@/lib/routing/RouteConfig';
 import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
-import { Box } from '@/ui/Box';
+import { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
+import { Button } from '@/ui/Button';
+import { Heading } from '@/ui/Heading';
+import { Input } from '@/ui/Input';
+import { Box } from '@/ui/primitives/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { Button } from '@/ui/Button';
-import { Input } from '@/ui/Input';
 import {
-  Flame,
+    Award,
-  Globe,
+    Clock,
-  Plus,
+    Flag,
-  Search,
+    Flame,
-  Sparkles,
+    Globe,
-  Target,
+    Plus,
-  Trophy,
+    Search,
-  Users,
+    Sparkles,
-  Flag,
+    Target,
-  Award,
+    Timer,
-  Timer,
+    Trophy,
-  Clock,
+    Users,
-  type LucideIcon,
+    type LucideIcon,
 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
 
 // ============================================================================
 // TYPES

apps/website/app/leagues/[id]/schedule/admin/LeagueAdminSchedulePageClient.tsx

@@ -1,29 +1,29 @@
 'use client';
 
-import { useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import { PageWrapper } from '@/components/shared/state/PageWrapper';
-import { LeagueAdminScheduleTemplate } from '@/templates/LeagueAdminScheduleTemplate';
 import {
-  useLeagueAdminStatus,
+    createRaceAction,
-  useLeagueSeasons,
+    deleteRaceAction,
-  useLeagueAdminSchedule
+    publishScheduleAction,
+    unpublishScheduleAction,
+    updateRaceAction
+} from '@/app/actions/leagueScheduleActions';
+import { PageWrapper } from '@/components/shared/state/PageWrapper';
+import { ConfirmDialog } from '@/components/shared/ux/ConfirmDialog';
+import {
+    useLeagueAdminSchedule,
+    useLeagueAdminStatus,
+    useLeagueSeasons
 } from "@/hooks/league/useLeagueScheduleAdminPageData";
 import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
-import {
-  publishScheduleAction,
-  unpublishScheduleAction,
-  createRaceAction,
-  updateRaceAction,
-  deleteRaceAction
-} from '@/app/actions/leagueScheduleActions';
 import { RaceScheduleCommandModel } from '@/lib/command-models/leagues/RaceScheduleCommandModel';
-import { Box } from '@/ui/Box';
+import { LeagueAdminScheduleTemplate } from '@/templates/LeagueAdminScheduleTemplate';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { ConfirmDialog } from '@/components/shared/ux/ConfirmDialog';
+import { Box } from '@/ui/primitives/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 export function LeagueAdminSchedulePageClient() {
   const params = useParams();

apps/website/app/leagues/[id]/stewarding/StewardingPageClient.tsx

@@ -1,22 +1,22 @@
 'use client';
 
-import { StewardingQueuePanel } from '@/components/leagues/StewardingQueuePanel';
+import { PenaltyHistoryList } from '@/components/leagues/PenaltyHistoryList';
-import { PenaltyFAB } from '@/components/races/PenaltyFAB';
 import { QuickPenaltyModal } from '@/components/leagues/QuickPenaltyModal';
 import { ReviewProtestModal } from '@/components/leagues/ReviewProtestModal';
+import { StewardingQueuePanel } from '@/components/leagues/StewardingQueuePanel';
 import { StewardingStats } from '@/components/leagues/StewardingStats';
-import { Button } from '@/ui/Button';
+import { PenaltyFAB } from '@/components/races/PenaltyFAB';
-import { Card } from '@/ui/Card';
 import { useLeagueStewardingMutations } from "@/hooks/league/useLeagueStewardingMutations";
-import { useMemo, useState } from 'react';
-import { PenaltyHistoryList } from '@/components/leagues/PenaltyHistoryList';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import type { StewardingViewData } from '@/lib/view-data/leagues/StewardingViewData';
+import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { ProtestViewModel } from '@/lib/view-models/ProtestViewModel';
 import { RaceViewModel } from '@/lib/view-models/RaceViewModel';
-import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/primitives/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { useMemo, useState } from 'react';
 
 interface StewardingTemplateProps {
   data: StewardingViewData;

apps/website/app/leagues/[id]/stewarding/protests/[protestId]/ProtestDetailPageClient.tsx

@@ -1,51 +1,51 @@
 'use client';
 
-import { Button } from '@/ui/Button';
-import { Card } from '@/ui/Card';
 import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
+import { ProtestDecisionCommandModel } from '@/lib/command-models/protests/ProtestDecisionCommandModel';
 import { useInject } from '@/lib/di/hooks/useInject';
 import { PROTEST_SERVICE_TOKEN } from '@/lib/di/tokens';
-import { ProtestDecisionCommandModel } from '@/lib/command-models/protests/ProtestDecisionCommandModel';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
 import {
-  AlertTriangle,
+    AlertCircle,
-  ArrowLeft,
+    AlertTriangle,
-  Calendar,
+    ArrowLeft,
-  CheckCircle,
+    Calendar,
-  ChevronDown,
+    CheckCircle,
-  Clock,
+    ChevronDown,
-  ExternalLink,
+    Clock,
-  Flag,
+    ExternalLink,
-  Gavel,
+    Flag,
-  Grid3x3,
+    Gavel,
-  MapPin,
+    Grid3x3,
-  MessageCircle,
+    MapPin,
-  Send,
+    MessageCircle,
-  Shield,
+    Send,
-  ShieldAlert,
+    Shield,
-  TrendingDown,
+    ShieldAlert,
-  User,
+    TrendingDown,
-  Video,
+    User,
-  XCircle,
+    Video,
-  AlertCircle,
+    XCircle,
-  type LucideIcon
+    type LucideIcon
 } from 'lucide-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useMemo, useState, useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 // Shared state components
-import { StateContainer } from '@/components/shared/state/StateContainer';
 import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { StateContainer } from '@/components/shared/state/StateContainer';
 import { useLeagueAdminStatus } from "@/hooks/league/useLeagueAdminStatus";
 import { useProtestDetail } from "@/hooks/league/useProtestDetail";
-import { Box } from '@/ui/Box';
+import { routes } from '@/lib/routing/RouteConfig';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
+import { Heading } from '@/ui/Heading';
 import { Icon as UIIcon } from '@/ui/Icon';
 import { Link as UILink } from '@/ui/Link';
-import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/primitives/Box';
+import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 
 type PenaltyUiConfig = {
   label: string;

apps/website/app/leagues/[id]/wallet/LeagueWalletPageClient.tsx

@@ -1,18 +1,17 @@
 'use client';
 
-import React from 'react';
 import { WalletSummaryPanel } from '@/components/leagues/WalletSummaryPanel';
 import type { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
-import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Icon as UIIcon } from '@/ui/Icon';
+import { Box } from '@/ui/primitives/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { Container } from '@/ui/Container';
-import { Icon as UIIcon } from '@/ui/Icon';
 import {
-  Download
+    Download
 } from 'lucide-react';
-import { Button } from '@/ui/Button';
 
 interface WalletTemplateProps {
   viewData: LeagueWalletViewData;

apps/website/app/leagues/create/CreateLeagueWizard.tsx

@@ -1,51 +1,51 @@
 'use client';
 
+import { useAuth } from '@/components/auth/AuthContext';
 import { LeagueReviewSummary } from '@/components/leagues/LeagueReviewSummary';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Box } from '@/ui/Box';
+import { Box } from '@/ui/primitives/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
-import { useAuth } from '@/components/auth/AuthContext';
 import {
-  AlertCircle,
+    AlertCircle,
-  Award,
+    Award,
-  Calendar,
+    Calendar,
-  Check,
+    Check,
-  CheckCircle2,
+    CheckCircle2,
-  ChevronLeft,
+    ChevronLeft,
-  ChevronRight,
+    ChevronRight,
-  FileText,
+    FileText,
-  Loader2,
+    Loader2,
-  Scale,
+    Scale,
-  Sparkles,
+    Sparkles,
-  Trophy,
+    Trophy,
-  Users,
+    Users,
 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { FormEvent, useCallback, useEffect, useState } from 'react';
 
 import { LeagueWizardCommandModel } from '@/lib/command-models/leagues/LeagueWizardCommandModel';
 
-import { useCreateLeagueWizard } from "@/hooks/useLeagueWizardService";
-import { useLeagueScoringPresets } from "@/hooks/useLeagueScoringPresets";
 import { LeagueBasicsSection } from '@/components/leagues/LeagueBasicsSection';
 import { LeagueDropSection } from '@/components/leagues/LeagueDropSection';
 import {
-  ChampionshipsSection,
+    ChampionshipsSection,
-  ScoringPatternSection
+    ScoringPatternSection
 } from '@/components/leagues/LeagueScoringSection';
 import { LeagueStewardingSection } from '@/components/leagues/LeagueStewardingSection';
 import { LeagueStructureSection } from '@/components/leagues/LeagueStructureSection';
 import { LeagueTimingsSection } from '@/components/leagues/LeagueTimingsSection';
 import { LeagueVisibilitySection } from '@/components/leagues/LeagueVisibilitySection';
+import { useLeagueScoringPresets } from "@/hooks/useLeagueScoringPresets";
+import { useCreateLeagueWizard } from "@/hooks/useLeagueWizardService";
 import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
-import type { LeagueScoringPresetViewModel } from '@/lib/view-models/LeagueScoringPresetViewModel';
 import type { Weekday } from '@/lib/types/Weekday';
 import type { WizardErrors } from '@/lib/types/WizardErrors';
+import type { LeagueScoringPresetViewModel } from '@/lib/view-models/LeagueScoringPresetViewModel';
 
 // ============================================================================
 // LOCAL STORAGE PERSISTENCE

apps/website/app/profile/liveries/upload/ProfileLiveryUploadPageClient.tsx

@@ -1,17 +1,17 @@
 'use client';
 
-import React, { useState } from 'react';
+import { UploadDropzone } from '@/components/media/UploadDropzone';
-import Link from 'next/link';
+import { routes } from '@/lib/routing/RouteConfig';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
-import { routes } from '@/lib/routing/RouteConfig';
-import { UploadDropzone } from '@/components/media/UploadDropzone';
-import { MediaPreviewCard } from '@/ui/MediaPreviewCard';
 import { MediaMetaPanel, mapMediaMetadata } from '@/ui/MediaMetaPanel';
+import { MediaPreviewCard } from '@/ui/MediaPreviewCard';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/primitives/Box';
+import Link from 'next/link';
+import { useState } from 'react';
 
 export function ProfileLiveryUploadPageClient() {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);

apps/website/app/profile/settings/ProfileSettingsPageClient.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import React, { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { ProfileSettingsTemplate } from '@/templates/ProfileSettingsTemplate';
-import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
-import type { Result } from '@/lib/contracts/Result';
-import { ProgressLine } from '@/components/shared/ux/ProgressLine';
 import { InlineNotice } from '@/components/shared/ux/InlineNotice';
-import { Box } from '@/ui/Box';
+import { ProgressLine } from '@/components/shared/ux/ProgressLine';
+import type { Result } from '@/lib/contracts/Result';
+import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
+import { ProfileSettingsTemplate } from '@/templates/ProfileSettingsTemplate';
+import { Box } from '@/ui/primitives/Box';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 interface ProfileSettingsPageClientProps {
   viewData: ProfileViewData;

apps/website/app/profile/sponsorship-requests/SponsorshipRequestsClient.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import { useState } from 'react';
+import { InlineNotice } from '@/components/shared/ux/InlineNotice';
-import { useRouter } from 'next/navigation';
+import { ProgressLine } from '@/components/shared/ux/ProgressLine';
 import type { Result } from '@/lib/contracts/Result';
 import type { SponsorshipRequestsViewData } from '@/lib/view-data/SponsorshipRequestsViewData';
 import { SponsorshipRequestsTemplate } from '@/templates/SponsorshipRequestsTemplate';
-import { InlineNotice } from '@/components/shared/ux/InlineNotice';
+import { Box } from '@/ui/primitives/Box';
-import { ProgressLine } from '@/components/shared/ux/ProgressLine';
+import { useRouter } from 'next/navigation';
-import { Box } from '@/ui/Box';
+import { useState } from 'react';
 
 interface SponsorshipRequestsClientProps {
   viewData: SponsorshipRequestsViewData;

apps/website/app/sponsor/layout.tsx

@@ -1,7 +1,7 @@
+import { createRouteGuard } from '@/lib/auth/createRouteGuard';
+import { Box } from '@/ui/primitives/Box';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
-import { createRouteGuard } from '@/lib/auth/createRouteGuard';
-import { Box } from '@/ui/Box';
 
 interface SponsorLayoutProps {
   children: React.ReactNode;

apps/website/app/sponsor/signup/page.tsx

@@ -1,37 +1,37 @@
 'use client';
 
-import { useState } from 'react';
+import { SponsorBenefitCard } from '@/components/sponsors/SponsorBenefitCard';
-import { motion, useReducedMotion } from 'framer-motion';
-import { Card } from '@/ui/Card';
-import { Button } from '@/ui/Button';
-import { Input } from '@/ui/Input';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
 import { SponsorHero } from '@/components/sponsors/SponsorHero';
 import { SponsorWorkflowMockup } from '@/components/sponsors/SponsorWorkflowMockup';
-import { SponsorBenefitCard } from '@/components/sponsors/SponsorBenefitCard';
-import { siteConfig } from '@/lib/siteConfig';
 import { SponsorSignupCommandModel } from '@/lib/command-models/sponsors/SponsorSignupCommandModel';
+import { siteConfig } from '@/lib/siteConfig';
+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 { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { motion, useReducedMotion } from 'framer-motion';
 import {
-  Building2,
+    ArrowRight,
-  Mail,
+    BarChart3,
-  Globe,
+    Building2,
-  Upload,
+    Car,
-  Eye,
+    CheckCircle2,
-  TrendingUp,
+    Eye,
-  Users,
+    Flag,
-  ArrowRight,
+    Globe,
-  Trophy,
+    Mail,
-  Car,
+    Megaphone,
-  Flag,
+    Shield,
-  Target,
+    Target,
-  BarChart3,
+    TrendingUp,
-  Shield,
+    Trophy,
-  CheckCircle2,
+    Upload,
-  Megaphone
+    Users
 } from 'lucide-react';
+import { useState } from 'react';
 
 // Sponsorship type definitions
 interface SponsorshipType {

apps/website/app/teams/create/page.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
-import { useRouter } from 'next/navigation';
 import { CreateTeamForm } from '@/components/teams/CreateTeamForm';
-import { Section } from '@/ui/Section';
+import { routes } from '@/lib/routing/RouteConfig';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
-import { routes } from '@/lib/routing/RouteConfig';
+import { Section } from '@/ui/Section';
+import { useRouter } from 'next/navigation';
 
 export default function CreateTeamPage() {
   const router = useRouter();

apps/website/components/TeamRankingsFilter.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import { Search, Star, Trophy, Percent, Hash, LucideIcon } from 'lucide-react';
-import { Button } from '@/ui/Button';
-import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
 import { Badge } from '@/ui/Badge';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Input } from '@/ui/Input';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { Hash, LucideIcon, Percent, Search, Star, Trophy } from 'lucide-react';
 
 type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
 type SortBy = 'rating' | 'wins' | 'winRate' | 'races';

apps/website/components/achievements/AchievementCard.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
 import { Card } from '@/ui/Card';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/primitives/Stack';
 
 interface AchievementCardProps {
   title: string;

apps/website/components/achievements/MilestoneItem.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
 
 interface MilestoneItemProps {
   label: string;

apps/website/components/actions/ActionFiltersBar.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { useState } from 'react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Select } from '@/ui/Select';
 import { Input } from '@/ui/Input';
+import { Stack } from '@/ui/primitives/Stack';
+import { Select } from '@/ui/Select';
+import { Text } from '@/ui/Text';
+import { useState } from 'react';
 
 export function ActionFiltersBar() {
   const [filter, setFilter] = useState('all');

apps/website/components/actions/ActionsHeader.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import { StatusIndicator } from '@/ui/StatusIndicator';
 import { Text } from '@/ui/Text';
 import { Activity } from 'lucide-react';
-import { StatusIndicator } from '@/ui/StatusIndicator';
 
 interface ActionsHeaderProps {
   title: string;

apps/website/components/admin/AdminDangerZonePanel.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import React from 'react';
 import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface AdminDangerZonePanelProps {
   title: string;

apps/website/components/admin/AdminDataTable.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import React from 'react';
 import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import React from 'react';
 
 interface AdminDataTableProps {
   children: React.ReactNode;

apps/website/components/admin/AdminEmptyState.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
 import { LucideIcon } from 'lucide-react';
+import React from 'react';
 
 interface AdminEmptyStateProps {
   icon: LucideIcon;

apps/website/components/admin/AdminHeaderPanel.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
-import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
 import { ProgressLine } from '@/components/shared/ux/ProgressLine';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface AdminHeaderPanelProps {
   title: string;

apps/website/components/admin/AdminSectionHeader.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface AdminSectionHeaderProps {
   title: string;

apps/website/components/admin/AdminStatsPanel.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import React from 'react';
+import { Grid } from '@/ui/primitives/Grid';
-import { Grid } from '@/ui/Grid';
 import { StatCard } from '@/ui/StatCard';
 import { LucideIcon } from 'lucide-react';
 

apps/website/components/admin/AdminToolbar.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import React from 'react';
 import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import React from 'react';
 
 interface AdminToolbarProps {
   children: React.ReactNode;

apps/website/components/admin/AdminUsersTable.tsx

@@ -1,23 +1,22 @@
 'use client';
 
-import React from 'react';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
-import { 
+import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
-  Table, 
-  TableHead, 
-  TableBody, 
-  TableRow, 
-  TableHeader, 
-  TableCell 
-} from '@/ui/Table';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
 import { SimpleCheckbox } from '@/ui/SimpleCheckbox';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
+} from '@/ui/Table';
+import { Text } from '@/ui/Text';
+import { MoreVertical, Shield, Trash2 } from 'lucide-react';
 import { UserStatusTag } from './UserStatusTag';
-import { DateDisplay } from '@/lib/display-objects/DateDisplay';
-import { Shield, Trash2, MoreVertical } from 'lucide-react';
-import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
 
 interface AdminUsersTableProps {
   users: AdminUsersViewData['users'];

apps/website/components/admin/BulkActionBar.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
-import { motion, AnimatePresence } from 'framer-motion';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { AnimatePresence, motion } from 'framer-motion';
+import React from 'react';
 
 interface BulkActionBarProps {
   selectedCount: number;

apps/website/components/admin/UserFilters.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
-import { Filter, Search } from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
+import { Stack } from '@/ui/primitives/Stack';
 import { Select } from '@/ui/Select';
+import { Text } from '@/ui/Text';
+import { Filter, Search } from 'lucide-react';
 import { AdminToolbar } from './AdminToolbar';
 
 interface UserFiltersProps {

apps/website/components/admin/UserStatsSummary.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import React from 'react';
-import { Users, Shield } from 'lucide-react';
-import { Grid } from '@/ui/Grid';
 import { MetricCard } from '@/ui/MetricCard';
+import { Grid } from '@/ui/primitives/Grid';
+import { Shield, Users } from 'lucide-react';
 
 interface UserStatsSummaryProps {
   total: number;

apps/website/components/auth/AuthCard.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import React from 'react';
 import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface AuthCardProps {
   children: React.ReactNode;

apps/website/components/auth/AuthFooterLinks.tsx

@@ -1,7 +1,7 @@
 'use client';
 
+import { Stack } from '@/ui/primitives/Stack';
 import React from 'react';
-import { Stack } from '@/ui/Stack';
 
 interface AuthFooterLinksProps {
   children: React.ReactNode;

apps/website/components/auth/AuthForm.tsx

@@ -1,7 +1,7 @@
 'use client';
 
+import { Stack } from '@/ui/primitives/Stack';
 import React from 'react';
-import { Stack } from '@/ui/Stack';
 
 interface AuthFormProps {
   children: React.ReactNode;

apps/website/components/auth/AuthProviderButtons.tsx

@@ -1,7 +1,7 @@
 'use client';
 
+import { Grid } from '@/ui/primitives/Grid';
 import React from 'react';
-import { Grid } from '@/ui/Grid';
 
 interface AuthProviderButtonsProps {
   children: React.ReactNode;

apps/website/components/auth/AuthShell.tsx

@@ -1,7 +1,7 @@
 'use client';
 
+import { Stack } from '@/ui/primitives/Stack';
 import React from 'react';
-import { Stack } from '@/ui/Stack';
 
 interface AuthShellProps {
   children: React.ReactNode;

apps/website/components/auth/UserRolesPreview.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { Car, Trophy, Users } from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { motion } from 'framer-motion';
+import { Car, Trophy, Users } from 'lucide-react';
 
 const USER_ROLES = [
   {

apps/website/components/dashboard/ActivityFeedPanel.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import { Panel } from '@/ui/Panel';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
 import { ActivityFeed } from '../feed/ActivityFeed';
 
 interface FeedItem {

apps/website/components/dashboard/DashboardControlBar.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import React from 'react';
 
 interface DashboardControlBarProps {
   title: string;

apps/website/components/dashboard/DashboardKpiRow.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Text } from '@/ui/Text';
 import { Grid } from '@/ui/Grid';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
 
 interface KpiItem {
   label: string;

apps/website/components/dashboard/DashboardRail.tsx

@@ -1,5 +1,5 @@
+import { Stack } from '@/ui/primitives/Stack';
 import React from 'react';
-import { Stack } from '@/ui/Stack';
 
 interface DashboardRailProps {
   children: React.ReactNode;

apps/website/components/dashboard/DashboardShell.tsx

@@ -1,5 +1,5 @@
+import { Stack } from '@/ui/primitives/Stack';
 import React from 'react';
-import { Stack } from '@/ui/Stack';
 
 interface DashboardShellProps {
   children: React.ReactNode;

apps/website/components/dashboard/TelemetryPanel.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { Panel } from '@/ui/Panel';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import React from 'react';
 
 interface TelemetryPanelProps {
   title: string;

apps/website/components/dev/DebugModeToggle.tsx

@@ -2,13 +2,13 @@ import type { ApiRequestLogger } from '@/lib/infrastructure/ApiRequestLogger';
 import { getGlobalApiLogger } from '@/lib/infrastructure/ApiRequestLogger';
 import type { GlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
 import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
-import { Bug, Shield, X } from 'lucide-react';
-import { useCallback, useEffect, useState } from 'react';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
-import { Grid } from '@/ui/Grid';
+import { Bug, Shield, X } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
 
 // Extend Window interface for debug globals
 declare global {

apps/website/components/dev/DevToolbar.tsx

@@ -1,26 +1,26 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import { useNotifications } from '@/components/notifications/NotificationProvider';
-import { Wrench, ChevronDown, ChevronUp, X, MessageSquare, Activity, AlertTriangle } from 'lucide-react';
+import type { NotificationVariant } from '@/components/notifications/notificationTypes';
+import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
 import { ApiConnectionMonitor } from '@/lib/api/base/ApiConnectionMonitor';
 import { CircuitBreakerRegistry } from '@/lib/api/base/RetryHandler';
 import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
-import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
+import { Activity, AlertTriangle, ChevronDown, ChevronUp, MessageSquare, Wrench, X } from 'lucide-react';
-import { useNotifications } from '@/components/notifications/NotificationProvider';
+import { useEffect, useState } from 'react';
-import type { NotificationVariant } from '@/components/notifications/notificationTypes';
 
 // Import our new components
 import { Accordion } from '@/ui/Accordion';
-import { NotificationTypeSection } from './sections/NotificationTypeSection';
-import { UrgencySection } from './sections/UrgencySection';
-import { NotificationSendSection } from './sections/NotificationSendSection';
-import { APIStatusSection } from './sections/APIStatusSection';
-import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
-import { Icon } from '@/ui/Icon';
-import { IconButton } from '@/ui/IconButton';
 import { Badge } from '@/ui/Badge';
 import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { IconButton } from '@/ui/IconButton';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/primitives/Stack';
+import { APIStatusSection } from './sections/APIStatusSection';
+import { NotificationSendSection } from './sections/NotificationSendSection';
+import { NotificationTypeSection } from './sections/NotificationTypeSection';
+import { UrgencySection } from './sections/UrgencySection';
 
 // Import types
 import type { DemoNotificationType, DemoUrgency } from './types';

apps/website/components/dev/sections/APIStatusSection.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
-import { Activity, Wifi, RefreshCw, Terminal } from 'lucide-react';
-import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
-import { Icon } from '@/ui/Icon';
 import { Button } from '@/ui/Button';
-import { Grid } from '@/ui/Grid';
+import { Icon } from '@/ui/Icon';
-import { StatusIndicator, StatRow, Badge } from '@/ui/StatusIndicator';
+import { Badge, StatRow, StatusIndicator } from '@/ui/StatusIndicator';
+import { Text } from '@/ui/Text';
+import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/primitives/Stack';
+import { Activity, RefreshCw, Terminal, Wifi } from 'lucide-react';
 
 interface APIStatusSectionProps {
   apiStatus: string;

apps/website/components/dev/sections/NotificationSendSection.tsx

@@ -1,12 +1,11 @@
 'use client';
 
-import React from 'react';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
 import { Bell, Loader2 } from 'lucide-react';
 import type { DemoNotificationType, DemoUrgency } from '../types';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
-import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/Stack';
 
 interface NotificationSendSectionProps {
   selectedType: DemoNotificationType;

apps/website/components/dev/sections/NotificationTypeSection.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
-import { MessageSquare, AlertTriangle, Shield, Vote, TrendingUp, Award, LucideIcon } from 'lucide-react';
-import type { DemoNotificationType } from '../types';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
-import { Grid } from '@/ui/Grid';
 import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { AlertTriangle, Award, LucideIcon, MessageSquare, Shield, TrendingUp, Vote } from 'lucide-react';
+import type { DemoNotificationType } from '../types';
 
 interface NotificationOption {
   type: DemoNotificationType;

apps/website/components/dev/sections/ReplaySection.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import { Play, Copy, Trash2, Download, Clock } from 'lucide-react';
 import { getGlobalReplaySystem } from '@/lib/infrastructure/ErrorReplay';
-import { Stack } from '@/ui/Stack';
+import { Button } from '@/ui/Button';
-import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
 import { IconButton } from '@/ui/IconButton';
-import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { Box, Clock, Copy, Download, Play, Trash2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 interface ReplayEntry {
   id: string;

apps/website/components/dev/sections/UrgencySection.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
-import { Bell, BellRing, AlertCircle, LucideIcon } from 'lucide-react';
-import type { DemoUrgency } from '../types';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
-import { Grid } from '@/ui/Grid';
 import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { AlertCircle, Bell, BellRing, LucideIcon } from 'lucide-react';
+import type { DemoUrgency } from '../types';
 
 interface UrgencyOption {
   urgency: DemoUrgency;

apps/website/components/drivers/ActiveDriverCard.tsx

@@ -1,18 +1,7 @@
-import React from 'react';
 import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
-import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
 
-interface ActiveDriverCardProps {
-  name: string;
-  avatarUrl?: string;
-  categoryLabel?: string;
-  categoryColor?: string;
-  skillLevelLabel?: string;
-  skillLevelColor?: string;
-  onClick: () => void;
-}
 
 export function ActiveDriverCard({
   name,

apps/website/components/drivers/CareerStats.tsx

@@ -1,10 +1,10 @@
 
 
-import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
-import { Grid } from '@/ui/Grid';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/primitives/Box';
+import { Grid } from '@/ui/primitives/Grid';
 import { StatGridItem } from '@/ui/StatGridItem';
 import { TrendingUp } from 'lucide-react';
 

apps/website/components/drivers/CreateDriverForm.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import React, { useState, FormEvent } from 'react';
-import { Input } from '@/ui/Input';
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/Stack';
+import { InfoBox } from '@/ui/InfoBox';
+import { Input } from '@/ui/Input';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';
-import { InfoBox } from '@/ui/InfoBox';
 import { AlertCircle } from 'lucide-react';
+import React, { FormEvent, useState } from 'react';
 
 interface FormErrors {
   name?: string;

apps/website/components/drivers/DriverCard.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import { Card } from '@/ui/Card';
-import { RankBadge } from '@/components/leaderboards/RankBadge';
 import { DriverIdentity } from '@/components/drivers/DriverIdentity';
-import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
-import { Stack } from '@/ui/Stack';
 import { DriverStats } from '@/components/drivers/DriverStats';
+import { RankBadge } from '@/components/leaderboards/RankBadge';
 import { routes } from '@/lib/routing/RouteConfig';
+import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/primitives/Stack';
 
 export interface DriverCardProps {
   id: string;

apps/website/components/drivers/DriverEntryRow.tsx

@@ -1,12 +1,12 @@
 
 
 import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
-import { Zap } from 'lucide-react';
 import { Badge } from '@/ui/Badge';
-import { Stack } from '@/ui/Stack';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import { Zap } from 'lucide-react';
 
 interface DriverEntryRowProps {
   index: number;

apps/website/components/drivers/DriverHeaderPanel.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Image } from '@/ui/Image';
 import { RatingBadge } from '@/components/drivers/RatingBadge';
+import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface DriverHeaderPanelProps {
   name: string;

apps/website/components/drivers/DriverIdentity.tsx

@@ -1,9 +1,9 @@
-import { Link } from '@/ui/Link';
-import { PlaceholderImage } from '@/ui/PlaceholderImage';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Badge } from '@/ui/Badge';
 import { Image } from '@/ui/Image';
+import { Link } from '@/ui/Link';
+import { PlaceholderImage } from '@/ui/PlaceholderImage';
+import { Box } from '@/ui/primitives/Box';
+import { Text } from '@/ui/Text';
 
 export interface DriverIdentityProps {
   driver: {

apps/website/components/drivers/DriverPerformanceOverview.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import React from 'react';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
+import { Box } from '@/ui/primitives/Box';
 
 interface DriverPerformanceOverviewProps {
   stats: {

apps/website/components/drivers/DriverProfile.tsx

@@ -1,17 +1,17 @@
 'use client';
 
-import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
-import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { StatCard } from '@/ui/StatCard';
-import { ProfileHeader } from '@/components/drivers/ProfileHeader';
-import { ProfileStats } from './ProfileStats';
 import { CareerHighlights } from '@/components/drivers/CareerHighlights';
 import { DriverRankings } from '@/components/drivers/DriverRankings';
 import { PerformanceMetrics } from '@/components/drivers/PerformanceMetrics';
+import { ProfileHeader } from '@/components/drivers/ProfileHeader';
 import { useDriverProfile } from "@/hooks/driver/useDriverProfile";
+import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/primitives/Stack';
+import { StatCard } from '@/ui/StatCard';
+import { Text } from '@/ui/Text';
+import { ProfileStats } from './ProfileStats';
 
 interface DriverProfileProps {
   driver: DriverViewModel;

apps/website/components/drivers/DriverProfileHeader.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
-import { Globe, Trophy, UserPlus, Check } from 'lucide-react';
-import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
-import { Button } from '@/ui/Button';
 import { RatingBadge } from '@/components/drivers/RatingBadge';
-import { Stack } from '@/ui/Stack';
+import { Button } from '@/ui/Button';
+import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { Check, Globe, Trophy, UserPlus } from 'lucide-react';
 import { SafetyRatingBadge } from './SafetyRatingBadge';
 
 interface DriverProfileHeaderProps {

apps/website/components/drivers/DriverProfileTabs.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import React from 'react';
-import { LayoutDashboard, BarChart3, ShieldCheck } from 'lucide-react';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
+import { Box } from '@/ui/primitives/Box';
+import { BarChart3, LayoutDashboard, ShieldCheck } from 'lucide-react';
 
 export type ProfileTab = 'overview' | 'stats' | 'ratings';
 

apps/website/components/drivers/DriverRacingProfile.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import React from 'react';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
-import { MapPin, Car, Clock, Users2, MailCheck } from 'lucide-react';
+import { Car, Clock, MailCheck, MapPin, Users2 } from 'lucide-react';
 
 interface DriverRacingProfileProps {
   racingStyle?: string | null;

apps/website/components/drivers/DriverRatingPill.tsx

@@ -1,7 +1,7 @@
 
 
-import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { Star, Trophy } from 'lucide-react';
 

apps/website/components/drivers/DriverSearchBar.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import React from 'react';
-import { Search } from 'lucide-react';
-import { Box } from '@/ui/Box';
 import { Input } from '@/ui/Input';
+import { Box } from '@/ui/primitives/Box';
+import { Search } from 'lucide-react';
 
 interface DriverSearchBarProps {
   query: string;

apps/website/components/drivers/DriverStats.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
+import { Stack } from '@/ui/primitives/Stack';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface DriverStatsProps {

apps/website/components/drivers/DriverStatsPanel.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import React from 'react';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
+import { Box } from '@/ui/primitives/Box';
 
 interface StatItem {
   label: string;

apps/website/components/drivers/DriverSummaryPill.tsx

@@ -1,11 +1,11 @@
 
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
 import { Image } from '@/ui/Image';
 import { Link } from '@/ui/Link';
 import { PlaceholderImage } from '@/ui/PlaceholderImage';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface DriverSummaryPillProps {
   name: string;

apps/website/components/drivers/DriverTable.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import React from 'react';
-import { TrendingUp } from 'lucide-react';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import { TrendingUp } from 'lucide-react';
+import React from 'react';
 
 interface DriverTableProps {
   children: React.ReactNode;

apps/website/components/drivers/DriverTableRow.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import React from 'react';
 import { RatingBadge } from '@/components/drivers/RatingBadge';
-import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
 import { Image } from '@/ui/Image';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/primitives/Stack';
 
 interface DriverTableRowProps {
   rank: number;

apps/website/components/drivers/DriversDirectoryHeader.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import React from 'react';
-import { Users, Trophy } from 'lucide-react';
-import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { Trophy, Users } from 'lucide-react';
 
 interface DriverStat {
   label: string;

apps/website/components/drivers/DriversSearch.tsx

@@ -1,8 +1,8 @@
 
 
-import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
+import { Box } from '@/ui/primitives/Box';
 import { Search } from 'lucide-react';
 
 interface DriversSearchProps {

apps/website/components/drivers/FeaturedDriverCard.tsx

@@ -1,13 +1,13 @@
 
 
+import { MedalBadge } from '@/components/leaderboards/MedalBadge';
 import { mediaConfig } from '@/lib/config/mediaConfig';
 import { Badge } from '@/ui/Badge';
-import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { MedalBadge } from '@/components/leaderboards/MedalBadge';
 import { MiniStat } from '@/ui/MiniStat';
+import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { Flag, Shield, Star, TrendingUp } from 'lucide-react';
 

apps/website/components/drivers/LiveryCard.tsx

@@ -1,11 +1,11 @@
-import { Card } from '@/ui/Card';
-import { Button } from '@/ui/Button';
-import { Car, Download, Trash2, Edit } from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
 import { Badge } from '@/ui/Badge';
+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 { Text } from '@/ui/Text';
+import { Car, Download, Edit, Trash2 } from 'lucide-react';
 
 interface DriverLiveryItem {
   id: string;

apps/website/components/drivers/PerformanceMetrics.tsx

@@ -1,7 +1,7 @@
 
 
-import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
+import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 
 interface PerformanceMetricsProps {

apps/website/components/drivers/PerformanceOverview.tsx

@@ -1,13 +1,13 @@
 
 
-import { Stack } from '@/ui/Stack';
 import { Card } from '@/ui/Card';
 import { CircularProgress } from '@/ui/CircularProgress';
-import { Grid } from '@/ui/Grid';
-import { GridItem } from '@/ui/GridItem';
 import { Heading } from '@/ui/Heading';
 import { HorizontalBarChart } from '@/ui/HorizontalBarChart';
 import { Icon } from '@/ui/Icon';
+import { Grid } from '@/ui/primitives/Grid';
+import { GridItem } from '@/ui/primitives/GridItem';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 import { Activity, BarChart3, Target, TrendingUp } from 'lucide-react';
 

apps/website/components/drivers/ProfileHeader.tsx

@@ -1,14 +1,14 @@
 
 
+import { DriverRatingPill } from '@/components/drivers/DriverRatingPill';
 import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { Badge } from '@/ui/Badge';
-import { Stack } from '@/ui/Stack';
 import { Button } from '@/ui/Button';
 import { CountryFlag } from '@/ui/CountryFlag';
-import { DriverRatingPill } from '@/components/drivers/DriverRatingPill';
 import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
 import { PlaceholderImage } from '@/ui/PlaceholderImage';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 
 interface ProfileHeaderProps {

apps/website/components/drivers/ProfileHero.tsx

@@ -2,12 +2,12 @@
 
 import { mediaConfig } from '@/lib/config/mediaConfig';
 import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
-import { Stack } from '@/ui/Stack';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
 import { Link } from '@/ui/Link';
-import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/primitives/Stack';
+import { Surface } from '@/ui/primitives/Surface';
 import { Text } from '@/ui/Text';
 import { Calendar, Clock, ExternalLink, Globe, Star, Trophy, UserPlus } from 'lucide-react';
 

apps/website/components/drivers/ProfileRaceHistory.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import { useState, useEffect } from 'react';
-import { Card } from '@/ui/Card';
-import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
 import { EmptyState } from '@/components/shared/state/EmptyState';
+import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
 import { Pagination } from '@/ui/Pagination';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
 import { Trophy } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 interface RaceHistoryProps {
   driverId: string;

apps/website/components/drivers/ProfileSettings.tsx

@@ -1,16 +1,16 @@
 'use client';
 
-import { useState } from 'react';
 import type { DriverProfileDriverSummaryViewModel } from '@/lib/view-models/DriverProfileViewModel';
-import { Card } from '@/ui/Card';
 import { Button } from '@/ui/Button';
-import { Input } from '@/ui/Input';
+import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
-import { Heading } from '@/ui/Heading';
-import { Select } from '@/ui/Select';
-import { Toggle } from '@/ui/Toggle';
-import { TextArea } from '@/ui/TextArea';
 import { Checkbox } from '@/ui/Checkbox';
+import { Heading } from '@/ui/Heading';
+import { Input } from '@/ui/Input';
+import { Stack } from '@/ui/primitives/Stack';
+import { Select } from '@/ui/Select';
+import { TextArea } from '@/ui/TextArea';
+import { Toggle } from '@/ui/Toggle';
+import { useState } from 'react';
 
 interface ProfileSettingsProps {
   driver: DriverProfileDriverSummaryViewModel;

apps/website/components/drivers/ProfileStats.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import { useDriverProfile } from "@/hooks/driver/useDriverProfile";
-import { useMemo } from 'react';
-import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { StatCard } from '@/ui/StatCard';
 import { RankBadge } from '@/components/leaderboards/RankBadge';
+import { useDriverProfile } from "@/hooks/driver/useDriverProfile";
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/primitives/Stack';
+import { StatCard } from '@/ui/StatCard';
+import { Text } from '@/ui/Text';
+import { useMemo } from 'react';
 
 interface ProfileStatsProps {
   driverId?: string;

apps/website/components/drivers/RacingProfile.tsx

@@ -1,9 +1,9 @@
 
 
-import { Stack } from '@/ui/Stack';
+import { Card, Card as Surface } from '@/ui/Card';
-import { Card , Card as Surface } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 import { Flag, UserPlus, Users } from 'lucide-react';
 

apps/website/components/drivers/RatingBreakdown.tsx

@@ -1,10 +1,10 @@
 
 
-import { Stack } from '@/ui/Stack';
-import { Card } from '@/ui/Card';
-import { Heading } from '@/ui/Heading';
 import { RatingComponent } from '@/components/drivers/RatingComponent';
 import { RatingHistoryItem } from '@/components/drivers/RatingHistoryItem';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 
 interface RatingBreakdownProps {

apps/website/components/drivers/RatingComponent.tsx

@@ -1,6 +1,6 @@
 
 
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
 import { ProgressBar } from '@/ui/ProgressBar';
 import { Text } from '@/ui/Text';
 

apps/website/components/drivers/RatingHistoryItem.tsx

@@ -1,6 +1,6 @@
 
 
-import { Box } from '@/ui/Box';
+import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 
 interface RatingHistoryItemProps {

apps/website/components/drivers/SafetyRatingBadge.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import React from 'react';
-import { Shield } from 'lucide-react';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
+import { Box } from '@/ui/primitives/Box';
+import { Shield } from 'lucide-react';
 
 interface SafetyRatingBadgeProps {
   rating: number;

apps/website/components/drivers/SkillDistribution.tsx

@@ -1,8 +1,8 @@
 
 
-import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { BarChart3 } from 'lucide-react';
 

apps/website/components/drivers/SkillLevelButton.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { LucideIcon } from 'lucide-react';
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { LucideIcon } from 'lucide-react';
 
 interface SkillLevelButtonProps {
   label: string;

apps/website/components/drivers/SkillLevelHeader.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
+import { Badge } from '@/ui/Badge';
-import { LucideIcon, ChevronRight, UserPlus } from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Badge } from '@/ui/Badge';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { ChevronRight, LucideIcon, UserPlus } from 'lucide-react';
 
 interface SkillLevelHeaderProps {
   label: string;

apps/website/components/errors/AppErrorBoundaryView.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import React from 'react';
-import { AlertTriangle } from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Icon } from '@/ui/Icon';
 import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import { AlertTriangle } from 'lucide-react';
+import React from 'react';
 
 interface AppErrorBoundaryViewProps {
   title: string;

apps/website/components/errors/DevErrorPanel.tsx

@@ -1,18 +1,18 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import { X, RefreshCw, Copy, Terminal, Activity, AlertTriangle } from 'lucide-react';
-import { ApiError } from '@/lib/api/base/ApiError';
 import { connectionMonitor } from '@/lib/api/base/ApiConnectionMonitor';
+import { ApiError } from '@/lib/api/base/ApiError';
 import { CircuitBreakerRegistry } from '@/lib/api/base/RetryHandler';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
 import { Badge } from '@/ui/Badge';
 import { Button } from '@/ui/Button';
-import { Heading } from '@/ui/Heading';
 import { Card } from '@/ui/Card';
-import { Grid } from '@/ui/Grid';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { Activity, AlertTriangle, Copy, RefreshCw, Terminal, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 interface DevErrorPanelProps {
   error: ApiError;

apps/website/components/errors/EnhancedFormError.tsx

@@ -1,25 +1,25 @@
 'use client';
 
-import React, { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { 
-  AlertCircle, 
-  AlertTriangle, 
-  Wifi, 
-  RefreshCw, 
-  ChevronDown, 
-  ChevronUp,
-  Bug,
-  Info,
-  X
-} from 'lucide-react';
-import { parseApiError, getErrorSeverity, isRetryable, isConnectivityError } from '@/lib/utils/errorUtils';
 import { ApiError } from '@/lib/api/base/ApiError';
-import { Stack } from '@/ui/Stack';
+import { getErrorSeverity, isConnectivityError, isRetryable, parseApiError } from '@/lib/utils/errorUtils';
-import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { IconButton } from '@/ui/IconButton';
-import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+    AlertCircle,
+    AlertTriangle,
+    Bug,
+    ChevronDown,
+    ChevronUp,
+    Info,
+    RefreshCw,
+    Wifi,
+    X
+} from 'lucide-react';
+import { useState } from 'react';
 
 interface EnhancedFormErrorProps {
   error: unknown;

apps/website/components/errors/ErrorAnalyticsDashboard.tsx

@@ -1,33 +1,33 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
 import { getGlobalApiLogger } from '@/lib/infrastructure/ApiRequestLogger';
+import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
 import { getErrorAnalyticsStats, type ErrorStats } from '@/lib/services/error/ErrorAnalyticsService';
-import { 
-  Activity, 
-  AlertTriangle, 
-  Clock, 
-  Copy, 
-  RefreshCw, 
-  Bug,
-  Globe,
-  Cpu,
-  FileText,
-  Trash2,
-  Download,
-  Search,
-  ChevronDown,
-  Zap,
-  Terminal
-} from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
-import { IconButton } from '@/ui/IconButton';
 import { Badge } from '@/ui/Badge';
 import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { IconButton } from '@/ui/IconButton';
 import { Input } from '@/ui/Input';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import {
+    Activity,
+    AlertTriangle,
+    Bug,
+    ChevronDown,
+    Clock,
+    Copy,
+    Cpu,
+    Download,
+    FileText,
+    Globe,
+    RefreshCw,
+    Search,
+    Terminal,
+    Trash2,
+    Zap
+} from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 interface ErrorAnalyticsDashboardProps {
   /**

apps/website/components/errors/ErrorDetails.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import React, { useState } from 'react';
-import { ChevronDown, ChevronUp, Copy, Terminal } from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
-import { Icon } from '@/ui/Icon';
 import { Card } from '@/ui/Card';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { ChevronDown, ChevronUp, Copy, Terminal } from 'lucide-react';
+import { useState } from 'react';
 
 interface ErrorDetailsProps {
   error: Error & { digest?: string };

apps/website/components/errors/ErrorDetailsBlock.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import React, { useState } from 'react';
-import { Copy, ChevronDown, ChevronUp } from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
-import { Icon } from '@/ui/Icon';
 import { Card } from '@/ui/Card';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { ChevronDown, ChevronUp, Copy } from 'lucide-react';
+import { useState } from 'react';
 
 interface ErrorDetailsBlockProps {
   error: Error & { digest?: string };

apps/website/components/errors/ErrorRecoveryActions.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import React from 'react';
-import { RefreshCw, Home } from 'lucide-react';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import { Home, RefreshCw } from 'lucide-react';
 
 interface ErrorRecoveryActionsProps {
   onRetry: () => void;

apps/website/components/errors/ErrorScreen.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
+import { Card } from '@/ui/Card';
 import { Glow } from '@/ui/Glow';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 import { AppErrorBoundaryView } from './AppErrorBoundaryView';
-import { ErrorRecoveryActions } from './ErrorRecoveryActions';
 import { ErrorDetailsBlock } from './ErrorDetailsBlock';
-import { Stack } from '@/ui/Stack';
+import { ErrorRecoveryActions } from './ErrorRecoveryActions';
-import { Card } from '@/ui/Card';
 
 interface ErrorScreenProps {
   error: Error & { digest?: string };

apps/website/components/errors/GlobalErrorScreen.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import React from 'react';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
 import { Glow } from '@/ui/Glow';
-import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { AlertTriangle, RefreshCw, Home, Terminal } from 'lucide-react';
+import { Stack } from '@/ui/primitives/Stack';
-import { Button } from '@/ui/Button';
+import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
+import { AlertTriangle, Home, RefreshCw, Terminal } from 'lucide-react';
-import { Card } from '@/ui/Card';
 
 interface GlobalErrorScreenProps {
   error: Error & { digest?: string };

apps/website/components/errors/NotFoundActions.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
 import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 
 interface NotFoundActionsProps {

apps/website/components/errors/NotFoundCallToAction.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
 
 interface NotFoundCallToActionProps {
   label: string;

apps/website/components/errors/NotFoundDiagnostics.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import React from 'react';
+import { Stack } from '@/ui/primitives/Stack';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface NotFoundDiagnosticsProps {

apps/website/components/errors/NotFoundHelpLinks.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import React from 'react';
+import { Stack } from '@/ui/primitives/Stack';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface NotFoundHelpLinksProps {
   links: Array<{ label: string; href: string }>;