@new-black/lyra 1.1.6 → 1.2.0-next.2

package/dist/lyra36.js

@@ -1,13 +1,13 @@
 import { j as r } from "./lyra94.js";
-import { useContext as K, useState as E, useMemo as O, useRef as J, useCallback as A, useEffect as B } from "react";
-import { Button as M, Group as pr } from "./lyra93.js";
-import { clsx as C } from "./lyra117.js";
+import { useContext as g, useState as W, useMemo as U, useRef as V, useCallback as y, useEffect as C } from "react";
+import { RadioGroup as fr, Provider as I, TextContext as rr, Radio as or, CheckboxGroup as xr, Button as sr, Group as mr, Checkbox as jr } from "./lyra93.js";
+import { clsx as tr } from "./lyra105.js";
 /* empty css      */
 import "./lyra3.js";
 import "./lyra4.js";
 import "./lyra5.js";
 import "./lyra6.js";
-import { SvgIcon as H } from "./lyra67.js";
+import { SvgIcon as M } from "./lyra67.js";
 import "./lyra8.js";
 import "./lyra9.js";
 import "./lyra10.js";
@@ -26,36 +26,36 @@ import "./lyra22.js";
 import "./lyra23.js";
 import "./lyra24.js";
 import "./lyra25.js";
-import { FieldGroupContext as g } from "./lyra26.js";
+import { FieldGroupContext as nr } from "./lyra26.js";
 import "./lyra27.js";
 import "./lyra28.js";
 import "./lyra29.js";
 import "./lyra99.js";
 import "./lyra82.js";
-import "./lyra105.js";
-import { InputHeader as I } from "./lyra38.js";
-import { InputFooter as rr } from "./lyra39.js";
-import { sharedInputStyles as Q } from "./lyra40.js";
+import "./lyra112.js";
+import { InputHeader as cr } from "./lyra38.js";
+import { InputFooter as ir } from "./lyra39.js";
+import { sharedInputStyles as X } from "./lyra40.js";
 import "./lyra44.js";
 import "./lyra31.js";
 import "./lyra32.js";
 import "./lyra33.js";
 import "./lyra34.js";
 import "./lyra35.js";
-import er from "./lyra475.js";
-import { sharedListStyles as lr } from "./lyra106.js";
-import { SharedListItem as mr } from "./lyra107.js";
-import { Popover as ur } from "./lyra54.js";
+import hr from "./lyra475.js";
+import { sharedListStyles as Nr } from "./lyra108.js";
+import { SharedListItem as K } from "./lyra109.js";
+import { Popover as $r } from "./lyra54.js";
 import "./lyra55.js";
 import "./lyra56.js";
 import "./lyra57.js";
-import { Text as or } from "./lyra75.js";
+import { Text as pr } from "./lyra75.js";
 import "./lyra76.js";
-import { InputTagGroup as fr, InputTag as xr } from "./lyra108.js";
-import "./lyra109.js";
-import { shouldRenderInputHeader as tr, shouldRenderInputFooter as sr } from "./lyra540.js";
+import { InputTagGroup as vr, InputTag as wr } from "./lyra113.js";
+import "./lyra114.js";
+import { shouldRenderInputHeader as lr, shouldRenderInputFooter as er } from "./lyra528.js";
 import "react-dom";
-import { useMousePosition as ar } from "./lyra86.js";
+import { useMousePosition as br } from "./lyra86.js";
 import "./lyra41.js";
 import "./lyra42.js";
 import "./lyra43.js";
@@ -88,513 +88,588 @@ import "./lyra83.js";
 import "./lyra102.js";
 import "./lyra90.js";
 import "./lyra91.js";
-import { useLocale as nr } from "./lyra92.js";
-const jr = ({
-  closePopover: p,
-  disabledItemIdKeys: s,
-  filteredItems: e,
-  getItemId: o,
-  onMultiChange: m,
+import { useLocale as ar } from "./lyra92.js";
+const Sr = ({
+  closePopover: l,
+  disabledItemIdKeys: t,
+  filteredItems: i,
+  getItemId: c,
+  onMultiChange: f,
   onSingleChange: u,
-  value: i
+  value: p
 }) => {
-  const y = O(() => {
-    if (Array.isArray(i))
-      return i.length ? e.findIndex((n) => o(n) === o(i[0])) : 0;
-    if (i)
-      return e.findIndex((n) => o(n) === o(i));
-  }, [e, o, i]), [j, f] = E(y ?? 0), h = A(
+  const x = U(() => {
+    if (Array.isArray(p))
+      return p.length ? i.findIndex((n) => c(n) === c(p[0])) : 0;
+    if (p)
+      return i.findIndex((n) => c(n) === c(p));
+  }, [i, c, p]), [v, N] = W(x ?? 0), m = y(
     (n) => {
       if (Number.isInteger(n)) {
-        for (let l = n - 1; l >= 0; l--)
-          if (!(s != null && s.includes(o(e[l]))))
-            return Math.max(l, 0);
+        for (let e = n - 1; e >= 0; e--)
+          if (!(t != null && t.includes(c(i[e]))))
+            return Math.max(e, 0);
       }
       return -1;
     },
-    [s, e, o]
-  ), v = A(
+    [t, i, c]
+  ), j = y(
     (n) => {
       if (Number.isInteger(n)) {
-        for (let l = n + 1; l < e.length; l++)
-          if (!(s != null && s.includes(o(e[l]))))
-            return Math.min(e.length - 1, l);
+        for (let e = n + 1; e < i.length; e++)
+          if (!(t != null && t.includes(c(i[e]))))
+            return Math.min(i.length - 1, e);
       }
       return -1;
     },
-    [s, e, o]
-  ), k = J([]), N = A((n, l) => {
-    l && (k.current[n] = l);
-  }, []), c = A(
+    [t, i, c]
+  ), w = V([]), S = y((n, e) => {
+    e && (w.current[n] = e);
+  }, []), h = y(
     (n) => {
-      if (m) {
-        const l = i ? [...i] : [], D = l.map(o), a = D != null && D.includes(o(n)) ? l.filter((P) => o(P) !== o(n)) : [...l, n];
-        m == null || m(a);
+      if (f) {
+        const e = p ? [...p] : [], k = e.map(c), $ = k != null && k.includes(c(n)) ? e.filter((P) => c(P) !== c(n)) : [...e, n];
+        f == null || f($);
       } else u && (u == null || u(n));
     },
-    [o, m, u, i]
-  ), t = A(
-    (n) => Array.isArray(i) ? i.some((l) => o(l) === o(n)) : i ? o(i) === o(n) : !1,
-    [o, i]
-  ), w = ar(), x = J(void 0), S = A(
+    [c, f, u, p]
+  ), o = y(
+    (n) => Array.isArray(p) ? p.some((e) => c(e) === c(n)) : p ? c(p) === c(n) : !1,
+    [c, p]
+  ), s = br(), a = V(void 0), D = y(
     (n) => {
-      const l = j;
+      const e = v;
       if (n.key === "ArrowDown") {
         n.preventDefault();
-        const D = v(l);
-        if (D >= 0) {
-          f(D), x.current = w;
-          const a = k.current[D];
-          a == null || a.scrollIntoView({ block: "nearest" }), a == null || a.focus();
+        const k = j(e);
+        if (k >= 0) {
+          N(k), a.current = s;
+          const $ = w.current[k];
+          $ == null || $.scrollIntoView({ block: "nearest" }), $ == null || $.focus();
         }
       } else if (n.key === "ArrowUp") {
         n.preventDefault();
-        const D = h(l);
-        if (D >= 0) {
-          f(D);
-          const a = k.current[D];
-          a == null || a.scrollIntoView({ block: "nearest" }), a == null || a.focus(), x.current = w;
+        const k = m(e);
+        if (k >= 0) {
+          N(k);
+          const $ = w.current[k];
+          $ == null || $.scrollIntoView({ block: "nearest" }), $ == null || $.focus(), a.current = s;
         }
-      } else n.key === "Escape" && p();
+      } else n.key === "Escape" && l();
     },
-    [j, p, v, h, w]
-  ), $ = A(
-    (n, l) => {
-      n && x.current !== w && (f(l), x.current = w);
+    [v, l, j, m, s]
+  ), d = y(
+    (n, e) => {
+      n && a.current !== s && (N(e), a.current = s);
     },
-    [w]
+    [s]
   );
-  return B(() => {
+  return C(() => {
     var n;
-    (n = k.current) != null && n[j] && k.current[j].focus();
+    (n = w.current) != null && n[v] && (w.current[v].focus(), w.current[v].scrollIntoView({ block: "nearest" }));
   }, [open]), {
-    activeItem: j,
-    assignRefOnIndex: N,
-    getItemIsSelected: t,
-    onKeyDown: S,
-    onHoverChange: $,
-    selectedItemIndex: y,
-    toggleSelection: c
+    activeItem: v,
+    assignRefOnIndex: S,
+    getItemIsSelected: o,
+    onKeyDown: D,
+    onHoverChange: d,
+    selectedItemIndex: x,
+    toggleSelection: h
   };
-}, hr = ({
-  disabledItemIdKeys: p,
-  getItemId: s,
-  items: e,
-  onMultiChange: o,
-  onSingleChange: m,
+}, kr = ({
+  disabledItemIdKeys: l,
+  getItemId: t,
+  items: i,
+  onMultiChange: c,
+  onSingleChange: f,
   selectRenderElements: u,
-  setOpenPopover: i,
-  value: y
+  setOpenPopover: p,
+  value: x
 }) => {
   const {
-    activeItem: j,
-    assignRefOnIndex: f,
-    getItemIsSelected: h,
-    onHoverChange: v,
-    onKeyDown: k,
-    toggleSelection: N
-  } = jr({
-    closePopover: () => i(!1),
-    disabledItemIdKeys: p,
-    filteredItems: e,
-    getItemId: s,
-    onMultiChange: o,
-    onSingleChange: m,
-    value: y
-  }), c = (t) => (p == null ? void 0 : p.includes(s(t))) ?? !1;
+    activeItem: v,
+    assignRefOnIndex: N,
+    getItemIsSelected: m,
+    onHoverChange: j,
+    onKeyDown: w,
+    toggleSelection: S
+  } = Sr({
+    closePopover: () => p(!1),
+    disabledItemIdKeys: l,
+    filteredItems: i,
+    getItemId: t,
+    onMultiChange: c,
+    onSingleChange: f,
+    value: x
+  }), h = (o) => (l == null ? void 0 : l.includes(t(o))) ?? !1;
   return /* @__PURE__ */ r.jsx(
     "div",
     {
-      className: lr({
+      className: Nr({
         className: "h-full max-h-72 overflow-auto"
       }),
-      children: e.map((t, w) => /* @__PURE__ */ r.jsx(
-        M,
+      children: i.map((o, s) => c ? /* @__PURE__ */ r.jsx(
+        jr,
+        {
+          isDisabled: h(o),
+          value: t(o).toString(),
+          onChange: () => S(o),
+          className: "w-full text-start outline-none",
+          ref: (a) => N(s, a),
+          onKeyDown: (a) => {
+            a.key !== "Enter" ? w(a) : (a.preventDefault(), S(o));
+          },
+          onHoverChange: (a) => {
+            j(a, s);
+          },
+          children: /* @__PURE__ */ r.jsx(
+            K,
+            {
+              item: o,
+              state: {
+                active: v === s,
+                disabled: (l == null ? void 0 : l.includes(t(o))) ?? !1,
+                selected: m(o)
+              },
+              selectRenderElements: u,
+              hasSelection: !0
+            }
+          )
+        },
+        t(o)
+      ) : /* @__PURE__ */ r.jsx(
+        or,
         {
-          "data-index": w,
-          ref: (x) => f(w, x),
+          "data-index": s,
+          ref: (a) => N(s, a),
           className: "w-full text-start outline-none",
-          onHoverChange: (x) => {
-            v(x, w);
+          onHoverChange: (a) => {
+            j(a, s);
           },
-          onPress: () => N(t),
-          onKeyDown: (x) => k(x),
-          isDisabled: c(t),
+          onKeyDown: (a) => {
+            a.key !== "Enter" ? w(a) : S(o);
+          },
+          isDisabled: h(o),
+          value: t(o).toString(),
           children: /* @__PURE__ */ r.jsx(
-            mr,
+            K,
             {
-              item: t,
+              item: o,
               state: {
-                active: j === w,
-                disabled: (p == null ? void 0 : p.includes(s(t))) ?? !1,
-                selected: h(t)
+                active: v === s,
+                disabled: (l == null ? void 0 : l.includes(t(o))) ?? !1,
+                selected: m(o)
               },
               selectRenderElements: u,
               hasSelection: !0
             }
           )
         },
-        s(t)
+        t(o)
       ))
     }
   );
-}, ir = ({
-  direction: p,
-  disabledItemIdKeys: s,
-  getItemId: e,
-  items: o,
-  label: m,
+}, ur = ({
+  direction: l,
+  disabledItemIdKeys: t,
+  getItemId: i,
+  items: c,
+  label: f,
   onMultiChange: u,
-  onSingleChange: i,
-  open: y,
-  placement: j = "bottom start",
-  selectRenderElements: f,
-  setOpenPopover: h,
-  triggerRef: v,
-  value: k
+  onSingleChange: p,
+  open: x,
+  placement: v = "bottom start",
+  selectRenderElements: N,
+  setOpenPopover: m,
+  triggerRef: j,
+  value: w
 }) => {
-  var w, x;
-  const [N, c] = E(
-    (w = v.current) == null ? void 0 : w.offsetWidth
-  ), t = N ?? ((x = v.current) == null ? void 0 : x.offsetWidth);
-  return er("resize", () => {
-    var S;
-    c((S = v.current) == null ? void 0 : S.offsetWidth);
+  var s, a;
+  const [S, h] = W(
+    (s = j.current) == null ? void 0 : s.offsetWidth
+  ), o = S ?? ((a = j.current) == null ? void 0 : a.offsetWidth);
+  return hr("resize", () => {
+    var D;
+    h((D = j.current) == null ? void 0 : D.offsetWidth);
   }), /* @__PURE__ */ r.jsx(
-    ur,
+    $r,
     {
       className: "p-1",
-      isOpen: y,
-      triggerRef: v,
-      onOpenChange: h,
+      isOpen: x,
+      triggerRef: j,
+      onOpenChange: m,
       shouldUpdatePosition: !0,
-      "aria-label": m,
+      "aria-label": f,
       disablePadding: !0,
-      placement: j,
+      placement: v,
       style: {
-        width: t && t > 280 ? t + "px" : "280px",
-        direction: p
+        width: o && o > 280 ? o + "px" : "280px",
+        direction: l
       },
-      children: y ? /* @__PURE__ */ r.jsx(
-        hr,
+      children: x ? /* @__PURE__ */ r.jsx(
+        kr,
         {
-          getItemId: e,
-          items: o,
+          getItemId: i,
+          items: c,
           onMultiChange: u,
-          onSingleChange: i,
-          selectRenderElements: f,
-          setOpenPopover: h,
-          value: k,
-          disabledItemIdKeys: s
+          onSingleChange: p,
+          selectRenderElements: N,
+          setOpenPopover: m,
+          value: w,
+          disabledItemIdKeys: t
         }
       ) : null
     }
   );
-}, Nr = ({
-  disableClearLogic: p,
-  fullWidth: s,
-  getLabel: e,
-  isDisabled: o,
-  isInvalid: m,
-  onChange: u,
-  placeholder: i,
-  renderCustomElementInValueButton: y,
-  selectRenderElements: j,
-  setOpenPopover: f,
-  value: h
+}, Dr = ({
+  "aria-label": l,
+  disableClearLogic: t,
+  fullWidth: i,
+  getLabel: c,
+  isDisabled: f,
+  isInvalid: u,
+  onChange: p,
+  placeholder: x,
+  renderCustomElementInValueButton: v,
+  selectRenderElements: N,
+  setOpenPopover: m,
+  value: j
 }) => {
-  var N;
-  const { inputField: v } = Q({ isInputOnly: !1 }), k = (c) => {
-    (c.key === "Escape" || c.key === "Backspace") && !p ? u == null || u(void 0) : c.key === "ArrowDown" && (c.preventDefault(), f(!0));
+  var h;
+  const { inputField: w } = X({ isInputOnly: !1 }), S = (o) => {
+    (o.key === "Escape" || o.key === "Backspace") && !t ? p == null || p(void 0) : o.key === "ArrowDown" && (o.preventDefault(), m(!0));
   };
   return /* @__PURE__ */ r.jsxs(
-    M,
+    sr,
     {
-      className: ({ isFocused: c, isHovered: t }) => v({
-        fullWidth: s,
-        isDisabled: o,
-        isHovered: t,
-        isFocused: c,
-        isInvalid: m,
+      className: ({ isFocused: o, isHovered: s }) => w({
+        fullWidth: i,
+        isDisabled: f,
+        isHovered: s,
+        isFocused: o,
+        isInvalid: u,
         hasEndSlot: !0,
-        className: C(
-          t && !m && !o && !c ? "border-hover" : "",
+        className: tr(
+          s && !u && !f && !o ? "border-hover" : "",
           "min-h-8"
         )
       }),
-      isDisabled: o,
-      onKeyDown: k,
+      isDisabled: f,
+      onKeyDown: S,
       onPress: () => {
-        f(!0);
+        m(!0);
       },
+      "aria-label": l,
       children: [
         /* @__PURE__ */ r.jsxs("div", { className: "flex grow text-start", children: [
-          y && h ? (N = j(h)) == null ? void 0 : N.customElement : null,
-          h ? /* @__PURE__ */ r.jsx(r.Fragment, { children: e(h) }) : /* @__PURE__ */ r.jsx(or, { color: "secondary", children: i })
+          v && j ? (h = N(j)) == null ? void 0 : h.customElement : null,
+          j ? /* @__PURE__ */ r.jsx(r.Fragment, { children: c(j) }) : /* @__PURE__ */ r.jsx(pr, { color: "secondary", children: x })
         ] }),
         /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
-          h && !p && !o ? /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsx(
+          j && !t && !f ? /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsx(
             "div",
             {
               className: "text-secondary",
               role: "button",
-              onClick: (c) => {
-                c.stopPropagation(), u == null || u(void 0);
+              onClick: (o) => {
+                o.stopPropagation(), p == null || p(void 0);
               },
-              children: /* @__PURE__ */ r.jsx(H, { name: "clear" })
+              children: /* @__PURE__ */ r.jsx(M, { name: "clear" })
             }
           ) }) : null,
-          /* @__PURE__ */ r.jsx(H, { name: "chevron-up-down" })
+          /* @__PURE__ */ r.jsx(M, { name: "chevron-up-down" })
         ] })
       ]
     }
   );
-}, wr = ({
-  fullWidth: p,
-  getItemId: s,
-  getLabel: e,
-  isDisabled: o,
-  isInvalid: m,
-  label: u,
-  onChange: i,
-  placeholder: y,
-  setOpenPopover: j,
-  value: f
+}, Ar = ({
+  "aria-label": l,
+  fullWidth: t,
+  getItemId: i,
+  getLabel: c,
+  isDisabled: f,
+  isInvalid: u,
+  label: p,
+  onChange: x,
+  placeholder: v,
+  setOpenPopover: N,
+  value: m
 }) => {
-  const { inputField: h } = Q({ isInputOnly: !1 }), v = A(
-    (N) => {
-      f && i(
-        f.filter((c) => {
-          const t = s(c);
-          return !N.has(t);
+  const { inputField: j } = X({ isInputOnly: !1 }), w = y(
+    (h) => {
+      m && x(
+        m.filter((o) => {
+          const s = i(o);
+          return !h.has(s);
         })
       );
     },
-    [s, i, f]
-  ), k = (N) => {
-    (N.key === "ArrowDown" || N.key === "Enter" || N.key === " ") && (N.preventDefault(), j(!0));
+    [i, x, m]
+  ), S = (h) => {
+    (h.key === "ArrowDown" || h.key === "Enter" || h.key === " ") && (h.preventDefault(), N(!0));
   };
-  return /* @__PURE__ */ r.jsx(pr, { children: ({ isFocusWithin: N }) => /* @__PURE__ */ r.jsx(
-    M,
+  return /* @__PURE__ */ r.jsx(mr, { children: ({ isFocusWithin: h }) => /* @__PURE__ */ r.jsx(
+    sr,
     {
-      className: ({ isFocused: c, isHovered: t }) => h({
-        fullWidth: p,
-        isDisabled: o,
-        isHovered: t,
-        isFocused: c || N,
-        isInvalid: m,
+      className: ({ isFocused: o, isHovered: s }) => j({
+        fullWidth: t,
+        isDisabled: f,
+        isHovered: s,
+        isFocused: o || h,
+        isInvalid: u,
         hasEndSlot: !0,
-        className: C(
-          t && !m && !o && !c ? "border-hover" : "",
+        className: tr(
+          s && !u && !f && !o ? "border-hover" : "",
           "items-start",
           "py-[0.4375rem]"
         )
       }),
-      onKeyDown: (c) => k(c),
-      onPress: () => j(!0),
-      isDisabled: o,
+      onKeyDown: (o) => S(o),
+      onPress: () => N(!0),
+      isDisabled: f,
+      "aria-label": l,
       children: /* @__PURE__ */ r.jsxs("div", { className: "flex w-full outline-none", children: [
-        /* @__PURE__ */ r.jsx("div", { className: "grow text-left", children: f && f.length ? /* @__PURE__ */ r.jsx(
-          fr,
+        /* @__PURE__ */ r.jsx("div", { className: "grow text-left", children: m && m.length ? /* @__PURE__ */ r.jsx(
+          vr,
           {
-            label: u ?? "Selected items",
+            label: p ?? "Selected items",
             className: "-m-1.5 -mt-[0.3125rem]",
-            onRemove: o ? void 0 : v,
-            children: f.map((c) => /* @__PURE__ */ r.jsx(xr, { id: s(c), isDisabled: o, children: e(c) }, s(c)))
+            onRemove: f ? void 0 : w,
+            children: m.map((o) => /* @__PURE__ */ r.jsx(wr, { id: i(o), isDisabled: f, children: c(o) }, i(o)))
           }
-        ) : /* @__PURE__ */ r.jsx(or, { color: "secondary", children: y }) }),
-        /* @__PURE__ */ r.jsx(H, { name: "chevron-up-down", className: "h-4 w-4 min-w-4" })
+        ) : /* @__PURE__ */ r.jsx(pr, { color: "secondary", children: v }) }),
+        /* @__PURE__ */ r.jsx(M, { name: "chevron-up-down", className: "h-4 w-4 min-w-4" })
       ] })
     }
   ) });
-}, cr = ({
-  getItemId: p,
-  name: s,
-  value: e
-}) => s ? Array.isArray(e) ? e.map((o) => /* @__PURE__ */ r.jsx("input", { type: "hidden", name: s, value: p(o) }, p(o))) : e ? /* @__PURE__ */ r.jsx("input", { type: "hidden", name: s, value: p(e) }) : null : null, st = ({
-  defaultValue: p,
-  description: s,
-  disableClearLogic: e,
-  disabledItemIdKeys: o,
-  errorMessage: m,
-  fullWidth: u = !0,
-  getItemId: i,
-  getLabel: y,
-  hideHintLabel: j,
-  hideInputFooter: f,
-  hideInputHeader: h,
-  isDisabled: v,
-  isInvalid: k,
-  isRequired: N,
-  items: c,
-  label: t,
-  name: w,
-  onChange: x,
-  outerEndSlot: S,
-  outerStartSlot: $,
-  placeholder: n,
-  placement: l,
-  renderCustomElementInValueButton: D,
-  selectRenderElements: a,
-  value: P
+}, yr = ({
+  getItemId: l,
+  name: t,
+  value: i
+}) => t ? Array.isArray(i) ? i.map((c) => /* @__PURE__ */ r.jsx("input", { type: "hidden", name: t, value: l(c) }, l(c))) : i ? /* @__PURE__ */ r.jsx("input", { type: "hidden", name: t, value: l(i) }) : null : null, us = ({
+  "aria-label": l,
+  defaultValue: t,
+  description: i,
+  disableClearLogic: c,
+  disabledItemIdKeys: f,
+  errorMessage: u,
+  fullWidth: p = !0,
+  getItemId: x,
+  getLabel: v,
+  hideHintLabel: N,
+  hideInputFooter: m,
+  hideInputHeader: j,
+  isDisabled: w,
+  isInvalid: S,
+  isRequired: h,
+  items: o,
+  label: s,
+  name: a,
+  onChange: D,
+  outerEndSlot: d,
+  outerStartSlot: n,
+  placeholder: e,
+  placement: k,
+  renderCustomElementInValueButton: $,
+  selectRenderElements: P,
+  value: G
 }) => {
-  const { isDisabled: X } = K(g), [Y, F] = E(!1), Z = v || X, [V, G] = E(P ?? p), T = O(
-    () => tr({ hideHintLabel: j, hideInputHeader: h, label: t }),
-    [j, h, t]
-  ), U = O(
-    () => sr({ description: s, errorMessage: m, hideInputFooter: f }),
-    [s, m, f]
-  ), { outerSlot: L, outerSlotsWrapper: z, wrapper: _ } = Q({
-    hasInputHeader: T,
-    hasLabel: !!t
-  }), R = J(null), { direction: q } = nr(), W = A(
-    (b) => {
-      G(b), x == null || x(b), F(!1);
+  const { isDisabled: Y } = g(nr), [Z, E] = W(!1), _ = w || Y, [L, O] = W(G ?? t), z = U(
+    () => lr({ hideHintLabel: N, hideInputHeader: j, label: s }),
+    [N, j, s]
+  ), H = U(
+    () => er({ description: i, errorMessage: u, hideInputFooter: m }),
+    [i, u, m]
+  ), { outerSlot: J, outerSlotsWrapper: Q, wrapper: q } = X({
+    hasInputHeader: z,
+    hasLabel: !!s
+  }), R = V(null), { direction: T } = ar(), A = y(
+    (F) => {
+      O(F), D == null || D(F), E(!1);
     },
-    [x]
+    [D]
   );
-  B(() => {
-    G(P ?? p);
-  }, [p, P]);
-  const d = P ?? V;
-  return /* @__PURE__ */ r.jsxs("div", { children: [
-    /* @__PURE__ */ r.jsx(cr, { name: w, value: d, getItemId: i }),
-    /* @__PURE__ */ r.jsxs("div", { className: z(), children: [
-      $ ? /* @__PURE__ */ r.jsx("div", { className: L(), children: $ }) : null,
-      /* @__PURE__ */ r.jsxs("div", { className: _({ fullWidth: u }), children: [
-        T ? /* @__PURE__ */ r.jsx(I, { label: t, hideHintLabel: j, isRequired: N }) : null,
-        /* @__PURE__ */ r.jsx("div", { ref: R, children: /* @__PURE__ */ r.jsx(
-          Nr,
+  C(() => {
+    O(G ?? t);
+  }, [t, G]);
+  const b = G ?? L;
+  return /* @__PURE__ */ r.jsx(
+    fr,
+    {
+      name: a,
+      isRequired: h,
+      value: b ? x(b).toString() : void 0,
+      onChange: (F) => {
+        A(o.find((B) => x(B).toString() === F));
+      },
+      children: ({ isInvalid: F }) => /* @__PURE__ */ r.jsxs(I, { values: [[rr, { slot: null }]], children: [
+        /* @__PURE__ */ r.jsx(
+          or,
           {
-            fullWidth: u,
-            isDisabled: Z,
-            disableClearLogic: e,
-            isInvalid: k || !!m,
-            placeholder: n,
-            value: d,
-            getLabel: y,
-            getItemId: i,
-            label: t,
-            onChange: W,
-            setOpenPopover: F,
-            renderCustomElementInValueButton: D,
-            selectRenderElements: a
+            className: "hidden",
+            value: b ? x(b).toString() : ""
           }
-        ) }),
-        U ? /* @__PURE__ */ r.jsx(rr, { description: s, errorMessage: m }) : null
-      ] }),
-      S ? /* @__PURE__ */ r.jsx("div", { className: L(), children: S }) : null
-    ] }),
-    /* @__PURE__ */ r.jsx(
-      ir,
-      {
-        triggerRef: R,
-        label: `${t} options`,
-        getItemId: i,
-        selectRenderElements: a,
-        items: c,
-        open: Y,
-        disabledItemIdKeys: o,
-        direction: q,
-        setOpenPopover: F,
-        onSingleChange: W,
-        value: d,
-        placement: l
-      }
-    )
-  ] });
-}, nt = ({
-  defaultValue: p,
-  description: s,
-  disableClearLogic: e,
-  disabledItemIdKeys: o,
-  errorMessage: m,
-  fullWidth: u = !0,
-  getItemId: i,
-  getLabel: y,
-  hideHintLabel: j,
-  hideInputFooter: f,
-  hideInputHeader: h,
-  isDisabled: v,
-  isInvalid: k,
-  isRequired: N,
-  items: c,
-  label: t,
-  name: w,
-  onChange: x,
-  outerEndSlot: S,
-  outerStartSlot: $,
-  placeholder: n,
-  placement: l,
-  selectRenderElements: D,
-  value: a
+        ),
+        /* @__PURE__ */ r.jsxs("div", { className: Q(), children: [
+          n ? /* @__PURE__ */ r.jsx("div", { className: J(), children: n }) : null,
+          /* @__PURE__ */ r.jsxs("div", { className: q({ fullWidth: p }), children: [
+            z ? /* @__PURE__ */ r.jsx(cr, { label: s, hideHintLabel: N, isRequired: h }) : null,
+            /* @__PURE__ */ r.jsx("div", { ref: R, children: /* @__PURE__ */ r.jsx(
+              Dr,
+              {
+                fullWidth: p,
+                isDisabled: _,
+                disableClearLogic: c,
+                isInvalid: S || F || !!u,
+                placeholder: e,
+                value: b,
+                getLabel: v,
+                getItemId: x,
+                label: s,
+                onChange: A,
+                setOpenPopover: E,
+                renderCustomElementInValueButton: $,
+                selectRenderElements: P,
+                "aria-label": l
+              }
+            ) }),
+            H ? /* @__PURE__ */ r.jsx(ir, { description: i, errorMessage: u }) : null
+          ] }),
+          d ? /* @__PURE__ */ r.jsx("div", { className: J(), children: d }) : null
+        ] }),
+        /* @__PURE__ */ r.jsx(
+          ur,
+          {
+            triggerRef: R,
+            label: `${s} options`,
+            getItemId: x,
+            selectRenderElements: P,
+            items: o,
+            open: Z,
+            disabledItemIdKeys: f,
+            direction: T,
+            setOpenPopover: E,
+            onSingleChange: A,
+            value: b,
+            placement: k
+          }
+        )
+      ] })
+    }
+  );
+}, fs = ({
+  "aria-label": l,
+  defaultValue: t,
+  description: i,
+  disableClearLogic: c,
+  disabledItemIdKeys: f,
+  errorMessage: u,
+  fullWidth: p = !0,
+  getItemId: x,
+  getLabel: v,
+  hideHintLabel: N,
+  hideInputFooter: m,
+  hideInputHeader: j,
+  isDisabled: w,
+  isInvalid: S,
+  isRequired: h,
+  items: o,
+  label: s,
+  name: a,
+  onChange: D,
+  outerEndSlot: d,
+  outerStartSlot: n,
+  placeholder: e,
+  placement: k,
+  selectRenderElements: $,
+  value: P
 }) => {
-  const { isDisabled: P } = K(g), X = v || P, [Y, F] = E(!1), [Z, V] = E(a ?? p), G = J(null), { direction: T } = nr(), U = O(
-    () => tr({ hideHintLabel: j, hideInputHeader: h, label: t }),
-    [j, h, t]
-  ), L = O(
-    () => sr({ description: s, errorMessage: m, hideInputFooter: f }),
-    [s, m, f]
-  ), { outerSlot: z, outerSlotsWrapper: _, wrapper: R } = Q({
-    hasInputHeader: U,
-    hasLabel: !!t
-  }), q = A(
-    (d) => {
-      V(d), x == null || x(d);
+  const { isDisabled: G } = g(nr), Y = w || G, [Z, E] = W(!1), [_, L] = W(P ?? t), O = V(null), { direction: z } = ar(), H = U(
+    () => lr({ hideHintLabel: N, hideInputHeader: j, label: s }),
+    [N, j, s]
+  ), J = U(
+    () => er({ description: i, errorMessage: u, hideInputFooter: m }),
+    [i, u, m]
+  ), { outerSlot: Q, outerSlotsWrapper: q, wrapper: R } = X({
+    hasInputHeader: H,
+    hasLabel: !!s
+  }), T = y(
+    (b) => {
+      L(b), D == null || D(b);
     },
-    [x]
+    [D]
   );
-  B(() => {
-    V(a ?? p);
-  }, [p, a]);
-  const W = a ?? Z;
-  return /* @__PURE__ */ r.jsxs("div", { children: [
-    /* @__PURE__ */ r.jsx(cr, { name: w, value: W, getItemId: i }),
-    /* @__PURE__ */ r.jsxs("div", { className: _(), children: [
-      $ ? /* @__PURE__ */ r.jsx("div", { className: z(), children: $ }) : null,
-      /* @__PURE__ */ r.jsxs("div", { className: R({ fullWidth: u }), children: [
-        U ? /* @__PURE__ */ r.jsx(I, { label: t, hideHintLabel: j, isRequired: N }) : null,
-        /* @__PURE__ */ r.jsx("div", { ref: G, children: /* @__PURE__ */ r.jsx(
-          wr,
+  C(() => {
+    L(P ?? t);
+  }, [t, P]);
+  const A = P ?? _;
+  return /* @__PURE__ */ r.jsx(
+    xr,
+    {
+      value: A == null ? void 0 : A.map((b) => x(b).toString()),
+      onChange: (b) => {
+        T(
+          b == null ? void 0 : b.map((F) => o.find((B) => x(B).toString() === F))
+        );
+      },
+      isRequired: h,
+      children: ({ isInvalid: b }) => /* @__PURE__ */ r.jsxs(I, { values: [[rr, { slot: null }]], children: [
+        /* @__PURE__ */ r.jsxs("div", { className: q(), children: [
+          n ? /* @__PURE__ */ r.jsx("div", { className: Q(), children: n }) : null,
+          /* @__PURE__ */ r.jsx(yr, { name: a, value: A, getItemId: x }),
+          /* @__PURE__ */ r.jsxs("div", { className: R({ fullWidth: p }), children: [
+            H ? /* @__PURE__ */ r.jsx(
+              cr,
+              {
+                label: s,
+                hideHintLabel: N,
+                isRequired: h
+              }
+            ) : null,
+            /* @__PURE__ */ r.jsx("div", { ref: O, children: /* @__PURE__ */ r.jsx(
+              Ar,
+              {
+                fullWidth: p,
+                isDisabled: Y,
+                isInvalid: S || b,
+                placeholder: e,
+                value: A,
+                onChange: T,
+                getItemId: x,
+                getLabel: v,
+                label: s,
+                disableClearLogic: c,
+                setOpenPopover: E,
+                selectRenderElements: $,
+                "aria-label": l
+              }
+            ) }),
+            J ? /* @__PURE__ */ r.jsx(ir, { description: i, errorMessage: u }) : null
+          ] }),
+          d ? /* @__PURE__ */ r.jsx("div", { className: Q(), children: d }) : null
+        ] }),
+        /* @__PURE__ */ r.jsx(
+          ur,
           {
-            fullWidth: u,
-            isDisabled: X,
-            isInvalid: k || !!m,
-            placeholder: n,
-            value: W,
-            onChange: q,
-            getItemId: i,
-            getLabel: y,
-            label: t,
-            disableClearLogic: e,
-            setOpenPopover: F,
-            selectRenderElements: D
+            label: `${s} options`,
+            triggerRef: O,
+            items: o,
+            open: Z,
+            getItemId: x,
+            selectRenderElements: $,
+            disabledItemIdKeys: f,
+            direction: z,
+            setOpenPopover: E,
+            onMultiChange: T,
+            placement: k,
+            value: A
           }
-        ) }),
-        L ? /* @__PURE__ */ r.jsx(rr, { description: s, errorMessage: m }) : null
-      ] }),
-      S ? /* @__PURE__ */ r.jsx("div", { className: z(), children: S }) : null
-    ] }),
-    /* @__PURE__ */ r.jsx(
-      ir,
-      {
-        label: `${t} options`,
-        triggerRef: G,
-        items: c,
-        open: Y,
-        getItemId: i,
-        selectRenderElements: D,
-        disabledItemIdKeys: o,
-        direction: T,
-        setOpenPopover: F,
-        onMultiChange: q,
-        placement: l,
-        value: W
-      }
-    )
-  ] });
+        )
+      ] })
+    }
+  );
 };
 export {
-  nt as MultiSelect,
-  st as Select
+  fs as MultiSelect,
+  us as Select
 };