@stenajs-webui/core 14.1.1 → 15.0.0-alpha.10

package/dist/index.js

@@ -13,9 +13,29 @@ 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.
@@ -55,35 +75,33 @@ function __rest(s, e) {
     return t;
 }
 
-function __spreadArrays() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+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 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  border: 0;\n  margin: 0;\n  background-color: ", ";\n  height: ", ";\n  width: ", ";\n"], ["\n  display: flex;\n  border: 0;\n  margin: 0;\n  background-color: ", ";\n  height: ",
-    ";\n  width: ",
-    ";\n"])), function (props) { return props.color; }, function (props) {
+var SeparatorLineComponent = styled__default["default"].hr(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  border: 0;\n  margin: 0;\n  background-color: ", ";\n  height: ", ";\n  width: ", ";\n"], ["\n  display: flex;\n  border: 0;\n  margin: 0;\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.createElement(SeparatorLineComponent, { color: color, size: size, width: width, vertical: vertical, ref: ref }));
+    return (React__namespace.createElement(SeparatorLineComponent, { color: color, size: size, width: width, vertical: vertical, ref: ref }));
 });
-var templateObject_1;
+var templateObject_1$3;
 
-var ClickableElement = styled__default['default'].button(templateObject_1$1 || (templateObject_1$1 = __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 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) {
@@ -116,9 +134,9 @@ var ClickableElement = styled__default['default'].button(templateObject_1$1 || (
 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.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));
+    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$1;
+var templateObject_1$2;
 
 var booleanOrNumberToNumber = function (num) {
     if (num == null) {
@@ -138,6 +156,7 @@ var shadows = {
 var excludedProps = [
     "spacing",
     "indent",
+    "gap",
     "width",
     "height",
     "overflow",
@@ -161,24 +180,25 @@ var box = styledSystem.system({
         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", {
+var Box = styled__default["default"]("div", {
     shouldForwardProp: function (propName) {
         return typeof propName === "string"
             ? isExcludedWebUiProp(propName)
                 ? false
-                : isPropValid__default['default'](propName)
+                : isPropValid__default["default"](propName)
             : false;
     },
-})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  --current-spacing: 0;\n  --current-indent: 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  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  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  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) {
+})(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: " + hoverBackground + ";" : "";
 }, function (_a) {
@@ -197,10 +217,10 @@ var Box = styled__default['default']("div", {
     var focusWithinBorder = _a.focusWithinBorder;
     return focusWithinBorder ? "border: " + focusWithinBorder + ";" : "";
 });
-var templateObject_1$2;
+var templateObject_1$1;
 
 var Column = React.forwardRef(function Column(props, ref) {
-    return React.createElement(Box, __assign({ ref: ref }, props));
+    return React__namespace.createElement(Box, __assign({ ref: ref }, props));
 });
 
 var getDimensionObject = function (node) {
@@ -255,42 +275,42 @@ var ResizeAwareBox = React.forwardRef(function ResizeAwareBox(_a, ref) {
     var localRef = React.useRef(null);
     var currentRef = (_b = ref) !== null && _b !== void 0 ? _b : localRef;
     useElementDimensions(currentRef, onResize);
-    return React.createElement(Box, __assign({}, boxProps, { ref: ref }));
+    return React__namespace.createElement(Box, __assign({}, boxProps, { ref: ref }));
 });
 
 var Row = React.forwardRef(function Row(props, ref) {
-    return React.createElement(Box, __assign({ row: true, ref: ref }, props));
+    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.createElement(Box, __assign({ indent: num, ref: ref }, props));
+    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.createElement(Box, __assign({ spacing: num, ref: ref }, props));
+    return React__namespace.createElement(Box, __assign({ spacing: num, ref: ref }, props));
 });
 
-var InnerSpace = styled__default['default'].div(templateObject_1$3 || (templateObject_1$3 = __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 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.createElement(InnerSpace, { style: (_b = {},
+    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$3;
+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__namespace.createElement(React__namespace.Fragment, null, render(children));
     }
-    return React.createElement(React.Fragment, null, children);
+    return React__namespace.createElement(React__namespace.Fragment, null, children);
 };
 
 function styleInject(css, ref) {
@@ -320,13 +340,13 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".Text-module_text__2FYaC {\n  /* Theme vars */\n  --swui-text-color: var(--swui-text-primary-color);\n  --swui-text-color-caption: var(--swui-text-primary-color);\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: 1px;\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 = {"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);
+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(--swui-text-primary-color);\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: 1px;\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, style = _a.style, spanProps = __rest(_a, ["children", "variant", "size", "className", "color", "userSelect", "whiteSpace", "style"]);
-    return (React.createElement("span", __assign({ className: cx__default['default'](styles.text, styles[variant], styles[size], className), ref: ref, style: __assign({ color: color, userSelect: userSelect, whiteSpace: whiteSpace }, style) }, spanProps), children));
+    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;
 
@@ -334,45 +354,45 @@ var Txt = Text;
  * @deprecated Please use `Text` instead.
  */
 var SmallText = function (props) {
-    return React.createElement(Text, __assign({ size: "small" }, props));
+    return React__namespace.createElement(Text, __assign({ size: "small" }, props));
 };
 
 /**
  * @deprecated Please use `Text` instead.
  */
 var SmallerText = function (props) {
-    return React.createElement(Text, __assign({ size: "smaller" }, props));
+    return React__namespace.createElement(Text, __assign({ size: "smaller" }, props));
 };
 
 /**
  * @deprecated Please use `Text` instead.
  */
 var StandardText = function (props) {
-    return React.createElement(Text, __assign({ size: "medium" }, props));
+    return React__namespace.createElement(Text, __assign({ size: "medium" }, props));
 };
 
 /**
  * @deprecated Please use `Text` instead.
  */
 var LargeText = function (props) {
-    return React.createElement(Text, __assign({ size: "large" }, props));
+    return React__namespace.createElement(Text, __assign({ size: "large" }, props));
 };
 
-var css_248z$1 = ".Heading-module_heading__1Y-tN {\n  font-size: var(--swui-heading-font-size);\n  color: var(--lhds-color-ui-800);\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: 28px;\n    --swui-heading-line-height: 32px;\n  }\n\n  .Heading-module_heading__1Y-tN.Heading-module_h2__2p_cD {\n    --swui-heading-font-size: 24px;\n    --swui-heading-line-height: 28px;\n  }\n\n  .Heading-module_heading__1Y-tN.Heading-module_h3__3qTgm {\n    --swui-heading-font-size: 20px;\n    --swui-heading-line-height: 24px;\n  }\n\n  .Heading-module_heading__1Y-tN.Heading-module_h4__2ishv {\n    --swui-heading-font-size: 16px;\n    --swui-heading-line-height: 20px;\n  }\n\n  .Heading-module_heading__1Y-tN.Heading-module_h5__bYa6B {\n    --swui-heading-font-size: 14px;\n    --swui-heading-line-height: 18px;\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: 12px;\n    --swui-heading-line-height: 16px;\n    font-weight: var(--swui-font-weight-text-bold);\n  }\n";
-var styles$1 = {"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$1);
+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: 28px;\n    --swui-heading-line-height: 32px;\n  }\n\n  .Heading-module_heading__1Y-tN.Heading-module_h2__2p_cD {\n    --swui-heading-font-size: 24px;\n    --swui-heading-line-height: 28px;\n  }\n\n  .Heading-module_heading__1Y-tN.Heading-module_h3__3qTgm {\n    --swui-heading-font-size: 20px;\n    --swui-heading-line-height: 24px;\n  }\n\n  .Heading-module_heading__1Y-tN.Heading-module_h4__2ishv {\n    --swui-heading-font-size: 16px;\n    --swui-heading-line-height: 20px;\n  }\n\n  .Heading-module_heading__1Y-tN.Heading-module_h5__bYa6B {\n    --swui-heading-font-size: 14px;\n    --swui-heading-line-height: 18px;\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: 12px;\n    --swui-heading-line-height: 16px;\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, style = _a.style, children = _a.children, as = _a.as, hProps = __rest(_a, ["variant", "className", "color", "whiteSpace", "style", "children", "as"]);
+    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__default['default'](styles$1.heading, styles$1[variant], className), style: __assign({ color: color, whiteSpace: whiteSpace }, style), ref: ref }, hProps), children));
+    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.createElement(Heading, __assign({ variant: "h2" }, props));
+    return React__namespace.createElement(Heading, __assign({ variant: "h2" }, props));
 };
 
 var defaultComparator = function (a, b) { return a === b; };
@@ -380,13 +400,13 @@ 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(__spreadArrays(list, [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 __spreadArrays(list, [item]);
+                return __spreadArray(__spreadArray([], list, true), [item], false);
             }
             return list;
         }, list));
@@ -517,7 +537,7 @@ var useEventListener = function (ref, eventName, handler) {
 var useElementFocus = function (ref) {
     var _a = useBoolean(false), isInFocus = _a[0], setIsInFocus = _a[1], setIsNotInFocus = _a[2];
     React.useEffect(function () {
-        if (document.activeElement === ReactDOM.findDOMNode(ref.current)) {
+        if (document.activeElement === ReactDOM__namespace.findDOMNode(ref.current)) {
             setIsInFocus();
         }
         else {
@@ -580,10 +600,10 @@ var useMultiOnClickOutside = function (refs, handler) {
             document.removeEventListener("touchstart", listener);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, __spreadArrays(refs));
+    }, __spreadArray([], refs, true));
 };
 
-var useOnClickOutside = function (ref, handler) {
+var useOnClickOutside = function (ref, handler, options) {
     var eventHandler = React.useRef(function () {
         return;
     });
@@ -598,13 +618,13 @@ var useOnClickOutside = function (ref, handler) {
             }
             eventHandler.current(event);
         };
-        document.addEventListener("mousedown", listener);
-        document.addEventListener("touchstart", listener);
+        document.addEventListener("mousedown", listener, options);
+        document.addEventListener("touchstart", listener, options);
         return function () {
-            document.removeEventListener("mousedown", listener);
-            document.removeEventListener("touchstart", listener);
+            document.removeEventListener("mousedown", listener, options);
+            document.removeEventListener("touchstart", listener, options);
         };
-    }, [ref]);
+    }, [ref, options]);
 };
 
 var events = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"];
@@ -692,6 +712,10 @@ var exhaustSwitchCase = function (_arg, fallback) {
     return fallback;
 };
 
+var truthyKeysAsList = function (r) {
+    return Object.keys(r).filter(function (key) { return r[key]; });
+};
+
 var parseFloatElseUndefined = function (s) {
     try {
         var f = parseFloat(s);
@@ -745,6 +769,7 @@ exports.exhaustSwitchCaseElseThrow = exhaustSwitchCaseElseThrow;
 exports.getDimensionObject = getDimensionObject;
 exports.parseFloatElseUndefined = parseFloatElseUndefined;
 exports.parseIntElseUndefined = parseIntElseUndefined;
+exports.truthyKeysAsList = truthyKeysAsList;
 exports.useArraySet = useArraySet;
 exports.useBoolean = useBoolean;
 exports.useDebounce = useDebounce;