@atlaskit/radio 5.3.11 → 5.4.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/radio
 
+## 5.4.0
+
+### Minor Changes
+
+- [`54a5b7576a6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a5b7576a6) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.3.13
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 5.3.12
+
+### Patch Changes
+
+- [`72cfbe1a536`](https://bitbucket.org/atlassian/atlassian-frontend/commits/72cfbe1a536) - Internal code change turning on new linting rules.
+- [`fe575d49d66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe575d49d66) - Updated styles to use new input design tokens
+- Updated dependencies
+
 ## 5.3.11
 
 ### Patch Changes

package/Radio/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@atlaskit/radio/Radio",
-  "main": "../dist/cjs/Radio.js",
-  "module": "../dist/esm/Radio.js",
-  "module:es2019": "../dist/es2019/Radio.js",
+  "main": "../dist/cjs/radio.js",
+  "module": "../dist/esm/radio.js",
+  "module:es2019": "../dist/es2019/radio.js",
   "sideEffects": false,
-  "types": "../dist/types/Radio.d.ts"
+  "types": "../dist/types/radio.d.ts"
 }

package/RadioGroup/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@atlaskit/radio/RadioGroup",
-  "main": "../dist/cjs/RadioGroup.js",
-  "module": "../dist/esm/RadioGroup.js",
-  "module:es2019": "../dist/es2019/RadioGroup.js",
+  "main": "../dist/cjs/radio-group.js",
+  "module": "../dist/esm/radio-group.js",
+  "module:es2019": "../dist/es2019/radio-group.js",
   "sideEffects": false,
-  "types": "../dist/types/RadioGroup.d.ts"
+  "types": "../dist/types/radio-group.d.ts"
 }

package/__perf__/default.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import noop from '@atlaskit/ds-lib/noop';
+
 import { Radio } from '../src';
 
 export default () => (
@@ -9,6 +11,6 @@ export default () => (
     name="radio-default"
     testId="radio-default"
     isChecked={true}
-    onChange={() => {}}
+    onChange={noop}
   />
 );

package/__perf__/radio.tsx

@@ -7,7 +7,7 @@ import {
   PublicInteractionTask,
 } from 'storybook-addon-performance';
 
-import RadioGroup from '../src/RadioGroup';
+import RadioGroup from '../src/radio-group';
 
 const interactionTasks: PublicInteractionTask[] = [
   {

package/dist/cjs/index.js

@@ -8,16 +8,16 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function get() {
-    return _Radio.default;
+    return _radio.default;
   }
 });
 Object.defineProperty(exports, "RadioGroup", {
   enumerable: true,
   get: function get() {
-    return _RadioGroup.default;
+    return _radioGroup.default;
   }
 });
 
-var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
+var _radioGroup = _interopRequireDefault(require("./radio-group"));
 
-var _Radio = _interopRequireDefault(require("./Radio"));
+var _radio = _interopRequireDefault(require("./radio"));

package/dist/cjs/{RadioGroup.js → radio-group.js}

@@ -15,14 +15,14 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Radio = _interopRequireDefault(require("./Radio"));
+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 noop = function noop() {};
-
 var noOptions = [];
 
 function RadioGroup(props) {
@@ -35,7 +35,7 @@ function RadioGroup(props) {
       isRequired = props.isRequired,
       isInvalid = props.isInvalid,
       _props$onInvalid = props.onInvalid,
-      onInvalid = _props$onInvalid === void 0 ? noop : _props$onInvalid,
+      onInvalid = _props$onInvalid === void 0 ? _noop.default : _props$onInvalid,
       name = props.name,
       analyticsContext = props.analyticsContext,
       ariaLabelledBy = props['aria-labelledby'];
@@ -66,7 +66,7 @@ function RadioGroup(props) {
     }
 
     var isChecked = value != null && optionProps.value === value;
-    return /*#__PURE__*/_react.default.createElement(_Radio.default, (0, _extends2.default)({}, optionProps, {
+    return /*#__PURE__*/_react.default.createElement(_radio.default, (0, _extends2.default)({}, optionProps, {
       name: name || optionProps.name,
       key: index,
       onChange: onRadioChange,

package/dist/cjs/{Radio.js → radio.js}

@@ -13,10 +13,12 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+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"));
@@ -27,15 +29,13 @@ 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.3.11";
+var packageVersion = "5.4.0";
 var fontFamily = (0, _constants.fontFamily)();
-
-var noop = function noop() {};
-
-var labelPaddingStyles = (0, _core.css)({
+var noop = _noop.default;
+var labelPaddingStyles = (0, _react2.css)({
   padding: '2px 4px'
 });
-var labelStyles = (0, _core.css)({
+var labelStyles = (0, _react2.css)({
   display: 'flex',
   boxSizing: 'border-box',
   position: 'relative',
@@ -47,13 +47,13 @@ var labelStyles = (0, _core.css)({
     cursor: 'not-allowed'
   }
 });
-var lightLabelStyles = (0, _core.css)({
+var lightLabelStyles = (0, _react2.css)({
   color: "var(--ds-text, ".concat(_colors.N900, ")")
 });
-var darkLabelStyles = (0, _core.css)({
+var darkLabelStyles = (0, _react2.css)({
   color: "var(--ds-text, ".concat(_colors.DN600, ")")
 });
-var radioStyles = (0, _core.css)({
+var radioStyles = (0, _react2.css)({
   display: 'flex',
 
   /*
@@ -173,17 +173,17 @@ var RadioWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, re
     packageVersion: packageVersion
   });
   var radioCustomProperties = (0, _react.useMemo)(function () {
-    return (0, _core.css)((0, _styles.default)(mode));
+    return (0, _react2.css)((0, _styles.default)(mode));
   }, [mode]);
   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, _core.jsx)("label", {
+    (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
       // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       ,
       css: [labelStyles, mode === 'light' ? lightLabelStyles : darkLabelStyles]
-    }, (0, _core.jsx)("input", (0, _extends2.default)({}, rest, {
+    }, (0, _react2.jsx)("input", (0, _extends2.default)({}, rest, {
       "aria-label": ariaLabel,
       checked: isChecked,
       disabled: isDisabled,
@@ -200,15 +200,25 @@ var RadioWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, re
       ,
       css: [radioStyles, radioCustomProperties],
       ref: ref
-    })), label ? (0, _core.jsx)("span", {
+    })), label ? (0, _react2.jsx)("span", {
       css: labelPaddingStyles
     }, label) : null)
   );
 });
+/**
+ * __Radio__
+ *
+ * A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.
+ *
+ * - [Examples](https://atlassian.design/components/radio/examples)
+ * - [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, _core.jsx)(_components.default.Consumer, null, function (_ref) {
+  return (0, _react2.jsx)(_components.default.Consumer, null, function (_ref) {
     var mode = _ref.mode;
-    return (0, _core.jsx)(RadioWithMode, (0, _extends2.default)({}, props, {
+    return (0, _react2.jsx)(RadioWithMode, (0, _extends2.default)({}, props, {
       ref: ref,
       mode: mode
     }));

package/dist/cjs/styles.js

@@ -10,7 +10,7 @@ var _colors = require("@atlaskit/theme/colors");
 var radioThemeColors = {
   light: {
     background: "var(--ds-background-input, ".concat(_colors.N10, ")"),
-    backgroundHover: "var(--ds-surface, ".concat(_colors.N30, ")"),
+    backgroundHover: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
     backgroundActive: "var(--ds-background-input-pressed, ".concat(_colors.N30, ")"),
     backgroundChecked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
     backgroundCheckedHover: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B300, ")"),
@@ -19,14 +19,14 @@ var radioThemeColors = {
     dotChecked: "var(--ds-text-inverse, ".concat(_colors.N10, ")"),
     dotDisabled: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
     dotActive: "var(--ds-text-inverse, ".concat(_colors.B400, ")"),
-    border: "var(--ds-border, ".concat(_colors.N40, ")"),
-    borderHover: "var(--ds-border, ".concat(_colors.N40, ")"),
+    border: "var(--ds-border-input, ".concat(_colors.N40, ")"),
+    borderHover: "var(--ds-border-input, ".concat(_colors.N40, ")"),
     borderDisabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
     borderFocus: "var(--ds-border-focused, ".concat(_colors.B100, ")")
   },
   dark: {
     background: "var(--ds-background-input, ".concat(_colors.DN10, ")"),
-    backgroundHover: "var(--ds-surface, ".concat(_colors.DN30, ")"),
+    backgroundHover: "var(--ds-background-input-hovered, ".concat(_colors.DN30, ")"),
     backgroundActive: "var(--ds-background-input-pressed, ".concat(_colors.B200, ")"),
     backgroundChecked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
     backgroundCheckedHover: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B75, ")"),
@@ -35,8 +35,8 @@ var radioThemeColors = {
     dotChecked: "var(--ds-text-inverse, ".concat(_colors.DN10, ")"),
     dotDisabled: "var(--ds-text-disabled, ".concat(_colors.DN90, ")"),
     dotActive: "var(--ds-text-inverse, ".concat(_colors.DN10, ")"),
-    border: "var(--ds-border, ".concat(_colors.DN80, ")"),
-    borderHover: "var(--ds-border, ".concat(_colors.DN200, ")"),
+    border: "var(--ds-border-input, ".concat(_colors.DN80, ")"),
+    borderHover: "var(--ds-border-input, ".concat(_colors.DN200, ")"),
     borderDisabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
     borderFocus: "var(--ds-border-focused, ".concat(_colors.B75, ")")
   }

package/dist/cjs/version.json

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

package/dist/es2019/index.js

@@ -1,2 +1,2 @@
-export { default as RadioGroup } from './RadioGroup';
-export { default as Radio } from './Radio';
+export { default as RadioGroup } from './radio-group';
+export { default as Radio } from './radio';

package/dist/es2019/{RadioGroup.js → radio-group.js}

@@ -1,9 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useState } from 'react';
-import Radio from './Radio';
-
-const noop = () => {};
-
+import noop from '@atlaskit/ds-lib/noop';
+import Radio from './radio';
 const noOptions = [];
 export default function RadioGroup(props) {
   const {

package/dist/es2019/{Radio.js → radio.js}

@@ -2,18 +2,17 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef, memo, useMemo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
+import __noop from '@atlaskit/ds-lib/noop';
 import { DN600, N80, N900 } from '@atlaskit/theme/colors';
 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.3.11";
+const packageVersion = "5.4.0";
 const fontFamily = getFontFamily();
-
-const noop = () => {};
-
+const noop = __noop;
 const labelPaddingStyles = css({
   padding: '2px 4px'
 });
@@ -184,6 +183,16 @@ const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     }, label) : null)
   );
 });
+/**
+ * __Radio__
+ *
+ * A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.
+ *
+ * - [Examples](https://atlassian.design/components/radio/examples)
+ * - [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

@@ -2,7 +2,7 @@ import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N
 const radioThemeColors = {
   light: {
     background: `var(--ds-background-input, ${N10})`,
-    backgroundHover: `var(--ds-surface, ${N30})`,
+    backgroundHover: `var(--ds-background-input-hovered, ${N30})`,
     backgroundActive: `var(--ds-background-input-pressed, ${N30})`,
     backgroundChecked: `var(--ds-background-brand-bold, ${B400})`,
     backgroundCheckedHover: `var(--ds-background-brand-bold-hovered, ${B300})`,
@@ -11,14 +11,14 @@ const radioThemeColors = {
     dotChecked: `var(--ds-text-inverse, ${N10})`,
     dotDisabled: `var(--ds-text-disabled, ${N70})`,
     dotActive: `var(--ds-text-inverse, ${B400})`,
-    border: `var(--ds-border, ${N40})`,
-    borderHover: `var(--ds-border, ${N40})`,
+    border: `var(--ds-border-input, ${N40})`,
+    borderHover: `var(--ds-border-input, ${N40})`,
     borderDisabled: `var(--ds-background-disabled, ${N20})`,
     borderFocus: `var(--ds-border-focused, ${B100})`
   },
   dark: {
     background: `var(--ds-background-input, ${DN10})`,
-    backgroundHover: `var(--ds-surface, ${DN30})`,
+    backgroundHover: `var(--ds-background-input-hovered, ${DN30})`,
     backgroundActive: `var(--ds-background-input-pressed, ${B200})`,
     backgroundChecked: `var(--ds-background-brand-bold, ${B400})`,
     backgroundCheckedHover: `var(--ds-background-brand-bold-hovered, ${B75})`,
@@ -27,8 +27,8 @@ const radioThemeColors = {
     dotChecked: `var(--ds-text-inverse, ${DN10})`,
     dotDisabled: `var(--ds-text-disabled, ${DN90})`,
     dotActive: `var(--ds-text-inverse, ${DN10})`,
-    border: `var(--ds-border, ${DN80})`,
-    borderHover: `var(--ds-border, ${DN200})`,
+    border: `var(--ds-border-input, ${DN80})`,
+    borderHover: `var(--ds-border-input, ${DN200})`,
     borderDisabled: `var(--ds-background-disabled, ${DN10})`,
     borderFocus: `var(--ds-border-focused, ${B75})`
   }

package/dist/es2019/version.json

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

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { default as RadioGroup } from './RadioGroup';
-export { default as Radio } from './Radio';
+export { default as RadioGroup } from './radio-group';
+export { default as Radio } from './radio';

package/dist/esm/{RadioGroup.js → radio-group.js}

@@ -1,10 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useState } from 'react';
-import Radio from './Radio';
-
-var noop = function noop() {};
-
+import noop from '@atlaskit/ds-lib/noop';
+import Radio from './radio';
 var noOptions = [];
 export default function RadioGroup(props) {
   var onChange = props.onChange,

package/dist/esm/{Radio.js → radio.js}

@@ -4,18 +4,17 @@ var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecke
 
 /** @jsx jsx */
 import { forwardRef, memo, useMemo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
+import __noop from '@atlaskit/ds-lib/noop';
 import { DN600, N80, N900 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import getRadioCustomProperties from './styles';
 var packageName = "@atlaskit/radio";
-var packageVersion = "5.3.11";
+var packageVersion = "5.4.0";
 var fontFamily = getFontFamily();
-
-var noop = function noop() {};
-
+var noop = __noop;
 var labelPaddingStyles = css({
   padding: '2px 4px'
 });
@@ -190,6 +189,16 @@ var RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     }, label) : null)
   );
 });
+/**
+ * __Radio__
+ *
+ * A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.
+ *
+ * - [Examples](https://atlassian.design/components/radio/examples)
+ * - [Code](https://atlassian.design/components/radio/code)
+ * - [Usage](https://atlassian.design/components/radio/usage)
+ */
+
 var Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Radio(props, ref) {
   return jsx(GlobalTheme.Consumer, null, function (_ref) {
     var mode = _ref.mode;

package/dist/esm/styles.js

@@ -2,7 +2,7 @@ import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N
 var radioThemeColors = {
   light: {
     background: "var(--ds-background-input, ".concat(N10, ")"),
-    backgroundHover: "var(--ds-surface, ".concat(N30, ")"),
+    backgroundHover: "var(--ds-background-input-hovered, ".concat(N30, ")"),
     backgroundActive: "var(--ds-background-input-pressed, ".concat(N30, ")"),
     backgroundChecked: "var(--ds-background-brand-bold, ".concat(B400, ")"),
     backgroundCheckedHover: "var(--ds-background-brand-bold-hovered, ".concat(B300, ")"),
@@ -11,14 +11,14 @@ var radioThemeColors = {
     dotChecked: "var(--ds-text-inverse, ".concat(N10, ")"),
     dotDisabled: "var(--ds-text-disabled, ".concat(N70, ")"),
     dotActive: "var(--ds-text-inverse, ".concat(B400, ")"),
-    border: "var(--ds-border, ".concat(N40, ")"),
-    borderHover: "var(--ds-border, ".concat(N40, ")"),
+    border: "var(--ds-border-input, ".concat(N40, ")"),
+    borderHover: "var(--ds-border-input, ".concat(N40, ")"),
     borderDisabled: "var(--ds-background-disabled, ".concat(N20, ")"),
     borderFocus: "var(--ds-border-focused, ".concat(B100, ")")
   },
   dark: {
     background: "var(--ds-background-input, ".concat(DN10, ")"),
-    backgroundHover: "var(--ds-surface, ".concat(DN30, ")"),
+    backgroundHover: "var(--ds-background-input-hovered, ".concat(DN30, ")"),
     backgroundActive: "var(--ds-background-input-pressed, ".concat(B200, ")"),
     backgroundChecked: "var(--ds-background-brand-bold, ".concat(B400, ")"),
     backgroundCheckedHover: "var(--ds-background-brand-bold-hovered, ".concat(B75, ")"),
@@ -27,8 +27,8 @@ var radioThemeColors = {
     dotChecked: "var(--ds-text-inverse, ".concat(DN10, ")"),
     dotDisabled: "var(--ds-text-disabled, ".concat(DN90, ")"),
     dotActive: "var(--ds-text-inverse, ".concat(DN10, ")"),
-    border: "var(--ds-border, ".concat(DN80, ")"),
-    borderHover: "var(--ds-border, ".concat(DN200, ")"),
+    border: "var(--ds-border-input, ".concat(DN80, ")"),
+    borderHover: "var(--ds-border-input, ".concat(DN200, ")"),
     borderDisabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
     borderFocus: "var(--ds-border-focused, ".concat(B75, ")")
   }

package/dist/esm/version.json

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

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export { default as RadioGroup } from './RadioGroup';
-export { default as Radio } from './Radio';
+export { default as RadioGroup } from './radio-group';
+export { default as Radio } from './radio';

package/dist/types/radio-group.d.ts

@@ -0,0 +1,50 @@
+import React, { SyntheticEvent } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { OptionsPropType, RadioValue } from './types';
+export interface RadioGroupProps {
+    /**
+     * Once set, controls the selected value on the `RadioGroup`
+     */
+    value?: RadioValue | null;
+    /**
+     * Sets the initial selected value on the `RadioGroup`
+     */
+    defaultValue?: RadioValue | null;
+    /**
+     * Sets the disabled state of all `Radio` elements in the group. Overrides the `isDisabled` setting of all child `Radio` items.
+     */
+    isDisabled?: boolean;
+    /**
+     * Sets the required state of all `Radio` elements in the group
+     */
+    isRequired?: boolean;
+    /**
+     * Sets the invalid state of all `Radio` elements in the group
+     */
+    isInvalid?: boolean;
+    /**
+     * An array of objects, each object is mapped onto a `Radio` element within the group. Name must be unique to the group.
+     */
+    options: OptionsPropType;
+    /**
+     * Function that gets fired after each invalid event
+     */
+    onInvalid?: (event: SyntheticEvent<any>) => void;
+    /**
+     * Function that gets after each change event
+     */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Sets the `name` prop on each of the `Radio` elements in the group
+     */
+    name?: string;
+    /**
+     * Additional information to be included in the `context` of analytics events that come from radio
+     */
+    analyticsContext?: Record<string, any>;
+    /**
+     * The id of the element that links to this radiogroup.
+     */
+    'aria-labelledby'?: string;
+}
+export default function RadioGroup(props: RadioGroupProps): JSX.Element;

package/dist/types/{Radio.d.ts → radio.d.ts}

@@ -1,4 +1,13 @@
 /// <reference types="react" />
+/**
+ * __Radio__
+ *
+ * A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.
+ *
+ * - [Examples](https://atlassian.design/components/radio/examples)
+ * - [Code](https://atlassian.design/components/radio/code)
+ * - [Usage](https://atlassian.design/components/radio/usage)
+ */
 declare const Radio: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<Omit<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-label" | "disabled" | "required" | "checked" | "value">, keyof {
     ariaLabel?: string | undefined;
     isDisabled?: boolean | undefined;
@@ -21,7 +30,7 @@ declare const Radio: import("react").MemoExoticComponent<import("react").Forward
     value?: string | undefined;
     testId?: string | undefined;
     analyticsContext?: Record<string, any> | undefined;
-} & import("@atlaskit/analytics-next").WithAnalyticsEventsProps, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "crossOrigin" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "size" | "src" | "step" | "type" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | keyof {
+} & import("@atlaskit/analytics-next").WithAnalyticsEventsProps, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "crossOrigin" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "size" | "src" | "step" | "type" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
     ariaLabel?: string | undefined;
     isDisabled?: boolean | undefined;
     isRequired?: boolean | undefined;

package/dist/types/styles.d.ts

@@ -6,10 +6,10 @@ export default function getRadioCustomProperties(mode: ThemeModes): {
     '--local-background-checked-active': "var(--ds-background-brand-bold-pressed)";
     '--local-background-checked-hover': "var(--ds-background-brand-bold-hovered)";
     '--local-background-disabled': "var(--ds-background-input)";
-    '--local-background-hover': "var(--ds-surface)";
-    '--local-border': "var(--ds-border)";
+    '--local-background-hover': "var(--ds-background-input-hovered)";
+    '--local-border': "var(--ds-border-input)";
     '--local-border-disabled': "var(--ds-background-disabled)";
-    '--local-border-hover': "var(--ds-border)";
+    '--local-border-hover': "var(--ds-border-input)";
     '--local-border-focus': "var(--ds-border-focused)";
     '--local-dot-active': "var(--ds-text-inverse)";
     '--local-dot-checked': "var(--ds-text-inverse)";

package/dist/types/types.d.ts

@@ -10,50 +10,84 @@ export declare type OptionPropType = {
 export declare type OptionsPropType = Array<OptionPropType>;
 export declare type RadioValue = string;
 declare type OwnProps = {
-    /** the aria-label attribute associated with the radio element */
+    /**
+     * the aria-label attribute associated with the radio element
+     */
     ariaLabel?: string;
-    /** Makes a `Radio` field unselectable when true. Overridden by `isDisabled` prop of `RadioGroup`. */
+    /**
+     * Makes a `Radio` field unselectable when true. Overridden by `isDisabled` prop of `RadioGroup`.
+     */
     isDisabled?: boolean;
-    /** Marks this as a required field */
+    /**
+     * Marks this as a required field
+     */
     isRequired?: boolean;
-    /** Field is invalid */
+    /**
+     * Field is invalid
+     */
     isInvalid?: boolean;
-    /** Set the field as checked */
+    /**
+     * Set the field as checked
+     */
     isChecked?: boolean;
-    /** The label value for the input rendered to the dom */
+    /**
+     * The label value for the input rendered to the dom
+     */
     label?: ReactNode;
-    /** onChange event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup` */
+    /**
+     * onChange event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`
+     */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
-    /** Field value */
+    /**
+     * Field value
+     */
     value?: RadioValue;
     /**
-        A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
-        we have 2 different testid generated based on the one you pass to the Radio component:
-        - `{testId}--radio-input` to check if it got changed to checked/unchecked.
-        - `{testId}--radio-label` to click the input
-    */
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+     * we have 2 different testid generated based on the one you pass to the Radio component:
+     * - `{testId}--radio-input` to check if it got changed to checked/unchecked.
+     * - `{testId}--radio-label` to click the input
+     */
     testId?: string;
-    /** Additional information to be included in the `context` of analytics events that come from radio */
+    /**
+     * Additional information to be included in the `context` of analytics events that come from radio
+     */
     analyticsContext?: Record<string, any>;
 };
 declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export declare type RadioProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>, 'aria-label' | 'disabled' | 'required' | 'checked' | 'value'>, OwnProps> & WithAnalyticsEventsProps;
 export interface ExtractReactTypeProps extends WithAnalyticsEventsProps {
-    /** the aria-label attribute associated with the radio element */
+    /**
+     * the aria-label attribute associated with the radio element
+     */
     ariaLabel?: string;
-    /** Field disabled */
+    /**
+     * Field disabled
+     */
     isDisabled?: boolean;
-    /** Marks this as a required field */
+    /**
+     * Marks this as a required field
+     */
     isRequired?: boolean;
-    /** Field is invalid */
+    /**
+     * Field is invalid
+     */
     isInvalid?: boolean;
-    /** Set the field as checked */
+    /**
+     * Set the field as checked
+     */
     isChecked?: boolean;
-    /** The label value for the input rendered to the dom */
+    /**
+     * The label value for the input rendered to the dom
+     */
     label?: ReactNode;
-    /** Field name, must be unique to the radio group */
+    /**
+     * Field name, must be unique to the radio group
+     */
     name?: string;
-    /** `onChange` event handler, passed into the props of each `Radio` Component instantiated within RadioGroup */
+    /**
+     * `onChange` event handler, passed into the props of each `Radio` Component instantiated within RadioGroup
+     */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
@@ -61,18 +95,24 @@ export interface ExtractReactTypeProps extends WithAnalyticsEventsProps {
     onMouseUp?: React.MouseEventHandler;
     onMouseEnter?: React.MouseEventHandler;
     onMouseLeave?: React.MouseEventHandler;
-    /** `onInvalid` event handler, passed into the props of each `Radio` component instantiated within `RadioGroup` */
+    /**
+     * `onInvalid` event handler, passed into the props of each `Radio` component instantiated within `RadioGroup`
+     */
     onInvalid?: (e: SyntheticEvent<any>) => void;
-    /** Field value */
+    /**
+     * Field value
+     */
     value?: RadioValue;
     /**
-        A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
-        we have two different `testId`s generated based on the one you pass to the Radio component:
-        - `{testId}--radio-input` to check if it got changed to checked/unchecked.
-        - `{testId}--radio-label` to click the input
-      */
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+     * we have two different `testId`s generated based on the one you pass to the Radio component:
+     * - `{testId}--radio-input` to check if it got changed to checked/unchecked.
+     * - `{testId}--radio-label` to click the input
+     */
     testId?: string;
-    /** Additional information to be included in the `context` of analytics events that come from radio */
+    /**
+     * Additional information to be included in the `context` of analytics events that come from radio
+     */
     analyticsContext?: Record<string, any>;
 }
 export {};

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/radio",
-  "version": "5.3.11",
-  "description": "A radio input allows people to select only one option from a number of choices. Radio is generally displayed in a radio group.",
+  "version": "5.4.0",
+  "description": "A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -13,26 +13,28 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Radio"
+      "name": "Radio",
+      "category": "Components"
     }
   },
   "af:exports": {
-    "./Radio": "./src/Radio.tsx",
-    "./RadioGroup": "./src/RadioGroup.tsx",
-    "./types": "./src/types.ts",
-    ".": "./src/index.ts"
+    "./Radio": "./src/radio.tsx",
+    "./RadioGroup": "./src/radio-group.tsx",
+    "./types": "./src/types.tsx",
+    ".": "./src/index.tsx"
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/ds-lib": "^2.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -42,7 +44,7 @@
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "^9.0.0",
     "@atlaskit/form": "^8.5.0",
-    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -50,7 +52,7 @@
     "@testing-library/react": "^8.0.1",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.2.4"
+    "typescript": "4.3.5"
   },
   "keywords": [
     "atlaskit",
@@ -62,6 +64,8 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "styling": [

package/report.api.md

@@ -0,0 +1,404 @@
+## API Report File for "@atlaskit/radio"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { ChangeEvent } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { MemoExoticComponent } from 'react';
+import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SyntheticEvent } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+
+declare type OptionPropType = {
+  isDisabled?: boolean;
+  label?: ReactNode;
+  name?: string;
+  value?: RadioValue;
+  testId?: string;
+};
+
+declare type OptionsPropType = Array<OptionPropType>;
+
+export declare const Radio: MemoExoticComponent<ForwardRefExoticComponent<
+  Pick<
+    Omit<
+      Omit<
+        InputHTMLAttributes<HTMLInputElement>,
+        'aria-label' | 'disabled' | 'required' | 'checked' | 'value'
+      >,
+      keyof {
+        ariaLabel?: string | undefined;
+        isDisabled?: boolean | undefined;
+        isRequired?: boolean | undefined;
+        isInvalid?: boolean | undefined;
+        isChecked?: boolean | undefined;
+        label?: ReactNode;
+        onChange?:
+          | ((
+              e: ChangeEvent<HTMLInputElement>,
+              analyticsEvent: UIAnalyticsEvent,
+            ) => void)
+          | undefined;
+        value?: string | undefined;
+        testId?: string | undefined;
+        analyticsContext?: Record<string, any> | undefined;
+      }
+    > & {
+      ariaLabel?: string | undefined;
+      isDisabled?: boolean | undefined;
+      isRequired?: boolean | undefined;
+      isInvalid?: boolean | undefined;
+      isChecked?: boolean | undefined;
+      label?: ReactNode;
+      onChange?:
+        | ((
+            e: ChangeEvent<HTMLInputElement>,
+            analyticsEvent: UIAnalyticsEvent,
+          ) => void)
+        | undefined;
+      value?: string | undefined;
+      testId?: string | undefined;
+      analyticsContext?: Record<string, any> | undefined;
+    } & WithAnalyticsEventsProps,
+    | 'accept'
+    | 'alt'
+    | 'autoComplete'
+    | 'autoFocus'
+    | 'capture'
+    | 'crossOrigin'
+    | 'form'
+    | 'formAction'
+    | 'formEncType'
+    | 'formMethod'
+    | 'formNoValidate'
+    | 'formTarget'
+    | 'height'
+    | 'list'
+    | 'max'
+    | 'maxLength'
+    | 'min'
+    | 'minLength'
+    | 'multiple'
+    | 'name'
+    | 'pattern'
+    | 'placeholder'
+    | 'readOnly'
+    | 'size'
+    | 'src'
+    | 'step'
+    | 'type'
+    | 'width'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'hidden'
+    | 'id'
+    | 'lang'
+    | 'slot'
+    | 'spellCheck'
+    | 'style'
+    | 'tabIndex'
+    | 'title'
+    | 'inputMode'
+    | 'is'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'resource'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCapitalize'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'color'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerEnterCapture'
+    | 'onPointerLeave'
+    | 'onPointerLeaveCapture'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'css'
+    | keyof {
+        ariaLabel?: string | undefined;
+        isDisabled?: boolean | undefined;
+        isRequired?: boolean | undefined;
+        isInvalid?: boolean | undefined;
+        isChecked?: boolean | undefined;
+        label?: ReactNode;
+        onChange?:
+          | ((
+              e: ChangeEvent<HTMLInputElement>,
+              analyticsEvent: UIAnalyticsEvent,
+            ) => void)
+          | undefined;
+        value?: string | undefined;
+        testId?: string | undefined;
+        analyticsContext?: Record<string, any> | undefined;
+      }
+    | 'createAnalyticsEvent'
+  > &
+    RefAttributes<HTMLInputElement>
+>>;
+
+export declare function RadioGroup(props: RadioGroupProps): JSX.Element;
+
+declare interface RadioGroupProps {
+  /** Once set, controls the selected value on the `RadioGroup` */
+  value?: RadioValue | null;
+  /** Sets the initial selected value on the `RadioGroup` */
+  defaultValue?: RadioValue | null;
+  /** Sets the disabled state of all `Radio` elements in the group. Overrides the `isDisabled` setting of all child `Radio` items. */
+  isDisabled?: boolean;
+  /** Sets the required state of all `Radio` elements in the group */
+  isRequired?: boolean;
+  /** Sets the invalid state of all `Radio` elements in the group */
+  isInvalid?: boolean;
+  /** An array of objects, each object is mapped onto a `Radio` element within the group. Name must be unique to the group. */
+  options: OptionsPropType;
+  /** Function that gets fired after each invalid event */
+  onInvalid?: (event: SyntheticEvent<any>) => void;
+  /** Function that gets after each change event */
+  onChange?: (
+    e: React_2.ChangeEvent<HTMLInputElement>,
+    analyticsEvent: UIAnalyticsEvent,
+  ) => void;
+  /** Sets the `name` prop on each of the `Radio` elements in the group */
+  name?: string;
+  /** Additional information to be included in the `context` of analytics events that come from radio */
+  analyticsContext?: Record<string, any>;
+  /** The id of the element that links to this radiogroup. */
+  'aria-labelledby'?: string;
+}
+
+declare type RadioValue = string;
+
+export {};
+```

package/dist/types/RadioGroup.d.ts

@@ -1,28 +0,0 @@
-import React, { SyntheticEvent } from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { OptionsPropType, RadioValue } from './types';
-export interface RadioGroupProps {
-    /** Once set, controls the selected value on the `RadioGroup` */
-    value?: RadioValue | null;
-    /** Sets the initial selected value on the `RadioGroup` */
-    defaultValue?: RadioValue | null;
-    /** Sets the disabled state of all `Radio` elements in the group. Overrides the `isDisabled` setting of all child `Radio` items. */
-    isDisabled?: boolean;
-    /** Sets the required state of all `Radio` elements in the group */
-    isRequired?: boolean;
-    /** Sets the invalid state of all `Radio` elements in the group */
-    isInvalid?: boolean;
-    /** An array of objects, each object is mapped onto a `Radio` element within the group. Name must be unique to the group. */
-    options: OptionsPropType;
-    /** Function that gets fired after each invalid event */
-    onInvalid?: (event: SyntheticEvent<any>) => void;
-    /** Function that gets after each change event */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
-    /** Sets the `name` prop on each of the `Radio` elements in the group */
-    name?: string;
-    /** Additional information to be included in the `context` of analytics events that come from radio */
-    analyticsContext?: Record<string, any>;
-    /** The id of the element that links to this radiogroup. */
-    'aria-labelledby'?: string;
-}
-export default function RadioGroup(props: RadioGroupProps): JSX.Element;