@atlaskit/react-select 2.7.5 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @atlaskit/react-select
 
+## 3.0.0
+
+### Major Changes
+
+- [#155023](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/155023)
+  [`7a305b4f49968`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7a305b4f49968) -
+  [ux] Migrated underlying `react-select` implementation from `@emotion/react` to `@compiled/react`
+  to improve performance, align with the rest of the Atlaskit tech stack, and support React 18
+  Streaming SSR. Style customization should now be applied via the `components` prop with the new
+  `xcss` prop, which allows for safe and bounded style overrides. The `styles` prop is still
+  supported for most inline styles, but pseudo-classes and advanced selectors are no longer
+  supported and will be ignored.
+
+  If you use the `styles` prop with selectors like `:hover`, `:focus`, `:active`, `:disabled`,
+  `:before`, `:after`, attribute selectors, combinators, at-rules, or similar, you must migrate to
+  the new `components` API and use the `xcss` prop. See the
+  [examples](https://atlassian.design/components/eslint-plugin-design-system/enforce-inline-styles-in-select/usage)
+  for details.
+
+  This is a breaking change for any consumers relying on advanced selectors in the `styles` prop.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.7.6
+
+### Patch Changes
+
+- [#175058](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175058)
+  [`cfb3a1596d972`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cfb3a1596d972) -
+  Add same class names in emotion compoent as compiled select for GA
+- Updated dependencies
+
 ## 2.7.5
 
 ### Patch Changes

package/dist/cjs/components/containers.js

@@ -8,7 +8,6 @@ exports.valueContainerCSS = exports.indicatorsContainerCSS = exports.containerCS
 var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _containers = require("../compiled/components/containers");
-var _containers2 = require("../emotion/components/containers");
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 
 // ==============================
@@ -16,12 +15,12 @@ var _containers2 = require("../emotion/components/containers");
 // ==============================
 
 var containerCSS = exports.containerCSS = function containerCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _containers.containerCSS)() : (0, _containers2.containerCSS)(props);
+  return (0, _containers.containerCSS)();
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var SelectContainer = exports.SelectContainer = function SelectContainer(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_containers.SelectContainer, props) : /*#__PURE__*/_react.default.createElement(_containers2.SelectContainer, props);
+  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_containers.SelectContainer, props) : /*#__PURE__*/_react.default.createElement(_containers.SelectContainer, props);
 };
 
 // ==============================
@@ -29,12 +28,12 @@ var SelectContainer = exports.SelectContainer = function SelectContainer(props)
 // ==============================
 
 var valueContainerCSS = exports.valueContainerCSS = function valueContainerCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _containers.valueContainerCSS)() : (0, _containers2.valueContainerCSS)(props);
+  return (0, _containers.valueContainerCSS)();
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var ValueContainer = exports.ValueContainer = function ValueContainer(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_containers.ValueContainer, props) : /*#__PURE__*/_react.default.createElement(_containers2.ValueContainer, props);
+  return /*#__PURE__*/_react.default.createElement(_containers.ValueContainer, props);
 };
 
 // ==============================
@@ -42,10 +41,10 @@ var ValueContainer = exports.ValueContainer = function ValueContainer(props) {
 // ==============================
 
 var indicatorsContainerCSS = exports.indicatorsContainerCSS = function indicatorsContainerCSS() {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _containers.indicatorsContainerCSS)() : (0, _containers2.indicatorsContainerCSS)();
+  return (0, _containers.indicatorsContainerCSS)();
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var IndicatorsContainer = exports.IndicatorsContainer = function IndicatorsContainer(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_containers.IndicatorsContainer, props) : /*#__PURE__*/_react.default.createElement(_containers2.IndicatorsContainer, props);
+  return /*#__PURE__*/_react.default.createElement(_containers.IndicatorsContainer, props);
 };

package/dist/cjs/components/control.js

@@ -7,17 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.css = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _control = _interopRequireWildcard(require("../compiled/components/control"));
-var _control2 = _interopRequireWildcard(require("../emotion/components/control"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 
 var css = exports.css = function css(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _control.css)() : (0, _control2.css)(props);
+  return (0, _control.css)();
 };
 var Control = function Control(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_control.default, props) : /*#__PURE__*/_react.default.createElement(_control2.default, props);
+  return /*#__PURE__*/_react.default.createElement(_control.default, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/group.js

@@ -7,25 +7,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.groupHeadingCSS = exports.groupCSS = exports.default = exports.GroupHeading = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _group = _interopRequireWildcard(require("../compiled/components/group"));
-var _group2 = _interopRequireWildcard(require("../emotion/components/group"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 
 var groupCSS = exports.groupCSS = function groupCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _group.groupCSS)() : (0, _group2.groupCSS)(props);
+  return (0, _group.groupCSS)();
 };
 var Group = function Group(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_group.default, props) : /*#__PURE__*/_react.default.createElement(_group2.default, props);
+  return /*#__PURE__*/_react.default.createElement(_group.default, props);
 };
 var groupHeadingCSS = exports.groupHeadingCSS = function groupHeadingCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _group.groupHeadingCSS)() : (0, _group2.groupHeadingCSS)(props);
+  return (0, _group.groupHeadingCSS)();
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var GroupHeading = exports.GroupHeading = function GroupHeading(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_group.GroupHeading, props) : /*#__PURE__*/_react.default.createElement(_group2.GroupHeading, props);
+  return /*#__PURE__*/_react.default.createElement(_group.GroupHeading, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/indicators.js

@@ -6,9 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.loadingIndicatorCSS = exports.dropdownIndicatorCSS = exports.clearIndicatorCSS = exports.LoadingIndicator = exports.DropdownIndicator = exports.ClearIndicator = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _indicators = require("../compiled/components/indicators");
-var _indicators2 = require("../emotion/components/indicators");
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 
 // ==============================
@@ -16,20 +14,20 @@ var _indicators2 = require("../emotion/components/indicators");
 // ==============================
 
 var dropdownIndicatorCSS = exports.dropdownIndicatorCSS = function dropdownIndicatorCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _indicators.dropdownIndicatorCSS)() : (0, _indicators2.dropdownIndicatorCSS)(props);
+  return (0, _indicators.dropdownIndicatorCSS)();
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var DropdownIndicator = exports.DropdownIndicator = function DropdownIndicator(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_indicators.DropdownIndicator, props) : /*#__PURE__*/_react.default.createElement(_indicators2.DropdownIndicator, props);
+  return /*#__PURE__*/_react.default.createElement(_indicators.DropdownIndicator, props);
 };
 var clearIndicatorCSS = exports.clearIndicatorCSS = function clearIndicatorCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _indicators.clearIndicatorCSS)() : (0, _indicators2.clearIndicatorCSS)(props);
+  return (0, _indicators.clearIndicatorCSS)();
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var ClearIndicator = exports.ClearIndicator = function ClearIndicator(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_indicators.ClearIndicator, props) : /*#__PURE__*/_react.default.createElement(_indicators2.ClearIndicator, props);
+  return /*#__PURE__*/_react.default.createElement(_indicators.ClearIndicator, props);
 };
 
 // ==============================
@@ -37,9 +35,9 @@ var ClearIndicator = exports.ClearIndicator = function ClearIndicator(props) {
 // ==============================
 
 var loadingIndicatorCSS = exports.loadingIndicatorCSS = function loadingIndicatorCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _indicators.loadingIndicatorCSS)() : (0, _indicators2.loadingIndicatorCSS)(props);
+  return (0, _indicators.loadingIndicatorCSS)();
 };
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var LoadingIndicator = exports.LoadingIndicator = function LoadingIndicator(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_indicators.LoadingIndicator, props) : /*#__PURE__*/_react.default.createElement(_indicators2.LoadingIndicator, props);
+  return /*#__PURE__*/_react.default.createElement(_indicators.LoadingIndicator, props);
 };

package/dist/cjs/components/input.js

@@ -7,17 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.inputCSS = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _input = _interopRequireWildcard(require("../compiled/components/input"));
-var _input2 = _interopRequireWildcard(require("../emotion/components/input"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 
 var inputCSS = exports.inputCSS = function inputCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _input.inputCSS)() : (0, _input2.inputCSS)(props);
+  return (0, _input.inputCSS)();
 };
 var Input = function Input(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_input.default, props) : /*#__PURE__*/_react.default.createElement(_input2.default, props);
+  return /*#__PURE__*/_react.default.createElement(_input.default, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/internal/a11y-text.js

@@ -6,12 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _a11yText = _interopRequireDefault(require("../../compiled/components/internal/a11y-text"));
-var _a11yText2 = _interopRequireDefault(require("../../emotion/components/internal/a11y-text"));
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 
 var A11yText = function A11yText(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_a11yText.default, props) : /*#__PURE__*/_react.default.createElement(_a11yText2.default, props);
+  return /*#__PURE__*/_react.default.createElement(_a11yText.default, props);
 };
 var _default = exports.default = A11yText;

package/dist/cjs/components/internal/dummy-input.js

@@ -6,11 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = DummyInput;
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _dummyInput = _interopRequireDefault(require("../../compiled/components/internal/dummy-input"));
-var _dummyInput2 = _interopRequireDefault(require("../../emotion/components/internal/dummy-input"));
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 
 function DummyInput(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_dummyInput.default, props) : /*#__PURE__*/_react.default.createElement(_dummyInput2.default, props);
+  return /*#__PURE__*/_react.default.createElement(_dummyInput.default, props);
 }

package/dist/cjs/components/internal/required-input.js

@@ -6,13 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _requiredInput = _interopRequireDefault(require("../../compiled/components/internal/required-input"));
-var _requiredInput2 = _interopRequireDefault(require("../../emotion/components/internal/required-input"));
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 
 var RequiredInput = function RequiredInput(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_requiredInput.default, props) : /*#__PURE__*/_react.default.createElement(_requiredInput2.default, props);
+  return /*#__PURE__*/_react.default.createElement(_requiredInput.default, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/live-region.js

@@ -6,9 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _liveRegion = _interopRequireDefault(require("../compiled/components/live-region"));
-var _liveRegion2 = _interopRequireDefault(require("../emotion/components/live-region"));
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 
 // ==============================
@@ -16,7 +14,7 @@ var _liveRegion2 = _interopRequireDefault(require("../emotion/components/live-re
 // ==============================
 
 var LiveRegion = function LiveRegion(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_liveRegion.default, props) : /*#__PURE__*/_react.default.createElement(_liveRegion2.default, props);
+  return /*#__PURE__*/_react.default.createElement(_liveRegion.default, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/menu.js

@@ -8,9 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.noOptionsMessageCSS = exports.menuPortalCSS = exports.menuListCSS = exports.menuCSS = exports.loadingMessageCSS = exports.default = exports.NoOptionsMessage = exports.MenuPortal = exports.MenuPlacer = exports.MenuList = exports.LoadingMessage = void 0;
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menu = _interopRequireWildcard(require("../compiled/components/menu"));
-var _menu2 = _interopRequireWildcard(require("../emotion/components/menu"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 
@@ -18,16 +16,16 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // ------------------------------
 
 var menuCSS = exports.menuCSS = function menuCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _menu.menuCSS)() : (0, _menu2.menuCSS)(props);
+  return (0, _menu.menuCSS)();
 };
 
 // NOTE: internal only
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var MenuPlacer = exports.MenuPlacer = function MenuPlacer(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_menu.MenuPlacer, props) : /*#__PURE__*/_react.default.createElement(_menu2.MenuPlacer, props);
+  return /*#__PURE__*/_react.default.createElement(_menu.MenuPlacer, props);
 };
 var Menu = function Menu(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_menu.default, props) : /*#__PURE__*/_react.default.createElement(_menu2.default, props);
+  return /*#__PURE__*/_react.default.createElement(_menu.default, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -35,12 +33,12 @@ var _default = exports.default = Menu; // ==============================
 // Menu List
 // ==============================
 var menuListCSS = exports.menuListCSS = function menuListCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _menu.menuListCSS)() : (0, _menu2.menuListCSS)(props);
+  return (0, _menu.menuListCSS)();
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var MenuList = exports.MenuList = function MenuList(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_menu.MenuList, props) : /*#__PURE__*/_react.default.createElement(_menu2.MenuList, props);
+  return /*#__PURE__*/_react.default.createElement(_menu.MenuList, props);
 };
 
 // ==============================
@@ -58,12 +56,12 @@ var noOptionsMessageCSS = exports.noOptionsMessageCSS = noticeCSS;
 var loadingMessageCSS = exports.loadingMessageCSS = noticeCSS;
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var NoOptionsMessage = exports.NoOptionsMessage = function NoOptionsMessage(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_menu.NoOptionsMessage, props) : /*#__PURE__*/_react.default.createElement(_menu2.NoOptionsMessage, props);
+  return /*#__PURE__*/_react.default.createElement(_menu.NoOptionsMessage, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var LoadingMessage = exports.LoadingMessage = function LoadingMessage(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_menu.LoadingMessage, props) : /*#__PURE__*/_react.default.createElement(_menu2.LoadingMessage, props);
+  return /*#__PURE__*/_react.default.createElement(_menu.LoadingMessage, props);
 };
 
 // ==============================
@@ -71,10 +69,10 @@ var LoadingMessage = exports.LoadingMessage = function LoadingMessage(props) {
 // ==============================
 
 var menuPortalCSS = exports.menuPortalCSS = function menuPortalCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _menu.menuPortalCSS)() : (0, _menu2.menuPortalCSS)(props);
+  return (0, _menu.menuPortalCSS)();
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var MenuPortal = exports.MenuPortal = function MenuPortal(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_menu.MenuPortal, props) : /*#__PURE__*/_react.default.createElement(_menu2.MenuPortal, props);
+  return /*#__PURE__*/_react.default.createElement(_menu.MenuPortal, props);
 };

package/dist/cjs/components/multi-value.js

@@ -9,38 +9,33 @@ exports.MultiValueLabel = exports.MultiValueContainer = void 0;
 exports.MultiValueRemove = MultiValueRemove;
 exports.multiValueRemoveCSS = exports.multiValueLabelCSS = exports.multiValueCSS = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _multiValue = _interopRequireWildcard(require("../compiled/components/multi-value"));
-var _multiValue2 = _interopRequireWildcard(require("../emotion/components/multi-value"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 
 var multiValueCSS = exports.multiValueCSS = function multiValueCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _multiValue.multiValueCSS)() : (0, _multiValue2.multiValueCSS)(props);
+  return (0, _multiValue.multiValueCSS)();
 };
 var multiValueLabelCSS = exports.multiValueLabelCSS = function multiValueLabelCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _multiValue.multiValueLabelCSS)() : (0, _multiValue2.multiValueLabelCSS)(props);
+  return (0, _multiValue.multiValueLabelCSS)();
 };
 var multiValueRemoveCSS = exports.multiValueRemoveCSS = function multiValueRemoveCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _multiValue.multiValueRemoveCSS)() : (0, _multiValue2.multiValueRemoveCSS)(props);
+  return (0, _multiValue.multiValueRemoveCSS)();
 };
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var MultiValueContainer = exports.MultiValueContainer = function MultiValueContainer(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_multiValue.MultiValueContainer, props) : /*#__PURE__*/_react.default.createElement(_multiValue2.MultiValueContainer, props);
+  return /*#__PURE__*/_react.default.createElement(_multiValue.MultiValueContainer, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var MultiValueLabel = exports.MultiValueLabel = function MultiValueLabel(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_multiValue.MultiValueLabel, props) : /*#__PURE__*/_react.default.createElement(_multiValue2.MultiValueLabel, props);
+  return /*#__PURE__*/_react.default.createElement(_multiValue.MultiValueLabel, props);
 };
 function MultiValueRemove(props) {
-  return (
-    // The Remove button is intentionally excluded from the tab order, please avoid assigning a non-negative tabIndex to it. Context: https://hello.atlassian.net/wiki/spaces/A11YKB/pages/3031993460/Clear+Options+on+an+Input+Field
-    (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_multiValue.MultiValueRemove, props) : /*#__PURE__*/_react.default.createElement(_multiValue2.MultiValueRemove, props)
-  );
+  return /*#__PURE__*/_react.default.createElement(_multiValue.MultiValueRemove, props);
 }
 var MultiValue = function MultiValue(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_multiValue.default, props) : /*#__PURE__*/_react.default.createElement(_multiValue2.default, props);
+  return /*#__PURE__*/_react.default.createElement(_multiValue.default, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/option.js

@@ -7,17 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.optionCSS = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _option = _interopRequireWildcard(require("../compiled/components/option"));
-var _option2 = _interopRequireWildcard(require("../emotion/components/option"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 
 var optionCSS = exports.optionCSS = function optionCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _option.optionCSS)() : (0, _option2.optionCSS)(props);
+  return (0, _option.optionCSS)();
 };
 var Option = function Option(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_option.default, props) : /*#__PURE__*/_react.default.createElement(_option2.default, props);
+  return /*#__PURE__*/_react.default.createElement(_option.default, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/placeholder.js

@@ -7,17 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.placeholderCSS = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _placeholder = _interopRequireWildcard(require("../compiled/components/placeholder"));
-var _placeholder2 = _interopRequireWildcard(require("../emotion/components/placeholder"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 
 var placeholderCSS = exports.placeholderCSS = function placeholderCSS(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _placeholder.placeholderCSS)() : (0, _placeholder2.placeholderCSS)(props);
+  return (0, _placeholder.placeholderCSS)();
 };
 var Placeholder = function Placeholder(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_placeholder.default, props) : /*#__PURE__*/_react.default.createElement(_placeholder2.default, props);
+  return /*#__PURE__*/_react.default.createElement(_placeholder.default, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/single-value.js

@@ -7,17 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.css = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _singleValue = _interopRequireWildcard(require("../compiled/components/single-value"));
-var _singleValue2 = _interopRequireWildcard(require("../emotion/components/single-value"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 
 var css = exports.css = function css(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _singleValue.css)() : (0, _singleValue2.css)(props);
+  return (0, _singleValue.css)();
 };
 var SingleValue = function SingleValue(props) {
-  return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_singleValue.default, props) : /*#__PURE__*/_react.default.createElement(_singleValue2.default, props);
+  return /*#__PURE__*/_react.default.createElement(_singleValue.default, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/emotion/components/containers.js

@@ -43,10 +43,14 @@ var SelectContainer = exports.SelectContainer = function SelectContainer(props)
     innerProps = props.innerProps,
     isDisabled = props.isDisabled,
     isRtl = props.isRtl;
-  return (0, _react.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(props, 'container', {
+  var styles = (0, _utils.getStyleProps)(props, 'container', {
     '--is-disabled': isDisabled,
     '--is-rtl': isRtl
-  }), innerProps), children);
+  });
+  return (0, _react.jsx)("div", (0, _extends2.default)({}, styles, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: styles.className || '-container'
+  }, innerProps), children);
 };
 
 // ==============================
@@ -85,7 +89,7 @@ var ValueContainer = exports.ValueContainer = function ValueContainer(props) {
     css: styles.css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: styles.className || 'value-container'
+    className: styles.className || '-ValueContainer'
   }, innerProps), children);
 };
 

package/dist/cjs/emotion/components/menu.js

@@ -264,9 +264,12 @@ var Menu = function Menu(props) {
   var children = props.children,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
-  return (0, _react2.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(props, 'menu', {
+  var styles = (0, _utils.getStyleProps)(props, 'menu', {
     menu: true
-  }), {
+  });
+  return (0, _react2.jsx)("div", (0, _extends2.default)({}, styles, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: styles.className || '-menu',
     ref: innerRef
   }, innerProps), children);
 };

package/dist/cjs/select.js

@@ -405,7 +405,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       if (!custom) {
         return base;
       }
-      var customStyles = (0, _platformFeatureFlags.fg)('compiled-react-select') ? (0, _utils.filterUnsupportedSelectors)(custom(base, props)) : custom(base, props);
+      var customStyles = (0, _utils.filterUnsupportedSelectors)(custom(base, props));
       return customStyles;
     });
     (0, _defineProperty2.default)(_this, "getClassNames", function (key, props) {

package/dist/es2019/components/containers.js

@@ -2,31 +2,30 @@
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { containerCSS as compiledCSS, IndicatorsContainer as CompiledIndicatorsContainer, indicatorsContainerCSS as compiledIndicatorsContainerCSS, SelectContainer as CompiledSelectContainer, ValueContainer as CompiledValueContainer, valueContainerCSS as compiledValueContainerCSS } from '../compiled/components/containers';
-import { containerCSS as emotionCSS, IndicatorsContainer as EmotionIndicatorsContainer, indicatorsContainerCSS as emotionIndicatorsContainerCSS, SelectContainer as EmotionSelectContainer, ValueContainer as EmotionValueContainer, valueContainerCSS as emotionValueContainerCSS } from '../emotion/components/containers';
 
 // ==============================
 // Root Container
 // ==============================
 
-export const containerCSS = props => fg('compiled-react-select') ? compiledCSS() : emotionCSS(props);
+export const containerCSS = props => compiledCSS();
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-export const SelectContainer = props => fg('compiled-react-select') ? /*#__PURE__*/React.createElement(CompiledSelectContainer, props) : /*#__PURE__*/React.createElement(EmotionSelectContainer, props);
+export const SelectContainer = props => fg('compiled-react-select') ? /*#__PURE__*/React.createElement(CompiledSelectContainer, props) : /*#__PURE__*/React.createElement(CompiledSelectContainer, props);
 
 // ==============================
 // Value Container
 // ==============================
 
-export const valueContainerCSS = props => fg('compiled-react-select') ? compiledValueContainerCSS() : emotionValueContainerCSS(props);
+export const valueContainerCSS = props => compiledValueContainerCSS();
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-export const ValueContainer = props => fg('compiled-react-select') ? /*#__PURE__*/React.createElement(CompiledValueContainer, props) : /*#__PURE__*/React.createElement(EmotionValueContainer, props);
+export const ValueContainer = props => /*#__PURE__*/React.createElement(CompiledValueContainer, props);
 
 // ==============================
 // Indicator Container
 // ==============================
 
-export const indicatorsContainerCSS = () => fg('compiled-react-select') ? compiledIndicatorsContainerCSS() : emotionIndicatorsContainerCSS();
+export const indicatorsContainerCSS = () => compiledIndicatorsContainerCSS();
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-export const IndicatorsContainer = props => fg('compiled-react-select') ? /*#__PURE__*/React.createElement(CompiledIndicatorsContainer, props) : /*#__PURE__*/React.createElement(EmotionIndicatorsContainer, props);
+export const IndicatorsContainer = props => /*#__PURE__*/React.createElement(CompiledIndicatorsContainer, props);

package/dist/es2019/components/control.js

@@ -1,12 +1,10 @@
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Compiled, { css as compiledCSS } from '../compiled/components/control';
-import Emotion, { css as emotionCSS } from '../emotion/components/control';
 export const css = props => {
-  return fg('compiled-react-select') ? compiledCSS() : emotionCSS(props);
+  return compiledCSS();
 };
-const Control = props => fg('compiled-react-select') ? /*#__PURE__*/React.createElement(Compiled, props) : /*#__PURE__*/React.createElement(Emotion, props);
+const Control = props => /*#__PURE__*/React.createElement(Compiled, props);
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default Control;

package/dist/es2019/components/group.js

@@ -1,14 +1,12 @@
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Compiled, { groupCSS as compiledGroupCSS, GroupHeading as CompiledGroupHeading, groupHeadingCSS as compiledGroupHeadingCSS } from '../compiled/components/group';
-import Emotion, { groupCSS as emotionGroupCSS, GroupHeading as EmotionGroupHeading, groupHeadingCSS as emotionGroupHeadingCSS } from '../emotion/components/group';
-export const groupCSS = props => fg('compiled-react-select') ? compiledGroupCSS() : emotionGroupCSS(props);
-const Group = props => fg('compiled-react-select') ? /*#__PURE__*/React.createElement(Compiled, props) : /*#__PURE__*/React.createElement(Emotion, props);
-export const groupHeadingCSS = props => fg('compiled-react-select') ? compiledGroupHeadingCSS() : emotionGroupHeadingCSS(props);
+export const groupCSS = props => compiledGroupCSS();
+const Group = props => /*#__PURE__*/React.createElement(Compiled, props);
+export const groupHeadingCSS = props => compiledGroupHeadingCSS();
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-export const GroupHeading = props => fg('compiled-react-select') ? /*#__PURE__*/React.createElement(CompiledGroupHeading, props) : /*#__PURE__*/React.createElement(EmotionGroupHeading, props);
+export const GroupHeading = props => /*#__PURE__*/React.createElement(CompiledGroupHeading, props);
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default Group;