@telefonica/mistica 10.1.0 → 10.2.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [10.2.0](https://github.com/Telefonica/mistica-web/compare/v10.1.0...v10.2.0) (2021-09-21)
+
+
+### Bug Fixes
+
+* **form fields:** change disabled color ([#334](https://github.com/Telefonica/mistica-web/issues/334)) ([fdb9f89](https://github.com/Telefonica/mistica-web/commit/fdb9f890677d4fb5e5d6d1a6980efe6287e4d533))
+* **PasswordField:** keep caret position when switching visibility ([#339](https://github.com/Telefonica/mistica-web/issues/339)) ([6d4b67b](https://github.com/Telefonica/mistica-web/commit/6d4b67b3bbfa935936fb456fa97d760af4522b0c))
+* **snippets:** wrong icon prop in Callout ([#337](https://github.com/Telefonica/mistica-web/issues/337)) ([a974a12](https://github.com/Telefonica/mistica-web/commit/a974a128107f7ce46ab9379ebe7155da160f0efc))
+
+
+### Features
+
+* **mq.suportsHover:** include mq for devices that support hover ([#341](https://github.com/Telefonica/mistica-web/issues/341)) ([b6b6389](https://github.com/Telefonica/mistica-web/commit/b6b638965b2253bd813ff42af4ef596949c59120))
+
 # [10.1.0](https://github.com/Telefonica/mistica-web/compare/v10.0.1...v10.1.0) (2021-09-15)
 
 

package/dist/icon-button.js

@@ -11,8 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _touchable = _interopRequireDefault(require("./touchable"));
 
-var _dom = require("./utils/dom");
-
 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); }
@@ -133,14 +131,14 @@ var IconButton = function IconButton(props) {
       iconSize = props.iconSize,
       _props$size = props.size,
       size = _props$size === void 0 ? ICON_SIZE_1 : _props$size;
-
-  var commonProps = _objectSpread({
+  var commonProps = {
     className: props.className || '',
     disabled: props.disabled,
     style: _objectSpread(_objectSpread({}, getButtonStyle(icon, size, backgroundColor, iconSize, props.disabled)), props.style),
     trackingEvent: props.trackingEvent,
-    'aria-live': props['aria-live']
-  }, (0, _dom.getPrefixedDataAttributes)(props.dataAttributes));
+    'aria-live': props['aria-live'],
+    dataAttributes: props.dataAttributes
+  };
 
   if (props.href) {
     return /*#__PURE__*/React.createElement(_touchable.default, _extends({}, commonProps, {

package/dist/list.js

@@ -149,22 +149,17 @@ function _defineProperty(obj, key, value) {
 
 
 var useStyles = (0, _jss.createUseStyles)(function (_ref) {
-  var colors = _ref.colors;
+  var colors = _ref.colors,
+      mq = _ref.mq;
   return {
-    hover: {
-      // 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
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover': {
-          background: function background(_ref2) {
-            var isInverse = _ref2.isInverse;
-            return isInverse ? 'initial' : colors.backgroundAlternative;
-          }
+    hover: _defineProperty({}, mq.supportsHover, {
+      '&:hover': {
+        background: function background(_ref2) {
+          var isInverse = _ref2.isInverse;
+          return isInverse ? 'initial' : colors.backgroundAlternative;
         }
       }
-    },
+    }),
     rowContent: {
       width: '100%',
       cursor: 'pointer'
@@ -526,7 +521,7 @@ var RowContent = function RowContent(props) {
 
   return /*#__PURE__*/React.createElement(_box.default, {
     paddingX: 16,
-    className: (0, _classnames.default)((0, _classnames.default)(classes.rowContent, classes.hover), classes.hoverDisabled),
+    className: (0, _classnames.default)(classes.rowContent, classes.hover, classes.hoverDisabled),
     role: role
   }, props.right ? renderContent({
     type: 'custom',

package/dist/navigation-bar.js

@@ -432,26 +432,21 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       height: MOBILE_NAVBAR_HEIGHT,
       padding: '8px 0'
     }),
-    section: {
+    section: _defineProperty({
       height: DESKTOP_NAVBAR_HEIGHT,
       display: 'flex',
       alignItems: 'center',
       padding: '0 8px',
       borderBottom: "2px solid transparent",
-      transition: 'border-color 300ms ease-in-out',
-      // 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
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover span': {
-          color: function color(_ref11) {
-            var isInverse = _ref11.isInverse;
-            return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
-          }
+      transition: 'border-color 300ms ease-in-out'
+    }, theme.mq.supportsHover, {
+      '&:hover span': {
+        color: function color(_ref11) {
+          var isInverse = _ref11.isInverse;
+          return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
         }
       }
-    },
+    }),
     selectedSection: {
       borderColor: function borderColor(_ref12) {
         var isInverse = _ref12.isInverse;
@@ -490,24 +485,19 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
     burgerMenuExitActive: {
       transform: 'translate(-100vw)'
     },
-    iconButton: {
+    iconButton: _defineProperty({
       color: function color(_ref14) {
         var isInverse = _ref14.isInverse;
         return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
-      },
-      // 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
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover': {
-          color: function color(_ref15) {
-            var isInverse = _ref15.isInverse;
-            return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
-          }
+      }
+    }, theme.mq.supportsHover, {
+      '&:hover': {
+        color: function color(_ref15) {
+          var isInverse = _ref15.isInverse;
+          return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
         }
       }
-    }
+    })
   };
 });
 
@@ -753,33 +743,28 @@ var NavigationBarActionGroup = function NavigationBarActionGroup(_ref20) {
 exports.NavigationBarActionGroup = NavigationBarActionGroup;
 var useNavigationBarActionStyles = (0, _jss.createUseStyles)(function (theme) {
   return {
-    touchable: {
+    touchable: _defineProperty({
       lineHeight: 0,
       '& svg': {
         color: function color(_ref21) {
           var isInverse = _ref21.isInverse;
           return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
         }
+      }
+    }, theme.mq.supportsHover, {
+      '&:hover span': {
+        color: function color(_ref22) {
+          var isInverse = _ref22.isInverse;
+          return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
+        }
       },
-      // 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
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover span': {
-          color: function color(_ref22) {
-            var isInverse = _ref22.isInverse;
-            return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
-          }
-        },
-        '&:hover svg': {
-          color: function color(_ref23) {
-            var isInverse = _ref23.isInverse;
-            return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
-          }
+      '&:hover svg': {
+        color: function color(_ref23) {
+          var isInverse = _ref23.isInverse;
+          return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
         }
       }
-    }
+    })
   };
 });
 

package/dist/password-field.js

@@ -161,9 +161,9 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var usePasswordAdornmentStyles = (0, _jss.createUseStyles)(function () {
+var usePasswordAdornmentStyles = (0, _jss.createUseStyles)(function (theme) {
   return {
-    shadow: _defineProperty({}, '@media (hover: hover)', {
+    shadow: _defineProperty({}, theme.mq.supportsHover, {
       '&:hover': {
         backgroundColor: 'rgba(0, 0, 0, 0.08)'
       }
@@ -220,6 +220,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) {
@@ -230,16 +232,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 = (0, _formContext.useFieldProps)({
     name: name,
     value: value,

package/dist/select.js

@@ -132,7 +132,7 @@ function _defineProperty(obj, key, value) {
 }
 
 var useStyles = (0, _jss.createUseStyles)(function (theme) {
-  var _selectContainer;
+  var _selectContainer, _menuItem;
 
   return {
     selectContainer: (_selectContainer = {
@@ -171,7 +171,7 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       height: '100%',
       textOverflow: 'ellipsis',
       '&:disabled': {
-        color: theme.colors.border
+        color: theme.colors.textDisabled
       },
       appearance: 'none',
       cursor: function cursor(_ref5) {
@@ -252,19 +252,17 @@ var useStyles = (0, _jss.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)
   };
 });
 
@@ -335,7 +333,8 @@ var Select = function Select(_ref15) {
       register = _useForm.register;
 
   var _useTheme = (0, _hooks.useTheme)(),
-      platformOverrides = _useTheme.platformOverrides;
+      platformOverrides = _useTheme.platformOverrides,
+      colors = _useTheme.colors;
 
   var shouldUseNative = native || process.env.NODE_ENV === 'test' || (0, _platform.isAndroid)(platformOverrides) || (0, _platform.isIos)(platformOverrides);
   var disabled = disabledProp || formStatus === 'sending';
@@ -574,6 +573,9 @@ var Select = function Select(_ref15) {
       }
     }
   };
+  var arrowIcon = /*#__PURE__*/React.createElement(_iconArrowDown.default, {
+    color: disabledProp ? colors.neutralLow : undefined
+  });
   return shouldUseNative ? /*#__PURE__*/React.createElement(_textFieldComponents.FieldContainer, {
     helperText: /*#__PURE__*/React.createElement(_textFieldComponents.HelperText, {
       error: error,
@@ -639,7 +641,7 @@ var Select = function Select(_ref15) {
   })), /*#__PURE__*/React.createElement("div", {
     className: classes.arrowDown,
     "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(_iconArrowDown.default, 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",
@@ -649,7 +651,7 @@ var Select = function Select(_ref15) {
       visibility: 'hidden'
     },
     fullWidth: fullWidth,
-    endIcon: /*#__PURE__*/React.createElement(_iconArrowDown.default, null),
+    endIcon: arrowIcon,
     focus: isFocused,
     label: label,
     value: value,

package/dist/skins/movistar.js

@@ -138,7 +138,7 @@ 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,

package/dist/skins/o2-classic.js

@@ -144,7 +144,7 @@ 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/skins/o2.js

@@ -144,7 +144,7 @@ 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/skins/telefonica.js

@@ -138,7 +138,7 @@ 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/skins/vivo.js

@@ -132,7 +132,7 @@ 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/tabs.js

@@ -111,6 +111,8 @@ var TAB_MAX_WIDTH = 284;
 var TAB_HEIGHT = 56;
 var LINE_ANIMATION_DURATION_MS = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300;
 var useStyles = (0, _jss.createUseStyles)(function (_ref) {
+  var _tab;
+
   var colors = _ref.colors,
       mq = _ref.mq;
   return {
@@ -138,7 +140,7 @@ var useStyles = (0, _jss.createUseStyles)(function (_ref) {
       height: TAB_HEIGHT,
       display: 'flex'
     },
-    tab: _defineProperty({
+    tab: (_tab = {
       flex: '1 0 80px',
       display: 'inline-flex',
       alignItems: 'center',
@@ -160,19 +162,19 @@ var useStyles = (0, _jss.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/text-field-base.js

@@ -244,7 +244,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
 

package/dist/text-link.js

@@ -43,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 {};
 
@@ -94,22 +79,34 @@ 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
     },

package/dist/theme-context-provider.js

@@ -227,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';
@@ -254,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,

package/dist/theme.d.ts

@@ -125,6 +125,7 @@ export declare type Theme = {
         tabletOrBigger: string;
         tabletOrSmaller: string;
         desktopOrBigger: string;
+        supportsHover: string;
     };
     colors: Colors;
     Link: LinkComponent;

package/dist/theme.js.flow

@@ -129,6 +129,7 @@ export type Theme = {
     tabletOrBigger: string,
     tabletOrSmaller: string,
     desktopOrBigger: string,
+    supportsHover: string,
   },
   colors: Colors,
   Link: LinkComponent,

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/icon-button.js

@@ -8,7 +8,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import * as React from 'react';
 import Touchable from './touchable';
-import { getPrefixedDataAttributes } from './utils/dom';
 var ICON_SIZE_1 = 24;
 
 var getButtonStyle = function getButtonStyle(backgroundUrl, size, backgroundColor, iconSize, disabled) {
@@ -51,14 +50,14 @@ var IconButton = function IconButton(props) {
       iconSize = props.iconSize,
       _props$size = props.size,
       size = _props$size === void 0 ? ICON_SIZE_1 : _props$size;
-
-  var commonProps = _objectSpread({
+  var commonProps = {
     className: props.className || '',
     disabled: props.disabled,
     style: _objectSpread(_objectSpread({}, getButtonStyle(icon, size, backgroundColor, iconSize, props.disabled)), props.style),
     trackingEvent: props.trackingEvent,
-    'aria-live': props['aria-live']
-  }, getPrefixedDataAttributes(props.dataAttributes));
+    'aria-live': props['aria-live'],
+    dataAttributes: props.dataAttributes
+  };
 
   if (props.href) {
     return /*#__PURE__*/React.createElement(Touchable, _extends({}, commonProps, {

package/dist-es/list.js

@@ -38,22 +38,17 @@ import { Boxed } from './boxed';
 import Divider from './divider';
 import { getPrefixedDataAttributes } from './utils/dom';
 var useStyles = createUseStyles(function (_ref) {
-  var colors = _ref.colors;
+  var colors = _ref.colors,
+      mq = _ref.mq;
   return {
-    hover: {
-      // 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
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover': {
-          background: function background(_ref2) {
-            var isInverse = _ref2.isInverse;
-            return isInverse ? 'initial' : colors.backgroundAlternative;
-          }
+    hover: _defineProperty({}, mq.supportsHover, {
+      '&:hover': {
+        background: function background(_ref2) {
+          var isInverse = _ref2.isInverse;
+          return isInverse ? 'initial' : colors.backgroundAlternative;
         }
       }
-    },
+    }),
     rowContent: {
       width: '100%',
       cursor: 'pointer'
@@ -415,7 +410,7 @@ var RowContent = function RowContent(props) {
 
   return /*#__PURE__*/React.createElement(Box, {
     paddingX: 16,
-    className: classNames(classNames(classes.rowContent, classes.hover), classes.hoverDisabled),
+    className: classNames(classes.rowContent, classes.hover, classes.hoverDisabled),
     role: role
   }, props.right ? renderContent({
     type: 'custom',

package/dist-es/navigation-bar.js

@@ -285,26 +285,21 @@ var useStyles = createUseStyles(function (theme) {
       height: MOBILE_NAVBAR_HEIGHT,
       padding: '8px 0'
     }),
-    section: {
+    section: _defineProperty({
       height: DESKTOP_NAVBAR_HEIGHT,
       display: 'flex',
       alignItems: 'center',
       padding: '0 8px',
       borderBottom: "2px solid transparent",
-      transition: 'border-color 300ms ease-in-out',
-      // 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
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover span': {
-          color: function color(_ref11) {
-            var isInverse = _ref11.isInverse;
-            return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
-          }
+      transition: 'border-color 300ms ease-in-out'
+    }, theme.mq.supportsHover, {
+      '&:hover span': {
+        color: function color(_ref11) {
+          var isInverse = _ref11.isInverse;
+          return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
         }
       }
-    },
+    }),
     selectedSection: {
       borderColor: function borderColor(_ref12) {
         var isInverse = _ref12.isInverse;
@@ -343,24 +338,19 @@ var useStyles = createUseStyles(function (theme) {
     burgerMenuExitActive: {
       transform: 'translate(-100vw)'
     },
-    iconButton: {
+    iconButton: _defineProperty({
       color: function color(_ref14) {
         var isInverse = _ref14.isInverse;
         return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
-      },
-      // 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
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover': {
-          color: function color(_ref15) {
-            var isInverse = _ref15.isInverse;
-            return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
-          }
+      }
+    }, theme.mq.supportsHover, {
+      '&:hover': {
+        color: function color(_ref15) {
+          var isInverse = _ref15.isInverse;
+          return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
         }
       }
-    }
+    })
   };
 });
 export var MainNavigationBar = function MainNavigationBar(_ref16) {
@@ -594,33 +584,28 @@ export var NavigationBarActionGroup = function NavigationBarActionGroup(_ref20)
 };
 var useNavigationBarActionStyles = createUseStyles(function (theme) {
   return {
-    touchable: {
+    touchable: _defineProperty({
       lineHeight: 0,
       '& svg': {
         color: function color(_ref21) {
           var isInverse = _ref21.isInverse;
           return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
         }
+      }
+    }, theme.mq.supportsHover, {
+      '&:hover span': {
+        color: function color(_ref22) {
+          var isInverse = _ref22.isInverse;
+          return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
+        }
       },
-      // 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
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover span': {
-          color: function color(_ref22) {
-            var isInverse = _ref22.isInverse;
-            return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
-          }
-        },
-        '&:hover svg': {
-          color: function color(_ref23) {
-            var isInverse = _ref23.isInverse;
-            return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
-          }
+      '&:hover svg': {
+        color: function color(_ref23) {
+          var isInverse = _ref23.isInverse;
+          return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
         }
       }
-    }
+    })
   };
 });
 export var NavigationBarAction = function NavigationBarAction(_ref24) {

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)'
       }
@@ -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/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) {
@@ -147,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)
   };
 });
 
@@ -230,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';
@@ -469,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,
@@ -534,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",
@@ -544,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,

package/dist-es/skins/movistar.js

@@ -127,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,

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
 

package/dist-es/text-link.js

@@ -2,12 +2,12 @@ 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';
@@ -15,20 +15,17 @@ 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
     },

package/dist-es/theme-context-provider.js

@@ -96,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';
@@ -123,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,

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)'
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "10.1.0",
+    "version": "10.2.0",
     "license": "MIT",
     "repository": {
         "type": "git",