@stenajs-webui/core 17.4.1 → 17.7.0

package/dist/index.js

@@ -1,796 +1,83 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('@stenajs-webui/theme');
-var styled = require('@emotion/styled');
-var React = require('react');
-var isPropValid = require('@emotion/is-prop-valid');
-var styledSystem = require('styled-system');
-var cx = require('classnames');
-var ReactDOM = require('react-dom');
-var lodash = require('lodash');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
-}
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var isPropValid__default = /*#__PURE__*/_interopDefaultLegacy(isPropValid);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
-
-/*! *****************************************************************************
-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__default["default"].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 = React.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__namespace.createElement(SeparatorLineComponent, { color: color, size: size, width: width, vertical: vertical, ref: ref }));
-});
-var templateObject_1$3;
-
-var ClickableElement = styled__default["default"].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 = React.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__namespace.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;
-};
-
-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 = styledSystem.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__default["default"]("div", {
-    shouldForwardProp: function (propName) {
-        return typeof propName === "string"
-            ? isExcludedWebUiProp(propName)
-                ? false
-                : isPropValid__default["default"](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, styledSystem.background, styledSystem.border, styledSystem.borderRight, styledSystem.borderLeft, styledSystem.borderTop, styledSystem.borderBottom, styledSystem.borderColor, styledSystem.borderRadius, styledSystem.borderStyle, styledSystem.borderWidth, styledSystem.boxShadow, styledSystem.flexbox, styledSystem.overflow, styledSystem.position, styledSystem.layout, styledSystem.zIndex, styledSystem.left, styledSystem.right, styledSystem.top, styledSystem.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 = React.forwardRef(function Column(props, ref) {
-    return React__namespace.createElement(Box, __assign({ ref: ref }, props));
-});
-
-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 = React.useState(), dimensions = _a[0], setDimensions = _a[1];
-    var updateDimensions = React.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]);
-    React.useLayoutEffect(function () {
-        updateDimensions();
-    }, [updateDimensions]);
-    return {
-        dimensions: dimensions,
-    };
-};
-
-var ResizeAwareBox = React.forwardRef(function ResizeAwareBox(_a, ref) {
-    var _b;
-    var onResize = _a.onResize, boxProps = __rest(_a, ["onResize"]);
-    var localRef = React.useRef(null);
-    var currentRef = (_b = ref) !== null && _b !== void 0 ? _b : localRef;
-    useElementDimensions(currentRef, onResize);
-    return React__namespace.createElement(Box, __assign({}, boxProps, { ref: ref }));
-});
-
-var Row = React.forwardRef(function Row(props, ref) {
-    return React__namespace.createElement(Box, __assign({ row: true, ref: ref }, props));
-});
-
-var Indent = React.forwardRef(function Indent(_a, ref) {
-    var _b = _a.num, num = _b === void 0 ? 1 : _b, props = __rest(_a, ["num"]);
-    return React__namespace.createElement(Box, __assign({ indent: num, ref: ref }, props));
-});
-
-var Spacing = React.forwardRef(function Spacing(_a, ref) {
-    var _b = _a.num, num = _b === void 0 ? 1 : _b, props = __rest(_a, ["num"]);
-    return React__namespace.createElement(Box, __assign({ spacing: num, ref: ref }, props));
-});
-
-var InnerSpace = styled__default["default"].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__namespace.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__namespace.createElement(React__namespace.Fragment, null, render(children));
-    }
-    return React__namespace.createElement(React__namespace.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);
-    }
-  } else {
-    head.appendChild(style);
+(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);} })();"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@stenajs-webui/theme");var L=require("@emotion/styled"),s=require("react"),l=require("react/jsx-runtime"),F=require("@emotion/is-prop-valid"),i=require("styled-system"),z=require("classnames"),N=require("react-dom"),C=require("lodash");function $(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}function P(e){if(e&&e.__esModule)return e;var t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return e&&Object.keys(e).forEach(function(r){if(r!=="default"){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var p=$(L),q=$(F),O=$(z),H=P(N);const A=p.default.hr`
+  display: flex;
+  border: 0;
+  margin: 0;
+  flex: none;
+  background-color: ${e=>e.color};
+  height: ${e=>e.vertical?e.size||"100%":e.width||"1px"};
+  width: ${e=>e.vertical?e.width||"1px":e.size||"100%"};
+`,V=s.forwardRef(({color:e="var(--lhds-color-ui-300)",size:t="100%",width:r="1px",vertical:n=!1},o)=>l.jsx(A,{color:e,size:t,width:r,vertical:n,ref:o})),U=p.default.button`
+  display: inline-block;
+  user-select: none;
+  border: 0;
+  padding: 0;
+  background: ${({background:e})=>e};
+  ${({pointer:e})=>e?"cursor: pointer;":""}
+
+  :hover {
+    ${e=>e.opacityOnHover?"opacity: 0.7;":""};
+    ${({hoverBackground:e})=>`background: ${e};`}
   }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
+  :active {
+    ${({disableOpacityOnClick:e})=>e?"":"opacity: 0.5;"}
   }
-}
-
-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 = React.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__namespace.createElement("span", __assign({ className: cx__default["default"](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__namespace.createElement(Text, __assign({ size: "small" }, props));
-};
-
-/**
- * @deprecated Please use `Text` instead.
- */
-var SmallerText = function (props) {
-    return React__namespace.createElement(Text, __assign({ size: "smaller" }, props));
-};
-
-/**
- * @deprecated Please use `Text` instead.
- */
-var StandardText = function (props) {
-    return React__namespace.createElement(Text, __assign({ size: "medium" }, props));
-};
-
-/**
- * @deprecated Please use `Text` instead.
- */
-var LargeText = function (props) {
-    return React__namespace.createElement(Text, __assign({ size: "large" }, 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 = React.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__namespace.createElement(Element, __assign({ className: cx__default["default"](styles.heading, styles[variant], className), style: __assign({ color: color, whiteSpace: whiteSpace, wordBreak: wordBreak }, style), ref: ref }, hProps), children));
-});
-
-/**
- * @deprecated Please use `Heading` instead.
- */
-var HeaderText = function (props) {
-    return React__namespace.createElement(Heading, __assign({ 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 = React.useCallback(function (item) {
-        if (!list.some(function (l) { return comparator(l, item); })) {
-            setList(__spreadArray(__spreadArray([], list, true), [item], false));
-        }
-    }, [list, setList, comparator]);
-    var addMultiple = React.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 = React.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 = React.useCallback(function (items) {
-        setList(list.filter(function (item) { return !items.some(function (l) { return comparator(l, item); }); }));
-    }, [list, setList, comparator]);
-    var toggle = React.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,
-    };
-};
-
-var useBoolean = function (initialValue) {
-    var _a = React.useState(initialValue), value = _a[0], setValue = _a[1];
-    var setTrue = React.useCallback(function () {
-        setValue(true);
-    }, [setValue]);
-    var setFalse = React.useCallback(function () {
-        setValue(false);
-    }, [setValue]);
-    var toggle = React.useCallback(function () {
-        setValue(function (v) { return !v; });
-    }, [setValue]);
-    return [value, setTrue, setFalse, toggle];
-};
-
-var useDebounce = function (value, delay) {
-    // State and setters for debounced value
-    var _a = React.useState(value), debouncedValue = _a[0], setDebouncedValue = _a[1];
-    React.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;
-};
-
-var useDelayedFalse = function (value, delay) {
-    var _a = React.useState(value), debouncedValue = _a[0], setDebouncedValue = _a[1];
-    React.useEffect(function () {
-        if (value) {
-            setDebouncedValue(true);
-        }
-        var handler = setTimeout(function () {
-            if (!value) {
-                setDebouncedValue(value);
-            }
-        }, delay);
-        return function () {
-            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 = React.useState(function () { return genId(componentName); }), id = _a[0], setId = _a[1];
-    React.useEffect(function () { return setId(genId(componentName)); }, [componentName]);
-    return id;
-};
-
-var useEventListener = function (ref, eventName, handler) {
-    // Create a ref that stores handler
-    var savedHandler = React.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.
-    React.useEffect(function () {
-        savedHandler.current = handler;
-    }, [handler]);
-    React.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
-};
-
-var useElementFocus = function (ref) {
-    var _a = useBoolean(false), isInFocus = _a[0], setIsInFocus = _a[1], setIsNotInFocus = _a[2];
-    React.useEffect(function () {
-        if (document.activeElement === ReactDOM__namespace.findDOMNode(ref.current)) {
-            setIsInFocus();
-        }
-        else {
-            setIsNotInFocus();
-        }
-    }, [ref, setIsNotInFocus, setIsInFocus]);
-    useEventListener(ref, "focus", setIsInFocus);
-    useEventListener(ref, "blur", setIsNotInFocus);
-    var focus = React.useCallback(function () {
-        if (ref.current) {
-            ref.current.focus();
-        }
-    }, [ref]);
-    var blur = React.useCallback(function () {
-        if (ref.current) {
-            ref.current.blur();
-        }
-    }, [ref]);
-    return { isInFocus: isInFocus, focus: focus, blur: 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;
-};
-
-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;
-};
-
-var useMultiOnClickOutside = function (refs, handler) {
-    var eventHandler = React.useRef(function () {
-        return;
-    });
-    React.useEffect(function () {
-        eventHandler.current = handler;
-    }, [handler]);
-    React.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));
-};
-
-var useOnClickOutside = function (ref, handler, options) {
-    var eventHandler = React.useRef(function () {
-        return;
-    });
-    React.useEffect(function () {
-        eventHandler.current = handler;
-    }, [handler]);
-    React.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]);
-};
-
-var events = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"];
-var useOnNoMouseMovement = function (callback, delay) {
-    var eventHandler = React.useRef(function () {
-        return;
-    });
-    React.useEffect(function () {
-        eventHandler.current = callback;
-    }, [callback]);
-    React.useEffect(function () {
-        var onIdleChange = lodash.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]);
-};
-
-var useOnScreen = function (ref, options) {
-    var _a = React.useState(false), isVisible = _a[0], setIsVisible = _a[1];
-    var _b = options || {}, rootMargin = _b.rootMargin, root = _b.root, threshold = _b.threshold;
-    var observer = React.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]);
-    React.useEffect(function () {
-        if (ref.current) {
-            observer.observe(ref.current);
-        }
-        return function () {
-            observer.disconnect();
-        };
-    }, [observer, ref]);
-    return isVisible;
-};
-
-var useForwardedRef = function (ref) {
-    var innerRef = React.useRef(null);
-    React.useEffect(function () {
-        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 = React.useState(initialValue), value = _a[0], setValue = _a[1];
-    var timeoutRef = React.useRef();
-    var wrappedSetter = React.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]);
-    React.useEffect(function () {
-        return function () {
-            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;
-};
-
-var truthyKeysAsList = function (r) {
-    return Object.keys(r).filter(function (key) { return r[key]; });
-};
-
-var getDataProps = function (props) { return lodash.pickBy(props, isDataPropMapper); };
-var isDataPropMapper = function (_, key) { return isDataProp(key); };
-var isDataProp = function (propName) {
-    return propName.startsWith("data-") || propName.startsWith("aria-");
-};
-
-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;
-};
-
-exports.Box = Box;
-exports.Clickable = Clickable;
-exports.Column = Column;
-exports.HeaderText = HeaderText;
-exports.Heading = Heading;
-exports.Indent = Indent;
-exports.LargeText = LargeText;
-exports.Nest = Nest;
-exports.ResizeAwareBox = ResizeAwareBox;
-exports.Row = Row;
-exports.SeparatorLine = SeparatorLine;
-exports.SmallText = SmallText;
-exports.SmallerText = SmallerText;
-exports.Space = Space;
-exports.Spacing = Spacing;
-exports.StandardText = StandardText;
-exports.Text = Text;
-exports.Txt = Txt;
-exports.booleanOrNumberToNumber = booleanOrNumberToNumber;
-exports.exhaustSwitchCase = exhaustSwitchCase;
-exports.exhaustSwitchCaseElseThrow = exhaustSwitchCaseElseThrow;
-exports.getDataProps = getDataProps;
-exports.getDimensionObject = getDimensionObject;
-exports.parseFloatElseUndefined = parseFloatElseUndefined;
-exports.parseIntElseUndefined = parseIntElseUndefined;
-exports.truthyKeysAsList = truthyKeysAsList;
-exports.useArraySet = useArraySet;
-exports.useBoolean = useBoolean;
-exports.useDebounce = useDebounce;
-exports.useDelayedFalse = useDelayedFalse;
-exports.useDomId = useDomId;
-exports.useElementDimensions = useElementDimensions;
-exports.useElementFocus = useElementFocus;
-exports.useEventListener = useEventListener;
-exports.useForwardedRef = useForwardedRef;
-exports.useMouseIsEntered = useMouseIsEntered;
-exports.useMouseIsOver = useMouseIsOver;
-exports.useMultiOnClickOutside = useMultiOnClickOutside;
-exports.useOnClickOutside = useOnClickOutside;
-exports.useOnNoMouseMovement = useOnNoMouseMovement;
-exports.useOnScreen = useOnScreen;
-exports.useTimeoutState = useTimeoutState;
+  :focus {
+    outline: 0;
+    ${({disableFocusHighlight:e})=>e?"":"box-shadow: 0 0 3pt 2pt rgba(0, 0, 100, 0.3);"}
+    ${({focusBackground:e})=>`background: ${e};`}
+  }
+  ${({width:e})=>e?`width: ${e};`:""}
+  ${({height:e})=>e?`height: ${e};`:""}
+  ${({borderRadius:e})=>e?`border-radius: ${e};`:""}
+`,B=s.forwardRef(({disableFocusHighlight:e,onClick:t,onDblClick:r,tooltip:n,disableOpacityOnClick:o,disablePointer:u,opacityOnHover:c,disabled:d,children:a,background:f="transparent",hoverBackground:m,focusBackground:b,type:T="button",...D},M)=>{const k=!!(t||r);return l.jsx(U,{opacityOnHover:c,title:n,disabled:d,disableOpacityOnClick:o,onClick:t,onDoubleClick:r,disableFocusHighlight:e,pointer:k&&!u,ref:M,background:f,hoverBackground:m,focusBackground:b,type:T,...D,children:a})}),x=e=>e==null?0:typeof e=="boolean"?e?1:0:e,K={box:"var(--swui-shadow-box)",popover:"var(--swui-shadow-popover)",modal:"var(--swui-shadow-modal)"},W=["spacing","indent","gap","width","height","overflow","display"],G=e=>W.includes(e),J=i.system({row:{property:"flexDirection",transform:e=>e?"row":"column"},indent:{property:"--current-indent",transform:x},spacing:{property:"--current-spacing",transform:x},gap:{property:"--current-gap",transform:x},shadow:{property:"boxShadow",transform:e=>{var t;return(t=K[e])!=null?t:e}}}),w=p.default("div",{shouldForwardProp:e=>typeof e=="string"?G(e)?!1:q.default(e):!1})`
+  --current-spacing: 0;
+  --current-indent: 0;
+  --current-gap: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  ${J};
+  ${i.background};
+  ${i.border};
+  ${i.borderRight};
+  ${i.borderLeft};
+  ${i.borderTop};
+  ${i.borderBottom};
+  ${i.borderColor};
+  ${i.borderRadius};
+  ${i.borderStyle};
+  ${i.borderWidth};
+  ${i.boxShadow};
+  ${i.flexbox};
+  ${i.overflow};
+  ${i.position};
+  ${i.layout};
+  ${i.zIndex};
+  ${i.left};
+  ${i.right};
+  ${i.top};
+  ${i.bottom};
+
+  gap: calc(var(--current-gap) * var(--swui-metrics-space));
+
+  padding: calc(var(--current-spacing) * var(--swui-metrics-spacing))
+    calc(var(--current-indent) * var(--swui-metrics-indent));
+  :hover {
+    ${({hoverBackground:e})=>e?`background: ${e};`:""}
+    ${({hoverBorder:e})=>e?`border: ${e};`:""}
+  }
+  :focus {
+    ${({focusBackground:e})=>e?`background: ${e};`:""}
+    ${({focusBorder:e})=>e?`border: ${e};`:""}
+  }
+  :focus-within {
+    ${({focusWithinBackground:e})=>e?`background: ${e};`:""}
+    ${({focusWithinBorder:e})=>e?`border: ${e};`:""}
+  }
+`,Q=s.forwardRef(function(t,r){return l.jsx(w,{ref:r,...t})}),I=e=>{const{x:t,y:r,width:n,height:o,bottom:u,top:c,left:d,right:a}=e.getBoundingClientRect();return{width:n,height:o,top:c,left:d,x:t,y:r,right:a,bottom:u}},X=(e,t)=>e.x===t.x&&e.y===t.y&&e.width===t.width&&e.height===t.height&&e.bottom===t.bottom&&e.top===t.top&&e.left===t.left&&e.right===t.right,R=(e,t)=>{const[r,n]=s.useState(),o=s.useCallback(()=>{window.requestAnimationFrame(()=>{if(e.current){const u=I(e.current);(!r||!X(r,u))&&t&&t(u),n(u)}})},[e,r,n,t]);return s.useLayoutEffect(()=>{o()},[o]),{dimensions:r}},Y=s.forwardRef(function({onResize:t,...r},n){const o=s.useRef(null),u=n!=null?n:o;return R(u,t),l.jsx(w,{...r,ref:n})}),Z=s.forwardRef(function(t,r){return l.jsx(w,{row:!0,ref:r,...t})}),ee=s.forwardRef(function({num:t=1,...r},n){return l.jsx(w,{indent:t,ref:n,...r})}),te=s.forwardRef(function({num:t=1,...r},n){return l.jsx(w,{spacing:t,ref:n,...r})}),re=p.default.div`
+  --current-size: 1;
+  flex: none;
+  width: calc(var(--current-size) * var(--swui-metrics-space));
+  height: calc(var(--current-size) * var(--swui-metrics-space));
+`,ne=({half:e=!1,horizontal:t=!1,num:r=1,vertical:n=!1})=>{const o=r*(e?.5:1);return l.jsx(re,{style:{["--current-size"]:o,height:t?1:void 0,width:n?1:void 0}})},se=({children:e,nest:t,render:r})=>t?l.jsx(l.Fragment,{children:r(e)}):l.jsx(l.Fragment,{children:e}),oe="_text_1iisw_1",ue="_standard_1iisw_24",ce="_bold_1iisw_27",ae="_caption_1iisw_31",ie="_overline_1iisw_39",de="_large_1iisw_48",le="_medium_1iisw_53",fe="_small_1iisw_58",me="_smaller_1iisw_63";var _={text:oe,standard:ue,bold:ce,caption:ae,overline:ie,large:de,medium:le,small:fe,smaller:me};const v=s.forwardRef(({children:e,variant:t="standard",size:r="medium",className:n,color:o,userSelect:u,whiteSpace:c,wordBreak:d,style:a,...f},m)=>l.jsx("span",{className:O.default(_.text,_[t],_[r],n),ref:m,style:{color:o,userSelect:u,whiteSpace:c,wordBreak:d,...a},...f,children:e})),he=v,we=e=>l.jsx(v,{size:"small",...e}),ve=e=>l.jsx(v,{size:"smaller",...e}),be=e=>l.jsx(v,{size:"medium",...e}),xe=e=>l.jsx(v,{size:"large",...e}),pe="_heading_1u7xw_1",ge="_h1_1u7xw_10",_e="_h2_1u7xw_15",$e="_h3_1u7xw_20",Ee="_h4_1u7xw_25",ye="_h5_1u7xw_31",Se="_h6_1u7xw_37";var E={heading:pe,h1:ge,h2:_e,h3:$e,h4:Ee,h5:ye,h6:Se};const j=s.forwardRef(({variant:e="h3",className:t,color:r,whiteSpace:n,wordBreak:o,style:u,children:c,as:d,...a},f)=>{const m=d!=null?d:e;return l.jsx(m,{className:O.default(E.heading,E[e],t),style:{color:r,whiteSpace:n,wordBreak:o,...u},ref:f,...a,children:c})}),Ce=e=>l.jsx(j,{variant:"h2",...e}),Oe=(e,t)=>e===t,Ie=(e,t,r=Oe)=>{const n=s.useCallback(a=>{e.some(f=>r(f,a))||t([...e,a])},[e,t,r]),o=s.useCallback(a=>{t(a.reduce((f,m)=>f.some(b=>r(b,m))?f:[...f,m],e))},[e,t,r]),u=s.useCallback(a=>{const f=e.findIndex(m=>r(m,a));f>=0&&t(e.filter((m,b)=>b!==f))},[e,t,r]),c=s.useCallback(a=>{t(e.filter(f=>!a.some(m=>r(m,f))))},[e,t,r]),d=s.useCallback(a=>{e.some(m=>r(m,a))?u(a):n(a)},[e,n,u,r]);return{add:n,addMultiple:o,remove:u,removeMultiple:c,toggle:d}},g=e=>{const[t,r]=s.useState(e),n=s.useCallback(()=>{r(!0)},[r]),o=s.useCallback(()=>{r(!1)},[r]),u=s.useCallback(()=>{r(c=>!c)},[r]);return[t,n,o,u]},Re=(e,t)=>{const[r,n]=s.useState(e);return s.useEffect(()=>{const o=setTimeout(()=>{n(e)},t);return()=>{clearTimeout(o)}},[e,t]),r},je=(e,t)=>{const[r,n]=s.useState(e);return s.useEffect(()=>{e&&n(!0);const o=setTimeout(()=>{e||n(e)},t);return()=>{clearTimeout(o)}},[e,t]),r};let Te=0;const y=e=>`webui-${e?e+"-":""}${++Te}`,De=e=>{const[t,r]=s.useState(()=>y(e));return s.useEffect(()=>r(y(e)),[e]),t},h=(e,t,r)=>{const n=s.useRef();s.useEffect(()=>{n.current=r},[r]),s.useEffect(()=>{if(!(e.current&&e.current.addEventListener))return;const u=d=>{if(n.current)return n.current(d)};if(!e.current)return;const c=e.current;return c.addEventListener(t,u),()=>{c&&c.removeEventListener(t,u)}},[t,e])},Me=e=>{const[t,r,n]=g(!1);s.useEffect(()=>{document.activeElement===H.findDOMNode(e.current)?r():n()},[e,n,r]),h(e,"focus",r),h(e,"blur",n);const o=s.useCallback(()=>{e.current&&e.current.focus()},[e]),u=s.useCallback(()=>{e.current&&e.current.blur()},[e]);return{isInFocus:t,focus:o,blur:u}},ke=e=>{const[t,r,n]=g(!1);return h(e,"mouseover",r),h(e,"mouseout",n),t},Le=e=>{const[t,r,n]=g(!1);return h(e,"mouseenter",r),h(e,"mouseleave",n),t},Fe=(e,t)=>{const r=s.useRef(()=>{});s.useEffect(()=>{r.current=t},[t]),s.useEffect(()=>{const n=o=>{!e.filter(c=>c.current).every(c=>c.current&&!c.current.contains(o.target))||r.current(o)};return document.addEventListener("mousedown",n),document.addEventListener("touchstart",n),()=>{document.removeEventListener("mousedown",n),document.removeEventListener("touchstart",n)}},[...e])},ze=(e,t,r)=>{const n=s.useRef(()=>{});s.useEffect(()=>{n.current=t},[t]),s.useEffect(()=>{const o=u=>{!e.current||e.current.contains(u.target)||n.current(u)};return document.addEventListener("mousedown",o,r),document.addEventListener("touchstart",o,r),()=>{document.removeEventListener("mousedown",o,r),document.removeEventListener("touchstart",o,r)}},[e,r])},S=["mousemove","mousedown","keydown","touchstart","scroll"],Ne=(e,t)=>{const r=s.useRef(()=>{});s.useEffect(()=>{r.current=e},[e]),s.useEffect(()=>{const n=C.debounce(r.current,t);return S.forEach(o=>window.addEventListener(o,n)),()=>{S.forEach(o=>window.removeEventListener(o,n))}},[t])},Pe=(e,t)=>{const[r,n]=s.useState(!1),{rootMargin:o,root:u,threshold:c}=t||{},d=s.useMemo(()=>new IntersectionObserver(([a])=>n(a.isIntersecting),{rootMargin:o,root:u,threshold:c}),[n,o,u,c]);return s.useEffect(()=>(e.current&&d.observe(e.current),()=>{d.disconnect()}),[d,e]),r},qe=e=>{const t=s.useRef(null);return s.useEffect(()=>{!e||(typeof e=="function"?e(t.current):e.current=t.current)}),t},He=(e,t,r=!0)=>{const[n,o]=s.useState(e),u=s.useRef(),c=s.useCallback((d,a=t)=>{o(d),r&&clearTimeout(u.current),u.current=setTimeout(()=>o(e),a)},[t,r,e]);return s.useEffect(()=>()=>{clearTimeout(u.current)},[]),[n,c]},Ae=e=>{throw new Error(`Switch unhandled case: ${e}`)},Ve=(e,t)=>t,Ue=e=>Object.keys(e).filter(t=>e[t]),Be=e=>C.pickBy(e,Ke),Ke=(e,t)=>We(t),We=e=>e.startsWith("data-")||e.startsWith("aria-"),Ge=e=>{try{const t=parseFloat(e);return isNaN(t)||t==null?void 0:t}catch{}},Je=e=>{try{const t=parseInt(e,10);return isNaN(t)||t==null?void 0:t}catch{}};exports.Box=w;exports.Clickable=B;exports.Column=Q;exports.HeaderText=Ce;exports.Heading=j;exports.Indent=ee;exports.LargeText=xe;exports.Nest=se;exports.ResizeAwareBox=Y;exports.Row=Z;exports.SeparatorLine=V;exports.SmallText=we;exports.SmallerText=ve;exports.Space=ne;exports.Spacing=te;exports.StandardText=be;exports.Text=v;exports.Txt=he;exports.booleanOrNumberToNumber=x;exports.exhaustSwitchCase=Ve;exports.exhaustSwitchCaseElseThrow=Ae;exports.getDataProps=Be;exports.getDimensionObject=I;exports.parseFloatElseUndefined=Ge;exports.parseIntElseUndefined=Je;exports.truthyKeysAsList=Ue;exports.useArraySet=Ie;exports.useBoolean=g;exports.useDebounce=Re;exports.useDelayedFalse=je;exports.useDomId=De;exports.useElementDimensions=R;exports.useElementFocus=Me;exports.useEventListener=h;exports.useForwardedRef=qe;exports.useMouseIsEntered=Le;exports.useMouseIsOver=ke;exports.useMultiOnClickOutside=Fe;exports.useOnClickOutside=ze;exports.useOnNoMouseMovement=Ne;exports.useOnScreen=Pe;exports.useTimeoutState=He;
 //# sourceMappingURL=index.js.map