@stenajs-webui/core 23.20.2 → 23.21.0

package/dist/index.es.js

@@ -1,22 +1,22 @@
-import { cssColor as N } from "@stenajs-webui/theme";
-import { jsx as l, Fragment as R, jsxs as U } from "react/jsx-runtime";
-import V, { forwardRef as h, useState as g, useCallback as m, useLayoutEffect as M, useRef as y, createContext as B, useEffect as p, useMemo as S, useContext as j, isValidElement as q, Fragment as W } from "react";
-import E from "@emotion/styled";
-import { system as X, background as G, border as Y, borderRight as K, borderLeft as Z, borderTop as J, borderBottom as Q, borderColor as ee, borderRadius as te, borderStyle as re, borderWidth as ne, boxShadow as ue, flexbox as oe, overflow as se, position as ie, layout as ae, zIndex as ce, left as le, right as de, top as pe, bottom as me } from "styled-system";
-import { memoize as he, pickBy as O, debounce as fe } from "lodash-es";
-import C from "classnames";
-import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
-  separatorLine: ge
-}, dt = h(
+import { cssColor as V } from "@stenajs-webui/theme";
+import { jsx as a, jsxs as O, Fragment as R } from "react/jsx-runtime";
+import B, { forwardRef as h, useState as g, useCallback as m, useLayoutEffect as H, useRef as y, createContext as j, useEffect as p, useMemo as S, useContext as q, isValidElement as W, Fragment as G } from "react";
+import E from "classnames";
+import C from "@emotion/styled";
+import { system as X, background as Y, border as K, borderRight as Z, borderLeft as J, borderTop as Q, borderBottom as ee, borderColor as te, borderRadius as re, borderStyle as ne, borderWidth as ue, boxShadow as oe, flexbox as se, overflow as ie, position as ae, layout as ce, zIndex as le, left as de, right as pe, top as me, bottom as he } from "styled-system";
+import { memoize as fe, pickBy as D, debounce as ge } from "lodash-es";
+import './index.css';const ye = "_separatorLine_nzfcz_1", ve = {
+  separatorLine: ye
+}, I = h(
   ({
-    color: e = N("--lhds-color-ui-300"),
+    color: e = V("--lhds-color-ui-400"),
     size: t = "100%",
     width: r = "1px",
     vertical: n = !1
-  }, u) => /* @__PURE__ */ l(
+  }, u) => /* @__PURE__ */ a(
     "hr",
     {
-      className: ye.separatorLine,
+      className: ve.separatorLine,
       "aria-hidden": !0,
       color: e,
       style: {
@@ -27,69 +27,54 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
       ref: u
     }
   )
-), ve = E.button`
-  display: inline-block;
-  user-select: none;
-  border: 0;
-  padding: 0;
-  background: ${({ background: e }) => e};
-  ${({ pointer: e }) => e ? "cursor: pointer;" : ""}
-
-  :hover {
-    ${(e) => e.opacityOnHover ? "opacity: 0.7;" : ""};
-    ${({ hoverBackground: e }) => `background: ${e};`}
-  }
-  :active {
-    ${({ disableOpacityOnClick: e }) => e ? "" : "opacity: 0.5;"}
-  }
-  :focus {
-    outline: 0;
-    ${({ disableFocusHighlight: e }) => e ? "" : "box-shadow: 0 0 3pt 2pt rgba(0, 0, 100, 0.3);"}
-    ${({ focusBackground: e }) => `background: ${e};`}
-  }
-  ${({ width: e }) => e ? `width: ${e};` : ""}
-  ${({ height: e }) => e ? `height: ${e};` : ""}
-  ${({ borderRadius: e }) => e ? `border-radius: ${e};` : ""}
-`, pt = h(
+), be = "_text_1iisw_1", we = "_standard_1iisw_24", xe = "_bold_1iisw_27", ke = "_caption_1iisw_31", _e = "_overline_1iisw_39", $e = "_large_1iisw_48", Se = "_medium_1iisw_53", Ee = "_small_1iisw_58", Ce = "_smaller_1iisw_63", b = {
+  text: be,
+  standard: we,
+  bold: xe,
+  caption: ke,
+  overline: _e,
+  large: $e,
+  medium: Se,
+  small: Ee,
+  smaller: Ce
+}, x = h(
   ({
-    disableFocusHighlight: e,
-    onClick: t,
-    onDblClick: r,
-    tooltip: n,
-    disableOpacityOnClick: u,
-    disablePointer: o,
-    opacityOnHover: s,
-    disabled: a,
-    children: i,
-    background: c = "transparent",
-    hoverBackground: d,
-    focusBackground: f,
-    type: x = "button",
+    children: e,
+    variant: t = "standard",
+    size: r = "medium",
+    className: n,
+    color: u,
+    userSelect: o,
+    whiteSpace: s,
+    wordBreak: c,
+    textAlign: i = "left",
+    overflow: l,
+    textOverflow: d,
+    style: f,
     ...k
-  }, D) => /* @__PURE__ */ l(
-    ve,
+  }, _) => /* @__PURE__ */ a(
+    "span",
     {
-      opacityOnHover: s,
-      title: n,
-      disabled: a,
-      disableOpacityOnClick: u,
-      onClick: t,
-      onDoubleClick: r,
-      disableFocusHighlight: e,
-      pointer: !!(t || r) && !o,
-      ref: D,
-      background: c,
-      hoverBackground: d,
-      focusBackground: f,
-      type: x,
+      className: E(b.text, b[t], b[r], n),
+      ref: _,
+      style: {
+        color: u,
+        userSelect: o,
+        whiteSpace: s,
+        wordBreak: c,
+        textAlign: i,
+        overflow: l,
+        textOverflow: d,
+        ...f
+      },
       ...k,
-      children: i
+      children: e
     }
   )
-), $ = (e) => e == null ? 0 : typeof e == "boolean" ? e ? 1 : 0 : e, be = (e) => {
+), mt = x, $ = (e) => e == null ? 0 : typeof e == "boolean" ? e ? 1 : 0 : e, Te = (e) => {
   if (e !== 0)
     return `calc(${e} * var(--swui-metrics-space))`;
-}, I = (e) => be($(e)), we = {
+}, A = (e) => Te($(e)), Re = {
   // react props
   // https://github.com/facebook/react/blob/5495a7f24aef85ba6937truetrue1ce962673ca9f5fde6/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js
   children: !0,
@@ -576,16 +561,16 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
   for: !0,
   class: !0,
   autofocus: !0
-}, xe = `^((${Object.keys(we).join(
+}, Ie = `^((${Object.keys(Re).join(
   "|"
-)})|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$`, ke = new RegExp(xe), _e = he(
-  (e) => ke.test(e) || e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && e.charCodeAt(2) < 91
-), $e = {
+)})|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$`, Ae = new RegExp(Ie), Le = fe(
+  (e) => Ae.test(e) || e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && e.charCodeAt(2) < 91
+), Pe = {
   box: "var(--swui-shadow-box)",
   popover: "var(--swui-shadow-popover)",
   modal: "var(--swui-shadow-modal)",
   bottom: "var(--swui-shadow-bottom)"
-}, Se = [
+}, ze = [
   "spacing",
   "indent",
   "gap",
@@ -593,7 +578,7 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
   "height",
   "overflow",
   "display"
-], Ee = (e) => Se.includes(e), Ce = X({
+], Fe = (e) => ze.includes(e), Me = X({
   row: {
     property: "flexDirection",
     transform: (e) => e ? "row" : "column"
@@ -615,18 +600,18 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
   },
   columnGap: {
     property: "columnGap",
-    transform: I
+    transform: A
   },
   rowGap: {
     property: "rowGap",
-    transform: I
+    transform: A
   },
   shadow: {
     property: "boxShadow",
-    transform: (e) => $e[e] ?? e
+    transform: (e) => Pe[e] ?? e
   }
-}), w = E("div", {
-  shouldForwardProp: (e) => typeof e == "string" ? Ee(e) ? !1 : _e(e) : !1
+}), v = C("div", {
+  shouldForwardProp: (e) => typeof e == "string" ? Fe(e) ? !1 : Le(e) : !1
 })`
   --current-spacing: 0;
   --current-indent: 0;
@@ -634,8 +619,7 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  ${Ce};
-  ${G};
+  ${Me};
   ${Y};
   ${K};
   ${Z};
@@ -655,6 +639,7 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
   ${de};
   ${pe};
   ${me};
+  ${he};
 
   gap: calc(var(--current-gap) * var(--swui-metrics-space));
 
@@ -675,65 +660,128 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
     ${({ focusWithinBackground: e }) => e ? `background: ${e};` : ""}
     ${({ focusWithinBorder: e }) => e ? `border: ${e};` : ""}
   }
-`, mt = h(
+`, Oe = h(
+  function(t, r) {
+    return /* @__PURE__ */ a(v, { row: !0, ref: r, ...t });
+  }
+), ht = ({ children: e }) => /* @__PURE__ */ O(Oe, { alignItems: "center", gap: 2, children: [
+  /* @__PURE__ */ a(v, { flexGrow: 1, children: /* @__PURE__ */ a(I, {}) }),
+  typeof e == "string" ? /* @__PURE__ */ a(x, { children: e }) : e,
+  /* @__PURE__ */ a(v, { flexGrow: 1, children: /* @__PURE__ */ a(I, {}) })
+] }), He = C.button`
+  display: inline-block;
+  user-select: none;
+  border: 0;
+  padding: 0;
+  background: ${({ background: e }) => e};
+  ${({ pointer: e }) => e ? "cursor: pointer;" : ""}
+
+  :hover {
+    ${(e) => e.opacityOnHover ? "opacity: 0.7;" : ""};
+    ${({ hoverBackground: e }) => `background: ${e};`}
+  }
+  :active {
+    ${({ disableOpacityOnClick: e }) => e ? "" : "opacity: 0.5;"}
+  }
+  :focus {
+    outline: 0;
+    ${({ disableFocusHighlight: e }) => e ? "" : "box-shadow: 0 0 3pt 2pt rgba(0, 0, 100, 0.3);"}
+    ${({ focusBackground: e }) => `background: ${e};`}
+  }
+  ${({ width: e }) => e ? `width: ${e};` : ""}
+  ${({ height: e }) => e ? `height: ${e};` : ""}
+  ${({ borderRadius: e }) => e ? `border-radius: ${e};` : ""}
+`, ft = h(
+  ({
+    disableFocusHighlight: e,
+    onClick: t,
+    onDblClick: r,
+    tooltip: n,
+    disableOpacityOnClick: u,
+    disablePointer: o,
+    opacityOnHover: s,
+    disabled: c,
+    children: i,
+    background: l = "transparent",
+    hoverBackground: d,
+    focusBackground: f,
+    type: k = "button",
+    ..._
+  }, U) => /* @__PURE__ */ a(
+    He,
+    {
+      opacityOnHover: s,
+      title: n,
+      disabled: c,
+      disableOpacityOnClick: u,
+      onClick: t,
+      onDoubleClick: r,
+      disableFocusHighlight: e,
+      pointer: !!(t || r) && !o,
+      ref: U,
+      background: l,
+      hoverBackground: d,
+      focusBackground: f,
+      type: k,
+      ..._,
+      children: i
+    }
+  )
+), gt = h(
   function(t, r) {
-    return /* @__PURE__ */ l(w, { ref: r, ...t });
+    return /* @__PURE__ */ a(v, { ref: r, ...t });
   }
-), Te = (e) => {
-  const { x: t, y: r, width: n, height: u, bottom: o, top: s, left: a, right: i } = e.getBoundingClientRect();
+), De = (e) => {
+  const { x: t, y: r, width: n, height: u, bottom: o, top: s, left: c, right: i } = e.getBoundingClientRect();
   return {
     width: n,
     height: u,
     top: s,
-    left: a,
+    left: c,
     x: t,
     y: r,
     right: i,
     bottom: o
   };
-}, Re = (e, t) => e.x === t.x && e.y === t.y && e.width === t.width && e.height === t.height && e.bottom === t.bottom && e.top === t.top && e.left === t.left && e.right === t.right, Ie = (e, t) => {
+}, Ne = (e, t) => e.x === t.x && e.y === t.y && e.width === t.width && e.height === t.height && e.bottom === t.bottom && e.top === t.top && e.left === t.left && e.right === t.right, Ue = (e, t) => {
   const [r, n] = g(), u = m(() => {
     window.requestAnimationFrame(() => {
       if (e.current) {
-        const o = Te(e.current);
-        (!r || !Re(r, o)) && t && t(o), n(o);
+        const o = De(e.current);
+        (!r || !Ne(r, o)) && t && t(o), n(o);
       }
     });
   }, [e, r, n, t]);
-  return M(() => {
+  return H(() => {
     u();
   }, [u]), {
     dimensions: r
   };
-}, ht = h(
+}, yt = h(
   function({ onResize: t, ...r }, n) {
     const u = y(null);
-    return Ie(n ?? u, t), /* @__PURE__ */ l(w, { ...r, ref: n });
-  }
-), ft = h(
-  function(t, r) {
-    return /* @__PURE__ */ l(w, { row: !0, ref: r, ...t });
+    return Ue(n ?? u, t), /* @__PURE__ */ a(v, { ...r, ref: n });
   }
-), gt = h(function({ num: t = 1, ...r }, n) {
-  return /* @__PURE__ */ l(w, { indent: t, ref: n, ...r });
-}), yt = h(
+), vt = h(function({ num: t = 1, ...r }, n) {
+  return /* @__PURE__ */ a(v, { indent: t, ref: n, ...r });
+}), bt = h(
   function({ num: t = 1, ...r }, n) {
-    return /* @__PURE__ */ l(w, { spacing: t, ref: n, ...r });
+    return /* @__PURE__ */ a(v, { spacing: t, ref: n, ...r });
   }
-), Ae = E.div`
+), Ve = C.div`
   --current-size: 1;
   flex: none;
   width: calc(var(--current-size) * var(--swui-metrics-space));
   height: calc(var(--current-size) * var(--swui-metrics-space));
-`, vt = ({
+`, wt = ({
   half: e = !1,
   horizontal: t = !1,
   num: r = 1,
   vertical: n = !1
 }) => {
   const u = r * (e ? 0.5 : 1);
-  return /* @__PURE__ */ l(
-    Ae,
+  return /* @__PURE__ */ a(
+    Ve,
     {
       style: {
         "--current-size": u,
@@ -742,28 +790,28 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
       }
     }
   );
-}, bt = ({ children: e, nest: t, render: r }) => t ? /* @__PURE__ */ l(R, { children: r(e) }) : /* @__PURE__ */ l(R, { children: e }), H = B({
+}, xt = ({ children: e, nest: t, render: r }) => t ? /* @__PURE__ */ a(R, { children: r(e) }) : /* @__PURE__ */ a(R, { children: e }), N = j({
   isFontLarge: !1,
   fontSizeRatio: 1
-}), A = 12, wt = ({ children: e }) => {
+}), L = 12, kt = ({ children: e }) => {
   const t = y(null), [r, n] = g(!1), [u, o] = g(1);
   p(() => {
     if (!t.current)
       return;
-    const a = new ResizeObserver((i) => {
-      for (const c of i) {
-        const d = c.contentRect.height;
-        n(d > A), o(d / A);
+    const c = new ResizeObserver((i) => {
+      for (const l of i) {
+        const d = l.contentRect.height;
+        n(d > L), o(d / L);
       }
     });
-    return a.observe(t.current), () => a.disconnect();
+    return c.observe(t.current), () => c.disconnect();
   }, []);
   const s = S(
     () => ({ isFontLarge: r, fontSizeRatio: u }),
     [u, r]
   );
-  return /* @__PURE__ */ U(H.Provider, { value: s, children: [
-    /* @__PURE__ */ l(
+  return /* @__PURE__ */ O(N.Provider, { value: s, children: [
+    /* @__PURE__ */ a(
       "div",
       {
         ref: t,
@@ -781,28 +829,18 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
     ),
     e
   ] });
-}, xt = () => {
-  const e = j(H);
+}, _t = () => {
+  const e = q(N);
   return e || {
     isFontLarge: !1,
     fontSizeRatio: 1
   };
-}, Le = "_visuallyHidden_1gevf_1", Pe = {
-  visuallyHidden: Le
-}, ze = (e) => O(e, Fe), kt = (e) => O(e, Me), Fe = (e, t) => t.startsWith("data-") || t.startsWith("aria-"), Me = (e, t) => t.startsWith("aria-"), _t = ({
+}, Be = "_visuallyHidden_1gevf_1", je = {
+  visuallyHidden: Be
+}, qe = (e) => D(e, We), $t = (e) => D(e, Ge), We = (e, t) => t.startsWith("data-") || t.startsWith("aria-"), Ge = (e, t) => t.startsWith("aria-"), St = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ l("span", { className: Pe.visuallyHidden, ...ze(t), children: e }), Oe = "_text_1iisw_1", He = "_standard_1iisw_24", De = "_bold_1iisw_27", Ne = "_caption_1iisw_31", Ue = "_overline_1iisw_39", Ve = "_large_1iisw_48", Be = "_medium_1iisw_53", je = "_small_1iisw_58", qe = "_smaller_1iisw_63", v = {
-  text: Oe,
-  standard: He,
-  bold: De,
-  caption: Ne,
-  overline: Ue,
-  large: Ve,
-  medium: Be,
-  small: je,
-  smaller: qe
-}, _ = h(
+}) => /* @__PURE__ */ a("span", { className: je.visuallyHidden, ...qe(t), children: e }), Xe = h(
   ({
     children: e,
     variant: t = "standard",
@@ -811,74 +849,40 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
     color: u,
     userSelect: o,
     whiteSpace: s,
-    wordBreak: a,
+    wordBreak: c,
     textAlign: i = "left",
-    overflow: c,
+    overflow: l,
     textOverflow: d,
     style: f,
-    ...x
-  }, k) => /* @__PURE__ */ l(
-    "span",
-    {
-      className: C(v.text, v[t], v[r], n),
-      ref: k,
-      style: {
-        color: u,
-        userSelect: o,
-        whiteSpace: s,
-        wordBreak: a,
-        textAlign: i,
-        overflow: c,
-        textOverflow: d,
-        ...f
-      },
-      ...x,
-      children: e
-    }
-  )
-), $t = _, We = h(
-  ({
-    children: e,
-    variant: t = "standard",
-    size: r = "medium",
-    className: n,
-    color: u,
-    userSelect: o,
-    whiteSpace: s,
-    wordBreak: a,
-    textAlign: i = "left",
-    overflow: c,
-    textOverflow: d,
-    style: f,
-    ...x
-  }, k) => /* @__PURE__ */ l(
+    ...k
+  }, _) => /* @__PURE__ */ a(
     "p",
     {
-      className: C(v.text, v[t], v[r], n),
-      ref: k,
+      className: E(b.text, b[t], b[r], n),
+      ref: _,
       style: {
         color: u,
         userSelect: o,
         whiteSpace: s,
-        wordBreak: a,
+        wordBreak: c,
         textAlign: i,
-        overflow: c,
+        overflow: l,
         textOverflow: d,
         ...f
       },
-      ...x,
+      ...k,
       children: e
     }
   )
-), St = We, Et = (e) => /* @__PURE__ */ l(_, { size: "small", ...e }), Ct = (e) => /* @__PURE__ */ l(_, { size: "smaller", ...e }), Tt = (e) => /* @__PURE__ */ l(_, { size: "medium", ...e }), Rt = (e) => /* @__PURE__ */ l(_, { size: "large", ...e }), Xe = "_heading_1cnsg_1", Ge = "_h1_1cnsg_10", Ye = "_h2_1cnsg_14", Ke = "_h3_1cnsg_18", Ze = "_h4_1cnsg_22", Je = "_h5_1cnsg_26", Qe = "_h6_1cnsg_30", L = {
-  heading: Xe,
-  h1: Ge,
-  h2: Ye,
-  h3: Ke,
-  h4: Ze,
-  h5: Je,
-  h6: Qe
-}, et = h(
+), Et = Xe, Ct = (e) => /* @__PURE__ */ a(x, { size: "small", ...e }), Tt = (e) => /* @__PURE__ */ a(x, { size: "smaller", ...e }), Rt = (e) => /* @__PURE__ */ a(x, { size: "medium", ...e }), It = (e) => /* @__PURE__ */ a(x, { size: "large", ...e }), Ye = "_heading_1cnsg_1", Ke = "_h1_1cnsg_10", Ze = "_h2_1cnsg_14", Je = "_h3_1cnsg_18", Qe = "_h4_1cnsg_22", et = "_h5_1cnsg_26", tt = "_h6_1cnsg_30", P = {
+  heading: Ye,
+  h1: Ke,
+  h2: Ze,
+  h3: Je,
+  h4: Qe,
+  h5: et,
+  h6: tt
+}, rt = h(
   ({
     variant: e = "h3",
     className: t,
@@ -887,19 +891,19 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
     wordBreak: u,
     style: o,
     children: s,
-    as: a,
+    as: c,
     ...i
-  }, c) => /* @__PURE__ */ l(
-    a ?? e,
+  }, l) => /* @__PURE__ */ a(
+    c ?? e,
     {
-      className: C(L.heading, L[e], t),
+      className: E(P.heading, P[e], t),
       style: { color: r, whiteSpace: n, wordBreak: u, ...o },
-      ref: c,
+      ref: l,
       ...i,
       children: s
     }
   )
-), It = (e) => /* @__PURE__ */ l(et, { variant: "h2", ...e }), At = ({
+), At = (e) => /* @__PURE__ */ a(rt, { variant: "h2", ...e }), Lt = ({
   blockedKeys: e,
   blockMouse: t = !1,
   ...r
@@ -915,8 +919,8 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
     },
     [t]
   );
-  return /* @__PURE__ */ l(
-    w,
+  return /* @__PURE__ */ a(
+    v,
     {
       ...r,
       onKeyDown: n,
@@ -925,31 +929,31 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
       onMouseUp: u
     }
   );
-}, tt = (e, t) => e === t, Lt = (e, t, r = tt) => {
+}, nt = (e, t) => e === t, Pt = (e, t, r = nt) => {
   const n = m(
     (i) => {
-      e.some((c) => r(c, i)) || t([...e, i]);
+      e.some((l) => r(l, i)) || t([...e, i]);
     },
     [e, t, r]
   ), u = m(
     (i) => {
       t(
-        i.reduce((c, d) => c.some((f) => r(f, d)) ? c : [...c, d], e)
+        i.reduce((l, d) => l.some((f) => r(f, d)) ? l : [...l, d], e)
       );
     },
     [e, t, r]
   ), o = m(
     (i) => {
-      const c = e.findIndex((d) => r(d, i));
-      c >= 0 && t(e.filter((d, f) => f !== c));
+      const l = e.findIndex((d) => r(d, i));
+      l >= 0 && t(e.filter((d, f) => f !== l));
     },
     [e, t, r]
   ), s = m(
     (i) => {
-      t(e.filter((c) => !i.some((d) => r(d, c))));
+      t(e.filter((l) => !i.some((d) => r(d, l))));
     },
     [e, t, r]
-  ), a = m(
+  ), c = m(
     (i) => {
       e.some((d) => r(d, i)) ? o(i) : n(i);
     },
@@ -960,7 +964,7 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
     addMultiple: u,
     remove: o,
     removeMultiple: s,
-    toggle: a
+    toggle: c
   };
 }, T = (e) => {
   const [t, r] = g(e), n = m(() => {
@@ -971,7 +975,7 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
     r((s) => !s);
   }, [r]);
   return [t, n, u, o];
-}, Pt = (e, t) => {
+}, zt = (e, t) => {
   const [r, n] = g(e);
   return p(() => {
     const u = setTimeout(() => {
@@ -981,7 +985,7 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
       clearTimeout(u);
     };
   }, [e, t]), r;
-}, zt = (e, t) => {
+}, Ft = (e, t) => {
   const [r, n] = g(e);
   return p(() => {
     e && n(!0);
@@ -993,19 +997,19 @@ import './index.css';const ge = "_separatorLine_nzfcz_1", ye = {
     };
   }, [e, t]), r;
 };
-let rt = 0;
-const P = (e) => `webui-${e ? e + "-" : ""}${++rt}`, Ft = (e) => {
-  const [t, r] = g(() => P(e));
-  return p(() => r(P(e)), [e]), t;
-}, b = (e, t, r) => {
+let ut = 0;
+const z = (e) => `webui-${e ? e + "-" : ""}${++ut}`, Mt = (e) => {
+  const [t, r] = g(() => z(e));
+  return p(() => r(z(e)), [e]), t;
+}, w = (e, t, r) => {
   const n = y(null);
   p(() => {
     n.current = r;
   }, [r]), p(() => {
     if (!(e.current && e.current.addEventListener)) return;
-    const o = (a) => {
+    const o = (c) => {
       if (n.current)
-        return n.current(a);
+        return n.current(c);
     };
     if (!e.current)
       return;
@@ -1014,35 +1018,35 @@ const P = (e) => `webui-${e ? e + "-" : ""}${++rt}`, Ft = (e) => {
       s && s.removeEventListener(t, o);
     };
   }, [t, e]);
-}, Mt = (e) => {
+}, Ot = (e) => {
   const [t, r, n] = T(!1);
   p(() => {
     document.activeElement === e.current ? r() : n();
-  }, [e, n, r]), b(e, "focus", r), b(e, "blur", n);
+  }, [e, n, r]), w(e, "focus", r), w(e, "blur", n);
   const u = m(() => {
     e.current && e.current.focus();
   }, [e]), o = m(() => {
     e.current && e.current.blur();
   }, [e]);
   return { isInFocus: t, focus: u, blur: o };
-}, Ot = (e) => {
+}, Ht = (e) => {
   const t = y(e);
-  return M(() => {
+  return H(() => {
     t.current = e;
   }), m((...r) => {
     const { current: n } = t;
     return n(...r);
   }, []);
-}, Ht = (e) => {
-  const t = V.useRef(e);
-  return t.current = e, t;
 }, Dt = (e) => {
-  const [t, r, n] = T(!1);
-  return b(e, "mouseover", r), b(e, "mouseout", n), t;
+  const t = B.useRef(e);
+  return t.current = e, t;
 }, Nt = (e) => {
   const [t, r, n] = T(!1);
-  return b(e, "mouseenter", r), b(e, "mouseleave", n), t;
-}, Ut = (e, t) => {
+  return w(e, "mouseover", r), w(e, "mouseout", n), t;
+}, Ut = (e) => {
+  const [t, r, n] = T(!1);
+  return w(e, "mouseenter", r), w(e, "mouseleave", n), t;
+}, Vt = (e, t) => {
   const r = y(() => {
   });
   p(() => {
@@ -1055,7 +1059,7 @@ const P = (e) => `webui-${e ? e + "-" : ""}${++rt}`, Ft = (e) => {
       document.removeEventListener("mousedown", n), document.removeEventListener("touchstart", n);
     };
   }, [...e]);
-}, Vt = (e, t, r) => {
+}, Bt = (e, t, r) => {
   const n = y(() => {
   });
   p(() => {
@@ -1068,21 +1072,21 @@ const P = (e) => `webui-${e ? e + "-" : ""}${++rt}`, Ft = (e) => {
       document.removeEventListener("mousedown", u, r), document.removeEventListener("touchstart", u, r);
     };
   }, [e, r]);
-}, z = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"], Bt = (e, t) => {
+}, F = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"], jt = (e, t) => {
   const r = y(() => {
   });
   p(() => {
     r.current = e;
   }, [e]), p(() => {
-    const n = fe(r.current, t);
-    return z.forEach((u) => window.addEventListener(u, n)), () => {
-      z.forEach(
+    const n = ge(r.current, t);
+    return F.forEach((u) => window.addEventListener(u, n)), () => {
+      F.forEach(
         (u) => window.removeEventListener(u, n)
       );
     };
   }, [t]);
-}, jt = (e, t) => {
-  const [r, n] = g(!1), { rootMargin: u, root: o, threshold: s } = t || {}, a = S(() => new IntersectionObserver(
+}, qt = (e, t) => {
+  const [r, n] = g(!1), { rootMargin: u, root: o, threshold: s } = t || {}, c = S(() => new IntersectionObserver(
     ([i]) => n(i.isIntersecting),
     {
       rootMargin: u,
@@ -1090,48 +1094,48 @@ const P = (e) => `webui-${e ? e + "-" : ""}${++rt}`, Ft = (e) => {
       threshold: s
     }
   ), [n, u, o, s]);
-  return p(() => (e.current && a.observe(e.current), () => {
-    a.disconnect();
-  }), [a, e]), r;
-}, qt = (e) => {
+  return p(() => (e.current && c.observe(e.current), () => {
+    c.disconnect();
+  }), [c, e]), r;
+}, Wt = (e) => {
   const t = y(null);
   return p(() => {
     e && (typeof e == "function" ? e(t.current) : e.current = t.current);
   }), t;
-}, Wt = (e, t, r = !0) => {
+}, Gt = (e, t, r = !0) => {
   const [n, u] = g(e), o = y(null), s = m(
-    (a, i = t) => {
-      u(a), r && clearTimeout(o.current), o.current = setTimeout(() => u(e), i);
+    (c, i = t) => {
+      u(c), r && clearTimeout(o.current), o.current = setTimeout(() => u(e), i);
     },
     [t, r, e]
   );
   return p(() => () => {
     clearTimeout(o.current);
   }, []), [n, s];
-}, Xt = () => S(() => /* @__PURE__ */ new Date(), []), Gt = (e) => (t, r) => e(t).localeCompare(e(r)), Yt = (e) => (t, r) => e(t) - e(r), Kt = (e) => {
+}, Xt = () => S(() => /* @__PURE__ */ new Date(), []), Yt = (e) => (t, r) => e(t).localeCompare(e(r)), Kt = (e) => (t, r) => e(t) - e(r), Zt = (e) => {
   throw new Error(`Switch unhandled case: ${e}`);
-}, Zt = (e, t) => t, Jt = (e) => Object.keys(e).filter((t) => e[t]), Qt = (e) => {
+}, Jt = (e, t) => t, Qt = (e) => Object.keys(e).filter((t) => e[t]), er = (e) => {
   try {
     const t = parseFloat(e);
     return isNaN(t) || t == null ? void 0 : t;
   } catch {
   }
-}, er = (e) => {
+}, tr = (e) => {
   try {
     const t = parseInt(e, 10);
     return isNaN(t) || t == null ? void 0 : t;
   } catch {
   }
 };
-function tr(e, t) {
+function rr(e, t) {
   if (e == null)
     throw new Error("Invariant error: " + t);
 }
-const rr = (e) => {
-  if (!q(e) || e.type !== W) return !1;
+const nr = (e) => {
+  if (!W(e) || e.type !== G) return !1;
   const r = e.props.children;
-  return Array.isArray(r) ? r.every(F) : F(r);
-}, F = (e) => e == null || e === !1, nr = (e) => {
+  return Array.isArray(r) ? r.every(M) : M(r);
+}, M = (e) => e == null || e === !1, ur = (e) => {
   try {
     const t = new Intl.PluralRules(e);
     return (r) => t.select(r);
@@ -1149,66 +1153,67 @@ const rr = (e) => {
       }
     };
   }
-}, ur = (e) => (t, r) => r[e(t)] ?? r.other ?? "";
+}, or = (e) => (t, r) => r[e(t)] ?? r.other ?? "";
 export {
-  H as AccessibleFontSizeContext,
-  wt as AccessibleFontSizeProvider,
-  At as BlockKeyboardEvents,
-  w as Box,
-  pt as Clickable,
-  mt as Column,
-  It as HeaderText,
-  et as Heading,
-  gt as Indent,
-  Rt as LargeText,
-  bt as Nest,
-  St as P,
-  We as Paragraph,
-  ht as ResizeAwareBox,
-  ft as Row,
-  _t as ScreenReaderOnlyText,
-  dt as SeparatorLine,
-  Et as SmallText,
-  Ct as SmallerText,
-  vt as Space,
-  yt as Spacing,
-  Tt as StandardText,
-  _ as Text,
-  $t as Txt,
+  N as AccessibleFontSizeContext,
+  kt as AccessibleFontSizeProvider,
+  Lt as BlockKeyboardEvents,
+  v as Box,
+  ft as Clickable,
+  gt as Column,
+  At as HeaderText,
+  rt as Heading,
+  vt as Indent,
+  It as LargeText,
+  xt as Nest,
+  Et as P,
+  Xe as Paragraph,
+  yt as ResizeAwareBox,
+  Oe as Row,
+  St as ScreenReaderOnlyText,
+  I as SeparatorLine,
+  ht as SeparatorText,
+  Ct as SmallText,
+  Tt as SmallerText,
+  wt as Space,
+  bt as Spacing,
+  Rt as StandardText,
+  x as Text,
+  mt as Txt,
   $ as booleanOrNumberToNumber,
-  Yt as byNumberField,
-  Gt as byStringField,
-  Zt as exhaustSwitchCase,
-  Kt as exhaustSwitchCaseElseThrow,
-  kt as getAriaProps,
-  ze as getDataProps,
-  Te as getDimensionObject,
-  tr as invariant,
-  rr as isEmptyFragment,
-  Qt as parseFloatElseUndefined,
-  er as parseIntElseUndefined,
-  ur as pluralFormatter,
-  nr as selectPluralRule,
-  Jt as truthyKeysAsList,
-  xt as useAccessibleFontSizeContext,
-  Lt as useArraySet,
+  Kt as byNumberField,
+  Yt as byStringField,
+  Jt as exhaustSwitchCase,
+  Zt as exhaustSwitchCaseElseThrow,
+  $t as getAriaProps,
+  qe as getDataProps,
+  De as getDimensionObject,
+  rr as invariant,
+  nr as isEmptyFragment,
+  er as parseFloatElseUndefined,
+  tr as parseIntElseUndefined,
+  or as pluralFormatter,
+  ur as selectPluralRule,
+  Qt as truthyKeysAsList,
+  _t as useAccessibleFontSizeContext,
+  Pt as useArraySet,
   T as useBoolean,
-  Pt as useDebounce,
-  zt as useDelayedFalse,
-  Ft as useDomId,
-  Ie as useElementDimensions,
-  Mt as useElementFocus,
-  Ot as useEventCallback,
-  b as useEventListener,
-  qt as useForwardedRef,
-  Ht as useLatest,
-  Nt as useMouseIsEntered,
-  Dt as useMouseIsOver,
-  Ut as useMultiOnClickOutside,
-  Vt as useOnClickOutside,
-  Bt as useOnNoMouseMovement,
-  jt as useOnScreen,
-  Wt as useTimeoutState,
+  zt as useDebounce,
+  Ft as useDelayedFalse,
+  Mt as useDomId,
+  Ue as useElementDimensions,
+  Ot as useElementFocus,
+  Ht as useEventCallback,
+  w as useEventListener,
+  Wt as useForwardedRef,
+  Dt as useLatest,
+  Ut as useMouseIsEntered,
+  Nt as useMouseIsOver,
+  Vt as useMultiOnClickOutside,
+  Bt as useOnClickOutside,
+  jt as useOnNoMouseMovement,
+  qt as useOnScreen,
+  Gt as useTimeoutState,
   Xt as useToday
 };
 //# sourceMappingURL=index.es.js.map