@telefonica/mistica 10.14.2 → 10.15.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [10.15.0](https://github.com/Telefonica/mistica-web/compare/v10.14.2...v10.15.0) (2022-01-12)
+
+
+### Features
+
+* **Form fields:** review disabled state ([#386](https://github.com/Telefonica/mistica-web/issues/386)) ([615f90d](https://github.com/Telefonica/mistica-web/commit/615f90de59ec647121f1c8c2cb6c342ace5df396))
+
 ## [10.14.2](https://github.com/Telefonica/mistica-web/compare/v10.14.1...v10.14.2) (2022-01-03)
 
 

package/dist/button.js

@@ -123,7 +123,7 @@ var commonClasses = function commonClasses() {
             border: "".concat(BORDER_PX, "px solid transparent"),
             borderRadius: 4,
             overflow: 'hidden',
-            '&:hover': {
+            '&:hover:not([disabled])': {
                 transition: "background-color ".concat(transitionTiming, ", color ").concat(transitionTiming, ", border-color ").concat(transitionTiming)
             }
         },
@@ -178,6 +178,9 @@ var commonClasses = function commonClasses() {
         }
     };
 };
+var disabledStyle = {
+    opacity: 0.5
+};
 var usePrimaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
     return _objectSpread({
     }, commonClasses(), {
@@ -187,10 +190,7 @@ var usePrimaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
             '&:enabled:active': {
                 backgroundColor: theme.colors.buttonPrimaryBackgroundSelected
             },
-            '&[disabled]:not($isLoading)': {
-                color: theme.colors.textButtonPrimaryDisabled,
-                backgroundColor: theme.colors.buttonPrimaryBackgroundDisabled
-            },
+            '&[disabled]:not($isLoading)': disabledStyle,
             // Next media queries were added in each button style, because a pair of bugs in mobile devices (related to: https://jira.tuenti.io/jira/browse/APPS-1882):
             // - When tapping on a button that takes you to next screen and then go back to the previous one, button still have the focus styles
             // - Same behavior if you do long press on the button
@@ -198,7 +198,7 @@ var usePrimaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
             // - Make sure that in FF hover still has it's proper styles
             // - Media query with "coarse" (mobile), avoids that in devices that have coarse implemented, focus style doesn't get stuck
             // Must be always declared for Firefox
-            '&:hover': {
+            '&:hover:not([disabled])': {
                 backgroundColor: theme.colors.buttonPrimaryBackgroundHover,
                 '@media (pointer: coarse)': {
                     // Revert hover background in touch devices
@@ -213,11 +213,8 @@ var usePrimaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
                 backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse,
                 color: theme.colors.textButtonPrimaryInverseSelected
             },
-            '&[disabled]:not($isLoading)': {
-                backgroundColor: theme.colors.buttonPrimaryBackgroundDisabledInverse,
-                color: theme.colors.textButtonPrimaryInverseDisabled
-            },
-            '&:hover': {
+            '&[disabled]:not($isLoading)': disabledStyle,
+            '&:hover:not([disabled])': {
                 color: theme.colors.textButtonPrimaryInverseSelected,
                 backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse,
                 '@media (pointer: coarse)': {
@@ -248,11 +245,8 @@ var useSecondaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
         }, buttonSecondaryLightStyle(theme), {
             '&:enabled:active': _objectSpread({
             }, buttonSecondaryHoverLightStyle(theme)),
-            '&[disabled]:not($isLoading)': {
-                color: theme.colors.textButtonSecondaryDisabled,
-                borderColor: theme.colors.buttonSecondaryBackgroundDisabled
-            },
-            '&:hover': _objectSpread({
+            '&[disabled]:not($isLoading)': disabledStyle,
+            '&:hover:not([disabled])': _objectSpread({
             }, buttonSecondaryHoverLightStyle(theme), {
                 '@media (pointer: coarse)': _objectSpread({
                 }, buttonSecondaryLightStyle(theme))
@@ -265,11 +259,8 @@ var useSecondaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
                 borderColor: theme.colors.buttonSecondaryBorderSelectedInverse,
                 color: theme.colors.textButtonSecondaryInverseSelected
             },
-            '&[disabled]:not($isLoading)': {
-                color: theme.colors.textButtonSecondaryInverseDisabled,
-                borderColor: theme.colors.buttonSecondaryBorderDisabledInverse
-            },
-            '&:hover': {
+            '&[disabled]:not($isLoading)': disabledStyle,
+            '&:hover:not([disabled])': {
                 borderColor: theme.colors.buttonSecondaryBorderSelectedInverse,
                 color: theme.colors.textButtonSecondaryInverseSelected,
                 '@media (pointer: coarse)': {
@@ -288,10 +279,9 @@ var dangerButtonStyles = function dangerButtonStyles(theme) {
             backgroundColor: theme.colors.buttonDangerBackgroundSelected
         },
         '&[disabled]:not($isLoading)': {
-            color: theme.colors.textButtonPrimaryDisabled,
-            backgroundColor: theme.colors.buttonDangerBackgroundDisabled
+            opacity: 0.5
         },
-        '&:hover': {
+        '&:hover:not([disabled])': {
             backgroundColor: theme.colors.buttonDangerBackgroundHover,
             '@media (pointer: coarse)': {
                 // Revert hover background in touch devices
@@ -461,7 +451,7 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
             '&:enabled:active': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected
             },
-            '&:hover': {
+            '&:hover:not([disabled])': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected,
                 '@media (pointer: coarse)': {
                     backgroundColor: 'initial'
@@ -473,7 +463,7 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
             '&:enabled:active': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
             },
-            '&:hover': {
+            '&:hover:not([disabled])': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse,
                 '@media (pointer: coarse)': {
                     backgroundColor: 'initial'

package/dist/checkbox.js

@@ -130,11 +130,15 @@ var useIconCheckboxStyles = (0, _jss).createUseStyles(function(param) {
         },
         checkChecked: {
             transform: 'scale(1, 1)'
+        },
+        disabled: {
+            opacity: 0.5
         }
     };
 });
+var _obj;
 var IconCheckbox = function IconCheckbox(param) {
-    var isChecked = param.isChecked;
+    var isChecked = param.isChecked, disabled = param.disabled;
     var classes = useIconCheckboxStyles();
     var ref = (0, _hooks).useTheme(), isIos = ref.isIos, colors = ref.colors;
     var icon = isIos ? /*#__PURE__*/ (0, _jsxRuntime).jsx("svg", {
@@ -159,8 +163,8 @@ var IconCheckbox = function IconCheckbox(param) {
         })
     });
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-        className: (0, _classnames).default(classes.box, _defineProperty({
-        }, classes.boxChecked, isChecked)),
+        className: (0, _classnames).default(classes.box, (_obj = {
+        }, _defineProperty(_obj, classes.boxChecked, isChecked), _defineProperty(_obj, classes.disabled, disabled), _obj)),
         children: icon
     }));
 };
@@ -171,8 +175,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
             display: 'inline'
         },
         disabled: {
-            opacity: 0.5,
-            pointerEvents: 'none'
+            opacity: 0.5
         }
     };
 });
@@ -205,6 +208,7 @@ var Checkbox = function Checkbox(props) {
         }
     };
     var iconCheckbox = /*#__PURE__*/ (0, _jsxRuntime).jsx(IconCheckbox, {
+        disabled: disabled,
         isChecked: value !== null && value !== void 0 ? value : checkedState
     });
     return(// eslint-disable-next-line jsx-a11y/interactive-supports-focus
@@ -216,8 +220,7 @@ var Checkbox = function Checkbox(props) {
         onClick: disabled ? undefined : handleChange,
         tabIndex: disabled ? undefined : 0,
         ref: focusableRef,
-        className: (0, _classnames).default(classes.checkboxContainer, _defineProperty({
-        }, classes.disabled, disabled)),
+        className: classes.checkboxContainer,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabel ? undefined : labelId,
         "aria-disabled": disabled
@@ -242,6 +245,7 @@ var Checkbox = function Checkbox(props) {
                     id: labelId,
                     role: hasExternalLabel ? 'presentation' : undefined,
                     children: /*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
+                        className: disabled ? classes.disabled : '',
                         children: props.children
                     })
                 })

package/dist/date-time-picker.js

@@ -218,7 +218,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
             '& .rdtPicker td.rdtDisabled, & .rdtPicker td.rdtDisabled:hover': {
                 background: 'none',
                 color: '#999999',
-                cursor: 'not-allowed'
+                cursor: 'default'
             },
             '& .rdtPicker td span.rdtOld': {
                 color: '#999999'
@@ -226,7 +226,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
             '& .rdtPicker td span.rdtDisabled, & .rdtPicker td span.rdtDisabled:hover': {
                 background: 'none',
                 color: '#999999',
-                cursor: 'not-allowed'
+                cursor: 'default'
             },
             '& .rdtPicker th': {
                 borderBottom: '1px solid #f9f9f9',
@@ -251,7 +251,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
             '& .rdtPicker th.rdtDisabled, & .rdtPicker th.rdtDisabled:hover': {
                 background: 'none',
                 color: '#999999',
-                cursor: 'not-allowed'
+                cursor: 'default'
             },
             '& .rdtPicker thead tr:first-of-type th': {
                 cursor: 'pointer'
@@ -332,11 +332,16 @@ var DateTimePicker = function DateTimePicker(_param) {
         "isValidDate",
         "optional"
     ]);
-    var ref = _slicedToArray(React.useState(false), 2), showPicker = ref[0], setShowPicker = ref[1];
+    var ref = _slicedToArray(React.useState(false), 2), showPicker = ref[0], realSetShowPicker = ref[1];
     var classes = useStyles();
     var ref1 = (0, _hooks).useTheme(), texts = ref1.texts;
     var fieldRef = React.useRef(null);
     var ref2 = (0, _hooks).useElementDimensions(), pickerContainerHeight = ref2.height, pickerContainerRef = ref2.ref;
+    var setShowPicker = function setShowPicker(show) {
+        if (!rest.disabled) {
+            realSetShowPicker(show);
+        }
+    };
     var getPickerContainerStyles = function getPickerContainerStyles() {
         var ref;
         var ref3 = ((ref = fieldRef.current) === null || ref === void 0 ? void 0 : ref.getBoundingClientRect()) || {
@@ -391,6 +396,7 @@ var DateTimePicker = function DateTimePicker(_param) {
             }));
         }
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
+            disabled: rest.disabled,
             "aria-label": "",
             size: 32,
             onPress: function onPress() {

package/dist/list.d.ts

@@ -14,6 +14,7 @@ interface CommonProps {
     role?: string;
     extra?: React.ReactNode;
     dataAttributes?: DataAttributes;
+    disabled?: boolean;
 }
 declare type ControlProps = {
     name?: string;

package/dist/list.js

@@ -16,7 +16,7 @@ var _hooks = require("./hooks");
 var _themeVariantContext = require("./theme-variant-context");
 var _iconChevron = _interopRequireDefault(require("./icons/icon-chevron"));
 var _switchComponent = _interopRequireDefault(require("./switch-component"));
-var _radioButton = _interopRequireDefault(require("./radio-button"));
+var _radioButton = _interopRequireWildcard(require("./radio-button"));
 var _checkbox = _interopRequireDefault(require("./checkbox"));
 var _boxed = require("./boxed");
 var _divider = _interopRequireDefault(require("./divider"));
@@ -113,18 +113,24 @@ function _slicedToArray(arr, i) {
 var useStyles = (0, _jss).createUseStyles(function(param) {
     var colors = param.colors, mq = param.mq;
     return {
+        disabled: {
+            opacity: 0.5
+        },
         hover: _defineProperty({
         }, mq.supportsHover, {
             '&:hover': {
                 background: function background(param) {
-                    var isInverse = param.isInverse;
-                    return isInverse ? 'initial' : colors.backgroundAlternative;
+                    var isInverse = param.isInverse, disabled = param.disabled;
+                    return isInverse || disabled ? 'initial' : colors.backgroundAlternative;
                 }
             }
         }),
         rowContent: {
             width: '100%',
-            cursor: 'pointer'
+            cursor: function cursor(param) {
+                var disabled = param.disabled;
+                return disabled ? 'default' : 'pointer';
+            }
         },
         hoverDisabled: {
             cursor: 'initial',
@@ -195,8 +201,9 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
         }
     };
 });
+var _obj;
 var Content = function Content(param) {
-    var headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, asset = param.asset, _type = param.type, type = _type === void 0 ? 'basic' : _type, badge = param.badge, right = param.right, extra = param.extra, labelId = param.labelId;
+    var headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, asset = param.asset, _type = param.type, type = _type === void 0 ? 'basic' : _type, badge = param.badge, right = param.right, extra = param.extra, labelId = param.labelId, disabled = param.disabled;
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse
@@ -217,7 +224,8 @@ var Content = function Content(param) {
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
             paddingLeft: 16,
             children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                className: (0, _classnames).default(classes.center, classes.badge),
+                className: (0, _classnames).default(classes.center, classes.badge, _defineProperty({
+                }, classes.disabled, disabled)),
                 children: badge === true ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_badge.default, {
                 }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_badge.default, {
                     value: badge
@@ -225,21 +233,49 @@ var Content = function Content(param) {
             })
         }));
     };
+    var renderRight = function renderRight() {
+        switch(type){
+            case 'chevron':
+                return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                    paddingLeft: 16,
+                    className: (0, _classnames).default(classes.center, _defineProperty({
+                    }, classes.disabled, disabled)),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevron.default, {
+                        color: isInverse ? colors.inverse : colors.neutralMedium,
+                        direction: "right"
+                    })
+                }));
+            case 'control':
+                return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: classes.right,
+                    children: right
+                }));
+            case 'custom':
+                return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: (0, _classnames).default(classes.right, _defineProperty({
+                    }, classes.disabled, disabled)),
+                    children: right
+                }));
+            default:
+                return null;
+        }
+    };
     return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_box.default, {
         paddingY: 16,
         className: classes.content,
         children: [
             asset && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                 paddingRight: 16,
-                className: (0, _classnames).default(_defineProperty({
-                }, classes.center, shouldCenter)),
+                className: (0, _classnames).default((_obj = {
+                }, _defineProperty(_obj, classes.center, shouldCenter), _defineProperty(_obj, classes.disabled, disabled), _obj)),
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.asset,
                     children: asset
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                className: classes.rowBody,
+                className: (0, _classnames).default(classes.rowBody, _defineProperty({
+                }, classes.disabled, disabled)),
                 style: {
                     justifyContent: shouldCenter ? 'center' : 'flex-start'
                 },
@@ -284,17 +320,7 @@ var Content = function Content(param) {
                 })
             }),
             renderBadge(),
-            type === 'chevron' ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
-                paddingLeft: 16,
-                className: classes.center,
-                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevron.default, {
-                    color: isInverse ? colors.inverse : colors.neutralMedium,
-                    direction: "right"
-                })
-            }) : right ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                className: classes.right,
-                children: right
-            }) : null
+            renderRight()
         ]
     }));
 };
@@ -324,10 +350,13 @@ var useControlState = function useControlState(param) {
 var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
     var titleId = (0, _hooks).useAriaId();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    var asset = props.asset, headline = props.headline, title = props.title, titleLinesMax = props.titleLinesMax, subtitle = props.subtitle, subtitleLinesMax = props.subtitleLinesMax, description = props.description, descriptionLinesMax = props.descriptionLinesMax, badge = props.badge, role = props.role, extra = props.extra, dataAttributes = props.dataAttributes;
+    var radioContext = (0, _radioButton).useRadioContext();
+    var disabled = props.disabled || props.radioValue !== undefined && radioContext.disabled;
     var classes = useStyles({
-        isInverse: isInverse
+        isInverse: isInverse,
+        disabled: disabled
     });
-    var asset = props.asset, headline = props.headline, title = props.title, titleLinesMax = props.titleLinesMax, subtitle = props.subtitle, subtitleLinesMax = props.subtitleLinesMax, description = props.description, descriptionLinesMax = props.descriptionLinesMax, badge = props.badge, role = props.role, extra = props.extra, dataAttributes = props.dataAttributes;
     var ref1 = _slicedToArray(useControlState(props.switch || props.checkbox || {
     }), 2), isChecked = ref1[0], toggle = ref1[1];
     var renderContent = function renderContent(param) {
@@ -345,7 +374,8 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             type: type,
             right: right,
             extra: extra,
-            labelId: labelId
+            labelId: labelId,
+            disabled: disabled
         });
     };
     var renderTouchableContent = function renderTouchableContent(props) {
@@ -373,6 +403,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             onPress: props.onPress,
             role: role,
             dataAttributes: dataAttributes,
+            disabled: disabled,
             children: renderTouchableContent(props)
         }));
     }
@@ -384,6 +415,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             fullPageOnWebView: props.fullPageOnWebView,
             role: role,
             dataAttributes: dataAttributes,
+            disabled: disabled,
             children: renderTouchableContent(props)
         }));
     }
@@ -395,6 +427,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             newTab: props.newTab,
             role: role,
             dataAttributes: dataAttributes,
+            disabled: disabled,
             children: renderTouchableContent(props)
         }));
     }
@@ -406,19 +439,22 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
             className: classes.dualActionContainer,
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, {
+                    disabled: disabled,
                     onPress: props.onPress,
                     role: role,
                     className: (0, _classnames).default(classes.dualActionLeft, classes.hover),
                     children: renderContent({
-                        type: 'custom',
+                        type: 'basic',
                         labelId: titleId
                     })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, {
+                    disabled: disabled,
                     className: classes.dualActionRight,
                     onPress: toggle,
                     dataAttributes: dataAttributes,
                     children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Control, {
+                        disabled: disabled,
                         name: name,
                         checked: isChecked,
                         "aria-labelledby": titleId,
@@ -431,6 +467,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
         }) : /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
             className: (0, _classnames).default(classes.rowContent, classes.hover),
             children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Control, {
+                disabled: disabled,
                 dataAttributes: dataAttributes,
                 name: name,
                 checked: isChecked,
@@ -441,7 +478,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
                         role: role,
                         children: renderContent({
                             labelId: labelId,
-                            type: 'custom',
+                            type: 'control',
                             right: /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
                                 space: "around",
                                 children: control
@@ -471,7 +508,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
                     /*#__PURE__*/ return (0, _jsxRuntime).jsx(_box.default, {
                         paddingX: 16,
                         children: renderContent({
-                            type: 'custom',
+                            type: 'control',
                             right: /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
                                 space: "around",
                                 children: radio

package/dist/list.js.flow

@@ -15,6 +15,7 @@ declare type CommonProps = {
   role?: string,
   extra?: React.Node,
   dataAttributes?: DataAttributes,
+  disabled?: boolean,
 };
 declare type ControlProps = {
   name?: string,

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = '10.14.2';
+var PACKAGE_VERSION = '10.15.0';
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/radio-button.js

@@ -137,6 +137,7 @@ var useRadioButtonStyles = (0, _jss).createUseStyles(function(param) {
     var colors = param.colors, isIos = param.isIos;
     return {
         outerCircle: {
+            cursor: 'pointer',
             flexShrink: 0,
             width: 20,
             height: 20,
@@ -169,11 +170,11 @@ var useRadioButtonStyles = (0, _jss).createUseStyles(function(param) {
             transform: 'scale(1)'
         },
         radioButton: {
-            cursor: 'default',
-            opacity: function opacity(param) {
-                var disabled = param.disabled;
-                return disabled ? 0.5 : 1;
-            }
+            cursor: 'default'
+        },
+        disabled: {
+            opacity: 0.5,
+            cursor: 'default'
         }
     };
 });
@@ -192,6 +193,7 @@ var useRadioContext = function useRadioContext() {
     return React.useContext(RadioContext);
 };
 exports.useRadioContext = useRadioContext;
+var _obj;
 var RadioButton = function RadioButton(_param) {
     var value = _param.value, id = _param.id, dataAttributes = _param.dataAttributes, rest = _objectWithoutProperties(_param, [
         "value",
@@ -203,7 +205,6 @@ var RadioButton = function RadioButton(_param) {
     var checked = value === selectedValue;
     var tabIndex = focusableValue === value ? 0 : -1;
     var classes = useRadioButtonStyles({
-        disabled: disabled,
         checked: checked
     });
     var ref2 = (0, _hooks).useTheme(), isIos = ref2.isIos;
@@ -230,8 +231,8 @@ var RadioButton = function RadioButton(_param) {
         }
     };
     var radio = /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-        className: (0, _classnames).default(classes.outerCircle, _defineProperty({
-        }, classes.outerCircleChecked, checked)),
+        className: (0, _classnames).default(classes.outerCircle, (_obj = {
+        }, _defineProperty(_obj, classes.outerCircleChecked, checked), _defineProperty(_obj, classes.disabled, disabled), _obj)),
         children: !isIos && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
             className: (0, _classnames).default(classes.innerCircle, _defineProperty({
             }, classes.innerCircleChecked, checked))
@@ -268,7 +269,10 @@ var RadioButton = function RadioButton(_param) {
                 /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
                     regular: true,
                     as: "div",
-                    children: rest.children
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
+                        className: disabled ? classes.disabled : '',
+                        children: rest.children
+                    })
                 })
             ]
         })

package/dist/select.js

@@ -111,10 +111,6 @@ var _obj, _obj1;
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     return {
         selectContainer: (_obj = {
-            cursor: function cursor(param) {
-                var disabled = param.disabled;
-                return disabled ? 'auto' : 'pointer';
-            },
             position: 'relative',
             outline: 0
         }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
@@ -145,24 +141,17 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             width: '100%',
             height: '100%',
             textOverflow: 'ellipsis',
-            '&:disabled': {
-                color: theme.colors.textDisabled
-            },
             appearance: 'none',
             cursor: function cursor(param) {
                 var disabled = param.disabled;
-                return disabled ? 'inherit' : 'pointer';
+                return disabled ? 'default' : 'pointer';
             }
         },
         arrowDown: {
             position: 'absolute',
             right: 16,
             top: 'calc(50% - 10px)',
-            pointerEvents: 'none',
-            opacity: function opacity(param) {
-                var disabled = param.disabled;
-                return disabled ? 0.3 : 1;
-            }
+            pointerEvents: 'none'
         },
         selectText: {
             position: 'absolute',
@@ -175,9 +164,10 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 return label ? 27 : 17;
             },
             fontSize: 16,
-            color: function color(param) {
+            color: theme.colors.textPrimary,
+            opacity: function opacity(param) {
                 var disabled = param.disabled;
-                return disabled ? theme.colors.textDisabled : theme.colors.textPrimary;
+                return disabled ? 0.5 : 1;
             },
             maxWidth: '100%',
             textOverflow: 'ellipsis',
@@ -485,7 +475,6 @@ var Select = function Select(param) {
                 error: error,
                 forId: inputId,
                 inputState: isFocused ? 'focused' : ((ref15 = value !== null && value !== void 0 ? value : valueState) !== null && ref15 !== void 0 ? ref15 : (ref11 = inputRef.current) === null || ref11 === void 0 ? void 0 : ref11.value) ? 'filled' : 'default',
-                disabled: disabled,
                 optional: optional,
                 children: label
             }),