@stenajs-webui/core 17.13.2 → 17.14.0

package/dist/index.es.js

@@ -1,155 +1,134 @@
-(function(){ try {var elementStyle = document.createElement('style'); elementStyle.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(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import "@stenajs-webui/theme";
-import styled from "@emotion/styled";
-import { forwardRef, useState, useCallback, useLayoutEffect, useRef, useEffect, useMemo } from "react";
-import { jsx, Fragment } from "react/jsx-runtime";
-import isPropValid from "@emotion/is-prop-valid";
-import { system, background, border, borderRight, borderLeft, borderTop, borderBottom, borderColor, borderRadius, borderStyle, borderWidth, boxShadow, flexbox, overflow, position, layout, zIndex, left, right, top, bottom } from "styled-system";
-import cx from "classnames";
-import * as ReactDOM from "react-dom";
-import { debounce, pickBy } from "lodash";
-const SeparatorLineComponent = styled.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_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)}})();
+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 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`
   display: flex;
   border: 0;
   margin: 0;
   flex: none;
-  background-color: ${(props) => props.color};
-  height: ${(props) => props.vertical ? props.size || "100%" : props.width || "1px"};
-  width: ${(props) => props.vertical ? props.width || "1px" : props.size || "100%"};
-`;
-const SeparatorLine = forwardRef(({
-  color = "var(--lhds-color-ui-300)",
-  size = "100%",
-  width = "1px",
-  vertical = false
-}, ref) => {
-  return /* @__PURE__ */ jsx(SeparatorLineComponent, {
-    color,
-    size,
-    width,
-    vertical,
-    ref
-  });
-});
-const ClickableElement = styled.button`
+  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(({
+  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 = x.button`
   display: inline-block;
   user-select: none;
   border: 0;
   padding: 0;
   background: ${({
-  background: background2
-}) => background2};
+  background: e
+}) => e};
   ${({
-  pointer
-}) => pointer ? "cursor: pointer;" : ""}
+  pointer: e
+}) => e ? "cursor: pointer;" : ""}
 
   :hover {
-    ${(props) => props.opacityOnHover ? "opacity: 0.7;" : ""};
+    ${(e) => e.opacityOnHover ? "opacity: 0.7;" : ""};
     ${({
-  hoverBackground
-}) => `background: ${hoverBackground};`}
+  hoverBackground: e
+}) => `background: ${e};`}
   }
   :active {
     ${({
-  disableOpacityOnClick
-}) => !disableOpacityOnClick ? "opacity: 0.5;" : ""}
+  disableOpacityOnClick: e
+}) => e ? "" : "opacity: 0.5;"}
   }
   :focus {
     outline: 0;
     ${({
-  disableFocusHighlight
-}) => disableFocusHighlight ? "" : "box-shadow: 0 0 3pt 2pt rgba(0, 0, 100, 0.3);"}
+  disableFocusHighlight: e
+}) => e ? "" : "box-shadow: 0 0 3pt 2pt rgba(0, 0, 100, 0.3);"}
     ${({
-  focusBackground
-}) => `background: ${focusBackground};`}
+  focusBackground: e
+}) => `background: ${e};`}
   }
   ${({
-  width
-}) => width ? `width: ${width};` : ""}
+  width: e
+}) => e ? `width: ${e};` : ""}
   ${({
-  height
-}) => height ? `height: ${height};` : ""}
+  height: e
+}) => e ? `height: ${e};` : ""}
   ${({
-  borderRadius: borderRadius2
-}) => borderRadius2 ? `border-radius: ${borderRadius2};` : ""}
-`;
-const Clickable = forwardRef(({
-  disableFocusHighlight,
-  onClick,
-  onDblClick,
-  tooltip,
-  disableOpacityOnClick,
-  disablePointer,
-  opacityOnHover,
-  disabled,
-  children,
-  background: background2 = "transparent",
-  hoverBackground,
-  focusBackground,
-  type = "button",
-  ...restProps
-}, ref) => {
-  const hasClickHandler = !!(onClick || onDblClick);
-  return /* @__PURE__ */ jsx(ClickableElement, {
-    opacityOnHover,
-    title: tooltip,
-    disabled,
-    disableOpacityOnClick,
-    onClick,
-    onDoubleClick: onDblClick,
-    disableFocusHighlight,
-    pointer: hasClickHandler && !disablePointer,
-    ref,
-    background: background2,
-    hoverBackground,
-    focusBackground,
-    type,
-    ...restProps,
-    children
-  });
-});
-const booleanOrNumberToNumber = (num) => {
-  if (num == null) {
-    return 0;
-  }
-  if (typeof num === "boolean") {
-    return num ? 1 : 0;
-  }
-  return num;
-};
-const shadows = {
+  borderRadius: e
+}) => e ? `border-radius: ${e};` : ""}
+`, Ke = w(({
+  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
+})), _ = (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)"
-};
-const excludedProps = ["spacing", "indent", "gap", "width", "height", "overflow", "display"];
-const isExcludedWebUiProp = (propName) => excludedProps.includes(propName);
-const box = system({
+}, de = ["spacing", "indent", "gap", "width", "height", "overflow", "display"], ae = (e) => de.includes(e), le = R({
   row: {
     property: "flexDirection",
-    transform: (row) => row ? "row" : "column"
+    transform: (e) => e ? "row" : "column"
   },
   indent: {
     property: "--current-indent",
-    transform: booleanOrNumberToNumber
+    transform: _
   },
   spacing: {
     property: "--current-spacing",
-    transform: booleanOrNumberToNumber
+    transform: _
   },
   gap: {
     property: "--current-gap",
-    transform: booleanOrNumberToNumber
+    transform: _
   },
   shadow: {
     property: "boxShadow",
-    transform: (value) => {
-      var _a;
-      return (_a = shadows[value]) != null ? _a : value;
+    transform: (e) => {
+      var t;
+      return (t = ie[e]) != null ? t : e;
     }
   }
-});
-const Box = styled("div", {
-  shouldForwardProp: (propName) => typeof propName === "string" ? isExcludedWebUiProp(propName) ? false : isPropValid(propName) : false
+}), b = x("div", {
+  shouldForwardProp: (e) => typeof e == "string" ? ae(e) ? !1 : F(e) : !1
 })`
   --current-spacing: 0;
   --current-indent: 0;
@@ -157,27 +136,27 @@ const Box = styled("div", {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  ${box};
-  ${background};
-  ${border};
-  ${borderRight};
-  ${borderLeft};
-  ${borderTop};
-  ${borderBottom};
-  ${borderColor};
-  ${borderRadius};
-  ${borderStyle};
-  ${borderWidth};
-  ${boxShadow};
-  ${flexbox};
-  ${overflow};
-  ${position};
-  ${layout};
-  ${zIndex};
-  ${left};
-  ${right};
-  ${top};
-  ${bottom};
+  ${le};
+  ${H};
+  ${N};
+  ${P};
+  ${V};
+  ${A};
+  ${j};
+  ${U};
+  ${q};
+  ${W};
+  ${B};
+  ${K};
+  ${G};
+  ${J};
+  ${Q};
+  ${X};
+  ${Y};
+  ${Z};
+  ${ee};
+  ${te};
+  ${ne};
 
   gap: calc(var(--current-gap) * var(--swui-metrics-space));
 
@@ -185,563 +164,429 @@ const Box = styled("div", {
     calc(var(--current-indent) * var(--swui-metrics-indent));
   :hover {
     ${({
-  hoverBackground
-}) => hoverBackground ? `background: ${hoverBackground};` : ""}
+  hoverBackground: e
+}) => e ? `background: ${e};` : ""}
     ${({
-  hoverBorder
-}) => hoverBorder ? `border: ${hoverBorder};` : ""}
+  hoverBorder: e
+}) => e ? `border: ${e};` : ""}
   }
   :focus {
     ${({
-  focusBackground
-}) => focusBackground ? `background: ${focusBackground};` : ""}
+  focusBackground: e
+}) => e ? `background: ${e};` : ""}
     ${({
-  focusBorder
-}) => focusBorder ? `border: ${focusBorder};` : ""}
+  focusBorder: e
+}) => e ? `border: ${e};` : ""}
   }
   :focus-within {
     ${({
-  focusWithinBackground
-}) => focusWithinBackground ? `background: ${focusWithinBackground};` : ""}
+  focusWithinBackground: e
+}) => e ? `background: ${e};` : ""}
     ${({
-  focusWithinBorder
-}) => focusWithinBorder ? `border: ${focusWithinBorder};` : ""}
+  focusWithinBorder: e
+}) => e ? `border: ${e};` : ""}
   }
-`;
-const Column = forwardRef(function Column2(props, ref) {
-  return /* @__PURE__ */ jsx(Box, {
-    ref,
-    ...props
+`, Ge = w(function(t, n) {
+  return /* @__PURE__ */ a(b, {
+    ref: n,
+    ...t
   });
-});
-const getDimensionObject = (node) => {
-  const { x, y, width, height, bottom: bottom2, top: top2, left: left2, right: right2 } = node.getBoundingClientRect();
+}), me = (e) => {
+  const { x: t, y: n, width: r, height: o, bottom: s, top: c, left: i, right: u } = e.getBoundingClientRect();
   return {
-    width,
-    height,
-    top: top2,
-    left: left2,
-    x,
-    y,
-    right: right2,
-    bottom: bottom2
+    width: r,
+    height: o,
+    top: c,
+    left: i,
+    x: t,
+    y: n,
+    right: u,
+    bottom: s
   };
-};
-const isEqualDimensions = (a, b) => a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height && a.bottom === b.bottom && a.top === b.top && a.left === b.left && a.right === b.right;
-const useElementDimensions = (ref, onResizeElement) => {
-  const [dimensions, setDimensions] = useState();
-  const updateDimensions = useCallback(() => {
+}, 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(() => {
     window.requestAnimationFrame(() => {
-      if (ref.current) {
-        const newDimensions = getDimensionObject(ref.current);
-        if (!dimensions || !isEqualDimensions(dimensions, newDimensions)) {
-          if (onResizeElement) {
-            onResizeElement(newDimensions);
-          }
-        }
-        setDimensions(newDimensions);
+      if (e.current) {
+        const s = me(e.current);
+        (!n || !he(n, s)) && t && t(s), r(s);
       }
     });
-  }, [ref, dimensions, setDimensions, onResizeElement]);
-  useLayoutEffect(() => {
-    updateDimensions();
-  }, [updateDimensions]);
-  return {
-    dimensions
+  }, [e, n, r, t]);
+  return L(() => {
+    o();
+  }, [o]), {
+    dimensions: n
   };
-};
-const ResizeAwareBox = forwardRef(function ResizeAwareBox2({
-  onResize,
-  ...boxProps
-}, ref) {
-  const localRef = useRef(null);
-  const currentRef = ref != null ? ref : localRef;
-  useElementDimensions(currentRef, onResize);
-  return /* @__PURE__ */ jsx(Box, {
-    ...boxProps,
-    ref
+}, Je = w(function({
+  onResize: t,
+  ...n
+}, r) {
+  const o = p(null), s = r != null ? r : o;
+  return we(s, t), /* @__PURE__ */ a(b, {
+    ...n,
+    ref: r
   });
-});
-const Row = forwardRef(function Row2(props, ref) {
-  return /* @__PURE__ */ jsx(Box, {
-    row: true,
-    ref,
-    ...props
+}), Qe = w(function(t, n) {
+  return /* @__PURE__ */ a(b, {
+    row: !0,
+    ref: n,
+    ...t
   });
-});
-const Indent = forwardRef(function Indent2({
-  num = 1,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsx(Box, {
-    indent: num,
-    ref,
-    ...props
+}), Xe = w(function({
+  num: t = 1,
+  ...n
+}, r) {
+  return /* @__PURE__ */ a(b, {
+    indent: t,
+    ref: r,
+    ...n
   });
-});
-const Spacing = forwardRef(function Spacing2({
-  num = 1,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsx(Box, {
-    spacing: num,
-    ref,
-    ...props
+}), Ye = w(function({
+  num: t = 1,
+  ...n
+}, r) {
+  return /* @__PURE__ */ a(b, {
+    spacing: t,
+    ref: r,
+    ...n
   });
-});
-const InnerSpace = styled.div`
+}), fe = x.div`
   --current-size: 1;
   flex: none;
   width: calc(var(--current-size) * var(--swui-metrics-space));
   height: calc(var(--current-size) * var(--swui-metrics-space));
-`;
-const Space = ({
-  half = false,
-  horizontal = false,
-  num = 1,
-  vertical = false
+`, Ze = ({
+  half: e = !1,
+  horizontal: t = !1,
+  num: n = 1,
+  vertical: r = !1
 }) => {
-  const size = num * (half ? 0.5 : 1);
-  return /* @__PURE__ */ jsx(InnerSpace, {
+  const o = n * (e ? 0.5 : 1);
+  return /* @__PURE__ */ a(fe, {
     style: {
-      ["--current-size"]: size,
-      height: horizontal ? 1 : void 0,
-      width: vertical ? 1 : void 0
+      ["--current-size"]: o,
+      height: t ? 1 : void 0,
+      width: r ? 1 : void 0
     }
   });
-};
-const Nest = ({
-  children,
-  nest,
-  render
-}) => {
-  if (nest) {
-    return /* @__PURE__ */ jsx(Fragment, {
-      children: render(children)
-    });
-  }
-  return /* @__PURE__ */ jsx(Fragment, {
-    children
-  });
-};
-const text = "_text_1iisw_1";
-const standard = "_standard_1iisw_24";
-const bold = "_bold_1iisw_27";
-const caption = "_caption_1iisw_31";
-const overline = "_overline_1iisw_39";
-const large = "_large_1iisw_48";
-const medium = "_medium_1iisw_53";
-const small = "_small_1iisw_58";
-const smaller = "_smaller_1iisw_63";
-var styles$1 = {
-  text,
-  standard,
-  bold,
-  caption,
-  overline,
-  large,
-  medium,
-  small,
-  smaller
-};
-const Text = forwardRef(({
-  children,
-  variant = "standard",
-  size = "medium",
-  className,
-  color,
-  userSelect,
-  whiteSpace,
-  wordBreak,
-  style,
-  ...spanProps
-}, ref) => {
-  return /* @__PURE__ */ jsx("span", {
-    className: cx(styles$1.text, styles$1[variant], styles$1[size], className),
-    ref,
+}, et = ({
+  children: e,
+  nest: t,
+  render: n
+}) => t ? /* @__PURE__ */ a(I, {
+  children: n(e)
+}) : /* @__PURE__ */ a(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,
+  standard: ve,
+  bold: ge,
+  caption: be,
+  overline: $e,
+  large: xe,
+  medium: _e,
+  small: ye,
+  smaller: Ee
+}, $ = w(({
+  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
+})), 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_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 = {
+  heading: Ie,
+  h1: Se,
+  h2: Ce,
+  h3: De,
+  h4: Te,
+  h5: Me,
+  h6: Oe
+}, ke = w(({
+  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,
-      userSelect,
-      whiteSpace,
-      wordBreak,
-      ...style
+      color: n,
+      whiteSpace: r,
+      wordBreak: o,
+      ...s
     },
-    ...spanProps,
-    children
-  });
-});
-const Txt = Text;
-const SmallText = (props) => {
-  return /* @__PURE__ */ jsx(Text, {
-    size: "small",
-    ...props
-  });
-};
-const SmallerText = (props) => {
-  return /* @__PURE__ */ jsx(Text, {
-    size: "smaller",
-    ...props
-  });
-};
-const StandardText = (props) => {
-  return /* @__PURE__ */ jsx(Text, {
-    size: "medium",
-    ...props
+    ref: d,
+    ...u,
+    children: c
   });
-};
-const LargeText = (props) => {
-  return /* @__PURE__ */ jsx(Text, {
-    size: "large",
-    ...props
-  });
-};
-const heading = "_heading_1u7xw_1";
-const h1 = "_h1_1u7xw_10";
-const h2 = "_h2_1u7xw_15";
-const h3 = "_h3_1u7xw_20";
-const h4 = "_h4_1u7xw_25";
-const h5 = "_h5_1u7xw_31";
-const h6 = "_h6_1u7xw_37";
-var styles = {
-  heading,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6
-};
-const Heading = forwardRef(({
-  variant = "h3",
-  className,
-  color,
-  whiteSpace,
-  wordBreak,
-  style,
-  children,
-  as,
-  ...hProps
-}, ref) => {
-  const Element = as != null ? as : variant;
-  return /* @__PURE__ */ jsx(Element, {
-    className: cx(styles.heading, styles[variant], className),
-    style: {
-      color,
-      whiteSpace,
-      wordBreak,
-      ...style
+}), ct = (e) => /* @__PURE__ */ a(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]);
     },
-    ref,
-    ...hProps,
-    children
-  });
-});
-const HeaderText = (props) => {
-  return /* @__PURE__ */ jsx(Heading, {
-    variant: "h2",
-    ...props
-  });
-};
-const defaultComparator = (a, b) => a === b;
-const useArraySet = (list, setList, comparator = defaultComparator) => {
-  const add = useCallback((item) => {
-    if (!list.some((l) => comparator(l, item))) {
-      setList([...list, item]);
-    }
-  }, [list, setList, comparator]);
-  const addMultiple = useCallback((items) => {
-    setList(items.reduce((list2, item) => {
-      if (!list2.some((l) => comparator(l, item))) {
-        return [...list2, item];
-      }
-      return list2;
-    }, list));
-  }, [list, setList, comparator]);
-  const remove = useCallback((item) => {
-    const index = list.findIndex((l) => comparator(l, item));
-    if (index >= 0) {
-      setList(list.filter((_, i) => i !== index));
-    }
-  }, [list, setList, comparator]);
-  const removeMultiple = useCallback((items) => {
-    setList(list.filter((item) => !items.some((l) => comparator(l, item))));
-  }, [list, setList, comparator]);
-  const toggle = useCallback((item) => {
-    const found = list.some((l) => comparator(l, item));
-    if (found) {
-      remove(item);
-    } else {
-      add(item);
-    }
-  }, [list, add, remove, comparator]);
+    [e, t, n]
+  ), o = h(
+    (u) => {
+      t(
+        u.reduce((d, l) => d.some((g) => n(g, l)) ? d : [...d, 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));
+    },
+    [e, t, n]
+  ), c = h(
+    (u) => {
+      t(e.filter((d) => !u.some((l) => n(l, d))));
+    },
+    [e, t, n]
+  ), i = h(
+    (u) => {
+      e.some((l) => n(l, u)) ? s(u) : r(u);
+    },
+    [e, r, s, n]
+  );
   return {
-    add,
-    addMultiple,
-    remove,
-    removeMultiple,
-    toggle
+    add: r,
+    addMultiple: o,
+    remove: s,
+    removeMultiple: c,
+    toggle: i
   };
-};
-const useBoolean = (initialValue) => {
-  const [value, setValue] = useState(initialValue);
-  const setTrue = useCallback(() => {
-    setValue(true);
-  }, [setValue]);
-  const setFalse = useCallback(() => {
-    setValue(false);
-  }, [setValue]);
-  const toggle = useCallback(() => {
-    setValue((v) => !v);
-  }, [setValue]);
-  return [value, setTrue, setFalse, toggle];
-};
-const useDebounce = (value, delay) => {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
+}, E = (e) => {
+  const [t, n] = f(e), r = h(() => {
+    n(!0);
+  }, [n]), o = h(() => {
+    n(!1);
+  }, [n]), s = h(() => {
+    n((c) => !c);
+  }, [n]);
+  return [t, r, o, s];
+}, it = (e, t) => {
+  const [n, r] = f(e);
+  return m(() => {
+    const o = setTimeout(() => {
+      r(e);
+    }, t);
     return () => {
-      clearTimeout(handler);
+      clearTimeout(o);
     };
-  }, [value, delay]);
-  return debouncedValue;
-};
-const useDelayedFalse = (value, delay) => {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  useEffect(() => {
-    if (value) {
-      setDebouncedValue(true);
-    }
-    const handler = setTimeout(() => {
-      if (!value) {
-        setDebouncedValue(value);
-      }
-    }, delay);
+  }, [e, t]), n;
+}, dt = (e, t) => {
+  const [n, r] = f(e);
+  return m(() => {
+    e && r(!0);
+    const o = setTimeout(() => {
+      e || r(e);
+    }, t);
     return () => {
-      clearTimeout(handler);
+      clearTimeout(o);
     };
-  }, [value, delay]);
-  return debouncedValue;
-};
-let id = 0;
-const genId = (componentName) => `webui-${componentName ? componentName + "-" : ""}${++id}`;
-const useDomId = (componentName) => {
-  const [id2, setId] = useState(() => genId(componentName));
-  useEffect(() => setId(genId(componentName)), [componentName]);
-  return id2;
-};
-const useEventListener = (ref, eventName, handler) => {
-  const savedHandler = useRef();
-  useEffect(() => {
-    savedHandler.current = handler;
-  }, [handler]);
-  useEffect(() => {
-    const isSupported = ref.current && ref.current.addEventListener;
-    if (!isSupported)
+  }, [e, t]), n;
+};
+let ze = 0;
+const C = (e) => `webui-${e ? e + "-" : ""}${++ze}`, at = (e) => {
+  const [t, n] = f(() => C(e));
+  return m(() => n(C(e)), [e]), t;
+}, v = (e, t, n) => {
+  const r = p();
+  m(() => {
+    r.current = n;
+  }, [n]), m(() => {
+    if (!(e.current && e.current.addEventListener))
       return;
-    const eventListener = (event) => {
-      if (savedHandler.current) {
-        return savedHandler.current(event);
-      }
+    const s = (i) => {
+      if (r.current)
+        return r.current(i);
     };
-    if (!ref.current) {
+    if (!e.current)
       return;
-    }
-    const element = ref.current;
-    element.addEventListener(eventName, eventListener);
-    return () => {
-      if (element) {
-        element.removeEventListener(eventName, eventListener);
-      }
+    const c = e.current;
+    return c.addEventListener(t, s), () => {
+      c && c.removeEventListener(t, s);
     };
-  }, [eventName, ref]);
-};
-const useElementFocus = (ref) => {
-  const [isInFocus, setIsInFocus, setIsNotInFocus] = useBoolean(false);
-  useEffect(() => {
-    if (document.activeElement === ReactDOM.findDOMNode(ref.current)) {
-      setIsInFocus();
-    } else {
-      setIsNotInFocus();
-    }
-  }, [ref, setIsNotInFocus, setIsInFocus]);
-  useEventListener(ref, "focus", setIsInFocus);
-  useEventListener(ref, "blur", setIsNotInFocus);
-  const focus = useCallback(() => {
-    if (ref.current) {
-      ref.current.focus();
-    }
-  }, [ref]);
-  const blur = useCallback(() => {
-    if (ref.current) {
-      ref.current.blur();
-    }
-  }, [ref]);
-  return { isInFocus, focus, blur };
-};
-const useMouseIsOver = (ref) => {
-  const [mouseIsOver, setMouseIsOver, setMouseIsNotOver] = useBoolean(false);
-  useEventListener(ref, "mouseover", setMouseIsOver);
-  useEventListener(ref, "mouseout", setMouseIsNotOver);
-  return mouseIsOver;
-};
-const useMouseIsEntered = (ref) => {
-  const [mouseIsEntered, setMouseIsEntered, setMouseIsNotEntered] = useBoolean(false);
-  useEventListener(ref, "mouseenter", setMouseIsEntered);
-  useEventListener(ref, "mouseleave", setMouseIsNotEntered);
-  return mouseIsEntered;
-};
-const useMultiOnClickOutside = (refs, handler) => {
-  const eventHandler = useRef(() => {
-    return;
+  }, [t, e]);
+}, lt = (e) => {
+  const [t, n, r] = E(!1);
+  m(() => {
+    document.activeElement === re.findDOMNode(e.current) ? n() : r();
+  }, [e, r, n]), v(e, "focus", n), v(e, "blur", r);
+  const o = h(() => {
+    e.current && e.current.focus();
+  }, [e]), s = h(() => {
+    e.current && e.current.blur();
+  }, [e]);
+  return { isInFocus: t, focus: o, blur: s };
+}, mt = (e) => {
+  const [t, n, r] = E(!1);
+  return v(e, "mouseover", n), v(e, "mouseout", r), t;
+}, ht = (e) => {
+  const [t, n, r] = E(!1);
+  return v(e, "mouseenter", n), v(e, "mouseleave", r), t;
+}, wt = (e, t) => {
+  const n = p(() => {
   });
-  useEffect(() => {
-    eventHandler.current = handler;
-  }, [handler]);
-  useEffect(() => {
-    const listener = (event) => {
-      const allNotContains = refs.filter((ref) => ref.current).every((ref) => {
-        return ref.current && !ref.current.contains(event.target);
-      });
-      if (!allNotContains) {
-        return;
-      }
-      eventHandler.current(event);
+  m(() => {
+    n.current = t;
+  }, [t]), m(() => {
+    const r = (o) => {
+      !e.filter((c) => c.current).every((c) => c.current && !c.current.contains(o.target)) || n.current(o);
     };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
+    return document.addEventListener("mousedown", r), document.addEventListener("touchstart", r), () => {
+      document.removeEventListener("mousedown", r), document.removeEventListener("touchstart", r);
     };
-  }, [...refs]);
-};
-const useOnClickOutside = (ref, handler, options) => {
-  const eventHandler = useRef(() => {
-    return;
+  }, [...e]);
+}, ft = (e, t, n) => {
+  const r = p(() => {
   });
-  useEffect(() => {
-    eventHandler.current = handler;
-  }, [handler]);
-  useEffect(() => {
-    const listener = (event) => {
-      if (!ref.current || ref.current.contains(event.target)) {
-        return;
-      }
-      eventHandler.current(event);
+  m(() => {
+    r.current = t;
+  }, [t]), m(() => {
+    const o = (s) => {
+      !e.current || e.current.contains(s.target) || r.current(s);
     };
-    document.addEventListener("mousedown", listener, options);
-    document.addEventListener("touchstart", listener, options);
-    return () => {
-      document.removeEventListener("mousedown", listener, options);
-      document.removeEventListener("touchstart", listener, options);
+    return document.addEventListener("mousedown", o, n), document.addEventListener("touchstart", o, n), () => {
+      document.removeEventListener("mousedown", o, n), document.removeEventListener("touchstart", o, n);
     };
-  }, [ref, options]);
-};
-const events = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"];
-const useOnNoMouseMovement = (callback, delay) => {
-  const eventHandler = useRef(() => {
-    return;
+  }, [e, n]);
+}, D = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"], pt = (e, t) => {
+  const n = p(() => {
   });
-  useEffect(() => {
-    eventHandler.current = callback;
-  }, [callback]);
-  useEffect(() => {
-    const onIdleChange = debounce(eventHandler.current, delay);
-    events.forEach((event) => window.addEventListener(event, onIdleChange));
-    return () => {
-      events.forEach((event) => window.removeEventListener(event, onIdleChange));
-    };
-  }, [delay]);
-};
-const useOnScreen = (ref, options) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const { rootMargin, root, threshold } = options || {};
-  const observer = useMemo(() => {
-    return new IntersectionObserver(([entry]) => setIsVisible(entry.isIntersecting), {
-      rootMargin,
-      root,
-      threshold
-    });
-  }, [setIsVisible, rootMargin, root, threshold]);
-  useEffect(() => {
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
-    return () => {
-      observer.disconnect();
+  m(() => {
+    n.current = e;
+  }, [e]), m(() => {
+    const r = oe(n.current, t);
+    return D.forEach((o) => window.addEventListener(o, r)), () => {
+      D.forEach(
+        (o) => window.removeEventListener(o, r)
+      );
     };
-  }, [observer, ref]);
-  return isVisible;
-};
-const useForwardedRef = (ref) => {
-  const innerRef = useRef(null);
-  useEffect(() => {
-    if (!ref)
-      return;
-    if (typeof ref === "function") {
-      ref(innerRef.current);
-    } else {
-      ref.current = innerRef.current;
+  }, [t]);
+}, vt = (e, t) => {
+  const [n, r] = f(!1), { rootMargin: o, root: s, threshold: c } = t || {}, i = z(() => new IntersectionObserver(
+    ([u]) => r(u.isIntersecting),
+    {
+      rootMargin: o,
+      root: s,
+      threshold: c
     }
-  });
-  return innerRef;
-};
-const useTimeoutState = (initialValue, defaultTimeout, clearTimeoutOnSetValue = true) => {
-  const [value, setValue] = useState(initialValue);
-  const timeoutRef = useRef();
-  const wrappedSetter = useCallback((newValue, timeout = defaultTimeout) => {
-    setValue(newValue);
-    if (clearTimeoutOnSetValue) {
-      clearTimeout(timeoutRef.current);
-    }
-    timeoutRef.current = setTimeout(() => setValue(initialValue), timeout);
-  }, [defaultTimeout, clearTimeoutOnSetValue, initialValue]);
-  useEffect(() => {
-    return () => {
-      clearTimeout(timeoutRef.current);
-    };
-  }, []);
-  return [value, wrappedSetter];
-};
-const exhaustSwitchCaseElseThrow = (arg) => {
-  throw new Error(`Switch unhandled case: ${arg}`);
-};
-const exhaustSwitchCase = (_arg, fallback) => {
-  return fallback;
-};
-const truthyKeysAsList = (r) => Object.keys(r).filter((key) => r[key]);
-const getDataProps = (props) => pickBy(props, isDataPropMapper);
-const isDataPropMapper = (_, key) => isDataProp(key);
-const isDataProp = (propName) => propName.startsWith("data-") || propName.startsWith("aria-");
-const parseFloatElseUndefined = (s) => {
+  ), [r, o, s, c]);
+  return m(() => (e.current && i.observe(e.current), () => {
+    i.disconnect();
+  }), [i, e]), n;
+}, gt = (e) => {
+  const t = p(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(
+    (i, u = t) => {
+      o(i), n && clearTimeout(s.current), s.current = setTimeout(() => o(e), u);
+    },
+    [t, n, e]
+  );
+  return m(() => () => {
+    clearTimeout(s.current);
+  }, []), [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) => {
   try {
-    const f = parseFloat(s);
-    if (isNaN(f)) {
-      return void 0;
-    }
-    if (f == null) {
-      return void 0;
-    }
-    return f;
-  } catch (e) {
+    const t = parseFloat(e);
+    return isNaN(t) || t == null ? void 0 : t;
+  } catch {
   }
-  return void 0;
-};
-const parseIntElseUndefined = (s) => {
+}, It = (e) => {
   try {
-    const f = parseInt(s, 10);
-    if (isNaN(f)) {
-      return void 0;
-    }
-    if (f == null) {
-      return void 0;
-    }
-    return f;
-  } catch (e) {
+    const t = parseInt(e, 10);
+    return isNaN(t) || t == null ? void 0 : t;
+  } catch {
   }
-  return void 0;
 };
-export { Box, Clickable, Column, HeaderText, Heading, Indent, LargeText, Nest, ResizeAwareBox, Row, SeparatorLine, SmallText, SmallerText, Space, Spacing, StandardText, Text, Txt, booleanOrNumberToNumber, exhaustSwitchCase, exhaustSwitchCaseElseThrow, getDataProps, getDimensionObject, parseFloatElseUndefined, parseIntElseUndefined, truthyKeysAsList, useArraySet, useBoolean, useDebounce, useDelayedFalse, useDomId, useElementDimensions, useElementFocus, useEventListener, useForwardedRef, useMouseIsEntered, useMouseIsOver, useMultiOnClickOutside, useOnClickOutside, useOnNoMouseMovement, useOnScreen, useTimeoutState };
+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,
+  _ as booleanOrNumberToNumber,
+  xt as exhaustSwitchCase,
+  $t as exhaustSwitchCaseElseThrow,
+  yt as getDataProps,
+  me as getDimensionObject,
+  Et as parseFloatElseUndefined,
+  It as parseIntElseUndefined,
+  _t as truthyKeysAsList,
+  ut as useArraySet,
+  E as useBoolean,
+  it as useDebounce,
+  dt as useDelayedFalse,
+  at as useDomId,
+  we 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,
+  vt as useOnScreen,
+  bt as useTimeoutState
+};
 //# sourceMappingURL=index.es.js.map