@geomak/ui 1.7.5 → 1.9.0

package/dist/index.js

@@ -197,10 +197,10 @@ function IconButton({
 }) {
   const colorScheme = useMemo(() => {
     if (type === "primary") {
-      return "hover:bg-true-blue bg-usafa-blue dark:bg-independence dark:hover:bg-black-coral";
+      return "bg-accent text-accent-fg hover:bg-accent-hover";
     }
     if (type === "bordered") {
-      return "bg-ice hover:bg-ice-dark border border-prussian-blue disabled:border-disabled";
+      return "bg-surface text-foreground hover:bg-surface-raised border border-border-strong";
     }
     return "";
   }, [type]);
@@ -210,35 +210,37 @@ function IconButton({
       type: buttonType,
       disabled: disabled || loading,
       onClick,
-      className: `${size === "sm" ? "p-1" : "p-2"} rounded-lg shadow-lg transition-all duration-150 ${colorScheme} dark:disabled:bg-manatee disabled:bg-disabled disabled:cursor-not-allowed`,
+      className: `${size === "sm" ? "p-1" : "p-2"} rounded-lg shadow-md transition-colors duration-150 ${colorScheme} disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
       children: loading ? loadingIcon : icon
     }
   );
 }
 var VARIANT_CLASSES = {
   primary: [
-    "bg-accent text-white",
+    "bg-accent text-accent-fg",
     "hover:bg-accent-hover",
     "active:bg-accent",
-    "disabled:bg-roman-silver disabled:text-white/70 disabled:cursor-not-allowed",
+    "disabled:bg-foreground-muted disabled:text-accent-fg/70 disabled:cursor-not-allowed",
     "focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
   ].join(" "),
   secondary: [
     "bg-transparent border border-accent text-accent",
-    "hover:bg-accent hover:text-white",
-    "active:bg-accent-hover active:text-white",
-    "disabled:border-roman-silver disabled:text-roman-silver disabled:cursor-not-allowed",
+    "hover:bg-accent hover:text-accent-fg",
+    "active:bg-accent-hover active:text-accent-fg",
+    "disabled:border-foreground-muted disabled:text-foreground-muted disabled:cursor-not-allowed",
     "focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
   ].join(" "),
   ghost: [
+    // Semantic tokens handle both light and dark modes — no `dark:`
+    // variants needed.
     "bg-transparent text-foreground-secondary",
-    "hover:bg-ice dark:hover:bg-oxford-blue-700 hover:text-foreground",
-    "active:bg-ice-dark dark:active:bg-independence",
-    "disabled:text-roman-silver disabled:cursor-not-allowed",
+    "hover:bg-surface-raised hover:text-foreground",
+    "active:bg-surface",
+    "disabled:text-foreground-muted disabled:cursor-not-allowed",
     "focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
   ].join(" "),
   danger: [
-    "bg-status-error text-white",
+    "bg-status-error text-accent-fg",
     "hover:opacity-90",
     "active:opacity-100",
     "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -743,12 +745,14 @@ function ToggleButton({ items, onChange, activeKey }) {
           value: item.key,
           "aria-label": typeof item.label === "string" ? item.label : item.key,
           className: [
-            index === 0 && "rounded-l-lg border-r border-ice-dark",
-            index === items.length - 1 && "rounded-r-lg border-l border-ice-dark dark:border-manatee",
-            "p-2 cursor-pointer transition-all duration-300",
-            "focus:outline-none focus-visible:ring-2 focus-visible:ring-usafa-blue",
-            "bg-ice dark:bg-manatee hover:bg-ice-dark dark:hover:bg-black-coral",
-            "data-[state=on]:bg-ice-dark dark:data-[state=on]:bg-indigo-dye"
+            // Semantic tokens handle both light and dark modes via
+            // CSS vars — no `dark:` variants needed.
+            index === 0 && "rounded-l-lg border-r border-border",
+            index === items.length - 1 && "rounded-r-lg border-l border-border",
+            "p-2 cursor-pointer transition-colors duration-150 text-foreground-secondary",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+            "bg-surface hover:bg-surface-raised",
+            "data-[state=on]:bg-accent data-[state=on]:text-accent-fg"
           ].filter(Boolean).join(" "),
           children: item.icon ?? item.label
         },
@@ -940,59 +944,103 @@ function useNotification() {
     danger: (props) => open({ type: "danger", ...props })
   };
 }
+var SIZE_MAP = {
+  sm: { outer: "w-8 h-8", inner: "w-4 h-4", dot: "w-1 h-1", stroke: "border-2", text: "text-xs" },
+  md: { outer: "w-20 h-20", inner: "w-12 h-12", dot: "w-2 h-2", stroke: "border-[3px]", text: "text-2xl" },
+  lg: { outer: "w-32 h-32", inner: "w-20 h-20", dot: "w-3 h-3", stroke: "border-4", text: "text-4xl" }
+};
 var containerVariants = {
   hidden: {},
-  visible: { transition: { staggerChildren: 0.06 } }
+  visible: { transition: { staggerChildren: 0.05 } }
 };
 var letterVariants = {
-  hidden: { opacity: 0, y: 6 },
-  visible: { opacity: 1, y: 0, transition: { duration: 0.25, ease: "easeOut" } }
+  hidden: { opacity: 0, y: 4 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.22, ease: "easeOut" } }
 };
+function SpinnerCore({ size, color }) {
+  const dims = SIZE_MAP[size];
+  const ringColor = color ?? "var(--color-accent)";
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", style: { color: ringColor }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${dims.outer} ${dims.stroke} rounded-full border-transparent border-t-current border-r-current animate-spin`,
+        style: { animationDuration: "1.4s" },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute ${dims.inner} ${dims.stroke} rounded-full border-transparent border-b-current border-l-current animate-spin opacity-60`,
+        style: { animationDuration: "0.9s", animationDirection: "reverse" },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute ${dims.dot} rounded-full bg-current animate-breathe`,
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}
 function LoadingSpinner({
   prompt,
+  size = "md",
+  inline = false,
   spinnerColor,
   textColor,
-  backdropOpacity = 0.92
+  backdropOpacity = 0.8
 }) {
   const reduced = useReducedMotion();
-  const letters = Array.from(prompt);
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
+  const letters = prompt ? Array.from(prompt) : [];
+  const dims = SIZE_MAP[size];
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerCore, { size, color: spinnerColor }),
+    letters.length > 0 && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: `${dims.text} font-semibold tracking-tight select-none`,
+        style: { color: textColor ?? "var(--color-foreground)" },
+        variants: containerVariants,
+        initial: reduced ? "visible" : "hidden",
+        animate: "visible",
+        "aria-hidden": "true",
+        children: letters.map((letter, index) => /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            className: "inline-block whitespace-pre",
+            variants: letterVariants,
+            children: letter
+          },
+          index
+        ))
+      }
+    )
+  ] });
+  if (inline) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": prompt ?? "Loading",
+        className: "flex flex-col items-center justify-center gap-3",
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
     "div",
     {
       role: "status",
       "aria-live": "polite",
-      "aria-label": prompt,
-      className: "fixed inset-0 z-[8000000] flex flex-col items-center justify-center gap-6 bg-background",
+      "aria-label": prompt ?? "Loading",
+      className: "fixed inset-0 z-[8000000] flex flex-col items-center justify-center gap-6 bg-background backdrop-blur-sm",
       style: { opacity: backdropOpacity },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "w-20 h-20 rounded-2xl border-[6px] border-transparent border-t-current border-r-current animate-spin",
-            style: { color: spinnerColor ?? "var(--color-accent)" },
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: "text-3xl font-bold tracking-tight select-none",
-            style: { color: textColor ?? "var(--color-foreground)" },
-            variants: containerVariants,
-            initial: reduced ? "visible" : "hidden",
-            animate: "visible",
-            children: letters.map((letter, index) => /* @__PURE__ */ jsx(
-              motion.span,
-              {
-                className: "inline-block whitespace-pre",
-                variants: letterVariants,
-                children: letter
-              },
-              index
-            ))
-          }
-        )
-      ]
+      children: content
     }
   ) });
 }
@@ -1018,12 +1066,18 @@ function FadingBase({
     }
   }, [isMounted]);
   if (!shouldRender) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `w-full calculated-height pl-2 pr-2 pb-2 transition-opacity duration-300 ${visible ? "opacity-100" : "opacity-0"}`,
-      children: /* @__PURE__ */ jsx("div", { className: `bg-ice dark:glassmorphism w-full h-full rounded-lg p-2 ${className}`, children })
-    }
+  return (
+    // `calculated-height` and `dark:glassmorphism` were orphaned CSS classes
+    // (never defined anywhere). Replaced with semantic `min-h-full` +
+    // `bg-surface` which works in both light and dark modes via the
+    // ThemeProvider's CSS vars.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `w-full min-h-full pl-2 pr-2 pb-2 transition-opacity duration-300 ${visible ? "opacity-100" : "opacity-0"}`,
+        children: /* @__PURE__ */ jsx("div", { className: `bg-surface w-full h-full rounded-lg p-2 ${className}`, children })
+      }
+    )
   );
 }
 function List2({ items, onItemClick, activeKey }) {
@@ -1037,7 +1091,7 @@ function List2({ items, onItemClick, activeKey }) {
         role: "option",
         "aria-selected": activeKey === item.key,
         tabIndex: 0,
-        className: `hover:bg-ice-dark dark:hover:bg-independence cursor-pointer p-3 border-b border-b-ice-dark dark:border-b-independence transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${activeKey === item.key ? "bg-ice-dark dark:bg-independence" : ""}`,
+        className: `hover:bg-surface-raised cursor-pointer p-3 border-b border-border transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${activeKey === item.key ? "bg-surface-raised text-foreground" : "text-foreground-secondary"}`,
         onClick: () => onItemClick(item),
         onKeyDown: (e) => {
           if (e.key === "Enter" || e.key === " ") {
@@ -1078,7 +1132,7 @@ function ScalableContainer({
         width: isScaled ? "100%" : width,
         height: isScaled ? "100%" : height
       },
-      className: "rounded-lg bg-ice-dark dark:bg-prussian-blue flex flex-col transition-all duration-300 origin-center",
+      className: "rounded-lg bg-surface-raised flex flex-col transition-all duration-300 origin-center",
       children: [
         /* @__PURE__ */ jsx("div", { className: "p-2 w-max", children: /* @__PURE__ */ jsx(Tooltip, { placement: "right", title: isScaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
           IconButton,
@@ -1086,10 +1140,10 @@ function ScalableContainer({
             onClick,
             icon: isScaled ? (
               /* Collapse (arrows-pointing-in) */
-              /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#fff", className: "w-5 h-5", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M3.22 3.22a.75.75 0 011.06 0l3.97 3.97V4.5a.75.75 0 011.5 0V9a.75.75 0 01-.75.75H4.5a.75.75 0 010-1.5h2.69L3.22 4.28a.75.75 0 010-1.06zm17.56 0a.75.75 0 010 1.06l-3.97 3.97h2.69a.75.75 0 010 1.5H15a.75.75 0 01-.75-.75V4.5a.75.75 0 011.5 0v2.69l3.97-3.97a.75.75 0 011.06 0zM3.75 15a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-2.69l-3.97 3.97a.75.75 0 01-1.06-1.06l3.97-3.97H4.5a.75.75 0 01-.75-.75zm10.5 0a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75 .75.75 0 01-.75.75h-2.69l3.97 3.97a.75.75 0 11-1.06 1.06l-3.97-3.97v2.69a.75.75 0 01-1.5 0V15z", clipRule: "evenodd" }) })
+              /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M3.22 3.22a.75.75 0 011.06 0l3.97 3.97V4.5a.75.75 0 011.5 0V9a.75.75 0 01-.75.75H4.5a.75.75 0 010-1.5h2.69L3.22 4.28a.75.75 0 010-1.06zm17.56 0a.75.75 0 010 1.06l-3.97 3.97h2.69a.75.75 0 010 1.5H15a.75.75 0 01-.75-.75V4.5a.75.75 0 011.5 0v2.69l3.97-3.97a.75.75 0 011.06 0zM3.75 15a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-2.69l-3.97 3.97a.75.75 0 01-1.06-1.06l3.97-3.97H4.5a.75.75 0 01-.75-.75zm10.5 0a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75 .75.75 0 01-.75.75h-2.69l3.97 3.97a.75.75 0 11-1.06 1.06l-3.97-3.97v2.69a.75.75 0 01-1.5 0V15z", clipRule: "evenodd" }) })
             ) : (
               /* Expand (arrows-pointing-out) */
-              /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#fff", className: "w-5 h-5", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M15 3a.75.75 0 01.75-.75h5.25A.75.75 0 0121 3v5.25a.75.75 0 01-1.5 0V4.81l-5.72 5.72a.75.75 0 11-1.06-1.06L18.19 3.75H15.75A.75.75 0 0115 3zM3 15a.75.75 0 01.75-.75h2.44l5.72-5.72a.75.75 0 111.06 1.06l-5.72 5.72v2.44a.75.75 0 01-1.5 0V15.75A.75.75 0 013 15zm0-11.25A.75.75 0 013.75 3h5.25a.75.75 0 010 1.5H4.81l5.72 5.72a.75.75 0 11-1.06 1.06L3.75 5.56V8.25a.75.75 0 01-1.5 0V3.75A.75.75 0 013 3zm18 12a.75.75 0 01-.75.75h-5.25a.75.75 0 010-1.5h2.44l-5.72-5.72a.75.75 0 111.06-1.06l5.72 5.72v-2.44a.75.75 0 011.5 0V15z", clipRule: "evenodd" }) })
+              /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M15 3a.75.75 0 01.75-.75h5.25A.75.75 0 0121 3v5.25a.75.75 0 01-1.5 0V4.81l-5.72 5.72a.75.75 0 11-1.06-1.06L18.19 3.75H15.75A.75.75 0 0115 3zM3 15a.75.75 0 01.75-.75h2.44l5.72-5.72a.75.75 0 111.06 1.06l-5.72 5.72v2.44a.75.75 0 01-1.5 0V15.75A.75.75 0 013 15zm0-11.25A.75.75 0 013.75 3h5.25a.75.75 0 010 1.5H4.81l5.72 5.72a.75.75 0 11-1.06 1.06L3.75 5.56V8.25a.75.75 0 01-1.5 0V3.75A.75.75 0 013 3zm18 12a.75.75 0 01-.75.75h-5.25a.75.75 0 010-1.5h2.44l-5.72-5.72a.75.75 0 111.06-1.06l5.72 5.72v-2.44a.75.75 0 011.5 0V15z", clipRule: "evenodd" }) })
             )
           }
         ) }) }),
@@ -1265,7 +1319,7 @@ function MenuBarItem({ icon, isActive, title, onClick }) {
       role: "button",
       "aria-label": title,
       "aria-current": isActive ? "page" : void 0,
-      className: `transition duration-300 hover:bg-prussian-blue ${isActive ? "bg-prussian-blue" : ""} rounded-lg p-2 cursor-pointer`,
+      className: `transition duration-300 hover:bg-accent hover:text-accent-fg ${isActive ? "bg-accent text-accent-fg" : "text-foreground-secondary"} rounded-lg p-2 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
       onClick,
       tabIndex: 0,
       onKeyDown: (e) => {
@@ -1279,22 +1333,26 @@ function MenuBarItem({ icon, isActive, title, onClick }) {
   ) });
 }
 function MenuBar({ items }) {
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      "aria-label": "Main navigation",
-      className: "w-16 calculated-height bg-independence rounded-tr-lg rounded-br-lg flex flex-col gap-2 items-center p-2 z-50",
-      children: items.map((item) => /* @__PURE__ */ jsx(
-        MenuBarItem,
-        {
-          icon: item.icon,
-          title: item.title,
-          isActive: item.isActive,
-          onClick: item.onClick
-        },
-        item.key
-      ))
-    }
+  return (
+    // `calculated-height` was an orphaned CSS class. Replaced with `h-full`
+    // so the MenuBar fills whatever vertical space its parent gives it.
+    /* @__PURE__ */ jsx(
+      "nav",
+      {
+        "aria-label": "Main navigation",
+        className: "w-16 h-full bg-surface-raised rounded-tr-lg rounded-br-lg flex flex-col gap-2 items-center p-2 z-50",
+        children: items.map((item) => /* @__PURE__ */ jsx(
+          MenuBarItem,
+          {
+            icon: item.icon,
+            title: item.title,
+            isActive: item.isActive,
+            onClick: item.onClick
+          },
+          item.key
+        ))
+      }
+    )
   );
 }
 function ContextMenu({ items, position, visible, onClose }) {
@@ -1499,8 +1557,8 @@ var SearchInput = React9.forwardRef(function SearchInput2({
       className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
       style: style ?? {},
       children: [
-        label && /* @__PURE__ */ jsx("label", { className: "text-lg font-bold ml-1 max-content text-prussian-blue dark:text-white", htmlFor, children: label }),
-        /* @__PURE__ */ jsxs("div", { className: "bg-white flex items-center gap-1 rounded-lg focus:outline-oxford-blue-700-opaque pr-2", children: [
+        label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium ml-1 max-content text-foreground", htmlFor, children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-surface text-foreground flex items-center gap-1 rounded-lg border border-border pr-2 focus-within:ring-2 focus-within:ring-accent transition-colors", children: [
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -1512,12 +1570,12 @@ var SearchInput = React9.forwardRef(function SearchInput2({
               enterKeyHint: "search",
               name,
               id: htmlFor,
-              className: "focus:outline-none pl-2 h-9 w-56 outline-offset-2 text-prussian-blue mt-1 rounded-lg disabled:bg-disabled disabled:cursor-not-allowed",
+              className: "bg-transparent focus:outline-none pl-2 h-9 w-56 rounded-lg disabled:cursor-not-allowed",
               style: inputStyle ?? {},
               placeholder: placeholder ?? ""
             }
           ),
-          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: colors_default.PALETTE["prussian-blue"], className: "w-6 h-6", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) })
+          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 text-foreground-muted", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) })
         ] })
       ]
     }
@@ -1528,7 +1586,7 @@ function DropdownPill({ value, hasSiblings = false }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `bg-prussian-blue text-white text-sm text-ellipsis ${hasSiblings ? "w-24" : "w-max"} p-1 rounded-lg whitespace-nowrap overflow-hidden`,
+      className: `bg-accent text-accent-fg text-sm text-ellipsis ${hasSiblings ? "w-24" : "w-max"} p-1 px-2 rounded-lg whitespace-nowrap overflow-hidden`,
       children: value
     }
   );
@@ -1551,7 +1609,6 @@ function Dropdown({
 }) {
   const [open, setOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
-  const [hoveredItem, setHoveredItem] = useState(null);
   const [searchTerm, setSearchTerm] = useState("");
   const [innerItems, setInnerItems] = useState([]);
   const errorId = useId();
@@ -1594,7 +1651,7 @@ function Dropdown({
           label && /* @__PURE__ */ jsx(
             "label",
             {
-              className: "text-md font-bold ml-1 max-content select-none text-prussian-blue dark:text-white",
+              className: "text-sm font-medium ml-1 max-content select-none text-foreground",
               htmlFor,
               style: labelStyle,
               children: label
@@ -1611,7 +1668,7 @@ function Dropdown({
                 "aria-invalid": hasError || void 0,
                 "aria-describedby": hasError ? errorId : void 0,
                 style,
-                className: `flex items-center justify-between relative h-9 rounded-lg cursor-pointer select-none ${disabled ? "cursor-not-allowed bg-disabled" : "bg-white"}`,
+                className: `flex items-center justify-between relative h-9 rounded-lg border border-border cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${hasError ? "border-status-error" : ""}`,
                 tabIndex: disabled ? -1 : 0,
                 onKeyDown: (e) => {
                   if (disabled) return;
@@ -1624,8 +1681,8 @@ function Dropdown({
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: `h-7 pl-2 ${!style?.width ? "min-w-[240px]" : ""} focus:outline-none text-prussian-blue flex items-center gap-1 overflow-hidden`,
-                      children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-roman-silver text-sm", children: placeholder }) : Array.isArray(value) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      className: `h-7 pl-2 ${!style?.width ? "min-w-[240px]" : ""} flex items-center gap-1 overflow-hidden`,
+                      children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? /* @__PURE__ */ jsxs(Fragment, { children: [
                         value.slice(0, 1).map((val) => /* @__PURE__ */ jsx(
                           DropdownPill,
                           {
@@ -1638,7 +1695,7 @@ function Dropdown({
                       ] }) : /* @__PURE__ */ jsx(DropdownPill, { value: innerItems.find((it) => it.key === value)?.label })
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: `transition-transform duration-300 mr-2 ${open ? "rotate-180" : "rotate-0"}`, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+                  /* @__PURE__ */ jsx("div", { className: `transition-transform duration-200 mr-2 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
                 ]
               }
             ) }),
@@ -1648,7 +1705,7 @@ function Dropdown({
                 align: "start",
                 sideOffset: 4,
                 style: { width: style?.width || 240 },
-                className: "bg-ice rounded-lg shadow-md z-50 p-2 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",
+                className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-2 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",
                 onInteractOutside: () => setOpen(false),
                 children: [
                   hasSearch && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(
@@ -1675,7 +1732,7 @@ function Dropdown({
                         role: "option",
                         "aria-selected": isSelected(item.key),
                         tabIndex: 0,
-                        className: `flex items-center justify-between p-2 hover:bg-prussian-blue hover:text-white transition-all duration-150 text-sm text-prussian-blue rounded-lg cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${selectedItems.includes(item.key) ? "bg-ice-dark" : ""}`,
+                        className: `flex items-center justify-between p-2 hover:bg-accent hover:text-accent-fg transition-colors duration-150 text-sm rounded-lg cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${selectedItems.includes(item.key) ? "bg-surface-raised text-foreground" : "text-foreground"}`,
                         onClick: () => selectItem(item.key),
                         onKeyDown: (e) => {
                           if (e.key === "Enter" || e.key === " ") {
@@ -1683,18 +1740,19 @@ function Dropdown({
                             selectItem(item.key);
                           }
                         },
-                        onMouseEnter: () => setHoveredItem(item.key),
-                        onMouseLeave: () => setHoveredItem(null),
                         children: [
                           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
                             item.icon && /* @__PURE__ */ jsx("div", { children: item.icon }),
                             item.label
                           ] }),
-                          isSelected(item.key) && /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+                          isSelected(item.key) && // currentColor — checkmark follows
+                          // the item's text colour, which
+                          // flips automatically on hover.
+                          /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
                             "path",
                             {
                               d: "M4 10l4.5 4.5L16 6",
-                              stroke: hoveredItem === item.key ? "#fff" : colors_default.PALETTE["prussian-blue"],
+                              stroke: "currentColor",
                               strokeWidth: "2",
                               strokeLinecap: "round",
                               strokeLinejoin: "round"
@@ -1712,7 +1770,7 @@ function Dropdown({
         ]
       }
     ),
-    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
+    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
   ] });
 }
 var DEFAULT_PICKER = [
@@ -2555,7 +2613,7 @@ function TextInput({
             "label",
             {
               style: { color: labelColor || void 0 },
-              className: `text-md font-bold ml-1 max-content ${!labelColor && "text-prussian-blue dark:text-white"}`,
+              className: `text-sm font-medium ml-1 max-content ${!labelColor && "text-foreground"}`,
               htmlFor,
               children: label
             }
@@ -2573,7 +2631,7 @@ function TextInput({
               id: htmlFor,
               "aria-invalid": hasError || void 0,
               "aria-describedby": hasError ? errorId : void 0,
-              className: `${hasError ? "border border-error" : ""} focus:outline-oxford-blue-700-opaque p-2 h-9 w-60 outline-offset-2 text-prussian-blue mt-1 rounded-lg disabled:bg-disabled disabled:cursor-not-allowed transition-all`,
+              className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-60 mt-1 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors`,
               style: inputStyle ?? {},
               placeholder: placeholder ?? ""
             }
@@ -2581,7 +2639,7 @@ function TextInput({
         ]
       }
     ),
-    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
+    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
   ] });
 }
 function NumberInput({
@@ -2592,91 +2650,117 @@ function NumberInput({
   htmlFor,
   name,
   disabled,
-  layout,
+  layout = "horizontal",
   errorMessage,
   inputStyle,
   labelStyle,
   placeholder,
-  style = {},
+  style,
   min,
   max,
-  readOnly = false
+  readOnly = false,
+  precision
 }) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const inferredPrecision = precision ?? (Number.isInteger(step) ? 0 : String(step).split(".")[1]?.length ?? 0);
+  const round = (n) => {
+    if (inferredPrecision === 0) return n;
+    const factor = 10 ** inferredPrecision;
+    return Math.round(n * factor) / factor;
+  };
+  const numeric = typeof value === "number" ? value : 0;
   const onIncrement = () => {
-    let newValue = value ? parseFloat(value) + step : 0 + step;
-    if (max !== void 0 && newValue > max) return;
-    onChange?.({ target: { value: newValue, id: htmlFor, name } });
+    if (disabled || readOnly) return;
+    const next = round(numeric + step);
+    if (max !== void 0 && next > max) return;
+    onChange?.({ target: { value: next, id: htmlFor, name } });
   };
   const onDecrement = () => {
-    let newValue = value ? parseFloat(value) - step : 0 - step;
-    if (min !== void 0 && newValue < min) return;
-    onChange?.({ target: { value: newValue, id: htmlFor, name } });
+    if (disabled || readOnly) return;
+    const next = round(numeric - step);
+    if (min !== void 0 && next < min) return;
+    onChange?.({ target: { value: next, id: htmlFor, name } });
   };
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between pr-1 pl-1", children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
-        children: [
-          /* @__PURE__ */ jsx(
-            "label",
-            {
-              className: "text-md font-bold ml-1 w-60 select-none text-prussian-blue dark:text-white",
-              style: labelStyle,
-              htmlFor,
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style,
-              className: `${disabled ? "bg-disabled" : "bg-white"} rounded-lg flex items-center pr-1 pl-2 w-max`,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    min,
-                    max,
-                    autoComplete: "off",
-                    disabled,
-                    name,
-                    id: htmlFor,
-                    step,
-                    value,
-                    onChange,
-                    type: "number",
-                    className: "focus:outline-0 focus-visible:outline-0 h-9 w-60 text-prussian-blue disabled:bg-disabled disabled:cursor-not-allowed transition-all",
-                    style: inputStyle ?? {},
-                    placeholder: placeholder ?? "",
-                    readOnly
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      onClick: onIncrement,
-                      className: "rotate-180 cursor-pointer transition-all duration-300 hover:bg-ice rounded-sm",
-                      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-3 w-3", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      onClick: onDecrement,
-                      className: "cursor-pointer transition-all duration-300 hover:bg-ice rounded-sm",
-                      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-3 w-3", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
-                    }
-                  )
-                ] })
-              ]
-            }
-          )
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { className: "text-center text-error min-h-0", children: errorMessage })
+  const handleInputChange = (e) => {
+    const raw = e.target.value;
+    if (raw === "") {
+      onChange?.({ target: { value: void 0, id: htmlFor, name } });
+      return;
+    }
+    const parsed = Number(raw);
+    if (Number.isNaN(parsed)) return;
+    onChange?.({ target: { value: round(parsed), id: htmlFor, name } });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-center gap-2"}`, children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: "text-sm font-medium ml-1 max-content select-none text-foreground",
+          style: labelStyle,
+          htmlFor,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style,
+          className: `flex items-center rounded-lg border ${hasError ? "border-status-error" : "border-border"} ${disabled ? "bg-surface-raised text-foreground-muted cursor-not-allowed" : "bg-surface text-foreground"} focus-within:ring-2 focus-within:ring-accent transition-colors`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                min,
+                max,
+                autoComplete: "off",
+                disabled,
+                name,
+                id: htmlFor,
+                step,
+                value: value ?? "",
+                onChange: handleInputChange,
+                type: "number",
+                "aria-invalid": hasError || void 0,
+                "aria-describedby": hasError ? errorId : void 0,
+                className: "bg-transparent focus:outline-none h-9 w-full px-3 disabled:cursor-not-allowed [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+                style: inputStyle ?? {},
+                placeholder: placeholder ?? "",
+                readOnly
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-border h-9", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  onClick: onIncrement,
+                  disabled: disabled || readOnly || max !== void 0 && numeric >= max,
+                  "aria-label": "Increase value",
+                  className: "flex-1 px-1.5 flex items-center justify-center hover:bg-surface-raised disabled:opacity-30 disabled:cursor-not-allowed transition-colors focus:outline-none focus-visible:bg-surface-raised",
+                  children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, className: "h-3 w-3", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 15l7-7 7 7" }) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  onClick: onDecrement,
+                  disabled: disabled || readOnly || min !== void 0 && numeric <= min,
+                  "aria-label": "Decrease value",
+                  className: "flex-1 px-1.5 flex items-center justify-center hover:bg-surface-raised disabled:opacity-30 disabled:cursor-not-allowed transition-colors focus:outline-none focus-visible:bg-surface-raised border-t border-border",
+                  children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, className: "h-3 w-3", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }),
+    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-xs text-status-error ml-1", children: errorMessage })
   ] });
 }
 function Password({
@@ -2696,19 +2780,15 @@ function Password({
   iconColor
 }) {
   const [passwordVisible, setPasswordVisible] = useState(false);
-  const color = iconColor ?? colors_default.PALETTE["prussian-blue"];
   const errorId = useId();
   const hasError = errorMessage != null;
   return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center justify-center", style: style ?? {}, children: [
     /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`, children: [
-      label && // Render <label> only when a label is provided. An empty
-      // <label htmlFor=…> announces as an unlabeled control in
-      // some screen readers.
-      /* @__PURE__ */ jsx(
+      label && /* @__PURE__ */ jsx(
         "label",
         {
           style: { color: labelColor || void 0 },
-          className: `text-md font-bold ml-1 max-content ${!labelColor && "text-prussian-blue dark:text-white"}`,
+          className: `text-sm font-medium ml-1 max-content ${!labelColor && "text-foreground"}`,
           htmlFor,
           children: label
         }
@@ -2727,7 +2807,7 @@ function Password({
             id: htmlFor,
             "aria-invalid": hasError || void 0,
             "aria-describedby": hasError ? errorId : void 0,
-            className: `${hasError ? "border border-error" : ""} focus:outline-oxford-blue-700-opaque p-2 h-9 w-52 outline-offset-2 text-prussian-blue mt-1 rounded-lg disabled:bg-disabled disabled:cursor-not-allowed transition-all`,
+            className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-52 mt-1 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors`,
             style: inputStyle ?? {},
             placeholder: placeholder ?? ""
           }
@@ -2736,19 +2816,20 @@ function Password({
           "button",
           {
             type: "button",
-            className: "cursor-pointer p-1",
+            className: "cursor-pointer p-1 text-foreground-secondary hover:text-foreground rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+            style: iconColor ? { color: iconColor } : void 0,
             onClick: () => setPasswordVisible(!passwordVisible),
             "aria-label": passwordVisible ? "Hide password" : "Show password",
             children: passwordVisible ? (
               /* EyeSlash */
-              /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: color, className: "w-6 h-6", children: [
+              /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: [
                 /* @__PURE__ */ jsx("path", { d: "M3.53 2.47a.75.75 0 00-1.06 1.06l18 18a.75.75 0 101.06-1.06l-18-18zM22.676 12.553a11.249 11.249 0 01-2.631 4.31l-3.099-3.099a5.25 5.25 0 00-6.71-6.71L7.759 4.577a11.217 11.217 0 014.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113z" }),
                 /* @__PURE__ */ jsx("path", { d: "M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0115.75 12zM12.53 15.713l-4.243-4.244a3.75 3.75 0 004.243 4.243z" }),
                 /* @__PURE__ */ jsx("path", { d: "M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 00-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 016.75 12z" })
               ] })
             ) : (
               /* Eye */
-              /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: color, className: "w-6 h-6", children: [
+              /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: [
                 /* @__PURE__ */ jsx("path", { d: "M12 15a3 3 0 100-6 3 3 0 000 6z" }),
                 /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z", clipRule: "evenodd" })
               ] })
@@ -2757,7 +2838,7 @@ function Password({
         )
       ] })
     ] }),
-    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
+    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
   ] });
 }
 function Checkbox({
@@ -2846,22 +2927,25 @@ function Switch({
   uncheckedIcon
 }) {
   const id = useId();
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("label", { htmlFor: id, className: "flex items-center cursor-pointer mr-12 select-none", children: /* @__PURE__ */ jsx(
-    SwitchPrimitive.Root,
-    {
-      id,
-      checked,
-      onCheckedChange: (c) => onChange?.({ target: { checked: c } }),
-      className: "relative inline-flex h-6 w-14 items-center rounded-full bg-prussian-blue dark:bg-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-usafa-blue",
-      children: /* @__PURE__ */ jsx(
-        SwitchPrimitive.Thumb,
-        {
-          className: "pointer-events-none inline-flex h-8 w-8 items-center justify-center rounded-full bg-independence dark:bg-prussian-blue shadow transition-transform duration-200 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[-4px]",
-          children: checkedIcon && uncheckedIcon ? checked ? checkedIcon : uncheckedIcon : null
-        }
-      )
-    }
-  ) }) });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    "// mr-12 was a hardcoded right margin that broke layouts; spacing // is the parent's responsibility now.",
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "flex items-center cursor-pointer select-none", children: /* @__PURE__ */ jsx(
+      SwitchPrimitive.Root,
+      {
+        id,
+        checked,
+        onCheckedChange: (c) => onChange?.({ target: { checked: c } }),
+        className: "relative inline-flex h-6 w-14 items-center rounded-full bg-foreground-secondary data-[state=checked]:bg-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
+        children: /* @__PURE__ */ jsx(
+          SwitchPrimitive.Thumb,
+          {
+            className: "pointer-events-none inline-flex h-8 w-8 items-center justify-center rounded-full bg-background text-foreground shadow transition-transform duration-200 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[-4px]",
+            children: checkedIcon && uncheckedIcon ? checked ? checkedIcon : uncheckedIcon : null
+          }
+        )
+      }
+    ) })
+  ] });
 }
 function AutoComplete({
   disabled,
@@ -2891,9 +2975,9 @@ function AutoComplete({
       className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
       style: style ?? {},
       children: [
-        label && /* @__PURE__ */ jsx("label", { className: "text-lg font-bold ml-1 max-content text-prussian-blue dark:text-white", children: label }),
+        label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium ml-1 max-content text-foreground", children: label }),
         /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
-          /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "bg-white flex items-center gap-1 rounded-lg pr-2", children: [
+          /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "bg-surface text-foreground flex items-center gap-1 rounded-lg border border-border pr-2 focus-within:ring-2 focus-within:ring-accent transition-colors", children: [
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -2906,7 +2990,7 @@ function AutoComplete({
                 onFocus: () => setOpen(true),
                 type: "text",
                 name,
-                className: "focus:outline-none pl-2 h-9 w-56 outline-offset-2 text-prussian-blue mt-1 rounded-lg disabled:bg-disabled disabled:cursor-not-allowed",
+                className: "bg-transparent focus:outline-none pl-2 h-9 w-56 rounded-lg disabled:cursor-not-allowed",
                 style: inputStyle ?? {},
                 placeholder: placeholder ?? "",
                 autoComplete: "off",
@@ -2915,7 +2999,7 @@ function AutoComplete({
                 "aria-autocomplete": "list"
               }
             ),
-            /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: colors_default.PALETTE["prussian-blue"], className: "w-5 h-5 flex-shrink-0", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) })
+            /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 flex-shrink-0 text-foreground-muted", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) })
           ] }) }),
           /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
             Popover.Content,
@@ -2923,8 +3007,8 @@ function AutoComplete({
               align: "start",
               sideOffset: 4,
               onOpenAutoFocus: (e) => e.preventDefault(),
-              className: "w-64 bg-ice dark:bg-midnight-green-eagle-900 rounded-lg mt-1 shadow-md z-50 overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
-              children: foundItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-prussian-blue dark:text-white", children: emptyText }) : /* @__PURE__ */ jsx("div", { role: "listbox", children: foundItems.map((item) => (
+              className: "w-64 bg-surface border border-border rounded-lg mt-1 shadow-md z-50 overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
+              children: foundItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-foreground-secondary", children: emptyText }) : /* @__PURE__ */ jsx("div", { role: "listbox", children: foundItems.map((item) => (
                 // tabIndex + Enter/Space onKeyDown
                 // makes each option keyboard-activatable.
                 // Full roving-tabindex / arrow-key nav
@@ -2934,7 +3018,7 @@ function AutoComplete({
                   {
                     role: "option",
                     tabIndex: 0,
-                    className: "text-sm flex items-center gap-2 p-2 transition-all duration-150 hover:bg-ice-dark dark:hover:bg-prussian-blue cursor-pointer text-prussian-blue dark:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                    className: "text-sm flex items-center gap-2 p-2 transition-colors duration-150 hover:bg-surface-raised cursor-pointer text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
                     onClick: () => handleSelect(item),
                     onKeyDown: (e) => {
                       if (e.key === "Enter" || e.key === " ") {
@@ -3128,7 +3212,7 @@ function FileInput({
             openPicker();
           }
         },
-        className: "border-2 hover:border-prussian-blue border-ice-dark w-full h-full rounded-md transition-all duration-300 border-dashed dark:border-independence hover:dark:border-ice-dark cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+        className: "border-2 border-dashed border-border hover:border-accent w-full h-full rounded-md transition-colors duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent text-foreground-secondary hover:text-foreground",
         onDragOver: (e) => e.preventDefault(),
         onDrop,
         children: [
@@ -3146,28 +3230,28 @@ function FileInput({
             }
           ),
           files.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full items-center justify-center gap-2", children: [
-            /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: colors_default.PALETTE["prussian-blue"], className: "w-16 h-16 dark:fill-white", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M11.47 2.47a.75.75 0 011.06 0l4.5 4.5a.75.75 0 01-1.06 1.06l-3.22-3.22V16.5a.75.75 0 01-1.5 0V4.81L8.03 8.03a.75.75 0 01-1.06-1.06l4.5-4.5zM3 15.75a.75.75 0 01.75.75v2.25a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5V16.5a.75.75 0 011.5 0v2.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V16.5a.75.75 0 01.75-.75z", clipRule: "evenodd" }) }),
-            /* @__PURE__ */ jsx("div", { className: "text-prussian-blue dark:text-white text-sm", children: "Click or Drop a file" })
-          ] }) : /* @__PURE__ */ jsx("div", { className: "flex gap-3 items-center justify-center w-full h-full", children: files.map((file, id) => /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-16 h-16", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M11.47 2.47a.75.75 0 011.06 0l4.5 4.5a.75.75 0 01-1.06 1.06l-3.22-3.22V16.5a.75.75 0 01-1.5 0V4.81L8.03 8.03a.75.75 0 01-1.06-1.06l4.5-4.5zM3 15.75a.75.75 0 01.75.75v2.25a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5V16.5a.75.75 0 011.5 0v2.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V16.5a.75.75 0 01.75-.75z", clipRule: "evenodd" }) }),
+            /* @__PURE__ */ jsx("div", { className: "text-sm", children: "Click or Drop a file" })
+          ] }) : /* @__PURE__ */ jsx("div", { className: "flex gap-3 items-center justify-center w-full h-full p-3", children: files.map((file, id) => /* @__PURE__ */ jsxs(
             "div",
             {
-              className: "text-xs flex flex-col items-center w-20 h-24 text-center bg-ice-dark p-4 dark:bg-independence rounded-md relative",
+              className: "text-xs flex flex-col items-center w-20 h-24 text-center bg-surface-raised text-foreground p-4 rounded-md relative",
               children: [
                 /* @__PURE__ */ jsx(
                   "button",
                   {
                     type: "button",
                     onClick: removeFile,
-                    className: "bg-error rounded-full w-4 h-4 absolute right-[-5px] top-[-5px] cursor-pointer flex items-center justify-center",
+                    className: "bg-status-error rounded-full w-4 h-4 absolute right-[-5px] top-[-5px] cursor-pointer flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
                     "aria-label": "Remove file",
-                    children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                    children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
                   }
                 ),
-                /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: colors_default.PALETTE["prussian-blue"], className: "w-10 h-10 dark:fill-white", children: [
+                /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-10 h-10", "aria-hidden": "true", children: [
                   /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0016.5 9h-1.875a1.875 1.875 0 01-1.875-1.875V5.25A3.75 3.75 0 009 1.5H5.625z", clipRule: "evenodd" }),
                   /* @__PURE__ */ jsx("path", { d: "M12.971 1.816A5.23 5.23 0 0114.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 013.434 1.279 9.768 9.768 0 00-6.963-6.963z" })
                 ] }),
-                /* @__PURE__ */ jsx("span", { className: "text-ellipsis whitespace-nowrap overflow-hidden w-full text-prussian-blue dark:text-white", children: file.name })
+                /* @__PURE__ */ jsx("span", { className: "text-ellipsis whitespace-nowrap overflow-hidden w-full", children: file.name })
               ]
             },
             `${id}${file.name}`