@atlaskit/radio 5.4.5 → 5.4.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/radio
 
+## 5.4.7
+
+### Patch Changes
+
+- [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
+
+## 5.4.6
+
+### Patch Changes
+
+- [`22d4be4674b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/22d4be4674b) - Fixes issue where disabled radios were using the wrong background and border tokens
+- [`8e6acf8f038`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8e6acf8f038) - Updates tokens used for border and dot, improved tokens appearance when radio is both checked and disabled
+
 ## 5.4.5
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +16,5 @@ Object.defineProperty(exports, "RadioGroup", {
     return _radioGroup.default;
   }
 });
-
 var _radioGroup = _interopRequireDefault(require("./radio-group"));
-
 var _radio = _interopRequireDefault(require("./radio"));

package/dist/cjs/radio-group.js

@@ -1,70 +1,55 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = RadioGroup;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-
 var _radio = _interopRequireDefault(require("./radio"));
-
 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); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var noOptions = [];
-
 function RadioGroup(props) {
   var onChange = props.onChange,
-      _props$options = props.options,
-      options = _props$options === void 0 ? noOptions : _props$options,
-      propValue = props.value,
-      defaultValue = props.defaultValue,
-      isDisabled = props.isDisabled,
-      isRequired = props.isRequired,
-      isInvalid = props.isInvalid,
-      _props$onInvalid = props.onInvalid,
-      onInvalid = _props$onInvalid === void 0 ? _noop.default : _props$onInvalid,
-      name = props.name,
-      analyticsContext = props.analyticsContext,
-      ariaLabelledBy = props['aria-labelledby'];
-
+    _props$options = props.options,
+    options = _props$options === void 0 ? noOptions : _props$options,
+    propValue = props.value,
+    defaultValue = props.defaultValue,
+    isDisabled = props.isDisabled,
+    isRequired = props.isRequired,
+    isInvalid = props.isInvalid,
+    _props$onInvalid = props.onInvalid,
+    onInvalid = _props$onInvalid === void 0 ? _noop.default : _props$onInvalid,
+    name = props.name,
+    analyticsContext = props.analyticsContext,
+    ariaLabelledBy = props['aria-labelledby'];
   var _useState = (0, _react.useState)(propValue !== undefined ? propValue : defaultValue),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      selectedValue = _useState2[0],
-      setSelectedValue = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    selectedValue = _useState2[0],
+    setSelectedValue = _useState2[1];
   var onRadioChange = (0, _react.useCallback)(function (e, analyticsEvent) {
     setSelectedValue(e.currentTarget.value);
-
     if (onChange) {
       onChange(e, analyticsEvent);
     }
-  }, [onChange]); // If propValue is provided than act as a controlled component
-  // If not then act as an uncontrolled component using the value from state
+  }, [onChange]);
 
+  // If propValue is provided than act as a controlled component
+  // If not then act as an uncontrolled component using the value from state
   var value = typeof propValue !== 'undefined' ? propValue : selectedValue;
   return /*#__PURE__*/_react.default.createElement("div", {
     role: "radiogroup",
     "aria-labelledby": ariaLabelledBy
   }, options.map(function (_ref, index) {
     var optionProps = (0, _extends2.default)({}, _ref);
-
     if (typeof isDisabled !== 'undefined') {
       optionProps.isDisabled = isDisabled;
     }
-
     var isChecked = value != null && optionProps.value === value;
     return /*#__PURE__*/_react.default.createElement(_radio.default, (0, _extends2.default)({}, optionProps, {
       name: name || optionProps.name,

package/dist/cjs/radio.js

@@ -1,39 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
-
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "mode", "name", "onChange", "value", "testId", "analyticsContext"];
 var packageName = "@atlaskit/radio";
-var packageVersion = "5.4.5";
+var packageVersion = "5.4.7";
 var fontFamily = (0, _constants.fontFamily)();
 var noop = _noop.default;
 var labelPaddingStyles = (0, _react2.css)({
-  padding: "var(--ds-scale-025, 2px)".concat(" ", "var(--ds-scale-050, 4px)")
+  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
 });
 var labelStyles = (0, _react2.css)({
   display: 'flex',
@@ -55,7 +43,6 @@ var darkLabelStyles = (0, _react2.css)({
 });
 var radioStyles = (0, _react2.css)({
   display: 'flex',
-
   /*
     The circle should be 14px * 14px centred in a 24px * 24px box.
     This is inclusive of a 2px border and inner circle with 2px radius.
@@ -65,20 +52,17 @@ var radioStyles = (0, _react2.css)({
   */
   width: '24px',
   height: '24px',
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
-  margin: "var(--ds-scale-0, 0px)",
+  margin: "var(--ds-space-0, 0px)",
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'center',
   flexShrink: 0,
   backgroundColor: 'var(--radio-background-color)',
-
   /* Border should be 2px, multiply by 24/14 to offset scale */
   border: 'calc(2px * 12 / 7) solid var(--radio-border-color)',
   borderRadius: '50%',
   MozAppearance: 'none',
   outline: 'none',
-
   /*
     Change the variables --radio-background-color, --radio-border-color,
     -radio-dot-color and -radio-dot-opacity according to user interactions.
@@ -88,7 +72,6 @@ var radioStyles = (0, _react2.css)({
   '--radio-border-color': 'var(--local-border)',
   '--radio-dot-color': 'var(--local-dot-checked)',
   '--radio-dot-opacity': 0,
-
   /* 24px * 7 / 12 === 14px height and width */
   transform: 'scale(calc(7 / 12))',
   transition: 'border-color 0.2s ease-in-out, background-color 0.2s ease-in-out',
@@ -141,30 +124,26 @@ var radioStyles = (0, _react2.css)({
     '--radio-background-color': 'var(--local-background-disabled)',
     '--radio-border-color': 'var(--local-border-disabled)',
     '--radio-dot-color': 'var(--local-dot-disabled)'
-  },
-  '&:checked:disabled': {
-    '--radio-border-color': 'transparent' // TODO: Investigate token solution
-
   }
 });
 var RadioWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref) {
   var ariaLabel = props.ariaLabel,
-      _props$isDisabled = props.isDisabled,
-      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-      isRequired = props.isRequired,
-      _props$isInvalid = props.isInvalid,
-      isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
-      _props$isChecked = props.isChecked,
-      isChecked = _props$isChecked === void 0 ? false : _props$isChecked,
-      label = props.label,
-      mode = props.mode,
-      name = props.name,
-      _props$onChange = props.onChange,
-      onChange = _props$onChange === void 0 ? noop : _props$onChange,
-      value = props.value,
-      testId = props.testId,
-      analyticsContext = props.analyticsContext,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+    _props$isDisabled = props.isDisabled,
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    isRequired = props.isRequired,
+    _props$isInvalid = props.isInvalid,
+    isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
+    _props$isChecked = props.isChecked,
+    isChecked = _props$isChecked === void 0 ? false : _props$isChecked,
+    label = props.label,
+    mode = props.mode,
+    name = props.name,
+    _props$onChange = props.onChange,
+    onChange = _props$onChange === void 0 ? noop : _props$onChange,
+    value = props.value,
+    testId = props.testId,
+    analyticsContext = props.analyticsContext,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var onChangeAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)({
     fn: onChange,
     action: 'changed',
@@ -176,11 +155,13 @@ var RadioWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, re
   var radioCustomProperties = (0, _react.useMemo)(function () {
     return (0, _react2.css)((0, _styles.default)(mode));
   }, [mode]);
-  return (// https://product-fabric.atlassian.net/browse/DST-1971
+  return (
+    // https://product-fabric.atlassian.net/browse/DST-1971
     // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/label-has-for
     (0, _react2.jsx)("label", {
       "data-testid": testId && "".concat(testId, "--radio-label"),
-      "data-disabled": isDisabled ? 'true' : undefined // TODO these will no longer be dynamic styles when legacy theming removed
+      "data-disabled": isDisabled ? 'true' : undefined
+      // TODO these will no longer be dynamic styles when legacy theming removed
       // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       ,
       css: [labelStyles, mode === 'light' ? lightLabelStyles : darkLabelStyles]
@@ -193,10 +174,12 @@ var RadioWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, re
       required: isRequired,
       type: "radio",
       value: value,
-      "data-testid": testId && "".concat(testId, "--radio-input") // isInvalid is used in a nonstandard way so cannot
+      "data-testid": testId && "".concat(testId, "--radio-input")
+      // isInvalid is used in a nonstandard way so cannot
       // use :invalid selector
       ,
-      "data-invalid": isInvalid ? 'true' : undefined // TODO radioCustomProperties can be defined at top of file when legacy theming removed
+      "data-invalid": isInvalid ? 'true' : undefined
+      // TODO radioCustomProperties can be defined at top of file when legacy theming removed
       // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       ,
       css: [radioStyles, radioCustomProperties],
@@ -206,6 +189,7 @@ var RadioWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, re
     }, label) : null)
   );
 });
+
 /**
  * __Radio__
  *
@@ -215,7 +199,6 @@ var RadioWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, re
  * - [Code](https://atlassian.design/components/radio/code)
  * - [Usage](https://atlassian.design/components/radio/usage)
  */
-
 var Radio = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref) {
   return (0, _react2.jsx)(_components.default.Consumer, null, function (_ref) {
     var mode = _ref.mode;

package/dist/cjs/styles.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getRadioCustomProperties;
-
 var _colors = require("@atlaskit/theme/colors");
-
 var radioThemeColors = {
   light: {
     background: "var(--ds-background-input, ".concat(_colors.N10, ")"),
@@ -15,13 +13,13 @@ var radioThemeColors = {
     backgroundChecked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
     backgroundCheckedHover: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B300, ")"),
     backgroundCheckedActive: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B50, ")"),
-    backgroundDisabled: "var(--ds-background-input, ".concat(_colors.N20, ")"),
-    dotChecked: "var(--ds-text-inverse, ".concat(_colors.N10, ")"),
-    dotDisabled: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
-    dotActive: "var(--ds-text-inverse, ".concat(_colors.B400, ")"),
+    backgroundDisabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
+    dotChecked: "var(--ds-icon-inverse, ".concat(_colors.N10, ")"),
+    dotDisabled: "var(--ds-icon-disabled, ".concat(_colors.N70, ")"),
+    dotActive: "var(--ds-icon-inverse, ".concat(_colors.B400, ")"),
     border: "var(--ds-border-input, ".concat(_colors.N40, ")"),
     borderHover: "var(--ds-border-input, ".concat(_colors.N40, ")"),
-    borderDisabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
+    borderDisabled: "var(--ds-border-disabled, ".concat(_colors.N20, ")"),
     borderFocus: "var(--ds-border-focused, ".concat(_colors.B100, ")")
   },
   dark: {
@@ -31,17 +29,16 @@ var radioThemeColors = {
     backgroundChecked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
     backgroundCheckedHover: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B75, ")"),
     backgroundCheckedActive: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B200, ")"),
-    backgroundDisabled: "var(--ds-background-input, ".concat(_colors.DN10, ")"),
-    dotChecked: "var(--ds-text-inverse, ".concat(_colors.DN10, ")"),
-    dotDisabled: "var(--ds-text-disabled, ".concat(_colors.DN90, ")"),
-    dotActive: "var(--ds-text-inverse, ".concat(_colors.DN10, ")"),
+    backgroundDisabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
+    dotChecked: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")"),
+    dotDisabled: "var(--ds-icon-disabled, ".concat(_colors.DN90, ")"),
+    dotActive: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")"),
     border: "var(--ds-border-input, ".concat(_colors.DN80, ")"),
     borderHover: "var(--ds-border-input, ".concat(_colors.DN200, ")"),
-    borderDisabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
+    borderDisabled: "var(--ds-border-disabled, ".concat(_colors.DN10, ")"),
     borderFocus: "var(--ds-border-focused, ".concat(_colors.B75, ")")
   }
 };
-
 function getRadioCustomProperties(mode) {
   var radioColors = radioThemeColors[mode];
   return {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/radio",
-	"version": "5.4.5",
+	"version": "5.4.7",
 	"sideEffects": false
 }

package/dist/es2019/radio-group.js

@@ -20,23 +20,23 @@ export default function RadioGroup(props) {
   const [selectedValue, setSelectedValue] = useState(propValue !== undefined ? propValue : defaultValue);
   const onRadioChange = useCallback((e, analyticsEvent) => {
     setSelectedValue(e.currentTarget.value);
-
     if (onChange) {
       onChange(e, analyticsEvent);
     }
-  }, [onChange]); // If propValue is provided than act as a controlled component
-  // If not then act as an uncontrolled component using the value from state
+  }, [onChange]);
 
+  // If propValue is provided than act as a controlled component
+  // If not then act as an uncontrolled component using the value from state
   const value = typeof propValue !== 'undefined' ? propValue : selectedValue;
   return /*#__PURE__*/React.createElement("div", {
     role: "radiogroup",
     "aria-labelledby": ariaLabelledBy
-  }, options.map(({ ...optionProps
+  }, options.map(({
+    ...optionProps
   }, index) => {
     if (typeof isDisabled !== 'undefined') {
       optionProps.isDisabled = isDisabled;
     }
-
     const isChecked = value != null && optionProps.value === value;
     return /*#__PURE__*/React.createElement(Radio, _extends({}, optionProps, {
       name: name || optionProps.name,

package/dist/es2019/radio.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { forwardRef, memo, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -10,11 +9,11 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import getRadioCustomProperties from './styles';
 const packageName = "@atlaskit/radio";
-const packageVersion = "5.4.5";
+const packageVersion = "5.4.7";
 const fontFamily = getFontFamily();
 const noop = __noop;
 const labelPaddingStyles = css({
-  padding: `${"var(--ds-scale-025, 2px)"} ${"var(--ds-scale-050, 4px)"}`
+  padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`
 });
 const labelStyles = css({
   display: 'flex',
@@ -36,7 +35,6 @@ const darkLabelStyles = css({
 });
 const radioStyles = css({
   display: 'flex',
-
   /*
     The circle should be 14px * 14px centred in a 24px * 24px box.
     This is inclusive of a 2px border and inner circle with 2px radius.
@@ -46,20 +44,17 @@ const radioStyles = css({
   */
   width: '24px',
   height: '24px',
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
-  margin: "var(--ds-scale-0, 0px)",
+  margin: "var(--ds-space-0, 0px)",
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'center',
   flexShrink: 0,
   backgroundColor: 'var(--radio-background-color)',
-
   /* Border should be 2px, multiply by 24/14 to offset scale */
   border: 'calc(2px * 12 / 7) solid var(--radio-border-color)',
   borderRadius: '50%',
   MozAppearance: 'none',
   outline: 'none',
-
   /*
     Change the variables --radio-background-color, --radio-border-color,
     -radio-dot-color and -radio-dot-opacity according to user interactions.
@@ -69,7 +64,6 @@ const radioStyles = css({
   '--radio-border-color': 'var(--local-border)',
   '--radio-dot-color': 'var(--local-dot-checked)',
   '--radio-dot-opacity': 0,
-
   /* 24px * 7 / 12 === 14px height and width */
   transform: 'scale(calc(7 / 12))',
   transition: 'border-color 0.2s ease-in-out, background-color 0.2s ease-in-out',
@@ -122,10 +116,6 @@ const radioStyles = css({
     '--radio-background-color': 'var(--local-background-disabled)',
     '--radio-border-color': 'var(--local-border-disabled)',
     '--radio-dot-color': 'var(--local-dot-disabled)'
-  },
-  '&:checked:disabled': {
-    '--radio-border-color': 'transparent' // TODO: Investigate token solution
-
   }
 });
 const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
@@ -154,11 +144,13 @@ const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     packageVersion
   });
   const radioCustomProperties = useMemo(() => css(getRadioCustomProperties(mode)), [mode]);
-  return (// https://product-fabric.atlassian.net/browse/DST-1971
+  return (
+    // https://product-fabric.atlassian.net/browse/DST-1971
     // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/label-has-for
     jsx("label", {
       "data-testid": testId && `${testId}--radio-label`,
-      "data-disabled": isDisabled ? 'true' : undefined // TODO these will no longer be dynamic styles when legacy theming removed
+      "data-disabled": isDisabled ? 'true' : undefined
+      // TODO these will no longer be dynamic styles when legacy theming removed
       // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       ,
       css: [labelStyles, mode === 'light' ? lightLabelStyles : darkLabelStyles]
@@ -171,10 +163,12 @@ const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
       required: isRequired,
       type: "radio",
       value: value,
-      "data-testid": testId && `${testId}--radio-input` // isInvalid is used in a nonstandard way so cannot
+      "data-testid": testId && `${testId}--radio-input`
+      // isInvalid is used in a nonstandard way so cannot
       // use :invalid selector
       ,
-      "data-invalid": isInvalid ? 'true' : undefined // TODO radioCustomProperties can be defined at top of file when legacy theming removed
+      "data-invalid": isInvalid ? 'true' : undefined
+      // TODO radioCustomProperties can be defined at top of file when legacy theming removed
       // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       ,
       css: [radioStyles, radioCustomProperties],
@@ -184,6 +178,7 @@ const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     }, label) : null)
   );
 });
+
 /**
  * __Radio__
  *
@@ -193,7 +188,6 @@ const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
  * - [Code](https://atlassian.design/components/radio/code)
  * - [Usage](https://atlassian.design/components/radio/usage)
  */
-
 const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Radio(props, ref) {
   return jsx(GlobalTheme.Consumer, null, ({
     mode

package/dist/es2019/styles.js

@@ -7,13 +7,13 @@ const radioThemeColors = {
     backgroundChecked: `var(--ds-background-brand-bold, ${B400})`,
     backgroundCheckedHover: `var(--ds-background-brand-bold-hovered, ${B300})`,
     backgroundCheckedActive: `var(--ds-background-brand-bold-pressed, ${B50})`,
-    backgroundDisabled: `var(--ds-background-input, ${N20})`,
-    dotChecked: `var(--ds-text-inverse, ${N10})`,
-    dotDisabled: `var(--ds-text-disabled, ${N70})`,
-    dotActive: `var(--ds-text-inverse, ${B400})`,
+    backgroundDisabled: `var(--ds-background-disabled, ${N20})`,
+    dotChecked: `var(--ds-icon-inverse, ${N10})`,
+    dotDisabled: `var(--ds-icon-disabled, ${N70})`,
+    dotActive: `var(--ds-icon-inverse, ${B400})`,
     border: `var(--ds-border-input, ${N40})`,
     borderHover: `var(--ds-border-input, ${N40})`,
-    borderDisabled: `var(--ds-background-disabled, ${N20})`,
+    borderDisabled: `var(--ds-border-disabled, ${N20})`,
     borderFocus: `var(--ds-border-focused, ${B100})`
   },
   dark: {
@@ -23,13 +23,13 @@ const radioThemeColors = {
     backgroundChecked: `var(--ds-background-brand-bold, ${B400})`,
     backgroundCheckedHover: `var(--ds-background-brand-bold-hovered, ${B75})`,
     backgroundCheckedActive: `var(--ds-background-brand-bold-pressed, ${B200})`,
-    backgroundDisabled: `var(--ds-background-input, ${DN10})`,
-    dotChecked: `var(--ds-text-inverse, ${DN10})`,
-    dotDisabled: `var(--ds-text-disabled, ${DN90})`,
-    dotActive: `var(--ds-text-inverse, ${DN10})`,
+    backgroundDisabled: `var(--ds-background-disabled, ${DN10})`,
+    dotChecked: `var(--ds-icon-inverse, ${DN10})`,
+    dotDisabled: `var(--ds-icon-disabled, ${DN90})`,
+    dotActive: `var(--ds-icon-inverse, ${DN10})`,
     border: `var(--ds-border-input, ${DN80})`,
     borderHover: `var(--ds-border-input, ${DN200})`,
-    borderDisabled: `var(--ds-background-disabled, ${DN10})`,
+    borderDisabled: `var(--ds-border-disabled, ${DN10})`,
     borderFocus: `var(--ds-border-focused, ${B75})`
   }
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/radio",
-	"version": "5.4.5",
+	"version": "5.4.7",
 	"sideEffects": false
 }

package/dist/esm/radio-group.js

@@ -6,44 +6,40 @@ import Radio from './radio';
 var noOptions = [];
 export default function RadioGroup(props) {
   var onChange = props.onChange,
-      _props$options = props.options,
-      options = _props$options === void 0 ? noOptions : _props$options,
-      propValue = props.value,
-      defaultValue = props.defaultValue,
-      isDisabled = props.isDisabled,
-      isRequired = props.isRequired,
-      isInvalid = props.isInvalid,
-      _props$onInvalid = props.onInvalid,
-      onInvalid = _props$onInvalid === void 0 ? noop : _props$onInvalid,
-      name = props.name,
-      analyticsContext = props.analyticsContext,
-      ariaLabelledBy = props['aria-labelledby'];
-
+    _props$options = props.options,
+    options = _props$options === void 0 ? noOptions : _props$options,
+    propValue = props.value,
+    defaultValue = props.defaultValue,
+    isDisabled = props.isDisabled,
+    isRequired = props.isRequired,
+    isInvalid = props.isInvalid,
+    _props$onInvalid = props.onInvalid,
+    onInvalid = _props$onInvalid === void 0 ? noop : _props$onInvalid,
+    name = props.name,
+    analyticsContext = props.analyticsContext,
+    ariaLabelledBy = props['aria-labelledby'];
   var _useState = useState(propValue !== undefined ? propValue : defaultValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedValue = _useState2[0],
-      setSelectedValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedValue = _useState2[0],
+    setSelectedValue = _useState2[1];
   var onRadioChange = useCallback(function (e, analyticsEvent) {
     setSelectedValue(e.currentTarget.value);
-
     if (onChange) {
       onChange(e, analyticsEvent);
     }
-  }, [onChange]); // If propValue is provided than act as a controlled component
-  // If not then act as an uncontrolled component using the value from state
+  }, [onChange]);
 
+  // If propValue is provided than act as a controlled component
+  // If not then act as an uncontrolled component using the value from state
   var value = typeof propValue !== 'undefined' ? propValue : selectedValue;
   return /*#__PURE__*/React.createElement("div", {
     role: "radiogroup",
     "aria-labelledby": ariaLabelledBy
   }, options.map(function (_ref, index) {
     var optionProps = _extends({}, _ref);
-
     if (typeof isDisabled !== 'undefined') {
       optionProps.isDisabled = isDisabled;
     }
-
     var isChecked = value != null && optionProps.value === value;
     return /*#__PURE__*/React.createElement(Radio, _extends({}, optionProps, {
       name: name || optionProps.name,