@fabio.caffarello/react-design-system 3.9.0 → 3.10.0

package/dist/server/index.js

@@ -9,7 +9,7 @@ var O = (e, a, r) => a in e ? ae(e, a, { enumerable: !0, configurable: !0, writa
     for (var r of W(a))
       K.call(a, r) && O(e, r, a[r]);
   return e;
-}, x = (e, a) => re(e, se(a));
+}, g = (e, a) => re(e, se(a));
 var p = (e, a) => {
   var r = {};
   for (var t in e)
@@ -20,7 +20,7 @@ var p = (e, a) => {
   return r;
 };
 var X = (e, a, r) => O(e, typeof a != "symbol" ? a + "" : a, r);
-import { jsx as l, jsxs as $ } from "react/jsx-runtime";
+import { jsx as l, jsxs as v } from "react/jsx-runtime";
 import * as k from "react";
 import ee, { memo as D, forwardRef as _ } from "react";
 import { clsx as ne } from "clsx";
@@ -96,7 +96,7 @@ const fe = {
 function C(e) {
   return fe[e].tailwind;
 }
-class w {
+class N {
   // 4px base
   /**
    * Create a spacing token from scale value
@@ -163,42 +163,42 @@ class w {
     }[a] || String(a);
   }
 }
-X(w, "BASE_UNIT", 4);
+X(N, "BASE_UNIT", 4);
 const ue = {
   // Micro spacing (0-14px)
-  none: w.create(0),
-  "0.5": w.create(0.5),
+  none: N.create(0),
+  "0.5": N.create(0.5),
   // 2px (half-step)
-  xs: w.create(1),
+  xs: N.create(1),
   // 4px
-  "1.5": w.create(1.5),
+  "1.5": N.create(1.5),
   // 6px (half-step)
-  sm: w.create(2),
+  sm: N.create(2),
   // 8px
-  "2.5": w.create(2.5),
+  "2.5": N.create(2.5),
   // 10px (half-step)
-  md: w.create(3),
+  md: N.create(3),
   // 12px
-  "3.5": w.create(3.5),
+  "3.5": N.create(3.5),
   // 14px (half-step)
   // Standard spacing (16-32px)
-  base: w.create(4),
+  base: N.create(4),
   // 16px
-  lg: w.create(6),
+  lg: N.create(6),
   // 24px
-  xl: w.create(8),
+  xl: N.create(8),
   // 32px
   // Large spacing (40-64px)
-  "2xl": w.create(10),
+  "2xl": N.create(10),
   // 40px
-  "3xl": w.create(12),
+  "3xl": N.create(12),
   // 48px
-  "4xl": w.create(16),
+  "4xl": N.create(16),
   // 64px
   // Extra large spacing (80px+)
-  "5xl": w.create(20),
+  "5xl": N.create(20),
   // 80px
-  "6xl": w.create(24)
+  "6xl": N.create(24)
   // 96px
 };
 function i(e, a = "p") {
@@ -225,7 +225,7 @@ function i(e, a = "p") {
     "space-y": "space-y"
   }[a]}-${t}`;
 }
-class N {
+class $ {
   /**
    * Create font size token
    */
@@ -295,23 +295,23 @@ class N {
     };
   }
 }
-N.createFontWeight("light"), N.createFontWeight("normal"), N.createFontWeight("medium"), N.createFontWeight("semibold"), N.createFontWeight("bold");
+$.createFontWeight("light"), $.createFontWeight("normal"), $.createFontWeight("medium"), $.createFontWeight("semibold"), $.createFontWeight("bold");
 const B = {
   // 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: $.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"),
   // Body text
-  body: N.create("base", "relaxed", "normal"),
-  bodySmall: N.create("sm", "relaxed", "normal"),
-  bodyLarge: N.create("lg", "relaxed", "normal"),
+  body: $.create("base", "relaxed", "normal"),
+  bodySmall: $.create("sm", "relaxed", "normal"),
+  bodyLarge: $.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: $.create("sm", "normal", "medium"),
+  caption: $.create("xs", "normal", "normal"),
+  button: $.create("base", "normal", "medium")
 };
 function R(e) {
   const a = B[e];
@@ -471,8 +471,8 @@ const M = (e, a) => {
     }
   }
 ), me = D(
-  _(function(g, u) {
-    var y = g, {
+  _(function(x, u) {
+    var y = x, {
       variant: a = "neutral",
       size: r = "md",
       style: t = "solid",
@@ -499,7 +499,7 @@ const M = (e, a) => {
     }
     return /* @__PURE__ */ l(
       "span",
-      x(f({
+      g(f({
         ref: u,
         role: "status",
         "aria-label": m,
@@ -541,15 +541,15 @@ function be(e) {
     var h;
     let m = r, { children: s } = m, o = p(m, ["children"]), d = null, c = !1;
     const u = [];
-    Y(s) && typeof H == "function" && (s = H(s._payload)), k.Children.forEach(s, (v) => {
+    Y(s) && typeof H == "function" && (s = H(s._payload)), k.Children.forEach(s, (w) => {
       var S;
-      if ($e(v)) {
+      if ($e(w)) {
         c = !0;
-        const A = v;
+        const A = w;
         let L = "child" in A.props ? A.props.child : A.props.children;
         Y(L) && typeof H == "function" && (L = H(L._payload)), d = ve(A, L), u.push((S = d == null ? void 0 : d.props) == null ? void 0 : S.children);
       } else
-        u.push(v);
+        u.push(w);
     }), d ? d = k.cloneElement(d, void 0, u) : (
       // A `Slottable` was found but it didn't resolve to a single element (e.g.
       // it wrapped multiple elements, text, or a render-prop `child` that
@@ -557,7 +557,7 @@ function be(e) {
       // itself as the slot target — throw a descriptive error below instead.
       !c && k.Children.count(s) === 1 && k.isValidElement(s) && (d = s)
     );
-    const g = d ? Ne(d) : void 0, y = xe(t, g);
+    const x = d ? Ne(d) : void 0, y = xe(t, x);
     if (!d) {
       if (s || s === 0)
         throw new Error(
@@ -566,7 +566,7 @@ function be(e) {
       return s;
     }
     const b = we(o, (h = d.props) != null ? h : {});
-    return d.type !== k.Fragment && (b.ref = t ? y : g), k.cloneElement(d, b);
+    return d.type !== k.Fragment && (b.ref = t ? y : x), k.cloneElement(d, b);
   });
   return a.displayName = `${e}.Slot`, a;
 }
@@ -701,11 +701,11 @@ const Z = M(
     selected: d = !1,
     disabled: c = !1,
     className: u = "",
-    "aria-label": g,
+    "aria-label": x,
     tabIndex: y,
     asChild: b = !1
   } = a, h = (() => {
-    if (g) return g;
+    if (x) return x;
     if (typeof t == "string") return t;
     if (typeof t == "object" && t !== null && "props" in t) {
       const T = t.props;
@@ -722,22 +722,22 @@ const Z = M(
           Z({ variant: s, size: o, selected: d, disabled: c }),
           u
         ),
-        "aria-label": g,
+        "aria-label": x,
         "aria-disabled": c || void 0,
         tabIndex: y,
         children: t
       }
     );
-  const { onRemove: v, onClick: S } = a, A = S !== void 0, L = A && !c, V = (T) => {
+  const { onRemove: w, onClick: S } = a, A = S !== void 0, L = A && !c, V = (T) => {
     c || (T.key === "Enter" || T.key === " ") && (T.preventDefault(), S == null || S());
   };
-  return /* @__PURE__ */ $(
+  return /* @__PURE__ */ v(
     "div",
     {
       ref: r,
       className: n(
         Z({ variant: s, size: o, selected: d, disabled: c }),
-        v && i("xs", "pr"),
+        w && i("xs", "pr"),
         u
       ),
       "aria-disabled": c,
@@ -750,7 +750,7 @@ const Z = M(
             onKeyDown: V,
             disabled: c,
             "aria-pressed": d ? !0 : void 0,
-            "aria-label": g || h,
+            "aria-label": x || h,
             tabIndex: y !== void 0 ? y : L ? 0 : void 0,
             className: n(
               "flex-1",
@@ -769,12 +769,12 @@ const Z = M(
             children: t
           }
         ) : /* @__PURE__ */ l("span", { children: t }),
-        v && !c && /* @__PURE__ */ l(
+        w && !c && /* @__PURE__ */ l(
           "button",
           {
             type: "button",
             onClick: (T) => {
-              T.stopPropagation(), v();
+              T.stopPropagation(), w();
             },
             className: n(
               i("xs", "ml"),
@@ -814,7 +814,7 @@ function dt(s) {
     "items-center",
     i("xs", "gap")
   ], c = n(...d, r);
-  return /* @__PURE__ */ $("div", x(f({ role: "alert", id: a, className: c, "aria-live": "polite" }, t), { children: [
+  return /* @__PURE__ */ v("div", g(f({ role: "alert", id: a, className: c, "aria-live": "polite" }, t), { children: [
     /* @__PURE__ */ l(de, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
     /* @__PURE__ */ l("span", { children: e })
   ] }));
@@ -873,7 +873,7 @@ const Le = n(
       Ae[a],
       r
     );
-    return /* @__PURE__ */ l("label", x(f({ ref: o, className: u }, s), { children: t }));
+    return /* @__PURE__ */ l("label", g(f({ ref: o, className: u }, s), { children: t }));
   })
 );
 Fe.displayName = "Label";
@@ -977,7 +977,7 @@ const ze = M("w-full", {
     label: d,
     "aria-label": c,
     className: u = ""
-  } = m, g = p(m, [
+  } = m, x = p(m, [
     "value",
     "max",
     "variant",
@@ -987,9 +987,9 @@ const ze = M("w-full", {
     "aria-label",
     "className"
   ]);
-  const h = a === void 0, v = h ? void 0 : Math.min(Math.max(a / r * 100, 0), 100), S = c || (h ? "Loading in progress" : `Progress: ${v == null ? void 0 : v.toFixed(0)}%`);
-  return /* @__PURE__ */ $("div", x(f({ ref: y, className: n("w-full", u) }, g), { children: [
-    o && (d || !h) && /* @__PURE__ */ $(
+  const h = a === void 0, w = h ? void 0 : Math.min(Math.max(a / r * 100, 0), 100), S = c || (h ? "Loading in progress" : `Progress: ${w == null ? void 0 : w.toFixed(0)}%`);
+  return /* @__PURE__ */ v("div", g(f({ ref: y, className: n("w-full", u) }, x), { children: [
+    o && (d || !h) && /* @__PURE__ */ v(
       "div",
       {
         className: n(
@@ -1010,7 +1010,7 @@ const ze = M("w-full", {
               children: d
             }
           ),
-          !h && v !== void 0 && /* @__PURE__ */ $(
+          !h && w !== void 0 && /* @__PURE__ */ v(
             "span",
             {
               className: n(
@@ -1018,7 +1018,7 @@ const ze = M("w-full", {
                 "text-fg-secondary"
               ),
               children: [
-                v.toFixed(0),
+                w.toFixed(0),
                 "%"
               ]
             }
@@ -1071,7 +1071,7 @@ const ze = M("w-full", {
               "ease-out"
             ),
             style: {
-              width: `${v}%`
+              width: `${w}%`
             },
             "aria-hidden": "true"
           }
@@ -1138,7 +1138,7 @@ function ft(c) {
     "className",
     "aria-label"
   ]);
-  const g = [
+  const x = [
     "motion-safe:animate-pulse",
     "bg-surface-muted",
     C("sm")
@@ -1147,18 +1147,18 @@ function ft(c) {
     card: "h-32",
     list: "h-12",
     circle: C("full")
-  }, b = n(...g, y[e], s), m = {};
+  }, b = n(...x, y[e], s), m = {};
   a && (m.width = a), r && (m.height = r);
   const h = o || `Loading ${e} content`;
   return e === "text" && t > 1 ? /* @__PURE__ */ l(
     "div",
-    x(f({
+    g(f({
       className: i("sm", "space-y"),
       role: "status",
       "aria-busy": "true",
       "aria-label": h
     }, d), {
-      children: Array.from({ length: t }).map((v, S) => /* @__PURE__ */ l(
+      children: Array.from({ length: t }).map((w, S) => /* @__PURE__ */ l(
         "div",
         {
           className: b,
@@ -1208,9 +1208,9 @@ const _e = M("motion-safe:animate-spin", {
     "label",
     "className"
   ]);
-  return /* @__PURE__ */ $(
+  return /* @__PURE__ */ v(
     "div",
-    x(f({
+    g(f({
       className: n("inline-flex", "items-center", s),
       role: "status",
       "aria-label": t || "Loading",
@@ -1293,8 +1293,8 @@ const We = {
     contrast: "text-fg-inverse"
   }
 };
-function He(g, u) {
-  var y = g, {
+function He(x, u) {
+  var y = x, {
     variant: e = "paragraph",
     bold: a,
     italic: r,
@@ -1338,14 +1338,14 @@ const Q = _(He), Oe = {
   full: "max-w-full"
 }, Pe = ee.forwardRef(
   (u, c) => {
-    var g = u, {
+    var x = u, {
       className: e,
       maxWidth: a = "lg",
       paddingX: r = "base",
       paddingY: t = "base",
       center: s = !0,
       children: o
-    } = g, d = p(g, [
+    } = x, d = p(x, [
       "className",
       "maxWidth",
       "paddingX",
@@ -1355,7 +1355,7 @@ const Q = _(He), Oe = {
     ]);
     return /* @__PURE__ */ l(
       "div",
-      x(f({
+      g(f({
         ref: c,
         className: n(
           "w-full",
@@ -1374,14 +1374,14 @@ const Q = _(He), Oe = {
 Pe.displayName = "Container";
 const Be = ee.forwardRef(
   (u, c) => {
-    var g = u, {
+    var x = u, {
       className: e,
       spacing: a = "base",
       align: r = "stretch",
       justify: t = "start",
       direction: s = "column",
       children: o
-    } = g, d = p(g, [
+    } = x, d = p(x, [
       "className",
       "spacing",
       "align",
@@ -1404,7 +1404,7 @@ const Be = ee.forwardRef(
     };
     return /* @__PURE__ */ l(
       "div",
-      x(f({
+      g(f({
         ref: c,
         className: n(
           "flex",
@@ -1437,14 +1437,14 @@ function Ue(s) {
     i("sm", "space-x"),
     E("bodySmall")
   ], c = n(...d, r);
-  return /* @__PURE__ */ l("nav", x(f({ "aria-label": "Breadcrumb", className: c }, t), { children: /* @__PURE__ */ l(
+  return /* @__PURE__ */ l("nav", g(f({ "aria-label": "Breadcrumb", className: c }, t), { children: /* @__PURE__ */ l(
     "ol",
     {
       className: n("flex", "items-center", i("sm", "space-x")),
-      children: e.map((u, g) => {
-        const y = g === e.length - 1;
-        return /* @__PURE__ */ $("li", { className: "flex items-center", children: [
-          g > 0 && /* @__PURE__ */ l(
+      children: e.map((u, x) => {
+        const y = x === e.length - 1;
+        return /* @__PURE__ */ v("li", { className: "flex items-center", children: [
+          x > 0 && /* @__PURE__ */ l(
             "span",
             {
               className: n(
@@ -1486,7 +1486,7 @@ function Ue(s) {
               children: u.label
             }
           ) : /* @__PURE__ */ l("span", { className: "text-fg-secondary", children: u.label })
-        ] }, g);
+        ] }, x);
       })
     }
   ) }));
@@ -1495,7 +1495,7 @@ function Ke(t) {
   var s = t, { children: e, className: a } = s, r = p(s, ["children", "className"]);
   return /* @__PURE__ */ l(
     "div",
-    x(f({
+    g(f({
       className: n(
         "grid items-start",
         i("1.5", "gap"),
@@ -1523,9 +1523,9 @@ function Xe(d) {
     "as",
     "className"
   ]);
-  return /* @__PURE__ */ $(
+  return /* @__PURE__ */ v(
     t,
-    x(f({
+    g(f({
       className: n(
         "text-base font-semibold text-fg-primary",
         "flex items-center",
@@ -1549,7 +1549,7 @@ function qe(t) {
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ l("p", x(f({ className: n("text-sm text-fg-secondary", a) }, r), { children: e }));
+  return /* @__PURE__ */ l("p", g(f({ className: n("text-sm text-fg-secondary", a) }, r), { children: e }));
 }
 function Ge(t) {
   var s = t, {
@@ -1561,7 +1561,7 @@ function Ge(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    x(f({
+    g(f({
       "data-card-actions": "",
       className: n(
         "flex items-center self-start",
@@ -1575,10 +1575,10 @@ function Ge(t) {
 }
 function Ye(t) {
   var s = t, { children: e, className: a } = s, r = p(s, ["children", "className"]);
-  return /* @__PURE__ */ l("div", x(f({ className: n(a) }, r), { children: e }));
+  return /* @__PURE__ */ l("div", g(f({ className: n(a) }, r), { children: e }));
 }
-function Ze(g) {
-  var y = g, {
+function Ze(x) {
+  var y = x, {
     variant: e = "default",
     padding: a = "medium",
     className: r = "",
@@ -1631,10 +1631,10 @@ function Ze(g) {
         padding: "medium"
       }
     }
-  ), m = t !== void 0, h = m ? "button" : void 0, v = m ? 0 : void 0, S = n(b({ variant: e, padding: a }), r), L = f({
+  ), m = t !== void 0, h = m ? "button" : void 0, w = m ? 0 : void 0, S = n(b({ variant: e, padding: a }), r), L = f({
     className: S,
     role: h,
-    tabIndex: v,
+    tabIndex: w,
     onClick: t,
     onKeyDown: m ? (V) => {
       m && (V.key === "Enter" || V.key === " ") && (V.preventDefault(), t == null || t());
@@ -1642,7 +1642,7 @@ function Ze(g) {
     "aria-label": s,
     "aria-labelledby": o
   }, u);
-  return d ? /* @__PURE__ */ l("section", x(f({}, L), { children: c })) : /* @__PURE__ */ l("div", x(f({}, L), { children: c }));
+  return d ? /* @__PURE__ */ l("section", g(f({}, L), { children: c })) : /* @__PURE__ */ l("div", g(f({}, L), { children: c }));
 }
 const te = D(Ze);
 te.displayName = "Card";
@@ -1662,7 +1662,7 @@ function ut(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    x(f({
+    g(f({
       className: `flex flex-col ${i("1.5", "space-y")} ${i("lg", "p")} ${i("base", "pb")} ${a}`
     }, r), {
       children: e
@@ -1679,7 +1679,7 @@ function pt(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    x(f({
+    g(f({
       className: `flex flex-col-reverse sm:flex-row sm:justify-end sm:${i("sm", "space-x")} ${i("lg", "p")} ${i("base", "pt")} ${a}`
     }, r), {
       children: e
@@ -1696,7 +1696,7 @@ function mt(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    x(f({
+    g(f({
       className: `
         ${i("lg", "p")}
         border-b
@@ -1718,7 +1718,7 @@ function gt(t) {
   ]);
   return /* @__PURE__ */ l(
     "div",
-    x(f({
+    g(f({
       className: `
         ${i("lg", "p")}
         border-t
@@ -1733,7 +1733,44 @@ function gt(t) {
     })
   );
 }
-function xt({ children: e, className: a }) {
+function xt(o) {
+  var d = o, {
+    label: e,
+    children: a,
+    wrap: r = !0,
+    className: t
+  } = d, s = p(d, [
+    "label",
+    "children",
+    "wrap",
+    "className"
+  ]);
+  const u = !(s["aria-label"] != null || s["aria-labelledby"] != null) && typeof e == "string" && e !== "" ? e : void 0;
+  return /* @__PURE__ */ v(
+    "div",
+    g(f({
+      role: "group",
+      "aria-label": u,
+      className: n(
+        "flex items-center",
+        r ? "flex-wrap" : "flex-nowrap",
+        i("sm", "gap"),
+        t
+      )
+    }, s), {
+      children: [
+        e ? (
+          // shrink-0 keeps the label a stable leading unit: in the wrapping
+          // flex run it must not be squeezed or mid-word-wrapped when the
+          // chips overflow — it stays on one line and the chips wrap around it.
+          /* @__PURE__ */ l("span", { className: "shrink-0 text-fg-secondary text-sm", children: e })
+        ) : null,
+        a
+      ]
+    })
+  );
+}
+function bt({ children: e, className: a }) {
   return /* @__PURE__ */ l(
     "div",
     {
@@ -1746,7 +1783,7 @@ function xt({ children: e, className: a }) {
     }
   );
 }
-function bt({
+function ht({
   children: e,
   className: a
 }) {
@@ -1765,7 +1802,7 @@ function bt({
     }
   );
 }
-function ht(r) {
+function yt(r) {
   var t = r, {
     className: e = ""
   } = t, a = p(t, [
@@ -1784,7 +1821,7 @@ function ht(r) {
     }, a)
   );
 }
-function yt(t) {
+function vt(t) {
   var s = t, {
     orientation: e = "horizontal",
     className: a = ""
@@ -1837,7 +1874,7 @@ const Je = M(
     }
   }
 );
-function vt(c) {
+function wt(c) {
   var u = c, {
     title: e,
     description: a,
@@ -1853,14 +1890,14 @@ function vt(c) {
     "variant",
     "className"
   ]);
-  return /* @__PURE__ */ $("div", x(f({ className: n(Je({ variant: s }), o) }, d), { children: [
+  return /* @__PURE__ */ v("div", g(f({ className: n(Je({ variant: s }), o) }, d), { children: [
     r && r.length > 0 && /* @__PURE__ */ l(Ue, { items: r }),
-    /* @__PURE__ */ $(
+    /* @__PURE__ */ v(
       "div",
       {
         className: `flex items-start justify-between ${i("base", "gap")}`,
         children: [
-          /* @__PURE__ */ $("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ v("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ l(
               Q,
               {
@@ -1893,8 +1930,8 @@ const Qe = {
   warning: "text-fg-warning",
   error: "text-fg-error"
 };
-function wt(u) {
-  var g = u, {
+function Nt(u) {
+  var x = u, {
     value: e,
     label: a,
     hint: r,
@@ -1902,7 +1939,7 @@ function wt(u) {
     align: s = "start",
     tone: o = "neutral",
     className: d
-  } = g, c = p(g, [
+  } = x, c = p(x, [
     "value",
     "label",
     "hint",
@@ -1912,9 +1949,9 @@ function wt(u) {
     "className"
   ]);
   const y = e == null;
-  return /* @__PURE__ */ $(
+  return /* @__PURE__ */ v(
     "div",
-    x(f({
+    g(f({
       className: n(
         "bg-surface-base flex-1 flex flex-col",
         i("base", "p"),
@@ -1944,7 +1981,7 @@ const tt = {
   3: "md:grid-cols-3",
   4: "md:grid-cols-4"
 };
-function Nt(o) {
+function $t(o) {
   var d = o, {
     layout: e = "grid",
     cols: a = 4,
@@ -1959,7 +1996,7 @@ function Nt(o) {
   const c = e === "grid";
   return /* @__PURE__ */ l(
     "div",
-    x(f({
+    g(f({
       className: n(
         "bg-line-default border border-line-default overflow-hidden gap-px",
         C("lg"),
@@ -1971,29 +2008,29 @@ function Nt(o) {
     })
   );
 }
-function $t(s) {
+function St(s) {
   var o = s, { column: e, row: a, className: r = "" } = o, t = p(o, ["column", "row", "className"]);
   const d = e.key in a ? a[e.key] : void 0;
   return /* @__PURE__ */ l(
     "td",
-    x(f({
+    g(f({
       className: `${i("lg", "px")} ${i("base", "py")} whitespace-nowrap text-sm text-fg-primary ${e.hiddenOnMobile ? "hidden md:table-cell" : ""} ${r}`
     }, t), {
       children: e.render ? e.render(d, a) : String(d != null ? d : "")
     })
   );
 }
-function St({
+function Ct({
   items: e,
   orientation: a = "vertical",
   className: r = ""
 }) {
   return a === "horizontal" ? /* @__PURE__ */ l("div", { className: `flex items-start ${r}`, children: e.map((t, s) => {
     const o = t.status || (s === 0 ? "active" : s < e.findIndex((c) => c.status === "active") ? "completed" : "default"), d = s === e.length - 1;
-    return /* @__PURE__ */ l("div", { className: "flex items-start flex-1", children: /* @__PURE__ */ $("div", { className: "flex flex-col items-center flex-1", children: [
+    return /* @__PURE__ */ l("div", { className: "flex items-start flex-1", children: /* @__PURE__ */ v("div", { className: "flex flex-col items-center flex-1", children: [
       /* @__PURE__ */ l(
         "div",
-        x(f({}, o === "default" ? { "data-marker": "pending" } : {}), {
+        g(f({}, o === "default" ? { "data-marker": "pending" } : {}), {
           className: `
                   flex
                   items-center
@@ -2018,7 +2055,7 @@ function St({
                     `
         }
       ),
-      /* @__PURE__ */ $(
+      /* @__PURE__ */ v(
         "div",
         {
           className: `${i("base", "mt")} text-center ${i("base", "px")}`,
@@ -2045,15 +2082,15 @@ function St({
     ] }) }, t.id);
   }) }) : /* @__PURE__ */ l("div", { className: `${i("none", "space-y")} ${r}`, children: e.map((t, s) => {
     const o = t.status || (s === 0 ? "active" : s < e.findIndex((c) => c.status === "active") ? "completed" : "default"), d = s === e.length - 1;
-    return /* @__PURE__ */ $(
+    return /* @__PURE__ */ v(
       "div",
       {
         className: `flex items-start ${i("base", "gap")}`,
         children: [
-          /* @__PURE__ */ $("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ v("div", { className: "flex flex-col items-center", children: [
             /* @__PURE__ */ l(
               "div",
-              x(f({}, o === "default" ? { "data-marker": "pending" } : {}), {
+              g(f({}, o === "default" ? { "data-marker": "pending" } : {}), {
                 className: `
                 flex
                 items-center
@@ -2080,7 +2117,7 @@ function St({
               }
             )
           ] }),
-          /* @__PURE__ */ $("div", { className: `flex-1 ${i("xl", "pb")}`, children: [
+          /* @__PURE__ */ v("div", { className: `flex-1 ${i("xl", "pb")}`, children: [
             t.timestamp && /* @__PURE__ */ l(
               "p",
               {
@@ -2130,22 +2167,23 @@ export {
   gt as DrawerFooter,
   mt as DrawerHeader,
   dt as ErrorMessage,
-  xt as HeaderActions,
-  bt as HeaderNavigation,
+  xt as FilterChips,
+  bt as HeaderActions,
+  ht as HeaderNavigation,
   ct as Info,
   Fe as Label,
-  ht as MenuSeparator,
-  yt as NavbarSeparator,
-  vt as PageHeader,
+  yt as MenuSeparator,
+  vt as NavbarSeparator,
+  wt as PageHeader,
   Me as Progress,
   De as Separator,
   ft as Skeleton,
   Ie as Spinner,
   Be as Stack,
-  wt as Stat,
-  Nt as StatGroup,
-  $t as TableCell,
+  Nt as Stat,
+  $t as StatGroup,
+  St as TableCell,
   Q as Text,
-  St as Timeline
+  Ct as Timeline
 };
 //# sourceMappingURL=index.js.map