@versaur/react 1.0.14 → 1.0.16

package/dist/blocks.js

@@ -1,93 +1,93 @@
-import { jsxs as b, jsx as s } from "react/jsx-runtime";
-import { accordionStyles as L, avatarGroupStyles as mt, tabsStyles as M, noResultsStyles as I, attributeListStyles as ut, badgeGroupStyles as pt, cardStyles as D, menuStyles as G, tableStyles as S, buttonGroupStyles as bt, topBarStyles as R, sidebarStyles as y, bottomBarStyles as P, appLayoutStyles as w, formGroupStyles as _, featuresStyles as O, modalStyles as Nt, bottomSheetStyles as yt } from "@versaur/core/blocks";
-import { ChevronDownIcon as W, XIcon as X } from "@versaur/icons";
-import { createContext as x, forwardRef as n, useRef as z, useState as H, useEffect as k, useContext as F, useLayoutEffect as vt, useId as q } from "react";
-import { u as v, I as J, B as E } from "./helpers-DTL6qrTe.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 { c as K, T as A, H as ht } from "./tooltip-BMKVL6jz.js";
-import { checkboxStyles as $ } from "@versaur/core/forms";
-import { a as Q } from "./drawer-DRv9k7lp.js";
-import { D as ma } from "./drawer-DRv9k7lp.js";
-import { overlayPartsStyles as C } from "@versaur/core/utils";
-import { O as U, a as Y, b as ft, c as gt } from "./overlay-parts-CFeD8VN0.js";
-const Z = x(void 0);
-function Tt() {
-  const e = F(Z);
+import { e as U, d as R, c as St, H as Bt, T as At } from "./tooltip-60d7mYVa.js";
+import { checkboxStyles as k } from "@versaur/core/forms";
+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 St({ summary: e, open: t, onOpenChange: a, children: o, className: r, ...i }, l) {
-  const [d, u] = H(t ?? !1), m = z(null);
-  k(() => {
+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]), k(() => {
+  }, [t]), E(() => {
     m.current && (m.current.open = d);
   }, [d]);
   const p = () => {
     const h = !d;
     u(h), a == null || a(h);
-  }, N = v({ open: d ? "" : void 0 });
-  return /* @__PURE__ */ s(Z.Provider, { value: { isOpen: d, toggle: p }, children: /* @__PURE__ */ b(
+  }, y = f({ open: d ? "" : void 0 });
+  return /* @__PURE__ */ o(te.Provider, { value: { isOpen: d, toggle: p }, children: /* @__PURE__ */ b(
     "details",
     {
       ref: l || m,
       className: c(L.item, r),
       open: d,
-      ...N,
+      ...y,
       ...i,
       children: [
         e,
-        /* @__PURE__ */ s("div", { className: L.content, children: o })
+        /* @__PURE__ */ o("div", { className: L.content, children: s })
       ]
     }
   ) });
 }
-const ee = n(St);
-ee.displayName = "Accordion";
-const te = n(
-  ({ children: e, right: t, clamp: a = 2, className: o, ...r }, i) => {
-    const { isOpen: l, toggle: d } = Tt(), u = z(null), m = (p) => {
+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__ */ b(
       "summary",
       {
         ref: i,
-        className: c(L.trigger, o),
+        className: c(L.trigger, s),
         onClick: m,
         role: "button",
         "aria-expanded": l,
         ...r,
         children: [
-          /* @__PURE__ */ s("span", { className: L.label, style: { "--_clamp": a }, children: e }),
-          t && /* @__PURE__ */ s("span", { ref: u, className: L.right, children: t }),
-          /* @__PURE__ */ s("span", { className: L.chevron, children: /* @__PURE__ */ s(W, { 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 }) })
         ]
       }
     );
   }
 );
-te.displayName = "Accordion.Summary";
-const Qt = Object.assign(ee, {
-  Summary: te
-}), Bt = n(
+se.displayName = "Accordion.Summary";
+const aa = Object.assign(ae, {
+  Summary: se
+}), Lt = n(
   ({
     direction: e = "horizontal",
     size: t = "md",
     align: a = "center",
-    wrap: o = "nowrap",
+    wrap: s = "nowrap",
     "aria-label": r = "Avatar group",
     children: i,
     className: l,
     ...d
   }, u) => {
-    const m = v({ align: a, direction: e, size: t, wrap: o });
-    return /* @__PURE__ */ s(
+    const m = f({ align: a, direction: e, size: t, wrap: s });
+    return /* @__PURE__ */ o(
       "div",
       {
         ref: u,
-        className: c(mt["avatar-group"], l),
+        className: c(Nt["avatar-group"], l),
         role: "group",
         "aria-label": r,
         ...m,
@@ -97,9 +97,9 @@ const Qt = Object.assign(ee, {
     );
   }
 );
-Bt.displayName = "AvatarGroup";
-function At(e, t) {
-  k(() => {
+Lt.displayName = "AvatarGroup";
+function Ft(e, t) {
+  E(() => {
     if (!e.current)
       return;
     const a = new ResizeObserver(t);
@@ -108,37 +108,37 @@ function At(e, t) {
     };
   }, [e, t]);
 }
-const ae = x(void 0);
-function Rt() {
-  const e = F(ae);
+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 se = n(({ value: e, onChange: t, children: a, className: o }, r) => {
-  const i = z(null), l = z(/* @__PURE__ */ new Map()), [d, u] = H(0), [m, p] = H(0), N = () => {
-    const f = l.current.get(e);
-    if (!f || !i.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 g = i.current.getBoundingClientRect(), T = f.getBoundingClientRect(), ct = T.left - g.left + i.current.scrollLeft, { width: dt } = T;
-    u(ct), p(dt), 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"
     });
-  }, h = (f, g) => {
-    g && l.current.set(f, g);
+  }, h = (v, N) => {
+    N && l.current.set(v, N);
   };
-  vt(() => {
-    N();
-  }, [e]), At(i, N);
-  const B = v({});
-  return /* @__PURE__ */ s(ae.Provider, { value: { activeValue: e, onChange: t, registerTrigger: h }, children: /* @__PURE__ */ b("nav", { ref: K(r, i), className: c(M.tabs, o), ...B, children: [
-    /* @__PURE__ */ s("ul", { className: M.tablist, role: "tablist", children: a }),
-    /* @__PURE__ */ s(
+  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: M["tabs-thumb"],
+        className: z["tabs-thumb"],
         style: {
           left: `${d}px`,
           width: `${m}px`
@@ -147,45 +147,53 @@ const se = n(({ value: e, onChange: t, children: a, className: o }, r) => {
     )
   ] }) });
 });
-se.displayName = "Tabs";
-const oe = n(
-  ({ value: e, disabled: t = !1, children: a, className: o }, r) => {
-    const { activeValue: i, onChange: l, registerTrigger: d } = Rt(), u = i === e;
-    let m;
-    t ? m = "disabled" : u ? m = "active" : m = "default";
-    const p = () => {
-      t || l(e);
+re.displayName = "Tabs";
+const ie = n(
+  ({ 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__ */ s("li", { className: M.tabitem, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ o("li", { className: z.tabitem, children: /* @__PURE__ */ b(
       "button",
       {
-        ref: K(r, (N) => d(e, N)),
-        className: c(M.trigger, o),
+        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": m,
+        "data-state": y,
+        ...N && { "data-icon-config": N },
         disabled: t,
-        onClick: p,
-        children: a
+        onClick: S,
+        children: [
+          a,
+          r,
+          s
+        ]
       }
     ) });
   }
 );
-oe.displayName = "Tabs.Item";
-function wt(e) {
+ie.displayName = "Tabs.Item";
+function Pt(e) {
   return {
     "aria-labelledby": `tabs-trigger-${e}`,
     id: `tabs-panel-${e}`,
     role: "tabpanel"
   };
 }
-const Ut = Object.assign(se, {
-  Item: oe,
-  getPanelAttribute: wt
-}), It = n(
-  ({ icon: e, title: t, subtitle: a, action: o, className: r, ...i }, l) => /* @__PURE__ */ b(
+const sa = Object.assign(re, {
+  Item: ie,
+  getPanelAttribute: Pt
+}), Ct = n(
+  ({ icon: e, title: t, subtitle: a, action: s, className: r, ...i }, l) => /* @__PURE__ */ b(
     "section",
     {
       ref: l,
@@ -195,26 +203,26 @@ const Ut = Object.assign(se, {
       ...i,
       children: [
         /* @__PURE__ */ b("header", { className: I["no-results-header"], children: [
-          /* @__PURE__ */ s("div", { className: I["no-results-icon"], children: /* @__PURE__ */ s(J, { as: e, color: "inherit", "aria-hidden": "true" }) }),
-          /* @__PURE__ */ s("h5", { className: I["no-results-title"], children: t })
+          /* @__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__ */ s("p", { className: I["no-results-subtitle"], children: a }),
-        o && /* @__PURE__ */ s("div", { className: I["no-results-action"], role: "group", "aria-label": "Available actions", children: o })
+        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 })
       ]
     }
   )
 );
-It.displayName = "NoResults";
-const re = n(
-  ({ layout: e, columns: t = "repeat(3, 1fr)", gap: a, children: o, className: r, style: i, ...l }, d) => {
-    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__ */ s(
+    return /* @__PURE__ */ o(
       "dl",
       {
         ref: d,
-        className: c(ut["attribute-list"], r),
+        className: c(yt["attribute-list"], r),
         ...u,
         style: {
           "--_columns": t,
@@ -222,55 +230,55 @@ const re = n(
           ...i
         },
         ...l,
-        children: o
+        children: s
       }
     );
   }
 );
-re.displayName = "AttributeList";
-const ie = n(
-  ({ title: e, area: t, children: a, className: o, style: r, ...i }, l) => /* @__PURE__ */ b(
+le.displayName = "AttributeList";
+const ne = n(
+  ({ title: e, area: t, children: a, className: s, style: r, ...i }, l) => /* @__PURE__ */ b(
     "div",
     {
       ref: l,
-      className: c(o),
+      className: c(s),
       style: {
         "--_area": t,
         ...r
       },
       ...i,
       children: [
-        /* @__PURE__ */ s("dt", { children: e }),
-        /* @__PURE__ */ s("dd", { children: a })
+        /* @__PURE__ */ o("dt", { children: e }),
+        /* @__PURE__ */ o("dd", { children: a })
       ]
     }
   )
 );
-ie.displayName = "AttributeList.Item";
-const Yt = Object.assign(re, {
-  Item: ie
-}), Lt = n(
+ne.displayName = "AttributeList.Item";
+const oa = Object.assign(le, {
+  Item: ne
+}), zt = n(
   ({
     gap: e = "md",
     direction: t = "horizontal",
     align: a = "center",
-    wrap: o = "nowrap",
+    wrap: s = "nowrap",
     "aria-label": r = "Badge group",
     children: i,
     className: l,
     ...d
   }, u) => {
-    const m = v({
+    const m = f({
       align: a,
       direction: t,
       gap: e,
-      wrap: o
+      wrap: s
     });
-    return /* @__PURE__ */ s(
+    return /* @__PURE__ */ o(
       "div",
       {
         ref: u,
-        className: c(pt["badge-group"], l),
+        className: c(ht["badge-group"], l),
         role: "group",
         "aria-label": r,
         ...m,
@@ -280,50 +288,50 @@ const Yt = Object.assign(re, {
     );
   }
 );
-Lt.displayName = "BadgeGroup";
-function xt({ as: e = "div", size: t = "md", border: a, children: o, className: r, ...i }, l) {
-  const d = 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__ */ s(e === "button" ? "button" : "div", { ref: l, className: c(D.card, r), ...d, ...i, children: o });
+  return /* @__PURE__ */ o(e === "button" ? "button" : "div", { ref: l, className: c(O.card, r), ...d, ...i, children: s });
 }
-const le = n(
-  xt
+const ce = n(
+  Gt
 );
-le.displayName = "Card";
-const ne = n(
-  ({ justify: e, gap: t, children: a, className: o, ...r }, i) => {
-    const l = v({ gap: t, justify: e });
-    return /* @__PURE__ */ s("div", { ref: i, className: c(D.header, o), ...l, ...r, children: a });
+ce.displayName = "Card";
+const de = n(
+  ({ 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 });
   }
 );
-ne.displayName = "Card.Header";
-const ce = n(
-  ({ align: e, gap: t, children: a, className: o, ...r }, i) => {
-    const l = v({ align: e, gap: t });
-    return /* @__PURE__ */ s("div", { ref: i, className: c(D.body, o), ...l, ...r, children: a });
+de.displayName = "Card.Header";
+const me = n(
+  ({ 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 });
   }
 );
-ce.displayName = "Card.Body";
-const de = n(
-  ({ justify: e, gap: t, children: a, className: o, ...r }, i) => {
-    const l = v({ gap: t, justify: e });
-    return /* @__PURE__ */ s("div", { ref: i, className: c(D.footer, o), ...l, ...r, children: a });
+me.displayName = "Card.Body";
+const ue = n(
+  ({ 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 });
   }
 );
-de.displayName = "Card.Footer";
-const Zt = Object.assign(le, {
-  Body: ce,
-  Footer: de,
-  Header: ne
-}), me = x(void 0), ue = 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: o = 320,
+    maxWidth: s = 320,
     gap: r = 8,
     value: i,
     onChange: l,
@@ -331,105 +339,105 @@ const Zt = Object.assign(le, {
     children: u,
     ...m
   }, p) => {
-    const N = {
+    const y = {
       id: e,
       closeOnClick: d,
       onChange: l,
       value: i
     };
-    return /* @__PURE__ */ s("div", { ref: p, ...m, children: /* @__PURE__ */ s(me.Provider, { value: N, children: /* @__PURE__ */ s(A, { id: e, placement: t, gap: r, type: "persisted", children: /* @__PURE__ */ s(
+    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: G["menu-list"],
+        className: C["menu-list"],
         style: {
           "--_max-height": `${a}px`,
-          "--_max-width": `${o}px`
+          "--_max-width": `${s}px`
         },
         children: u
       }
     ) }) }) });
   }
 );
-ue.displayName = "Menu";
-function Ft(e) {
-  return A.getTooltipTriggerProps({
+be.displayName = "Menu";
+function Mt(e) {
+  return R.getTooltipTriggerProps({
     id: e.id
   });
 }
-function Ct(e) {
-  A.close(e);
+function jt(e) {
+  R.close(e);
 }
-const V = ue;
-V.getTriggerProps = Ft;
-V.close = Ct;
-const pe = n(
-  ({ value: e, disabled: t = !1, leftIcon: a, rightIcon: o, children: r, onClick: i, className: l, ...d }, u) => {
-    const m = F(me), p = m != null && m.onChange && e !== void 0 ? m.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
-    }), h = (B) => {
+    }), h = (T) => {
       if (t) {
-        B.preventDefault();
+        T.preventDefault();
         return;
       }
-      m != null && m.onChange && e !== void 0 && m.onChange(e), i == null || i(B), m != null && m.closeOnClick && (m != null && m.id) && A.close({ id: m.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__ */ b(
       "button",
       {
         ref: u,
-        className: c(G["menu-item"], l),
+        className: c(C["menu-item"], l),
         disabled: t,
-        ...N,
+        ...y,
         ...d,
         onClick: h,
         children: [
-          a ? /* @__PURE__ */ s("span", { className: G["menu-item-icon"], children: a }) : null,
-          /* @__PURE__ */ s("span", { className: G["menu-item-label"], children: r }),
-          o ? /* @__PURE__ */ s("span", { className: G["menu-item-icon"], children: o }) : 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
         ]
       }
     );
   }
 );
-pe.displayName = "Menu.Item";
-const j = V;
-j.Item = pe;
-const be = x(void 0);
-function Ne() {
-  const e = F(be);
+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 ye = n(
-  ({ leftContent: e, rightContent: t, className: a, ...o }, r) => {
-    const i = Ne(), l = typeof e == "function" ? e(i.selectedRows) : e, d = typeof t == "function" ? t(i.selectedRows) : t;
-    return /* @__PURE__ */ b("div", { ref: r, className: c(S.toolbar, a), ...o, children: [
-      /* @__PURE__ */ s("div", { children: l }),
-      /* @__PURE__ */ s("div", { children: d })
+const ve = n(
+  ({ leftContent: e, rightContent: t, className: a, ...s }, r) => {
+    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 })
     ] });
   }
 );
-ye.displayName = "Table.Toolbar";
-const ve = n(({ className: e, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: c(S.header, e), ...t }));
-ve.displayName = "Table.Header";
-const he = n(({ className: e, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: c(S.body, e), ...t }));
-he.displayName = "Table.Body";
-const fe = n(({ className: e, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: c(S.footer, e), ...t }));
-fe.displayName = "Table.Footer";
-const ge = n(({ className: e, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: c(S.row, e), ...t }));
-ge.displayName = "Table.Row";
-const Te = n(
-  ({ as: e = "div", area: t, variant: a, className: o, style: r, ...i }, l) => {
-    const d = 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__ */ s(
+    return /* @__PURE__ */ o(
       e,
       {
         ref: l,
-        className: c(S.col, o),
+        className: c(B.col, s),
         style: {
           "--_area": t,
           ...r
@@ -440,52 +448,52 @@ const Te = n(
     );
   }
 );
-Te.displayName = "Table.Col";
-const Se = n(
-  ({ rowId: e, isMain: t = !1, checked: a, indeterminate: o, onChange: r }, i) => {
-    const l = Ne(), d = t ? l.selectedRows.size === l.allRowIds.size && l.allRowIds.size > 0 : e !== void 0 && l.selectedRows.has(e);
+Be.displayName = "Table.Col";
+const Ae = n(
+  ({ 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 ? 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: $.checkbox, children: [
-      /* @__PURE__ */ s(
+    return /* @__PURE__ */ b("label", { className: k.checkbox, children: [
+      /* @__PURE__ */ o(
         "input",
         {
           ref: (p) => {
-            p && (p.indeterminate = m || o || !1, typeof i == "function" ? i(p) : i && (i.current = p));
+            p && (p.indeterminate = m || s || !1, typeof i == "function" ? i(p) : i && (i.current = p));
           },
           type: "checkbox",
-          className: $.input,
+          className: k.input,
           checked: a !== void 0 ? a : d,
           onChange: u,
           "aria-label": t ? "Select all rows" : `Select row ${e}`
         }
       ),
-      /* @__PURE__ */ s("span", { className: $.indicator })
+      /* @__PURE__ */ o("span", { className: k.indicator })
     ] });
   }
 );
-Se.displayName = "Table.Checkbox";
-const Be = n(
-  ({ as: e = "div", title: t, subtitle: a, size: o = "md", className: r, ...i }, l) => /* @__PURE__ */ b(e, { ref: l, className: c(S.col, r), "data-variant": "double-line", ...i, children: [
-    /* @__PURE__ */ s("div", { className: S["double-line-title"], "data-size": o, children: t }),
-    /* @__PURE__ */ s("div", { className: S["double-line-subtitle"], "data-size": o, children: a })
+Ae.displayName = "Table.Checkbox";
+const Re = n(
+  ({ 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 })
   ] })
 );
-Be.displayName = "Table.DoubleLine";
-const Ae = j.Item;
-Ae.displayName = "Table.ActionItem";
-const Re = n(({ icon: e, children: t }, a) => {
-  const o = q(), r = j.getTriggerProps({ id: o });
-  return /* @__PURE__ */ b("div", { ref: a, className: c(S.action), children: [
-    /* @__PURE__ */ s(
-      E,
+Re.displayName = "Table.DoubleLine";
+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(
+      W,
       {
         ...r,
         as: e,
         variant: "ghost",
-        className: c(S["action-trigger"]),
+        className: c(B["action-trigger"]),
         "aria-label": "Actions",
         onClick: (i) => {
           i.stopPropagation();
@@ -493,84 +501,84 @@ const Re = n(({ icon: e, children: t }, a) => {
         size: "small"
       }
     ),
-    /* @__PURE__ */ s(j, { id: o, placement: "bottom", closeOnClick: !0, children: t })
+    /* @__PURE__ */ o(D, { id: s, placement: "bottom", closeOnClick: !0, children: t })
   ] });
 });
-Re.displayName = "Table.Action";
-const we = n(({ columns: e, children: t, className: a, style: o, onSelectionChange: r, ...i }, l) => {
-  const [d, u] = H(/* @__PURE__ */ new Set()), m = z(/* @__PURE__ */ new Set()), p = (f, g) => {
-    const T = new Set(d);
-    g ? T.add(f) : T.delete(f), u(T), r == null || r({
-      selected: T,
-      allSelected: T.size === m.current.size && m.current.size > 0,
-      someSelected: T.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, g) => {
-    const T = g ? new Set(f) : /* @__PURE__ */ new Set();
-    u(T), r == null || r({
-      selected: T,
-      allSelected: g,
-      someSelected: g
+  }, y = (v, N) => {
+    const S = N ? new Set(v) : /* @__PURE__ */ new Set();
+    u(S), r == null || r({
+      selected: S,
+      allSelected: N,
+      someSelected: N
     });
-  }, h = (f) => {
-    m.current.add(f);
-  }, B = {
+  }, h = (v) => {
+    m.current.add(v);
+  }, T = {
     selectedRows: d,
     allRowIds: m.current,
     onSelectionChange: p,
-    onSelectAll: N,
+    onSelectAll: y,
     registerRowId: h
   };
-  return /* @__PURE__ */ s(be.Provider, { value: B, children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ o(ye.Provider, { value: T, children: /* @__PURE__ */ o(
     "div",
     {
       ref: l,
-      className: c(S.table, a),
+      className: c(B.table, a),
       style: {
         "--_columns": e,
-        ...o
+        ...s
       },
       ...i,
       children: t
     }
   ) });
 });
-we.displayName = "Table";
-const ea = Object.assign(we, {
-  Toolbar: ye,
-  Header: ve,
-  Body: he,
-  Footer: fe,
-  Row: ge,
-  Col: Te,
-  Checkbox: Se,
-  DoubleLine: Be,
-  Action: Re,
-  ActionItem: Ae
-}), Gt = n(
+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: xe,
+  ActionItem: we
+}), Dt = n(
   ({
     gap: e = "md",
     direction: t = "horizontal",
     align: a = "center",
-    wrap: o = "nowrap",
+    wrap: s = "nowrap",
     fluid: r = !1,
     "aria-label": i = "Button group",
     children: l,
     className: d,
     ...u
   }, m) => {
-    const p = v({
+    const p = f({
       align: a,
       direction: t,
       fluid: r,
       gap: e,
-      wrap: o
+      wrap: s
     });
-    return /* @__PURE__ */ s(
+    return /* @__PURE__ */ o(
       "div",
       {
         ref: m,
-        className: c(bt["button-group"], d),
+        className: c(vt["button-group"], d),
         role: "group",
         "aria-label": i,
         ...p,
@@ -580,51 +588,51 @@ const ea = Object.assign(we, {
     );
   }
 );
-Gt.displayName = "ButtonGroup";
-const Ie = n(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: c(R["top-bar"], t), ...a, children: e }));
-Ie.displayName = "TopBar";
-const Le = n(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: c(R["top-bar-leading"], t), ...a, children: e }));
-Le.displayName = "TopBar.Leading";
-const xe = n(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: c(R["top-bar-centred"], t), ...a, children: e }));
-xe.displayName = "TopBar.Centred";
-const Fe = n(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: c(R["top-bar-trailing"], t), ...a, children: e }));
-Fe.displayName = "TopBar.Trailing";
+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: o, className: r, children: i, ...l }, d) => /* @__PURE__ */ b(
+  ({ as: e = "button", active: t, disabled: a, icon: s, className: r, children: i, ...l }, d) => /* @__PURE__ */ b(
     e,
     {
       ref: d,
-      className: c(R["top-bar-item"], r),
+      className: c(w["top-bar-item"], r),
       "data-active": t ? "" : void 0,
       "data-disabled": a ? "" : void 0,
       ...l,
       children: [
-        o && /* @__PURE__ */ s("span", { className: R["top-bar-item-icon"], children: o }),
+        s && /* @__PURE__ */ o("span", { className: w["top-bar-item-icon"], children: s }),
         i
       ]
     }
   )
 );
 Ce.displayName = "TopBar.Item";
-const Ge = n(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: c(R["top-bar-list-item"], t), ...a, children: e }));
-Ge.displayName = "TopBar.ListItem";
-const ta = Object.assign(Ie, {
-  Centred: xe,
+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: Le,
-  ListItem: Ge,
-  Trailing: Fe
-}), Me = n(({ children: e, className: t }, a) => /* @__PURE__ */ s("aside", { ref: a, className: c(y.sidebar, t), children: e }));
-Me.displayName = "Sidebar";
-const ze = n(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: c(y["sidebar-header"], t), children: e }));
-ze.displayName = "Sidebar.Header";
-const He = n(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: c(y["sidebar-body"], t), children: e }));
-He.displayName = "Sidebar.Body";
-const Pe = n(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: c(y["sidebar-footer"], t), children: e }));
-Pe.displayName = "Sidebar.Footer";
-const je = n(
-  ({ label: e, icon: t, defaultExpanded: a = !0, isExpanded: o, onExpandedChange: r, children: i, className: l }, d) => {
-    const [u, m] = H(a), p = o !== void 0 ? o : u, N = () => {
+  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);
     };
@@ -632,301 +640,336 @@ const je = n(
       "div",
       {
         ref: d,
-        className: c(y["sidebar-group"], l),
+        className: c(g["sidebar-group"], l),
         "data-expanded": p ? "" : void 0,
         children: [
-          /* @__PURE__ */ b("button", { className: y["sidebar-group-header"], onClick: N, "aria-expanded": p, children: [
-            t && /* @__PURE__ */ s("span", { children: t }),
-            /* @__PURE__ */ s("span", { className: y["sidebar-group-label"], children: e }),
-            /* @__PURE__ */ s(J, { as: W, className: y["sidebar-group-chevron"], size: "sm" })
+          /* @__PURE__ */ b("button", { className: g["sidebar-group-header"], onClick: y, "aria-expanded": p, children: [
+            t && /* @__PURE__ */ o("span", { children: t }),
+            /* @__PURE__ */ o("span", { className: g["sidebar-group-label"], children: e }),
+            /* @__PURE__ */ o(Q, { as: q, className: g["sidebar-group-chevron"], size: "sm" })
           ] }),
-          /* @__PURE__ */ s("div", { className: y["sidebar-group-content"], children: /* @__PURE__ */ s("div", { children: i }) })
+          /* @__PURE__ */ o("div", { className: g["sidebar-group-content"], children: /* @__PURE__ */ o("div", { children: i }) })
         ]
       }
     );
   }
 );
-je.displayName = "Sidebar.Group";
-const De = n(
-  ({ as: e = "button", active: t, disabled: a, icon: o, action: r, className: i, children: l, ...d }, u) => /* @__PURE__ */ b(
+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: c(y["sidebar-item"], i),
+      className: c(g["sidebar-item"], i),
       "data-active": t ? "" : void 0,
       "data-disabled": a ? "" : void 0,
       "data-action": r ? "" : void 0,
       ...d,
       children: [
-        o && /* @__PURE__ */ s("span", { className: y["sidebar-item-icon"], children: o }),
-        /* @__PURE__ */ s("span", { className: y["sidebar-item-text"], children: l }),
-        r && /* @__PURE__ */ s("span", { className: y["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 })
       ]
     }
   )
 );
-De.displayName = "Sidebar.Item";
-const $e = n(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: c(y["sidebar-item-list"], t), children: e }));
-$e.displayName = "Sidebar.ItemList";
-const Oe = n(({ className: e }, t) => /* @__PURE__ */ s("div", { ref: t, className: c(y["sidebar-divider"], e), children: /* @__PURE__ */ s(ht, {}) }));
-Oe.displayName = "Sidebar.Divider";
-const aa = Object.assign(Me, {
-  Body: He,
-  Divider: Oe,
-  Footer: Pe,
-  Group: je,
-  Header: ze,
-  Item: De,
-  ItemList: $e
+$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 Mt(e, t) {
+function Ot(e, t) {
   return e === t;
 }
-const ke = n(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("nav", { ref: o, className: c(P["bottom-bar"], t), ...a, children: e }));
-ke.displayName = "BottomBar";
-const _e = n(
-  ({ as: e = "button", href: t, active: a = !1, disabled: o = !1, icon: r, children: i, onClick: l, className: d, ...u }, m) => {
-    const p = Mt(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: o
-    }), h = (g) => {
-      if (o) {
-        g.preventDefault();
+      disabled: s
+    }), h = (N) => {
+      if (s) {
+        N.preventDefault();
         return;
       }
-      l == null || l(g);
-    }, B = {
-      className: c(P["bottom-bar-item"], d),
+      l == null || l(N);
+    }, T = {
+      className: c(j["bottom-bar-item"], d),
       onClick: h,
       ref: m,
-      ...N,
+      ...y,
       ...u
     };
-    return p && (B.href = t), /* @__PURE__ */ b(e || "button", { ...B, children: [
-      r && /* @__PURE__ */ s("span", { className: P["bottom-bar-item-icon"], children: r }),
-      i && /* @__PURE__ */ s("span", { className: P["bottom-bar-item-text"], children: i })
+    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 })
     ] });
   }
 );
-_e.displayName = "BottomBar.Item";
-const sa = Object.assign(ke, {
-  Item: _e
-}), Ee = n(({ className: e, children: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: c(w["app-layout"], e), children: t }));
-Ee.displayName = "AppLayout";
-const Ve = n(({ centered: e, className: t, children: a }, o) => {
-  const r = v({
+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__ */ s("div", { ref: o, className: c(w["app-layout-body"], t), ...r, children: a });
+  return /* @__PURE__ */ o("div", { ref: s, className: c(x["app-layout-body"], t), ...r, children: a });
 });
-Ve.displayName = "AppLayout.Body";
-const We = n(({ className: e, children: t }, a) => /* @__PURE__ */ s("header", { ref: a, className: c(w["app-layout-header"], e), children: t }));
-We.displayName = "AppLayout.Header";
-const Xe = n(({ className: e, children: t }, a) => /* @__PURE__ */ s("main", { ref: a, className: c(w["app-layout-main"], e), children: t }));
-Xe.displayName = "AppLayout.Main";
-const qe = n(({ className: e, children: t }, a) => /* @__PURE__ */ s("aside", { ref: a, className: c(w["app-layout-side-left"], e), children: t }));
-qe.displayName = "AppLayout.SideLeft";
-const Je = n(({ className: e, children: t }, a) => /* @__PURE__ */ s("aside", { ref: a, className: c(w["app-layout-side-right"], e), children: t }));
-Je.displayName = "AppLayout.SideRight";
-const Ke = n(({ className: e, children: t }, a) => /* @__PURE__ */ s("footer", { ref: a, className: c(w["app-layout-footer"], e), children: t }));
-Ke.displayName = "AppLayout.Footer";
-const oa = Object.assign(Ee, {
-  Body: Ve,
-  Footer: Ke,
-  Header: We,
-  Main: Xe,
-  SideLeft: qe,
-  SideRight: Je
+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 zt({ columns: e = "1fr", children: t, className: a, style: o, ...r }, i) {
-  return /* @__PURE__ */ s(
+function $t({ columns: e = "1fr", children: t, className: a, style: s, ...r }, i) {
+  return /* @__PURE__ */ o(
     "form",
     {
       ref: i,
-      className: c(_["form-group"], a),
+      className: c(V["form-group"], a),
       style: {
         "--_columns": e,
-        ...o
+        ...s
       },
       ...r,
       children: t
     }
   );
 }
-const Qe = n(zt);
-Qe.displayName = "FormGroup";
-const Ue = n(
-  ({ area: e, children: t, className: a, style: o, ...r }, i) => /* @__PURE__ */ s(
+const Ye = n($t);
+Ye.displayName = "FormGroup";
+const Ze = n(
+  ({ area: e, children: t, className: a, style: s, ...r }, i) => /* @__PURE__ */ o(
     "div",
     {
       ref: i,
-      className: c(_.field, a),
+      className: c(V.field, a),
       style: {
         "--_area": e,
-        ...o
+        ...s
       },
       ...r,
       children: t
     }
   )
 );
-Ue.displayName = "FormGroup.Field";
-const Ye = n(({ className: e, ...t }, a) => /* @__PURE__ */ s("hr", { ref: a, className: c(_.separator, e), ...t }));
-Ye.displayName = "FormGroup.Separator";
-const ra = Object.assign(Qe, {
-  Field: Ue,
-  Separator: Ye
+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 Ht({ direction: e = "column", children: t, className: a, ...o }, r) {
-  return /* @__PURE__ */ s("ul", { ref: r, className: c(O.features, a), "data-direction": e, ...o, 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 Ze = n(Ht);
-Ze.displayName = "Features";
-const et = n(
-  ({ icon: e, children: t, className: a, "aria-label": o, ...r }, i) => {
-    const d = `features-item-${q()}`, u = o ? A.getTooltipTriggerProps({ id: d }) : {};
-    return /* @__PURE__ */ b("li", { ref: i, "aria-label": o, className: c(O.item, a), ...u, ...r, children: [
-      e && /* @__PURE__ */ s("span", { className: O.icon, children: e }),
+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,
-      o && /* @__PURE__ */ s(A, { id: d, children: /* @__PURE__ */ s(A.Text, { children: o }) })
+      s && /* @__PURE__ */ o(R, { id: d, children: /* @__PURE__ */ o(R.Text, { children: s }) })
     ] });
   }
 );
-et.displayName = "Features.Item";
-const Pt = Object.assign(Ze, {
-  Item: et
-}), ia = Pt, tt = x(void 0), jt = () => {
-  const e = F(tt);
+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;
-}, at = n(
-  ({ open: e, onOpenChange: t, size: a, position: o, children: r, className: i, ...l }, d) => {
-    const u = v({ size: a, position: o });
-    return /* @__PURE__ */ s(tt.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ s(
-      Q,
+}, 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: d,
         isOpen: e,
         onOpenChange: t,
-        className: c(e && Nt.modal, i),
+        className: c(e && ft.modal, i),
         "data-modal": "",
         ...u,
         ...l,
-        children: /* @__PURE__ */ s("div", { className: C.content, children: r })
+        children: /* @__PURE__ */ o("div", { className: P.content, children: r })
       }
     ) });
   }
 );
-at.displayName = "Modal";
-const st = n(({ onClick: e, ...t }, a) => {
-  const { onClose: o } = jt();
-  return /* @__PURE__ */ s(
-    E,
+ot.displayName = "Modal";
+const rt = n(({ onClick: e, ...t }, a) => {
+  const { onClose: s } = Et();
+  return /* @__PURE__ */ o(
+    W,
     {
       ref: a,
       variant: "ghost",
-      as: X,
+      as: J,
       "aria-label": "Close",
       onClick: (i) => {
-        o(), e == null || e(i);
+        s(), e == null || e(i);
       },
-      className: C.closeButton,
+      className: P.closeButton,
       ...t
     }
   );
 });
-st.displayName = "Modal.CloseButton";
-const ot = n(({ action: e, children: t, className: a, ...o }, r) => /* @__PURE__ */ b("div", { ref: r, className: c(C.header, "modal-header", a), "data-modal-header": "", ...o, children: [
-  /* @__PURE__ */ s("div", { children: t }),
-  e && /* @__PURE__ */ s("div", { className: "modal-header-action", children: e })
+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 })
 ] }));
-ot.displayName = "Modal.Header";
-const rt = n(
-  ({ align: e = "end", children: t, className: a, ...o }, r) => /* @__PURE__ */ s(
+it.displayName = "Modal.Header";
+const lt = n(
+  ({ align: e = "end", children: t, className: a, ...s }, r) => /* @__PURE__ */ o(
     "div",
     {
       ref: r,
-      className: c(C.footer, "modal-footer", a),
+      className: c(P.footer, "modal-footer", a),
       "data-modal-footer": "",
       "data-align": e,
-      ...o,
+      ...s,
       children: t
     }
   )
 );
-rt.displayName = "Modal.Footer";
-const la = Object.assign(at, {
-  Body: Y,
-  CloseButton: st,
-  Footer: rt,
-  Header: ot,
-  Title: U
-}), it = x(void 0), Dt = () => {
-  const e = F(it);
+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;
-}, lt = n(
-  ({ open: e, onOpenChange: t, children: a, className: o, ...r }, i) => /* @__PURE__ */ s(it.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ s(
-    Q,
+}, 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: i,
       isOpen: e,
       onOpenChange: t,
-      className: c(yt.bottomSheet, o),
+      className: c(gt.bottomSheet, s),
       ...r,
-      children: /* @__PURE__ */ s("div", { className: C.content, children: a })
+      children: /* @__PURE__ */ o("div", { className: P.content, children: a })
     }
   ) })
 );
-lt.displayName = "BottomSheet";
-const nt = n(
+ct.displayName = "BottomSheet";
+const dt = n(
   ({ onClick: e, ...t }, a) => {
-    const { onClose: o } = Dt();
-    return /* @__PURE__ */ s(
-      E,
+    const { onClose: s } = Vt();
+    return /* @__PURE__ */ o(
+      W,
       {
-        as: X,
+        as: J,
         ref: a,
         variant: "ghost",
         "aria-label": "Close",
         onClick: (i) => {
-          o(), e == null || e(i);
+          s(), e == null || e(i);
         },
-        className: C.closeButton,
+        className: P.closeButton,
         ...t
       }
     );
   }
 );
-nt.displayName = "BottomSheet.CloseButton";
-const na = Object.assign(lt, {
-  Body: Y,
-  CloseButton: nt,
-  Footer: gt,
-  Header: ft,
-  Title: U
+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 {
-  Qt as Accordion,
-  oa as AppLayout,
-  Yt as AttributeList,
-  Bt as AvatarGroup,
-  Lt as BadgeGroup,
-  sa as BottomBar,
-  na as BottomSheet,
-  Gt as ButtonGroup,
-  Zt as Card,
-  Q as Dialog,
-  ma as Drawer,
-  ia as Features,
-  ra as FormGroup,
-  j as Menu,
-  la as Modal,
-  It as NoResults,
-  aa as Sidebar,
-  ea as Table,
-  Ut as Tabs,
-  ta as TopBar
+  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,
+  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
 };