@atlaskit/select 19.0.0 → 20.0.0

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

@@ -1,66 +1,28 @@
+/* input-options.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RadioOption = exports.CheckboxOption = void 0;
+require("./input-options.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _deviceCheck = require("@atlaskit/ds-lib/device-check");
 var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
 var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
 var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
-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) { (0, _defineProperty2.default)(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
-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 = (0, _react2.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)
-  };
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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
@@ -89,46 +51,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 = (0, _react2.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 = (0, _react2.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) {
@@ -142,91 +79,63 @@ var ControlOption = function ControlOption(props) {
   var onMouseUp = (0, _react.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 = (0, _objectWithoutProperties2.default)(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 = (0, _react.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", (0, _extends2.default)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: (0, _runtime.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 = (0, _deviceCheck.isAppleDevice)() &&
-  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  (0, _platformFeatureFlags.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
-    (0, _react2.jsx)("div", (0, _extends2.default)({
-      css: styles,
-      className: classes,
-      ref: innerRef
-    }, newProps), (0, _react2.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 ? (0, _react2.jsx)(Icon, {
-      label: "",
-      primaryColor: getPrimaryColor({
-        isDisabled: isDisabled,
-        isSelected: isSelected,
-        isFocused: isFocused,
-        isActive: isActive
-      }),
-      secondaryColor: getSecondaryColor({
-        isDisabled: isDisabled,
-        isSelected: isSelected,
-        isActive: isActive
-      }),
-      isFacadeDisabled: true
-    }) : null), (0, _react2.jsx)("div", {
-      css: baseOptionStyles
-    }, children, isVoiceOver && (isSelected || isDisabled) && (0, _react2.jsx)(_visuallyHidden.default, null, "".concat(isSelected ? ',selected' : '').concat(isDisabled ? ',dimmed' : ''))))
-  );
+  }, innerProps), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.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: (0, _runtime.ax)(["_16jlkb7n _1reo15vq _1bto1l2s _o5721q9c"])
+  }, children));
 };
 var NewCheckboxIcon = function NewCheckboxIcon(props) {
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _react2.jsx)(_svg.default, props, (0, _react2.jsx)("g", {
+    React.createElement(_svg.default, props, /*#__PURE__*/React.createElement("g", {
       fillRule: "evenodd"
-    }, (0, _react2.jsx)("rect", {
+    }, /*#__PURE__*/React.createElement("rect", {
       x: "5.5",
       y: "5.5",
       width: "13",
       height: "13",
       rx: "1.5",
       fill: "currentColor"
-    }), (0, _react2.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",
@@ -236,16 +145,17 @@ var NewCheckboxIcon = function NewCheckboxIcon(props) {
 };
 var NewRadioIcon = function NewRadioIcon(props) {
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _react2.jsx)(_svg.default, props, (0, _react2.jsx)("g", {
+    React.createElement(_svg.default, props, /*#__PURE__*/React.createElement("g", {
       fillRule: "evenodd"
-    }, (0, _react2.jsx)("circle", {
+    }, /*#__PURE__*/React.createElement("circle", {
       cx: "12",
       cy: "12",
       r: "6.75",
       fill: "currentColor",
       strokeWidth: "1.5"
-    }), (0, _react2.jsx)("circle", {
+    }), /*#__PURE__*/React.createElement("circle", {
       cx: "12",
       cy: "12",
       r: "3",
@@ -257,10 +167,8 @@ var NewRadioIcon = function NewRadioIcon(props) {
 /**
  * __Checkbox option__
  */
-var CheckboxOption = exports.CheckboxOption = function CheckboxOption(props
-// ): JSX.Element => <ControlOption<OptionT, true> Icon={CheckboxIcon} {...props} />;
-) {
-  return (0, _react2.jsx)(ControlOption, (0, _extends2.default)({
+var CheckboxOption = exports.CheckboxOption = function CheckboxOption(props) {
+  return /*#__PURE__*/React.createElement(ControlOption, (0, _extends2.default)({
     Icon:
     // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
     (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-icon-control-migration') ? NewCheckboxIcon :
@@ -275,9 +183,10 @@ var CheckboxOption = exports.CheckboxOption = function CheckboxOption(props
  */
 var RadioOption = exports.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
-    (0, _react2.jsx)(ControlOption, (0, _extends2.default)({
+    React.createElement(ControlOption, (0, _extends2.default)({
       Icon:
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
       (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-icon-control-migration') ? NewRadioIcon :

package/dist/es2019/CountrySelect.compiled.css

@@ -0,0 +1,5 @@
+._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
+._1e0c1txw{display:flex}
+._1wyb1cby{font-size:1.125rem}
+._4cvr1h6o{align-items:center}
+._vwz4cjiy{line-height:1.2}

package/dist/es2019/CountrySelect.js

@@ -1,37 +1,25 @@
+/* CountrySelect.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./CountrySelect.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @repo/internal/fs/filename-pattern-match */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { css, jsx } from '@emotion/react';
-import { fg } from '@atlaskit/platform-feature-flags';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+import { fg } from '@atlaskit/platform-feature-flags';
 import { groupedCountries } from './data/countries';
 import Select from './Select';
 import { isCountryOptionsGrouped, onCountryOptionFocus } from './utils/country-groups-announcement';
 // custom option renderer
-const labelStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 1.2
-});
-const flagStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  fontSize: '1.125rem',
-  // emoji size
-  marginInlineEnd: "var(--ds-space-100, 8px)"
-});
+const labelStyles = null;
+const flagStyles = null;
 const Opt = ({
   children,
   icon
-}) => jsx("div", {
-  css: labelStyles
-}, jsx("span", {
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1e0c1txw _4cvr1h6o _vwz4cjiy"])
+}, /*#__PURE__*/React.createElement("span", {
   "aria-hidden": "true",
-  css: flagStyles
+  className: ax(["_1wyb1cby _12l2u2gc"])
 }, icon), children);
 
 // return the country name; used for searching
@@ -45,7 +33,7 @@ const getOptionLabel = ({
 const getOptionValue = opt => opt.abbr;
 
 // the text node of the control
-const controlLabel = opt => jsx(Opt, {
+const controlLabel = opt => /*#__PURE__*/React.createElement(Opt, {
   icon: opt.icon
 }, opt.abbr.toUpperCase());
 // the text node for an option
@@ -54,7 +42,7 @@ const optionLabel = ({
   code,
   icon,
   name
-}) => jsx(Opt, {
+}) => /*#__PURE__*/React.createElement(Opt, {
   icon: icon
 }, getOptionLabel({
   abbr,
@@ -74,7 +62,7 @@ const CountrySelect = props => {
     options
   } = props;
   const countryOptions = options || groupedCountries;
-  return jsx(Select, _extends({
+  return /*#__PURE__*/React.createElement(Select, _extends({
     isClearable: false,
     formatOptionLabel: formatOptionLabel,
     getOptionLabel: getOptionLabel,

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -386,12 +386,15 @@ export default class PopupSelect extends PureComponent {
         ref,
         style
       }) => /*#__PURE__*/React.createElement(MenuDialog
+      // There is not a limited amount of values for the widths, so they need to remain dynamic.
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       , {
-        style: style,
+        style: {
+          ...style,
+          maxWidth: maxMenuWidth,
+          minWidth: minMenuWidth
+        },
         "data-placement": placement,
-        minWidth: minMenuWidth,
-        maxWidth: maxMenuWidth,
         id: id,
         testId: testId,
         ref: this.resolveMenuRef(ref)

package/dist/es2019/PopupSelect/components.compiled.css

@@ -0,0 +1,11 @@
+
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
+._16qs1s1a{box-shadow:var(--ds-shadow-overlay,0 0 0 1px rgba(9,30,66,.13),0 4px 11px rgba(9,30,66,.13))}
+._1bsbzwfg{width:2pc}
+._1pby16oo{z-index:510}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._y3gn1h6o{text-align:center}
+._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}

package/dist/es2019/PopupSelect/components.js

@@ -1,12 +1,9 @@
+/* components.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./components.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import SearchIcon from '@atlaskit/icon/core/migration/search--editor-search';
 import { components } from '@atlaskit/react-select';
 import { N40A } from '@atlaskit/theme/colors';
@@ -17,68 +14,48 @@ import VisuallyHidden from '@atlaskit/visually-hidden';
 // Styled Components
 // ==============================
 
-const menuDialogStyles = css({
-  zIndex: layers.modal(),
-  backgroundColor: "var(--ds-surface-overlay, white)",
-  borderRadius: "var(--ds-border-radius-100, 4px)",
-  boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N40A}, 0 4px 11px ${N40A}`})`
-});
+const menuDialogStyles = null;
 
 /**
  * __Menu dialog__
  * Wrapper for PopupSelect component.
- *
  */
 export const MenuDialog = /*#__PURE__*/forwardRef(({
-  maxWidth,
-  minWidth,
   children,
   id,
   style,
   testId
-}, ref) => jsx("div", {
-  ref: ref,
-  css: [menuDialogStyles,
-  // There is not a limited amount of values for the widths, so they need
-  // to remain dynamic.
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-  {
-    maxWidth,
-    minWidth
-  }]
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-  ,
-  style: style,
-  id: id,
-  "data-testid": testId && `${testId}--menu`
-}, children));
+}, ref) => {
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    style: style,
+    id: id,
+    "data-testid": testId && `${testId}--menu`,
+    className: ax(["_2rkoiti9 _1pby16oo _bfhk1bhr _16qs1s1a"])
+  }, children);
+});
 
 // ==============================
 // Custom Components
 // ==============================
 
-const dropdownStyles = css({
-  width: 32,
-  marginInlineEnd: "var(--ds-space-025, 2px)",
-  textAlign: 'center'
-});
-const DropdownIndicator = () => jsx("div", {
-  css: dropdownStyles
-}, jsx(SearchIcon, {
+const dropdownStyles = null;
+const DropdownIndicator = () => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1bsbzwfg _12l2v77o _y3gn1h6o"])
+}, /*#__PURE__*/React.createElement(SearchIcon, {
   color: "currentColor",
   label: ""
 }));
-const controlStyles = css({
-  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-050, 4px)"}`
-});
+const controlStyles = null;
 const Control = ({
   innerRef,
   innerProps,
   ...props
-}) => jsx("div", {
+}) => /*#__PURE__*/React.createElement("div", {
   ref: innerRef,
-  css: controlStyles
-}, jsx(components.Control, _extends({}, props, {
+  className: ax(["_85i51b66 _1q51u2gc _y4tiu2gc _bozgu2gc"])
+}, /*#__PURE__*/React.createElement(components.Control, _extends({}, props, {
   innerProps: innerProps
 })));
 
@@ -86,15 +63,20 @@ const Control = ({
  * __Dummy control__
  * Overrides the default DummyControl component in Select.
  */
-export const DummyControl = props => jsx(VisuallyHidden, null, jsx(components.Control, props));
+export const DummyControl = props => /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement(components.Control, props));
 
 // NOTE `props` intentionally omitted from `Fragment`
 const Menu = ({
   children,
   innerProps
-}) => jsx("div", innerProps, children);
-const ClearIndicator = props => jsx(components.ClearIndicator, props);
-const MultiValueRemove = props => jsx(components.MultiValueRemove, props);
+}) => /*#__PURE__*/React.createElement("div", innerProps, children);
+
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+const ClearIndicator = props => /*#__PURE__*/React.createElement(components.ClearIndicator, props);
+const MultiValueRemove = props =>
+/*#__PURE__*/
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+React.createElement(components.MultiValueRemove, props);
 export const defaultComponents = {
   Control,
   DropdownIndicator,

package/dist/es2019/Select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import AsyncSelect from '@atlaskit/react-select/async';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "19.0.0";
+const packageVersion = "20.0.0";
 export const SelectWithoutAnalytics = createSelect(AsyncSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/components/input-options.compiled.css

@@ -0,0 +1,28 @@
+._16cu892t svg circle:first-of-type, ._1xci892t svg rect{stroke-linejoin:round}
+._16jlkb7n{flex-grow:1}
+._16qs1kw7{box-shadow:inherit}
+._16qsn8hf{box-shadow:inset 2px 0 0 var(--ds-border-focused,#388bff)}
+._18ql1j7p{-webkit-tap-highlight-color:rgba(0,0,0,0)}
+._1bsb1osq{width:100%}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1reo15vq{overflow-x:hidden}
+._1u9j1elr svg circle:first-of-type, ._1gqp1elr svg rect{stroke:var(--ds-border-input,#8590a2)}
+._1u9j1r31 svg circle:first-of-type, ._1gqp1r31 svg rect{stroke:currentColor}
+._4cvr1h6o{align-items:center}
+._59qxe4h9 svg circle:first-of-type, ._8y3xe4h9 svg rect{stroke-width:var(--ds-border-width,1px)}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._bfhk166n{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._bfhk1j28{background-color:transparent}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
+._o5721q9c{white-space:nowrap}
+._syaz15gi{color:var(--ds-text-disabled,inherit)}
+._syaz1kw7{color:inherit}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vchhusvi{box-sizing:border-box}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
+@media screen and (-ms-high-contrast:active){._112e1vrj{border-inline-start:2px solid transparent}}