@zendeskgarden/react-dropdowns 9.0.0-next.2 → 9.0.0-next.3

package/dist/index.esm.js

@@ -6,19 +6,22 @@
  */
 
 import * as React from 'react';
-import React__default, { useContext, useRef, useState, Children, useEffect, useCallback, forwardRef, useMemo } from 'react';
+import React__default, { createContext, useContext, cloneElement, Children, forwardRef, useRef, useState, useEffect, isValidElement, 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, getColor, 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 styled, { css, ThemeContext } from 'styled-components';
+import { useCombobox } from '@zendeskgarden/container-combobox';
+import { retrieveComponentStyles, DEFAULT_THEME, menuStyles, getColor, getLineHeight, focusStyles, arrowStyles, useText, useDocument, useWindow, PLACEMENT as PLACEMENT$1, getFloatingPlacements, getMenuPosition, getArrowPosition } from '@zendeskgarden/react-theming';
+import { Label as Label$1, Hint as Hint$1, Message as Message$1, VALIDATION } from '@zendeskgarden/react-forms';
+export { VALIDATION } from '@zendeskgarden/react-forms';
+import { hideVisually, math } from 'polished';
+import { Tag as Tag$1 } from '@zendeskgarden/react-tags';
+import { Button } from '@zendeskgarden/react-buttons';
 import { createPortal } from 'react-dom';
+import { useFloating, offset, flip, size, autoUpdate, autoPlacement } from '@floating-ui/react-dom';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+import { Tooltip } from '@zendeskgarden/react-tooltips';
+import { mergeRefs } from 'react-merge-refs';
+import { useMenu } from '@zendeskgarden/container-menu';
 
 function _extends$5() {
   _extends$5 = Object.assign ? Object.assign.bind() : function (target) {
@@ -35,1654 +38,1281 @@ function _extends$5() {
   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;
+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 SvgChevronDownStroke = function SvgChevronDownStroke(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: "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 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;
+const ComboboxContext = createContext(undefined);
+const useComboboxContext = () => {
+  const context = useContext(ComboboxContext);
+  if (!context) {
+    throw new Error('Error: this component must be rendered within a <Combobox>.');
   }
-}
-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 context;
+};
+
+const FieldContext = createContext(undefined);
+const useFieldContext = () => {
+  const context = useContext(FieldContext);
+  if (!context) {
+    throw new Error('Error: this component must be rendered within a <Field>.');
   }
-  return popperPlacement ? popperPlacement.split('-')[0] : 'bottom';
-}
+  return context;
+};
 
-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.2',
-  className: props.isAnimated && 'is-animated'
-})).withConfig({
-  displayName: "StyledMenu",
-  componentId: "sc-1vpttfd-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 = {
+const COMPONENT_ID$v = 'dropdowns.combobox.label';
+const StyledLabel = styled(Label$1).attrs({
+  'data-garden-id': COMPONENT_ID$v,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledLabel",
+  componentId: "sc-az6now-0"
+})(["vertical-align:revert;", ";"], props => retrieveComponentStyles(COMPONENT_ID$v, props));
+StyledLabel.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.2',
-  className: props.isAnimated && 'is-animated'
-})).withConfig({
-  displayName: "StyledMenuWrapper",
-  componentId: "sc-tiwdxz-0"
-})(["", ";", ";"], props => menuStyles(getMenuPosition(props.placement), {
+const COMPONENT_ID$u = 'dropdowns.combobox.hint';
+const StyledHint = styled(Hint$1).attrs({
+  'data-garden-id': COMPONENT_ID$u,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledHint",
+  componentId: "sc-106qvqx-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$u, props));
+StyledHint.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+const COMPONENT_ID$t = 'dropdowns.combobox.message';
+const StyledMessage = styled(Message$1).attrs({
+  'data-garden-id': COMPONENT_ID$t,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledMessage",
+  componentId: "sc-jux8m5-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$t, props));
+StyledMessage.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+const COMPONENT_ID$s = 'dropdowns.combobox';
+const sizeStyles$a = props => {
+  const minWidth = `${props.isCompact ? 100 : 144}px`;
+  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
+  return css(["min-width:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], minWidth, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
+};
+const StyledCombobox = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$s,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledCombobox",
+  componentId: "sc-13eybg8-0"
+})(["", ";", ";"], sizeStyles$a, props => retrieveComponentStyles(COMPONENT_ID$s, props));
+StyledCombobox.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+const COMPONENT_ID$r = 'dropdowns.combobox.container';
+const StyledContainer = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$r,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledContainer",
+  componentId: "sc-14i9jid-0"
+})(["display:flex;", ";"], props => retrieveComponentStyles(COMPONENT_ID$r, props));
+StyledContainer.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+const COMPONENT_ID$q = 'dropdowns.combobox.field';
+const StyledField = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$q,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledField",
+  componentId: "sc-zc57xl-0"
+})(["direction:", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => retrieveComponentStyles(COMPONENT_ID$q, props));
+StyledField.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+const COMPONENT_ID$p = 'dropdowns.combobox.floating';
+const StyledFloatingListbox = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$p,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledFloatingListbox",
+  componentId: "sc-1cp6spf-0"
+})(["top:0;left:0;", ";", ";"], props => menuStyles(props.position, {
   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 = {
+  animationModifier: '[data-garden-animate="true"]',
+  zIndex: props.zIndex
+}), props => retrieveComponentStyles(COMPONENT_ID$p, props));
+StyledFloatingListbox.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.2',
-  role: 'separator'
+const COMPONENT_ID$o = 'dropdowns.combobox.input';
+const colorStyles$8 = props => {
+  const placeholderColor = getColor('neutralHue', 400, props.theme);
+  return css(["background-color:inherit;color:inherit;&::placeholder{opacity:1;color:", ";}"], placeholderColor);
+};
+const getHeight = props => {
+  if (props.isBare && !props.isMultiselectable) {
+    return props.theme.space.base * 5;
+  }
+  return props.theme.space.base * (props.isCompact ? 5 : 8);
+};
+const sizeStyles$9 = props => {
+  const height = props.theme.space.base * 5;
+  const fontSize = props.theme.fontSizes.md;
+  const lineHeight = getLineHeight(height, fontSize);
+  const margin = math(`${props.theme.shadowWidths.sm} + ${(getHeight(props) - height) / 2}`);
+  const minWidth = `${props.theme.space.base * 8}px`;
+  return css(["min-width:", ";height:", "px;line-height:", ";font-size:", ";&&{margin-top:", ";margin-bottom:", ";}"], minWidth, height, lineHeight, fontSize, margin, margin);
+};
+const StyledInput = styled.input.attrs({
+  'data-garden-id': COMPONENT_ID$o,
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledSeparator",
-  componentId: "sc-1mrnp18-0"
-})(["display:block;margin:", "px 0;border-bottom:", ";", ";"], props => props.theme.space.base, props => `${props.theme.borders.sm} ${getColor('neutralHue', 200, props.theme)}`, props => retrieveComponentStyles(COMPONENT_ID$k, props));
-StyledSeparator.defaultProps = {
+  displayName: "StyledInput",
+  componentId: "sc-1lkqdg-0"
+})(["flex-basis:0;flex-grow:1;border:none;padding:0;font-family:inherit;&:focus{outline:none;}", ";", ";&[hidden]{display:revert;", "}&[aria-hidden='true']{display:none;}", ";"], sizeStyles$9, colorStyles$8, props => props.isEditable && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$o, props));
+StyledInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+const COMPONENT_ID$n = 'dropdowns.combobox.input_group';
+const sizeStyles$8 = props => {
+  const margin = props.theme.shadowWidths.sm;
+  return css(["margin:-", ";min-width:0;& > *{margin:", ";}"], margin, margin);
+};
+const StyledInputGroup = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$n,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledInputGroup",
+  componentId: "sc-yx3q7u-0"
+})(["display:flex;flex-grow:1;flex-wrap:wrap;", ";", ";"], sizeStyles$8, props => retrieveComponentStyles(COMPONENT_ID$n, props));
+StyledInputGroup.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+const COMPONENT_ID$m = 'dropdowns.combobox.trigger';
+const colorStyles$7 = props => {
+  const SHADE = 600;
+  let hue = 'neutralHue';
+  if (props.validation === 'success') {
+    hue = 'successHue';
+  } else if (props.validation === 'warning') {
+    hue = 'warningHue';
+  } else if (props.validation === 'error') {
+    hue = 'dangerHue';
+  }
+  const backgroundColor = props.isBare ? 'transparent' : props.theme.colors.background;
+  let borderColor;
+  let hoverBorderColor;
+  let focusBorderColor;
+  let focusShade;
+  if (props.validation) {
+    borderColor = getColor(hue, SHADE, props.theme);
+    hoverBorderColor = borderColor;
+    if (props.validation === 'warning') {
+      focusBorderColor = getColor(hue, SHADE + 100, props.theme);
+      focusShade = SHADE + 100;
+    } else {
+      focusBorderColor = borderColor;
+    }
+  } else {
+    borderColor = getColor('neutralHue', SHADE - 300, props.theme);
+    hoverBorderColor = getColor('primaryHue', SHADE, props.theme);
+    focusBorderColor = hoverBorderColor;
+  }
+  const disabledBackgroundColor = props.isBare ? undefined : getColor('neutralHue', SHADE - 500, props.theme);
+  const disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme);
+  const disabledForegroundColor = getColor('neutralHue', SHADE - 200, props.theme);
+  const focusSelector = `
+    &:focus-within:not([aria-disabled='true']),
+    &:focus-visible
+  `;
+  return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";}", " &[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isLabelHovered ? hoverBorderColor : borderColor, backgroundColor, props.theme.colors.foreground, hoverBorderColor, focusStyles({
+    theme: props.theme,
+    inset: props.focusInset,
+    hue: focusBorderColor,
+    shade: focusShade,
+    selector: focusSelector,
+    styles: {
+      borderColor: focusBorderColor
+    },
+    condition: !props.isBare
+  }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
+};
+const sizeStyles$7 = props => {
+  const inputHeight = getHeight(props);
+  let minHeight;
+  let horizontalPadding;
+  if (props.isBare) {
+    if (props.isMultiselectable) {
+      minHeight = math(`${props.theme.shadowWidths.sm} * 2 + ${inputHeight}`);
+      horizontalPadding = props.theme.shadowWidths.sm;
+    } else {
+      minHeight = `${inputHeight}px`;
+      horizontalPadding = '0';
+    }
+  } else {
+    minHeight = `${props.theme.space.base * (props.isCompact ? 3 : 2) + inputHeight}px`;
+    horizontalPadding = `${props.theme.space.base * 3}px`;
+  }
+  const maxHeight = props.maxHeight || minHeight;
+  const verticalPadding = math(`(${minHeight} - ${inputHeight} - (${props.isBare ? 0 : props.theme.borderWidths.sm} * 2)) / 2`);
+  return css(["padding:", " ", ";min-height:", ";max-height:", ";font-size:", ";"], verticalPadding, horizontalPadding, minHeight, maxHeight, props.theme.fontSizes.md);
+};
+const StyledTrigger = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledTrigger",
+  componentId: "sc-116nftk-0"
+})(["overflow-y:auto;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:", ";border-radius:", ";cursor:", ";box-sizing:border-box;", ";&:focus{outline:none;}", ";&[aria-disabled='true']{cursor:default;}", ";"], props => props.isBare ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => !props.isAutocomplete && props.isEditable ? 'text' : 'pointer', sizeStyles$7, colorStyles$7, props => retrieveComponentStyles(COMPONENT_ID$m, props));
+StyledTrigger.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$j = 'dropdowns.item';
-const getItemPaddingVertical = props => {
-  if (props.isCompact) {
-    return `${props.theme.space.base}px`;
+const COMPONENT_ID$l = 'dropdowns.combobox.input_icon';
+const colorStyles$6 = props => {
+  const color = getColor('neutralHue', 600, props.theme);
+  const focusColor = getColor('neutralHue', 700, props.theme);
+  const disabledColor = getColor('neutralHue', 400, props.theme);
+  return css(["color:", ";", ":hover &,", ":focus-within &,", ":focus &,", "[data-garden-focus-visible='true'] &{color:", ";}", "[aria-disabled='true'] &{color:", ";}"], props.isLabelHovered ? focusColor : color, StyledTrigger, StyledTrigger, StyledTrigger, StyledTrigger, focusColor, StyledTrigger, disabledColor);
+};
+const sizeStyles$6 = props => {
+  const size = props.theme.iconSizes.md;
+  const position = math(`(${getHeight(props)} - ${size}) / 2`);
+  const margin = `${props.theme.space.base * 2}px`;
+  let side;
+  if (props.isEnd) {
+    side = props.theme.rtl ? 'right' : 'left';
+  } else {
+    side = props.theme.rtl ? 'left' : 'right';
   }
-  return `${props.theme.space.base * 2}px`;
+  return css(["top:", ";margin-", ":", ";width:", ";height:", ";"], position, side, margin, size, size);
+};
+const StyledInputIcon = styled(_ref => {
+  let {
+    children,
+    isCompact,
+    isDisabled,
+    isEnd,
+    isLabelHovered,
+    isRotated,
+    theme,
+    ...props
+  } = _ref;
+  return cloneElement(Children.only(children), props);
+}).attrs({
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledInputIcon",
+  componentId: "sc-gqbs1s-0"
+})(["position:sticky;flex-shrink:0;transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles$6, colorStyles$6, props => retrieveComponentStyles(COMPONENT_ID$l, props));
+StyledInputIcon.defaultProps = {
+  theme: DEFAULT_THEME
 };
-const getColorStyles = props => {
-  let foregroundColor;
+
+const COMPONENT_ID$k = 'dropdowns.combobox.option';
+const colorStyles$5 = props => {
   let backgroundColor;
-  if (props.disabled) {
-    foregroundColor = getColor('neutralHue', 400, props.theme);
-  } else if (props.isDanger) {
+  let boxShadow;
+  if (props.isActive && props.$type !== 'group' && props.$type !== 'header') {
+    const hue = props.$type === 'danger' ? 'dangerHue' : 'primaryHue';
+    backgroundColor = getColor(hue, 600, props.theme, 0.08);
+    boxShadow = `inset ${props.theme.rtl ? `-${props.theme.shadowWidths.md}` : props.theme.shadowWidths.md} 0 ${getColor(hue, 600, props.theme)}`;
+  }
+  const disabledForegroundColor = getColor('neutralHue', 400, props.theme);
+  let foregroundColor = props.theme.colors.foreground;
+  if (props.$type === 'add') {
+    foregroundColor = getColor('primaryHue', 600, props.theme);
+  } else if (props.$type === 'danger') {
     foregroundColor = getColor('dangerHue', 600, props.theme);
-    backgroundColor = props.isFocused ? rgba(foregroundColor, 0.08) : 'inherit';
-  } else {
-    foregroundColor = props.theme.colors.foreground;
-    backgroundColor = props.isFocused ? getColor('primaryHue', 600, props.theme, 0.08) : 'inherit';
   }
-  return css(["background-color:", ";color:", ";& a,& a:hover,& a:focus,& a:active{color:inherit;}"], backgroundColor, foregroundColor);
+  return css(["box-shadow:", ";background-color:", ";color:", ";&[aria-disabled='true']{background-color:transparent;color:", ";}"], boxShadow, backgroundColor, foregroundColor, disabledForegroundColor);
+};
+const getMinHeight = props => props.theme.space.base * (props.isCompact ? 7 : 9);
+const sizeStyles$5 = props => {
+  const lineHeight = props.theme.lineHeights.md;
+  const minHeight = getMinHeight(props);
+  const paddingHorizontal = props.$type === 'group' ? 0 : `${props.theme.space.base * 9}px`;
+  const paddingVertical = props.$type === 'group' ? 0 : math(`(${minHeight} - ${lineHeight}) / 2`);
+  return css(["box-sizing:border-box;padding:", " ", ";min-height:", "px;line-height:", ";"], paddingVertical, paddingHorizontal, minHeight, lineHeight);
+};
+const StyledOption = styled.li.attrs({
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledOption",
+  componentId: "sc-jl4wn6-0"
+})(["display:flex;position:relative;transition:color 0.25s ease-in-out;cursor:", ";word-wrap:break-word;font-weight:", ";user-select:none;&:focus{outline:none;}", ";", ";&[aria-disabled='true']{cursor:default;}&[aria-hidden='true']{", ";}", ";"], props => props.$type === 'group' || props.$type === 'header' ? 'default' : 'pointer', props => props.$type === 'header' || props.$type === 'previous' ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, sizeStyles$5, colorStyles$5, hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$k, props));
+StyledOption.defaultProps = {
+  theme: DEFAULT_THEME
 };
-const StyledItem = styled.li.attrs(props => ({
+
+const COMPONENT_ID$j = 'dropdowns.combobox.option.content';
+const StyledOptionContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.2',
-  'aria-disabled': props.disabled
-})).withConfig({
-  displayName: "StyledItem",
-  componentId: "sc-1xeog7q-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 = {
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledOptionContent",
+  componentId: "sc-121ujpu-0"
+})(["display:flex;flex-direction:column;flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID$j, props));
+StyledOptionContent.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$i = 'dropdowns.add_item';
-const StyledAddItem = styled(StyledItem).attrs({
+const COMPONENT_ID$i = 'dropdowns.combobox.optgroup';
+const StyledOptGroup = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledAddItem",
-  componentId: "sc-ekqk50-0"
-})(["color:", ";", ";"], props => !props.disabled && getColor('primaryHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$i, props));
-StyledAddItem.defaultProps = {
+  displayName: "StyledOptGroup",
+  componentId: "sc-1kavqsx-0"
+})(["margin:0;padding:0;list-style-type:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID$i, props));
+StyledOptGroup.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$h = 'dropdowns.item_meta';
-const StyledItemMeta = styled.span.attrs({
+const COMPONENT_ID$h = 'dropdowns.combobox.separator';
+const colorStyles$4 = props => {
+  const backgroundColor = getColor('neutralHue', 200, props.theme);
+  return css(["background-color:", ";"], backgroundColor);
+};
+const sizeStyles$4 = props => {
+  const margin = `${props.theme.space.base}px`;
+  const height = props.theme.borderWidths.sm;
+  return css(["margin:", " 0;height:", ";"], margin, height);
+};
+const StyledListboxSeparator = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledItemMeta",
-  componentId: "sc-k6xy28-0"
-})(["display:block;line-height:", "px;color:", ";font-size:", ";", ";"], props => props.theme.space.base * (props.isCompact ? 3 : 4), props => getColor('neutralHue', props.isDisabled ? 400 : 600, props.theme), props => props.theme.fontSizes.sm, props => retrieveComponentStyles(COMPONENT_ID$h, props));
-StyledItemMeta.defaultProps = {
+  displayName: "StyledListboxSeparator",
+  componentId: "sc-1p6toh2-0"
+})(["cursor:default;", ";", ";", ";"], sizeStyles$4, colorStyles$4, props => retrieveComponentStyles(COMPONENT_ID$h, props));
+StyledListboxSeparator.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 COMPONENT_ID$g = 'dropdowns.combobox.listbox';
+const sizeStyles$3 = props => {
+  const padding = props.theme.space.base;
+  const minHeight = props.minHeight === undefined ? `${getMinHeight(props) + padding * 2}px` : props.minHeight;
+  return css(["min-height:", ";max-height:", ";&&&{padding-top:", "px;padding-bottom:", "px;}"], minHeight, props.maxHeight, padding, padding);
 };
-const StyledItemIcon = styled.div.attrs({
+const StyledListbox = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledItemIcon",
-  componentId: "sc-1v0ty11-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' : getColor('primaryHue', 600, props.theme), props => getSizeStyles(props), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md);
-StyledItemIcon.defaultProps = {
+  displayName: "StyledListbox",
+  componentId: "sc-1k13ba7-0"
+})(["overflow-y:auto;list-style-type:none;", ";&&&{display:block;}", ":first-child ", " ", ":first-child ", "[role='none']:first-child{display:none;}"], sizeStyles$3, StyledOption, StyledOptionContent, StyledOptGroup, StyledListboxSeparator);
+StyledListbox.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$f = 'dropdowns.next_item';
-const StyledNextItem = styled(StyledItem).attrs({
+const COMPONENT_ID$f = 'dropdowns.combobox.option.icon';
+const sizeStyles$2 = props => {
+  const size = props.theme.iconSizes.md;
+  const marginTop = math(`(${props.theme.lineHeights.md} - ${size}) / 2`);
+  const marginHorizontal = `${props.theme.space.base * 2}px`;
+  return css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
+};
+const StyledOptionIcon = styled(_ref => {
+  let {
+    children,
+    theme,
+    ...props
+  } = _ref;
+  return cloneElement(Children.only(children), props);
+}).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledNextItem",
-  componentId: "sc-1bcygn5-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 = {
+  displayName: "StyledOptionIcon",
+  componentId: "sc-qsab3y-0"
+})(["flex-shrink:0;", ";", ";"], sizeStyles$2, props => retrieveComponentStyles(COMPONENT_ID$f, props));
+StyledOptionIcon.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.2',
-    className: className
-  });
+const COMPONENT_ID$e = 'dropdowns.combobox.option.meta';
+const colorStyles$3 = props => {
+  const color = getColor('neutralHue', props.isDisabled ? 400 : 600, props.theme);
+  return css(["color:", ";"], color);
 };
-const StyledNextIcon = styled(NextIconComponent).withConfig({
-  displayName: "StyledNextIcon",
-  componentId: "sc-1rinki2-0"
-})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : getColor('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$e, props));
-StyledNextIcon.defaultProps = {
-  theme: DEFAULT_THEME
+const sizeStyles$1 = props => {
+  const lineHeight = props.theme.lineHeights.sm;
+  const fontSize = props.theme.fontSizes.sm;
+  return css(["line-height:", ";font-size:", ";"], lineHeight, fontSize);
 };
-
-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.2'
+const StyledOptionMeta = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$e,
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledPreviousItem",
-  componentId: "sc-1nmdds9-0"
-})(["font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$d, props));
-StyledPreviousItem.defaultProps = {
+  displayName: "StyledOptionMeta",
+  componentId: "sc-j6pu10-0"
+})(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles$1, colorStyles$3, props => retrieveComponentStyles(COMPONENT_ID$e, props));
+StyledOptionMeta.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$d = 'dropdowns.combobox.option.type_icon';
+const colorStyles$2 = props => {
+  const opacity = props.type && props.type !== 'danger' ? 1 : 0;
+  let color;
+  if (props.type === 'add' || props.type === 'danger') {
+    color = 'inherit';
+  } else if (props.type === 'header' || props.type === 'next' || props.type === 'previous') {
+    color = getColor('neutralHue', 600, props.theme);
+  } else {
+    color = getColor('primaryHue', 600, props.theme);
+  }
+  return css(["opacity:", ";color:", ";", "[aria-selected='true'] > &{opacity:1;}", "[aria-disabled='true'] > &{color:inherit;}"], opacity, color, StyledOption, StyledOption);
 };
-
-const COMPONENT_ID$c = 'dropdowns.previous_item_icon';
-const PreviousIconComponent = _ref => {
+const sizeStyles = props => {
+  const size = props.theme.iconSizes.md;
+  const position = `${props.theme.space.base * 3}px`;
+  const top = math(`(${getMinHeight(props)} - ${size}) / 2`);
+  let side;
+  if (props.type === 'next') {
+    side = props.theme.rtl ? 'left' : 'right';
+  } else {
+    side = props.theme.rtl ? 'right' : 'left';
+  }
+  return css(["top:", ";", ":", ";width:", ";height:", ";"], top, side, position, size, size);
+};
+const StyledOptionTypeIcon = styled(_ref => {
   let {
-    className
+    children,
+    isCompact,
+    theme,
+    type,
+    ...props
   } = _ref;
-  return React__default.createElement(SvgChevronLeftStroke, {
-    "data-garden-id": COMPONENT_ID$c,
-    "data-garden-version": '9.0.0-next.2',
-    className: className
-  });
+  return cloneElement(Children.only(children), props);
+}).attrs({
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledOptionTypeIcon",
+  componentId: "sc-xpink2-0"
+})(["position:absolute;transform:", ";transition:opacity 0.1s ease-in-out;", ";", ";", ";"], props => props.theme.rtl && (props.type === 'next' || props.type === 'previous') && 'rotate(180deg)', sizeStyles, colorStyles$2, props => retrieveComponentStyles(COMPONENT_ID$d, props));
+StyledOptionTypeIcon.defaultProps = {
+  theme: DEFAULT_THEME
 };
-const StyledPreviousIcon = styled(PreviousIconComponent).withConfig({
-  displayName: "StyledPreviousIcon",
-  componentId: "sc-czfwj7-0"
-})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : getColor('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$c, props));
-StyledPreviousIcon.defaultProps = {
+
+const COMPONENT_ID$c = 'dropdowns.combobox.tag';
+const StyledTag = styled(Tag$1).attrs({
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledTag",
+  componentId: "sc-1alam0r-0"
+})(["&[aria-disabled='true']{color:", ";}&[hidden]{display:revert;", "}", ";"], props => props.hue ? undefined : getColor('neutralHue', 400, props.theme), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$c, props));
+StyledTag.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$b = 'dropdowns.header_icon';
-const StyledHeaderIcon = styled.div.attrs({
+const COMPONENT_ID$b = 'dropdowns.combobox.value';
+const colorStyles$1 = props => {
+  const foregroundColor = props.isPlaceholder && getColor('neutralHue', 400, props.theme);
+  return css(["color:", ";"], foregroundColor);
+};
+const StyledValue = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledHeaderIcon",
-  componentId: "sc-1fl6nsz-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 => getColor('neutralHue', 600, props.theme), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID$b, props));
-StyledHeaderIcon.defaultProps = {
+  displayName: "StyledValue",
+  componentId: "sc-t719sx-0"
+})(["flex-basis:0;flex-grow:1;cursor:", ";overflow:hidden;text-overflow:ellipsis;white-space:pre;user-select:none;", ";", ";&[hidden]{display:none;}", ";"], props => {
+  if (props.isDisabled) {
+    return 'default';
+  }
+  return props.isEditable && !props.isAutocomplete ? 'text' : 'pointer';
+}, sizeStyles$9, colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$b, props));
+StyledValue.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 COMPONENT_ID$a = 'dropdowns.combobox.tags_button';
+const colorStyles = props => {
+  const color = getColor('primaryHue', 600, props.theme);
+  return css(["color:", ";&:disabled{color:inherit;}"], color);
 };
-const StyledHeaderItem = styled(StyledItem).attrs({
+const StyledTagsButton = styled(StyledValue).attrs({
+  as: 'button',
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledHeaderItem",
-  componentId: "sc-137filx-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 = {
+  displayName: "StyledTagsButton",
+  componentId: "sc-6q5w33-0"
+})(["display:inline-flex;flex:0 1 auto;align-items:center;border:none;background-color:transparent;cursor:pointer;min-width:auto;font-family:inherit;&:hover{text-decoration:underline;}", ";&:disabled{cursor:default;text-decoration:none;}", ";"], colorStyles, props => retrieveComponentStyles(COMPONENT_ID$a, props));
+StyledTagsButton.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$9 = 'dropdowns.media_body';
-const StyledMediaBody = styled.div.attrs({
+const COMPONENT_ID$9 = 'dropdowns.menu';
+const StyledMenu = styled(StyledListbox).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledMediaBody",
-  componentId: "sc-36j7ef-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 = {
+  displayName: "StyledMenu",
+  componentId: "sc-f77ntu-0"
+})(["position:static !important;", ";", ";"], props => props.arrowPosition && arrowStyles(props.arrowPosition, {
+  size: `${props.theme.space.base * 2}px`,
+  inset: '2px',
+  animationModifier: '[data-garden-animate-arrow="true"]'
+}), props => retrieveComponentStyles(COMPONENT_ID$9, props));
+StyledMenu.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({
+const COMPONENT_ID$8 = 'dropdowns.menu.floating';
+const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledMediaFigure",
-  componentId: "sc-2f2x8x-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 = {
+  displayName: "StyledFloatingMenu",
+  componentId: "sc-1rc7ahb-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$8, props));
+StyledFloatingMenu.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$7 = 'dropdowns.media_item';
-const StyledMediaItem = styled(StyledItem).attrs({
+const COMPONENT_ID$7 = 'dropdowns.menu.item';
+const StyledItem = styled(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledMediaItem",
-  componentId: "sc-ikwshz-0"
+  displayName: "StyledItem",
+  componentId: "sc-1jp99dq-0"
 })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledMediaItem.defaultProps = {
+StyledItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$6 = 'dropdowns.faux_input';
-const StyledFauxInput = styled(FauxInput).attrs(props => ({
+const COMPONENT_ID$6 = 'dropdowns.menu.item.content';
+const StyledItemContent = styled(StyledOptionContent).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.2',
-  mediaLayout: true,
-  theme: props.theme
-})).withConfig({
-  displayName: "StyledFauxInput",
-  componentId: "sc-1l592ed-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 = {
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledItemContent",
+  componentId: "sc-1opglsb-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$6, props));
+StyledItemContent.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({
+const COMPONENT_ID$5 = 'dropdowns.menu.item_group';
+const StyledItemGroup = styled(StyledOptGroup).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.2',
-  isBare: true
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledInput",
-  componentId: "sc-hzhvmp-0"
-})(["", ";", ";"], props => props.isHidden && hiddenStyling, props => retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledInput.defaultProps = {
+  displayName: "StyledItemGroup",
+  componentId: "sc-1umk3cg-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$5, props));
+StyledItemGroup.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$4 = 'dropdowns.select';
-const StyledSelect = styled.div.attrs({
+const COMPONENT_ID$4 = 'dropdowns.menu.item.icon';
+const StyledItemIcon = styled(StyledOptionIcon).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledSelect",
-  componentId: "sc-xifmwj-0"
-})(["flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledSelect.defaultProps = {
+  displayName: "StyledItemIcon",
+  componentId: "sc-w9orqb-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$4, props));
+StyledItemIcon.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({
+const COMPONENT_ID$3 = 'dropdowns.menu.item.meta';
+const StyledItemMeta = styled(StyledOptionMeta).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.2',
-  isBare: true
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledMultiselectInput",
-  componentId: "sc-1avnf6f-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 = {
+  displayName: "StyledItemMeta",
+  componentId: "sc-1unw3x1-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$3, props));
+StyledItemMeta.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({
+const COMPONENT_ID$2 = 'dropdowns.menu.item.type_icon';
+const StyledItemTypeIcon = styled(StyledOptionTypeIcon).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledMultiselectItemsContainer",
-  componentId: "sc-1jzhet8-0"
-})(["display:inline-flex;flex-grow:1;flex-wrap:wrap;min-width:0;", ";", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledMultiselectItemsContainer.defaultProps = {
+  displayName: "StyledItemTypeIcon",
+  componentId: "sc-1pll3nu-0"
+})(["", "[aria-checked='true'] > &{opacity:1;}", ";"], StyledItem, props => retrieveComponentStyles(COMPONENT_ID$2, props));
+StyledItemTypeIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
-const StyledMultiselectItemWrapper = styled.div.attrs({
+const COMPONENT_ID$1 = 'dropdowns.menu.button';
+const StyledButton = styled(Button).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledMultiselectItemWrapper",
-  componentId: "sc-1rb2bye-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 = {
+  displayName: "StyledButton",
+  componentId: "sc-5hs2jg-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$1, props));
+StyledButton.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
-const StyledMultiselectMoreAnchor = styled.div.attrs({
+const COMPONENT_ID = 'dropdowns.menu.separator';
+const StyledSeparator = styled(StyledListboxSeparator).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledMultiselectMoreAnchor",
-  componentId: "sc-1m9v46e-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 ? getColor('neutralHue', 400, props.theme) : getColor('primaryHue', 600, props.theme), props => !props.isDisabled && 'underline', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledMultiselectMoreAnchor.defaultProps = {
+  displayName: "StyledSeparator",
+  componentId: "sc-8kqwen-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSeparator.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const Trigger = _ref => {
+const Listbox = forwardRef((_ref, ref) => {
   let {
+    appendToNode,
     children,
-    refKey,
-    ...triggerProps
+    isCompact,
+    isExpanded,
+    maxHeight,
+    minHeight,
+    onMouseDown,
+    triggerRef,
+    zIndex,
+    ...props
   } = _ref;
+  const floatingRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [height, setHeight] = useState();
+  const [width, setWidth] = useState();
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
   const {
-    hasMenuRef,
-    itemSearchRegistry,
-    downshift: {
-      getRootProps,
-      getToggleButtonProps,
-      getInputProps,
-      isOpen,
-      highlightedIndex,
-      selectItemAtIndex,
-      setHighlightedIndex
+    refs,
+    placement,
+    update,
+    floatingStyles: {
+      transform
     }
-  } = useDropdownContext();
-  const hiddenInputRef = useRef(null);
-  const triggerRef = useRef(null);
-  const previousIsOpenRef = useRef(undefined);
-  const [searchString, setSearchString] = useState('');
-  const searchTimeoutRef = useRef();
-  const currentSearchIndexRef = useRef(0);
+  } = useFloating({
+    elements: {
+      reference: triggerRef?.current,
+      floating: floatingRef?.current
+    },
+    placement: 'bottom-start',
+    middleware: [offset(theme.space.base), flip(), size({
+      apply: _ref2 => {
+        let {
+          rects,
+          availableHeight
+        } = _ref2;
+        if (rects.reference.width > 0) {
+          setWidth(rects.reference.width);
+          if (!(minHeight === null || minHeight === 'fit-content') && rects.floating.height > availableHeight) {
+            setHeight(availableHeight);
+          }
+        }
+      }
+    })]
+  });
+  const handleMouseDown = event => event.preventDefault();
   useEffect(() => {
-    if (hiddenInputRef.current && isOpen && !previousIsOpenRef.current) {
-      hiddenInputRef.current.focus();
-    }
-    if (triggerRef.current && !isOpen && previousIsOpenRef.current) {
-      triggerRef.current.focus();
+    let cleanup;
+    if (isExpanded && refs.reference.current && refs.floating.current) {
+      cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
+        elementResize: typeof ResizeObserver === 'function'
+      });
     }
-    previousIsOpenRef.current = isOpen;
-  }, [isOpen, hasMenuRef]);
+    return () => cleanup && cleanup();
+  }, [isExpanded, refs.reference, refs.floating, update]);
   useEffect(() => {
-    if (hasMenuRef.current === false) {
-      hasMenuRef.current = true;
+    let timeout;
+    if (isExpanded) {
+      setIsVisible(true);
+    } else {
+      timeout = setTimeout(() => {
+        setIsVisible(false);
+        setHeight(undefined);
+      }, 200 );
     }
-  }, [hasMenuRef]);
+    return () => clearTimeout(timeout);
+  }, [isExpanded]);
   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 (height) {
+      setHeight(undefined);
+      update();
     }
-    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);
+  }, [
+  children, update]);
+  const Node = React__default.createElement(StyledFloatingListbox, {
+    "data-garden-animate": isVisible ? 'true' : 'false',
+    isHidden: !isExpanded,
+    position: placement === 'bottom-start' ? 'bottom' : 'top',
+    style: {
+      transform,
+      width
+    },
+    zIndex: zIndex,
+    ref: floatingRef
+  }, React__default.createElement(StyledListbox, _extends$5({
+    isCompact: isCompact,
+    maxHeight: maxHeight,
+    minHeight: minHeight,
+    onMouseDown: composeEventHandlers(onMouseDown, handleMouseDown),
+    style: {
+      height
     }
-  }, [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'
+  }, props, {
+    ref: ref
+  }), isVisible && children));
+  return appendToNode ? createPortal(Node, appendToNode) : Node;
+});
+Listbox.displayName = 'Listbox';
+Listbox.propTypes = {
+  appendToNode: PropTypes.any,
+  isCompact: PropTypes.bool,
+  isExpanded: PropTypes.bool,
+  maxHeight: PropTypes.string,
+  triggerRef: PropTypes.any.isRequired,
+  zIndex: PropTypes.number
 };
 
-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 toString = option => typeof option.value === 'string' ? option.value : JSON.stringify(option.value);
+const toOption = props => {
+  return {
+    value: props.value,
+    label: props.label,
+    hidden: props.isHidden,
+    disabled: props.isDisabled,
+    selected: props.isSelected
+  };
 };
-
-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.');
+const toOptions = (children, optionTagProps) => Children.toArray(children).reduce((options, option) => {
+  const retVal = options;
+  if ( isValidElement(option)) {
+    if ('value' in option.props) {
+      retVal.push(toOption(option.props));
+      optionTagProps[toString(option.props)] = option.props.tagProps;
+    } else {
+      const props = option.props;
+      const groupOptions = toOptions(props.children, optionTagProps);
+      retVal.push({
+        label: props.label,
+        options: groupOptions
+      });
+    }
   }
-  return fieldContext;
-};
+  return retVal;
+}, []);
+
+const TagAvatarComponent = Tag$1.Avatar;
+TagAvatarComponent.displayName = 'Tag.Avatar';
+const TagAvatar = TagAvatarComponent;
 
-const Autocomplete = forwardRef((_ref, ref) => {
+const TagComponent = forwardRef((_ref, ref) => {
   let {
     children,
-    inputRef: controlledInputRef,
-    start,
+    option,
+    removeLabel,
+    tooltipZIndex,
     ...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)));
+    getTagProps,
+    isCompact,
+    removeSelection
+  } = useComboboxContext();
+  const text = option.label || toString(option);
+  const ariaLabel = useText(
+  Tag, props, 'aria-label', `${text}, press delete or backspace to remove`, !option.disabled);
+  const tagProps = getTagProps({
+    option,
+    'aria-label': ariaLabel
   });
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const doc = useDocument(theme);
+  const handleClick = () => removeSelection(option.value);
+  return React__default.createElement(StyledTag, _extends$5({
+    "aria-disabled": option.disabled,
+    tabIndex: option.disabled ? undefined : 0
+  }, tagProps, props, {
+    size: isCompact ? 'medium' : 'large',
+    ref: ref
+  }), children || React__default.createElement("span", null, text), !option.disabled && (removeLabel ?
+  React__default.createElement(Tooltip, {
+    appendToNode: doc?.body,
+    content: removeLabel,
+    zIndex: tooltipZIndex
+  }, React__default.createElement(StyledTag.Close, {
+    "aria-label": removeLabel,
+    onClick: handleClick
+  })) : React__default.createElement(StyledTag.Close, {
+    onClick: handleClick
+  })));
 });
-Autocomplete.displayName = 'Autocomplete';
-Autocomplete.propTypes = {
-  isCompact: PropTypes.bool,
-  isBare: PropTypes.bool,
-  disabled: PropTypes.bool,
-  focusInset: PropTypes.bool,
-  validation: PropTypes.oneOf(VALIDATION)
+TagComponent.displayName = 'Tag';
+TagComponent.propTypes = {
+  hue: PropTypes.string,
+  isPill: PropTypes.bool,
+  isRegular: PropTypes.bool,
+  removeLabel: PropTypes.string
+};
+const Tag = TagComponent;
+Tag.Avatar = TagAvatar;
+
+const TagGroup = _ref => {
+  let {
+    children,
+    isDisabled,
+    isExpanded,
+    listboxZIndex,
+    maxTags,
+    optionTagProps,
+    selection
+  } = _ref;
+  return React__default.createElement(React__default.Fragment, null, selection.map((option, index) => {
+    const key = toString(option);
+    const disabled = isDisabled || option.disabled;
+    return React__default.createElement(Tag, _extends$5({
+      key: key,
+      hidden: !isExpanded && index >= maxTags,
+      option: {
+        ...option,
+        disabled
+      },
+      tooltipZIndex: listboxZIndex ? listboxZIndex + 1 : undefined
+    }, optionTagProps[key]));
+  }), children);
 };
+TagGroup.displayName = 'TagGroup';
 
+const MAX_TAGS = 4;
 const Combobox = forwardRef((_ref, ref) => {
   let {
-    isCompact,
-    isBare,
-    disabled,
+    children,
+    activeIndex,
+    defaultActiveIndex,
+    defaultExpanded,
+    endIcon,
     focusInset,
+    inputProps: _inputProps,
+    inputValue: _inputValue,
+    isAutocomplete,
+    isBare,
+    isCompact,
+    isDisabled,
+    isEditable,
+    isExpanded: _isExpanded,
+    isMultiselectable,
+    listboxAppendToNode,
+    listboxAriaLabel,
+    listboxMaxHeight,
+    listboxMinHeight,
+    listboxZIndex,
+    maxHeight,
+    maxTags = MAX_TAGS,
+    onChange,
     placeholder,
+    renderExpandTags,
+    renderValue,
+    selectionValue,
+    startIcon,
     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;
+    hasHint,
+    hasMessage,
+    labelProps,
+    setLabelProps,
+    hintProps,
+    setHintProps,
+    messageProps,
+    setMessageProps
+  } = useFieldContext();
+  const [isInputHidden, setIsInputHidden] = useState(true);
+  const [isLabelHovered, setIsLabelHovered] = useState(false);
+  const [isTagGroupExpanded, setIsTagGroupExpanded] = useState(false);
+  const [optionTagProps, setOptionTagProps] = useState({});
+  const options = useMemo(() => {
+    const tagProps = {};
+    const retVal = toOptions(children, tagProps);
+    if (isMultiselectable) {
+      setOptionTagProps(value => ({
+        ...value,
+        ...tagProps
+      }));
     }
-  }));
-  const inputProps = getInputProps({
+    return retVal;
+  }, [children, isMultiselectable]);
+  const triggerRef = useRef(null);
+  const inputRef = useRef(null);
+  const listboxRef = useRef(null);
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const environment = useWindow(theme);
+  const {
+    activeValue,
+    inputValue,
+    isExpanded,
+    getTriggerProps,
+    getHintProps,
+    getInputProps,
+    getLabelProps,
+    getListboxProps,
+    getMessageProps,
+    getOptionProps,
+    getOptGroupProps,
+    getTagProps,
+    removeSelection,
+    selection
+  } = useCombobox({
+    idPrefix: props.id,
+    triggerRef,
+    inputRef,
+    listboxRef,
+    options,
+    environment,
+    hasHint,
+    hasMessage,
+    isAutocomplete,
+    isEditable,
+    isMultiselectable,
+    disabled: isDisabled,
+    inputValue: _inputValue,
+    selectionValue,
+    isExpanded: _isExpanded,
+    defaultExpanded,
+    activeIndex,
+    defaultActiveIndex,
+    onChange
+  });
+  const contextValue = useMemo(() => ({
+    activeValue,
+    getOptionProps,
+    getOptGroupProps,
+    getTagProps,
     isCompact,
+    removeSelection
+  }), [activeValue, getOptionProps, getOptGroupProps, getTagProps, isCompact, removeSelection]);
+  const hasChevron = useMemo(() => !isBare && (isAutocomplete || !isEditable), [isAutocomplete, isBare, isEditable]);
+  const expandTags = useText(Combobox, {
+    renderExpandTags
+  }, 'renderExpandTags', '+ {{value}} more', isMultiselectable || false);
+  const _listboxAriaLabel = useText(Combobox, {
+    listboxAriaLabel
+  }, 'listboxAriaLabel', 'Options');
+  const triggerProps = {
+    isAutocomplete,
     isBare,
-    disabled,
+    isCompact,
+    isEditable,
+    isLabelHovered,
+    isMultiselectable,
+    maxHeight,
     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();
+    ...getTriggerProps({
+      onFocus: () => {
+        if (!isDisabled) {
+          if (isEditable) {
+            setIsInputHidden(false);
           }
-          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();
-            }
+          if (isMultiselectable) {
+            setIsTagGroupExpanded(true);
           }
-        },
-        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();
+      onBlur: event => {
+        if (event.relatedTarget === null || !triggerRef.current?.contains(event.relatedTarget)) {
+          if (isEditable) {
+            setIsInputHidden(true);
+          }
+          if (isMultiselectable) {
+            setIsTagGroupExpanded(false);
           }
         }
-      },
-      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)));
+      }
+    })
+  };
+  const inputProps = {
+    'aria-invalid': validation === 'error' || validation === 'warning',
+    hidden: isInputHidden,
+    isBare,
+    isCompact,
+    isEditable,
+    isMultiselectable,
+    placeholder,
+    ...getInputProps({
+      ..._inputProps
+    })
+  };
+  const listboxProps = getListboxProps({
+    'aria-label': _listboxAriaLabel
   });
-});
-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();
+    if (!labelProps) {
+      const _labelProps = getLabelProps({
+        onMouseEnter: () => setIsLabelHovered(true),
+        onMouseLeave: () => setIsLabelHovered(false)
+      });
+      setLabelProps(_labelProps);
     }
-    previousIsOpenRef.current = isOpen;
-  }, [isOpen, triggerRef]);
+    return () => labelProps && setLabelProps(undefined);
+  }, [getLabelProps, labelProps, setLabelProps]);
   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 (!hintProps) {
+      const _hintProps = getHintProps();
+      setHintProps(_hintProps);
     }
-    if (matchingIndex !== undefined) {
-      setHighlightedIndex(matchingIndex);
+    return () => hintProps && setHintProps(undefined);
+  }, [getHintProps, hintProps, setHintProps]);
+  useEffect(() => {
+    if (!messageProps) {
+      const _messageProps = getMessageProps();
+      setMessageProps(_messageProps);
     }
-  }, [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)));
-  });
+    return () => messageProps && setMessageProps(undefined);
+  }, [getMessageProps, messageProps, setMessageProps]);
+  return React__default.createElement(ComboboxContext.Provider, {
+    value: contextValue
+  }, React__default.createElement(StyledCombobox, _extends$5({
+    isCompact: isCompact,
+    tabIndex: -1
+  }, props, {
+    ref: ref
+  }), React__default.createElement(StyledTrigger, triggerProps, React__default.createElement(StyledContainer, null, startIcon && React__default.createElement(StyledInputIcon, {
+    isLabelHovered: isLabelHovered,
+    isCompact: isCompact
+  }, startIcon), React__default.createElement(StyledInputGroup, null, isMultiselectable && Array.isArray(selection) && React__default.createElement(TagGroup, {
+    isDisabled: isDisabled,
+    isExpanded: isTagGroupExpanded,
+    maxTags: maxTags,
+    optionTagProps: optionTagProps,
+    selection: selection
+  }, selection.length > maxTags && React__default.createElement(StyledTagsButton, {
+    disabled: isDisabled,
+    hidden: isTagGroupExpanded,
+    isCompact: isCompact,
+    tabIndex: -1,
+    type: "button"
+  }, (() => {
+    const value = selection.length - maxTags;
+    return renderExpandTags ? renderExpandTags(value) : expandTags?.replace('{{value}}', value.toString());
+  })())), React__default.createElement(StyledValue, {
+    hidden: !isInputHidden,
+    isAutocomplete: isAutocomplete,
+    isBare: isBare,
+    isCompact: isCompact,
+    isDisabled: isDisabled,
+    isEditable: isEditable,
+    isMultiselectable: isMultiselectable,
+    isPlaceholder: !(inputValue || renderValue)
+  }, renderValue ? renderValue({
+    selection,
+    inputValue
+  }) : inputValue || placeholder), React__default.createElement(StyledInput, inputProps)), (hasChevron || endIcon) && React__default.createElement(StyledInputIcon, {
+    isCompact: isCompact,
+    isEnd: true,
+    isLabelHovered: isLabelHovered,
+    isRotated: hasChevron && isExpanded
+  }, hasChevron ? React__default.createElement(SvgChevronDownStroke, null) : endIcon))), React__default.createElement(Listbox, _extends$5({
+    appendToNode: listboxAppendToNode,
+    isCompact: isCompact,
+    isExpanded: isExpanded,
+    maxHeight: listboxMaxHeight,
+    minHeight: listboxMinHeight,
+    triggerRef: triggerRef,
+    zIndex: listboxZIndex
+  }, listboxProps), children)));
 });
-Select.displayName = 'Select';
-Select.propTypes = {
-  isCompact: PropTypes.bool,
-  isBare: PropTypes.bool,
-  disabled: PropTypes.bool,
+Combobox.displayName = 'Combobox';
+Combobox.propTypes = {
+  activeIndex: PropTypes.number,
+  defaultActiveIndex: PropTypes.number,
+  defaultExpanded: PropTypes.bool,
+  endIcon: PropTypes.any,
   focusInset: PropTypes.bool,
-  validation: PropTypes.oneOf(VALIDATION),
-  start: PropTypes.any
+  id: PropTypes.string,
+  inputProps: PropTypes.object,
+  inputValue: PropTypes.string,
+  isAutocomplete: PropTypes.bool,
+  isBare: PropTypes.bool,
+  isCompact: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isEditable: PropTypes.bool,
+  isExpanded: PropTypes.bool,
+  isMultiselectable: PropTypes.bool,
+  listboxAppendToNode: PropTypes.any,
+  listboxAriaLabel: PropTypes.string,
+  listboxMaxHeight: PropTypes.string,
+  listboxMinHeight: PropTypes.string,
+  listboxZIndex: PropTypes.number,
+  maxHeight: PropTypes.string,
+  maxTags: PropTypes.number,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  renderExpandTags: PropTypes.func,
+  renderValue: PropTypes.func,
+  selectionValue: PropTypes.any,
+  startIcon: PropTypes.any,
+  validation: PropTypes.oneOf(VALIDATION)
+};
+Combobox.defaultProps = {
+  isEditable: true,
+  listboxMaxHeight: '400px',
+  listboxZIndex: 1000,
+  maxTags: MAX_TAGS
 };
 
-const Field = forwardRef((props, fieldRef) => {
-  const {
-    downshift: {
-      getRootProps
-    }
-  } = useDropdownContext();
-  const [isLabelHovered, setIsLabelHovered] = useState(false);
-  const {
-    ref
-  } = getRootProps();
-  const value = useMemo(() => ({
-    isLabelHovered,
-    setIsLabelHovered
-  }), [isLabelHovered, setIsLabelHovered]);
+const Field = forwardRef((props, ref) => {
+  const [labelProps, setLabelProps] = useState(undefined);
+  const [hintProps, setHintProps] = useState(undefined);
+  const [messageProps, setMessageProps] = useState(undefined);
+  const [hasHint, setHasHint] = useState(false);
+  const [hasMessage, setHasMessage] = useState(false);
+  const contextValue = useMemo(() => ({
+    labelProps,
+    setLabelProps,
+    hasHint,
+    setHasHint,
+    hintProps,
+    setHintProps,
+    hasMessage,
+    setHasMessage,
+    messageProps,
+    setMessageProps
+  }), [labelProps, setLabelProps, hasHint, setHasHint, hintProps, setHintProps, hasMessage, setHasMessage, messageProps, setMessageProps]);
   return React__default.createElement(FieldContext.Provider, {
-    value: value
-  }, React__default.createElement(Field$1, _extends$5({
-    ref: mergeRefs([ref, fieldRef])
-  }, props)));
+    value: contextValue
+  }, React__default.createElement(StyledField, _extends$5({}, props, {
+    ref: ref
+  })));
 });
 Field.displayName = 'Field';
 
-const Hint = React__default.forwardRef((props, ref) => React__default.createElement(Hint$1, _extends$5({
-  ref: ref
-}, props)));
+const Hint = forwardRef((props, ref) => {
+  const {
+    hintProps,
+    setHasHint
+  } = useFieldContext();
+  useEffect(() => {
+    setHasHint(true);
+    return () => setHasHint(false);
+  }, [setHasHint]);
+  return React__default.createElement(StyledHint, _extends$5({}, hintProps, props, {
+    ref: ref
+  }));
+});
 Hint.displayName = 'Hint';
 
-const Label = React__default.forwardRef((_ref, ref) => {
+const Label = forwardRef((_ref, ref) => {
   let {
+    onClick,
     onMouseEnter,
     onMouseLeave,
-    ...other
+    ...props
   } = _ref;
   const {
-    downshift: {
-      getLabelProps
-    }
-  } = useDropdownContext();
-  const {
-    setIsLabelHovered
+    labelProps
   } = useFieldContext();
-  const labelProps = getLabelProps({
-    onMouseEnter: composeEventHandlers(onMouseEnter, () => {
-      setIsLabelHovered(true);
-    }),
-    onMouseLeave: composeEventHandlers(onMouseLeave, () => {
-      setIsLabelHovered(false);
-    }),
-    ...other
-  });
-  return React__default.createElement(Label$1, _extends$5({
+  return React__default.createElement(StyledLabel, _extends$5({}, labelProps, {
+    onClick: composeEventHandlers(onClick, labelProps?.onClick),
+    onMouseEnter: composeEventHandlers(onMouseEnter, labelProps?.onMouseEnter),
+    onMouseLeave: composeEventHandlers(onMouseLeave, labelProps?.onMouseLeave)
+  }, props, {
     ref: ref
-  }, labelProps));
+  }));
 });
 Label.displayName = 'Label';
 Label.propTypes = {
+  hidden: PropTypes.bool,
   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 Message = forwardRef((props, ref) => {
   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);
+    messageProps,
+    setHasMessage
+  } = useFieldContext();
   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;
-    }))
-  );
+    setHasMessage(true);
+    return () => setHasMessage(false);
+  }, [setHasMessage]);
+  return React__default.createElement(StyledMessage, _extends$5({}, messageProps, props, {
+    ref: ref
+  }));
 });
-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
+Message.displayName = 'Message';
+Message.propTypes = {
+  validation: PropTypes.oneOf(VALIDATION),
+  validationLabel: PropTypes.string
 };
-Menu.defaultProps = {
-  placement: 'bottom-start',
-  isAnimated: true,
-  eventsEnabled: true,
-  maxHeight: '400px',
-  zIndex: 1000
+
+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 SvgPlusStroke = function SvgPlusStroke(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", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M7.5 2.5v12m6-6h-12"
+  })));
 };
 
-const Separator = React__default.forwardRef((props, ref) => React__default.createElement(StyledSeparator, _extends$5({
-  ref: ref
-}, props)));
-Separator.displayName = 'Separator';
+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 SvgChevronRightStroke = function SvgChevronRightStroke(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: "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"
+  })));
+};
 
 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) {
+var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
@@ -1691,9 +1321,8 @@ var SvgPlusStroke = function SvgPlusStroke(props) {
     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"
+    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"
   })));
 };
 
@@ -1716,317 +1345,621 @@ var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
   })));
 };
 
-const ItemContext = React__default.createContext(undefined);
-const useItemContext = () => {
-  const context = useContext(ItemContext);
+const OPTION_TYPE = ['add', 'danger', 'next', 'previous'];
+const PLACEMENT = ['auto', ...PLACEMENT$1];
+
+const OptionContext = createContext(undefined);
+const useOptionContext = () => {
+  const context = useContext(OptionContext);
   if (!context) {
-    throw new Error('This component must be rendered within an `Item` component.');
+    throw new Error('Error: this component must be rendered within an <Option>.');
   }
   return context;
 };
 
-const Item = React__default.forwardRef((_ref, forwardRef) => {
+const OptionMetaComponent = forwardRef((props, ref) => {
+  const {
+    isDisabled
+  } = useOptionContext();
+  return React__default.createElement(StyledOptionMeta, _extends$5({
+    isDisabled: isDisabled
+  }, props, {
+    ref: ref
+  }));
+});
+OptionMetaComponent.displayName = 'Option.Meta';
+const OptionMeta = OptionMetaComponent;
+
+const OptionComponent = forwardRef((_ref, ref) => {
   let {
-    value,
-    disabled,
-    isDanger,
-    component = StyledItem,
-    hasIcon,
     children,
+    icon,
+    isDisabled,
+    isHidden,
+    isSelected,
+    label,
+    type,
+    value,
     ...props
   } = _ref;
+  const contextValue = useMemo(() => ({
+    isDisabled
+  }), [isDisabled]);
   const {
-    selectedItems,
-    hasMenuRef,
-    itemSearchRegistry,
-    downshift: {
-      isOpen,
-      selectedItem,
-      highlightedIndex,
-      getItemProps,
-      setHighlightedIndex,
-      itemToString
-    }
-  } = useDropdownContext();
-  const {
-    itemIndexRef,
+    activeValue,
+    getOptionProps,
     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;
+  } = useComboboxContext();
+  const isActive = value === activeValue;
+  const optionRef = useRef(null);
   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);
+    if (isActive) {
+      setTimeout(() => {
+        if (optionRef.current && optionRef.current.scrollIntoView) {
+          optionRef.current.scrollIntoView({
+            block: 'nearest'
+          });
+        }
       });
-    } else {
-      isSelected = itemToString(selectedItem) === itemToString(value);
     }
-  } else {
-    isSelected = false;
-  }
-  useEffect(() => {
-    if (isOpen && !disabled && !selectedItems && isSelected) {
-      setHighlightedIndex(currentIndex);
+  }, [isActive]);
+  const renderActionIcon = iconType => {
+    switch (iconType) {
+      case 'add':
+        return React__default.createElement(SvgPlusStroke, null);
+      case 'next':
+        return React__default.createElement(SvgChevronRightStroke, null);
+      case 'previous':
+        return React__default.createElement(SvgChevronLeftStroke, null);
+      default:
+        return React__default.createElement(SvgCheckLgStroke, null);
     }
-  }, [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, {
+  };
+  const option = toOption({
+    value,
+    label,
+    isDisabled,
+    isHidden,
+    isSelected
+  });
+  const optionProps = getOptionProps({
+    option,
+    ref: mergeRefs([optionRef, ref])
+  });
+  return React__default.createElement(OptionContext.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, {
+  }, React__default.createElement(StyledOption, _extends$5({
+    isActive: isActive,
     isCompact: isCompact,
-    isVisible: isSelected
-  }, React__default.createElement(SvgCheckLgStroke, null)), children));
+    $type: type
+  }, props, optionProps), React__default.createElement(StyledOptionTypeIcon, {
+    isCompact: isCompact,
+    type: type
+  }, renderActionIcon(type)), icon && React__default.createElement(StyledOptionIcon, null, icon), React__default.createElement(StyledOptionContent, null, children || label || toString({
+    value
+  }))));
 });
-Item.displayName = 'Item';
-Item.propTypes = {
-  value: PropTypes.any,
-  disabled: PropTypes.bool
+OptionComponent.displayName = 'Option';
+OptionComponent.propTypes = {
+  icon: PropTypes.any,
+  isDisabled: PropTypes.bool,
+  isSelected: PropTypes.bool,
+  isHidden: PropTypes.bool,
+  label: PropTypes.string,
+  tagProps: PropTypes.object,
+  type: PropTypes.oneOf(OPTION_TYPE),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired
 };
+const Option = OptionComponent;
+Option.Meta = OptionMeta;
 
-const AddItemComponent = React__default.forwardRef((_ref, ref) => {
+const OptGroup = forwardRef((_ref, ref) => {
   let {
     children,
-    disabled,
+    content,
+    icon,
+    label,
+    'aria-label': ariaLabel,
+    onMouseDown,
     ...props
   } = _ref;
   const {
+    getOptGroupProps,
     isCompact
-  } = useMenuContext();
-  return React__default.createElement(StyledAddItem, _extends$5({
-    ref: ref,
-    disabled: disabled
-  }, props), React__default.createElement(StyledItemIcon, {
+  } = useComboboxContext();
+  const handleMouseDown = event => event.preventDefault();
+  const groupAriaLabel = useText(OptGroup, {
+    'aria-label': ariaLabel
+  }, 'aria-label', 'Group', !label );
+  const optGroupProps = getOptGroupProps({
+    'aria-label': groupAriaLabel || label
+  });
+  return React__default.createElement(StyledOption, _extends$5({
     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,
+    $type: "group",
+    onMouseDown: composeEventHandlers(onMouseDown, handleMouseDown),
+    role: "none"
+  }, props, {
+    ref: ref
+  }), React__default.createElement(StyledOptionContent, null, (content || label) && React__default.createElement(StyledOption, {
+    as: "div",
+    isCompact: isCompact,
+    $type: "header"
+  }, icon && React__default.createElement(StyledOptionTypeIcon, {
+    isCompact: isCompact,
+    type: "header"
+  }, icon), content || label), React__default.createElement(StyledOptGroup, _extends$5({
     isCompact: isCompact
-  }, props));
+  }, optGroupProps), React__default.createElement(StyledListboxSeparator, {
+    role: "none"
+  }), children)));
 });
-HeaderIcon.displayName = 'HeaderIcon';
+OptGroup.displayName = 'OptGroup';
+OptGroup.propTypes = {
+  content: PropTypes.any,
+  icon: PropTypes.any,
+  label: PropTypes.string
+};
 
-const HeaderItem = React__default.forwardRef((props, ref) => {
-  const {
-    isCompact
-  } = useMenuContext();
-  return React__default.createElement(StyledHeaderItem, _extends$5({
-    ref: ref,
-    isCompact: isCompact
-  }, props));
+const MenuContext = createContext(undefined);
+const useMenuContext = () => {
+  const context = useContext(MenuContext);
+  if (!context) {
+    throw new Error('Error: this component must be rendered within a <Menu>.');
+  }
+  return context;
+};
+
+const toItem = props => ({
+  value: props.value,
+  label: props.label,
+  ...(props.name && {
+    name: props.name
+  }),
+  ...(props.isDisabled && {
+    disabled: props.isDisabled
+  }),
+  ...(props.isSelected && {
+    selected: props.isSelected
+  }),
+  ...(props.selectionType && {
+    type: props.selectionType
+  }),
+  ...(props.type === 'next' && {
+    isNext: true
+  }),
+  ...(props.type === 'previous' && {
+    isPrevious: true
+  })
 });
-HeaderItem.displayName = 'HeaderItem';
+const toItems = (children, type) => Children.toArray(children).reduce((items, item) => {
+  const retVal = items;
+  if ( isValidElement(item)) {
+    if ('value' in item.props) {
+      retVal.push(toItem({
+        ...item.props,
+        selectionType: type
+      }));
+    } else {
+      const props = item.props;
+      const groupLabel = props.legend || props['aria-label'];
+      const isSelectableGroup = props.type && ['checkbox', 'radio'].includes(props.type);
+      if (groupLabel || isSelectableGroup) {
+        const groupItems = toItems(props.children, props.type);
+        retVal.push({
+          label: props.legend || props['aria-label'],
+          items: groupItems
+        });
+      }
+    }
+  }
+  return retVal;
+}, []);
 
-const ItemMeta = React__default.forwardRef((props, ref) => {
-  const {
-    isCompact
-  } = useMenuContext();
+const PLACEMENT_DEFAULT = 'bottom-start';
+const MenuList = forwardRef((_ref, ref) => {
+  let {
+    appendToNode,
+    hasArrow,
+    isCompact,
+    isExpanded,
+    fallbackPlacements: _fallbackPlacements,
+    maxHeight,
+    minHeight,
+    placement: _placement,
+    triggerRef,
+    zIndex,
+    children,
+    ...props
+  } = _ref;
+  const floatingRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(isExpanded);
+  const [height, setHeight] = useState();
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const [floatingPlacement, fallbackPlacements] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement, _fallbackPlacements);
   const {
-    isDisabled
-  } = useItemContext();
-  return React__default.createElement(StyledItemMeta, _extends$5({
-    ref: ref,
+    refs,
+    placement,
+    update,
+    floatingStyles: {
+      transform
+    }
+  } = useFloating({
+    elements: {
+      reference: triggerRef?.current,
+      floating: floatingRef?.current
+    },
+    placement: floatingPlacement,
+    middleware: [offset(theme.space.base * (hasArrow ? 2 : 1)), _placement === 'auto' ? autoPlacement() : flip({
+      fallbackPlacements
+    }), size({
+      apply: _ref2 => {
+        let {
+          rects,
+          availableHeight
+        } = _ref2;
+        if (!(minHeight === null || minHeight === 'fit-content')) {
+          if (rects.floating.height > availableHeight) {
+            setHeight(availableHeight);
+          }
+        }
+      }
+    })]
+  });
+  useEffect(() => {
+    let cleanup;
+    if (isExpanded && refs.reference.current && refs.floating.current) {
+      cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
+        elementResize: typeof ResizeObserver === 'function'
+      });
+    }
+    return () => cleanup && cleanup();
+  }, [isExpanded, refs.reference, refs.floating, update]);
+  useEffect(() => {
+    let timeout;
+    if (isExpanded) {
+      setIsVisible(true);
+    } else {
+      timeout = setTimeout(() => {
+        setIsVisible(false);
+        setHeight(undefined);
+      }, 200 );
+    }
+    return () => clearTimeout(timeout);
+  }, [isExpanded]);
+  useEffect(() => {
+    if (height) {
+      setHeight(undefined);
+      update();
+    }
+  }, [
+  children, update]);
+  const Node = React__default.createElement(StyledFloatingMenu, {
+    "data-garden-animate": isVisible,
+    isHidden: !isExpanded,
+    position: getMenuPosition(placement),
+    zIndex: zIndex,
+    style: {
+      transform
+    },
+    ref: floatingRef
+  }, React__default.createElement(StyledMenu, _extends$5({
+    "data-garden-animate-arrow": isVisible,
+    arrowPosition: hasArrow ? getArrowPosition(theme, placement) : undefined,
     isCompact: isCompact,
-    isDisabled: isDisabled
-  }, props));
+    minHeight: minHeight,
+    maxHeight: maxHeight,
+    style: {
+      height
+    }
+  }, props, {
+    ref: ref
+  }), isVisible && children));
+  return appendToNode ? createPortal(Node, appendToNode) : Node;
 });
-ItemMeta.displayName = 'ItemMeta';
+MenuList.displayName = 'MenuList';
+MenuList.propTypes = {
+  appendToNode: PropTypes.any,
+  hasArrow: PropTypes.bool,
+  isCompact: PropTypes.bool,
+  isExpanded: PropTypes.bool,
+  maxHeight: PropTypes.string,
+  minHeight: PropTypes.string,
+  placement: PropTypes.oneOf(PLACEMENT),
+  triggerRef: PropTypes.any,
+  zIndex: PropTypes.number
+};
+MenuList.defaultProps = {
+  maxHeight: '400px',
+  placement: PLACEMENT_DEFAULT,
+  zIndex: 1000
+};
 
-const MediaBody = React__default.forwardRef((props, ref) => {
+const Menu = forwardRef((_ref, ref) => {
+  let {
+    button,
+    buttonProps: _buttonProps = {},
+    children,
+    isCompact,
+    focusedValue: _focusedValue,
+    defaultFocusedValue,
+    defaultExpanded,
+    isExpanded: _isExpanded,
+    selectedItems,
+    onChange,
+    onMouseLeave,
+    ...props
+  } = _ref;
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const items = toItems(children);
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const environment = useWindow(theme);
   const {
-    isCompact
-  } = useMenuContext();
-  return React__default.createElement(StyledMediaBody, _extends$5({
-    ref: ref,
-    isCompact: isCompact
-  }, props));
-});
-MediaBody.displayName = 'MediaBody';
-
-const MediaFigure = props => {
+    isExpanded,
+    focusedValue,
+    getTriggerProps,
+    getMenuProps,
+    getItemProps,
+    getItemGroupProps,
+    getSeparatorProps
+  } = useMenu({
+    rtl: theme.rtl,
+    environment,
+    defaultFocusedValue,
+    focusedValue: _focusedValue,
+    defaultExpanded,
+    isExpanded: _isExpanded,
+    selectedItems,
+    items,
+    menuRef,
+    triggerRef,
+    onChange
+  });
   const {
-    isCompact
-  } = useMenuContext();
-  return React__default.createElement(StyledMediaFigure, _extends$5({
-    isCompact: isCompact
-  }, props));
+    onClick,
+    onKeyDown,
+    disabled,
+    ...buttonProps
+  } = _buttonProps;
+  const triggerProps = {
+    ...(isCompact && {
+      size: 'small'
+    }),
+    ...buttonProps,
+    ...getTriggerProps({
+      type: 'button',
+      onClick,
+      onKeyDown,
+      disabled
+    }),
+    ref: mergeRefs([triggerRef, ref])
+  };
+  const trigger = typeof button === 'function' ? button(triggerProps) : React__default.createElement(StyledButton, triggerProps, button, React__default.createElement(StyledButton.EndIcon, {
+    isRotated: isExpanded
+  }, React__default.createElement(SvgChevronDownStroke, null)));
+  const contextValue = useMemo(() => ({
+    isCompact,
+    focusedValue,
+    getItemProps,
+    getItemGroupProps,
+    getSeparatorProps
+  }), [isCompact, focusedValue, getItemProps, getItemGroupProps, getSeparatorProps]);
+  return React__default.createElement(MenuContext.Provider, {
+    value: contextValue
+  }, trigger, React__default.createElement(MenuList, _extends$5({}, props, getMenuProps({
+    onMouseLeave
+  }), {
+    ref: mergeRefs([menuRef, ref]),
+    isCompact: isCompact,
+    isExpanded: isExpanded,
+    triggerRef: triggerRef
+  }), children));
+});
+Menu.displayName = 'Menu';
+Menu.propTypes = {
+  appendToNode: PropTypes.any,
+  button: PropTypes.any.isRequired,
+  buttonProps: PropTypes.object,
+  defaultExpanded: PropTypes.bool,
+  defaultFocusedValue: PropTypes.string,
+  fallbackPlacements: PropTypes.arrayOf(PropTypes.any),
+  focusedValue: PropTypes.string,
+  hasArrow: PropTypes.bool,
+  isCompact: PropTypes.bool,
+  isExpanded: PropTypes.bool,
+  maxHeight: PropTypes.string,
+  minHeight: PropTypes.string,
+  onChange: PropTypes.func,
+  placement: PropTypes.oneOf(PLACEMENT),
+  selectedItems: PropTypes.arrayOf(PropTypes.any),
+  zIndex: PropTypes.number
+};
+Menu.defaultProps = {
+  maxHeight: '400px',
+  placement: 'bottom-start',
+  zIndex: 1000
 };
 
-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 ItemGroupContext = createContext({});
+const useItemGroupContext = () => {
+  return useContext(ItemGroupContext);
 };
 
-const NextItemComponent = React__default.forwardRef((_ref, ref) => {
+const ItemGroup = forwardRef((_ref, ref) => {
   let {
     children,
-    disabled,
+    content,
+    legend,
+    icon,
+    'aria-label': ariaLabel,
+    type,
     ...props
   } = _ref;
   const {
-    isCompact
+    isCompact,
+    getItemGroupProps
   } = useMenuContext();
-  return React__default.createElement(StyledNextItem, _extends$5({
-    ref: ref,
-    disabled: disabled
-  }, props), React__default.createElement(StyledItemIcon, {
+  const groupAriaLabel = useText(ItemGroup, {
+    'aria-label': ariaLabel
+  }, 'aria-label', 'Group', !legend );
+  const groupProps = getItemGroupProps({
+    'aria-label': groupAriaLabel || legend
+  });
+  const contextValue = useMemo(() => ({
+    type
+  }), [type]);
+  return React__default.createElement(ItemGroupContext.Provider, {
+    value: contextValue
+  }, React__default.createElement(StyledItem, _extends$5({
+    isCompact: isCompact,
+    $type: "group"
+  }, props, {
+    ref: ref
+  }), React__default.createElement(StyledItemContent, null, (content || legend) && React__default.createElement(StyledItem, {
+    as: "div",
+    isCompact: isCompact,
+    $type: "header"
+  }, icon && React__default.createElement(StyledItemTypeIcon, {
     isCompact: isCompact,
-    isDisabled: disabled,
-    isVisible: true
-  }, React__default.createElement(StyledNextIcon, {
-    isDisabled: disabled
-  })), children);
+    type: "header"
+  }, icon), content || legend), React__default.createElement(StyledItemGroup, _extends$5({
+    isCompact: isCompact
+  }, groupProps), React__default.createElement(StyledSeparator, {
+    role: "none"
+  }), 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;
+ItemGroup.displayName = 'ItemGroup';
+ItemGroup.propTypes = {
+  content: PropTypes.any,
+  icon: PropTypes.any,
+  legend: PropTypes.string,
+  type: PropTypes.oneOf(['checkbox', 'radio', undefined])
+};
+
+const ItemContext = createContext(undefined);
+const useItemContext = () => {
+  const context = useContext(ItemContext);
+  if (!context) {
+    throw new Error('Error: this component must be rendered within an <Item>.');
   }
-  return React__default.createElement(Item, _extends$5({
-    component: NextItemComponent,
-    "aria-expanded": true,
-    disabled: disabled,
-    value: value,
-    ref: ref
+  return context;
+};
+
+const ItemMetaComponent = forwardRef((props, ref) => {
+  const {
+    isDisabled
+  } = useItemContext();
+  return React__default.createElement(StyledItemMeta, _extends$5({
+    isDisabled: isDisabled
   }, props, {
-    hasIcon: true
+    ref: ref
   }));
 });
-NextItem.displayName = 'NextItem';
-NextItem.propTypes = {
-  value: PropTypes.any,
-  disabled: PropTypes.bool
-};
+ItemMetaComponent.displayName = 'Item.Meta';
+const ItemMeta = ItemMetaComponent;
 
-const PreviousItemComponent = React__default.forwardRef((_ref, ref) => {
+const ItemComponent = forwardRef((_ref, ref) => {
   let {
     children,
-    disabled,
+    value,
+    label = value,
+    isSelected,
+    icon,
+    isDisabled,
+    type,
+    name,
+    onClick,
+    onKeyDown,
+    onMouseEnter,
     ...props
   } = _ref;
+  const {
+    type: selectionType
+  } = useItemGroupContext();
+  const {
+    focusedValue,
+    getItemProps
+  } = useMenuContext();
+  const item = {
+    ...toItem({
+      value,
+      label,
+      name,
+      type,
+      isSelected,
+      isDisabled
+    }),
+    type: selectionType
+  };
+  const {
+    ref: _itemRef,
+    ...itemProps
+  } = getItemProps({
+    item,
+    onClick,
+    onKeyDown,
+    onMouseEnter
+  });
+  const isActive = value === focusedValue;
   const {
     isCompact
   } = useMenuContext();
-  return React__default.createElement(StyledPreviousItem, _extends$5({
-    ref: ref,
-    disabled: disabled
-  }, props), React__default.createElement(StyledItemIcon, {
+  const renderActionIcon = iconType => {
+    switch (iconType) {
+      case 'add':
+        return React__default.createElement(SvgPlusStroke, null);
+      case 'next':
+        return React__default.createElement(SvgChevronRightStroke, null);
+      case 'previous':
+        return React__default.createElement(SvgChevronLeftStroke, null);
+      default:
+        return React__default.createElement(SvgCheckLgStroke, null);
+    }
+  };
+  const contextValue = useMemo(() => ({
+    isDisabled
+  }), [isDisabled]);
+  return React__default.createElement(ItemContext.Provider, {
+    value: contextValue
+  }, React__default.createElement(StyledItem, _extends$5({
+    $type: type,
+    isCompact: isCompact,
+    isActive: isActive
+  }, props, itemProps, {
+    ref: mergeRefs([_itemRef, ref])
+  }), React__default.createElement(StyledItemTypeIcon, {
     isCompact: isCompact,
-    isDisabled: disabled,
-    isVisible: true
-  }, React__default.createElement(StyledPreviousIcon, {
-    isDisabled: disabled
-  })), children);
+    type: type
+  }, renderActionIcon(type)), icon && React__default.createElement(StyledItemIcon, null, icon), React__default.createElement(StyledItemContent, null, children || label)));
 });
-const PreviousItem = React__default.forwardRef((_ref2, ref) => {
+ItemComponent.displayName = 'Item';
+ItemComponent.propTypes = {
+  icon: PropTypes.any,
+  isDisabled: PropTypes.bool,
+  isSelected: PropTypes.bool,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  type: PropTypes.oneOf(OPTION_TYPE),
+  value: PropTypes.string.isRequired
+};
+const Item = ItemComponent;
+Item.Meta = ItemMeta;
+
+const Separator = forwardRef(
+(_ref, ref) => {
   let {
-    value,
-    disabled,
+    children,
     ...props
-  } = _ref2;
-  const {
-    previousIndexRef
-  } = useDropdownContext();
+  } = _ref;
   const {
-    itemIndexRef
+    getSeparatorProps
   } = 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
+  const separatorProps = getSeparatorProps();
+  return React__default.createElement(StyledSeparator, _extends$5({}, props, separatorProps, {
+    ref: ref
   }));
 });
-PreviousItem.displayName = 'PreviousItem';
-PreviousItem.propTypes = {
-  value: PropTypes.any,
-  disabled: PropTypes.bool
-};
+Separator.displayName = 'Separator';
 
-export { AddItem, Autocomplete, Combobox, Dropdown, Field, HeaderIcon, HeaderItem, Hint, Item, ItemMeta, Label, MediaBody, MediaFigure, MediaItem, Menu, Message, Multiselect, NextItem, PreviousItem, Select, Separator, Trigger };
+export { Combobox, Field, Hint, Item, ItemGroup, Label, Menu, Message, OptGroup, Option, Separator, Tag };