@atlaskit/select 19.0.0 → 20.0.0

package/dist/esm/components/input-options.js

@@ -1,61 +1,18 @@
+/* input-options.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { useCallback, useState } from 'react';
-import { css, jsx } from '@emotion/react';
-import { isAppleDevice } from '@atlaskit/ds-lib/device-check';
+import "./input-options.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useMemo, useState } from 'react';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
 import PrimitiveSVGIcon from '@atlaskit/icon/svg';
 import { fg } from '@atlaskit/platform-feature-flags';
-import VisuallyHidden from '@atlaskit/visually-hidden';
-var getPrimitiveStyles = function getPrimitiveStyles(props) {
-  var cx = props.cx,
-    className = props.className,
-    getStyles = props.getStyles,
-    isDisabled = props.isDisabled,
-    isFocused = props.isFocused,
-    isSelected = props.isSelected;
-  var baseStyles = {
-    alignItems: 'center',
-    backgroundColor: isFocused ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : 'transparent',
-    color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
-    display: 'flex ',
-    paddingBottom: "var(--ds-space-050, 4px)",
-    paddingLeft: "var(--ds-space-200, 16px)",
-    paddingTop: "var(--ds-space-050, 4px)",
-    // This 'none' needs to be present to ensure that style is not applied when
-    // the option is selected but not focused.
-    boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-border-focused, #388BFF)") : 'none',
-    ':active': {
-      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
-    },
-    '@media screen and (-ms-high-contrast: active)': {
-      borderLeft: isFocused ? '2px solid transparent' : ''
-    }
-  };
-  var augmentedStyles = css(_objectSpread(_objectSpread({}, getStyles('option', props)), baseStyles));
-  var bemClasses = {
-    option: true,
-    'option--is-disabled': isDisabled,
-    'option--is-focused': isFocused,
-    'option--is-selected': isSelected
-  };
-
-  // maintain react-select API
-  return {
-    styles: augmentedStyles,
-    classes: cx(bemClasses, className)
-  };
+var optionStyles = {
+  default: "_1e0c1txw _4cvr1h6o _1bsb1osq _uiztglyw _18ql1j7p _vchhusvi _85i51b66 _1q511b66 _bozgpxbi _y4tiutpp _bfhk1j28 _16qs1kw7 _syaz1kw7 _1di61dty",
+  focused: "_bfhk166n _16qsn8hf _112e1vrj",
+  disabled: "_syaz15gi"
 };
 
 // state of the parent option
@@ -84,46 +41,21 @@ var getPrimaryColor = function getPrimaryColor(_ref) {
 
 // the secondary color represents the radio dot or checkmark
 var getSecondaryColor = function getSecondaryColor(_ref2) {
-  var isActive = _ref2.isActive,
-    isDisabled = _ref2.isDisabled,
+  var isDisabled = _ref2.isDisabled,
     isSelected = _ref2.isSelected;
   if (isDisabled && isSelected) {
     return "var(--ds-text-disabled, #091E424F)";
-  } else if (isActive && isSelected && !isDisabled) {
-    return "var(--ds-surface, #FFFFFF)";
   } else if (!isSelected) {
     return 'transparent';
   }
   return "var(--ds-surface, #FFFFFF)";
 };
-
-// the border color surrounds the checkbox/radio
-var getBorderColor = function getBorderColor(_ref3) {
-  var isActive = _ref3.isActive,
-    isDisabled = _ref3.isDisabled,
-    isSelected = _ref3.isSelected;
-  if (isSelected || isActive || isDisabled) {
-    return 'currentColor';
-  }
-  return "var(--ds-border-input, #8590A2)";
+var iconStyles = {
+  inherit: "_1u9j1r31 _1gqp1r31",
+  default: "_1u9j1elr _1gqp1elr"
 };
-var baseIconStyles = css({
-  display: 'flex ',
-  alignItems: 'center',
-  flexShrink: 0,
-  paddingInlineEnd: "var(--ds-space-050, 4px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '& svg rect, & svg circle:first-of-type': {
-    strokeLinejoin: 'round',
-    strokeWidth: "var(--ds-border-width, 1px)"
-  }
-});
-var baseOptionStyles = css({
-  flexGrow: 1,
-  overflowX: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
+var baseIconStyles = null;
+var baseOptionStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var ControlOption = function ControlOption(props) {
@@ -137,91 +69,63 @@ var ControlOption = function ControlOption(props) {
   var onMouseUp = useCallback(function () {
     return setIsActive(false);
   }, []);
-  var getStyles = props.getStyles,
-    Icon = props.Icon,
+  var Icon = props.Icon,
     children = props.children,
     innerProps = props.innerProps,
     innerRef = props.innerRef,
-    rest = _objectWithoutProperties(props, _excluded);
-  var isDisabled = props.isDisabled,
+    cx = props.cx,
+    className = props.className,
+    isDisabled = props.isDisabled,
     isSelected = props.isSelected,
     isFocused = props.isFocused;
-
-  // prop assignment
-  var newProps = _objectSpread(_objectSpread({}, innerProps), {}, {
+  var classNames = useMemo(function () {
+    return cx({
+      option: true,
+      'option--is-disabled': isDisabled,
+      'option--is-focused': isFocused,
+      'option--is-selected': isSelected
+    }, className);
+  }, [cx, isDisabled, isFocused, isSelected, className]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax([optionStyles.default, isFocused && optionStyles.focused, isDisabled && optionStyles.disabled, classNames]),
+    ref: innerRef,
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp,
     onMouseLeave: onMouseUp
-  });
-  var _getPrimitiveStyles = getPrimitiveStyles(_objectSpread({
-      getStyles: getStyles
-    }, rest)),
-    styles = _getPrimitiveStyles.styles,
-    classes = _getPrimitiveStyles.classes;
-  var isVoiceOver = isAppleDevice() &&
-  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  fg('design_system_select-a11y-improvement');
-  return (
-    // These need to remain this way because `react-select` passes props with
-    // styles inside, and that must be done dynamically.
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    jsx("div", _extends({
-      css: styles,
-      className: classes,
-      ref: innerRef
-    }, newProps), jsx("div", {
-      css: [baseIconStyles,
-      // Here we are adding a border to the Checkbox and Radio SVG icons
-      // This is an a11y fix for Select only for now but it may be rolled
-      // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      {
-        // This can eventually be changed to static styles that are
-        // applied conditionally (e.g. `isActive && activeBorderStyles`),
-        // but considering there are multiple instances of `react-select`
-        // requiring styles to be generated dynamically, it seemed like a
-        // low priority.
-        // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-        '& svg rect, & svg circle:first-of-type': {
-          stroke: getBorderColor({
-            isActive: isActive,
-            isDisabled: isDisabled,
-            isSelected: isSelected
-          })
-        }
-      }]
-    }, !!Icon ? jsx(Icon, {
-      label: "",
-      primaryColor: getPrimaryColor({
-        isDisabled: isDisabled,
-        isSelected: isSelected,
-        isFocused: isFocused,
-        isActive: isActive
-      }),
-      secondaryColor: getSecondaryColor({
-        isDisabled: isDisabled,
-        isSelected: isSelected,
-        isActive: isActive
-      }),
-      isFacadeDisabled: true
-    }) : null), jsx("div", {
-      css: baseOptionStyles
-    }, children, isVoiceOver && (isSelected || isDisabled) && jsx(VisuallyHidden, null, "".concat(isSelected ? ',selected' : '').concat(isDisabled ? ',dimmed' : ''))))
-  );
+  }, innerProps), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _4cvr1h6o _1o9zidpf _y4ti1b66 _16cu892t _1xci892t _59qxe4h9 _8y3xe4h9", isSelected || isActive || isDisabled ? iconStyles.inherit : iconStyles.default])
+  }, !!Icon ? /*#__PURE__*/React.createElement(Icon, {
+    label: "",
+    primaryColor: getPrimaryColor({
+      isDisabled: isDisabled,
+      isSelected: isSelected,
+      isFocused: isFocused,
+      isActive: isActive
+    }),
+    secondaryColor: getSecondaryColor({
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }),
+    isFacadeDisabled: true
+  }) : null), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlkb7n _1reo15vq _1bto1l2s _o5721q9c"])
+  }, children));
 };
 var NewCheckboxIcon = function NewCheckboxIcon(props) {
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(PrimitiveSVGIcon, props, jsx("g", {
+    React.createElement(PrimitiveSVGIcon, props, /*#__PURE__*/React.createElement("g", {
       fillRule: "evenodd"
-    }, jsx("rect", {
+    }, /*#__PURE__*/React.createElement("rect", {
       x: "5.5",
       y: "5.5",
       width: "13",
       height: "13",
       rx: "1.5",
       fill: "currentColor"
-    }), jsx("path", {
+    }), /*#__PURE__*/React.createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: "M16.3262 9.48011L15.1738 8.51984L10.75 13.8284L8.82616 11.5198L7.67383 12.4801L10.1738 15.4801C10.3163 15.6511 10.5274 15.75 10.75 15.75C10.9726 15.75 11.1837 15.6511 11.3262 15.4801L16.3262 9.48011Z",
@@ -231,16 +135,17 @@ var NewCheckboxIcon = function NewCheckboxIcon(props) {
 };
 var NewRadioIcon = function NewRadioIcon(props) {
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(PrimitiveSVGIcon, props, jsx("g", {
+    React.createElement(PrimitiveSVGIcon, props, /*#__PURE__*/React.createElement("g", {
       fillRule: "evenodd"
-    }, jsx("circle", {
+    }, /*#__PURE__*/React.createElement("circle", {
       cx: "12",
       cy: "12",
       r: "6.75",
       fill: "currentColor",
       strokeWidth: "1.5"
-    }), jsx("circle", {
+    }), /*#__PURE__*/React.createElement("circle", {
       cx: "12",
       cy: "12",
       r: "3",
@@ -252,10 +157,8 @@ var NewRadioIcon = function NewRadioIcon(props) {
 /**
  * __Checkbox option__
  */
-export var CheckboxOption = function CheckboxOption(props
-// ): JSX.Element => <ControlOption<OptionT, true> Icon={CheckboxIcon} {...props} />;
-) {
-  return jsx(ControlOption, _extends({
+export var CheckboxOption = function CheckboxOption(props) {
+  return /*#__PURE__*/React.createElement(ControlOption, _extends({
     Icon:
     // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
     fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? NewCheckboxIcon :
@@ -270,9 +173,10 @@ export var CheckboxOption = function CheckboxOption(props
  */
 export var RadioOption = function RadioOption(props) {
   return (
+    /*#__PURE__*/
     // TODO https://product-fabric.atlassian.net/browse/DSP-20769
     // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons, @repo/internal/react/no-unsafe-spread-props
-    jsx(ControlOption, _extends({
+    React.createElement(ControlOption, _extends({
       Icon:
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
       fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? NewRadioIcon :

package/dist/types/CountrySelect.d.ts

@@ -1,10 +1,6 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { groupedCountries } from './data/countries';
 import { type SelectProps } from './types';
 type Country = (typeof groupedCountries)[number]['options'][number];
-declare const CountrySelect: (props: SelectProps<Country>) => jsx.JSX.Element;
+declare const CountrySelect: (props: SelectProps<Country>) => JSX.Element;
 export default CountrySelect;

package/dist/types/PopupSelect/PopupSelect.d.ts

@@ -111,15 +111,11 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         focusLockEnabled: boolean;
         isOpen: boolean;
         mergedComponents: {
-            /**
-             * If `false`, renders a select with no search field. If `true`, renders a search field in the select when the
-             * number of options exceeds the `searchThreshold`. The default is `true`.
-             */
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
-            DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element;
-            Menu: ({ children, innerProps }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;
-            ClearIndicator: (props: import("@atlaskit/react-select").ClearIndicatorProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
-            MultiValueRemove: (props: import("@atlaskit/react-select").MultiValueRemoveProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
+            DropdownIndicator: () => JSX.Element;
+            Menu: ({ children, innerProps }: import("../types").MenuProps<OptionType, boolean>) => JSX.Element;
+            ClearIndicator: (props: import("@atlaskit/react-select").ClearIndicatorProps<unknown, boolean, GroupBase<unknown>>) => JSX.Element;
+            MultiValueRemove: (props: import("@atlaskit/react-select").MultiValueRemoveProps<unknown, boolean, GroupBase<unknown>>) => JSX.Element;
         };
         mergedPopperProps: PopperPropsNoChildren<string>;
     };

package/dist/types/PopupSelect/components.d.ts

@@ -3,11 +3,8 @@
  * @jsx jsx
  */
 import { type CSSProperties, type FC, type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 import { type ClearIndicatorProps, type ControlProps, type MenuProps, type MultiValueRemoveProps, type OptionType } from '../types';
 interface MenuDialogProps {
-    maxWidth?: number | string;
-    minWidth?: number | string;
     style: CSSProperties;
     children: ReactNode;
     id: string;
@@ -16,7 +13,6 @@ interface MenuDialogProps {
 /**
  * __Menu dialog__
  * Wrapper for PopupSelect component.
- *
  */
 export declare const MenuDialog: import("react").ForwardRefExoticComponent<MenuDialogProps & import("react").RefAttributes<HTMLDivElement>>;
 /**
@@ -26,9 +22,9 @@ export declare const MenuDialog: import("react").ForwardRefExoticComponent<MenuD
 export declare const DummyControl: FC<ControlProps<OptionType, boolean>>;
 export declare const defaultComponents: {
     Control: FC<ControlProps<OptionType, boolean>>;
-    DropdownIndicator: () => jsx.JSX.Element;
-    Menu: ({ children, innerProps }: MenuProps<OptionType, boolean>) => jsx.JSX.Element;
-    ClearIndicator: (props: ClearIndicatorProps) => jsx.JSX.Element;
-    MultiValueRemove: (props: MultiValueRemoveProps) => jsx.JSX.Element;
+    DropdownIndicator: () => JSX.Element;
+    Menu: ({ children, innerProps }: MenuProps<OptionType, boolean>) => JSX.Element;
+    ClearIndicator: (props: ClearIndicatorProps) => JSX.Element;
+    MultiValueRemove: (props: MultiValueRemoveProps) => JSX.Element;
 };
 export {};

package/dist/types/components/input-options.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { jsx } from '@emotion/react';
 import { type OptionProps, type OptionType } from '../types';
 /**
  * __Checkbox option__
@@ -8,4 +7,4 @@ export declare const CheckboxOption: <OptionT extends OptionType>(props: OptionP
 /**
  * __Radio option__
  */
-export declare const RadioOption: <OptionT extends OptionType>(props: OptionProps<OptionT, false>) => jsx.JSX.Element;
+export declare const RadioOption: <OptionT extends OptionType>(props: OptionProps<OptionT, false>) => JSX.Element;

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

@@ -1,10 +1,6 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { groupedCountries } from './data/countries';
 import { type SelectProps } from './types';
 type Country = (typeof groupedCountries)[number]['options'][number];
-declare const CountrySelect: (props: SelectProps<Country>) => jsx.JSX.Element;
+declare const CountrySelect: (props: SelectProps<Country>) => JSX.Element;
 export default CountrySelect;

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

@@ -111,15 +111,11 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         focusLockEnabled: boolean;
         isOpen: boolean;
         mergedComponents: {
-            /**
-             * If `false`, renders a select with no search field. If `true`, renders a search field in the select when the
-             * number of options exceeds the `searchThreshold`. The default is `true`.
-             */
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
-            DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element;
-            Menu: ({ children, innerProps }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;
-            ClearIndicator: (props: import("@atlaskit/react-select").ClearIndicatorProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
-            MultiValueRemove: (props: import("@atlaskit/react-select").MultiValueRemoveProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
+            DropdownIndicator: () => JSX.Element;
+            Menu: ({ children, innerProps }: import("../types").MenuProps<OptionType, boolean>) => JSX.Element;
+            ClearIndicator: (props: import("@atlaskit/react-select").ClearIndicatorProps<unknown, boolean, GroupBase<unknown>>) => JSX.Element;
+            MultiValueRemove: (props: import("@atlaskit/react-select").MultiValueRemoveProps<unknown, boolean, GroupBase<unknown>>) => JSX.Element;
         };
         mergedPopperProps: PopperPropsNoChildren<string>;
     };

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

@@ -3,11 +3,8 @@
  * @jsx jsx
  */
 import { type CSSProperties, type FC, type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 import { type ClearIndicatorProps, type ControlProps, type MenuProps, type MultiValueRemoveProps, type OptionType } from '../types';
 interface MenuDialogProps {
-    maxWidth?: number | string;
-    minWidth?: number | string;
     style: CSSProperties;
     children: ReactNode;
     id: string;
@@ -16,7 +13,6 @@ interface MenuDialogProps {
 /**
  * __Menu dialog__
  * Wrapper for PopupSelect component.
- *
  */
 export declare const MenuDialog: import("react").ForwardRefExoticComponent<MenuDialogProps & import("react").RefAttributes<HTMLDivElement>>;
 /**
@@ -26,9 +22,9 @@ export declare const MenuDialog: import("react").ForwardRefExoticComponent<MenuD
 export declare const DummyControl: FC<ControlProps<OptionType, boolean>>;
 export declare const defaultComponents: {
     Control: FC<ControlProps<OptionType, boolean>>;
-    DropdownIndicator: () => jsx.JSX.Element;
-    Menu: ({ children, innerProps }: MenuProps<OptionType, boolean>) => jsx.JSX.Element;
-    ClearIndicator: (props: ClearIndicatorProps) => jsx.JSX.Element;
-    MultiValueRemove: (props: MultiValueRemoveProps) => jsx.JSX.Element;
+    DropdownIndicator: () => JSX.Element;
+    Menu: ({ children, innerProps }: MenuProps<OptionType, boolean>) => JSX.Element;
+    ClearIndicator: (props: ClearIndicatorProps) => JSX.Element;
+    MultiValueRemove: (props: MultiValueRemoveProps) => JSX.Element;
 };
 export {};

package/dist/types-ts4.5/components/input-options.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { jsx } from '@emotion/react';
 import { type OptionProps, type OptionType } from '../types';
 /**
  * __Checkbox option__
@@ -8,4 +7,4 @@ export declare const CheckboxOption: <OptionT extends OptionType>(props: OptionP
 /**
  * __Radio option__
  */
-export declare const RadioOption: <OptionT extends OptionType>(props: OptionProps<OptionT, false>) => jsx.JSX.Element;
+export declare const RadioOption: <OptionT extends OptionType>(props: OptionProps<OptionT, false>) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "19.0.0",
+	"version": "20.0.0",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,16 +43,16 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^24.0.0",
+		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.0.0",
+		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/react-select": "^2.0.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/tokens": "^4.2.0",
 		"@atlaskit/visually-hidden": "^2.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1",
+		"@compiled/react": "^0.18.2",
 		"@popperjs/core": "^2.11.8",
 		"bind-event-listener": "^3.0.0",
 		"react-focus-lock": "^2.9.5",
@@ -68,13 +68,12 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/checkbox": "^16.0.0",
+		"@atlaskit/checkbox": "^17.0.0",
 		"@atlaskit/modal-dialog": "^13.0.0",
 		"@atlaskit/radio": "^8.0.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
-		"@emotion/styled": "^11.0.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
 		"ast-types": "^0.13.3",
@@ -93,8 +92,8 @@
 			],
 			"deprecation": "no-deprecated-imports",
 			"styling": [
-				"emotion",
-				"static"
+				"static",
+				"compiled"
 			]
 		}
 	},