@atlaskit/react-select 2.4.6 → 2.4.8

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/react-select
 
+## 2.4.8
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.4.7
+
+### Patch Changes
+
+- [#150364](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/150364)
+  [`8b38cbb81c263`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8b38cbb81c263) -
+  Add emotion class on compiled components to continue support of class queries temporarily, please
+  avoid using any class to style or query'
+
 ## 2.4.6
 
 ### Patch Changes

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

@@ -45,7 +45,7 @@ var SelectContainer = exports.SelectContainer = function SelectContainer(props)
     css = _getStyleProps.css;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _runtime.ax)([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') && containerStyles.ff_safari_input_fix, (0, _react2.cx)(className, xcss)])
+    className: (0, _runtime.ax)([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') && containerStyles.ff_safari_input_fix, (0, _react2.cx)(className, xcss, '-container')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css
@@ -83,7 +83,7 @@ var ValueContainer = exports.ValueContainer = function ValueContainer(props) {
     className = _getStyleProps2.className;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _runtime.ax)([valueContainerStyles.default, isMulti && hasValue && controlShouldRenderValue && valueContainerStyles.flex, isCompact && valueContainerStyles.compact, (0, _react2.cx)(className || 'value-container', xcss)])
+    className: (0, _runtime.ax)([valueContainerStyles.default, isMulti && hasValue && controlShouldRenderValue && valueContainerStyles.flex, isCompact && valueContainerStyles.compact, (0, _react2.cx)(className, xcss, '-ValueContainer')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css
@@ -114,6 +114,6 @@ var IndicatorsContainer = exports.IndicatorsContainer = function IndicatorsConta
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _1o9zidpf _1wpz1fhb _y4ti1b66", (0, _react2.cx)(className, xcss)])
+    className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _1o9zidpf _1wpz1fhb _y4ti1b66", (0, _react2.cx)(className, xcss, '-IndicatorsContainer')])
   }, innerProps), children);
 };

package/dist/cjs/compiled/components/control.js

@@ -53,7 +53,7 @@ var Control = function Control(props) {
     ref: innerRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: (0, _runtime.ax)([styles.default, isDisabled && styles.disabled, isInvalid && styles.invalid, isCompact && styles.compact, appearance === 'subtle' && styles.subtle, appearance === 'subtle' && isFocused && styles.subtleFocused, isFocused && styles.focused, appearance === 'none' && styles.none, (0, _react2.cx)(className, xcss)])
+    className: (0, _runtime.ax)([styles.default, isDisabled && styles.disabled, isInvalid && styles.invalid, isCompact && styles.compact, appearance === 'subtle' && styles.subtle, appearance === 'subtle' && isFocused && styles.subtleFocused, isFocused && styles.focused, appearance === 'none' && styles.none, (0, _react2.cx)(className, xcss, '-control')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

package/dist/cjs/compiled/components/group.js

@@ -44,7 +44,7 @@ var Group = function Group(props) {
     style: css
   }, innerProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _runtime.ax)([styles.root, (0, _react2.cx)(className, xcss, innerProps === null || innerProps === void 0 ? void 0 : innerProps.className)])
+    className: (0, _runtime.ax)([styles.root, (0, _react2.cx)(className, xcss, innerProps === null || innerProps === void 0 ? void 0 : innerProps.className, '-Group')])
   }), label && /*#__PURE__*/React.createElement(Heading, (0, _extends2.default)({}, headingProps, {
     selectProps: selectProps,
     getStyles: getStyles,
@@ -70,7 +70,7 @@ var GroupHeading = exports.GroupHeading = function GroupHeading(props) {
     className = _getStyleProps2.className;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _runtime.ax)(["_11c81o8v _1e0c1ule _syaz1gjq _80om73ad _k48pmoej _6rthpd1z _y4tiutpp _bozgutpp _1p1dglyw", (0, _react2.cx)(className, xcss)])
+    className: (0, _runtime.ax)(["_11c81o8v _1e0c1ule _syaz1gjq _80om73ad _k48pmoej _6rthpd1z _y4tiutpp _bozgutpp _1p1dglyw", (0, _react2.cx)(className, xcss, '-group')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

package/dist/cjs/compiled/components/indicators.js

@@ -66,7 +66,7 @@ var DropdownIndicator = exports.DropdownIndicator = function DropdownIndicator(p
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: (0, _runtime.ax)([dropdownStyles.default, isDisabled && dropdownStyles.disabled, isCompact && dropdownStyles.compact, (0, _react2.cx)(className, xcss)])
+    className: (0, _runtime.ax)([dropdownStyles.default, isDisabled && dropdownStyles.disabled, isCompact && dropdownStyles.compact, (0, _react2.cx)(className, xcss, '-indicatorContainer')])
   }, innerProps), children ? children : /*#__PURE__*/React.createElement(_compiled.Inline, {
     as: "span",
     xcss: dropdownWrapperStyles.root
@@ -102,7 +102,7 @@ var ClearIndicator = exports.ClearIndicator = function ClearIndicator(props) {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: (0, _runtime.ax)([clearIndicatorStyles.default, isCompact && clearIndicatorStyles.compact, (0, _react2.cx)(className, xcss)])
+    className: (0, _runtime.ax)([clearIndicatorStyles.default, isCompact && clearIndicatorStyles.compact, (0, _react2.cx)(className, xcss, '-indicatorContainer')])
   }, innerProps), /*#__PURE__*/React.createElement(_compiled.Pressable, {
     xcss: iconContainerStyles.root,
     tabIndex: -1,
@@ -150,7 +150,7 @@ var LoadingIndicator = exports.LoadingIndicator = function LoadingIndicator(_ref
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: (0, _runtime.ax)([loadingIndicatorStyles.default, isCompact && loadingIndicatorStyles.compact, (0, _react2.cx)(className, xcss)])
+    className: (0, _runtime.ax)([loadingIndicatorStyles.default, isCompact && loadingIndicatorStyles.compact, (0, _react2.cx)(className, xcss, '-loadingIndicator')])
   }, innerProps), /*#__PURE__*/React.createElement(_spinner.default, {
     size: "small"
   }));

package/dist/cjs/compiled/components/input.js

@@ -48,14 +48,14 @@ var Input = function Input(props) {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: (0, _runtime.ax)([inputStyles.root, isDisabled && inputStyles.disabled, (0, _react2.cx)(className, xcss)]),
+    className: (0, _runtime.ax)([inputStyles.root, isDisabled && inputStyles.disabled, (0, _react2.cx)(className, xcss, '-Input')]),
     "data-value": value || '',
     "data-testid": dataId && "".concat(dataId, "-container")
   }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _11q7idpf _19itidpf _11c81kw7 _nd5l1yjy _12ji1r31 _1qu2glyw _12y3idpf _1bsb1osq _1ul9yh40 _syaz1kw7 _tzy4kb7n", isHidden && "_tzy4idpf", builtinCX({
       input: true
-    }, inputClassName)]),
+    }, inputClassName, '-input')]),
     ref: innerRef,
     disabled: isDisabled,
     "data-testid": dataId

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

@@ -16,8 +16,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // Assistive text to describe visual elements. Hidden for sighted users.
 var styles = null;
 var A11yText = function A11yText(props) {
-  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, props, {
-    className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19itidpf _1reo15vq _18m915vq _1bsbt94y _4t3it94y _kqswstnw _1pbydx66 _ogto7mnp _jqf6ydhy _uiztglyw _o5721q9c"])
-  }));
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
+    // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-classname-prop
+    className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19itidpf _1reo15vq _18m915vq _1bsbt94y _4t3it94y _kqswstnw _1pbydx66 _ogto7mnp _jqf6ydhy _uiztglyw _o5721q9c", "-a11yText"])
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, props));
 };
 var _default = exports.default = A11yText;

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

@@ -22,9 +22,10 @@ function DummyInput(_ref) {
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Remove animation props not meant for HTML elements
   var filteredProps = (0, _utils.removeProps)(props, 'onExited', 'in', 'enter', 'exit', 'appear');
+
+  // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-classname-prop
   return /*#__PURE__*/React.createElement("input", (0, _extends2.default)({
-    ref: innerRef
-  }, filteredProps, {
-    className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _11q7idpf _19itidpf _nd5l1sux _12ji1r31 _1qu2glyw _12y3idpf _1bsbt94y _kqswh2mm _1n5d1j28 _syaz1j28 _1e02p1rm _tzy4idpf _t9ec1kuz"])
-  }));
+    ref: innerRef,
+    className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _11q7idpf _19itidpf _nd5l1sux _12ji1r31 _1qu2glyw _12y3idpf _1bsbt94y _kqswh2mm _1n5d1j28 _syaz1j28 _1e02p1rm _tzy4idpf _t9ec1kuz", "-dummyInput"])
+  }, filteredProps));
 }

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

@@ -21,12 +21,14 @@ var RequiredInput = function RequiredInput(_ref) {
     required: true,
     name: name,
     tabIndex: -1,
-    "aria-hidden": "true",
+    "aria-hidden": "true"
+    // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: (0, _runtime.ax)(["_1bsb1osq _kqswstnw _u7coidpf _rjxpidpf _1e02idpf _jqf61a21 _tzy4idpf _lcxvglyw", "-requiredInput"]),
     onFocus: onFocus,
     // Prevent `Switching from uncontrolled to controlled` error
     value: "",
-    onChange: _noop.default,
-    className: (0, _runtime.ax)(["_1bsb1osq _kqswstnw _u7coidpf _rjxpidpf _1e02idpf _jqf61a21 _tzy4idpf _lcxvglyw"])
+    onChange: _noop.default
   });
 };
 

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

@@ -275,7 +275,7 @@ var Menu = function Menu(props) {
     className = _getStyleProps.className;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _runtime.ax)([menuStyles.root, menuStyles[placement], (0, _react2.cx)(xcss, className)])
+    className: (0, _runtime.ax)([menuStyles.root, menuStyles[placement], (0, _react2.cx)(xcss, className, '-menu')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css,
@@ -308,7 +308,7 @@ var MenuList = exports.MenuList = function MenuList(props) {
     className = _getStyleProps2.className;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _runtime.ax)(["_kqswh2mm _18m91wug _85i5u2gc _1q51u2gc _8am5i4x0", (0, _react2.cx)(className, xcss)])
+    className: (0, _runtime.ax)(["_kqswh2mm _18m91wug _85i5u2gc _1q51u2gc _8am5i4x0", (0, _react2.cx)(className, xcss, '-MenuList')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: _objectSpread(_objectSpread({}, css), {}, {
@@ -348,7 +348,7 @@ var NoOptionsMessage = exports.NoOptionsMessage = function NoOptionsMessage(_ref
     className = _getStyleProps3.className;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _runtime.ax)(["_85i5u2gc _1q51u2gc _y4tiutpp _bozgutpp _y3gn1h6o", (0, _react2.cx)(className, xcss)])
+    className: (0, _runtime.ax)(["_85i5u2gc _1q51u2gc _y4tiutpp _bozgutpp _y3gn1h6o", (0, _react2.cx)(className, xcss, '-NoOptionsMessage')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css
@@ -378,7 +378,7 @@ var LoadingMessage = exports.LoadingMessage = function LoadingMessage(_ref4) {
     className = _getStyleProps4.className;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _runtime.ax)(["_85i5u2gc _1q51u2gc _y4tiutpp _bozgutpp _y3gn1h6o", (0, _react2.cx)(className, xcss)])
+    className: (0, _runtime.ax)(["_85i5u2gc _1q51u2gc _y4tiutpp _bozgutpp _y3gn1h6o", (0, _react2.cx)(className, xcss, '-LoadingMessage')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css
@@ -474,7 +474,7 @@ var MenuPortal = exports.MenuPortal = function MenuPortal(props) {
   // same wrapper element whether fixed or portalled
   var menuWrapper = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _react2.cx)(className, xcss),
+    className: (0, _react2.cx)(className, xcss, '-MenuPortal'),
     ref: setMenuPortalElement,
     style: _objectSpread({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

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

@@ -59,7 +59,7 @@ var MultiValueContainer = exports.MultiValueContainer = function MultiValueConta
     xcss = _ref.xcss;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _runtime.ax)([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && multiValueStyles.refresh, (0, _react2.cx)(className, xcss)])
+    className: (0, _runtime.ax)([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && multiValueStyles.refresh, (0, _react2.cx)(className, xcss, '-multiValue')])
   }), children);
 };
 
@@ -73,7 +73,7 @@ var MultiValueLabel = exports.MultiValueLabel = function MultiValueLabel(_ref2)
     xcss = _ref2.xcss;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _runtime.ax)([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && multiValueLabelStyles.refresh, (0, _react2.cx)(className, xcss)])
+    className: (0, _runtime.ax)([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && multiValueLabelStyles.refresh, (0, _react2.cx)(className, xcss, '-MultiValueLabel')])
   }), children);
 };
 var disabledStyles = null;
@@ -86,7 +86,7 @@ function MultiValueRemove(_ref3) {
     xcss = _ref3.xcss;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _runtime.ax)([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && multiValueRemoveStyles.refresh, (0, _react2.cx)(className, xcss)])
+    className: (0, _runtime.ax)([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && multiValueRemoveStyles.refresh, (0, _react2.cx)(className, xcss, '-MultiValueRemove')])
   }), /*#__PURE__*/React.createElement("div", {
     "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon',
     className: (0, _runtime.ax)([isDisabled && "_1e0cglyw", !isDisabled && "_1e0c1kw7"])

package/dist/cjs/compiled/components/option.js

@@ -46,7 +46,7 @@ var Option = function Option(props) {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: (0, _runtime.ax)([optionStyles.root, isFocused && optionStyles.focused, isSelected && optionStyles.selected, isFocused && isSelected && optionStyles.focusedSelected, isDisabled && optionStyles.disabled, (0, _react2.cx)(className, xcss)]),
+    className: (0, _runtime.ax)([optionStyles.root, isFocused && optionStyles.focused, isSelected && optionStyles.selected, isFocused && isSelected && optionStyles.focusedSelected, isDisabled && optionStyles.disabled, (0, _react2.cx)(className, xcss, '-option')]),
     ref: innerRef
   }, innerProps, {
     tabIndex: -1

package/dist/cjs/compiled/components/placeholder.js

@@ -37,7 +37,7 @@ var Placeholder = function Placeholder(props) {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: (0, _runtime.ax)([placeholderStyles.root, isDisabled && placeholderStyles.disabled, (0, _react2.cx)(className, xcss)])
+    className: (0, _runtime.ax)([placeholderStyles.root, isDisabled && placeholderStyles.disabled, (0, _react2.cx)(className, xcss, '-placeholder')])
   }, innerProps), children);
 };
 

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

@@ -38,7 +38,7 @@ var SingleValue = function SingleValue(props) {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: (0, _runtime.ax)([styles.root, isDisabled && styles.disalbed, (0, _react2.cx)(className, xcss)])
+    className: (0, _runtime.ax)([styles.root, isDisabled && styles.disalbed, (0, _react2.cx)(className, xcss, '-singleValue')])
   }, innerProps), children);
 };
 

package/dist/es2019/compiled/components/containers.js

@@ -37,7 +37,7 @@ export const SelectContainer = props => {
   });
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, fg('platform_design_system_team_safari_input_fix') && containerStyles.ff_safari_input_fix, cx(className, xcss)])
+    className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, fg('platform_design_system_team_safari_input_fix') && containerStyles.ff_safari_input_fix, cx(className, xcss, '-container')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css
@@ -78,7 +78,7 @@ export const ValueContainer = props => {
   });
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([valueContainerStyles.default, isMulti && hasValue && controlShouldRenderValue && valueContainerStyles.flex, isCompact && valueContainerStyles.compact, cx(className || 'value-container', xcss)])
+    className: ax([valueContainerStyles.default, isMulti && hasValue && controlShouldRenderValue && valueContainerStyles.flex, isCompact && valueContainerStyles.compact, cx(className, xcss, '-ValueContainer')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css
@@ -110,6 +110,6 @@ export const IndicatorsContainer = props => {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax(["_1e0c1txw _4cvr1h6o _1o9zidpf _1wpz1fhb _y4ti1b66", cx(className, xcss)])
+    className: ax(["_1e0c1txw _4cvr1h6o _1o9zidpf _1wpz1fhb _y4ti1b66", cx(className, xcss, '-IndicatorsContainer')])
   }, innerProps), children);
 };

package/dist/es2019/compiled/components/control.js

@@ -45,7 +45,7 @@ const Control = props => {
     ref: innerRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([styles.default, isDisabled && styles.disabled, isInvalid && styles.invalid, isCompact && styles.compact, appearance === 'subtle' && styles.subtle, appearance === 'subtle' && isFocused && styles.subtleFocused, isFocused && styles.focused, appearance === 'none' && styles.none, cx(className, xcss)])
+    className: ax([styles.default, isDisabled && styles.disabled, isInvalid && styles.invalid, isCompact && styles.compact, appearance === 'subtle' && styles.subtle, appearance === 'subtle' && isFocused && styles.subtleFocused, isFocused && styles.focused, appearance === 'none' && styles.none, cx(className, xcss, '-control')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

package/dist/es2019/compiled/components/group.js

@@ -33,7 +33,7 @@ const Group = props => {
     style: css
   }, innerProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([styles.root, cx(className, xcss, innerProps === null || innerProps === void 0 ? void 0 : innerProps.className)])
+    className: ax([styles.root, cx(className, xcss, innerProps === null || innerProps === void 0 ? void 0 : innerProps.className, '-Group')])
   }), label && /*#__PURE__*/React.createElement(Heading, _extends({}, headingProps, {
     selectProps: selectProps,
     getStyles: getStyles,
@@ -61,7 +61,7 @@ export const GroupHeading = props => {
   });
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax(["_11c81o8v _1e0c1ule _syaz1gjq _80om73ad _k48pmoej _6rthpd1z _y4tiutpp _bozgutpp _1p1dglyw", cx(className, xcss)])
+    className: ax(["_11c81o8v _1e0c1ule _syaz1gjq _80om73ad _k48pmoej _6rthpd1z _y4tiutpp _bozgutpp _1p1dglyw", cx(className, xcss, '-group')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

package/dist/es2019/compiled/components/indicators.js

@@ -53,7 +53,7 @@ export const DropdownIndicator = props => {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([dropdownStyles.default, isDisabled && dropdownStyles.disabled, isCompact && dropdownStyles.compact, cx(className, xcss)])
+    className: ax([dropdownStyles.default, isDisabled && dropdownStyles.disabled, isCompact && dropdownStyles.compact, cx(className, xcss, '-indicatorContainer')])
   }, innerProps), children ? children : /*#__PURE__*/React.createElement(Inline, {
     as: "span",
     xcss: dropdownWrapperStyles.root
@@ -89,7 +89,7 @@ export const ClearIndicator = props => {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([clearIndicatorStyles.default, isCompact && clearIndicatorStyles.compact, cx(className, xcss)])
+    className: ax([clearIndicatorStyles.default, isCompact && clearIndicatorStyles.compact, cx(className, xcss, '-indicatorContainer')])
   }, innerProps), /*#__PURE__*/React.createElement(Pressable, {
     xcss: iconContainerStyles.root,
     tabIndex: -1,
@@ -137,7 +137,7 @@ export const LoadingIndicator = ({
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([loadingIndicatorStyles.default, isCompact && loadingIndicatorStyles.compact, cx(className, xcss)])
+    className: ax([loadingIndicatorStyles.default, isCompact && loadingIndicatorStyles.compact, cx(className, xcss, '-loadingIndicator')])
   }, innerProps), /*#__PURE__*/React.createElement(Spinner, {
     size: "small"
   }));

package/dist/es2019/compiled/components/input.js

@@ -38,14 +38,14 @@ const Input = props => {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([inputStyles.root, isDisabled && inputStyles.disabled, cx(className, xcss)]),
+    className: ax([inputStyles.root, isDisabled && inputStyles.disabled, cx(className, xcss, '-Input')]),
     "data-value": value || '',
     "data-testid": dataId && `${dataId}-container`
   }, /*#__PURE__*/React.createElement("input", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _11q7idpf _19itidpf _11c81kw7 _nd5l1yjy _12ji1r31 _1qu2glyw _12y3idpf _1bsb1osq _1ul9yh40 _syaz1kw7 _tzy4kb7n", isHidden && "_tzy4idpf", builtinCX({
       input: true
-    }, inputClassName)]),
+    }, inputClassName, '-input')]),
     ref: innerRef,
     disabled: isDisabled,
     "data-testid": dataId

package/dist/es2019/compiled/components/internal/a11y-text.js

@@ -5,7 +5,9 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 // Assistive text to describe visual elements. Hidden for sighted users.
 const styles = null;
-const A11yText = props => /*#__PURE__*/React.createElement("span", _extends({}, props, {
-  className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19itidpf _1reo15vq _18m915vq _1bsbt94y _4t3it94y _kqswstnw _1pbydx66 _ogto7mnp _jqf6ydhy _uiztglyw _o5721q9c"])
-}));
+const A11yText = props => /*#__PURE__*/React.createElement("span", _extends({
+  // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-classname-prop
+  className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19itidpf _1reo15vq _18m915vq _1bsbt94y _4t3it94y _kqswstnw _1pbydx66 _ogto7mnp _jqf6ydhy _uiztglyw _o5721q9c", "-a11yText"])
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
 export default A11yText;

package/dist/es2019/compiled/components/internal/dummy-input.js

@@ -11,9 +11,10 @@ export default function DummyInput({
 }) {
   // Remove animation props not meant for HTML elements
   const filteredProps = removeProps(props, 'onExited', 'in', 'enter', 'exit', 'appear');
+
+  // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-classname-prop
   return /*#__PURE__*/React.createElement("input", _extends({
-    ref: innerRef
-  }, filteredProps, {
-    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _11q7idpf _19itidpf _nd5l1sux _12ji1r31 _1qu2glyw _12y3idpf _1bsbt94y _kqswh2mm _1n5d1j28 _syaz1j28 _1e02p1rm _tzy4idpf _t9ec1kuz"])
-  }));
+    ref: innerRef,
+    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _11q7idpf _19itidpf _nd5l1sux _12ji1r31 _1qu2glyw _12y3idpf _1bsbt94y _kqswh2mm _1n5d1j28 _syaz1j28 _1e02p1rm _tzy4idpf _t9ec1kuz", "-dummyInput"])
+  }, filteredProps));
 }

package/dist/es2019/compiled/components/internal/required-input.js

@@ -11,12 +11,14 @@ const RequiredInput = ({
   required: true,
   name: name,
   tabIndex: -1,
-  "aria-hidden": "true",
+  "aria-hidden": "true"
+  // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-classname-prop
+  ,
+  className: ax(["_1bsb1osq _kqswstnw _u7coidpf _rjxpidpf _1e02idpf _jqf61a21 _tzy4idpf _lcxvglyw", "-requiredInput"]),
   onFocus: onFocus,
   // Prevent `Switching from uncontrolled to controlled` error
   value: "",
-  onChange: __noop,
-  className: ax(["_1bsb1osq _kqswstnw _u7coidpf _rjxpidpf _1e02idpf _jqf61a21 _tzy4idpf _lcxvglyw"])
+  onChange: __noop
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/compiled/components/menu.js

@@ -259,7 +259,7 @@ const Menu = props => {
   });
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([menuStyles.root, menuStyles[placement], cx(xcss, className)])
+    className: ax([menuStyles.root, menuStyles[placement], cx(xcss, className, '-menu')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css,
@@ -296,7 +296,7 @@ export const MenuList = props => {
   });
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax(["_kqswh2mm _18m91wug _85i5u2gc _1q51u2gc _8am5i4x0", cx(className, xcss)])
+    className: ax(["_kqswh2mm _18m91wug _85i5u2gc _1q51u2gc _8am5i4x0", cx(className, xcss, '-MenuList')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: {
@@ -337,7 +337,7 @@ export const NoOptionsMessage = ({
   });
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax(["_85i5u2gc _1q51u2gc _y4tiutpp _bozgutpp _y3gn1h6o", cx(className, xcss)])
+    className: ax(["_85i5u2gc _1q51u2gc _y4tiutpp _bozgutpp _y3gn1h6o", cx(className, xcss, '-NoOptionsMessage')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css
@@ -369,7 +369,7 @@ export const LoadingMessage = ({
   });
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax(["_85i5u2gc _1q51u2gc _y4tiutpp _bozgutpp _y3gn1h6o", cx(className, xcss)])
+    className: ax(["_85i5u2gc _1q51u2gc _y4tiutpp _bozgutpp _y3gn1h6o", cx(className, xcss, '-LoadingMessage')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css
@@ -459,7 +459,7 @@ export const MenuPortal = props => {
   // same wrapper element whether fixed or portalled
   const menuWrapper = /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: cx(className, xcss),
+    className: cx(className, xcss, '-MenuPortal'),
     ref: setMenuPortalElement,
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/es2019/compiled/components/multi-value.js

@@ -39,7 +39,7 @@ export const MultiValueContainer = ({
 }) => {
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, fg('platform-component-visual-refresh') && multiValueStyles.refresh, cx(className, xcss)])
+    className: ax([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, fg('platform-component-visual-refresh') && multiValueStyles.refresh, cx(className, xcss, '-multiValue')])
   }), children);
 };
 
@@ -54,7 +54,7 @@ export const MultiValueLabel = ({
 }) => {
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, fg('platform-component-visual-refresh') && multiValueLabelStyles.refresh, cx(className, xcss)])
+    className: ax([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, fg('platform-component-visual-refresh') && multiValueLabelStyles.refresh, cx(className, xcss, '-MultiValueLabel')])
   }), children);
 };
 const disabledStyles = null;
@@ -68,7 +68,7 @@ export function MultiValueRemove({
 }) {
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, fg('platform-component-visual-refresh') && multiValueRemoveStyles.refresh, cx(className, xcss)])
+    className: ax([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, fg('platform-component-visual-refresh') && multiValueRemoveStyles.refresh, cx(className, xcss, '-MultiValueRemove')])
   }), /*#__PURE__*/React.createElement("div", {
     "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon',
     className: ax([isDisabled && "_1e0cglyw", !isDisabled && "_1e0c1kw7"])

package/dist/es2019/compiled/components/option.js

@@ -37,7 +37,7 @@ const Option = props => {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([optionStyles.root, isFocused && optionStyles.focused, isSelected && optionStyles.selected, isFocused && isSelected && optionStyles.focusedSelected, isDisabled && optionStyles.disabled, cx(className, xcss)]),
+    className: ax([optionStyles.root, isFocused && optionStyles.focused, isSelected && optionStyles.selected, isFocused && isSelected && optionStyles.focusedSelected, isDisabled && optionStyles.disabled, cx(className, xcss, '-option')]),
     ref: innerRef
   }, innerProps, {
     tabIndex: -1

package/dist/es2019/compiled/components/placeholder.js

@@ -28,7 +28,7 @@ const Placeholder = props => {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([placeholderStyles.root, isDisabled && placeholderStyles.disabled, cx(className, xcss)])
+    className: ax([placeholderStyles.root, isDisabled && placeholderStyles.disabled, cx(className, xcss, '-placeholder')])
   }, innerProps), children);
 };
 

package/dist/es2019/compiled/components/single-value.js

@@ -29,7 +29,7 @@ const SingleValue = props => {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([styles.root, isDisabled && styles.disalbed, cx(className, xcss)])
+    className: ax([styles.root, isDisabled && styles.disalbed, cx(className, xcss, '-singleValue')])
   }, innerProps), children);
 };
 

package/dist/esm/compiled/components/containers.js

@@ -36,7 +36,7 @@ export var SelectContainer = function SelectContainer(props) {
     css = _getStyleProps.css;
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, fg('platform_design_system_team_safari_input_fix') && containerStyles.ff_safari_input_fix, cx(className, xcss)])
+    className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, fg('platform_design_system_team_safari_input_fix') && containerStyles.ff_safari_input_fix, cx(className, xcss, '-container')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css
@@ -74,7 +74,7 @@ export var ValueContainer = function ValueContainer(props) {
     className = _getStyleProps2.className;
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([valueContainerStyles.default, isMulti && hasValue && controlShouldRenderValue && valueContainerStyles.flex, isCompact && valueContainerStyles.compact, cx(className || 'value-container', xcss)])
+    className: ax([valueContainerStyles.default, isMulti && hasValue && controlShouldRenderValue && valueContainerStyles.flex, isCompact && valueContainerStyles.compact, cx(className, xcss, '-ValueContainer')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css
@@ -105,6 +105,6 @@ export var IndicatorsContainer = function IndicatorsContainer(props) {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax(["_1e0c1txw _4cvr1h6o _1o9zidpf _1wpz1fhb _y4ti1b66", cx(className, xcss)])
+    className: ax(["_1e0c1txw _4cvr1h6o _1o9zidpf _1wpz1fhb _y4ti1b66", cx(className, xcss, '-IndicatorsContainer')])
   }, innerProps), children);
 };

package/dist/esm/compiled/components/control.js

@@ -44,7 +44,7 @@ var Control = function Control(props) {
     ref: innerRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([styles.default, isDisabled && styles.disabled, isInvalid && styles.invalid, isCompact && styles.compact, appearance === 'subtle' && styles.subtle, appearance === 'subtle' && isFocused && styles.subtleFocused, isFocused && styles.focused, appearance === 'none' && styles.none, cx(className, xcss)])
+    className: ax([styles.default, isDisabled && styles.disabled, isInvalid && styles.invalid, isCompact && styles.compact, appearance === 'subtle' && styles.subtle, appearance === 'subtle' && isFocused && styles.subtleFocused, isFocused && styles.focused, appearance === 'none' && styles.none, cx(className, xcss, '-control')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

package/dist/esm/compiled/components/group.js

@@ -34,7 +34,7 @@ var Group = function Group(props) {
     style: css
   }, innerProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([styles.root, cx(className, xcss, innerProps === null || innerProps === void 0 ? void 0 : innerProps.className)])
+    className: ax([styles.root, cx(className, xcss, innerProps === null || innerProps === void 0 ? void 0 : innerProps.className, '-Group')])
   }), label && /*#__PURE__*/React.createElement(Heading, _extends({}, headingProps, {
     selectProps: selectProps,
     getStyles: getStyles,
@@ -60,7 +60,7 @@ export var GroupHeading = function GroupHeading(props) {
     className = _getStyleProps2.className;
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax(["_11c81o8v _1e0c1ule _syaz1gjq _80om73ad _k48pmoej _6rthpd1z _y4tiutpp _bozgutpp _1p1dglyw", cx(className, xcss)])
+    className: ax(["_11c81o8v _1e0c1ule _syaz1gjq _80om73ad _k48pmoej _6rthpd1z _y4tiutpp _bozgutpp _1p1dglyw", cx(className, xcss, '-group')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

package/dist/esm/compiled/components/indicators.js

@@ -57,7 +57,7 @@ export var DropdownIndicator = function DropdownIndicator(props) {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([dropdownStyles.default, isDisabled && dropdownStyles.disabled, isCompact && dropdownStyles.compact, cx(className, xcss)])
+    className: ax([dropdownStyles.default, isDisabled && dropdownStyles.disabled, isCompact && dropdownStyles.compact, cx(className, xcss, '-indicatorContainer')])
   }, innerProps), children ? children : /*#__PURE__*/React.createElement(Inline, {
     as: "span",
     xcss: dropdownWrapperStyles.root
@@ -93,7 +93,7 @@ export var ClearIndicator = function ClearIndicator(props) {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([clearIndicatorStyles.default, isCompact && clearIndicatorStyles.compact, cx(className, xcss)])
+    className: ax([clearIndicatorStyles.default, isCompact && clearIndicatorStyles.compact, cx(className, xcss, '-indicatorContainer')])
   }, innerProps), /*#__PURE__*/React.createElement(Pressable, {
     xcss: iconContainerStyles.root,
     tabIndex: -1,
@@ -141,7 +141,7 @@ export var LoadingIndicator = function LoadingIndicator(_ref) {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([loadingIndicatorStyles.default, isCompact && loadingIndicatorStyles.compact, cx(className, xcss)])
+    className: ax([loadingIndicatorStyles.default, isCompact && loadingIndicatorStyles.compact, cx(className, xcss, '-loadingIndicator')])
   }, innerProps), /*#__PURE__*/React.createElement(Spinner, {
     size: "small"
   }));

package/dist/esm/compiled/components/input.js

@@ -38,14 +38,14 @@ var Input = function Input(props) {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([inputStyles.root, isDisabled && inputStyles.disabled, cx(className, xcss)]),
+    className: ax([inputStyles.root, isDisabled && inputStyles.disabled, cx(className, xcss, '-Input')]),
     "data-value": value || '',
     "data-testid": dataId && "".concat(dataId, "-container")
   }, /*#__PURE__*/React.createElement("input", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _11q7idpf _19itidpf _11c81kw7 _nd5l1yjy _12ji1r31 _1qu2glyw _12y3idpf _1bsb1osq _1ul9yh40 _syaz1kw7 _tzy4kb7n", isHidden && "_tzy4idpf", builtinCX({
       input: true
-    }, inputClassName)]),
+    }, inputClassName, '-input')]),
     ref: innerRef,
     disabled: isDisabled,
     "data-testid": dataId

package/dist/esm/compiled/components/internal/a11y-text.js

@@ -6,8 +6,10 @@ import { ax, ix } from "@compiled/react/runtime";
 // Assistive text to describe visual elements. Hidden for sighted users.
 var styles = null;
 var A11yText = function A11yText(props) {
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19itidpf _1reo15vq _18m915vq _1bsbt94y _4t3it94y _kqswstnw _1pbydx66 _ogto7mnp _jqf6ydhy _uiztglyw _o5721q9c"])
-  }));
+  return /*#__PURE__*/React.createElement("span", _extends({
+    // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19itidpf _1reo15vq _18m915vq _1bsbt94y _4t3it94y _kqswstnw _1pbydx66 _ogto7mnp _jqf6ydhy _uiztglyw _o5721q9c", "-a11yText"])
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, props));
 };
 export default A11yText;

package/dist/esm/compiled/components/internal/dummy-input.js

@@ -12,9 +12,10 @@ export default function DummyInput(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   // Remove animation props not meant for HTML elements
   var filteredProps = removeProps(props, 'onExited', 'in', 'enter', 'exit', 'appear');
+
+  // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-classname-prop
   return /*#__PURE__*/React.createElement("input", _extends({
-    ref: innerRef
-  }, filteredProps, {
-    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _11q7idpf _19itidpf _nd5l1sux _12ji1r31 _1qu2glyw _12y3idpf _1bsbt94y _kqswh2mm _1n5d1j28 _syaz1j28 _1e02p1rm _tzy4idpf _t9ec1kuz"])
-  }));
+    ref: innerRef,
+    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _11q7idpf _19itidpf _nd5l1sux _12ji1r31 _1qu2glyw _12y3idpf _1bsbt94y _kqswh2mm _1n5d1j28 _syaz1j28 _1e02p1rm _tzy4idpf _t9ec1kuz", "-dummyInput"])
+  }, filteredProps));
 }

package/dist/esm/compiled/components/internal/required-input.js

@@ -11,12 +11,14 @@ var RequiredInput = function RequiredInput(_ref) {
     required: true,
     name: name,
     tabIndex: -1,
-    "aria-hidden": "true",
+    "aria-hidden": "true"
+    // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax(["_1bsb1osq _kqswstnw _u7coidpf _rjxpidpf _1e02idpf _jqf61a21 _tzy4idpf _lcxvglyw", "-requiredInput"]),
     onFocus: onFocus,
     // Prevent `Switching from uncontrolled to controlled` error
     value: "",
-    onChange: __noop,
-    className: ax(["_1bsb1osq _kqswstnw _u7coidpf _rjxpidpf _1e02idpf _jqf61a21 _tzy4idpf _lcxvglyw"])
+    onChange: __noop
   });
 };
 

package/dist/esm/compiled/components/menu.js

@@ -266,7 +266,7 @@ var Menu = function Menu(props) {
     className = _getStyleProps.className;
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([menuStyles.root, menuStyles[placement], cx(xcss, className)])
+    className: ax([menuStyles.root, menuStyles[placement], cx(xcss, className, '-menu')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css,
@@ -302,7 +302,7 @@ export var MenuList = function MenuList(props) {
     className = _getStyleProps2.className;
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax(["_kqswh2mm _18m91wug _85i5u2gc _1q51u2gc _8am5i4x0", cx(className, xcss)])
+    className: ax(["_kqswh2mm _18m91wug _85i5u2gc _1q51u2gc _8am5i4x0", cx(className, xcss, '-MenuList')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: _objectSpread(_objectSpread({}, css), {}, {
@@ -342,7 +342,7 @@ export var NoOptionsMessage = function NoOptionsMessage(_ref3) {
     className = _getStyleProps3.className;
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax(["_85i5u2gc _1q51u2gc _y4tiutpp _bozgutpp _y3gn1h6o", cx(className, xcss)])
+    className: ax(["_85i5u2gc _1q51u2gc _y4tiutpp _bozgutpp _y3gn1h6o", cx(className, xcss, '-NoOptionsMessage')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css
@@ -372,7 +372,7 @@ export var LoadingMessage = function LoadingMessage(_ref4) {
     className = _getStyleProps4.className;
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax(["_85i5u2gc _1q51u2gc _y4tiutpp _bozgutpp _y3gn1h6o", cx(className, xcss)])
+    className: ax(["_85i5u2gc _1q51u2gc _y4tiutpp _bozgutpp _y3gn1h6o", cx(className, xcss, '-LoadingMessage')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css
@@ -468,7 +468,7 @@ export var MenuPortal = function MenuPortal(props) {
   // same wrapper element whether fixed or portalled
   var menuWrapper = /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: cx(className, xcss),
+    className: cx(className, xcss, '-MenuPortal'),
     ref: setMenuPortalElement,
     style: _objectSpread({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/esm/compiled/components/multi-value.js

@@ -47,7 +47,7 @@ export var MultiValueContainer = function MultiValueContainer(_ref) {
     xcss = _ref.xcss;
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, fg('platform-component-visual-refresh') && multiValueStyles.refresh, cx(className, xcss)])
+    className: ax([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, fg('platform-component-visual-refresh') && multiValueStyles.refresh, cx(className, xcss, '-multiValue')])
   }), children);
 };
 
@@ -61,7 +61,7 @@ export var MultiValueLabel = function MultiValueLabel(_ref2) {
     xcss = _ref2.xcss;
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, fg('platform-component-visual-refresh') && multiValueLabelStyles.refresh, cx(className, xcss)])
+    className: ax([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, fg('platform-component-visual-refresh') && multiValueLabelStyles.refresh, cx(className, xcss, '-MultiValueLabel')])
   }), children);
 };
 var disabledStyles = null;
@@ -74,7 +74,7 @@ export function MultiValueRemove(_ref3) {
     xcss = _ref3.xcss;
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, fg('platform-component-visual-refresh') && multiValueRemoveStyles.refresh, cx(className, xcss)])
+    className: ax([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, fg('platform-component-visual-refresh') && multiValueRemoveStyles.refresh, cx(className, xcss, '-MultiValueRemove')])
   }), /*#__PURE__*/React.createElement("div", {
     "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon',
     className: ax([isDisabled && "_1e0cglyw", !isDisabled && "_1e0c1kw7"])

package/dist/esm/compiled/components/option.js

@@ -36,7 +36,7 @@ var Option = function Option(props) {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([optionStyles.root, isFocused && optionStyles.focused, isSelected && optionStyles.selected, isFocused && isSelected && optionStyles.focusedSelected, isDisabled && optionStyles.disabled, cx(className, xcss)]),
+    className: ax([optionStyles.root, isFocused && optionStyles.focused, isSelected && optionStyles.selected, isFocused && isSelected && optionStyles.focusedSelected, isDisabled && optionStyles.disabled, cx(className, xcss, '-option')]),
     ref: innerRef
   }, innerProps, {
     tabIndex: -1

package/dist/esm/compiled/components/placeholder.js

@@ -27,7 +27,7 @@ var Placeholder = function Placeholder(props) {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([placeholderStyles.root, isDisabled && placeholderStyles.disabled, cx(className, xcss)])
+    className: ax([placeholderStyles.root, isDisabled && placeholderStyles.disabled, cx(className, xcss, '-placeholder')])
   }, innerProps), children);
 };
 

package/dist/esm/compiled/components/single-value.js

@@ -28,7 +28,7 @@ var SingleValue = function SingleValue(props) {
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([styles.root, isDisabled && styles.disalbed, cx(className, xcss)])
+    className: ax([styles.root, isDisabled && styles.disalbed, cx(className, xcss, '-singleValue')])
   }, innerProps), children);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "2.4.6",
+	"version": "2.4.8",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,7 +30,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^25.6.0",
+		"@atlaskit/icon": "^26.0.0",
 		"@atlaskit/layering": "^2.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.7.0",