@atlaskit/react-select 1.3.3 → 1.4.1

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

@@ -8,57 +8,111 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 
 import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../utils';
 import { CrossIcon } from './indicators';
-export var multiValueCSS = function multiValueCSS(_ref, unstyled) {
-  var _ref$theme = _ref.theme,
+export var 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;
+  var backgroundColor;
+  var 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 _objectSpread({
     label: 'multiValue',
     display: 'flex',
-    minWidth: 0
-  }, unstyled ? {} : {
-    backgroundColor: colors.neutral10,
-    borderRadius: borderRadius / 2,
-    margin: spacing.baseUnit / 2
+    minWidth: 0,
+    // resolves flex/text-overflow bug
+    margin: "var(--ds-space-025, 2px)",
+    borderRadius: "var(--ds-border-radius-050, 2px)",
+    backgroundColor: backgroundColor,
+    boxShadow: isFocused ? "0 0 0 2px ".concat("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: 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 var multiValueLabelCSS = function multiValueLabelCSS(_ref2, unstyled) {
-  var _ref2$theme = _ref2.theme,
-    borderRadius = _ref2$theme.borderRadius,
-    colors = _ref2$theme.colors,
-    cropWithEllipsis = _ref2.cropWithEllipsis;
+export var multiValueLabelCSS = function multiValueLabelCSS(_ref2) {
+  var cropWithEllipsis = _ref2.cropWithEllipsis,
+    isDisabled = _ref2.isDisabled;
   return _objectSpread({
     overflow: 'hidden',
     textOverflow: cropWithEllipsis || cropWithEllipsis === undefined ? 'ellipsis' : undefined,
-    whiteSpace: 'nowrap'
-  }, unstyled ? {} : {
-    borderRadius: borderRadius / 2,
-    color: colors.neutral80,
+    whiteSpace: 'nowrap',
+    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 var multiValueRemoveCSS = function multiValueRemoveCSS(_ref3, unstyled) {
-  var _ref3$theme = _ref3.theme,
-    spacing = _ref3$theme.spacing,
-    borderRadius = _ref3$theme.borderRadius,
-    colors = _ref3$theme.colors,
-    isFocused = _ref3.isFocused;
+export var multiValueRemoveCSS = function multiValueRemoveCSS(_ref3) {
+  var isFocused = _ref3.isFocused;
   return _objectSpread({
     alignItems: 'center',
-    display: 'flex'
-  }, unstyled ? {} : {
-    borderRadius: borderRadius / 2,
-    backgroundColor: isFocused ? colors.dangerLight : undefined,
-    paddingLeft: spacing.baseUnit,
-    paddingRight: spacing.baseUnit,
+    display: 'flex',
+    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: "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: colors.dangerLight,
-      color: colors.danger
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    },
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
     }
   });
 };

package/dist/esm/components/option.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,30 +6,50 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import { jsx } from '@emotion/react';
 import { getStyleProps } from '../utils';
-export var optionCSS = function optionCSS(_ref, unstyled) {
+export var optionCSS = function optionCSS(_ref) {
   var isDisabled = _ref.isDisabled,
     isFocused = _ref.isFocused,
-    isSelected = _ref.isSelected,
-    _ref$theme = _ref.theme,
-    spacing = _ref$theme.spacing,
-    colors = _ref$theme.colors;
-  return _objectSpread({
+    isSelected = _ref.isSelected;
+  var color = "var(--ds-text, #172B4D)";
+  if (isDisabled) {
+    color = "var(--ds-text-disabled, #091E424F)";
+  } else if (isSelected) {
+    color = "var(--ds-text-selected, #0C66E4)";
+  }
+  var boxShadow;
+  var backgroundColor;
+  if (isDisabled) {
+    backgroundColor = undefined;
+  } else if (isSelected && isFocused) {
+    backgroundColor = "var(--ds-background-selected-hovered, #CCE0FF)";
+  } else if (isSelected) {
+    backgroundColor = "var(--ds-background-selected, #E9F2FF)";
+  } else if (isFocused) {
+    backgroundColor = "var(--ds-background-neutral-subtle-hovered, #091E420F)";
+  }
+  if (!isDisabled && (isFocused || isSelected)) {
+    boxShadow = "inset 2px 0px 0px ".concat("var(--ds-border-selected, #0C66E4)");
+  }
+  var cursor = isDisabled ? 'not-allowed' : 'default';
+  return {
     label: 'option',
-    cursor: 'default',
     display: 'block',
     fontSize: 'inherit',
     width: '100%',
     userSelect: 'none',
-    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)'
-  }, unstyled ? {} : {
-    backgroundColor: isSelected ? colors.primary : isFocused ? colors.primary25 : 'transparent',
-    color: isDisabled ? colors.neutral20 : isSelected ? colors.neutral0 : 'inherit',
-    padding: "".concat(spacing.baseUnit * 2, "px ").concat(spacing.baseUnit * 3, "px"),
-    // provide some affordance on touch devices
+    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+    padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-150, 12px)"),
+    backgroundColor: backgroundColor,
+    color: color,
+    cursor: cursor,
+    boxShadow: boxShadow,
     ':active': {
-      backgroundColor: !isDisabled ? isSelected ? colors.primary : colors.primary50 : undefined
+      backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-selected-pressed, #85B8FF)" : "var(--ds-background-neutral-subtle-pressed, #091E4224)" : undefined
+    },
+    '@media screen and (-ms-high-contrast: active)': {
+      borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
     }
-  });
+  };
 };
 var Option = function Option(props) {
   var children = props.children,

package/dist/esm/components/placeholder.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,18 +6,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import { jsx } from '@emotion/react';
 import { getStyleProps } from '../utils';
-export var placeholderCSS = function placeholderCSS(_ref, unstyled) {
-  var _ref$theme = _ref.theme,
-    spacing = _ref$theme.spacing,
-    colors = _ref$theme.colors;
-  return _objectSpread({
+export var placeholderCSS = function placeholderCSS(_ref) {
+  var isDisabled = _ref.isDisabled;
+  return {
     label: 'placeholder',
-    gridArea: '1 / 1 / 2 / 3'
-  }, unstyled ? {} : {
-    color: colors.neutral50,
-    marginLeft: spacing.baseUnit / 2,
-    marginRight: spacing.baseUnit / 2
-  });
+    gridArea: '1 / 1 / 2 / 3',
+    margin: "0 ".concat("var(--ds-space-025, 2px)"),
+    color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : "var(--ds-text-subtlest, #626F86)"
+  };
 };
 var Placeholder = function Placeholder(props) {
   var children = props.children,

package/dist/esm/components/single-value.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,23 +6,19 @@ 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,
-    _ref$theme = _ref.theme,
-    spacing = _ref$theme.spacing,
-    colors = _ref$theme.colors;
-  return _objectSpread({
+    spacing = _ref.theme.spacing;
+  return {
     label: 'singleValue',
     gridArea: '1 / 1 / 2 / 3',
     maxWidth: '100%',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }, unstyled ? {} : {
-    color: isDisabled ? colors.neutral40 : colors.neutral80,
-    marginLeft: spacing.baseUnit / 2,
-    marginRight: spacing.baseUnit / 2
-  });
+    whiteSpace: 'nowrap',
+    margin: "0 ".concat("var(--ds-space-025, 2px)"),
+    color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : "var(--ds-text, #172B4D)"
+  };
 };
 var SingleValue = function SingleValue(props) {
   var children = props.children,

package/dist/esm/select.js

@@ -68,8 +68,7 @@ export var defaultProps = {
   },
   styles: {},
   tabIndex: 0,
-  tabSelectsValue: true,
-  unstyled: false
+  tabSelectsValue: true
 };
 function toCategorizedOption(props, option, selectValue, index) {
   var isDisabled = _isOptionDisabled(props, option, selectValue);
@@ -389,8 +388,7 @@ var Select = /*#__PURE__*/function (_Component) {
       return getOptionValue(_this.props, data);
     });
     _defineProperty(_assertThisInitialized(_this), "getStyles", function (key, props) {
-      var unstyled = _this.props.unstyled;
-      var base = defaultStyles[key](props, unstyled);
+      var base = defaultStyles[key](props);
       base.boxSizing = 'border-box';
       var custom = _this.props.styles[key];
       return custom ? custom(base, props) : base;
@@ -1373,7 +1371,8 @@ var Select = /*#__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;
@@ -1383,11 +1382,13 @@ var Select = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onClearIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
+      var isCompact = spacing === 'compact';
       return /*#__PURE__*/React.createElement(ClearIndicator, _extends({
         clearControlLabel: clearControlLabel
       }, commonProps, {
         innerProps: innerProps,
-        isFocused: isFocused
+        isFocused: isFocused,
+        isCompact: isCompact
       }));
     }
   }, {
@@ -1398,18 +1399,21 @@ var Select = /*#__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.createElement(LoadingIndicator, _extends({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
-        isFocused: isFocused
+        isFocused: isFocused,
+        isCompact: isCompact
       }));
     }
   }, {
@@ -1440,8 +1444,11 @@ var Select = /*#__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,
@@ -1450,7 +1457,8 @@ var Select = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React.createElement(DropdownIndicator, _extends({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
-        isFocused: isFocused
+        isFocused: isFocused,
+        isCompact: isCompact
       }));
     }
   }, {
@@ -1468,24 +1476,24 @@ var Select = /*#__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;
       }
@@ -1634,12 +1642,12 @@ var Select = /*#__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.createElement(RequiredInput, {
@@ -1714,13 +1722,19 @@ var Select = /*#__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.createElement(SelectContainer, _extends({}, commonProps, {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
         className: className,
@@ -1736,11 +1750,15 @@ var Select = /*#__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.createElement(ValueContainer, _extends({}, commonProps, {
-        isDisabled: isDisabled
+        isDisabled: isDisabled,
+        isCompact: isCompact
       }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends({}, commonProps, {
         isDisabled: isDisabled
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());

package/dist/types/components/containers.d.ts

@@ -32,8 +32,12 @@ export interface ValueContainerProps<Option = unknown, IsMulti extends boolean =
      */
     children: ReactNode;
     isDisabled: boolean;
+    /**
+     * Whether the select is compact.
+     */
+    isCompact?: boolean;
 }
-export declare const valueContainerCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing }, isMulti, hasValue, selectProps: { controlShouldRenderValue }, }: ValueContainerProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
+export declare const valueContainerCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isMulti, hasValue, isCompact, selectProps: { controlShouldRenderValue }, }: ValueContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const ValueContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ValueContainerProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export interface IndicatorsContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
     isDisabled: boolean;

package/dist/types/components/control.d.ts

@@ -23,11 +23,20 @@ export interface ControlProps<Option = unknown, IsMulti extends boolean = boolea
      * Whether the select is focused.
      */
     isFocused: boolean;
+    /**
+     * Whether the select is invalid.
+     */
+    isInvalid: boolean | undefined;
+    /**
+     * Whether the select is compact.
+     */
+    isCompact?: boolean;
+    appearance?: 'default' | 'subtle' | 'none';
     /**
      * Whether the select is expanded.
      */
     menuIsOpen: boolean;
 }
-export declare const css: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isFocused, theme: { colors, borderRadius, spacing }, }: ControlProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
+export declare const css: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isFocused, isInvalid, isCompact, appearance, }: ControlProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 declare const Control: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export default Control;

package/dist/types/components/group.d.ts

@@ -37,7 +37,7 @@ export interface GroupProps<Option = unknown, IsMulti extends boolean = boolean,
     data: Group;
     options: Options<Option>;
 }
-export declare const groupCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing } }: GroupProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
+export declare const groupCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({}: GroupProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 declare const Group: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: GroupProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 interface GroupHeadingPropsDefinedProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends ForwardedHeadingProps<Option, Group> {
     className?: string | undefined;
@@ -48,6 +48,6 @@ interface GroupHeadingPropsDefinedProps<Option, IsMulti extends boolean, Group e
     cx: CX;
 }
 export type GroupHeadingProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = GroupHeadingPropsDefinedProps<Option, IsMulti, Group> & JSX.IntrinsicElements['div'];
-export declare const groupHeadingCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { colors, spacing } }: GroupHeadingProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
+export declare const groupHeadingCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({}: GroupHeadingProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const GroupHeading: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: GroupHeadingProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export default Group;

package/dist/types/components/indicators.d.ts

@@ -27,8 +27,12 @@ export interface DropdownIndicatorProps<Option = unknown, IsMulti extends boolea
      */
     isFocused: boolean;
     isDisabled: boolean;
+    /**
+     * Whether the select is compact.
+     */
+    isCompact?: boolean;
 }
-export declare const dropdownIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, theme: { spacing: { baseUnit }, colors, }, }: DropdownIndicatorProps<Option, IsMulti, Group> | ClearIndicatorProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
+export declare const dropdownIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isCompact, isDisabled, }: DropdownIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const DropdownIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export interface ClearIndicatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
     /**
@@ -47,17 +51,21 @@ export interface ClearIndicatorProps<Option = unknown, IsMulti extends boolean =
      * The focused state of the select.
      */
     isFocused: boolean;
+    /**
+     * Whether the select is compact.
+     */
+    isCompact?: boolean;
 }
-export declare const clearIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, theme: { spacing: { baseUnit }, colors, }, }: DropdownIndicatorProps<Option, IsMulti, Group> | ClearIndicatorProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
+export declare const clearIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isCompact, }: ClearIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const ClearIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export interface IndicatorSeparatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
     isDisabled: boolean;
     isFocused: boolean;
     innerProps?: JSX.IntrinsicElements['span'];
 }
-export declare const indicatorSeparatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, theme: { spacing: { baseUnit }, colors, }, }: IndicatorSeparatorProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
+export declare const indicatorSeparatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, }: IndicatorSeparatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const IndicatorSeparator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: IndicatorSeparatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;
-export declare const loadingIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, size, theme: { colors, spacing: { baseUnit }, }, }: LoadingIndicatorProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
+export declare const loadingIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, size, isCompact, theme: { colors }, }: LoadingIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export interface LoadingIndicatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
     /**
      * Props that will be passed on to the children.
@@ -72,5 +80,9 @@ export interface LoadingIndicatorProps<Option = unknown, IsMulti extends boolean
      * Set size of the container.
      */
     size: number;
+    /**
+     * Whether the select is compact.
+     */
+    isCompact?: boolean;
 }
 export declare const LoadingIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ innerProps, isRtl, size, ...restProps }: LoadingIndicatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;

package/dist/types/components/input.d.ts

@@ -28,6 +28,6 @@ export interface InputSpecificProps<Option = unknown, IsMulti extends boolean =
     inputClassName?: string;
 }
 export type InputProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = InputSpecificProps<Option, IsMulti, Group>;
-export declare const inputCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, value, theme: { spacing, colors } }: InputProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
+export declare const inputCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, value, theme: { spacing, colors }, }: InputProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 declare const Input: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export default Input;

package/dist/types/components/menu.d.ts

@@ -68,7 +68,7 @@ export interface MenuPlacerProps<Option, IsMulti extends boolean, Group extends
      */
     children: (childrenProps: ChildrenProps) => ReactElement;
 }
-export declare const menuCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ placement, theme: { borderRadius, spacing, colors } }: MenuProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
+export declare const menuCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ placement, theme: { borderRadius, spacing, colors }, }: MenuProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const MenuPlacer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuPlacerProps<Option, IsMulti, Group>) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 declare const Menu: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export default Menu;
@@ -94,10 +94,10 @@ export interface MenuListProps<Option = unknown, IsMulti extends boolean = boole
      */
     innerProps: JSX.IntrinsicElements['div'];
 }
-export declare const menuListCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ maxHeight, theme: { spacing: { baseUnit }, }, }: MenuListProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
+export declare const menuListCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ maxHeight, }: MenuListProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const MenuList: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuListProps<Option, IsMulti, Group>) => jsx.JSX.Element;
-export declare const noOptionsMessageCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing: { baseUnit }, colors, }, }: NoticeProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
-export declare const loadingMessageCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing: { baseUnit }, colors, }, }: NoticeProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
+export declare const noOptionsMessageCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing: { baseUnit }, colors, }, }: NoticeProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const loadingMessageCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing: { baseUnit }, colors, }, }: NoticeProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export interface NoticeProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
     /**
      * The children to be rendered.