@fabio.caffarello/react-design-system 4.6.0 → 4.8.0

package/dist/server/index.js

@@ -1,33 +1,33 @@
-var ge = Object.defineProperty, be = Object.defineProperties;
-var xe = Object.getOwnPropertyDescriptors;
+var be = Object.defineProperty, xe = Object.defineProperties;
+var he = Object.getOwnPropertyDescriptors;
 var K = Object.getOwnPropertySymbols;
-var ae = Object.prototype.hasOwnProperty, te = 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, p = (e, a) => {
+var te = Object.prototype.hasOwnProperty, re = Object.prototype.propertyIsEnumerable;
+var G = (e, a, r) => a in e ? be(e, a, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[a] = r, m = (e, a) => {
   for (var r in a || (a = {}))
-    ae.call(a, r) && G(e, r, a[r]);
+    te.call(a, r) && G(e, r, a[r]);
   if (K)
     for (var r of K(a))
-      te.call(a, r) && G(e, r, a[r]);
+      re.call(a, r) && G(e, r, a[r]);
   return e;
-}, y = (e, a) => be(e, xe(a));
+}, y = (e, a) => xe(e, he(a));
 var h = (e, a) => {
   var r = {};
   for (var t in e)
-    ae.call(e, t) && a.indexOf(t) < 0 && (r[t] = e[t]);
+    te.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 && te.call(e, t) && (r[t] = e[t]);
+      a.indexOf(t) < 0 && re.call(e, t) && (r[t] = e[t]);
   return r;
 };
-var re = (e, a, r) => G(e, typeof a != "symbol" ? a + "" : a, r);
-import { jsx as l, jsxs as v, Fragment as Z } from "react/jsx-runtime";
-import * as z from "react";
-import ce, { memo as M, forwardRef as F } 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 _ {
+var ne = (e, a, r) => G(e, typeof a != "symbol" ? a + "" : a, r);
+import { jsxs as v, jsx as l, Fragment as J } from "react/jsx-runtime";
+import * as A from "react";
+import de, { forwardRef as L, memo as M } from "react";
+import { clsx as ye } from "clsx";
+import { twMerge as ve } from "tailwind-merge";
+import { cva as we } from "class-variance-authority";
+import { Loader2 as Ne, X as Se, AlertCircle as $e, CheckCircle2 as se } from "lucide-react";
+class j {
   /**
    * Create a radius token
    */
@@ -83,19 +83,120 @@ class _ {
     };
   }
 }
-const $e = {
-  none: _.create("none"),
-  sm: _.create("sm"),
-  md: _.create("md"),
-  lg: _.create("lg"),
-  xl: _.create("xl"),
-  "2xl": _.create("2xl"),
-  "3xl": _.create("3xl"),
-  full: _.create("full")
+const ke = {
+  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 $(e) {
-  return $e[e].tailwind;
+  return ke[e].tailwind;
+}
+function n(...e) {
+  return ve(ye(e));
 }
+const z = (e, a) => {
+  const r = we(e, a);
+  return ((t) => {
+    const i = r(t);
+    return n(i);
+  });
+}, Ce = {
+  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",
+  "2xl": "h-24 w-24 text-3xl",
+  "3xl": "h-28 w-28 text-4xl"
+}, Y = {
+  circle: $("full"),
+  square: $("none"),
+  rounded: $("md")
+}, Ee = L(
+  function(x, p) {
+    var f = x, {
+      src: a,
+      alt: r,
+      fallback: t,
+      size: i = "md",
+      variant: o = "circle",
+      loading: c = "eager",
+      "aria-label": d,
+      className: u = ""
+    } = f, b = h(f, [
+      "src",
+      "alt",
+      "fallback",
+      "size",
+      "variant",
+      "loading",
+      "aria-label",
+      "className"
+    ]);
+    const g = !a, w = typeof t == "string" ? t.toUpperCase().slice(0, 2) : t, N = d || r || "User avatar";
+    return /* @__PURE__ */ v(
+      "div",
+      y(m({
+        ref: p,
+        className: n(
+          "relative",
+          "inline-flex",
+          "items-center",
+          "justify-center",
+          "shrink-0",
+          "font-medium",
+          "overflow-hidden",
+          Ce[i],
+          Y[o],
+          "bg-surface-muted",
+          "text-fg-primary",
+          u
+        ),
+        role: "img",
+        "aria-label": N
+      }, b), {
+        children: [
+          !g && /* @__PURE__ */ l(
+            "img",
+            {
+              src: a,
+              alt: r || "",
+              loading: c,
+              className: n(
+                "w-full",
+                "h-full",
+                "object-cover",
+                Y[o]
+              ),
+              "aria-hidden": "true"
+            }
+          ),
+          g && /* @__PURE__ */ l(
+            "span",
+            {
+              className: n(
+                "flex",
+                "items-center",
+                "justify-center",
+                "w-full",
+                "h-full",
+                Y[o]
+              ),
+              "aria-hidden": "true",
+              children: w || "?"
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+Ee.displayName = "AvatarBase";
 class C {
   // 4px base
   /**
@@ -163,8 +264,8 @@ class C {
     }[a] || String(a);
   }
 }
-re(C, "BASE_UNIT", 4);
-const ke = {
+ne(C, "BASE_UNIT", 4);
+const Te = {
   // Micro spacing (0-14px)
   none: C.create(0),
   "0.5": C.create(0.5),
@@ -202,7 +303,7 @@ const ke = {
   // 96px
 };
 function s(e, a = "p") {
-  const t = ke[e].tailwind;
+  const t = Te[e].tailwind;
   return `${{
     p: "p",
     m: "m",
@@ -296,7 +397,7 @@ class E {
   }
 }
 E.createFontWeight("light"), E.createFontWeight("normal"), E.createFontWeight("medium"), E.createFontWeight("semibold"), E.createFontWeight("bold");
-const J = {
+const Q = {
   // Headings
   h1: E.create("4xl", "tight", "bold"),
   h2: E.create("3xl", "tight", "bold"),
@@ -314,31 +415,22 @@ const J = {
   button: E.create("base", "normal", "medium")
 };
 function D(e) {
-  const a = J[e];
+  const a = Q[e];
   return `${a.fontSize.tailwind} ${a.lineHeight.tailwind} ${a.fontWeight.tailwind}`;
 }
-function w(e) {
-  return J[e].fontSize.tailwind;
+function S(e) {
+  return Q[e].fontSize.tailwind;
 }
-function j(e) {
-  return J[e].fontWeight.tailwind;
+function _(e) {
+  return Q[e].fontWeight.tailwind;
 }
-function n(...e) {
-  return ye(he(e));
-}
-const A = (e, a) => {
-  const r = ve(e, a);
-  return ((t) => {
-    const i = r(t);
-    return n(i);
-  });
-}, Ce = A(
+const Ve = z(
   // Base classes
   n(
     "inline-flex",
     "items-center",
     "justify-center",
-    j("label"),
+    _("label"),
     $("md"),
     "border"
   ),
@@ -357,17 +449,17 @@ const A = (e, a) => {
         sm: n(
           s("1.5", "px"),
           s("0.5", "py"),
-          w("caption")
+          S("caption")
         ),
         md: n(
           s("sm", "px"),
           s("xs", "py"),
-          w("caption")
+          S("caption")
         ),
         lg: n(
           s("sm", "px"),
           s("xs", "py"),
-          w("bodySmall")
+          S("bodySmall")
         )
       },
       style: {
@@ -470,16 +562,16 @@ const A = (e, a) => {
       style: "solid"
     }
   }
-), Ee = M(
-  F(function(b, u) {
-    var m = b, {
+), Ae = M(
+  L(function(b, u) {
+    var p = b, {
       variant: a = "neutral",
       size: r = "md",
       style: t = "solid",
       className: i = "",
       children: o,
       "aria-label": c
-    } = m, d = h(m, [
+    } = p, d = h(p, [
       "variant",
       "size",
       "style",
@@ -487,7 +579,7 @@ const A = (e, a) => {
       "children",
       "aria-label"
     ]);
-    const x = n(Ce({ variant: a, size: r, style: t }), i);
+    const x = n(Ve({ variant: a, size: r, style: t }), i);
     let f;
     if (c)
       f = c;
@@ -499,7 +591,7 @@ const A = (e, a) => {
     }
     return /* @__PURE__ */ l(
       "span",
-      y(p({
+      y(m({
         ref: u,
         role: "status",
         "aria-label": f,
@@ -510,107 +602,107 @@ const A = (e, a) => {
     );
   })
 );
-Ee.displayName = "Badge";
-function se(e, a) {
+Ae.displayName = "Badge";
+function ie(e, a) {
   if (typeof e == "function")
     return e(a);
   e != null && (e.current = a);
 }
-function Te(...e) {
+function ze(...e) {
   return (a) => {
     let r = !1;
     const t = e.map((i) => {
-      const o = se(i, a);
+      const o = ie(i, a);
       return !r && typeof o == "function" && (r = !0), o;
     });
     if (r)
       return () => {
         for (let i = 0; i < t.length; i++) {
           const o = t[i];
-          typeof o == "function" ? o() : se(e[i], null);
+          typeof o == "function" ? o() : ie(e[i], null);
         }
       };
   };
 }
-function Ve(...e) {
-  return z.useCallback(Te(...e), e);
+function Le(...e) {
+  return A.useCallback(ze(...e), e);
 }
 // @__NO_SIDE_EFFECTS__
-function ze(e) {
-  const a = z.forwardRef((r, t) => {
+function Fe(e) {
+  const a = A.forwardRef((r, t) => {
     var g;
     let f = r, { children: i } = f, o = h(f, ["children"]), c = null, d = !1;
     const u = [];
-    ie(i) && typeof q == "function" && (i = q(i._payload)), z.Children.forEach(i, (N) => {
-      var S;
-      if (je(N)) {
+    le(i) && typeof q == "function" && (i = q(i._payload)), A.Children.forEach(i, (w) => {
+      var N;
+      if (Oe(w)) {
         d = !0;
-        const T = N;
+        const T = w;
         let k = "child" in T.props ? T.props.child : T.props.children;
-        ie(k) && typeof q == "function" && (k = q(k._payload)), c = De(T, k), u.push((S = c == null ? void 0 : c.props) == null ? void 0 : S.children);
+        le(k) && typeof q == "function" && (k = q(k._payload)), c = _e(T, k), u.push((N = c == null ? void 0 : c.props) == null ? void 0 : N.children);
       } else
-        u.push(N);
-    }), c ? c = z.cloneElement(c, void 0, u) : (
+        u.push(w);
+    }), c ? c = A.cloneElement(c, void 0, u) : (
       // 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 && z.Children.count(i) === 1 && z.isValidElement(i) && (c = i)
+      !d && A.Children.count(i) === 1 && A.isValidElement(i) && (c = i)
     );
-    const b = c ? _e(c) : void 0, m = Ve(t, b);
+    const b = c ? Be(c) : void 0, p = Le(t, b);
     if (!c) {
       if (i || i === 0)
         throw new Error(
-          d ? Me(e) : Be(e)
+          d ? Ie(e) : Pe(e)
         );
       return i;
     }
-    const x = Fe(o, (g = c.props) != null ? g : {});
-    return c.type !== z.Fragment && (x.ref = t ? m : b), z.cloneElement(c, x);
+    const x = Re(o, (g = c.props) != null ? g : {});
+    return c.type !== A.Fragment && (x.ref = t ? p : b), A.cloneElement(c, x);
   });
   return a.displayName = `${e}.Slot`, a;
 }
-var de = /* @__PURE__ */ ze("Slot"), ue = /* @__PURE__ */ Symbol.for("radix.slottable");
+var ue = /* @__PURE__ */ Fe("Slot"), fe = /* @__PURE__ */ Symbol.for("radix.slottable");
 // @__NO_SIDE_EFFECTS__
-function Ae(e) {
+function De(e) {
   const a = (r) => "child" in r ? r.children(r.child) : r.children;
-  return a.displayName = `${e}.Slottable`, a.__radixId = ue, a;
+  return a.displayName = `${e}.Slottable`, a.__radixId = fe, a;
 }
-var Le = /* @__PURE__ */ Ae("Slottable"), De = (e, a) => {
+var je = /* @__PURE__ */ De("Slottable"), _e = (e, a) => {
   if ("child" in e.props) {
     const r = e.props.child;
-    return z.isValidElement(r) ? z.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 z.isValidElement(a) ? a : null;
+  return A.isValidElement(a) ? a : null;
 };
-function Fe(e, a) {
-  const r = p({}, a);
+function Re(e, a) {
+  const r = m({}, a);
   for (const t in a) {
     const i = e[t], o = a[t];
     /^on[A-Z]/.test(t) ? i && o ? r[t] = (...d) => {
       const u = o(...d);
       return i(...d), u;
-    } : i && (r[t] = i) : t === "style" ? r[t] = p(p({}, i), o) : t === "className" && (r[t] = [i, o].filter(Boolean).join(" "));
+    } : i && (r[t] = i) : t === "style" ? r[t] = m(m({}, i), o) : t === "className" && (r[t] = [i, o].filter(Boolean).join(" "));
   }
-  return p(p({}, e), r);
+  return m(m({}, e), r);
 }
-function _e(e) {
+function Be(e) {
   var t, i;
   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 = (i = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : i.get, r = a && "isReactWarning" in a && a.isReactWarning, r ? e.props.ref : e.props.ref || e.ref);
 }
-function je(e) {
-  return z.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === ue;
+function Oe(e) {
+  return A.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === fe;
 }
-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);
+var Me = /* @__PURE__ */ Symbol.for("react.lazy");
+function le(e) {
+  return e != null && typeof e == "object" && "$$typeof" in e && e.$$typeof === Me && "_payload" in e && He(e._payload);
 }
-function Oe(e) {
+function He(e) {
   return typeof e == "object" && e !== null && "then" in e;
 }
-var Be = (e) => `${e} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`, Me = (e) => `${e} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`, q = z[" use ".trim().toString()];
-const He = A("motion-safe:animate-spin", {
+var Pe = (e) => `${e} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`, Ie = (e) => `${e} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`, q = A[" use ".trim().toString()];
+const We = z("motion-safe:animate-spin", {
   variants: {
     size: {
       sm: "h-4 w-4",
@@ -627,7 +719,7 @@ const He = A("motion-safe:animate-spin", {
     size: "md",
     variant: "primary"
   }
-}), fe = M(function(c) {
+}), pe = M(function(c) {
   var d = c, {
     size: a = "md",
     variant: r = "primary",
@@ -641,7 +733,7 @@ const He = A("motion-safe:animate-spin", {
   ]);
   return /* @__PURE__ */ v(
     "div",
-    y(p({
+    y(m({
       className: n("inline-flex", "items-center", i),
       role: "status",
       "aria-label": t || "Loading",
@@ -649,9 +741,9 @@ const He = A("motion-safe:animate-spin", {
     }, o), {
       children: [
         /* @__PURE__ */ l(
-          we,
+          Ne,
           {
-            className: n(He({ size: a, variant: r })),
+            className: n(We({ size: a, variant: r })),
             "aria-hidden": "true"
           }
         ),
@@ -660,7 +752,7 @@ const He = A("motion-safe:animate-spin", {
           {
             className: n(
               s("sm", "ml"),
-              w("bodySmall"),
+              S("bodySmall"),
               "text-fg-secondary",
               "sr-only"
             ),
@@ -671,8 +763,8 @@ const He = A("motion-safe:animate-spin", {
     })
   );
 });
-fe.displayName = "Spinner";
-const Pe = A(
+pe.displayName = "Spinner";
+const Ue = z(
   // Base classes
   n(
     "inline-flex",
@@ -769,19 +861,19 @@ const Pe = A(
         sm: n(
           s("md", "px"),
           s("1.5", "py"),
-          w("bodySmall"),
+          S("bodySmall"),
           s("1.5", "gap")
         ),
         md: n(
           s("base", "px"),
           s("sm", "py"),
-          w("body"),
+          S("body"),
           s("sm", "gap")
         ),
         lg: n(
           s("lg", "px"),
           s("md", "py"),
-          w("bodyLarge"),
+          S("bodyLarge"),
           s("2.5", "gap")
         )
       }
@@ -843,9 +935,9 @@ function X({
     }
   ) : null;
 }
-const Ie = M(
-  F(function(k, T) {
-    var L = k, {
+const Ke = M(
+  L(function(k, T) {
+    var F = k, {
       variant: a = "primary",
       size: r = "md",
       isLoading: t = !1,
@@ -855,12 +947,12 @@ const Ie = M(
       rightIcon: d,
       fullWidth: u = !1,
       asChild: b = !1,
-      as: m,
+      as: p,
       className: x = "",
       disabled: f = !1,
       children: g,
-      "aria-label": N
-    } = L, S = h(L, [
+      "aria-label": w
+    } = F, N = h(F, [
       "variant",
       "size",
       "isLoading",
@@ -876,37 +968,37 @@ const Ie = M(
       "children",
       "aria-label"
     ]);
-    typeof process != "undefined" && process.env.NODE_ENV !== "production" && b && m !== void 0 && m !== "button" && console.warn(
+    typeof process != "undefined" && process.env.NODE_ENV !== "production" && b && p !== void 0 && p !== "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 R = b ? de : m != null ? m : "button", O = n(
-      Pe({ variant: a, size: r }),
+    const R = b ? ue : p != null ? p : "button", B = n(
+      Ue({ variant: a, size: r }),
       u && "w-full",
       x
-    ), I = (a === "iconOnly" || !g && (c || d)) && !N && !g ? "Button" : N, me = o || /* @__PURE__ */ l(fe, { size: r === "sm" ? "sm" : r === "lg" ? "lg" : "md", variant: a === "error" ? "primary" : a === "primary" || a === "secondary" ? "neutral" : "primary" }), Q = !b && (m === void 0 || m === "button") && !S.type ? "button" : void 0, ee = p(p({
-      className: O,
+    ), I = (a === "iconOnly" || !g && (c || d)) && !w && !g ? "Button" : w, ge = o || /* @__PURE__ */ l(pe, { size: r === "sm" ? "sm" : r === "lg" ? "lg" : "md", variant: a === "error" ? "primary" : a === "primary" || a === "secondary" ? "neutral" : "primary" }), ee = !b && (p === void 0 || p === "button") && !N.type ? "button" : void 0, ae = m(m({
+      className: B,
       disabled: f || t,
       "aria-busy": t,
       "aria-label": I,
       "aria-disabled": f || t
-    }, Q ? { type: Q } : {}), S);
-    return b ? /* @__PURE__ */ v(R, y(p({ ref: T }, ee), { children: [
+    }, ee ? { type: ee } : {}), N);
+    return b ? /* @__PURE__ */ v(R, y(m({ ref: T }, ae), { children: [
       c && /* @__PURE__ */ l(X, { position: "left", children: c }),
-      /* @__PURE__ */ l(Le, { children: g }),
+      /* @__PURE__ */ l(je, { children: g }),
       d && /* @__PURE__ */ l(X, { position: "right", children: d })
-    ] })) : /* @__PURE__ */ l(R, y(p({ ref: T }, ee), { children: t ? /* @__PURE__ */ v(Z, { children: [
-      me,
+    ] })) : /* @__PURE__ */ l(R, y(m({ ref: T }, ae), { children: t ? /* @__PURE__ */ v(J, { children: [
+      ge,
       i && /* @__PURE__ */ l("span", { className: s("sm", "ml"), children: i }),
       !i && g && /* @__PURE__ */ l("span", { className: `${s("sm", "ml")} opacity-0`, children: g })
-    ] }) : /* @__PURE__ */ v(Z, { children: [
+    ] }) : /* @__PURE__ */ v(J, { children: [
       c && /* @__PURE__ */ l(X, { position: "left", children: c }),
       g,
       d && /* @__PURE__ */ l(X, { position: "right", children: d })
     ] }) }));
   })
 );
-Ie.displayName = "Button";
-const le = A(
+Ke.displayName = "Button";
+const oe = z(
   // Base classes
   n(
     "inline-flex",
@@ -941,17 +1033,17 @@ const le = A(
         sm: n(
           s("xs", "px"),
           s("xs", "py"),
-          w("caption")
+          S("caption")
         ),
         md: n(
           s("sm", "px"),
           s("xs", "py"),
-          w("bodySmall")
+          S("bodySmall")
         ),
         lg: n(
           s("md", "px"),
           s("sm", "py"),
-          w("body")
+          S("body")
         )
       },
       selected: {
@@ -995,7 +1087,7 @@ const le = A(
       disabled: !1
     }
   }
-), We = F(function(a, r) {
+), qe = L(function(a, r) {
   const {
     children: t,
     variant: i = "default",
@@ -1004,7 +1096,7 @@ const le = A(
     disabled: d = !1,
     className: u = "",
     "aria-label": b,
-    tabIndex: m,
+    tabIndex: p,
     asChild: x = !1
   } = a, g = (() => {
     if (b) return b;
@@ -1017,22 +1109,22 @@ const le = A(
   })();
   if (x)
     return /* @__PURE__ */ l(
-      de,
+      ue,
       {
         ref: r,
         className: n(
-          le({ variant: i, size: o, selected: c, disabled: d }),
+          oe({ variant: i, size: o, selected: c, disabled: d }),
           u
         ),
         "aria-label": b,
         "aria-disabled": d || void 0,
-        tabIndex: m,
+        tabIndex: p,
         children: t
       }
     );
-  const { onRemove: N, onClick: S, count: T } = a, k = S !== void 0, L = k && !d, R = (V) => {
-    d || (V.key === "Enter" || V.key === " ") && (V.preventDefault(), S == null || S());
-  }, O = T !== void 0, P = c || i === "filled", I = O ? /* @__PURE__ */ l(
+  const { onRemove: w, onClick: N, count: T } = a, k = N !== void 0, F = k && !d, R = (V) => {
+    d || (V.key === "Enter" || V.key === " ") && (V.preventDefault(), N == null || N());
+  }, B = T !== void 0, P = c || i === "filled", I = B ? /* @__PURE__ */ l(
     "span",
     {
       "aria-hidden": k || void 0,
@@ -1045,20 +1137,20 @@ const le = A(
         $("full"),
         s("xs", "px"),
         s("0.5", "py"),
-        w("caption"),
-        j("label"),
+        S("caption"),
+        _("label"),
         P ? n("bg-surface-base", "text-fg-brand-emphasis") : n("bg-surface-brand-strong", "text-fg-inverse")
       ),
       children: T
     }
-  ) : null, U = O && g !== void 0 ? `${g}, ${T}` : g;
+  ) : null, U = B && g !== void 0 ? `${g}, ${T}` : g;
   return /* @__PURE__ */ v(
     "div",
     {
       ref: r,
       className: n(
-        le({ variant: i, size: o, selected: c, disabled: d }),
-        N && s("xs", "pr"),
+        oe({ variant: i, size: o, selected: c, disabled: d }),
+        w && s("xs", "pr"),
         u
       ),
       "aria-disabled": d,
@@ -1067,12 +1159,12 @@ const le = A(
           "button",
           {
             type: "button",
-            onClick: d ? void 0 : S,
+            onClick: d ? void 0 : N,
             onKeyDown: R,
             disabled: d,
             "aria-pressed": c ? !0 : void 0,
             "aria-label": b || U,
-            tabIndex: m !== void 0 ? m : L ? 0 : void 0,
+            tabIndex: p !== void 0 ? p : F ? 0 : void 0,
             className: n(
               "flex-1",
               "bg-transparent",
@@ -1091,12 +1183,12 @@ const le = A(
           }
         ) : /* @__PURE__ */ l("span", { children: t }),
         I,
-        N && !d && /* @__PURE__ */ l(
+        w && !d && /* @__PURE__ */ l(
           "button",
           {
             type: "button",
             onClick: (V) => {
-              V.stopPropagation(), N();
+              V.stopPropagation(), w();
             },
             className: n(
               s("xs", "ml"),
@@ -1110,15 +1202,15 @@ const le = A(
               "focus:ring-offset-1"
             ),
             "aria-label": `Remove ${g || "chip"}`,
-            children: /* @__PURE__ */ l(Ne, { className: "h-3 w-3", "aria-hidden": "true" })
+            children: /* @__PURE__ */ l(Se, { className: "h-3 w-3", "aria-hidden": "true" })
           }
         )
       ]
     }
   );
 });
-We.displayName = "Chip";
-const Ue = A(
+qe.displayName = "Chip";
+const Xe = z(
   n("inline-flex", "items-center", "border", $("md")),
   {
     variants: {
@@ -1163,16 +1255,16 @@ const Ue = A(
     },
     defaultVariants: { tone: "neutral", size: "md" }
   }
-), Ke = M(
-  F(function(b, u) {
-    var m = b, {
+), Ge = M(
+  L(function(b, u) {
+    var p = b, {
       label: a,
       source: r,
       tone: t = "neutral",
       size: i = "md",
       icon: o,
       className: c = ""
-    } = m, d = h(m, [
+    } = p, d = h(p, [
       "label",
       "source",
       "tone",
@@ -1183,9 +1275,9 @@ const Ue = A(
     const x = r != null && r !== "", f = i === "sm" ? "caption" : "bodySmall";
     return /* @__PURE__ */ v(
       "span",
-      y(p({
+      y(m({
         ref: u,
-        className: n(Ue({ tone: t, size: i }), c)
+        className: n(Xe({ tone: t, size: i }), c)
       }, d), {
         children: [
           o ? /* @__PURE__ */ l(
@@ -1200,20 +1292,20 @@ const Ue = A(
             "span",
             {
               className: n(
-                w(f),
-                j("label")
+                S(f),
+                _("label")
               ),
               children: a
             }
           ),
-          x ? /* @__PURE__ */ v(Z, { children: [
-            /* @__PURE__ */ l("span", { "aria-hidden": "true", className: w("caption"), children: "·" }),
+          x ? /* @__PURE__ */ v(J, { children: [
+            /* @__PURE__ */ l("span", { "aria-hidden": "true", className: S("caption"), children: "·" }),
             /* @__PURE__ */ l(
               "span",
               {
                 className: n(
-                  w("caption"),
-                  j("caption")
+                  S("caption"),
+                  _("caption")
                 ),
                 children: r
               }
@@ -1224,8 +1316,8 @@ const Ue = A(
     );
   })
 );
-Ke.displayName = "DataBadge";
-function ja(i) {
+Ge.displayName = "DataBadge";
+function Oa(i) {
   var o = i, {
     message: e,
     id: a,
@@ -1237,18 +1329,18 @@ function ja(i) {
   ]);
   const c = [
     s("xs", "mt"),
-    w("bodySmall"),
+    S("bodySmall"),
     "text-fg-error",
     "flex",
     "items-center",
     s("xs", "gap")
   ], d = n(...c, r);
-  return /* @__PURE__ */ v("div", y(p({ role: "alert", id: a, className: d, "aria-live": "polite" }, t), { children: [
-    /* @__PURE__ */ l(Se, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  return /* @__PURE__ */ v("div", y(m({ role: "alert", id: a, className: d, "aria-live": "polite" }, t), { children: [
+    /* @__PURE__ */ l($e, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
     /* @__PURE__ */ l("span", { children: e })
   ] }));
 }
-function Ra(t) {
+function Ma(t) {
   var i = t, {
     variant: e = "info",
     className: a
@@ -1263,7 +1355,7 @@ function Ra(t) {
   };
   return /* @__PURE__ */ l(
     "div",
-    p({
+    m({
       role: "alert",
       className: n(
         "border",
@@ -1276,7 +1368,7 @@ function Ra(t) {
     }, r)
   );
 }
-const qe = A(
+const Ye = z(
   n(
     "w-full",
     $("md"),
@@ -1312,17 +1404,17 @@ const qe = A(
       size: {
         sm: n(
           "h-8",
-          w("bodySmall"),
+          S("bodySmall"),
           s("md", "px")
         ),
         md: n(
           "h-10",
-          w("body"),
+          S("body"),
           s("base", "px")
         ),
         lg: n(
           "h-12",
-          w("bodyLarge"),
+          S("bodyLarge"),
           s("lg", "px")
         )
       },
@@ -1343,7 +1435,7 @@ const qe = A(
     }
   }
 );
-function Xe({
+function Ze({
   error: e,
   success: a,
   helperText: r,
@@ -1367,8 +1459,8 @@ function Xe({
     }
   );
 }
-const Ge = F(
-  function(T, S) {
+const Je = L(
+  function(T, N) {
     var k = T, {
       id: a,
       label: r,
@@ -1379,11 +1471,11 @@ const Ge = F(
       variant: d = "outlined",
       leftIcon: u,
       rightIcon: b,
-      rightSlot: m,
+      rightSlot: p,
       className: x = "",
       disabled: f = !1,
       type: g = "text"
-    } = k, N = h(k, [
+    } = k, w = h(k, [
       "id",
       "label",
       "error",
@@ -1401,13 +1493,13 @@ const Ge = F(
     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 L = t ? "error" : i ? "success" : "default", R = t && a ? `${a}-error` : void 0, O = o && a ? `${a}-helper` : void 0, P = c === "sm" ? "h-4 w-4" : c === "lg" ? "h-5 w-5" : "h-4 w-4", I = c === "sm" ? "top-2" : c === "lg" ? "top-3.5" : "top-2.5", U = n(
-      qe({ variant: d, size: c, state: L }),
+    const F = t ? "error" : i ? "success" : "default", R = t && a ? `${a}-error` : void 0, B = o && a ? `${a}-helper` : void 0, P = c === "sm" ? "h-4 w-4" : c === "lg" ? "h-5 w-5" : "h-4 w-4", I = c === "sm" ? "top-2" : c === "lg" ? "top-3.5" : "top-2.5", U = n(
+      Ye({ variant: d, size: c, 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.
       u && (c === "sm" ? "pl-9" : s(c === "lg" ? "3xl" : "2xl", "pl")),
-      (b || m) && (c === "sm" ? "pr-9" : s(c === "lg" ? "3xl" : "2xl", "pr")),
+      (b || p) && (c === "sm" ? "pr-9" : s(c === "lg" ? "3xl" : "2xl", "pr")),
       x
     ), V = n(
       "block",
@@ -1427,23 +1519,23 @@ const Ge = F(
         ),
         /* @__PURE__ */ l(
           "input",
-          p({
+          m({
             id: a,
-            ref: S,
+            ref: N,
             type: g,
             className: U,
             disabled: f,
             "aria-invalid": t,
-            "aria-required": N.required,
-            "aria-describedby": R || O,
+            "aria-required": w.required,
+            "aria-describedby": R || B,
             suppressHydrationWarning: !0
-          }, N)
+          }, w)
         ),
-        (b || m) && /* @__PURE__ */ l(
+        (b || p) && /* @__PURE__ */ l(
           "div",
           {
             className: `absolute right-3 top-0 bottom-0 flex items-center ${s("xs", "gap")}`,
-            children: m != null ? m : /* @__PURE__ */ l(
+            children: p != null ? p : /* @__PURE__ */ l(
               "div",
               {
                 className: `text-fg-secondary opacity-60 pointer-events-none ${P}`,
@@ -1454,25 +1546,25 @@ const Ge = F(
         )
       ] }),
       (t || i || o) && /* @__PURE__ */ l(
-        Xe,
+        Ze,
         {
           error: t,
           success: i,
           helperText: o,
           errorId: R,
-          helperId: O
+          helperId: B
         }
       )
     ] });
   }
 );
-Ge.displayName = "InputBase";
-const Ye = n(
+Je.displayName = "InputBase";
+const Qe = n(
   "block",
-  w("label"),
-  j("label"),
+  S("label"),
+  _("label"),
   "text-fg-primary"
-), Ze = {
+), ea = {
   default: "",
   required: n(
     "after:content-['*']",
@@ -1485,19 +1577,19 @@ const Ye = n(
     "after:text-fg-tertiary",
     "after:font-normal"
   )
-}, Je = M(
-  F(function(c, o) {
+}, aa = M(
+  L(function(c, o) {
     var d = c, { variant: a = "default", className: r = "", children: t } = d, i = h(d, ["variant", "className", "children"]);
     const u = n(
-      Ye,
-      Ze[a],
+      Qe,
+      ea[a],
       r
     );
-    return /* @__PURE__ */ l("label", y(p({ ref: o, className: u }, i), { children: t }));
+    return /* @__PURE__ */ l("label", y(m({ ref: o, className: u }, i), { children: t }));
   })
 );
-Je.displayName = "Label";
-class B {
+aa.displayName = "Label";
+class O {
   /**
    * Create a shadow token
    */
@@ -1541,19 +1633,19 @@ class B {
     }[a];
   }
 }
-const Qe = {
-  none: B.create("none"),
-  sm: B.create("sm"),
-  md: B.create("md"),
-  lg: B.create("lg"),
-  xl: B.create("xl"),
-  "2xl": B.create("2xl"),
-  inner: B.create("inner")
+const ta = {
+  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 Y(e) {
-  return Qe[e].tailwind;
+function Z(e) {
+  return ta[e].tailwind;
 }
-const ea = A("w-full", {
+const ra = z("w-full", {
   variants: {
     size: {
       sm: "h-1",
@@ -1573,7 +1665,7 @@ const ea = A("w-full", {
     size: "md",
     variant: "primary"
   }
-}), oe = A("transition-all", {
+}), ce = z("transition-all", {
   variants: {
     variant: {
       primary: "bg-surface-brand",
@@ -1587,7 +1679,7 @@ const ea = A("w-full", {
   defaultVariants: {
     variant: "primary"
   }
-}), aa = F(function(x, m) {
+}), na = L(function(x, p) {
   var f = x, {
     value: a,
     max: r = 100,
@@ -1607,8 +1699,8 @@ const ea = A("w-full", {
     "aria-label",
     "className"
   ]);
-  const g = a === void 0, N = g ? void 0 : Math.min(Math.max(a / r * 100, 0), 100), S = d || (g ? "Loading in progress" : `Progress: ${N == null ? void 0 : N.toFixed(0)}%`);
-  return /* @__PURE__ */ v("div", y(p({ ref: m, className: n("w-full", u) }, b), { children: [
+  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(m({ ref: p, className: n("w-full", u) }, b), { children: [
     o && (c || !g) && /* @__PURE__ */ v(
       "div",
       {
@@ -1623,22 +1715,22 @@ const ea = A("w-full", {
             "span",
             {
               className: n(
-                w("bodySmall"),
-                j("label"),
+                S("bodySmall"),
+                _("label"),
                 "text-fg-primary"
               ),
               children: c
             }
           ),
-          !g && N !== void 0 && /* @__PURE__ */ v(
+          !g && w !== void 0 && /* @__PURE__ */ v(
             "span",
             {
               className: n(
-                w("bodySmall"),
+                S("bodySmall"),
                 "text-fg-secondary"
               ),
               children: [
-                N.toFixed(0),
+                w.toFixed(0),
                 "%"
               ]
             }
@@ -1653,13 +1745,13 @@ const ea = A("w-full", {
         "aria-valuemin": g ? void 0 : 0,
         "aria-valuemax": g ? void 0 : r,
         "aria-valuenow": g ? void 0 : a,
-        "aria-label": S,
+        "aria-label": N,
         "aria-busy": g,
         className: n(
           "relative",
           "w-full",
           "overflow-hidden",
-          ea({ size: i, variant: t }),
+          ra({ size: i, variant: t }),
           $("full")
         ),
         children: g ? /* @__PURE__ */ l(
@@ -1670,7 +1762,7 @@ const ea = A("w-full", {
               "top-0",
               "left-0",
               "bottom-0",
-              oe({ variant: t }),
+              ce({ variant: t }),
               $("full"),
               "motion-reduce:animate-none"
             ),
@@ -1684,14 +1776,14 @@ const ea = A("w-full", {
           {
             className: n(
               "h-full",
-              oe({ variant: t }),
+              ce({ variant: t }),
               $("full"),
               "transition-all",
               "duration-300",
               "ease-out"
             ),
             style: {
-              width: `${N}%`
+              width: `${w}%`
             },
             "aria-hidden": "true"
           }
@@ -1700,15 +1792,15 @@ const ea = A("w-full", {
     )
   ] }));
 });
-aa.displayName = "Progress";
-const ta = {
+na.displayName = "Progress";
+const sa = {
   horizontal: "w-full border-t",
   vertical: "h-full border-l self-stretch"
-}, ra = {
+}, ia = {
   solid: "border-solid",
   dashed: "border-dashed",
   dotted: "border-dotted"
-}, na = M(function(o) {
+}, la = M(function(o) {
   var c = o, {
     orientation: a = "horizontal",
     variant: r = "solid",
@@ -1721,28 +1813,28 @@ const ta = {
   const d = n(
     "border-0",
     "border-line-default",
-    ta[a],
-    ra[r],
+    sa[a],
+    ia[r],
     t
   );
   return a === "vertical" ? /* @__PURE__ */ l(
     "div",
-    p({
+    m({
       className: d,
       role: "separator",
       "aria-orientation": "vertical"
     }, i)
   ) : /* @__PURE__ */ l(
     "hr",
-    p({
+    m({
       className: d,
       role: "separator",
       "aria-orientation": "horizontal"
     }, i)
   );
 });
-na.displayName = "Separator";
-function Oa(d) {
+la.displayName = "Separator";
+function Ha(d) {
   var u = d, {
     variant: e = "text",
     width: a,
@@ -1762,35 +1854,35 @@ function Oa(d) {
     "motion-safe:animate-pulse",
     "bg-surface-muted",
     $("sm")
-  ], m = {
+  ], p = {
     text: "h-4",
     card: "h-32",
     list: "h-12",
     circle: $("full")
-  }, x = n(...b, m[e], i), f = {};
+  }, x = n(...b, p[e], i), f = {};
   a && (f.width = a), r && (f.height = r);
   const g = o || `Loading ${e} content`;
   return e === "text" && t > 1 ? /* @__PURE__ */ l(
     "div",
-    y(p({
+    y(m({
       className: s("sm", "space-y"),
       role: "status",
       "aria-busy": "true",
       "aria-label": g
     }, c), {
-      children: Array.from({ length: t }).map((N, S) => /* @__PURE__ */ l(
+      children: Array.from({ length: t }).map((w, N) => /* @__PURE__ */ l(
         "div",
         {
           className: x,
-          style: S === t - 1 ? { width: "75%" } : f,
+          style: N === t - 1 ? { width: "75%" } : f,
           "aria-hidden": "true"
         },
-        S
+        N
       ))
     })
   ) : /* @__PURE__ */ l(
     "div",
-    p({
+    m({
       className: x,
       style: f,
       role: "status",
@@ -1799,7 +1891,7 @@ function Oa(d) {
     }, c)
   );
 }
-const sa = {
+const oa = {
   primary: {
     // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
     light: "text-indigo-400",
@@ -1851,8 +1943,8 @@ const sa = {
     contrast: "text-fg-inverse"
   }
 };
-function ia(b, u) {
-  var m = b, {
+function ca(b, u) {
+  var p = b, {
     variant: e = "paragraph",
     bold: a,
     italic: r,
@@ -1860,7 +1952,7 @@ function ia(b, u) {
     as: i,
     colorRole: o = "neutral",
     colorShade: c = "dark"
-  } = m, d = h(m, [
+  } = p, d = h(p, [
     "variant",
     "bold",
     "italic",
@@ -1885,16 +1977,16 @@ function ia(b, u) {
         f = "p";
         break;
     }
-  return e === "heading" ? x.push(D("h2")) : e === "body" || e === "paragraph" ? x.push(D("body")) : e === "bodySmall" ? x.push(D("bodySmall")) : e === "bodyLarge" ? x.push(D("bodyLarge")) : e === "caption" ? x.push(D("caption")) : e === "label" ? x.push(D("label")) : x.push(D("body")), a && x.push("font-bold"), r && x.push("italic"), x.push(sa[o][c]), /* @__PURE__ */ l(f, p({ ref: u, className: n(...x, t) }, d));
+  return e === "heading" ? x.push(D("h2")) : e === "body" || e === "paragraph" ? x.push(D("body")) : e === "bodySmall" ? x.push(D("bodySmall")) : e === "bodyLarge" ? x.push(D("bodyLarge")) : e === "caption" ? x.push(D("caption")) : e === "label" ? x.push(D("label")) : x.push(D("body")), a && x.push("font-bold"), r && x.push("italic"), x.push(oa[o][c]), /* @__PURE__ */ l(f, m({ ref: u, className: n(...x, t) }, d));
 }
-const H = F(ia), la = {
+const H = L(ca), da = {
   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"
-}, oa = ce.forwardRef(
+}, ua = de.forwardRef(
   (u, d) => {
     var b = u, {
       className: e,
@@ -1913,11 +2005,11 @@ const H = F(ia), la = {
     ]);
     return /* @__PURE__ */ l(
       "div",
-      y(p({
+      y(m({
         ref: d,
         className: n(
           "w-full",
-          la[a],
+          da[a],
           s(r, "px"),
           s(t, "py"),
           i && "mx-auto",
@@ -1929,8 +2021,8 @@ const H = F(ia), la = {
     );
   }
 );
-oa.displayName = "Container";
-const ca = ce.forwardRef(
+ua.displayName = "Container";
+const fa = de.forwardRef(
   (u, d) => {
     var b = u, {
       className: e,
@@ -1947,7 +2039,7 @@ const ca = ce.forwardRef(
       "direction",
       "children"
     ]);
-    const m = i === "column" ? s(a, "gap-y") : s(a, "gap-x"), x = {
+    const p = i === "column" ? s(a, "gap-y") : s(a, "gap-x"), x = {
       start: "items-start",
       center: "items-center",
       end: "items-end",
@@ -1962,12 +2054,12 @@ const ca = ce.forwardRef(
     };
     return /* @__PURE__ */ l(
       "div",
-      y(p({
+      y(m({
         ref: d,
         className: n(
           "flex",
           i === "column" ? "flex-col" : "flex-row",
-          m,
+          p,
           x[r],
           f[t],
           e
@@ -1978,8 +2070,8 @@ const ca = ce.forwardRef(
     );
   }
 );
-ca.displayName = "Stack";
-function da(i) {
+fa.displayName = "Stack";
+function pa(i) {
   var o = i, {
     items: e,
     separator: a = "/",
@@ -1993,14 +2085,14 @@ function da(i) {
     "flex",
     "items-center",
     s("sm", "space-x"),
-    w("bodySmall")
+    S("bodySmall")
   ], d = n(...c, r);
-  return /* @__PURE__ */ l("nav", y(p({ "aria-label": "Breadcrumb", className: d }, t), { children: /* @__PURE__ */ l(
+  return /* @__PURE__ */ l("nav", y(m({ "aria-label": "Breadcrumb", className: d }, t), { children: /* @__PURE__ */ l(
     "ol",
     {
       className: n("flex", "items-center", s("sm", "space-x")),
       children: e.map((u, b) => {
-        const m = b === e.length - 1;
+        const p = b === e.length - 1;
         return /* @__PURE__ */ v("li", { className: "flex items-center", children: [
           b > 0 && /* @__PURE__ */ l(
             "span",
@@ -2013,12 +2105,12 @@ function da(i) {
               children: a
             }
           ),
-          m ? /* @__PURE__ */ l(
+          p ? /* @__PURE__ */ l(
             "span",
             {
               className: n(
                 "text-fg-primary",
-                j("label")
+                _("label")
               ),
               "aria-current": "page",
               children: u.label
@@ -2034,8 +2126,8 @@ function da(i) {
                 s("xs", "pt"),
                 "border-b-2",
                 "border-transparent",
-                w("bodySmall"),
-                j("label"),
+                S("bodySmall"),
+                _("label"),
                 "transition-colors",
                 "text-fg-secondary",
                 "hover:border-line-emphasis",
@@ -2049,11 +2141,11 @@ function da(i) {
     }
   ) }));
 }
-function ua(t) {
+function ma(t) {
   var i = t, { children: e, className: a } = i, r = h(i, ["children", "className"]);
   return /* @__PURE__ */ l(
     "div",
-    y(p({
+    y(m({
       className: n(
         "grid items-start",
         s("1.5", "gap"),
@@ -2067,7 +2159,7 @@ function ua(t) {
     })
   );
 }
-function fa(c) {
+function ga(c) {
   var d = c, {
     children: e,
     icon: a,
@@ -2083,7 +2175,7 @@ function fa(c) {
   ]);
   return /* @__PURE__ */ v(
     t,
-    y(p({
+    y(m({
       className: n(
         "text-base font-semibold text-fg-primary",
         "flex items-center",
@@ -2099,7 +2191,7 @@ function fa(c) {
     })
   );
 }
-function pa(t) {
+function ba(t) {
   var i = t, {
     children: e,
     className: a
@@ -2107,9 +2199,9 @@ function pa(t) {
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ l("p", y(p({ className: n("text-sm text-fg-secondary", a) }, r), { children: e }));
+  return /* @__PURE__ */ l("p", y(m({ className: n("text-sm text-fg-secondary", a) }, r), { children: e }));
 }
-function ma(t) {
+function xa(t) {
   var i = t, {
     children: e,
     className: a
@@ -2119,7 +2211,7 @@ function ma(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    y(p({
+    y(m({
       "data-card-actions": "",
       className: n(
         "flex items-center self-start",
@@ -2131,12 +2223,12 @@ function ma(t) {
     })
   );
 }
-function ga(t) {
+function ha(t) {
   var i = t, { children: e, className: a } = i, r = h(i, ["children", "className"]);
-  return /* @__PURE__ */ l("div", y(p({ className: n(a) }, r), { children: e }));
+  return /* @__PURE__ */ l("div", y(m({ className: n(a) }, r), { children: e }));
 }
-function ba(b) {
-  var m = b, {
+function ya(b) {
+  var p = b, {
     variant: e = "default",
     padding: a = "medium",
     className: r = "",
@@ -2145,7 +2237,7 @@ function ba(b) {
     "aria-labelledby": o,
     asSection: c = !1,
     children: d
-  } = m, u = h(m, [
+  } = p, u = h(p, [
     "variant",
     "padding",
     "className",
@@ -2158,24 +2250,24 @@ function ba(b) {
   typeof process != "undefined" && process.env.NODE_ENV !== "production" && c && !i && !o && 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 x = A(
+  const x = z(
     n(
       "bg-surface-base",
       $("lg"),
       "border",
       "border-line-default",
-      Y("sm")
+      Z("sm")
     ),
     {
       variants: {
         variant: {
           default: "",
           hover: n(
-            `hover:${Y("md")}`,
+            `hover:${Z("md")}`,
             "transition-shadow",
             "cursor-pointer"
           ),
-          selected: n("border-line-brand", Y("md"))
+          selected: n("border-line-brand", Z("md"))
         },
         padding: {
           none: "",
@@ -2189,28 +2281,28 @@ function ba(b) {
         padding: "medium"
       }
     }
-  ), f = t !== void 0, g = f ? "button" : void 0, N = f ? 0 : void 0, S = n(x({ variant: e, padding: a }), r), k = p({
-    className: S,
+  ), f = t !== void 0, g = f ? "button" : void 0, w = f ? 0 : void 0, N = n(x({ variant: e, padding: a }), r), k = m({
+    className: N,
     role: g,
-    tabIndex: N,
+    tabIndex: w,
     onClick: t,
-    onKeyDown: f ? (L) => {
-      f && (L.key === "Enter" || L.key === " ") && (L.preventDefault(), t == null || t());
+    onKeyDown: f ? (F) => {
+      f && (F.key === "Enter" || F.key === " ") && (F.preventDefault(), t == null || t());
     } : void 0,
     "aria-label": i,
     "aria-labelledby": o
   }, u);
-  return c ? /* @__PURE__ */ l("section", y(p({}, k), { children: d })) : /* @__PURE__ */ l("div", y(p({}, k), { children: d }));
+  return c ? /* @__PURE__ */ l("section", y(m({}, k), { children: d })) : /* @__PURE__ */ l("div", y(m({}, k), { children: d }));
 }
-const pe = M(ba);
-pe.displayName = "Card";
-const W = pe;
-W.Header = ua;
-W.Title = fa;
-W.Subtitle = pa;
-W.Actions = ma;
-W.Body = ga;
-function Ba(t) {
+const me = M(ya);
+me.displayName = "Card";
+const W = me;
+W.Header = ma;
+W.Title = ga;
+W.Subtitle = ba;
+W.Actions = xa;
+W.Body = ha;
+function Pa(t) {
   var i = t, {
     children: e,
     className: a = ""
@@ -2220,14 +2312,14 @@ function Ba(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    y(p({
+    y(m({
       className: `flex flex-col ${s("1.5", "space-y")} ${s("lg", "p")} ${s("base", "pb")} ${a}`
     }, r), {
       children: e
     })
   );
 }
-function Ma(t) {
+function Ia(t) {
   var i = t, {
     children: e,
     className: a = ""
@@ -2237,14 +2329,14 @@ function Ma(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    y(p({
+    y(m({
       className: `flex flex-col-reverse sm:flex-row sm:justify-end sm:${s("sm", "space-x")} ${s("lg", "p")} ${s("base", "pt")} ${a}`
     }, r), {
       children: e
     })
   );
 }
-function Ha(t) {
+function Wa(t) {
   var i = t, {
     children: e,
     className: a = ""
@@ -2254,7 +2346,7 @@ function Ha(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    y(p({
+    y(m({
       className: `
         ${s("lg", "p")}
         border-b
@@ -2266,7 +2358,7 @@ function Ha(t) {
     })
   );
 }
-function Pa(t) {
+function Ua(t) {
   var i = t, {
     children: e,
     className: a = ""
@@ -2276,7 +2368,7 @@ function Pa(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    y(p({
+    y(m({
       className: `
         ${s("lg", "p")}
         border-t
@@ -2291,7 +2383,7 @@ function Pa(t) {
     })
   );
 }
-function Ia(o) {
+function Ka(o) {
   var c = o, {
     label: e,
     children: a,
@@ -2306,7 +2398,7 @@ function Ia(o) {
   const u = !(i["aria-label"] != null || i["aria-labelledby"] != null) && typeof e == "string" && e !== "" ? e : void 0;
   return /* @__PURE__ */ v(
     "div",
-    y(p({
+    y(m({
       role: "group",
       "aria-label": u,
       className: n(
@@ -2328,7 +2420,7 @@ function Ia(o) {
     })
   );
 }
-function Wa({ children: e, className: a }) {
+function qa({ children: e, className: a }) {
   return /* @__PURE__ */ l(
     "div",
     {
@@ -2341,7 +2433,7 @@ function Wa({ children: e, className: a }) {
     }
   );
 }
-function Ua({
+function Xa({
   children: e,
   className: a
 }) {
@@ -2360,7 +2452,7 @@ function Ua({
     }
   );
 }
-const xa = A(
+const va = z(
   n(
     "w-full flex flex-col",
     s("2xl", "py"),
@@ -2387,15 +2479,15 @@ const xa = A(
       align: "start"
     }
   }
-), ha = {
+), wa = {
   start: "items-start",
   center: "items-center"
-}, ya = {
+}, Na = {
   start: "justify-start",
   center: "justify-center"
-}, va = F(
-  function(N, g) {
-    var S = N, {
+}, Sa = L(
+  function(w, g) {
+    var N = w, {
       kicker: a,
       title: r,
       description: t,
@@ -2405,9 +2497,9 @@ const xa = A(
       variant: d = "plain",
       align: u = "start",
       className: b,
-      "aria-label": m,
+      "aria-label": p,
       "aria-labelledby": x
-    } = S, f = h(S, [
+    } = N, f = h(N, [
       "kicker",
       "title",
       "description",
@@ -2420,14 +2512,14 @@ const xa = A(
       "aria-label",
       "aria-labelledby"
     ]);
-    const T = m != null || x != null, k = m != null ? m : typeof r == "string" ? r : void 0;
+    const T = p != null || x != null, k = p != null ? p : 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(p({
+      y(m({
         ref: g,
-        className: n(xa({ variant: d, align: u }), b),
+        className: n(va({ variant: d, align: u }), b),
         "aria-label": k,
         "aria-labelledby": x
       }, f), {
@@ -2438,7 +2530,7 @@ const xa = A(
               className: n(
                 "flex flex-col",
                 s("md", "gap-y"),
-                ha[u]
+                wa[u]
               ),
               children: [
                 a ? /* @__PURE__ */ l(
@@ -2481,7 +2573,7 @@ const xa = A(
               className: n(
                 "flex flex-wrap",
                 s("sm", "gap"),
-                ya[u]
+                Na[u]
               ),
               children: i
             }
@@ -2503,8 +2595,8 @@ const xa = A(
     );
   }
 );
-va.displayName = "HeroSection";
-function Ka(r) {
+Sa.displayName = "HeroSection";
+function Ga(r) {
   var t = r, {
     className: e = ""
   } = t, a = h(t, [
@@ -2512,7 +2604,7 @@ function Ka(r) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    p({
+    m({
       role: "separator",
       className: `
         h-px
@@ -2523,7 +2615,7 @@ function Ka(r) {
     }, a)
   );
 }
-function qa(t) {
+function Ya(t) {
   var i = t, {
     orientation: e = "horizontal",
     className: a = ""
@@ -2533,14 +2625,14 @@ function qa(t) {
   ]);
   return e === "vertical" ? /* @__PURE__ */ l(
     "div",
-    p({
+    m({
       className: n("w-px", "h-6", "bg-line-default", "mx-auto", a),
       role: "separator",
       "aria-orientation": "vertical"
     }, r)
   ) : /* @__PURE__ */ l(
     "div",
-    p({
+    m({
       className: n(
         "w-full",
         "h-px",
@@ -2561,7 +2653,7 @@ function qa(t) {
     }, r)
   );
 }
-const wa = A(
+const $a = z(
   // Base classes
   n("w-full", "flex", "flex-col", s("sm", "gap")),
   {
@@ -2576,7 +2668,7 @@ const wa = A(
     }
   }
 );
-function Xa(d) {
+function Za(d) {
   var u = d, {
     title: e,
     description: a,
@@ -2592,8 +2684,8 @@ function Xa(d) {
     "variant",
     "className"
   ]);
-  return /* @__PURE__ */ v("div", y(p({ className: n(wa({ variant: i }), o) }, c), { children: [
-    r && r.length > 0 && /* @__PURE__ */ l(da, { items: r }),
+  return /* @__PURE__ */ v("div", y(m({ className: n($a({ variant: i }), o) }, c), { children: [
+    r && r.length > 0 && /* @__PURE__ */ l(pa, { items: r }),
     /* @__PURE__ */ v(
       "div",
       {
@@ -2623,16 +2715,16 @@ function Xa(d) {
     )
   ] }));
 }
-const Na = {
+const ka = {
   start: "items-start text-left",
   center: "items-center text-center"
-}, Sa = {
+}, Ca = {
   neutral: "text-fg-tertiary",
   success: "text-fg-success",
   warning: "text-fg-warning",
   error: "text-fg-error"
 };
-function Ga(u) {
+function Ja(u) {
   var b = u, {
     value: e,
     label: a,
@@ -2650,21 +2742,21 @@ function Ga(u) {
     "tone",
     "className"
   ]);
-  const m = e == null;
+  const p = e == null;
   return /* @__PURE__ */ v(
     "div",
-    y(p({
+    y(m({
       className: n(
         "bg-surface-base flex-1 flex flex-col",
         s("base", "p"),
         s("xs", "gap-y"),
-        Na[i],
+        ka[i],
         c
       )
     }, d), {
       children: [
         t ? /* @__PURE__ */ l("span", { className: "text-icon-default inline-flex", children: t }) : null,
-        m ? /* @__PURE__ */ l(
+        p ? /* @__PURE__ */ l(
           "span",
           {
             "aria-label": "No data",
@@ -2673,17 +2765,17 @@ function Ga(u) {
           }
         ) : /* @__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: a }),
-        r ? /* @__PURE__ */ l("span", { className: n("text-xs", Sa[o]), children: r }) : null
+        r ? /* @__PURE__ */ l("span", { className: n("text-xs", Ca[o]), children: r }) : null
       ]
     })
   );
 }
-const $a = {
+const Ea = {
   2: "md:grid-cols-2",
   3: "md:grid-cols-3",
   4: "md:grid-cols-4"
 };
-function Ya(c) {
+function Qa(c) {
   var d = c, {
     layout: e = "grid",
     cols: a = 4,
@@ -2700,7 +2792,7 @@ function Ya(c) {
   const u = e === "grid";
   return /* @__PURE__ */ v(
     "div",
-    y(p({
+    y(m({
       className: n(
         "relative",
         r && s("base", "pt"),
@@ -2715,7 +2807,7 @@ function Ya(c) {
             className: n(
               "bg-line-default border border-line-default overflow-hidden gap-px",
               $("lg"),
-              u ? `grid grid-cols-2 ${$a[a]}` : "flex"
+              u ? `grid grid-cols-2 ${Ea[a]}` : "flex"
             ),
             children: i
           }
@@ -2724,19 +2816,19 @@ function Ya(c) {
     })
   );
 }
-function Za(i) {
+function et(i) {
   var o = i, { column: e, row: a, className: r = "" } = o, t = h(o, ["column", "row", "className"]);
   const c = e.key in a ? a[e.key] : void 0;
   return /* @__PURE__ */ l(
     "td",
-    y(p({
+    y(m({
       className: `${s("lg", "px")} ${s("base", "py")} whitespace-nowrap text-sm text-fg-primary ${e.hiddenOnMobile ? "hidden md:table-cell" : ""} ${r}`
     }, t), {
       children: e.render ? e.render(c, a) : String(c != null ? c : "")
     })
   );
 }
-const ka = A(n("flex items-center", "border-b"), {
+const Ta = z(n("flex items-center", "border-b"), {
   variants: {
     variant: {
       default: n("border-line-default", s("base", "gap-x")),
@@ -2746,7 +2838,7 @@ const ka = A(n("flex items-center", "border-b"), {
   defaultVariants: {
     variant: "default"
   }
-}), Ca = A(
+}), Va = z(
   n(
     "relative -mb-px inline-flex items-center",
     s("xs", "gap-x"),
@@ -2764,12 +2856,12 @@ const ka = A(n("flex items-center", "border-b"), {
         default: n(
           s("sm", "px"),
           s("sm", "py"),
-          w("body")
+          S("body")
         ),
         sub: n(
           s("sm", "px"),
           s("xs", "py"),
-          w("bodySmall")
+          S("bodySmall")
         )
       },
       active: {
@@ -2794,21 +2886,21 @@ const ka = A(n("flex items-center", "border-b"), {
       active: !1
     }
   }
-), Ea = n(
+), Aa = n(
   "inline-flex items-center justify-center",
   $("full"),
   s("xs", "px"),
   "bg-surface-muted text-fg-secondary text-xs"
-), Ta = F(
+), za = L(
   function(b, u) {
-    var m = b, {
+    var p = b, {
       items: a,
       variant: r = "default",
       linkComponent: t,
       className: i,
       "aria-label": o,
       "aria-labelledby": c
-    } = m, d = h(m, [
+    } = p, d = h(p, [
       "items",
       "variant",
       "linkComponent",
@@ -2822,9 +2914,9 @@ const ka = A(n("flex items-center", "border-b"), {
     const x = t != null ? t : "a";
     return /* @__PURE__ */ l(
       "nav",
-      y(p({
+      y(m({
         ref: u,
-        className: n(ka({ variant: r }), i),
+        className: n(Ta({ variant: r }), i),
         "aria-label": o,
         "aria-labelledby": c
       }, d), {
@@ -2834,11 +2926,11 @@ const ka = A(n("flex items-center", "border-b"), {
             href: f.href,
             "aria-current": f.active ? "page" : void 0,
             "data-active": f.active ? "true" : void 0,
-            className: Ca({ variant: r, active: !!f.active }),
+            className: Va({ 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: Ea, children: f.count }) : null
+              f.count !== void 0 ? /* @__PURE__ */ l("span", { className: Aa, children: f.count }) : null
             ]
           },
           f.href || g
@@ -2847,8 +2939,8 @@ const ka = A(n("flex items-center", "border-b"), {
     );
   }
 );
-Ta.displayName = "TabsAsLinks";
-function Ja({
+za.displayName = "TabsAsLinks";
+function at({
   items: e,
   orientation: a = "vertical",
   className: r = ""
@@ -2858,7 +2950,7 @@ function Ja({
     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(p({}, o === "default" ? { "data-marker": "pending" } : {}), {
+        y(m({}, o === "default" ? { "data-marker": "pending" } : {}), {
           className: `
                   flex
                   items-center
@@ -2869,7 +2961,7 @@ function Ja({
                   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"}
                 `,
-          children: t.icon || (o === "completed" ? /* @__PURE__ */ l(ne, { className: "h-4 w-4" }) : i + 1)
+          children: t.icon || (o === "completed" ? /* @__PURE__ */ l(se, { className: "h-4 w-4" }) : i + 1)
         })
       ),
       !c && /* @__PURE__ */ l(
@@ -2918,7 +3010,7 @@ function Ja({
           /* @__PURE__ */ v("div", { className: "flex flex-col items-center", children: [
             /* @__PURE__ */ l(
               "div",
-              y(p({}, o === "default" ? { "data-marker": "pending" } : {}), {
+              y(m({}, o === "default" ? { "data-marker": "pending" } : {}), {
                 className: `
                 flex
                 items-center
@@ -2929,7 +3021,7 @@ function Ja({
                 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"}
               `,
-                children: t.icon || (o === "completed" ? /* @__PURE__ */ l(ne, { className: "h-4 w-4" }) : i + 1)
+                children: t.icon || (o === "completed" ? /* @__PURE__ */ l(se, { className: "h-4 w-4" }) : i + 1)
               })
             ),
             !c && /* @__PURE__ */ l(
@@ -2980,43 +3072,44 @@ function Ja({
   }) });
 }
 export {
-  Ee as Badge,
-  da as Breadcrumb,
-  Ie as Button,
+  Ee as AvatarBase,
+  Ae as Badge,
+  pa as Breadcrumb,
+  Ke as Button,
   W as Card,
-  ma as CardActions,
-  ga as CardBody,
-  ua as CardHeader,
-  pa as CardSubtitle,
-  fa as CardTitle,
-  We as Chip,
-  oa as Container,
-  Ke as DataBadge,
-  Ma as DialogFooter,
-  Ba as DialogHeader,
-  Pa as DrawerFooter,
-  Ha as DrawerHeader,
-  ja as ErrorMessage,
-  Ia as FilterChips,
-  Wa as HeaderActions,
-  Ua as HeaderNavigation,
-  va as HeroSection,
-  Ra as Info,
-  Ge as InputBase,
-  Je as Label,
-  Ka as MenuSeparator,
-  qa as NavbarSeparator,
-  Xa as PageHeader,
-  aa as Progress,
-  na as Separator,
-  Oa as Skeleton,
-  fe as Spinner,
-  ca as Stack,
-  Ga as Stat,
-  Ya as StatGroup,
-  Za as TableCell,
-  Ta as TabsAsLinks,
+  xa as CardActions,
+  ha as CardBody,
+  ma as CardHeader,
+  ba as CardSubtitle,
+  ga as CardTitle,
+  qe as Chip,
+  ua as Container,
+  Ge as DataBadge,
+  Ia as DialogFooter,
+  Pa as DialogHeader,
+  Ua as DrawerFooter,
+  Wa as DrawerHeader,
+  Oa as ErrorMessage,
+  Ka as FilterChips,
+  qa as HeaderActions,
+  Xa as HeaderNavigation,
+  Sa as HeroSection,
+  Ma as Info,
+  Je as InputBase,
+  aa as Label,
+  Ga as MenuSeparator,
+  Ya as NavbarSeparator,
+  Za as PageHeader,
+  na as Progress,
+  la as Separator,
+  Ha as Skeleton,
+  pe as Spinner,
+  fa as Stack,
+  Ja as Stat,
+  Qa as StatGroup,
+  et as TableCell,
+  za as TabsAsLinks,
   H as Text,
-  Ja as Timeline
+  at as Timeline
 };
 //# sourceMappingURL=index.js.map