@new-black/lyra 1.0.37 → 1.1.0

package/dist/lyra37.js

@@ -2,7 +2,7 @@ import { j as r } from "./lyra94.js";
 import { useContext as nr, useRef as B, useState as z, useCallback as E, useMemo as sr, useEffect as X, useId as Nr } from "react";
 import { Provider as ar, ButtonContext as mr, Button as tr, Group as vr, Input as wr } from "./lyra93.js";
 import { flushSync as pr } from "react-dom";
-import { useVirtualizer as br } from "./lyra624.js";
+import { useVirtualizer as br } from "./lyra622.js";
 import { clsx as yr } from "./lyra454.js";
 import "./lyra2.js";
 import "./lyra3.js";
@@ -34,7 +34,7 @@ import "./lyra28.js";
 import "./lyra29.js";
 import { useDictionary as xr } from "./lyra99.js";
 import "./lyra82.js";
-import "./lyra461.js";
+import "./lyra456.js";
 import { InputHeader as fr } from "./lyra38.js";
 import { InputFooter as dr } from "./lyra39.js";
 import { sharedInputStyles as q } from "./lyra40.js";
@@ -44,7 +44,7 @@ import "./lyra32.js";
 import "./lyra33.js";
 import "./lyra34.js";
 import "./lyra35.js";
-import Sr from "./lyra601.js";
+import Sr from "./lyra566.js";
 import { sharedListItemStyles as Fr } from "./lyra457.js";
 import { SharedListItem as kr } from "./lyra458.js";
 import { Popover as Or } from "./lyra54.js";
@@ -53,8 +53,8 @@ import "./lyra56.js";
 import "./lyra57.js";
 import { Text as ur } from "./lyra75.js";
 import "./lyra76.js";
-import { InputTagGroup as $r, InputTag as Br } from "./lyra462.js";
-import "./lyra463.js";
+import { InputTagGroup as $r, InputTag as Br } from "./lyra459.js";
+import "./lyra460.js";
 import { shouldRenderInputHeader as jr, shouldRenderInputFooter as hr } from "./lyra615.js";
 import { useFilterItemsByQuery as Dr } from "./lyra87.js";
 import { useMousePosition as Pr } from "./lyra86.js";
@@ -100,7 +100,7 @@ const Rr = ({
   fullWidth: o,
   getLabel: p,
   isDisabled: x,
-  isInvalid: l,
+  isInvalid: e,
   onChange: a,
   open: m,
   openPopover: N,
@@ -109,17 +109,17 @@ const Rr = ({
   searchInputRef: j,
   selectRenderElements: c,
   startSlot: h,
-  value: e
+  value: i
 }) => {
   var u;
   const { buttonExcludedFromTabOrder: w, inputField: b } = q({
-    isInvalid: l,
+    isInvalid: e,
     hasEndSlot: !0,
     fullWidth: o,
     isDisabled: x,
     isInputOnly: !1
-  }), t = (i) => {
-    (i.key === "Escape" || i.key === "Backspace") && !n ? (i.stopPropagation(), a == null || a(void 0)) : i.key === "ArrowDown" || i.key === "ArrowUp" ? N == null || N() : i.key && i.key.match(/^[a-zA-Z0-9]$/) && (pr(() => {
+  }), t = (l) => {
+    (l.key === "Escape" || l.key === "Backspace") && !n ? (l.stopPropagation(), a == null || a(void 0)) : l.key === "ArrowDown" || l.key === "ArrowUp" ? N == null || N() : l.key && l.key.match(/^[a-zA-Z0-9]$/) && (pr(() => {
       N == null || N();
     }), j.current && (j.current.focus(), j.current.setSelectionRange(0, j.current.value.length)));
   };
@@ -130,9 +130,9 @@ const Rr = ({
       {
         "aria-haspopup": "listbox",
         "aria-expanded": m,
-        className: ({ isFocused: i, isHovered: d }) => b({
+        className: ({ isFocused: l, isHovered: d }) => b({
           isHovered: d,
-          isFocused: i,
+          isFocused: l,
           className: "min-h-8 grow"
         }),
         isDisabled: x,
@@ -140,20 +140,20 @@ const Rr = ({
         onPress: N,
         children: [
           /* @__PURE__ */ r.jsxs("div", { className: "flex grow truncate text-start", children: [
-            v && e ? (u = c(e)) == null ? void 0 : u.customElement : null,
-            e && p(e) ? /* @__PURE__ */ r.jsx(r.Fragment, { children: p(e) }) : /* @__PURE__ */ r.jsx(ur, { variant: "body-medium", color: "secondary", children: f })
+            v && i ? (u = c(i)) == null ? void 0 : u.customElement : null,
+            i && p(i) ? /* @__PURE__ */ r.jsx(r.Fragment, { children: p(i) }) : /* @__PURE__ */ r.jsx(ur, { variant: "body-medium", color: "secondary", children: f })
           ] }),
           /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
-            e && !x && !n ? /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsx(
+            i && !x && !n ? /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsx(
               "div",
               {
                 className: w(),
                 role: "button",
-                onPointerDown: (i) => {
-                  i.stopPropagation(), a == null || a(void 0);
+                onPointerDown: (l) => {
+                  l.stopPropagation(), a == null || a(void 0);
                 },
-                onClick: (i) => {
-                  i.stopPropagation(), a == null || a(void 0);
+                onClick: (l) => {
+                  l.stopPropagation(), a == null || a(void 0);
                 },
                 children: /* @__PURE__ */ r.jsx(or, { name: "clear" })
               }
@@ -171,7 +171,7 @@ const Rr = ({
   getLabel: o,
   isDisabled: p,
   isInvalid: x,
-  label: l,
+  label: e,
   onChange: a,
   openPopover: m,
   placeholder: N,
@@ -185,18 +185,18 @@ const Rr = ({
     isDisabled: p,
     isInputOnly: !1
   }), c = E(
-    (e) => {
-      e.key === "ArrowDown" || e.key === "ArrowUp" ? m() : e.key && e.key.match(/^[a-zA-Z0-9]$/) && (pr(() => {
+    (i) => {
+      i.key === "ArrowDown" || i.key === "ArrowUp" ? m() : i.key && i.key.match(/^[a-zA-Z0-9]$/) && (pr(() => {
         m();
       }), f.current && (f.current.focus(), f.current.setSelectionRange(0, f.current.value.length)));
     },
     [m, f]
   ), h = E(
-    (e) => {
+    (i) => {
       v && a(
         v.filter((w) => {
           const b = s(w);
-          return !e.has(b);
+          return !i.has(b);
         })
       );
     },
@@ -205,11 +205,11 @@ const Rr = ({
   return /* @__PURE__ */ r.jsx(
     vr,
     {
-      className: ({ isFocusWithin: e, isHovered: w }) => j({
+      className: ({ isFocusWithin: i, isHovered: w }) => j({
         isHovered: w,
-        isFocused: e,
+        isFocused: i,
         className: yr(
-          w && !x && !p && !e ? "border-hover" : "",
+          w && !x && !p && !i ? "border-hover" : "",
           "has:[data-focused]:border has:[data-focused]:border-focus",
           "py-[0.4375rem]"
         )
@@ -225,10 +225,10 @@ const Rr = ({
             /* @__PURE__ */ r.jsx("div", { className: "grow text-left", children: v && v.length ? /* @__PURE__ */ r.jsx(
               $r,
               {
-                label: l ?? "Selected items",
+                label: e ?? "Selected items",
                 className: "-m-1.5 -mt-[0.3125rem] items-center",
                 onRemove: p ? void 0 : h,
-                children: v.map((e) => /* @__PURE__ */ r.jsx(Br, { id: s(e), isDisabled: p, children: o(e) }, s(e)))
+                children: v.map((i) => /* @__PURE__ */ r.jsx(Br, { id: s(i), isDisabled: p, children: o(i) }, s(i)))
               }
             ) : /* @__PURE__ */ r.jsx(ur, { color: "secondary", children: N }) }),
             /* @__PURE__ */ r.jsx(or, { name: "chevron-up-down", className: "h-4 w-4 min-w-[16px]" })
@@ -243,23 +243,23 @@ const Rr = ({
   onKeyDown: o,
   onQueryChange: p,
   query: x,
-  searchInputRef: l,
+  searchInputRef: e,
   setQuery: a
 }) => {
   const m = Nr(), { clear: N, search: f } = xr(), v = Er(s ?? !1, { delay: 500, minDuration: 200 }), { buttonExcludedFromTabOrder: j } = q({ fullWidth: !0 });
   return X(() => {
     var c;
-    (c = l.current) == null || c.focus();
+    (c = e.current) == null || c.focus();
   }, []), /* @__PURE__ */ r.jsx("div", { className: "pb-1", children: /* @__PURE__ */ r.jsxs("div", { className: "flex h-6 w-full items-center gap-2 rounded-xs border border-solid border-default bg-overlay-subtle py-1 pe-1 ps-1.5", children: [
     /* @__PURE__ */ r.jsx(
       wr,
       {
-        ref: l,
+        ref: e,
         id: m,
         className: "w-full bg-transparent text-base outline-none placeholder:text-tertiary",
         onChange: (c) => {
-          var h, e;
-          a(((h = c.target) == null ? void 0 : h.value) ?? ""), p == null || p((e = c.target) == null ? void 0 : e.value);
+          var h, i;
+          a(((h = c.target) == null ? void 0 : h.value) ?? ""), p == null || p((i = c.target) == null ? void 0 : i.value);
         },
         placeholder: f,
         value: x ?? "",
@@ -276,7 +276,7 @@ const Rr = ({
         excludeFromTabOrder: !0,
         onPress: () => {
           var c;
-          a(""), (c = l.current) == null || c.focus();
+          a(""), (c = e.current) == null || c.focus();
         },
         children: /* @__PURE__ */ r.jsx(or, { name: "clear" })
       }
@@ -293,14 +293,14 @@ const Rr = ({
   getItemId: o,
   onMultiChange: p,
   onSingleChange: x,
-  value: l
+  value: e
 }) => {
   const a = sr(() => {
-    if (Array.isArray(l))
-      return l.length ? s == null ? void 0 : s.findIndex((t) => o(t) === o(l[0])) : 0;
-    if (l)
-      return (s == null ? void 0 : s.findIndex((t) => o(t) === o(l))) ?? 0;
-  }, [s, o, l]), m = E(
+    if (Array.isArray(e))
+      return e.length ? s == null ? void 0 : s.findIndex((t) => o(t) === o(e[0])) : 0;
+    if (e)
+      return (s == null ? void 0 : s.findIndex((t) => o(t) === o(e))) ?? 0;
+  }, [s, o, e]), m = E(
     (t) => {
       if (Number.isInteger(t)) {
         for (let u = t - 1; u >= 0; u--)
@@ -323,26 +323,26 @@ const Rr = ({
   ), f = E(
     (t) => {
       if (p) {
-        const u = l ? [...l] : [], i = u.map(o), d = i != null && i.includes(o(t)) ? u.filter((D) => o(D) !== o(t)) : [...u, t];
+        const u = e ? [...e] : [], l = u.map(o), d = l != null && l.includes(o(t)) ? u.filter((D) => o(D) !== o(t)) : [...u, t];
         p == null || p(d);
       } else
         x && (x == null || x(t));
     },
-    [o, p, x, l]
+    [o, p, x, e]
   ), v = E(
-    (t) => Array.isArray(l) ? l.some((u) => o(u) === o(t)) : l ? o(l) === o(t) : !1,
-    [o, l]
-  ), [j, c] = z(0), h = Pr(), e = B(void 0), w = E(
+    (t) => Array.isArray(e) ? e.some((u) => o(u) === o(t)) : e ? o(e) === o(t) : !1,
+    [o, e]
+  ), [j, c] = z(0), h = Pr(), i = B(void 0), w = E(
     (t) => {
       const u = j;
       if (t.key === "ArrowDown") {
         t.preventDefault();
-        const i = N(u);
-        i >= 0 && (c(i), e.current = h);
+        const l = N(u);
+        l >= 0 && (c(l), i.current = h);
       } else if (t.key === "ArrowUp") {
         t.preventDefault();
-        const i = m(u);
-        i >= 0 && (c(i), e.current = h);
+        const l = m(u);
+        l >= 0 && (c(l), i.current = h);
       } else
         t.key === "Enter" && f(s[j]);
     },
@@ -356,7 +356,7 @@ const Rr = ({
     ]
   ), b = E(
     (t, u) => {
-      t && e.current !== h && (c(u), e.current = h);
+      t && i.current !== h && (c(u), i.current = h);
     },
     [h]
   );
@@ -369,7 +369,7 @@ const Rr = ({
     selectedItemIndex: a,
     toggleSelection: f
   };
-}, Mr = ({
+}, Vr = ({
   selectedItemIndex: n,
   setActiveItem: s
 }) => (X(() => {
@@ -383,7 +383,7 @@ const Rr = ({
   getItemId: o,
   getLabel: p,
   isLoading: x,
-  items: l,
+  items: e,
   label: a,
   onLoadMore: m,
   onMultiChange: N,
@@ -392,21 +392,21 @@ const Rr = ({
   open: j,
   placement: c,
   searchInputRef: h,
-  selectRenderElements: e,
+  selectRenderElements: i,
   setOpenPopover: w,
   triggerRef: b,
   value: t
 }) => {
-  var K, J, C;
-  const { loadMore: u, noResultsFound: i } = xr(), { filteredItems: d, query: D, setQuery: G } = Dr({
+  var g, J, C;
+  const { loadMore: u, noResultsFound: l } = xr(), { filteredItems: d, query: D, setQuery: G } = Dr({
     getLabel: p,
-    items: l,
+    items: e,
     onQueryChange: f
-  }), { item: P } = Fr(), { isLoadMoreButtonFocused: U, loadMoreButtonRef: A, setIsLoadMoreButtonFocused: M } = Gr(j), {
+  }), { item: P } = Fr(), { isLoadMoreButtonFocused: U, loadMoreButtonRef: A, setIsLoadMoreButtonFocused: V } = Gr(j), {
     activeItem: O,
     getItemIsSelected: H,
     onHoverChange: $,
-    onKeyDown: V,
+    onKeyDown: L,
     selectedItemIndex: F,
     setActiveItem: k,
     toggleSelection: Q
@@ -418,14 +418,14 @@ const Rr = ({
     onMultiChange: N,
     onSingleChange: v,
     value: t
-  }), [g, _] = z(
-    (K = b.current) == null ? void 0 : K.offsetWidth
+  }), [K, _] = z(
+    (g = b.current) == null ? void 0 : g.offsetWidth
   );
   Sr("resize", () => {
     var y;
     _((y = b.current) == null ? void 0 : y.offsetWidth);
   });
-  const Z = g ?? ((J = b.current) == null ? void 0 : J.offsetWidth), Y = B(null), R = m ? ((d == null ? void 0 : d.length) ?? 0) + 1 : (d == null ? void 0 : d.length) ?? 0, T = br({
+  const Z = K ?? ((J = b.current) == null ? void 0 : J.offsetWidth), Y = B(null), R = m ? ((d == null ? void 0 : d.length) ?? 0) + 1 : (d == null ? void 0 : d.length) ?? 0, T = br({
     count: R,
     estimateSize: () => 40,
     getScrollElement: () => Y.current,
@@ -434,7 +434,7 @@ const Rr = ({
   X(() => {
     O !== void 0 && O >= 0 && (d != null && d.length) && (O === d.length - 1 && m ? T.scrollToIndex(R) : T.scrollToIndex(Math.min(O, R - 1)));
   }, [O, R, d.length, m, T]);
-  const L = T.getVirtualItems();
+  const M = T.getVirtualItems();
   return /* @__PURE__ */ r.jsx(
     Or,
     {
@@ -463,10 +463,10 @@ const Rr = ({
               }), T.scrollToOffset(0);
             },
             searchInputRef: h,
-            onKeyDown: V
+            onKeyDown: L
           }
         ),
-        /* @__PURE__ */ r.jsx(Mr, { selectedItemIndex: F, setActiveItem: k }),
+        /* @__PURE__ */ r.jsx(Vr, { selectedItemIndex: F, setActiveItem: k }),
         /* @__PURE__ */ r.jsx(
           "div",
           {
@@ -488,9 +488,9 @@ const Rr = ({
                   {
                     className: "absolute start-0 top-0 w-full",
                     style: {
-                      transform: `translateY(${((C = L == null ? void 0 : L[0]) == null ? void 0 : C.start) ?? 0}px)`
+                      transform: `translateY(${((C = M == null ? void 0 : M[0]) == null ? void 0 : C.start) ?? 0}px)`
                     },
-                    children: L.map((y) => {
+                    children: M.map((y) => {
                       if (y.index === R - 1 && m)
                         return /* @__PURE__ */ r.jsx(
                           "div",
@@ -503,8 +503,8 @@ const Rr = ({
                                 tr,
                                 {
                                   isDisabled: x,
-                                  onFocusChange: M,
-                                  onHoverChange: M,
+                                  onFocusChange: V,
+                                  onHoverChange: V,
                                   ref: A,
                                   className: P({
                                     className: "w-full justify-start bg-transparent ps-6 text-base font-normal text-primary duration-0 active:text-inverted hover:bg-action-hover hover:text-inverted focus:bg-action-focus focus:text-inverted focus-visible:[box-shadow:none]"
@@ -551,7 +551,7 @@ const Rr = ({
                                       disabled: (s == null ? void 0 : s.includes(o(S))) ?? !1,
                                       selected: H(S)
                                     },
-                                    selectRenderElements: e
+                                    selectRenderElements: i
                                   },
                                   o(S)
                                 )
@@ -569,7 +569,7 @@ const Rr = ({
             )
           }
         ),
-        R ? null : /* @__PURE__ */ r.jsx(ur, { variant: "body-medium", color: "secondary", className: "px-2.5", children: i })
+        R ? null : /* @__PURE__ */ r.jsx(ur, { variant: "body-medium", color: "secondary", className: "px-2.5", children: l })
       ] }) : null
     }
   );
@@ -583,7 +583,7 @@ const Rr = ({
   disableClearLogic: o,
   disabledItemIdKeys: p,
   endSlot: x,
-  errorMessage: l,
+  errorMessage: e,
   fullWidth: a = !0,
   getItemId: m,
   getLabel: N,
@@ -592,48 +592,48 @@ const Rr = ({
   hideInputHeader: j,
   isDisabled: c,
   isInvalid: h,
-  isLoading: e,
+  isLoading: i,
   isRequired: w,
   items: b,
   label: t,
   name: u,
-  onChange: i,
+  onChange: l,
   onLoadMore: d,
   onQueryChange: D,
   outerEndSlot: G,
   outerStartSlot: P,
   placeholder: U,
   placement: A = "bottom start",
-  renderCustomElementInValueButton: M,
+  renderCustomElementInValueButton: V,
   selectRenderElements: O,
   startSlot: H,
   value: $
 }) => {
-  const { isDisabled: V } = nr(cr), F = B(null), k = B(null), Q = B(null), [g, _] = z($ ?? n), [Z, Y] = z(!1), R = () => {
+  const { isDisabled: L } = nr(cr), F = B(null), k = B(null), Q = B(null), [K, _] = z($ ?? n), [Z, Y] = z(!1), R = () => {
     var rr;
     Y(!0), (rr = k.current) == null || rr.click();
-  }, T = () => Y(!1), L = E(
+  }, T = () => Y(!1), M = E(
     (rr) => {
-      _(rr), i == null || i(rr), T();
+      _(rr), l == null || l(rr), T();
     },
-    [i]
-  ), { direction: K } = er(), J = sr(
+    [l]
+  ), { direction: g } = er(), J = sr(
     () => jr({ hideHintLabel: f, hideInputHeader: j, label: t }),
     [f, j, t]
   ), C = sr(
-    () => hr({ description: s, errorMessage: l, hideInputFooter: v }),
-    [s, l, v]
+    () => hr({ description: s, errorMessage: e, hideInputFooter: v }),
+    [s, e, v]
   ), { outerSlot: y, outerSlotsWrapper: I, wrapper: S } = q({
     fullWidth: a,
     isInvalid: h,
-    isDisabled: c || V,
+    isDisabled: c || L,
     hasInputHeader: J,
     hasLabel: !!t
   });
   X(() => {
     _($ ?? n);
   }, [n, $]);
-  const W = $ ?? g;
+  const W = $ ?? K;
   return /* @__PURE__ */ r.jsxs("div", { children: [
     /* @__PURE__ */ r.jsx(lr, { name: u, value: W, getItemId: m }),
     /* @__PURE__ */ r.jsxs("div", { className: I(), children: [
@@ -649,19 +649,19 @@ const Rr = ({
             getLabel: N,
             getItemId: m,
             isDisabled: c,
-            isInvalid: h,
+            isInvalid: h || !!e,
             open: Z,
             openPopover: R,
-            onChange: L,
+            onChange: M,
             placeholder: U,
             searchInputRef: F,
             startSlot: H,
             value: W,
-            renderCustomElementInValueButton: M,
+            renderCustomElementInValueButton: V,
             selectRenderElements: O
           }
         ) }),
-        C ? /* @__PURE__ */ r.jsx(dr, { description: s, errorMessage: l }) : null
+        C ? /* @__PURE__ */ r.jsx(dr, { description: s, errorMessage: e }) : null
       ] }),
       G ? /* @__PURE__ */ r.jsx("div", { className: y(), children: G }) : null
     ] }),
@@ -677,14 +677,14 @@ const Rr = ({
         setOpenPopover: Y,
         selectRenderElements: O,
         disabledItemIdKeys: p,
-        direction: K,
+        direction: g,
         onQueryChange: D,
-        isLoading: e,
+        isLoading: i,
         searchInputRef: F,
         onLoadMore: d,
         placement: A,
         value: W,
-        onSingleChange: L
+        onSingleChange: M
       }
     )
   ] });
@@ -694,7 +694,7 @@ const Rr = ({
   disableClearLogic: o,
   disabledItemIdKeys: p,
   endSlot: x,
-  errorMessage: l,
+  errorMessage: e,
   fullWidth: a = !0,
   getItemId: m,
   getLabel: N,
@@ -703,54 +703,54 @@ const Rr = ({
   hideInputHeader: j,
   isDisabled: c,
   isInvalid: h,
-  isLoading: e,
+  isLoading: i,
   isRequired: w,
   items: b,
   label: t,
   labelId: u,
-  name: i,
+  name: l,
   onChange: d,
   onLoadMore: D,
   onQueryChange: G,
   outerEndSlot: P,
   outerStartSlot: U,
   placeholder: A,
-  placement: M = "bottom start",
+  placement: V = "bottom start",
   selectRenderElements: O,
   startSlot: H,
   value: $
 }) => {
-  const { isDisabled: V } = nr(cr), F = B(null), k = B(null), [Q, g] = z($ ?? n), [_, Z] = z(!1), Y = () => {
+  const { isDisabled: L } = nr(cr), F = B(null), k = B(null), [Q, K] = z($ ?? n), [_, Z] = z(!1), Y = () => {
     Z(!0);
   }, R = E(
     (S) => {
       var W;
-      g(S), d == null || d(S), (W = F.current) == null || W.focus();
+      K(S), d == null || d(S), (W = F.current) == null || W.focus();
     },
     [d]
-  ), { direction: T } = er(), L = sr(
+  ), { direction: T } = er(), M = sr(
     () => jr({ hideHintLabel: f, hideInputHeader: j, label: t }),
     [f, j, t]
-  ), K = sr(
-    () => hr({ description: s, errorMessage: l, hideInputFooter: v }),
-    [s, l, v]
+  ), g = sr(
+    () => hr({ description: s, errorMessage: e, hideInputFooter: v }),
+    [s, e, v]
   ), { outerSlot: J, outerSlotsWrapper: C, wrapper: y } = q({
     fullWidth: a,
     isInvalid: h,
-    isDisabled: c || V,
-    hasInputHeader: L,
+    isDisabled: c || L,
+    hasInputHeader: M,
     hasLabel: !!t
   });
   X(() => {
-    g($ ?? n);
+    K($ ?? n);
   }, [n, $]);
   const I = $ ?? Q;
   return /* @__PURE__ */ r.jsxs("div", { children: [
-    /* @__PURE__ */ r.jsx(lr, { name: i, value: I, getItemId: m }),
+    /* @__PURE__ */ r.jsx(lr, { name: l, value: I, getItemId: m }),
     /* @__PURE__ */ r.jsxs("div", { className: C(), children: [
       U ? /* @__PURE__ */ r.jsx("div", { className: J(), children: U }) : null,
       /* @__PURE__ */ r.jsxs("div", { className: y(), children: [
-        L ? /* @__PURE__ */ r.jsx(
+        M ? /* @__PURE__ */ r.jsx(
           fr,
           {
             label: t,
@@ -768,7 +768,7 @@ const Rr = ({
             getLabel: N,
             getItemId: m,
             isDisabled: c,
-            isInvalid: h,
+            isInvalid: h || !!e,
             onChange: R,
             open: _,
             openPopover: Y,
@@ -778,7 +778,7 @@ const Rr = ({
             value: I
           }
         ) }),
-        K ? /* @__PURE__ */ r.jsx(dr, { description: s, errorMessage: l }) : null
+        g ? /* @__PURE__ */ r.jsx(dr, { description: s, errorMessage: e }) : null
       ] }),
       P ? /* @__PURE__ */ r.jsx("div", { className: J(), children: P }) : null
     ] }),
@@ -793,14 +793,14 @@ const Rr = ({
         items: b,
         onMultiChange: R,
         value: I,
-        placement: M,
+        placement: V,
         open: _,
         setOpenPopover: Z,
         selectRenderElements: O,
         disabledItemIdKeys: p,
         direction: T,
         onQueryChange: G,
-        isLoading: e,
+        isLoading: i,
         onLoadMore: D
       }
     )
@@ -812,7 +812,7 @@ const Rr = ({
   fullWidth: p = !1,
   // TODO: ask about it
   getItemId: x,
-  getLabel: l,
+  getLabel: e,
   isDisabled: a,
   isInvalid: m,
   isLoading: N,
@@ -821,12 +821,12 @@ const Rr = ({
   name: j,
   onChange: c,
   onLoadMore: h,
-  onQueryChange: e,
+  onQueryChange: i,
   placement: w = "bottom start",
   selectRenderElements: b,
   value: t
 }) => {
-  const { isDisabled: u } = nr(cr), i = B(null), d = B(null), D = B(null), [G, P] = z(t ?? s), [U, A] = z(!1), M = () => {
+  const { isDisabled: u } = nr(cr), l = B(null), d = B(null), D = B(null), [G, P] = z(t ?? s), [U, A] = z(!1), V = () => {
     var k;
     A(!0), (k = d.current) == null || k.click();
   }, O = () => A(!1), H = E(
@@ -834,7 +834,7 @@ const Rr = ({
       P(k), c == null || c(k), O();
     },
     [c]
-  ), { direction: $ } = er(), { wrapper: V } = q({
+  ), { direction: $ } = er(), { wrapper: L } = q({
     fullWidth: p,
     isInvalid: m,
     isDisabled: a
@@ -850,21 +850,21 @@ const Rr = ({
         [
           mr,
           {
-            onPress: () => M(),
+            onPress: () => V(),
             isDisabled: a || u
           }
         ]
       ],
       children: /* @__PURE__ */ r.jsxs("div", { children: [
         /* @__PURE__ */ r.jsx(lr, { name: j, value: F, getItemId: x }),
-        /* @__PURE__ */ r.jsx("div", { className: V(), children: /* @__PURE__ */ r.jsx("div", { ref: D, children: n }) }),
+        /* @__PURE__ */ r.jsx("div", { className: L(), children: /* @__PURE__ */ r.jsx("div", { ref: D, children: n }) }),
         /* @__PURE__ */ r.jsx(
           ir,
           {
             triggerRef: D,
             label: v,
             getItemId: x,
-            getLabel: l,
+            getLabel: e,
             items: f,
             open: U,
             setOpenPopover: A,
@@ -872,9 +872,9 @@ const Rr = ({
             disabledItemIdKeys: o,
             direction: $,
             onLoadMore: h,
-            onQueryChange: e,
+            onQueryChange: i,
             isLoading: N,
-            searchInputRef: i,
+            searchInputRef: l,
             placement: w,
             value: F,
             onSingleChange: H
@@ -889,7 +889,7 @@ const Rr = ({
   disabledItemIdKeys: o,
   fullWidth: p = !0,
   getItemId: x,
-  getLabel: l,
+  getLabel: e,
   isDisabled: a,
   isInvalid: m,
   isLoading: N,
@@ -898,18 +898,18 @@ const Rr = ({
   name: j,
   onChange: c,
   onLoadMore: h,
-  onQueryChange: e,
+  onQueryChange: i,
   placement: w = "bottom start",
   selectRenderElements: b,
   value: t
 }) => {
-  const { isDisabled: u } = nr(cr), i = B(null), d = B(null), D = B(null), [G, P] = z(t ?? s), [U, A] = z(!1), M = () => {
+  const { isDisabled: u } = nr(cr), l = B(null), d = B(null), D = B(null), [G, P] = z(t ?? s), [U, A] = z(!1), V = () => {
     var F;
     A(!0), (F = d.current) == null || F.click();
   }, O = E(
     (F) => {
       var k;
-      P(F), c == null || c(F), (k = i.current) == null || k.focus();
+      P(F), c == null || c(F), (k = l.current) == null || k.focus();
     },
     [c]
   ), { direction: H } = er(), { wrapper: $ } = q({
@@ -920,27 +920,27 @@ const Rr = ({
   X(() => {
     P(t ?? s);
   }, [s, t]);
-  const V = t ?? G;
+  const L = t ?? G;
   return /* @__PURE__ */ r.jsx(
     ar,
     {
       values: [
         [
           mr,
-          { onPress: () => M(), isDisabled: a || u }
+          { onPress: () => V(), isDisabled: a || u }
         ]
       ],
       children: /* @__PURE__ */ r.jsxs("div", { children: [
-        /* @__PURE__ */ r.jsx(lr, { name: j, value: V, getItemId: x }),
+        /* @__PURE__ */ r.jsx(lr, { name: j, value: L, getItemId: x }),
         /* @__PURE__ */ r.jsx("div", { className: $(), children: /* @__PURE__ */ r.jsx("div", { ref: D, children: n }) }),
         /* @__PURE__ */ r.jsx(
           ir,
           {
             label: v,
-            searchInputRef: i,
+            searchInputRef: l,
             triggerRef: D,
             getItemId: x,
-            getLabel: l,
+            getLabel: e,
             items: f,
             onLoadMore: h,
             open: U,
@@ -948,9 +948,9 @@ const Rr = ({
             selectRenderElements: b,
             disabledItemIdKeys: o,
             direction: H,
-            onQueryChange: e,
+            onQueryChange: i,
             isLoading: N,
-            value: V,
+            value: L,
             onMultiChange: O,
             placement: w
           }