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

package/dist/server/index.js

@@ -2,7 +2,7 @@ var ge = Object.defineProperty, be = Object.defineProperties;
 var xe = 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, f = (e, a) => {
+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) => {
   for (var r in a || (a = {}))
     ae.call(a, r) && G(e, r, a[r]);
   if (K)
@@ -21,7 +21,7 @@ var h = (e, a) => {
 };
 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 A from "react";
+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";
@@ -326,13 +326,13 @@ function j(e) {
 function n(...e) {
   return ye(he(e));
 }
-const L = (e, a) => {
+const A = (e, a) => {
   const r = ve(e, a);
   return ((t) => {
     const i = r(t);
     return n(i);
   });
-}, Ce = L(
+}, Ce = A(
   // Base classes
   n(
     "inline-flex",
@@ -471,14 +471,14 @@ const L = (e, a) => {
     }
   }
 ), Ee = M(
-  F(function(b, p) {
+  F(function(b, u) {
     var m = b, {
       variant: a = "neutral",
       size: r = "md",
       style: t = "solid",
       className: i = "",
-      children: c,
-      "aria-label": o
+      children: o,
+      "aria-label": c
     } = m, d = h(m, [
       "variant",
       "size",
@@ -488,24 +488,24 @@ const L = (e, a) => {
       "aria-label"
     ]);
     const x = n(Ce({ variant: a, size: r, style: t }), i);
-    let u;
-    if (o)
-      u = o;
-    else if (typeof c == "string")
-      u = c;
-    else if (typeof c == "object" && c !== null && "props" in c) {
-      const g = c.props;
-      g != null && g.children && typeof g.children == "string" && (u = g.children);
+    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);
     }
     return /* @__PURE__ */ l(
       "span",
-      y(f({
-        ref: p,
+      y(p({
+        ref: u,
         role: "status",
-        "aria-label": u,
+        "aria-label": f,
         className: x
       }, d), {
-        children: c
+        children: o
       })
     );
   })
@@ -520,79 +520,79 @@ function Te(...e) {
   return (a) => {
     let r = !1;
     const t = e.map((i) => {
-      const c = se(i, a);
-      return !r && typeof c == "function" && (r = !0), c;
+      const o = se(i, a);
+      return !r && typeof o == "function" && (r = !0), o;
     });
     if (r)
       return () => {
         for (let i = 0; i < t.length; i++) {
-          const c = t[i];
-          typeof c == "function" ? c() : se(e[i], null);
+          const o = t[i];
+          typeof o == "function" ? o() : se(e[i], null);
         }
       };
   };
 }
 function Ve(...e) {
-  return A.useCallback(Te(...e), e);
+  return z.useCallback(Te(...e), e);
 }
 // @__NO_SIDE_EFFECTS__
-function Ae(e) {
-  const a = A.forwardRef((r, t) => {
+function ze(e) {
+  const a = z.forwardRef((r, t) => {
     var g;
-    let u = r, { children: i } = u, c = h(u, ["children"]), o = null, d = !1;
-    const p = [];
-    ie(i) && typeof q == "function" && (i = q(i._payload)), A.Children.forEach(i, (N) => {
+    let f = r, { children: i } = f, o = h(f, ["children"]), c = null, d = !1;
+    const u = [];
+    ie(i) && typeof q == "function" && (i = q(i._payload)), z.Children.forEach(i, (N) => {
       var S;
       if (je(N)) {
         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)), o = De(T, k), p.push((S = o == null ? void 0 : o.props) == null ? void 0 : S.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);
       } else
-        p.push(N);
-    }), o ? o = A.cloneElement(o, void 0, p) : (
+        u.push(N);
+    }), c ? c = z.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 && A.Children.count(i) === 1 && A.isValidElement(i) && (o = i)
+      !d && z.Children.count(i) === 1 && z.isValidElement(i) && (c = i)
     );
-    const b = o ? _e(o) : void 0, m = Ve(t, b);
-    if (!o) {
+    const b = c ? _e(c) : void 0, m = Ve(t, b);
+    if (!c) {
       if (i || i === 0)
         throw new Error(
-          d ? Me(e) : Oe(e)
+          d ? Me(e) : Be(e)
         );
       return i;
     }
-    const x = Fe(c, (g = o.props) != null ? g : {});
-    return o.type !== A.Fragment && (x.ref = t ? m : b), A.cloneElement(o, x);
+    const x = Fe(o, (g = c.props) != null ? g : {});
+    return c.type !== z.Fragment && (x.ref = t ? m : b), z.cloneElement(c, x);
   });
   return a.displayName = `${e}.Slot`, a;
 }
-var de = /* @__PURE__ */ Ae("Slot"), ue = /* @__PURE__ */ Symbol.for("radix.slottable");
+var de = /* @__PURE__ */ ze("Slot"), ue = /* @__PURE__ */ Symbol.for("radix.slottable");
 // @__NO_SIDE_EFFECTS__
-function Le(e) {
+function Ae(e) {
   const a = (r) => "child" in r ? r.children(r.child) : r.children;
   return a.displayName = `${e}.Slottable`, a.__radixId = ue, a;
 }
-var ze = /* @__PURE__ */ Le("Slottable"), De = (e, a) => {
+var Le = /* @__PURE__ */ Ae("Slottable"), De = (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;
+    return z.isValidElement(r) ? z.cloneElement(r, void 0, e.props.children(r.props.children)) : null;
   }
-  return A.isValidElement(a) ? a : null;
+  return z.isValidElement(a) ? a : null;
 };
 function Fe(e, a) {
-  const r = f({}, a);
+  const r = p({}, a);
   for (const t in a) {
-    const i = e[t], c = a[t];
-    /^on[A-Z]/.test(t) ? i && c ? r[t] = (...d) => {
-      const p = c(...d);
-      return i(...d), p;
-    } : i && (r[t] = i) : t === "style" ? r[t] = f(f({}, i), c) : t === "className" && (r[t] = [i, c].filter(Boolean).join(" "));
+    const i = e[t], o = a[t];
+    /^on[A-Z]/.test(t) ? i && o ? r[t] = (...d) => {
+      const u = o(...d);
+      return i(...d), u;
+    } : i && (r[t] = i) : t === "style" ? r[t] = p(p({}, i), o) : t === "className" && (r[t] = [i, o].filter(Boolean).join(" "));
   }
-  return f(f({}, e), r);
+  return p(p({}, e), r);
 }
 function _e(e) {
   var t, i;
@@ -600,17 +600,17 @@ function _e(e) {
   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 A.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === ue;
+  return z.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === ue;
 }
 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 && Be(e._payload);
+  return e != null && typeof e == "object" && "$$typeof" in e && e.$$typeof === Re && "_payload" in e && Oe(e._payload);
 }
-function Be(e) {
+function Oe(e) {
   return typeof e == "object" && e !== null && "then" in e;
 }
-var Oe = (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 = A[" use ".trim().toString()];
-const He = L("motion-safe:animate-spin", {
+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", {
   variants: {
     size: {
       sm: "h-4 w-4",
@@ -627,13 +627,13 @@ const He = L("motion-safe:animate-spin", {
     size: "md",
     variant: "primary"
   }
-}), fe = M(function(o) {
-  var d = o, {
+}), fe = M(function(c) {
+  var d = c, {
     size: a = "md",
     variant: r = "primary",
     label: t,
     className: i = ""
-  } = d, c = h(d, [
+  } = d, o = h(d, [
     "size",
     "variant",
     "label",
@@ -641,12 +641,12 @@ const He = L("motion-safe:animate-spin", {
   ]);
   return /* @__PURE__ */ v(
     "div",
-    y(f({
+    y(p({
       className: n("inline-flex", "items-center", i),
       role: "status",
       "aria-label": t || "Loading",
       "aria-live": "polite"
-    }, c), {
+    }, o), {
       children: [
         /* @__PURE__ */ l(
           we,
@@ -672,7 +672,7 @@ const He = L("motion-safe:animate-spin", {
   );
 });
 fe.displayName = "Spinner";
-const Pe = L(
+const Pe = A(
   // Base classes
   n(
     "inline-flex",
@@ -845,22 +845,22 @@ function X({
 }
 const Ie = M(
   F(function(k, T) {
-    var z = k, {
+    var L = k, {
       variant: a = "primary",
       size: r = "md",
       isLoading: t = !1,
       loadingText: i,
-      loadingIcon: c,
-      leftIcon: o,
+      loadingIcon: o,
+      leftIcon: c,
       rightIcon: d,
-      fullWidth: p = !1,
+      fullWidth: u = !1,
       asChild: b = !1,
       as: m,
       className: x = "",
-      disabled: u = !1,
+      disabled: f = !1,
       children: g,
       "aria-label": N
-    } = z, S = h(z, [
+    } = L, S = h(L, [
       "variant",
       "size",
       "isLoading",
@@ -879,34 +879,34 @@ const Ie = M(
     typeof process != "undefined" && process.env.NODE_ENV !== "production" && b && 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", B = n(
+    const R = b ? de : m != null ? m : "button", O = n(
       Pe({ variant: a, size: r }),
-      p && "w-full",
+      u && "w-full",
       x
-    ), I = (a === "iconOnly" || !g && (o || d)) && !N && !g ? "Button" : N, me = c || /* @__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 = f(f({
-      className: B,
-      disabled: u || t,
+    ), I = (a === "iconOnly" || !g && (c || d)) && !N && !g ? "Button" : N, me = o || /* @__PURE__ */ l(fe, { size: r === "sm" ? "sm" : r === "lg" ? "lg" : "md", variant: a === "error" ? "primary" : a === "primary" || a === "secondary" ? "neutral" : "primary" }), Q = !b && (m === void 0 || m === "button") && !S.type ? "button" : void 0, ee = p(p({
+      className: O,
+      disabled: f || t,
       "aria-busy": t,
       "aria-label": I,
-      "aria-disabled": u || t
+      "aria-disabled": f || t
     }, Q ? { type: Q } : {}), S);
-    return b ? /* @__PURE__ */ v(R, y(f({ ref: T }, ee), { children: [
-      o && /* @__PURE__ */ l(X, { position: "left", children: o }),
-      /* @__PURE__ */ l(ze, { children: g }),
+    return b ? /* @__PURE__ */ v(R, y(p({ ref: T }, ee), { children: [
+      c && /* @__PURE__ */ l(X, { position: "left", children: c }),
+      /* @__PURE__ */ l(Le, { children: g }),
       d && /* @__PURE__ */ l(X, { position: "right", children: d })
-    ] })) : /* @__PURE__ */ l(R, y(f({ ref: T }, ee), { children: t ? /* @__PURE__ */ v(Z, { children: [
+    ] })) : /* @__PURE__ */ l(R, y(p({ ref: T }, ee), { children: t ? /* @__PURE__ */ v(Z, { children: [
       me,
       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: [
-      o && /* @__PURE__ */ l(X, { position: "left", children: o }),
+      c && /* @__PURE__ */ l(X, { position: "left", children: c }),
       g,
       d && /* @__PURE__ */ l(X, { position: "right", children: d })
     ] }) }));
   })
 );
 Ie.displayName = "Button";
-const le = L(
+const le = A(
   // Base classes
   n(
     "inline-flex",
@@ -999,10 +999,10 @@ const le = L(
   const {
     children: t,
     variant: i = "default",
-    size: c = "md",
-    selected: o = !1,
+    size: o = "md",
+    selected: c = !1,
     disabled: d = !1,
-    className: p = "",
+    className: u = "",
     "aria-label": b,
     tabIndex: m,
     asChild: x = !1
@@ -1021,8 +1021,8 @@ const le = L(
       {
         ref: r,
         className: n(
-          le({ variant: i, size: c, selected: o, disabled: d }),
-          p
+          le({ variant: i, size: o, selected: c, disabled: d }),
+          u
         ),
         "aria-label": b,
         "aria-disabled": d || void 0,
@@ -1030,9 +1030,9 @@ const le = L(
         children: t
       }
     );
-  const { onRemove: N, onClick: S, count: T } = a, k = S !== void 0, z = k && !d, R = (V) => {
+  const { onRemove: N, onClick: S, count: T } = a, k = S !== void 0, L = k && !d, R = (V) => {
     d || (V.key === "Enter" || V.key === " ") && (V.preventDefault(), S == null || S());
-  }, B = T !== void 0, P = o || i === "filled", I = B ? /* @__PURE__ */ l(
+  }, O = T !== void 0, P = c || i === "filled", I = O ? /* @__PURE__ */ l(
     "span",
     {
       "aria-hidden": k || void 0,
@@ -1051,15 +1051,15 @@ const le = L(
       ),
       children: T
     }
-  ) : null, U = B && g !== void 0 ? `${g}, ${T}` : g;
+  ) : null, U = O && g !== void 0 ? `${g}, ${T}` : g;
   return /* @__PURE__ */ v(
     "div",
     {
       ref: r,
       className: n(
-        le({ variant: i, size: c, selected: o, disabled: d }),
+        le({ variant: i, size: o, selected: c, disabled: d }),
         N && s("xs", "pr"),
-        p
+        u
       ),
       "aria-disabled": d,
       children: [
@@ -1070,9 +1070,9 @@ const le = L(
             onClick: d ? void 0 : S,
             onKeyDown: R,
             disabled: d,
-            "aria-pressed": o ? !0 : void 0,
+            "aria-pressed": c ? !0 : void 0,
             "aria-label": b || U,
-            tabIndex: m !== void 0 ? m : z ? 0 : void 0,
+            tabIndex: m !== void 0 ? m : L ? 0 : void 0,
             className: n(
               "flex-1",
               "bg-transparent",
@@ -1118,7 +1118,7 @@ const le = L(
   );
 });
 We.displayName = "Chip";
-const Ue = L(
+const Ue = A(
   n("inline-flex", "items-center", "border", $("md")),
   {
     variants: {
@@ -1164,14 +1164,14 @@ const Ue = L(
     defaultVariants: { tone: "neutral", size: "md" }
   }
 ), Ke = M(
-  F(function(b, p) {
+  F(function(b, u) {
     var m = b, {
       label: a,
       source: r,
       tone: t = "neutral",
       size: i = "md",
-      icon: c,
-      className: o = ""
+      icon: o,
+      className: c = ""
     } = m, d = h(m, [
       "label",
       "source",
@@ -1180,27 +1180,27 @@ const Ue = L(
       "icon",
       "className"
     ]);
-    const x = r != null && r !== "", u = i === "sm" ? "caption" : "bodySmall";
+    const x = r != null && r !== "", f = i === "sm" ? "caption" : "bodySmall";
     return /* @__PURE__ */ v(
       "span",
-      y(f({
-        ref: p,
-        className: n(Ue({ tone: t, size: i }), o)
+      y(p({
+        ref: u,
+        className: n(Ue({ tone: t, size: i }), c)
       }, d), {
         children: [
-          c ? /* @__PURE__ */ l(
+          o ? /* @__PURE__ */ l(
             "span",
             {
               className: "inline-flex shrink-0 items-center",
               "aria-hidden": "true",
-              children: c
+              children: o
             }
           ) : null,
           /* @__PURE__ */ l(
             "span",
             {
               className: n(
-                w(u),
+                w(f),
                 j("label")
               ),
               children: a
@@ -1226,24 +1226,24 @@ const Ue = L(
 );
 Ke.displayName = "DataBadge";
 function ja(i) {
-  var c = i, {
+  var o = i, {
     message: e,
     id: a,
     className: r = ""
-  } = c, t = h(c, [
+  } = o, t = h(o, [
     "message",
     "id",
     "className"
   ]);
-  const o = [
+  const c = [
     s("xs", "mt"),
     w("bodySmall"),
     "text-fg-error",
     "flex",
     "items-center",
     s("xs", "gap")
-  ], d = n(...o, r);
-  return /* @__PURE__ */ v("div", y(f({ role: "alert", id: a, className: d, "aria-live": "polite" }, t), { children: [
+  ], 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("span", { children: e })
   ] }));
@@ -1256,27 +1256,27 @@ function Ra(t) {
     "variant",
     "className"
   ]);
-  const c = {
+  const o = {
     warning: n("bg-warning-bg", "text-warning-dark", "border-warning"),
     error: n("bg-error-bg", "text-error-dark", "border-error"),
     info: n("bg-info-bg", "text-info-dark", "border-info")
   };
   return /* @__PURE__ */ l(
     "div",
-    f({
+    p({
       role: "alert",
       className: n(
         "border",
         s("base", "px"),
         s("sm", "py"),
         $("lg"),
-        c[e],
+        o[e],
         a
       )
     }, r)
   );
 }
-const qe = L(
+const qe = A(
   n(
     "w-full",
     $("md"),
@@ -1350,7 +1350,7 @@ function Xe({
   errorId: t,
   helperId: i
 }) {
-  const c = n(
+  const o = n(
     s("xs", "mt"),
     D("caption"),
     e && "text-fg-error",
@@ -1361,7 +1361,7 @@ function Xe({
     "div",
     {
       id: t || i,
-      className: c,
+      className: o,
       role: e || a ? "alert" : void 0,
       children: r || (e ? "Error" : a ? "Success" : "")
     }
@@ -1374,14 +1374,14 @@ const Ge = F(
       label: r,
       error: t = !1,
       success: i = !1,
-      helperText: c,
-      size: o = "md",
+      helperText: o,
+      size: c = "md",
       variant: d = "outlined",
-      leftIcon: p,
+      leftIcon: u,
       rightIcon: b,
       rightSlot: m,
       className: x = "",
-      disabled: u = !1,
+      disabled: f = !1,
       type: g = "text"
     } = k, N = h(k, [
       "id",
@@ -1401,41 +1401,41 @@ 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 z = t ? "error" : i ? "success" : "default", R = t && a ? `${a}-error` : void 0, B = c && a ? `${a}-helper` : void 0, P = o === "sm" ? "h-4 w-4" : o === "lg" ? "h-5 w-5" : "h-4 w-4", I = o === "sm" ? "top-2" : o === "lg" ? "top-3.5" : "top-2.5", U = n(
-      qe({ variant: d, size: o, state: z }),
+    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 }),
       // Icon padding — `pl-9` / `pr-9` aren't on the spacing scale (no
       // semantic key for 36px) so they stay raw at the `sm` size; md/lg use
       // the getter. Mirrors the original Input contract.
-      p && (o === "sm" ? "pl-9" : s(o === "lg" ? "3xl" : "2xl", "pl")),
-      (b || m) && (o === "sm" ? "pr-9" : s(o === "lg" ? "3xl" : "2xl", "pr")),
+      u && (c === "sm" ? "pl-9" : s(c === "lg" ? "3xl" : "2xl", "pl")),
+      (b || m) && (c === "sm" ? "pr-9" : s(c === "lg" ? "3xl" : "2xl", "pr")),
       x
     ), V = n(
       "block",
       D("label"),
       s("xs", "mb"),
-      u && "opacity-50"
+      f && "opacity-50"
     );
     return /* @__PURE__ */ v("div", { className: "w-full", children: [
       r && /* @__PURE__ */ l("label", { htmlFor: a, className: V, children: r }),
       /* @__PURE__ */ v("div", { className: "relative", children: [
-        p && /* @__PURE__ */ l(
+        u && /* @__PURE__ */ l(
           "div",
           {
             className: `absolute left-3 ${I} text-fg-secondary opacity-60 pointer-events-none`,
-            children: /* @__PURE__ */ l("div", { className: P, children: p })
+            children: /* @__PURE__ */ l("div", { className: P, children: u })
           }
         ),
         /* @__PURE__ */ l(
           "input",
-          f({
+          p({
             id: a,
             ref: S,
             type: g,
             className: U,
-            disabled: u,
+            disabled: f,
             "aria-invalid": t,
             "aria-required": N.required,
-            "aria-describedby": R || B,
+            "aria-describedby": R || O,
             suppressHydrationWarning: !0
           }, N)
         ),
@@ -1453,14 +1453,14 @@ const Ge = F(
           }
         )
       ] }),
-      (t || i || c) && /* @__PURE__ */ l(
+      (t || i || o) && /* @__PURE__ */ l(
         Xe,
         {
           error: t,
           success: i,
-          helperText: c,
+          helperText: o,
           errorId: R,
-          helperId: B
+          helperId: O
         }
       )
     ] });
@@ -1486,18 +1486,18 @@ const Ye = n(
     "after:font-normal"
   )
 }, Je = M(
-  F(function(o, c) {
-    var d = o, { variant: a = "default", className: r = "", children: t } = d, i = h(d, ["variant", "className", "children"]);
-    const p = n(
+  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],
       r
     );
-    return /* @__PURE__ */ l("label", y(f({ ref: c, className: p }, i), { children: t }));
+    return /* @__PURE__ */ l("label", y(p({ ref: o, className: u }, i), { children: t }));
   })
 );
 Je.displayName = "Label";
-class O {
+class B {
   /**
    * Create a shadow token
    */
@@ -1542,18 +1542,18 @@ class O {
   }
 }
 const Qe = {
-  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")
+  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")
 };
 function Y(e) {
   return Qe[e].tailwind;
 }
-const ea = L("w-full", {
+const ea = A("w-full", {
   variants: {
     size: {
       sm: "h-1",
@@ -1573,7 +1573,7 @@ const ea = L("w-full", {
     size: "md",
     variant: "primary"
   }
-}), oe = L("transition-all", {
+}), oe = A("transition-all", {
   variants: {
     variant: {
       primary: "bg-surface-brand",
@@ -1588,16 +1588,16 @@ const ea = L("w-full", {
     variant: "primary"
   }
 }), aa = F(function(x, m) {
-  var u = x, {
+  var f = x, {
     value: a,
     max: r = 100,
     variant: t = "primary",
     size: i = "md",
-    showLabel: c = !1,
-    label: o,
+    showLabel: o = !1,
+    label: c,
     "aria-label": d,
-    className: p = ""
-  } = u, b = h(u, [
+    className: u = ""
+  } = f, b = h(f, [
     "value",
     "max",
     "variant",
@@ -1608,8 +1608,8 @@ const ea = L("w-full", {
     "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(f({ ref: m, className: n("w-full", p) }, b), { children: [
-    c && (o || !g) && /* @__PURE__ */ v(
+  return /* @__PURE__ */ v("div", y(p({ ref: m, className: n("w-full", u) }, b), { children: [
+    o && (c || !g) && /* @__PURE__ */ v(
       "div",
       {
         className: n(
@@ -1619,7 +1619,7 @@ const ea = L("w-full", {
           s("xs", "mb")
         ),
         children: [
-          o && /* @__PURE__ */ l(
+          c && /* @__PURE__ */ l(
             "span",
             {
               className: n(
@@ -1627,7 +1627,7 @@ const ea = L("w-full", {
                 j("label"),
                 "text-fg-primary"
               ),
-              children: o
+              children: c
             }
           ),
           !g && N !== void 0 && /* @__PURE__ */ v(
@@ -1708,12 +1708,12 @@ const ta = {
   solid: "border-solid",
   dashed: "border-dashed",
   dotted: "border-dotted"
-}, na = M(function(c) {
-  var o = c, {
+}, na = M(function(o) {
+  var c = o, {
     orientation: a = "horizontal",
     variant: r = "solid",
     className: t = ""
-  } = o, i = h(o, [
+  } = c, i = h(c, [
     "orientation",
     "variant",
     "className"
@@ -1727,14 +1727,14 @@ const ta = {
   );
   return a === "vertical" ? /* @__PURE__ */ l(
     "div",
-    f({
+    p({
       className: d,
       role: "separator",
       "aria-orientation": "vertical"
     }, i)
   ) : /* @__PURE__ */ l(
     "hr",
-    f({
+    p({
       className: d,
       role: "separator",
       "aria-orientation": "horizontal"
@@ -1742,15 +1742,15 @@ const ta = {
   );
 });
 na.displayName = "Separator";
-function Ba(d) {
-  var p = d, {
+function Oa(d) {
+  var u = d, {
     variant: e = "text",
     width: a,
     height: r,
     lines: t = 1,
     className: i = "",
-    "aria-label": c
-  } = p, o = h(p, [
+    "aria-label": o
+  } = u, c = h(u, [
     "variant",
     "width",
     "height",
@@ -1767,22 +1767,22 @@ function Ba(d) {
     card: "h-32",
     list: "h-12",
     circle: $("full")
-  }, x = n(...b, m[e], i), u = {};
-  a && (u.width = a), r && (u.height = r);
-  const g = c || `Loading ${e} content`;
+  }, x = n(...b, m[e], i), f = {};
+  a && (f.width = a), r && (f.height = r);
+  const g = o || `Loading ${e} content`;
   return e === "text" && t > 1 ? /* @__PURE__ */ l(
     "div",
-    y(f({
+    y(p({
       className: s("sm", "space-y"),
       role: "status",
       "aria-busy": "true",
       "aria-label": g
-    }, o), {
+    }, c), {
       children: Array.from({ length: t }).map((N, S) => /* @__PURE__ */ l(
         "div",
         {
           className: x,
-          style: S === t - 1 ? { width: "75%" } : u,
+          style: S === t - 1 ? { width: "75%" } : f,
           "aria-hidden": "true"
         },
         S
@@ -1790,13 +1790,13 @@ function Ba(d) {
     })
   ) : /* @__PURE__ */ l(
     "div",
-    f({
+    p({
       className: x,
-      style: u,
+      style: f,
       role: "status",
       "aria-busy": "true",
       "aria-label": g
-    }, o)
+    }, c)
   );
 }
 const sa = {
@@ -1851,15 +1851,15 @@ const sa = {
     contrast: "text-fg-inverse"
   }
 };
-function ia(b, p) {
+function ia(b, u) {
   var m = b, {
     variant: e = "paragraph",
     bold: a,
     italic: r,
     className: t,
     as: i,
-    colorRole: c = "neutral",
-    colorShade: o = "dark"
+    colorRole: o = "neutral",
+    colorShade: c = "dark"
   } = m, d = h(m, [
     "variant",
     "bold",
@@ -1870,22 +1870,22 @@ function ia(b, p) {
     "colorShade"
   ]);
   const x = [];
-  let u;
+  let f;
   if (i)
-    u = i;
+    f = i;
   else
     switch (e) {
       case "heading":
-        u = "h2";
+        f = "h2";
         break;
       case "list":
-        u = "li";
+        f = "li";
         break;
       default:
-        u = "p";
+        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[c][o]), /* @__PURE__ */ l(u, f({ ref: p, 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(sa[o][c]), /* @__PURE__ */ l(f, p({ ref: u, className: n(...x, t) }, d));
 }
 const H = F(ia), la = {
   sm: "max-w-screen-sm",
@@ -1895,15 +1895,15 @@ const H = F(ia), la = {
   "2xl": "max-w-screen-2xl",
   full: "max-w-full"
 }, oa = ce.forwardRef(
-  (p, d) => {
-    var b = p, {
+  (u, d) => {
+    var b = u, {
       className: e,
       maxWidth: a = "lg",
       paddingX: r = "base",
       paddingY: t = "base",
       center: i = !0,
-      children: c
-    } = b, o = h(b, [
+      children: o
+    } = b, c = h(b, [
       "className",
       "maxWidth",
       "paddingX",
@@ -1913,7 +1913,7 @@ const H = F(ia), la = {
     ]);
     return /* @__PURE__ */ l(
       "div",
-      y(f({
+      y(p({
         ref: d,
         className: n(
           "w-full",
@@ -1923,23 +1923,23 @@ const H = F(ia), la = {
           i && "mx-auto",
           e
         )
-      }, o), {
-        children: c
+      }, c), {
+        children: o
       })
     );
   }
 );
 oa.displayName = "Container";
 const ca = ce.forwardRef(
-  (p, d) => {
-    var b = p, {
+  (u, d) => {
+    var b = u, {
       className: e,
       spacing: a = "base",
       align: r = "stretch",
       justify: t = "start",
       direction: i = "column",
-      children: c
-    } = b, o = h(b, [
+      children: o
+    } = b, c = h(b, [
       "className",
       "spacing",
       "align",
@@ -1952,7 +1952,7 @@ const ca = ce.forwardRef(
       center: "items-center",
       end: "items-end",
       stretch: "items-stretch"
-    }, u = {
+    }, f = {
       start: "justify-start",
       center: "justify-center",
       end: "justify-end",
@@ -1962,44 +1962,44 @@ const ca = ce.forwardRef(
     };
     return /* @__PURE__ */ l(
       "div",
-      y(f({
+      y(p({
         ref: d,
         className: n(
           "flex",
           i === "column" ? "flex-col" : "flex-row",
           m,
           x[r],
-          u[t],
+          f[t],
           e
         )
-      }, o), {
-        children: c
+      }, c), {
+        children: o
       })
     );
   }
 );
 ca.displayName = "Stack";
 function da(i) {
-  var c = i, {
+  var o = i, {
     items: e,
     separator: a = "/",
     className: r = ""
-  } = c, t = h(c, [
+  } = o, t = h(o, [
     "items",
     "separator",
     "className"
   ]);
-  const o = [
+  const c = [
     "flex",
     "items-center",
     s("sm", "space-x"),
     w("bodySmall")
-  ], d = n(...o, r);
-  return /* @__PURE__ */ l("nav", y(f({ "aria-label": "Breadcrumb", className: d }, t), { children: /* @__PURE__ */ l(
+  ], d = n(...c, r);
+  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((p, b) => {
+      children: e.map((u, b) => {
         const m = b === e.length - 1;
         return /* @__PURE__ */ v("li", { className: "flex items-center", children: [
           b > 0 && /* @__PURE__ */ l(
@@ -2021,12 +2021,12 @@ function da(i) {
                 j("label")
               ),
               "aria-current": "page",
-              children: p.label
+              children: u.label
             }
-          ) : p.href ? /* @__PURE__ */ l(
+          ) : u.href ? /* @__PURE__ */ l(
             "a",
             {
-              href: p.href,
+              href: u.href,
               className: n(
                 "inline-flex",
                 "items-center",
@@ -2041,9 +2041,9 @@ function da(i) {
                 "hover:border-line-emphasis",
                 "hover:text-fg-primary"
               ),
-              children: p.label
+              children: u.label
             }
-          ) : /* @__PURE__ */ l("span", { className: "text-fg-secondary", children: p.label })
+          ) : /* @__PURE__ */ l("span", { className: "text-fg-secondary", children: u.label })
         ] }, b);
       })
     }
@@ -2053,7 +2053,7 @@ function ua(t) {
   var i = t, { children: e, className: a } = i, r = h(i, ["children", "className"]);
   return /* @__PURE__ */ l(
     "div",
-    y(f({
+    y(p({
       className: n(
         "grid items-start",
         s("1.5", "gap"),
@@ -2067,14 +2067,14 @@ function ua(t) {
     })
   );
 }
-function fa(o) {
-  var d = o, {
+function fa(c) {
+  var d = c, {
     children: e,
     icon: a,
     badge: r,
     as: t = "h2",
     className: i
-  } = d, c = h(d, [
+  } = d, o = h(d, [
     "children",
     "icon",
     "badge",
@@ -2083,14 +2083,14 @@ function fa(o) {
   ]);
   return /* @__PURE__ */ v(
     t,
-    y(f({
+    y(p({
       className: n(
         "text-base font-semibold text-fg-primary",
         "flex items-center",
         s("sm", "gap"),
         i
       )
-    }, c), {
+    }, o), {
       children: [
         a ? /* @__PURE__ */ l("span", { className: "shrink-0 inline-flex", children: a }) : null,
         /* @__PURE__ */ l("span", { children: e }),
@@ -2107,7 +2107,7 @@ function pa(t) {
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ l("p", y(f({ 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 ma(t) {
   var i = t, {
@@ -2119,7 +2119,7 @@ function ma(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    y(f({
+    y(p({
       "data-card-actions": "",
       className: n(
         "flex items-center self-start",
@@ -2133,7 +2133,7 @@ function ma(t) {
 }
 function ga(t) {
   var i = t, { children: e, className: a } = i, r = h(i, ["children", "className"]);
-  return /* @__PURE__ */ l("div", y(f({ className: n(a) }, r), { children: e }));
+  return /* @__PURE__ */ l("div", y(p({ className: n(a) }, r), { children: e }));
 }
 function ba(b) {
   var m = b, {
@@ -2142,10 +2142,10 @@ function ba(b) {
     className: r = "",
     onClick: t,
     "aria-label": i,
-    "aria-labelledby": c,
-    asSection: o = !1,
+    "aria-labelledby": o,
+    asSection: c = !1,
     children: d
-  } = m, p = h(m, [
+  } = m, u = h(m, [
     "variant",
     "padding",
     "className",
@@ -2155,10 +2155,10 @@ function ba(b) {
     "asSection",
     "children"
   ]);
-  typeof process != "undefined" && process.env.NODE_ENV !== "production" && o && !i && !c && console.warn(
+  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 = L(
+  const x = A(
     n(
       "bg-surface-base",
       $("lg"),
@@ -2189,18 +2189,18 @@ function ba(b) {
         padding: "medium"
       }
     }
-  ), u = t !== void 0, g = u ? "button" : void 0, N = u ? 0 : void 0, S = n(x({ variant: e, padding: a }), r), k = f({
+  ), f = t !== void 0, g = f ? "button" : void 0, N = f ? 0 : void 0, S = n(x({ variant: e, padding: a }), r), k = p({
     className: S,
     role: g,
     tabIndex: N,
     onClick: t,
-    onKeyDown: u ? (z) => {
-      u && (z.key === "Enter" || z.key === " ") && (z.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": c
-  }, p);
-  return o ? /* @__PURE__ */ l("section", y(f({}, k), { children: d })) : /* @__PURE__ */ l("div", y(f({}, k), { children: d }));
+    "aria-labelledby": o
+  }, u);
+  return c ? /* @__PURE__ */ l("section", y(p({}, k), { children: d })) : /* @__PURE__ */ l("div", y(p({}, k), { children: d }));
 }
 const pe = M(ba);
 pe.displayName = "Card";
@@ -2210,7 +2210,7 @@ W.Title = fa;
 W.Subtitle = pa;
 W.Actions = ma;
 W.Body = ga;
-function Oa(t) {
+function Ba(t) {
   var i = t, {
     children: e,
     className: a = ""
@@ -2220,7 +2220,7 @@ function Oa(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    y(f({
+    y(p({
       className: `flex flex-col ${s("1.5", "space-y")} ${s("lg", "p")} ${s("base", "pb")} ${a}`
     }, r), {
       children: e
@@ -2237,7 +2237,7 @@ function Ma(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    y(f({
+    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
@@ -2254,7 +2254,7 @@ function Ha(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    y(f({
+    y(p({
       className: `
         ${s("lg", "p")}
         border-b
@@ -2276,7 +2276,7 @@ function Pa(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    y(f({
+    y(p({
       className: `
         ${s("lg", "p")}
         border-t
@@ -2291,24 +2291,24 @@ function Pa(t) {
     })
   );
 }
-function Ia(c) {
-  var o = c, {
+function Ia(o) {
+  var c = o, {
     label: e,
     children: a,
     wrap: r = !0,
     className: t
-  } = o, i = h(o, [
+  } = c, i = h(c, [
     "label",
     "children",
     "wrap",
     "className"
   ]);
-  const p = !(i["aria-label"] != null || i["aria-labelledby"] != null) && typeof e == "string" && e !== "" ? e : void 0;
+  const u = !(i["aria-label"] != null || i["aria-labelledby"] != null) && typeof e == "string" && e !== "" ? e : void 0;
   return /* @__PURE__ */ v(
     "div",
-    y(f({
+    y(p({
       role: "group",
-      "aria-label": p,
+      "aria-label": u,
       className: n(
         "flex items-center",
         r ? "flex-wrap" : "flex-nowrap",
@@ -2360,7 +2360,7 @@ function Ua({
     }
   );
 }
-const xa = L(
+const xa = A(
   n(
     "w-full flex flex-col",
     s("2xl", "py"),
@@ -2400,14 +2400,14 @@ const xa = L(
       title: r,
       description: t,
       actions: i,
-      kpis: c,
-      meta: o,
+      kpis: o,
+      meta: c,
       variant: d = "plain",
-      align: p = "start",
+      align: u = "start",
       className: b,
       "aria-label": m,
       "aria-labelledby": x
-    } = S, u = h(S, [
+    } = S, f = h(S, [
       "kicker",
       "title",
       "description",
@@ -2425,12 +2425,12 @@ const xa = L(
       "[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(f({
+      y(p({
         ref: g,
-        className: n(xa({ variant: d, align: p }), b),
+        className: n(xa({ variant: d, align: u }), b),
         "aria-label": k,
         "aria-labelledby": x
-      }, u), {
+      }, f), {
         children: [
           /* @__PURE__ */ v(
             "div",
@@ -2438,7 +2438,7 @@ const xa = L(
               className: n(
                 "flex flex-col",
                 s("md", "gap-y"),
-                ha[p]
+                ha[u]
               ),
               children: [
                 a ? /* @__PURE__ */ l(
@@ -2481,13 +2481,13 @@ const xa = L(
               className: n(
                 "flex flex-wrap",
                 s("sm", "gap"),
-                ya[p]
+                ya[u]
               ),
               children: i
             }
           ) : null,
-          c ? /* @__PURE__ */ l("div", { className: "w-full", children: c }) : null,
-          o ? /* @__PURE__ */ l(
+          o ? /* @__PURE__ */ l("div", { className: "w-full", children: o }) : null,
+          c ? /* @__PURE__ */ l(
             H,
             {
               as: "p",
@@ -2495,7 +2495,7 @@ const xa = L(
               colorRole: "neutral",
               colorShade: "light",
               className: "text-sm",
-              children: o
+              children: c
             }
           ) : null
         ]
@@ -2512,7 +2512,7 @@ function Ka(r) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    f({
+    p({
       role: "separator",
       className: `
         h-px
@@ -2533,14 +2533,14 @@ function qa(t) {
   ]);
   return e === "vertical" ? /* @__PURE__ */ l(
     "div",
-    f({
+    p({
       className: n("w-px", "h-6", "bg-line-default", "mx-auto", a),
       role: "separator",
       "aria-orientation": "vertical"
     }, r)
   ) : /* @__PURE__ */ l(
     "div",
-    f({
+    p({
       className: n(
         "w-full",
         "h-px",
@@ -2561,7 +2561,7 @@ function qa(t) {
     }, r)
   );
 }
-const wa = L(
+const wa = A(
   // Base classes
   n("w-full", "flex", "flex-col", s("sm", "gap")),
   {
@@ -2577,14 +2577,14 @@ const wa = L(
   }
 );
 function Xa(d) {
-  var p = d, {
+  var u = d, {
     title: e,
     description: a,
     breadcrumb: r,
     actions: t,
     variant: i = "default",
-    className: c
-  } = p, o = h(p, [
+    className: o
+  } = u, c = h(u, [
     "title",
     "description",
     "breadcrumb",
@@ -2592,7 +2592,7 @@ function Xa(d) {
     "variant",
     "className"
   ]);
-  return /* @__PURE__ */ v("div", y(f({ className: n(wa({ variant: i }), c) }, o), { children: [
+  return /* @__PURE__ */ v("div", y(p({ className: n(wa({ variant: i }), o) }, c), { children: [
     r && r.length > 0 && /* @__PURE__ */ l(da, { items: r }),
     /* @__PURE__ */ v(
       "div",
@@ -2632,15 +2632,15 @@ const Na = {
   warning: "text-fg-warning",
   error: "text-fg-error"
 };
-function Ga(p) {
-  var b = p, {
+function Ga(u) {
+  var b = u, {
     value: e,
     label: a,
     hint: r,
     icon: t,
     align: i = "start",
-    tone: c = "neutral",
-    className: o
+    tone: o = "neutral",
+    className: c
   } = b, d = h(b, [
     "value",
     "label",
@@ -2653,13 +2653,13 @@ function Ga(p) {
   const m = e == null;
   return /* @__PURE__ */ v(
     "div",
-    y(f({
+    y(p({
       className: n(
         "bg-surface-base flex-1 flex flex-col",
         s("base", "p"),
         s("xs", "gap-y"),
         Na[i],
-        o
+        c
       )
     }, d), {
       children: [
@@ -2673,7 +2673,7 @@ function Ga(p) {
           }
         ) : /* @__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[c]), children: r }) : null
+        r ? /* @__PURE__ */ l("span", { className: n("text-xs", Sa[o]), children: r }) : null
       ]
     })
   );
@@ -2684,45 +2684,59 @@ const $a = {
   4: "md:grid-cols-4"
 };
 function Ya(c) {
-  var o = c, {
+  var d = c, {
     layout: e = "grid",
     cols: a = 4,
-    className: r,
-    children: t
-  } = o, i = h(o, [
+    floatingBadge: r,
+    className: t,
+    children: i
+  } = d, o = h(d, [
     "layout",
     "cols",
+    "floatingBadge",
     "className",
     "children"
   ]);
-  const d = e === "grid";
-  return /* @__PURE__ */ l(
+  const u = e === "grid";
+  return /* @__PURE__ */ v(
     "div",
-    y(f({
+    y(p({
       className: n(
-        "bg-line-default border border-line-default overflow-hidden gap-px",
-        $("lg"),
-        d ? `grid grid-cols-2 ${$a[a]}` : "flex",
-        r
+        "relative",
+        r && s("base", "pt"),
+        t
       )
-    }, i), {
-      children: t
+    }, o), {
+      children: [
+        r ? /* @__PURE__ */ l("div", { className: "absolute top-4 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10", children: r }) : null,
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: n(
+              "bg-line-default border border-line-default overflow-hidden gap-px",
+              $("lg"),
+              u ? `grid grid-cols-2 ${$a[a]}` : "flex"
+            ),
+            children: i
+          }
+        )
+      ]
     })
   );
 }
 function Za(i) {
-  var c = i, { column: e, row: a, className: r = "" } = c, t = h(c, ["column", "row", "className"]);
-  const o = e.key in a ? a[e.key] : void 0;
+  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(f({
+    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(o, a) : String(o != null ? o : "")
+      children: e.render ? e.render(c, a) : String(c != null ? c : "")
     })
   );
 }
-const ka = L(n("flex items-center", "border-b"), {
+const ka = A(n("flex items-center", "border-b"), {
   variants: {
     variant: {
       default: n("border-line-default", s("base", "gap-x")),
@@ -2732,7 +2746,7 @@ const ka = L(n("flex items-center", "border-b"), {
   defaultVariants: {
     variant: "default"
   }
-}), Ca = L(
+}), Ca = A(
   n(
     "relative -mb-px inline-flex items-center",
     s("xs", "gap-x"),
@@ -2786,14 +2800,14 @@ const ka = L(n("flex items-center", "border-b"), {
   s("xs", "px"),
   "bg-surface-muted text-fg-secondary text-xs"
 ), Ta = F(
-  function(b, p) {
+  function(b, u) {
     var m = b, {
       items: a,
       variant: r = "default",
       linkComponent: t,
       className: i,
-      "aria-label": c,
-      "aria-labelledby": o
+      "aria-label": o,
+      "aria-labelledby": c
     } = m, d = h(m, [
       "items",
       "variant",
@@ -2802,32 +2816,32 @@ const ka = L(n("flex items-center", "border-b"), {
       "aria-label",
       "aria-labelledby"
     ]);
-    typeof process != "undefined" && process.env.NODE_ENV !== "production" && !c && !o && console.warn(
+    typeof process != "undefined" && process.env.NODE_ENV !== "production" && !o && !c && console.warn(
       '[TabsAsLinks] renders a <nav> landmark and should have an accessible name. Pass `aria-label` (e.g. "Painel") or `aria-labelledby` — multiple unnamed navs on a page are ambiguous to screen readers.'
     );
     const x = t != null ? t : "a";
     return /* @__PURE__ */ l(
       "nav",
-      y(f({
-        ref: p,
+      y(p({
+        ref: u,
         className: n(ka({ variant: r }), i),
-        "aria-label": c,
-        "aria-labelledby": o
+        "aria-label": o,
+        "aria-labelledby": c
       }, d), {
-        children: a.map((u, g) => /* @__PURE__ */ v(
+        children: a.map((f, g) => /* @__PURE__ */ v(
           x,
           {
-            href: u.href,
-            "aria-current": u.active ? "page" : void 0,
-            "data-active": u.active ? "true" : void 0,
-            className: Ca({ variant: r, active: !!u.active }),
+            href: f.href,
+            "aria-current": f.active ? "page" : void 0,
+            "data-active": f.active ? "true" : void 0,
+            className: Ca({ variant: r, active: !!f.active }),
             children: [
-              u.icon ? /* @__PURE__ */ l("span", { "aria-hidden": "true", className: "inline-flex shrink-0", children: u.icon }) : null,
-              /* @__PURE__ */ l("span", { children: u.label }),
-              u.count !== void 0 ? /* @__PURE__ */ l("span", { className: Ea, children: u.count }) : null
+              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
             ]
           },
-          u.href || g
+          f.href || g
         ))
       })
     );
@@ -2840,11 +2854,11 @@ function Ja({
   className: r = ""
 }) {
   return a === "horizontal" ? /* @__PURE__ */ l("div", { className: `flex items-start ${r}`, children: e.map((t, i) => {
-    const c = t.status || (i === 0 ? "active" : i < e.findIndex((d) => d.status === "active") ? "completed" : "default"), o = i === e.length - 1;
+    const o = t.status || (i === 0 ? "active" : i < e.findIndex((d) => d.status === "active") ? "completed" : "default"), c = i === e.length - 1;
     return /* @__PURE__ */ l("div", { className: "flex items-start flex-1", children: /* @__PURE__ */ v("div", { className: "flex flex-col items-center flex-1", children: [
       /* @__PURE__ */ l(
         "div",
-        y(f({}, c === "default" ? { "data-marker": "pending" } : {}), {
+        y(p({}, o === "default" ? { "data-marker": "pending" } : {}), {
           className: `
                   flex
                   items-center
@@ -2853,19 +2867,19 @@ function Ja({
                   h-10
                   ${$("full")}
                   border-2
-                  ${c === "completed" ? "bg-success border-success text-fg-inverse" : c === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : c === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+                  ${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 || (c === "completed" ? /* @__PURE__ */ l(ne, { className: "h-4 w-4" }) : i + 1)
+          children: t.icon || (o === "completed" ? /* @__PURE__ */ l(ne, { className: "h-4 w-4" }) : i + 1)
         })
       ),
-      !o && /* @__PURE__ */ l(
+      !c && /* @__PURE__ */ l(
         "div",
         {
           className: `
                       w-full
                       h-0.5
                       ${s("sm", "mt")}
-                      ${c === "completed" ? "bg-success" : "bg-line-emphasis"}
+                      ${o === "completed" ? "bg-success" : "bg-line-emphasis"}
                     `
         }
       ),
@@ -2895,7 +2909,7 @@ function Ja({
       )
     ] }) }, t.id);
   }) }) : /* @__PURE__ */ l("div", { className: `${s("none", "space-y")} ${r}`, children: e.map((t, i) => {
-    const c = t.status || (i === 0 ? "active" : i < e.findIndex((d) => d.status === "active") ? "completed" : "default"), o = i === e.length - 1;
+    const o = t.status || (i === 0 ? "active" : i < e.findIndex((d) => d.status === "active") ? "completed" : "default"), c = i === e.length - 1;
     return /* @__PURE__ */ v(
       "div",
       {
@@ -2904,7 +2918,7 @@ function Ja({
           /* @__PURE__ */ v("div", { className: "flex flex-col items-center", children: [
             /* @__PURE__ */ l(
               "div",
-              y(f({}, c === "default" ? { "data-marker": "pending" } : {}), {
+              y(p({}, o === "default" ? { "data-marker": "pending" } : {}), {
                 className: `
                 flex
                 items-center
@@ -2913,12 +2927,12 @@ function Ja({
                 h-10
                 ${$("full")}
                 border-2
-                ${c === "completed" ? "bg-success border-success text-fg-inverse" : c === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : c === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+                ${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 || (c === "completed" ? /* @__PURE__ */ l(ne, { className: "h-4 w-4" }) : i + 1)
+                children: t.icon || (o === "completed" ? /* @__PURE__ */ l(ne, { className: "h-4 w-4" }) : i + 1)
               })
             ),
-            !o && /* @__PURE__ */ l(
+            !c && /* @__PURE__ */ l(
               "div",
               {
                 className: `
@@ -2926,7 +2940,7 @@ function Ja({
                     flex-1
                     min-h-16
                     ${s("sm", "mt")}
-                    ${c === "completed" ? "bg-success" : "bg-line-emphasis"}
+                    ${o === "completed" ? "bg-success" : "bg-line-emphasis"}
                   `
               }
             )
@@ -2945,7 +2959,7 @@ function Ja({
                 className: `
                 text-base
                 font-semibold
-                ${c === "active" ? "text-fg-brand-emphasis" : "text-fg-primary"}
+                ${o === "active" ? "text-fg-brand-emphasis" : "text-fg-primary"}
               `,
                 children: t.title
               }
@@ -2979,7 +2993,7 @@ export {
   oa as Container,
   Ke as DataBadge,
   Ma as DialogFooter,
-  Oa as DialogHeader,
+  Ba as DialogHeader,
   Pa as DrawerFooter,
   Ha as DrawerHeader,
   ja as ErrorMessage,
@@ -2995,7 +3009,7 @@ export {
   Xa as PageHeader,
   aa as Progress,
   na as Separator,
-  Ba as Skeleton,
+  Oa as Skeleton,
   fe as Spinner,
   ca as Stack,
   Ga as Stat,