@atlaskit/react-select 1.4.0 → 1.4.1

package/dist/cjs/select.js

@@ -1381,7 +1381,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var _this$props10 = this.props,
         clearControlLabel = _this$props10.clearControlLabel,
         isDisabled = _this$props10.isDisabled,
-        isLoading = _this$props10.isLoading;
+        isLoading = _this$props10.isLoading,
+        spacing = _this$props10.spacing;
       var isFocused = this.state.isFocused;
       if (!this.isClearable() || !ClearIndicator || isDisabled || !this.hasValue() || isLoading) {
         return null;
@@ -1391,11 +1392,13 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onClearIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
+      var isCompact = spacing === 'compact';
       return /*#__PURE__*/_react.default.createElement(ClearIndicator, (0, _extends2.default)({
         clearControlLabel: clearControlLabel
       }, commonProps, {
         innerProps: innerProps,
-        isFocused: isFocused
+        isFocused: isFocused,
+        isCompact: isCompact
       }));
     }
   }, {
@@ -1406,18 +1409,21 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var commonProps = this.commonProps;
       var _this$props11 = this.props,
         isDisabled = _this$props11.isDisabled,
-        isLoading = _this$props11.isLoading;
+        isLoading = _this$props11.isLoading,
+        spacing = _this$props11.spacing;
       var isFocused = this.state.isFocused;
       if (!LoadingIndicator || !isLoading) {
         return null;
       }
+      var isCompact = spacing === 'compact';
       var innerProps = {
         'aria-hidden': 'true'
       };
       return /*#__PURE__*/_react.default.createElement(LoadingIndicator, (0, _extends2.default)({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
-        isFocused: isFocused
+        isFocused: isFocused,
+        isCompact: isCompact
       }));
     }
   }, {
@@ -1448,8 +1454,11 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         return null;
       }
       var commonProps = this.commonProps;
-      var isDisabled = this.props.isDisabled;
+      var _this$props12 = this.props,
+        isDisabled = _this$props12.isDisabled,
+        spacing = _this$props12.spacing;
       var isFocused = this.state.isFocused;
+      var isCompact = spacing === 'compact';
       var innerProps = {
         onMouseDown: this.onDropdownIndicatorMouseDown,
         onTouchEnd: this.onDropdownIndicatorTouchEnd,
@@ -1458,7 +1467,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react.default.createElement(DropdownIndicator, (0, _extends2.default)({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
-        isFocused: isFocused
+        isFocused: isFocused,
+        isCompact: isCompact
       }));
     }
   }, {
@@ -1476,24 +1486,24 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         Option = _this$getComponents7.Option;
       var commonProps = this.commonProps;
       var focusedOption = this.state.focusedOption;
-      var _this$props12 = this.props,
-        captureMenuScroll = _this$props12.captureMenuScroll,
-        inputValue = _this$props12.inputValue,
-        isLoading = _this$props12.isLoading,
-        loadingMessage = _this$props12.loadingMessage,
-        minMenuHeight = _this$props12.minMenuHeight,
-        maxMenuHeight = _this$props12.maxMenuHeight,
-        menuIsOpen = _this$props12.menuIsOpen,
-        menuPlacement = _this$props12.menuPlacement,
-        menuPosition = _this$props12.menuPosition,
-        menuPortalTarget = _this$props12.menuPortalTarget,
-        menuShouldBlockScroll = _this$props12.menuShouldBlockScroll,
-        menuShouldScrollIntoView = _this$props12.menuShouldScrollIntoView,
-        noOptionsMessage = _this$props12.noOptionsMessage,
-        onMenuScrollToTop = _this$props12.onMenuScrollToTop,
-        onMenuScrollToBottom = _this$props12.onMenuScrollToBottom,
-        labelId = _this$props12.labelId,
-        label = _this$props12.label;
+      var _this$props13 = this.props,
+        captureMenuScroll = _this$props13.captureMenuScroll,
+        inputValue = _this$props13.inputValue,
+        isLoading = _this$props13.isLoading,
+        loadingMessage = _this$props13.loadingMessage,
+        minMenuHeight = _this$props13.minMenuHeight,
+        maxMenuHeight = _this$props13.maxMenuHeight,
+        menuIsOpen = _this$props13.menuIsOpen,
+        menuPlacement = _this$props13.menuPlacement,
+        menuPosition = _this$props13.menuPosition,
+        menuPortalTarget = _this$props13.menuPortalTarget,
+        menuShouldBlockScroll = _this$props13.menuShouldBlockScroll,
+        menuShouldScrollIntoView = _this$props13.menuShouldScrollIntoView,
+        noOptionsMessage = _this$props13.noOptionsMessage,
+        onMenuScrollToTop = _this$props13.onMenuScrollToTop,
+        onMenuScrollToBottom = _this$props13.onMenuScrollToBottom,
+        labelId = _this$props13.labelId,
+        label = _this$props13.label;
       if (!menuIsOpen) {
         return null;
       }
@@ -1642,12 +1652,12 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     key: "renderFormField",
     value: function renderFormField() {
       var _this5 = this;
-      var _this$props13 = this.props,
-        delimiter = _this$props13.delimiter,
-        isDisabled = _this$props13.isDisabled,
-        isMulti = _this$props13.isMulti,
-        required = _this$props13.required,
-        name = _this$props13.name;
+      var _this$props14 = this.props,
+        delimiter = _this$props14.delimiter,
+        isDisabled = _this$props14.isDisabled,
+        isMulti = _this$props14.isMulti,
+        required = _this$props14.required,
+        name = _this$props14.name;
       var selectValue = this.state.selectValue;
       if (required && !this.hasValue() && !isDisabled) {
         return /*#__PURE__*/_react.default.createElement(_internal.RequiredInput, {
@@ -1722,13 +1732,19 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         IndicatorsContainer = _this$getComponents8.IndicatorsContainer,
         SelectContainer = _this$getComponents8.SelectContainer,
         ValueContainer = _this$getComponents8.ValueContainer;
-      var _this$props14 = this.props,
-        className = _this$props14.className,
-        id = _this$props14.id,
-        isDisabled = _this$props14.isDisabled,
-        menuIsOpen = _this$props14.menuIsOpen;
+      var _this$props15 = this.props,
+        className = _this$props15.className,
+        id = _this$props15.id,
+        isDisabled = _this$props15.isDisabled,
+        menuIsOpen = _this$props15.menuIsOpen,
+        isInvalid = _this$props15.isInvalid,
+        _this$props15$appeara = _this$props15.appearance,
+        appearance = _this$props15$appeara === void 0 ? 'default' : _this$props15$appeara,
+        _this$props15$spacing = _this$props15.spacing,
+        spacing = _this$props15$spacing === void 0 ? 'default' : _this$props15$spacing;
       var isFocused = this.state.isFocused;
       var commonProps = this.commonProps = this.getCommonProps();
+      var isCompact = spacing === 'compact';
       return /*#__PURE__*/_react.default.createElement(SelectContainer, (0, _extends2.default)({}, commonProps, {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
         className: className,
@@ -1744,11 +1760,15 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           onMouseDown: this.onControlMouseDown,
           onTouchEnd: this.onControlTouchEnd
         },
+        appearance: appearance,
+        isInvalid: isInvalid,
         isDisabled: isDisabled,
         isFocused: isFocused,
-        menuIsOpen: menuIsOpen
+        menuIsOpen: menuIsOpen,
+        isCompact: isCompact
       }), /*#__PURE__*/_react.default.createElement(ValueContainer, (0, _extends2.default)({}, commonProps, {
-        isDisabled: isDisabled
+        isDisabled: isDisabled,
+        isCompact: isCompact
       }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/_react.default.createElement(IndicatorsContainer, (0, _extends2.default)({}, commonProps, {
         isDisabled: isDisabled
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());

package/dist/es2019/components/containers.js

@@ -17,9 +17,10 @@ export const containerCSS = ({
 }) => ({
   label: 'container',
   direction: isRtl ? 'rtl' : undefined,
-  pointerEvents: isDisabled ? 'none' : undefined,
-  // cancel mouse events when disabled
-  position: 'relative'
+  position: 'relative',
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  pointerEvents: 'all',
+  cursor: isDisabled ? 'not-allowed' : undefined
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -41,11 +42,9 @@ export const SelectContainer = props => {
 // ==============================
 
 export const valueContainerCSS = ({
-  theme: {
-    spacing
-  },
   isMulti,
   hasValue,
+  isCompact,
   selectProps: {
     controlShouldRenderValue
   }
@@ -57,7 +56,7 @@ export const valueContainerCSS = ({
   WebkitOverflowScrolling: 'touch',
   position: 'relative',
   overflow: 'hidden',
-  padding: `${spacing.baseUnit / 2}px ${spacing.baseUnit * 2}px`
+  padding: `${isCompact ? 0 : "var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"}`
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -89,7 +88,8 @@ export const indicatorsContainerCSS = () => ({
   alignItems: 'center',
   alignSelf: 'stretch',
   display: 'flex',
-  flexShrink: 0
+  flexShrink: 0,
+  paddingRight: "var(--ds-space-050, 4px)"
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/components/control.js

@@ -9,32 +9,79 @@ import { getStyleProps } from '../utils';
 export const css = ({
   isDisabled,
   isFocused,
-  theme: {
-    colors,
-    borderRadius,
-    spacing
+  isInvalid,
+  isCompact,
+  appearance
+}) => {
+  let borderColor = isFocused ? "var(--ds-border-focused, #388BFF)" : "var(--ds-border-input, #8590A2)";
+  let backgroundColor = isFocused ? "var(--ds-background-input-pressed, #FFFFFF)" : "var(--ds-background-input, #FFFFFF)";
+  let backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, #FFFFFF)" : "var(--ds-background-input-hovered, #F7F8F9)";
+  let borderColorHover = isFocused ? "var(--ds-border-focused, #388BFF)" : "var(--ds-border-input, #8590A2)";
+  if (isDisabled) {
+    backgroundColor = "var(--ds-background-disabled, #091E4208)";
+    borderColor = "var(--ds-background-disabled, #091E4208)";
   }
-}) => ({
-  label: 'control',
-  alignItems: 'center',
-  cursor: 'default',
-  display: 'flex',
-  flexWrap: 'wrap',
-  justifyContent: 'space-between',
-  minHeight: spacing.controlHeight,
-  outline: '0 !important',
-  position: 'relative',
-  transition: 'all 100ms',
-  backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
-  borderColor: isDisabled ? colors.neutral10 : isFocused ? colors.primary : colors.neutral20,
-  borderRadius: borderRadius,
-  borderStyle: 'solid',
-  borderWidth: 1,
-  boxShadow: isFocused ? `0 0 0 1px ${colors.primary}` : undefined,
-  '&:hover': {
-    borderColor: isFocused ? colors.primary : colors.neutral30
+  if (isInvalid) {
+    borderColor = "var(--ds-border-danger, #E2483D)";
+    borderColorHover = "var(--ds-border-danger, #E2483D)";
   }
-});
+  const transitionDuration = '200ms';
+  if (appearance === 'subtle') {
+    borderColor = isFocused ? "var(--ds-border-focused, #388BFF)" : 'transparent';
+    backgroundColor = isFocused ? "var(--ds-surface, #FFFFFF)" : 'transparent';
+    backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, #FFFFFF)" : "var(--ds-background-input-hovered, #F7F8F9)";
+  }
+  if (appearance === 'none') {
+    borderColor = 'transparent';
+    backgroundColor = 'transparent';
+    backgroundColorHover = 'transparent';
+    borderColorHover = 'transparent';
+  }
+  return {
+    label: 'control',
+    alignItems: 'center',
+    cursor: 'default',
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    outline: '0 !important',
+    position: 'relative',
+    // Turn pointer events off when disabled - this makes it so hover etc don't work.
+    pointerEvents: isDisabled ? 'none' : undefined,
+    backgroundColor,
+    borderColor,
+    borderStyle: 'solid',
+    borderRadius: "var(--ds-border-radius-100, 3px)",
+    borderWidth: "var(--ds-border-width, 1px)",
+    boxShadow: isInvalid ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColor}` : 'none',
+    '&:focus-within': {
+      boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColor}`
+    },
+    minHeight: isCompact ? 32 : 40,
+    padding: 0,
+    transition: `background-color ${transitionDuration} ease-in-out,
+border-color ${transitionDuration} ease-in-out`,
+    '::-webkit-scrollbar': {
+      height: 8,
+      width: 8
+    },
+    '::-webkit-scrollbar-corner': {
+      display: 'none'
+    },
+    ':hover': {
+      '::-webkit-scrollbar-thumb': {
+        // scrollbars occur only if the user passes in a custom component with overflow: scroll
+        backgroundColor: 'rgba(0,0,0,0.2)'
+      },
+      cursor: 'pointer',
+      backgroundColor: backgroundColorHover,
+      borderColor: borderColorHover
+    },
+    '::-webkit-scrollbar-thumb:hover': {
+      backgroundColor: 'rgba(0,0,0,0.4)'
+    }
+  };
+};
 const Control = props => {
   const {
     children,

package/dist/es2019/components/group.js

@@ -6,13 +6,9 @@ import _extends from "@babel/runtime/helpers/extends";
 
 import { jsx } from '@emotion/react';
 import { cleanCommonProps, getStyleProps } from '../utils';
-export const groupCSS = ({
-  theme: {
-    spacing
-  }
-}) => ({
-  paddingBottom: spacing.baseUnit * 2,
-  paddingTop: spacing.baseUnit * 2
+export const groupCSS = ({}) => ({
+  paddingBottom: "var(--ds-space-100, 8px)",
+  paddingTop: "var(--ds-space-100, 8px)"
 });
 const Group = props => {
   const {
@@ -39,22 +35,18 @@ const Group = props => {
     cx: cx
   }), label), jsx("div", null, children));
 };
-export const groupHeadingCSS = ({
-  theme: {
-    colors,
-    spacing
-  }
-}) => ({
+export const groupHeadingCSS = ({}) => ({
   label: 'group',
   cursor: 'default',
   display: 'block',
-  color: colors.neutral40,
   fontSize: '75%',
-  fontWeight: 500,
   marginBottom: '0.25em',
-  paddingLeft: spacing.baseUnit * 3,
-  paddingRight: spacing.baseUnit * 3,
-  textTransform: 'uppercase'
+  paddingLeft: "var(--ds-space-150, 12px)",
+  paddingRight: "var(--ds-space-150, 12px)",
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  color: "var(--ds-text-subtle, #44546F)",
+  fontWeight: `${"var(--ds-font-weight-bold, 700)"} !important`,
+  textTransform: 'none'
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/components/indicators.js

@@ -51,25 +51,19 @@ jsx(Svg, _extends({
 // Dropdown & Clear Buttons
 // ==============================
 
-const baseCSS = ({
-  isFocused,
-  theme: {
-    spacing: {
-      baseUnit
-    },
-    colors
-  }
+export const dropdownIndicatorCSS = ({
+  isCompact,
+  isDisabled
 }) => ({
   label: 'indicatorContainer',
   display: 'flex',
   transition: 'color 150ms',
-  color: isFocused ? colors.neutral60 : colors.neutral20,
-  padding: baseUnit * 2,
+  color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : "var(--ds-text-subtle, #44546F)",
+  padding: `${isCompact ? 0 : "var(--ds-space-075, 6px)"} ${"var(--ds-space-025, 2px)"}`,
   ':hover': {
-    color: isFocused ? colors.neutral80 : colors.neutral40
+    color: "var(--ds-text-subtle, #44546F)"
   }
 });
-export const dropdownIndicatorCSS = baseCSS;
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const DropdownIndicator = props => {
@@ -82,7 +76,18 @@ export const DropdownIndicator = props => {
     'dropdown-indicator': true
   }), innerProps), children || jsx(DownChevron, null));
 };
-export const clearIndicatorCSS = baseCSS;
+export const clearIndicatorCSS = ({
+  isCompact
+}) => ({
+  label: 'indicatorContainer',
+  display: 'flex',
+  transition: 'color 150ms',
+  color: "var(--ds-text-subtlest, #626F86)",
+  padding: `${isCompact ? 0 : "var(--ds-space-075, 6px)"} ${"var(--ds-space-025, 2px)"}`,
+  ':hover': {
+    color: "var(--ds-text-subtle, #44546F)"
+  }
+});
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const ClearIndicator = props => {
@@ -101,20 +106,14 @@ export const ClearIndicator = props => {
 // ==============================
 
 export const indicatorSeparatorCSS = ({
-  isDisabled,
-  theme: {
-    spacing: {
-      baseUnit
-    },
-    colors
-  }
+  isDisabled
 }) => ({
   label: 'indicatorSeparator',
   alignSelf: 'stretch',
   width: 1,
-  backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
-  marginBottom: baseUnit * 2,
-  marginTop: baseUnit * 2
+  backgroundColor: isDisabled ? "var(--ds-border-disabled, #091E420F)" : "var(--ds-border, #091E4224)",
+  marginBottom: "var(--ds-space-100, 8px)",
+  marginTop: "var(--ds-space-100, 8px)"
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -142,11 +141,9 @@ const loadingDotAnimations = keyframes({
 export const loadingIndicatorCSS = ({
   isFocused,
   size,
+  isCompact,
   theme: {
-    colors,
-    spacing: {
-      baseUnit
-    }
+    colors
   }
 }) => ({
   label: 'loadingIndicator',
@@ -159,7 +156,7 @@ export const loadingIndicatorCSS = ({
   textAlign: 'center',
   verticalAlign: 'middle',
   color: isFocused ? colors.neutral60 : colors.neutral20,
-  padding: baseUnit * 2
+  padding: `${isCompact ? 0 : "var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"}`
 });
 const LoadingDot = ({
   delay,

package/dist/es2019/components/input.js

@@ -22,7 +22,7 @@ export const inputCSS = ({
   margin: spacing.baseUnit / 2,
   paddingBottom: spacing.baseUnit / 2,
   paddingTop: spacing.baseUnit / 2,
-  color: colors.neutral80
+  color: "var(--ds-text, hsl(0, 0%, 20%))"
 });
 const spacingStyle = {
   gridArea: '1 / 2',

package/dist/es2019/components/menu.js

@@ -200,11 +200,11 @@ export const menuCSS = ({
   position: 'absolute',
   width: '100%',
   zIndex: 1,
-  backgroundColor: colors.neutral0,
   borderRadius: borderRadius,
-  boxShadow: '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)',
   marginBottom: spacing.menuGutter,
-  marginTop: spacing.menuGutter
+  marginTop: spacing.menuGutter,
+  backgroundColor: "var(--ds-surface-overlay, white)",
+  boxShadow: "var(--ds-shadow-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
 });
 const PortalPlacementContext = /*#__PURE__*/createContext(null);
 
@@ -281,20 +281,15 @@ export default Menu;
 // ==============================
 
 export const menuListCSS = ({
-  maxHeight,
-  theme: {
-    spacing: {
-      baseUnit
-    }
-  }
+  maxHeight
 }) => ({
   maxHeight,
   overflowY: 'auto',
   position: 'relative',
   // required for offset[Height, Top] > keyboard scroll
   WebkitOverflowScrolling: 'touch',
-  paddingBottom: baseUnit,
-  paddingTop: baseUnit
+  paddingTop: "var(--ds-space-100, 8px)",
+  paddingBottom: "var(--ds-space-100, 8px)"
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -5,57 +5,116 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 
 import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../utils';
 import { CrossIcon } from './indicators';
 export const multiValueCSS = ({
+  isDisabled,
+  isFocused,
   theme: {
     spacing,
     borderRadius,
     colors
   }
-}) => ({
-  label: 'multiValue',
-  display: 'flex',
-  minWidth: 0,
-  // resolves flex/text-overflow bug
-  backgroundColor: colors.neutral10,
-  borderRadius: borderRadius / 2,
-  margin: spacing.baseUnit / 2
-});
+}) => {
+  let backgroundColor;
+  let color;
+  if (isDisabled) {
+    // Use the basic neutral background so it is slightly separate from the
+    // field's background
+    backgroundColor = "var(--ds-background-neutral, #091E420F)";
+    color = "var(--ds-text-disabled, #091E424F)";
+  } else if (isFocused) {
+    backgroundColor = "var(--ds-background-selected, #E9F2FF)";
+    color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
+  } else {
+    backgroundColor = fg('platform-component-visual-refresh') ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : "var(--ds-background-neutral, #091E420F)";
+    color = "var(--ds-text, hsl(0, 0%, 20%))";
+  }
+  return {
+    label: 'multiValue',
+    display: 'flex',
+    minWidth: 0,
+    // resolves flex/text-overflow bug
+    margin: "var(--ds-space-025, 2px)",
+    borderRadius: "var(--ds-border-radius-050, 2px)",
+    backgroundColor,
+    boxShadow: isFocused ? `0 0 0 2px ${"var(--ds-surface, transparent)"}, 0 0 0 4px ${"var(--ds-border-focused, transparent)"}` : 'none',
+    maxWidth: '100%',
+    '@media screen and (-ms-high-contrast: active)': {
+      border: isFocused ? '1px solid transparent' : 'none'
+    },
+    color,
+    ...(fg('platform-component-visual-refresh') && {
+      borderRadius: "var(--ds-border-radius-100, 4px)",
+      // Hardcode this color for visual refresh as there is no token color yet
+      borderColor: '#B7B9BE',
+      borderWidth: "var(--ds-border-width, 1px)",
+      borderStyle: 'solid',
+      backgroundColor: "var(--ds-background-input, #FFFFFF)"
+    })
+  };
+};
 export const multiValueLabelCSS = ({
-  theme: {
-    borderRadius,
-    colors
-  },
-  cropWithEllipsis
+  cropWithEllipsis,
+  isDisabled
 }) => ({
   overflow: 'hidden',
   textOverflow: cropWithEllipsis || cropWithEllipsis === undefined ? 'ellipsis' : undefined,
   whiteSpace: 'nowrap',
-  borderRadius: borderRadius / 2,
-  color: colors.neutral80,
+  borderRadius: "var(--ds-border-radius-050, 2px)",
   fontSize: '85%',
-  padding: 3,
-  paddingLeft: 6
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  padding: "var(--ds-space-025, 2px)",
+  color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : 'inherit',
+  paddingLeft: "var(--ds-space-075, 6px)",
+  ...(fg('platform-component-visual-refresh') && {
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: "var(--ds-space-050, 4px)"
+  })
 });
 export const multiValueRemoveCSS = ({
-  theme: {
-    spacing,
-    borderRadius,
-    colors
-  },
   isFocused
 }) => ({
   alignItems: 'center',
   display: 'flex',
-  borderRadius: borderRadius / 2,
-  backgroundColor: isFocused ? colors.dangerLight : undefined,
-  paddingLeft: spacing.baseUnit,
-  paddingRight: spacing.baseUnit,
+  backgroundColor: isFocused ? "var(--ds-UNSAFE-transparent, transparent)" : undefined,
+  fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
+  paddingLeft: "var(--ds-space-025, 2px)",
+  paddingRight: "var(--ds-space-025, 2px)",
+  borderRadius: '0px 2px 2px 0px',
+  // DSP-6470 we should style like Tag once we have the :has selector
   ':hover': {
-    backgroundColor: colors.dangerLight,
-    color: colors.danger
-  }
+    backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)",
+    fill: "var(--ds-text-danger, #000)"
+  },
+  ':active': {
+    backgroundColor: "var(--ds-background-danger-pressed, #FD9891)",
+    fill: "var(--ds-text-danger, #000)"
+  },
+  ...(fg('platform-component-visual-refresh') && {
+    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+    border: 'none',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    appearance: 'none',
+    borderRadius: "var(--ds-border-radius, 4px)",
+    color: "var(--ds-text, #172B4D)",
+    padding: "var(--ds-space-025, 2px)",
+    marginRight: "var(--ds-space-025, 2px)",
+    ':focus-visible': {
+      outlineOffset: "var(--ds-space-negative-025, -2px)"
+    },
+    ':hover': {
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    },
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    }
+  })
 });
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const MultiValueGeneric = ({