@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.2

package/src/select/Select.js

@@ -1,935 +0,0 @@
-import {
-  Fragment,
-  useState,
-  useEffect,
-  useMemo,
-  useCallback,
-  useRef,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { useTranslation } from 'react-i18next';
-import OutsideClickHandler from 'react-outside-click-handler';
-import styled from 'styled-components';
-import uniqueId from 'lodash.uniqueid';
-import { TiArrowSortedDown } from 'react-icons/ti';
-import { MdClose } from 'react-icons/md';
-import { useCustomPopper } from '@cashub/hooks';
-import { KEY_CODE } from '@cashub/utils';
-import media from '../styles/mixin/media';
-import SelectedSingle from './subComponent/SelectedSingle';
-import SelectedMultipleTags from './subComponent/SelectedMultipleTags';
-import SelectedMultipleText from './subComponent/SelectedMultipleText';
-import SelectedMultipleCount from './subComponent/SelectedMultipleCount';
-import ListBox from './subComponent/ListBox';
-import SearchBox from './subComponent/SearchBox';
-import Options from './subComponent/Options';
-import OptionGroup from './subComponent/OptionGroup';
-import Option from './subComponent/Option';
-import Checkbox from './subComponent/Checkbox';
-import Footer from './subComponent/Footer';
-import { IconFigure } from '../figure';
-import { ImageFluid } from '../image';
-
-const Select = ({
-  options,
-  enableSelectAll = false,
-  selected,
-  onSelect,
-  onDeselect,
-  multiple = false,
-  displayMode = 'tags',
-  allowClear = false,
-  allowSearch = true,
-  disabled,
-  placeholder = '',
-  fullWidth,
-  large,
-  fill,
-  fillReverse,
-  onBlur,
-  onSearch,
-  flexGrow,
-  footer,
-}) => {
-  const { t } = useTranslation();
-  const [id] = useState(uniqueId('select-'));
-  const [allOptionId] = useState(uniqueId('allOptons-'));
-  const [display, setDisplay] = useState(false);
-  const [comboboxElement, setComboboxElement] = useState(null);
-  const [listBoxElement, setListBoxElement] = useState(null);
-  const optionsElementRef = useRef(null);
-  const searchBoxElement = useRef(null);
-  const [listBoxWidth, setListBoxWidth] = useState(0);
-  const [optionList, setOptionList] = useState([]);
-  const [focusedOption, setFocusedOption] = useState(null);
-  const [isFocusCombobox, setIsFocusCombobox] = useState(false);
-  const [selectedOptions, setSelectedOptions] = useState([]);
-  const [filteredOptions, setFilteredOptions] = useState(options);
-  const [search, setSearch] = useState('');
-
-  const { styles, attributes, state, update } = useCustomPopper(
-    comboboxElement,
-    listBoxElement,
-  );
-  const newOptions = useMemo(() => {
-    if (!options) return;
-    const newOptions = options.map((item) => {
-      return { isDisable: false, ...item };
-    });
-    if (options.length > 0 && multiple && enableSelectAll) {
-      newOptions.unshift({ id: allOptionId, text: t('All') });
-    }
-
-    return newOptions;
-  }, [options, multiple, enableSelectAll, allOptionId]);
-
-  const enabledOptions = useMemo(() => {
-    return newOptions.filter((item) => !item.isDisable);
-  }, [newOptions]);
-
-  // parse all value to string
-  // for subsequently determine whether it is a selected item
-  const parsedSelected = useMemo(() => {
-    if (selected || selected === 0) {
-      // multiple value
-      if (Array.isArray(selected)) {
-        return selected.map((value) => value.toString());
-      }
-
-      // single value
-      return selected.toString();
-    }
-    return '';
-  }, [selected]);
-
-  const selectedAllOptions = useMemo(() => {
-    if (
-      multiple &&
-      enableSelectAll &&
-      parsedSelected.length + 1 === enabledOptions.length
-    ) {
-      const selectedAllOptions = [...parsedSelected];
-      selectedAllOptions.unshift(allOptionId);
-      return selectedAllOptions;
-    }
-    return parsedSelected;
-  }, [
-    multiple,
-    enableSelectAll,
-    enabledOptions.length,
-    parsedSelected,
-    allOptionId,
-  ]);
-
-  const showCheckbox = useMemo(() => {
-    if (multiple && displayMode === 'text') {
-      return true;
-    }
-
-    return false;
-  }, [displayMode, multiple]);
-
-  const getOptionText = useCallback((option) => {
-    return [option.text, option.suffix]
-      .filter((text) => text || text === 0)
-      .join(' ');
-  }, []);
-
-  const renderOptionContent = useCallback(
-    (option) => {
-      const text = getOptionText(option);
-      const highlightText = option.highlightText?.toString();
-
-      if (highlightText && text.includes(highlightText)) {
-        return (
-          <OptionLabel>
-            {text.split(highlightText).map((textPart, index, textParts) => {
-              return (
-                <Fragment key={`${highlightText}-${index}`}>
-                  {textPart}
-                  {index < textParts.length - 1 && (
-                    <OptionHighlight $color={option.highlightColor}>
-                      {highlightText}
-                    </OptionHighlight>
-                  )}
-                </Fragment>
-              );
-            })}
-          </OptionLabel>
-        );
-      }
-
-      return (
-        <OptionLabel>
-          {option.text}
-          {option.suffix && <OptionBadge>&nbsp;{option.suffix}</OptionBadge>}
-        </OptionLabel>
-      );
-    },
-    [getOptionText],
-  );
-
-  // set focused option
-  const handleFocusItem = useCallback((element) => {
-    if (!optionsElementRef.current) return;
-
-    setFocusedOption(element);
-
-    const container = optionsElementRef.current;
-    if (container.scrollHeight > container.clientHeight) {
-      const scrollBottom = container.clientHeight + container.scrollTop;
-      const elementBottom = element.offsetTop + element.offsetHeight;
-      if (elementBottom > scrollBottom) {
-        container.scrollTop = elementBottom - container.clientHeight;
-      } else if (element.offsetTop < container.scrollTop) {
-        container.scrollTop = element.offsetTop;
-      }
-    }
-  }, []);
-
-  const focusFirstItem = useCallback(() => {
-    const firstItem = listBoxElement.querySelector('[role="option"]');
-
-    if (firstItem) {
-      handleFocusItem(firstItem);
-    }
-  }, [listBoxElement, handleFocusItem]);
-
-  const setupFocus = useCallback(() => {
-    if (!listBoxElement) return;
-
-    const selectedItem = listBoxElement.querySelector('[aria-selected="true"]');
-
-    if (selectedItem) {
-      handleFocusItem(selectedItem);
-    } else if (optionList.length > 0) {
-      focusFirstItem();
-    } else {
-      setFocusedOption(null);
-    }
-  }, [listBoxElement, handleFocusItem, focusFirstItem, optionList]);
-
-  const findPreviousItem = useCallback(
-    (currentItem) => {
-      const allItem = [...listBoxElement.querySelectorAll('[role="option"]')];
-      const currentItemIndex = allItem.indexOf(currentItem);
-      let previousItem = null;
-
-      if (currentItemIndex !== -1 && currentItemIndex > 0) {
-        previousItem = allItem[currentItemIndex - 1];
-      }
-
-      return previousItem;
-    },
-    [listBoxElement],
-  );
-
-  const findNextItem = useCallback(
-    (currentItem) => {
-      const allItem = [...listBoxElement.querySelectorAll('[role="option"]')];
-      const currentItemIndex = allItem.indexOf(currentItem);
-      let nextItem = null;
-
-      if (currentItemIndex !== -1 && currentItemIndex < allItem.length - 1) {
-        nextItem = allItem[currentItemIndex + 1];
-      }
-
-      return nextItem;
-    },
-    [listBoxElement],
-  );
-
-  const handleOnSelect = useCallback(
-    (event, value) => {
-      event.stopPropagation();
-      if (disabled === true) return;
-
-      const targetOption = newOptions.find(({ id, child }) => id === value || (child && child.find(({ id }) => id === value)));
-      const actualOpt = targetOption?.child ? targetOption.child.find(({ id }) => id === value) : targetOption;
-      if (actualOpt?.isDisable) return;
-
-      // 選取選項
-      // 點選 all 全選
-      if (multiple) {
-        if (
-          value.toString() === allOptionId &&
-          selectedAllOptions.length < enabledOptions.length
-        ) {
-          for (let index = 1; index < enabledOptions.length; index += 1) {
-            onSelect(enabledOptions[index].id);
-          }
-        }
-
-        if (
-          value.toString() !== allOptionId &&
-          !selectedAllOptions.includes(value.toString())
-        ) {
-          // 選取一個選項，變成全選
-          if (selectedAllOptions.length + 2 === enabledOptions.length) {
-            onSelect(value);
-          } else {
-            // 選取特定選項
-            onSelect(value);
-          }
-        }
-
-        // 刪除選項
-        // 點選 all 刪除全選
-        if (
-          value.toString() === allOptionId &&
-          selectedAllOptions.length === enabledOptions.length
-        ) {
-          for (let index = 0; index < enabledOptions.length; index += 1) {
-            onDeselect(enabledOptions[index].id);
-          }
-        }
-
-        if (
-          value.toString() !== allOptionId &&
-          selectedAllOptions.includes(value.toString())
-        ) {
-          // 原本是 all 全選後來刪除其中一個選項
-          if (selectedAllOptions.length === enabledOptions.length) {
-            onDeselect(value);
-          } else {
-            // 刪除特定選項
-            onDeselect(value);
-          }
-        }
-        setDisplay(true);
-      } else {
-        onSelect(value);
-        setDisplay(false);
-      }
-      comboboxElement.focus();
-      setSearch('');
-    },
-    [
-      disabled,
-      onSelect,
-      comboboxElement,
-      selectedAllOptions,
-      onDeselect,
-      newOptions,
-      allOptionId,
-      multiple,
-      enabledOptions,
-    ],
-  );
-
-  const handleOnDeselect = useCallback(
-    (event, value) => {
-      event.stopPropagation();
-      if (disabled === true) return;
-
-      if (multiple) {
-        if (value.toString() === allOptionId) {
-          for (let index = 0; index < optionList.length; index += 1) {
-            onDeselect(optionList[index].id);
-          }
-        } else {
-          onDeselect(value);
-        }
-      } else {
-        onDeselect(value);
-      }
-    },
-    [disabled, onDeselect, optionList, allOptionId, multiple],
-  );
-
-  // list all selected option
-  const selectedItem = useMemo(() => {
-    if (selectedOptions.length > 0) {
-      if (multiple) {
-        if (displayMode === 'text') {
-          let text;
-          if (selectedOptions[0].id === allOptionId) {
-            [{ text }] = selectedOptions;
-          } else {
-            text = selectedOptions
-              .map((value) => {
-                return getOptionText(value);
-              })
-              .join(', ');
-          }
-
-          return <SelectedMultipleText>{text}</SelectedMultipleText>;
-        }
-
-        if (displayMode === 'count') {
-          return (
-            <SelectedMultipleCount
-              placeholder={placeholder}
-              firstSelectedText={selectedOptions.length > 0 ? getOptionText(selectedOptions[0]) : ''}
-              count={selectedOptions.length}
-            />
-          );
-        }
-
-        if (selectedOptions[0].id === allOptionId) {
-          return (
-            <SelectedMultipleTags
-              content={renderOptionContent(selectedOptions[0])}
-              key={selectedOptions[0].id}
-              onClick={(event) =>
-                handleOnDeselect(event, selectedOptions[0].id)
-              }
-              disabled={disabled}
-            />
-          );
-        }
-
-        return selectedOptions.map((value) => {
-          return (
-            <SelectedMultipleTags
-              content={renderOptionContent(value)}
-              key={value.id}
-              onClick={(event) => handleOnDeselect(event, value.id)}
-              disabled={disabled}
-            />
-          );
-        });
-      }
-
-      return (
-        <SelectedSingle>
-          {selectedOptions[0].icon && <Icon src={selectedOptions[0].icon} />}
-          {renderOptionContent(selectedOptions[0])}
-        </SelectedSingle>
-      );
-    }
-
-    return placeholder;
-  }, [
-    placeholder,
-    handleOnDeselect,
-    multiple,
-    displayMode,
-    selectedOptions,
-    disabled,
-    allOptionId,
-    getOptionText,
-    renderOptionContent,
-  ]);
-
-  const optionItem = useMemo(() => {
-    if (optionList.length <= 0) return null;
-    return optionList.map((option) => {
-      if (option.child && option.child.length > 0) {
-        return (
-          <OptionGroup aria-labelledby={option.text} key={option.text}>
-            <Option role='presentation' id={option.text}>
-              {option.text}
-            </Option>
-
-            {option.child.map((option) => {
-              return (
-                <Option
-                  role='option'
-                  tabIndex={option.isDisable ? '-1' : '0'}
-                  id={option.id}
-                  key={option.id}
-                  onClick={(event) => !option.isDisable && handleOnSelect(event, option.id)}
-                  focus={
-                    focusedOption && focusedOption.id === option.id.toString()
-                  }
-                  selected={option.selected}
-                  aria-selected={option.selected}
-                  aria-disabled={option.isDisable}
-                  disabled={option.isDisable}
-                >
-                  {showCheckbox && <Checkbox selected={option.selected} disabled={option.isDisable}/>}
-                  {renderOptionContent(option)}
-                </Option>
-              );
-            })}
-          </OptionGroup>
-        );
-      }
-
-      return (
-        <Option
-          role='option'
-          tabIndex={option.isDisable ? '-1' : '0'}
-          id={option.id}
-          key={option.id}
-          onClick={(event) => !option.isDisable && handleOnSelect(event, option.id)}
-          focus={focusedOption && focusedOption.id === option.id.toString()}
-          selected={option.selected}
-          aria-selected={option.selected}
-          aria-disabled={option.isDisable}
-          disabled={option.isDisable}
-        >
-          {showCheckbox && <Checkbox selected={option.selected} disabled={option.isDisable}/>}
-          {option.icon && <Icon src={option.icon} />}
-          {renderOptionContent(option)}
-        </Option>
-      );
-    });
-  }, [
-    optionList,
-    focusedOption,
-    handleOnSelect,
-    showCheckbox,
-    renderOptionContent,
-  ]);
-
-  // show or hide listbox
-  // and set listbox width according to combobox current width
-  const handleToggle = () => {
-    if (disabled === true) return;
-
-    const tmpDisplay = !display;
-    if (!tmpDisplay) {
-      setFocusedOption(null);
-    }
-
-    setDisplay(tmpDisplay);
-    update();
-  };
-
-  // handle keyboard interaction
-  const handleKeyUp = (event) => {
-    const key = event.keyCode;
-
-    switch (key) {
-      case KEY_CODE.ENTER:
-        if (!display) {
-          handleToggle();
-        } else if (focusedOption) {
-          if (focusedOption.getAttribute('aria-disabled') === 'true') return;
-          handleOnSelect(event, focusedOption.id);
-        }
-
-        break;
-      case KEY_CODE.ESCAPE:
-        if (display) {
-          handleToggle();
-        }
-        break;
-      case KEY_CODE.UP: {
-        if (!focusedOption) {
-          return;
-        }
-
-        let previousItem = findPreviousItem(focusedOption);
-        while (previousItem && previousItem.getAttribute('aria-disabled') === 'true') {
-          previousItem = findPreviousItem(previousItem);
-        }
-        if (previousItem) {
-          handleFocusItem(previousItem);
-        }
-
-        break;
-      }
-      case KEY_CODE.DOWN: {
-        if (!focusedOption) {
-          return;
-        }
-
-        let nextItem = findNextItem(focusedOption);
-        while (nextItem && nextItem.getAttribute('aria-disabled') === 'true') {
-          nextItem = findNextItem(nextItem);
-        }
-        if (nextItem) {
-          handleFocusItem(nextItem);
-        }
-
-        break;
-      }
-      case KEY_CODE.END: {
-        event.preventDefault();
-        const itemList = listBoxElement.querySelectorAll('[role="option"]');
-
-        if (itemList.length) {
-          handleFocusItem(itemList[itemList.length - 1]);
-        }
-
-        break;
-      }
-      case KEY_CODE.HOME:
-        event.preventDefault();
-        focusFirstItem();
-        break;
-      default:
-        break;
-    }
-  };
-
-  const handleKeyDown = (event) => {
-    const key = event.keyCode;
-
-    switch (key) {
-      case KEY_CODE.ENTER:
-      case KEY_CODE.ESCAPE:
-      case KEY_CODE.UP:
-      case KEY_CODE.DOWN:
-      case KEY_CODE.END:
-      case KEY_CODE.HOME:
-        event.preventDefault();
-        break;
-      default:
-        break;
-    }
-  };
-
-  // handle search keyword change
-  const handleSearchChange = (event) => {
-    if (onSearch) {
-      onSearch(event.target.value);
-    }
-
-    setSearch(event.target.value);
-  };
-
-  const handleFocus = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    setIsFocusCombobox(true);
-  };
-
-  // determine selected option(s)
-  useEffect(() => {
-    if (!newOptions) return;
-
-    const tmpSelectedOptions = [];
-
-    newOptions.forEach((option) => {
-      if (option.child && option.child.length > 0) {
-        option.child.forEach((option) => {
-          if (multiple && selectedAllOptions.includes(option.id.toString())) {
-            tmpSelectedOptions.push(option);
-          } else if (selectedAllOptions === option.id.toString()) {
-            tmpSelectedOptions.push(option);
-          }
-        });
-      } else {
-        if (multiple && selectedAllOptions.includes(option.id.toString())) {
-          tmpSelectedOptions.push(option);
-        } else if (selectedAllOptions === option.id.toString()) {
-          tmpSelectedOptions.push(option);
-        }
-      }
-      return false;
-    });
-
-    setSelectedOptions(tmpSelectedOptions);
-  }, [newOptions, selectedAllOptions, multiple]);
-
-  useEffect(() => {
-    if (update) {
-      setTimeout(() => {
-        update();
-      }, 100);
-    }
-  }, [update, listBoxWidth]);
-
-  // observe element resized
-  useEffect(() => {
-    if (!comboboxElement) return;
-
-    const resizeObserverInstance = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.target) {
-          const borderBoxSize = entry.target.clientWidth;
-
-          setListBoxWidth(borderBoxSize);
-        }
-      }
-    });
-
-    resizeObserverInstance.observe(comboboxElement);
-
-    return () => {
-      // unobserve element
-      resizeObserverInstance.unobserve(comboboxElement);
-    };
-  }, [comboboxElement]);
-
-  // re-setup focus when option list changed and update popper position
-  useEffect(() => {
-    setupFocus();
-    if (update) update();
-  }, [setupFocus, optionList, update]);
-
-  // parse option list when filtered options change
-  useEffect(() => {
-    if (!filteredOptions) return;
-
-    setOptionList(
-      filteredOptions.map((option) => {
-        if (option.child && option.child.length > 0) {
-          return {
-            ...option,
-            child: option.child.map((option) => {
-              let selected = false;
-              if (
-                multiple &&
-                selectedAllOptions.includes(option.id.toString())
-              ) {
-                selected = true;
-              } else if (selectedAllOptions === option.id.toString()) {
-                selected = true;
-              }
-
-              return {
-                ...option,
-                selected,
-              };
-            }),
-          };
-        }
-
-        let selected = false;
-
-        if (multiple && selectedAllOptions.includes(option.id.toString())) {
-          selected = true;
-        } else if (selectedAllOptions === option.id.toString()) {
-          selected = true;
-        }
-
-        return {
-          ...option,
-          selected,
-        };
-      }),
-    );
-  }, [filteredOptions, multiple, selectedAllOptions]);
-
-  // filter options on search keyword changed
-  useEffect(() => {
-    const tmpFilteredOptions = [];
-
-    newOptions.forEach((option) => {
-      if (option.child && option.child.length > 0) {
-        const tmpFilteredChildOptions = option.child.filter((option) =>
-          getOptionText(option)
-            .toLowerCase()
-            .indexOf(search.toLowerCase().trim()) !== -1);
-        if (tmpFilteredChildOptions.length > 0) {
-          tmpFilteredOptions.push({
-            ...option,
-            child: tmpFilteredChildOptions,
-          });
-        }
-      } else if (
-        getOptionText(option)
-          .toLowerCase()
-          .indexOf(search.toLowerCase().trim()) !== -1
-      ) {
-        tmpFilteredOptions.push(option);
-      }
-    });
-    setFilteredOptions(tmpFilteredOptions);
-  }, [search, newOptions, getOptionText]);
-
-  useEffect(() => {
-    if (display) {
-      setupFocus();
-
-      if (allowSearch) {
-        searchBoxElement.current.focus();
-      }
-    }
-  }, [setupFocus, display, allowSearch]);
-
-  return (
-    <div
-      style={{
-        flexGrow: flexGrow ? 1 : 0,
-      }}
-    >
-      <OutsideClickHandler
-        onOutsideClick={() => {
-          setDisplay(false);
-          if (onBlur) onBlur();
-          setIsFocusCombobox(false);
-        }}
-        disabled={!isFocusCombobox}
-      >
-        <Combobox
-          flexGrow={flexGrow}
-          role='combobox'
-          tabIndex='0'
-          aria-haspopup='listbox'
-          aria-expanded={display}
-          aria-owns={id}
-          ref={setComboboxElement}
-          onClick={handleToggle}
-          onKeyUp={handleKeyUp}
-          onKeyDown={handleKeyDown}
-          $display={display}
-          disabled={disabled}
-          fullWidth={fullWidth}
-          large={large}
-          $fill={fill}
-          fillReverse={fillReverse}
-          onFocus={handleFocus}
-          placeholder={placeholder}
-        >
-          {selectedItem}
-
-          {selectedOptions.length > 0 &&
-            !multiple &&
-            !disabled &&
-            allowClear && (
-              <CloseButton
-                onClick={() => {
-                  onSelect('');
-                }}
-              />
-            )}
-          <ExpandArrow aria-haspopup='listbox' aria-expanded={display} />
-        </Combobox>
-        {createPortal(
-          <ListBox
-            role='listbox'
-            tabIndex='0'
-            id={id}
-            ref={setListBoxElement}
-            onKeyUp={handleKeyUp}
-            onKeyDown={handleKeyDown}
-            width={listBoxWidth}
-            $display={display}
-            style={styles.popper}
-            {...attributes.popper}
-            placement={state && state.placement}
-          >
-            {allowSearch && (
-              <SearchBox
-                ref={searchBoxElement}
-                placeholder='Search'
-                onChange={handleSearchChange}
-                value={search}
-              />
-            )}
-
-            <Options ref={optionsElementRef} allowSearch={allowSearch}>
-              {optionItem || <Message>No results found</Message>}
-            </Options>
-
-            {footer && <Footer>{footer}</Footer>}
-          </ListBox>,
-          document.body,
-        )}
-      </OutsideClickHandler>
-    </div>
-  );
-};
-
-const Icon = ({ src }) => {
-  return (
-    <>
-      <IconFigure size='medium'>
-        <ImageFluid crossOrigin='anonymous' src={src} alt='' roundedS />
-      </IconFigure>
-      &nbsp;
-    </>
-  );
-};
-
-const Combobox = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  min-height: 36px;
-  cursor: pointer;
-  position: relative;
-  background: transparent;
-  color: var(--font-on-background);
-  font-size: var(--font-body1);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius-l);
-  padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);
-
-  &:focus {
-    ${({ disabled }) =>
-      !disabled &&
-      `
-        border-color: var(--color-primary);
-        outline: none;
-      `};
-  }
-
-  ${({ flexGrow }) => !flexGrow && 'min-width: 160px;'}
-
-  ${({ $display }) =>
-    $display &&
-    `
-      border-color: var(--color-primary);
-      outline: none;
-    `}
-
-  ${({ disabled }) => disabled && 'cursor: not-allowed;opacity: 0.5;'}
-  ${({ placeholder }) => placeholder && 'color: var(--font-on-mute);'}
-  
-  ${({ fullWidth }) => (fullWidth ? 'width: 100%' : 'max-width: 320px')};
-
-  ${({ large }) =>
-    large &&
-    `
-      height: 40px;
-      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);
-    `}
-
-  ${({ $fill }) =>
-    $fill &&
-    `
-      background: var(--color-background2);
-      border-color: transparent;
-    `}
-
-  ${({ fillReverse }) =>
-    fillReverse &&
-    `
-      background: var(--color-background1);
-      border-color: transparent;
-    `}
-`;
-Combobox.displayName = 'Combobox';
-
-const CloseButton = styled(MdClose)`
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--color-primary);
-  font-size: var(--font-body1);
-  right: var(--spacing-l);
-
-  ${media.tablet`
-    right: calc(var(--spacing) + var(--spacing-s));
-  `};
-`;
-CloseButton.displayName = 'CloseButton';
-
-const ExpandArrow = styled(TiArrowSortedDown)`
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--color-primary);
-  font-size: var(--font-body1);
-  right: var(--spacing-s);
-`;
-ExpandArrow.displayName = 'ExpandArrow';
-
-const Message = styled.p`
-  margin: 0;
-  padding: 12px var(--spacing-s);
-`;
-Message.displayName = 'Message';
-
-const OptionBadge = styled.span`
-  color: var(--color-danger);
-  font-style: italic;
-`;
-
-const OptionLabel = styled.div`
-  min-width: 0;
-`;
-
-const OptionHighlight = styled.span`
-  color: ${({ $color }) => $color || 'var(--color-danger)'};
-`;
-
-export default Select;