@atlaskit/react-select 3.14.2 → 3.14.4

package/dist/cjs/select.js

@@ -1,3 +1,4 @@
+/* select.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultProps = exports.default = void 0;
+require("./select.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _readOnlyError2 = _interopRequireDefault(require("@babel/runtime/helpers/readOnlyError"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
@@ -18,27 +21,109 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _deviceCheck = require("@atlaskit/ds-lib/device-check");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _builtins = require("./builtins");
 var _components = require("./components");
-var _dummyInput = _interopRequireDefault(require("./components/internal/dummy-input"));
-var _notifyOpenLayerObserver = require("./components/internal/notify-open-layer-observer");
-var _requiredInput = _interopRequireDefault(require("./components/internal/required-input"));
-var _scrollManager = _interopRequireDefault(require("./components/internal/scroll-manager"));
+var _dummyInput = _interopRequireDefault(require("./components/dummy-input"));
 var _liveRegion = _interopRequireDefault(require("./components/live-region"));
-var _menu = require("./components/menu");
+var _menuPlacer = _interopRequireDefault(require("./components/menu-placer"));
 var _filters = require("./filters");
-var _styles = require("./styles");
-var _utils = require("./utils");
+var _classnames = require("./internal/classnames");
+var _cleanValue = require("./internal/clean-value");
+var _isDocumentEl = require("./internal/is-document-el");
+var _multiValueAsValue = require("./internal/multi-value-as-value");
+var _notifyOpenLayerObserver = require("./internal/notify-open-layer-observer");
+var _requiredInput = _interopRequireDefault(require("./internal/required-input"));
+var _scrollManager = _interopRequireDefault(require("./internal/scroll-manager"));
+var _scrollTo = require("./internal/scroll-to");
+var _singleValueAsValue = require("./internal/single-value-as-value");
+var _valueTernary = require("./internal/value-ternary");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var noop = _noop.default;
+function notNullish(item) {
+  return item != null;
+}
+function scrollIntoView(menuEl, focusedEl) {
+  var menuRect = menuEl.getBoundingClientRect();
+  var focusedRect = focusedEl.getBoundingClientRect();
+  var overScroll = focusedEl.offsetHeight / 3;
+  if (focusedRect.bottom + overScroll > menuRect.bottom) {
+    (0, _scrollTo.scrollTo)(menuEl, Math.min(focusedEl.offsetTop + focusedEl.clientHeight - menuEl.offsetHeight + overScroll, menuEl.scrollHeight));
+  } else if (focusedRect.top - overScroll < menuRect.top) {
+    (0, _scrollTo.scrollTo)(menuEl, Math.max(focusedEl.offsetTop - overScroll, 0));
+  }
+}
+function isMobileDevice() {
+  try {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  } catch (_unused) {
+    return false;
+  }
+}
+function isTouchCapable() {
+  try {
+    document.createEvent('TouchEvent');
+    return true;
+  } catch (_unused2) {
+    return false;
+  }
+}
+
+/**
+ * Filters out unsupported selectors (e.g., pseudo-classes, complex selectors) from a styles object.
+ * @param styles - The styles object to filter.
+ * @returns A new object containing only supported styles.
+ */
+var filterUnsupportedSelectors = function filterUnsupportedSelectors(styles) {
+  var unsupportedSelectors = [':',
+  // pseudo-classes/elements
+  '[',
+  // attribute selectors
+  '>',
+  // child combinator
+  '+',
+  // adjacent sibling combinator
+  '~',
+  // general sibling combinator
+  ' ',
+  // descendant combinator
+  '*',
+  // universal selector
+  '#',
+  // ID selector
+  '.',
+  // class selector
+  '@',
+  // at-rules
+  '&',
+  // parent selector
+  '|',
+  // namespace separator
+  '^',
+  // starts with
+  '$',
+  // ends with
+  '=' // equals
+  ];
+  return Object.keys(styles).reduce(function (filteredStyles, key) {
+    if (!unsupportedSelectors.some(function (selector) {
+      return key.includes(selector);
+    })) {
+      filteredStyles[key] = styles[key];
+    }
+    return filteredStyles;
+  }, {});
+};
+var elemBeforeCSS = null;
 var defaultProps = exports.defaultProps = {
   backspaceRemovesValue: true,
-  blurInputOnSelect: (0, _utils.isTouchCapable)(),
-  captureMenuScroll: !(0, _utils.isTouchCapable)(),
+  blurInputOnSelect: isTouchCapable(),
+  captureMenuScroll: !isTouchCapable(),
   classNames: {},
   closeMenuOnSelect: true,
   closeMenuOnScroll: false,
@@ -64,7 +149,7 @@ var defaultProps = exports.defaultProps = {
   menuPlacement: 'bottom',
   menuPosition: 'absolute',
   menuShouldBlockScroll: false,
-  menuShouldScrollIntoView: !(0, _utils.isMobileDevice)(),
+  menuShouldScrollIntoView: !isMobileDevice(),
   noOptionsMessage: function noOptionsMessage() {
     return 'No options';
   },
@@ -117,7 +202,7 @@ function buildCategorizedOptions(props, selectValue) {
     }
     var categorizedOption = toCategorizedOption(props, groupOrOption, selectValue, groupOrOptionIndex);
     return isFocusable(props, categorizedOption) ? categorizedOption : undefined;
-  }).filter(_utils.notNullish);
+  }).filter(notNullish);
 }
 function buildFocusableOptionsFromCategorizedOptions(categorizedOptions) {
   return categorizedOptions.reduce(function (optionsAccumulator, categorizedOption) {
@@ -333,18 +418,18 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var isDisabled = _this.isOptionDisabled(newValue, selectValue);
       if (deselected) {
         var candidate = _this.getOptionValue(newValue);
-        _this.setValue((0, _utils.multiValueAsValue)(selectValue.filter(function (i) {
+        _this.setValue((0, _multiValueAsValue.multiValueAsValue)(selectValue.filter(function (i) {
           return _this.getOptionValue(i) !== candidate;
         })), 'deselect-option', newValue);
       } else if (!isDisabled) {
         // Select option if option is not disabled
         if (isMulti) {
-          _this.setValue((0, _utils.multiValueAsValue)([].concat((0, _toConsumableArray2.default)(selectValue), [newValue])), 'select-option', newValue);
+          _this.setValue((0, _multiValueAsValue.multiValueAsValue)([].concat((0, _toConsumableArray2.default)(selectValue), [newValue])), 'select-option', newValue);
         } else {
-          _this.setValue((0, _utils.singleValueAsValue)(newValue), 'select-option');
+          _this.setValue((0, _singleValueAsValue.singleValueAsValue)(newValue), 'select-option');
         }
       } else {
-        _this.ariaOnChange((0, _utils.singleValueAsValue)(newValue), {
+        _this.ariaOnChange((0, _singleValueAsValue.singleValueAsValue)(newValue), {
           action: 'select-option',
           option: newValue,
           name: name
@@ -362,7 +447,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var newValueArray = selectValue.filter(function (i) {
         return _this.getOptionValue(i) !== candidate;
       });
-      var newValue = (0, _utils.valueTernary)(isMulti, newValueArray, newValueArray[0] || null);
+      var newValue = (0, _valueTernary.valueTernary)(isMulti, newValueArray, newValueArray[0] || null);
       _this.onChange(newValue, {
         action: 'remove-value',
         removedValue: removedValue
@@ -371,7 +456,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)(_this, "clearValue", function () {
       var selectValue = _this.state.selectValue;
-      _this.onChange((0, _utils.valueTernary)(_this.props.isMulti, [], null), {
+      _this.onChange((0, _valueTernary.valueTernary)(_this.props.isMulti, [], null), {
         action: 'clear',
         removedValues: selectValue
       });
@@ -381,7 +466,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var selectValue = _this.state.selectValue;
       var lastSelectedValue = selectValue[selectValue.length - 1];
       var newValueArray = selectValue.slice(0, selectValue.length - 1);
-      var newValue = (0, _utils.valueTernary)(isMulti, newValueArray, newValueArray[0] || null);
+      var newValue = (0, _valueTernary.valueTernary)(isMulti, newValueArray, newValueArray[0] || null);
       _this.onChange(newValue, {
         action: 'pop-value',
         removedValue: lastSelectedValue
@@ -403,7 +488,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-      return _utils.classNames.apply(void 0, [_this.props.classNamePrefix].concat(args));
+      return _classnames.classNames.apply(void 0, [_this.props.classNamePrefix].concat(args));
     });
     (0, _defineProperty2.default)(_this, "getOptionLabel", function (data) {
       return getOptionLabel(_this.props, data);
@@ -412,14 +497,14 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       return getOptionValue(_this.props, data);
     });
     (0, _defineProperty2.default)(_this, "getStyles", function (key, props) {
-      var base = _styles.defaultStyles[key](props);
-      base.boxSizing = 'border-box';
+      var base = {
+        boxSizing: 'border-box'
+      };
       var custom = _this.props.styles[key];
-      if (!custom) {
-        return base;
+      if (custom) {
+        return filterUnsupportedSelectors(custom(base, props));
       }
-      var customStyles = (0, _utils.filterUnsupportedSelectors)(custom(base, props));
-      return customStyles;
+      return base;
     });
     (0, _defineProperty2.default)(_this, "getClassNames", function (key, props) {
       var _this$props$className, _this$props$className2;
@@ -536,7 +621,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)(_this, "onScroll", function (event) {
       if (typeof _this.props.closeMenuOnScroll === 'boolean') {
-        if (event.target instanceof HTMLElement && (0, _utils.isDocumentElement)(event.target)) {
+        if (event.target instanceof HTMLElement && (0, _isDocumentEl.isDocumentElement)(event.target)) {
           _this.props.onMenuClose();
         }
       } else if (typeof _this.props.closeMenuOnScroll === 'function') {
@@ -854,7 +939,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       _this.onMenuClose();
     });
     _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
-    _this.state.selectValue = (0, _utils.cleanValue)(_props.value);
+    _this.state.selectValue = (0, _cleanValue.cleanValue)(_props.value);
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
     if (_props.menuIsOpen) {
       var focusableOptionsWithIds = _this.getFocusableOptionsWithIds();
@@ -883,7 +968,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
 
       // Scroll focusedOption into view if menuIsOpen is set on mount (e.g. defaultMenuIsOpen)
       if (this.props.menuIsOpen && this.state.focusedOption && this.menuListRef && this.focusedOptionRef) {
-        (0, _utils.scrollIntoView)(this.menuListRef, this.focusedOptionRef);
+        scrollIntoView(this.menuListRef, this.focusedOptionRef);
       }
     }
   }, {
@@ -914,7 +999,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
 
       // scroll the focused option into view if necessary
       if (this.menuListRef && this.focusedOptionRef && this.scrollToFocusedOptionOnUpdate) {
-        (0, _utils.scrollIntoView)(this.menuListRef, this.focusedOptionRef);
+        scrollIntoView(this.menuListRef, this.focusedOptionRef);
         this.scrollToFocusedOptionOnUpdate = false;
       }
     }
@@ -1211,6 +1296,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
   }, {
     key: "formatOptionLabel",
     value: function formatOptionLabel(data, context) {
+      var _this$props$component;
       if (typeof this.props.formatOptionLabel === 'function') {
         var inputValue = this.props.inputValue;
         var selectValue = this.state.selectValue;
@@ -1219,9 +1305,20 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           inputValue: inputValue,
           selectValue: selectValue
         });
-      } else {
-        return this.getOptionLabel(data);
       }
+      // Auto-render elemBefore in dropdown menu only if formatOptionLabel is not provided
+      // and no custom Option component is provided (custom Option components may already
+      // render elemBefore themselves, causing it to appear twice)
+      if (context === 'menu' && !this.props.formatOptionLabel && !((_this$props$component = this.props.components) !== null && _this$props$component !== void 0 && _this$props$component.Option) && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts')) {
+        var elemBefore = data.elemBefore;
+        if (elemBefore) {
+          var label = this.getOptionLabel(data);
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: (0, _runtime.ax)(["_zulpu2gc _1e0c1txw _4cvr1h6o"])
+          }, elemBefore, /*#__PURE__*/_react.default.createElement("span", null, label));
+        }
+      }
+      return this.getOptionLabel(data);
     }
   }, {
     key: "formatGroupLabel",
@@ -1368,7 +1465,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           id: id,
           innerRef: this.getInputRef,
           onBlur: this.onInputBlur,
-          onChange: _utils.noop,
+          onChange: noop,
           onFocus: this.onInputFocus,
           disabled: isDisabled,
           tabIndex: tabIndex,
@@ -1711,7 +1808,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
-      var menuElement = /*#__PURE__*/_react.default.createElement(_menu.MenuPlacer, (0, _extends2.default)({}, commonProps, menuPlacementProps), function (_ref4) {
+      var menuElement = /*#__PURE__*/_react.default.createElement(_menuPlacer.default, (0, _extends2.default)({}, commonProps, menuPlacementProps), function (_ref4) {
         var ref = _ref4.ref,
           _ref4$placerProps = _ref4.placerProps,
           placement = _ref4$placerProps.placement,
@@ -1939,7 +2036,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         menuIsOpen = props.menuIsOpen,
         inputValue = props.inputValue,
         isMulti = props.isMulti;
-      var selectValue = (0, _utils.cleanValue)(value);
+      var selectValue = (0, _cleanValue.cleanValue)(value);
       var newMenuOptionsState = {};
       if (prevProps && (value !== prevProps.value || options !== prevProps.options || menuIsOpen !== prevProps.menuIsOpen || inputValue !== prevProps.inputValue)) {
         var focusableOptions = menuIsOpen ? buildFocusableOptions(props, selectValue) : [];
@@ -1967,7 +2064,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         // If `value` or `defaultValue` props are not empty then announce them
         // when the Select is initially focused
         newAriaSelection = {
-          value: (0, _utils.valueTernary)(isMulti, selectValue, selectValue[0] || null),
+          value: (0, _valueTernary.valueTernary)(isMulti, selectValue, selectValue[0] || null),
           options: selectValue,
           action: 'initial-input-focus'
         };

package/dist/cjs/styles.js

@@ -4,44 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultStyles = void 0;
 exports.mergeStyles = mergeStyles;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _containers = require("./components/containers");
-var _control = require("./components/control");
-var _group = require("./components/group");
-var _indicators = require("./components/indicators");
-var _input = require("./components/input");
-var _menu = require("./components/menu");
-var _multiValue = require("./components/multi-value");
-var _option = require("./components/option");
-var _placeholder = require("./components/placeholder");
-var _singleValue = require("./components/single-value");
 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; }
-var defaultStyles = exports.defaultStyles = {
-  clearIndicator: _indicators.clearIndicatorCSS,
-  container: _containers.containerCSS,
-  control: _control.css,
-  dropdownIndicator: _indicators.dropdownIndicatorCSS,
-  group: _group.groupCSS,
-  groupHeading: _group.groupHeadingCSS,
-  indicatorsContainer: _containers.indicatorsContainerCSS,
-  input: _input.inputCSS,
-  loadingIndicator: _indicators.loadingIndicatorCSS,
-  loadingMessage: _menu.loadingMessageCSS,
-  menu: _menu.menuCSS,
-  menuList: _menu.menuListCSS,
-  menuPortal: _menu.menuPortalCSS,
-  multiValue: _multiValue.multiValueCSS,
-  multiValueLabel: _multiValue.multiValueLabelCSS,
-  multiValueRemove: _multiValue.multiValueRemoveCSS,
-  noOptionsMessage: _menu.noOptionsMessageCSS,
-  option: _option.optionCSS,
-  placeholder: _placeholder.placeholderCSS,
-  singleValue: _singleValue.css,
-  valueContainer: _containers.valueContainerCSS
-};
 // Merge Utility
 // Allows consumers to extend a base Select with additional styles
 function mergeStyles(source) {

package/dist/cjs/use-async.js

@@ -9,10 +9,18 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
-var _utils = require("./utils");
 var _excluded = ["defaultOptions", "cacheOptions", "loadOptions", "options", "isLoading", "onInputChange", "filterOption"];
 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; }
+function handleInputChange(inputValue, actionMeta, onInputChange) {
+  if (onInputChange) {
+    var newValue = onInputChange(inputValue, actionMeta);
+    if (typeof newValue === 'string') {
+      return newValue;
+    }
+  }
+  return inputValue;
+}
 // TODO: Fill in the hook {description}.
 /**
  * {description}.
@@ -109,7 +117,7 @@ function useAsync(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var onInputChange = (0, _react.useCallback)(function (newValue, actionMeta) {
-    var inputValue = (0, _utils.handleInputChange)(newValue, actionMeta, propsOnInputChange);
+    var inputValue = handleInputChange(newValue, actionMeta, propsOnInputChange);
     if (!inputValue) {
       lastRequest.current = undefined;
       setStateInputValue('');

package/dist/cjs/use-creatable.js

@@ -10,7 +10,8 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _builtins = require("./builtins");
-var _utils = require("./utils");
+var _cleanValue = require("./internal/clean-value");
+var _valueTernary = require("./internal/value-ternary");
 var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
 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; }
@@ -73,7 +74,7 @@ function useCreatable(_ref) {
     value = restSelectProps.value,
     name = restSelectProps.name;
   var newOption = (0, _react.useMemo)(function () {
-    return isValidNewOption(inputValue, (0, _utils.cleanValue)(value), propsOptions, {
+    return isValidNewOption(inputValue, (0, _cleanValue.cleanValue)(value), propsOptions, {
       getOptionValue: getOptionValue,
       getOptionLabel: getOptionLabel
     }) ? getNewOptionData(inputValue, formatCreateLabel(inputValue)) : undefined;
@@ -96,7 +97,7 @@ function useCreatable(_ref) {
           name: name,
           option: newOptionData
         };
-        propsOnChange((0, _utils.valueTernary)(isMulti, [].concat((0, _toConsumableArray2.default)((0, _utils.cleanValue)(value)), [newOptionData]), newOptionData), newActionMeta);
+        propsOnChange((0, _valueTernary.valueTernary)(isMulti, [].concat((0, _toConsumableArray2.default)((0, _cleanValue.cleanValue)(value)), [newOptionData]), newOptionData), newActionMeta);
       }
       return;
     }

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

@@ -1,25 +1,25 @@
 ._11c81d4k{font:var(--ds-font-body-large,normal 400 1pc/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
-._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._1e0c11p5{display:grid}
 ._1e0c1txw{display:flex}
 ._1eim1xrj{direction:rtl}
 ._1n261g80{flex-wrap:wrap}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
+._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1reo15vq{overflow-x:hidden}
 ._1wpz1fhb{align-self:stretch}
 ._4cvr1h6o{align-items:center}
 ._80om13gf{cursor:not-allowed}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._8am5i4x0{-webkit-overflow-scrolling:touch}
-._ca0qv77o{padding-top:var(--ds-space-025,2px)}
-._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
 ._i0dlf1ug{flex-basis:0%}
 ._kqswh2mm{position:relative}
 ._lcxv1rj4{pointer-events:all}
-._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
-._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
-._u5f312x7{padding-right:var(--ds-space-075,6px)}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
 ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
 @media (min-width:30rem){._1tn2fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}}

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

@@ -4,14 +4,12 @@ import "./containers.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
-import { getStyleProps } from '../../utils';
+import { getStyleProps } from '../../get-style-props';
 
 // ==============================
 // Root Container
 // ==============================
 
-export const containerCSS = () => ({});
-
 // iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
 // To prevent this zoom behaviour on mobile devices, the select container uses font.body.large (16px) by default,
 // then switches to the smaller font.body on screens wider than 30rem (desktop).
@@ -52,11 +50,10 @@ export const SelectContainer = props => {
 // Value Container
 // ==============================
 
-export const valueContainerCSS = () => ({});
 const valueContainerStyles = {
-  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _ca0qv77o _u5f312x7 _n3tdv77o _19bv12x7",
+  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _1q51v77o _y4ti12x7 _85i5v77o _bozg12x7",
   flex: "_1e0c1txw",
-  compact: "_ca0qze3t _u5f312x7 _n3tdze3t _19bv12x7"
+  compact: "_1q51ze3t _y4ti12x7 _85i5ze3t _bozg12x7"
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -93,7 +90,6 @@ export const ValueContainer = props => {
 // Indicator Container
 // ==============================
 
-export const indicatorsContainerCSS = () => ({});
 const indicatorContainerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -0,0 +1,5 @@
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1wpz1fhb{align-self:stretch}
+._4cvr1h6o{align-items:center}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}

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

@@ -0,0 +1,30 @@
+/* indicators-container.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./indicators-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { cx } from '@compiled/react';
+import { getStyleProps } from '../../get-style-props';
+const indicatorContainerStyles = null;
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const IndicatorsContainer = props => {
+  const {
+    children,
+    innerProps,
+    xcss
+  } = props;
+  const {
+    css,
+    className
+  } = getStyleProps(props, 'indicatorsContainer', {
+    indicators: true
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    style: css
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+    ,
+    className: ax(["_1e0c1txw _4cvr1h6o _1o9zidpf _1wpz1fhb _y4ti1b66", cx(className, xcss, '-IndicatorsContainer')])
+  }, innerProps), children);
+};

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

@@ -0,0 +1,19 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6d14je{border-color:#b7b9be}._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
+._16qs7ex6{box-shadow:0 0 0 2px var(--ds-surface,transparent),0 0 0 4px var(--ds-border-focused,transparent)}
+._1e0c1txw{display:flex}
+._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
+._1ul9ze3t{min-width:var(--ds-space-0,0)}
+._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
+._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
+._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._p12f1osq{max-width:100%}
+._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
+._syaz1wum{color:var(--ds-text-selected,#333)}
+._syazjpor{color:var(--ds-text,#333)}
+@media screen and (-ms-high-contrast:active){._1aewe4h9{border-width:var(--ds-border-width,1px)}._6up51j28{border-color:transparent}._1xdnnqa1{border-style:solid}._3yq3glyw{border:none}}

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

@@ -0,0 +1,26 @@
+/* multi-value-container.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./multi-value-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { cx } from '@compiled/react';
+const multiValueStyles = {
+  root: "_2rko12b0 _1h6d14je _1dqonqa1 _189ee4h9 _1e0c1txw _1ul9ze3t _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _bfhk1j9a _p12f1osq _syazjpor _3yq3glyw",
+  disabled: "_syaz1gmx _bfhki8nm",
+  focused: "_syaz1wum _bfhk15s3 _16qs7ex6 _1aewe4h9 _6up51j28 _1xdnnqa1"
+};
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const MultiValueContainer = ({
+  children,
+  innerProps,
+  isFocused,
+  isDisabled,
+  className,
+  xcss
+}) => {
+  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+    className: ax([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, cx(className, xcss, '-multiValue')])
+  }), children);
+};

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

@@ -0,0 +1,6 @@
+._11c81d4k{font:var(--ds-font-body-large,normal 400 1pc/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1eim1xrj{direction:rtl}
+._80om13gf{cursor:not-allowed}
+._kqswh2mm{position:relative}
+._lcxv1rj4{pointer-events:all}
+@media (min-width:30rem){._1tn2fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}}

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

@@ -0,0 +1,37 @@
+/* select-container.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./select-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { cx } from '@compiled/react';
+import { getStyleProps } from '../../get-style-props';
+const containerStyles = {
+  default: "_11c81d4k _kqswh2mm _lcxv1rj4 _1tn2fhey",
+  rtl: "_1eim1xrj",
+  disabled: "_80om13gf"
+};
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const SelectContainer = props => {
+  const {
+    children,
+    innerProps,
+    isDisabled,
+    isRtl,
+    xcss
+  } = props;
+  const {
+    className,
+    css
+  } = getStyleProps(props, 'container', {
+    '--is-disabled': isDisabled,
+    '--is-rtl': isRtl
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+    className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, cx(className, xcss, '-container')])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: css
+  }, innerProps), children);
+};