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

package/dist/server/index.js

@@ -1,33 +1,33 @@
-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 ? le(r, a, { enumerable: !0, configurable: !0, writable: !0, value: n }) : r[a] = n, m = (r, a) => {
+var de = Object.defineProperty, ce = Object.defineProperties;
+var fe = Object.getOwnPropertyDescriptors;
+var U = Object.getOwnPropertySymbols;
+var Q = Object.prototype.hasOwnProperty, J = Object.prototype.propertyIsEnumerable;
+var Y = (r, a, n) => a in r ? de(r, a, { enumerable: !0, configurable: !0, writable: !0, value: n }) : r[a] = n, u = (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]);
+    Q.call(a, n) && Y(r, n, a[n]);
+  if (U)
+    for (var n of U(a))
+      J.call(a, n) && Y(r, n, a[n]);
   return r;
-}, v = (r, a) => oe(r, de(a));
-var y = (r, a) => {
+}, y = (r, a) => ce(r, fe(a));
+var x = (r, a) => {
   var n = {};
   for (var t in r)
-    Z.call(r, t) && a.indexOf(t) < 0 && (n[t] = r[t]);
-  if (r != null && P)
-    for (var t of P(r))
-      a.indexOf(t) < 0 && G.call(r, t) && (n[t] = r[t]);
+    Q.call(r, t) && a.indexOf(t) < 0 && (n[t] = r[t]);
+  if (r != null && U)
+    for (var t of U(r))
+      a.indexOf(t) < 0 && J.call(r, t) && (n[t] = r[t]);
   return n;
 };
-var Q = (r, a, n) => K(r, typeof a != "symbol" ? a + "" : a, n);
-import { jsx as d, jsxs as T } from "react/jsx-runtime";
-import * as S from "react";
-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 {
+var ee = (r, a, n) => Y(r, typeof a != "symbol" ? a + "" : a, n);
+import { jsx as d, jsxs as $ } from "react/jsx-runtime";
+import * as T from "react";
+import ie, { memo as B, forwardRef as O } from "react";
+import { clsx as pe } from "clsx";
+import { twMerge as ue } from "tailwind-merge";
+import { cva as me } from "class-variance-authority";
+import { X as be, AlertCircle as ge, Loader2 as xe, CheckCircle2 as ae } from "lucide-react";
+class I {
   /**
    * Create a radius token
    */
@@ -83,20 +83,20 @@ class A {
     };
   }
 }
-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")
+const ye = {
+  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")
 };
 function M(r) {
-  return ge[r].tailwind;
+  return ye[r].tailwind;
 }
-class k {
+class N {
   // 4px base
   /**
    * Create a spacing token from scale value
@@ -163,46 +163,46 @@ class k {
     }[a] || String(a);
   }
 }
-Q(k, "BASE_UNIT", 4);
-const xe = {
+ee(N, "BASE_UNIT", 4);
+const he = {
   // Micro spacing (0-14px)
-  none: k.create(0),
-  "0.5": k.create(0.5),
+  none: N.create(0),
+  "0.5": N.create(0.5),
   // 2px (half-step)
-  xs: k.create(1),
+  xs: N.create(1),
   // 4px
-  "1.5": k.create(1.5),
+  "1.5": N.create(1.5),
   // 6px (half-step)
-  sm: k.create(2),
+  sm: N.create(2),
   // 8px
-  "2.5": k.create(2.5),
+  "2.5": N.create(2.5),
   // 10px (half-step)
-  md: k.create(3),
+  md: N.create(3),
   // 12px
-  "3.5": k.create(3.5),
+  "3.5": N.create(3.5),
   // 14px (half-step)
   // Standard spacing (16-32px)
-  base: k.create(4),
+  base: N.create(4),
   // 16px
-  lg: k.create(6),
+  lg: N.create(6),
   // 24px
-  xl: k.create(8),
+  xl: N.create(8),
   // 32px
   // Large spacing (40-64px)
-  "2xl": k.create(10),
+  "2xl": N.create(10),
   // 40px
-  "3xl": k.create(12),
+  "3xl": N.create(12),
   // 48px
-  "4xl": k.create(16),
+  "4xl": N.create(16),
   // 64px
   // Extra large spacing (80px+)
-  "5xl": k.create(20),
+  "5xl": N.create(20),
   // 80px
-  "6xl": k.create(24)
+  "6xl": N.create(24)
   // 96px
 };
 function o(r, a = "p") {
-  const t = xe[r].tailwind;
+  const t = he[r].tailwind;
   return `${{
     p: "p",
     m: "m",
@@ -225,7 +225,7 @@ function o(r, a = "p") {
     "space-y": "space-y"
   }[a]}-${t}`;
 }
-class N {
+class k {
   /**
    * Create font size token
    */
@@ -295,44 +295,44 @@ class N {
     };
   }
 }
-N.createFontWeight("light"), N.createFontWeight("normal"), N.createFontWeight("medium"), N.createFontWeight("semibold"), N.createFontWeight("bold");
-const Y = {
+k.createFontWeight("light"), k.createFontWeight("normal"), k.createFontWeight("medium"), k.createFontWeight("semibold"), k.createFontWeight("bold");
+const G = {
   // Headings
-  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"),
+  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: N.create("base", "relaxed", "normal"),
-  bodySmall: N.create("sm", "relaxed", "normal"),
-  bodyLarge: N.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: N.create("sm", "normal", "medium"),
-  caption: N.create("xs", "normal", "normal"),
-  button: N.create("base", "normal", "medium")
+  label: k.create("sm", "normal", "medium"),
+  caption: k.create("xs", "normal", "normal"),
+  button: k.create("base", "normal", "medium")
 };
-function D(r) {
-  const a = Y[r];
+function V(r) {
+  const a = G[r];
   return `${a.fontSize.tailwind} ${a.lineHeight.tailwind} ${a.fontWeight.tailwind}`;
 }
-function L(r) {
-  return Y[r].fontSize.tailwind;
+function z(r) {
+  return G[r].fontSize.tailwind;
 }
 function H(r) {
-  return Y[r].fontWeight.tailwind;
+  return G[r].fontWeight.tailwind;
 }
 function l(...r) {
-  return fe(ce(r));
+  return ue(pe(r));
 }
 const j = (r, a) => {
-  const n = pe(r, a);
+  const n = me(r, a);
   return ((t) => {
-    const i = n(t);
-    return l(i);
+    const s = n(t);
+    return l(s);
   });
-}, ye = j(
+}, ve = j(
   // Base classes
   l(
     "inline-flex",
@@ -357,17 +357,17 @@ const j = (r, a) => {
         sm: l(
           o("1.5", "px"),
           o("0.5", "py"),
-          L("caption")
+          z("caption")
         ),
         md: l(
           o("sm", "px"),
           o("xs", "py"),
-          L("caption")
+          z("caption")
         ),
         lg: l(
           o("sm", "px"),
           o("xs", "py"),
-          L("bodySmall")
+          z("bodySmall")
         )
       },
       style: {
@@ -470,16 +470,16 @@ const j = (r, a) => {
       style: "solid"
     }
   }
-), he = B(
+), we = B(
   O(function(b, p) {
-    var u = b, {
+    var m = b, {
       variant: a = "neutral",
       size: n = "md",
       style: t = "solid",
-      className: i = "",
-      children: s,
+      className: s = "",
+      children: i,
       "aria-label": c
-    } = u, f = y(u, [
+    } = m, f = x(m, [
       "variant",
       "size",
       "style",
@@ -487,106 +487,106 @@ const j = (r, a) => {
       "children",
       "aria-label"
     ]);
-    const x = l(ye({ variant: a, size: n, style: t }), i);
+    const h = l(ve({ variant: a, size: n, style: t }), s);
     let g;
     if (c)
       g = c;
-    else if (typeof s == "string")
-      g = s;
-    else if (typeof s == "object" && s !== null && "props" in s) {
-      const h = s.props;
-      h != null && h.children && typeof h.children == "string" && (g = h.children);
+    else if (typeof i == "string")
+      g = i;
+    else if (typeof i == "object" && i !== null && "props" in i) {
+      const v = i.props;
+      v != null && v.children && typeof v.children == "string" && (g = v.children);
     }
     return /* @__PURE__ */ d(
       "span",
-      v(m({
+      y(u({
         ref: p,
         role: "status",
         "aria-label": g,
-        className: x
+        className: h
       }, f), {
-        children: s
+        children: i
       })
     );
   })
 );
-he.displayName = "Badge";
-function ee(r, a) {
+we.displayName = "Badge";
+function te(r, a) {
   if (typeof r == "function")
     return r(a);
   r != null && (r.current = a);
 }
-function we(...r) {
+function Ne(...r) {
   return (a) => {
     let n = !1;
-    const t = r.map((i) => {
-      const s = ee(i, a);
-      return !n && typeof s == "function" && (n = !0), s;
+    const t = r.map((s) => {
+      const i = te(s, a);
+      return !n && typeof i == "function" && (n = !0), i;
     });
     if (n)
       return () => {
-        for (let i = 0; i < t.length; i++) {
-          const s = t[i];
-          typeof s == "function" ? s() : ee(r[i], null);
+        for (let s = 0; s < t.length; s++) {
+          const i = t[s];
+          typeof i == "function" ? i() : te(r[s], null);
         }
       };
   };
 }
-var ve = /* @__PURE__ */ Symbol.for("react.lazy"), U = S[" use ".trim().toString()];
-function ke(r) {
+var ke = /* @__PURE__ */ Symbol.for("react.lazy"), K = T[" use ".trim().toString()];
+function $e(r) {
   return typeof r == "object" && r !== null && "then" in r;
 }
-function ie(r) {
-  return r != null && typeof r == "object" && "$$typeof" in r && r.$$typeof === ve && "_payload" in r && ke(r._payload);
+function le(r) {
+  return r != null && typeof r == "object" && "$$typeof" in r && r.$$typeof === ke && "_payload" in r && $e(r._payload);
 }
 // @__NO_SIDE_EFFECTS__
-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);
+function Se(r) {
+  const a = /* @__PURE__ */ Ce(r), n = T.forwardRef((t, s) => {
+    let b = t, { children: i } = b, c = x(b, ["children"]);
+    le(i) && typeof K == "function" && (i = K(i._payload));
+    const f = T.Children.toArray(i), p = f.find(ze);
     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 }));
+      const m = p.props.children, h = f.map((g) => g === p ? T.Children.count(m) > 1 ? T.Children.only(null) : T.isValidElement(m) ? m.props.children : null : g);
+      return /* @__PURE__ */ d(a, y(u({}, c), { ref: s, children: T.isValidElement(m) ? T.cloneElement(m, void 0, h) : null }));
     }
-    return /* @__PURE__ */ d(a, v(m({}, c), { ref: i, children: s }));
+    return /* @__PURE__ */ d(a, y(u({}, c), { ref: s, children: i }));
   });
   return n.displayName = `${r}.Slot`, n;
 }
-var $e = /* @__PURE__ */ Ne("Slot");
+var Te = /* @__PURE__ */ Se("Slot");
 // @__NO_SIDE_EFFECTS__
-function Se(r) {
-  const a = S.forwardRef((n, t) => {
-    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);
+function Ce(r) {
+  const a = T.forwardRef((n, t) => {
+    let c = n, { children: s } = c, i = x(c, ["children"]);
+    if (le(s) && typeof K == "function" && (s = K(s._payload)), T.isValidElement(s)) {
+      const f = Fe(s), p = Le(i, s.props);
+      return s.type !== T.Fragment && (p.ref = t ? Ne(t, f) : f), T.cloneElement(s, p);
     }
-    return S.Children.count(i) > 1 ? S.Children.only(null) : null;
+    return T.Children.count(s) > 1 ? T.Children.only(null) : null;
   });
   return a.displayName = `${r}.SlotClone`, a;
 }
-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;
+var Me = /* @__PURE__ */ Symbol("radix.slottable");
+function ze(r) {
+  return T.isValidElement(r) && typeof r.type == "function" && "__radixId" in r.type && r.type.__radixId === Me;
 }
-function Me(r, a) {
-  const n = m({}, a);
+function Le(r, a) {
+  const n = u({}, a);
   for (const t in a) {
-    const i = r[t], s = a[t];
-    /^on[A-Z]/.test(t) ? i && s ? n[t] = (...f) => {
-      const p = s(...f);
-      return i(...f), p;
-    } : i && (n[t] = i) : t === "style" ? n[t] = m(m({}, i), s) : t === "className" && (n[t] = [i, s].filter(Boolean).join(" "));
+    const s = r[t], i = a[t];
+    /^on[A-Z]/.test(t) ? s && i ? n[t] = (...f) => {
+      const p = i(...f);
+      return s(...f), p;
+    } : s && (n[t] = s) : t === "style" ? n[t] = u(u({}, s), i) : t === "className" && (n[t] = [s, i].filter(Boolean).join(" "));
   }
-  return m(m({}, r), n);
+  return u(u({}, r), n);
 }
-function Le(r) {
-  var t, i;
+function Fe(r) {
+  var t, s;
   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);
+  return n ? r.ref : (a = (s = Object.getOwnPropertyDescriptor(r, "ref")) == null ? void 0 : s.get, n = a && "isReactWarning" in a && a.isReactWarning, n ? r.props.ref : r.props.ref || r.ref);
 }
-const ae = j(
+const re = j(
   // Base classes
   l(
     "inline-flex",
@@ -621,17 +621,17 @@ const ae = j(
         sm: l(
           o("xs", "px"),
           o("xs", "py"),
-          L("caption")
+          z("caption")
         ),
         md: l(
           o("sm", "px"),
           o("xs", "py"),
-          L("bodySmall")
+          z("bodySmall")
         ),
         lg: l(
           o("md", "px"),
           o("sm", "py"),
-          L("body")
+          z("body")
         )
       },
       selected: {
@@ -675,18 +675,18 @@ const ae = j(
       disabled: !1
     }
   }
-), ze = O(function(a, n) {
+), Ee = O(function(a, n) {
   const {
     children: t,
-    variant: i = "default",
-    size: s = "md",
+    variant: s = "default",
+    size: i = "md",
     selected: c = !1,
     disabled: f = !1,
     className: p = "",
     "aria-label": b,
-    tabIndex: u,
-    asChild: x = !1
-  } = a, h = (() => {
+    tabIndex: m,
+    asChild: h = !1
+  } = a, v = (() => {
     if (b) return b;
     if (typeof t == "string") return t;
     if (typeof t == "object" && t !== null && "props" in t) {
@@ -695,45 +695,45 @@ const ae = j(
         return F.children;
     }
   })();
-  if (x)
+  if (h)
     return /* @__PURE__ */ d(
-      $e,
+      Te,
       {
         ref: n,
         className: l(
-          ae({ variant: i, size: s, selected: c, disabled: f }),
+          re({ variant: s, size: i, selected: c, disabled: f }),
           p
         ),
         "aria-label": b,
         "aria-disabled": f || void 0,
-        tabIndex: u,
+        tabIndex: m,
         children: t
       }
     );
-  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());
+  const { onRemove: C, onClick: L } = a, X = L !== void 0, q = X && !f, R = (F) => {
+    f || (F.key === "Enter" || F.key === " ") && (F.preventDefault(), L == null || L());
   };
-  return /* @__PURE__ */ T(
+  return /* @__PURE__ */ $(
     "div",
     {
       ref: n,
       className: l(
-        ae({ variant: i, size: s, selected: c, disabled: f }),
+        re({ variant: s, size: i, selected: c, disabled: f }),
         C && o("xs", "pr"),
         p
       ),
       "aria-disabled": f,
       children: [
-        q ? /* @__PURE__ */ d(
+        X ? /* @__PURE__ */ d(
           "button",
           {
             type: "button",
-            onClick: f ? void 0 : z,
-            onKeyDown: se,
+            onClick: f ? void 0 : L,
+            onKeyDown: R,
             disabled: f,
             "aria-pressed": c ? !0 : void 0,
-            "aria-label": b || h,
-            tabIndex: u !== void 0 ? u : R ? 0 : void 0,
+            "aria-label": b || v,
+            tabIndex: m !== void 0 ? m : q ? 0 : void 0,
             className: l(
               "flex-1",
               "bg-transparent",
@@ -769,72 +769,72 @@ const ae = j(
               "focus:ring-line-focus",
               "focus:ring-offset-1"
             ),
-            "aria-label": `Remove ${h || "chip"}`,
-            children: /* @__PURE__ */ d(ue, { className: "h-3 w-3", "aria-hidden": "true" })
+            "aria-label": `Remove ${v || "chip"}`,
+            children: /* @__PURE__ */ d(be, { className: "h-3 w-3", "aria-hidden": "true" })
           }
         )
       ]
     }
   );
 });
-ze.displayName = "Chip";
-function la(i) {
-  var s = i, {
+Ee.displayName = "Chip";
+function ma(s) {
+  var i = s, {
     message: r,
     id: a,
     className: n = ""
-  } = s, t = y(s, [
+  } = i, t = x(i, [
     "message",
     "id",
     "className"
   ]);
   const c = [
     o("xs", "mt"),
-    L("bodySmall"),
+    z("bodySmall"),
     "text-fg-error",
     "flex",
     "items-center",
     o("xs", "gap")
   ], f = l(...c, n);
-  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" }),
+  return /* @__PURE__ */ $("div", y(u({ role: "alert", id: a, className: f, "aria-live": "polite" }, t), { children: [
+    /* @__PURE__ */ d(ge, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
     /* @__PURE__ */ d("span", { children: r })
   ] }));
 }
-function oa(t) {
-  var i = t, {
+function ba(t) {
+  var s = t, {
     variant: r = "info",
     className: a
-  } = i, n = y(i, [
+  } = s, n = x(s, [
     "variant",
     "className"
   ]);
-  const s = {
+  const i = {
     warning: l("bg-warning-bg", "text-warning-dark", "border-warning"),
     error: l("bg-error-bg", "text-error-dark", "border-error"),
     info: l("bg-info-bg", "text-info-dark", "border-info")
   };
   return /* @__PURE__ */ d(
     "div",
-    m({
+    u({
       role: "alert",
       className: l(
         "border",
         o("base", "px"),
         o("sm", "py"),
         M("lg"),
-        s[r],
+        i[r],
         a
       )
     }, n)
   );
 }
-const Fe = l(
+const Ae = l(
   "block",
-  L("label"),
+  z("label"),
   H("label"),
   "text-fg-primary"
-), Ee = {
+), Ie = {
   default: "",
   required: l(
     "after:content-['*']",
@@ -847,49 +847,49 @@ const Fe = l(
     "after:text-fg-tertiary",
     "after:font-normal"
   )
-}, Ie = B(
-  O(function(c, s) {
-    var f = c, { variant: a = "default", className: n = "", children: t } = f, i = y(f, ["variant", "className", "children"]);
+}, De = B(
+  O(function(c, i) {
+    var f = c, { variant: a = "default", className: n = "", children: t } = f, s = x(f, ["variant", "className", "children"]);
     const p = l(
-      Fe,
-      Ee[a],
+      Ae,
+      Ie[a],
       n
     );
-    return /* @__PURE__ */ d("label", v(m({ ref: s, className: p }, i), { children: t }));
+    return /* @__PURE__ */ d("label", y(u({ ref: i, className: p }, s), { children: t }));
   })
 );
-Ie.displayName = "Label";
+De.displayName = "Label";
 function w(r, a, n) {
-  const t = Ae(r), i = We(r);
+  const t = Ve(r), s = We(r);
   return {
     hex: r,
     rgb: t,
-    hsl: i,
+    hsl: s,
     cssVar: `var(--color-${a}-${n})`,
     tailwind: `${a}-${n}`
   };
 }
-function Ae(r) {
+function Ve(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 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);
+  const n = parseInt(a[1], 16) / 255, t = parseInt(a[2], 16) / 255, s = parseInt(a[3], 16) / 255, i = Math.max(n, t, s), c = Math.min(n, t, s);
   let f = 0, p = 0;
-  const b = (s + c) / 2;
-  if (s !== c) {
-    const u = s - c;
-    switch (p = b > 0.5 ? u / (2 - s - c) : u / (s + c), s) {
+  const b = (i + c) / 2;
+  if (i !== c) {
+    const m = i - c;
+    switch (p = b > 0.5 ? m / (2 - i - c) : m / (i + c), i) {
       case n:
-        f = ((t - i) / u + (t < i ? 6 : 0)) / 6;
+        f = ((t - s) / m + (t < s ? 6 : 0)) / 6;
         break;
       case t:
-        f = ((i - n) / u + 2) / 6;
+        f = ((s - n) / m + 2) / 6;
         break;
-      case i:
-        f = ((n - t) / u + 4) / 6;
+      case s:
+        f = ((n - t) / m + 4) / 6;
         break;
     }
   }
@@ -898,36 +898,36 @@ function We(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 = De(r), i = Ve(r);
+  const t = je(r), s = Re(r);
   return {
     hex: r,
     rgb: t,
-    hsl: i,
+    hsl: s,
     cssVar: `var(--color-${a}-${n})`,
     tailwind: `${a}-${n}`
   };
 }
-function De(r) {
+function je(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 Ve(r) {
+function Re(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);
+  const n = parseInt(a[1], 16) / 255, t = parseInt(a[2], 16) / 255, s = parseInt(a[3], 16) / 255, i = Math.max(n, t, s), c = Math.min(n, t, s);
   let f = 0, p = 0;
-  const b = (s + c) / 2;
-  if (s !== c) {
-    const u = s - c;
-    switch (p = b > 0.5 ? u / (2 - s - c) : u / (s + c), s) {
+  const b = (i + c) / 2;
+  if (i !== c) {
+    const m = i - c;
+    switch (p = b > 0.5 ? m / (2 - i - c) : m / (i + c), i) {
       case n:
-        f = ((t - i) / u + (t < i ? 6 : 0)) / 6;
+        f = ((t - s) / m + (t < s ? 6 : 0)) / 6;
         break;
       case t:
-        f = ((i - n) / u + 2) / 6;
+        f = ((s - n) / m + 2) / 6;
         break;
-      case i:
-        f = ((n - t) / u + 4) / 6;
+      case s:
+        f = ((n - t) / m + 4) / 6;
         break;
     }
   }
@@ -952,7 +952,7 @@ e("#fdf2f8", "pink", 50), e("#fce7f3", "pink", 100), e("#fbcfe8", "pink", 200),
 e("#faf5ff", "purple", 50), e("#f3e8ff", "purple", 100), e("#e9d5ff", "purple", 200), e("#d8b4fe", "purple", 300), e("#c084fc", "purple", 400), e("#a855f7", "purple", 500), e("#9333ea", "purple", 600), e("#7e22ce", "purple", 700), e("#6b21a8", "purple", 800), e("#581c87", "purple", 900), e("#3b0764", "purple", 950);
 e("#f0fdfa", "teal", 50), e("#ccfbf1", "teal", 100), e("#99f6e4", "teal", 200), e("#5eead4", "teal", 300), e("#2dd4bf", "teal", 400), e("#14b8a6", "teal", 500), e("#0d9488", "teal", 600), e("#0f766e", "teal", 700), e("#115e59", "teal", 800), e("#134e4a", "teal", 900), e("#042f2e", "teal", 950);
 e("#f7fee7", "lime", 50), e("#ecfccb", "lime", 100), e("#d9f99d", "lime", 200), e("#bef264", "lime", 300), e("#a3e635", "lime", 400), e("#84cc16", "lime", 500), e("#65a30d", "lime", 600), e("#4d7c0f", "lime", 700), e("#3f6212", "lime", 800), e("#365314", "lime", 900), e("#1a2e05", "lime", 950);
-class V {
+class W {
   /**
    * Create a shadow token
    */
@@ -996,17 +996,17 @@ class V {
     }[a];
   }
 }
-const je = {
-  none: V.create("none"),
-  sm: V.create("sm"),
-  md: V.create("md"),
-  lg: V.create("lg"),
-  xl: V.create("xl"),
-  "2xl": V.create("2xl"),
-  inner: V.create("inner")
+const _e = {
+  none: W.create("none"),
+  sm: W.create("sm"),
+  md: W.create("md"),
+  lg: W.create("lg"),
+  xl: W.create("xl"),
+  "2xl": W.create("2xl"),
+  inner: W.create("inner")
 };
-function X(r) {
-  return je[r].tailwind;
+function Z(r) {
+  return _e[r].tailwind;
 }
 class E {
   /**
@@ -1075,7 +1075,7 @@ class _ {
   }
 }
 _.create("sm"), _.create("md"), _.create("lg"), _.create("xl"), _.create("2xl");
-class W {
+class D {
   /**
    * Create an animation token
    */
@@ -1101,7 +1101,7 @@ class W {
         ms: 500,
         tailwind: "duration-500"
       }
-    }, i = {
+    }, s = {
       "ease-in": {
         value: "cubic-bezier(0.4, 0, 1, 1)",
         tailwind: "ease-in",
@@ -1125,30 +1125,30 @@ class W {
     };
     return {
       duration: t[a],
-      easing: i[n]
+      easing: s[n]
     };
   }
   /**
    * Create a transition token
    */
   static createTransition(a, n = "base", t = "ease-in-out") {
-    const i = this.create(n, t), s = Array.isArray(a) ? a.join(", ") : a, c = [
-      i.duration.tailwind,
-      i.easing.tailwind
+    const s = this.create(n, t), i = Array.isArray(a) ? a.join(", ") : a, c = [
+      s.duration.tailwind,
+      s.easing.tailwind
     ].join(" ");
     return {
-      property: s,
-      duration: i.duration.value,
-      timingFunction: i.easing.value,
+      property: i,
+      duration: s.duration.value,
+      timingFunction: s.easing.value,
       tailwind: c
     };
   }
 }
-W.create("fast"), W.create("base"), W.create("slow"), W.create("slower"), W.createTransition(
+D.create("fast"), D.create("base"), D.create("slow"), D.create("slower"), D.createTransition(
   ["color", "background-color", "border-color"],
   "base"
-), W.createTransition("opacity", "fast"), W.createTransition("transform", "base"), W.createTransition("all", "base");
-class I {
+), D.createTransition("opacity", "fast"), D.createTransition("transform", "base"), D.createTransition("all", "base");
+class A {
   /**
    * Create a z-index token
    */
@@ -1202,8 +1202,8 @@ class I {
     }[a];
   }
 }
-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 $ {
+A.create("base"), A.create("dropdown"), A.create("sticky"), A.create("fixed"), A.create("modal-backdrop"), A.create("modal"), A.create("popover"), A.create("tooltip"), A.create("toast");
+class S {
   /**
    * Create an opacity token
    */
@@ -1249,8 +1249,8 @@ class $ {
     };
   }
 }
-$.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", {
+S.create(0), S.create(5), S.create(10), S.create(20), S.create(25), S.create(30), S.create(40), S.create(50), S.create(60), S.create(70), S.create(75), S.create(80), S.create(90), S.create(95), S.create(100);
+const He = j("w-full", {
   variants: {
     size: {
       sm: "h-1",
@@ -1270,7 +1270,7 @@ const Re = j("w-full", {
     size: "md",
     variant: "primary"
   }
-}), te = j("transition-all", {
+}), ne = j("transition-all", {
   variants: {
     variant: {
       primary: "bg-surface-brand",
@@ -1284,17 +1284,17 @@ const Re = j("w-full", {
   defaultVariants: {
     variant: "primary"
   }
-}), _e = O(function(x, u) {
-  var g = x, {
+}), Be = O(function(h, m) {
+  var g = h, {
     value: a,
     max: n = 100,
     variant: t = "primary",
-    size: i = "md",
-    showLabel: s = !1,
+    size: s = "md",
+    showLabel: i = !1,
     label: c,
     "aria-label": f,
     className: p = ""
-  } = g, b = y(g, [
+  } = g, b = x(g, [
     "value",
     "max",
     "variant",
@@ -1304,9 +1304,9 @@ const Re = j("w-full", {
     "aria-label",
     "className"
   ]);
-  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(
+  const v = a === void 0, C = v ? void 0 : Math.min(Math.max(a / n * 100, 0), 100), L = f || (v ? "Loading in progress" : `Progress: ${C == null ? void 0 : C.toFixed(0)}%`);
+  return /* @__PURE__ */ $("div", y(u({ ref: m, className: l("w-full", p) }, b), { children: [
+    i && (c || !v) && /* @__PURE__ */ $(
       "div",
       {
         className: l(
@@ -1320,18 +1320,18 @@ const Re = j("w-full", {
             "span",
             {
               className: l(
-                L("bodySmall"),
+                z("bodySmall"),
                 H("label"),
                 "text-fg-primary"
               ),
               children: c
             }
           ),
-          !h && C !== void 0 && /* @__PURE__ */ T(
+          !v && C !== void 0 && /* @__PURE__ */ $(
             "span",
             {
               className: l(
-                L("bodySmall"),
+                z("bodySmall"),
                 "text-fg-secondary"
               ),
               children: [
@@ -1347,19 +1347,19 @@ const Re = j("w-full", {
       "div",
       {
         role: "progressbar",
-        "aria-valuemin": h ? void 0 : 0,
-        "aria-valuemax": h ? void 0 : n,
-        "aria-valuenow": h ? void 0 : a,
-        "aria-label": z,
-        "aria-busy": h,
+        "aria-valuemin": v ? void 0 : 0,
+        "aria-valuemax": v ? void 0 : n,
+        "aria-valuenow": v ? void 0 : a,
+        "aria-label": L,
+        "aria-busy": v,
         className: l(
           "relative",
           "w-full",
           "overflow-hidden",
-          Re({ size: i, variant: t }),
+          He({ size: s, variant: t }),
           M("full")
         ),
-        children: h ? /* @__PURE__ */ d(
+        children: v ? /* @__PURE__ */ d(
           "div",
           {
             className: l(
@@ -1367,7 +1367,7 @@ const Re = j("w-full", {
               "top-0",
               "left-0",
               "bottom-0",
-              te({ variant: t }),
+              ne({ variant: t }),
               M("full"),
               "motion-reduce:animate-none"
             ),
@@ -1381,7 +1381,7 @@ const Re = j("w-full", {
           {
             className: l(
               "h-full",
-              te({ variant: t }),
+              ne({ variant: t }),
               M("full"),
               "transition-all",
               "duration-300",
@@ -1397,20 +1397,20 @@ const Re = j("w-full", {
     )
   ] }));
 });
-_e.displayName = "Progress";
-const He = {
+Be.displayName = "Progress";
+const Oe = {
   horizontal: "w-full border-t",
   vertical: "h-full border-l self-stretch"
-}, Be = {
+}, Pe = {
   solid: "border-solid",
   dashed: "border-dashed",
   dotted: "border-dotted"
-}, Oe = B(function(s) {
-  var c = s, {
+}, qe = B(function(i) {
+  var c = i, {
     orientation: a = "horizontal",
     variant: n = "solid",
     className: t = ""
-  } = c, i = y(c, [
+  } = c, s = x(c, [
     "orientation",
     "variant",
     "className"
@@ -1418,36 +1418,36 @@ const He = {
   const f = l(
     "border-0",
     "border-line-default",
-    He[a],
-    Be[n],
+    Oe[a],
+    Pe[n],
     t
   );
   return a === "vertical" ? /* @__PURE__ */ d(
     "div",
-    m({
+    u({
       className: f,
       role: "separator",
       "aria-orientation": "vertical"
-    }, i)
+    }, s)
   ) : /* @__PURE__ */ d(
     "hr",
-    m({
+    u({
       className: f,
       role: "separator",
       "aria-orientation": "horizontal"
-    }, i)
+    }, s)
   );
 });
-Oe.displayName = "Separator";
-function da(f) {
+qe.displayName = "Separator";
+function ga(f) {
   var p = f, {
     variant: r = "text",
     width: a,
     height: n,
     lines: t = 1,
-    className: i = "",
-    "aria-label": s
-  } = p, c = y(p, [
+    className: s = "",
+    "aria-label": i
+  } = p, c = x(p, [
     "variant",
     "width",
     "height",
@@ -1459,44 +1459,44 @@ function da(f) {
     "motion-safe:animate-pulse",
     "bg-surface-muted",
     M("sm")
-  ], u = {
+  ], m = {
     text: "h-4",
     card: "h-32",
     list: "h-12",
     circle: M("full")
-  }, x = l(...b, u[r], i), g = {};
+  }, h = l(...b, m[r], s), g = {};
   a && (g.width = a), n && (g.height = n);
-  const h = s || `Loading ${r} content`;
+  const v = i || `Loading ${r} content`;
   return r === "text" && t > 1 ? /* @__PURE__ */ d(
     "div",
-    v(m({
+    y(u({
       className: o("sm", "space-y"),
       role: "status",
       "aria-busy": "true",
-      "aria-label": h
+      "aria-label": v
     }, c), {
-      children: Array.from({ length: t }).map((C, z) => /* @__PURE__ */ d(
+      children: Array.from({ length: t }).map((C, L) => /* @__PURE__ */ d(
         "div",
         {
-          className: x,
-          style: z === t - 1 ? { width: "75%" } : g,
+          className: h,
+          style: L === t - 1 ? { width: "75%" } : g,
           "aria-hidden": "true"
         },
-        z
+        L
       ))
     })
   ) : /* @__PURE__ */ d(
     "div",
-    m({
-      className: x,
+    u({
+      className: h,
       style: g,
       role: "status",
       "aria-busy": "true",
-      "aria-label": h
+      "aria-label": v
     }, c)
   );
 }
-const Pe = j("motion-safe:animate-spin", {
+const Ue = j("motion-safe:animate-spin", {
   variants: {
     size: {
       sm: "h-4 w-4",
@@ -1513,31 +1513,31 @@ const Pe = j("motion-safe:animate-spin", {
     size: "md",
     variant: "primary"
   }
-}), Ue = B(function(c) {
+}), Ke = B(function(c) {
   var f = c, {
     size: a = "md",
     variant: n = "primary",
     label: t,
-    className: i = ""
-  } = f, s = y(f, [
+    className: s = ""
+  } = f, i = x(f, [
     "size",
     "variant",
     "label",
     "className"
   ]);
-  return /* @__PURE__ */ T(
+  return /* @__PURE__ */ $(
     "div",
-    v(m({
-      className: l("inline-flex", "items-center", i),
+    y(u({
+      className: l("inline-flex", "items-center", s),
       role: "status",
       "aria-label": t || "Loading",
       "aria-live": "polite"
-    }, s), {
+    }, i), {
       children: [
         /* @__PURE__ */ d(
-          be,
+          xe,
           {
-            className: l(Pe({ size: a, variant: n })),
+            className: l(Ue({ size: a, variant: n })),
             "aria-hidden": "true"
           }
         ),
@@ -1546,7 +1546,7 @@ const Pe = j("motion-safe:animate-spin", {
           {
             className: l(
               o("sm", "ml"),
-              L("bodySmall"),
+              z("bodySmall"),
               "text-fg-secondary",
               "sr-only"
             ),
@@ -1557,8 +1557,8 @@ const Pe = j("motion-safe:animate-spin", {
     })
   );
 });
-Ue.displayName = "Spinner";
-const qe = {
+Ke.displayName = "Spinner";
+const Xe = {
   primary: {
     // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
     light: "text-indigo-400",
@@ -1610,16 +1610,16 @@ const qe = {
     contrast: "text-fg-inverse"
   }
 };
-function Ke(b, p) {
-  var u = b, {
+function Ye(b, p) {
+  var m = b, {
     variant: r = "paragraph",
     bold: a,
     italic: n,
     className: t,
-    as: i,
-    colorRole: s = "neutral",
+    as: s,
+    colorRole: i = "neutral",
     colorShade: c = "dark"
-  } = u, f = y(u, [
+  } = m, f = x(m, [
     "variant",
     "bold",
     "italic",
@@ -1628,10 +1628,10 @@ function Ke(b, p) {
     "colorRole",
     "colorShade"
   ]);
-  const x = [];
+  const h = [];
   let g;
-  if (i)
-    g = i;
+  if (s)
+    g = s;
   else
     switch (r) {
       case "heading":
@@ -1644,25 +1644,25 @@ function Ke(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(qe[s][c]), /* @__PURE__ */ d(g, m({ ref: p, className: l(...x, t) }, f));
+  return r === "heading" ? h.push(V("h2")) : r === "body" || r === "paragraph" ? h.push(V("body")) : r === "bodySmall" ? h.push(V("bodySmall")) : r === "bodyLarge" ? h.push(V("bodyLarge")) : r === "caption" ? h.push(V("caption")) : r === "label" ? h.push(V("label")) : h.push(V("body")), a && h.push("font-bold"), n && h.push("italic"), h.push(Xe[i][c]), /* @__PURE__ */ d(g, u({ ref: p, className: l(...h, t) }, f));
 }
-const re = O(Ke), Xe = {
+const se = O(Ye), Ze = {
   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"
-}, Ye = ne.forwardRef(
+}, Ge = ie.forwardRef(
   (p, f) => {
     var b = p, {
       className: r,
       maxWidth: a = "lg",
       paddingX: n = "base",
       paddingY: t = "base",
-      center: i = !0,
-      children: s
-    } = b, c = y(b, [
+      center: s = !0,
+      children: i
+    } = b, c = x(b, [
       "className",
       "maxWidth",
       "paddingX",
@@ -1672,33 +1672,33 @@ const re = O(Ke), Xe = {
     ]);
     return /* @__PURE__ */ d(
       "div",
-      v(m({
+      y(u({
         ref: f,
         className: l(
           "w-full",
-          Xe[a],
+          Ze[a],
           o(n, "px"),
           o(t, "py"),
-          i && "mx-auto",
+          s && "mx-auto",
           r
         )
       }, c), {
-        children: s
+        children: i
       })
     );
   }
 );
-Ye.displayName = "Container";
-const Ze = ne.forwardRef(
+Ge.displayName = "Container";
+const Qe = ie.forwardRef(
   (p, f) => {
     var b = p, {
       className: r,
       spacing: a = "base",
       align: n = "stretch",
       justify: t = "start",
-      direction: i = "column",
-      children: s
-    } = b, c = y(b, [
+      direction: s = "column",
+      children: i
+    } = b, c = x(b, [
       "className",
       "spacing",
       "align",
@@ -1706,7 +1706,7 @@ const Ze = ne.forwardRef(
       "direction",
       "children"
     ]);
-    const u = i === "column" ? o(a, "gap-y") : o(a, "gap-x"), x = {
+    const m = s === "column" ? o(a, "gap-y") : o(a, "gap-x"), h = {
       start: "items-start",
       center: "items-center",
       end: "items-end",
@@ -1721,29 +1721,29 @@ const Ze = ne.forwardRef(
     };
     return /* @__PURE__ */ d(
       "div",
-      v(m({
+      y(u({
         ref: f,
         className: l(
           "flex",
-          i === "column" ? "flex-col" : "flex-row",
-          u,
-          x[n],
+          s === "column" ? "flex-col" : "flex-row",
+          m,
+          h[n],
           g[t],
           r
         )
       }, c), {
-        children: s
+        children: i
       })
     );
   }
 );
-Ze.displayName = "Stack";
-function Ge(i) {
-  var s = i, {
+Qe.displayName = "Stack";
+function Je(s) {
+  var i = s, {
     items: r,
     separator: a = "/",
     className: n = ""
-  } = s, t = y(s, [
+  } = i, t = x(i, [
     "items",
     "separator",
     "className"
@@ -1752,15 +1752,15 @@ function Ge(i) {
     "flex",
     "items-center",
     o("sm", "space-x"),
-    L("bodySmall")
+    z("bodySmall")
   ], f = l(...c, n);
-  return /* @__PURE__ */ d("nav", v(m({ "aria-label": "Breadcrumb", className: f }, t), { children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ d("nav", y(u({ "aria-label": "Breadcrumb", className: f }, t), { children: /* @__PURE__ */ d(
     "ol",
     {
       className: l("flex", "items-center", o("sm", "space-x")),
       children: r.map((p, b) => {
-        const u = b === r.length - 1;
-        return /* @__PURE__ */ T("li", { className: "flex items-center", children: [
+        const m = b === r.length - 1;
+        return /* @__PURE__ */ $("li", { className: "flex items-center", children: [
           b > 0 && /* @__PURE__ */ d(
             "span",
             {
@@ -1772,7 +1772,7 @@ function Ge(i) {
               children: a
             }
           ),
-          u ? /* @__PURE__ */ d(
+          m ? /* @__PURE__ */ d(
             "span",
             {
               className: l(
@@ -1793,7 +1793,7 @@ function Ge(i) {
                 o("xs", "pt"),
                 "border-b-2",
                 "border-transparent",
-                L("bodySmall"),
+                z("bodySmall"),
                 H("label"),
                 "transition-colors",
                 "text-fg-secondary",
@@ -1808,42 +1808,133 @@ function Ge(i) {
     }
   ) }));
 }
-const Qe = B(function(b) {
-  var u = b, {
-    variant: a = "default",
-    padding: n = "medium",
-    className: t = "",
-    onClick: i,
+function ea(t) {
+  var s = t, { children: r, className: a } = s, n = x(s, ["children", "className"]);
+  return /* @__PURE__ */ d(
+    "div",
+    y(u({
+      className: l(
+        "grid items-start",
+        o("1.5", "gap"),
+        o("base", "mb"),
+        "[&:has([data-card-actions])]:grid-cols-[1fr_auto]",
+        "[&:has([data-card-actions])>[data-card-actions]]:row-span-full",
+        a
+      )
+    }, n), {
+      children: r
+    })
+  );
+}
+function aa(c) {
+  var f = c, {
+    children: r,
+    icon: a,
+    badge: n,
+    as: t = "h2",
+    className: s
+  } = f, i = x(f, [
+    "children",
+    "icon",
+    "badge",
+    "as",
+    "className"
+  ]);
+  return /* @__PURE__ */ $(
+    t,
+    y(u({
+      className: l(
+        "text-base font-semibold text-fg-primary",
+        "flex items-center",
+        o("sm", "gap"),
+        s
+      )
+    }, i), {
+      children: [
+        a ? /* @__PURE__ */ d("span", { className: "shrink-0 inline-flex", children: a }) : null,
+        /* @__PURE__ */ d("span", { children: r }),
+        n ? /* @__PURE__ */ d("span", { className: "inline-flex", children: n }) : null
+      ]
+    })
+  );
+}
+function ta(t) {
+  var s = t, {
+    children: r,
+    className: a
+  } = s, n = x(s, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ d("p", y(u({ className: l("text-sm text-fg-secondary", a) }, n), { children: r }));
+}
+function ra(t) {
+  var s = t, {
+    children: r,
+    className: a
+  } = s, n = x(s, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ d(
+    "div",
+    y(u({
+      "data-card-actions": "",
+      className: l(
+        "flex items-center self-start",
+        o("sm", "gap"),
+        a
+      )
+    }, n), {
+      children: r
+    })
+  );
+}
+function na(t) {
+  var s = t, { children: r, className: a } = s, n = x(s, ["children", "className"]);
+  return /* @__PURE__ */ d("div", y(u({ className: l(a) }, n), { children: r }));
+}
+function sa(b) {
+  var m = b, {
+    variant: r = "default",
+    padding: a = "medium",
+    className: n = "",
+    onClick: t,
     "aria-label": s,
-    "aria-labelledby": c,
+    "aria-labelledby": i,
+    asSection: c = !1,
     children: f
-  } = u, p = y(u, [
+  } = m, p = x(m, [
     "variant",
     "padding",
     "className",
     "onClick",
     "aria-label",
     "aria-labelledby",
+    "asSection",
     "children"
   ]);
-  const x = j(
+  typeof process != "undefined" && process.env.NODE_ENV !== "production" && c && !s && !i && 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 h = j(
     l(
       "bg-surface-base",
       M("lg"),
       "border",
       "border-line-default",
-      X("sm")
+      Z("sm")
     ),
     {
       variants: {
         variant: {
           default: "",
           hover: l(
-            `hover:${X("md")}`,
+            `hover:${Z("md")}`,
             "transition-shadow",
             "cursor-pointer"
           ),
-          selected: l("border-line-brand", X("md"))
+          selected: l("border-line-brand", Z("md"))
         },
         padding: {
           none: "",
@@ -1857,70 +1948,72 @@ const Qe = B(function(b) {
         padding: "medium"
       }
     }
-  ), 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: h,
-      tabIndex: C,
-      onClick: i,
-      onKeyDown: g ? (R) => {
-        g && (R.key === "Enter" || R.key === " ") && (R.preventDefault(), i == null || i());
-      } : void 0,
-      "aria-label": s,
-      "aria-labelledby": c
-    }, p), {
-      children: f
-    })
-  );
-});
-Qe.displayName = "Card";
-function ca(t) {
-  var i = t, {
+  ), g = t !== void 0, v = g ? "button" : void 0, C = g ? 0 : void 0, L = l(h({ variant: r, padding: a }), n), q = u({
+    className: L,
+    role: v,
+    tabIndex: C,
+    onClick: t,
+    onKeyDown: g ? (R) => {
+      g && (R.key === "Enter" || R.key === " ") && (R.preventDefault(), t == null || t());
+    } : void 0,
+    "aria-label": s,
+    "aria-labelledby": i
+  }, p);
+  return c ? /* @__PURE__ */ d("section", y(u({}, q), { children: f })) : /* @__PURE__ */ d("div", y(u({}, q), { children: f }));
+}
+const oe = B(sa);
+oe.displayName = "Card";
+const P = oe;
+P.Header = ea;
+P.Title = aa;
+P.Subtitle = ta;
+P.Actions = ra;
+P.Body = na;
+function xa(t) {
+  var s = t, {
     children: r,
     className: a = ""
-  } = i, n = y(i, [
+  } = s, n = x(s, [
     "children",
     "className"
   ]);
   return /* @__PURE__ */ d(
     "div",
-    v(m({
+    y(u({
       className: `flex flex-col ${o("1.5", "space-y")} ${o("lg", "p")} ${o("base", "pb")} ${a}`
     }, n), {
       children: r
     })
   );
 }
-function fa(t) {
-  var i = t, {
+function ya(t) {
+  var s = t, {
     children: r,
     className: a = ""
-  } = i, n = y(i, [
+  } = s, n = x(s, [
     "children",
     "className"
   ]);
   return /* @__PURE__ */ d(
     "div",
-    v(m({
+    y(u({
       className: `flex flex-col-reverse sm:flex-row sm:justify-end sm:${o("sm", "space-x")} ${o("lg", "p")} ${o("base", "pt")} ${a}`
     }, n), {
       children: r
     })
   );
 }
-function pa(t) {
-  var i = t, {
+function ha(t) {
+  var s = t, {
     children: r,
     className: a = ""
-  } = i, n = y(i, [
+  } = s, n = x(s, [
     "children",
     "className"
   ]);
   return /* @__PURE__ */ d(
     "div",
-    v(m({
+    y(u({
       className: `
         ${o("lg", "p")}
         border-b
@@ -1932,17 +2025,17 @@ function pa(t) {
     })
   );
 }
-function ua(t) {
-  var i = t, {
+function va(t) {
+  var s = t, {
     children: r,
     className: a = ""
-  } = i, n = y(i, [
+  } = s, n = x(s, [
     "children",
     "className"
   ]);
   return /* @__PURE__ */ d(
     "div",
-    v(m({
+    y(u({
       className: `
         ${o("lg", "p")}
         border-t
@@ -1957,7 +2050,7 @@ function ua(t) {
     })
   );
 }
-function ma({ children: r, className: a }) {
+function wa({ children: r, className: a }) {
   return /* @__PURE__ */ d(
     "div",
     {
@@ -1970,7 +2063,7 @@ function ma({ children: r, className: a }) {
     }
   );
 }
-function ba({
+function Na({
   children: r,
   className: a
 }) {
@@ -1989,15 +2082,15 @@ function ba({
     }
   );
 }
-function ga(n) {
+function ka(n) {
   var t = n, {
     className: r = ""
-  } = t, a = y(t, [
+  } = t, a = x(t, [
     "className"
   ]);
   return /* @__PURE__ */ d(
     "div",
-    m({
+    u({
       role: "separator",
       className: `
         h-px
@@ -2008,24 +2101,24 @@ function ga(n) {
     }, a)
   );
 }
-function xa(t) {
-  var i = t, {
+function $a(t) {
+  var s = t, {
     orientation: r = "horizontal",
     className: a = ""
-  } = i, n = y(i, [
+  } = s, n = x(s, [
     "orientation",
     "className"
   ]);
   return r === "vertical" ? /* @__PURE__ */ d(
     "div",
-    m({
+    u({
       className: l("w-px", "h-6", "bg-line-default", "mx-auto", a),
       role: "separator",
       "aria-orientation": "vertical"
     }, n)
   ) : /* @__PURE__ */ d(
     "div",
-    m({
+    u({
       className: l(
         "w-full",
         "h-px",
@@ -2046,7 +2139,7 @@ function xa(t) {
     }, n)
   );
 }
-const Je = j(
+const ia = j(
   // Base classes
   l("w-full", "flex", "flex-col", o("sm", "gap")),
   {
@@ -2061,15 +2154,15 @@ const Je = j(
     }
   }
 );
-function ya(f) {
+function Sa(f) {
   var p = f, {
     title: r,
     description: a,
     breadcrumb: n,
     actions: t,
-    variant: i = "default",
-    className: s
-  } = p, c = y(p, [
+    variant: s = "default",
+    className: i
+  } = p, c = x(p, [
     "title",
     "description",
     "breadcrumb",
@@ -2077,16 +2170,16 @@ function ya(f) {
     "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(
+  return /* @__PURE__ */ $("div", y(u({ className: l(ia({ variant: s }), i) }, c), { children: [
+    n && n.length > 0 && /* @__PURE__ */ d(Je, { items: n }),
+    /* @__PURE__ */ $(
       "div",
       {
         className: `flex items-start justify-between ${o("base", "gap")}`,
         children: [
-          /* @__PURE__ */ T("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ $("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ d(
-              re,
+              se,
               {
                 variant: "heading",
                 as: "h1",
@@ -2094,7 +2187,7 @@ function ya(f) {
                 children: r
               }
             ),
-            a && /* @__PURE__ */ d(re, { variant: "body", className: "text-fg-secondary", children: a })
+            a && /* @__PURE__ */ d(se, { variant: "body", className: "text-fg-secondary", children: a })
           ] }),
           t && /* @__PURE__ */ d(
             "div",
@@ -2108,29 +2201,29 @@ function ya(f) {
     )
   ] }));
 }
-function ha(i) {
-  var s = i, { column: r, row: a, className: n = "" } = s, t = y(s, ["column", "row", "className"]);
+function Ta(s) {
+  var i = s, { column: r, row: a, className: n = "" } = i, t = x(i, ["column", "row", "className"]);
   const c = r.key in a ? a[r.key] : void 0;
   return /* @__PURE__ */ d(
     "td",
-    v(m({
+    y(u({
       className: `${o("lg", "px")} ${o("base", "py")} whitespace-nowrap text-sm text-fg-primary ${r.hiddenOnMobile ? "hidden md:table-cell" : ""} ${n}`
     }, t), {
       children: r.render ? r.render(c, a) : String(c != null ? c : "")
     })
   );
 }
-function wa({
+function Ca({
   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__ */ T("div", { className: "flex flex-col items-center flex-1", children: [
+  return a === "horizontal" ? /* @__PURE__ */ d("div", { className: `flex items-start ${n}`, children: r.map((t, s) => {
+    const i = t.status || (s === 0 ? "active" : s < r.findIndex((f) => f.status === "active") ? "completed" : "default"), c = s === r.length - 1;
+    return /* @__PURE__ */ d("div", { className: "flex items-start flex-1", children: /* @__PURE__ */ $("div", { className: "flex flex-col items-center flex-1", children: [
       /* @__PURE__ */ d(
         "div",
-        v(m({}, s === "default" ? { "data-marker": "pending" } : {}), {
+        y(u({}, i === "default" ? { "data-marker": "pending" } : {}), {
           className: `
                   flex
                   items-center
@@ -2139,9 +2232,9 @@ function wa({
                   h-10
                   ${M("full")}
                   border-2
-                  ${s === "completed" ? "bg-success border-success text-fg-inverse" : s === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : s === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+                  ${i === "completed" ? "bg-success border-success text-fg-inverse" : i === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : i === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
                 `,
-          children: t.icon || (s === "completed" ? /* @__PURE__ */ d(J, { className: "h-4 w-4" }) : i + 1)
+          children: t.icon || (i === "completed" ? /* @__PURE__ */ d(ae, { className: "h-4 w-4" }) : s + 1)
         })
       ),
       !c && /* @__PURE__ */ d(
@@ -2151,11 +2244,11 @@ function wa({
                       w-full
                       h-0.5
                       ${o("sm", "mt")}
-                      ${s === "completed" ? "bg-success" : "bg-line-emphasis"}
+                      ${i === "completed" ? "bg-success" : "bg-line-emphasis"}
                     `
         }
       ),
-      /* @__PURE__ */ T(
+      /* @__PURE__ */ $(
         "div",
         {
           className: `${o("base", "mt")} text-center ${o("base", "px")}`,
@@ -2180,17 +2273,17 @@ function wa({
         }
       )
     ] }) }, 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__ */ T(
+  }) }) : /* @__PURE__ */ d("div", { className: `${o("none", "space-y")} ${n}`, children: r.map((t, s) => {
+    const i = t.status || (s === 0 ? "active" : s < r.findIndex((f) => f.status === "active") ? "completed" : "default"), c = s === r.length - 1;
+    return /* @__PURE__ */ $(
       "div",
       {
         className: `flex items-start ${o("base", "gap")}`,
         children: [
-          /* @__PURE__ */ T("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ $("div", { className: "flex flex-col items-center", children: [
             /* @__PURE__ */ d(
               "div",
-              v(m({}, s === "default" ? { "data-marker": "pending" } : {}), {
+              y(u({}, i === "default" ? { "data-marker": "pending" } : {}), {
                 className: `
                 flex
                 items-center
@@ -2199,9 +2292,9 @@ function wa({
                 h-10
                 ${M("full")}
                 border-2
-                ${s === "completed" ? "bg-success border-success text-fg-inverse" : s === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : s === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+                ${i === "completed" ? "bg-success border-success text-fg-inverse" : i === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : i === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
               `,
-                children: t.icon || (s === "completed" ? /* @__PURE__ */ d(J, { className: "h-4 w-4" }) : i + 1)
+                children: t.icon || (i === "completed" ? /* @__PURE__ */ d(ae, { className: "h-4 w-4" }) : s + 1)
               })
             ),
             !c && /* @__PURE__ */ d(
@@ -2212,12 +2305,12 @@ function wa({
                     flex-1
                     min-h-16
                     ${o("sm", "mt")}
-                    ${s === "completed" ? "bg-success" : "bg-line-emphasis"}
+                    ${i === "completed" ? "bg-success" : "bg-line-emphasis"}
                   `
               }
             )
           ] }),
-          /* @__PURE__ */ T("div", { className: `flex-1 ${o("xl", "pb")}`, children: [
+          /* @__PURE__ */ $("div", { className: `flex-1 ${o("xl", "pb")}`, children: [
             t.timestamp && /* @__PURE__ */ d(
               "p",
               {
@@ -2231,7 +2324,7 @@ function wa({
                 className: `
                 text-base
                 font-semibold
-                ${s === "active" ? "text-fg-brand-emphasis" : "text-fg-primary"}
+                ${i === "active" ? "text-fg-brand-emphasis" : "text-fg-primary"}
               `,
                 children: t.title
               }
@@ -2252,30 +2345,35 @@ function wa({
   }) });
 }
 export {
-  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,
-  la as ErrorMessage,
-  ma as HeaderActions,
-  ba as HeaderNavigation,
-  oa as Info,
-  Ie as Label,
-  ga as MenuSeparator,
-  xa as NavbarSeparator,
-  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
+  we as Badge,
+  Je as Breadcrumb,
+  P as Card,
+  ra as CardActions,
+  na as CardBody,
+  ea as CardHeader,
+  ta as CardSubtitle,
+  aa as CardTitle,
+  Ee as Chip,
+  Ge as Container,
+  ya as DialogFooter,
+  xa as DialogHeader,
+  va as DrawerFooter,
+  ha as DrawerHeader,
+  ma as ErrorMessage,
+  wa as HeaderActions,
+  Na as HeaderNavigation,
+  ba as Info,
+  De as Label,
+  ka as MenuSeparator,
+  $a as NavbarSeparator,
+  Sa as PageHeader,
+  Be as Progress,
+  qe as Separator,
+  ga as Skeleton,
+  Ke as Spinner,
+  Qe as Stack,
+  Ta as TableCell,
+  se as Text,
+  Ca as Timeline
 };
 //# sourceMappingURL=index.js.map