@stenajs-webui/select 19.0.0-next.9 → 19.0.1

package/dist/index.es.js

@@ -1,26 +1,29 @@
 (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 F from "react";
-import { useMemo as p, memo as A, createElement as P } from "react";
-import M, { mergeStyles as w, components as h } from "react-select";
-import R from "react-select/async";
-import { jsx as a, jsxs as m } from "react/jsx-runtime";
-import { Row as g, Space as y, Text as _, Column as j, Spacing as S } from "@stenajs-webui/core";
-import { Icon as N, stenaCheck as U, Chip as I, FlatButton as q } from "@stenajs-webui/elements";
-import { uniqWith as E, isEqual as x, intersectionWith as H, differenceWith as X } from "lodash";
-const L = {
+import { jsx as a, 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 B, Icon as N, stenaCheck as U, Chip as T, FlatButton as q } from "@stenajs-webui/elements";
+import { Row as k, Space as y, Text as E, Column as X, Spacing as I } from "@stenajs-webui/core";
+import { uniqWith as Y, isEqual as S, intersectionWith as L, differenceWith as J } from "lodash";
+import K from "react-select/creatable";
+const W = {
   arrowColor: {
+    disabled: f("--silver-light"),
     focused: {
-      hover: "var(--lhds-color-ui-500)",
-      standard: "var(--lhds-color-ui-500)"
+      hover: f("--lhds-color-blue-600"),
+      standard: f("--lhds-color-blue-600")
     },
     closed: {
-      hover: "var(--lhds-color-ui-500)",
-      standard: "var(--lhds-color-ui-500)"
+      hover: f("--lhds-color-blue-600"),
+      standard: f("--lhds-color-blue-600")
     }
   },
   clearButtonColor: {
-    hover: "var(--lhds-color-ui-600)",
-    standard: "var(--lhds-color-ui-500)"
+    hover: f("--lhds-color-red-600"),
+    standard: f("--lhds-color-red-500")
   },
   input: {
     backgroundColor: "var(--swui-field-bg-enabled)",
@@ -30,16 +33,15 @@ const L = {
     disabledBackgroundColor: "var(--swui-field-bg-disabled)",
     disabledBorderColor: "var(--swui-field-bg-disabled)",
     warningBackgroundColor: "var(--swui-state-alert-light-color)",
+    warningBorderColor: "var(--swui-state-alert-light-color)",
     errorBackgroundColor: "var(--swui-state-error-light-color)",
+    errorBorderColor: "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)",
+    successBorderColor: "var(--swui-state-success-light-color)",
+    boxShadowFocused: "none",
     fontFamily: "var(--swui-font-primary)",
     fontSize: "var(--swui-font-size-inputs)",
-    height: "32px",
-    minHeight: "32px",
+    minHeight: "30px",
     placeholderColor: "var(--swui-field-text-color)",
     textColor: "var(--swui-field-text-color)",
     borderRadius: "var(--swui-field-border-radius)"
@@ -51,26 +53,26 @@ const L = {
     fontSize: "var(--swui-font-size-smaller)",
     lineHeight: "var(--swui-line-height-smaller)",
     fontWeight: "var(--swui-font-weight-text-bold)",
-    color: "var(--lhds-color-ui-600)",
+    color: f("--lhds-color-ui-600"),
     letterSpacing: "0.1rem"
   },
   menu: {
-    activeBackgroundColor: "var(--lhds-color-blue-100)",
+    activeBackgroundColor: f("--lhds-color-blue-100"),
     activeTextColor: "var(--swui-field-text-color)",
-    selectedItemActiveBackgroundColor: "var(--lhds-color-blue-500)",
-    selectedItemActiveTextColor: "var(--lhds-color-blue-50)",
+    selectedItemActiveBackgroundColor: f("--lhds-color-blue-500"),
+    selectedItemActiveTextColor: f("--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)",
+    hoverBackgroundColor: f("--lhds-color-blue-200"),
+    selectedItemTextColor: f("--lhds-color-blue-500"),
+    selectedItemIconColor: f("--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)",
+    selectedItemBackgroundColor: f("--lhds-color-blue-50"),
+    selectedItemHoverBackgroundColor: f("--lhds-color-blue-50"),
     zIndex: 1,
     width: "auto",
     minWidth: "100%",
@@ -81,13 +83,13 @@ const L = {
   },
   multiSelect: {
     backgroundColor: "var(--swui-primary-action-color)",
-    textColor: "var(--lhds-color-blue-50)",
+    textColor: f("--lhds-color-blue-50"),
     removeButtonBackgroundColor: "transparent",
     removeButtonTextColor: "var(--swui-white)",
     removeButtonHoverBackgroundColor: "var(--swui-primary-action-color-hover)",
     removeButtonHoverTextColor: "var(--swui-white)"
   }
-}, Y = (e, r, o, t) => r ? e.disabledBackgroundColor : o && t ? e.selectedItemHoverBackgroundColor : o ? e.selectedItemBackgroundColor : t ? e.hoverBackgroundColor : void 0, D = (e, r, o, t) => r ? e.disabledTextColor : o && t ? e.selectedItemHoverTextColor : o ? e.selectedItemTextColor : t ? e.hoverTextColor : void 0, J = (e, r, o, t) => r ? e.disabledBackgroundColor : o ? e.backgroundColor : t === "warning" ? e.warningBackgroundColor : t === "success" ? e.successBackgroundColor : t === "error" ? e.errorBackgroundColor : e.backgroundColor, z = (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, K = ({
+}, 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 = ({
   menu: e,
   menuPortal: r,
   input: o,
@@ -95,54 +97,57 @@ const L = {
   clearButtonColor: n,
   arrowColor: i,
   groupHeading: c,
-  loadingIndicator: v
-}, u) => ({
-  option: (l, { isDisabled: s, isFocused: d, isSelected: f }) => ({
+  loadingIndicator: s
+}, m) => ({
+  option: (l, { isDisabled: d, isFocused: u, isSelected: C }) => ({
     ...l,
     fontFamily: o.fontFamily,
     fontSize: o.fontSize,
-    backgroundColor: Y(
+    backgroundColor: Q(
       e,
-      s,
-      f,
-      d
+      d,
+      C,
+      u
     ),
-    color: D(e, s, f, d),
-    cursor: s ? "not-allowed" : "default",
+    color: Z(e, d, C, u),
+    cursor: d ? "not-allowed" : "default",
     whiteSpace: e.whiteSpace || l.whiteSpace,
     ":active": {
-      backgroundColor: s ? void 0 : f ? e.selectedItemActiveBackgroundColor : e.activeBackgroundColor,
-      color: s ? void 0 : f ? e.selectedItemActiveTextColor : e.activeTextColor
+      backgroundColor: d ? void 0 : C ? e.selectedItemActiveBackgroundColor : e.activeBackgroundColor,
+      color: d ? void 0 : C ? e.selectedItemActiveTextColor : e.activeTextColor
     }
   }),
-  control: (l, { isFocused: s, isDisabled: d, menuIsOpen: f }) => ({
+  control: (l, { isFocused: d, isDisabled: u, menuIsOpen: C }) => ({
     ...l,
     fontFamily: o.fontFamily,
     fontSize: o.fontSize,
     minHeight: o.minHeight,
-    backgroundColor: J(
+    backgroundColor: $(
       o,
+      u,
       d,
-      s,
-      u
+      m
     ),
     borderRadius: o.borderRadius,
     border: o.border,
-    "--swui-select-border-color": z(
+    "--swui-select-border-color": M(
       o,
-      d,
-      s || f,
+      u,
+      d || C,
       !1,
-      u
+      m
     ),
-    boxShadow: s ? o.boxShadowFocused : void 0,
+    outline: d ? "var(--swui-focus-outline)" : void 0,
+    outlineOffset: d ? "-1px" : void 0,
+    transition: "none",
+    boxShadow: d ? o.boxShadowFocused : void 0,
     "&:hover": {
-      "--swui-select-border-color": z(
+      "--swui-select-border-color": M(
         o,
         !1,
-        s || f,
+        d || C,
         !0,
-        u
+        m
       )
     }
   }),
@@ -159,6 +164,7 @@ const L = {
   }),
   input: (l) => ({
     ...l,
+    minHeight: o.minHeight,
     fontFamily: o.fontFamily,
     fontSize: o.fontSize,
     color: o.textColor
@@ -205,12 +211,12 @@ const L = {
     ...l,
     padding: "0 8px"
   }),
-  dropdownIndicator: (l, { isFocused: s }) => ({
+  dropdownIndicator: (l, { isFocused: d, isDisabled: u }) => ({
     ...l,
     padding: "5px",
-    color: s ? i.focused.standard : i.closed.standard,
+    color: u ? i.disabled : d ? i.focused.standard : i.closed.standard,
     "&:hover": {
-      color: s ? i.focused.hover : i.closed.hover
+      color: u ? i.disabled : d ? i.focused.hover : i.closed.hover
     },
     svg: {
       width: 14,
@@ -262,211 +268,216 @@ const L = {
   }),
   loadingMessage: (l) => ({
     ...l,
-    color: v.textColor,
+    color: s.textColor,
     fontFamily: o.fontFamily,
     fontSize: o.fontSize
   })
-}), k = (e) => K(L, e);
-function Ce({
+}), x = (e) => D(W, e);
+function ke({
   variant: e = "standard",
   styles: r,
   isMulti: o,
   ...t
 }) {
   const n = p(() => {
-    const i = k(e);
+    const i = x(e);
     return r ? w(i, r) : i;
   }, [e, r]);
-  return /* @__PURE__ */ a(R, {
-    styles: n,
-    ...t,
-    isMulti: !0
-  });
+  return /* @__PURE__ */ a(V, { styles: n, ...t, isMulti: !0 });
 }
-function ge({
+function Se({
   variant: e = "standard",
   styles: r,
   isMulti: o,
   ...t
 }) {
   const n = p(() => {
-    const i = k(e);
+    const i = x(e);
     return r ? w(i, r) : i;
   }, [e, r]);
-  return /* @__PURE__ */ a(R, {
-    styles: n,
-    ...t,
-    isMulti: !1
-  });
+  return /* @__PURE__ */ a(V, { styles: n, ...t, isMulti: !1 });
 }
-function B({
+function O({
   variant: e = "standard",
   styles: r,
   isMulti: o,
-  ...t
+  components: t,
+  ...n
 }) {
-  const n = p(() => {
-    const i = k(e);
-    return r ? w(i, r) : i;
+  const i = p(() => {
+    const s = x(e);
+    return r ? w(s, r) : s;
   }, [e, r]);
-  return /* @__PURE__ */ a(M, {
-    styles: n,
-    ...t,
-    isMulti: !0
-  });
+  return /* @__PURE__ */ a(
+    H,
+    {
+      styles: i,
+      components: { ...t, ClearIndicator: (s) => /* @__PURE__ */ a(B, { "aria-label": "Clear", onClick: s.clearValue }) },
+      ...n,
+      isMulti: !0
+    }
+  );
 }
-function pe(e) {
-  return /* @__PURE__ */ a(B, {
-    hideSelectedOptions: !1,
-    ...e,
-    components: {
-      ...e.components,
-      ValueContainer: Q
+function Ie(e) {
+  return /* @__PURE__ */ a(
+    O,
+    {
+      hideSelectedOptions: !1,
+      ...e,
+      components: {
+        ...e.components,
+        ValueContainer: ee
+      }
     }
-  });
+  );
 }
-const Q = A((e) => {
-  const [r, ...o] = e.children, t = Z(r, e);
-  return /* @__PURE__ */ m(h.ValueContainer, {
-    ...e,
-    children: [t, o]
-  });
-}), Z = (e, {
+const ee = _(
+  (e) => {
+    const [r, ...o] = e.children, t = oe(r, e);
+    return /* @__PURE__ */ h(b.ValueContainer, { ...e, children: [
+      t,
+      o
+    ] });
+  }
+), oe = (e, {
   children: r,
   innerProps: o,
   className: t,
   ...n
-}) => e ? e.length > 1 ? [e[0], /* @__PURE__ */ P(h.MultiValue, {
-  ...n,
-  key: "DUMMY_VALUE_FOR_PLUS_X",
-  innerProps: {},
-  data: null,
-  isFocused: !1,
-  removeProps: {},
-  index: 1,
-  components: {
-    Container: h.MultiValueContainer,
-    Label: h.MultiValueLabel,
-    Remove: () => /* @__PURE__ */ a("div", {
-      style: {
-        height: 16,
-        margin: 3,
-        marginTop: 4
+}) => e ? e.length > 1 ? [
+  e[0],
+  /* @__PURE__ */ j(
+    b.MultiValue,
+    {
+      ...n,
+      key: "DUMMY_VALUE_FOR_PLUS_X",
+      innerProps: {},
+      data: null,
+      isFocused: !1,
+      removeProps: {},
+      index: 1,
+      components: {
+        Container: b.MultiValueContainer,
+        Label: b.MultiValueLabel,
+        Remove: () => /* @__PURE__ */ a("div", { style: { height: 16, margin: 3, marginTop: 4 } })
       }
-    })
-  }
-}, "+" + (e.length - 1))] : e : null;
-function we({
+    },
+    "+" + (e.length - 1)
+  )
+] : e : null;
+function ye({
   variant: e = "standard",
   styles: r,
   isMulti: o,
-  ...t
+  components: t,
+  ...n
 }) {
-  const n = p(() => {
-    const i = k(e);
-    return r ? w(i, r) : i;
+  const i = p(() => {
+    const s = x(e);
+    return r ? w(s, r) : s;
   }, [e, r]);
-  return /* @__PURE__ */ a(M, {
-    styles: n,
-    ...t,
-    isMulti: !1
-  });
+  return /* @__PURE__ */ a(
+    H,
+    {
+      styles: i,
+      components: { ...t, ClearIndicator: (s) => /* @__PURE__ */ a(B, { "aria-label": "Clear", onClick: s.clearValue }) },
+      ...n,
+      isMulti: !1
+    }
+  );
 }
-const T = (e, r) => X(
+const F = (e, r) => J(
   r,
   [...e.internalOptions, e],
-  x
-).map(C), $ = (e) => !("internalOptions" in e), b = (e) => e.filter($).map(C), ee = (e) => (r, o) => {
+  S
+).map(g), re = (e) => !("internalOptions" in e), v = (e) => e.filter(re).map(g), te = (e) => (r, o) => {
   const t = r != null ? r : [];
   switch (o.action) {
     case "select-option":
       if (o.option && "internalOptions" in o.option) {
-        const n = E(
+        const n = Y(
           t.reduce(
             (i, c) => "internalOptions" in c ? [...i, ...c.internalOptions] : [
               ...i,
-              C(c)
+              g(c)
             ],
             []
           ),
-          x
+          S
         );
         e(n, o);
       } else
-        e(b(t), o);
+        e(v(t), o);
       break;
     case "deselect-option":
       o.option && "internalOptions" in o.option ? e(
-        T(
+        F(
           o.option,
-          b(t)
+          v(t)
         ),
         o
-      ) : e(b(t), o);
+      ) : e(v(t), o);
       break;
     case "remove-value":
     case "pop-value":
       o.removedValue && "internalOptions" in o.removedValue ? e(
-        T(
+        F(
           o.removedValue,
-          b(t)
+          v(t)
         ),
         o
-      ) : e(b(t), o);
+      ) : e(v(t), o);
       break;
     case "clear":
       e(
-        t.map(C),
+        t.map(g),
         o
       );
       break;
     case "create-option":
       e(
-        t.map(C),
+        t.map(g),
         o
       );
       break;
   }
-}, oe = (e) => e.reduce(
+}, le = (e) => e.reduce(
   (r, o) => [
     ...r,
-    G(o),
-    ...o.options.map(W)
+    A(o),
+    ...o.options.map(G)
   ],
   []
-), re = (e, r) => {
+), ne = (e, r) => {
   if (!r)
     return [];
   const o = [];
   return e.forEach((t) => {
-    te(t.options, r) && o.push(
-      G(t)
+    ie(t.options, r) && o.push(
+      A(t)
     ), o.push(
-      ...H(t.options, r, x).map(
-        (n) => W(n)
+      ...L(t.options, r, S).map(
+        (n) => G(n)
       )
     );
   }), o;
-}, te = (e, r) => r ? H(e, r, x).length === e.length : !1, W = (e) => ({
+}, ie = (e, r) => r ? L(e, r, S).length === e.length : !1, G = (e) => ({
   data: e.data,
   label: e.label,
   value: e.value
-}), G = (e) => ({
+}), A = (e) => ({
   data: e.label,
   label: e.label,
   value: e.label,
   internalOptions: e.options
-}), C = (e) => ({
+}), g = (e) => ({
   data: e.data,
   label: e.label,
   value: e.value
-}), le = (e, r) => r ? e.menu.selectedItemHoverIconColor : e.menu.selectedItemIconColor;
-function ne(e) {
+}), ae = (e, r) => r ? e.menu.selectedItemHoverIconColor : e.menu.selectedItemIconColor;
+function ce(e) {
   var t;
-  const {
-    formatGroupLabel: r,
-    formatOptionLabel: o
-  } = e.selectProps;
+  const { formatGroupLabel: r, formatOptionLabel: o } = e.selectProps;
   return "internalOptions" in e.data ? r ? r({
     label: e.data.label,
     options: e.data.internalOptions
@@ -476,7 +487,7 @@ function ne(e) {
     selectValue: e.getValue()
   }) : e.label;
 }
-function ie({
+function se({
   onChange: e,
   options: r,
   value: o,
@@ -485,100 +496,116 @@ function ie({
   formatOptionLabel: i,
   ...c
 }) {
-  const v = (d) => {
-    const f = ne(d), O = "internalOptions" in d.data;
-    return /* @__PURE__ */ a(h.Option, {
-      ...d,
-      children: /* @__PURE__ */ m(g, {
-        children: [!O && /* @__PURE__ */ a(y, {}), /* @__PURE__ */ a(ae, {
-          theme: L,
-          size: O ? void 0 : "small",
-          label: f,
-          selected: d.isSelected,
-          focused: d.isFocused
-        })]
-      })
-    });
-  }, u = (d) => "internalOptions" in d.data ? null : /* @__PURE__ */ a(h.MultiValue, {
-    ...d
-  }), l = r ? re(r, o) : void 0, s = r ? oe(r) : void 0;
-  return /* @__PURE__ */ a(B, {
-    ...c,
-    onChange: e ? ee(e) : void 0,
-    hideSelectedOptions: !1,
-    components: {
-      ...c.components,
-      MultiValue: u,
-      Option: v
-    },
-    isMulti: !0,
-    options: s,
-    value: l,
-    variant: t
-  });
+  const s = (u) => {
+    const C = ce(u), z = "internalOptions" in u.data;
+    return /* @__PURE__ */ a(b.Option, { ...u, children: /* @__PURE__ */ h(k, { children: [
+      !z && /* @__PURE__ */ a(y, {}),
+      /* @__PURE__ */ a(
+        de,
+        {
+          theme: W,
+          size: z ? void 0 : "small",
+          label: C,
+          selected: u.isSelected,
+          focused: u.isFocused
+        }
+      )
+    ] }) });
+  }, m = (u) => "internalOptions" in u.data ? null : /* @__PURE__ */ a(b.MultiValue, { ...u }), l = r ? ne(r, o) : void 0, d = r ? le(r) : void 0;
+  return /* @__PURE__ */ a(
+    O,
+    {
+      ...c,
+      onChange: e ? te(e) : void 0,
+      hideSelectedOptions: !1,
+      components: {
+        ...c.components,
+        MultiValue: m,
+        Option: s
+      },
+      isMulti: !0,
+      options: d,
+      value: l,
+      variant: t
+    }
+  );
 }
-const ae = ({
+const de = ({
   focused: e,
   label: r,
   selected: o,
   size: t,
   theme: n
-}) => /* @__PURE__ */ m(g, {
-  alignItems: "center",
-  justifyContent: "space-between",
-  flexGrow: 1,
-  children: [/* @__PURE__ */ a(_, {
-    tabIndex: -1,
-    size: t,
-    color: "currentColor",
-    children: r
-  }), o && /* @__PURE__ */ a(N, {
-    color: le(n, e),
-    icon: U,
-    size: 12
-  })]
-});
-function V({
+}) => /* @__PURE__ */ h(k, { alignItems: "center", justifyContent: "space-between", flexGrow: 1, children: [
+  /* @__PURE__ */ a(E, { tabIndex: -1, size: t, color: "currentColor", children: r }),
+  o && /* @__PURE__ */ a(
+    N,
+    {
+      color: ae(n, e),
+      icon: U,
+      size: 12
+    }
+  )
+] });
+function Be({
+  variant: e = "standard",
+  styles: r,
+  isMulti: o,
+  components: t,
+  ariaLabelClear: n = "Clear",
+  ...i
+}) {
+  const c = p(() => {
+    const m = x(e);
+    return r ? w(m, r) : m;
+  }, [e, r]);
+  return /* @__PURE__ */ a(
+    K,
+    {
+      styles: c,
+      components: { ...t, ClearIndicator: (m) => /* @__PURE__ */ a(B, { "aria-label": n, onClick: m.clearValue }) },
+      ...i,
+      isMulti: !1
+    }
+  );
+}
+function P({
   value: e,
   onValueChange: r,
   noneSelectedLabel: o = "None",
   children: t
 }) {
-  return /* @__PURE__ */ m(j, {
-    flex: 1,
-    children: [/* @__PURE__ */ m(g, {
-      flexWrap: "wrap",
-      children: [e == null ? void 0 : e.map((n) => /* @__PURE__ */ m(g, {
-        children: [/* @__PURE__ */ a(S, {
-          num: 0.5,
-          children: /* @__PURE__ */ a(I, {
+  return /* @__PURE__ */ h(X, { flex: 1, children: [
+    /* @__PURE__ */ h(k, { flexWrap: "wrap", children: [
+      e == null ? void 0 : e.map((n) => /* @__PURE__ */ h(k, { children: [
+        /* @__PURE__ */ a(I, { num: 0.5, children: /* @__PURE__ */ a(
+          T,
+          {
             label: n.label,
             onClickRemove: () => {
               var i;
-              return r == null ? void 0 : r((i = e == null ? void 0 : e.filter((c) => c.value !== n.value)) != null ? i : []);
+              return r == null ? void 0 : r(
+                (i = e == null ? void 0 : e.filter((c) => c.value !== n.value)) != null ? i : []
+              );
             }
-          })
-        }), /* @__PURE__ */ a(y, {})]
-      }, n.value)), e != null && e.length ? /* @__PURE__ */ a(S, {
-        num: 0.5,
-        children: /* @__PURE__ */ a(q, {
+          }
+        ) }),
+        /* @__PURE__ */ a(y, {})
+      ] }, n.value)),
+      e != null && e.length ? /* @__PURE__ */ a(I, { num: 0.5, children: /* @__PURE__ */ a(
+        q,
+        {
           size: "small",
           label: "Clear",
           onClick: () => r == null ? void 0 : r([])
-        })
-      }) : /* @__PURE__ */ a(S, {
-        num: 0.5,
-        children: /* @__PURE__ */ a(I, {
-          variant: "secondary",
-          label: o
-        })
-      })]
-    }), /* @__PURE__ */ a(y, {
-      num: 0.5
-    }), t]
-  });
+        }
+      ) }) : /* @__PURE__ */ a(I, { num: 0.5, children: /* @__PURE__ */ a(T, { variant: "secondary", label: o }) })
+    ] }),
+    /* @__PURE__ */ a(y, { num: 0.5 }),
+    t
+  ] });
 }
-function ce({
+function ue({
   value: e,
   onValueChange: r,
   placeholder: o = "Type to search",
@@ -586,29 +613,37 @@ function ce({
   inputValue: n,
   onInputChange: i,
   noneSelectedLabel: c = "None",
-  ...v
+  ...s
 }) {
-  return /* @__PURE__ */ a(V, {
-    noneSelectedLabel: c,
-    onValueChange: r,
-    value: e,
-    children: /* @__PURE__ */ a(B, {
-      ...v,
-      isClearable: !1,
+  return /* @__PURE__ */ a(
+    P,
+    {
+      noneSelectedLabel: c,
+      onValueChange: r,
       value: e,
-      onChange: r ? (u) => r([...u]) : void 0,
-      backspaceRemovesValue: !1,
-      hideSelectedOptions: !0,
-      controlShouldRenderValue: !1,
-      placeholder: o,
-      isLoading: t,
-      inputValue: n,
-      onInputChange: i
-    })
-  });
+      children: /* @__PURE__ */ a(
+        O,
+        {
+          ...s,
+          isClearable: !1,
+          value: e,
+          onChange: r ? (m) => r([...m]) : void 0,
+          backspaceRemovesValue: !1,
+          hideSelectedOptions: !0,
+          controlShouldRenderValue: !1,
+          placeholder: o,
+          isLoading: t,
+          inputValue: n,
+          onInputChange: i
+        }
+      )
+    }
+  );
 }
-const xe = F.memo(ce);
-function se({
+const Oe = R.memo(
+  ue
+);
+function fe({
   value: e,
   onValueChange: r,
   placeholder: o = "Type to search",
@@ -616,39 +651,48 @@ function se({
   inputValue: n,
   onInputChange: i,
   noneSelectedLabel: c = "None",
-  ...v
+  ...s
 }) {
-  return /* @__PURE__ */ a(V, {
-    noneSelectedLabel: c,
-    onValueChange: r,
-    value: e,
-    children: /* @__PURE__ */ a(ie, {
-      ...v,
-      isClearable: !1,
+  return /* @__PURE__ */ a(
+    P,
+    {
+      noneSelectedLabel: c,
+      onValueChange: r,
       value: e,
-      onChange: r ? (u) => r([...u]) : void 0,
-      backspaceRemovesValue: !1,
-      hideSelectedOptions: !0,
-      controlShouldRenderValue: !1,
-      placeholder: o,
-      isLoading: t,
-      inputValue: n,
-      onInputChange: i
-    })
-  });
+      children: /* @__PURE__ */ a(
+        se,
+        {
+          ...s,
+          isClearable: !1,
+          value: e,
+          onChange: r ? (m) => r([...m]) : void 0,
+          backspaceRemovesValue: !1,
+          hideSelectedOptions: !0,
+          controlShouldRenderValue: !1,
+          placeholder: o,
+          isLoading: t,
+          inputValue: n,
+          onInputChange: i
+        }
+      )
+    }
+  );
 }
-const ke = F.memo(se);
+const ze = R.memo(
+  fe
+);
 export {
-  Ce as AsyncMultiSelect,
-  ge as AsyncSelect,
-  xe as ChipMultiSelect,
-  ke as GroupedChipMultiSelect,
-  ie as GroupedMultiSelect,
-  B as MultiSelect,
-  pe as OverflowingMultiSelect,
-  we as Select,
-  K as createStylesFromTheme,
-  k as createStylesFromVariant,
-  L as defaultSelectTheme
+  ke as AsyncMultiSelect,
+  Se as AsyncSelect,
+  Oe as ChipMultiSelect,
+  Be as CreatableSelect,
+  ze as GroupedChipMultiSelect,
+  se as GroupedMultiSelect,
+  O as MultiSelect,
+  Ie as OverflowingMultiSelect,
+  ye as Select,
+  D as createStylesFromTheme,
+  x as createStylesFromVariant,
+  W as defaultSelectTheme
 };
 //# sourceMappingURL=index.es.js.map