@telefonica/mistica 10.1.0 → 10.4.0

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 = {
@@ -47,7 +47,8 @@ var useStyles = createUseStyles(function (theme) {
     }), _selectContainer),
     select: {
       fontFamily: 'inherit',
-      backgroundColor: theme.colors.backgroundContainer,
+      backgroundColor: 'transparent',
+      // FieldContainer gives the correct background color
       paddingTop: function paddingTop(_ref3) {
         var label = _ref3.label;
         return label ? 24 : 16;
@@ -66,19 +67,23 @@ var useStyles = createUseStyles(function (theme) {
       height: '100%',
       textOverflow: 'ellipsis',
       '&:disabled': {
-        color: theme.colors.border
+        color: theme.colors.textDisabled
       },
       appearance: 'none',
       cursor: function cursor(_ref5) {
         var disabled = _ref5.disabled;
-        return disabled ? 'initial' : 'pointer';
+        return disabled ? 'inherit' : 'pointer';
       }
     },
     arrowDown: {
       position: 'absolute',
       right: 16,
       top: 'calc(50% - 12px)',
-      pointerEvents: 'none'
+      pointerEvents: 'none',
+      opacity: function opacity(_ref6) {
+        var disabled = _ref6.disabled;
+        return disabled ? 0.3 : 1;
+      }
     },
     selectText: {
       position: 'absolute',
@@ -88,13 +93,13 @@ var useStyles = createUseStyles(function (theme) {
       right: 48 + 1,
       // 48 for icon and +1 for border
       overflow: 'hidden',
-      top: function top(_ref6) {
-        var label = _ref6.label;
+      top: function top(_ref7) {
+        var label = _ref7.label;
         return label ? 27 : 17;
       },
       fontSize: 16,
-      color: function color(_ref7) {
-        var disabled = _ref7.disabled;
+      color: function color(_ref8) {
+        var disabled = _ref8.disabled;
         return disabled ? theme.colors.textDisabled : theme.colors.textPrimary;
       },
       maxWidth: '100%',
@@ -106,16 +111,16 @@ var useStyles = createUseStyles(function (theme) {
       padding: 0,
       listStyleType: 'none',
       position: 'absolute',
-      top: function top(_ref8) {
-        var optionsComputedProps = _ref8.optionsComputedProps;
+      top: function top(_ref9) {
+        var optionsComputedProps = _ref9.optionsComputedProps;
         return optionsComputedProps.top;
       },
-      left: function left(_ref9) {
-        var optionsComputedProps = _ref9.optionsComputedProps;
+      left: function left(_ref10) {
+        var optionsComputedProps = _ref10.optionsComputedProps;
         return optionsComputedProps.left;
       },
-      minWidth: function minWidth(_ref10) {
-        var optionsComputedProps = _ref10.optionsComputedProps;
+      minWidth: function minWidth(_ref11) {
+        var optionsComputedProps = _ref11.optionsComputedProps;
         return optionsComputedProps.width;
       },
       borderRadius: 4,
@@ -123,23 +128,23 @@ var useStyles = createUseStyles(function (theme) {
       backgroundColor: theme.colors.backgroundContainer,
       paddingTop: 8,
       paddingBottom: 8,
-      transformOrigin: function transformOrigin(_ref11) {
-        var optionsComputedProps = _ref11.optionsComputedProps;
+      transformOrigin: function transformOrigin(_ref12) {
+        var optionsComputedProps = _ref12.optionsComputedProps;
         return optionsComputedProps.transformOrigin;
       },
       transition: 'opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1) .15s',
-      opacity: function opacity(_ref12) {
-        var animateShowOptions = _ref12.animateShowOptions;
+      opacity: function opacity(_ref13) {
+        var animateShowOptions = _ref13.animateShowOptions;
         return animateShowOptions ? 1 : 0;
       },
-      transform: function transform(_ref13) {
-        var animateShowOptions = _ref13.animateShowOptions;
+      transform: function transform(_ref14) {
+        var animateShowOptions = _ref14.animateShowOptions;
         return animateShowOptions ? 'scale(1)' : 'scale(0)';
       },
-      maxHeight: function maxHeight(_ref14) {
+      maxHeight: function maxHeight(_ref15) {
         var _optionsComputedProps;
 
-        var optionsComputedProps = _ref14.optionsComputedProps;
+        var optionsComputedProps = _ref15.optionsComputedProps;
         return (_optionsComputedProps = optionsComputedProps.maxHeight) !== null && _optionsComputedProps !== void 0 ? _optionsComputedProps : '416px';
       },
       overflowY: 'auto'
@@ -147,40 +152,38 @@ 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)
   };
 });
 
-var Select = function Select(_ref15) {
-  var _ref19, _inputRef$current;
-
-  var id = _ref15.id,
-      label = _ref15.label,
-      helperTextProp = _ref15.helperText,
-      valueProp = _ref15.value,
-      onChangeValueProp = _ref15.onChangeValue,
-      name = _ref15.name,
-      fullWidth = _ref15.fullWidth,
-      options = _ref15.options,
-      optional = _ref15.optional,
-      disabledProp = _ref15.disabled,
-      errorProp = _ref15.error,
-      _onBlur = _ref15.onBlur,
-      _ref15$autoFocus = _ref15.autoFocus,
-      autoFocus = _ref15$autoFocus === void 0 ? false : _ref15$autoFocus,
-      native = _ref15.native;
+var Select = function Select(_ref16) {
+  var _ref20, _inputRef$current;
+
+  var id = _ref16.id,
+      label = _ref16.label,
+      helperTextProp = _ref16.helperText,
+      valueProp = _ref16.value,
+      onChangeValueProp = _ref16.onChangeValue,
+      name = _ref16.name,
+      fullWidth = _ref16.fullWidth,
+      options = _ref16.options,
+      optional = _ref16.optional,
+      disabledProp = _ref16.disabled,
+      errorProp = _ref16.error,
+      _onBlur = _ref16.onBlur,
+      _ref16$autoFocus = _ref16.autoFocus,
+      autoFocus = _ref16$autoFocus === void 0 ? false : _ref16$autoFocus,
+      native = _ref16.native;
   var inputRef = React.useRef(null);
   var focusableRef = React.useRef(null);
   var fieldRef = React.useRef(null);
@@ -383,8 +386,8 @@ var Select = function Select(_ref15) {
         var _options$value, _options;
 
         cancelEvent(e);
-        var newTentativeValueState = (_options$value = (_options = options[options.findIndex(function (_ref16) {
-          var value = _ref16.value;
+        var newTentativeValueState = (_options$value = (_options = options[options.findIndex(function (_ref17) {
+          var value = _ref17.value;
           return value === tentativeValueState;
         }) + operand]) === null || _options === void 0 ? void 0 : _options.value) !== null && _options$value !== void 0 ? _options$value : tentativeValueState;
         setTentativeValueState(newTentativeValueState);
@@ -405,8 +408,8 @@ var Select = function Select(_ref15) {
         if (e.keyCode === ENTER || e.keyCode === SPACE) {
           cancelEvent(e);
 
-          if (options.findIndex(function (_ref17) {
-            var value = _ref17.value;
+          if (options.findIndex(function (_ref18) {
+            var value = _ref18.value;
             return value === tentativeValueState;
           }) !== -1 && tentativeValueState !== valueState) {
             setValue(tentativeValueState);
@@ -444,8 +447,8 @@ var Select = function Select(_ref15) {
   var getOptionText = function getOptionText(val) {
     var _options$find;
 
-    return val ? (_options$find = options.find(function (_ref18) {
-      var value = _ref18.value;
+    return val ? (_options$find = options.find(function (_ref19) {
+      var value = _ref19.value;
       return value === val;
     })) === null || _options$find === void 0 ? void 0 : _options$find.text : '';
   };
@@ -470,6 +473,7 @@ var Select = function Select(_ref15) {
     }
   };
   return shouldUseNative ? /*#__PURE__*/React.createElement(FieldContainer, {
+    disabled: disabled,
     helperText: /*#__PURE__*/React.createElement(HelperText, {
       error: error,
       leftText: helperText
@@ -479,7 +483,7 @@ var Select = function Select(_ref15) {
   }, label && /*#__PURE__*/React.createElement(Label, {
     error: error,
     forId: inputId,
-    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',
+    inputState: isFocused ? 'focused' : ((_ref20 = value !== null && value !== void 0 ? value : valueState) !== null && _ref20 !== void 0 ? _ref20 : (_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", {
@@ -512,8 +516,8 @@ var Select = function Select(_ref15) {
       // Without this fix, the label is invisible when disabled
       opacity: 1
     }
-  }, options.every(function (_ref20) {
-    var value = _ref20.value;
+  }, options.every(function (_ref21) {
+    var value = _ref21.value;
     return !!value;
   }) &&
   /*#__PURE__*/
@@ -524,9 +528,9 @@ var Select = function Select(_ref15) {
     style: {
       display: 'none'
     }
-  }), options.map(function (_ref21) {
-    var val = _ref21.value,
-        text = _ref21.text;
+  }), options.map(function (_ref22) {
+    var val = _ref22.value,
+        text = _ref22.text;
     return /*#__PURE__*/React.createElement("option", {
       key: val,
       value: val
@@ -570,9 +574,9 @@ var Select = function Select(_ref15) {
     className: classes.optionsContainer,
     role: "listbox",
     ref: optionsMenuRef
-  }, options.map(function (_ref22) {
-    var val = _ref22.value,
-        text = _ref22.text;
+  }, options.map(function (_ref23) {
+    var val = _ref23.value,
+        text = _ref23.text;
     return /*#__PURE__*/React.createElement("li", {
       role: "option",
       "aria-selected": val === (valueState !== null && valueState !== void 0 ? valueState : 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,8 @@ var commonInputStyles = function commonInputStyles(theme) {
       }
     },
     '&:disabled': {
-      color: theme.colors.border
+      color: theme.colors.textDisabled,
+      cursor: 'not-allowed'
     },
     boxShadow: 'none' // reset FF red shadow styles for required inputs
 
@@ -177,7 +178,11 @@ var useStyles = createUseStyles(function (theme) {
       paddingLeft: 8,
       paddingRight: 16,
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      opacity: function opacity(_ref8) {
+        var disabled = _ref8.disabled;
+        return disabled ? 0.3 : 1;
+      }
     },
     startIcon: {
       pointerEvents: 'none',
@@ -187,24 +192,31 @@ var useStyles = createUseStyles(function (theme) {
       display: 'flex',
       alignItems: 'center',
       height: '100%',
-      position: 'absolute'
+      position: 'absolute',
+      opacity: function opacity(_ref9) {
+        var disabled = _ref9.disabled;
+        return disabled ? 0.3 : 1;
+      }
     },
     prefix: {
-      paddingTop: function paddingTop(_ref8) {
-        var hasLabel = _ref8.hasLabel;
+      paddingTop: function paddingTop(_ref10) {
+        var hasLabel = _ref10.hasLabel;
         return hasLabel ? 25 : 16;
       },
-      paddingBottom: function paddingBottom(_ref9) {
-        var hasLabel = _ref9.hasLabel;
+      paddingBottom: function paddingBottom(_ref11) {
+        var hasLabel = _ref11.hasLabel;
         return hasLabel ? 8 : 16;
       },
       paddingLeft: 12,
       paddingRight: 16,
       display: 'flex',
       alignItems: 'center',
-      color: theme.colors.textSecondary,
-      opacity: function opacity(_ref10) {
-        var inputState = _ref10.inputState;
+      color: function color(_ref12) {
+        var disabled = _ref12.disabled;
+        return disabled ? theme.colors.textDisabled : theme.colors.textSecondary;
+      },
+      opacity: function opacity(_ref13) {
+        var inputState = _ref13.inputState;
         return inputState === 'default' ? 0 : 1;
       },
       transition: 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms'
@@ -216,33 +228,33 @@ var fixAutoComplete = function fixAutoComplete(platformOverrides, autoComplete)
   return autoComplete === 'off' && isChrome(platformOverrides) ? 'nope' : autoComplete;
 };
 
-var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref11, ref) {
+var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
   var _defaultValue$length;
 
-  var error = _ref11.error,
-      helperText = _ref11.helperText,
-      label = _ref11.label,
-      inputProps = _ref11.inputProps,
-      inputRef = _ref11.inputRef,
-      defaultValue = _ref11.defaultValue,
-      value = _ref11.value,
-      _onFocus = _ref11.onFocus,
-      _onBlur = _ref11.onBlur,
-      inputComponent = _ref11.inputComponent,
-      prefix = _ref11.prefix,
-      startIcon = _ref11.startIcon,
-      endIcon = _ref11.endIcon,
-      endIconOverlay = _ref11.endIconOverlay,
-      shrinkLabelProp = _ref11.shrinkLabel,
-      _ref11$multiline = _ref11.multiline,
-      multiline = _ref11$multiline === void 0 ? false : _ref11$multiline,
-      focus = _ref11.focus,
-      fieldRef = _ref11.fieldRef,
-      maxLength = _ref11.maxLength,
-      idProp = _ref11.id,
-      autoCompleteProp = _ref11.autoComplete,
-      fullWidth = _ref11.fullWidth,
-      rest = _objectWithoutProperties(_ref11, _excluded);
+  var error = _ref14.error,
+      helperText = _ref14.helperText,
+      label = _ref14.label,
+      inputProps = _ref14.inputProps,
+      inputRef = _ref14.inputRef,
+      defaultValue = _ref14.defaultValue,
+      value = _ref14.value,
+      _onFocus = _ref14.onFocus,
+      _onBlur = _ref14.onBlur,
+      inputComponent = _ref14.inputComponent,
+      prefix = _ref14.prefix,
+      startIcon = _ref14.startIcon,
+      endIcon = _ref14.endIcon,
+      endIconOverlay = _ref14.endIconOverlay,
+      shrinkLabelProp = _ref14.shrinkLabel,
+      _ref14$multiline = _ref14.multiline,
+      multiline = _ref14$multiline === void 0 ? false : _ref14$multiline,
+      focus = _ref14.focus,
+      fieldRef = _ref14.fieldRef,
+      maxLength = _ref14.maxLength,
+      idProp = _ref14.id,
+      autoCompleteProp = _ref14.autoComplete,
+      fullWidth = _ref14.fullWidth,
+      rest = _objectWithoutProperties(_ref14, _excluded);
 
   var id = useAriaId(idProp);
 
@@ -272,7 +284,8 @@ var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref11, ref
     hasLabel: hasLabel,
     prefix: prefix,
     multiline: multiline,
-    type: rest.type
+    type: rest.type,
+    disabled: rest.disabled
   });
   React.useEffect(function () {
     if (inputState !== 'focused' && value !== null && value !== void 0 && value.length) {
@@ -331,6 +344,7 @@ var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref11, ref
   }
 
   return /*#__PURE__*/React.createElement(FieldContainer, {
+    disabled: rest.disabled,
     helperText: /*#__PURE__*/React.createElement(HelperText, {
       error: error,
       leftText: helperText,
@@ -423,10 +437,10 @@ var Autosuggest = /*#__PURE__*/React.lazy(function () {
   /* webpackChunkName: "react-autosuggest" */
   'react-autosuggest');
 });
-var TextFieldBase = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
-  var getSuggestions = _ref12.getSuggestions,
-      idProp = _ref12.id,
-      props = _objectWithoutProperties(_ref12, _excluded2);
+var TextFieldBase = /*#__PURE__*/React.forwardRef(function (_ref15, ref) {
+  var getSuggestions = _ref15.getSuggestions,
+      idProp = _ref15.id,
+      props = _objectWithoutProperties(_ref15, _excluded2);
 
   var _React$useState5 = React.useState([]),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
@@ -463,10 +477,10 @@ var TextFieldBase = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
       id: id,
       autoComplete: fixAutoComplete(platformOverrides, 'off'),
       // @ts-expect-error Autosuggest expects slightly different types
-      onChange: function onChange(e, _ref13) {
+      onChange: function onChange(e, _ref16) {
         var _props$onChange2;
 
-        var newValue = _ref13.newValue;
+        var newValue = _ref16.newValue;
         // hack to mutate event value
         e.target = _objectSpread(_objectSpread({}, e.target), {}, {
           value: newValue
@@ -483,8 +497,8 @@ var TextFieldBase = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
       }));
     },
     suggestions: suggestions,
-    onSuggestionsFetchRequested: function onSuggestionsFetchRequested(_ref14) {
-      var value = _ref14.value;
+    onSuggestionsFetchRequested: function onSuggestionsFetchRequested(_ref17) {
+      var value = _ref17.value;
       return setSuggestions(getSuggestions(value));
     },
     onSuggestionsClearRequested: function onSuggestionsClearRequested() {
@@ -493,8 +507,8 @@ var TextFieldBase = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
     getSuggestionValue: function getSuggestionValue(suggestion) {
       return suggestion;
     },
-    renderSuggestion: function renderSuggestion(suggestion, _ref15) {
-      var isHighlighted = _ref15.isHighlighted;
+    renderSuggestion: function renderSuggestion(suggestion, _ref18) {
+      var isHighlighted = _ref18.isHighlighted;
       return /*#__PURE__*/React.createElement("div", {
         role: "menuitem",
         className: classNames(classes.menuItem, _defineProperty({}, classes.menuItemSelected, isHighlighted))

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

@@ -213,20 +213,29 @@ var useFieldContainerStyles = createUseStyles(function (theme) {
       display: 'flex',
       position: 'relative',
       lineHeight: '16px',
-      backgroundColor: theme.colors.backgroundContainer
+      backgroundColor: function backgroundColor(_ref10) {
+        var disabled = _ref10.disabled;
+        return disabled ? theme.colors.backgroundAlternative : theme.colors.backgroundContainer;
+      },
+      cursor: function cursor(_ref11) {
+        var disabled = _ref11.disabled;
+        return disabled ? 'not-allowed' : 'initial';
+      }
     }
   };
 });
-export var FieldContainer = function FieldContainer(_ref10) {
-  var multiline = _ref10.multiline,
-      children = _ref10.children,
-      helperText = _ref10.helperText,
-      className = _ref10.className,
-      fieldRef = _ref10.fieldRef,
-      fullWidth = _ref10.fullWidth;
+export var FieldContainer = function FieldContainer(_ref12) {
+  var multiline = _ref12.multiline,
+      disabled = _ref12.disabled,
+      children = _ref12.children,
+      helperText = _ref12.helperText,
+      className = _ref12.className,
+      fieldRef = _ref12.fieldRef,
+      fullWidth = _ref12.fullWidth;
   var classes = useFieldContainerStyles({
     multiline: multiline,
-    fullWidth: fullWidth
+    fullWidth: fullWidth,
+    disabled: disabled
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classes.fieldContainer

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,