@telefonica/mistica 10.1.0 → 10.4.0

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 = {
@@ -152,7 +152,8 @@ var useStyles = (0, _jss.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;
@@ -171,19 +172,23 @@ 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) {
         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',
@@ -193,13 +198,13 @@ var useStyles = (0, _jss.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%',
@@ -211,16 +216,16 @@ var useStyles = (0, _jss.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,
@@ -228,23 +233,23 @@ var useStyles = (0, _jss.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'
@@ -252,40 +257,38 @@ 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)
   };
 });
 
-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);
@@ -488,8 +491,8 @@ var Select = function Select(_ref15) {
         var _options$value, _options;
 
         (0, _dom.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);
@@ -510,8 +513,8 @@ var Select = function Select(_ref15) {
         if (e.keyCode === _keyCodes.ENTER || e.keyCode === _keyCodes.SPACE) {
           (0, _dom.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);
@@ -549,8 +552,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 : '';
   };
@@ -575,6 +578,7 @@ var Select = function Select(_ref15) {
     }
   };
   return shouldUseNative ? /*#__PURE__*/React.createElement(_textFieldComponents.FieldContainer, {
+    disabled: disabled,
     helperText: /*#__PURE__*/React.createElement(_textFieldComponents.HelperText, {
       error: error,
       leftText: helperText
@@ -584,7 +588,7 @@ var Select = function Select(_ref15) {
   }, label && /*#__PURE__*/React.createElement(_textFieldComponents.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", {
@@ -617,8 +621,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__*/
@@ -629,9 +633,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
@@ -675,9 +679,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/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,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
 
@@ -342,7 +343,11 @@ var useStyles = (0, _jss.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',
@@ -352,24 +357,31 @@ var useStyles = (0, _jss.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'
@@ -381,33 +393,33 @@ var fixAutoComplete = function fixAutoComplete(platformOverrides, autoComplete)
   return autoComplete === 'off' && (0, _platform.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 = (0, _hooks.useAriaId)(idProp);
 
@@ -437,7 +449,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) {
@@ -496,6 +509,7 @@ var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref11, ref
   }
 
   return /*#__PURE__*/React.createElement(_textFieldComponents.FieldContainer, {
+    disabled: rest.disabled,
     helperText: /*#__PURE__*/React.createElement(_textFieldComponents.HelperText, {
       error: error,
       leftText: helperText,
@@ -588,10 +602,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),
@@ -628,10 +642,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; // hack to mutate event value
+        var newValue = _ref16.newValue; // hack to mutate event value
 
         e.target = _objectSpread(_objectSpread({}, e.target), {}, {
           value: newValue
@@ -648,8 +662,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() {
@@ -658,8 +672,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: (0, _classnames.default)(classes.menuItem, _defineProperty({}, classes.menuItemSelected, isHighlighted))

package/dist/text-field-components.d.ts

@@ -21,6 +21,7 @@ declare type HelperTextProps = {
 export declare const HelperText: React.FC<HelperTextProps>;
 declare type FieldContainerProps = {
     multiline?: boolean;
+    disabled?: boolean;
     children: React.ReactNode;
     helperText?: React.ReactNode;
     className?: string;

package/dist/text-field-components.js

@@ -336,21 +336,30 @@ var useFieldContainerStyles = (0, _jss.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';
+      }
     }
   };
 });
 
-var FieldContainer = function FieldContainer(_ref10) {
-  var multiline = _ref10.multiline,
-      children = _ref10.children,
-      helperText = _ref10.helperText,
-      className = _ref10.className,
-      fieldRef = _ref10.fieldRef,
-      fullWidth = _ref10.fullWidth;
+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/text-field-components.js.flow

@@ -22,6 +22,7 @@ declare type HelperTextProps = {
 declare export var HelperText: React.ComponentType<HelperTextProps>;
 declare type FieldContainerProps = {
   multiline?: boolean,
+  disabled?: boolean,
   children: React.Node,
   helperText?: React.Node,
   className?: string,