@versaur/react 1.0.18 → 1.0.20

package/dist/blocks.js

@@ -1,33 +1,34 @@
 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 { accordionStyles as L, avatarGroupStyles as Nt, tabsStyles as G, noResultsStyles as I, attributeListStyles as yt, badgeGroupStyles as ht, cardStyles as $, menuStyles as C, tableStyles as B, buttonGroupStyles as ft, topBarStyles as w, sidebarStyles as g, bottomBarStyles as j, appLayoutStyles as x, formGroupStyles as E, featuresStyles as _, modalStyles as vt, bottomSheetStyles as gt, pageContentStyles as Tt, 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 { createContext as F, forwardRef as n, useRef as M, useState as z, useEffect as X, useContext as H, useLayoutEffect as St, useId as K } from "react";
+import { u as v, I as Q, B as V } 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-60d7mYVa.js";
+import { e as U, d as R, c as Bt, H as At, T as Rt } from "./tooltip-60d7mYVa.js";
+import { u as wt } from "./use-resize-observer-DLkpn8HX.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 { D as Ta } 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";
+import { O as Z, b as ee, c as xt, a as It } from "./overlay-parts-BtD-Qj_k.js";
 const te = F(void 0);
-function xt() {
+function Lt() {
   const e = H(te);
   if (!e)
     throw new Error("Accordion.Summary must be used within an Accordion component");
   return e;
 }
-function It({ summary: e, open: t, onOpenChange: a, children: s, className: r, ...i }, l) {
-  const [d, u] = M(t ?? !1), m = G(null);
-  E(() => {
+function Ft({ summary: e, open: t, onOpenChange: a, children: s, className: r, ...i }, l) {
+  const [d, u] = z(t ?? !1), m = M(null);
+  X(() => {
     t !== void 0 && u(t);
-  }, [t]), E(() => {
+  }, [t]), X(() => {
     m.current && (m.current.open = d);
   }, [d]);
   const p = () => {
     const h = !d;
     u(h), a == null || a(h);
-  }, y = f({ open: d ? "" : void 0 });
+  }, y = v({ open: d ? "" : void 0 });
   return /* @__PURE__ */ o(te.Provider, { value: { isOpen: d, toggle: p }, children: /* @__PURE__ */ b(
     "details",
     {
@@ -43,11 +44,11 @@ function It({ summary: e, open: t, onOpenChange: a, children: s, className: r, .
     }
   ) });
 }
-const ae = n(It);
+const ae = n(Ft);
 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) => {
+    const { isOpen: l, toggle: d } = Lt(), u = M(null), m = (p) => {
       p.preventDefault(), !(u.current && u.current.contains(p.target)) && d();
     };
     return /* @__PURE__ */ b(
@@ -69,9 +70,9 @@ const se = n(
   }
 );
 se.displayName = "Accordion.Summary";
-const aa = Object.assign(ae, {
+const ra = Object.assign(ae, {
   Summary: se
-}), Lt = n(
+}), Ht = n(
   ({
     direction: e = "horizontal",
     size: t = "md",
@@ -82,7 +83,7 @@ const aa = Object.assign(ae, {
     className: l,
     ...d
   }, u) => {
-    const m = f({ align: a, direction: e, size: t, wrap: s });
+    const m = v({ align: a, direction: e, size: t, wrap: s });
     return /* @__PURE__ */ o(
       "div",
       {
@@ -97,48 +98,38 @@ const aa = Object.assign(ae, {
     );
   }
 );
-Lt.displayName = "AvatarGroup";
-function Ft(e, t) {
-  E(() => {
-    if (!e.current)
-      return;
-    const a = new ResizeObserver(t);
-    return a.observe(e.current), () => {
-      a.disconnect();
-    };
-  }, [e, t]);
-}
+Ht.displayName = "AvatarGroup";
 const oe = F(void 0);
-function Ht() {
+function Pt() {
   const e = H(oe);
   if (!e)
     throw new Error("Tabs.Item must be used within a Tabs component");
   return e;
 }
 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)
+  const i = M(null), l = M(/* @__PURE__ */ new Map()), [d, u] = z(0), [m, p] = z(0), y = () => {
+    const f = l.current.get(e);
+    if (!f || !i.current)
       return;
-    const N = i.current.getBoundingClientRect(), S = v.getBoundingClientRect(), $ = S.left - N.left + i.current.scrollLeft, { width: bt } = S;
-    u($), p(bt), v.scrollIntoView({
+    const N = i.current.getBoundingClientRect(), S = f.getBoundingClientRect(), O = S.left - N.left + i.current.scrollLeft, { width: bt } = S;
+    u(O), p(bt), f.scrollIntoView({
       behavior: "smooth",
       block: "nearest",
       inline: "center"
     });
-  }, h = (v, N) => {
-    N && l.current.set(v, N);
+  }, h = (f, N) => {
+    N && l.current.set(f, N);
   };
-  Tt(() => {
+  St(() => {
     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 }),
+  }, [e]), wt(i, y);
+  const T = v({});
+  return /* @__PURE__ */ o(oe.Provider, { value: { activeValue: e, onChange: t, registerTrigger: h }, children: /* @__PURE__ */ b("nav", { ref: U(r, i), className: c(G.tabs, s), ...T, children: [
+    /* @__PURE__ */ o("ul", { className: G.tablist, role: "tablist", children: a }),
     /* @__PURE__ */ o(
       "div",
       {
-        className: z["tabs-thumb"],
+        className: G["tabs-thumb"],
         style: {
           left: `${d}px`,
           width: `${m}px`
@@ -150,20 +141,20 @@ const re = n(({ value: e, onChange: t, children: a, className: s }, r) => {
 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;
+    const { activeValue: d, onChange: u, registerTrigger: m } = Pt(), p = d === e;
     let y;
     t ? y = "disabled" : p ? y = "active" : y = "default";
-    const h = !!a, T = !!s, v = !!r;
+    const h = !!a, T = !!s, f = !!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");
+    h && T && f ? N = "both-text" : h && f ? N = "left-text" : T && f ? N = "right-text" : h && T ? N = "both" : h ? N = "left" : T && (N = "right");
     const S = () => {
       t || u(e);
     };
-    return /* @__PURE__ */ o("li", { className: z.tabitem, children: /* @__PURE__ */ b(
+    return /* @__PURE__ */ o("li", { className: G.tabitem, children: /* @__PURE__ */ b(
       "button",
       {
-        ref: U(l, ($) => m(e, $)),
-        className: c(z.trigger, i),
+        ref: U(l, (O) => m(e, O)),
+        className: c(G.trigger, i),
         role: "tab",
         id: `tabs-trigger-${e}`,
         "aria-selected": p,
@@ -182,17 +173,17 @@ const ie = n(
   }
 );
 ie.displayName = "Tabs.Item";
-function Pt(e) {
+function Ct(e) {
   return {
     "aria-labelledby": `tabs-trigger-${e}`,
     id: `tabs-panel-${e}`,
     role: "tabpanel"
   };
 }
-const sa = Object.assign(re, {
+const ia = Object.assign(re, {
   Item: ie,
-  getPanelAttribute: Pt
-}), Ct = n(
+  getPanelAttribute: Ct
+}), Gt = n(
   ({ icon: e, title: t, subtitle: a, action: s, className: r, ...i }, l) => /* @__PURE__ */ b(
     "section",
     {
@@ -212,10 +203,10 @@ const sa = Object.assign(re, {
     }
   )
 );
-Ct.displayName = "NoResults";
+Gt.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({
+    const u = v({
       layout: e
     });
     return /* @__PURE__ */ o(
@@ -255,9 +246,9 @@ const ne = n(
   )
 );
 ne.displayName = "AttributeList.Item";
-const oa = Object.assign(le, {
+const la = Object.assign(le, {
   Item: ne
-}), zt = n(
+}), Mt = n(
   ({
     gap: e = "md",
     direction: t = "horizontal",
@@ -268,7 +259,7 @@ const oa = Object.assign(le, {
     className: l,
     ...d
   }, u) => {
-    const m = f({
+    const m = v({
       align: a,
       direction: t,
       gap: e,
@@ -288,41 +279,41 @@ const oa = Object.assign(le, {
     );
   }
 );
-zt.displayName = "BadgeGroup";
-function Gt({ as: e = "div", size: t = "md", border: a, children: s, className: r, ...i }, l) {
-  const d = f({
+Mt.displayName = "BadgeGroup";
+function zt({ as: e = "div", size: t = "md", border: a, children: s, className: r, ...i }, l) {
+  const d = v({
     border: a,
     interactive: e === "button" ? "true" : "false",
     size: t
   });
-  return /* @__PURE__ */ o(e === "button" ? "button" : "div", { ref: l, className: c(O.card, r), ...d, ...i, children: s });
+  return /* @__PURE__ */ o(e === "button" ? "button" : "div", { ref: l, className: c($.card, r), ...d, ...i, children: s });
 }
 const ce = n(
-  Gt
+  zt
 );
 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 });
+    const l = v({ gap: t, justify: e });
+    return /* @__PURE__ */ o("div", { ref: i, className: c($.header, s), ...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 });
+    const l = v({ align: e, gap: t });
+    return /* @__PURE__ */ o("div", { ref: i, className: c($.body, s), ...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 });
+    const l = v({ gap: t, justify: e });
+    return /* @__PURE__ */ o("div", { ref: i, className: c($.footer, s), ...l, ...r, children: a });
   }
 );
 ue.displayName = "Card.Footer";
-const ra = Object.assign(ce, {
+const na = Object.assign(ce, {
   Body: me,
   Footer: ue,
   Header: de
@@ -359,20 +350,20 @@ const ra = Object.assign(ce, {
   }
 );
 be.displayName = "Menu";
-function Mt(e) {
+function jt(e) {
   return R.getTooltipTriggerProps({
     id: e.id
   });
 }
-function jt(e) {
+function Dt(e) {
   R.close(e);
 }
-const X = be;
-X.getTriggerProps = Mt;
-X.close = jt;
+const W = be;
+W.getTriggerProps = jt;
+W.close = Dt;
 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({
+    const m = H(pe), p = m != null && m.onChange && e !== void 0 ? m.value === e : !1, y = v({
       active: p,
       disabled: t
     }), h = (T) => {
@@ -401,7 +392,7 @@ const Ne = n(
   }
 );
 Ne.displayName = "Menu.Item";
-const D = X;
+const D = W;
 D.Item = Ne;
 const ye = F(void 0);
 function he() {
@@ -410,7 +401,7 @@ function he() {
     throw new Error("useTableProvider must be used within a Table component");
   return e;
 }
-const ve = n(
+const fe = 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: [
@@ -419,9 +410,9 @@ const ve = n(
     ] });
   }
 );
-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";
+fe.displayName = "Table.Toolbar";
+const ve = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(B.header, e), ...t }));
+ve.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 }));
@@ -430,7 +421,7 @@ const Se = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, c
 Se.displayName = "Table.Row";
 const Be = n(
   ({ as: e = "div", area: t, variant: a, className: s, style: r, ...i }, l) => {
-    const d = f({
+    const d = v({
       variant: a
     });
     return /* @__PURE__ */ o(
@@ -488,7 +479,7 @@ 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,
+      V,
       {
         ...r,
         as: e,
@@ -506,22 +497,22 @@ const xe = n(({ icon: e, children: t }, a) => {
 });
 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 [d, u] = z(/* @__PURE__ */ new Set()), m = M(/* @__PURE__ */ new Set()), p = (f, N) => {
     const S = new Set(d);
-    N ? S.add(v) : S.delete(v), u(S), r == null || r({
+    N ? S.add(f) : S.delete(f), u(S), r == null || r({
       selected: S,
       allSelected: S.size === m.current.size && m.current.size > 0,
       someSelected: S.size > 0
     });
-  }, y = (v, N) => {
-    const S = N ? new Set(v) : /* @__PURE__ */ new Set();
+  }, y = (f, N) => {
+    const S = N ? new Set(f) : /* @__PURE__ */ new Set();
     u(S), r == null || r({
       selected: S,
       allSelected: N,
       someSelected: N
     });
-  }, h = (v) => {
-    m.current.add(v);
+  }, h = (f) => {
+    m.current.add(f);
   }, T = {
     selectedRows: d,
     allRowIds: m.current,
@@ -544,9 +535,9 @@ const Ie = n(({ columns: e, children: t, className: a, style: s, onSelectionChan
   ) });
 });
 Ie.displayName = "Table";
-const ia = Object.assign(Ie, {
-  Toolbar: ve,
-  Header: fe,
+const ca = Object.assign(Ie, {
+  Toolbar: fe,
+  Header: ve,
   Body: ge,
   Footer: Te,
   Row: Se,
@@ -555,7 +546,7 @@ const ia = Object.assign(Ie, {
   DoubleLine: Re,
   Action: xe,
   ActionItem: we
-}), Dt = n(
+}), $t = n(
   ({
     gap: e = "md",
     direction: t = "horizontal",
@@ -567,7 +558,7 @@ const ia = Object.assign(Ie, {
     className: d,
     ...u
   }, m) => {
-    const p = f({
+    const p = v({
       align: a,
       direction: t,
       fluid: r,
@@ -578,7 +569,7 @@ const ia = Object.assign(Ie, {
       "div",
       {
         ref: m,
-        className: c(vt["button-group"], d),
+        className: c(ft["button-group"], d),
         role: "group",
         "aria-label": i,
         ...p,
@@ -588,7 +579,7 @@ const ia = Object.assign(Ie, {
     );
   }
 );
-Dt.displayName = "ButtonGroup";
+$t.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 }));
@@ -614,25 +605,25 @@ const Ce = n(
   )
 );
 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, {
+const Ge = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: c(w["top-bar-list-item"], t), ...a, children: e }));
+Ge.displayName = "TopBar.ListItem";
+const da = Object.assign(Le, {
   Centred: He,
   Item: Ce,
   Leading: Fe,
-  ListItem: ze,
+  ListItem: Ge,
   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";
+}), Me = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("aside", { ref: a, className: c(g.sidebar, t), children: e }));
+Me.displayName = "Sidebar";
+const ze = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(g["sidebar-header"], t), children: e }));
+ze.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(
+const $e = 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 [u, m] = z(a), p = s !== void 0 ? s : u, y = () => {
       const h = !p;
       m(h), r == null || r(h);
     };
@@ -654,8 +645,8 @@ const Oe = n(
     );
   }
 );
-Oe.displayName = "Sidebar.Group";
-const $e = n(
+$e.displayName = "Sidebar.Group";
+const Oe = n(
   ({ as: e = "button", active: t, disabled: a, icon: s, action: r, className: i, children: l, ...d }, u) => /* @__PURE__ */ b(
     e,
     {
@@ -673,18 +664,18 @@ const $e = n(
     }
   )
 );
-$e.displayName = "Sidebar.Item";
+Oe.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, {}) }));
+const _e = n(({ className: e }, t) => /* @__PURE__ */ o("div", { ref: t, className: c(g["sidebar-divider"], e), children: /* @__PURE__ */ o(Bt, {}) }));
 _e.displayName = "Sidebar.Divider";
-const na = Object.assign(Ge, {
+const ma = Object.assign(Me, {
   Body: je,
   Divider: _e,
   Footer: De,
-  Group: Oe,
-  Header: Me,
-  Item: $e,
+  Group: $e,
+  Header: ze,
+  Item: Oe,
   ItemList: ke
 });
 function Ot(e, t) {
@@ -694,7 +685,7 @@ const Ee = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("nav"
 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({
+    const p = Ot(e, "a"), y = v({
       active: a,
       disabled: s
     }), h = (N) => {
@@ -717,12 +708,12 @@ const Ve = n(
   }
 );
 Ve.displayName = "BottomBar.Item";
-const ca = Object.assign(Ee, {
+const ua = 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({
+  const r = v({
     centered: e
   });
   return /* @__PURE__ */ o("div", { ref: s, className: c(x["app-layout-body"], t), ...r, children: a });
@@ -738,7 +729,7 @@ const Qe = n(({ className: e, children: t }, a) => /* @__PURE__ */ o("aside", {
 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, {
+const pa = Object.assign(We, {
   Body: Xe,
   Footer: Ue,
   Header: qe,
@@ -746,12 +737,12 @@ const da = Object.assign(We, {
   SideLeft: Ke,
   SideRight: Qe
 });
-function $t({ columns: e = "1fr", children: t, className: a, style: s, ...r }, i) {
+function kt({ columns: e = "1fr", children: t, className: a, style: s, ...r }, i) {
   return /* @__PURE__ */ o(
     "form",
     {
       ref: i,
-      className: c(V["form-group"], a),
+      className: c(E["form-group"], a),
       style: {
         "--_columns": e,
         ...s
@@ -761,14 +752,14 @@ function $t({ columns: e = "1fr", children: t, className: a, style: s, ...r }, i
     }
   );
 }
-const Ye = n($t);
+const Ye = n(kt);
 Ye.displayName = "FormGroup";
 const Ze = n(
   ({ area: e, children: t, className: a, style: s, ...r }, i) => /* @__PURE__ */ o(
     "div",
     {
       ref: i,
-      className: c(V.field, a),
+      className: c(E.field, a),
       style: {
         "--_area": e,
         ...s
@@ -779,16 +770,16 @@ const Ze = n(
   )
 );
 Ze.displayName = "FormGroup.Field";
-const et = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("hr", { ref: a, className: c(V.separator, e), ...t }));
+const et = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("hr", { ref: a, className: c(E.separator, e), ...t }));
 et.displayName = "FormGroup.Separator";
-const ma = Object.assign(Ye, {
+const ba = Object.assign(Ye, {
   Field: Ze,
   Separator: et
 });
-function kt({ direction: e = "column", children: t, className: a, ...s }, r) {
+function _t({ 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 tt = n(kt);
+const tt = n(_t);
 tt.displayName = "Features";
 const at = n(
   ({ icon: e, children: t, className: a, "aria-label": s, ...r }, i) => {
@@ -801,23 +792,23 @@ const at = n(
   }
 );
 at.displayName = "Features.Item";
-const _t = Object.assign(tt, {
+const Et = Object.assign(tt, {
   Item: at
-}), ua = _t, st = F(void 0), Et = () => {
+}), Na = Et, st = F(void 0), Vt = () => {
   const e = H(st);
   if (!e)
     throw new Error("Modal subcomponents must be used within Modal");
   return e;
 }, ot = n(
   ({ open: e, onOpenChange: t, size: a, position: s, children: r, className: i, ...l }, d) => {
-    const u = f({ size: a, position: s });
+    const u = v({ 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 && ft.modal, i),
+        className: c(e && vt.modal, i),
         "data-modal": "",
         ...u,
         ...l,
@@ -828,9 +819,9 @@ const _t = Object.assign(tt, {
 );
 ot.displayName = "Modal";
 const rt = n(({ onClick: e, ...t }, a) => {
-  const { onClose: s } = Et();
+  const { onClose: s } = Vt();
   return /* @__PURE__ */ o(
-    W,
+    V,
     {
       ref: a,
       variant: "ghost",
@@ -864,13 +855,13 @@ const lt = n(
   )
 );
 lt.displayName = "Modal.Footer";
-const pa = Object.assign(ot, {
+const ya = Object.assign(ot, {
   Body: ee,
   CloseButton: rt,
   Footer: lt,
   Header: it,
   Title: Z
-}), nt = F(void 0), Vt = () => {
+}), nt = F(void 0), Wt = () => {
   const e = H(nt);
   if (!e)
     throw new Error("BottomSheet subcomponents must be used within BottomSheet");
@@ -891,9 +882,9 @@ const pa = Object.assign(ot, {
 ct.displayName = "BottomSheet";
 const dt = n(
   ({ onClick: e, ...t }, a) => {
-    const { onClose: s } = Vt();
+    const { onClose: s } = Wt();
     return /* @__PURE__ */ o(
-      W,
+      V,
       {
         as: J,
         ref: a,
@@ -909,13 +900,17 @@ const dt = n(
   }
 );
 dt.displayName = "BottomSheet.CloseButton";
-const ba = Object.assign(ct, {
+const ha = Object.assign(ct, {
   Body: ee,
   CloseButton: dt,
-  Footer: wt,
-  Header: Rt,
+  Footer: It,
+  Header: xt,
   Title: Z
-}), mt = n(
+}), Xt = n(
+  ({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: c(Tt.content, t), ...a, children: e })
+);
+Xt.displayName = "PageContent";
+const 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,
@@ -925,12 +920,12 @@ const ba = Object.assign(ct, {
 mt.displayName = "PageHeader";
 const ut = n(
   ({ action: e, additionalInfo: t, className: a, children: s, ...r }, i) => {
-    const l = f({
+    const l = v({
       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 }) }),
+      /* @__PURE__ */ o("div", { className: A["title-inner"], children: /* @__PURE__ */ o(At, { 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 })
@@ -941,35 +936,36 @@ const ut = n(
 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 }),
+    /* @__PURE__ */ o(Rt, { 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, {
+const fa = Object.assign(mt, {
   Title: ut,
   Subtitle: pt
 });
 export {
-  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,
+  ra as Accordion,
+  pa as AppLayout,
+  la as AttributeList,
+  Ht as AvatarGroup,
+  Mt as BadgeGroup,
+  ua as BottomBar,
+  ha as BottomSheet,
+  $t as ButtonGroup,
+  na as Card,
   Y as Dialog,
-  va as Drawer,
-  ua as Features,
-  ma as FormGroup,
+  Ta as Drawer,
+  Na as Features,
+  ba 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
+  ya as Modal,
+  Gt as NoResults,
+  Xt as PageContent,
+  fa as PageHeader,
+  ma as Sidebar,
+  ca as Table,
+  ia as Tabs,
+  da as TopBar
 };