@stenajs-webui/core 23.21.16 → 23.22.0

package/dist/index.es.js

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