@atlaskit/react-select 3.13.7 → 3.14.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/react-select
 
+## 3.14.0
+
+### Minor Changes
+
+- [`749ca42d5f314`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/749ca42d5f314) -
+  [ux] Updating multiselect to use ADS tags.
+
+## 3.13.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.13.7
 
 ### Patch Changes

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

@@ -1,4 +1,4 @@
-/* containers.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* containers.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,25 +1,25 @@
 ._11c81d4k{font:var(--ds-font-body-large,normal 400 1pc/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
-._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._1e0c11p5{display:grid}
 ._1e0c1txw{display:flex}
 ._1eim1xrj{direction:rtl}
 ._1n261g80{flex-wrap:wrap}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
+._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1reo15vq{overflow-x:hidden}
 ._1wpz1fhb{align-self:stretch}
 ._4cvr1h6o{align-items:center}
 ._80om13gf{cursor:not-allowed}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._8am5i4x0{-webkit-overflow-scrolling:touch}
-._ca0qv77o{padding-top:var(--ds-space-025,2px)}
-._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
 ._i0dlf1ug{flex-basis:0%}
 ._kqswh2mm{position:relative}
 ._lcxv1rj4{pointer-events:all}
-._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
-._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
-._u5f312x7{padding-right:var(--ds-space-075,6px)}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
 ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
 @media (min-width:30rem){._1tn2fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}}

package/dist/cjs/components/containers.js

@@ -1,4 +1,4 @@
-/* containers.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* containers.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -57,9 +57,9 @@ var valueContainerCSS = exports.valueContainerCSS = function valueContainerCSS()
   return {};
 };
 var valueContainerStyles = {
-  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _ca0qv77o _u5f312x7 _n3tdv77o _19bv12x7",
+  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _1q51v77o _y4ti12x7 _85i5v77o _bozg12x7",
   flex: "_1e0c1txw",
-  compact: "_ca0qze3t _u5f312x7 _n3tdze3t _19bv12x7"
+  compact: "_1q51ze3t _y4ti12x7 _85i5ze3t _bozg12x7"
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/control.js

@@ -1,4 +1,4 @@
-/* control.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* control.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/group.js

@@ -1,4 +1,4 @@
-/* group.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* group.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/indicators.js

@@ -1,4 +1,4 @@
-/* indicators.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* indicators.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/input.js

@@ -1,4 +1,4 @@
-/* input.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* input.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* a11y-text.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* a11y-text.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* dummy-input.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* dummy-input.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* required-input.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* required-input.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/menu.js

@@ -1,4 +1,4 @@
-/* menu.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* menu.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,48 +1,83 @@
+
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._19itglyw{border:none}
+._2a9v1kw7 *{font:inherit}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
+._195g8ily{margin-inline:calc(var(--ds-space-050, 4px)*-1)}
+._195gv77o{margin-inline:var(--ds-space-025,2px)}
 ._1dqonqa1{border-style:solid}
 ._1h6d14je{border-color:#b7b9be}
+._1h6dpryq{border-color:color-mix(in oklch,var(--tag-border-token) 100%,var(--cm-border-color) var(--cm-border-value))}
+._1mouv77o{margin-block:var(--ds-space-025,2px)}._119b16y8{--tag-border-token:var(--ds-border-accent-red,#e2483d)}
+._119b1b2s{--tag-border-token:var(--ds-border-accent-orange,#e06c00)}
+._119b1crs{--tag-border-token:var(--ds-border-accent-green,#22a06b)}
+._119b1h3o{--tag-border-token:var(--ds-border-accent-teal,#2898bd)}
+._119b1hqq{--tag-border-token:var(--ds-border-accent-purple,#af59e1)}
+._119b1w55{--tag-border-token:var(--ds-border-accent-blue,#357de8)}
+._119b8yml{--tag-border-token:var(--ds-border-accent-gray,#7d818a)}
+._119bfeiv{--tag-border-token:var(--ds-border-accent-yellow,#b38600)}
+._119bnf89{--tag-border-token:var(--ds-border-accent-lime,#6a9a23)}
+._119buwd0{--tag-border-token:var(--ds-border-accent-magenta,#cd519d)}
+._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
 ._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
+._13muu67f{--cm-border-color:#fff}
+._16jlidpf{flex-grow:0}
 ._16qs7ex6{box-shadow:0 0 0 2px var(--ds-surface,transparent),0 0 0 4px var(--ds-border-focused,transparent)}
 ._18m915vq{overflow-y:hidden}
 ._1bah1h6o{justify-content:center}
 ._1bto1l2s{text-overflow:ellipsis}
+._1e0c116y{display:inline-flex}
 ._1e0c1kw7{display:inherit}
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
+._1k671038{--border-l-factor:1.33}
+._1o9zkb7n{flex-shrink:1}
 ._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
 ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1reo15vq{overflow-x:hidden}
+._1tkeidpf{min-height:0}
+._1ul9idpf{min-width:0}
 ._1ul9ze3t{min-width:var(--ds-space-0,0)}
 ._1wpz1h6o{align-self:center}
 ._4cvr1h6o{align-items:center}
+._4t3i1k92{height:1.25rem}
 ._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
+._80om73ad{cursor:default}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
 ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
+._bfhk1dpa{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
 ._bfhkb1q9{background-color:var(--ds-UNSAFE-transparent,transparent)}
 ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
 ._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
+._i0dl1wug{flex-basis:auto}
+._kqswh2mm{position:relative}
 ._lswu1dx5{fill:var(--ds-text,#000)}
 ._lswu1rrc{fill:var(--ds-text-selected,#000)}
 ._o5721q9c{white-space:nowrap}
+._oe6mmko7{--cm-border-value:45%}
 ._p12f1osq{max-width:100%}
+._p12ff6dh{max-width:11.25rem}
 ._r06hglyw{-webkit-appearance:none;appearance:none}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syaz1kw7{color:inherit}
 ._syaz1wum{color:var(--ds-text-selected,#333)}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._syazjpor{color:var(--ds-text,#333)}
+._vchhusvi{box-sizing:border-box}
 ._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}
+[data-color-mode=dark] ._hg5mr3uz{--cm-border-color:#000}
+[data-color-mode=dark] ._u8p61h4e{--border-l-factor:0.7}
 ._1ah312gs:focus-visible{outline-offset:-2px}
 ._13br1jjn:hover{fill:var(--ds-text-danger,#000)}
 ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
 ._i5f81jjn:active{fill:var(--ds-text-danger,#000)}
-@media screen and (-ms-high-contrast:active){._1aewe4h9{border-width:var(--ds-border-width,1px)}._6up51j28{border-color:transparent}._1xdnnqa1{border-style:solid}._3yq3glyw{border:none}}
+@media screen and (-ms-high-contrast:active){._1aewe4h9{border-width:var(--ds-border-width,1px)}._6up51j28{border-color:transparent}._1xdnnqa1{border-style:solid}._3yq3glyw{border:none}}
+@supports (color:oklch(from white l c h)){._1easrqqc{border-color:oklch(from var(--tag-border-token) calc(l * var(--border-l-factor)) c h)}}

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

@@ -1,4 +1,4 @@
-/* multi-value.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* multi-value.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -16,10 +16,46 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react2 = require("@compiled/react");
 var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _tag = _interopRequireDefault(require("@atlaskit/tag"));
 var _utils = require("../utils");
 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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Tag wrapper: Tag has built-in margin; cancel the inline margin so we control spacing
+var tagMarginToken = "var(--ds-space-050, 4px)";
+var multiValueTagWrapperStyles = {
+  root: "_1e0c1txw _1ul9ze3t _1pfhv77o _12l21b66 _6rthv77o _p12f1osq",
+  inner: "_195g8ily"
+};
+
+// Tag-like color styles
+var tagLikeColorStyles = {
+  gray: "_119b8yml",
+  blue: "_119b1w55",
+  green: "_119b1crs",
+  red: "_119b16y8",
+  yellow: "_119bfeiv",
+  purple: "_119b1hqq",
+  lime: "_119bnf89",
+  magenta: "_119buwd0",
+  orange: "_119b1b2s",
+  teal: "_119b1h3o"
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- match TagNew border color logic
+var tagLikeBorderFilterStyles = null;
+
+// Tag-like styles for custom content values (not plain text) when FF is on.
+// Mirrors the TagNew component's visual appearance (padding, margins, sizing, colors).
+// The container uses tag-like styling while Label/Remove sub-components are preserved
+// so custom overrides (e.g. custom aria-labels, rendering objects as data) continue to work.
+var multiValueTagLikeStyles = {
+  root: "_1reo15vq _18m915vq _2rko12b0 _11c8wadc _1mouv77o _195gv77o _1dqonqa1 _189ee4h9 _1e0c116y _vchhusvi _kqswh2mm _4cvr1h6o _1ul9idpf _p12ff6dh _4t3i1k92 _bfhksm61 _syazi7uo _80om73ad _3yq3glyw",
+  labelWrapper: "_16jlidpf _1o9zkb7n _i0dl1wug _1reo15vq _18m915vq _11c8wadc _1e0c1txw _4cvr1h6o _1ul9ze3t _1tkeidpf _2a9v1kw7",
+  disabled: "_syaz1gmx _bfhki8nm",
+  focused: "_syaz1wum _bfhk1dpa _16qs7ex6 _1aewe4h9 _6up51j28 _1xdnnqa1"
+};
 var multiValueStyles = {
   root: "_2rko12b0 _1h6d14je _1dqonqa1 _189ee4h9 _1e0c1txw _1ul9ze3t _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _bfhk1j9a _p12f1osq _syazjpor _3yq3glyw",
   disabled: "_syaz1gmx _bfhki8nm",
@@ -90,6 +126,13 @@ function MultiValueRemove(_ref3) {
     size: "small"
   })));
 }
+var getMultiValueLabelText = function getMultiValueLabelText(children, data) {
+  if (typeof children === 'string') {
+    return children;
+  }
+  var label = data === null || data === void 0 ? void 0 : data.label;
+  return typeof label === 'string' ? label : '';
+};
 var MultiValue = function MultiValue(props) {
   var children = props.children,
     components = props.components,
@@ -103,7 +146,9 @@ var MultiValue = function MultiValue(props) {
   var Container = components.Container,
     Label = components.Label,
     Remove = components.Remove;
-  var ariaLabel = typeof children === 'string' ? children : data.label;
+  var labelText = getMultiValueLabelText(children, data);
+  var isPlainLabel = typeof children === 'string';
+  var ffTagUplifts = (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts');
   var _getStyleProps = (0, _utils.getStyleProps)(props, 'multiValue', {
       'multi-value': true,
       'multi-value--is-disabled': isDisabled
@@ -120,6 +165,73 @@ var MultiValue = function MultiValue(props) {
     }),
     removeCss = _getStyleProps3.css,
     removeClassName = _getStyleProps3.className;
+  var hasCustomLabel = Label !== MultiValueLabel;
+  if (ffTagUplifts && isPlainLabel && !hasCustomLabel) {
+    var _ref4 = data !== null && data !== void 0 ? data : {},
+      elemBefore = _ref4.elemBefore,
+      tagColor = _ref4.color;
+    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)([multiValueTagWrapperStyles.root, (0, _react2.cx)(props.className, containerClassName, props.xcss, '-multiValue')])
+    }), /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)([multiValueTagWrapperStyles.inner])
+    }, /*#__PURE__*/React.createElement(_tag.default, {
+      text: labelText,
+      isRemovable: !isDisabled,
+      removeButtonLabel: "".concat(labelText, ", remove"),
+      onBeforeRemoveAction: function onBeforeRemoveAction() {
+        var _removeProps$onClick;
+        (_removeProps$onClick = removeProps.onClick) === null || _removeProps$onClick === void 0 || _removeProps$onClick.call(removeProps, {});
+        return false;
+      },
+      color: tagColor !== null && tagColor !== void 0 ? tagColor : 'gray',
+      elemBefore: elemBefore
+    })));
+  }
+
+  // FF on + custom content or custom Label/Remove → tag-like container styling with the provided
+  // Label and Remove components so custom overrides continue to work.
+  if (ffTagUplifts) {
+    var colorKey = data === null || data === void 0 ? void 0 : data.color;
+    return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+      "data-multi-value-tag-like": "true"
+    }, innerProps, {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- custom styles.multiValue overrides (e.g. colored borders) must be preserved
+      style: containerCss
+      // 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)([multiValueTagLikeStyles.root, tagLikeColorStyles.gray, colorKey === 'blue' && tagLikeColorStyles.blue, colorKey === 'green' && tagLikeColorStyles.green, colorKey === 'red' && tagLikeColorStyles.red, colorKey === 'yellow' && tagLikeColorStyles.yellow, colorKey === 'purple' && tagLikeColorStyles.purple, colorKey === 'lime' && tagLikeColorStyles.lime, colorKey === 'magenta' && tagLikeColorStyles.magenta, colorKey === 'orange' && tagLikeColorStyles.orange, colorKey === 'teal' && tagLikeColorStyles.teal, "_1h6dpryq _1k671038 _13muu67f _oe6mmko7 _u8p61h4e _hg5mr3uz _1easrqqc", isDisabled && multiValueTagLikeStyles.disabled, isFocused && multiValueTagLikeStyles.focused, (0, _react2.cx)(props.className, containerClassName, props.xcss, '-multiValue')])
+    }), /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)([multiValueTagLikeStyles.labelWrapper])
+    }, /*#__PURE__*/React.createElement(Label, {
+      data: data,
+      innerProps: {
+        style: labelCss,
+        className: labelClassName
+      }
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
+      className: labelClassName,
+      hasEllipsis: cropWithEllipsis || cropWithEllipsis === undefined,
+      selectProps: selectProps
+    }, children)), /*#__PURE__*/React.createElement(Remove, {
+      data: data,
+      innerProps: _objectSpread({
+        style: removeCss,
+        className: removeClassName,
+        role: 'button',
+        tabIndex: -1,
+        'aria-label': "".concat(labelText || 'option', ", remove")
+      }, removeProps)
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
+      className: removeClassName,
+      isDisabled: isDisabled,
+      selectProps: selectProps
+    }));
+  }
+
+  // FF off → default styles
   return /*#__PURE__*/React.createElement(Container, {
     data: data,
     innerProps: _objectSpread({
@@ -150,7 +262,7 @@ var MultiValue = function MultiValue(props) {
       className: removeClassName,
       role: 'button',
       tabIndex: -1,
-      'aria-label': "".concat(ariaLabel || 'option', ", remove")
+      'aria-label': "".concat(labelText || 'option', ", remove")
     }, removeProps)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,

package/dist/cjs/components/option.js

@@ -1,4 +1,4 @@
-/* option.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* option.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/placeholder.js

@@ -1,4 +1,4 @@
-/* placeholder.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* placeholder.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* single-value.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* single-value.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* containers.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* containers.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./containers.compiled.css";
 import * as React from 'react';

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

@@ -1,25 +1,25 @@
 ._11c81d4k{font:var(--ds-font-body-large,normal 400 1pc/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
-._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._1e0c11p5{display:grid}
 ._1e0c1txw{display:flex}
 ._1eim1xrj{direction:rtl}
 ._1n261g80{flex-wrap:wrap}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
+._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1reo15vq{overflow-x:hidden}
 ._1wpz1fhb{align-self:stretch}
 ._4cvr1h6o{align-items:center}
 ._80om13gf{cursor:not-allowed}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._8am5i4x0{-webkit-overflow-scrolling:touch}
-._ca0qv77o{padding-top:var(--ds-space-025,2px)}
-._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
 ._i0dlf1ug{flex-basis:0%}
 ._kqswh2mm{position:relative}
 ._lcxv1rj4{pointer-events:all}
-._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
-._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
-._u5f312x7{padding-right:var(--ds-space-075,6px)}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
 ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
 @media (min-width:30rem){._1tn2fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}}

package/dist/es2019/components/containers.js

@@ -1,4 +1,4 @@
-/* containers.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* containers.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./containers.compiled.css";
 import * as React from 'react';
@@ -48,9 +48,9 @@ export const SelectContainer = props => {
 
 export const valueContainerCSS = () => ({});
 const valueContainerStyles = {
-  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _ca0qv77o _u5f312x7 _n3tdv77o _19bv12x7",
+  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _1q51v77o _y4ti12x7 _85i5v77o _bozg12x7",
   flex: "_1e0c1txw",
-  compact: "_ca0qze3t _u5f312x7 _n3tdze3t _19bv12x7"
+  compact: "_1q51ze3t _y4ti12x7 _85i5ze3t _bozg12x7"
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/components/control.js

@@ -1,4 +1,4 @@
-/* control.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* control.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./control.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/group.js

@@ -1,4 +1,4 @@
-/* group.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* group.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./group.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/indicators.js

@@ -1,4 +1,4 @@
-/* indicators.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* indicators.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./indicators.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/input.js

@@ -1,4 +1,4 @@
-/* input.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* input.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./input.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* a11y-text.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* a11y-text.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./a11y-text.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* dummy-input.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* dummy-input.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./dummy-input.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* required-input.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* required-input.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./required-input.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/menu.js

@@ -1,4 +1,4 @@
-/* menu.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* menu.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./menu.compiled.css";
 import * as React from 'react';

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

@@ -1,48 +1,83 @@
+
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._19itglyw{border:none}
+._2a9v1kw7 *{font:inherit}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
+._195g8ily{margin-inline:calc(var(--ds-space-050, 4px)*-1)}
+._195gv77o{margin-inline:var(--ds-space-025,2px)}
 ._1dqonqa1{border-style:solid}
 ._1h6d14je{border-color:#b7b9be}
+._1h6dpryq{border-color:color-mix(in oklch,var(--tag-border-token) 100%,var(--cm-border-color) var(--cm-border-value))}
+._1mouv77o{margin-block:var(--ds-space-025,2px)}._119b16y8{--tag-border-token:var(--ds-border-accent-red,#e2483d)}
+._119b1b2s{--tag-border-token:var(--ds-border-accent-orange,#e06c00)}
+._119b1crs{--tag-border-token:var(--ds-border-accent-green,#22a06b)}
+._119b1h3o{--tag-border-token:var(--ds-border-accent-teal,#2898bd)}
+._119b1hqq{--tag-border-token:var(--ds-border-accent-purple,#af59e1)}
+._119b1w55{--tag-border-token:var(--ds-border-accent-blue,#357de8)}
+._119b8yml{--tag-border-token:var(--ds-border-accent-gray,#7d818a)}
+._119bfeiv{--tag-border-token:var(--ds-border-accent-yellow,#b38600)}
+._119bnf89{--tag-border-token:var(--ds-border-accent-lime,#6a9a23)}
+._119buwd0{--tag-border-token:var(--ds-border-accent-magenta,#cd519d)}
+._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
 ._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
+._13muu67f{--cm-border-color:#fff}
+._16jlidpf{flex-grow:0}
 ._16qs7ex6{box-shadow:0 0 0 2px var(--ds-surface,transparent),0 0 0 4px var(--ds-border-focused,transparent)}
 ._18m915vq{overflow-y:hidden}
 ._1bah1h6o{justify-content:center}
 ._1bto1l2s{text-overflow:ellipsis}
+._1e0c116y{display:inline-flex}
 ._1e0c1kw7{display:inherit}
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
+._1k671038{--border-l-factor:1.33}
+._1o9zkb7n{flex-shrink:1}
 ._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
 ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1reo15vq{overflow-x:hidden}
+._1tkeidpf{min-height:0}
+._1ul9idpf{min-width:0}
 ._1ul9ze3t{min-width:var(--ds-space-0,0)}
 ._1wpz1h6o{align-self:center}
 ._4cvr1h6o{align-items:center}
+._4t3i1k92{height:1.25rem}
 ._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
+._80om73ad{cursor:default}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
 ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
+._bfhk1dpa{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
 ._bfhkb1q9{background-color:var(--ds-UNSAFE-transparent,transparent)}
 ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
 ._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
+._i0dl1wug{flex-basis:auto}
+._kqswh2mm{position:relative}
 ._lswu1dx5{fill:var(--ds-text,#000)}
 ._lswu1rrc{fill:var(--ds-text-selected,#000)}
 ._o5721q9c{white-space:nowrap}
+._oe6mmko7{--cm-border-value:45%}
 ._p12f1osq{max-width:100%}
+._p12ff6dh{max-width:11.25rem}
 ._r06hglyw{-webkit-appearance:none;appearance:none}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syaz1kw7{color:inherit}
 ._syaz1wum{color:var(--ds-text-selected,#333)}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._syazjpor{color:var(--ds-text,#333)}
+._vchhusvi{box-sizing:border-box}
 ._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}
+[data-color-mode=dark] ._hg5mr3uz{--cm-border-color:#000}
+[data-color-mode=dark] ._u8p61h4e{--border-l-factor:0.7}
 ._1ah312gs:focus-visible{outline-offset:-2px}
 ._13br1jjn:hover{fill:var(--ds-text-danger,#000)}
 ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
 ._i5f81jjn:active{fill:var(--ds-text-danger,#000)}
-@media screen and (-ms-high-contrast:active){._1aewe4h9{border-width:var(--ds-border-width,1px)}._6up51j28{border-color:transparent}._1xdnnqa1{border-style:solid}._3yq3glyw{border:none}}
+@media screen and (-ms-high-contrast:active){._1aewe4h9{border-width:var(--ds-border-width,1px)}._6up51j28{border-color:transparent}._1xdnnqa1{border-style:solid}._3yq3glyw{border:none}}
+@supports (color:oklch(from white l c h)){._1easrqqc{border-color:oklch(from var(--tag-border-token) calc(l * var(--border-l-factor)) c h)}}