@fabio.caffarello/react-design-system 1.10.5 → 1.11.1

package/dist/primitives/index.js

@@ -1,53 +1,53 @@
-var Fe = Object.defineProperty, Ae = Object.defineProperties;
-var Se = Object.getOwnPropertyDescriptors;
-var fe = Object.getOwnPropertySymbols;
-var ve = Object.prototype.hasOwnProperty, he = Object.prototype.propertyIsEnumerable;
-var ye = (b, r, s) => r in b ? Fe(b, r, { enumerable: !0, configurable: !0, writable: !0, value: s }) : b[r] = s, k = (b, r) => {
-  for (var s in r || (r = {}))
-    ve.call(r, s) && ye(b, s, r[s]);
-  if (fe)
-    for (var s of fe(r))
-      he.call(r, s) && ye(b, s, r[s]);
-  return b;
-}, $ = (b, r) => Ae(b, Se(r));
-var C = (b, r) => {
-  var s = {};
-  for (var t in b)
-    ve.call(b, t) && r.indexOf(t) < 0 && (s[t] = b[t]);
-  if (b != null && fe)
-    for (var t of fe(b))
-      r.indexOf(t) < 0 && he.call(b, t) && (s[t] = b[t]);
-  return s;
+var ke = Object.defineProperty, Se = Object.defineProperties;
+var Ee = Object.getOwnPropertyDescriptors;
+var ue = Object.getOwnPropertySymbols;
+var pe = Object.prototype.hasOwnProperty, xe = Object.prototype.propertyIsEnumerable;
+var ge = (m, s, t) => s in m ? ke(m, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : m[s] = t, N = (m, s) => {
+  for (var t in s || (s = {}))
+    pe.call(s, t) && ge(m, t, s[t]);
+  if (ue)
+    for (var t of ue(s))
+      xe.call(s, t) && ge(m, t, s[t]);
+  return m;
+}, R = (m, s) => Se(m, Ee(s));
+var C = (m, s) => {
+  var t = {};
+  for (var r in m)
+    pe.call(m, r) && s.indexOf(r) < 0 && (t[r] = m[r]);
+  if (m != null && ue)
+    for (var r of ue(m))
+      s.indexOf(r) < 0 && xe.call(m, r) && (t[r] = m[r]);
+  return t;
 };
-import { b as M, g as u, m as z, a as h, e as F, n as ge, h as be, f as ie, k as De, o as Te, p as $e, l as me } from "../tokens-DcAT-mPY.js";
-import { c as e, j as a, a as H, L as Ce, X as Ne, E as Re, b as Ue, C as Ve } from "../components-BTUibx0r.js";
-import { forwardRef as O, memo as _, useMemo as d, useState as G, useCallback as W, useRef as ae, useEffect as ne, isValidElement as ke, cloneElement as Ee, Children as Me } from "react";
-function ft(t) {
-  var o = t, {
-    variant: b = "info",
-    className: r
-  } = o, s = C(o, [
+import { getRadiusClass as z, getSpacingClass as u, getTypographyClasses as T, getTypographySize as E, getTypographyWeight as ie, getZIndexClass as $e, getBorderWidthClass as Le, getSwitchClasses as Fe, getAnimationClass as fe } from "../tokens/index.js";
+import { c as e, j as a, L as Ve, a as H, X as he, E as Re, b as Ce, C as Ae } from "../components-DEuqI-ld.js";
+import { forwardRef as O, memo as U, useMemo as d, useState as Y, useCallback as _, useRef as te, useEffect as ae, isValidElement as we, cloneElement as je, Children as Me } from "react";
+function cr(r) {
+  var o = r, {
+    variant: m = "info",
+    className: s
+  } = o, t = C(o, [
     "variant",
     "className"
   ]);
-  const l = {
+  const i = {
     warning: e("bg-warning-bg", "text-warning-dark", "border-warning"),
     error: e("bg-error-bg", "text-error-dark", "border-error"),
     info: e("bg-info-bg", "text-info-dark", "border-info")
   };
   return /* @__PURE__ */ a.jsx(
     "div",
-    k({
+    N({
       role: "alert",
       className: e(
         "border",
         u("base", "px"),
         u("sm", "py"),
-        M("lg"),
-        l[b],
-        r
+        z("lg"),
+        i[m],
+        s
       )
-    }, s)
+    }, t)
   );
 }
 const Ie = {
@@ -96,15 +96,15 @@ const Ie = {
 };
 function ze(x, p) {
   var g = x, {
-    variant: b = "paragraph",
-    bold: r,
-    italic: s,
-    className: t,
+    variant: m = "paragraph",
+    bold: s,
+    italic: t,
+    className: r,
     as: o,
-    color: l,
+    color: i,
     colorRole: n = "neutral",
     colorShade: c = "dark"
-  } = g, m = C(g, [
+  } = g, b = C(g, [
     "variant",
     "bold",
     "italic",
@@ -114,12 +114,12 @@ function ze(x, p) {
     "colorRole",
     "colorShade"
   ]);
-  const i = [];
+  const l = [];
   let f;
   if (o)
     f = o;
   else
-    switch (b) {
+    switch (m) {
       case "heading":
         f = "h2";
         break;
@@ -131,9 +131,9 @@ function ze(x, p) {
         f = "p";
         break;
     }
-  return b === "heading" ? i.push(z("h2")) : b === "body" || b === "paragraph" ? i.push(z("body")) : b === "bodySmall" ? i.push(z("bodySmall")) : b === "bodyLarge" ? i.push(z("bodyLarge")) : b === "caption" ? i.push(z("caption")) : b === "label" ? i.push(z("label")) : i.push(z("body")), r && i.push("font-bold"), s && i.push("italic"), i.push(Ie[n][c]), /* @__PURE__ */ a.jsx(f, k({ ref: p, className: e(...i, t) }, m));
+  return m === "heading" ? l.push(T("h2")) : m === "body" || m === "paragraph" ? l.push(T("body")) : m === "bodySmall" ? l.push(T("bodySmall")) : m === "bodyLarge" ? l.push(T("bodyLarge")) : m === "caption" ? l.push(T("caption")) : m === "label" ? l.push(T("label")) : l.push(T("body")), s && l.push("font-bold"), t && l.push("italic"), l.push(Ie[n][c]), /* @__PURE__ */ a.jsx(f, N({ ref: p, className: e(...l, r) }, b));
 }
-const bt = O(ze), Pe = H("motion-safe:animate-spin", {
+const dr = O(ze), De = H("motion-safe:animate-spin", {
   variants: {
     size: {
       sm: "h-4 w-4",
@@ -143,20 +143,20 @@ const bt = O(ze), Pe = H("motion-safe:animate-spin", {
     variant: {
       primary: "text-fg-brand",
       secondary: "text-fg-brand-secondary",
-      neutral: h("neutral", "DEFAULT", "text")
+      neutral: "text-fg-secondary"
     }
   },
   defaultVariants: {
     size: "md",
     variant: "primary"
   }
-}), Le = _(function(n) {
+}), Ne = U(function(n) {
   var c = n, {
-    size: r = "md",
-    variant: s = "primary",
-    label: t,
+    size: s = "md",
+    variant: t = "primary",
+    label: r,
     className: o = ""
-  } = c, l = C(c, [
+  } = c, i = C(c, [
     "size",
     "variant",
     "label",
@@ -164,46 +164,46 @@ const bt = O(ze), Pe = H("motion-safe:animate-spin", {
   ]);
   return /* @__PURE__ */ a.jsxs(
     "div",
-    $(k({
+    R(N({
       className: e("inline-flex", "items-center", o),
       role: "status",
-      "aria-label": t || "Loading",
+      "aria-label": r || "Loading",
       "aria-live": "polite"
-    }, l), {
+    }, i), {
       children: [
         /* @__PURE__ */ a.jsx(
-          Ce,
+          Ve,
           {
-            className: e(Pe({ size: r, variant: s })),
+            className: e(De({ size: s, variant: t })),
             "aria-hidden": "true"
           }
         ),
-        t && /* @__PURE__ */ a.jsx(
+        r && /* @__PURE__ */ a.jsx(
           "span",
           {
             className: e(
               u("sm", "ml"),
-              F("bodySmall"),
-              h("neutral", "DEFAULT", "text"),
+              E("bodySmall"),
+              "text-fg-secondary",
               "sr-only"
             ),
-            children: t
+            children: r
           }
         )
       ]
     })
   );
 });
-Le.displayName = "Spinner";
-const Be = H(
+Ne.displayName = "Spinner";
+const Te = H(
   // Base classes
   e(
     "inline-flex",
     "items-center",
     "justify-center",
-    z("button").split(" ")[2] || "font-medium",
+    T("button").split(" ")[2] || "font-medium",
     // Extract font-medium
-    M("md"),
+    z("md"),
     "transition-colors",
     "focus:outline-none",
     "focus:ring-2",
@@ -234,23 +234,23 @@ const Be = H(
         ),
         outline: e(
           "border-2",
-          h("neutral", "DEFAULT", "border"),
+          "border-line-default",
           "bg-transparent",
-          h("neutral", "dark", "text"),
-          be("neutral", "light", "bg"),
-          ge("neutral", "DEFAULT")
+          "text-fg-primary",
+          "hover:bg-surface-hover",
+          "focus:ring-line-focus"
         ),
         ghost: e(
           "bg-transparent",
-          h("neutral", "dark", "text"),
-          be("neutral", "light", "bg"),
-          ge("neutral", "DEFAULT")
+          "text-fg-primary",
+          "hover:bg-surface-hover",
+          "focus:ring-line-focus"
         ),
         iconOnly: e(
           "bg-transparent",
-          h("neutral", "dark", "text"),
-          be("neutral", "light", "bg"),
-          ge("neutral", "DEFAULT"),
+          "text-fg-primary",
+          "hover:bg-surface-hover",
+          "focus:ring-line-focus",
           "p-0"
         )
       },
@@ -258,19 +258,19 @@ const Be = H(
         sm: e(
           u("md", "px"),
           u("1.5", "py"),
-          F("bodySmall"),
+          E("bodySmall"),
           u("1.5", "gap")
         ),
         md: e(
           u("base", "px"),
           u("sm", "py"),
-          F("body"),
+          E("body"),
           u("sm", "gap")
         ),
         lg: e(
           u("lg", "px"),
           u("md", "py"),
-          F("bodyLarge"),
+          E("bodyLarge"),
           u("2.5", "gap")
         )
       }
@@ -299,35 +299,35 @@ const Be = H(
     }
   }
 );
-function we({
-  children: b,
-  position: r
+function ye({
+  children: m,
+  position: s
 }) {
-  return b ? /* @__PURE__ */ a.jsx(
+  return m ? /* @__PURE__ */ a.jsx(
     "span",
     {
-      className: `inline-flex items-center ${r === "left" ? "mr-0" : "ml-0"}`,
-      children: b
+      className: `inline-flex items-center ${s === "left" ? "mr-0" : "ml-0"}`,
+      children: m
     }
   ) : null;
 }
-const pe = _(
-  O(function(N, w) {
-    var L = N, {
-      variant: r = "primary",
-      size: s = "md",
-      isLoading: t = !1,
+const me = U(
+  O(function(j, h) {
+    var S = j, {
+      variant: s = "primary",
+      size: t = "md",
+      isLoading: r = !1,
       loadingText: o,
-      loadingIcon: l,
+      loadingIcon: i,
       leftIcon: n,
       rightIcon: c,
-      fullWidth: m = !1,
+      fullWidth: b = !1,
       as: p = "button",
       className: x = "",
       disabled: g = !1,
-      children: i,
+      children: l,
       "aria-label": f
-    } = L, y = C(L, [
+    } = S, y = C(S, [
       "variant",
       "size",
       "isLoading",
@@ -342,96 +342,96 @@ const pe = _(
       "children",
       "aria-label"
     ]);
-    const E = d(
+    const k = d(
       () => e(
-        Be({
-          variant: r,
-          size: s
+        Te({
+          variant: s,
+          size: t
         }),
-        m && "w-full",
+        b && "w-full",
         x
       ),
-      [r, s, m, x]
-    ), S = d(
-      () => r === "iconOnly" || !i && (n || c),
-      [r, i, n, c]
-    ), R = d(
-      () => S && !f && !i ? "Button" : f,
-      [S, f, i]
-    ), v = d(() => r === "error" ? "primary" : r === "primary" || r === "secondary" ? "neutral" : "primary", [r]), D = d(
-      () => s === "sm" ? "sm" : s === "lg" ? "lg" : "md",
-      [s]
-    ), X = d(
-      () => l || /* @__PURE__ */ a.jsx(Le, { size: D, variant: v }),
-      [l, D, v]
-    ), P = p === "button" && !y.type ? "button" : void 0, J = k(k({
-      className: E,
-      disabled: g || t,
-      "aria-busy": t,
-      "aria-label": R,
-      "aria-disabled": g || t
+      [s, t, b, x]
+    ), L = d(
+      () => s === "iconOnly" || !l && (n || c),
+      [s, l, n, c]
+    ), A = d(
+      () => L && !f && !l ? "Button" : f,
+      [L, f, l]
+    ), v = d(() => s === "error" ? "primary" : s === "primary" || s === "secondary" ? "neutral" : "primary", [s]), F = d(
+      () => t === "sm" ? "sm" : t === "lg" ? "lg" : "md",
+      [t]
+    ), W = d(
+      () => i || /* @__PURE__ */ a.jsx(Ne, { size: F, variant: v }),
+      [i, F, v]
+    ), P = p === "button" && !y.type ? "button" : void 0, Z = N(N({
+      className: k,
+      disabled: g || r,
+      "aria-busy": r,
+      "aria-label": A,
+      "aria-disabled": g || r
     }, P ? { type: P } : {}), y);
-    return /* @__PURE__ */ a.jsx(p, $(k({ ref: w }, J), { children: t ? /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-      X,
+    return /* @__PURE__ */ a.jsx(p, R(N({ ref: h }, Z), { children: r ? /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+      W,
       o && /* @__PURE__ */ a.jsx("span", { className: "ml-2", children: o }),
-      !o && i && /* @__PURE__ */ a.jsx("span", { className: "ml-2 opacity-0", children: i })
+      !o && l && /* @__PURE__ */ a.jsx("span", { className: "ml-2 opacity-0", children: l })
     ] }) : /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-      n && /* @__PURE__ */ a.jsx(we, { position: "left", children: n }),
-      i,
-      c && /* @__PURE__ */ a.jsx(we, { position: "right", children: c })
+      n && /* @__PURE__ */ a.jsx(ye, { position: "left", children: n }),
+      l,
+      c && /* @__PURE__ */ a.jsx(ye, { position: "right", children: c })
     ] }) }));
   })
 );
-pe.displayName = "Button";
-const Oe = _(function({
-  error: r,
-  success: s,
-  helperText: t,
+me.displayName = "Button";
+const Pe = U(function({
+  error: s,
+  success: t,
+  helperText: r,
   errorId: o,
-  helperId: l
+  helperId: i
 }) {
   const n = d(
     () => e(
       u("xs", "mt"),
-      z("caption"),
-      r && "text-fg-error",
-      s && "text-fg-success",
-      !r && !s && h("neutral", "DEFAULT", "text")
+      T("caption"),
+      s && "text-fg-error",
+      t && "text-fg-success",
+      !s && !t && "text-fg-secondary"
     ),
-    [r, s]
+    [s, t]
   ), c = d(
-    () => t || (r ? "Error" : s ? "Success" : ""),
-    [t, r, s]
+    () => r || (s ? "Error" : t ? "Success" : ""),
+    [r, s, t]
   );
   return /* @__PURE__ */ a.jsx(
     "div",
     {
-      id: o || l,
+      id: o || i,
       className: n,
-      role: r || s ? "alert" : void 0,
+      role: s || t ? "alert" : void 0,
       children: c
     }
   );
-}), qe = _(
-  O(function(S, E) {
-    var R = S, {
-      id: r,
-      label: s,
-      error: t = !1,
+}), Be = U(
+  O(function(L, k) {
+    var A = L, {
+      id: s,
+      label: t,
+      error: r = !1,
       success: o = !1,
-      helperText: l,
+      helperText: i,
       size: n = "md",
       variant: c = "outlined",
-      leftIcon: m,
+      leftIcon: b,
       rightIcon: p,
       showClearButton: x = !1,
       onClear: g,
-      className: i = "",
+      className: l = "",
       disabled: f = !1,
       type: y = "text",
-      value: w,
-      onChange: N
-    } = R, L = C(R, [
+      value: h,
+      onChange: j
+    } = A, S = C(A, [
       "id",
       "label",
       "error",
@@ -450,37 +450,37 @@ const Oe = _(function({
       "onChange"
     ]);
     const v = d(
-      () => r || `input-${Math.random().toString(36).substr(2, 9)}`,
-      [r]
-    ), D = d(
-      () => t ? `${v}-error` : void 0,
-      [t, v]
-    ), X = d(
-      () => l ? `${v}-helper` : void 0,
-      [l, v]
-    ), [P, J] = G(!1), T = d(() => y === "password", [y]), j = d(
-      () => T && P ? "text" : y,
-      [T, P, y]
+      () => s || `input-${Math.random().toString(36).substr(2, 9)}`,
+      [s]
+    ), F = d(
+      () => r ? `${v}-error` : void 0,
+      [r, v]
+    ), W = d(
+      () => i ? `${v}-helper` : void 0,
+      [i, v]
+    ), [P, Z] = Y(!1), V = d(() => y === "password", [y]), w = d(
+      () => V && P ? "text" : y,
+      [V, P, y]
     ), B = d(
-      () => t ? "error" : o ? "success" : "default",
-      [t, o]
-    ), A = d(
-      () => w != null && w !== "",
-      [w]
-    ), U = d(
-      () => x && A && !f,
-      [x, A, f]
-    ), oe = d(() => "focus:border-line-focus", []), ce = d(() => "focus:border-error", []), de = d(() => "focus:border-success", []), ue = d(
-      () => oe.replace("focus:border-", "focus:ring-"),
-      [oe]
-    ), re = W(
-      (I) => I === "error" ? ce.replace("focus:border-", "focus:ring-") : de.replace("focus:border-", "focus:ring-"),
-      [ce, de]
+      () => r ? "error" : o ? "success" : "default",
+      [r, o]
+    ), $ = d(
+      () => h != null && h !== "",
+      [h]
+    ), M = d(
+      () => x && $ && !f,
+      [x, $, f]
+    ), ne = d(() => "focus:border-line-focus", []), le = d(() => "focus:border-error", []), ce = d(() => "focus:border-success", []), de = d(
+      () => ne.replace("focus:border-", "focus:ring-"),
+      [ne]
+    ), re = _(
+      (D) => D === "error" ? le.replace("focus:border-", "focus:ring-") : ce.replace("focus:border-", "focus:ring-"),
+      [le, ce]
     ), se = H(
       // Base classes
       e(
         "w-full",
-        M("md"),
+        z("md"),
         "transition-colors",
         "focus:outline-none",
         "focus:ring-2",
@@ -494,36 +494,36 @@ const Oe = _(function({
             default: e(
               "border-0",
               "border-b-2",
-              h("neutral", "DEFAULT", "border"),
+              "border-line-default",
               "focus:border-line-focus"
             ),
             outlined: e(
               "border",
-              h("neutral", "DEFAULT", "border"),
+              "border-line-default",
               "focus:border-line-focus"
             ),
             filled: e(
-              h("neutral", "light", "bg"),
+              "bg-surface-muted",
               "border-0",
-              "focus:bg-white",
+              "focus:bg-surface-base",
               "focus:ring-2",
-              ue
+              de
             )
           },
           size: {
             sm: e(
               "h-8",
-              F("bodySmall"),
+              E("bodySmall"),
               u("md", "px")
             ),
             md: e(
               "h-10",
-              F("body"),
+              E("body"),
               u("base", "px")
             ),
             lg: e(
               "h-12",
-              F("bodyLarge"),
+              E("bodyLarge"),
               u("lg", "px")
             )
           },
@@ -547,49 +547,49 @@ const Oe = _(function({
           state: "default"
         }
       }
-    ), ee = d(
+    ), K = d(
       () => e(
         se({ variant: c, size: n, state: B }),
         // Icon padding - specific values for icon positioning
-        m && (n === "sm" ? "pl-9" : n === "lg" ? "pl-12" : "pl-10"),
-        (p || U || T) && (n === "sm" ? "pr-9" : n === "lg" ? "pr-12" : "pr-10"),
-        i
+        b && (n === "sm" ? "pl-9" : n === "lg" ? "pl-12" : "pl-10"),
+        (p || M || V) && (n === "sm" ? "pr-9" : n === "lg" ? "pr-12" : "pr-10"),
+        l
       ),
       [
         c,
         n,
         B,
-        m,
+        b,
         p,
-        U,
-        T,
-        i
+        M,
+        V,
+        l
       ]
-    ), te = d(
+    ), ee = d(
       () => e(
         "block",
-        z("label"),
+        T("label"),
         u("xs", "mb"),
         f && "opacity-50"
       ),
       [f]
-    ), Y = d(
+    ), Q = d(
       () => n === "sm" ? "h-4 w-4" : n === "lg" ? "h-5 w-5" : "h-4 w-4",
       [n]
-    ), le = d(
+    ), oe = d(
       () => n === "sm" ? "top-2" : n === "lg" ? "top-3.5" : "top-2.5",
       [n]
-    ), V = W(
-      (I) => {
-        var Q;
-        if (I.stopPropagation(), g)
+    ), I = _(
+      (D) => {
+        var J;
+        if (D.stopPropagation(), g)
           g();
-        else if (N) {
-          const K = (Q = I.currentTarget.closest(".relative")) == null ? void 0 : Q.querySelector("input");
-          if (K) {
-            const Z = {
-              target: K,
-              currentTarget: K,
+        else if (j) {
+          const G = (J = D.currentTarget.closest(".relative")) == null ? void 0 : J.querySelector("input");
+          if (G) {
+            const X = {
+              target: G,
+              currentTarget: G,
               bubbles: !0,
               cancelable: !0,
               defaultPrevented: !1,
@@ -604,97 +604,97 @@ const Oe = _(function({
               },
               timeStamp: Date.now()
             };
-            Object.defineProperty(Z.target, "value", {
+            Object.defineProperty(X.target, "value", {
               value: "",
               writable: !0
-            }), Object.defineProperty(Z.currentTarget, "value", {
+            }), Object.defineProperty(X.currentTarget, "value", {
               value: "",
               writable: !0
-            }), N(Z);
+            }), j(X);
           }
         }
       },
-      [g, N]
-    ), q = W(() => {
-      J((I) => !I);
+      [g, j]
+    ), q = _(() => {
+      Z((D) => !D);
     }, []);
     return /* @__PURE__ */ a.jsxs("div", { className: "w-full", children: [
-      s && /* @__PURE__ */ a.jsx("label", { htmlFor: v, className: te, children: s }),
+      t && /* @__PURE__ */ a.jsx("label", { htmlFor: v, className: ee, children: t }),
       /* @__PURE__ */ a.jsxs("div", { className: "relative", children: [
-        m && /* @__PURE__ */ a.jsx(
+        b && /* @__PURE__ */ a.jsx(
           "div",
           {
-            className: `absolute left-3 ${le} ${h("neutral", "DEFAULT", "text")} opacity-60 pointer-events-none`,
-            children: /* @__PURE__ */ a.jsx("div", { className: Y, children: m })
+            className: `absolute left-3 ${oe} text-fg-secondary opacity-60 pointer-events-none`,
+            children: /* @__PURE__ */ a.jsx("div", { className: Q, children: b })
           }
         ),
         /* @__PURE__ */ a.jsx(
           "input",
-          k({
+          N({
             id: v,
-            ref: E,
-            type: j,
-            className: ee,
+            ref: k,
+            type: w,
+            className: K,
             disabled: f,
-            value: w,
-            onChange: N,
-            "aria-invalid": t,
-            "aria-required": L.required,
-            "aria-describedby": D || X,
+            value: h,
+            onChange: j,
+            "aria-invalid": r,
+            "aria-required": S.required,
+            "aria-describedby": F || W,
             suppressHydrationWarning: !0
-          }, L)
+          }, S)
         ),
         /* @__PURE__ */ a.jsxs("div", { className: "absolute right-3 top-0 bottom-0 flex items-center gap-1", children: [
-          U && /* @__PURE__ */ a.jsx(
-            pe,
+          M && /* @__PURE__ */ a.jsx(
+            me,
             {
               variant: "ghost",
               size: "sm",
-              onClick: V,
+              onClick: I,
               className: "h-auto p-1",
               "aria-label": "Clear input",
-              children: /* @__PURE__ */ a.jsx(Ne, { className: Y })
+              children: /* @__PURE__ */ a.jsx(he, { className: Q })
             }
           ),
-          T && /* @__PURE__ */ a.jsx(
-            pe,
+          V && /* @__PURE__ */ a.jsx(
+            me,
             {
               variant: "ghost",
               size: "sm",
               onClick: q,
               className: "h-auto p-1",
               "aria-label": P ? "Hide password" : "Show password",
-              children: P ? /* @__PURE__ */ a.jsx(Re, { className: Y }) : /* @__PURE__ */ a.jsx(Ue, { className: Y })
+              children: P ? /* @__PURE__ */ a.jsx(Re, { className: Q }) : /* @__PURE__ */ a.jsx(Ce, { className: Q })
             }
           ),
-          p && !U && !T && /* @__PURE__ */ a.jsx(
+          p && !M && !V && /* @__PURE__ */ a.jsx(
             "div",
             {
-              className: `${h("neutral", "DEFAULT", "text")} opacity-60 pointer-events-none ${Y}`,
+              className: `text-fg-secondary opacity-60 pointer-events-none ${Q}`,
               children: p
             }
           )
         ] })
       ] }),
-      (t || o || l) && /* @__PURE__ */ a.jsx(
-        Oe,
+      (r || o || i) && /* @__PURE__ */ a.jsx(
+        Pe,
         {
-          error: t,
+          error: r,
           success: o,
-          helperText: l,
-          errorId: D,
-          helperId: X
+          helperText: i,
+          errorId: F,
+          helperId: W
         }
       )
     ] });
   })
 );
-qe.displayName = "Input";
-function He({
-  href: b,
-  active: r
+Be.displayName = "Input";
+function Oe({
+  href: m,
+  active: s
 }) {
-  const s = d(() => r !== void 0 ? r : !1, [r]), t = d(() => {
+  const t = d(() => s !== void 0 ? s : !1, [s]), r = d(() => {
     try {
       const o = (
         // eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -706,11 +706,11 @@ function He({
     }
   }, []);
   return {
-    isActive: s,
-    NextLink: t
+    isActive: t,
+    NextLink: r
   };
 }
-const _e = H(
+const qe = H(
   // Base classes
   e(
     "inline-flex",
@@ -728,13 +728,13 @@ const _e = H(
     variants: {
       variant: {
         default: e(
-          h("neutral", "dark", "text"),
+          "text-fg-primary",
           "hover:opacity-80",
           "focus-visible:opacity-100",
           "focus:ring-line-brand"
         ),
         underline: e(
-          h("neutral", "dark", "text"),
+          "text-fg-primary",
           "hover:opacity-80",
           "focus-visible:opacity-100",
           "border-b-2",
@@ -743,10 +743,10 @@ const _e = H(
           "focus:ring-line-brand"
         ),
         background: e(
-          h("neutral", "dark", "text"),
-          be("neutral", "light", "bg"),
+          "text-fg-primary",
+          "hover:bg-surface-hover",
           "rounded-md",
-          M("md"),
+          z("md"),
           "focus:ring-line-brand"
         )
       },
@@ -754,17 +754,17 @@ const _e = H(
         sm: e(
           u("sm", "px"),
           u("xs", "py"),
-          F("bodySmall")
+          E("bodySmall")
         ),
         md: e(
           u("base", "px"),
           u("sm", "py"),
-          F("body")
+          E("body")
         ),
         lg: e(
           u("lg", "px"),
           u("md", "py"),
-          F("bodyLarge")
+          E("bodyLarge")
         )
       }
     },
@@ -806,17 +806,17 @@ const _e = H(
     ]
   }
 );
-function mt(i) {
-  var f = i, {
-    href: b,
-    children: r,
-    active: s,
-    disabled: t = !1,
+function ur(l) {
+  var f = l, {
+    href: m,
+    children: s,
+    active: t,
+    disabled: r = !1,
     variant: o = "default",
-    size: l = "md",
+    size: i = "md",
     as: n,
     className: c,
-    "aria-label": m,
+    "aria-label": b,
     onClick: p,
     onKeyDown: x
   } = f, g = C(f, [
@@ -832,82 +832,82 @@ function mt(i) {
     "onClick",
     "onKeyDown"
   ]);
-  const y = d(() => s !== void 0 ? s : !1, [s]), { NextLink: w } = He({ href: b, active: y }), N = n || w || "a", L = d(() => {
+  const y = d(() => t !== void 0 ? t : !1, [t]), { NextLink: h } = Oe({ href: m, active: y }), j = n || h || "a", S = d(() => {
     if (!y) return "";
     switch (o) {
       case "underline":
-        return e("border-b-2", "border-line-brand", "text-fg-brand");
+        return e("border-b-2", "border-line-brand", "text-fg-brand-emphasis");
       case "background":
-        return e("bg-indigo-400", "text-fg-brand");
+        return e("bg-surface-brand-muted", "text-fg-brand-emphasis");
       case "default":
       default:
-        return e("text-fg-brand", "font-semibold");
+        return e("text-fg-brand-emphasis", "font-semibold");
     }
-  }, [y, o]), E = W(
+  }, [y, o]), k = _(
     (v) => {
-      if (t) {
+      if (r) {
         v.preventDefault(), v.stopPropagation();
         return;
       }
       p == null || p(v);
     },
-    [t, p]
-  ), S = W(
+    [r, p]
+  ), L = _(
     (v) => {
-      if (t) {
+      if (r) {
         (v.key === "Enter" || v.key === " ") && (v.preventDefault(), v.stopPropagation());
         return;
       }
       x == null || x(v);
     },
-    [t, x]
-  ), R = d(() => {
-    const v = k({
+    [r, x]
+  ), A = d(() => {
+    const v = N({
       className: e(
-        _e({ variant: o, size: l }),
-        L,
-        t && "opacity-50 cursor-not-allowed pointer-events-none",
+        qe({ variant: o, size: i }),
+        S,
+        r && "opacity-50 cursor-not-allowed pointer-events-none",
         c
       ),
       "aria-current": y ? "page" : void 0,
-      "aria-disabled": t ? !0 : void 0,
-      "aria-label": m,
-      tabIndex: t ? -1 : void 0,
-      onClick: E,
-      onKeyDown: S,
+      "aria-disabled": r ? !0 : void 0,
+      "aria-label": b,
+      tabIndex: r ? -1 : void 0,
+      onClick: k,
+      onKeyDown: L,
       "data-active": y,
-      "data-disabled": t
+      "data-disabled": r
     }, g);
-    return w && !n ? $(k({}, v), {
-      href: t ? void 0 : b
-    }) : $(k({}, v), {
-      href: t ? void 0 : b
+    return h && !n ? R(N({}, v), {
+      href: r ? void 0 : m
+    }) : R(N({}, v), {
+      href: r ? void 0 : m
     });
   }, [
     o,
-    l,
-    L,
-    t,
+    i,
+    S,
+    r,
     c,
     y,
-    m,
-    E,
-    S,
     b,
-    w,
+    k,
+    L,
+    m,
+    h,
     n,
     g
   ]);
-  return /* @__PURE__ */ a.jsx(N, $(k({}, R), { children: r }));
+  return /* @__PURE__ */ a.jsx(j, R(N({}, A), { children: s }));
 }
-const We = H(
+const He = H(
   // Base classes
   e(
     "inline-flex",
     "items-center",
     "justify-center",
     ie("label"),
-    M("md"),
+    z("md"),
     "border"
   ),
   {
@@ -925,17 +925,17 @@ const We = H(
         sm: e(
           u("1.5", "px"),
           u("0.5", "py"),
-          F("caption")
+          E("caption")
         ),
         md: e(
           u("sm", "px"),
           u("xs", "py"),
-          F("caption")
+          E("caption")
         ),
         lg: e(
           u("sm", "px"),
           u("xs", "py"),
-          F("bodySmall")
+          E("bodySmall")
         )
       },
       style: {
@@ -968,21 +968,28 @@ const We = H(
       {
         variant: "neutral",
         style: "solid",
-        class: e(
-          h("neutral", "light", "bg"),
-          h("neutral", "dark", "text"),
-          h("neutral", "DEFAULT", "border")
-        )
+        class: e("bg-surface-muted", "text-fg-primary", "border-line-default")
       },
       {
         variant: "primary",
         style: "solid",
-        class: e("bg-indigo-400", "text-indigo-600", "border-line-brand")
+        class: e(
+          "bg-surface-brand",
+          "text-fg-brand-emphasis",
+          "border-line-brand"
+        )
       },
       {
         variant: "secondary",
         style: "solid",
-        class: e("bg-pink-300", "text-pink-600", "border-line-secondary")
+        // bg-pink-300: secondary solid badge — no semantic equivalent
+        // (would shift 2 shades to bg-surface-secondary). Kept literal until
+        // secondary brand surface palette expands beyond DEFAULT.
+        class: e(
+          "bg-pink-300",
+          "text-fg-brand-secondary-emphasis",
+          "border-line-secondary"
+        )
       },
       // Outline style variants
       {
@@ -1008,11 +1015,7 @@ const We = H(
       {
         variant: "neutral",
         style: "outline",
-        class: e(
-          "bg-transparent",
-          h("neutral", "DEFAULT", "border"),
-          h("neutral", "DEFAULT", "text")
-        )
+        class: e("bg-transparent", "border-line-default", "text-fg-secondary")
       },
       {
         variant: "primary",
@@ -1035,14 +1038,14 @@ const We = H(
       style: "solid"
     }
   }
-), Xe = _(
-  O(function(p, m) {
+), Ue = U(
+  O(function(p, b) {
     var x = p, {
-      variant: r = "neutral",
-      size: s = "md",
-      style: t = "solid",
+      variant: s = "neutral",
+      size: t = "md",
+      style: r = "solid",
       className: o = "",
-      children: l,
+      children: i,
       "aria-label": n
     } = x, c = C(x, [
       "variant",
@@ -1053,75 +1056,75 @@ const We = H(
       "aria-label"
     ]);
     const g = d(
-      () => e(We({ variant: r, size: s, style: t }), o),
-      [r, s, t, o]
-    ), i = d(() => {
+      () => e(He({ variant: s, size: t, style: r }), o),
+      [s, t, r, o]
+    ), l = d(() => {
       if (n) return n;
-      if (typeof l == "string") return l;
-      if (typeof l == "object" && l !== null && "props" in l) {
-        const f = l.props;
+      if (typeof i == "string") return i;
+      if (typeof i == "object" && i !== null && "props" in i) {
+        const f = i.props;
         if (f != null && f.children && typeof f.children == "string")
           return f.children;
       }
-    }, [n, l]);
+    }, [n, i]);
     return /* @__PURE__ */ a.jsx(
       "span",
-      $(k({
-        ref: m,
+      R(N({
+        ref: b,
         role: "status",
-        "aria-label": i,
+        "aria-label": l,
         className: g
       }, c), {
-        children: l
+        children: i
       })
     );
   })
 );
-Xe.displayName = "Badge";
-const Ze = _(function({
-  error: r,
-  success: s,
-  helperText: t,
+Ue.displayName = "Badge";
+const _e = U(function({
+  error: s,
+  success: t,
+  helperText: r,
   errorId: o,
-  helperId: l
+  helperId: i
 }) {
   const n = d(
     () => e(
       u("xs", "mt"),
-      z("caption"),
-      r && "text-fg-error",
-      s && "text-fg-success",
-      !r && !s && h("neutral", "DEFAULT", "text")
+      T("caption"),
+      s && "text-fg-error",
+      t && "text-fg-success",
+      !s && !t && "text-fg-secondary"
     ),
-    [r, s]
+    [s, t]
   ), c = d(
-    () => t || (r ? "Error" : s ? "Success" : ""),
-    [t, r, s]
+    () => r || (s ? "Error" : t ? "Success" : ""),
+    [r, s, t]
   );
   return /* @__PURE__ */ a.jsx(
     "div",
     {
-      id: o || l,
+      id: o || i,
       className: n,
-      role: r || s ? "alert" : void 0,
+      role: s || t ? "alert" : void 0,
       children: c
     }
   );
-}), Je = _(
+}), We = U(
   O(function(y, f) {
-    var w = y, {
-      options: r = [],
-      optionGroups: s,
-      placeholder: t,
+    var h = y, {
+      options: s = [],
+      optionGroups: t,
+      placeholder: r,
       label: o,
-      error: l = !1,
+      error: i = !1,
       success: n = !1,
       helperText: c,
-      size: m = "md",
+      size: b = "md",
       className: p = "",
       disabled: x = !1,
       id: g
-    } = w, i = C(w, [
+    } = h, l = C(h, [
       "options",
       "optionGroups",
       "placeholder",
@@ -1134,26 +1137,26 @@ const Ze = _(function({
       "disabled",
       "id"
     ]);
-    const N = d(
+    const j = d(
       () => g || `select-${Math.random().toString(36).substr(2, 9)}`,
       [g]
-    ), L = d(
-      () => l ? `${N}-error` : void 0,
-      [l, N]
-    ), E = d(
-      () => c ? `${N}-helper` : void 0,
-      [c, N]
-    ), S = d(() => "focus:border-line-focus", []), R = d(() => "focus:border-error", []), v = d(() => "focus:border-success", []), D = W(
-      (j) => j === "error" ? R.replace("focus:border-", "focus:ring-") : j === "success" ? v.replace("focus:border-", "focus:ring-") : S.replace("focus:border-", "focus:ring-"),
-      [R, v, S]
-    ), X = H(
+    ), S = d(
+      () => i ? `${j}-error` : void 0,
+      [i, j]
+    ), k = d(
+      () => c ? `${j}-helper` : void 0,
+      [c, j]
+    ), L = d(() => "focus:border-line-focus", []), A = d(() => "focus:border-error", []), v = d(() => "focus:border-success", []), F = _(
+      (w) => w === "error" ? A.replace("focus:border-", "focus:ring-") : w === "success" ? v.replace("focus:border-", "focus:ring-") : L.replace("focus:border-", "focus:ring-"),
+      [A, v, L]
+    ), W = H(
       // Base classes
       e(
         "block",
         "w-full",
-        M("md"),
+        z("md"),
         "border",
-        "bg-white",
+        "bg-surface-base",
         "transition-colors",
         "focus:outline-none",
         "focus:ring-2",
@@ -1166,27 +1169,24 @@ const Ze = _(function({
           size: {
             sm: e(
               "h-8",
-              F("bodySmall"),
+              E("bodySmall"),
               u("md", "px")
             ),
             md: e(
               "h-10",
-              F("body"),
+              E("body"),
               u("base", "px")
             ),
             lg: e(
               "h-12",
-              F("bodyLarge"),
+              E("bodyLarge"),
               u("lg", "px")
             )
           },
           state: {
-            default: e(
-              h("neutral", "DEFAULT", "border"),
-              D()
-            ),
-            error: e("border-error", D("error")),
-            success: e("border-success", D("success"))
+            default: e("border-line-default", F()),
+            error: e("border-error", F("error")),
+            success: e("border-success", F("success"))
           }
         },
         defaultVariants: {
@@ -1195,75 +1195,75 @@ const Ze = _(function({
         }
       }
     ), P = d(
-      () => l ? "error" : n ? "success" : "default",
-      [l, n]
-    ), J = d(
-      () => e(X({ size: m, state: P }), p),
-      [m, P, p]
-    ), T = d(
+      () => i ? "error" : n ? "success" : "default",
+      [i, n]
+    ), Z = d(
+      () => e(W({ size: b, state: P }), p),
+      [b, P, p]
+    ), V = d(
       () => e(
         "block",
-        z("label"),
+        T("label"),
         u("xs", "mb"),
         x && "opacity-50"
       ),
       [x]
     );
     return /* @__PURE__ */ a.jsxs("div", { className: "w-full", children: [
-      o && /* @__PURE__ */ a.jsx("label", { htmlFor: N, className: T, children: o }),
+      o && /* @__PURE__ */ a.jsx("label", { htmlFor: j, className: V, children: o }),
       /* @__PURE__ */ a.jsxs(
         "select",
-        $(k({
-          id: N,
+        R(N({
+          id: j,
           ref: f,
-          className: J,
+          className: Z,
           disabled: x,
-          "aria-invalid": l,
-          "aria-required": i.required,
-          "aria-describedby": L || E
-        }, i), {
+          "aria-invalid": i,
+          "aria-required": l.required,
+          "aria-describedby": S || k
+        }, l), {
           children: [
-            t && /* @__PURE__ */ a.jsx("option", { value: "", disabled: !0, children: t }),
-            s && s.length > 0 ? s.map((j, B) => /* @__PURE__ */ a.jsx("optgroup", { label: j.label, children: (j.options || []).map((A) => /* @__PURE__ */ a.jsx(
+            r && /* @__PURE__ */ a.jsx("option", { value: "", disabled: !0, children: r }),
+            t && t.length > 0 ? t.map((w, B) => /* @__PURE__ */ a.jsx("optgroup", { label: w.label, children: (w.options || []).map(($) => /* @__PURE__ */ a.jsx(
               "option",
               {
-                value: A.value,
-                disabled: A.disabled,
-                children: A.label
+                value: $.value,
+                disabled: $.disabled,
+                children: $.label
               },
-              A.value
-            )) }, B)) : (r || []).map((j) => /* @__PURE__ */ a.jsx(
+              $.value
+            )) }, B)) : (s || []).map((w) => /* @__PURE__ */ a.jsx(
               "option",
               {
-                value: j.value,
-                disabled: j.disabled,
-                children: j.label
+                value: w.value,
+                disabled: w.disabled,
+                children: w.label
               },
-              j.value
+              w.value
             ))
           ]
         })
       ),
-      (l || n || c) && /* @__PURE__ */ a.jsx(
-        Ze,
+      (i || n || c) && /* @__PURE__ */ a.jsx(
+        _e,
         {
-          error: l,
+          error: i,
           success: n,
           helperText: c,
-          errorId: L,
-          helperId: E
+          errorId: S,
+          helperId: k
         }
       )
     ] });
   })
 );
-Je.displayName = "Select";
-const Qe = _(
-  O(function(n, l) {
-    var c = n, { error: r = !1, resize: s = "vertical", className: t = "" } = c, o = C(c, ["error", "resize", "className"]);
-    const m = d(() => "focus:border-line-focus", []), p = d(() => "focus:border-error", []), x = d(
-      () => r ? p.replace("focus:border-", "focus:ring-") : m.replace("focus:border-", "focus:ring-"),
-      [r, p, m]
+We.displayName = "Select";
+const Xe = U(
+  O(function(n, i) {
+    var c = n, { error: s = !1, resize: t = "vertical", className: r = "" } = c, o = C(c, ["error", "resize", "className"]);
+    const b = d(() => "focus:border-line-focus", []), p = d(() => "focus:border-error", []), x = d(
+      () => s ? p.replace("focus:border-", "focus:ring-") : b.replace("focus:border-", "focus:ring-"),
+      [s, p, b]
     ), g = d(
       () => ({
         none: "resize-none",
@@ -1272,48 +1272,48 @@ const Qe = _(
         vertical: "resize-y"
       }),
       []
-    ), i = d(
+    ), l = d(
       () => e(
         "block",
         "w-full",
-        M("md"),
+        z("md"),
         u("base", "px"),
         u("md", "py"),
         "border",
-        F("body"),
+        E("body"),
         "focus:outline-none",
         "focus:ring-2",
         "focus:ring-offset-2",
-        g[s],
-        r ? e("border-error", x) : e(h("neutral", "DEFAULT", "border"), x),
-        t
+        g[t],
+        s ? e("border-error", x) : e("border-line-default", x),
+        r
       ),
-      [s, g, r, x, t]
+      [t, g, s, x, r]
     ), f = d(
-      () => r && o.id ? `${o.id}-error` : void 0,
-      [r, o.id]
+      () => s && o.id ? `${o.id}-error` : void 0,
+      [s, o.id]
     );
     return /* @__PURE__ */ a.jsx(
       "textarea",
-      k({
-        ref: l,
-        className: i,
-        "aria-invalid": r,
+      N({
+        ref: i,
+        className: l,
+        "aria-invalid": s,
         "aria-describedby": f
       }, o)
     );
   })
 );
-Qe.displayName = "Textarea";
-const Ye = _(
-  O(function(n, l) {
-    var c = n, { variant: r = "default", className: s = "", children: t } = c, o = C(c, ["variant", "className", "children"]);
-    const m = d(
+Xe.displayName = "Textarea";
+const Ze = U(
+  O(function(n, i) {
+    var c = n, { variant: s = "default", className: t = "", children: r } = c, o = C(c, ["variant", "className", "children"]);
+    const b = d(
       () => e(
         "block",
-        F("label"),
+        E("label"),
         ie("label"),
-        h("neutral", "dark", "text")
+        "text-fg-primary"
       ),
       []
     ), p = d(
@@ -1322,58 +1322,56 @@ const Ye = _(
         required: e(
           "after:content-['*']",
           `after:${u("0.5", "ml")}`,
-          "after:text-red-500"
-          // error DEFAULT color
+          "after:text-fg-error"
         ),
         optional: e(
           "after:content-['(optional)']",
           "after:ml-1",
           // xs spacing = 1 (4px) - note: test expects ml-1, not ml-0.5
-          "after:text-gray-400",
-          // neutral DEFAULT color
+          "after:text-fg-tertiary",
           "after:font-normal"
         )
       }),
       []
     ), x = d(
-      () => e(m, p[r], s),
-      [m, p, r, s]
+      () => e(b, p[s], t),
+      [b, p, s, t]
     );
-    return /* @__PURE__ */ a.jsx("label", $(k({ ref: l, className: x }, o), { children: t }));
+    return /* @__PURE__ */ a.jsx("label", R(N({ ref: i, className: x }, o), { children: r }));
   })
 );
-Ye.displayName = "Label";
-function gt(o) {
-  var l = o, {
-    message: b,
-    id: r,
-    className: s = ""
-  } = l, t = C(l, [
+Ze.displayName = "Label";
+function fr(o) {
+  var i = o, {
+    message: m,
+    id: s,
+    className: t = ""
+  } = i, r = C(i, [
     "message",
     "id",
     "className"
   ]);
   const n = [
     u("xs", "mt"),
-    F("bodySmall"),
+    E("bodySmall"),
     "text-fg-error",
     "flex",
     "items-center",
     u("xs", "gap")
-  ], c = e(...n, s);
-  return /* @__PURE__ */ a.jsxs("div", $(k({ role: "alert", id: r, className: c, "aria-live": "polite" }, t), { children: [
-    /* @__PURE__ */ a.jsx(Ve, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
-    /* @__PURE__ */ a.jsx("span", { children: b })
+  ], c = e(...n, t);
+  return /* @__PURE__ */ a.jsxs("div", R(N({ role: "alert", id: s, className: c, "aria-live": "polite" }, r), { children: [
+    /* @__PURE__ */ a.jsx(Ae, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ a.jsx("span", { children: m })
   ] }));
 }
-function pt(m) {
-  var p = m, {
-    content: b,
-    children: r,
-    position: s = "top",
-    delay: t = 200,
+function mr(b) {
+  var p = b, {
+    content: m,
+    children: s,
+    position: t = "top",
+    delay: r = 200,
     className: o = "",
-    "aria-label": l,
+    "aria-label": i,
     preservePositioning: n = !1
   } = p, c = C(p, [
     "content",
@@ -1384,47 +1382,47 @@ function pt(m) {
     "aria-label",
     "preservePositioning"
   ]);
-  const [x, g] = G(!1), i = ae(null), f = ae(null), y = ae(null), w = `tooltip-${Math.random().toString(36).substr(2, 9)}`, N = () => {
-    const T = setTimeout(() => {
+  const [x, g] = Y(!1), l = te(null), f = te(null), y = te(null), h = `tooltip-${Math.random().toString(36).substr(2, 9)}`, j = () => {
+    const V = setTimeout(() => {
       g(!0);
-    }, t);
-    i.current = T;
-  }, L = () => {
-    i.current && (clearTimeout(i.current), i.current = null), g(!1);
-  }, E = () => {
-    g(!0);
+    }, r);
+    l.current = V;
   }, S = () => {
+    l.current && (clearTimeout(l.current), l.current = null), g(!1);
+  }, k = () => {
+    g(!0);
+  }, L = () => {
     g(!1);
-  }, R = (T) => {
-    var j;
-    T.key === "Escape" && (g(!1), (j = y.current) == null || j.blur());
+  }, A = (V) => {
+    var w;
+    V.key === "Escape" && (g(!1), (w = y.current) == null || w.blur());
   };
-  ne(() => () => {
-    i.current && (clearTimeout(i.current), i.current = null);
-  }, []), ne(() => {
+  ae(() => () => {
+    l.current && (clearTimeout(l.current), l.current = null);
+  }, []), ae(() => {
     if (!x) return;
-    const T = (j) => {
-      f.current && !f.current.contains(j.target) && y.current && !y.current.contains(j.target) && g(!1);
+    const V = (w) => {
+      f.current && !f.current.contains(w.target) && y.current && !y.current.contains(w.target) && g(!1);
     };
-    return document.addEventListener("mousedown", T), () => {
-      document.removeEventListener("mousedown", T);
+    return document.addEventListener("mousedown", V), () => {
+      document.removeEventListener("mousedown", V);
     };
   }, [x]);
-  const v = (T) => ({
-    top: "border-t-gray-700",
-    bottom: "border-b-gray-700",
-    left: "border-l-gray-700",
-    right: "border-r-gray-700"
-  })[T], D = H(
+  const v = (V) => ({
+    top: "border-t-surface-inverse",
+    bottom: "border-b-surface-inverse",
+    left: "border-l-surface-inverse",
+    right: "border-r-surface-inverse"
+  })[V], F = H(
     e(
       "absolute",
-      De("tooltip"),
+      $e("tooltip"),
       u("sm", "px"),
       u("xs", "py"),
-      F("caption"),
-      h("neutral", "contrast", "text"),
-      h("neutral", "dark", "bg"),
-      M("md"),
+      E("caption"),
+      "text-fg-inverse",
+      "bg-surface-inverse",
+      z("md"),
       "shadow-lg",
       "whitespace-nowrap"
     ),
@@ -1465,12 +1463,12 @@ function pt(m) {
         position: "top"
       }
     }
-  ), X = H(
+  ), W = H(
     e(
       "absolute",
       "w-0",
       "h-0",
-      Te("thick"),
+      Le("thick"),
       "border-transparent"
     ),
     {
@@ -1510,62 +1508,62 @@ function pt(m) {
         position: "top"
       }
     }
-  ), P = ke(r) ? (() => {
-    const T = r, j = T.props, B = j.ref;
-    return Ee(T, {
-      ref: (A) => {
-        y.current = A, typeof B == "function" ? B(A) : B && typeof B == "object" && "current" in B && (B.current = A);
+  ), P = we(s) ? (() => {
+    const V = s, w = V.props, B = w.ref;
+    return je(V, {
+      ref: ($) => {
+        y.current = $, typeof B == "function" ? B($) : B && typeof B == "object" && "current" in B && (B.current = $);
       },
-      "aria-describedby": x ? w : j["aria-describedby"],
-      onMouseEnter: (A) => {
-        var U;
-        N(), (U = j.onMouseEnter) == null || U.call(j, A);
+      "aria-describedby": x ? h : w["aria-describedby"],
+      onMouseEnter: ($) => {
+        var M;
+        j(), (M = w.onMouseEnter) == null || M.call(w, $);
       },
-      onMouseLeave: (A) => {
-        var U;
-        L(), (U = j.onMouseLeave) == null || U.call(j, A);
+      onMouseLeave: ($) => {
+        var M;
+        S(), (M = w.onMouseLeave) == null || M.call(w, $);
       },
-      onFocus: (A) => {
-        var U;
-        E(), (U = j.onFocus) == null || U.call(j, A);
+      onFocus: ($) => {
+        var M;
+        k(), (M = w.onFocus) == null || M.call(w, $);
       },
-      onBlur: (A) => {
-        var U;
-        S(), (U = j.onBlur) == null || U.call(j, A);
+      onBlur: ($) => {
+        var M;
+        L(), (M = w.onBlur) == null || M.call(w, $);
       },
-      onKeyDown: (A) => {
-        var U;
-        R(A), (U = j.onKeyDown) == null || U.call(j, A);
+      onKeyDown: ($) => {
+        var M;
+        A($), (M = w.onKeyDown) == null || M.call(w, $);
       }
     });
-  })() : r, J = n ? e("static", "inline-block", o) : e("relative", "inline-block", o);
-  return /* @__PURE__ */ a.jsxs("div", $(k({ className: J }, c), { children: [
+  })() : s, Z = n ? e("static", "inline-block", o) : e("relative", "inline-block", o);
+  return /* @__PURE__ */ a.jsxs("div", R(N({ className: Z }, c), { children: [
     P,
     x && /* @__PURE__ */ a.jsxs(
       "div",
       {
         ref: f,
-        id: w,
-        className: e(D({ position: s })),
+        id: h,
+        className: e(F({ position: t })),
         role: "tooltip",
         "aria-live": "polite",
         children: [
-          b,
-          /* @__PURE__ */ a.jsx("div", { className: e(X({ position: s })), "aria-hidden": "true" })
+          m,
+          /* @__PURE__ */ a.jsx("div", { className: e(W({ position: t })), "aria-hidden": "true" })
         ]
       }
     )
   ] }));
 }
-function xt(c) {
-  var m = c, {
-    variant: b = "text",
-    width: r,
-    height: s,
-    lines: t = 1,
+function br(c) {
+  var b = c, {
+    variant: m = "text",
+    width: s,
+    height: t,
+    lines: r = 1,
     className: o = "",
-    "aria-label": l
-  } = m, n = C(m, [
+    "aria-label": i
+  } = b, n = C(b, [
     "variant",
     "width",
     "height",
@@ -1575,87 +1573,87 @@ function xt(c) {
   ]);
   const p = [
     "motion-safe:animate-pulse",
-    h("neutral", "light", "bg"),
-    M("sm")
+    "bg-surface-muted",
+    z("sm")
   ], x = {
     text: "h-4",
     card: "h-32",
     list: "h-12",
     circle: "rounded-full"
-  }, g = e(...p, x[b], o), i = {};
-  r && (i.width = r), s && (i.height = s);
-  const f = l || `Loading ${b} content`;
-  return b === "text" && t > 1 ? /* @__PURE__ */ a.jsx(
+  }, g = e(...p, x[m], o), l = {};
+  s && (l.width = s), t && (l.height = t);
+  const f = i || `Loading ${m} content`;
+  return m === "text" && r > 1 ? /* @__PURE__ */ a.jsx(
     "div",
-    $(k({
+    R(N({
       className: u("sm", "space-y"),
       role: "status",
       "aria-busy": "true",
       "aria-label": f
     }, n), {
-      children: Array.from({ length: t }).map((y, w) => /* @__PURE__ */ a.jsx(
+      children: Array.from({ length: r }).map((y, h) => /* @__PURE__ */ a.jsx(
         "div",
         {
           className: g,
-          style: w === t - 1 ? { width: "75%" } : i,
+          style: h === r - 1 ? { width: "75%" } : l,
           "aria-hidden": "true"
         },
-        w
+        h
       ))
     })
   ) : /* @__PURE__ */ a.jsx(
     "div",
-    k({
+    N({
       className: g,
-      style: i,
+      style: l,
       role: "status",
       "aria-busy": "true",
       "aria-label": f
     }, n)
   );
 }
-function Ge({
-  defaultOpen: b = !0,
-  open: r,
-  onOpenChange: s,
-  storageKey: t
+function Je({
+  defaultOpen: m = !0,
+  open: s,
+  onOpenChange: t,
+  storageKey: r
 }) {
-  const o = W(() => {
-    if (t && typeof window != "undefined") {
-      const x = localStorage.getItem(t);
+  const o = _(() => {
+    if (r && typeof window != "undefined") {
+      const x = localStorage.getItem(r);
       if (x !== null)
         return x === "true";
     }
-    return b;
-  }, [b, t]), [l, n] = G(o), c = r !== void 0 ? r : l;
-  ne(() => {
-    t && typeof window != "undefined" && r === void 0 && localStorage.setItem(t, String(l));
-  }, [l, t, r]);
-  const m = W(
+    return m;
+  }, [m, r]), [i, n] = Y(o), c = s !== void 0 ? s : i;
+  ae(() => {
+    r && typeof window != "undefined" && s === void 0 && localStorage.setItem(r, String(i));
+  }, [i, r, s]);
+  const b = _(
     (x) => {
-      r === void 0 && n(x), s == null || s(x);
+      s === void 0 && n(x), t == null || t(x);
     },
-    [r, s]
-  ), p = W(() => {
-    m(!c);
-  }, [c, m]);
+    [s, t]
+  ), p = _(() => {
+    b(!c);
+  }, [c, b]);
   return {
     isOpen: c,
     toggle: p,
-    setOpen: m
+    setOpen: b
   };
 }
-function yt(x) {
+function gr(x) {
   var g = x, {
-    children: b,
-    trigger: r,
-    defaultOpen: s = !0,
-    open: t,
+    children: m,
+    trigger: s,
+    defaultOpen: t = !0,
+    open: r,
     onOpenChange: o,
-    disabled: l = !1,
+    disabled: i = !1,
     duration: n = 200,
     storageKey: c,
-    className: m = ""
+    className: b = ""
   } = g, p = C(g, [
     "children",
     "trigger",
@@ -1667,37 +1665,37 @@ function yt(x) {
     "storageKey",
     "className"
   ]);
-  const { isOpen: i, toggle: f } = Ge({
-    defaultOpen: s,
-    open: t,
+  const { isOpen: l, toggle: f } = Je({
+    defaultOpen: t,
+    open: r,
     onOpenChange: o,
     storageKey: c
-  }), y = ae(null), [w, N] = G(i ? "auto" : 0);
-  ne(() => {
-    y.current && N(i ? y.current.scrollHeight : 0);
-  }, [i, b]), ne(() => {
-    if (!i || !y.current) return;
-    const E = new ResizeObserver(() => {
-      y.current && i && N(y.current.scrollHeight);
+  }), y = te(null), [h, j] = Y(l ? "auto" : 0);
+  ae(() => {
+    y.current && j(l ? y.current.scrollHeight : 0);
+  }, [l, m]), ae(() => {
+    if (!l || !y.current) return;
+    const k = new ResizeObserver(() => {
+      y.current && l && j(y.current.scrollHeight);
     });
-    return E.observe(y.current), () => {
-      E.disconnect();
+    return k.observe(y.current), () => {
+      k.disconnect();
     };
-  }, [i]);
-  const L = `collapsible-content-${Math.random().toString(36).substr(2, 9)}`;
-  return /* @__PURE__ */ a.jsxs("div", $(k({ className: m }, p), { children: [
+  }, [l]);
+  const S = `collapsible-content-${Math.random().toString(36).substr(2, 9)}`;
+  return /* @__PURE__ */ a.jsxs("div", R(N({ className: b }, p), { children: [
     /* @__PURE__ */ a.jsx(
       "button",
       {
         type: "button",
         onClick: f,
-        onKeyDown: (E) => {
-          (E.key === "Enter" || E.key === " ") && (E.preventDefault(), l || f());
+        onKeyDown: (k) => {
+          (k.key === "Enter" || k.key === " ") && (k.preventDefault(), i || f());
         },
-        disabled: l,
-        "aria-expanded": i,
-        "aria-controls": L,
-        "aria-disabled": l,
+        disabled: i,
+        "aria-expanded": l,
+        "aria-controls": S,
+        "aria-disabled": i,
         className: e(
           "w-full",
           "text-left",
@@ -1705,38 +1703,38 @@ function yt(x) {
           "focus:ring-2",
           "focus:ring-line-brand",
           "focus:ring-offset-2",
-          M("md")
+          z("md")
         ),
-        children: r
+        children: s
       }
     ),
     /* @__PURE__ */ a.jsx(
       "div",
       {
-        id: L,
+        id: S,
         ref: y,
         style: {
-          height: typeof w == "number" ? `${w}px` : w,
+          height: typeof h == "number" ? `${h}px` : h,
           overflow: "hidden",
           transition: `height ${n}ms ease-in-out`
         },
-        "aria-hidden": !i,
-        children: /* @__PURE__ */ a.jsx("div", { children: b })
+        "aria-hidden": !l,
+        children: /* @__PURE__ */ a.jsx("div", { children: m })
       }
     )
   ] }));
 }
-const Ke = _(
+const Qe = U(
   O(function(x, p) {
     var g = x, {
-      id: r,
-      label: s,
-      error: t = !1,
+      id: s,
+      label: t,
+      error: r = !1,
       helperText: o,
-      className: l = "",
+      className: i = "",
       disabled: n = !1,
       indeterminate: c = !1
-    } = g, m = C(g, [
+    } = g, b = C(g, [
       "id",
       "label",
       "error",
@@ -1745,93 +1743,93 @@ const Ke = _(
       "disabled",
       "indeterminate"
     ]);
-    const i = d(
-      () => r || `checkbox-${Math.random().toString(36).substr(2, 9)}`,
-      [r]
+    const l = d(
+      () => s || `checkbox-${Math.random().toString(36).substr(2, 9)}`,
+      [s]
     ), f = d(
-      () => t ? `${i}-error` : void 0,
-      [t, i]
+      () => r ? `${l}-error` : void 0,
+      [r, l]
     ), y = d(
-      () => o ? `${i}-helper` : void 0,
-      [o, i]
-    ), w = d(() => "focus:border-line-focus", []), N = d(() => "focus:border-error", []), L = d(
-      () => t ? N.replace("focus:border-", "focus:ring-") : w.replace("focus:border-", "focus:ring-"),
-      [t, N, w]
-    ), E = d(
+      () => o ? `${l}-helper` : void 0,
+      [o, l]
+    ), h = d(() => "focus:border-line-focus", []), j = d(() => "focus:border-error", []), S = d(
+      () => r ? j.replace("focus:border-", "focus:ring-") : h.replace("focus:border-", "focus:ring-"),
+      [r, j, h]
+    ), k = d(
       () => e(
         "h-4",
         "w-4",
-        M("sm"),
+        z("sm"),
         "border",
-        h("neutral", "DEFAULT", "border"),
+        "border-line-default",
         "text-fg-brand",
         "focus:ring-2",
-        L,
+        S,
         "focus:ring-offset-2",
         "disabled:opacity-50",
         "disabled:cursor-not-allowed",
         "cursor-pointer",
-        t && "border-error",
-        l
+        r && "border-error",
+        i
       ),
-      [L, t, l]
-    ), S = d(
+      [S, r, i]
+    ), L = d(
       () => e(
-        z("label"),
+        T("label"),
         u("sm", "ml"),
         n ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
       ),
       [n]
-    ), R = ae(null), v = W(
-      (D) => {
-        R.current = D, typeof p == "function" ? p(D) : p && (p.current = D), D && (D.indeterminate = c);
+    ), A = te(null), v = _(
+      (F) => {
+        A.current = F, typeof p == "function" ? p(F) : p && (p.current = F), F && (F.indeterminate = c);
       },
       [p, c]
     );
-    return ne(() => {
-      R.current && (R.current.indeterminate = c);
+    return ae(() => {
+      A.current && (A.current.indeterminate = c);
     }, [c]), /* @__PURE__ */ a.jsxs("div", { className: e("flex", "flex-col", u("sm", "my")), children: [
       /* @__PURE__ */ a.jsxs("div", { className: "flex items-center", children: [
         /* @__PURE__ */ a.jsx(
           "input",
-          k({
+          N({
             type: "checkbox",
-            id: i,
+            id: l,
             ref: v,
-            className: E,
+            className: k,
             disabled: n,
-            "aria-invalid": t,
+            "aria-invalid": r,
             "aria-describedby": f || y || void 0,
-            "aria-label": s ? void 0 : "Checkbox"
-          }, m)
+            "aria-label": t ? void 0 : "Checkbox"
+          }, b)
         ),
-        s && /* @__PURE__ */ a.jsx("label", { htmlFor: i, className: S, children: s })
+        t && /* @__PURE__ */ a.jsx("label", { htmlFor: l, className: L, children: t })
       ] }),
-      (t || o) && /* @__PURE__ */ a.jsx(
+      (r || o) && /* @__PURE__ */ a.jsx(
         "div",
         {
           id: f || y,
           className: e(
             u("xs", "mt"),
-            z("caption"),
-            t ? "text-fg-error" : h("neutral", "DEFAULT", "text")
+            T("caption"),
+            r ? "text-fg-error" : "text-fg-secondary"
           ),
-          role: t ? "alert" : void 0,
-          children: t ? o || "This field has an error" : o
+          role: r ? "alert" : void 0,
+          children: r ? o || "This field has an error" : o
         }
       )
     ] });
   })
 );
-Ke.displayName = "Checkbox";
-const et = _(
-  O(function(p, m) {
+Qe.displayName = "Checkbox";
+const Ye = U(
+  O(function(p, b) {
     var x = p, {
-      id: r,
-      label: s,
-      error: t = !1,
+      id: s,
+      label: t,
+      error: r = !1,
       helperText: o,
-      className: l = "",
+      className: i = "",
       disabled: n = !1
     } = x, c = C(x, [
       "id",
@@ -1842,37 +1840,37 @@ const et = _(
       "disabled"
     ]);
     const g = d(
-      () => r || `radio-${Math.random().toString(36).substr(2, 9)}`,
-      [r]
-    ), i = d(
-      () => t ? `${g}-error` : void 0,
-      [t, g]
+      () => s || `radio-${Math.random().toString(36).substr(2, 9)}`,
+      [s]
+    ), l = d(
+      () => r ? `${g}-error` : void 0,
+      [r, g]
     ), f = d(
       () => o ? `${g}-helper` : void 0,
       [o, g]
-    ), y = d(() => "focus:border-line-focus", []), w = d(() => "focus:border-error", []), N = d(
-      () => t ? w.replace("focus:border-", "focus:ring-") : y.replace("focus:border-", "focus:ring-"),
-      [t, w, y]
-    ), L = d(
+    ), y = d(() => "focus:border-line-focus", []), h = d(() => "focus:border-error", []), j = d(
+      () => r ? h.replace("focus:border-", "focus:ring-") : y.replace("focus:border-", "focus:ring-"),
+      [r, h, y]
+    ), S = d(
       () => e(
         "h-4",
         "w-4",
         "border",
-        h("neutral", "DEFAULT", "border"),
+        "border-line-default",
         "text-fg-brand",
         "focus:ring-2",
-        N,
+        j,
         "focus:ring-offset-2",
         "disabled:opacity-50",
         "disabled:cursor-not-allowed",
         "cursor-pointer",
-        t && "border-error",
-        l
+        r && "border-error",
+        i
       ),
-      [N, t, l]
-    ), E = d(
+      [j, r, i]
+    ), k = d(
       () => e(
-        z("label"),
+        T("label"),
         u("sm", "ml"),
         n ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
       ),
@@ -1882,37 +1880,37 @@ const et = _(
       /* @__PURE__ */ a.jsxs("div", { className: "flex items-center", children: [
         /* @__PURE__ */ a.jsx(
           "input",
-          k({
+          N({
             type: "radio",
             id: g,
-            ref: m,
-            className: L,
+            ref: b,
+            className: S,
             disabled: n,
-            "aria-invalid": t,
-            "aria-describedby": i || f || void 0,
-            "aria-label": s ? void 0 : "Radio button"
+            "aria-invalid": r,
+            "aria-describedby": l || f || void 0,
+            "aria-label": t ? void 0 : "Radio button"
           }, c)
         ),
-        s && /* @__PURE__ */ a.jsx("label", { htmlFor: g, className: E, children: s })
+        t && /* @__PURE__ */ a.jsx("label", { htmlFor: g, className: k, children: t })
       ] }),
-      (t || o) && /* @__PURE__ */ a.jsx(
+      (r || o) && /* @__PURE__ */ a.jsx(
         "div",
         {
-          id: i || f,
+          id: l || f,
           className: e(
             u("xs", "mt"),
-            z("caption"),
-            t ? "text-fg-error" : h("neutral", "DEFAULT", "text")
+            T("caption"),
+            r ? "text-fg-error" : "text-fg-secondary"
           ),
-          role: t ? "alert" : void 0,
-          children: t ? o || "This field has an error" : o
+          role: r ? "alert" : void 0,
+          children: r ? o || "This field has an error" : o
         }
       )
     ] });
   })
 );
-et.displayName = "Radio";
-const tt = H("w-full", {
+Ye.displayName = "Radio";
+const Ge = H("w-full", {
   variants: {
     size: {
       sm: "h-1",
@@ -1920,19 +1918,19 @@ const tt = H("w-full", {
       lg: "h-3"
     },
     variant: {
-      primary: h("neutral", "light", "bg"),
-      secondary: h("neutral", "light", "bg"),
-      success: "bg-green-300",
-      error: "bg-red-300",
-      warning: "bg-yellow-300",
-      info: "bg-blue-300"
+      primary: "bg-surface-muted",
+      secondary: "bg-surface-muted",
+      success: "bg-success-bg-emphasis",
+      error: "bg-error-bg-emphasis",
+      warning: "bg-warning-bg-emphasis",
+      info: "bg-info-bg-emphasis"
     }
   },
   defaultVariants: {
     size: "md",
     variant: "primary"
   }
-}), je = H("transition-all", {
+}), ve = H("transition-all", {
   variants: {
     variant: {
       primary: "bg-surface-brand",
@@ -1946,17 +1944,17 @@ const tt = H("w-full", {
   defaultVariants: {
     variant: "primary"
   }
-}), rt = O(function(g, x) {
-  var i = g, {
-    value: r,
-    max: s = 100,
-    variant: t = "primary",
+}), Ke = O(function(g, x) {
+  var l = g, {
+    value: s,
+    max: t = 100,
+    variant: r = "primary",
     size: o = "md",
-    showLabel: l = !1,
+    showLabel: i = !1,
     label: n,
     "aria-label": c,
-    className: m = ""
-  } = i, p = C(i, [
+    className: b = ""
+  } = l, p = C(l, [
     "value",
     "max",
     "variant",
@@ -1966,9 +1964,9 @@ const tt = H("w-full", {
     "aria-label",
     "className"
   ]);
-  const f = r === void 0, y = f ? void 0 : Math.min(Math.max(r / s * 100, 0), 100), w = c || (f ? "Loading in progress" : `Progress: ${y == null ? void 0 : y.toFixed(0)}%`);
-  return /* @__PURE__ */ a.jsxs("div", $(k({ ref: x, className: e("w-full", m) }, p), { children: [
-    l && (n || !f) && /* @__PURE__ */ a.jsxs(
+  const f = s === void 0, y = f ? void 0 : Math.min(Math.max(s / t * 100, 0), 100), h = c || (f ? "Loading in progress" : `Progress: ${y == null ? void 0 : y.toFixed(0)}%`);
+  return /* @__PURE__ */ a.jsxs("div", R(N({ ref: x, className: e("w-full", b) }, p), { children: [
+    i && (n || !f) && /* @__PURE__ */ a.jsxs(
       "div",
       {
         className: e(
@@ -1982,9 +1980,9 @@ const tt = H("w-full", {
             "span",
             {
               className: e(
-                F("bodySmall"),
+                E("bodySmall"),
                 ie("label"),
-                h("neutral", "dark", "text")
+                "text-fg-primary"
               ),
               children: n
             }
@@ -1993,8 +1991,8 @@ const tt = H("w-full", {
             "span",
             {
               className: e(
-                F("bodySmall"),
-                h("neutral", "DEFAULT", "text")
+                E("bodySmall"),
+                "text-fg-secondary"
               ),
               children: [
                 y.toFixed(0),
@@ -2010,16 +2008,16 @@ const tt = H("w-full", {
       {
         role: "progressbar",
         "aria-valuemin": f ? void 0 : 0,
-        "aria-valuemax": f ? void 0 : s,
-        "aria-valuenow": f ? void 0 : r,
-        "aria-label": w,
+        "aria-valuemax": f ? void 0 : t,
+        "aria-valuenow": f ? void 0 : s,
+        "aria-label": h,
         "aria-busy": f,
         className: e(
           "relative",
           "w-full",
           "overflow-hidden",
-          tt({ size: o, variant: t }),
-          M("full")
+          Ge({ size: o, variant: r }),
+          z("full")
         ),
         children: f ? /* @__PURE__ */ a.jsx(
           "div",
@@ -2029,8 +2027,8 @@ const tt = H("w-full", {
               "top-0",
               "left-0",
               "bottom-0",
-              je({ variant: t }),
-              M("full"),
+              ve({ variant: r }),
+              z("full"),
               "motion-reduce:animate-none"
             ),
             style: {
@@ -2043,8 +2041,8 @@ const tt = H("w-full", {
           {
             className: e(
               "h-full",
-              je({ variant: t }),
-              M("full"),
+              ve({ variant: r }),
+              z("full"),
               "transition-all",
               "duration-300",
               "ease-out"
@@ -2059,18 +2057,18 @@ const tt = H("w-full", {
     )
   ] }));
 });
-rt.displayName = "Progress";
-const st = _(
-  O(function(i, g) {
-    var f = i, {
-      size: r = "md",
-      label: s,
-      description: t,
+Ke.displayName = "Progress";
+const er = U(
+  O(function(l, g) {
+    var f = l, {
+      size: s = "md",
+      label: t,
+      description: r,
       error: o = !1,
-      className: l = "",
+      className: i = "",
       disabled: n = !1,
       checked: c,
-      onChange: m,
+      onChange: b,
       id: p
     } = f, x = C(f, [
       "size",
@@ -2086,16 +2084,16 @@ const st = _(
     const y = d(
       () => p || `switch-${Math.random().toString(36).substr(2, 9)}`,
       [p]
-    ), w = d(
-      () => s ? `${y}-label` : void 0,
-      [s, y]
-    ), N = d(
-      () => t ? `${y}-description` : void 0,
+    ), h = d(
+      () => t ? `${y}-label` : void 0,
       [t, y]
-    ), L = d(() => $e(r), [r]), E = d(
+    ), j = d(
+      () => r ? `${y}-description` : void 0,
+      [r, y]
+    ), S = d(() => Fe(s), [s]), k = d(
       () => "focus:border-line-focus".replace("focus:border-", "focus:ring-"),
       []
-    ), S = d(
+    ), L = d(
       () => e(
         "relative",
         "inline-flex",
@@ -2104,31 +2102,31 @@ const st = _(
         "rounded-full",
         "border-2",
         "border-transparent",
-        me("base"),
+        fe("base"),
         "focus:outline-none",
         "focus:ring-2",
-        E,
+        k,
         "focus:ring-offset-2",
-        L.track,
-        c ? "bg-surface-brand" : h("neutral", "light", "bg"),
+        S.track,
+        c ? "bg-surface-brand" : "bg-surface-muted",
         o && !c && "border-error",
         n && "opacity-50 cursor-not-allowed",
-        l
+        i
       ),
-      [E, L.track, c, o, n, l]
-    ), R = d(
+      [k, S.track, c, o, n, i]
+    ), A = d(
       () => e(
         "pointer-events-none",
         "inline-block",
         "rounded-full",
-        "bg-white",
+        "bg-surface-base",
         "shadow",
         "transform",
-        me("base"),
-        L.thumb,
-        c ? L.translate : "translate-x-0"
+        fe("base"),
+        S.thumb,
+        c ? S.translate : "translate-x-0"
       ),
-      [L.thumb, L.translate, c]
+      [S.thumb, S.translate, c]
     );
     return /* @__PURE__ */ a.jsxs("div", { className: e("flex", "items-start", u("md", "gap")), children: [
       /* @__PURE__ */ a.jsxs("div", { className: "flex items-center", children: [
@@ -2136,102 +2134,99 @@ const st = _(
           "button",
           {
             type: "button",
-            className: S,
+            className: L,
             role: "switch",
             "aria-checked": c,
-            "aria-labelledby": w,
-            "aria-describedby": N,
+            "aria-labelledby": h,
+            "aria-describedby": j,
             disabled: n,
-            onClick: W(
+            onClick: _(
               (v) => {
-                if (!n && m) {
-                  const D = $(k({}, v), {
-                    target: $(k({}, v.target), { checked: !c }),
-                    currentTarget: $(k({}, v.currentTarget), { checked: !c })
+                if (!n && b) {
+                  const F = R(N({}, v), {
+                    target: R(N({}, v.target), { checked: !c }),
+                    currentTarget: R(N({}, v.currentTarget), { checked: !c })
                   });
-                  m(D);
+                  b(F);
                 }
               },
-              [n, m, c]
+              [n, b, c]
             ),
-            onKeyDown: W(
+            onKeyDown: _(
               (v) => {
-                if ((v.key === "Enter" || v.key === " ") && !n && m) {
+                if ((v.key === "Enter" || v.key === " ") && !n && b) {
                   v.preventDefault();
-                  const D = $(k({}, v), {
-                    target: $(k({}, v.target), { checked: !c }),
-                    currentTarget: $(k({}, v.currentTarget), { checked: !c })
+                  const F = R(N({}, v), {
+                    target: R(N({}, v.target), { checked: !c }),
+                    currentTarget: R(N({}, v.currentTarget), { checked: !c })
                   });
-                  m(D);
+                  b(F);
                 }
               },
-              [n, m, c]
+              [n, b, c]
             ),
-            children: /* @__PURE__ */ a.jsx("span", { className: R })
+            children: /* @__PURE__ */ a.jsx("span", { className: A })
           }
         ),
         /* @__PURE__ */ a.jsx(
           "input",
-          k({
+          N({
             ref: g,
             type: "checkbox",
             id: y,
             checked: c,
-            onChange: m,
+            onChange: b,
             disabled: n,
             className: "sr-only",
             "aria-hidden": "true"
           }, x)
         )
       ] }),
-      (s || t) && /* @__PURE__ */ a.jsxs("div", { className: "flex-1", children: [
-        s && /* @__PURE__ */ a.jsx(
+      (t || r) && /* @__PURE__ */ a.jsxs("div", { className: "flex-1", children: [
+        t && /* @__PURE__ */ a.jsx(
           "label",
           {
-            id: w,
+            id: h,
             htmlFor: y,
             className: e(
               "block",
-              F("bodySmall"),
+              E("bodySmall"),
               ie("label"),
-              o ? "text-fg-error" : h("neutral", "dark", "text"),
+              o ? "text-fg-error" : "text-fg-primary",
               n ? "opacity-50" : "cursor-pointer"
             ),
-            children: s
+            children: t
           }
         ),
-        t && /* @__PURE__ */ a.jsx(
+        r && /* @__PURE__ */ a.jsx(
           "p",
           {
-            id: N,
+            id: j,
             className: e(
               u("xs", "mt"),
-              F("bodySmall"),
-              o ? "text-fg-error" : h("neutral", "DEFAULT", "text")
+              E("bodySmall"),
+              o ? "text-fg-error" : "text-fg-secondary"
             ),
-            children: t
+            children: r
           }
         )
       ] })
     ] });
   })
 );
-st.displayName = "Switch";
-const at = _(function(l) {
-  var n = l, {
-    orientation: r = "horizontal",
-    variant: s = "solid",
-    className: t = ""
+er.displayName = "Switch";
+const rr = U(function(i) {
+  var n = i, {
+    orientation: s = "horizontal",
+    variant: t = "solid",
+    className: r = ""
   } = n, o = C(n, [
     "orientation",
     "variant",
     "className"
   ]);
   const c = d(() => {
-    const m = [
-      "border-0",
-      h("neutral", "DEFAULT", "border")
-    ], p = {
+    const b = ["border-0", "border-line-default"], p = {
       horizontal: "w-full border-t",
       vertical: "h-full border-l self-stretch"
     }, x = {
@@ -2240,46 +2235,46 @@ const at = _(function(l) {
       dotted: "border-dotted"
     };
     return e(
-      ...m,
-      p[r],
-      x[s],
-      t
+      ...b,
+      p[s],
+      x[t],
+      r
     );
-  }, [r, s, t]);
-  return r === "vertical" ? /* @__PURE__ */ a.jsx(
+  }, [s, t, r]);
+  return s === "vertical" ? /* @__PURE__ */ a.jsx(
     "div",
-    k({
+    N({
       className: c,
       role: "separator",
       "aria-orientation": "vertical"
     }, o)
   ) : /* @__PURE__ */ a.jsx(
     "hr",
-    k({
+    N({
       className: c,
       role: "separator",
       "aria-orientation": "horizontal"
     }, o)
   );
 });
-at.displayName = "Separator";
-const nt = O(function(L, N) {
-  var E = L, {
-    value: r,
-    defaultValue: s,
-    min: t = 0,
+rr.displayName = "Separator";
+const sr = O(function(S, j) {
+  var k = S, {
+    value: s,
+    defaultValue: t,
+    min: r = 0,
     max: o = 100,
-    step: l = 1,
+    step: i = 1,
     variant: n = "single",
     size: c = "md",
-    disabled: m = !1,
+    disabled: b = !1,
     showValue: p = !1,
     marks: x = [],
     onChange: g,
-    onValueChange: i,
+    onValueChange: l,
     label: f,
     className: y = ""
-  } = E, w = C(E, [
+  } = k, h = C(k, [
     "value",
     "defaultValue",
     "min",
@@ -2295,39 +2290,39 @@ const nt = O(function(L, N) {
     "label",
     "className"
   ]);
-  const S = ae(null), [R, v] = G(
-    s || (n === "range" ? [t, o] : t)
-  ), [D, X] = G(!1), [P, J] = G(null), T = r !== void 0, j = T ? r : R, B = (V) => (V - t) / (o - t) * 100, A = (V) => {
-    if (!S.current) return t;
-    const q = S.current.getBoundingClientRect(), I = Math.max(
+  const L = te(null), [A, v] = Y(
+    t || (n === "range" ? [r, o] : r)
+  ), [F, W] = Y(!1), [P, Z] = Y(null), V = s !== void 0, w = V ? s : A, B = (I) => (I - r) / (o - r) * 100, $ = (I) => {
+    if (!L.current) return r;
+    const q = L.current.getBoundingClientRect(), D = Math.max(
       0,
-      Math.min(1, (V - q.left) / q.width)
-    ), Q = t + I * (o - t);
-    return Math.round(Q / l) * l;
-  }, U = (V, q = "min") => {
-    if (m) return;
-    V.preventDefault(), X(!0), J(q);
-    const I = (K) => {
-      if (!S.current) return;
-      const Z = A(K.clientX);
-      oe(Z, q);
-    }, Q = () => {
-      X(!1), J(null), document.removeEventListener("mousemove", I), document.removeEventListener("mouseup", Q);
+      Math.min(1, (I - q.left) / q.width)
+    ), J = r + D * (o - r);
+    return Math.round(J / i) * i;
+  }, M = (I, q = "min") => {
+    if (b) return;
+    I.preventDefault(), W(!0), Z(q);
+    const D = (G) => {
+      if (!L.current) return;
+      const X = $(G.clientX);
+      ne(X, q);
+    }, J = () => {
+      W(!1), Z(null), document.removeEventListener("mousemove", D), document.removeEventListener("mouseup", J);
     };
-    document.addEventListener("mousemove", I), document.addEventListener("mouseup", Q);
-  }, oe = (V, q = "min") => {
-    const I = Math.max(t, Math.min(o, V));
+    document.addEventListener("mousemove", D), document.addEventListener("mouseup", J);
+  }, ne = (I, q = "min") => {
+    const D = Math.max(r, Math.min(o, I));
     if (n === "range") {
-      const [Q, K] = Array.isArray(j) ? j : [t, o];
-      let Z;
-      q === "min" ? Z = [Math.min(I, K), K] : Z = [Q, Math.max(I, Q)], T || v(Z), g == null || g(Z), i == null || i(Z);
+      const [J, G] = Array.isArray(w) ? w : [r, o];
+      let X;
+      q === "min" ? X = [Math.min(D, G), G] : X = [J, Math.max(D, J)], V || v(X), g == null || g(X), l == null || l(X);
     } else
-      T || v(I), g == null || g(I), i == null || i(I);
-  }, ce = (V) => {
-    if (m || D) return;
-    const q = A(V.clientX);
-    oe(q);
-  }, de = () => "focus:ring-line-brand ring-offset-2", ue = H(e("relative", "cursor-pointer"), {
+      V || v(D), g == null || g(D), l == null || l(D);
+  }, le = (I) => {
+    if (b || F) return;
+    const q = $(I.clientX);
+    ne(q);
+  }, ce = () => "focus:ring-line-brand ring-offset-2", de = H(e("relative", "cursor-pointer"), {
     variants: {
       size: {
         sm: "h-1",
@@ -2353,7 +2348,7 @@ const nt = O(function(L, N) {
       "shadow-md",
       "cursor-grab",
       "active:cursor-grabbing",
-      me("base"),
+      fe("base"),
       "-translate-x-1/2",
       "-translate-y-1/2",
       "top-1/2"
@@ -2366,7 +2361,7 @@ const nt = O(function(L, N) {
           lg: "w-5 h-5"
         },
         active: {
-          true: de(),
+          true: ce(),
           false: ""
         }
       },
@@ -2375,16 +2370,16 @@ const nt = O(function(L, N) {
         active: !1
       }
     }
-  ), se = typeof j == "number" ? j : j[0], ee = Array.isArray(j) ? j[0] : t, te = Array.isArray(j) ? j[1] : se, Y = B(ee), le = B(te);
-  return /* @__PURE__ */ a.jsxs("div", $(k({ ref: N, className: e("w-full", y) }, w), { children: [
+  ), se = typeof w == "number" ? w : w[0], K = Array.isArray(w) ? w[0] : r, ee = Array.isArray(w) ? w[1] : se, Q = B(K), oe = B(ee);
+  return /* @__PURE__ */ a.jsxs("div", R(N({ ref: j, className: e("w-full", y) }, h), { children: [
     f && /* @__PURE__ */ a.jsxs(
       "label",
       {
         className: e(
           "block",
-          F("bodySmall"),
+          E("bodySmall"),
           ie("label"),
-          h("neutral", "dark", "text"),
+          "text-fg-primary",
           u("sm", "mb")
         ),
         children: [
@@ -2392,11 +2387,8 @@ const nt = O(function(L, N) {
           p && /* @__PURE__ */ a.jsx(
             "span",
             {
-              className: e(
-                u("sm", "ml"),
-                h("neutral", "DEFAULT", "text")
-              ),
-              children: n === "range" ? `${ee} - ${te}` : se
+              className: e(u("sm", "ml"), "text-fg-secondary"),
+              children: n === "range" ? `${K} - ${ee}` : se
             }
           )
         ]
@@ -2405,18 +2397,18 @@ const nt = O(function(L, N) {
     /* @__PURE__ */ a.jsxs(
       "div",
       {
-        ref: S,
+        ref: L,
         className: e(
-          ue({ size: c, disabled: m }),
-          h("neutral", "light", "bg"),
-          M("full")
+          de({ size: c, disabled: b }),
+          "bg-surface-muted",
+          z("full")
         ),
-        onClick: ce,
+        onClick: le,
         role: n === "range" ? void 0 : "slider",
-        "aria-valuemin": n === "range" ? void 0 : t,
+        "aria-valuemin": n === "range" ? void 0 : r,
         "aria-valuemax": n === "range" ? void 0 : o,
         "aria-valuenow": n === "range" ? void 0 : se,
-        "aria-disabled": n === "range" ? void 0 : m,
+        "aria-disabled": n === "range" ? void 0 : b,
         "aria-label": n === "range" ? void 0 : f,
         children: [
           /* @__PURE__ */ a.jsx(
@@ -2424,19 +2416,19 @@ const nt = O(function(L, N) {
             {
               className: e(
                 "absolute",
-                ue({ size: c }),
+                de({ size: c }),
                 "bg-surface-brand",
-                M("full"),
-                me("base")
+                z("full"),
+                fe("base")
               ),
               style: {
-                left: `${Y}%`,
-                width: `${le - Y}%`
+                left: `${Q}%`,
+                width: `${oe - Q}%`
               }
             }
           ),
-          x.map((V) => {
-            const q = B(V);
+          x.map((I) => {
+            const q = B(I);
             return /* @__PURE__ */ a.jsx(
               "div",
               {
@@ -2444,8 +2436,8 @@ const nt = O(function(L, N) {
                   "absolute",
                   "w-1",
                   "h-1",
-                  h("neutral", "DEFAULT", "bg"),
-                  M("full"),
+                  "bg-line-strong",
+                  z("full"),
                   "-translate-x-1/2"
                 ),
                 style: {
@@ -2454,7 +2446,7 @@ const nt = O(function(L, N) {
                   transform: "translate(-50%, -50%)"
                 }
               },
-              V
+              I
             );
           }),
           n === "range" ? /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
@@ -2464,12 +2456,12 @@ const nt = O(function(L, N) {
                 className: e(
                   re({ size: c, active: P === "min" })
                 ),
-                style: { left: `${Y}%` },
-                onMouseDown: (V) => U(V, "min"),
+                style: { left: `${Q}%` },
+                onMouseDown: (I) => M(I, "min"),
                 role: "slider",
-                "aria-valuemin": t,
-                "aria-valuemax": te,
-                "aria-valuenow": ee
+                "aria-valuemin": r,
+                "aria-valuemax": ee,
+                "aria-valuenow": K
               }
             ),
             /* @__PURE__ */ a.jsx(
@@ -2478,35 +2470,35 @@ const nt = O(function(L, N) {
                 className: e(
                   re({ size: c, active: P === "max" })
                 ),
-                style: { left: `${le}%` },
-                onMouseDown: (V) => U(V, "max"),
+                style: { left: `${oe}%` },
+                onMouseDown: (I) => M(I, "max"),
                 role: "slider",
-                "aria-valuemin": ee,
+                "aria-valuemin": K,
                 "aria-valuemax": o,
-                "aria-valuenow": te
+                "aria-valuenow": ee
               }
             )
           ] }) : /* @__PURE__ */ a.jsx(
             "div",
             {
-              className: e(re({ size: c, active: D })),
-              style: { left: `${le}%` },
-              onMouseDown: (V) => U(V)
+              className: e(re({ size: c, active: F })),
+              style: { left: `${oe}%` },
+              onMouseDown: (I) => M(I)
             }
           ),
           p && !f && /* @__PURE__ */ a.jsx("div", { className: "absolute -top-6 left-0 right-0 flex justify-center", children: /* @__PURE__ */ a.jsx(
             "span",
             {
               className: e(
-                F("caption"),
-                h("neutral", "DEFAULT", "text"),
-                "bg-white",
+                E("caption"),
+                "text-fg-secondary",
+                "bg-surface-overlay",
                 u("sm", "px"),
                 u("xs", "py"),
-                M("md"),
+                z("md"),
                 "shadow"
               ),
-              children: n === "range" ? `${ee} - ${te}` : se
+              children: n === "range" ? `${K} - ${ee}` : se
             }
           ) })
         ]
@@ -2514,34 +2506,34 @@ const nt = O(function(L, N) {
     )
   ] }));
 });
-nt.displayName = "Slider";
-const ot = H(
+sr.displayName = "Slider";
+const tr = H(
   // Base classes
   e(
     "inline-flex",
     "items-center",
     "font-medium",
-    M("full"),
+    z("full"),
     u("xs", "gap")
   ),
   {
     variants: {
       variant: {
         default: e(
-          h("neutral", "light", "bg"),
-          h("neutral", "dark", "text"),
+          "bg-surface-muted",
+          "text-fg-primary",
           "border",
-          h("neutral", "DEFAULT", "border")
+          "border-line-default"
         ),
         outlined: e(
           "bg-transparent",
-          h("neutral", "dark", "text"),
+          "text-fg-primary",
           "border",
-          h("neutral", "DEFAULT", "border")
+          "border-line-default"
         ),
         filled: e(
           "bg-surface-brand",
-          "text-white",
+          "text-fg-inverse",
           "border",
           "border-transparent"
         )
@@ -2550,23 +2542,23 @@ const ot = H(
         sm: e(
           u("xs", "px"),
           u("xs", "py"),
-          F("caption")
+          E("caption")
         ),
         md: e(
           u("sm", "px"),
           u("xs", "py"),
-          F("bodySmall")
+          E("bodySmall")
         ),
         lg: e(
           u("md", "px"),
           u("sm", "py"),
-          F("body")
+          E("body")
         )
       },
       selected: {
         true: e(
           "bg-surface-brand",
-          "text-white",
+          "text-fg-inverse",
           "border",
           "border-line-brand"
         ),
@@ -2604,16 +2596,16 @@ const ot = H(
       disabled: !1
     }
   }
-), lt = O(function(f, i) {
+), ar = O(function(f, l) {
   var y = f, {
-    children: r,
-    variant: s = "default",
-    size: t = "md",
+    children: s,
+    variant: t = "default",
+    size: r = "md",
     onRemove: o,
-    selected: l = !1,
+    selected: i = !1,
     disabled: n = !1,
     className: c = "",
-    "aria-label": m,
+    "aria-label": b,
     onClick: p,
     tabIndex: x
   } = y, g = C(y, [
@@ -2628,37 +2620,37 @@ const ot = H(
     "onClick",
     "tabIndex"
   ]);
-  const w = p !== void 0 || l !== !1 && l !== void 0, N = l ? "option" : w ? "button" : void 0, E = (() => {
-    if (m) return m;
-    if (typeof r == "string") return r;
-    if (typeof r == "object" && r !== null && "props" in r) {
-      const v = r.props;
+  const h = p !== void 0 || i !== !1 && i !== void 0, j = i ? "option" : h ? "button" : void 0, k = (() => {
+    if (b) return b;
+    if (typeof s == "string") return s;
+    if (typeof s == "object" && s !== null && "props" in s) {
+      const v = s.props;
       if (v != null && v.children && typeof v.children == "string")
         return v.children;
     }
-  })(), S = N === "button" && !E, R = (v) => {
+  })(), L = j === "button" && !k, A = (v) => {
     n || (v.key === "Enter" || v.key === " ") && (v.preventDefault(), p && p());
   };
   return /* @__PURE__ */ a.jsxs(
     "div",
-    $(k({
-      ref: i,
+    R(N({
+      ref: l,
       className: e(
-        ot({ variant: s, size: t, selected: l, disabled: n }),
+        tr({ variant: t, size: r, selected: i, disabled: n }),
         o && u("xs", "pr"),
-        w && !n && "cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2",
+        h && !n && "cursor-pointer focus:outline-none focus:ring-2 focus:ring-line-focus focus:ring-offset-2",
         c
       ),
-      role: N,
-      "aria-selected": l ? !0 : void 0,
+      role: j,
+      "aria-selected": i ? !0 : void 0,
       "aria-disabled": n,
-      "aria-label": S ? "Chip" : m || (N === "button" ? E : void 0),
-      tabIndex: x !== void 0 ? x : w && !n ? 0 : void 0,
+      "aria-label": L ? "Chip" : b || (j === "button" ? k : void 0),
+      tabIndex: x !== void 0 ? x : h && !n ? 0 : void 0,
       onClick: n ? void 0 : p,
-      onKeyDown: R
+      onKeyDown: A
     }, g), {
       children: [
-        /* @__PURE__ */ a.jsx("span", { children: r }),
+        /* @__PURE__ */ a.jsx("span", { children: s }),
         o && !n && /* @__PURE__ */ a.jsx(
           "button",
           {
@@ -2668,34 +2660,34 @@ const ot = H(
             },
             className: e(
               u("xs", "ml"),
-              "hover:bg-black/10",
-              M("full"),
+              "hover:bg-tint-hover",
+              z("full"),
               u("xs", "p"),
               "transition-colors",
               "focus:outline-none",
               "focus:ring-2",
-              "focus:ring-indigo-500",
+              "focus:ring-line-focus",
               "focus:ring-offset-1"
             ),
-            "aria-label": `Remove ${E || "chip"}`,
-            children: /* @__PURE__ */ a.jsx(Ne, { className: "h-3 w-3", "aria-hidden": "true" })
+            "aria-label": `Remove ${k || "chip"}`,
+            children: /* @__PURE__ */ a.jsx(he, { className: "h-3 w-3", "aria-hidden": "true" })
           }
         )
       ]
     })
   );
 });
-lt.displayName = "Chip";
-const xe = O(function(x, p) {
+ar.displayName = "Chip";
+const be = O(function(x, p) {
   var g = x, {
-    src: r,
-    alt: s,
-    fallback: t,
+    src: s,
+    alt: t,
+    fallback: r,
     size: o = "md",
-    variant: l = "circle",
+    variant: i = "circle",
     "aria-label": n,
     className: c = ""
-  } = g, m = C(g, [
+  } = g, b = C(g, [
     "src",
     "alt",
     "fallback",
@@ -2704,20 +2696,20 @@ const xe = O(function(x, p) {
     "aria-label",
     "className"
   ]);
-  const [i, f] = G(!1), [y, w] = G(!1), N = {
+  const [l, f] = Y(!1), [y, h] = Y(!1), j = {
     xs: "h-6 w-6 text-xs",
     sm: "h-8 w-8 text-sm",
     md: "h-10 w-10 text-base",
     lg: "h-12 w-12 text-lg",
     xl: "h-16 w-16 text-xl"
-  }, L = {
+  }, S = {
     circle: "rounded-full",
     square: "rounded-none",
     rounded: "rounded-md"
-  }, E = !r || i, S = typeof t == "string" ? t.toUpperCase().slice(0, 2) : t, R = n || s || "User avatar";
+  }, k = !s || l, L = typeof r == "string" ? r.toUpperCase().slice(0, 2) : r, A = n || t || "User avatar";
   return /* @__PURE__ */ a.jsxs(
     "div",
-    $(k({
+    R(N({
       ref: p,
       className: e(
         "relative",
@@ -2727,38 +2719,38 @@ const xe = O(function(x, p) {
         "shrink-0",
         "font-medium",
         "overflow-hidden",
-        N[o],
-        L[l],
-        h("neutral", "light", "bg"),
-        h("neutral", "dark", "text"),
+        j[o],
+        S[i],
+        "bg-surface-muted",
+        "text-fg-primary",
         c
       ),
       role: "img",
-      "aria-label": R
-    }, m), {
+      "aria-label": A
+    }, b), {
       children: [
-        !E && r && /* @__PURE__ */ a.jsx(
+        !k && s && /* @__PURE__ */ a.jsx(
           "img",
           {
-            src: r,
-            alt: s || "",
+            src: s,
+            alt: t || "",
             className: e(
               "w-full",
               "h-full",
               "object-cover",
-              l === "circle" ? "rounded-full" : l === "square" ? "rounded-none" : "rounded-md",
+              i === "circle" ? "rounded-full" : i === "square" ? "rounded-none" : "rounded-md",
               y ? "opacity-100" : "opacity-0",
               "transition-opacity",
               "duration-200"
             ),
-            onLoad: () => w(!0),
+            onLoad: () => h(!0),
             onError: () => {
-              f(!0), w(!1);
+              f(!0), h(!1);
             },
             "aria-hidden": "true"
           }
         ),
-        E && /* @__PURE__ */ a.jsx(
+        k && /* @__PURE__ */ a.jsx(
           "span",
           {
             className: e(
@@ -2767,26 +2759,26 @@ const xe = O(function(x, p) {
               "justify-center",
               "w-full",
               "h-full",
-              l === "circle" ? "rounded-full" : l === "square" ? "rounded-none" : "rounded-md"
+              i === "circle" ? "rounded-full" : i === "square" ? "rounded-none" : "rounded-md"
             ),
             "aria-hidden": "true",
-            children: S || "?"
+            children: L || "?"
           }
         )
       ]
     })
   );
 });
-xe.displayName = "Avatar";
-function vt(c) {
-  var m = c, {
-    children: b,
-    max: r = 3,
-    size: s = "md",
-    variant: t = "circle",
+be.displayName = "Avatar";
+function pr(c) {
+  var b = c, {
+    children: m,
+    max: s = 3,
+    size: t = "md",
+    variant: r = "circle",
     spacing: o = "md",
-    className: l = ""
-  } = m, n = C(m, [
+    className: i = ""
+  } = b, n = C(b, [
     "children",
     "max",
     "size",
@@ -2799,45 +2791,45 @@ function vt(c) {
     sm: "-space-x-1",
     md: "-space-x-2",
     lg: "-space-x-3"
-  }, x = Me.toArray(b).filter(Boolean), g = x.slice(0, r), i = x.length - r;
+  }, x = Me.toArray(m).filter(Boolean), g = x.slice(0, s), l = x.length - s;
   return /* @__PURE__ */ a.jsxs(
     "div",
-    $(k({
-      className: e("flex", "items-center", p[o], l),
+    R(N({
+      className: e("flex", "items-center", p[o], i),
       role: "group",
       "aria-label": `${x.length} avatars`
     }, n), {
       children: [
         g.map((f, y) => {
-          let w = f;
-          if (ke(f) && f.type === xe) {
-            const N = f.props;
-            w = Ee(
+          let h = f;
+          if (we(f) && f.type === be) {
+            const j = f.props;
+            h = je(
               f,
               {
-                size: N.size || s,
-                variant: N.variant || t
+                size: j.size || t,
+                variant: j.variant || r
               }
             );
           }
           return /* @__PURE__ */ a.jsx(
             "div",
             {
-              className: "ring-2 ring-white",
+              className: "ring-2 ring-surface-base",
               style: { zIndex: x.length - y },
-              children: w
+              children: h
             },
             y
           );
         }),
-        i > 0 && /* @__PURE__ */ a.jsx(
-          xe,
+        l > 0 && /* @__PURE__ */ a.jsx(
+          be,
           {
-            size: s,
-            variant: t,
-            fallback: `+${i}`,
-            "aria-label": `${i} more avatars`,
-            className: "ring-2 ring-white",
+            size: t,
+            variant: r,
+            fallback: `+${l}`,
+            "aria-label": `${l} more avatars`,
+            className: "ring-2 ring-surface-base",
             style: { zIndex: 0 }
           }
         )
@@ -2846,29 +2838,29 @@ function vt(c) {
   );
 }
 export {
-  xe as Avatar,
-  vt as AvatarGroup,
-  Xe as Badge,
-  pe as Button,
-  Ke as Checkbox,
-  lt as Chip,
-  yt as Collapsible,
-  gt as ErrorMessage,
-  ft as Info,
-  qe as Input,
-  Ye as Label,
-  mt as NavLink,
-  rt as Progress,
-  et as Radio,
-  Je as Select,
-  at as Separator,
-  xt as Skeleton,
-  nt as Slider,
-  Le as Spinner,
-  st as Switch,
-  bt as Text,
-  Qe as Textarea,
-  pt as Tooltip,
-  He as useNavLink
+  be as Avatar,
+  pr as AvatarGroup,
+  Ue as Badge,
+  me as Button,
+  Qe as Checkbox,
+  ar as Chip,
+  gr as Collapsible,
+  fr as ErrorMessage,
+  cr as Info,
+  Be as Input,
+  Ze as Label,
+  ur as NavLink,
+  Ke as Progress,
+  Ye as Radio,
+  We as Select,
+  rr as Separator,
+  br as Skeleton,
+  sr as Slider,
+  Ne as Spinner,
+  er as Switch,
+  dr as Text,
+  Xe as Textarea,
+  mr as Tooltip,
+  Oe as useNavLink
 };
 //# sourceMappingURL=index.js.map