@versaur/react 1.0.9 → 1.0.11

package/dist/blocks.js

@@ -1,103 +1,103 @@
-import { jsxs as N, jsx as s, Fragment as Q } from "react/jsx-runtime";
-import { accordionStyles as R, avatarGroupStyles as mt, tabsStyles as D, noResultsStyles as x, attributeListStyles as ut, badgeGroupStyles as pt, cardStyles as z, tableStyles as L, buttonGroupStyles as bt, menuStyles as H, topBarStyles as w, navStyles as F, sidebarStyles as h, bottomBarStyles as P, appLayoutStyles as I, drawerStyles as Nt, modalStyles as yt, bottomSheetStyles as vt } from "@versaur/core/blocks";
-import { ChevronDownIcon as E, ChevronUpIcon as ht, MenuIcon as ft, XIcon as W } from "@versaur/icons";
-import gt, { createContext as A, forwardRef as n, useRef as C, useState as $, useEffect as j, useContext as S, useLayoutEffect as Bt, useCallback as Tt } from "react";
-import { u as y } from "./use-data-attrs-iPFyfiKN.js";
+import { jsxs as y, jsx as o, Fragment as Tt } from "react/jsx-runtime";
+import { accordionStyles as D, avatarGroupStyles as St, tabsStyles as G, noResultsStyles as F, attributeListStyles as wt, badgeGroupStyles as Bt, cardStyles as C, menuStyles as H, tableStyles as B, buttonGroupStyles as At, topBarStyles as L, navStyles as j, sidebarStyles as T, bottomBarStyles as $, appLayoutStyles as x, formGroupStyles as X, featuresStyles as W, drawerStyles as Rt, modalStyles as It, bottomSheetStyles as Lt } from "@versaur/core/blocks";
+import { 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 Y, I as G, B as k, T as V, H as At } from "./tooltip-M8EGI3lZ.js";
-import { checkboxStyles as _ } from "@versaur/core/forms";
-import { overlayPartsStyles as f } from "@versaur/core/utils";
-import { c as U, a as Z, O as X, b as St } from "./overlay-parts-Zq9CuT31.js";
-const O = A(void 0);
-function wt() {
-  const e = S(O);
+import { c as ee, I as E, T as I, B as V, H as Mt } from "./tooltip-Zuq8gd0f.js";
+import { checkboxStyles as k } from "@versaur/core/forms";
+import { overlayPartsStyles as w } 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);
   if (!e)
     throw new Error("Accordion.Summary must be used within an Accordion component");
   return e;
 }
-function Lt({ summary: e, open: t, onOpenChange: a, children: o, className: r, ...i }, c) {
-  const [m, u] = $(t ?? !1), l = C(null);
-  j(() => {
+function Pt({ summary: e, open: t, onOpenChange: a, children: s, className: r, ...l }, i) {
+  const [m, u] = P(t ?? !1), c = M(null);
+  z(() => {
     t !== void 0 && u(t);
-  }, [t]), j(() => {
-    l.current && (l.current.open = m);
+  }, [t]), z(() => {
+    c.current && (c.current.open = m);
   }, [m]);
   const p = () => {
     const b = !m;
     u(b), a == null || a(b);
-  }, v = y({ open: m ? "" : void 0 });
-  return /* @__PURE__ */ s(O.Provider, { value: { isOpen: m, toggle: p }, children: /* @__PURE__ */ N(
+  }, N = v({ open: m ? "" : void 0 });
+  return /* @__PURE__ */ o(ae.Provider, { value: { isOpen: m, toggle: p }, children: /* @__PURE__ */ y(
     "details",
     {
-      ref: c || l,
-      className: d(R.item, r),
+      ref: i || c,
+      className: d(D.item, r),
       open: m,
-      ...v,
-      ...i,
+      ...N,
+      ...l,
       children: [
         e,
-        /* @__PURE__ */ s("div", { className: R.content, children: o })
+        /* @__PURE__ */ o("div", { className: D.content, children: s })
       ]
     }
   ) });
 }
-const ee = n(Lt);
-ee.displayName = "Accordion";
-const te = n(
-  ({ children: e, right: t, clamp: a = 2, className: o, ...r }, i) => {
-    const { isOpen: c, toggle: m } = wt(), u = C(null), l = (p) => {
+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();
     };
-    return /* @__PURE__ */ N(
+    return /* @__PURE__ */ y(
       "summary",
       {
-        ref: i,
-        className: d(R.trigger, o),
-        onClick: l,
+        ref: l,
+        className: d(D.trigger, s),
+        onClick: c,
         role: "button",
-        "aria-expanded": c,
+        "aria-expanded": i,
         ...r,
         children: [
-          /* @__PURE__ */ s("span", { className: R.label, style: { "--_clamp": a }, children: e }),
-          t && /* @__PURE__ */ s("span", { ref: u, className: R.right, children: t }),
-          /* @__PURE__ */ s("span", { className: R.chevron, children: /* @__PURE__ */ s(E, { width: 20, height: 20 }) })
+          /* @__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 }) })
         ]
       }
     );
   }
 );
-te.displayName = "Accordion.Summary";
-const Ot = Object.assign(ee, {
-  Summary: te
-}), It = n(
+oe.displayName = "Accordion.Summary";
+const na = Object.assign(se, {
+  Summary: oe
+}), zt = n(
   ({
     direction: e = "horizontal",
     size: t = "md",
     align: a = "center",
-    wrap: o = "nowrap",
+    wrap: s = "nowrap",
     "aria-label": r = "Avatar group",
-    children: i,
-    className: c,
+    children: l,
+    className: i,
     ...m
   }, u) => {
-    const l = y({ align: a, direction: e, size: t, wrap: o });
-    return /* @__PURE__ */ s(
+    const c = v({ align: a, direction: e, size: t, wrap: s });
+    return /* @__PURE__ */ o(
       "div",
       {
         ref: u,
-        className: d(mt["avatar-group"], c),
+        className: d(St["avatar-group"], i),
         role: "group",
         "aria-label": r,
-        ...l,
+        ...c,
         ...m,
-        children: i
+        children: l
       }
     );
   }
 );
-It.displayName = "AvatarGroup";
-function xt(e, t) {
-  j(() => {
+zt.displayName = "AvatarGroup";
+function jt(e, t) {
+  z(() => {
     if (!e.current)
       return;
     const a = new ResizeObserver(t);
@@ -106,64 +106,64 @@ function xt(e, t) {
     };
   }, [e, t]);
 }
-const ae = A(void 0);
-function Rt() {
-  const e = S(ae);
+const re = A(void 0);
+function $t() {
+  const e = R(re);
   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 = C(null), c = C(/* @__PURE__ */ new Map()), [m, u] = $(0), [l, p] = $(0), v = () => {
-    const T = c.current.get(e);
-    if (!T || !i.current)
+const le = n(({ value: e, onChange: t, children: a, className: s }, r) => {
+  const l = M(null), i = M(/* @__PURE__ */ new Map()), [m, u] = P(0), [c, p] = P(0), N = () => {
+    const f = i.current.get(e);
+    if (!f || !l.current)
       return;
-    const B = i.current.getBoundingClientRect(), M = T.getBoundingClientRect(), ct = M.left - B.left + i.current.scrollLeft, { width: dt } = M;
-    u(ct), p(dt), T.scrollIntoView({
+    const h = l.current.getBoundingClientRect(), g = f.getBoundingClientRect(), ht = g.left - h.left + l.current.scrollLeft, { width: gt } = g;
+    u(ht), p(gt), f.scrollIntoView({
       behavior: "smooth",
       block: "nearest",
       inline: "center"
     });
-  }, b = (T, B) => {
-    B && c.current.set(T, B);
+  }, b = (f, h) => {
+    h && i.current.set(f, h);
   };
-  Bt(() => {
-    v();
-  }, [e]), xt(i, v);
-  const g = y({});
-  return /* @__PURE__ */ s(ae.Provider, { value: { activeValue: e, onChange: t, registerTrigger: b }, children: /* @__PURE__ */ N("nav", { ref: Y(r, i), className: d(D.tabs, o), ...g, children: [
-    /* @__PURE__ */ s("ul", { className: D.tablist, role: "tablist", children: a }),
-    /* @__PURE__ */ s(
+  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 }),
+    /* @__PURE__ */ o(
       "div",
       {
-        className: D["tabs-thumb"],
+        className: G["tabs-thumb"],
         style: {
           left: `${m}px`,
-          width: `${l}px`
+          width: `${c}px`
         }
       }
     )
   ] }) });
 });
-se.displayName = "Tabs";
-const oe = n(
-  ({ value: e, disabled: t = !1, children: a, className: o }, r) => {
-    const { activeValue: i, onChange: c, registerTrigger: m } = Rt(), u = i === e;
-    let l;
-    t ? l = "disabled" : u ? l = "active" : l = "default";
+le.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 || c(e);
+      t || i(e);
     };
-    return /* @__PURE__ */ s("li", { className: D.tabitem, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ o("li", { className: G.tabitem, children: /* @__PURE__ */ o(
       "button",
       {
-        ref: Y(r, (v) => m(e, v)),
-        className: d(D.trigger, o),
+        ref: ee(r, (N) => m(e, N)),
+        className: d(G.trigger, s),
         role: "tab",
         id: `tabs-trigger-${e}`,
         "aria-selected": u,
         "aria-controls": `tabs-panel-${e}`,
-        "data-state": l,
+        "data-state": c,
         disabled: t,
         onClick: p,
         children: a
@@ -171,895 +171,976 @@ const oe = n(
     ) });
   }
 );
-oe.displayName = "Tabs.Item";
-function Mt(e) {
+ie.displayName = "Tabs.Item";
+function Et(e) {
   return {
     "aria-labelledby": `tabs-trigger-${e}`,
     id: `tabs-panel-${e}`,
     role: "tabpanel"
   };
 }
-const ea = Object.assign(se, {
-  Item: oe,
-  getPanelAttribute: Mt
-}), Ht = n(
-  ({ icon: e, title: t, subtitle: a, action: o, className: r, ...i }, c) => /* @__PURE__ */ N(
+const da = Object.assign(le, {
+  Item: ie,
+  getPanelAttribute: Et
+}), _t = n(
+  ({ icon: e, title: t, subtitle: a, action: s, className: r, ...l }, i) => /* @__PURE__ */ y(
     "section",
     {
-      ref: c,
-      className: d(x["no-results"], r),
+      ref: i,
+      className: d(F["no-results"], r),
       role: "status",
       "aria-label": t,
-      ...i,
+      ...l,
       children: [
-        /* @__PURE__ */ N("header", { className: x["no-results-header"], children: [
-          /* @__PURE__ */ s("div", { className: x["no-results-icon"], children: /* @__PURE__ */ s(G, { as: e, color: "inherit", "aria-hidden": "true" }) }),
-          /* @__PURE__ */ s("h5", { className: x["no-results-title"], children: t })
+        /* @__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 })
         ] }),
-        a && /* @__PURE__ */ s("p", { className: x["no-results-subtitle"], children: a }),
-        o && /* @__PURE__ */ s("div", { className: x["no-results-action"], role: "group", "aria-label": "Available actions", children: o })
+        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 })
       ]
     }
   )
 );
-Ht.displayName = "NoResults";
-const re = A(void 0), Dt = () => {
-  const e = S(re);
-  if (!e)
-    throw new Error("AttributeList.Item must be used within an AttributeList component");
-  return e;
-}, ie = n(
-  ({ columns: e = "3", children: t, className: a, ...o }, r) => {
-    const i = y({
-      columns: e
+_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({
+      layout: e
     });
-    return /* @__PURE__ */ s(re.Provider, { value: { columns: e }, children: /* @__PURE__ */ s("dl", { ref: r, className: d(ut["attribute-list"], a), ...i, ...o, children: t }) });
+    return /* @__PURE__ */ o(
+      "dl",
+      {
+        ref: m,
+        className: d(wt["attribute-list"], r),
+        ...u,
+        style: {
+          "--_columns": t,
+          ...a !== void 0 && { "--_gap": typeof a == "number" ? `${a}px` : a },
+          ...l
+        },
+        ...i,
+        children: s
+      }
+    );
   }
 );
-ie.displayName = "AttributeList";
-const le = n(
-  ({ title: e, columnSpan: t = "1", contentLineClamp: a = "2", children: o, className: r }, i) => {
-    Dt();
-    const c = y({
-      "column-span": t,
-      "content-line-clamp": a
-    });
-    return /* @__PURE__ */ N("div", { ref: i, className: d(r), ...c, children: [
-      /* @__PURE__ */ s("dt", { children: e }),
-      /* @__PURE__ */ s("dd", { children: o })
-    ] });
-  }
+ce.displayName = "AttributeList";
+const ne = n(
+  ({ title: e, area: t, children: a, className: s, style: r, ...l }, i) => /* @__PURE__ */ y(
+    "div",
+    {
+      ref: i,
+      className: d(s),
+      style: {
+        "--_area": t,
+        ...r
+      },
+      ...l,
+      children: [
+        /* @__PURE__ */ o("dt", { children: e }),
+        /* @__PURE__ */ o("dd", { children: a })
+      ]
+    }
+  )
 );
-le.displayName = "AttributeList.Item";
-const ta = Object.assign(ie, {
-  Item: le
+ne.displayName = "AttributeList.Item";
+const ma = Object.assign(ce, {
+  Item: ne
 }), Ct = n(
   ({
     gap: e = "md",
     direction: t = "horizontal",
     align: a = "center",
-    wrap: o = "nowrap",
+    wrap: s = "nowrap",
     "aria-label": r = "Badge group",
-    children: i,
-    className: c,
+    children: l,
+    className: i,
     ...m
   }, u) => {
-    const l = y({
+    const c = v({
       align: a,
       direction: t,
       gap: e,
-      wrap: o
+      wrap: s
     });
-    return /* @__PURE__ */ s(
+    return /* @__PURE__ */ o(
       "div",
       {
         ref: u,
-        className: d(pt["badge-group"], c),
+        className: d(Bt["badge-group"], i),
         role: "group",
         "aria-label": r,
-        ...l,
+        ...c,
         ...m,
-        children: i
+        children: l
       }
     );
   }
 );
 Ct.displayName = "BadgeGroup";
-function jt({ as: e = "div", size: t = "md", border: a, children: o, className: r, ...i }, c) {
-  const m = y({
+function Vt({ as: e = "div", size: t = "md", border: a, children: s, className: r, ...l }, i) {
+  const m = v({
     border: a,
     interactive: e === "button" ? "true" : "false",
     size: t
   });
-  return /* @__PURE__ */ s(e === "button" ? "button" : "div", { ref: c, className: d(z.card, r), ...m, ...i, children: o });
+  return /* @__PURE__ */ o(e === "button" ? "button" : "div", { ref: i, className: d(C.card, r), ...m, ...l, children: s });
 }
-const ne = n(
-  jt
-);
-ne.displayName = "Card";
-const ce = n(
-  ({ justify: e, gap: t, children: a, className: o, ...r }, i) => {
-    const c = y({ gap: t, justify: e });
-    return /* @__PURE__ */ s("div", { ref: i, className: d(z.header, o), ...c, ...r, children: a });
-  }
-);
-ce.displayName = "Card.Header";
 const de = n(
-  ({ align: e, gap: t, children: a, className: o, ...r }, i) => {
-    const c = y({ align: e, gap: t });
-    return /* @__PURE__ */ s("div", { ref: i, className: d(z.body, o), ...c, ...r, children: a });
-  }
+  Vt
 );
-de.displayName = "Card.Body";
+de.displayName = "Card";
 const me = n(
-  ({ justify: e, gap: t, children: a, className: o, ...r }, i) => {
-    const c = y({ gap: t, justify: e });
-    return /* @__PURE__ */ s("div", { ref: i, className: d(z.footer, o), ...c, ...r, children: a });
-  }
-);
-me.displayName = "Card.Footer";
-const aa = Object.assign(ne, {
-  Body: de,
-  Footer: me,
-  Header: ce
-}), ue = n(({ className: e, ...t }, a) => /* @__PURE__ */ s("thead", { ref: a, className: d(L["table-header"], e), ...t }));
-ue.displayName = "Table.Header";
-const pe = n(({ className: e, ...t }, a) => /* @__PURE__ */ s("tbody", { ref: a, className: d(L["table-body"], e), ...t }));
-pe.displayName = "Table.Body";
-const be = n(({ className: e, ...t }, a) => /* @__PURE__ */ s("tfoot", { ref: a, className: d(L["table-footer"], e), ...t }));
-be.displayName = "Table.Footer";
-const Ne = n(({ onClick: e, className: t, ...a }, o) => /* @__PURE__ */ s("tr", { ref: o, className: d(t), "data-clickable": e ? "true" : void 0, onClick: e, ...a }));
-Ne.displayName = "Table.Row";
-const ye = n(
-  ({ sortable: e, sortDirection: t, onSort: a, children: o, className: r, ...i }, c) => {
-    const m = () => {
-      if (!e || !a)
-        return;
-      let l = "asc";
-      t === "asc" ? l = "desc" : t === "desc" && (l = null), a(l);
-    }, u = y({
-      sortable: e ? "true" : void 0
-    });
-    return /* @__PURE__ */ s(
-      "th",
-      {
-        ref: c,
-        className: d(L["table-head"], r),
-        onClick: e ? m : void 0,
-        ...u,
-        ...i,
-        children: /* @__PURE__ */ N(
-          "div",
-          {
-            style: {
-              alignItems: "center",
-              display: "flex",
-              gap: "0.5rem",
-              justifyContent: "flex-start"
-            },
-            children: [
-              o,
-              e && /* @__PURE__ */ N(Q, { children: [
-                t === "asc" && /* @__PURE__ */ s(ht, { style: { flexShrink: 0, height: "1em", width: "1em" } }),
-                t === "desc" && /* @__PURE__ */ s(E, { style: { flexShrink: 0, height: "1em", width: "1em" } }),
-                !t && /* @__PURE__ */ s(
-                  E,
-                  {
-                    style: {
-                      flexShrink: 0,
-                      height: "1em",
-                      opacity: 0.5,
-                      width: "1em"
-                    }
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      }
-    );
+  ({ 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 });
   }
 );
-ye.displayName = "Table.HeaderCell";
-const ve = n(({ variant: e, className: t, ...a }, o) => /* @__PURE__ */ s("td", { ref: o, className: d(L["table-cell"], t), "data-table-cell-variant": e, ...a }));
-ve.displayName = "Table.BodyCell";
-const he = n(
-  ({ rowId: e, checked: t, indeterminate: a, onChange: o }, r) => /* @__PURE__ */ N("label", { className: _.checkbox, children: [
-    /* @__PURE__ */ s(
-      "input",
-      {
-        ref: (i) => {
-          i && (i.indeterminate = a || !1, typeof r == "function" ? r(i) : r && (r.current = i));
-        },
-        type: "checkbox",
-        className: _.input,
-        checked: t || !1,
-        onChange: (i) => o(i.target.checked),
-        "aria-label": `Select row ${e}`
-      }
-    ),
-    /* @__PURE__ */ s("span", { className: _.indicator })
-  ] })
-);
-he.displayName = "Table.Checkbox";
-const fe = n(
-  ({ title: e, subtitle: t, size: a = "md", className: o }, r) => {
-    const i = {
-      title: {
-        sm: "0.875rem",
-        md: "0.9375rem",
-        lg: "1rem"
-      },
-      subtitle: {
-        sm: "0.75rem",
-        md: "0.8125rem",
-        lg: "0.875rem"
-      }
-    };
-    return /* @__PURE__ */ N("div", { ref: r, className: d(L["table-cell"], o), "data-table-cell-variant": "double-line", children: [
-      /* @__PURE__ */ s(
-        "div",
-        {
-          style: {
-            fontWeight: 600,
-            fontSize: i.title[a]
-          },
-          children: e
-        }
-      ),
-      /* @__PURE__ */ s(
-        "div",
-        {
-          style: {
-            fontSize: i.subtitle[a],
-            color: "#6b7280"
-          },
-          children: t
-        }
-      )
-    ] });
+me.displayName = "Card.Header";
+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 });
   }
 );
-fe.displayName = "Table.DoubleLine";
-const ge = n(({ onClick: e, disabled: t }, a) => /* @__PURE__ */ s(
-  k,
-  {
-    ref: a,
-    as: ft,
-    onClick: (r) => {
-      r.stopPropagation(), e == null || e();
-    },
-    disabled: t,
-    variant: "ghost",
-    size: "medium",
-    "aria-label": "Action button"
+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 });
   }
-));
-ge.displayName = "Table.Action";
-const Be = n(
-  ({ columns: e, children: t, className: a, ...o }, r) => /* @__PURE__ */ s(
-    "div",
-    {
-      ref: r,
-      className: d(L.table, a),
-      style: {
-        "--table-grid-columns": e
-      },
-      ...o,
-      children: /* @__PURE__ */ s("table", { children: t })
-    }
-  )
 );
-Be.displayName = "Table";
-const sa = Object.assign(Be, {
-  Action: ge,
-  Body: pe,
-  BodyCell: ve,
-  Checkbox: he,
-  DoubleLine: fe,
-  Footer: be,
-  Header: ue,
-  HeaderCell: ye,
-  Row: Ne
-}), Ft = n(
-  ({
-    gap: e = "md",
-    direction: t = "horizontal",
-    align: a = "center",
-    wrap: o = "nowrap",
-    fluid: r = !1,
-    "aria-label": i = "Button group",
-    children: c,
-    className: m,
-    ...u
-  }, l) => {
-    const p = y({
-      align: a,
-      direction: t,
-      fluid: r,
-      gap: e,
-      wrap: o
-    });
-    return /* @__PURE__ */ s(
-      "div",
-      {
-        ref: l,
-        className: d(bt["button-group"], m),
-        role: "group",
-        "aria-label": i,
-        ...p,
-        ...u,
-        children: c
-      }
-    );
-  }
-);
-Ft.displayName = "ButtonGroup";
-const Te = A(void 0), Ae = n(
+pe.displayName = "Card.Footer";
+const ua = Object.assign(de, {
+  Body: ue,
+  Footer: pe,
+  Header: me
+}), be = A(void 0), Ne = n(
   ({
     id: e,
     placement: t = "bottom",
     maxHeight: a = 400,
-    minWidth: o = 160,
+    minWidth: s = 160,
     maxWidth: r = 320,
-    gap: i = 8,
-    value: c,
+    gap: l = 8,
+    value: i,
     onChange: m,
     closeOnClick: u = !1,
-    children: l,
+    children: c,
     ...p
-  }, v) => {
+  }, N) => {
     const b = {
       id: e,
       closeOnClick: u,
       onChange: m,
-      value: c
+      value: i
     };
-    return /* @__PURE__ */ s("div", { ref: v, ...p, children: /* @__PURE__ */ s(Te.Provider, { value: b, children: /* @__PURE__ */ s(V, { id: e, placement: t, gap: i, triggerType: "focus", children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ o("div", { ref: N, ...p, children: /* @__PURE__ */ o(be.Provider, { value: b, children: /* @__PURE__ */ o(I, { id: e, placement: t, gap: l, triggerType: "focus", children: /* @__PURE__ */ o(
       "div",
       {
         className: H["menu-list"],
         style: {
           "--_max-height": `${a}px`,
           "--_max-width": `${r}px`,
-          "--_min-width": `${o}px`
+          "--_min-width": `${s}px`
         },
-        children: l
+        children: c
       }
     ) }) }) });
   }
 );
-Ae.displayName = "Menu";
-function Pt(e) {
-  return V.getTooltipTriggerProps({
-    id: e.id,
-    triggerType: "focus"
+Ne.displayName = "Menu";
+function kt(e) {
+  return I.getTooltipTriggerProps({
+    id: e.id
   });
 }
-function Et(e) {
-  V.close(e);
+function Wt(e) {
+  I.close(e);
 }
-const q = Ae;
-q.getTriggerProps = Pt;
-q.close = Et;
-const Se = n(
-  ({ value: e, disabled: t = !1, leftIcon: a, rightIcon: o, children: r, onClick: i, className: c, ...m }, u) => {
-    const l = S(Te), p = l != null && l.onChange && e !== void 0 ? l.value === e : !1, v = y({
+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({
       active: p,
       disabled: t
-    }), b = (g) => {
+    }), b = (S) => {
       if (t) {
-        g.preventDefault();
+        S.preventDefault();
         return;
       }
-      l != null && l.onChange && e !== void 0 && l.onChange(e), i == null || i(g), l != null && l.closeOnClick && (l != null && l.id) && V.close({ id: l.id });
+      c != null && c.onChange && e !== void 0 && c.onChange(e), l == null || l(S), c != null && c.closeOnClick && (c != null && c.id) && I.close({ id: c.id });
     };
-    return /* @__PURE__ */ N(
+    return /* @__PURE__ */ y(
       "button",
       {
         ref: u,
-        className: d(H["menu-item"], c),
+        className: d(H["menu-item"], i),
         disabled: t,
-        ...v,
+        ...N,
         ...m,
         onClick: b,
         children: [
-          a ? /* @__PURE__ */ s("span", { className: H["menu-item-icon"], children: a }) : null,
-          /* @__PURE__ */ s("span", { className: H["menu-item-label"], children: r }),
-          o ? /* @__PURE__ */ s("span", { className: H["menu-item-icon"], children: o }) : null
+          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
         ]
       }
     );
   }
 );
-Se.displayName = "Menu.Item";
-const $t = q;
-$t.Item = Se;
-const we = n(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(w["top-bar"], t), ...a, children: e }));
-we.displayName = "TopBar";
-const Le = n(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(w["top-bar-leading"], t), ...a, children: e }));
-Le.displayName = "TopBar.Leading";
-const Ie = n(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(w["top-bar-centred"], t), ...a, children: e }));
-Ie.displayName = "TopBar.Centred";
-const xe = n(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(w["top-bar-trailing"], t), ...a, children: e }));
-xe.displayName = "TopBar.Trailing";
+ye.displayName = "Menu.Item";
+const _ = Q;
+_.Item = ye;
+const ve = A(void 0);
+function fe() {
+  const e = R(ve);
+  if (!e)
+    throw new Error("useTableProvider must be used within a Table component");
+  return e;
+}
+const he = n(({ children: e, className: t, ...a }, s) => {
+  const r = fe(), l = typeof e == "function" ? e(r.selectedRows) : e;
+  return /* @__PURE__ */ o("div", { ref: s, className: d(B.toolbar, t), ...a, children: l });
+});
+he.displayName = "Table.Toolbar";
+const ge = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(B.header, e), ...t }));
+ge.displayName = "Table.Header";
+const Te = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(B.body, e), ...t }));
+Te.displayName = "Table.Body";
+const Se = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(B.footer, e), ...t }));
+Se.displayName = "Table.Footer";
+const we = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(B.row, e), ...t }));
+we.displayName = "Table.Row";
+const Be = n(
+  ({ as: e = "div", area: t, variant: a, className: s, style: r, ...l }, i) => {
+    const m = v({
+      variant: a
+    });
+    return /* @__PURE__ */ o(
+      e,
+      {
+        ref: i,
+        className: d(B.col, s),
+        style: {
+          "--_area": t,
+          ...r
+        },
+        ...m,
+        ...l
+      }
+    );
+  }
+);
+Be.displayName = "Table.Col";
+const Ae = n(
+  ({ rowId: e, checked: t, indeterminate: a, onChange: s }, r) => {
+    const l = fe(), i = e === "select-all", m = i ? l.selectedRows.size === l.allRowIds.size && l.allRowIds.size > 0 : l.selectedRows.has(e);
+    !i && e && l.registerRowId(e);
+    const u = (p) => {
+      i ? l.onSelectAll(Array.from(l.allRowIds), p.target.checked) : l.onSelectionChange(e, p.target.checked), s == null || s(p.target.checked);
+    }, c = i && l.selectedRows.size > 0 && l.selectedRows.size < l.allRowIds.size;
+    return /* @__PURE__ */ y("label", { className: k.checkbox, children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          ref: (p) => {
+            p && (p.indeterminate = c || a || !1, typeof r == "function" ? r(p) : r && (r.current = p));
+          },
+          type: "checkbox",
+          className: k.input,
+          checked: t !== void 0 ? t : m,
+          onChange: u,
+          "aria-label": i ? "Select all rows" : `Select row ${e}`
+        }
+      ),
+      /* @__PURE__ */ o("span", { className: k.indicator })
+    ] });
+  }
+);
+Ae.displayName = "Table.Checkbox";
 const Re = n(
-  ({ as: e = "button", active: t, disabled: a, icon: o, className: r, children: i, ...c }, m) => /* @__PURE__ */ N(
+  ({ as: e = "div", title: t, subtitle: a, size: s = "md", className: r, ...l }, i) => /* @__PURE__ */ y(e, { ref: i, className: d(B.col, r), "data-variant": "double-line", ...l, 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(B.action), children: [
+    /* @__PURE__ */ o(
+      V,
+      {
+        ...r,
+        as: e,
+        variant: "ghost",
+        className: d(B["action-trigger"]),
+        "aria-label": "Actions",
+        onClick: (l) => {
+          l.stopPropagation();
+        },
+        size: "small"
+      }
+    ),
+    /* @__PURE__ */ o(_, { 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
+    });
+  }, N = (f, h) => {
+    const g = h ? new Set(f) : /* @__PURE__ */ new Set();
+    u(g), r == null || r({
+      selected: g,
+      allSelected: h,
+      someSelected: h
+    });
+  }, b = (f) => {
+    c.current.add(f);
+  }, S = {
+    selectedRows: m,
+    allRowIds: c.current,
+    onSelectionChange: p,
+    onSelectAll: N,
+    registerRowId: b
+  };
+  return /* @__PURE__ */ o(ve.Provider, { value: S, children: /* @__PURE__ */ o(
+    "div",
+    {
+      ref: i,
+      className: d(B.table, a),
+      style: {
+        "--_columns": e,
+        ...s
+      },
+      ...l,
+      children: t
+    }
+  ) });
+});
+xe.displayName = "Table";
+const pa = Object.assign(xe, {
+  Toolbar: he,
+  Header: ge,
+  Body: Te,
+  Footer: Se,
+  Row: we,
+  Col: Be,
+  Checkbox: Ae,
+  DoubleLine: Re,
+  Action: Le,
+  ActionItem: Ie
+}), Xt = 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,
+    ...u
+  }, c) => {
+    const p = v({
+      align: a,
+      direction: t,
+      fluid: r,
+      gap: e,
+      wrap: s
+    });
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: c,
+        className: d(At["button-group"], m),
+        role: "group",
+        "aria-label": l,
+        ...p,
+        ...u,
+        children: i
+      }
+    );
+  }
+);
+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(
     e,
     {
       ref: m,
-      className: d(w["top-bar-item"], r),
+      className: d(L["top-bar-item"], r),
       "data-active": t ? "" : void 0,
       "data-disabled": a ? "" : void 0,
-      ...c,
+      ...i,
       children: [
-        o && /* @__PURE__ */ s("span", { className: w["top-bar-item-icon"], children: o }),
-        i
+        s && /* @__PURE__ */ o("span", { className: L["top-bar-item-icon"], children: s }),
+        l
       ]
     }
   )
 );
-Re.displayName = "TopBar.Item";
-const Me = n(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(w["top-bar-list-item"], t), ...a, children: e }));
-Me.displayName = "TopBar.ListItem";
-const oa = Object.assign(we, {
-  Centred: Ie,
-  Item: Re,
-  Leading: Le,
-  ListItem: Me,
-  Trailing: xe
-}), He = A(void 0), J = n(
-  ({ direction: e = "horizontal", gap: t, value: a, onChange: o, children: r, className: i, ...c }, m) => {
-    const u = y({ direction: e }), l = {
+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: o,
+      onChange: s,
       value: a
     };
-    return /* @__PURE__ */ s(He.Provider, { value: p, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ o(ze.Provider, { value: p, children: /* @__PURE__ */ o(
       "nav",
       {
         ref: m,
-        className: d(F.nav, i),
+        className: d(j.nav, l),
         style: {
           ...t && {
-            "--vers-comp-nav-gap": l[t]
+            "--vers-comp-nav-gap": c[t]
           }
         },
         ...u,
-        ...c,
+        ...i,
         children: r
       }
     ) });
   }
 );
-J.displayName = "Nav";
-J.displayName = "Nav";
-const De = n(
+U.displayName = "Nav";
+U.displayName = "Nav";
+const je = n(
   ({
     as: e = "button",
     active: t = !1,
     value: a,
-    disabled: o = !1,
+    disabled: s = !1,
     loading: r = !1,
-    leftIcon: i,
-    rightIcon: c,
+    leftIcon: l,
+    rightIcon: i,
     children: m,
     onClick: u,
-    className: l,
+    className: c,
     ...p
-  }, v) => {
-    const b = S(He), g = b != null && b.onChange && a !== void 0 ? b.value === a : t, T = y({
-      active: g,
-      disabled: o || r,
+  }, 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
-    }), B = (M) => {
-      if (o || r) {
-        M.preventDefault();
+    }), h = (g) => {
+      if (s || r) {
+        g.preventDefault();
         return;
       }
-      b != null && b.onChange && a !== void 0 && b.onChange(a), u == null || u(M);
+      b != null && b.onChange && a !== void 0 && b.onChange(a), u == null || u(g);
     };
-    return /* @__PURE__ */ N(
+    return /* @__PURE__ */ y(
       e,
       {
-        ref: v,
-        className: d(F["nav-item"], l),
-        "aria-current": g && e !== "button" ? "page" : void 0,
-        "aria-disabled": o || r ? "true" : void 0,
+        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,
-        ...T,
+        ...f,
         ...p,
-        onClick: B,
+        onClick: h,
         children: [
-          i && /* @__PURE__ */ s("span", { className: F["nav-item-icon"], children: /* @__PURE__ */ s(G, { as: i }) }),
+          l && /* @__PURE__ */ o("span", { className: j["nav-item-icon"], children: /* @__PURE__ */ o(E, { as: l }) }),
           m,
-          c && /* @__PURE__ */ s("span", { className: F["nav-item-icon"], children: /* @__PURE__ */ s(G, { as: c }) })
+          i && /* @__PURE__ */ o("span", { className: j["nav-item-icon"], children: /* @__PURE__ */ o(E, { as: i }) })
         ]
       }
     );
   }
 );
-De.displayName = "NavItem";
-const ra = Object.assign(J, {
-  Item: De
-}), Ce = n(({ children: e, className: t }, a) => /* @__PURE__ */ s("aside", { ref: a, className: d(h.sidebar, t), children: e }));
-Ce.displayName = "Sidebar";
-const je = n(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(h["sidebar-header"], t), children: e }));
-je.displayName = "Sidebar.Header";
-const Fe = n(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(h["sidebar-body"], t), children: e }));
-Fe.displayName = "Sidebar.Body";
-const Pe = n(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(h["sidebar-footer"], t), children: e }));
-Pe.displayName = "Sidebar.Footer";
-const Ee = n(
-  ({ label: e, icon: t, defaultExpanded: a = !0, isExpanded: o, onExpandedChange: r, children: i, className: c }, m) => {
-    const [u, l] = $(a), p = o !== void 0 ? o : u, v = () => {
+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;
-      l(b), r == null || r(b);
+      c(b), r == null || r(b);
     };
-    return /* @__PURE__ */ N(
+    return /* @__PURE__ */ y(
       "div",
       {
         ref: m,
-        className: d(h["sidebar-group"], c),
+        className: d(T["sidebar-group"], i),
         "data-expanded": p ? "" : void 0,
         children: [
-          /* @__PURE__ */ N("button", { className: h["sidebar-group-header"], onClick: v, "aria-expanded": p, children: [
-            t && /* @__PURE__ */ s("span", { children: t }),
-            /* @__PURE__ */ s("span", { className: h["sidebar-group-label"], children: e }),
-            /* @__PURE__ */ s(G, { as: E, className: h["sidebar-group-chevron"], size: "sm" })
+          /* @__PURE__ */ y("button", { className: T["sidebar-group-header"], onClick: N, "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__ */ s("div", { className: h["sidebar-group-content"], children: /* @__PURE__ */ s("div", { children: i }) })
+          /* @__PURE__ */ o("div", { className: T["sidebar-group-content"], children: /* @__PURE__ */ o("div", { children: l }) })
         ]
       }
     );
   }
 );
-Ee.displayName = "Sidebar.Group";
-const $e = n(
-  ({ as: e = "button", active: t, disabled: a, icon: o, action: r, className: i, children: c, ...m }, u) => /* @__PURE__ */ N(
+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(
     e,
     {
       ref: u,
-      className: d(h["sidebar-item"], i),
+      className: d(T["sidebar-item"], l),
       "data-active": t ? "" : void 0,
       "data-disabled": a ? "" : void 0,
       "data-action": r ? "" : void 0,
       ...m,
       children: [
-        o && /* @__PURE__ */ s("span", { className: h["sidebar-item-icon"], children: o }),
-        /* @__PURE__ */ s("span", { className: h["sidebar-item-text"], children: c }),
-        r && /* @__PURE__ */ s("span", { className: h["sidebar-item-action"], children: r })
+        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 })
       ]
     }
   )
 );
-$e.displayName = "Sidebar.Item";
-const Ge = n(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(h["sidebar-item-list"], t), children: e }));
-Ge.displayName = "Sidebar.ItemList";
-const ze = n(({ className: e }, t) => /* @__PURE__ */ s("div", { ref: t, className: d(h["sidebar-divider"], e), children: /* @__PURE__ */ s(At, {}) }));
-ze.displayName = "Sidebar.Divider";
-const ia = Object.assign(Ce, {
-  Body: Fe,
-  Divider: ze,
-  Footer: Pe,
-  Group: Ee,
-  Header: je,
-  Item: $e,
-  ItemList: Ge
+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
 });
-function Gt(e, t) {
+function qt(e, t) {
   return e === t;
 }
-const ke = n(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("nav", { ref: o, className: d(P["bottom-bar"], t), ...a, children: e }));
-ke.displayName = "BottomBar";
-const Ve = n(
-  ({ as: e = "button", href: t, active: a = !1, disabled: o = !1, icon: r, children: i, onClick: c, className: m, ...u }, l) => {
-    const p = Gt(e, "a"), v = y({
+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({
       active: a,
-      disabled: o
-    }), b = (B) => {
-      if (o) {
-        B.preventDefault();
+      disabled: s
+    }), b = (h) => {
+      if (s) {
+        h.preventDefault();
         return;
       }
-      c == null || c(B);
-    }, g = {
-      className: d(P["bottom-bar-item"], m),
+      i == null || i(h);
+    }, S = {
+      className: d($["bottom-bar-item"], m),
       onClick: b,
-      ref: l,
-      ...v,
+      ref: c,
+      ...N,
       ...u
     };
-    return p && (g.href = t), /* @__PURE__ */ N(e || "button", { ...g, 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 && (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 })
     ] });
   }
 );
-Ve.displayName = "BottomBar.Item";
-const la = Object.assign(ke, {
-  Item: Ve
-}), _e = n(
-  ({ variant: e = "classic", hideHeader: t, hideBottom: a, className: o, children: r }, i) => {
-    const c = y({
-      "hide-header": t,
-      "hide-bottom": a,
-      variant: e
+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__ */ s("div", { ref: i, className: d(I["app-layout"], o), ...c, children: r });
+    return /* @__PURE__ */ o("div", { ref: s, className: d(x["app-layout-body"], t), ...r, children: a });
   }
 );
-_e.displayName = "AppLayout";
-const We = n(({ className: e, children: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(I["app-layout-body"], e), children: t }));
-We.displayName = "AppLayout.Body";
-const Ue = n(({ className: e, children: t }, a) => /* @__PURE__ */ s("header", { ref: a, className: d(I["app-layout-header"], e), children: t }));
+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 Xe = n(
-  ({ className: e, placement: t = "full-width", children: a }, o) => {
-    const r = y({
-      placement: t
-    });
-    return /* @__PURE__ */ s("main", { ref: o, className: d(I["app-layout-main"], e), ...r, children: a });
+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
+});
+function Jt({ columns: e = "1fr", children: t, className: a, style: s, ...r }, l) {
+  return /* @__PURE__ */ o(
+    "form",
+    {
+      ref: l,
+      className: d(X["form-group"], a),
+      style: {
+        "--_columns": e,
+        ...s
+      },
+      ...r,
+      children: t
+    }
+  );
+}
+const tt = n(Jt);
+tt.displayName = "FormGroup";
+const at = n(
+  ({ area: e, children: t, className: a, style: s, ...r }, l) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: l,
+      className: d(X.field, a),
+      style: {
+        "--_area": e,
+        ...s
+      },
+      ...r,
+      children: t
+    }
+  )
+);
+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
+});
+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
+    }
+  );
+}
+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 }) })
+        ]
+      }
+    );
   }
 );
-Xe.displayName = "AppLayout.Main";
-const qe = n(({ className: e, children: t }, a) => /* @__PURE__ */ s("aside", { ref: a, className: d(I["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: d(I["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: d(I["app-layout-bottom"], e), children: t }));
-Ke.displayName = "AppLayout.Bottom";
-const na = Object.assign(_e, {
-  Body: We,
-  Bottom: Ke,
-  Header: Ue,
-  Main: Xe,
-  SideLeft: qe,
-  SideRight: Je
-}), Qe = gt.forwardRef(
-  ({ isOpen: e, onOpenChange: t, children: a, onClick: o, ...r }, i) => {
-    const c = C(null), m = i || c;
-    j(() => {
-      const l = m.current;
-      if (l) {
+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 {
-            l.showModal(), document.documentElement.style.overflow = "hidden";
+            c.showModal(), document.documentElement.style.overflow = "hidden";
           } catch {
           }
         else
-          l.close(), document.documentElement.style.overflow = "";
+          c.close(), document.documentElement.style.overflow = "";
         return () => {
           document.documentElement.style.overflow = "";
         };
       }
-    }, [e, m]), j(() => {
-      const l = m.current;
-      if (!l)
+    }, [e, m]), z(() => {
+      const c = m.current;
+      if (!c)
         return;
-      const p = () => t == null ? void 0 : t(!1), v = (b) => {
+      const p = () => t == null ? void 0 : t(!1), N = (b) => {
         b.preventDefault(), t == null || t(!1);
       };
-      return l.addEventListener("close", p), l.addEventListener("cancel", v), () => {
-        l.removeEventListener("close", p), l.removeEventListener("cancel", v);
+      return c.addEventListener("close", p), c.addEventListener("cancel", N), () => {
+        c.removeEventListener("close", p), c.removeEventListener("cancel", N);
       };
     }, [t, m]);
-    const u = Tt(
-      (l) => {
-        l.target === l.currentTarget && (t == null || t(!1)), o == null || o(l);
+    const u = Dt(
+      (c) => {
+        c.target === c.currentTarget && (t == null || t(!1)), s == null || s(c);
       },
-      [t, o]
+      [t, s]
     );
-    return /* @__PURE__ */ s("dialog", { ...r, ref: m, onClick: u, children: a });
+    return /* @__PURE__ */ o("dialog", { ...r, ref: m, onClick: u, children: a });
   }
 );
-Qe.displayName = "Dialog";
-const K = Qe, Ye = A(void 0), zt = () => {
-  const e = S(Ye);
+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;
-}, Ze = n(
-  ({ open: e, onOpenChange: t, placement: a = "right", children: o, className: r, ...i }, c) => {
-    const m = y({
+}, ct = n(
+  ({ open: e, onOpenChange: t, placement: a = "right", children: s, className: r, ...l }, i) => {
+    const m = v({
       placement: a
     });
-    return /* @__PURE__ */ s(Ye.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ s(
-      K,
+    return /* @__PURE__ */ o(it.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ o(
+      Y,
       {
-        ref: c,
+        ref: i,
         isOpen: e,
         onOpenChange: t,
-        className: d(e && Nt.drawer, r),
+        className: d(e && Rt.drawer, r),
         ...m,
-        ...i,
-        children: /* @__PURE__ */ s("div", { className: f.content, children: o })
+        ...l,
+        children: /* @__PURE__ */ o("div", { className: w.content, children: s })
       }
     ) });
   }
 );
-Ze.displayName = "Drawer";
-const Oe = n(({ onClick: e, ...t }, a) => {
-  const { onClose: o } = zt();
-  return /* @__PURE__ */ s(
-    k,
+ct.displayName = "Drawer";
+const nt = n(({ onClick: e, ...t }, a) => {
+  const { onClose: s } = Ut();
+  return /* @__PURE__ */ o(
+    V,
     {
       ref: a,
       variant: "ghost",
-      as: W,
+      as: q,
       "aria-label": "Close",
-      onClick: (i) => {
-        o(), e == null || e(i);
+      onClick: (l) => {
+        s(), e == null || e(l);
       },
-      className: f.closeButton,
+      className: w.closeButton,
       ...t
     }
   );
 });
-Oe.displayName = "Drawer.CloseButton";
-const et = n(
-  ({ action: e, children: t, tabs: a, className: o, ...r }, i) => /* @__PURE__ */ N(
+nt.displayName = "Drawer.CloseButton";
+const dt = n(
+  ({ action: e, children: t, tabs: a, className: s, ...r }, l) => /* @__PURE__ */ y(
     "div",
     {
-      ref: i,
-      className: d(f.header, o),
+      ref: l,
+      className: d(w.header, s),
       ...r,
       ...e && { "data-action": "" },
       ...a && { "data-tabs": "" },
       children: [
-        e ? /* @__PURE__ */ N(Q, { children: [
-          /* @__PURE__ */ s("div", { className: f.headerTop, children: e }),
-          t && /* @__PURE__ */ s("div", { className: f.headerContent, children: t })
-        ] }) : /* @__PURE__ */ s("div", { className: f.headerTop, children: t }),
+        e ? /* @__PURE__ */ y(Tt, { children: [
+          /* @__PURE__ */ o("div", { className: w.headerTop, children: e }),
+          t && /* @__PURE__ */ o("div", { className: w.headerContent, children: t })
+        ] }) : /* @__PURE__ */ o("div", { className: w.headerTop, children: t }),
         a
       ]
     }
   )
 );
-et.displayName = "Drawer.Header";
-const ca = Object.assign(Ze, {
-  Body: X,
-  CloseButton: Oe,
-  Footer: Z,
-  Header: et,
-  Title: U
-}), tt = A(void 0), kt = () => {
-  const e = S(tt);
+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);
   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, ...c }, m) => {
-    const u = y({ size: a, position: o });
-    return /* @__PURE__ */ s(tt.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ s(
-      K,
+}, 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(
+      Y,
       {
         ref: m,
         isOpen: e,
         onOpenChange: t,
-        className: d(e && yt.modal, i),
+        className: d(e && It.modal, l),
         "data-modal": "",
         ...u,
-        ...c,
-        children: /* @__PURE__ */ s("div", { className: f.content, children: r })
+        ...i,
+        children: /* @__PURE__ */ o("div", { className: w.content, children: r })
       }
     ) });
   }
 );
-at.displayName = "Modal";
-const st = n(({ onClick: e, ...t }, a) => {
-  const { onClose: o } = kt();
-  return /* @__PURE__ */ s(
-    k,
+ut.displayName = "Modal";
+const pt = n(({ onClick: e, ...t }, a) => {
+  const { onClose: s } = Yt();
+  return /* @__PURE__ */ o(
+    V,
     {
       ref: a,
       variant: "ghost",
-      as: W,
+      as: q,
       "aria-label": "Close",
-      onClick: (i) => {
-        o(), e == null || e(i);
+      onClick: (l) => {
+        s(), e == null || e(l);
       },
-      className: f.closeButton,
+      className: w.closeButton,
       ...t
     }
   );
 });
-st.displayName = "Modal.CloseButton";
-const ot = n(({ action: e, children: t, className: a, ...o }, r) => /* @__PURE__ */ N("div", { ref: r, className: d(f.header, "modal-header", a), "data-modal-header": "", ...o, children: [
-  /* @__PURE__ */ s("div", { children: t }),
-  e && /* @__PURE__ */ s("div", { className: "modal-header-action", children: e })
+pt.displayName = "Modal.CloseButton";
+const bt = n(({ action: e, children: t, className: a, ...s }, r) => /* @__PURE__ */ y("div", { ref: r, className: d(w.header, "modal-header", a), "data-modal-header": "", ...s, children: [
+  /* @__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(
+bt.displayName = "Modal.Header";
+const Nt = n(
+  ({ align: e = "end", children: t, className: a, ...s }, r) => /* @__PURE__ */ o(
     "div",
     {
       ref: r,
-      className: d(f.footer, "modal-footer", a),
+      className: d(w.footer, "modal-footer", a),
       "data-modal-footer": "",
       "data-align": e,
-      ...o,
+      ...s,
       children: t
     }
   )
 );
-rt.displayName = "Modal.Footer";
-const da = Object.assign(at, {
-  Body: X,
-  CloseButton: st,
-  Footer: rt,
-  Header: ot,
-  Title: U
-}), it = A(void 0), Vt = () => {
-  const e = S(it);
+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);
   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(
-    K,
+}, 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(
+    Y,
     {
-      ref: i,
+      ref: l,
       isOpen: e,
       onOpenChange: t,
-      className: d(vt.bottomSheet, o),
+      className: d(Lt.bottomSheet, s),
       ...r,
-      children: /* @__PURE__ */ s("div", { className: f.content, children: a })
+      children: /* @__PURE__ */ o("div", { className: w.content, children: a })
     }
   ) })
 );
-lt.displayName = "BottomSheet";
-const nt = n(
+vt.displayName = "BottomSheet";
+const ft = n(
   ({ onClick: e, ...t }, a) => {
-    const { onClose: o } = Vt();
-    return /* @__PURE__ */ s(
-      k,
+    const { onClose: s } = Zt();
+    return /* @__PURE__ */ o(
+      V,
       {
-        as: W,
+        as: q,
         ref: a,
         variant: "ghost",
         "aria-label": "Close",
-        onClick: (i) => {
-          o(), e == null || e(i);
+        onClick: (l) => {
+          s(), e == null || e(l);
         },
-        className: f.closeButton,
+        className: w.closeButton,
         ...t
       }
     );
   }
 );
-nt.displayName = "BottomSheet.CloseButton";
-const ma = Object.assign(lt, {
-  Body: X,
-  CloseButton: nt,
-  Footer: Z,
-  Header: St,
-  Title: U
+ft.displayName = "BottomSheet.CloseButton";
+const wa = Object.assign(vt, {
+  Body: K,
+  CloseButton: ft,
+  Footer: te,
+  Header: Ht,
+  Title: J
 });
 export {
-  Ot as Accordion,
-  na as AppLayout,
-  ta as AttributeList,
-  It as AvatarGroup,
+  na as Accordion,
+  fa as AppLayout,
+  ma as AttributeList,
+  zt as AvatarGroup,
   Ct as BadgeGroup,
-  la as BottomBar,
-  ma as BottomSheet,
-  Ft as ButtonGroup,
-  aa as Card,
-  K as Dialog,
-  ca as Drawer,
-  $t as Menu,
-  da as Modal,
-  ra as Nav,
-  De as NavItem,
-  Ht as NoResults,
-  ia as Sidebar,
-  sa as Table,
-  ea as Tabs,
-  oa as TopBar
+  va as BottomBar,
+  wa as BottomSheet,
+  Xt as ButtonGroup,
+  ua 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
 };