@telefonica/mistica 11.1.0 → 11.3.0

package/dist/text-field-components.js

@@ -115,46 +115,46 @@ var DEFAULT_WIDTH = 328;
 exports.DEFAULT_WIDTH = DEFAULT_WIDTH;
 var LABEL_LEFT_POSITION = 12;
 exports.LABEL_LEFT_POSITION = LABEL_LEFT_POSITION;
-var LABEL_SCALE_DESKTOP = parseFloat('0.78'); // Text1/Text3 = 14/18 (desktop)
+var LABEL_SCALE_DESKTOP = parseFloat("0.78"); // Text1/Text3 = 14/18 (desktop)
 exports.LABEL_SCALE_DESKTOP = LABEL_SCALE_DESKTOP;
-var LABEL_SCALE_MOBILE = parseFloat('0.75'); // Text1/Text3 = 12/16 (mobile)
+var LABEL_SCALE_MOBILE = parseFloat("0.75"); // Text1/Text3 = 12/16 (mobile)
 exports.LABEL_SCALE_MOBILE = LABEL_SCALE_MOBILE;
 var useLabelStyles = (0, _jss).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 color(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({
@@ -172,26 +172,26 @@ var useLabelStyles = (0, _jss).createUseStyles(function(theme) {
 });
 var Label = function Label(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 = (0, _hooks).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__*/ (0, _jsxRuntime).jsxs("label", {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("label", {
         className: (0, _classnames).default(classes.labelContainer, _defineProperty({}, classes.shrinked, isShrinked)),
         htmlFor: forId,
         style: _objectSpread({}, style, {
@@ -210,7 +210,7 @@ var Label = function Label(param) {
                 ]
             }) : null
         ]
-    }));
+    });
 };
 exports.Label = Label;
 var useHelperTextStyles = (0, _jss).createUseStyles(function() {
@@ -218,18 +218,18 @@ var useHelperTextStyles = (0, _jss).createUseStyles(function() {
         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"
         }
     };
 });
@@ -240,7 +240,7 @@ var HelperText = function HelperText(param) {
     var classes = useHelperTextStyles();
     var leftColor = isInverse ? colors.textPrimaryInverse : error ? colors.error : colors.textSecondary;
     var rightColor = isInverse ? colors.textPrimaryInverse : colors.textSecondary;
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
         className: classes.helperContainer,
         children: [
             leftText && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
@@ -262,7 +262,7 @@ var HelperText = function HelperText(param) {
                 })
             })
         ]
-    }));
+    });
 };
 exports.HelperText = HelperText;
 var useFieldContainerStyles = (0, _jss).createUseStyles(function(theme) {
@@ -273,19 +273,19 @@ var useFieldContainerStyles = (0, _jss).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 width(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 height(param) {
@@ -297,7 +297,7 @@ var useFieldContainerStyles = (0, _jss).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)
     };
 });
 var FieldContainer = function FieldContainer(param) {
@@ -307,7 +307,7 @@ var FieldContainer = function FieldContainer(param) {
         fullWidth: fullWidth,
         disabled: disabled
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
         className: classes.fieldContainer,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
@@ -317,6 +317,6 @@ var FieldContainer = function FieldContainer(param) {
             }),
             helperText
         ]
-    }));
+    });
 };
 exports.FieldContainer = FieldContainer;

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

@@ -34,4 +34,4 @@ declare type FieldContainerProps = {
 declare export var FieldContainer: React.ComponentType<FieldContainerProps>;
 declare export {};
 
-import { type CssStyle } from "./__types__.js.flow";
+import { type CssStyle } from "./__css_types__.js.flow";

package/dist/text-field.js

@@ -118,7 +118,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;
@@ -141,12 +141,12 @@ var TextField = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
         onClick: onPress,
         inputRef: (0, _common).combineRefs(inputRef, fieldProps.inputRef, ref),
         onFocus: onFocus,
         type: "text"
-    })));
+    }));
 });
 var _default = TextField;
 exports.default = _default;

package/dist/text-field.js.flow

@@ -12,8 +12,5 @@ export type TextFieldProps = {
   endIcon?: React.Node,
   getSuggestions?: (value: string) => Array<string>,
 };
-declare var TextField: React.ComponentType<{
-  ...TextFieldProps,
-  ref?: React.Ref<HTMLInputElement>,
-}>;
+declare var TextField: React.AbstractComponent<TextFieldProps, HTMLInputElement>;
 declare export default typeof TextField;

package/dist/text-link.js

@@ -98,16 +98,16 @@ var useStyles = (0, _jss).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: {
@@ -119,7 +119,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
     };
 });
 var TextLink = function TextLink(_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",
@@ -130,16 +130,16 @@ var TextLink = function TextLink(_param) {
     var formStatus = (0, _formContext).useForm().formStatus;
     var _trackingEvent;
     var _obj;
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({}, props, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({}, props, {
         trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
             category: _analytics.eventCategories.userInteraction,
             action: _analytics.eventActions.linkTapped,
             label: (0, _common).getTextFromChildren(children)
         } : undefined,
-        disabled: disabled || formStatus === 'sending',
+        disabled: disabled || formStatus === "sending",
         className: (0, _classnames).default(classes.textLink, className, (_obj = {}, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),
         children: children
-    })));
+    }));
 };
 var _default = TextLink;
 exports.default = _default;

package/dist/text-link.js.flow

@@ -37,4 +37,4 @@ export type TextLinkProps = HrefProps | ToProps | OnPressProps;
 declare var TextLink: React.ComponentType<TextLinkProps>;
 declare export default typeof TextLink;
 
-import { type CssStyle } from "./__types__.js.flow";
+import { type CssStyle } from "./__css_types__.js.flow";

package/dist/text.js

@@ -81,7 +81,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         if (truncate) {
             return truncate;
         }
-        return 'initial';
+        return "initial";
     };
     var _color1, _decoration;
     return {
@@ -92,7 +92,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             },
             textTransform: function textTransform(param) {
                 var transform = param.transform;
-                return transform || 'inherit';
+                return transform || "inherit";
             },
             fontSize: function fontSize(param) {
                 var desktopSize = param.desktopSize;
@@ -100,14 +100,14 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             },
             fontWeight: function fontWeight(param) {
                 var weight = param.weight;
-                return weight ? mapToWeight[weight] : 'inherit';
+                return weight ? mapToWeight[weight] : "inherit";
             },
             color: function color(param) {
                 var isInverse = param.isInverse, _color = param.color, color1 = _color === void 0 ? theme.colors.textPrimary : _color;
                 return isInverse ? (_color1 = inverseColorsMap[color1]) !== null && _color1 !== void 0 ? _color1 : color1 : color1;
             },
             textDecoration: function textDecoration(p) {
-                return (_decoration = p.decoration) !== null && _decoration !== void 0 ? _decoration : 'inherit';
+                return (_decoration = p.decoration) !== null && _decoration !== void 0 ? _decoration : "inherit";
             },
             letterSpacing: function letterSpacing(param) {
                 var letterSpacing1 = param.letterSpacing;
@@ -115,7 +115,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             },
             overflowWrap: function overflowWrap(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
@@ -130,20 +130,20 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             }
         }),
         truncate: {
-            '-webkit-line-clamp': lineClamp,
+            "-webkit-line-clamp": lineClamp,
             lineClamp: lineClamp,
             wordBreak: function wordBreak(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"
         }
     };
 });
 var Text = function Text(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 = (0, _themeVariantContext).useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse,
@@ -163,22 +163,22 @@ var Text = function Text(param) {
         return null;
     }
     var className = (0, _classnames).default(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
-    }, (0, _dom).getPrefixedDataAttributes(dataAttributes)), children));
+        "aria-level": ariaLevel
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes)), children);
 };
 exports.Text = Text;
 var getRegularOrMediumWeight = function getRegularOrMediumWeight(props) {
-    return props.regular && 'regular' || props.medium && 'medium';
+    return props.regular && "regular" || props.medium && "medium";
 };
 var getWeight = function getWeight(props) {
-    return props.light && 'light' || props.regular && 'regular' || props.medium && 'medium';
+    return props.light && "light" || props.regular && "regular" || props.medium && "medium";
 };
 var Text10 = function Text10(props) {
-    /*#__PURE__*/ return (0, _jsxRuntime).jsx(Text, _objectSpread({
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 64,
@@ -190,7 +190,7 @@ var Text10 = function Text10(props) {
 };
 exports.Text10 = Text10;
 var Text9 = function Text9(props) {
-    /*#__PURE__*/ return (0, _jsxRuntime).jsx(Text, _objectSpread({
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 56,
@@ -202,7 +202,7 @@ var Text9 = function Text9(props) {
 };
 exports.Text9 = Text9;
 var Text8 = function Text8(props) {
-    /*#__PURE__*/ return (0, _jsxRuntime).jsx(Text, _objectSpread({
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 40,
@@ -214,7 +214,7 @@ var Text8 = function Text8(props) {
 };
 exports.Text8 = Text8;
 var Text7 = function Text7(props) {
-    /*#__PURE__*/ return (0, _jsxRuntime).jsx(Text, _objectSpread({
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 28,
         mobileLineHeight: "32px",
         desktopSize: 40,
@@ -226,7 +226,7 @@ var Text7 = function Text7(props) {
 };
 exports.Text7 = Text7;
 var Text6 = function Text6(props) {
-    /*#__PURE__*/ return (0, _jsxRuntime).jsx(Text, _objectSpread({
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 24,
         mobileLineHeight: "32px",
         desktopSize: 32,
@@ -238,7 +238,7 @@ var Text6 = function Text6(props) {
 };
 exports.Text6 = Text6;
 var Text5 = function Text5(props) {
-    /*#__PURE__*/ return (0, _jsxRuntime).jsx(Text, _objectSpread({
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 22,
         mobileLineHeight: "24px",
         desktopSize: 28,
@@ -250,7 +250,7 @@ var Text5 = function Text5(props) {
 };
 exports.Text5 = Text5;
 var Text4 = function Text4(props) {
-    /*#__PURE__*/ return (0, _jsxRuntime).jsx(Text, _objectSpread({
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 18,
         mobileLineHeight: "24px",
         desktopSize: 20,
@@ -262,7 +262,7 @@ var Text4 = function Text4(props) {
 };
 exports.Text4 = Text4;
 var Text3 = function Text3(props) {
-    /*#__PURE__*/ return (0, _jsxRuntime).jsx(Text, _objectSpread({
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 16,
         desktopSize: 18,
         lineHeight: "24px",
@@ -273,7 +273,7 @@ var Text3 = function Text3(props) {
 };
 exports.Text3 = Text3;
 var Text2 = function Text2(props) {
-    /*#__PURE__*/ return (0, _jsxRuntime).jsx(Text, _objectSpread({
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 14,
         mobileLineHeight: "20px",
         desktopSize: 16,
@@ -285,7 +285,7 @@ var Text2 = function Text2(props) {
 };
 exports.Text2 = Text2;
 var Text1 = function Text1(props) {
-    /*#__PURE__*/ return (0, _jsxRuntime).jsx(Text, _objectSpread({
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 12,
         mobileLineHeight: "16px",
         desktopSize: 14,

package/dist/theme-context-provider.js

@@ -21,6 +21,7 @@ var _hooks = require("./hooks");
 var _tabFocus = _interopRequireDefault(require("./tab-focus"));
 var _modalContextProvider = _interopRequireDefault(require("./modal-context-provider"));
 var _documentVisibility = require("./utils/document-visibility");
+var _aspectRatioSupport = require("./utils/aspect-ratio-support");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -122,7 +123,7 @@ 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)';
+var darkModeMedia = "(prefers-color-scheme: dark)";
 var useIsOsDarkModeEnabled = function useIsOsDarkModeEnabled() {
     var ref = _slicedToArray(React.useState(false), 2), isDarkMode = ref[0], setIsDarkMode = ref[1];
     (0, _hooks).useIsomorphicLayoutEffect(function() {
@@ -147,7 +148,7 @@ exports.useIsOsDarkModeEnabled = useIsOsDarkModeEnabled;
 // 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;
@@ -175,7 +176,7 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
         }
     }), 1), instanceId = ref[0];
     var classNamePrefix = React.useMemo(function() {
-        return process.env.NODE_ENV === 'test' ? '' : "mistica-".concat(_packageVersion.PACKAGE_VERSION.replace(/\./g, '-'), "_").concat(instanceId, "_");
+        return process.env.NODE_ENV === "test" ? "" : "mistica-".concat(_packageVersion.PACKAGE_VERSION.replace(/\./g, "-"), "_").concat(instanceId, "_");
     }, [
         instanceId
     ]);
@@ -187,10 +188,10 @@ var ThemeContextProvider = function ThemeContextProvider(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: (0, _platform).getPlatform(),
@@ -212,14 +213,14 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
             colors: colors,
             Link: (_Link = theme.Link) !== null && _Link !== void 0 ? _Link : _theme.AnchorLink,
             isDarkMode: isDarkModeEnabled,
-            isIos: (0, _platform).getPlatform(platformOverrides) === 'ios',
+            isIos: (0, _platform).getPlatform(platformOverrides) === "ios",
             useHrefDecorator: (_useHrefDecorator = theme.useHrefDecorator) !== null && _useHrefDecorator !== void 0 ? _useHrefDecorator : useDefaultHrefDecorator
         };
     }, [
         theme,
         isOsDarkModeEnabled
     ]);
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_reactJss.JssProvider, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_reactJss.JssProvider, {
         jss: (0, _jss1).getJss(),
         classNamePrefix: classNamePrefix,
         generateId: generateId,
@@ -228,12 +229,14 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
             children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_modalContextProvider.default, {
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_themeContext.default.Provider, {
                     value: contextTheme,
-                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_documentVisibility.DocumentVisibilityProvider, {
-                        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_ariaIdGetterContext.default.Provider, {
-                            value: getAriaId,
-                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_screenSizeContextProvider.default, {
-                                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_dialog.default, {
-                                    children: children
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_aspectRatioSupport.AspectRatioSupportProvider, {
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_documentVisibility.DocumentVisibilityProvider, {
+                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_ariaIdGetterContext.default.Provider, {
+                                value: getAriaId,
+                                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_screenSizeContextProvider.default, {
+                                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_dialog.default, {
+                                        children: children
+                                    })
                                 })
                             })
                         })
@@ -241,7 +244,7 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
                 })
             })
         })
-    }));
+    });
 };
 var _default = ThemeContextProvider;
 exports.default = _default;

package/dist/theme-variant-context.js

@@ -29,7 +29,7 @@ function _interopRequireWildcard(obj) {
 var IsInverseThemeVariant = /*#__PURE__*/ React.createContext(false);
 var ThemeVariant = function ThemeVariant(param) {
     var isInverse = param.isInverse, children = param.children;
-    /*#__PURE__*/ return (0, _jsxRuntime).jsx(IsInverseThemeVariant.Provider, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(IsInverseThemeVariant.Provider, {
         value: !!isInverse,
         children: children
     });