@atlaskit/react-select 3.16.0 → 3.16.2

package/dist/es2019/compiled/components/{containers.js → value-container.js}

@@ -1,52 +1,12 @@
-/* containers.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* value-container.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import "./containers.compiled.css";
+import "./value-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../../get-style-props';
 
-// ==============================
-// Root Container
-// ==============================
-
-// 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).
-// @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e
-
-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);
-};
-
 // ==============================
 // Value Container
 // ==============================
@@ -92,32 +52,4 @@ export const ValueContainer = props => {
     ,
     style: css
   }, innerProps), children);
-};
-
-// ==============================
-// Indicator Container
-// ==============================
-
-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/index.js

@@ -47,6 +47,7 @@ export const components = {
   SingleValue: SingleValue,
   ValueContainer: ValueContainer
 };
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const defaultComponents = props => ({
   ...components,
   ...props.components

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

@@ -7,6 +7,7 @@ import { cx } from '@compiled/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Tag from '@atlaskit/tag';
 import { getStyleProps } from '../get-style-props';
+import { useSelectGetStyles } from '../internal/use-select-get-styles';
 import { MultiValueLabel } from './multi-value-label';
 const multiValueTagWrapperStyles = {
   root: "_16jlidpf _1o9zkb7n _i0dl1wug _1mouze3t _195gze3t _4cvr1h6o _1e0c1txw _1ul9ze3t _zdxokb7n _v5ynkb7n _13lsf1ug _3pxh1h6o _d0dz1txw _1ouwze3t"
@@ -86,8 +87,18 @@ const MultiValue = props => {
     'multi-value__remove': true
   });
   const hasCustomLabel = Label !== MultiValueLabel;
-  // Plain labels: use Tag with fillContainer so it truncates like tag-like structure.
-  if (ffTagUplifts && isPlainLabel && !hasCustomLabel) {
+  const selectStyles = selectProps.styles;
+  const hasCustomMultiValueStyles = Boolean((selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValue) || (selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValueLabel) || (selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValueRemove));
+  const selectClassNames = selectProps.classNames;
+  const hasCustomMultiValueClassNames = Boolean((selectClassNames === null || selectClassNames === void 0 ? void 0 : selectClassNames.multiValue) || (selectClassNames === null || selectClassNames === void 0 ? void 0 : selectClassNames.multiValueLabel) || (selectClassNames === null || selectClassNames === void 0 ? void 0 : selectClassNames.multiValueRemove));
+  // Detect if getStyles was overridden directly on this component instance (e.g. via the
+  // components prop wrapper passing a custom getStyles). The context holds the original
+  // Select instance's getStyles — a reference inequality means a custom override was passed.
+  // When context is absent (e.g. in mocked/test contexts), assume no override.
+  const selectGetStyles = useSelectGetStyles();
+  const hasOverriddenGetStyles = selectGetStyles !== undefined && props.getStyles !== selectGetStyles;
+  const hasCustomContainerStyles = hasCustomMultiValueStyles || hasCustomMultiValueClassNames || hasOverriddenGetStyles;
+  if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainerStyles) {
     const {
       elemBefore,
       color: tagColor

package/dist/es2019/creatable.js

@@ -10,6 +10,6 @@ const CreatableSelect = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }, selectProps));
 });
-export { useCreatable };
+
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default CreatableSelect;

package/dist/es2019/entry-points/async.js

@@ -1,2 +1,2 @@
-export { useAsync } from '../async';
+export { default as useAsync } from '../use-async';
 export { default } from '../async';

package/dist/es2019/entry-points/creatable.js

@@ -1,2 +1,2 @@
-export { useCreatable } from '../creatable';
+export { default as useCreatable } from '../use-creatable';
 export { default } from '../creatable';

package/dist/es2019/internal/select-get-styles-context.js

@@ -0,0 +1,14 @@
+/**
+ * Internal context used to pass the original Select instance's getStyles function
+ * down to components like MultiValue, without polluting the public CommonProps API.
+ *
+ * This allows MultiValue to detect whether getStyles has been overridden on a
+ * component instance (e.g. via a custom component wrapper passing a different
+ * getStyles prop), by comparing props.getStyles against the original.
+ *
+ * @internal — not part of the public API
+ */
+import { createContext } from 'react';
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const SelectGetStylesContext = /*#__PURE__*/createContext(undefined);

package/dist/es2019/internal/use-select-get-styles.js

@@ -0,0 +1,10 @@
+/**
+ * Hook to consume the SelectGetStylesContext.
+ *
+ * @internal — not part of the public API
+ */
+import { useContext } from 'react';
+import { SelectGetStylesContext } from './select-get-styles-context';
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const useSelectGetStyles = () => useContext(SelectGetStylesContext);

package/dist/es2019/select.js

@@ -22,6 +22,7 @@ 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 { SelectGetStylesContext } from './internal/select-get-styles-context';
 import { singleValueAsValue } from './internal/single-value-as-value';
 import { valueTernary } from './internal/value-ternary';
 const noop = __noop;
@@ -281,7 +282,7 @@ const shouldHideSelectedOptions = props => {
 };
 let instanceId = 1;
 
-// eslint-disable-next-line @repo/internal/react/no-class-components
+// eslint-disable-next-line @repo/internal/react/no-class-components, @atlaskit/volt-strict-mode/no-multiple-exports
 export default class Select extends Component {
   // Lifecycle
   // ------------------------------
@@ -1989,7 +1990,9 @@ export default class Select extends Component {
     } = this.state;
     const commonProps = this.commonProps = this.getCommonProps();
     const isCompact = spacing === 'compact';
-    return /*#__PURE__*/React.createElement(SelectContainer, _extends({}, commonProps, {
+    return /*#__PURE__*/React.createElement(SelectGetStylesContext.Provider, {
+      value: this.getStyles
+    }, /*#__PURE__*/React.createElement(SelectContainer, _extends({}, commonProps, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: className,
       innerProps: {
@@ -2040,7 +2043,7 @@ export default class Select extends Component {
     }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), /*#__PURE__*/React.createElement(NotifyOpenLayerObserver, {
       isOpen: this.props.menuIsOpen,
       onClose: this.handleOpenLayerObserverCloseSignal
-    }));
+    })));
   }
 }
 _defineProperty(Select, "defaultProps", defaultProps);

package/dist/es2019/theme.js

@@ -1,5 +1,3 @@
-import { colors } from './colors';
-const borderRadius = 4;
 // Used to calculate consistent margin/padding on elements
 const baseUnit = 4;
 // The minimum height of the control
@@ -11,9 +9,4 @@ export const spacing = {
   controlHeight,
   menuGutter
 };
-export const defaultTheme = {
-  borderRadius,
-  colors,
-  spacing
-};
 export { colors } from './colors';

package/dist/esm/async.js

@@ -14,7 +14,6 @@ var AsyncSelect = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref
   }, selectProps));
 });
-export { useAsync };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default AsyncSelect;

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

@@ -0,0 +1,32 @@
+/* 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';
+
+// ==============================
+// Indicator Container
+// ==============================
+
+var indicatorContainerStyles = null;
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var IndicatorsContainer = function IndicatorsContainer(props) {
+  var children = props.children,
+    innerProps = props.innerProps,
+    xcss = props.xcss;
+  var _getStyleProps = getStyleProps(props, 'indicatorsContainer', {
+      indicators: true
+    }),
+    css = _getStyleProps.css,
+    className = _getStyleProps.className;
+  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/esm/compiled/components/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/esm/compiled/components/select-container.js

@@ -0,0 +1,44 @@
+/* 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';
+
+// ==============================
+// Root Container
+// ==============================
+
+// 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).
+// @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e
+
+var containerStyles = {
+  default: "_11c81d4k _kqswh2mm _lcxv1rj4 _1tn2fhey",
+  rtl: "_1eim1xrj",
+  disabled: "_80om13gf"
+};
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var SelectContainer = function SelectContainer(props) {
+  var children = props.children,
+    innerProps = props.innerProps,
+    isDisabled = props.isDisabled,
+    isRtl = props.isRtl,
+    xcss = props.xcss;
+  var _getStyleProps = getStyleProps(props, 'container', {
+      '--is-disabled': isDisabled,
+      '--is-rtl': isRtl
+    }),
+    className = _getStyleProps.className,
+    css = _getStyleProps.css;
+  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);
+};

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

@@ -0,0 +1,20 @@
+
+._zulp1b66{gap:var(--ds-space-050,4px)}._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1e0c11p5{display:grid}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._1o9zkb7n{flex-shrink:1}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
+._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
+._1reo15vq{overflow-x:hidden}
+._4cvr1h6o{align-items:center}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._8am5i4x0{-webkit-overflow-scrolling:touch}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._i0dlf1ug{flex-basis:0%}
+._kqswh2mm{position:relative}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}

package/dist/esm/compiled/components/value-container.js

@@ -0,0 +1,50 @@
+/* value-container.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./value-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getStyleProps } from '../../get-style-props';
+
+// ==============================
+// Value Container
+// ==============================
+
+var valueContainerStyles = {
+  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _y4ti12x7 _bozg12x7",
+  verticalPaddingStandard: "_1q51v77o _85i5v77o",
+  verticalPaddingTagUpliftMulti: "_1q511b66 _85i51b66",
+  verticalPaddingTagUpliftCompactMulti: "_1q51v77o _85i5v77o",
+  verticalPaddingCompactNonUplift: "_1q51ze3t _85i5ze3t",
+  flex: "_1e0c1txw",
+  flexWithGap: "_zulp1b66 _1e0c1txw _1n261g80"
+};
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var ValueContainer = function ValueContainer(props) {
+  var children = props.children,
+    innerProps = props.innerProps,
+    isMulti = props.isMulti,
+    hasValue = props.hasValue,
+    isCompact = props.isCompact,
+    xcss = props.xcss,
+    controlShouldRenderValue = props.selectProps.controlShouldRenderValue;
+  var _getStyleProps = getStyleProps(props, 'valueContainer', {
+      'value-container': true,
+      'value-container--is-multi': isMulti,
+      'value-container--has-value': hasValue
+    }),
+    css = _getStyleProps.css,
+    className = _getStyleProps.className;
+  var ffTagUplifts = fg('platform-dst-lozenge-tag-badge-visual-uplifts');
+  var tagUpliftMultiVertical = ffTagUplifts && isMulti;
+  var tagUpliftChipRow = ffTagUplifts && isMulti && hasValue && controlShouldRenderValue;
+  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([valueContainerStyles.default, tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingTagUpliftCompactMulti, tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingTagUpliftMulti, !tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingStandard, !tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingCompactNonUplift, isMulti && hasValue && controlShouldRenderValue && valueContainerStyles.flex, tagUpliftChipRow && valueContainerStyles.flexWithGap, cx(className, xcss, '-ValueContainer')])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: css
+  }, innerProps), children);
+};

package/dist/esm/components/index.js

@@ -50,6 +50,7 @@ export var components = {
   SingleValue: SingleValue,
   ValueContainer: ValueContainer
 };
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export var defaultComponents = function defaultComponents(props) {
   return _objectSpread(_objectSpread({}, components), props.components);
 };

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

@@ -10,6 +10,7 @@ import { cx } from '@compiled/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Tag from '@atlaskit/tag';
 import { getStyleProps } from '../get-style-props';
+import { useSelectGetStyles } from '../internal/use-select-get-styles';
 import { MultiValueLabel } from './multi-value-label';
 var multiValueTagWrapperStyles = {
   root: "_16jlidpf _1o9zkb7n _i0dl1wug _1mouze3t _195gze3t _4cvr1h6o _1e0c1txw _1ul9ze3t _zdxokb7n _v5ynkb7n _13lsf1ug _3pxh1h6o _d0dz1txw _1ouwze3t"
@@ -82,8 +83,18 @@ var MultiValue = function MultiValue(props) {
     removeCss = _getStyleProps3.css,
     removeClassName = _getStyleProps3.className;
   var hasCustomLabel = Label !== MultiValueLabel;
-  // Plain labels: use Tag with fillContainer so it truncates like tag-like structure.
-  if (ffTagUplifts && isPlainLabel && !hasCustomLabel) {
+  var selectStyles = selectProps.styles;
+  var hasCustomMultiValueStyles = Boolean((selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValue) || (selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValueLabel) || (selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValueRemove));
+  var selectClassNames = selectProps.classNames;
+  var hasCustomMultiValueClassNames = Boolean((selectClassNames === null || selectClassNames === void 0 ? void 0 : selectClassNames.multiValue) || (selectClassNames === null || selectClassNames === void 0 ? void 0 : selectClassNames.multiValueLabel) || (selectClassNames === null || selectClassNames === void 0 ? void 0 : selectClassNames.multiValueRemove));
+  // Detect if getStyles was overridden directly on this component instance (e.g. via the
+  // components prop wrapper passing a custom getStyles). The context holds the original
+  // Select instance's getStyles — a reference inequality means a custom override was passed.
+  // When context is absent (e.g. in mocked/test contexts), assume no override.
+  var selectGetStyles = useSelectGetStyles();
+  var hasOverriddenGetStyles = selectGetStyles !== undefined && props.getStyles !== selectGetStyles;
+  var hasCustomContainerStyles = hasCustomMultiValueStyles || hasCustomMultiValueClassNames || hasOverriddenGetStyles;
+  if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainerStyles) {
     var _ref = data !== null && data !== void 0 ? data : {},
       elemBefore = _ref.elemBefore,
       tagColor = _ref.color;

package/dist/esm/creatable.js

@@ -10,6 +10,6 @@ var CreatableSelect = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref
   }, selectProps));
 });
-export { useCreatable };
+
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default CreatableSelect;

package/dist/esm/entry-points/async.js

@@ -1,2 +1,2 @@
-export { useAsync } from '../async';
+export { default as useAsync } from '../use-async';
 export { default } from '../async';

package/dist/esm/entry-points/creatable.js

@@ -1,2 +1,2 @@
-export { useCreatable } from '../creatable';
+export { default as useCreatable } from '../use-creatable';
 export { default } from '../creatable';

package/dist/esm/internal/select-get-styles-context.js

@@ -0,0 +1,14 @@
+/**
+ * Internal context used to pass the original Select instance's getStyles function
+ * down to components like MultiValue, without polluting the public CommonProps API.
+ *
+ * This allows MultiValue to detect whether getStyles has been overridden on a
+ * component instance (e.g. via a custom component wrapper passing a different
+ * getStyles prop), by comparing props.getStyles against the original.
+ *
+ * @internal — not part of the public API
+ */
+import { createContext } from 'react';
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var SelectGetStylesContext = /*#__PURE__*/createContext(undefined);

package/dist/esm/internal/use-select-get-styles.js

@@ -0,0 +1,12 @@
+/**
+ * Hook to consume the SelectGetStylesContext.
+ *
+ * @internal — not part of the public API
+ */
+import { useContext } from 'react';
+import { SelectGetStylesContext } from './select-get-styles-context';
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var useSelectGetStyles = function useSelectGetStyles() {
+  return useContext(SelectGetStylesContext);
+};

package/dist/esm/select.js

@@ -34,6 +34,7 @@ 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 { SelectGetStylesContext } from './internal/select-get-styles-context';
 import { singleValueAsValue } from './internal/single-value-as-value';
 import { valueTernary } from './internal/value-ternary';
 var noop = __noop;
@@ -303,7 +304,7 @@ var shouldHideSelectedOptions = function shouldHideSelectedOptions(props) {
 };
 var instanceId = 1;
 
-// eslint-disable-next-line @repo/internal/react/no-class-components
+// eslint-disable-next-line @repo/internal/react/no-class-components, @atlaskit/volt-strict-mode/no-multiple-exports
 var Select = /*#__PURE__*/function (_Component) {
   // Lifecycle
   // ------------------------------
@@ -1957,7 +1958,9 @@ var Select = /*#__PURE__*/function (_Component) {
       var isFocused = this.state.isFocused;
       var commonProps = this.commonProps = this.getCommonProps();
       var isCompact = spacing === 'compact';
-      return /*#__PURE__*/React.createElement(SelectContainer, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(SelectGetStylesContext.Provider, {
+        value: this.getStyles
+      }, /*#__PURE__*/React.createElement(SelectContainer, _extends({}, commonProps, {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
         className: className,
         innerProps: _objectSpread({
@@ -2001,7 +2004,7 @@ var Select = /*#__PURE__*/function (_Component) {
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), /*#__PURE__*/React.createElement(NotifyOpenLayerObserver, {
         isOpen: this.props.menuIsOpen,
         onClose: this.handleOpenLayerObserverCloseSignal
-      }));
+      })));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/esm/theme.js

@@ -1,5 +1,3 @@
-import { colors } from './colors';
-var borderRadius = 4;
 // Used to calculate consistent margin/padding on elements
 var baseUnit = 4;
 // The minimum height of the control
@@ -11,9 +9,4 @@ export var spacing = {
   controlHeight: controlHeight,
   menuGutter: menuGutter
 };
-export var defaultTheme = {
-  borderRadius: borderRadius,
-  colors: colors,
-  spacing: spacing
-};
 export { colors } from './colors';

package/dist/types/async.d.ts

@@ -1,9 +1,8 @@
 import { type ReactElement, type RefAttributes } from 'react';
 import Select from './select';
 import type { GroupBase } from './types';
-import useAsync, { type AsyncProps } from './use-async';
+import { 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;
 declare const AsyncSelect: AsyncSelect;
-export { useAsync };
 export default AsyncSelect;

package/dist/types/compiled/components/indicators-container.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import { type CommonPropsAndClassName, type GroupBase } from '../../types';
+export interface IndicatorsContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
+    isDisabled: boolean;
+    /**
+     * The children to be rendered.
+     */
+    children: ReactNode;
+    /**
+     * Props to be passed to the indicators container element.
+     */
+    innerProps?: {};
+}
+export declare const IndicatorsContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: IndicatorsContainerProps<Option, IsMulti, Group>) => JSX.Element;

package/dist/types/compiled/components/select-container.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import { type CommonPropsAndClassName, type GroupBase } from '../../types';
+export interface ContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
+    /**
+     * Whether the select is disabled.
+     */
+    isDisabled: boolean;
+    isFocused: boolean;
+    /**
+     * The children to be rendered.
+     */
+    children: ReactNode;
+    /**
+     * Inner props to be passed down to the container.
+     */
+    innerProps: {};
+}
+export declare const SelectContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>) => JSX.Element;

package/dist/types/compiled/components/value-container.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import { type CommonPropsAndClassName, type GroupBase } from '../../types';
+export interface ValueContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
+    /**
+     * Props to be passed to the value container element.
+     */
+    innerProps?: {};
+    /**
+     * The children to be rendered.
+     */
+    children: ReactNode;
+    isDisabled: boolean;
+    /**
+     * Whether the select is compact.
+     */
+    isCompact?: boolean;
+}
+export declare const ValueContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ValueContainerProps<Option, IsMulti, Group>) => JSX.Element;

package/dist/types/creatable.d.ts

@@ -1,10 +1,9 @@
 import { type ReactElement, type RefAttributes } from 'react';
 import Select from './select';
 import type { GroupBase } from './types';
-import useCreatable, { type CreatableAdditionalProps } from './use-creatable';
+import { type CreatableAdditionalProps } from './use-creatable';
 import { type StateManagerProps } from './use-state-manager';
 export type CreatableProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = StateManagerProps<Option, IsMulti, Group> & CreatableAdditionalProps<Option, Group>;
 type CreatableSelect = <Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: CreatableProps<Option, IsMulti, Group> & RefAttributes<Select<Option, IsMulti, Group>>) => ReactElement;
 declare const CreatableSelect: CreatableSelect;
-export { useCreatable };
 export default CreatableSelect;

package/dist/types/entry-points/async.d.ts

@@ -1,3 +1,3 @@
-export { useAsync } from '../async';
+export { default as useAsync } from '../use-async';
 export type { AsyncProps } from '../async';
 export { default } from '../async';