@telefonica/mistica 11.10.0 → 11.11.0

package/dist-es/card.js

@@ -1,3 +1,58 @@
+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 _objectSpread(target) {
+    for(var i = 1; i < arguments.length; 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]);
+        });
+    }
+    return target;
+}
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import Tag from "./tag";
@@ -9,6 +64,8 @@ import { createUseStyles } from "./jss";
 import { Boxed } from "./boxed";
 import ButtonGroup from "./button-group";
 import { DisableBorderRadiusProvider } from "./image";
+import MaybeDismissable, { useIsDismissable } from "./maybe-dismissable";
+import Touchable from "./touchable";
 var useCardContentStyles = createUseStyles(function() {
     return {
         actions: {
@@ -19,7 +76,7 @@ var useCardContentStyles = createUseStyles(function() {
     };
 });
 var CardContent = function(param) {
-    var headline = param.headline, pretitle = param.pretitle, title = param.title, subtitle = param.subtitle, description = param.description, extra = param.extra, button = param.button, buttonLink = param.buttonLink;
+    var headline = param.headline, pretitle = param.pretitle, pretitleLinesMax = param.pretitleLinesMax, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink;
     var theme = useTheme();
     var classes = useCardContentStyles();
     var renderHeadline = function() {
@@ -49,16 +106,24 @@ var CardContent = function(param) {
                                     space: 4,
                                     children: [
                                         pretitle && /*#__PURE__*/ _jsx(Text1, {
+                                            wordBreak: true,
+                                            truncate: pretitleLinesMax,
+                                            as: "div",
                                             regular: true,
                                             transform: "uppercase",
                                             children: pretitle
                                         }),
                                         /*#__PURE__*/ _jsx(Text4, {
+                                            wordBreak: true,
+                                            truncate: titleLinesMax,
                                             as: "h1",
                                             regular: true,
                                             children: title
                                         }),
                                         /*#__PURE__*/ _jsx(Text2, {
+                                            wordBreak: true,
+                                            truncate: subtitleLinesMax,
+                                            as: "div",
                                             regular: true,
                                             children: subtitle
                                         })
@@ -68,6 +133,8 @@ var CardContent = function(param) {
                         })
                     }),
                     description && /*#__PURE__*/ _jsx(Text2, {
+                        wordBreak: true,
+                        truncate: descriptionLinesMax,
                         as: "p",
                         regular: true,
                         color: theme.colors.textSecondary,
@@ -88,10 +155,27 @@ var CardContent = function(param) {
         ]
     });
 };
+var MaybeSection = function(param) {
+    var ariaLabel = param["aria-label"], className = param.className, children = param.children;
+    var isDismissable = useIsDismissable();
+    if (isDismissable) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: className,
+            children: children
+        });
+    } else {
+        return /*#__PURE__*/ _jsx("section", {
+            className: className,
+            "aria-label": ariaLabel,
+            children: children
+        });
+    }
+};
 var useMediaCardStyles = createUseStyles(function() {
     return {
         boxed: {
-            height: "100%"
+            height: "100%",
+            width: "100%"
         },
         mediaCard: {
             display: "flex",
@@ -108,14 +192,15 @@ var useMediaCardStyles = createUseStyles(function() {
     };
 });
 export var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
-    var media = param.media, headline = param.headline, pretitle = param.pretitle, title = param.title, description = param.description, extra = param.extra, button = param.button, buttonLink = param.buttonLink, ariaLabel = param["aria-label"];
+    var media = param.media, headline = param.headline, pretitle = param.pretitle, pretitleLinesMax = param.pretitleLinesMax, title = param.title, titleLinesMax = param.titleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
     var classes = useMediaCardStyles({
         media: media
     });
-    return /*#__PURE__*/ _jsx(Boxed, {
+    var content = /*#__PURE__*/ _jsx(Boxed, {
         className: classes.boxed,
+        dataAttributes: dataAttributes,
         ref: ref,
-        children: /*#__PURE__*/ _jsxs("section", {
+        children: /*#__PURE__*/ _jsxs(MaybeSection, {
             className: classes.mediaCard,
             "aria-label": ariaLabel,
             children: [
@@ -127,8 +212,11 @@ export var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
                     children: /*#__PURE__*/ _jsx(CardContent, {
                         headline: headline,
                         pretitle: pretitle,
+                        pretitleLinesMax: pretitleLinesMax,
                         title: title,
+                        titleLinesMax: titleLinesMax,
                         description: description,
+                        descriptionLinesMax: descriptionLinesMax,
                         extra: extra,
                         button: button,
                         buttonLink: buttonLink
@@ -137,11 +225,17 @@ export var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
             ]
         })
     });
+    return /*#__PURE__*/ _jsx(MaybeDismissable, {
+        onClose: onClose,
+        "aria-label": ariaLabel,
+        children: content
+    });
 });
 var useDataCardStyles = createUseStyles(function() {
     return {
         boxed: {
-            height: "100%"
+            height: "100%",
+            width: "100%"
         },
         dataCard: {
             display: "flex",
@@ -152,13 +246,13 @@ var useDataCardStyles = createUseStyles(function() {
     };
 });
 export var DataCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
-    var icon = param.icon, headline = param.headline, title = param.title, subtitle = param.subtitle, description = param.description, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"];
+    var icon = param.icon, headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
     var classes = useDataCardStyles();
-    return /*#__PURE__*/ _jsx(Boxed, {
+    var content = /*#__PURE__*/ _jsx(Boxed, {
         className: classes.boxed,
         dataAttributes: dataAttributes,
         ref: ref,
-        children: /*#__PURE__*/ _jsxs("section", {
+        children: /*#__PURE__*/ _jsxs(MaybeSection, {
             className: classes.dataCard,
             "aria-label": ariaLabel,
             children: [
@@ -169,8 +263,11 @@ export var DataCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
                 /*#__PURE__*/ _jsx(CardContent, {
                     headline: headline,
                     title: title,
+                    titleLinesMax: titleLinesMax,
                     subtitle: subtitle,
+                    subtitleLinesMax: subtitleLinesMax,
                     description: description,
+                    descriptionLinesMax: descriptionLinesMax,
                     extra: extra,
                     button: button,
                     buttonLink: buttonLink
@@ -178,4 +275,109 @@ export var DataCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
             ]
         })
     });
+    return /*#__PURE__*/ _jsx(MaybeDismissable, {
+        "aria-label": ariaLabel,
+        onClose: onClose,
+        children: content
+    });
+});
+var useSnapCardStyles = createUseStyles(function(theme) {
+    return {
+        boxed: {
+            height: "100%"
+        },
+        touchable: _defineProperty({
+            display: "flex",
+            height: "100%"
+        }, theme.mq.supportsHover, {
+            "&:hover": {
+                backgroundColor: function(param) {
+                    var isTouchable = param.isTouchable, isInverse = param.isInverse;
+                    return(// @todo: define hover background color for inverse and for dark mode
+                    isTouchable && !isInverse && !theme.isDarkMode ? theme.colors.backgroundAlternative : "transparent");
+                }
+            }
+        }),
+        snapCard: _defineProperty({
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            padding: 16,
+            minHeight: 80,
+            minWidth: 104
+        }, theme.mq.desktopOrBigger, {
+            padding: 24
+        })
+    };
+});
+var SnapCard = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var icon = _param.icon, title = _param.title, titleLinesMax = _param.titleLinesMax, subtitle = _param.subtitle, subtitleLinesMax = _param.subtitleLinesMax, dataAttributes = _param.dataAttributes, ariaLabel = _param["aria-label"], extra = _param.extra, _isInverse = _param.isInverse, isInverse = _isInverse === void 0 ? false : _isInverse, touchableProps = _objectWithoutProperties(_param, [
+        "icon",
+        "title",
+        "titleLinesMax",
+        "subtitle",
+        "subtitleLinesMax",
+        "dataAttributes",
+        "aria-label",
+        "extra",
+        "isInverse"
+    ]);
+    var isTouchable = Boolean(touchableProps.to || touchableProps.href || touchableProps.onPress);
+    var classes = useSnapCardStyles({
+        isTouchable: isTouchable,
+        isInverse: isInverse,
+        hasIcon: !!icon
+    });
+    var colors = useTheme().colors;
+    return /*#__PURE__*/ _jsx(Boxed, {
+        className: classes.boxed,
+        dataAttributes: dataAttributes,
+        ref: ref,
+        isInverse: isInverse,
+        children: /*#__PURE__*/ _jsx(Touchable, _objectSpread({
+            maybe: true
+        }, touchableProps, {
+            className: classes.touchable,
+            "aria-label": ariaLabel,
+            children: /*#__PURE__*/ _jsxs("section", {
+                className: classes.snapCard,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            icon && /*#__PURE__*/ _jsx(Box, {
+                                paddingBottom: 16,
+                                children: icon
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                space: 4,
+                                children: [
+                                    title && /*#__PURE__*/ _jsx(Text2, {
+                                        wordBreak: true,
+                                        truncate: titleLinesMax,
+                                        as: "h1",
+                                        regular: true,
+                                        children: title
+                                    }),
+                                    subtitle && /*#__PURE__*/ _jsx(Text2, {
+                                        wordBreak: true,
+                                        truncate: subtitleLinesMax,
+                                        regular: true,
+                                        color: colors.textSecondary,
+                                        as: "p",
+                                        children: subtitle
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    extra && /*#__PURE__*/ _jsx(Box, {
+                        paddingTop: 16,
+                        children: extra
+                    })
+                ]
+            })
+        }))
+    });
 });
+export { SnapCard };

package/dist-es/highlighted-card.js

@@ -59,12 +59,10 @@ import { createUseStyles } from "./jss";
 import { useIsInverseVariant } from "./theme-variant-context";
 import Box from "./box";
 import Touchable from "./touchable";
-import IconCloseRegular from "./generated/mistica-icons/icon-close-regular";
-import { applyAlpha } from "./utils/color";
 import { useTheme } from "./hooks";
 import { Text4, Text2 } from "./text";
-import IconButton from "./icon-button";
 import { Boxed } from "./boxed";
+import MaybeDismissable, { useIsDismissable } from "./maybe-dismissable";
 var useStyles = createUseStyles(function(theme) {
     var _obj;
     return {
@@ -85,35 +83,6 @@ var useStyles = createUseStyles(function(theme) {
             minWidth: 100,
             height: "inherit"
         },
-        dismissableContainer: {
-            position: "relative",
-            display: "flex",
-            flexShrink: 0,
-            width: function(param) {
-                var width = param.width;
-                return width || "100%";
-            }
-        },
-        dismissableButton: {
-            position: "absolute",
-            top: 0,
-            right: 0,
-            width: 48,
-            height: 48,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-        },
-        dismissableCircleContainer: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: 24,
-            height: 24,
-            margin: "0 0 8px 8px",
-            borderRadius: "50%",
-            backgroundColor: applyAlpha(theme.colors.background, 0.7)
-        },
         textContainer: (_obj = {
             paddingLeft: 16,
             paddingTop: 24,
@@ -139,37 +108,6 @@ var useStyles = createUseStyles(function(theme) {
         }
     };
 });
-var Dismissable = function(param) {
-    var children = param.children, width = param.width, _onClose = param.onClose, onClose = _onClose === void 0 ? function() {} : _onClose;
-    var isInverse = useIsInverseVariant();
-    var classes = useStyles({
-        isInverse: isInverse,
-        width: width
-    });
-    var ref = useTheme(), colors = ref.colors, texts = ref.texts;
-    return /*#__PURE__*/ _jsxs("section", {
-        className: classes.dismissableContainer,
-        children: [
-            children,
-            /*#__PURE__*/ _jsx(IconButton, {
-                className: classes.dismissableButton,
-                onPress: onClose,
-                "aria-label": texts.closeButtonLabel,
-                style: {
-                    display: "flex",
-                    width: 48,
-                    height: 48
-                },
-                children: /*#__PURE__*/ _jsx("div", {
-                    className: classes.dismissableCircleContainer,
-                    children: /*#__PURE__*/ _jsx(IconCloseRegular, {
-                        color: colors.neutralHigh
-                    })
-                })
-            })
-        ]
-    });
-};
 var Content = function(props) {
     var title = props.title, description = props.description, imageUrl = props.imageUrl, imageFit = props.imageFit;
     var isInverseOutside = useIsInverseVariant();
@@ -181,18 +119,24 @@ var Content = function(props) {
         width: props.width
     });
     var theme = useTheme();
+    var isDismissable = useIsDismissable();
     var content = /*#__PURE__*/ _jsxs(Boxed, {
         isInverse: isInverse,
         className: classes.container,
+        dataAttributes: props.dataAttributes,
         children: [
             /*#__PURE__*/ _jsxs("div", {
                 // don't create another region when the Content is inside a Dismissable wrapper
-                role: props["aria-label"] ? "region" : undefined,
+                role: !isDismissable ? "region" : undefined,
                 className: classes.textContainer,
-                "aria-label": props["aria-label"],
+                // aria-label is already in Dismisable wrapper
+                "aria-label": !isDismissable ? props["aria-label"] : undefined,
                 children: [
                     /*#__PURE__*/ _jsx(Text4, {
+                        as: "h1",
                         regular: true,
+                        wordBreak: true,
+                        truncate: props.titleLinesMax,
                         children: title
                     }),
                     /*#__PURE__*/ _jsx(Box, {
@@ -200,6 +144,9 @@ var Content = function(props) {
                         children: /*#__PURE__*/ _jsx(Text2, {
                             regular: true,
                             color: theme.colors.textSecondary,
+                            wordBreak: true,
+                            truncate: props.descriptionLinesMax,
+                            as: "p",
                             children: description
                         })
                     }),
@@ -262,13 +209,13 @@ var HighlightedCard = function(_param) {
         "aria-label"
     ]);
     var label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : props.title;
-    return props.onClose ? /*#__PURE__*/ _jsx(Dismissable, {
+    return /*#__PURE__*/ _jsx(MaybeDismissable, {
         onClose: props.onClose,
         "aria-label": label,
         width: props.width,
-        children: /*#__PURE__*/ _jsx(Content, _objectSpread({}, props))
-    }) : /*#__PURE__*/ _jsx(Content, _objectSpread({}, props, {
-        "aria-label": label
-    }));
+        children: /*#__PURE__*/ _jsx(Content, _objectSpread({}, props, {
+            "aria-label": label
+        }))
+    });
 };
 export default HighlightedCard;

package/dist-es/index.js

@@ -48,7 +48,7 @@ export { default as Inline } from "./inline";
 export { default as HighlightedCard } from "./highlighted-card";
 export { default as Stepper } from "./stepper";
 export { default as ProgressBar } from "./progress-bar";
-export { MediaCard, DataCard } from "./card";
+export { MediaCard, DataCard, SnapCard } from "./card";
 export { default as Divider } from "./divider";
 export { default as Menu } from "./menu";
 export { default as EmptyState } from "./empty-state";

package/dist-es/maybe-dismissable.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { createUseStyles } from "./jss";
+import IconCloseRegular from "./generated/mistica-icons/icon-close-regular";
+import { useTheme } from "./hooks";
+import IconButton from "./icon-button";
+import { useIsInverseVariant } from "./theme-variant-context";
+import { applyAlpha } from "./utils/color";
+var DismissableContext = /*#__PURE__*/ React.createContext(false);
+export var useIsDismissable = function() {
+    return React.useContext(DismissableContext);
+};
+var useStyles = createUseStyles(function(theme) {
+    return {
+        dismissableContainer: {
+            position: "relative",
+            display: "flex",
+            flexShrink: 0,
+            width: function(param) {
+                var width = param.width;
+                return width || "100%";
+            }
+        },
+        dismissableButton: {
+            position: "absolute",
+            top: 0,
+            right: 0,
+            width: 48,
+            height: 48,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+        },
+        dismissableCircleContainer: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 24,
+            height: 24,
+            margin: "0 0 8px 8px",
+            borderRadius: "50%",
+            backgroundColor: applyAlpha(theme.colors.background, 0.7)
+        }
+    };
+});
+var MaybeDismissable = function(param) {
+    var children = param.children, width = param.width, onClose = param.onClose, ariaLabel = param["aria-label"];
+    var isInverse = useIsInverseVariant();
+    var classes = useStyles({
+        isInverse: isInverse,
+        width: width
+    });
+    var ref = useTheme(), colors = ref.colors, texts = ref.texts;
+    if (!onClose) {
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ _jsxs("section", {
+        className: classes.dismissableContainer,
+        "aria-label": ariaLabel,
+        children: [
+            /*#__PURE__*/ _jsx(DismissableContext.Provider, {
+                value: true,
+                children: children
+            }),
+            /*#__PURE__*/ _jsx(IconButton, {
+                className: classes.dismissableButton,
+                onPress: onClose,
+                "aria-label": texts.closeButtonLabel,
+                style: {
+                    display: "flex",
+                    width: 48,
+                    height: 48
+                },
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: classes.dismissableCircleContainer,
+                    children: /*#__PURE__*/ _jsx(IconCloseRegular, {
+                        color: colors.neutralHigh
+                    })
+                })
+            })
+        ]
+    });
+};
+export default MaybeDismissable;

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.10.0";
+export var PACKAGE_VERSION = "11.11.0";

package/dist-es/select.js

@@ -200,7 +200,7 @@ var useStyles = createUseStyles(function(theme) {
         },
         menuItem: (_obj1 = {
             color: theme.colors.textPrimary,
-            padding: "6px 16px",
+            padding: "8px 16px",
             height: 48,
             transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
         }, _defineProperty(_obj1, theme.mq.supportsHover, {

package/dist-es/text.js

@@ -85,6 +85,12 @@ var useStyles = createUseStyles(function(theme) {
                 var wordBreak = param.wordBreak;
                 return wordBreak ? "anywhere" : "inherit";
             },
+            "@supports not (overflow-wrap: anywhere)": {
+                wordBreak: function(param) {
+                    var wordBreak = param.wordBreak;
+                    return wordBreak ? "break-all" : "inherit";
+                }
+            },
             // Needed to reset the default browser margin that adds to p, h1, h2... elements.
             margin: 0
         }, theme.mq.tabletOrSmaller, {
@@ -110,7 +116,7 @@ var useStyles = createUseStyles(function(theme) {
                     return truncate === 1 || truncate === true ? "break-all" : "normal";
                 }
             },
-            display: "box",
+            display: "-webkit-box",
             boxOrient: "vertical",
             overflow: "hidden"
         }

package/dist-es/utils/platform.js

@@ -82,6 +82,14 @@ export var isIos = function(platformOverrides) {
     }
     return false;
 };
+/**
+ * Returns true if the browser is a safari browser:
+ * webview, mobile, desktop or a browser like Chrome for iOS which is just a safari with a skin
+ *
+ * Note that this function checks the navigator vendor. It doesn't use platformOverrides or userAgent.
+ */ export var isSafari = function() {
+    return navigator.vendor.includes("Apple");
+};
 export var isFirefox = function(platformOverrides) {
     return !!getUserAgent(platformOverrides).match(/Firefox\/([0-9]+)\./);
 };

package/dist-es/video.js

@@ -60,6 +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";
 export var RATIO = {
     "1:1": 1,
     "16:9": 16 / 9,
@@ -69,6 +70,7 @@ export var RATIO = {
 var useStyles = createUseStyles(function() {
     return {
         video: {
+            background: "transparent",
             display: "block",
             objectFit: "cover",
             maxWidth: "100%",
@@ -170,7 +172,11 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     } else {
         width = props.width || "100%";
     }
-    var needsWrapper = withCssAspectRatio && !supportsAspectRatio;
+    /**
+         * 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 = isSafari() || withCssAspectRatio && !supportsAspectRatio;
     var video1 = /*#__PURE__*/ _jsx("video", _objectSpread({
         ref: combineRefs(ref, videoRef),
         playsInline: true,
@@ -179,14 +185,14 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         autoPlay: autoPlay,
         muted: muted,
         loop: loop
-    }, !needsWrapper ? {
+    }, needsWrapper ? {} : {
         width: width,
         height: height
-    } : {}, {
+    }, {
         className: classes.video,
         preload: preload,
         // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
-        poster: poster || TRANSPARENT_PIXEL
+        poster: needsWrapper ? TRANSPARENT_PIXEL : poster || TRANSPARENT_PIXEL
     }, getPrefixedDataAttributes(dataAttributes), {
         children: sources.map(function(param, index) {
             var src = param.src, type = param.type;
@@ -200,7 +206,10 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         return /*#__PURE__*/ _jsx("div", {
             style: {
                 width: width,
-                height: height
+                height: height,
+                backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
+                backgroundSize: "cover",
+                backgroundPosition: "50% 50%"
             },
             className: classes.wrapper,
             children: video1