@versaur/react 1.0.13 → 1.0.15

package/dist/blocks.js

@@ -1,103 +1,105 @@
-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 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-_eEMRSo8.js";
+import { jsxs as b, jsx as o } from "react/jsx-runtime";
+import { accordionStyles as L, avatarGroupStyles as Nt, tabsStyles as z, noResultsStyles as I, attributeListStyles as yt, badgeGroupStyles as ht, cardStyles as O, menuStyles as C, tableStyles as B, buttonGroupStyles as vt, topBarStyles as w, sidebarStyles as g, bottomBarStyles as j, appLayoutStyles as x, formGroupStyles as V, featuresStyles as _, modalStyles as ft, bottomSheetStyles as gt, pageHeaderStyles as A } from "@versaur/core/blocks";
+import { ChevronDownIcon as q, XIcon as J } from "@versaur/icons";
+import { createContext as F, forwardRef as n, useRef as G, useState as M, useEffect as E, useContext as H, useLayoutEffect as Tt, useId as K } from "react";
+import { u as f, I as Q, B as W } from "./helpers-D23F5WBX.js";
+import { c } from "./cx-B9vmfsc1.js";
+import { e as U, d as R, c as St, H as Bt, T as At } from "./tooltip-Cn7Ml9vw.js";
 import { checkboxStyles as k } from "@versaur/core/forms";
-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() {
-  const e = R(ae);
+import { a as Y } from "./drawer-BjNHPqBr.js";
+import { D as va } from "./drawer-BjNHPqBr.js";
+import { overlayPartsStyles as P } from "@versaur/core/utils";
+import { O as Z, b as ee, c as Rt, a as wt } from "./overlay-parts-BtD-Qj_k.js";
+const te = F(void 0);
+function xt() {
+  const e = H(te);
   if (!e)
     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, ...l }, i) {
-  const [m, u] = P(t ?? !1), c = M(null);
-  z(() => {
+function It({ summary: e, open: t, onOpenChange: a, children: s, className: r, ...i }, l) {
+  const [d, u] = M(t ?? !1), m = G(null);
+  E(() => {
     t !== void 0 && u(t);
-  }, [t]), z(() => {
-    c.current && (c.current.open = m);
-  }, [m]);
+  }, [t]), E(() => {
+    m.current && (m.current.open = d);
+  }, [d]);
   const p = () => {
-    const b = !m;
-    u(b), a == null || a(b);
-  }, N = v({ open: m ? "" : void 0 });
-  return /* @__PURE__ */ o(ae.Provider, { value: { isOpen: m, toggle: p }, children: /* @__PURE__ */ y(
+    const h = !d;
+    u(h), a == null || a(h);
+  }, y = f({ open: d ? "" : void 0 });
+  return /* @__PURE__ */ o(te.Provider, { value: { isOpen: d, toggle: p }, children: /* @__PURE__ */ b(
     "details",
     {
-      ref: i || c,
-      className: d(D.item, r),
-      open: m,
-      ...N,
-      ...l,
+      ref: l || m,
+      className: c(L.item, r),
+      open: d,
+      ...y,
+      ...i,
       children: [
         e,
-        /* @__PURE__ */ o("div", { className: D.content, children: s })
+        /* @__PURE__ */ o("div", { className: L.content, children: s })
       ]
     }
   ) });
 }
-const se = n(Pt);
-se.displayName = "Accordion";
-const oe = n(
-  ({ 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();
+const ae = n(It);
+ae.displayName = "Accordion";
+const se = n(
+  ({ children: e, right: t, clamp: a = 2, className: s, ...r }, i) => {
+    const { isOpen: l, toggle: d } = xt(), u = G(null), m = (p) => {
+      p.preventDefault(), !(u.current && u.current.contains(p.target)) && d();
     };
-    return /* @__PURE__ */ y(
+    return /* @__PURE__ */ b(
       "summary",
       {
-        ref: l,
-        className: d(D.trigger, s),
-        onClick: c,
+        ref: i,
+        className: c(L.trigger, s),
+        onClick: m,
         role: "button",
-        "aria-expanded": i,
+        "aria-expanded": l,
         ...r,
         children: [
-          /* @__PURE__ */ o("span", { className: D.label, style: { "--_clamp": a }, children: e }),
-          t && /* @__PURE__ */ o("span", { ref: u, className: D.right, children: t }),
-          /* @__PURE__ */ o("span", { className: D.chevron, children: /* @__PURE__ */ o(Z, { width: 20, height: 20 }) })
+          /* @__PURE__ */ o("span", { className: L.label, style: { "--_clamp": a }, children: e }),
+          t && /* @__PURE__ */ o("span", { ref: u, className: L.right, children: t }),
+          /* @__PURE__ */ o("span", { className: L.chevron, children: /* @__PURE__ */ o(q, { width: 20, height: 20 }) })
         ]
       }
     );
   }
 );
-oe.displayName = "Accordion.Summary";
-const na = Object.assign(se, {
-  Summary: oe
-}), zt = n(
+se.displayName = "Accordion.Summary";
+const aa = Object.assign(ae, {
+  Summary: se
+}), Lt = n(
   ({
     direction: e = "horizontal",
     size: t = "md",
     align: a = "center",
     wrap: s = "nowrap",
     "aria-label": r = "Avatar group",
-    children: l,
-    className: i,
-    ...m
+    children: i,
+    className: l,
+    ...d
   }, u) => {
-    const c = v({ align: a, direction: e, size: t, wrap: s });
+    const m = f({ align: a, direction: e, size: t, wrap: s });
     return /* @__PURE__ */ o(
       "div",
       {
         ref: u,
-        className: d(St["avatar-group"], i),
+        className: c(Nt["avatar-group"], l),
         role: "group",
         "aria-label": r,
-        ...c,
         ...m,
-        children: l
+        ...d,
+        children: i
       }
     );
   }
 );
-zt.displayName = "AvatarGroup";
-function jt(e, t) {
-  z(() => {
+Lt.displayName = "AvatarGroup";
+function Ft(e, t) {
+  E(() => {
     if (!e.current)
       return;
     const a = new ResizeObserver(t);
@@ -106,137 +108,145 @@ function jt(e, t) {
     };
   }, [e, t]);
 }
-const re = A(void 0);
-function $t() {
-  const e = R(re);
+const oe = F(void 0);
+function Ht() {
+  const e = H(oe);
   if (!e)
     throw new Error("Tabs.Item must be used within a Tabs component");
   return e;
 }
-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)
+const re = n(({ value: e, onChange: t, children: a, className: s }, r) => {
+  const i = G(null), l = G(/* @__PURE__ */ new Map()), [d, u] = M(0), [m, p] = M(0), y = () => {
+    const v = l.current.get(e);
+    if (!v || !i.current)
       return;
-    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({
+    const N = i.current.getBoundingClientRect(), S = v.getBoundingClientRect(), $ = S.left - N.left + i.current.scrollLeft, { width: bt } = S;
+    u($), p(bt), v.scrollIntoView({
       behavior: "smooth",
       block: "nearest",
       inline: "center"
     });
-  }, b = (f, h) => {
-    h && i.current.set(f, h);
+  }, h = (v, N) => {
+    N && l.current.set(v, N);
   };
-  Ft(() => {
-    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, l), className: d(G.tabs, s), ...S, children: [
-    /* @__PURE__ */ o("ul", { className: G.tablist, role: "tablist", children: a }),
+  Tt(() => {
+    y();
+  }, [e]), Ft(i, y);
+  const T = f({});
+  return /* @__PURE__ */ o(oe.Provider, { value: { activeValue: e, onChange: t, registerTrigger: h }, children: /* @__PURE__ */ b("nav", { ref: U(r, i), className: c(z.tabs, s), ...T, children: [
+    /* @__PURE__ */ o("ul", { className: z.tablist, role: "tablist", children: a }),
     /* @__PURE__ */ o(
       "div",
       {
-        className: G["tabs-thumb"],
+        className: z["tabs-thumb"],
         style: {
-          left: `${m}px`,
-          width: `${c}px`
+          left: `${d}px`,
+          width: `${m}px`
         }
       }
     )
   ] }) });
 });
-le.displayName = "Tabs";
+re.displayName = "Tabs";
 const ie = n(
-  ({ value: e, disabled: t = !1, children: a, className: s }, r) => {
-    const { activeValue: l, onChange: i, registerTrigger: m } = $t(), u = l === e;
-    let c;
-    t ? c = "disabled" : u ? c = "active" : c = "default";
-    const p = () => {
-      t || i(e);
+  ({ value: e, disabled: t = !1, leftIcon: a, rightIcon: s, children: r, className: i }, l) => {
+    const { activeValue: d, onChange: u, registerTrigger: m } = Ht(), p = d === e;
+    let y;
+    t ? y = "disabled" : p ? y = "active" : y = "default";
+    const h = !!a, T = !!s, v = !!r;
+    let N;
+    h && T && v ? N = "both-text" : h && v ? N = "left-text" : T && v ? N = "right-text" : h && T ? N = "both" : h ? N = "left" : T && (N = "right");
+    const S = () => {
+      t || u(e);
     };
-    return /* @__PURE__ */ o("li", { className: G.tabitem, children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ o("li", { className: z.tabitem, children: /* @__PURE__ */ b(
       "button",
       {
-        ref: ee(r, (N) => m(e, N)),
-        className: d(G.trigger, s),
+        ref: U(l, ($) => m(e, $)),
+        className: c(z.trigger, i),
         role: "tab",
         id: `tabs-trigger-${e}`,
-        "aria-selected": u,
+        "aria-selected": p,
         "aria-controls": `tabs-panel-${e}`,
-        "data-state": c,
+        "data-state": y,
+        ...N && { "data-icon-config": N },
         disabled: t,
-        onClick: p,
-        children: a
+        onClick: S,
+        children: [
+          a,
+          r,
+          s
+        ]
       }
     ) });
   }
 );
 ie.displayName = "Tabs.Item";
-function Et(e) {
+function Pt(e) {
   return {
     "aria-labelledby": `tabs-trigger-${e}`,
     id: `tabs-panel-${e}`,
     role: "tabpanel"
   };
 }
-const da = Object.assign(le, {
+const sa = Object.assign(re, {
   Item: ie,
-  getPanelAttribute: Et
-}), _t = n(
-  ({ icon: e, title: t, subtitle: a, action: s, className: r, ...l }, i) => /* @__PURE__ */ y(
+  getPanelAttribute: Pt
+}), Ct = n(
+  ({ icon: e, title: t, subtitle: a, action: s, className: r, ...i }, l) => /* @__PURE__ */ b(
     "section",
     {
-      ref: i,
-      className: d(F["no-results"], r),
+      ref: l,
+      className: c(I["no-results"], r),
       role: "status",
       "aria-label": t,
-      ...l,
+      ...i,
       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" }) }),
-          /* @__PURE__ */ o("h5", { className: F["no-results-title"], children: t })
+        /* @__PURE__ */ b("header", { className: I["no-results-header"], children: [
+          /* @__PURE__ */ o("div", { className: I["no-results-icon"], children: /* @__PURE__ */ o(Q, { as: e, color: "inherit", "aria-hidden": "true" }) }),
+          /* @__PURE__ */ o("h5", { className: I["no-results-title"], children: t })
         ] }),
-        a && /* @__PURE__ */ o("p", { className: F["no-results-subtitle"], children: a }),
-        s && /* @__PURE__ */ o("div", { className: F["no-results-action"], role: "group", "aria-label": "Available actions", children: s })
+        a && /* @__PURE__ */ o("p", { className: I["no-results-subtitle"], children: a }),
+        s && /* @__PURE__ */ o("div", { className: I["no-results-action"], role: "group", "aria-label": "Available actions", children: s })
       ]
     }
   )
 );
-_t.displayName = "NoResults";
-const ce = n(
-  ({ layout: e, columns: t = "repeat(3, 1fr)", gap: a, children: s, className: r, style: l, ...i }, m) => {
-    const u = v({
+Ct.displayName = "NoResults";
+const le = n(
+  ({ layout: e, columns: t = "repeat(3, 1fr)", gap: a, children: s, className: r, style: i, ...l }, d) => {
+    const u = f({
       layout: e
     });
     return /* @__PURE__ */ o(
       "dl",
       {
-        ref: m,
-        className: d(Bt["attribute-list"], r),
+        ref: d,
+        className: c(yt["attribute-list"], r),
         ...u,
         style: {
           "--_columns": t,
           ...a !== void 0 && { "--_gap": typeof a == "number" ? `${a}px` : a },
-          ...l
+          ...i
         },
-        ...i,
+        ...l,
         children: s
       }
     );
   }
 );
-ce.displayName = "AttributeList";
+le.displayName = "AttributeList";
 const ne = n(
-  ({ title: e, area: t, children: a, className: s, style: r, ...l }, i) => /* @__PURE__ */ y(
+  ({ title: e, area: t, children: a, className: s, style: r, ...i }, l) => /* @__PURE__ */ b(
     "div",
     {
-      ref: i,
-      className: d(s),
+      ref: l,
+      className: c(s),
       style: {
         "--_area": t,
         ...r
       },
-      ...l,
+      ...i,
       children: [
         /* @__PURE__ */ o("dt", { children: e }),
         /* @__PURE__ */ o("dd", { children: a })
@@ -245,20 +255,20 @@ const ne = n(
   )
 );
 ne.displayName = "AttributeList.Item";
-const ma = Object.assign(ce, {
+const oa = Object.assign(le, {
   Item: ne
-}), Ct = n(
+}), zt = n(
   ({
     gap: e = "md",
     direction: t = "horizontal",
     align: a = "center",
     wrap: s = "nowrap",
     "aria-label": r = "Badge group",
-    children: l,
-    className: i,
-    ...m
+    children: i,
+    className: l,
+    ...d
   }, u) => {
-    const c = v({
+    const m = f({
       align: a,
       direction: t,
       gap: e,
@@ -268,77 +278,77 @@ const ma = Object.assign(ce, {
       "div",
       {
         ref: u,
-        className: d(wt["badge-group"], i),
+        className: c(ht["badge-group"], l),
         role: "group",
         "aria-label": r,
-        ...c,
         ...m,
-        children: l
+        ...d,
+        children: i
       }
     );
   }
 );
-Ct.displayName = "BadgeGroup";
-function Vt({ as: e = "div", size: t = "md", border: a, children: s, className: r, ...l }, i) {
-  const m = v({
+zt.displayName = "BadgeGroup";
+function Gt({ as: e = "div", size: t = "md", border: a, children: s, className: r, ...i }, l) {
+  const d = f({
     border: a,
     interactive: e === "button" ? "true" : "false",
     size: t
   });
-  return /* @__PURE__ */ o(e === "button" ? "button" : "div", { ref: i, className: d(C.card, r), ...m, ...l, children: s });
+  return /* @__PURE__ */ o(e === "button" ? "button" : "div", { ref: l, className: c(O.card, r), ...d, ...i, children: s });
 }
+const ce = n(
+  Gt
+);
+ce.displayName = "Card";
 const de = n(
-  Vt
+  ({ justify: e, gap: t, children: a, className: s, ...r }, i) => {
+    const l = f({ gap: t, justify: e });
+    return /* @__PURE__ */ o("div", { ref: i, className: c(O.header, s), ...l, ...r, children: a });
+  }
 );
-de.displayName = "Card";
+de.displayName = "Card.Header";
 const me = n(
-  ({ 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 });
+  ({ align: e, gap: t, children: a, className: s, ...r }, i) => {
+    const l = f({ align: e, gap: t });
+    return /* @__PURE__ */ o("div", { ref: i, className: c(O.body, s), ...l, ...r, children: a });
   }
 );
-me.displayName = "Card.Header";
+me.displayName = "Card.Body";
 const ue = n(
-  ({ 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 }, l) => {
-    const i = v({ gap: t, justify: e });
-    return /* @__PURE__ */ o("div", { ref: l, className: d(C.footer, s), ...i, ...r, children: a });
+  ({ justify: e, gap: t, children: a, className: s, ...r }, i) => {
+    const l = f({ gap: t, justify: e });
+    return /* @__PURE__ */ o("div", { ref: i, className: c(O.footer, s), ...l, ...r, children: a });
   }
 );
-pe.displayName = "Card.Footer";
-const ua = Object.assign(de, {
-  Body: ue,
-  Footer: pe,
-  Header: me
-}), be = A(void 0), Ne = n(
+ue.displayName = "Card.Footer";
+const ra = Object.assign(ce, {
+  Body: me,
+  Footer: ue,
+  Header: de
+}), pe = F(void 0), be = n(
   ({
     id: e,
     placement: t,
     maxHeight: a = 400,
     maxWidth: s = 320,
     gap: r = 8,
-    value: l,
-    onChange: i,
-    closeOnClick: m = !1,
+    value: i,
+    onChange: l,
+    closeOnClick: d = !1,
     children: u,
-    ...c
+    ...m
   }, p) => {
-    const N = {
+    const y = {
       id: e,
-      closeOnClick: m,
-      onChange: i,
-      value: l
+      closeOnClick: d,
+      onChange: l,
+      value: i
     };
-    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(
+    return /* @__PURE__ */ o("div", { ref: p, ...m, children: /* @__PURE__ */ o(pe.Provider, { value: y, children: /* @__PURE__ */ o(R, { id: e, placement: t, gap: r, type: "persisted", children: /* @__PURE__ */ o(
       "div",
       {
-        className: H["menu-list"],
+        className: C["menu-list"],
         style: {
           "--_max-height": `${a}px`,
           "--_max-width": `${s}px`
@@ -348,114 +358,114 @@ const ua = Object.assign(de, {
     ) }) }) });
   }
 );
-Ne.displayName = "Menu";
-function kt(e) {
-  return I.getTooltipTriggerProps({
+be.displayName = "Menu";
+function Mt(e) {
+  return R.getTooltipTriggerProps({
     id: e.id
   });
 }
-function Wt(e) {
-  I.close(e);
+function jt(e) {
+  R.close(e);
 }
-const Q = Ne;
-Q.getTriggerProps = kt;
-Q.close = Wt;
-const ye = n(
-  ({ 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({
+const X = be;
+X.getTriggerProps = Mt;
+X.close = jt;
+const Ne = n(
+  ({ value: e, disabled: t = !1, leftIcon: a, rightIcon: s, children: r, onClick: i, className: l, ...d }, u) => {
+    const m = H(pe), p = m != null && m.onChange && e !== void 0 ? m.value === e : !1, y = f({
       active: p,
       disabled: t
-    }), b = (S) => {
+    }), h = (T) => {
       if (t) {
-        S.preventDefault();
+        T.preventDefault();
         return;
       }
-      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 });
+      m != null && m.onChange && e !== void 0 && m.onChange(e), i == null || i(T), m != null && m.closeOnClick && (m != null && m.id) && R.close({ id: m.id });
     };
-    return /* @__PURE__ */ y(
+    return /* @__PURE__ */ b(
       "button",
       {
         ref: u,
-        className: d(H["menu-item"], i),
+        className: c(C["menu-item"], l),
         disabled: t,
-        ...N,
-        ...m,
-        onClick: b,
+        ...y,
+        ...d,
+        onClick: h,
         children: [
-          a ? /* @__PURE__ */ o("span", { className: H["menu-item-icon"], children: a }) : null,
-          /* @__PURE__ */ o("span", { className: H["menu-item-label"], children: r }),
-          s ? /* @__PURE__ */ o("span", { className: H["menu-item-icon"], children: s }) : null
+          a ? /* @__PURE__ */ o("span", { className: C["menu-item-icon"], children: a }) : null,
+          /* @__PURE__ */ o("span", { className: C["menu-item-label"], children: r }),
+          s ? /* @__PURE__ */ o("span", { className: C["menu-item-icon"], children: s }) : null
         ]
       }
     );
   }
 );
-ye.displayName = "Menu.Item";
-const _ = Q;
-_.Item = ye;
-const ve = A(void 0);
-function fe() {
-  const e = R(ve);
+Ne.displayName = "Menu.Item";
+const D = X;
+D.Item = Ne;
+const ye = F(void 0);
+function he() {
+  const e = H(ye);
   if (!e)
     throw new Error("useTableProvider must be used within a Table component");
   return e;
 }
-const he = n(
+const ve = n(
   ({ leftContent: e, rightContent: t, className: a, ...s }, r) => {
-    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 })
+    const i = he(), l = typeof e == "function" ? e(i.selectedRows) : e, d = typeof t == "function" ? t(i.selectedRows) : t;
+    return /* @__PURE__ */ b("div", { ref: r, className: c(B.toolbar, a), ...s, children: [
+      /* @__PURE__ */ o("div", { children: l }),
+      /* @__PURE__ */ o("div", { children: d })
     ] });
   }
 );
-he.displayName = "Table.Toolbar";
-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(w.body, e), ...t }));
-Te.displayName = "Table.Body";
-const Se = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(w.footer, e), ...t }));
-Se.displayName = "Table.Footer";
-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({
+ve.displayName = "Table.Toolbar";
+const fe = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(B.header, e), ...t }));
+fe.displayName = "Table.Header";
+const ge = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(B.body, e), ...t }));
+ge.displayName = "Table.Body";
+const Te = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(B.footer, e), ...t }));
+Te.displayName = "Table.Footer";
+const Se = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(B.row, e), ...t }));
+Se.displayName = "Table.Row";
+const Be = n(
+  ({ as: e = "div", area: t, variant: a, className: s, style: r, ...i }, l) => {
+    const d = f({
       variant: a
     });
     return /* @__PURE__ */ o(
       e,
       {
-        ref: i,
-        className: d(w.col, s),
+        ref: l,
+        className: c(B.col, s),
         style: {
           "--_area": t,
           ...r
         },
-        ...m,
-        ...l
+        ...d,
+        ...i
       }
     );
   }
 );
-we.displayName = "Table.Col";
+Be.displayName = "Table.Col";
 const Ae = n(
-  ({ 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);
+  ({ rowId: e, isMain: t = !1, checked: a, indeterminate: s, onChange: r }, i) => {
+    const l = he(), d = 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);
     const u = (p) => {
-      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: [
+      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);
+    }, m = t && l.selectedRows.size > 0 && l.selectedRows.size < l.allRowIds.size;
+    return /* @__PURE__ */ b("label", { className: k.checkbox, children: [
       /* @__PURE__ */ o(
         "input",
         {
           ref: (p) => {
-            p && (p.indeterminate = c || s || !1, typeof l == "function" ? l(p) : l && (l.current = p));
+            p && (p.indeterminate = m || s || !1, typeof i == "function" ? i(p) : i && (i.current = p));
           },
           type: "checkbox",
           className: k.input,
-          checked: a !== void 0 ? a : m,
+          checked: a !== void 0 ? a : d,
           onChange: u,
           "aria-label": t ? "Select all rows" : `Select row ${e}`
         }
@@ -466,98 +476,98 @@ const Ae = n(
 );
 Ae.displayName = "Table.Checkbox";
 const Re = n(
-  ({ 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 })
+  ({ as: e = "div", title: t, subtitle: a, size: s = "md", className: r, ...i }, l) => /* @__PURE__ */ b(e, { ref: l, className: c(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 })
   ] })
 );
 Re.displayName = "Table.DoubleLine";
-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(w.action), children: [
+const we = D.Item;
+we.displayName = "Table.ActionItem";
+const xe = n(({ icon: e, children: t }, a) => {
+  const s = K(), r = D.getTriggerProps({ id: s });
+  return /* @__PURE__ */ b("div", { ref: a, className: c(B.action), children: [
     /* @__PURE__ */ o(
-      V,
+      W,
       {
         ...r,
         as: e,
         variant: "ghost",
-        className: d(w["action-trigger"]),
+        className: c(B["action-trigger"]),
         "aria-label": "Actions",
-        onClick: (l) => {
-          l.stopPropagation();
+        onClick: (i) => {
+          i.stopPropagation();
         },
         size: "small"
       }
     ),
-    /* @__PURE__ */ o(_, { id: s, placement: "bottom", closeOnClick: !0, children: t })
+    /* @__PURE__ */ o(D, { id: s, placement: "bottom", closeOnClick: !0, children: t })
   ] });
 });
-Le.displayName = "Table.Action";
-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({
-      selected: g,
-      allSelected: g.size === c.current.size && c.current.size > 0,
-      someSelected: g.size > 0
+xe.displayName = "Table.Action";
+const Ie = n(({ columns: e, children: t, className: a, style: s, onSelectionChange: r, ...i }, l) => {
+  const [d, u] = M(/* @__PURE__ */ new Set()), m = G(/* @__PURE__ */ new Set()), p = (v, N) => {
+    const S = new Set(d);
+    N ? S.add(v) : S.delete(v), u(S), r == null || r({
+      selected: S,
+      allSelected: S.size === m.current.size && m.current.size > 0,
+      someSelected: S.size > 0
     });
-  }, N = (f, h) => {
-    const g = h ? new Set(f) : /* @__PURE__ */ new Set();
-    u(g), r == null || r({
-      selected: g,
-      allSelected: h,
-      someSelected: h
+  }, y = (v, N) => {
+    const S = N ? new Set(v) : /* @__PURE__ */ new Set();
+    u(S), r == null || r({
+      selected: S,
+      allSelected: N,
+      someSelected: N
     });
-  }, b = (f) => {
-    c.current.add(f);
-  }, S = {
-    selectedRows: m,
-    allRowIds: c.current,
+  }, h = (v) => {
+    m.current.add(v);
+  }, T = {
+    selectedRows: d,
+    allRowIds: m.current,
     onSelectionChange: p,
-    onSelectAll: N,
-    registerRowId: b
+    onSelectAll: y,
+    registerRowId: h
   };
-  return /* @__PURE__ */ o(ve.Provider, { value: S, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(ye.Provider, { value: T, children: /* @__PURE__ */ o(
     "div",
     {
-      ref: i,
-      className: d(w.table, a),
+      ref: l,
+      className: c(B.table, a),
       style: {
         "--_columns": e,
         ...s
       },
-      ...l,
+      ...i,
       children: t
     }
   ) });
 });
-xe.displayName = "Table";
-const pa = Object.assign(xe, {
-  Toolbar: he,
-  Header: ge,
-  Body: Te,
-  Footer: Se,
-  Row: Be,
-  Col: we,
+Ie.displayName = "Table";
+const ia = Object.assign(Ie, {
+  Toolbar: ve,
+  Header: fe,
+  Body: ge,
+  Footer: Te,
+  Row: Se,
+  Col: Be,
   Checkbox: Ae,
   DoubleLine: Re,
-  Action: Le,
-  ActionItem: Ie
-}), Xt = n(
+  Action: xe,
+  ActionItem: we
+}), Dt = n(
   ({
     gap: e = "md",
     direction: t = "horizontal",
     align: a = "center",
     wrap: s = "nowrap",
     fluid: r = !1,
-    "aria-label": l = "Button group",
-    children: i,
-    className: m,
+    "aria-label": i = "Button group",
+    children: l,
+    className: d,
     ...u
-  }, c) => {
-    const p = v({
+  }, m) => {
+    const p = f({
       align: a,
       direction: t,
       fluid: r,
@@ -567,263 +577,181 @@ const pa = Object.assign(xe, {
     return /* @__PURE__ */ o(
       "div",
       {
-        ref: c,
-        className: d(At["button-group"], m),
+        ref: m,
+        className: c(vt["button-group"], d),
         role: "group",
-        "aria-label": l,
+        "aria-label": i,
         ...p,
         ...u,
-        children: i
+        children: l
       }
     );
   }
 );
-Xt.displayName = "ButtonGroup";
-const Fe = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: d(L["top-bar"], t), ...a, children: e }));
-Fe.displayName = "TopBar";
-const De = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: d(L["top-bar-leading"], t), ...a, children: e }));
-De.displayName = "TopBar.Leading";
-const Me = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: d(L["top-bar-centred"], t), ...a, children: e }));
-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: l, ...i }, m) => /* @__PURE__ */ y(
+Dt.displayName = "ButtonGroup";
+const Le = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: c(w["top-bar"], t), ...a, children: e }));
+Le.displayName = "TopBar";
+const Fe = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: c(w["top-bar-leading"], t), ...a, children: e }));
+Fe.displayName = "TopBar.Leading";
+const He = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: c(w["top-bar-centred"], t), ...a, children: e }));
+He.displayName = "TopBar.Centred";
+const Pe = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: c(w["top-bar-trailing"], t), ...a, children: e }));
+Pe.displayName = "TopBar.Trailing";
+const Ce = n(
+  ({ as: e = "button", active: t, disabled: a, icon: s, className: r, children: i, ...l }, d) => /* @__PURE__ */ b(
     e,
     {
-      ref: m,
-      className: d(L["top-bar-item"], r),
+      ref: d,
+      className: c(w["top-bar-item"], r),
       "data-active": t ? "" : void 0,
       "data-disabled": a ? "" : void 0,
-      ...i,
+      ...l,
       children: [
-        s && /* @__PURE__ */ o("span", { className: L["top-bar-item-icon"], children: s }),
-        l
+        s && /* @__PURE__ */ o("span", { className: w["top-bar-item-icon"], children: s }),
+        i
       ]
     }
   )
 );
-Ge.displayName = "TopBar.Item";
-const Pe = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: d(L["top-bar-list-item"], t), ...a, children: e }));
-Pe.displayName = "TopBar.ListItem";
-const ba = Object.assign(Fe, {
-  Centred: Me,
-  Item: Ge,
-  Leading: De,
-  ListItem: Pe,
-  Trailing: He
-}), ze = A(void 0), U = n(
-  ({ 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)",
-      sm: "var(--spacing-2)",
-      xs: "var(--spacing-1)"
-    }, p = {
-      onChange: s,
-      value: a
+Ce.displayName = "TopBar.Item";
+const ze = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: c(w["top-bar-list-item"], t), ...a, children: e }));
+ze.displayName = "TopBar.ListItem";
+const la = Object.assign(Le, {
+  Centred: He,
+  Item: Ce,
+  Leading: Fe,
+  ListItem: ze,
+  Trailing: Pe
+}), Ge = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("aside", { ref: a, className: c(g.sidebar, t), children: e }));
+Ge.displayName = "Sidebar";
+const Me = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(g["sidebar-header"], t), children: e }));
+Me.displayName = "Sidebar.Header";
+const je = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(g["sidebar-body"], t), children: e }));
+je.displayName = "Sidebar.Body";
+const De = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(g["sidebar-footer"], t), children: e }));
+De.displayName = "Sidebar.Footer";
+const Oe = n(
+  ({ label: e, icon: t, defaultExpanded: a = !0, isExpanded: s, onExpandedChange: r, children: i, className: l }, d) => {
+    const [u, m] = M(a), p = s !== void 0 ? s : u, y = () => {
+      const h = !p;
+      m(h), r == null || r(h);
     };
-    return /* @__PURE__ */ o(ze.Provider, { value: p, children: /* @__PURE__ */ o(
-      "nav",
-      {
-        ref: m,
-        className: d(j.nav, l),
-        style: {
-          ...t && {
-            "--vers-comp-nav-gap": c[t]
-          }
-        },
-        ...u,
-        ...i,
-        children: r
-      }
-    ) });
-  }
-);
-U.displayName = "Nav";
-U.displayName = "Nav";
-const je = n(
-  ({
-    as: e = "button",
-    active: t = !1,
-    value: a,
-    disabled: s = !1,
-    loading: r = !1,
-    leftIcon: l,
-    rightIcon: i,
-    children: m,
-    onClick: u,
-    className: c,
-    ...p
-  }, N) => {
-    const b = R(ze), S = b != null && b.onChange && a !== void 0 ? b.value === a : t, f = v({
-      active: S,
-      disabled: s || r,
-      loading: r
-    }), h = (g) => {
-      if (s || r) {
-        g.preventDefault();
-        return;
-      }
-      b != null && b.onChange && a !== void 0 && b.onChange(a), u == null || u(g);
-    };
-    return /* @__PURE__ */ y(
-      e,
-      {
-        ref: N,
-        className: d(j["nav-item"], c),
-        "aria-current": S && e !== "button" ? "page" : void 0,
-        "aria-disabled": s || r ? "true" : void 0,
-        "aria-busy": r ? "true" : void 0,
-        ...f,
-        ...p,
-        onClick: h,
-        children: [
-          l && /* @__PURE__ */ o("span", { className: j["nav-item-icon"], children: /* @__PURE__ */ o(E, { as: l }) }),
-          m,
-          i && /* @__PURE__ */ o("span", { className: j["nav-item-icon"], children: /* @__PURE__ */ o(E, { as: i }) })
-        ]
-      }
-    );
-  }
-);
-je.displayName = "NavItem";
-const Na = Object.assign(U, {
-  Item: je
-}), $e = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("aside", { ref: a, className: d(T.sidebar, t), children: e }));
-$e.displayName = "Sidebar";
-const Ee = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(T["sidebar-header"], t), children: e }));
-Ee.displayName = "Sidebar.Header";
-const _e = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(T["sidebar-body"], t), children: e }));
-_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: 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);
-    };
-    return /* @__PURE__ */ y(
+    return /* @__PURE__ */ b(
       "div",
       {
-        ref: m,
-        className: d(T["sidebar-group"], i),
+        ref: d,
+        className: c(g["sidebar-group"], l),
         "data-expanded": p ? "" : void 0,
         children: [
-          /* @__PURE__ */ y("button", { className: T["sidebar-group-header"], onClick: N, "aria-expanded": p, children: [
+          /* @__PURE__ */ b("button", { className: g["sidebar-group-header"], onClick: y, "aria-expanded": p, children: [
             t && /* @__PURE__ */ o("span", { children: t }),
-            /* @__PURE__ */ o("span", { className: T["sidebar-group-label"], children: e }),
-            /* @__PURE__ */ o(E, { as: Z, className: T["sidebar-group-chevron"], size: "sm" })
+            /* @__PURE__ */ o("span", { className: g["sidebar-group-label"], children: e }),
+            /* @__PURE__ */ o(Q, { as: q, className: g["sidebar-group-chevron"], size: "sm" })
           ] }),
-          /* @__PURE__ */ o("div", { className: T["sidebar-group-content"], children: /* @__PURE__ */ o("div", { children: l }) })
+          /* @__PURE__ */ o("div", { className: g["sidebar-group-content"], children: /* @__PURE__ */ o("div", { children: i }) })
         ]
       }
     );
   }
 );
-Ve.displayName = "Sidebar.Group";
-const ke = n(
-  ({ as: e = "button", active: t, disabled: a, icon: s, action: r, className: l, children: i, ...m }, u) => /* @__PURE__ */ y(
+Oe.displayName = "Sidebar.Group";
+const $e = n(
+  ({ as: e = "button", active: t, disabled: a, icon: s, action: r, className: i, children: l, ...d }, u) => /* @__PURE__ */ b(
     e,
     {
       ref: u,
-      className: d(T["sidebar-item"], l),
+      className: c(g["sidebar-item"], i),
       "data-active": t ? "" : void 0,
       "data-disabled": a ? "" : void 0,
       "data-action": r ? "" : void 0,
-      ...m,
+      ...d,
       children: [
-        s && /* @__PURE__ */ o("span", { className: T["sidebar-item-icon"], children: s }),
-        /* @__PURE__ */ o("span", { className: T["sidebar-item-text"], children: i }),
-        r && /* @__PURE__ */ o("span", { className: T["sidebar-item-action"], children: r })
+        s && /* @__PURE__ */ o("span", { className: g["sidebar-item-icon"], children: s }),
+        /* @__PURE__ */ o("span", { className: g["sidebar-item-text"], children: l }),
+        r && /* @__PURE__ */ o("span", { className: g["sidebar-item-action"], children: r })
       ]
     }
   )
 );
-ke.displayName = "Sidebar.Item";
-const We = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(T["sidebar-item-list"], t), children: e }));
-We.displayName = "Sidebar.ItemList";
-const Xe = n(({ className: e }, t) => /* @__PURE__ */ o("div", { ref: t, className: d(T["sidebar-divider"], e), children: /* @__PURE__ */ o(Mt, {}) }));
-Xe.displayName = "Sidebar.Divider";
-const ya = Object.assign($e, {
-  Body: _e,
-  Divider: Xe,
-  Footer: Ce,
-  Group: Ve,
-  Header: Ee,
-  Item: ke,
-  ItemList: We
+$e.displayName = "Sidebar.Item";
+const ke = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(g["sidebar-item-list"], t), children: e }));
+ke.displayName = "Sidebar.ItemList";
+const _e = n(({ className: e }, t) => /* @__PURE__ */ o("div", { ref: t, className: c(g["sidebar-divider"], e), children: /* @__PURE__ */ o(St, {}) }));
+_e.displayName = "Sidebar.Divider";
+const na = Object.assign(Ge, {
+  Body: je,
+  Divider: _e,
+  Footer: De,
+  Group: Oe,
+  Header: Me,
+  Item: $e,
+  ItemList: ke
 });
-function qt(e, t) {
+function Ot(e, t) {
   return 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: l, onClick: i, className: m, ...u }, c) => {
-    const p = qt(e, "a"), N = v({
+const Ee = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("nav", { ref: s, className: c(j["bottom-bar"], t), ...a, children: e }));
+Ee.displayName = "BottomBar";
+const Ve = n(
+  ({ as: e = "button", href: t, active: a = !1, disabled: s = !1, icon: r, children: i, onClick: l, className: d, ...u }, m) => {
+    const p = Ot(e, "a"), y = f({
       active: a,
       disabled: s
-    }), b = (h) => {
+    }), h = (N) => {
       if (s) {
-        h.preventDefault();
+        N.preventDefault();
         return;
       }
-      i == null || i(h);
-    }, S = {
-      className: d($["bottom-bar-item"], m),
-      onClick: b,
-      ref: c,
-      ...N,
+      l == null || l(N);
+    }, T = {
+      className: c(j["bottom-bar-item"], d),
+      onClick: h,
+      ref: m,
+      ...y,
       ...u
     };
-    return p && (S.href = t), /* @__PURE__ */ y(e || "button", { ...S, children: [
-      r && /* @__PURE__ */ o("span", { className: $["bottom-bar-item-icon"], children: r }),
-      l && /* @__PURE__ */ o("span", { className: $["bottom-bar-item-text"], children: l })
+    return p && (T.href = t), /* @__PURE__ */ b(e || "button", { ...T, children: [
+      r && /* @__PURE__ */ o("span", { className: j["bottom-bar-item-icon"], children: r }),
+      i && /* @__PURE__ */ o("span", { className: j["bottom-bar-item-text"], children: i })
     ] });
   }
 );
-Je.displayName = "BottomBar.Item";
-const va = Object.assign(qe, {
-  Item: Je
-}), Ke = n(
-  ({ className: e, children: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(x["app-layout"], e), children: t })
-);
-Ke.displayName = "AppLayout";
-const Qe = n(
-  ({ centered: e, className: t, children: a }, s) => {
-    const r = v({
-      centered: e
-    });
-    return /* @__PURE__ */ o("div", { ref: s, className: d(x["app-layout-body"], t), ...r, children: a });
-  }
-);
-Qe.displayName = "AppLayout.Body";
-const Ue = n(({ className: e, children: t }, a) => /* @__PURE__ */ o("header", { ref: a, className: d(x["app-layout-header"], e), children: t }));
-Ue.displayName = "AppLayout.Header";
-const Ye = n(({ className: e, children: t }, a) => /* @__PURE__ */ o("main", { ref: a, className: d(x["app-layout-main"], e), children: t }));
-Ye.displayName = "AppLayout.Main";
-const Ze = n(({ className: e, children: t }, a) => /* @__PURE__ */ o("aside", { ref: a, className: d(x["app-layout-side-left"], e), children: t }));
-Ze.displayName = "AppLayout.SideLeft";
-const Oe = n(({ className: e, children: t }, a) => /* @__PURE__ */ o("aside", { ref: a, className: d(x["app-layout-side-right"], e), children: t }));
-Oe.displayName = "AppLayout.SideRight";
-const et = n(({ className: e, children: t }, a) => /* @__PURE__ */ o("footer", { ref: a, className: d(x["app-layout-footer"], e), children: t }));
-et.displayName = "AppLayout.Footer";
-const fa = Object.assign(Ke, {
-  Body: Qe,
-  Footer: et,
-  Header: Ue,
-  Main: Ye,
-  SideLeft: Ze,
-  SideRight: Oe
+Ve.displayName = "BottomBar.Item";
+const ca = Object.assign(Ee, {
+  Item: Ve
+}), We = n(({ className: e, children: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(x["app-layout"], e), children: t }));
+We.displayName = "AppLayout";
+const Xe = n(({ centered: e, className: t, children: a }, s) => {
+  const r = f({
+    centered: e
+  });
+  return /* @__PURE__ */ o("div", { ref: s, className: c(x["app-layout-body"], t), ...r, children: a });
+});
+Xe.displayName = "AppLayout.Body";
+const qe = n(({ className: e, children: t }, a) => /* @__PURE__ */ o("header", { ref: a, className: c(x["app-layout-header"], e), children: t }));
+qe.displayName = "AppLayout.Header";
+const Je = n(({ className: e, children: t }, a) => /* @__PURE__ */ o("main", { ref: a, className: c(x["app-layout-main"], e), children: t }));
+Je.displayName = "AppLayout.Main";
+const Ke = n(({ className: e, children: t }, a) => /* @__PURE__ */ o("aside", { ref: a, className: c(x["app-layout-side-left"], e), children: t }));
+Ke.displayName = "AppLayout.SideLeft";
+const Qe = n(({ className: e, children: t }, a) => /* @__PURE__ */ o("aside", { ref: a, className: c(x["app-layout-side-right"], e), children: t }));
+Qe.displayName = "AppLayout.SideRight";
+const Ue = n(({ className: e, children: t }, a) => /* @__PURE__ */ o("footer", { ref: a, className: c(x["app-layout-footer"], e), children: t }));
+Ue.displayName = "AppLayout.Footer";
+const da = Object.assign(We, {
+  Body: Xe,
+  Footer: Ue,
+  Header: qe,
+  Main: Je,
+  SideLeft: Ke,
+  SideRight: Qe
 });
-function Jt({ columns: e = "1fr", children: t, className: a, style: s, ...r }, l) {
+function $t({ columns: e = "1fr", children: t, className: a, style: s, ...r }, i) {
   return /* @__PURE__ */ o(
     "form",
     {
-      ref: l,
-      className: d(X["form-group"], a),
+      ref: i,
+      className: c(V["form-group"], a),
       style: {
         "--_columns": e,
         ...s
@@ -833,14 +761,14 @@ function Jt({ columns: e = "1fr", children: t, className: a, style: s, ...r }, l
     }
   );
 }
-const tt = n(Jt);
-tt.displayName = "FormGroup";
-const at = n(
-  ({ area: e, children: t, className: a, style: s, ...r }, l) => /* @__PURE__ */ o(
+const Ye = n($t);
+Ye.displayName = "FormGroup";
+const Ze = n(
+  ({ area: e, children: t, className: a, style: s, ...r }, i) => /* @__PURE__ */ o(
     "div",
     {
-      ref: l,
-      className: d(X.field, a),
+      ref: i,
+      className: c(V.field, a),
       style: {
         "--_area": e,
         ...s
@@ -850,219 +778,84 @@ const at = n(
     }
   )
 );
-at.displayName = "FormGroup.Field";
-const st = n(
-  ({ className: e, ...t }, a) => /* @__PURE__ */ o(
-    "hr",
-    {
-      ref: a,
-      className: d(X.separator, e),
-      ...t
-    }
-  )
-);
-st.displayName = "FormGroup.Separator";
-const ha = Object.assign(tt, {
-  Field: at,
-  Separator: st
+Ze.displayName = "FormGroup.Field";
+const et = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("hr", { ref: a, className: c(V.separator, e), ...t }));
+et.displayName = "FormGroup.Separator";
+const ma = Object.assign(Ye, {
+  Field: Ze,
+  Separator: et
 });
-function Kt({ direction: e = "column", children: t, className: a, ...s }, r) {
-  return /* @__PURE__ */ o(
-    "ul",
-    {
-      ref: r,
-      className: d(W.features, a),
-      "data-direction": e,
-      ...s,
-      children: t
-    }
-  );
+function kt({ direction: e = "column", children: t, className: a, ...s }, r) {
+  return /* @__PURE__ */ o("ul", { ref: r, className: c(_.features, a), "data-direction": e, ...s, children: t });
 }
-const ot = n(Kt);
-ot.displayName = "Features";
-const rt = n(
-  ({ 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: l,
-        "aria-label": s,
-        className: d(W.item, a),
-        ...u,
-        ...r,
-        children: [
-          e && /* @__PURE__ */ o("span", { className: W.icon, children: e }),
-          t,
-          s && /* @__PURE__ */ o(I, { id: m, children: /* @__PURE__ */ o(I.Text, { children: s }) })
-        ]
-      }
-    );
-  }
-);
-rt.displayName = "Features.Item";
-const Qt = Object.assign(ot, {
-  Item: rt
-}), 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) {
-        if (e)
-          try {
-            c.showModal(), document.documentElement.style.overflow = "hidden";
-          } catch {
-          }
-        else
-          c.close(), document.documentElement.style.overflow = "";
-        return () => {
-          document.documentElement.style.overflow = "";
-        };
-      }
-    }, [e, m]), z(() => {
-      const c = m.current;
-      if (!c)
-        return;
-      const p = () => t == null ? void 0 : t(!1), N = (b) => {
-        b.preventDefault(), t == null || t(!1);
-      };
-      return c.addEventListener("close", p), c.addEventListener("cancel", N), () => {
-        c.removeEventListener("close", p), c.removeEventListener("cancel", N);
-      };
-    }, [t, m]);
-    const u = Dt(
-      (c) => {
-        c.target === c.currentTarget && (t == null || t(!1)), s == null || s(c);
-      },
-      [t, s]
-    );
-    return /* @__PURE__ */ o("dialog", { ...r, ref: m, onClick: u, children: a });
-  }
-);
-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, ...l }, i) => {
-    const m = v({
-      placement: a
-    });
-    return /* @__PURE__ */ o(it.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ o(
-      Y,
-      {
-        ref: i,
-        isOpen: e,
-        onOpenChange: t,
-        className: d(e && Rt.drawer, r),
-        ...m,
-        ...l,
-        children: /* @__PURE__ */ o("div", { className: B.content, children: s })
-      }
-    ) });
+const tt = n(kt);
+tt.displayName = "Features";
+const at = n(
+  ({ icon: e, children: t, className: a, "aria-label": s, ...r }, i) => {
+    const d = `features-item-${K()}`, u = s ? R.getTooltipTriggerProps({ id: d }) : {};
+    return /* @__PURE__ */ b("li", { ref: i, "aria-label": s, className: c(_.item, a), ...u, ...r, children: [
+      e && /* @__PURE__ */ o("span", { className: _.icon, children: e }),
+      t,
+      s && /* @__PURE__ */ o(R, { id: d, children: /* @__PURE__ */ o(R.Text, { children: s }) })
+    ] });
   }
 );
-ct.displayName = "Drawer";
-const nt = n(({ onClick: e, ...t }, a) => {
-  const { onClose: s } = Ut();
-  return /* @__PURE__ */ o(
-    V,
-    {
-      ref: a,
-      variant: "ghost",
-      as: q,
-      "aria-label": "Close",
-      onClick: (l) => {
-        s(), e == null || e(l);
-      },
-      className: B.closeButton,
-      ...t
-    }
-  );
-});
-nt.displayName = "Drawer.CloseButton";
-const dt = n(
-  ({ action: e, children: t, tabs: a, className: s, ...r }, l) => /* @__PURE__ */ y(
-    "div",
-    {
-      ref: l,
-      className: d(B.header, s),
-      ...r,
-      ...e && { "data-action": "" },
-      ...a && { "data-tabs": "" },
-      children: [
-        e ? /* @__PURE__ */ y(Tt, { children: [
-          /* @__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
-      ]
-    }
-  )
-);
-dt.displayName = "Drawer.Header";
-const Ta = Object.assign(ct, {
-  Body: K,
-  CloseButton: nt,
-  Footer: te,
-  Header: dt,
-  Title: J
-}), mt = A(void 0), Yt = () => {
-  const e = R(mt);
+at.displayName = "Features.Item";
+const _t = Object.assign(tt, {
+  Item: at
+}), ua = _t, st = F(void 0), Et = () => {
+  const e = H(st);
   if (!e)
     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: 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(
+}, ot = n(
+  ({ open: e, onOpenChange: t, size: a, position: s, children: r, className: i, ...l }, d) => {
+    const u = f({ size: a, position: s });
+    return /* @__PURE__ */ o(st.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ o(
       Y,
       {
-        ref: m,
+        ref: d,
         isOpen: e,
         onOpenChange: t,
-        className: d(e && It.modal, l),
+        className: c(e && ft.modal, i),
         "data-modal": "",
         ...u,
-        ...i,
-        children: /* @__PURE__ */ o("div", { className: B.content, children: r })
+        ...l,
+        children: /* @__PURE__ */ o("div", { className: P.content, children: r })
       }
     ) });
   }
 );
-ut.displayName = "Modal";
-const pt = n(({ onClick: e, ...t }, a) => {
-  const { onClose: s } = Yt();
+ot.displayName = "Modal";
+const rt = n(({ onClick: e, ...t }, a) => {
+  const { onClose: s } = Et();
   return /* @__PURE__ */ o(
-    V,
+    W,
     {
       ref: a,
       variant: "ghost",
-      as: q,
+      as: J,
       "aria-label": "Close",
-      onClick: (l) => {
-        s(), e == null || e(l);
+      onClick: (i) => {
+        s(), e == null || e(i);
       },
-      className: B.closeButton,
+      className: P.closeButton,
       ...t
     }
   );
 });
-pt.displayName = "Modal.CloseButton";
-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: [
+rt.displayName = "Modal.CloseButton";
+const it = n(({ action: e, children: t, className: a, ...s }, r) => /* @__PURE__ */ b("div", { ref: r, className: c(P.header, "modal-header", a), "data-modal-header": "", ...s, children: [
   /* @__PURE__ */ o("div", { children: t }),
   e && /* @__PURE__ */ o("div", { className: "modal-header-action", children: e })
 ] }));
-bt.displayName = "Modal.Header";
-const Nt = n(
+it.displayName = "Modal.Header";
+const lt = n(
   ({ align: e = "end", children: t, className: a, ...s }, r) => /* @__PURE__ */ o(
     "div",
     {
       ref: r,
-      className: d(B.footer, "modal-footer", a),
+      className: c(P.footer, "modal-footer", a),
       "data-modal-footer": "",
       "data-align": e,
       ...s,
@@ -1070,80 +863,113 @@ const Nt = n(
     }
   )
 );
-Nt.displayName = "Modal.Footer";
-const Sa = Object.assign(ut, {
-  Body: K,
-  CloseButton: pt,
-  Footer: Nt,
-  Header: bt,
-  Title: J
-}), yt = A(void 0), Zt = () => {
-  const e = R(yt);
+lt.displayName = "Modal.Footer";
+const pa = Object.assign(ot, {
+  Body: ee,
+  CloseButton: rt,
+  Footer: lt,
+  Header: it,
+  Title: Z
+}), nt = F(void 0), Vt = () => {
+  const e = H(nt);
   if (!e)
     throw new Error("BottomSheet subcomponents must be used within BottomSheet");
   return e;
-}, vt = n(
-  ({ 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(
+}, ct = n(
+  ({ open: e, onOpenChange: t, children: a, className: s, ...r }, i) => /* @__PURE__ */ o(nt.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ o(
     Y,
     {
-      ref: l,
+      ref: i,
       isOpen: e,
       onOpenChange: t,
-      className: d(Lt.bottomSheet, s),
+      className: c(gt.bottomSheet, s),
       ...r,
-      children: /* @__PURE__ */ o("div", { className: B.content, children: a })
+      children: /* @__PURE__ */ o("div", { className: P.content, children: a })
     }
   ) })
 );
-vt.displayName = "BottomSheet";
-const ft = n(
+ct.displayName = "BottomSheet";
+const dt = n(
   ({ onClick: e, ...t }, a) => {
-    const { onClose: s } = Zt();
+    const { onClose: s } = Vt();
     return /* @__PURE__ */ o(
-      V,
+      W,
       {
-        as: q,
+        as: J,
         ref: a,
         variant: "ghost",
         "aria-label": "Close",
-        onClick: (l) => {
-          s(), e == null || e(l);
+        onClick: (i) => {
+          s(), e == null || e(i);
         },
-        className: B.closeButton,
+        className: P.closeButton,
         ...t
       }
     );
   }
 );
-ft.displayName = "BottomSheet.CloseButton";
-const Ba = Object.assign(vt, {
-  Body: K,
-  CloseButton: ft,
-  Footer: te,
-  Header: Ht,
-  Title: J
+dt.displayName = "BottomSheet.CloseButton";
+const ba = Object.assign(ct, {
+  Body: ee,
+  CloseButton: dt,
+  Footer: wt,
+  Header: Rt,
+  Title: Z
+}), mt = n(
+  ({ title: e, subtitle: t, supplementary: a, className: s, ...r }, i) => /* @__PURE__ */ b("header", { ref: i, className: c(A.header, s), ...r, children: [
+    e,
+    t,
+    a && /* @__PURE__ */ o("div", { className: A.supplementary, children: a })
+  ] })
+);
+mt.displayName = "PageHeader";
+const ut = n(
+  ({ action: e, additionalInfo: t, className: a, children: s, ...r }, i) => {
+    const l = f({
+      action: e ? "true" : "false",
+      "additional-info": t ? "true" : "false"
+    });
+    return /* @__PURE__ */ b("div", { ref: i, className: c(A.title, a), ...l, ...r, children: [
+      /* @__PURE__ */ o("div", { className: A["title-inner"], children: /* @__PURE__ */ o(Bt, { as: "h1", size: "xl", weight: "bold", intent: "default", className: A.heading, children: s }) }),
+      (e || t) && /* @__PURE__ */ b("div", { className: A["title-right"], children: [
+        t && /* @__PURE__ */ o("div", { className: A["additional-info"], children: t }),
+        e && /* @__PURE__ */ o("div", { className: A.action, children: e })
+      ] })
+    ] });
+  }
+);
+ut.displayName = "PageHeader.Title";
+const pt = n(
+  ({ additionalInfo: e, className: t, children: a, ...s }, r) => /* @__PURE__ */ b("div", { ref: r, className: c(A.subtitle, t), ...s, children: [
+    /* @__PURE__ */ o(At, { as: "p", size: "base", weight: "normal", intent: "default", className: A["subtitle-text"], children: a }),
+    e && /* @__PURE__ */ o("div", { className: A["subtitle-additional-info"], children: e })
+  ] })
+);
+pt.displayName = "PageHeader.Subtitle";
+const Na = Object.assign(mt, {
+  Title: ut,
+  Subtitle: pt
 });
 export {
-  na as Accordion,
-  fa as AppLayout,
-  ma as AttributeList,
-  zt as AvatarGroup,
-  Ct as BadgeGroup,
-  va as BottomBar,
-  Ba as BottomSheet,
-  Xt as ButtonGroup,
-  ua as Card,
+  aa as Accordion,
+  da as AppLayout,
+  oa as AttributeList,
+  Lt as AvatarGroup,
+  zt as BadgeGroup,
+  ca as BottomBar,
+  ba as BottomSheet,
+  Dt as ButtonGroup,
+  ra as Card,
   Y as Dialog,
-  Ta as Drawer,
-  ga as Features,
-  ha as FormGroup,
-  _ as Menu,
-  Sa as Modal,
-  Na as Nav,
-  je as NavItem,
-  _t as NoResults,
-  ya as Sidebar,
-  pa as Table,
-  da as Tabs,
-  ba as TopBar
+  va as Drawer,
+  ua as Features,
+  ma as FormGroup,
+  D as Menu,
+  pa as Modal,
+  Ct as NoResults,
+  Na as PageHeader,
+  na as Sidebar,
+  ia as Table,
+  sa as Tabs,
+  la as TopBar
 };