@atlaskit/react-select 3.14.3 → 3.14.4

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

@@ -4,10 +4,10 @@ import "./multi-value.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 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
 const tagMarginToken = "var(--ds-space-050, 4px)";
 const multiValueTagWrapperStyles = {
@@ -42,73 +42,6 @@ const multiValueTagLikeStyles = {
   disabled: "_syaz1gmx _bfhki8nm",
   focused: "_syaz1wum _bfhk1dpa _16qs7ex6 _1aewe4h9 _6up51j28 _1xdnnqa1"
 };
-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"
-};
-export const multiValueCSS = () => ({});
-export const multiValueLabelCSS = () => ({});
-const multiValueLabelStyles = {
-  root: "_1reo15vq _18m915vq _2rkolb4i _11c8fhey _o5721q9c _y4tiv77o _bozg1b66 _syaz1kw7",
-  disabled: "_syaz1gmx",
-  ellipsis: "_1bto1l2s"
-};
-export const multiValueRemoveCSS = () => ({});
-const 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 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);
-};
-
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-export const MultiValueLabel = ({
-  children,
-  innerProps,
-  isDisabled,
-  hasEllipsis,
-  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([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, cx(className, xcss, '-MultiValueLabel')])
-  }), children);
-};
-const disabledStyles = null;
-const enabledStyles = null;
-export function MultiValueRemove({
-  isDisabled,
-  isFocused,
-  innerProps,
-  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([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"
-  })));
-}
 const getMultiValueLabelText = (children, data) => {
   if (typeof children === 'string') {
     return children;

package/dist/es2019/components/option.js

@@ -4,8 +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 const optionCSS = () => ({});
+import { getStyleProps } from '../get-style-props';
 const optionStyles = {
   root: "_1rjc12x7 _18zrutpp _syazi7uo _80om73ad _1e0c1ule _1wyb1kw7 _1bsb1osq _uiztglyw _18ql1j7p _1di6fcek",
   disabled: "_syaz1gmx _80om13gf _bfhk1j28 _16qsglyw _1di61j28 _112eglyw",

package/dist/es2019/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/es2019/components/placeholder.js

@@ -4,10 +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 const placeholderCSS = () => ({});
+import { getStyleProps } from '../get-style-props';
 const placeholderStyles = {
-  root: "_nd5l1sux _19pkidpf _2hwxv77o _otyridpf _18u0v77o _syaz1rpy",
+  root: "_nd5l1sux _1pfhidpf _12l2v77o _6rthidpf _ahbqv77o _syaz1rpy",
   disabled: "_syaz1gmx"
 };
 const Placeholder = props => {

package/dist/es2019/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/es2019/components/single-value.js

@@ -4,10 +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 const css = () => ({});
+import { getStyleProps } from '../get-style-props';
 const 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"
 };
 const SingleValue = props => {

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

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

package/dist/es2019/internal/classnames.js

@@ -0,0 +1,29 @@
+/**
+ * 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, ...classNameList) {
+  const arr = [...classNameList];
+  if (state && prefix) {
+    for (let key in state) {
+      if (state.hasOwnProperty(key) && state[key]) {
+        arr.push(`${applyPrefixToName(prefix, key)}`);
+      }
+    }
+  }
+  return arr.filter(i => i).map(i => String(i).trim()).join(' ');
+}

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

@@ -0,0 +1,28 @@
+// Clean Common Props
+// ==============================
+
+export const cleanCommonProps = props => {
+  //className
+  const {
+    className,
+    // not listed in commonProps documentation, needs to be removed to allow Emotion to generate classNames
+    clearValue,
+    cx,
+    xcss,
+    getStyles,
+    getClassNames,
+    getValue,
+    hasValue,
+    isMulti,
+    isRtl,
+    options,
+    // not listed in commonProps documentation
+    selectOption,
+    selectProps,
+    setValue,
+    ...innerProps
+  } = props;
+  return {
+    ...innerProps
+  };
+};

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

@@ -0,0 +1,9 @@
+export const cleanValue = value => {
+  if (Array.isArray(value)) {
+    return value.filter(Boolean);
+  }
+  if (typeof value === 'object' && value !== null) {
+    return [value];
+  }
+  return [];
+};

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

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

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

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

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

@@ -0,0 +1,22 @@
+// ==============================
+// Passive Event Detector
+// ==============================
+import __noop from '@atlaskit/ds-lib/noop';
+const noop = __noop;
+
+// https://github.com/rafgraph/detect-it/blob/main/src/index.ts#L19-L36
+let passiveOptionAccessed = false;
+const options = {
+  get passive() {
+    return passiveOptionAccessed = true;
+  }
+};
+// check for SSR
+const 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 const supportsPassiveEvents = passiveOptionAccessed;

package/dist/es2019/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 const PortalPlacementContext = /*#__PURE__*/createContext(null);

package/dist/es2019/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/es2019/internal/single-value-as-value.js

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

package/dist/es2019/{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';
 const cancelScroll = event => {
   if (event.cancelable) {
     event.preventDefault();

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

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

package/dist/es2019/select.compiled.css

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

package/dist/es2019/select.js

@@ -1,19 +1,102 @@
+/* select.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./select.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 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';
+const noop = __noop;
+function notNullish(item) {
+  return item != null;
+}
+function scrollIntoView(menuEl, focusedEl) {
+  const menuRect = menuEl.getBoundingClientRect();
+  const focusedRect = focusedEl.getBoundingClientRect();
+  const 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 {
+    return false;
+  }
+}
+function isTouchCapable() {
+  try {
+    document.createEvent('TouchEvent');
+    return true;
+  } catch {
+    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.
+ */
+const filterUnsupportedSelectors = styles => {
+  const 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((filteredStyles, key) => {
+    if (!unsupportedSelectors.some(selector => key.includes(selector))) {
+      filteredStyles[key] = styles[key];
+    }
+    return filteredStyles;
+  }, {});
+};
+const elemBeforeCSS = null;
 export const defaultProps = {
   backspaceRemovesValue: true,
   blurInputOnSelect: isTouchCapable(),
@@ -385,14 +468,14 @@ export default class Select extends Component {
       return getOptionValue(this.props, data);
     });
     _defineProperty(this, "getStyles", (key, props) => {
-      const base = defaultStyles[key](props);
-      base.boxSizing = 'border-box';
+      const base = {
+        boxSizing: 'border-box'
+      };
       const custom = this.props.styles[key];
-      if (!custom) {
-        return base;
+      if (custom) {
+        return filterUnsupportedSelectors(custom(base, props));
       }
-      const customStyles = filterUnsupportedSelectors(custom(base, props));
-      return customStyles;
+      return base;
     });
     _defineProperty(this, "getClassNames", (key, props) => {
       var _this$props$className, _this$props$className2;
@@ -1219,6 +1302,7 @@ export default class Select extends Component {
     return filterOption(this.props, option, inputValue);
   }
   formatOptionLabel(data, context) {
+    var _this$props$component;
     if (typeof this.props.formatOptionLabel === 'function') {
       const {
         inputValue
@@ -1231,9 +1315,20 @@ export default class Select extends Component {
         inputValue,
         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')) {
+      const elemBefore = data.elemBefore;
+      if (elemBefore) {
+        const 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);
   }
   formatGroupLabel(data) {
     return this.props.formatGroupLabel(data);

package/dist/es2019/styles.js

@@ -1,36 +1,3 @@
-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 const 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, target = {}) {

package/dist/es2019/use-async.js

@@ -1,5 +1,13 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { handleInputChange } from './utils';
+function handleInputChange(inputValue, actionMeta, onInputChange) {
+  if (onInputChange) {
+    const newValue = onInputChange(inputValue, actionMeta);
+    if (typeof newValue === 'string') {
+      return newValue;
+    }
+  }
+  return inputValue;
+}
 // TODO: Fill in the hook {description}.
 /**
  * {description}.

package/dist/es2019/use-creatable.js

@@ -1,6 +1,7 @@
 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';
 const compareOption = (inputValue = '', option, accessors) => {
   const candidate = String(inputValue).toLowerCase();
   const optionValue = String(accessors.getOptionValue(option)).toLowerCase();

package/dist/esm/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/esm/compiled/components/containers.js

@@ -4,16 +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 var containerCSS = function containerCSS() {
-  return {};
-};
-
 // 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).
@@ -51,13 +47,10 @@ export var SelectContainer = function SelectContainer(props) {
 // Value Container
 // ==============================
 
-export var valueContainerCSS = function valueContainerCSS() {
-  return {};
-};
 var 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
@@ -89,9 +82,6 @@ export var ValueContainer = function ValueContainer(props) {
 // Indicator Container
 // ==============================
 
-export var indicatorsContainerCSS = function indicatorsContainerCSS() {
-  return {};
-};
 var indicatorContainerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/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)}