@telefonica/mistica 10.15.0 → 10.19.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# [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)
+
+
+### Bug Fixes
+
+* **Menu:** Menu component improvements ([#392](https://github.com/Telefonica/mistica-web/issues/392)) ([d8f1098](https://github.com/Telefonica/mistica-web/commit/d8f10988c7273da71645768c22d3a106dae0f15e))
+
+
+### Features
+
+* **Feedback:** show info/error icons in vivo ([c60e3a3](https://github.com/Telefonica/mistica-web/commit/c60e3a391174f0f6ff6e40c5bd795f2f950b5d69))
+* **TextFieldBase:** expose internal TextFieldBase component for advanced usage ([e917a99](https://github.com/Telefonica/mistica-web/commit/e917a99379d5f7fedddb0d5727cffd88af5a1d0f))
+
+# [10.16.0](https://github.com/Telefonica/mistica-web/compare/v10.15.0...v10.16.0) (2022-01-17)
+
+
+### Features
+
+* **Form:** improvements to be able to build custom fields ([cf5de03](https://github.com/Telefonica/mistica-web/commit/cf5de0398c441d943ee417123293450595aa95f5))
+
 # [10.15.0](https://github.com/Telefonica/mistica-web/compare/v10.14.2...v10.15.0) (2022-01-12)
 
 

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
@@ -174,8 +175,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/credit-card-expiration-field.js

@@ -7,12 +7,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+var _textFieldBase = require("./text-field-base");
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -243,7 +238,7 @@ var CreditCardExpirationField = function CreditCardExpirationField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         onChange: function onChange(event) {
             fieldProps.onChange(event);

package/dist/credit-card-number-field.js

@@ -8,7 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
 var _creditCard = require("./utils/credit-card");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _iconCreditcard = _interopRequireDefault(require("./icons/icon-creditcard"));
 var _iconVisa = _interopRequireDefault(require("./icons/icon-visa"));
 var _iconMastercard = _interopRequireDefault(require("./icons/icon-mastercard"));
@@ -358,7 +358,7 @@ var CreditCardNumberField = function CreditCardNumberField(_param) {
         onChangeValue: onChangeValue
     });
     var ref2;
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         onChange: function onChange(event) {
             fieldProps.onChange(event);

package/dist/cvv-field.js

@@ -12,7 +12,7 @@ var _tooltip = _interopRequireDefault(require("./tooltip"));
 var _iconButton = _interopRequireDefault(require("./icon-button"));
 var _iconInfoCvv = _interopRequireDefault(require("./icons/icon-info-cvv"));
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _integerField = require("./integer-field");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -178,7 +178,7 @@ var CvvField = function CvvField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         maxLength: maxLength,
         onChange: function onChange(event) {

package/dist/date-field.js

@@ -6,7 +6,7 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _dom = require("./utils/dom");
 var _environment = require("./utils/environment");
 var _iconCalendarRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular"));
@@ -168,7 +168,7 @@ var DateField = function DateField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? (0, _time).getLocalDateString(min) : undefined,
         max: max ? (0, _time).getLocalDateString(max) : undefined,

package/dist/date-time-field.js

@@ -6,7 +6,7 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _dom = require("./utils/dom");
 var _environment = require("./utils/environment");
 var _time = require("./utils/time");
@@ -169,7 +169,7 @@ var FormDateField = function FormDateField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? (0, _time).getLocalDateTimeString(min) : undefined,
         max: max ? (0, _time).getLocalDateTimeString(max) : undefined,

package/dist/date-time-picker.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _iconCalendarRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular"));
 var _reactDatetime = _interopRequireDefault(require("react-datetime"));
 var _overlay = _interopRequireDefault(require("./overlay"));
@@ -408,7 +408,7 @@ var DateTimePicker = function DateTimePicker(_param) {
     };
     return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
             }, rest, {
                 style: {
                     cursor: 'default'

package/dist/decimal-field.js

@@ -7,15 +7,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _dom = require("./utils/dom");
 var _rifm = require("rifm");
 var _common = require("./utils/common");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -244,7 +239,7 @@ var DecimalField = function DecimalField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: DecimalInput,
         inputProps: {

package/dist/email-field.js

@@ -6,12 +6,7 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+var _textFieldBase = require("./text-field-base");
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -116,7 +111,7 @@ var EmailField = function EmailField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: "email",
         inputMode: "email",

package/dist/feedback.js

@@ -459,13 +459,12 @@ var ErrorFeedbackScreen = function ErrorFeedbackScreen(_param) {
         "children",
         "errorReference"
     ]);
-    var ref = (0, _hooks).useTheme(), skinName = ref.skinName, colors = ref.colors;
-    var hasIcon = skinName !== _constants.VIVO_SKIN;
+    var ref = (0, _hooks).useTheme(), colors = ref.colors;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(FeedbackScreen, _objectSpread({
     }, otherProps, {
         hapticFeedback: "error",
-        icon: hasIcon ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconError.default, {
-        }) : undefined,
+        icon: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconError.default, {
+        }),
         animateText: true,
         children: [
             children,
@@ -479,12 +478,10 @@ var ErrorFeedbackScreen = function ErrorFeedbackScreen(_param) {
 };
 exports.ErrorFeedbackScreen = ErrorFeedbackScreen;
 var InfoFeedbackScreen = function InfoFeedbackScreen(props) {
-    var ref = (0, _hooks).useTheme(), skinName = ref.skinName;
-    var hasIcon = skinName !== _constants.VIVO_SKIN;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx(FeedbackScreen, _objectSpread({
     }, props, {
-        icon: hasIcon ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconInfo.default, {
-        }) : undefined
+        icon: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconInfo.default, {
+        })
     })));
 };
 exports.InfoFeedbackScreen = InfoFeedbackScreen;

package/dist/iban-field.js

@@ -7,15 +7,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _rifm = require("rifm");
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _dom = require("./utils/dom");
 var _common = require("./utils/common");
 var _hooks = require("./hooks");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -297,7 +292,7 @@ var IbanField = function IbanField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: IbanInput
     })));

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;

package/dist/index.d.ts

@@ -55,9 +55,11 @@ export { default as Callout } from './callout';
 export { useModalState } from './modal-context-provider';
 export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, NavigationBarLogo, } from './navigation-bar';
 export { default as Image } from './image';
+export { default as Video } from './video';
 export { default as Form } from './form';
 export { default as Select } from './select';
 export { default as TextField } from './text-field';
+export { TextFieldBase } from './text-field-base';
 export { default as SearchField } from './search-field';
 export { default as EmailField } from './email-field';
 export { default as PhoneNumberField } from './phone-number-field';
@@ -73,7 +75,7 @@ export { default as DecimalField } from './decimal-field';
 export { default as PasswordField } from './password-field';
 export { default as DoubleField } from './double-field';
 export { default as IbanField } from './iban-field';
-export { useForm } from './form-context';
+export { useForm, useFieldProps } from './form-context';
 export { default as IconClose } from './icons/icon-close';
 export { default as IconInfo } from './icons/icon-info';
 export { default as IconArrowDown } from './icons/icon-arrow-down';