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

package/dist/index.esm.js

@@ -1,1973 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
-import * as React from 'react';
-import React__default, { createContext, useContext, cloneElement, Children, forwardRef, useRef, useState, useEffect, isValidElement, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import styled, { css, ThemeContext } from 'styled-components';
-import { useCombobox } from '@zendeskgarden/container-combobox';
-import { retrieveComponentStyles, DEFAULT_THEME, menuStyles, getColorV8, getLineHeight, focusStyles, arrowStyles, useText, useDocument, useWindow, PLACEMENT as PLACEMENT$1, getFloatingPlacements, getMenuPosition, getArrowPosition } from '@zendeskgarden/react-theming';
-import { Field as Field$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, platform, 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) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$5.apply(this, arguments);
-}
-
-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 ComboboxContext = createContext(undefined);
-const useComboboxContext = () => {
-  const context = useContext(ComboboxContext);
-  if (!context) {
-    throw new Error('Error: this component must be rendered within a <Combobox>.');
-  }
-  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 context;
-};
-
-const COMPONENT_ID$v = 'dropdowns.combobox.label';
-const StyledLabel = styled(Field$1.Label).attrs({
-  'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledLabel",
-  componentId: "sc-az6now-0"
-})(["vertical-align:revert;", ";"], props => retrieveComponentStyles(COMPONENT_ID$v, props));
-StyledLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$u = 'dropdowns.combobox.hint';
-const StyledHint = styled(Field$1.Hint).attrs({
-  'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.6'
-}).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(Field$1.Message).attrs({
-  'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.6'
-}).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.6'
-}).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.6'
-}).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.6'
-}).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.6'
-}).withConfig({
-  displayName: "StyledFloatingListbox",
-  componentId: "sc-1cp6spf-0"
-})(["top:0;left:0;", ";", ";"], props => menuStyles(props.position, {
-  theme: props.theme,
-  hidden: props.isHidden,
-  animationModifier: '[data-garden-animate="true"]',
-  zIndex: props.zIndex
-}), props => retrieveComponentStyles(COMPONENT_ID$p, props));
-StyledFloatingListbox.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$o = 'dropdowns.combobox.input';
-const colorStyles$8 = props => {
-  const placeholderColor = getColorV8('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.6'
-}).withConfig({
-  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.6'
-}).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' : getColorV8('background', 600 , props.theme);
-  let borderColor;
-  let hoverBorderColor;
-  let focusBorderColor;
-  let focusShade;
-  if (props.validation) {
-    borderColor = getColorV8(hue, SHADE, props.theme);
-    hoverBorderColor = borderColor;
-    if (props.validation === 'warning') {
-      focusBorderColor = getColorV8(hue, SHADE + 100, props.theme);
-      focusShade = SHADE + 100;
-    } else {
-      focusBorderColor = borderColor;
-    }
-  } else {
-    borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
-    hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
-    focusBorderColor = hoverBorderColor;
-  }
-  const disabledBackgroundColor = props.isBare ? undefined : getColorV8('neutralHue', SHADE - 500, props.theme);
-  const disabledBorderColor = getColorV8('neutralHue', SHADE - 400, props.theme);
-  const disabledForegroundColor = getColorV8('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, getColorV8('foreground', 600 , props.theme), 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.6'
-}).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$l = 'dropdowns.combobox.input_icon';
-const colorStyles$6 = props => {
-  const color = getColorV8('neutralHue', 600, props.theme);
-  const focusColor = getColorV8('neutralHue', 700, props.theme);
-  const disabledColor = getColorV8('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 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.6'
-}).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 COMPONENT_ID$k = 'dropdowns.combobox.option';
-const colorStyles$5 = props => {
-  let backgroundColor;
-  let boxShadow;
-  if (props.isActive && props.$type !== 'group' && props.$type !== 'header') {
-    const hue = props.$type === 'danger' ? 'dangerHue' : 'primaryHue';
-    backgroundColor = getColorV8(hue, 600, props.theme, 0.08);
-    boxShadow = `inset ${props.theme.rtl ? `-${props.theme.shadowWidths.md}` : props.theme.shadowWidths.md} 0 ${getColorV8(hue, 600, props.theme)}`;
-  }
-  const disabledForegroundColor = getColorV8('neutralHue', 400, props.theme);
-  let foregroundColor = getColorV8('foreground', 600 , props.theme);
-  if (props.$type === 'add') {
-    foregroundColor = getColorV8('primaryHue', 600, props.theme);
-  } else if (props.$type === 'danger') {
-    foregroundColor = getColorV8('dangerHue', 600, props.theme);
-  }
-  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.6'
-}).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 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.6'
-}).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.combobox.optgroup';
-const StyledOptGroup = styled.ul.attrs({
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  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.combobox.separator';
-const colorStyles$4 = props => {
-  const backgroundColor = getColorV8('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.6'
-}).withConfig({
-  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.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 StyledListbox = styled.ul.attrs({
-  'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  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.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.6'
-}).withConfig({
-  displayName: "StyledOptionIcon",
-  componentId: "sc-qsab3y-0"
-})(["flex-shrink:0;", ";", ";"], sizeStyles$2, props => retrieveComponentStyles(COMPONENT_ID$f, props));
-StyledOptionIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$e = 'dropdowns.combobox.option.meta';
-const colorStyles$3 = props => {
-  const color = getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme);
-  return css(["color:", ";"], color);
-};
-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 StyledOptionMeta = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  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
-};
-
-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 = getColorV8('neutralHue', 600, props.theme);
-  } else {
-    color = getColorV8('primaryHue', 600, props.theme);
-  }
-  return css(["opacity:", ";color:", ";", "[aria-selected='true'] > &{opacity:1;}", "[aria-disabled='true'] > &{color:inherit;}"], opacity, color, StyledOption, StyledOption);
-};
-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 {
-    children,
-    isCompact,
-    theme,
-    type,
-    ...props
-  } = _ref;
-  return cloneElement(Children.only(children), props);
-}).attrs({
-  'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.6'
-}).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 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.6'
-}).withConfig({
-  displayName: "StyledTag",
-  componentId: "sc-1alam0r-0"
-})(["&[aria-disabled='true']{color:", ";}&[hidden]{display:revert;", "}", ";"], props => props.hue ? undefined : getColorV8('neutralHue', 400, props.theme), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$c, props));
-StyledTag.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$b = 'dropdowns.combobox.value';
-const colorStyles$1 = props => {
-  const foregroundColor = props.isPlaceholder && getColorV8('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.6'
-}).withConfig({
-  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.combobox.tags_button';
-const colorStyles = props => {
-  const color = getColorV8('primaryHue', 600, props.theme);
-  return css(["color:", ";&:disabled{color:inherit;}"], color);
-};
-const StyledTagsButton = styled(StyledValue).attrs({
-  as: 'button',
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  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.menu';
-const StyledMenu = styled(StyledListbox).attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  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.menu.floating';
-const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledFloatingMenu",
-  componentId: "sc-1rc7ahb-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$8, props));
-StyledFloatingMenu.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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.6'
-}).withConfig({
-  displayName: "StyledItem",
-  componentId: "sc-1jp99dq-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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.6'
-}).withConfig({
-  displayName: "StyledItemContent",
-  componentId: "sc-1opglsb-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledItemContent.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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.6'
-}).withConfig({
-  displayName: "StyledItemGroup",
-  componentId: "sc-1umk3cg-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledItemGroup.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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.6'
-}).withConfig({
-  displayName: "StyledItemIcon",
-  componentId: "sc-w9orqb-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledItemIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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.6'
-}).withConfig({
-  displayName: "StyledItemMeta",
-  componentId: "sc-1unw3x1-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledItemMeta.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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.6'
-}).withConfig({
-  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.menu.button';
-const StyledButton = styled(Button).attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledButton",
-  componentId: "sc-5hs2jg-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'dropdowns.menu.separator';
-const StyledSeparator = styled(StyledListboxSeparator).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledSeparator",
-  componentId: "sc-8kqwen-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledSeparator.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const Listbox = forwardRef((_ref, ref) => {
-  let {
-    appendToNode,
-    children,
-    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 {
-    refs,
-    placement,
-    update,
-    floatingStyles: {
-      transform
-    }
-  } = 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(() => {
-    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(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
-    }
-  }, 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
-};
-
-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 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.legend,
-        options: groupOptions
-      });
-    }
-  }
-  return retVal;
-}, []);
-
-const TagAvatarComponent = Tag$1.Avatar;
-TagAvatarComponent.displayName = 'Tag.Avatar';
-const TagAvatar = TagAvatarComponent;
-
-const TagComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    option,
-    removeLabel,
-    tooltipZIndex,
-    ...props
-  } = _ref;
-  const {
-    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
-  })));
-});
-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 {
-    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,
-    ...props
-  } = _ref;
-  const {
-    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
-      }));
-    }
-    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,
-    isCompact,
-    isEditable,
-    isLabelHovered,
-    isMultiselectable,
-    maxHeight,
-    focusInset,
-    validation,
-    ...getTriggerProps({
-      onFocus: () => {
-        if (!isDisabled) {
-          if (isEditable) {
-            setIsInputHidden(false);
-          }
-          if (isMultiselectable) {
-            setIsTagGroupExpanded(true);
-          }
-        }
-      },
-      onBlur: event => {
-        if (event.relatedTarget === null || !triggerRef.current?.contains(event.relatedTarget)) {
-          if (isEditable) {
-            setIsInputHidden(true);
-          }
-          if (isMultiselectable) {
-            setIsTagGroupExpanded(false);
-          }
-        }
-      }
-    })
-  };
-  const inputProps = {
-    'aria-invalid': validation === 'error' || validation === 'warning',
-    hidden: isInputHidden,
-    isBare,
-    isCompact,
-    isEditable,
-    isMultiselectable,
-    placeholder,
-    ...getInputProps({
-      ..._inputProps
-    })
-  };
-  const listboxProps = getListboxProps({
-    'aria-label': _listboxAriaLabel
-  });
-  useEffect(() => {
-    if (!labelProps) {
-      const _labelProps = getLabelProps({
-        onMouseEnter: () => setIsLabelHovered(true),
-        onMouseLeave: () => setIsLabelHovered(false)
-      });
-      setLabelProps(_labelProps);
-    }
-    return () => labelProps && setLabelProps(undefined);
-  }, [getLabelProps, labelProps, setLabelProps]);
-  useEffect(() => {
-    if (!hintProps) {
-      const _hintProps = getHintProps();
-      setHintProps(_hintProps);
-    }
-    return () => hintProps && setHintProps(undefined);
-  }, [getHintProps, hintProps, setHintProps]);
-  useEffect(() => {
-    if (!messageProps) {
-      const _messageProps = getMessageProps();
-      setMessageProps(_messageProps);
-    }
-    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)));
-});
-Combobox.displayName = 'Combobox';
-Combobox.propTypes = {
-  activeIndex: PropTypes.number,
-  defaultActiveIndex: PropTypes.number,
-  defaultExpanded: PropTypes.bool,
-  endIcon: PropTypes.any,
-  focusInset: PropTypes.bool,
-  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 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 = forwardRef((_ref, ref) => {
-  let {
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    ...props
-  } = _ref;
-  const {
-    labelProps
-  } = useFieldContext();
-  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
-  }));
-});
-Label.displayName = 'Label';
-Label.propTypes = {
-  hidden: PropTypes.bool,
-  isRegular: PropTypes.bool
-};
-
-const Message = forwardRef((props, ref) => {
-  const {
-    messageProps,
-    setHasMessage
-  } = useFieldContext();
-  useEffect(() => {
-    setHasMessage(true);
-    return () => setHasMessage(false);
-  }, [setHasMessage]);
-  return React__default.createElement(StyledMessage, _extends$5({}, messageProps, props, {
-    ref: ref
-  }));
-});
-Message.displayName = 'Message';
-Message.propTypes = {
-  validation: PropTypes.oneOf(VALIDATION),
-  validationLabel: PropTypes.string
-};
-
-const FieldComponent = 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: contextValue
-  }, React__default.createElement(StyledField, _extends$5({}, props, {
-    ref: ref
-  })));
-});
-FieldComponent.displayName = 'Field';
-const Field = FieldComponent;
-Field.Hint = Hint;
-Field.Label = Label;
-Field.Message = Message;
-
-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"
-  })));
-};
-
-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 SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    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"
-  })));
-};
-
-var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M1 9l4 4L15 3"
-  })));
-};
-
-const 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('Error: this component must be rendered within an <Option>.');
-  }
-  return context;
-};
-
-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 {
-    children,
-    icon,
-    isDisabled,
-    isHidden,
-    isSelected,
-    label,
-    type,
-    value,
-    ...props
-  } = _ref;
-  const contextValue = useMemo(() => ({
-    isDisabled
-  }), [isDisabled]);
-  const {
-    activeValue,
-    getOptionProps,
-    isCompact
-  } = useComboboxContext();
-  const isActive = value === activeValue;
-  const optionRef = useRef(null);
-  useEffect(() => {
-    if (isActive) {
-      setTimeout(() => {
-        if (optionRef.current && optionRef.current.scrollIntoView) {
-          optionRef.current.scrollIntoView({
-            block: 'nearest'
-          });
-        }
-      });
-    }
-  }, [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);
-    }
-  };
-  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(StyledOption, _extends$5({
-    isActive: isActive,
-    isCompact: isCompact,
-    $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
-  }))));
-});
-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 OptGroup = forwardRef((_ref, ref) => {
-  let {
-    children,
-    content,
-    icon,
-    legend,
-    'aria-label': ariaLabel,
-    onMouseDown,
-    ...props
-  } = _ref;
-  const {
-    getOptGroupProps,
-    isCompact
-  } = useComboboxContext();
-  const handleMouseDown = event => event.preventDefault();
-  const groupAriaLabel = useText(OptGroup, {
-    'aria-label': ariaLabel
-  }, 'aria-label', 'Group', !legend );
-  const optGroupProps = getOptGroupProps({
-    'aria-label': groupAriaLabel || legend
-  });
-  return React__default.createElement(StyledOption, _extends$5({
-    isCompact: isCompact,
-    $type: "group",
-    onMouseDown: composeEventHandlers(onMouseDown, handleMouseDown),
-    role: "none"
-  }, props, {
-    ref: ref
-  }), React__default.createElement(StyledOptionContent, null, (content || legend) && React__default.createElement(StyledOption, {
-    as: "div",
-    isCompact: isCompact,
-    $type: "header"
-  }, icon && React__default.createElement(StyledOptionTypeIcon, {
-    isCompact: isCompact,
-    type: "header"
-  }, icon), content || legend), React__default.createElement(StyledOptGroup, _extends$5({
-    isCompact: isCompact
-  }, optGroupProps), React__default.createElement(StyledListboxSeparator, {
-    role: "none"
-  }), children)));
-});
-OptGroup.displayName = 'OptGroup';
-OptGroup.propTypes = {
-  content: PropTypes.any,
-  icon: PropTypes.any,
-  legend: PropTypes.string
-};
-
-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
-  })
-});
-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 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 {
-    refs,
-    placement,
-    update,
-    floatingStyles: {
-      transform
-    }
-  } = useFloating({
-    platform: {
-      ...platform,
-      isRTL: () => theme.rtl
-    },
-    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,
-    minHeight: minHeight,
-    maxHeight: maxHeight,
-    style: {
-      height
-    }
-  }, props, {
-    ref: ref
-  }), isVisible && children));
-  return appendToNode ? createPortal(Node, appendToNode) : Node;
-});
-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 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 {
-    isExpanded,
-    focusedValue,
-    getTriggerProps,
-    getMenuProps,
-    getItemProps,
-    getItemGroupProps,
-    getSeparatorProps
-  } = useMenu({
-    rtl: theme.rtl,
-    environment,
-    defaultFocusedValue,
-    focusedValue: _focusedValue,
-    defaultExpanded,
-    isExpanded: _isExpanded,
-    selectedItems,
-    items,
-    menuRef,
-    triggerRef,
-    onChange
-  });
-  const {
-    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 ItemGroupContext = createContext({});
-const useItemGroupContext = () => {
-  return useContext(ItemGroupContext);
-};
-
-const ItemGroup = forwardRef((_ref, ref) => {
-  let {
-    children,
-    content,
-    legend,
-    icon,
-    'aria-label': ariaLabel,
-    type,
-    ...props
-  } = _ref;
-  const {
-    isCompact,
-    getItemGroupProps
-  } = useMenuContext();
-  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,
-    type: "header"
-  }, icon), content || legend), React__default.createElement(StyledItemGroup, _extends$5({
-    isCompact: isCompact
-  }, groupProps), React__default.createElement(StyledSeparator, {
-    role: "none"
-  }), children))));
-});
-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 context;
-};
-
-const ItemMetaComponent = forwardRef((props, ref) => {
-  const {
-    isDisabled
-  } = useItemContext();
-  return React__default.createElement(StyledItemMeta, _extends$5({
-    isDisabled: isDisabled
-  }, props, {
-    ref: ref
-  }));
-});
-ItemMetaComponent.displayName = 'Item.Meta';
-const ItemMeta = ItemMetaComponent;
-
-const ItemComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    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();
-  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,
-    type: type
-  }, renderActionIcon(type)), icon && React__default.createElement(StyledItemIcon, null, icon), React__default.createElement(StyledItemContent, null, children || label)));
-});
-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 {
-    children,
-    ...props
-  } = _ref;
-  const {
-    getSeparatorProps
-  } = useMenuContext();
-  const separatorProps = getSeparatorProps();
-  return React__default.createElement(StyledSeparator, _extends$5({}, props, separatorProps, {
-    ref: ref
-  }));
-});
-Separator.displayName = 'Separator';
-
-export { Combobox, Field, Hint, Item, ItemGroup, Label, Menu, Message, OptGroup, Option, Separator, Tag };