@atlaskit/react-select 0.0.2

package/dist/esm/accessibility/helpers.js

@@ -0,0 +1,24 @@
+/// <reference types="user-agent-data-types" />
+
+function testPlatform(re) {
+  var _window$navigator$use;
+  return typeof window !== 'undefined' && window.navigator != null ? re.test(((_window$navigator$use = window.navigator['userAgentData']) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.platform) || window.navigator.platform) : false;
+}
+export function isIPhone() {
+  return testPlatform(/^iPhone/i);
+}
+export function isMac() {
+  return testPlatform(/^Mac/i);
+}
+export function isIPad() {
+  return testPlatform(/^iPad/i) ||
+  // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+  // eslint-disable-next-line compat/compat
+  isMac() && navigator.maxTouchPoints > 1;
+}
+export function isIOS() {
+  return isIPhone() || isIPad();
+}
+export function isAppleDevice() {
+  return isMac() || isIOS();
+}

package/dist/esm/accessibility/index.js

@@ -0,0 +1,68 @@
+export var defaultAriaLiveMessages = {
+  guidance: function guidance(props) {
+    var isSearchable = props.isSearchable,
+      isMulti = props.isMulti,
+      tabSelectsValue = props.tabSelectsValue,
+      context = props.context,
+      isInitialFocus = props.isInitialFocus;
+    switch (context) {
+      case 'menu':
+        return "Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu".concat(tabSelectsValue ? ', press Tab to select the option and exit the menu' : '', ".");
+      case 'input':
+        return isInitialFocus ? "".concat(props['aria-label'] || 'Select', " is focused ").concat(isSearchable ? ',type to refine list' : '', ", press Down to open the menu, ").concat(isMulti ? ' press left to focus selected values' : '') : '';
+      case 'value':
+        return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
+      default:
+        return '';
+    }
+  },
+  onChange: function onChange(props) {
+    var action = props.action,
+      _props$label = props.label,
+      label = _props$label === void 0 ? '' : _props$label,
+      labels = props.labels,
+      isDisabled = props.isDisabled;
+    switch (action) {
+      case 'deselect-option':
+      case 'pop-value':
+      case 'remove-value':
+        return "option ".concat(label, ", deselected.");
+      case 'clear':
+        return 'All selected options have been cleared.';
+      case 'initial-input-focus':
+        return "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:
+        return '';
+    }
+  },
+  onFocus: function onFocus(props) {
+    var context = props.context,
+      focused = props.focused,
+      options = props.options,
+      _props$label2 = props.label,
+      label = _props$label2 === void 0 ? '' : _props$label2,
+      selectValue = props.selectValue,
+      isDisabled = props.isDisabled,
+      isSelected = props.isSelected,
+      isAppleDevice = props.isAppleDevice;
+    var getArrayIndex = function getArrayIndex(arr, item) {
+      return arr && arr.length ? "".concat(arr.indexOf(item) + 1, " of ").concat(arr.length) : '';
+    };
+    if (context === 'value' && selectValue) {
+      return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
+    }
+    if (context === 'menu' && isAppleDevice) {
+      var disabled = isDisabled ? ' disabled' : '';
+      var status = "".concat(isSelected ? ' selected' : '').concat(disabled);
+      return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ".");
+    }
+    return '';
+  },
+  onFilter: function onFilter(props) {
+    var inputValue = props.inputValue,
+      resultsMessage = props.resultsMessage;
+    return "".concat(resultsMessage).concat(inputValue ? ' for search term ' + inputValue : '', ".");
+  }
+};

package/dist/esm/async-creatable.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import Select from './select';
+import useAsync from './use-async';
+import useCreatable from './use-creatable';
+import useStateManager from './use-state-manager';
+var AsyncCreatableSelect = /*#__PURE__*/forwardRef(function (props, ref) {
+  var stateManagerProps = useAsync(props);
+  var creatableProps = useStateManager(stateManagerProps);
+  var selectProps = useCreatable(creatableProps);
+  return /*#__PURE__*/React.createElement(Select, _extends({
+    ref: ref
+  }, selectProps));
+});
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default AsyncCreatableSelect;

package/dist/esm/async.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import Select from './select';
+import useAsync from './use-async';
+import useStateManager from './use-state-manager';
+var AsyncSelect = /*#__PURE__*/forwardRef(function (props, ref) {
+  var stateManagedProps = useAsync(props);
+  var selectProps = useStateManager(stateManagedProps);
+  return /*#__PURE__*/React.createElement(Select, _extends({
+    ref: ref
+  }, selectProps));
+});
+export { useAsync };
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default AsyncSelect;

package/dist/esm/builtins.js

@@ -0,0 +1,12 @@
+export var formatGroupLabel = function formatGroupLabel(group) {
+  return group.label;
+};
+export var getOptionLabel = function getOptionLabel(option) {
+  return option.label;
+};
+export var getOptionValue = function getOptionValue(option) {
+  return option.value;
+};
+export var isOptionDisabled = function isOptionDisabled(option) {
+  return !!option.isDisabled;
+};

package/dist/esm/components/containers.js

@@ -0,0 +1,96 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+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; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { jsx } from '@emotion/react';
+import { getStyleProps } from '../utils';
+
+// ==============================
+// Root Container
+// ==============================
+
+export var containerCSS = function containerCSS(_ref) {
+  var isDisabled = _ref.isDisabled,
+    isRtl = _ref.isRtl;
+  return {
+    label: 'container',
+    direction: isRtl ? 'rtl' : undefined,
+    pointerEvents: isDisabled ? 'none' : undefined,
+    // cancel mouse events when disabled
+    position: 'relative'
+  };
+};
+
+// 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;
+  return jsx("div", _extends({}, getStyleProps(props, 'container', {
+    '--is-disabled': isDisabled,
+    '--is-rtl': isRtl
+  }), innerProps), children);
+};
+
+// ==============================
+// Value Container
+// ==============================
+
+export var valueContainerCSS = function valueContainerCSS(_ref2, unstyled) {
+  var spacing = _ref2.theme.spacing,
+    isMulti = _ref2.isMulti,
+    hasValue = _ref2.hasValue,
+    controlShouldRenderValue = _ref2.selectProps.controlShouldRenderValue;
+  return _objectSpread({
+    alignItems: 'center',
+    display: isMulti && hasValue && controlShouldRenderValue ? 'flex' : 'grid',
+    flex: 1,
+    flexWrap: 'wrap',
+    WebkitOverflowScrolling: 'touch',
+    position: 'relative',
+    overflow: 'hidden'
+  }, unstyled ? {} : {
+    padding: "".concat(spacing.baseUnit / 2, "px ").concat(spacing.baseUnit * 2, "px")
+  });
+};
+
+// 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;
+  return jsx("div", _extends({}, getStyleProps(props, 'valueContainer', {
+    'value-container': true,
+    'value-container--is-multi': isMulti,
+    'value-container--has-value': hasValue
+  }), innerProps), children);
+};
+
+// ==============================
+// Indicator Container
+// ==============================
+
+export var indicatorsContainerCSS = function indicatorsContainerCSS() {
+  return {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexShrink: 0
+  };
+};
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var IndicatorsContainer = function IndicatorsContainer(props) {
+  var children = props.children,
+    innerProps = props.innerProps;
+  return jsx("div", _extends({}, getStyleProps(props, 'indicatorsContainer', {
+    indicators: true
+  }), innerProps), children);
+};

package/dist/esm/components/control.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/extends";
+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; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { jsx } from '@emotion/react';
+import { getStyleProps } from '../utils';
+export var css = function css(_ref, unstyled) {
+  var isDisabled = _ref.isDisabled,
+    isFocused = _ref.isFocused,
+    _ref$theme = _ref.theme,
+    colors = _ref$theme.colors,
+    borderRadius = _ref$theme.borderRadius,
+    spacing = _ref$theme.spacing;
+  return _objectSpread({
+    label: 'control',
+    alignItems: 'center',
+    cursor: 'default',
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    minHeight: spacing.controlHeight,
+    outline: '0 !important',
+    position: 'relative',
+    transition: 'all 100ms'
+  }, unstyled ? {} : {
+    backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
+    borderColor: isDisabled ? colors.neutral10 : isFocused ? colors.primary : colors.neutral20,
+    borderRadius: borderRadius,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    boxShadow: isFocused ? "0 0 0 1px ".concat(colors.primary) : undefined,
+    '&:hover': {
+      borderColor: isFocused ? colors.primary : colors.neutral30
+    }
+  });
+};
+var Control = function Control(props) {
+  var children = props.children,
+    isDisabled = props.isDisabled,
+    isFocused = props.isFocused,
+    innerRef = props.innerRef,
+    innerProps = props.innerProps,
+    menuIsOpen = props.menuIsOpen;
+  return jsx("div", _extends({
+    ref: innerRef
+  }, getStyleProps(props, 'control', {
+    control: true,
+    'control--is-disabled': isDisabled,
+    'control--is-focused': isFocused,
+    'control--menu-is-open': menuIsOpen
+  }), innerProps, {
+    "aria-disabled": isDisabled || undefined
+  }), children);
+};
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default Control;

package/dist/esm/components/group.js

@@ -0,0 +1,74 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["data"];
+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; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { jsx } from '@emotion/react';
+import { cleanCommonProps, getStyleProps } from '../utils';
+export var groupCSS = function groupCSS(_ref, unstyled) {
+  var spacing = _ref.theme.spacing;
+  return unstyled ? {} : {
+    paddingBottom: spacing.baseUnit * 2,
+    paddingTop: spacing.baseUnit * 2
+  };
+};
+var Group = function Group(props) {
+  var children = props.children,
+    cx = props.cx,
+    getStyles = props.getStyles,
+    getClassNames = props.getClassNames,
+    Heading = props.Heading,
+    headingProps = props.headingProps,
+    innerProps = props.innerProps,
+    label = props.label,
+    theme = props.theme,
+    selectProps = props.selectProps;
+  return jsx("div", _extends({}, getStyleProps(props, 'group', {
+    group: true
+  }), innerProps), jsx(Heading, _extends({}, headingProps, {
+    selectProps: selectProps
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    ,
+    theme: theme,
+    getStyles: getStyles,
+    getClassNames: getClassNames,
+    cx: cx
+  }), label), jsx("div", null, children));
+};
+export var groupHeadingCSS = function groupHeadingCSS(_ref2, unstyled) {
+  var _ref2$theme = _ref2.theme,
+    colors = _ref2$theme.colors,
+    spacing = _ref2$theme.spacing;
+  return _objectSpread({
+    label: 'group',
+    cursor: 'default',
+    display: 'block'
+  }, unstyled ? {} : {
+    color: colors.neutral40,
+    fontSize: '75%',
+    fontWeight: 500,
+    marginBottom: '0.25em',
+    paddingLeft: spacing.baseUnit * 3,
+    paddingRight: spacing.baseUnit * 3,
+    textTransform: 'uppercase'
+  });
+};
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var GroupHeading = function GroupHeading(props) {
+  var _cleanCommonProps = cleanCommonProps(props),
+    data = _cleanCommonProps.data,
+    innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded);
+  return jsx("div", _extends({}, getStyleProps(props, 'groupHeading', {
+    'group-heading': true
+  }), innerProps));
+};
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default Group;

package/dist/esm/components/index.js

@@ -0,0 +1,43 @@
+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 { IndicatorsContainer, SelectContainer, ValueContainer } from './containers';
+import Control from './control';
+import Group, { GroupHeading } from './group';
+import { ClearIndicator, CrossIcon, DownChevron, DropdownIndicator, IndicatorSeparator, LoadingIndicator } from './indicators';
+import Input from './input';
+import Menu, { LoadingMessage, MenuList, MenuPortal, NoOptionsMessage } from './menu';
+import MultiValue, { MultiValueContainer, MultiValueLabel, MultiValueRemove } from './multi-value';
+import Option from './option';
+import Placeholder from './placeholder';
+import SingleValue from './single-value';
+export var components = {
+  ClearIndicator: ClearIndicator,
+  Control: Control,
+  DropdownIndicator: DropdownIndicator,
+  DownChevron: DownChevron,
+  CrossIcon: CrossIcon,
+  Group: Group,
+  GroupHeading: GroupHeading,
+  IndicatorsContainer: IndicatorsContainer,
+  IndicatorSeparator: IndicatorSeparator,
+  Input: Input,
+  LoadingIndicator: LoadingIndicator,
+  Menu: Menu,
+  MenuList: MenuList,
+  MenuPortal: MenuPortal,
+  LoadingMessage: LoadingMessage,
+  NoOptionsMessage: NoOptionsMessage,
+  MultiValue: MultiValue,
+  MultiValueContainer: MultiValueContainer,
+  MultiValueLabel: MultiValueLabel,
+  MultiValueRemove: MultiValueRemove,
+  Option: Option,
+  Placeholder: Placeholder,
+  SelectContainer: SelectContainer,
+  SingleValue: SingleValue,
+  ValueContainer: ValueContainer
+};
+export var defaultComponents = function defaultComponents(props) {
+  return _objectSpread(_objectSpread({}, components), props.components);
+};

package/dist/esm/components/indicators.js

@@ -0,0 +1,209 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size"],
+  _excluded2 = ["innerProps", "isRtl", "size"];
+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; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { css, jsx, keyframes } from '@emotion/react';
+import { getStyleProps } from '../utils';
+
+// ==============================
+// Dropdown & Clear Icons
+// ==============================
+
+var styles = css({
+  display: 'inline-block',
+  fill: 'currentColor',
+  lineHeight: 1,
+  stroke: 'currentColor',
+  strokeWidth: 0
+});
+var Svg = function Svg(_ref) {
+  var size = _ref.size,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return jsx("svg", _extends({
+    height: size,
+    width: size,
+    viewBox: "0 0 20 20",
+    "aria-hidden": "true",
+    focusable: "false",
+    css: styles
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, props));
+};
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var CrossIcon = function CrossIcon(props) {
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(Svg, _extends({
+      size: 20
+    }, props), jsx("path", {
+      d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
+    }))
+  );
+};
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var DownChevron = function DownChevron(props) {
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(Svg, _extends({
+      size: 20
+    }, props), jsx("path", {
+      d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+    }))
+  );
+};
+
+// ==============================
+// Dropdown & Clear Buttons
+// ==============================
+
+var baseCSS = function baseCSS(_ref2, unstyled) {
+  var isFocused = _ref2.isFocused,
+    _ref2$theme = _ref2.theme,
+    baseUnit = _ref2$theme.spacing.baseUnit,
+    colors = _ref2$theme.colors;
+  return _objectSpread({
+    label: 'indicatorContainer',
+    display: 'flex',
+    transition: 'color 150ms'
+  }, unstyled ? {} : {
+    color: isFocused ? colors.neutral60 : colors.neutral20,
+    padding: baseUnit * 2,
+    ':hover': {
+      color: isFocused ? colors.neutral80 : colors.neutral40
+    }
+  });
+};
+export var dropdownIndicatorCSS = baseCSS;
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var DropdownIndicator = function DropdownIndicator(props) {
+  var children = props.children,
+    innerProps = props.innerProps;
+  return jsx("div", _extends({}, getStyleProps(props, 'dropdownIndicator', {
+    indicator: true,
+    'dropdown-indicator': true
+  }), innerProps), children || jsx(DownChevron, null));
+};
+export var clearIndicatorCSS = baseCSS;
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var ClearIndicator = function ClearIndicator(props) {
+  var children = props.children,
+    innerProps = props.innerProps;
+  return jsx("div", _extends({}, getStyleProps(props, 'clearIndicator', {
+    indicator: true,
+    'clear-indicator': true
+  }), innerProps), children || jsx(CrossIcon, null));
+};
+
+// ==============================
+// Separator
+// ==============================
+
+export var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref3, unstyled) {
+  var isDisabled = _ref3.isDisabled,
+    _ref3$theme = _ref3.theme,
+    baseUnit = _ref3$theme.spacing.baseUnit,
+    colors = _ref3$theme.colors;
+  return _objectSpread({
+    label: 'indicatorSeparator',
+    alignSelf: 'stretch',
+    width: 1
+  }, unstyled ? {} : {
+    backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
+    marginBottom: baseUnit * 2,
+    marginTop: baseUnit * 2
+  });
+};
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var IndicatorSeparator = function IndicatorSeparator(props) {
+  var innerProps = props.innerProps;
+  return jsx("span", _extends({}, innerProps, getStyleProps(props, 'indicatorSeparator', {
+    'indicator-separator': true
+  })));
+};
+
+// ==============================
+// Loading
+// ==============================
+
+var loadingDotAnimations = keyframes({
+  '0%, 80%, 100%': {
+    opacity: 0
+  },
+  '40%': {
+    opacity: 1
+  }
+});
+export var loadingIndicatorCSS = function loadingIndicatorCSS(_ref4, unstyled) {
+  var isFocused = _ref4.isFocused,
+    size = _ref4.size,
+    _ref4$theme = _ref4.theme,
+    colors = _ref4$theme.colors,
+    baseUnit = _ref4$theme.spacing.baseUnit;
+  return _objectSpread({
+    label: 'loadingIndicator',
+    display: 'flex',
+    transition: 'color 150ms',
+    alignSelf: 'center',
+    fontSize: size,
+    lineHeight: 1,
+    marginRight: size,
+    textAlign: 'center',
+    verticalAlign: 'middle'
+  }, unstyled ? {} : {
+    color: isFocused ? colors.neutral60 : colors.neutral20,
+    padding: baseUnit * 2
+  });
+};
+var LoadingDot = function LoadingDot(_ref5) {
+  var delay = _ref5.delay,
+    offset = _ref5.offset;
+  return jsx("span", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: {
+      animation: "".concat(loadingDotAnimations, " 1s ease-in-out ").concat(delay, "ms infinite;"),
+      backgroundColor: 'currentColor',
+      borderRadius: '1em',
+      display: 'inline-block',
+      marginLeft: offset ? '1em' : undefined,
+      height: '1em',
+      verticalAlign: 'top',
+      width: '1em'
+    }
+  });
+};
+// 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);
+  return jsx("div", _extends({}, getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
+    innerProps: innerProps,
+    isRtl: isRtl,
+    size: size
+  }), 'loadingIndicator', {
+    indicator: true,
+    'loading-indicator': true
+  }), innerProps), jsx(LoadingDot, {
+    delay: 0,
+    offset: isRtl
+  }), jsx(LoadingDot, {
+    delay: 160,
+    offset: true
+  }), jsx(LoadingDot, {
+    delay: 320,
+    offset: !isRtl
+  }));
+};