@mieweb/ui 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,18 +1,22 @@
+import { Textarea } from './chunk-4AWW5WPF.js';
+export { Textarea, textareaVariants } from './chunk-4AWW5WPF.js';
 export { ThemeProvider, ThemeProviderContext, ThemeToggle, themeToggleIconVariants, themeToggleVariants, useThemeContext } from './chunk-TA6FVVCM.js';
 import { Tooltip } from './chunk-UZUBLXVC.js';
 export { Tooltip } from './chunk-UZUBLXVC.js';
 export { VisuallyHidden } from './chunk-H2CIKJQI.js';
-export { brands } from './chunk-FIUNOH6W.js';
+export { brands } from './chunk-S4DK5WN6.js';
+export { enterpriseHealthBrand } from './chunk-MTZPVOP6.js';
 export { miewebBrand } from './chunk-UHSPAFY6.js';
 export { wagglelineBrand } from './chunk-OWPWP46L.js';
 export { webchartBrand } from './chunk-C6MDPPPL.js';
 export { createBrandPreset, generateBrandCSS, generateTailwindTheme } from './chunk-SOFX4T7M.js';
 export { bluehiveBrand } from './chunk-ULOA7WBW.js';
 export { defaultBrand } from './chunk-4LTN2LEN.js';
-export { enterpriseHealthBrand } from './chunk-MTZPVOP6.js';
-import { Select } from './chunk-KJOFWJHV.js';
-export { Select, selectTriggerVariants } from './chunk-KJOFWJHV.js';
+import { Select } from './chunk-QSMMFATL.js';
+export { Select, selectTriggerVariants } from './chunk-QSMMFATL.js';
+import { Skeleton } from './chunk-6OCIIIAI.js';
 export { Skeleton, SkeletonCard, SkeletonTable, SkeletonText, skeletonVariants } from './chunk-6OCIIIAI.js';
+export { Slider, sliderRangeVariants, sliderThumbVariants, sliderTrackVariants } from './chunk-4T2ZNPTC.js';
 import { Spinner, SpinnerWithLabel } from './chunk-GV5JQBPX.js';
 export { FullPageSpinner, Spinner, SpinnerWithLabel, spinnerVariants } from './chunk-GV5JQBPX.js';
 import { Switch } from './chunk-QL2YTVTR.js';
@@ -23,23 +27,21 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from './chunk-JFAXLE2J.js';
 export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants } from './chunk-JFAXLE2J.js';
 import { Text } from './chunk-RCMF6KZA.js';
 export { SmallMuted, Text, textVariants } from './chunk-RCMF6KZA.js';
-import { Textarea } from './chunk-4AWW5WPF.js';
-export { Textarea, textareaVariants } from './chunk-4AWW5WPF.js';
-import { Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter, ModalClose } from './chunk-D5IBXXF2.js';
-export { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader, ModalTitle, modalContentVariants, modalOverlayVariants } from './chunk-D5IBXXF2.js';
+import { Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter, ModalClose } from './chunk-SD44QJIP.js';
+export { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader, ModalTitle, modalContentVariants, modalOverlayVariants } from './chunk-SD44QJIP.js';
 export { Pagination, SimplePagination, paginationButtonVariants } from './chunk-ONWOB76P.js';
 export { PhoneInput, PhoneInputGroup } from './chunk-4YRAEFYW.js';
 import { Progress } from './chunk-4MHTSFPX.js';
 export { CircularProgress, Progress, circularProgressVariants, progressBarFillVariants, progressBarTrackVariants } from './chunk-4MHTSFPX.js';
 export { QuickAction, QuickActionGroup, QuickActionIcons, quickActionIconVariants, quickActionVariants } from './chunk-6Q4SU72T.js';
-import { Radio } from './chunk-OW2BWGST.js';
+import { RadioGroup, Radio } from './chunk-OW2BWGST.js';
 export { Radio, RadioGroup, radioVariants } from './chunk-OW2BWGST.js';
-export { RecordButton, formatDuration, recordButtonVariants, recordingIndicatorVariants } from './chunk-FQ5G7J24.js';
+export { RecordButton, formatDuration, recordButtonVariants } from './chunk-XVZ4SLQB.js';
 export { DateButton, DatePicker, RadioOption, SchedulePicker, TimeButton, TimePicker, dateButtonVariants, radioOptionVariants, timeButtonVariants } from './chunk-DMA74PZ7.js';
 import { Badge } from './chunk-3NJ72QU6.js';
 export { Badge, badgeVariants } from './chunk-3NJ72QU6.js';
 export { Breadcrumb, BreadcrumbSlash } from './chunk-B3L43JGH.js';
-import { Button } from './chunk-N5EKL4DH.js';
+import { Button, buttonVariants } from './chunk-N5EKL4DH.js';
 export { Button, buttonVariants } from './chunk-N5EKL4DH.js';
 import { Card, CardHeader, CardTitle, CardContent } from './chunk-XXOBTAKA.js';
 export { Card, CardActions, CardBadge, CardCollapsible, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, CardMedia, CardStat, CardTitle, cardAccentVariants, cardVariants } from './chunk-XXOBTAKA.js';
@@ -54,19 +56,20 @@ import { useCommandK, useIsMobile, useMediaQuery } from './chunk-CP7NPDQW.js';
 export { useCommandK, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useMediaQuery } from './chunk-CP7NPDQW.js';
 export { useTheme } from './chunk-KJZNEVYM.js';
 export { usePrefersReducedMotion } from './chunk-HB7C7NB5.js';
-import { useFocusTrap } from './chunk-CLNOI5J7.js';
-export { useFocusTrap } from './chunk-CLNOI5J7.js';
+import { useFocusTrap } from './chunk-4SMSH4OY.js';
+export { useFocusTrap } from './chunk-4SMSH4OY.js';
 import { useClickOutside } from './chunk-OT36EMM5.js';
 export { useClickOutside } from './chunk-OT36EMM5.js';
 import { useEscapeKey } from './chunk-T4ME7QCT.js';
 export { useEscapeKey } from './chunk-T4ME7QCT.js';
-import './chunk-ZQ4XMJH7.js';
+import './chunk-V2DF2GUE.js';
 export { formatPhoneNumber, isPhoneNumberEmpty, isValidPhoneNumber, unformatPhoneNumber } from './chunk-CEHWXAAI.js';
 export { calculateAge, formatDateValue, isDateEmpty, isDateInFuture, isDateInPast, isValidDate, isValidDrivingAge, parseDateValue } from './chunk-SN52QMRT.js';
+export { isStorybookDocsMode } from './chunk-VSQF22GL.js';
 export { miewebUIPreset, miewebUISafelist } from './chunk-O7WRE2WX.js';
 import { Alert, AlertTitle, AlertDescription } from './chunk-B26RIQ5R.js';
 export { Alert, AlertDescription, AlertTitle, alertVariants } from './chunk-B26RIQ5R.js';
-export { AudioPlayer, ProgressBar, audioPlayerVariants, formatTime as formatAudioTime, playButtonVariants } from './chunk-QBWVTJKF.js';
+export { AudioPlayer, ProgressBar, audioPlayerVariants, formatTime as formatAudioTime, playButtonVariants } from './chunk-UBRDKNLQ.js';
 export { AudioRecorder, audioRecorderVariants, controlButtonVariants, formatTime, waveformContainerVariants } from './chunk-QZLRB3UG.js';
 import { Avatar } from './chunk-NIHESA7O.js';
 export { Avatar, AvatarGroup, avatarVariants, getInitials } from './chunk-NIHESA7O.js';
@@ -79,7 +82,7 @@ import { cva } from 'class-variance-authority';
 import { AgGridReact } from 'ag-grid-react';
 export { AgGridReact } from 'ag-grid-react';
 import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
-import { Mail, Phone, Linkedin, Globe, CheckCircle, Clock, Filter, ChevronDown, Calendar, Printer, Download, FolderUp, FileUp, Upload, Edit2, Check, X, ChevronUp, MapPin, Shield, ChevronRight, Building2, AlertCircle, Trash2, Scan, Camera, ScanLine, RefreshCw, FileText, Image } from 'lucide-react';
+import { FileUp, X, AlertCircle, Mail, Phone, Linkedin, Globe, CheckCircle, Clock, Filter, ChevronDown, Calendar, Printer, Download, FolderUp, Upload, Edit2, Check, ChevronUp, MapPin, Shield, ChevronRight, Building2, SlidersHorizontal, Trash2, Pencil, Plus, Link, AlertTriangle, RefreshCw, Scan, Camera, ScanLine, FileText, Image } from 'lucide-react';
 
 var SEX_OPTIONS = [
   { value: "F", label: "Female" },
@@ -2286,6 +2289,35 @@ var TOOL_ICONS = {
       )
     }
   ),
+  // Provider tools
+  search_providers: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "h-4 w-4",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
+          }
+        )
+      ]
+    }
+  ),
   // Default tool icon
   default: /* @__PURE__ */ jsx(
     "svg",
@@ -2389,6 +2421,34 @@ function ResourceLink({ link, onClick, className }) {
         )
       }
     ),
+    provider: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: "h-4 w-4",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
+            }
+          )
+        ]
+      }
+    ),
     external: /* @__PURE__ */ jsx(
       "svg",
       {
@@ -2575,7 +2635,8 @@ var TOOL_FRIENDLY_NAMES = {
   search_documents: "Searching documents",
   create_order: "Creating order",
   send_message: "Sending message",
-  search: "Searching"
+  search: "Searching",
+  search_providers: "Searching for providers"
 };
 function getToolFriendlyName(toolName, status) {
   const baseName = TOOL_FRIENDLY_NAMES[toolName] || toolName.replace(/_/g, " ");
@@ -2584,8 +2645,10 @@ function getToolFriendlyName(toolName, status) {
       return baseName.replace("Creating", "Created");
     if (baseName.startsWith("Scheduling"))
       return baseName.replace("Scheduling", "Scheduled");
+    if (baseName.startsWith("Searching for"))
+      return baseName.replace("Searching for", "Found");
     if (baseName.startsWith("Searching"))
-      return baseName.replace("Searching", "Searched");
+      return baseName.replace("Searching", "Found");
     if (baseName.startsWith("Looking"))
       return baseName.replace("Looking", "Found");
     if (baseName.startsWith("Updating"))
@@ -2615,6 +2678,10 @@ function getParameterSummary(toolName, params) {
     const date = paramMap.preferredDate || paramMap.date;
     return date ? `${paramMap.patientName} on ${date}` : String(paramMap.patientName);
   }
+  if (toolName === "search_providers" && paramMap.zipcode) {
+    const service = paramMap.service;
+    return service ? `${service} near ${paramMap.zipcode}` : `near ${paramMap.zipcode}`;
+  }
   return null;
 }
 function MCPToolCallDisplay({
@@ -7839,6 +7906,8 @@ function CheckrIntegration({
   onDisconnect,
   onInviteCandidate,
   onViewReport,
+  onViewSelected,
+  onExportSelected,
   onRefresh,
   loading = false,
   error,
@@ -7865,7 +7934,10 @@ function CheckrIntegration({
     phone = "Phone",
     package: packageLabel = "Package",
     submit = "Send Invitation",
-    cancel = "Cancel"
+    cancel = "Cancel",
+    exportSelected = "Export Selected",
+    viewDetails = "View Details",
+    noReportsSelected = "No reports selected"
   } = labels;
   const [showInviteModal, setShowInviteModal] = React46.useState(false);
   const [candidateName, setCandidateName] = React46.useState("");
@@ -7874,6 +7946,12 @@ function CheckrIntegration({
   const [selectedPackage, setSelectedPackage] = React46.useState(
     packages[0]?.id || ""
   );
+  const [selectedReports, setSelectedReports] = React46.useState(
+    /* @__PURE__ */ new Set()
+  );
+  React46.useEffect(() => {
+    setSelectedReports(/* @__PURE__ */ new Set());
+  }, [reports, connected]);
   const statusLabels = {
     pending,
     running,
@@ -7886,18 +7964,44 @@ function CheckrIntegration({
     consider,
     adverse_action: adverseAction
   };
-  const statusColors2 = {
-    pending: "bg-yellow-100 text-yellow-800",
-    running: "bg-blue-100 text-blue-800",
-    complete: "bg-green-100 text-green-800",
-    failed: "bg-red-100 text-red-800",
-    expired: "bg-gray-100 text-gray-800"
-  };
-  const resultColors = {
-    clear: "text-green-600",
-    consider: "text-yellow-600",
-    adverse_action: "text-red-600"
-  };
+  const statusStyles = {
+    pending: "border-warning text-warning bg-warning/10",
+    running: "border-warning text-warning bg-warning/10",
+    complete: "border-success text-success bg-success/10",
+    failed: "border-destructive text-destructive bg-destructive/10",
+    expired: "border-muted-foreground text-muted-foreground bg-muted"
+  };
+  const resultStyles = {
+    clear: "text-success",
+    consider: "text-warning",
+    adverse_action: "text-destructive"
+  };
+  const statusDotColors = {
+    pending: "bg-warning",
+    running: "bg-warning",
+    complete: "bg-success",
+    failed: "bg-destructive",
+    expired: "bg-muted-foreground"
+  };
+  const statusCounts = React46.useMemo(() => {
+    const counts = {
+      pending: 0,
+      running: 0,
+      complete: 0,
+      failed: 0,
+      expired: 0
+    };
+    reports.forEach((report) => {
+      if (counts[report.status] !== void 0) {
+        counts[report.status]++;
+      }
+    });
+    return counts;
+  }, [reports]);
+  const packageOptions = packages.map((pkg) => ({
+    value: pkg.id,
+    label: pkg.name
+  }));
   const handleInviteSubmit = (e) => {
     e.preventDefault();
     if (candidateName && candidateEmail && selectedPackage) {
@@ -7915,6 +8019,29 @@ function CheckrIntegration({
       setCandidatePhone("");
     }
   };
+  const handleToggleReport = (reportId) => {
+    setSelectedReports((prev) => {
+      const next = new Set(prev);
+      if (next.has(reportId)) {
+        next.delete(reportId);
+      } else {
+        next.add(reportId);
+      }
+      return next;
+    });
+  };
+  const handleViewSelected = () => {
+    const selected = reports.filter((r) => selectedReports.has(r.id));
+    if (onViewSelected) {
+      onViewSelected(selected);
+    } else if (selected.length === 1 && onViewReport) {
+      onViewReport(selected[0]);
+    }
+  };
+  const handleExportSelected = () => {
+    const selected = reports.filter((r) => selectedReports.has(r.id));
+    onExportSelected?.(selected);
+  };
   const formatDate4 = (date) => {
     if (!date) return "";
     const d = typeof date === "string" ? new Date(date) : date;
@@ -7923,9 +8050,26 @@ function CheckrIntegration({
   return /* @__PURE__ */ jsxs("div", { className: cn("checkr-integration", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-100", children: /* @__PURE__ */ jsx("i", { className: "fas fa-user-shield text-xl text-emerald-600" }) }),
+        /* @__PURE__ */ jsx("div", { className: "bg-success/10 flex h-12 w-12 items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "text-success h-6 w-6",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+              }
+            )
+          }
+        ) }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: "Checkr" }),
+          /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: "Checkr" }),
           connected && account?.name && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-sm", children: [
             account.name,
             account.plan && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-xs", children: [
@@ -7936,78 +8080,164 @@ function CheckrIntegration({
           ] })
         ] })
       ] }),
-      connected ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onDisconnect,
-          className: "rounded-lg border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50",
-          children: disconnect
-        }
-      ) : /* @__PURE__ */ jsxs(
-        "button",
+      connected ? /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onDisconnect, children: disconnect }) : /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: onConnect, children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "mr-2 h-4 w-4",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+              }
+            )
+          }
+        ),
+        connect
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsxs("div", { className: "bg-destructive/10 border-destructive/20 text-destructive mb-4 rounded-lg border p-4", children: [
+      /* @__PURE__ */ jsx(
+        "svg",
         {
-          type: "button",
-          onClick: onConnect,
-          className: "rounded-lg bg-emerald-600 px-4 py-2 text-white hover:bg-emerald-700",
-          children: [
-            /* @__PURE__ */ jsx("i", { className: "fas fa-link mr-2" }),
-            connect
-          ]
+          className: "mr-2 inline-block h-4 w-4",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            }
+          )
         }
-      )
-    ] }),
-    error && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded-lg border border-red-200 bg-red-50 p-4 text-red-600", children: [
-      /* @__PURE__ */ jsx("i", { className: "fas fa-exclamation-circle mr-2" }),
+      ),
       error
     ] }),
     connected && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "mb-6 flex flex-wrap gap-3", children: [
-        /* @__PURE__ */ jsxs(
-          "button",
+      reports.length > 0 && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground mb-4 flex flex-wrap items-center gap-4 text-sm", children: Object.entries(statusCounts).filter(([, count]) => count > 0).map(([status, count]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "span",
           {
-            type: "button",
-            onClick: () => setShowInviteModal(true),
-            className: "bg-primary hover:bg-primary/90 rounded-lg px-4 py-2 text-white",
-            children: [
-              /* @__PURE__ */ jsx("i", { className: "fas fa-user-plus mr-2" }),
-              inviteCandidate
-            ]
+            className: cn(
+              "h-2.5 w-2.5 rounded-full",
+              statusDotColors[status]
+            )
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: onRefresh,
-            className: "rounded-lg border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50",
-            children: [
-              /* @__PURE__ */ jsx("i", { className: "fas fa-sync-alt mr-2" }),
-              refresh
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs("span", { children: [
+          count,
+          " ",
+          statusLabels[status]?.toLowerCase()
+        ] })
+      ] }, status)) }),
+      /* @__PURE__ */ jsxs("div", { className: "mb-6 flex flex-wrap gap-3", children: [
+        /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: () => setShowInviteModal(true), children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "mr-2 h-4 w-4",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
+                }
+              )
+            }
+          ),
+          inviteCandidate
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: onRefresh, children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "mr-2 h-4 w-4",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                }
+              )
+            }
+          ),
+          refresh
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "rounded-lg border", children: [
-        /* @__PURE__ */ jsx("div", { className: "border-b bg-gray-50 px-4 py-3", children: /* @__PURE__ */ jsx("h4", { className: "font-medium", children: viewReports }) }),
-        loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsx("div", { className: "border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" }) }) : reports.length > 0 ? /* @__PURE__ */ jsx("div", { className: "divide-y", children: reports.map((report) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "flex items-center justify-between p-4 hover:bg-gray-50",
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("p", { className: "font-medium", children: report.candidate.name }),
-                /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: report.candidate.email }),
-                report.packageName && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: report.packageName })
-              ] }) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bg-card border-border overflow-hidden rounded-lg border", children: [
+        /* @__PURE__ */ jsx("div", { className: "border-border border-b px-4 py-3", children: /* @__PURE__ */ jsx("h4", { className: "text-card-foreground font-medium", children: viewReports }) }),
+        loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsx("div", { className: "border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" }) }) : reports.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "divide-border divide-y", children: reports.map((report) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "hover:bg-muted/50 flex items-center justify-between px-4 py-4 transition-colors",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleToggleReport(report.id),
+                      className: cn(
+                        "flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 transition-colors",
+                        selectedReports.has(report.id) ? "border-primary bg-primary" : "border-muted-foreground/40 hover:border-muted-foreground"
+                      ),
+                      "aria-label": `Select ${report.candidate.name}`,
+                      "aria-checked": selectedReports.has(report.id),
+                      role: "checkbox",
+                      children: selectedReports.has(report.id) && /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: "text-primary-foreground h-3 w-3",
+                          fill: "none",
+                          viewBox: "0 0 24 24",
+                          stroke: "currentColor",
+                          strokeWidth: 3,
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              d: "M5 13l4 4L19 7"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-card-foreground font-medium", children: report.candidate.name }),
+                    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: report.candidate.email }),
+                    report.packageName && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: report.packageName })
+                  ] })
+                ] }),
                 /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
                   /* @__PURE__ */ jsx(
                     "span",
                     {
                       className: cn(
-                        "inline-block rounded-full px-2 py-0.5 text-xs font-medium",
-                        statusColors2[report.status]
+                        "inline-block rounded-full border px-3 py-0.5 text-xs font-medium",
+                        statusStyles[report.status]
                       ),
                       children: statusLabels[report.status] || report.status
                     }
@@ -8017,136 +8247,163 @@ function CheckrIntegration({
                     {
                       className: cn(
                         "mt-1 text-sm font-medium",
-                        resultColors[report.result]
+                        resultStyles[report.result]
                       ),
                       children: resultLabels[report.result] || report.result
                     }
                   ),
-                  /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: formatDate4(report.completedAt || report.createdAt) })
-                ] }),
-                report.reportUrl && /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => onViewReport?.(report),
-                    className: "rounded-lg border border-gray-300 p-2 hover:bg-gray-100",
-                    title: "View Report",
-                    children: /* @__PURE__ */ jsx("i", { className: "fas fa-external-link-alt text-gray-600" })
-                  }
-                )
-              ] })
-            ]
-          },
-          report.id
-        )) }) : /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground py-8 text-center", children: [
-          /* @__PURE__ */ jsx("i", { className: "fas fa-clipboard-list mb-2 text-3xl text-gray-300" }),
-          /* @__PURE__ */ jsx("p", { children: noReports })
-        ] })
-      ] })
-    ] }),
-    !connected && !error && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-dashed p-8 text-center", children: [
-      /* @__PURE__ */ jsx("i", { className: "fas fa-link-slash mb-4 text-4xl text-gray-300" }),
-      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-4", children: "Connect your Checkr account to run background checks on candidates" }),
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: onConnect,
-          className: "rounded-lg bg-emerald-600 px-6 py-2 text-white hover:bg-emerald-700",
-          children: [
-            /* @__PURE__ */ jsx("i", { className: "fas fa-link mr-2" }),
-            connect
-          ]
-        }
-      )
-    ] }),
-    showInviteModal && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          role: "button",
-          tabIndex: 0,
-          "aria-label": "Close modal",
-          className: "fixed inset-0 bg-black/50",
-          onClick: () => setShowInviteModal(false),
-          onKeyDown: (e) => e.key === "Enter" && setShowInviteModal(false)
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "relative z-10 w-full max-w-md rounded-xl bg-white p-6 shadow-xl", children: [
-        /* @__PURE__ */ jsx("h3", { className: "mb-4 text-lg font-semibold", children: inviteCandidate }),
-        /* @__PURE__ */ jsxs("form", { onSubmit: handleInviteSubmit, children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium", children: name }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "text",
-                  value: candidateName,
-                  onChange: (e) => setCandidateName(e.target.value),
-                  className: "w-full rounded-lg border border-gray-300 px-3 py-2",
-                  required: true
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium", children: email }),
+                  /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: formatDate4(report.completedAt || report.createdAt) })
+                ] })
+              ]
+            },
+            report.id
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "border-border bg-muted/30 flex items-center justify-between border-t px-4 py-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: selectedReports.size > 0 ? `${selectedReports.size} report${selectedReports.size > 1 ? "s" : ""} selected` : noReportsSelected }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
               /* @__PURE__ */ jsx(
-                "input",
+                Button,
                 {
-                  type: "email",
-                  value: candidateEmail,
-                  onChange: (e) => setCandidateEmail(e.target.value),
-                  className: "w-full rounded-lg border border-gray-300 px-3 py-2",
-                  required: true
+                  variant: "outline",
+                  size: "sm",
+                  onClick: handleExportSelected,
+                  disabled: selectedReports.size === 0,
+                  children: exportSelected
                 }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium", children: phone }),
+              ),
               /* @__PURE__ */ jsx(
-                "input",
+                Button,
                 {
-                  type: "tel",
-                  value: candidatePhone,
-                  onChange: (e) => setCandidatePhone(e.target.value),
-                  className: "w-full rounded-lg border border-gray-300 px-3 py-2"
+                  variant: "primary",
+                  size: "sm",
+                  onClick: handleViewSelected,
+                  disabled: selectedReports.size === 0,
+                  children: viewDetails
                 }
               )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium", children: packageLabel }),
-              /* @__PURE__ */ jsx(
-                "select",
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground py-8 text-center", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "text-muted-foreground/30 mx-auto mb-2 h-12 w-12",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 1,
+              children: /* @__PURE__ */ jsx(
+                "path",
                 {
-                  value: selectedPackage,
-                  onChange: (e) => setSelectedPackage(e.target.value),
-                  className: "w-full rounded-lg border border-gray-300 px-3 py-2",
-                  required: true,
-                  children: packages.map((pkg) => /* @__PURE__ */ jsx("option", { value: pkg.id, children: pkg.name }, pkg.id))
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
                 }
               )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-6 flex justify-end gap-3", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setShowInviteModal(false),
-                className: "rounded-lg border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50",
-                children: cancel
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { children: noReports })
+        ] })
+      ] })
+    ] }),
+    !connected && !error && /* @__PURE__ */ jsxs("div", { className: "border-border rounded-lg border border-dashed p-8 text-center", children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "text-muted-foreground/30 mx-auto mb-4 h-12 w-12",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: 1,
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-4", children: "Connect your Checkr account to run background checks on candidates" }),
+      /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: onConnect, children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "mr-2 h-4 w-4",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsx(
+              "path",
               {
-                type: "submit",
-                className: "bg-primary hover:bg-primary/90 rounded-lg px-4 py-2 text-white",
-                children: submit
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
               }
             )
-          ] })
+          }
+        ),
+        connect
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Modal, { open: showInviteModal, onOpenChange: setShowInviteModal, size: "md", children: [
+      /* @__PURE__ */ jsxs(ModalHeader, { children: [
+        /* @__PURE__ */ jsx(ModalTitle, { children: inviteCandidate }),
+        /* @__PURE__ */ jsx(ModalClose, {})
+      ] }),
+      /* @__PURE__ */ jsxs("form", { onSubmit: handleInviteSubmit, children: [
+        /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              label: name,
+              value: candidateName,
+              onChange: (e) => setCandidateName(e.target.value),
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              label: email,
+              type: "email",
+              value: candidateEmail,
+              onChange: (e) => setCandidateEmail(e.target.value),
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              label: phone,
+              type: "tel",
+              value: candidatePhone,
+              onChange: (e) => setCandidatePhone(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              label: packageLabel,
+              options: packageOptions,
+              value: selectedPackage,
+              onValueChange: setSelectedPackage
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs(ModalFooter, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: () => setShowInviteModal(false),
+              children: cancel
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", children: submit })
         ] })
       ] })
     ] })
@@ -9275,10 +9532,6 @@ function CSVColumnMapper({
     includeAll = "Include All",
     ignoreUncompleted = "Ignore Uncompleted",
     import: importLabel = "Import",
-    ignore = "Ignore",
-    include = "Include",
-    incomingSample = "Incoming Sample",
-    fieldType = "Field Type",
     ensureAccurateData = "Ensure Accurate Employee Data",
     ensureAccurateDataDescription = "Existing employee profiles will be automatically updated.",
     instructions = "Map each column from your CSV to the corresponding employee field."
@@ -9287,13 +9540,13 @@ function CSVColumnMapper({
     return [name, ...parts].join("-").replace(/[^a-zA-Z0-9-]/g, "-").toLowerCase();
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("csv-column-mapper", className), children: [
-    importing && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-lg rounded-lg bg-white shadow-xl", children: [
-      /* @__PURE__ */ jsx("div", { className: "bg-primary p-4 text-white", children: /* @__PURE__ */ jsx("h4", { className: "text-lg font-semibold", children: "Processing Employees" }) }),
+    importing && /* @__PURE__ */ jsx("div", { className: "bg-foreground/50 fixed inset-0 z-50 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "bg-card text-card-foreground w-full max-w-lg rounded-lg shadow-xl", children: [
+      /* @__PURE__ */ jsx("div", { className: "bg-primary text-primary-foreground p-4", children: /* @__PURE__ */ jsx("h4", { className: "text-lg font-semibold", children: "Processing Employees" }) }),
       /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-full overflow-hidden rounded-full bg-gray-200", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "bg-muted h-4 w-full overflow-hidden rounded-full", children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "h-full bg-green-500 transition-all duration-300",
+            className: "bg-success h-full transition-all duration-300",
             style: { width: `${importProgress}%` }
           }
         ) }),
@@ -9305,36 +9558,36 @@ function CSVColumnMapper({
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap gap-2", children: [
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
-          type: "button",
+          variant: "primary",
+          size: "sm",
           onClick: () => onBulkAction?.("ignoreAll"),
-          className: "bg-primary hover:bg-primary/90 rounded-lg px-4 py-2 text-white",
           children: ignoreAll
         }
       ),
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
-          type: "button",
+          variant: "primary",
+          size: "sm",
           onClick: () => onBulkAction?.("ignoreUncompleted"),
-          className: "bg-primary hover:bg-primary/90 rounded-lg px-4 py-2 text-white",
           children: ignoreUncompleted
         }
       ),
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
-          type: "button",
+          variant: "primary",
+          size: "sm",
           onClick: () => onBulkAction?.("includeAll"),
-          className: "bg-primary hover:bg-primary/90 rounded-lg px-4 py-2 text-white",
           children: includeAll
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded-lg border border-blue-200 bg-blue-50 p-4", children: [
-      /* @__PURE__ */ jsx("h4", { className: "mb-1 font-semibold text-blue-800", children: ensureAccurateData }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-blue-700", children: ensureAccurateDataDescription })
+    /* @__PURE__ */ jsxs("div", { className: "bg-primary/10 border-primary/30 mb-4 rounded-lg border p-4", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-primary-800 dark:text-primary-200 mb-1 font-semibold", children: ensureAccurateData }),
+      /* @__PURE__ */ jsx("p", { className: "text-primary-700 dark:text-primary-300 text-sm", children: ensureAccurateDataDescription })
     ] }),
     /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-4", children: instructions }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: columns.map((column, index) => /* @__PURE__ */ jsx(
@@ -9346,21 +9599,11 @@ function CSVColumnMapper({
         childFieldOptions: column.mappedTo ? childFieldOptions[column.mappedTo] : void 0,
         onMappingChange: (mappedTo, childField) => onColumnChange?.(index, mappedTo, childField),
         onIgnoreToggle: (ignored) => onIgnoreToggle?.(index, ignored),
-        formatHtmlId,
-        labels: { ignore, include, incomingSample, fieldType }
+        formatHtmlId
       },
       column.name
     )) }),
-    /* @__PURE__ */ jsx("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: onImport,
-        disabled: importing,
-        className: "rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700 disabled:bg-gray-300",
-        children: importLabel
-      }
-    ) })
+    /* @__PURE__ */ jsx("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onImport, disabled: importing, children: importLabel }) })
   ] });
 }
 function CSVColumnCard({
@@ -9370,112 +9613,158 @@ function CSVColumnCard({
   childFieldOptions,
   onMappingChange,
   onIgnoreToggle,
-  formatHtmlId,
-  labels
+  formatHtmlId
 }) {
   const needsMapping = !column.ignored && !column.mappedTo;
   const hasError = column.hasError || needsMapping;
+  const selectOptions = fieldOptions.map((opt) => ({
+    value: opt.value,
+    label: opt.label,
+    disabled: opt.disabled
+  }));
+  const childSelectOptions = childFieldOptions?.map(
+    (opt) => ({
+      value: opt.value,
+      label: opt.label,
+      disabled: opt.disabled
+    })
+  );
+  const isMapped = !!column.mappedTo && !column.ignored;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "rounded-lg border bg-white shadow-sm",
-        column.ignored && "opacity-50",
-        hasError && !column.ignored && "border-red-500"
+        "bg-card text-card-foreground rounded-xl border-2 shadow-sm",
+        column.ignored ? "border-border opacity-50" : isMapped ? "border-success/30" : "border-warning/30"
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "border-b bg-gray-50 p-3", children: /* @__PURE__ */ jsx(
-          "h6",
-          {
-            className: "truncate text-center text-sm font-medium",
-            title: column.name,
-            children: column.name
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: labels.incomingSample }),
-            /* @__PURE__ */ jsx("div", { className: "truncate text-sm", title: column.sampleValue, children: column.sampleValue || /* @__PURE__ */ jsx("em", { className: "text-muted-foreground", children: "Empty" }) })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-3", children: [
+          !column.ignored && (isMapped ? /* @__PURE__ */ jsx("span", { className: "bg-success text-success-foreground flex h-5 w-5 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "h-3 w-3",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 3,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M5 13l4 4L19 7"
+                }
+              )
+            }
+          ) }) : /* @__PURE__ */ jsx("span", { className: "bg-warning text-warning-foreground flex h-5 w-5 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxs("svg", { className: "h-3 w-3", fill: "currentColor", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4", className: "fill-warning" })
+          ] }) })),
+          /* @__PURE__ */ jsx("h6", { className: "truncate text-sm font-semibold", title: column.name, children: column.name })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4 px-4 pb-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: "Sample Data" }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "bg-muted truncate rounded-md px-3 py-2 font-mono text-sm",
+                title: column.sampleValue,
+                children: column.sampleValue || /* @__PURE__ */ jsx("em", { className: "text-muted-foreground", children: "Empty" })
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx("hr", { className: "my-3" }),
-          /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-            /* @__PURE__ */ jsx("label", { htmlFor: formatHtmlId(column.name), className: "sr-only", children: labels.fieldType }),
-            /* @__PURE__ */ jsxs(
-              "select",
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: "Map to Field" }),
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                id: formatHtmlId(column.name),
-                value: column.mappedTo || "",
-                onChange: (e) => onMappingChange(e.target.value, void 0),
-                disabled: column.ignored,
                 className: cn(
-                  "w-full rounded-lg border p-2 text-sm",
-                  column.ignored && "cursor-not-allowed bg-gray-100"
+                  "rounded-md",
+                  hasError && !column.ignored && "ring-warning/50 ring-2"
                 ),
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select field..." }),
-                  fieldOptions.map((opt) => /* @__PURE__ */ jsx(
-                    "option",
-                    {
-                      value: opt.value,
-                      disabled: opt.disabled,
-                      className: opt.disabled ? "text-red-500" : "",
-                      children: opt.label
-                    },
-                    opt.value
-                  ))
-                ]
+                children: /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    id: formatHtmlId(column.name),
+                    options: selectOptions,
+                    value: column.mappedTo || "",
+                    onValueChange: (value) => onMappingChange(value, void 0),
+                    disabled: column.ignored,
+                    placeholder: "Select a field...",
+                    size: "sm",
+                    hideLabel: true,
+                    className: cn(
+                      hasError && !column.ignored && "border-warning text-warning placeholder:text-warning"
+                    )
+                  }
+                )
               }
             )
           ] }),
-          childFieldOptions && childFieldOptions.length > 0 && column.mappedTo && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+          childSelectOptions && childSelectOptions.length > 0 && column.mappedTo && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: "Sub-field" }),
             /* @__PURE__ */ jsx(
-              "label",
-              {
-                htmlFor: formatHtmlId(column.name, column.mappedTo),
-                className: "sr-only",
-                children: "Sub-field"
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "select",
+              Select,
               {
                 id: formatHtmlId(column.name, column.mappedTo),
+                options: childSelectOptions,
                 value: column.childField || "",
-                onChange: (e) => onMappingChange(column.mappedTo, e.target.value),
+                onValueChange: (value) => onMappingChange(column.mappedTo, value),
                 disabled: column.ignored,
-                className: cn(
-                  "w-full rounded-lg border p-2 text-sm",
-                  column.ignored && "cursor-not-allowed bg-gray-100"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select sub-field..." }),
-                  childFieldOptions.map((opt) => /* @__PURE__ */ jsx(
-                    "option",
-                    {
-                      value: opt.value,
-                      disabled: opt.disabled,
-                      className: opt.disabled ? "text-red-500" : "",
-                      children: opt.label
-                    },
-                    opt.value
-                  ))
-                ]
+                placeholder: "Select sub-field...",
+                size: "sm",
+                hideLabel: true
               }
             )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "border-t bg-gray-50 p-3 text-center", children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => onIgnoreToggle(!column.ignored),
-            className: cn(
-              "w-full rounded-lg px-4 py-2 text-sm font-medium",
-              column.ignored ? "bg-red-600 text-white hover:bg-red-700" : "bg-primary hover:bg-primary/90 text-white"
-            ),
-            children: column.ignored ? labels.include : labels.ignore
-          }
-        ) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onIgnoreToggle(!column.ignored),
+              className: "text-muted-foreground hover:text-foreground mx-auto flex items-center gap-1 text-xs transition-colors",
+              children: [
+                column.ignored ? /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "h-3 w-3",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M12 4v16m8-8H4"
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "h-3 w-3",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M6 18L18 6M6 6l12 12"
+                      }
+                    )
+                  }
+                ),
+                column.ignored ? "Include Column" : "Ignore Column"
+              ]
+            }
+          )
+        ] })
       ]
     }
   );
@@ -9525,7 +9814,7 @@ function CSVFileUpload({
     {
       className: cn(
         "flex min-h-[300px] flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 text-center transition-colors",
-        isDragging ? "border-primary bg-primary/5" : "border-gray-300 bg-gray-50",
+        isDragging ? "border-primary bg-primary/5" : "border-border bg-muted",
         className
       ),
       onDrop: handleDrop,
@@ -9547,14 +9836,14 @@ function CSVFileUpload({
           /* @__PURE__ */ jsx("div", { className: "border-primary h-12 w-12 animate-spin rounded-full border-4 border-t-transparent" }),
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4", children: "Processing file..." })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("i", { className: "fas fa-file-csv mb-4 text-5xl text-gray-400" }),
+          /* @__PURE__ */ jsx("i", { className: "fas fa-file-csv text-muted-foreground mb-4 text-5xl" }),
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-4 text-lg", children: selectFile }),
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: () => inputRef.current?.click(),
-              className: "bg-primary hover:bg-primary/90 rounded-lg px-6 py-3 text-white",
+              className: "bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg px-6 py-3",
               children: selectButton
             }
           )
@@ -12321,16 +12610,16 @@ function EditUserRoleModal({
   };
   return /* @__PURE__ */ jsxs(Modal, { open, onOpenChange, size: "md", children: [
     /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(ModalTitle, { children: "Edit User Role" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      user && /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-gray-50 p-3 dark:bg-gray-800", children: [
-        /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: user.name }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: user.email })
+    /* @__PURE__ */ jsxs(ModalBody, { className: "space-y-4", children: [
+      user && /* @__PURE__ */ jsxs("div", { className: "bg-muted rounded-lg p-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-foreground font-medium", children: user.name }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: user.email })
       ] }),
-      errorMessage && /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      errorMessage && /* @__PURE__ */ jsx("div", { className: "border-destructive/30 bg-destructive/10 rounded-lg border p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "h-5 w-5 text-red-500",
+            className: "text-destructive h-5 w-5",
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
@@ -12345,7 +12634,7 @@ function EditUserRoleModal({
             )
           }
         ),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: errorMessage })
+        /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: errorMessage })
       ] }) }),
       /* @__PURE__ */ jsx(
         Select,
@@ -12360,13 +12649,13 @@ function EditUserRoleModal({
           }))
         }
       ),
-      selectedRole?.description && /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-blue-700 dark:text-blue-300", children: selectedRole.description }) }),
+      selectedRole?.description && /* @__PURE__ */ jsx("div", { className: "bg-primary/10 rounded-lg p-3", children: /* @__PURE__ */ jsx("p", { className: "text-primary text-sm", children: selectedRole.description }) }),
       selectedRole?.permissions && selectedRole.permissions.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("span", { className: "mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Permissions" }),
+        /* @__PURE__ */ jsx("span", { className: "text-foreground mb-2 block text-sm font-medium", children: "Permissions" }),
         /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: selectedRole.permissions.map((permission) => /* @__PURE__ */ jsx(
           "span",
           {
-            className: "rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-300",
+            className: "bg-muted text-muted-foreground rounded-full px-2 py-1 text-xs font-medium",
             children: permission
           },
           permission
@@ -13850,21 +14139,21 @@ function EmployerServiceModal({
       "Configure Service for ",
       employer?.name || "Employer"
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      errorMessage && /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: errorMessage }) }),
-      service && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-blue-900 dark:text-blue-100", children: service.name }),
-        /* @__PURE__ */ jsxs("p", { className: "text-xs text-blue-600 dark:text-blue-400", children: [
+    /* @__PURE__ */ jsxs(ModalBody, { className: "space-y-4", children: [
+      errorMessage && /* @__PURE__ */ jsx("div", { className: "border-destructive/30 bg-destructive/10 rounded-lg border p-3", children: /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: errorMessage }) }),
+      service && /* @__PURE__ */ jsxs("div", { className: "border-primary/30 bg-primary/10 rounded-lg border p-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-primary text-sm font-medium", children: service.name }),
+        /* @__PURE__ */ jsxs("p", { className: "text-primary/80 text-xs", children: [
           "Base price: $",
           service.basePrice.toFixed(2)
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Pricing" }),
+        /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm font-medium", children: "Pricing" }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-900 dark:text-white", children: "Use Base Price" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Use the service's default pricing" })
+            /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm", children: "Use Base Price" }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Use the service's default pricing" })
           ] }),
           /* @__PURE__ */ jsx(
             Switch,
@@ -13878,17 +14167,17 @@ function EmployerServiceModal({
             }
           )
         ] }),
-        !config.useBasePrice && /* @__PURE__ */ jsxs("div", { className: "ml-4 border-l-2 border-gray-200 pl-4 dark:border-gray-700", children: [
+        !config.useBasePrice && /* @__PURE__ */ jsxs("div", { className: "border-border ml-4 border-l-2 pl-4", children: [
           /* @__PURE__ */ jsx(
             "label",
             {
               htmlFor: "custom-price",
-              className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300",
+              className: "text-foreground mb-1 block text-sm font-medium",
               children: "Custom Price"
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "relative w-40", children: [
-            /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-gray-500", children: "$" }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground absolute top-1/2 left-3 -translate-y-1/2", children: "$" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -13896,7 +14185,7 @@ function EmployerServiceModal({
                 type: "number",
                 min: "0",
                 step: "0.01",
-                className: "w-full rounded-md border border-gray-300 py-2 pr-4 pl-7 shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white",
+                className: "border-input bg-background text-foreground focus:ring-ring w-full rounded-md border py-2 pr-4 pl-7 shadow-sm focus:ring-2 focus:outline-none",
                 value: config.customPrice ?? "",
                 onChange: (e) => setConfig((prev) => ({
                   ...prev,
@@ -13918,11 +14207,11 @@ function EmployerServiceModal({
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Order Handling" }),
+        /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm font-medium", children: "Order Handling" }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-900 dark:text-white", children: "Auto-Accept Orders" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Automatically accept orders from this employer" })
+            /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm", children: "Auto-Accept Orders" }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Automatically accept orders from this employer" })
           ] }),
           /* @__PURE__ */ jsx(
             Switch,
@@ -13934,8 +14223,8 @@ function EmployerServiceModal({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-900 dark:text-white", children: "Requires Approval" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Orders need manual approval before processing" })
+            /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm", children: "Requires Approval" }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Orders need manual approval before processing" })
           ] }),
           /* @__PURE__ */ jsx(
             Switch,
@@ -13947,11 +14236,11 @@ function EmployerServiceModal({
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Notifications" }),
+        /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm font-medium", children: "Notifications" }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-900 dark:text-white", children: "Notify on New Orders" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Send email when orders are placed" })
+            /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm", children: "Notify on New Orders" }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Send email when orders are placed" })
           ] }),
           /* @__PURE__ */ jsx(
             Switch,
@@ -13961,7 +14250,7 @@ function EmployerServiceModal({
             }
           )
         ] }),
-        config.notifyOnOrder && /* @__PURE__ */ jsx("div", { className: "ml-4 border-l-2 border-gray-200 pl-4 dark:border-gray-700", children: /* @__PURE__ */ jsx(
+        config.notifyOnOrder && /* @__PURE__ */ jsx("div", { className: "border-border ml-4 border-l-2 pl-4", children: /* @__PURE__ */ jsx(
           Input,
           {
             label: "Notification Email",
@@ -13980,7 +14269,7 @@ function EmployerServiceModal({
           "label",
           {
             htmlFor: "employer-service-notes",
-            className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300",
+            className: "text-foreground mb-1 block text-sm font-medium",
             children: "Internal Notes"
           }
         ),
@@ -13988,7 +14277,7 @@ function EmployerServiceModal({
           "textarea",
           {
             id: "employer-service-notes",
-            className: "w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white",
+            className: "border-input bg-background text-foreground focus:ring-ring w-full rounded-md border px-3 py-2 shadow-sm focus:ring-2 focus:outline-none",
             rows: 3,
             value: config.notes || "",
             onChange: (e) => setConfig((prev) => ({ ...prev, notes: e.target.value })),
@@ -14243,24 +14532,27 @@ function AccessDeniedPage({
   );
 }
 function ActionButton({ label, onClick, href, variant }) {
-  const baseClasses = "px-6 py-2.5 rounded-lg font-medium transition-colors min-w-[140px]";
-  const variantClasses = variant === "primary" ? "bg-primary-600 text-white hover:bg-primary-700" : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600";
   if (href) {
     return /* @__PURE__ */ jsx(
       "a",
       {
         href,
-        className: cn(baseClasses, variantClasses, "inline-block text-center"),
+        className: cn(
+          buttonVariants({ variant, size: "md" }),
+          "min-w-[140px] text-center"
+        ),
         children: label
       }
     );
   }
   return /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
       type: "button",
       onClick,
-      className: cn(baseClasses, variantClasses),
+      variant,
+      size: "md",
+      className: "min-w-[140px]",
       children: label
     }
   );
@@ -15251,7 +15543,7 @@ function HRISProviderSelector({
     return d.toLocaleString();
   };
   if (currentProvider) {
-    return /* @__PURE__ */ jsx("div", { className: cn("hris-provider-selector", className), children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-gray-50 p-4", children: [
+    return /* @__PURE__ */ jsx("div", { className: cn("hris-provider-selector", className), children: /* @__PURE__ */ jsxs("div", { className: "border-border bg-muted/50 rounded-lg border p-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-center", children: [
         currentProvider.logoUrl && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(
           "img",
@@ -15262,7 +15554,7 @@ function HRISProviderSelector({
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsx("h4", { className: "text-lg font-bold", children: currentProvider.displayName }),
+          /* @__PURE__ */ jsx("h4", { className: "text-foreground text-lg font-bold", children: currentProvider.displayName }),
           /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-sm", children: [
             "Your data will automatically sync as we receive updates from",
             " ",
@@ -15287,7 +15579,7 @@ function HRISProviderSelector({
             " ",
             /* @__PURE__ */ jsx("span", { className: "text-primary", children: formatLastSync(currentProvider.lastSync) })
           ] }),
-          !currentProvider.lastSync && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg border border-yellow-300 bg-yellow-50 p-3 text-yellow-800", children: [
+          !currentProvider.lastSync && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg border border-yellow-400 bg-yellow-50 p-3 text-yellow-800 dark:border-yellow-600 dark:bg-yellow-900/30 dark:text-yellow-300", children: [
             /* @__PURE__ */ jsx("i", { className: "fas fa-exclamation-triangle text-lg" }),
             /* @__PURE__ */ jsx("span", { className: "text-sm", children: syncPending })
           ] })
@@ -15299,7 +15591,7 @@ function HRISProviderSelector({
           {
             type: "button",
             onClick: onDisconnect,
-            className: "rounded-lg border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-100",
+            className: "border-border bg-card text-foreground hover:bg-muted rounded-lg border px-4 py-2",
             children: [
               /* @__PURE__ */ jsx("i", { className: "fas fa-link-slash mr-2" }),
               disconnect
@@ -15323,7 +15615,7 @@ function HRISProviderSelector({
   }
   return /* @__PURE__ */ jsxs("div", { className: cn("hris-provider-selector", className), children: [
     /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-gray-400", children: /* @__PURE__ */ jsx("i", { className: "fas fa-search" }) }),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground absolute top-1/2 left-3 -translate-y-1/2", children: /* @__PURE__ */ jsx("i", { className: "fas fa-search" }) }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -15331,7 +15623,7 @@ function HRISProviderSelector({
           placeholder: search,
           value: searchQuery,
           onChange: (e) => onSearchChange?.(e.target.value),
-          className: "focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 py-2 pr-4 pl-10 focus:ring-1 focus:outline-none"
+          className: "focus:border-primary focus:ring-primary border-input bg-background text-foreground placeholder:text-muted-foreground w-full rounded-lg border py-2 pr-4 pl-10 focus:ring-1 focus:outline-none"
         }
       )
     ] }) }),
@@ -15341,7 +15633,7 @@ function HRISProviderSelector({
         {
           type: "button",
           onClick: onCSVImport,
-          className: "flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-shadow hover:shadow-md",
+          className: "border-border bg-card dark:hover:bg-muted/50 flex flex-col items-center justify-center rounded-lg border p-4 shadow-sm transition-shadow hover:shadow-md",
           children: [
             /* @__PURE__ */ jsxs("div", { className: "mb-3 flex h-16 w-16 items-center justify-center", children: [
               /* @__PURE__ */ jsx(
@@ -15358,19 +15650,19 @@ function HRISProviderSelector({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx("i", { className: "fas fa-file-csv hidden text-4xl text-gray-400" })
+              /* @__PURE__ */ jsx("i", { className: "fas fa-file-csv text-muted-foreground hidden text-4xl" })
             ] }),
-            /* @__PURE__ */ jsx("span", { className: "text-center text-sm font-medium", children: importCSV })
+            /* @__PURE__ */ jsx("span", { className: "text-foreground text-center text-sm font-medium", children: importCSV })
           ]
         }
       ),
       loading && /* @__PURE__ */ jsx(Fragment, { children: [1, 2, 3, 4, 5, 6].map((i) => /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm",
+          className: "border-border bg-card flex flex-col items-center justify-center rounded-lg border p-4 shadow-sm",
           children: [
-            /* @__PURE__ */ jsx("div", { className: "mb-3 h-16 w-16 animate-pulse rounded-lg bg-gray-200" }),
-            /* @__PURE__ */ jsx("div", { className: "h-4 w-20 animate-pulse rounded bg-gray-200" })
+            /* @__PURE__ */ jsx("div", { className: "bg-muted mb-3 h-16 w-16 animate-pulse rounded-lg" }),
+            /* @__PURE__ */ jsx("div", { className: "bg-muted h-4 w-20 animate-pulse rounded" })
           ]
         },
         i
@@ -15380,17 +15672,25 @@ function HRISProviderSelector({
         {
           type: "button",
           onClick: () => onProviderSelect?.(provider),
-          className: "flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-shadow hover:shadow-md",
+          className: "border-border bg-card dark:hover:bg-muted/50 flex flex-col items-center justify-center rounded-lg border p-4 shadow-sm transition-shadow hover:shadow-md",
           children: [
-            /* @__PURE__ */ jsx("div", { className: "mb-3 flex h-16 w-16 items-center justify-center", children: provider.logoUrl ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: provider.logoUrl,
-                alt: provider.displayName,
-                className: "max-h-full max-w-full object-contain"
-              }
-            ) : /* @__PURE__ */ jsx("i", { className: "fas fa-building text-4xl text-gray-400" }) }),
-            /* @__PURE__ */ jsx("span", { className: "text-center text-sm font-medium", children: provider.displayName })
+            /* @__PURE__ */ jsx("div", { className: "mb-3 flex h-16 w-16 items-center justify-center", children: provider.logoUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: provider.logoUrl,
+                  alt: provider.displayName,
+                  className: "max-h-full max-w-full object-contain",
+                  onError: (e) => {
+                    e.currentTarget.style.display = "none";
+                    const fallback = e.currentTarget.nextElementSibling;
+                    if (fallback) fallback.classList.remove("hidden");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "bg-muted text-muted-foreground hidden h-12 w-12 items-center justify-center rounded-lg text-lg font-bold", children: provider.displayName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() })
+            ] }) : /* @__PURE__ */ jsx("div", { className: "bg-muted text-muted-foreground flex h-12 w-12 items-center justify-center rounded-lg text-lg font-bold", children: provider.displayName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) }),
+            /* @__PURE__ */ jsx("span", { className: "text-foreground text-center text-sm font-medium", children: provider.displayName })
           ]
         },
         provider.id
@@ -15452,22 +15752,22 @@ function InventoryManager({
   const previewChange = updateAmount ? updateType === "credit" ? currentInventory + parseInt(updateAmount, 10) : currentInventory - parseInt(updateAmount, 10) : null;
   return /* @__PURE__ */ jsxs("div", { className, children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Remaining Inventory" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: [
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: "Remaining Inventory" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "text-foreground text-2xl font-bold", children: [
         currentInventory,
         " ",
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-normal text-gray-500", children: "units" })
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm font-normal", children: "units" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("hr", { className: "mb-4 border-gray-200 dark:border-gray-700" }),
+    /* @__PURE__ */ jsx("hr", { className: "border-border mb-4" }),
     /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx("h4", { className: "text-base font-semibold text-gray-900 dark:text-white", children: "Inventory Log" }),
+      /* @__PURE__ */ jsx("h4", { className: "text-foreground text-base font-semibold", children: "Inventory Log" }),
       onUpdateClick && /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
           onClick: onUpdateClick,
-          className: "flex items-center gap-1 text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
+          className: "text-primary hover:text-primary/80 flex items-center gap-1 text-sm font-medium",
           children: [
             "Update Inventory",
             /* @__PURE__ */ jsx(
@@ -15492,26 +15792,26 @@ function InventoryManager({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("hr", { className: "mb-4 border-gray-200 dark:border-gray-700" }),
+    /* @__PURE__ */ jsx("hr", { className: "border-border mb-4" }),
     logEntries.length > 0 ? /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-gray-200 dark:border-gray-700", children: [
-        /* @__PURE__ */ jsx("th", { className: "py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400", children: "Date" }),
-        /* @__PURE__ */ jsx("th", { className: "py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400", children: "User" }),
-        /* @__PURE__ */ jsx("th", { className: "py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400", children: "Change" }),
-        /* @__PURE__ */ jsx("th", { className: "py-2 text-right text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400", children: "Quantity" })
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-border border-b", children: [
+        /* @__PURE__ */ jsx("th", { className: "text-muted-foreground py-2 text-left text-xs font-medium tracking-wider uppercase", children: "Date" }),
+        /* @__PURE__ */ jsx("th", { className: "text-muted-foreground py-2 text-left text-xs font-medium tracking-wider uppercase", children: "User" }),
+        /* @__PURE__ */ jsx("th", { className: "text-muted-foreground py-2 text-left text-xs font-medium tracking-wider uppercase", children: "Change" }),
+        /* @__PURE__ */ jsx("th", { className: "text-muted-foreground py-2 text-right text-xs font-medium tracking-wider uppercase", children: "Quantity" })
       ] }) }),
-      /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-gray-100 dark:divide-gray-800", children: logEntries.map((entry) => /* @__PURE__ */ jsxs(React46.Fragment, { children: [
+      /* @__PURE__ */ jsx("tbody", { className: "divide-border/50 divide-y", children: logEntries.map((entry) => /* @__PURE__ */ jsxs(React46.Fragment, { children: [
         /* @__PURE__ */ jsxs("tr", { children: [
           /* @__PURE__ */ jsx(
             "td",
             {
-              className: "py-2 text-sm text-gray-600 dark:text-gray-400",
+              className: "text-muted-foreground py-2 text-sm",
               title: formatDate2(entry.createdAt),
               children: formatRelativeTime(entry.createdAt)
             }
           ),
-          /* @__PURE__ */ jsx("td", { className: "py-2 text-sm text-gray-600 dark:text-gray-400", children: entry.createdBy.name }),
-          /* @__PURE__ */ jsx("td", { className: "py-2 text-sm text-gray-600 dark:text-gray-400", children: entry.type === "credit" ? "Added" : "Removed" }),
+          /* @__PURE__ */ jsx("td", { className: "text-muted-foreground py-2 text-sm", children: entry.createdBy.name }),
+          /* @__PURE__ */ jsx("td", { className: "text-muted-foreground py-2 text-sm", children: entry.type === "credit" ? "Added" : "Removed" }),
           /* @__PURE__ */ jsx("td", { className: "py-2 text-right text-sm", children: /* @__PURE__ */ jsxs(
             "span",
             {
@@ -15557,16 +15857,16 @@ function InventoryManager({
             }
           ) })
         ] }),
-        entry.memo && /* @__PURE__ */ jsx("tr", { className: "bg-gray-50 dark:bg-gray-800/50", children: /* @__PURE__ */ jsx("td", { colSpan: 4, className: "px-2 py-1 text-right", children: /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 italic dark:text-gray-400", children: [
+        entry.memo && /* @__PURE__ */ jsx("tr", { className: "bg-muted/50", children: /* @__PURE__ */ jsx("td", { colSpan: 4, className: "px-2 py-1 text-right", children: /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs italic", children: [
           "Memo: ",
           entry.memo
         ] }) }) })
       ] }, entry.id)) })
-    ] }) }) : /* @__PURE__ */ jsxs("div", { className: "py-8 text-center text-gray-500 dark:text-gray-400", children: [
+    ] }) }) : /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground py-8 text-center", children: [
       /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "mx-auto mb-3 h-12 w-12 text-gray-300 dark:text-gray-600",
+          className: "text-muted-foreground/50 mx-auto mb-3 h-12 w-12",
           fill: "none",
           viewBox: "0 0 24 24",
           stroke: "currentColor",
@@ -15595,19 +15895,16 @@ function InventoryManager({
         size: "lg",
         children: [
           /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(ModalTitle, { children: "Inventory Manager" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx("h4", { className: "font-semibold text-gray-900 dark:text-white", children: serviceName }) }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("h5", { className: "mb-2 text-sm font-medium text-gray-700 dark:text-gray-300", children: "Update Inventory" }),
-              /* @__PURE__ */ jsx("hr", { className: "mb-3 border-gray-200 dark:border-gray-700" })
-            ] }),
+          /* @__PURE__ */ jsxs(ModalBody, { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h4", { className: "text-foreground text-lg font-semibold", children: serviceName }) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h5", { className: "text-muted-foreground mb-2 text-sm font-medium", children: "Update Inventory" }) }),
             /* @__PURE__ */ jsxs("div", { className: "flex gap-0", children: [
               /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
                   onClick: () => setUpdateType("debit"),
-                  className: `rounded-l-md border px-4 py-2 text-sm font-medium ${updateType === "debit" ? "border-blue-600 bg-blue-600 text-white" : "border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"} `,
+                  className: `rounded-l-md border px-4 py-2 text-sm font-medium transition-colors ${updateType === "debit" ? "border-primary bg-primary text-primary-foreground" : "border-input bg-card text-foreground hover:bg-muted"} `,
                   children: [
                     /* @__PURE__ */ jsx(
                       "svg",
@@ -15636,7 +15933,7 @@ function InventoryManager({
                 {
                   type: "button",
                   onClick: () => setUpdateType("credit"),
-                  className: `rounded-r-md border-t border-r border-b px-4 py-2 text-sm font-medium ${updateType === "credit" ? "border-blue-600 bg-blue-600 text-white" : "border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"} `,
+                  className: `rounded-r-md border-t border-r border-b px-4 py-2 text-sm font-medium transition-colors ${updateType === "credit" ? "border-primary bg-primary text-primary-foreground" : "border-input bg-card text-foreground hover:bg-muted"} `,
                   children: [
                     /* @__PURE__ */ jsx(
                       "svg",
@@ -15682,9 +15979,9 @@ function InventoryManager({
                 rows: 2
               }
             ),
-            previewChange !== null && updateAmount && /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-yellow-50 p-3 dark:bg-yellow-900/20", children: [
-              /* @__PURE__ */ jsx("h5", { className: "mb-2 text-sm font-medium text-yellow-800 dark:text-yellow-200", children: "Description" }),
-              /* @__PURE__ */ jsxs("ul", { className: "list-inside list-disc text-sm text-yellow-700 dark:text-yellow-300", children: [
+            previewChange !== null && updateAmount && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-700 dark:bg-amber-900/20", children: [
+              /* @__PURE__ */ jsx("h5", { className: "mb-2 text-sm font-medium text-amber-800 dark:text-amber-200", children: "Description" }),
+              /* @__PURE__ */ jsxs("ul", { className: "list-inside list-disc text-sm text-amber-700 dark:text-amber-300", children: [
                 /* @__PURE__ */ jsxs("li", { children: [
                   "This will",
                   " ",
@@ -15760,11 +16057,11 @@ function InviteUserModal({
   const isValid = email && roleId;
   return /* @__PURE__ */ jsx(Modal, { open, onOpenChange, size: "lg", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
     /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(ModalTitle, { children: "Invite User" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      entityDisplayName && /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-gray-50 p-3 dark:bg-gray-800", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
+    /* @__PURE__ */ jsxs(ModalBody, { className: "space-y-4", children: [
+      entityDisplayName && /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-lg p-3", children: /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-sm", children: [
         "Inviting user to:",
         " ",
-        /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: entityDisplayName })
+        /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", children: entityDisplayName })
       ] }) }),
       successMessage && /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-800 dark:bg-green-900/20", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
@@ -15861,7 +16158,7 @@ function InviteUserModal({
           "label",
           {
             htmlFor: "invite-message",
-            className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300",
+            className: "text-foreground mb-1 block text-sm font-medium",
             children: "Personal Message (optional)"
           }
         ),
@@ -15869,7 +16166,7 @@ function InviteUserModal({
           "textarea",
           {
             id: "invite-message",
-            className: "w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white",
+            className: "border-input bg-background text-foreground focus:ring-primary w-full rounded-md border px-3 py-2 shadow-sm focus:ring-2 focus:outline-none",
             rows: 3,
             value: message,
             onChange: (e) => setMessage(e.target.value),
@@ -15877,7 +16174,7 @@ function InviteUserModal({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "An email invitation will be sent to this address. If the user doesn't have an account, they'll be prompted to create one." })
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "An email invitation will be sent to this address. If the user doesn't have an account, they'll be prompted to create one." })
     ] }),
     /* @__PURE__ */ jsxs(ModalFooter, { children: [
       /* @__PURE__ */ jsx(
@@ -18485,7 +18782,7 @@ function OnboardingWizard({
   onStepChange,
   onComplete,
   onSkip,
-  logoUrl = "/images/bluehive/logo-white.svg",
+  logoUrl = "https://mieweb.org/wp-content/uploads/2024/03/MIE-NEW-1.png",
   brandName = "BlueHive",
   brandSubname = "for employers",
   loading = false,
@@ -18531,7 +18828,7 @@ function OnboardingWizard({
     "div",
     {
       className: cn(
-        "onboarding-wizard fixed inset-0 z-50 flex flex-col bg-white",
+        "onboarding-wizard bg-background text-foreground fixed inset-0 z-50 flex flex-col",
         className
       ),
       children: [
@@ -18546,78 +18843,55 @@ function OnboardingWizard({
           headerContent
         ] }),
         loading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center", children: [
-          /* @__PURE__ */ jsx("div", { className: "border-primary h-12 w-12 animate-spin rounded-full border-4 border-t-transparent" }),
+          /* @__PURE__ */ jsx(Spinner, { size: "xl" }),
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-center text-lg", children: loadingMessage })
         ] }) : /* @__PURE__ */ jsxs("div", { className: "container mx-auto flex flex-1 flex-col p-4", children: [
-          error && /* @__PURE__ */ jsx("div", { className: "border-destructive bg-destructive/10 text-destructive mb-4 rounded-lg border p-4", children: error }),
+          error && /* @__PURE__ */ jsx(Alert, { variant: "danger", className: "mb-4", children: error }),
           /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: currentStepData?.content }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-auto border-t pt-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "border-border mt-auto border-t pt-4", children: [
             !isLastStep && currentStepData?.skippable !== false && /* @__PURE__ */ jsx("div", { className: "mb-3 flex justify-end", children: /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
-                type: "button",
+                variant: "secondary",
+                size: "sm",
                 onClick: handleSkip,
-                className: "rounded-full bg-gray-800 px-4 py-1.5 text-sm text-white shadow hover:bg-gray-700",
+                className: "rounded-full",
                 children: skip
               }
             ) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-4 bg-white", children: [
-              backEnabled && !isFirstStep ? /* @__PURE__ */ jsxs(
-                "button",
+            /* @__PURE__ */ jsxs("div", { className: "bg-background flex w-full items-center gap-4", children: [
+              /* @__PURE__ */ jsxs(
+                Button,
                 {
-                  type: "button",
+                  variant: "outline",
                   onClick: handleBack,
-                  className: "rounded-lg border border-gray-300 px-6 py-3 text-gray-700 hover:bg-gray-50",
+                  disabled: !backEnabled || isFirstStep,
                   children: [
                     /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: back }),
                     /* @__PURE__ */ jsx("i", { className: "fas fa-chevron-left sm:hidden" })
                   ]
                 }
-              ) : /* @__PURE__ */ jsx("div", {}),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "flex-1",
-                  role: "progressbar",
-                  "aria-label": `Step ${currentStep + 1} of ${totalSteps}`,
-                  "aria-valuenow": progressPercent,
-                  "aria-valuemin": 0,
-                  "aria-valuemax": 100,
-                  children: /* @__PURE__ */ jsx("div", { className: "h-5 w-full overflow-hidden rounded-full bg-gray-200", children: /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: "flex h-full items-center justify-center bg-green-500 text-xs font-medium text-white transition-all duration-300",
-                      style: { width: `${progressPercent}%` },
-                      children: [
-                        currentStep + 1,
-                        " of ",
-                        totalSteps
-                      ]
-                    }
-                  ) })
-                }
               ),
-              isLastStep ? /* @__PURE__ */ jsx(
-                "button",
+              /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+                Progress,
                 {
-                  type: "button",
-                  onClick: handleNext,
-                  className: "bg-primary hover:bg-primary/90 rounded-lg px-6 py-3 text-white",
-                  children: finish
+                  value: progressPercent,
+                  size: "lg",
+                  variant: "success",
+                  showValue: true,
+                  formatValue: () => `${currentStep + 1} of ${totalSteps}`,
+                  label: `Step ${currentStep + 1} of ${totalSteps}`
                 }
-              ) : /* @__PURE__ */ jsxs(
-                "button",
+              ) }),
+              /* @__PURE__ */ jsxs(
+                Button,
                 {
-                  type: "button",
+                  variant: "primary",
                   onClick: handleNext,
-                  disabled: !nextEnabled,
-                  className: cn(
-                    "rounded-lg px-6 py-3 text-white",
-                    nextEnabled ? "bg-primary hover:bg-primary/90" : "cursor-not-allowed bg-gray-300"
-                  ),
+                  disabled: !nextEnabled && !isLastStep,
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: next }),
-                    /* @__PURE__ */ jsx("i", { className: "fas fa-chevron-right sm:hidden" })
+                    /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: isLastStep ? finish : next }),
+                    !isLastStep && /* @__PURE__ */ jsx("i", { className: "fas fa-chevron-right sm:hidden" })
                   ]
                 }
               )
@@ -18639,21 +18913,18 @@ function OnboardingStepQuestion({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "py-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-start gap-3", children: [
-      icon && /* @__PURE__ */ jsx("div", { className: "hidden rounded-full bg-gray-800 p-3 text-white", children: /* @__PURE__ */ jsx("i", { className: cn(icon, "text-lg") }) }),
+      icon && /* @__PURE__ */ jsx("div", { className: "bg-muted text-muted-foreground hidden rounded-full p-3", children: /* @__PURE__ */ jsx("i", { className: cn(icon, "text-lg") }) }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold", children: title }),
+        /* @__PURE__ */ jsx("h3", { className: "text-foreground mb-2 text-2xl font-bold", children: title }),
         description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description })
       ] })
     ] }),
     options.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: options.map((option) => /* @__PURE__ */ jsxs(
-      "button",
+      Button,
       {
-        type: "button",
+        variant: option.selected ? "primary" : "outline",
         onClick: () => onSelect?.(option.id),
-        className: cn(
-          "rounded-full border-2 px-4 py-2 transition-colors",
-          option.selected ? "border-primary bg-primary text-white" : "hover:border-primary border-gray-300 bg-white text-gray-700"
-        ),
+        className: "rounded-full",
         children: [
           option.icon && /* @__PURE__ */ jsx("i", { className: cn(option.icon, "mr-2") }),
           option.label
@@ -18675,63 +18946,39 @@ function OnboardingCompletion({
   if (completed) {
     return /* @__PURE__ */ jsxs("div", { className: "py-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-        /* @__PURE__ */ jsxs("p", { className: "mb-0 text-2xl", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-foreground mb-0 text-2xl", children: [
           /* @__PURE__ */ jsx("i", { className: "fas fa-check-circle mr-2 text-green-500" }),
           "Setup complete!"
         ] }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "You're all set up! You can now start using BlueHive to manage your employees." })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "my-6 flex flex-wrap gap-3", children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: onStartOrder,
-            className: "bg-primary hover:bg-primary/90 rounded-lg px-4 py-2 text-white",
-            children: [
-              /* @__PURE__ */ jsx("i", { className: "fas fa-shopping-cart mr-2" }),
-              "Start your first order"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: onGoToDashboard,
-            className: "rounded-lg border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50",
-            children: [
-              /* @__PURE__ */ jsx("i", { className: "fas fa-tachometer-alt mr-2" }),
-              "Go to Dashboard"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: onGoToEmployees,
-            className: "rounded-lg border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50",
-            children: [
-              /* @__PURE__ */ jsx("i", { className: "fas fa-users mr-2" }),
-              "Go to Employees"
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: onStartOrder, children: [
+          /* @__PURE__ */ jsx("i", { className: "fas fa-shopping-cart mr-2" }),
+          "Start your first order"
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: onGoToDashboard, children: [
+          /* @__PURE__ */ jsx("i", { className: "fas fa-tachometer-alt mr-2" }),
+          "Go to Dashboard"
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: onGoToEmployees, children: [
+          /* @__PURE__ */ jsx("i", { className: "fas fa-users mr-2" }),
+          "Go to Employees"
+        ] })
       ] })
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: "py-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold", children: "Some steps not completed" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-foreground mb-2 text-2xl font-bold", children: "Some steps not completed" }),
       /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "You still need to complete some steps to finish the full guided onboarding. If you're in a hurry, you can skip them for now and come back later." })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: incompleteSteps.map(({ step, label }) => /* @__PURE__ */ jsxs(
-      "button",
+      Button,
       {
-        type: "button",
+        variant: "outline",
         onClick: () => onGoToStep?.(step),
-        className: "border-primary text-primary hover:bg-primary/10 rounded-full border px-4 py-2",
+        className: "rounded-full",
         children: [
           "Step ",
           step,
@@ -18822,13 +19069,13 @@ function OrderCard({
   return /* @__PURE__ */ jsx(
     Card,
     {
-      className: `transition-all duration-200 ${onClick ? "cursor-pointer hover:shadow-md" : ""} ${selected ? "ring-2 ring-blue-500 dark:ring-blue-400" : ""} ${className} `.trim(),
+      className: `transition-all duration-200 ${onClick ? "cursor-pointer hover:shadow-md" : ""} ${selected ? "ring-primary ring-2" : ""} ${className} `.trim(),
       onClick: onClick ? handleCardClick : void 0,
       children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start justify-between gap-4", children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxs("span", { className: "font-semibold text-gray-900 dark:text-white", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-foreground font-semibold", children: [
                 "#",
                 orderNumber
               ] }),
@@ -18837,30 +19084,33 @@ function OrderCard({
             /* @__PURE__ */ jsx(
               "p",
               {
-                className: "mt-1 text-sm text-gray-500 dark:text-gray-400",
+                className: "text-muted-foreground mt-1 text-sm",
                 title: formatDate3(createdAt),
                 children: formatRelativeTime2(createdAt)
               }
             )
           ] }),
-          totalAmount !== void 0 && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 text-right", children: /* @__PURE__ */ jsx("p", { className: "font-semibold text-gray-900 dark:text-white", children: formatCurrency(totalAmount, currency) }) })
+          totalAmount !== void 0 && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 text-right", children: /* @__PURE__ */ jsx("p", { className: "text-foreground font-semibold", children: formatCurrency(totalAmount, currency) }) })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900", children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-blue-600 dark:text-blue-400", children: [
-            employee.firstName[0],
-            employee.lastName[0]
-          ] }) }),
+          /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              name: `${employee.firstName} ${employee.lastName}`,
+              size: "sm"
+            }
+          ),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxs("p", { className: "truncate font-medium text-gray-900 dark:text-white", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-foreground truncate font-medium", children: [
               employee.firstName,
               " ",
               employee.lastName
             ] }),
-            employer && /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-gray-500 dark:text-gray-400", children: employer.name })
+            employer && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground truncate text-sm", children: employer.name })
           ] })
         ] }) }),
         /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-          /* @__PURE__ */ jsxs("p", { className: "mb-1 text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400", children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground mb-1 text-xs font-medium tracking-wider uppercase", children: [
             "Services (",
             services.length,
             ")"
@@ -18869,19 +19119,19 @@ function OrderCard({
             services.slice(0, 3).map((service) => /* @__PURE__ */ jsx(
               "span",
               {
-                className: "inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300",
+                className: "bg-muted text-foreground inline-flex items-center rounded px-2 py-0.5 text-xs font-medium",
                 children: service.name
               },
               service.id
             )),
-            services.length > 3 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400", children: [
+            services.length > 3 && /* @__PURE__ */ jsxs("span", { className: "bg-muted text-muted-foreground inline-flex items-center rounded px-2 py-0.5 text-xs font-medium", children: [
               "+",
               services.length - 3,
               " more"
             ] })
           ] })
         ] }),
-        scheduledDate && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [
+        scheduledDate && /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground mb-3 flex items-center gap-2 text-sm", children: [
           /* @__PURE__ */ jsx(
             "svg",
             {
@@ -18905,18 +19155,18 @@ function OrderCard({
             formatDate3(scheduledDate)
           ] })
         ] }),
-        status === "rejected" && rejectionReason && /* @__PURE__ */ jsxs("div", { className: "mb-3 rounded bg-red-50 p-2 text-sm text-red-700 dark:bg-red-900/20 dark:text-red-300", children: [
+        status === "rejected" && rejectionReason && /* @__PURE__ */ jsxs("div", { className: "bg-destructive/10 text-destructive mb-3 rounded p-2 text-sm", children: [
           /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Reason:" }),
           " ",
           rejectionReason
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-gray-100 pt-3 dark:border-gray-800", children: [
+        /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center justify-between border-t pt-3", children: [
           onView && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: handleViewClick,
-              className: "text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
+              className: "text-primary hover:text-primary/80 text-sm font-medium",
               children: "View Details"
             }
           ),
@@ -18926,7 +19176,7 @@ function OrderCard({
               {
                 type: "button",
                 onClick: handleRejectClick,
-                className: "rounded-md px-3 py-1.5 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20",
+                className: "text-destructive hover:bg-destructive/10 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
                 children: "Reject"
               }
             ),
@@ -18935,7 +19185,7 @@ function OrderCard({
               {
                 type: "button",
                 onClick: handleAcceptClick,
-                className: "rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700",
+                className: "bg-primary hover:bg-primary/90 rounded-md px-3 py-1.5 text-sm font-medium text-white transition-colors",
                 children: "Accept"
               }
             )
@@ -19417,8 +19667,8 @@ function OrderList({
     });
     return counts;
   }, [orders, tabs, getOrderStatus]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 px-4 pb-4 sm:flex-row sm:items-center sm:justify-between", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between", children: [
       /* @__PURE__ */ jsx("div", { className: "flex gap-1 overflow-x-auto", children: tabs.map((tab) => {
         const count = tab.count ?? tabCounts[tab.id];
         return /* @__PURE__ */ jsxs(
@@ -19567,18 +19817,27 @@ function OrderLookupForm({
   };
   const isValid = formData.orderNumber.trim() && formData.dateOfBirth.trim() && formData.lastName.trim();
   return /* @__PURE__ */ jsxs("div", { className: `flex min-h-screen flex-col md:flex-row ${className}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center bg-gradient-to-br from-blue-600 to-blue-800 p-8 text-white md:w-1/2 dark:from-blue-800 dark:to-blue-950", children: [
-      providerLogo ? /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: providerLogo,
-          alt: providerName || "Provider",
-          className: "mb-6 max-h-[100px] max-w-[200px] object-contain"
-        }
-      ) : /* @__PURE__ */ jsx("div", { className: "mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-white/20", children: /* @__PURE__ */ jsx("svg", { className: "h-10 w-10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" }) }) }),
-      providerName && /* @__PURE__ */ jsx("h1", { className: "mb-2 text-center text-2xl font-bold", children: providerName }),
-      /* @__PURE__ */ jsx("p", { className: "max-w-xs text-center text-blue-100", children: welcomeMessage })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex flex-col items-center justify-center p-8 text-white md:w-1/2",
+        style: {
+          background: "linear-gradient(to bottom right, var(--mieweb-primary-600, #1f98ca), var(--mieweb-primary-900, #086285))"
+        },
+        children: [
+          providerLogo ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: providerLogo,
+              alt: providerName || "Provider",
+              className: "mb-6 max-h-[100px] max-w-[200px] object-contain"
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-white/20", children: /* @__PURE__ */ jsx("svg", { className: "h-10 w-10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" }) }) }),
+          providerName && /* @__PURE__ */ jsx("h1", { className: "mb-2 text-center text-2xl font-bold", children: providerName }),
+          /* @__PURE__ */ jsx("p", { className: "max-w-xs text-center text-blue-100", children: welcomeMessage })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center bg-white p-8 md:w-1/2 dark:bg-gray-900", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md", children: [
       /* @__PURE__ */ jsx("h2", { className: "mb-2 text-2xl font-bold text-gray-900 dark:text-white", children: "Order Lookup" }),
       /* @__PURE__ */ jsx("p", { className: "mb-6 text-gray-600 dark:text-gray-400", children: "Enter your order details to view your information." }),
@@ -19841,6 +20100,7 @@ function PageHeader({
   title,
   subtitle,
   icon,
+  iconAlign = "center",
   actions,
   children,
   className = "",
@@ -19862,22 +20122,40 @@ function PageHeader({
     {
       className: ` ${sizeClasses2[size]} ${bordered ? "border-b border-gray-200 dark:border-gray-700" : ""} ${className} `.trim(),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
-            icon && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 text-gray-500 dark:text-gray-400", children: icon }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx(
-                "h1",
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `flex justify-between gap-4 ${iconAlign === "top" ? "items-start" : "items-center"}`,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  className: `${titleSizeClasses[size]} truncate text-gray-900 dark:text-white`,
-                  children: title
+                  className: `flex min-w-0 gap-3 ${iconAlign === "top" ? "items-start" : "items-center"}`,
+                  children: [
+                    icon && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: `flex-shrink-0 text-gray-500 dark:text-gray-400 ${iconAlign === "top" ? "mt-1" : ""}`,
+                        children: icon
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ jsx(
+                        "h1",
+                        {
+                          className: `${titleSizeClasses[size]} truncate text-gray-900 dark:text-white`,
+                          children: title
+                        }
+                      ),
+                      subtitle && /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-sm text-gray-500 dark:text-gray-400", children: subtitle })
+                    ] })
+                  ]
                 }
               ),
-              subtitle && /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-sm text-gray-500 dark:text-gray-400", children: subtitle })
-            ] })
-          ] }),
-          actions && /* @__PURE__ */ jsx("div", { className: "flex flex-shrink-0 items-center gap-2", children: actions })
-        ] }),
+              actions && /* @__PURE__ */ jsx("div", { className: "flex flex-shrink-0 items-center gap-2", children: actions })
+            ]
+          }
+        ),
         children && /* @__PURE__ */ jsx("div", { className: "mt-4", children })
       ]
     }
@@ -23789,7 +24067,7 @@ function ProviderSelector({
     return name.split(" ").map((word) => word[0]).join("").substring(0, 2).toUpperCase();
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), ref: containerRef, children: [
-    label && /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
+    label && /* @__PURE__ */ jsx("label", { className: "text-foreground mb-1 block text-sm font-medium", children: label }),
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -23797,10 +24075,11 @@ function ProviderSelector({
         onClick: () => !disabled && setIsOpen(!isOpen),
         disabled,
         className: cn(
-          "flex w-full items-center gap-3 rounded-lg border bg-white px-3 text-left transition-colors dark:bg-gray-800",
-          "border-gray-300 dark:border-gray-600",
-          "hover:border-gray-400 dark:hover:border-gray-500",
-          "focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none",
+          "flex w-full items-center gap-3 rounded-lg border px-3 text-left transition-colors",
+          "bg-background text-foreground",
+          "border-input",
+          "hover:border-muted-foreground/50",
+          "focus:ring-ring focus:border-transparent focus:ring-2 focus:outline-none",
           "disabled:cursor-not-allowed disabled:opacity-50",
           sizeStyles[size]
         ),
@@ -23809,7 +24088,7 @@ function ProviderSelector({
             /* @__PURE__ */ jsxs(
               "svg",
               {
-                className: "h-5 w-5 animate-spin text-gray-400",
+                className: "text-muted-foreground h-5 w-5 animate-spin",
                 fill: "none",
                 viewBox: "0 0 24 24",
                 children: [
@@ -23835,7 +24114,7 @@ function ProviderSelector({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-400", children: "Loading..." })
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Loading..." })
           ] }) : selectedProvider ? /* @__PURE__ */ jsxs(Fragment, { children: [
             selectedProvider.logoUrl ? /* @__PURE__ */ jsx(
               "img",
@@ -23844,17 +24123,17 @@ function ProviderSelector({
                 alt: selectedProvider.name,
                 className: "h-6 w-6 rounded object-cover"
               }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded bg-blue-100 text-xs font-medium text-blue-600 dark:bg-blue-900 dark:text-blue-300", children: getInitials3(selectedProvider.name) }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "truncate font-medium text-gray-900 dark:text-white", children: selectedProvider.name }),
-              selectedProvider.location && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-gray-500 dark:text-gray-400", children: selectedProvider.location })
+            ) : /* @__PURE__ */ jsx("div", { className: "bg-primary/10 text-primary flex h-6 w-6 items-center justify-center rounded text-xs font-medium", children: getInitials3(selectedProvider.name) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 leading-tight", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-foreground truncate text-sm", children: selectedProvider.name }),
+              selectedProvider.location && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground truncate text-[11px]", children: selectedProvider.location })
             ] })
-          ] }) : /* @__PURE__ */ jsx("span", { className: "flex-1 text-gray-500 dark:text-gray-400", children: placeholder }),
+          ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground flex-1", children: placeholder }),
           /* @__PURE__ */ jsx(
             "svg",
             {
               className: cn(
-                "h-4 w-4 flex-shrink-0 text-gray-400 transition-transform",
+                "text-muted-foreground h-4 w-4 flex-shrink-0 transition-transform",
                 isOpen && "rotate-180"
               ),
               fill: "none",
@@ -23874,12 +24153,12 @@ function ProviderSelector({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs("div", { className: "absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800", children: [
-      searchable && /* @__PURE__ */ jsx("div", { className: "border-b border-gray-200 p-2 dark:border-gray-700", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    isOpen && /* @__PURE__ */ jsxs("div", { className: "border-border bg-card absolute z-50 mt-1 w-full overflow-hidden rounded-lg border shadow-lg", children: [
+      searchable && /* @__PURE__ */ jsx("div", { className: "border-border border-b p-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400",
+            className: "text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2",
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
@@ -23901,20 +24180,20 @@ function ProviderSelector({
             placeholder: searchPlaceholder,
             value: searchQuery,
             onChange: (e) => setSearchQuery(e.target.value),
-            className: "w-full rounded-md border border-gray-300 bg-white py-2 pr-4 pl-9 text-sm text-gray-900 placeholder-gray-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white",
+            className: "border-input bg-background text-foreground placeholder:text-muted-foreground focus:ring-ring w-full rounded-md border py-2 pr-4 pl-9 text-sm focus:ring-1 focus:outline-none",
             autoFocus: true
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto", children: filteredProviders.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-gray-500 dark:text-gray-400", children: "No providers found" }) : filteredProviders.map((provider) => /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto", children: filteredProviders.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground px-4 py-6 text-center", children: "No providers found" }) : filteredProviders.map((provider) => /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
           onClick: () => handleSelect(provider),
           className: cn(
             "flex w-full items-center gap-3 px-4 py-3 text-left transition-colors",
-            "hover:bg-gray-50 dark:hover:bg-gray-700",
-            selectedProvider?.id === provider.id && "bg-blue-50 dark:bg-blue-900/30"
+            "hover:bg-muted",
+            selectedProvider?.id === provider.id && "bg-primary/10"
           ),
           children: [
             provider.logoUrl ? /* @__PURE__ */ jsx(
@@ -23924,23 +24203,23 @@ function ProviderSelector({
                 alt: provider.name,
                 className: "h-8 w-8 rounded object-cover"
               }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded bg-gray-100 text-sm font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300", children: getInitials3(provider.name) }),
+            ) : /* @__PURE__ */ jsx("div", { className: "bg-muted text-muted-foreground flex h-8 w-8 items-center justify-center rounded text-sm font-medium", children: getInitials3(provider.name) }),
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: provider.name }),
-                provider.code && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", children: provider.name }),
+                provider.code && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [
                   "(",
                   provider.code,
                   ")"
                 ] }),
-                provider.isActive === false && /* @__PURE__ */ jsx("span", { className: "rounded bg-gray-200 px-1.5 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-400", children: "Inactive" })
+                provider.isActive === false && /* @__PURE__ */ jsx("span", { className: "bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-xs font-medium", children: "Inactive" })
               ] }),
-              (provider.location || provider.type) && /* @__PURE__ */ jsx("div", { className: "truncate text-sm text-gray-500 dark:text-gray-400", children: [provider.type, provider.location].filter(Boolean).join(" \u2022 ") })
+              (provider.location || provider.type) && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground truncate text-sm", children: [provider.type, provider.location].filter(Boolean).join(" \u2022 ") })
             ] }),
             selectedProvider?.id === provider.id && /* @__PURE__ */ jsx(
               "svg",
               {
-                className: "h-5 w-5 flex-shrink-0 text-blue-500",
+                className: "text-primary h-5 w-5 flex-shrink-0",
                 fill: "none",
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
@@ -24838,19 +25117,19 @@ function QuickLinksCard({
               link.icon && /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: `text-gray-500 dark:text-gray-400 ${layout === "grid" ? "mb-1" : "mr-3"} `,
+                  className: `text-muted-foreground ${layout === "grid" ? "mb-1" : "mr-3"} `,
                   children: link.icon
                 }
               ),
               /* @__PURE__ */ jsxs("span", { className: "flex-1 text-left", children: [
-                /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium text-gray-900 dark:text-white", children: link.label }),
-                link.description && layout !== "grid" && /* @__PURE__ */ jsx("span", { className: "block text-xs text-gray-500 dark:text-gray-400", children: link.description })
+                /* @__PURE__ */ jsx("span", { className: "text-foreground block text-sm font-medium", children: link.label }),
+                link.description && layout !== "grid" && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground block text-xs", children: link.description })
               ] }),
-              link.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-2 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-600 dark:bg-blue-900 dark:text-blue-400", children: link.badge }),
+              link.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "bg-primary/10 ml-2 rounded-full px-2 py-0.5 text-xs font-medium text-[var(--mieweb-primary-700)] dark:text-[var(--mieweb-primary-400)]", children: link.badge }),
               !link.badge && layout !== "grid" && /* @__PURE__ */ jsx(
                 "svg",
                 {
-                  className: "h-4 w-4 text-gray-400",
+                  className: "text-muted-foreground h-4 w-4",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
@@ -24884,9 +25163,13 @@ function RecurringServiceCard({
   onDelete,
   onEdit,
   showProvider = true,
+  state,
   className,
   labels = {}
 }) {
+  if (!service) {
+    return null;
+  }
   const {
     provider = "Provider",
     occurrence = "Occurrence",
@@ -24913,56 +25196,188 @@ function RecurringServiceCard({
   const getOccurrenceLabel = (occ) => {
     return occurrenceLabels[occ] || occ;
   };
+  const effectiveState = state ?? "default";
+  const stateStyles = {
+    default: {
+      border: "border-border",
+      icon: null,
+      showNote: !service?.overrideConsent
+      // Still show consent note if needed
+    },
+    success: {
+      border: "border-success/30",
+      icon: /* @__PURE__ */ jsx("span", { className: "bg-success text-success-foreground flex h-5 w-5 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "h-3 w-3",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: 3,
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M5 13l4 4L19 7"
+            }
+          )
+        }
+      ) }),
+      showNote: false
+    },
+    primary: {
+      border: "border-primary/30",
+      icon: /* @__PURE__ */ jsx("span", { className: "bg-primary text-primary-foreground flex h-5 w-5 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "h-3 w-3",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            }
+          )
+        }
+      ) }),
+      showNote: false
+    },
+    warning: {
+      border: "border-warning/30",
+      icon: /* @__PURE__ */ jsx("span", { className: "bg-warning text-warning-foreground flex h-5 w-5 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxs("svg", { className: "h-3 w-3", fill: "currentColor", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4", className: "fill-warning" })
+      ] }) }),
+      showNote: true
+    },
+    error: {
+      border: "border-destructive/30",
+      icon: /* @__PURE__ */ jsx("span", { className: "bg-destructive text-destructive-foreground flex h-5 w-5 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "h-3 w-3",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: 3,
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M6 18L18 6M6 6l12 12"
+            }
+          )
+        }
+      ) }),
+      showNote: true
+    },
+    disabled: {
+      border: "border-border",
+      icon: null,
+      showNote: false
+    }
+  };
+  const currentStyle = stateStyles[effectiveState];
+  const isDisabled = effectiveState === "disabled";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "rounded-lg border bg-white shadow-sm",
-        onEdit && "cursor-pointer transition-shadow hover:shadow-md",
+        "bg-card text-card-foreground rounded-xl border-2 shadow-sm",
+        currentStyle.border,
+        isDisabled && "opacity-50",
+        onEdit && !isDisabled && "cursor-pointer transition-shadow hover:shadow-md",
         className
       ),
-      onClick: () => onEdit?.(service),
-      role: onEdit ? "button" : void 0,
-      tabIndex: onEdit ? 0 : void 0,
+      onClick: () => !isDisabled && onEdit?.(service),
+      role: onEdit && !isDisabled ? "button" : void 0,
+      tabIndex: onEdit && !isDisabled ? 0 : void 0,
       onKeyDown: (e) => {
-        if (onEdit && (e.key === "Enter" || e.key === " ")) {
+        if (onEdit && !isDisabled && (e.key === "Enter" || e.key === " ")) {
           e.preventDefault();
           onEdit(service);
         }
       },
       children: [
-        /* @__PURE__ */ jsx("div", { className: "border-b bg-gray-50 px-4 py-3", children: /* @__PURE__ */ jsx("h6", { className: "font-medium", children: service.serviceName }) }),
-        /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-          showProvider && service.providerName && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between text-sm", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: provider }),
-            /* @__PURE__ */ jsx("span", { children: service.providerName })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-3", children: [
+          currentStyle.icon,
+          /* @__PURE__ */ jsx(
+            "h6",
+            {
+              className: "truncate text-sm font-semibold",
+              title: service.serviceName,
+              children: service.serviceName
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4 px-4 pb-4", children: [
+          showProvider && service.providerName && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: provider }),
+            /* @__PURE__ */ jsx("div", { className: "bg-muted truncate rounded-md px-3 py-2 text-sm", children: service.providerName })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between text-sm", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: occurrence }),
-            /* @__PURE__ */ jsx("span", { children: getOccurrenceLabel(service.occurrence) })
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: occurrence }),
+            /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-md px-3 py-2 text-sm", children: getOccurrenceLabel(service.occurrence) })
           ] }),
-          /* @__PURE__ */ jsx("hr", { className: "my-3" }),
-          /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between text-sm", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: nextOrder }),
-            /* @__PURE__ */ jsx("span", { title: service.nextOrder?.toString(), children: formatDate4(service.nextOrder) })
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: nextOrder }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "bg-muted rounded-md px-3 py-2 text-sm",
+                title: service.nextOrder?.toString(),
+                children: formatDate4(service.nextOrder)
+              }
+            )
           ] }),
-          !service.overrideConsent && /* @__PURE__ */ jsx("div", { className: "mt-2 text-right text-xs text-red-600", children: consentNote })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "border-t bg-gray-50 px-4 py-3 text-right", children: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              e.stopPropagation();
-              onDelete?.(service);
-            },
-            className: "rounded-lg border border-red-300 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50",
-            children: [
-              /* @__PURE__ */ jsx("i", { className: "fas fa-trash mr-1" }),
-              deleteLabel
-            ]
-          }
-        ) })
+          effectiveState === "warning" && /* @__PURE__ */ jsxs("div", { className: "bg-warning/10 text-warning-800 dark:text-warning-200 rounded-md px-3 py-2 text-xs", children: [
+            /* @__PURE__ */ jsx("i", { className: "fas fa-exclamation-triangle mr-1" }),
+            consentNote
+          ] }),
+          effectiveState === "error" && /* @__PURE__ */ jsxs("div", { className: "bg-destructive/10 text-destructive rounded-md px-3 py-2 text-xs", children: [
+            /* @__PURE__ */ jsx("i", { className: "fas fa-times-circle mr-1" }),
+            consentNote
+          ] }),
+          !isDisabled && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onDelete?.(service);
+              },
+              className: "text-muted-foreground hover:text-destructive mx-auto flex items-center gap-1 text-xs transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "h-3 w-3",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                      }
+                    )
+                  }
+                ),
+                deleteLabel
+              ]
+            }
+          )
+        ] })
       ]
     }
   );
@@ -24978,7 +25393,7 @@ function RecurringServiceAddCard({
       type: "button",
       onClick,
       className: cn(
-        "text-muted-foreground hover:border-primary hover:bg-primary/5 hover:text-primary flex min-h-[200px] w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4 transition-colors",
+        "text-muted-foreground hover:border-primary hover:bg-primary/5 hover:text-primary border-border bg-muted/50 flex min-h-[200px] w-full flex-col items-center justify-center rounded-xl border-2 border-dashed p-4 transition-colors",
         className
       ),
       children: [
@@ -25035,15 +25450,15 @@ function RecurringServiceSetupModal({
     onSave(formData);
   };
   if (!open) return null;
-  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "bg-foreground/50 fixed inset-0 z-50 flex items-center justify-center", children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "w-full max-w-lg rounded-lg bg-white shadow-xl",
+        "bg-card text-card-foreground w-full max-w-lg rounded-lg shadow-xl",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "bg-primary flex items-center justify-between border-b p-4 text-white", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bg-primary text-primary-foreground flex items-center justify-between p-4", children: [
           /* @__PURE__ */ jsx("h4", { className: "text-lg font-semibold", children: title }),
           /* @__PURE__ */ jsx(
             "button",
@@ -25057,13 +25472,13 @@ function RecurringServiceSetupModal({
         ] }),
         /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "p-6", children: [
           showProviderSelector && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium", children: provider }),
+            /* @__PURE__ */ jsx("label", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: provider }),
             /* @__PURE__ */ jsxs(
               "select",
               {
                 value: formData.providerId,
                 onChange: (e) => setFormData({ ...formData, providerId: e.target.value }),
-                className: "w-full rounded-lg border border-gray-300 p-2",
+                className: "bg-card border-input focus:ring-primary w-full rounded-lg border p-2 focus:ring-2 focus:outline-none",
                 required: showProviderSelector,
                 children: [
                   /* @__PURE__ */ jsx("option", { value: "", children: "Select provider..." }),
@@ -25073,13 +25488,13 @@ function RecurringServiceSetupModal({
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium", children: service }),
+            /* @__PURE__ */ jsx("label", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: service }),
             /* @__PURE__ */ jsxs(
               "select",
               {
                 value: formData.serviceId,
                 onChange: (e) => setFormData({ ...formData, serviceId: e.target.value }),
-                className: "w-full rounded-lg border border-gray-300 p-2",
+                className: "bg-card border-input focus:ring-primary w-full rounded-lg border p-2 focus:ring-2 focus:outline-none",
                 required: true,
                 children: [
                   /* @__PURE__ */ jsx("option", { value: "", children: "Select service..." }),
@@ -25089,13 +25504,13 @@ function RecurringServiceSetupModal({
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium", children: occurrence }),
+            /* @__PURE__ */ jsx("label", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: occurrence }),
             /* @__PURE__ */ jsxs(
               "select",
               {
                 value: formData.occurrence,
                 onChange: (e) => setFormData({ ...formData, occurrence: e.target.value }),
-                className: "w-full rounded-lg border border-gray-300 p-2",
+                className: "bg-card border-input focus:ring-primary w-full rounded-lg border p-2 focus:ring-2 focus:outline-none",
                 required: true,
                 children: [
                   /* @__PURE__ */ jsx("option", { value: "monthly", children: "Monthly" }),
@@ -25117,7 +25532,7 @@ function RecurringServiceSetupModal({
                     ...formData,
                     overrideConsent: e.target.checked
                   }),
-                  className: "h-4 w-4 rounded border-gray-300"
+                  className: "border-input accent-primary h-4 w-4 rounded"
                 }
               ),
               /* @__PURE__ */ jsx("span", { className: "text-sm", children: overrideConsent })
@@ -25130,7 +25545,7 @@ function RecurringServiceSetupModal({
               {
                 type: "button",
                 onClick: onClose,
-                className: "rounded-lg border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50",
+                className: "border-border text-muted-foreground hover:bg-muted rounded-lg border px-4 py-2 transition-colors",
                 children: cancel
               }
             ),
@@ -25139,7 +25554,7 @@ function RecurringServiceSetupModal({
               {
                 type: "submit",
                 disabled: saving,
-                className: "bg-primary hover:bg-primary/90 rounded-lg px-4 py-2 text-white disabled:bg-gray-300",
+                className: "bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground rounded-lg px-4 py-2 transition-colors",
                 children: saving ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsx("i", { className: "fas fa-spinner fa-spin" }),
                   "Saving..."
@@ -25219,16 +25634,16 @@ function RejectionModal({
   };
   return /* @__PURE__ */ jsx(Modal, { open, onOpenChange, size: "md", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
     /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(ModalTitle, { children: title }) }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      (description || itemDescription) && /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-gray-50 p-3 dark:bg-gray-800", children: [
-        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: description }),
-        itemDescription && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium text-gray-900 dark:text-white", children: itemDescription })
+    /* @__PURE__ */ jsxs(ModalBody, { className: "space-y-4", children: [
+      (description || itemDescription) && /* @__PURE__ */ jsxs("div", { className: "bg-muted rounded-lg p-3", children: [
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: description }),
+        itemDescription && /* @__PURE__ */ jsx("p", { className: "text-foreground mt-1 text-sm font-medium", children: itemDescription })
       ] }),
-      variant === "danger" && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20", children: [
+      variant === "danger" && /* @__PURE__ */ jsxs("div", { className: "border-destructive/30 bg-destructive/10 flex items-start gap-3 rounded-lg border p-3", children: [
         /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "mt-0.5 h-5 w-5 flex-shrink-0 text-red-500",
+            className: "text-destructive mt-0.5 h-5 w-5 flex-shrink-0",
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
@@ -25243,14 +25658,17 @@ function RejectionModal({
             )
           }
         ),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: "This action cannot be undone. The affected party will be notified of this rejection." })
+        /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: "This action cannot be undone. The affected party will be notified of this rejection." })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("span", { className: "mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Reason for rejection" }),
+        /* @__PURE__ */ jsx("span", { className: "text-foreground mb-2 block text-sm font-medium", children: "Reason for rejection" }),
         /* @__PURE__ */ jsx("div", { className: "space-y-2", children: reasons.map((reason) => /* @__PURE__ */ jsxs(
           "label",
           {
-            className: `flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors ${selectedReasonId === reason.id ? "border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-900/20" : "border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600"} `,
+            className: cn(
+              "flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors",
+              selectedReasonId === reason.id ? "border-primary bg-primary/10" : "border-border hover:border-muted-foreground/50"
+            ),
             children: [
               /* @__PURE__ */ jsx(
                 "input",
@@ -25260,25 +25678,25 @@ function RejectionModal({
                   value: reason.id,
                   checked: selectedReasonId === reason.id,
                   onChange: (e) => setSelectedReasonId(e.target.value),
-                  className: "h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"
+                  className: "text-primary focus:ring-primary border-border h-4 w-4"
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-900 dark:text-white", children: reason.label }),
-              reason.requiresDetails && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "(requires details)" })
+              /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm", children: reason.label }),
+              reason.requiresDetails && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: "(requires details)" })
             ]
           },
           reason.id
         )) })
       ] }),
       showDetails && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+        /* @__PURE__ */ jsxs("label", { className: "text-foreground mb-1 block text-sm font-medium", children: [
           detailsLabel,
-          needsDetails && /* @__PURE__ */ jsx("span", { className: "ml-1 text-red-500", children: "*" })
+          needsDetails && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
         ] }),
         /* @__PURE__ */ jsx(
           "textarea",
           {
-            className: "w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white",
+            className: "bg-background text-foreground border-input focus:ring-ring w-full rounded-md border px-3 py-2 shadow-sm focus:ring-2 focus:outline-none",
             rows: 3,
             value: details,
             onChange: (e) => setDetails(e.target.value),
@@ -25286,7 +25704,7 @@ function RejectionModal({
             required: needsDetails
           }
         ),
-        needsDetails && !details.trim() && selectedReasonId && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-red-500", children: "Please provide additional details for this rejection reason." })
+        needsDetails && !details.trim() && selectedReasonId && /* @__PURE__ */ jsx("p", { className: "text-destructive mt-1 text-xs", children: "Please provide additional details for this rejection reason." })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(ModalFooter, { children: [
@@ -25589,7 +26007,7 @@ function ReportDashboard({
     ] })
   ] });
 }
-function ResultsEntryForm({
+var ResultsEntryForm = React46.forwardRef(function ResultsEntryForm2({
   employeeFirstName,
   employeeLastName,
   initialData = {},
@@ -25599,7 +26017,7 @@ function ResultsEntryForm({
   onSubmit,
   labels = {},
   className
-}) {
+}, ref) {
   const {
     testResults = "Test Results",
     passed = "Passed",
@@ -25656,39 +26074,60 @@ function ResultsEntryForm({
       (prev) => prev.includes(contactId) ? prev.filter((id) => id !== contactId) : [...prev, contactId]
     );
   };
+  const validateAndSubmit = React46.useCallback(() => {
+    if (!result) {
+      setShowError(true);
+      return;
+    }
+    setShowError(false);
+    onSubmit({
+      result,
+      alternateText: alternateText || void 0,
+      dateDrawn: dateDrawnValue || void 0,
+      dateCompleted: dateCompletedValue || void 0,
+      recommendations: recommendations || void 0,
+      files: files.length > 0 ? files : void 0,
+      providerContacts: selectedContacts.length > 0 ? selectedContacts : void 0,
+      applyToAllServices: applyToAll
+    });
+  }, [
+    result,
+    alternateText,
+    dateDrawnValue,
+    dateCompletedValue,
+    recommendations,
+    files,
+    selectedContacts,
+    applyToAll,
+    onSubmit
+  ]);
+  React46.useImperativeHandle(
+    ref,
+    () => ({
+      submit: validateAndSubmit
+    }),
+    [validateAndSubmit]
+  );
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center", children: [
-      /* @__PURE__ */ jsxs("div", { className: "sm:w-1/2", children: [
-        /* @__PURE__ */ jsx("span", { className: "mr-2 font-semibold", children: testResults }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-2 flex gap-4 sm:mt-0 sm:inline-flex", children: [
-          /* @__PURE__ */ jsx(
-            Radio,
-            {
-              name: "result",
-              value: "passed",
-              label: passed,
-              checked: result === "passed",
-              onChange: () => {
-                setResult("passed");
-                setShowError(false);
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Radio,
-            {
-              name: "result",
-              value: "failed",
-              label: failed,
-              checked: result === "failed",
-              onChange: () => {
-                setResult("failed");
-                setShowError(false);
-              }
-            }
-          )
-        ] })
-      ] }),
+      /* @__PURE__ */ jsx("div", { className: "sm:w-1/2", children: /* @__PURE__ */ jsxs(
+        RadioGroup,
+        {
+          name: "result",
+          label: testResults,
+          value: result ?? "",
+          onValueChange: (value) => {
+            setResult(value);
+            setShowError(false);
+          },
+          orientation: "horizontal",
+          error: showError ? pleaseSelectResult : void 0,
+          children: [
+            /* @__PURE__ */ jsx(Radio, { value: "passed", label: passed }),
+            /* @__PURE__ */ jsx(Radio, { value: "failed", label: failed })
+          ]
+        }
+      ) }),
       /* @__PURE__ */ jsx("div", { className: "sm:w-1/2", children: /* @__PURE__ */ jsx(
         Input,
         {
@@ -25864,57 +26303,122 @@ function ResultsEntryForm({
     ] }),
     showError && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm font-medium", children: pleaseSelectResult })
   ] });
-}
-function ResultsEntryCard({
+});
+function ResultsEntryModal({
   serviceName,
   employeeFirstName,
   employeeLastName,
-  isOpen = true,
-  onClose,
+  open,
+  onOpenChange,
   onSubmit,
+  isSubmitting = false,
   labels = {},
   ...props
 }) {
   const { submit = "Submit", close = "Close" } = labels;
+  const formRef = React46.useRef(null);
   const employeeName = employeeFirstName || employeeLastName ? `${employeeFirstName ?? ""} ${employeeLastName ?? ""}`.trim() : void 0;
-  if (!isOpen) return null;
-  const handleSubmit = (data) => {
-    onSubmit(data);
-    onClose();
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "bg-background w-full max-w-2xl rounded-lg border shadow-lg", children: [
-    /* @__PURE__ */ jsxs("div", { className: "bg-primary text-primary-foreground rounded-t-lg p-4", children: [
-      /* @__PURE__ */ jsx("h4", { className: "text-lg font-semibold", children: serviceName }),
-      employeeName && /* @__PURE__ */ jsx("p", { className: "text-sm opacity-90", children: employeeName })
+  const handleSubmitClick = () => {
+    formRef.current?.submit();
+  };
+  return /* @__PURE__ */ jsxs(Modal, { open, onOpenChange, size: "2xl", children: [
+    /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(ModalTitle, { children: serviceName }) }),
+    /* @__PURE__ */ jsxs(ModalBody, { children: [
+      employeeName && /* @__PURE__ */ jsx("div", { className: "bg-muted mb-4 rounded-lg p-3", children: /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-sm", children: [
+        "Employee:",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", children: employeeName })
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        ResultsEntryForm,
+        {
+          ref: formRef,
+          employeeFirstName,
+          employeeLastName,
+          onSubmit,
+          labels,
+          ...props
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "p-6", children: /* @__PURE__ */ jsx(
-      ResultsEntryForm,
-      {
-        serviceName,
-        employeeFirstName,
-        employeeLastName,
-        onSubmit: handleSubmit,
-        labels,
-        ...props
-      }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3 border-t p-4", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onClose, children: close }),
+    /* @__PURE__ */ jsxs(ModalFooter, { children: [
       /* @__PURE__ */ jsx(
         Button,
         {
-          onClick: () => {
-            const form = document.querySelector("[data-results-form]");
-            if (form) {
-              form.dispatchEvent(new Event("submit", { bubbles: true }));
-            }
-          },
-          children: submit
+          type: "button",
+          variant: "outline",
+          onClick: () => onOpenChange(false),
+          disabled: isSubmitting,
+          children: close
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          onClick: handleSubmitClick,
+          disabled: isSubmitting,
+          children: isSubmitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "mr-2 -ml-1 h-4 w-4 animate-spin",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      className: "opacity-25",
+                      cx: "12",
+                      cy: "12",
+                      r: "10",
+                      stroke: "currentColor",
+                      strokeWidth: "4"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      className: "opacity-75",
+                      fill: "currentColor",
+                      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    }
+                  )
+                ]
+              }
+            ),
+            "Processing..."
+          ] }) : submit
         }
       )
     ] })
   ] });
 }
+function ResultsEntryCard({
+  isOpen,
+  onClose,
+  onSubmit,
+  ...restProps
+}) {
+  const handleSubmit = (data) => {
+    onSubmit(data);
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(
+    ResultsEntryModal,
+    {
+      open: isOpen,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) {
+          onClose();
+        }
+      },
+      onSubmit: handleSubmit,
+      ...restProps
+    }
+  );
+}
 function ScheduleCalendar({
   appointments,
   selectedDate = /* @__PURE__ */ new Date(),
@@ -27112,42 +27616,42 @@ function ServiceCard({
   return /* @__PURE__ */ jsx(
     Card,
     {
-      className: `h-full transition-all duration-200 ${onClick ? "cursor-pointer hover:shadow-md" : ""} ${selected ? "ring-2 ring-blue-500 dark:ring-blue-400" : ""} ${!currentlyOffered ? "opacity-60" : ""} ${className} `.trim(),
+      className: `h-full transition-all duration-200 ${onClick ? "cursor-pointer hover:shadow-md" : ""} ${selected ? "ring-primary ring-2" : ""} ${!currentlyOffered ? "opacity-60" : ""} ${className} `.trim(),
       onClick: onClick ? handleCardClick : void 0,
       children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col p-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-start justify-between gap-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("h3", { className: "truncate font-semibold text-gray-900 dark:text-white", children: name }),
-            category && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: category })
+            /* @__PURE__ */ jsx("h3", { className: "text-foreground truncate font-semibold", children: name }),
+            category && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-0.5 text-xs", children: category })
           ] }),
           !currentlyOffered && /* @__PURE__ */ jsx(Badge, { variant: "warning", size: "sm", children: "Not Offered" })
         ] }),
-        description && /* @__PURE__ */ jsx("p", { className: "mb-3 line-clamp-2 text-sm text-gray-600 dark:text-gray-400", children: description }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-3 line-clamp-2 text-sm", children: description }),
         tags.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap gap-1", children: [
           tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsx(
             "span",
             {
-              className: "inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-400",
+              className: "bg-muted text-muted-foreground inline-flex items-center rounded px-2 py-0.5 text-xs font-medium",
               children: tag
             },
             tag
           )),
-          tags.length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+          tags.length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [
             "+",
             tags.length - 3
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "mt-auto", children: [
           price !== void 0 && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-baseline justify-between", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500 uppercase dark:text-gray-400", children: "Base Price" }),
-            /* @__PURE__ */ jsx("span", { className: "text-lg font-bold text-gray-900 dark:text-white", children: formatCurrency2(price, currency) })
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-medium uppercase", children: "Base Price" }),
+            /* @__PURE__ */ jsx("span", { className: "text-foreground text-lg font-bold", children: formatCurrency2(price, currency) })
           ] }),
           showInventory && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between text-sm", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-400", children: "Inventory" }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Inventory" }),
             /* @__PURE__ */ jsxs(
               "span",
               {
-                className: `font-medium ${isLowInventory ? "text-red-600 dark:text-red-400" : "text-gray-900 dark:text-white"}`,
+                className: `font-medium ${isLowInventory ? "text-destructive" : "text-foreground"}`,
                 children: [
                   inventoryCount,
                   inventoryTotal && ` / ${inventoryTotal}`
@@ -27155,53 +27659,19 @@ function ServiceCard({
               }
             )
           ] }),
-          (hasCustomAvailability || customPricingCount > 0) && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400", children: [
-            /* @__PURE__ */ jsx(
-              "svg",
-              {
-                className: "h-3.5 w-3.5",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2,
-                    d: "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
-                  }
-                )
-              }
-            ),
+          (hasCustomAvailability || customPricingCount > 0) && /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground mb-3 flex items-center gap-2 text-xs", children: [
+            /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-3.5 w-3.5" }),
             /* @__PURE__ */ jsx("span", { children: customPricingCount > 0 ? `${customPricingCount} custom pricing tier${customPricingCount > 1 ? "s" : ""}` : "Custom availability" })
           ] }),
-          (onEdit || onManage || onDelete) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-gray-100 pt-2 dark:border-gray-800", children: [
+          (onEdit || onManage || onDelete) && /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center gap-2 border-t pt-2", children: [
             onDelete && /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
                 onClick: handleDeleteClick,
-                className: "p-1.5 text-gray-400 transition-colors hover:text-red-500 dark:hover:text-red-400",
+                className: "text-muted-foreground hover:text-destructive p-1.5 transition-colors",
                 title: "Delete service",
-                children: /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    className: "h-4 w-4",
-                    fill: "none",
-                    viewBox: "0 0 24 24",
-                    stroke: "currentColor",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                      }
-                    )
-                  }
-                )
+                children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
               }
             ),
             onEdit && /* @__PURE__ */ jsx(
@@ -27209,26 +27679,9 @@ function ServiceCard({
               {
                 type: "button",
                 onClick: handleEditClick,
-                className: "p-1.5 text-gray-400 transition-colors hover:text-blue-500 dark:hover:text-blue-400",
+                className: "text-muted-foreground hover:text-primary p-1.5 transition-colors",
                 title: "Edit service",
-                children: /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    className: "h-4 w-4",
-                    fill: "none",
-                    viewBox: "0 0 24 24",
-                    stroke: "currentColor",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                      }
-                    )
-                  }
-                )
+                children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
               }
             ),
             onManage && /* @__PURE__ */ jsx(
@@ -27236,7 +27689,7 @@ function ServiceCard({
               {
                 type: "button",
                 onClick: handleManageClick,
-                className: "rounded px-3 py-1 text-sm font-medium text-blue-600 transition-colors hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20",
+                className: "text-primary hover:bg-primary/10 ml-auto rounded px-3 py-1 text-sm font-medium transition-colors",
                 children: "Manage"
               }
             )
@@ -27253,28 +27706,11 @@ function AddServiceCard({
   return /* @__PURE__ */ jsx(
     Card,
     {
-      className: `h-full cursor-pointer border-2 border-dashed border-gray-300 bg-gray-50 transition-all duration-200 hover:border-blue-400 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800/50 dark:hover:border-blue-500 dark:hover:bg-gray-800 ${className} `.trim(),
+      className: `border-border bg-muted/50 hover:border-primary hover:bg-muted h-full cursor-pointer border-2 border-dashed transition-all duration-200 ${className} `.trim(),
       onClick,
       children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-[160px] flex-col items-center justify-center p-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700", children: /* @__PURE__ */ jsx(
-          "svg",
-          {
-            className: "h-6 w-6 text-gray-500 dark:text-gray-400",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M12 4v16m8-8H4"
-              }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-600 dark:text-gray-400", children: "Add New Service" })
+        /* @__PURE__ */ jsx("div", { className: "bg-muted mb-3 flex h-12 w-12 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(Plus, { className: "text-muted-foreground h-6 w-6" }) }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm font-medium", children: "Add New Service" })
       ] })
     }
   );
@@ -27457,18 +27893,18 @@ function ServiceGeneralSettings({
   ] });
 }
 function ServiceSkeleton() {
-  return /* @__PURE__ */ jsxs("div", { className: "animate-pulse rounded-lg border border-gray-200 p-4 dark:border-gray-700", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "border-border animate-pulse rounded-lg border p-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start justify-between", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-5 w-32 rounded bg-gray-200 dark:bg-gray-700" }),
-      /* @__PURE__ */ jsx("div", { className: "h-5 w-16 rounded bg-gray-200 dark:bg-gray-700" })
+      /* @__PURE__ */ jsx("div", { className: "bg-muted h-5 w-32 rounded" }),
+      /* @__PURE__ */ jsx("div", { className: "bg-muted h-5 w-16 rounded" })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-4 w-full rounded bg-gray-200 dark:bg-gray-700" }),
-      /* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 rounded bg-gray-200 dark:bg-gray-700" })
+      /* @__PURE__ */ jsx("div", { className: "bg-muted h-4 w-full rounded" }),
+      /* @__PURE__ */ jsx("div", { className: "bg-muted h-4 w-3/4 rounded" })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-6 w-20 rounded-full bg-gray-200 dark:bg-gray-700" }),
-      /* @__PURE__ */ jsx("div", { className: "h-6 w-20 rounded-full bg-gray-200 dark:bg-gray-700" })
+      /* @__PURE__ */ jsx("div", { className: "bg-muted h-6 w-20 rounded-full" }),
+      /* @__PURE__ */ jsx("div", { className: "bg-muted h-6 w-20 rounded-full" })
     ] })
   ] });
 }
@@ -27516,7 +27952,7 @@ function ServiceGrid({
       /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "mb-4 h-12 w-12 text-gray-400",
+          className: "text-muted-foreground mb-4 h-12 w-12",
           fill: "none",
           viewBox: "0 0 24 24",
           stroke: "currentColor",
@@ -27531,7 +27967,7 @@ function ServiceGrid({
           )
         }
       ),
-      /* @__PURE__ */ jsx("p", { className: "text-gray-500 dark:text-gray-400", children: emptyMessage })
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: emptyMessage })
     ] });
   }
   return /* @__PURE__ */ jsxs(
@@ -27645,12 +28081,16 @@ function ServicePicker({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("flex flex-col", !fullWidth && "lg:max-w-md", className),
+      className: cn(
+        "bg-card text-card-foreground border-border shadow-card flex flex-col rounded-xl border",
+        !fullWidth && "lg:max-w-md",
+        className
+      ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
-          !hideHeading && /* @__PURE__ */ jsx("h2", { className: "mb-3 text-xl font-bold text-gray-900 dark:text-gray-100", children: heading }),
+          !hideHeading && /* @__PURE__ */ jsx("h2", { className: "text-foreground mb-3 text-xl font-bold", children: heading }),
           showSearch && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3", children: /* @__PURE__ */ jsx(SearchIcon5, { className: "h-5 w-5 text-gray-400" }) }),
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3", children: /* @__PURE__ */ jsx(SearchIcon5, { className: "text-muted-foreground h-5 w-5" }) }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -27665,8 +28105,8 @@ function ServicePicker({
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-3", children: [
-          error && /* @__PURE__ */ jsx("div", { className: "mb-4 rounded-lg bg-red-50 p-4 text-red-700 dark:bg-red-900/20 dark:text-red-400", children: /* @__PURE__ */ jsx("strong", { children: error }) }),
-          loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-gray-500", children: [
+          error && /* @__PURE__ */ jsx("div", { className: "bg-destructive/10 text-destructive mb-4 rounded-lg p-4", children: /* @__PURE__ */ jsx("strong", { children: error }) }),
+          loading ? /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(SpinnerIcon5, { className: "h-5 w-5 animate-spin" }),
             /* @__PURE__ */ jsx("span", { children: "Loading available services..." })
           ] }) : isSearching ? (
@@ -27680,7 +28120,7 @@ function ServicePicker({
                 multiple
               },
               service.id
-            )) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-yellow-50 p-4 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400", children: /* @__PURE__ */ jsx("strong", { children: emptyMessage }) }) }) })
+            )) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { className: "bg-muted text-muted-foreground rounded-lg p-4", children: /* @__PURE__ */ jsx("strong", { children: emptyMessage }) }) }) })
           ) : (
             // Grouped list - accordion style
             /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: filteredGroups.length > 0 ? filteredGroups.map((group) => /* @__PURE__ */ jsx(
@@ -27695,7 +28135,7 @@ function ServicePicker({
                 multiple
               },
               group.id
-            )) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-yellow-50 p-4 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400", children: /* @__PURE__ */ jsx("strong", { children: emptyMessage }) }) }) })
+            )) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { className: "bg-muted text-muted-foreground rounded-lg p-4", children: /* @__PURE__ */ jsx("strong", { children: emptyMessage }) }) }) })
           )
         ] })
       ]
@@ -27723,10 +28163,10 @@ function ServiceGroupItem({
         onClick: () => onToggleGroup(group.id),
         className: cn(
           "flex w-full items-center justify-between rounded-lg px-3 py-2",
-          "text-left text-sm font-medium",
-          "hover:bg-gray-100 dark:hover:bg-gray-800",
+          "text-muted-foreground text-left text-sm font-medium",
+          "hover:bg-muted",
           "transition-colors",
-          depth > 0 && "ml-4 text-gray-600 dark:text-gray-400"
+          depth > 0 && "ml-4"
         ),
         "aria-expanded": isExpanded,
         children: [
@@ -27735,7 +28175,7 @@ function ServiceGroupItem({
             hasSelection && /* @__PURE__ */ jsx(
               "span",
               {
-                className: "bg-brand-500 h-2 w-2 rounded-full",
+                className: "bg-primary h-2 w-2 rounded-full",
                 "aria-label": "Has selected items"
               }
             )
@@ -27744,7 +28184,7 @@ function ServiceGroupItem({
             ChevronIcon2,
             {
               className: cn(
-                "h-5 w-5 transition-transform",
+                "text-muted-foreground h-5 w-5 transition-transform",
                 isExpanded && "rotate-180"
               )
             }
@@ -27791,42 +28231,62 @@ function ServiceItem({
     {
       className: cn(
         "flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2",
-        "hover:bg-gray-100 dark:hover:bg-gray-800",
+        "hover:bg-muted",
         "transition-colors",
         service.disabled && "cursor-not-allowed opacity-50"
       ),
       children: [
-        multiple ? /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: selected,
-            onChange: onToggle,
-            disabled: service.disabled,
-            className: "text-brand-600 focus:ring-brand-500 h-4 w-4 rounded border-gray-300"
-          }
-        ) : /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "radio",
-            checked: selected,
-            onChange: onToggle,
-            disabled: service.disabled,
-            className: "text-brand-600 focus:ring-brand-500 h-4 w-4 border-gray-300"
-          }
-        ),
+        multiple ? /* @__PURE__ */ jsxs("span", { className: "relative inline-flex shrink-0 items-center justify-center", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: selected,
+              onChange: onToggle,
+              disabled: service.disabled,
+              className: cn(
+                "peer h-4 w-4 shrink-0 appearance-none rounded",
+                "border-input bg-background border-2",
+                "cursor-pointer transition-all duration-150",
+                "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                "checked:bg-primary-500 checked:border-primary-500"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(CheckIcon4, { className: "pointer-events-none absolute h-3 w-3 text-white opacity-0 transition-opacity peer-checked:opacity-100" })
+        ] }) : /* @__PURE__ */ jsxs("span", { className: "relative inline-flex shrink-0 items-center justify-center", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              checked: selected,
+              onChange: onToggle,
+              disabled: service.disabled,
+              className: cn(
+                "peer h-4 w-4 shrink-0 appearance-none rounded-full",
+                "border-input bg-background border-2",
+                "cursor-pointer transition-all duration-150",
+                "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                "checked:border-primary-500"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "bg-primary-500 pointer-events-none absolute h-2 w-2 scale-0 rounded-full transition-transform peer-checked:scale-100" })
+        ] }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: service.name }),
-            service.code && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm font-medium", children: service.name }),
+            service.code && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [
               "(",
               service.code,
               ")"
             ] })
           ] }),
-          service.description && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-gray-500 dark:text-gray-400", children: service.description })
+          service.description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground truncate text-xs", children: service.description })
         ] }),
-        service.price !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+        service.price !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-foreground text-sm font-medium", children: [
           "$",
           service.price.toFixed(2)
         ] })
@@ -27834,6 +28294,19 @@ function ServiceItem({
     }
   ) });
 }
+function CheckIcon4({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 3,
+      children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+    }
+  );
+}
 function SearchIcon5({ className }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -28479,7 +28952,7 @@ function SetupServiceModal({
   const isValid = formData.name.trim() && formData.price >= 0;
   return /* @__PURE__ */ jsx(Modal, { open, onOpenChange, size: "lg", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
     /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(ModalTitle, { children: title }) }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs(ModalBody, { className: "min-w-[320px] space-y-4", children: [
       errorMessage && /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: errorMessage }) }),
       showServicePicker && availableServices.length > 0 && /* @__PURE__ */ jsx(
         Select,
@@ -28510,7 +28983,7 @@ function SetupServiceModal({
           "label",
           {
             htmlFor: "setup-service-description",
-            className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300",
+            className: "text-foreground mb-1 block text-sm font-medium",
             children: "Description"
           }
         ),
@@ -28518,7 +28991,7 @@ function SetupServiceModal({
           "textarea",
           {
             id: "setup-service-description",
-            className: "w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white",
+            className: "bg-background text-foreground border-input focus:ring-ring w-full rounded-md border px-3 py-2 shadow-sm focus:ring-2 focus:outline-none",
             rows: 3,
             value: formData.description,
             onChange: (e) => setFormData((prev) => ({
@@ -28547,12 +29020,12 @@ function SetupServiceModal({
           "label",
           {
             htmlFor: "setup-service-price",
-            className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300",
+            className: "text-foreground mb-1 block text-sm font-medium",
             children: "Base Price"
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-gray-500", children: "$" }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground absolute top-1/2 left-3 -translate-y-1/2", children: "$" }),
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -28560,7 +29033,7 @@ function SetupServiceModal({
               type: "number",
               min: "0",
               step: "0.01",
-              className: "w-full rounded-md border border-gray-300 py-2 pr-4 pl-7 shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white",
+              className: "bg-background text-foreground border-input focus:ring-ring w-full rounded-md border py-2 pr-4 pl-7 shadow-sm focus:ring-2 focus:outline-none",
               value: formData.price,
               onChange: (e) => setFormData((prev) => ({
                 ...prev,
@@ -28573,14 +29046,15 @@ function SetupServiceModal({
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-3 pt-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "Currently Offered" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Service is available for orders" })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm font-medium", children: "Currently Offered" }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Service is available for orders" })
           ] }),
           /* @__PURE__ */ jsx(
             Switch,
             {
+              className: "flex-shrink-0",
               checked: formData.currentlyOffered,
               onCheckedChange: (checked) => setFormData((prev) => ({
                 ...prev,
@@ -28589,14 +29063,15 @@ function SetupServiceModal({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "Limited Inventory" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Track inventory for this service" })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm font-medium", children: "Limited Inventory" }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Track inventory for this service" })
           ] }),
           /* @__PURE__ */ jsx(
             Switch,
             {
+              className: "flex-shrink-0",
               checked: formData.limitedInventory,
               onCheckedChange: (checked) => setFormData((prev) => ({
                 ...prev,
@@ -28605,7 +29080,7 @@ function SetupServiceModal({
             }
           )
         ] }),
-        formData.limitedInventory && /* @__PURE__ */ jsx("div", { className: "ml-4 border-l-2 border-gray-200 pl-4 dark:border-gray-700", children: /* @__PURE__ */ jsx(
+        formData.limitedInventory && /* @__PURE__ */ jsx("div", { className: "border-border ml-4 border-l-2 pl-4", children: /* @__PURE__ */ jsx(
           Input,
           {
             label: "Initial Inventory",
@@ -28619,14 +29094,15 @@ function SetupServiceModal({
             placeholder: "Enter quantity"
           }
         ) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "Auto-Accept Referrals" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Automatically accept incoming referrals" })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm font-medium", children: "Auto-Accept Referrals" }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Automatically accept incoming referrals" })
           ] }),
           /* @__PURE__ */ jsx(
             Switch,
             {
+              className: "flex-shrink-0",
               checked: formData.autoAcceptReferrals,
               onCheckedChange: (checked) => setFormData((prev) => ({
                 ...prev,
@@ -30694,7 +31170,7 @@ function SSOConfigForm({
     ] })
   ] });
 }
-function CheckIcon4({ className }) {
+function CheckIcon5({ className }) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -30779,66 +31255,89 @@ function StepIndicator({
     if (allowCompletedStepsOnly) return index <= currentStep;
     return true;
   };
-  return /* @__PURE__ */ jsx(
-    "nav",
+  const circleButton = (step, index, status, clickable) => /* @__PURE__ */ jsx(
+    "button",
     {
-      className: ` ${orientation === "horizontal" ? "flex items-center" : "flex flex-col"} ${sizes.gap} ${className} `.trim(),
-      "aria-label": "Progress",
-      children: steps.map((step, index) => {
-        const status = getStepStatus(index);
-        const isLast = index === steps.length - 1;
-        const clickable = isClickable(index);
-        return /* @__PURE__ */ jsxs(React46.Fragment, { children: [
-          /* @__PURE__ */ jsxs(
+      type: "button",
+      onClick: () => handleStepClick(index),
+      disabled: !clickable,
+      className: `${sizes.circle} flex shrink-0 items-center justify-center rounded-full font-medium transition-all duration-200 focus:ring-2 focus:ring-offset-2 focus:outline-none dark:focus:ring-offset-neutral-900 ${clickable ? "cursor-pointer" : "cursor-default"} ${step.hasError ? "bg-red-100 text-red-600 focus:ring-red-500 dark:bg-red-900/30 dark:text-red-400" : status === "completed" ? "bg-primary-600 focus:ring-primary-500 dark:bg-primary-500 text-white" : status === "current" ? "bg-primary-600 ring-primary-600 focus:ring-primary-500 dark:bg-primary-500 dark:ring-primary-500 text-white ring-2 ring-offset-2 dark:ring-offset-neutral-900" : "bg-neutral-200 text-neutral-500 focus:ring-neutral-400 dark:bg-neutral-700 dark:text-neutral-300"}`.trim(),
+      "aria-current": status === "current" ? "step" : void 0,
+      children: step.hasError ? /* @__PURE__ */ jsx(ErrorIcon, { className: "h-4 w-4" }) : status === "completed" ? step.icon || /* @__PURE__ */ jsx(CheckIcon5, { className: "h-4 w-4" }) : step.icon || /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: status === "current" ? "text-white" : "text-neutral-500 dark:text-neutral-300",
+          children: index + 1
+        }
+      )
+    }
+  );
+  const stepLabel = (step, status, horizontal) => /* @__PURE__ */ jsxs("div", { className: `${horizontal ? "text-center" : "flex-1"} ${sizes.text}`, children: [
+    /* @__PURE__ */ jsxs(
+      "p",
+      {
+        className: `font-medium ${step.hasError ? "text-red-600 dark:text-red-400" : status === "completed" || status === "current" ? "text-neutral-900 dark:text-white" : "text-neutral-500 dark:text-neutral-400"}`.trim(),
+        children: [
+          step.label,
+          step.optional && /* @__PURE__ */ jsxs("span", { className: "font-normal text-neutral-500 dark:text-neutral-400", children: [
+            " ",
+            "(optional)"
+          ] })
+        ]
+      }
+    ),
+    step.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-neutral-500 dark:text-neutral-400", children: step.description })
+  ] });
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsx("nav", { className: `flex ${className}`.trim(), "aria-label": "Progress", children: steps.map((step, index) => {
+      const status = getStepStatus(index);
+      const isLast = index === steps.length - 1;
+      const clickable = isClickable(index);
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center", children: [
+          index > 0 ? /* @__PURE__ */ jsx(
             "div",
             {
-              className: `flex items-center ${orientation === "vertical" ? "flex-row" : "flex-col"} ${sizes.gap} `.trim(),
-              children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => handleStepClick(index),
-                    disabled: !clickable,
-                    className: ` ${sizes.circle} flex items-center justify-center rounded-full font-medium transition-all duration-200 focus:ring-2 focus:ring-offset-2 focus:outline-none ${clickable ? "cursor-pointer" : "cursor-default"} ${step.hasError ? "bg-red-100 text-red-600 focus:ring-red-500 dark:bg-red-900/30 dark:text-red-400" : status === "completed" ? "bg-blue-600 text-white focus:ring-blue-500 dark:bg-blue-500" : status === "current" ? "bg-blue-600 text-white ring-2 ring-blue-600 ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:ring-blue-500" : "bg-gray-200 text-gray-500 focus:ring-gray-400 dark:bg-gray-700 dark:text-gray-400"} `.trim(),
-                    "aria-current": status === "current" ? "step" : void 0,
-                    children: step.hasError ? /* @__PURE__ */ jsx(ErrorIcon, { className: "h-4 w-4" }) : status === "completed" ? step.icon || /* @__PURE__ */ jsx(CheckIcon4, { className: "h-4 w-4" }) : step.icon || /* @__PURE__ */ jsx("span", { children: index + 1 })
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: ` ${orientation === "horizontal" ? "text-center" : "flex-1"} ${sizes.text} `.trim(),
-                    children: [
-                      /* @__PURE__ */ jsxs(
-                        "p",
-                        {
-                          className: `font-medium ${step.hasError ? "text-red-600 dark:text-red-400" : status === "completed" || status === "current" ? "text-gray-900 dark:text-white" : "text-gray-500 dark:text-gray-400"} `.trim(),
-                          children: [
-                            step.label,
-                            step.optional && /* @__PURE__ */ jsxs("span", { className: "font-normal text-gray-500 dark:text-gray-400", children: [
-                              " ",
-                              "(optional)"
-                            ] })
-                          ]
-                        }
-                      ),
-                      step.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-gray-500 dark:text-gray-400", children: step.description })
-                    ]
-                  }
-                )
-              ]
+              className: `flex-1 ${sizes.line} ${index <= currentStep ? "bg-primary-600 dark:bg-primary-500" : "bg-neutral-200 dark:bg-neutral-700"}`,
+              "aria-hidden": "true"
             }
-          ),
+          ) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          circleButton(step, index, status, clickable),
+          !isLast ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `flex-1 ${sizes.line} ${index < currentStep ? "bg-primary-600 dark:bg-primary-500" : "bg-neutral-200 dark:bg-neutral-700"}`,
+              "aria-hidden": "true"
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "flex-1" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-2", children: stepLabel(step, status, true) })
+      ] }, step.id);
+    }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: `flex flex-col ${sizes.gap} ${className}`.trim(),
+      "aria-label": "Progress",
+      children: steps.map((step, index) => {
+        const status = getStepStatus(index);
+        const isLast = index === steps.length - 1;
+        const clickable = isClickable(index);
+        return /* @__PURE__ */ jsxs(React46.Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: `flex flex-row items-center ${sizes.gap}`, children: [
+            circleButton(step, index, status, clickable),
+            stepLabel(step, status, false)
+          ] }),
           !isLast && /* @__PURE__ */ jsx(
             "div",
             {
-              className: ` ${orientation === "horizontal" ? "min-w-8 flex-1" : "ml-4 min-h-4"} flex items-center justify-center`.trim(),
+              className: `flex min-h-4 justify-center ${size === "sm" ? "w-6" : size === "lg" ? "w-10" : "w-8"}`,
               "aria-hidden": "true",
               children: /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: ` ${orientation === "horizontal" ? "w-full" : "h-full min-h-4"} ${sizes.line} ${index < currentStep ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-700"} `.trim()
+                  className: `h-full min-h-4 ${sizes.line} ${index < currentStep ? "bg-primary-600 dark:bg-primary-500" : "bg-neutral-200 dark:bg-neutral-700"}`
                 }
               )
             }
@@ -30982,11 +31481,68 @@ function TimelineProgress({
   steps,
   currentStep,
   showTimestamps = true,
+  size = "md",
+  pulse = true,
   className
 }) {
   const visibleSteps = steps.filter((step) => !step.hidden);
   const currentIndex = visibleSteps.findIndex((s) => s.key === currentStep);
-  const getStepState = (index) => {
+  const sizeConfig = {
+    sm: {
+      wrapper: "h-6 w-6",
+      completed: "h-5 w-5",
+      current: "h-6 w-6",
+      pending: "h-5 w-5",
+      error: "h-6 w-6",
+      checkIcon: "h-3 w-3",
+      xIcon: "h-3.5 w-3.5",
+      currentDot: "h-1.5 w-1.5",
+      pendingDot: "h-1.5 w-1.5",
+      connector: "h-px",
+      timestamp: "text-[10px]",
+      label: "text-[10px]",
+      padding: "py-2",
+      labelMargin: "mt-1.5",
+      timestampMargin: "mb-1"
+    },
+    md: {
+      wrapper: "h-10 w-10",
+      completed: "h-8 w-8",
+      current: "h-10 w-10",
+      pending: "h-8 w-8",
+      error: "h-10 w-10",
+      checkIcon: "h-4 w-4",
+      xIcon: "h-5 w-5",
+      currentDot: "h-2.5 w-2.5",
+      pendingDot: "h-2 w-2",
+      connector: "h-0.5",
+      timestamp: "text-xs",
+      label: "text-xs",
+      padding: "py-4",
+      labelMargin: "mt-2.5",
+      timestampMargin: "mb-2"
+    },
+    lg: {
+      wrapper: "h-14 w-14",
+      completed: "h-11 w-11",
+      current: "h-14 w-14",
+      pending: "h-11 w-11",
+      error: "h-14 w-14",
+      checkIcon: "h-5 w-5",
+      xIcon: "h-6 w-6",
+      currentDot: "h-3.5 w-3.5",
+      pendingDot: "h-2.5 w-2.5",
+      connector: "h-1",
+      timestamp: "text-sm",
+      label: "text-sm",
+      padding: "py-6",
+      labelMargin: "mt-3",
+      timestampMargin: "mb-3"
+    }
+  };
+  const sizes = sizeConfig[size];
+  const getStepState = (index, step) => {
+    if (step.error) return "error";
     if (index < currentIndex) return "completed";
     if (index === currentIndex) return "current";
     return "pending";
@@ -30998,77 +31554,123 @@ function TimelineProgress({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("flex items-start overflow-x-auto py-4", className),
+      className: cn(sizes.padding, "overflow-x-auto", className),
       role: "progressbar",
       "aria-valuenow": currentIndex + 1,
       "aria-valuemin": 1,
       "aria-valuemax": visibleSteps.length,
-      children: visibleSteps.map((step, index) => {
-        const state = getStepState(index);
+      children: /* @__PURE__ */ jsx("div", { className: "relative flex items-start", children: visibleSteps.map((step, index) => {
+        const state = getStepState(index, step);
         const isLast = index === visibleSteps.length - 1;
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex flex-1 flex-col items-center",
-              !isLast && "mr-2"
+        return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center", children: [
+          showTimestamps && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "h-4 text-center text-neutral-500 dark:text-neutral-400",
+                sizes.timestamp,
+                sizes.timestampMargin
+              ),
+              children: step.completedAt ? formatTimestamp(step.completedAt) : "\xA0"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-center", children: [
+            index > 0 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex-1",
+                  sizes.connector,
+                  state === "completed" || state === "current" || state === "error" ? "bg-primary-600 dark:bg-primary-500" : "bg-neutral-200 dark:bg-neutral-700"
+                )
+              }
             ),
-            children: [
-              showTimestamps && /* @__PURE__ */ jsx("div", { className: "mb-1 h-5 text-center text-xs text-gray-500", children: step.completedAt ? formatTimestamp(step.completedAt) : "\xA0" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center", children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "h-1 flex-1",
-                      index === 0 ? "bg-transparent" : "",
-                      state === "completed" || state === "current" && index > 0 ? "bg-brand-500" : "bg-gray-200 dark:bg-gray-700"
-                    )
-                  }
+            index === 0 && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex shrink-0 items-center justify-center",
+                  sizes.wrapper
                 ),
-                /* @__PURE__ */ jsxs(
+                children: /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: cn(
-                      "relative z-10 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2",
-                      state === "completed" && "border-brand-500 bg-brand-500 text-white",
-                      state === "current" && "border-brand-500 bg-white dark:bg-gray-900",
-                      state === "pending" && "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-900"
+                      "relative z-10 flex items-center justify-center rounded-full transition-all duration-200",
+                      state === "completed" && cn(
+                        "bg-primary-100 text-primary-600 ring-primary-200 dark:bg-primary-900/40 dark:text-primary-400 dark:ring-primary-800 ring-2",
+                        sizes.completed
+                      ),
+                      state === "current" && cn(
+                        "bg-primary-500 shadow-primary-500/30 ring-primary-100 dark:bg-primary-500 dark:ring-primary-900/50 text-white shadow-md ring-4",
+                        sizes.current,
+                        pulse && "animate-pulse"
+                      ),
+                      state === "pending" && cn(
+                        "bg-neutral-100 text-neutral-400 ring-2 ring-neutral-200 dark:bg-neutral-800 dark:text-neutral-500 dark:ring-neutral-700",
+                        sizes.pending
+                      ),
+                      state === "error" && cn(
+                        "bg-red-500 text-white shadow-md ring-4 shadow-red-500/30 ring-red-100 dark:bg-red-500 dark:ring-red-900/50",
+                        sizes.error
+                      )
                     ),
                     children: [
-                      state === "completed" && /* @__PURE__ */ jsx(CheckIcon5, { className: "h-3 w-3" }),
-                      state === "current" && /* @__PURE__ */ jsx("div", { className: "bg-brand-500 h-2 w-2 rounded-full" })
+                      state === "completed" && /* @__PURE__ */ jsx(CheckIcon6, { className: sizes.checkIcon }),
+                      state === "current" && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "rounded-full bg-white",
+                            sizes.currentDot
+                          )
+                        }
+                      ),
+                      state === "pending" && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "rounded-full bg-neutral-300 dark:bg-neutral-600",
+                            sizes.pendingDot
+                          )
+                        }
+                      ),
+                      state === "error" && /* @__PURE__ */ jsx(XIcon4, { className: sizes.xIcon })
                     ]
                   }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "h-1 flex-1",
-                      isLast ? "bg-transparent" : "",
-                      state === "completed" ? "bg-brand-500" : "bg-gray-200 dark:bg-gray-700"
-                    )
-                  }
                 )
-              ] }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "mt-2 text-center text-xs font-medium capitalize",
-                    state === "completed" && "text-brand-600 dark:text-brand-400",
-                    state === "current" && "text-gray-900 dark:text-gray-100",
-                    state === "pending" && "text-gray-400 dark:text-gray-500"
-                  ),
-                  children: step.label
-                }
-              )
-            ]
-          },
-          step.key
-        );
-      })
+              }
+            ),
+            !isLast && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex-1",
+                  sizes.connector,
+                  state === "completed" ? "bg-primary-600 dark:bg-primary-500" : "bg-neutral-200 dark:bg-neutral-700"
+                )
+              }
+            ),
+            isLast && /* @__PURE__ */ jsx("div", { className: "flex-1" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "text-center font-medium capitalize",
+                sizes.label,
+                sizes.labelMargin,
+                state === "completed" && "text-primary-700 dark:text-primary-300",
+                state === "current" && "font-semibold text-neutral-900 dark:text-white",
+                state === "pending" && "text-neutral-400 dark:text-neutral-500",
+                state === "error" && "font-semibold text-red-600 dark:text-red-400"
+              ),
+              children: step.label
+            }
+          )
+        ] }, step.key);
+      }) })
     }
   );
 }
@@ -31117,48 +31719,56 @@ function TimelineEventList({
   const getEventColor = (type) => {
     switch (type) {
       case "message":
-        return "bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400";
+        return "bg-blue-50 text-blue-500 ring-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-800/40";
       case "status":
-        return "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400";
+        return "bg-green-50 text-green-500 ring-green-100 dark:bg-green-900/20 dark:text-green-400 dark:ring-green-800/40";
       case "attachment":
-        return "bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400";
+        return "bg-purple-50 text-purple-500 ring-purple-100 dark:bg-purple-900/20 dark:text-purple-400 dark:ring-purple-800/40";
       case "assignment":
-        return "bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400";
+        return "bg-orange-50 text-orange-500 ring-orange-100 dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-800/40";
       case "note":
-        return "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400";
+        return "bg-neutral-50 text-neutral-500 ring-neutral-100 dark:bg-neutral-800/50 dark:text-neutral-400 dark:ring-neutral-700/40";
       default:
-        return "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400";
+        return "bg-neutral-50 text-neutral-500 ring-neutral-100 dark:bg-neutral-800/50 dark:text-neutral-400 dark:ring-neutral-700/40";
     }
   };
   if (events.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: cn("py-8 text-center text-gray-500", className), children: "No activity yet." });
+    return /* @__PURE__ */ jsx("div", { className: cn("py-8 text-center text-neutral-500", className), children: "No activity yet." });
   }
-  return /* @__PURE__ */ jsx("div", { className: cn("space-y-4", className), children: events.map((event, index) => /* @__PURE__ */ jsxs("div", { className: "relative flex gap-4", children: [
-    index < events.length - 1 && /* @__PURE__ */ jsx("div", { className: "absolute top-10 left-5 h-full w-px bg-gray-200 dark:bg-gray-700" }),
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    events.length > 1 && /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn(
-          "relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full",
-          getEventColor(event.type)
-        ),
-        children: getEventIcon(event.type)
+        className: "absolute top-0 bottom-0 left-5 w-px bg-neutral-200 dark:bg-neutral-700",
+        "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 pt-1", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h4", { className: "font-medium text-gray-900 dark:text-gray-100", children: event.title }),
-          event.author && /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
-            "by ",
-            event.author
-          ] })
+    /* @__PURE__ */ jsx("div", { className: "space-y-6", children: events.map((event) => /* @__PURE__ */ jsxs("div", { className: "relative flex gap-4", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full ring-2",
+            getEventColor(event.type)
+          ),
+          children: getEventIcon(event.type)
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 pt-0.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h4", { className: "font-semibold text-neutral-900 dark:text-neutral-100", children: event.title }),
+            event.author && /* @__PURE__ */ jsxs("p", { className: "text-sm text-neutral-500 dark:text-neutral-400", children: [
+              "by ",
+              event.author
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("time", { className: "shrink-0 pt-0.5 text-xs text-neutral-400 dark:text-neutral-500", children: formatTime4(event.timestamp) })
         ] }),
-        /* @__PURE__ */ jsx("time", { className: "shrink-0 text-xs text-gray-400 dark:text-gray-500", children: formatTime4(event.timestamp) })
-      ] }),
-      event.content && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-300", children: event.content })
-    ] })
-  ] }, event.id)) });
+        event.content && /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-neutral-600 dark:text-neutral-300", children: event.content })
+      ] })
+    ] }, event.id)) })
+  ] });
 }
 TimelineEventList.displayName = "TimelineEventList";
 function OrderConfirmation({
@@ -31179,21 +31789,21 @@ function OrderConfirmation({
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "order-confirmation-title",
-      children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-gray-800", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-neutral-800", children: [
         /* @__PURE__ */ jsx("div", { className: "mb-6 flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30", children: /* @__PURE__ */ jsx("div", { className: "animate-bounce", children: /* @__PURE__ */ jsx(PlaneIcon, { className: "h-10 w-10 text-green-600 dark:text-green-400" }) }) }) }),
         /* @__PURE__ */ jsx(
           "h2",
           {
             id: "order-confirmation-title",
-            className: "mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100",
+            className: "mb-2 text-center text-2xl font-bold text-neutral-900 dark:text-neutral-100",
             children: "Order Submitted!"
           }
         ),
-        orderNumber && /* @__PURE__ */ jsxs("p", { className: "mb-4 text-center text-sm text-gray-500 dark:text-gray-400", children: [
+        orderNumber && /* @__PURE__ */ jsxs("p", { className: "mb-4 text-center text-sm text-neutral-500 dark:text-neutral-400", children: [
           "Order #",
           orderNumber
         ] }),
-        /* @__PURE__ */ jsx("p", { className: "mb-6 text-center text-gray-600 dark:text-gray-300", children: message }),
+        /* @__PURE__ */ jsx("p", { className: "mb-6 text-center text-neutral-600 dark:text-neutral-300", children: message }),
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -31201,8 +31811,8 @@ function OrderConfirmation({
             onClick: onClose,
             className: cn(
               "w-full rounded-lg px-4 py-3 font-medium",
-              "bg-brand-600 hover:bg-brand-700 text-white",
-              "dark:bg-brand-500 dark:hover:bg-brand-600",
+              "bg-primary-600 hover:bg-primary-700 text-white",
+              "dark:bg-primary-500 dark:hover:bg-primary-600",
               "transition-colors"
             ),
             children: "Got It"
@@ -31213,7 +31823,7 @@ function OrderConfirmation({
   );
 }
 OrderConfirmation.displayName = "OrderConfirmation";
-function CheckIcon5({ className }) {
+function CheckIcon6({ className }) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -31233,6 +31843,26 @@ function CheckIcon5({ className }) {
     }
   );
 }
+function XIcon4({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 3,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M6 18L18 6M6 6l12 12"
+        }
+      )
+    }
+  );
+}
 function MessageIcon({ className }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -31353,7 +31983,7 @@ function PlaneIcon({ className }) {
     }
   );
 }
-var CheckIcon6 = () => /* @__PURE__ */ jsx(
+var CheckIcon7 = () => /* @__PURE__ */ jsx(
   "svg",
   {
     className: "h-5 w-5",
@@ -31418,7 +32048,7 @@ var InfoIcon = () => /* @__PURE__ */ jsx(
     )
   }
 );
-var XIcon4 = () => /* @__PURE__ */ jsx(
+var XIcon5 = () => /* @__PURE__ */ jsx(
   "svg",
   {
     className: "h-4 w-4",
@@ -31455,7 +32085,7 @@ var variantStyles = {
   }
 };
 var defaultIcons = {
-  success: /* @__PURE__ */ jsx(CheckIcon6, {}),
+  success: /* @__PURE__ */ jsx(CheckIcon7, {}),
   error: /* @__PURE__ */ jsx(XCircleIcon, {}),
   warning: /* @__PURE__ */ jsx(ExclamationIcon, {}),
   info: /* @__PURE__ */ jsx(InfoIcon, {})
@@ -31501,7 +32131,7 @@ function Toast({
             onClick: onClose,
             className: "flex-shrink-0 rounded p-1 transition-colors hover:bg-black/10 focus:ring-2 focus:ring-current focus:outline-none dark:hover:bg-white/10",
             "aria-label": "Dismiss notification",
-            children: /* @__PURE__ */ jsx(XIcon4, {})
+            children: /* @__PURE__ */ jsx(XIcon5, {})
           }
         )
       ]
@@ -31655,6 +32285,7 @@ function WebChartReportViewer({
   onDateRangeChange,
   webchartBrand: webchartBrand2 = { name: "Enterprise Health" },
   onReconnect,
+  columnRenderers,
   className,
   labels = {}
 }) {
@@ -31664,17 +32295,16 @@ function WebChartReportViewer({
     reconnect = "Reconnect",
     noReports = "No reports available",
     loadingData = "Fetching latest data from Enterprise Health...",
-    close = "Close",
     dateFrom = "From",
     dateTo = "To"
   } = labels;
-  const [offcanvasOpen, setOffcanvasOpen] = React46.useState(false);
+  const [modalOpen, setModalOpen] = React46.useState(false);
   const handleReportClick = (report) => {
     onReportSelect?.(report);
-    setOffcanvasOpen(true);
+    setModalOpen(true);
   };
   const handleClose = () => {
-    setOffcanvasOpen(false);
+    setModalOpen(false);
     onClose?.();
   };
   const formatDate4 = (date) => {
@@ -31682,144 +32312,153 @@ function WebChartReportViewer({
     return d.toISOString().split("T")[0];
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("webchart-report-viewer", className), children: [
-    error && /* @__PURE__ */ jsx("div", { className: "mb-4 rounded-lg border border-yellow-300 bg-yellow-50 p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ jsx("i", { className: "fas fa-exclamation-triangle mt-0.5 text-yellow-600" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsx("span", { className: "font-medium text-yellow-800", children: error }),
-        /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm text-yellow-700", children: [
-          "If this error persists, you can try reconnecting",
-          " ",
-          webchartBrand2.name,
-          "."
-        ] }),
+    error && /* @__PURE__ */ jsxs(Alert, { variant: "warning", icon: /* @__PURE__ */ jsx(AlertTriangle, {}), className: "mb-4", children: [
+      /* @__PURE__ */ jsx(AlertTitle, { children: error }),
+      /* @__PURE__ */ jsxs(AlertDescription, { children: [
+        "If this error persists, you can try reconnecting",
+        " ",
+        webchartBrand2.name,
+        ".",
         onReconnect && /* @__PURE__ */ jsxs(
-          "button",
+          Button,
           {
-            type: "button",
+            variant: "secondary",
+            size: "sm",
             onClick: onReconnect,
-            className: "mt-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-gray-700 hover:bg-gray-50",
+            className: "mt-2",
             children: [
-              /* @__PURE__ */ jsx("i", { className: "fas fa-link mr-2" }),
+              /* @__PURE__ */ jsx(Link, { className: "mr-2 h-4 w-4" }),
               reconnect
             ]
           }
         )
       ] })
-    ] }) }),
-    !error && !loading && /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: onRefreshReports,
-        className: "bg-primary hover:bg-primary/90 mb-4 rounded-lg px-4 py-2 text-white",
-        title: refreshReports,
-        children: [
-          /* @__PURE__ */ jsx("i", { className: "fas fa-sync-alt mr-2" }),
-          refreshReports
-        ]
-      }
-    ),
+    ] }),
+    !error && !loading && /* @__PURE__ */ jsxs(Button, { onClick: onRefreshReports, className: "mb-4", children: [
+      /* @__PURE__ */ jsx(RefreshCw, { className: "mr-2 h-4 w-4" }),
+      refreshReports
+    ] }),
     /* @__PURE__ */ jsx("div", { className: "mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", children: loading ? (
       // Loading placeholders
-      /* @__PURE__ */ jsx(Fragment, { children: [1, 2, 3, 4, 5, 6].map((i) => /* @__PURE__ */ jsx("div", { className: "animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "h-12 rounded-lg bg-gray-200" }) }, i)) })
+      /* @__PURE__ */ jsx(Fragment, { children: [1, 2, 3, 4, 5, 6].map((i) => /* @__PURE__ */ jsx(Skeleton, { variant: "button", className: "h-12 w-full" }, i)) })
     ) : reports.length > 0 ? (
       // Report buttons
       reports.map((report) => /* @__PURE__ */ jsx(
-        "button",
+        Card,
         {
-          type: "button",
+          interactive: true,
+          padding: "none",
+          role: "button",
+          tabIndex: 0,
+          "aria-label": report.description ? `${report.name}: ${report.description}` : report.name,
           onClick: () => handleReportClick(report),
-          className: "border-primary text-primary hover:bg-primary w-full truncate rounded-lg border bg-white p-3 text-left hover:text-white",
-          title: report.description ? `${report.name}: ${report.description}` : report.name,
-          children: report.name
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleReportClick(report);
+            }
+          },
+          className: "cursor-pointer",
+          children: /* @__PURE__ */ jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "block truncate text-sm font-medium",
+              title: report.description ? `${report.name}: ${report.description}` : report.name,
+              children: report.name
+            }
+          ) })
         },
         report.id
       ))
     ) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground col-span-full py-8 text-center", children: noReports }) }),
-    offcanvasOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          role: "button",
-          tabIndex: 0,
-          "aria-label": "Close panel",
-          className: "fixed inset-0 bg-black/50",
-          onClick: handleClose,
-          onKeyDown: (e) => e.key === "Enter" && handleClose()
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "fixed right-0 bottom-0 left-0 flex h-3/4 flex-col rounded-t-xl bg-white shadow-xl", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b p-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx("h5", { className: "text-lg font-semibold", children: currentReport?.name || "Report Results" }),
-            reportResult?.error ? /* @__PURE__ */ jsx("span", { className: "text-yellow-500", title: reportResult.error, children: /* @__PURE__ */ jsx("i", { className: "fas fa-exclamation-triangle" }) }) : reportResult?.success ? /* @__PURE__ */ jsx("span", { className: "text-green-500", children: /* @__PURE__ */ jsx("i", { className: "fas fa-check-circle" }) }) : null
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleClose,
-              className: "text-2xl text-gray-400 hover:text-gray-600",
-              "aria-label": close,
-              children: "\xD7"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 border-b bg-gray-50 p-4", children: [
-          onDateRangeChange && dateRange && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxs("label", { className: "text-muted-foreground text-sm", children: [
-              dateFrom,
-              ":"
+    /* @__PURE__ */ jsxs(
+      Modal,
+      {
+        open: modalOpen,
+        onOpenChange: (open) => {
+          if (!open) {
+            handleClose();
+          }
+        },
+        size: "4xl",
+        children: [
+          /* @__PURE__ */ jsxs(ModalHeader, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx(ModalTitle, { children: currentReport?.name || "Report Results" }),
+              reportResult?.error ? /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-yellow-500" }) : reportResult?.success ? /* @__PURE__ */ jsx(Check, { className: "h-5 w-5 text-green-500" }) : null
             ] }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "date",
-                value: formatDate4(dateRange.start),
-                onChange: (e) => onDateRangeChange(e.target.value, dateRange.end),
-                className: "rounded-lg border border-gray-300 px-2 py-1 text-sm"
-              }
-            ),
-            /* @__PURE__ */ jsxs("label", { className: "text-muted-foreground text-sm", children: [
-              dateTo,
-              ":"
+            /* @__PURE__ */ jsx(ModalClose, {})
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "bg-muted/50 flex flex-wrap items-center gap-3 border-b px-6 py-4", children: [
+            onDateRangeChange && dateRange && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("label", { className: "text-muted-foreground text-sm", children: [
+                dateFrom,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "date",
+                  size: "sm",
+                  value: formatDate4(dateRange.start),
+                  onChange: (e) => onDateRangeChange(e.target.value, dateRange.end),
+                  className: "w-auto"
+                }
+              ),
+              /* @__PURE__ */ jsxs("label", { className: "text-muted-foreground text-sm", children: [
+                dateTo,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "date",
+                  size: "sm",
+                  value: formatDate4(dateRange.end),
+                  onChange: (e) => onDateRangeChange(dateRange.start, e.target.value),
+                  className: "w-auto"
+                }
+              )
             ] }),
             /* @__PURE__ */ jsx(
-              "input",
+              Button,
               {
-                type: "date",
-                value: formatDate4(dateRange.end),
-                onChange: (e) => onDateRangeChange(dateRange.start, e.target.value),
-                className: "rounded-lg border border-gray-300 px-2 py-1 text-sm"
+                size: "sm",
+                onClick: onRefreshReport,
+                title: refreshReport,
+                "aria-label": refreshReport,
+                children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(
-            "button",
+          /* @__PURE__ */ jsx(ModalBody, { className: "max-h-[60vh] overflow-auto", children: loadingReport ? /* @__PURE__ */ jsxs("div", { className: "flex h-64 flex-col items-center justify-center", children: [
+            /* @__PURE__ */ jsx(Spinner, { size: "xl" }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground mt-4", children: loadingData })
+          ] }) : reportResult?.error ? /* @__PURE__ */ jsx(Alert, { variant: "danger", icon: /* @__PURE__ */ jsx(AlertTriangle, {}), children: /* @__PURE__ */ jsx(AlertDescription, { children: reportResult.error }) }) : reportResult?.data ? typeof reportResult.data === "string" ? /* @__PURE__ */ jsx(
+            "div",
             {
-              type: "button",
-              onClick: onRefreshReport,
-              className: "bg-primary hover:bg-primary/90 rounded-lg px-3 py-1.5 text-white",
-              title: refreshReport,
-              children: /* @__PURE__ */ jsx("i", { className: "fas fa-sync-alt" })
+              className: "prose dark:prose-invert max-w-none",
+              dangerouslySetInnerHTML: { __html: reportResult.data }
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4", children: loadingReport ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center", children: [
-          /* @__PURE__ */ jsx("div", { className: "border-primary h-12 w-12 animate-spin rounded-full border-4 border-t-transparent" }),
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground mt-4", children: loadingData })
-        ] }) : reportResult?.error ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4 text-red-600", children: [
-          /* @__PURE__ */ jsx("i", { className: "fas fa-exclamation-circle mr-2" }),
-          reportResult.error
-        ] }) : reportResult?.data ? typeof reportResult.data === "string" ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "prose max-w-none",
-            dangerouslySetInnerHTML: { __html: reportResult.data }
-          }
-        ) : /* @__PURE__ */ jsx("pre", { className: "overflow-auto rounded-lg bg-gray-100 p-4 text-sm", children: JSON.stringify(reportResult.data, null, 2) }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground py-8 text-center", children: "No data available" }) })
-      ] })
-    ] })
+          ) : Array.isArray(reportResult.data) && reportResult.data.length > 0 ? (() => {
+            const rows = reportResult.data;
+            const columns = Object.keys(rows[0]);
+            return /* @__PURE__ */ jsxs(Table, { children: [
+              /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((key) => /* @__PURE__ */ jsx(TableHead, { children: key }, key)) }) }),
+              /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => {
+                const rowKey = columns.map((key) => String(row[key])).join("|") || JSON.stringify(row);
+                return /* @__PURE__ */ jsx(TableRow, { children: columns.map((key) => /* @__PURE__ */ jsx(TableCell, { children: columnRenderers?.[key] ? columnRenderers[key](row[key], row) : row[key] == null ? "" : String(row[key]) }, key)) }, rowKey);
+              }) })
+            ] });
+          })() : /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsx(TableBody, { children: Object.entries(
+            reportResult.data
+          ).map(([key, val]) => /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { className: "text-muted-foreground font-medium", children: key }),
+            /* @__PURE__ */ jsx(TableCell, { children: val == null ? "" : String(val) })
+          ] }, key)) }) }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground py-8 text-center", children: "No data available" }) })
+        ]
+      }
+    )
   ] });
 }
 function ReportDatePicker({
@@ -31846,7 +32485,7 @@ function ReportDatePicker({
     setPreset(value);
     const now = /* @__PURE__ */ new Date();
     let start;
-    let end = now;
+    const end = now;
     switch (value) {
       case "today":
         start = now;
@@ -31871,34 +32510,40 @@ function ReportDatePicker({
     }
     onChange?.(start, end);
   };
+  const selectOptions = presets.map((p) => ({
+    value: p.value,
+    label: p.label
+  }));
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-3", className), children: [
     /* @__PURE__ */ jsx(
-      "select",
+      Select,
       {
         value: preset,
-        onChange: (e) => handlePresetChange(e.target.value),
-        className: "rounded-lg border border-gray-300 px-3 py-2",
-        children: presets.map((p) => /* @__PURE__ */ jsx("option", { value: p.value, children: p.label }, p.value))
+        onValueChange: (value) => handlePresetChange(value),
+        options: selectOptions,
+        size: "sm"
       }
     ),
     preset === "custom" && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        "input",
+        Input,
         {
           type: "date",
+          size: "sm",
           value: formatDate4(startDate),
           onChange: (e) => onChange?.(e.target.value, endDate || /* @__PURE__ */ new Date()),
-          className: "rounded-lg border border-gray-300 px-3 py-2"
+          className: "w-auto"
         }
       ),
       /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "to" }),
       /* @__PURE__ */ jsx(
-        "input",
+        Input,
         {
           type: "date",
+          size: "sm",
           value: formatDate4(endDate),
           onChange: (e) => onChange?.(startDate || /* @__PURE__ */ new Date(), e.target.value),
-          className: "rounded-lg border border-gray-300 px-3 py-2"
+          className: "w-auto"
         }
       )
     ] })
@@ -32157,6 +32802,6 @@ function WebsiteInputGroup({
 }
 WebsiteInputGroup.displayName = "WebsiteInputGroup";
 
-export { AGGrid, AIChat, AIChatModal, AIChatTrigger, AILogoIcon, AIMessageDisplay, AITypingIndicator, AccessDeniedPage, ActionButton2 as ActionButton, ActionButtonsBar, ActiveFilters, AddContactModal, AddServiceCard, AdditionalFields, Address, AddressCard, AddressCompact, AddressDisplay, AddressForm, AddressInline, AppHeader, AppHeaderActions, AppHeaderDivider, AppHeaderIconButton, AppHeaderSearch, AppHeaderSection, AppHeaderTitle, AppHeaderUserMenu, AttachmentPicker, AttachmentPreview, AttachmentPreviewItem, AuthButtons, AuthDialog, AvatarNameRenderer, BookAppointmentButton, BookingDialog, BooleanRenderer, BusinessHours, BusinessHoursEditor, CSVColumnMapper, CSVFileUpload, CameraButton, CardSkeleton, CellRenderers, CharacterCounter, CheckrIntegration, ChevronIcon, ClaimListingButton, ClaimProviderForm, CloseIcon, CommandPalette, CommandPaletteProvider, CommandPaletteTrigger, CompactCookieBanner, CompactFilterBar, CompactHeader, CompactHours, CompactProviderHeader, CompanyRenderer, ConnectionStatusBadge, ConnectionStatusBar, ConnectionStatusOverlay, ConsentSwitch, ConversationHeader, ConversationListItem, ConversationListSkeleton, CookieConsentBanner, CopyrightText, CreateInvoiceModal, CreateReferralModal, CurrencyRenderer, DEFAULT_ERROR_CONFIGS, DEFAULT_LANGUAGES, DEFAULT_RADIUS_OPTIONS, DEFAULT_SOCIAL_PROVIDERS, DOTBadge, DateRangeFilter, DateRangePicker, DateRenderer, DateSeparator, DialogOverlay, DisclaimerText, DocumentDetectionOverlay, DocumentScanner, DomainRenderer, DragDropZone, DropZone, DropzoneOverlay, EditUserRoleModal, EmailRenderer, EmployeeForm, EmployeeProfileCard, EmployerContactCard, EmployerList, EmployerPricingCard, EmployerServiceModal, EmployerView, EmptyState, EngagementScoreRenderer, ErrorPage, FileManager, FilePreview, FloatingAIChat, FloatingInput, FooterLinkSection, SocialMediaLinks2 as FooterSocialLinks, HRISProviderSelector, HelpSupportPanel, HeroSearchBar, HoursSummary, InlineBookingForm, InventoryManager, InviteUserModal, InvoiceList, InvoicePaymentPage, InvoiceView, LanguageSelector, LanguageSelectorInline, LanguageSelectorNative, LegalLinks, LightboxModal, LinkedInRenderer, LoadMoreButton, LoadingBar, LoadingDots, LoadingOverlay, LoadingPage, LoadingSkeleton, MCPToolCallDisplay, MaintenancePage, MemoizedAvatarNameRenderer, MemoizedBooleanRenderer, MemoizedCompanyRenderer, MemoizedCurrencyRenderer, MemoizedDateRenderer, MemoizedDomainRenderer, MemoizedEmailRenderer, MemoizedEngagementScoreRenderer, MemoizedLinkedInRenderer, MemoizedNumberRenderer, MemoizedPhoneRenderer, MemoizedProgressRenderer, MemoizedStatusBadgeRenderer, MemoizedTagsRenderer, MessageAvatar, MessageBubble, MessageComposer, MessageList, MessageStatusIcon, MessageThread, MessagingSplitView, MobileBackButton, MobileMenuButton, MobileMenuPanel, NavLinks, NewsletterForm, NotFoundPage, NotificationCenter, NumberRenderer, OfflinePage, OnboardingCompletion, OnboardingStepQuestion, OnboardingWizard, OpenStatusBadge, OrderCard, OrderConfirmation, OrderConfirmationWizard, OrderDetailSidebar, OrderList, OrderLookupForm, OrderSidebar, OrderSidebarTabs, PageHeader, PaymentHistoryTable, PaymentMethodBank, PaymentMethodCard, PaymentMethodList, PendingClaimsTable, PermissionsEditor, PhoneRenderer, ProductVersion, ProductVersionBadge, ProgressRenderer, Breadcrumb2 as ProviderBreadcrumb, ProviderCard, ProviderCardGrid, ProviderCardSkeleton, ProviderDetailHeader, ProviderDetailHeaderSkeleton, ProviderLogo2 as ProviderLogo, ProviderOverview, ProviderSearchBar, ProviderSearchFilters, ProviderSelector, ProviderSettings, SocialMediaLinks as ProviderSocialLinks, ProviderUsersTable, QuickBookCard, QuickLinksCard, ReadReceiptIndicator, RecurringServiceAddCard, RecurringServiceCard, RecurringServiceGrid, RecurringServiceSetupModal, RefreshIcon, RejectionModal, ReportDashboard, ReportDatePicker, ReportLink, ResourceLink, ResultsEntryCard, ResultsEntryForm, SSOConfigForm, ScheduleCalendar, SearchResultsMessage, SelectedServicesBadges, SendButton, SendIcon, ServerErrorPage, ServiceAccordion, ServiceBadge, ServiceBadgeGroup, ServiceCard, ServiceCategoryBadge, ServiceGeneralSettings, ServiceGrid, ServiceLink, ServiceList, ServiceMultiSelect, ServicePicker, ServicePricingManager, ServiceSelect, ServiceShippingSettings, ServiceTagCloud, ServiceTagCloudBadges, SetupServiceModal, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMobileToggle, SidebarNav, SidebarNavGroup, SidebarNavItem, SidebarProvider, SidebarSearch, SidebarToggle, SimpleFooter, SiteFooter, SiteHeader, SiteLogo, SkeletonMessage, SparklesIcon, SpinnerIcon2 as SpinnerIcon, StatusBadgeRenderer, StepIndicator, StripeBadge, StripeSecureBadge, SuggestedActions, TagsRenderer, TimelineEventList, TimelineProgress, Toast, ToastContainer, ToastProvider, ToolStatusIcon, TypingIndicator, UpdateAvailableOverlay, UserMenu, VerifiedBadge2 as VerifiedBadge, WEBSITE_TYPES, WebChartReportViewer, WebcamModal, WebsiteInput, WebsiteInputGroup, bubbleVariants2 as bubbleVariants, create24HourSchedule, createDefaultSchedule, createWeekdaySchedule, defaultOrderTabs, formatAddressLines, formatAddressSingleLine, formatCityState, formatCityStateZip, formatDateLabel, formatFileSize2 as formatFileSize, formatLastSeen, formatPhoneDisplay, generateAttachmentId, generateId, getConversationSubtitle, getConversationTitle, getFileType, getGoogleMapsSearchUrl, getGoogleMapsUrl, getToolIcon, groupMessagesByDate, headerVariants, isSameSenderGroup, isValidUrl, sendButtonVariants, statusColors, useCamera, useCommandPalette, useConnectionStatus, useCookieConsent, useDocumentDetection, useDropzone, useFileUpload, useMessageScroll, useMessages, useReadReceipts, useSidebar, useToast, useTypingIndicator, validateFile };
+export { AGGrid, AIChat, AIChatModal, AIChatTrigger, AILogoIcon, AIMessageDisplay, AITypingIndicator, AccessDeniedPage, ActionButton2 as ActionButton, ActionButtonsBar, ActiveFilters, AddContactModal, AddServiceCard, AdditionalFields, Address, AddressCard, AddressCompact, AddressDisplay, AddressForm, AddressInline, AppHeader, AppHeaderActions, AppHeaderDivider, AppHeaderIconButton, AppHeaderSearch, AppHeaderSection, AppHeaderTitle, AppHeaderUserMenu, AttachmentPicker, AttachmentPreview, AttachmentPreviewItem, AuthButtons, AuthDialog, AvatarNameRenderer, BookAppointmentButton, BookingDialog, BooleanRenderer, BusinessHours, BusinessHoursEditor, CSVColumnMapper, CSVFileUpload, CameraButton, CardSkeleton, CellRenderers, CharacterCounter, CheckrIntegration, ChevronIcon, ClaimListingButton, ClaimProviderForm, CloseIcon, CommandPalette, CommandPaletteProvider, CommandPaletteTrigger, CompactCookieBanner, CompactFilterBar, CompactHeader, CompactHours, CompactProviderHeader, CompanyRenderer, ConnectionStatusBadge, ConnectionStatusBar, ConnectionStatusOverlay, ConsentSwitch, ConversationHeader, ConversationListItem, ConversationListSkeleton, CookieConsentBanner, CopyrightText, CreateInvoiceModal, CreateReferralModal, CurrencyRenderer, DEFAULT_ERROR_CONFIGS, DEFAULT_LANGUAGES, DEFAULT_RADIUS_OPTIONS, DEFAULT_SOCIAL_PROVIDERS, DOTBadge, DateRangeFilter, DateRangePicker, DateRenderer, DateSeparator, DialogOverlay, DisclaimerText, DocumentDetectionOverlay, DocumentScanner, DomainRenderer, DragDropZone, DropZone, DropzoneOverlay, EditUserRoleModal, EmailRenderer, EmployeeForm, EmployeeProfileCard, EmployerContactCard, EmployerList, EmployerPricingCard, EmployerServiceModal, EmployerView, EmptyState, EngagementScoreRenderer, ErrorPage, FileManager, FilePreview, FloatingAIChat, FloatingInput, FooterLinkSection, SocialMediaLinks2 as FooterSocialLinks, HRISProviderSelector, HelpSupportPanel, HeroSearchBar, HoursSummary, InlineBookingForm, InventoryManager, InviteUserModal, InvoiceList, InvoicePaymentPage, InvoiceView, LanguageSelector, LanguageSelectorInline, LanguageSelectorNative, LegalLinks, LightboxModal, LinkedInRenderer, LoadMoreButton, LoadingBar, LoadingDots, LoadingOverlay, LoadingPage, LoadingSkeleton, MCPToolCallDisplay, MaintenancePage, MemoizedAvatarNameRenderer, MemoizedBooleanRenderer, MemoizedCompanyRenderer, MemoizedCurrencyRenderer, MemoizedDateRenderer, MemoizedDomainRenderer, MemoizedEmailRenderer, MemoizedEngagementScoreRenderer, MemoizedLinkedInRenderer, MemoizedNumberRenderer, MemoizedPhoneRenderer, MemoizedProgressRenderer, MemoizedStatusBadgeRenderer, MemoizedTagsRenderer, MessageAvatar, MessageBubble, MessageComposer, MessageList, MessageStatusIcon, MessageThread, MessagingSplitView, MobileBackButton, MobileMenuButton, MobileMenuPanel, NavLinks, NewsletterForm, NotFoundPage, NotificationCenter, NumberRenderer, OfflinePage, OnboardingCompletion, OnboardingStepQuestion, OnboardingWizard, OpenStatusBadge, OrderCard, OrderConfirmation, OrderConfirmationWizard, OrderDetailSidebar, OrderList, OrderLookupForm, OrderSidebar, OrderSidebarTabs, PageHeader, PaymentHistoryTable, PaymentMethodBank, PaymentMethodCard, PaymentMethodList, PendingClaimsTable, PermissionsEditor, PhoneRenderer, ProductVersion, ProductVersionBadge, ProgressRenderer, Breadcrumb2 as ProviderBreadcrumb, ProviderCard, ProviderCardGrid, ProviderCardSkeleton, ProviderDetailHeader, ProviderDetailHeaderSkeleton, ProviderLogo2 as ProviderLogo, ProviderOverview, ProviderSearchBar, ProviderSearchFilters, ProviderSelector, ProviderSettings, SocialMediaLinks as ProviderSocialLinks, ProviderUsersTable, QuickBookCard, QuickLinksCard, ReadReceiptIndicator, RecurringServiceAddCard, RecurringServiceCard, RecurringServiceGrid, RecurringServiceSetupModal, RefreshIcon, RejectionModal, ReportDashboard, ReportDatePicker, ReportLink, ResourceLink, ResultsEntryCard, ResultsEntryForm, ResultsEntryModal, SSOConfigForm, ScheduleCalendar, SearchResultsMessage, SelectedServicesBadges, SendButton, SendIcon, ServerErrorPage, ServiceAccordion, ServiceBadge, ServiceBadgeGroup, ServiceCard, ServiceCategoryBadge, ServiceGeneralSettings, ServiceGrid, ServiceLink, ServiceList, ServiceMultiSelect, ServicePicker, ServicePricingManager, ServiceSelect, ServiceShippingSettings, ServiceTagCloud, ServiceTagCloudBadges, SetupServiceModal, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMobileToggle, SidebarNav, SidebarNavGroup, SidebarNavItem, SidebarProvider, SidebarSearch, SidebarToggle, SimpleFooter, SiteFooter, SiteHeader, SiteLogo, SkeletonMessage, SparklesIcon, SpinnerIcon2 as SpinnerIcon, StatusBadgeRenderer, StepIndicator, StripeBadge, StripeSecureBadge, SuggestedActions, TagsRenderer, TimelineEventList, TimelineProgress, Toast, ToastContainer, ToastProvider, ToolStatusIcon, TypingIndicator, UpdateAvailableOverlay, UserMenu, VerifiedBadge2 as VerifiedBadge, WEBSITE_TYPES, WebChartReportViewer, WebcamModal, WebsiteInput, WebsiteInputGroup, bubbleVariants2 as bubbleVariants, create24HourSchedule, createDefaultSchedule, createWeekdaySchedule, defaultOrderTabs, formatAddressLines, formatAddressSingleLine, formatCityState, formatCityStateZip, formatDateLabel, formatFileSize2 as formatFileSize, formatLastSeen, formatPhoneDisplay, generateAttachmentId, generateId, getConversationSubtitle, getConversationTitle, getFileType, getGoogleMapsSearchUrl, getGoogleMapsUrl, getToolIcon, groupMessagesByDate, headerVariants, isSameSenderGroup, isValidUrl, sendButtonVariants, statusColors, useCamera, useCommandPalette, useConnectionStatus, useCookieConsent, useDocumentDetection, useDropzone, useFileUpload, useMessageScroll, useMessages, useReadReceipts, useSidebar, useToast, useTypingIndicator, validateFile };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map