@atlaskit/react-select 3.13.7 → 3.14.0

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

@@ -1,11 +1,47 @@
-/* multi-value.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* multi-value.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./multi-value.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
 import CrossIcon from '@atlaskit/icon/core/cross';
+import { fg } from '@atlaskit/platform-feature-flags';
+import Tag from '@atlaskit/tag';
 import { getStyleProps } from '../utils';
+// Tag wrapper: Tag has built-in margin; cancel the inline margin so we control spacing
+const tagMarginToken = "var(--ds-space-050, 4px)";
+const multiValueTagWrapperStyles = {
+  root: "_1e0c1txw _1ul9ze3t _1pfhv77o _12l21b66 _6rthv77o _p12f1osq",
+  inner: "_195g8ily"
+};
+
+// Tag-like color styles
+const 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
+const 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.
+const 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"
+};
 const multiValueStyles = {
   root: "_2rko12b0 _1h6d14je _1dqonqa1 _189ee4h9 _1e0c1txw _1ul9ze3t _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _bfhk1j9a _p12f1osq _syazjpor _3yq3glyw",
   disabled: "_syaz1gmx _bfhki8nm",
@@ -73,6 +109,13 @@ export function MultiValueRemove({
     size: "small"
   })));
 }
+const getMultiValueLabelText = (children, data) => {
+  if (typeof children === 'string') {
+    return children;
+  }
+  const label = data === null || data === void 0 ? void 0 : data.label;
+  return typeof label === 'string' ? label : '';
+};
 const MultiValue = props => {
   const {
     children,
@@ -90,7 +133,9 @@ const MultiValue = props => {
     Label,
     Remove
   } = components;
-  const ariaLabel = typeof children === 'string' ? children : data.label;
+  const labelText = getMultiValueLabelText(children, data);
+  const isPlainLabel = typeof children === 'string';
+  const ffTagUplifts = fg('platform-dst-lozenge-tag-badge-visual-uplifts');
   const {
     css: containerCss,
     className: containerClassName
@@ -110,6 +155,75 @@ const MultiValue = props => {
   } = getStyleProps(props, 'multiValueRemove', {
     'multi-value__remove': true
   });
+  const hasCustomLabel = Label !== MultiValueLabel;
+  if (ffTagUplifts && isPlainLabel && !hasCustomLabel) {
+    const {
+      elemBefore,
+      color: tagColor
+    } = data !== null && data !== void 0 ? data : {};
+    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([multiValueTagWrapperStyles.root, cx(props.className, containerClassName, props.xcss, '-multiValue')])
+    }), /*#__PURE__*/React.createElement("div", {
+      className: ax([multiValueTagWrapperStyles.inner])
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: labelText,
+      isRemovable: !isDisabled,
+      removeButtonLabel: `${labelText}, remove`,
+      onBeforeRemoveAction: () => {
+        var _removeProps$onClick;
+        (_removeProps$onClick = removeProps.onClick) === null || _removeProps$onClick === void 0 ? 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) {
+    const colorKey = data === null || data === void 0 ? void 0 : data.color;
+    return /*#__PURE__*/React.createElement("div", _extends({
+      "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: 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, cx(props.className, containerClassName, props.xcss, '-multiValue')])
+    }), /*#__PURE__*/React.createElement("div", {
+      className: 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: {
+        style: removeCss,
+        className: removeClassName,
+        role: 'button',
+        tabIndex: -1,
+        'aria-label': `${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: {
@@ -141,7 +255,7 @@ const MultiValue = props => {
       className: removeClassName,
       role: 'button',
       tabIndex: -1,
-      'aria-label': `${ariaLabel || 'option'}, remove`,
+      'aria-label': `${labelText || 'option'}, remove`,
       ...removeProps
     }
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

package/dist/es2019/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 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./option.compiled.css";
 import * as React from 'react';

package/dist/es2019/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 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./placeholder.compiled.css";
 import * as React from 'react';

package/dist/es2019/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 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./single-value.compiled.css";
 import * as React from 'react';

package/dist/esm/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/esm/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/esm/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';
@@ -49,9 +49,9 @@ export var 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/esm/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/esm/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 _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["data"];

package/dist/esm/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 _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";

package/dist/esm/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 _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName", "testId"];

package/dist/esm/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/esm/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 _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["innerRef"];

package/dist/esm/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/esm/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 _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";

package/dist/esm/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/esm/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 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import "./multi-value.compiled.css";
@@ -8,7 +8,43 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { cx } from '@compiled/react';
 import CrossIcon from '@atlaskit/icon/core/cross';
+import { fg } from '@atlaskit/platform-feature-flags';
+import Tag from '@atlaskit/tag';
 import { getStyleProps } from '../utils';
+// 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",
@@ -79,6 +115,13 @@ export 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,
@@ -92,7 +135,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 = fg('platform-dst-lozenge-tag-badge-visual-uplifts');
   var _getStyleProps = getStyleProps(props, 'multiValue', {
       'multi-value': true,
       'multi-value--is-disabled': isDisabled
@@ -109,6 +154,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", _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([multiValueTagWrapperStyles.root, cx(props.className, containerClassName, props.xcss, '-multiValue')])
+    }), /*#__PURE__*/React.createElement("div", {
+      className: ax([multiValueTagWrapperStyles.inner])
+    }, /*#__PURE__*/React.createElement(Tag, {
+      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", _extends({
+      "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: 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, cx(props.className, containerClassName, props.xcss, '-multiValue')])
+    }), /*#__PURE__*/React.createElement("div", {
+      className: 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({
@@ -139,7 +251,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/esm/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 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./option.compiled.css";
 import * as React from 'react';

package/dist/esm/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 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./placeholder.compiled.css";
 import * as React from 'react';

package/dist/esm/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 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./single-value.compiled.css";
 import * as React from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "3.13.7",
+	"version": "3.14.0",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -20,15 +20,16 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"dependencies": {
-		"@atlaskit/ds-lib": "^5.3.0",
-		"@atlaskit/icon": "^31.0.0",
+		"@atlaskit/ds-lib": "^5.4.0",
+		"@atlaskit/icon": "^32.0.0",
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/spinner": "^19.0.0",
-		"@atlaskit/tokens": "^11.0.0",
+		"@atlaskit/tag": "^14.5.0",
+		"@atlaskit/tokens": "^11.1.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.6",
+		"@compiled/react": "^0.20.0",
 		"@floating-ui/dom": "^1.0.1",
 		"memoize-one": "^6.0.0",
 		"use-isomorphic-layout-effect": "^1.1.2"
@@ -40,7 +41,7 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "workspace:^",
 		"@atlaskit/checkbox": "^17.3.0",
-		"@atlaskit/form": "^15.3.0",
+		"@atlaskit/form": "^15.4.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
@@ -61,6 +62,9 @@
 		},
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
+		},
+		"platform-dst-lozenge-tag-badge-visual-uplifts": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {