@ntbjs/react-components 1.3.0-rc.9 → 2.0.0-rc.5

package/cjs/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js

@@ -0,0 +1,185 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../../node_modules/react/index.js');
+var index$2 = require('../../../node_modules/prop-types/index.js');
+var MultiLevelCheckboxSelect_styled = require('./MultiLevelCheckboxSelect.styled.js');
+var search = require('../../../icons/search.svg.js');
+var close = require('../../../icons/close.svg.js');
+var MultiLevelCheckbox = require('../MultiLevelCheckbox/MultiLevelCheckbox.js');
+var useEventListner = require('../../../hooks/useEventListner.js');
+var useOnClickOutside = require('../../../hooks/useOnClickOutside.js');
+var useUpdateEffect = require('../../../node_modules/@restart/hooks/esm/useUpdateEffect.js');
+var lodash = require('lodash');
+var Popover = require('../../data/Popover/Popover.js');
+var TextInput = require('../TextInput/TextInput.js');
+var SectionSeparator = require('../../layout/SectionSeparator/SectionSeparator.js');
+var index$1 = require('../../../_virtual/index.js');
+
+const _excluded = ["label", "options", "checked", "placeholder", "noResultsText", "onChange", "onParentChange"];
+const MultiLevelCheckboxSelect = index["default"].forwardRef(function MultiLevelCheckboxSelect(_ref, forwardedRef) {
+  let {
+      label,
+      options,
+      checked: checkedProp,
+      placeholder,
+      noResultsText,
+      onChange,
+      onParentChange
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const inputRef = index$1.react.exports.useRef(null);
+  const popoverContentRef = index$1.react.exports.useRef(null);
+  const searchInputRef = index$1.react.exports.useRef(null);
+  const [searchString, setSearchString] = index$1.react.exports.useState('');
+  const [open, setOpen] = index$1.react.exports.useState(false);
+  const handleClickInside = index$1.react.exports.useCallback(() => {
+    var _searchInputRef$curre;
+    setOpen(true);
+    (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
+  }, []);
+  const handleKeyDown = index$1.react.exports.useCallback(event => {
+    if (!open) return;
+    if (event.key === 'Escape') {
+      setOpen(false);
+    }
+  }, [open]);
+  useEventListner.useEventListener('focus', handleClickInside, inputRef);
+  useEventListner.useEventListener('mousedown', handleClickInside, inputRef);
+  useEventListner.useEventListener('keydown', handleKeyDown);
+  const handleClickOutside = event => {
+    var _popoverContentRef$cu;
+    if ((popoverContentRef === null || popoverContentRef === void 0 ? void 0 : popoverContentRef.current) === event.target || popoverContentRef !== null && popoverContentRef !== void 0 && (_popoverContentRef$cu = popoverContentRef.current) !== null && _popoverContentRef$cu !== void 0 && _popoverContentRef$cu.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  useOnClickOutside.useOnClickOutside(inputRef, handleClickOutside);
+  const checked = index$1.react.exports.useMemo(() => {
+    const checkedParents = [];
+    function iterate(nodes) {
+      nodes.forEach(node => {
+        if (checkedProp.includes(node.value)) {
+          return checkedParents.push(node.value);
+        }
+        if (node.children) {
+          iterate(node.children);
+        }
+      });
+    }
+    iterate(options);
+    return checkedParents.sort();
+  }, [JSON.stringify(options), JSON.stringify(checkedProp)]);
+  const getLabelByValue = index$1.react.exports.useCallback((targetValue, nodes = options) => {
+    for (const node of nodes) {
+      if (node.value === targetValue) {
+        return node.label;
+      }
+      if (node.children) {
+        const result = getLabelByValue(targetValue, node.children);
+        if (result) {
+          return result;
+        }
+      }
+    }
+    return null;
+  }, [options]);
+  const removeItem = index$1.react.exports.useCallback(value => {
+    let node = null;
+    function findNodeByValue(options, value) {
+      for (let i = 0; i < options.length; i++) {
+        if (options[i].value === value) {
+          node = options[i];
+          break;
+        }
+        if (options[i].children) {
+          findNodeByValue(options[i].children, value);
+        }
+      }
+    }
+    findNodeByValue(options, value);
+    if (node) {
+      const childValues = MultiLevelCheckbox.findChildValues(node);
+      const valuesToRemove = [value, ...childValues];
+      onChange(checkedProp.filter(value => !valuesToRemove.includes(value)));
+    }
+  }, [options, checkedProp]);
+  useUpdateEffect["default"](() => {
+    if (lodash.isFunction(onParentChange)) {
+      onParentChange(checked);
+    }
+  }, [checked]);
+  return index["default"].createElement(MultiLevelCheckboxSelect_styled.MultiLevelCheckboxSelect, _rollupPluginBabelHelpers["extends"]({
+    ref: forwardedRef
+  }, props), index["default"].createElement(Popover["default"], {
+    visible: open,
+    arrow: false,
+    placement: 'bottom',
+    offset: [0, 6],
+    modifiers: [{
+      name: 'sameWidth',
+      enabled: true,
+      phase: 'beforeWrite',
+      requires: ['computeStyles'],
+      fn: ({
+        state
+      }) => {
+        state.styles.popper.width = `${state.rects.reference.width}px`;
+      },
+      effect: ({
+        state
+      }) => {
+        state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+      }
+    }],
+    content: index["default"].createElement(MultiLevelCheckboxSelect_styled.PopoverContainer, {
+      ref: popoverContentRef
+    }, index["default"].createElement(MultiLevelCheckboxSelect_styled.PopoverHeader, null, index["default"].createElement(MultiLevelCheckboxSelect_styled.SearchContainer, null, index["default"].createElement(TextInput["default"], {
+      ref: searchInputRef,
+      onBlur: e => {
+        if (open) {
+          e.target.focus();
+        }
+      },
+      icon: index["default"].createElement(search.ReactComponent, null),
+      value: searchString,
+      onChange: e => setSearchString(e.target.value)
+    })), index["default"].createElement(SectionSeparator["default"], null)), index["default"].createElement(MultiLevelCheckboxSelect_styled.OptionsContainer, null, index["default"].createElement(MultiLevelCheckbox["default"], {
+      options: options,
+      checked: checkedProp,
+      search: searchString,
+      noResultsText: noResultsText,
+      onChange: onChange
+    })))
+  }, index["default"].createElement(MultiLevelCheckboxSelect_styled.MultiLevelCheckboxSelectInput, {
+    tabIndex: "0",
+    ref: inputRef
+  }, label && index["default"].createElement(MultiLevelCheckboxSelect_styled.Label, null, label), checked.length === 0 && index["default"].createElement(MultiLevelCheckboxSelect_styled.Placeholder, null, placeholder), checked.map(option => index["default"].createElement(MultiLevelCheckboxSelect_styled.Item, {
+    key: option
+  }, index["default"].createElement(MultiLevelCheckboxSelect_styled.ItemLabel, null, getLabelByValue(option)), index["default"].createElement(MultiLevelCheckboxSelect_styled.ItemRemoveButton, {
+    onClick: () => {
+      removeItem(option);
+    }
+  }, index["default"].createElement(close.ReactComponent, null)))))));
+});
+MultiLevelCheckboxSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: index$2["default"].string,
+  placeholder: index$2["default"].string,
+  options: index$2["default"].arrayOf(index$2["default"].shape({
+    label: index$2["default"].string.isRequired,
+    value: index$2["default"].any.isRequired,
+    children: index$2["default"].arrayOf(MultiLevelCheckbox.NodeType)
+  })).isRequired,
+  checked: index$2["default"].array.isRequired,
+  noResultsText: index$2["default"].string,
+  onChange: index$2["default"].func.isRequired,
+  onParentChange: index$2["default"].func
+} : {};
+MultiLevelCheckboxSelect.defaultProps = {
+  checked: []
+};
+var MultiLevelCheckboxSelect$1 = MultiLevelCheckboxSelect;
+
+exports["default"] = MultiLevelCheckboxSelect$1;

package/cjs/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.styled.js

@@ -0,0 +1,122 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var defaultTheme = require('../../../utils/defaultTheme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8,
+  _t9,
+  _t10,
+  _t11;
+const MultiLevelCheckboxSelect = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  font-family: ${0};
+`), props => props.theme.primaryFontFamily);
+const MultiLevelCheckboxSelectInput = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+  position: relative;
+  border: 1px solid;
+  ${0}
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-height: 44px;
+  box-sizing: border-box;
+  padding: 8px 6px;
+  border-radius: 3px;
+  transition: border-color 350ms;
+
+  &:focus-within {
+    ${0}
+  }
+`), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'), 1));
+const Item = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+  display: flex;
+  align-items: center;
+  background: #272727;
+  color: #f7f8f9;
+  font-size: 12px;
+  height: 26px;
+  border-radius: 3px;
+`));
+const ItemLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
+  padding: 0 5px 0 8px;
+`));
+const ItemRemoveButton = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
+  color: inherit;
+  border: none;
+  background: none;
+  -webkit-appearance: none;
+  height: 100%;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  padding: 0 7px;
+  cursor: pointer;
+
+  &:hover {
+    background: ${0};
+  }
+
+  & > svg {
+    width: 8px;
+    display: block;
+  }
+`), props => props.theme.getColor('red-500'));
+const Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+  position: absolute;
+  top: -8px;
+  left: 7px;
+  line-height: 1.2;
+  font-size: 0.75rem;
+  font-weight: 400;
+  padding: 0 3px;
+  //padding: 0 0 4px;
+  letter-spacing: 0.03em;
+  ${0}
+  ${0}
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')), props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`));
+const Placeholder = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
+  font-size: 0.875rem;
+  line-height: 26px;
+  padding-left: 4px;
+  opacity: 0.4;
+`));
+const PopoverContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+  max-height: inherit;
+  display: flex;
+  flex-direction: column;
+`));
+const PopoverHeader = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
+  ${0}
+`), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')));
+const SearchContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _`
+  padding: 12px 8px;
+`));
+const OptionsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
+  padding: 12px 8px;
+  overflow: auto;
+  box-sizing: border-box;
+`));
+
+exports.Item = Item;
+exports.ItemLabel = ItemLabel;
+exports.ItemRemoveButton = ItemRemoveButton;
+exports.Label = Label;
+exports.MultiLevelCheckboxSelect = MultiLevelCheckboxSelect;
+exports.MultiLevelCheckboxSelectInput = MultiLevelCheckboxSelectInput;
+exports.OptionsContainer = OptionsContainer;
+exports.Placeholder = Placeholder;
+exports.PopoverContainer = PopoverContainer;
+exports.PopoverHeader = PopoverHeader;
+exports.SearchContainer = SearchContainer;

package/cjs/components/inputs/MultiSelect/MultiSelect.js

@@ -0,0 +1,251 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../../node_modules/react/index.js');
+var index$2 = require('../../../node_modules/prop-types/index.js');
+var nanoid = require('nanoid');
+var MultiSelect_styled = require('./MultiSelect.styled.js');
+var close = require('../../../icons/close.svg.js');
+var index$1 = require('../../../_virtual/index.js');
+
+const _excluded = ["label", "selectedOptions", "availableOptions", "loadOptions", "loadingMessageFunc", "onUpdateCallback", "editText", "createNewOptionMessageFunc", "noOptionsMessageFunc", "onMultiValueClick", "showMore", "showMoreText", "displayTotalOnShowMore", "creatable", "readOnly", "hidden", "disabled", "error", "warning"];
+const MultiSelect = index["default"].forwardRef(function MultiSelect(_ref, forwardedRef) {
+  let {
+      label,
+      selectedOptions,
+      availableOptions,
+      loadOptions,
+      loadingMessageFunc,
+      onUpdateCallback,
+      editText,
+      createNewOptionMessageFunc,
+      noOptionsMessageFunc,
+      onMultiValueClick,
+      showMore,
+      showMoreText,
+      displayTotalOnShowMore,
+      creatable,
+      readOnly,
+      hidden,
+      disabled,
+      error,
+      warning
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const [uniqueId] = index$1.react.exports.useState(nanoid.nanoid());
+  const [selected, setSelected] = index$1.react.exports.useState(selectedOptions);
+  const [focused, setFocused] = index$1.react.exports.useState(false);
+  const [displayShowMore, setDisplayShowMore] = index$1.react.exports.useState(error || warning ? false : showMore);
+  const [cacheUnique, setCacheUnique] = index$1.react.exports.useState(0);
+  index$1.react.exports.useEffect(() => {
+    setSelected(selectedOptions);
+  }, [selectedOptions]);
+  const handleShowMoreClick = () => {
+    setDisplayShowMore(false);
+  };
+  const Control = index$1.react.exports.useMemo(() => {
+    const ControlWrapper = innerProps => {
+      return index["default"].createElement(MultiSelect_styled.Control, _rollupPluginBabelHelpers["extends"]({
+        className: "multi-select-control",
+        readOnly: readOnly
+      }, innerProps));
+    };
+    ControlWrapper.displayName = 'ControlWrapper';
+    return ControlWrapper;
+  }, []);
+  const ValueContainer = index$1.react.exports.useMemo(() => {
+    const ValueContainerWrapper = innerProps => {
+      return index["default"].createElement(index["default"].Fragment, null, label && index["default"].createElement(MultiSelect_styled.Label, {
+        htmlFor: uniqueId
+      }, label), index["default"].createElement(MultiSelect_styled.ValueContainer, _rollupPluginBabelHelpers["extends"]({
+        showMore: displayShowMore,
+        error: error,
+        warning: warning,
+        className: "multi-select-values-container"
+      }, innerProps)));
+    };
+    ValueContainerWrapper.displayName = 'ValueContainerWrapper';
+    return ValueContainerWrapper;
+  }, [displayShowMore, error, warning]);
+  const MultiValue = innerProps => {
+    return index["default"].createElement(MultiSelect_styled.MultiValueWrapper, {
+      className: "multi-value-wrapper",
+      onMouseDown: e => {
+        e.stopPropagation();
+        if (onMultiValueClick && innerProps.data && !(e.target.role === 'button' || e.target instanceof SVGElement)) {
+          onMultiValueClick(innerProps.data);
+        }
+      }
+    }, index["default"].createElement(MultiSelect_styled.MultiValue, _rollupPluginBabelHelpers["extends"]({
+      className: "multi-value",
+      readOnly: readOnly
+    }, innerProps)));
+  };
+  const Input = index$1.react.exports.useMemo(() => {
+    const InputWrapper = innerProps => {
+      return index["default"].createElement(MultiSelect_styled.Input, _rollupPluginBabelHelpers["extends"]({
+        className: "multi-select-input",
+        $focused: focused,
+        edittext: editText
+      }, innerProps, {
+        isDisabled: readOnly || disabled
+      }));
+    };
+    InputWrapper.displayName = 'InputWrapper';
+    return InputWrapper;
+  }, [focused]);
+  const innerComponents = {
+    DropdownIndicator: null,
+    Control,
+    MultiValue,
+    MultiValueRemove: innerProps => {
+      return readOnly || disabled ? false : MultiValueRemove(innerProps);
+    },
+    ValueContainer,
+    Input,
+    Menu,
+    Option: innerProps => {
+      return innerProps.isSelected ? SelectedOption(innerProps) : Option(innerProps);
+    }
+  };
+  const sharedSelectProps = {
+    ref: forwardedRef,
+    value: selected,
+    options: loadOptions ? undefined : availableOptions,
+    loadOptions: loadOptions,
+    loadingMessage: loadingMessageFunc,
+    editText: editText,
+    formatCreateLabel: createNewOptionMessageFunc,
+    showMore: displayShowMore,
+    readOnly: readOnly,
+    isDisabled: disabled,
+    components: innerComponents,
+    focused: focused,
+    isMulti: true,
+    isClearable: false,
+    placeholder: null,
+    closeMenuOnSelect: false,
+    hideSelectedOptions: false,
+    cacheUniqs: loadOptions ? [cacheUnique] : undefined,
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false),
+    noOptionsMessage: input => {
+      return noOptionsMessageFunc(input.inputValue);
+    },
+    onChange: (selectedOptions, actionMeta) => {
+      switch (actionMeta.action) {
+        case 'create-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+          if (loadOptions) {
+            setCacheUnique(cacheUnique + 1);
+          }
+          setSelected(selectedOptions);
+          break;
+        case 'select-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+          setSelected(selectedOptions);
+          break;
+        case 'remove-value':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.removedValue);
+          }
+          setSelected(selectedOptions);
+          break;
+        case 'pop-value':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.removedValue);
+          }
+          setSelected(selectedOptions);
+          break;
+        case 'deselect-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+          setSelected(selectedOptions);
+          break;
+        case 'clear':
+          break;
+        default:
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+          setSelected(selectedOptions);
+          break;
+      }
+    }
+  };
+  if (hidden) return null;
+  return index["default"].createElement(MultiSelect_styled.MultiSelectWrapper, {
+    error: error,
+    warning: warning
+  }, loadOptions ? creatable ? index["default"].createElement(MultiSelect_styled.AsyncCreatableMultiSelect, _rollupPluginBabelHelpers["extends"]({}, sharedSelectProps, props)) : index["default"].createElement(MultiSelect_styled.AsyncMultiSelect, _rollupPluginBabelHelpers["extends"]({}, sharedSelectProps, props)) : creatable ? index["default"].createElement(MultiSelect_styled.CreatableMultiSelect, _rollupPluginBabelHelpers["extends"]({}, sharedSelectProps, props)) : index["default"].createElement(MultiSelect_styled.MultiSelect, _rollupPluginBabelHelpers["extends"]({}, sharedSelectProps, props)), displayShowMore && !(error || warning) && index["default"].createElement(MultiSelect_styled.ShowMoreWrapper, {
+    onClick: handleShowMoreClick
+  }, index["default"].createElement(MultiSelect_styled.ShowMoreOverlay, null), index["default"].createElement(MultiSelect_styled.ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && '(' + selected.length + ')')), (typeof error === 'string' || typeof warning === 'string') && index["default"].createElement(MultiSelect_styled.ErrorMessage, {
+    error: error,
+    warning: warning
+  }, error ? error : warning));
+});
+MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: index$2["default"].string,
+  availableOptions: index$2["default"].arrayOf(index$2["default"].object),
+  selectedOptions: index$2["default"].arrayOf(index$2["default"].object),
+  loadOptions: index$2["default"].func,
+  loadingMessageFunc: index$2["default"].func,
+  onUpdateCallback: index$2["default"].func,
+  editText: index$2["default"].string.isRequired,
+  creatable: index$2["default"].bool,
+  createNewOptionMessageFunc: index$2["default"].func,
+  noOptionsMessageFunc: index$2["default"].func,
+  onMultiValueClick: index$2["default"].func,
+  showMore: index$2["default"].bool,
+  showMoreText: index$2["default"].string,
+  displayTotalOnShowMore: index$2["default"].bool,
+  readOnly: index$2["default"].bool,
+  hidden: index$2["default"].bool,
+  disabled: index$2["default"].bool,
+  error: index$2["default"].oneOfType([index$2["default"].bool, index$2["default"].string]),
+  warning: index$2["default"].oneOfType([index$2["default"].bool, index$2["default"].string])
+} : {};
+MultiSelect.defaultProps = {
+  noOptionsMessageFunc: inputValue => {
+    if (inputValue) {
+      return `No matches for "${inputValue}"`;
+    } else {
+      return 'No available options';
+    }
+  },
+  showMore: false,
+  displayTotalOnShowMore: true,
+  readOnly: false,
+  disabled: false,
+  creatable: false,
+  error: false,
+  warning: false,
+  showMoreText: 'Show more',
+  hidden: false
+};
+const MultiValueRemove = innerProps => {
+  return index["default"].createElement(MultiSelect_styled.MultiValueRemove, innerProps, index["default"].createElement(close.ReactComponent, {
+    className: "multi-value-remove-icon"
+  }));
+};
+const Menu = innerProps => {
+  return index["default"].createElement(MultiSelect_styled.DropdownMenu, innerProps);
+};
+const Option = innerProps => {
+  return index["default"].createElement(MultiSelect_styled.Option, _rollupPluginBabelHelpers["extends"]({
+    className: "multi-select-dropdown-item"
+  }, innerProps));
+};
+const SelectedOption = innerProps => {
+  return index["default"].createElement(MultiSelect_styled.SelectedOption, innerProps, innerProps.label, index["default"].createElement(MultiSelect_styled.DropdownOptionDeleteIcon, null));
+};
+var MultiSelect$1 = MultiSelect;
+
+exports["default"] = MultiSelect$1;