@telefonica/mistica 9.17.0 → 10.2.0

package/dist/text-link.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { TrackingEvent } from './utils/types';
+import type { TrackingEvent, DataAttributes } from './utils/types';
 interface CommonProps {
     children?: React.ReactNode;
     className?: string;
@@ -9,8 +9,8 @@ interface CommonProps {
     };
     small?: boolean;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-    /** @deprecated use dataAttributes */
-    'data-testid'?: string;
+    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
+    dataAttributes?: DataAttributes;
 }
 export interface HrefProps extends CommonProps {
     href: string;
@@ -29,6 +29,6 @@ export interface OnPressProps extends CommonProps {
     href?: undefined;
     to?: undefined;
 }
-declare type Props = HrefProps | ToProps | OnPressProps;
-declare const TextLink: React.FC<Props>;
+export declare type TextLinkProps = HrefProps | ToProps | OnPressProps;
+declare const TextLink: React.FC<TextLinkProps>;
 export default TextLink;

package/dist/text-link.js

@@ -13,7 +13,9 @@ var _jss = require("./jss");
 
 var _touchable = _interopRequireDefault(require("./touchable"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _classnames2 = _interopRequireDefault(require("classnames"));
+
+var _themeVariantContext = require("./theme-variant-context");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -41,21 +43,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-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 _objectWithoutProperties(source, excluded) {
   if (source == null) return {};
 
@@ -92,21 +79,36 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+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;
+}
+
 var useStyles = (0, _jss.createUseStyles)(function (theme) {
   return {
-    textLink: {
+    textLink: _defineProperty({
       width: 'auto',
       lineHeight: 'inherit',
       display: 'inline-block',
       color: theme.colors.textLink,
-      wordBreak: 'break-word',
+      wordBreak: 'break-word'
+    }, theme.mq.supportsHover, {
       '&:hover': {
-        textDecoration: 'underline',
-        // Revert hover effect in touch devices
-        '@media (pointer: coarse)': {
-          textDecoration: 'initial'
-        }
+        textDecoration: 'underline'
       }
+    }),
+    inverse: {
+      color: theme.colors.textLinkInverse
     },
     small: {
       fontSize: 14
@@ -115,6 +117,8 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
 });
 
 var TextLink = function TextLink(_ref) {
+  var _classnames;
+
   var children = _ref.children,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
@@ -122,8 +126,9 @@ var TextLink = function TextLink(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   var classes = useStyles();
+  var isInverse = (0, _themeVariantContext.useIsInverseVariant)();
   return /*#__PURE__*/React.createElement(_touchable.default, _extends({}, props, {
-    className: (0, _classnames.default)(classes.textLink, className, _defineProperty({}, classes.small, small))
+    className: (0, _classnames2.default)(classes.textLink, className, (_classnames = {}, _defineProperty(_classnames, classes.small, small), _defineProperty(_classnames, classes.inverse, isInverse), _classnames))
   }), children);
 };
 

package/dist/text-link.js.flow

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from "react";
-import type { TrackingEvent } from "./utils/types";
+import type { TrackingEvent, DataAttributes } from "./utils/types";
 declare type CommonProps = {|
   children?: React.Node,
   className?: string,
@@ -11,9 +11,9 @@ declare type CommonProps = {|
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
 
   /**
-   * @deprecated use dataAttributes
+   * "data-" prefix is automatically added. For example, use "testid" instead of "data-testid"
    */
-  "data-testid"?: string,
+  dataAttributes?: DataAttributes,
 |};
 export type HrefProps = {|
   ...$Exact<CommonProps>,
@@ -29,8 +29,8 @@ export type OnPressProps = {|
   ...$Exact<CommonProps>,
   onPress: (event: SyntheticMouseEvent<HTMLElement>) => void | boolean,
 |};
-declare type Props = HrefProps | ToProps | OnPressProps;
-declare var TextLink: React.ComponentType<Props>;
+export type TextLinkProps = HrefProps | ToProps | OnPressProps;
+declare var TextLink: React.ComponentType<TextLinkProps>;
 declare export default typeof TextLink;
 
 import { type CssStyle } from "./__types__.js.flow";

package/dist/text.js

@@ -64,7 +64,7 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
     regular: 400,
     medium: 500
   };
-  var inverseColorsMap = (_inverseColorsMap = {}, _defineProperty(_inverseColorsMap, theme.colors.textPrimary, theme.colors.textPrimaryInverse), _defineProperty(_inverseColorsMap, theme.colors.textSecondary, theme.colors.textSecondaryInverse), _inverseColorsMap);
+  var inverseColorsMap = (_inverseColorsMap = {}, _defineProperty(_inverseColorsMap, theme.colors.textPrimary, theme.colors.textPrimaryInverse), _defineProperty(_inverseColorsMap, theme.colors.textSecondary, theme.colors.textSecondaryInverse), _defineProperty(_inverseColorsMap, theme.colors.textLink, theme.colors.textLinkInverse), _inverseColorsMap);
 
   var lineClamp = function lineClamp(_ref) {
     var truncate = _ref.truncate;

package/dist/theme-context-provider.js

@@ -39,6 +39,8 @@ var _tabFocus = _interopRequireDefault(require("./tab-focus"));
 
 var _portal = require("./portal");
 
+var _modalContextProvider = _interopRequireDefault(require("./modal-context-provider"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -225,7 +227,7 @@ var ThemeContextProvider = function ThemeContextProvider(_ref) {
   }, []);
   var isOsDarkModeEnabled = useIsOsDarkModeEnabled();
   var contextTheme = React.useMemo(function () {
-    var _theme$colorScheme, _theme$Link; // TODO: In next major version we could change this to "auto" by default
+    var _theme$colorScheme, _theme$mediaQueries, _theme$Link; // TODO: In next major version we could change this to "auto" by default
 
 
     var colorScheme = (_theme$colorScheme = theme.colorScheme) !== null && _theme$colorScheme !== void 0 ? _theme$colorScheme : 'light';
@@ -252,7 +254,7 @@ var ThemeContextProvider = function ThemeContextProvider(_ref) {
         }
       }, theme.analytics),
       dimensions: _objectSpread(_objectSpread({}, _theme.dimensions), theme.dimensions),
-      mq: theme.mediaQueries ? (0, _mediaQueries.createMediaQueries)(theme.mediaQueries) : (0, _mediaQueries.createMediaQueries)(_theme.mediaQueriesConfig),
+      mq: (0, _mediaQueries.createMediaQueries)((_theme$mediaQueries = theme.mediaQueries) !== null && _theme$mediaQueries !== void 0 ? _theme$mediaQueries : _theme.mediaQueriesConfig),
       colors: colors,
       Link: (_theme$Link = theme.Link) !== null && _theme$Link !== void 0 ? _theme$Link : _theme.AnchorLink,
       isDarkMode: isDarkModeEnabled,
@@ -265,11 +267,11 @@ var ThemeContextProvider = function ThemeContextProvider(_ref) {
     generateId: generateId
   }, /*#__PURE__*/React.createElement(_tabFocus.default, {
     disabled: !theme.enableTabFocus
-  }, /*#__PURE__*/React.createElement(_themeContext.default.Provider, {
+  }, /*#__PURE__*/React.createElement(_modalContextProvider.default, null, /*#__PURE__*/React.createElement(_themeContext.default.Provider, {
     value: contextTheme
   }, /*#__PURE__*/React.createElement(_ariaIdGetterContext.default.Provider, {
     value: getAriaId
-  }, /*#__PURE__*/React.createElement(_screenSizeContextProvider.default, null, /*#__PURE__*/React.createElement(_dialog.default, null, children)))))));
+  }, /*#__PURE__*/React.createElement(_screenSizeContextProvider.default, null, /*#__PURE__*/React.createElement(_dialog.default, null, children))))))));
 };
 
 var _default = ThemeContextProvider;

package/dist/theme.d.ts

@@ -29,6 +29,9 @@ declare const TEXTS_ES: {
     closeButtonLabel: string;
     formSearchClear: string;
     menuLabelSuffix: string;
+    openNavigationMenu: string;
+    closeNavigationMenu: string;
+    backNavigationBar: string;
 };
 export declare const getTexts: (locale: Locale) => typeof TEXTS_ES;
 export declare const dimensions: {
@@ -122,6 +125,7 @@ export declare type Theme = {
         tabletOrBigger: string;
         tabletOrSmaller: string;
         desktopOrBigger: string;
+        supportsHover: string;
     };
     colors: Colors;
     Link: LinkComponent;

package/dist/theme.js

@@ -93,7 +93,10 @@ var TEXTS_ES = {
   formIbanError: 'IBAN incorrecto',
   closeButtonLabel: 'Cerrar',
   formSearchClear: 'Borrar búsqueda',
-  menuLabelSuffix: 'menú'
+  menuLabelSuffix: 'menú',
+  openNavigationMenu: 'Abrir menú de navegación',
+  closeNavigationMenu: 'Cerrar menú de navegación',
+  backNavigationBar: 'Atrás'
 };
 var TEXTS_EN = {
   expirationDatePlaceholder: 'MM/YY',
@@ -119,7 +122,10 @@ var TEXTS_EN = {
   formIbanError: 'Incorrect IBAN',
   closeButtonLabel: 'Close',
   formSearchClear: 'Clear search',
-  menuLabelSuffix: 'menu'
+  menuLabelSuffix: 'menu',
+  openNavigationMenu: 'Open navigation menu',
+  closeNavigationMenu: 'Close navigation menu',
+  backNavigationBar: 'Back'
 };
 var TEXTS_DE = {
   expirationDatePlaceholder: 'MM/JJ',
@@ -145,7 +151,10 @@ var TEXTS_DE = {
   formIbanError: 'Falsche IBAN',
   closeButtonLabel: 'Schließen',
   formSearchClear: 'Suche löschen',
-  menuLabelSuffix: 'Menü'
+  menuLabelSuffix: 'Menü',
+  openNavigationMenu: 'Navigationsmenü öffnen',
+  closeNavigationMenu: 'Navigationsmenü schließen',
+  backNavigationBar: 'Zurück'
 };
 var TEXTS_PT = {
   expirationDatePlaceholder: 'MM/AA',
@@ -171,7 +180,10 @@ var TEXTS_PT = {
   formIbanError: 'IBAN incorreto',
   closeButtonLabel: 'Fechar',
   formSearchClear: 'Apagar pesquisa',
-  menuLabelSuffix: 'menu'
+  menuLabelSuffix: 'menu',
+  openNavigationMenu: 'Abrir menu de navegação',
+  closeNavigationMenu: 'Fechar menu de navegação',
+  backNavigationBar: 'Voltar'
 };
 
 var getTexts = function getTexts(locale) {

package/dist/theme.js.flow

@@ -31,6 +31,9 @@ declare var TEXTS_ES: {
   closeButtonLabel: string,
   formSearchClear: string,
   menuLabelSuffix: string,
+  openNavigationMenu: string,
+  closeNavigationMenu: string,
+  backNavigationBar: string,
 };
 declare export var getTexts: (locale: Locale) => typeof TEXTS_ES;
 declare export var dimensions: {
@@ -126,6 +129,7 @@ export type Theme = {
     tabletOrBigger: string,
     tabletOrSmaller: string,
     desktopOrBigger: string,
+    supportsHover: string,
   },
   colors: Colors,
   Link: LinkComponent,

package/dist/touchable.d.ts

@@ -9,11 +9,7 @@ interface CommonProps {
     elementRef?: React.Ref<HTMLButtonElement | HTMLAnchorElement | HTMLDivElement>;
     style?: React.CSSProperties;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-    /** @deprecated use aria-label */
-    label?: string;
     'aria-label'?: string;
-    /** @deprecated use dataAttributes */
-    'data-testid'?: string;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;
     'aria-checked'?: 'true' | 'false' | boolean;
@@ -22,6 +18,7 @@ interface CommonProps {
     'aria-hidden'?: 'true' | 'false' | boolean;
     'aria-selected'?: 'true' | 'false' | boolean;
     'aria-labelledby'?: string;
+    'aria-live'?: 'polite' | 'off' | 'assertive';
     role?: string;
     type?: 'button' | 'submit';
     tabIndex?: number;
@@ -67,6 +64,6 @@ export interface PropsMaybeOnPress extends CommonProps {
     to?: undefined;
     formId?: string;
 }
-declare type Props = PropsHref | PropsTo | PropsOnPress | PropsMaybeHref | PropsMaybeTo | PropsMaybeOnPress;
+export declare type Props = PropsHref | PropsTo | PropsOnPress | PropsMaybeHref | PropsMaybeTo | PropsMaybeOnPress;
 declare const Touchable: React.FC<Props>;
 export default Touchable;

package/dist/touchable.js

@@ -174,12 +174,12 @@ var Touchable = function Touchable(props) {
     disabled: props.disabled,
     style: props.style,
     role: props.role,
-    'data-testid': props['data-testid'],
     'aria-checked': props['aria-checked'],
     'aria-controls': props['aria-controls'],
     'aria-expanded': props['aria-expanded'],
     'aria-hidden': props['aria-hidden'],
     'aria-selected': props['aria-selected'],
+    'aria-live': props['aria-live'],
     tabIndex: props.tabIndex
   }, (0, _dom.getPrefixedDataAttributes)(props.dataAttributes));
 
@@ -256,10 +256,8 @@ var Touchable = function Touchable(props) {
   };
 
   if (!!props.href || props.to && props.fullPageOnWebView && (0, _platform.isInsideNovumNativeApp)(platformOverrides)) {
-    var _props$ariaLabel;
-
     return /*#__PURE__*/React.createElement("a", _extends({}, commonProps, {
-      "aria-label": (_props$ariaLabel = props['aria-label']) !== null && _props$ariaLabel !== void 0 ? _props$ariaLabel : props.label,
+      "aria-label": props['aria-label'],
       "aria-labelledby": props['aria-labelledby'],
       onClick: handleHrefClick,
       onKeyDown: handleKeyDown,
@@ -270,10 +268,8 @@ var Touchable = function Touchable(props) {
   }
 
   if (props.to) {
-    var _props$ariaLabel2;
-
     return /*#__PURE__*/React.createElement(Link, _extends({}, commonProps, {
-      "aria-label": (_props$ariaLabel2 = props['aria-label']) !== null && _props$ariaLabel2 !== void 0 ? _props$ariaLabel2 : props.label,
+      "aria-label": props['aria-label'],
       "aria-labelledby": props['aria-labelledby'],
       innerRef: props.elementRef,
       to: props.disabled ? '' : props.to,
@@ -284,15 +280,13 @@ var Touchable = function Touchable(props) {
   }
 
   if (props.onPress) {
-    var _props$ariaLabel3;
-
     return /*#__PURE__*/React.createElement("button", _extends({}, commonProps, {
       // 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
       // button located at the footer, which is redered using a Portal
       form: type === 'submit' && props.formId ? props.formId : undefined,
-      "aria-label": (_props$ariaLabel3 = props['aria-label']) !== null && _props$ariaLabel3 !== void 0 ? _props$ariaLabel3 : props.label,
+      "aria-label": props['aria-label'],
       "aria-labelledby": props['aria-labelledby'],
       type: type,
       ref: props.elementRef,

package/dist/touchable.js.flow

@@ -11,18 +11,8 @@ declare type CommonProps = {|
   elementRef?: React.Ref<"button" | "a" | "div">,
   style?: CssStyle,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
-
-  /**
-   * @deprecated use aria-label
-   */
-  label?: string,
   "aria-label"?: string,
 
-  /**
-   * @deprecated use dataAttributes
-   */
-  "data-testid"?: string,
-
   /**
    * "data-" prefix is automatically added. For example, use "testid" instead of "data-testid"
    */
@@ -33,6 +23,7 @@ declare type CommonProps = {|
   "aria-hidden"?: "true" | "false" | boolean,
   "aria-selected"?: "true" | "false" | boolean,
   "aria-labelledby"?: string,
+  "aria-live"?: "polite" | "off" | "assertive",
   role?: string,
   type?: "button" | "submit",
   tabIndex?: number,
@@ -72,7 +63,7 @@ export type PropsMaybeOnPress = {|
   onPress?: PressHandler,
   formId?: string,
 |};
-declare type Props =
+export type Props =
   | PropsHref
   | PropsTo
   | PropsOnPress

package/dist/utils/media-queries.d.ts

@@ -11,4 +11,5 @@ export declare const createMediaQueries: ({ desktopOrTabletMinHeight, tabletMinW
     tabletOrBigger: string;
     tabletOrSmaller: string;
     desktopOrBigger: string;
+    supportsHover: string;
 };

package/dist/utils/media-queries.js

@@ -17,7 +17,12 @@ var createMediaQueries = function createMediaQueries(_ref) {
     largeDesktop: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(largeDesktopMinWidth, "px)"),
     tabletOrBigger: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(tabletMinWidth, "px)"),
     tabletOrSmaller: "@media only screen and (max-width: ".concat(desktopMinWidth - 1, "px), ") + "(max-height: ".concat(desktopOrTabletMinHeight - 1, "px)"),
-    desktopOrBigger: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(desktopMinWidth, "px)")
+    desktopOrBigger: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(desktopMinWidth, "px)"),
+    // Only apply hover effect to user agents using fine pointer devices (a mouse, for example)
+    // Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
+    // WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
+    // See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
+    supportsHover: '@media (pointer: fine), (pointer: none)'
   };
 };
 

package/dist/utils/media-queries.js.flow

@@ -13,4 +13,5 @@ declare export var createMediaQueries: (x: {
   tabletOrBigger: string,
   tabletOrSmaller: string,
   desktopOrBigger: string,
+  supportsHover: string,
 };

package/dist-es/box.js

@@ -36,18 +36,13 @@ var Box = function Box(_ref) {
       _ref$paddingRight = _ref.paddingRight,
       paddingRight = _ref$paddingRight === void 0 ? paddingX : _ref$paddingRight,
       role = _ref.role,
-      dataTestId = _ref['data-testid'],
-      dataQsysId = _ref['data-qsysid'],
       dataAttributes = _ref.dataAttributes,
       ariaLabel = _ref['aria-label'];
   var classes = useStyles({
     padding: "".concat(paddingTop, "px ").concat(paddingRight, "px ").concat(paddingBottom, "px ").concat(paddingLeft, "px"),
     width: width
   });
-  return /*#__PURE__*/React.createElement("div", _extends({
-    "data-testid": dataTestId,
-    "data-qsysid": dataQsysId
-  }, getPrefixedDataAttributes(dataAttributes), {
+  return /*#__PURE__*/React.createElement("div", _extends({}, getPrefixedDataAttributes(dataAttributes), {
     className: classnames(className, classes.box),
     role: role,
     "aria-label": ariaLabel

package/dist-es/boxed.js

@@ -39,8 +39,6 @@ export var Boxed = function Boxed(_ref4) {
       isInverseInside = _ref4$isInverse === void 0 ? false : _ref4$isInverse,
       className = _ref4.className,
       role = _ref4.role,
-      dataTestId = _ref4['data-testid'],
-      dataQsysId = _ref4['data-qsysid'],
       dataAttributes = _ref4.dataAttributes,
       ariaLabel = _ref4['aria-label'];
   var isInverseOutside = useIsInverseVariant();
@@ -50,9 +48,7 @@ export var Boxed = function Boxed(_ref4) {
   });
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames(className, classes.boxed),
-    role: role,
-    "data-testid": dataTestId,
-    "data-qsysid": dataQsysId
+    role: role
   }, getPrefixedDataAttributes(dataAttributes), {
     "aria-label": ariaLabel
   }), /*#__PURE__*/React.createElement(ThemeVariant, {

package/dist-es/button.js

@@ -285,7 +285,6 @@ var Button = function Button(props) {
       cursor: props.fake ? 'pointer' : undefined
     }, props.style),
     trackingEvent: props.trackingEvent,
-    'data-testid': props['data-testid'],
     dataAttributes: props.dataAttributes,
     'aria-controls': props['aria-controls'],
     'aria-expanded': props['aria-expanded'],
@@ -415,7 +414,6 @@ export var ButtonLink = function ButtonLink(props) {
   var commonProps = {
     className: classnames(classes.link, (_classnames2 = {}, _defineProperty(_classnames2, classes.inverse, isInverse), _defineProperty(_classnames2, classes.aligned, props.aligned), _classnames2)),
     trackingEvent: props.trackingEvent,
-    'data-testid': props['data-testid'],
     dataAttributes: props.dataAttributes,
     children: /*#__PURE__*/React.createElement(Text2, {
       medium: true,

package/dist-es/callout.js

@@ -94,7 +94,7 @@ var Callout = function Callout(_ref3) {
       justifyContent: 'center'
     },
     onPress: onClose,
-    label: texts.closeButtonLabel
+    "aria-label": texts.closeButtonLabel
   }, /*#__PURE__*/React.createElement(IconClose, {
     color: colors.neutralHigh
   }))));

package/dist-es/card.js

@@ -28,7 +28,6 @@ var CardContent = function CardContent(_ref2) {
       title = _ref2.title,
       subtitle = _ref2.subtitle,
       description = _ref2.description,
-      body = _ref2.body,
       extra = _ref2.extra,
       button = _ref2.button,
       buttonLink = _ref2.buttonLink;
@@ -72,7 +71,7 @@ var CardContent = function CardContent(_ref2) {
     as: "p",
     regular: true,
     color: theme.colors.textSecondary
-  }, description)), (extra !== null && extra !== void 0 ? extra : body) && /*#__PURE__*/React.createElement("div", null, extra !== null && extra !== void 0 ? extra : body)), (button || buttonLink) && /*#__PURE__*/React.createElement("div", {
+  }, description)), extra && /*#__PURE__*/React.createElement("div", null, extra)), (button || buttonLink) && /*#__PURE__*/React.createElement("div", {
     className: classes.actions
   }, /*#__PURE__*/React.createElement(Inline, {
     space: 16,
@@ -128,7 +127,7 @@ export var MediaCard = function MediaCard(_ref5) {
       pretitle = _ref5.pretitle,
       title = _ref5.title,
       description = _ref5.description,
-      body = _ref5.body,
+      extra = _ref5.extra,
       button = _ref5.button,
       buttonLink = _ref5.buttonLink,
       ariaLabel = _ref5['aria-label'];
@@ -149,7 +148,7 @@ export var MediaCard = function MediaCard(_ref5) {
     pretitle: pretitle,
     title: title,
     description: description,
-    body: body,
+    extra: extra,
     button: button,
     buttonLink: buttonLink
   }))));
@@ -173,7 +172,6 @@ export var DataCard = function DataCard(_ref6) {
       title = _ref6.title,
       subtitle = _ref6.subtitle,
       description = _ref6.description,
-      body = _ref6.body,
       extra = _ref6.extra,
       button = _ref6.button,
       buttonLink = _ref6.buttonLink,
@@ -193,7 +191,7 @@ export var DataCard = function DataCard(_ref6) {
     title: title,
     subtitle: subtitle,
     description: description,
-    extra: extra !== null && extra !== void 0 ? extra : body,
+    extra: extra,
     button: button,
     buttonLink: buttonLink
   })));

package/dist-es/date-time-picker.js

@@ -295,7 +295,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     onFocus: onFocus,
     shrinkLabel: !!getValue(),
     endIcon: /*#__PURE__*/React.createElement(IconButton, {
-      label: "",
+      "aria-label": "",
       size: 32,
       onPress: function onPress() {
         return setShowPicker(!showPicker);

package/dist-es/dialog.js

@@ -41,7 +41,7 @@ import { ButtonPrimary, ButtonSecondary, ButtonDanger } from './button';
 import { createUseStyles } from './jss';
 import { Portal } from './portal';
 import FocusTrap from './focus-trap';
-import IcnClose from './icons/icon-close';
+import IcnCloseRegular from './generated/mistica-icons/icon-close-regular';
 import IconButton from './icon-button';
 import { isWebViewBridgeAvailable, nativeConfirm, nativeAlert } from '@tef-novum/webview-bridge';
 import ThemeContext from './theme-context';
@@ -51,6 +51,7 @@ import { Text4, Text3 } from './text';
 import { ESC } from './utils/key-codes';
 import Box from './box';
 import { isOldChrome, isRunningAcceptanceTest } from './utils/platform';
+import { useSetModalState } from './modal-context-provider';
 
 var animationsSupported = function animationsSupported(platformOverrides) {
   return !isOldChrome(platformOverrides) && process.env.NODE_ENV !== 'test' && !isRunningAcceptanceTest(platformOverrides);
@@ -324,6 +325,17 @@ var ModalDialog = function ModalDialog(props) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [addKeyDownListener, handleKeyDown, props, renderNative, platformOverrides]);
+  var setModalState = useSetModalState();
+  React.useEffect(function () {
+    setModalState({
+      isModalOpen: true
+    });
+    return function () {
+      setModalState({
+        isModalOpen: false
+      });
+    };
+  }, [setModalState]);
 
   var isClosing = props.isClosing,
       onCloseTransitionEnd = props.onCloseTransitionEnd,
@@ -361,8 +373,8 @@ var ModalDialog = function ModalDialog(props) {
     className: classes.modalCloseButtonContainer
   }, /*#__PURE__*/React.createElement(IconButton, {
     onPress: handleClose,
-    label: (_context$texts$modalC = context.texts.modalClose) !== null && _context$texts$modalC !== void 0 ? _context$texts$modalC : context.texts.closeButtonLabel
-  }, /*#__PURE__*/React.createElement(IcnClose, {
+    "aria-label": (_context$texts$modalC = context.texts.modalClose) !== null && _context$texts$modalC !== void 0 ? _context$texts$modalC : context.texts.closeButtonLabel
+  }, /*#__PURE__*/React.createElement(IcnCloseRegular, {
     color: context.colors.neutralHigh
   }))), /*#__PURE__*/React.createElement(Dialog, dialogProps)))))));
 };