@hilum/ui 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,3 +1,4 @@
+import { tokens } from './chunk-J2QQDUF4.js';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React15 from 'react';
@@ -16,11 +17,10 @@ import { OTPInput, OTPInputContext } from 'input-otp';
 import { Panel, Group, Separator as Separator$1 } from 'react-resizable-panels';
 import { Toaster as Toaster$1 } from 'sonner';
 
-// src/lib/utils.ts
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var AccordionRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Accordion.Root, { ref, className: cn("divide-y divide-taupe-100", className), ...props }));
+var AccordionRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Accordion.Root, { ref, className: cn("divide-y divide-ground-100", className), ...props }));
 AccordionRoot.displayName = "Accordion";
 var AccordionItem = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Accordion.Item, { ref, className: cn("", className), ...props }));
 AccordionItem.displayName = "AccordionItem";
@@ -30,9 +30,9 @@ var AccordionTrigger = React15.forwardRef(({ className, children, ...props }, re
     ref,
     className: cn(
       "flex w-full items-center justify-between py-4",
-      "body font-medium text-taupe-900 transition-colors hover:text-taupe-700",
+      "body font-medium text-ground-900 transition-colors hover:text-ground-700",
       "[&[data-state=open]>svg]:rotate-180",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-900/15",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-900/15",
       className
     ),
     ...props,
@@ -42,7 +42,7 @@ var AccordionTrigger = React15.forwardRef(({ className, children, ...props }, re
         ChevronDown,
         {
           size: 16,
-          className: "text-taupe-400 transition-transform duration-200 shrink-0"
+          className: "text-ground-400 transition-transform duration-200 shrink-0"
         }
       )
     ]
@@ -54,7 +54,7 @@ var AccordionContent = React15.forwardRef(({ className, children, ...props }, re
   {
     ref,
     className: cn(
-      "overflow-hidden body text-taupe-500",
+      "overflow-hidden body text-ground-500",
       "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
       className
     ),
@@ -77,11 +77,11 @@ var buttonVariants = cva(
       variant: {
         default: "bg-brand-primary text-white hover:bg-brand-primary/90 active:bg-brand-primary/80",
         destructive: "bg-red-600 text-white hover:bg-red-700 active:bg-red-800",
-        outline: "bg-white text-taupe-700 shadow-natural hover:bg-taupe-50 rounded-xl",
-        secondary: "bg-taupe-100 text-taupe-700 hover:bg-taupe-200",
-        brand: "bg-brand-secondary text-taupe-900 hover:bg-brand-secondary/90 active:bg-brand-secondary/80",
-        ghost: "text-taupe-600 hover:bg-taupe-100 hover:text-taupe-900",
-        link: "text-taupe-900 underline-offset-4 hover:underline"
+        outline: "bg-white text-ground-700 shadow-natural hover:bg-ground-50 rounded-xl",
+        secondary: "bg-ground-100 text-ground-700 hover:bg-ground-200",
+        brand: "bg-brand-secondary text-ground-900 hover:bg-brand-secondary/90 active:bg-brand-secondary/80",
+        ghost: "text-ground-600 hover:bg-ground-100 hover:text-ground-900",
+        link: "text-ground-900 underline-offset-4 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2 rounded-md",
@@ -111,6 +111,7 @@ function Button({ className, variant, size, asChild = false, ...props }) {
     }
   );
 }
+Button.displayName = "Button";
 function ActionPanel({
   title,
   description,
@@ -130,7 +131,7 @@ function ActionPanel({
         "a",
         {
           href: link.href,
-          className: "body font-medium text-taupe-600 hover:text-taupe-900 transition-colors inline-flex items-center gap-1",
+          className: "body font-medium text-ground-600 hover:text-ground-900 transition-colors inline-flex items-center gap-1",
           children: [
             link.label,
             " ",
@@ -142,7 +143,7 @@ function ActionPanel({
         {
           type: "button",
           onClick: link.onClick,
-          className: "body font-medium text-taupe-600 hover:text-taupe-900 transition-colors inline-flex items-center gap-1",
+          className: "body font-medium text-ground-600 hover:text-ground-900 transition-colors inline-flex items-center gap-1",
           children: [
             link.label,
             " ",
@@ -160,14 +161,14 @@ function ActionPanel({
     {
       className: cn(
         "rounded-xl border px-5 py-5",
-        variant === "muted" ? "border-taupe-100 bg-taupe-50" : "border-taupe-100 bg-white shadow-natural",
+        variant === "muted" ? "border-ground-100 bg-ground-50" : "border-ground-100 bg-white shadow-natural",
         layout === "inline" && "flex items-center justify-between gap-6",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", layout === "inline" ? "flex-1" : ""), children: [
-          /* @__PURE__ */ jsx("p", { className: "body font-semibold text-taupe-900", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: cn("body text-taupe-400", layout === "stacked" ? "mt-1" : ""), children: description }),
+          /* @__PURE__ */ jsx("p", { className: "body font-semibold text-ground-900", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: cn("body text-ground-400", layout === "stacked" ? "mt-1" : ""), children: description }),
           children && layout === "stacked" && /* @__PURE__ */ jsx("div", { className: "mt-4", children })
         ] }),
         layout === "stacked" ? (allActions.length > 0 || link) && /* @__PURE__ */ jsx("div", { className: "mt-4", children: renderActions() }) : /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center gap-3", children: [
@@ -185,7 +186,7 @@ function ActivityFeed({ events, className }) {
       !isLast && /* @__PURE__ */ jsx(
         "span",
         {
-          className: "absolute top-4 left-4 -ml-px h-full w-0.5 bg-taupe-100",
+          className: "absolute top-4 left-4 -ml-px h-full w-0.5 bg-ground-100",
           "aria-hidden": "true"
         }
       ),
@@ -195,18 +196,18 @@ function ActivityFeed({ events, className }) {
           {
             className: cn(
               "flex size-8 items-center justify-center rounded-full ring-8 ring-white",
-              event.iconBgClass ?? "bg-taupe-100 text-taupe-500"
+              event.iconBgClass ?? "bg-ground-100 text-ground-500"
             ),
             children: event.icon
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-baseline justify-between gap-4 pt-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "body text-taupe-600", children: event.content }),
+          /* @__PURE__ */ jsx("div", { className: "body text-ground-600", children: event.content }),
           event.date && /* @__PURE__ */ jsx(
             "time",
             {
               dateTime: event.datetime ?? event.date,
-              className: "caption whitespace-nowrap text-taupe-400",
+              className: "caption whitespace-nowrap text-ground-400",
               children: event.date
             }
           )
@@ -264,12 +265,12 @@ var AlertDialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @
   AlertDialog.Title,
   {
     ref,
-    className: cn("body-lg font-semibold text-taupe-900", className),
+    className: cn("body-lg font-semibold text-ground-900", className),
     ...props
   }
 ));
 AlertDialogTitle.displayName = "AlertDialogTitle";
-var AlertDialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialog.Description, { ref, className: cn("body text-taupe-500", className), ...props }));
+var AlertDialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialog.Description, { ref, className: cn("body text-ground-500", className), ...props }));
 AlertDialogDescription.displayName = "AlertDialogDescription";
 var AlertDialogAction = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialog.Action,
@@ -294,7 +295,7 @@ var AlertDialogCancel = React15.forwardRef(({ className, ...props }, ref) => /*
     className: cn(
       "inline-flex h-9 items-center justify-center rounded-md px-4",
       "body font-medium whitespace-nowrap transition-all duration-150",
-      "bg-white text-taupe-700 shadow-natural hover:bg-taupe-50 rounded-xl",
+      "bg-white text-ground-700 shadow-natural hover:bg-ground-50 rounded-xl",
       "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1 outline-none",
       "disabled:pointer-events-none disabled:opacity-50",
       className
@@ -308,10 +309,10 @@ var alertVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-taupe-50 text-taupe-800 [&>svg]:text-taupe-500",
-        info: "bg-brand-secondary/40 text-taupe-700 [&>svg]:text-taupe-500",
-        success: "bg-brand-secondary/15 text-taupe-800 [&>svg]:text-taupe-600",
-        warning: "bg-brand-secondary/70 text-taupe-800 [&>svg]:text-taupe-600",
+        default: "bg-ground-50 text-ground-800 [&>svg]:text-ground-500",
+        info: "bg-brand-secondary/40 text-ground-700 [&>svg]:text-ground-500",
+        success: "bg-brand-secondary/15 text-ground-800 [&>svg]:text-ground-600",
+        warning: "bg-brand-secondary/70 text-ground-800 [&>svg]:text-ground-600",
         destructive: "bg-red-50 text-red-800 [&>svg]:text-red-500"
       }
     },
@@ -363,7 +364,7 @@ function AvatarStack({ avatars, max, size = "md", className }) {
             className: cn(
               "flex size-full items-center justify-center font-medium",
               s.text,
-              avatar.colorClass ?? "bg-taupe-200 text-taupe-700"
+              avatar.colorClass ?? "bg-ground-200 text-ground-700"
             ),
             children: avatar.fallback ?? avatar.name.slice(0, 2).toUpperCase()
           }
@@ -375,7 +376,7 @@ function AvatarStack({ avatars, max, size = "md", className }) {
       "span",
       {
         className: cn(
-          "relative inline-flex shrink-0 items-center justify-center rounded-full ring-white bg-taupe-100 font-medium text-taupe-600",
+          "relative inline-flex shrink-0 items-center justify-center rounded-full ring-white bg-ground-100 font-medium text-ground-600",
           s.wrapper,
           s.text
         ),
@@ -423,7 +424,7 @@ var AvatarFallback = React15.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-taupe-100 body font-semibold text-taupe-600",
+      "flex h-full w-full items-center justify-center rounded-full bg-ground-100 body font-semibold text-ground-600",
       className
     ),
     ...props
@@ -432,7 +433,7 @@ var AvatarFallback = React15.forwardRef(({ className, ...props }, ref) => /* @__
 AvatarFallback.displayName = "AvatarFallback";
 var statusColorMap = {
   online: "bg-brand-secondary",
-  offline: "bg-taupe-300",
+  offline: "bg-ground-300",
   busy: "bg-red-500",
   away: "bg-brand-secondary"
 };
@@ -462,12 +463,12 @@ var badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-taupe-900 text-white",
-        secondary: "bg-taupe-100 text-taupe-700",
-        outline: "border border-taupe-200 text-taupe-600 bg-transparent",
+        default: "bg-ground-900 text-white",
+        secondary: "bg-ground-100 text-ground-700",
+        outline: "border border-ground-200 text-ground-600 bg-transparent",
         brand: "bg-brand-primary text-white",
-        success: "bg-brand-secondary/20 text-taupe-800 border border-brand-secondary/50",
-        warning: "bg-brand-secondary/70 text-taupe-700 border border-brand-secondary",
+        success: "bg-brand-secondary/20 text-ground-800 border border-brand-secondary/50",
+        warning: "bg-brand-secondary/70 text-ground-700 border border-brand-secondary",
         destructive: "bg-red-50 text-red-700 border border-red-200"
       }
     },
@@ -479,6 +480,7 @@ var badgeVariants = cva(
 function Badge({ className, variant, ...props }) {
   return /* @__PURE__ */ jsx("span", { "data-slot": "badge", className: cn(badgeVariants({ variant, className })), ...props });
 }
+Badge.displayName = "Badge";
 var Breadcrumb = React15.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
 Breadcrumb.displayName = "Breadcrumb";
 var BreadcrumbList = React15.forwardRef(
@@ -486,7 +488,7 @@ var BreadcrumbList = React15.forwardRef(
     "ol",
     {
       ref,
-      className: cn("flex flex-wrap items-center gap-1.5 body text-taupe-500", className),
+      className: cn("flex flex-wrap items-center gap-1.5 body text-ground-500", className),
       ...props
     }
   )
@@ -497,7 +499,7 @@ var BreadcrumbItem = React15.forwardRef(
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
 var BreadcrumbLink = React15.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("a", { ref, className: cn("transition-colors hover:text-taupe-900", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("a", { ref, className: cn("transition-colors hover:text-ground-900", className), ...props })
 );
 BreadcrumbLink.displayName = "BreadcrumbLink";
 var BreadcrumbPage = React15.forwardRef(
@@ -507,13 +509,13 @@ var BreadcrumbPage = React15.forwardRef(
       ref,
       role: "link",
       "aria-current": "page",
-      className: cn("body font-medium text-taupe-900", className),
+      className: cn("body font-medium text-ground-900", className),
       ...props
     }
   )
 );
 BreadcrumbPage.displayName = "BreadcrumbPage";
-var BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */ jsx("li", { role: "presentation", "aria-hidden": "true", className: cn("text-taupe-300", className), ...props, children: children ?? /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) });
+var BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */ jsx("li", { role: "presentation", "aria-hidden": "true", className: cn("text-ground-300", className), ...props, children: children ?? /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) });
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 var BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
@@ -522,7 +524,7 @@ var BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
     "aria-hidden": "true",
     className: cn("flex size-5 items-center justify-center", className),
     ...props,
-    children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 14, className: "text-taupe-400" })
+    children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 14, className: "text-ground-400" })
   }
 );
 BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
@@ -531,7 +533,7 @@ function ButtonGroup({ children, className }) {
     "div",
     {
       className: cn(
-        "inline-flex divide-x divide-taupe-200 overflow-hidden rounded-lg border border-taupe-200 bg-white shadow-natural",
+        "inline-flex divide-x divide-ground-200 overflow-hidden rounded-lg border border-ground-200 bg-white shadow-natural",
         className
       ),
       children
@@ -545,8 +547,8 @@ function ButtonGroupItem({ active, className, children, ...props }) {
       type: "button",
       className: cn(
         "relative inline-flex items-center gap-1.5 px-3.5 py-2 body font-medium transition-colors",
-        "focus:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/40 focus-visible:ring-inset",
-        active ? "bg-taupe-900 text-white" : "text-taupe-600 hover:bg-taupe-50 hover:text-taupe-900",
+        "focus:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40 focus-visible:ring-inset",
+        active ? "bg-ground-900 text-white" : "text-ground-600 hover:bg-ground-50 hover:text-ground-900",
         className
       ),
       ...props,
@@ -564,33 +566,33 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
         months: "flex flex-col sm:flex-row gap-4",
         month: "flex flex-col gap-4",
         month_caption: "flex justify-center pt-1 relative items-center px-10",
-        caption_label: "body font-semibold text-taupe-900",
+        caption_label: "body font-semibold text-ground-900",
         nav: "flex items-center justify-between absolute inset-x-0 top-1",
         button_previous: cn(
           "absolute left-0 h-7 w-7 flex items-center justify-center rounded-md",
-          "text-taupe-400 hover:bg-taupe-100 hover:text-taupe-700 transition-colors"
+          "text-ground-400 hover:bg-ground-100 hover:text-ground-700 transition-colors"
         ),
         button_next: cn(
           "absolute right-0 h-7 w-7 flex items-center justify-center rounded-md",
-          "text-taupe-400 hover:bg-taupe-100 hover:text-taupe-700 transition-colors"
+          "text-ground-400 hover:bg-ground-100 hover:text-ground-700 transition-colors"
         ),
         month_grid: "w-full border-collapse mt-1",
         weekdays: "flex",
-        weekday: "w-9 h-9 flex items-center justify-center label text-taupe-400 font-normal",
+        weekday: "w-9 h-9 flex items-center justify-center label text-ground-400 font-normal",
         week: "flex w-full mt-1",
         day: "relative p-0 text-center",
         day_button: cn(
           "h-9 w-9 flex items-center justify-center rounded-full body font-normal",
-          "text-taupe-900 hover:bg-taupe-100 transition-colors",
+          "text-ground-900 hover:bg-ground-100 transition-colors",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30"
         ),
         selected: "[&>button]:bg-brand-primary [&>button]:text-white [&>button]:hover:bg-brand-primary/90",
         today: "[&>button]:font-semibold [&>button]:text-brand-primary",
-        outside: "opacity-40 [&>button]:text-taupe-400",
+        outside: "opacity-40 [&>button]:text-ground-400",
         disabled: "opacity-30 [&>button]:cursor-not-allowed",
         range_start: "[&>button]:bg-brand-primary [&>button]:text-white [&>button]:rounded-full",
         range_end: "[&>button]:bg-brand-primary [&>button]:text-white [&>button]:rounded-full",
-        range_middle: "[&>button]:bg-brand-primary/15 [&>button]:text-taupe-900 [&>button]:rounded-none",
+        range_middle: "[&>button]:bg-brand-primary/15 [&>button]:text-ground-900 [&>button]:rounded-none",
         hidden: "invisible",
         ...classNames
       },
@@ -607,15 +609,15 @@ function CardHeading({ title, description, actions, children, className }) {
     "div",
     {
       className: cn(
-        "flex items-start justify-between gap-4 border-b border-taupe-100 px-5 py-4",
+        "flex items-start justify-between gap-4 border-b border-ground-100 px-5 py-4",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
           children,
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx("p", { className: "body font-semibold text-taupe-900 truncate", children: title }),
-            description && /* @__PURE__ */ jsx("p", { className: "caption text-taupe-400 mt-0.5", children: description })
+            /* @__PURE__ */ jsx("p", { className: "body font-semibold text-ground-900 truncate", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "caption text-ground-400 mt-0.5", children: description })
           ] })
         ] }),
         actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions.map(
@@ -638,7 +640,7 @@ var cardVariants = cva("rounded-xl", {
   variants: {
     variant: {
       default: "bg-white shadow-natural",
-      muted: "bg-taupe-50",
+      muted: "bg-ground-50",
       ghost: "bg-transparent"
     }
   },
@@ -676,7 +678,7 @@ var CardTitle = React15.forwardRef(
     {
       ref,
       "data-slot": "card-title",
-      className: cn("subheading text-taupe-900", className),
+      className: cn("subheading text-ground-900", className),
       ...props
     }
   )
@@ -688,7 +690,7 @@ var CardDescription = React15.forwardRef(
     {
       ref,
       "data-slot": "card-description",
-      className: cn("caption text-taupe-500", className),
+      className: cn("caption text-ground-500", className),
       ...props
     }
   )
@@ -891,18 +893,18 @@ function CarouselNext({
   );
 }
 var CHART_COLORS = {
-  primary: "#FF4D01",
-  // brand-primary
-  secondary: "#CDEA19",
-  // brand-secondary
-  tertiary: "#FDE086",
-  // brand-secondary
-  muted: "#a8978a",
-  // taupe-400
-  subtle: "#e3dcd4",
-  // taupe-200
-  dark: "#26181a"
-  // taupe-900
+  primary: tokens.brand.primary,
+  // "#C100F1" — vivid purple
+  secondary: tokens.semantic.light.success,
+  // "#CDEA19" — lime
+  tertiary: tokens.brand.secondary,
+  // "#FFF5BF" — pale lemon
+  muted: tokens.ground[400],
+  // "#a8978a"
+  subtle: tokens.ground[200],
+  // "#e3dcd4"
+  dark: tokens.ground[900]
+  // "#26181a"
 };
 function ChartContainer({ children, className, height = 300 }) {
   return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children }) });
@@ -910,8 +912,8 @@ function ChartContainer({ children, className, height = 300 }) {
 ChartContainer.displayName = "ChartContainer";
 function ChartTooltip({ active, payload, label, labelClassName }) {
   if (!active || !payload?.length) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-taupe-100 bg-white px-3 py-2 shadow-elevated", children: [
-    label && /* @__PURE__ */ jsx("p", { className: cn("mb-1 label text-taupe-400", labelClassName), children: label }),
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-ground-100 bg-white px-3 py-2 shadow-elevated", children: [
+    label && /* @__PURE__ */ jsx("p", { className: cn("mb-1 label text-ground-400", labelClassName), children: label }),
     payload.map((entry, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(
         "span",
@@ -920,11 +922,11 @@ function ChartTooltip({ active, payload, label, labelClassName }) {
           style: { backgroundColor: entry.color }
         }
       ),
-      /* @__PURE__ */ jsxs("span", { className: "caption text-taupe-500", children: [
+      /* @__PURE__ */ jsxs("span", { className: "caption text-ground-500", children: [
         entry.name,
         ":"
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "caption font-medium text-taupe-900", children: entry.value })
+      /* @__PURE__ */ jsx("span", { className: "caption font-medium text-ground-900", children: entry.value })
     ] }, i))
   ] });
 }
@@ -934,7 +936,7 @@ var CheckboxRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "peer size-4 shrink-0 rounded border border-taupe-300 bg-white transition-colors",
+      "peer size-4 shrink-0 rounded border border-ground-300 bg-white transition-colors",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "data-[state=checked]:bg-brand-primary data-[state=checked]:border-brand-primary",
@@ -975,8 +977,8 @@ function ColorPicker({
         disabled,
         "aria-label": ariaLabel,
         className: cn(
-          "inline-flex h-8 w-8 items-center justify-center rounded-md border border-taupe-200 bg-white",
-          "transition-colors hover:border-taupe-300",
+          "inline-flex h-8 w-8 items-center justify-center rounded-md border border-ground-200 bg-white",
+          "transition-colors hover:border-ground-300",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
           "disabled:cursor-not-allowed disabled:opacity-50",
           className
@@ -1007,11 +1009,11 @@ function ColorPicker({
                 setHex(e.target.value);
                 onChange(e.target.value);
               },
-              className: "h-10 w-full cursor-pointer rounded-md border border-taupe-200 bg-white p-0.5"
+              className: "h-10 w-full cursor-pointer rounded-md border border-ground-200 bg-white p-0.5"
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "caption text-taupe-500", children: "Hex" }),
+            /* @__PURE__ */ jsx("span", { className: "caption text-ground-500", children: "Hex" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -1022,7 +1024,7 @@ function ColorPicker({
                 onKeyDown: (e) => {
                   if (e.key === "Enter") commit(e.target.value);
                 },
-                className: "flex-1 h-7 rounded-md border border-taupe-200 bg-white px-2 caption text-taupe-900 focus:outline-none focus:border-brand-primary"
+                className: "flex-1 h-7 rounded-md border border-ground-200 bg-white px-2 caption text-ground-900 focus:outline-none focus:border-brand-primary"
               }
             )
           ] }),
@@ -1063,7 +1065,7 @@ function ColorInput({
     "div",
     {
       className: cn(
-        "inline-flex h-8 items-stretch gap-0 rounded-md border border-taupe-200 bg-white overflow-hidden",
+        "inline-flex h-8 items-stretch gap-0 rounded-md border border-ground-200 bg-white overflow-hidden",
         "focus-within:ring-2 focus-within:ring-brand-primary/20 focus-within:border-brand-primary",
         disabled && "opacity-50 pointer-events-none",
         className
@@ -1074,8 +1076,8 @@ function ColorInput({
           {
             value,
             onChange,
-            presets,
-            disabled,
+            ...presets !== void 0 && { presets },
+            ...disabled !== void 0 && { disabled },
             className: "h-full w-8 border-0 rounded-none focus-visible:ring-0"
           }
         ),
@@ -1091,10 +1093,10 @@ function ColorInput({
                 commitHex("#" + e.target.value.replace(/^#/, ""));
             },
             spellCheck: false,
-            className: "w-[5.5rem] caption text-taupe-900 px-2 bg-transparent border-l border-taupe-100 focus:outline-none uppercase"
+            className: "w-[5.5rem] caption text-ground-900 px-2 bg-transparent border-l border-ground-100 focus:outline-none uppercase"
           }
         ),
-        typeof opacity === "number" && onOpacityChange && /* @__PURE__ */ jsxs("div", { className: "relative flex items-center border-l border-taupe-100", children: [
+        typeof opacity === "number" && onOpacityChange && /* @__PURE__ */ jsxs("div", { className: "relative flex items-center border-l border-ground-100", children: [
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -1103,10 +1105,10 @@ function ColorInput({
               max: 100,
               value: Math.round(opacity),
               onChange: (e) => onOpacityChange(Number(e.target.value)),
-              className: "w-12 caption text-taupe-900 px-2 bg-transparent focus:outline-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+              className: "w-12 caption text-ground-900 px-2 bg-transparent focus:outline-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
             }
           ),
-          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "caption-xs text-taupe-400 pr-2", children: "%" })
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "caption-xs text-ground-400 pr-2", children: "%" })
         ] })
       ]
     }
@@ -1152,7 +1154,7 @@ function Combobox({
   }, [open]);
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
-      selectedOption?.avatar && !open && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-2.5 flex size-5 items-center justify-center rounded-full bg-taupe-200 caption-xs font-semibold text-taupe-700 shrink-0", children: selectedOption.avatar }),
+      selectedOption?.avatar && !open && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-2.5 flex size-5 items-center justify-center rounded-full bg-ground-200 caption-xs font-semibold text-ground-700 shrink-0", children: selectedOption.avatar }),
       selectedOption?.statusColor && !open && /* @__PURE__ */ jsx(
         "div",
         {
@@ -1168,9 +1170,9 @@ function Combobox({
           role: "combobox",
           "aria-expanded": open,
           className: cn(
-            "flex h-9 w-full rounded-lg border border-taupe-200 bg-white pr-8 body text-taupe-900",
-            "placeholder:text-taupe-400",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/30 focus-visible:border-taupe-400",
+            "flex h-9 w-full rounded-lg border border-ground-200 bg-white pr-8 body text-ground-900",
+            "placeholder:text-ground-400",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/30 focus-visible:border-ground-400",
             "disabled:cursor-not-allowed disabled:opacity-50",
             selectedOption?.avatar && !open ? "pl-8" : selectedOption?.statusColor && !open ? "pl-7" : "pl-3"
           ),
@@ -1191,7 +1193,7 @@ function Combobox({
         {
           type: "button",
           tabIndex: -1,
-          className: "absolute inset-y-0 right-0 flex items-center px-2 text-taupe-400 hover:text-taupe-700 transition-colors",
+          className: "absolute inset-y-0 right-0 flex items-center px-2 text-ground-400 hover:text-ground-700 transition-colors",
           onClick: () => {
             if (open) {
               setOpen(false);
@@ -1205,7 +1207,7 @@ function Combobox({
         }
       )
     ] }),
-    open && /* @__PURE__ */ jsx("div", { className: "absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-taupe-200 bg-white shadow-elevated", children: /* @__PURE__ */ jsx("ul", { role: "listbox", className: "max-h-60 overflow-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 body text-taupe-400", children: emptyText }) : filtered.map((option) => {
+    open && /* @__PURE__ */ jsx("div", { className: "absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-ground-200 bg-white shadow-elevated", children: /* @__PURE__ */ jsx("ul", { role: "listbox", className: "max-h-60 overflow-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 body text-ground-400", children: emptyText }) : filtered.map((option) => {
       const isSelected = option.value === value;
       return /* @__PURE__ */ jsxs(
         "li",
@@ -1214,7 +1216,7 @@ function Combobox({
           "aria-selected": isSelected,
           className: cn(
             "flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 body transition-colors",
-            isSelected ? "bg-brand-primary text-white" : "text-taupe-900 hover:bg-taupe-50"
+            isSelected ? "bg-brand-primary text-white" : "text-ground-900 hover:bg-ground-50"
           ),
           onMouseDown: (e) => e.preventDefault(),
           onClick: () => {
@@ -1228,7 +1230,7 @@ function Combobox({
               {
                 className: cn(
                   "flex size-6 shrink-0 items-center justify-center rounded-full caption-xs font-semibold",
-                  isSelected ? "bg-white/20 text-white" : "bg-taupe-200 text-taupe-700"
+                  isSelected ? "bg-white/20 text-white" : "bg-ground-200 text-ground-700"
                 ),
                 children: option.avatar
               }
@@ -1247,7 +1249,7 @@ function Combobox({
                 {
                   className: cn(
                     "caption truncate",
-                    isSelected ? "text-white/70" : "text-taupe-400"
+                    isSelected ? "text-white/70" : "text-ground-400"
                   ),
                   children: option.description
                 }
@@ -1295,7 +1297,7 @@ var DialogContent = React15.forwardRef(({ className, children, ...props }, ref)
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-4 top-4 rounded-md p-1 text-taupe-400 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-taupe-900/20", children: [
+        /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-4 top-4 rounded-md p-1 text-ground-400 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ground-900/20", children: [
           /* @__PURE__ */ jsx(X, { size: 16 }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
         ] })
@@ -1316,12 +1318,12 @@ var DialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   Dialog.Title,
   {
     ref,
-    className: cn("body-lg font-semibold text-taupe-900", className),
+    className: cn("body-lg font-semibold text-ground-900", className),
     ...props
   }
 ));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Description, { ref, className: cn("body text-taupe-500", className), ...props }));
+var DialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Description, { ref, className: cn("body text-ground-500", className), ...props }));
 DialogDescription.displayName = "DialogDescription";
 function CommandPalette({
   open,
@@ -1357,14 +1359,14 @@ function CommandPalette({
     onClose();
   }
   return /* @__PURE__ */ jsx(DialogRoot, { open, onOpenChange: (v) => !v && onClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 overflow-hidden p-0 sm:max-w-xl", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-taupe-100 px-4", children: [
-      /* @__PURE__ */ jsx(Search, { size: 16, className: "shrink-0 text-taupe-400" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-ground-100 px-4", children: [
+      /* @__PURE__ */ jsx(Search, { size: 16, className: "shrink-0 text-ground-400" }),
       /* @__PURE__ */ jsx(
         "input",
         {
           ref: inputRef,
           type: "text",
-          className: "h-12 flex-1 bg-transparent body text-taupe-900 placeholder:text-taupe-400 focus:outline-none",
+          className: "h-12 flex-1 bg-transparent body text-ground-900 placeholder:text-ground-400 focus:outline-none",
           placeholder,
           value: query,
           onChange: (e) => setQuery(e.target.value),
@@ -1374,23 +1376,23 @@ function CommandPalette({
           }
         }
       ),
-      /* @__PURE__ */ jsx("kbd", { className: "hidden items-center gap-0.5 sm:flex", children: /* @__PURE__ */ jsx("span", { className: "caption-xs font-medium text-taupe-400 rounded border border-taupe-200 px-1.5 py-0.5", children: "esc" }) })
+      /* @__PURE__ */ jsx("kbd", { className: "hidden items-center gap-0.5 sm:flex", children: /* @__PURE__ */ jsx("span", { className: "caption-xs font-medium text-ground-400 rounded border border-ground-200 px-1.5 py-0.5", children: "esc" }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "max-h-80 overflow-y-auto", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-4 py-8 text-center body text-taupe-400", children: emptyText }) : /* @__PURE__ */ jsx("ul", { role: "list", className: "py-2", children: categories.map((cat) => /* @__PURE__ */ jsxs("li", { children: [
-      cat && /* @__PURE__ */ jsx("p", { className: "label px-4 py-2 text-taupe-400", children: cat }),
+    /* @__PURE__ */ jsx("div", { className: "max-h-80 overflow-y-auto", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-4 py-8 text-center body text-ground-400", children: emptyText }) : /* @__PURE__ */ jsx("ul", { role: "list", className: "py-2", children: categories.map((cat) => /* @__PURE__ */ jsxs("li", { children: [
+      cat && /* @__PURE__ */ jsx("p", { className: "label px-4 py-2 text-ground-400", children: cat }),
       grouped[cat].map((item, i) => /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
-          className: "flex w-full items-center gap-3 px-4 py-2.5 body text-left transition-colors hover:bg-taupe-50 focus-visible:bg-taupe-50 focus-visible:outline-none",
+          className: "flex w-full items-center gap-3 px-4 py-2.5 body text-left transition-colors hover:bg-ground-50 focus-visible:bg-ground-50 focus-visible:outline-none",
           onClick: () => handleSelect(item),
           children: [
-            item.icon && /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-taupe-200 bg-white text-taupe-500", children: item.icon }),
+            item.icon && /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-ground-200 bg-white text-ground-500", children: item.icon }),
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("p", { className: "font-medium text-taupe-900 truncate", children: item.label }),
-              item.description && /* @__PURE__ */ jsx("p", { className: "caption text-taupe-400 truncate", children: item.description })
+              /* @__PURE__ */ jsx("p", { className: "font-medium text-ground-900 truncate", children: item.label }),
+              item.description && /* @__PURE__ */ jsx("p", { className: "caption text-ground-400 truncate", children: item.description })
             ] }),
-            /* @__PURE__ */ jsx(ArrowRight, { size: 13, className: "shrink-0 text-taupe-300" })
+            /* @__PURE__ */ jsx(ArrowRight, { size: 13, className: "shrink-0 text-ground-300" })
           ]
         },
         item.id ?? i
@@ -1420,11 +1422,11 @@ function Command({ className, children, onSelect, ...props }) {
       setVisibleCount(visibleIds.current.size);
     }
   }, []);
-  return /* @__PURE__ */ jsx(CommandCtx.Provider, { value: { query, setQuery, onSelect, reportVisible }, children: /* @__PURE__ */ jsx(CommandVisibleCtx.Provider, { value: visibleCount, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(CommandCtx.Provider, { value: { query, setQuery, ...onSelect !== void 0 && { onSelect }, reportVisible }, children: /* @__PURE__ */ jsx(CommandVisibleCtx.Provider, { value: visibleCount, children: /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "flex flex-col overflow-hidden rounded-xl border border-taupe-200 bg-white",
+        "flex flex-col overflow-hidden rounded-xl border border-ground-200 bg-white",
         className
       ),
       ...props,
@@ -1434,8 +1436,8 @@ function Command({ className, children, onSelect, ...props }) {
 }
 var CommandInput = React15.forwardRef(({ className, ...props }, ref) => {
   const { query, setQuery } = React15.useContext(CommandCtx);
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-taupe-100 px-3", children: [
-    /* @__PURE__ */ jsx(Search, { size: 14, className: "shrink-0 text-taupe-400" }),
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-ground-100 px-3", children: [
+    /* @__PURE__ */ jsx(Search, { size: 14, className: "shrink-0 text-ground-400" }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -1445,8 +1447,8 @@ var CommandInput = React15.forwardRef(({ className, ...props }, ref) => {
         autoCorrect: "off",
         spellCheck: false,
         className: cn(
-          "flex h-10 w-full bg-transparent body text-taupe-900",
-          "placeholder:text-taupe-400 focus:outline-none",
+          "flex h-10 w-full bg-transparent body text-ground-900",
+          "placeholder:text-ground-400 focus:outline-none",
           className
         ),
         value: query,
@@ -1503,7 +1505,7 @@ var CommandEmpty = React15.forwardRef(
       "div",
       {
         ref,
-        className: cn("py-6 text-center caption text-taupe-400", className),
+        className: cn("py-6 text-center caption text-ground-400", className),
         ...props,
         children
       }
@@ -1513,7 +1515,7 @@ var CommandEmpty = React15.forwardRef(
 CommandEmpty.displayName = "CommandEmpty";
 var CommandGroup = React15.forwardRef(
   ({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, role: "group", className: cn("py-1", className), ...props, children: [
-    heading && /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 pt-0.5 label text-taupe-400", children: heading }),
+    heading && /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 pt-0.5 label text-ground-400", children: heading }),
     children
   ] })
 );
@@ -1545,9 +1547,9 @@ var CommandItem = React15.forwardRef(
         tabIndex: disabled ? void 0 : 0,
         className: cn(
           "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5 mx-1",
-          "body text-taupe-700 outline-none transition-colors",
-          "hover:bg-taupe-50 hover:text-taupe-900",
-          "focus:bg-taupe-50 focus:text-taupe-900",
+          "body text-ground-700 outline-none transition-colors",
+          "hover:bg-ground-50 hover:text-ground-900",
+          "focus:bg-ground-50 focus:text-ground-900",
           disabled && "pointer-events-none opacity-40",
           className
         ),
@@ -1566,14 +1568,14 @@ var CommandItem = React15.forwardRef(
 );
 CommandItem.displayName = "CommandItem";
 var CommandSeparator = React15.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("my-1 h-px bg-taupe-100", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("my-1 h-px bg-ground-100", className), ...props })
 );
 CommandSeparator.displayName = "CommandSeparator";
 function CommandShortcut({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cn("ml-auto caption text-taupe-300 tracking-widest font-medium", className),
+      className: cn("ml-auto caption text-ground-300 tracking-widest font-medium", className),
       ...props
     }
   );
@@ -1609,7 +1611,7 @@ var ContextMenuItem = React15.forwardRef(({ className, inset, destructive, ...pr
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
       "body outline-none transition-colors",
-      destructive ? "text-red-600 focus:bg-red-50 focus:text-red-700" : "text-taupe-700 focus:bg-taupe-50 focus:text-taupe-900",
+      destructive ? "text-red-600 focus:bg-red-50 focus:text-red-700" : "text-ground-700 focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
@@ -1618,21 +1620,20 @@ var ContextMenuItem = React15.forwardRef(({ className, inset, destructive, ...pr
   }
 ));
 ContextMenuItem.displayName = "ContextMenuItem";
-var ContextMenuCheckboxItem = React15.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuCheckboxItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenu.CheckboxItem,
   {
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
-    checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-taupe-900" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-ground-900" }) }) }),
       children
     ]
   }
@@ -1644,14 +1645,14 @@ var ContextMenuRadioItem = React15.forwardRef(({ className, children, ...props }
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { size: 8, className: "fill-taupe-900 text-taupe-900" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { size: 8, className: "fill-ground-900 text-ground-900" }) }) }),
       children
     ]
   }
@@ -1661,7 +1662,7 @@ var ContextMenuLabel = React15.forwardRef(({ className, inset, ...props }, ref)
   ContextMenu.Label,
   {
     ref,
-    className: cn("px-2.5 py-1 label text-taupe-400", inset && "pl-8", className),
+    className: cn("px-2.5 py-1 label text-ground-400", inset && "pl-8", className),
     ...props
   }
 ));
@@ -1670,7 +1671,7 @@ var ContextMenuSeparator = React15.forwardRef(({ className, ...props }, ref) =>
   ContextMenu.Separator,
   {
     ref,
-    className: cn("mx-1 my-1 h-px bg-taupe-100", className),
+    className: cn("mx-1 my-1 h-px bg-ground-100", className),
     ...props
   }
 ));
@@ -1681,15 +1682,15 @@ var ContextMenuSubTrigger = React15.forwardRef(({ className, inset, children, ..
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
-      "body text-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900 data-[state=open]:bg-taupe-50",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900 data-[state=open]:bg-ground-50",
       inset && "pl-8",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-auto text-taupe-400" })
+      /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-auto text-ground-400" })
     ]
   }
 ));
@@ -1699,7 +1700,7 @@ var ContextMenuSubContent = React15.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] bg-white rounded-xl border border-taupe-100 shadow-natural p-1",
+      "z-50 min-w-[8rem] bg-white rounded-xl border border-ground-100 shadow-natural p-1",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -1711,32 +1712,32 @@ var ContextMenuSubContent = React15.forwardRef(({ className, ...props }, ref) =>
 ));
 ContextMenuSubContent.displayName = "ContextMenuSubContent";
 function ContextMenuShortcut({ className, ...props }) {
-  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-taupe-400", className), ...props });
+  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-ground-400", className), ...props });
 }
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 var Table = React15.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
-      "w-full overflow-hidden rounded-xl border border-taupe-100 bg-white",
+      "w-full overflow-hidden rounded-xl border border-ground-100 bg-white",
       containerClassName
     ),
     children: /* @__PURE__ */ jsx(
       "table",
       {
         ref,
-        className: cn("min-w-full caption-bottom divide-y divide-taupe-200", className),
+        className: cn("min-w-full caption-bottom divide-y divide-ground-200", className),
         ...props
       }
     )
   }
 ));
 Table.displayName = "Table";
-var TableHeader = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("bg-taupe-50", className), ...props }));
+var TableHeader = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("bg-ground-50", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("divide-y divide-taupe-100 bg-white", className), ...props }));
+var TableBody = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("divide-y divide-ground-100 bg-white", className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", { ref, className: cn("bg-taupe-50 font-medium", className), ...props }));
+var TableFooter = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", { ref, className: cn("bg-ground-50 font-medium", className), ...props }));
 TableFooter.displayName = "TableFooter";
 var TableRow = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -1744,7 +1745,7 @@ var TableRow = React15.forwardRef(
     {
       ref,
       className: cn(
-        "transition-colors hover:bg-taupe-50/50 data-[state=selected]:bg-taupe-50",
+        "transition-colors hover:bg-ground-50/50 data-[state=selected]:bg-ground-50",
         className
       ),
       ...props
@@ -1757,7 +1758,7 @@ var TableHead = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "px-6 py-3 text-left align-middle label text-taupe-400",
+      "px-6 py-3 text-left align-middle label text-ground-400",
       "[&:has([role=checkbox])]:pr-0",
       className
     ),
@@ -1770,7 +1771,7 @@ var TableCell = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "px-6 py-4 align-middle body text-taupe-500",
+      "px-6 py-4 align-middle body text-ground-500",
       "[&:has([role=checkbox])]:pr-0",
       className
     ),
@@ -1778,7 +1779,7 @@ var TableCell = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", { ref, className: cn("mt-4 caption text-taupe-400", className), ...props }));
+var TableCaption = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", { ref, className: cn("mt-4 caption text-ground-400", className), ...props }));
 TableCaption.displayName = "TableCaption";
 function Input({ className, type, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -1787,18 +1788,19 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "flex h-9 w-full rounded-md border border-taupe-200 bg-white px-3 py-1",
-        "body text-taupe-900 placeholder:text-taupe-400",
+        "flex h-9 w-full rounded-md border border-ground-200 bg-white px-3 py-1",
+        "body text-ground-900 placeholder:text-ground-400",
         "transition-colors duration-150",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
-        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-taupe-50",
-        "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-taupe-900",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-ground-50",
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-ground-900",
         className
       ),
       ...props
     }
   );
 }
+Input.displayName = "Input";
 function DataTable({
   columns,
   data,
@@ -1836,26 +1838,26 @@ function DataTable({
         "button",
         {
           className: cn(
-            "flex items-center gap-1 transition-colors hover:text-taupe-700",
-            header.column.getIsSorted() && "text-taupe-900"
+            "flex items-center gap-1 transition-colors hover:text-ground-700",
+            header.column.getIsSorted() && "text-ground-900"
           ),
           onClick: header.column.getToggleSortingHandler(),
           children: [
             flexRender(header.column.columnDef.header, header.getContext()),
-            header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { size: 12, className: "text-brand-primary" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ChevronDown, { size: 12, className: "text-brand-primary" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { size: 12, className: "text-taupe-300" })
+            header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { size: 12, className: "text-brand-primary" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ChevronDown, { size: 12, className: "text-brand-primary" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { size: 12, className: "text-ground-300" })
           ]
         }
       ) : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center text-taupe-400", children: "No results." }) }) })
+      /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center text-ground-400", children: "No results." }) }) })
     ] }),
     showPagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("p", { className: "caption text-taupe-400", children: [
+      /* @__PURE__ */ jsxs("p", { className: "caption text-ground-400", children: [
         table.getFilteredRowModel().rows.length,
         " result",
         table.getFilteredRowModel().rows.length !== 1 ? "s" : ""
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("span", { className: "caption text-taupe-400", children: [
+        /* @__PURE__ */ jsxs("span", { className: "caption text-ground-400", children: [
           "Page ",
           table.getState().pagination.pageIndex + 1,
           " of ",
@@ -1926,17 +1928,25 @@ function DatePicker({
         variant: "outline",
         className: cn(
           "w-[240px] justify-start gap-2 text-left font-normal",
-          !value && "text-taupe-400",
+          !value && "text-ground-400",
           className
         ),
         disabled,
         children: [
-          /* @__PURE__ */ jsx(CalendarIcon, { size: 14, className: "text-taupe-400 shrink-0" }),
+          /* @__PURE__ */ jsx(CalendarIcon, { size: 14, className: "text-ground-400 shrink-0" }),
           value ? formatDate(value) : /* @__PURE__ */ jsx("span", { children: placeholder })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0 shadow-elevated", align: "start", children: /* @__PURE__ */ jsx(Calendar, { mode: "single", selected: value, onSelect: onChange, autoFocus: true }) })
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0 shadow-elevated", align: "start", children: /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        mode: "single",
+        ...value !== void 0 && { selected: value },
+        ...onChange !== void 0 && { onSelect: onChange },
+        autoFocus: true
+      }
+    ) })
   ] });
 }
 DatePicker.displayName = "DatePicker";
@@ -1950,21 +1960,21 @@ function DescriptionList({
 }) {
   return /* @__PURE__ */ jsxs("div", { className, children: [
     (title || description) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-      title && /* @__PURE__ */ jsx("p", { className: "body font-semibold text-taupe-900", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "mt-1 caption text-taupe-400", children: description })
+      title && /* @__PURE__ */ jsx("p", { className: "body font-semibold text-ground-900", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 caption text-ground-400", children: description })
     ] }),
-    /* @__PURE__ */ jsx("dl", { className: cn("border-t border-taupe-100", columns === 2 && "sm:grid sm:grid-cols-2"), children: items.map((item, i) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("dl", { className: cn("border-t border-ground-100", columns === 2 && "sm:grid sm:grid-cols-2"), children: items.map((item, i) => /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
           "py-3.5",
-          columns === 1 ? "grid grid-cols-3 gap-4 items-baseline" : "flex flex-col gap-1 border-b border-taupe-100",
-          columns === 1 && i !== items.length - 1 && "border-b border-taupe-100",
-          striped && i % 2 === 0 && "bg-taupe-50 -mx-4 px-4 rounded"
+          columns === 1 ? "grid grid-cols-3 gap-4 items-baseline" : "flex flex-col gap-1 border-b border-ground-100",
+          columns === 1 && i !== items.length - 1 && "border-b border-ground-100",
+          striped && i % 2 === 0 && "bg-ground-50 -mx-4 px-4 rounded"
         ),
         children: [
-          /* @__PURE__ */ jsx("dt", { className: "caption font-semibold text-taupe-500 uppercase tracking-wide", children: item.term }),
-          /* @__PURE__ */ jsx("dd", { className: cn("body text-taupe-900", columns === 1 ? "col-span-2" : ""), children: item.action ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsx("dt", { className: "caption font-semibold text-ground-500 uppercase tracking-wide", children: item.term }),
+          /* @__PURE__ */ jsx("dd", { className: cn("body text-ground-900", columns === 1 ? "col-span-2" : ""), children: item.action ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
             /* @__PURE__ */ jsx("span", { children: item.details }),
             item.action
           ] }) : item.details })
@@ -1982,7 +1992,7 @@ var DrawerOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__P
   Drawer.Overlay,
   {
     ref,
-    className: cn("fixed inset-0 z-50 bg-taupe-950/40 backdrop-blur-[1px]", className),
+    className: cn("fixed inset-0 z-50 bg-ground-950/40 backdrop-blur-[1px]", className),
     ...props
   }
 ));
@@ -1994,12 +2004,12 @@ var DrawerContent = React15.forwardRef(({ className, children, ...props }, ref)
     {
       ref,
       className: cn(
-        "fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-2xl border border-taupe-100 bg-white",
+        "fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-2xl border border-ground-100 bg-white",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-1 w-12 rounded-full bg-taupe-200" }),
+        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-1 w-12 rounded-full bg-ground-200" }),
         children
       ]
     }
@@ -2014,7 +2024,7 @@ var DrawerTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   Drawer.Title,
   {
     ref,
-    className: cn("subheading text-taupe-900", className),
+    className: cn("subheading text-ground-900", className),
     ...props
   }
 ));
@@ -2023,7 +2033,7 @@ var DrawerDescription = React15.forwardRef(({ className, ...props }, ref) => /*
   Drawer.Description,
   {
     ref,
-    className: cn("body text-taupe-500", className),
+    className: cn("body text-ground-500", className),
     ...props
   }
 ));
@@ -2059,7 +2069,7 @@ var DropdownMenuItem = React15.forwardRef(({ className, inset, destructive, ...p
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
       "body outline-none transition-colors",
-      destructive ? "text-red-600 focus:bg-red-50 focus:text-red-700" : "text-taupe-700 focus:bg-taupe-50 focus:text-taupe-900",
+      destructive ? "text-red-600 focus:bg-red-50 focus:text-red-700" : "text-ground-700 focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
@@ -2068,21 +2078,20 @@ var DropdownMenuItem = React15.forwardRef(({ className, inset, destructive, ...p
   }
 ));
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuCheckboxItem = React15.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuCheckboxItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenu.CheckboxItem,
   {
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
-    checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-taupe-900" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-ground-900" }) }) }),
       children
     ]
   }
@@ -2094,14 +2103,14 @@ var DropdownMenuRadioItem = React15.forwardRef(({ className, children, ...props
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { size: 8, className: "fill-taupe-900 text-taupe-900" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { size: 8, className: "fill-ground-900 text-ground-900" }) }) }),
       children
     ]
   }
@@ -2111,7 +2120,7 @@ var DropdownMenuLabel = React15.forwardRef(({ className, inset, ...props }, ref)
   DropdownMenu.Label,
   {
     ref,
-    className: cn("px-2.5 py-1 label text-taupe-400", inset && "pl-8", className),
+    className: cn("px-2.5 py-1 label text-ground-400", inset && "pl-8", className),
     ...props
   }
 ));
@@ -2120,7 +2129,7 @@ var DropdownMenuSeparator = React15.forwardRef(({ className, ...props }, ref) =>
   DropdownMenu.Separator,
   {
     ref,
-    className: cn("mx-1 my-1 h-px bg-taupe-100", className),
+    className: cn("mx-1 my-1 h-px bg-ground-100", className),
     ...props
   }
 ));
@@ -2131,15 +2140,15 @@ var DropdownMenuSubTrigger = React15.forwardRef(({ className, inset, children, .
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
-      "body text-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900 data-[state=open]:bg-taupe-50",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900 data-[state=open]:bg-ground-50",
       inset && "pl-8",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-auto text-taupe-400" })
+      /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-auto text-ground-400" })
     ]
   }
 ));
@@ -2149,7 +2158,7 @@ var DropdownMenuSubContent = React15.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] bg-white rounded-xl border border-taupe-100 shadow-natural p-1",
+      "z-50 min-w-[8rem] bg-white rounded-xl border border-ground-100 shadow-natural p-1",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -2161,15 +2170,15 @@ var DropdownMenuSubContent = React15.forwardRef(({ className, ...props }, ref) =
 ));
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
 function DropdownMenuShortcut({ className, ...props }) {
-  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-taupe-400", className), ...props });
+  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-ground-400", className), ...props });
 }
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 function EmptyState({ icon, title, description, action, className }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-4 px-6 py-14 text-center", className), children: [
-    icon && /* @__PURE__ */ jsx("div", { className: "flex size-12 items-center justify-center rounded-xl bg-brand-secondary/20 text-taupe-700", children: icon }),
+    icon && /* @__PURE__ */ jsx("div", { className: "flex size-12 items-center justify-center rounded-xl bg-brand-secondary/20 text-ground-700", children: icon }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsx("p", { className: "body font-semibold text-taupe-900", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "body max-w-xs text-taupe-400", children: description })
+      /* @__PURE__ */ jsx("p", { className: "body font-semibold text-ground-900", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "body max-w-xs text-ground-400", children: description })
     ] }),
     action && (action.href ? /* @__PURE__ */ jsx(Button, { size: "sm", asChild: true, children: /* @__PURE__ */ jsx("a", { href: action.href, children: action.label }) }) : /* @__PURE__ */ jsx(Button, { size: "sm", onClick: action.onClick, children: action.label }))
   ] });
@@ -2179,7 +2188,7 @@ var Label = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   {
     ref,
     className: cn(
-      "body font-medium leading-none text-taupe-700",
+      "body font-medium leading-none text-ground-700",
       "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
       className
     ),
@@ -2195,20 +2204,23 @@ function Field({
   required,
   cornerHint,
   className,
-  children
+  children,
+  ref
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+  const descriptionId = htmlFor ? `${htmlFor}-description` : void 0;
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1.5", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs(Label, { htmlFor, children: [
+      /* @__PURE__ */ jsxs(Label, { htmlFor, "aria-required": required, children: [
         label,
-        required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-red-600", children: "*" })
+        required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-red-600", "aria-hidden": "true", children: "*" })
       ] }),
-      cornerHint && /* @__PURE__ */ jsx("span", { className: "caption text-taupe-400", children: cornerHint })
+      cornerHint && /* @__PURE__ */ jsx("span", { className: "caption text-ground-400", children: cornerHint })
     ] }),
     children,
-    error ? /* @__PURE__ */ jsx("p", { className: "caption text-red-600", children: error }) : hint ? /* @__PURE__ */ jsx("p", { className: "caption text-taupe-400", children: hint }) : null
+    error ? /* @__PURE__ */ jsx("p", { id: descriptionId, role: "alert", className: "caption text-red-600", children: error }) : hint ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: "caption text-ground-400", children: hint }) : null
   ] });
 }
+Field.displayName = "Field";
 var colMap = {
   2: "grid-cols-1 sm:grid-cols-2",
   3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
@@ -2235,17 +2247,17 @@ function GridListCard({
     "div",
     {
       className: cn(
-        "flex h-full flex-col gap-1 rounded-xl border border-taupe-100 bg-white p-4 shadow-natural transition-shadow",
+        "flex h-full flex-col gap-1 rounded-xl border border-ground-100 bg-white p-4 shadow-natural transition-shadow",
         href && "hover:shadow-elevated",
         className
       ),
       children: [
         accent && /* @__PURE__ */ jsx("div", { className: "mb-2", children: accent }),
-        /* @__PURE__ */ jsx("p", { className: "body font-semibold text-taupe-900", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "caption text-taupe-400", children: description }),
+        /* @__PURE__ */ jsx("p", { className: "body font-semibold text-ground-900", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "caption text-ground-400", children: description }),
         (meta || trailing) && /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center justify-between pt-3", children: [
-          meta && /* @__PURE__ */ jsx("span", { className: "caption text-taupe-400", children: meta }),
-          trailing && /* @__PURE__ */ jsx("span", { className: "caption text-taupe-400", children: trailing })
+          meta && /* @__PURE__ */ jsx("span", { className: "caption text-ground-400", children: meta }),
+          trailing && /* @__PURE__ */ jsx("span", { className: "caption text-ground-400", children: trailing })
         ] })
       ]
     }
@@ -2254,7 +2266,7 @@ function GridListCard({
     "a",
     {
       href,
-      className: "block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/40 rounded-xl",
+      className: "block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40 rounded-xl",
       children: inner
     }
   ) : inner });
@@ -2263,7 +2275,7 @@ function GridListAccentCard({
   title,
   meta,
   href,
-  accentClass = "bg-taupe-900",
+  accentClass = "bg-ground-900",
   initials,
   trailing,
   className
@@ -2272,7 +2284,7 @@ function GridListAccentCard({
     "div",
     {
       className: cn(
-        "flex overflow-hidden rounded-xl border border-taupe-100 bg-white shadow-natural transition-shadow",
+        "flex overflow-hidden rounded-xl border border-ground-100 bg-white shadow-natural transition-shadow",
         href && "hover:shadow-elevated",
         className
       ),
@@ -2287,10 +2299,10 @@ function GridListAccentCard({
             children: initials
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-between truncate border-l border-taupe-100 px-4 py-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-between truncate border-l border-ground-100 px-4 py-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx("p", { className: "body font-semibold text-taupe-900 truncate", children: title }),
-            meta && /* @__PURE__ */ jsx("p", { className: "caption text-taupe-400", children: meta })
+            /* @__PURE__ */ jsx("p", { className: "body font-semibold text-ground-900 truncate", children: title }),
+            meta && /* @__PURE__ */ jsx("p", { className: "caption text-ground-400", children: meta })
           ] }),
           trailing && /* @__PURE__ */ jsx("div", { className: "shrink-0 pl-2", children: trailing })
         ] })
@@ -2301,7 +2313,7 @@ function GridListAccentCard({
     "a",
     {
       href,
-      className: "block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/40 rounded-xl",
+      className: "block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40 rounded-xl",
       children: inner
     }
   ) : inner });
@@ -2315,7 +2327,7 @@ var HoverCardContent = React15.forwardRef(({ className, align = "center", sideOf
     align,
     sideOffset,
     className: cn(
-      "z-50 w-64 rounded-xl border border-taupe-100 bg-white p-4 shadow-elevated outline-none",
+      "z-50 w-64 rounded-xl border border-ground-100 bg-white p-4 shadow-elevated outline-none",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -2344,9 +2356,9 @@ var InputGroup = React15.forwardRef(
     const hasLeading = leadingAddon || leadingIcon;
     const hasTrailing = trailingAddon || trailingIcon || trailingButton || error;
     const baseInput = cn(
-      "flex h-9 w-full border bg-white body text-taupe-900 placeholder:text-taupe-400",
+      "flex h-9 w-full border bg-white body text-ground-900 placeholder:text-ground-400",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:disabled:cursor-not-allowed disabled:opacity-50",
-      error ? "border-red-400 focus-visible:ring-red-200 focus-visible:border-red-500" : "border-taupe-200 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary"
+      error ? "border-red-400 focus-visible:ring-red-200 focus-visible:border-red-500" : "border-ground-200 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary"
     );
     if (!hasLeading && !hasTrailing) {
       return /* @__PURE__ */ jsx("input", { ref, className: cn(baseInput, radius, "px-3", className), ...props });
@@ -2356,15 +2368,15 @@ var InputGroup = React15.forwardRef(
         "span",
         {
           className: cn(
-            "inline-flex items-center border border-r-0 bg-taupe-50 px-3 body text-taupe-500 select-none",
-            error ? "border-red-400" : "border-taupe-200",
+            "inline-flex items-center border border-r-0 bg-ground-50 px-3 body text-ground-500 select-none",
+            error ? "border-red-400" : "border-ground-200",
             pill ? "rounded-l-full" : "rounded-l-lg"
           ),
           children: leadingAddon
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
-        leadingIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-taupe-400", children: leadingIcon }),
+        leadingIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-ground-400", children: leadingIcon }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2378,14 +2390,14 @@ var InputGroup = React15.forwardRef(
             ...props
           }
         ),
-        (trailingIcon || error) && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", children: error ? /* @__PURE__ */ jsx(AlertCircle, { size: 15, className: "text-red-500" }) : /* @__PURE__ */ jsx("span", { className: "text-taupe-400", children: trailingIcon }) })
+        (trailingIcon || error) && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", children: error ? /* @__PURE__ */ jsx(AlertCircle, { size: 15, className: "text-red-500" }) : /* @__PURE__ */ jsx("span", { className: "text-ground-400", children: trailingIcon }) })
       ] }),
       trailingAddon && /* @__PURE__ */ jsx(
         "span",
         {
           className: cn(
-            "inline-flex items-center border border-l-0 bg-taupe-50 px-3 body text-taupe-500 select-none",
-            error ? "border-red-400" : "border-taupe-200",
+            "inline-flex items-center border border-l-0 bg-ground-50 px-3 body text-ground-500 select-none",
+            error ? "border-red-400" : "border-ground-200",
             pill ? "rounded-r-full" : "rounded-r-lg"
           ),
           children: trailingAddon
@@ -2445,7 +2457,7 @@ var InputNumber = React15.forwardRef(
       "div",
       {
         className: cn(
-          "inline-flex h-8 items-stretch rounded-md border border-taupe-200 bg-white overflow-hidden",
+          "inline-flex h-8 items-stretch rounded-md border border-ground-200 bg-white overflow-hidden",
           "focus-within:ring-2 focus-within:ring-brand-primary/20 focus-within:border-brand-primary",
           disabled && "opacity-50 pointer-events-none",
           className
@@ -2463,12 +2475,12 @@ var InputNumber = React15.forwardRef(
               onBlur: (e) => commit(e.target.value),
               onKeyDown,
               disabled,
-              className: "w-full caption text-taupe-900 px-2 bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-right",
+              className: "w-full caption text-ground-900 px-2 bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-right",
               ...rest
             }
           ),
-          unit && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "caption-xs text-taupe-400 self-center pr-1.5 select-none", children: unit }),
-          !hideSteppers && /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-taupe-100", children: [
+          unit && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "caption-xs text-ground-400 self-center pr-1.5 select-none", children: unit }),
+          !hideSteppers && /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-ground-100", children: [
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -2476,11 +2488,11 @@ var InputNumber = React15.forwardRef(
                 tabIndex: -1,
                 onClick: () => bump(step),
                 "aria-label": "Increment",
-                className: "flex-1 px-1 hover:bg-taupe-50 active:bg-taupe-100 transition-colors text-taupe-500",
+                className: "flex-1 px-1 hover:bg-ground-50 active:bg-ground-100 transition-colors text-ground-500",
                 children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 8 5", width: "8", height: "5", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M0 5 L4 0 L8 5 Z" }) })
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "border-t border-taupe-100" }),
+            /* @__PURE__ */ jsx("div", { className: "border-t border-ground-100" }),
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -2488,7 +2500,7 @@ var InputNumber = React15.forwardRef(
                 tabIndex: -1,
                 onClick: () => bump(-step),
                 "aria-label": "Decrement",
-                className: "flex-1 px-1 hover:bg-taupe-50 active:bg-taupe-100 transition-colors text-taupe-500",
+                className: "flex-1 px-1 hover:bg-ground-50 active:bg-ground-100 transition-colors text-ground-500",
                 children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 8 5", width: "8", height: "5", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M0 0 L4 5 L8 0 Z" }) })
               }
             )
@@ -2522,7 +2534,7 @@ var InputOTPSlot = React15.forwardRef(({ index, className, ...props }, ref) => {
       ref,
       className: cn(
         "relative flex h-12 w-11 items-center justify-center",
-        "border-y border-r border-taupe-200 body font-medium text-taupe-900",
+        "border-y border-r border-ground-200 body font-medium text-ground-900",
         "first:rounded-l-xl first:border-l last:rounded-r-xl",
         "transition-all",
         isActive && "z-10 ring-2 ring-brand-primary/40 border-brand-primary",
@@ -2531,14 +2543,14 @@ var InputOTPSlot = React15.forwardRef(({ index, className, ...props }, ref) => {
       ...props,
       children: [
         char,
-        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-5 w-px animate-caret-blink bg-taupe-900 duration-1000" }) })
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-5 w-px animate-caret-blink bg-ground-900 duration-1000" }) })
       ]
     }
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
 var InputOTPSeparator = React15.forwardRef(
-  ({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Minus, { size: 14, className: "text-taupe-300" }) })
+  ({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Minus, { size: 14, className: "text-ground-300" }) })
 );
 InputOTPSeparator.displayName = "InputOTPSeparator";
 var Kbd = React15.forwardRef(
@@ -2547,7 +2559,7 @@ var Kbd = React15.forwardRef(
     {
       ref,
       className: cn(
-        "inline-flex h-5 min-w-5 items-center justify-center rounded border border-taupe-200 bg-taupe-50 px-1.5 font-mono caption-xs font-medium text-taupe-500",
+        "inline-flex h-5 min-w-5 items-center justify-center rounded border border-ground-200 bg-ground-50 px-1.5 font-mono caption-xs font-medium text-ground-500",
         className
       ),
       ...props
@@ -2595,7 +2607,7 @@ var MenubarRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "flex h-9 items-center gap-0.5 rounded-lg border border-taupe-100 bg-white px-1",
+      "flex h-9 items-center gap-0.5 rounded-lg border border-ground-100 bg-white px-1",
       className
     ),
     ...props
@@ -2611,10 +2623,10 @@ var MenubarTrigger = React15.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "flex cursor-default items-center rounded-md px-3 py-1 body font-medium text-taupe-700 select-none outline-none",
-      "hover:bg-taupe-50",
-      "data-[state=open]:bg-taupe-100 data-[state=open]:text-taupe-900",
-      "focus:bg-taupe-50",
+      "flex cursor-default items-center rounded-md px-3 py-1 body font-medium text-ground-700 select-none outline-none",
+      "hover:bg-ground-50",
+      "data-[state=open]:bg-ground-100 data-[state=open]:text-ground-900",
+      "focus:bg-ground-50",
       className
     ),
     ...props
@@ -2647,8 +2659,8 @@ var MenubarItem = React15.forwardRef(({ className, inset, ...props }, ref) => /*
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
-      "body text-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
@@ -2657,21 +2669,20 @@ var MenubarItem = React15.forwardRef(({ className, inset, ...props }, ref) => /*
   }
 ));
 MenubarItem.displayName = "MenubarItem";
-var MenubarCheckboxItem = React15.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MenubarCheckboxItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   Menubar.CheckboxItem,
   {
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
-    checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-taupe-900" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-ground-900" }) }) }),
       children
     ]
   }
@@ -2683,14 +2694,14 @@ var MenubarRadioItem = React15.forwardRef(({ className, children, ...props }, re
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { size: 8, className: "fill-taupe-900 text-taupe-900" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { size: 8, className: "fill-ground-900 text-ground-900" }) }) }),
       children
     ]
   }
@@ -2700,7 +2711,7 @@ var MenubarLabel = React15.forwardRef(({ className, inset, ...props }, ref) => /
   Menubar.Label,
   {
     ref,
-    className: cn("px-2.5 py-1 label text-taupe-400", inset && "pl-8", className),
+    className: cn("px-2.5 py-1 label text-ground-400", inset && "pl-8", className),
     ...props
   }
 ));
@@ -2709,7 +2720,7 @@ var MenubarSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @
   Menubar.Separator,
   {
     ref,
-    className: cn("mx-1 my-1 h-px bg-taupe-100", className),
+    className: cn("mx-1 my-1 h-px bg-ground-100", className),
     ...props
   }
 ));
@@ -2720,15 +2731,15 @@ var MenubarSubTrigger = React15.forwardRef(({ className, inset, children, ...pro
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
-      "body text-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900 data-[state=open]:bg-taupe-50",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900 data-[state=open]:bg-ground-50",
       inset && "pl-8",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-auto text-taupe-400" })
+      /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-auto text-ground-400" })
     ]
   }
 ));
@@ -2738,7 +2749,7 @@ var MenubarSubContent = React15.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] bg-white rounded-xl border border-taupe-100 shadow-natural p-1",
+      "z-50 min-w-[8rem] bg-white rounded-xl border border-ground-100 shadow-natural p-1",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -2750,7 +2761,7 @@ var MenubarSubContent = React15.forwardRef(({ className, ...props }, ref) => /*
 ));
 MenubarSubContent.displayName = "MenubarSubContent";
 function MenubarShortcut({ className, ...props }) {
-  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-taupe-400", className), ...props });
+  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-ground-400", className), ...props });
 }
 MenubarShortcut.displayName = "MenubarShortcut";
 var NativeSelect = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -2759,9 +2770,9 @@ var NativeSelect = React15.forwardRef(({ className, children, ...props }, ref) =
     {
       ref,
       className: cn(
-        "peer h-9 w-full appearance-none rounded-lg border border-taupe-200 bg-white pl-3 pr-8",
-        "body text-taupe-900",
-        "focus:outline-none focus:ring-2 focus:ring-taupe-400/30 focus:border-taupe-400",
+        "peer h-9 w-full appearance-none rounded-lg border border-ground-200 bg-white pl-3 pr-8",
+        "body text-ground-900",
+        "focus:outline-none focus:ring-2 focus:ring-ground-400/30 focus:border-ground-400",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "aria-[invalid=true]:border-red-500 aria-[invalid=true]:focus:ring-red-500/20",
         className
@@ -2774,7 +2785,7 @@ var NativeSelect = React15.forwardRef(({ className, children, ...props }, ref) =
     ChevronDown,
     {
       size: 14,
-      className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-taupe-400 peer-disabled:opacity-50"
+      className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-ground-400 peer-disabled:opacity-50"
     }
   )
 ] }));
@@ -2809,9 +2820,9 @@ var NavigationMenuTrigger = React15.forwardRef(({ className, children, ...props
     ref,
     className: cn(
       "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
-      "body font-medium text-taupe-700",
-      "hover:bg-taupe-100 hover:text-taupe-900",
-      "data-[active]:bg-taupe-100 data-[state=open]:bg-taupe-100",
+      "body font-medium text-ground-700",
+      "hover:bg-ground-100 hover:text-ground-900",
+      "data-[active]:bg-ground-100 data-[state=open]:bg-ground-100",
       "outline-none transition-colors",
       className
     ),
@@ -2852,8 +2863,8 @@ var NavigationMenuLink = React15.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "block select-none rounded-md px-3 py-2 body text-taupe-700",
-      "hover:bg-taupe-50 hover:text-taupe-900",
+      "block select-none rounded-md px-3 py-2 body text-ground-700",
+      "hover:bg-ground-50 hover:text-ground-900",
       "outline-none transition-colors",
       className
     ),
@@ -2866,7 +2877,7 @@ var NavigationMenuViewport = React15.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     className: cn(
-      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-xl border border-taupe-100 bg-white shadow-elevated",
+      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-xl border border-ground-100 bg-white shadow-elevated",
       "md:w-[var(--radix-navigation-menu-viewport-width)]",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
@@ -2887,31 +2898,31 @@ var NavigationMenuIndicator = React15.forwardRef(({ className, ...props }, ref)
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-taupe-100 shadow-elevated" })
+    children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-ground-100 shadow-elevated" })
   }
 ));
 NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
 function navigationMenuTriggerStyle() {
   return cn(
     "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
-    "body font-medium text-taupe-700",
-    "hover:bg-taupe-100 hover:text-taupe-900",
-    "data-[active]:bg-taupe-100 data-[state=open]:bg-taupe-100",
+    "body font-medium text-ground-700",
+    "hover:bg-ground-100 hover:text-ground-900",
+    "data-[active]:bg-ground-100 data-[state=open]:bg-ground-100",
     "outline-none transition-colors"
   );
 }
 var variantConfig = {
-  default: { icon: null, iconClass: "text-taupe-400" },
+  default: { icon: null, iconClass: "text-ground-400" },
   success: {
     icon: CheckCircle,
-    iconClass: "bg-brand-secondary/25 text-taupe-700 rounded-full p-1"
+    iconClass: "bg-brand-secondary/25 text-ground-700 rounded-full p-1"
   },
   error: { icon: AlertCircle, iconClass: "text-red-500" },
   warning: {
     icon: AlertTriangle,
-    iconClass: "bg-brand-secondary/80 text-taupe-700 rounded-full p-1"
+    iconClass: "bg-brand-secondary/80 text-ground-700 rounded-full p-1"
   },
-  info: { icon: Info, iconClass: "text-taupe-400" }
+  info: { icon: Info, iconClass: "text-ground-400" }
 };
 function Notification({
   title,
@@ -2929,14 +2940,14 @@ function Notification({
     "div",
     {
       className: cn(
-        "pointer-events-auto w-full max-w-sm overflow-hidden rounded-xl border border-taupe-100 bg-white shadow-elevated",
+        "pointer-events-auto w-full max-w-sm overflow-hidden rounded-xl border border-ground-100 bg-white shadow-elevated",
         className
       ),
       children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
         resolvedIcon && /* @__PURE__ */ jsx("div", { className: cn("shrink-0 mt-0.5", config.iconClass), children: resolvedIcon }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "body font-semibold text-taupe-900", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 body text-taupe-500", children: description }),
+          /* @__PURE__ */ jsx("p", { className: "body font-semibold text-ground-900", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 body text-ground-500", children: description }),
           actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex gap-3", children: actions.map((action, i) => /* @__PURE__ */ jsx(
             "button",
             {
@@ -2944,7 +2955,7 @@ function Notification({
               onClick: action.onClick,
               className: cn(
                 "body font-semibold transition-colors",
-                action.variant === "ghost" ? "text-taupe-400 hover:text-taupe-700" : "text-taupe-900 hover:text-taupe-600"
+                action.variant === "ghost" ? "text-ground-400 hover:text-ground-700" : "text-ground-900 hover:text-ground-600"
               ),
               children: action.label
             },
@@ -2956,7 +2967,7 @@ function Notification({
           {
             type: "button",
             onClick: onClose,
-            className: "rounded-md text-taupe-400 hover:text-taupe-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/40",
+            className: "rounded-md text-ground-400 hover:text-ground-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40",
             children: [
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" }),
               /* @__PURE__ */ jsx(X, { size: 16 })
@@ -2976,27 +2987,27 @@ function PageHeading({
   badge,
   className
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("border-b border-taupe-100 pb-6", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("border-b border-ground-100 pb-6", className), children: [
     breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx("nav", { className: "mb-3 flex items-center gap-1.5", "aria-label": "Breadcrumb", children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React15.Fragment, { children: [
-      i > 0 && /* @__PURE__ */ jsx(ChevronRight, { size: 12, className: "text-taupe-300 shrink-0" }),
+      i > 0 && /* @__PURE__ */ jsx(ChevronRight, { size: 12, className: "text-ground-300 shrink-0" }),
       crumb.href ? /* @__PURE__ */ jsx(
         "a",
         {
           href: crumb.href,
-          className: "caption text-taupe-400 hover:text-taupe-700 transition-colors",
+          className: "caption text-ground-400 hover:text-ground-700 transition-colors",
           children: crumb.label
         }
-      ) : /* @__PURE__ */ jsx("span", { className: "caption font-semibold text-taupe-700", children: crumb.label })
+      ) : /* @__PURE__ */ jsx("span", { className: "caption font-semibold text-ground-700", children: crumb.label })
     ] }, i)) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap 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-3", children: [
-          /* @__PURE__ */ jsx("h1", { className: "display text-taupe-900 truncate", children: title }),
+          /* @__PURE__ */ jsx("h1", { className: "display text-ground-900 truncate", children: title }),
           badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: badge }) : /* @__PURE__ */ jsx(Badge, { variant: badge.variant ?? "secondary", children: badge.label }))
         ] }),
-        description && /* @__PURE__ */ jsx("p", { className: "mt-1.5 body text-taupe-400 max-w-2xl", children: description }),
-        meta && meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap items-center gap-4", children: meta.map((m, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 caption text-taupe-400", children: [
-          m.icon && /* @__PURE__ */ jsx("span", { className: "text-taupe-400", children: m.icon }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1.5 body text-ground-400 max-w-2xl", children: description }),
+        meta && meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap items-center gap-4", children: meta.map((m, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 caption text-ground-400", children: [
+          m.icon && /* @__PURE__ */ jsx("span", { className: "text-ground-400", children: m.icon }),
           /* @__PURE__ */ jsx("span", { children: m.text })
         ] }, i)) })
       ] }),
@@ -3088,7 +3099,7 @@ var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
   {
     "aria-hidden": true,
-    className: cn("flex size-8 items-center justify-center text-taupe-400", className),
+    className: cn("flex size-8 items-center justify-center text-ground-400", className),
     ...props,
     children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 14 })
   }
@@ -3098,7 +3109,7 @@ var ProgressRoot = React15.forwardRef(({ className, value, ...props }, ref) => /
   Progress.Root,
   {
     ref,
-    className: cn("relative h-2 w-full overflow-hidden rounded-full bg-taupe-100", className),
+    className: cn("relative h-2 w-full overflow-hidden rounded-full bg-ground-100", className),
     value,
     ...props,
     children: /* @__PURE__ */ jsx(
@@ -3132,7 +3143,7 @@ function PropertyRow({
         label !== void 0 && /* @__PURE__ */ jsx(
           "div",
           {
-            className: "caption text-taupe-500 shrink-0 select-none",
+            className: "caption text-ground-500 shrink-0 select-none",
             style: { width: typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth },
             children: label
           }
@@ -3163,7 +3174,7 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }) {
           "relative flex cursor-pointer flex-col gap-1 rounded-xl border p-4 text-left transition-all",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          isSelected ? "border-brand-primary bg-white shadow-natural" : "border-taupe-200 bg-white hover:border-taupe-400"
+          isSelected ? "border-brand-primary bg-white shadow-natural" : "border-ground-200 bg-white hover:border-ground-400"
         ),
         children: [
           isSelected && /* @__PURE__ */ jsx(
@@ -3175,25 +3186,25 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }) {
           ),
           /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              option.icon && /* @__PURE__ */ jsx("div", { className: "mb-2 text-taupe-500", children: option.icon }),
+              option.icon && /* @__PURE__ */ jsx("div", { className: "mb-2 text-ground-500", children: option.icon }),
               /* @__PURE__ */ jsx(
                 "p",
                 {
                   className: cn(
                     "body font-semibold",
-                    isSelected ? "text-taupe-900" : "text-taupe-800"
+                    isSelected ? "text-ground-900" : "text-ground-800"
                   ),
                   children: option.label
                 }
               ),
-              option.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 caption text-taupe-400", children: option.description })
+              option.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 caption text-ground-400", children: option.description })
             ] }),
             /* @__PURE__ */ jsx(
               "div",
               {
                 className: cn(
                   "flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
-                  isSelected ? "border-brand-primary bg-brand-primary" : "border-taupe-300 bg-white"
+                  isSelected ? "border-brand-primary bg-brand-primary" : "border-ground-300 bg-white"
                 ),
                 children: isSelected && /* @__PURE__ */ jsx(Check, { size: 10, className: "text-white", strokeWidth: 3 })
               }
@@ -3204,7 +3215,7 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }) {
             {
               className: cn(
                 "caption font-semibold mt-2",
-                isSelected ? "text-taupe-900" : "text-taupe-400"
+                isSelected ? "text-ground-900" : "text-ground-400"
               ),
               children: option.meta
             }
@@ -3222,11 +3233,11 @@ var RadioGroupItem = React15.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "aspect-square size-4 rounded-full border border-taupe-300 text-taupe-900",
+      "aspect-square size-4 rounded-full border border-ground-300 text-ground-900",
       "shadow-none transition-colors",
-      "focus:outline-none focus-visible:ring-2 focus-visible:ring-taupe-900/20",
+      "focus:outline-none focus-visible:ring-2 focus-visible:ring-ground-900/20",
       "disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=checked]:bg-taupe-900 data-[state=checked]:border-taupe-900",
+      "data-[state=checked]:bg-ground-900 data-[state=checked]:border-ground-900",
       className
     ),
     ...props,
@@ -3261,7 +3272,7 @@ function ResizableHandle({ className, withHandle = true, ...props }) {
     Separator$1,
     {
       className: cn(
-        "relative flex shrink-0 items-center justify-center bg-taupe-100",
+        "relative flex shrink-0 items-center justify-center bg-ground-100",
         "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-primary/50",
         // Horizontal (default): vertical bar
         "[&:not([aria-orientation=vertical])]:h-full [&:not([aria-orientation=vertical])]:w-px",
@@ -3275,7 +3286,7 @@ function ResizableHandle({ className, withHandle = true, ...props }) {
         className
       ),
       ...props,
-      children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-5 w-3 items-center justify-center rounded-sm border border-taupe-100 bg-white shadow-natural", children: /* @__PURE__ */ jsx(GripVertical, { size: 10, className: "text-taupe-400" }) })
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-5 w-3 items-center justify-center rounded-sm border border-ground-100 bg-white shadow-natural", children: /* @__PURE__ */ jsx(GripVertical, { size: 10, className: "text-ground-400" }) })
     }
   );
 }
@@ -3299,7 +3310,7 @@ var ScrollAreaScrollbar = React15.forwardRef(({ className, orientation = "vertic
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-taupe-200 hover:bg-taupe-300 transition-colors" })
+    children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-ground-200 hover:bg-ground-300 transition-colors" })
   }
 ));
 ScrollAreaScrollbar.displayName = "ScrollAreaScrollbar";
@@ -3315,13 +3326,13 @@ function SectionHeading({
     {
       className: cn(
         "flex flex-col gap-1 pb-4 sm:flex-row sm:items-start sm:justify-between",
-        border && "border-b border-taupe-100",
+        border && "border-b border-ground-100",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("h2", { className: "heading text-taupe-900 truncate", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "mt-1 body text-taupe-400", children: description })
+          /* @__PURE__ */ jsx("h2", { className: "heading text-ground-900 truncate", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-1 body text-ground-400", children: description })
         ] }),
         actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2 pt-1", children: actions.map(
           (action, i) => action.href ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: action.variant ?? "default", asChild: true, children: /* @__PURE__ */ jsx("a", { href: action.href, children: action.label }) }, i) : /* @__PURE__ */ jsx(
@@ -3348,17 +3359,17 @@ var SelectTrigger = React15.forwardRef(({ className, children, ...props }, ref)
     ref,
     className: cn(
       "flex h-9 w-full items-center justify-between rounded-xl bg-white px-3 py-2",
-      "body text-taupe-900 shadow-natural",
-      "focus:outline-none focus:ring-2 focus:ring-taupe-900/15",
+      "body text-ground-900 shadow-natural",
+      "focus:outline-none focus:ring-2 focus:ring-ground-900/15",
       "disabled:opacity-50 disabled:cursor-not-allowed",
-      "data-[placeholder]:text-taupe-400",
+      "data-[placeholder]:text-ground-400",
       "[&>span]:line-clamp-1",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { size: 15, className: "text-taupe-400 shrink-0" }) })
+      /* @__PURE__ */ jsx(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { size: 15, className: "text-ground-400 shrink-0" }) })
     ]
   }
 ));
@@ -3380,7 +3391,7 @@ var SelectContent = React15.forwardRef(({ className, children, position = "poppe
     position,
     ...props,
     children: [
-      /* @__PURE__ */ jsx(Select.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronUp, { size: 14, className: "text-taupe-400" }) }),
+      /* @__PURE__ */ jsx(Select.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronUp, { size: 14, className: "text-ground-400" }) }),
       /* @__PURE__ */ jsx(
         Select.Viewport,
         {
@@ -3390,7 +3401,7 @@ var SelectContent = React15.forwardRef(({ className, children, position = "poppe
           children
         }
       ),
-      /* @__PURE__ */ jsx(Select.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: "text-taupe-400" }) })
+      /* @__PURE__ */ jsx(Select.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: "text-ground-400" }) })
     ]
   }
 ) }));
@@ -3401,14 +3412,14 @@ var SelectItem = React15.forwardRef(({ className, children, ...props }, ref) =>
     ref,
     className: cn(
       "relative flex w-full cursor-default select-none items-center rounded-md px-2.5 py-1.5",
-      "body text-taupe-700 outline-none",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-taupe-900" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-ground-900" }) }) }),
       /* @__PURE__ */ jsx(Select.ItemText, { children })
     ]
   }
@@ -3418,12 +3429,12 @@ var SelectLabel = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   Select.Label,
   {
     ref,
-    className: cn("px-2.5 py-1 label text-taupe-400", className),
+    className: cn("px-2.5 py-1 label text-ground-400", className),
     ...props
   }
 ));
 SelectLabel.displayName = "SelectLabel";
-var SelectSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select.Separator, { ref, className: cn("mx-1 my-1 h-px bg-taupe-100", className), ...props }));
+var SelectSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select.Separator, { ref, className: cn("mx-1 my-1 h-px bg-ground-100", className), ...props }));
 SelectSeparator.displayName = "SelectSeparator";
 var Separator2 = React15.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
   Separator.Root,
@@ -3432,7 +3443,7 @@ var Separator2 = React15.forwardRef(({ className, orientation = "horizontal", de
     decorative,
     orientation,
     className: cn(
-      "shrink-0 bg-taupe-100",
+      "shrink-0 bg-ground-100",
       orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
       className
     ),
@@ -3488,7 +3499,7 @@ var SheetContent = React15.forwardRef(
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-4 top-4 rounded-md p-1 text-taupe-400 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-taupe-900/20", children: [
+          /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-4 top-4 rounded-md p-1 text-ground-400 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ground-900/20", children: [
             /* @__PURE__ */ jsx(X, { size: 16 }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })
@@ -3510,12 +3521,12 @@ var SheetTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE
   Dialog.Title,
   {
     ref,
-    className: cn("body-lg font-semibold text-taupe-900", className),
+    className: cn("body-lg font-semibold text-ground-900", className),
     ...props
   }
 ));
 SheetTitle.displayName = "SheetTitle";
-var SheetDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Description, { ref, className: cn("body text-taupe-500", className), ...props }));
+var SheetDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Description, { ref, className: cn("body text-ground-500", className), ...props }));
 SheetDescription.displayName = "SheetDescription";
 function TooltipProvider({
   children,
@@ -3531,7 +3542,7 @@ var TooltipContent = React15.forwardRef(({ className, sideOffset = 4, ...props }
     ref,
     sideOffset,
     className: cn(
-      "z-50 rounded-lg bg-taupe-900 px-2.5 py-1.5 caption text-white",
+      "z-50 rounded-lg bg-ground-900 px-2.5 py-1.5 caption text-white",
       "animate-in fade-in-0 zoom-in-95",
       "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
       "data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1",
@@ -3614,7 +3625,7 @@ function Sidebar({
         "data-variant": variant,
         "data-collapsible": "none",
         className: cn(
-          "flex flex-col h-svh bg-white border-r border-taupe-100 w-[--sidebar-width]",
+          "flex flex-col h-svh bg-white border-r border-ground-100 w-[--sidebar-width]",
           side === "right" && "border-r-0 border-l",
           className
         ),
@@ -3632,7 +3643,7 @@ function Sidebar({
         "data-variant": variant,
         "data-collapsible": "offcanvas",
         className: cn(
-          "group peer flex flex-col h-svh bg-white border-r border-taupe-100",
+          "group peer flex flex-col h-svh bg-white border-r border-ground-100",
           "transition-[width,transform] duration-200 ease-linear",
           "data-[state=expanded]:w-[--sidebar-width] data-[state=collapsed]:w-0 data-[state=collapsed]:-translate-x-full",
           side === "right" && "border-r-0 border-l data-[state=collapsed]:translate-x-full",
@@ -3651,7 +3662,7 @@ function Sidebar({
       "data-variant": variant,
       "data-collapsible": "icon",
       className: cn(
-        "group peer hidden md:flex flex-col h-svh bg-white border-r border-taupe-100",
+        "group peer hidden md:flex flex-col h-svh bg-white border-r border-ground-100",
         "transition-[width] duration-200 ease-linear overflow-hidden",
         "data-[state=expanded]:w-[--sidebar-width] data-[state=collapsed]:w-[--sidebar-width-icon]",
         side === "right" && "border-r-0 border-l",
@@ -3722,7 +3733,7 @@ function SidebarHeader({ className, ...props }) {
     "div",
     {
       "data-sidebar": "header",
-      className: cn("flex flex-col gap-2 p-3 border-b border-taupe-100", className),
+      className: cn("flex flex-col gap-2 p-3 border-b border-ground-100", className),
       ...props
     }
   );
@@ -3742,7 +3753,7 @@ function SidebarFooter({ className, ...props }) {
     "div",
     {
       "data-sidebar": "footer",
-      className: cn("flex flex-col gap-2 p-3 border-t border-taupe-100", className),
+      className: cn("flex flex-col gap-2 p-3 border-t border-ground-100", className),
       ...props
     }
   );
@@ -3752,7 +3763,7 @@ function SidebarSeparator({ className, ...props }) {
     Separator2,
     {
       "data-sidebar": "separator",
-      className: cn("mx-2 my-1 bg-taupe-100", className),
+      className: cn("mx-2 my-1 bg-ground-100", className),
       ...props
     }
   );
@@ -3778,8 +3789,8 @@ function SidebarGroupLabel({
     {
       "data-sidebar": "group-label",
       className: cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 label text-taupe-400",
-        "outline-none ring-taupe-900 transition-[margin,opacity] duration-200 ease-linear",
+        "flex h-8 shrink-0 items-center rounded-md px-2 label text-ground-400",
+        "outline-none ring-ground-900 transition-[margin,opacity] duration-200 ease-linear",
         "group-data-[state=collapsed]/sidebar-wrapper:opacity-0",
         "group-data-[state=collapsed]/sidebar-wrapper:h-0",
         "group-data-[state=collapsed]/sidebar-wrapper:m-0",
@@ -3806,7 +3817,7 @@ function SidebarGroupAction({
       "data-sidebar": "group-action",
       className: cn(
         "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center",
-        "rounded-md text-taupe-400 hover:bg-taupe-100 hover:text-taupe-900",
+        "rounded-md text-ground-400 hover:bg-ground-100 hover:text-ground-900",
         "outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
         className
       ),
@@ -3846,11 +3857,11 @@ function SidebarMenuButton({
       className: cn(
         // Base
         "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 body text-left",
-        "outline-none ring-taupe-900",
+        "outline-none ring-ground-900",
         "transition-[width,height,padding] duration-150",
-        "hover:bg-taupe-100 hover:text-taupe-900",
+        "hover:bg-ground-100 hover:text-ground-900",
         "focus-visible:ring-2 focus-visible:ring-brand-primary/30",
-        "active:bg-taupe-100",
+        "active:bg-ground-100",
         "disabled:pointer-events-none disabled:opacity-50",
         "[&>svg]:size-4 [&>svg]:shrink-0",
         // Size variants
@@ -3902,7 +3913,7 @@ function SidebarMenuAction({
       "data-sidebar": "menu-action",
       className: cn(
         "absolute right-1 top-1/2 -translate-y-1/2 flex aspect-square w-5 items-center justify-center",
-        "rounded-md text-taupe-400 hover:bg-taupe-100 hover:text-taupe-900",
+        "rounded-md text-ground-400 hover:bg-ground-100 hover:text-ground-900",
         "outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
         showOnHover && [
           "opacity-0 transition-opacity",
@@ -3923,7 +3934,7 @@ function SidebarMenuBadge({ className, ...props }) {
       "data-sidebar": "menu-badge",
       className: cn(
         "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-full",
-        "caption font-medium bg-taupe-100 text-taupe-700 px-1",
+        "caption font-medium bg-ground-100 text-ground-700 px-1",
         "group-data-[state=collapsed]/sidebar-wrapper:hidden",
         className
       ),
@@ -3946,11 +3957,11 @@ function SidebarMenuSkeleton({
       className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ jsx("div", { className: "size-4 shrink-0 rounded-md bg-taupe-200 animate-pulse" }),
+        showIcon && /* @__PURE__ */ jsx("div", { className: "size-4 shrink-0 rounded-md bg-ground-200 animate-pulse" }),
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "h-4 max-w-[--skeleton-width] flex-1 rounded-md bg-taupe-200 animate-pulse",
+            className: "h-4 max-w-[--skeleton-width] flex-1 rounded-md bg-ground-200 animate-pulse",
             style: { "--skeleton-width": width }
           }
         )
@@ -3964,7 +3975,7 @@ function SidebarMenuSub({ className, ...props }) {
     {
       "data-sidebar": "menu-sub",
       className: cn(
-        "mx-3.5 flex min-w-0 flex-col gap-1 border-l border-taupe-100 pl-3",
+        "mx-3.5 flex min-w-0 flex-col gap-1 border-l border-ground-100 pl-3",
         "group-data-[state=collapsed]/sidebar-wrapper:hidden",
         className
       ),
@@ -3996,9 +4007,9 @@ function SidebarMenuSubButton({
       "data-active": isActive,
       className: cn(
         "flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2",
-        "body text-taupe-500 outline-none",
+        "body text-ground-500 outline-none",
         "transition-colors duration-150",
-        "hover:text-taupe-900 hover:bg-taupe-100",
+        "hover:text-ground-900 hover:bg-ground-100",
         "focus-visible:ring-2 focus-visible:ring-brand-primary/30",
         "disabled:pointer-events-none disabled:opacity-50",
         "[&>svg]:size-3.5 [&>svg]:shrink-0",
@@ -4014,7 +4025,7 @@ function Skeleton({ className, ...props }) {
     "div",
     {
       "data-slot": "skeleton",
-      className: cn("animate-pulse rounded-md bg-taupe-100", className),
+      className: cn("animate-pulse rounded-md bg-ground-100", className),
       ...props
     }
   );
@@ -4026,7 +4037,7 @@ var SliderRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE
     className: cn("relative flex w-full touch-none select-none items-center", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx(Slider.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-taupe-100", children: /* @__PURE__ */ jsx(Slider.Range, { className: "absolute h-full bg-brand-primary" }) }),
+      /* @__PURE__ */ jsx(Slider.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-ground-100", children: /* @__PURE__ */ jsx(Slider.Range, { className: "absolute h-full bg-brand-primary" }) }),
       /* @__PURE__ */ jsx(Slider.Thumb, { className: "block size-4 rounded-full border-2 border-brand-primary bg-white shadow-natural transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30 disabled:pointer-events-none disabled:opacity-50" })
     ]
   }
@@ -4040,14 +4051,14 @@ function Toaster({ ...props }) {
       className: "toaster group",
       toastOptions: {
         classNames: {
-          toast: "group toast font-sans text-sm group-[.toaster]:bg-white group-[.toaster]:text-taupe-900 group-[.toaster]:border group-[.toaster]:border-taupe-100 group-[.toaster]:shadow-elevated group-[.toaster]:rounded-xl",
-          description: "group-[.toast]:text-taupe-500 group-[.toast]:text-xs",
+          toast: "group toast font-sans text-sm group-[.toaster]:bg-white group-[.toaster]:text-ground-900 group-[.toaster]:border group-[.toaster]:border-ground-100 group-[.toaster]:shadow-elevated group-[.toaster]:rounded-xl",
+          description: "group-[.toast]:text-ground-500 group-[.toast]:text-xs",
           actionButton: "group-[.toast]:bg-brand-primary group-[.toast]:text-white group-[.toast]:rounded-md group-[.toast]:text-xs group-[.toast]:font-medium",
-          cancelButton: "group-[.toast]:bg-taupe-100 group-[.toast]:text-taupe-600 group-[.toast]:rounded-md group-[.toast]:text-xs group-[.toast]:font-medium",
-          success: "group-[.toaster]:border-brand-secondary/40 group-[.toaster]:text-taupe-900",
+          cancelButton: "group-[.toast]:bg-ground-100 group-[.toast]:text-ground-600 group-[.toast]:rounded-md group-[.toast]:text-xs group-[.toast]:font-medium",
+          success: "group-[.toaster]:border-brand-secondary/40 group-[.toaster]:text-ground-900",
           error: "group-[.toaster]:bg-red-50 group-[.toaster]:text-red-700 group-[.toaster]:border-red-200",
           warning: "group-[.toaster]:bg-yellow-50 group-[.toaster]:text-yellow-800 group-[.toaster]:border-yellow-200",
-          info: "group-[.toaster]:border-taupe-200"
+          info: "group-[.toaster]:border-ground-200"
         }
       },
       ...props
@@ -4089,8 +4100,8 @@ function StackedList({ children, divided = true, bordered = true, className }) {
       role: "list",
       className: cn(
         "overflow-hidden rounded-xl bg-white",
-        bordered && "border border-taupe-100 shadow-natural",
-        divided && "divide-y divide-taupe-100",
+        bordered && "border border-ground-100 shadow-natural",
+        divided && "divide-y divide-ground-100",
         className
       ),
       children
@@ -4100,14 +4111,14 @@ function StackedList({ children, divided = true, bordered = true, className }) {
 function StackedListItem({ children, href, onClick, className }) {
   const inner = /* @__PURE__ */ jsx("div", { className: cn("px-4 py-3.5", className), children });
   if (href) {
-    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href, className: "block hover:bg-taupe-50 transition-colors", children: inner }) });
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href, className: "block hover:bg-ground-50 transition-colors", children: inner }) });
   }
   if (onClick) {
     return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        className: "w-full text-left hover:bg-taupe-50 transition-colors",
+        className: "w-full text-left hover:bg-ground-50 transition-colors",
         onClick,
         children: inner
       }
@@ -4117,21 +4128,21 @@ function StackedListItem({ children, href, onClick, className }) {
 }
 function StatCard({ label, value, trend, icon, className }) {
   const trendColor = {
-    up: "text-taupe-800 bg-brand-secondary/30 rounded-full px-2 py-0.5 w-fit",
+    up: "text-ground-800 bg-brand-secondary/30 rounded-full px-2 py-0.5 w-fit",
     down: "text-red-600",
-    neutral: "text-taupe-400"
+    neutral: "text-ground-400"
   };
   const TrendIcon = {
     up: TrendingUp,
     down: TrendingDown,
     neutral: Minus
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border border-taupe-100 bg-white p-5", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border border-ground-100 bg-white p-5", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsx("p", { className: "label text-taupe-400", children: label }),
-      icon && /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-taupe-50 text-taupe-400", children: icon })
+      /* @__PURE__ */ jsx("p", { className: "label text-ground-400", children: label }),
+      icon && /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-ground-50 text-ground-400", children: icon })
     ] }),
-    /* @__PURE__ */ jsx("p", { className: "heading-xl mt-2 text-taupe-900", children: value }),
+    /* @__PURE__ */ jsx("p", { className: "heading-xl mt-2 text-ground-900", children: value }),
     trend && (() => {
       const Icon = TrendIcon[trend.direction];
       return /* @__PURE__ */ jsxs("div", { className: cn("mt-2 flex items-center gap-1", trendColor[trend.direction]), children: [
@@ -4150,7 +4161,7 @@ function CirclesSteps({ steps, className }) {
         {
           className: cn(
             "h-full",
-            step.status === "complete" ? "bg-brand-primary" : "bg-taupe-200"
+            step.status === "complete" ? "bg-brand-primary" : "bg-ground-200"
           )
         }
       ) }),
@@ -4168,9 +4179,9 @@ function CirclesSteps({ steps, className }) {
                   "relative z-10 flex size-8 items-center justify-center rounded-full transition-colors",
                   step.status === "complete" && "bg-brand-primary group-hover:bg-brand-primary/80",
                   step.status === "current" && "border-2 border-brand-primary bg-white",
-                  step.status === "upcoming" && "border-2 border-taupe-300 bg-white group-hover:border-taupe-400"
+                  step.status === "upcoming" && "border-2 border-ground-300 bg-white group-hover:border-ground-400"
                 ),
-                children: step.status === "complete" ? /* @__PURE__ */ jsx(Check, { size: 14, className: "text-white", strokeWidth: 2.5 }) : step.status === "current" ? /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-brand-primary" }) : /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-transparent group-hover:bg-taupe-300" })
+                children: step.status === "complete" ? /* @__PURE__ */ jsx(Check, { size: 14, className: "text-white", strokeWidth: 2.5 }) : step.status === "current" ? /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-brand-primary" }) : /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-transparent group-hover:bg-ground-300" })
               }
             ),
             /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-center", children: [
@@ -4179,12 +4190,12 @@ function CirclesSteps({ steps, className }) {
                 {
                   className: cn(
                     "caption font-semibold",
-                    step.status === "upcoming" ? "text-taupe-400" : "text-taupe-900"
+                    step.status === "upcoming" ? "text-ground-400" : "text-ground-900"
                   ),
                   children: step.name
                 }
               ),
-              step.description && /* @__PURE__ */ jsx("span", { className: "caption text-taupe-400", children: step.description })
+              step.description && /* @__PURE__ */ jsx("span", { className: "caption text-ground-400", children: step.description })
             ] })
           ]
         }
@@ -4195,7 +4206,7 @@ function CirclesSteps({ steps, className }) {
 function BulletsSteps({ steps, className }) {
   const currentIdx = steps.findIndex((s) => s.status === "current");
   return /* @__PURE__ */ jsxs("nav", { className: cn("flex items-center gap-4", className), "aria-label": "Progress", children: [
-    /* @__PURE__ */ jsxs("p", { className: "body font-medium text-taupe-700", children: [
+    /* @__PURE__ */ jsxs("p", { className: "body font-medium text-ground-700", children: [
       "Step ",
       currentIdx + 1,
       " of ",
@@ -4227,7 +4238,7 @@ function BulletsSteps({ steps, className }) {
         ) : /* @__PURE__ */ jsx(
           "span",
           {
-            className: "block size-2.5 rounded-full bg-taupe-200 hover:bg-taupe-300 transition-colors",
+            className: "block size-2.5 rounded-full bg-ground-200 hover:bg-ground-300 transition-colors",
             title: step.name
           }
         )
@@ -4240,7 +4251,7 @@ function ProgressSteps({ steps, className }) {
   const currentIdx = steps.findIndex((s) => s.status === "current");
   const progress = (completeCount + (currentIdx >= 0 ? 0.5 : 0)) / steps.length * 100;
   return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-taupe-100", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-ground-100", children: /* @__PURE__ */ jsx(
       "div",
       {
         className: "h-full rounded-full bg-brand-primary transition-all duration-500",
@@ -4255,7 +4266,7 @@ function ProgressSteps({ steps, className }) {
           className: cn(
             "caption font-medium",
             i === 0 ? "text-left" : isLast ? "text-right" : "text-center",
-            step.status === "upcoming" ? "text-taupe-400" : "text-taupe-900"
+            step.status === "upcoming" ? "text-ground-400" : "text-ground-900"
           ),
           children: step.name
         },
@@ -4265,9 +4276,10 @@ function ProgressSteps({ steps, className }) {
   ] });
 }
 function Steps({ steps, variant = "circles", className }) {
-  if (variant === "bullets") return /* @__PURE__ */ jsx(BulletsSteps, { steps, className });
-  if (variant === "progress") return /* @__PURE__ */ jsx(ProgressSteps, { steps, className });
-  return /* @__PURE__ */ jsx(CirclesSteps, { steps, className });
+  const classNameProp = className !== void 0 ? { className } : {};
+  if (variant === "bullets") return /* @__PURE__ */ jsx(BulletsSteps, { steps, ...classNameProp });
+  if (variant === "progress") return /* @__PURE__ */ jsx(ProgressSteps, { steps, ...classNameProp });
+  return /* @__PURE__ */ jsx(CirclesSteps, { steps, ...classNameProp });
 }
 var SwitchRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Switch.Root,
@@ -4278,7 +4290,7 @@ var SwitchRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE
       "border-2 border-transparent transition-colors",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
       "disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=unchecked]:bg-taupe-200 data-[state=checked]:bg-brand-primary",
+      "data-[state=unchecked]:bg-ground-200 data-[state=checked]:bg-brand-primary",
       className
     ),
     ...props,
@@ -4300,7 +4312,7 @@ var TabsList = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   Tabs.List,
   {
     ref,
-    className: cn("inline-flex items-center gap-1 border-b border-taupe-100 w-full", className),
+    className: cn("inline-flex items-center gap-1 border-b border-ground-100 w-full", className),
     ...props
   }
 ));
@@ -4310,7 +4322,7 @@ var TabsTrigger = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "px-0 pb-2.5 body font-medium text-taupe-400",
+      "px-0 pb-2.5 body font-medium text-ground-400",
       "border-b-2 border-transparent -mb-px",
       "transition-colors cursor-pointer",
       "data-[state=active]:text-brand-primary data-[state=active]:border-brand-primary",
@@ -4330,11 +4342,11 @@ function Textarea({ className, ...props }) {
     {
       "data-slot": "textarea",
       className: cn(
-        "flex min-h-[80px] w-full rounded-md border border-taupe-200 bg-white px-3 py-2",
-        "body text-taupe-900 placeholder:text-taupe-400",
+        "flex min-h-[80px] w-full rounded-md border border-ground-200 bg-white px-3 py-2",
+        "body text-ground-900 placeholder:text-ground-400",
         "resize-none transition-colors duration-150",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-900/15 focus-visible:border-taupe-400",
-        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-taupe-50",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-900/15 focus-visible:border-ground-400",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-ground-50",
         className
       ),
       ...props
@@ -4354,18 +4366,18 @@ var toggleVariants = cva(
     variants: {
       variant: {
         default: [
-          "bg-transparent text-taupe-600",
-          "hover:bg-taupe-100 hover:text-taupe-900",
-          "data-[state=on]:bg-taupe-100 data-[state=on]:text-taupe-900"
+          "bg-transparent text-ground-600",
+          "hover:bg-ground-100 hover:text-ground-900",
+          "data-[state=on]:bg-ground-100 data-[state=on]:text-ground-900"
         ],
         outline: [
-          "border border-taupe-200 bg-white text-taupe-600 shadow-natural",
-          "hover:bg-taupe-50 hover:text-taupe-900",
-          "data-[state=on]:bg-taupe-100 data-[state=on]:text-taupe-900 data-[state=on]:border-taupe-300"
+          "border border-ground-200 bg-white text-ground-600 shadow-natural",
+          "hover:bg-ground-50 hover:text-ground-900",
+          "data-[state=on]:bg-ground-100 data-[state=on]:text-ground-900 data-[state=on]:border-ground-300"
         ],
         brand: [
-          "bg-transparent text-taupe-600",
-          "hover:bg-taupe-100 hover:text-taupe-900",
+          "bg-transparent text-ground-600",
+          "hover:bg-ground-100 hover:text-ground-900",
           "data-[state=on]:bg-brand-primary data-[state=on]:text-white"
         ]
       },