@atlaskit/checkbox 13.2.0 → 13.4.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/checkbox
 
+## 13.4.0
+
+### Minor Changes
+
+-   [#103698](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103698)
+    [`413b5201c8fe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/413b5201c8fe) -
+    Introduce the bounded `xcss` prop.
+
+## 13.3.0
+
+### Minor Changes
+
+-   [#94675](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94675)
+    [`5d9e1dccacca`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5d9e1dccacca) -
+    [ux] Update input border color token to meet 3:1 color contrast ratioLight theme:
+    color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #738496
+
+### Patch Changes
+
+-   Updated dependencies
+
 ## 13.2.0
 
 ### Minor Changes

package/__perf__/checkbox.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { fireEvent } from '@testing-library/react';
 import {
-  InteractionTaskArgs,
-  PublicInteractionTask,
+  type InteractionTaskArgs,
+  type PublicInteractionTask,
 } from 'storybook-addon-performance';
 
 import { Checkbox } from '../src';

package/codemods/utils.tsx

@@ -1,6 +1,7 @@
-import core, {
+import type {
   API,
   ASTPath,
+  default as core,
   FileInfo,
   ImportDeclaration,
   ImportDefaultSpecifier,
@@ -10,7 +11,7 @@ import core, {
   Program,
   VariableDeclaration,
 } from 'jscodeshift';
-import { Collection } from 'jscodeshift/src/Collection';
+import { type Collection } from 'jscodeshift/src/Collection';
 
 export type Nullable<T> = T | null;
 

package/dist/cjs/checkbox.js

@@ -12,10 +12,9 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _internal = require("./internal");
-var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
+var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
 /**  @jsx jsx */
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 var checkboxStyles = (0, _react2.css)({
@@ -44,7 +43,7 @@ var checkboxStyles = (0, _react2.css)({
     transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
     'rect:first-of-type': {
       stroke: 'var(--checkbox-border-color)',
-      strokeWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 2,
+      strokeWidth: "var(--ds-border-width, 1px)",
       transition: 'stroke 0.2s ease-in-out'
     }
   },
@@ -147,6 +146,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     value = props.value,
     isRequired = props.isRequired,
     testId = props.testId,
+    xcss = props.xcss,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _useState = (0, _react.useState)(isCheckedProp !== undefined ? isCheckedProp : defaultChecked),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -164,7 +164,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.2.0"
+    packageVersion: "13.4.0"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
@@ -176,6 +176,11 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
+    // Currently the rule hasn't been updated to enable "allowed" dynamic pass-throughs.
+    // When there is more usage of this pattern we'll update the lint rule.
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: xcss
   }, (0, _react2.jsx)("input", (0, _extends2.default)({
     // It is necessary only for Safari. It allows to render focus styles.
     tabIndex: 0

package/dist/cjs/internal/label.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Label;
 var _react = require("@emotion/react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 
@@ -38,14 +37,14 @@ var labelStyles = (0, _react.css)({
   /**
    * Border
    */
-  '--local-border': (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.N100, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
+  '--local-border': "var(--ds-border-input, ".concat(_colors.N100, ")"),
   '--local-border-active': "var(--ds-border, ".concat(_colors.B50, ")"),
   '--local-border-checked': "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
   '--local-border-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
   '--local-border-checked-invalid': "var(--ds-border-danger, ".concat(_colors.R300, ")"),
   '--local-border-disabled': "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
   '--local-border-focus': "var(--ds-border-focused, ".concat(_colors.B200, ")"),
-  '--local-border-hover': (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.N100, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
+  '--local-border-hover': "var(--ds-border-input, ".concat(_colors.N100, ")"),
   '--local-border-invalid': "var(--ds-border-danger, ".concat(_colors.R300, ")"),
   /**
    * Tick
@@ -60,8 +59,12 @@ function Label(_ref) {
     isDisabled = _ref.isDisabled,
     testId = _ref.testId,
     label = _ref.label,
-    id = _ref.id;
+    id = _ref.id,
+    xcss = _ref.xcss;
   return (0, _react.jsx)("label", {
+    // Because we're using Emotion local jsx namespace we have to coerce xcss prop to a string.
+    // When we're fully on Compiled its local jsx namespace accepts the output of xcss prop.
+    className: xcss,
     css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,

package/dist/es2019/checkbox.js

@@ -4,7 +4,6 @@ import { forwardRef, memo, useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B200 } from '@atlaskit/theme/colors';
 import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
@@ -34,7 +33,7 @@ const checkboxStyles = css({
     transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
     'rect:first-of-type': {
       stroke: 'var(--checkbox-border-color)',
-      strokeWidth: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 2,
+      strokeWidth: "var(--ds-border-width, 1px)",
       transition: 'stroke 0.2s ease-in-out'
     }
   },
@@ -133,6 +132,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     value,
     isRequired,
     testId,
+    xcss,
     ...rest
   } = props;
   const [isCheckedState, setIsCheckedState] = useState(isCheckedProp !== undefined ? isCheckedProp : defaultChecked);
@@ -148,7 +148,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.2.0"
+    packageVersion: "13.4.0"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]);
@@ -160,6 +160,11 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     label: label,
     id: rest.id ? `${rest.id}-label` : undefined,
     testId: testId && `${testId}--checkbox-label`
+    // Currently the rule hasn't been updated to enable "allowed" dynamic pass-throughs.
+    // When there is more usage of this pattern we'll update the lint rule.
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: xcss
   }, jsx("input", _extends({
     // It is necessary only for Safari. It allows to render focus styles.
     tabIndex: 0

package/dist/es2019/internal/label.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
+import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
 const baseStyles = css({
   display: 'grid',
   gridAutoColumns: '1fr',
@@ -31,14 +30,14 @@ const labelStyles = css({
   /**
    * Border
    */
-  '--local-border': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
+  '--local-border': `var(--ds-border-input, ${N100})`,
   '--local-border-active': `var(--ds-border, ${B50})`,
   '--local-border-checked': `var(--ds-background-selected-bold, ${B400})`,
   '--local-border-checked-hover': `var(--ds-background-selected-bold-hovered, ${B300})`,
   '--local-border-checked-invalid': `var(--ds-border-danger, ${R300})`,
   '--local-border-disabled': `var(--ds-background-disabled, ${N20})`,
   '--local-border-focus': `var(--ds-border-focused, ${B200})`,
-  '--local-border-hover': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
+  '--local-border-hover': `var(--ds-border-input, ${N100})`,
   '--local-border-invalid': `var(--ds-border-danger, ${R300})`,
   /**
    * Tick
@@ -53,9 +52,13 @@ export default function Label({
   isDisabled,
   testId,
   label,
-  id
+  id,
+  xcss
 }) {
   return jsx("label", {
+    // Because we're using Emotion local jsx namespace we have to coerce xcss prop to a string.
+    // When we're fully on Compiled its local jsx namespace accepts the output of xcss prop.
+    className: xcss,
     css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,

package/dist/esm/checkbox.js

@@ -1,13 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
+var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
 /**  @jsx jsx */
 import { forwardRef, memo, useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B200 } from '@atlaskit/theme/colors';
 import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
@@ -37,7 +36,7 @@ var checkboxStyles = css({
     transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
     'rect:first-of-type': {
       stroke: 'var(--checkbox-border-color)',
-      strokeWidth: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 2,
+      strokeWidth: "var(--ds-border-width, 1px)",
       transition: 'stroke 0.2s ease-in-out'
     }
   },
@@ -140,6 +139,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     value = props.value,
     isRequired = props.isRequired,
     testId = props.testId,
+    xcss = props.xcss,
     rest = _objectWithoutProperties(props, _excluded);
   var _useState = useState(isCheckedProp !== undefined ? isCheckedProp : defaultChecked),
     _useState2 = _slicedToArray(_useState, 2),
@@ -157,7 +157,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.2.0"
+    packageVersion: "13.4.0"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]);
@@ -169,6 +169,11 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
+    // Currently the rule hasn't been updated to enable "allowed" dynamic pass-throughs.
+    // When there is more usage of this pattern we'll update the lint rule.
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: xcss
   }, jsx("input", _extends({
     // It is necessary only for Safari. It allows to render focus styles.
     tabIndex: 0

package/dist/esm/internal/label.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
+import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
 var baseStyles = css({
   display: 'grid',
   gridAutoColumns: '1fr',
@@ -31,14 +30,14 @@ var labelStyles = css({
   /**
    * Border
    */
-  '--local-border': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
+  '--local-border': "var(--ds-border-input, ".concat(N100, ")"),
   '--local-border-active': "var(--ds-border, ".concat(B50, ")"),
   '--local-border-checked': "var(--ds-background-selected-bold, ".concat(B400, ")"),
   '--local-border-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
   '--local-border-checked-invalid': "var(--ds-border-danger, ".concat(R300, ")"),
   '--local-border-disabled': "var(--ds-background-disabled, ".concat(N20, ")"),
   '--local-border-focus': "var(--ds-border-focused, ".concat(B200, ")"),
-  '--local-border-hover': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
+  '--local-border-hover': "var(--ds-border-input, ".concat(N100, ")"),
   '--local-border-invalid': "var(--ds-border-danger, ".concat(R300, ")"),
   /**
    * Tick
@@ -53,8 +52,12 @@ export default function Label(_ref) {
     isDisabled = _ref.isDisabled,
     testId = _ref.testId,
     label = _ref.label,
-    id = _ref.id;
+    id = _ref.id,
+    xcss = _ref.xcss;
   return jsx("label", {
+    // Because we're using Emotion local jsx namespace we have to coerce xcss prop to a string.
+    // When we're fully on Compiled its local jsx namespace accepts the output of xcss prop.
+    className: xcss,
     css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,

package/dist/types/internal/label-text.d.ts

@@ -1,4 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { LabelTextProps } from '../types';
+import { type LabelTextProps } from '../types';
 export default function LabelText({ children }: LabelTextProps): jsx.JSX.Element;

package/dist/types/internal/label.d.ts

@@ -1,4 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { LabelProps } from '../types';
-export default function Label({ children, isDisabled, testId, label, id, }: LabelProps): jsx.JSX.Element;
+import { type LabelProps } from '../types';
+export default function Label({ children, isDisabled, testId, label, id, xcss, }: LabelProps): jsx.JSX.Element;

package/dist/types/types.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import type React from 'react';
 import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
+import { type StrictXCSSProp } from '@atlaskit/css';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 /**
  *
@@ -70,6 +71,11 @@ export type OwnProps = {
      * Additional information to be included in the `context` of analytics events that come from radio.
      */
     analyticsContext?: Record<string, any>;
+    /**
+     * Bounded style API. Defining allowed styles through this prop will be supported for future component
+     * iterations. Any styles that are not allowed by this API will result in type and land blocking violations.
+     */
+    xcss?: StrictXCSSProp<'alignItems', never>;
 };
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CheckboxProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>, 
@@ -99,5 +105,10 @@ export interface LabelProps extends React.HTMLProps<HTMLInputElement> {
      * as Firefox does not dispatch modified click events (e.g. Ctrl+Click) down to the underlying input element.
      */
     onClick?: React.MouseEventHandler;
+    /**
+     * Bounded style overrides. Defining allowed styles through this prop will be supported for future component
+     * iterations. Any styles that are not allowed by this API will result in type and land blocking violations.
+     */
+    xcss?: StrictXCSSProp<'alignItems', never>;
 }
 export {};

package/dist/types-ts4.5/internal/label-text.d.ts

@@ -1,4 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { LabelTextProps } from '../types';
+import { type LabelTextProps } from '../types';
 export default function LabelText({ children }: LabelTextProps): jsx.JSX.Element;

package/dist/types-ts4.5/internal/label.d.ts

@@ -1,4 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { LabelProps } from '../types';
-export default function Label({ children, isDisabled, testId, label, id, }: LabelProps): jsx.JSX.Element;
+import { type LabelProps } from '../types';
+export default function Label({ children, isDisabled, testId, label, id, xcss, }: LabelProps): jsx.JSX.Element;

package/dist/types-ts4.5/types.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import type React from 'react';
 import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
+import { type StrictXCSSProp } from '@atlaskit/css';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 /**
  *
@@ -70,6 +71,11 @@ export type OwnProps = {
      * Additional information to be included in the `context` of analytics events that come from radio.
      */
     analyticsContext?: Record<string, any>;
+    /**
+     * Bounded style API. Defining allowed styles through this prop will be supported for future component
+     * iterations. Any styles that are not allowed by this API will result in type and land blocking violations.
+     */
+    xcss?: StrictXCSSProp<'alignItems', never>;
 };
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CheckboxProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>, 
@@ -99,5 +105,10 @@ export interface LabelProps extends React.HTMLProps<HTMLInputElement> {
      * as Firefox does not dispatch modified click events (e.g. Ctrl+Click) down to the underlying input element.
      */
     onClick?: React.MouseEventHandler;
+    /**
+     * Bounded style overrides. Defining allowed styles through this prop will be supported for future component
+     * iterations. Any styles that are not allowed by this API will result in type and land blocking violations.
+     */
+    xcss?: StrictXCSSProp<'alignItems', never>;
 }
 export {};

package/extract-react-types/checkbox-props.tsx

@@ -1,4 +1,4 @@
-import { OwnProps } from '../src/types';
+import { type OwnProps } from '../src/types';
 
 export default function CheckboxProps(props: OwnProps) {
   return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/checkbox",
-  "version": "13.2.0",
+  "version": "13.4.0",
   "description": "A checkbox is an input control that allows a user to select one or more options from a number of choices.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,11 +39,11 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.3.0",
+    "@atlaskit/css": "^0.1.0",
     "@atlaskit/ds-lib": "^2.3.0",
-    "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.44.0",
+    "@atlaskit/icon": "^22.3.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -54,6 +54,7 @@
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
+    "@atlaskit/primitives": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -90,11 +91,6 @@
       ]
     }
   },
-  "platform-feature-flags": {
-    "platform.design-system-team.update-border-radio-checkbox_7askv": {
-      "type": "boolean"
-    }
-  },
   "homepage": "https://atlassian.design/components/checkbox/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }