@stenajs-webui/select 17.4.1 → 17.7.0

package/dist/index.es.js

@@ -1,497 +1,635 @@
-import * as React from 'react';
-import { useMemo } from 'react';
-import SelectComponent, { mergeStyles, components } from 'react-select';
-import AsyncComponent from 'react-select/async';
-import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
-import { Row, Space, Text, Column, Spacing } from '@stenajs-webui/core';
-import { Icon, Chip, FlatButton } from '@stenajs-webui/elements';
-import { differenceWith, isEqual, uniqWith, intersectionWith } from 'lodash';
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-var defaultSelectTheme = {
-    arrowColor: {
-        focused: {
-            hover: "var(--lhds-color-ui-500)",
-            standard: "var(--lhds-color-ui-500)",
-        },
-        closed: {
-            hover: "var(--lhds-color-ui-500)",
-            standard: "var(--lhds-color-ui-500)",
-        },
-    },
-    clearButtonColor: {
-        hover: "var(--lhds-color-ui-600)",
-        standard: "var(--lhds-color-ui-500)",
-    },
-    input: {
-        backgroundColor: "var(--swui-field-bg-enabled)",
-        border: "1px solid var(--swui-select-border-color)",
-        borderColor: "var(--swui-field-border-color)",
-        borderColorFocused: "var(--swui-field-border-color-hover)",
-        disabledBackgroundColor: "var(--swui-field-bg-disabled)",
-        warningBackgroundColor: "var(--swui-state-alert-light-color)",
-        errorBackgroundColor: "var(--swui-state-error-light-color)",
-        successBackgroundColor: "var(--swui-state-success-light-color)",
-        warningBorderColor: "var(--swui-state-alert-color)",
-        errorBorderColor: "var(--swui-state-error-color)",
-        successBorderColor: "var(--swui-state-success-color)",
-        boxShadowFocused: "var(--swui-field-focus-shadow)",
-        fontFamily: "var(--swui-font-primary)",
-        fontSize: "var(--swui-font-size-inputs)",
-        height: "32px",
-        minHeight: "32px",
-        placeholderColor: "var(--swui-field-border-color-disabled)",
-        textColor: "var(--swui-field-text-color)",
-        borderRadius: "var(--swui-field-border-radius)",
-    },
-    loadingIndicator: {
-        textColor: "var(--swui-field-text-color)",
-    },
-    menu: {
-        activeBackgroundColor: "var(--lhds-color-blue-100)",
-        activeTextColor: "var(--swui-field-text-color)",
-        selectedItemActiveBackgroundColor: "var(--lhds-color-blue-500)",
-        selectedItemActiveTextColor: "var(--lhds-color-blue-50)",
-        disabledTextColor: "var(--swui-field-text-color-disabled)",
-        disabledBackgroundColor: "var(--swui-field-bg-disabled)",
-        textColor: "var(--swui-field-text-color)",
-        backgroundColor: "var(--swui-field-bg-enabled)",
-        hoverTextColor: "var(--swui-field-text-color)",
-        hoverBackgroundColor: "var(--lhds-color-blue-200)",
-        selectedItemTextColor: "var(--lhds-color-blue-500)",
-        selectedItemIconColor: "var(--lhds-color-blue-500)",
-        selectedItemHoverTextColor: "var(--swui-field-text-color)",
-        selectedItemHoverIconColor: "var(--swui-field-text-color)",
-        selectedItemBackgroundColor: "var(--lhds-color-blue-50)",
-        selectedItemHoverBackgroundColor: "var(--lhds-color-blue-50)",
-        zIndex: 1,
-        width: "auto",
-        minWidth: "100%",
-        whiteSpace: "nowrap",
-    },
-    menuPortal: {
-        zIndex: 1,
-    },
-    multiSelect: {
-        backgroundColor: "var(--swui-primary-action-color)",
-        textColor: "var(--lhds-color-blue-50)",
-        removeButtonBackgroundColor: "transparent",
-        removeButtonTextColor: "var(--swui-white)",
-        removeButtonHoverBackgroundColor: "var(--swui-primary-action-color-hover)",
-        removeButtonHoverTextColor: "var(--swui-white)",
-    },
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import * as React from "react";
+import { useMemo } from "react";
+import SelectComponent, { mergeStyles, components } from "react-select";
+import AsyncComponent from "react-select/async";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Row, Space, Text, Column, Spacing } from "@stenajs-webui/core";
+import { Icon, stenaCheck, Chip, FlatButton } from "@stenajs-webui/elements";
+import { differenceWith, isEqual, uniqWith, intersectionWith } from "lodash";
+const defaultSelectTheme = {
+  arrowColor: {
+    focused: {
+      hover: "var(--lhds-color-ui-500)",
+      standard: "var(--lhds-color-ui-500)"
+    },
+    closed: {
+      hover: "var(--lhds-color-ui-500)",
+      standard: "var(--lhds-color-ui-500)"
+    }
+  },
+  clearButtonColor: {
+    hover: "var(--lhds-color-ui-600)",
+    standard: "var(--lhds-color-ui-500)"
+  },
+  input: {
+    backgroundColor: "var(--swui-field-bg-enabled)",
+    border: `1px solid var(--swui-select-border-color)`,
+    borderColor: "var(--swui-field-border-color)",
+    borderColorFocused: "var(--swui-field-border-color-hover)",
+    disabledBackgroundColor: "var(--swui-field-bg-disabled)",
+    warningBackgroundColor: "var(--swui-state-alert-light-color)",
+    errorBackgroundColor: "var(--swui-state-error-light-color)",
+    successBackgroundColor: "var(--swui-state-success-light-color)",
+    warningBorderColor: "var(--swui-state-alert-color)",
+    errorBorderColor: "var(--swui-state-error-color)",
+    successBorderColor: "var(--swui-state-success-color)",
+    boxShadowFocused: "var(--swui-field-focus-shadow)",
+    fontFamily: "var(--swui-font-primary)",
+    fontSize: "var(--swui-font-size-inputs)",
+    height: "32px",
+    minHeight: "32px",
+    placeholderColor: "var(--swui-field-border-color-disabled)",
+    textColor: "var(--swui-field-text-color)",
+    borderRadius: "var(--swui-field-border-radius)"
+  },
+  loadingIndicator: {
+    textColor: "var(--swui-field-text-color)"
+  },
+  menu: {
+    activeBackgroundColor: "var(--lhds-color-blue-100)",
+    activeTextColor: "var(--swui-field-text-color)",
+    selectedItemActiveBackgroundColor: "var(--lhds-color-blue-500)",
+    selectedItemActiveTextColor: "var(--lhds-color-blue-50)",
+    disabledTextColor: "var(--swui-field-text-color-disabled)",
+    disabledBackgroundColor: "var(--swui-field-bg-disabled)",
+    textColor: "var(--swui-field-text-color)",
+    backgroundColor: "var(--swui-field-bg-enabled)",
+    hoverTextColor: "var(--swui-field-text-color)",
+    hoverBackgroundColor: "var(--lhds-color-blue-200)",
+    selectedItemTextColor: "var(--lhds-color-blue-500)",
+    selectedItemIconColor: "var(--lhds-color-blue-500)",
+    selectedItemHoverTextColor: "var(--swui-field-text-color)",
+    selectedItemHoverIconColor: "var(--swui-field-text-color)",
+    selectedItemBackgroundColor: "var(--lhds-color-blue-50)",
+    selectedItemHoverBackgroundColor: "var(--lhds-color-blue-50)",
+    zIndex: 1,
+    width: "auto",
+    minWidth: "100%",
+    whiteSpace: "nowrap"
+  },
+  menuPortal: {
+    zIndex: 1
+  },
+  multiSelect: {
+    backgroundColor: "var(--swui-primary-action-color)",
+    textColor: "var(--lhds-color-blue-50)",
+    removeButtonBackgroundColor: "transparent",
+    removeButtonTextColor: "var(--swui-white)",
+    removeButtonHoverBackgroundColor: "var(--swui-primary-action-color-hover)",
+    removeButtonHoverTextColor: "var(--swui-white)"
+  }
+};
+const resolveOptionBackgroundColor = (colors, isDisabled, isSelected, isFocused) => {
+  if (isDisabled) {
+    return colors.disabledBackgroundColor;
+  } else if (isSelected && isFocused) {
+    return colors.selectedItemHoverBackgroundColor;
+  } else if (isSelected) {
+    return colors.selectedItemBackgroundColor;
+  } else if (isFocused) {
+    return colors.hoverBackgroundColor;
+  } else {
+    return void 0;
+  }
+};
+const resolveOptionColor = (colors, isDisabled, isSelected, isFocused) => {
+  if (isDisabled) {
+    return colors.disabledTextColor;
+  } else if (isSelected && isFocused) {
+    return colors.selectedItemHoverTextColor;
+  } else if (isSelected) {
+    return colors.selectedItemTextColor;
+  } else if (isFocused) {
+    return colors.hoverTextColor;
+  } else {
+    return void 0;
+  }
+};
+const resolveInputBackgroundColor = (colors, isDisabled, isFocused, variant) => {
+  if (isDisabled) {
+    return colors.disabledBackgroundColor;
+  } else if (isFocused) {
+    return colors.backgroundColor;
+  } else if (variant === "warning") {
+    return colors.warningBackgroundColor;
+  } else if (variant === "success") {
+    return colors.successBackgroundColor;
+  } else if (variant === "error") {
+    return colors.errorBackgroundColor;
+  } else {
+    return colors.backgroundColor;
+  }
+};
+const resolveInputBorderColor = (colors, isDisabled, isFocused, isHovered, variant) => {
+  if (isDisabled) {
+    return colors.borderColor;
+  } else if (isFocused) {
+    return colors.borderColorFocused;
+  } else if (variant === "warning") {
+    return colors.warningBorderColor;
+  } else if (variant === "success") {
+    return colors.successBorderColor;
+  } else if (variant === "error") {
+    return colors.errorBorderColor;
+  } else if (isHovered) {
+    return colors.borderColorFocused;
+  } else {
+    return colors.borderColor;
+  }
+};
+const createStylesFromTheme = ({
+  menu,
+  menuPortal,
+  input,
+  multiSelect,
+  clearButtonColor,
+  arrowColor,
+  loadingIndicator
+}, variant) => ({
+  option: (base, { isDisabled, isFocused, isSelected }) => ({
+    ...base,
+    fontFamily: input.fontFamily,
+    fontSize: input.fontSize,
+    backgroundColor: resolveOptionBackgroundColor(menu, isDisabled, isSelected, isFocused),
+    color: resolveOptionColor(menu, isDisabled, isSelected, isFocused),
+    cursor: isDisabled ? "not-allowed" : "default",
+    whiteSpace: menu.whiteSpace || base.whiteSpace,
+    ":active": {
+      backgroundColor: isDisabled ? void 0 : isSelected ? menu.selectedItemActiveBackgroundColor : menu.activeBackgroundColor,
+      color: isDisabled ? void 0 : isSelected ? menu.selectedItemActiveTextColor : menu.activeTextColor
+    }
+  }),
+  control: (base, { isFocused, isDisabled, menuIsOpen }) => ({
+    ...base,
+    fontFamily: input.fontFamily,
+    fontSize: input.fontSize,
+    minHeight: input.minHeight,
+    backgroundColor: resolveInputBackgroundColor(input, isDisabled, isFocused, variant),
+    borderRadius: input.borderRadius,
+    border: input.border,
+    "--swui-select-border-color": resolveInputBorderColor(input, isDisabled, isFocused || menuIsOpen, false, variant),
+    boxShadow: isFocused ? input.boxShadowFocused : void 0,
+    "&:hover": {
+      "--swui-select-border-color": resolveInputBorderColor(input, false, isFocused || menuIsOpen, true, variant)
+    }
+  }),
+  singleValue: (base) => ({
+    ...base,
+    fontFamily: input.fontFamily,
+    fontSize: input.fontSize,
+    color: input.textColor
+  }),
+  noOptionsMessage: (base) => ({
+    ...base,
+    fontFamily: input.fontFamily,
+    fontSize: input.fontSize
+  }),
+  input: (base) => ({
+    ...base,
+    fontFamily: input.fontFamily,
+    fontSize: input.fontSize,
+    color: input.textColor
+  }),
+  groupHeading: (base) => ({
+    ...base,
+    fontFamily: input.fontFamily
+  }),
+  multiValueLabel: (base) => ({
+    ...base,
+    backgroundColor: multiSelect.backgroundColor,
+    color: multiSelect.textColor,
+    fontFamily: input.fontFamily,
+    fontSize: "12px"
+  }),
+  indicatorSeparator: (base) => ({
+    ...base,
+    display: "none"
+  }),
+  clearIndicator: (base) => ({
+    ...base,
+    padding: "5px",
+    color: clearButtonColor.standard,
+    "&:hover": {
+      color: clearButtonColor.hover
+    },
+    cursor: "pointer"
+  }),
+  placeholder: (base) => ({
+    ...base,
+    fontFamily: input.fontFamily,
+    fontSize: input.fontSize,
+    color: input.placeholderColor
+  }),
+  container: (base) => ({
+    ...base
+  }),
+  valueContainer: (base) => ({
+    ...base,
+    padding: "0 8px"
+  }),
+  dropdownIndicator: (base, { isFocused }) => ({
+    ...base,
+    padding: "5px",
+    color: isFocused ? arrowColor.focused.standard : arrowColor.closed.standard,
+    "&:hover": {
+      color: isFocused ? arrowColor.focused.hover : arrowColor.closed.hover
+    },
+    svg: {
+      width: 14,
+      height: 14
+    }
+  }),
+  menu: (base) => ({
+    ...base,
+    backgroundColor: menu.backgroundColor,
+    color: menu.textColor,
+    minWidth: menu.minWidth || base.minWidth,
+    zIndex: menu.zIndex,
+    width: menu.width || base.width,
+    border: input.border,
+    borderColor: input.borderColorFocused
+  }),
+  menuPortal: (base) => ({
+    ...base,
+    zIndex: menuPortal.zIndex
+  }),
+  multiValueRemove: (styles) => ({
+    ...styles,
+    backgroundColor: multiSelect.removeButtonBackgroundColor,
+    ":hover": {
+      color: multiSelect.removeButtonHoverTextColor,
+      backgroundColor: multiSelect.removeButtonHoverBackgroundColor
+    },
+    color: multiSelect.removeButtonTextColor,
+    borderRadius: "50%",
+    width: 16,
+    height: 16,
+    padding: 0,
+    margin: 3,
+    marginTop: 4,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    cursor: "pointer"
+  }),
+  multiValue: (base) => ({
+    ...base,
+    backgroundColor: multiSelect.backgroundColor,
+    color: multiSelect.textColor,
+    fontFamily: input.fontFamily,
+    fontSize: "12px",
+    alignItems: "center",
+    margin: 0,
+    marginRight: 2
+  }),
+  loadingMessage: (base) => ({
+    ...base,
+    color: loadingIndicator.textColor,
+    fontFamily: input.fontFamily,
+    fontSize: input.fontSize
+  })
+});
+const createStylesFromVariant = (variant) => createStylesFromTheme(defaultSelectTheme, variant);
+const AsyncMultiSelect = ({
+  variant = "standard",
+  styles,
+  isMulti,
+  ...selectProps
+}) => {
+  const selectStyles = useMemo(() => {
+    const sourceStyles = createStylesFromVariant(variant);
+    return styles ? mergeStyles(sourceStyles, styles) : sourceStyles;
+  }, [variant, styles]);
+  return /* @__PURE__ */ jsx(AsyncComponent, {
+    styles: selectStyles,
+    ...selectProps,
+    isMulti: true
+  });
 };
-
-var resolveOptionBackgroundColor = function (colors, isDisabled, isSelected, isFocused) {
-    if (isDisabled) {
-        return colors.disabledBackgroundColor;
-    }
-    else if (isSelected && isFocused) {
-        return colors.selectedItemHoverBackgroundColor;
-    }
-    else if (isSelected) {
-        return colors.selectedItemBackgroundColor;
-    }
-    else if (isFocused) {
-        return colors.hoverBackgroundColor;
-    }
-    else {
-        return undefined;
-    }
-};
-var resolveOptionColor = function (colors, isDisabled, isSelected, isFocused) {
-    if (isDisabled) {
-        return colors.disabledTextColor;
-    }
-    else if (isSelected && isFocused) {
-        return colors.selectedItemHoverTextColor;
-    }
-    else if (isSelected) {
-        return colors.selectedItemTextColor;
-    }
-    else if (isFocused) {
-        return colors.hoverTextColor;
-    }
-    else {
-        return undefined;
-    }
-};
-var resolveInputBackgroundColor = function (colors, isDisabled, isFocused, variant) {
-    if (isDisabled) {
-        return colors.disabledBackgroundColor;
-    }
-    else if (isFocused) {
-        return colors.backgroundColor;
-    }
-    else if (variant === "warning") {
-        return colors.warningBackgroundColor;
-    }
-    else if (variant === "success") {
-        return colors.successBackgroundColor;
-    }
-    else if (variant === "error") {
-        return colors.errorBackgroundColor;
-    }
-    else {
-        return colors.backgroundColor;
-    }
-};
-var resolveInputBorderColor = function (colors, isDisabled, isFocused, isHovered, variant) {
-    if (isDisabled) {
-        return colors.borderColor;
-    }
-    else if (isFocused) {
-        return colors.borderColorFocused;
-    }
-    else if (variant === "warning") {
-        return colors.warningBorderColor;
-    }
-    else if (variant === "success") {
-        return colors.successBorderColor;
-    }
-    else if (variant === "error") {
-        return colors.errorBorderColor;
-    }
-    else if (isHovered) {
-        return colors.borderColorFocused;
-    }
-    else {
-        return colors.borderColor;
-    }
-};
-/**
- * @deprecated
- */
-var createStylesFromTheme = function (_a, variant) {
-    var menu = _a.menu, menuPortal = _a.menuPortal, input = _a.input, multiSelect = _a.multiSelect, clearButtonColor = _a.clearButtonColor, arrowColor = _a.arrowColor, loadingIndicator = _a.loadingIndicator;
-    return ({
-        option: function (base, _a) {
-            var isDisabled = _a.isDisabled, isFocused = _a.isFocused, isSelected = _a.isSelected;
-            return (__assign(__assign({}, base), { fontFamily: input.fontFamily, fontSize: input.fontSize, backgroundColor: resolveOptionBackgroundColor(menu, isDisabled, isSelected, isFocused), color: resolveOptionColor(menu, isDisabled, isSelected, isFocused), cursor: isDisabled ? "not-allowed" : "default", whiteSpace: menu.whiteSpace || base.whiteSpace, ":active": {
-                    backgroundColor: isDisabled
-                        ? undefined
-                        : isSelected
-                            ? menu.selectedItemActiveBackgroundColor
-                            : menu.activeBackgroundColor,
-                    color: isDisabled
-                        ? undefined
-                        : isSelected
-                            ? menu.selectedItemActiveTextColor
-                            : menu.activeTextColor,
-                } }));
-        },
-        control: function (base, _a) {
-            var isFocused = _a.isFocused, isDisabled = _a.isDisabled, menuIsOpen = _a.menuIsOpen;
-            return (__assign(__assign({}, base), { 
-                // none of react-selects styles are passed to <View />
-                fontFamily: input.fontFamily, fontSize: input.fontSize, minHeight: input.minHeight, backgroundColor: resolveInputBackgroundColor(input, isDisabled, isFocused, variant), borderRadius: input.borderRadius, border: input.border, "--swui-select-border-color": resolveInputBorderColor(input, isDisabled, isFocused || menuIsOpen, false, variant), boxShadow: isFocused ? input.boxShadowFocused : undefined, "&:hover": {
-                    "--swui-select-border-color": resolveInputBorderColor(input, false, isFocused || menuIsOpen, true, variant),
-                } }));
-        },
-        singleValue: function (base) { return (__assign(__assign({}, base), { fontFamily: input.fontFamily, fontSize: input.fontSize, color: input.textColor })); },
-        noOptionsMessage: function (base) { return (__assign(__assign({}, base), { fontFamily: input.fontFamily, fontSize: input.fontSize })); },
-        input: function (base) { return (__assign(__assign({}, base), { fontFamily: input.fontFamily, fontSize: input.fontSize, color: input.textColor })); },
-        groupHeading: function (base) { return (__assign(__assign({}, base), { fontFamily: input.fontFamily })); },
-        multiValueLabel: function (base) { return (__assign(__assign({}, base), { backgroundColor: multiSelect.backgroundColor, color: multiSelect.textColor, fontFamily: input.fontFamily, fontSize: "12px" })); },
-        indicatorSeparator: function (base) { return (__assign(__assign({}, base), { display: "none" })); },
-        clearIndicator: function (base) { return (__assign(__assign({}, base), { padding: "5px", color: clearButtonColor.standard, "&:hover": {
-                color: clearButtonColor.hover,
-            }, cursor: "pointer" })); },
-        placeholder: function (base) { return (__assign(__assign({}, base), { fontFamily: input.fontFamily, fontSize: input.fontSize, color: input.placeholderColor })); },
-        container: function (base) { return (__assign({}, base)); },
-        valueContainer: function (base) { return (__assign(__assign({}, base), { padding: "0 8px" })); },
-        dropdownIndicator: function (base, _a) {
-            var isFocused = _a.isFocused;
-            return (__assign(__assign({}, base), { padding: "5px", color: isFocused ? arrowColor.focused.standard : arrowColor.closed.standard, "&:hover": {
-                    color: isFocused ? arrowColor.focused.hover : arrowColor.closed.hover,
-                }, svg: {
-                    width: 14,
-                    height: 14,
-                } }));
-        },
-        menu: function (base) { return (__assign(__assign({}, base), { backgroundColor: menu.backgroundColor, color: menu.textColor, minWidth: menu.minWidth || base.minWidth, zIndex: menu.zIndex, width: menu.width || base.width, border: input.border, borderColor: input.borderColorFocused })); },
-        menuPortal: function (base) { return (__assign(__assign({}, base), { zIndex: menuPortal.zIndex })); },
-        multiValueRemove: function (styles) { return (__assign(__assign({}, styles), { backgroundColor: multiSelect.removeButtonBackgroundColor, ":hover": {
-                color: multiSelect.removeButtonHoverTextColor,
-                backgroundColor: multiSelect.removeButtonHoverBackgroundColor,
-            }, color: multiSelect.removeButtonTextColor, borderRadius: "50%", width: 16, height: 16, padding: 0, margin: 3, marginTop: 4, display: "flex", justifyContent: "center", alignItems: "center", cursor: "pointer" })); },
-        multiValue: function (base) { return (__assign(__assign({}, base), { backgroundColor: multiSelect.backgroundColor, color: multiSelect.textColor, fontFamily: input.fontFamily, fontSize: "12px", alignItems: "center", margin: 0, marginRight: 2 })); },
-        loadingMessage: function (base) { return (__assign(__assign({}, base), { color: loadingIndicator.textColor, fontFamily: input.fontFamily, fontSize: input.fontSize })); },
-    });
-};
-var createStylesFromVariant = function (variant) {
-    return createStylesFromTheme(defaultSelectTheme, variant);
+const AsyncSelect = ({
+  variant = "standard",
+  styles,
+  isMulti,
+  ...selectProps
+}) => {
+  const selectStyles = useMemo(() => {
+    const sourceStyles = createStylesFromVariant(variant);
+    return styles ? mergeStyles(sourceStyles, styles) : sourceStyles;
+  }, [variant, styles]);
+  return /* @__PURE__ */ jsx(AsyncComponent, {
+    styles: selectStyles,
+    ...selectProps,
+    isMulti: false
+  });
 };
-
-var AsyncMultiSelect = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
-    var selectStyles = useMemo(function () {
-        var sourceStyles = createStylesFromVariant(variant);
-        return styles ? mergeStyles(sourceStyles, styles) : sourceStyles;
-    }, [variant, styles]);
-    return (React.createElement(AsyncComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: true })));
+const MultiSelect = ({
+  variant = "standard",
+  styles,
+  isMulti,
+  ...selectProps
+}) => {
+  const selectStyles = useMemo(() => {
+    const sourceStyles = createStylesFromVariant(variant);
+    return styles ? mergeStyles(sourceStyles, styles) : sourceStyles;
+  }, [variant, styles]);
+  return /* @__PURE__ */ jsx(SelectComponent, {
+    styles: selectStyles,
+    ...selectProps,
+    isMulti: true
+  });
 };
-
-var AsyncSelect = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
-    var selectStyles = useMemo(function () {
-        var sourceStyles = createStylesFromVariant(variant);
-        return styles ? mergeStyles(sourceStyles, styles) : sourceStyles;
-    }, [variant, styles]);
-    return (React.createElement(AsyncComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: false })));
+const Select = ({
+  variant = "standard",
+  styles,
+  isMulti,
+  ...selectProps
+}) => {
+  const selectStyles = useMemo(() => {
+    const sourceStyles = createStylesFromVariant(variant);
+    return styles ? mergeStyles(sourceStyles, styles) : sourceStyles;
+  }, [variant, styles]);
+  return /* @__PURE__ */ jsx(SelectComponent, {
+    styles: selectStyles,
+    ...selectProps,
+    isMulti: false
+  });
 };
-
-var MultiSelect = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
-    var selectStyles = useMemo(function () {
-        var sourceStyles = createStylesFromVariant(variant);
-        return styles ? mergeStyles(sourceStyles, styles) : sourceStyles;
-    }, [variant, styles]);
-    return (React.createElement(SelectComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: true })));
+const removeGroupedOptionsType = (removedValue, selectedInternalOptions) => differenceWith(selectedInternalOptions, [...removedValue.internalOptions, removedValue], isEqual).map(convertInternalOptionToDropdownOption);
+const removeInternalOptions = (selectedInternalOption) => !("internalOptions" in selectedInternalOption);
+const removeOptionHeaders = (selectedInternalOptions) => selectedInternalOptions.filter(removeInternalOptions).map(convertInternalOptionToDropdownOption);
+const createOnChange = (onChange) => (incomingSelectedInternalOptions, meta) => {
+  const selectedInternalOptions = incomingSelectedInternalOptions != null ? incomingSelectedInternalOptions : [];
+  switch (meta.action) {
+    case "select-option":
+      if (meta.option && "internalOptions" in meta.option) {
+        const selectedOptions = uniqWith(selectedInternalOptions.reduce((previousValue, currentValue) => {
+          if ("internalOptions" in currentValue) {
+            return [...previousValue, ...currentValue.internalOptions];
+          } else {
+            return [
+              ...previousValue,
+              convertInternalOptionToDropdownOption(currentValue)
+            ];
+          }
+        }, []), isEqual);
+        onChange(selectedOptions, meta);
+      } else {
+        onChange(removeOptionHeaders(selectedInternalOptions), meta);
+      }
+      break;
+    case "deselect-option":
+      if (meta.option && "internalOptions" in meta.option) {
+        onChange(removeGroupedOptionsType(meta.option, removeOptionHeaders(selectedInternalOptions)), meta);
+      } else {
+        onChange(removeOptionHeaders(selectedInternalOptions), meta);
+      }
+      break;
+    case "remove-value":
+    case "pop-value":
+      if (meta.removedValue && "internalOptions" in meta.removedValue) {
+        onChange(removeGroupedOptionsType(meta.removedValue, removeOptionHeaders(selectedInternalOptions)), meta);
+      } else {
+        onChange(removeOptionHeaders(selectedInternalOptions), meta);
+      }
+      break;
+    case "clear":
+      onChange(selectedInternalOptions.map(convertInternalOptionToDropdownOption), meta);
+      break;
+    case "create-option":
+      onChange(selectedInternalOptions.map(convertInternalOptionToDropdownOption), meta);
+      break;
+  }
 };
-
-var Select = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
-    var selectStyles = useMemo(function () {
-        var sourceStyles = createStylesFromVariant(variant);
-        return styles ? mergeStyles(sourceStyles, styles) : sourceStyles;
-    }, [variant, styles]);
-    return (React.createElement(SelectComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: false })));
+const convertGroupedDropdownOptionsToInternalOptions = (options) => {
+  return options.reduce((previousValue, currentValue) => {
+    return [
+      ...previousValue,
+      convertGroupedDropdownOptionToInternalOption(currentValue),
+      ...currentValue.options.map(convertDropdownOptionToInternalOption)
+    ];
+  }, []);
 };
-
-var removeGroupedOptionsType = function (removedValue, selectedInternalOptions) {
-    return differenceWith(selectedInternalOptions, __spreadArray(__spreadArray([], removedValue.internalOptions, true), [removedValue], false), isEqual).map(convertInternalOptionToDropdownOption);
-};
-var removeInternalOptions = function (selectedInternalOption) { return !("internalOptions" in selectedInternalOption); };
-var removeOptionHeaders = function (selectedInternalOptions) {
-    return selectedInternalOptions
-        .filter(removeInternalOptions)
-        .map(convertInternalOptionToDropdownOption);
-};
-var createOnChange = function (onChange) {
-    return function (incomingSelectedInternalOptions, meta) {
-        var selectedInternalOptions = incomingSelectedInternalOptions !== null && incomingSelectedInternalOptions !== void 0 ? incomingSelectedInternalOptions : [];
-        switch (meta.action) {
-            case "select-option":
-                if (meta.option && "internalOptions" in meta.option) {
-                    var selectedOptions = uniqWith(selectedInternalOptions.reduce(function (previousValue, currentValue) {
-                        if ("internalOptions" in currentValue) {
-                            return __spreadArray(__spreadArray([], previousValue, true), currentValue.internalOptions, true);
-                        }
-                        else {
-                            return __spreadArray(__spreadArray([], previousValue, true), [
-                                convertInternalOptionToDropdownOption(currentValue),
-                            ], false);
-                        }
-                    }, []), isEqual);
-                    onChange(selectedOptions, meta);
-                }
-                else {
-                    onChange(removeOptionHeaders(selectedInternalOptions), meta);
-                }
-                break;
-            case "deselect-option":
-                if (meta.option && "internalOptions" in meta.option) {
-                    onChange(removeGroupedOptionsType(meta.option, removeOptionHeaders(selectedInternalOptions)), meta);
-                }
-                else {
-                    onChange(removeOptionHeaders(selectedInternalOptions), meta);
-                }
-                break;
-            case "remove-value":
-            case "pop-value":
-                if (meta.removedValue && "internalOptions" in meta.removedValue) {
-                    onChange(removeGroupedOptionsType(meta.removedValue, removeOptionHeaders(selectedInternalOptions)), meta);
-                }
-                else {
-                    onChange(removeOptionHeaders(selectedInternalOptions), meta);
-                }
-                break;
-            case "clear":
-                onChange(selectedInternalOptions.map(convertInternalOptionToDropdownOption), meta);
-                break;
-            case "create-option":
-                onChange(selectedInternalOptions.map(convertInternalOptionToDropdownOption), meta);
-                break;
-        }
-    };
-};
-var convertGroupedDropdownOptionsToInternalOptions = function (options) {
-    return options.reduce(function (previousValue, currentValue) {
-        return __spreadArray(__spreadArray(__spreadArray([], previousValue, true), [
-            convertGroupedDropdownOptionToInternalOption(currentValue)
-        ], false), currentValue.options.map(convertDropdownOptionToInternalOption), true);
-    }, []);
-};
-var convertValueToInternalValue = function (options, values) {
-    if (!values) {
-        return [];
-    }
-    var selectedOptions = [];
-    options.forEach(function (option) {
-        if (allOptionsExists(option.options, values)) {
-            selectedOptions.push(convertGroupedDropdownOptionToInternalOption(option));
-        }
-        selectedOptions.push.apply(selectedOptions, intersectionWith(option.options, values, isEqual).map(function (option) {
-            return convertDropdownOptionToInternalOption(option);
-        }));
-    });
-    return selectedOptions;
-};
-var allOptionsExists = function (options, selectedValues) {
-    if (!selectedValues) {
-        return false;
-    }
-    return (intersectionWith(options, selectedValues, isEqual).length === options.length);
-};
-var convertDropdownOptionToInternalOption = function (option) { return ({
-    data: option.data,
-    label: option.label,
-    value: option.value,
-}); };
-// TODO: can this be done `any` other way
-var convertGroupedDropdownOptionToInternalOption = function (option) { return ({
-    data: option.label,
-    label: option.label,
-    value: option.label,
-    internalOptions: option.options,
-}); };
-var convertInternalOptionToDropdownOption = function (option) { return ({
-    data: option.data,
-    label: option.label,
-    value: option.value,
-}); };
-
-var resolveIconColor = function (theme, isFocused) {
-    return isFocused
-        ? theme.menu.selectedItemHoverIconColor
-        : theme.menu.selectedItemIconColor;
-};
-function formatInnerOptionLabel(props) {
-    var _a;
-    var _b = props.selectProps, formatGroupLabel = _b.formatGroupLabel, formatOptionLabel = _b.formatOptionLabel;
-    if ("internalOptions" in props.data) {
-        return formatGroupLabel
-            ? formatGroupLabel({
-                label: props.data.label,
-                options: props.data.internalOptions,
-            })
-            : props.label;
-    }
-    return formatOptionLabel
-        ? formatOptionLabel(props.data, {
-            context: "menu",
-            inputValue: (_a = props.selectProps.inputValue) !== null && _a !== void 0 ? _a : "",
-            selectValue: props.getValue(),
-        })
-        : props.label;
-}
-var GroupedMultiSelect = function (_a) {
-    var onChange = _a.onChange, options = _a.options, value = _a.value, _b = _a.variant, variant = _b === void 0 ? "standard" : _b; _a.formatGroupLabel; _a.formatOptionLabel; var selectProps = __rest(_a, ["onChange", "options", "value", "variant", "formatGroupLabel", "formatOptionLabel"]);
-    var Option = function (props) {
-        var label = formatInnerOptionLabel(props);
-        var isGroupOption = "internalOptions" in props.data;
-        return (React.createElement(components.Option, __assign({}, props),
-            React.createElement(Row, null,
-                !isGroupOption && React.createElement(Space, null),
-                React.createElement(InnerOption, { theme: defaultSelectTheme, size: !isGroupOption ? "small" : undefined, label: label, selected: props.isSelected, focused: props.isFocused }))));
-    };
-    var MultiValue = function (props) {
-        return !("internalOptions" in props.data) ? (React.createElement(components.MultiValue, __assign({}, props))) : null;
-    };
-    var internalValue = options
-        ? convertValueToInternalValue(options, value)
-        : undefined;
-    var internalOptions = options
-        ? convertGroupedDropdownOptionsToInternalOptions(options)
-        : undefined;
-    return (React.createElement(MultiSelect, __assign({}, selectProps, { onChange: onChange ? createOnChange(onChange) : undefined, hideSelectedOptions: false, components: __assign(__assign({}, selectProps.components), { MultiValue: MultiValue, Option: Option }), isMulti: true, options: internalOptions, value: internalValue, variant: variant })));
-};
-var InnerOption = function (_a) {
-    var focused = _a.focused, label = _a.label, selected = _a.selected, size = _a.size, theme = _a.theme;
-    return (React.createElement(Row, { alignItems: "center", justifyContent: "space-between", flexGrow: 1 },
-        React.createElement(Text, { tabIndex: -1, size: size, color: "currentColor" }, label),
-        selected && (React.createElement(Icon, { color: resolveIconColor(theme, focused), icon: faCheck, size: 12 }))));
+const convertValueToInternalValue = (options, values) => {
+  if (!values) {
+    return [];
+  }
+  const selectedOptions = [];
+  options.forEach((option) => {
+    if (allOptionsExists(option.options, values)) {
+      selectedOptions.push(convertGroupedDropdownOptionToInternalOption(option));
+    }
+    selectedOptions.push(...intersectionWith(option.options, values, isEqual).map((option2) => convertDropdownOptionToInternalOption(option2)));
+  });
+  return selectedOptions;
 };
-
-function ChipRow(_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, _b = _a.noneSelectedLabel, noneSelectedLabel = _b === void 0 ? "None" : _b, children = _a.children;
-    return (React.createElement(Column, { flex: 1 },
-        React.createElement(Row, { flexWrap: "wrap" }, value === null || value === void 0 ? void 0 :
-            value.map(function (v) { return (React.createElement(Row, { key: v.value },
-                React.createElement(Spacing, { num: 0.5 },
-                    React.createElement(Chip, { label: v.label, onClickRemove: function () {
-                            var _a;
-                            return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange((_a = value === null || value === void 0 ? void 0 : value.filter(function (f) { return f.value !== v.value; })) !== null && _a !== void 0 ? _a : []);
-                        } })),
-                React.createElement(Space, null))); }),
-            (value === null || value === void 0 ? void 0 : value.length) ? (React.createElement(Spacing, { num: 0.5 },
-                React.createElement(FlatButton, { size: "small", label: "Clear", onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([]); } }))) : (React.createElement(Spacing, { num: 0.5 },
-                React.createElement(Chip, { variant: "secondary", label: noneSelectedLabel })))),
-        React.createElement(Space, { num: 0.5 }),
-        children));
+const allOptionsExists = (options, selectedValues) => {
+  if (!selectedValues) {
+    return false;
+  }
+  return intersectionWith(options, selectedValues, isEqual).length === options.length;
+};
+const convertDropdownOptionToInternalOption = (option) => ({
+  data: option.data,
+  label: option.label,
+  value: option.value
+});
+const convertGroupedDropdownOptionToInternalOption = (option) => ({
+  data: option.label,
+  label: option.label,
+  value: option.label,
+  internalOptions: option.options
+});
+const convertInternalOptionToDropdownOption = (option) => ({
+  data: option.data,
+  label: option.label,
+  value: option.value
+});
+const resolveIconColor = (theme, isFocused) => isFocused ? theme.menu.selectedItemHoverIconColor : theme.menu.selectedItemIconColor;
+function formatInnerOptionLabel(props) {
+  var _a;
+  const {
+    formatGroupLabel,
+    formatOptionLabel
+  } = props.selectProps;
+  if ("internalOptions" in props.data) {
+    return formatGroupLabel ? formatGroupLabel({
+      label: props.data.label,
+      options: props.data.internalOptions
+    }) : props.label;
+  }
+  return formatOptionLabel ? formatOptionLabel(props.data, {
+    context: "menu",
+    inputValue: (_a = props.selectProps.inputValue) != null ? _a : "",
+    selectValue: props.getValue()
+  }) : props.label;
+}
+const GroupedMultiSelect = ({
+  onChange,
+  options,
+  value,
+  variant = "standard",
+  formatGroupLabel,
+  formatOptionLabel,
+  ...selectProps
+}) => {
+  const Option = (props) => {
+    const label = formatInnerOptionLabel(props);
+    const isGroupOption = "internalOptions" in props.data;
+    return /* @__PURE__ */ jsx(components.Option, {
+      ...props,
+      children: /* @__PURE__ */ jsxs(Row, {
+        children: [!isGroupOption && /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsx(InnerOption, {
+          theme: defaultSelectTheme,
+          size: !isGroupOption ? "small" : void 0,
+          label,
+          selected: props.isSelected,
+          focused: props.isFocused
+        })]
+      })
+    });
+  };
+  const MultiValue = (props) => {
+    return !("internalOptions" in props.data) ? /* @__PURE__ */ jsx(components.MultiValue, {
+      ...props
+    }) : null;
+  };
+  const internalValue = options ? convertValueToInternalValue(options, value) : void 0;
+  const internalOptions = options ? convertGroupedDropdownOptionsToInternalOptions(options) : void 0;
+  return /* @__PURE__ */ jsx(MultiSelect, {
+    ...selectProps,
+    onChange: onChange ? createOnChange(onChange) : void 0,
+    hideSelectedOptions: false,
+    components: {
+      ...selectProps.components,
+      MultiValue,
+      Option
+    },
+    isMulti: true,
+    options: internalOptions,
+    value: internalValue,
+    variant
+  });
+};
+const InnerOption = ({
+  focused,
+  label,
+  selected,
+  size,
+  theme
+}) => /* @__PURE__ */ jsxs(Row, {
+  alignItems: "center",
+  justifyContent: "space-between",
+  flexGrow: 1,
+  children: [/* @__PURE__ */ jsx(Text, {
+    tabIndex: -1,
+    size,
+    color: "currentColor",
+    children: label
+  }), selected && /* @__PURE__ */ jsx(Icon, {
+    color: resolveIconColor(theme, focused),
+    icon: stenaCheck,
+    size: 12
+  })]
+});
+function ChipRow({
+  value,
+  onValueChange,
+  noneSelectedLabel = "None",
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Column, {
+    flex: 1,
+    children: [/* @__PURE__ */ jsxs(Row, {
+      flexWrap: "wrap",
+      children: [value == null ? void 0 : value.map((v) => /* @__PURE__ */ jsxs(Row, {
+        children: [/* @__PURE__ */ jsx(Spacing, {
+          num: 0.5,
+          children: /* @__PURE__ */ jsx(Chip, {
+            label: v.label,
+            onClickRemove: () => {
+              var _a;
+              return onValueChange == null ? void 0 : onValueChange((_a = value == null ? void 0 : value.filter((f) => f.value !== v.value)) != null ? _a : []);
+            }
+          })
+        }), /* @__PURE__ */ jsx(Space, {})]
+      }, v.value)), (value == null ? void 0 : value.length) ? /* @__PURE__ */ jsx(Spacing, {
+        num: 0.5,
+        children: /* @__PURE__ */ jsx(FlatButton, {
+          size: "small",
+          label: "Clear",
+          onClick: () => onValueChange == null ? void 0 : onValueChange([])
+        })
+      }) : /* @__PURE__ */ jsx(Spacing, {
+        num: 0.5,
+        children: /* @__PURE__ */ jsx(Chip, {
+          variant: "secondary",
+          label: noneSelectedLabel
+        })
+      })]
+    }), /* @__PURE__ */ jsx(Space, {
+      num: 0.5
+    }), children]
+  });
+}
+function _ChipMultiSelect({
+  value,
+  onValueChange,
+  placeholder = "Type to search",
+  loading,
+  inputValue,
+  onInputChange,
+  noneSelectedLabel = "None",
+  ...selectProps
+}) {
+  return /* @__PURE__ */ jsx(ChipRow, {
+    noneSelectedLabel,
+    onValueChange,
+    value,
+    children: /* @__PURE__ */ jsx(MultiSelect, {
+      ...selectProps,
+      isClearable: false,
+      value,
+      onChange: onValueChange ? (value2) => onValueChange([...value2]) : void 0,
+      backspaceRemovesValue: false,
+      hideSelectedOptions: true,
+      controlShouldRenderValue: false,
+      placeholder,
+      isLoading: loading,
+      inputValue,
+      onInputChange
+    })
+  });
+}
+const ChipMultiSelect = React.memo(_ChipMultiSelect);
+function _GroupedChipMultiSelect({
+  value,
+  onValueChange,
+  placeholder = "Type to search",
+  loading,
+  inputValue,
+  onInputChange,
+  noneSelectedLabel = "None",
+  ...selectProps
+}) {
+  return /* @__PURE__ */ jsx(ChipRow, {
+    noneSelectedLabel,
+    onValueChange,
+    value,
+    children: /* @__PURE__ */ jsx(GroupedMultiSelect, {
+      ...selectProps,
+      isClearable: false,
+      value,
+      onChange: onValueChange ? (value2) => onValueChange([...value2]) : void 0,
+      backspaceRemovesValue: false,
+      hideSelectedOptions: true,
+      controlShouldRenderValue: false,
+      placeholder,
+      isLoading: loading,
+      inputValue,
+      onInputChange
+    })
+  });
 }
-
-function _ChipMultiSelect(_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Type to search" : _b, loading = _a.loading, inputValue = _a.inputValue, onInputChange = _a.onInputChange, _c = _a.noneSelectedLabel, noneSelectedLabel = _c === void 0 ? "None" : _c, selectProps = __rest(_a, ["value", "onValueChange", "placeholder", "loading", "inputValue", "onInputChange", "noneSelectedLabel"]);
-    return (React.createElement(ChipRow, { noneSelectedLabel: noneSelectedLabel, onValueChange: onValueChange, value: value },
-        React.createElement(MultiSelect, __assign({}, selectProps, { isClearable: false, value: value, onChange: onValueChange ? function (value) { return onValueChange(__spreadArray([], value, true)); } : undefined, backspaceRemovesValue: false, hideSelectedOptions: true, controlShouldRenderValue: false, placeholder: placeholder, isLoading: loading, inputValue: inputValue, onInputChange: onInputChange }))));
-}
-var ChipMultiSelect = React.memo(_ChipMultiSelect);
-
-function _GroupedChipMultiSelect(_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Type to search" : _b, loading = _a.loading, inputValue = _a.inputValue, onInputChange = _a.onInputChange, _c = _a.noneSelectedLabel, noneSelectedLabel = _c === void 0 ? "None" : _c, selectProps = __rest(_a, ["value", "onValueChange", "placeholder", "loading", "inputValue", "onInputChange", "noneSelectedLabel"]);
-    return (React.createElement(ChipRow, { noneSelectedLabel: noneSelectedLabel, onValueChange: onValueChange, value: value },
-        React.createElement(GroupedMultiSelect, __assign({}, selectProps, { isClearable: false, value: value, onChange: onValueChange ? function (value) { return onValueChange(__spreadArray([], value, true)); } : undefined, backspaceRemovesValue: false, hideSelectedOptions: true, controlShouldRenderValue: false, placeholder: placeholder, isLoading: loading, inputValue: inputValue, onInputChange: onInputChange }))));
-}
-var GroupedChipMultiSelect = React.memo(_GroupedChipMultiSelect);
-
+const GroupedChipMultiSelect = React.memo(_GroupedChipMultiSelect);
 export { AsyncMultiSelect, AsyncSelect, ChipMultiSelect, GroupedChipMultiSelect, GroupedMultiSelect, MultiSelect, Select, createStylesFromTheme, createStylesFromVariant, defaultSelectTheme };
 //# sourceMappingURL=index.es.js.map