@stenajs-webui/select 17.13.2 → 17.13.3

package/dist/index.es.js

@@ -1,12 +1,13 @@
-(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 = {
+(function(){"use strict";try{var e=document.createElement("style");e.appendChild(document.createTextNode("")),document.head.appendChild(e)}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import * as T from "react";
+import { useMemo as p } from "react";
+import F, { mergeStyles as g, components as B } from "react-select";
+import M from "react-select/async";
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import { Row as C, Space as S, Text as j, Column as E, Spacing as k } from "@stenajs-webui/core";
+import { Icon as N, stenaCheck as P, Chip as I, FlatButton as q } from "@stenajs-webui/elements";
+import { uniqWith as V, isEqual as w, intersectionWith as R, differenceWith as _ } from "lodash";
+const H = {
   arrowColor: {
     focused: {
       hover: "var(--lhds-color-ui-500)",
@@ -23,7 +24,7 @@ const defaultSelectTheme = {
   },
   input: {
     backgroundColor: "var(--swui-field-bg-enabled)",
-    border: `1px solid var(--swui-select-border-color)`,
+    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)",
@@ -85,195 +86,158 @@ const defaultSelectTheme = {
     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,
-  groupHeading,
-  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,
+}, J = (o, r, e, t) => r ? o.disabledBackgroundColor : e && t ? o.selectedItemHoverBackgroundColor : e ? o.selectedItemBackgroundColor : t ? o.hoverBackgroundColor : void 0, K = (o, r, e, t) => r ? o.disabledTextColor : e && t ? o.selectedItemHoverTextColor : e ? o.selectedItemTextColor : t ? o.hoverTextColor : void 0, Q = (o, r, e, t) => r ? o.disabledBackgroundColor : e ? o.backgroundColor : t === "warning" ? o.warningBackgroundColor : t === "success" ? o.successBackgroundColor : t === "error" ? o.errorBackgroundColor : o.backgroundColor, O = (o, r, e, t, n) => r ? o.borderColor : e ? o.borderColorFocused : n === "warning" ? o.warningBorderColor : n === "success" ? o.successBorderColor : n === "error" ? o.errorBorderColor : t ? o.borderColorFocused : o.borderColor, U = ({
+  menu: o,
+  menuPortal: r,
+  input: e,
+  multiSelect: t,
+  clearButtonColor: n,
+  arrowColor: i,
+  groupHeading: c,
+  loadingIndicator: v
+}, u) => ({
+  option: (l, { isDisabled: d, isFocused: s, isSelected: f }) => ({
+    ...l,
+    fontFamily: e.fontFamily,
+    fontSize: e.fontSize,
+    backgroundColor: J(
+      o,
+      d,
+      f,
+      s
+    ),
+    color: K(o, d, f, s),
+    cursor: d ? "not-allowed" : "default",
+    whiteSpace: o.whiteSpace || l.whiteSpace,
     ":active": {
-      backgroundColor: isDisabled ? void 0 : isSelected ? menu.selectedItemActiveBackgroundColor : menu.activeBackgroundColor,
-      color: isDisabled ? void 0 : isSelected ? menu.selectedItemActiveTextColor : menu.activeTextColor
+      backgroundColor: d ? void 0 : f ? o.selectedItemActiveBackgroundColor : o.activeBackgroundColor,
+      color: d ? void 0 : f ? o.selectedItemActiveTextColor : o.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,
+  control: (l, { isFocused: d, isDisabled: s, menuIsOpen: f }) => ({
+    ...l,
+    fontFamily: e.fontFamily,
+    fontSize: e.fontSize,
+    minHeight: e.minHeight,
+    backgroundColor: Q(
+      e,
+      s,
+      d,
+      u
+    ),
+    borderRadius: e.borderRadius,
+    border: e.border,
+    "--swui-select-border-color": O(
+      e,
+      s,
+      d || f,
+      !1,
+      u
+    ),
+    boxShadow: d ? e.boxShadowFocused : void 0,
     "&:hover": {
-      "--swui-select-border-color": resolveInputBorderColor(input, false, isFocused || menuIsOpen, true, variant)
+      "--swui-select-border-color": O(
+        e,
+        !1,
+        d || f,
+        !0,
+        u
+      )
     }
   }),
-  singleValue: (base) => ({
-    ...base,
-    fontFamily: input.fontFamily,
-    fontSize: input.fontSize,
-    color: input.textColor
+  singleValue: (l) => ({
+    ...l,
+    fontFamily: e.fontFamily,
+    fontSize: e.fontSize,
+    color: e.textColor
   }),
-  noOptionsMessage: (base) => ({
-    ...base,
-    fontFamily: input.fontFamily,
-    fontSize: input.fontSize
+  noOptionsMessage: (l) => ({
+    ...l,
+    fontFamily: e.fontFamily,
+    fontSize: e.fontSize
   }),
-  input: (base) => ({
-    ...base,
-    fontFamily: input.fontFamily,
-    fontSize: input.fontSize,
-    color: input.textColor
+  input: (l) => ({
+    ...l,
+    fontFamily: e.fontFamily,
+    fontSize: e.fontSize,
+    color: e.textColor
   }),
-  groupHeading: (base) => ({
-    ...base,
-    fontFamily: input.fontFamily,
-    fontSize: groupHeading.fontSize,
-    lineHeight: groupHeading.lineHeight,
-    fontWeight: groupHeading.fontWeight,
-    color: groupHeading.color,
-    letterSpacing: groupHeading.letterSpacing
+  groupHeading: (l) => ({
+    ...l,
+    fontFamily: e.fontFamily,
+    fontSize: c.fontSize,
+    lineHeight: c.lineHeight,
+    fontWeight: c.fontWeight,
+    color: c.color,
+    letterSpacing: c.letterSpacing
   }),
-  multiValueLabel: (base) => ({
-    ...base,
-    backgroundColor: multiSelect.backgroundColor,
-    color: multiSelect.textColor,
-    fontFamily: input.fontFamily,
-    fontSize: groupHeading.fontSize
+  multiValueLabel: (l) => ({
+    ...l,
+    backgroundColor: t.backgroundColor,
+    color: t.textColor,
+    fontFamily: e.fontFamily,
+    fontSize: c.fontSize
   }),
-  indicatorSeparator: (base) => ({
-    ...base,
+  indicatorSeparator: (l) => ({
+    ...l,
     display: "none"
   }),
-  clearIndicator: (base) => ({
-    ...base,
+  clearIndicator: (l) => ({
+    ...l,
     padding: "5px",
-    color: clearButtonColor.standard,
+    color: n.standard,
     "&:hover": {
-      color: clearButtonColor.hover
+      color: n.hover
     },
     cursor: "pointer"
   }),
-  placeholder: (base) => ({
-    ...base,
-    fontFamily: input.fontFamily,
-    fontSize: input.fontSize,
-    color: input.placeholderColor
+  placeholder: (l) => ({
+    ...l,
+    fontFamily: e.fontFamily,
+    fontSize: e.fontSize,
+    color: e.placeholderColor
   }),
-  container: (base) => ({
-    ...base
+  container: (l) => ({
+    ...l
   }),
-  valueContainer: (base) => ({
-    ...base,
+  valueContainer: (l) => ({
+    ...l,
     padding: "0 8px"
   }),
-  dropdownIndicator: (base, { isFocused }) => ({
-    ...base,
+  dropdownIndicator: (l, { isFocused: d }) => ({
+    ...l,
     padding: "5px",
-    color: isFocused ? arrowColor.focused.standard : arrowColor.closed.standard,
+    color: d ? i.focused.standard : i.closed.standard,
     "&:hover": {
-      color: isFocused ? arrowColor.focused.hover : arrowColor.closed.hover
+      color: d ? i.focused.hover : i.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
+  menu: (l) => ({
+    ...l,
+    backgroundColor: o.backgroundColor,
+    color: o.textColor,
+    minWidth: o.minWidth || l.minWidth,
+    zIndex: o.zIndex,
+    width: o.width || l.width,
+    border: e.border,
+    borderColor: e.borderColorFocused
   }),
-  menuPortal: (base) => ({
-    ...base,
-    zIndex: menuPortal.zIndex
+  menuPortal: (l) => ({
+    ...l,
+    zIndex: r.zIndex
   }),
-  multiValueRemove: (styles) => ({
-    ...styles,
-    backgroundColor: multiSelect.removeButtonBackgroundColor,
+  multiValueRemove: (l) => ({
+    ...l,
+    backgroundColor: t.removeButtonBackgroundColor,
     ":hover": {
-      color: multiSelect.removeButtonHoverTextColor,
-      backgroundColor: multiSelect.removeButtonHoverBackgroundColor
+      color: t.removeButtonHoverTextColor,
+      backgroundColor: t.removeButtonHoverBackgroundColor
     },
-    color: multiSelect.removeButtonTextColor,
+    color: t.removeButtonTextColor,
     borderRadius: "50%",
     width: 16,
     height: 16,
@@ -285,364 +249,363 @@ const createStylesFromTheme = ({
     alignItems: "center",
     cursor: "pointer"
   }),
-  multiValue: (base) => ({
-    ...base,
-    backgroundColor: multiSelect.backgroundColor,
-    color: multiSelect.textColor,
-    fontFamily: input.fontFamily,
-    fontSize: groupHeading.fontSize,
+  multiValue: (l) => ({
+    ...l,
+    backgroundColor: t.backgroundColor,
+    color: t.textColor,
+    fontFamily: e.fontFamily,
+    fontSize: c.fontSize,
     alignItems: "center",
     margin: 0,
     marginRight: 2
   }),
-  loadingMessage: (base) => ({
-    ...base,
-    color: loadingIndicator.textColor,
-    fontFamily: input.fontFamily,
-    fontSize: input.fontSize
+  loadingMessage: (l) => ({
+    ...l,
+    color: v.textColor,
+    fontFamily: e.fontFamily,
+    fontSize: e.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
+}), x = (o) => U(H, o);
+function ho({
+  variant: o = "standard",
+  styles: r,
+  isMulti: e,
+  ...t
+}) {
+  const n = p(() => {
+    const i = x(o);
+    return r ? g(i, r) : i;
+  }, [o, r]);
+  return /* @__PURE__ */ a(M, {
+    styles: n,
+    ...t,
+    isMulti: !0
   });
-};
-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
+}
+function mo({
+  variant: o = "standard",
+  styles: r,
+  isMulti: e,
+  ...t
+}) {
+  const n = p(() => {
+    const i = x(o);
+    return r ? g(i, r) : i;
+  }, [o, r]);
+  return /* @__PURE__ */ a(M, {
+    styles: n,
+    ...t,
+    isMulti: !1
   });
-};
-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
+}
+function W({
+  variant: o = "standard",
+  styles: r,
+  isMulti: e,
+  ...t
+}) {
+  const n = p(() => {
+    const i = x(o);
+    return r ? g(i, r) : i;
+  }, [o, r]);
+  return /* @__PURE__ */ a(F, {
+    styles: n,
+    ...t,
+    isMulti: !0
   });
-};
-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
+}
+function bo({
+  variant: o = "standard",
+  styles: r,
+  isMulti: e,
+  ...t
+}) {
+  const n = p(() => {
+    const i = x(o);
+    return r ? g(i, r) : i;
+  }, [o, r]);
+  return /* @__PURE__ */ a(F, {
+    styles: n,
+    ...t,
+    isMulti: !1
   });
-};
-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) {
+}
+const z = (o, r) => _(
+  r,
+  [...o.internalOptions, o],
+  w
+).map(b), X = (o) => !("internalOptions" in o), h = (o) => o.filter(X).map(b), Y = (o) => (r, e) => {
+  const t = r != null ? r : [];
+  switch (e.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);
-      }
+      if (e.option && "internalOptions" in e.option) {
+        const n = V(
+          t.reduce(
+            (i, c) => "internalOptions" in c ? [...i, ...c.internalOptions] : [
+              ...i,
+              b(c)
+            ],
+            []
+          ),
+          w
+        );
+        o(n, e);
+      } else
+        o(h(t), e);
       break;
     case "deselect-option":
-      if (meta.option && "internalOptions" in meta.option) {
-        onChange(removeGroupedOptionsType(meta.option, removeOptionHeaders(selectedInternalOptions)), meta);
-      } else {
-        onChange(removeOptionHeaders(selectedInternalOptions), meta);
-      }
+      e.option && "internalOptions" in e.option ? o(
+        z(
+          e.option,
+          h(t)
+        ),
+        e
+      ) : o(h(t), e);
       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);
-      }
+      e.removedValue && "internalOptions" in e.removedValue ? o(
+        z(
+          e.removedValue,
+          h(t)
+        ),
+        e
+      ) : o(h(t), e);
       break;
     case "clear":
-      onChange(selectedInternalOptions.map(convertInternalOptionToDropdownOption), meta);
+      o(
+        t.map(b),
+        e
+      );
       break;
     case "create-option":
-      onChange(selectedInternalOptions.map(convertInternalOptionToDropdownOption), meta);
+      o(
+        t.map(b),
+        e
+      );
       break;
   }
-};
-const convertGroupedDropdownOptionsToInternalOptions = (options) => {
-  return options.reduce((previousValue, currentValue) => {
-    return [
-      ...previousValue,
-      convertGroupedDropdownOptionToInternalOption(currentValue),
-      ...currentValue.options.map(convertDropdownOptionToInternalOption)
-    ];
-  }, []);
-};
-const convertValueToInternalValue = (options, values) => {
-  if (!values) {
+}, Z = (o) => o.reduce(
+  (r, e) => [
+    ...r,
+    L(e),
+    ...e.options.map(G)
+  ],
+  []
+), $ = (o, r) => {
+  if (!r)
     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;
-};
-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 e = [];
+  return o.forEach((t) => {
+    D(t.options, r) && e.push(
+      L(t)
+    ), e.push(
+      ...R(t.options, r, w).map(
+        (n) => G(n)
+      )
+    );
+  }), e;
+}, D = (o, r) => r ? R(o, r, w).length === o.length : !1, G = (o) => ({
+  data: o.data,
+  label: o.label,
+  value: o.value
+}), L = (o) => ({
+  data: o.label,
+  label: o.label,
+  value: o.label,
+  internalOptions: o.options
+}), b = (o) => ({
+  data: o.data,
+  label: o.label,
+  value: o.value
+}), oo = (o, r) => r ? o.menu.selectedItemHoverIconColor : o.menu.selectedItemIconColor;
+function eo(o) {
+  var t;
   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, {
+    formatGroupLabel: r,
+    formatOptionLabel: e
+  } = o.selectProps;
+  return "internalOptions" in o.data ? r ? r({
+    label: o.data.label,
+    options: o.data.internalOptions
+  }) : o.label : e ? e(o.data, {
     context: "menu",
-    inputValue: (_a = props.selectProps.inputValue) != null ? _a : "",
-    selectValue: props.getValue()
-  }) : props.label;
+    inputValue: (t = o.selectProps.inputValue) != null ? t : "",
+    selectValue: o.getValue()
+  }) : o.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
+function ro({
+  onChange: o,
+  options: r,
+  value: e,
+  variant: t = "standard",
+  formatGroupLabel: n,
+  formatOptionLabel: i,
+  ...c
+}) {
+  const v = (s) => {
+    const f = eo(s), y = "internalOptions" in s.data;
+    return /* @__PURE__ */ a(B.Option, {
+      ...s,
+      children: /* @__PURE__ */ m(C, {
+        children: [!y && /* @__PURE__ */ a(S, {}), /* @__PURE__ */ a(to, {
+          theme: H,
+          size: y ? void 0 : "small",
+          label: f,
+          selected: s.isSelected,
+          focused: s.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,
+  }, u = (s) => "internalOptions" in s.data ? null : /* @__PURE__ */ a(B.MultiValue, {
+    ...s
+  }), l = r ? $(r, e) : void 0, d = r ? Z(r) : void 0;
+  return /* @__PURE__ */ a(W, {
+    ...c,
+    onChange: o ? Y(o) : void 0,
+    hideSelectedOptions: !1,
     components: {
-      ...selectProps.components,
-      MultiValue,
-      Option
+      ...c.components,
+      MultiValue: u,
+      Option: v
     },
-    isMulti: true,
-    options: internalOptions,
-    value: internalValue,
-    variant
+    isMulti: !0,
+    options: d,
+    value: l,
+    variant: t
   });
-};
-const InnerOption = ({
-  focused,
-  label,
-  selected,
-  size,
-  theme
-}) => /* @__PURE__ */ jsxs(Row, {
+}
+const to = ({
+  focused: o,
+  label: r,
+  selected: e,
+  size: t,
+  theme: n
+}) => /* @__PURE__ */ m(C, {
   alignItems: "center",
   justifyContent: "space-between",
   flexGrow: 1,
-  children: [/* @__PURE__ */ jsx(Text, {
+  children: [/* @__PURE__ */ a(j, {
     tabIndex: -1,
-    size,
+    size: t,
     color: "currentColor",
-    children: label
-  }), selected && /* @__PURE__ */ jsx(Icon, {
-    color: resolveIconColor(theme, focused),
-    icon: stenaCheck,
+    children: r
+  }), e && /* @__PURE__ */ a(N, {
+    color: oo(n, o),
+    icon: P,
     size: 12
   })]
 });
-function ChipRow({
-  value,
-  onValueChange,
-  noneSelectedLabel = "None",
-  children
+function A({
+  value: o,
+  onValueChange: r,
+  noneSelectedLabel: e = "None",
+  children: t
 }) {
-  return /* @__PURE__ */ jsxs(Column, {
+  return /* @__PURE__ */ m(E, {
     flex: 1,
-    children: [/* @__PURE__ */ jsxs(Row, {
+    children: [/* @__PURE__ */ m(C, {
       flexWrap: "wrap",
-      children: [value == null ? void 0 : value.map((v) => /* @__PURE__ */ jsxs(Row, {
-        children: [/* @__PURE__ */ jsx(Spacing, {
+      children: [o == null ? void 0 : o.map((n) => /* @__PURE__ */ m(C, {
+        children: [/* @__PURE__ */ a(k, {
           num: 0.5,
-          children: /* @__PURE__ */ jsx(Chip, {
-            label: v.label,
+          children: /* @__PURE__ */ a(I, {
+            label: n.label,
             onClickRemove: () => {
-              var _a;
-              return onValueChange == null ? void 0 : onValueChange((_a = value == null ? void 0 : value.filter((f) => f.value !== v.value)) != null ? _a : []);
+              var i;
+              return r == null ? void 0 : r((i = o == null ? void 0 : o.filter((c) => c.value !== n.value)) != null ? i : []);
             }
           })
-        }), /* @__PURE__ */ jsx(Space, {})]
-      }, v.value)), (value == null ? void 0 : value.length) ? /* @__PURE__ */ jsx(Spacing, {
+        }), /* @__PURE__ */ a(S, {})]
+      }, n.value)), o != null && o.length ? /* @__PURE__ */ a(k, {
         num: 0.5,
-        children: /* @__PURE__ */ jsx(FlatButton, {
+        children: /* @__PURE__ */ a(q, {
           size: "small",
           label: "Clear",
-          onClick: () => onValueChange == null ? void 0 : onValueChange([])
+          onClick: () => r == null ? void 0 : r([])
         })
-      }) : /* @__PURE__ */ jsx(Spacing, {
+      }) : /* @__PURE__ */ a(k, {
         num: 0.5,
-        children: /* @__PURE__ */ jsx(Chip, {
+        children: /* @__PURE__ */ a(I, {
           variant: "secondary",
-          label: noneSelectedLabel
+          label: e
         })
       })]
-    }), /* @__PURE__ */ jsx(Space, {
+    }), /* @__PURE__ */ a(S, {
       num: 0.5
-    }), children]
+    }), t]
   });
 }
-function _ChipMultiSelect({
-  value,
-  onValueChange,
-  placeholder = "Type to search",
-  loading,
-  inputValue,
-  onInputChange,
-  noneSelectedLabel = "None",
-  ...selectProps
+function lo({
+  value: o,
+  onValueChange: r,
+  placeholder: e = "Type to search",
+  loading: t,
+  inputValue: n,
+  onInputChange: i,
+  noneSelectedLabel: c = "None",
+  ...v
 }) {
-  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
+  return /* @__PURE__ */ a(A, {
+    noneSelectedLabel: c,
+    onValueChange: r,
+    value: o,
+    children: /* @__PURE__ */ a(W, {
+      ...v,
+      isClearable: !1,
+      value: o,
+      onChange: r ? (u) => r([...u]) : void 0,
+      backspaceRemovesValue: !1,
+      hideSelectedOptions: !0,
+      controlShouldRenderValue: !1,
+      placeholder: e,
+      isLoading: t,
+      inputValue: n,
+      onInputChange: i
     })
   });
 }
-const ChipMultiSelect = React.memo(_ChipMultiSelect);
-function _GroupedChipMultiSelect({
-  value,
-  onValueChange,
-  placeholder = "Type to search",
-  loading,
-  inputValue,
-  onInputChange,
-  noneSelectedLabel = "None",
-  ...selectProps
+const Co = T.memo(lo);
+function no({
+  value: o,
+  onValueChange: r,
+  placeholder: e = "Type to search",
+  loading: t,
+  inputValue: n,
+  onInputChange: i,
+  noneSelectedLabel: c = "None",
+  ...v
 }) {
-  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
+  return /* @__PURE__ */ a(A, {
+    noneSelectedLabel: c,
+    onValueChange: r,
+    value: o,
+    children: /* @__PURE__ */ a(ro, {
+      ...v,
+      isClearable: !1,
+      value: o,
+      onChange: r ? (u) => r([...u]) : void 0,
+      backspaceRemovesValue: !1,
+      hideSelectedOptions: !0,
+      controlShouldRenderValue: !1,
+      placeholder: e,
+      isLoading: t,
+      inputValue: n,
+      onInputChange: i
     })
   });
 }
-const GroupedChipMultiSelect = React.memo(_GroupedChipMultiSelect);
-export { AsyncMultiSelect, AsyncSelect, ChipMultiSelect, GroupedChipMultiSelect, GroupedMultiSelect, MultiSelect, Select, createStylesFromTheme, createStylesFromVariant, defaultSelectTheme };
+const po = T.memo(no);
+export {
+  ho as AsyncMultiSelect,
+  mo as AsyncSelect,
+  Co as ChipMultiSelect,
+  po as GroupedChipMultiSelect,
+  ro as GroupedMultiSelect,
+  W as MultiSelect,
+  bo as Select,
+  U as createStylesFromTheme,
+  x as createStylesFromVariant,
+  H as defaultSelectTheme
+};
 //# sourceMappingURL=index.es.js.map