@stenajs-webui/core 17.6.0 → 17.9.0

package/dist/index.es.js

@@ -1,726 +1,747 @@
-import '@stenajs-webui/theme';
-import styled from '@emotion/styled';
-import * as React from 'react';
-import { forwardRef, useState, useCallback, useLayoutEffect, useRef, useEffect, useMemo } from 'react';
-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';
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-function __makeTemplateObject(cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-}
-
-var SeparatorLineComponent = styled.hr(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  border: 0;\n  margin: 0;\n  flex: none;\n  background-color: ", ";\n  height: ", ";\n  width: ", ";\n"], ["\n  display: flex;\n  border: 0;\n  margin: 0;\n  flex: none;\n  background-color: ", ";\n  height: ", ";\n  width: ", ";\n"])), function (props) { return props.color; }, function (props) {
-    return props.vertical ? props.size || "100%" : props.width || "1px";
-}, function (props) {
-    return props.vertical ? props.width || "1px" : props.size || "100%";
-});
-var SeparatorLine = forwardRef(function (_a, ref) {
-    var _b = _a.color, color = _b === void 0 ? "var(--lhds-color-ui-300)" : _b, _c = _a.size, size = _c === void 0 ? "100%" : _c, _d = _a.width, width = _d === void 0 ? "1px" : _d, _e = _a.vertical, vertical = _e === void 0 ? false : _e;
-    return (React.createElement(SeparatorLineComponent, { color: color, size: size, width: width, vertical: vertical, ref: ref }));
-});
-var templateObject_1$3;
-
-var ClickableElement = styled.button(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: inline-block;\n  user-select: none;\n  border: 0;\n  padding: 0;\n  background: ", ";\n  ", "\n\n  :hover {\n    ", ";\n    ", "\n  }\n  :active {\n    ", "\n  }\n  :focus {\n    outline: 0;\n    ", "\n    ", "\n  }\n  ", "\n  ", "\n  ", "\n"], ["\n  display: inline-block;\n  user-select: none;\n  border: 0;\n  padding: 0;\n  background: ", ";\n  ", "\n\n  :hover {\n    ", ";\n    ", "\n  }\n  :active {\n    ", "\n  }\n  :focus {\n    outline: 0;\n    ", "\n    ", "\n  }\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
-    var background = _a.background;
-    return background;
-}, function (_a) {
-    var pointer = _a.pointer;
-    return (pointer ? "cursor: pointer;" : "");
-}, function (props) { return (props.opacityOnHover ? "opacity: 0.7;" : ""); }, function (_a) {
-    var hoverBackground = _a.hoverBackground;
-    return "background: ".concat(hoverBackground, ";");
-}, function (_a) {
-    var disableOpacityOnClick = _a.disableOpacityOnClick;
-    return !disableOpacityOnClick ? "opacity: 0.5;" : "";
-}, function (_a) {
-    var disableFocusHighlight = _a.disableFocusHighlight;
-    return disableFocusHighlight
-        ? ""
-        : "box-shadow: 0 0 3pt 2pt rgba(0, 0, 100, 0.3);";
-}, function (_a) {
-    var focusBackground = _a.focusBackground;
-    return "background: ".concat(focusBackground, ";");
-}, function (_a) {
-    var width = _a.width;
-    return (width ? "width: ".concat(width, ";") : "");
-}, function (_a) {
-    var height = _a.height;
-    return (height ? "height: ".concat(height, ";") : "");
-}, function (_a) {
-    var borderRadius = _a.borderRadius;
-    return borderRadius ? "border-radius: ".concat(borderRadius, ";") : "";
-});
-var Clickable = forwardRef(function (_a, ref) {
-    var disableFocusHighlight = _a.disableFocusHighlight, onClick = _a.onClick, onDblClick = _a.onDblClick, tooltip = _a.tooltip, disableOpacityOnClick = _a.disableOpacityOnClick, disablePointer = _a.disablePointer, opacityOnHover = _a.opacityOnHover, disabled = _a.disabled, children = _a.children, _b = _a.background, background = _b === void 0 ? "transparent" : _b, hoverBackground = _a.hoverBackground, focusBackground = _a.focusBackground, _c = _a.type, type = _c === void 0 ? "button" : _c, restProps = __rest(_a, ["disableFocusHighlight", "onClick", "onDblClick", "tooltip", "disableOpacityOnClick", "disablePointer", "opacityOnHover", "disabled", "children", "background", "hoverBackground", "focusBackground", "type"]);
-    var hasClickHandler = !!(onClick || onDblClick);
-    return (React.createElement(ClickableElement, __assign({ opacityOnHover: opacityOnHover, title: tooltip, disabled: disabled, disableOpacityOnClick: disableOpacityOnClick, onClick: onClick, onDoubleClick: onDblClick, disableFocusHighlight: disableFocusHighlight, pointer: hasClickHandler && !disablePointer, ref: ref, background: background, hoverBackground: hoverBackground, focusBackground: focusBackground, type: type }, restProps), children));
-});
-var templateObject_1$2;
-
-var booleanOrNumberToNumber = function (num) {
-    if (num == null) {
-        return 0;
-    }
-    if (typeof num === "boolean") {
-        return num ? 1 : 0;
-    }
-    return num;
+(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`
+  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`
+  display: inline-block;
+  user-select: none;
+  border: 0;
+  padding: 0;
+  background: ${({
+  background: background2
+}) => background2};
+  ${({
+  pointer
+}) => pointer ? "cursor: pointer;" : ""}
+
+  :hover {
+    ${(props) => props.opacityOnHover ? "opacity: 0.7;" : ""};
+    ${({
+  hoverBackground
+}) => `background: ${hoverBackground};`}
+  }
+  :active {
+    ${({
+  disableOpacityOnClick
+}) => !disableOpacityOnClick ? "opacity: 0.5;" : ""}
+  }
+  :focus {
+    outline: 0;
+    ${({
+  disableFocusHighlight
+}) => disableFocusHighlight ? "" : "box-shadow: 0 0 3pt 2pt rgba(0, 0, 100, 0.3);"}
+    ${({
+  focusBackground
+}) => `background: ${focusBackground};`}
+  }
+  ${({
+  width
+}) => width ? `width: ${width};` : ""}
+  ${({
+  height
+}) => height ? `height: ${height};` : ""}
+  ${({
+  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;
 };
-
-var shadows = {
-    box: "var(--swui-shadow-box)",
-    popover: "var(--swui-shadow-popover)",
-    modal: "var(--swui-shadow-modal)",
-};
-var excludedProps = [
-    "spacing",
-    "indent",
-    "gap",
-    "width",
-    "height",
-    "overflow",
-    "display",
-];
-var isExcludedWebUiProp = function (propName) {
-    return excludedProps.includes(propName);
-};
-var box = system({
-    row: {
-        property: "flexDirection",
-        transform: function (row) { return (row ? "row" : "column"); },
-    },
-    indent: {
-        // @ts-ignore
-        property: "--current-indent",
-        transform: booleanOrNumberToNumber,
-    },
-    spacing: {
-        // @ts-ignore
-        property: "--current-spacing",
-        transform: booleanOrNumberToNumber,
-    },
-    gap: {
-        // @ts-ignore
-        property: "--current-gap",
-        transform: booleanOrNumberToNumber,
-    },
-    shadow: {
-        property: "boxShadow",
-        transform: function (value) { var _a; return (_a = shadows[value]) !== null && _a !== void 0 ? _a : value; },
-    },
-});
-var Box = styled("div", {
-    shouldForwardProp: function (propName) {
-        return typeof propName === "string"
-            ? isExcludedWebUiProp(propName)
-                ? false
-                : isPropValid(propName)
-            : false;
-    },
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  --current-spacing: 0;\n  --current-indent: 0;\n  --current-gap: 0;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  gap: calc(var(--current-gap) * var(--swui-metrics-space));\n\n  padding: calc(var(--current-spacing) * var(--swui-metrics-spacing))\n    calc(var(--current-indent) * var(--swui-metrics-indent));\n  :hover {\n    ", "\n    ", "\n  }\n  :focus {\n    ", "\n    ", "\n  }\n  :focus-within {\n    ", "\n    ", "\n  }\n"], ["\n  --current-spacing: 0;\n  --current-indent: 0;\n  --current-gap: 0;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  gap: calc(var(--current-gap) * var(--swui-metrics-space));\n\n  padding: calc(var(--current-spacing) * var(--swui-metrics-spacing))\n    calc(var(--current-indent) * var(--swui-metrics-indent));\n  :hover {\n    ", "\n    ", "\n  }\n  :focus {\n    ", "\n    ", "\n  }\n  :focus-within {\n    ", "\n    ", "\n  }\n"])), box, background, border, borderRight, borderLeft, borderTop, borderBottom, borderColor, borderRadius, borderStyle, borderWidth, boxShadow, flexbox, overflow, position, layout, zIndex, left, right, top, bottom, function (_a) {
-    var hoverBackground = _a.hoverBackground;
-    return hoverBackground ? "background: ".concat(hoverBackground, ";") : "";
-}, function (_a) {
-    var hoverBorder = _a.hoverBorder;
-    return (hoverBorder ? "border: ".concat(hoverBorder, ";") : "");
-}, function (_a) {
-    var focusBackground = _a.focusBackground;
-    return focusBackground ? "background: ".concat(focusBackground, ";") : "";
-}, function (_a) {
-    var focusBorder = _a.focusBorder;
-    return (focusBorder ? "border: ".concat(focusBorder, ";") : "");
-}, function (_a) {
-    var focusWithinBackground = _a.focusWithinBackground;
-    return focusWithinBackground ? "background: ".concat(focusWithinBackground, ";") : "";
-}, function (_a) {
-    var focusWithinBorder = _a.focusWithinBorder;
-    return focusWithinBorder ? "border: ".concat(focusWithinBorder, ";") : "";
-});
-var templateObject_1$1;
-
-var Column = forwardRef(function Column(props, ref) {
-    return React.createElement(Box, __assign({ ref: ref }, props));
+const shadows = {
+  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({
+  row: {
+    property: "flexDirection",
+    transform: (row) => row ? "row" : "column"
+  },
+  indent: {
+    property: "--current-indent",
+    transform: booleanOrNumberToNumber
+  },
+  spacing: {
+    property: "--current-spacing",
+    transform: booleanOrNumberToNumber
+  },
+  gap: {
+    property: "--current-gap",
+    transform: booleanOrNumberToNumber
+  },
+  shadow: {
+    property: "boxShadow",
+    transform: (value) => {
+      var _a;
+      return (_a = shadows[value]) != null ? _a : value;
+    }
+  }
 });
-
-var getDimensionObject = function (node) {
-    var _a = node.getBoundingClientRect(), x = _a.x, y = _a.y, width = _a.width, height = _a.height, bottom = _a.bottom, top = _a.top, left = _a.left, right = _a.right;
-    return {
-        width: width,
-        height: height,
-        top: top,
-        left: left,
-        x: x,
-        y: y,
-        right: right,
-        bottom: bottom,
-    };
-};
-var isEqualDimensions = function (a, b) {
-    return 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;
-};
-var useElementDimensions = function (ref, onResizeElement) {
-    var _a = useState(), dimensions = _a[0], setDimensions = _a[1];
-    var updateDimensions = useCallback(function () {
-        window.requestAnimationFrame(function () {
-            if (ref.current) {
-                var newDimensions = getDimensionObject(ref.current);
-                if (!dimensions || !isEqualDimensions(dimensions, newDimensions)) {
-                    if (onResizeElement) {
-                        onResizeElement(newDimensions);
-                    }
-                }
-                setDimensions(newDimensions);
-            }
-        });
-    }, [ref, dimensions, setDimensions, onResizeElement]);
-    useLayoutEffect(function () {
-        updateDimensions();
-    }, [updateDimensions]);
-    return {
-        dimensions: dimensions,
-    };
+const Box = styled("div", {
+  shouldForwardProp: (propName) => typeof propName === "string" ? isExcludedWebUiProp(propName) ? false : isPropValid(propName) : false
+})`
+  --current-spacing: 0;
+  --current-indent: 0;
+  --current-gap: 0;
+  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};
+
+  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
+}) => hoverBackground ? `background: ${hoverBackground};` : ""}
+    ${({
+  hoverBorder
+}) => hoverBorder ? `border: ${hoverBorder};` : ""}
+  }
+  :focus {
+    ${({
+  focusBackground
+}) => focusBackground ? `background: ${focusBackground};` : ""}
+    ${({
+  focusBorder
+}) => focusBorder ? `border: ${focusBorder};` : ""}
+  }
+  :focus-within {
+    ${({
+  focusWithinBackground
+}) => focusWithinBackground ? `background: ${focusWithinBackground};` : ""}
+    ${({
+  focusWithinBorder
+}) => focusWithinBorder ? `border: ${focusWithinBorder};` : ""}
+  }
+`;
+const Column = forwardRef(function Column2(props, ref) {
+  return /* @__PURE__ */ jsx(Box, {
+    ref,
+    ...props
+  });
+});
+const getDimensionObject = (node) => {
+  const { x, y, width, height, bottom: bottom2, top: top2, left: left2, right: right2 } = node.getBoundingClientRect();
+  return {
+    width,
+    height,
+    top: top2,
+    left: left2,
+    x,
+    y,
+    right: right2,
+    bottom: bottom2
+  };
 };
-
-var ResizeAwareBox = forwardRef(function ResizeAwareBox(_a, ref) {
-    var _b;
-    var onResize = _a.onResize, boxProps = __rest(_a, ["onResize"]);
-    var localRef = useRef(null);
-    var currentRef = (_b = ref) !== null && _b !== void 0 ? _b : localRef;
-    useElementDimensions(currentRef, onResize);
-    return React.createElement(Box, __assign({}, boxProps, { ref: ref }));
+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(() => {
+    window.requestAnimationFrame(() => {
+      if (ref.current) {
+        const newDimensions = getDimensionObject(ref.current);
+        if (!dimensions || !isEqualDimensions(dimensions, newDimensions)) {
+          if (onResizeElement) {
+            onResizeElement(newDimensions);
+          }
+        }
+        setDimensions(newDimensions);
+      }
+    });
+  }, [ref, dimensions, setDimensions, onResizeElement]);
+  useLayoutEffect(() => {
+    updateDimensions();
+  }, [updateDimensions]);
+  return {
+    dimensions
+  };
+};
+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
+  });
 });
-
-var Row = forwardRef(function Row(props, ref) {
-    return React.createElement(Box, __assign({ row: true, ref: ref }, props));
+const Row = forwardRef(function Row2(props, ref) {
+  return /* @__PURE__ */ jsx(Box, {
+    row: true,
+    ref,
+    ...props
+  });
 });
-
-var Indent = forwardRef(function Indent(_a, ref) {
-    var _b = _a.num, num = _b === void 0 ? 1 : _b, props = __rest(_a, ["num"]);
-    return React.createElement(Box, __assign({ indent: num, ref: ref }, props));
+const Indent = forwardRef(function Indent2({
+  num = 1,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsx(Box, {
+    indent: num,
+    ref,
+    ...props
+  });
 });
-
-var Spacing = forwardRef(function Spacing(_a, ref) {
-    var _b = _a.num, num = _b === void 0 ? 1 : _b, props = __rest(_a, ["num"]);
-    return React.createElement(Box, __assign({ spacing: num, ref: ref }, props));
+const Spacing = forwardRef(function Spacing2({
+  num = 1,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsx(Box, {
+    spacing: num,
+    ref,
+    ...props
+  });
 });
-
-var InnerSpace = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --current-size: 1;\n  flex: none;\n  width: calc(var(--current-size) * var(--swui-metrics-space));\n  height: calc(var(--current-size) * var(--swui-metrics-space));\n"], ["\n  --current-size: 1;\n  flex: none;\n  width: calc(var(--current-size) * var(--swui-metrics-space));\n  height: calc(var(--current-size) * var(--swui-metrics-space));\n"])));
-var Space = function (_a) {
-    var _b;
-    var _c = _a.half, half = _c === void 0 ? false : _c, _d = _a.horizontal, horizontal = _d === void 0 ? false : _d, _e = _a.num, num = _e === void 0 ? 1 : _e, _f = _a.vertical, vertical = _f === void 0 ? false : _f;
-    var size = num * (half ? 0.5 : 1);
-    return (React.createElement(InnerSpace, { style: (_b = {},
-            _b["--current-size"] = size,
-            _b.height = horizontal ? 1 : undefined,
-            _b.width = vertical ? 1 : undefined,
-            _b) }));
-};
-var templateObject_1;
-
-var Nest = function (_a) {
-    var children = _a.children, nest = _a.nest, render = _a.render;
-    if (nest) {
-        return React.createElement(React.Fragment, null, render(children));
-    }
-    return React.createElement(React.Fragment, null, children);
-};
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
+const InnerSpace = styled.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
+}) => {
+  const size = num * (half ? 0.5 : 1);
+  return /* @__PURE__ */ jsx(InnerSpace, {
+    style: {
+      ["--current-size"]: size,
+      height: horizontal ? 1 : void 0,
+      width: vertical ? 1 : void 0
     }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
+  });
+};
+const Nest = ({
+  children,
+  nest,
+  render
+}) => {
+  if (nest) {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: render(children)
+    });
   }
-}
-
-var css_248z$1 = ".Text-module_text__2FYaC {\n  /* Theme vars */\n  --swui-text-color: var(--swui-text-primary-color);\n  --swui-text-color-caption: var(--lhds-color-ui-600);\n  --swui-text-color-overline: var(--lhds-color-ui-600);\n  --swui-text-font-family: var(--swui-font-primary);\n  --swui-text-font-weight: var(--swui-font-weight-text);\n\n  /* Current */\n  --current-color: var(--swui-text-color);\n  --current-font-size: var(--swui-font-size-medium);\n  --current-line-height: var(--swui-line-height-medium);\n  --current-font-weight: var(--swui-text-font-weight);\n  --current-letter-spacing: var(--swui-text-letter-spacing);\n\n  /* Styling */\n  font-size: var(--current-font-size);\n  line-height: var(--current-line-height);\n  color: var(--current-color);\n  letter-spacing: var(--current-letter-spacing);\n  font-family: var(--swui-text-font-family);\n  font-weight: var(--current-font-weight);\n}\n\n  .Text-module_text__2FYaC.Text-module_standard__2-bur {\n  }\n\n  .Text-module_text__2FYaC.Text-module_bold__1Knlz {\n    --current-font-weight: var(--swui-font-weight-text-bold);\n  }\n\n  .Text-module_text__2FYaC.Text-module_caption__153CS {\n    --current-font-size: var(--swui-font-size-small);\n    --current-line-height: var(--swui-line-height-small);\n    --current-color: var(--swui-text-color-caption);\n    --current-letter-spacing: 0;\n    font-style: italic;\n  }\n\n  .Text-module_text__2FYaC.Text-module_overline__22jee {\n    --current-font-size: var(--swui-font-size-smaller);\n    --current-line-height: var(--swui-line-height-smaller);\n    --current-color: var(--swui-text-color-overline);\n    --current-font-weight: var(--swui-font-weight-text-bold);\n    --current-letter-spacing: 0.1rem;\n    text-transform: uppercase;\n  }\n\n  .Text-module_text__2FYaC.Text-module_large__3TF1O {\n    --current-font-size: var(--swui-font-size-large);\n    --current-line-height: var(--swui-line-height-large);\n  }\n\n  .Text-module_text__2FYaC.Text-module_medium__1yeKe {\n    --current-font-size: var(--swui-font-size-medium);\n    --current-line-height: var(--swui-line-height-medium);\n  }\n\n  .Text-module_text__2FYaC.Text-module_small__3KAee {\n    --current-font-size: var(--swui-font-size-small);\n    --current-line-height: var(--swui-line-height-small);\n  }\n\n  .Text-module_text__2FYaC.Text-module_smaller__1mD_7 {\n    --current-font-size: var(--swui-font-size-smaller);\n    --current-line-height: var(--swui-line-height-smaller);\n  }\n";
-var styles$1 = {"text":"Text-module_text__2FYaC","standard":"Text-module_standard__2-bur","bold":"Text-module_bold__1Knlz","caption":"Text-module_caption__153CS","overline":"Text-module_overline__22jee","large":"Text-module_large__3TF1O","medium":"Text-module_medium__1yeKe","small":"Text-module_small__3KAee","smaller":"Text-module_smaller__1mD_7"};
-styleInject(css_248z$1);
-
-var Text = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? "standard" : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, className = _a.className, color = _a.color, userSelect = _a.userSelect, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, style = _a.style, spanProps = __rest(_a, ["children", "variant", "size", "className", "color", "userSelect", "whiteSpace", "wordBreak", "style"]);
-    return (React.createElement("span", __assign({ className: cx(styles$1.text, styles$1[variant], styles$1[size], className), ref: ref, style: __assign({ color: color, userSelect: userSelect, whiteSpace: whiteSpace, wordBreak: wordBreak }, style) }, spanProps), children));
-});
-var Txt = Text;
-
-/**
- * @deprecated Please use `Text` instead.
- */
-var SmallText = function (props) {
-    return React.createElement(Text, __assign({ size: "small" }, props));
+  return /* @__PURE__ */ jsx(Fragment, {
+    children
+  });
 };
-
-/**
- * @deprecated Please use `Text` instead.
- */
-var SmallerText = function (props) {
-    return React.createElement(Text, __assign({ size: "smaller" }, props));
+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
 };
-
-/**
- * @deprecated Please use `Text` instead.
- */
-var StandardText = function (props) {
-    return React.createElement(Text, __assign({ size: "medium" }, props));
+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,
+    style: {
+      color,
+      userSelect,
+      whiteSpace,
+      wordBreak,
+      ...style
+    },
+    ...spanProps,
+    children
+  });
+});
+const Txt = Text;
+const SmallText = (props) => {
+  return /* @__PURE__ */ jsx(Text, {
+    size: "small",
+    ...props
+  });
 };
-
-/**
- * @deprecated Please use `Text` instead.
- */
-var LargeText = function (props) {
-    return React.createElement(Text, __assign({ size: "large" }, props));
+const SmallerText = (props) => {
+  return /* @__PURE__ */ jsx(Text, {
+    size: "smaller",
+    ...props
+  });
 };
-
-var css_248z = ".Heading-module_heading__1Y-tN {\n  font-size: var(--swui-heading-font-size);\n  color: var(--lhds-color-ui-900);\n  letter-spacing: 0;\n  margin: 0;\n  line-height: var(--swui-heading-line-height);\n  font-family: var(--swui-font-primary);\n  font-weight: var(--swui-font-weight-text);\n}\n\n  .Heading-module_heading__1Y-tN.Heading-module_h1__3hICB {\n    --swui-heading-font-size: 2.8rem;\n    --swui-heading-line-height: 4rem;\n  }\n\n  .Heading-module_heading__1Y-tN.Heading-module_h2__2p_cD {\n    --swui-heading-font-size: 2.4rem;\n    --swui-heading-line-height: 3.2rem;\n  }\n\n  .Heading-module_heading__1Y-tN.Heading-module_h3__3qTgm {\n    --swui-heading-font-size: 2rem;\n    --swui-heading-line-height: 2.4rem;\n  }\n\n  .Heading-module_heading__1Y-tN.Heading-module_h4__2ishv {\n    --swui-heading-font-size: 1.6rem;\n    --swui-heading-line-height: 2.4rem;\n    font-weight: var(--swui-font-weight-text-bold);\n  }\n\n  .Heading-module_heading__1Y-tN.Heading-module_h5__bYa6B {\n    --swui-heading-font-size: 1.4rem;\n    --swui-heading-line-height: 1.6rem;\n    font-weight: var(--swui-font-weight-text-bold);\n  }\n\n  .Heading-module_heading__1Y-tN.Heading-module_h6__4yp37 {\n    --swui-heading-font-size: 1.2rem;\n    --swui-heading-line-height: 1.6rem;\n    font-weight: var(--swui-font-weight-text-bold);\n  }\n";
-var styles = {"heading":"Heading-module_heading__1Y-tN","h1":"Heading-module_h1__3hICB","h2":"Heading-module_h2__2p_cD","h3":"Heading-module_h3__3qTgm","h4":"Heading-module_h4__2ishv","h5":"Heading-module_h5__bYa6B","h6":"Heading-module_h6__4yp37"};
-styleInject(css_248z);
-
-var Heading = forwardRef(function (_a, ref) {
-    var _b = _a.variant, variant = _b === void 0 ? "h3" : _b, className = _a.className, color = _a.color, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, style = _a.style, children = _a.children, as = _a.as, hProps = __rest(_a, ["variant", "className", "color", "whiteSpace", "wordBreak", "style", "children", "as"]);
-    var Element = as !== null && as !== void 0 ? as : variant;
-    return (React.createElement(Element, __assign({ className: cx(styles.heading, styles[variant], className), style: __assign({ color: color, whiteSpace: whiteSpace, wordBreak: wordBreak }, style), ref: ref }, hProps), children));
+const StandardText = (props) => {
+  return /* @__PURE__ */ jsx(Text, {
+    size: "medium",
+    ...props
+  });
+};
+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
+    },
+    ref,
+    ...hProps,
+    children
+  });
 });
-
-/**
- * @deprecated Please use `Heading` instead.
- */
-var HeaderText = function (props) {
-    return React.createElement(Heading, __assign({ variant: "h2" }, props));
+const HeaderText = (props) => {
+  return /* @__PURE__ */ jsx(Heading, {
+    variant: "h2",
+    ...props
+  });
 };
-
-var defaultComparator = function (a, b) { return a === b; };
-var useArraySet = function (list, setList, comparator) {
-    if (comparator === void 0) { comparator = defaultComparator; }
-    var add = useCallback(function (item) {
-        if (!list.some(function (l) { return comparator(l, item); })) {
-            setList(__spreadArray(__spreadArray([], list, true), [item], false));
-        }
-    }, [list, setList, comparator]);
-    var addMultiple = useCallback(function (items) {
-        setList(items.reduce(function (list, item) {
-            if (!list.some(function (l) { return comparator(l, item); })) {
-                return __spreadArray(__spreadArray([], list, true), [item], false);
-            }
-            return list;
-        }, list));
-    }, [list, setList, comparator]);
-    var remove = useCallback(function (item) {
-        var index = list.findIndex(function (l) { return comparator(l, item); });
-        if (index >= 0) {
-            setList(list.filter(function (_, i) { return i !== index; }));
-        }
-    }, [list, setList, comparator]);
-    var removeMultiple = useCallback(function (items) {
-        setList(list.filter(function (item) { return !items.some(function (l) { return comparator(l, item); }); }));
-    }, [list, setList, comparator]);
-    var toggle = useCallback(function (item) {
-        var found = list.some(function (l) { return comparator(l, item); });
-        if (found) {
-            remove(item);
-        }
-        else {
-            add(item);
-        }
-    }, [list, add, remove, comparator]);
-    return {
-        add: add,
-        addMultiple: addMultiple,
-        remove: remove,
-        removeMultiple: removeMultiple,
-        toggle: toggle,
-    };
+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]);
+  return {
+    add,
+    addMultiple,
+    remove,
+    removeMultiple,
+    toggle
+  };
 };
-
-var useBoolean = function (initialValue) {
-    var _a = useState(initialValue), value = _a[0], setValue = _a[1];
-    var setTrue = useCallback(function () {
-        setValue(true);
-    }, [setValue]);
-    var setFalse = useCallback(function () {
-        setValue(false);
-    }, [setValue]);
-    var toggle = useCallback(function () {
-        setValue(function (v) { return !v; });
-    }, [setValue]);
-    return [value, setTrue, setFalse, toggle];
+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];
 };
-
-var useDebounce = function (value, delay) {
-    // State and setters for debounced value
-    var _a = useState(value), debouncedValue = _a[0], setDebouncedValue = _a[1];
-    useEffect(function () {
-        // Update debounced value after delay
-        var handler = setTimeout(function () {
-            setDebouncedValue(value);
-        }, delay);
-        // Cancel the timeout if value changes (also on delay change or unmount)
-        // This is how we prevent debounced value from updating if value is changed ...
-        // .. within the delay period. Timeout gets cleared and restarted.
-        return function () {
-            clearTimeout(handler);
-        };
-    }, [value, delay]); // Only re-call effect if value or delay changes
-    return debouncedValue;
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
 };
-
-var useDelayedFalse = function (value, delay) {
-    var _a = useState(value), debouncedValue = _a[0], setDebouncedValue = _a[1];
-    useEffect(function () {
-        if (value) {
-            setDebouncedValue(true);
-        }
-        var handler = setTimeout(function () {
-            if (!value) {
-                setDebouncedValue(value);
-            }
-        }, delay);
-        return function () {
-            clearTimeout(handler);
-        };
-    }, [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);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
 };
-
-var id = 0;
-var genId = function (componentName) {
-    return "webui-".concat(componentName ? componentName + "-" : "").concat(++id);
-};
-var useDomId = function (componentName) {
-    var _a = useState(function () { return genId(componentName); }), id = _a[0], setId = _a[1];
-    useEffect(function () { return setId(genId(componentName)); }, [componentName]);
-    return id;
+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;
 };
-
-var useEventListener = function (ref, eventName, handler) {
-    // Create a ref that stores handler
-    var savedHandler = useRef();
-    // Update ref.current value if handler changes.
-    // This allows our effect below to always get latest handler ...
-    // ... without us needing to pass it in effect deps array ...
-    // ... and potentially cause effect to re-run every render.
-    useEffect(function () {
-        savedHandler.current = handler;
-    }, [handler]);
-    useEffect(function () {
-        // Make sure element supports addEventListener
-        var isSupported = ref.current && ref.current.addEventListener;
-        if (!isSupported)
-            return;
-        // Create event listener that calls handler function stored in ref
-        var eventListener = function (event) {
-            if (savedHandler.current) {
-                return savedHandler.current(event);
-            }
-        };
-        // Add event listener
-        if (!ref.current) {
-            return;
-        }
-        var element = ref.current;
-        element.addEventListener(eventName, eventListener);
-        // Remove event listener on cleanup
-        return function () {
-            if (element) {
-                element.removeEventListener(eventName, eventListener);
-            }
-        };
-    }, [eventName, ref]); // Re-run if eventName or element changes
+const useEventListener = (ref, eventName, handler) => {
+  const savedHandler = useRef();
+  useEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+  useEffect(() => {
+    const isSupported = ref.current && ref.current.addEventListener;
+    if (!isSupported)
+      return;
+    const eventListener = (event) => {
+      if (savedHandler.current) {
+        return savedHandler.current(event);
+      }
+    };
+    if (!ref.current) {
+      return;
+    }
+    const element = ref.current;
+    element.addEventListener(eventName, eventListener);
+    return () => {
+      if (element) {
+        element.removeEventListener(eventName, eventListener);
+      }
+    };
+  }, [eventName, ref]);
 };
-
-var useElementFocus = function (ref) {
-    var _a = useBoolean(false), isInFocus = _a[0], setIsInFocus = _a[1], setIsNotInFocus = _a[2];
-    useEffect(function () {
-        if (document.activeElement === ReactDOM.findDOMNode(ref.current)) {
-            setIsInFocus();
-        }
-        else {
-            setIsNotInFocus();
-        }
-    }, [ref, setIsNotInFocus, setIsInFocus]);
-    useEventListener(ref, "focus", setIsInFocus);
-    useEventListener(ref, "blur", setIsNotInFocus);
-    var focus = useCallback(function () {
-        if (ref.current) {
-            ref.current.focus();
-        }
-    }, [ref]);
-    var blur = useCallback(function () {
-        if (ref.current) {
-            ref.current.blur();
-        }
-    }, [ref]);
-    return { isInFocus: isInFocus, focus: focus, blur: blur };
+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 };
 };
-
-var useMouseIsOver = function (ref) {
-    var _a = useBoolean(false), mouseIsOver = _a[0], setMouseIsOver = _a[1], setMouseIsNotOver = _a[2];
-    useEventListener(ref, "mouseover", setMouseIsOver);
-    useEventListener(ref, "mouseout", setMouseIsNotOver);
-    return mouseIsOver;
+const useMouseIsOver = (ref) => {
+  const [mouseIsOver, setMouseIsOver, setMouseIsNotOver] = useBoolean(false);
+  useEventListener(ref, "mouseover", setMouseIsOver);
+  useEventListener(ref, "mouseout", setMouseIsNotOver);
+  return mouseIsOver;
 };
-
-var useMouseIsEntered = function (ref) {
-    var _a = useBoolean(false), mouseIsEntered = _a[0], setMouseIsEntered = _a[1], setMouseIsNotEntered = _a[2];
-    useEventListener(ref, "mouseenter", setMouseIsEntered);
-    useEventListener(ref, "mouseleave", setMouseIsNotEntered);
-    return mouseIsEntered;
+const useMouseIsEntered = (ref) => {
+  const [mouseIsEntered, setMouseIsEntered, setMouseIsNotEntered] = useBoolean(false);
+  useEventListener(ref, "mouseenter", setMouseIsEntered);
+  useEventListener(ref, "mouseleave", setMouseIsNotEntered);
+  return mouseIsEntered;
 };
-
-var useMultiOnClickOutside = function (refs, handler) {
-    var eventHandler = useRef(function () {
-        return;
-    });
-    useEffect(function () {
-        eventHandler.current = handler;
-    }, [handler]);
-    useEffect(function () {
-        var listener = function (event) {
-            // Do nothing if clicking ref's element or descendent elements
-            var allNotContains = refs
-                .filter(function (ref) { return ref.current; })
-                .every(function (ref) {
-                return ref.current && !ref.current.contains(event.target);
-            });
-            if (!allNotContains) {
-                return;
-            }
-            eventHandler.current(event);
-        };
-        document.addEventListener("mousedown", listener);
-        document.addEventListener("touchstart", listener);
-        return function () {
-            document.removeEventListener("mousedown", listener);
-            document.removeEventListener("touchstart", listener);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, __spreadArray([], refs, true));
+const useMultiOnClickOutside = (refs, handler) => {
+  const eventHandler = useRef(() => {
+    return;
+  });
+  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);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [...refs]);
 };
-
-var useOnClickOutside = function (ref, handler, options) {
-    var eventHandler = useRef(function () {
-        return;
-    });
-    useEffect(function () {
-        eventHandler.current = handler;
-    }, [handler]);
-    useEffect(function () {
-        var listener = function (event) {
-            // Do nothing if clicking ref's element or descendent elements
-            if (!ref.current || ref.current.contains(event.target)) {
-                return;
-            }
-            eventHandler.current(event);
-        };
-        document.addEventListener("mousedown", listener, options);
-        document.addEventListener("touchstart", listener, options);
-        return function () {
-            document.removeEventListener("mousedown", listener, options);
-            document.removeEventListener("touchstart", listener, options);
-        };
-    }, [ref, options]);
+const useOnClickOutside = (ref, handler, options) => {
+  const eventHandler = useRef(() => {
+    return;
+  });
+  useEffect(() => {
+    eventHandler.current = handler;
+  }, [handler]);
+  useEffect(() => {
+    const listener = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      eventHandler.current(event);
+    };
+    document.addEventListener("mousedown", listener, options);
+    document.addEventListener("touchstart", listener, options);
+    return () => {
+      document.removeEventListener("mousedown", listener, options);
+      document.removeEventListener("touchstart", listener, options);
+    };
+  }, [ref, options]);
 };
-
-var events = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"];
-var useOnNoMouseMovement = function (callback, delay) {
-    var eventHandler = useRef(function () {
-        return;
-    });
-    useEffect(function () {
-        eventHandler.current = callback;
-    }, [callback]);
-    useEffect(function () {
-        var onIdleChange = debounce(eventHandler.current, delay);
-        events.forEach(function (event) { return window.addEventListener(event, onIdleChange); });
-        return function () {
-            events.forEach(function (event) {
-                return window.removeEventListener(event, onIdleChange);
-            });
-        };
-    }, [delay]);
+const events = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"];
+const useOnNoMouseMovement = (callback, delay) => {
+  const eventHandler = useRef(() => {
+    return;
+  });
+  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]);
 };
-
-var useOnScreen = function (ref, options) {
-    var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
-    var _b = options || {}, rootMargin = _b.rootMargin, root = _b.root, threshold = _b.threshold;
-    var observer = useMemo(function () {
-        return new IntersectionObserver(function (_a) {
-            var entry = _a[0];
-            return setIsVisible(entry.isIntersecting);
-        }, {
-            rootMargin: rootMargin,
-            root: root,
-            threshold: threshold,
-        });
-    }, [setIsVisible, rootMargin, root, threshold]);
-    useEffect(function () {
-        if (ref.current) {
-            observer.observe(ref.current);
-        }
-        return function () {
-            observer.disconnect();
-        };
-    }, [observer, ref]);
-    return isVisible;
+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();
+    };
+  }, [observer, ref]);
+  return isVisible;
 };
-
-var useForwardedRef = function (ref) {
-    var innerRef = useRef(null);
-    useEffect(function () {
-        if (!ref)
-            return;
-        if (typeof ref === "function") {
-            ref(innerRef.current);
-        }
-        else {
-            ref.current = innerRef.current;
-        }
-    });
-    return innerRef;
+const useForwardedRef = (ref) => {
+  const innerRef = useRef(null);
+  useEffect(() => {
+    if (!ref)
+      return;
+    if (typeof ref === "function") {
+      ref(innerRef.current);
+    } else {
+      ref.current = innerRef.current;
+    }
+  });
+  return innerRef;
 };
-
-var useTimeoutState = function (initialValue, defaultTimeout, clearTimeoutOnSetValue) {
-    if (clearTimeoutOnSetValue === void 0) { clearTimeoutOnSetValue = true; }
-    var _a = useState(initialValue), value = _a[0], setValue = _a[1];
-    var timeoutRef = useRef();
-    var wrappedSetter = useCallback(function (newValue, timeout) {
-        if (timeout === void 0) { timeout = defaultTimeout; }
-        setValue(newValue);
-        if (clearTimeoutOnSetValue) {
-            clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = setTimeout(function () { return setValue(initialValue); }, timeout);
-    }, [defaultTimeout, clearTimeoutOnSetValue, initialValue]);
-    useEffect(function () {
-        return function () {
-            clearTimeout(timeoutRef.current);
-        };
-    }, []);
-    return [value, wrappedSetter];
+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];
 };
-
-var exhaustSwitchCaseElseThrow = function (arg) {
-    throw new Error("Switch unhandled case: ".concat(arg));
-};
-var exhaustSwitchCase = function (_arg, fallback) {
-    return fallback;
+const exhaustSwitchCaseElseThrow = (arg) => {
+  throw new Error(`Switch unhandled case: ${arg}`);
 };
-
-var truthyKeysAsList = function (r) {
-    return Object.keys(r).filter(function (key) { return r[key]; });
+const exhaustSwitchCase = (_arg, fallback) => {
+  return fallback;
 };
-
-var getDataProps = function (props) { return pickBy(props, isDataPropMapper); };
-var isDataPropMapper = function (_, key) { return isDataProp(key); };
-var isDataProp = function (propName) {
-    return propName.startsWith("data-") || propName.startsWith("aria-");
+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) => {
+  try {
+    const f = parseFloat(s);
+    if (isNaN(f)) {
+      return void 0;
+    }
+    if (f == null) {
+      return void 0;
+    }
+    return f;
+  } catch (e) {
+  }
+  return void 0;
 };
-
-var parseFloatElseUndefined = function (s) {
-    try {
-        var f = parseFloat(s);
-        if (isNaN(f)) {
-            return undefined;
-        }
-        if (f == null) {
-            return undefined;
-        }
-        return f;
-    }
-    catch (e) { }
-    return undefined;
-};
-var parseIntElseUndefined = function (s) {
-    try {
-        var f = parseInt(s, 10);
-        if (isNaN(f)) {
-            return undefined;
-        }
-        if (f == null) {
-            return undefined;
-        }
-        return f;
-    }
-    catch (e) { }
-    return undefined;
+const parseIntElseUndefined = (s) => {
+  try {
+    const f = parseInt(s, 10);
+    if (isNaN(f)) {
+      return void 0;
+    }
+    if (f == null) {
+      return void 0;
+    }
+    return f;
+  } catch (e) {
+  }
+  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 };
 //# sourceMappingURL=index.es.js.map