@atlaskit/react-select 1.4.0 → 1.4.2

package/dist/es2019/select.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 import React, { Component } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { isAppleDevice, isSafari } from './accessibility/helpers';
@@ -13,7 +14,8 @@ import { defaultStyles } from './styles';
 import { defaultTheme } from './theme';
 import { classNames, cleanValue, isDocumentElement, isMobileDevice, isTouchCapable, multiValueAsValue, noop, notNullish, scrollIntoView, singleValueAsValue, valueTernary } from './utils';
 export const defaultProps = {
-  'aria-live': 'polite',
+  // aria-live is by default with the live region so we don't need it
+  'aria-live': fg('design_system_select-a11y-improvement') ? undefined : 'polite',
   backspaceRemovesValue: true,
   blurInputOnSelect: isTouchCapable(),
   captureMenuScroll: !isTouchCapable(),
@@ -225,7 +227,7 @@ export default class Select extends Component {
     _defineProperty(this, "initialTouchY", 0);
     _defineProperty(this, "openAfterFocus", false);
     _defineProperty(this, "scrollToFocusedOptionOnUpdate", false);
-    _defineProperty(this, "isAppleDevice", fg('design_system_select-a11y-improvement') ? isSafari() : isAppleDevice());
+    _defineProperty(this, "isVoiceOver", fg('design_system_select-a11y-improvement') && isAppleDevice());
     // Refs
     // ------------------------------
     _defineProperty(this, "controlRef", null);
@@ -732,6 +734,7 @@ export default class Select extends Component {
               prevInputValue: inputValue
             });
             this.onMenuClose();
+            fg('design_system_select-a11y-improvement') && event.stopPropagation(); // keep ESC on select from dismissing parent layers
           } else if (isClearable && escapeClearsValue) {
             this.clearValue();
           }
@@ -1177,6 +1180,29 @@ export default class Select extends Component {
   formatGroupLabel(data) {
     return this.props.formatGroupLabel(data);
   }
+  calculateDescription(action) {
+    const descriptionProp = this.props['aria-describedby'] || this.props['descriptionId'];
+    const {
+      isMulti
+    } = this.props;
+    const {
+      selectValue
+    } = this.state;
+    const defaultDescription = selectValue.length ? this.getElementId('live-region') : this.getElementId('placeholder');
+    if (selectValue.length && action !== 'initial-input-focus') {
+      return;
+    }
+    if (isMulti && isAppleDevice() && !isSafari()) {
+      // chrome only friends
+      return {
+        'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription, this.getElementId('multi-message')].join(' ') : [defaultDescription, this.getElementId('multi-message')].join(' ')
+      };
+    } else {
+      return {
+        'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription].join(' ') : defaultDescription
+      };
+    }
+  }
   // ==============================
   // Composition Handlers
   // ==============================
@@ -1251,32 +1277,31 @@ export default class Select extends Component {
       commonProps
     } = this;
     const id = inputId || this.getElementId('input');
-    const description = this.props['aria-describedby'] || descriptionId;
 
     // aria attributes makes the JSX "noisy", separated for clarity
     const ariaAttributes = {
       'aria-autocomplete': 'both',
       'aria-errormessage': this.props['aria-errormessage'],
       'aria-expanded': menuIsOpen,
+      // TODO: aria-haspopup is implied as listbox with role="combobox" and was deprecated for aria 1.2, we still might need to keep it for back compat
       'aria-haspopup': 'listbox',
-      'aria-describedby': description,
+      'aria-describedby': this.props['aria-describedby'] || descriptionId,
       'aria-invalid': this.props['aria-invalid'] || isInvalid,
       'aria-label': this.props['aria-label'] || label,
       'aria-labelledby': this.props['aria-labelledby'] || labelId,
       'aria-required': required || isRequired,
       role: 'combobox',
       'aria-activedescendant': this.state.focusedOptionId || undefined,
+      // Safari needs aria-owns in order for aria-activedescendant to work properly
+      'aria-owns': isSafari() && fg('design_system_select-a11y-improvement') ? this.getElementId('listbox') : undefined,
       ...(menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }),
+      // TODO: Might need to remove this
       ...(!isSearchable && {
         'aria-readonly': true
       }),
-      ...(this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
-        'aria-describedby': description ? [description, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
-      } : {
-        'aria-describedby': description ? [description, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
-      })
+      ...this.calculateDescription(ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action)
     };
     if (!isSearchable) {
       // use a dummy input to maintain focus/blur functionality
@@ -1389,7 +1414,8 @@ export default class Select extends Component {
     const {
       clearControlLabel,
       isDisabled,
-      isLoading
+      isLoading,
+      spacing
     } = this.props;
     const {
       isFocused
@@ -1402,11 +1428,13 @@ export default class Select extends Component {
       onTouchEnd: this.onClearIndicatorTouchEnd,
       'aria-hidden': 'true'
     };
+    const isCompact = spacing === 'compact';
     return /*#__PURE__*/React.createElement(ClearIndicator, _extends({
       clearControlLabel: clearControlLabel
     }, commonProps, {
       innerProps: innerProps,
-      isFocused: isFocused
+      isFocused: isFocused,
+      isCompact: isCompact
     }));
   }
   renderLoadingIndicator() {
@@ -1418,7 +1446,8 @@ export default class Select extends Component {
     } = this;
     const {
       isDisabled,
-      isLoading
+      isLoading,
+      spacing
     } = this.props;
     const {
       isFocused
@@ -1426,13 +1455,15 @@ export default class Select extends Component {
     if (!LoadingIndicator || !isLoading) {
       return null;
     }
+    const isCompact = spacing === 'compact';
     const innerProps = {
       'aria-hidden': 'true'
     };
     return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({}, commonProps, {
       innerProps: innerProps,
       isDisabled: isDisabled,
-      isFocused: isFocused
+      isFocused: isFocused,
+      isCompact: isCompact
     }));
   }
   renderIndicatorSeparator() {
@@ -1470,11 +1501,13 @@ export default class Select extends Component {
       commonProps
     } = this;
     const {
-      isDisabled
+      isDisabled,
+      spacing
     } = this.props;
     const {
       isFocused
     } = this.state;
+    const isCompact = spacing === 'compact';
     const innerProps = {
       onMouseDown: this.onDropdownIndicatorMouseDown,
       onTouchEnd: this.onDropdownIndicatorTouchEnd,
@@ -1483,7 +1516,8 @@ export default class Select extends Component {
     return /*#__PURE__*/React.createElement(DropdownIndicator, _extends({}, commonProps, {
       innerProps: innerProps,
       isDisabled: isDisabled,
-      isFocused: isFocused
+      isFocused: isFocused,
+      isCompact: isCompact
     }));
   }
   renderMenu() {
@@ -1546,7 +1580,10 @@ export default class Select extends Component {
         onMouseMove: onHover,
         onMouseOver: onHover,
         role: 'option',
-        'aria-selected': !commonProps.isMulti && fg('design_system_select-a11y-improvement') ? isSelected || undefined : isSelected,
+        // We don't want aria-selected on Apple devices or if it's false. It does nasty things.
+        'aria-selected': (!commonProps.isMulti || this.isVoiceOver || !isSelected) && fg('design_system_select-a11y-improvement') ? undefined : isSelected,
+        // We don't want aria-disabled on Apple devices or if it's false. It's just noisy.
+        'aria-disabled': (isAppleDevice() || !isDisabled) && fg('design_system_select-a11y-improvement') ? undefined : isDisabled,
         'aria-describedby': fg('design_system_select-a11y-improvement') ? headingId : undefined
       };
       return /*#__PURE__*/React.createElement(Option, _extends({}, commonProps, {
@@ -1640,13 +1677,12 @@ export default class Select extends Component {
       },
       innerProps: {
         role: 'listbox',
-        // don't add aria-multiselectable when ff is on and the value is false
-        'aria-multiselectable': fg('design_system_select-a11y-improvement') ? commonProps.isMulti || undefined : commonProps.isMulti,
+        'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
         id: this.getElementId('listbox'),
         // add aditional label on listbox when ff is on
         ...(fg('design_system_select-a11y-improvement') && {
           'aria-label': label,
-          'aria-labelledby': labelId
+          'aria-labelledby': `${labelId || this.getElementId('input')} ${commonProps.isMulti && isSafari() ? this.getElementId('multi-message') : ''}`
         })
       },
       isLoading: isLoading,
@@ -1734,9 +1770,15 @@ export default class Select extends Component {
       isFocused: isFocused,
       selectValue: selectValue,
       focusableOptions: focusableOptions,
-      isAppleDevice: this.isAppleDevice
+      isAppleDevice: this.isVoiceOver
     }));
   }
+  renderMultiselectMessage() {
+    return /*#__PURE__*/React.createElement("span", {
+      id: this.getElementId('multi-message'),
+      hidden: true
+    }, ", multiple selections available,");
+  }
   render() {
     const {
       Control,
@@ -1748,12 +1790,16 @@ export default class Select extends Component {
       className,
       id,
       isDisabled,
-      menuIsOpen
+      menuIsOpen,
+      isInvalid,
+      appearance = 'default',
+      spacing = 'default'
     } = this.props;
     const {
       isFocused
     } = this.state;
     const commonProps = this.commonProps = this.getCommonProps();
+    const isCompact = spacing === 'compact';
     return /*#__PURE__*/React.createElement(SelectContainer, _extends({}, commonProps, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: className,
@@ -1763,17 +1809,21 @@ export default class Select extends Component {
       },
       isDisabled: isDisabled,
       isFocused: isFocused
-    }), this.renderLiveRegion(), /*#__PURE__*/React.createElement(Control, _extends({}, commonProps, {
+    }), this.renderLiveRegion(), commonProps.isMulti && this.isVoiceOver && this.renderMultiselectMessage(), /*#__PURE__*/React.createElement(Control, _extends({}, commonProps, {
       innerRef: this.getControlRef,
       innerProps: {
         onMouseDown: this.onControlMouseDown,
         onTouchEnd: this.onControlTouchEnd
       },
+      appearance: appearance,
+      isInvalid: isInvalid,
       isDisabled: isDisabled,
       isFocused: isFocused,
-      menuIsOpen: menuIsOpen
+      menuIsOpen: menuIsOpen,
+      isCompact: isCompact
     }), /*#__PURE__*/React.createElement(ValueContainer, _extends({}, commonProps, {
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      isCompact: isCompact
     }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends({}, commonProps, {
       isDisabled: isDisabled
     }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());

package/dist/esm/accessibility/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
+
 import { fg } from '@atlaskit/platform-feature-flags';
 export var defaultAriaLiveMessages = {
   guidance: function guidance(props) {
@@ -27,11 +29,12 @@ export var defaultAriaLiveMessages = {
       case 'deselect-option':
       case 'pop-value':
       case 'remove-value':
-        return "option ".concat(label, ", deselected.");
+        return label.length && fg('design_system_select-a11y-improvement') || !fg('design_system_select-a11y-improvement') ? "option ".concat(label, ", deselected") : '';
+      // TODO: this should be handled on backspace|delete if no value, but doing it here first
       case 'clear':
         return 'All selected options have been cleared.';
       case 'initial-input-focus':
-        return "option".concat(labels.length > 1 ? 's' : '', " ").concat(labels.join(','), ", selected.");
+        return label.length && fg('design_system_select-a11y-improvement') || !fg('design_system_select-a11y-improvement') ? "option".concat(labels.length > 1 ? 's' : '', " ").concat(labels.join(','), ", selected.") : '';
       case 'select-option':
         return isDisabled ? "option ".concat(label, " is disabled. Select another option.") : "option ".concat(label, ", selected.");
       default:
@@ -45,7 +48,6 @@ export var defaultAriaLiveMessages = {
       _props$label2 = props.label,
       label = _props$label2 === void 0 ? '' : _props$label2,
       selectValue = props.selectValue,
-      isMulti = props.isMulti,
       isDisabled = props.isDisabled,
       isSelected = props.isSelected;
     var getArrayIndex = function getArrayIndex(arr, item) {
@@ -54,11 +56,11 @@ export var defaultAriaLiveMessages = {
     if (context === 'value' && selectValue) {
       return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
     }
-    if (context === 'menu') {
+
+    // No longer needed after fg('design_system_select-a11y-improvement') is cleaned up
+    if (context === 'menu' && !fg('design_system_select-a11y-improvement')) {
       var disabled = isDisabled ? ' disabled' : '';
-      // don't announce not selected for single selection
-      var notSelectedStatus = !isMulti && fg('design_system_select-a11y-improvement') ? '' : ' not selected';
-      var status = "".concat(isSelected ? ' selected' : notSelectedStatus).concat(disabled);
+      var status = "".concat(isSelected ? ' selected' : ' not selected').concat(disabled);
       return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ", completion selected");
     }
     return '';

package/dist/esm/components/containers.js

@@ -17,9 +17,10 @@ export var containerCSS = function containerCSS(_ref) {
   return {
     label: 'container',
     direction: isRtl ? 'rtl' : undefined,
-    pointerEvents: isDisabled ? 'none' : undefined,
-    // cancel mouse events when disabled
-    position: 'relative'
+    position: 'relative',
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    pointerEvents: 'all',
+    cursor: isDisabled ? 'not-allowed' : undefined
   };
 };
 
@@ -40,9 +41,9 @@ export var SelectContainer = function SelectContainer(props) {
 // ==============================
 
 export var valueContainerCSS = function valueContainerCSS(_ref2) {
-  var spacing = _ref2.theme.spacing,
-    isMulti = _ref2.isMulti,
+  var isMulti = _ref2.isMulti,
     hasValue = _ref2.hasValue,
+    isCompact = _ref2.isCompact,
     controlShouldRenderValue = _ref2.selectProps.controlShouldRenderValue;
   return {
     alignItems: 'center',
@@ -52,7 +53,7 @@ export var valueContainerCSS = function valueContainerCSS(_ref2) {
     WebkitOverflowScrolling: 'touch',
     position: 'relative',
     overflow: 'hidden',
-    padding: "".concat(spacing.baseUnit / 2, "px ").concat(spacing.baseUnit * 2, "px")
+    padding: "".concat(isCompact ? 0 : "var(--ds-space-025, 2px)", " ", "var(--ds-space-075, 6px)")
   };
 };
 
@@ -84,7 +85,8 @@ export var indicatorsContainerCSS = function indicatorsContainerCSS() {
     alignItems: 'center',
     alignSelf: 'stretch',
     display: 'flex',
-    flexShrink: 0
+    flexShrink: 0,
+    paddingRight: "var(--ds-space-050, 4px)"
   };
 };
 

package/dist/esm/components/control.js

@@ -9,10 +9,33 @@ import { getStyleProps } from '../utils';
 export var css = function css(_ref) {
   var isDisabled = _ref.isDisabled,
     isFocused = _ref.isFocused,
-    _ref$theme = _ref.theme,
-    colors = _ref$theme.colors,
-    borderRadius = _ref$theme.borderRadius,
-    spacing = _ref$theme.spacing;
+    isInvalid = _ref.isInvalid,
+    isCompact = _ref.isCompact,
+    appearance = _ref.appearance;
+  var borderColor = isFocused ? "var(--ds-border-focused, #388BFF)" : "var(--ds-border-input, #8590A2)";
+  var backgroundColor = isFocused ? "var(--ds-background-input-pressed, #FFFFFF)" : "var(--ds-background-input, #FFFFFF)";
+  var backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, #FFFFFF)" : "var(--ds-background-input-hovered, #F7F8F9)";
+  var borderColorHover = isFocused ? "var(--ds-border-focused, #388BFF)" : "var(--ds-border-input, #8590A2)";
+  if (isDisabled) {
+    backgroundColor = "var(--ds-background-disabled, #091E4208)";
+    borderColor = "var(--ds-background-disabled, #091E4208)";
+  }
+  if (isInvalid) {
+    borderColor = "var(--ds-border-danger, #E2483D)";
+    borderColorHover = "var(--ds-border-danger, #E2483D)";
+  }
+  var transitionDuration = '200ms';
+  if (appearance === 'subtle') {
+    borderColor = isFocused ? "var(--ds-border-focused, #388BFF)" : 'transparent';
+    backgroundColor = isFocused ? "var(--ds-surface, #FFFFFF)" : 'transparent';
+    backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, #FFFFFF)" : "var(--ds-background-input-hovered, #F7F8F9)";
+  }
+  if (appearance === 'none') {
+    borderColor = 'transparent';
+    backgroundColor = 'transparent';
+    backgroundColorHover = 'transparent';
+    borderColorHover = 'transparent';
+  }
   return {
     label: 'control',
     alignItems: 'center',
@@ -20,18 +43,40 @@ export var css = function css(_ref) {
     display: 'flex',
     flexWrap: 'wrap',
     justifyContent: 'space-between',
-    minHeight: spacing.controlHeight,
     outline: '0 !important',
     position: 'relative',
-    transition: 'all 100ms',
-    backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
-    borderColor: isDisabled ? colors.neutral10 : isFocused ? colors.primary : colors.neutral20,
-    borderRadius: borderRadius,
+    // Turn pointer events off when disabled - this makes it so hover etc don't work.
+    pointerEvents: isDisabled ? 'none' : undefined,
+    backgroundColor: backgroundColor,
+    borderColor: borderColor,
     borderStyle: 'solid',
-    borderWidth: 1,
-    boxShadow: isFocused ? "0 0 0 1px ".concat(colors.primary) : undefined,
-    '&:hover': {
-      borderColor: isFocused ? colors.primary : colors.neutral30
+    borderRadius: "var(--ds-border-radius-100, 3px)",
+    borderWidth: "var(--ds-border-width, 1px)",
+    boxShadow: isInvalid ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor) : 'none',
+    '&:focus-within': {
+      boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor)
+    },
+    minHeight: isCompact ? 32 : 40,
+    padding: 0,
+    transition: "background-color ".concat(transitionDuration, " ease-in-out,\nborder-color ").concat(transitionDuration, " ease-in-out"),
+    '::-webkit-scrollbar': {
+      height: 8,
+      width: 8
+    },
+    '::-webkit-scrollbar-corner': {
+      display: 'none'
+    },
+    ':hover': {
+      '::-webkit-scrollbar-thumb': {
+        // scrollbars occur only if the user passes in a custom component with overflow: scroll
+        backgroundColor: 'rgba(0,0,0,0.2)'
+      },
+      cursor: 'pointer',
+      backgroundColor: backgroundColorHover,
+      borderColor: borderColorHover
+    },
+    '::-webkit-scrollbar-thumb:hover': {
+      backgroundColor: 'rgba(0,0,0,0.4)'
     }
   };
 };

package/dist/esm/components/group.js

@@ -1,5 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 var _excluded = ["data"];
 /**
  * @jsxRuntime classic
@@ -9,10 +10,10 @@ var _excluded = ["data"];
 import { jsx } from '@emotion/react';
 import { cleanCommonProps, getStyleProps } from '../utils';
 export var groupCSS = function groupCSS(_ref) {
-  var spacing = _ref.theme.spacing;
+  _objectDestructuringEmpty(_ref);
   return {
-    paddingBottom: spacing.baseUnit * 2,
-    paddingTop: spacing.baseUnit * 2
+    paddingBottom: "var(--ds-space-100, 8px)",
+    paddingTop: "var(--ds-space-100, 8px)"
   };
 };
 var Group = function Group(props) {
@@ -39,20 +40,19 @@ var Group = function Group(props) {
   }), label), jsx("div", null, children));
 };
 export var groupHeadingCSS = function groupHeadingCSS(_ref2) {
-  var _ref2$theme = _ref2.theme,
-    colors = _ref2$theme.colors,
-    spacing = _ref2$theme.spacing;
+  _objectDestructuringEmpty(_ref2);
   return {
     label: 'group',
     cursor: 'default',
     display: 'block',
-    color: colors.neutral40,
     fontSize: '75%',
-    fontWeight: 500,
     marginBottom: '0.25em',
-    paddingLeft: spacing.baseUnit * 3,
-    paddingRight: spacing.baseUnit * 3,
-    textTransform: 'uppercase'
+    paddingLeft: "var(--ds-space-150, 12px)",
+    paddingRight: "var(--ds-space-150, 12px)",
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    color: "var(--ds-text-subtle, #44546F)",
+    fontWeight: "var(--ds-font-weight-bold, 700)".concat(" !important"),
+    textTransform: 'none'
   };
 };
 

package/dist/esm/components/indicators.js

@@ -64,23 +64,20 @@ export var DownChevron = function DownChevron(props) {
 // Dropdown & Clear Buttons
 // ==============================
 
-var baseCSS = function baseCSS(_ref2) {
-  var isFocused = _ref2.isFocused,
-    _ref2$theme = _ref2.theme,
-    baseUnit = _ref2$theme.spacing.baseUnit,
-    colors = _ref2$theme.colors;
+export var dropdownIndicatorCSS = function dropdownIndicatorCSS(_ref2) {
+  var isCompact = _ref2.isCompact,
+    isDisabled = _ref2.isDisabled;
   return {
     label: 'indicatorContainer',
     display: 'flex',
     transition: 'color 150ms',
-    color: isFocused ? colors.neutral60 : colors.neutral20,
-    padding: baseUnit * 2,
+    color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : "var(--ds-text-subtle, #44546F)",
+    padding: "".concat(isCompact ? 0 : "var(--ds-space-075, 6px)", " ", "var(--ds-space-025, 2px)"),
     ':hover': {
-      color: isFocused ? colors.neutral80 : colors.neutral40
+      color: "var(--ds-text-subtle, #44546F)"
     }
   };
 };
-export var dropdownIndicatorCSS = baseCSS;
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var DropdownIndicator = function DropdownIndicator(props) {
@@ -91,7 +88,19 @@ export var DropdownIndicator = function DropdownIndicator(props) {
     'dropdown-indicator': true
   }), innerProps), children || jsx(DownChevron, null));
 };
-export var clearIndicatorCSS = baseCSS;
+export var clearIndicatorCSS = function clearIndicatorCSS(_ref3) {
+  var isCompact = _ref3.isCompact;
+  return {
+    label: 'indicatorContainer',
+    display: 'flex',
+    transition: 'color 150ms',
+    color: "var(--ds-text-subtlest, #626F86)",
+    padding: "".concat(isCompact ? 0 : "var(--ds-space-075, 6px)", " ", "var(--ds-space-025, 2px)"),
+    ':hover': {
+      color: "var(--ds-text-subtle, #44546F)"
+    }
+  };
+};
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var ClearIndicator = function ClearIndicator(props) {
@@ -107,18 +116,15 @@ export var ClearIndicator = function ClearIndicator(props) {
 // Separator
 // ==============================
 
-export var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref3) {
-  var isDisabled = _ref3.isDisabled,
-    _ref3$theme = _ref3.theme,
-    baseUnit = _ref3$theme.spacing.baseUnit,
-    colors = _ref3$theme.colors;
+export var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref4) {
+  var isDisabled = _ref4.isDisabled;
   return {
     label: 'indicatorSeparator',
     alignSelf: 'stretch',
     width: 1,
-    backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
-    marginBottom: baseUnit * 2,
-    marginTop: baseUnit * 2
+    backgroundColor: isDisabled ? "var(--ds-border-disabled, #091E420F)" : "var(--ds-border, #091E4224)",
+    marginBottom: "var(--ds-space-100, 8px)",
+    marginTop: "var(--ds-space-100, 8px)"
   };
 };
 
@@ -142,12 +148,11 @@ var loadingDotAnimations = keyframes({
     opacity: 1
   }
 });
-export var loadingIndicatorCSS = function loadingIndicatorCSS(_ref4) {
-  var isFocused = _ref4.isFocused,
-    size = _ref4.size,
-    _ref4$theme = _ref4.theme,
-    colors = _ref4$theme.colors,
-    baseUnit = _ref4$theme.spacing.baseUnit;
+export var loadingIndicatorCSS = function loadingIndicatorCSS(_ref5) {
+  var isFocused = _ref5.isFocused,
+    size = _ref5.size,
+    isCompact = _ref5.isCompact,
+    colors = _ref5.theme.colors;
   return {
     label: 'loadingIndicator',
     display: 'flex',
@@ -159,12 +164,12 @@ export var loadingIndicatorCSS = function loadingIndicatorCSS(_ref4) {
     textAlign: 'center',
     verticalAlign: 'middle',
     color: isFocused ? colors.neutral60 : colors.neutral20,
-    padding: baseUnit * 2
+    padding: "".concat(isCompact ? 0 : "var(--ds-space-075, 6px)", " ", "var(--ds-space-100, 8px)")
   };
 };
-var LoadingDot = function LoadingDot(_ref5) {
-  var delay = _ref5.delay,
-    offset = _ref5.offset;
+var LoadingDot = function LoadingDot(_ref6) {
+  var delay = _ref6.delay,
+    offset = _ref6.offset;
   return jsx("span", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     css: {
@@ -180,12 +185,12 @@ var LoadingDot = function LoadingDot(_ref5) {
   });
 };
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-export var LoadingIndicator = function LoadingIndicator(_ref6) {
-  var innerProps = _ref6.innerProps,
-    isRtl = _ref6.isRtl,
-    _ref6$size = _ref6.size,
-    size = _ref6$size === void 0 ? 4 : _ref6$size,
-    restProps = _objectWithoutProperties(_ref6, _excluded2);
+export var LoadingIndicator = function LoadingIndicator(_ref7) {
+  var innerProps = _ref7.innerProps,
+    isRtl = _ref7.isRtl,
+    _ref7$size = _ref7.size,
+    size = _ref7$size === void 0 ? 4 : _ref7$size,
+    restProps = _objectWithoutProperties(_ref7, _excluded2);
   return jsx("div", _extends({}, getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
     innerProps: innerProps,
     isRtl: isRtl,

package/dist/esm/components/input.js

@@ -26,7 +26,7 @@ export var inputCSS = function inputCSS(_ref) {
     margin: spacing.baseUnit / 2,
     paddingBottom: spacing.baseUnit / 2,
     paddingTop: spacing.baseUnit / 2,
-    color: colors.neutral80
+    color: "var(--ds-text, hsl(0, 0%, 20%))"
   });
 };
 var spacingStyle = {

package/dist/esm/components/internal/a11y-text.js

@@ -16,6 +16,8 @@ var styles = css({
   clip: 'rect(1px, 1px, 1px, 1px)',
   label: 'a11yText',
   overflow: 'hidden',
+  userSelect: 'none',
+  // while hidden text is sitting in the DOM, it should not be selectable
   whiteSpace: 'nowrap'
 });
 var A11yText = function A11yText(props) {

package/dist/esm/components/live-region.js

@@ -1,6 +1,7 @@
 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; }
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -165,8 +166,11 @@ var LiveRegion = function LiveRegion(props) {
   return jsx(Fragment, null, jsx(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText, {
-    "aria-live": isA11yImprovementEnabled ? 'polite' : ariaLive,
-    role: isA11yImprovementEnabled ? 'status' : 'log'
+    "aria-live": ariaLive // Should be undefined by default unless a specific use case requires it
+    ,
+    "aria-atomic": fg('design_system_select-a11y-improvement') ? undefined : 'false',
+    "aria-relevant": fg('design_system_select-a11y-improvement') ? undefined : 'additions text',
+    role: fg('design_system_select-a11y-improvement') ? 'status' : 'log'
   }, isFocused && !isInitialFocus && ScreenReaderText));
 };