@fabio.caffarello/react-design-system 3.3.0 → 3.4.0

package/dist/server/index.js

@@ -1,16 +1,16 @@
-var se = Object.defineProperty, le = Object.defineProperties;
-var oe = Object.getOwnPropertyDescriptors;
+var le = Object.defineProperty, oe = Object.defineProperties;
+var de = Object.getOwnPropertyDescriptors;
 var P = Object.getOwnPropertySymbols;
 var Z = Object.prototype.hasOwnProperty, G = Object.prototype.propertyIsEnumerable;
-var K = (r, a, n) => a in r ? se(r, a, { enumerable: !0, configurable: !0, writable: !0, value: n }) : r[a] = n, m = (r, a) => {
+var K = (r, a, n) => a in r ? le(r, a, { enumerable: !0, configurable: !0, writable: !0, value: n }) : r[a] = n, m = (r, a) => {
   for (var n in a || (a = {}))
     Z.call(a, n) && K(r, n, a[n]);
   if (P)
     for (var n of P(a))
       G.call(a, n) && K(r, n, a[n]);
   return r;
-}, v = (r, a) => le(r, oe(a));
-var h = (r, a) => {
+}, v = (r, a) => oe(r, de(a));
+var y = (r, a) => {
   var n = {};
   for (var t in r)
     Z.call(r, t) && a.indexOf(t) < 0 && (n[t] = r[t]);
@@ -20,14 +20,14 @@ var h = (r, a) => {
   return n;
 };
 var Q = (r, a, n) => K(r, typeof a != "symbol" ? a + "" : a, n);
-import { jsx as d, jsxs as C } from "react/jsx-runtime";
+import { jsx as d, jsxs as T } from "react/jsx-runtime";
 import * as S from "react";
-import re, { memo as H, forwardRef as j } from "react";
-import { clsx as de } from "clsx";
-import { twMerge as ce } from "tailwind-merge";
-import { cva as fe } from "class-variance-authority";
-import { X as pe, AlertCircle as ue, Loader2 as me, CheckCircle2 as J } from "lucide-react";
-class I {
+import ne, { memo as B, forwardRef as O } from "react";
+import { clsx as ce } from "clsx";
+import { twMerge as fe } from "tailwind-merge";
+import { cva as pe } from "class-variance-authority";
+import { X as ue, AlertCircle as me, Loader2 as be, CheckCircle2 as J } from "lucide-react";
+class A {
   /**
    * Create a radius token
    */
@@ -83,18 +83,18 @@ class I {
     };
   }
 }
-const be = {
-  none: I.create("none"),
-  sm: I.create("sm"),
-  md: I.create("md"),
-  lg: I.create("lg"),
-  xl: I.create("xl"),
-  "2xl": I.create("2xl"),
-  "3xl": I.create("3xl"),
-  full: I.create("full")
+const ge = {
+  none: A.create("none"),
+  sm: A.create("sm"),
+  md: A.create("md"),
+  lg: A.create("lg"),
+  xl: A.create("xl"),
+  "2xl": A.create("2xl"),
+  "3xl": A.create("3xl"),
+  full: A.create("full")
 };
 function M(r) {
-  return be[r].tailwind;
+  return ge[r].tailwind;
 }
 class k {
   // 4px base
@@ -164,7 +164,7 @@ class k {
   }
 }
 Q(k, "BASE_UNIT", 4);
-const ge = {
+const xe = {
   // Micro spacing (0-14px)
   none: k.create(0),
   "0.5": k.create(0.5),
@@ -202,7 +202,7 @@ const ge = {
   // 96px
 };
 function o(r, a = "p") {
-  const t = ge[r].tailwind;
+  const t = xe[r].tailwind;
   return `${{
     p: "p",
     m: "m",
@@ -225,7 +225,7 @@ function o(r, a = "p") {
     "space-y": "space-y"
   }[a]}-${t}`;
 }
-class $ {
+class N {
   /**
    * Create font size token
    */
@@ -295,23 +295,23 @@ class $ {
     };
   }
 }
-$.createFontWeight("light"), $.createFontWeight("normal"), $.createFontWeight("medium"), $.createFontWeight("semibold"), $.createFontWeight("bold");
+N.createFontWeight("light"), N.createFontWeight("normal"), N.createFontWeight("medium"), N.createFontWeight("semibold"), N.createFontWeight("bold");
 const Y = {
   // Headings
-  h1: $.create("4xl", "tight", "bold"),
-  h2: $.create("3xl", "tight", "bold"),
-  h3: $.create("2xl", "snug", "semibold"),
-  h4: $.create("xl", "snug", "semibold"),
-  h5: $.create("lg", "normal", "medium"),
-  h6: $.create("base", "normal", "medium"),
+  h1: N.create("4xl", "tight", "bold"),
+  h2: N.create("3xl", "tight", "bold"),
+  h3: N.create("2xl", "snug", "semibold"),
+  h4: N.create("xl", "snug", "semibold"),
+  h5: N.create("lg", "normal", "medium"),
+  h6: N.create("base", "normal", "medium"),
   // Body text
-  body: $.create("base", "relaxed", "normal"),
-  bodySmall: $.create("sm", "relaxed", "normal"),
-  bodyLarge: $.create("lg", "relaxed", "normal"),
+  body: N.create("base", "relaxed", "normal"),
+  bodySmall: N.create("sm", "relaxed", "normal"),
+  bodyLarge: N.create("lg", "relaxed", "normal"),
   // UI elements
-  label: $.create("sm", "normal", "medium"),
-  caption: $.create("xs", "normal", "normal"),
-  button: $.create("base", "normal", "medium")
+  label: N.create("sm", "normal", "medium"),
+  caption: N.create("xs", "normal", "normal"),
+  button: N.create("base", "normal", "medium")
 };
 function D(r) {
   const a = Y[r];
@@ -320,25 +320,25 @@ function D(r) {
 function L(r) {
   return Y[r].fontSize.tailwind;
 }
-function B(r) {
+function H(r) {
   return Y[r].fontWeight.tailwind;
 }
 function l(...r) {
-  return ce(de(r));
+  return fe(ce(r));
 }
-const R = (r, a) => {
-  const n = fe(r, a);
+const j = (r, a) => {
+  const n = pe(r, a);
   return ((t) => {
     const i = n(t);
     return l(i);
   });
-}, xe = R(
+}, ye = j(
   // Base classes
   l(
     "inline-flex",
     "items-center",
     "justify-center",
-    B("label"),
+    H("label"),
     M("md"),
     "border"
   ),
@@ -470,8 +470,8 @@ const R = (r, a) => {
       style: "solid"
     }
   }
-), ye = H(
-  j(function(b, p) {
+), he = B(
+  O(function(b, p) {
     var u = b, {
       variant: a = "neutral",
       size: n = "md",
@@ -479,7 +479,7 @@ const R = (r, a) => {
       className: i = "",
       children: s,
       "aria-label": c
-    } = u, f = h(u, [
+    } = u, f = y(u, [
       "variant",
       "size",
       "style",
@@ -487,15 +487,15 @@ const R = (r, a) => {
       "children",
       "aria-label"
     ]);
-    const x = l(xe({ variant: a, size: n, style: t }), i);
+    const x = l(ye({ variant: a, size: n, style: t }), i);
     let g;
     if (c)
       g = c;
     else if (typeof s == "string")
       g = s;
     else if (typeof s == "object" && s !== null && "props" in s) {
-      const y = s.props;
-      y != null && y.children && typeof y.children == "string" && (g = y.children);
+      const h = s.props;
+      h != null && h.children && typeof h.children == "string" && (g = h.children);
     }
     return /* @__PURE__ */ d(
       "span",
@@ -510,13 +510,13 @@ const R = (r, a) => {
     );
   })
 );
-ye.displayName = "Badge";
+he.displayName = "Badge";
 function ee(r, a) {
   if (typeof r == "function")
     return r(a);
   r != null && (r.current = a);
 }
-function he(...r) {
+function we(...r) {
   return (a) => {
     let n = !1;
     const t = r.map((i) => {
@@ -532,19 +532,19 @@ function he(...r) {
       };
   };
 }
-var we = /* @__PURE__ */ Symbol.for("react.lazy"), U = S[" use ".trim().toString()];
-function ve(r) {
+var ve = /* @__PURE__ */ Symbol.for("react.lazy"), U = S[" use ".trim().toString()];
+function ke(r) {
   return typeof r == "object" && r !== null && "then" in r;
 }
-function ne(r) {
-  return r != null && typeof r == "object" && "$$typeof" in r && r.$$typeof === we && "_payload" in r && ve(r._payload);
+function ie(r) {
+  return r != null && typeof r == "object" && "$$typeof" in r && r.$$typeof === ve && "_payload" in r && ke(r._payload);
 }
 // @__NO_SIDE_EFFECTS__
-function ke(r) {
-  const a = /* @__PURE__ */ Ne(r), n = S.forwardRef((t, i) => {
-    let b = t, { children: s } = b, c = h(b, ["children"]);
-    ne(s) && typeof U == "function" && (s = U(s._payload));
-    const f = S.Children.toArray(s), p = f.find(Te);
+function Ne(r) {
+  const a = /* @__PURE__ */ Se(r), n = S.forwardRef((t, i) => {
+    let b = t, { children: s } = b, c = y(b, ["children"]);
+    ie(s) && typeof U == "function" && (s = U(s._payload));
+    const f = S.Children.toArray(s), p = f.find(Ce);
     if (p) {
       const u = p.props.children, x = f.map((g) => g === p ? S.Children.count(u) > 1 ? S.Children.only(null) : S.isValidElement(u) ? u.props.children : null : g);
       return /* @__PURE__ */ d(a, v(m({}, c), { ref: i, children: S.isValidElement(u) ? S.cloneElement(u, void 0, x) : null }));
@@ -553,24 +553,24 @@ function ke(r) {
   });
   return n.displayName = `${r}.Slot`, n;
 }
-var $e = /* @__PURE__ */ ke("Slot");
+var $e = /* @__PURE__ */ Ne("Slot");
 // @__NO_SIDE_EFFECTS__
-function Ne(r) {
+function Se(r) {
   const a = S.forwardRef((n, t) => {
-    let c = n, { children: i } = c, s = h(c, ["children"]);
-    if (ne(i) && typeof U == "function" && (i = U(i._payload)), S.isValidElement(i)) {
-      const f = Me(i), p = Ce(s, i.props);
-      return i.type !== S.Fragment && (p.ref = t ? he(t, f) : f), S.cloneElement(i, p);
+    let c = n, { children: i } = c, s = y(c, ["children"]);
+    if (ie(i) && typeof U == "function" && (i = U(i._payload)), S.isValidElement(i)) {
+      const f = Le(i), p = Me(s, i.props);
+      return i.type !== S.Fragment && (p.ref = t ? we(t, f) : f), S.cloneElement(i, p);
     }
     return S.Children.count(i) > 1 ? S.Children.only(null) : null;
   });
   return a.displayName = `${r}.SlotClone`, a;
 }
-var Se = /* @__PURE__ */ Symbol("radix.slottable");
-function Te(r) {
-  return S.isValidElement(r) && typeof r.type == "function" && "__radixId" in r.type && r.type.__radixId === Se;
+var Te = /* @__PURE__ */ Symbol("radix.slottable");
+function Ce(r) {
+  return S.isValidElement(r) && typeof r.type == "function" && "__radixId" in r.type && r.type.__radixId === Te;
 }
-function Ce(r, a) {
+function Me(r, a) {
   const n = m({}, a);
   for (const t in a) {
     const i = r[t], s = a[t];
@@ -581,12 +581,12 @@ function Ce(r, a) {
   }
   return m(m({}, r), n);
 }
-function Me(r) {
+function Le(r) {
   var t, i;
   let a = (t = Object.getOwnPropertyDescriptor(r.props, "ref")) == null ? void 0 : t.get, n = a && "isReactWarning" in a && a.isReactWarning;
   return n ? r.ref : (a = (i = Object.getOwnPropertyDescriptor(r, "ref")) == null ? void 0 : i.get, n = a && "isReactWarning" in a && a.isReactWarning, n ? r.props.ref : r.props.ref || r.ref);
 }
-const ae = R(
+const ae = j(
   // Base classes
   l(
     "inline-flex",
@@ -675,7 +675,7 @@ const ae = R(
       disabled: !1
     }
   }
-), Le = j(function(a, n) {
+), ze = O(function(a, n) {
   const {
     children: t,
     variant: i = "default",
@@ -686,7 +686,7 @@ const ae = R(
     "aria-label": b,
     tabIndex: u,
     asChild: x = !1
-  } = a, y = (() => {
+  } = a, h = (() => {
     if (b) return b;
     if (typeof t == "string") return t;
     if (typeof t == "object" && t !== null && "props" in t) {
@@ -710,16 +710,16 @@ const ae = R(
         children: t
       }
     );
-  const { onRemove: T, onClick: z } = a, q = z !== void 0, _ = q && !f, ie = (F) => {
+  const { onRemove: C, onClick: z } = a, q = z !== void 0, R = q && !f, se = (F) => {
     f || (F.key === "Enter" || F.key === " ") && (F.preventDefault(), z == null || z());
   };
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ T(
     "div",
     {
       ref: n,
       className: l(
         ae({ variant: i, size: s, selected: c, disabled: f }),
-        T && o("xs", "pr"),
+        C && o("xs", "pr"),
         p
       ),
       "aria-disabled": f,
@@ -729,11 +729,11 @@ const ae = R(
           {
             type: "button",
             onClick: f ? void 0 : z,
-            onKeyDown: ie,
+            onKeyDown: se,
             disabled: f,
             "aria-pressed": c ? !0 : void 0,
-            "aria-label": b || y,
-            tabIndex: u !== void 0 ? u : _ ? 0 : void 0,
+            "aria-label": b || h,
+            tabIndex: u !== void 0 ? u : R ? 0 : void 0,
             className: l(
               "flex-1",
               "bg-transparent",
@@ -751,12 +751,12 @@ const ae = R(
             children: t
           }
         ) : /* @__PURE__ */ d("span", { children: t }),
-        T && !f && /* @__PURE__ */ d(
+        C && !f && /* @__PURE__ */ d(
           "button",
           {
             type: "button",
             onClick: (F) => {
-              F.stopPropagation(), T();
+              F.stopPropagation(), C();
             },
             className: l(
               o("xs", "ml"),
@@ -769,21 +769,21 @@ const ae = R(
               "focus:ring-line-focus",
               "focus:ring-offset-1"
             ),
-            "aria-label": `Remove ${y || "chip"}`,
-            children: /* @__PURE__ */ d(pe, { className: "h-3 w-3", "aria-hidden": "true" })
+            "aria-label": `Remove ${h || "chip"}`,
+            children: /* @__PURE__ */ d(ue, { className: "h-3 w-3", "aria-hidden": "true" })
           }
         )
       ]
     }
   );
 });
-Le.displayName = "Chip";
-function ia(i) {
+ze.displayName = "Chip";
+function la(i) {
   var s = i, {
     message: r,
     id: a,
     className: n = ""
-  } = s, t = h(s, [
+  } = s, t = y(s, [
     "message",
     "id",
     "className"
@@ -796,16 +796,16 @@ function ia(i) {
     "items-center",
     o("xs", "gap")
   ], f = l(...c, n);
-  return /* @__PURE__ */ C("div", v(m({ role: "alert", id: a, className: f, "aria-live": "polite" }, t), { children: [
-    /* @__PURE__ */ d(ue, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  return /* @__PURE__ */ T("div", v(m({ role: "alert", id: a, className: f, "aria-live": "polite" }, t), { children: [
+    /* @__PURE__ */ d(me, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
     /* @__PURE__ */ d("span", { children: r })
   ] }));
 }
-function sa(t) {
+function oa(t) {
   var i = t, {
     variant: r = "info",
     className: a
-  } = i, n = h(i, [
+  } = i, n = y(i, [
     "variant",
     "className"
   ]);
@@ -829,12 +829,12 @@ function sa(t) {
     }, n)
   );
 }
-const ze = l(
+const Fe = l(
   "block",
   L("label"),
-  B("label"),
+  H("label"),
   "text-fg-primary"
-), Fe = {
+), Ee = {
   default: "",
   required: l(
     "after:content-['*']",
@@ -847,20 +847,20 @@ const ze = l(
     "after:text-fg-tertiary",
     "after:font-normal"
   )
-}, Ae = H(
-  j(function(c, s) {
-    var f = c, { variant: a = "default", className: n = "", children: t } = f, i = h(f, ["variant", "className", "children"]);
+}, Ie = B(
+  O(function(c, s) {
+    var f = c, { variant: a = "default", className: n = "", children: t } = f, i = y(f, ["variant", "className", "children"]);
     const p = l(
-      ze,
-      Fe[a],
+      Fe,
+      Ee[a],
       n
     );
     return /* @__PURE__ */ d("label", v(m({ ref: s, className: p }, i), { children: t }));
   })
 );
-Ae.displayName = "Label";
+Ie.displayName = "Label";
 function w(r, a, n) {
-  const t = Ee(r), i = Ie(r);
+  const t = Ae(r), i = We(r);
   return {
     hex: r,
     rgb: t,
@@ -869,11 +869,11 @@ function w(r, a, n) {
     tailwind: `${a}-${n}`
   };
 }
-function Ee(r) {
+function Ae(r) {
   const a = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r);
   return a ? `${parseInt(a[1], 16)}, ${parseInt(a[2], 16)}, ${parseInt(a[3], 16)}` : "0, 0, 0";
 }
-function Ie(r) {
+function We(r) {
   const a = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r);
   if (!a) return "0, 0%, 0%";
   const n = parseInt(a[1], 16) / 255, t = parseInt(a[2], 16) / 255, i = parseInt(a[3], 16) / 255, s = Math.max(n, t, i), c = Math.min(n, t, i);
@@ -898,7 +898,7 @@ function Ie(r) {
 w("#f0f4f8", "brand-primary", 50), w("#d9e2ec", "brand-primary", 100), w("#bcccdc", "brand-primary", 200), w("#9fb3c8", "brand-primary", 300), w("#7390ad", "brand-primary", 400), w("#486581", "brand-primary", 500), w("#334e68", "brand-primary", 600), w("#243b53", "brand-primary", 700), w("#1a2a3a", "brand-primary", 800), w("#102a43", "brand-primary", 900), w("#061a35", "brand-primary", 950);
 w("#f7f5ff", "brand-secondary", 50), w("#eee9ff", "brand-secondary", 100), w("#e0d6ff", "brand-secondary", 200), w("#cbb8ff", "brand-secondary", 300), w("#aa89fc", "brand-secondary", 400), w("#8e58f2", "brand-secondary", 500), w("#703bc8", "brand-secondary", 600), w("#582aa2", "brand-secondary", 700), w("#44227e", "brand-secondary", 800), w("#32185d", "brand-secondary", 900), w("#180635", "brand-secondary", 950);
 function e(r, a, n) {
-  const t = We(r), i = De(r);
+  const t = De(r), i = Ve(r);
   return {
     hex: r,
     rgb: t,
@@ -907,11 +907,11 @@ function e(r, a, n) {
     tailwind: `${a}-${n}`
   };
 }
-function We(r) {
+function De(r) {
   const a = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r);
   return a ? `${parseInt(a[1], 16)}, ${parseInt(a[2], 16)}, ${parseInt(a[3], 16)}` : "0, 0, 0";
 }
-function De(r) {
+function Ve(r) {
   const a = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r);
   if (!a) return "0, 0%, 0%";
   const n = parseInt(a[1], 16) / 255, t = parseInt(a[2], 16) / 255, i = parseInt(a[3], 16) / 255, s = Math.max(n, t, i), c = Math.min(n, t, i);
@@ -996,7 +996,7 @@ class V {
     }[a];
   }
 }
-const Ve = {
+const je = {
   none: V.create("none"),
   sm: V.create("sm"),
   md: V.create("md"),
@@ -1006,9 +1006,9 @@ const Ve = {
   inner: V.create("inner")
 };
 function X(r) {
-  return Ve[r].tailwind;
+  return je[r].tailwind;
 }
-class A {
+class E {
   /**
    * Create a border width token
    */
@@ -1052,8 +1052,8 @@ class A {
     };
   }
 }
-A.create("none"), A.create("thin"), A.create("base"), A.create("medium"), A.create("thick"), A.create("thin", "dashed"), A.create("base", "dashed"), A.create("thin", "dotted"), A.create("base", "dotted");
-class O {
+E.create("none"), E.create("thin"), E.create("base"), E.create("medium"), E.create("thick"), E.create("thin", "dashed"), E.create("base", "dashed"), E.create("thin", "dotted"), E.create("base", "dotted");
+class _ {
   /**
    * Create breakpoint token
    */
@@ -1074,7 +1074,7 @@ class O {
     };
   }
 }
-O.create("sm"), O.create("md"), O.create("lg"), O.create("xl"), O.create("2xl");
+_.create("sm"), _.create("md"), _.create("lg"), _.create("xl"), _.create("2xl");
 class W {
   /**
    * Create an animation token
@@ -1148,7 +1148,7 @@ W.create("fast"), W.create("base"), W.create("slow"), W.create("slower"), W.crea
   ["color", "background-color", "border-color"],
   "base"
 ), W.createTransition("opacity", "fast"), W.createTransition("transform", "base"), W.createTransition("all", "base");
-class E {
+class I {
   /**
    * Create a z-index token
    */
@@ -1202,8 +1202,8 @@ class E {
     }[a];
   }
 }
-E.create("base"), E.create("dropdown"), E.create("sticky"), E.create("fixed"), E.create("modal-backdrop"), E.create("modal"), E.create("popover"), E.create("tooltip"), E.create("toast");
-class N {
+I.create("base"), I.create("dropdown"), I.create("sticky"), I.create("fixed"), I.create("modal-backdrop"), I.create("modal"), I.create("popover"), I.create("tooltip"), I.create("toast");
+class $ {
   /**
    * Create an opacity token
    */
@@ -1249,8 +1249,8 @@ class N {
     };
   }
 }
-N.create(0), N.create(5), N.create(10), N.create(20), N.create(25), N.create(30), N.create(40), N.create(50), N.create(60), N.create(70), N.create(75), N.create(80), N.create(90), N.create(95), N.create(100);
-const je = R("w-full", {
+$.create(0), $.create(5), $.create(10), $.create(20), $.create(25), $.create(30), $.create(40), $.create(50), $.create(60), $.create(70), $.create(75), $.create(80), $.create(90), $.create(95), $.create(100);
+const Re = j("w-full", {
   variants: {
     size: {
       sm: "h-1",
@@ -1270,7 +1270,7 @@ const je = R("w-full", {
     size: "md",
     variant: "primary"
   }
-}), te = R("transition-all", {
+}), te = j("transition-all", {
   variants: {
     variant: {
       primary: "bg-surface-brand",
@@ -1284,7 +1284,7 @@ const je = R("w-full", {
   defaultVariants: {
     variant: "primary"
   }
-}), Re = j(function(x, u) {
+}), _e = O(function(x, u) {
   var g = x, {
     value: a,
     max: n = 100,
@@ -1294,7 +1294,7 @@ const je = R("w-full", {
     label: c,
     "aria-label": f,
     className: p = ""
-  } = g, b = h(g, [
+  } = g, b = y(g, [
     "value",
     "max",
     "variant",
@@ -1304,9 +1304,9 @@ const je = R("w-full", {
     "aria-label",
     "className"
   ]);
-  const y = a === void 0, T = y ? void 0 : Math.min(Math.max(a / n * 100, 0), 100), z = f || (y ? "Loading in progress" : `Progress: ${T == null ? void 0 : T.toFixed(0)}%`);
-  return /* @__PURE__ */ C("div", v(m({ ref: u, className: l("w-full", p) }, b), { children: [
-    s && (c || !y) && /* @__PURE__ */ C(
+  const h = a === void 0, C = h ? void 0 : Math.min(Math.max(a / n * 100, 0), 100), z = f || (h ? "Loading in progress" : `Progress: ${C == null ? void 0 : C.toFixed(0)}%`);
+  return /* @__PURE__ */ T("div", v(m({ ref: u, className: l("w-full", p) }, b), { children: [
+    s && (c || !h) && /* @__PURE__ */ T(
       "div",
       {
         className: l(
@@ -1321,13 +1321,13 @@ const je = R("w-full", {
             {
               className: l(
                 L("bodySmall"),
-                B("label"),
+                H("label"),
                 "text-fg-primary"
               ),
               children: c
             }
           ),
-          !y && T !== void 0 && /* @__PURE__ */ C(
+          !h && C !== void 0 && /* @__PURE__ */ T(
             "span",
             {
               className: l(
@@ -1335,7 +1335,7 @@ const je = R("w-full", {
                 "text-fg-secondary"
               ),
               children: [
-                T.toFixed(0),
+                C.toFixed(0),
                 "%"
               ]
             }
@@ -1347,19 +1347,19 @@ const je = R("w-full", {
       "div",
       {
         role: "progressbar",
-        "aria-valuemin": y ? void 0 : 0,
-        "aria-valuemax": y ? void 0 : n,
-        "aria-valuenow": y ? void 0 : a,
+        "aria-valuemin": h ? void 0 : 0,
+        "aria-valuemax": h ? void 0 : n,
+        "aria-valuenow": h ? void 0 : a,
         "aria-label": z,
-        "aria-busy": y,
+        "aria-busy": h,
         className: l(
           "relative",
           "w-full",
           "overflow-hidden",
-          je({ size: i, variant: t }),
+          Re({ size: i, variant: t }),
           M("full")
         ),
-        children: y ? /* @__PURE__ */ d(
+        children: h ? /* @__PURE__ */ d(
           "div",
           {
             className: l(
@@ -1388,7 +1388,7 @@ const je = R("w-full", {
               "ease-out"
             ),
             style: {
-              width: `${T}%`
+              width: `${C}%`
             },
             "aria-hidden": "true"
           }
@@ -1397,20 +1397,20 @@ const je = R("w-full", {
     )
   ] }));
 });
-Re.displayName = "Progress";
-const _e = {
+_e.displayName = "Progress";
+const He = {
   horizontal: "w-full border-t",
   vertical: "h-full border-l self-stretch"
-}, Oe = {
+}, Be = {
   solid: "border-solid",
   dashed: "border-dashed",
   dotted: "border-dotted"
-}, Be = H(function(s) {
+}, Oe = B(function(s) {
   var c = s, {
     orientation: a = "horizontal",
     variant: n = "solid",
     className: t = ""
-  } = c, i = h(c, [
+  } = c, i = y(c, [
     "orientation",
     "variant",
     "className"
@@ -1418,8 +1418,8 @@ const _e = {
   const f = l(
     "border-0",
     "border-line-default",
-    _e[a],
-    Oe[n],
+    He[a],
+    Be[n],
     t
   );
   return a === "vertical" ? /* @__PURE__ */ d(
@@ -1438,8 +1438,8 @@ const _e = {
     }, i)
   );
 });
-Be.displayName = "Separator";
-function la(f) {
+Oe.displayName = "Separator";
+function da(f) {
   var p = f, {
     variant: r = "text",
     width: a,
@@ -1447,7 +1447,7 @@ function la(f) {
     lines: t = 1,
     className: i = "",
     "aria-label": s
-  } = p, c = h(p, [
+  } = p, c = y(p, [
     "variant",
     "width",
     "height",
@@ -1466,16 +1466,16 @@ function la(f) {
     circle: M("full")
   }, x = l(...b, u[r], i), g = {};
   a && (g.width = a), n && (g.height = n);
-  const y = s || `Loading ${r} content`;
+  const h = s || `Loading ${r} content`;
   return r === "text" && t > 1 ? /* @__PURE__ */ d(
     "div",
     v(m({
       className: o("sm", "space-y"),
       role: "status",
       "aria-busy": "true",
-      "aria-label": y
+      "aria-label": h
     }, c), {
-      children: Array.from({ length: t }).map((T, z) => /* @__PURE__ */ d(
+      children: Array.from({ length: t }).map((C, z) => /* @__PURE__ */ d(
         "div",
         {
           className: x,
@@ -1492,11 +1492,11 @@ function la(f) {
       style: g,
       role: "status",
       "aria-busy": "true",
-      "aria-label": y
+      "aria-label": h
     }, c)
   );
 }
-const He = R("motion-safe:animate-spin", {
+const Pe = j("motion-safe:animate-spin", {
   variants: {
     size: {
       sm: "h-4 w-4",
@@ -1513,19 +1513,19 @@ const He = R("motion-safe:animate-spin", {
     size: "md",
     variant: "primary"
   }
-}), Pe = H(function(c) {
+}), Ue = B(function(c) {
   var f = c, {
     size: a = "md",
     variant: n = "primary",
     label: t,
     className: i = ""
-  } = f, s = h(f, [
+  } = f, s = y(f, [
     "size",
     "variant",
     "label",
     "className"
   ]);
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ T(
     "div",
     v(m({
       className: l("inline-flex", "items-center", i),
@@ -1535,9 +1535,9 @@ const He = R("motion-safe:animate-spin", {
     }, s), {
       children: [
         /* @__PURE__ */ d(
-          me,
+          be,
           {
-            className: l(He({ size: a, variant: n })),
+            className: l(Pe({ size: a, variant: n })),
             "aria-hidden": "true"
           }
         ),
@@ -1557,8 +1557,8 @@ const He = R("motion-safe:animate-spin", {
     })
   );
 });
-Pe.displayName = "Spinner";
-const Ue = {
+Ue.displayName = "Spinner";
+const qe = {
   primary: {
     // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
     light: "text-indigo-400",
@@ -1610,7 +1610,7 @@ const Ue = {
     contrast: "text-fg-inverse"
   }
 };
-function qe(b, p) {
+function Ke(b, p) {
   var u = b, {
     variant: r = "paragraph",
     bold: a,
@@ -1619,7 +1619,7 @@ function qe(b, p) {
     as: i,
     colorRole: s = "neutral",
     colorShade: c = "dark"
-  } = u, f = h(u, [
+  } = u, f = y(u, [
     "variant",
     "bold",
     "italic",
@@ -1644,16 +1644,16 @@ function qe(b, p) {
         g = "p";
         break;
     }
-  return r === "heading" ? x.push(D("h2")) : r === "body" || r === "paragraph" ? x.push(D("body")) : r === "bodySmall" ? x.push(D("bodySmall")) : r === "bodyLarge" ? x.push(D("bodyLarge")) : r === "caption" ? x.push(D("caption")) : r === "label" ? x.push(D("label")) : x.push(D("body")), a && x.push("font-bold"), n && x.push("italic"), x.push(Ue[s][c]), /* @__PURE__ */ d(g, m({ ref: p, className: l(...x, t) }, f));
+  return r === "heading" ? x.push(D("h2")) : r === "body" || r === "paragraph" ? x.push(D("body")) : r === "bodySmall" ? x.push(D("bodySmall")) : r === "bodyLarge" ? x.push(D("bodyLarge")) : r === "caption" ? x.push(D("caption")) : r === "label" ? x.push(D("label")) : x.push(D("body")), a && x.push("font-bold"), n && x.push("italic"), x.push(qe[s][c]), /* @__PURE__ */ d(g, m({ ref: p, className: l(...x, t) }, f));
 }
-const oa = j(qe), Ke = {
+const re = O(Ke), Xe = {
   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"
-}, Xe = re.forwardRef(
+}, Ye = ne.forwardRef(
   (p, f) => {
     var b = p, {
       className: r,
@@ -1662,7 +1662,7 @@ const oa = j(qe), Ke = {
       paddingY: t = "base",
       center: i = !0,
       children: s
-    } = b, c = h(b, [
+    } = b, c = y(b, [
       "className",
       "maxWidth",
       "paddingX",
@@ -1676,7 +1676,7 @@ const oa = j(qe), Ke = {
         ref: f,
         className: l(
           "w-full",
-          Ke[a],
+          Xe[a],
           o(n, "px"),
           o(t, "py"),
           i && "mx-auto",
@@ -1688,8 +1688,8 @@ const oa = j(qe), Ke = {
     );
   }
 );
-Xe.displayName = "Container";
-const Ye = re.forwardRef(
+Ye.displayName = "Container";
+const Ze = ne.forwardRef(
   (p, f) => {
     var b = p, {
       className: r,
@@ -1698,7 +1698,7 @@ const Ye = re.forwardRef(
       justify: t = "start",
       direction: i = "column",
       children: s
-    } = b, c = h(b, [
+    } = b, c = y(b, [
       "className",
       "spacing",
       "align",
@@ -1737,47 +1737,13 @@ const Ye = re.forwardRef(
     );
   }
 );
-Ye.displayName = "Stack";
-const Ze = j(
-  function({ option: a, isHighlighted: n, onSelect: t }, i) {
-    const s = () => {
-      a.disabled || t(a);
-    };
-    return /* @__PURE__ */ C(
-      "div",
-      {
-        ref: i,
-        role: "option",
-        "aria-selected": n,
-        "aria-disabled": a.disabled,
-        onClick: s,
-        className: `
-          flex
-          items-center
-          ${o("sm", "gap")}
-          ${o("sm", "px")}
-          ${o("sm", "py")}
-          text-sm
-          cursor-pointer
-          transition-colors
-          ${n ? "bg-surface-active" : ""}
-          ${a.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-surface-hover"}
-        `,
-        children: [
-          a.icon && /* @__PURE__ */ d("span", { className: "flex-shrink-0", children: a.icon }),
-          /* @__PURE__ */ d("span", { className: "flex-1", children: a.label })
-        ]
-      }
-    );
-  }
-);
-Ze.displayName = "AutocompleteOption";
-function da(i) {
+Ze.displayName = "Stack";
+function Ge(i) {
   var s = i, {
     items: r,
     separator: a = "/",
     className: n = ""
-  } = s, t = h(s, [
+  } = s, t = y(s, [
     "items",
     "separator",
     "className"
@@ -1794,7 +1760,7 @@ function da(i) {
       className: l("flex", "items-center", o("sm", "space-x")),
       children: r.map((p, b) => {
         const u = b === r.length - 1;
-        return /* @__PURE__ */ C("li", { className: "flex items-center", children: [
+        return /* @__PURE__ */ T("li", { className: "flex items-center", children: [
           b > 0 && /* @__PURE__ */ d(
             "span",
             {
@@ -1811,7 +1777,7 @@ function da(i) {
             {
               className: l(
                 "text-fg-primary",
-                B("label")
+                H("label")
               ),
               "aria-current": "page",
               children: p.label
@@ -1828,7 +1794,7 @@ function da(i) {
                 "border-b-2",
                 "border-transparent",
                 L("bodySmall"),
-                B("label"),
+                H("label"),
                 "transition-colors",
                 "text-fg-secondary",
                 "hover:border-line-emphasis",
@@ -1842,7 +1808,7 @@ function da(i) {
     }
   ) }));
 }
-const Ge = H(function(b) {
+const Qe = B(function(b) {
   var u = b, {
     variant: a = "default",
     padding: n = "medium",
@@ -1851,7 +1817,7 @@ const Ge = H(function(b) {
     "aria-label": s,
     "aria-labelledby": c,
     children: f
-  } = u, p = h(u, [
+  } = u, p = y(u, [
     "variant",
     "padding",
     "className",
@@ -1860,7 +1826,7 @@ const Ge = H(function(b) {
     "aria-labelledby",
     "children"
   ]);
-  const x = R(
+  const x = j(
     l(
       "bg-surface-base",
       M("lg"),
@@ -1891,17 +1857,17 @@ const Ge = H(function(b) {
         padding: "medium"
       }
     }
-  ), g = i !== void 0, y = g ? "button" : void 0, T = g ? 0 : void 0, z = l(x({ variant: a, padding: n }), t);
+  ), g = i !== void 0, h = g ? "button" : void 0, C = g ? 0 : void 0, z = l(x({ variant: a, padding: n }), t);
   return /* @__PURE__ */ d(
     "div",
     v(m({
       className: z,
-      role: y,
-      tabIndex: T,
+      role: h,
+      tabIndex: C,
       onClick: i,
-      onKeyDown: (_) => {
-        g && (_.key === "Enter" || _.key === " ") && (_.preventDefault(), i == null || i());
-      },
+      onKeyDown: g ? (R) => {
+        g && (R.key === "Enter" || R.key === " ") && (R.preventDefault(), i == null || i());
+      } : void 0,
       "aria-label": s,
       "aria-labelledby": c
     }, p), {
@@ -1909,12 +1875,12 @@ const Ge = H(function(b) {
     })
   );
 });
-Ge.displayName = "Card";
+Qe.displayName = "Card";
 function ca(t) {
   var i = t, {
     children: r,
     className: a = ""
-  } = i, n = h(i, [
+  } = i, n = y(i, [
     "children",
     "className"
   ]);
@@ -1931,7 +1897,7 @@ function fa(t) {
   var i = t, {
     children: r,
     className: a = ""
-  } = i, n = h(i, [
+  } = i, n = y(i, [
     "children",
     "className"
   ]);
@@ -1948,7 +1914,7 @@ function pa(t) {
   var i = t, {
     children: r,
     className: a = ""
-  } = i, n = h(i, [
+  } = i, n = y(i, [
     "children",
     "className"
   ]);
@@ -1970,7 +1936,7 @@ function ua(t) {
   var i = t, {
     children: r,
     className: a = ""
-  } = i, n = h(i, [
+  } = i, n = y(i, [
     "children",
     "className"
   ]);
@@ -2026,7 +1992,7 @@ function ba({
 function ga(n) {
   var t = n, {
     className: r = ""
-  } = t, a = h(t, [
+  } = t, a = y(t, [
     "className"
   ]);
   return /* @__PURE__ */ d(
@@ -2046,7 +2012,7 @@ function xa(t) {
   var i = t, {
     orientation: r = "horizontal",
     className: a = ""
-  } = i, n = h(i, [
+  } = i, n = y(i, [
     "orientation",
     "className"
   ]);
@@ -2080,8 +2046,70 @@ function xa(t) {
     }, n)
   );
 }
-function ya(i) {
-  var s = i, { column: r, row: a, className: n = "" } = s, t = h(s, ["column", "row", "className"]);
+const Je = j(
+  // Base classes
+  l("w-full", "flex", "flex-col", o("sm", "gap")),
+  {
+    variants: {
+      variant: {
+        default: l(o("base", "mb")),
+        compact: l(o("sm", "mb"))
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ya(f) {
+  var p = f, {
+    title: r,
+    description: a,
+    breadcrumb: n,
+    actions: t,
+    variant: i = "default",
+    className: s
+  } = p, c = y(p, [
+    "title",
+    "description",
+    "breadcrumb",
+    "actions",
+    "variant",
+    "className"
+  ]);
+  return /* @__PURE__ */ T("div", v(m({ className: l(Je({ variant: i }), s) }, c), { children: [
+    n && n.length > 0 && /* @__PURE__ */ d(Ge, { items: n }),
+    /* @__PURE__ */ T(
+      "div",
+      {
+        className: `flex items-start justify-between ${o("base", "gap")}`,
+        children: [
+          /* @__PURE__ */ T("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ d(
+              re,
+              {
+                variant: "heading",
+                as: "h1",
+                className: `${o("sm", "mb")} text-2xl font-bold`,
+                children: r
+              }
+            ),
+            a && /* @__PURE__ */ d(re, { variant: "body", className: "text-fg-secondary", children: a })
+          ] }),
+          t && /* @__PURE__ */ d(
+            "div",
+            {
+              className: `flex items-center ${o("sm", "gap")} flex-shrink-0`,
+              children: t
+            }
+          )
+        ]
+      }
+    )
+  ] }));
+}
+function ha(i) {
+  var s = i, { column: r, row: a, className: n = "" } = s, t = y(s, ["column", "row", "className"]);
   const c = r.key in a ? a[r.key] : void 0;
   return /* @__PURE__ */ d(
     "td",
@@ -2092,14 +2120,14 @@ function ya(i) {
     })
   );
 }
-function ha({
+function wa({
   items: r,
   orientation: a = "vertical",
   className: n = ""
 }) {
   return a === "horizontal" ? /* @__PURE__ */ d("div", { className: `flex items-start ${n}`, children: r.map((t, i) => {
     const s = t.status || (i === 0 ? "active" : i < r.findIndex((f) => f.status === "active") ? "completed" : "default"), c = i === r.length - 1;
-    return /* @__PURE__ */ d("div", { className: "flex items-start flex-1", children: /* @__PURE__ */ C("div", { className: "flex flex-col items-center flex-1", children: [
+    return /* @__PURE__ */ d("div", { className: "flex items-start flex-1", children: /* @__PURE__ */ T("div", { className: "flex flex-col items-center flex-1", children: [
       /* @__PURE__ */ d(
         "div",
         v(m({}, s === "default" ? { "data-marker": "pending" } : {}), {
@@ -2127,7 +2155,7 @@ function ha({
                     `
         }
       ),
-      /* @__PURE__ */ C(
+      /* @__PURE__ */ T(
         "div",
         {
           className: `${o("base", "mt")} text-center ${o("base", "px")}`,
@@ -2154,12 +2182,12 @@ function ha({
     ] }) }, t.id);
   }) }) : /* @__PURE__ */ d("div", { className: `${o("none", "space-y")} ${n}`, children: r.map((t, i) => {
     const s = t.status || (i === 0 ? "active" : i < r.findIndex((f) => f.status === "active") ? "completed" : "default"), c = i === r.length - 1;
-    return /* @__PURE__ */ C(
+    return /* @__PURE__ */ T(
       "div",
       {
         className: `flex items-start ${o("base", "gap")}`,
         children: [
-          /* @__PURE__ */ C("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ T("div", { className: "flex flex-col items-center", children: [
             /* @__PURE__ */ d(
               "div",
               v(m({}, s === "default" ? { "data-marker": "pending" } : {}), {
@@ -2189,7 +2217,7 @@ function ha({
               }
             )
           ] }),
-          /* @__PURE__ */ C("div", { className: `flex-1 ${o("xl", "pb")}`, children: [
+          /* @__PURE__ */ T("div", { className: `flex-1 ${o("xl", "pb")}`, children: [
             t.timestamp && /* @__PURE__ */ d(
               "p",
               {
@@ -2224,30 +2252,30 @@ function ha({
   }) });
 }
 export {
-  Ze as AutocompleteOption,
-  ye as Badge,
-  da as Breadcrumb,
-  Ge as Card,
-  Le as Chip,
-  Xe as Container,
+  he as Badge,
+  Ge as Breadcrumb,
+  Qe as Card,
+  ze as Chip,
+  Ye as Container,
   fa as DialogFooter,
   ca as DialogHeader,
   ua as DrawerFooter,
   pa as DrawerHeader,
-  ia as ErrorMessage,
+  la as ErrorMessage,
   ma as HeaderActions,
   ba as HeaderNavigation,
-  sa as Info,
-  Ae as Label,
+  oa as Info,
+  Ie as Label,
   ga as MenuSeparator,
   xa as NavbarSeparator,
-  Re as Progress,
-  Be as Separator,
-  la as Skeleton,
-  Pe as Spinner,
-  Ye as Stack,
-  ya as TableCell,
-  oa as Text,
-  ha as Timeline
+  ya as PageHeader,
+  _e as Progress,
+  Oe as Separator,
+  da as Skeleton,
+  Ue as Spinner,
+  Ze as Stack,
+  ha as TableCell,
+  re as Text,
+  wa as Timeline
 };
 //# sourceMappingURL=index.js.map