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

package/dist/server/index.js

@@ -2,7 +2,7 @@ var be = Object.defineProperty, xe = Object.defineProperties;
 var he = Object.getOwnPropertyDescriptors;
 var K = Object.getOwnPropertySymbols;
 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) => {
+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 = {}))
     te.call(a, r) && G(e, r, a[r]);
   if (K)
@@ -22,7 +22,7 @@ var h = (e, a) => {
 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 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";
@@ -117,8 +117,8 @@ const z = (e, a) => {
   circle: $("full"),
   square: $("none"),
   rounded: $("md")
-}, Ee = L(
-  function(x, p) {
+}, Ee = F(
+  function(x, m) {
     var f = x, {
       src: a,
       alt: r,
@@ -128,7 +128,7 @@ const z = (e, a) => {
       loading: c = "eager",
       "aria-label": d,
       className: u = ""
-    } = f, b = h(f, [
+    } = f, g = h(f, [
       "src",
       "alt",
       "fallback",
@@ -138,11 +138,11 @@ const z = (e, a) => {
       "aria-label",
       "className"
     ]);
-    const g = !a, w = typeof t == "string" ? t.toUpperCase().slice(0, 2) : t, N = d || r || "User avatar";
+    const b = !a, N = typeof t == "string" ? t.toUpperCase().slice(0, 2) : t, S = d || r || "User avatar";
     return /* @__PURE__ */ v(
       "div",
-      y(m({
-        ref: p,
+      y(p({
+        ref: m,
         className: n(
           "relative",
           "inline-flex",
@@ -158,10 +158,10 @@ const z = (e, a) => {
           u
         ),
         role: "img",
-        "aria-label": N
-      }, b), {
+        "aria-label": S
+      }, g), {
         children: [
-          !g && /* @__PURE__ */ l(
+          !b && /* @__PURE__ */ l(
             "img",
             {
               src: a,
@@ -176,7 +176,7 @@ const z = (e, a) => {
               "aria-hidden": "true"
             }
           ),
-          g && /* @__PURE__ */ l(
+          b && /* @__PURE__ */ l(
             "span",
             {
               className: n(
@@ -188,7 +188,7 @@ const z = (e, a) => {
                 Y[o]
               ),
               "aria-hidden": "true",
-              children: w || "?"
+              children: N || "?"
             }
           )
         ]
@@ -197,7 +197,7 @@ const z = (e, a) => {
   }
 );
 Ee.displayName = "AvatarBase";
-class C {
+class E {
   // 4px base
   /**
    * Create a spacing token from scale value
@@ -264,42 +264,42 @@ class C {
     }[a] || String(a);
   }
 }
-ne(C, "BASE_UNIT", 4);
+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") {
@@ -326,7 +326,7 @@ function s(e, a = "p") {
     "space-y": "space-y"
   }[a]}-${t}`;
 }
-class E {
+class k {
   /**
    * Create font size token
    */
@@ -396,41 +396,44 @@ class E {
     };
   }
 }
-E.createFontWeight("light"), E.createFontWeight("normal"), E.createFontWeight("medium"), E.createFontWeight("semibold"), E.createFontWeight("bold");
+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 = Q[e];
   return `${a.fontSize.tailwind} ${a.lineHeight.tailwind} ${a.fontWeight.tailwind}`;
 }
-function S(e) {
+function w(e) {
   return Q[e].fontSize.tailwind;
 }
-function _(e) {
+function B(e) {
   return Q[e].fontWeight.tailwind;
 }
-const Ve = z(
+function Ve(e) {
+  return k.createFontWeight(e).tailwind;
+}
+const Ae = z(
   // Base classes
   n(
     "inline-flex",
     "items-center",
     "justify-center",
-    _("label"),
+    B("label"),
     $("md"),
     "border"
   ),
@@ -449,17 +452,17 @@ const Ve = z(
         sm: n(
           s("1.5", "px"),
           s("0.5", "py"),
-          S("caption")
+          w("caption")
         ),
         md: n(
           s("sm", "px"),
           s("xs", "py"),
-          S("caption")
+          w("caption")
         ),
         lg: n(
           s("sm", "px"),
           s("xs", "py"),
-          S("bodySmall")
+          w("bodySmall")
         )
       },
       style: {
@@ -562,16 +565,16 @@ const Ve = z(
       style: "solid"
     }
   }
-), Ae = M(
-  L(function(b, u) {
-    var p = b, {
+), ze = W(
+  F(function(g, u) {
+    var m = g, {
       variant: a = "neutral",
       size: r = "md",
       style: t = "solid",
       className: i = "",
       children: o,
       "aria-label": c
-    } = p, d = h(p, [
+    } = m, d = h(m, [
       "variant",
       "size",
       "style",
@@ -579,19 +582,19 @@ const Ve = z(
       "children",
       "aria-label"
     ]);
-    const x = n(Ve({ 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",
-      y(m({
+      y(p({
         ref: u,
         role: "status",
         "aria-label": f,
@@ -602,13 +605,13 @@ const Ve = z(
     );
   })
 );
-Ae.displayName = "Badge";
+ze.displayName = "Badge";
 function ie(e, a) {
   if (typeof e == "function")
     return e(a);
   e != null && (e.current = a);
 }
-function ze(...e) {
+function Fe(...e) {
   return (a) => {
     let r = !1;
     const t = e.map((i) => {
@@ -625,23 +628,23 @@ function ze(...e) {
   };
 }
 function Le(...e) {
-  return A.useCallback(ze(...e), e);
+  return A.useCallback(Fe(...e), e);
 }
 // @__NO_SIDE_EFFECTS__
-function Fe(e) {
+function De(e) {
   const a = A.forwardRef((r, t) => {
-    var g;
+    var b;
     let f = r, { children: i } = f, o = h(f, ["children"]), c = null, d = !1;
     const u = [];
-    le(i) && typeof q == "function" && (i = q(i._payload)), A.Children.forEach(i, (w) => {
-      var N;
-      if (Oe(w)) {
+    le(i) && typeof q == "function" && (i = q(i._payload)), A.Children.forEach(i, (N) => {
+      var S;
+      if (Me(N)) {
         d = !0;
-        const T = w;
-        let k = "child" in T.props ? T.props.child : T.props.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);
+        const T = N;
+        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(w);
+        u.push(N);
     }), 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
@@ -649,7 +652,7 @@ function Fe(e) {
       // itself as the slot target — throw a descriptive error below instead.
       !d && A.Children.count(i) === 1 && A.isValidElement(i) && (c = i)
     );
-    const b = c ? Be(c) : void 0, p = Le(t, b);
+    const g = c ? Oe(c) : void 0, m = Le(t, g);
     if (!c) {
       if (i || i === 0)
         throw new Error(
@@ -657,18 +660,18 @@ function Fe(e) {
         );
       return i;
     }
-    const x = Re(o, (g = c.props) != null ? g : {});
-    return c.type !== A.Fragment && (x.ref = t ? p : b), A.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 ue = /* @__PURE__ */ Fe("Slot"), fe = /* @__PURE__ */ Symbol.for("radix.slottable");
+var ue = /* @__PURE__ */ De("Slot"), fe = /* @__PURE__ */ Symbol.for("radix.slottable");
 // @__NO_SIDE_EFFECTS__
-function De(e) {
+function je(e) {
   const a = (r) => "child" in r ? r.children(r.child) : r.children;
   return a.displayName = `${e}.Slottable`, a.__radixId = fe, a;
 }
-var je = /* @__PURE__ */ De("Slottable"), _e = (e, a) => {
+var _e = /* @__PURE__ */ je("Slottable"), Be = (e, a) => {
   if ("child" in e.props) {
     const r = e.props.child;
     return A.isValidElement(r) ? A.cloneElement(r, void 0, e.props.children(r.props.children)) : null;
@@ -676,33 +679,33 @@ var je = /* @__PURE__ */ De("Slottable"), _e = (e, a) => {
   return A.isValidElement(a) ? a : null;
 };
 function Re(e, a) {
-  const r = m({}, a);
+  const r = p({}, 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] = m(m({}, i), o) : t === "className" && (r[t] = [i, o].filter(Boolean).join(" "));
+    } : i && (r[t] = i) : t === "style" ? r[t] = p(p({}, i), o) : t === "className" && (r[t] = [i, o].filter(Boolean).join(" "));
   }
-  return m(m({}, e), r);
+  return p(p({}, e), r);
 }
-function Be(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 Oe(e) {
+function Me(e) {
   return A.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === fe;
 }
-var Me = /* @__PURE__ */ Symbol.for("react.lazy");
+var We = /* @__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);
+  return e != null && typeof e == "object" && "$$typeof" in e && e.$$typeof === We && "_payload" in e && He(e._payload);
 }
 function He(e) {
   return typeof e == "object" && e !== null && "then" in e;
 }
 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", {
+const Ue = z("motion-safe:animate-spin", {
   variants: {
     size: {
       sm: "h-4 w-4",
@@ -719,7 +722,7 @@ const We = z("motion-safe:animate-spin", {
     size: "md",
     variant: "primary"
   }
-}), pe = M(function(c) {
+}), pe = W(function(c) {
   var d = c, {
     size: a = "md",
     variant: r = "primary",
@@ -733,7 +736,7 @@ const We = z("motion-safe:animate-spin", {
   ]);
   return /* @__PURE__ */ v(
     "div",
-    y(m({
+    y(p({
       className: n("inline-flex", "items-center", i),
       role: "status",
       "aria-label": t || "Loading",
@@ -743,7 +746,7 @@ const We = z("motion-safe:animate-spin", {
         /* @__PURE__ */ l(
           Ne,
           {
-            className: n(We({ size: a, variant: r })),
+            className: n(Ue({ size: a, variant: r })),
             "aria-hidden": "true"
           }
         ),
@@ -752,7 +755,7 @@ const We = z("motion-safe:animate-spin", {
           {
             className: n(
               s("sm", "ml"),
-              S("bodySmall"),
+              w("bodySmall"),
               "text-fg-secondary",
               "sr-only"
             ),
@@ -764,7 +767,7 @@ const We = z("motion-safe:animate-spin", {
   );
 });
 pe.displayName = "Spinner";
-const Ue = z(
+const Ke = z(
   // Base classes
   n(
     "inline-flex",
@@ -861,19 +864,19 @@ const Ue = z(
         sm: n(
           s("md", "px"),
           s("1.5", "py"),
-          S("bodySmall"),
+          w("bodySmall"),
           s("1.5", "gap")
         ),
         md: n(
           s("base", "px"),
           s("sm", "py"),
-          S("body"),
+          w("body"),
           s("sm", "gap")
         ),
         lg: n(
           s("lg", "px"),
           s("md", "py"),
-          S("bodyLarge"),
+          w("bodyLarge"),
           s("2.5", "gap")
         )
       }
@@ -935,9 +938,9 @@ function X({
     }
   ) : null;
 }
-const Ke = M(
-  L(function(k, T) {
-    var F = k, {
+const qe = W(
+  F(function(C, T) {
+    var L = C, {
       variant: a = "primary",
       size: r = "md",
       isLoading: t = !1,
@@ -946,13 +949,13 @@ const Ke = M(
       leftIcon: c,
       rightIcon: d,
       fullWidth: u = !1,
-      asChild: b = !1,
-      as: p,
+      asChild: g = !1,
+      as: m,
       className: x = "",
       disabled: f = !1,
-      children: g,
-      "aria-label": w
-    } = F, N = h(F, [
+      children: b,
+      "aria-label": N
+    } = L, S = h(L, [
       "variant",
       "size",
       "isLoading",
@@ -968,36 +971,36 @@ const Ke = M(
       "children",
       "aria-label"
     ]);
-    typeof process != "undefined" && process.env.NODE_ENV !== "production" && b && p !== void 0 && p !== "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 ? ue : p != null ? p : "button", B = n(
-      Ue({ 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)) && !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,
+    ), 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
-    }, ee ? { type: ee } : {}), N);
-    return b ? /* @__PURE__ */ v(R, y(m({ ref: T }, ae), { 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(je, { children: g }),
+      /* @__PURE__ */ l(_e, { children: b }),
       d && /* @__PURE__ */ l(X, { position: "right", children: d })
-    ] })) : /* @__PURE__ */ l(R, y(m({ ref: T }, ae), { children: t ? /* @__PURE__ */ v(J, { children: [
+    ] })) : /* @__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 })
+      !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 })
     ] }) }));
   })
 );
-Ke.displayName = "Button";
+qe.displayName = "Button";
 const oe = z(
   // Base classes
   n(
@@ -1033,17 +1036,17 @@ const oe = z(
         sm: n(
           s("xs", "px"),
           s("xs", "py"),
-          S("caption")
+          w("caption")
         ),
         md: n(
           s("sm", "px"),
           s("xs", "py"),
-          S("bodySmall")
+          w("bodySmall")
         ),
         lg: n(
           s("md", "px"),
           s("sm", "py"),
-          S("body")
+          w("body")
         )
       },
       selected: {
@@ -1087,7 +1090,7 @@ const oe = z(
       disabled: !1
     }
   }
-), qe = L(function(a, r) {
+), Xe = F(function(a, r) {
   const {
     children: t,
     variant: i = "default",
@@ -1095,11 +1098,11 @@ const oe = z(
     selected: c = !1,
     disabled: d = !1,
     className: u = "",
-    "aria-label": b,
-    tabIndex: p,
+    "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;
@@ -1116,18 +1119,18 @@ const oe = z(
           oe({ variant: i, size: o, selected: c, disabled: d }),
           u
         ),
-        "aria-label": b,
+        "aria-label": g,
         "aria-disabled": d || void 0,
-        tabIndex: p,
+        tabIndex: m,
         children: t
       }
     );
-  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(
+  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, 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",
@@ -1137,34 +1140,34 @@ const oe = z(
         $("full"),
         s("xs", "px"),
         s("0.5", "py"),
-        S("caption"),
-        _("label"),
-        P ? n("bg-surface-base", "text-fg-brand-emphasis") : n("bg-surface-brand-strong", "text-fg-inverse")
+        w("caption"),
+        B("label"),
+        H ? n("bg-surface-base", "text-fg-brand-emphasis") : n("bg-surface-brand-strong", "text-fg-inverse")
       ),
       children: T
     }
-  ) : null, U = B && g !== void 0 ? `${g}, ${T}` : g;
+  ) : null, U = O && b !== void 0 ? `${b}, ${T}` : b;
   return /* @__PURE__ */ v(
     "div",
     {
       ref: r,
       className: n(
         oe({ variant: i, size: o, selected: c, disabled: d }),
-        w && s("xs", "pr"),
+        N && s("xs", "pr"),
         u
       ),
       "aria-disabled": d,
       children: [
-        k ? /* @__PURE__ */ l(
+        C ? /* @__PURE__ */ l(
           "button",
           {
             type: "button",
-            onClick: d ? void 0 : N,
+            onClick: d ? void 0 : S,
             onKeyDown: R,
             disabled: d,
             "aria-pressed": c ? !0 : void 0,
-            "aria-label": b || U,
-            tabIndex: p !== void 0 ? p : F ? 0 : void 0,
+            "aria-label": g || U,
+            tabIndex: m !== void 0 ? m : L ? 0 : void 0,
             className: n(
               "flex-1",
               "bg-transparent",
@@ -1182,13 +1185,13 @@ const oe = z(
             children: t
           }
         ) : /* @__PURE__ */ l("span", { children: t }),
-        I,
-        w && !d && /* @__PURE__ */ l(
+        P,
+        N && !d && /* @__PURE__ */ l(
           "button",
           {
             type: "button",
             onClick: (V) => {
-              V.stopPropagation(), w();
+              V.stopPropagation(), N();
             },
             className: n(
               s("xs", "ml"),
@@ -1201,7 +1204,7 @@ const oe = z(
               "focus:ring-line-focus",
               "focus:ring-offset-1"
             ),
-            "aria-label": `Remove ${g || "chip"}`,
+            "aria-label": `Remove ${b || "chip"}`,
             children: /* @__PURE__ */ l(Se, { className: "h-3 w-3", "aria-hidden": "true" })
           }
         )
@@ -1209,8 +1212,8 @@ const oe = z(
     }
   );
 });
-qe.displayName = "Chip";
-const Xe = z(
+Xe.displayName = "Chip";
+const Ge = z(
   n("inline-flex", "items-center", "border", $("md")),
   {
     variants: {
@@ -1255,16 +1258,16 @@ const Xe = z(
     },
     defaultVariants: { tone: "neutral", size: "md" }
   }
-), Ge = M(
-  L(function(b, u) {
-    var p = b, {
+), Ye = W(
+  F(function(g, u) {
+    var m = g, {
       label: a,
       source: r,
       tone: t = "neutral",
       size: i = "md",
       icon: o,
       className: c = ""
-    } = p, d = h(p, [
+    } = m, d = h(m, [
       "label",
       "source",
       "tone",
@@ -1275,9 +1278,9 @@ const Xe = z(
     const x = r != null && r !== "", f = i === "sm" ? "caption" : "bodySmall";
     return /* @__PURE__ */ v(
       "span",
-      y(m({
+      y(p({
         ref: u,
-        className: n(Xe({ tone: t, size: i }), c)
+        className: n(Ge({ tone: t, size: i }), c)
       }, d), {
         children: [
           o ? /* @__PURE__ */ l(
@@ -1292,20 +1295,20 @@ const Xe = z(
             "span",
             {
               className: n(
-                S(f),
-                _("label")
+                w(f),
+                B("label")
               ),
               children: a
             }
           ),
           x ? /* @__PURE__ */ v(J, { children: [
-            /* @__PURE__ */ l("span", { "aria-hidden": "true", className: S("caption"), children: "·" }),
+            /* @__PURE__ */ l("span", { "aria-hidden": "true", className: w("caption"), children: "·" }),
             /* @__PURE__ */ l(
               "span",
               {
                 className: n(
-                  S("caption"),
-                  _("caption")
+                  w("caption"),
+                  B("caption")
                 ),
                 children: r
               }
@@ -1316,8 +1319,8 @@ const Xe = z(
     );
   })
 );
-Ge.displayName = "DataBadge";
-function Oa(i) {
+Ye.displayName = "DataBadge";
+function Wa(i) {
   var o = i, {
     message: e,
     id: a,
@@ -1329,18 +1332,18 @@ function Oa(i) {
   ]);
   const c = [
     s("xs", "mt"),
-    S("bodySmall"),
+    w("bodySmall"),
     "text-fg-error",
     "flex",
     "items-center",
     s("xs", "gap")
   ], d = n(...c, r);
-  return /* @__PURE__ */ v("div", y(m({ role: "alert", id: a, className: d, "aria-live": "polite" }, t), { children: [
+  return /* @__PURE__ */ v("div", y(p({ 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 Ma(t) {
+function Ha(t) {
   var i = t, {
     variant: e = "info",
     className: a
@@ -1355,7 +1358,7 @@ function Ma(t) {
   };
   return /* @__PURE__ */ l(
     "div",
-    m({
+    p({
       role: "alert",
       className: n(
         "border",
@@ -1368,7 +1371,7 @@ function Ma(t) {
     }, r)
   );
 }
-const Ye = z(
+const Ze = z(
   n(
     "w-full",
     $("md"),
@@ -1404,17 +1407,17 @@ const Ye = z(
       size: {
         sm: n(
           "h-8",
-          S("bodySmall"),
+          w("bodySmall"),
           s("md", "px")
         ),
         md: n(
           "h-10",
-          S("body"),
+          w("body"),
           s("base", "px")
         ),
         lg: n(
           "h-12",
-          S("bodyLarge"),
+          w("bodyLarge"),
           s("lg", "px")
         )
       },
@@ -1435,7 +1438,7 @@ const Ye = z(
     }
   }
 );
-function Ze({
+function Je({
   error: e,
   success: a,
   helperText: r,
@@ -1459,9 +1462,9 @@ function Ze({
     }
   );
 }
-const Je = L(
-  function(T, N) {
-    var k = T, {
+const Qe = F(
+  function(T, S) {
+    var C = T, {
       id: a,
       label: r,
       error: t = !1,
@@ -1470,12 +1473,12 @@ const Je = L(
       size: c = "md",
       variant: d = "outlined",
       leftIcon: u,
-      rightIcon: b,
-      rightSlot: p,
+      rightIcon: g,
+      rightSlot: m,
       className: x = "",
       disabled: f = !1,
-      type: g = "text"
-    } = k, w = h(k, [
+      type: b = "text"
+    } = C, N = h(C, [
       "id",
       "label",
       "error",
@@ -1493,13 +1496,13 @@ const Je = L(
     typeof process != "undefined" && process.env.NODE_ENV !== "production" && r && !a && console.warn(
       "[InputBase] `label` was provided without an `id`. The <label> cannot bind to the input (InputBase does not auto-generate an id — that needs a client hook). Pass an `id`, or use the interactive `Input` which auto-generates one."
     );
-    const F = t ? "error" : 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 }),
+    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 || p) && (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",
@@ -1513,58 +1516,58 @@ const Je = L(
         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(
           "input",
-          m({
+          p({
             id: a,
-            ref: N,
-            type: g,
+            ref: S,
+            type: b,
             className: U,
             disabled: f,
             "aria-invalid": t,
-            "aria-required": w.required,
-            "aria-describedby": R || B,
+            "aria-required": N.required,
+            "aria-describedby": R || O,
             suppressHydrationWarning: !0
-          }, w)
+          }, N)
         ),
-        (b || p) && /* @__PURE__ */ l(
+        (g || m) && /* @__PURE__ */ l(
           "div",
           {
             className: `absolute right-3 top-0 bottom-0 flex items-center ${s("xs", "gap")}`,
-            children: p != null ? p : /* @__PURE__ */ l(
+            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(
-        Ze,
+        Je,
         {
           error: t,
           success: i,
           helperText: o,
           errorId: R,
-          helperId: B
+          helperId: O
         }
       )
     ] });
   }
 );
-Je.displayName = "InputBase";
-const Qe = n(
+Qe.displayName = "InputBase";
+const ea = n(
   "block",
-  S("label"),
-  _("label"),
+  w("label"),
+  B("label"),
   "text-fg-primary"
-), ea = {
+), aa = {
   default: "",
   required: n(
     "after:content-['*']",
@@ -1577,19 +1580,19 @@ const Qe = n(
     "after:text-fg-tertiary",
     "after:font-normal"
   )
-}, aa = M(
-  L(function(c, o) {
+}, 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(
-      Qe,
-      ea[a],
+      ea,
+      aa[a],
       r
     );
-    return /* @__PURE__ */ l("label", y(m({ ref: o, className: u }, i), { children: t }));
+    return /* @__PURE__ */ l("label", y(p({ ref: o, className: u }, i), { children: t }));
   })
 );
-aa.displayName = "Label";
-class O {
+ta.displayName = "Label";
+class M {
   /**
    * Create a shadow token
    */
@@ -1633,19 +1636,19 @@ class O {
     }[a];
   }
 }
-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")
+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 Z(e) {
-  return ta[e].tailwind;
+  return ra[e].tailwind;
 }
-const ra = z("w-full", {
+const na = z("w-full", {
   variants: {
     size: {
       sm: "h-1",
@@ -1679,7 +1682,7 @@ const ra = z("w-full", {
   defaultVariants: {
     variant: "primary"
   }
-}), na = L(function(x, p) {
+}), sa = F(function(x, m) {
   var f = x, {
     value: a,
     max: r = 100,
@@ -1689,7 +1692,7 @@ const ra = z("w-full", {
     label: c,
     "aria-label": d,
     className: u = ""
-  } = f, b = h(f, [
+  } = f, g = h(f, [
     "value",
     "max",
     "variant",
@@ -1699,9 +1702,9 @@ const ra = z("w-full", {
     "aria-label",
     "className"
   ]);
-  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(
+  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(
@@ -1715,22 +1718,22 @@ const ra = z("w-full", {
             "span",
             {
               className: n(
-                S("bodySmall"),
-                _("label"),
+                w("bodySmall"),
+                B("label"),
                 "text-fg-primary"
               ),
               children: c
             }
           ),
-          !g && w !== void 0 && /* @__PURE__ */ v(
+          !b && N !== void 0 && /* @__PURE__ */ v(
             "span",
             {
               className: n(
-                S("bodySmall"),
+                w("bodySmall"),
                 "text-fg-secondary"
               ),
               children: [
-                w.toFixed(0),
+                N.toFixed(0),
                 "%"
               ]
             }
@@ -1742,19 +1745,19 @@ const ra = z("w-full", {
       "div",
       {
         role: "progressbar",
-        "aria-valuemin": g ? void 0 : 0,
-        "aria-valuemax": g ? void 0 : r,
-        "aria-valuenow": g ? void 0 : a,
-        "aria-label": N,
-        "aria-busy": g,
+        "aria-valuemin": b ? void 0 : 0,
+        "aria-valuemax": b ? void 0 : r,
+        "aria-valuenow": b ? void 0 : a,
+        "aria-label": S,
+        "aria-busy": b,
         className: n(
           "relative",
           "w-full",
           "overflow-hidden",
-          ra({ size: i, variant: t }),
+          na({ size: i, variant: t }),
           $("full")
         ),
-        children: g ? /* @__PURE__ */ l(
+        children: b ? /* @__PURE__ */ l(
           "div",
           {
             className: n(
@@ -1783,7 +1786,7 @@ const ra = z("w-full", {
               "ease-out"
             ),
             style: {
-              width: `${w}%`
+              width: `${N}%`
             },
             "aria-hidden": "true"
           }
@@ -1792,15 +1795,15 @@ const ra = z("w-full", {
     )
   ] }));
 });
-na.displayName = "Progress";
-const sa = {
+sa.displayName = "Progress";
+const ia = {
   horizontal: "w-full border-t",
   vertical: "h-full border-l self-stretch"
-}, ia = {
+}, la = {
   solid: "border-solid",
   dashed: "border-dashed",
   dotted: "border-dotted"
-}, la = M(function(o) {
+}, oa = W(function(o) {
   var c = o, {
     orientation: a = "horizontal",
     variant: r = "solid",
@@ -1813,28 +1816,28 @@ const sa = {
   const d = n(
     "border-0",
     "border-line-default",
-    sa[a],
-    ia[r],
+    ia[a],
+    la[r],
     t
   );
   return a === "vertical" ? /* @__PURE__ */ l(
     "div",
-    m({
+    p({
       className: d,
       role: "separator",
       "aria-orientation": "vertical"
     }, i)
   ) : /* @__PURE__ */ l(
     "hr",
-    m({
+    p({
       className: d,
       role: "separator",
       "aria-orientation": "horizontal"
     }, i)
   );
 });
-la.displayName = "Separator";
-function Ha(d) {
+oa.displayName = "Separator";
+function Pa(d) {
   var u = d, {
     variant: e = "text",
     width: a,
@@ -1850,48 +1853,48 @@ function Ha(d) {
     "className",
     "aria-label"
   ]);
-  const b = [
+  const g = [
     "motion-safe:animate-pulse",
     "bg-surface-muted",
     $("sm")
-  ], p = {
+  ], m = {
     text: "h-4",
     card: "h-32",
     list: "h-12",
     circle: $("full")
-  }, x = n(...b, p[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(m({
+    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((w, N) => /* @__PURE__ */ l(
+      children: Array.from({ length: t }).map((N, S) => /* @__PURE__ */ l(
         "div",
         {
           className: x,
-          style: N === t - 1 ? { width: "75%" } : f,
+          style: S === t - 1 ? { width: "75%" } : f,
           "aria-hidden": "true"
         },
-        N
+        S
       ))
     })
   ) : /* @__PURE__ */ l(
     "div",
-    m({
+    p({
       className: x,
       style: f,
       role: "status",
       "aria-busy": "true",
-      "aria-label": g
+      "aria-label": b
     }, c)
   );
 }
-const oa = {
+const ca = {
   primary: {
     // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
     light: "text-indigo-400",
@@ -1943,8 +1946,8 @@ const oa = {
     contrast: "text-fg-inverse"
   }
 };
-function ca(b, u) {
-  var p = b, {
+function da(g, u) {
+  var m = g, {
     variant: e = "paragraph",
     bold: a,
     italic: r,
@@ -1952,7 +1955,7 @@ function ca(b, u) {
     as: i,
     colorRole: o = "neutral",
     colorShade: c = "dark"
-  } = p, d = h(p, [
+  } = m, d = h(m, [
     "variant",
     "bold",
     "italic",
@@ -1977,25 +1980,25 @@ function ca(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(oa[o][c]), /* @__PURE__ */ l(f, m({ 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 = L(ca), da = {
+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"
-}, ua = de.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",
@@ -2005,11 +2008,11 @@ const H = L(ca), da = {
     ]);
     return /* @__PURE__ */ l(
       "div",
-      y(m({
+      y(p({
         ref: d,
         className: n(
           "w-full",
-          da[a],
+          ua[a],
           s(r, "px"),
           s(t, "py"),
           i && "mx-auto",
@@ -2021,17 +2024,17 @@ const H = L(ca), da = {
     );
   }
 );
-ua.displayName = "Container";
-const fa = de.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",
@@ -2039,7 +2042,7 @@ const fa = de.forwardRef(
       "direction",
       "children"
     ]);
-    const p = i === "column" ? s(a, "gap-y") : s(a, "gap-x"), x = {
+    const m = i === "column" ? s(a, "gap-y") : s(a, "gap-x"), x = {
       start: "items-start",
       center: "items-center",
       end: "items-end",
@@ -2054,12 +2057,12 @@ const fa = de.forwardRef(
     };
     return /* @__PURE__ */ l(
       "div",
-      y(m({
+      y(p({
         ref: d,
         className: n(
           "flex",
           i === "column" ? "flex-col" : "flex-row",
-          p,
+          m,
           x[r],
           f[t],
           e
@@ -2070,8 +2073,8 @@ const fa = de.forwardRef(
     );
   }
 );
-fa.displayName = "Stack";
-function pa(i) {
+pa.displayName = "Stack";
+function ma(i) {
   var o = i, {
     items: e,
     separator: a = "/",
@@ -2085,16 +2088,16 @@ function pa(i) {
     "flex",
     "items-center",
     s("sm", "space-x"),
-    S("bodySmall")
+    w("bodySmall")
   ], d = n(...c, r);
-  return /* @__PURE__ */ l("nav", y(m({ "aria-label": "Breadcrumb", className: d }, t), { children: /* @__PURE__ */ l(
+  return /* @__PURE__ */ l("nav", y(p({ "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 p = 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(
@@ -2105,12 +2108,12 @@ function pa(i) {
               children: a
             }
           ),
-          p ? /* @__PURE__ */ l(
+          m ? /* @__PURE__ */ l(
             "span",
             {
               className: n(
                 "text-fg-primary",
-                _("label")
+                B("label")
               ),
               "aria-current": "page",
               children: u.label
@@ -2126,8 +2129,8 @@ function pa(i) {
                 s("xs", "pt"),
                 "border-b-2",
                 "border-transparent",
-                S("bodySmall"),
-                _("label"),
+                w("bodySmall"),
+                B("label"),
                 "transition-colors",
                 "text-fg-secondary",
                 "hover:border-line-emphasis",
@@ -2136,16 +2139,72 @@ function pa(i) {
               children: u.label
             }
           ) : /* @__PURE__ */ l("span", { className: "text-fg-secondary", children: u.label })
-        ] }, b);
+        ] }, g);
       })
     }
   ) }));
 }
-function ma(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",
-    y(m({
+    y(p({
       className: n(
         "grid items-start",
         s("1.5", "gap"),
@@ -2159,7 +2218,7 @@ function ma(t) {
     })
   );
 }
-function ga(c) {
+function xa(c) {
   var d = c, {
     children: e,
     icon: a,
@@ -2175,7 +2234,7 @@ function ga(c) {
   ]);
   return /* @__PURE__ */ v(
     t,
-    y(m({
+    y(p({
       className: n(
         "text-base font-semibold text-fg-primary",
         "flex items-center",
@@ -2191,7 +2250,7 @@ function ga(c) {
     })
   );
 }
-function ba(t) {
+function ha(t) {
   var i = t, {
     children: e,
     className: a
@@ -2199,9 +2258,9 @@ function ba(t) {
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ l("p", y(m({ className: n("text-sm text-fg-secondary", a) }, r), { children: e }));
+  return /* @__PURE__ */ l("p", y(p({ className: n("text-sm text-fg-secondary", a) }, r), { children: e }));
 }
-function xa(t) {
+function ya(t) {
   var i = t, {
     children: e,
     className: a
@@ -2211,7 +2270,7 @@ function xa(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    y(m({
+    y(p({
       "data-card-actions": "",
       className: n(
         "flex items-center self-start",
@@ -2223,12 +2282,12 @@ function xa(t) {
     })
   );
 }
-function ha(t) {
+function va(t) {
   var i = t, { children: e, className: a } = i, r = h(i, ["children", "className"]);
-  return /* @__PURE__ */ l("div", y(m({ className: n(a) }, r), { children: e }));
+  return /* @__PURE__ */ l("div", y(p({ className: n(a) }, r), { children: e }));
 }
-function ya(b) {
-  var p = b, {
+function wa(g) {
+  var m = g, {
     variant: e = "default",
     padding: a = "medium",
     className: r = "",
@@ -2237,7 +2296,7 @@ function ya(b) {
     "aria-labelledby": o,
     asSection: c = !1,
     children: d
-  } = p, u = h(p, [
+  } = m, u = h(m, [
     "variant",
     "padding",
     "className",
@@ -2281,28 +2340,28 @@ function ya(b) {
         padding: "medium"
       }
     }
-  ), 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: w,
+  ), 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: b,
+    tabIndex: N,
     onClick: t,
-    onKeyDown: f ? (F) => {
-      f && (F.key === "Enter" || F.key === " ") && (F.preventDefault(), t == null || t());
+    onKeyDown: f ? (L) => {
+      f && (L.key === "Enter" || L.key === " ") && (L.preventDefault(), t == null || t());
     } : void 0,
     "aria-label": i,
     "aria-labelledby": o
   }, u);
-  return c ? /* @__PURE__ */ l("section", y(m({}, k), { children: d })) : /* @__PURE__ */ l("div", y(m({}, k), { children: d }));
+  return c ? /* @__PURE__ */ l("section", y(p({}, C), { children: d })) : /* @__PURE__ */ l("div", y(p({}, C), { children: d }));
 }
-const me = M(ya);
+const me = W(wa);
 me.displayName = "Card";
-const W = me;
-W.Header = ma;
-W.Title = ga;
-W.Subtitle = ba;
-W.Actions = xa;
-W.Body = ha;
-function Pa(t) {
+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 = ""
@@ -2312,14 +2371,14 @@ function Pa(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    y(m({
+    y(p({
       className: `flex flex-col ${s("1.5", "space-y")} ${s("lg", "p")} ${s("base", "pb")} ${a}`
     }, r), {
       children: e
     })
   );
 }
-function Ia(t) {
+function Ua(t) {
   var i = t, {
     children: e,
     className: a = ""
@@ -2329,14 +2388,14 @@ function Ia(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    y(m({
+    y(p({
       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 Wa(t) {
+function Ka(t) {
   var i = t, {
     children: e,
     className: a = ""
@@ -2346,7 +2405,7 @@ function Wa(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    y(m({
+    y(p({
       className: `
         ${s("lg", "p")}
         border-b
@@ -2358,7 +2417,7 @@ function Wa(t) {
     })
   );
 }
-function Ua(t) {
+function qa(t) {
   var i = t, {
     children: e,
     className: a = ""
@@ -2368,7 +2427,7 @@ function Ua(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    y(m({
+    y(p({
       className: `
         ${s("lg", "p")}
         border-t
@@ -2383,7 +2442,7 @@ function Ua(t) {
     })
   );
 }
-function Ka(o) {
+function Xa(o) {
   var c = o, {
     label: e,
     children: a,
@@ -2398,7 +2457,7 @@ function Ka(o) {
   const u = !(i["aria-label"] != null || i["aria-labelledby"] != null) && typeof e == "string" && e !== "" ? e : void 0;
   return /* @__PURE__ */ v(
     "div",
-    y(m({
+    y(p({
       role: "group",
       "aria-label": u,
       className: n(
@@ -2420,7 +2479,7 @@ function Ka(o) {
     })
   );
 }
-function qa({ children: e, className: a }) {
+function Ga({ children: e, className: a }) {
   return /* @__PURE__ */ l(
     "div",
     {
@@ -2433,7 +2492,7 @@ function qa({ children: e, className: a }) {
     }
   );
 }
-function Xa({
+function Ya({
   children: e,
   className: a
 }) {
@@ -2452,7 +2511,7 @@ function Xa({
     }
   );
 }
-const va = z(
+const Na = z(
   n(
     "w-full flex flex-col",
     s("2xl", "py"),
@@ -2479,15 +2538,15 @@ const va = z(
       align: "start"
     }
   }
-), wa = {
+), Sa = {
   start: "items-start",
   center: "items-center"
-}, Na = {
+}, $a = {
   start: "justify-start",
   center: "justify-center"
-}, Sa = L(
-  function(w, g) {
-    var N = w, {
+}, ka = F(
+  function(N, b) {
+    var S = N, {
       kicker: a,
       title: r,
       description: t,
@@ -2496,10 +2555,10 @@ const va = z(
       meta: c,
       variant: d = "plain",
       align: u = "start",
-      className: b,
-      "aria-label": p,
+      className: g,
+      "aria-label": m,
       "aria-labelledby": x
-    } = N, f = h(N, [
+    } = S, f = h(S, [
       "kicker",
       "title",
       "description",
@@ -2512,15 +2571,15 @@ const va = z(
       "aria-label",
       "aria-labelledby"
     ]);
-    const T = p != null || x != null, k = p != null ? p : 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(m({
-        ref: g,
-        className: n(va({ variant: d, align: u }), b),
-        "aria-label": k,
+      y(p({
+        ref: b,
+        className: n(Na({ variant: d, align: u }), g),
+        "aria-label": C,
         "aria-labelledby": x
       }, f), {
         children: [
@@ -2530,11 +2589,11 @@ const va = z(
               className: n(
                 "flex flex-col",
                 s("md", "gap-y"),
-                wa[u]
+                Sa[u]
               ),
               children: [
                 a ? /* @__PURE__ */ l(
-                  H,
+                  _,
                   {
                     as: "span",
                     variant: "caption",
@@ -2545,7 +2604,7 @@ const va = z(
                   }
                 ) : null,
                 /* @__PURE__ */ l(
-                  H,
+                  _,
                   {
                     as: "h1",
                     variant: "heading",
@@ -2554,7 +2613,7 @@ const va = z(
                   }
                 ),
                 t ? /* @__PURE__ */ l(
-                  H,
+                  _,
                   {
                     as: "p",
                     variant: "body",
@@ -2573,14 +2632,14 @@ const va = z(
               className: n(
                 "flex flex-wrap",
                 s("sm", "gap"),
-                Na[u]
+                $a[u]
               ),
               children: i
             }
           ) : null,
           o ? /* @__PURE__ */ l("div", { className: "w-full", children: o }) : null,
           c ? /* @__PURE__ */ l(
-            H,
+            _,
             {
               as: "p",
               variant: "caption",
@@ -2595,8 +2654,8 @@ const va = z(
     );
   }
 );
-Sa.displayName = "HeroSection";
-function Ga(r) {
+ka.displayName = "HeroSection";
+function Za(r) {
   var t = r, {
     className: e = ""
   } = t, a = h(t, [
@@ -2604,7 +2663,7 @@ function Ga(r) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    m({
+    p({
       role: "separator",
       className: `
         h-px
@@ -2615,7 +2674,7 @@ function Ga(r) {
     }, a)
   );
 }
-function Ya(t) {
+function Ja(t) {
   var i = t, {
     orientation: e = "horizontal",
     className: a = ""
@@ -2625,14 +2684,14 @@ function Ya(t) {
   ]);
   return e === "vertical" ? /* @__PURE__ */ l(
     "div",
-    m({
+    p({
       className: n("w-px", "h-6", "bg-line-default", "mx-auto", a),
       role: "separator",
       "aria-orientation": "vertical"
     }, r)
   ) : /* @__PURE__ */ l(
     "div",
-    m({
+    p({
       className: n(
         "w-full",
         "h-px",
@@ -2653,7 +2712,7 @@ function Ya(t) {
     }, r)
   );
 }
-const $a = z(
+const Ca = z(
   // Base classes
   n("w-full", "flex", "flex-col", s("sm", "gap")),
   {
@@ -2668,7 +2727,7 @@ const $a = z(
     }
   }
 );
-function Za(d) {
+function Qa(d) {
   var u = d, {
     title: e,
     description: a,
@@ -2684,8 +2743,8 @@ function Za(d) {
     "variant",
     "className"
   ]);
-  return /* @__PURE__ */ v("div", y(m({ className: n($a({ variant: i }), o) }, c), { children: [
-    r && r.length > 0 && /* @__PURE__ */ l(pa, { 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",
       {
@@ -2693,7 +2752,7 @@ function Za(d) {
         children: [
           /* @__PURE__ */ v("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ l(
-              H,
+              _,
               {
                 variant: "heading",
                 as: "h1",
@@ -2701,7 +2760,7 @@ function Za(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",
@@ -2715,17 +2774,17 @@ function Za(d) {
     )
   ] }));
 }
-const ka = {
+const Ea = {
   start: "items-start text-left",
   center: "items-center text-center"
-}, Ca = {
+}, Ta = {
   neutral: "text-fg-tertiary",
   success: "text-fg-success",
   warning: "text-fg-warning",
   error: "text-fg-error"
 };
-function Ja(u) {
-  var b = u, {
+function et(u) {
+  var g = u, {
     value: e,
     label: a,
     hint: r,
@@ -2733,7 +2792,7 @@ function Ja(u) {
     align: i = "start",
     tone: o = "neutral",
     className: c
-  } = b, d = h(b, [
+  } = g, d = h(g, [
     "value",
     "label",
     "hint",
@@ -2742,21 +2801,21 @@ function Ja(u) {
     "tone",
     "className"
   ]);
-  const p = e == null;
+  const m = e == null;
   return /* @__PURE__ */ v(
     "div",
-    y(m({
+    y(p({
       className: n(
         "bg-surface-base flex-1 flex flex-col",
         s("base", "p"),
         s("xs", "gap-y"),
-        ka[i],
+        Ea[i],
         c
       )
     }, d), {
       children: [
         t ? /* @__PURE__ */ l("span", { className: "text-icon-default inline-flex", children: t }) : null,
-        p ? /* @__PURE__ */ l(
+        m ? /* @__PURE__ */ l(
           "span",
           {
             "aria-label": "No data",
@@ -2765,17 +2824,17 @@ function Ja(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", Ca[o]), children: r }) : null
+        r ? /* @__PURE__ */ l("span", { className: n("text-xs", Ta[o]), children: r }) : null
       ]
     })
   );
 }
-const Ea = {
+const Va = {
   2: "md:grid-cols-2",
   3: "md:grid-cols-3",
   4: "md:grid-cols-4"
 };
-function Qa(c) {
+function at(c) {
   var d = c, {
     layout: e = "grid",
     cols: a = 4,
@@ -2792,7 +2851,7 @@ function Qa(c) {
   const u = e === "grid";
   return /* @__PURE__ */ v(
     "div",
-    y(m({
+    y(p({
       className: n(
         "relative",
         r && s("base", "pt"),
@@ -2807,7 +2866,7 @@ function Qa(c) {
             className: n(
               "bg-line-default border border-line-default overflow-hidden gap-px",
               $("lg"),
-              u ? `grid grid-cols-2 ${Ea[a]}` : "flex"
+              u ? `grid grid-cols-2 ${Va[a]}` : "flex"
             ),
             children: i
           }
@@ -2816,19 +2875,19 @@ function Qa(c) {
     })
   );
 }
-function et(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(
     "td",
-    y(m({
+    y(p({
       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 Ta = z(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")),
@@ -2838,7 +2897,7 @@ const Ta = z(n("flex items-center", "border-b"), {
   defaultVariants: {
     variant: "default"
   }
-}), Va = z(
+}), za = z(
   n(
     "relative -mb-px inline-flex items-center",
     s("xs", "gap-x"),
@@ -2856,12 +2915,12 @@ const Ta = z(n("flex items-center", "border-b"), {
         default: n(
           s("sm", "px"),
           s("sm", "py"),
-          S("body")
+          w("body")
         ),
         sub: n(
           s("sm", "px"),
           s("xs", "py"),
-          S("bodySmall")
+          w("bodySmall")
         )
       },
       active: {
@@ -2886,21 +2945,21 @@ const Ta = z(n("flex items-center", "border-b"), {
       active: !1
     }
   }
-), Aa = n(
+), Fa = n(
   "inline-flex items-center justify-center",
   $("full"),
   s("xs", "px"),
   "bg-surface-muted text-fg-secondary text-xs"
-), za = L(
-  function(b, u) {
-    var p = b, {
+), La = F(
+  function(g, u) {
+    var m = g, {
       items: a,
       variant: r = "default",
       linkComponent: t,
       className: i,
       "aria-label": o,
       "aria-labelledby": c
-    } = p, d = h(p, [
+    } = m, d = h(m, [
       "items",
       "variant",
       "linkComponent",
@@ -2914,33 +2973,33 @@ const Ta = z(n("flex items-center", "border-b"), {
     const x = t != null ? t : "a";
     return /* @__PURE__ */ l(
       "nav",
-      y(m({
+      y(p({
         ref: u,
-        className: n(Ta({ 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: Va({ 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: Aa, children: f.count }) : null
+              f.count !== void 0 ? /* @__PURE__ */ l("span", { className: Fa, children: f.count }) : null
             ]
           },
-          f.href || g
+          f.href || b
         ))
       })
     );
   }
 );
-za.displayName = "TabsAsLinks";
-function at({
+La.displayName = "TabsAsLinks";
+function rt({
   items: e,
   orientation: a = "vertical",
   className: r = ""
@@ -2950,7 +3009,7 @@ function at({
     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(m({}, o === "default" ? { "data-marker": "pending" } : {}), {
+        y(p({}, o === "default" ? { "data-marker": "pending" } : {}), {
           className: `
                   flex
                   items-center
@@ -3010,7 +3069,7 @@ function at({
           /* @__PURE__ */ v("div", { className: "flex flex-col items-center", children: [
             /* @__PURE__ */ l(
               "div",
-              y(m({}, o === "default" ? { "data-marker": "pending" } : {}), {
+              y(p({}, o === "default" ? { "data-marker": "pending" } : {}), {
                 className: `
                 flex
                 items-center
@@ -3073,43 +3132,44 @@ function at({
 }
 export {
   Ee as AvatarBase,
-  Ae as Badge,
-  pa as Breadcrumb,
-  Ke as Button,
-  W as Card,
-  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,
+  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,
-  fa as Stack,
-  Ja as Stat,
-  Qa as StatGroup,
-  et as TableCell,
-  za as TabsAsLinks,
-  H as Text,
-  at as Timeline
+  pa as Stack,
+  et as Stat,
+  at as StatGroup,
+  tt as TableCell,
+  La as TabsAsLinks,
+  _ as Text,
+  rt as Timeline
 };
 //# sourceMappingURL=index.js.map