@atlaskit/react-select 1.3.3 → 1.4.1

package/dist/esm/components/containers.js

@@ -1,7 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
-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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -20,9 +17,10 @@ export var containerCSS = function containerCSS(_ref) {
   return {
     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
   };
 };
 
@@ -42,22 +40,21 @@ export var SelectContainer = function SelectContainer(props) {
 // Value Container
 // ==============================
 
-export var valueContainerCSS = function valueContainerCSS(_ref2, unstyled) {
-  var spacing = _ref2.theme.spacing,
-    isMulti = _ref2.isMulti,
+export var valueContainerCSS = function valueContainerCSS(_ref2) {
+  var isMulti = _ref2.isMulti,
     hasValue = _ref2.hasValue,
+    isCompact = _ref2.isCompact,
     controlShouldRenderValue = _ref2.selectProps.controlShouldRenderValue;
-  return _objectSpread({
+  return {
     alignItems: 'center',
     display: isMulti && hasValue && controlShouldRenderValue ? 'flex' : 'grid',
     flex: 1,
     flexWrap: 'wrap',
     WebkitOverflowScrolling: 'touch',
     position: 'relative',
-    overflow: 'hidden'
-  }, unstyled ? {} : {
-    padding: "".concat(spacing.baseUnit / 2, "px ").concat(spacing.baseUnit * 2, "px")
-  });
+    overflow: 'hidden',
+    padding: "".concat(isCompact ? 0 : "var(--ds-space-025, 2px)", " ", "var(--ds-space-075, 6px)")
+  };
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -88,7 +85,8 @@ export var indicatorsContainerCSS = function indicatorsContainerCSS() {
     alignItems: 'center',
     alignSelf: 'stretch',
     display: 'flex',
-    flexShrink: 0
+    flexShrink: 0,
+    paddingRight: "var(--ds-space-050, 4px)"
   };
 };
 

package/dist/esm/components/control.js

@@ -1,7 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -9,35 +6,79 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import { jsx } from '@emotion/react';
 import { getStyleProps } from '../utils';
-export var css = function css(_ref, unstyled) {
+export var css = function css(_ref) {
   var isDisabled = _ref.isDisabled,
     isFocused = _ref.isFocused,
-    _ref$theme = _ref.theme,
-    colors = _ref$theme.colors,
-    borderRadius = _ref$theme.borderRadius,
-    spacing = _ref$theme.spacing;
-  return _objectSpread({
+    isInvalid = _ref.isInvalid,
+    isCompact = _ref.isCompact,
+    appearance = _ref.appearance;
+  var borderColor = isFocused ? "var(--ds-border-focused, #388BFF)" : "var(--ds-border-input, #8590A2)";
+  var backgroundColor = isFocused ? "var(--ds-background-input-pressed, #FFFFFF)" : "var(--ds-background-input, #FFFFFF)";
+  var backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, #FFFFFF)" : "var(--ds-background-input-hovered, #F7F8F9)";
+  var 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)";
+  }
+  if (isInvalid) {
+    borderColor = "var(--ds-border-danger, #E2483D)";
+    borderColorHover = "var(--ds-border-danger, #E2483D)";
+  }
+  var 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',
-    minHeight: spacing.controlHeight,
     outline: '0 !important',
     position: 'relative',
-    transition: 'all 100ms'
-  }, unstyled ? {} : {
-    backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
-    borderColor: isDisabled ? colors.neutral10 : isFocused ? colors.primary : colors.neutral20,
-    borderRadius: borderRadius,
+    // Turn pointer events off when disabled - this makes it so hover etc don't work.
+    pointerEvents: isDisabled ? 'none' : undefined,
+    backgroundColor: backgroundColor,
+    borderColor: borderColor,
     borderStyle: 'solid',
-    borderWidth: 1,
-    boxShadow: isFocused ? "0 0 0 1px ".concat(colors.primary) : undefined,
-    '&:hover': {
-      borderColor: isFocused ? colors.primary : colors.neutral30
+    borderRadius: "var(--ds-border-radius-100, 3px)",
+    borderWidth: "var(--ds-border-width, 1px)",
+    boxShadow: isInvalid ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor) : 'none',
+    '&:focus-within': {
+      boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor)
+    },
+    minHeight: isCompact ? 32 : 40,
+    padding: 0,
+    transition: "background-color ".concat(transitionDuration, " ease-in-out,\nborder-color ").concat(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)'
     }
-  });
+  };
 };
 var Control = function Control(props) {
   var children = props.children,

package/dist/esm/components/group.js

@@ -1,9 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 var _excluded = ["data"];
-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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -11,11 +9,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import { jsx } from '@emotion/react';
 import { cleanCommonProps, getStyleProps } from '../utils';
-export var groupCSS = function groupCSS(_ref, unstyled) {
-  var spacing = _ref.theme.spacing;
-  return unstyled ? {} : {
-    paddingBottom: spacing.baseUnit * 2,
-    paddingTop: spacing.baseUnit * 2
+export var groupCSS = function groupCSS(_ref) {
+  _objectDestructuringEmpty(_ref);
+  return {
+    paddingBottom: "var(--ds-space-100, 8px)",
+    paddingTop: "var(--ds-space-100, 8px)"
   };
 };
 var Group = function Group(props) {
@@ -41,23 +39,21 @@ var Group = function Group(props) {
     cx: cx
   }), label), jsx("div", null, children));
 };
-export var groupHeadingCSS = function groupHeadingCSS(_ref2, unstyled) {
-  var _ref2$theme = _ref2.theme,
-    colors = _ref2$theme.colors,
-    spacing = _ref2$theme.spacing;
-  return _objectSpread({
+export var groupHeadingCSS = function groupHeadingCSS(_ref2) {
+  _objectDestructuringEmpty(_ref2);
+  return {
     label: 'group',
     cursor: 'default',
-    display: 'block'
-  }, unstyled ? {} : {
-    color: colors.neutral40,
+    display: 'block',
     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)".concat(" !important"),
+    textTransform: 'none'
+  };
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/components/indicators.js

@@ -64,24 +64,20 @@ export var DownChevron = function DownChevron(props) {
 // Dropdown & Clear Buttons
 // ==============================
 
-var baseCSS = function baseCSS(_ref2, unstyled) {
-  var isFocused = _ref2.isFocused,
-    _ref2$theme = _ref2.theme,
-    baseUnit = _ref2$theme.spacing.baseUnit,
-    colors = _ref2$theme.colors;
-  return _objectSpread({
+export var dropdownIndicatorCSS = function dropdownIndicatorCSS(_ref2) {
+  var isCompact = _ref2.isCompact,
+    isDisabled = _ref2.isDisabled;
+  return {
     label: 'indicatorContainer',
     display: 'flex',
-    transition: 'color 150ms'
-  }, unstyled ? {} : {
-    color: isFocused ? colors.neutral60 : colors.neutral20,
-    padding: baseUnit * 2,
+    transition: 'color 150ms',
+    color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : "var(--ds-text-subtle, #44546F)",
+    padding: "".concat(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 var dropdownIndicatorCSS = baseCSS;
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var DropdownIndicator = function DropdownIndicator(props) {
@@ -92,7 +88,19 @@ export var DropdownIndicator = function DropdownIndicator(props) {
     'dropdown-indicator': true
   }), innerProps), children || jsx(DownChevron, null));
 };
-export var clearIndicatorCSS = baseCSS;
+export var clearIndicatorCSS = function clearIndicatorCSS(_ref3) {
+  var isCompact = _ref3.isCompact;
+  return {
+    label: 'indicatorContainer',
+    display: 'flex',
+    transition: 'color 150ms',
+    color: "var(--ds-text-subtlest, #626F86)",
+    padding: "".concat(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 var ClearIndicator = function ClearIndicator(props) {
@@ -108,20 +116,16 @@ export var ClearIndicator = function ClearIndicator(props) {
 // Separator
 // ==============================
 
-export var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref3, unstyled) {
-  var isDisabled = _ref3.isDisabled,
-    _ref3$theme = _ref3.theme,
-    baseUnit = _ref3$theme.spacing.baseUnit,
-    colors = _ref3$theme.colors;
-  return _objectSpread({
+export var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref4) {
+  var isDisabled = _ref4.isDisabled;
+  return {
     label: 'indicatorSeparator',
     alignSelf: 'stretch',
-    width: 1
-  }, unstyled ? {} : {
-    backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
-    marginBottom: baseUnit * 2,
-    marginTop: baseUnit * 2
-  });
+    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
@@ -144,13 +148,12 @@ var loadingDotAnimations = keyframes({
     opacity: 1
   }
 });
-export var loadingIndicatorCSS = function loadingIndicatorCSS(_ref4, unstyled) {
-  var isFocused = _ref4.isFocused,
-    size = _ref4.size,
-    _ref4$theme = _ref4.theme,
-    colors = _ref4$theme.colors,
-    baseUnit = _ref4$theme.spacing.baseUnit;
-  return _objectSpread({
+export var loadingIndicatorCSS = function loadingIndicatorCSS(_ref5) {
+  var isFocused = _ref5.isFocused,
+    size = _ref5.size,
+    isCompact = _ref5.isCompact,
+    colors = _ref5.theme.colors;
+  return {
     label: 'loadingIndicator',
     display: 'flex',
     transition: 'color 150ms',
@@ -159,15 +162,14 @@ export var loadingIndicatorCSS = function loadingIndicatorCSS(_ref4, unstyled) {
     lineHeight: 1,
     marginRight: size,
     textAlign: 'center',
-    verticalAlign: 'middle'
-  }, unstyled ? {} : {
+    verticalAlign: 'middle',
     color: isFocused ? colors.neutral60 : colors.neutral20,
-    padding: baseUnit * 2
-  });
+    padding: "".concat(isCompact ? 0 : "var(--ds-space-075, 6px)", " ", "var(--ds-space-100, 8px)")
+  };
 };
-var LoadingDot = function LoadingDot(_ref5) {
-  var delay = _ref5.delay,
-    offset = _ref5.offset;
+var LoadingDot = function LoadingDot(_ref6) {
+  var delay = _ref6.delay,
+    offset = _ref6.offset;
   return jsx("span", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     css: {
@@ -183,12 +185,12 @@ var LoadingDot = function LoadingDot(_ref5) {
   });
 };
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-export var LoadingIndicator = function LoadingIndicator(_ref6) {
-  var innerProps = _ref6.innerProps,
-    isRtl = _ref6.isRtl,
-    _ref6$size = _ref6.size,
-    size = _ref6$size === void 0 ? 4 : _ref6$size,
-    restProps = _objectWithoutProperties(_ref6, _excluded2);
+export var LoadingIndicator = function LoadingIndicator(_ref7) {
+  var innerProps = _ref7.innerProps,
+    isRtl = _ref7.isRtl,
+    _ref7$size = _ref7.size,
+    size = _ref7$size === void 0 ? 4 : _ref7$size,
+    restProps = _objectWithoutProperties(_ref7, _excluded2);
   return jsx("div", _extends({}, getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
     innerProps: innerProps,
     isRtl: isRtl,

package/dist/esm/components/input.js

@@ -11,7 +11,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import { jsx } from '@emotion/react';
 import { cleanCommonProps, getStyleProps } from '../utils';
-export var inputCSS = function inputCSS(_ref, unstyled) {
+export var inputCSS = function inputCSS(_ref) {
   var isDisabled = _ref.isDisabled,
     value = _ref.value,
     _ref$theme = _ref.theme,
@@ -22,11 +22,11 @@ export var inputCSS = function inputCSS(_ref, unstyled) {
     // 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), unstyled ? {} : {
+  }, containerStyle), {}, {
     margin: spacing.baseUnit / 2,
     paddingBottom: spacing.baseUnit / 2,
     paddingTop: spacing.baseUnit / 2,
-    color: colors.neutral80
+    color: "var(--ds-text, hsl(0, 0%, 20%))"
   });
 };
 var spacingStyle = {

package/dist/esm/components/menu.js

@@ -192,22 +192,16 @@ function alignToControl(placement) {
 var coercePlacement = function coercePlacement(p) {
   return p === 'auto' ? 'bottom' : p;
 };
-export var menuCSS = function menuCSS(_ref2, unstyled) {
-  var _objectSpread2;
+export var 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 _objectSpread((_objectSpread2 = {
+  return _ref3 = {
     label: 'menu'
-  }, _defineProperty(_objectSpread2, alignToControl(placement), '100%'), _defineProperty(_objectSpread2, "position", 'absolute'), _defineProperty(_objectSpread2, "width", '100%'), _defineProperty(_objectSpread2, "zIndex", 1), _objectSpread2), unstyled ? {} : {
-    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
-  });
+  }, _defineProperty(_ref3, alignToControl(placement), '100%'), _defineProperty(_ref3, "position", 'absolute'), _defineProperty(_ref3, "width", '100%'), _defineProperty(_ref3, "zIndex", 1), _defineProperty(_ref3, "borderRadius", borderRadius), _defineProperty(_ref3, "marginBottom", spacing.menuGutter), _defineProperty(_ref3, "marginTop", spacing.menuGutter), _defineProperty(_ref3, "backgroundColor", "var(--ds-surface-overlay, white)"), _defineProperty(_ref3, "boxShadow", "var(--ds-shadow-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"), _ref3;
 };
 var PortalPlacementContext = /*#__PURE__*/createContext(null);
 
@@ -221,8 +215,8 @@ export var MenuPlacer = function MenuPlacer(props) {
     menuPosition = props.menuPosition,
     menuShouldScrollIntoView = props.menuShouldScrollIntoView,
     theme = props.theme;
-  var _ref3 = useContext(PortalPlacementContext) || {},
-    setPortalPlacement = _ref3.setPortalPlacement;
+  var _ref4 = useContext(PortalPlacementContext) || {},
+    setPortalPlacement = _ref4.setPortalPlacement;
   var ref = useRef(null);
   var _useState = useState(maxMenuHeight),
     _useState2 = _slicedToArray(_useState, 2),
@@ -281,19 +275,17 @@ export default Menu;
 // Menu List
 // ==============================
 
-export var menuListCSS = function menuListCSS(_ref4, unstyled) {
-  var maxHeight = _ref4.maxHeight,
-    baseUnit = _ref4.theme.spacing.baseUnit;
-  return _objectSpread({
+export var menuListCSS = function menuListCSS(_ref5) {
+  var maxHeight = _ref5.maxHeight;
+  return {
     maxHeight: maxHeight,
     overflowY: 'auto',
     position: 'relative',
     // required for offset[Height, Top] > keyboard scroll
-    WebkitOverflowScrolling: 'touch'
-  }, unstyled ? {} : {
-    paddingBottom: baseUnit,
-    paddingTop: baseUnit
-  });
+    WebkitOverflowScrolling: 'touch',
+    paddingTop: "var(--ds-space-100, 8px)",
+    paddingBottom: "var(--ds-space-100, 8px)"
+  };
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -316,25 +308,24 @@ export var MenuList = function MenuList(props) {
 // Menu Notices
 // ==============================
 
-var noticeCSS = function noticeCSS(_ref5, unstyled) {
-  var _ref5$theme = _ref5.theme,
-    baseUnit = _ref5$theme.spacing.baseUnit,
-    colors = _ref5$theme.colors;
-  return _objectSpread({
-    textAlign: 'center'
-  }, unstyled ? {} : {
+var noticeCSS = function noticeCSS(_ref6) {
+  var _ref6$theme = _ref6.theme,
+    baseUnit = _ref6$theme.spacing.baseUnit,
+    colors = _ref6$theme.colors;
+  return {
+    textAlign: 'center',
     color: colors.neutral40,
     padding: "".concat(baseUnit * 2, "px ").concat(baseUnit * 3, "px")
-  });
+  };
 };
 export var noOptionsMessageCSS = noticeCSS;
 export var loadingMessageCSS = noticeCSS;
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-export var NoOptionsMessage = function NoOptionsMessage(_ref6) {
-  var _ref6$children = _ref6.children,
-    children = _ref6$children === void 0 ? 'No options' : _ref6$children,
-    innerProps = _ref6.innerProps,
-    restProps = _objectWithoutProperties(_ref6, _excluded);
+export var NoOptionsMessage = function NoOptionsMessage(_ref7) {
+  var _ref7$children = _ref7.children,
+    children = _ref7$children === void 0 ? 'No options' : _ref7$children,
+    innerProps = _ref7.innerProps,
+    restProps = _objectWithoutProperties(_ref7, _excluded);
   return jsx("div", _extends({}, getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
     children: children,
     innerProps: innerProps
@@ -348,11 +339,11 @@ export var NoOptionsMessage = function NoOptionsMessage(_ref6) {
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-export var LoadingMessage = function LoadingMessage(_ref7) {
-  var _ref7$children = _ref7.children,
-    children = _ref7$children === void 0 ? 'Loading...' : _ref7$children,
-    innerProps = _ref7.innerProps,
-    restProps = _objectWithoutProperties(_ref7, _excluded2);
+export var LoadingMessage = function LoadingMessage(_ref8) {
+  var _ref8$children = _ref8.children,
+    children = _ref8$children === void 0 ? 'Loading...' : _ref8$children,
+    innerProps = _ref8.innerProps,
+    restProps = _objectWithoutProperties(_ref8, _excluded2);
   return jsx("div", _extends({}, getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
     children: children,
     innerProps: innerProps
@@ -369,10 +360,10 @@ export var LoadingMessage = function LoadingMessage(_ref7) {
 // Menu Portal
 // ==============================
 
-export var menuPortalCSS = function menuPortalCSS(_ref8) {
-  var rect = _ref8.rect,
-    offset = _ref8.offset,
-    position = _ref8.position;
+export var menuPortalCSS = function menuPortalCSS(_ref9) {
+  var rect = _ref9.rect,
+    offset = _ref9.offset,
+    position = _ref9.position;
   return {
     left: rect.left,
     position: position,