@stenajs-webui/core 21.41.0 → 21.42.0

package/dist/index.es.js

@@ -1,34 +1,34 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._separatorLine_nzfcz_1{display:flex;border:0;margin:0;flex:none}._visuallyHidden_1gevf_1{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}._text_1iisw_1{--swui-text-color: var(--swui-text-primary-color);--swui-text-color-caption: var(--lhds-color-ui-600);--swui-text-color-overline: var(--lhds-color-ui-600);--swui-text-font-family: var(--swui-font-primary);--swui-text-font-weight: var(--swui-font-weight-text);--current-color: var(--swui-text-color);--current-font-size: var(--swui-font-size-medium);--current-line-height: var(--swui-line-height-medium);--current-font-weight: var(--swui-text-font-weight);--current-letter-spacing: var(--swui-text-letter-spacing);font-size:var(--current-font-size);line-height:var(--current-line-height);color:var(--current-color);letter-spacing:var(--current-letter-spacing);font-family:var(--swui-text-font-family);font-weight:var(--current-font-weight)}._text_1iisw_1._bold_1iisw_27{--current-font-weight: var(--swui-font-weight-text-bold)}._text_1iisw_1._caption_1iisw_31{--current-font-size: var(--swui-font-size-small);--current-line-height: var(--swui-line-height-small);--current-color: var(--swui-text-color-caption);--current-letter-spacing: 0;font-style:italic}._text_1iisw_1._overline_1iisw_39{--current-font-size: var(--swui-font-size-smaller);--current-line-height: var(--swui-line-height-smaller);--current-color: var(--swui-text-color-overline);--current-font-weight: var(--swui-font-weight-text-bold);--current-letter-spacing: .1rem;text-transform:uppercase}._text_1iisw_1._large_1iisw_48{--current-font-size: var(--swui-font-size-large);--current-line-height: var(--swui-line-height-large)}._text_1iisw_1._medium_1iisw_53{--current-font-size: var(--swui-font-size-medium);--current-line-height: var(--swui-line-height-medium)}._text_1iisw_1._small_1iisw_58{--current-font-size: var(--swui-font-size-small);--current-line-height: var(--swui-line-height-small)}._text_1iisw_1._smaller_1iisw_63{--current-font-size: var(--swui-font-size-smaller);--current-line-height: var(--swui-line-height-smaller)}._heading_1cnsg_1{font-size:2rem;color:var(--swui-text-primary-color);letter-spacing:0;margin:0;line-height:var(--swui-line-height);font-family:var(--swui-font-primary);font-weight:var(--swui-font-weight-text-bold)}._heading_1cnsg_1._h1_1cnsg_10{font-size:2.8rem}._heading_1cnsg_1._h2_1cnsg_14{font-size:2.4rem}._heading_1cnsg_1._h3_1cnsg_18{font-size:2rem}._heading_1cnsg_1._h4_1cnsg_22{font-size:1.8rem}._heading_1cnsg_1._h5_1cnsg_26{font-size:1.6rem}._heading_1cnsg_1._h6_1cnsg_30{font-size:1.4rem}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
-import { cssColor as D } from "@stenajs-webui/theme";
-import { jsx as a, Fragment as T } from "react/jsx-runtime";
-import H, { forwardRef as h, useState as y, useCallback as m, useLayoutEffect as M, useRef as g, useEffect as d, useMemo as O } from "react";
-import S from "@emotion/styled";
-import { system as z, background as F, border as N, borderRight as U, borderLeft as V, borderTop as q, borderBottom as j, borderColor as B, borderRadius as W, borderStyle as X, borderWidth as G, boxShadow as Y, flexbox as K, overflow as Z, position as J, layout as Q, zIndex as ee, left as te, right as re, top as ue, bottom as ne } from "styled-system";
-import { memoize as oe, pickBy as se, debounce as ie } from "lodash-es";
+import { cssColor as H } from "@stenajs-webui/theme";
+import { jsx as l, Fragment as T, jsxs as D } from "react/jsx-runtime";
+import N, { forwardRef as f, useState as h, useCallback as m, useLayoutEffect as O, useRef as g, createContext as U, useEffect as p, useMemo as S, useContext as V } from "react";
+import C from "@emotion/styled";
+import { system as j, background as q, border as B, borderRight as W, borderLeft as X, borderTop as G, borderBottom as Y, borderColor as K, borderRadius as Z, borderStyle as J, borderWidth as Q, boxShadow as ee, flexbox as te, overflow as re, position as ne, layout as ue, zIndex as oe, left as se, right as ie, top as ae, bottom as ce } from "styled-system";
+import { memoize as le, pickBy as de, debounce as pe } from "lodash-es";
 import A from "classnames";
-const ae = "_separatorLine_nzfcz_1", ce = {
-  separatorLine: ae
-}, rt = h(
+const me = "_separatorLine_nzfcz_1", he = {
+  separatorLine: me
+}, it = f(
   ({
-    color: e = D("--lhds-color-ui-300"),
+    color: e = H("--lhds-color-ui-300"),
     size: t = "100%",
     width: r = "1px",
-    vertical: u = !1
-  }, n) => /* @__PURE__ */ a(
+    vertical: n = !1
+  }, u) => /* @__PURE__ */ l(
     "hr",
     {
-      className: ce.separatorLine,
+      className: he.separatorLine,
       "aria-hidden": !0,
       color: e,
       style: {
         backgroundColor: e,
-        height: u ? t || "100%" : r || "1px",
-        width: u ? r || "1px" : t || "100%"
+        height: n ? t || "100%" : r || "1px",
+        width: n ? r || "1px" : t || "100%"
       },
-      ref: n
+      ref: u
     }
   )
-), le = S.button`
+), fe = C.button`
   display: inline-block;
   user-select: none;
   border: 0;
@@ -51,46 +51,46 @@ const ae = "_separatorLine_nzfcz_1", ce = {
   ${({ width: e }) => e ? `width: ${e};` : ""}
   ${({ height: e }) => e ? `height: ${e};` : ""}
   ${({ borderRadius: e }) => e ? `border-radius: ${e};` : ""}
-`, ut = h(
+`, at = f(
   ({
     disableFocusHighlight: e,
     onClick: t,
     onDblClick: r,
-    tooltip: u,
-    disableOpacityOnClick: n,
+    tooltip: n,
+    disableOpacityOnClick: u,
     disablePointer: o,
     opacityOnHover: s,
-    disabled: c,
+    disabled: a,
     children: i,
-    background: l = "transparent",
-    hoverBackground: p,
-    focusBackground: f,
+    background: c = "transparent",
+    hoverBackground: d,
+    focusBackground: b,
     type: k = "button",
     ..._
-  }, P) => /* @__PURE__ */ a(
-    le,
+  }, P) => /* @__PURE__ */ l(
+    fe,
     {
       opacityOnHover: s,
-      title: u,
-      disabled: c,
-      disableOpacityOnClick: n,
+      title: n,
+      disabled: a,
+      disableOpacityOnClick: u,
       onClick: t,
       onDoubleClick: r,
       disableFocusHighlight: e,
       pointer: !!(t || r) && !o,
       ref: P,
-      background: l,
-      hoverBackground: p,
-      focusBackground: f,
+      background: c,
+      hoverBackground: d,
+      focusBackground: b,
       type: k,
       ..._,
       children: i
     }
   )
-), x = (e) => e == null ? 0 : typeof e == "boolean" ? e ? 1 : 0 : e, de = (e) => {
+), x = (e) => e == null ? 0 : typeof e == "boolean" ? e ? 1 : 0 : e, ge = (e) => {
   if (e !== 0)
     return `calc(${e} * var(--swui-metrics-space))`;
-}, C = (e) => de(x(e)), pe = {
+}, I = (e) => ge(x(e)), be = {
   // react props
   // https://github.com/facebook/react/blob/5495a7f24aef85ba6937truetrue1ce962673ca9f5fde6/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js
   children: !0,
@@ -577,16 +577,16 @@ const ae = "_separatorLine_nzfcz_1", ce = {
   for: !0,
   class: !0,
   autofocus: !0
-}, me = `^((${Object.keys(pe).join(
+}, ve = `^((${Object.keys(be).join(
   "|"
-)})|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$`, he = new RegExp(me), ge = oe(
-  (e) => he.test(e) || e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && e.charCodeAt(2) < 91
-), fe = {
+)})|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$`, ye = new RegExp(ve), we = le(
+  (e) => ye.test(e) || e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && e.charCodeAt(2) < 91
+), xe = {
   box: "var(--swui-shadow-box)",
   popover: "var(--swui-shadow-popover)",
   modal: "var(--swui-shadow-modal)",
   bottom: "var(--swui-shadow-bottom)"
-}, ye = [
+}, ke = [
   "spacing",
   "indent",
   "gap",
@@ -594,7 +594,7 @@ const ae = "_separatorLine_nzfcz_1", ce = {
   "height",
   "overflow",
   "display"
-], ve = (e) => ye.includes(e), be = z({
+], _e = (e) => ke.includes(e), $e = j({
   row: {
     property: "flexDirection",
     transform: (e) => e ? "row" : "column"
@@ -616,18 +616,18 @@ const ae = "_separatorLine_nzfcz_1", ce = {
   },
   columnGap: {
     property: "columnGap",
-    transform: C
+    transform: I
   },
   rowGap: {
     property: "rowGap",
-    transform: C
+    transform: I
   },
   shadow: {
     property: "boxShadow",
-    transform: (e) => fe[e] ?? e
+    transform: (e) => xe[e] ?? e
   }
-}), b = S("div", {
-  shouldForwardProp: (e) => typeof e == "string" ? ve(e) ? !1 : ge(e) : !1
+}), y = C("div", {
+  shouldForwardProp: (e) => typeof e == "string" ? _e(e) ? !1 : we(e) : !1
 })`
   --current-spacing: 0;
   --current-indent: 0;
@@ -635,13 +635,8 @@ const ae = "_separatorLine_nzfcz_1", ce = {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  ${be};
-  ${F};
-  ${N};
-  ${U};
-  ${V};
+  ${$e};
   ${q};
-  ${j};
   ${B};
   ${W};
   ${X};
@@ -654,8 +649,13 @@ const ae = "_separatorLine_nzfcz_1", ce = {
   ${ee};
   ${te};
   ${re};
-  ${ue};
   ${ne};
+  ${ue};
+  ${oe};
+  ${se};
+  ${ie};
+  ${ae};
+  ${ce};
 
   gap: calc(var(--current-gap) * var(--swui-metrics-space));
 
@@ -676,232 +676,277 @@ const ae = "_separatorLine_nzfcz_1", ce = {
     ${({ focusWithinBackground: e }) => e ? `background: ${e};` : ""}
     ${({ focusWithinBorder: e }) => e ? `border: ${e};` : ""}
   }
-`, nt = h(
+`, ct = f(
   function(t, r) {
-    return /* @__PURE__ */ a(b, { ref: r, ...t });
+    return /* @__PURE__ */ l(y, { ref: r, ...t });
   }
-), we = (e) => {
-  const { x: t, y: r, width: u, height: n, bottom: o, top: s, left: c, right: i } = e.getBoundingClientRect();
+), Se = (e) => {
+  const { x: t, y: r, width: n, height: u, bottom: o, top: s, left: a, right: i } = e.getBoundingClientRect();
   return {
-    width: u,
-    height: n,
+    width: n,
+    height: u,
     top: s,
-    left: c,
+    left: a,
     x: t,
     y: r,
     right: i,
     bottom: o
   };
-}, xe = (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, ke = (e, t) => {
-  const [r, u] = y(), n = m(() => {
+}, Ce = (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, Ee = (e, t) => {
+  const [r, n] = h(), u = m(() => {
     window.requestAnimationFrame(() => {
       if (e.current) {
-        const o = we(e.current);
-        (!r || !xe(r, o)) && t && t(o), u(o);
+        const o = Se(e.current);
+        (!r || !Ce(r, o)) && t && t(o), n(o);
       }
     });
-  }, [e, r, u, t]);
-  return M(() => {
-    n();
-  }, [n]), {
+  }, [e, r, n, t]);
+  return O(() => {
+    u();
+  }, [u]), {
     dimensions: r
   };
-}, ot = h(
-  function({ onResize: t, ...r }, u) {
-    const n = g(null);
-    return ke(u ?? n, t), /* @__PURE__ */ a(b, { ...r, ref: u });
+}, lt = f(
+  function({ onResize: t, ...r }, n) {
+    const u = g(null);
+    return Ee(n ?? u, t), /* @__PURE__ */ l(y, { ...r, ref: n });
   }
-), st = h(
+), dt = f(
   function(t, r) {
-    return /* @__PURE__ */ a(b, { row: !0, ref: r, ...t });
+    return /* @__PURE__ */ l(y, { row: !0, ref: r, ...t });
   }
-), it = h(function({ num: t = 1, ...r }, u) {
-  return /* @__PURE__ */ a(b, { indent: t, ref: u, ...r });
-}), at = h(
-  function({ num: t = 1, ...r }, u) {
-    return /* @__PURE__ */ a(b, { spacing: t, ref: u, ...r });
+), pt = f(function({ num: t = 1, ...r }, n) {
+  return /* @__PURE__ */ l(y, { indent: t, ref: n, ...r });
+}), mt = f(
+  function({ num: t = 1, ...r }, n) {
+    return /* @__PURE__ */ l(y, { spacing: t, ref: n, ...r });
   }
-), _e = S.div`
+), Te = 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));
-`, ct = ({
+`, ht = ({
   half: e = !1,
   horizontal: t = !1,
   num: r = 1,
-  vertical: u = !1
+  vertical: n = !1
 }) => {
-  const n = r * (e ? 0.5 : 1);
-  return /* @__PURE__ */ a(
-    _e,
+  const u = r * (e ? 0.5 : 1);
+  return /* @__PURE__ */ l(
+    Te,
     {
       style: {
-        "--current-size": n,
+        "--current-size": u,
         height: t ? 1 : void 0,
-        width: u ? 1 : void 0
+        width: n ? 1 : void 0
       }
     }
   );
-}, lt = ({ children: e, nest: t, render: r }) => t ? /* @__PURE__ */ a(T, { children: r(e) }) : /* @__PURE__ */ a(T, { children: e }), $e = "_visuallyHidden_1gevf_1", Se = {
-  visuallyHidden: $e
-}, Ee = (e) => se(e, Te), Te = (e, t) => Ce(t), Ce = (e) => e.startsWith("data-") || e.startsWith("aria-"), dt = ({
+}, ft = ({ children: e, nest: t, render: r }) => t ? /* @__PURE__ */ l(T, { children: r(e) }) : /* @__PURE__ */ l(T, { children: e }), F = U({
+  isFontLarge: !1,
+  fontSizeRatio: 1
+}), R = 12, gt = ({ children: e }) => {
+  const t = g(null), [r, n] = h(!1), [u, o] = h(1);
+  p(() => {
+    if (!t.current)
+      return;
+    const a = new ResizeObserver((i) => {
+      for (const c of i) {
+        const d = c.contentRect.height;
+        n(d > R), o(d / R);
+      }
+    });
+    return a.observe(t.current), () => a.disconnect();
+  }, []);
+  const s = S(
+    () => ({ isFontLarge: r, fontSizeRatio: u }),
+    [u, r]
+  );
+  return /* @__PURE__ */ D(F.Provider, { value: s, children: [
+    /* @__PURE__ */ l(
+      "div",
+      {
+        ref: t,
+        "aria-hidden": !0,
+        style: {
+          fontSize: "1rem",
+          position: "absolute",
+          visibility: "hidden",
+          height: "auto",
+          width: "auto",
+          whiteSpace: "nowrap"
+        },
+        children: "M"
+      }
+    ),
+    e
+  ] });
+}, bt = () => {
+  const e = V(F);
+  return e || {
+    isFontLarge: !1,
+    fontSizeRatio: 1
+  };
+}, Ie = "_visuallyHidden_1gevf_1", Re = {
+  visuallyHidden: Ie
+}, Le = (e) => de(e, ze), ze = (e, t) => Me(t), Me = (e) => e.startsWith("data-") || e.startsWith("aria-"), vt = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ a("span", { className: Se.visuallyHidden, ...Ee(t), children: e }), Ie = "_text_1iisw_1", Re = "_standard_1iisw_24", Le = "_bold_1iisw_27", Me = "_caption_1iisw_31", Oe = "_overline_1iisw_39", Ae = "_large_1iisw_48", Pe = "_medium_1iisw_53", De = "_small_1iisw_58", He = "_smaller_1iisw_63", $ = {
-  text: Ie,
-  standard: Re,
-  bold: Le,
-  caption: Me,
-  overline: Oe,
-  large: Ae,
-  medium: Pe,
-  small: De,
-  smaller: He
-}, w = h(
+}) => /* @__PURE__ */ l("span", { className: Re.visuallyHidden, ...Le(t), children: e }), Oe = "_text_1iisw_1", Ae = "_standard_1iisw_24", Fe = "_bold_1iisw_27", Pe = "_caption_1iisw_31", He = "_overline_1iisw_39", De = "_large_1iisw_48", Ne = "_medium_1iisw_53", Ue = "_small_1iisw_58", Ve = "_smaller_1iisw_63", $ = {
+  text: Oe,
+  standard: Ae,
+  bold: Fe,
+  caption: Pe,
+  overline: He,
+  large: De,
+  medium: Ne,
+  small: Ue,
+  smaller: Ve
+}, w = f(
   ({
     children: e,
     variant: t = "standard",
     size: r = "medium",
-    className: u,
-    color: n,
+    className: n,
+    color: u,
     userSelect: o,
     whiteSpace: s,
-    wordBreak: c,
+    wordBreak: a,
     textAlign: i,
-    overflow: l,
-    textOverflow: p,
-    style: f,
+    overflow: c,
+    textOverflow: d,
+    style: b,
     ...k
-  }, _) => /* @__PURE__ */ a(
+  }, _) => /* @__PURE__ */ l(
     "span",
     {
-      className: A($.text, $[t], $[r], u),
+      className: A($.text, $[t], $[r], n),
       ref: _,
       style: {
-        color: n,
+        color: u,
         userSelect: o,
         whiteSpace: s,
-        wordBreak: c,
+        wordBreak: a,
         textAlign: i,
-        overflow: l,
-        textOverflow: p,
-        ...f
+        overflow: c,
+        textOverflow: d,
+        ...b
       },
       ...k,
       children: e
     }
   )
-), pt = w, mt = (e) => /* @__PURE__ */ a(w, { size: "small", ...e }), ht = (e) => /* @__PURE__ */ a(w, { size: "smaller", ...e }), gt = (e) => /* @__PURE__ */ a(w, { size: "medium", ...e }), ft = (e) => /* @__PURE__ */ a(w, { size: "large", ...e }), ze = "_heading_1cnsg_1", Fe = "_h1_1cnsg_10", Ne = "_h2_1cnsg_14", Ue = "_h3_1cnsg_18", Ve = "_h4_1cnsg_22", qe = "_h5_1cnsg_26", je = "_h6_1cnsg_30", I = {
-  heading: ze,
-  h1: Fe,
-  h2: Ne,
-  h3: Ue,
-  h4: Ve,
-  h5: qe,
-  h6: je
-}, Be = h(
+), yt = w, wt = (e) => /* @__PURE__ */ l(w, { size: "small", ...e }), xt = (e) => /* @__PURE__ */ l(w, { size: "smaller", ...e }), kt = (e) => /* @__PURE__ */ l(w, { size: "medium", ...e }), _t = (e) => /* @__PURE__ */ l(w, { size: "large", ...e }), je = "_heading_1cnsg_1", qe = "_h1_1cnsg_10", Be = "_h2_1cnsg_14", We = "_h3_1cnsg_18", Xe = "_h4_1cnsg_22", Ge = "_h5_1cnsg_26", Ye = "_h6_1cnsg_30", L = {
+  heading: je,
+  h1: qe,
+  h2: Be,
+  h3: We,
+  h4: Xe,
+  h5: Ge,
+  h6: Ye
+}, Ke = f(
   ({
     variant: e = "h3",
     className: t,
     color: r,
-    whiteSpace: u,
-    wordBreak: n,
+    whiteSpace: n,
+    wordBreak: u,
     style: o,
     children: s,
-    as: c,
+    as: a,
     ...i
-  }, l) => /* @__PURE__ */ a(
-    c ?? e,
+  }, c) => /* @__PURE__ */ l(
+    a ?? e,
     {
-      className: A(I.heading, I[e], t),
-      style: { color: r, whiteSpace: u, wordBreak: n, ...o },
-      ref: l,
+      className: A(L.heading, L[e], t),
+      style: { color: r, whiteSpace: n, wordBreak: u, ...o },
+      ref: c,
       ...i,
       children: s
     }
   )
-), yt = (e) => /* @__PURE__ */ a(Be, { variant: "h2", ...e }), We = (e, t) => e === t, vt = (e, t, r = We) => {
-  const u = m(
+), $t = (e) => /* @__PURE__ */ l(Ke, { variant: "h2", ...e }), Ze = (e, t) => e === t, St = (e, t, r = Ze) => {
+  const n = m(
     (i) => {
-      e.some((l) => r(l, i)) || t([...e, i]);
+      e.some((c) => r(c, i)) || t([...e, i]);
     },
     [e, t, r]
-  ), n = m(
+  ), u = m(
     (i) => {
       t(
-        i.reduce((l, p) => l.some((f) => r(f, p)) ? l : [...l, p], e)
+        i.reduce((c, d) => c.some((b) => r(b, d)) ? c : [...c, d], e)
       );
     },
     [e, t, r]
   ), o = m(
     (i) => {
-      const l = e.findIndex((p) => r(p, i));
-      l >= 0 && t(e.filter((p, f) => f !== l));
+      const c = e.findIndex((d) => r(d, i));
+      c >= 0 && t(e.filter((d, b) => b !== c));
     },
     [e, t, r]
   ), s = m(
     (i) => {
-      t(e.filter((l) => !i.some((p) => r(p, l))));
+      t(e.filter((c) => !i.some((d) => r(d, c))));
     },
     [e, t, r]
-  ), c = m(
+  ), a = m(
     (i) => {
-      e.some((p) => r(p, i)) ? o(i) : u(i);
+      e.some((d) => r(d, i)) ? o(i) : n(i);
     },
-    [e, u, o, r]
+    [e, n, o, r]
   );
   return {
-    add: u,
-    addMultiple: n,
+    add: n,
+    addMultiple: u,
     remove: o,
     removeMultiple: s,
-    toggle: c
+    toggle: a
   };
 }, E = (e) => {
-  const [t, r] = y(e), u = m(() => {
+  const [t, r] = h(e), n = m(() => {
     r(!0);
-  }, [r]), n = m(() => {
+  }, [r]), u = m(() => {
     r(!1);
   }, [r]), o = m(() => {
     r((s) => !s);
   }, [r]);
-  return [t, u, n, o];
-}, bt = (e, t) => {
-  const [r, u] = y(e);
-  return d(() => {
-    const n = setTimeout(() => {
-      u(e);
+  return [t, n, u, o];
+}, Ct = (e, t) => {
+  const [r, n] = h(e);
+  return p(() => {
+    const u = setTimeout(() => {
+      n(e);
     }, t);
     return () => {
-      clearTimeout(n);
+      clearTimeout(u);
     };
   }, [e, t]), r;
-}, wt = (e, t) => {
-  const [r, u] = y(e);
-  return d(() => {
-    e && u(!0);
-    const n = setTimeout(() => {
-      e || u(e);
+}, Et = (e, t) => {
+  const [r, n] = h(e);
+  return p(() => {
+    e && n(!0);
+    const u = setTimeout(() => {
+      e || n(e);
     }, t);
     return () => {
-      clearTimeout(n);
+      clearTimeout(u);
     };
   }, [e, t]), r;
 };
-let Xe = 0;
-const R = (e) => `webui-${e ? e + "-" : ""}${++Xe}`, xt = (e) => {
-  const [t, r] = y(() => R(e));
-  return d(() => r(R(e)), [e]), t;
+let Je = 0;
+const z = (e) => `webui-${e ? e + "-" : ""}${++Je}`, Tt = (e) => {
+  const [t, r] = h(() => z(e));
+  return p(() => r(z(e)), [e]), t;
 }, v = (e, t, r) => {
-  const u = g(null);
-  d(() => {
-    u.current = r;
-  }, [r]), d(() => {
+  const n = g(null);
+  p(() => {
+    n.current = r;
+  }, [r]), p(() => {
     if (!(e.current && e.current.addEventListener)) return;
-    const o = (c) => {
-      if (u.current)
-        return u.current(c);
+    const o = (a) => {
+      if (n.current)
+        return n.current(a);
     };
     if (!e.current)
       return;
@@ -910,168 +955,171 @@ const R = (e) => `webui-${e ? e + "-" : ""}${++Xe}`, xt = (e) => {
       s && s.removeEventListener(t, o);
     };
   }, [t, e]);
-}, kt = (e) => {
-  const [t, r, u] = E(!1);
-  d(() => {
-    document.activeElement === e.current ? r() : u();
-  }, [e, u, r]), v(e, "focus", r), v(e, "blur", u);
-  const n = m(() => {
+}, It = (e) => {
+  const [t, r, n] = E(!1);
+  p(() => {
+    document.activeElement === e.current ? r() : n();
+  }, [e, n, r]), v(e, "focus", r), v(e, "blur", n);
+  const u = m(() => {
     e.current && e.current.focus();
   }, [e]), o = m(() => {
     e.current && e.current.blur();
   }, [e]);
-  return { isInFocus: t, focus: n, blur: o };
-}, _t = (e) => {
+  return { isInFocus: t, focus: u, blur: o };
+}, Rt = (e) => {
   const t = g(e);
-  return M(() => {
+  return O(() => {
     t.current = e;
   }), m((...r) => {
-    const { current: u } = t;
-    return u(...r);
+    const { current: n } = t;
+    return n(...r);
   }, []);
-}, $t = (e) => {
-  const t = H.useRef(e);
+}, Lt = (e) => {
+  const t = N.useRef(e);
   return t.current = e, t;
-}, St = (e) => {
-  const [t, r, u] = E(!1);
-  return v(e, "mouseover", r), v(e, "mouseout", u), t;
-}, Et = (e) => {
-  const [t, r, u] = E(!1);
-  return v(e, "mouseenter", r), v(e, "mouseleave", u), t;
-}, Tt = (e, t) => {
+}, zt = (e) => {
+  const [t, r, n] = E(!1);
+  return v(e, "mouseover", r), v(e, "mouseout", n), t;
+}, Mt = (e) => {
+  const [t, r, n] = E(!1);
+  return v(e, "mouseenter", r), v(e, "mouseleave", n), t;
+}, Ot = (e, t) => {
   const r = g(() => {
   });
-  d(() => {
+  p(() => {
     r.current = t;
-  }, [t]), d(() => {
-    const u = (n) => {
-      e.filter((s) => s.current).every((s) => s.current && !s.current.contains(n.target)) && r.current(n);
+  }, [t]), p(() => {
+    const n = (u) => {
+      e.filter((s) => s.current).every((s) => s.current && !s.current.contains(u.target)) && r.current(u);
     };
-    return document.addEventListener("mousedown", u), document.addEventListener("touchstart", u), () => {
-      document.removeEventListener("mousedown", u), document.removeEventListener("touchstart", u);
+    return document.addEventListener("mousedown", n), document.addEventListener("touchstart", n), () => {
+      document.removeEventListener("mousedown", n), document.removeEventListener("touchstart", n);
     };
   }, [...e]);
-}, Ct = (e, t, r) => {
-  const u = g(() => {
+}, At = (e, t, r) => {
+  const n = g(() => {
   });
-  d(() => {
-    u.current = t;
-  }, [t]), d(() => {
-    const n = (o) => {
-      !e.current || e.current.contains(o.target) || u.current(o);
+  p(() => {
+    n.current = t;
+  }, [t]), p(() => {
+    const u = (o) => {
+      !e.current || e.current.contains(o.target) || n.current(o);
     };
-    return document.addEventListener("mousedown", n, r), document.addEventListener("touchstart", n, r), () => {
-      document.removeEventListener("mousedown", n, r), document.removeEventListener("touchstart", n, r);
+    return document.addEventListener("mousedown", u, r), document.addEventListener("touchstart", u, r), () => {
+      document.removeEventListener("mousedown", u, r), document.removeEventListener("touchstart", u, r);
     };
   }, [e, r]);
-}, L = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"], It = (e, t) => {
+}, M = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"], Ft = (e, t) => {
   const r = g(() => {
   });
-  d(() => {
+  p(() => {
     r.current = e;
-  }, [e]), d(() => {
-    const u = ie(r.current, t);
-    return L.forEach((n) => window.addEventListener(n, u)), () => {
-      L.forEach(
-        (n) => window.removeEventListener(n, u)
+  }, [e]), p(() => {
+    const n = pe(r.current, t);
+    return M.forEach((u) => window.addEventListener(u, n)), () => {
+      M.forEach(
+        (u) => window.removeEventListener(u, n)
       );
     };
   }, [t]);
-}, Rt = (e, t) => {
-  const [r, u] = y(!1), { rootMargin: n, root: o, threshold: s } = t || {}, c = O(() => new IntersectionObserver(
-    ([i]) => u(i.isIntersecting),
+}, Pt = (e, t) => {
+  const [r, n] = h(!1), { rootMargin: u, root: o, threshold: s } = t || {}, a = S(() => new IntersectionObserver(
+    ([i]) => n(i.isIntersecting),
     {
-      rootMargin: n,
+      rootMargin: u,
       root: o,
       threshold: s
     }
-  ), [u, n, o, s]);
-  return d(() => (e.current && c.observe(e.current), () => {
-    c.disconnect();
-  }), [c, e]), r;
-}, Lt = (e) => {
+  ), [n, u, o, s]);
+  return p(() => (e.current && a.observe(e.current), () => {
+    a.disconnect();
+  }), [a, e]), r;
+}, Ht = (e) => {
   const t = g(null);
-  return d(() => {
+  return p(() => {
     e && (typeof e == "function" ? e(t.current) : e.current = t.current);
   }), t;
-}, Mt = (e, t, r = !0) => {
-  const [u, n] = y(e), o = g(null), s = m(
-    (c, i = t) => {
-      n(c), r && clearTimeout(o.current), o.current = setTimeout(() => n(e), i);
+}, Dt = (e, t, r = !0) => {
+  const [n, u] = h(e), o = g(null), s = m(
+    (a, i = t) => {
+      u(a), r && clearTimeout(o.current), o.current = setTimeout(() => u(e), i);
     },
     [t, r, e]
   );
-  return d(() => () => {
+  return p(() => () => {
     clearTimeout(o.current);
-  }, []), [u, s];
-}, Ot = () => O(() => /* @__PURE__ */ new Date(), []), At = (e) => (t, r) => e(t).localeCompare(e(r)), Pt = (e) => (t, r) => e(t) - e(r), Dt = (e) => {
+  }, []), [n, s];
+}, Nt = () => S(() => /* @__PURE__ */ new Date(), []), Ut = (e) => (t, r) => e(t).localeCompare(e(r)), Vt = (e) => (t, r) => e(t) - e(r), jt = (e) => {
   throw new Error(`Switch unhandled case: ${e}`);
-}, Ht = (e, t) => t, zt = (e) => Object.keys(e).filter((t) => e[t]), Ft = (e) => {
+}, qt = (e, t) => t, Bt = (e) => Object.keys(e).filter((t) => e[t]), Wt = (e) => {
   try {
     const t = parseFloat(e);
     return isNaN(t) || t == null ? void 0 : t;
   } catch {
   }
-}, Nt = (e) => {
+}, Xt = (e) => {
   try {
     const t = parseInt(e, 10);
     return isNaN(t) || t == null ? void 0 : t;
   } catch {
   }
 };
-function Ut(e, t) {
+function Gt(e, t) {
   if (e == null)
     throw new Error("Invariant error: " + t);
 }
 export {
-  b as Box,
-  ut as Clickable,
-  nt as Column,
-  yt as HeaderText,
-  Be as Heading,
-  it as Indent,
-  ft as LargeText,
-  lt as Nest,
-  ot as ResizeAwareBox,
-  st as Row,
-  dt as ScreenReaderOnlyText,
-  rt as SeparatorLine,
-  mt as SmallText,
-  ht as SmallerText,
-  ct as Space,
-  at as Spacing,
-  gt as StandardText,
+  F as AccessibleFontSizeContext,
+  gt as AccessibleFontSizeProvider,
+  y as Box,
+  at as Clickable,
+  ct as Column,
+  $t as HeaderText,
+  Ke as Heading,
+  pt as Indent,
+  _t as LargeText,
+  ft as Nest,
+  lt as ResizeAwareBox,
+  dt as Row,
+  vt as ScreenReaderOnlyText,
+  it as SeparatorLine,
+  wt as SmallText,
+  xt as SmallerText,
+  ht as Space,
+  mt as Spacing,
+  kt as StandardText,
   w as Text,
-  pt as Txt,
+  yt as Txt,
   x as booleanOrNumberToNumber,
-  Pt as byNumberField,
-  At as byStringField,
-  Ht as exhaustSwitchCase,
-  Dt as exhaustSwitchCaseElseThrow,
-  Ee as getDataProps,
-  we as getDimensionObject,
-  Ut as invariant,
-  Ft as parseFloatElseUndefined,
-  Nt as parseIntElseUndefined,
-  zt as truthyKeysAsList,
-  vt as useArraySet,
+  Vt as byNumberField,
+  Ut as byStringField,
+  qt as exhaustSwitchCase,
+  jt as exhaustSwitchCaseElseThrow,
+  Le as getDataProps,
+  Se as getDimensionObject,
+  Gt as invariant,
+  Wt as parseFloatElseUndefined,
+  Xt as parseIntElseUndefined,
+  Bt as truthyKeysAsList,
+  bt as useAccessibleFontSizeContext,
+  St as useArraySet,
   E as useBoolean,
-  bt as useDebounce,
-  wt as useDelayedFalse,
-  xt as useDomId,
-  ke as useElementDimensions,
-  kt as useElementFocus,
-  _t as useEventCallback,
+  Ct as useDebounce,
+  Et as useDelayedFalse,
+  Tt as useDomId,
+  Ee as useElementDimensions,
+  It as useElementFocus,
+  Rt as useEventCallback,
   v as useEventListener,
-  Lt as useForwardedRef,
-  $t as useLatest,
-  Et as useMouseIsEntered,
-  St as useMouseIsOver,
-  Tt as useMultiOnClickOutside,
-  Ct as useOnClickOutside,
-  It as useOnNoMouseMovement,
-  Rt as useOnScreen,
-  Mt as useTimeoutState,
-  Ot as useToday
+  Ht as useForwardedRef,
+  Lt as useLatest,
+  Mt as useMouseIsEntered,
+  zt as useMouseIsOver,
+  Ot as useMultiOnClickOutside,
+  At as useOnClickOutside,
+  Ft as useOnNoMouseMovement,
+  Pt as useOnScreen,
+  Dt as useTimeoutState,
+  Nt as useToday
 };
 //# sourceMappingURL=index.es.js.map