@fabio.caffarello/react-design-system 4.7.0 → 4.9.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, p = (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 F, memo as W } 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,20 +83,121 @@ 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));
 }
-class C {
+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 = F(
+  function(x, m) {
+    var f = x, {
+      src: a,
+      alt: r,
+      fallback: t,
+      size: i = "md",
+      variant: o = "circle",
+      loading: c = "eager",
+      "aria-label": d,
+      className: u = ""
+    } = f, g = h(f, [
+      "src",
+      "alt",
+      "fallback",
+      "size",
+      "variant",
+      "loading",
+      "aria-label",
+      "className"
+    ]);
+    const b = !a, N = typeof t == "string" ? t.toUpperCase().slice(0, 2) : t, S = d || r || "User avatar";
+    return /* @__PURE__ */ v(
+      "div",
+      y(p({
+        ref: m,
+        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": S
+      }, g), {
+        children: [
+          !b && /* @__PURE__ */ l(
+            "img",
+            {
+              src: a,
+              alt: r || "",
+              loading: c,
+              className: n(
+                "w-full",
+                "h-full",
+                "object-cover",
+                Y[o]
+              ),
+              "aria-hidden": "true"
+            }
+          ),
+          b && /* @__PURE__ */ l(
+            "span",
+            {
+              className: n(
+                "flex",
+                "items-center",
+                "justify-center",
+                "w-full",
+                "h-full",
+                Y[o]
+              ),
+              "aria-hidden": "true",
+              children: N || "?"
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+Ee.displayName = "AvatarBase";
+class E {
   // 4px base
   /**
    * Create a spacing token from scale value
@@ -163,46 +264,46 @@ class C {
     }[a] || String(a);
   }
 }
-re(C, "BASE_UNIT", 4);
-const ke = {
+ne(E, "BASE_UNIT", 4);
+const Te = {
   // Micro spacing (0-14px)
-  none: C.create(0),
-  "0.5": C.create(0.5),
+  none: E.create(0),
+  "0.5": E.create(0.5),
   // 2px (half-step)
-  xs: C.create(1),
+  xs: E.create(1),
   // 4px
-  "1.5": C.create(1.5),
+  "1.5": E.create(1.5),
   // 6px (half-step)
-  sm: C.create(2),
+  sm: E.create(2),
   // 8px
-  "2.5": C.create(2.5),
+  "2.5": E.create(2.5),
   // 10px (half-step)
-  md: C.create(3),
+  md: E.create(3),
   // 12px
-  "3.5": C.create(3.5),
+  "3.5": E.create(3.5),
   // 14px (half-step)
   // Standard spacing (16-32px)
-  base: C.create(4),
+  base: E.create(4),
   // 16px
-  lg: C.create(6),
+  lg: E.create(6),
   // 24px
-  xl: C.create(8),
+  xl: E.create(8),
   // 32px
   // Large spacing (40-64px)
-  "2xl": C.create(10),
+  "2xl": E.create(10),
   // 40px
-  "3xl": C.create(12),
+  "3xl": E.create(12),
   // 48px
-  "4xl": C.create(16),
+  "4xl": E.create(16),
   // 64px
   // Extra large spacing (80px+)
-  "5xl": C.create(20),
+  "5xl": E.create(20),
   // 80px
-  "6xl": C.create(24)
+  "6xl": E.create(24)
   // 96px
 };
 function s(e, a = "p") {
-  const t = ke[e].tailwind;
+  const t = Te[e].tailwind;
   return `${{
     p: "p",
     m: "m",
@@ -225,7 +326,7 @@ function s(e, a = "p") {
     "space-y": "space-y"
   }[a]}-${t}`;
 }
-class E {
+class k {
   /**
    * Create font size token
    */
@@ -295,50 +396,44 @@ class E {
     };
   }
 }
-E.createFontWeight("light"), E.createFontWeight("normal"), E.createFontWeight("medium"), E.createFontWeight("semibold"), E.createFontWeight("bold");
-const J = {
+k.createFontWeight("light"), k.createFontWeight("normal"), k.createFontWeight("medium"), k.createFontWeight("semibold"), k.createFontWeight("bold");
+const Q = {
   // Headings
-  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"),
+  h1: k.create("4xl", "tight", "bold"),
+  h2: k.create("3xl", "tight", "bold"),
+  h3: k.create("2xl", "snug", "semibold"),
+  h4: k.create("xl", "snug", "semibold"),
+  h5: k.create("lg", "normal", "medium"),
+  h6: k.create("base", "normal", "medium"),
   // Body text
-  body: E.create("base", "relaxed", "normal"),
-  bodySmall: E.create("sm", "relaxed", "normal"),
-  bodyLarge: E.create("lg", "relaxed", "normal"),
+  body: k.create("base", "relaxed", "normal"),
+  bodySmall: k.create("sm", "relaxed", "normal"),
+  bodyLarge: k.create("lg", "relaxed", "normal"),
   // UI elements
-  label: E.create("sm", "normal", "medium"),
-  caption: E.create("xs", "normal", "normal"),
-  button: E.create("base", "normal", "medium")
+  label: k.create("sm", "normal", "medium"),
+  caption: k.create("xs", "normal", "normal"),
+  button: k.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;
+  return Q[e].fontSize.tailwind;
 }
-function j(e) {
-  return J[e].fontWeight.tailwind;
+function B(e) {
+  return Q[e].fontWeight.tailwind;
 }
-function n(...e) {
-  return ye(he(e));
+function Ve(e) {
+  return k.createFontWeight(e).tailwind;
 }
-const A = (e, a) => {
-  const r = ve(e, a);
-  return ((t) => {
-    const i = r(t);
-    return n(i);
-  });
-}, Ce = A(
+const Ae = z(
   // Base classes
   n(
     "inline-flex",
     "items-center",
     "justify-center",
-    j("label"),
+    B("label"),
     $("md"),
     "border"
   ),
@@ -470,9 +565,9 @@ const A = (e, a) => {
       style: "solid"
     }
   }
-), Ee = M(
-  F(function(b, u) {
-    var m = b, {
+), ze = W(
+  F(function(g, u) {
+    var m = g, {
       variant: a = "neutral",
       size: r = "md",
       style: t = "solid",
@@ -487,15 +582,15 @@ const A = (e, a) => {
       "children",
       "aria-label"
     ]);
-    const x = n(Ce({ variant: a, size: r, style: t }), i);
+    const x = n(Ae({ variant: a, size: r, style: t }), i);
     let f;
     if (c)
       f = c;
     else if (typeof o == "string")
       f = o;
     else if (typeof o == "object" && o !== null && "props" in o) {
-      const g = o.props;
-      g != null && g.children && typeof g.children == "string" && (f = g.children);
+      const b = o.props;
+      b != null && b.children && typeof b.children == "string" && (f = b.children);
     }
     return /* @__PURE__ */ l(
       "span",
@@ -510,80 +605,80 @@ const A = (e, a) => {
     );
   })
 );
-Ee.displayName = "Badge";
-function se(e, a) {
+ze.displayName = "Badge";
+function ie(e, a) {
   if (typeof e == "function")
     return e(a);
   e != null && (e.current = a);
 }
-function Te(...e) {
+function Fe(...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(Fe(...e), e);
 }
 // @__NO_SIDE_EFFECTS__
-function ze(e) {
-  const a = z.forwardRef((r, t) => {
-    var g;
+function De(e) {
+  const a = A.forwardRef((r, t) => {
+    var b;
     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) => {
+    le(i) && typeof q == "function" && (i = q(i._payload)), A.Children.forEach(i, (N) => {
       var S;
-      if (je(N)) {
+      if (Me(N)) {
         d = !0;
         const T = N;
-        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);
+        let C = "child" in T.props ? T.props.child : T.props.children;
+        le(C) && typeof q == "function" && (C = q(C._payload)), c = Be(T, C), u.push((S = c == null ? void 0 : c.props) == null ? void 0 : S.children);
       } else
         u.push(N);
-    }), c ? c = z.cloneElement(c, void 0, u) : (
+    }), 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 g = c ? Oe(c) : void 0, m = Le(t, g);
     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, (b = c.props) != null ? b : {});
+    return c.type !== A.Fragment && (x.ref = t ? m : g), A.cloneElement(c, x);
   });
   return a.displayName = `${e}.Slot`, a;
 }
-var de = /* @__PURE__ */ ze("Slot"), ue = /* @__PURE__ */ Symbol.for("radix.slottable");
+var ue = /* @__PURE__ */ De("Slot"), fe = /* @__PURE__ */ Symbol.for("radix.slottable");
 // @__NO_SIDE_EFFECTS__
-function Ae(e) {
+function je(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 _e = /* @__PURE__ */ je("Slottable"), Be = (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) {
+function Re(e, a) {
   const r = p({}, a);
   for (const t in a) {
     const i = e[t], o = a[t];
@@ -594,23 +689,23 @@ function Fe(e, a) {
   }
   return p(p({}, e), r);
 }
-function _e(e) {
+function Oe(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 Me(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 We = /* @__PURE__ */ Symbol.for("react.lazy");
+function le(e) {
+  return e != null && typeof e == "object" && "$$typeof" in e && e.$$typeof === We && "_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 Ue = z("motion-safe:animate-spin", {
   variants: {
     size: {
       sm: "h-4 w-4",
@@ -627,7 +722,7 @@ const He = A("motion-safe:animate-spin", {
     size: "md",
     variant: "primary"
   }
-}), fe = M(function(c) {
+}), pe = W(function(c) {
   var d = c, {
     size: a = "md",
     variant: r = "primary",
@@ -649,9 +744,9 @@ const He = A("motion-safe:animate-spin", {
     }, o), {
       children: [
         /* @__PURE__ */ l(
-          we,
+          Ne,
           {
-            className: n(He({ size: a, variant: r })),
+            className: n(Ue({ size: a, variant: r })),
             "aria-hidden": "true"
           }
         ),
@@ -671,8 +766,8 @@ const He = A("motion-safe:animate-spin", {
     })
   );
 });
-fe.displayName = "Spinner";
-const Pe = A(
+pe.displayName = "Spinner";
+const Ke = z(
   // Base classes
   n(
     "inline-flex",
@@ -843,9 +938,9 @@ function X({
     }
   ) : null;
 }
-const Ie = M(
-  F(function(k, T) {
-    var L = k, {
+const qe = W(
+  F(function(C, T) {
+    var L = C, {
       variant: a = "primary",
       size: r = "md",
       isLoading: t = !1,
@@ -854,11 +949,11 @@ const Ie = M(
       leftIcon: c,
       rightIcon: d,
       fullWidth: u = !1,
-      asChild: b = !1,
+      asChild: g = !1,
       as: m,
       className: x = "",
       disabled: f = !1,
-      children: g,
+      children: b,
       "aria-label": N
     } = L, S = h(L, [
       "variant",
@@ -876,37 +971,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" && g && 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 R = b ? de : m != null ? m : "button", O = n(
-      Pe({ variant: a, size: r }),
+    const R = g ? ue : m != null ? m : "button", O = n(
+      Ke({ 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({
+    ), P = (a === "iconOnly" || !b && (c || d)) && !N && !b ? "Button" : N, ge = o || /* @__PURE__ */ l(pe, { size: r === "sm" ? "sm" : r === "lg" ? "lg" : "md", variant: a === "error" ? "primary" : a === "primary" || a === "secondary" ? "neutral" : "primary" }), ee = !g && (m === void 0 || m === "button") && !S.type ? "button" : void 0, ae = p(p({
       className: O,
       disabled: f || t,
       "aria-busy": t,
-      "aria-label": I,
+      "aria-label": P,
       "aria-disabled": f || t
-    }, Q ? { type: Q } : {}), S);
-    return b ? /* @__PURE__ */ v(R, y(p({ ref: T }, ee), { children: [
+    }, ee ? { type: ee } : {}), S);
+    return g ? /* @__PURE__ */ v(R, y(p({ ref: T }, ae), { children: [
       c && /* @__PURE__ */ l(X, { position: "left", children: c }),
-      /* @__PURE__ */ l(Le, { children: g }),
+      /* @__PURE__ */ l(_e, { children: b }),
       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(p({ 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: [
+      !i && b && /* @__PURE__ */ l("span", { className: `${s("sm", "ml")} opacity-0`, children: b })
+    ] }) : /* @__PURE__ */ v(J, { children: [
       c && /* @__PURE__ */ l(X, { position: "left", children: c }),
-      g,
+      b,
       d && /* @__PURE__ */ l(X, { position: "right", children: d })
     ] }) }));
   })
 );
-Ie.displayName = "Button";
-const le = A(
+qe.displayName = "Button";
+const oe = z(
   // Base classes
   n(
     "inline-flex",
@@ -995,7 +1090,7 @@ const le = A(
       disabled: !1
     }
   }
-), We = F(function(a, r) {
+), Xe = F(function(a, r) {
   const {
     children: t,
     variant: i = "default",
@@ -1003,11 +1098,11 @@ const le = A(
     selected: c = !1,
     disabled: d = !1,
     className: u = "",
-    "aria-label": b,
+    "aria-label": g,
     tabIndex: m,
     asChild: x = !1
-  } = a, g = (() => {
-    if (b) return b;
+  } = a, b = (() => {
+    if (g) return g;
     if (typeof t == "string") return t;
     if (typeof t == "object" && t !== null && "props" in t) {
       const V = t.props;
@@ -1017,25 +1112,25 @@ 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-label": g,
         "aria-disabled": d || void 0,
         tabIndex: m,
         children: t
       }
     );
-  const { onRemove: N, onClick: S, count: T } = a, k = S !== void 0, L = k && !d, R = (V) => {
+  const { onRemove: N, onClick: S, count: T } = a, C = S !== void 0, L = C && !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(
+  }, O = T !== void 0, H = c || i === "filled", P = O ? /* @__PURE__ */ l(
     "span",
     {
-      "aria-hidden": k || void 0,
+      "aria-hidden": C || void 0,
       className: n(
         "inline-flex",
         "items-center",
@@ -1046,24 +1141,24 @@ const le = A(
         s("xs", "px"),
         s("0.5", "py"),
         w("caption"),
-        j("label"),
-        P ? n("bg-surface-base", "text-fg-brand-emphasis") : n("bg-surface-brand-strong", "text-fg-inverse")
+        B("label"),
+        H ? 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 = O && b !== void 0 ? `${b}, ${T}` : b;
   return /* @__PURE__ */ v(
     "div",
     {
       ref: r,
       className: n(
-        le({ variant: i, size: o, selected: c, disabled: d }),
+        oe({ variant: i, size: o, selected: c, disabled: d }),
         N && s("xs", "pr"),
         u
       ),
       "aria-disabled": d,
       children: [
-        k ? /* @__PURE__ */ l(
+        C ? /* @__PURE__ */ l(
           "button",
           {
             type: "button",
@@ -1071,7 +1166,7 @@ const le = A(
             onKeyDown: R,
             disabled: d,
             "aria-pressed": c ? !0 : void 0,
-            "aria-label": b || U,
+            "aria-label": g || U,
             tabIndex: m !== void 0 ? m : L ? 0 : void 0,
             className: n(
               "flex-1",
@@ -1090,7 +1185,7 @@ const le = A(
             children: t
           }
         ) : /* @__PURE__ */ l("span", { children: t }),
-        I,
+        P,
         N && !d && /* @__PURE__ */ l(
           "button",
           {
@@ -1109,16 +1204,16 @@ const le = A(
               "focus:ring-line-focus",
               "focus:ring-offset-1"
             ),
-            "aria-label": `Remove ${g || "chip"}`,
-            children: /* @__PURE__ */ l(Ne, { className: "h-3 w-3", "aria-hidden": "true" })
+            "aria-label": `Remove ${b || "chip"}`,
+            children: /* @__PURE__ */ l(Se, { className: "h-3 w-3", "aria-hidden": "true" })
           }
         )
       ]
     }
   );
 });
-We.displayName = "Chip";
-const Ue = A(
+Xe.displayName = "Chip";
+const Ge = z(
   n("inline-flex", "items-center", "border", $("md")),
   {
     variants: {
@@ -1163,9 +1258,9 @@ const Ue = A(
     },
     defaultVariants: { tone: "neutral", size: "md" }
   }
-), Ke = M(
-  F(function(b, u) {
-    var m = b, {
+), Ye = W(
+  F(function(g, u) {
+    var m = g, {
       label: a,
       source: r,
       tone: t = "neutral",
@@ -1185,7 +1280,7 @@ const Ue = A(
       "span",
       y(p({
         ref: u,
-        className: n(Ue({ tone: t, size: i }), c)
+        className: n(Ge({ tone: t, size: i }), c)
       }, d), {
         children: [
           o ? /* @__PURE__ */ l(
@@ -1201,19 +1296,19 @@ const Ue = A(
             {
               className: n(
                 w(f),
-                j("label")
+                B("label")
               ),
               children: a
             }
           ),
-          x ? /* @__PURE__ */ v(Z, { children: [
+          x ? /* @__PURE__ */ v(J, { children: [
             /* @__PURE__ */ l("span", { "aria-hidden": "true", className: w("caption"), children: "·" }),
             /* @__PURE__ */ l(
               "span",
               {
                 className: n(
                   w("caption"),
-                  j("caption")
+                  B("caption")
                 ),
                 children: r
               }
@@ -1224,8 +1319,8 @@ const Ue = A(
     );
   })
 );
-Ke.displayName = "DataBadge";
-function ja(i) {
+Ye.displayName = "DataBadge";
+function Wa(i) {
   var o = i, {
     message: e,
     id: a,
@@ -1244,11 +1339,11 @@ function ja(i) {
     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" }),
+    /* @__PURE__ */ l($e, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
     /* @__PURE__ */ l("span", { children: e })
   ] }));
 }
-function Ra(t) {
+function Ha(t) {
   var i = t, {
     variant: e = "info",
     className: a
@@ -1276,7 +1371,7 @@ function Ra(t) {
     }, r)
   );
 }
-const qe = A(
+const Ze = z(
   n(
     "w-full",
     $("md"),
@@ -1343,7 +1438,7 @@ const qe = A(
     }
   }
 );
-function Xe({
+function Je({
   error: e,
   success: a,
   helperText: r,
@@ -1367,9 +1462,9 @@ function Xe({
     }
   );
 }
-const Ge = F(
+const Qe = F(
   function(T, S) {
-    var k = T, {
+    var C = T, {
       id: a,
       label: r,
       error: t = !1,
@@ -1378,12 +1473,12 @@ const Ge = F(
       size: c = "md",
       variant: d = "outlined",
       leftIcon: u,
-      rightIcon: b,
+      rightIcon: g,
       rightSlot: m,
       className: x = "",
       disabled: f = !1,
-      type: g = "text"
-    } = k, N = h(k, [
+      type: b = "text"
+    } = C, N = h(C, [
       "id",
       "label",
       "error",
@@ -1401,13 +1496,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 L = t ? "error" : i ? "success" : "default", R = t && a ? `${a}-error` : void 0, O = o && a ? `${a}-helper` : void 0, H = c === "sm" ? "h-4 w-4" : c === "lg" ? "h-5 w-5" : "h-4 w-4", P = c === "sm" ? "top-2" : c === "lg" ? "top-3.5" : "top-2.5", U = n(
+      Ze({ variant: d, size: c, state: L }),
       // 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")),
+      (g || m) && (c === "sm" ? "pr-9" : s(c === "lg" ? "3xl" : "2xl", "pr")),
       x
     ), V = n(
       "block",
@@ -1421,8 +1516,8 @@ const Ge = F(
         u && /* @__PURE__ */ l(
           "div",
           {
-            className: `absolute left-3 ${I} text-fg-secondary opacity-60 pointer-events-none`,
-            children: /* @__PURE__ */ l("div", { className: P, children: u })
+            className: `absolute left-3 ${P} text-fg-secondary opacity-60 pointer-events-none`,
+            children: /* @__PURE__ */ l("div", { className: H, children: u })
           }
         ),
         /* @__PURE__ */ l(
@@ -1430,7 +1525,7 @@ const Ge = F(
           p({
             id: a,
             ref: S,
-            type: g,
+            type: b,
             className: U,
             disabled: f,
             "aria-invalid": t,
@@ -1439,22 +1534,22 @@ const Ge = F(
             suppressHydrationWarning: !0
           }, N)
         ),
-        (b || m) && /* @__PURE__ */ l(
+        (g || m) && /* @__PURE__ */ l(
           "div",
           {
             className: `absolute right-3 top-0 bottom-0 flex items-center ${s("xs", "gap")}`,
             children: m != null ? m : /* @__PURE__ */ l(
               "div",
               {
-                className: `text-fg-secondary opacity-60 pointer-events-none ${P}`,
-                children: b
+                className: `text-fg-secondary opacity-60 pointer-events-none ${H}`,
+                children: g
               }
             )
           }
         )
       ] }),
       (t || i || o) && /* @__PURE__ */ l(
-        Xe,
+        Je,
         {
           error: t,
           success: i,
@@ -1466,13 +1561,13 @@ const Ge = F(
     ] });
   }
 );
-Ge.displayName = "InputBase";
-const Ye = n(
+Qe.displayName = "InputBase";
+const ea = n(
   "block",
   w("label"),
-  j("label"),
+  B("label"),
   "text-fg-primary"
-), Ze = {
+), aa = {
   default: "",
   required: n(
     "after:content-['*']",
@@ -1485,19 +1580,19 @@ const Ye = n(
     "after:text-fg-tertiary",
     "after:font-normal"
   )
-}, Je = M(
+}, ta = W(
   F(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],
+      ea,
+      aa[a],
       r
     );
     return /* @__PURE__ */ l("label", y(p({ ref: o, className: u }, i), { children: t }));
   })
 );
-Je.displayName = "Label";
-class B {
+ta.displayName = "Label";
+class M {
   /**
    * Create a shadow token
    */
@@ -1541,19 +1636,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 ra = {
+  none: M.create("none"),
+  sm: M.create("sm"),
+  md: M.create("md"),
+  lg: M.create("lg"),
+  xl: M.create("xl"),
+  "2xl": M.create("2xl"),
+  inner: M.create("inner")
 };
-function Y(e) {
-  return Qe[e].tailwind;
+function Z(e) {
+  return ra[e].tailwind;
 }
-const ea = A("w-full", {
+const na = z("w-full", {
   variants: {
     size: {
       sm: "h-1",
@@ -1573,7 +1668,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 +1682,7 @@ const ea = A("w-full", {
   defaultVariants: {
     variant: "primary"
   }
-}), aa = F(function(x, m) {
+}), sa = F(function(x, m) {
   var f = x, {
     value: a,
     max: r = 100,
@@ -1597,7 +1692,7 @@ const ea = A("w-full", {
     label: c,
     "aria-label": d,
     className: u = ""
-  } = f, b = h(f, [
+  } = f, g = h(f, [
     "value",
     "max",
     "variant",
@@ -1607,9 +1702,9 @@ 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: [
-    o && (c || !g) && /* @__PURE__ */ v(
+  const b = a === void 0, N = b ? void 0 : Math.min(Math.max(a / r * 100, 0), 100), S = d || (b ? "Loading in progress" : `Progress: ${N == null ? void 0 : N.toFixed(0)}%`);
+  return /* @__PURE__ */ v("div", y(p({ ref: m, className: n("w-full", u) }, g), { children: [
+    o && (c || !b) && /* @__PURE__ */ v(
       "div",
       {
         className: n(
@@ -1624,13 +1719,13 @@ const ea = A("w-full", {
             {
               className: n(
                 w("bodySmall"),
-                j("label"),
+                B("label"),
                 "text-fg-primary"
               ),
               children: c
             }
           ),
-          !g && N !== void 0 && /* @__PURE__ */ v(
+          !b && N !== void 0 && /* @__PURE__ */ v(
             "span",
             {
               className: n(
@@ -1650,19 +1745,19 @@ const ea = A("w-full", {
       "div",
       {
         role: "progressbar",
-        "aria-valuemin": g ? void 0 : 0,
-        "aria-valuemax": g ? void 0 : r,
-        "aria-valuenow": g ? void 0 : a,
+        "aria-valuemin": b ? void 0 : 0,
+        "aria-valuemax": b ? void 0 : r,
+        "aria-valuenow": b ? void 0 : a,
         "aria-label": S,
-        "aria-busy": g,
+        "aria-busy": b,
         className: n(
           "relative",
           "w-full",
           "overflow-hidden",
-          ea({ size: i, variant: t }),
+          na({ size: i, variant: t }),
           $("full")
         ),
-        children: g ? /* @__PURE__ */ l(
+        children: b ? /* @__PURE__ */ l(
           "div",
           {
             className: n(
@@ -1670,7 +1765,7 @@ const ea = A("w-full", {
               "top-0",
               "left-0",
               "bottom-0",
-              oe({ variant: t }),
+              ce({ variant: t }),
               $("full"),
               "motion-reduce:animate-none"
             ),
@@ -1684,7 +1779,7 @@ const ea = A("w-full", {
           {
             className: n(
               "h-full",
-              oe({ variant: t }),
+              ce({ variant: t }),
               $("full"),
               "transition-all",
               "duration-300",
@@ -1700,15 +1795,15 @@ const ea = A("w-full", {
     )
   ] }));
 });
-aa.displayName = "Progress";
-const ta = {
+sa.displayName = "Progress";
+const ia = {
   horizontal: "w-full border-t",
   vertical: "h-full border-l self-stretch"
-}, ra = {
+}, la = {
   solid: "border-solid",
   dashed: "border-dashed",
   dotted: "border-dotted"
-}, na = M(function(o) {
+}, oa = W(function(o) {
   var c = o, {
     orientation: a = "horizontal",
     variant: r = "solid",
@@ -1721,8 +1816,8 @@ const ta = {
   const d = n(
     "border-0",
     "border-line-default",
-    ta[a],
-    ra[r],
+    ia[a],
+    la[r],
     t
   );
   return a === "vertical" ? /* @__PURE__ */ l(
@@ -1741,8 +1836,8 @@ const ta = {
     }, i)
   );
 });
-na.displayName = "Separator";
-function Oa(d) {
+oa.displayName = "Separator";
+function Pa(d) {
   var u = d, {
     variant: e = "text",
     width: a,
@@ -1758,7 +1853,7 @@ function Oa(d) {
     "className",
     "aria-label"
   ]);
-  const b = [
+  const g = [
     "motion-safe:animate-pulse",
     "bg-surface-muted",
     $("sm")
@@ -1767,16 +1862,16 @@ function Oa(d) {
     card: "h-32",
     list: "h-12",
     circle: $("full")
-  }, x = n(...b, m[e], i), f = {};
+  }, x = n(...g, m[e], i), f = {};
   a && (f.width = a), r && (f.height = r);
-  const g = o || `Loading ${e} content`;
+  const b = o || `Loading ${e} content`;
   return e === "text" && t > 1 ? /* @__PURE__ */ l(
     "div",
     y(p({
       className: s("sm", "space-y"),
       role: "status",
       "aria-busy": "true",
-      "aria-label": g
+      "aria-label": b
     }, c), {
       children: Array.from({ length: t }).map((N, S) => /* @__PURE__ */ l(
         "div",
@@ -1795,11 +1890,11 @@ function Oa(d) {
       style: f,
       role: "status",
       "aria-busy": "true",
-      "aria-label": g
+      "aria-label": b
     }, c)
   );
 }
-const sa = {
+const ca = {
   primary: {
     // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
     light: "text-indigo-400",
@@ -1851,8 +1946,8 @@ const sa = {
     contrast: "text-fg-inverse"
   }
 };
-function ia(b, u) {
-  var m = b, {
+function da(g, u) {
+  var m = g, {
     variant: e = "paragraph",
     bold: a,
     italic: r,
@@ -1885,25 +1980,25 @@ 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(ca[o][c]), /* @__PURE__ */ l(f, p({ ref: u, className: n(...x, t) }, d));
 }
-const H = F(ia), la = {
+const _ = F(da), ua = {
   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(
+}, fa = de.forwardRef(
   (u, d) => {
-    var b = u, {
+    var g = u, {
       className: e,
       maxWidth: a = "lg",
       paddingX: r = "base",
       paddingY: t = "base",
       center: i = !0,
       children: o
-    } = b, c = h(b, [
+    } = g, c = h(g, [
       "className",
       "maxWidth",
       "paddingX",
@@ -1917,7 +2012,7 @@ const H = F(ia), la = {
         ref: d,
         className: n(
           "w-full",
-          la[a],
+          ua[a],
           s(r, "px"),
           s(t, "py"),
           i && "mx-auto",
@@ -1929,17 +2024,17 @@ const H = F(ia), la = {
     );
   }
 );
-oa.displayName = "Container";
-const ca = ce.forwardRef(
+fa.displayName = "Container";
+const pa = de.forwardRef(
   (u, d) => {
-    var b = u, {
+    var g = u, {
       className: e,
       spacing: a = "base",
       align: r = "stretch",
       justify: t = "start",
       direction: i = "column",
       children: o
-    } = b, c = h(b, [
+    } = g, c = h(g, [
       "className",
       "spacing",
       "align",
@@ -1978,8 +2073,8 @@ const ca = ce.forwardRef(
     );
   }
 );
-ca.displayName = "Stack";
-function da(i) {
+pa.displayName = "Stack";
+function ma(i) {
   var o = i, {
     items: e,
     separator: a = "/",
@@ -1999,10 +2094,10 @@ function da(i) {
     "ol",
     {
       className: n("flex", "items-center", s("sm", "space-x")),
-      children: e.map((u, b) => {
-        const m = b === e.length - 1;
+      children: e.map((u, g) => {
+        const m = g === e.length - 1;
         return /* @__PURE__ */ v("li", { className: "flex items-center", children: [
-          b > 0 && /* @__PURE__ */ l(
+          g > 0 && /* @__PURE__ */ l(
             "span",
             {
               className: n(
@@ -2018,7 +2113,7 @@ function da(i) {
             {
               className: n(
                 "text-fg-primary",
-                j("label")
+                B("label")
               ),
               "aria-current": "page",
               children: u.label
@@ -2035,7 +2130,7 @@ function da(i) {
                 "border-b-2",
                 "border-transparent",
                 w("bodySmall"),
-                j("label"),
+                B("label"),
                 "transition-colors",
                 "text-fg-secondary",
                 "hover:border-line-emphasis",
@@ -2044,12 +2139,68 @@ function da(i) {
               children: u.label
             }
           ) : /* @__PURE__ */ l("span", { className: "text-fg-secondary", children: u.label })
-        ] }, b);
+        ] }, g);
       })
     }
   ) }));
 }
-function ua(t) {
+const ga = F(
+  function(u, d) {
+    var g = u, { title: a, message: r, illustration: t, action: i, className: o = "" } = g, c = h(g, ["title", "message", "illustration", "action", "className"]);
+    return /* @__PURE__ */ v(
+      "div",
+      y(p({
+        ref: d,
+        className: n(
+          "flex",
+          "flex-col",
+          "items-center",
+          "justify-center",
+          "text-center",
+          s("xl", "py"),
+          s("base", "px"),
+          o
+        ),
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": r ? `${a}. ${r}` : a
+      }, c), {
+        children: [
+          t && /* @__PURE__ */ l("div", { className: n(s("base", "mb")), "aria-hidden": "true", children: t }),
+          /* @__PURE__ */ l(
+            _,
+            {
+              as: "h3",
+              className: n(
+                w("h4"),
+                Ve("semibold"),
+                "text-fg-primary",
+                s("sm", "mb")
+              ),
+              children: a
+            }
+          ),
+          r && /* @__PURE__ */ l(
+            _,
+            {
+              as: "p",
+              className: n(
+                w("bodySmall"),
+                "text-fg-secondary",
+                s("md", "mb"),
+                "max-w-sm"
+              ),
+              children: r
+            }
+          ),
+          i
+        ]
+      })
+    );
+  }
+);
+ga.displayName = "EmptyStateBase";
+function ba(t) {
   var i = t, { children: e, className: a } = i, r = h(i, ["children", "className"]);
   return /* @__PURE__ */ l(
     "div",
@@ -2067,7 +2218,7 @@ function ua(t) {
     })
   );
 }
-function fa(c) {
+function xa(c) {
   var d = c, {
     children: e,
     icon: a,
@@ -2099,7 +2250,7 @@ function fa(c) {
     })
   );
 }
-function pa(t) {
+function ha(t) {
   var i = t, {
     children: e,
     className: a
@@ -2109,7 +2260,7 @@ function pa(t) {
   ]);
   return /* @__PURE__ */ l("p", y(p({ className: n("text-sm text-fg-secondary", a) }, r), { children: e }));
 }
-function ma(t) {
+function ya(t) {
   var i = t, {
     children: e,
     className: a
@@ -2131,12 +2282,12 @@ function ma(t) {
     })
   );
 }
-function ga(t) {
+function va(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 }));
 }
-function ba(b) {
-  var m = b, {
+function wa(g) {
+  var m = g, {
     variant: e = "default",
     padding: a = "medium",
     className: r = "",
@@ -2158,24 +2309,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,9 +2340,9 @@ 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({
+  ), f = t !== void 0, b = f ? "button" : void 0, N = f ? 0 : void 0, S = n(x({ variant: e, padding: a }), r), C = p({
     className: S,
-    role: g,
+    role: b,
     tabIndex: N,
     onClick: t,
     onKeyDown: f ? (L) => {
@@ -2200,17 +2351,17 @@ function ba(b) {
     "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(p({}, C), { children: d })) : /* @__PURE__ */ l("div", y(p({}, C), { 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 = W(wa);
+me.displayName = "Card";
+const I = me;
+I.Header = ba;
+I.Title = xa;
+I.Subtitle = ha;
+I.Actions = ya;
+I.Body = va;
+function Ia(t) {
   var i = t, {
     children: e,
     className: a = ""
@@ -2227,7 +2378,7 @@ function Ba(t) {
     })
   );
 }
-function Ma(t) {
+function Ua(t) {
   var i = t, {
     children: e,
     className: a = ""
@@ -2244,7 +2395,7 @@ function Ma(t) {
     })
   );
 }
-function Ha(t) {
+function Ka(t) {
   var i = t, {
     children: e,
     className: a = ""
@@ -2266,7 +2417,7 @@ function Ha(t) {
     })
   );
 }
-function Pa(t) {
+function qa(t) {
   var i = t, {
     children: e,
     className: a = ""
@@ -2291,7 +2442,7 @@ function Pa(t) {
     })
   );
 }
-function Ia(o) {
+function Xa(o) {
   var c = o, {
     label: e,
     children: a,
@@ -2328,7 +2479,7 @@ function Ia(o) {
     })
   );
 }
-function Wa({ children: e, className: a }) {
+function Ga({ children: e, className: a }) {
   return /* @__PURE__ */ l(
     "div",
     {
@@ -2341,7 +2492,7 @@ function Wa({ children: e, className: a }) {
     }
   );
 }
-function Ua({
+function Ya({
   children: e,
   className: a
 }) {
@@ -2360,7 +2511,7 @@ function Ua({
     }
   );
 }
-const xa = A(
+const Na = z(
   n(
     "w-full flex flex-col",
     s("2xl", "py"),
@@ -2387,14 +2538,14 @@ const xa = A(
       align: "start"
     }
   }
-), ha = {
+), Sa = {
   start: "items-start",
   center: "items-center"
-}, ya = {
+}, $a = {
   start: "justify-start",
   center: "justify-center"
-}, va = F(
-  function(N, g) {
+}, ka = F(
+  function(N, b) {
     var S = N, {
       kicker: a,
       title: r,
@@ -2404,7 +2555,7 @@ const xa = A(
       meta: c,
       variant: d = "plain",
       align: u = "start",
-      className: b,
+      className: g,
       "aria-label": m,
       "aria-labelledby": x
     } = S, f = h(S, [
@@ -2420,15 +2571,15 @@ 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 = m != null || x != null, C = 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(p({
-        ref: g,
-        className: n(xa({ variant: d, align: u }), b),
-        "aria-label": k,
+        ref: b,
+        className: n(Na({ variant: d, align: u }), g),
+        "aria-label": C,
         "aria-labelledby": x
       }, f), {
         children: [
@@ -2438,11 +2589,11 @@ const xa = A(
               className: n(
                 "flex flex-col",
                 s("md", "gap-y"),
-                ha[u]
+                Sa[u]
               ),
               children: [
                 a ? /* @__PURE__ */ l(
-                  H,
+                  _,
                   {
                     as: "span",
                     variant: "caption",
@@ -2453,7 +2604,7 @@ const xa = A(
                   }
                 ) : null,
                 /* @__PURE__ */ l(
-                  H,
+                  _,
                   {
                     as: "h1",
                     variant: "heading",
@@ -2462,7 +2613,7 @@ const xa = A(
                   }
                 ),
                 t ? /* @__PURE__ */ l(
-                  H,
+                  _,
                   {
                     as: "p",
                     variant: "body",
@@ -2481,14 +2632,14 @@ const xa = A(
               className: n(
                 "flex flex-wrap",
                 s("sm", "gap"),
-                ya[u]
+                $a[u]
               ),
               children: i
             }
           ) : null,
           o ? /* @__PURE__ */ l("div", { className: "w-full", children: o }) : null,
           c ? /* @__PURE__ */ l(
-            H,
+            _,
             {
               as: "p",
               variant: "caption",
@@ -2503,8 +2654,8 @@ const xa = A(
     );
   }
 );
-va.displayName = "HeroSection";
-function Ka(r) {
+ka.displayName = "HeroSection";
+function Za(r) {
   var t = r, {
     className: e = ""
   } = t, a = h(t, [
@@ -2523,7 +2674,7 @@ function Ka(r) {
     }, a)
   );
 }
-function qa(t) {
+function Ja(t) {
   var i = t, {
     orientation: e = "horizontal",
     className: a = ""
@@ -2561,7 +2712,7 @@ function qa(t) {
     }, r)
   );
 }
-const wa = A(
+const Ca = z(
   // Base classes
   n("w-full", "flex", "flex-col", s("sm", "gap")),
   {
@@ -2576,7 +2727,7 @@ const wa = A(
     }
   }
 );
-function Xa(d) {
+function Qa(d) {
   var u = d, {
     title: e,
     description: a,
@@ -2592,8 +2743,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(p({ className: n(Ca({ variant: i }), o) }, c), { children: [
+    r && r.length > 0 && /* @__PURE__ */ l(ma, { items: r }),
     /* @__PURE__ */ v(
       "div",
       {
@@ -2601,7 +2752,7 @@ function Xa(d) {
         children: [
           /* @__PURE__ */ v("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ l(
-              H,
+              _,
               {
                 variant: "heading",
                 as: "h1",
@@ -2609,7 +2760,7 @@ function Xa(d) {
                 children: e
               }
             ),
-            a && /* @__PURE__ */ l(H, { variant: "body", className: "text-fg-secondary", children: a })
+            a && /* @__PURE__ */ l(_, { variant: "body", className: "text-fg-secondary", children: a })
           ] }),
           t && /* @__PURE__ */ l(
             "div",
@@ -2623,17 +2774,17 @@ function Xa(d) {
     )
   ] }));
 }
-const Na = {
+const Ea = {
   start: "items-start text-left",
   center: "items-center text-center"
-}, Sa = {
+}, Ta = {
   neutral: "text-fg-tertiary",
   success: "text-fg-success",
   warning: "text-fg-warning",
   error: "text-fg-error"
 };
-function Ga(u) {
-  var b = u, {
+function et(u) {
+  var g = u, {
     value: e,
     label: a,
     hint: r,
@@ -2641,7 +2792,7 @@ function Ga(u) {
     align: i = "start",
     tone: o = "neutral",
     className: c
-  } = b, d = h(b, [
+  } = g, d = h(g, [
     "value",
     "label",
     "hint",
@@ -2658,7 +2809,7 @@ function Ga(u) {
         "bg-surface-base flex-1 flex flex-col",
         s("base", "p"),
         s("xs", "gap-y"),
-        Na[i],
+        Ea[i],
         c
       )
     }, d), {
@@ -2673,17 +2824,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", Ta[o]), children: r }) : null
       ]
     })
   );
 }
-const $a = {
+const Va = {
   2: "md:grid-cols-2",
   3: "md:grid-cols-3",
   4: "md:grid-cols-4"
 };
-function Ya(c) {
+function at(c) {
   var d = c, {
     layout: e = "grid",
     cols: a = 4,
@@ -2715,7 +2866,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 ${Va[a]}` : "flex"
             ),
             children: i
           }
@@ -2724,7 +2875,7 @@ function Ya(c) {
     })
   );
 }
-function Za(i) {
+function tt(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(
@@ -2736,7 +2887,7 @@ function Za(i) {
     })
   );
 }
-const ka = A(n("flex items-center", "border-b"), {
+const Aa = z(n("flex items-center", "border-b"), {
   variants: {
     variant: {
       default: n("border-line-default", s("base", "gap-x")),
@@ -2746,7 +2897,7 @@ const ka = A(n("flex items-center", "border-b"), {
   defaultVariants: {
     variant: "default"
   }
-}), Ca = A(
+}), za = z(
   n(
     "relative -mb-px inline-flex items-center",
     s("xs", "gap-x"),
@@ -2794,14 +2945,14 @@ const ka = A(n("flex items-center", "border-b"), {
       active: !1
     }
   }
-), Ea = n(
+), Fa = n(
   "inline-flex items-center justify-center",
   $("full"),
   s("xs", "px"),
   "bg-surface-muted text-fg-secondary text-xs"
-), Ta = F(
-  function(b, u) {
-    var m = b, {
+), La = F(
+  function(g, u) {
+    var m = g, {
       items: a,
       variant: r = "default",
       linkComponent: t,
@@ -2824,31 +2975,31 @@ const ka = A(n("flex items-center", "border-b"), {
       "nav",
       y(p({
         ref: u,
-        className: n(ka({ variant: r }), i),
+        className: n(Aa({ variant: r }), i),
         "aria-label": o,
         "aria-labelledby": c
       }, d), {
-        children: a.map((f, g) => /* @__PURE__ */ v(
+        children: a.map((f, b) => /* @__PURE__ */ v(
           x,
           {
             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: za({ 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: Fa, children: f.count }) : null
             ]
           },
-          f.href || g
+          f.href || b
         ))
       })
     );
   }
 );
-Ta.displayName = "TabsAsLinks";
-function Ja({
+La.displayName = "TabsAsLinks";
+function rt({
   items: e,
   orientation: a = "vertical",
   className: r = ""
@@ -2869,7 +3020,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(
@@ -2929,7 +3080,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 +3131,45 @@ function Ja({
   }) });
 }
 export {
-  Ee as Badge,
-  da as Breadcrumb,
-  Ie 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,
-  H as Text,
-  Ja as Timeline
+  Ee as AvatarBase,
+  ze as Badge,
+  ma as Breadcrumb,
+  qe as Button,
+  I as Card,
+  ya as CardActions,
+  va as CardBody,
+  ba as CardHeader,
+  ha as CardSubtitle,
+  xa as CardTitle,
+  Xe as Chip,
+  fa as Container,
+  Ye as DataBadge,
+  Ua as DialogFooter,
+  Ia as DialogHeader,
+  qa as DrawerFooter,
+  Ka as DrawerHeader,
+  ga as EmptyStateBase,
+  Wa as ErrorMessage,
+  Xa as FilterChips,
+  Ga as HeaderActions,
+  Ya as HeaderNavigation,
+  ka as HeroSection,
+  Ha as Info,
+  Qe as InputBase,
+  ta as Label,
+  Za as MenuSeparator,
+  Ja as NavbarSeparator,
+  Qa as PageHeader,
+  sa as Progress,
+  oa as Separator,
+  Pa as Skeleton,
+  pe as Spinner,
+  pa as Stack,
+  et as Stat,
+  at as StatGroup,
+  tt as TableCell,
+  La as TabsAsLinks,
+  _ as Text,
+  rt as Timeline
 };
 //# sourceMappingURL=index.js.map