@telefonica/mistica 12.5.0 → 12.7.0

package/dist/tooltip.js

@@ -6,11 +6,14 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactTransitionGroup = require("react-transition-group");
 var _hooks = require("./hooks");
 var _portal = require("./portal");
 var _overlay = _interopRequireDefault(require("./overlay"));
+var _text = require("./text");
 var key = _interopRequireWildcard(require("./utils/key-codes"));
 var _jss = require("./jss");
+var _stack = _interopRequireDefault(require("./stack"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -142,11 +145,16 @@ function _unsupportedIterableToArray(o, minLen) {
 var defaultPositionDesktop = "bottom";
 var defaultPositionMobile = "top";
 var arrowSize = 12;
-var distanceToTarget = 8 + arrowSize;
+var distanceToTarget = 4 + arrowSize;
 var marginLeftRightMobile = 16;
 var defaultWidthDesktop = 340;
 var arrowWrapperWidth = arrowSize * 2;
 var arrowWrapperHeight = arrowSize;
+var transitionDurationMs = 500;
+var animationMovement = 12;
+var animationTiming = "cubic-bezier(0.215, 0.61, 0.355, 1)";
+var defaultShowTooltipDelayMs = 500;
+var noOp = function noOp() {};
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     var shadowAlpha = theme.isDarkMode ? 1 : 0.2;
     return {
@@ -158,7 +166,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             top: 0,
             left: "50%",
             transform: "translate(-50%, -50%) rotate(45deg)",
-            border: "1px solid ".concat(theme.colors.divider),
+            border: "1px solid ".concat(theme.colors.border),
             borderRadius: 2
         },
         arrowTop: {
@@ -207,42 +215,142 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             left: 16,
             width: "auto",
             boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")"),
-            padding: 16,
+            padding: 8,
             backgroundColor: theme.colors.backgroundContainer,
-            zIndex: 12,
-            border: "1px solid ".concat(theme.colors.divider),
+            zIndex: 50,
+            border: "1px solid ".concat(theme.colors.border),
             borderRadius: 8
+        }
+    };
+});
+var useAnimationStyles = (0, _jss).createUseStyles(function() {
+    return {
+        enter: {
+            transform: function transform(param) {
+                var position = param.position;
+                if (position === "bottom") {
+                    return "translateY(".concat(animationMovement, "px)");
+                }
+                if (position === "top") {
+                    return "translateY(calc(-100% - ".concat(animationMovement, "px))");
+                }
+                if (position === "right") {
+                    return "translateX(".concat(animationMovement, "px) translateY(-50%)");
+                }
+                if (position === "left") {
+                    return "translateX(-".concat(animationMovement, "px) translateY(-50%)");
+                }
+                return "translateY(-".concat(animationMovement, "px)");
+            }
+        },
+        enterActive: {
+            animationName: function animationName(param) {
+                var position = param.position;
+                if (position === "top") return "$fadeInTop";
+                if (position === "bottom") return "$fadeInBottom";
+                return "$fadeInX";
+            },
+            animationFillMode: "both",
+            animationDuration: "".concat(transitionDurationMs, "ms"),
+            animationTimingFunction: animationTiming
+        },
+        enterDone: {
+            transform: function transform(param) {
+                var position = param.position;
+                if (position === "top") return "translateY(-100%)";
+                if (position === "bottom") return "translateY(0)";
+                return "translateY(-50%)";
+            }
         },
-        title: {
-            margin: 0,
-            marginBottom: 12,
-            color: theme.colors.textPrimary,
-            lineHeight: 1.42857142,
-            fontSize: 14
+        exit: {
+            transform: function transform(param) {
+                var position = param.position;
+                if (position === "bottom") {
+                    return "translateY(0)";
+                }
+                if (position === "top") {
+                    return "translateY(-100%)";
+                }
+                if (position === "right") {
+                    return "translateX(0px) translateY(-50%)";
+                }
+                if (position === "left") {
+                    return "translateX(0px) translateY(-50%)";
+                }
+                return "translateY(0px)";
+            },
+            opacity: 1,
+            transition: "opacity 0.3s ".concat(animationTiming)
+        },
+        exitActive: {
+            animation: "$fadeOut 0.3s ".concat(animationTiming, " both")
         },
-        description: {
-            margin: 0,
-            color: theme.colors.textPrimary,
-            lineHeight: 1.42857142,
-            fontSize: 14
+        "@keyframes fadeInBottom": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateY(0)"
+            }
+        },
+        "@keyframes fadeInTop": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateY(-100%)"
+            }
+        },
+        "@keyframes fadeInX": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateX(0) translateY(-50%)"
+            }
+        },
+        "@keyframes fadeOut": {
+            from: {
+                opacity: 1
+            },
+            to: {
+                opacity: 0
+            }
         }
     };
 });
 var getWidthDesktop = function getWidthDesktop(customWidth) {
     return customWidth ? customWidth : defaultWidthDesktop;
 };
-var EVENT_THROTTLE_TIME = process.env.NODE_ENV === "test" ? 0 : 200;
 var Tooltip = function Tooltip(_param) {
-    var children = _param.children, description = _param.description, target = _param.target, title = _param.title, targetLabel = _param.targetLabel, rest = _objectWithoutProperties(_param, [
+    var children = _param.children, extra = _param.extra, description = _param.description, target = _param.target, title = _param.title, targetLabel = _param.targetLabel, _delay = _param.delay, delay = _delay === void 0 ? true : _delay, rest = _objectWithoutProperties(_param, [
         "children",
+        "extra",
         "description",
         "target",
         "title",
-        "targetLabel"
+        "targetLabel",
+        "delay"
     ]);
     var ref = _slicedToArray(React.useState(false), 2), isVisible = ref[0], setIsVisible = ref[1];
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var ariaId = (0, _hooks).useAriaId();
+    var isPointerOver = React.useRef(false);
+    var closeTooltipTimeoutId = React.useRef(null);
+    var showTooltipTimeoutId = React.useRef(null);
+    var targetRef = React.useRef(null);
     var targetBoundingClientRect = React.useRef({
         top: 0,
         right: 0,
@@ -251,10 +359,16 @@ var Tooltip = function Tooltip(_param) {
         width: 0,
         height: 0
     });
-    // This property is needed because safari is making a mess with the events (it has problems
-    // when the overlay layer appears and disappears). This way we ensure that events don't get handled twice
-    var lastChangeTime = React.useRef(0);
+    var getPosition = function getPosition() {
+        var position = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultPositionDesktop;
+        return isTabletOrSmaller && (position === "left" || position === "right") ? defaultPositionMobile : position;
+    };
+    var position1 = getPosition(rest.position);
     var classes = useStyles();
+    var animationClasses = useAnimationStyles({
+        position: position1
+    });
+    var isTouchableDevice = typeof window !== "undefined" ? window.matchMedia("(pointer: coarse)").matches : false;
     var closeTooltip = function closeTooltip() {
         if (isVisible) {
             setIsVisible(false);
@@ -267,23 +381,16 @@ var Tooltip = function Tooltip(_param) {
         };
     });
     var handleClickOutside = function handleClickOutside() {
-        if (Date.now() - lastChangeTime.current < EVENT_THROTTLE_TIME) {
-            return;
-        }
-        lastChangeTime.current = Date.now();
         setIsVisible(false);
     };
-    var toggleVisibility = function toggleVisibility(e) {
-        if (Date.now() - lastChangeTime.current < EVENT_THROTTLE_TIME) {
-            return;
-        }
-        lastChangeTime.current = Date.now();
-        targetBoundingClientRect.current = e.currentTarget.getBoundingClientRect();
+    var toggleVisibility = function toggleVisibility() {
+        if (!targetRef.current) return;
+        targetBoundingClientRect.current = targetRef.current.getBoundingClientRect();
         setIsVisible(!isVisible);
     };
-    var handleFocus = function handleFocus(e) {
+    var handleFocus = function handleFocus() {
         if (!isVisible) {
-            toggleVisibility(e);
+            toggleVisibility();
         }
     };
     var handleKeyDown = function handleKeyDown(event) {
@@ -292,22 +399,19 @@ var Tooltip = function Tooltip(_param) {
         }
     };
     var getContainerPosition = function getContainerPosition(position, width) {
+        if (typeof window === "undefined") {
+            return {};
+        }
         var containerPos = {
             right: {
                 left: targetBoundingClientRect.current.right + distanceToTarget,
-                top: window.pageYOffset + targetBoundingClientRect.current.top + targetBoundingClientRect.current.height / 2,
-                transform: "translateY(-50%)",
-                WebKitTransform: "translateY(-50%)"
+                top: window.pageYOffset + targetBoundingClientRect.current.top + targetBoundingClientRect.current.height / 2
             },
             left: {
                 left: targetBoundingClientRect.current.left - width - distanceToTarget,
-                top: window.pageYOffset + targetBoundingClientRect.current.top + targetBoundingClientRect.current.height / 2,
-                transform: "translateY(-50%)",
-                WebKitTransform: "translateY(-50%)"
+                top: window.pageYOffset + targetBoundingClientRect.current.top + targetBoundingClientRect.current.height / 2
             },
             top: {
-                transform: "translateY(-100%)",
-                WebKitTransform: "translateY(-100%)",
                 top: window.pageYOffset + targetBoundingClientRect.current.top - distanceToTarget,
                 left: isTabletOrSmaller ? marginLeftRightMobile : window.pageXOffset + targetBoundingClientRect.current.left + targetBoundingClientRect.current.width / 2 - width / 2
             },
@@ -318,10 +422,6 @@ var Tooltip = function Tooltip(_param) {
         };
         return containerPos[position];
     };
-    var getPosition = function getPosition() {
-        var position = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultPositionDesktop;
-        return isTabletOrSmaller && (position === "left" || position === "right") ? defaultPositionMobile : position;
-    };
     var getCustomStylesForMobile = function getCustomStylesForMobile() {
         return isTabletOrSmaller ? {
             left: targetBoundingClientRect.current.left + targetBoundingClientRect.current.width / 2 - marginLeftRightMobile
@@ -330,7 +430,6 @@ var Tooltip = function Tooltip(_param) {
     var getWidth = function getWidth() {
         return isTabletOrSmaller ? window.innerWidth - marginLeftRightMobile * 2 : getWidthDesktop(rest.width);
     };
-    var position1 = getPosition(rest.position);
     var width1 = getWidth();
     var classNameByPosition = {
         top: classes.arrowTop,
@@ -341,8 +440,38 @@ var Tooltip = function Tooltip(_param) {
     return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                ref: targetRef,
                 className: classes.wrapper,
-                onPointerDown: toggleVisibility,
+                onPointerOver: function onPointerOver() {
+                    if (closeTooltipTimeoutId.current) {
+                        clearTimeout(closeTooltipTimeoutId.current);
+                        closeTooltipTimeoutId.current = null;
+                    }
+                    if (isPointerOver.current) return;
+                    isPointerOver.current = true;
+                    if (delay) {
+                        showTooltipTimeoutId.current = setTimeout(function() {
+                            showTooltipTimeoutId.current = null;
+                            toggleVisibility();
+                        }, defaultShowTooltipDelayMs);
+                    } else {
+                        toggleVisibility();
+                    }
+                },
+                onPointerLeave: isTouchableDevice ? noOp : function() {
+                    if (showTooltipTimeoutId.current) {
+                        clearTimeout(showTooltipTimeoutId.current);
+                        showTooltipTimeoutId.current = null;
+                        isPointerOver.current = false;
+                        return;
+                    }
+                    closeTooltipTimeoutId.current = setTimeout(function() {
+                        if (!isPointerOver.current) return;
+                        closeTooltipTimeoutId.current = null;
+                        isPointerOver.current = false;
+                        toggleVisibility();
+                    }, 100);
+                },
                 onFocus: handleFocus,
                 onKeyDown: handleKeyDown,
                 "touch-action": "auto" // Prop needed for Pointer Events Polyfill to work properly
@@ -354,40 +483,67 @@ var Tooltip = function Tooltip(_param) {
                 "aria-label": targetLabel,
                 children: target
             }),
-            isVisible && /*#__PURE__*/ (0, _jsxRuntime).jsxs(_portal.Portal, {
+            /*#__PURE__*/ (0, _jsxRuntime).jsxs(_portal.Portal, {
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_overlay.default, {
+                    isVisible && isTouchableDevice && /*#__PURE__*/ (0, _jsxRuntime).jsx(_overlay.default, {
                         onPress: handleClickOutside
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
-                        role: "tooltip",
-                        id: ariaId,
-                        className: classes.container,
-                        style: _objectSpread({
-                            width: width1
-                        }, getContainerPosition(position1, width1)),
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                                className: (0, _classnames).default(classes.arrowWrapper, classNameByPosition[position1]),
-                                style: getCustomStylesForMobile(),
-                                children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                                    className: classes.arrow
-                                })
-                            }),
-                            (title || description) && /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
-                                children: [
-                                    title && /*#__PURE__*/ (0, _jsxRuntime).jsx("p", {
-                                        className: classes.title,
-                                        children: title
-                                    }),
-                                    description && /*#__PURE__*/ (0, _jsxRuntime).jsx("p", {
-                                        className: classes.description,
-                                        children: description
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_reactTransitionGroup.CSSTransition, {
+                        in: isVisible,
+                        timeout: transitionDurationMs,
+                        classNames: {
+                            enter: animationClasses.enter,
+                            enterActive: animationClasses.enterActive,
+                            enterDone: animationClasses.enterDone,
+                            exit: animationClasses.exit,
+                            exitActive: animationClasses.exitActive
+                        },
+                        unmountOnExit: true,
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+                            role: "tooltip",
+                            id: ariaId,
+                            className: classes.container,
+                            style: _objectSpread({
+                                width: width1
+                            }, getContainerPosition(position1, width1)),
+                            onPointerOver: function onPointerOver() {
+                                if (closeTooltipTimeoutId.current) {
+                                    clearTimeout(closeTooltipTimeoutId.current);
+                                    closeTooltipTimeoutId.current = null;
+                                }
+                            },
+                            onPointerLeave: isTouchableDevice ? noOp : function() {
+                                closeTooltipTimeoutId.current = setTimeout(function() {
+                                    if (!isPointerOver.current) return;
+                                    closeTooltipTimeoutId.current = null;
+                                    isPointerOver.current = false;
+                                    toggleVisibility();
+                                }, 100);
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                                    className: (0, _classnames).default(classes.arrowWrapper, classNameByPosition[position1]),
+                                    style: getCustomStylesForMobile(),
+                                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                                        className: classes.arrow
                                     })
-                                ]
-                            }),
-                            children
-                        ]
+                                }),
+                                (title || description) && /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                                    space: 4,
+                                    children: [
+                                        title && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                                            medium: true,
+                                            children: title
+                                        }),
+                                        description && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                                            regular: true,
+                                            children: description
+                                        })
+                                    ]
+                                }),
+                                extra || children
+                            ]
+                        })
                     })
                 ]
             })

package/dist/tooltip.js.flow

@@ -4,12 +4,14 @@ import * as React from "react";
 declare type Position = "top" | "bottom" | "left" | "right";
 declare type Props = {
   children?: React.Node,
+  extra?: React.Node,
   description?: string,
   target: React.Node,
   title?: string,
   position?: Position,
   width?: number,
   targetLabel: string,
+  delay?: boolean,
 };
 declare var Tooltip: React.ComponentType<Props>;
 declare export default typeof Tooltip;

package/dist/touchable.d.ts

@@ -21,6 +21,7 @@ interface CommonProps {
     role?: string;
     type?: 'button' | 'submit';
     tabIndex?: number;
+    as?: 'a';
 }
 export interface PropsHref extends CommonProps {
     href: string;

package/dist/touchable.js

@@ -237,7 +237,12 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         }));
     }
     if (props.onPress) {
-        return /*#__PURE__*/ (0, _jsxRuntime).jsx("button", _objectSpread({}, commonProps, {
+        var _as;
+        var elementType = (_as = props.as) !== null && _as !== void 0 ? _as : "button";
+        var _role;
+        var role = (_role = commonProps.role) !== null && _role !== void 0 ? _role : props.as === "a" ? "button" : undefined;
+        return /*#__PURE__*/ React.createElement(elementType, _objectSpread({}, commonProps, {
+            role: role,
             // this "form" attribute is useful when the form's submit button
             // is located outside the <form> element, for example if you use
             // a ButtonFixedFooter layout inside a form with the submit

package/dist/touchable.js.flow

@@ -26,6 +26,7 @@ declare type CommonProps = {
   role?: string,
   type?: "button" | "submit",
   tabIndex?: number,
+  as?: "a",
 };
 export type PropsHref = {
   ...$Exact<CommonProps>,

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";