@telefonica/mistica 11.11.1 → 11.12.2

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.1";
+var PACKAGE_VERSION = "11.12.2";
 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
@@ -118,9 +119,12 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 return wordBreak ? "anywhere" : "inherit";
             },
             "@supports not (overflow-wrap: anywhere)": {
+                // "overflow-wrap: anywhere" is not supported in Safari
+                // "word-break: break-word" has the same effect as "word-break: normal" and "overflow-wrap: anywhere",
+                // regardless of the actual value of the overflow-wrap property.
                 wordBreak: function wordBreak(param) {
                     var wordBreak1 = param.wordBreak;
-                    return wordBreak1 ? "break-all" : "inherit";
+                    return wordBreak1 ? "break-word" : "inherit";
                 }
             },
             // Needed to reset the default browser margin that adds to p, h1, h2... elements.
@@ -139,10 +143,11 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             "-webkit-line-clamp": lineClamp,
             lineClamp: lineClamp,
             wordBreak: function wordBreak(param) {
-                var wordBreak2 = param.wordBreak;
-                return wordBreak2 ? "break-all" : "normal";
+                var truncate = param.truncate;
+                return truncate === 1 || truncate === true ? "break-all" : "break-word";
             },
             "@supports (overflow-wrap: anywhere)": {
+                overflowWrap: "anywhere",
                 wordBreak: function wordBreak(param) {
                     var truncate = param.truncate;
                     return truncate === 1 || truncate === true ? "break-all" : "normal";
@@ -190,72 +195,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

@@ -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/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.1";
+export var PACKAGE_VERSION = "11.12.2";

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,
@@ -86,9 +87,12 @@ var useStyles = createUseStyles(function(theme) {
                 return wordBreak ? "anywhere" : "inherit";
             },
             "@supports not (overflow-wrap: anywhere)": {
+                // "overflow-wrap: anywhere" is not supported in Safari
+                // "word-break: break-word" has the same effect as "word-break: normal" and "overflow-wrap: anywhere",
+                // regardless of the actual value of the overflow-wrap property.
                 wordBreak: function(param) {
                     var wordBreak = param.wordBreak;
-                    return wordBreak ? "break-all" : "inherit";
+                    return wordBreak ? "break-word" : "inherit";
                 }
             },
             // Needed to reset the default browser margin that adds to p, h1, h2... elements.
@@ -107,10 +111,11 @@ var useStyles = createUseStyles(function(theme) {
             "-webkit-line-clamp": lineClamp,
             lineClamp: lineClamp,
             wordBreak: function(param) {
-                var wordBreak = param.wordBreak;
-                return wordBreak ? "break-all" : "normal";
+                var truncate = param.truncate;
+                return truncate === 1 || truncate === true ? "break-all" : "break-word";
             },
             "@supports (overflow-wrap: anywhere)": {
+                overflowWrap: "anywhere",
                 wordBreak: function(param) {
                     var truncate = param.truncate;
                     return truncate === 1 || truncate === true ? "break-all" : "normal";
@@ -157,67 +162,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,
@@ -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.1",
+    "version": "11.12.2",
     "license": "MIT",
     "repository": {
         "type": "git",