@atlaskit/react-select 1.5.1 → 1.6.0

package/dist/es2019/components/indicators.js

@@ -4,48 +4,28 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 
-import { css, jsx, keyframes } from '@emotion/react';
+import { jsx } from '@emotion/react';
+import DownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import CrossIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
+import { Inline, Pressable, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
 import { getStyleProps } from '../utils';
 
 // ==============================
 // Dropdown & Clear Icons
 // ==============================
 
-const styles = css({
-  display: 'inline-block',
-  fill: 'currentColor',
-  lineHeight: 1,
-  stroke: 'currentColor',
-  strokeWidth: 0
+const iconContainerStyles = xcss({
+  all: 'unset',
+  outline: 'revert',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 'space.025'
+});
+const dropdownWrapperStyles = xcss({
+  padding: 'space.075'
 });
-const Svg = ({
-  size,
-  ...props
-}) => 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 const CrossIcon = props =>
-// 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 const DownChevron = props =>
-// 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
@@ -68,13 +48,20 @@ export const dropdownIndicatorCSS = ({
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const DropdownIndicator = props => {
   const {
-    children,
-    innerProps
+    innerProps,
+    children
   } = props;
   return jsx("div", _extends({}, getStyleProps(props, 'dropdownIndicator', {
     indicator: true,
     'dropdown-indicator': true
-  }), innerProps), children || jsx(DownChevron, null));
+  }), innerProps), children ? children : jsx(Inline, {
+    as: "span",
+    xcss: dropdownWrapperStyles
+  }, jsx(DownIcon, {
+    color: "currentColor",
+    label: "open",
+    LEGACY_margin: "var(--ds-space-negative-075, -0.375rem)"
+  })));
 };
 export const clearIndicatorCSS = ({
   isCompact
@@ -92,37 +79,21 @@ export const clearIndicatorCSS = ({
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const ClearIndicator = props => {
   const {
-    children,
-    innerProps
+    innerProps,
+    clearControlLabel = 'clear'
   } = props;
   return jsx("div", _extends({}, getStyleProps(props, 'clearIndicator', {
     indicator: true,
     'clear-indicator': true
-  }), innerProps), children || jsx(CrossIcon, null));
-};
-
-// ==============================
-// Separator
-// ==============================
-
-export const indicatorSeparatorCSS = ({
-  isDisabled
-}) => ({
-  label: 'indicatorSeparator',
-  alignSelf: 'stretch',
-  width: 1,
-  backgroundColor: isDisabled ? "var(--ds-border-disabled, #091E420F)" : "var(--ds-border, #091E4224)",
-  marginBottom: "var(--ds-space-100, 8px)",
-  marginTop: "var(--ds-space-100, 8px)"
-});
-
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-export const IndicatorSeparator = props => {
-  const {
-    innerProps
-  } = props;
-  return jsx("span", _extends({}, innerProps, getStyleProps(props, 'indicatorSeparator', {
-    'indicator-separator': true
+  }), innerProps), jsx(Pressable, {
+    xcss: iconContainerStyles,
+    tabIndex: -1,
+    "aria-label": clearControlLabel
+  }, jsx(CrossIcon, {
+    label: "",
+    color: "currentColor",
+    LEGACY_size: "small",
+    LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"
   })));
 };
 
@@ -130,50 +101,12 @@ export const IndicatorSeparator = props => {
 // Loading
 // ==============================
 
-const loadingDotAnimations = keyframes({
-  '0%, 80%, 100%': {
-    opacity: 0
-  },
-  '40%': {
-    opacity: 1
-  }
-});
 export const loadingIndicatorCSS = ({
-  isFocused,
-  size,
-  isCompact,
-  theme: {
-    colors
-  }
+  isCompact
 }) => ({
   label: 'loadingIndicator',
-  display: 'flex',
-  transition: 'color 150ms',
-  alignSelf: 'center',
-  fontSize: size,
-  lineHeight: 1,
-  marginRight: size,
-  textAlign: 'center',
-  verticalAlign: 'middle',
-  color: isFocused ? colors.neutral60 : colors.neutral20,
   padding: `${isCompact ? 0 : "var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"}`
 });
-const LoadingDot = ({
-  delay,
-  offset
-}) => jsx("span", {
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-  css: {
-    animation: `${loadingDotAnimations} 1s ease-in-out ${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 const LoadingIndicator = ({
   innerProps,
@@ -189,14 +122,7 @@ export const LoadingIndicator = ({
   }, '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
+  }), innerProps), jsx(Spinner, {
+    size: "small"
   }));
 };

package/dist/es2019/components/input.js

@@ -8,21 +8,17 @@ import { jsx } from '@emotion/react';
 import { cleanCommonProps, getStyleProps } from '../utils';
 export const inputCSS = ({
   isDisabled,
-  value,
-  theme: {
-    spacing,
-    colors
-  }
+  value
 }) => ({
   visibility: isDisabled ? 'hidden' : 'visible',
   // force css to recompute when value change due to @emotion bug.
   // We can remove it whenever the bug is fixed.
   transform: value ? 'translateZ(0)' : '',
   ...containerStyle,
-  margin: spacing.baseUnit / 2,
-  paddingBottom: spacing.baseUnit / 2,
-  paddingTop: spacing.baseUnit / 2,
-  color: "var(--ds-text, hsl(0, 0%, 20%))"
+  margin: "var(--ds-space-025, 2px)",
+  paddingBottom: "var(--ds-space-025, 2px)",
+  paddingTop: "var(--ds-space-025, 2px)",
+  color: "var(--ds-text, #172B4D)"
 });
 const spacingStyle = {
   gridArea: '1 / 2',

package/dist/es2019/components/menu.js

@@ -8,6 +8,8 @@ import { jsx } from '@emotion/react';
 import { autoUpdate } from '@floating-ui/dom';
 import { createPortal } from 'react-dom';
 import useLayoutEffect from 'use-isomorphic-layout-effect';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Text } from '@atlaskit/primitives';
 import { animatedScrollTo, getBoundingClientObj, getScrollParent, getScrollTop, getStyleProps, normalizedHeight, scrollTo } from '../utils';
 
 // ==============================
@@ -40,7 +42,8 @@ export function getMenuPlacement({
   // we can't trust `scrollParent.scrollHeight` --> it may increase when
   // the menu is rendered
   const {
-    height: scrollHeight
+    height: scrollHeight,
+    top: scrollParentTop
   } = scrollParent.getBoundingClientRect();
   const {
     bottom: menuBottom,
@@ -52,12 +55,14 @@ export function getMenuPlacement({
   } = menuEl.offsetParent.getBoundingClientRect();
   const viewHeight = isFixedPosition ? window.innerHeight : normalizedHeight(scrollParent);
   const scrollTop = getScrollTop(scrollParent);
+  // use menuTop - scrollParentTop for the actual top space of menu in the scroll container
+  const menuTopFromParent = fg('design-system-select-fix-placement') ? menuTop - scrollParentTop : menuTop;
   const marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
   const marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
   const viewSpaceAbove = containerTop - marginTop;
-  const viewSpaceBelow = viewHeight - menuTop;
+  const viewSpaceBelow = viewHeight - menuTopFromParent;
   const scrollSpaceAbove = viewSpaceAbove + scrollTop;
-  const scrollSpaceBelow = scrollHeight - scrollTop - menuTop;
+  const scrollSpaceBelow = scrollHeight - scrollTop - menuTopFromParent;
   const scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
   const scrollUp = scrollTop + menuTop - marginTop;
   const scrollDuration = 160;
@@ -188,21 +193,16 @@ function alignToControl(placement) {
 }
 const coercePlacement = p => p === 'auto' ? 'bottom' : p;
 export const menuCSS = ({
-  placement,
-  theme: {
-    borderRadius,
-    spacing,
-    colors
-  }
+  placement
 }) => ({
   label: 'menu',
   [alignToControl(placement)]: '100%',
   position: 'absolute',
   width: '100%',
   zIndex: 1,
-  borderRadius: borderRadius,
-  marginBottom: spacing.menuGutter,
-  marginTop: spacing.menuGutter,
+  borderRadius: "var(--ds-border-radius, 4px)",
+  marginBottom: "var(--ds-space-100, 8px)",
+  marginTop: "var(--ds-space-100, 8px)",
   backgroundColor: "var(--ds-surface-overlay, white)",
   boxShadow: "var(--ds-shadow-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
 });
@@ -217,8 +217,7 @@ export const MenuPlacer = props => {
     maxMenuHeight,
     menuPlacement,
     menuPosition,
-    menuShouldScrollIntoView,
-    theme
+    menuShouldScrollIntoView
   } = props;
   const {
     setPortalPlacement
@@ -226,9 +225,8 @@ export const MenuPlacer = props => {
   const ref = useRef(null);
   const [maxHeight, setMaxHeight] = useState(maxMenuHeight);
   const [placement, setPlacement] = useState(null);
-  const {
-    controlHeight
-  } = theme.spacing;
+  // The minimum height of the control
+  const controlHeight = 38;
   useLayoutEffect(() => {
     const menuEl = ref.current;
     if (!menuEl) {
@@ -314,17 +312,9 @@ export const MenuList = props => {
 // Menu Notices
 // ==============================
 
-const noticeCSS = ({
-  theme: {
-    spacing: {
-      baseUnit
-    },
-    colors
-  }
-}) => ({
+const noticeCSS = ({}) => ({
   textAlign: 'center',
-  color: colors.neutral40,
-  padding: `${baseUnit * 2}px ${baseUnit * 3}px`
+  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-150, 12px)"}`
 });
 export const noOptionsMessageCSS = noticeCSS;
 export const loadingMessageCSS = noticeCSS;
@@ -344,7 +334,9 @@ export const NoOptionsMessage = ({
   }), {
     // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
     role: "option"
-  }, innerProps), children);
+  }, innerProps), jsx(Text, {
+    color: "color.text.subtle"
+  }, children));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -363,7 +355,9 @@ export const LoadingMessage = ({
   }), innerProps, {
     // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
     role: "option"
-  }), children);
+  }), jsx(Text, {
+    color: "color.text.subtle"
+  }, children));
 };
 
 // ==============================

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

@@ -4,18 +4,15 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
+import LegacySelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import CrossIcon from '@atlaskit/icon/utility/cross';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Inline, xcss } from '@atlaskit/primitives';
 import { getStyleProps } from '../utils';
-import { CrossIcon } from './indicators';
 export const multiValueCSS = ({
   isDisabled,
-  isFocused,
-  theme: {
-    spacing,
-    borderRadius,
-    colors
-  }
+  isFocused
 }) => {
   let backgroundColor;
   let color;
@@ -127,15 +124,53 @@ export const MultiValueContainer = MultiValueGeneric;
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const MultiValueLabel = MultiValueGeneric;
+const disabledStyles = css({
+  display: 'none'
+});
+const enabledStyles = css({
+  display: 'inherit'
+});
+const iconWrapperStyles = xcss({
+  padding: 'space.025'
+});
+const renderIcon = () => {
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if (fg('platform-component-visual-refresh')) {
+    return jsx(CrossIcon, {
+      label: "Clear",
+      color: "currentColor"
+    });
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if (fg('platform-visual-refresh-icons-legacy-facade')) {
+    return jsx(Inline, {
+      xcss: iconWrapperStyles
+    }, jsx(CrossIcon, {
+      label: "Clear",
+      color: "currentColor"
+    }));
+  }
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+    jsx(LegacySelectClearIcon, {
+      label: "Clear",
+      primaryColor: "transparent",
+      size: "small",
+      secondaryColor: "inherit"
+    })
+  );
+};
 export function MultiValueRemove({
-  children,
+  isDisabled,
   innerProps
 }) {
   return jsx("div", _extends({
     role: "button"
-  }, innerProps), children || jsx(CrossIcon, {
-    size: 14
-  }));
+  }, innerProps), jsx("div", {
+    css: isDisabled ? disabledStyles : enabledStyles,
+    "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
+  }, renderIcon()));
 }
 const MultiValue = props => {
   const {
@@ -179,6 +214,7 @@ const MultiValue = props => {
       'aria-label': `Remove ${children || 'option'}`,
       ...removeProps
     },
+    isDisabled: isDisabled,
     selectProps: selectProps
   }));
 };

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

@@ -7,10 +7,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import { getStyleProps } from '../utils';
 export const css = ({
-  isDisabled,
-  theme: {
-    spacing
-  }
+  isDisabled
 }) => ({
   label: 'singleValue',
   gridArea: '1 / 1 / 2 / 3',

package/dist/es2019/index.js

@@ -1,7 +1,6 @@
 import useStateManager from './use-state-manager';
 export { default } from './state-manager';
 export { mergeStyles } from './styles';
-export { defaultTheme } from './theme';
 export { createFilter } from './filters';
 export { components } from './components';
 export { useStateManager };

package/dist/es2019/select.js

@@ -11,10 +11,10 @@ import LiveRegion from './components/live-region';
 import { MenuPlacer } from './components/menu';
 import { createFilter } from './filters';
 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 is by default with the live region so we don't need it
+  // eslint-disable-next-line @atlaskit/platform/no-module-level-eval
   'aria-live': fg('design_system_select-a11y-improvement') ? undefined : 'polite',
   backspaceRemovesValue: true,
   blurInputOnSelect: isTouchCapable(),
@@ -356,6 +356,9 @@ export default class Select extends Component {
         removedValue: lastSelectedValue
       });
     });
+    // ==============================
+    // Getters
+    // ==============================
     _defineProperty(this, "getFocusedOptionId", focusedOption => {
       return getFocusedOptionId(this.state.focusableOptionsWithIds, focusedOption);
     });
@@ -1074,28 +1077,6 @@ export default class Select extends Component {
       focusedOptionId: this.getFocusedOptionId(options[nextFocus])
     });
   }
-  // ==============================
-  // Getters
-  // ==============================
-
-  getTheme() {
-    // Use the default theme if there are no customisations.
-    if (!this.props.theme) {
-      return defaultTheme;
-    }
-    // If the theme prop is a function, assume the function
-    // knows how to merge the passed-in default theme with
-    // its own modifications.
-    if (typeof this.props.theme === 'function') {
-      return this.props.theme(defaultTheme);
-    }
-    // Otherwise, if a plain theme object was passed in,
-    // overlay it with the default theme.
-    return {
-      ...defaultTheme,
-      ...this.props.theme
-    };
-  }
   getCommonProps() {
     const {
       clearValue,
@@ -1125,8 +1106,7 @@ export default class Select extends Component {
       options,
       selectOption,
       selectProps: props,
-      setValue,
-      theme: this.getTheme()
+      setValue
     };
   }
   hasValue() {
@@ -1425,8 +1405,7 @@ export default class Select extends Component {
     }
     const innerProps = {
       onMouseDown: this.onClearIndicatorMouseDown,
-      onTouchEnd: this.onClearIndicatorTouchEnd,
-      'aria-hidden': 'true'
+      onTouchEnd: this.onClearIndicatorTouchEnd
     };
     const isCompact = spacing === 'compact';
     return /*#__PURE__*/React.createElement(ClearIndicator, _extends({
@@ -1466,30 +1445,6 @@ export default class Select extends Component {
       isCompact: isCompact
     }));
   }
-  renderIndicatorSeparator() {
-    const {
-      DropdownIndicator,
-      IndicatorSeparator
-    } = this.getComponents();
-
-    // separator doesn't make sense without the dropdown indicator
-    if (!DropdownIndicator || !IndicatorSeparator) {
-      return null;
-    }
-    const {
-      commonProps
-    } = this;
-    const {
-      isDisabled
-    } = this.props;
-    const {
-      isFocused
-    } = this.state;
-    return /*#__PURE__*/React.createElement(IndicatorSeparator, _extends({}, commonProps, {
-      isDisabled: isDisabled,
-      isFocused: isFocused
-    }));
-  }
   renderDropdownIndicator() {
     const {
       DropdownIndicator
@@ -1829,7 +1784,7 @@ export default class Select extends Component {
       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());
+    }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
   }
 }
 _defineProperty(Select, "defaultProps", defaultProps);

package/dist/es2019/styles.js

@@ -1,7 +1,7 @@
 import { containerCSS, indicatorsContainerCSS, valueContainerCSS } from './components/containers';
 import { css as controlCSS } from './components/control';
 import { groupCSS, groupHeadingCSS } from './components/group';
-import { clearIndicatorCSS, dropdownIndicatorCSS, indicatorSeparatorCSS, loadingIndicatorCSS } from './components/indicators';
+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';
@@ -16,7 +16,6 @@ export const defaultStyles = {
   group: groupCSS,
   groupHeading: groupHeadingCSS,
   indicatorsContainer: indicatorsContainerCSS,
-  indicatorSeparator: indicatorSeparatorCSS,
   input: inputCSS,
   loadingIndicator: loadingIndicatorCSS,
   loadingMessage: loadingMessageCSS,

package/dist/es2019/utils.js

@@ -74,8 +74,6 @@ export const cleanCommonProps = props => {
     selectOption,
     selectProps,
     setValue,
-    theme,
-    // not listed in commonProps documentation
     ...innerProps
   } = props;
   return {

package/dist/esm/components/group.js

@@ -25,15 +25,11 @@ var Group = function Group(props) {
     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,
+    selectProps: selectProps,
     getStyles: getStyles,
     getClassNames: getClassNames,
     cx: cx
@@ -45,13 +41,12 @@ export var groupHeadingCSS = function groupHeadingCSS(_ref2) {
     label: 'group',
     cursor: 'default',
     display: 'block',
-    fontSize: '75%',
     marginBottom: '0.25em',
     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"),
+    fontWeight: "var(--ds-font-weight-bold, 700)",
     textTransform: 'none'
   };
 };

package/dist/esm/components/index.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';
 import Input from './input';
 import Menu, { LoadingMessage, MenuList, MenuPortal, NoOptionsMessage } from './menu';
 import MultiValue, { MultiValueContainer, MultiValueLabel, MultiValueRemove } from './multi-value';
@@ -15,12 +15,9 @@ 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,