@stenajs-webui/core 19.0.0-next.3 → 19.0.0-next.30

package/dist/index.es.js

@@ -1,14 +1,14 @@
-(function(){"use strict";try{var e=document.createElement("style");e.appendChild(document.createTextNode("._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_1us7p_1{--swui-heading-text-color: var(--swui-text-primary-color);--swui-heading-font-family: var(--swui-font-primary);--swui-heading-font-weight: var(--swui-font-weight-text-bold);font-size:var(--swui-heading-font-size);color:var(--swui-heading-text-color);letter-spacing:0;margin:0;line-height:var(--swui-heading-line-height);font-family:var(--swui-heading-font-family);font-weight:var(--swui-heading-font-weight)}._heading_1us7p_1._h1_1us7p_14{--swui-heading-font-size: 2.8rem;--swui-heading-line-height: 4rem}._heading_1us7p_1._h2_1us7p_19{--swui-heading-font-size: 2.4rem;--swui-heading-line-height: 3.2rem}._heading_1us7p_1._h3_1us7p_24{--swui-heading-font-size: 2rem;--swui-heading-line-height: 2.4rem}._heading_1us7p_1._h4_1us7p_29{--swui-heading-font-size: 1.8rem;--swui-heading-line-height: 2.4rem}._heading_1us7p_1._h5_1us7p_34{--swui-heading-font-size: 1.6rem;--swui-heading-line-height: 1.6rem}._heading_1us7p_1._h6_1us7p_39{--swui-heading-font-size: 1.4rem;--swui-heading-line-height: 1.6rem}")),document.head.appendChild(e)}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
-import "@stenajs-webui/theme";
-import _ from "@emotion/styled";
-import { forwardRef as p, useState as f, useCallback as h, useLayoutEffect as L, useRef as w, useEffect as m, useMemo as z } from "react";
+(function(){"use strict";try{var i=document.createElement("style");i.appendChild(document.createTextNode("._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_xn9xj_1{--swui-heading-text-color: var(--swui-text-primary-color);--swui-heading-font-family: var(--swui-font-primary);--swui-heading-font-weight: var(--swui-font-weight-text-bold);--swui-heading-line-height: var(--swui-line-height);font-size:var(--swui-heading-font-size);color:var(--swui-heading-text-color);letter-spacing:0;margin:0;line-height:var(--swui-heading-line-height);font-family:var(--swui-heading-font-family);font-weight:var(--swui-heading-font-weight)}._heading_xn9xj_1._h1_xn9xj_15{--swui-heading-font-size: 2.8rem}._heading_xn9xj_1._h2_xn9xj_19{--swui-heading-font-size: 2.4rem}._heading_xn9xj_1._h3_xn9xj_23{--swui-heading-font-size: 2rem}._heading_xn9xj_1._h4_xn9xj_27{--swui-heading-font-size: 1.8rem}._heading_xn9xj_1._h5_xn9xj_31{--swui-heading-font-size: 1.6rem}._heading_xn9xj_1._h6_xn9xj_35{--swui-heading-font-size: 1.4rem}")),document.head.appendChild(i)}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { cssColor as L } from "@stenajs-webui/theme";
 import { jsx as a, Fragment as I } from "react/jsx-runtime";
-import F from "@emotion/is-prop-valid";
-import { system as R, background as H, border as N, borderRight as P, borderLeft as V, borderTop as A, borderBottom as j, borderColor as U, borderRadius as q, borderStyle as W, borderWidth as B, boxShadow as K, flexbox as G, overflow as J, position as Q, layout as X, zIndex as Y, left as Z, right as ee, top as te, bottom as ne } from "styled-system";
+import $ from "@emotion/styled";
+import { forwardRef as f, useState as p, useCallback as h, useLayoutEffect as z, useRef as w, useEffect as m, useMemo as F } from "react";
+import R from "@emotion/is-prop-valid";
+import { system as j, background as H, border as N, borderRight as P, borderLeft as V, borderTop as A, borderBottom as U, borderColor as q, borderRadius as W, borderStyle as B, borderWidth as K, boxShadow as G, flexbox as J, overflow as Q, position as X, layout as Y, zIndex as Z, left as ee, right as te, top as ne, bottom as re } from "styled-system";
 import T from "classnames";
-import * as re from "react-dom";
-import { debounce as oe, pickBy as se } from "lodash";
-const ce = _.hr`
+import * as oe from "react-dom";
+import { debounce as se, pickBy as ce } from "lodash";
+const ue = $.hr`
   display: flex;
   border: 0;
   margin: 0;
@@ -16,119 +16,120 @@ const ce = _.hr`
   background-color: ${(e) => e.color};
   height: ${(e) => e.vertical ? e.size || "100%" : e.width || "1px"};
   width: ${(e) => e.vertical ? e.width || "1px" : e.size || "100%"};
-`, Be = p(({
-  color: e = "var(--lhds-color-ui-300)",
-  size: t = "100%",
-  width: n = "1px",
-  vertical: r = !1
-}, o) => /* @__PURE__ */ a(ce, {
-  color: e,
-  size: t,
-  width: n,
-  vertical: r,
-  ref: o
-})), ue = _.button`
+`, Ke = f(
+  ({
+    color: e = L("--lhds-color-ui-300"),
+    size: t = "100%",
+    width: n = "1px",
+    vertical: r = !1
+  }, o) => /* @__PURE__ */ a(
+    ue,
+    {
+      color: e,
+      size: t,
+      width: n,
+      vertical: r,
+      ref: o
+    }
+  )
+), ie = $.button`
   display: inline-block;
   user-select: none;
   border: 0;
   padding: 0;
-  background: ${({
-  background: e
-}) => e};
-  ${({
-  pointer: e
-}) => e ? "cursor: pointer;" : ""}
+  background: ${({ background: e }) => e};
+  ${({ pointer: e }) => e ? "cursor: pointer;" : ""}
 
   :hover {
     ${(e) => e.opacityOnHover ? "opacity: 0.7;" : ""};
-    ${({
-  hoverBackground: e
-}) => `background: ${e};`}
+    ${({ hoverBackground: e }) => `background: ${e};`}
   }
   :active {
-    ${({
-  disableOpacityOnClick: e
-}) => e ? "" : "opacity: 0.5;"}
+    ${({ 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};`}
+    ${({ 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};` : ""}
-`, Ke = p(({
-  disableFocusHighlight: e,
-  onClick: t,
-  onDblClick: n,
-  tooltip: r,
-  disableOpacityOnClick: o,
-  disablePointer: s,
-  opacityOnHover: c,
-  disabled: i,
-  children: u,
-  background: d = "transparent",
-  hoverBackground: l,
-  focusBackground: g,
-  type: M = "button",
-  ...O
-}, k) => /* @__PURE__ */ a(ue, {
-  opacityOnHover: c,
-  title: r,
-  disabled: i,
-  disableOpacityOnClick: o,
-  onClick: t,
-  onDoubleClick: n,
-  disableFocusHighlight: e,
-  pointer: !!(t || n) && !s,
-  ref: k,
-  background: d,
-  hoverBackground: l,
-  focusBackground: g,
-  type: M,
-  ...O,
-  children: u
-})), x = (e) => e == null ? 0 : typeof e == "boolean" ? e ? 1 : 0 : e, ie = {
+  ${({ width: e }) => e ? `width: ${e};` : ""}
+  ${({ height: e }) => e ? `height: ${e};` : ""}
+  ${({ borderRadius: e }) => e ? `border-radius: ${e};` : ""}
+`, Ge = f(
+  ({
+    disableFocusHighlight: e,
+    onClick: t,
+    onDblClick: n,
+    tooltip: r,
+    disableOpacityOnClick: o,
+    disablePointer: s,
+    opacityOnHover: c,
+    disabled: i,
+    children: u,
+    background: d = "transparent",
+    hoverBackground: l,
+    focusBackground: g,
+    type: M = "button",
+    ...O
+  }, k) => /* @__PURE__ */ a(
+    ie,
+    {
+      opacityOnHover: c,
+      title: r,
+      disabled: i,
+      disableOpacityOnClick: o,
+      onClick: t,
+      onDoubleClick: n,
+      disableFocusHighlight: e,
+      pointer: !!(t || n) && !s,
+      ref: k,
+      background: d,
+      hoverBackground: l,
+      focusBackground: g,
+      type: M,
+      ...O,
+      children: u
+    }
+  )
+), _ = (e) => e == null ? 0 : typeof e == "boolean" ? e ? 1 : 0 : e, de = {
   box: "var(--swui-shadow-box)",
   popover: "var(--swui-shadow-popover)",
-  modal: "var(--swui-shadow-modal)"
-}, de = ["spacing", "indent", "gap", "width", "height", "overflow", "display"], ae = (e) => de.includes(e), le = R({
+  modal: "var(--swui-shadow-modal)",
+  bottom: "var(--swui-shadow-bottom)"
+}, ae = [
+  "spacing",
+  "indent",
+  "gap",
+  "width",
+  "height",
+  "overflow",
+  "display"
+], le = (e) => ae.includes(e), me = j({
   row: {
     property: "flexDirection",
     transform: (e) => e ? "row" : "column"
   },
   indent: {
     property: "--current-indent",
-    transform: x
+    transform: _
   },
   spacing: {
     property: "--current-spacing",
-    transform: x
+    transform: _
   },
   gap: {
     property: "--current-gap",
-    transform: x
+    transform: _
   },
   shadow: {
     property: "boxShadow",
     transform: (e) => {
       var t;
-      return (t = ie[e]) != null ? t : e;
+      return (t = de[e]) != null ? t : e;
     }
   }
-}), b = _("div", {
-  shouldForwardProp: (e) => typeof e == "string" ? ae(e) ? !1 : F(e) : !1
+}), b = $("div", {
+  shouldForwardProp: (e) => typeof e == "string" ? le(e) ? !1 : R(e) : !1
 })`
   --current-spacing: 0;
   --current-indent: 0;
@@ -136,13 +137,12 @@ const ce = _.hr`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  ${le};
+  ${me};
   ${H};
   ${N};
   ${P};
   ${V};
   ${A};
-  ${j};
   ${U};
   ${q};
   ${W};
@@ -157,41 +157,27 @@ const ce = _.hr`
   ${ee};
   ${te};
   ${ne};
+  ${re};
 
   gap: calc(var(--current-gap) * var(--swui-metrics-space));
 
   padding: calc(var(--current-spacing) * var(--swui-metrics-spacing))
     calc(var(--current-indent) * var(--swui-metrics-indent));
   :hover {
-    ${({
-  hoverBackground: e
-}) => e ? `background: ${e};` : ""}
-    ${({
-  hoverBorder: e
-}) => e ? `border: ${e};` : ""}
+    ${({ hoverBackground: e }) => e ? `background: ${e};` : ""}
+    ${({ hoverBorder: e }) => e ? `border: ${e};` : ""}
   }
   :focus {
-    ${({
-  focusBackground: e
-}) => e ? `background: ${e};` : ""}
-    ${({
-  focusBorder: e
-}) => e ? `border: ${e};` : ""}
+    ${({ focusBackground: e }) => e ? `background: ${e};` : ""}
+    ${({ focusBorder: e }) => e ? `border: ${e};` : ""}
   }
   :focus-within {
-    ${({
-  focusWithinBackground: e
-}) => e ? `background: ${e};` : ""}
-    ${({
-  focusWithinBorder: e
-}) => e ? `border: ${e};` : ""}
+    ${({ focusWithinBackground: e }) => e ? `background: ${e};` : ""}
+    ${({ focusWithinBorder: e }) => e ? `border: ${e};` : ""}
   }
-`, Ge = p(function(t, n) {
-  return /* @__PURE__ */ a(b, {
-    ref: n,
-    ...t
-  });
-}), me = (e) => {
+`, Je = f(function(t, n) {
+  return /* @__PURE__ */ a(b, { ref: n, ...t });
+}), he = (e) => {
   const { x: t, y: n, width: r, height: o, bottom: s, top: c, left: i, right: u } = e.getBoundingClientRect();
   return {
     width: r,
@@ -203,161 +189,120 @@ const ce = _.hr`
     right: u,
     bottom: s
   };
-}, he = (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, pe = (e, t) => {
-  const [n, r] = f(), o = h(() => {
+}, fe = (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, pe = (e, t) => {
+  const [n, r] = p(), o = h(() => {
     window.requestAnimationFrame(() => {
       if (e.current) {
-        const s = me(e.current);
-        (!n || !he(n, s)) && t && t(s), r(s);
+        const s = he(e.current);
+        (!n || !fe(n, s)) && t && t(s), r(s);
       }
     });
   }, [e, n, r, t]);
-  return L(() => {
+  return z(() => {
     o();
   }, [o]), {
     dimensions: n
   };
-}, Je = p(function({
-  onResize: t,
-  ...n
-}, r) {
-  const o = w(null), s = r != null ? r : o;
-  return pe(s, t), /* @__PURE__ */ a(b, {
-    ...n,
-    ref: r
-  });
-}), Qe = p(function(t, n) {
-  return /* @__PURE__ */ a(b, {
-    row: !0,
-    ref: n,
-    ...t
-  });
-}), Xe = p(function({
-  num: t = 1,
-  ...n
-}, r) {
-  return /* @__PURE__ */ a(b, {
-    indent: t,
-    ref: r,
-    ...n
-  });
-}), Ye = p(function({
-  num: t = 1,
-  ...n
-}, r) {
-  return /* @__PURE__ */ a(b, {
-    spacing: t,
-    ref: r,
-    ...n
-  });
-}), fe = _.div`
+}, Qe = f(
+  function({ onResize: t, ...n }, r) {
+    const o = w(null), s = r != null ? r : o;
+    return pe(s, t), /* @__PURE__ */ a(b, { ...n, ref: r });
+  }
+), Xe = f(function(t, n) {
+  return /* @__PURE__ */ a(b, { row: !0, ref: n, ...t });
+}), Ye = f(function({ num: t = 1, ...n }, r) {
+  return /* @__PURE__ */ a(b, { indent: t, ref: r, ...n });
+}), Ze = f(
+  function({ num: t = 1, ...n }, r) {
+    return /* @__PURE__ */ a(b, { spacing: t, ref: r, ...n });
+  }
+), we = $.div`
   --current-size: 1;
   flex: none;
   width: calc(var(--current-size) * var(--swui-metrics-space));
   height: calc(var(--current-size) * var(--swui-metrics-space));
-`, Ze = ({
+`, et = ({
   half: e = !1,
   horizontal: t = !1,
   num: n = 1,
   vertical: r = !1
 }) => {
   const o = n * (e ? 0.5 : 1);
-  return /* @__PURE__ */ a(fe, {
-    style: {
-      ["--current-size"]: o,
-      height: t ? 1 : void 0,
-      width: r ? 1 : void 0
+  return /* @__PURE__ */ a(
+    we,
+    {
+      style: {
+        ["--current-size"]: o,
+        height: t ? 1 : void 0,
+        width: r ? 1 : void 0
+      }
     }
-  });
-}, et = ({
-  children: e,
-  nest: t,
-  render: n
-}) => t ? /* @__PURE__ */ a(I, {
-  children: n(e)
-}) : /* @__PURE__ */ a(I, {
-  children: e
-}), we = "_text_1iisw_1", ve = "_standard_1iisw_24", ge = "_bold_1iisw_27", be = "_caption_1iisw_31", $e = "_overline_1iisw_39", _e = "_large_1iisw_48", xe = "_medium_1iisw_53", ye = "_small_1iisw_58", Ee = "_smaller_1iisw_63", y = {
-  text: we,
-  standard: ve,
-  bold: ge,
-  caption: be,
+  );
+}, tt = ({ children: e, nest: t, render: n }) => t ? /* @__PURE__ */ a(I, { children: n(e) }) : /* @__PURE__ */ a(I, { children: e }), ve = "_text_1iisw_1", ge = "_standard_1iisw_24", be = "_bold_1iisw_27", xe = "_caption_1iisw_31", $e = "_overline_1iisw_39", _e = "_large_1iisw_48", ye = "_medium_1iisw_53", Ee = "_small_1iisw_58", Ie = "_smaller_1iisw_63", y = {
+  text: ve,
+  standard: ge,
+  bold: be,
+  caption: xe,
   overline: $e,
   large: _e,
-  medium: xe,
-  small: ye,
-  smaller: Ee
-}, $ = p(({
-  children: e,
-  variant: t = "standard",
-  size: n = "medium",
-  className: r,
-  color: o,
-  userSelect: s,
-  whiteSpace: c,
-  wordBreak: i,
-  style: u,
-  ...d
-}, l) => /* @__PURE__ */ a("span", {
-  className: T(y.text, y[t], y[n], r),
-  ref: l,
-  style: {
+  medium: ye,
+  small: Ee,
+  smaller: Ie
+}, x = f(
+  ({
+    children: e,
+    variant: t = "standard",
+    size: n = "medium",
+    className: r,
     color: o,
     userSelect: s,
     whiteSpace: c,
     wordBreak: i,
+    style: u,
+    ...d
+  }, l) => /* @__PURE__ */ a(
+    "span",
+    {
+      className: T(y.text, y[t], y[n], r),
+      ref: l,
+      style: { color: o, userSelect: s, whiteSpace: c, wordBreak: i, ...u },
+      ...d,
+      children: e
+    }
+  )
+), nt = x, rt = (e) => /* @__PURE__ */ a(x, { size: "small", ...e }), ot = (e) => /* @__PURE__ */ a(x, { size: "smaller", ...e }), st = (e) => /* @__PURE__ */ a(x, { size: "medium", ...e }), ct = (e) => /* @__PURE__ */ a(x, { size: "large", ...e }), Se = "_heading_xn9xj_1", Ce = "_h1_xn9xj_15", De = "_h2_xn9xj_19", Te = "_h3_xn9xj_23", Me = "_h4_xn9xj_27", Oe = "_h5_xn9xj_31", ke = "_h6_xn9xj_35", S = {
+  heading: Se,
+  h1: Ce,
+  h2: De,
+  h3: Te,
+  h4: Me,
+  h5: Oe,
+  h6: ke
+}, Le = f(
+  ({
+    variant: e = "h3",
+    className: t,
+    color: n,
+    whiteSpace: r,
+    wordBreak: o,
+    style: s,
+    children: c,
+    as: i,
     ...u
-  },
-  ...d,
-  children: e
-})), tt = $, nt = (e) => /* @__PURE__ */ a($, {
-  size: "small",
-  ...e
-}), rt = (e) => /* @__PURE__ */ a($, {
-  size: "smaller",
-  ...e
-}), ot = (e) => /* @__PURE__ */ a($, {
-  size: "medium",
-  ...e
-}), st = (e) => /* @__PURE__ */ a($, {
-  size: "large",
-  ...e
-}), Ie = "_heading_1us7p_1", Se = "_h1_1us7p_14", Ce = "_h2_1us7p_19", De = "_h3_1us7p_24", Te = "_h4_1us7p_29", Me = "_h5_1us7p_34", Oe = "_h6_1us7p_39", S = {
-  heading: Ie,
-  h1: Se,
-  h2: Ce,
-  h3: De,
-  h4: Te,
-  h5: Me,
-  h6: Oe
-}, ke = p(({
-  variant: e = "h3",
-  className: t,
-  color: n,
-  whiteSpace: r,
-  wordBreak: o,
-  style: s,
-  children: c,
-  as: i,
-  ...u
-}, d) => {
-  const l = i != null ? i : e;
-  return /* @__PURE__ */ a(l, {
-    className: T(S.heading, S[e], t),
-    style: {
-      color: n,
-      whiteSpace: r,
-      wordBreak: o,
-      ...s
-    },
-    ref: d,
-    ...u,
-    children: c
-  });
-}), ct = (e) => /* @__PURE__ */ a(ke, {
-  variant: "h2",
-  ...e
-}), Le = (e, t) => e === t, ut = (e, t, n = Le) => {
+  }, d) => {
+    const l = i != null ? i : e;
+    return /* @__PURE__ */ a(
+      l,
+      {
+        className: T(S.heading, S[e], t),
+        style: { color: n, whiteSpace: r, wordBreak: o, ...s },
+        ref: d,
+        ...u,
+        children: c
+      }
+    );
+  }
+), ut = (e) => /* @__PURE__ */ a(Le, { variant: "h2", ...e }), ze = (e, t) => e === t, it = (e, t, n = ze) => {
   const r = h(
     (u) => {
       e.some((d) => n(d, u)) || t([...e, u]);
@@ -395,7 +340,7 @@ const ce = _.hr`
     toggle: i
   };
 }, E = (e) => {
-  const [t, n] = f(e), r = h(() => {
+  const [t, n] = p(e), r = h(() => {
     n(!0);
   }, [n]), o = h(() => {
     n(!1);
@@ -403,8 +348,8 @@ const ce = _.hr`
     n((c) => !c);
   }, [n]);
   return [t, r, o, s];
-}, it = (e, t) => {
-  const [n, r] = f(e);
+}, dt = (e, t) => {
+  const [n, r] = p(e);
   return m(() => {
     const o = setTimeout(() => {
       r(e);
@@ -413,8 +358,8 @@ const ce = _.hr`
       clearTimeout(o);
     };
   }, [e, t]), n;
-}, dt = (e, t) => {
-  const [n, r] = f(e);
+}, at = (e, t) => {
+  const [n, r] = p(e);
   return m(() => {
     e && r(!0);
     const o = setTimeout(() => {
@@ -425,9 +370,9 @@ const ce = _.hr`
     };
   }, [e, t]), n;
 };
-let ze = 0;
-const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, at = (e) => {
-  const [t, n] = f(() => C(e));
+let Fe = 0;
+const C = (e) => `webui-${e ? e + "-" : ""}${++Fe}`, lt = (e) => {
+  const [t, n] = p(() => C(e));
   return m(() => n(C(e)), [e]), t;
 }, v = (e, t, n) => {
   const r = w();
@@ -447,10 +392,10 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, at = (e) => {
       c && c.removeEventListener(t, s);
     };
   }, [t, e]);
-}, lt = (e) => {
+}, mt = (e) => {
   const [t, n, r] = E(!1);
   m(() => {
-    document.activeElement === re.findDOMNode(e.current) ? n() : r();
+    document.activeElement === oe.findDOMNode(e.current) ? n() : r();
   }, [e, r, n]), v(e, "focus", n), v(e, "blur", r);
   const o = h(() => {
     e.current && e.current.focus();
@@ -458,10 +403,10 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, at = (e) => {
     e.current && e.current.blur();
   }, [e]);
   return { isInFocus: t, focus: o, blur: s };
-}, mt = (e) => {
+}, ht = (e) => {
   const [t, n, r] = E(!1);
   return v(e, "mouseover", n), v(e, "mouseout", r), t;
-}, ht = (e) => {
+}, ft = (e) => {
   const [t, n, r] = E(!1);
   return v(e, "mouseenter", n), v(e, "mouseleave", r), t;
 }, pt = (e, t) => {
@@ -477,7 +422,7 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, at = (e) => {
       document.removeEventListener("mousedown", r), document.removeEventListener("touchstart", r);
     };
   }, [...e]);
-}, ft = (e, t, n) => {
+}, wt = (e, t, n) => {
   const r = w(() => {
   });
   m(() => {
@@ -490,21 +435,21 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, at = (e) => {
       document.removeEventListener("mousedown", o, n), document.removeEventListener("touchstart", o, n);
     };
   }, [e, n]);
-}, D = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"], wt = (e, t) => {
+}, D = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"], vt = (e, t) => {
   const n = w(() => {
   });
   m(() => {
     n.current = e;
   }, [e]), m(() => {
-    const r = oe(n.current, t);
+    const r = se(n.current, t);
     return D.forEach((o) => window.addEventListener(o, r)), () => {
       D.forEach(
         (o) => window.removeEventListener(o, r)
       );
     };
   }, [t]);
-}, vt = (e, t) => {
-  const [n, r] = f(!1), { rootMargin: o, root: s, threshold: c } = t || {}, i = z(() => new IntersectionObserver(
+}, gt = (e, t) => {
+  const [n, r] = p(!1), { rootMargin: o, root: s, threshold: c } = t || {}, i = F(() => new IntersectionObserver(
     ([u]) => r(u.isIntersecting),
     {
       rootMargin: o,
@@ -515,13 +460,13 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, at = (e) => {
   return m(() => (e.current && i.observe(e.current), () => {
     i.disconnect();
   }), [i, e]), n;
-}, gt = (e) => {
+}, bt = (e) => {
   const t = w(null);
   return m(() => {
     !e || (typeof e == "function" ? e(t.current) : e.current = t.current);
   }), t;
-}, bt = (e, t, n = !0) => {
-  const [r, o] = f(e), s = w(), c = h(
+}, xt = (e, t, n = !0) => {
+  const [r, o] = p(e), s = w(), c = h(
     (i, u = t) => {
       o(i), n && clearTimeout(s.current), s.current = setTimeout(() => o(e), u);
     },
@@ -532,13 +477,13 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, at = (e) => {
   }, []), [r, c];
 }, $t = (e) => {
   throw new Error(`Switch unhandled case: ${e}`);
-}, _t = (e, t) => t, xt = (e) => Object.keys(e).filter((t) => e[t]), yt = (e) => se(e, Fe), Fe = (e, t) => Re(t), Re = (e) => e.startsWith("data-") || e.startsWith("aria-"), Et = (e) => {
+}, _t = (e, t) => t, yt = (e) => Object.keys(e).filter((t) => e[t]), Et = (e) => ce(e, Re), Re = (e, t) => je(t), je = (e) => e.startsWith("data-") || e.startsWith("aria-"), It = (e) => {
   try {
     const t = parseFloat(e);
     return isNaN(t) || t == null ? void 0 : t;
   } catch {
   }
-}, It = (e) => {
+}, St = (e) => {
   try {
     const t = parseInt(e, 10);
     return isNaN(t) || t == null ? void 0 : t;
@@ -547,46 +492,46 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, at = (e) => {
 };
 export {
   b as Box,
-  Ke as Clickable,
-  Ge as Column,
-  ct as HeaderText,
-  ke as Heading,
-  Xe as Indent,
-  st as LargeText,
-  et as Nest,
-  Je as ResizeAwareBox,
-  Qe as Row,
-  Be as SeparatorLine,
-  nt as SmallText,
-  rt as SmallerText,
-  Ze as Space,
-  Ye as Spacing,
-  ot as StandardText,
-  $ as Text,
-  tt as Txt,
-  x as booleanOrNumberToNumber,
+  Ge as Clickable,
+  Je as Column,
+  ut as HeaderText,
+  Le as Heading,
+  Ye as Indent,
+  ct as LargeText,
+  tt as Nest,
+  Qe as ResizeAwareBox,
+  Xe as Row,
+  Ke as SeparatorLine,
+  rt as SmallText,
+  ot as SmallerText,
+  et as Space,
+  Ze as Spacing,
+  st as StandardText,
+  x as Text,
+  nt as Txt,
+  _ as booleanOrNumberToNumber,
   _t as exhaustSwitchCase,
   $t as exhaustSwitchCaseElseThrow,
-  yt as getDataProps,
-  me as getDimensionObject,
-  Et as parseFloatElseUndefined,
-  It as parseIntElseUndefined,
-  xt as truthyKeysAsList,
-  ut as useArraySet,
+  Et as getDataProps,
+  he as getDimensionObject,
+  It as parseFloatElseUndefined,
+  St as parseIntElseUndefined,
+  yt as truthyKeysAsList,
+  it as useArraySet,
   E as useBoolean,
-  it as useDebounce,
-  dt as useDelayedFalse,
-  at as useDomId,
+  dt as useDebounce,
+  at as useDelayedFalse,
+  lt as useDomId,
   pe as useElementDimensions,
-  lt as useElementFocus,
+  mt as useElementFocus,
   v as useEventListener,
-  gt as useForwardedRef,
-  ht as useMouseIsEntered,
-  mt as useMouseIsOver,
+  bt as useForwardedRef,
+  ft as useMouseIsEntered,
+  ht as useMouseIsOver,
   pt as useMultiOnClickOutside,
-  ft as useOnClickOutside,
-  wt as useOnNoMouseMovement,
-  vt as useOnScreen,
-  bt as useTimeoutState
+  wt as useOnClickOutside,
+  vt as useOnNoMouseMovement,
+  gt as useOnScreen,
+  xt as useTimeoutState
 };
 //# sourceMappingURL=index.es.js.map