@telefonica/mistica 12.6.0 → 12.8.0

package/dist/skeletons.js

@@ -8,7 +8,6 @@ var React = _interopRequireWildcard(require("react"));
 var _skeletonBase = _interopRequireDefault(require("./skeleton-base"));
 var _jss = require("./jss");
 var _stack = _interopRequireDefault(require("./stack"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _dom = require("./utils/dom");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -69,6 +68,8 @@ var transition = "1.5s linear";
 var useAnimation = (0, _jss).createUseStyles(function() {
     return {
         animation: {
+            width: "100%",
+            height: "100%",
             animation: "$pulse ".concat(transition, " infinite")
         },
         "@keyframes pulse": {
@@ -84,75 +85,52 @@ var useAnimation = (0, _jss).createUseStyles(function() {
         }
     };
 });
-var useSkeletonStyles = (0, _jss).createUseStyles(function() {
-    return {
-        wrap: {
-            borderRadius: 8,
-            height: function height(param) {
-                var _height = param.height, height1 = _height === void 0 ? 8 : _height;
-                return height1;
-            },
-            width: function width(param) {
-                var _width = param.width, width1 = _width === void 0 ? "100%" : _width;
-                return width1;
-            }
-        }
-    };
-});
-var SkeletonLine = function SkeletonLine(param) {
-    var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+var SkeletonAnimation = function SkeletonAnimation(param) {
+    var children = param.children, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
     var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: width
-    });
     return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
-        className: "".concat(animationClasses.animation, " ").concat(styleClass.wrap),
+        className: animationClasses.animation,
         role: "status",
+        "aria-busy": true,
         "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
         "aria-label": ariaLabel
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {})
+        children: children
+    }));
+};
+var SkeletonLine = function SkeletonLine(param) {
+    var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+            width: width
+        })
     }));
 };
 exports.SkeletonLine = SkeletonLine;
 var SkeletonText = function SkeletonText(param) {
     var ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        height: "fit-content"
-    });
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, _objectSpread({
-        className: "".concat(animationClasses.animation, " ").concat(styleClass.wrap),
-        space: 16,
-        role: "status",
-        "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {}),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {}),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
-                width: "75%"
-            })
-        ]
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+            space: 16,
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {}),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {}),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+                    width: "75%"
+                })
+            ]
+        })
     }));
 };
 exports.SkeletonText = SkeletonText;
 var SkeletonCircle = function SkeletonCircle(param) {
     var ariaLabel = param.ariaLabel, _size = param.size, size = _size === void 0 ? 40 : _size, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: size,
-        height: size
-    });
-    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
-        className: (0, _classnames).default(animationClasses.animation, styleClass.wrap),
-        role: "status",
-        "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
             height: size,
@@ -181,47 +159,32 @@ var useSkeletonRowStyles = (0, _jss).createUseStyles(function() {
 });
 var SkeletonRow = function SkeletonRow(param) {
     var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: width,
-        height: "100%"
-    });
     var rowClass = useSkeletonRowStyles();
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
-        className: (0, _classnames).default(animationClasses.animation, styleClass.wrap, rowClass.row),
-        role: "status",
-        "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
-                height: 40,
-                width: 40,
-                radius: "50%",
-                className: rowClass.circle
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
-                width: width,
-                className: rowClass.line
-            })
-        ]
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+            className: rowClass.row,
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+                    height: 40,
+                    width: 40,
+                    radius: "50%",
+                    className: rowClass.circle
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+                    width: width,
+                    className: rowClass.line
+                })
+            ]
+        })
     }));
 };
 exports.SkeletonRow = SkeletonRow;
 var SkeletonRectangle = function SkeletonRectangle(param) {
     var _width = param.width, width = _width === void 0 ? "100%" : _width, _height = param.height, height = _height === void 0 ? "100%" : _height, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: width,
-        height: "100%"
-    });
-    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
-        className: (0, _classnames).default(animationClasses.animation, styleClass.wrap),
-        role: "status",
-        "aria-hidden": true,
-        "aria-busy": true,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
             height: height,

package/dist/skeletons.js.flow

@@ -20,10 +20,10 @@ declare export var SkeletonCircle: (x: SkeletonCircleProps) => React.Node;
 declare type SkeletonRowProps = SkeletonLineProps;
 declare export var SkeletonRow: (x: SkeletonRowProps) => React.Node;
 declare type SkeletonRectangleProps = {
-  ...SkeletonLineProps,
-  ...{
-    height: number | string,
-  },
+  ariaLabel?: string,
+  dataAttributes?: DataAttributes,
+  width?: number | string,
+  height?: number | string,
 };
 declare export var SkeletonRectangle: (x: SkeletonRectangleProps) => React.Node;
 declare export {};

package/dist/skins/o2.js

@@ -73,7 +73,7 @@ var getO2Skin = function getO2Skin() {
             buttonDangerBackground: palette.pepper,
             buttonDangerBackgroundSelected: palette.pepper60,
             buttonDangerBackgroundHover: palette.pepper60,
-            buttonLinkBackgroundSelected: palette.o2BluePrimary15,
+            buttonLinkBackgroundSelected: palette.o2BluePrimary10,
             buttonLinkBackgroundSelectedInverse: (0, _color).applyAlpha(palette.white, 0.2),
             buttonPrimaryBackground: palette.o2BluePrimary,
             buttonPrimaryBackgroundInverse: palette.white,

package/dist/text-field-base.d.ts

@@ -26,7 +26,6 @@ export interface CommonFormFieldProps {
     defaultValue?: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     children?: void;
-    readOnly?: boolean;
 }
 interface TextFieldBaseProps {
     id?: string;

package/dist/text-field-base.js

@@ -205,6 +205,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         },
         textArea: _objectSpread((_obj = {
             resize: "none",
+            padding: 0,
             marginTop: function marginTop(param) {
                 var hasLabel = param.hasLabel;
                 return hasLabel ? 28 : 16;
@@ -441,6 +442,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         multiline: multiline,
         fullWidth: fullWidth,
         fieldRef: fieldRef,
+        readOnly: rest.readOnly,
         children: [
             startIcon && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: classes.startIcon,

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

@@ -52,7 +52,6 @@ export type CommonFormFieldProps = {
   value?: string,
   defaultValue?: string,
   onChange?: (event: SyntheticEvent<HTMLInputElement>) => void,
-  readOnly?: boolean,
 };
 declare type TextFieldBaseProps = {
   id?: string,

package/dist/text-field-components.d.ts

@@ -29,6 +29,7 @@ declare type FieldContainerProps = {
     className?: string;
     fieldRef?: React.RefObject<HTMLDivElement>;
     fullWidth?: boolean;
+    readOnly?: boolean;
 };
 export declare const FieldContainer: React.FC<FieldContainerProps>;
 export {};

package/dist/text-field-components.js

@@ -297,15 +297,19 @@ var useFieldContainerStyles = (0, _jss).createUseStyles(function(theme) {
                 var multiline = param.multiline;
                 return multiline ? 152 : 56;
             }
-        }), _defineProperty(_obj1, "display", "flex"), _defineProperty(_obj1, "position", "relative"), _defineProperty(_obj1, "backgroundColor", theme.colors.backgroundContainer), _obj1)
+        }), _defineProperty(_obj1, "display", "flex"), _defineProperty(_obj1, "position", "relative"), _defineProperty(_obj1, "backgroundColor", function(param) {
+            var readOnly = param.readOnly;
+            return readOnly ? theme.colors.neutralLow : theme.colors.backgroundContainer;
+        }), _obj1)
     };
 });
 var FieldContainer = function FieldContainer(param) {
-    var multiline = param.multiline, disabled = param.disabled, children = param.children, helperText = param.helperText, className = param.className, fieldRef = param.fieldRef, fullWidth = param.fullWidth;
+    var multiline = param.multiline, disabled = param.disabled, children = param.children, helperText = param.helperText, className = param.className, fieldRef = param.fieldRef, fullWidth = param.fullWidth, readOnly = param.readOnly;
     var classes = useFieldContainerStyles({
         multiline: multiline,
         fullWidth: fullWidth,
-        disabled: disabled
+        disabled: disabled,
+        readOnly: readOnly
     });
     return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
         className: classes.fieldContainer,

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

@@ -30,6 +30,7 @@ declare type FieldContainerProps = {
   className?: string,
   fieldRef?: React.Ref<"div">,
   fullWidth?: boolean,
+  readOnly?: boolean,
 };
 declare export var FieldContainer: React.ComponentType<FieldContainerProps>;
 declare export {};

package/dist/utils/aspect-ratio-support.d.ts

@@ -4,4 +4,14 @@ declare type Props = {
 };
 export declare const AspectRatioSupportProvider: React.FC<Props>;
 export declare const useSupportsAspectRatio: () => boolean;
+declare type AspectRatioElementProps = {
+    width?: number | string;
+    height?: number | string;
+    aspectRatio: number;
+    children: React.ReactNode;
+    as?: React.ComponentType<any> | string;
+    style?: React.CSSProperties;
+    className?: string;
+};
+export declare const AspectRatioElement: (props: AspectRatioElementProps) => JSX.Element;
 export {};

package/dist/utils/aspect-ratio-support.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.useSupportsAspectRatio = exports.AspectRatioSupportProvider = void 0;
+exports.AspectRatioElement = exports.useSupportsAspectRatio = exports.AspectRatioSupportProvider = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _hooks = require("../hooks");
+var _jss = require("../jss");
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -35,6 +36,19 @@ function _arrayLikeToArray(arr, len) {
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
 function _iterableToArrayLimit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -62,6 +76,22 @@ function _iterableToArrayLimit(arr, i) {
 function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -98,3 +128,87 @@ var useSupportsAspectRatio = function useSupportsAspectRatio() {
     return React.useContext(AspectRatioSupport);
 };
 exports.useSupportsAspectRatio = useSupportsAspectRatio;
+var useAspectRatioStyles = (0, _jss).createUseStyles(function() {
+    return {
+        container: {
+            "@supports (aspect-ratio: 1 / 1)": {
+                aspectRatio: function aspectRatio(param) {
+                    var aspectRatio1 = param.aspectRatio;
+                    return aspectRatio1 !== null && aspectRatio1 !== void 0 ? aspectRatio1 : "unset";
+                }
+            },
+            "$wrapper &": {
+                position: function position(param) {
+                    var aspectRatio = param.aspectRatio;
+                    return aspectRatio ? "absolute" : "static";
+                },
+                width: "100%",
+                height: "100%",
+                top: 0,
+                left: 0
+            }
+        },
+        wrapper: {
+            overflow: "hidden",
+            maxWidth: "100%",
+            maxHeight: "100%",
+            position: "relative",
+            paddingTop: function paddingTop(param) {
+                var aspectRatio = param.aspectRatio, width = param.width;
+                if (!aspectRatio) {
+                    return 0;
+                }
+                if (width && typeof width === "string" && width.endsWith("%")) {
+                    return "".concat(Number(width.replace("%", "")) / aspectRatio, "%");
+                }
+                return "".concat(100 / aspectRatio, "%");
+            }
+        }
+    };
+});
+var AspectRatioElement = function AspectRatioElement(props) {
+    var supportsAspectRatio = useSupportsAspectRatio();
+    // if width or height are numeric, we can calculate the other with the ratio without css.
+    // if aspect ratio is 0, we use the original image proportions
+    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && props.aspectRatio !== 0;
+    var classes = useAspectRatioStyles({
+        aspectRatio: withCssAspectRatio ? props.aspectRatio : undefined,
+        width: props.width
+    });
+    var width = props.width;
+    var height = props.height;
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (typeof props.width === "number") {
+        height = props.aspectRatio !== 0 ? props.width / props.aspectRatio : undefined;
+    } else if (typeof props.height === "number") {
+        width = props.aspectRatio !== 0 ? props.height * props.aspectRatio : undefined;
+    } else {
+        width = props.width || "100%";
+    }
+    var needsWrapper = withCssAspectRatio && !supportsAspectRatio;
+    var _as;
+    var container = /*#__PURE__*/ React.createElement((_as = props.as) !== null && _as !== void 0 ? _as : "div", {
+        className: props.className ? "".concat(props.className, " ").concat(classes.container) : classes.container,
+        style: _objectSpread({}, needsWrapper ? _objectSpread({}, props.style, {
+            width: "100%"
+        }) : _objectSpread({}, props.style, {
+            width: width,
+            height: height
+        }))
+    }, props.children);
+    if (needsWrapper) {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+            style: {
+                width: width,
+                height: height
+            },
+            className: classes.wrapper,
+            children: container
+        });
+    } else {
+        return container;
+    }
+};
+exports.AspectRatioElement = AspectRatioElement;

package/dist/utils/aspect-ratio-support.js.flow

@@ -6,4 +6,18 @@ declare type Props = {
 };
 declare export var AspectRatioSupportProvider: React.ComponentType<Props>;
 declare export var useSupportsAspectRatio: () => boolean;
+declare type AspectRatioElementProps = {
+  width?: number | string,
+  height?: number | string,
+  aspectRatio: number,
+  children: React.Node,
+  as?: React.ComponentType<any> | string,
+  style?: CssStyle,
+  className?: string,
+};
+declare export var AspectRatioElement: (
+  props: AspectRatioElementProps
+) => React.Node;
 declare export {};
+
+import { type CssStyle } from "../__css_types__.js.flow";

package/dist/video.js

@@ -98,44 +98,13 @@ exports.RATIO = RATIO;
 var useStyles = (0, _jss).createUseStyles(function() {
     return {
         video: {
+            width: "100%",
+            height: "100%",
             background: "transparent",
             display: "block",
             objectFit: "cover",
             maxWidth: "100%",
-            maxHeight: "100%",
-            "@supports (aspect-ratio: 1 / 1)": {
-                aspectRatio: function aspectRatio(param) {
-                    var aspectRatio1 = param.aspectRatio;
-                    return aspectRatio1 !== null && aspectRatio1 !== void 0 ? aspectRatio1 : "unset";
-                }
-            },
-            "$wrapper &": {
-                borderRadius: 0,
-                position: function position(param) {
-                    var aspectRatio = param.aspectRatio;
-                    return aspectRatio ? "absolute" : "static";
-                },
-                width: "100%",
-                height: "100%",
-                top: 0,
-                left: 0
-            }
-        },
-        wrapper: {
-            overflow: "hidden",
-            maxWidth: "100%",
-            maxHeight: "100%",
-            position: "relative",
-            paddingTop: function paddingTop(param) {
-                var aspectRatio = param.aspectRatio, width = param.width;
-                if (!aspectRatio) {
-                    return 0;
-                }
-                if (width && typeof width === "string" && width.endsWith("%")) {
-                    return "".concat(Number(width.replace("%", "")) / aspectRatio, "%");
-                }
-                return "".concat(100 / aspectRatio, "%");
-            }
+            maxHeight: "100%"
         }
     };
 });
@@ -151,16 +120,9 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         "aspectRatio",
         "dataAttributes"
     ]);
-    var supportsAspectRatio = (0, _aspectRatioSupport).useSupportsAspectRatio();
     var noBorderRadius = (0, _image).useDisableBorderRadius();
     var ratio = typeof aspectRatio === "number" ? aspectRatio : RATIO[aspectRatio];
-    // if width or height are numeric, we can calculate the other with the ratio without css
-    // 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({
-        aspectRatio: withCssAspectRatio ? ratio : undefined,
-        width: props.width
-    });
+    var classes = useStyles();
     var videoRef = React.useRef(null);
     React.useEffect(function() {
         var video = videoRef.current;
@@ -182,23 +144,6 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             return source;
         }
     });
-    var width = props.width;
-    var height = props.height;
-    if (props.width !== undefined && props.height !== undefined) {
-        width = props.width;
-        height = props.height;
-    } else if (typeof props.width === "number") {
-        height = ratio ? props.width / ratio : undefined;
-    } else if (typeof props.height === "number") {
-        width = ratio ? props.height * ratio : undefined;
-    } else {
-        width = props.width || "100%";
-    }
-    /**
-         * In safari, when using a video with poster, the transition from pause to play does a flicker,
-         * To avoid this, in Safari browsers, instead of using the poster attribute, we use a
-         * wrapper with the poster as background image
-         */ var needsWrapper = (0, _platform).isSafari() || withCssAspectRatio && !supportsAspectRatio;
     var video1 = /*#__PURE__*/ (0, _jsxRuntime).jsx("video", _objectSpread({
         ref: (0, _common).combineRefs(ref, videoRef),
         playsInline: true,
@@ -206,13 +151,7 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         disableRemotePlayback: true,
         autoPlay: autoPlay,
         muted: muted,
-        loop: loop
-    }, needsWrapper ? {
-        width: "100%"
-    } : {
-        width: width,
-        height: height
-    }, {
+        loop: loop,
         className: classes.video,
         preload: preload,
         // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
@@ -230,23 +169,25 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             }, index);
         })
     }));
-    if (needsWrapper) {
-        return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_aspectRatioSupport.AspectRatioElement, {
+        aspectRatio: ratio,
+        width: props.width,
+        height: props.height,
+        children: (0, _platform).isSafari() ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
             style: {
-                width: width,
-                height: height,
-                // adding the poster as background image avoids the flicker in Safari
-                backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
+                width: "100%",
+                height: "100%",
+                /**
+                             * In safari, when using a video with poster, the transition from pause to play does a flicker,
+                             * To avoid this, in Safari browsers, instead of using the poster attribute, we use a
+                             * wrapper with the poster as background image
+                             */ backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
                 backgroundSize: "cover",
-                backgroundPosition: "50% 50%",
-                borderRadius: noBorderRadius ? 0 : 8
+                backgroundPosition: "50% 50%"
             },
-            className: classes.wrapper,
             children: video1
-        });
-    } else {
-        return video1;
-    }
+        }) : video1
+    });
 });
 var _default = Video;
 exports.default = _default;