@atlaskit/react-select 1.5.1 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/react-select
 
+## 1.6.0
+
+### Minor Changes
+
+- [#177875](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/177875)
+  [`d0c3d27216b7c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d0c3d27216b7c) -
+  Remove theme prop and merge customized components for performance
+
+## 1.5.2
+
+### Patch Changes
+
+- [#167291](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167291)
+  [`4645a4d115b15`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4645a4d115b15) -
+  Fix the calculation of scroll space below to place menu bottom as much as possible
+
 ## 1.5.1
 
 ### Patch Changes

package/dist/cjs/components/group.js

@@ -31,15 +31,11 @@ var Group = function Group(props) {
     headingProps = props.headingProps,
     innerProps = props.innerProps,
     label = props.label,
-    theme = props.theme,
     selectProps = props.selectProps;
   return (0, _react.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(props, 'group', {
     group: true
   }), innerProps), (0, _react.jsx)(Heading, (0, _extends2.default)({}, headingProps, {
-    selectProps: selectProps
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    ,
-    theme: theme,
+    selectProps: selectProps,
     getStyles: getStyles,
     getClassNames: getClassNames,
     cx: cx
@@ -51,13 +47,12 @@ var groupHeadingCSS = exports.groupHeadingCSS = function groupHeadingCSS(_ref2)
     label: 'group',
     cursor: 'default',
     display: 'block',
-    fontSize: '75%',
     marginBottom: '0.25em',
     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)".concat(" !important"),
+    fontWeight: "var(--ds-font-weight-bold, 700)",
     textTransform: 'none'
   };
 };

package/dist/cjs/components/index.js

@@ -25,12 +25,9 @@ var components = exports.components = {
   ClearIndicator: _indicators.ClearIndicator,
   Control: _control.default,
   DropdownIndicator: _indicators.DropdownIndicator,
-  DownChevron: _indicators.DownChevron,
-  CrossIcon: _indicators.CrossIcon,
   Group: _group.default,
   GroupHeading: _group.GroupHeading,
   IndicatorsContainer: _containers.IndicatorsContainer,
-  IndicatorSeparator: _indicators.IndicatorSeparator,
   Input: _input.default,
   LoadingIndicator: _indicators.LoadingIndicator,
   Menu: _menu.default,

package/dist/cjs/components/indicators.js

@@ -4,14 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.loadingIndicatorCSS = exports.indicatorSeparatorCSS = exports.dropdownIndicatorCSS = exports.clearIndicatorCSS = exports.LoadingIndicator = exports.IndicatorSeparator = exports.DropdownIndicator = exports.DownChevron = exports.CrossIcon = exports.ClearIndicator = void 0;
+exports.loadingIndicatorCSS = exports.dropdownIndicatorCSS = exports.clearIndicatorCSS = exports.LoadingIndicator = exports.DropdownIndicator = exports.ClearIndicator = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross-circle--select-clear"));
+var _primitives = require("@atlaskit/primitives");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _utils = require("../utils");
-var _excluded = ["size"],
-  _excluded2 = ["innerProps", "isRtl", "size"];
+var _excluded = ["innerProps", "isRtl", "size"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -22,56 +25,25 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // Dropdown & Clear Icons
 // ==============================
 
-var styles = (0, _react.css)({
-  display: 'inline-block',
-  fill: 'currentColor',
-  lineHeight: 1,
-  stroke: 'currentColor',
-  strokeWidth: 0
+var iconContainerStyles = (0, _primitives.xcss)({
+  all: 'unset',
+  outline: 'revert',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 'space.025'
+});
+var dropdownWrapperStyles = (0, _primitives.xcss)({
+  padding: 'space.075'
 });
-var Svg = function Svg(_ref) {
-  var size = _ref.size,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react.jsx)("svg", (0, _extends2.default)({
-    height: size,
-    width: size,
-    viewBox: "0 0 20 20",
-    "aria-hidden": "true",
-    focusable: "false",
-    css: styles
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, props));
-};
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-var CrossIcon = exports.CrossIcon = function CrossIcon(props) {
-  return (
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _react.jsx)(Svg, (0, _extends2.default)({
-      size: 20
-    }, props), (0, _react.jsx)("path", {
-      d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
-    }))
-  );
-};
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-var DownChevron = exports.DownChevron = function DownChevron(props) {
-  return (
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _react.jsx)(Svg, (0, _extends2.default)({
-      size: 20
-    }, props), (0, _react.jsx)("path", {
-      d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-    }))
-  );
-};
 
 // ==============================
 // Dropdown & Clear Buttons
 // ==============================
 
-var dropdownIndicatorCSS = exports.dropdownIndicatorCSS = function dropdownIndicatorCSS(_ref2) {
-  var isCompact = _ref2.isCompact,
-    isDisabled = _ref2.isDisabled;
+var dropdownIndicatorCSS = exports.dropdownIndicatorCSS = function dropdownIndicatorCSS(_ref) {
+  var isCompact = _ref.isCompact,
+    isDisabled = _ref.isDisabled;
   return {
     label: 'indicatorContainer',
     display: 'flex',
@@ -86,15 +58,22 @@ var dropdownIndicatorCSS = exports.dropdownIndicatorCSS = function dropdownIndic
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var DropdownIndicator = exports.DropdownIndicator = function DropdownIndicator(props) {
-  var children = props.children,
-    innerProps = props.innerProps;
+  var innerProps = props.innerProps,
+    children = props.children;
   return (0, _react.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(props, 'dropdownIndicator', {
     indicator: true,
     'dropdown-indicator': true
-  }), innerProps), children || (0, _react.jsx)(DownChevron, null));
+  }), innerProps), children ? children : (0, _react.jsx)(_primitives.Inline, {
+    as: "span",
+    xcss: dropdownWrapperStyles
+  }, (0, _react.jsx)(_chevronDown.default, {
+    color: "currentColor",
+    label: "open",
+    LEGACY_margin: "var(--ds-space-negative-075, -0.375rem)"
+  })));
 };
-var clearIndicatorCSS = exports.clearIndicatorCSS = function clearIndicatorCSS(_ref3) {
-  var isCompact = _ref3.isCompact;
+var clearIndicatorCSS = exports.clearIndicatorCSS = function clearIndicatorCSS(_ref2) {
+  var isCompact = _ref2.isCompact;
   return {
     label: 'indicatorContainer',
     display: 'flex',
@@ -109,35 +88,21 @@ var clearIndicatorCSS = exports.clearIndicatorCSS = function clearIndicatorCSS(_
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var ClearIndicator = exports.ClearIndicator = function ClearIndicator(props) {
-  var children = props.children,
-    innerProps = props.innerProps;
+  var innerProps = props.innerProps,
+    _props$clearControlLa = props.clearControlLabel,
+    clearControlLabel = _props$clearControlLa === void 0 ? 'clear' : _props$clearControlLa;
   return (0, _react.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(props, 'clearIndicator', {
     indicator: true,
     'clear-indicator': true
-  }), innerProps), children || (0, _react.jsx)(CrossIcon, null));
-};
-
-// ==============================
-// Separator
-// ==============================
-
-var indicatorSeparatorCSS = exports.indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref4) {
-  var isDisabled = _ref4.isDisabled;
-  return {
-    label: 'indicatorSeparator',
-    alignSelf: 'stretch',
-    width: 1,
-    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
-var IndicatorSeparator = exports.IndicatorSeparator = function IndicatorSeparator(props) {
-  var innerProps = props.innerProps;
-  return (0, _react.jsx)("span", (0, _extends2.default)({}, innerProps, (0, _utils.getStyleProps)(props, 'indicatorSeparator', {
-    'indicator-separator': true
+  }), innerProps), (0, _react.jsx)(_primitives.Pressable, {
+    xcss: iconContainerStyles,
+    tabIndex: -1,
+    "aria-label": clearControlLabel
+  }, (0, _react.jsx)(_crossCircleSelectClear.default, {
+    label: "",
+    color: "currentColor",
+    LEGACY_size: "small",
+    LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"
   })));
 };
 
@@ -145,57 +110,20 @@ var IndicatorSeparator = exports.IndicatorSeparator = function IndicatorSeparato
 // Loading
 // ==============================
 
-var loadingDotAnimations = (0, _react.keyframes)({
-  '0%, 80%, 100%': {
-    opacity: 0
-  },
-  '40%': {
-    opacity: 1
-  }
-});
-var loadingIndicatorCSS = exports.loadingIndicatorCSS = function loadingIndicatorCSS(_ref5) {
-  var isFocused = _ref5.isFocused,
-    size = _ref5.size,
-    isCompact = _ref5.isCompact,
-    colors = _ref5.theme.colors;
+var loadingIndicatorCSS = exports.loadingIndicatorCSS = function loadingIndicatorCSS(_ref3) {
+  var isCompact = _ref3.isCompact;
   return {
     label: 'loadingIndicator',
-    display: 'flex',
-    transition: 'color 150ms',
-    alignSelf: 'center',
-    fontSize: size,
-    lineHeight: 1,
-    marginRight: size,
-    textAlign: 'center',
-    verticalAlign: 'middle',
-    color: isFocused ? colors.neutral60 : colors.neutral20,
     padding: "".concat(isCompact ? 0 : "var(--ds-space-075, 6px)", " ", "var(--ds-space-100, 8px)")
   };
 };
-var LoadingDot = function LoadingDot(_ref6) {
-  var delay = _ref6.delay,
-    offset = _ref6.offset;
-  return (0, _react.jsx)("span", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css: {
-      animation: "".concat(loadingDotAnimations, " 1s ease-in-out ").concat(delay, "ms infinite;"),
-      backgroundColor: 'currentColor',
-      borderRadius: '1em',
-      display: 'inline-block',
-      marginLeft: offset ? '1em' : undefined,
-      height: '1em',
-      verticalAlign: 'top',
-      width: '1em'
-    }
-  });
-};
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var LoadingIndicator = exports.LoadingIndicator = function LoadingIndicator(_ref7) {
-  var innerProps = _ref7.innerProps,
-    isRtl = _ref7.isRtl,
-    _ref7$size = _ref7.size,
-    size = _ref7$size === void 0 ? 4 : _ref7$size,
-    restProps = (0, _objectWithoutProperties2.default)(_ref7, _excluded2);
+var LoadingIndicator = exports.LoadingIndicator = function LoadingIndicator(_ref4) {
+  var innerProps = _ref4.innerProps,
+    isRtl = _ref4.isRtl,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? 4 : _ref4$size,
+    restProps = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
   return (0, _react.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(_objectSpread(_objectSpread({}, restProps), {}, {
     innerProps: innerProps,
     isRtl: isRtl,
@@ -203,14 +131,7 @@ var LoadingIndicator = exports.LoadingIndicator = function LoadingIndicator(_ref
   }), 'loadingIndicator', {
     indicator: true,
     'loading-indicator': true
-  }), innerProps), (0, _react.jsx)(LoadingDot, {
-    delay: 0,
-    offset: isRtl
-  }), (0, _react.jsx)(LoadingDot, {
-    delay: 160,
-    offset: true
-  }), (0, _react.jsx)(LoadingDot, {
-    delay: 320,
-    offset: !isRtl
+  }), innerProps), (0, _react.jsx)(_spinner.default, {
+    size: "small"
   }));
 };

package/dist/cjs/components/input.js

@@ -18,20 +18,17 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 var inputCSS = exports.inputCSS = function inputCSS(_ref) {
   var isDisabled = _ref.isDisabled,
-    value = _ref.value,
-    _ref$theme = _ref.theme,
-    spacing = _ref$theme.spacing,
-    colors = _ref$theme.colors;
+    value = _ref.value;
   return _objectSpread(_objectSpread({
     visibility: isDisabled ? 'hidden' : 'visible',
     // force css to recompute when value change due to @emotion bug.
     // We can remove it whenever the bug is fixed.
     transform: value ? 'translateZ(0)' : ''
   }, containerStyle), {}, {
-    margin: spacing.baseUnit / 2,
-    paddingBottom: spacing.baseUnit / 2,
-    paddingTop: spacing.baseUnit / 2,
-    color: "var(--ds-text, hsl(0, 0%, 20%))"
+    margin: "var(--ds-space-025, 2px)",
+    paddingBottom: "var(--ds-space-025, 2px)",
+    paddingTop: "var(--ds-space-025, 2px)",
+    color: "var(--ds-text, #172B4D)"
   });
 };
 var spacingStyle = {

package/dist/cjs/components/menu.js

@@ -8,6 +8,7 @@ exports.default = exports.NoOptionsMessage = exports.MenuPortal = exports.MenuPl
 exports.getMenuPlacement = getMenuPlacement;
 exports.noOptionsMessageCSS = exports.menuPortalCSS = exports.menuListCSS = exports.menuCSS = exports.loadingMessageCSS = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -16,6 +17,8 @@ var _react2 = require("@emotion/react");
 var _dom = require("@floating-ui/dom");
 var _reactDom = require("react-dom");
 var _useIsomorphicLayoutEffect = _interopRequireDefault(require("use-isomorphic-layout-effect"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _utils = require("../utils");
 var _excluded = ["children", "innerProps"],
   _excluded2 = ["children", "innerProps"];
@@ -53,7 +56,8 @@ function getMenuPlacement(_ref) {
   // we can't trust `scrollParent.scrollHeight` --> it may increase when
   // the menu is rendered
   var _scrollParent$getBoun = scrollParent.getBoundingClientRect(),
-    scrollHeight = _scrollParent$getBoun.height;
+    scrollHeight = _scrollParent$getBoun.height,
+    scrollParentTop = _scrollParent$getBoun.top;
   var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(),
     menuBottom = _menuEl$getBoundingCl.bottom,
     menuHeight = _menuEl$getBoundingCl.height,
@@ -62,12 +66,14 @@ function getMenuPlacement(_ref) {
     containerTop = _menuEl$offsetParent$.top;
   var viewHeight = isFixedPosition ? window.innerHeight : (0, _utils.normalizedHeight)(scrollParent);
   var scrollTop = (0, _utils.getScrollTop)(scrollParent);
+  // use menuTop - scrollParentTop for the actual top space of menu in the scroll container
+  var menuTopFromParent = (0, _platformFeatureFlags.fg)('design-system-select-fix-placement') ? menuTop - scrollParentTop : menuTop;
   var marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
   var marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
   var viewSpaceAbove = containerTop - marginTop;
-  var viewSpaceBelow = viewHeight - menuTop;
+  var viewSpaceBelow = viewHeight - menuTopFromParent;
   var scrollSpaceAbove = viewSpaceAbove + scrollTop;
-  var scrollSpaceBelow = scrollHeight - scrollTop - menuTop;
+  var scrollSpaceBelow = scrollHeight - scrollTop - menuTopFromParent;
   var scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
   var scrollUp = scrollTop + menuTop - marginTop;
   var scrollDuration = 160;
@@ -200,15 +206,10 @@ var coercePlacement = function coercePlacement(p) {
   return p === 'auto' ? 'bottom' : p;
 };
 var menuCSS = exports.menuCSS = function menuCSS(_ref2) {
-  var _ref3;
-  var placement = _ref2.placement,
-    _ref2$theme = _ref2.theme,
-    borderRadius = _ref2$theme.borderRadius,
-    spacing = _ref2$theme.spacing,
-    colors = _ref2$theme.colors;
-  return _ref3 = {
+  var placement = _ref2.placement;
+  return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     label: 'menu'
-  }, (0, _defineProperty2.default)(_ref3, alignToControl(placement), '100%'), (0, _defineProperty2.default)(_ref3, "position", 'absolute'), (0, _defineProperty2.default)(_ref3, "width", '100%'), (0, _defineProperty2.default)(_ref3, "zIndex", 1), (0, _defineProperty2.default)(_ref3, "borderRadius", borderRadius), (0, _defineProperty2.default)(_ref3, "marginBottom", spacing.menuGutter), (0, _defineProperty2.default)(_ref3, "marginTop", spacing.menuGutter), (0, _defineProperty2.default)(_ref3, "backgroundColor", "var(--ds-surface-overlay, white)"), (0, _defineProperty2.default)(_ref3, "boxShadow", "var(--ds-shadow-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"), _ref3;
+  }, alignToControl(placement), '100%'), "position", 'absolute'), "width", '100%'), "zIndex", 1), "borderRadius", "var(--ds-border-radius, 4px)"), "marginBottom", "var(--ds-space-100, 8px)"), "marginTop", "var(--ds-space-100, 8px)"), "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%))");
 };
 var PortalPlacementContext = /*#__PURE__*/(0, _react.createContext)(null);
 
@@ -220,8 +221,7 @@ var MenuPlacer = exports.MenuPlacer = function MenuPlacer(props) {
     maxMenuHeight = props.maxMenuHeight,
     menuPlacement = props.menuPlacement,
     menuPosition = props.menuPosition,
-    menuShouldScrollIntoView = props.menuShouldScrollIntoView,
-    theme = props.theme;
+    menuShouldScrollIntoView = props.menuShouldScrollIntoView;
   var _ref4 = (0, _react.useContext)(PortalPlacementContext) || {},
     setPortalPlacement = _ref4.setPortalPlacement;
   var ref = (0, _react.useRef)(null);
@@ -233,7 +233,8 @@ var MenuPlacer = exports.MenuPlacer = function MenuPlacer(props) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     placement = _useState4[0],
     setPlacement = _useState4[1];
-  var controlHeight = theme.spacing.controlHeight;
+  // The minimum height of the control
+  var controlHeight = 38;
   (0, _useIsomorphicLayoutEffect.default)(function () {
     var menuEl = ref.current;
     if (!menuEl) {
@@ -313,13 +314,10 @@ var MenuList = exports.MenuList = function MenuList(props) {
 // ==============================
 
 var noticeCSS = function noticeCSS(_ref6) {
-  var _ref6$theme = _ref6.theme,
-    baseUnit = _ref6$theme.spacing.baseUnit,
-    colors = _ref6$theme.colors;
+  (0, _objectDestructuringEmpty2.default)(_ref6);
   return {
     textAlign: 'center',
-    color: colors.neutral40,
-    padding: "".concat(baseUnit * 2, "px ").concat(baseUnit * 3, "px")
+    padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)")
   };
 };
 var noOptionsMessageCSS = exports.noOptionsMessageCSS = noticeCSS;
@@ -339,7 +337,9 @@ var NoOptionsMessage = exports.NoOptionsMessage = function NoOptionsMessage(_ref
   }), {
     // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
     role: "option"
-  }, innerProps), children);
+  }, innerProps), (0, _react2.jsx)(_primitives.Text, {
+    color: "color.text.subtle"
+  }, children));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -357,7 +357,9 @@ var LoadingMessage = exports.LoadingMessage = function LoadingMessage(_ref8) {
   }), innerProps, {
     // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
     role: "option"
-  }), children);
+  }), (0, _react2.jsx)(_primitives.Text, {
+    color: "color.text.subtle"
+  }, children));
 };
 
 // ==============================

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

@@ -10,9 +10,11 @@ exports.multiValueRemoveCSS = exports.multiValueLabelCSS = exports.multiValueCSS
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
+var _cross = _interopRequireDefault(require("@atlaskit/icon/utility/cross"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _utils = require("../utils");
-var _indicators = require("./indicators");
 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; } /**
  * @jsxRuntime classic
@@ -20,11 +22,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 var multiValueCSS = exports.multiValueCSS = function multiValueCSS(_ref) {
   var isDisabled = _ref.isDisabled,
-    isFocused = _ref.isFocused,
-    _ref$theme = _ref.theme,
-    spacing = _ref$theme.spacing,
-    borderRadius = _ref$theme.borderRadius,
-    colors = _ref$theme.colors;
+    isFocused = _ref.isFocused;
   var backgroundColor;
   var color;
   if (isDisabled) {
@@ -135,14 +133,52 @@ var MultiValueContainer = exports.MultiValueContainer = MultiValueGeneric;
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var MultiValueLabel = exports.MultiValueLabel = MultiValueGeneric;
+var disabledStyles = (0, _react.css)({
+  display: 'none'
+});
+var enabledStyles = (0, _react.css)({
+  display: 'inherit'
+});
+var iconWrapperStyles = (0, _primitives.xcss)({
+  padding: 'space.025'
+});
+var renderIcon = function renderIcon() {
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh')) {
+    return (0, _react.jsx)(_cross.default, {
+      label: "Clear",
+      color: "currentColor"
+    });
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons-legacy-facade')) {
+    return (0, _react.jsx)(_primitives.Inline, {
+      xcss: iconWrapperStyles
+    }, (0, _react.jsx)(_cross.default, {
+      label: "Clear",
+      color: "currentColor"
+    }));
+  }
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+    (0, _react.jsx)(_selectClear.default, {
+      label: "Clear",
+      primaryColor: "transparent",
+      size: "small",
+      secondaryColor: "inherit"
+    })
+  );
+};
 function MultiValueRemove(_ref5) {
-  var children = _ref5.children,
+  var isDisabled = _ref5.isDisabled,
     innerProps = _ref5.innerProps;
   return (0, _react.jsx)("div", (0, _extends2.default)({
     role: "button"
-  }, innerProps), children || (0, _react.jsx)(_indicators.CrossIcon, {
-    size: 14
-  }));
+  }, innerProps), (0, _react.jsx)("div", {
+    css: isDisabled ? disabledStyles : enabledStyles,
+    "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
+  }, renderIcon()));
 }
 var MultiValue = function MultiValue(props) {
   var children = props.children,
@@ -175,6 +211,7 @@ var MultiValue = function MultiValue(props) {
     })), {}, {
       'aria-label': "Remove ".concat(children || 'option')
     }, removeProps),
+    isDisabled: isDisabled,
     selectProps: selectProps
   }));
 };

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

@@ -14,8 +14,7 @@ var _utils = require("../utils");
  */
 
 var css = exports.css = function css(_ref) {
-  var isDisabled = _ref.isDisabled,
-    spacing = _ref.theme.spacing;
+  var isDisabled = _ref.isDisabled;
   return {
     label: 'singleValue',
     gridArea: '1 / 1 / 2 / 3',

package/dist/cjs/index.js

@@ -22,12 +22,6 @@ Object.defineProperty(exports, "default", {
     return _stateManager.default;
   }
 });
-Object.defineProperty(exports, "defaultTheme", {
-  enumerable: true,
-  get: function get() {
-    return _theme.defaultTheme;
-  }
-});
 Object.defineProperty(exports, "mergeStyles", {
   enumerable: true,
   get: function get() {
@@ -43,6 +37,5 @@ Object.defineProperty(exports, "useStateManager", {
 var _useStateManager = _interopRequireDefault(require("./use-state-manager"));
 var _stateManager = _interopRequireDefault(require("./state-manager"));
 var _styles = require("./styles");
-var _theme = require("./theme");
 var _filters = require("./filters");
 var _components = require("./components");