@telefonica/mistica 11.2.1 → 11.3.0

package/dist-es/text-field-components.js

@@ -1,10 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import classnames from 'classnames';
-import { createUseStyles } from './jss';
-import { useIsInverseVariant } from './theme-variant-context';
-import { useTheme } from './hooks';
-import { Text1 } from './text';
 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];
@@ -79,47 +72,54 @@ function _unsupportedIterableToArray(o, minLen) {
     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);
 }
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import classnames from "classnames";
+import { createUseStyles } from "./jss";
+import { useIsInverseVariant } from "./theme-variant-context";
+import { useTheme } from "./hooks";
+import { Text1 } from "./text";
 export var DEFAULT_WIDTH = 328;
 export var LABEL_LEFT_POSITION = 12;
 // to scale to the correct text-preset when the transition applies
-export var LABEL_SCALE_DESKTOP = parseFloat('0.78'); // Text1/Text3 = 14/18 (desktop)
-export var LABEL_SCALE_MOBILE = parseFloat('0.75'); // Text1/Text3 = 12/16 (mobile)
+export var LABEL_SCALE_DESKTOP = parseFloat("0.78"); // Text1/Text3 = 14/18 (desktop)
+export var LABEL_SCALE_MOBILE = parseFloat("0.75"); // Text1/Text3 = 12/16 (mobile)
 var useLabelStyles = createUseStyles(function(theme) {
     var _obj;
     return {
         labelContainer: (_obj = {
-            position: 'absolute',
-            pointerEvents: 'none',
+            position: "absolute",
+            pointerEvents: "none",
             left: LABEL_LEFT_POSITION,
             top: 0,
-            transformOrigin: '0 0',
+            transformOrigin: "0 0",
             height: 24,
-            display: 'flex',
-            flexDirection: 'row',
-            transform: 'translateY(18px) scale(1)',
+            display: "flex",
+            flexDirection: "row",
+            transform: "translateY(18px) scale(1)",
             fontSize: 18,
-            lineHeight: '24px',
+            lineHeight: "24px",
             color: function(param) {
                 var inputState = param.inputState, error = param.error;
-                if (error && inputState !== 'default') {
+                if (error && inputState !== "default") {
                     return theme.colors.error;
                 }
-                if (inputState === 'focused') {
+                if (inputState === "focused") {
                     return theme.colors.controlActivated;
                 }
                 return theme.colors.textSecondary;
             }
         }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
             fontSize: 16,
-            transform: 'translateY(16px) scale(1)'
+            transform: "translateY(16px) scale(1)"
         }), _defineProperty(_obj, "width", "calc(100% - ".concat(LABEL_LEFT_POSITION * 2, "px)")), _obj),
         labelText: {
-            '-webkit-line-clamp': 1,
+            "-webkit-line-clamp": 1,
             lineClamp: 1,
-            wordBreak: 'break-all',
-            display: 'box',
-            overflow: 'hidden',
-            boxOrient: 'vertical',
+            wordBreak: "break-all",
+            display: "box",
+            overflow: "hidden",
+            boxOrient: "vertical",
             flexShrink: 1
         },
         shrinked: _defineProperty({
@@ -137,26 +137,26 @@ var useLabelStyles = createUseStyles(function(theme) {
 });
 export var Label = function(param) {
     var shrinkLabel = param.shrinkLabel, forId = param.forId, inputState = param.inputState, error = param.error, children = param.children, style = param.style, optional = param.optional;
-    var isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
+    var isShrinked = shrinkLabel || inputState === "focused" || inputState === "filled";
     var classes = useLabelStyles({
         inputState: inputState,
         error: error
     });
-    var ref = _slicedToArray(React.useState(''), 2), transitionStyle = ref[0], setTransitionStyle = ref[1];
+    var ref = _slicedToArray(React.useState(""), 2), transitionStyle = ref[0], setTransitionStyle = ref[1];
     var texts = useTheme().texts;
     // This way we prevent animation when field is filled as initial state
     React.useEffect(function() {
         var tid = setTimeout(function() {
             // Check environment or we will get a warning if this gets executed outside @testing-library/act
-            if (process.env.NODE_ENV !== 'test') {
-                setTransitionStyle('transform 150ms, width 150ms');
+            if (process.env.NODE_ENV !== "test") {
+                setTransitionStyle("transform 150ms, width 150ms");
             }
         });
         return function() {
             clearTimeout(tid);
         };
     }, []);
-    return(/*#__PURE__*/ _jsxs("label", {
+    return /*#__PURE__*/ _jsxs("label", {
         className: classnames(classes.labelContainer, _defineProperty({}, classes.shrinked, isShrinked)),
         htmlFor: forId,
         style: _objectSpread({}, style, {
@@ -175,25 +175,25 @@ export var Label = function(param) {
                 ]
             }) : null
         ]
-    }));
+    });
 };
 var useHelperTextStyles = createUseStyles(function() {
     return {
         helperContainer: {
             paddingLeft: 12,
             paddingRight: 16,
-            '& div': {
+            "& div": {
                 margin: 0,
                 marginTop: 4,
                 flexGrow: 1
             },
-            display: 'flex'
+            display: "flex"
         },
         leftText: {
-            textAlign: 'left'
+            textAlign: "left"
         },
         rightText: {
-            textAlign: 'right'
+            textAlign: "right"
         }
     };
 });
@@ -204,7 +204,7 @@ export var HelperText = function(param) {
     var classes = useHelperTextStyles();
     var leftColor = isInverse ? colors.textPrimaryInverse : error ? colors.error : colors.textSecondary;
     var rightColor = isInverse ? colors.textPrimaryInverse : colors.textSecondary;
-    return(/*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         className: classes.helperContainer,
         children: [
             leftText && /*#__PURE__*/ _jsx("div", {
@@ -226,7 +226,7 @@ export var HelperText = function(param) {
                 })
             })
         ]
-    }));
+    });
 };
 var useFieldContainerStyles = createUseStyles(function(theme) {
     var _obj, _obj1;
@@ -236,19 +236,19 @@ var useFieldContainerStyles = createUseStyles(function(theme) {
                 var disabled = param.disabled;
                 return disabled ? 0.5 : 1;
             },
-            display: 'flex',
-            flexDirection: 'column',
+            display: "flex",
+            flexDirection: "column",
             minWidth: 96
         }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
-            width: '100%'
+            width: "100%"
         }), _defineProperty(_obj, theme.mq.desktopOrBigger, {
             width: function(param) {
                 var fullWidth = param.fullWidth;
-                return fullWidth ? '100%' : DEFAULT_WIDTH;
+                return fullWidth ? "100%" : DEFAULT_WIDTH;
             }
         }), _obj),
         border: (_obj1 = {
-            overflow: 'hidden',
+            overflow: "hidden",
             border: "1px solid ".concat(theme.colors.border),
             borderRadius: 4,
             height: function(param) {
@@ -260,7 +260,7 @@ var useFieldContainerStyles = createUseStyles(function(theme) {
                 var multiline = param.multiline;
                 return multiline ? 152 : 56;
             }
-        }), _defineProperty(_obj1, "display", 'flex'), _defineProperty(_obj1, "position", 'relative'), _defineProperty(_obj1, "backgroundColor", theme.colors.backgroundContainer), _obj1)
+        }), _defineProperty(_obj1, "display", "flex"), _defineProperty(_obj1, "position", "relative"), _defineProperty(_obj1, "backgroundColor", theme.colors.backgroundContainer), _obj1)
     };
 });
 export var FieldContainer = function(param) {
@@ -270,7 +270,7 @@ export var FieldContainer = function(param) {
         fullWidth: fullWidth,
         disabled: disabled
     });
-    return(/*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         className: classes.fieldContainer,
         children: [
             /*#__PURE__*/ _jsx("div", {
@@ -280,5 +280,5 @@ export var FieldContainer = function(param) {
             }),
             helperText
         ]
-    }));
+    });
 };

package/dist-es/text-field.js

@@ -1,8 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { useFieldProps } from './form-context';
-import { TextFieldBaseAutosuggest } from './text-field-base';
-import { combineRefs } from './utils/common';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -58,6 +53,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useFieldProps } from "./form-context";
+import { TextFieldBaseAutosuggest } from "./text-field-base";
+import { combineRefs } from "./utils/common";
 var TextField = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validate = _param.validate, onChangeValue = _param.onChangeValue, onChange = _param.onChange, value1 = _param.value, defaultValue = _param.defaultValue, onBlurProp = _param.onBlur, onFocusProp = _param.onFocus, onPress = _param.onPress, rest = _objectWithoutProperties(_param, [
         "disabled",
@@ -91,7 +91,7 @@ var TextField = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 if (inputRef.current) {
                     // place caret to the end
                     var value = inputRef.current.value;
-                    inputRef.current.value = '';
+                    inputRef.current.value = "";
                     inputRef.current.value = value;
                     // scroll to end
                     inputRef.current.scrollTop = inputRef.current.scrollHeight;
@@ -114,11 +114,11 @@ var TextField = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
+    return /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
         onClick: onPress,
         inputRef: combineRefs(inputRef, fieldProps.inputRef, ref),
         onFocus: onFocus,
         type: "text"
-    })));
+    }));
 });
 export default TextField;

package/dist-es/text-link.js

@@ -1,12 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { createUseStyles } from './jss';
-import Touchable from './touchable';
-import classnames from 'classnames';
-import { useIsInverseVariant } from './theme-variant-context';
-import { useForm } from './form-context';
-import { getTextFromChildren } from './utils/common';
-import { eventActions, eventCategories } from './utils/analytics';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -62,20 +53,29 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { createUseStyles } from "./jss";
+import Touchable from "./touchable";
+import classnames from "classnames";
+import { useIsInverseVariant } from "./theme-variant-context";
+import { useForm } from "./form-context";
+import { getTextFromChildren } from "./utils/common";
+import { eventActions, eventCategories } from "./utils/analytics";
 var useStyles = createUseStyles(function(theme) {
     var _obj;
     return {
         textLink: (_obj = {
-            width: 'auto',
-            lineHeight: 'inherit',
-            display: 'inline-block',
+            width: "auto",
+            lineHeight: "inherit",
+            display: "inline-block",
             color: theme.colors.textLink,
-            wordBreak: 'break-word'
+            wordBreak: "break-word"
         }, _defineProperty(_obj, theme.mq.supportsHover, {
-            '&:hover:not([disabled])': {
-                textDecoration: 'underline'
+            "&:hover:not([disabled])": {
+                textDecoration: "underline"
             }
-        }), _defineProperty(_obj, '&[disabled]', {
+        }), _defineProperty(_obj, "&[disabled]", {
             opacity: 0.5
         }), _obj),
         inverse: {
@@ -87,7 +87,7 @@ var useStyles = createUseStyles(function(theme) {
     };
 });
 var TextLink = function(_param) {
-    var children = _param.children, _className = _param.className, className = _className === void 0 ? '' : _className, small = _param.small, disabled = _param.disabled, props = _objectWithoutProperties(_param, [
+    var children = _param.children, _className = _param.className, className = _className === void 0 ? "" : _className, small = _param.small, disabled = _param.disabled, props = _objectWithoutProperties(_param, [
         "children",
         "className",
         "small",
@@ -98,15 +98,15 @@ var TextLink = function(_param) {
     var formStatus = useForm().formStatus;
     var _trackingEvent;
     var _obj;
-    return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, props, {
+    return /*#__PURE__*/ _jsx(Touchable, _objectSpread({}, props, {
         trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
             category: eventCategories.userInteraction,
             action: eventActions.linkTapped,
             label: getTextFromChildren(children)
         } : undefined,
-        disabled: disabled || formStatus === 'sending',
+        disabled: disabled || formStatus === "sending",
         className: classnames(classes.textLink, className, (_obj = {}, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),
         children: children
-    })));
+    }));
 };
 export default TextLink;

package/dist-es/text.js

@@ -1,10 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import classnames from 'classnames';
-import { createUseStyles } from './jss';
-import { useIsInverseVariant } from './theme-variant-context';
-import { pxToRem } from './utils/css';
-import { getPrefixedDataAttributes } from './utils/dom';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -33,6 +26,13 @@ function _objectSpread(target) {
     }
     return target;
 }
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import classnames from "classnames";
+import { createUseStyles } from "./jss";
+import { useIsInverseVariant } from "./theme-variant-context";
+import { pxToRem } from "./utils/css";
+import { getPrefixedDataAttributes } from "./utils/dom";
 var useStyles = createUseStyles(function(theme) {
     var mapToWeight = {
         light: 300,
@@ -49,7 +49,7 @@ var useStyles = createUseStyles(function(theme) {
         if (truncate) {
             return truncate;
         }
-        return 'initial';
+        return "initial";
     };
     var _color1, _decoration;
     return {
@@ -60,7 +60,7 @@ var useStyles = createUseStyles(function(theme) {
             },
             textTransform: function(param) {
                 var transform = param.transform;
-                return transform || 'inherit';
+                return transform || "inherit";
             },
             fontSize: function(param) {
                 var desktopSize = param.desktopSize;
@@ -68,14 +68,14 @@ var useStyles = createUseStyles(function(theme) {
             },
             fontWeight: function(param) {
                 var weight = param.weight;
-                return weight ? mapToWeight[weight] : 'inherit';
+                return weight ? mapToWeight[weight] : "inherit";
             },
             color: function(param) {
                 var isInverse = param.isInverse, _color = param.color, color = _color === void 0 ? theme.colors.textPrimary : _color;
                 return isInverse ? (_color1 = inverseColorsMap[color]) !== null && _color1 !== void 0 ? _color1 : color : color;
             },
             textDecoration: function(p) {
-                return (_decoration = p.decoration) !== null && _decoration !== void 0 ? _decoration : 'inherit';
+                return (_decoration = p.decoration) !== null && _decoration !== void 0 ? _decoration : "inherit";
             },
             letterSpacing: function(param) {
                 var letterSpacing = param.letterSpacing;
@@ -83,7 +83,7 @@ var useStyles = createUseStyles(function(theme) {
             },
             overflowWrap: function(param) {
                 var wordBreak = param.wordBreak;
-                return wordBreak ? 'anywhere' : 'inherit';
+                return wordBreak ? "anywhere" : "inherit";
             },
             // Needed to reset the default browser margin that adds to p, h1, h2... elements.
             margin: 0
@@ -98,20 +98,20 @@ var useStyles = createUseStyles(function(theme) {
             }
         }),
         truncate: {
-            '-webkit-line-clamp': lineClamp,
+            "-webkit-line-clamp": lineClamp,
             lineClamp: lineClamp,
             wordBreak: function(param) {
                 var truncate = param.truncate;
-                return truncate === 1 || truncate === true ? 'break-all' : 'normal';
+                return truncate === 1 || truncate === true ? "break-all" : "normal";
             },
-            display: 'box',
-            boxOrient: 'vertical',
-            overflow: 'hidden'
+            display: "box",
+            boxOrient: "vertical",
+            overflow: "hidden"
         }
     };
 });
 export var Text = function(param) {
-    var weight = param.weight, color = param.color, decoration = param.decoration, truncate = param.truncate, transform = param.transform, wordBreak = param.wordBreak, _as = param.as, as = _as === void 0 ? 'span' : _as, children = param.children, size = param.size, _mobileSize = param.mobileSize, mobileSize = _mobileSize === void 0 ? size : _mobileSize, _desktopSize = param.desktopSize, desktopSize = _desktopSize === void 0 ? size : _desktopSize, lineHeight = param.lineHeight, _mobileLineHeight = param.mobileLineHeight, mobileLineHeight = _mobileLineHeight === void 0 ? lineHeight : _mobileLineHeight, _desktopLineHeight = param.desktopLineHeight, desktopLineHeight = _desktopLineHeight === void 0 ? lineHeight : _desktopLineHeight, letterSpacing = param.letterSpacing, id = param.id, role = param.role, ariaLevel = param['aria-level'], dataAttributes = param.dataAttributes;
+    var weight = param.weight, color = param.color, decoration = param.decoration, truncate = param.truncate, transform = param.transform, wordBreak = param.wordBreak, _as = param.as, as = _as === void 0 ? "span" : _as, children = param.children, size = param.size, _mobileSize = param.mobileSize, mobileSize = _mobileSize === void 0 ? size : _mobileSize, _desktopSize = param.desktopSize, desktopSize = _desktopSize === void 0 ? size : _desktopSize, lineHeight = param.lineHeight, _mobileLineHeight = param.mobileLineHeight, mobileLineHeight = _mobileLineHeight === void 0 ? lineHeight : _mobileLineHeight, _desktopLineHeight = param.desktopLineHeight, desktopLineHeight = _desktopLineHeight === void 0 ? lineHeight : _desktopLineHeight, letterSpacing = param.letterSpacing, id = param.id, role = param.role, ariaLevel = param["aria-level"], dataAttributes = param.dataAttributes;
     var isInverse = useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse,
@@ -131,21 +131,21 @@ export var Text = function(param) {
         return null;
     }
     var className = classnames(classes.text, _defineProperty({}, classes.truncate, !!truncate));
-    return(/*#__PURE__*/ React.createElement(as, _objectSpread({
+    return /*#__PURE__*/ React.createElement(as, _objectSpread({
         className: className,
         id: id,
         role: role,
-        'aria-level': ariaLevel
-    }, getPrefixedDataAttributes(dataAttributes)), children));
+        "aria-level": ariaLevel
+    }, getPrefixedDataAttributes(dataAttributes)), children);
 };
 var getRegularOrMediumWeight = function(props) {
-    return props.regular && 'regular' || props.medium && 'medium';
+    return props.regular && "regular" || props.medium && "medium";
 };
 var getWeight = function(props) {
-    return props.light && 'light' || props.regular && 'regular' || props.medium && 'medium';
+    return props.light && "light" || props.regular && "regular" || props.medium && "medium";
 };
 export var Text10 = function(props) {
-    /*#__PURE__*/ return _jsx(Text, _objectSpread({
+    return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 64,
@@ -156,7 +156,7 @@ export var Text10 = function(props) {
     }));
 };
 export var Text9 = function(props) {
-    /*#__PURE__*/ return _jsx(Text, _objectSpread({
+    return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 56,
@@ -167,7 +167,7 @@ export var Text9 = function(props) {
     }));
 };
 export var Text8 = function(props) {
-    /*#__PURE__*/ return _jsx(Text, _objectSpread({
+    return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 40,
@@ -178,7 +178,7 @@ export var Text8 = function(props) {
     }));
 };
 export var Text7 = function(props) {
-    /*#__PURE__*/ return _jsx(Text, _objectSpread({
+    return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 28,
         mobileLineHeight: "32px",
         desktopSize: 40,
@@ -189,7 +189,7 @@ export var Text7 = function(props) {
     }));
 };
 export var Text6 = function(props) {
-    /*#__PURE__*/ return _jsx(Text, _objectSpread({
+    return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 24,
         mobileLineHeight: "32px",
         desktopSize: 32,
@@ -200,7 +200,7 @@ export var Text6 = function(props) {
     }));
 };
 export var Text5 = function(props) {
-    /*#__PURE__*/ return _jsx(Text, _objectSpread({
+    return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 22,
         mobileLineHeight: "24px",
         desktopSize: 28,
@@ -211,7 +211,7 @@ export var Text5 = function(props) {
     }));
 };
 export var Text4 = function(props) {
-    /*#__PURE__*/ return _jsx(Text, _objectSpread({
+    return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 18,
         mobileLineHeight: "24px",
         desktopSize: 20,
@@ -222,7 +222,7 @@ export var Text4 = function(props) {
     }));
 };
 export var Text3 = function(props) {
-    /*#__PURE__*/ return _jsx(Text, _objectSpread({
+    return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 16,
         desktopSize: 18,
         lineHeight: "24px",
@@ -232,7 +232,7 @@ export var Text3 = function(props) {
     }));
 };
 export var Text2 = function(props) {
-    /*#__PURE__*/ return _jsx(Text, _objectSpread({
+    return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 14,
         mobileLineHeight: "20px",
         desktopSize: 16,
@@ -243,7 +243,7 @@ export var Text2 = function(props) {
     }));
 };
 export var Text1 = function(props) {
-    /*#__PURE__*/ return _jsx(Text, _objectSpread({
+    return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 12,
         mobileLineHeight: "16px",
         desktopSize: 14,

package/dist-es/theme-context-provider.js

@@ -1,21 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { JssProvider } from 'react-jss';
-import { createGenerateId } from 'jss';
-import { getJss } from './jss';
-import DialogRoot from './dialog';
-import ScreenSizeContextProvider from './screen-size-context-provider';
-import { createMediaQueries } from './utils/media-queries';
-import { PACKAGE_VERSION } from './package-version';
-import AriaIdGetterContext from './aria-id-getter-context';
-import { isServerSide } from './utils/environment';
-import { AnchorLink, mediaQueriesConfig, dimensions, getTexts } from './theme';
-import { getPlatform, isInsideNovumNativeApp } from './utils/platform';
-import ThemeContext from './theme-context';
-import { useIsomorphicLayoutEffect } from './hooks';
-import TabFocus from './tab-focus';
-import ModalContextProvider from './modal-context-provider';
-import { DocumentVisibilityProvider } from './utils/document-visibility';
 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];
@@ -90,7 +72,26 @@ function _unsupportedIterableToArray(o, minLen) {
     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 darkModeMedia = '(prefers-color-scheme: dark)';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { JssProvider } from "react-jss";
+import { createGenerateId } from "jss";
+import { getJss } from "./jss";
+import DialogRoot from "./dialog";
+import ScreenSizeContextProvider from "./screen-size-context-provider";
+import { createMediaQueries } from "./utils/media-queries";
+import { PACKAGE_VERSION } from "./package-version";
+import AriaIdGetterContext from "./aria-id-getter-context";
+import { isServerSide } from "./utils/environment";
+import { AnchorLink, mediaQueriesConfig, dimensions, getTexts } from "./theme";
+import { getPlatform, isInsideNovumNativeApp } from "./utils/platform";
+import ThemeContext from "./theme-context";
+import { useIsomorphicLayoutEffect } from "./hooks";
+import TabFocus from "./tab-focus";
+import ModalContextProvider from "./modal-context-provider";
+import { DocumentVisibilityProvider } from "./utils/document-visibility";
+import { AspectRatioSupportProvider } from "./utils/aspect-ratio-support";
+var darkModeMedia = "(prefers-color-scheme: dark)";
 export var useIsOsDarkModeEnabled = function() {
     var ref = _slicedToArray(React.useState(false), 2), isDarkMode = ref[0], setIsDarkMode = ref[1];
     useIsomorphicLayoutEffect(function() {
@@ -114,7 +115,7 @@ export var useIsOsDarkModeEnabled = function() {
 // in those cases. We use this counter to avoid class name collisions in those cases.
 var nextJssInstanceId = 0;
 var generateId = function() {
-    if (process.env.NODE_ENV === 'test') {
+    if (process.env.NODE_ENV === "test") {
         // in tests classnames are just the classame, whithout ids
         return function(r) {
             return r.key;
@@ -142,7 +143,7 @@ var ThemeContextProvider = function(param) {
         }
     }), 1), instanceId = ref[0];
     var classNamePrefix = React.useMemo(function() {
-        return process.env.NODE_ENV === 'test' ? '' : "mistica-".concat(PACKAGE_VERSION.replace(/\./g, '-'), "_").concat(instanceId, "_");
+        return process.env.NODE_ENV === "test" ? "" : "mistica-".concat(PACKAGE_VERSION.replace(/\./g, "-"), "_").concat(instanceId, "_");
     }, [
         instanceId
     ]);
@@ -154,10 +155,10 @@ var ThemeContextProvider = function(param) {
     var contextTheme = React.useMemo(function() {
         var _colorScheme;
         // TODO: In next major version we could change this to "auto" by default
-        var colorScheme = (_colorScheme = theme.colorScheme) !== null && _colorScheme !== void 0 ? _colorScheme : 'light';
+        var colorScheme = (_colorScheme = theme.colorScheme) !== null && _colorScheme !== void 0 ? _colorScheme : "light";
         var lightColors = theme.skin.colors;
         var darkColors = _objectSpread({}, theme.skin.colors, theme.skin.darkModeColors);
-        var isDarkModeEnabled = colorScheme === 'auto' && isOsDarkModeEnabled || colorScheme === 'dark';
+        var isDarkModeEnabled = colorScheme === "auto" && isOsDarkModeEnabled || colorScheme === "dark";
         var colors = isDarkModeEnabled ? darkColors : lightColors;
         var platformOverrides = _objectSpread({
             platform: getPlatform(),
@@ -179,14 +180,14 @@ var ThemeContextProvider = function(param) {
             colors: colors,
             Link: (_Link = theme.Link) !== null && _Link !== void 0 ? _Link : AnchorLink,
             isDarkMode: isDarkModeEnabled,
-            isIos: getPlatform(platformOverrides) === 'ios',
+            isIos: getPlatform(platformOverrides) === "ios",
             useHrefDecorator: (_useHrefDecorator = theme.useHrefDecorator) !== null && _useHrefDecorator !== void 0 ? _useHrefDecorator : useDefaultHrefDecorator
         };
     }, [
         theme,
         isOsDarkModeEnabled
     ]);
-    return(/*#__PURE__*/ _jsx(JssProvider, {
+    return /*#__PURE__*/ _jsx(JssProvider, {
         jss: getJss(),
         classNamePrefix: classNamePrefix,
         generateId: generateId,
@@ -195,12 +196,14 @@ var ThemeContextProvider = function(param) {
             children: /*#__PURE__*/ _jsx(ModalContextProvider, {
                 children: /*#__PURE__*/ _jsx(ThemeContext.Provider, {
                     value: contextTheme,
-                    children: /*#__PURE__*/ _jsx(DocumentVisibilityProvider, {
-                        children: /*#__PURE__*/ _jsx(AriaIdGetterContext.Provider, {
-                            value: getAriaId,
-                            children: /*#__PURE__*/ _jsx(ScreenSizeContextProvider, {
-                                children: /*#__PURE__*/ _jsx(DialogRoot, {
-                                    children: children
+                    children: /*#__PURE__*/ _jsx(AspectRatioSupportProvider, {
+                        children: /*#__PURE__*/ _jsx(DocumentVisibilityProvider, {
+                            children: /*#__PURE__*/ _jsx(AriaIdGetterContext.Provider, {
+                                value: getAriaId,
+                                children: /*#__PURE__*/ _jsx(ScreenSizeContextProvider, {
+                                    children: /*#__PURE__*/ _jsx(DialogRoot, {
+                                        children: children
+                                    })
                                 })
                             })
                         })
@@ -208,6 +211,6 @@ var ThemeContextProvider = function(param) {
                 })
             })
         })
-    }));
+    });
 };
 export default ThemeContextProvider;