@atlaskit/react-select 3.15.2 → 3.15.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/react-select
 
+## 3.15.4
+
+### Patch Changes
+
+- [`c23fa87416661`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c23fa87416661) -
+  [ux] Fixes bug where tags were overlapping in multi-select in smaller screen sizes.
+- Updated dependencies
+
+## 3.15.3
+
+### Patch Changes
+
+- [`ea970883e4943`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ea970883e4943) -
+  [ux] Fixes bug where tags were overlapping in multi-select in smaller screen sizes.
+- Updated dependencies
+
 ## 3.15.2
 
 ### Patch Changes

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

@@ -1,4 +1,5 @@
 ._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)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._1e0c11p5{display:grid}
@@ -7,12 +8,14 @@
 ._1n261g80{flex-wrap:wrap}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._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}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._8am5i4x0{-webkit-overflow-scrolling:touch}

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

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react2 = require("@compiled/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _getStyleProps4 = require("../../get-style-props");
 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); }
 // ==============================
@@ -56,9 +57,13 @@ var SelectContainer = exports.SelectContainer = function SelectContainer(props)
 // ==============================
 
 var valueContainerStyles = {
-  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _1q51v77o _y4ti12x7 _85i5v77o _bozg12x7",
+  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _y4ti12x7 _bozg12x7",
+  verticalPaddingStandard: "_1q51v77o _85i5v77o",
+  verticalPaddingTagUpliftMulti: "_1q511b66 _85i51b66",
+  verticalPaddingTagUpliftCompactMulti: "_1q51v77o _85i5v77o",
+  verticalPaddingCompactNonUplift: "_1q51ze3t _85i5ze3t",
   flex: "_1e0c1txw",
-  compact: "_1q51ze3t _y4ti12x7 _85i5ze3t _bozg12x7"
+  flexWithGap: "_zulp1b66 _1e0c1txw _1n261g80"
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -77,9 +82,12 @@ var ValueContainer = exports.ValueContainer = function ValueContainer(props) {
     }),
     css = _getStyleProps2.css,
     className = _getStyleProps2.className;
+  var ffTagUplifts = (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts');
+  var tagUpliftMultiVertical = ffTagUplifts && isMulti;
+  var tagUpliftChipRow = ffTagUplifts && isMulti && hasValue && controlShouldRenderValue;
   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, xcss, '-ValueContainer')])
+    className: (0, _runtime.ax)([valueContainerStyles.default, tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingTagUpliftCompactMulti, tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingTagUpliftMulti, !tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingStandard, !tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingCompactNonUplift, isMulti && hasValue && controlShouldRenderValue && valueContainerStyles.flex, tagUpliftChipRow && valueContainerStyles.flexWithGap, (0, _react2.cx)(className, xcss, '-ValueContainer')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

package/dist/cjs/components/containers/value-container.compiled.css

@@ -1,13 +1,16 @@
-._16jlkb7n{flex-grow:1}
+
+._zulp1b66{gap:var(--ds-space-050,4px)}._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._1e0c11p5{display:grid}
 ._1e0c1txw{display:flex}
 ._1n261g80{flex-wrap:wrap}
 ._1o9zkb7n{flex-shrink:1}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1reo15vq{overflow-x:hidden}
 ._4cvr1h6o{align-items:center}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._8am5i4x0{-webkit-overflow-scrolling:touch}

package/dist/cjs/components/containers/value-container.js

@@ -12,12 +12,17 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react2 = require("@compiled/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _getStyleProps2 = require("../../get-style-props");
 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); }
 var valueContainerStyles = {
-  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _1q51v77o _y4ti12x7 _85i5v77o _bozg12x7",
+  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _y4ti12x7 _bozg12x7",
+  verticalPaddingStandard: "_1q51v77o _85i5v77o",
+  verticalPaddingTagUpliftMulti: "_1q511b66 _85i51b66",
+  verticalPaddingTagUpliftCompactMulti: "_1q51v77o _85i5v77o",
+  verticalPaddingCompactNonUplift: "_1q51ze3t _85i5ze3t",
   flex: "_1e0c1txw",
-  compact: "_1q51ze3t _y4ti12x7 _85i5ze3t _bozg12x7"
+  flexWithGap: "_zulp1b66 _1e0c1txw _1n261g80"
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -36,9 +41,12 @@ var ValueContainer = exports.ValueContainer = function ValueContainer(props) {
     }),
     css = _getStyleProps.css,
     className = _getStyleProps.className;
+  var ffTagUplifts = (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts');
+  var tagUpliftMultiVertical = ffTagUplifts && isMulti;
+  var tagUpliftChipRow = ffTagUplifts && isMulti && hasValue && controlShouldRenderValue;
   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, xcss, '-ValueContainer')])
+    className: (0, _runtime.ax)([valueContainerStyles.default, tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingTagUpliftCompactMulti, tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingTagUpliftMulti, !tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingStandard, !tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingCompactNonUplift, isMulti && hasValue && controlShouldRenderValue && valueContainerStyles.flex, tagUpliftChipRow && valueContainerStyles.flexWithGap, (0, _react2.cx)(className, xcss, '-ValueContainer')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

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

@@ -1,4 +1,5 @@
 ._11c81kw7{font:inherit}
+._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)}
 ._11q7idpf{background:0}
 ._19itidpf{border:0}
 ._1h9u1kw7:after{font:inherit}
@@ -8,8 +9,11 @@
 ._nd5l1sux{grid-area:1/1/2/3}
 ._nd5l1yjy{grid-area:1/2}
 ._195gv77o{margin-inline:var(--ds-space-025,2px)}
+._195gze3t{margin-inline:var(--ds-space-0,0)}
 ._1mouv77o{margin-block:var(--ds-space-025,2px)}
+._1mouze3t{margin-block:var(--ds-space-0,0)}
 ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
 ._12ji1r31{outline-color:currentColor}
 ._12y3idpf{outline-width:0}
 ._16jlkb7n{flex-grow:1}

package/dist/cjs/components/input.js

@@ -20,11 +20,13 @@ var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName", "testId
 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); }
 var inputStylesOld = {
   root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _1e0c1n7u _yv0e12qd _syazi7uo _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
-  disabled: "_3um015vq"
+  disabled: "_3um015vq",
+  labellingFFStyles: "_11c8wadc _1mouze3t _195gze3t _1rjcze3t"
 };
 var inputStyles = {
   root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _kqswh2mm _1e0c1txw _yv0e12qd _syazi7uo _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
-  disabled: "_3um015vq"
+  disabled: "_3um015vq",
+  labellingFFStyles: "_11c8wadc _1mouze3t _195gze3t _1rjcze3t"
 };
 var nativeInputStylesOld = null;
 var nativeInputStyles = null;
@@ -32,7 +34,8 @@ var hidden = null;
 var Input = function Input(props) {
   var builtinCX = props.cx,
     value = props.value,
-    xcss = props.xcss;
+    xcss = props.xcss,
+    isMulti = props.isMulti;
   var _cleanCommonProps = (0, _cleanCommonProps2.cleanCommonProps)(props),
     innerRef = _cleanCommonProps.innerRef,
     isDisabled = _cleanCommonProps.isDisabled,
@@ -46,13 +49,14 @@ var Input = function Input(props) {
     }),
     css = _getStyleProps.css,
     className = _getStyleProps.className;
+  var ffTagUplifts = (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts');
   if ((0, _platformFeatureFlags.fg)('platform_fix_input_component_styling')) {
     return /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       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, '-Input')]),
+      className: (0, _runtime.ax)([inputStyles.root, isMulti && ffTagUplifts && inputStyles.labellingFFStyles, 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)({
@@ -70,7 +74,7 @@ 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)([inputStylesOld.root, isDisabled && inputStylesOld.disabled, (0, _react2.cx)(className, xcss, '-Input')]),
+    className: (0, _runtime.ax)([inputStylesOld.root, isMulti && ffTagUplifts && inputStylesOld.labellingFFStyles, isDisabled && inputStylesOld.disabled, (0, _react2.cx)(className, xcss, '-Input')]),
     "data-value": value || '',
     "data-testid": dataId && "".concat(dataId, "-container")
   }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({

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

@@ -3,11 +3,10 @@
 ._2a9v1kw7 *{font:inherit}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._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)}
+._195gze3t{margin-inline:var(--ds-space-0,0)}
 ._1dqonqa1{border-style:solid}
 ._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)}
+._1mouze3t{margin-block:var(--ds-space-0,0)}._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)}
@@ -17,36 +16,40 @@
 ._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)}
+._13lsf1ug>*{flex-basis:0%}
 ._13muu67f{--cm-border-color:#fff}
 ._16jlidpf{flex-grow:0}
+._16jlkb7n{flex-grow:1}
 ._16qs1xv8{box-shadow:0 0 0 2px var(--ds-surface,#fff),0 0 0 4px var(--ds-border-focused,#4688ec)}
 ._18m915vq{overflow-y:hidden}
 ._1e0c116y{display:inline-flex}
 ._1e0c1txw{display:flex}
 ._1k671038{--border-l-factor:1.33}
 ._1o9zkb7n{flex-shrink:1}
-._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
+._1ouwze3t>*{min-width:var(--ds-space-0,0)}
 ._1reo15vq{overflow-x:hidden}
 ._1tkeidpf{min-height:0}
-._1ul9idpf{min-width:0}
 ._1ul9ze3t{min-width:var(--ds-space-0,0)}
+._1wpz1h6o{align-self:center}
+._3pxh1h6o>*{align-items:center}
 ._4cvr1h6o{align-items:center}
 ._4t3i1k92{height:1.25rem}
-._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
 ._80om73ad{cursor:default}
 ._bfhk1dpa{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._d0dz1txw>*{display:flex}
 ._i0dl1wug{flex-basis:auto}
+._i0dlf1ug{flex-basis:0%}
 ._kqswh2mm{position:relative}
 ._oe6mmko7{--cm-border-value:45%}
-._p12f1osq{max-width:100%}
 ._p12ff6dh{max-width:11.25rem}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
+._v5ynkb7n>*{flex-shrink:1}
 ._vchhusvi{box-sizing:border-box}
+._zdxokb7n>*{flex-grow:1}
 [data-color-mode=dark] ._hg5mr3uz{--cm-border-color:#000}
 [data-color-mode=dark] ._u8p61h4e{--border-l-factor:0.7}
 @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}}

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

@@ -20,11 +20,8 @@ var _multiValueLabel = require("./multi-value-label");
 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"
+  root: "_16jlidpf _1o9zkb7n _i0dl1wug _1mouze3t _195gze3t _4cvr1h6o _1e0c1txw _1ul9ze3t _zdxokb7n _v5ynkb7n _13lsf1ug _3pxh1h6o _d0dz1txw _1ouwze3t"
 };
 
 // Tag-like color styles
@@ -49,8 +46,8 @@ var tagLikeBorderFilterStyles = null;
 // 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",
+  root: "_1reo15vq _18m915vq _2rko12b0 _11c8wadc _1dqonqa1 _189ee4h9 _1mouze3t _195gze3t _1e0c116y _vchhusvi _kqswh2mm _4cvr1h6o _1wpz1h6o _1ul9ze3t _1o9zkb7n _p12ff6dh _4t3i1k92 _bfhksm61 _syazi7uo _80om73ad _3yq3glyw",
+  labelWrapper: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _11c8wadc _1e0c1txw _4cvr1h6o _1ul9ze3t _1tkeidpf _2a9v1kw7",
   disabled: "_syaz1gmx _bfhki8nm",
   focused: "_syaz6x5g _bfhk1dpa _16qs1xv8 _1aewe4h9 _6up51j28 _1xdnnqa1"
 };
@@ -94,6 +91,7 @@ var MultiValue = function MultiValue(props) {
     removeCss = _getStyleProps3.css,
     removeClassName = _getStyleProps3.className;
   var hasCustomLabel = Label !== _multiValueLabel.MultiValueLabel;
+  // Plain labels: use Tag with fillContainer so it truncates like tag-like structure.
   if (ffTagUplifts && isPlainLabel && !hasCustomLabel) {
     var _ref = data !== null && data !== void 0 ? data : {},
       elemBefore = _ref.elemBefore,
@@ -101,9 +99,7 @@ var MultiValue = function MultiValue(props) {
     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, {
+    }), /*#__PURE__*/React.createElement(_tag.default, {
       text: labelText,
       isRemovable: !isDisabled,
       removeButtonLabel: "".concat(labelText, ", remove"),
@@ -113,12 +109,12 @@ var MultiValue = function MultiValue(props) {
         return false;
       },
       color: tagColor !== null && tagColor !== void 0 ? tagColor : 'gray',
-      elemBefore: elemBefore
-    })));
+      elemBefore: elemBefore,
+      hasMargin: false
+    }));
   }
 
-  // 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.
+  // FF on + custom content → tag-like path
   if (ffTagUplifts) {
     var colorKey = data === null || data === void 0 ? void 0 : data.color;
     return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({

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

@@ -1,4 +1,5 @@
 ._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)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._1e0c11p5{display:grid}
@@ -7,12 +8,14 @@
 ._1n261g80{flex-wrap:wrap}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._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}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._8am5i4x0{-webkit-overflow-scrolling:touch}

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

@@ -4,6 +4,7 @@ import "./containers.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../../get-style-props';
 
 // ==============================
@@ -51,9 +52,13 @@ export const SelectContainer = props => {
 // ==============================
 
 const valueContainerStyles = {
-  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _1q51v77o _y4ti12x7 _85i5v77o _bozg12x7",
+  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _y4ti12x7 _bozg12x7",
+  verticalPaddingStandard: "_1q51v77o _85i5v77o",
+  verticalPaddingTagUpliftMulti: "_1q511b66 _85i51b66",
+  verticalPaddingTagUpliftCompactMulti: "_1q51v77o _85i5v77o",
+  verticalPaddingCompactNonUplift: "_1q51ze3t _85i5ze3t",
   flex: "_1e0c1txw",
-  compact: "_1q51ze3t _y4ti12x7 _85i5ze3t _bozg12x7"
+  flexWithGap: "_zulp1b66 _1e0c1txw _1n261g80"
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -77,9 +82,12 @@ export const ValueContainer = props => {
     'value-container--is-multi': isMulti,
     'value-container--has-value': hasValue
   });
+  const ffTagUplifts = fg('platform-dst-lozenge-tag-badge-visual-uplifts');
+  const tagUpliftMultiVertical = ffTagUplifts && isMulti;
+  const tagUpliftChipRow = ffTagUplifts && isMulti && hasValue && controlShouldRenderValue;
   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, xcss, '-ValueContainer')])
+    className: ax([valueContainerStyles.default, tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingTagUpliftCompactMulti, tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingTagUpliftMulti, !tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingStandard, !tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingCompactNonUplift, isMulti && hasValue && controlShouldRenderValue && valueContainerStyles.flex, tagUpliftChipRow && valueContainerStyles.flexWithGap, cx(className, xcss, '-ValueContainer')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

package/dist/es2019/components/containers/value-container.compiled.css

@@ -1,13 +1,16 @@
-._16jlkb7n{flex-grow:1}
+
+._zulp1b66{gap:var(--ds-space-050,4px)}._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._1e0c11p5{display:grid}
 ._1e0c1txw{display:flex}
 ._1n261g80{flex-wrap:wrap}
 ._1o9zkb7n{flex-shrink:1}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1reo15vq{overflow-x:hidden}
 ._4cvr1h6o{align-items:center}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._8am5i4x0{-webkit-overflow-scrolling:touch}

package/dist/es2019/components/containers/value-container.js

@@ -4,11 +4,16 @@ import "./value-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../../get-style-props';
 const valueContainerStyles = {
-  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _1q51v77o _y4ti12x7 _85i5v77o _bozg12x7",
+  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _y4ti12x7 _bozg12x7",
+  verticalPaddingStandard: "_1q51v77o _85i5v77o",
+  verticalPaddingTagUpliftMulti: "_1q511b66 _85i51b66",
+  verticalPaddingTagUpliftCompactMulti: "_1q51v77o _85i5v77o",
+  verticalPaddingCompactNonUplift: "_1q51ze3t _85i5ze3t",
   flex: "_1e0c1txw",
-  compact: "_1q51ze3t _y4ti12x7 _85i5ze3t _bozg12x7"
+  flexWithGap: "_zulp1b66 _1e0c1txw _1n261g80"
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -32,9 +37,12 @@ export const ValueContainer = props => {
     'value-container--is-multi': isMulti,
     'value-container--has-value': hasValue
   });
+  const ffTagUplifts = fg('platform-dst-lozenge-tag-badge-visual-uplifts');
+  const tagUpliftMultiVertical = ffTagUplifts && isMulti;
+  const tagUpliftChipRow = ffTagUplifts && isMulti && hasValue && controlShouldRenderValue;
   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, xcss, '-ValueContainer')])
+    className: ax([valueContainerStyles.default, tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingTagUpliftCompactMulti, tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingTagUpliftMulti, !tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingStandard, !tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingCompactNonUplift, isMulti && hasValue && controlShouldRenderValue && valueContainerStyles.flex, tagUpliftChipRow && valueContainerStyles.flexWithGap, cx(className, xcss, '-ValueContainer')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

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

@@ -1,4 +1,5 @@
 ._11c81kw7{font:inherit}
+._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)}
 ._11q7idpf{background:0}
 ._19itidpf{border:0}
 ._1h9u1kw7:after{font:inherit}
@@ -8,8 +9,11 @@
 ._nd5l1sux{grid-area:1/1/2/3}
 ._nd5l1yjy{grid-area:1/2}
 ._195gv77o{margin-inline:var(--ds-space-025,2px)}
+._195gze3t{margin-inline:var(--ds-space-0,0)}
 ._1mouv77o{margin-block:var(--ds-space-025,2px)}
+._1mouze3t{margin-block:var(--ds-space-0,0)}
 ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
 ._12ji1r31{outline-color:currentColor}
 ._12y3idpf{outline-width:0}
 ._16jlkb7n{flex-grow:1}

package/dist/es2019/components/input.js

@@ -9,11 +9,13 @@ import { getStyleProps } from '../get-style-props';
 import { cleanCommonProps } from '../internal/clean-common-props';
 const inputStylesOld = {
   root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _1e0c1n7u _yv0e12qd _syazi7uo _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
-  disabled: "_3um015vq"
+  disabled: "_3um015vq",
+  labellingFFStyles: "_11c8wadc _1mouze3t _195gze3t _1rjcze3t"
 };
 const inputStyles = {
   root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _kqswh2mm _1e0c1txw _yv0e12qd _syazi7uo _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
-  disabled: "_3um015vq"
+  disabled: "_3um015vq",
+  labellingFFStyles: "_11c8wadc _1mouze3t _195gze3t _1rjcze3t"
 };
 const nativeInputStylesOld = null;
 const nativeInputStyles = null;
@@ -22,7 +24,8 @@ const Input = props => {
   const {
     cx: builtinCX,
     value,
-    xcss
+    xcss,
+    isMulti
   } = props;
   const {
     innerRef,
@@ -39,13 +42,14 @@ const Input = props => {
   } = getStyleProps(props, 'input', {
     'input-container': true
   });
+  const ffTagUplifts = fg('platform-dst-lozenge-tag-badge-visual-uplifts');
   if (fg('platform_fix_input_component_styling')) {
     return /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       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, '-Input')]),
+      className: ax([inputStyles.root, isMulti && ffTagUplifts && inputStyles.labellingFFStyles, isDisabled && inputStyles.disabled, cx(className, xcss, '-Input')]),
       "data-value": value || '',
       "data-testid": dataId && `${dataId}-container`
     }, /*#__PURE__*/React.createElement("input", _extends({
@@ -63,7 +67,7 @@ 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([inputStylesOld.root, isDisabled && inputStylesOld.disabled, cx(className, xcss, '-Input')]),
+    className: ax([inputStylesOld.root, isMulti && ffTagUplifts && inputStylesOld.labellingFFStyles, isDisabled && inputStylesOld.disabled, cx(className, xcss, '-Input')]),
     "data-value": value || '',
     "data-testid": dataId && `${dataId}-container`
   }, /*#__PURE__*/React.createElement("input", _extends({

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

@@ -3,11 +3,10 @@
 ._2a9v1kw7 *{font:inherit}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._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)}
+._195gze3t{margin-inline:var(--ds-space-0,0)}
 ._1dqonqa1{border-style:solid}
 ._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)}
+._1mouze3t{margin-block:var(--ds-space-0,0)}._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)}
@@ -17,36 +16,40 @@
 ._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)}
+._13lsf1ug>*{flex-basis:0%}
 ._13muu67f{--cm-border-color:#fff}
 ._16jlidpf{flex-grow:0}
+._16jlkb7n{flex-grow:1}
 ._16qs1xv8{box-shadow:0 0 0 2px var(--ds-surface,#fff),0 0 0 4px var(--ds-border-focused,#4688ec)}
 ._18m915vq{overflow-y:hidden}
 ._1e0c116y{display:inline-flex}
 ._1e0c1txw{display:flex}
 ._1k671038{--border-l-factor:1.33}
 ._1o9zkb7n{flex-shrink:1}
-._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
+._1ouwze3t>*{min-width:var(--ds-space-0,0)}
 ._1reo15vq{overflow-x:hidden}
 ._1tkeidpf{min-height:0}
-._1ul9idpf{min-width:0}
 ._1ul9ze3t{min-width:var(--ds-space-0,0)}
+._1wpz1h6o{align-self:center}
+._3pxh1h6o>*{align-items:center}
 ._4cvr1h6o{align-items:center}
 ._4t3i1k92{height:1.25rem}
-._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
 ._80om73ad{cursor:default}
 ._bfhk1dpa{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._d0dz1txw>*{display:flex}
 ._i0dl1wug{flex-basis:auto}
+._i0dlf1ug{flex-basis:0%}
 ._kqswh2mm{position:relative}
 ._oe6mmko7{--cm-border-value:45%}
-._p12f1osq{max-width:100%}
 ._p12ff6dh{max-width:11.25rem}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
+._v5ynkb7n>*{flex-shrink:1}
 ._vchhusvi{box-sizing:border-box}
+._zdxokb7n>*{flex-grow:1}
 [data-color-mode=dark] ._hg5mr3uz{--cm-border-color:#000}
 [data-color-mode=dark] ._u8p61h4e{--border-l-factor:0.7}
 @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}}

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

@@ -8,11 +8,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import Tag from '@atlaskit/tag';
 import { getStyleProps } from '../get-style-props';
 import { MultiValueLabel } from './multi-value-label';
-// 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"
+  root: "_16jlidpf _1o9zkb7n _i0dl1wug _1mouze3t _195gze3t _4cvr1h6o _1e0c1txw _1ul9ze3t _zdxokb7n _v5ynkb7n _13lsf1ug _3pxh1h6o _d0dz1txw _1ouwze3t"
 };
 
 // Tag-like color styles
@@ -37,8 +34,8 @@ const tagLikeBorderFilterStyles = null;
 // 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",
+  root: "_1reo15vq _18m915vq _2rko12b0 _11c8wadc _1dqonqa1 _189ee4h9 _1mouze3t _195gze3t _1e0c116y _vchhusvi _kqswh2mm _4cvr1h6o _1wpz1h6o _1ul9ze3t _1o9zkb7n _p12ff6dh _4t3i1k92 _bfhksm61 _syazi7uo _80om73ad _3yq3glyw",
+  labelWrapper: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _11c8wadc _1e0c1txw _4cvr1h6o _1ul9ze3t _1tkeidpf _2a9v1kw7",
   disabled: "_syaz1gmx _bfhki8nm",
   focused: "_syaz6x5g _bfhk1dpa _16qs1xv8 _1aewe4h9 _6up51j28 _1xdnnqa1"
 };
@@ -89,6 +86,7 @@ const MultiValue = props => {
     'multi-value__remove': true
   });
   const hasCustomLabel = Label !== MultiValueLabel;
+  // Plain labels: use Tag with fillContainer so it truncates like tag-like structure.
   if (ffTagUplifts && isPlainLabel && !hasCustomLabel) {
     const {
       elemBefore,
@@ -97,9 +95,7 @@ const MultiValue = props => {
     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, {
+    }), /*#__PURE__*/React.createElement(Tag, {
       text: labelText,
       isRemovable: !isDisabled,
       removeButtonLabel: `${labelText}, remove`,
@@ -109,12 +105,12 @@ const MultiValue = props => {
         return false;
       },
       color: tagColor !== null && tagColor !== void 0 ? tagColor : 'gray',
-      elemBefore: elemBefore
-    })));
+      elemBefore: elemBefore,
+      hasMargin: false
+    }));
   }
 
-  // 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.
+  // FF on + custom content → tag-like path
   if (ffTagUplifts) {
     const colorKey = data === null || data === void 0 ? void 0 : data.color;
     return /*#__PURE__*/React.createElement("div", _extends({

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

@@ -1,4 +1,5 @@
 ._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)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._1e0c11p5{display:grid}
@@ -7,12 +8,14 @@
 ._1n261g80{flex-wrap:wrap}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._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}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._8am5i4x0{-webkit-overflow-scrolling:touch}

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

@@ -4,6 +4,7 @@ import "./containers.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../../get-style-props';
 
 // ==============================
@@ -48,9 +49,13 @@ export var SelectContainer = function SelectContainer(props) {
 // ==============================
 
 var valueContainerStyles = {
-  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _1q51v77o _y4ti12x7 _85i5v77o _bozg12x7",
+  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _y4ti12x7 _bozg12x7",
+  verticalPaddingStandard: "_1q51v77o _85i5v77o",
+  verticalPaddingTagUpliftMulti: "_1q511b66 _85i51b66",
+  verticalPaddingTagUpliftCompactMulti: "_1q51v77o _85i5v77o",
+  verticalPaddingCompactNonUplift: "_1q51ze3t _85i5ze3t",
   flex: "_1e0c1txw",
-  compact: "_1q51ze3t _y4ti12x7 _85i5ze3t _bozg12x7"
+  flexWithGap: "_zulp1b66 _1e0c1txw _1n261g80"
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -69,9 +74,12 @@ export var ValueContainer = function ValueContainer(props) {
     }),
     css = _getStyleProps2.css,
     className = _getStyleProps2.className;
+  var ffTagUplifts = fg('platform-dst-lozenge-tag-badge-visual-uplifts');
+  var tagUpliftMultiVertical = ffTagUplifts && isMulti;
+  var tagUpliftChipRow = ffTagUplifts && isMulti && hasValue && controlShouldRenderValue;
   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, xcss, '-ValueContainer')])
+    className: ax([valueContainerStyles.default, tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingTagUpliftCompactMulti, tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingTagUpliftMulti, !tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingStandard, !tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingCompactNonUplift, isMulti && hasValue && controlShouldRenderValue && valueContainerStyles.flex, tagUpliftChipRow && valueContainerStyles.flexWithGap, cx(className, xcss, '-ValueContainer')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

package/dist/esm/components/containers/value-container.compiled.css

@@ -1,13 +1,16 @@
-._16jlkb7n{flex-grow:1}
+
+._zulp1b66{gap:var(--ds-space-050,4px)}._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._1e0c11p5{display:grid}
 ._1e0c1txw{display:flex}
 ._1n261g80{flex-wrap:wrap}
 ._1o9zkb7n{flex-shrink:1}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1reo15vq{overflow-x:hidden}
 ._4cvr1h6o{align-items:center}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._8am5i4x0{-webkit-overflow-scrolling:touch}

package/dist/esm/components/containers/value-container.js

@@ -4,11 +4,16 @@ import "./value-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../../get-style-props';
 var valueContainerStyles = {
-  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _1q51v77o _y4ti12x7 _85i5v77o _bozg12x7",
+  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _y4ti12x7 _bozg12x7",
+  verticalPaddingStandard: "_1q51v77o _85i5v77o",
+  verticalPaddingTagUpliftMulti: "_1q511b66 _85i51b66",
+  verticalPaddingTagUpliftCompactMulti: "_1q51v77o _85i5v77o",
+  verticalPaddingCompactNonUplift: "_1q51ze3t _85i5ze3t",
   flex: "_1e0c1txw",
-  compact: "_1q51ze3t _y4ti12x7 _85i5ze3t _bozg12x7"
+  flexWithGap: "_zulp1b66 _1e0c1txw _1n261g80"
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -27,9 +32,12 @@ export var ValueContainer = function ValueContainer(props) {
     }),
     css = _getStyleProps.css,
     className = _getStyleProps.className;
+  var ffTagUplifts = fg('platform-dst-lozenge-tag-badge-visual-uplifts');
+  var tagUpliftMultiVertical = ffTagUplifts && isMulti;
+  var tagUpliftChipRow = ffTagUplifts && isMulti && hasValue && controlShouldRenderValue;
   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, xcss, '-ValueContainer')])
+    className: ax([valueContainerStyles.default, tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingTagUpliftCompactMulti, tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingTagUpliftMulti, !tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingStandard, !tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingCompactNonUplift, isMulti && hasValue && controlShouldRenderValue && valueContainerStyles.flex, tagUpliftChipRow && valueContainerStyles.flexWithGap, cx(className, xcss, '-ValueContainer')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

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

@@ -1,4 +1,5 @@
 ._11c81kw7{font:inherit}
+._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)}
 ._11q7idpf{background:0}
 ._19itidpf{border:0}
 ._1h9u1kw7:after{font:inherit}
@@ -8,8 +9,11 @@
 ._nd5l1sux{grid-area:1/1/2/3}
 ._nd5l1yjy{grid-area:1/2}
 ._195gv77o{margin-inline:var(--ds-space-025,2px)}
+._195gze3t{margin-inline:var(--ds-space-0,0)}
 ._1mouv77o{margin-block:var(--ds-space-025,2px)}
+._1mouze3t{margin-block:var(--ds-space-0,0)}
 ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
 ._12ji1r31{outline-color:currentColor}
 ._12y3idpf{outline-width:0}
 ._16jlkb7n{flex-grow:1}

package/dist/esm/components/input.js

@@ -11,11 +11,13 @@ import { getStyleProps } from '../get-style-props';
 import { cleanCommonProps } from '../internal/clean-common-props';
 var inputStylesOld = {
   root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _1e0c1n7u _yv0e12qd _syazi7uo _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
-  disabled: "_3um015vq"
+  disabled: "_3um015vq",
+  labellingFFStyles: "_11c8wadc _1mouze3t _195gze3t _1rjcze3t"
 };
 var inputStyles = {
   root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _kqswh2mm _1e0c1txw _yv0e12qd _syazi7uo _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
-  disabled: "_3um015vq"
+  disabled: "_3um015vq",
+  labellingFFStyles: "_11c8wadc _1mouze3t _195gze3t _1rjcze3t"
 };
 var nativeInputStylesOld = null;
 var nativeInputStyles = null;
@@ -23,7 +25,8 @@ var hidden = null;
 var Input = function Input(props) {
   var builtinCX = props.cx,
     value = props.value,
-    xcss = props.xcss;
+    xcss = props.xcss,
+    isMulti = props.isMulti;
   var _cleanCommonProps = cleanCommonProps(props),
     innerRef = _cleanCommonProps.innerRef,
     isDisabled = _cleanCommonProps.isDisabled,
@@ -37,13 +40,14 @@ var Input = function Input(props) {
     }),
     css = _getStyleProps.css,
     className = _getStyleProps.className;
+  var ffTagUplifts = fg('platform-dst-lozenge-tag-badge-visual-uplifts');
   if (fg('platform_fix_input_component_styling')) {
     return /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       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, '-Input')]),
+      className: ax([inputStyles.root, isMulti && ffTagUplifts && inputStyles.labellingFFStyles, isDisabled && inputStyles.disabled, cx(className, xcss, '-Input')]),
       "data-value": value || '',
       "data-testid": dataId && "".concat(dataId, "-container")
     }, /*#__PURE__*/React.createElement("input", _extends({
@@ -61,7 +65,7 @@ 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([inputStylesOld.root, isDisabled && inputStylesOld.disabled, cx(className, xcss, '-Input')]),
+    className: ax([inputStylesOld.root, isMulti && ffTagUplifts && inputStylesOld.labellingFFStyles, isDisabled && inputStylesOld.disabled, cx(className, xcss, '-Input')]),
     "data-value": value || '',
     "data-testid": dataId && "".concat(dataId, "-container")
   }, /*#__PURE__*/React.createElement("input", _extends({

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

@@ -3,11 +3,10 @@
 ._2a9v1kw7 *{font:inherit}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._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)}
+._195gze3t{margin-inline:var(--ds-space-0,0)}
 ._1dqonqa1{border-style:solid}
 ._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)}
+._1mouze3t{margin-block:var(--ds-space-0,0)}._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)}
@@ -17,36 +16,40 @@
 ._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)}
+._13lsf1ug>*{flex-basis:0%}
 ._13muu67f{--cm-border-color:#fff}
 ._16jlidpf{flex-grow:0}
+._16jlkb7n{flex-grow:1}
 ._16qs1xv8{box-shadow:0 0 0 2px var(--ds-surface,#fff),0 0 0 4px var(--ds-border-focused,#4688ec)}
 ._18m915vq{overflow-y:hidden}
 ._1e0c116y{display:inline-flex}
 ._1e0c1txw{display:flex}
 ._1k671038{--border-l-factor:1.33}
 ._1o9zkb7n{flex-shrink:1}
-._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
+._1ouwze3t>*{min-width:var(--ds-space-0,0)}
 ._1reo15vq{overflow-x:hidden}
 ._1tkeidpf{min-height:0}
-._1ul9idpf{min-width:0}
 ._1ul9ze3t{min-width:var(--ds-space-0,0)}
+._1wpz1h6o{align-self:center}
+._3pxh1h6o>*{align-items:center}
 ._4cvr1h6o{align-items:center}
 ._4t3i1k92{height:1.25rem}
-._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
 ._80om73ad{cursor:default}
 ._bfhk1dpa{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._d0dz1txw>*{display:flex}
 ._i0dl1wug{flex-basis:auto}
+._i0dlf1ug{flex-basis:0%}
 ._kqswh2mm{position:relative}
 ._oe6mmko7{--cm-border-value:45%}
-._p12f1osq{max-width:100%}
 ._p12ff6dh{max-width:11.25rem}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
+._v5ynkb7n>*{flex-shrink:1}
 ._vchhusvi{box-sizing:border-box}
+._zdxokb7n>*{flex-grow:1}
 [data-color-mode=dark] ._hg5mr3uz{--cm-border-color:#000}
 [data-color-mode=dark] ._u8p61h4e{--border-l-factor:0.7}
 @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}}

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

@@ -11,11 +11,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import Tag from '@atlaskit/tag';
 import { getStyleProps } from '../get-style-props';
 import { MultiValueLabel } from './multi-value-label';
-// 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"
+  root: "_16jlidpf _1o9zkb7n _i0dl1wug _1mouze3t _195gze3t _4cvr1h6o _1e0c1txw _1ul9ze3t _zdxokb7n _v5ynkb7n _13lsf1ug _3pxh1h6o _d0dz1txw _1ouwze3t"
 };
 
 // Tag-like color styles
@@ -40,8 +37,8 @@ var tagLikeBorderFilterStyles = null;
 // 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",
+  root: "_1reo15vq _18m915vq _2rko12b0 _11c8wadc _1dqonqa1 _189ee4h9 _1mouze3t _195gze3t _1e0c116y _vchhusvi _kqswh2mm _4cvr1h6o _1wpz1h6o _1ul9ze3t _1o9zkb7n _p12ff6dh _4t3i1k92 _bfhksm61 _syazi7uo _80om73ad _3yq3glyw",
+  labelWrapper: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _11c8wadc _1e0c1txw _4cvr1h6o _1ul9ze3t _1tkeidpf _2a9v1kw7",
   disabled: "_syaz1gmx _bfhki8nm",
   focused: "_syaz6x5g _bfhk1dpa _16qs1xv8 _1aewe4h9 _6up51j28 _1xdnnqa1"
 };
@@ -85,6 +82,7 @@ var MultiValue = function MultiValue(props) {
     removeCss = _getStyleProps3.css,
     removeClassName = _getStyleProps3.className;
   var hasCustomLabel = Label !== MultiValueLabel;
+  // Plain labels: use Tag with fillContainer so it truncates like tag-like structure.
   if (ffTagUplifts && isPlainLabel && !hasCustomLabel) {
     var _ref = data !== null && data !== void 0 ? data : {},
       elemBefore = _ref.elemBefore,
@@ -92,9 +90,7 @@ var MultiValue = function MultiValue(props) {
     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, {
+    }), /*#__PURE__*/React.createElement(Tag, {
       text: labelText,
       isRemovable: !isDisabled,
       removeButtonLabel: "".concat(labelText, ", remove"),
@@ -104,12 +100,12 @@ var MultiValue = function MultiValue(props) {
         return false;
       },
       color: tagColor !== null && tagColor !== void 0 ? tagColor : 'gray',
-      elemBefore: elemBefore
-    })));
+      elemBefore: elemBefore,
+      hasMargin: false
+    }));
   }
 
-  // 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.
+  // FF on + custom content → tag-like path
   if (ffTagUplifts) {
     var colorKey = data === null || data === void 0 ? void 0 : data.color;
     return /*#__PURE__*/React.createElement("div", _extends({

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "3.15.2",
+	"version": "3.15.4",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -21,12 +21,12 @@
 	"atlaskit:src": "src/index.tsx",
 	"dependencies": {
 		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/icon": "^34.0.0",
+		"@atlaskit/icon": "^34.2.0",
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "^19.1.0",
-		"@atlaskit/tag": "^14.8.0",
+		"@atlaskit/tag": "^14.11.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",