@redsift/pickers 11.5.0 → 11.6.0-alpha.0

package/index.js

@@ -1,1823 +1,18 @@
-import React, { forwardRef, useContext, useEffect, useRef, useState, useReducer, useMemo, useCallback } from 'react';
-import classNames from 'classnames';
-import styled from 'styled-components';
-import { baseContainer, FocusWithinGroupContext, ListboxContext, isComponent, Item as Item$1, useListboxItem, useTheme, Flexbox, StyledItem, getContainerProps, AppContainerContext, partitionComponents, useId, useMessageFormatter, FocusWithinGroupActionType, IconButton, ListboxActionType, EventKey, ListboxReducer, ThemeProvider, FocusWithinGroup, Text, Theme, useFocusOnListItem, RenderedListboxItem, ButtonsColorPalette, ConditionalWrapper, StyledGradientBorder, Icon } from '@redsift/design-system';
-import { usePopoverContext, useMergeRefs, FloatingPortal, StyledPopoverContent, PopoverContent, Popover } from '@redsift/popovers';
-import { mdiClose, mdiChevronDown } from '@redsift/icons';
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-  return target;
-}
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-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);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-function _toPrimitive(input, hint) {
-  if (typeof input !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
-
-/**
- * Component style.
- */
-const StyledComboboxContentFooter = styled.div`
-  ${baseContainer}
-`;
-
-const _excluded$7 = ["children", "className"];
-const COMPONENT_NAME$f = 'ComboboxContentFooter';
-const CLASSNAME$f = 'redsift-combobox-content-footer';
-
-/**
- * The ComboboxContentFooter component.
- */
-const ComboboxContentFooter = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      children,
-      className
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$7);
-  return /*#__PURE__*/React.createElement(StyledComboboxContentFooter, _extends({}, forwardedProps, {
-    className: classNames(ComboboxContentFooter.className, className),
-    ref: ref
-  }), children);
-});
-ComboboxContentFooter.className = CLASSNAME$f;
-ComboboxContentFooter.displayName = COMPONENT_NAME$f;
-
-/**
- * Component style.
- */
-const StyledComboboxContentHeader = styled.div`
-  ${baseContainer}
-`;
-
-const _excluded$6 = ["children", "className"];
-const COMPONENT_NAME$e = 'ComboboxContentHeader';
-const CLASSNAME$e = 'redsift-combobox-content-header';
-
-/**
- * The ComboboxContentHeader component.
- */
-const ComboboxContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      children,
-      className
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$6);
-  return /*#__PURE__*/React.createElement(StyledComboboxContentHeader, _extends({}, forwardedProps, {
-    className: classNames(ComboboxContentHeader.className, className),
-    ref: ref
-  }), children);
-});
-ComboboxContentHeader.className = CLASSNAME$e;
-ComboboxContentHeader.displayName = COMPONENT_NAME$e;
-
-const ComboboxContext = /*#__PURE__*/React.createContext(null);
-
-/**
- * Component variant.
- */
-const ComboboxSelectionMode = {
-  single: 'single',
-  multiple: 'multiple'
-};
-const ComboboxVariant = {
-  options: 'options',
-  suggestions: 'suggestions'
-};
-
-/**
- * Context props.
- */
-
-/**
- * Component props.
- */
-
-const _excluded$5 = ["children", "className", "renderFreeTextItem"];
-const COMPONENT_NAME$d = 'ComboboxContentListbox';
-const CLASSNAME$d = 'redsift-combobox-content-listbox';
-
-/**
- * The ComboboxContentListbox component.
- */
-const ComboboxContentListbox = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      children,
-      className,
-      renderFreeTextItem
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$5);
-  const focusContext = useContext(FocusWithinGroupContext);
-  const listboxState = useContext(ListboxContext);
-  const comboboxState = useContext(ComboboxContext);
-  useEffect(() => {
-    if (focusContext && focusContext.state.delayedAction && focusContext.state.tabStops.length) {
-      focusContext.dispatch(focusContext.state.delayedAction);
-    }
-  });
-  const canHaveMultipleSelections = (comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.selectionMode) === ComboboxSelectionMode.multiple;
-  const canHaveFreeText = (comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.variant) === ComboboxVariant.suggestions;
-  const cloneChildAndPush = (child, array) => {
-    if (!canHaveMultipleSelections || !canHaveFreeText || canHaveMultipleSelections && canHaveFreeText && !comboboxState.value.includes(child.props.value)) {
-      array.push( /*#__PURE__*/React.cloneElement(child, {
-        key: child.props.value,
-        hasCheckbox: canHaveMultipleSelections && !canHaveFreeText
-      }));
-    }
-  };
-  const renderedChildren = [];
-  if (Array.isArray(children)) {
-    for (const child of children) {
-      if (isComponent(Item$1)(child)) {
-        if (focusContext.state.maxOptionsLength) {
-          if (renderedChildren.length < focusContext.state.maxOptionsLength) {
-            if (!focusContext.state.filter) {
-              cloneChildAndPush(child, renderedChildren);
-            } else {
-              const {
-                value: filterValue,
-                type,
-                caseSensitive
-              } = focusContext.state.filter;
-              if (!filterValue) {
-                cloneChildAndPush(child, renderedChildren);
-              } else if (caseSensitive && (type === 'startsWith' && child.props.value.startsWith(filterValue) || type === 'contains' && child.props.value.includes(filterValue) || type === 'endsWith' && child.props.value.endsWith(filterValue))) {
-                cloneChildAndPush(child, renderedChildren);
-              } else if (!caseSensitive && (type === 'startsWith' && child.props.value.toLowerCase().startsWith(filterValue.toLowerCase()) || type === 'contains' && child.props.value.toLowerCase().includes(filterValue.toLowerCase()) || type === 'endsWith' && child.props.value.toLowerCase().endsWith(filterValue.toLowerCase()))) {
-                cloneChildAndPush(child, renderedChildren);
-              }
-            }
-          }
-        } else {
-          cloneChildAndPush(child, renderedChildren);
-        }
-      } else {
-        renderedChildren.push(child);
-      }
-    }
-  }
-  const {
-    tabIndex,
-    isFocused,
-    isSelected,
-    isDisabled,
-    handleKeyDown,
-    handleClick
-  } = useListboxItem({
-    domElementRef: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.freeTextItemRef,
-    value: (comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.inputValue) || '',
-    id: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.freeTextItemId
-  });
-  const theme = useTheme();
-  const renderedFreeTextItem = comboboxState !== null && comboboxState !== void 0 && comboboxState.inputValue ? renderFreeTextItem && typeof renderFreeTextItem === 'function' ? renderFreeTextItem(comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.inputValue, comboboxState, listboxState) : comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.inputValue : null;
-  return /*#__PURE__*/React.createElement(Flexbox, _extends({
-    className: classNames(ComboboxContentListbox.className, className)
-  }, forwardedProps, {
-    ref: ref,
-    flexDirection: "column",
-    gap: "0px",
-    margin: "8px 0px",
-    style: {
-      outline: 'none'
-    },
-    width: "100%"
-  }), canHaveMultipleSelections && canHaveFreeText ? /*#__PURE__*/React.createElement(StyledItem, {
-    role: "option",
-    id: comboboxState.freeTextItemId,
-    $color: "primary",
-    $isActive: isSelected,
-    $isDisabled: isDisabled,
-    $isGradient: false,
-    $isHovered: isFocused,
-    $hasBorder: false,
-    $hasCheckbox: false,
-    $theme: theme,
-    "aria-selected": isSelected,
-    className: classNames(Item$1.className, className),
-    onClick: handleClick,
-    ref: comboboxState.freeTextItemRef,
-    onKeyDown: handleKeyDown,
-    tabIndex: tabIndex,
-    style: !comboboxState.inputValue ? {
-      height: '0',
-      visibility: 'hidden',
-      padding: '0'
-    } : undefined
-  }, renderedFreeTextItem) : null, Array.isArray(children) ? renderedChildren : children);
-});
-ComboboxContentListbox.className = CLASSNAME$d;
-ComboboxContentListbox.displayName = COMPONENT_NAME$d;
-
-const COMPONENT_NAME$c = 'ComboboxContent';
-const CLASSNAME$c = 'redsift-combobox-content';
-
-/**
- * The ComboboxContent component.
- */
-const BaseComboboxContent = /*#__PURE__*/forwardRef((props, ref) => {
-  var _comboboxState$inputV;
-  const {
-    children,
-    className,
-    style
-  } = props;
-  const containerProps = getContainerProps(props);
-  const {
-    getFloatingProps,
-    isOpen,
-    refs,
-    strategy,
-    x,
-    y
-  } = usePopoverContext();
-  const popoverRef = useMergeRefs([refs.setFloating, ref]);
-  const appContainerState = useContext(AppContainerContext);
-  const comboboxState = useContext(ComboboxContext);
-  const focusContext = useContext(FocusWithinGroupContext);
-  const listboxState = useContext(ListboxContext);
-  const theme = useTheme();
-  const [[header], [listbox], [footer]] = partitionComponents(React.Children.toArray(children), [isComponent('ComboboxContentHeader'), isComponent('ComboboxContentListbox'), isComponent('ComboboxContentFooter')]);
-  return /*#__PURE__*/React.createElement(FloatingPortal, {
-    root: appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.appContainerRef.current
-  }, isOpen && /*#__PURE__*/React.createElement(StyledPopoverContent, _extends({
-    $theme: theme,
-    ref: popoverRef
-  }, getFloatingProps(props), {
-    style: _objectSpread2(_objectSpread2({
-      position: strategy,
-      top: y !== null && y !== void 0 ? y : 0,
-      left: x !== null && x !== void 0 ? x : 0
-    }, style), comboboxState !== null && comboboxState !== void 0 && (_comboboxState$inputV = comboboxState.inputValue) !== null && _comboboxState$inputV !== void 0 && _comboboxState$inputV.length && focusContext.state.tabStops.length === 0 ? {
-      display: 'none'
-    } : {}),
-    className: classNames(PopoverContent.className, BaseComboboxContent.className, className),
-    "aria-disabled": listboxState.state.isDisabled
-  }), /*#__PURE__*/React.createElement(Flexbox, _extends({
-    flexDirection: "column",
-    gap: "0px",
-    width: "100%"
-  }, containerProps), header, listbox, footer)));
-});
-BaseComboboxContent.className = CLASSNAME$c;
-BaseComboboxContent.displayName = COMPONENT_NAME$c;
-const ComboboxContent = Object.assign(BaseComboboxContent, {
-  Header: ComboboxContentHeader,
-  Listbox: ComboboxContentListbox,
-  Footer: ComboboxContentFooter
-});
-
-var collapse$1 = "Collapse";
-var expand$1 = "Expand";
-var selected$1 = "{count, plural, =0 {None selected} other {# selected}}";
-var unselect$1 = "Unselect {label}";
-var enUS = {
-	collapse: collapse$1,
-	expand: expand$1,
-	selected: selected$1,
-	unselect: unselect$1
-};
-
-var collapse = "Réduire";
-var expand = "Développer";
-var selected = "{count, plural, =0 {Aucun sélectionné} =1 {1 sélectionné} other {# sélectionnés}}";
-var unselect = "Déselectionner {label}";
-var frFR = {
-	collapse: collapse,
-	expand: expand,
-	selected: selected,
-	unselect: unselect
-};
-
-var intlMessages = {
-  'en-US': enUS,
-  'fr-FR': frFR
-};
-
-const _excluded$4 = ["aria-controls", "aria-expanded", "aria-haspopup", "role"];
-const COMPONENT_NAME$b = 'ComboboxTrigger';
-const CLASSNAME$b = 'redsift-combobox-trigger';
-
-/**
- * The ComboboxTrigger component.
- */
-const ComboboxTrigger = /*#__PURE__*/forwardRef((props, ref) => {
-  var _renderedChildren$pro;
-  const [id] = useId();
-  const {
-    children,
-    hideExpandButton,
-    openOnFocus,
-    hideClearButton,
-    pillProps
-  } = props;
-  const format = useMessageFormatter(intlMessages);
-  const {
-    getReferenceProps,
-    isOpen,
-    handleOpen: handleOpenPopover,
-    refs
-  } = usePopoverContext();
-  const childrenRef = children.ref;
-  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
-  const focusContext = useContext(FocusWithinGroupContext);
-  const comboboxState = useContext(ComboboxContext);
-  const listboxState = useContext(ListboxContext);
-  const theme = useTheme();
-  const canHaveMultipleSelections = (comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.selectionMode) === ComboboxSelectionMode.multiple;
-  const canHaveFreeText = (comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.variant) === ComboboxVariant.suggestions;
-  const renderedChildren = typeof children === 'function' ? children({
-    value: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.value,
-    isOpen
-  }) : children;
-  const isTextArea = isComponent('TextArea')(renderedChildren);
-  const isTextField = isComponent('TextField')(renderedChildren);
-  const hasMultipleLines = isTextArea && (comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.inputValue.includes('\n'));
-  const _inputRef = useRef();
-  const inputRef = (_renderedChildren$pro = renderedChildren.props.inputRef) !== null && _renderedChildren$pro !== void 0 ? _renderedChildren$pro : _inputRef;
-  const handleChange = value => {
-    focusContext.dispatch({
-      type: FocusWithinGroupActionType.FILTER_LIST,
-      payload: {
-        filter: _objectSpread2({
-          value: value || ''
-        }, comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.filter)
-      }
-    });
-    comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.setInputValue(value);
-  };
-  const handleKeyDown = event => {
-    const code = event.code;
-    if (code === 'Escape' || code === 'Tab') {
-      if (isOpen) {
-        handleOpenPopover(false);
-      }
-      if (canHaveMultipleSelections && canHaveFreeText && comboboxState.inputValue) {
-        listboxState.dispatch({
-          type: ListboxActionType.TOGGLE,
-          payload: {
-            value: comboboxState.inputValue,
-            activedescendant: [comboboxState.freeTextItemId, comboboxState.inputValue]
-          }
-        });
-      }
-    }
-    if ((/^.$/.test(event.key) || code === 'Backspace') && !hasMultipleLines) {
-      if (!isOpen) {
-        handleOpenPopover(true);
-      }
-      if (canHaveMultipleSelections && canHaveFreeText) {
-        focusContext.dispatch({
-          type: FocusWithinGroupActionType.DELAY_ACTION,
-          payload: {
-            type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
-            payload: {
-              key: EventKey.Home,
-              ctrlKey: event.ctrlKey
-            }
-          }
-        });
-      }
-    }
-    if (canHaveMultipleSelections && comboboxState.inputValue === '' && code === 'Backspace') {
-      listboxState.dispatch({
-        type: ListboxActionType.SET,
-        payload: {
-          values: comboboxState.value.slice(0, comboboxState.value.length - 1),
-          activedescendant: focusContext.state.activedescendant
-        }
-      });
-    }
-    if (code === 'ArrowDown' && !hasMultipleLines) {
-      if (!isOpen) {
-        handleOpenPopover(true);
-      }
-      focusContext.dispatch({
-        type: FocusWithinGroupActionType.DELAY_ACTION,
-        payload: {
-          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
-          payload: {
-            key: focusContext.state.selectedId !== null ? EventKey.ArrowDown : EventKey.Home,
-            ctrlKey: event.ctrlKey
-          }
-        }
-      });
-      event.preventDefault();
-    }
-    if (code === 'ArrowUp' && !hasMultipleLines) {
-      if (!isOpen) {
-        handleOpenPopover(true);
-      }
-      focusContext.dispatch({
-        type: FocusWithinGroupActionType.DELAY_ACTION,
-        payload: {
-          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
-          payload: {
-            key: focusContext.state.selectedId !== null ? EventKey.ArrowUp : EventKey.End,
-            ctrlKey: event.ctrlKey
-          }
-        }
-      });
-      event.preventDefault();
-    }
-    if (code === 'Enter') {
-      var _focusContext$state$a;
-      if (isTextField || isTextArea && !event.shiftKey) {
-        event.preventDefault();
-      }
-      if (canHaveMultipleSelections && canHaveFreeText && ((_focusContext$state$a = focusContext.state.activedescendant) === null || _focusContext$state$a === void 0 ? void 0 : _focusContext$state$a[0]) === comboboxState.freeTextItemId && comboboxState.inputValue) {
-        listboxState.dispatch({
-          type: ListboxActionType.TOGGLE,
-          payload: {
-            value: comboboxState.inputValue,
-            activedescendant: [comboboxState.freeTextItemId, comboboxState.inputValue]
-          }
-        });
-        handleOpenPopover(false);
-      } else if (isOpen && focusContext.state.selectedId) {
-        if (canHaveMultipleSelections) {
-          var _focusContext$state$a2, _focusContext$state$a3;
-          listboxState.dispatch({
-            type: ListboxActionType.TOGGLE,
-            payload: {
-              value: (_focusContext$state$a2 = (_focusContext$state$a3 = focusContext.state.activedescendant) === null || _focusContext$state$a3 === void 0 ? void 0 : _focusContext$state$a3[1]) !== null && _focusContext$state$a2 !== void 0 ? _focusContext$state$a2 : '',
-              activedescendant: focusContext.state.activedescendant
-            }
-          });
-        } else {
-          var _focusContext$state$a4, _focusContext$state$a5;
-          listboxState.dispatch({
-            type: ListboxActionType.SET,
-            payload: {
-              values: [(_focusContext$state$a4 = (_focusContext$state$a5 = focusContext.state.activedescendant) === null || _focusContext$state$a5 === void 0 ? void 0 : _focusContext$state$a5[1]) !== null && _focusContext$state$a4 !== void 0 ? _focusContext$state$a4 : ''],
-              activedescendant: focusContext.state.activedescendant
-            }
-          });
-        }
-      } else if (!event.shiftKey) {
-        var _comboboxState$formRe, _comboboxState$formRe2, _comboboxState$submit, _comboboxState$submit2;
-        comboboxState === null || comboboxState === void 0 ? void 0 : (_comboboxState$formRe = comboboxState.formRef) === null || _comboboxState$formRe === void 0 ? void 0 : (_comboboxState$formRe2 = _comboboxState$formRe.current) === null || _comboboxState$formRe2 === void 0 ? void 0 : _comboboxState$formRe2.submit();
-        comboboxState === null || comboboxState === void 0 ? void 0 : (_comboboxState$submit = comboboxState.submitRef) === null || _comboboxState$submit === void 0 ? void 0 : (_comboboxState$submit2 = _comboboxState$submit.current) === null || _comboboxState$submit2 === void 0 ? void 0 : _comboboxState$submit2.click();
-      }
-    }
-  };
-  const handleOpen = () => {
-    if (isOpen) {
-      handleOpenPopover(false);
-    } else {
-      var _inputRef$current, _focusContext$state$a6;
-      handleOpenPopover(true);
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-      focusContext.dispatch({
-        type: FocusWithinGroupActionType.DELAY_ACTION,
-        payload: {
-          type: FocusWithinGroupActionType.FOCUS_ON_LIST,
-          payload: {
-            id: (_focusContext$state$a6 = focusContext.state.activedescendant) === null || _focusContext$state$a6 === void 0 ? void 0 : _focusContext$state$a6[0],
-            filter: _objectSpread2({
-              value: ''
-            }, comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.filter)
-          }
-        }
-      });
-    }
-  };
-  const handleFocus = () => {
-    var _inputRef$current2;
-    if (openOnFocus) {
-      handleOpen();
-    }
-    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.select();
-  };
-  const handleBlur = () => {
-    if (canHaveMultipleSelections) {
-      if (!canHaveFreeText) {
-        comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.setInputValue('');
-      }
-    } else {
-      if (canHaveFreeText) {
-        comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.setValue(comboboxState.inputValue);
-      } else {
-        comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.setInputValue(listboxState.state.selectedValues[0]);
-      }
-    }
-  };
-  const handleClear = () => {
-    listboxState.dispatch({
-      type: ListboxActionType.SET,
-      payload: {
-        values: [],
-        activedescendant: ['', '']
-      }
-    });
-  };
-  useEffect(() => {
-    if (canHaveMultipleSelections) {
-      focusContext.dispatch({
-        type: FocusWithinGroupActionType.FILTER_LIST,
-        payload: {
-          filter: _objectSpread2({
-            value: ''
-          }, comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.filter)
-        }
-      });
-      comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.setValue(listboxState.state.selectedValues);
-      comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.setInputValue('');
-      handleOpenPopover(false);
-    } else {
-      focusContext.dispatch({
-        type: FocusWithinGroupActionType.FILTER_LIST,
-        payload: {
-          filter: _objectSpread2({
-            value: listboxState.state.selectedValues[0] || ''
-          }, comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.filter)
-        }
-      });
-      comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.setValue(listboxState.state.selectedValues[0]);
-      if (listboxState.state.selectedValues.length) {
-        comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.setInputValue(listboxState.state.selectedValues[0]);
-      }
-      handleOpenPopover(false);
-    }
-  }, [listboxState.state]);
-  if (isTextField || isTextArea) {
-    var _props$children, _focusContext$state$a7, _comboboxState$value;
-    const _getReferenceProps = getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
-        ref: triggerRef
-      }, props), renderedChildren.props), {}, {
-        children: (_props$children = renderedChildren.props.children) !== null && _props$children !== void 0 ? _props$children : ''
-      })),
-      {
-        'aria-controls': ariaControls,
-        'aria-expanded': ariaExpanded,
-        'aria-haspopup': ariaHaspopup,
-        role
-      } = _getReferenceProps,
-      forwardedProps = _objectWithoutProperties(_getReferenceProps, _excluded$4);
-    const inputProps = {
-      'aria-activedescendant': isOpen ? (_focusContext$state$a7 = focusContext.state.activedescendant) === null || _focusContext$state$a7 === void 0 ? void 0 : _focusContext$state$a7[0] : undefined,
-      'aria-controls': ariaControls,
-      'aria-expanded': ariaExpanded,
-      'aria-haspopup': ariaHaspopup,
-      autoComplete: 'off',
-      autoCapitalize: 'off',
-      autoCorrect: 'off',
-      spellCheck: 'false',
-      'aria-autocomplete': canHaveMultipleSelections ? 'list' : undefined,
-      'aria-description': canHaveMultipleSelections ? format('selected', {
-        count: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.value.length
-      }) : undefined,
-      onKeyDown: handleKeyDown,
-      role
-    };
-    return /*#__PURE__*/React.cloneElement(renderedChildren, _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
-      theme,
-      className: classNames(renderedChildren.props.className, comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.triggerClassName),
-      isDisabled: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.isDisabled,
-      isInvalid: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.isInvalid,
-      onChange: handleChange,
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      value: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.inputValue
-    }, isTextField ? {
-      inputProps,
-      inputRef,
-      onClear: handleClear,
-      hasClearButton: hideClearButton ? false : {
-        isDisabled: (comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.isDisabled) || (comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.value) && (comboboxState === null || comboboxState === void 0 ? void 0 : (_comboboxState$value = comboboxState.value) === null || _comboboxState$value === void 0 ? void 0 : _comboboxState$value.length) === 0,
-        onClick: () => inputRef.current.focus()
-      },
-      pills: canHaveMultipleSelections ? (comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.value).map(v => _objectSpread2({
-        isDisabled: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.isDisabled,
-        children: [v, /*#__PURE__*/React.createElement(IconButton, {
-          key: `${id}-pill-${v}-icon-button`,
-          icon: mdiClose,
-          "aria-label": format('unselect', {
-            label: v
-          }),
-          onClick: event => {
-            event.preventDefault();
-            listboxState.dispatch({
-              type: ListboxActionType.TOGGLE,
-              payload: {
-                value: v,
-                activedescendant: focusContext.state.activedescendant
-              }
-            });
-          }
-        })]
-      }, pillProps)) : undefined,
-      internal: (value, isDisabled, isInvalid, isRequired) => {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, typeof renderedChildren.props.internal === 'function' ? renderedChildren.props.internal(value, isDisabled, isInvalid, isRequired) : renderedChildren.props.internal, hideExpandButton ? null : /*#__PURE__*/React.createElement(IconButton, {
-          theme: theme,
-          "aria-label": format(!isOpen ? 'expand' : 'collapse'),
-          color: "grey",
-          icon: mdiChevronDown,
-          onClick: handleOpen,
-          isDisabled: isDisabled,
-          tabIndex: -1,
-          iconProps: {
-            style: {
-              transition: 'transform 300ms ease-out',
-              transform: `rotate(${isOpen ? '-180deg' : '0'})`
-            }
-          }
-        }));
-      }
-    } : {
-      textareaProps: inputProps,
-      textareaRef: inputRef
-    }));
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, renderedChildren);
-});
-ComboboxTrigger.className = CLASSNAME$b;
-ComboboxTrigger.displayName = COMPONENT_NAME$b;
-
-const COMPONENT_NAME$a = 'Combobox';
-const CLASSNAME$a = 'redsift-combobox';
-
-/**
- * The Combobox component.
- */
-const BaseCombobox = props => {
-  const {
-    defaultValue,
-    description,
-    descriptionProps,
-    filter = {
-      type: 'startsWith',
-      caseSensitive: false
-    },
-    formRef,
-    submitRef,
-    inputValue: propsInputValue,
-    isDisabled,
-    isInvalid,
-    maxOptionsLength,
-    minWidth = 'trigger-width',
-    onChange,
-    onInputChange,
-    selectionMode = ComboboxSelectionMode.single,
-    theme: propsTheme,
-    triggerClassName,
-    value,
-    variant = ComboboxVariant.options,
-    wrapperProps
-  } = props;
-  const theme = useTheme(propsTheme);
-  const [selectedValue, setValue] = useState(value || defaultValue || (selectionMode === 'multiple' ? [] : ''));
-  const [inputValue, setInputValue] = useState(propsInputValue || '');
-  useEffect(() => {
-    if (value) {
-      state.setValue(value);
-    }
-  }, [value]);
-  useEffect(() => {
-    if (propsInputValue) {
-      state.setInputValue(propsInputValue);
-    }
-  }, [propsInputValue]);
-
-  /** Listbox context */
-  const [listboxState, listboxDispatch] = useReducer(ListboxReducer, {
-    isDisabled,
-    selectedValues: selectionMode === ComboboxSelectionMode.multiple ? selectedValue : [selectedValue],
-    selectionMode
-  });
-  const listboxContext = useMemo(() => ({
-    state: listboxState,
-    dispatch: listboxDispatch
-  }), [listboxState]);
-  useEffect(() => {
-    listboxDispatch({
-      type: ListboxActionType.UPDATE_OPTIONS,
-      payload: {
-        isDisabled: isDisabled || false
-      }
-    });
-  }, [isDisabled]);
-  const freeTextItemRef = useRef();
-  const [freeTextItemId] = useId();
-
-  /** Combobox context. */
-  const state = {
-    filter,
-    formRef,
-    submitRef,
-    value: selectedValue,
-    inputValue,
-    isDisabled: isDisabled || false,
-    isInvalid: isInvalid || false,
-    selectionMode,
-    variant,
-    freeTextItemRef: freeTextItemRef,
-    freeTextItemId,
-    triggerClassName,
-    setValue(value) {
-      if (isDisabled) {
-        return;
-      }
-      const previousValue = selectedValue;
-      setValue(value);
-      if (value !== previousValue && onChange) {
-        onChange(value);
-      }
-    },
-    setInputValue(value) {
-      if (isDisabled) {
-        return;
-      }
-      const previousValue = inputValue;
-      setInputValue(value);
-      if (value !== previousValue && onInputChange) {
-        onInputChange(value);
-      }
-    }
-  };
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    value: {
-      theme
-    }
-  }, /*#__PURE__*/React.createElement(FocusWithinGroup, {
-    focusType: "virtual-focus",
-    focusOnInit: false,
-    maxOptionsLength: maxOptionsLength
-  }, /*#__PURE__*/React.createElement(ComboboxContext.Provider, {
-    value: state
-  }, /*#__PURE__*/React.createElement(ListboxContext.Provider, {
-    value: listboxContext
-  }, /*#__PURE__*/React.createElement(Flexbox, _extends({
-    flexDirection: "column",
-    alignItems: "flex-start",
-    gap: "0px"
-  }, wrapperProps), /*#__PURE__*/React.createElement(Popover, _extends({
-    theme: theme,
-    overrideDisplayName: {
-      content: 'ComboboxContent',
-      trigger: 'ComboboxTrigger'
-    },
-    placement: "bottom-start",
-    role: "listbox",
-    minWidth: minWidth
-  }, props)), description && typeof description === 'string' ? /*#__PURE__*/React.createElement(Text, _extends({
-    theme: theme,
-    marginTop: "8px",
-    variant: "caption",
-    color: isInvalid ? 'error' : theme === Theme.light ? 'dark-grey' : 'white'
-  }, descriptionProps), description) : /*#__PURE__*/React.isValidElement(description) ? description : null)))));
-};
-BaseCombobox.className = CLASSNAME$a;
-BaseCombobox.displayName = COMPONENT_NAME$a;
-const Combobox = Object.assign(BaseCombobox, {
-  Trigger: ComboboxTrigger,
-  Content: ComboboxContent
-});
-
-function useMenuItem(props) {
-  const {
-    domElementRef,
-    id,
-    isDisabled,
-    onClick,
-    isLinkMenuItem,
-    linkRef,
-    hasPopup
-  } = props;
-  const {
-    handleOpen,
-    hideInsteadOfClose,
-    setHideInsteadOfClose
-  } = usePopoverContext();
-  const {
-    tabIndex,
-    isFocused,
-    handleKeyDown: handleFocusKeyDown,
-    handleClick: handleFocusClick
-  } = useFocusOnListItem({
-    domElementRef,
-    isDisabled: isDisabled,
-    id
-  });
-  useEffect(() => {
-    if (hasPopup && !hideInsteadOfClose) {
-      setHideInsteadOfClose === null || setHideInsteadOfClose === void 0 ? void 0 : setHideInsteadOfClose(true);
-    }
-  }, [hasPopup, hideInsteadOfClose, setHideInsteadOfClose]);
-  const handleKeyDown = useCallback(event => {
-    const code = event.code;
-    if (code === 'Enter' || code === 'Space') {
-      if (isLinkMenuItem) {
-        var _linkRef$current;
-        linkRef === null || linkRef === void 0 ? void 0 : (_linkRef$current = linkRef.current) === null || _linkRef$current === void 0 ? void 0 : _linkRef$current.click();
-      } else {
-        onClick === null || onClick === void 0 ? void 0 : onClick();
-      }
-    }
-    handleFocusKeyDown(event);
-    handleOpen(false);
-  }, []);
-  const handleClick = useCallback(() => {
-    handleFocusClick();
-    onClick === null || onClick === void 0 ? void 0 : onClick();
-    handleOpen(false);
-  }, []);
-  useEffect(() => {
-    if (isFocused && domElementRef.current) {
-      var _current;
-      (_current = domElementRef.current) === null || _current === void 0 ? void 0 : _current.focus();
-    }
-  }, [isFocused]);
-  return {
-    tabIndex,
-    isFocused,
-    isDisabled,
-    handleKeyDown,
-    handleClick
-  };
-}
-
-const _excluded$3 = ["borderRadius", "children", "className", "color", "hasBorder", "id", "isActive", "isDisabled", "isHovered", "theme", "onClick"];
-const COMPONENT_NAME$9 = 'Item';
-const CLASSNAME$9 = 'redsift-item';
-const RenderedMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      borderRadius = '0',
-      children,
-      className,
-      color: propsColor,
-      hasBorder,
-      id: propsId,
-      isActive,
-      isDisabled: propsIsDisabled,
-      isHovered,
-      theme: propsTheme,
-      onClick
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$3);
-  const [_id] = useId();
-  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
-  const _ref = useRef();
-  const divRef = useMergeRefs([ref, _ref]);
-  const linkRef = useRef(null);
-  const isLinkMenuItem = isComponent('Link')(children);
-  const {
-    tabIndex,
-    isFocused,
-    isDisabled,
-    handleKeyDown,
-    handleClick
-  } = useMenuItem({
-    domElementRef: _ref,
-    id,
-    isDisabled: propsIsDisabled,
-    onClick: onClick,
-    isLinkMenuItem,
-    linkRef,
-    hasPopup: props['aria-haspopup'] !== undefined
-  });
-  const theme = useTheme(propsTheme);
-  const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
-  const isGradient = color === ButtonsColorPalette.radar;
-  return /*#__PURE__*/React.createElement(ConditionalWrapper, {
-    condition: isGradient,
-    wrapper: children => /*#__PURE__*/React.createElement(StyledGradientBorder, {
-      $borderRadius: borderRadius,
-      $color: color,
-      $isActive: isActive,
-      $isDisabled: isDisabled,
-      $isHovered: isHovered,
-      $theme: theme,
-      width: "auto"
-    }, children)
-  }, /*#__PURE__*/React.createElement(StyledItem, _extends({
-    as: "li",
-    role: isLinkMenuItem ? 'none' : 'menuitem'
-  }, forwardedProps, {
-    id: id,
-    $borderRadius: borderRadius,
-    $color: color,
-    $hasBorder: hasBorder,
-    $hasCheckbox: false,
-    $isActive: isActive,
-    $isDisabled: isDisabled,
-    $isGradient: isGradient,
-    $isHovered: isHovered || isFocused,
-    $theme: theme,
-    "aria-disabled": isDisabled,
-    className: classNames(Item.className, className),
-    onClick: isDisabled ? undefined : handleClick,
-    ref: divRef,
-    onKeyDown: handleKeyDown,
-    tabIndex: tabIndex
-  }), isLinkMenuItem ? /*#__PURE__*/React.cloneElement(children, {
-    role: 'menuitem',
-    ref: linkRef
-  }) : children));
-});
-
-/**
- * The Item component.
- */
-const Item = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    value
-  } = props;
-  const focusContext = useContext(FocusWithinGroupContext);
-  const isListbox = focusContext.state.listRole === 'listbox';
-  if (!focusContext.state.filter) {
-    return isListbox ? /*#__PURE__*/React.createElement(RenderedListboxItem, _extends({}, props, {
-      value: props.value,
-      ref: ref
-    })) : /*#__PURE__*/React.createElement(RenderedMenuItem, _extends({}, props, {
-      ref: ref
-    }));
-  }
-  const {
-    value: filterValue,
-    type,
-    caseSensitive
-  } = focusContext.state.filter;
-  if (!filterValue) {
-    return isListbox ? /*#__PURE__*/React.createElement(RenderedListboxItem, _extends({}, props, {
-      value: props.value,
-      ref: ref
-    })) : /*#__PURE__*/React.createElement(RenderedMenuItem, _extends({}, props, {
-      ref: ref
-    }));
-  } else if (caseSensitive && (type === 'startsWith' && value.startsWith(filterValue) || type === 'contains' && value.includes(filterValue) || type === 'endsWith' && value.endsWith(filterValue))) {
-    return isListbox ? /*#__PURE__*/React.createElement(RenderedListboxItem, _extends({}, props, {
-      value: props.value,
-      ref: ref
-    })) : /*#__PURE__*/React.createElement(RenderedMenuItem, _extends({}, props, {
-      ref: ref
-    }));
-  } else if (!caseSensitive && (type === 'startsWith' && value.toLowerCase().startsWith(filterValue.toLowerCase()) || type === 'contains' && value.toLowerCase().includes(filterValue.toLowerCase()) || type === 'endsWith' && value.toLowerCase().endsWith(filterValue.toLowerCase()))) {
-    return isListbox ? /*#__PURE__*/React.createElement(RenderedListboxItem, _extends({}, props, {
-      value: props.value,
-      ref: ref
-    })) : /*#__PURE__*/React.createElement(RenderedMenuItem, _extends({}, props, {
-      ref: ref
-    }));
-  }
-  return null;
-});
-Item.className = CLASSNAME$9;
-Item.displayName = COMPONENT_NAME$9;
-
-/**
- * Component style.
- */
-const StyledMenuButtonContentFooter = styled.div`
-  ${baseContainer}
-`;
-
-const _excluded$2 = ["children", "className"];
-const COMPONENT_NAME$8 = 'MenuButtonContentFooter';
-const CLASSNAME$8 = 'redsift-combobox-content-footer';
-
-/**
- * The MenuButtonContentFooter component.
- */
-const MenuButtonContentFooter = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      children,
-      className
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$2);
-  return /*#__PURE__*/React.createElement(StyledMenuButtonContentFooter, _extends({}, forwardedProps, {
-    className: classNames(MenuButtonContentFooter.className, className),
-    ref: ref
-  }), children);
-});
-MenuButtonContentFooter.className = CLASSNAME$8;
-MenuButtonContentFooter.displayName = COMPONENT_NAME$8;
-
-/**
- * Component style.
- */
-const StyledMenuButtonContentHeader = styled.div`
-  ${baseContainer}
-`;
-
-const _excluded$1 = ["children", "className"];
-const COMPONENT_NAME$7 = 'MenuButtonContentHeader';
-const CLASSNAME$7 = 'redsift-combobox-content-header';
-
-/**
- * The MenuButtonContentHeader component.
- */
-const MenuButtonContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      children,
-      className
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1);
-  return /*#__PURE__*/React.createElement(StyledMenuButtonContentHeader, _extends({}, forwardedProps, {
-    className: classNames(MenuButtonContentHeader.className, className),
-    ref: ref
-  }), children);
-});
-MenuButtonContentHeader.className = CLASSNAME$7;
-MenuButtonContentHeader.displayName = COMPONENT_NAME$7;
-
-const _excluded = ["children", "className"];
-const COMPONENT_NAME$6 = 'MenuButtonContentMenu';
-const CLASSNAME$6 = 'redsift-menu-button-content-menu';
-
-/**
- * The MenuButtonContentMenu component.
- */
-const MenuButtonContentMenu = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      children,
-      className
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
-  const focusContext = useContext(FocusWithinGroupContext);
-  useEffect(() => {
-    if (focusContext && focusContext.state.delayedAction && focusContext.state.tabStops.length) {
-      focusContext.dispatch(focusContext.state.delayedAction);
-    }
-  }, [focusContext.state.delayedAction, focusContext.state.tabStops.length]);
-  return /*#__PURE__*/React.createElement(Flexbox, _extends({
-    flexDirection: "column",
-    gap: "8px",
-    margin: "8px 0px",
-    width: "100%",
-    className: classNames(MenuButtonContentMenu.className, className),
-    role: "menu",
-    as: "ul"
-  }, forwardedProps, {
-    ref: ref
-  }), children);
-});
-MenuButtonContentMenu.className = CLASSNAME$6;
-MenuButtonContentMenu.displayName = COMPONENT_NAME$6;
-
-const COMPONENT_NAME$5 = 'MenuButtonContent';
-const CLASSNAME$5 = 'redsift-menu-button-content';
-
-/**
- * The MenuButtonContent component.
- */
-const BaseMenuButtonContent = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    style
-  } = props;
-  const containerProps = getContainerProps(props);
-  const {
-    getFloatingProps,
-    isOpen,
-    refs,
-    strategy,
-    x,
-    y,
-    hideInsteadOfClose
-  } = usePopoverContext();
-  const popoverRef = useMergeRefs([refs.setFloating, ref]);
-  const appContainerState = useContext(AppContainerContext);
-  const theme = useTheme();
-  const [[header], [menu], [footer]] = partitionComponents(React.Children.toArray(children), [isComponent('MenuButtonContentHeader'), isComponent('MenuButtonContentMenu'), isComponent('MenuButtonContentFooter')]);
-  return /*#__PURE__*/React.createElement(FloatingPortal, {
-    root: appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.appContainerRef.current
-  }, isOpen || hideInsteadOfClose ? /*#__PURE__*/React.createElement(StyledPopoverContent, _extends({
-    $theme: theme,
-    ref: popoverRef
-  }, getFloatingProps(props), {
-    style: _objectSpread2({
-      position: strategy,
-      top: y !== null && y !== void 0 ? y : 0,
-      left: x !== null && x !== void 0 ? x : 0,
-      display: hideInsteadOfClose && !isOpen ? 'none' : 'flex'
-    }, style),
-    className: classNames(PopoverContent.className, BaseMenuButtonContent.className, className)
-  }), !header && !menu && !footer ? /*#__PURE__*/React.createElement(Flexbox, _extends({
-    flexDirection: "column",
-    gap: "0px",
-    width: "100%"
-  }, containerProps), /*#__PURE__*/React.createElement(MenuButtonContentMenu, null, children)) : /*#__PURE__*/React.createElement(Flexbox, _extends({
-    flexDirection: "column",
-    gap: "0px",
-    width: "100%"
-  }, containerProps), header, menu, footer)) : null);
-});
-BaseMenuButtonContent.className = CLASSNAME$5;
-BaseMenuButtonContent.displayName = COMPONENT_NAME$5;
-const MenuButtonContent = Object.assign(BaseMenuButtonContent, {
-  Header: MenuButtonContentHeader,
-  Menu: MenuButtonContentMenu,
-  Footer: MenuButtonContentFooter
-});
-
-const MenuButtonContext = /*#__PURE__*/React.createContext(null);
-
-const COMPONENT_NAME$4 = 'MenuButtonTrigger';
-const CLASSNAME$4 = 'redsift-menu-button-trigger';
-
-/**
- * The MenuButtonTrigger component.
- */
-const MenuButtonTrigger = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    children
-  } = props;
-  const {
-    getReferenceProps,
-    isOpen,
-    handleOpen,
-    refs
-  } = usePopoverContext();
-  const childrenRef = children.ref;
-  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
-  const focusContext = useContext(FocusWithinGroupContext);
-  const menuButtonContext = useContext(MenuButtonContext);
-  const theme = useTheme();
-  const renderedChildren = typeof children === 'function' ? children({
-    isOpen
-  }) : children;
-  const handleKeyDown = event => {
-    const code = event.code;
-    if (code === 'Escape' || code === 'Tab') {
-      if (isOpen) {
-        handleOpen(false);
-      }
-    } else if (code === 'ArrowDown') {
-      if (!isOpen) {
-        handleOpen(true);
-      }
-      if (focusContext.state.selectedId !== null) {
-        focusContext.dispatch({
-          type: FocusWithinGroupActionType.DELAY_ACTION,
-          payload: {
-            type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
-            payload: {
-              key: EventKey.ArrowDown,
-              ctrlKey: event.ctrlKey
-            }
-          }
-        });
-      } else {
-        focusContext.dispatch({
-          type: FocusWithinGroupActionType.DELAY_ACTION,
-          payload: {
-            type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
-            payload: {
-              key: EventKey.Home,
-              ctrlKey: event.ctrlKey
-            }
-          }
-        });
-      }
-      event.preventDefault();
-      event.stopPropagation();
-    } else if (code === 'ArrowUp') {
-      if (!isOpen) {
-        handleOpen(true);
-      }
-      focusContext.dispatch({
-        type: FocusWithinGroupActionType.DELAY_ACTION,
-        payload: {
-          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
-          payload: {
-            key: focusContext.state.selectedId !== null ? EventKey.ArrowUp : EventKey.Home,
-            ctrlKey: event.ctrlKey
-          }
-        }
-      });
-      event.preventDefault();
-      event.stopPropagation();
-    } else if (code === 'Home') {
-      if (!isOpen) {
-        handleOpen(true);
-      }
-      focusContext.dispatch({
-        type: FocusWithinGroupActionType.DELAY_ACTION,
-        payload: {
-          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
-          payload: {
-            key: EventKey.Home,
-            ctrlKey: event.ctrlKey
-          }
-        }
-      });
-      event.preventDefault();
-      event.stopPropagation();
-    } else if (code === 'End') {
-      if (!isOpen) {
-        handleOpen(true);
-      }
-      focusContext.dispatch({
-        type: FocusWithinGroupActionType.DELAY_ACTION,
-        payload: {
-          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
-          payload: {
-            key: EventKey.End,
-            ctrlKey: event.ctrlKey
-          }
-        }
-      });
-      event.preventDefault();
-      event.stopPropagation();
-    } else if (code === 'Enter') {
-      if (isOpen && focusContext.state.selectedId) {
-        var _document$getElementB, _document$getElementB2, _document$getElementB3, _document$getElementB4;
-        (_document$getElementB = document.getElementById(focusContext.state.selectedId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.click();
-        (_document$getElementB2 = document.getElementById(focusContext.state.selectedId)) === null || _document$getElementB2 === void 0 ? void 0 : (_document$getElementB3 = _document$getElementB2.getElementsByTagName('a')) === null || _document$getElementB3 === void 0 ? void 0 : (_document$getElementB4 = _document$getElementB3[0]) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.click();
-      }
-    }
-  };
-  const handleClick = event => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (isOpen) {
-      handleOpen(false);
-    } else {
-      var _focusContext$state$a, _focusContext$state$a2;
-      handleOpen(true);
-      focusContext.dispatch({
-        type: FocusWithinGroupActionType.DELAY_ACTION,
-        payload: {
-          type: FocusWithinGroupActionType.FOCUS_ON_LIST,
-          payload: {
-            id: (_focusContext$state$a = (_focusContext$state$a2 = focusContext.state.activedescendant) === null || _focusContext$state$a2 === void 0 ? void 0 : _focusContext$state$a2[0]) !== null && _focusContext$state$a !== void 0 ? _focusContext$state$a : ''
-          }
-        }
-      });
-    }
-  };
-  if (isComponent('Button')(renderedChildren) || isComponent('IconButton')(renderedChildren)) {
-    var _props$children, _focusContext$state$a3, _menuButtonContext$co, _menuButtonContext$va;
-    return /*#__PURE__*/React.cloneElement(renderedChildren, _objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
-      ref: triggerRef
-    }, props), renderedChildren.props), {}, {
-      children: (_props$children = renderedChildren.props.children) !== null && _props$children !== void 0 ? _props$children : ''
-    }))), {}, {
-      theme,
-      'aria-activedescendant': isOpen ? (_focusContext$state$a3 = focusContext.state.activedescendant) === null || _focusContext$state$a3 === void 0 ? void 0 : _focusContext$state$a3[0] : undefined,
-      className: classNames(renderedChildren.props.className, menuButtonContext === null || menuButtonContext === void 0 ? void 0 : menuButtonContext.triggerClassName),
-      color: (_menuButtonContext$co = menuButtonContext === null || menuButtonContext === void 0 ? void 0 : menuButtonContext.color) !== null && _menuButtonContext$co !== void 0 ? _menuButtonContext$co : renderedChildren.props.color,
-      isActive: isOpen,
-      isDisabled: menuButtonContext === null || menuButtonContext === void 0 ? void 0 : menuButtonContext.isDisabled,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      role: 'button',
-      variant: (_menuButtonContext$va = menuButtonContext === null || menuButtonContext === void 0 ? void 0 : menuButtonContext.variant) !== null && _menuButtonContext$va !== void 0 ? _menuButtonContext$va : renderedChildren.props.variant
-    }));
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, renderedChildren);
-});
-MenuButtonTrigger.className = CLASSNAME$4;
-MenuButtonTrigger.displayName = COMPONENT_NAME$4;
-
-const COMPONENT_NAME$3 = 'MenuButton';
-const CLASSNAME$3 = 'redsift-menu-button';
-
-/**
- * The MenuButton component.
- */
-const BaseMenuButton = props => {
-  const {
-    color,
-    description,
-    descriptionProps,
-    isDisabled,
-    label,
-    labelProps,
-    minWidth = 'trigger-width',
-    theme: propsTheme,
-    triggerClassName,
-    variant,
-    wrapperProps
-  } = props;
-  const theme = useTheme(propsTheme);
-
-  /** MenuButton context. */
-  const state = {
-    color,
-    isDisabled: isDisabled || false,
-    theme,
-    triggerClassName,
-    variant
-  };
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    value: {
-      theme
-    }
-  }, /*#__PURE__*/React.createElement(FocusWithinGroup, {
-    focusType: "virtual-focus",
-    listRole: "menu",
-    focusOnInit: false
-  }, /*#__PURE__*/React.createElement(MenuButtonContext.Provider, {
-    value: state
-  }, /*#__PURE__*/React.createElement(Flexbox, _extends({
-    flexDirection: "column",
-    alignItems: "flex-start",
-    gap: "0px"
-  }, wrapperProps), label && typeof label === 'string' ? /*#__PURE__*/React.createElement(Text, labelProps, label) : label ? label : null, /*#__PURE__*/React.createElement(Popover, _extends({
-    theme: theme,
-    overrideDisplayName: {
-      content: 'MenuButtonContent',
-      trigger: 'MenuButtonTrigger'
-    },
-    placement: "bottom-end",
-    minWidth: minWidth
-  }, props)), description && typeof description === 'string' ? /*#__PURE__*/React.createElement(Text, _extends({
-    theme: theme,
-    marginTop: "8px",
-    variant: "caption",
-    color: theme === Theme.light ? 'dark-grey' : 'white'
-  }, descriptionProps), description) : description ? description : null))));
-};
-BaseMenuButton.className = CLASSNAME$3;
-BaseMenuButton.displayName = COMPONENT_NAME$3;
-const MenuButton = Object.assign(BaseMenuButton, {
-  Trigger: MenuButtonTrigger,
-  Content: MenuButtonContent
-});
-
-const COMPONENT_NAME$2 = 'SelectContent';
-const CLASSNAME$2 = 'redsift-select-content';
-
-/**
- * The SelectContent component.
- */
-const SelectContent = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    style
-  } = props;
-  const containerProps = getContainerProps(props);
-  const {
-    getFloatingProps,
-    isOpen,
-    refs,
-    strategy,
-    x,
-    y
-  } = usePopoverContext();
-  const popoverRef = useMergeRefs([refs.setFloating, ref]);
-  const appContainerState = useContext(AppContainerContext);
-  const focusContext = useContext(FocusWithinGroupContext);
-  const listboxState = useContext(ListboxContext);
-  const theme = useTheme();
-  useEffect(() => {
-    if (focusContext && focusContext.state.delayedAction && focusContext.state.tabStops.length) {
-      focusContext.dispatch(focusContext.state.delayedAction);
-    }
-  }, [focusContext.state.delayedAction, focusContext.state.tabStops.length]);
-  return /*#__PURE__*/React.createElement(FloatingPortal, {
-    root: appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.appContainerRef.current
-  }, isOpen && /*#__PURE__*/React.createElement(StyledPopoverContent, _extends({
-    $theme: theme,
-    ref: popoverRef
-  }, getFloatingProps(props), {
-    style: _objectSpread2({
-      position: strategy,
-      top: y !== null && y !== void 0 ? y : 0,
-      left: x !== null && x !== void 0 ? x : 0
-    }, style),
-    className: classNames(PopoverContent.className, SelectContent.className, className),
-    "aria-disabled": listboxState.state.isDisabled
-  }), /*#__PURE__*/React.createElement(Flexbox, _extends({
-    flexDirection: "column",
-    gap: "0px",
-    margin: "8px 0px",
-    width: "100%"
-  }, containerProps), children)));
-});
-SelectContent.className = CLASSNAME$2;
-SelectContent.displayName = COMPONENT_NAME$2;
-
-const SelectContext = /*#__PURE__*/React.createContext(null);
-
-const COMPONENT_NAME$1 = 'SelectTrigger';
-const CLASSNAME$1 = 'redsift-select-trigger';
-
-/**
- * The SelectTrigger component.
- */
-const SelectTrigger = /*#__PURE__*/forwardRef((props, ref) => {
-  var _renderedChildren$pro;
-  const {
-    children,
-    hideExpandButton
-  } = props;
-  const {
-    getReferenceProps,
-    isOpen,
-    handleOpen,
-    refs
-  } = usePopoverContext();
-  const childrenRef = children.ref;
-  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
-  const focusContext = useContext(FocusWithinGroupContext);
-  const selectContext = useContext(SelectContext);
-  const listboxState = useContext(ListboxContext);
-  const theme = useTheme();
-  const renderedChildren = typeof children === 'function' ? children({
-    value: selectContext === null || selectContext === void 0 ? void 0 : selectContext.value,
-    isOpen
-  }) : children;
-  const _inputRef = useRef();
-  const inputRef = (_renderedChildren$pro = renderedChildren.props.inputRef) !== null && _renderedChildren$pro !== void 0 ? _renderedChildren$pro : _inputRef;
-  const handleKeyDown = event => {
-    const code = event.code;
-    if (code === 'Escape') {
-      if (isOpen) {
-        handleOpen(false);
-      }
-    } else if (code === 'ArrowDown') {
-      var _focusContext$state$a;
-      if (!isOpen) {
-        handleOpen(true);
-      }
-      if (focusContext.state.selectedId !== null) {
-        focusContext.dispatch({
-          type: FocusWithinGroupActionType.DELAY_ACTION,
-          payload: {
-            type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
-            payload: {
-              key: EventKey.ArrowDown,
-              ctrlKey: event.ctrlKey
-            }
-          }
-        });
-      } else if (!((_focusContext$state$a = focusContext.state.activedescendant) !== null && _focusContext$state$a !== void 0 && _focusContext$state$a[0])) {
-        focusContext.dispatch({
-          type: FocusWithinGroupActionType.DELAY_ACTION,
-          payload: {
-            type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
-            payload: {
-              key: EventKey.Home,
-              ctrlKey: event.ctrlKey
-            }
-          }
-        });
-      } else {
-        var _focusContext$state$a2, _focusContext$state$a3;
-        focusContext.dispatch({
-          type: FocusWithinGroupActionType.DELAY_ACTION,
-          payload: {
-            type: FocusWithinGroupActionType.FOCUS_ON_LIST,
-            payload: {
-              id: (_focusContext$state$a2 = (_focusContext$state$a3 = focusContext.state.activedescendant) === null || _focusContext$state$a3 === void 0 ? void 0 : _focusContext$state$a3[0]) !== null && _focusContext$state$a2 !== void 0 ? _focusContext$state$a2 : ''
-            }
-          }
-        });
-      }
-      event.preventDefault();
-    } else if (code === 'ArrowUp') {
-      if (!isOpen) {
-        handleOpen(true);
-      }
-      focusContext.dispatch({
-        type: FocusWithinGroupActionType.DELAY_ACTION,
-        payload: {
-          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
-          payload: {
-            key: focusContext.state.selectedId !== null ? EventKey.ArrowUp : EventKey.Home,
-            ctrlKey: event.ctrlKey
-          }
-        }
-      });
-      event.preventDefault();
-    } else if (code === 'Home') {
-      if (!isOpen) {
-        handleOpen(true);
-      }
-      focusContext.dispatch({
-        type: FocusWithinGroupActionType.DELAY_ACTION,
-        payload: {
-          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
-          payload: {
-            key: EventKey.Home,
-            ctrlKey: event.ctrlKey
-          }
-        }
-      });
-      event.preventDefault();
-    } else if (code === 'End') {
-      if (!isOpen) {
-        handleOpen(true);
-      }
-      focusContext.dispatch({
-        type: FocusWithinGroupActionType.DELAY_ACTION,
-        payload: {
-          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
-          payload: {
-            key: EventKey.End,
-            ctrlKey: event.ctrlKey
-          }
-        }
-      });
-      event.preventDefault();
-    } else if (code === 'Enter') {
-      if (isOpen && focusContext.state.selectedId) {
-        var _focusContext$state$a4, _focusContext$state$a5;
-        listboxState.dispatch({
-          type: ListboxActionType.SET,
-          payload: {
-            values: [(_focusContext$state$a4 = (_focusContext$state$a5 = focusContext.state.activedescendant) === null || _focusContext$state$a5 === void 0 ? void 0 : _focusContext$state$a5[1]) !== null && _focusContext$state$a4 !== void 0 ? _focusContext$state$a4 : ''],
-            activedescendant: focusContext.state.activedescendant
-          }
-        });
-      }
-    }
-  };
-  const handleClick = event => {
-    event.preventDefault();
-    if (isOpen) {
-      handleOpen(false);
-    } else {
-      var _focusContext$state$a6, _focusContext$state$a7;
-      handleOpen(true);
-      focusContext.dispatch({
-        type: FocusWithinGroupActionType.DELAY_ACTION,
-        payload: {
-          type: FocusWithinGroupActionType.FOCUS_ON_LIST,
-          payload: {
-            id: (_focusContext$state$a6 = (_focusContext$state$a7 = focusContext.state.activedescendant) === null || _focusContext$state$a7 === void 0 ? void 0 : _focusContext$state$a7[0]) !== null && _focusContext$state$a6 !== void 0 ? _focusContext$state$a6 : ''
-          }
-        }
-      });
-    }
-  };
-  useEffect(() => {
-    selectContext === null || selectContext === void 0 ? void 0 : selectContext.setValue(listboxState.state.selectedValues[0]);
-    handleOpen(false);
-  }, [listboxState.state]);
-  if (isComponent('TextField')(renderedChildren)) {
-    var _props$children, _focusContext$state$a8, _selectContext$color, _selectContext$varian, _props$inputProps;
-    return /*#__PURE__*/React.cloneElement(renderedChildren, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
-      ref: triggerRef
-    }, props), renderedChildren.props), {}, {
-      children: (_props$children = renderedChildren.props.children) !== null && _props$children !== void 0 ? _props$children : ''
-    }))), {}, {
-      'aria-activedescendant': isOpen ? (_focusContext$state$a8 = focusContext.state.activedescendant) === null || _focusContext$state$a8 === void 0 ? void 0 : _focusContext$state$a8[0] : undefined,
-      className: classNames(renderedChildren.props.className, selectContext === null || selectContext === void 0 ? void 0 : selectContext.triggerClassName),
-      color: (_selectContext$color = selectContext === null || selectContext === void 0 ? void 0 : selectContext.color) !== null && _selectContext$color !== void 0 ? _selectContext$color : renderedChildren.props.color,
-      inputRef,
-      internal: (value, isDisabled, isInvalid, isRequired) => {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, typeof renderedChildren.props.internal === 'function' ? renderedChildren.props.internal(value, isDisabled, isInvalid, isRequired) : renderedChildren.props.internal, hideExpandButton ? null : /*#__PURE__*/React.createElement(Icon, {
-          color: isDisabled ? 'no-data' : 'question',
-          icon: mdiChevronDown,
-          style: {
-            transition: 'transform 300ms ease-out',
-            transform: `rotate(${isOpen ? '-180deg' : '0'})`,
-            cursor: 'pointer'
-          }
-        }));
-      },
-      isActive: isOpen,
-      isDisabled: selectContext === null || selectContext === void 0 ? void 0 : selectContext.isDisabled,
-      isReadOnly: true,
-      theme,
-      role: 'combobox',
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      style: _objectSpread2(_objectSpread2({}, renderedChildren.props.style), {}, {
-        caretColor: 'transparent',
-        cursor: 'pointer'
-      }),
-      variant: (_selectContext$varian = selectContext === null || selectContext === void 0 ? void 0 : selectContext.variant) !== null && _selectContext$varian !== void 0 ? _selectContext$varian : renderedChildren.props.variant
-    }, (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isInvalid) === true && {
-      color: 'error'
-    }), typeof children !== 'function' && (selectContext === null || selectContext === void 0 ? void 0 : selectContext.value) && {
-      value: selectContext.value
-    }), {}, {
-      inputProps: _objectSpread2(_objectSpread2({}, renderedChildren.props.inputProps), {}, {
-        style: _objectSpread2(_objectSpread2({}, (_props$inputProps = renderedChildren.props.inputProps) === null || _props$inputProps === void 0 ? void 0 : _props$inputProps.style), {}, {
-          cursor: 'pointer'
-        })
-      })
-    }));
-  } else if (isComponent('Button')(renderedChildren)) {
-    var _props$children2, _focusContext$state$a9, _props$ariaLabel, _selectContext$color2, _props$rightIcon, _props$rightIconProps, _selectContext$varian2;
-    const children = renderedChildren.props.children;
-    const label = typeof children === 'string' ? children : children === null || children === void 0 ? void 0 : children.textContent;
-    return /*#__PURE__*/React.cloneElement(renderedChildren, _objectSpread2(_objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
-      ref: triggerRef
-    }, props), renderedChildren.props), {}, {
-      children: (_props$children2 = renderedChildren.props.children) !== null && _props$children2 !== void 0 ? _props$children2 : ''
-    }))), {}, {
-      'aria-activedescendant': isOpen ? (_focusContext$state$a9 = focusContext.state.activedescendant) === null || _focusContext$state$a9 === void 0 ? void 0 : _focusContext$state$a9[0] : undefined,
-      'aria-label': (_props$ariaLabel = renderedChildren.props['aria-label']) !== null && _props$ariaLabel !== void 0 ? _props$ariaLabel : label,
-      className: classNames(renderedChildren.props.className, selectContext === null || selectContext === void 0 ? void 0 : selectContext.triggerClassName),
-      color: (_selectContext$color2 = selectContext === null || selectContext === void 0 ? void 0 : selectContext.color) !== null && _selectContext$color2 !== void 0 ? _selectContext$color2 : renderedChildren.props.color,
-      isActive: isOpen,
-      isDisabled: selectContext === null || selectContext === void 0 ? void 0 : selectContext.isDisabled,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      rightIcon: (_props$rightIcon = renderedChildren.props.rightIcon) !== null && _props$rightIcon !== void 0 ? _props$rightIcon : mdiChevronDown,
-      rightIconProps: renderedChildren.props.rightIcon ? renderedChildren.props.rightIconProps : (_props$rightIconProps = renderedChildren.props.rightIconProps) !== null && _props$rightIconProps !== void 0 ? _props$rightIconProps : {
-        style: {
-          transition: 'transform 300ms ease-out',
-          transform: `rotate(${isOpen ? '-180deg' : '0'})`
-        }
-      },
-      role: 'combobox',
-      theme,
-      variant: (_selectContext$varian2 = selectContext === null || selectContext === void 0 ? void 0 : selectContext.variant) !== null && _selectContext$varian2 !== void 0 ? _selectContext$varian2 : renderedChildren.props.variant
-    }, (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isInvalid) === true && {
-      color: 'error'
-    }), typeof children !== 'function' && (selectContext === null || selectContext === void 0 ? void 0 : selectContext.value) && {
-      children: selectContext.value
-    }));
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, renderedChildren);
-});
-SelectTrigger.className = CLASSNAME$1;
-SelectTrigger.displayName = COMPONENT_NAME$1;
-
-const COMPONENT_NAME = 'Select';
-const CLASSNAME = 'redsift-select';
-
-/**
- * The Select component.
- */
-const BaseSelect = props => {
-  const {
-    color,
-    defaultValue,
-    description,
-    descriptionProps,
-    isDisabled,
-    isInvalid,
-    minWidth = 'trigger-width',
-    onChange,
-    theme: propsTheme,
-    triggerClassName,
-    value,
-    variant,
-    wrapperProps
-  } = props;
-  const theme = useTheme(propsTheme);
-  const [selectedValue, setValue] = useState(value || defaultValue || '');
-  useEffect(() => {
-    if (value) {
-      state.setValue(value);
-    }
-  }, [value]);
-
-  /** Listbox context */
-  const [listboxState, listboxDispatch] = useReducer(ListboxReducer, {
-    isDisabled,
-    selectedValues: [selectedValue]
-  });
-  const listboxContext = useMemo(() => ({
-    state: listboxState,
-    dispatch: listboxDispatch
-  }), [listboxState]);
-  useEffect(() => {
-    listboxDispatch({
-      type: ListboxActionType.UPDATE_OPTIONS,
-      payload: {
-        isDisabled: isDisabled || false
-      }
-    });
-  }, [isDisabled, theme]);
-
-  /** Select context. */
-  const state = {
-    color,
-    isDisabled: isDisabled || false,
-    isInvalid: isInvalid || false,
-    setValue(value) {
-      if (isDisabled) {
-        return;
-      }
-      const previousValue = selectedValue;
-      setValue(value);
-      if (value !== previousValue && onChange) {
-        onChange(value);
-      }
-    },
-    theme,
-    triggerClassName,
-    value: selectedValue,
-    variant
-  };
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    value: {
-      theme
-    }
-  }, /*#__PURE__*/React.createElement(FocusWithinGroup, {
-    focusType: "virtual-focus",
-    focusOnInit: false
-  }, /*#__PURE__*/React.createElement(SelectContext.Provider, {
-    value: state
-  }, /*#__PURE__*/React.createElement(ListboxContext.Provider, {
-    value: listboxContext
-  }, /*#__PURE__*/React.createElement(Flexbox, _extends({
-    flexDirection: "column",
-    alignItems: "flex-start",
-    gap: "0px"
-  }, wrapperProps), /*#__PURE__*/React.createElement(Popover, _extends({
-    theme: theme,
-    overrideDisplayName: {
-      content: 'SelectContent',
-      trigger: 'SelectTrigger'
-    },
-    placement: "bottom-start",
-    role: "listbox",
-    minWidth: minWidth
-  }, props)), description && typeof description === 'string' ? /*#__PURE__*/React.createElement(Text, _extends({
-    theme: theme,
-    marginTop: "8px",
-    variant: "caption",
-    color: isInvalid ? 'error' : theme === Theme.light ? 'dark-grey' : 'white'
-  }, descriptionProps), description) : description ? description : null)))));
-};
-BaseSelect.className = CLASSNAME;
-BaseSelect.displayName = COMPONENT_NAME;
-const Select = Object.assign(BaseSelect, {
-  Trigger: SelectTrigger,
-  Content: SelectContent
-});
-
-export { BaseCombobox, BaseComboboxContent, BaseMenuButton, BaseMenuButtonContent, BaseSelect, Combobox, ComboboxContent, ComboboxContentFooter, ComboboxContentHeader, ComboboxContentListbox, ComboboxSelectionMode, ComboboxTrigger, ComboboxVariant, Item, MenuButton, MenuButtonContent, MenuButtonContentFooter, MenuButtonContentHeader, MenuButtonContentMenu, MenuButtonTrigger, Select, SelectContent, SelectTrigger };
+export { C as ComboboxContentFooter } from './_internal/ComboboxContentFooter.js';
+export { C as ComboboxContentHeader } from './_internal/ComboboxContentHeader.js';
+export { C as ComboboxContentListbox } from './_internal/ComboboxContentListbox.js';
+export { B as BaseComboboxContent, C as ComboboxContent } from './_internal/ComboboxContent.js';
+export { C as ComboboxTrigger } from './_internal/ComboboxTrigger.js';
+export { C as ComboboxSelectionMode, a as ComboboxVariant } from './_internal/types.js';
+export { B as BaseCombobox, C as Combobox } from './_internal/Combobox2.js';
+export { I as Item } from './_internal/Item2.js';
+export { M as MenuButtonContentFooter } from './_internal/MenuButtonContentFooter.js';
+export { M as MenuButtonContentHeader } from './_internal/MenuButtonContentHeader.js';
+export { M as MenuButtonContentMenu } from './_internal/MenuButtonContentMenu.js';
+export { B as BaseMenuButtonContent, M as MenuButtonContent } from './_internal/MenuButtonContent.js';
+export { M as MenuButtonTrigger } from './_internal/MenuButtonTrigger.js';
+export { B as BaseMenuButton, M as MenuButton } from './_internal/MenuButton.js';
+export { S as SelectContent } from './_internal/SelectContent.js';
+export { S as SelectTrigger } from './_internal/SelectTrigger.js';
+export { B as BaseSelect, S as Select } from './_internal/Select2.js';
 //# sourceMappingURL=index.js.map