@versaur/react 1.0.0 → 1.0.3

package/dist/blocks.js

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