@versaur/react 1.0.12 → 1.0.13

package/dist/blocks.js

@@ -1,12 +1,12 @@
 import { jsxs as y, jsx as o, Fragment as Tt } from "react/jsx-runtime";
-import { accordionStyles as D, avatarGroupStyles as St, tabsStyles as G, noResultsStyles as F, attributeListStyles as wt, badgeGroupStyles as Bt, cardStyles as C, menuStyles as H, tableStyles as B, buttonGroupStyles as At, topBarStyles as L, navStyles as j, sidebarStyles as T, bottomBarStyles as $, appLayoutStyles as x, formGroupStyles as X, featuresStyles as W, drawerStyles as Rt, modalStyles as It, bottomSheetStyles as Lt } from "@versaur/core/blocks";
+import { accordionStyles as D, avatarGroupStyles as St, tabsStyles as G, noResultsStyles as F, attributeListStyles as Bt, badgeGroupStyles as wt, cardStyles as C, menuStyles as H, tableStyles as w, buttonGroupStyles as At, topBarStyles as L, navStyles as j, sidebarStyles as T, bottomBarStyles as $, appLayoutStyles as x, formGroupStyles as X, featuresStyles as W, drawerStyles as Rt, modalStyles as It, bottomSheetStyles as Lt } from "@versaur/core/blocks";
 import { ChevronDownIcon as Z, XIcon as q } from "@versaur/icons";
 import xt, { createContext as A, forwardRef as n, useRef as M, useState as P, useEffect as z, useContext as R, useLayoutEffect as Ft, useId as O, useCallback as Dt } from "react";
 import { u as v } from "./use-data-attrs-iPFyfiKN.js";
 import { c as d } from "./cx-B9vmfsc1.js";
-import { c as ee, I as E, T as I, B as V, H as Mt } from "./tooltip-Zuq8gd0f.js";
+import { c as ee, I as E, T as I, B as V, H as Mt } from "./tooltip-_eEMRSo8.js";
 import { checkboxStyles as k } from "@versaur/core/forms";
-import { overlayPartsStyles as w } from "@versaur/core/utils";
+import { overlayPartsStyles as B } from "@versaur/core/utils";
 import { c as J, a as te, O as K, b as Ht } from "./overlay-parts-Zq9CuT31.js";
 const ae = A(void 0);
 function Gt() {
@@ -15,7 +15,7 @@ function Gt() {
     throw new Error("Accordion.Summary must be used within an Accordion component");
   return e;
 }
-function Pt({ summary: e, open: t, onOpenChange: a, children: s, className: r, ...i }, l) {
+function Pt({ summary: e, open: t, onOpenChange: a, children: s, className: r, ...l }, i) {
   const [m, u] = P(t ?? !1), c = M(null);
   z(() => {
     t !== void 0 && u(t);
@@ -29,11 +29,11 @@ function Pt({ summary: e, open: t, onOpenChange: a, children: s, className: r, .
   return /* @__PURE__ */ o(ae.Provider, { value: { isOpen: m, toggle: p }, children: /* @__PURE__ */ y(
     "details",
     {
-      ref: l || c,
+      ref: i || c,
       className: d(D.item, r),
       open: m,
       ...N,
-      ...i,
+      ...l,
       children: [
         e,
         /* @__PURE__ */ o("div", { className: D.content, children: s })
@@ -44,18 +44,18 @@ function Pt({ summary: e, open: t, onOpenChange: a, children: s, className: r, .
 const se = n(Pt);
 se.displayName = "Accordion";
 const oe = n(
-  ({ children: e, right: t, clamp: a = 2, className: s, ...r }, i) => {
-    const { isOpen: l, toggle: m } = Gt(), u = M(null), c = (p) => {
+  ({ children: e, right: t, clamp: a = 2, className: s, ...r }, l) => {
+    const { isOpen: i, toggle: m } = Gt(), u = M(null), c = (p) => {
       p.preventDefault(), !(u.current && u.current.contains(p.target)) && m();
     };
     return /* @__PURE__ */ y(
       "summary",
       {
-        ref: i,
+        ref: l,
         className: d(D.trigger, s),
         onClick: c,
         role: "button",
-        "aria-expanded": l,
+        "aria-expanded": i,
         ...r,
         children: [
           /* @__PURE__ */ o("span", { className: D.label, style: { "--_clamp": a }, children: e }),
@@ -76,8 +76,8 @@ const na = Object.assign(se, {
     align: a = "center",
     wrap: s = "nowrap",
     "aria-label": r = "Avatar group",
-    children: i,
-    className: l,
+    children: l,
+    className: i,
     ...m
   }, u) => {
     const c = v({ align: a, direction: e, size: t, wrap: s });
@@ -85,12 +85,12 @@ const na = Object.assign(se, {
       "div",
       {
         ref: u,
-        className: d(St["avatar-group"], l),
+        className: d(St["avatar-group"], i),
         role: "group",
         "aria-label": r,
         ...c,
         ...m,
-        children: i
+        children: l
       }
     );
   }
@@ -113,25 +113,25 @@ function $t() {
     throw new Error("Tabs.Item must be used within a Tabs component");
   return e;
 }
-const ie = n(({ value: e, onChange: t, children: a, className: s }, r) => {
-  const i = M(null), l = M(/* @__PURE__ */ new Map()), [m, u] = P(0), [c, p] = P(0), N = () => {
-    const f = l.current.get(e);
-    if (!f || !i.current)
+const le = n(({ value: e, onChange: t, children: a, className: s }, r) => {
+  const l = M(null), i = M(/* @__PURE__ */ new Map()), [m, u] = P(0), [c, p] = P(0), N = () => {
+    const f = i.current.get(e);
+    if (!f || !l.current)
       return;
-    const h = i.current.getBoundingClientRect(), g = f.getBoundingClientRect(), ht = g.left - h.left + i.current.scrollLeft, { width: gt } = g;
+    const h = l.current.getBoundingClientRect(), g = f.getBoundingClientRect(), ht = g.left - h.left + l.current.scrollLeft, { width: gt } = g;
     u(ht), p(gt), f.scrollIntoView({
       behavior: "smooth",
       block: "nearest",
       inline: "center"
     });
   }, b = (f, h) => {
-    h && l.current.set(f, h);
+    h && i.current.set(f, h);
   };
   Ft(() => {
     N();
-  }, [e]), jt(i, N);
+  }, [e]), jt(l, N);
   const S = v({});
-  return /* @__PURE__ */ o(re.Provider, { value: { activeValue: e, onChange: t, registerTrigger: b }, children: /* @__PURE__ */ y("nav", { ref: ee(r, i), className: d(G.tabs, s), ...S, children: [
+  return /* @__PURE__ */ o(re.Provider, { value: { activeValue: e, onChange: t, registerTrigger: b }, children: /* @__PURE__ */ y("nav", { ref: ee(r, l), className: d(G.tabs, s), ...S, children: [
     /* @__PURE__ */ o("ul", { className: G.tablist, role: "tablist", children: a }),
     /* @__PURE__ */ o(
       "div",
@@ -145,14 +145,14 @@ const ie = n(({ value: e, onChange: t, children: a, className: s }, r) => {
     )
   ] }) });
 });
-ie.displayName = "Tabs";
-const le = n(
+le.displayName = "Tabs";
+const ie = n(
   ({ value: e, disabled: t = !1, children: a, className: s }, r) => {
-    const { activeValue: i, onChange: l, registerTrigger: m } = $t(), u = i === e;
+    const { activeValue: l, onChange: i, registerTrigger: m } = $t(), u = l === e;
     let c;
     t ? c = "disabled" : u ? c = "active" : c = "default";
     const p = () => {
-      t || l(e);
+      t || i(e);
     };
     return /* @__PURE__ */ o("li", { className: G.tabitem, children: /* @__PURE__ */ o(
       "button",
@@ -171,7 +171,7 @@ const le = n(
     ) });
   }
 );
-le.displayName = "Tabs.Item";
+ie.displayName = "Tabs.Item";
 function Et(e) {
   return {
     "aria-labelledby": `tabs-trigger-${e}`,
@@ -179,18 +179,18 @@ function Et(e) {
     role: "tabpanel"
   };
 }
-const da = Object.assign(ie, {
-  Item: le,
+const da = Object.assign(le, {
+  Item: ie,
   getPanelAttribute: Et
 }), _t = n(
-  ({ icon: e, title: t, subtitle: a, action: s, className: r, ...i }, l) => /* @__PURE__ */ y(
+  ({ icon: e, title: t, subtitle: a, action: s, className: r, ...l }, i) => /* @__PURE__ */ y(
     "section",
     {
-      ref: l,
+      ref: i,
       className: d(F["no-results"], r),
       role: "status",
       "aria-label": t,
-      ...i,
+      ...l,
       children: [
         /* @__PURE__ */ y("header", { className: F["no-results-header"], children: [
           /* @__PURE__ */ o("div", { className: F["no-results-icon"], children: /* @__PURE__ */ o(E, { as: e, color: "inherit", "aria-hidden": "true" }) }),
@@ -204,7 +204,7 @@ const da = Object.assign(ie, {
 );
 _t.displayName = "NoResults";
 const ce = n(
-  ({ layout: e, columns: t = "repeat(3, 1fr)", gap: a, children: s, className: r, style: i, ...l }, m) => {
+  ({ layout: e, columns: t = "repeat(3, 1fr)", gap: a, children: s, className: r, style: l, ...i }, m) => {
     const u = v({
       layout: e
     });
@@ -212,14 +212,14 @@ const ce = n(
       "dl",
       {
         ref: m,
-        className: d(wt["attribute-list"], r),
+        className: d(Bt["attribute-list"], r),
         ...u,
         style: {
           "--_columns": t,
           ...a !== void 0 && { "--_gap": typeof a == "number" ? `${a}px` : a },
-          ...i
+          ...l
         },
-        ...l,
+        ...i,
         children: s
       }
     );
@@ -227,16 +227,16 @@ const ce = n(
 );
 ce.displayName = "AttributeList";
 const ne = n(
-  ({ title: e, area: t, children: a, className: s, style: r, ...i }, l) => /* @__PURE__ */ y(
+  ({ title: e, area: t, children: a, className: s, style: r, ...l }, i) => /* @__PURE__ */ y(
     "div",
     {
-      ref: l,
+      ref: i,
       className: d(s),
       style: {
         "--_area": t,
         ...r
       },
-      ...i,
+      ...l,
       children: [
         /* @__PURE__ */ o("dt", { children: e }),
         /* @__PURE__ */ o("dd", { children: a })
@@ -254,8 +254,8 @@ const ma = Object.assign(ce, {
     align: a = "center",
     wrap: s = "nowrap",
     "aria-label": r = "Badge group",
-    children: i,
-    className: l,
+    children: l,
+    className: i,
     ...m
   }, u) => {
     const c = v({
@@ -268,47 +268,47 @@ const ma = Object.assign(ce, {
       "div",
       {
         ref: u,
-        className: d(Bt["badge-group"], l),
+        className: d(wt["badge-group"], i),
         role: "group",
         "aria-label": r,
         ...c,
         ...m,
-        children: i
+        children: l
       }
     );
   }
 );
 Ct.displayName = "BadgeGroup";
-function Vt({ as: e = "div", size: t = "md", border: a, children: s, className: r, ...i }, l) {
+function Vt({ as: e = "div", size: t = "md", border: a, children: s, className: r, ...l }, i) {
   const m = v({
     border: a,
     interactive: e === "button" ? "true" : "false",
     size: t
   });
-  return /* @__PURE__ */ o(e === "button" ? "button" : "div", { ref: l, className: d(C.card, r), ...m, ...i, children: s });
+  return /* @__PURE__ */ o(e === "button" ? "button" : "div", { ref: i, className: d(C.card, r), ...m, ...l, children: s });
 }
 const de = n(
   Vt
 );
 de.displayName = "Card";
 const me = n(
-  ({ justify: e, gap: t, children: a, className: s, ...r }, i) => {
-    const l = v({ gap: t, justify: e });
-    return /* @__PURE__ */ o("div", { ref: i, className: d(C.header, s), ...l, ...r, children: a });
+  ({ justify: e, gap: t, children: a, className: s, ...r }, l) => {
+    const i = v({ gap: t, justify: e });
+    return /* @__PURE__ */ o("div", { ref: l, className: d(C.header, s), ...i, ...r, children: a });
   }
 );
 me.displayName = "Card.Header";
 const ue = n(
-  ({ align: e, gap: t, children: a, className: s, ...r }, i) => {
-    const l = v({ align: e, gap: t });
-    return /* @__PURE__ */ o("div", { ref: i, className: d(C.body, s), ...l, ...r, children: a });
+  ({ align: e, gap: t, children: a, className: s, ...r }, l) => {
+    const i = v({ align: e, gap: t });
+    return /* @__PURE__ */ o("div", { ref: l, className: d(C.body, s), ...i, ...r, children: a });
   }
 );
 ue.displayName = "Card.Body";
 const pe = n(
-  ({ justify: e, gap: t, children: a, className: s, ...r }, i) => {
-    const l = v({ gap: t, justify: e });
-    return /* @__PURE__ */ o("div", { ref: i, className: d(C.footer, s), ...l, ...r, children: a });
+  ({ justify: e, gap: t, children: a, className: s, ...r }, l) => {
+    const i = v({ gap: t, justify: e });
+    return /* @__PURE__ */ o("div", { ref: l, className: d(C.footer, s), ...i, ...r, children: a });
   }
 );
 pe.displayName = "Card.Footer";
@@ -319,33 +319,31 @@ const ua = Object.assign(de, {
 }), be = A(void 0), Ne = n(
   ({
     id: e,
-    placement: t = "bottom",
+    placement: t,
     maxHeight: a = 400,
-    minWidth: s = 160,
-    maxWidth: r = 320,
-    gap: i = 8,
+    maxWidth: s = 320,
+    gap: r = 8,
     value: l,
-    onChange: m,
-    closeOnClick: u = !1,
-    children: c,
-    ...p
-  }, N) => {
-    const b = {
+    onChange: i,
+    closeOnClick: m = !1,
+    children: u,
+    ...c
+  }, p) => {
+    const N = {
       id: e,
-      closeOnClick: u,
-      onChange: m,
+      closeOnClick: m,
+      onChange: i,
       value: l
     };
-    return /* @__PURE__ */ o("div", { ref: N, ...p, children: /* @__PURE__ */ o(be.Provider, { value: b, children: /* @__PURE__ */ o(I, { id: e, placement: t, gap: i, triggerType: "focus", children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ o("div", { ref: p, ...c, children: /* @__PURE__ */ o(be.Provider, { value: N, children: /* @__PURE__ */ o(I, { id: e, placement: t, gap: r, type: "persisted", children: /* @__PURE__ */ o(
       "div",
       {
         className: H["menu-list"],
         style: {
           "--_max-height": `${a}px`,
-          "--_max-width": `${r}px`,
-          "--_min-width": `${s}px`
+          "--_max-width": `${s}px`
         },
-        children: c
+        children: u
       }
     ) }) }) });
   }
@@ -363,7 +361,7 @@ const Q = Ne;
 Q.getTriggerProps = kt;
 Q.close = Wt;
 const ye = n(
-  ({ value: e, disabled: t = !1, leftIcon: a, rightIcon: s, children: r, onClick: i, className: l, ...m }, u) => {
+  ({ value: e, disabled: t = !1, leftIcon: a, rightIcon: s, children: r, onClick: l, className: i, ...m }, u) => {
     const c = R(be), p = c != null && c.onChange && e !== void 0 ? c.value === e : !1, N = v({
       active: p,
       disabled: t
@@ -372,13 +370,13 @@ const ye = n(
         S.preventDefault();
         return;
       }
-      c != null && c.onChange && e !== void 0 && c.onChange(e), i == null || i(S), c != null && c.closeOnClick && (c != null && c.id) && I.close({ id: c.id });
+      c != null && c.onChange && e !== void 0 && c.onChange(e), l == null || l(S), c != null && c.closeOnClick && (c != null && c.id) && I.close({ id: c.id });
     };
     return /* @__PURE__ */ y(
       "button",
       {
         ref: u,
-        className: d(H["menu-item"], l),
+        className: d(H["menu-item"], i),
         disabled: t,
         ...N,
         ...m,
@@ -404,56 +402,56 @@ function fe() {
 }
 const he = n(
   ({ leftContent: e, rightContent: t, className: a, ...s }, r) => {
-    const i = fe(), l = typeof e == "function" ? e(i.selectedRows) : e, m = typeof t == "function" ? t(i.selectedRows) : t;
-    return /* @__PURE__ */ y("div", { ref: r, className: d(B.toolbar, a), ...s, children: [
-      /* @__PURE__ */ o("div", { children: l }),
+    const l = fe(), i = typeof e == "function" ? e(l.selectedRows) : e, m = typeof t == "function" ? t(l.selectedRows) : t;
+    return /* @__PURE__ */ y("div", { ref: r, className: d(w.toolbar, a), ...s, children: [
+      /* @__PURE__ */ o("div", { children: i }),
       /* @__PURE__ */ o("div", { children: m })
     ] });
   }
 );
 he.displayName = "Table.Toolbar";
-const ge = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(B.header, e), ...t }));
+const ge = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(w.header, e), ...t }));
 ge.displayName = "Table.Header";
-const Te = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(B.body, e), ...t }));
+const Te = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(w.body, e), ...t }));
 Te.displayName = "Table.Body";
-const Se = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(B.footer, e), ...t }));
+const Se = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(w.footer, e), ...t }));
 Se.displayName = "Table.Footer";
-const we = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(B.row, e), ...t }));
-we.displayName = "Table.Row";
-const Be = n(
-  ({ as: e = "div", area: t, variant: a, className: s, style: r, ...i }, l) => {
+const Be = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(w.row, e), ...t }));
+Be.displayName = "Table.Row";
+const we = n(
+  ({ as: e = "div", area: t, variant: a, className: s, style: r, ...l }, i) => {
     const m = v({
       variant: a
     });
     return /* @__PURE__ */ o(
       e,
       {
-        ref: l,
-        className: d(B.col, s),
+        ref: i,
+        className: d(w.col, s),
         style: {
           "--_area": t,
           ...r
         },
         ...m,
-        ...i
+        ...l
       }
     );
   }
 );
-Be.displayName = "Table.Col";
+we.displayName = "Table.Col";
 const Ae = n(
-  ({ rowId: e, isMain: t = !1, checked: a, indeterminate: s, onChange: r }, i) => {
-    const l = fe(), m = t ? l.selectedRows.size === l.allRowIds.size && l.allRowIds.size > 0 : e !== void 0 && l.selectedRows.has(e);
-    !t && e !== void 0 && l.registerRowId(e);
+  ({ rowId: e, isMain: t = !1, checked: a, indeterminate: s, onChange: r }, l) => {
+    const i = fe(), m = t ? i.selectedRows.size === i.allRowIds.size && i.allRowIds.size > 0 : e !== void 0 && i.selectedRows.has(e);
+    !t && e !== void 0 && i.registerRowId(e);
     const u = (p) => {
-      t ? l.onSelectAll(Array.from(l.allRowIds), p.target.checked) : e !== void 0 && l.onSelectionChange(e, p.target.checked), r == null || r(p.target.checked);
-    }, c = t && l.selectedRows.size > 0 && l.selectedRows.size < l.allRowIds.size;
+      t ? i.onSelectAll(Array.from(i.allRowIds), p.target.checked) : e !== void 0 && i.onSelectionChange(e, p.target.checked), r == null || r(p.target.checked);
+    }, c = t && i.selectedRows.size > 0 && i.selectedRows.size < i.allRowIds.size;
     return /* @__PURE__ */ y("label", { className: k.checkbox, children: [
       /* @__PURE__ */ o(
         "input",
         {
           ref: (p) => {
-            p && (p.indeterminate = c || s || !1, typeof i == "function" ? i(p) : i && (i.current = p));
+            p && (p.indeterminate = c || s || !1, typeof l == "function" ? l(p) : l && (l.current = p));
           },
           type: "checkbox",
           className: k.input,
@@ -468,9 +466,9 @@ const Ae = n(
 );
 Ae.displayName = "Table.Checkbox";
 const Re = n(
-  ({ as: e = "div", title: t, subtitle: a, size: s = "md", className: r, ...i }, l) => /* @__PURE__ */ y(e, { ref: l, className: d(B.col, r), "data-variant": "double-line", ...i, children: [
-    /* @__PURE__ */ o("div", { className: B["double-line-title"], "data-size": s, children: t }),
-    /* @__PURE__ */ o("div", { className: B["double-line-subtitle"], "data-size": s, children: a })
+  ({ as: e = "div", title: t, subtitle: a, size: s = "md", className: r, ...l }, i) => /* @__PURE__ */ y(e, { ref: i, className: d(w.col, r), "data-variant": "double-line", ...l, children: [
+    /* @__PURE__ */ o("div", { className: w["double-line-title"], "data-size": s, children: t }),
+    /* @__PURE__ */ o("div", { className: w["double-line-subtitle"], "data-size": s, children: a })
   ] })
 );
 Re.displayName = "Table.DoubleLine";
@@ -478,17 +476,17 @@ const Ie = _.Item;
 Ie.displayName = "Table.ActionItem";
 const Le = n(({ icon: e, children: t }, a) => {
   const s = O(), r = _.getTriggerProps({ id: s });
-  return /* @__PURE__ */ y("div", { ref: a, className: d(B.action), children: [
+  return /* @__PURE__ */ y("div", { ref: a, className: d(w.action), children: [
     /* @__PURE__ */ o(
       V,
       {
         ...r,
         as: e,
         variant: "ghost",
-        className: d(B["action-trigger"]),
+        className: d(w["action-trigger"]),
         "aria-label": "Actions",
-        onClick: (i) => {
-          i.stopPropagation();
+        onClick: (l) => {
+          l.stopPropagation();
         },
         size: "small"
       }
@@ -497,7 +495,7 @@ const Le = n(({ icon: e, children: t }, a) => {
   ] });
 });
 Le.displayName = "Table.Action";
-const xe = n(({ columns: e, children: t, className: a, style: s, onSelectionChange: r, ...i }, l) => {
+const xe = n(({ columns: e, children: t, className: a, style: s, onSelectionChange: r, ...l }, i) => {
   const [m, u] = P(/* @__PURE__ */ new Set()), c = M(/* @__PURE__ */ new Set()), p = (f, h) => {
     const g = new Set(m);
     h ? g.add(f) : g.delete(f), u(g), r == null || r({
@@ -524,13 +522,13 @@ const xe = n(({ columns: e, children: t, className: a, style: s, onSelectionChan
   return /* @__PURE__ */ o(ve.Provider, { value: S, children: /* @__PURE__ */ o(
     "div",
     {
-      ref: l,
-      className: d(B.table, a),
+      ref: i,
+      className: d(w.table, a),
       style: {
         "--_columns": e,
         ...s
       },
-      ...i,
+      ...l,
       children: t
     }
   ) });
@@ -541,8 +539,8 @@ const pa = Object.assign(xe, {
   Header: ge,
   Body: Te,
   Footer: Se,
-  Row: we,
-  Col: Be,
+  Row: Be,
+  Col: we,
   Checkbox: Ae,
   DoubleLine: Re,
   Action: Le,
@@ -554,8 +552,8 @@ const pa = Object.assign(xe, {
     align: a = "center",
     wrap: s = "nowrap",
     fluid: r = !1,
-    "aria-label": i = "Button group",
-    children: l,
+    "aria-label": l = "Button group",
+    children: i,
     className: m,
     ...u
   }, c) => {
@@ -572,10 +570,10 @@ const pa = Object.assign(xe, {
         ref: c,
         className: d(At["button-group"], m),
         role: "group",
-        "aria-label": i,
+        "aria-label": l,
         ...p,
         ...u,
-        children: l
+        children: i
       }
     );
   }
@@ -590,17 +588,17 @@ Me.displayName = "TopBar.Centred";
 const He = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: d(L["top-bar-trailing"], t), ...a, children: e }));
 He.displayName = "TopBar.Trailing";
 const Ge = n(
-  ({ as: e = "button", active: t, disabled: a, icon: s, className: r, children: i, ...l }, m) => /* @__PURE__ */ y(
+  ({ as: e = "button", active: t, disabled: a, icon: s, className: r, children: l, ...i }, m) => /* @__PURE__ */ y(
     e,
     {
       ref: m,
       className: d(L["top-bar-item"], r),
       "data-active": t ? "" : void 0,
       "data-disabled": a ? "" : void 0,
-      ...l,
+      ...i,
       children: [
         s && /* @__PURE__ */ o("span", { className: L["top-bar-item-icon"], children: s }),
-        i
+        l
       ]
     }
   )
@@ -615,7 +613,7 @@ const ba = Object.assign(Fe, {
   ListItem: Pe,
   Trailing: He
 }), ze = A(void 0), U = n(
-  ({ direction: e = "horizontal", gap: t, value: a, onChange: s, children: r, className: i, ...l }, m) => {
+  ({ direction: e = "horizontal", gap: t, value: a, onChange: s, children: r, className: l, ...i }, m) => {
     const u = v({ direction: e }), c = {
       lg: "var(--spacing-4)",
       md: "var(--spacing-3)",
@@ -629,14 +627,14 @@ const ba = Object.assign(Fe, {
       "nav",
       {
         ref: m,
-        className: d(j.nav, i),
+        className: d(j.nav, l),
         style: {
           ...t && {
             "--vers-comp-nav-gap": c[t]
           }
         },
         ...u,
-        ...l,
+        ...i,
         children: r
       }
     ) });
@@ -651,8 +649,8 @@ const je = n(
     value: a,
     disabled: s = !1,
     loading: r = !1,
-    leftIcon: i,
-    rightIcon: l,
+    leftIcon: l,
+    rightIcon: i,
     children: m,
     onClick: u,
     className: c,
@@ -681,9 +679,9 @@ const je = n(
         ...p,
         onClick: h,
         children: [
-          i && /* @__PURE__ */ o("span", { className: j["nav-item-icon"], children: /* @__PURE__ */ o(E, { as: i }) }),
+          l && /* @__PURE__ */ o("span", { className: j["nav-item-icon"], children: /* @__PURE__ */ o(E, { as: l }) }),
           m,
-          l && /* @__PURE__ */ o("span", { className: j["nav-item-icon"], children: /* @__PURE__ */ o(E, { as: l }) })
+          i && /* @__PURE__ */ o("span", { className: j["nav-item-icon"], children: /* @__PURE__ */ o(E, { as: i }) })
         ]
       }
     );
@@ -701,7 +699,7 @@ _e.displayName = "Sidebar.Body";
 const Ce = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(T["sidebar-footer"], t), children: e }));
 Ce.displayName = "Sidebar.Footer";
 const Ve = n(
-  ({ label: e, icon: t, defaultExpanded: a = !0, isExpanded: s, onExpandedChange: r, children: i, className: l }, m) => {
+  ({ label: e, icon: t, defaultExpanded: a = !0, isExpanded: s, onExpandedChange: r, children: l, className: i }, m) => {
     const [u, c] = P(a), p = s !== void 0 ? s : u, N = () => {
       const b = !p;
       c(b), r == null || r(b);
@@ -710,7 +708,7 @@ const Ve = n(
       "div",
       {
         ref: m,
-        className: d(T["sidebar-group"], l),
+        className: d(T["sidebar-group"], i),
         "data-expanded": p ? "" : void 0,
         children: [
           /* @__PURE__ */ y("button", { className: T["sidebar-group-header"], onClick: N, "aria-expanded": p, children: [
@@ -718,7 +716,7 @@ const Ve = n(
             /* @__PURE__ */ o("span", { className: T["sidebar-group-label"], children: e }),
             /* @__PURE__ */ o(E, { as: Z, className: T["sidebar-group-chevron"], size: "sm" })
           ] }),
-          /* @__PURE__ */ o("div", { className: T["sidebar-group-content"], children: /* @__PURE__ */ o("div", { children: i }) })
+          /* @__PURE__ */ o("div", { className: T["sidebar-group-content"], children: /* @__PURE__ */ o("div", { children: l }) })
         ]
       }
     );
@@ -726,18 +724,18 @@ const Ve = n(
 );
 Ve.displayName = "Sidebar.Group";
 const ke = n(
-  ({ as: e = "button", active: t, disabled: a, icon: s, action: r, className: i, children: l, ...m }, u) => /* @__PURE__ */ y(
+  ({ as: e = "button", active: t, disabled: a, icon: s, action: r, className: l, children: i, ...m }, u) => /* @__PURE__ */ y(
     e,
     {
       ref: u,
-      className: d(T["sidebar-item"], i),
+      className: d(T["sidebar-item"], l),
       "data-active": t ? "" : void 0,
       "data-disabled": a ? "" : void 0,
       "data-action": r ? "" : void 0,
       ...m,
       children: [
         s && /* @__PURE__ */ o("span", { className: T["sidebar-item-icon"], children: s }),
-        /* @__PURE__ */ o("span", { className: T["sidebar-item-text"], children: l }),
+        /* @__PURE__ */ o("span", { className: T["sidebar-item-text"], children: i }),
         r && /* @__PURE__ */ o("span", { className: T["sidebar-item-action"], children: r })
       ]
     }
@@ -763,7 +761,7 @@ function qt(e, t) {
 const qe = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("nav", { ref: s, className: d($["bottom-bar"], t), ...a, children: e }));
 qe.displayName = "BottomBar";
 const Je = n(
-  ({ as: e = "button", href: t, active: a = !1, disabled: s = !1, icon: r, children: i, onClick: l, className: m, ...u }, c) => {
+  ({ as: e = "button", href: t, active: a = !1, disabled: s = !1, icon: r, children: l, onClick: i, className: m, ...u }, c) => {
     const p = qt(e, "a"), N = v({
       active: a,
       disabled: s
@@ -772,7 +770,7 @@ const Je = n(
         h.preventDefault();
         return;
       }
-      l == null || l(h);
+      i == null || i(h);
     }, S = {
       className: d($["bottom-bar-item"], m),
       onClick: b,
@@ -782,7 +780,7 @@ const Je = n(
     };
     return p && (S.href = t), /* @__PURE__ */ y(e || "button", { ...S, children: [
       r && /* @__PURE__ */ o("span", { className: $["bottom-bar-item-icon"], children: r }),
-      i && /* @__PURE__ */ o("span", { className: $["bottom-bar-item-text"], children: i })
+      l && /* @__PURE__ */ o("span", { className: $["bottom-bar-item-text"], children: l })
     ] });
   }
 );
@@ -820,11 +818,11 @@ const fa = Object.assign(Ke, {
   SideLeft: Ze,
   SideRight: Oe
 });
-function Jt({ columns: e = "1fr", children: t, className: a, style: s, ...r }, i) {
+function Jt({ columns: e = "1fr", children: t, className: a, style: s, ...r }, l) {
   return /* @__PURE__ */ o(
     "form",
     {
-      ref: i,
+      ref: l,
       className: d(X["form-group"], a),
       style: {
         "--_columns": e,
@@ -838,10 +836,10 @@ function Jt({ columns: e = "1fr", children: t, className: a, style: s, ...r }, i
 const tt = n(Jt);
 tt.displayName = "FormGroup";
 const at = n(
-  ({ area: e, children: t, className: a, style: s, ...r }, i) => /* @__PURE__ */ o(
+  ({ area: e, children: t, className: a, style: s, ...r }, l) => /* @__PURE__ */ o(
     "div",
     {
-      ref: i,
+      ref: l,
       className: d(X.field, a),
       style: {
         "--_area": e,
@@ -883,12 +881,12 @@ function Kt({ direction: e = "column", children: t, className: a, ...s }, r) {
 const ot = n(Kt);
 ot.displayName = "Features";
 const rt = n(
-  ({ icon: e, children: t, className: a, "aria-label": s, ...r }, i) => {
+  ({ icon: e, children: t, className: a, "aria-label": s, ...r }, l) => {
     const m = `features-item-${O()}`, u = s ? I.getTooltipTriggerProps({ id: m }) : {};
     return /* @__PURE__ */ y(
       "li",
       {
-        ref: i,
+        ref: l,
         "aria-label": s,
         className: d(W.item, a),
         ...u,
@@ -905,9 +903,9 @@ const rt = n(
 rt.displayName = "Features.Item";
 const Qt = Object.assign(ot, {
   Item: rt
-}), ga = Qt, it = xt.forwardRef(
-  ({ isOpen: e, onOpenChange: t, children: a, onClick: s, ...r }, i) => {
-    const l = M(null), m = i || l;
+}), ga = Qt, lt = xt.forwardRef(
+  ({ isOpen: e, onOpenChange: t, children: a, onClick: s, ...r }, l) => {
+    const i = M(null), m = l || i;
     z(() => {
       const c = m.current;
       if (c) {
@@ -942,27 +940,27 @@ const Qt = Object.assign(ot, {
     return /* @__PURE__ */ o("dialog", { ...r, ref: m, onClick: u, children: a });
   }
 );
-it.displayName = "Dialog";
-const Y = it, lt = A(void 0), Ut = () => {
-  const e = R(lt);
+lt.displayName = "Dialog";
+const Y = lt, it = A(void 0), Ut = () => {
+  const e = R(it);
   if (!e)
     throw new Error("Drawer subcomponents must be used within Drawer");
   return e;
 }, ct = n(
-  ({ open: e, onOpenChange: t, placement: a = "right", children: s, className: r, ...i }, l) => {
+  ({ open: e, onOpenChange: t, placement: a = "right", children: s, className: r, ...l }, i) => {
     const m = v({
       placement: a
     });
-    return /* @__PURE__ */ o(lt.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ o(it.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ o(
       Y,
       {
-        ref: l,
+        ref: i,
         isOpen: e,
         onOpenChange: t,
         className: d(e && Rt.drawer, r),
         ...m,
-        ...i,
-        children: /* @__PURE__ */ o("div", { className: w.content, children: s })
+        ...l,
+        children: /* @__PURE__ */ o("div", { className: B.content, children: s })
       }
     ) });
   }
@@ -977,29 +975,29 @@ const nt = n(({ onClick: e, ...t }, a) => {
       variant: "ghost",
       as: q,
       "aria-label": "Close",
-      onClick: (i) => {
-        s(), e == null || e(i);
+      onClick: (l) => {
+        s(), e == null || e(l);
       },
-      className: w.closeButton,
+      className: B.closeButton,
       ...t
     }
   );
 });
 nt.displayName = "Drawer.CloseButton";
 const dt = n(
-  ({ action: e, children: t, tabs: a, className: s, ...r }, i) => /* @__PURE__ */ y(
+  ({ action: e, children: t, tabs: a, className: s, ...r }, l) => /* @__PURE__ */ y(
     "div",
     {
-      ref: i,
-      className: d(w.header, s),
+      ref: l,
+      className: d(B.header, s),
       ...r,
       ...e && { "data-action": "" },
       ...a && { "data-tabs": "" },
       children: [
         e ? /* @__PURE__ */ y(Tt, { children: [
-          /* @__PURE__ */ o("div", { className: w.headerTop, children: e }),
-          t && /* @__PURE__ */ o("div", { className: w.headerContent, children: t })
-        ] }) : /* @__PURE__ */ o("div", { className: w.headerTop, children: t }),
+          /* @__PURE__ */ o("div", { className: B.headerTop, children: e }),
+          t && /* @__PURE__ */ o("div", { className: B.headerContent, children: t })
+        ] }) : /* @__PURE__ */ o("div", { className: B.headerTop, children: t }),
         a
       ]
     }
@@ -1018,7 +1016,7 @@ const Ta = Object.assign(ct, {
     throw new Error("Modal subcomponents must be used within Modal");
   return e;
 }, ut = n(
-  ({ open: e, onOpenChange: t, size: a, position: s, children: r, className: i, ...l }, m) => {
+  ({ open: e, onOpenChange: t, size: a, position: s, children: r, className: l, ...i }, m) => {
     const u = v({ size: a, position: s });
     return /* @__PURE__ */ o(mt.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ o(
       Y,
@@ -1026,11 +1024,11 @@ const Ta = Object.assign(ct, {
         ref: m,
         isOpen: e,
         onOpenChange: t,
-        className: d(e && It.modal, i),
+        className: d(e && It.modal, l),
         "data-modal": "",
         ...u,
-        ...l,
-        children: /* @__PURE__ */ o("div", { className: w.content, children: r })
+        ...i,
+        children: /* @__PURE__ */ o("div", { className: B.content, children: r })
       }
     ) });
   }
@@ -1045,16 +1043,16 @@ const pt = n(({ onClick: e, ...t }, a) => {
       variant: "ghost",
       as: q,
       "aria-label": "Close",
-      onClick: (i) => {
-        s(), e == null || e(i);
+      onClick: (l) => {
+        s(), e == null || e(l);
       },
-      className: w.closeButton,
+      className: B.closeButton,
       ...t
     }
   );
 });
 pt.displayName = "Modal.CloseButton";
-const bt = n(({ action: e, children: t, className: a, ...s }, r) => /* @__PURE__ */ y("div", { ref: r, className: d(w.header, "modal-header", a), "data-modal-header": "", ...s, children: [
+const bt = n(({ action: e, children: t, className: a, ...s }, r) => /* @__PURE__ */ y("div", { ref: r, className: d(B.header, "modal-header", a), "data-modal-header": "", ...s, children: [
   /* @__PURE__ */ o("div", { children: t }),
   e && /* @__PURE__ */ o("div", { className: "modal-header-action", children: e })
 ] }));
@@ -1064,7 +1062,7 @@ const Nt = n(
     "div",
     {
       ref: r,
-      className: d(w.footer, "modal-footer", a),
+      className: d(B.footer, "modal-footer", a),
       "data-modal-footer": "",
       "data-align": e,
       ...s,
@@ -1085,15 +1083,15 @@ const Sa = Object.assign(ut, {
     throw new Error("BottomSheet subcomponents must be used within BottomSheet");
   return e;
 }, vt = n(
-  ({ open: e, onOpenChange: t, children: a, className: s, ...r }, i) => /* @__PURE__ */ o(yt.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ o(
+  ({ open: e, onOpenChange: t, children: a, className: s, ...r }, l) => /* @__PURE__ */ o(yt.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ o(
     Y,
     {
-      ref: i,
+      ref: l,
       isOpen: e,
       onOpenChange: t,
       className: d(Lt.bottomSheet, s),
       ...r,
-      children: /* @__PURE__ */ o("div", { className: w.content, children: a })
+      children: /* @__PURE__ */ o("div", { className: B.content, children: a })
     }
   ) })
 );
@@ -1108,17 +1106,17 @@ const ft = n(
         ref: a,
         variant: "ghost",
         "aria-label": "Close",
-        onClick: (i) => {
-          s(), e == null || e(i);
+        onClick: (l) => {
+          s(), e == null || e(l);
         },
-        className: w.closeButton,
+        className: B.closeButton,
         ...t
       }
     );
   }
 );
 ft.displayName = "BottomSheet.CloseButton";
-const wa = Object.assign(vt, {
+const Ba = Object.assign(vt, {
   Body: K,
   CloseButton: ft,
   Footer: te,
@@ -1132,7 +1130,7 @@ export {
   zt as AvatarGroup,
   Ct as BadgeGroup,
   va as BottomBar,
-  wa as BottomSheet,
+  Ba as BottomSheet,
   Xt as ButtonGroup,
   ua as Card,
   Y as Dialog,