@telefonica/mistica 11.11.0 → 11.12.1

package/dist/button.js

@@ -212,13 +212,12 @@ var usePrimaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
             // - Make sure that in FF hover still has it's proper styles
             // - Media query with "coarse" (mobile), avoids that in devices that have coarse implemented, focus style doesn't get stuck
             // Must be always declared for Firefox
-            "&:hover:not([disabled])": {
-                backgroundColor: theme.colors.buttonPrimaryBackgroundHover,
-                "@media (pointer: coarse)": {
-                    // Revert hover background in touch devices
-                    backgroundColor: theme.colors.buttonPrimaryBackground
-                }
-            }
+            "&:hover:not([disabled])": _defineProperty({
+                backgroundColor: theme.colors.buttonPrimaryBackgroundHover
+            }, theme.mq.touchableOnly, {
+                // Revert hover background in touch devices
+                backgroundColor: theme.colors.buttonPrimaryBackground
+            })
         },
         inverse: {
             color: theme.colors.textButtonPrimaryInverse,
@@ -228,14 +227,13 @@ var usePrimaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
                 color: theme.colors.textButtonPrimaryInverseSelected
             },
             "&[disabled]:not($isLoading)": disabledStyle,
-            "&:hover:not([disabled])": {
+            "&:hover:not([disabled])": _defineProperty({
                 color: theme.colors.textButtonPrimaryInverseSelected,
-                backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse,
-                "@media (pointer: coarse)": {
-                    color: theme.colors.textButtonPrimaryInverse,
-                    backgroundColor: theme.colors.buttonPrimaryBackgroundInverse
-                }
-            }
+                backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse
+            }, theme.mq.touchableOnly, {
+                color: theme.colors.textButtonPrimaryInverse,
+                backgroundColor: theme.colors.buttonPrimaryBackgroundInverse
+            })
         }
     });
 });
@@ -257,9 +255,7 @@ var useSecondaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
         light: _objectSpread({}, buttonSecondaryLightStyle(theme), {
             "&:enabled:active": _objectSpread({}, buttonSecondaryHoverLightStyle(theme)),
             "&[disabled]:not($isLoading)": disabledStyle,
-            "&:hover:not([disabled])": _objectSpread({}, buttonSecondaryHoverLightStyle(theme), {
-                "@media (pointer: coarse)": _objectSpread({}, buttonSecondaryLightStyle(theme))
-            })
+            "&:hover:not([disabled])": _objectSpread({}, buttonSecondaryHoverLightStyle(theme), _defineProperty({}, theme.mq.touchableOnly, _objectSpread({}, buttonSecondaryLightStyle(theme))))
         }),
         inverse: {
             borderColor: theme.colors.buttonSecondaryBorderInverse,
@@ -269,14 +265,13 @@ var useSecondaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
                 color: theme.colors.textButtonSecondaryInverseSelected
             },
             "&[disabled]:not($isLoading)": disabledStyle,
-            "&:hover:not([disabled])": {
+            "&:hover:not([disabled])": _defineProperty({
                 borderColor: theme.colors.buttonSecondaryBorderSelectedInverse,
-                color: theme.colors.textButtonSecondaryInverseSelected,
-                "@media (pointer: coarse)": {
-                    borderColor: theme.colors.buttonSecondaryBorderInverse,
-                    color: theme.colors.textButtonSecondaryInverse
-                }
-            }
+                color: theme.colors.textButtonSecondaryInverseSelected
+            }, theme.mq.touchableOnly, {
+                borderColor: theme.colors.buttonSecondaryBorderInverse,
+                color: theme.colors.textButtonSecondaryInverse
+            })
         }
     });
 });
@@ -290,13 +285,12 @@ var dangerButtonStyles = function dangerButtonStyles(theme) {
         "&[disabled]:not($isLoading)": {
             opacity: 0.5
         },
-        "&:hover:not([disabled])": {
-            backgroundColor: theme.colors.buttonDangerBackgroundHover,
-            "@media (pointer: coarse)": {
-                // Revert hover background in touch devices
-                backgroundColor: theme.colors.buttonDangerBackground
-            }
-        }
+        "&:hover:not([disabled])": _defineProperty({
+            backgroundColor: theme.colors.buttonDangerBackgroundHover
+        }, theme.mq.touchableOnly, {
+            // Revert hover background in touch devices
+            backgroundColor: theme.colors.buttonDangerBackground
+        })
     };
 };
 var useDangerButtonStyles = (0, _jss).createUseStyles(function(theme) {
@@ -480,12 +474,11 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
             "&:enabled:active": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected
             },
-            "&:hover:not([disabled])": {
-                backgroundColor: theme.colors.buttonLinkBackgroundSelected,
-                "@media (pointer: coarse)": {
-                    backgroundColor: "initial"
-                }
-            },
+            "&:hover:not([disabled])": _defineProperty({
+                backgroundColor: theme.colors.buttonLinkBackgroundSelected
+            }, theme.mq.touchableOnly, {
+                backgroundColor: "initial"
+            }),
             "&[disabled]": disabledStyle
         },
         inverse: {
@@ -493,12 +486,11 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
             "&:enabled:active": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
             },
-            "&:hover:not([disabled])": {
-                backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse,
-                "@media (pointer: coarse)": {
-                    backgroundColor: "initial"
-                }
-            }
+            "&:hover:not([disabled])": _defineProperty({
+                backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
+            }, theme.mq.touchableOnly, {
+                backgroundColor: "initial"
+            })
         },
         aligned: {
             marginLeft: -padding

package/dist/carousel.js

@@ -201,7 +201,7 @@ var hideScrollbar = {
 };
 var arrowButtonSize = 40;
 var arrowButtonStyle = function arrowButtonStyle(theme) {
-    return {
+    return _defineProperty({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -213,12 +213,10 @@ var arrowButtonStyle = function arrowButtonStyle(theme) {
         transition: "opacity 0.2s",
         "&[disabled]": {
             opacity: 0
-        },
-        // don't show carrousel arrow buttons in touch devices, just regular horizontal scroll
-        "@media (pointer: coarse)": {
-            display: "none"
         }
-    };
+    }, theme.mq.touchableOnly, {
+        display: "none"
+    });
 };
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     var _obj, _obj1, _obj2;

package/dist/image.js

@@ -166,7 +166,10 @@ var useStyles = (0, _jss).createUseStyles(function() {
             },
             "$wrapper &": {
                 borderRadius: 0,
-                position: "absolute",
+                position: function position(param) {
+                    var aspectRatio = param.aspectRatio;
+                    return aspectRatio ? "absolute" : "static";
+                },
                 width: "100%",
                 height: "100%",
                 top: 0,
@@ -189,7 +192,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
             paddingTop: function paddingTop(param) {
                 var aspectRatio = param.aspectRatio, width = param.width;
                 if (!aspectRatio) {
-                    return "initial";
+                    return 0;
                 }
                 if (width && typeof width === "string" && width.endsWith("%")) {
                     return "".concat(Number(width.replace("%", "")) / aspectRatio, "%");
@@ -236,9 +239,9 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         width = props.width;
         height = props.height;
     } else if (typeof props.width === "number") {
-        height = props.width / ratio;
+        height = ratio ? props.width / ratio : undefined;
     } else if (typeof props.height === "number") {
-        width = props.height * ratio;
+        width = ratio ? props.height * ratio : undefined;
     } else {
         width = props.width || "100%";
     }
@@ -257,10 +260,12 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             setIsError(false);
             onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
         }
-    }, !needsWrapper ? {
+    }, needsWrapper ? {
+        width: "100%"
+    } : {
         width: width,
         height: height
-    } : {}));
+    }));
     if (needsWrapper) {
         return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
             style: {

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = "11.11.0";
+var PACKAGE_VERSION = "11.12.1";
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/skins/types.d.ts

@@ -2,15 +2,29 @@ export declare type SkinVariant = 'prominent';
 export declare type KnownSkinName = 'Movistar' | 'O2' | 'O2-classic' | 'Vivo' | 'Telefonica' | 'Blau';
 export declare type SkinName = KnownSkinName | string;
 export declare type GetKnownSkin = (variant?: SkinVariant) => KnownSkin;
+export declare type FontWeight = 'light' | 'regular' | 'medium';
+declare type TextPresetName = 'text5' | 'text6' | 'text7' | 'text8' | 'text9' | 'text10';
+export declare type TextPresetsConfig = {
+    [preset in TextPresetName]: {
+        weight: FontWeight;
+    };
+};
+declare type PartialTextPresetsConfig = {
+    [preset in TextPresetName]?: {
+        weight?: FontWeight;
+    };
+};
 export declare type Skin = {
     name: SkinName;
     colors: Colors;
     darkModeColors?: Partial<Colors>;
+    textPresets?: PartialTextPresetsConfig;
 };
 export declare type KnownSkin = {
     name: KnownSkinName;
     colors: Colors;
     darkModeColors?: Partial<Colors>;
+    textPresets?: PartialTextPresetsConfig;
 };
 export declare type Colors = {
     appBarBackground: string;
@@ -102,3 +116,4 @@ export declare type Colors = {
     textTagActive: string;
     textTagInactive: string;
 };
+export {};

package/dist/skins/types.js.flow

@@ -10,15 +10,37 @@ export type KnownSkinName =
   | "Blau";
 export type SkinName = KnownSkinName | string;
 export type GetKnownSkin = (variant?: SkinVariant) => KnownSkin;
+export type FontWeight = "light" | "regular" | "medium";
+declare type TextPresetName =
+  | "text5"
+  | "text6"
+  | "text7"
+  | "text8"
+  | "text9"
+  | "text10";
+export type TextPresetsConfig = $ObjMapi<
+  { [k: TextPresetName]: any },
+  <preset>(preset) => {
+    weight: FontWeight,
+  }
+>;
+declare type PartialTextPresetsConfig = $ObjMapi<
+  { [k: TextPresetName]: any },
+  <preset>(preset) => {
+    weight?: FontWeight,
+  }
+>;
 export type Skin = {
   name: SkinName,
   colors: Colors,
   darkModeColors?: $Shape<Colors>,
+  textPresets?: PartialTextPresetsConfig,
 };
 export type KnownSkin = {
   name: KnownSkinName,
   colors: Colors,
   darkModeColors?: $Shape<Colors>,
+  textPresets?: PartialTextPresetsConfig,
 };
 export type Colors = {
   appBarBackground: string,
@@ -110,3 +132,4 @@ export type Colors = {
   textTagActive: string,
   textTagInactive: string,
 };
+declare export {};

package/dist/text.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import type { FontWeight } from './skins/types';
 import type { DataAttributes } from './utils/types';
-declare type FontWeight = 'light' | 'regular' | 'medium';
 export interface TextPresetProps {
     color?: string;
     decoration?: 'underline' | 'line-through' | 'inherit' | 'none';

package/dist/text.js

@@ -10,6 +10,7 @@ var _jss = require("./jss");
 var _themeVariantContext = require("./theme-variant-context");
 var _css = require("./utils/css");
 var _dom = require("./utils/dom");
+var _hooks = require("./hooks");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -190,72 +191,78 @@ var getWeight = function getWeight(props) {
     return props.light && "light" || props.regular && "regular" || props.medium && "medium";
 };
 var Text10 = function Text10(props) {
+    var textPresets = (0, _hooks).useTheme().textPresets;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 64,
         desktopLineHeight: "72px",
-        weight: "light"
+        weight: textPresets.text10.weight
     }, props, {
         children: props.children
     }));
 };
 exports.Text10 = Text10;
 var Text9 = function Text9(props) {
+    var textPresets = (0, _hooks).useTheme().textPresets;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 56,
         desktopLineHeight: "64px",
-        weight: "light"
+        weight: textPresets.text9.weight
     }, props, {
         children: props.children
     }));
 };
 exports.Text9 = Text9;
 var Text8 = function Text8(props) {
+    var textPresets = (0, _hooks).useTheme().textPresets;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 40,
         desktopLineHeight: "48px",
-        weight: "light"
+        weight: textPresets.text8.weight
     }, props, {
         children: props.children
     }));
 };
 exports.Text8 = Text8;
 var Text7 = function Text7(props) {
+    var textPresets = (0, _hooks).useTheme().textPresets;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 28,
         mobileLineHeight: "32px",
         desktopSize: 40,
         desktopLineHeight: "48px",
-        weight: "light"
+        weight: textPresets.text7.weight
     }, props, {
         children: props.children
     }));
 };
 exports.Text7 = Text7;
 var Text6 = function Text6(props) {
+    var textPresets = (0, _hooks).useTheme().textPresets;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 24,
         mobileLineHeight: "32px",
         desktopSize: 32,
         desktopLineHeight: "40px",
-        weight: "light"
+        weight: textPresets.text6.weight
     }, props, {
         children: props.children
     }));
 };
 exports.Text6 = Text6;
 var Text5 = function Text5(props) {
+    var textPresets = (0, _hooks).useTheme().textPresets;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 22,
         mobileLineHeight: "24px",
         desktopSize: 28,
         desktopLineHeight: "32px",
-        weight: "light"
+        weight: textPresets.text5.weight
     }, props, {
         children: props.children
     }));

package/dist/text.js.flow

@@ -1,8 +1,8 @@
 // @flow
 
 import * as React from "react";
+import type { FontWeight } from "./skins/types";
 import type { DataAttributes } from "./utils/types";
-declare type FontWeight = "light" | "regular" | "medium";
 export type TextPresetProps = {
   color?: string,
   decoration?: "underline" | "line-through" | "inherit" | "none",

package/dist/theme-context-provider.js

@@ -167,15 +167,35 @@ var useDefaultHrefDecorator = function useDefaultHrefDecorator() {
         return href;
     };
 };
+var defaultTextPresetsConfig = {
+    text5: {
+        weight: "light"
+    },
+    text6: {
+        weight: "light"
+    },
+    text7: {
+        weight: "light"
+    },
+    text8: {
+        weight: "light"
+    },
+    text9: {
+        weight: "light"
+    },
+    text10: {
+        weight: "light"
+    }
+};
 var ThemeContextProvider = function ThemeContextProvider(param) {
     var theme = param.theme, children = param.children, providerId = param.providerId;
-    var ref = _slicedToArray(React.useState(function() {
+    var ref6 = _slicedToArray(React.useState(function() {
         if (providerId) {
             return providerId;
         } else {
             return (0, _environment).isServerSide() ? 0 : nextJssInstanceId++;
         }
-    }), 1), instanceId = ref[0];
+    }), 1), instanceId = ref6[0];
     var classNamePrefix = React.useMemo(function() {
         return process.env.NODE_ENV === "test" ? "" : "mistica-".concat(_packageVersion.PACKAGE_VERSION.replace(/\./g, "-"), "_").concat(instanceId, "_");
     }, [
@@ -187,6 +207,7 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
     }, []);
     var isOsDarkModeEnabled = useIsOsDarkModeEnabled();
     var contextTheme = React.useMemo(function() {
+        var ref, ref1, ref2, ref3, ref4, ref5;
         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";
@@ -213,6 +234,14 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
             dimensions: _objectSpread({}, _theme.dimensions, theme.dimensions),
             mq: (0, _mediaQueries).createMediaQueries((_mediaQueries1 = theme.mediaQueries) !== null && _mediaQueries1 !== void 0 ? _mediaQueries1 : _theme.mediaQueriesConfig),
             colors: colors,
+            textPresets: {
+                text5: _objectSpread({}, defaultTextPresetsConfig.text5, (ref = theme.skin.textPresets) === null || ref === void 0 ? void 0 : ref.text5),
+                text6: _objectSpread({}, defaultTextPresetsConfig.text6, (ref1 = theme.skin.textPresets) === null || ref1 === void 0 ? void 0 : ref1.text6),
+                text7: _objectSpread({}, defaultTextPresetsConfig.text7, (ref2 = theme.skin.textPresets) === null || ref2 === void 0 ? void 0 : ref2.text7),
+                text8: _objectSpread({}, defaultTextPresetsConfig.text8, (ref3 = theme.skin.textPresets) === null || ref3 === void 0 ? void 0 : ref3.text8),
+                text9: _objectSpread({}, defaultTextPresetsConfig.text9, (ref4 = theme.skin.textPresets) === null || ref4 === void 0 ? void 0 : ref4.text9),
+                text10: _objectSpread({}, defaultTextPresetsConfig.text10, (ref5 = theme.skin.textPresets) === null || ref5 === void 0 ? void 0 : ref5.text10)
+            },
             Link: (_Link = theme.Link) !== null && _Link !== void 0 ? _Link : _theme.AnchorLink,
             isDarkMode: isDarkModeEnabled,
             isIos: (0, _platform).getPlatform(platformOverrides) === "ios",

package/dist/theme.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import type { RegionCode } from './utils/region-code';
 import type { Locale } from './utils/locale';
-import type { Skin, Colors, SkinName } from './skins/types';
+import type { Skin, Colors, SkinName, TextPresetsConfig } from './skins/types';
 import type { TrackingEvent } from './utils/types';
+import type { MediaQueries } from './utils/media-queries';
 export declare type ThemeTexts = typeof TEXTS_ES;
 declare const TEXTS_ES: {
     expirationDatePlaceholder: string;
@@ -124,17 +125,9 @@ export declare type Theme = {
     dimensions: {
         headerMobileHeight: number;
     };
-    mq: {
-        mobile: string;
-        tablet: string;
-        desktop: string;
-        largeDesktop: string;
-        tabletOrBigger: string;
-        tabletOrSmaller: string;
-        desktopOrBigger: string;
-        supportsHover: string;
-    };
+    mq: MediaQueries;
     colors: Colors;
+    textPresets: TextPresetsConfig;
     Link: LinkComponent;
     isDarkMode: boolean;
     isIos: boolean;

package/dist/theme.js.flow

@@ -3,8 +3,9 @@
 import * as React from "react";
 import type { RegionCode } from "./utils/region-code";
 import type { Locale } from "./utils/locale";
-import type { Skin, Colors, SkinName } from "./skins/types";
+import type { Skin, Colors, SkinName, TextPresetsConfig } from "./skins/types";
 import type { TrackingEvent } from "./utils/types";
+import type { MediaQueries } from "./utils/media-queries";
 export type ThemeTexts = typeof TEXTS_ES;
 declare var TEXTS_ES: {
   expirationDatePlaceholder: string,
@@ -128,17 +129,9 @@ export type Theme = {
   dimensions: {
     headerMobileHeight: number,
   },
-  mq: {
-    mobile: string,
-    tablet: string,
-    desktop: string,
-    largeDesktop: string,
-    tabletOrBigger: string,
-    tabletOrSmaller: string,
-    desktopOrBigger: string,
-    supportsHover: string,
-  },
+  mq: MediaQueries,
   colors: Colors,
+  textPresets: TextPresetsConfig,
   Link: LinkComponent,
   isDarkMode: boolean,
   isIos: boolean,

package/dist/utils/media-queries.d.ts

@@ -1,9 +1,4 @@
-export declare const createMediaQueries: ({ desktopOrTabletMinHeight, tabletMinWidth, desktopMinWidth, largeDesktopMinWidth, }: {
-    tabletMinWidth: number;
-    desktopMinWidth: number;
-    largeDesktopMinWidth: number;
-    desktopOrTabletMinHeight: number;
-}) => {
+export declare type MediaQueries = Readonly<{
     mobile: string;
     tablet: string;
     desktop: string;
@@ -12,4 +7,11 @@ export declare const createMediaQueries: ({ desktopOrTabletMinHeight, tabletMinW
     tabletOrSmaller: string;
     desktopOrBigger: string;
     supportsHover: string;
-};
+    touchableOnly: string;
+}>;
+export declare const createMediaQueries: ({ desktopOrTabletMinHeight, tabletMinWidth, desktopMinWidth, largeDesktopMinWidth, }: {
+    tabletMinWidth: number;
+    desktopMinWidth: number;
+    largeDesktopMinWidth: number;
+    desktopOrTabletMinHeight: number;
+}) => MediaQueries;

package/dist/utils/media-queries.js

@@ -17,7 +17,11 @@ var createMediaQueries = function createMediaQueries(param) {
         // Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
         // WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
         // See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
-        supportsHover: "@media (pointer: fine), (pointer: none)"
+        supportsHover: "@media (pointer: fine), (pointer: none)",
+        /**
+     * Scopes the styles to touchable devices.
+     * See: https://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets/42835826#42835826
+     */ touchableOnly: "@media (pointer: coarse), @media (hover: none)"
     };
 };
 exports.createMediaQueries = createMediaQueries;

package/dist/utils/media-queries.js.flow

@@ -1,11 +1,6 @@
 // @flow
 
-declare export var createMediaQueries: (x: {
-  tabletMinWidth: number,
-  desktopMinWidth: number,
-  largeDesktopMinWidth: number,
-  desktopOrTabletMinHeight: number,
-}) => {
+export type MediaQueries = $ReadOnly<{
   mobile: string,
   tablet: string,
   desktop: string,
@@ -14,4 +9,11 @@ declare export var createMediaQueries: (x: {
   tabletOrSmaller: string,
   desktopOrBigger: string,
   supportsHover: string,
-};
+  touchableOnly: string,
+}>;
+declare export var createMediaQueries: (x: {
+  tabletMinWidth: number,
+  desktopMinWidth: number,
+  largeDesktopMinWidth: number,
+  desktopOrTabletMinHeight: number,
+}) => MediaQueries;

package/dist/utils/platform.d.ts

@@ -11,7 +11,7 @@ export declare const isIos: (platformOverrides: Theme['platformOverrides']) => b
  */
 export declare const isSafari: () => boolean;
 export declare const isFirefox: (platformOverrides?: {
-    platform?: "ios" | "android" | "desktop" | undefined;
+    platform?: "desktop" | "ios" | "android" | undefined;
     insideNovumNativeApp?: boolean | undefined;
     userAgent?: string | undefined;
 } | undefined) => boolean;

package/dist/utils/platform.js.flow

@@ -22,7 +22,7 @@ declare export var isIos: (
 declare export var isSafari: () => boolean;
 declare export var isFirefox: (
   platformOverrides?: {
-    platform?: "ios" | "android" | "desktop" | void,
+    platform?: "desktop" | "ios" | "android" | void,
     insideNovumNativeApp?: boolean | void,
     userAgent?: string | void,
   } | void

package/dist/video.js

@@ -103,10 +103,6 @@ var useStyles = (0, _jss).createUseStyles(function() {
             objectFit: "cover",
             maxWidth: "100%",
             maxHeight: "100%",
-            borderRadius: function borderRadius(param) {
-                var noBorderRadius = param.noBorderRadius;
-                return noBorderRadius ? 0 : 4;
-            },
             "@supports (aspect-ratio: 1 / 1)": {
                 aspectRatio: function aspectRatio(param) {
                     var aspectRatio1 = param.aspectRatio;
@@ -115,7 +111,10 @@ var useStyles = (0, _jss).createUseStyles(function() {
             },
             "$wrapper &": {
                 borderRadius: 0,
-                position: "absolute",
+                position: function position(param) {
+                    var aspectRatio = param.aspectRatio;
+                    return aspectRatio ? "absolute" : "static";
+                },
                 width: "100%",
                 height: "100%",
                 top: 0,
@@ -123,10 +122,6 @@ var useStyles = (0, _jss).createUseStyles(function() {
             }
         },
         wrapper: {
-            borderRadius: function borderRadius(param) {
-                var noBorderRadius = param.noBorderRadius;
-                return noBorderRadius ? 0 : 4;
-            },
             overflow: "hidden",
             maxWidth: "100%",
             maxHeight: "100%",
@@ -134,7 +129,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
             paddingTop: function paddingTop(param) {
                 var aspectRatio = param.aspectRatio, width = param.width;
                 if (!aspectRatio) {
-                    return "initial";
+                    return 0;
                 }
                 if (width && typeof width === "string" && width.endsWith("%")) {
                     return "".concat(Number(width.replace("%", "")) / aspectRatio, "%");
@@ -146,7 +141,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
 });
 /** Transparent 1x1px PNG  */ var TRANSPARENT_PIXEL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC";
 var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var src1 = _param.src, poster = _param.poster, _autoPlay = _param.autoPlay, autoPlay = _autoPlay === void 0 ? true : _autoPlay, _muted = _param.muted, muted = _muted === void 0 ? true : _muted, _loop = _param.loop, loop = _loop === void 0 ? true : _loop, _preload = _param.preload, preload = _preload === void 0 ? "none" : _preload, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? "1:1" : _aspectRatio, dataAttributes = _param.dataAttributes, props = _objectWithoutProperties(_param, [
+    var src1 = _param.src, poster = _param.poster, _autoPlay = _param.autoPlay, autoPlay = _autoPlay === void 0 ? !(0, _platform).isRunningAcceptanceTest() : _autoPlay, _muted = _param.muted, muted = _muted === void 0 ? true : _muted, _loop = _param.loop, loop = _loop === void 0 ? true : _loop, _preload = _param.preload, preload = _preload === void 0 ? "none" : _preload, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? "1:1" : _aspectRatio, dataAttributes = _param.dataAttributes, props = _objectWithoutProperties(_param, [
         "src",
         "poster",
         "autoPlay",
@@ -163,7 +158,6 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     // if aspect ratio is 0, we use the original video proportions
     var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
     var classes = useStyles({
-        noBorderRadius: noBorderRadius,
         aspectRatio: withCssAspectRatio ? ratio : undefined,
         width: props.width
     });
@@ -194,9 +188,9 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         width = props.width;
         height = props.height;
     } else if (typeof props.width === "number") {
-        height = props.width / ratio;
+        height = ratio ? props.width / ratio : undefined;
     } else if (typeof props.height === "number") {
-        width = props.height * ratio;
+        width = ratio ? props.height * ratio : undefined;
     } else {
         width = props.width || "100%";
     }
@@ -213,15 +207,21 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         autoPlay: autoPlay,
         muted: muted,
         loop: loop
-    }, needsWrapper ? {} : {
+    }, needsWrapper ? {
+        width: "100%"
+    } : {
         width: width,
         height: height
     }, {
         className: classes.video,
         preload: preload,
         // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
-        poster: needsWrapper ? TRANSPARENT_PIXEL : poster || TRANSPARENT_PIXEL
+        poster: poster || TRANSPARENT_PIXEL
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        style: {
+            // For some reason adding this style with JSS doesn't add the border radius in safari
+            borderRadius: noBorderRadius ? 0 : 4
+        },
         children: sources.map(function(param, index) {
             var src = param.src, type = param.type;
             return /*#__PURE__*/ (0, _jsxRuntime).jsx("source", {
@@ -235,9 +235,11 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             style: {
                 width: width,
                 height: height,
+                // adding the poster as background image avoids the flicker in Safari
                 backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
                 backgroundSize: "cover",
-                backgroundPosition: "50% 50%"
+                backgroundPosition: "50% 50%",
+                borderRadius: noBorderRadius ? 0 : 4
             },
             className: classes.wrapper,
             children: video1

package/dist-es/button.js

@@ -179,13 +179,12 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
             // - Make sure that in FF hover still has it's proper styles
             // - Media query with "coarse" (mobile), avoids that in devices that have coarse implemented, focus style doesn't get stuck
             // Must be always declared for Firefox
-            "&:hover:not([disabled])": {
-                backgroundColor: theme.colors.buttonPrimaryBackgroundHover,
-                "@media (pointer: coarse)": {
-                    // Revert hover background in touch devices
-                    backgroundColor: theme.colors.buttonPrimaryBackground
-                }
-            }
+            "&:hover:not([disabled])": _defineProperty({
+                backgroundColor: theme.colors.buttonPrimaryBackgroundHover
+            }, theme.mq.touchableOnly, {
+                // Revert hover background in touch devices
+                backgroundColor: theme.colors.buttonPrimaryBackground
+            })
         },
         inverse: {
             color: theme.colors.textButtonPrimaryInverse,
@@ -195,14 +194,13 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
                 color: theme.colors.textButtonPrimaryInverseSelected
             },
             "&[disabled]:not($isLoading)": disabledStyle,
-            "&:hover:not([disabled])": {
+            "&:hover:not([disabled])": _defineProperty({
                 color: theme.colors.textButtonPrimaryInverseSelected,
-                backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse,
-                "@media (pointer: coarse)": {
-                    color: theme.colors.textButtonPrimaryInverse,
-                    backgroundColor: theme.colors.buttonPrimaryBackgroundInverse
-                }
-            }
+                backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse
+            }, theme.mq.touchableOnly, {
+                color: theme.colors.textButtonPrimaryInverse,
+                backgroundColor: theme.colors.buttonPrimaryBackgroundInverse
+            })
         }
     });
 });
@@ -224,9 +222,7 @@ var useSecondaryButtonStyles = createUseStyles(function(theme) {
         light: _objectSpread({}, buttonSecondaryLightStyle(theme), {
             "&:enabled:active": _objectSpread({}, buttonSecondaryHoverLightStyle(theme)),
             "&[disabled]:not($isLoading)": disabledStyle,
-            "&:hover:not([disabled])": _objectSpread({}, buttonSecondaryHoverLightStyle(theme), {
-                "@media (pointer: coarse)": _objectSpread({}, buttonSecondaryLightStyle(theme))
-            })
+            "&:hover:not([disabled])": _objectSpread({}, buttonSecondaryHoverLightStyle(theme), _defineProperty({}, theme.mq.touchableOnly, _objectSpread({}, buttonSecondaryLightStyle(theme))))
         }),
         inverse: {
             borderColor: theme.colors.buttonSecondaryBorderInverse,
@@ -236,14 +232,13 @@ var useSecondaryButtonStyles = createUseStyles(function(theme) {
                 color: theme.colors.textButtonSecondaryInverseSelected
             },
             "&[disabled]:not($isLoading)": disabledStyle,
-            "&:hover:not([disabled])": {
+            "&:hover:not([disabled])": _defineProperty({
                 borderColor: theme.colors.buttonSecondaryBorderSelectedInverse,
-                color: theme.colors.textButtonSecondaryInverseSelected,
-                "@media (pointer: coarse)": {
-                    borderColor: theme.colors.buttonSecondaryBorderInverse,
-                    color: theme.colors.textButtonSecondaryInverse
-                }
-            }
+                color: theme.colors.textButtonSecondaryInverseSelected
+            }, theme.mq.touchableOnly, {
+                borderColor: theme.colors.buttonSecondaryBorderInverse,
+                color: theme.colors.textButtonSecondaryInverse
+            })
         }
     });
 });
@@ -257,13 +252,12 @@ var dangerButtonStyles = function(theme) {
         "&[disabled]:not($isLoading)": {
             opacity: 0.5
         },
-        "&:hover:not([disabled])": {
-            backgroundColor: theme.colors.buttonDangerBackgroundHover,
-            "@media (pointer: coarse)": {
-                // Revert hover background in touch devices
-                backgroundColor: theme.colors.buttonDangerBackground
-            }
-        }
+        "&:hover:not([disabled])": _defineProperty({
+            backgroundColor: theme.colors.buttonDangerBackgroundHover
+        }, theme.mq.touchableOnly, {
+            // Revert hover background in touch devices
+            backgroundColor: theme.colors.buttonDangerBackground
+        })
     };
 };
 var useDangerButtonStyles = createUseStyles(function(theme) {
@@ -447,12 +441,11 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
             "&:enabled:active": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected
             },
-            "&:hover:not([disabled])": {
-                backgroundColor: theme.colors.buttonLinkBackgroundSelected,
-                "@media (pointer: coarse)": {
-                    backgroundColor: "initial"
-                }
-            },
+            "&:hover:not([disabled])": _defineProperty({
+                backgroundColor: theme.colors.buttonLinkBackgroundSelected
+            }, theme.mq.touchableOnly, {
+                backgroundColor: "initial"
+            }),
             "&[disabled]": disabledStyle
         },
         inverse: {
@@ -460,12 +453,11 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
             "&:enabled:active": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
             },
-            "&:hover:not([disabled])": {
-                backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse,
-                "@media (pointer: coarse)": {
-                    backgroundColor: "initial"
-                }
-            }
+            "&:hover:not([disabled])": _defineProperty({
+                backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
+            }, theme.mq.touchableOnly, {
+                backgroundColor: "initial"
+            })
         },
         aligned: {
             marginLeft: -padding

package/dist-es/carousel.js

@@ -168,7 +168,8 @@ var hideScrollbar = {
 };
 var arrowButtonSize = 40;
 var arrowButtonStyle = function(theme) {
-    return {
+    return(// don't show carrousel arrow buttons in touch devices, just regular horizontal scroll
+    _defineProperty({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -180,12 +181,10 @@ var arrowButtonStyle = function(theme) {
         transition: "opacity 0.2s",
         "&[disabled]": {
             opacity: 0
-        },
-        // don't show carrousel arrow buttons in touch devices, just regular horizontal scroll
-        "@media (pointer: coarse)": {
-            display: "none"
         }
-    };
+    }, theme.mq.touchableOnly, {
+        display: "none"
+    }));
 };
 var useStyles = createUseStyles(function(theme) {
     var _obj, _obj1, _obj2;

package/dist-es/image.js

@@ -137,7 +137,11 @@ var useStyles = createUseStyles(function() {
             },
             "$wrapper &": {
                 borderRadius: 0,
-                position: "absolute",
+                position: function(param) {
+                    var aspectRatio = param.aspectRatio;
+                    return(// when aspectRatio is 0, we want the video to use the original aspect ratio
+                    aspectRatio ? "absolute" : "static");
+                },
                 width: "100%",
                 height: "100%",
                 top: 0,
@@ -160,7 +164,7 @@ var useStyles = createUseStyles(function() {
             paddingTop: function(param) {
                 var aspectRatio = param.aspectRatio, width = param.width;
                 if (!aspectRatio) {
-                    return "initial";
+                    return 0;
                 }
                 if (width && typeof width === "string" && width.endsWith("%")) {
                     return "".concat(Number(width.replace("%", "")) / aspectRatio, "%");
@@ -206,9 +210,9 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         width = props.width;
         height = props.height;
     } else if (typeof props.width === "number") {
-        height = props.width / ratio;
+        height = ratio ? props.width / ratio : undefined;
     } else if (typeof props.height === "number") {
-        width = props.height * ratio;
+        width = ratio ? props.height * ratio : undefined;
     } else {
         width = props.width || "100%";
     }
@@ -228,10 +232,12 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             setIsError(false);
             onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
         }
-    }, !needsWrapper ? {
+    }, needsWrapper ? {
+        width: "100%"
+    } : {
         width: width,
         height: height
-    } : {}));
+    }));
     if (needsWrapper) {
         return /*#__PURE__*/ _jsx("div", {
             style: {

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = "11.11.0";
+export var PACKAGE_VERSION = "11.12.1";

package/dist-es/text.js

@@ -33,6 +33,7 @@ import { createUseStyles } from "./jss";
 import { useIsInverseVariant } from "./theme-variant-context";
 import { pxToRem } from "./utils/css";
 import { getPrefixedDataAttributes } from "./utils/dom";
+import { useTheme } from "./hooks";
 var useStyles = createUseStyles(function(theme) {
     var mapToWeight = {
         light: 300,
@@ -157,67 +158,73 @@ var getWeight = function(props) {
     return props.light && "light" || props.regular && "regular" || props.medium && "medium";
 };
 export var Text10 = function(props) {
+    var textPresets = useTheme().textPresets;
     return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 64,
         desktopLineHeight: "72px",
-        weight: "light"
+        weight: textPresets.text10.weight
     }, props, {
         children: props.children
     }));
 };
 export var Text9 = function(props) {
+    var textPresets = useTheme().textPresets;
     return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 56,
         desktopLineHeight: "64px",
-        weight: "light"
+        weight: textPresets.text9.weight
     }, props, {
         children: props.children
     }));
 };
 export var Text8 = function(props) {
+    var textPresets = useTheme().textPresets;
     return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 40,
         desktopLineHeight: "48px",
-        weight: "light"
+        weight: textPresets.text8.weight
     }, props, {
         children: props.children
     }));
 };
 export var Text7 = function(props) {
+    var textPresets = useTheme().textPresets;
     return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 28,
         mobileLineHeight: "32px",
         desktopSize: 40,
         desktopLineHeight: "48px",
-        weight: "light"
+        weight: textPresets.text7.weight
     }, props, {
         children: props.children
     }));
 };
 export var Text6 = function(props) {
+    var textPresets = useTheme().textPresets;
     return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 24,
         mobileLineHeight: "32px",
         desktopSize: 32,
         desktopLineHeight: "40px",
-        weight: "light"
+        weight: textPresets.text6.weight
     }, props, {
         children: props.children
     }));
 };
 export var Text5 = function(props) {
+    var textPresets = useTheme().textPresets;
     return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 22,
         mobileLineHeight: "24px",
         desktopSize: 28,
         desktopLineHeight: "32px",
-        weight: "light"
+        weight: textPresets.text5.weight
     }, props, {
         children: props.children
     }));

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

@@ -134,15 +134,35 @@ var useDefaultHrefDecorator = function() {
         return href;
     };
 };
+var defaultTextPresetsConfig = {
+    text5: {
+        weight: "light"
+    },
+    text6: {
+        weight: "light"
+    },
+    text7: {
+        weight: "light"
+    },
+    text8: {
+        weight: "light"
+    },
+    text9: {
+        weight: "light"
+    },
+    text10: {
+        weight: "light"
+    }
+};
 var ThemeContextProvider = function(param) {
     var theme = param.theme, children = param.children, providerId = param.providerId;
-    var ref = _slicedToArray(React.useState(function() {
+    var ref6 = _slicedToArray(React.useState(function() {
         if (providerId) {
             return providerId;
         } else {
             return isServerSide() ? 0 : nextJssInstanceId++;
         }
-    }), 1), instanceId = ref[0];
+    }), 1), instanceId = ref6[0];
     var classNamePrefix = React.useMemo(function() {
         return process.env.NODE_ENV === "test" ? "" : "mistica-".concat(PACKAGE_VERSION.replace(/\./g, "-"), "_").concat(instanceId, "_");
     }, [
@@ -154,6 +174,7 @@ var ThemeContextProvider = function(param) {
     }, []);
     var isOsDarkModeEnabled = useIsOsDarkModeEnabled();
     var contextTheme = React.useMemo(function() {
+        var ref, ref1, ref2, ref3, ref4, ref5;
         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";
@@ -180,6 +201,14 @@ var ThemeContextProvider = function(param) {
             dimensions: _objectSpread({}, dimensions, theme.dimensions),
             mq: createMediaQueries((_mediaQueries = theme.mediaQueries) !== null && _mediaQueries !== void 0 ? _mediaQueries : mediaQueriesConfig),
             colors: colors,
+            textPresets: {
+                text5: _objectSpread({}, defaultTextPresetsConfig.text5, (ref = theme.skin.textPresets) === null || ref === void 0 ? void 0 : ref.text5),
+                text6: _objectSpread({}, defaultTextPresetsConfig.text6, (ref1 = theme.skin.textPresets) === null || ref1 === void 0 ? void 0 : ref1.text6),
+                text7: _objectSpread({}, defaultTextPresetsConfig.text7, (ref2 = theme.skin.textPresets) === null || ref2 === void 0 ? void 0 : ref2.text7),
+                text8: _objectSpread({}, defaultTextPresetsConfig.text8, (ref3 = theme.skin.textPresets) === null || ref3 === void 0 ? void 0 : ref3.text8),
+                text9: _objectSpread({}, defaultTextPresetsConfig.text9, (ref4 = theme.skin.textPresets) === null || ref4 === void 0 ? void 0 : ref4.text9),
+                text10: _objectSpread({}, defaultTextPresetsConfig.text10, (ref5 = theme.skin.textPresets) === null || ref5 === void 0 ? void 0 : ref5.text10)
+            },
             Link: (_Link = theme.Link) !== null && _Link !== void 0 ? _Link : AnchorLink,
             isDarkMode: isDarkModeEnabled,
             isIos: getPlatform(platformOverrides) === "ios",

package/dist-es/utils/media-queries.js

@@ -12,6 +12,10 @@ export var createMediaQueries = function(param) {
         // Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
         // WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
         // See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
-        supportsHover: "@media (pointer: fine), (pointer: none)"
+        supportsHover: "@media (pointer: fine), (pointer: none)",
+        /**
+     * Scopes the styles to touchable devices.
+     * See: https://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets/42835826#42835826
+     */ touchableOnly: "@media (pointer: coarse), @media (hover: none)"
     };
 };

package/dist-es/video.js

@@ -60,7 +60,7 @@ import { createUseStyles } from "./jss";
 import { useSupportsAspectRatio } from "./utils/aspect-ratio-support";
 import { combineRefs } from "./utils/common";
 import { getPrefixedDataAttributes } from "./utils/dom";
-import { isSafari } from "./utils/platform";
+import { isRunningAcceptanceTest, isSafari } from "./utils/platform";
 export var RATIO = {
     "1:1": 1,
     "16:9": 16 / 9,
@@ -75,10 +75,6 @@ var useStyles = createUseStyles(function() {
             objectFit: "cover",
             maxWidth: "100%",
             maxHeight: "100%",
-            borderRadius: function(param) {
-                var noBorderRadius = param.noBorderRadius;
-                return noBorderRadius ? 0 : 4;
-            },
             "@supports (aspect-ratio: 1 / 1)": {
                 aspectRatio: function(param) {
                     var aspectRatio = param.aspectRatio;
@@ -87,7 +83,11 @@ var useStyles = createUseStyles(function() {
             },
             "$wrapper &": {
                 borderRadius: 0,
-                position: "absolute",
+                position: function(param) {
+                    var aspectRatio = param.aspectRatio;
+                    return(// when aspectRatio is 0, we want the video to use the original aspect ratio
+                    aspectRatio ? "absolute" : "static");
+                },
                 width: "100%",
                 height: "100%",
                 top: 0,
@@ -95,10 +95,6 @@ var useStyles = createUseStyles(function() {
             }
         },
         wrapper: {
-            borderRadius: function(param) {
-                var noBorderRadius = param.noBorderRadius;
-                return noBorderRadius ? 0 : 4;
-            },
             overflow: "hidden",
             maxWidth: "100%",
             maxHeight: "100%",
@@ -106,7 +102,7 @@ var useStyles = createUseStyles(function() {
             paddingTop: function(param) {
                 var aspectRatio = param.aspectRatio, width = param.width;
                 if (!aspectRatio) {
-                    return "initial";
+                    return 0;
                 }
                 if (width && typeof width === "string" && width.endsWith("%")) {
                     return "".concat(Number(width.replace("%", "")) / aspectRatio, "%");
@@ -118,7 +114,7 @@ var useStyles = createUseStyles(function() {
 });
 /** Transparent 1x1px PNG  */ var TRANSPARENT_PIXEL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC";
 var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var src1 = _param.src, poster = _param.poster, _autoPlay = _param.autoPlay, autoPlay = _autoPlay === void 0 ? true : _autoPlay, _muted = _param.muted, muted = _muted === void 0 ? true : _muted, _loop = _param.loop, loop = _loop === void 0 ? true : _loop, _preload = _param.preload, preload = _preload === void 0 ? "none" : _preload, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? "1:1" : _aspectRatio, dataAttributes = _param.dataAttributes, props = _objectWithoutProperties(_param, [
+    var src1 = _param.src, poster = _param.poster, _autoPlay = _param.autoPlay, autoPlay = _autoPlay === void 0 ? !isRunningAcceptanceTest() : _autoPlay, _muted = _param.muted, muted = _muted === void 0 ? true : _muted, _loop = _param.loop, loop = _loop === void 0 ? true : _loop, _preload = _param.preload, preload = _preload === void 0 ? "none" : _preload, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? "1:1" : _aspectRatio, dataAttributes = _param.dataAttributes, props = _objectWithoutProperties(_param, [
         "src",
         "poster",
         "autoPlay",
@@ -135,7 +131,6 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     // if aspect ratio is 0, we use the original video proportions
     var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
     var classes = useStyles({
-        noBorderRadius: noBorderRadius,
         aspectRatio: withCssAspectRatio ? ratio : undefined,
         width: props.width
     });
@@ -166,9 +161,9 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         width = props.width;
         height = props.height;
     } else if (typeof props.width === "number") {
-        height = props.width / ratio;
+        height = ratio ? props.width / ratio : undefined;
     } else if (typeof props.height === "number") {
-        width = props.height * ratio;
+        width = ratio ? props.height * ratio : undefined;
     } else {
         width = props.width || "100%";
     }
@@ -185,15 +180,21 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         autoPlay: autoPlay,
         muted: muted,
         loop: loop
-    }, needsWrapper ? {} : {
+    }, needsWrapper ? {
+        width: "100%"
+    } : {
         width: width,
         height: height
     }, {
         className: classes.video,
         preload: preload,
         // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
-        poster: needsWrapper ? TRANSPARENT_PIXEL : poster || TRANSPARENT_PIXEL
+        poster: poster || TRANSPARENT_PIXEL
     }, getPrefixedDataAttributes(dataAttributes), {
+        style: {
+            // For some reason adding this style with JSS doesn't add the border radius in safari
+            borderRadius: noBorderRadius ? 0 : 4
+        },
         children: sources.map(function(param, index) {
             var src = param.src, type = param.type;
             return /*#__PURE__*/ _jsx("source", {
@@ -207,9 +208,11 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             style: {
                 width: width,
                 height: height,
+                // adding the poster as background image avoids the flicker in Safari
                 backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
                 backgroundSize: "cover",
-                backgroundPosition: "50% 50%"
+                backgroundPosition: "50% 50%",
+                borderRadius: noBorderRadius ? 0 : 4
             },
             className: classes.wrapper,
             children: video1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "11.11.0",
+    "version": "11.12.1",
     "license": "MIT",
     "repository": {
         "type": "git",