@telefonica/mistica 10.17.0 → 10.21.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# [10.21.0](https://github.com/Telefonica/mistica-web/compare/v10.20.0...v10.21.0) (2022-01-27)
+
+
+### Bug Fixes
+
+* **ButtonLayout:** missed button press in button layout when gaining focus ([#396](https://github.com/Telefonica/mistica-web/issues/396)) ([9f3bba5](https://github.com/Telefonica/mistica-web/commit/9f3bba57affeac7b89c7dc831d00ce4ef33cdb5f))
+* **ButtonLayout:** unstable in acceptance tests ([#404](https://github.com/Telefonica/mistica-web/issues/404)) ([11d4772](https://github.com/Telefonica/mistica-web/commit/11d4772c49d5f35bfcfa4ead6826782eccde5a18))
+
+
+### Features
+
+* **Touchable:** WEB-435 add hrefDecorator to theme ([#401](https://github.com/Telefonica/mistica-web/issues/401)) ([21a45ee](https://github.com/Telefonica/mistica-web/commit/21a45ee84259af4ccca2a5adf2a7242b442d2874))
+
+# [10.20.0](https://github.com/Telefonica/mistica-web/compare/v10.19.0...v10.20.0) (2022-01-24)
+
+
+### Features
+
+* **Tags:** Tag component evolution ([#372](https://github.com/Telefonica/mistica-web/issues/372)) ([0db48b1](https://github.com/Telefonica/mistica-web/commit/0db48b15525b67c574b90c8c450b35ef155ca199))
+
+# [10.19.0](https://github.com/Telefonica/mistica-web/compare/v10.18.0...v10.19.0) (2022-01-24)
+
+
+### Features
+
+* **Feedback:** Update animated success icon for O2 ([#397](https://github.com/Telefonica/mistica-web/issues/397)) ([c0952cd](https://github.com/Telefonica/mistica-web/commit/c0952cdf10779f097359754b8f8d1addccb05713))
+* **Image:** Added forward ref to Image component. ([#399](https://github.com/Telefonica/mistica-web/issues/399)) ([c78008f](https://github.com/Telefonica/mistica-web/commit/c78008f33d0a7979ead1760b01169a3e5bc65c1e))
+* **SectionTitle:** Changed right prop to React.Node ([#398](https://github.com/Telefonica/mistica-web/issues/398)) ([d94b986](https://github.com/Telefonica/mistica-web/commit/d94b98636a834291af46f3b51223de97aaf79e41))
+
+# [10.18.0](https://github.com/Telefonica/mistica-web/compare/v10.17.0...v10.18.0) (2022-01-21)
+
+
+### Features
+
+* **Video:** Video component and Video support in Media Cards ([#391](https://github.com/Telefonica/mistica-web/issues/391)) ([a830a9b](https://github.com/Telefonica/mistica-web/commit/a830a9b2f364d9f17245aba02cfbbfee678a064b))
+
 # [10.17.0](https://github.com/Telefonica/mistica-web/compare/v10.16.0...v10.17.0) (2022-01-18)
 
 

package/dist/button-layout.js

@@ -9,6 +9,7 @@ var _jss = require("./jss");
 var _hooks = require("./hooks");
 var _button = require("./button");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -207,28 +208,29 @@ var buttonsRange = [
 var ButtonLayout = function ButtonLayout(param) {
     var children = param.children, _align = param.align, align = _align === void 0 ? 'full-width' : _align, link = param.link, _withMargins = param.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins;
     var ref = (0, _hooks).useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller;
-    var ref1 = _slicedToArray(React.useState(true), 2), isMeasuring = ref1[0], setIsMeasuring = ref1[1];
     var childrenCount = React.Children.count(children);
-    var ref2 = _slicedToArray(React.useState(0), 2), buttonWidth = ref2[0], setButtonWidth = ref2[1];
-    var updateButtonWidth = function updateButtonWidth(buttonWidth) {
+    var ref1 = _slicedToArray(React.useState({
+        isMeasuring: true,
+        buttonWidth: 0
+    }), 2), buttonStatus = ref1[0], setButtonStatus = ref1[1];
+    var updateButtonStatus = function updateButtonStatus(param) {
+        var isMeasuring = param.isMeasuring, buttonWidth = param.buttonWidth;
         if (process.env.NODE_ENV !== 'test') {
-            setButtonWidth(buttonWidth);
-        }
-    };
-    var updateIsMeasuring = function updateIsMeasuring(isMeasuring) {
-        if (process.env.NODE_ENV !== 'test') {
-            setIsMeasuring(isMeasuring);
+            setButtonStatus({
+                isMeasuring: isMeasuring,
+                buttonWidth: buttonWidth
+            });
         }
     };
     var classes = useStyles({
-        buttonWidth: buttonWidth,
+        buttonWidth: buttonStatus.buttonWidth,
         isTabletOrSmaller: isTabletOrSmaller,
         align: align,
         childrenCount: childrenCount
     });
     var wrapperElRef = React.useRef(null);
     (0, _hooks).useIsomorphicLayoutEffect(function() {
-        if (isMeasuring) {
+        if (buttonStatus.isMeasuring) {
             var req = window.requestAnimationFrame(function() {
                 if (wrapperElRef.current) {
                     var childrenWidths = Array.from(wrapperElRef.current.children).map(function(el) {
@@ -243,8 +245,10 @@ var ButtonLayout = function ButtonLayout(param) {
                     var maxChildWidth = Math.ceil((_Math = Math).max.apply(_Math, _toConsumableArray(childrenWidths).concat([
                         _button.BUTTON_MIN_WIDTH
                     ])));
-                    updateButtonWidth(maxChildWidth);
-                    updateIsMeasuring(false);
+                    updateButtonStatus({
+                        isMeasuring: false,
+                        buttonWidth: maxChildWidth
+                    });
                 }
             });
             return function() {
@@ -255,11 +259,18 @@ var ButtonLayout = function ButtonLayout(param) {
         };
     }, [
         classes.link,
-        isMeasuring
+        buttonStatus
     ]);
-    var calcLayout = React.useCallback(function() {
-        updateButtonWidth(0);
-        updateIsMeasuring(true);
+    /**
+     * Multiple calls to calcLayout are debounced to workaround an issue that can be reproduced in chrome when pressing
+     * the button during a focus/visibility change. For example, pressing the button having the focus on the devTools.
+     */ var calcLayout = React.useMemo(function() {
+        return (0, _debounce).default(function() {
+            updateButtonStatus({
+                isMeasuring: true,
+                buttonWidth: 0
+            });
+        }, 50);
     }, []);
     useOnChildrenChangeEffect(wrapperElRef.current, calcLayout);
     useOnFontsReadyEffect(calcLayout);

package/dist/button.js

@@ -396,6 +396,11 @@ var Button = function Button(props) {
         disabled: props.disabled || showSpinner || isFormSending,
         role: 'button'
     };
+    if (process.env.NODE_ENV !== 'production') {
+        if (props.to === '' || props.href === '') {
+            throw Error('to or href props are empty strings');
+        }
+    }
     if (props.fake) {
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
             maybe: true
@@ -419,22 +424,25 @@ var Button = function Button(props) {
             onPress: props.onPress
         })));
     }
-    if (props.to) {
+    if (props.to || props.to === '') {
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
         }, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView
         })));
     }
-    if (props.href) {
+    if (props.href || props.href === '') {
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
         }, commonProps, {
             href: props.href,
             newTab: props.newTab
         })));
     }
-    // this cannot happen
-    throw Error('Bad button props');
+    if (process.env.NODE_ENV !== 'production') {
+        // this cannot happen
+        throw Error('Bad button props');
+    }
+    return null;
 };
 var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
     var padding = 6;
@@ -491,6 +499,11 @@ var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             children: props.children
         })
     };
+    if (process.env.NODE_ENV !== 'production') {
+        if (props.to === '' || props.href === '') {
+            throw Error('to or href props are empty strings');
+        }
+    }
     if (props.onPress) {
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
             ref: ref
@@ -498,7 +511,7 @@ var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             onPress: props.onPress
         })));
     }
-    if (props.to) {
+    if (props.to || props.to === '') {
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
             ref: ref
         }, commonProps, {
@@ -506,7 +519,7 @@ var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             fullPageOnWebView: props.fullPageOnWebView
         })));
     }
-    if (props.href) {
+    if (props.href || props.href === '') {
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
             ref: ref
         }, commonProps, {
@@ -514,8 +527,11 @@ var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             newTab: props.newTab
         })));
     }
-    // this cannot happen
-    throw Error('Bad button props');
+    if (process.env.NODE_ENV !== 'production') {
+        // this cannot happen
+        throw Error('Bad button props');
+    }
+    return null;
 });
 exports.ButtonLink = ButtonLink;
 var ButtonPrimary = function ButtonPrimary(props) {

package/dist/card.d.ts

@@ -1,9 +1,14 @@
 import * as React from 'react';
 import Tag from './tag';
 import { ButtonLink, ButtonPrimary } from './button';
+import Video from './video';
+import Image from './image';
 import type { ButtonProps, ButtonLinkProps } from './button';
 import type { DataAttributes } from './utils/types';
 import type { TagProps } from './tag';
+import type { VideoProps } from './video';
+import type { ImageProps } from './image';
+/** @deprecated */
 declare type CardMedia = {
     src: string;
     aspectRatio: number;
@@ -18,7 +23,11 @@ declare type CardMedia = {
     height?: undefined;
 };
 declare type MediaCardProps = {
-    media: CardMedia;
+    media: CardMedia | (React.ReactElement<ImageProps, typeof Image> & {
+        src?: undefined;
+    }) | (React.ReactElement<VideoProps, typeof Video> & {
+        src?: undefined;
+    });
     headline?: string | React.ReactElement<TagProps, typeof Tag>;
     pretitle?: string;
     title?: string;

package/dist/card.js

@@ -13,6 +13,7 @@ var _text = require("./text");
 var _jss = require("./jss");
 var _boxed = require("./boxed");
 var _buttonGroup = _interopRequireDefault(require("./button-group"));
+var _image = require("./image");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -46,8 +47,7 @@ var useCardContentStyles = (0, _jss).createUseStyles(function() {
         actions: {
             flex: 1,
             display: 'flex',
-            alignItems: 'flex-end',
-            marginTop: 16
+            alignItems: 'flex-end'
         }
     };
 });
@@ -61,32 +61,30 @@ var CardContent = function CardContent(param) {
         }
         if (typeof headline === 'string') {
             return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_tag.default, {
-                color: theme.colors.promo,
+                type: "promo",
                 children: headline
             }));
         }
         return headline;
     };
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+        space: 16,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
-                space: 16,
+                space: 8,
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
-                        space: 8,
-                        children: [
-                            (headline || pretitle || title || subtitle) && /*#__PURE__*/ (0, _jsxRuntime).jsx("header", {
-                                children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                    (headline || pretitle || title || subtitle) && /*#__PURE__*/ (0, _jsxRuntime).jsx("header", {
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                            space: 16,
+                            children: [
+                                renderHeadline(),
+                                /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
                                     space: 4,
                                     children: [
-                                        renderHeadline(),
-                                        pretitle && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
-                                            paddingTop: 4,
-                                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
-                                                regular: true,
-                                                uppercase: true,
-                                                children: pretitle
-                                            })
+                                        pretitle && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
+                                            regular: true,
+                                            uppercase: true,
+                                            children: pretitle
                                         }),
                                         /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text4, {
                                             as: "h1",
@@ -99,20 +97,20 @@ var CardContent = function CardContent(param) {
                                         })
                                     ]
                                 })
-                            }),
-                            description && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-                                as: "p",
-                                regular: true,
-                                color: theme.colors.textSecondary,
-                                children: description
-                            })
-                        ]
+                            ]
+                        })
                     }),
-                    extra && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                        children: extra
+                    description && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                        as: "p",
+                        regular: true,
+                        color: theme.colors.textSecondary,
+                        children: description
                     })
                 ]
             }),
+            extra && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                children: extra
+            }),
             (button || buttonLink) && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: classes.actions,
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_buttonGroup.default, {
@@ -174,8 +172,10 @@ var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
             className: classes.mediaCard,
             "aria-label": ariaLabel,
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                typeof media.src === 'string' ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.media
+                }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_image.DisableBorderRadiusProvider, {
+                    children: media
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.content,

package/dist/card.js.flow

@@ -3,7 +3,13 @@
 import * as React from "react";
 import Tag from "./tag";
 import { ButtonLink, ButtonPrimary } from "./button";
+import Video from "./video";
+import Image from "./image";
 import type { DataAttributes } from "./utils/types";
+
+/**
+ * @deprecated
+ */
 declare type CardMedia =
   | {
   src: string,
@@ -15,7 +21,16 @@ declare type CardMedia =
 }
   | { src: string };
 declare type MediaCardProps = {
-  media: CardMedia,
+  media:
+    | CardMedia
+    | {
+        ...React.Element<typeof Image>,
+        ...{},
+      }
+    | {
+        ...React.Element<typeof Video>,
+        ...{},
+      },
   headline?: string | React.Element<typeof Tag>,
   pretitle?: string,
   title?: string,

package/dist/header.d.ts

@@ -6,7 +6,9 @@ import type { TextPresetProps } from './text';
 import type { NavigationBreadcrumbsProps } from './navigation-breadcrumbs';
 declare type OverridableTextProps = {
     color?: TextPresetProps['color'];
+    /** @deprecated use decoration prop */
     textDecoration?: TextPresetProps['textDecoration'];
+    decoration?: TextPresetProps['decoration'];
     truncate?: TextPresetProps['truncate'];
 };
 declare type RichText = string | ({

package/dist/header.js.flow

@@ -6,7 +6,12 @@ import { ButtonPrimary, ButtonSecondary } from "./button";
 import type { TextPresetProps } from "./text";
 declare type OverridableTextProps = {
   color?: $PropertyType<TextPresetProps, "color">,
+
+  /**
+   * @deprecated use decoration prop
+   */
   textDecoration?: $PropertyType<TextPresetProps, "textDecoration">,
+  decoration?: $PropertyType<TextPresetProps, "decoration">,
   truncate?: $PropertyType<TextPresetProps, "truncate">,
 };
 declare type RichText =

package/dist/icons/icon-success.js

@@ -70,21 +70,29 @@ var IconSuccessO2 = function IconSuccessO2(param) {
         children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("g", {
             className: (0, _classnames).default(_defineProperty({
             }, classes.iconContainer, !color)),
-            strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("path", _objectSpread({
                     fill: "none",
+                    strokeWidth: "2",
                     stroke: color ? color : undefined,
-                    strokeMiterlimit: "10",
-                    d: "M21.7,35.6l2.8,2.8c1.1,1.1,2.9,1.1,4.1,0l17.3-17.3"
-                }, !skipAnimation && (0, _animation).mergeProperties((0, _animation).getAnimateDrawLineProps('33', '0.9s', platformOverrides), (0, _animation).getAnimateHopInProps('0.9s', platformOverrides)))),
+                    d: "M45.64 53.84A25.599 25.599 0 0 1 32 57.75C17.78 57.75 6.25 46.22 6.25 32S17.78 6.25 32 6.25 57.75 17.78 57.75 32c0 5.13-1.5 9.92-4.09 13.93"
+                }, !skipAnimation && (0, _animation).getAnimateDrawLineProps('202', '0.3s', platformOverrides))),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("path", _objectSpread({
                     fill: "none",
+                    strokeWidth: "2",
+                    stroke: color ? color : undefined,
+                    d: "m19.33 30.39 9.88 10.95 18.13-19.23"
+                }, !skipAnimation && (0, _animation).mergeProperties((0, _animation).getAnimateDrawLineProps('44', '0.6s', platformOverrides), (0, _animation).getAnimateHopInProps('0.6', platformOverrides)))),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("circle", _objectSpread({
+                    fill: "none",
+                    strokeWidth: "2",
                     stroke: color ? color : undefined,
-                    d: "M49.1,57.9C44.2,61.1,38.3,63,32,63C14.9,63,1,49.1,1,32C1,14.9,14.9,1,32,1c17.1,0,31,13.9,31,31c0,7.5-2.6,14.3-7.1,19.7"
-                }, !skipAnimation && (0, _animation).getAnimateDrawLineProps('186', '0.5s', platformOverrides)))
+                    cx: "50.18",
+                    cy: "50.1",
+                    r: ".89"
+                }, !skipAnimation && (0, _animation).getAnimateDrawLineProps('180', '0.2s', platformOverrides)))
             ]
         })
     }));

package/dist/image.d.ts

@@ -1,14 +1,35 @@
 import * as React from 'react';
-declare type AspectRatio = '1:1' | '16:9' | '7:10';
-declare type Props = {
+export declare const useDisableBorderRadius: () => boolean;
+export declare const DisableBorderRadiusProvider: React.FC;
+export declare type AspectRatio = '1:1' | '16:9' | '7:10';
+export declare const RATIO: {
+    '1:1': number;
+    '16:9': number;
+    '7:10': number;
+};
+export declare type ImageProps = {
+    src: string;
+    url?: undefined;
+    /** defaults to 100% when no width and no height are given */
+    width?: number;
+    height?: number;
+    /** defaults to 1:1, if both width and height are given, aspectRatio is ignored */
+    aspectRatio?: AspectRatio;
+    /** defaults to empty string */
+    alt?: string;
+    children?: void;
+};
+/** @deprecated */
+declare type DeprecatedImageProps = {
     url: string;
+    src?: undefined;
     width?: number;
     height?: number;
-    /** defaults to 1:1 */
+    /** defaults to 1:1, if both width and height are given, aspectRatio is ignored */
     aspectRatio?: AspectRatio;
     /** defaults to empty string */
     alt?: string;
     children?: void;
 };
-declare const Image: React.FC<Props>;
+declare const Image: React.ForwardRefExoticComponent<(ImageProps | DeprecatedImageProps) & React.RefAttributes<HTMLImageElement>>;
 export default Image;

package/dist/image.js

@@ -2,9 +2,33 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.default = void 0;
+exports.default = exports.useDisableBorderRadius = exports.RATIO = exports.DisableBorderRadiusProvider = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {
+        };
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
+                    };
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {
     };
@@ -35,14 +59,37 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
+/**
+ * This context is used internally to disable the border radius. This is useful for example
+ * when using the Image component inside a Card
+ */ var DisableBorderRadiusContext = /*#__PURE__*/ React.createContext(false);
+var useDisableBorderRadius = function useDisableBorderRadius() {
+    return React.useContext(DisableBorderRadiusContext);
+};
+exports.useDisableBorderRadius = useDisableBorderRadius;
+var DisableBorderRadiusProvider = function DisableBorderRadiusProvider(param) {
+    var children = param.children;
+    /*#__PURE__*/ return (0, _jsxRuntime).jsx(DisableBorderRadiusContext.Provider, {
+        value: true,
+        children: children
+    });
+};
+exports.DisableBorderRadiusProvider = DisableBorderRadiusProvider;
 var useStyles = (0, _jss).createUseStyles(function() {
     return {
         image: {
-            borderRadius: 4,
+            borderRadius: function borderRadius(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
             display: 'block',
             objectFit: 'cover',
             maxWidth: '100%',
-            maxHeight: '100%'
+            maxHeight: '100%',
+            aspectRatio: function aspectRatio(param) {
+                var aspectRatio1 = param.aspectRatio;
+                return aspectRatio1 !== null && aspectRatio1 !== void 0 ? aspectRatio1 : 'unset';
+            }
         }
     };
 });
@@ -51,27 +98,38 @@ var RATIO = {
     '16:9': 16 / 9,
     '7:10': 7 / 10
 };
-var Image = function Image(_param) {
-    var url = _param.url, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, props = _objectWithoutProperties(_param, [
-        "url",
+exports.RATIO = RATIO;
+var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, props = _objectWithoutProperties(_param, [
         "aspectRatio",
         "alt"
     ]);
-    var classes = useStyles();
+    var noBorderRadius = useDisableBorderRadius();
+    var classes = useStyles({
+        noBorderRadius: noBorderRadius,
+        aspectRatio: !props.width && !props.height ? RATIO[aspectRatio] : undefined
+    });
+    var url = props.src || props.url;
     var width = props.width;
     var height = props.height;
-    if (props.width !== undefined) {
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (props.width !== undefined) {
         height = props.width / RATIO[aspectRatio];
     } else if (props.height !== undefined) {
         width = props.height * RATIO[aspectRatio];
+    } else {
+        width = '100%';
     }
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx("img", {
+        ref: ref,
         src: url,
         className: classes.image,
         alt: alt,
         width: width,
         height: height
     }));
-};
+});
 var _default = Image;
 exports.default = _default;

package/dist/image.js.flow

@@ -1,13 +1,39 @@
 // @flow
 
 import * as React from "react";
-declare type AspectRatio = "1:1" | "16:9" | "7:10";
-declare type Props = {
+declare export var useDisableBorderRadius: () => boolean;
+declare export var DisableBorderRadiusProvider: React.ComponentType<{}>;
+export type AspectRatio = "1:1" | "16:9" | "7:10";
+declare export var RATIO: {
+  "1:1": number,
+  "16:9": number,
+  "7:10": number,
+};
+export type ImageProps = {
+ src: string,
+ /**
+  * defaults to 100% when no width and no height are given
+  */
+ width?: number,
+ height?: number,
+ /**
+  * defaults to 1:1, if both width and height are given, aspectRatio is ignored
+  */
+ aspectRatio?: AspectRatio,
+ /**
+  * defaults to empty string
+  */
+ alt?: string,
+};
+/**
+ * @deprecated
+ */
+declare type DeprecatedImageProps = {
  url: string,
  width?: number,
  height?: number,
  /**
-  * defaults to 1:1
+  * defaults to 1:1, if both width and height are given, aspectRatio is ignored
   */
  aspectRatio?: AspectRatio,
  /**
@@ -15,5 +41,8 @@ declare type Props = {
   */
  alt?: string,
 };
-declare var Image: React.ComponentType<Props>;
+declare var Image: React.ComponentType<{
+  ...ImageProps | DeprecatedImageProps,
+  ref?: React.Ref<HTMLImageElement>,
+}>;
 declare export default typeof Image;