@telefonica/mistica 11.11.1 → 11.12.0

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, "%");
@@ -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.1";
+var PACKAGE_VERSION = "11.12.0";
 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,7 +1,7 @@
 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;
@@ -127,6 +127,7 @@ export declare type Theme = {
     };
     mq: MediaQueries;
     colors: Colors;
+    textPresets: TextPresetsConfig;
     Link: LinkComponent;
     isDarkMode: boolean;
     isIos: boolean;

package/dist/theme.js.flow

@@ -3,7 +3,7 @@
 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;
@@ -131,6 +131,7 @@ export type Theme = {
   },
   mq: MediaQueries,
   colors: Colors,
+  textPresets: TextPresetsConfig,
   Link: LinkComponent,
   isDarkMode: boolean,
   isIos: boolean,

package/dist/video.js

@@ -115,7 +115,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,
@@ -134,7 +137,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 +149,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",
@@ -213,7 +216,9 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         autoPlay: autoPlay,
         muted: muted,
         loop: loop
-    }, needsWrapper ? {} : {
+    }, needsWrapper ? {
+        width: "100%"
+    } : {
         width: width,
         height: height
     }, {

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, "%");
@@ -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.1";
+export var PACKAGE_VERSION = "11.12.0";

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/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,
@@ -87,7 +87,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,
@@ -106,7 +110,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 +122,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",
@@ -185,7 +189,9 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         autoPlay: autoPlay,
         muted: muted,
         loop: loop
-    }, needsWrapper ? {} : {
+    }, needsWrapper ? {
+        width: "100%"
+    } : {
         width: width,
         height: height
     }, {

package/package.json

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