@versaur/react 1.0.4 → 1.0.6

package/dist/blocks.js

@@ -1,100 +1,17 @@
 import { jsx as s, jsxs as y, Fragment as K } from "react/jsx-runtime";
-import le, { forwardRef as l, useEffect as P, createContext as w, useRef as q, useState as $, useLayoutEffect as ne, useContext as S, useCallback as de } from "react";
+import { avatarGroupStyles as lt, tabsStyles as H, noResultsStyles as x, attributeListStyles as nt, badgeGroupStyles as dt, cardStyles as j, tableStyles as w, buttonGroupStyles as ct, menuStyles as M, topBarStyles as S, navStyles as D, sidebarStyles as h, bottomBarStyles as C, appLayoutStyles as A, drawerStyles as mt, modalStyles as ut, bottomSheetStyles as bt } from "@versaur/core/blocks";
+import pt, { forwardRef as l, useEffect as G, createContext as L, useRef as z, useState as k, useLayoutEffect as Nt, useContext as I, useCallback as yt } from "react";
+import { u as N } from "./use-data-attrs-iPFyfiKN.js";
 import { c as d } from "./cx-B9vmfsc1.js";
-import { u as _ } from "./use-data-attrs-iPFyfiKN.js";
-import { c as Q, I as D, B as C, T as z, H as ce } from "./tooltip-CmKPCktA.js";
-import { c as F } from "./checkbox.module-D4Do_b6S.js";
-import { ChevronUpIcon as me, ChevronDownIcon as E, MenuIcon as ue, XIcon as G } from "@versaur/icons";
-import { o as N, c as V, a as Y, O as W, b as be } from "./overlay-parts-YglazEA-.js";
-const pe = {
-  "button-group": "_button-group_4891p_2"
-}, _e = {
-  "avatar-group": "_avatar-group_18m4c_2"
-}, ye = {
-  "badge-group": "_badge-group_g5tbn_2"
-}, he = "_card_1kvwt_1", ve = "_header_1kvwt_112", Ne = "_body_1kvwt_166", fe = "_footer_1kvwt_210", j = {
-  card: he,
-  header: ve,
-  body: Ne,
-  footer: fe
-}, ge = "_table_1kl8p_2", A = {
-  table: ge,
-  "table-header": "_table-header_1kl8p_45",
-  "table-head": "_table-head_1kl8p_45",
-  "table-body": "_table-body_1kl8p_84",
-  "table-footer": "_table-footer_1kl8p_127",
-  "table-cell": "_table-cell_1kl8p_146"
-}, Be = {
-  "attribute-list": "_attribute-list_1xjik_2"
-}, Te = "_tabs_k1lh4_6", we = "_tablist_k1lh4_27", Se = "_tabitem_k1lh4_41", Ae = "_trigger_k1lh4_51", M = {
-  tabs: Te,
-  tablist: we,
-  tabitem: Se,
-  trigger: Ae,
-  "tabs-thumb": "_tabs-thumb_k1lh4_142"
-}, Le = "_nav_114f4_2", H = {
-  nav: Le,
-  "nav-item": "_nav-item_114f4_19",
-  "nav-item-icon": "_nav-item-icon_114f4_99"
-}, R = {
-  "menu-list": "_menu-list_1rwzn_4",
-  "menu-item": "_menu-item_1rwzn_34",
-  "menu-item-label": "_menu-item-label_1rwzn_55",
-  "menu-item-icon": "_menu-item-icon_1rwzn_60"
-}, xe = "_sidebar_1u8ap_2", v = {
-  sidebar: xe,
-  "sidebar-header": "_sidebar-header_1u8ap_31",
-  "sidebar-body": "_sidebar-body_1u8ap_42",
-  "sidebar-footer": "_sidebar-footer_1u8ap_54",
-  "sidebar-group": "_sidebar-group_1u8ap_66",
-  "sidebar-group-header": "_sidebar-group-header_1u8ap_78",
-  "sidebar-group-label": "_sidebar-group-label_1u8ap_109",
-  "sidebar-group-chevron": "_sidebar-group-chevron_1u8ap_117",
-  "sidebar-group-content": "_sidebar-group-content_1u8ap_132",
-  "sidebar-item-list": "_sidebar-item-list_1u8ap_150",
-  "sidebar-item": "_sidebar-item_1u8ap_150",
-  "sidebar-item-icon": "_sidebar-item-icon_1u8ap_202",
-  "sidebar-item-text": "_sidebar-item-text_1u8ap_212",
-  "sidebar-item-action": "_sidebar-item-action_1u8ap_220",
-  "sidebar-divider": "_sidebar-divider_1u8ap_238"
-}, T = {
-  "top-bar": "_top-bar_qibl6_2",
-  "top-bar-leading": "_top-bar-leading_qibl6_24",
-  "top-bar-centred": "_top-bar-centred_qibl6_32",
-  "top-bar-trailing": "_top-bar-trailing_qibl6_41",
-  "top-bar-list-item": "_top-bar-list-item_qibl6_49",
-  "top-bar-item": "_top-bar-item_qibl6_56",
-  "top-bar-item-icon": "_top-bar-item-icon_qibl6_100"
-}, k = {
-  "bottom-bar": "_bottom-bar_r49lm_2",
-  "bottom-bar-item": "_bottom-bar-item_r49lm_38",
-  "bottom-bar-item-icon": "_bottom-bar-item-icon_r49lm_84",
-  "bottom-bar-item-text": "_bottom-bar-item-text_r49lm_94"
-}, L = {
-  "app-layout": "_app-layout_nvm54_2",
-  "app-layout-header": "_app-layout-header_nvm54_25",
-  "app-layout-body": "_app-layout-body_nvm54_34",
-  "app-layout-main": "_app-layout-main_nvm54_87",
-  "app-layout-side-left": "_app-layout-side-left_nvm54_141",
-  "app-layout-side-right": "_app-layout-side-right_nvm54_151",
-  "app-layout-bottom": "_app-layout-bottom_nvm54_161"
-}, x = {
-  "no-results": "_no-results_qh56o_1",
-  "no-results-header": "_no-results-header_qh56o_20",
-  "no-results-icon": "_no-results-icon_qh56o_30",
-  "no-results-title": "_no-results-title_qh56o_41",
-  "no-results-subtitle": "_no-results-subtitle_qh56o_49",
-  "no-results-action": "_no-results-action_qh56o_58"
-}, Ie = "_drawer_1pkzl_1", Re = {
-  drawer: Ie
-}, Me = "_modal_lpscz_1", He = {
-  modal: Me
-}, ke = "_bottomSheet_14nkl_1", De = {
-  bottomSheet: ke
-}, Ce = l(
+import { c as Q, I as F, B as P, T as $, H as vt } from "./tooltip-M8EGI3lZ.js";
+import { checkboxStyles as E } from "@versaur/core/forms";
+import { ChevronUpIcon as ht, ChevronDownIcon as V, MenuIcon as ft, XIcon as W } from "@versaur/icons";
+import { overlayPartsStyles as f } from "@versaur/core/utils";
+import { c as _, a as Y, O as U, b as gt } from "./overlay-parts-Zq9CuT31.js";
+const Bt = l(
   ({
-    direction: t = "horizontal",
-    size: e = "md",
+    direction: e = "horizontal",
+    size: t = "md",
     align: a = "center",
     wrap: o = "nowrap",
     "aria-label": r = "Avatar group",
@@ -102,12 +19,12 @@ const pe = {
     className: c,
     ...m
   }, u) => {
-    const n = _({ align: a, direction: t, size: e, wrap: o });
+    const n = N({ align: a, direction: e, size: t, wrap: o });
     return /* @__PURE__ */ s(
       "div",
       {
         ref: u,
-        className: d(_e["avatar-group"], c),
+        className: d(lt["avatar-group"], c),
         role: "group",
         "aria-label": r,
         ...n,
@@ -117,48 +34,48 @@ const pe = {
     );
   }
 );
-Ce.displayName = "AvatarGroup";
-function ze(t, e) {
-  P(() => {
-    if (!t.current)
+Bt.displayName = "AvatarGroup";
+function Tt(e, t) {
+  G(() => {
+    if (!e.current)
       return;
-    const a = new ResizeObserver(e);
-    return a.observe(t.current), () => {
+    const a = new ResizeObserver(t);
+    return a.observe(e.current), () => {
       a.disconnect();
     };
-  }, [t, e]);
+  }, [e, t]);
 }
-const Z = w(void 0);
-function je() {
-  const t = S(Z);
-  if (!t)
+const Z = L(void 0);
+function St() {
+  const e = I(Z);
+  if (!e)
     throw new Error("Tabs.Item must be used within a Tabs component");
-  return t;
+  return e;
 }
-const O = l(({ value: t, onChange: e, children: a, className: o }, r) => {
-  const i = q(null), c = q(/* @__PURE__ */ new Map()), [m, u] = $(0), [n, b] = $(0), h = () => {
-    const B = c.current.get(t);
-    if (!B || !i.current)
+const O = l(({ value: e, onChange: t, children: a, className: o }, r) => {
+  const i = z(null), c = z(/* @__PURE__ */ new Map()), [m, u] = k(0), [n, b] = k(0), v = () => {
+    const T = c.current.get(e);
+    if (!T || !i.current)
       return;
-    const g = i.current.getBoundingClientRect(), I = B.getBoundingClientRect(), re = I.left - g.left + i.current.scrollLeft, { width: ie } = I;
-    u(re), b(ie), B.scrollIntoView({
+    const B = i.current.getBoundingClientRect(), R = T.getBoundingClientRect(), rt = R.left - B.left + i.current.scrollLeft, { width: it } = R;
+    u(rt), b(it), T.scrollIntoView({
       behavior: "smooth",
       block: "nearest",
       inline: "center"
     });
-  }, p = (B, g) => {
-    g && c.current.set(B, g);
+  }, p = (T, B) => {
+    B && c.current.set(T, B);
   };
-  ne(() => {
-    h();
-  }, [t]), ze(i, h);
-  const f = _({});
-  return /* @__PURE__ */ s(Z.Provider, { value: { activeValue: t, onChange: e, registerTrigger: p }, children: /* @__PURE__ */ y("nav", { ref: Q(r, i), className: d(M.tabs, o), ...f, children: [
-    /* @__PURE__ */ s("ul", { className: M.tablist, role: "tablist", children: a }),
+  Nt(() => {
+    v();
+  }, [e]), Tt(i, v);
+  const g = N({});
+  return /* @__PURE__ */ s(Z.Provider, { value: { activeValue: e, onChange: t, registerTrigger: p }, children: /* @__PURE__ */ y("nav", { ref: Q(r, i), className: d(H.tabs, o), ...g, children: [
+    /* @__PURE__ */ s("ul", { className: H.tablist, role: "tablist", children: a }),
     /* @__PURE__ */ s(
       "div",
       {
-        className: M["tabs-thumb"],
+        className: H["tabs-thumb"],
         style: {
           left: `${m}px`,
           width: `${n}px`
@@ -168,87 +85,97 @@ const O = l(({ value: t, onChange: e, children: a, className: o }, r) => {
   ] }) });
 });
 O.displayName = "Tabs";
-const tt = l(
-  ({ value: t, disabled: e = !1, children: a, className: o }, r) => {
-    const { activeValue: i, onChange: c, registerTrigger: m } = je(), u = i === t;
+const ee = l(
+  ({ value: e, disabled: t = !1, children: a, className: o }, r) => {
+    const { activeValue: i, onChange: c, registerTrigger: m } = St(), u = i === e;
     let n;
-    e ? n = "disabled" : u ? n = "active" : n = "default";
+    t ? n = "disabled" : u ? n = "active" : n = "default";
     const b = () => {
-      e || c(t);
+      t || c(e);
     };
-    return /* @__PURE__ */ s("li", { className: M.tabitem, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ s("li", { className: H.tabitem, children: /* @__PURE__ */ s(
       "button",
       {
-        ref: Q(r, (h) => m(t, h)),
-        className: d(M.trigger, o),
+        ref: Q(r, (v) => m(e, v)),
+        className: d(H.trigger, o),
         role: "tab",
-        id: `tabs-trigger-${t}`,
+        id: `tabs-trigger-${e}`,
         "aria-selected": u,
-        "aria-controls": `tabs-panel-${t}`,
+        "aria-controls": `tabs-panel-${e}`,
         "data-state": n,
-        disabled: e,
+        disabled: t,
         onClick: b,
         children: a
       }
     ) });
   }
 );
-tt.displayName = "Tabs.Item";
-function Fe(t) {
+ee.displayName = "Tabs.Item";
+function wt(e) {
   return {
-    "aria-labelledby": `tabs-trigger-${t}`,
-    id: `tabs-panel-${t}`,
+    "aria-labelledby": `tabs-trigger-${e}`,
+    id: `tabs-panel-${e}`,
     role: "tabpanel"
   };
 }
-const ra = Object.assign(O, {
-  Item: tt,
-  getPanelAttribute: Fe
-}), Pe = l(
-  ({ icon: t, title: e, subtitle: a, action: o, className: r, ...i }, c) => /* @__PURE__ */ y("section", { ref: c, className: d(x["no-results"], r), role: "status", "aria-label": e, ...i, children: [
-    /* @__PURE__ */ y("header", { className: x["no-results-header"], children: [
-      /* @__PURE__ */ s("div", { className: x["no-results-icon"], children: /* @__PURE__ */ s(D, { as: t, color: "inherit", "aria-hidden": "true" }) }),
-      /* @__PURE__ */ s("h5", { className: x["no-results-title"], children: e })
-    ] }),
-    a && /* @__PURE__ */ s("p", { className: x["no-results-subtitle"], children: a }),
-    o && /* @__PURE__ */ s("div", { className: x["no-results-action"], role: "group", "aria-label": "Available actions", children: o })
-  ] })
+const qt = Object.assign(O, {
+  Item: ee,
+  getPanelAttribute: wt
+}), At = l(
+  ({ icon: e, title: t, subtitle: a, action: o, className: r, ...i }, c) => /* @__PURE__ */ y(
+    "section",
+    {
+      ref: c,
+      className: d(x["no-results"], r),
+      role: "status",
+      "aria-label": t,
+      ...i,
+      children: [
+        /* @__PURE__ */ y("header", { className: x["no-results-header"], children: [
+          /* @__PURE__ */ s("div", { className: x["no-results-icon"], children: /* @__PURE__ */ s(F, { as: e, color: "inherit", "aria-hidden": "true" }) }),
+          /* @__PURE__ */ s("h5", { className: x["no-results-title"], children: t })
+        ] }),
+        a && /* @__PURE__ */ s("p", { className: x["no-results-subtitle"], children: a }),
+        o && /* @__PURE__ */ s("div", { className: x["no-results-action"], role: "group", "aria-label": "Available actions", children: o })
+      ]
+    }
+  )
 );
-Pe.displayName = "NoResults";
-const et = w(void 0), qe = () => {
-  const t = S(et);
-  if (!t)
+At.displayName = "NoResults";
+const te = L(void 0), Lt = () => {
+  const e = I(te);
+  if (!e)
     throw new Error("AttributeList.Item must be used within an AttributeList component");
-  return t;
-}, at = l(
-  ({ columns: t = "3", children: e, className: a, ...o }, r) => {
-    const i = _({
-      columns: t
+  return e;
+}, ae = l(
+  ({ columns: e = "3", children: t, className: a, ...o }, r) => {
+    const i = N({
+      columns: e
     });
-    return /* @__PURE__ */ s(et.Provider, { value: { columns: t }, children: /* @__PURE__ */ s("dl", { ref: r, className: d(Be["attribute-list"], a), ...i, ...o, children: e }) });
+    return /* @__PURE__ */ s(te.Provider, { value: { columns: e }, children: /* @__PURE__ */ s("dl", { ref: r, className: d(nt["attribute-list"], a), ...i, ...o, children: t }) });
   }
 );
-at.displayName = "AttributeList";
-const st = l(
-  ({ title: t, columnSpan: e = "1", contentLineClamp: a = "2", children: o, className: r }, i) => {
-    qe();
-    const c = _({
-      "column-span": e,
+ae.displayName = "AttributeList";
+const se = l(
+  ({ title: e, columnSpan: t = "1", contentLineClamp: a = "2", children: o, className: r }, i) => {
+    Lt();
+    const c = N({
+      "column-span": t,
       "content-line-clamp": a
     });
     return /* @__PURE__ */ y("div", { ref: i, className: d(r), ...c, children: [
-      /* @__PURE__ */ s("dt", { children: t }),
+      /* @__PURE__ */ s("dt", { children: e }),
       /* @__PURE__ */ s("dd", { children: o })
     ] });
   }
 );
-st.displayName = "AttributeList.Item";
-const ia = Object.assign(at, {
-  Item: st
-}), $e = l(
+se.displayName = "AttributeList.Item";
+const Jt = Object.assign(ae, {
+  Item: se
+}), It = l(
   ({
-    gap: t = "md",
-    direction: e = "horizontal",
+    gap: e = "md",
+    direction: t = "horizontal",
     align: a = "center",
     wrap: o = "nowrap",
     "aria-label": r = "Badge group",
@@ -256,17 +183,17 @@ const ia = Object.assign(at, {
     className: c,
     ...m
   }, u) => {
-    const n = _({
+    const n = N({
       align: a,
-      direction: e,
-      gap: t,
+      direction: t,
+      gap: e,
       wrap: o
     });
     return /* @__PURE__ */ s(
       "div",
       {
         ref: u,
-        className: d(ye["badge-group"], c),
+        className: d(dt["badge-group"], c),
         role: "group",
         "aria-label": r,
         ...n,
@@ -276,62 +203,68 @@ const ia = Object.assign(at, {
     );
   }
 );
-$e.displayName = "BadgeGroup";
-function Ee({ as: t = "div", size: e = "md", border: a, children: o, className: r, ...i }, c) {
-  const m = _({
+It.displayName = "BadgeGroup";
+function xt({ as: e = "div", size: t = "md", border: a, children: o, className: r, ...i }, c) {
+  const m = N({
     border: a,
-    interactive: t === "button" ? "true" : "false",
-    size: e
+    interactive: e === "button" ? "true" : "false",
+    size: t
   });
-  return /* @__PURE__ */ s(t === "button" ? "button" : "div", { ref: c, className: d(j.card, r), ...m, ...i, children: o });
+  return /* @__PURE__ */ s(e === "button" ? "button" : "div", { ref: c, className: d(j.card, r), ...m, ...i, children: o });
 }
-const ot = l(
-  Ee
+const oe = l(
+  xt
 );
-ot.displayName = "Card";
-const rt = l(({ justify: t, gap: e, children: a, className: o, ...r }, i) => {
-  const c = _({ gap: e, justify: t });
-  return /* @__PURE__ */ s("div", { ref: i, className: d(j.header, o), ...c, ...r, children: a });
-});
-rt.displayName = "Card.Header";
-const it = l(({ align: t, gap: e, children: a, className: o, ...r }, i) => {
-  const c = _({ align: t, gap: e });
-  return /* @__PURE__ */ s("div", { ref: i, className: d(j.body, o), ...c, ...r, children: a });
-});
-it.displayName = "Card.Body";
-const lt = l(({ justify: t, gap: e, children: a, className: o, ...r }, i) => {
-  const c = _({ gap: e, justify: t });
-  return /* @__PURE__ */ s("div", { ref: i, className: d(j.footer, o), ...c, ...r, children: a });
-});
-lt.displayName = "Card.Footer";
-const la = Object.assign(ot, {
-  Body: it,
-  Footer: lt,
-  Header: rt
-}), nt = l(({ className: t, ...e }, a) => /* @__PURE__ */ s("thead", { ref: a, className: d(A["table-header"], t), ...e }));
-nt.displayName = "Table.Header";
-const dt = l(({ className: t, ...e }, a) => /* @__PURE__ */ s("tbody", { ref: a, className: d(A["table-body"], t), ...e }));
-dt.displayName = "Table.Body";
-const ct = l(({ className: t, ...e }, a) => /* @__PURE__ */ s("tfoot", { ref: a, className: d(A["table-footer"], t), ...e }));
-ct.displayName = "Table.Footer";
-const mt = l(({ onClick: t, className: e, ...a }, o) => /* @__PURE__ */ s("tr", { ref: o, className: d(e), "data-clickable": t ? "true" : void 0, onClick: t, ...a }));
-mt.displayName = "Table.Row";
-const ut = l(
-  ({ sortable: t, sortDirection: e, onSort: a, children: o, className: r, ...i }, c) => {
+oe.displayName = "Card";
+const re = l(
+  ({ justify: e, gap: t, children: a, className: o, ...r }, i) => {
+    const c = N({ gap: t, justify: e });
+    return /* @__PURE__ */ s("div", { ref: i, className: d(j.header, o), ...c, ...r, children: a });
+  }
+);
+re.displayName = "Card.Header";
+const ie = l(
+  ({ align: e, gap: t, children: a, className: o, ...r }, i) => {
+    const c = N({ align: e, gap: t });
+    return /* @__PURE__ */ s("div", { ref: i, className: d(j.body, o), ...c, ...r, children: a });
+  }
+);
+ie.displayName = "Card.Body";
+const le = l(
+  ({ justify: e, gap: t, children: a, className: o, ...r }, i) => {
+    const c = N({ gap: t, justify: e });
+    return /* @__PURE__ */ s("div", { ref: i, className: d(j.footer, o), ...c, ...r, children: a });
+  }
+);
+le.displayName = "Card.Footer";
+const Kt = Object.assign(oe, {
+  Body: ie,
+  Footer: le,
+  Header: re
+}), ne = l(({ className: e, ...t }, a) => /* @__PURE__ */ s("thead", { ref: a, className: d(w["table-header"], e), ...t }));
+ne.displayName = "Table.Header";
+const de = l(({ className: e, ...t }, a) => /* @__PURE__ */ s("tbody", { ref: a, className: d(w["table-body"], e), ...t }));
+de.displayName = "Table.Body";
+const ce = l(({ className: e, ...t }, a) => /* @__PURE__ */ s("tfoot", { ref: a, className: d(w["table-footer"], e), ...t }));
+ce.displayName = "Table.Footer";
+const me = l(({ onClick: e, className: t, ...a }, o) => /* @__PURE__ */ s("tr", { ref: o, className: d(t), "data-clickable": e ? "true" : void 0, onClick: e, ...a }));
+me.displayName = "Table.Row";
+const ue = l(
+  ({ sortable: e, sortDirection: t, onSort: a, children: o, className: r, ...i }, c) => {
     const m = () => {
-      if (!t || !a)
+      if (!e || !a)
         return;
       let n = "asc";
-      e === "asc" ? n = "desc" : e === "desc" && (n = null), a(n);
-    }, u = _({
-      sortable: t ? "true" : void 0
+      t === "asc" ? n = "desc" : t === "desc" && (n = null), a(n);
+    }, u = N({
+      sortable: e ? "true" : void 0
     });
     return /* @__PURE__ */ s(
       "th",
       {
         ref: c,
-        className: d(A["table-head"], r),
-        onClick: t ? m : void 0,
+        className: d(w["table-head"], r),
+        onClick: e ? m : void 0,
         ...u,
         ...i,
         children: /* @__PURE__ */ y(
@@ -345,11 +278,11 @@ const ut = l(
             },
             children: [
               o,
-              t && /* @__PURE__ */ y(K, { children: [
-                e === "asc" && /* @__PURE__ */ s(me, { style: { flexShrink: 0, height: "1em", width: "1em" } }),
-                e === "desc" && /* @__PURE__ */ s(E, { style: { flexShrink: 0, height: "1em", width: "1em" } }),
-                !e && /* @__PURE__ */ s(
-                  E,
+              e && /* @__PURE__ */ y(K, { children: [
+                t === "asc" && /* @__PURE__ */ s(ht, { style: { flexShrink: 0, height: "1em", width: "1em" } }),
+                t === "desc" && /* @__PURE__ */ s(V, { style: { flexShrink: 0, height: "1em", width: "1em" } }),
+                !t && /* @__PURE__ */ s(
+                  V,
                   {
                     style: {
                       flexShrink: 0,
@@ -367,11 +300,11 @@ const ut = l(
     );
   }
 );
-ut.displayName = "Table.HeaderCell";
-const bt = l(({ variant: t, className: e, ...a }, o) => /* @__PURE__ */ s("td", { ref: o, className: d(A["table-cell"], e), "data-table-cell-variant": t, ...a }));
-bt.displayName = "Table.BodyCell";
-const pt = l(
-  ({ rowId: t, checked: e, indeterminate: a, onChange: o }, r) => /* @__PURE__ */ y("label", { className: F.checkbox, children: [
+ue.displayName = "Table.HeaderCell";
+const be = l(({ variant: e, className: t, ...a }, o) => /* @__PURE__ */ s("td", { ref: o, className: d(w["table-cell"], t), "data-table-cell-variant": e, ...a }));
+be.displayName = "Table.BodyCell";
+const pe = l(
+  ({ rowId: e, checked: t, indeterminate: a, onChange: o }, r) => /* @__PURE__ */ y("label", { className: E.checkbox, children: [
     /* @__PURE__ */ s(
       "input",
       {
@@ -379,95 +312,99 @@ const pt = l(
           i && (i.indeterminate = a || !1, typeof r == "function" ? r(i) : r && (r.current = i));
         },
         type: "checkbox",
-        className: F.input,
-        checked: e || !1,
+        className: E.input,
+        checked: t || !1,
         onChange: (i) => o(i.target.checked),
-        "aria-label": `Select row ${t}`
+        "aria-label": `Select row ${e}`
       }
     ),
-    /* @__PURE__ */ s("span", { className: F.indicator })
+    /* @__PURE__ */ s("span", { className: E.indicator })
   ] })
 );
-pt.displayName = "Table.Checkbox";
-const _t = l(({ title: t, subtitle: e, size: a = "md", className: o }, r) => {
-  const i = {
-    title: {
-      sm: "0.875rem",
-      md: "0.9375rem",
-      lg: "1rem"
-    },
-    subtitle: {
-      sm: "0.75rem",
-      md: "0.8125rem",
-      lg: "0.875rem"
-    }
-  };
-  return /* @__PURE__ */ y("div", { ref: r, className: d(A["table-cell"], o), "data-table-cell-variant": "double-line", children: [
-    /* @__PURE__ */ s(
-      "div",
-      {
-        style: {
-          fontWeight: 600,
-          fontSize: i.title[a]
-        },
-        children: t
-      }
-    ),
-    /* @__PURE__ */ s(
-      "div",
-      {
-        style: {
-          fontSize: i.subtitle[a],
-          color: "#6b7280"
-        },
-        children: e
+pe.displayName = "Table.Checkbox";
+const Ne = l(
+  ({ title: e, subtitle: t, size: a = "md", className: o }, r) => {
+    const i = {
+      title: {
+        sm: "0.875rem",
+        md: "0.9375rem",
+        lg: "1rem"
+      },
+      subtitle: {
+        sm: "0.75rem",
+        md: "0.8125rem",
+        lg: "0.875rem"
       }
-    )
-  ] });
-});
-_t.displayName = "Table.DoubleLine";
-const yt = l(({ onClick: t, disabled: e }, a) => /* @__PURE__ */ s(
-  C,
+    };
+    return /* @__PURE__ */ y("div", { ref: r, className: d(w["table-cell"], o), "data-table-cell-variant": "double-line", children: [
+      /* @__PURE__ */ s(
+        "div",
+        {
+          style: {
+            fontWeight: 600,
+            fontSize: i.title[a]
+          },
+          children: e
+        }
+      ),
+      /* @__PURE__ */ s(
+        "div",
+        {
+          style: {
+            fontSize: i.subtitle[a],
+            color: "#6b7280"
+          },
+          children: t
+        }
+      )
+    ] });
+  }
+);
+Ne.displayName = "Table.DoubleLine";
+const ye = l(({ onClick: e, disabled: t }, a) => /* @__PURE__ */ s(
+  P,
   {
     ref: a,
-    as: ue,
+    as: ft,
     onClick: (r) => {
-      r.stopPropagation(), t == null || t();
+      r.stopPropagation(), e == null || e();
     },
-    disabled: e,
+    disabled: t,
     variant: "ghost",
     size: "medium",
     "aria-label": "Action button"
   }
 ));
-yt.displayName = "Table.Action";
-const ht = l(({ columns: t, children: e, className: a, ...o }, r) => /* @__PURE__ */ s(
-  "div",
-  {
-    ref: r,
-    className: d(A.table, a),
-    style: {
-      "--table-grid-columns": t
-    },
-    ...o,
-    children: /* @__PURE__ */ s("table", { children: e })
-  }
-));
-ht.displayName = "Table";
-const na = Object.assign(ht, {
-  Action: yt,
-  Body: dt,
-  BodyCell: bt,
-  Checkbox: pt,
-  DoubleLine: _t,
-  Footer: ct,
-  Header: nt,
-  HeaderCell: ut,
-  Row: mt
-}), Ge = l(
+ye.displayName = "Table.Action";
+const ve = l(
+  ({ columns: e, children: t, className: a, ...o }, r) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: r,
+      className: d(w.table, a),
+      style: {
+        "--table-grid-columns": e
+      },
+      ...o,
+      children: /* @__PURE__ */ s("table", { children: t })
+    }
+  )
+);
+ve.displayName = "Table";
+const Qt = Object.assign(ve, {
+  Action: ye,
+  Body: de,
+  BodyCell: be,
+  Checkbox: pe,
+  DoubleLine: Ne,
+  Footer: ce,
+  Header: ne,
+  HeaderCell: ue,
+  Row: me
+}), Rt = l(
   ({
-    gap: t = "md",
-    direction: e = "horizontal",
+    gap: e = "md",
+    direction: t = "horizontal",
     align: a = "center",
     wrap: o = "nowrap",
     fluid: r = !1,
@@ -476,18 +413,18 @@ const na = Object.assign(ht, {
     className: m,
     ...u
   }, n) => {
-    const b = _({
+    const b = N({
       align: a,
-      direction: e,
+      direction: t,
       fluid: r,
-      gap: t,
+      gap: e,
       wrap: o
     });
     return /* @__PURE__ */ s(
       "div",
       {
         ref: n,
-        className: d(pe["button-group"], m),
+        className: d(ct["button-group"], m),
         role: "group",
         "aria-label": i,
         ...b,
@@ -497,11 +434,11 @@ const na = Object.assign(ht, {
     );
   }
 );
-Ge.displayName = "ButtonGroup";
-const vt = w(void 0), Nt = l(
+Rt.displayName = "ButtonGroup";
+const he = L(void 0), fe = l(
   ({
-    id: t,
-    placement: e = "bottom",
+    id: e,
+    placement: t = "bottom",
     maxHeight: a = 400,
     minWidth: o = 160,
     maxWidth: r = 320,
@@ -511,17 +448,17 @@ const vt = w(void 0), Nt = l(
     closeOnClick: u = !1,
     children: n,
     ...b
-  }, h) => {
+  }, v) => {
     const p = {
-      id: t,
+      id: e,
       closeOnClick: u,
       onChange: m,
       value: c
     };
-    return /* @__PURE__ */ s("div", { ref: h, ...b, children: /* @__PURE__ */ s(vt.Provider, { value: p, children: /* @__PURE__ */ s(z, { id: t, placement: e, gap: i, triggerType: "focus", children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ s("div", { ref: v, ...b, children: /* @__PURE__ */ s(he.Provider, { value: p, children: /* @__PURE__ */ s($, { id: e, placement: t, gap: i, triggerType: "focus", children: /* @__PURE__ */ s(
       "div",
       {
-        className: R["menu-list"],
+        className: M["menu-list"],
         style: {
           "--_max-height": `${a}px`,
           "--_max-width": `${r}px`,
@@ -532,88 +469,88 @@ const vt = w(void 0), Nt = l(
     ) }) }) });
   }
 );
-Nt.displayName = "Menu";
-function Ve(t) {
-  return z.getTooltipTriggerProps({
-    id: t.id,
+fe.displayName = "Menu";
+function Mt(e) {
+  return $.getTooltipTriggerProps({
+    id: e.id,
     triggerType: "focus"
   });
 }
-function We(t) {
-  z.close(t);
+function Ht(e) {
+  $.close(e);
 }
-const U = Nt;
-U.getTriggerProps = Ve;
-U.close = We;
-const ft = l(
-  ({ value: t, disabled: e = !1, leftIcon: a, rightIcon: o, children: r, onClick: i, className: c, ...m }, u) => {
-    const n = S(vt), b = n != null && n.onChange && t !== void 0 ? n.value === t : !1, h = _({
+const X = fe;
+X.getTriggerProps = Mt;
+X.close = Ht;
+const ge = l(
+  ({ value: e, disabled: t = !1, leftIcon: a, rightIcon: o, children: r, onClick: i, className: c, ...m }, u) => {
+    const n = I(he), b = n != null && n.onChange && e !== void 0 ? n.value === e : !1, v = N({
       active: b,
-      disabled: e
-    }), p = (f) => {
-      if (e) {
-        f.preventDefault();
+      disabled: t
+    }), p = (g) => {
+      if (t) {
+        g.preventDefault();
         return;
       }
-      n != null && n.onChange && t !== void 0 && n.onChange(t), i == null || i(f), n != null && n.closeOnClick && (n != null && n.id) && z.close({ id: n.id });
+      n != null && n.onChange && e !== void 0 && n.onChange(e), i == null || i(g), n != null && n.closeOnClick && (n != null && n.id) && $.close({ id: n.id });
     };
     return /* @__PURE__ */ y(
       "button",
       {
         ref: u,
-        className: d(R["menu-item"], c),
-        disabled: e,
-        ...h,
+        className: d(M["menu-item"], c),
+        disabled: t,
+        ...v,
         ...m,
         onClick: p,
         children: [
-          a ? /* @__PURE__ */ s("span", { className: R["menu-item-icon"], children: a }) : null,
-          /* @__PURE__ */ s("span", { className: R["menu-item-label"], children: r }),
-          o ? /* @__PURE__ */ s("span", { className: R["menu-item-icon"], children: o }) : null
+          a ? /* @__PURE__ */ s("span", { className: M["menu-item-icon"], children: a }) : null,
+          /* @__PURE__ */ s("span", { className: M["menu-item-label"], children: r }),
+          o ? /* @__PURE__ */ s("span", { className: M["menu-item-icon"], children: o }) : null
         ]
       }
     );
   }
 );
-ft.displayName = "Menu.Item";
-const Ue = U;
-Ue.Item = ft;
-const gt = l(({ children: t, className: e, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(T["top-bar"], e), ...a, children: t }));
-gt.displayName = "TopBar";
-const Bt = l(({ children: t, className: e, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(T["top-bar-leading"], e), ...a, children: t }));
-Bt.displayName = "TopBar.Leading";
-const Tt = l(({ children: t, className: e, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(T["top-bar-centred"], e), ...a, children: t }));
-Tt.displayName = "TopBar.Centred";
-const wt = l(({ children: t, className: e, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(T["top-bar-trailing"], e), ...a, children: t }));
-wt.displayName = "TopBar.Trailing";
-const St = l(
-  ({ as: t = "button", active: e, disabled: a, icon: o, className: r, children: i, ...c }, m) => /* @__PURE__ */ y(
-    t,
+ge.displayName = "Menu.Item";
+const Dt = X;
+Dt.Item = ge;
+const Be = l(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(S["top-bar"], t), ...a, children: e }));
+Be.displayName = "TopBar";
+const Te = l(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(S["top-bar-leading"], t), ...a, children: e }));
+Te.displayName = "TopBar.Leading";
+const Se = l(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(S["top-bar-centred"], t), ...a, children: e }));
+Se.displayName = "TopBar.Centred";
+const we = l(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(S["top-bar-trailing"], t), ...a, children: e }));
+we.displayName = "TopBar.Trailing";
+const Ae = l(
+  ({ as: e = "button", active: t, disabled: a, icon: o, className: r, children: i, ...c }, m) => /* @__PURE__ */ y(
+    e,
     {
       ref: m,
-      className: d(T["top-bar-item"], r),
-      "data-active": e ? "" : void 0,
+      className: d(S["top-bar-item"], r),
+      "data-active": t ? "" : void 0,
       "data-disabled": a ? "" : void 0,
       ...c,
       children: [
-        o && /* @__PURE__ */ s("span", { className: T["top-bar-item-icon"], children: o }),
+        o && /* @__PURE__ */ s("span", { className: S["top-bar-item-icon"], children: o }),
         i
       ]
     }
   )
 );
-St.displayName = "TopBar.Item";
-const At = l(({ children: t, className: e, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(T["top-bar-list-item"], e), ...a, children: t }));
-At.displayName = "TopBar.ListItem";
-const da = Object.assign(gt, {
-  Centred: Tt,
-  Item: St,
-  Leading: Bt,
-  ListItem: At,
-  Trailing: wt
-}), Lt = w(void 0), X = l(
-  ({ direction: t = "horizontal", gap: e, value: a, onChange: o, children: r, className: i, ...c }, m) => {
-    const u = _({ direction: t }), n = {
+Ae.displayName = "TopBar.Item";
+const Le = l(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(S["top-bar-list-item"], t), ...a, children: e }));
+Le.displayName = "TopBar.ListItem";
+const Yt = Object.assign(Be, {
+  Centred: Se,
+  Item: Ae,
+  Leading: Te,
+  ListItem: Le,
+  Trailing: we
+}), Ie = L(void 0), q = l(
+  ({ direction: e = "horizontal", gap: t, value: a, onChange: o, children: r, className: i, ...c }, m) => {
+    const u = N({ direction: e }), n = {
       lg: "var(--spacing-4)",
       md: "var(--spacing-3)",
       sm: "var(--spacing-2)",
@@ -622,14 +559,14 @@ const da = Object.assign(gt, {
       onChange: o,
       value: a
     };
-    return /* @__PURE__ */ s(Lt.Provider, { value: b, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ s(Ie.Provider, { value: b, children: /* @__PURE__ */ s(
       "nav",
       {
         ref: m,
-        className: d(H.nav, i),
+        className: d(D.nav, i),
         style: {
-          ...e && {
-            "--vers-comp-nav-gap": n[e]
+          ...t && {
+            "--vers-comp-nav-gap": n[t]
           }
         },
         ...u,
@@ -639,12 +576,12 @@ const da = Object.assign(gt, {
     ) });
   }
 );
-X.displayName = "Nav";
-X.displayName = "Nav";
-const xt = l(
+q.displayName = "Nav";
+q.displayName = "Nav";
+const xe = l(
   ({
-    as: t = "button",
-    active: e = !1,
+    as: e = "button",
+    active: t = !1,
     value: a,
     disabled: o = !1,
     loading: r = !1,
@@ -654,60 +591,52 @@ const xt = l(
     onClick: u,
     className: n,
     ...b
-  }, h) => {
-    const p = S(Lt), f = p != null && p.onChange && a !== void 0 ? p.value === a : e, B = _({
-      active: f,
+  }, v) => {
+    const p = I(Ie), g = p != null && p.onChange && a !== void 0 ? p.value === a : t, T = N({
+      active: g,
       disabled: o || r,
       loading: r
-    }), g = (I) => {
+    }), B = (R) => {
       if (o || r) {
-        I.preventDefault();
+        R.preventDefault();
         return;
       }
-      p != null && p.onChange && a !== void 0 && p.onChange(a), u == null || u(I);
+      p != null && p.onChange && a !== void 0 && p.onChange(a), u == null || u(R);
     };
     return /* @__PURE__ */ y(
-      t,
+      e,
       {
-        ref: h,
-        className: d(H["nav-item"], n),
-        "aria-current": f && t !== "button" ? "page" : void 0,
+        ref: v,
+        className: d(D["nav-item"], n),
+        "aria-current": g && e !== "button" ? "page" : void 0,
         "aria-disabled": o || r ? "true" : void 0,
         "aria-busy": r ? "true" : void 0,
-        ...B,
+        ...T,
         ...b,
-        onClick: g,
+        onClick: B,
         children: [
-          i && /* @__PURE__ */ s("span", { className: H["nav-item-icon"], children: /* @__PURE__ */ s(D, { as: i }) }),
+          i && /* @__PURE__ */ s("span", { className: D["nav-item-icon"], children: /* @__PURE__ */ s(F, { as: i }) }),
           m,
-          c && /* @__PURE__ */ s("span", { className: H["nav-item-icon"], children: /* @__PURE__ */ s(D, { as: c }) })
+          c && /* @__PURE__ */ s("span", { className: D["nav-item-icon"], children: /* @__PURE__ */ s(F, { as: c }) })
         ]
       }
     );
   }
 );
-xt.displayName = "NavItem";
-const ca = Object.assign(X, {
-  Item: xt
-}), It = l(({ children: t, className: e }, a) => /* @__PURE__ */ s("aside", { ref: a, className: d(v.sidebar, e), children: t }));
-It.displayName = "Sidebar";
-const Rt = l(({ children: t, className: e }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(v["sidebar-header"], e), children: t }));
-Rt.displayName = "Sidebar.Header";
-const Mt = l(({ children: t, className: e }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(v["sidebar-body"], e), children: t }));
-Mt.displayName = "Sidebar.Body";
-const Ht = l(({ children: t, className: e }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(v["sidebar-footer"], e), children: t }));
-Ht.displayName = "Sidebar.Footer";
-const kt = l(
-  ({
-    label: t,
-    icon: e,
-    defaultExpanded: a = !0,
-    isExpanded: o,
-    onExpandedChange: r,
-    children: i,
-    className: c
-  }, m) => {
-    const [u, n] = $(a), b = o !== void 0 ? o : u, h = () => {
+xe.displayName = "NavItem";
+const Zt = Object.assign(q, {
+  Item: xe
+}), Re = l(({ children: e, className: t }, a) => /* @__PURE__ */ s("aside", { ref: a, className: d(h.sidebar, t), children: e }));
+Re.displayName = "Sidebar";
+const Me = l(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(h["sidebar-header"], t), children: e }));
+Me.displayName = "Sidebar.Header";
+const He = l(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(h["sidebar-body"], t), children: e }));
+He.displayName = "Sidebar.Body";
+const De = l(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(h["sidebar-footer"], t), children: e }));
+De.displayName = "Sidebar.Footer";
+const Ce = l(
+  ({ label: e, icon: t, defaultExpanded: a = !0, isExpanded: o, onExpandedChange: r, children: i, className: c }, m) => {
+    const [u, n] = k(a), b = o !== void 0 ? o : u, v = () => {
       const p = !b;
       n(p), r == null || r(p);
     };
@@ -715,152 +644,129 @@ const kt = l(
       "div",
       {
         ref: m,
-        className: d(v["sidebar-group"], c),
+        className: d(h["sidebar-group"], c),
         "data-expanded": b ? "" : void 0,
         children: [
-          /* @__PURE__ */ y(
-            "button",
-            {
-              className: v["sidebar-group-header"],
-              onClick: h,
-              "aria-expanded": b,
-              children: [
-                e && /* @__PURE__ */ s("span", { children: e }),
-                /* @__PURE__ */ s("span", { className: v["sidebar-group-label"], children: t }),
-                /* @__PURE__ */ s(
-                  D,
-                  {
-                    as: E,
-                    className: v["sidebar-group-chevron"],
-                    size: "sm"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ s("div", { className: v["sidebar-group-content"], children: /* @__PURE__ */ s("div", { children: i }) })
+          /* @__PURE__ */ y("button", { className: h["sidebar-group-header"], onClick: v, "aria-expanded": b, children: [
+            t && /* @__PURE__ */ s("span", { children: t }),
+            /* @__PURE__ */ s("span", { className: h["sidebar-group-label"], children: e }),
+            /* @__PURE__ */ s(F, { as: V, className: h["sidebar-group-chevron"], size: "sm" })
+          ] }),
+          /* @__PURE__ */ s("div", { className: h["sidebar-group-content"], children: /* @__PURE__ */ s("div", { children: i }) })
         ]
       }
     );
   }
 );
-kt.displayName = "Sidebar.Group";
-const Dt = l(
-  ({ as: t = "button", active: e, disabled: a, icon: o, action: r, className: i, children: c, ...m }, u) => /* @__PURE__ */ y(
-    t,
+Ce.displayName = "Sidebar.Group";
+const Fe = l(
+  ({ as: e = "button", active: t, disabled: a, icon: o, action: r, className: i, children: c, ...m }, u) => /* @__PURE__ */ y(
+    e,
     {
       ref: u,
-      className: d(v["sidebar-item"], i),
-      "data-active": e ? "" : void 0,
+      className: d(h["sidebar-item"], i),
+      "data-active": t ? "" : void 0,
       "data-disabled": a ? "" : void 0,
       "data-action": r ? "" : void 0,
       ...m,
       children: [
-        o && /* @__PURE__ */ s("span", { className: v["sidebar-item-icon"], children: o }),
-        /* @__PURE__ */ s("span", { className: v["sidebar-item-text"], children: c }),
-        r && /* @__PURE__ */ s("span", { className: v["sidebar-item-action"], children: r })
+        o && /* @__PURE__ */ s("span", { className: h["sidebar-item-icon"], children: o }),
+        /* @__PURE__ */ s("span", { className: h["sidebar-item-text"], children: c }),
+        r && /* @__PURE__ */ s("span", { className: h["sidebar-item-action"], children: r })
       ]
     }
   )
 );
-Dt.displayName = "Sidebar.Item";
-const Ct = l(({ children: t, className: e }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(v["sidebar-item-list"], e), children: t }));
-Ct.displayName = "Sidebar.ItemList";
-const zt = l(({ className: t }, e) => /* @__PURE__ */ s("div", { ref: e, className: d(v["sidebar-divider"], t), children: /* @__PURE__ */ s(ce, {}) }));
-zt.displayName = "Sidebar.Divider";
-const ma = Object.assign(It, {
-  Body: Mt,
-  Divider: zt,
-  Footer: Ht,
-  Group: kt,
-  Header: Rt,
-  Item: Dt,
-  ItemList: Ct
+Fe.displayName = "Sidebar.Item";
+const je = l(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(h["sidebar-item-list"], t), children: e }));
+je.displayName = "Sidebar.ItemList";
+const Pe = l(({ className: e }, t) => /* @__PURE__ */ s("div", { ref: t, className: d(h["sidebar-divider"], e), children: /* @__PURE__ */ s(vt, {}) }));
+Pe.displayName = "Sidebar.Divider";
+const Ot = Object.assign(Re, {
+  Body: He,
+  Divider: Pe,
+  Footer: De,
+  Group: Ce,
+  Header: Me,
+  Item: Fe,
+  ItemList: je
 });
-function Xe(t, e) {
-  return t === e;
+function Ct(e, t) {
+  return e === t;
 }
-const jt = l(({ children: t, className: e, ...a }, o) => /* @__PURE__ */ s("nav", { ref: o, className: d(k["bottom-bar"], e), ...a, children: t }));
-jt.displayName = "BottomBar";
-const Ft = l(
-  ({ as: t = "button", href: e, active: a = !1, disabled: o = !1, icon: r, children: i, onClick: c, className: m, ...u }, n) => {
-    const b = Xe(t, "a"), h = _({
+const $e = l(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("nav", { ref: o, className: d(C["bottom-bar"], t), ...a, children: e }));
+$e.displayName = "BottomBar";
+const Ee = l(
+  ({ as: e = "button", href: t, active: a = !1, disabled: o = !1, icon: r, children: i, onClick: c, className: m, ...u }, n) => {
+    const b = Ct(e, "a"), v = N({
       active: a,
       disabled: o
-    }), p = (g) => {
+    }), p = (B) => {
       if (o) {
-        g.preventDefault();
+        B.preventDefault();
         return;
       }
-      c == null || c(g);
-    }, f = {
-      className: d(k["bottom-bar-item"], m),
+      c == null || c(B);
+    }, g = {
+      className: d(C["bottom-bar-item"], m),
       onClick: p,
       ref: n,
-      ...h,
+      ...v,
       ...u
     };
-    return b && (f.href = e), /* @__PURE__ */ y(t || "button", { ...f, children: [
-      r && /* @__PURE__ */ s("span", { className: k["bottom-bar-item-icon"], children: r }),
-      i && /* @__PURE__ */ s("span", { className: k["bottom-bar-item-text"], children: i })
+    return b && (g.href = t), /* @__PURE__ */ y(e || "button", { ...g, children: [
+      r && /* @__PURE__ */ s("span", { className: C["bottom-bar-item-icon"], children: r }),
+      i && /* @__PURE__ */ s("span", { className: C["bottom-bar-item-text"], children: i })
     ] });
   }
 );
-Ft.displayName = "BottomBar.Item";
-const ua = Object.assign(jt, {
-  Item: Ft
-}), Pt = l(
-  ({
-    variant: t = "classic",
-    hideHeader: e,
-    hideBottom: a,
-    className: o,
-    children: r
-  }, i) => {
-    const c = _({
-      "hide-header": e,
+Ee.displayName = "BottomBar.Item";
+const ea = Object.assign($e, {
+  Item: Ee
+}), Ge = l(
+  ({ variant: e = "classic", hideHeader: t, hideBottom: a, className: o, children: r }, i) => {
+    const c = N({
+      "hide-header": t,
       "hide-bottom": a,
-      variant: t
+      variant: e
     });
-    return /* @__PURE__ */ s("div", { ref: i, className: d(L["app-layout"], o), ...c, children: r });
+    return /* @__PURE__ */ s("div", { ref: i, className: d(A["app-layout"], o), ...c, children: r });
   }
 );
-Pt.displayName = "AppLayout";
-const qt = l(
-  ({ className: t, children: e }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(L["app-layout-body"], t), children: e })
-);
-qt.displayName = "AppLayout.Body";
-const $t = l(({ className: t, children: e }, a) => /* @__PURE__ */ s("header", { ref: a, className: d(L["app-layout-header"], t), children: e }));
-$t.displayName = "AppLayout.Header";
-const Et = l(
-  ({ className: t, placement: e = "full-width", children: a }, o) => {
-    const r = _({
-      placement: e
+Ge.displayName = "AppLayout";
+const ze = l(({ className: e, children: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(A["app-layout-body"], e), children: t }));
+ze.displayName = "AppLayout.Body";
+const ke = l(({ className: e, children: t }, a) => /* @__PURE__ */ s("header", { ref: a, className: d(A["app-layout-header"], e), children: t }));
+ke.displayName = "AppLayout.Header";
+const Ve = l(
+  ({ className: e, placement: t = "full-width", children: a }, o) => {
+    const r = N({
+      placement: t
     });
-    return /* @__PURE__ */ s("main", { ref: o, className: d(L["app-layout-main"], t), ...r, children: a });
+    return /* @__PURE__ */ s("main", { ref: o, className: d(A["app-layout-main"], e), ...r, children: a });
   }
 );
-Et.displayName = "AppLayout.Main";
-const Gt = l(({ className: t, children: e }, a) => /* @__PURE__ */ s("aside", { ref: a, className: d(L["app-layout-side-left"], t), children: e }));
-Gt.displayName = "AppLayout.SideLeft";
-const Vt = l(({ className: t, children: e }, a) => /* @__PURE__ */ s("aside", { ref: a, className: d(L["app-layout-side-right"], t), children: e }));
-Vt.displayName = "AppLayout.SideRight";
-const Wt = l(({ className: t, children: e }, a) => /* @__PURE__ */ s("footer", { ref: a, className: d(L["app-layout-bottom"], t), children: e }));
-Wt.displayName = "AppLayout.Bottom";
-const ba = Object.assign(Pt, {
-  Body: qt,
-  Bottom: Wt,
-  Header: $t,
-  Main: Et,
-  SideLeft: Gt,
-  SideRight: Vt
-}), Ut = le.forwardRef(
-  ({ isOpen: t, onOpenChange: e, children: a, onClick: o, ...r }, i) => {
-    const c = q(null), m = i || c;
-    P(() => {
+Ve.displayName = "AppLayout.Main";
+const We = l(({ className: e, children: t }, a) => /* @__PURE__ */ s("aside", { ref: a, className: d(A["app-layout-side-left"], e), children: t }));
+We.displayName = "AppLayout.SideLeft";
+const _e = l(({ className: e, children: t }, a) => /* @__PURE__ */ s("aside", { ref: a, className: d(A["app-layout-side-right"], e), children: t }));
+_e.displayName = "AppLayout.SideRight";
+const Ue = l(({ className: e, children: t }, a) => /* @__PURE__ */ s("footer", { ref: a, className: d(A["app-layout-bottom"], e), children: t }));
+Ue.displayName = "AppLayout.Bottom";
+const ta = Object.assign(Ge, {
+  Body: ze,
+  Bottom: Ue,
+  Header: ke,
+  Main: Ve,
+  SideLeft: We,
+  SideRight: _e
+}), Xe = pt.forwardRef(
+  ({ isOpen: e, onOpenChange: t, children: a, onClick: o, ...r }, i) => {
+    const c = z(null), m = i || c;
+    G(() => {
       const n = m.current;
       if (n) {
-        if (t)
+        if (e)
           try {
             n.showModal(), document.documentElement.style.overflow = "hidden";
           } catch {
@@ -871,217 +777,227 @@ const ba = Object.assign(Pt, {
           document.documentElement.style.overflow = "";
         };
       }
-    }, [t, m]), P(() => {
+    }, [e, m]), G(() => {
       const n = m.current;
       if (!n)
         return;
-      const b = () => e == null ? void 0 : e(!1), h = (p) => {
-        p.preventDefault(), e == null || e(!1);
+      const b = () => t == null ? void 0 : t(!1), v = (p) => {
+        p.preventDefault(), t == null || t(!1);
       };
-      return n.addEventListener("close", b), n.addEventListener("cancel", h), () => {
-        n.removeEventListener("close", b), n.removeEventListener("cancel", h);
+      return n.addEventListener("close", b), n.addEventListener("cancel", v), () => {
+        n.removeEventListener("close", b), n.removeEventListener("cancel", v);
       };
-    }, [e, m]);
-    const u = de(
+    }, [t, m]);
+    const u = yt(
       (n) => {
-        n.target === n.currentTarget && (e == null || e(!1)), o == null || o(n);
+        n.target === n.currentTarget && (t == null || t(!1)), o == null || o(n);
       },
-      [e, o]
+      [t, o]
     );
     return /* @__PURE__ */ s("dialog", { ...r, ref: m, onClick: u, children: a });
   }
 );
-Ut.displayName = "Dialog";
-const J = Ut, Xt = w(void 0), Je = () => {
-  const t = S(Xt);
-  if (!t)
+Xe.displayName = "Dialog";
+const J = Xe, qe = L(void 0), Ft = () => {
+  const e = I(qe);
+  if (!e)
     throw new Error("Drawer subcomponents must be used within Drawer");
-  return t;
-}, Jt = l(
-  ({ open: t, onOpenChange: e, placement: a = "right", children: o, className: r, ...i }, c) => {
-    const m = _({
+  return e;
+}, Je = l(
+  ({ open: e, onOpenChange: t, placement: a = "right", children: o, className: r, ...i }, c) => {
+    const m = N({
       placement: a
     });
-    return /* @__PURE__ */ s(Xt.Provider, { value: { onClose: () => e == null ? void 0 : e(!1) }, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ s(qe.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ s(
       J,
       {
         ref: c,
-        isOpen: t,
-        onOpenChange: e,
-        className: d(t && Re.drawer, r),
+        isOpen: e,
+        onOpenChange: t,
+        className: d(e && mt.drawer, r),
         ...m,
         ...i,
-        children: /* @__PURE__ */ s("div", { className: N.content, children: o })
+        children: /* @__PURE__ */ s("div", { className: f.content, children: o })
       }
     ) });
   }
 );
-Jt.displayName = "Drawer";
-const Kt = l(({ onClick: t, ...e }, a) => {
-  const { onClose: o } = Je();
+Je.displayName = "Drawer";
+const Ke = l(({ onClick: e, ...t }, a) => {
+  const { onClose: o } = Ft();
   return /* @__PURE__ */ s(
-    C,
+    P,
     {
       ref: a,
       variant: "ghost",
-      as: G,
+      as: W,
       "aria-label": "Close",
       onClick: (i) => {
-        o(), t == null || t(i);
+        o(), e == null || e(i);
       },
-      className: N.closeButton,
-      ...e
+      className: f.closeButton,
+      ...t
     }
   );
 });
-Kt.displayName = "Drawer.CloseButton";
-const Qt = l(
-  ({ action: t, children: e, tabs: a, className: o, ...r }, i) => /* @__PURE__ */ y(
+Ke.displayName = "Drawer.CloseButton";
+const Qe = l(
+  ({ action: e, children: t, tabs: a, className: o, ...r }, i) => /* @__PURE__ */ y(
     "div",
     {
       ref: i,
-      className: d(N.header, o),
+      className: d(f.header, o),
       ...r,
-      ...t && { "data-action": "" },
+      ...e && { "data-action": "" },
       ...a && { "data-tabs": "" },
       children: [
-        t ? /* @__PURE__ */ y(K, { children: [
-          /* @__PURE__ */ s("div", { className: N.headerTop, children: t }),
-          e && /* @__PURE__ */ s("div", { className: N.headerContent, children: e })
-        ] }) : /* @__PURE__ */ s("div", { className: N.headerTop, children: e }),
+        e ? /* @__PURE__ */ y(K, { children: [
+          /* @__PURE__ */ s("div", { className: f.headerTop, children: e }),
+          t && /* @__PURE__ */ s("div", { className: f.headerContent, children: t })
+        ] }) : /* @__PURE__ */ s("div", { className: f.headerTop, children: t }),
         a
       ]
     }
   )
 );
-Qt.displayName = "Drawer.Header";
-const pa = Object.assign(Jt, {
-  Body: W,
-  CloseButton: Kt,
+Qe.displayName = "Drawer.Header";
+const aa = Object.assign(Je, {
+  Body: U,
+  CloseButton: Ke,
   Footer: Y,
-  Header: Qt,
-  Title: V
-}), Yt = w(void 0), Ke = () => {
-  const t = S(Yt);
-  if (!t)
+  Header: Qe,
+  Title: _
+}), Ye = L(void 0), jt = () => {
+  const e = I(Ye);
+  if (!e)
     throw new Error("Modal subcomponents must be used within Modal");
-  return t;
-}, Zt = l(
-  ({ open: t, onOpenChange: e, size: a, position: o, children: r, className: i, ...c }, m) => {
-    const u = _({ size: a, position: o });
-    return /* @__PURE__ */ s(Yt.Provider, { value: { onClose: () => e == null ? void 0 : e(!1) }, children: /* @__PURE__ */ s(
+  return e;
+}, Ze = l(
+  ({ open: e, onOpenChange: t, size: a, position: o, children: r, className: i, ...c }, m) => {
+    const u = N({ size: a, position: o });
+    return /* @__PURE__ */ s(Ye.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ s(
       J,
       {
         ref: m,
-        isOpen: t,
-        onOpenChange: e,
-        className: d(t && He.modal, i),
+        isOpen: e,
+        onOpenChange: t,
+        className: d(e && ut.modal, i),
         "data-modal": "",
         ...u,
         ...c,
-        children: /* @__PURE__ */ s("div", { className: N.content, children: r })
+        children: /* @__PURE__ */ s("div", { className: f.content, children: r })
       }
     ) });
   }
 );
-Zt.displayName = "Modal";
-const Ot = l(({ onClick: t, ...e }, a) => {
-  const { onClose: o } = Ke();
+Ze.displayName = "Modal";
+const Oe = l(({ onClick: e, ...t }, a) => {
+  const { onClose: o } = jt();
   return /* @__PURE__ */ s(
-    C,
+    P,
     {
       ref: a,
       variant: "ghost",
-      as: G,
+      as: W,
       "aria-label": "Close",
       onClick: (i) => {
-        o(), t == null || t(i);
+        o(), e == null || e(i);
       },
-      className: N.closeButton,
-      ...e
+      className: f.closeButton,
+      ...t
     }
   );
 });
-Ot.displayName = "Modal.CloseButton";
-const te = l(({ action: t, children: e, className: a, ...o }, r) => /* @__PURE__ */ y("div", { ref: r, className: d(N.header, "modal-header", a), "data-modal-header": "", ...o, children: [
-  /* @__PURE__ */ s("div", { children: e }),
-  t && /* @__PURE__ */ s("div", { className: "modal-header-action", children: t })
+Oe.displayName = "Modal.CloseButton";
+const et = l(({ action: e, children: t, className: a, ...o }, r) => /* @__PURE__ */ y("div", { ref: r, className: d(f.header, "modal-header", a), "data-modal-header": "", ...o, children: [
+  /* @__PURE__ */ s("div", { children: t }),
+  e && /* @__PURE__ */ s("div", { className: "modal-header-action", children: e })
 ] }));
-te.displayName = "Modal.Header";
-const ee = l(
-  ({ align: t = "end", children: e, className: a, ...o }, r) => /* @__PURE__ */ s(
+et.displayName = "Modal.Header";
+const tt = l(
+  ({ align: e = "end", children: t, className: a, ...o }, r) => /* @__PURE__ */ s(
     "div",
     {
       ref: r,
-      className: d(N.footer, "modal-footer", a),
+      className: d(f.footer, "modal-footer", a),
       "data-modal-footer": "",
-      "data-align": t,
+      "data-align": e,
       ...o,
-      children: e
+      children: t
     }
   )
 );
-ee.displayName = "Modal.Footer";
-const _a = Object.assign(Zt, {
-  Body: W,
-  CloseButton: Ot,
-  Footer: ee,
-  Header: te,
-  Title: V
-}), ae = w(void 0), Qe = () => {
-  const t = S(ae);
-  if (!t)
+tt.displayName = "Modal.Footer";
+const sa = Object.assign(Ze, {
+  Body: U,
+  CloseButton: Oe,
+  Footer: tt,
+  Header: et,
+  Title: _
+}), at = L(void 0), Pt = () => {
+  const e = I(at);
+  if (!e)
     throw new Error("BottomSheet subcomponents must be used within BottomSheet");
-  return t;
-}, se = l(
-  ({ open: t, onOpenChange: e, children: a, className: o, ...r }, i) => /* @__PURE__ */ s(ae.Provider, { value: { onClose: () => e == null ? void 0 : e(!1) }, children: /* @__PURE__ */ s(J, { ref: i, isOpen: t, onOpenChange: e, className: d(De.bottomSheet, o), ...r, children: /* @__PURE__ */ s("div", { className: N.content, children: a }) }) })
+  return e;
+}, st = l(
+  ({ open: e, onOpenChange: t, children: a, className: o, ...r }, i) => /* @__PURE__ */ s(at.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ s(
+    J,
+    {
+      ref: i,
+      isOpen: e,
+      onOpenChange: t,
+      className: d(bt.bottomSheet, o),
+      ...r,
+      children: /* @__PURE__ */ s("div", { className: f.content, children: a })
+    }
+  ) })
 );
-se.displayName = "BottomSheet";
-const oe = l(
-  ({ onClick: t, ...e }, a) => {
-    const { onClose: o } = Qe();
+st.displayName = "BottomSheet";
+const ot = l(
+  ({ onClick: e, ...t }, a) => {
+    const { onClose: o } = Pt();
     return /* @__PURE__ */ s(
-      C,
+      P,
       {
-        as: G,
+        as: W,
         ref: a,
         variant: "ghost",
         "aria-label": "Close",
         onClick: (i) => {
-          o(), t == null || t(i);
+          o(), e == null || e(i);
         },
-        className: N.closeButton,
-        ...e
+        className: f.closeButton,
+        ...t
       }
     );
   }
 );
-oe.displayName = "BottomSheet.CloseButton";
-const ya = Object.assign(se, {
-  Body: W,
-  CloseButton: oe,
+ot.displayName = "BottomSheet.CloseButton";
+const oa = Object.assign(st, {
+  Body: U,
+  CloseButton: ot,
   Footer: Y,
-  Header: be,
-  Title: V
+  Header: gt,
+  Title: _
 });
 export {
-  ba as AppLayout,
-  ia as AttributeList,
-  Ce as AvatarGroup,
-  $e as BadgeGroup,
-  ua as BottomBar,
-  ya as BottomSheet,
-  Ge as ButtonGroup,
-  la as Card,
+  ta as AppLayout,
+  Jt as AttributeList,
+  Bt as AvatarGroup,
+  It as BadgeGroup,
+  ea as BottomBar,
+  oa as BottomSheet,
+  Rt as ButtonGroup,
+  Kt as Card,
   J as Dialog,
-  pa as Drawer,
-  Ue as Menu,
-  _a as Modal,
-  ca as Nav,
-  xt as NavItem,
-  Pe as NoResults,
-  ma as Sidebar,
-  na as Table,
-  ra as Tabs,
-  da as TopBar
+  aa as Drawer,
+  Dt as Menu,
+  sa as Modal,
+  Zt as Nav,
+  xe as NavItem,
+  At as NoResults,
+  Ot as Sidebar,
+  Qt as Table,
+  qt as Tabs,
+  Yt as TopBar
 };