@telefonica/mistica 10.23.0 → 10.24.0

package/dist-es/header.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import Box from './box';
 import Stack from './stack';
 import { createUseStyles } from './jss';
@@ -24,8 +25,7 @@ function _defineProperty(obj, key, value) {
 }
 function _objectSpread(target) {
     for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {
-        };
+        var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
         if (typeof Object.getOwnPropertySymbols === "function") {
             ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
@@ -39,8 +39,7 @@ function _objectSpread(target) {
     return target;
 }
 function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {
-    };
+    if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
@@ -55,10 +54,8 @@ function _objectWithoutProperties(source, excluded) {
     return target;
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {
-    };
-    var target = {
-    };
+    if (source == null) return {};
+    var target = {};
     var sourceKeys = Object.keys(source);
     var key, i;
     for(i = 0; i < sourceKeys.length; i++){
@@ -68,9 +65,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-export var Header = function(param) {
+var Header = function(param) {
     var pretitle = param.pretitle, title = param.title, preamount = param.preamount, amount = param.amount, button = param.button, subtitle = param.subtitle, isErrorAmount = param.isErrorAmount, secondaryButton = param.secondaryButton;
-    var ref = useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller;
+    var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var theme = useTheme();
     var isInverse = useIsInverseVariant();
     var renderRichText = function(richText, baseProps) {
@@ -81,7 +78,9 @@ export var Header = function(param) {
                 children: richText
             })));
         }
-        var text = richText.text, textProps = _objectWithoutProperties(richText, ["text"]);
+        var text = richText.text, textProps = _objectWithoutProperties(richText, [
+            "text"
+        ]);
         return(/*#__PURE__*/ _jsx(Text3, _objectSpread({
             regular: true
         }, baseProps, textProps, {
@@ -126,16 +125,16 @@ export var Header = function(param) {
                         primaryButton: button,
                         secondaryButton: secondaryButton
                     }),
-                    subtitle && renderRichText(subtitle, {
-                    })
+                    subtitle && renderRichText(subtitle, {})
                 ]
             })
         ]
     }));
 };
+export { Header };
 export var MainSectionHeader = function(param) {
     var title = param.title, description = param.description, button = param.button;
-    var ref = useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller;
+    var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     return(/*#__PURE__*/ _jsxs(Stack, {
         space: 32,
         children: [
@@ -174,14 +173,13 @@ export var HeaderLayout = function(param) {
     var classes = useHeaderLayoutStyles({
         isInverse: isInverse
     });
-    var ref = useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller;
+    var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     return(/*#__PURE__*/ _jsx(ResponsiveLayout, {
         className: classes.background,
         children: /*#__PURE__*/ _jsxs(ThemeVariant, {
             isInverse: isInverse,
             children: [
-                /*#__PURE__*/ _jsx(OverscrollColor, {
-                }),
+                /*#__PURE__*/ _jsx(OverscrollColor, {}),
                 isTabletOrSmaller ? /*#__PURE__*/ _jsx(Box, {
                     paddingTop: 32,
                     paddingBottom: 24,
@@ -244,14 +242,13 @@ export var MainSectionHeaderLayout = function(param) {
     var classes = useHeaderLayoutStyles({
         isInverse: isInverse
     });
-    var ref = useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller;
+    var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     return(/*#__PURE__*/ _jsx(ResponsiveLayout, {
         className: classes.background,
         children: /*#__PURE__*/ _jsxs(ThemeVariant, {
             isInverse: isInverse,
             children: [
-                /*#__PURE__*/ _jsx(OverscrollColor, {
-                }),
+                /*#__PURE__*/ _jsx(OverscrollColor, {}),
                 isTabletOrSmaller ? /*#__PURE__*/ _jsx(Box, {
                     paddingTop: 12,
                     paddingBottom: 24,

package/dist-es/highlighted-card.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
 import { createUseStyles } from './jss';
 import { useIsInverseVariant } from './theme-variant-context';
 import Box from './box';
@@ -24,8 +25,7 @@ function _defineProperty(obj, key, value) {
 }
 function _objectSpread(target) {
     for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {
-        };
+        var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
         if (typeof Object.getOwnPropertySymbols === "function") {
             ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
@@ -39,8 +39,7 @@ function _objectSpread(target) {
     return target;
 }
 function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {
-    };
+    if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
@@ -55,10 +54,8 @@ function _objectWithoutProperties(source, excluded) {
     return target;
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {
-    };
-    var target = {
-    };
+    if (source == null) return {};
+    var target = {};
     var sourceKeys = Object.keys(source);
     var key, i;
     for(i = 0; i < sourceKeys.length; i++){
@@ -68,8 +65,8 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-var _obj;
 var useStyles = createUseStyles(function(theme) {
+    var _obj;
     return {
         container: {
             display: 'flex',
@@ -143,8 +140,7 @@ var useStyles = createUseStyles(function(theme) {
     };
 });
 var Dismissable = function(param) {
-    var children = param.children, width = param.width, _onClose = param.onClose, onClose = _onClose === void 0 ? function() {
-    } : _onClose;
+    var children = param.children, width = param.width, _onClose = param.onClose, onClose = _onClose === void 0 ? function() {} : _onClose;
     var isInverse = useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse,
@@ -270,10 +266,8 @@ var HighlightedCard = function(_param) {
         onClose: props.onClose,
         "aria-label": label,
         width: props.width,
-        children: /*#__PURE__*/ _jsx(Content, _objectSpread({
-        }, props))
-    }) : /*#__PURE__*/ _jsx(Content, _objectSpread({
-    }, props, {
+        children: /*#__PURE__*/ _jsx(Content, _objectSpread({}, props))
+    }) : /*#__PURE__*/ _jsx(Content, _objectSpread({}, props, {
         "aria-label": label
     }));
 };

package/dist-es/hooks.js

@@ -2,16 +2,24 @@ import * as React from 'react';
 import ThemeContext from './theme-context';
 import ScreenSizeContext from './screen-size-context';
 import AriaIdGetterContext from './aria-id-getter-context';
+import { listenResize } from './utils/dom';
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
     var _arr = [];
     var _n = true;
     var _d = false;
-    var _e = undefined;
+    var _s, _e;
     try {
-        for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
             _arr.push(_s.value);
             if (i && _arr.length === i) break;
         }
@@ -28,10 +36,18 @@ function _iterableToArrayLimit(arr, i) {
     return _arr;
 }
 function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
 export var useTheme = function() {
     var theme = React.useContext(ThemeContext);
@@ -58,8 +74,8 @@ export var useDisableBodyScroll = function(disable) {
                 var _cssText;
                 bodyStyles = (_cssText = (ref = document.body) === null || ref === void 0 ? void 0 : ref.style.cssText) !== null && _cssText !== void 0 ? _cssText : '';
                 if (document.body) {
-                    var ref;
-                    var hasScrollbar = window.innerWidth > ((ref = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientWidth) !== null && ref !== void 0 ? ref : window.innerWidth);
+                    var ref2;
+                    var hasScrollbar = window.innerWidth > ((ref2 = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientWidth) !== null && ref2 !== void 0 ? ref2 : window.innerWidth);
                     // if the scrollbar is visible, we don't want to hide it because content will be resized
                     var overflowY = hasScrollbar ? 'scroll' : 'hidden';
                     document.body.style.cssText = "overflow:hidden;overflow-y:".concat(overflowY, ";position:fixed;top:").concat(-bodyScrollTop, "px;left:0px;right:0px;bottom:0px");
@@ -80,8 +96,7 @@ export var useDisableBodyScroll = function(disable) {
             disableBodyScroll();
             return enableBodyScroll;
         }
-        return function() {
-        };
+        return function() {};
     }, [
         disable
     ]);
@@ -89,18 +104,10 @@ export var useDisableBodyScroll = function(disable) {
 export var useScreenSize = function() {
     return React.useContext(ScreenSizeContext);
 };
-var getResizeObserverPromise = function() {
-    if (typeof window === 'undefined') {
-        return Promise.resolve(null);
-    }
-    return window.ResizeObserver ? Promise.resolve(ResizeObserver) : import(/* webpackChunkName: "@juggle/resize-observer" */ '@juggle/resize-observer').then(function(m) {
-        return m.ResizeObserver;
-    });
-};
 export var useElementDimensions = function() {
-    var ref = _slicedToArray(React.useState(0), 2), width = ref[0], setWidth = ref[1];
-    var ref1 = _slicedToArray(React.useState(0), 2), height = ref1[0], setHeight = ref1[1];
-    var ref2 = _slicedToArray(React.useState(null), 2), element = ref2[0], setElement = ref2[1];
+    var ref = _slicedToArray(React.useState(0), 2), width1 = ref[0], setWidth = ref[1];
+    var ref3 = _slicedToArray(React.useState(0), 2), height1 = ref3[0], setHeight = ref3[1];
+    var ref4 = _slicedToArray(React.useState(null), 2), element = ref4[0], setElement = ref4[1];
     var updateSize = React.useCallback(function(entries) {
         if (!entries) {
             setWidth(0);
@@ -111,7 +118,7 @@ export var useElementDimensions = function() {
         setWidth(width);
         setHeight(height);
     }, []);
-    var ref3 = React.useCallback(function(node) {
+    var ref5 = React.useCallback(function(node) {
         setElement(node);
     }, []);
     React.useEffect(function() {
@@ -120,31 +127,15 @@ export var useElementDimensions = function() {
             setHeight(0);
             return;
         }
-        var cancel = false;
-        var observerPromise = getResizeObserverPromise().then(function(ResizeObserver) {
-            if (cancel || !ResizeObserver || !element) {
-                return null;
-            }
-            var observer = new ResizeObserver(function(entries) {
-                return updateSize(entries);
-            });
-            observer.observe(element);
-            return observer;
-        });
-        return function() {
-            cancel = true;
-            observerPromise.then(function(observer) {
-                return observer === null || observer === void 0 ? void 0 : observer.disconnect();
-            });
-        };
+        return listenResize(element, updateSize);
     }, [
         element,
         updateSize
     ]);
     return {
-        width: width,
-        height: height,
-        ref: ref3
+        width: width1,
+        height: height1,
+        ref: ref5
     };
 };
 export var useAriaId = function(id) {
@@ -154,8 +145,8 @@ export var useAriaId = function(id) {
 export var useWindowSize = function() {
     var ref = _slicedToArray(React.useState(typeof window !== 'undefined' ? window.innerHeight : 1200 // Best guess
     ), 2), windowHeight = ref[0], setWindowHeight = ref[1];
-    var ref1 = _slicedToArray(React.useState(typeof window !== 'undefined' ? window.innerWidth : 800 // Best guess
-    ), 2), windowWidth = ref1[0], setWindowWidth = ref1[1];
+    var ref6 = _slicedToArray(React.useState(typeof window !== 'undefined' ? window.innerWidth : 800 // Best guess
+    ), 2), windowWidth = ref6[0], setWindowWidth = ref6[1];
     React.useEffect(function() {
         var handleResize = function() {
             setWindowHeight(window.innerHeight);
@@ -178,11 +169,11 @@ export var useWindowSize = function() {
     ]);
 };
 export var useWindowHeight = function() {
-    var ref = useWindowSize(), height = ref.height;
+    var height = useWindowSize().height;
     return height;
 };
 export var useWindowWidth = function() {
-    var ref = useWindowSize(), width = ref.width;
+    var width = useWindowSize().width;
     return width;
 };
 // React currently throws a warning when using useLayoutEffect on the server.

package/dist-es/iban-field.js

@@ -6,6 +6,11 @@ import { TextFieldBaseAutosuggest } from './text-field-base';
 import { createChangeEvent } from './utils/dom';
 import { combineRefs } from './utils/common';
 import { useTheme } from './hooks';
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
@@ -23,12 +28,14 @@ function _defineProperty(obj, key, value) {
     return obj;
 }
 function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
     var _arr = [];
     var _n = true;
     var _d = false;
-    var _e = undefined;
+    var _s, _e;
     try {
-        for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
             _arr.push(_s.value);
             if (i && _arr.length === i) break;
         }
@@ -45,12 +52,11 @@ function _iterableToArrayLimit(arr, i) {
     return _arr;
 }
 function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _objectSpread(target) {
     for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {
-        };
+        var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
         if (typeof Object.getOwnPropertySymbols === "function") {
             ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
@@ -64,8 +70,7 @@ function _objectSpread(target) {
     return target;
 }
 function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {
-    };
+    if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
@@ -80,10 +85,8 @@ function _objectWithoutProperties(source, excluded) {
     return target;
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {
-    };
-    var target = {
-    };
+    if (source == null) return {};
+    var target = {};
     var sourceKeys = Object.keys(source);
     var key, i;
     for(i = 0; i < sourceKeys.length; i++){
@@ -94,7 +97,15 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return target;
 }
 function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
 var ibanLengthByCountry = {
     ES: 24,
@@ -172,17 +183,22 @@ var getInputMaxLength = function(currentValue) {
     return expectedLength + numSpaces;
 };
 var IbanInput = function(_param) {
-    var inputRef = _param.inputRef, value = _param.value, defaultValue = _param.defaultValue, onChange = _param.onChange, other = _objectWithoutProperties(_param, ["inputRef", "value", "defaultValue", "onChange"]);
-    var ref = _slicedToArray(React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''), 2), selfValue = ref[0], setSelfValue = ref[1];
-    var ref1 = React.useRef(null);
+    var inputRef = _param.inputRef, value = _param.value, defaultValue = _param.defaultValue, onChange = _param.onChange, other = _objectWithoutProperties(_param, [
+        "inputRef",
+        "value",
+        "defaultValue",
+        "onChange"
+    ]);
+    var ref3 = _slicedToArray(React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''), 2), selfValue = ref3[0], setSelfValue = ref3[1];
+    var ref2 = React.useRef(null);
     var isControlledByParent = typeof value !== 'undefined';
     var controlledValue = isControlledByParent ? value : selfValue;
     var handleChangeValue = React.useCallback(function(newFormattedValue) {
         if (!isControlledByParent) {
             setSelfValue(newFormattedValue);
         }
-        if (ref1.current) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(createChangeEvent(ref1.current, newFormattedValue));
+        if (ref2.current) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(createChangeEvent(ref2.current, newFormattedValue));
         }
     }, [
         isControlledByParent,
@@ -197,8 +213,7 @@ var IbanInput = function(_param) {
         },
         accept: /[\dA-Za-z]+/g
     });
-    return(/*#__PURE__*/ _jsx("input", _objectSpread({
-    }, other, {
+    return(/*#__PURE__*/ _jsx("input", _objectSpread({}, other, {
         maxLength: getInputMaxLength(rifm.value),
         value: rifm.value,
         onChange: function(e) {
@@ -214,12 +229,24 @@ var IbanInput = function(_param) {
             return rifm.onChange(e);
         },
         type: "text",
-        ref: combineRefs(inputRef, ref1)
+        ref: combineRefs(inputRef, ref2)
     })));
 };
 var IbanField = function(_param) {
-    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, customValidate = _param.validate, onChange = _param.onChange, onChangeValue = _param.onChangeValue, onBlur = _param.onBlur, value = _param.value, defaultValue = _param.defaultValue, rest = _objectWithoutProperties(_param, ["disabled", "error", "helperText", "name", "optional", "validate", "onChange", "onChangeValue", "onBlur", "value", "defaultValue"]);
-    var ref = useTheme(), texts = ref.texts;
+    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, customValidate = _param.validate, onChange = _param.onChange, onChangeValue = _param.onChangeValue, onBlur = _param.onBlur, value1 = _param.value, defaultValue = _param.defaultValue, rest = _objectWithoutProperties(_param, [
+        "disabled",
+        "error",
+        "helperText",
+        "name",
+        "optional",
+        "validate",
+        "onChange",
+        "onChangeValue",
+        "onBlur",
+        "value",
+        "defaultValue"
+    ]);
+    var texts = useTheme().texts;
     var validate = function(value, rawValue) {
         if (!value) {
             return optional ? '' : texts.formFieldErrorIsMandatory;
@@ -234,7 +261,7 @@ var IbanField = function(_param) {
     };
     var fieldProps = useFieldProps({
         name: name,
-        value: value,
+        value: value1,
         defaultValue: defaultValue,
         processValue: processValue,
         helperText: helperText,
@@ -246,8 +273,7 @@ var IbanField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
-    }, rest, fieldProps, {
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
         inputComponent: IbanInput
     })));
 };

package/dist-es/icon-button.js

@@ -16,8 +16,7 @@ function _defineProperty(obj, key, value) {
 }
 function _objectSpread(target) {
     for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {
-        };
+        var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
         if (typeof Object.getOwnPropertySymbols === "function") {
             ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
@@ -66,15 +65,13 @@ var getButtonStyle = function(backgroundUrl, size, backgroundColor, iconSize, di
     var commonProps = {
         className: props.className || '',
         disabled: props.disabled,
-        style: _objectSpread({
-        }, getButtonStyle(icon, size, backgroundColor, iconSize, props.disabled), props.style),
+        style: _objectSpread({}, getButtonStyle(icon, size, backgroundColor, iconSize, props.disabled), props.style),
         trackingEvent: props.trackingEvent,
         'aria-live': props['aria-live'],
         dataAttributes: props.dataAttributes
     };
     if (props.href) {
-        return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
-        }, commonProps, {
+        return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
             href: props.href,
             newTab: props.newTab,
             "aria-label": props['aria-label'],
@@ -82,8 +79,7 @@ var getButtonStyle = function(backgroundUrl, size, backgroundColor, iconSize, di
         })));
     }
     if (props.to) {
-        return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
-        }, commonProps, {
+        return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView,
             replace: props.replace,
@@ -92,15 +88,13 @@ var getButtonStyle = function(backgroundUrl, size, backgroundColor, iconSize, di
         })));
     }
     if (props.onPress) {
-        return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
-        }, commonProps, {
+        return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
             onPress: props.onPress,
             "aria-label": props['aria-label'],
             children: !icon && React.Children.only(children)
         })));
     }
-    return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
-    }, commonProps, {
+    return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
         maybe: true,
         children: !icon && React.Children.only(children)
     })));

package/dist-es/icons/__stories__/mistica-icons-story.js

@@ -4,16 +4,23 @@ import { useCheckbox } from '../../__stories__/helpers';
 import { ThemeVariant, useTheme, Box, Stack, SearchField, Inline, DoubleField, Text } from '../..';
 import IntegerField from '../../integer-field';
 import { kebabCase, camelCase, upperFirst } from 'lodash';
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
     var _arr = [];
     var _n = true;
     var _d = false;
-    var _e = undefined;
+    var _s, _e;
     try {
-        for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
             _arr.push(_s.value);
             if (i && _arr.length === i) break;
         }
@@ -30,10 +37,18 @@ function _iterableToArrayLimit(arr, i) {
     return _arr;
 }
 function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
 /**
  * './path/icon-name-filled.tsx' => 'IconNameFilled'
@@ -61,7 +76,7 @@ export var Catalog = function() {
     var ref5 = _slicedToArray(useCheckbox('Show background', false), 2), showIConBackground = ref5[0], showIConBackgroundCheckbox = ref5[1];
     var ref6 = _slicedToArray(React.useState(''), 2), filter = ref6[0], setFilter = ref6[1];
     var ref7 = _slicedToArray(React.useState(64), 2), size = ref7[0], setSize = ref7[1];
-    var ref8 = useTheme(), colors = ref8.colors;
+    var colors = useTheme().colors;
     var getRealName = function(name) {
         return name.replace(/^Icon/, '').replace(/(Regular|Filled|Light)$/, '');
     };
@@ -105,8 +120,7 @@ export var Catalog = function() {
             /*#__PURE__*/ return _jsxs("span", {
                 children: [
                     part,
-                    /*#__PURE__*/ _jsx("wbr", {
-                    })
+                    /*#__PURE__*/ _jsx("wbr", {})
                 ]
             }, i);
         });

package/dist-es/icons/icon-amex.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 var IconAmex = function(param) {
     var _role = param.role, role = _role === void 0 ? 'presentation' : _role, _size = param.size, size = _size === void 0 ? 24 : _size;
     /*#__PURE__*/ return _jsx("svg", {

package/dist-es/icons/icon-arrow-down.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import { useTheme } from '../hooks';
 /** @deprecated use IconArrowDropDownFilled instead */ var IconArrowDown = function(param) {
     var _role = param.role, role = _role === void 0 ? 'presentation' : _role, _size = param.size, size = _size === void 0 ? 24 : _size, color = param.color, style = param.style;
-    var ref = useTheme(), colors = ref.colors;
+    var colors = useTheme().colors;
     return(/*#__PURE__*/ _jsxs("svg", {
         height: size,
         viewBox: "0 0 24 24",