@telefonica/mistica 9.17.0 → 10.2.0

package/dist-es/password-field.js

@@ -28,9 +28,9 @@ import IconButton from './icon-button';
 import Visibility from './icons/icon-visibility';
 import VisibilityOff from './icons/icon-visibility-off';
 import { createUseStyles } from './jss';
-var usePasswordAdornmentStyles = createUseStyles(function () {
+var usePasswordAdornmentStyles = createUseStyles(function (theme) {
   return {
-    shadow: _defineProperty({}, '@media (hover: hover)', {
+    shadow: _defineProperty({}, theme.mq.supportsHover, {
       '&:hover': {
         backgroundColor: 'rgba(0, 0, 0, 0.08)'
       }
@@ -55,7 +55,7 @@ var PasswordAdornment = function PasswordAdornment(_ref) {
     backgroundColor: undefined
   };
   return /*#__PURE__*/React.createElement(IconButton, {
-    label: texts.togglePasswordVisibilityLabel,
+    "aria-label": texts.togglePasswordVisibilityLabel,
     onPress: function onPress() {
       setVisibility(!isVisible);
       focus();
@@ -87,6 +87,8 @@ var PasswordField = function PasswordField(_ref2) {
       isVisible = _React$useState2[0],
       setIsVisible = _React$useState2[1];
 
+  var caretPositionRef = React.useRef(0);
+
   var _inputRef = React.useRef(null);
 
   var processValue = function processValue(value) {
@@ -97,16 +99,22 @@ var PasswordField = function PasswordField(_ref2) {
     var input = _inputRef.current;
 
     if (input) {
-      input.focus(); // neeeded to place the caret at the end
+      if (input.selectionStart !== null) {
+        caretPositionRef.current = input.selectionStart;
+      }
 
-      setTimeout(function () {
-        var v = input.value;
-        input.value = '';
-        input.value = v;
-      }, 0);
+      input.focus();
     }
   };
 
+  React.useEffect(function () {
+    var input = _inputRef.current;
+
+    if (input) {
+      input.selectionStart = caretPositionRef.current;
+      input.selectionEnd = caretPositionRef.current;
+    }
+  }, [isVisible, caretPositionRef, _inputRef]);
   var fieldProps = useFieldProps({
     name: name,
     value: value,

package/dist-es/phone-number-field.js

@@ -1,12 +1,6 @@
 var _excluded = ["inputRef", "value", "defaultValue", "onChange", "prefix", "e164"],
     _excluded2 = ["disabled", "error", "helperText", "name", "optional", "validate", "onChange", "onChangeValue", "onBlur", "value", "defaultValue", "e164"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } 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; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -170,9 +164,9 @@ var PhoneNumberField = function PhoneNumberField(_ref2) {
   });
   return /*#__PURE__*/React.createElement(TextFieldBase, _extends({}, rest, fieldProps, {
     type: "phone",
-    inputProps: _objectSpread(_objectSpread({}, rest.inputProps), {}, {
+    inputProps: {
       prefix: rest.prefix
-    }),
+    },
     inputComponent: PhoneInput
   }));
 };

package/dist-es/popover.js

@@ -279,7 +279,7 @@ var Popover = function Popover(_ref2) {
     }, /*#__PURE__*/React.createElement(IconButton, {
       onPress: handleClose,
       trackingEvent: trackingEvent,
-      label: texts.modalClose
+      "aria-label": texts.modalClose
     }, /*#__PURE__*/React.createElement(IcnClose, {
       color: colors.neutralHigh
     })))));

package/dist-es/search-field.js

@@ -92,7 +92,7 @@ var SearchField = function SearchField(_ref) {
         padding: 12,
         margin: -12
       },
-      label: theme.texts.formSearchClear,
+      "aria-label": theme.texts.formSearchClear,
       onPress: clearInput
     }, /*#__PURE__*/React.createElement(IconClose, null)) : undefined
   }, rest, fieldProps, {

package/dist-es/select.js

@@ -27,7 +27,7 @@ import { isAndroid, isIos } from './utils/platform';
 import { createUseStyles } from './jss';
 import { cancelEvent } from './utils/dom';
 var useStyles = createUseStyles(function (theme) {
-  var _selectContainer;
+  var _selectContainer, _menuItem;
 
   return {
     selectContainer: (_selectContainer = {
@@ -66,7 +66,7 @@ var useStyles = createUseStyles(function (theme) {
       height: '100%',
       textOverflow: 'ellipsis',
       '&:disabled': {
-        color: theme.colors.border
+        color: theme.colors.textDisabled
       },
       appearance: 'none',
       cursor: function cursor(_ref5) {
@@ -83,7 +83,11 @@ var useStyles = createUseStyles(function (theme) {
     selectText: {
       position: 'absolute',
       pointerEvents: 'none',
-      left: 12,
+      left: 12 + 1,
+      // 12 for select paddingLeft and +1 for border
+      right: 48 + 1,
+      // 48 for icon and +1 for border
+      overflow: 'hidden',
       top: function top(_ref6) {
         var label = _ref6.label;
         return label ? 27 : 17;
@@ -94,7 +98,8 @@ var useStyles = createUseStyles(function (theme) {
         return disabled ? theme.colors.textDisabled : theme.colors.textPrimary;
       },
       maxWidth: '100%',
-      textOverflow: 'ellipsis'
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
     },
     optionsContainer: {
       margin: 0,
@@ -109,7 +114,7 @@ var useStyles = createUseStyles(function (theme) {
         var optionsComputedProps = _ref9.optionsComputedProps;
         return optionsComputedProps.left;
       },
-      width: function width(_ref10) {
+      minWidth: function minWidth(_ref10) {
         var optionsComputedProps = _ref10.optionsComputedProps;
         return optionsComputedProps.width;
       },
@@ -142,19 +147,17 @@ var useStyles = createUseStyles(function (theme) {
     menuItemSelected: {
       backgroundColor: 'rgba(0, 0, 0, 0.14)'
     },
-    menuItem: {
+    menuItem: (_menuItem = {
       color: theme.colors.textPrimary,
       lineHeight: 1.5,
       padding: '6px 16px',
       height: 48,
-      transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+      transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
+    }, _defineProperty(_menuItem, theme.mq.supportsHover, {
       '&:hover': {
         backgroundColor: 'rgba(0, 0, 0, 0.08)'
-      },
-      display: 'flex',
-      alignItems: 'center',
-      cursor: 'pointer'
-    }
+      }
+    }), _defineProperty(_menuItem, "display", 'flex'), _defineProperty(_menuItem, "alignItems", 'center'), _defineProperty(_menuItem, "cursor", 'pointer'), _menuItem)
   };
 });
 
@@ -172,7 +175,6 @@ var Select = function Select(_ref15) {
       optional = _ref15.optional,
       disabledProp = _ref15.disabled,
       errorProp = _ref15.error,
-      inputProps = _ref15.inputProps,
       _onBlur = _ref15.onBlur,
       _ref15$autoFocus = _ref15.autoFocus,
       autoFocus = _ref15$autoFocus === void 0 ? false : _ref15$autoFocus,
@@ -226,7 +228,8 @@ var Select = function Select(_ref15) {
       register = _useForm.register;
 
   var _useTheme = useTheme(),
-      platformOverrides = _useTheme.platformOverrides;
+      platformOverrides = _useTheme.platformOverrides,
+      colors = _useTheme.colors;
 
   var shouldUseNative = native || process.env.NODE_ENV === 'test' || isAndroid(platformOverrides) || isIos(platformOverrides);
   var disabled = disabledProp || formStatus === 'sending';
@@ -465,6 +468,9 @@ var Select = function Select(_ref15) {
       }
     }
   };
+  var arrowIcon = /*#__PURE__*/React.createElement(IconArrowDown, {
+    color: disabledProp ? colors.neutralLow : undefined
+  });
   return shouldUseNative ? /*#__PURE__*/React.createElement(FieldContainer, {
     helperText: /*#__PURE__*/React.createElement(HelperText, {
       error: error,
@@ -478,7 +484,7 @@ var Select = function Select(_ref15) {
     inputState: isFocused ? 'focused' : ((_ref19 = value !== null && value !== void 0 ? value : valueState) !== null && _ref19 !== void 0 ? _ref19 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) ? 'filled' : 'default',
     disabled: disabled,
     optional: optional
-  }, label), /*#__PURE__*/React.createElement("select", _extends({}, inputProps, {
+  }, label), /*#__PURE__*/React.createElement("select", {
     className: classes.select,
     id: inputId,
     "aria-invalid": !!error,
@@ -508,7 +514,7 @@ var Select = function Select(_ref15) {
       // Without this fix, the label is invisible when disabled
       opacity: 1
     }
-  }), options.every(function (_ref20) {
+  }, options.every(function (_ref20) {
     var value = _ref20.value;
     return !!value;
   }) &&
@@ -530,7 +536,7 @@ var Select = function Select(_ref15) {
   })), /*#__PURE__*/React.createElement("div", {
     className: classes.arrowDown,
     "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(IconArrowDown, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+  }, arrowIcon)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
     className: classes.selectContainer,
     role: "button",
     "aria-haspopup": "listbox",
@@ -540,7 +546,7 @@ var Select = function Select(_ref15) {
       visibility: 'hidden'
     },
     fullWidth: fullWidth,
-    endIcon: /*#__PURE__*/React.createElement(IconArrowDown, null),
+    endIcon: arrowIcon,
     focus: isFocused,
     label: label,
     value: value,
@@ -551,7 +557,6 @@ var Select = function Select(_ref15) {
     disabled: disabled,
     id: inputId,
     error: error,
-    inputProps: inputProps,
     inputRef: inputRef,
     fieldRef: fieldRef
   }), /*#__PURE__*/React.createElement("div", {

package/dist-es/skins/movistar.js

@@ -100,8 +100,6 @@ export var getMovistarSkin = function getMovistarSkin(variant) {
       controlError: palette.pepper,
       loadingBar: palette.movistarBlueLight50,
       loadingBarBackground: palette.movistarBlueDark,
-      loadingBarBackgroundInverse: palette.movistarBlueDark,
-      loadingBarInverse: palette.movistarBlueLight50,
       toggleAndroidInactive: palette.grey2,
       // web only
       toggleAndroidBackgroundActive: palette.movistarBlueLight30,
@@ -129,7 +127,7 @@ export var getMovistarSkin = function getMovistarSkin(variant) {
       textPrimaryInverse: palette.white,
       textSecondary: palette.grey5,
       textSecondaryInverse: palette.white,
-      textDisabled: palette.grey3,
+      textDisabled: palette.grey4,
       textAmount: palette.movistarBlue,
       // STATES
       error: palette.pepper,
@@ -196,8 +194,6 @@ export var getMovistarSkin = function getMovistarSkin(variant) {
       controlActivated: palette.movistarBlue,
       loadingBar: palette.movistarBlue,
       loadingBarBackground: applyAlpha(palette.white, 0.05),
-      loadingBarBackgroundInverse: palette.movistarGreenDark,
-      loadingBarInverse: palette.movistarGreenLight50,
       toggleAndroidInactive: palette.grey4,
       // web only
       toggleAndroidBackgroundActive: palette.movistarBlueLight30,

package/dist-es/skins/o2-classic.js

@@ -133,7 +133,7 @@ export var getO2ClassicSkin = function getO2ClassicSkin() {
       textPrimaryInverse: palette.white,
       textSecondary: palette.grey5,
       textSecondaryInverse: palette.white,
-      textDisabled: palette.grey3,
+      textDisabled: palette.grey4,
       textAmount: palette.o2SkyBlue,
       // STATES
       error: palette.pepper,

package/dist-es/skins/o2.js

@@ -133,7 +133,7 @@ export var getO2Skin = function getO2Skin() {
       textPrimaryInverse: palette.white,
       textSecondary: palette.grey5,
       textSecondaryInverse: palette.white,
-      textDisabled: palette.grey3,
+      textDisabled: palette.grey4,
       textAmount: palette.o2BluePrimary,
       // STATES
       error: palette.pepper,

package/dist-es/skins/telefonica.js

@@ -127,7 +127,7 @@ export var getTelefonicaSkin = function getTelefonicaSkin() {
       textPrimaryInverse: palette.white,
       textSecondary: palette.grey5,
       textSecondaryInverse: palette.white,
-      textDisabled: palette.grey3,
+      textDisabled: palette.grey4,
       textAmount: palette.telefonicaBlue,
       // STATES
       error: palette.coral,

package/dist-es/skins/vivo.js

@@ -121,7 +121,7 @@ export var getVivoSkin = function getVivoSkin() {
       textPrimaryInverse: palette.white,
       textSecondary: palette.grey5,
       textSecondaryInverse: palette.white,
-      textDisabled: palette.grey3,
+      textDisabled: palette.grey4,
       textAmount: palette.vivoPurple,
       // STATES
       error: palette.pepper,

package/dist-es/tabs.js

@@ -25,6 +25,8 @@ var TAB_MAX_WIDTH = 284;
 var TAB_HEIGHT = 56;
 var LINE_ANIMATION_DURATION_MS = isRunningAcceptanceTest() ? 0 : 300;
 var useStyles = createUseStyles(function (_ref) {
+  var _tab;
+
   var colors = _ref.colors,
       mq = _ref.mq;
   return {
@@ -52,7 +54,7 @@ var useStyles = createUseStyles(function (_ref) {
       height: TAB_HEIGHT,
       display: 'flex'
     },
-    tab: _defineProperty({
+    tab: (_tab = {
       flex: '1 0 80px',
       display: 'inline-flex',
       alignItems: 'center',
@@ -74,19 +76,19 @@ var useStyles = createUseStyles(function (_ref) {
         }
 
         return TAB_MAX_WIDTH;
-      },
+      }
+    }, _defineProperty(_tab, mq.supportsHover, {
       '&:hover': {
         color: colors.textPrimary
-      },
-      fallbacks: {
-        maxWidth: TAB_MAX_WIDTH // max() is not supported by all browsers
-
       }
-    }, mq.desktopOrBigger, {
+    }), _defineProperty(_tab, "fallbacks", {
+      maxWidth: TAB_MAX_WIDTH // max() is not supported by all browsers
+
+    }), _defineProperty(_tab, mq.desktopOrBigger, {
       flex: '0 1 208px',
       padding: "16px 32px",
       maxWidth: TAB_MAX_WIDTH
-    }),
+    }), _tab),
     tabWithIcon: _defineProperty({
       flexBasis: 112
     }, mq.desktopOrBigger, {

package/dist-es/text-field-base.js

@@ -79,7 +79,7 @@ var commonInputStyles = function commonInputStyles(theme) {
       }
     },
     '&:disabled': {
-      color: theme.colors.border
+      color: theme.colors.textDisabled
     },
     boxShadow: 'none' // reset FF red shadow styles for required inputs
 
@@ -311,6 +311,25 @@ var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref11, ref
     autoComplete: fixAutoComplete(platformOverrides, autoCompleteProp)
   }, inputProps);
 
+  var labelStyle = {};
+  var isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
+
+  if (startIcon) {
+    labelStyle = isShrinked ? {
+      left: 48,
+      right: 0,
+      width: 'auto'
+    } : {
+      left: 48,
+      right: 12,
+      width: 'auto'
+    };
+  } else if (endIcon && !isShrinked) {
+    labelStyle = {
+      paddingRight: 36
+    };
+  }
+
   return /*#__PURE__*/React.createElement(FieldContainer, {
     helperText: /*#__PURE__*/React.createElement(HelperText, {
       error: error,
@@ -357,10 +376,7 @@ var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref11, ref
   }, error && {
     'aria-invalid': true
   })), label && /*#__PURE__*/React.createElement(Label, {
-    style: startIcon ? {
-      marginLeft: 48,
-      left: 0
-    } : {},
+    style: labelStyle,
     error: error,
     forId: id,
     inputState: inputState,

package/dist-es/text-link.js

@@ -2,31 +2,32 @@ var _excluded = ["children", "className", "small"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 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 {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+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; }
+
 import * as React from 'react';
 import { createUseStyles } from './jss';
 import Touchable from './touchable';
 import classnames from 'classnames';
+import { useIsInverseVariant } from './theme-variant-context';
 var useStyles = 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
@@ -35,6 +36,8 @@ var useStyles = 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,
@@ -42,8 +45,9 @@ var TextLink = function TextLink(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   var classes = useStyles();
+  var isInverse = useIsInverseVariant();
   return /*#__PURE__*/React.createElement(Touchable, _extends({}, props, {
-    className: classnames(classes.textLink, className, _defineProperty({}, classes.small, small))
+    className: classnames(classes.textLink, className, (_classnames = {}, _defineProperty(_classnames, classes.small, small), _defineProperty(_classnames, classes.inverse, isInverse), _classnames))
   }), children);
 };
 

package/dist-es/text.js

@@ -15,7 +15,7 @@ var useStyles = 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-es/theme-context-provider.js

@@ -32,6 +32,7 @@ import ThemeContext from './theme-context';
 import { useIsomorphicLayoutEffect } from './hooks';
 import TabFocus from './tab-focus';
 import { PortalNodesProvider } from './portal';
+import ModalContextProvider from './modal-context-provider';
 var darkModeMedia = '(prefers-color-scheme: dark)';
 export var useIsOsDarkModeEnabled = function useIsOsDarkModeEnabled() {
   var _React$useState = React.useState(false),
@@ -95,7 +96,7 @@ var ThemeContextProvider = function ThemeContextProvider(_ref) {
   }, []);
   var isOsDarkModeEnabled = useIsOsDarkModeEnabled();
   var contextTheme = React.useMemo(function () {
-    var _theme$colorScheme, _theme$Link;
+    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';
@@ -122,7 +123,7 @@ var ThemeContextProvider = function ThemeContextProvider(_ref) {
         }
       }, theme.analytics),
       dimensions: _objectSpread(_objectSpread({}, dimensions), theme.dimensions),
-      mq: theme.mediaQueries ? createMediaQueries(theme.mediaQueries) : createMediaQueries(mediaQueriesConfig),
+      mq: createMediaQueries((_theme$mediaQueries = theme.mediaQueries) !== null && _theme$mediaQueries !== void 0 ? _theme$mediaQueries : mediaQueriesConfig),
       colors: colors,
       Link: (_theme$Link = theme.Link) !== null && _theme$Link !== void 0 ? _theme$Link : AnchorLink,
       isDarkMode: isDarkModeEnabled,
@@ -135,11 +136,11 @@ var ThemeContextProvider = function ThemeContextProvider(_ref) {
     generateId: generateId
   }, /*#__PURE__*/React.createElement(TabFocus, {
     disabled: !theme.enableTabFocus
-  }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+  }, /*#__PURE__*/React.createElement(ModalContextProvider, null, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
     value: contextTheme
   }, /*#__PURE__*/React.createElement(AriaIdGetterContext.Provider, {
     value: getAriaId
-  }, /*#__PURE__*/React.createElement(ScreenSizeContextProvider, null, /*#__PURE__*/React.createElement(DialogRoot, null, children)))))));
+  }, /*#__PURE__*/React.createElement(ScreenSizeContextProvider, null, /*#__PURE__*/React.createElement(DialogRoot, null, children))))))));
 };
 
 export default ThemeContextProvider;

package/dist-es/theme.js

@@ -31,7 +31,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',
@@ -57,7 +60,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',
@@ -83,7 +89,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',
@@ -109,7 +118,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'
 };
 export var getTexts = function getTexts(locale) {
   var lang = locale.toLocaleLowerCase().split(/[-_]/)[0];

package/dist-es/touchable.js

@@ -89,12 +89,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
   }, getPrefixedDataAttributes(props.dataAttributes));
 
@@ -171,10 +171,8 @@ var Touchable = function Touchable(props) {
   };
 
   if (!!props.href || props.to && props.fullPageOnWebView && 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,
@@ -185,10 +183,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,
@@ -199,15 +195,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-es/utils/media-queries.js

@@ -10,6 +10,11 @@ export 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)'
   };
 };