@stenajs-webui/core 18.0.1 → 18.0.2

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v18.0.2 (Mon Feb 27 2023)
+
+#### 🐛 Bug Fix
+
+- Make `Heading` style customisable [#562](https://github.com/StenaIT/stenajs-webui/pull/562) ([@mattias800](https://github.com/mattias800))
+
+#### Authors: 1
+
+- Mattias Andersson ([@mattias800](https://github.com/mattias800))
+
+---
+
 # v17.29.0 (Mon Dec 12 2022)
 
 #### 🐛 Bug Fix

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_1u7xw_1{font-size:var(--swui-heading-font-size);color:var(--lhds-color-ui-900);letter-spacing:0;margin:0;line-height:var(--swui-heading-line-height);font-family:var(--swui-font-primary);font-weight:var(--swui-font-weight-text)}._heading_1u7xw_1._h1_1u7xw_10{--swui-heading-font-size: 2.8rem;--swui-heading-line-height: 4rem}._heading_1u7xw_1._h2_1u7xw_15{--swui-heading-font-size: 2.4rem;--swui-heading-line-height: 3.2rem}._heading_1u7xw_1._h3_1u7xw_20{--swui-heading-font-size: 2rem;--swui-heading-line-height: 2.4rem}._heading_1u7xw_1._h4_1u7xw_25{--swui-heading-font-size: 1.6rem;--swui-heading-line-height: 2.4rem;font-weight:var(--swui-font-weight-text-bold)}._heading_1u7xw_1._h5_1u7xw_31{--swui-heading-font-size: 1.4rem;--swui-heading-line-height: 1.6rem;font-weight:var(--swui-font-weight-text-bold)}._heading_1u7xw_1._h6_1u7xw_37{--swui-heading-font-size: 1.2rem;--swui-heading-line-height: 1.6rem;font-weight:var(--swui-font-weight-text-bold)}")),document.head.appendChild(e)}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
+(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_8a8m8_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);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_8a8m8_1._h1_8a8m8_14{--swui-heading-font-size: 2.8rem;--swui-heading-line-height: 4rem}._heading_8a8m8_1._h2_8a8m8_19{--swui-heading-font-size: 2.4rem;--swui-heading-line-height: 3.2rem}._heading_8a8m8_1._h3_8a8m8_24{--swui-heading-font-size: 2rem;--swui-heading-line-height: 2.4rem}._heading_8a8m8_1._h4_8a8m8_29{--swui-heading-font-size: 1.6rem;--swui-heading-line-height: 2.4rem;font-weight:var(--swui-font-weight-text-bold)}._heading_8a8m8_1._h5_8a8m8_35{--swui-heading-font-size: 1.4rem;--swui-heading-line-height: 1.6rem;font-weight:var(--swui-font-weight-text-bold)}._heading_8a8m8_1._h6_8a8m8_41{--swui-heading-font-size: 1.2rem;--swui-heading-line-height: 1.6rem;font-weight:var(--swui-font-weight-text-bold)}")),document.head.appendChild(e)}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
 import "@stenajs-webui/theme";
-import x from "@emotion/styled";
-import { forwardRef as w, useState as f, useCallback as h, useLayoutEffect as L, useRef as p, useEffect as m, useMemo as z } from "react";
-import { jsx as a, Fragment as I } from "react/jsx-runtime";
+import _ from "@emotion/styled";
+import { forwardRef as f, useState as p, useCallback as h, useLayoutEffect as L, useRef as w, useEffect as m, useMemo as z } from "react";
+import { jsx as d, 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 T from "classnames";
 import * as re from "react-dom";
 import { debounce as oe, pickBy as se } from "lodash";
-const ce = x.hr`
+const ce = _.hr`
   display: flex;
   border: 0;
   margin: 0;
@@ -16,18 +16,18 @@ const ce = x.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 = w(({
+`, Be = f(({
   color: e = "var(--lhds-color-ui-300)",
   size: t = "100%",
   width: n = "1px",
   vertical: r = !1
-}, o) => /* @__PURE__ */ a(ce, {
+}, o) => /* @__PURE__ */ d(ce, {
   color: e,
   size: t,
   width: n,
   vertical: r,
   ref: o
-})), ue = x.button`
+})), ue = _.button`
   display: inline-block;
   user-select: none;
   border: 0;
@@ -68,7 +68,7 @@ const ce = x.hr`
   ${({
   borderRadius: e
 }) => e ? `border-radius: ${e};` : ""}
-`, Ke = w(({
+`, Ke = f(({
   disableFocusHighlight: e,
   onClick: t,
   onDblClick: n,
@@ -78,12 +78,12 @@ const ce = x.hr`
   opacityOnHover: c,
   disabled: i,
   children: u,
-  background: d = "transparent",
+  background: a = "transparent",
   hoverBackground: l,
   focusBackground: g,
   type: M = "button",
   ...O
-}, k) => /* @__PURE__ */ a(ue, {
+}, k) => /* @__PURE__ */ d(ue, {
   opacityOnHover: c,
   title: r,
   disabled: i,
@@ -93,32 +93,32 @@ const ce = x.hr`
   disableFocusHighlight: e,
   pointer: !!(t || n) && !s,
   ref: k,
-  background: d,
+  background: a,
   hoverBackground: l,
   focusBackground: g,
   type: M,
   ...O,
   children: u
-})), _ = (e) => e == null ? 0 : typeof e == "boolean" ? e ? 1 : 0 : e, ie = {
+})), x = (e) => e == null ? 0 : typeof e == "boolean" ? e ? 1 : 0 : e, ie = {
   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({
+}, ae = ["spacing", "indent", "gap", "width", "height", "overflow", "display"], de = (e) => ae.includes(e), le = R({
   row: {
     property: "flexDirection",
     transform: (e) => e ? "row" : "column"
   },
   indent: {
     property: "--current-indent",
-    transform: _
+    transform: x
   },
   spacing: {
     property: "--current-spacing",
-    transform: _
+    transform: x
   },
   gap: {
     property: "--current-gap",
-    transform: _
+    transform: x
   },
   shadow: {
     property: "boxShadow",
@@ -127,8 +127,8 @@ const ce = x.hr`
       return (t = ie[e]) != null ? t : e;
     }
   }
-}), b = x("div", {
-  shouldForwardProp: (e) => typeof e == "string" ? ae(e) ? !1 : F(e) : !1
+}), b = _("div", {
+  shouldForwardProp: (e) => typeof e == "string" ? de(e) ? !1 : F(e) : !1
 })`
   --current-spacing: 0;
   --current-indent: 0;
@@ -186,8 +186,8 @@ const ce = x.hr`
   focusWithinBorder: e
 }) => e ? `border: ${e};` : ""}
   }
-`, Ge = w(function(t, n) {
-  return /* @__PURE__ */ a(b, {
+`, Ge = f(function(t, n) {
+  return /* @__PURE__ */ d(b, {
     ref: n,
     ...t
   });
@@ -203,8 +203,8 @@ const ce = x.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, we = (e, t) => {
-  const [n, r] = f(), o = h(() => {
+}, 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, fe = (e, t) => {
+  const [n, r] = p(), o = h(() => {
     window.requestAnimationFrame(() => {
       if (e.current) {
         const s = me(e.current);
@@ -217,40 +217,40 @@ const ce = x.hr`
   }, [o]), {
     dimensions: n
   };
-}, Je = w(function({
+}, Je = f(function({
   onResize: t,
   ...n
 }, r) {
-  const o = p(null), s = r != null ? r : o;
-  return we(s, t), /* @__PURE__ */ a(b, {
+  const o = w(null), s = r != null ? r : o;
+  return fe(s, t), /* @__PURE__ */ d(b, {
     ...n,
     ref: r
   });
-}), Qe = w(function(t, n) {
-  return /* @__PURE__ */ a(b, {
+}), Qe = f(function(t, n) {
+  return /* @__PURE__ */ d(b, {
     row: !0,
     ref: n,
     ...t
   });
-}), Xe = w(function({
+}), Xe = f(function({
   num: t = 1,
   ...n
 }, r) {
-  return /* @__PURE__ */ a(b, {
+  return /* @__PURE__ */ d(b, {
     indent: t,
     ref: r,
     ...n
   });
-}), Ye = w(function({
+}), Ye = f(function({
   num: t = 1,
   ...n
 }, r) {
-  return /* @__PURE__ */ a(b, {
+  return /* @__PURE__ */ d(b, {
     spacing: t,
     ref: r,
     ...n
   });
-}), fe = x.div`
+}), pe = _.div`
   --current-size: 1;
   flex: none;
   width: calc(var(--current-size) * var(--swui-metrics-space));
@@ -262,7 +262,7 @@ const ce = x.hr`
   vertical: r = !1
 }) => {
   const o = n * (e ? 0.5 : 1);
-  return /* @__PURE__ */ a(fe, {
+  return /* @__PURE__ */ d(pe, {
     style: {
       ["--current-size"]: o,
       height: t ? 1 : void 0,
@@ -273,21 +273,21 @@ const ce = x.hr`
   children: e,
   nest: t,
   render: n
-}) => t ? /* @__PURE__ */ a(I, {
+}) => t ? /* @__PURE__ */ d(I, {
   children: n(e)
-}) : /* @__PURE__ */ a(I, {
+}) : /* @__PURE__ */ d(I, {
   children: e
-}), pe = "_text_1iisw_1", ve = "_standard_1iisw_24", ge = "_bold_1iisw_27", be = "_caption_1iisw_31", $e = "_overline_1iisw_39", xe = "_large_1iisw_48", _e = "_medium_1iisw_53", ye = "_small_1iisw_58", Ee = "_smaller_1iisw_63", y = {
-  text: pe,
+}), 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,
   overline: $e,
-  large: xe,
-  medium: _e,
+  large: _e,
+  medium: xe,
   small: ye,
   smaller: Ee
-}, $ = w(({
+}, $ = f(({
   children: e,
   variant: t = "standard",
   size: n = "medium",
@@ -297,8 +297,8 @@ const ce = x.hr`
   whiteSpace: c,
   wordBreak: i,
   style: u,
-  ...d
-}, l) => /* @__PURE__ */ a("span", {
+  ...a
+}, l) => /* @__PURE__ */ d("span", {
   className: T(y.text, y[t], y[n], r),
   ref: l,
   style: {
@@ -308,21 +308,21 @@ const ce = x.hr`
     wordBreak: i,
     ...u
   },
-  ...d,
+  ...a,
   children: e
-})), tt = $, nt = (e) => /* @__PURE__ */ a($, {
+})), tt = $, nt = (e) => /* @__PURE__ */ d($, {
   size: "small",
   ...e
-}), rt = (e) => /* @__PURE__ */ a($, {
+}), rt = (e) => /* @__PURE__ */ d($, {
   size: "smaller",
   ...e
-}), ot = (e) => /* @__PURE__ */ a($, {
+}), ot = (e) => /* @__PURE__ */ d($, {
   size: "medium",
   ...e
-}), st = (e) => /* @__PURE__ */ a($, {
+}), st = (e) => /* @__PURE__ */ d($, {
   size: "large",
   ...e
-}), Ie = "_heading_1u7xw_1", Se = "_h1_1u7xw_10", Ce = "_h2_1u7xw_15", De = "_h3_1u7xw_20", Te = "_h4_1u7xw_25", Me = "_h5_1u7xw_31", Oe = "_h6_1u7xw_37", S = {
+}), Ie = "_heading_8a8m8_1", Se = "_h1_8a8m8_14", Ce = "_h2_8a8m8_19", De = "_h3_8a8m8_24", Te = "_h4_8a8m8_29", Me = "_h5_8a8m8_35", Oe = "_h6_8a8m8_41", S = {
   heading: Ie,
   h1: Se,
   h2: Ce,
@@ -330,7 +330,7 @@ const ce = x.hr`
   h4: Te,
   h5: Me,
   h6: Oe
-}, ke = w(({
+}, ke = f(({
   variant: e = "h3",
   className: t,
   color: n,
@@ -340,9 +340,9 @@ const ce = x.hr`
   children: c,
   as: i,
   ...u
-}, d) => {
+}, a) => {
   const l = i != null ? i : e;
-  return /* @__PURE__ */ a(l, {
+  return /* @__PURE__ */ d(l, {
     className: T(S.heading, S[e], t),
     style: {
       color: n,
@@ -350,35 +350,35 @@ const ce = x.hr`
       wordBreak: o,
       ...s
     },
-    ref: d,
+    ref: a,
     ...u,
     children: c
   });
-}), ct = (e) => /* @__PURE__ */ a(ke, {
+}), ct = (e) => /* @__PURE__ */ d(ke, {
   variant: "h2",
   ...e
 }), Le = (e, t) => e === t, ut = (e, t, n = Le) => {
   const r = h(
     (u) => {
-      e.some((d) => n(d, u)) || t([...e, u]);
+      e.some((a) => n(a, u)) || t([...e, u]);
     },
     [e, t, n]
   ), o = h(
     (u) => {
       t(
-        u.reduce((d, l) => d.some((g) => n(g, l)) ? d : [...d, l], e)
+        u.reduce((a, l) => a.some((g) => n(g, l)) ? a : [...a, l], e)
       );
     },
     [e, t, n]
   ), s = h(
     (u) => {
-      const d = e.findIndex((l) => n(l, u));
-      d >= 0 && t(e.filter((l, g) => g !== d));
+      const a = e.findIndex((l) => n(l, u));
+      a >= 0 && t(e.filter((l, g) => g !== a));
     },
     [e, t, n]
   ), c = h(
     (u) => {
-      t(e.filter((d) => !u.some((l) => n(l, d))));
+      t(e.filter((a) => !u.some((l) => n(l, a))));
     },
     [e, t, n]
   ), i = h(
@@ -395,7 +395,7 @@ const ce = x.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);
@@ -404,7 +404,7 @@ const ce = x.hr`
   }, [n]);
   return [t, r, o, s];
 }, it = (e, t) => {
-  const [n, r] = f(e);
+  const [n, r] = p(e);
   return m(() => {
     const o = setTimeout(() => {
       r(e);
@@ -413,8 +413,8 @@ const ce = x.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(() => {
@@ -426,11 +426,11 @@ const ce = x.hr`
   }, [e, t]), n;
 };
 let ze = 0;
-const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, at = (e) => {
-  const [t, n] = f(() => C(e));
+const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, dt = (e) => {
+  const [t, n] = p(() => C(e));
   return m(() => n(C(e)), [e]), t;
 }, v = (e, t, n) => {
-  const r = p();
+  const r = w();
   m(() => {
     r.current = n;
   }, [n]), m(() => {
@@ -464,8 +464,8 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, at = (e) => {
 }, ht = (e) => {
   const [t, n, r] = E(!1);
   return v(e, "mouseenter", n), v(e, "mouseleave", r), t;
-}, wt = (e, t) => {
-  const n = p(() => {
+}, ft = (e, t) => {
+  const n = w(() => {
   });
   m(() => {
     n.current = t;
@@ -477,8 +477,8 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, at = (e) => {
       document.removeEventListener("mousedown", r), document.removeEventListener("touchstart", r);
     };
   }, [...e]);
-}, ft = (e, t, n) => {
-  const r = p(() => {
+}, pt = (e, t, n) => {
+  const r = w(() => {
   });
   m(() => {
     r.current = t;
@@ -490,8 +490,8 @@ 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"], pt = (e, t) => {
-  const n = p(() => {
+}, D = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"], wt = (e, t) => {
+  const n = w(() => {
   });
   m(() => {
     n.current = e;
@@ -504,7 +504,7 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, at = (e) => {
     };
   }, [t]);
 }, vt = (e, t) => {
-  const [n, r] = f(!1), { rootMargin: o, root: s, threshold: c } = t || {}, i = z(() => new IntersectionObserver(
+  const [n, r] = p(!1), { rootMargin: o, root: s, threshold: c } = t || {}, i = z(() => new IntersectionObserver(
     ([u]) => r(u.isIntersecting),
     {
       rootMargin: o,
@@ -516,12 +516,12 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, at = (e) => {
     i.disconnect();
   }), [i, e]), n;
 }, gt = (e) => {
-  const t = p(null);
+  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 = p(), c = h(
+  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,7 +532,7 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, at = (e) => {
   }, []), [r, c];
 }, $t = (e) => {
   throw new Error(`Switch unhandled case: ${e}`);
-}, xt = (e, t) => t, _t = (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, 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) => {
   try {
     const t = parseFloat(e);
     return isNaN(t) || t == null ? void 0 : t;
@@ -564,28 +564,28 @@ export {
   ot as StandardText,
   $ as Text,
   tt as Txt,
-  _ as booleanOrNumberToNumber,
-  xt as exhaustSwitchCase,
+  x as booleanOrNumberToNumber,
+  _t as exhaustSwitchCase,
   $t as exhaustSwitchCaseElseThrow,
   yt as getDataProps,
   me as getDimensionObject,
   Et as parseFloatElseUndefined,
   It as parseIntElseUndefined,
-  _t as truthyKeysAsList,
+  xt as truthyKeysAsList,
   ut as useArraySet,
   E as useBoolean,
   it as useDebounce,
-  dt as useDelayedFalse,
-  at as useDomId,
-  we as useElementDimensions,
+  at as useDelayedFalse,
+  dt as useDomId,
+  fe as useElementDimensions,
   lt as useElementFocus,
   v as useEventListener,
   gt as useForwardedRef,
   ht as useMouseIsEntered,
   mt as useMouseIsOver,
-  wt as useMultiOnClickOutside,
-  ft as useOnClickOutside,
-  pt as useOnNoMouseMovement,
+  ft as useMultiOnClickOutside,
+  pt as useOnClickOutside,
+  wt as useOnNoMouseMovement,
   vt as useOnScreen,
   bt as useTimeoutState
 };

package/dist/index.js

@@ -1,5 +1,5 @@
-(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_1u7xw_1{font-size:var(--swui-heading-font-size);color:var(--lhds-color-ui-900);letter-spacing:0;margin:0;line-height:var(--swui-heading-line-height);font-family:var(--swui-font-primary);font-weight:var(--swui-font-weight-text)}._heading_1u7xw_1._h1_1u7xw_10{--swui-heading-font-size: 2.8rem;--swui-heading-line-height: 4rem}._heading_1u7xw_1._h2_1u7xw_15{--swui-heading-font-size: 2.4rem;--swui-heading-line-height: 3.2rem}._heading_1u7xw_1._h3_1u7xw_20{--swui-heading-font-size: 2rem;--swui-heading-line-height: 2.4rem}._heading_1u7xw_1._h4_1u7xw_25{--swui-heading-font-size: 1.6rem;--swui-heading-line-height: 2.4rem;font-weight:var(--swui-font-weight-text-bold)}._heading_1u7xw_1._h5_1u7xw_31{--swui-heading-font-size: 1.4rem;--swui-heading-line-height: 1.6rem;font-weight:var(--swui-font-weight-text-bold)}._heading_1u7xw_1._h6_1u7xw_37{--swui-heading-font-size: 1.2rem;--swui-heading-line-height: 1.6rem;font-weight:var(--swui-font-weight-text-bold)}")),document.head.appendChild(e)}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@stenajs-webui/theme");const L=require("@emotion/styled"),r=require("react"),l=require("react/jsx-runtime"),F=require("@emotion/is-prop-valid"),a=require("styled-system"),z=require("classnames"),N=require("react-dom"),C=require("lodash"),$=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function P(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const g=$(L),q=$(F),I=$(z),H=P(N),A=g.default.hr`
+(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_8a8m8_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);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_8a8m8_1._h1_8a8m8_14{--swui-heading-font-size: 2.8rem;--swui-heading-line-height: 4rem}._heading_8a8m8_1._h2_8a8m8_19{--swui-heading-font-size: 2.4rem;--swui-heading-line-height: 3.2rem}._heading_8a8m8_1._h3_8a8m8_24{--swui-heading-font-size: 2rem;--swui-heading-line-height: 2.4rem}._heading_8a8m8_1._h4_8a8m8_29{--swui-heading-font-size: 1.6rem;--swui-heading-line-height: 2.4rem;font-weight:var(--swui-font-weight-text-bold)}._heading_8a8m8_1._h5_8a8m8_35{--swui-heading-font-size: 1.4rem;--swui-heading-line-height: 1.6rem;font-weight:var(--swui-font-weight-text-bold)}._heading_8a8m8_1._h6_8a8m8_41{--swui-heading-font-size: 1.2rem;--swui-heading-line-height: 1.6rem;font-weight:var(--swui-font-weight-text-bold)}")),document.head.appendChild(e)}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@stenajs-webui/theme");const L=require("@emotion/styled"),r=require("react"),l=require("react/jsx-runtime"),F=require("@emotion/is-prop-valid"),i=require("styled-system"),z=require("classnames"),N=require("react-dom"),C=require("lodash"),$=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function P(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const x=$(L),q=$(F),I=$(z),H=P(N),A=x.default.hr`
   display: flex;
   border: 0;
   margin: 0;
@@ -7,7 +7,7 @@
   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%"};
-`,V=r.forwardRef(({color:e="var(--lhds-color-ui-300)",size:t="100%",width:n="1px",vertical:s=!1},o)=>l.jsx(A,{color:e,size:t,width:n,vertical:s,ref:o})),U=g.default.button`
+`,V=r.forwardRef(({color:e="var(--lhds-color-ui-300)",size:t="100%",width:n="1px",vertical:s=!1},o)=>l.jsx(A,{color:e,size:t,width:n,vertical:s,ref:o})),U=x.default.button`
   display: inline-block;
   user-select: none;
   border: 0;
@@ -30,7 +30,7 @@
   ${({width:e})=>e?`width: ${e};`:""}
   ${({height:e})=>e?`height: ${e};`:""}
   ${({borderRadius:e})=>e?`border-radius: ${e};`:""}
-`,B=r.forwardRef(({disableFocusHighlight:e,onClick:t,onDblClick:n,tooltip:s,disableOpacityOnClick:o,disablePointer:u,opacityOnHover:c,disabled:d,children:i,background:f="transparent",hoverBackground:m,focusBackground:x,type:T="button",...k},D)=>{const M=!!(t||n);return l.jsx(U,{opacityOnHover:c,title:s,disabled:d,disableOpacityOnClick:o,onClick:t,onDoubleClick:n,disableFocusHighlight:e,pointer:M&&!u,ref:D,background:f,hoverBackground:m,focusBackground:x,type:T,...k,children:i})}),p=e=>e==null?0:typeof e=="boolean"?e?1:0:e,K={box:"var(--swui-shadow-box)",popover:"var(--swui-shadow-popover)",modal:"var(--swui-shadow-modal)"},W=["spacing","indent","gap","width","height","overflow","display"],G=e=>W.includes(e),J=a.system({row:{property:"flexDirection",transform:e=>e?"row":"column"},indent:{property:"--current-indent",transform:p},spacing:{property:"--current-spacing",transform:p},gap:{property:"--current-gap",transform:p},shadow:{property:"boxShadow",transform:e=>{var t;return(t=K[e])!=null?t:e}}}),w=g.default("div",{shouldForwardProp:e=>typeof e=="string"?G(e)?!1:q.default(e):!1})`
+`,B=r.forwardRef(({disableFocusHighlight:e,onClick:t,onDblClick:n,tooltip:s,disableOpacityOnClick:o,disablePointer:u,opacityOnHover:c,disabled:d,children:a,background:f="transparent",hoverBackground:m,focusBackground:p,type:T="button",...k},D)=>{const M=!!(t||n);return l.jsx(U,{opacityOnHover:c,title:s,disabled:d,disableOpacityOnClick:o,onClick:t,onDoubleClick:n,disableFocusHighlight:e,pointer:M&&!u,ref:D,background:f,hoverBackground:m,focusBackground:p,type:T,...k,children:a})}),g=e=>e==null?0:typeof e=="boolean"?e?1:0:e,K={box:"var(--swui-shadow-box)",popover:"var(--swui-shadow-popover)",modal:"var(--swui-shadow-modal)"},W=["spacing","indent","gap","width","height","overflow","display"],G=e=>W.includes(e),J=i.system({row:{property:"flexDirection",transform:e=>e?"row":"column"},indent:{property:"--current-indent",transform:g},spacing:{property:"--current-spacing",transform:g},gap:{property:"--current-gap",transform:g},shadow:{property:"boxShadow",transform:e=>{var t;return(t=K[e])!=null?t:e}}}),b=x.default("div",{shouldForwardProp:e=>typeof e=="string"?G(e)?!1:q.default(e):!1})`
   --current-spacing: 0;
   --current-indent: 0;
   --current-gap: 0;
@@ -38,26 +38,26 @@
   display: flex;
   flex-direction: column;
   ${J};
-  ${a.background};
-  ${a.border};
-  ${a.borderRight};
-  ${a.borderLeft};
-  ${a.borderTop};
-  ${a.borderBottom};
-  ${a.borderColor};
-  ${a.borderRadius};
-  ${a.borderStyle};
-  ${a.borderWidth};
-  ${a.boxShadow};
-  ${a.flexbox};
-  ${a.overflow};
-  ${a.position};
-  ${a.layout};
-  ${a.zIndex};
-  ${a.left};
-  ${a.right};
-  ${a.top};
-  ${a.bottom};
+  ${i.background};
+  ${i.border};
+  ${i.borderRight};
+  ${i.borderLeft};
+  ${i.borderTop};
+  ${i.borderBottom};
+  ${i.borderColor};
+  ${i.borderRadius};
+  ${i.borderStyle};
+  ${i.borderWidth};
+  ${i.boxShadow};
+  ${i.flexbox};
+  ${i.overflow};
+  ${i.position};
+  ${i.layout};
+  ${i.zIndex};
+  ${i.left};
+  ${i.right};
+  ${i.top};
+  ${i.bottom};
 
   gap: calc(var(--current-gap) * var(--swui-metrics-space));
 
@@ -75,10 +75,10 @@
     ${({focusWithinBackground:e})=>e?`background: ${e};`:""}
     ${({focusWithinBorder:e})=>e?`border: ${e};`:""}
   }
-`,Q=r.forwardRef(function(t,n){return l.jsx(w,{ref:n,...t})}),O=e=>{const{x:t,y:n,width:s,height:o,bottom:u,top:c,left:d,right:i}=e.getBoundingClientRect();return{width:s,height:o,top:c,left:d,x:t,y:n,right:i,bottom:u}},X=(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,R=(e,t)=>{const[n,s]=r.useState(),o=r.useCallback(()=>{window.requestAnimationFrame(()=>{if(e.current){const u=O(e.current);(!n||!X(n,u))&&t&&t(u),s(u)}})},[e,n,s,t]);return r.useLayoutEffect(()=>{o()},[o]),{dimensions:n}},Y=r.forwardRef(function({onResize:t,...n},s){const o=r.useRef(null),u=s!=null?s:o;return R(u,t),l.jsx(w,{...n,ref:s})}),Z=r.forwardRef(function(t,n){return l.jsx(w,{row:!0,ref:n,...t})}),ee=r.forwardRef(function({num:t=1,...n},s){return l.jsx(w,{indent:t,ref:s,...n})}),te=r.forwardRef(function({num:t=1,...n},s){return l.jsx(w,{spacing:t,ref:s,...n})}),ne=g.default.div`
+`,Q=r.forwardRef(function(t,n){return l.jsx(b,{ref:n,...t})}),O=e=>{const{x:t,y:n,width:s,height:o,bottom:u,top:c,left:d,right:a}=e.getBoundingClientRect();return{width:s,height:o,top:c,left:d,x:t,y:n,right:a,bottom:u}},X=(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,R=(e,t)=>{const[n,s]=r.useState(),o=r.useCallback(()=>{window.requestAnimationFrame(()=>{if(e.current){const u=O(e.current);(!n||!X(n,u))&&t&&t(u),s(u)}})},[e,n,s,t]);return r.useLayoutEffect(()=>{o()},[o]),{dimensions:n}},Y=r.forwardRef(function({onResize:t,...n},s){const o=r.useRef(null),u=s!=null?s:o;return R(u,t),l.jsx(b,{...n,ref:s})}),Z=r.forwardRef(function(t,n){return l.jsx(b,{row:!0,ref:n,...t})}),ee=r.forwardRef(function({num:t=1,...n},s){return l.jsx(b,{indent:t,ref:s,...n})}),te=r.forwardRef(function({num:t=1,...n},s){return l.jsx(b,{spacing:t,ref:s,...n})}),ne=x.default.div`
   --current-size: 1;
   flex: none;
   width: calc(var(--current-size) * var(--swui-metrics-space));
   height: calc(var(--current-size) * var(--swui-metrics-space));
-`,se=({half:e=!1,horizontal:t=!1,num:n=1,vertical:s=!1})=>{const o=n*(e?.5:1);return l.jsx(ne,{style:{["--current-size"]:o,height:t?1:void 0,width:s?1:void 0}})},re=({children:e,nest:t,render:n})=>t?l.jsx(l.Fragment,{children:n(e)}):l.jsx(l.Fragment,{children:e}),oe="_text_1iisw_1",ue="_standard_1iisw_24",ce="_bold_1iisw_27",ie="_caption_1iisw_31",ae="_overline_1iisw_39",de="_large_1iisw_48",le="_medium_1iisw_53",fe="_small_1iisw_58",me="_smaller_1iisw_63",_={text:oe,standard:ue,bold:ce,caption:ie,overline:ae,large:de,medium:le,small:fe,smaller:me},b=r.forwardRef(({children:e,variant:t="standard",size:n="medium",className:s,color:o,userSelect:u,whiteSpace:c,wordBreak:d,style:i,...f},m)=>l.jsx("span",{className:I.default(_.text,_[t],_[n],s),ref:m,style:{color:o,userSelect:u,whiteSpace:c,wordBreak:d,...i},...f,children:e})),he=b,we=e=>l.jsx(b,{size:"small",...e}),be=e=>l.jsx(b,{size:"smaller",...e}),xe=e=>l.jsx(b,{size:"medium",...e}),pe=e=>l.jsx(b,{size:"large",...e}),ge="_heading_1u7xw_1",ve="_h1_1u7xw_10",_e="_h2_1u7xw_15",$e="_h3_1u7xw_20",Ee="_h4_1u7xw_25",ye="_h5_1u7xw_31",Se="_h6_1u7xw_37",E={heading:ge,h1:ve,h2:_e,h3:$e,h4:Ee,h5:ye,h6:Se},j=r.forwardRef(({variant:e="h3",className:t,color:n,whiteSpace:s,wordBreak:o,style:u,children:c,as:d,...i},f)=>{const m=d!=null?d:e;return l.jsx(m,{className:I.default(E.heading,E[e],t),style:{color:n,whiteSpace:s,wordBreak:o,...u},ref:f,...i,children:c})}),Ce=e=>l.jsx(j,{variant:"h2",...e}),Ie=(e,t)=>e===t,Oe=(e,t,n=Ie)=>{const s=r.useCallback(i=>{e.some(f=>n(f,i))||t([...e,i])},[e,t,n]),o=r.useCallback(i=>{t(i.reduce((f,m)=>f.some(x=>n(x,m))?f:[...f,m],e))},[e,t,n]),u=r.useCallback(i=>{const f=e.findIndex(m=>n(m,i));f>=0&&t(e.filter((m,x)=>x!==f))},[e,t,n]),c=r.useCallback(i=>{t(e.filter(f=>!i.some(m=>n(m,f))))},[e,t,n]),d=r.useCallback(i=>{e.some(m=>n(m,i))?u(i):s(i)},[e,s,u,n]);return{add:s,addMultiple:o,remove:u,removeMultiple:c,toggle:d}},v=e=>{const[t,n]=r.useState(e),s=r.useCallback(()=>{n(!0)},[n]),o=r.useCallback(()=>{n(!1)},[n]),u=r.useCallback(()=>{n(c=>!c)},[n]);return[t,s,o,u]},Re=(e,t)=>{const[n,s]=r.useState(e);return r.useEffect(()=>{const o=setTimeout(()=>{s(e)},t);return()=>{clearTimeout(o)}},[e,t]),n},je=(e,t)=>{const[n,s]=r.useState(e);return r.useEffect(()=>{e&&s(!0);const o=setTimeout(()=>{e||s(e)},t);return()=>{clearTimeout(o)}},[e,t]),n};let Te=0;const y=e=>`webui-${e?e+"-":""}${++Te}`,ke=e=>{const[t,n]=r.useState(()=>y(e));return r.useEffect(()=>n(y(e)),[e]),t},h=(e,t,n)=>{const s=r.useRef();r.useEffect(()=>{s.current=n},[n]),r.useEffect(()=>{if(!(e.current&&e.current.addEventListener))return;const u=d=>{if(s.current)return s.current(d)};if(!e.current)return;const c=e.current;return c.addEventListener(t,u),()=>{c&&c.removeEventListener(t,u)}},[t,e])},De=e=>{const[t,n,s]=v(!1);r.useEffect(()=>{document.activeElement===H.findDOMNode(e.current)?n():s()},[e,s,n]),h(e,"focus",n),h(e,"blur",s);const o=r.useCallback(()=>{e.current&&e.current.focus()},[e]),u=r.useCallback(()=>{e.current&&e.current.blur()},[e]);return{isInFocus:t,focus:o,blur:u}},Me=e=>{const[t,n,s]=v(!1);return h(e,"mouseover",n),h(e,"mouseout",s),t},Le=e=>{const[t,n,s]=v(!1);return h(e,"mouseenter",n),h(e,"mouseleave",s),t},Fe=(e,t)=>{const n=r.useRef(()=>{});r.useEffect(()=>{n.current=t},[t]),r.useEffect(()=>{const s=o=>{!e.filter(c=>c.current).every(c=>c.current&&!c.current.contains(o.target))||n.current(o)};return document.addEventListener("mousedown",s),document.addEventListener("touchstart",s),()=>{document.removeEventListener("mousedown",s),document.removeEventListener("touchstart",s)}},[...e])},ze=(e,t,n)=>{const s=r.useRef(()=>{});r.useEffect(()=>{s.current=t},[t]),r.useEffect(()=>{const o=u=>{!e.current||e.current.contains(u.target)||s.current(u)};return document.addEventListener("mousedown",o,n),document.addEventListener("touchstart",o,n),()=>{document.removeEventListener("mousedown",o,n),document.removeEventListener("touchstart",o,n)}},[e,n])},S=["mousemove","mousedown","keydown","touchstart","scroll"],Ne=(e,t)=>{const n=r.useRef(()=>{});r.useEffect(()=>{n.current=e},[e]),r.useEffect(()=>{const s=C.debounce(n.current,t);return S.forEach(o=>window.addEventListener(o,s)),()=>{S.forEach(o=>window.removeEventListener(o,s))}},[t])},Pe=(e,t)=>{const[n,s]=r.useState(!1),{rootMargin:o,root:u,threshold:c}=t||{},d=r.useMemo(()=>new IntersectionObserver(([i])=>s(i.isIntersecting),{rootMargin:o,root:u,threshold:c}),[s,o,u,c]);return r.useEffect(()=>(e.current&&d.observe(e.current),()=>{d.disconnect()}),[d,e]),n},qe=e=>{const t=r.useRef(null);return r.useEffect(()=>{!e||(typeof e=="function"?e(t.current):e.current=t.current)}),t},He=(e,t,n=!0)=>{const[s,o]=r.useState(e),u=r.useRef(),c=r.useCallback((d,i=t)=>{o(d),n&&clearTimeout(u.current),u.current=setTimeout(()=>o(e),i)},[t,n,e]);return r.useEffect(()=>()=>{clearTimeout(u.current)},[]),[s,c]},Ae=e=>{throw new Error(`Switch unhandled case: ${e}`)},Ve=(e,t)=>t,Ue=e=>Object.keys(e).filter(t=>e[t]),Be=e=>C.pickBy(e,Ke),Ke=(e,t)=>We(t),We=e=>e.startsWith("data-")||e.startsWith("aria-"),Ge=e=>{try{const t=parseFloat(e);return isNaN(t)||t==null?void 0:t}catch{}},Je=e=>{try{const t=parseInt(e,10);return isNaN(t)||t==null?void 0:t}catch{}};exports.Box=w;exports.Clickable=B;exports.Column=Q;exports.HeaderText=Ce;exports.Heading=j;exports.Indent=ee;exports.LargeText=pe;exports.Nest=re;exports.ResizeAwareBox=Y;exports.Row=Z;exports.SeparatorLine=V;exports.SmallText=we;exports.SmallerText=be;exports.Space=se;exports.Spacing=te;exports.StandardText=xe;exports.Text=b;exports.Txt=he;exports.booleanOrNumberToNumber=p;exports.exhaustSwitchCase=Ve;exports.exhaustSwitchCaseElseThrow=Ae;exports.getDataProps=Be;exports.getDimensionObject=O;exports.parseFloatElseUndefined=Ge;exports.parseIntElseUndefined=Je;exports.truthyKeysAsList=Ue;exports.useArraySet=Oe;exports.useBoolean=v;exports.useDebounce=Re;exports.useDelayedFalse=je;exports.useDomId=ke;exports.useElementDimensions=R;exports.useElementFocus=De;exports.useEventListener=h;exports.useForwardedRef=qe;exports.useMouseIsEntered=Le;exports.useMouseIsOver=Me;exports.useMultiOnClickOutside=Fe;exports.useOnClickOutside=ze;exports.useOnNoMouseMovement=Ne;exports.useOnScreen=Pe;exports.useTimeoutState=He;
+`,se=({half:e=!1,horizontal:t=!1,num:n=1,vertical:s=!1})=>{const o=n*(e?.5:1);return l.jsx(ne,{style:{["--current-size"]:o,height:t?1:void 0,width:s?1:void 0}})},re=({children:e,nest:t,render:n})=>t?l.jsx(l.Fragment,{children:n(e)}):l.jsx(l.Fragment,{children:e}),oe="_text_1iisw_1",ue="_standard_1iisw_24",ce="_bold_1iisw_27",ae="_caption_1iisw_31",ie="_overline_1iisw_39",de="_large_1iisw_48",le="_medium_1iisw_53",fe="_small_1iisw_58",me="_smaller_1iisw_63",_={text:oe,standard:ue,bold:ce,caption:ae,overline:ie,large:de,medium:le,small:fe,smaller:me},w=r.forwardRef(({children:e,variant:t="standard",size:n="medium",className:s,color:o,userSelect:u,whiteSpace:c,wordBreak:d,style:a,...f},m)=>l.jsx("span",{className:I.default(_.text,_[t],_[n],s),ref:m,style:{color:o,userSelect:u,whiteSpace:c,wordBreak:d,...a},...f,children:e})),he=w,be=e=>l.jsx(w,{size:"small",...e}),we=e=>l.jsx(w,{size:"smaller",...e}),pe=e=>l.jsx(w,{size:"medium",...e}),ge=e=>l.jsx(w,{size:"large",...e}),xe="_heading_8a8m8_1",ve="_h1_8a8m8_14",_e="_h2_8a8m8_19",$e="_h3_8a8m8_24",Ee="_h4_8a8m8_29",ye="_h5_8a8m8_35",Se="_h6_8a8m8_41",E={heading:xe,h1:ve,h2:_e,h3:$e,h4:Ee,h5:ye,h6:Se},j=r.forwardRef(({variant:e="h3",className:t,color:n,whiteSpace:s,wordBreak:o,style:u,children:c,as:d,...a},f)=>{const m=d!=null?d:e;return l.jsx(m,{className:I.default(E.heading,E[e],t),style:{color:n,whiteSpace:s,wordBreak:o,...u},ref:f,...a,children:c})}),Ce=e=>l.jsx(j,{variant:"h2",...e}),Ie=(e,t)=>e===t,Oe=(e,t,n=Ie)=>{const s=r.useCallback(a=>{e.some(f=>n(f,a))||t([...e,a])},[e,t,n]),o=r.useCallback(a=>{t(a.reduce((f,m)=>f.some(p=>n(p,m))?f:[...f,m],e))},[e,t,n]),u=r.useCallback(a=>{const f=e.findIndex(m=>n(m,a));f>=0&&t(e.filter((m,p)=>p!==f))},[e,t,n]),c=r.useCallback(a=>{t(e.filter(f=>!a.some(m=>n(m,f))))},[e,t,n]),d=r.useCallback(a=>{e.some(m=>n(m,a))?u(a):s(a)},[e,s,u,n]);return{add:s,addMultiple:o,remove:u,removeMultiple:c,toggle:d}},v=e=>{const[t,n]=r.useState(e),s=r.useCallback(()=>{n(!0)},[n]),o=r.useCallback(()=>{n(!1)},[n]),u=r.useCallback(()=>{n(c=>!c)},[n]);return[t,s,o,u]},Re=(e,t)=>{const[n,s]=r.useState(e);return r.useEffect(()=>{const o=setTimeout(()=>{s(e)},t);return()=>{clearTimeout(o)}},[e,t]),n},je=(e,t)=>{const[n,s]=r.useState(e);return r.useEffect(()=>{e&&s(!0);const o=setTimeout(()=>{e||s(e)},t);return()=>{clearTimeout(o)}},[e,t]),n};let Te=0;const y=e=>`webui-${e?e+"-":""}${++Te}`,ke=e=>{const[t,n]=r.useState(()=>y(e));return r.useEffect(()=>n(y(e)),[e]),t},h=(e,t,n)=>{const s=r.useRef();r.useEffect(()=>{s.current=n},[n]),r.useEffect(()=>{if(!(e.current&&e.current.addEventListener))return;const u=d=>{if(s.current)return s.current(d)};if(!e.current)return;const c=e.current;return c.addEventListener(t,u),()=>{c&&c.removeEventListener(t,u)}},[t,e])},De=e=>{const[t,n,s]=v(!1);r.useEffect(()=>{document.activeElement===H.findDOMNode(e.current)?n():s()},[e,s,n]),h(e,"focus",n),h(e,"blur",s);const o=r.useCallback(()=>{e.current&&e.current.focus()},[e]),u=r.useCallback(()=>{e.current&&e.current.blur()},[e]);return{isInFocus:t,focus:o,blur:u}},Me=e=>{const[t,n,s]=v(!1);return h(e,"mouseover",n),h(e,"mouseout",s),t},Le=e=>{const[t,n,s]=v(!1);return h(e,"mouseenter",n),h(e,"mouseleave",s),t},Fe=(e,t)=>{const n=r.useRef(()=>{});r.useEffect(()=>{n.current=t},[t]),r.useEffect(()=>{const s=o=>{!e.filter(c=>c.current).every(c=>c.current&&!c.current.contains(o.target))||n.current(o)};return document.addEventListener("mousedown",s),document.addEventListener("touchstart",s),()=>{document.removeEventListener("mousedown",s),document.removeEventListener("touchstart",s)}},[...e])},ze=(e,t,n)=>{const s=r.useRef(()=>{});r.useEffect(()=>{s.current=t},[t]),r.useEffect(()=>{const o=u=>{!e.current||e.current.contains(u.target)||s.current(u)};return document.addEventListener("mousedown",o,n),document.addEventListener("touchstart",o,n),()=>{document.removeEventListener("mousedown",o,n),document.removeEventListener("touchstart",o,n)}},[e,n])},S=["mousemove","mousedown","keydown","touchstart","scroll"],Ne=(e,t)=>{const n=r.useRef(()=>{});r.useEffect(()=>{n.current=e},[e]),r.useEffect(()=>{const s=C.debounce(n.current,t);return S.forEach(o=>window.addEventListener(o,s)),()=>{S.forEach(o=>window.removeEventListener(o,s))}},[t])},Pe=(e,t)=>{const[n,s]=r.useState(!1),{rootMargin:o,root:u,threshold:c}=t||{},d=r.useMemo(()=>new IntersectionObserver(([a])=>s(a.isIntersecting),{rootMargin:o,root:u,threshold:c}),[s,o,u,c]);return r.useEffect(()=>(e.current&&d.observe(e.current),()=>{d.disconnect()}),[d,e]),n},qe=e=>{const t=r.useRef(null);return r.useEffect(()=>{!e||(typeof e=="function"?e(t.current):e.current=t.current)}),t},He=(e,t,n=!0)=>{const[s,o]=r.useState(e),u=r.useRef(),c=r.useCallback((d,a=t)=>{o(d),n&&clearTimeout(u.current),u.current=setTimeout(()=>o(e),a)},[t,n,e]);return r.useEffect(()=>()=>{clearTimeout(u.current)},[]),[s,c]},Ae=e=>{throw new Error(`Switch unhandled case: ${e}`)},Ve=(e,t)=>t,Ue=e=>Object.keys(e).filter(t=>e[t]),Be=e=>C.pickBy(e,Ke),Ke=(e,t)=>We(t),We=e=>e.startsWith("data-")||e.startsWith("aria-"),Ge=e=>{try{const t=parseFloat(e);return isNaN(t)||t==null?void 0:t}catch{}},Je=e=>{try{const t=parseInt(e,10);return isNaN(t)||t==null?void 0:t}catch{}};exports.Box=b;exports.Clickable=B;exports.Column=Q;exports.HeaderText=Ce;exports.Heading=j;exports.Indent=ee;exports.LargeText=ge;exports.Nest=re;exports.ResizeAwareBox=Y;exports.Row=Z;exports.SeparatorLine=V;exports.SmallText=be;exports.SmallerText=we;exports.Space=se;exports.Spacing=te;exports.StandardText=pe;exports.Text=w;exports.Txt=he;exports.booleanOrNumberToNumber=g;exports.exhaustSwitchCase=Ve;exports.exhaustSwitchCaseElseThrow=Ae;exports.getDataProps=Be;exports.getDimensionObject=O;exports.parseFloatElseUndefined=Ge;exports.parseIntElseUndefined=Je;exports.truthyKeysAsList=Ue;exports.useArraySet=Oe;exports.useBoolean=v;exports.useDebounce=Re;exports.useDelayedFalse=je;exports.useDomId=ke;exports.useElementDimensions=R;exports.useElementFocus=De;exports.useEventListener=h;exports.useForwardedRef=qe;exports.useMouseIsEntered=Le;exports.useMouseIsOver=Me;exports.useMultiOnClickOutside=Fe;exports.useOnClickOutside=ze;exports.useOnNoMouseMovement=Ne;exports.useOnScreen=Pe;exports.useTimeoutState=He;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stenajs-webui/core",
-  "version": "18.0.1",
+  "version": "18.0.2",
   "description": "",
   "author": "mattias800",
   "license": "MIT",
@@ -57,10 +57,10 @@
   "files": [
     "dist"
   ],
-  "gitHead": "3b29d5277f79cfc67a462a61f27d2d586177068c",
+  "gitHead": "3e4bfbf528f68923646676835386cbd0fac6a589",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.1.0",
-    "@stenajs-webui/theme": "18.0.1",
+    "@stenajs-webui/theme": "18.0.2",
     "classnames": "^2.3.1"
   }
 }