@zendeskgarden/react-dropdowns.legacy 9.0.0-next.6 → 9.0.0-next.8

package/dist/index.esm.js

@@ -1,2032 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
-import * as React from 'react';
-import React__default, { useContext, useRef, useState, Children, useEffect, useCallback, forwardRef, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import styled, { ThemeContext, css } from 'styled-components';
-import Downshift from 'downshift';
-export { resetIdCounter } from 'downshift';
-import { Manager, Reference, Popper } from 'react-popper';
-import { composeEventHandlers, KEY_CODES } from '@zendeskgarden/container-utilities';
-import { arrowStyles, retrieveComponentStyles, DEFAULT_THEME, menuStyles, getColorV8, getLineHeight, useDocument } from '@zendeskgarden/react-theming';
-import { rgba, math } from 'polished';
-import { FauxInput, Input, VALIDATION, MediaInput, Field as Field$1, Hint as Hint$1, Label as Label$1, Message as Message$1 } from '@zendeskgarden/react-forms';
-import { mergeRefs } from 'react-merge-refs';
-import { useSelection } from '@zendeskgarden/container-selection';
-import { createPortal } from 'react-dom';
-
-function _extends$5() {
-  _extends$5 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$5.apply(this, arguments);
-}
-
-const DropdownContext = React__default.createContext(undefined);
-const useDropdownContext = () => {
-  const dropdownContext = useContext(DropdownContext);
-  if (!dropdownContext) {
-    throw new Error('This component must be rendered within a `Dropdown` component.');
-  }
-  return dropdownContext;
-};
-
-const REMOVE_ITEM_STATE_TYPE = 'REMOVE_ITEM';
-const Dropdown = props => {
-  const {
-    children,
-    isOpen,
-    selectedItem,
-    selectedItems,
-    highlightedIndex,
-    inputValue,
-    onSelect,
-    onStateChange,
-    onInputValueChange,
-    downshiftProps
-  } = props;
-  const itemIndexRef = useRef(0);
-  const previousItemRef = useRef(undefined);
-  const previousIndexRef = useRef(undefined);
-  const nextItemsHashRef = useRef({});
-  const containsMultiselectRef = useRef(false);
-  const itemSearchRegistry = useRef([]);
-  const [dropdownType, setDropdownType] = useState('');
-  const {
-    rtl
-  } = useContext(ThemeContext);
-  const hasMenuRef = useRef(false);
-  const popperReferenceElementRef = useRef(null);
-  const customGetInputProps = (_ref, downshift) => {
-    let {
-      onKeyDown,
-      ...other
-    } = _ref;
-    return {
-      onKeyDown: composeEventHandlers(onKeyDown, e => {
-        const PREVIOUS_KEY = rtl ? KEY_CODES.RIGHT : KEY_CODES.LEFT;
-        const NEXT_KEY = rtl ? KEY_CODES.LEFT : KEY_CODES.RIGHT;
-        if (downshift.isOpen) {
-          if (e.keyCode === PREVIOUS_KEY && previousIndexRef.current !== null && previousIndexRef.current !== undefined && !downshift.inputValue) {
-            e.preventDefault();
-            e.stopPropagation();
-            downshift.selectItemAtIndex(previousIndexRef.current);
-          }
-          if (e.keyCode === NEXT_KEY) {
-            const nextItemIndexes = Object.values(nextItemsHashRef.current);
-            if (nextItemIndexes.includes(downshift.highlightedIndex)) {
-              e.preventDefault();
-              e.stopPropagation();
-              downshift.selectItemAtIndex(downshift.highlightedIndex);
-            }
-          }
-        } else if ((e.keyCode === KEY_CODES.ENTER || e.keyCode === KEY_CODES.SPACE) && !downshift.isOpen && dropdownType !== 'combobox') {
-          e.preventDefault();
-          e.stopPropagation();
-          downshift.openMenu();
-        }
-      }),
-      ...other
-    };
-  };
-  const transformDownshift = _ref2 => {
-    let {
-      getInputProps,
-      getToggleButtonProps,
-      ...downshift
-    } = _ref2;
-    return {
-      getInputProps: p => getInputProps(customGetInputProps(p, downshift)),
-      getToggleButtonProps: p => getToggleButtonProps({
-        'aria-label': undefined,
-        ...p
-      }),
-      ...downshift
-    };
-  };
-  return React__default.createElement(Manager, null, React__default.createElement(Downshift, _extends$5({
-    suppressRefError: true
-    ,
-    isOpen: isOpen,
-    highlightedIndex: highlightedIndex,
-    selectedItem: selectedItem || null
-    ,
-    inputValue: inputValue,
-    onInputValueChange: (inputVal, stateAndHelpers) => {
-      if (onInputValueChange) {
-        if (stateAndHelpers.isOpen) {
-          onInputValueChange(inputVal, stateAndHelpers);
-        } else if (dropdownType === 'multiselect') {
-          onInputValueChange('', stateAndHelpers);
-        }
-      }
-    },
-    onStateChange: (changes, stateAndHelpers) => {
-      if (dropdownType === 'autocomplete' && changes.isOpen === false && !changes.selectedItem) {
-        onSelect && onSelect(selectedItem, stateAndHelpers);
-      }
-      if (Object.prototype.hasOwnProperty.call(changes, 'selectedItem') && changes.selectedItem !== null) {
-        if (selectedItems) {
-          const {
-            itemToString
-          } = stateAndHelpers;
-          const existingItemIndex = selectedItems.findIndex(item => {
-            return itemToString(item) === itemToString(changes.selectedItem);
-          });
-          const updatedSelectedItems = Array.from(selectedItems);
-          if (existingItemIndex === -1) {
-            updatedSelectedItems.splice(updatedSelectedItems.length, 0, changes.selectedItem);
-          } else {
-            updatedSelectedItems.splice(existingItemIndex, 1);
-          }
-          changes.selectedItems = updatedSelectedItems;
-          delete changes.selectedItem;
-          onSelect && onSelect(updatedSelectedItems, stateAndHelpers);
-        } else {
-          onSelect && onSelect(changes.selectedItem, stateAndHelpers);
-        }
-        if (dropdownType === 'multiselect') {
-          stateAndHelpers.setState({
-            inputValue: ''
-          });
-        }
-      }
-      onStateChange && onStateChange(changes, stateAndHelpers);
-    },
-    stateReducer: (_state, changes) => {
-      switch (changes.type) {
-        case Downshift.stateChangeTypes.changeInput:
-          if (changes.inputValue === '' && dropdownType === 'combobox') {
-            return {
-              ...changes,
-              isOpen: false
-            };
-          }
-          return changes;
-        default:
-          return changes;
-      }
-    }
-  }, downshiftProps), downshift => React__default.createElement(DropdownContext.Provider, {
-    value: {
-      hasMenuRef,
-      itemIndexRef,
-      previousItemRef,
-      previousIndexRef,
-      nextItemsHashRef,
-      popperReferenceElementRef,
-      selectedItems,
-      downshift: transformDownshift(downshift),
-      containsMultiselectRef,
-      itemSearchRegistry,
-      setDropdownType
-    }
-  }, children)));
-};
-Dropdown.propTypes = {
-  isOpen: PropTypes.bool,
-  selectedItem: PropTypes.any,
-  selectedItems: PropTypes.arrayOf(PropTypes.any),
-  highlightedIndex: PropTypes.number,
-  inputValue: PropTypes.string,
-  onSelect: PropTypes.func,
-  onStateChange: PropTypes.func,
-  downshiftProps: PropTypes.object
-};
-
-function getPopperPlacement(gardenPlacement) {
-  switch (gardenPlacement) {
-    case 'end':
-      return 'right';
-    case 'end-top':
-      return 'right-start';
-    case 'end-bottom':
-      return 'right-end';
-    case 'start':
-      return 'left';
-    case 'start-top':
-      return 'left-start';
-    case 'start-bottom':
-      return 'left-end';
-    default:
-      return gardenPlacement;
-  }
-}
-function getRtlPopperPlacement(gardenPlacement) {
-  const popperPlacement = getPopperPlacement(gardenPlacement);
-  switch (popperPlacement) {
-    case 'left':
-      return 'right';
-    case 'left-start':
-      return 'right-start';
-    case 'left-end':
-      return 'right-end';
-    case 'top-start':
-      return 'top-end';
-    case 'top-end':
-      return 'top-start';
-    case 'right':
-      return 'left';
-    case 'right-start':
-      return 'left-start';
-    case 'right-end':
-      return 'left-end';
-    case 'bottom-start':
-      return 'bottom-end';
-    case 'bottom-end':
-      return 'bottom-start';
-    default:
-      return popperPlacement;
-  }
-}
-function getArrowPosition(popperPlacement) {
-  const arrowPositionMappings = {
-    auto: 'top',
-    top: 'bottom',
-    'top-start': 'bottom-left',
-    'top-end': 'bottom-right',
-    right: 'left',
-    'right-start': 'left-top',
-    'right-end': 'left-bottom',
-    bottom: 'top',
-    'bottom-start': 'top-left',
-    'bottom-end': 'top-right',
-    left: 'right',
-    'left-start': 'right-top',
-    'left-end': 'right-bottom'
-  };
-  return popperPlacement ? arrowPositionMappings[popperPlacement] : 'top';
-}
-function getMenuPosition(popperPlacement) {
-  if (popperPlacement === 'auto') {
-    return 'bottom';
-  }
-  return popperPlacement ? popperPlacement.split('-')[0] : 'bottom';
-}
-
-const COMPONENT_ID$m = 'dropdowns.menu';
-const StyledMenu = styled.ul.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.6',
-  className: props.isAnimated && 'is-animated'
-})).withConfig({
-  displayName: "StyledMenu",
-  componentId: "sc-lzt5u6-0"
-})(["position:static !important;max-height:", ";overflow-y:auto;", ";", ";"], props => props.maxHeight, props => props.hasArrow && arrowStyles(getArrowPosition(props.placement), {
-  size: `${props.theme.space.base * 2}px`,
-  inset: '2px',
-  animationModifier: props.isAnimated ? '.is-animated' : undefined
-}), props => retrieveComponentStyles(COMPONENT_ID$m, props));
-StyledMenu.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$l = 'dropdowns.menu_wrapper';
-const StyledMenuWrapper = styled.div.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.6',
-  className: props.isAnimated && 'is-animated'
-})).withConfig({
-  displayName: "StyledMenuWrapper",
-  componentId: "sc-u70fn3-0"
-})(["", ";", ";"], props => menuStyles(getMenuPosition(props.placement), {
-  theme: props.theme,
-  hidden: props.isHidden,
-  margin: `${props.theme.space.base * (props.hasArrow ? 2 : 1)}px`,
-  zIndex: props.zIndex,
-  animationModifier: props.isAnimated ? '.is-animated' : undefined
-}), props => retrieveComponentStyles(COMPONENT_ID$l, props));
-StyledMenuWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$k = 'dropdowns.separator';
-const StyledSeparator = styled.li.attrs({
-  'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.6',
-  role: 'separator'
-}).withConfig({
-  displayName: "StyledSeparator",
-  componentId: "sc-oncsf0-0"
-})(["display:block;margin:", "px 0;border-bottom:", ";", ";"], props => props.theme.space.base, props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`, props => retrieveComponentStyles(COMPONENT_ID$k, props));
-StyledSeparator.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$j = 'dropdowns.item';
-const getItemPaddingVertical = props => {
-  if (props.isCompact) {
-    return `${props.theme.space.base}px`;
-  }
-  return `${props.theme.space.base * 2}px`;
-};
-const getColorStyles = props => {
-  let foregroundColor;
-  let backgroundColor;
-  if (props.disabled) {
-    foregroundColor = getColorV8('neutralHue', 400, props.theme);
-  } else if (props.isDanger) {
-    foregroundColor = getColorV8('dangerHue', 600, props.theme);
-    backgroundColor = props.isFocused ? rgba(foregroundColor, 0.08) : 'inherit';
-  } else {
-    foregroundColor = getColorV8('foreground', 600 , props.theme);
-    backgroundColor = props.isFocused ? getColorV8('primaryHue', 600, props.theme, 0.08) : 'inherit';
-  }
-  return css(["background-color:", ";color:", ";& a,& a:hover,& a:focus,& a:active{color:inherit;}"], backgroundColor, foregroundColor);
-};
-const StyledItem = styled.li.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.6',
-  'aria-disabled': props.disabled
-})).withConfig({
-  displayName: "StyledItem",
-  componentId: "sc-x4h8aw-0"
-})(["display:block;position:relative;z-index:0;cursor:", ";padding:", " ", "px;text-decoration:none;line-height:", "px;word-wrap:break-word;user-select:none;&:first-child{margin-top:", "px;}&:last-child{margin-bottom:", "px;}&:focus{outline:none;}& a,& a:hover,& a:focus,& a:active{text-decoration:none;}", ";", ";"], props => props.disabled ? 'default' : 'pointer', props => getItemPaddingVertical(props), props => props.theme.space.base * 9, props => props.theme.space.base * 5, props => props.theme.space.base, props => props.theme.space.base, props => getColorStyles(props), props => retrieveComponentStyles(COMPONENT_ID$j, props));
-StyledItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$i = 'dropdowns.add_item';
-const StyledAddItem = styled(StyledItem).attrs({
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledAddItem",
-  componentId: "sc-mlto71-0"
-})(["color:", ";", ";"], props => !props.disabled && getColorV8('primaryHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$i, props));
-StyledAddItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$h = 'dropdowns.item_meta';
-const StyledItemMeta = styled.span.attrs({
-  'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledItemMeta",
-  componentId: "sc-1m3x8m1-0"
-})(["display:block;line-height:", "px;color:", ";font-size:", ";", ";"], props => props.theme.space.base * (props.isCompact ? 3 : 4), props => getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme), props => props.theme.fontSizes.sm, props => retrieveComponentStyles(COMPONENT_ID$h, props));
-StyledItemMeta.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$g = 'dropdowns.item_icon';
-const getSizeStyles = props => {
-  return css(["width:", ";height:calc(", "px + ", ");"], props.theme.iconSizes.md, props.theme.space.base * 5, math(`${getItemPaddingVertical(props)} * 2`));
-};
-const StyledItemIcon = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledItemIcon",
-  componentId: "sc-pspm80-0"
-})(["display:flex;position:absolute;top:0;", ":", "px;align-items:center;justify-content:center;transition:opacity 0.1s ease-in-out;opacity:", ";color:", ";", ";& > *{width:", ";height:", ";}"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => props.isVisible ? '1' : '0', props => props.isDisabled ? 'inherit' : getColorV8('primaryHue', 600, props.theme), props => getSizeStyles(props), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md);
-StyledItemIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$f = 'dropdowns.next_item';
-const StyledNextItem = styled(StyledItem).attrs({
-  'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledNextItem",
-  componentId: "sc-1wrjlge-0"
-})(["", "{right:", ";left:", ";}", ";"], StyledItemIcon, props => props.theme.rtl ? 'auto' : `${props.theme.space.base * 3}px`, props => props.theme.rtl ? `${props.theme.space.base * 3}px` : 'auto', props => retrieveComponentStyles(COMPONENT_ID$f, props));
-StyledNextItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-var _path$4;
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
-var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
-  })));
-};
-
-const COMPONENT_ID$e = 'dropdowns.next_item_icon';
-const NextIconComponent = _ref => {
-  let {
-    className
-  } = _ref;
-  return React__default.createElement(SvgChevronRightStroke, {
-    "data-garden-id": COMPONENT_ID$e,
-    "data-garden-version": '9.0.0-next.6',
-    className: className
-  });
-};
-const StyledNextIcon = styled(NextIconComponent).withConfig({
-  displayName: "StyledNextIcon",
-  componentId: "sc-1nzkdnq-0"
-})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$e, props));
-StyledNextIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$d = 'dropdowns.previous_item';
-const StyledPreviousItem = styled(StyledItem).attrs({
-  'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledPreviousItem",
-  componentId: "sc-1qv9jwe-0"
-})(["font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$d, props));
-StyledPreviousItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-var _path$3;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
-  })));
-};
-
-const COMPONENT_ID$c = 'dropdowns.previous_item_icon';
-const PreviousIconComponent = _ref => {
-  let {
-    className
-  } = _ref;
-  return React__default.createElement(SvgChevronLeftStroke, {
-    "data-garden-id": COMPONENT_ID$c,
-    "data-garden-version": '9.0.0-next.6',
-    className: className
-  });
-};
-const StyledPreviousIcon = styled(PreviousIconComponent).withConfig({
-  displayName: "StyledPreviousIcon",
-  componentId: "sc-1n1t07s-0"
-})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$c, props));
-StyledPreviousIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$b = 'dropdowns.header_icon';
-const StyledHeaderIcon = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledHeaderIcon",
-  componentId: "sc-ow8s45-0"
-})(["display:flex;position:absolute;top:0;bottom:0;align-items:center;justify-content:center;", ":", "px;color:", ";& > *{width:", ";height:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => getColorV8('neutralHue', 600, props.theme), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID$b, props));
-StyledHeaderIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$a = 'dropdowns.header_item';
-const getHorizontalPadding = props => {
-  if (props.hasIcon) {
-    return undefined;
-  }
-  return `${props.theme.space.base * 3}px`;
-};
-const StyledHeaderItem = styled(StyledItem).attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledHeaderItem",
-  componentId: "sc-1xosinr-0"
-})(["cursor:default;padding-right:", ";padding-left:", ";font-weight:", ";", ";"], props => getHorizontalPadding(props), props => getHorizontalPadding(props), props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$a, props));
-StyledHeaderItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$9 = 'dropdowns.media_body';
-const StyledMediaBody = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledMediaBody",
-  componentId: "sc-133sssc-0"
-})(["display:block;overflow:hidden;padding-", ":", "px;", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledMediaBody.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$8 = 'dropdowns.media_figure';
-const StyledMediaFigure = styled(
-_ref => {
-  let {
-    children,
-    isCompact,
-    theme,
-    ...props
-  } = _ref;
-  return (
-    React__default.cloneElement(Children.only(children), props)
-  );
-}).attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledMediaFigure",
-  componentId: "sc-16vz3xj-0"
-})(["float:", ";margin-top:", "px !important;width:", ";height:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 0.5, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID$8, props));
-StyledMediaFigure.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$7 = 'dropdowns.media_item';
-const StyledMediaItem = styled(StyledItem).attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledMediaItem",
-  componentId: "sc-af4509-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledMediaItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$6 = 'dropdowns.faux_input';
-const StyledFauxInput = styled(FauxInput).attrs(props => ({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.6',
-  mediaLayout: true,
-  theme: props.theme
-})).withConfig({
-  displayName: "StyledFauxInput",
-  componentId: "sc-bk8odf-0"
-})(["cursor:", ";min-width:", "px;", ";"], props => !props.disabled && 'pointer', props => props.theme.space.base * (props.isCompact ? 25 : 36), props => retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledFauxInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$5 = 'dropdowns.input';
-const hiddenStyling = css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
-const StyledInput = styled(Input).attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.6',
-  isBare: true
-}).withConfig({
-  displayName: "StyledInput",
-  componentId: "sc-kykaw8-0"
-})(["", ";", ";"], props => props.isHidden && hiddenStyling, props => retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$4 = 'dropdowns.select';
-const StyledSelect = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledSelect",
-  componentId: "sc-xf4qjv-0"
-})(["flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledSelect.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$3 = 'dropdowns.multiselect_input';
-const visibleStyling = props => {
-  const margin = props.isVisible ? `${props.theme.space.base / 2}px` : 0;
-  const minWidth = props.isVisible ? `${props.theme.space.base * 15}px` : 0;
-  let height = '0';
-  if (props.isVisible) {
-    height = `${props.theme.space.base * (props.isCompact ? 5 : 8)}px`;
-  }
-  return css(["opacity:", ";margin:", ";width:", ";min-width:", ";height:", ";"], !props.isVisible && 0, margin, !props.isVisible && 0, minWidth, height);
-};
-const StyledMultiselectInput = styled(StyledInput).attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.6',
-  isBare: true
-}).withConfig({
-  displayName: "StyledMultiselectInput",
-  componentId: "sc-iiow29-0"
-})(["flex-basis:", "px;flex-grow:1;align-self:center;min-height:0;", ";", ";"], props => props.theme.space.base * 15, props => visibleStyling(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledMultiselectInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$2 = 'dropdowns.multiselect_items_container';
-const sizeStyles = props => {
-  let margin;
-  let padding;
-  if (!props.isBare) {
-    const marginVertical = props.isCompact ? `-${props.theme.space.base * 1.5}px` : `-${props.theme.space.base * 2.5}px`;
-    margin = `${marginVertical} 0`;
-    const paddingVertical = props.isCompact ? '3px' : '1px';
-    const paddingEnd = `${props.theme.space.base}px`;
-    padding = `${paddingVertical} ${props.theme.rtl ? 0 : paddingEnd} ${paddingVertical} ${props.theme.rtl ? paddingEnd : 0}`;
-  }
-  return css(["margin:", ";padding:", ";"], margin, padding);
-};
-const StyledMultiselectItemsContainer = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledMultiselectItemsContainer",
-  componentId: "sc-1dxwjyz-0"
-})(["display:inline-flex;flex-grow:1;flex-wrap:wrap;min-width:0;", ";", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledMultiselectItemsContainer.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
-const StyledMultiselectItemWrapper = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledMultiselectItemWrapper",
-  componentId: "sc-vgr7nd-0"
-})(["display:inline-flex;align-items:center;margin:", "px;max-width:100%;", ";"], props => props.theme.space.base / 2, props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledMultiselectItemWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
-const StyledMultiselectMoreAnchor = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledMultiselectMoreAnchor",
-  componentId: "sc-pkakky-0"
-})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";:hover{text-decoration:", ";}", ";"], props => props.isDisabled ? 'default' : 'pointer', props => props.theme.space.base * (props.isCompact ? 0.75 : 1.5), props => props.isCompact ? '1em' : getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isDisabled ? getColorV8('neutralHue', 400, props.theme) : getColorV8('primaryHue', 600, props.theme), props => !props.isDisabled && 'underline', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledMultiselectMoreAnchor.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const Trigger = _ref => {
-  let {
-    children,
-    refKey,
-    ...triggerProps
-  } = _ref;
-  const {
-    hasMenuRef,
-    itemSearchRegistry,
-    downshift: {
-      getRootProps,
-      getToggleButtonProps,
-      getInputProps,
-      isOpen,
-      highlightedIndex,
-      selectItemAtIndex,
-      setHighlightedIndex
-    }
-  } = useDropdownContext();
-  const hiddenInputRef = useRef(null);
-  const triggerRef = useRef(null);
-  const previousIsOpenRef = useRef(undefined);
-  const [searchString, setSearchString] = useState('');
-  const searchTimeoutRef = useRef();
-  const currentSearchIndexRef = useRef(0);
-  useEffect(() => {
-    if (hiddenInputRef.current && isOpen && !previousIsOpenRef.current) {
-      hiddenInputRef.current.focus();
-    }
-    if (triggerRef.current && !isOpen && previousIsOpenRef.current) {
-      triggerRef.current.focus();
-    }
-    previousIsOpenRef.current = isOpen;
-  }, [isOpen, hasMenuRef]);
-  useEffect(() => {
-    if (hasMenuRef.current === false) {
-      hasMenuRef.current = true;
-    }
-  }, [hasMenuRef]);
-  useEffect(() => {
-    if (searchTimeoutRef.current) {
-      clearTimeout(searchTimeoutRef.current);
-    }
-    searchTimeoutRef.current = window.setTimeout(() => {
-      setSearchString('');
-    }, 500);
-    return () => {
-      clearTimeout(searchTimeoutRef.current);
-    };
-  }, [searchString]);
-  const searchItems = useCallback((searchValue, startIndex, endIndex) => {
-    for (let index = startIndex; index < endIndex; index++) {
-      const itemTextValue = itemSearchRegistry.current[index];
-      if (itemTextValue && itemTextValue.toUpperCase().indexOf(searchValue.toUpperCase()) === 0) {
-        return index;
-      }
-    }
-    return undefined;
-  }, [itemSearchRegistry]);
-  const onInputKeyDown = useCallback(e => {
-    if (e.keyCode === KEY_CODES.SPACE) {
-      if (searchString) {
-        e.preventDefault();
-        e.stopPropagation();
-      } else if (highlightedIndex !== null && highlightedIndex !== undefined) {
-        e.preventDefault();
-        e.stopPropagation();
-        selectItemAtIndex(highlightedIndex);
-      }
-    }
-    if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 65 || e.keyCode > 90) && e.keyCode !== KEY_CODES.SPACE) {
-      return;
-    }
-    const character = String.fromCharCode(e.which || e.keyCode);
-    if (!character || character.length === 0) {
-      return;
-    }
-    if (!searchString) {
-      if (highlightedIndex === null || highlightedIndex === undefined) {
-        currentSearchIndexRef.current = -1;
-      } else {
-        currentSearchIndexRef.current = highlightedIndex;
-      }
-    }
-    const newSearchString = searchString + character;
-    setSearchString(newSearchString);
-    let matchingIndex = searchItems(newSearchString, currentSearchIndexRef.current + 1, itemSearchRegistry.current.length);
-    if (matchingIndex === undefined) {
-      matchingIndex = searchItems(newSearchString, 0, currentSearchIndexRef.current);
-    }
-    if (matchingIndex !== undefined) {
-      setHighlightedIndex(matchingIndex);
-    }
-  }, [searchString, searchItems, itemSearchRegistry, highlightedIndex, selectItemAtIndex, setHighlightedIndex]);
-  const renderChildren = popperRef => {
-    const {
-      ref: rootPropsRefCallback,
-      ...rootProps
-    } = getRootProps();
-    const listboxToggleProps = getToggleButtonProps({
-      ...rootProps,
-      role: null,
-      'aria-labelledby': undefined,
-      ...triggerProps,
-      ...children.props
-    });
-    const menuToggleProps = {
-      ...listboxToggleProps,
-      'aria-haspopup': 'true',
-      'aria-controls': listboxToggleProps['aria-owns'],
-      'aria-owns': null
-    };
-    const toggleButtonProps = hasMenuRef.current ? menuToggleProps : listboxToggleProps;
-    return React__default.cloneElement(React__default.Children.only(children), {
-      ...toggleButtonProps,
-      [refKey]: childRef => {
-        popperRef(childRef);
-        triggerRef.current = childRef;
-        rootPropsRefCallback(childRef);
-      }
-    });
-  };
-  return React__default.createElement(Reference, null, _ref2 => {
-    let {
-      ref: popperReference
-    } = _ref2;
-    return React__default.createElement(React__default.Fragment, null, renderChildren(popperReference), React__default.createElement(StyledInput, getInputProps({
-      readOnly: true,
-      isHidden: true,
-      tabIndex: -1,
-      ref: hiddenInputRef,
-      value: '',
-      onClick: e => {
-        if (isOpen) {
-          e.nativeEvent.preventDownshiftDefault = true;
-        }
-      },
-      onKeyDown: onInputKeyDown
-    })));
-  });
-};
-Trigger.propTypes = {
-  children: PropTypes.any,
-  refKey: PropTypes.string
-};
-Trigger.defaultProps = {
-  refKey: 'ref'
-};
-
-var _path$2;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
-  })));
-};
-
-const FieldContext = React__default.createContext(undefined);
-const useFieldContext = () => {
-  const fieldContext = useContext(FieldContext);
-  if (!fieldContext) {
-    throw new Error('This component must be rendered within a `Field` component.');
-  }
-  return fieldContext;
-};
-
-const Autocomplete = forwardRef((_ref, ref) => {
-  let {
-    children,
-    inputRef: controlledInputRef,
-    start,
-    ...props
-  } = _ref;
-  const {
-    popperReferenceElementRef,
-    downshift: {
-      getToggleButtonProps,
-      getInputProps,
-      getRootProps,
-      isOpen
-    },
-    setDropdownType
-  } = useDropdownContext();
-  const {
-    isLabelHovered
-  } = useFieldContext();
-  const inputRef = useRef();
-  const triggerRef = useRef();
-  const previousIsOpenRef = useRef(isOpen);
-  const [isHovered, setIsHovered] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  useEffect(() => {
-    if (inputRef.current && isOpen !== previousIsOpenRef.current) {
-      inputRef.current.focus();
-    }
-    previousIsOpenRef.current = isOpen;
-  }, [inputRef, isOpen]);
-  const {
-    type,
-    onKeyDown,
-    ...selectProps
-  } = getToggleButtonProps(getRootProps({
-    role: null,
-    ...props,
-    onKeyDown: e => {
-      if (isOpen) {
-        e.nativeEvent.preventDownshiftDefault = true;
-      }
-    },
-    onMouseEnter: composeEventHandlers(props.onMouseEnter, () => setIsHovered(true)),
-    onMouseLeave: composeEventHandlers(props.onMouseLeave, () => setIsHovered(false))
-  }));
-  const onSelectKeyDown = composeEventHandlers(props.onKeyDown, onKeyDown);
-  const isContainerHovered = isLabelHovered && !isOpen;
-  const isContainerFocused = isOpen || isFocused;
-  useEffect(() => {
-    setDropdownType('autocomplete');
-  }, [setDropdownType]);
-  return React__default.createElement(Reference, null, _ref2 => {
-    let {
-      ref: popperReference
-    } = _ref2;
-    return React__default.createElement(StyledFauxInput, _extends$5({
-      isHovered: isContainerHovered,
-      isFocused: isContainerFocused,
-      tabIndex: null,
-      onKeyDown: onSelectKeyDown
-    }, selectProps, {
-      ref: selectRef => {
-        popperReference(selectRef);
-        mergeRefs([triggerRef, ref])(selectRef);
-        popperReferenceElementRef.current = selectRef;
-      }
-    }), start && React__default.createElement(StyledFauxInput.StartIcon, {
-      isHovered: isHovered || isLabelHovered && !isOpen,
-      isFocused: isContainerFocused,
-      isDisabled: props.disabled
-    }, start), !isOpen && React__default.createElement(StyledSelect, null, children), React__default.createElement(StyledInput, getInputProps({
-      isHidden: !isOpen,
-      disabled: props.disabled,
-      onFocus: () => {
-        setIsFocused(true);
-      },
-      onBlur: () => {
-        setIsFocused(false);
-      },
-      onClick: e => {
-        if (isOpen) {
-          e.nativeEvent.preventDownshiftDefault = true;
-        }
-      },
-      role: 'combobox',
-      ref: mergeRefs([inputRef, controlledInputRef || null])
-    })), !props.isBare && React__default.createElement(StyledFauxInput.EndIcon, {
-      isHovered: isHovered || isLabelHovered && !isOpen,
-      isFocused: isContainerFocused,
-      isDisabled: props.disabled,
-      isRotated: isOpen
-    }, React__default.createElement(SvgChevronDownStroke, null)));
-  });
-});
-Autocomplete.displayName = 'Autocomplete';
-Autocomplete.propTypes = {
-  isCompact: PropTypes.bool,
-  isBare: PropTypes.bool,
-  disabled: PropTypes.bool,
-  focusInset: PropTypes.bool,
-  validation: PropTypes.oneOf(VALIDATION)
-};
-
-const Combobox = forwardRef((_ref, ref) => {
-  let {
-    isCompact,
-    isBare,
-    disabled,
-    focusInset,
-    placeholder,
-    validation,
-    inputRef: inputRefProp = null,
-    start,
-    end,
-    ...props
-  } = _ref;
-  const {
-    popperReferenceElementRef,
-    downshift: {
-      getToggleButtonProps,
-      getInputProps,
-      getRootProps,
-      isOpen
-    },
-    setDropdownType
-  } = useDropdownContext();
-  const wrapperRef = useRef();
-  const inputRef = useRef();
-  const isOpenRef = useRef(isOpen);
-  const wrapperProps = getToggleButtonProps(getRootProps({
-    role: null,
-    type: null,
-    onClick: event => {
-      event.nativeEvent.preventDownshiftDefault = true;
-    },
-    ...props,
-    onKeyDown: event => {
-      event.nativeEvent.preventDownshiftDefault = true;
-    }
-  }));
-  const inputProps = getInputProps({
-    isCompact,
-    isBare,
-    disabled,
-    focusInset,
-    placeholder,
-    validation,
-    start,
-    end,
-    role: 'combobox',
-    onKeyDown: event => {
-      if (event.keyCode === KEY_CODES.SPACE || !isOpen && [KEY_CODES.DOWN, KEY_CODES.UP].includes(event.keyCode)) {
-        event.nativeEvent.preventDownshiftDefault = true;
-      }
-    },
-    onClick: event => {
-      event.nativeEvent.preventDownshiftDefault = true;
-    }
-  });
-  useEffect(() => {
-    if (inputRef.current && isOpen !== isOpenRef.current) {
-      inputRef.current.focus();
-    }
-    isOpenRef.current = isOpen;
-  }, [inputRef, isOpen]);
-  useEffect(() => {
-    setDropdownType('combobox');
-  }, [setDropdownType]);
-  return React__default.createElement(Reference, null, _ref2 => {
-    let {
-      ref: popperReference
-    } = _ref2;
-    const wrapperRefProp = element => {
-      popperReference(element);
-      mergeRefs([wrapperRef, ref])(element);
-      popperReferenceElementRef.current = element;
-    };
-    return React__default.createElement(MediaInput, _extends$5({}, inputProps, {
-      wrapperProps: wrapperProps,
-      wrapperRef: wrapperRefProp,
-      ref: mergeRefs([inputRef, inputRefProp])
-    }));
-  });
-});
-Combobox.displayName = 'Combobox';
-Combobox.propTypes = {
-  isCompact: PropTypes.bool,
-  isBare: PropTypes.bool,
-  disabled: PropTypes.bool,
-  focusInset: PropTypes.bool,
-  placeholder: PropTypes.string,
-  validation: PropTypes.oneOf(VALIDATION)
-};
-
-const Multiselect = React__default.forwardRef((_ref, ref) => {
-  let {
-    renderItem,
-    placeholder,
-    maxItems,
-    renderShowMore,
-    inputRef: externalInputRef = null,
-    start,
-    onKeyDown,
-    ...props
-  } = _ref;
-  const {
-    popperReferenceElementRef,
-    selectedItems = [],
-    containsMultiselectRef,
-    previousIndexRef,
-    downshift: {
-      getToggleButtonProps,
-      getRootProps,
-      getInputProps,
-      isOpen,
-      closeMenu,
-      inputValue,
-      setState: setDownshiftState,
-      itemToString
-    },
-    setDropdownType
-  } = useDropdownContext();
-  const {
-    isLabelHovered
-  } = useFieldContext();
-  const inputRef = useRef();
-  const triggerRef = useRef();
-  const blurTimeoutRef = useRef();
-  const previousIsOpenRef = useRef(undefined);
-  const previousIsFocusedRef = useRef(undefined);
-  const [isHovered, setIsHovered] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  const [focusedItem, setFocusedItem] = useState(undefined);
-  const themeContext = useContext(ThemeContext);
-  const environment = useDocument(themeContext);
-  const {
-    getContainerProps,
-    getItemProps
-  } = useSelection({
-    rtl: themeContext.rtl,
-    focusedItem,
-    selectedItem: undefined,
-    onFocus: item => {
-      setFocusedItem(item);
-    }
-  });
-  useEffect(() => {
-    containsMultiselectRef.current = true;
-    const tempRef = blurTimeoutRef;
-    return () => {
-      clearTimeout(tempRef.current);
-    };
-  }, []);
-  useEffect(() => {
-    if (inputRef.current) {
-      if (isOpen && !previousIsOpenRef.current) {
-        inputRef.current.focus();
-      } else if (isFocused && !previousIsFocusedRef.current && focusedItem === undefined) {
-        inputRef.current.focus();
-      }
-    }
-    previousIsOpenRef.current = isOpen;
-    previousIsFocusedRef.current = isFocused;
-  }, [isOpen, inputRef, isFocused, focusedItem]);
-  useEffect(() => {
-    if (focusedItem !== undefined && isOpen) {
-      closeMenu();
-    }
-  }, [focusedItem, isOpen, closeMenu]);
-  const {
-    type,
-    ...selectProps
-  } = getToggleButtonProps(getRootProps({
-    tabIndex: props.disabled ? undefined : -1,
-    onKeyDown: composeEventHandlers(onKeyDown, e => {
-      if (isOpen) {
-        e.nativeEvent.preventDownshiftDefault = true;
-      } else if (!inputValue && e.keyCode === KEY_CODES.HOME) {
-        setFocusedItem(selectedItems[0]);
-        e.preventDefault();
-      }
-    }),
-    onFocus: () => {
-      setIsFocused(true);
-    },
-    onBlur: e => {
-      const currentTarget = e.currentTarget;
-      blurTimeoutRef.current = setTimeout(() => {
-        if (environment && !currentTarget.contains(environment.activeElement)) {
-          setIsFocused(false);
-        }
-      }, 0);
-    },
-    onMouseEnter: composeEventHandlers(props.onMouseEnter, () => setIsHovered(true)),
-    onMouseLeave: composeEventHandlers(props.onMouseLeave, () => setIsHovered(false)),
-    role: null,
-    ...props
-  }));
-  const renderSelectableItem = useCallback((item, index) => {
-    const removeValue = () => {
-      setDownshiftState({
-        type: REMOVE_ITEM_STATE_TYPE,
-        selectedItem: item
-      });
-      inputRef.current && inputRef.current.focus();
-    };
-    const renderedItem = renderItem({
-      value: item,
-      removeValue
-    });
-    const focusRef = React__default.createRef();
-    const clonedChild = React__default.cloneElement(renderedItem, {
-      ...getItemProps({
-        item,
-        focusRef,
-        onKeyDown: e => {
-          if (e.keyCode === KEY_CODES.DELETE || e.keyCode === KEY_CODES.BACKSPACE) {
-            e.preventDefault();
-            removeValue();
-          }
-          if (e.keyCode === KEY_CODES.END && !inputValue) {
-            inputRef.current && inputRef.current.focus();
-            e.preventDefault();
-          }
-          if (themeContext.rtl) {
-            if (e.keyCode === KEY_CODES.RIGHT && index === 0) {
-              e.preventDefault();
-            }
-            if (e.keyCode === KEY_CODES.LEFT && index === selectedItems.length - 1) {
-              e.preventDefault();
-              inputRef.current && inputRef.current.focus();
-            }
-          } else {
-            if (e.keyCode === KEY_CODES.LEFT && index === 0) {
-              e.preventDefault();
-            }
-            if (e.keyCode === KEY_CODES.RIGHT && index === selectedItems.length - 1) {
-              e.preventDefault();
-              inputRef.current && inputRef.current.focus();
-            }
-          }
-        },
-        onClick: e => {
-          e.nativeEvent.preventDownshiftDefault = true;
-        },
-        tabIndex: -1
-      }),
-      size: props.isCompact ? 'medium' : 'large'
-    });
-    const key = `${itemToString(item)}-${index}`;
-    return React__default.createElement(StyledMultiselectItemWrapper, {
-      key: key
-    }, clonedChild);
-  }, [getItemProps, inputValue, renderItem, setDownshiftState, itemToString, selectedItems, props, inputRef, themeContext.rtl]);
-  const items = useMemo(() => {
-    const itemValues = selectedItems || [];
-    const output = [];
-    for (let x = 0; x < itemValues.length; x++) {
-      const item = itemValues[x];
-      if (x < maxItems) {
-        if (props.disabled) {
-          const renderedItem = React__default.cloneElement(renderItem({
-            value: item,
-            removeValue: () => {
-              return undefined;
-            }
-          }), {
-            size: props.isCompact ? 'medium' : 'large'
-          });
-          output.push( React__default.createElement(StyledMultiselectItemWrapper, {
-            key: x
-          }, renderedItem));
-        } else {
-          output.push(renderSelectableItem(item, x));
-        }
-      } else if (!isFocused && !inputValue || props.disabled) {
-        output.push( React__default.createElement(StyledMultiselectItemWrapper, {
-          key: "more-anchor"
-        }, React__default.createElement(StyledMultiselectMoreAnchor, {
-          isCompact: props.isCompact,
-          isDisabled: props.disabled
-        }, renderShowMore ? renderShowMore(itemValues.length - x) : `+ ${itemValues.length - x} more`)));
-        break;
-      } else {
-        output.push(renderSelectableItem(item, x));
-      }
-    }
-    return output;
-  }, [isFocused, props.disabled, renderSelectableItem, selectedItems, renderItem, inputValue, maxItems, renderShowMore, props.isCompact]);
-  const isContainerHovered = isLabelHovered && !isOpen;
-  const isContainerFocused = isOpen || isFocused;
-  useEffect(() => {
-    setDropdownType('multiselect');
-  }, [setDropdownType]);
-  return React__default.createElement(Reference, null, _ref2 => {
-    let {
-      ref: popperReference
-    } = _ref2;
-    return React__default.createElement(StyledFauxInput, getContainerProps({
-      ...selectProps,
-      isHovered: isContainerHovered,
-      isFocused: isContainerFocused,
-      ref: selectRef => {
-        popperReference(selectRef);
-        mergeRefs([triggerRef, popperReferenceElementRef, ref])(selectRef);
-      }
-    }), start && React__default.createElement(StyledFauxInput.StartIcon, {
-      isHovered: isHovered || isLabelHovered && !isOpen,
-      isFocused: isContainerFocused,
-      isDisabled: props.disabled
-    }, start), React__default.createElement(StyledMultiselectItemsContainer, {
-      isBare: props.isBare,
-      isCompact: props.isCompact
-    }, items, React__default.createElement(StyledMultiselectInput, getInputProps({
-      disabled: props.disabled,
-      onFocus: () => {
-        setFocusedItem(undefined);
-      },
-      onClick: e => {
-        if (inputValue && inputValue.length > 0 && isOpen) {
-          e.nativeEvent.preventDownshiftDefault = true;
-        }
-      },
-      onKeyDown: e => {
-        if (!inputValue) {
-          if (themeContext.rtl && e.keyCode === KEY_CODES.RIGHT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
-            setFocusedItem(selectedItems[selectedItems.length - 1]);
-          } else if (!themeContext.rtl && e.keyCode === KEY_CODES.LEFT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
-            setFocusedItem(selectedItems[selectedItems.length - 1]);
-          } else if (e.keyCode === KEY_CODES.BACKSPACE && selectedItems.length > 0) {
-            setDownshiftState({
-              type: REMOVE_ITEM_STATE_TYPE,
-              selectedItem: selectedItems[selectedItems.length - 1]
-            });
-            e.nativeEvent.preventDownshiftDefault = true;
-            e.preventDefault();
-            e.stopPropagation();
-          }
-        }
-      },
-      isVisible: isFocused || inputValue || selectedItems.length === 0,
-      isCompact: props.isCompact,
-      role: 'combobox',
-      ref: mergeRefs([inputRef, externalInputRef]),
-      placeholder: selectedItems.length === 0 ? placeholder : undefined
-    }))), !props.isBare && React__default.createElement(StyledFauxInput.EndIcon, {
-      isHovered: isHovered || isLabelHovered && !isOpen,
-      isFocused: isContainerFocused,
-      isDisabled: props.disabled,
-      isRotated: isOpen
-    }, React__default.createElement(SvgChevronDownStroke, null)));
-  });
-});
-Multiselect.propTypes = {
-  isCompact: PropTypes.bool,
-  isBare: PropTypes.bool,
-  disabled: PropTypes.bool,
-  focusInset: PropTypes.bool,
-  renderItem: PropTypes.func.isRequired,
-  maxItems: PropTypes.number,
-  validation: PropTypes.oneOf(['success', 'warning', 'error'])
-};
-Multiselect.defaultProps = {
-  maxItems: 4
-};
-Multiselect.displayName = 'Multiselect';
-
-const Select = React__default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    start,
-    ...props
-  } = _ref;
-  const {
-    popperReferenceElementRef,
-    itemSearchRegistry,
-    downshift: {
-      getToggleButtonProps,
-      getInputProps,
-      isOpen,
-      highlightedIndex,
-      setHighlightedIndex,
-      selectItemAtIndex,
-      closeMenu
-    }
-  } = useDropdownContext();
-  const {
-    isLabelHovered
-  } = useFieldContext();
-  const [isHovered, setIsHovered] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  const hiddenInputRef = useRef();
-  const triggerRef = useRef();
-  const previousIsOpenRef = useRef(undefined);
-  const [searchString, setSearchString] = useState('');
-  const searchTimeoutRef = useRef();
-  const currentSearchIndexRef = useRef(0);
-  useEffect(() => {
-    if (hiddenInputRef.current && isOpen && !previousIsOpenRef.current) {
-      hiddenInputRef.current.focus();
-    }
-    if (triggerRef.current && !isOpen && previousIsOpenRef.current) {
-      triggerRef.current.focus();
-    }
-    previousIsOpenRef.current = isOpen;
-  }, [isOpen, triggerRef]);
-  useEffect(() => {
-    if (searchTimeoutRef.current) {
-      clearTimeout(searchTimeoutRef.current);
-    }
-    searchTimeoutRef.current = window.setTimeout(() => {
-      setSearchString('');
-    }, 500);
-    return () => {
-      clearTimeout(searchTimeoutRef.current);
-    };
-  }, [searchString]);
-  const searchItems = useCallback((searchValue, startIndex, endIndex) => {
-    for (let index = startIndex; index < endIndex; index++) {
-      const itemTextValue = itemSearchRegistry.current[index];
-      if (itemTextValue && itemTextValue.toUpperCase().indexOf(searchValue.toUpperCase()) === 0) {
-        return index;
-      }
-    }
-    return undefined;
-  }, [itemSearchRegistry]);
-  const onInputKeyDown = useCallback(e => {
-    if (e.keyCode === KEY_CODES.SPACE) {
-      if (searchString) {
-        e.preventDefault();
-        e.stopPropagation();
-      } else if (highlightedIndex !== null && highlightedIndex !== undefined) {
-        e.preventDefault();
-        e.stopPropagation();
-        selectItemAtIndex(highlightedIndex);
-        closeMenu();
-      }
-    }
-    if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 65 || e.keyCode > 90) && e.keyCode !== KEY_CODES.SPACE) {
-      return;
-    }
-    const character = String.fromCharCode(e.which || e.keyCode);
-    if (!character || character.length === 0) {
-      return;
-    }
-    if (!searchString) {
-      if (highlightedIndex === null || highlightedIndex === undefined) {
-        currentSearchIndexRef.current = -1;
-      } else {
-        currentSearchIndexRef.current = highlightedIndex;
-      }
-    }
-    const newSearchString = searchString + character;
-    setSearchString(newSearchString);
-    let matchingIndex = searchItems(newSearchString, currentSearchIndexRef.current + 1, itemSearchRegistry.current.length);
-    if (matchingIndex === undefined) {
-      matchingIndex = searchItems(newSearchString, 0, currentSearchIndexRef.current);
-    }
-    if (matchingIndex !== undefined) {
-      setHighlightedIndex(matchingIndex);
-    }
-  }, [searchString, searchItems, itemSearchRegistry, highlightedIndex, selectItemAtIndex, closeMenu, setHighlightedIndex]);
-  const {
-    type,
-    ...selectProps
-  } = getToggleButtonProps({
-    tabIndex: props.disabled ? undefined : 0,
-    onMouseEnter: composeEventHandlers(props.onMouseEnter, () => setIsHovered(true)),
-    onMouseLeave: composeEventHandlers(props.onMouseLeave, () => setIsHovered(false)),
-    onFocus: composeEventHandlers(props.onFocus, () => setIsFocused(true)),
-    onBlur: composeEventHandlers(props.onBlur, () => setIsFocused(false)),
-    ...props
-  });
-  const isContainerHovered = isLabelHovered && !isOpen;
-  const isContainerFocused = isFocused || isOpen;
-  return React__default.createElement(Reference, null, _ref2 => {
-    let {
-      ref: popperReference
-    } = _ref2;
-    return React__default.createElement(StyledFauxInput, _extends$5({
-      isHovered: isContainerHovered,
-      isFocused: isContainerFocused
-    }, selectProps, {
-      role: "none",
-      ref: selectRef => {
-        popperReference(selectRef);
-        mergeRefs([triggerRef, ref, popperReferenceElementRef])(selectRef);
-      }
-    }), start && React__default.createElement(StyledFauxInput.StartIcon, {
-      isHovered: isHovered || isLabelHovered && !isOpen,
-      isFocused: isContainerFocused,
-      isDisabled: props.disabled
-    }, start), React__default.createElement(StyledSelect, null, children), React__default.createElement(StyledInput, getInputProps({
-      readOnly: true,
-      isHidden: true,
-      tabIndex: -1,
-      ref: hiddenInputRef,
-      value: '',
-      onClick: e => {
-        if (isOpen) {
-          e.nativeEvent.preventDownshiftDefault = true;
-        }
-      },
-      onKeyDown: onInputKeyDown
-    })), !props.isBare && React__default.createElement(StyledFauxInput.EndIcon, {
-      isHovered: isHovered || isLabelHovered && !isOpen,
-      isFocused: isContainerFocused,
-      isDisabled: props.disabled,
-      isRotated: isOpen
-    }, React__default.createElement(SvgChevronDownStroke, null)));
-  });
-});
-Select.displayName = 'Select';
-Select.propTypes = {
-  isCompact: PropTypes.bool,
-  isBare: PropTypes.bool,
-  disabled: PropTypes.bool,
-  focusInset: PropTypes.bool,
-  validation: PropTypes.oneOf(VALIDATION),
-  start: PropTypes.any
-};
-
-const Field = forwardRef((props, fieldRef) => {
-  const {
-    downshift: {
-      getRootProps
-    }
-  } = useDropdownContext();
-  const [isLabelHovered, setIsLabelHovered] = useState(false);
-  const {
-    ref
-  } = getRootProps();
-  const value = useMemo(() => ({
-    isLabelHovered,
-    setIsLabelHovered
-  }), [isLabelHovered, setIsLabelHovered]);
-  return React__default.createElement(FieldContext.Provider, {
-    value: value
-  }, React__default.createElement(Field$1, _extends$5({
-    ref: mergeRefs([ref, fieldRef])
-  }, props)));
-});
-Field.displayName = 'Field';
-
-const Hint = React__default.forwardRef((props, ref) => React__default.createElement(Hint$1, _extends$5({
-  ref: ref
-}, props)));
-Hint.displayName = 'Hint';
-
-const Label = React__default.forwardRef((_ref, ref) => {
-  let {
-    onMouseEnter,
-    onMouseLeave,
-    ...other
-  } = _ref;
-  const {
-    downshift: {
-      getLabelProps
-    }
-  } = useDropdownContext();
-  const {
-    setIsLabelHovered
-  } = useFieldContext();
-  const labelProps = getLabelProps({
-    onMouseEnter: composeEventHandlers(onMouseEnter, () => {
-      setIsLabelHovered(true);
-    }),
-    onMouseLeave: composeEventHandlers(onMouseLeave, () => {
-      setIsLabelHovered(false);
-    }),
-    ...other
-  });
-  return React__default.createElement(Label$1, _extends$5({
-    ref: ref
-  }, labelProps));
-});
-Label.displayName = 'Label';
-Label.propTypes = {
-  isRegular: PropTypes.bool
-};
-
-const Message = React__default.forwardRef((props, ref) => React__default.createElement(Message$1, _extends$5({
-  ref: ref
-}, props)));
-Message.displayName = 'Message';
-Message.propTypes = {
-  validation: PropTypes.oneOf(VALIDATION)
-};
-
-const SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
-const PLACEMENT = [...SHARED_PLACEMENT, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
-
-const MenuContext = React__default.createContext(undefined);
-const useMenuContext = () => {
-  const menuContext = useContext(MenuContext);
-  if (!menuContext) {
-    throw new Error('This component must be rendered within a `Menu` component.');
-  }
-  return menuContext;
-};
-
-const Menu = forwardRef((props, menuRef) => {
-  const {
-    placement,
-    popperModifiers,
-    eventsEnabled,
-    isAnimated,
-    maxHeight,
-    style: menuStyle,
-    zIndex,
-    isCompact,
-    children,
-    appendToNode,
-    ...otherProps
-  } = props;
-  const {
-    hasMenuRef,
-    itemIndexRef,
-    previousIndexRef,
-    nextItemsHashRef,
-    popperReferenceElementRef,
-    itemSearchRegistry,
-    downshift: {
-      isOpen,
-      getMenuProps
-    }
-  } = useDropdownContext();
-  const scheduleUpdateRef = useRef(undefined);
-  useEffect(() => {
-    if (scheduleUpdateRef.current && isOpen) {
-      scheduleUpdateRef.current();
-    }
-  });
-  const [isVisible, setIsVisible] = useState(isOpen);
-  useEffect(() => {
-    let timeout;
-    if (isOpen) {
-      setIsVisible(true);
-    } else if (isAnimated) {
-      timeout = setTimeout(() => setIsVisible(false), 200);
-    } else {
-      setIsVisible(false);
-    }
-    return () => clearTimeout(timeout);
-  }, [isOpen, isAnimated]);
-  const themeContext = useContext(ThemeContext);
-  itemIndexRef.current = 0;
-  nextItemsHashRef.current = {};
-  previousIndexRef.current = undefined;
-  itemSearchRegistry.current = [];
-  const popperPlacement = themeContext.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
-  return (
-    React__default.createElement(MenuContext.Provider, {
-      value: {
-        itemIndexRef,
-        isCompact
-      }
-    }, React__default.createElement(Popper, {
-      placement: popperPlacement,
-      modifiers: popperModifiers
-      ,
-      eventsEnabled: isOpen && eventsEnabled
-    }, _ref => {
-      let {
-        ref,
-        style,
-        scheduleUpdate,
-        placement: currentPlacement
-      } = _ref;
-      let computedStyle = menuStyle;
-      scheduleUpdateRef.current = scheduleUpdate;
-      if ((isOpen || isVisible) && popperReferenceElementRef.current && popperReferenceElementRef.current.getBoundingClientRect) {
-        computedStyle = {
-          width: popperReferenceElementRef.current.getBoundingClientRect().width,
-          ...menuStyle
-        };
-      }
-      const menuProps = getMenuProps({
-        role: hasMenuRef.current ? 'menu' : 'listbox',
-        placement: currentPlacement,
-        isAnimated: isAnimated && (isOpen || isVisible),
-        ...otherProps
-      });
-      const menu = React__default.createElement(StyledMenuWrapper, {
-        ref: isOpen ? ref : undefined,
-        hasArrow: menuProps.hasArrow,
-        placement: menuProps.placement,
-        style: style,
-        isHidden: !isOpen,
-        isAnimated: menuProps.isAnimated,
-        zIndex: zIndex
-      }, React__default.createElement(StyledMenu, _extends$5({
-        ref: menuRef,
-        isCompact: isCompact,
-        maxHeight: maxHeight,
-        style: computedStyle
-      }, menuProps), (isOpen || isVisible) && children));
-      return appendToNode ? createPortal(menu, appendToNode) : menu;
-    }))
-  );
-});
-Menu.displayName = 'Menu';
-Menu.propTypes = {
-  popperModifiers: PropTypes.any,
-  eventsEnabled: PropTypes.bool,
-  zIndex: PropTypes.number,
-  style: PropTypes.object,
-  placement: PropTypes.oneOf(PLACEMENT),
-  isAnimated: PropTypes.bool,
-  isCompact: PropTypes.bool,
-  hasArrow: PropTypes.bool,
-  maxHeight: PropTypes.string
-};
-Menu.defaultProps = {
-  placement: 'bottom-start',
-  isAnimated: true,
-  eventsEnabled: true,
-  maxHeight: '400px',
-  zIndex: 1000
-};
-
-const Separator = React__default.forwardRef((props, ref) => React__default.createElement(StyledSeparator, _extends$5({
-  ref: ref
-}, props)));
-Separator.displayName = 'Separator';
-
-var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-var SvgPlusStroke = function SvgPlusStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M7.5 2.5v12m6-6h-12"
-  })));
-};
-
-var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M1 9l4 4L15 3"
-  })));
-};
-
-const ItemContext = React__default.createContext(undefined);
-const useItemContext = () => {
-  const context = useContext(ItemContext);
-  if (!context) {
-    throw new Error('This component must be rendered within an `Item` component.');
-  }
-  return context;
-};
-
-const Item = React__default.forwardRef((_ref, forwardRef) => {
-  let {
-    value,
-    disabled,
-    isDanger,
-    component = StyledItem,
-    hasIcon,
-    children,
-    ...props
-  } = _ref;
-  const {
-    selectedItems,
-    hasMenuRef,
-    itemSearchRegistry,
-    downshift: {
-      isOpen,
-      selectedItem,
-      highlightedIndex,
-      getItemProps,
-      setHighlightedIndex,
-      itemToString
-    }
-  } = useDropdownContext();
-  const {
-    itemIndexRef,
-    isCompact
-  } = useMenuContext();
-  const itemRef = useRef();
-  const Component = component;
-  if ((value === undefined || value === null) && !disabled) {
-    throw new Error('All Item components require a `value` prop');
-  }
-  const currentIndex = itemIndexRef.current;
-  const isFocused = highlightedIndex === currentIndex;
-  let isSelected;
-  useEffect(() => {
-    if (!disabled && itemRef.current) {
-      const itemTextValue = itemRef.current.innerText;
-      if (itemTextValue) {
-        itemSearchRegistry.current[currentIndex] = itemTextValue;
-      }
-    }
-  });
-  if (value) {
-    if (selectedItems) {
-      isSelected = selectedItems.some(item => {
-        return itemToString(item) === itemToString(value);
-      });
-    } else {
-      isSelected = itemToString(selectedItem) === itemToString(value);
-    }
-  } else {
-    isSelected = false;
-  }
-  useEffect(() => {
-    if (isOpen && !disabled && !selectedItems && isSelected) {
-      setHighlightedIndex(currentIndex);
-    }
-  }, [currentIndex, disabled, isOpen, isSelected, selectedItems, setHighlightedIndex]);
-  const contextValue = useMemo(() => ({
-    isDisabled: disabled
-  }), [disabled]);
-  const ref = mergeRefs([itemRef, forwardRef]);
-  if (disabled) {
-    return React__default.createElement(ItemContext.Provider, {
-      value: contextValue
-    }, React__default.createElement(Component, _extends$5({
-      ref: ref,
-      disabled: disabled,
-      isDanger: isDanger,
-      isCompact: isCompact
-    }, props), isSelected && !hasIcon && React__default.createElement(StyledItemIcon, {
-      isCompact: isCompact,
-      isVisible: isSelected,
-      isDisabled: disabled
-    }, React__default.createElement(SvgCheckLgStroke, null)), children));
-  }
-  itemIndexRef.current++;
-  return React__default.createElement(ItemContext.Provider, {
-    value: contextValue
-  }, React__default.createElement(Component, getItemProps({
-    item: value,
-    isFocused,
-    ref,
-    isCompact,
-    isDanger,
-    ...(hasMenuRef.current && {
-      role: 'menuitem',
-      'aria-selected': null
-    }),
-    ...props
-  }), isSelected && !hasIcon && React__default.createElement(StyledItemIcon, {
-    isCompact: isCompact,
-    isVisible: isSelected
-  }, React__default.createElement(SvgCheckLgStroke, null)), children));
-});
-Item.displayName = 'Item';
-Item.propTypes = {
-  value: PropTypes.any,
-  disabled: PropTypes.bool
-};
-
-const AddItemComponent = React__default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    disabled,
-    ...props
-  } = _ref;
-  const {
-    isCompact
-  } = useMenuContext();
-  return React__default.createElement(StyledAddItem, _extends$5({
-    ref: ref,
-    disabled: disabled
-  }, props), React__default.createElement(StyledItemIcon, {
-    isCompact: isCompact,
-    isVisible: true,
-    isDisabled: disabled
-  }, React__default.createElement(SvgPlusStroke, null)), children);
-});
-const AddItem = React__default.forwardRef((props, ref) => React__default.createElement(Item, _extends$5({
-  component: AddItemComponent,
-  ref: ref
-}, props, {
-  hasIcon: true
-})));
-AddItem.displayName = 'AddItem';
-AddItem.propTypes = {
-  value: PropTypes.any,
-  disabled: PropTypes.bool
-};
-
-const HeaderIcon = React__default.forwardRef((props, ref) => {
-  const {
-    isCompact
-  } = useMenuContext();
-  return React__default.createElement(StyledHeaderIcon, _extends$5({
-    ref: ref,
-    isCompact: isCompact
-  }, props));
-});
-HeaderIcon.displayName = 'HeaderIcon';
-
-const HeaderItem = React__default.forwardRef((props, ref) => {
-  const {
-    isCompact
-  } = useMenuContext();
-  return React__default.createElement(StyledHeaderItem, _extends$5({
-    ref: ref,
-    isCompact: isCompact
-  }, props));
-});
-HeaderItem.displayName = 'HeaderItem';
-
-const ItemMeta = React__default.forwardRef((props, ref) => {
-  const {
-    isCompact
-  } = useMenuContext();
-  const {
-    isDisabled
-  } = useItemContext();
-  return React__default.createElement(StyledItemMeta, _extends$5({
-    ref: ref,
-    isCompact: isCompact,
-    isDisabled: isDisabled
-  }, props));
-});
-ItemMeta.displayName = 'ItemMeta';
-
-const MediaBody = React__default.forwardRef((props, ref) => {
-  const {
-    isCompact
-  } = useMenuContext();
-  return React__default.createElement(StyledMediaBody, _extends$5({
-    ref: ref,
-    isCompact: isCompact
-  }, props));
-});
-MediaBody.displayName = 'MediaBody';
-
-const MediaFigure = props => {
-  const {
-    isCompact
-  } = useMenuContext();
-  return React__default.createElement(StyledMediaFigure, _extends$5({
-    isCompact: isCompact
-  }, props));
-};
-
-const MediaItem = React__default.forwardRef((props, ref) => React__default.createElement(Item, _extends$5({
-  component: StyledMediaItem,
-  ref: ref
-}, props)));
-MediaItem.displayName = 'MediaItem';
-MediaItem.propTypes = {
-  value: PropTypes.any,
-  disabled: PropTypes.bool
-};
-
-const NextItemComponent = React__default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    disabled,
-    ...props
-  } = _ref;
-  const {
-    isCompact
-  } = useMenuContext();
-  return React__default.createElement(StyledNextItem, _extends$5({
-    ref: ref,
-    disabled: disabled
-  }, props), React__default.createElement(StyledItemIcon, {
-    isCompact: isCompact,
-    isDisabled: disabled,
-    isVisible: true
-  }, React__default.createElement(StyledNextIcon, {
-    isDisabled: disabled
-  })), children);
-});
-const NextItem = React__default.forwardRef((_ref2, ref) => {
-  let {
-    value,
-    disabled,
-    ...props
-  } = _ref2;
-  const {
-    nextItemsHashRef,
-    downshift: {
-      itemToString
-    }
-  } = useDropdownContext();
-  const {
-    itemIndexRef
-  } = useMenuContext();
-  if (!disabled) {
-    nextItemsHashRef.current[itemToString(value)] = itemIndexRef.current;
-  }
-  return React__default.createElement(Item, _extends$5({
-    component: NextItemComponent,
-    "aria-expanded": true,
-    disabled: disabled,
-    value: value,
-    ref: ref
-  }, props, {
-    hasIcon: true
-  }));
-});
-NextItem.displayName = 'NextItem';
-NextItem.propTypes = {
-  value: PropTypes.any,
-  disabled: PropTypes.bool
-};
-
-const PreviousItemComponent = React__default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    disabled,
-    ...props
-  } = _ref;
-  const {
-    isCompact
-  } = useMenuContext();
-  return React__default.createElement(StyledPreviousItem, _extends$5({
-    ref: ref,
-    disabled: disabled
-  }, props), React__default.createElement(StyledItemIcon, {
-    isCompact: isCompact,
-    isDisabled: disabled,
-    isVisible: true
-  }, React__default.createElement(StyledPreviousIcon, {
-    isDisabled: disabled
-  })), children);
-});
-const PreviousItem = React__default.forwardRef((_ref2, ref) => {
-  let {
-    value,
-    disabled,
-    ...props
-  } = _ref2;
-  const {
-    previousIndexRef
-  } = useDropdownContext();
-  const {
-    itemIndexRef
-  } = useMenuContext();
-  if (!disabled) {
-    previousIndexRef.current = itemIndexRef.current;
-  }
-  return React__default.createElement(Item, _extends$5({
-    component: PreviousItemComponent,
-    "aria-expanded": true,
-    value: value,
-    disabled: disabled
-  }, props, {
-    ref: ref,
-    hasIcon: true
-  }));
-});
-PreviousItem.displayName = 'PreviousItem';
-PreviousItem.propTypes = {
-  value: PropTypes.any,
-  disabled: PropTypes.bool
-};
-
-export { AddItem, Autocomplete, Combobox, Dropdown, Field, HeaderIcon, HeaderItem, Hint, Item, ItemMeta, Label, MediaBody, MediaFigure, MediaItem, Menu, Message, Multiselect, NextItem, PreviousItem, Select, Separator, Trigger };