@fabio.caffarello/react-design-system 4.0.0 → 4.2.0

package/dist/server/index.js

@@ -1,38 +1,38 @@
-var le = Object.defineProperty, oe = Object.defineProperties;
-var ce = Object.getOwnPropertyDescriptors;
-var P = Object.getOwnPropertySymbols;
-var X = Object.prototype.hasOwnProperty, q = Object.prototype.propertyIsEnumerable;
-var O = (e, t, r) => t in e ? le(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, u = (e, t) => {
-  for (var r in t || (t = {}))
-    X.call(t, r) && O(e, r, t[r]);
-  if (P)
-    for (var r of P(t))
-      q.call(t, r) && O(e, r, t[r]);
+var ge = Object.defineProperty, xe = Object.defineProperties;
+var be = Object.getOwnPropertyDescriptors;
+var K = Object.getOwnPropertySymbols;
+var ee = Object.prototype.hasOwnProperty, ae = Object.prototype.propertyIsEnumerable;
+var G = (e, a, r) => a in e ? ge(e, a, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[a] = r, u = (e, a) => {
+  for (var r in a || (a = {}))
+    ee.call(a, r) && G(e, r, a[r]);
+  if (K)
+    for (var r of K(a))
+      ae.call(a, r) && G(e, r, a[r]);
   return e;
-}, y = (e, t) => oe(e, ce(t));
-var m = (e, t) => {
+}, y = (e, a) => xe(e, be(a));
+var h = (e, a) => {
   var r = {};
-  for (var a in e)
-    X.call(e, a) && t.indexOf(a) < 0 && (r[a] = e[a]);
-  if (e != null && P)
-    for (var a of P(e))
-      t.indexOf(a) < 0 && q.call(e, a) && (r[a] = e[a]);
+  for (var t in e)
+    ee.call(e, t) && a.indexOf(t) < 0 && (r[t] = e[t]);
+  if (e != null && K)
+    for (var t of K(e))
+      a.indexOf(t) < 0 && ae.call(e, t) && (r[t] = e[t]);
   return r;
 };
-var G = (e, t, r) => O(e, typeof t != "symbol" ? t + "" : t, r);
-import { jsx as l, jsxs as v } from "react/jsx-runtime";
-import * as T from "react";
-import ae, { memo as H, forwardRef as D } from "react";
-import { clsx as de } from "clsx";
-import { twMerge as ue } from "tailwind-merge";
-import { cva as fe } from "class-variance-authority";
-import { X as pe, AlertCircle as me, Loader2 as ge, CheckCircle2 as Y } from "lucide-react";
-class F {
+var te = (e, a, r) => G(e, typeof a != "symbol" ? a + "" : a, r);
+import { jsx as l, jsxs as v, Fragment as re } from "react/jsx-runtime";
+import * as A from "react";
+import ce, { memo as H, forwardRef as _ } from "react";
+import { clsx as he } from "clsx";
+import { twMerge as ye } from "tailwind-merge";
+import { cva as ve } from "class-variance-authority";
+import { Loader2 as we, X as Ne, AlertCircle as Se, CheckCircle2 as ne } from "lucide-react";
+class j {
   /**
    * Create a radius token
    */
-  static create(t) {
-    const a = {
+  static create(a) {
+    const t = {
       none: {
         px: 0,
         tailwind: "rounded-none",
@@ -73,47 +73,47 @@ class F {
         tailwind: "rounded-full",
         description: "Full radius for circular elements"
       }
-    }[t];
+    }[a];
     return {
-      value: a.px,
-      rem: `${a.px / 16}rem`,
-      px: `${a.px}px`,
-      tailwind: a.tailwind,
-      description: a.description
+      value: t.px,
+      rem: `${t.px / 16}rem`,
+      px: `${t.px}px`,
+      tailwind: t.tailwind,
+      description: t.description
     };
   }
 }
-const xe = {
-  none: F.create("none"),
-  sm: F.create("sm"),
-  md: F.create("md"),
-  lg: F.create("lg"),
-  xl: F.create("xl"),
-  "2xl": F.create("2xl"),
-  "3xl": F.create("3xl"),
-  full: F.create("full")
+const $e = {
+  none: j.create("none"),
+  sm: j.create("sm"),
+  md: j.create("md"),
+  lg: j.create("lg"),
+  xl: j.create("xl"),
+  "2xl": j.create("2xl"),
+  "3xl": j.create("3xl"),
+  full: j.create("full")
 };
-function C(e) {
-  return xe[e].tailwind;
+function $(e) {
+  return $e[e].tailwind;
 }
-class S {
+class C {
   // 4px base
   /**
    * Create a spacing token from scale value
    */
-  static create(t) {
-    const r = t * this.BASE_UNIT, a = r / 16;
+  static create(a) {
+    const r = a * this.BASE_UNIT, t = r / 16;
     return {
       value: r,
-      rem: `${a}rem`,
+      rem: `${t}rem`,
       px: `${r}px`,
-      tailwind: this.getTailwindClass(t)
+      tailwind: this.getTailwindClass(a)
     };
   }
   /**
    * Get Tailwind class for spacing value
    */
-  static getTailwindClass(t) {
+  static getTailwindClass(a) {
     return {
       0: "0",
       0.5: "0.5",
@@ -160,49 +160,49 @@ class S {
       // 320px
       96: "96"
       // 384px
-    }[t] || String(t);
+    }[a] || String(a);
   }
 }
-G(S, "BASE_UNIT", 4);
-const be = {
+te(C, "BASE_UNIT", 4);
+const ke = {
   // Micro spacing (0-14px)
-  none: S.create(0),
-  "0.5": S.create(0.5),
+  none: C.create(0),
+  "0.5": C.create(0.5),
   // 2px (half-step)
-  xs: S.create(1),
+  xs: C.create(1),
   // 4px
-  "1.5": S.create(1.5),
+  "1.5": C.create(1.5),
   // 6px (half-step)
-  sm: S.create(2),
+  sm: C.create(2),
   // 8px
-  "2.5": S.create(2.5),
+  "2.5": C.create(2.5),
   // 10px (half-step)
-  md: S.create(3),
+  md: C.create(3),
   // 12px
-  "3.5": S.create(3.5),
+  "3.5": C.create(3.5),
   // 14px (half-step)
   // Standard spacing (16-32px)
-  base: S.create(4),
+  base: C.create(4),
   // 16px
-  lg: S.create(6),
+  lg: C.create(6),
   // 24px
-  xl: S.create(8),
+  xl: C.create(8),
   // 32px
   // Large spacing (40-64px)
-  "2xl": S.create(10),
+  "2xl": C.create(10),
   // 40px
-  "3xl": S.create(12),
+  "3xl": C.create(12),
   // 48px
-  "4xl": S.create(16),
+  "4xl": C.create(16),
   // 64px
   // Extra large spacing (80px+)
-  "5xl": S.create(20),
+  "5xl": C.create(20),
   // 80px
-  "6xl": S.create(24)
+  "6xl": C.create(24)
   // 96px
 };
-function i(e, t = "p") {
-  const a = be[e].tailwind;
+function i(e, a = "p") {
+  const t = ke[e].tailwind;
   return `${{
     p: "p",
     m: "m",
@@ -223,14 +223,14 @@ function i(e, t = "p") {
     "gap-y": "gap-y",
     "space-x": "space-x",
     "space-y": "space-y"
-  }[t]}-${a}`;
+  }[a]}-${t}`;
 }
-class $ {
+class E {
   /**
    * Create font size token
    */
-  static createFontSize(t) {
-    const a = {
+  static createFontSize(a) {
+    const t = {
       "2xs": { px: 10, tailwind: "text-2xs" },
       // micro-text (badge counters, mini chips)
       xs: { px: 12, tailwind: "text-xs" },
@@ -243,103 +243,103 @@ class $ {
       "4xl": { px: 36, tailwind: "text-4xl" },
       "5xl": { px: 48, tailwind: "text-5xl" },
       "6xl": { px: 60, tailwind: "text-6xl" }
-    }[t];
+    }[a];
     return {
-      value: a.px,
-      rem: `${a.px / 16}rem`,
-      px: `${a.px}px`,
-      tailwind: a.tailwind
+      value: t.px,
+      rem: `${t.px / 16}rem`,
+      px: `${t.px}px`,
+      tailwind: t.tailwind
     };
   }
   /**
    * Create line height token
    */
-  static createLineHeight(t) {
-    const a = {
+  static createLineHeight(a) {
+    const t = {
       none: { value: 1, tailwind: "leading-none" },
       tight: { value: 1.25, tailwind: "leading-tight" },
       snug: { value: 1.375, tailwind: "leading-snug" },
       normal: { value: 1.5, tailwind: "leading-normal" },
       relaxed: { value: 1.625, tailwind: "leading-relaxed" },
       loose: { value: 2, tailwind: "leading-loose" }
-    }[t];
+    }[a];
     return {
-      value: a.value,
-      tailwind: a.tailwind
+      value: t.value,
+      tailwind: t.tailwind
     };
   }
   /**
    * Create font weight token
    */
-  static createFontWeight(t) {
-    const a = {
+  static createFontWeight(a) {
+    const t = {
       light: { value: 300, tailwind: "font-light" },
       normal: { value: 400, tailwind: "font-normal" },
       medium: { value: 500, tailwind: "font-medium" },
       semibold: { value: 600, tailwind: "font-semibold" },
       bold: { value: 700, tailwind: "font-bold" }
-    }[t];
+    }[a];
     return {
-      value: a.value,
-      tailwind: a.tailwind
+      value: t.value,
+      tailwind: t.tailwind
     };
   }
   /**
    * Create complete typography token
    */
-  static create(t, r = "normal", a = "normal") {
+  static create(a, r = "normal", t = "normal") {
     return {
-      fontSize: this.createFontSize(t),
+      fontSize: this.createFontSize(a),
       lineHeight: this.createLineHeight(r),
-      fontWeight: this.createFontWeight(a)
+      fontWeight: this.createFontWeight(t)
     };
   }
 }
-$.createFontWeight("light"), $.createFontWeight("normal"), $.createFontWeight("medium"), $.createFontWeight("semibold"), $.createFontWeight("bold");
-const U = {
+E.createFontWeight("light"), E.createFontWeight("normal"), E.createFontWeight("medium"), E.createFontWeight("semibold"), E.createFontWeight("bold");
+const Z = {
   // Headings
-  h1: $.create("4xl", "tight", "bold"),
-  h2: $.create("3xl", "tight", "bold"),
-  h3: $.create("2xl", "snug", "semibold"),
-  h4: $.create("xl", "snug", "semibold"),
-  h5: $.create("lg", "normal", "medium"),
-  h6: $.create("base", "normal", "medium"),
+  h1: E.create("4xl", "tight", "bold"),
+  h2: E.create("3xl", "tight", "bold"),
+  h3: E.create("2xl", "snug", "semibold"),
+  h4: E.create("xl", "snug", "semibold"),
+  h5: E.create("lg", "normal", "medium"),
+  h6: E.create("base", "normal", "medium"),
   // Body text
-  body: $.create("base", "relaxed", "normal"),
-  bodySmall: $.create("sm", "relaxed", "normal"),
-  bodyLarge: $.create("lg", "relaxed", "normal"),
+  body: E.create("base", "relaxed", "normal"),
+  bodySmall: E.create("sm", "relaxed", "normal"),
+  bodyLarge: E.create("lg", "relaxed", "normal"),
   // UI elements
-  label: $.create("sm", "normal", "medium"),
-  caption: $.create("xs", "normal", "normal"),
-  button: $.create("base", "normal", "medium")
+  label: E.create("sm", "normal", "medium"),
+  caption: E.create("xs", "normal", "normal"),
+  button: E.create("base", "normal", "medium")
 };
-function R(e) {
-  const t = U[e];
-  return `${t.fontSize.tailwind} ${t.lineHeight.tailwind} ${t.fontWeight.tailwind}`;
+function D(e) {
+  const a = Z[e];
+  return `${a.fontSize.tailwind} ${a.lineHeight.tailwind} ${a.fontWeight.tailwind}`;
 }
-function k(e) {
-  return U[e].fontSize.tailwind;
+function S(e) {
+  return Z[e].fontSize.tailwind;
 }
-function z(e) {
-  return U[e].fontWeight.tailwind;
+function B(e) {
+  return Z[e].fontWeight.tailwind;
 }
 function n(...e) {
-  return ue(de(e));
+  return ye(he(e));
 }
-const V = (e, t) => {
-  const r = fe(e, t);
-  return ((a) => {
-    const s = r(a);
+const L = (e, a) => {
+  const r = ve(e, a);
+  return ((t) => {
+    const s = r(t);
     return n(s);
   });
-}, he = V(
+}, Ce = L(
   // Base classes
   n(
     "inline-flex",
     "items-center",
     "justify-center",
-    z("label"),
-    C("md"),
+    B("label"),
+    $("md"),
     "border"
   ),
   {
@@ -357,17 +357,17 @@ const V = (e, t) => {
         sm: n(
           i("1.5", "px"),
           i("0.5", "py"),
-          k("caption")
+          S("caption")
         ),
         md: n(
           i("sm", "px"),
           i("xs", "py"),
-          k("caption")
+          S("caption")
         ),
         lg: n(
           i("sm", "px"),
           i("xs", "py"),
-          k("bodySmall")
+          S("bodySmall")
         )
       },
       style: {
@@ -470,16 +470,16 @@ const V = (e, t) => {
       style: "solid"
     }
   }
-), ye = H(
-  D(function(h, p) {
-    var g = h, {
-      variant: t = "neutral",
+), Ee = H(
+  _(function(x, p) {
+    var m = x, {
+      variant: a = "neutral",
       size: r = "md",
-      style: a = "solid",
+      style: t = "solid",
       className: s = "",
-      children: o,
-      "aria-label": c
-    } = g, d = m(g, [
+      children: c,
+      "aria-label": o
+    } = m, d = h(m, [
       "variant",
       "size",
       "style",
@@ -487,15 +487,15 @@ const V = (e, t) => {
       "children",
       "aria-label"
     ]);
-    const b = n(he({ variant: t, size: r, style: a }), s);
+    const b = n(Ce({ variant: a, size: r, style: t }), s);
     let f;
-    if (c)
-      f = c;
-    else if (typeof o == "string")
+    if (o)
       f = o;
-    else if (typeof o == "object" && o !== null && "props" in o) {
-      const x = o.props;
-      x != null && x.children && typeof x.children == "string" && (f = x.children);
+    else if (typeof c == "string")
+      f = c;
+    else if (typeof c == "object" && c !== null && "props" in c) {
+      const g = c.props;
+      g != null && g.children && typeof g.children == "string" && (f = g.children);
     }
     return /* @__PURE__ */ l(
       "span",
@@ -505,112 +505,414 @@ const V = (e, t) => {
         "aria-label": f,
         className: b
       }, d), {
-        children: o
+        children: c
       })
     );
   })
 );
-ye.displayName = "Badge";
-function Z(e, t) {
+Ee.displayName = "Badge";
+function se(e, a) {
   if (typeof e == "function")
-    return e(t);
-  e != null && (e.current = t);
+    return e(a);
+  e != null && (e.current = a);
 }
-function ve(...e) {
-  return (t) => {
+function Te(...e) {
+  return (a) => {
     let r = !1;
-    const a = e.map((s) => {
-      const o = Z(s, t);
-      return !r && typeof o == "function" && (r = !0), o;
+    const t = e.map((s) => {
+      const c = se(s, a);
+      return !r && typeof c == "function" && (r = !0), c;
     });
     if (r)
       return () => {
-        for (let s = 0; s < a.length; s++) {
-          const o = a[s];
-          typeof o == "function" ? o() : Z(e[s], null);
+        for (let s = 0; s < t.length; s++) {
+          const c = t[s];
+          typeof c == "function" ? c() : se(e[s], null);
         }
       };
   };
 }
-function we(...e) {
-  return T.useCallback(ve(...e), e);
+function Ve(...e) {
+  return A.useCallback(Te(...e), e);
 }
 // @__NO_SIDE_EFFECTS__
-function Ne(e) {
-  const t = T.forwardRef((r, a) => {
-    var x;
-    let f = r, { children: s } = f, o = m(f, ["children"]), c = null, d = !1;
+function Ae(e) {
+  const a = A.forwardRef((r, t) => {
+    var g;
+    let f = r, { children: s } = f, c = h(f, ["children"]), o = null, d = !1;
     const p = [];
-    J(s) && typeof W == "function" && (s = W(s._payload)), T.Children.forEach(s, (w) => {
+    ie(s) && typeof q == "function" && (s = q(s._payload)), A.Children.forEach(s, (w) => {
       var N;
-      if (Te(w)) {
+      if (ze(w)) {
         d = !0;
-        const L = w;
-        let E = "child" in L.props ? L.props.child : L.props.children;
-        J(E) && typeof W == "function" && (E = W(E._payload)), c = Ce(L, E), p.push((N = c == null ? void 0 : c.props) == null ? void 0 : N.children);
+        const T = w;
+        let k = "child" in T.props ? T.props.child : T.props.children;
+        ie(k) && typeof q == "function" && (k = q(k._payload)), o = De(T, k), p.push((N = o == null ? void 0 : o.props) == null ? void 0 : N.children);
       } else
         p.push(w);
-    }), c ? c = T.cloneElement(c, void 0, p) : (
+    }), o ? o = A.cloneElement(o, void 0, p) : (
       // A `Slottable` was found but it didn't resolve to a single element (e.g.
       // it wrapped multiple elements, text, or a render-prop `child` that
       // wasn't an element). Don't fall back to treating the `Slottable` wrapper
       // itself as the slot target — throw a descriptive error below instead.
-      !d && T.Children.count(s) === 1 && T.isValidElement(s) && (c = s)
+      !d && A.Children.count(s) === 1 && A.isValidElement(s) && (o = s)
     );
-    const h = c ? Ee(c) : void 0, g = we(a, h);
-    if (!c) {
+    const x = o ? je(o) : void 0, m = Ve(t, x);
+    if (!o) {
       if (s || s === 0)
         throw new Error(
-          d ? Fe(e) : Ve(e)
+          d ? Be(e) : Me(e)
         );
       return s;
     }
-    const b = ke(o, (x = c.props) != null ? x : {});
-    return c.type !== T.Fragment && (b.ref = a ? g : h), T.cloneElement(c, b);
+    const b = _e(c, (g = o.props) != null ? g : {});
+    return o.type !== A.Fragment && (b.ref = t ? m : x), A.cloneElement(o, b);
   });
-  return t.displayName = `${e}.Slot`, t;
+  return a.displayName = `${e}.Slot`, a;
 }
-var Se = /* @__PURE__ */ Ne("Slot"), $e = /* @__PURE__ */ Symbol.for("radix.slottable"), Ce = (e, t) => {
+var de = /* @__PURE__ */ Ae("Slot"), ue = /* @__PURE__ */ Symbol.for("radix.slottable");
+// @__NO_SIDE_EFFECTS__
+function Le(e) {
+  const a = (r) => "child" in r ? r.children(r.child) : r.children;
+  return a.displayName = `${e}.Slottable`, a.__radixId = ue, a;
+}
+var Fe = /* @__PURE__ */ Le("Slottable"), De = (e, a) => {
   if ("child" in e.props) {
     const r = e.props.child;
-    return T.isValidElement(r) ? T.cloneElement(r, void 0, e.props.children(r.props.children)) : null;
+    return A.isValidElement(r) ? A.cloneElement(r, void 0, e.props.children(r.props.children)) : null;
   }
-  return T.isValidElement(t) ? t : null;
+  return A.isValidElement(a) ? a : null;
 };
-function ke(e, t) {
-  const r = u({}, t);
-  for (const a in t) {
-    const s = e[a], o = t[a];
-    /^on[A-Z]/.test(a) ? s && o ? r[a] = (...d) => {
-      const p = o(...d);
+function _e(e, a) {
+  const r = u({}, a);
+  for (const t in a) {
+    const s = e[t], c = a[t];
+    /^on[A-Z]/.test(t) ? s && c ? r[t] = (...d) => {
+      const p = c(...d);
       return s(...d), p;
-    } : s && (r[a] = s) : a === "style" ? r[a] = u(u({}, s), o) : a === "className" && (r[a] = [s, o].filter(Boolean).join(" "));
+    } : s && (r[t] = s) : t === "style" ? r[t] = u(u({}, s), c) : t === "className" && (r[t] = [s, c].filter(Boolean).join(" "));
   }
   return u(u({}, e), r);
 }
-function Ee(e) {
-  var a, s;
-  let t = (a = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : a.get, r = t && "isReactWarning" in t && t.isReactWarning;
-  return r ? e.ref : (t = (s = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : s.get, r = t && "isReactWarning" in t && t.isReactWarning, r ? e.props.ref : e.props.ref || e.ref);
+function je(e) {
+  var t, s;
+  let a = (t = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : t.get, r = a && "isReactWarning" in a && a.isReactWarning;
+  return r ? e.ref : (a = (s = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : s.get, r = a && "isReactWarning" in a && a.isReactWarning, r ? e.props.ref : e.props.ref || e.ref);
 }
-function Te(e) {
-  return T.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === $e;
+function ze(e) {
+  return A.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === ue;
 }
-var Le = /* @__PURE__ */ Symbol.for("react.lazy");
-function J(e) {
-  return e != null && typeof e == "object" && "$$typeof" in e && e.$$typeof === Le && "_payload" in e && Ae(e._payload);
+var Re = /* @__PURE__ */ Symbol.for("react.lazy");
+function ie(e) {
+  return e != null && typeof e == "object" && "$$typeof" in e && e.$$typeof === Re && "_payload" in e && Oe(e._payload);
 }
-function Ae(e) {
+function Oe(e) {
   return typeof e == "object" && e !== null && "then" in e;
 }
-var Ve = (e) => `${e} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`, Fe = (e) => `${e} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`, W = T[" use ".trim().toString()];
-const Q = V(
+var Me = (e) => `${e} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`, Be = (e) => `${e} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`, q = A[" use ".trim().toString()];
+const He = L("motion-safe:animate-spin", {
+  variants: {
+    size: {
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-8 w-8"
+    },
+    variant: {
+      primary: "text-fg-brand",
+      secondary: "text-fg-brand-secondary",
+      neutral: "text-fg-secondary"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "primary"
+  }
+}), fe = H(function(o) {
+  var d = o, {
+    size: a = "md",
+    variant: r = "primary",
+    label: t,
+    className: s = ""
+  } = d, c = h(d, [
+    "size",
+    "variant",
+    "label",
+    "className"
+  ]);
+  return /* @__PURE__ */ v(
+    "div",
+    y(u({
+      className: n("inline-flex", "items-center", s),
+      role: "status",
+      "aria-label": t || "Loading",
+      "aria-live": "polite"
+    }, c), {
+      children: [
+        /* @__PURE__ */ l(
+          we,
+          {
+            className: n(He({ size: a, variant: r })),
+            "aria-hidden": "true"
+          }
+        ),
+        t && /* @__PURE__ */ l(
+          "span",
+          {
+            className: n(
+              i("sm", "ml"),
+              S("bodySmall"),
+              "text-fg-secondary",
+              "sr-only"
+            ),
+            children: t
+          }
+        )
+      ]
+    })
+  );
+});
+fe.displayName = "Spinner";
+const Pe = L(
+  // Base classes
+  n(
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    D("button").split(" ")[2] || "font-medium",
+    // Extract font-medium
+    $("md"),
+    "transition-colors",
+    "focus:outline-none",
+    "focus:ring-2",
+    "focus:ring-offset-2",
+    "disabled:opacity-50",
+    "disabled:cursor-not-allowed"
+  ),
+  {
+    variants: {
+      variant: {
+        primary: n(
+          "bg-surface-brand-strong",
+          "text-fg-inverse",
+          "hover:opacity-90",
+          "focus:ring-line-brand"
+        ),
+        secondary: n(
+          "bg-surface-secondary",
+          "text-fg-inverse",
+          "hover:opacity-90",
+          "focus:ring-line-secondary"
+        ),
+        error: n(
+          "bg-error",
+          "text-fg-inverse",
+          "hover:opacity-90",
+          "focus:ring-error"
+        ),
+        outline: n(
+          "border-2",
+          "border-line-default",
+          "bg-transparent",
+          "text-fg-primary",
+          "hover:bg-surface-hover",
+          "focus:ring-line-focus"
+        ),
+        ghost: n(
+          "bg-transparent",
+          "text-fg-primary",
+          "hover:bg-surface-hover",
+          "focus:ring-line-focus"
+        ),
+        iconOnly: n(
+          "bg-transparent",
+          "text-fg-primary",
+          "hover:bg-surface-hover",
+          "focus:ring-line-focus",
+          i("none", "p")
+        ),
+        // Textual call-to-action — brand-coloured text, underline on
+        // hover, no chrome (no surface, no border). Padding is zeroed
+        // out per size in compoundVariants so the bounding box hugs
+        // the text (height intrinsic). Issue #156.
+        //
+        // Focus ring: `focus:ring-line-focus` keeps the same focus
+        // family the other no-chrome variants use (ghost, outline,
+        // iconOnly). The base's `focus:ring-2` + `focus:ring-offset-2`
+        // produce a 2px ring 2px away from the text bounding box; the
+        // 2px offset is rendered in surface-base so the ring contrasts
+        // against surface (≥3:1 for WCAG 2.4.11, verified) rather than
+        // colliding with the brand-coloured text. The element keeps
+        // `getRadiusClass("md")` from the base, which is invisible
+        // without chrome but rounds the focus ring corners.
+        //
+        // hover:underline pairs with `underline-offset-4` so the
+        // underline that appears on hover sits clear of the descenders
+        // (WCAG-aligned with link best practice). At rest the link
+        // carries no underline — the brand colour alone signals
+        // affordance, matching the shadcn convention this variant is
+        // modelled on (see issue body).
+        //
+        // disabled: inherits opacity-50 + cursor-not-allowed from the
+        // base. We do NOT special-case `disabled:no-underline` because
+        // a disabled link should still receive the same visual
+        // treatment as a disabled chrome variant — the opacity and
+        // cursor signal the disabled state.
+        link: n(
+          "bg-transparent",
+          "text-fg-brand",
+          "underline-offset-4",
+          "hover:underline",
+          "focus:ring-line-focus"
+        )
+      },
+      size: {
+        sm: n(
+          i("md", "px"),
+          i("1.5", "py"),
+          S("bodySmall"),
+          i("1.5", "gap")
+        ),
+        md: n(
+          i("base", "px"),
+          i("sm", "py"),
+          S("body"),
+          i("sm", "gap")
+        ),
+        lg: n(
+          i("lg", "px"),
+          i("md", "py"),
+          S("bodyLarge"),
+          i("2.5", "gap")
+        )
+      }
+    },
+    compoundVariants: [
+      // IconOnly variant has different sizing
+      {
+        variant: "iconOnly",
+        size: "sm",
+        class: n("h-8", "w-8", i("none", "p"))
+      },
+      {
+        variant: "iconOnly",
+        size: "md",
+        class: n("h-10", "w-10", i("none", "p"))
+      },
+      {
+        variant: "iconOnly",
+        size: "lg",
+        class: n("h-12", "w-12", i("none", "p"))
+      },
+      // Link variant zeroes the size's padding via compoundVariants so
+      // the override runs AFTER the size block's `px-N`/`py-N` and
+      // twMerge picks the zero value (`cn` joins variant before
+      // compound). The size's typography and gap survive — the link's
+      // text scales with size and icons still get gap-N when present.
+      // Issue #156.
+      {
+        variant: "link",
+        size: "sm",
+        class: n(i("none", "px"), i("none", "py"))
+      },
+      {
+        variant: "link",
+        size: "md",
+        class: n(i("none", "px"), i("none", "py"))
+      },
+      {
+        variant: "link",
+        size: "lg",
+        class: n(i("none", "px"), i("none", "py"))
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function X({
+  children: e,
+  position: a
+}) {
+  return e ? /* @__PURE__ */ l(
+    "span",
+    {
+      className: `inline-flex items-center ${a === "left" ? i("none", "mr") : i("none", "ml")}`,
+      children: e
+    }
+  ) : null;
+}
+const Ie = H(
+  _(function(k, T) {
+    var F = k, {
+      variant: a = "primary",
+      size: r = "md",
+      isLoading: t = !1,
+      loadingText: s,
+      loadingIcon: c,
+      leftIcon: o,
+      rightIcon: d,
+      fullWidth: p = !1,
+      asChild: x = !1,
+      as: m,
+      className: b = "",
+      disabled: f = !1,
+      children: g,
+      "aria-label": w
+    } = F, N = h(F, [
+      "variant",
+      "size",
+      "isLoading",
+      "loadingText",
+      "loadingIcon",
+      "leftIcon",
+      "rightIcon",
+      "fullWidth",
+      "asChild",
+      "as",
+      "className",
+      "disabled",
+      "children",
+      "aria-label"
+    ]);
+    typeof process != "undefined" && process.env.NODE_ENV !== "production" && x && m !== void 0 && m !== "button" && console.warn(
+      "[Button] `as` is ignored when `asChild` is true; the child element is used as the root. Drop one of the two props to silence this warning."
+    );
+    const z = x ? de : m != null ? m : "button", R = n(
+      Pe({ variant: a, size: r }),
+      p && "w-full",
+      b
+    ), I = (a === "iconOnly" || !g && (o || d)) && !w && !g ? "Button" : w, me = c || /* @__PURE__ */ l(fe, { size: r === "sm" ? "sm" : r === "lg" ? "lg" : "md", variant: a === "error" ? "primary" : a === "primary" || a === "secondary" ? "neutral" : "primary" }), J = !x && (m === void 0 || m === "button") && !N.type ? "button" : void 0, Q = u(u({
+      className: R,
+      disabled: f || t,
+      "aria-busy": t,
+      "aria-label": I,
+      "aria-disabled": f || t
+    }, J ? { type: J } : {}), N);
+    return x ? /* @__PURE__ */ v(z, y(u({ ref: T }, Q), { children: [
+      o && /* @__PURE__ */ l(X, { position: "left", children: o }),
+      /* @__PURE__ */ l(Fe, { children: g }),
+      d && /* @__PURE__ */ l(X, { position: "right", children: d })
+    ] })) : /* @__PURE__ */ l(z, y(u({ ref: T }, Q), { children: t ? /* @__PURE__ */ v(re, { children: [
+      me,
+      s && /* @__PURE__ */ l("span", { className: i("sm", "ml"), children: s }),
+      !s && g && /* @__PURE__ */ l("span", { className: `${i("sm", "ml")} opacity-0`, children: g })
+    ] }) : /* @__PURE__ */ v(re, { children: [
+      o && /* @__PURE__ */ l(X, { position: "left", children: o }),
+      g,
+      d && /* @__PURE__ */ l(X, { position: "right", children: d })
+    ] }) }));
+  })
+);
+Ie.displayName = "Button";
+const le = L(
   // Base classes
   n(
     "inline-flex",
     "items-center",
     "font-medium",
-    C("full"),
+    $("full"),
     i("xs", "gap")
   ),
   {
@@ -639,17 +941,17 @@ const Q = V(
         sm: n(
           i("xs", "px"),
           i("xs", "py"),
-          k("caption")
+          S("caption")
         ),
         md: n(
           i("sm", "px"),
           i("xs", "py"),
-          k("bodySmall")
+          S("bodySmall")
         ),
         lg: n(
           i("md", "px"),
           i("sm", "py"),
-          k("body")
+          S("body")
         )
       },
       selected: {
@@ -693,84 +995,84 @@ const Q = V(
       disabled: !1
     }
   }
-), Re = D(function(t, r) {
+), We = _(function(a, r) {
   const {
-    children: a,
+    children: t,
     variant: s = "default",
-    size: o = "md",
-    selected: c = !1,
+    size: c = "md",
+    selected: o = !1,
     disabled: d = !1,
     className: p = "",
-    "aria-label": h,
-    tabIndex: g,
+    "aria-label": x,
+    tabIndex: m,
     asChild: b = !1
-  } = t, x = (() => {
-    if (h) return h;
-    if (typeof a == "string") return a;
-    if (typeof a == "object" && a !== null && "props" in a) {
-      const A = a.props;
-      if (A != null && A.children && typeof A.children == "string")
-        return A.children;
+  } = a, g = (() => {
+    if (x) return x;
+    if (typeof t == "string") return t;
+    if (typeof t == "object" && t !== null && "props" in t) {
+      const V = t.props;
+      if (V != null && V.children && typeof V.children == "string")
+        return V.children;
     }
   })();
   if (b)
     return /* @__PURE__ */ l(
-      Se,
+      de,
       {
         ref: r,
         className: n(
-          Q({ variant: s, size: o, selected: c, disabled: d }),
+          le({ variant: s, size: c, selected: o, disabled: d }),
           p
         ),
-        "aria-label": h,
+        "aria-label": x,
         "aria-disabled": d || void 0,
-        tabIndex: g,
-        children: a
+        tabIndex: m,
+        children: t
       }
     );
-  const { onRemove: w, onClick: N, count: L } = t, E = N !== void 0, M = E && !d, re = (A) => {
-    d || (A.key === "Enter" || A.key === " ") && (A.preventDefault(), N == null || N());
-  }, K = L !== void 0, se = c || s === "filled", ne = K ? /* @__PURE__ */ l(
+  const { onRemove: w, onClick: N, count: T } = a, k = N !== void 0, F = k && !d, z = (V) => {
+    d || (V.key === "Enter" || V.key === " ") && (V.preventDefault(), N == null || N());
+  }, R = T !== void 0, P = o || s === "filled", I = R ? /* @__PURE__ */ l(
     "span",
     {
-      "aria-hidden": E || void 0,
+      "aria-hidden": k || void 0,
       className: n(
         "inline-flex",
         "items-center",
         "justify-center",
         "tabular-nums",
         "leading-none",
-        C("full"),
+        $("full"),
         i("xs", "px"),
         i("0.5", "py"),
-        k("caption"),
-        z("label"),
-        se ? n("bg-surface-base", "text-fg-brand-emphasis") : n("bg-surface-brand-strong", "text-fg-inverse")
+        S("caption"),
+        B("label"),
+        P ? n("bg-surface-base", "text-fg-brand-emphasis") : n("bg-surface-brand-strong", "text-fg-inverse")
       ),
-      children: L
+      children: T
     }
-  ) : null, ie = K && x !== void 0 ? `${x}, ${L}` : x;
+  ) : null, U = R && g !== void 0 ? `${g}, ${T}` : g;
   return /* @__PURE__ */ v(
     "div",
     {
       ref: r,
       className: n(
-        Q({ variant: s, size: o, selected: c, disabled: d }),
+        le({ variant: s, size: c, selected: o, disabled: d }),
         w && i("xs", "pr"),
         p
       ),
       "aria-disabled": d,
       children: [
-        E ? /* @__PURE__ */ l(
+        k ? /* @__PURE__ */ l(
           "button",
           {
             type: "button",
             onClick: d ? void 0 : N,
-            onKeyDown: re,
+            onKeyDown: z,
             disabled: d,
-            "aria-pressed": c ? !0 : void 0,
-            "aria-label": h || ie,
-            tabIndex: g !== void 0 ? g : M ? 0 : void 0,
+            "aria-pressed": o ? !0 : void 0,
+            "aria-label": x || U,
+            tabIndex: m !== void 0 ? m : F ? 0 : void 0,
             className: n(
               "flex-1",
               "bg-transparent",
@@ -783,23 +1085,23 @@ const Q = V(
               "focus:ring-2",
               "focus:ring-line-focus",
               "focus:ring-offset-2",
-              C("full")
+              $("full")
             ),
-            children: a
+            children: t
           }
-        ) : /* @__PURE__ */ l("span", { children: a }),
-        ne,
+        ) : /* @__PURE__ */ l("span", { children: t }),
+        I,
         w && !d && /* @__PURE__ */ l(
           "button",
           {
             type: "button",
-            onClick: (A) => {
-              A.stopPropagation(), w();
+            onClick: (V) => {
+              V.stopPropagation(), w();
             },
             className: n(
               i("xs", "ml"),
               "hover:bg-tint-hover",
-              C("full"),
+              $("full"),
               i("xs", "p"),
               "transition-colors",
               "focus:outline-none",
@@ -807,47 +1109,47 @@ const Q = V(
               "focus:ring-line-focus",
               "focus:ring-offset-1"
             ),
-            "aria-label": `Remove ${x || "chip"}`,
-            children: /* @__PURE__ */ l(pe, { className: "h-3 w-3", "aria-hidden": "true" })
+            "aria-label": `Remove ${g || "chip"}`,
+            children: /* @__PURE__ */ l(Ne, { className: "h-3 w-3", "aria-hidden": "true" })
           }
         )
       ]
     }
   );
 });
-Re.displayName = "Chip";
-function Na(s) {
-  var o = s, {
+We.displayName = "Chip";
+function _a(s) {
+  var c = s, {
     message: e,
-    id: t,
+    id: a,
     className: r = ""
-  } = o, a = m(o, [
+  } = c, t = h(c, [
     "message",
     "id",
     "className"
   ]);
-  const c = [
+  const o = [
     i("xs", "mt"),
-    k("bodySmall"),
+    S("bodySmall"),
     "text-fg-error",
     "flex",
     "items-center",
     i("xs", "gap")
-  ], d = n(...c, r);
-  return /* @__PURE__ */ v("div", y(u({ role: "alert", id: t, className: d, "aria-live": "polite" }, a), { children: [
-    /* @__PURE__ */ l(me, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  ], d = n(...o, r);
+  return /* @__PURE__ */ v("div", y(u({ role: "alert", id: a, className: d, "aria-live": "polite" }, t), { children: [
+    /* @__PURE__ */ l(Se, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
     /* @__PURE__ */ l("span", { children: e })
   ] }));
 }
-function Sa(a) {
-  var s = a, {
+function ja(t) {
+  var s = t, {
     variant: e = "info",
-    className: t
-  } = s, r = m(s, [
+    className: a
+  } = s, r = h(s, [
     "variant",
     "className"
   ]);
-  const o = {
+  const c = {
     warning: n("bg-warning-bg", "text-warning-dark", "border-warning"),
     error: n("bg-error-bg", "text-error-dark", "border-error"),
     info: n("bg-info-bg", "text-info-dark", "border-info")
@@ -860,19 +1162,210 @@ function Sa(a) {
         "border",
         i("base", "px"),
         i("sm", "py"),
-        C("lg"),
-        o[e],
-        t
+        $("lg"),
+        c[e],
+        a
       )
     }, r)
   );
 }
-const je = n(
+const Ue = L(
+  n(
+    "w-full",
+    $("md"),
+    "transition-colors",
+    "focus:outline-none",
+    "focus:ring-2",
+    "focus:ring-offset-2",
+    "disabled:opacity-50",
+    "disabled:cursor-not-allowed"
+  ),
+  {
+    variants: {
+      variant: {
+        default: n(
+          "border-0",
+          "border-b-2",
+          "border-line-default",
+          "focus:border-line-focus"
+        ),
+        outlined: n(
+          "border",
+          "border-line-default",
+          "focus:border-line-focus"
+        ),
+        filled: n(
+          "bg-surface-muted",
+          "border-0",
+          "focus:bg-surface-base",
+          "focus:ring-2",
+          "focus:ring-line-focus"
+        )
+      },
+      size: {
+        sm: n(
+          "h-8",
+          S("bodySmall"),
+          i("md", "px")
+        ),
+        md: n(
+          "h-10",
+          S("body"),
+          i("base", "px")
+        ),
+        lg: n(
+          "h-12",
+          S("bodyLarge"),
+          i("lg", "px")
+        )
+      },
+      state: {
+        default: "",
+        error: n("border-error", "focus:border-error", "focus:ring-error"),
+        success: n(
+          "border-success",
+          "focus:border-success",
+          "focus:ring-success"
+        )
+      }
+    },
+    defaultVariants: {
+      variant: "outlined",
+      size: "md",
+      state: "default"
+    }
+  }
+);
+function Ke({
+  error: e,
+  success: a,
+  helperText: r,
+  errorId: t,
+  helperId: s
+}) {
+  const c = n(
+    i("xs", "mt"),
+    D("caption"),
+    e && "text-fg-error",
+    a && "text-fg-success",
+    !e && !a && "text-fg-secondary"
+  );
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      id: t || s,
+      className: c,
+      role: e || a ? "alert" : void 0,
+      children: r || (e ? "Error" : a ? "Success" : "")
+    }
+  );
+}
+const qe = _(
+  function(T, N) {
+    var k = T, {
+      id: a,
+      label: r,
+      error: t = !1,
+      success: s = !1,
+      helperText: c,
+      size: o = "md",
+      variant: d = "outlined",
+      leftIcon: p,
+      rightIcon: x,
+      rightSlot: m,
+      className: b = "",
+      disabled: f = !1,
+      type: g = "text"
+    } = k, w = h(k, [
+      "id",
+      "label",
+      "error",
+      "success",
+      "helperText",
+      "size",
+      "variant",
+      "leftIcon",
+      "rightIcon",
+      "rightSlot",
+      "className",
+      "disabled",
+      "type"
+    ]);
+    typeof process != "undefined" && process.env.NODE_ENV !== "production" && r && !a && console.warn(
+      "[InputBase] `label` was provided without an `id`. The <label> cannot bind to the input (InputBase does not auto-generate an id — that needs a client hook). Pass an `id`, or use the interactive `Input` which auto-generates one."
+    );
+    const F = t ? "error" : s ? "success" : "default", z = t && a ? `${a}-error` : void 0, R = c && a ? `${a}-helper` : void 0, P = o === "sm" ? "h-4 w-4" : o === "lg" ? "h-5 w-5" : "h-4 w-4", I = o === "sm" ? "top-2" : o === "lg" ? "top-3.5" : "top-2.5", U = n(
+      Ue({ variant: d, size: o, state: F }),
+      // Icon padding — `pl-9` / `pr-9` aren't on the spacing scale (no
+      // semantic key for 36px) so they stay raw at the `sm` size; md/lg use
+      // the getter. Mirrors the original Input contract.
+      p && (o === "sm" ? "pl-9" : i(o === "lg" ? "3xl" : "2xl", "pl")),
+      (x || m) && (o === "sm" ? "pr-9" : i(o === "lg" ? "3xl" : "2xl", "pr")),
+      b
+    ), V = n(
+      "block",
+      D("label"),
+      i("xs", "mb"),
+      f && "opacity-50"
+    );
+    return /* @__PURE__ */ v("div", { className: "w-full", children: [
+      r && /* @__PURE__ */ l("label", { htmlFor: a, className: V, children: r }),
+      /* @__PURE__ */ v("div", { className: "relative", children: [
+        p && /* @__PURE__ */ l(
+          "div",
+          {
+            className: `absolute left-3 ${I} text-fg-secondary opacity-60 pointer-events-none`,
+            children: /* @__PURE__ */ l("div", { className: P, children: p })
+          }
+        ),
+        /* @__PURE__ */ l(
+          "input",
+          u({
+            id: a,
+            ref: N,
+            type: g,
+            className: U,
+            disabled: f,
+            "aria-invalid": t,
+            "aria-required": w.required,
+            "aria-describedby": z || R,
+            suppressHydrationWarning: !0
+          }, w)
+        ),
+        (x || m) && /* @__PURE__ */ l(
+          "div",
+          {
+            className: `absolute right-3 top-0 bottom-0 flex items-center ${i("xs", "gap")}`,
+            children: m != null ? m : /* @__PURE__ */ l(
+              "div",
+              {
+                className: `text-fg-secondary opacity-60 pointer-events-none ${P}`,
+                children: x
+              }
+            )
+          }
+        )
+      ] }),
+      (t || s || c) && /* @__PURE__ */ l(
+        Ke,
+        {
+          error: t,
+          success: s,
+          helperText: c,
+          errorId: z,
+          helperId: R
+        }
+      )
+    ] });
+  }
+);
+qe.displayName = "InputBase";
+const Xe = n(
   "block",
-  k("label"),
-  z("label"),
+  S("label"),
+  B("label"),
   "text-fg-primary"
-), De = {
+), Ge = {
   default: "",
   required: n(
     "after:content-['*']",
@@ -885,23 +1378,23 @@ const je = n(
     "after:text-fg-tertiary",
     "after:font-normal"
   )
-}, _e = H(
-  D(function(c, o) {
-    var d = c, { variant: t = "default", className: r = "", children: a } = d, s = m(d, ["variant", "className", "children"]);
+}, Ye = H(
+  _(function(o, c) {
+    var d = o, { variant: a = "default", className: r = "", children: t } = d, s = h(d, ["variant", "className", "children"]);
     const p = n(
-      je,
-      De[t],
+      Xe,
+      Ge[a],
       r
     );
-    return /* @__PURE__ */ l("label", y(u({ ref: o, className: p }, s), { children: a }));
+    return /* @__PURE__ */ l("label", y(u({ ref: c, className: p }, s), { children: t }));
   })
 );
-_e.displayName = "Label";
-class j {
+Ye.displayName = "Label";
+class O {
   /**
    * Create a shadow token
    */
-  static create(t) {
+  static create(a) {
     return {
       none: {
         value: "none",
@@ -938,22 +1431,22 @@ class j {
         tailwind: "shadow-inner",
         description: "Inner shadow for inset elements"
       }
-    }[t];
+    }[a];
   }
 }
-const ze = {
-  none: j.create("none"),
-  sm: j.create("sm"),
-  md: j.create("md"),
-  lg: j.create("lg"),
-  xl: j.create("xl"),
-  "2xl": j.create("2xl"),
-  inner: j.create("inner")
+const Ze = {
+  none: O.create("none"),
+  sm: O.create("sm"),
+  md: O.create("md"),
+  lg: O.create("lg"),
+  xl: O.create("xl"),
+  "2xl": O.create("2xl"),
+  inner: O.create("inner")
 };
-function B(e) {
-  return ze[e].tailwind;
+function Y(e) {
+  return Ze[e].tailwind;
 }
-const Me = V("w-full", {
+const Je = L("w-full", {
   variants: {
     size: {
       sm: "h-1",
@@ -973,7 +1466,7 @@ const Me = V("w-full", {
     size: "md",
     variant: "primary"
   }
-}), ee = V("transition-all", {
+}), oe = L("transition-all", {
   variants: {
     variant: {
       primary: "bg-surface-brand",
@@ -987,17 +1480,17 @@ const Me = V("w-full", {
   defaultVariants: {
     variant: "primary"
   }
-}), He = D(function(b, g) {
+}), Qe = _(function(b, m) {
   var f = b, {
-    value: t,
+    value: a,
     max: r = 100,
-    variant: a = "primary",
+    variant: t = "primary",
     size: s = "md",
-    showLabel: o = !1,
-    label: c,
+    showLabel: c = !1,
+    label: o,
     "aria-label": d,
     className: p = ""
-  } = f, h = m(f, [
+  } = f, x = h(f, [
     "value",
     "max",
     "variant",
@@ -1007,9 +1500,9 @@ const Me = V("w-full", {
     "aria-label",
     "className"
   ]);
-  const x = t === void 0, w = x ? void 0 : Math.min(Math.max(t / r * 100, 0), 100), N = d || (x ? "Loading in progress" : `Progress: ${w == null ? void 0 : w.toFixed(0)}%`);
-  return /* @__PURE__ */ v("div", y(u({ ref: g, className: n("w-full", p) }, h), { children: [
-    o && (c || !x) && /* @__PURE__ */ v(
+  const g = a === void 0, w = g ? void 0 : Math.min(Math.max(a / r * 100, 0), 100), N = d || (g ? "Loading in progress" : `Progress: ${w == null ? void 0 : w.toFixed(0)}%`);
+  return /* @__PURE__ */ v("div", y(u({ ref: m, className: n("w-full", p) }, x), { children: [
+    c && (o || !g) && /* @__PURE__ */ v(
       "div",
       {
         className: n(
@@ -1019,22 +1512,22 @@ const Me = V("w-full", {
           i("xs", "mb")
         ),
         children: [
-          c && /* @__PURE__ */ l(
+          o && /* @__PURE__ */ l(
             "span",
             {
               className: n(
-                k("bodySmall"),
-                z("label"),
+                S("bodySmall"),
+                B("label"),
                 "text-fg-primary"
               ),
-              children: c
+              children: o
             }
           ),
-          !x && w !== void 0 && /* @__PURE__ */ v(
+          !g && w !== void 0 && /* @__PURE__ */ v(
             "span",
             {
               className: n(
-                k("bodySmall"),
+                S("bodySmall"),
                 "text-fg-secondary"
               ),
               children: [
@@ -1050,19 +1543,19 @@ const Me = V("w-full", {
       "div",
       {
         role: "progressbar",
-        "aria-valuemin": x ? void 0 : 0,
-        "aria-valuemax": x ? void 0 : r,
-        "aria-valuenow": x ? void 0 : t,
+        "aria-valuemin": g ? void 0 : 0,
+        "aria-valuemax": g ? void 0 : r,
+        "aria-valuenow": g ? void 0 : a,
         "aria-label": N,
-        "aria-busy": x,
+        "aria-busy": g,
         className: n(
           "relative",
           "w-full",
           "overflow-hidden",
-          Me({ size: s, variant: a }),
-          C("full")
+          Je({ size: s, variant: t }),
+          $("full")
         ),
-        children: x ? /* @__PURE__ */ l(
+        children: g ? /* @__PURE__ */ l(
           "div",
           {
             className: n(
@@ -1070,8 +1563,8 @@ const Me = V("w-full", {
               "top-0",
               "left-0",
               "bottom-0",
-              ee({ variant: a }),
-              C("full"),
+              oe({ variant: t }),
+              $("full"),
               "motion-reduce:animate-none"
             ),
             style: {
@@ -1084,8 +1577,8 @@ const Me = V("w-full", {
           {
             className: n(
               "h-full",
-              ee({ variant: a }),
-              C("full"),
+              oe({ variant: t }),
+              $("full"),
               "transition-all",
               "duration-300",
               "ease-out"
@@ -1100,20 +1593,20 @@ const Me = V("w-full", {
     )
   ] }));
 });
-He.displayName = "Progress";
-const Ie = {
+Qe.displayName = "Progress";
+const ea = {
   horizontal: "w-full border-t",
   vertical: "h-full border-l self-stretch"
-}, Pe = {
+}, aa = {
   solid: "border-solid",
   dashed: "border-dashed",
   dotted: "border-dotted"
-}, We = H(function(o) {
-  var c = o, {
-    orientation: t = "horizontal",
+}, ta = H(function(c) {
+  var o = c, {
+    orientation: a = "horizontal",
     variant: r = "solid",
-    className: a = ""
-  } = c, s = m(c, [
+    className: t = ""
+  } = o, s = h(o, [
     "orientation",
     "variant",
     "className"
@@ -1121,11 +1614,11 @@ const Ie = {
   const d = n(
     "border-0",
     "border-line-default",
-    Ie[t],
-    Pe[r],
-    a
+    ea[a],
+    aa[r],
+    t
   );
-  return t === "vertical" ? /* @__PURE__ */ l(
+  return a === "vertical" ? /* @__PURE__ */ l(
     "div",
     u({
       className: d,
@@ -1141,16 +1634,16 @@ const Ie = {
     }, s)
   );
 });
-We.displayName = "Separator";
-function $a(d) {
+ta.displayName = "Separator";
+function za(d) {
   var p = d, {
     variant: e = "text",
-    width: t,
+    width: a,
     height: r,
-    lines: a = 1,
+    lines: t = 1,
     className: s = "",
-    "aria-label": o
-  } = p, c = m(p, [
+    "aria-label": c
+  } = p, o = h(p, [
     "variant",
     "width",
     "height",
@@ -1158,31 +1651,31 @@ function $a(d) {
     "className",
     "aria-label"
   ]);
-  const h = [
+  const x = [
     "motion-safe:animate-pulse",
     "bg-surface-muted",
-    C("sm")
-  ], g = {
+    $("sm")
+  ], m = {
     text: "h-4",
     card: "h-32",
     list: "h-12",
-    circle: C("full")
-  }, b = n(...h, g[e], s), f = {};
-  t && (f.width = t), r && (f.height = r);
-  const x = o || `Loading ${e} content`;
-  return e === "text" && a > 1 ? /* @__PURE__ */ l(
+    circle: $("full")
+  }, b = n(...x, m[e], s), f = {};
+  a && (f.width = a), r && (f.height = r);
+  const g = c || `Loading ${e} content`;
+  return e === "text" && t > 1 ? /* @__PURE__ */ l(
     "div",
     y(u({
       className: i("sm", "space-y"),
       role: "status",
       "aria-busy": "true",
-      "aria-label": x
-    }, c), {
-      children: Array.from({ length: a }).map((w, N) => /* @__PURE__ */ l(
+      "aria-label": g
+    }, o), {
+      children: Array.from({ length: t }).map((w, N) => /* @__PURE__ */ l(
         "div",
         {
           className: b,
-          style: N === a - 1 ? { width: "75%" } : f,
+          style: N === t - 1 ? { width: "75%" } : f,
           "aria-hidden": "true"
         },
         N
@@ -1195,73 +1688,11 @@ function $a(d) {
       style: f,
       role: "status",
       "aria-busy": "true",
-      "aria-label": x
-    }, c)
+      "aria-label": g
+    }, o)
   );
 }
-const Oe = V("motion-safe:animate-spin", {
-  variants: {
-    size: {
-      sm: "h-4 w-4",
-      md: "h-5 w-5",
-      lg: "h-8 w-8"
-    },
-    variant: {
-      primary: "text-fg-brand",
-      secondary: "text-fg-brand-secondary",
-      neutral: "text-fg-secondary"
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "primary"
-  }
-}), Be = H(function(c) {
-  var d = c, {
-    size: t = "md",
-    variant: r = "primary",
-    label: a,
-    className: s = ""
-  } = d, o = m(d, [
-    "size",
-    "variant",
-    "label",
-    "className"
-  ]);
-  return /* @__PURE__ */ v(
-    "div",
-    y(u({
-      className: n("inline-flex", "items-center", s),
-      role: "status",
-      "aria-label": a || "Loading",
-      "aria-live": "polite"
-    }, o), {
-      children: [
-        /* @__PURE__ */ l(
-          ge,
-          {
-            className: n(Oe({ size: t, variant: r })),
-            "aria-hidden": "true"
-          }
-        ),
-        a && /* @__PURE__ */ l(
-          "span",
-          {
-            className: n(
-              i("sm", "ml"),
-              k("bodySmall"),
-              "text-fg-secondary",
-              "sr-only"
-            ),
-            children: a
-          }
-        )
-      ]
-    })
-  );
-});
-Be.displayName = "Spinner";
-const Ue = {
+const ra = {
   primary: {
     // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
     light: "text-indigo-400",
@@ -1313,16 +1744,16 @@ const Ue = {
     contrast: "text-fg-inverse"
   }
 };
-function Ke(h, p) {
-  var g = h, {
+function na(x, p) {
+  var m = x, {
     variant: e = "paragraph",
-    bold: t,
+    bold: a,
     italic: r,
-    className: a,
+    className: t,
     as: s,
-    colorRole: o = "neutral",
-    colorShade: c = "dark"
-  } = g, d = m(g, [
+    colorRole: c = "neutral",
+    colorShade: o = "dark"
+  } = m, d = h(m, [
     "variant",
     "bold",
     "italic",
@@ -1347,25 +1778,25 @@ function Ke(h, p) {
         f = "p";
         break;
     }
-  return e === "heading" ? b.push(R("h2")) : e === "body" || e === "paragraph" ? b.push(R("body")) : e === "bodySmall" ? b.push(R("bodySmall")) : e === "bodyLarge" ? b.push(R("bodyLarge")) : e === "caption" ? b.push(R("caption")) : e === "label" ? b.push(R("label")) : b.push(R("body")), t && b.push("font-bold"), r && b.push("italic"), b.push(Ue[o][c]), /* @__PURE__ */ l(f, u({ ref: p, className: n(...b, a) }, d));
+  return e === "heading" ? b.push(D("h2")) : e === "body" || e === "paragraph" ? b.push(D("body")) : e === "bodySmall" ? b.push(D("bodySmall")) : e === "bodyLarge" ? b.push(D("bodyLarge")) : e === "caption" ? b.push(D("caption")) : e === "label" ? b.push(D("label")) : b.push(D("body")), a && b.push("font-bold"), r && b.push("italic"), b.push(ra[c][o]), /* @__PURE__ */ l(f, u({ ref: p, className: n(...b, t) }, d));
 }
-const _ = D(Ke), Xe = {
+const M = _(na), sa = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
   lg: "max-w-screen-lg",
   xl: "max-w-screen-xl",
   "2xl": "max-w-screen-2xl",
   full: "max-w-full"
-}, qe = ae.forwardRef(
+}, ia = ce.forwardRef(
   (p, d) => {
-    var h = p, {
+    var x = p, {
       className: e,
-      maxWidth: t = "lg",
+      maxWidth: a = "lg",
       paddingX: r = "base",
-      paddingY: a = "base",
+      paddingY: t = "base",
       center: s = !0,
-      children: o
-    } = h, c = m(h, [
+      children: c
+    } = x, o = h(x, [
       "className",
       "maxWidth",
       "paddingX",
@@ -1379,29 +1810,29 @@ const _ = D(Ke), Xe = {
         ref: d,
         className: n(
           "w-full",
-          Xe[t],
+          sa[a],
           i(r, "px"),
-          i(a, "py"),
+          i(t, "py"),
           s && "mx-auto",
           e
         )
-      }, c), {
-        children: o
+      }, o), {
+        children: c
       })
     );
   }
 );
-qe.displayName = "Container";
-const Ge = ae.forwardRef(
+ia.displayName = "Container";
+const la = ce.forwardRef(
   (p, d) => {
-    var h = p, {
+    var x = p, {
       className: e,
-      spacing: t = "base",
+      spacing: a = "base",
       align: r = "stretch",
-      justify: a = "start",
+      justify: t = "start",
       direction: s = "column",
-      children: o
-    } = h, c = m(h, [
+      children: c
+    } = x, o = h(x, [
       "className",
       "spacing",
       "align",
@@ -1409,7 +1840,7 @@ const Ge = ae.forwardRef(
       "direction",
       "children"
     ]);
-    const g = s === "column" ? i(t, "gap-y") : i(t, "gap-x"), b = {
+    const m = s === "column" ? i(a, "gap-y") : i(a, "gap-x"), b = {
       start: "items-start",
       center: "items-center",
       end: "items-end",
@@ -1429,42 +1860,42 @@ const Ge = ae.forwardRef(
         className: n(
           "flex",
           s === "column" ? "flex-col" : "flex-row",
-          g,
+          m,
           b[r],
-          f[a],
+          f[t],
           e
         )
-      }, c), {
-        children: o
+      }, o), {
+        children: c
       })
     );
   }
 );
-Ge.displayName = "Stack";
-function Ye(s) {
-  var o = s, {
+la.displayName = "Stack";
+function oa(s) {
+  var c = s, {
     items: e,
-    separator: t = "/",
+    separator: a = "/",
     className: r = ""
-  } = o, a = m(o, [
+  } = c, t = h(c, [
     "items",
     "separator",
     "className"
   ]);
-  const c = [
+  const o = [
     "flex",
     "items-center",
     i("sm", "space-x"),
-    k("bodySmall")
-  ], d = n(...c, r);
-  return /* @__PURE__ */ l("nav", y(u({ "aria-label": "Breadcrumb", className: d }, a), { children: /* @__PURE__ */ l(
+    S("bodySmall")
+  ], d = n(...o, r);
+  return /* @__PURE__ */ l("nav", y(u({ "aria-label": "Breadcrumb", className: d }, t), { children: /* @__PURE__ */ l(
     "ol",
     {
       className: n("flex", "items-center", i("sm", "space-x")),
-      children: e.map((p, h) => {
-        const g = h === e.length - 1;
+      children: e.map((p, x) => {
+        const m = x === e.length - 1;
         return /* @__PURE__ */ v("li", { className: "flex items-center", children: [
-          h > 0 && /* @__PURE__ */ l(
+          x > 0 && /* @__PURE__ */ l(
             "span",
             {
               className: n(
@@ -1472,15 +1903,15 @@ function Ye(s) {
                 "text-fg-tertiary"
               ),
               "aria-hidden": "true",
-              children: t
+              children: a
             }
           ),
-          g ? /* @__PURE__ */ l(
+          m ? /* @__PURE__ */ l(
             "span",
             {
               className: n(
                 "text-fg-primary",
-                z("label")
+                B("label")
               ),
               "aria-current": "page",
               children: p.label
@@ -1496,8 +1927,8 @@ function Ye(s) {
                 i("xs", "pt"),
                 "border-b-2",
                 "border-transparent",
-                k("bodySmall"),
-                z("label"),
+                S("bodySmall"),
+                B("label"),
                 "transition-colors",
                 "text-fg-secondary",
                 "hover:border-line-emphasis",
@@ -1506,13 +1937,13 @@ function Ye(s) {
               children: p.label
             }
           ) : /* @__PURE__ */ l("span", { className: "text-fg-secondary", children: p.label })
-        ] }, h);
+        ] }, x);
       })
     }
   ) }));
 }
-function Ze(a) {
-  var s = a, { children: e, className: t } = s, r = m(s, ["children", "className"]);
+function ca(t) {
+  var s = t, { children: e, className: a } = s, r = h(s, ["children", "className"]);
   return /* @__PURE__ */ l(
     "div",
     y(u({
@@ -1522,21 +1953,21 @@ function Ze(a) {
         i("base", "mb"),
         "[&:has([data-card-actions])]:grid-cols-[1fr_auto]",
         "[&:has([data-card-actions])>[data-card-actions]]:row-span-full",
-        t
+        a
       )
     }, r), {
       children: e
     })
   );
 }
-function Je(c) {
-  var d = c, {
+function da(o) {
+  var d = o, {
     children: e,
-    icon: t,
+    icon: a,
     badge: r,
-    as: a = "h2",
+    as: t = "h2",
     className: s
-  } = d, o = m(d, [
+  } = d, c = h(d, [
     "children",
     "icon",
     "badge",
@@ -1544,7 +1975,7 @@ function Je(c) {
     "className"
   ]);
   return /* @__PURE__ */ v(
-    a,
+    t,
     y(u({
       className: n(
         "text-base font-semibold text-fg-primary",
@@ -1552,30 +1983,30 @@ function Je(c) {
         i("sm", "gap"),
         s
       )
-    }, o), {
+    }, c), {
       children: [
-        t ? /* @__PURE__ */ l("span", { className: "shrink-0 inline-flex", children: t }) : null,
+        a ? /* @__PURE__ */ l("span", { className: "shrink-0 inline-flex", children: a }) : null,
         /* @__PURE__ */ l("span", { children: e }),
         r ? /* @__PURE__ */ l("span", { className: "inline-flex", children: r }) : null
       ]
     })
   );
 }
-function Qe(a) {
-  var s = a, {
+function ua(t) {
+  var s = t, {
     children: e,
-    className: t
-  } = s, r = m(s, [
+    className: a
+  } = s, r = h(s, [
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ l("p", y(u({ className: n("text-sm text-fg-secondary", t) }, r), { children: e }));
+  return /* @__PURE__ */ l("p", y(u({ className: n("text-sm text-fg-secondary", a) }, r), { children: e }));
 }
-function ea(a) {
-  var s = a, {
+function fa(t) {
+  var s = t, {
     children: e,
-    className: t
-  } = s, r = m(s, [
+    className: a
+  } = s, r = h(s, [
     "children",
     "className"
   ]);
@@ -1586,28 +2017,28 @@ function ea(a) {
       className: n(
         "flex items-center self-start",
         i("sm", "gap"),
-        t
+        a
       )
     }, r), {
       children: e
     })
   );
 }
-function aa(a) {
-  var s = a, { children: e, className: t } = s, r = m(s, ["children", "className"]);
-  return /* @__PURE__ */ l("div", y(u({ className: n(t) }, r), { children: e }));
+function pa(t) {
+  var s = t, { children: e, className: a } = s, r = h(s, ["children", "className"]);
+  return /* @__PURE__ */ l("div", y(u({ className: n(a) }, r), { children: e }));
 }
-function ta(h) {
-  var g = h, {
+function ma(x) {
+  var m = x, {
     variant: e = "default",
-    padding: t = "medium",
+    padding: a = "medium",
     className: r = "",
-    onClick: a,
+    onClick: t,
     "aria-label": s,
-    "aria-labelledby": o,
-    asSection: c = !1,
+    "aria-labelledby": c,
+    asSection: o = !1,
     children: d
-  } = g, p = m(g, [
+  } = m, p = h(m, [
     "variant",
     "padding",
     "className",
@@ -1617,27 +2048,27 @@ function ta(h) {
     "asSection",
     "children"
   ]);
-  typeof process != "undefined" && process.env.NODE_ENV !== "production" && c && !s && !o && console.warn(
+  typeof process != "undefined" && process.env.NODE_ENV !== "production" && o && !s && !c && console.warn(
     "[Card] `asSection={true}` requires an accessible name. Pass `aria-labelledby` pointing to your Card.Title `id`, or `aria-label`. A <section> without a name is an anonymous landmark that hurts screen-reader navigation."
   );
-  const b = V(
+  const b = L(
     n(
       "bg-surface-base",
-      C("lg"),
+      $("lg"),
       "border",
       "border-line-default",
-      B("sm")
+      Y("sm")
     ),
     {
       variants: {
         variant: {
           default: "",
           hover: n(
-            `hover:${B("md")}`,
+            `hover:${Y("md")}`,
             "transition-shadow",
             "cursor-pointer"
           ),
-          selected: n("border-line-brand", B("md"))
+          selected: n("border-line-brand", Y("md"))
         },
         padding: {
           none: "",
@@ -1651,66 +2082,66 @@ function ta(h) {
         padding: "medium"
       }
     }
-  ), f = a !== void 0, x = f ? "button" : void 0, w = f ? 0 : void 0, N = n(b({ variant: e, padding: t }), r), E = u({
+  ), f = t !== void 0, g = f ? "button" : void 0, w = f ? 0 : void 0, N = n(b({ variant: e, padding: a }), r), k = u({
     className: N,
-    role: x,
+    role: g,
     tabIndex: w,
-    onClick: a,
-    onKeyDown: f ? (M) => {
-      f && (M.key === "Enter" || M.key === " ") && (M.preventDefault(), a == null || a());
+    onClick: t,
+    onKeyDown: f ? (F) => {
+      f && (F.key === "Enter" || F.key === " ") && (F.preventDefault(), t == null || t());
     } : void 0,
     "aria-label": s,
-    "aria-labelledby": o
+    "aria-labelledby": c
   }, p);
-  return c ? /* @__PURE__ */ l("section", y(u({}, E), { children: d })) : /* @__PURE__ */ l("div", y(u({}, E), { children: d }));
+  return o ? /* @__PURE__ */ l("section", y(u({}, k), { children: d })) : /* @__PURE__ */ l("div", y(u({}, k), { children: d }));
 }
-const te = H(ta);
-te.displayName = "Card";
-const I = te;
-I.Header = Ze;
-I.Title = Je;
-I.Subtitle = Qe;
-I.Actions = ea;
-I.Body = aa;
-function Ca(a) {
-  var s = a, {
+const pe = H(ma);
+pe.displayName = "Card";
+const W = pe;
+W.Header = ca;
+W.Title = da;
+W.Subtitle = ua;
+W.Actions = fa;
+W.Body = pa;
+function Ra(t) {
+  var s = t, {
     children: e,
-    className: t = ""
-  } = s, r = m(s, [
+    className: a = ""
+  } = s, r = h(s, [
     "children",
     "className"
   ]);
   return /* @__PURE__ */ l(
     "div",
     y(u({
-      className: `flex flex-col ${i("1.5", "space-y")} ${i("lg", "p")} ${i("base", "pb")} ${t}`
+      className: `flex flex-col ${i("1.5", "space-y")} ${i("lg", "p")} ${i("base", "pb")} ${a}`
     }, r), {
       children: e
     })
   );
 }
-function ka(a) {
-  var s = a, {
+function Oa(t) {
+  var s = t, {
     children: e,
-    className: t = ""
-  } = s, r = m(s, [
+    className: a = ""
+  } = s, r = h(s, [
     "children",
     "className"
   ]);
   return /* @__PURE__ */ l(
     "div",
     y(u({
-      className: `flex flex-col-reverse sm:flex-row sm:justify-end sm:${i("sm", "space-x")} ${i("lg", "p")} ${i("base", "pt")} ${t}`
+      className: `flex flex-col-reverse sm:flex-row sm:justify-end sm:${i("sm", "space-x")} ${i("lg", "p")} ${i("base", "pt")} ${a}`
     }, r), {
       children: e
     })
   );
 }
-function Ea(a) {
-  var s = a, {
+function Ma(t) {
+  var s = t, {
     children: e,
-    className: t = ""
-  } = s, r = m(s, [
+    className: a = ""
+  } = s, r = h(s, [
     "children",
     "className"
   ]);
@@ -1721,18 +2152,18 @@ function Ea(a) {
         ${i("lg", "p")}
         border-b
         border-line-default
-        ${t}
+        ${a}
       `
     }, r), {
       children: e
     })
   );
 }
-function Ta(a) {
-  var s = a, {
+function Ba(t) {
+  var s = t, {
     children: e,
-    className: t = ""
-  } = s, r = m(s, [
+    className: a = ""
+  } = s, r = h(s, [
     "children",
     "className"
   ]);
@@ -1746,20 +2177,20 @@ function Ta(a) {
         flex
         justify-end
         ${i("sm", "gap")}
-        ${t}
+        ${a}
       `
     }, r), {
       children: e
     })
   );
 }
-function La(o) {
-  var c = o, {
+function Ha(c) {
+  var o = c, {
     label: e,
-    children: t,
+    children: a,
     wrap: r = !0,
-    className: a
-  } = c, s = m(c, [
+    className: t
+  } = o, s = h(o, [
     "label",
     "children",
     "wrap",
@@ -1775,7 +2206,7 @@ function La(o) {
         "flex items-center",
         r ? "flex-wrap" : "flex-nowrap",
         i("sm", "gap"),
-        a
+        t
       )
     }, s), {
       children: [
@@ -1785,27 +2216,27 @@ function La(o) {
           // chips overflow — it stays on one line and the chips wrap around it.
           /* @__PURE__ */ l("span", { className: "shrink-0 text-fg-secondary text-sm", children: e })
         ) : null,
-        t
+        a
       ]
     })
   );
 }
-function Aa({ children: e, className: t }) {
+function Pa({ children: e, className: a }) {
   return /* @__PURE__ */ l(
     "div",
     {
       className: n(
         "flex-shrink-0 flex items-center",
         i("sm", "gap"),
-        t
+        a
       ),
       children: e
     }
   );
 }
-function Va({
+function Ia({
   children: e,
-  className: t
+  className: a
 }) {
   return /* @__PURE__ */ l(
     "nav",
@@ -1815,14 +2246,14 @@ function Va({
         i("base", "gap"),
         "hidden md:flex",
         // Hidden on mobile, visible on desktop
-        t
+        a
       ),
       "aria-label": "Main navigation",
       children: e
     }
   );
 }
-const ra = V(
+const ga = L(
   n(
     "w-full flex flex-col",
     i("2xl", "py"),
@@ -1849,27 +2280,27 @@ const ra = V(
       align: "start"
     }
   }
-), sa = {
+), xa = {
   start: "items-start",
   center: "items-center"
-}, na = {
+}, ba = {
   start: "justify-start",
   center: "justify-center"
-}, ia = D(
-  function(w, x) {
+}, ha = _(
+  function(w, g) {
     var N = w, {
-      kicker: t,
+      kicker: a,
       title: r,
-      description: a,
+      description: t,
       actions: s,
-      kpis: o,
-      meta: c,
+      kpis: c,
+      meta: o,
       variant: d = "plain",
       align: p = "start",
-      className: h,
-      "aria-label": g,
+      className: x,
+      "aria-label": m,
       "aria-labelledby": b
-    } = N, f = m(N, [
+    } = N, f = h(N, [
       "kicker",
       "title",
       "description",
@@ -1882,15 +2313,15 @@ const ra = V(
       "aria-label",
       "aria-labelledby"
     ]);
-    const L = g != null || b != null, E = g != null ? g : typeof r == "string" ? r : void 0;
-    return typeof process != "undefined" && process.env.NODE_ENV !== "production" && !L && typeof r != "string" && console.warn(
+    const T = m != null || b != null, k = m != null ? m : typeof r == "string" ? r : void 0;
+    return typeof process != "undefined" && process.env.NODE_ENV !== "production" && !T && typeof r != "string" && console.warn(
       "[HeroSection] A non-string `title` was provided without `aria-label` or `aria-labelledby`. The hero <section> landmark will have no accessible name. Pass `aria-label`, or set `aria-labelledby` to your title's id."
     ), /* @__PURE__ */ v(
       "section",
       y(u({
-        ref: x,
-        className: n(ra({ variant: d, align: p }), h),
-        "aria-label": E,
+        ref: g,
+        className: n(ga({ variant: d, align: p }), x),
+        "aria-label": k,
         "aria-labelledby": b
       }, f), {
         children: [
@@ -1900,22 +2331,22 @@ const ra = V(
               className: n(
                 "flex flex-col",
                 i("md", "gap-y"),
-                sa[p]
+                xa[p]
               ),
               children: [
-                t ? /* @__PURE__ */ l(
-                  _,
+                a ? /* @__PURE__ */ l(
+                  M,
                   {
                     as: "span",
                     variant: "caption",
                     colorRole: "primary",
                     colorShade: "DEFAULT",
                     className: "text-sm font-semibold tracking-wide uppercase",
-                    children: t
+                    children: a
                   }
                 ) : null,
                 /* @__PURE__ */ l(
-                  _,
+                  M,
                   {
                     as: "h1",
                     variant: "heading",
@@ -1923,15 +2354,15 @@ const ra = V(
                     children: r
                   }
                 ),
-                a ? /* @__PURE__ */ l(
-                  _,
+                t ? /* @__PURE__ */ l(
+                  M,
                   {
                     as: "p",
                     variant: "body",
                     colorRole: "neutral",
                     colorShade: "DEFAULT",
                     className: "max-w-2xl text-base leading-relaxed sm:text-lg",
-                    children: a
+                    children: t
                   }
                 ) : null
               ]
@@ -1943,21 +2374,21 @@ const ra = V(
               className: n(
                 "flex flex-wrap",
                 i("sm", "gap"),
-                na[p]
+                ba[p]
               ),
               children: s
             }
           ) : null,
-          o ? /* @__PURE__ */ l("div", { className: "w-full", children: o }) : null,
-          c ? /* @__PURE__ */ l(
-            _,
+          c ? /* @__PURE__ */ l("div", { className: "w-full", children: c }) : null,
+          o ? /* @__PURE__ */ l(
+            M,
             {
               as: "p",
               variant: "caption",
               colorRole: "neutral",
               colorShade: "light",
               className: "text-sm",
-              children: c
+              children: o
             }
           ) : null
         ]
@@ -1965,11 +2396,11 @@ const ra = V(
     );
   }
 );
-ia.displayName = "HeroSection";
-function Fa(r) {
-  var a = r, {
+ha.displayName = "HeroSection";
+function Wa(r) {
+  var t = r, {
     className: e = ""
-  } = a, t = m(a, [
+  } = t, a = h(t, [
     "className"
   ]);
   return /* @__PURE__ */ l(
@@ -1982,21 +2413,21 @@ function Fa(r) {
         ${i("sm", "my")}
         ${e}
       `
-    }, t)
+    }, a)
   );
 }
-function Ra(a) {
-  var s = a, {
+function Ua(t) {
+  var s = t, {
     orientation: e = "horizontal",
-    className: t = ""
-  } = s, r = m(s, [
+    className: a = ""
+  } = s, r = h(s, [
     "orientation",
     "className"
   ]);
   return e === "vertical" ? /* @__PURE__ */ l(
     "div",
     u({
-      className: n("w-px", "h-6", "bg-line-default", "mx-auto", t),
+      className: n("w-px", "h-6", "bg-line-default", "mx-auto", a),
       role: "separator",
       "aria-orientation": "vertical"
     }, r)
@@ -2011,7 +2442,7 @@ function Ra(a) {
         // my-2 (8px) para consistência com gap-2 usado em outros lugares
         "flex-shrink-0",
         // Prevenir que separator encolha
-        t
+        a
       ),
       role: "separator",
       "aria-orientation": "horizontal",
@@ -2023,7 +2454,7 @@ function Ra(a) {
     }, r)
   );
 }
-const la = V(
+const ya = L(
   // Base classes
   n("w-full", "flex", "flex-col", i("sm", "gap")),
   {
@@ -2038,15 +2469,15 @@ const la = V(
     }
   }
 );
-function ja(d) {
+function Ka(d) {
   var p = d, {
     title: e,
-    description: t,
+    description: a,
     breadcrumb: r,
-    actions: a,
+    actions: t,
     variant: s = "default",
-    className: o
-  } = p, c = m(p, [
+    className: c
+  } = p, o = h(p, [
     "title",
     "description",
     "breadcrumb",
@@ -2054,8 +2485,8 @@ function ja(d) {
     "variant",
     "className"
   ]);
-  return /* @__PURE__ */ v("div", y(u({ className: n(la({ variant: s }), o) }, c), { children: [
-    r && r.length > 0 && /* @__PURE__ */ l(Ye, { items: r }),
+  return /* @__PURE__ */ v("div", y(u({ className: n(ya({ variant: s }), c) }, o), { children: [
+    r && r.length > 0 && /* @__PURE__ */ l(oa, { items: r }),
     /* @__PURE__ */ v(
       "div",
       {
@@ -2063,7 +2494,7 @@ function ja(d) {
         children: [
           /* @__PURE__ */ v("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ l(
-              _,
+              M,
               {
                 variant: "heading",
                 as: "h1",
@@ -2071,13 +2502,13 @@ function ja(d) {
                 children: e
               }
             ),
-            t && /* @__PURE__ */ l(_, { variant: "body", className: "text-fg-secondary", children: t })
+            a && /* @__PURE__ */ l(M, { variant: "body", className: "text-fg-secondary", children: a })
           ] }),
-          a && /* @__PURE__ */ l(
+          t && /* @__PURE__ */ l(
             "div",
             {
               className: `flex items-center ${i("sm", "gap")} flex-shrink-0`,
-              children: a
+              children: t
             }
           )
         ]
@@ -2085,25 +2516,25 @@ function ja(d) {
     )
   ] }));
 }
-const oa = {
+const va = {
   start: "items-start text-left",
   center: "items-center text-center"
-}, ca = {
+}, wa = {
   neutral: "text-fg-tertiary",
   success: "text-fg-success",
   warning: "text-fg-warning",
   error: "text-fg-error"
 };
-function Da(p) {
-  var h = p, {
+function qa(p) {
+  var x = p, {
     value: e,
-    label: t,
+    label: a,
     hint: r,
-    icon: a,
+    icon: t,
     align: s = "start",
-    tone: o = "neutral",
-    className: c
-  } = h, d = m(h, [
+    tone: c = "neutral",
+    className: o
+  } = x, d = h(x, [
     "value",
     "label",
     "hint",
@@ -2112,7 +2543,7 @@ function Da(p) {
     "tone",
     "className"
   ]);
-  const g = e == null;
+  const m = e == null;
   return /* @__PURE__ */ v(
     "div",
     y(u({
@@ -2120,13 +2551,13 @@ function Da(p) {
         "bg-surface-base flex-1 flex flex-col",
         i("base", "p"),
         i("xs", "gap-y"),
-        oa[s],
-        c
+        va[s],
+        o
       )
     }, d), {
       children: [
-        a ? /* @__PURE__ */ l("span", { className: "text-icon-default inline-flex", children: a }) : null,
-        g ? /* @__PURE__ */ l(
+        t ? /* @__PURE__ */ l("span", { className: "text-icon-default inline-flex", children: t }) : null,
+        m ? /* @__PURE__ */ l(
           "span",
           {
             "aria-label": "No data",
@@ -2134,24 +2565,24 @@ function Da(p) {
             children: "—"
           }
         ) : /* @__PURE__ */ l("span", { className: "text-fg-primary text-2xl font-semibold leading-tight", children: e }),
-        /* @__PURE__ */ l("span", { className: "text-fg-secondary text-sm", children: t }),
-        r ? /* @__PURE__ */ l("span", { className: n("text-xs", ca[o]), children: r }) : null
+        /* @__PURE__ */ l("span", { className: "text-fg-secondary text-sm", children: a }),
+        r ? /* @__PURE__ */ l("span", { className: n("text-xs", wa[c]), children: r }) : null
       ]
     })
   );
 }
-const da = {
+const Na = {
   2: "md:grid-cols-2",
   3: "md:grid-cols-3",
   4: "md:grid-cols-4"
 };
-function _a(o) {
-  var c = o, {
+function Xa(c) {
+  var o = c, {
     layout: e = "grid",
-    cols: t = 4,
+    cols: a = 4,
     className: r,
-    children: a
-  } = c, s = m(c, [
+    children: t
+  } = o, s = h(o, [
     "layout",
     "cols",
     "className",
@@ -2163,28 +2594,28 @@ function _a(o) {
     y(u({
       className: n(
         "bg-line-default border border-line-default overflow-hidden gap-px",
-        C("lg"),
-        d ? `grid grid-cols-2 ${da[t]}` : "flex",
+        $("lg"),
+        d ? `grid grid-cols-2 ${Na[a]}` : "flex",
         r
       )
     }, s), {
-      children: a
+      children: t
     })
   );
 }
-function za(s) {
-  var o = s, { column: e, row: t, className: r = "" } = o, a = m(o, ["column", "row", "className"]);
-  const c = e.key in t ? t[e.key] : void 0;
+function Ga(s) {
+  var c = s, { column: e, row: a, className: r = "" } = c, t = h(c, ["column", "row", "className"]);
+  const o = e.key in a ? a[e.key] : void 0;
   return /* @__PURE__ */ l(
     "td",
     y(u({
       className: `${i("lg", "px")} ${i("base", "py")} whitespace-nowrap text-sm text-fg-primary ${e.hiddenOnMobile ? "hidden md:table-cell" : ""} ${r}`
-    }, a), {
-      children: e.render ? e.render(c, t) : String(c != null ? c : "")
+    }, t), {
+      children: e.render ? e.render(o, a) : String(o != null ? o : "")
     })
   );
 }
-const ua = V(n("flex items-center", "border-b"), {
+const Sa = L(n("flex items-center", "border-b"), {
   variants: {
     variant: {
       default: n("border-line-default", i("base", "gap-x")),
@@ -2194,7 +2625,7 @@ const ua = V(n("flex items-center", "border-b"), {
   defaultVariants: {
     variant: "default"
   }
-}), fa = V(
+}), $a = L(
   n(
     "relative -mb-px inline-flex items-center",
     i("xs", "gap-x"),
@@ -2204,7 +2635,7 @@ const ua = V(n("flex items-center", "border-b"), {
     "focus-visible:ring-2",
     "focus-visible:ring-line-focus",
     "focus-visible:ring-offset-2",
-    C("sm")
+    $("sm")
   ),
   {
     variants: {
@@ -2212,12 +2643,12 @@ const ua = V(n("flex items-center", "border-b"), {
         default: n(
           i("sm", "px"),
           i("sm", "py"),
-          k("body")
+          S("body")
         ),
         sub: n(
           i("sm", "px"),
           i("xs", "py"),
-          k("bodySmall")
+          S("bodySmall")
         )
       },
       active: {
@@ -2242,21 +2673,21 @@ const ua = V(n("flex items-center", "border-b"), {
       active: !1
     }
   }
-), pa = n(
+), ka = n(
   "inline-flex items-center justify-center",
-  C("full"),
+  $("full"),
   i("xs", "px"),
   "bg-surface-muted text-fg-secondary text-xs"
-), ma = D(
-  function(h, p) {
-    var g = h, {
-      items: t,
+), Ca = _(
+  function(x, p) {
+    var m = x, {
+      items: a,
       variant: r = "default",
-      linkComponent: a,
+      linkComponent: t,
       className: s,
-      "aria-label": o,
-      "aria-labelledby": c
-    } = g, d = m(g, [
+      "aria-label": c,
+      "aria-labelledby": o
+    } = m, d = h(m, [
       "items",
       "variant",
       "linkComponent",
@@ -2264,70 +2695,70 @@ const ua = V(n("flex items-center", "border-b"), {
       "aria-label",
       "aria-labelledby"
     ]);
-    typeof process != "undefined" && process.env.NODE_ENV !== "production" && !o && !c && console.warn(
+    typeof process != "undefined" && process.env.NODE_ENV !== "production" && !c && !o && console.warn(
       '[TabsAsLinks] renders a <nav> landmark and should have an accessible name. Pass `aria-label` (e.g. "Painel") or `aria-labelledby` — multiple unnamed navs on a page are ambiguous to screen readers.'
     );
-    const b = a != null ? a : "a";
+    const b = t != null ? t : "a";
     return /* @__PURE__ */ l(
       "nav",
       y(u({
         ref: p,
-        className: n(ua({ variant: r }), s),
-        "aria-label": o,
-        "aria-labelledby": c
+        className: n(Sa({ variant: r }), s),
+        "aria-label": c,
+        "aria-labelledby": o
       }, d), {
-        children: t.map((f, x) => /* @__PURE__ */ v(
+        children: a.map((f, g) => /* @__PURE__ */ v(
           b,
           {
             href: f.href,
             "aria-current": f.active ? "page" : void 0,
             "data-active": f.active ? "true" : void 0,
-            className: fa({ variant: r, active: !!f.active }),
+            className: $a({ variant: r, active: !!f.active }),
             children: [
               f.icon ? /* @__PURE__ */ l("span", { "aria-hidden": "true", className: "inline-flex shrink-0", children: f.icon }) : null,
               /* @__PURE__ */ l("span", { children: f.label }),
-              f.count !== void 0 ? /* @__PURE__ */ l("span", { className: pa, children: f.count }) : null
+              f.count !== void 0 ? /* @__PURE__ */ l("span", { className: ka, children: f.count }) : null
             ]
           },
-          f.href || x
+          f.href || g
         ))
       })
     );
   }
 );
-ma.displayName = "TabsAsLinks";
-function Ma({
+Ca.displayName = "TabsAsLinks";
+function Ya({
   items: e,
-  orientation: t = "vertical",
+  orientation: a = "vertical",
   className: r = ""
 }) {
-  return t === "horizontal" ? /* @__PURE__ */ l("div", { className: `flex items-start ${r}`, children: e.map((a, s) => {
-    const o = a.status || (s === 0 ? "active" : s < e.findIndex((d) => d.status === "active") ? "completed" : "default"), c = s === e.length - 1;
+  return a === "horizontal" ? /* @__PURE__ */ l("div", { className: `flex items-start ${r}`, children: e.map((t, s) => {
+    const c = t.status || (s === 0 ? "active" : s < e.findIndex((d) => d.status === "active") ? "completed" : "default"), o = s === e.length - 1;
     return /* @__PURE__ */ l("div", { className: "flex items-start flex-1", children: /* @__PURE__ */ v("div", { className: "flex flex-col items-center flex-1", children: [
       /* @__PURE__ */ l(
         "div",
-        y(u({}, o === "default" ? { "data-marker": "pending" } : {}), {
+        y(u({}, c === "default" ? { "data-marker": "pending" } : {}), {
           className: `
                   flex
                   items-center
                   justify-center
                   w-10
                   h-10
-                  ${C("full")}
+                  ${$("full")}
                   border-2
-                  ${o === "completed" ? "bg-success border-success text-fg-inverse" : o === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : o === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+                  ${c === "completed" ? "bg-success border-success text-fg-inverse" : c === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : c === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
                 `,
-          children: a.icon || (o === "completed" ? /* @__PURE__ */ l(Y, { className: "h-4 w-4" }) : s + 1)
+          children: t.icon || (c === "completed" ? /* @__PURE__ */ l(ne, { className: "h-4 w-4" }) : s + 1)
         })
       ),
-      !c && /* @__PURE__ */ l(
+      !o && /* @__PURE__ */ l(
         "div",
         {
           className: `
                       w-full
                       h-0.5
                       ${i("sm", "mt")}
-                      ${o === "completed" ? "bg-success" : "bg-line-emphasis"}
+                      ${c === "completed" ? "bg-success" : "bg-line-emphasis"}
                     `
         }
       ),
@@ -2336,28 +2767,28 @@ function Ma({
         {
           className: `${i("base", "mt")} text-center ${i("base", "px")}`,
           children: [
-            a.timestamp && /* @__PURE__ */ l(
+            t.timestamp && /* @__PURE__ */ l(
               "p",
               {
                 className: `text-xs text-fg-tertiary ${i("xs", "mb")}`,
-                children: a.timestamp
+                children: t.timestamp
               }
             ),
-            /* @__PURE__ */ l("h3", { className: "text-sm font-semibold text-fg-primary", children: a.title }),
-            a.description && /* @__PURE__ */ l(
+            /* @__PURE__ */ l("h3", { className: "text-sm font-semibold text-fg-primary", children: t.title }),
+            t.description && /* @__PURE__ */ l(
               "p",
               {
                 className: `text-xs text-fg-secondary ${i("xs", "mt")}`,
-                children: a.description
+                children: t.description
               }
             ),
-            a.content && /* @__PURE__ */ l("div", { className: i("sm", "mt"), children: a.content })
+            t.content && /* @__PURE__ */ l("div", { className: i("sm", "mt"), children: t.content })
           ]
         }
       )
-    ] }) }, a.id);
-  }) }) : /* @__PURE__ */ l("div", { className: `${i("none", "space-y")} ${r}`, children: e.map((a, s) => {
-    const o = a.status || (s === 0 ? "active" : s < e.findIndex((d) => d.status === "active") ? "completed" : "default"), c = s === e.length - 1;
+    ] }) }, t.id);
+  }) }) : /* @__PURE__ */ l("div", { className: `${i("none", "space-y")} ${r}`, children: e.map((t, s) => {
+    const c = t.status || (s === 0 ? "active" : s < e.findIndex((d) => d.status === "active") ? "completed" : "default"), o = s === e.length - 1;
     return /* @__PURE__ */ v(
       "div",
       {
@@ -2366,21 +2797,21 @@ function Ma({
           /* @__PURE__ */ v("div", { className: "flex flex-col items-center", children: [
             /* @__PURE__ */ l(
               "div",
-              y(u({}, o === "default" ? { "data-marker": "pending" } : {}), {
+              y(u({}, c === "default" ? { "data-marker": "pending" } : {}), {
                 className: `
                 flex
                 items-center
                 justify-center
                 w-10
                 h-10
-                ${C("full")}
+                ${$("full")}
                 border-2
-                ${o === "completed" ? "bg-success border-success text-fg-inverse" : o === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : o === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+                ${c === "completed" ? "bg-success border-success text-fg-inverse" : c === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : c === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
               `,
-                children: a.icon || (o === "completed" ? /* @__PURE__ */ l(Y, { className: "h-4 w-4" }) : s + 1)
+                children: t.icon || (c === "completed" ? /* @__PURE__ */ l(ne, { className: "h-4 w-4" }) : s + 1)
               })
             ),
-            !c && /* @__PURE__ */ l(
+            !o && /* @__PURE__ */ l(
               "div",
               {
                 className: `
@@ -2388,17 +2819,17 @@ function Ma({
                     flex-1
                     min-h-16
                     ${i("sm", "mt")}
-                    ${o === "completed" ? "bg-success" : "bg-line-emphasis"}
+                    ${c === "completed" ? "bg-success" : "bg-line-emphasis"}
                   `
               }
             )
           ] }),
           /* @__PURE__ */ v("div", { className: `flex-1 ${i("xl", "pb")}`, children: [
-            a.timestamp && /* @__PURE__ */ l(
+            t.timestamp && /* @__PURE__ */ l(
               "p",
               {
                 className: `text-xs text-fg-tertiary ${i("xs", "mb")}`,
-                children: a.timestamp
+                children: t.timestamp
               }
             ),
             /* @__PURE__ */ l(
@@ -2407,61 +2838,63 @@ function Ma({
                 className: `
                 text-base
                 font-semibold
-                ${o === "active" ? "text-fg-brand-emphasis" : "text-fg-primary"}
+                ${c === "active" ? "text-fg-brand-emphasis" : "text-fg-primary"}
               `,
-                children: a.title
+                children: t.title
               }
             ),
-            a.description && /* @__PURE__ */ l(
+            t.description && /* @__PURE__ */ l(
               "p",
               {
                 className: `text-sm text-fg-secondary ${i("xs", "mt")}`,
-                children: a.description
+                children: t.description
               }
             ),
-            a.content && /* @__PURE__ */ l("div", { className: i("md", "mt"), children: a.content })
+            t.content && /* @__PURE__ */ l("div", { className: i("md", "mt"), children: t.content })
           ] })
         ]
       },
-      a.id
+      t.id
     );
   }) });
 }
 export {
-  ye as Badge,
-  Ye as Breadcrumb,
-  I as Card,
-  ea as CardActions,
-  aa as CardBody,
-  Ze as CardHeader,
-  Qe as CardSubtitle,
-  Je as CardTitle,
-  Re as Chip,
-  qe as Container,
-  ka as DialogFooter,
-  Ca as DialogHeader,
-  Ta as DrawerFooter,
-  Ea as DrawerHeader,
-  Na as ErrorMessage,
-  La as FilterChips,
-  Aa as HeaderActions,
-  Va as HeaderNavigation,
-  ia as HeroSection,
-  Sa as Info,
-  _e as Label,
-  Fa as MenuSeparator,
-  Ra as NavbarSeparator,
-  ja as PageHeader,
-  He as Progress,
-  We as Separator,
-  $a as Skeleton,
-  Be as Spinner,
-  Ge as Stack,
-  Da as Stat,
-  _a as StatGroup,
-  za as TableCell,
-  ma as TabsAsLinks,
-  _ as Text,
-  Ma as Timeline
+  Ee as Badge,
+  oa as Breadcrumb,
+  Ie as Button,
+  W as Card,
+  fa as CardActions,
+  pa as CardBody,
+  ca as CardHeader,
+  ua as CardSubtitle,
+  da as CardTitle,
+  We as Chip,
+  ia as Container,
+  Oa as DialogFooter,
+  Ra as DialogHeader,
+  Ba as DrawerFooter,
+  Ma as DrawerHeader,
+  _a as ErrorMessage,
+  Ha as FilterChips,
+  Pa as HeaderActions,
+  Ia as HeaderNavigation,
+  ha as HeroSection,
+  ja as Info,
+  qe as InputBase,
+  Ye as Label,
+  Wa as MenuSeparator,
+  Ua as NavbarSeparator,
+  Ka as PageHeader,
+  Qe as Progress,
+  ta as Separator,
+  za as Skeleton,
+  fe as Spinner,
+  la as Stack,
+  qa as Stat,
+  Xa as StatGroup,
+  Ga as TableCell,
+  Ca as TabsAsLinks,
+  M as Text,
+  Ya as Timeline
 };
 //# sourceMappingURL=index.js.map