prometeo-design-system 4.0.0 → 4.1.0

package/dist/Select.es.js

@@ -1,6 +1,6 @@
-import { j as s } from "./jsx-runtime-GkKLlHH4.js";
-import { c } from "./cn-B6yFEsav.js";
-import we, { memo as V, useState as Ne, useRef as ae, useMemo as te, useCallback as _, useEffect as pe, useImperativeHandle as Qe } from "react";
+import { j as a } from "./jsx-runtime-GkKLlHH4.js";
+import { c as d } from "./cn-B6yFEsav.js";
+import we, { memo as J, useState as Ne, useRef as ae, useMemo as te, useCallback as _, useEffect as he, useImperativeHandle as Qe } from "react";
 import Xe from "./Spinner.es.js";
 import { createPortal as Ye } from "react-dom";
 import { u as Ze } from "./useDragScroll-CHN9OMwn.js";
@@ -12,7 +12,7 @@ import { g as k, h as Fe } from "./utils-X4-h3cum.js";
 import lt from "./Input.es.js";
 import Ue from "./Skeleton.es.js";
 import { Cancel as at } from "./Icons/Cancel.es.js";
-import { ChevronDown as Re } from "./Icons/ChevronDown.es.js";
+import { ChevronDown as Ve } from "./Icons/ChevronDown.es.js";
 import { Search as ot } from "./Icons/Search.es.js";
 const st = {
   default: {
@@ -30,108 +30,108 @@ const st = {
 }, qe = {
   icon: " text-neutral-default-disabled",
   container: " border-neutral-strong-default text-neutral-default-disabled"
-}, Ve = ({ id: e, label: n, onRemove: f, className: b, disabled: h, variant: y = "default", tabIndex: p }) => /* @__PURE__ */ s.jsxs(
+}, Re = ({ id: e, label: n, onRemove: h, className: y, disabled: g, variant: v = "default", tabIndex: b }) => /* @__PURE__ */ a.jsxs(
   "div",
   {
-    tabIndex: p,
-    className: c(
+    tabIndex: b,
+    className: d(
       "inline-flex max-w-[calc(50%-0.25rem)] items-center gap-1 px-2 py-1 bg-inherit text-xs rounded-lg border h-[30px]",
-      st[y].container,
-      h && qe.container
+      st[v].container,
+      g && qe.container
     ),
     children: [
-      /* @__PURE__ */ s.jsx("span", { className: "truncate w-max ", children: n }),
-      f && /* @__PURE__ */ s.jsx(
+      /* @__PURE__ */ a.jsx("span", { className: "truncate w-max ", children: n }),
+      h && /* @__PURE__ */ a.jsx(
         "button",
         {
           onMouseDown: (H) => {
-            h || (H.stopPropagation(), H.preventDefault(), f?.(e));
+            g || (H.stopPropagation(), H.preventDefault(), h?.(e));
           },
-          className: c(
+          className: d(
             "shrink-0 p-0.5 transition-all duration-200 hover:text-neutral-default-hover cursor-pointer z-50 text-neutral-default-default hover:scale-105",
-            h && "cursor-default hover:scale-100",
-            b
+            g && "cursor-default hover:scale-100",
+            y
           ),
           type: "button",
-          tabIndex: p,
-          children: /* @__PURE__ */ s.jsx(nt, { size: 18, className: c(h && qe.icon) })
+          tabIndex: b,
+          children: /* @__PURE__ */ a.jsx(nt, { size: 18, className: d(g && qe.icon) })
         }
       )
     ]
   }
 );
-Ve.displayName = "Chip";
-const it = V(Ve), ut = (e) => {
-  const n = [], f = (b) => {
-    b.forEach((h) => {
-      const y = h, p = typeof y == "object" ? y?.options : [];
-      Array.isArray(p) && p.length > 0 ? f(p) : n.push(h);
+Re.displayName = "Chip";
+const it = J(Re), ut = (e) => {
+  const n = [], h = (y) => {
+    y.forEach((g) => {
+      const v = g, b = typeof v == "object" ? v?.options : [];
+      Array.isArray(b) && b.length > 0 ? h(b) : n.push(g);
     });
   };
-  return f(e), n;
-}, _e = {
+  return h(e), n;
+}, We = {
   default: {
     container: "",
-    input: c(
+    input: d(
       "border-neutral-default-default text-neutral-default-default",
       "focus:ring-primary-default-default focus:ring-[1px] focus:border-primary-default-default ",
       "hover:border-primary-default-default"
     ),
-    label: c(
+    label: d(
       "text-neutral-medium-default",
       "peer-focus:text-primary-default-default"
     ),
-    icon: c(
+    icon: d(
       "text-neutral-medium-default",
       "peer-focus:text-primary-default-default"
     )
   },
   error: {
     container: "",
-    input: c(
+    input: d(
       "border-error-default-default text-neutral-default-default hover:border-error-default-hover",
       "focus:border-error-default focus:border-2",
       "focus:ring-0 focus:ring-error-default/20"
     ),
-    label: c("text-error-light", "peer-focus:text-error-light"),
-    icon: c("text-error-medium-default", "peer-focus:text-error-light")
+    label: d("text-error-light", "peer-focus:text-error-light"),
+    icon: d("text-error-medium-default", "peer-focus:text-error-light")
   },
   success: {
     container: "",
-    input: c(
+    input: d(
       "border-success-default-default text-neutral-default-default",
       "focus:border-success-default focus:border-2",
       "focus:ring-0 focus:ring-success-default/20"
     ),
-    label: c("text-success", "peer-focus:text-success-light"),
-    icon: c("text-success-medium-default", "peer-focus:text-success-light")
+    label: d("text-success", "peer-focus:text-success-light"),
+    icon: d("text-success-medium-default", "peer-focus:text-success-light")
   }
-}, We = {
-  input: c(
+}, Be = {
+  input: d(
     "border-neutral-strong-default text-neutral-default-default pointer-events-none",
     "focus:ring-0 focus:border-primary-default-disabled ",
     "hover:border-neutral-default-disabled"
   ),
-  label: c(
+  label: d(
     "text-neutral-medium-disabled",
     "peer-focus:text-primary-default-default"
   ),
-  icon: c(
+  icon: d(
     "text-neutral-medium-disabled",
     "peer-focus:text-primary-default-default"
   )
 };
 function ct(e) {
-  const [n, f] = Ne(!1), [b, h] = Ne([]), [y, p] = Ne(""), H = ae(null), m = ae(null), T = ae(null), W = ae(null), B = ae(
+  const [n, h] = Ne(!1), [y, g] = Ne([]), [v, b] = Ne(""), H = ae(null), p = ae(null), P = ae(null), W = ae(null), B = ae(
     () => {
     }
-  ), je = ae(null), ge = ae(/* @__PURE__ */ new Set()), {
-    id: z,
+  ), je = ae(null), pe = ae(/* @__PURE__ */ new Set()), {
+    id: G,
     name: w,
-    label: be,
-    height: xe,
-    options: J,
-    controls: ye,
+    label: ge,
+    height: be,
+    options: Q,
+    controls: ne,
     className: K,
     placeholder: E,
     optionValue: N,
@@ -139,33 +139,33 @@ function ct(e) {
     renderOption: F,
     renderOptionGroupHeader: se,
     renderSelection: De,
-    renderOptionContext: Ie,
+    renderOptionContext: ze,
     buttonClassName: He,
-    dropdownClassName: ne,
+    dropdownClassName: re,
     containerClassName: U,
     dropdownOptions: j,
-    helperComponent: Q,
-    errorComponent: ve,
-    onRemoveOption: ke,
+    helperComponent: X,
+    errorComponent: xe,
+    onRemoveOption: Oe,
     onOptionClick: q,
-    onClose: Ce,
-    onClear: ie,
-    disabled: X = !1,
-    overflow: Ke = "wrap",
-    variant: P = "default",
-    isLoading: ue = !1,
-    attachToParent: ze = !1,
-    displayMode: Se = "compact",
-    labelVariant: re = "default",
-    disableOpenOnFocus: Ae = !1,
-    emptyMessage: Ee = "No hay opciones disponibles"
-  } = e, { ref: Oe } = et(), { bind: Y, ref: Me } = Ze({
+    onClose: ke,
+    onClear: ye,
+    disabled: $ = !1,
+    overflow: Ae = "wrap",
+    variant: ve = "default",
+    isLoading: le = !1,
+    attachToParent: ie = !1,
+    displayMode: Ee = "compact",
+    labelVariant: Y = "default",
+    disableOpenOnFocus: Me = !1,
+    emptyMessage: Te = "No hay opciones disponibles"
+  } = e, { ref: Le } = et(), { bind: V, ref: Pe } = Ze({
     axis: "x",
     cursor: { idle: "default", dragging: "grabbing" }
-  }), ce = e.multiple ? Array.isArray(e.value) && e.value.length > 0 && e.value.every((t) => t != null && t !== "") : e.value !== void 0 && e.value !== null && e.value !== "", Le = {}, Te = te(() => re === "static" && E ? E : "", [re, E]), Ge = te(
-    () => j?.controledSearchValue || y,
-    [j?.controledSearchValue, y]
-  ), Pe = () => {
+  }), ue = e.multiple ? Array.isArray(e.value) && e.value.length > 0 && e.value.every((t) => t != null && t !== "") : e.value !== void 0 && e.value !== null && e.value !== "", $e = {}, Ge = te(() => Y === "static" && E ? E : "", [Y, E]), _e = te(
+    () => j?.controledSearchValue || v,
+    [j?.controledSearchValue, v]
+  ), Ie = () => {
     const t = {
       static: {
         active: "relative prometeo-fonts-label-large",
@@ -175,303 +175,303 @@ function ct(e) {
         active: "absolute top-0 -translate-y-1/2 left-3  px-1 prometeo-fonts-body-small",
         default: "absolute top-1/2 -translate-y-1/2 "
       }
-    }, o = n || ce ? "active" : "default";
-    return t[re][o];
-  }, O = _(
+    }, o = n || ue ? "active" : "default";
+    return t[Y][o];
+  }, L = _(
     (t) => ({
       id: k(t, N),
       value: k(t, N),
       label: k(t, oe)
     }),
     [N, oe]
-  ), R = te(() => ut(J), [J]), de = te(
-    () => R.map(O),
-    [R, O]
-  ), r = te(() => {
+  ), R = te(() => ut(Q), [Q]), Ce = te(
+    () => R.map(L),
+    [R, L]
+  ), ce = te(() => {
     const t = [];
     if (e.multiple)
       e.value?.forEach((o) => {
-        const l = R?.find(
-          (d) => k(d, N) === o
+        const c = R?.find(
+          (i) => k(i, N) === o
         );
-        l && t.push(l);
+        c && t.push(c);
       });
     else {
       const o = R?.find(
-        (l) => k(l, N) === e.value
+        (c) => k(c, N) === e.value
       );
       o && t.push(o);
     }
     return t;
-  }, [e.value, N, R, e.multiple]), a = te(
-    () => r.map(O),
-    [r, O]
-  ), i = te(
-    () => new Set(a.map((t) => t.id)),
-    [a]
-  ), u = te(() => {
+  }, [e.value, N, R, e.multiple]), r = te(
+    () => ce.map(L),
+    [ce, L]
+  ), l = te(
+    () => new Set(r.map((t) => t.id)),
+    [r]
+  ), s = te(() => {
     const t = [];
-    return J.forEach((o, l) => {
-      const d = o, S = typeof d == "object" ? d?.options : [];
-      if (Array.isArray(S) && S.length > 0) {
-        const L = d.label, G = k(o, N), ee = `__group-${String(G ?? l)}`, me = {
-          id: ee,
-          value: ee,
-          label: typeof L == "string" ? L : String(G ?? `Grupo ${l + 1}`),
+    return Q.forEach((o, c) => {
+      const i = o, f = typeof i == "object" ? i?.options : [];
+      if (Array.isArray(f) && f.length > 0) {
+        const D = i.label, M = k(o, N), I = `__group-${String(M ?? c)}`, fe = {
+          id: I,
+          value: I,
+          label: typeof D == "string" ? D : String(M ?? `Grupo ${c + 1}`),
           isGroupHeader: !0,
-          groupLabelNode: L,
+          groupLabelNode: D,
           originalOption: o,
           groupData: {
-            groupOptions: S
+            groupOptions: f
           }
         };
-        t.push(me), S.forEach((he) => {
-          F ? t.push(he) : t.push(O(he));
+        t.push(fe), f.forEach((me) => {
+          F ? t.push(me) : t.push(L(me));
         });
       } else
-        F ? t.push(o) : t.push(O(o));
+        F ? t.push(o) : t.push(L(o));
     }), t;
-  }, [J, N, F, O]), v = _(
+  }, [Q, N, F, L]), u = _(
     (t, o) => {
       if (!t || t.length === 0) return;
-      const l = t.map(
-        (x) => O(x)
+      const c = t.map(
+        (m) => L(m)
       );
       if (!e.multiple) {
-        const x = l[0];
-        if (!x) return;
-        const C = i.has(x.id), M = o ?? "toggle";
-        let $e;
-        M === "select" || M === "toggle" && !C ? $e = x : $e = void 0, e.onChange?.($e, w);
+        const m = c[0];
+        if (!m) return;
+        const z = l.has(m.id), A = o ?? "toggle";
+        let T;
+        A === "select" || A === "toggle" && !z ? T = m : T = void 0, e.onChange?.(T, w);
         return;
       }
-      const d = e.value || [], S = [];
-      d.forEach((x) => {
-        const C = de.find((M) => M.value === x);
-        C && S.push(C);
+      const i = e.value || [], f = [];
+      i.forEach((m) => {
+        const z = Ce.find((A) => A.value === m);
+        z && f.push(z);
       });
-      const L = new Set(S.map((x) => x.id)), G = new Set(l.map((x) => x.id)), ee = l.every(
-        (x) => L.has(x.id)
-      ), me = o ?? "toggle", he = me === "select" || me === "toggle" && !ee;
-      let I;
-      if (!he)
-        I = S.filter((x) => !G.has(x.id));
+      const D = new Set(f.map((m) => m.id)), M = new Set(c.map((m) => m.id)), I = c.every(
+        (m) => D.has(m.id)
+      ), fe = o ?? "toggle", me = fe === "select" || fe === "toggle" && !I;
+      let Se;
+      if (!me)
+        Se = f.filter((m) => !M.has(m.id));
       else {
-        const x = new Map(
-          S.map((C) => [C.id, C])
+        const m = new Map(
+          f.map((z) => [z.id, z])
         );
-        l.forEach((C) => {
-          x.set(C.id, C);
-        }), I = Array.from(x.values());
+        c.forEach((z) => {
+          m.set(z.id, z);
+        }), Se = Array.from(m.values());
       }
-      e.onChange?.(I, w);
+      e.onChange?.(Se, w);
     },
     [
       e.multiple,
       e.value,
       e.onChange,
-      de,
-      i,
-      O,
+      Ce,
+      l,
+      L,
       w
     ]
-  ), D = _(() => {
-    f((t) => !t);
+  ), C = _(() => {
+    h((t) => !t);
   }, []);
   B.current = (t) => {
     if (!e.multiple)
       e.onChange?.(t, w);
     else {
-      const o = e.value || [], l = [], d = o.includes(t.value);
-      o.forEach((L) => {
-        const G = de.find(
-          (ee) => ee.value === L
+      const o = e.value || [], c = [], i = o.includes(t.value);
+      o.forEach((D) => {
+        const M = Ce.find(
+          (I) => I.value === D
         );
-        G && l.push(G);
+        M && c.push(M);
       });
-      const S = d ? l.filter((L) => L.value !== t.value) : [...l, t];
-      e.onChange?.(S, w);
+      const f = i ? c.filter((D) => D.value !== t.value) : [...c, t];
+      e.onChange?.(f, w);
     }
   };
-  const g = _(
+  const S = _(
     (t, o = !1) => {
-      q?.(t, w), B.current?.(t), o && (f(!1), Ce?.());
+      q?.(t, w), B.current?.(t), o && (h(!1), ke?.());
     },
-    [q, Ce, w]
-  ), A = (t) => {
-    if (t.preventDefault(), t.stopPropagation(), t.target.blur(), ie?.(), e.multiple) {
+    [q, ke, w]
+  ), x = (t) => {
+    if (t.preventDefault(), t.stopPropagation(), t.target.blur(), ye?.(), e.multiple) {
       const o = e.onChange;
       o?.([], w);
     } else {
       const o = e.onChange;
       o?.(void 0, w);
     }
-  }, $ = _(
+  }, O = _(
     (t) => {
       e.multiple || e.onChange?.(void 0, w);
       const o = R.find(
-        (d) => k(d, N) === t
+        (i) => k(i, N) === t
       );
       if (!o) return;
-      const l = O(o);
-      q?.(l, w), B.current?.(l), ke?.(o);
+      const c = L(o);
+      q?.(c, w), B.current?.(c), Oe?.(o);
     },
     [
       q,
-      ke,
+      Oe,
       R,
       w,
       e.multiple,
       e.onChange,
-      O,
+      L,
       N
     ]
   ), Z = _(
     (t) => {
-      $(t);
+      O(t);
     },
-    [$]
+    [O]
   );
-  pe(() => {
+  he(() => {
     if (!n) return;
     const t = (o) => {
-      const l = o.target;
+      const c = o.target;
       if (o.type === "mousedown") {
-        if (H.current?.contains(l) || m.current?.contains(l)) return;
-        f(!1);
+        if (H.current?.contains(c) || p.current?.contains(c)) return;
+        h(!1);
       }
       if (o.type === "scroll") {
-        if (m.current?.contains(l)) return;
-        f(!1);
+        if (p.current?.contains(c)) return;
+        h(!1);
       }
-      o.type === "resize" && f(!1);
+      o.type === "resize" && h(!1);
     };
     return document.addEventListener("mousedown", t), window.addEventListener("scroll", t, !0), window.addEventListener("resize", t, !0), () => {
       document.removeEventListener("mousedown", t), window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", t, !0);
     };
-  }, [n]), pe(() => {
-    ge.current.forEach((t) => {
+  }, [n]), he(() => {
+    pe.current.forEach((t) => {
       try {
         t(n);
       } catch {
       }
     });
   }, [n]), Qe(
-    ye,
+    ne,
     () => ({
       open: () => {
-        f(!0);
+        h(!0);
       },
       close: () => {
-        f(!1);
+        h(!1);
       },
-      toggle: () => f((t) => !t),
-      handleOptionSelect: g,
-      subscribeOpenChange: (t) => (ge.current.add(t), () => {
-        ge.current.delete(t);
+      toggle: () => h((t) => !t),
+      handleOptionSelect: S,
+      subscribeOpenChange: (t) => (pe.current.add(t), () => {
+        pe.current.delete(t);
       }),
-      searchInputRef: T
+      searchInputRef: P
     }),
-    [n, g]
+    [n, S]
   );
-  const fe = (t) => {
-    t.preventDefault(), t.stopPropagation(), t.target.matches(":focus-visible") && !Ae && !n && (f(!0), setTimeout(() => {
-      T.current?.focus();
+  const ee = (t) => {
+    t.preventDefault(), t.stopPropagation(), t.target.matches(":focus-visible") && !Me && !n && (h(!0), setTimeout(() => {
+      P.current?.focus();
     }, 10));
-  }, le = (t) => {
-    t.key === "Tab" && n && f(!1), (t.keyCode === 32 || t.key === "ArrowDown") && (f(!0), setTimeout(() => {
-      T.current?.focus();
+  }, de = (t) => {
+    t.key === "Tab" && n && h(!1), (t.keyCode === 32 || t.key === "ArrowDown") && (h(!0), setTimeout(() => {
+      P.current?.focus();
     }, 10));
   };
-  return /* @__PURE__ */ s.jsxs(
+  return /* @__PURE__ */ a.jsxs(
     "div",
     {
-      className: c("relative bg-inherit select-none w-full", K),
+      className: d("relative bg-inherit select-none w-full", K),
       ref: H,
       draggable: !1,
-      style: Le,
+      style: $e,
       children: [
-        /* @__PURE__ */ s.jsxs("div", { className: c("relative bg-inherit ", U), children: [
-          /* @__PURE__ */ s.jsx(
+        /* @__PURE__ */ a.jsxs("div", { className: d("relative bg-inherit ", U), children: [
+          /* @__PURE__ */ a.jsx(
             "label",
             {
-              htmlFor: z,
-              ref: Oe,
-              className: c(
-                "left-3 pointer-events-none bg-inherit z-10",
-                re === "default" && "transition-all duration-200 ease-in-out",
-                Pe(),
-                ce || n ? _e[P].label : "text-neutral-medium-default",
-                X && We.label
+              htmlFor: G,
+              ref: Le,
+              className: d(
+                "left-3 pointer-events-none bg-inherit z-10 line-clamp-1 max-w-[calc(100%-2.5rem)] ",
+                Y === "default" && "transition-all duration-200 ease-in-out",
+                Ie(),
+                ue || n ? We[ve].label : "text-neutral-medium-default",
+                $ && Be.label
               ),
-              children: be
+              children: ge
             }
           ),
-          /* @__PURE__ */ s.jsxs(
+          /* @__PURE__ */ a.jsxs(
             "div",
             {
-              id: z,
+              id: G,
               tabIndex: 0,
               role: "button",
               ref: W,
-              onFocus: fe,
-              onKeyDown: le,
+              onFocus: ee,
+              onKeyDown: de,
               onClick: (t) => {
-                t.preventDefault(), t.stopPropagation(), D();
+                t.preventDefault(), t.stopPropagation(), C();
               },
-              className: c(
+              className: d(
                 "w-full px-2 text-left border rounded-lg transition-all duration-200 ease-in-out",
                 "flex items-center justify-start bg-inherit ",
                 "focus:outline-none",
-                Se === "chips" && e.multiple && ce ? "min-h-12 py-2 " : !xe && "h-12 min-h-12",
-                _e[P].input,
-                X && We.input,
+                Ee === "chips" && e.multiple && ue ? "min-h-12 py-2 " : !be && "h-12 min-h-12",
+                We[ve].input,
+                $ && Be.input,
                 He
               ),
               children: [
-                /* @__PURE__ */ s.jsx(
+                /* @__PURE__ */ a.jsx(
                   "div",
                   {
-                    className: c(
+                    className: d(
                       "flex-1 overflow-x-auto overflow-y-hidden px-1 prometeo-scrollbar-none "
                     ),
-                    ref: Me,
-                    onPointerUp: Y.onPointerUp,
-                    onPointerDown: Y.onPointerDown,
-                    onPointerMove: Y.onPointerMove,
-                    onPointerLeave: Y.onPointerLeave,
-                    onPointerCancel: Y.onPointerCancel,
-                    onClickCapture: Y.onClickCapture,
+                    ref: Pe,
+                    onPointerUp: V.onPointerUp,
+                    onPointerDown: V.onPointerDown,
+                    onPointerMove: V.onPointerMove,
+                    onPointerLeave: V.onPointerLeave,
+                    onPointerCancel: V.onPointerCancel,
+                    onClickCapture: V.onClickCapture,
                     children: De ? we.createElement(
-                      V(
+                      J(
                         De,
                         (t, o) => t.disabled === o.disabled && t.multiple === o.multiple
                       ),
                       {
-                        disabled: X,
+                        disabled: $,
                         multiple: e.multiple || !1,
                         placeholder: E,
-                        selectedOptions: r,
+                        selectedOptions: ce,
                         onRemoveOption: Z
                       }
-                    ) : /* @__PURE__ */ s.jsx(
+                    ) : /* @__PURE__ */ a.jsx(
                       Je,
                       {
-                        displayMode: Se,
-                        selectedOptions: a,
-                        placeholder: Te,
-                        onRemoveOption: $,
+                        displayMode: Ee,
+                        selectedOptions: r,
+                        placeholder: Ge,
+                        onRemoveOption: O,
                         multiple: e.multiple || !1,
-                        className: c(
-                          Ke === "scroll" ? "flex-nowrap" : "flex-wrap"
+                        className: d(
+                          Ae === "scroll" ? "flex-nowrap" : "flex-wrap"
                         ),
-                        disabled: X
+                        disabled: $
                       }
                     )
                   }
                 ),
-                /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
-                  ue && /* @__PURE__ */ s.jsx(
+                /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-2", children: [
+                  le && /* @__PURE__ */ a.jsx(
                     Xe,
                     {
                       size: "small",
@@ -479,35 +479,35 @@ function ct(e) {
                       className: " opacity-90"
                     }
                   ),
-                  ce && ie && /* @__PURE__ */ s.jsx(
+                  ue && ye && /* @__PURE__ */ a.jsx(
                     "button",
                     {
                       className: "z-100",
                       onClick: (t) => {
-                        t.preventDefault(), t.stopPropagation(), A(t);
+                        t.preventDefault(), t.stopPropagation(), x(t);
                       },
                       type: "button",
                       tabIndex: -1,
-                      children: /* @__PURE__ */ s.jsx(
+                      children: /* @__PURE__ */ a.jsx(
                         at,
                         {
                           size: 20,
-                          className: c(
+                          className: d(
                             " cursor-pointer transition-all",
-                            _e[P].icon
+                            We[ve].icon
                           )
                         }
                       )
                     }
                   ),
-                  /* @__PURE__ */ s.jsx(
-                    Re,
+                  /* @__PURE__ */ a.jsx(
+                    Ve,
                     {
                       size: 20,
-                      className: c(
-                        "transition-transform text-neutral-default-default",
+                      className: d(
+                        "transition-transform text-neutral-default-default min-w-max",
                         n ? "rotate-180" : "",
-                        X && We.icon
+                        $ && Be.icon
                       )
                     }
                   )
@@ -516,35 +516,35 @@ function ct(e) {
             }
           )
         ] }),
-        n && /* @__PURE__ */ s.jsx(
+        n && /* @__PURE__ */ a.jsx(
           mt,
           {
-            label: be,
+            label: ge,
             isOpen: n,
-            disabled: X,
+            disabled: $,
             optionValue: N,
             optionLabel: oe,
-            emptyMessage: Ee,
-            labelVariant: re,
+            emptyMessage: Te,
+            labelVariant: Y,
             renderOption: F,
             renderOptionGroupHeader: se,
-            attachToParent: ze,
-            filteredOptions: b,
+            attachToParent: ie,
+            filteredOptions: y,
             multiple: e.multiple || !1,
-            dropdownClassName: ne,
-            selectedOptionsIds: i,
-            setFilteredOptions: h,
-            renderOptionContext: Ie,
-            options: u,
+            dropdownClassName: re,
+            selectedOptionsIds: l,
+            setFilteredOptions: g,
+            renderOptionContext: ze,
+            options: s,
             selectRef: H,
-            dropdownRef: m,
+            dropdownRef: p,
             selectButtonRef: W,
             helperComponentRef: je,
-            onOptionClick: g,
-            onCloseDropdown: () => f(!1),
-            searchValue: Ge,
-            setSearchValue: p,
-            searchInputRef: T,
+            onOptionClick: S,
+            onCloseDropdown: () => h(!1),
+            searchValue: _e,
+            setSearchValue: b,
+            searchInputRef: P,
             isLoading: j?.isLoading,
             onSearchClear: j?.onSearchClear,
             hideSearchBar: j?.hideSearchBar,
@@ -555,44 +555,45 @@ function ct(e) {
             loadingComponent: j?.loadingComponent,
             inputProps: j?.inputProps,
             enableGroupToggle: j?.enableGroupToggle,
-            onGroupSelectChange: v
+            focusSearchInputOnOpen: j?.focusSearchInputOnOpen,
+            onGroupSelectChange: u
           }
         ),
-        (ve || Q) && /* @__PURE__ */ s.jsx("div", { className: "min-h-6", children: /* @__PURE__ */ s.jsx(
+        (xe || X) && /* @__PURE__ */ a.jsx("div", { className: "min-h-6", children: /* @__PURE__ */ a.jsx(
           tt,
           {
             ref: je,
-            variant: P,
-            className: "absolute bottom-0 h-5 overflow-visible ",
-            children: ve || Q
+            variant: ve,
+            className: "absolute bottom-0 h-5 overflow-visible line-clamp-1!",
+            children: xe || X
           }
         ) })
       ]
     }
   );
 }
-const dt = V(ct, (e, n) => e.value === n.value && e.options === n.options && e.isLoading === n.isLoading && e.disabled === n.disabled && e.errorComponent === n.errorComponent && e.helperComponent === n.helperComponent && e.variant === n.variant && e.label === n.label && e.id === n.id && e.name === n.name && e.placeholder === n.placeholder && e.renderOptionContext === n.renderOptionContext && e.dropdownOptions?.controledSearchValue === n.dropdownOptions?.controledSearchValue && e.dropdownOptions?.isLoading === n.dropdownOptions?.isLoading), Ot = dt;
+const dt = J(ct, (e, n) => e.value === n.value && e.options === n.options && e.isLoading === n.isLoading && e.disabled === n.disabled && e.errorComponent === n.errorComponent && e.helperComponent === n.helperComponent && e.variant === n.variant && e.label === n.label && e.id === n.id && e.name === n.name && e.placeholder === n.placeholder && e.renderOptionContext === n.renderOptionContext && e.dropdownOptions?.controledSearchValue === n.dropdownOptions?.controledSearchValue && e.dropdownOptions?.isLoading === n.dropdownOptions?.isLoading), Et = dt;
 function ft({
   footer: e,
   isOpen: n,
-  label: f,
-  options: b,
-  multiple: h,
-  disabled: y,
-  selectRef: p,
+  label: h,
+  options: y,
+  multiple: g,
+  disabled: v,
+  selectRef: b,
   inputProps: H,
-  dropdownRef: m,
-  optionLabel: T,
+  dropdownRef: p,
+  optionLabel: P,
   optionValue: W,
   searchValue: B,
   labelVariant: je,
-  emptyMessage: ge,
-  renderOption: z,
+  emptyMessage: pe,
+  renderOption: G,
   renderOptionContext: w,
-  renderOptionGroupHeader: be,
-  onOptionClick: xe,
-  onSearchClear: J,
-  searchInputRef: ye,
+  renderOptionGroupHeader: ge,
+  onOptionClick: be,
+  onSearchClear: Q,
+  searchInputRef: ne,
   setSearchValue: K,
   dropdownHeight: E,
   attachToParent: N,
@@ -600,165 +601,166 @@ function ft({
   selectButtonRef: F,
   onCloseDropdown: se,
   loadingComponent: De,
-  dropdownClassName: Ie,
+  dropdownClassName: ze,
   helperComponentRef: He,
-  selectedOptionsIds: ne,
+  selectedOptionsIds: re,
   setFilteredOptions: U,
   onSearchValueChange: j,
-  isLoading: Q = !1,
-  hideSearchBar: ve = !1,
-  inputSearchPlaceholder: ke = "Buscar opciones",
+  isLoading: X = !1,
+  hideSearchBar: xe = !1,
+  inputSearchPlaceholder: Oe = "Buscar opciones",
   enableGroupToggle: q = !0,
-  onGroupSelectChange: Ce
+  focusSearchInputOnOpen: ke = !1,
+  onGroupSelectChange: ye
 }) {
-  const ie = e ? 380 : 320, X = je === "static" ? f !== "" ? -20 : 4 : 7, P = _(() => E ? E.endsWith("px") ? Number(E.replace("px", "")) : E.endsWith("vh") ? window.innerHeight * Number(E.replace("vh", "")) / 100 : E.endsWith("%") ? window.innerHeight * Number(E.replace("%", "")) / 100 : ie : ie, [E, ie])(), [ue, ze] = Ne({
+  const $ = e ? 380 : 320, Ae = je === "static" ? h !== "" ? -20 : 4 : 7, le = _(() => E ? E.endsWith("px") ? Number(E.replace("px", "")) : E.endsWith("vh") ? window.innerHeight * Number(E.replace("vh", "")) / 100 : E.endsWith("%") ? window.innerHeight * Number(E.replace("%", "")) / 100 : $ : $, [E, $])(), [ie, Ee] = Ne({
     direction: "down",
-    height: P
-  }), [Se, re] = Ne(
+    height: le
+  }), [Y, Me] = Ne(
     () => /* @__PURE__ */ new Set()
-  ), Ae = _(
-    (r) => !Se.has(r),
-    [Se]
-  ), Ee = _(
-    (r, a) => {
-      re((i) => {
-        const u = new Set(i), v = u.has(r);
-        return (a === void 0 ? !v : !a) ? u.add(r) : u.delete(r), u;
+  ), Te = _(
+    (r) => !Y.has(r),
+    [Y]
+  ), Le = _(
+    (r, l) => {
+      Me((s) => {
+        const u = new Set(s), C = u.has(r);
+        return (l === void 0 ? !C : !l) ? u.add(r) : u.delete(r), u;
       });
     },
     []
-  ), Oe = (r) => {
-    if (!m.current || !p.current) return;
-    const a = p.current.getBoundingClientRect();
-    switch (r || ue.direction) {
+  ), V = (r) => {
+    if (!p.current || !b.current) return;
+    const l = b.current.getBoundingClientRect();
+    switch (r || ie.direction) {
       case "down":
-        m.current.style.top = `${a.top + a.height - (He?.current?.offsetHeight ? He?.current?.offsetHeight + 4 : 0)}px`;
+        p.current.style.top = `${l.top + l.height - (He?.current?.offsetHeight ? He?.current?.offsetHeight + 4 : 0)}px`;
         break;
       case "up":
-        m.current.style.top = "auto", m.current.style.bottom = `${window.innerHeight - a.top + X}px`;
+        p.current.style.top = "auto", p.current.style.bottom = `${window.innerHeight - l.top + Ae}px`;
         break;
     }
-    m.current.style.left = `${a.left}px`, m.current.style.width = `${a.width}px`;
-  }, Y = (r) => {
-    m.current && (m.current.style.maxHeight = `${r}px`);
-  }, Me = () => {
-    if (!m.current || !p.current) return ue;
-    const r = p.current.getBoundingClientRect(), a = window.innerHeight - (window.innerHeight - r.top), i = window.innerHeight - r.bottom, u = i >= P, v = a >= P;
-    let D = "down", g;
-    return u ? (D = "down", g = P) : v ? (D = "up", g = P) : i > a ? (D = "down", g = i - 16) : (D = "up", g = a - 16), { direction: D, height: g };
-  }, ce = (r) => {
-    if (!(!m.current || !p.current)) {
-      if (m.current.style.transition = "max-height 0.2s ease,opacity 0.2s ease", !r) {
-        m.current.style.maxHeight = "0", m.current.style.opacity = "0", m.current.style.pointerEvents = "none";
+    p.current.style.left = `${l.left}px`, p.current.style.width = `${l.width}px`;
+  }, Pe = (r) => {
+    p.current && (p.current.style.maxHeight = `${r}px`);
+  }, ue = () => {
+    if (!p.current || !b.current) return ie;
+    const r = b.current.getBoundingClientRect(), l = window.innerHeight - (window.innerHeight - r.top), s = window.innerHeight - r.bottom, u = s >= le, C = l >= le;
+    let S = "down", x;
+    return u ? (S = "down", x = le) : C ? (S = "up", x = le) : s > l ? (S = "down", x = s - 16) : (S = "up", x = l - 16), { direction: S, height: x };
+  }, $e = (r) => {
+    if (!(!p.current || !b.current)) {
+      if (p.current.style.transition = "max-height 0.2s ease,opacity 0.2s ease", !r) {
+        p.current.style.maxHeight = "0", p.current.style.opacity = "0", p.current.style.pointerEvents = "none";
         return;
       }
       if (!N) {
-        const a = Me();
-        ze(a), Oe(a.direction), Y(a.height);
+        const l = ue();
+        Ee(l), V(l.direction), Pe(l.height);
       }
-      m.current.style.opacity = "1", m.current.style.pointerEvents = "auto";
+      p.current.style.opacity = "1", p.current.style.pointerEvents = "auto", ke && ne?.current && ne.current?.focus();
     }
   };
-  pe(() => {
-    N || !p.current || !n || Oe();
-  }, [ne]), pe(() => {
-    ce(n);
-  }, [n]), pe(() => {
-    b && U(b);
-  }, [b]), pe(() => {
-    if (Q || !B) return;
-    const r = Le(b, B);
+  he(() => {
+    N || !b.current || !n || V();
+  }, [re]), he(() => {
+    $e(n);
+  }, [n]), he(() => {
+    y && U(y);
+  }, [y]), he(() => {
+    if (X || !B) return;
+    const r = Ge(y, B);
     U(r);
-  }, [b]);
-  const Le = (r, a) => {
-    if (!a) return r;
-    if (z) {
-      const g = [];
-      let A = null, $ = [];
-      const Z = () => {
-        A && $.length > 0 && g.push(A, ...$), A = null, $ = [];
+  }, [y]);
+  const Ge = (r, l) => {
+    if (!l) return r;
+    if (G) {
+      const x = [];
+      let O = null, Z = [];
+      const ee = () => {
+        O && Z.length > 0 && x.push(O, ...Z), O = null, Z = [];
       };
-      return r.forEach((fe) => {
-        const le = fe;
-        if (!!(le || {})?.isGroupHeader) {
-          Z(), A = le;
+      return r.forEach((de) => {
+        const t = de;
+        if (!!(t || {})?.isGroupHeader) {
+          ee(), O = t;
           return;
         }
-        const o = fe, l = k(
-          o,
-          T
-        ), d = Fe(String(l ?? ""), a);
-        A ? d && $.push(o) : d && g.push(o);
-      }), Z(), g;
+        const c = de, i = k(
+          c,
+          P
+        ), f = Fe(String(i ?? ""), l);
+        O ? f && Z.push(c) : f && x.push(c);
+      }), ee(), x;
     }
-    const i = [];
-    let u = null, v = [];
-    const D = () => {
-      u && v.length > 0 && i.push(u, ...v), u = null, v = [];
+    const s = [];
+    let u = null, C = [];
+    const S = () => {
+      u && C.length > 0 && s.push(u, ...C), u = null, C = [];
     };
-    return r.forEach((g) => {
-      if (typeof g != "object" || g === null) return;
-      if ((g || {})?.isGroupHeader) {
-        D(), u = g;
+    return r.forEach((x) => {
+      if (typeof x != "object" || x === null) return;
+      if ((x || {})?.isGroupHeader) {
+        S(), u = x;
         return;
       }
-      const A = Fe(g.label, a);
-      u ? A && v.push(g) : A && i.push(g);
-    }), D(), i;
-  }, Te = (r) => {
-    const a = Le(b, r);
-    if (U(a), j) {
+      const O = Fe(x.label, l);
+      u ? O && C.push(x) : O && s.push(x);
+    }), S(), s;
+  }, _e = (r) => {
+    const l = Ge(y, r);
+    if (U(l), j) {
       if (r === "") {
-        Ge();
+        Ie();
         return;
       }
       j(r);
       return;
     }
-    K && b && K(r);
-  }, Ge = _(() => {
-    if (J) {
-      J(), U(
-        b.filter((r) => {
-          const a = z ? k(r, W) : r.id;
-          return ne.has(a);
+    K && y && K(r);
+  }, Ie = _(() => {
+    if (Q) {
+      Q(), U(
+        y.filter((r) => {
+          const l = G ? k(r, W) : r.id;
+          return re.has(l);
         })
       );
       return;
     }
-    K && (K(""), U(b));
+    K && (K(""), U(y));
   }, [
-    b,
-    ne,
+    y,
+    re,
     W,
-    J,
+    Q,
     U,
     K,
-    z
-  ]), Pe = (r) => {
-    r.key === "ArrowDown" ? (r.preventDefault(), m.current?.querySelector(
+    G
+  ]), L = (r) => {
+    r.key === "ArrowDown" ? (r.preventDefault(), p.current?.querySelector(
       "[role=listitem]"
     )?.focus()) : (r.key === "Tab" || r.key === "Escape") && setTimeout(() => {
       F.current?.focus(), se();
     }, 10);
-  }, O = (r, a) => {
-    const i = Array.from(
-      m.current?.querySelectorAll("[role=listitem]") || []
-    ), u = i.indexOf(r.currentTarget);
+  }, R = (r, l) => {
+    const s = Array.from(
+      p.current?.querySelectorAll("[role=listitem]") || []
+    ), u = s.indexOf(r.currentTarget);
     if (r.key === "ArrowDown") {
       r.preventDefault();
-      const v = u < i.length - 1 ? u + 1 : u;
-      i[v]?.focus();
+      const C = u < s.length - 1 ? u + 1 : u;
+      s[C]?.focus();
     } else if (r.key === "ArrowUp")
       if (r.preventDefault(), u === 0)
-        ye && ye.current?.focus();
+        ne && ne.current?.focus();
       else {
-        const v = u - 1;
-        i[v]?.focus();
+        const C = u - 1;
+        s[C]?.focus();
       }
     else if (r.key === "Enter" || r.key === " ") {
-      if (r.preventDefault(), (a || {})?.isGroupHeader || y) return;
-      xe(a, !h), h || setTimeout(() => {
+      if (r.preventDefault(), (l || {})?.isGroupHeader || v) return;
+      be(l, !g), g || setTimeout(() => {
         F.current?.focus(), se();
       }, 10);
     } else r.key === "Escape" ? (r.preventDefault(), setTimeout(() => {
@@ -766,12 +768,12 @@ function ft({
     }, 10)) : r.key === "Tab" && setTimeout(() => {
       F.current?.focus(), se();
     }, 10);
-  }, R = Array.from({ length: 5 }).map(
-    (r, a) => z ? we.createElement(
-      V(z, (i, u) => i.isSelected === u.isSelected && i.option === u.option && i.disabled === u.disabled && i.multiple === u.multiple && i.renderContext === u.renderContext),
+  }, Ce = Array.from({ length: 5 }).map(
+    (r, l) => G ? we.createElement(
+      J(G, (s, u) => s.isSelected === u.isSelected && s.option === u.option && s.disabled === u.disabled && s.multiple === u.multiple && s.renderContext === u.renderContext),
       {
-        key: `skeleton-option-${a}`,
-        option: { id: a, label: "", value: "" },
+        key: `skeleton-option-${l}`,
+        option: { id: l, label: "", value: "" },
         isSelected: !1,
         multiple: !1,
         onSelect: () => {
@@ -780,45 +782,46 @@ function ft({
         isLoading: !0,
         renderContext: w
       }
-    ) : /* @__PURE__ */ s.jsx(
-      Be,
+    ) : /* @__PURE__ */ a.jsx(
+      Ke,
       {
         multiple: !1,
         isLoading: !0,
         onSelect: () => {
         },
         isSelected: !1,
-        option: { id: a, label: "", value: "" }
+        option: { id: l, label: "", value: "" }
       },
       `skeleton-option-${// biome-ignore lint/suspicious/noArrayIndexKey: <>
-      a}`
+      l}`
     )
-  ), de = /* @__PURE__ */ s.jsx(
+  ), ce = /* @__PURE__ */ a.jsx(
     "div",
     {
       tabIndex: 0,
-      ref: m,
+      ref: p,
       style: { opacity: "0" },
-      className: c(
+      className: d(
         " z-100! w-full mt-1 bg-neutral-default-default border border-neutral-default-default rounded-lg shadow-lg",
         " overflow-hidden focus-visible:bg-neutral-default-hover    ",
         N ? "absolute z-50 " : "fixed z-100 top-0 left-0",
-        ue.direction === "up" ? "h-auto" : " h-max",
-        Ie
+        ie.direction === "up" ? "h-auto" : " h-max",
+        ze,
+        "min-w-max"
       ),
-      children: /* @__PURE__ */ s.jsxs(
+      children: /* @__PURE__ */ a.jsxs(
         "div",
         {
-          className: c(
+          className: d(
             "flex flex-col ",
-            ve ? "p-0" : "p-2 pt-0 gap-2"
+            xe ? "p-0" : "p-2 pt-0 gap-2"
           ),
           style: {
             height: "auto",
-            maxHeight: ue.height
+            maxHeight: ie.height
           },
           children: [
-            !ve && /* @__PURE__ */ s.jsx(
+            !xe && /* @__PURE__ */ a.jsx(
               lt,
               {
                 name: "",
@@ -826,146 +829,146 @@ function ft({
                 size: "small",
                 tabIndex: 0,
                 value: B,
-                disabled: y,
-                ref: ye,
+                disabled: v,
+                ref: ne,
                 labelVariant: "static",
-                icon: /* @__PURE__ */ s.jsx(ot, { size: 22 }),
-                isFetching: Q,
-                onKeyDown: Pe,
-                onClear: Ge,
-                onChange: (r) => Te(r.target.value),
-                placeholder: ke,
+                icon: /* @__PURE__ */ a.jsx(ot, { size: 22 }),
+                isFetching: X,
+                onKeyDown: L,
+                onClear: Ie,
+                onChange: (r) => _e(r.target.value),
+                placeholder: Oe,
                 className: " bg-neutral-medium-pressed",
                 ...H
               }
             ),
-            /* @__PURE__ */ s.jsx("div", { className: " overflow-y-auto flex-1 max-h-max ", children: oe.length === 0 ? Q ? /* @__PURE__ */ s.jsx("div", { className: "flex flex-col gap-1 overflow-hidden w-full", children: De || R }) : /* @__PURE__ */ s.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: B ? `No se encontraron resultados para "${B}"` : ge }) : (() => {
+            /* @__PURE__ */ a.jsx("div", { className: " overflow-y-auto flex-1 max-h-max ", children: oe.length === 0 ? X ? /* @__PURE__ */ a.jsx("div", { className: "flex flex-col gap-1 overflow-hidden w-full", children: De || Ce }) : /* @__PURE__ */ a.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: B ? `No se encontraron resultados para "${B}"` : pe }) : (() => {
               let r = !0;
-              return oe.map((a) => {
-                const i = a, u = !!(i || {}).isGroupHeader, v = z && !u ? k(a, W) : i.id, D = ne.has(v), g = (l) => !z || u ? l : {
-                  id: v,
-                  label: String(k(l, T)),
-                  value: k(l, W)
-                }, A = (l) => {
-                  u || xe(
-                    g(a),
-                    l === void 0 ? !h : l
+              return oe.map((l) => {
+                const s = l, u = !!(s || {}).isGroupHeader, C = G && !u ? k(l, W) : s.id, S = re.has(C), x = (i) => !G || u ? i : {
+                  id: C,
+                  label: String(k(i, P)),
+                  value: k(i, W)
+                }, O = (i) => {
+                  u || be(
+                    x(l),
+                    i === void 0 ? !g : i
                   );
-                }, $ = (l) => {
-                  if (xe(l, !h), !h) {
+                }, Z = (i) => {
+                  if (be(i, !g), !g) {
                     if (!K) return;
-                    K(""), U(b);
+                    K(""), U(y);
                   }
-                }, Z = (l, d) => {
-                  const S = !!(d || {}).isGroupHeader;
+                }, ee = (i, f) => {
+                  const D = !!(f || {}).isGroupHeader;
                   return (
                     // biome-ignore lint/a11y/useSemanticElements: <>
-                    /* @__PURE__ */ s.jsx(
+                    /* @__PURE__ */ a.jsx(
                       "div",
                       {
                         tabIndex: 0,
                         role: "listitem",
-                        onKeyDown: (L) => O(L, d),
-                        className: c(
-                          !S && !y && "focus-visible:bg-neutral-medium-hover outline-none hover:bg-neutral-medium-hover",
-                          D && "bg-neutral-medium-selected",
-                          y && "cursor-default pointer-events-none"
+                        onKeyDown: (M) => R(M, f),
+                        className: d(
+                          !D && !v && "focus-visible:bg-neutral-medium-hover outline-none hover:bg-neutral-medium-hover",
+                          S && "bg-neutral-medium-selected",
+                          v && "cursor-default pointer-events-none"
                         ),
-                        children: l
+                        children: i
                       },
-                      d.id
+                      f.id
                     )
                   );
                 };
                 if (u) {
-                  const l = i.groupLabelNode ?? i.label, d = String(i.id), S = q === !1 ? !0 : Ae(d);
-                  r = S;
-                  const L = i.originalOption, G = i.groupData?.groupOptions ?? [], ee = (I) => {
-                    q && Ee(d, I);
-                  }, me = (I) => {
-                    !G || G.length === 0 || Ce && Ce(G, I);
-                  }, he = G.filter(
-                    (I) => ne.has(k(I, W))
-                  ).map((I) => String(k(I, W)));
-                  if (be) {
-                    const I = V(
-                      be,
-                      (C, M) => C.label === M.label && C.group === M.group && C.groupOptions === M.groupOptions && C.disabled === M.disabled && C.multiple === M.multiple && C.expanded === M.expanded && C.renderContext === M.renderContext
-                    ), x = we.createElement(I, {
-                      group: L,
-                      label: l,
-                      groupOptions: G,
-                      multiple: h,
-                      disabled: y,
-                      expanded: S,
-                      toggleGroup: ee,
+                  const i = s.groupLabelNode ?? s.label, f = String(s.id), D = q === !1 ? !0 : Te(f);
+                  r = D;
+                  const M = s.originalOption, I = s.groupData?.groupOptions ?? [], fe = (m) => {
+                    q && Le(f, m);
+                  }, me = (m) => {
+                    !I || I.length === 0 || ye && ye(I, m);
+                  }, Se = I.filter(
+                    (m) => re.has(k(m, W))
+                  ).map((m) => String(k(m, W)));
+                  if (ge) {
+                    const m = J(
+                      ge,
+                      (A, T) => A.label === T.label && A.group === T.group && A.groupOptions === T.groupOptions && A.disabled === T.disabled && A.multiple === T.multiple && A.expanded === T.expanded && A.renderContext === T.renderContext
+                    ), z = we.createElement(m, {
+                      group: M,
+                      label: i,
+                      groupOptions: I,
+                      multiple: g,
+                      disabled: v,
+                      expanded: D,
+                      toggleGroup: fe,
                       selectGroup: me,
                       renderContext: w,
-                      groupSelectedIds: he
+                      groupSelectedIds: Se
                     });
-                    return Z(x, i);
+                    return ee(z, s);
                   }
-                  return Z(
-                    /* @__PURE__ */ s.jsxs("div", { className: "px-3 py-2 text-neutral-medium-default font-medium text-sm w-full flex justify-between", children: [
-                      /* @__PURE__ */ s.jsx("div", { children: l }),
-                      q && /* @__PURE__ */ s.jsx(
+                  return ee(
+                    /* @__PURE__ */ a.jsxs("div", { className: "px-3 py-2 text-neutral-medium-default font-medium text-sm w-full flex justify-between", children: [
+                      /* @__PURE__ */ a.jsx("div", { children: i }),
+                      q && /* @__PURE__ */ a.jsx(
                         "div",
                         {
                           className: "cursor-pointer",
-                          onClick: () => Ee(d),
-                          children: /* @__PURE__ */ s.jsx(
-                            Re,
+                          onClick: () => Le(f),
+                          children: /* @__PURE__ */ a.jsx(
+                            Ve,
                             {
-                              className: c(
+                              className: d(
                                 "transition-transform duration-300 ease-out",
-                                S ? "rotate-180" : "rotate-0"
+                                D ? "rotate-180" : "rotate-0"
                               )
                             }
                           )
                         }
                       )
                     ] }),
-                    i
+                    s
                   );
                 }
-                const fe = z ? we.createElement(
-                  V(
-                    z,
-                    (l, d) => l.isSelected === d.isSelected && l.option === d.option && l.disabled === d.disabled && l.multiple === d.multiple && l.renderContext === d.renderContext
+                const de = G ? we.createElement(
+                  J(
+                    G,
+                    (i, f) => i.isSelected === f.isSelected && i.option === f.option && i.disabled === f.disabled && i.multiple === f.multiple && i.renderContext === f.renderContext
                   ),
                   {
-                    key: v,
-                    option: a,
-                    isSelected: D,
-                    multiple: h,
-                    onSelect: A,
-                    disabled: y,
-                    isLoading: Q,
+                    key: C,
+                    option: l,
+                    isSelected: S,
+                    multiple: g,
+                    onSelect: O,
+                    disabled: v,
+                    isLoading: X,
                     renderContext: w
                   }
-                ) : /* @__PURE__ */ s.jsx(
-                  Be,
+                ) : /* @__PURE__ */ a.jsx(
+                  Ke,
                   {
-                    disabled: y,
-                    multiple: h,
-                    isLoading: Q,
-                    isSelected: D,
-                    onSelect: $,
-                    option: a
+                    disabled: v,
+                    multiple: g,
+                    isLoading: X,
+                    isSelected: S,
+                    onSelect: Z,
+                    option: l
                   },
-                  v
-                ), le = Z(
-                  fe,
-                  g(a)
+                  C
+                ), t = ee(
+                  de,
+                  x(l)
                 );
                 if (!q)
-                  return le;
-                const t = !r, o = le;
-                return we.cloneElement(o, {
-                  className: c(
-                    o.props.className,
+                  return t;
+                const o = !r, c = t;
+                return we.cloneElement(c, {
+                  className: d(
+                    c.props.className,
                     "overflow-hidden transition-[max-height] duration-300 ease-out",
-                    t ? "max-h-0" : "max-h-[999px]"
+                    o ? "max-h-0" : "max-h-[999px]"
                   )
                 });
               });
@@ -976,80 +979,77 @@ function ft({
       )
     }
   );
-  return N ? de : Ye(de, document.body);
+  return N ? ce : Ye(ce, document.body);
 }
-const mt = V(
+const mt = J(
   ft,
   (e, n) => e.options === n.options && e.selectedOptionsIds === n.selectedOptionsIds && e.multiple === n.multiple && e.disabled === n.disabled && e.emptyMessage === n.emptyMessage && e.renderOption === n.renderOption && e.renderOptionContext === n.renderOptionContext && e.isOpen === n.isOpen && e.attachToParent === n.attachToParent && e.optionValue === n.optionValue && e.optionLabel === n.optionLabel && e.filteredOptions === n.filteredOptions && e.isLoading === n.isLoading
-), Be = V(
+), Ke = J(
   ({
     option: e,
     isSelected: n,
-    onSelect: f,
-    multiple: b,
-    disabled: h,
-    isLoading: y
+    onSelect: h,
+    multiple: y,
+    disabled: g,
+    isLoading: v
   }) => {
-    const p = (e || {})?.isGroupHeader;
-    if (y)
-      return /* @__PURE__ */ s.jsxs(
+    const b = (e || {})?.isGroupHeader;
+    if (v)
+      return /* @__PURE__ */ a.jsxs(
         "div",
         {
           className: "flex gap-2 w-full px-3 py-2 cursor-wait",
           children: [
-            /* @__PURE__ */ s.jsx(Ue, { className: "size-6 aspect-square" }),
-            /* @__PURE__ */ s.jsx(Ue, { className: "flex-1 h-6" })
+            /* @__PURE__ */ a.jsx(Ue, { className: "size-6 aspect-square" }),
+            /* @__PURE__ */ a.jsx(Ue, { className: "flex-1 h-6" })
           ]
         },
         e.id
       );
-    const H = (T) => {
-      T.preventDefault(), T.stopPropagation(), !(h || p) && f?.(e);
-    }, m = p && e.groupLabelNode ? e.groupLabelNode : e.label;
-    return (
-      // biome-ignore lint/a11y/noStaticElementInteractions: no keyboard interaction needed
-      /* @__PURE__ */ s.jsxs(
-        "div",
-        {
-          onMouseDown: H,
-          className: c(
-            "px-3 py-2 flex items-center transition-colors text-neutral-default-default ",
-            p ? "cursor-default text-neutral-medium-default" : "cursor-pointer",
-            !p && (n ? " text-primary-default-default" : "hover:bg-neutral-medium-hover text-neutral-default-hover"),
-            h && !p && "text-neutral-default-disabled hover:bg-neutral-default-default"
-          ),
-          children: [
-            b && !p && /* @__PURE__ */ s.jsx(rt, { checked: n, disabled: h }),
-            /* @__PURE__ */ s.jsx("span", { children: m })
-          ]
-        },
-        e.id
-      )
+    const H = (P) => {
+      P.preventDefault(), P.stopPropagation(), !(g || b) && h?.(e);
+    }, p = b && e.groupLabelNode ? e.groupLabelNode : e.label;
+    return /* @__PURE__ */ a.jsxs(
+      "div",
+      {
+        onMouseDown: H,
+        className: d(
+          "px-3 py-2 flex items-center transition-colors text-neutral-default-default ",
+          b ? "cursor-default text-neutral-medium-default" : "cursor-pointer",
+          !b && (n ? " text-primary-default-default" : "hover:bg-neutral-medium-hover text-neutral-default-hover"),
+          g && !b && "text-neutral-default-disabled hover:bg-neutral-default-default"
+        ),
+        children: [
+          y && !b && /* @__PURE__ */ a.jsx(rt, { checked: n, disabled: g }),
+          /* @__PURE__ */ a.jsx("span", { children: p })
+        ]
+      },
+      e.id
     );
   },
   (e, n) => e.isSelected === n.isSelected && e.disabled === n.disabled
 );
-Be.displayName = "DefaultOptionRenderer";
-const Je = V(
+Ke.displayName = "DefaultOptionRenderer";
+const Je = J(
   ({
     selectedOptions: e,
     placeholder: n,
-    onRemoveOption: f,
-    displayMode: b,
-    multiple: h,
-    className: y,
-    disabled: p
-  }) => e?.length === 0 ? n ? /* @__PURE__ */ s.jsx("span", { className: "text-neutral-medium-default opacity-50", children: n }) : null : b === "chips" && h ? /* @__PURE__ */ s.jsx("div", { className: c("flex items-center gap-1 ", y), children: e.map((H) => /* @__PURE__ */ s.jsx(
+    onRemoveOption: h,
+    displayMode: y,
+    multiple: g,
+    className: v,
+    disabled: b
+  }) => e?.length === 0 ? n ? /* @__PURE__ */ a.jsx("span", { className: "text-neutral-medium-default opacity-50 line-clamp-1", children: n }) : null : y === "chips" && g ? /* @__PURE__ */ a.jsx("div", { className: d("flex items-center gap-1 ", v), children: e.map((H) => /* @__PURE__ */ a.jsx(
     it,
     {
       tabIndex: -1,
       id: H.id,
       label: H.label,
-      onRemove: f,
-      disabled: p
+      onRemove: h,
+      disabled: b
     },
     H.id
-  )) }) : e?.length === 1 ? /* @__PURE__ */ s.jsx("span", { children: e[0].label }) : /* @__PURE__ */ s.jsxs("span", { children: [
+  )) }) : e?.length === 1 ? /* @__PURE__ */ a.jsx("span", { className: "line-clamp-1", children: e[0].label }) : /* @__PURE__ */ a.jsxs("span", { className: "line-clamp-1", children: [
     e?.length,
     " seleccionados"
   ] }),
@@ -1057,5 +1057,5 @@ const Je = V(
 );
 Je.displayName = "DefaultSelectionDisplay";
 export {
-  Ot as default
+  Et as default
 };