@stenajs-webui/select 20.0.3 → 20.2.0

package/dist/index.es.js

@@ -1,28 +1,28 @@
-import { jsx as i, jsxs as h } from "react/jsx-runtime";
-import * as R from "react";
-import { useMemo as p, memo as _, createElement as j } from "react";
-import H, { mergeStyles as w, components as b } from "react-select";
-import V from "react-select/async";
-import { cssColor as f } from "@stenajs-webui/theme";
-import { CloseButton as y, Icon as N, stenaCheck as U, Chip as T, FlatButton as q } from "@stenajs-webui/elements";
-import { Row as S, Space as O, Text as E, Column as X, Spacing as I } from "@stenajs-webui/core";
-import { uniqWith as Y, isEqual as k, intersectionWith as L, differenceWith as J } from "lodash";
-import K from "react-select/creatable";
+import { jsx as i, jsxs as C } from "react/jsx-runtime";
+import * as F from "react";
+import { useMemo as p, memo as P, createElement as j } from "react";
+import R, { mergeStyles as w, components as b } from "react-select";
+import H from "react-select/async";
+import { cssColor as u } from "@stenajs-webui/theme";
+import { TextInputButton as N, stenaTimes as U, Chip as O, CloseButton as V, Icon as q, stenaCheck as D, FlatButton as E } from "@stenajs-webui/elements";
+import { Row as k, Space as y, Text as X, Column as Y, Spacing as I } from "@stenajs-webui/core";
+import { uniqWith as J, isEqual as S, intersectionWith as L, differenceWith as K } from "lodash";
+import Q from "react-select/creatable";
 const W = {
   arrowColor: {
-    disabled: f("--silver-light"),
+    disabled: u("--silver-light"),
     focused: {
-      hover: f("--lhds-color-blue-600"),
-      standard: f("--lhds-color-blue-600")
+      hover: u("--lhds-color-blue-600"),
+      standard: u("--lhds-color-blue-600")
     },
     closed: {
-      hover: f("--lhds-color-blue-600"),
-      standard: f("--lhds-color-blue-600")
+      hover: u("--lhds-color-blue-600"),
+      standard: u("--lhds-color-blue-600")
     }
   },
   clearButtonColor: {
-    hover: f("--lhds-color-red-600"),
-    standard: f("--lhds-color-red-500")
+    hover: u("--lhds-color-red-600"),
+    standard: u("--lhds-color-red-500")
   },
   input: {
     backgroundColor: "var(--swui-field-bg-enabled)",
@@ -40,7 +40,7 @@ const W = {
     boxShadowFocused: "none",
     fontFamily: "var(--swui-font-primary)",
     fontSize: "var(--swui-font-size-inputs)",
-    minHeight: "30px",
+    minHeight: "24px",
     placeholderColor: "var(--swui-field-text-color)",
     textColor: "var(--swui-field-text-color)",
     borderRadius: "var(--swui-field-border-radius)"
@@ -49,29 +49,29 @@ const W = {
     textColor: "var(--swui-field-text-color)"
   },
   groupHeading: {
-    fontSize: "var(--swui-font-size-smaller)",
+    fontSize: "var(--swui-font-size-small)",
     lineHeight: "var(--swui-line-height-smaller)",
     fontWeight: "var(--swui-font-weight-text-bold)",
-    color: f("--lhds-color-ui-600"),
+    color: u("--lhds-color-ui-600"),
     letterSpacing: "0.1rem"
   },
   menu: {
-    activeBackgroundColor: f("--lhds-color-blue-100"),
+    activeBackgroundColor: u("--lhds-color-blue-100"),
     activeTextColor: "var(--swui-field-text-color)",
-    selectedItemActiveBackgroundColor: f("--lhds-color-blue-500"),
-    selectedItemActiveTextColor: f("--lhds-color-blue-50"),
+    selectedItemActiveBackgroundColor: u("--lhds-color-blue-500"),
+    selectedItemActiveTextColor: u("--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: f("--lhds-color-blue-200"),
-    selectedItemTextColor: f("--lhds-color-blue-500"),
-    selectedItemIconColor: f("--lhds-color-blue-500"),
+    hoverBackgroundColor: u("--lhds-color-blue-200"),
+    selectedItemTextColor: u("--lhds-color-blue-500"),
+    selectedItemIconColor: u("--lhds-color-blue-500"),
     selectedItemHoverTextColor: "var(--swui-field-text-color)",
     selectedItemHoverIconColor: "var(--swui-field-text-color)",
-    selectedItemBackgroundColor: f("--lhds-color-blue-50"),
-    selectedItemHoverBackgroundColor: f("--lhds-color-blue-50"),
+    selectedItemBackgroundColor: u("--lhds-color-blue-50"),
+    selectedItemHoverBackgroundColor: u("--lhds-color-blue-50"),
     zIndex: 1,
     width: "auto",
     minWidth: "100%",
@@ -82,13 +82,13 @@ const W = {
   },
   multiSelect: {
     backgroundColor: "var(--swui-primary-action-color)",
-    textColor: f("--lhds-color-blue-50"),
+    textColor: u("--lhds-color-blue-50"),
     removeButtonBackgroundColor: "transparent",
     removeButtonTextColor: "var(--swui-white)",
     removeButtonHoverBackgroundColor: "var(--swui-primary-action-color-hover)",
     removeButtonHoverTextColor: "var(--swui-white)"
   }
-}, Q = (e, r, o, t) => r ? e.disabledBackgroundColor : o && t ? e.selectedItemHoverBackgroundColor : o ? e.selectedItemBackgroundColor : t ? e.hoverBackgroundColor : void 0, Z = (e, r, o, t) => r ? e.disabledTextColor : o && t ? e.selectedItemHoverTextColor : o ? e.selectedItemTextColor : t ? e.hoverTextColor : void 0, $ = (e, r, o, t) => r ? e.disabledBackgroundColor : o ? e.backgroundColor : t === "warning" ? e.warningBackgroundColor : t === "success" ? e.successBackgroundColor : t === "error" ? e.errorBackgroundColor : e.backgroundColor, M = (e, r, o, t, n) => r ? e.disabledBorderColor : o ? e.borderColorFocused : n === "warning" ? e.warningBorderColor : n === "success" ? e.successBorderColor : n === "error" ? e.errorBorderColor : t ? e.borderColorFocused : e.borderColor, D = ({
+}, Z = (e, r, o, t) => r ? e.disabledBackgroundColor : o && t ? e.selectedItemHoverBackgroundColor : o ? e.selectedItemBackgroundColor : t ? e.hoverBackgroundColor : void 0, $ = (e, r, o, t) => r ? e.disabledTextColor : o && t ? e.selectedItemHoverTextColor : o ? e.selectedItemTextColor : t ? e.hoverTextColor : void 0, ee = (e, r, o, t) => r ? e.disabledBackgroundColor : o ? e.backgroundColor : t === "warning" ? e.warningBackgroundColor : t === "success" ? e.successBackgroundColor : t === "error" ? e.errorBackgroundColor : e.backgroundColor, M = (e, r, o, t, n) => r ? e.disabledBorderColor : o ? e.borderColorFocused : n === "warning" ? e.warningBorderColor : n === "success" ? e.successBorderColor : n === "error" ? e.errorBorderColor : t ? e.borderColorFocused : e.borderColor, oe = ({
   menu: e,
   menuPortal: r,
   input: o,
@@ -96,58 +96,58 @@ const W = {
   clearButtonColor: n,
   arrowColor: a,
   groupHeading: c,
-  loadingIndicator: s
-}, m) => ({
-  option: (l, { isDisabled: d, isFocused: u, isSelected: C }) => ({
+  loadingIndicator: m
+}, f) => ({
+  option: (l, { isDisabled: s, isFocused: d, isSelected: h }) => ({
     ...l,
     fontFamily: o.fontFamily,
     fontSize: o.fontSize,
-    backgroundColor: Q(
+    backgroundColor: Z(
       e,
-      d,
-      C,
-      u
+      s,
+      h,
+      d
     ),
-    color: Z(e, d, C, u),
-    cursor: d ? "not-allowed" : "default",
+    color: $(e, s, h, d),
+    cursor: s ? "not-allowed" : "default",
     whiteSpace: e.whiteSpace || l.whiteSpace,
     ":active": {
-      backgroundColor: d ? void 0 : C ? e.selectedItemActiveBackgroundColor : e.activeBackgroundColor,
-      color: d ? void 0 : C ? e.selectedItemActiveTextColor : e.activeTextColor
+      backgroundColor: s ? void 0 : h ? e.selectedItemActiveBackgroundColor : e.activeBackgroundColor,
+      color: s ? void 0 : h ? e.selectedItemActiveTextColor : e.activeTextColor
     }
   }),
-  control: (l, { isFocused: d, isDisabled: u, menuIsOpen: C }) => ({
+  control: (l, { isFocused: s, isDisabled: d, menuIsOpen: h }) => ({
     ...l,
     // none of react-selects styles are passed to <View />
     fontFamily: o.fontFamily,
     fontSize: o.fontSize,
-    minHeight: o.minHeight,
-    backgroundColor: $(
+    minHeight: "var(--swui-field-height)",
+    backgroundColor: ee(
       o,
-      u,
       d,
-      m
+      s,
+      f
     ),
     borderRadius: o.borderRadius,
     border: o.border,
     "--swui-select-border-color": M(
       o,
-      u,
-      d || C,
+      d,
+      s || h,
       !1,
-      m
+      f
     ),
-    outline: d ? "var(--swui-focus-outline)" : void 0,
-    outlineOffset: d ? "-1px" : void 0,
+    outline: s ? "var(--swui-focus-outline)" : void 0,
+    outlineOffset: s ? "-1px" : void 0,
     transition: "none",
-    boxShadow: d ? o.boxShadowFocused : void 0,
+    boxShadow: s ? o.boxShadowFocused : void 0,
     "&:hover": {
       "--swui-select-border-color": M(
         o,
         !1,
-        d || C,
+        s || h,
         !0,
-        m
+        f
       )
     }
   }),
@@ -164,6 +164,8 @@ const W = {
   }),
   input: (l) => ({
     ...l,
+    padding: 0,
+    margin: 0,
     minHeight: o.minHeight,
     fontFamily: o.fontFamily,
     fontSize: o.fontSize,
@@ -209,14 +211,15 @@ const W = {
   }),
   valueContainer: (l) => ({
     ...l,
-    padding: "0 8px"
+    padding: "var(--swui-metrics-space-half)",
+    gap: "var(--swui-metrics-space-half)"
   }),
-  dropdownIndicator: (l, { isFocused: d, isDisabled: u }) => ({
+  dropdownIndicator: (l, { isFocused: s, isDisabled: d }) => ({
     ...l,
     padding: "5px",
-    color: u ? a.disabled : d ? a.focused.standard : a.closed.standard,
+    color: d ? a.disabled : s ? a.focused.standard : a.closed.standard,
     "&:hover": {
-      color: u ? a.disabled : d ? a.focused.hover : a.closed.hover
+      color: d ? a.disabled : s ? a.focused.hover : a.closed.hover
     },
     svg: {
       width: 14,
@@ -264,16 +267,17 @@ const W = {
     fontSize: c.fontSize,
     alignItems: "center",
     margin: 0,
-    marginRight: 2
+    borderRadius: "var(--swui-border-radius-small)",
+    overflow: "hidden"
   }),
   loadingMessage: (l) => ({
     ...l,
-    color: s.textColor,
+    color: m.textColor,
     fontFamily: o.fontFamily,
     fontSize: o.fontSize
   })
-}), x = (e) => D(W, e);
-function Se({
+}), x = (e) => oe(W, e);
+function ye({
   variant: e = "standard",
   styles: r,
   isMulti: o,
@@ -283,9 +287,9 @@ function Se({
     const a = x(e);
     return r ? w(a, r) : a;
   }, [e, r]);
-  return /* @__PURE__ */ i(V, { styles: n, ...t, isMulti: !0 });
+  return /* @__PURE__ */ i(H, { styles: n, ...t, isMulti: !0 });
 }
-function ke({
+function Be({
   variant: e = "standard",
   styles: r,
   isMulti: o,
@@ -295,8 +299,44 @@ function ke({
     const a = x(e);
     return r ? w(a, r) : a;
   }, [e, r]);
-  return /* @__PURE__ */ i(V, { styles: n, ...t, isMulti: !1 });
+  return /* @__PURE__ */ i(H, { styles: n, ...t, isMulti: !1 });
 }
+const re = function({
+  clearValue: e
+}) {
+  return (
+    // stopPropagation is needed to prevent react-select from opening its menu when clicking on the button.
+    /* @__PURE__ */ i("div", { onMouseDown: (r) => r.stopPropagation(), children: /* @__PURE__ */ i(
+      N,
+      {
+        "aria-label": "Clear",
+        onClick: e,
+        icon: U,
+        variant: "error"
+      }
+    ) })
+  );
+}, te = function({
+  removeProps: e,
+  data: r
+}) {
+  return (
+    // stopPropagation is needed to prevent react-select from opening its menu when clicking on the button.
+    /* @__PURE__ */ i("div", { onMouseDown: (o) => o.stopPropagation(), children: /* @__PURE__ */ i(
+      O,
+      {
+        onClickRemove: (o) => {
+          var t;
+          return (t = e.onClick) == null ? void 0 : t.call(
+            e,
+            o
+          );
+        },
+        label: r.label
+      }
+    ) })
+  );
+};
 function B({
   variant: e = "standard",
   styles: r,
@@ -305,20 +345,20 @@ function B({
   ...n
 }) {
   const a = p(() => {
-    const s = x(e);
-    return r ? w(s, r) : s;
+    const c = x(e);
+    return r ? w(c, r) : c;
   }, [e, r]);
   return /* @__PURE__ */ i(
-    H,
+    R,
     {
       styles: a,
-      components: { ...t, ClearIndicator: (s) => /* @__PURE__ */ i(y, { "aria-label": "Clear", onClick: s.clearValue }) },
+      components: { ...t, ClearIndicator: re, MultiValue: te },
       ...n,
       isMulti: !0
     }
   );
 }
-function Ie(e) {
+function ze(e) {
   return /* @__PURE__ */ i(
     B,
     {
@@ -326,20 +366,20 @@ function Ie(e) {
       ...e,
       components: {
         ...e.components,
-        ValueContainer: ee
+        ValueContainer: le
       }
     }
   );
 }
-const ee = _(
+const le = P(
   (e) => {
-    const [r, ...o] = e.children, t = oe(r, e);
-    return /* @__PURE__ */ h(b.ValueContainer, { ...e, children: [
+    const [r, ...o] = e.children, t = ne(r, e);
+    return /* @__PURE__ */ C(b.ValueContainer, { ...e, children: [
       t,
       o
     ] });
   }
-), oe = (e, {
+), ne = (e, {
   children: r,
   innerProps: o,
   className: t,
@@ -365,7 +405,7 @@ const ee = _(
     "+" + (e.length - 1)
   )
 ] : e : null;
-function Oe({
+function Me({
   variant: e = "standard",
   styles: r,
   isMulti: o,
@@ -373,29 +413,29 @@ function Oe({
   ...n
 }) {
   const a = p(() => {
-    const s = x(e);
-    return r ? w(s, r) : s;
+    const m = x(e);
+    return r ? w(m, r) : m;
   }, [e, r]);
   return /* @__PURE__ */ i(
-    H,
+    R,
     {
       styles: a,
-      components: { ...t, ClearIndicator: (s) => /* @__PURE__ */ i(y, { "aria-label": "Clear", onClick: s.clearValue }) },
+      components: { ...t, ClearIndicator: (m) => /* @__PURE__ */ i(V, { "aria-label": "Clear", onClick: m.clearValue }) },
       ...n,
       isMulti: !1
     }
   );
 }
-const F = (e, r) => J(
+const T = (e, r) => K(
   r,
   [...e.internalOptions, e],
-  k
-).map(g), re = (e) => !("internalOptions" in e), v = (e) => e.filter(re).map(g), te = (e) => (r, o) => {
+  S
+).map(g), ie = (e) => !("internalOptions" in e), v = (e) => e.filter(ie).map(g), ae = (e) => (r, o) => {
   const t = r ?? [];
   switch (o.action) {
     case "select-option":
       if (o.option && "internalOptions" in o.option) {
-        const n = Y(
+        const n = J(
           t.reduce(
             (a, c) => "internalOptions" in c ? [...a, ...c.internalOptions] : [
               ...a,
@@ -403,7 +443,7 @@ const F = (e, r) => J(
             ],
             []
           ),
-          k
+          S
         );
         e(n, o);
       } else
@@ -411,7 +451,7 @@ const F = (e, r) => J(
       break;
     case "deselect-option":
       o.option && "internalOptions" in o.option ? e(
-        F(
+        T(
           o.option,
           v(t)
         ),
@@ -421,7 +461,7 @@ const F = (e, r) => J(
     case "remove-value":
     case "pop-value":
       o.removedValue && "internalOptions" in o.removedValue ? e(
-        F(
+        T(
           o.removedValue,
           v(t)
         ),
@@ -441,27 +481,27 @@ const F = (e, r) => J(
       );
       break;
   }
-}, le = (e) => e.reduce(
+}, ce = (e) => e.reduce(
   (r, o) => [
     ...r,
     A(o),
     ...o.options.map(G)
   ],
   []
-), ne = (e, r) => {
+), se = (e, r) => {
   if (!r)
     return [];
   const o = [];
   return e.forEach((t) => {
-    ie(t.options, r) && o.push(
+    de(t.options, r) && o.push(
       A(t)
     ), o.push(
-      ...L(t.options, r, k).map(
+      ...L(t.options, r, S).map(
         (n) => G(n)
       )
     );
   }), o;
-}, ie = (e, r) => r ? L(e, r, k).length === e.length : !1, G = (e) => ({
+}, de = (e, r) => r ? L(e, r, S).length === e.length : !1, G = (e) => ({
   data: e.data,
   label: e.label,
   value: e.value
@@ -474,8 +514,8 @@ const F = (e, r) => J(
   data: e.data,
   label: e.label,
   value: e.value
-}), ae = (e, r) => r ? e.menu.selectedItemHoverIconColor : e.menu.selectedItemIconColor;
-function ce(e) {
+}), ue = (e, r) => r ? e.menu.selectedItemHoverIconColor : e.menu.selectedItemIconColor;
+function fe(e) {
   const { formatGroupLabel: r, formatOptionLabel: o } = e.selectProps;
   return "internalOptions" in e.data ? r ? r({
     label: e.data.label,
@@ -486,7 +526,7 @@ function ce(e) {
     selectValue: e.getValue()
   }) : e.label;
 }
-function se({
+function me({
   onChange: e,
   options: r,
   value: o,
@@ -495,58 +535,58 @@ function se({
   formatOptionLabel: a,
   ...c
 }) {
-  const s = (u) => {
-    const C = ce(u), z = "internalOptions" in u.data;
-    return /* @__PURE__ */ i(b.Option, { ...u, children: /* @__PURE__ */ h(S, { children: [
-      !z && /* @__PURE__ */ i(O, {}),
+  const m = (d) => {
+    const h = fe(d), z = "internalOptions" in d.data;
+    return /* @__PURE__ */ i(b.Option, { ...d, children: /* @__PURE__ */ C(k, { children: [
+      !z && /* @__PURE__ */ i(y, {}),
       /* @__PURE__ */ i(
-        de,
+        he,
         {
           theme: W,
           size: z ? void 0 : "small",
-          label: C,
-          selected: u.isSelected,
-          focused: u.isFocused
+          label: h,
+          selected: d.isSelected,
+          focused: d.isFocused
         }
       )
     ] }) });
-  }, m = (u) => "internalOptions" in u.data ? null : /* @__PURE__ */ i(b.MultiValue, { ...u }), l = r ? ne(r, o) : void 0, d = r ? le(r) : void 0;
+  }, f = (d) => "internalOptions" in d.data ? null : /* @__PURE__ */ i(b.MultiValue, { ...d }), l = r ? se(r, o) : void 0, s = r ? ce(r) : void 0;
   return /* @__PURE__ */ i(
     B,
     {
       ...c,
-      onChange: e ? te(e) : void 0,
+      onChange: e ? ae(e) : void 0,
       hideSelectedOptions: !1,
       components: {
         ...c.components,
-        MultiValue: m,
-        Option: s
+        MultiValue: f,
+        Option: m
       },
       isMulti: !0,
-      options: d,
+      options: s,
       value: l,
       variant: t
     }
   );
 }
-const de = ({
+const he = ({
   focused: e,
   label: r,
   selected: o,
   size: t,
   theme: n
-}) => /* @__PURE__ */ h(S, { alignItems: "center", justifyContent: "space-between", flexGrow: 1, children: [
-  /* @__PURE__ */ i(E, { tabIndex: -1, size: t, color: "currentColor", children: r }),
+}) => /* @__PURE__ */ C(k, { alignItems: "center", justifyContent: "space-between", flexGrow: 1, children: [
+  /* @__PURE__ */ i(X, { tabIndex: -1, size: t, color: "currentColor", children: r }),
   o && /* @__PURE__ */ i(
-    N,
+    q,
     {
-      color: ae(n, e),
-      icon: U,
+      color: ue(n, e),
+      icon: D,
       size: 12
     }
   )
 ] });
-function ye({
+function Te({
   variant: e = "standard",
   styles: r,
   isMulti: o,
@@ -555,30 +595,30 @@ function ye({
   ...a
 }) {
   const c = p(() => {
-    const m = x(e);
-    return r ? w(m, r) : m;
+    const f = x(e);
+    return r ? w(f, r) : f;
   }, [e, r]);
   return /* @__PURE__ */ i(
-    K,
+    Q,
     {
       styles: c,
-      components: { ...t, ClearIndicator: (m) => /* @__PURE__ */ i(y, { "aria-label": n, onClick: m.clearValue }) },
+      components: { ...t, ClearIndicator: (f) => /* @__PURE__ */ i(V, { "aria-label": n, onClick: f.clearValue }) },
       ...a,
       isMulti: !1
     }
   );
 }
-function P({
+function _({
   value: e,
   onValueChange: r,
   noneSelectedLabel: o = "None",
   children: t
 }) {
-  return /* @__PURE__ */ h(X, { flex: 1, children: [
-    /* @__PURE__ */ h(S, { flexWrap: "wrap", children: [
-      e == null ? void 0 : e.map((n) => /* @__PURE__ */ h(S, { children: [
+  return /* @__PURE__ */ C(Y, { flex: 1, children: [
+    /* @__PURE__ */ C(k, { flexWrap: "wrap", children: [
+      e == null ? void 0 : e.map((n) => /* @__PURE__ */ C(k, { children: [
         /* @__PURE__ */ i(I, { num: 0.5, children: /* @__PURE__ */ i(
-          T,
+          O,
           {
             label: n.label,
             onClickRemove: () => r == null ? void 0 : r(
@@ -586,22 +626,22 @@ function P({
             )
           }
         ) }),
-        /* @__PURE__ */ i(O, {})
+        /* @__PURE__ */ i(y, {})
       ] }, n.value)),
       e != null && e.length ? /* @__PURE__ */ i(I, { num: 0.5, children: /* @__PURE__ */ i(
-        q,
+        E,
         {
           size: "small",
           label: "Clear",
           onClick: () => r == null ? void 0 : r([])
         }
-      ) }) : /* @__PURE__ */ i(I, { num: 0.5, children: /* @__PURE__ */ i(T, { variant: "secondary", label: o }) })
+      ) }) : /* @__PURE__ */ i(I, { num: 0.5, children: /* @__PURE__ */ i(O, { variant: "secondary", label: o }) })
     ] }),
-    /* @__PURE__ */ i(O, { num: 0.5 }),
+    /* @__PURE__ */ i(y, { num: 0.5 }),
     t
   ] });
 }
-function ue({
+function Ce({
   value: e,
   onValueChange: r,
   placeholder: o = "Type to search",
@@ -609,10 +649,10 @@ function ue({
   inputValue: n,
   onInputChange: a,
   noneSelectedLabel: c = "None",
-  ...s
+  ...m
 }) {
   return /* @__PURE__ */ i(
-    P,
+    _,
     {
       noneSelectedLabel: c,
       onValueChange: r,
@@ -620,10 +660,10 @@ function ue({
       children: /* @__PURE__ */ i(
         B,
         {
-          ...s,
+          ...m,
           isClearable: !1,
           value: e,
-          onChange: r ? (m) => r([...m]) : void 0,
+          onChange: r ? (f) => r([...f]) : void 0,
           backspaceRemovesValue: !1,
           hideSelectedOptions: !0,
           controlShouldRenderValue: !1,
@@ -636,10 +676,10 @@ function ue({
     }
   );
 }
-const Be = R.memo(
-  ue
+const Fe = F.memo(
+  Ce
 );
-function fe({
+function be({
   value: e,
   onValueChange: r,
   placeholder: o = "Type to search",
@@ -647,21 +687,21 @@ function fe({
   inputValue: n,
   onInputChange: a,
   noneSelectedLabel: c = "None",
-  ...s
+  ...m
 }) {
   return /* @__PURE__ */ i(
-    P,
+    _,
     {
       noneSelectedLabel: c,
       onValueChange: r,
       value: e,
       children: /* @__PURE__ */ i(
-        se,
+        me,
         {
-          ...s,
+          ...m,
           isClearable: !1,
           value: e,
-          onChange: r ? (m) => r([...m]) : void 0,
+          onChange: r ? (f) => r([...f]) : void 0,
           backspaceRemovesValue: !1,
           hideSelectedOptions: !0,
           controlShouldRenderValue: !1,
@@ -674,20 +714,20 @@ function fe({
     }
   );
 }
-const ze = R.memo(
-  fe
+const Re = F.memo(
+  be
 );
 export {
-  Se as AsyncMultiSelect,
-  ke as AsyncSelect,
-  Be as ChipMultiSelect,
-  ye as CreatableSelect,
-  ze as GroupedChipMultiSelect,
-  se as GroupedMultiSelect,
+  ye as AsyncMultiSelect,
+  Be as AsyncSelect,
+  Fe as ChipMultiSelect,
+  Te as CreatableSelect,
+  Re as GroupedChipMultiSelect,
+  me as GroupedMultiSelect,
   B as MultiSelect,
-  Ie as OverflowingMultiSelect,
-  Oe as Select,
-  D as createStylesFromTheme,
+  ze as OverflowingMultiSelect,
+  Me as Select,
+  oe as createStylesFromTheme,
   x as createStylesFromVariant,
   W as defaultSelectTheme
 };