@atlaskit/react-select 3.14.2 → 3.14.4

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

@@ -7,10 +7,10 @@ import { ax, ix } from "@compiled/react/runtime";
 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; }
 import { cx } from '@compiled/react';
-import CrossIcon from '@atlaskit/icon/core/cross';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Tag from '@atlaskit/tag';
-import { getStyleProps } from '../utils';
+import { getStyleProps } from '../get-style-props';
+import { MultiValueLabel } from './multi-value-label';
 // Tag wrapper: Tag has built-in margin; cancel the inline margin so we control spacing
 var tagMarginToken = "var(--ds-space-050, 4px)";
 var multiValueTagWrapperStyles = {
@@ -45,76 +45,6 @@ var multiValueTagLikeStyles = {
   disabled: "_syaz1gmx _bfhki8nm",
   focused: "_syaz1wum _bfhk1dpa _16qs7ex6 _1aewe4h9 _6up51j28 _1xdnnqa1"
 };
-var 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"
-};
-export var multiValueCSS = function multiValueCSS() {
-  return {};
-};
-export var multiValueLabelCSS = function multiValueLabelCSS() {
-  return {};
-};
-var multiValueLabelStyles = {
-  root: "_1reo15vq _18m915vq _2rkolb4i _11c8fhey _o5721q9c _y4tiv77o _bozg1b66 _syaz1kw7",
-  disabled: "_syaz1gmx",
-  ellipsis: "_1bto1l2s"
-};
-export var multiValueRemoveCSS = function multiValueRemoveCSS() {
-  return {};
-};
-var multiValueRemoveStyles = {
-  focused: "_bfhkb1q9 _lswu1rrc",
-  root: "_19itglyw _2rko12b0 _4cvr1h6o _1bah1h6o _1wpz1h6o _r06hglyw _bfhksm61 _syazi7uo _1e0c1txw _lswu1dx5 _1q51v77o _y4tiv77o _85i5v77o _bozgv77o _12l2v77o _1ah312gs _irr31dpa _13br1jjn _1di6fcek _i5f81jjn"
-};
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-export var MultiValueContainer = function MultiValueContainer(_ref) {
-  var children = _ref.children,
-    innerProps = _ref.innerProps,
-    isFocused = _ref.isFocused,
-    isDisabled = _ref.isDisabled,
-    className = _ref.className,
-    xcss = _ref.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);
-};
-
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-export var MultiValueLabel = function MultiValueLabel(_ref2) {
-  var children = _ref2.children,
-    innerProps = _ref2.innerProps,
-    isDisabled = _ref2.isDisabled,
-    hasEllipsis = _ref2.hasEllipsis,
-    className = _ref2.className,
-    xcss = _ref2.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([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, cx(className, xcss, '-MultiValueLabel')])
-  }), children);
-};
-var disabledStyles = null;
-var enabledStyles = null;
-export function MultiValueRemove(_ref3) {
-  var isDisabled = _ref3.isDisabled,
-    isFocused = _ref3.isFocused,
-    innerProps = _ref3.innerProps,
-    className = _ref3.className,
-    xcss = _ref3.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([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, cx(className, xcss, '-MultiValueRemove')])
-  }), /*#__PURE__*/React.createElement("div", {
-    "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon',
-    className: ax([isDisabled && "_1e0cglyw", !isDisabled && "_1e0c1kw7"])
-  }, /*#__PURE__*/React.createElement(CrossIcon, {
-    label: "",
-    color: "currentColor",
-    size: "small"
-  })));
-}
 var getMultiValueLabelText = function getMultiValueLabelText(children, data) {
   if (typeof children === 'string') {
     return children;
@@ -156,9 +86,9 @@ var MultiValue = function MultiValue(props) {
     removeClassName = _getStyleProps3.className;
   var hasCustomLabel = Label !== MultiValueLabel;
   if (ffTagUplifts && isPlainLabel && !hasCustomLabel) {
-    var _ref4 = data !== null && data !== void 0 ? data : {},
-      elemBefore = _ref4.elemBefore,
-      tagColor = _ref4.color;
+    var _ref = data !== null && data !== void 0 ? data : {},
+      elemBefore = _ref.elemBefore,
+      tagColor = _ref.color;
     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([multiValueTagWrapperStyles.root, cx(props.className, containerClassName, props.xcss, '-multiValue')])

package/dist/esm/components/option.js

@@ -4,10 +4,7 @@ import "./option.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
-import { getStyleProps } from '../utils';
-export var optionCSS = function optionCSS() {
-  return {};
-};
+import { getStyleProps } from '../get-style-props';
 var optionStyles = {
   root: "_1rjc12x7 _18zrutpp _syazi7uo _80om73ad _1e0c1ule _1wyb1kw7 _1bsb1osq _uiztglyw _18ql1j7p _1di6fcek",
   disabled: "_syaz1gmx _80om13gf _bfhk1j28 _16qsglyw _1di61j28 _112eglyw",

package/dist/esm/components/placeholder.compiled.css

@@ -1,7 +1,7 @@
 
-._nd5l1sux{grid-area:1/1/2/3}._18u0v77o{margin-left:var(--ds-space-025,2px)}
-._19pkidpf{margin-top:0}
-._2hwxv77o{margin-right:var(--ds-space-025,2px)}
-._otyridpf{margin-bottom:0}
+._nd5l1sux{grid-area:1/1/2/3}._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
+._1pfhidpf{margin-block-start:0}
+._6rthidpf{margin-block-end:0}
+._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}

package/dist/esm/components/placeholder.js

@@ -4,12 +4,9 @@ import "./placeholder.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
-import { getStyleProps } from '../utils';
-export var placeholderCSS = function placeholderCSS() {
-  return {};
-};
+import { getStyleProps } from '../get-style-props';
 var placeholderStyles = {
-  root: "_nd5l1sux _19pkidpf _2hwxv77o _otyridpf _18u0v77o _syaz1rpy",
+  root: "_nd5l1sux _1pfhidpf _12l2v77o _6rthidpf _ahbqv77o _syaz1rpy",
   disabled: "_syaz1gmx"
 };
 var Placeholder = function Placeholder(props) {

package/dist/esm/components/single-value.compiled.css

@@ -1,12 +1,12 @@
 
-._nd5l1sux{grid-area:1/1/2/3}._18m915vq{overflow-y:hidden}
-._18u0v77o{margin-left:var(--ds-space-025,2px)}
-._19pkidpf{margin-top:0}
+._nd5l1sux{grid-area:1/1/2/3}._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
+._18m915vq{overflow-y:hidden}
 ._1bto1l2s{text-overflow:ellipsis}
+._1pfhidpf{margin-block-start:0}
 ._1reo15vq{overflow-x:hidden}
-._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._6rthidpf{margin-block-end:0}
+._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
 ._o5721q9c{white-space:nowrap}
-._otyridpf{margin-bottom:0}
 ._p12f1osq{max-width:100%}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syazi7uo{color:var(--ds-text,#292a2e)}

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

@@ -4,12 +4,9 @@ import "./single-value.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
-import { getStyleProps } from '../utils';
-export var css = function css() {
-  return {};
-};
+import { getStyleProps } from '../get-style-props';
 var styles = {
-  root: "_nd5l1sux _1reo15vq _18m915vq _p12f1osq _1bto1l2s _o5721q9c _19pkidpf _2hwxv77o _otyridpf _18u0v77o _syazi7uo",
+  root: "_nd5l1sux _1reo15vq _18m915vq _p12f1osq _1bto1l2s _o5721q9c _1pfhidpf _12l2v77o _6rthidpf _ahbqv77o _syazi7uo",
   disalbed: "_syaz1gmx"
 };
 var SingleValue = function SingleValue(props) {

package/dist/esm/get-style-props.js

@@ -0,0 +1,10 @@
+export var getStyleProps = function getStyleProps(props, name, classNamesState) {
+  var cx = props.cx,
+    getStyles = props.getStyles,
+    getClassNames = props.getClassNames,
+    className = props.className;
+  return {
+    css: getStyles(name, props),
+    className: cx(classNamesState !== null && classNamesState !== void 0 ? classNamesState : {}, getClassNames(name, props), className)
+  };
+};

package/dist/esm/internal/classnames.js

@@ -0,0 +1,36 @@
+/**
+ * String representation of component state for styling with class names.
+ *
+ * Expects an array of strings OR a string/object pair:
+ * - className(['comp', 'comp-arg', 'comp-arg-2'])
+ * @returns 'react-select__comp react-select__comp-arg react-select__comp-arg-2'
+ * - className('comp', { some: true, state: false })
+ * @returns 'react-select__comp react-select__comp--some'
+ */
+function applyPrefixToName(prefix, name) {
+  if (!name) {
+    return prefix;
+  } else if (name[0] === '-') {
+    return prefix + name;
+  } else {
+    return prefix + '__' + name;
+  }
+}
+export function classNames(prefix, state) {
+  for (var _len = arguments.length, classNameList = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    classNameList[_key - 2] = arguments[_key];
+  }
+  var arr = [].concat(classNameList);
+  if (state && prefix) {
+    for (var key in state) {
+      if (state.hasOwnProperty(key) && state[key]) {
+        arr.push("".concat(applyPrefixToName(prefix, key)));
+      }
+    }
+  }
+  return arr.filter(function (i) {
+    return i;
+  }).map(function (i) {
+    return String(i).trim();
+  }).join(' ');
+}

package/dist/esm/internal/clean-common-props.js

@@ -0,0 +1,27 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "clearValue", "cx", "xcss", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue"];
+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; }
+// Clean Common Props
+// ==============================
+
+export var cleanCommonProps = function cleanCommonProps(props) {
+  //className
+  var className = props.className,
+    clearValue = props.clearValue,
+    cx = props.cx,
+    xcss = props.xcss,
+    getStyles = props.getStyles,
+    getClassNames = props.getClassNames,
+    getValue = props.getValue,
+    hasValue = props.hasValue,
+    isMulti = props.isMulti,
+    isRtl = props.isRtl,
+    options = props.options,
+    selectOption = props.selectOption,
+    selectProps = props.selectProps,
+    setValue = props.setValue,
+    innerProps = _objectWithoutProperties(props, _excluded);
+  return _objectSpread({}, innerProps);
+};

package/dist/esm/internal/clean-value.js

@@ -0,0 +1,10 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+export var cleanValue = function cleanValue(value) {
+  if (Array.isArray(value)) {
+    return value.filter(Boolean);
+  }
+  if (_typeof(value) === 'object' && value !== null) {
+    return [value];
+  }
+  return [];
+};

package/dist/esm/internal/is-document-el.js

@@ -0,0 +1,3 @@
+export function isDocumentElement(el) {
+  return [document.documentElement, document.body, window].indexOf(el) > -1;
+}

package/dist/esm/internal/multi-value-as-value.js

@@ -0,0 +1,3 @@
+export function multiValueAsValue(multiValue) {
+  return multiValue;
+}

package/dist/esm/internal/passive-event-detector.js

@@ -0,0 +1,22 @@
+// ==============================
+// Passive Event Detector
+// ==============================
+import __noop from '@atlaskit/ds-lib/noop';
+var noop = __noop;
+
+// https://github.com/rafgraph/detect-it/blob/main/src/index.ts#L19-L36
+var passiveOptionAccessed = false;
+var options = {
+  get passive() {
+    return passiveOptionAccessed = true;
+  }
+};
+// check for SSR
+var w = typeof window !== 'undefined' ? window : {};
+if (w.addEventListener && w.removeEventListener) {
+  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+  w.addEventListener('p', noop, options);
+  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+  w.removeEventListener('p', noop, false);
+}
+export var supportsPassiveEvents = passiveOptionAccessed;

package/dist/esm/internal/portal-placement-context.js

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Portal placement context__
+ *
+ * A portal placement context {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+export var PortalPlacementContext = /*#__PURE__*/createContext(null);

package/dist/esm/internal/scroll-to.js

@@ -0,0 +1,9 @@
+import { isDocumentElement } from './is-document-el';
+export function scrollTo(el, top) {
+  // with a scroll distance, we perform scroll on the element
+  if (isDocumentElement(el)) {
+    window.scrollTo(0, top);
+    return;
+  }
+  el.scrollTop = top;
+}

package/dist/esm/internal/single-value-as-value.js

@@ -0,0 +1,3 @@
+export function singleValueAsValue(singleValue) {
+  return singleValue;
+}

package/dist/esm/{components/internal → internal}/use-scroll-capture.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react';
-import { supportsPassiveEvents } from '../../utils';
+import { supportsPassiveEvents } from './passive-event-detector';
 var cancelScroll = function cancelScroll(event) {
   if (event.cancelable) {
     event.preventDefault();

package/dist/esm/internal/value-ternary.js

@@ -0,0 +1,3 @@
+export function valueTernary(isMulti, multiValue, singleValue) {
+  return isMulti ? multiValue : singleValue;
+}

package/dist/esm/select.compiled.css

@@ -0,0 +1,3 @@
+
+._zulpu2gc{gap:var(--ds-space-100,8px)}._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}

package/dist/esm/select.js

@@ -1,3 +1,4 @@
+/* select.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _readOnlyError from "@babel/runtime/helpers/readOnlyError";
 import _typeof from "@babel/runtime/helpers/typeof";
@@ -8,24 +9,108 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import "./select.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 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; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import React, { Component } from 'react';
 import { isAppleDevice, isSafari } from '@atlaskit/ds-lib/device-check';
+import __noop from '@atlaskit/ds-lib/noop';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { formatGroupLabel as formatGroupLabelBuiltin, getOptionLabel as getOptionLabelBuiltin, getOptionValue as getOptionValueBuiltin, isOptionDisabled as isOptionDisabledBuiltin } from './builtins';
 import { defaultComponents } from './components';
-import DummyInput from './components/internal/dummy-input';
-import { NotifyOpenLayerObserver } from './components/internal/notify-open-layer-observer';
-import RequiredInput from './components/internal/required-input';
-import ScrollManager from './components/internal/scroll-manager';
+import DummyInput from './components/dummy-input';
 import LiveRegion from './components/live-region';
-import { MenuPlacer } from './components/menu';
+import MenuPlacer from './components/menu-placer';
 import { createFilter } from './filters';
-import { defaultStyles } from './styles';
-import { classNames, cleanValue, filterUnsupportedSelectors, isDocumentElement, isMobileDevice, isTouchCapable, multiValueAsValue, noop, notNullish, scrollIntoView, singleValueAsValue, valueTernary } from './utils';
+import { classNames } from './internal/classnames';
+import { cleanValue } from './internal/clean-value';
+import { isDocumentElement } from './internal/is-document-el';
+import { multiValueAsValue } from './internal/multi-value-as-value';
+import { NotifyOpenLayerObserver } from './internal/notify-open-layer-observer';
+import RequiredInput from './internal/required-input';
+import ScrollManager from './internal/scroll-manager';
+import { scrollTo } from './internal/scroll-to';
+import { singleValueAsValue } from './internal/single-value-as-value';
+import { valueTernary } from './internal/value-ternary';
+var noop = __noop;
+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) {
+    scrollTo(menuEl, Math.min(focusedEl.offsetTop + focusedEl.clientHeight - menuEl.offsetHeight + overScroll, menuEl.scrollHeight));
+  } else if (focusedRect.top - overScroll < menuRect.top) {
+    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;
 export var defaultProps = {
   backspaceRemovesValue: true,
   blurInputOnSelect: isTouchCapable(),
@@ -403,14 +488,14 @@ var Select = /*#__PURE__*/function (_Component) {
       return getOptionValue(_this.props, data);
     });
     _defineProperty(_this, "getStyles", function (key, props) {
-      var base = 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 = filterUnsupportedSelectors(custom(base, props));
-      return customStyles;
+      return base;
     });
     _defineProperty(_this, "getClassNames", function (key, props) {
       var _this$props$className, _this$props$className2;
@@ -1202,6 +1287,7 @@ var Select = /*#__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;
@@ -1210,9 +1296,20 @@ var Select = /*#__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) && fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
+        var elemBefore = data.elemBefore;
+        if (elemBefore) {
+          var label = this.getOptionLabel(data);
+          return /*#__PURE__*/React.createElement("div", {
+            className: ax(["_zulpu2gc _1e0c1txw _4cvr1h6o"])
+          }, elemBefore, /*#__PURE__*/React.createElement("span", null, label));
+        }
+      }
+      return this.getOptionLabel(data);
     }
   }, {
     key: "formatGroupLabel",

package/dist/esm/styles.js

@@ -1,39 +1,6 @@
 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; }
-import { containerCSS, indicatorsContainerCSS, valueContainerCSS } from './components/containers';
-import { css as controlCSS } from './components/control';
-import { groupCSS, groupHeadingCSS } from './components/group';
-import { clearIndicatorCSS, dropdownIndicatorCSS, loadingIndicatorCSS } from './components/indicators';
-import { inputCSS } from './components/input';
-import { loadingMessageCSS, menuCSS, menuListCSS, menuPortalCSS, noOptionsMessageCSS } from './components/menu';
-import { multiValueCSS, multiValueLabelCSS, multiValueRemoveCSS } from './components/multi-value';
-import { optionCSS } from './components/option';
-import { placeholderCSS } from './components/placeholder';
-import { css as singleValueCSS } from './components/single-value';
-export var defaultStyles = {
-  clearIndicator: clearIndicatorCSS,
-  container: containerCSS,
-  control: controlCSS,
-  dropdownIndicator: dropdownIndicatorCSS,
-  group: groupCSS,
-  groupHeading: groupHeadingCSS,
-  indicatorsContainer: indicatorsContainerCSS,
-  input: inputCSS,
-  loadingIndicator: loadingIndicatorCSS,
-  loadingMessage: loadingMessageCSS,
-  menu: menuCSS,
-  menuList: menuListCSS,
-  menuPortal: menuPortalCSS,
-  multiValue: multiValueCSS,
-  multiValueLabel: multiValueLabelCSS,
-  multiValueRemove: multiValueRemoveCSS,
-  noOptionsMessage: noOptionsMessageCSS,
-  option: optionCSS,
-  placeholder: placeholderCSS,
-  singleValue: singleValueCSS,
-  valueContainer: valueContainerCSS
-};
 // Merge Utility
 // Allows consumers to extend a base Select with additional styles
 export function mergeStyles(source) {

package/dist/esm/use-async.js

@@ -5,7 +5,15 @@ var _excluded = ["defaultOptions", "cacheOptions", "loadOptions", "options", "is
 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; }
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { handleInputChange } from './utils';
+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}.

package/dist/esm/use-creatable.js

@@ -6,7 +6,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 import { useCallback, useMemo } from 'react';
 import { getOptionLabel as baseGetOptionLabel, getOptionValue as baseGetOptionValue } from './builtins';
-import { cleanValue, valueTernary } from './utils';
+import { cleanValue } from './internal/clean-value';
+import { valueTernary } from './internal/value-ternary';
 var compareOption = function compareOption() {
   var inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var option = arguments.length > 1 ? arguments[1] : undefined;

package/dist/types/async-creatable.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement, type RefAttributes } from 'react';
 import Select from './select';
-import { type GroupBase } from './types';
+import type { GroupBase } from './types';
 import { type AsyncAdditionalProps } from './use-async';
 import { type CreatableAdditionalProps } from './use-creatable';
 import { type StateManagerProps } from './use-state-manager';

package/dist/types/async.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement, type RefAttributes } from 'react';
 import Select from './select';
-import { type GroupBase } from './types';
+import type { GroupBase } from './types';
 import useAsync, { type AsyncProps } from './use-async';
 export type { AsyncProps };
 type AsyncSelect = <Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: AsyncProps<Option, IsMulti, Group> & RefAttributes<Select<Option, IsMulti, Group>>) => ReactElement;

package/dist/types/builtins.d.ts

@@ -1,4 +1,4 @@
-import { type GroupBase } from './types';
+import type { GroupBase } from './types';
 export declare const formatGroupLabel: <Option, Group extends GroupBase<Option>>(group: Group) => string;
 export declare const getOptionLabel: <Option>(option: Option) => string;
 export declare const getOptionValue: <Option>(option: Option) => string;

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

@@ -19,7 +19,6 @@ export interface ContainerProps<Option = unknown, IsMulti extends boolean = bool
      */
     innerProps: {};
 }
-export declare const containerCSS: () => {};
 export declare const SelectContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>) => JSX.Element;
 export interface ValueContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
     /**
@@ -36,7 +35,6 @@ export interface ValueContainerProps<Option = unknown, IsMulti extends boolean =
      */
     isCompact?: boolean;
 }
-export declare const valueContainerCSS: () => {};
 export declare const ValueContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ValueContainerProps<Option, IsMulti, Group>) => JSX.Element;
 export interface IndicatorsContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
     isDisabled: boolean;
@@ -49,5 +47,4 @@ export interface IndicatorsContainerProps<Option = unknown, IsMulti extends bool
      */
     innerProps?: {};
 }
-export declare const indicatorsContainerCSS: () => {};
 export declare const IndicatorsContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: IndicatorsContainerProps<Option, IsMulti, Group>) => JSX.Element;