prometeo-design-system 2.5.0 → 2.5.1

package/dist/{Select-CxJFcGuQ.js → Select-B32JqJIS.js}

@@ -1,7 +1,7 @@
 import { j as s } from "./jsx-runtime-DKDX3adD.js";
 import { Icons as J } from "./Icons.es.js";
 import { c as i } from "./cn-B6yFEsav.js";
-import De, { memo as R, useState as fe, useRef as G, useMemo as V, useCallback as ee, useEffect as te, useImperativeHandle as We } from "react";
+import je, { memo as W, useState as fe, useRef as G, useMemo as Z, useCallback as V, useEffect as ee, useImperativeHandle as We } from "react";
 import Be from "./Spinner.es.js";
 import { createPortal as Ke } from "react-dom";
 import { u as Ue } from "./useDragScroll-CHN9OMwn.js";
@@ -9,7 +9,7 @@ import { u as qe, I as Fe } from "./Input-Bhd0bmVq.js";
 import Ge from "./CheckBox.es.js";
 import { Skeleton as Ce } from "./Skeleton.es.js";
 const He = (r) => {
-  const { variant: e, className: f } = r, c = {
+  const { variant: e, className: d } = r, c = {
     default: "text-neutral-medium-default pt-[1px]",
     error: "text-error-medium-default pt-[1px]",
     success: "text-success-medium-default"
@@ -18,13 +18,13 @@ const He = (r) => {
     error: /* @__PURE__ */ s.jsx(J.Error, { size: 16, className: "text-error-medium-default" }),
     success: /* @__PURE__ */ s.jsx(J.Check, { size: 16, className: "text-success-medium-default" })
   };
-  return /* @__PURE__ */ s.jsx("div", { ref: r.ref, className: i("pl-3", f), children: typeof r.children == "string" ? /* @__PURE__ */ s.jsxs("div", { className: "flex gap-0.5 items-start", children: [
+  return /* @__PURE__ */ s.jsx("div", { ref: r.ref, className: i("pl-3", d), children: typeof r.children == "string" ? /* @__PURE__ */ s.jsxs("div", { className: "flex gap-0.5 items-start", children: [
     o[e],
     /* @__PURE__ */ s.jsx("p", { className: i(" prometeo-fonts-body-small", c[e]), children: r.children })
   ] }) : r.children });
 };
 He.displayName = "HelperText";
-const Je = R(He), Qe = {
+const Je = W(He), Qe = {
   default: {
     container: "text-neutral-default-default border-neutral-default-default ",
     icon: ""
@@ -40,22 +40,22 @@ const Je = R(He), Qe = {
 }, ke = {
   icon: " text-neutral-default-disabled",
   container: " border-neutral-strong-default text-neutral-default-disabled"
-}, Ie = ({ id: r, label: e, onRemove: f, className: c, disabled: o, variant: a = "default", tabIndex: y }) => /* @__PURE__ */ s.jsxs(
+}, Ie = ({ id: r, label: e, onRemove: d, className: c, disabled: o, variant: l = "default", tabIndex: y }) => /* @__PURE__ */ s.jsxs(
   "div",
   {
     tabIndex: y,
     className: i(
       "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]",
-      Qe[a].container,
+      Qe[l].container,
       o && ke.container
     ),
     children: [
       /* @__PURE__ */ s.jsx("span", { className: "truncate w-max ", children: e }),
-      f && /* @__PURE__ */ s.jsx(
+      d && /* @__PURE__ */ s.jsx(
         "button",
         {
           onMouseDown: (p) => {
-            o || (p.stopPropagation(), p.preventDefault(), f?.(r));
+            o || (p.stopPropagation(), p.preventDefault(), d?.(r));
           },
           className: i(
             "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",
@@ -71,13 +71,13 @@ const Je = R(He), Qe = {
   }
 );
 Ie.displayName = "Chip";
-const Xe = R(Ie);
-function $(r, e) {
+const Xe = W(Ie);
+function P(r, e) {
   if (typeof e == "function")
     return e(r);
-  const f = e?.split(".");
+  const d = e?.split(".");
   let c = r;
-  for (const o of f)
+  for (const o of d)
     if (c && typeof c == "object" && o in c)
       c = c[o];
     else
@@ -86,42 +86,42 @@ function $(r, e) {
 }
 const Ee = (r, e) => {
   if (!e) return !0;
-  const f = 0.1, c = String(r).toLowerCase(), o = String(e).toLowerCase().trim();
+  const d = 0.1, c = String(r).toLowerCase(), o = String(e).toLowerCase().trim();
   if (c.includes(o)) return !0;
-  const a = o.split(/\s+/).filter(Boolean), y = a.filter((m) => /^\d+$/.test(m));
-  if (a.length > 1 || y.length > 0) {
+  const l = o.split(/\s+/).filter(Boolean), y = l.filter((m) => /^\d+$/.test(m));
+  if (l.length > 1 || y.length > 0) {
     for (const m of y)
       if (!new RegExp(`(^|\\D)${m}(\\D|$)`).test(c)) return !1;
-    for (const m of a)
+    for (const m of l)
       if (!/^\d+$/.test(m) && !c.includes(m))
         return !1;
     return !0;
   }
   if (o.length > c.length) return !1;
-  const p = Math.floor(o.length * f);
+  const p = Math.floor(o.length * d);
   if (p <= 0) return !1;
-  const C = (m, T) => {
-    const v = m.length, w = T.length;
-    if (v === 0) return w;
-    if (w === 0) return v;
-    const N = new Array(w + 1);
-    for (let x = 0; x <= w; x++) N[x] = x;
+  const k = (m, A) => {
+    const v = m.length, N = A.length;
+    if (v === 0) return N;
+    if (N === 0) return v;
+    const S = new Array(N + 1);
+    for (let x = 0; x <= N; x++) S[x] = x;
     for (let x = 1; x <= v; x++) {
-      let k = x - 1;
-      N[0] = x;
-      for (let u = 1; u <= w; u++) {
-        const O = N[u], B = m.charCodeAt(x - 1) === T.charCodeAt(u - 1) ? 0 : 1, L = N[u] + 1, S = N[u - 1] + 1, z = k + B;
-        N[u] = L < S ? L < z ? L : z : S < z ? S : z, k = O;
+      let E = x - 1;
+      S[0] = x;
+      for (let f = 1; f <= N; f++) {
+        const _ = S[f], B = m.charCodeAt(x - 1) === A.charCodeAt(f - 1) ? 0 : 1, z = S[f] + 1, C = S[f - 1] + 1, T = E + B;
+        S[f] = z < C ? z < T ? z : T : C < T ? C : T, E = _;
       }
     }
-    return N[w];
+    return S[N];
   };
   for (let m = 0; m <= c.length - o.length; m++) {
-    const T = c.slice(m, m + o.length);
-    if (C(T, o) <= p) return !0;
+    const A = c.slice(m, m + o.length);
+    if (k(A, o) <= p) return !0;
   }
   return !1;
-}, ye = {
+}, ve = {
   default: {
     container: "",
     input: i(
@@ -170,7 +170,7 @@ const Ee = (r, e) => {
       "peer-focus:text-success-light"
     )
   }
-}, ve = {
+}, De = {
   input: i(
     "border-neutral-strong-default text-neutral-default-default",
     "focus:ring-primary-default-default focus:ring-[1px] focus:border-primary-default-default ",
@@ -187,47 +187,47 @@ const Ee = (r, e) => {
 }, Ye = ({
   id: r,
   name: e,
-  value: f,
+  value: d,
   label: c,
   height: o,
-  options: a,
+  options: l,
   controls: y,
   className: p,
-  placeholder: C,
+  placeholder: k,
   optionValue: m,
-  optionLabel: T,
+  optionLabel: A,
   renderOption: v,
-  renderSelection: w,
-  buttonClassName: N,
+  renderSelection: N,
+  buttonClassName: S,
   dropdownClassName: x,
-  containerClassName: k,
-  dropdownOptions: u,
-  helperComponent: O,
+  containerClassName: E,
+  dropdownOptions: f,
+  helperComponent: _,
   errorComponent: B,
-  onRemoveOption: L,
-  onOptionClick: S,
-  onChange: z,
-  onClose: re,
+  onRemoveOption: z,
+  onOptionClick: C,
+  onChange: T,
+  onClose: te,
   onClear: K,
   disabled: j = !1,
   overflow: ae = "wrap",
-  variant: A = "default",
-  multiple: E = !1,
+  variant: $ = "default",
+  multiple: H = !1,
   isLoading: de = !1,
-  attachToParent: we = !1,
-  displayMode: ne = "compact",
+  attachToParent: Ne = !1,
+  displayMode: re = "compact",
   labelVariant: U = "default",
   disableOpenOnFocus: q = !1,
   emptyMessage: Q = "No hay opciones disponibles"
 }) => {
-  const [b, D] = fe(!1), [me, he] = fe([]), [oe, ie] = fe(""), se = G(null), X = G(null), Y = G(null), ce = G(null), le = G(() => {
-  }), ue = G(null), Z = G(/* @__PURE__ */ new Set()), { ref: n } = qe(), { bind: l, ref: d } = Ue({
+  const [b, D] = fe(!1), [me, he] = fe([]), [oe, ie] = fe(""), ne = G(null), X = G(null), Y = G(null), ce = G(null), se = G(() => {
+  }), le = G(null), n = G(/* @__PURE__ */ new Set()), { ref: a } = qe(), { bind: u, ref: g } = Ue({
     axis: "x",
     cursor: { idle: "default", dragging: "grabbing" }
-  }), h = f && f.length > 0, P = {}, _ = V(() => U === "static" && C ? C : "", [U, C]), M = V(
-    () => u?.controledSearchValue || oe,
-    [u?.controledSearchValue, oe]
-  ), H = () => {
+  }), I = d && d.length > 0, M = {}, R = Z(() => U === "static" && k ? k : "", [U, k]), ge = Z(
+    () => f?.controledSearchValue || oe,
+    [f?.controledSearchValue, oe]
+  ), w = () => {
     const t = {
       static: {
         active: "relative prometeo-fonts-label-large",
@@ -237,78 +237,78 @@ const Ee = (r, 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 "
       }
-    }, g = b || h ? "active" : "default";
-    return t[U][g];
-  }, W = (t) => ({
-    id: $(t, m),
-    value: $(t, m),
-    label: $(t, T)
-  }), Ne = V(
-    () => a.map(W),
-    [a]
-  ), ge = V(
+    }, h = b || I ? "active" : "default";
+    return t[U][h];
+  }, O = (t) => ({
+    id: P(t, m),
+    value: P(t, m),
+    label: P(t, A)
+  }), ue = Z(
+    () => l.map(O),
+    [l]
+  ), pe = Z(
     () => {
       const t = [];
-      return f?.forEach((g) => {
-        const I = a?.find((F) => $(F, m) === g);
-        I && t.push(I);
+      return d?.forEach((h) => {
+        const L = l?.find((F) => P(F, m) === h);
+        L && t.push(L);
       }), t;
     },
-    [f, m, a]
-  ), pe = V(
-    () => ge.map(W),
-    [ge]
-  ), ze = V(
-    () => new Set(pe.map((t) => t.id)),
+    [d, m, l]
+  ), xe = Z(
+    () => pe.map(O),
     [pe]
-  ), Te = ee(() => {
+  ), ze = Z(
+    () => new Set(xe.map((t) => t.id)),
+    [xe]
+  ), Te = V(() => {
     D((t) => !t);
   }, []);
-  le.current = (t) => {
-    let g;
-    if (!E)
-      g = [t];
+  se.current = (t) => {
+    let h;
+    if (!H)
+      h = [t];
     else {
-      const I = f || [], F = [], Me = I.includes(t.value);
-      I.forEach((be) => {
-        const Se = Ne.find((Re) => Re.value === be);
+      const L = d || [], F = [], Me = L.includes(t.value);
+      L.forEach((ye) => {
+        const Se = ue.find((Re) => Re.value === ye);
         Se && F.push(Se);
-      }), g = Me ? F.filter((be) => be.value !== t.value) : [...F, t];
+      }), h = Me ? F.filter((ye) => ye.value !== t.value) : [...F, t];
     }
-    z?.(g, e);
+    T?.(h, e);
   };
-  const Ae = ee((t) => {
-    S?.(t, e), le.current?.(t), E || (D(!1), re?.());
-  }, [E, S, re, e]), $e = (t) => {
-    t.preventDefault(), t.stopPropagation(), t.target.blur(), K?.(), z?.([], e);
-  }, xe = ee((t) => {
-    E || z?.([], e);
-    const g = a.find((F) => $(F, m) === t);
-    if (!g) return;
-    const I = W(g);
-    S?.(I, e), le.current?.(I), L?.(g);
-  }, [S, L, a, e, E, z]), Oe = ee((t) => {
-    xe(t);
-  }, [xe]);
-  te(() => {
+  const Ae = V((t) => {
+    C?.(t, e), se.current?.(t), H || (D(!1), te?.());
+  }, [H, C, te, e]), $e = (t) => {
+    t.preventDefault(), t.stopPropagation(), t.target.blur(), K?.(), T?.([], e);
+  }, be = V((t) => {
+    H || T?.([], e);
+    const h = l.find((F) => P(F, m) === t);
+    if (!h) return;
+    const L = O(h);
+    C?.(L, e), se.current?.(L), z?.(h);
+  }, [C, z, l, e, H, T]), Oe = V((t) => {
+    be(t);
+  }, [be]);
+  ee(() => {
     if (!b) return;
-    const t = (g) => {
-      const I = g.target;
-      if (g.type === "mousedown") {
-        if (se.current?.contains(I) || X.current?.contains(I)) return;
+    const t = (h) => {
+      const L = h.target;
+      if (h.type === "mousedown") {
+        if (ne.current?.contains(L) || X.current?.contains(L)) return;
         D(!1);
       }
-      if (g.type === "scroll") {
-        if (X.current?.contains(I)) return;
+      if (h.type === "scroll") {
+        if (X.current?.contains(L)) return;
         D(!1);
       }
-      g.type === "resize" && D(!1);
+      h.type === "resize" && D(!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);
     };
-  }, [b]), te(() => {
-    Z.current.forEach((t) => {
+  }, [b]), ee(() => {
+    n.current.forEach((t) => {
       try {
         t(b);
       } catch {
@@ -322,8 +322,8 @@ const Ee = (r, e) => {
       b && D(!1);
     },
     toggle: () => D((t) => !t),
-    subscribeOpenChange: (t) => (Z.current.add(t), () => {
-      Z.current.delete(t);
+    subscribeOpenChange: (t) => (n.current.add(t), () => {
+      n.current.delete(t);
     }),
     searchInputRef: Y
   }), [b]);
@@ -344,22 +344,22 @@ const Ee = (r, e) => {
         p,
         U === "static" && "mt-2"
       ),
-      ref: se,
+      ref: ne,
       draggable: !1,
-      style: P,
+      style: M,
       children: [
-        /* @__PURE__ */ s.jsxs("div", { className: i("relative bg-inherit ", k), children: [
+        /* @__PURE__ */ s.jsxs("div", { className: i("relative bg-inherit ", E), children: [
           /* @__PURE__ */ s.jsx(
             "label",
             {
               htmlFor: r,
-              ref: n,
+              ref: a,
               className: i(
                 "left-3 pointer-events-none bg-inherit z-10",
                 U === "default" && "transition-all duration-200 ease-in-out",
-                H(),
-                h || b ? ye[A].label : "text-neutral-medium-default",
-                j && ve.label
+                w(),
+                I || b ? ve[$].label : "text-neutral-medium-default",
+                j && De.label
               ),
               children: c
             }
@@ -380,44 +380,44 @@ const Ee = (r, e) => {
                 "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",
-                ne === "chips" && "mt-1.5",
-                ne === "chips" && E && h ? "min-h-14 py-3 " : !o && "h-14 min-h-14",
-                ye[A].input,
-                j && ve.input,
-                N
+                re === "chips" && "mt-1.5",
+                re === "chips" && H && I ? "min-h-14 py-3 " : !o && "h-14 min-h-14",
+                ve[$].input,
+                j && De.input,
+                S
               ),
               children: [
                 /* @__PURE__ */ s.jsx(
                   "div",
                   {
                     className: i("flex-1 overflow-x-auto overflow-y-hidden px-1 prometeo-scrollbar-none "),
-                    ref: d,
-                    onPointerUp: l.onPointerUp,
-                    onPointerDown: l.onPointerDown,
-                    onPointerMove: l.onPointerMove,
-                    onPointerLeave: l.onPointerLeave,
-                    onPointerCancel: l.onPointerCancel,
-                    onClickCapture: l.onClickCapture,
-                    children: w ? De.createElement(
-                      R(
-                        w,
-                        (t, g) => t.disabled === g.disabled && t.multiple === g.multiple
+                    ref: g,
+                    onPointerUp: u.onPointerUp,
+                    onPointerDown: u.onPointerDown,
+                    onPointerMove: u.onPointerMove,
+                    onPointerLeave: u.onPointerLeave,
+                    onPointerCancel: u.onPointerCancel,
+                    onClickCapture: u.onClickCapture,
+                    children: N ? je.createElement(
+                      W(
+                        N,
+                        (t, h) => t.disabled === h.disabled && t.multiple === h.multiple
                       ),
                       {
                         disabled: j,
-                        multiple: E,
-                        placeholder: C,
-                        selectedOptions: ge,
+                        multiple: H,
+                        placeholder: k,
+                        selectedOptions: pe,
                         onRemoveOption: Oe
                       }
                     ) : /* @__PURE__ */ s.jsx(
                       Le,
                       {
-                        displayMode: ne,
-                        selectedOptions: pe,
-                        placeholder: _,
-                        onRemoveOption: xe,
-                        multiple: E,
+                        displayMode: re,
+                        selectedOptions: xe,
+                        placeholder: R,
+                        onRemoveOption: be,
+                        multiple: H,
                         className: i(ae === "scroll" ? "flex-nowrap" : "flex-wrap"),
                         disabled: j
                       }
@@ -426,7 +426,7 @@ const Ee = (r, e) => {
                 ),
                 /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
                   de && /* @__PURE__ */ s.jsx(Be, { size: "small", variant: "clip", className: " translate-y-1", speedMultiplier: 0.7 }),
-                  h && K && /* @__PURE__ */ s.jsx(
+                  I && K && /* @__PURE__ */ s.jsx(
                     "button",
                     {
                       onMouseDown: (t) => {
@@ -434,7 +434,7 @@ const Ee = (r, e) => {
                       },
                       type: "button",
                       tabIndex: -1,
-                      children: /* @__PURE__ */ s.jsx(J.Cancel, { size: 20, className: i(" cursor-pointer transition-all", ye[A].icon) })
+                      children: /* @__PURE__ */ s.jsx(J.Cancel, { size: 20, className: i(" cursor-pointer transition-all", ve[$].icon) })
                     }
                   ),
                   /* @__PURE__ */ s.jsx(
@@ -444,7 +444,7 @@ const Ee = (r, e) => {
                       className: i(
                         "transition-transform text-neutral-default-default",
                         b ? "rotate-180" : "",
-                        j && ve.icon
+                        j && De.icon
                       )
                     }
                   )
@@ -457,126 +457,126 @@ const Ee = (r, e) => {
           Ve,
           {
             isOpen: b,
-            multiple: E,
+            multiple: H,
             disabled: j,
-            optionLabel: T,
+            optionLabel: A,
             optionValue: m,
             labelVariant: U,
             renderOption: v,
             emptyMessage: Q,
-            attachToParent: we,
+            attachToParent: Ne,
             filteredOptions: me,
             dropdownClassName: x,
             setFilteredOptions: he,
             selectedOptionsIds: ze,
-            options: v ? a : Ne,
-            selectRef: se,
+            options: v ? l : ue,
+            selectRef: ne,
             dropdownRef: X,
             selectButtonRef: ce,
-            helperComponentRef: ue,
+            helperComponentRef: le,
             onOptionClick: Ae,
             onCloseDropdown: () => D(!1),
-            searchValue: M,
+            searchValue: ge,
             setSearchValue: ie,
             searchInputRef: Y,
-            isLoading: u?.isLoading,
-            onSearchClear: u?.onSearchClear,
-            hideSearchBar: u?.hideSearchBar,
-            dropdownHeight: u?.dropdownHeight,
-            onSearchValueChange: u?.onSearchValueChange,
-            inputSearchPlaceholder: u?.inputSearchPlaceholder
+            isLoading: f?.isLoading,
+            onSearchClear: f?.onSearchClear,
+            hideSearchBar: f?.hideSearchBar,
+            dropdownHeight: f?.dropdownHeight,
+            onSearchValueChange: f?.onSearchValueChange,
+            inputSearchPlaceholder: f?.inputSearchPlaceholder
           }
         ),
-        (B || O) && /* @__PURE__ */ s.jsx(
+        (B || _) && /* @__PURE__ */ s.jsx(
           Je,
           {
-            ref: ue,
-            variant: A,
+            ref: le,
+            variant: $,
             className: "mt-1",
-            children: B || O
+            children: B || _
           }
         )
       ]
     }
   );
-}, ut = R(Ye, (r, e) => r.value === e.value && r.options === e.options && r.isLoading === e.isLoading && r.disabled === e.disabled && r.errorComponent === e.errorComponent && r.helperComponent === e.helperComponent && r.variant === e.variant && r.label === e.label && r.id === e.id && r.name === e.name && r.placeholder === e.placeholder && r.dropdownOptions?.controledSearchValue === e.dropdownOptions?.controledSearchValue && r.dropdownOptions?.isLoading === e.dropdownOptions?.isLoading);
+}, ut = W(Ye, (r, e) => r.value === e.value && r.options === e.options && r.isLoading === e.isLoading && r.disabled === e.disabled && r.errorComponent === e.errorComponent && r.helperComponent === e.helperComponent && r.variant === e.variant && r.label === e.label && r.id === e.id && r.name === e.name && r.placeholder === e.placeholder && r.dropdownOptions?.controledSearchValue === e.dropdownOptions?.controledSearchValue && r.dropdownOptions?.isLoading === e.dropdownOptions?.isLoading);
 function Ze({
   isOpen: r,
   options: e,
-  multiple: f,
+  multiple: d,
   disabled: c,
   selectRef: o,
-  dropdownRef: a,
+  dropdownRef: l,
   optionLabel: y,
   optionValue: p,
-  searchValue: C,
+  searchValue: k,
   labelVariant: m,
-  emptyMessage: T,
+  emptyMessage: A,
   renderOption: v,
-  onOptionClick: w,
-  onSearchClear: N,
+  onOptionClick: N,
+  onSearchClear: S,
   searchInputRef: x,
-  setSearchValue: k,
-  dropdownHeight: u,
-  attachToParent: O,
+  setSearchValue: E,
+  dropdownHeight: f,
+  attachToParent: _,
   filteredOptions: B,
-  selectButtonRef: L,
-  onCloseDropdown: S,
-  dropdownClassName: z,
-  helperComponentRef: re,
+  selectButtonRef: z,
+  onCloseDropdown: C,
+  dropdownClassName: T,
+  helperComponentRef: te,
   selectedOptionsIds: K,
   setFilteredOptions: j,
   onSearchValueChange: ae,
-  isLoading: A = !1,
-  hideSearchBar: E = !1,
+  isLoading: $ = !1,
+  hideSearchBar: H = !1,
   inputSearchPlaceholder: de = "Buscar opciones"
 }) {
-  const ne = m === "static" ? -20 : 7, q = ee(() => u ? u.endsWith("px") ? Number(u.replace("px", "")) : u.endsWith("vh") ? window.innerHeight * Number(u.replace("vh", "")) / 100 : u.endsWith("%") ? window.innerHeight * Number(u.replace("%", "")) / 100 : 320 : 320, [u])(), [Q, b] = fe({ direction: "down", height: q }), D = (n) => {
-    if (!a.current || !o.current) return;
-    const l = o.current.getBoundingClientRect();
+  const re = m === "static" ? -20 : 7, q = V(() => f ? f.endsWith("px") ? Number(f.replace("px", "")) : f.endsWith("vh") ? window.innerHeight * Number(f.replace("vh", "")) / 100 : f.endsWith("%") ? window.innerHeight * Number(f.replace("%", "")) / 100 : 320 : 320, [f])(), [Q, b] = fe({ direction: "down", height: q }), D = (n) => {
+    if (!l.current || !o.current) return;
+    const a = o.current.getBoundingClientRect();
     switch (n || Q.direction) {
       case "down":
-        a.current.style.top = `${l.top + l.height - (re?.current?.offsetHeight ? re?.current?.offsetHeight + 4 : 0)}px`;
+        l.current.style.top = `${a.top + a.height - (te?.current?.offsetHeight ? te?.current?.offsetHeight + 4 : 0)}px`;
         break;
       case "up":
-        a.current.style.top = "auto", a.current.style.bottom = `${window.innerHeight - l.top + ne}px`;
+        l.current.style.top = "auto", l.current.style.bottom = `${window.innerHeight - a.top + re}px`;
         break;
     }
-    a.current.style.left = `${l.left}px`, a.current.style.width = `${l.width}px`;
+    l.current.style.left = `${a.left}px`, l.current.style.width = `${a.width}px`;
   }, me = (n) => {
-    a.current && (a.current.style.maxHeight = `${n}px`);
+    l.current && (l.current.style.maxHeight = `${n}px`);
   }, he = () => {
-    if (!a.current || !o.current) return Q;
-    const n = o.current.getBoundingClientRect(), l = window.innerHeight - (window.innerHeight - n.top), d = window.innerHeight - n.bottom, h = d >= q, P = l >= q;
-    let _ = "down", M;
-    return h ? (_ = "down", M = q) : P ? (_ = "up", M = q) : d > l ? (_ = "down", M = d - 16) : (_ = "up", M = l - 16), { direction: _, height: M };
+    if (!l.current || !o.current) return Q;
+    const n = o.current.getBoundingClientRect(), a = window.innerHeight - (window.innerHeight - n.top), u = window.innerHeight - n.bottom, g = u >= q, I = a >= q;
+    let M = "down", R;
+    return g ? (M = "down", R = q) : I ? (M = "up", R = q) : u > a ? (M = "down", R = u - 16) : (M = "up", R = a - 16), { direction: M, height: R };
   }, oe = (n) => {
-    if (!(!a.current || !o.current)) {
-      if (a.current.style.transition = "max-height 0.2s ease,opacity 0.2s ease", !n) {
-        a.current.style.maxHeight = "0", a.current.style.opacity = "0", a.current.style.pointerEvents = "none";
+    if (!(!l.current || !o.current)) {
+      if (l.current.style.transition = "max-height 0.2s ease,opacity 0.2s ease", !n) {
+        l.current.style.maxHeight = "0", l.current.style.opacity = "0", l.current.style.pointerEvents = "none";
         return;
       }
-      if (!O) {
-        const l = he();
-        b(l), D(l.direction), me(l.height);
+      if (!_) {
+        const a = he();
+        b(a), D(a.direction), me(a.height);
       }
-      a.current.style.opacity = "1", a.current.style.pointerEvents = "auto";
+      l.current.style.opacity = "1", l.current.style.pointerEvents = "auto";
     }
   };
-  te(() => {
-    O || !o.current || !r || D();
-  }, [K]), te(() => {
+  ee(() => {
+    _ || !o.current || !r || D();
+  }, [K]), ee(() => {
     oe(r);
-  }, [r]), te(() => {
+  }, [r]), ee(() => {
     e && j(e);
-  }, [e]), te(() => {
-    if (A || !C) return;
-    const n = ie(e, C);
+  }, [e]), ee(() => {
+    if ($ || !k) return;
+    const n = ie(e, k);
     j(n);
   }, [e]);
-  const ie = (n, l) => n.filter((d) => Ee(v ? $(d, y) : d.label, l)), se = (n) => {
-    const l = ie(e, n);
-    if (j(l), ae) {
+  const ie = (n, a) => n.filter((u) => Ee(v ? P(u, y) : u.label, a)), ne = (n) => {
+    const a = ie(e, n);
+    if (j(a), ae) {
       if (n === "") {
         X();
         return;
@@ -584,53 +584,53 @@ function Ze({
       ae(n);
       return;
     }
-    k && e && k(n);
-  }, X = ee(() => {
-    if (N) {
-      N(), j(
+    E && e && E(n);
+  }, X = V(() => {
+    if (S) {
+      S(), j(
         e.filter((n) => {
-          const l = v ? $(n, p) : n.id;
-          return K.has(l);
+          const a = v ? P(n, p) : n.id;
+          return K.has(a);
         })
       );
       return;
     }
-    k && (k(""), j(e));
-  }, [e, K, p, N, j, k]), Y = (n) => {
-    n.key === "ArrowDown" ? (n.preventDefault(), a.current?.querySelector("[role=listitem]")?.focus()) : (n.key === "Tab" || n.key === "Escape") && setTimeout(() => {
-      L.current?.focus(), S();
+    E && (E(""), j(e));
+  }, [e, K, p, S, j, E]), Y = (n) => {
+    n.key === "ArrowDown" ? (n.preventDefault(), l.current?.querySelector("[role=listitem]")?.focus()) : (n.key === "Tab" || n.key === "Escape") && setTimeout(() => {
+      z.current?.focus(), C();
     }, 10);
-  }, ce = (n, l) => {
-    const d = Array.from(a.current?.querySelectorAll("[role=listitem]") || []), h = d.indexOf(n.currentTarget);
+  }, ce = (n, a) => {
+    const u = Array.from(l.current?.querySelectorAll("[role=listitem]") || []), g = u.indexOf(n.currentTarget);
     if (n.key === "ArrowDown") {
       n.preventDefault();
-      const P = h < d.length - 1 ? h + 1 : h;
-      d[P]?.focus();
+      const I = g < u.length - 1 ? g + 1 : g;
+      u[I]?.focus();
     } else if (n.key === "ArrowUp")
-      if (n.preventDefault(), h === 0)
+      if (n.preventDefault(), g === 0)
         x && x.current?.focus();
       else {
-        const P = h - 1;
-        d[P]?.focus();
+        const I = g - 1;
+        u[I]?.focus();
       }
     else if (n.key === "Enter" || n.key === " ") {
       if (n.preventDefault(), c) return;
-      console.log("enter option", l), w(l), f || setTimeout(() => {
-        L.current?.focus(), S();
+      N(a), d || setTimeout(() => {
+        z.current?.focus(), C();
       }, 10);
     } else n.key === "Escape" ? (n.preventDefault(), setTimeout(() => {
-      L.current?.focus(), S();
+      z.current?.focus(), C();
     }, 10)) : n.key === "Tab" && setTimeout(() => {
-      L.current?.focus(), S();
+      z.current?.focus(), C();
     }, 10);
-  }, le = Array.from({ length: 5 }).map((n, l) => v ? De.createElement(
-    R(
+  }, se = Array.from({ length: 5 }).map((n, a) => v ? je.createElement(
+    W(
       v,
-      (d, h) => d.isSelected === h.isSelected && d.option === h.option && d.disabled === h.disabled && d.multiple === h.multiple
+      (u, g) => u.isSelected === g.isSelected && u.option === g.option && u.disabled === g.disabled && u.multiple === g.multiple
     ),
     {
-      key: `skeleton-option-${l}`,
-      option: { id: l, label: "", value: "" },
+      key: `skeleton-option-${a}`,
+      option: { id: a, label: "", value: "" },
       isSelected: !1,
       multiple: !1,
       onSelect: () => {
@@ -639,118 +639,121 @@ function Ze({
       isLoading: !0
     }
   ) : /* @__PURE__ */ s.jsx(
-    je,
+    we,
     {
       multiple: !1,
       isLoading: !0,
       onSelect: () => {
       },
       isSelected: !1,
-      option: { id: l, label: "", value: "" }
+      option: { id: a, label: "", value: "" }
     },
-    `skeleton-option-${l}`
-  )), ue = (n, l) => /* @__PURE__ */ s.jsx(
+    `skeleton-option-${a}`
+  )), le = /* @__PURE__ */ s.jsx(
     "div",
     {
       tabIndex: 0,
-      role: "listitem",
-      onKeyDown: (d) => ce(d, l),
-      className: "focus-visible:bg-neutral-default-hover outline-none",
-      children: n
-    }
-  ), Z = /* @__PURE__ */ s.jsx(
-    "div",
-    {
-      tabIndex: 0,
-      ref: a,
+      ref: l,
       style: { opacity: "0" },
       className: i(
         " z-50 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    ",
-        O ? "absolute z-50 " : "fixed z-100 top-0 left-0",
+        _ ? "absolute z-50 " : "fixed z-100 top-0 left-0",
         Q.direction === "up" ? "h-auto" : " h-max",
-        z
+        T
       ),
       children: /* @__PURE__ */ s.jsxs(
         "div",
         {
           className: i(
             "flex flex-col ",
-            E ? "p-0" : "p-2 pt-0 gap-2"
+            H ? "p-0" : "p-2 pt-0 gap-2"
           ),
           style: {
             height: "auto",
             maxHeight: Q.height
           },
           children: [
-            !E && /* @__PURE__ */ s.jsx(
+            !H && /* @__PURE__ */ s.jsx(
               Fe,
               {
                 name: "",
                 label: "",
                 size: "small",
                 tabIndex: 0,
-                value: C,
+                value: k,
                 disabled: c,
                 ref: x,
                 labelVariant: "static",
                 icon: /* @__PURE__ */ s.jsx(J.Search, {}),
-                isFetching: A,
+                isFetching: $,
                 onKeyDown: Y,
                 onClear: X,
-                onChange: se,
+                onChange: ne,
                 placeholder: de,
                 className: " bg-neutral-medium-pressed"
               }
             ),
-            /* @__PURE__ */ s.jsx("div", { className: " overflow-y-auto flex-1 max-h-max ", children: B.length === 0 ? A ? /* @__PURE__ */ s.jsx("div", { className: "flex flex-col gap-1 overflow-hidden w-full", children: le }) : /* @__PURE__ */ s.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: C ? `No se encontraron resultados para "${C}"` : T }) : B.map((n) => {
-              const l = v ? $(n, p) : n.id, d = K.has(l), h = (H) => v ? {
-                id: l,
-                label: String($(H, y)),
-                value: $(H, p)
-              } : H, P = () => {
-                w(h(n));
-              }, _ = (H) => {
-                if (w(H), !f) {
-                  if (!k) return;
-                  k(""), j(e);
+            /* @__PURE__ */ s.jsx("div", { className: " overflow-y-auto flex-1 max-h-max ", children: B.length === 0 ? $ ? /* @__PURE__ */ s.jsx("div", { className: "flex flex-col gap-1 overflow-hidden w-full", children: se }) : /* @__PURE__ */ s.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: k ? `No se encontraron resultados para "${k}"` : A }) : B.map((n) => {
+              const a = v ? P(n, p) : n.id, u = K.has(a), g = (w) => v ? {
+                id: a,
+                label: String(P(w, y)),
+                value: P(w, p)
+              } : w, I = () => {
+                N(g(n));
+              }, M = (w) => {
+                if (N(w), !d) {
+                  if (!E) return;
+                  E(""), j(e);
+                }
+              }, R = (w, O) => /* @__PURE__ */ s.jsx(
+                "div",
+                {
+                  tabIndex: 0,
+                  role: "listitem",
+                  onKeyDown: (ue) => ce(ue, O),
+                  className: i(
+                    "focus-visible:bg-neutral-medium-hover outline-none hover:bg-neutral-medium-hover ",
+                    u && "bg-neutral-medium-selected"
+                  ),
+                  children: w
                 }
-              }, M = v ? De.createElement(
-                R(
+              ), ge = v ? je.createElement(
+                W(
                   v,
-                  (H, W) => H.isSelected === W.isSelected && H.option === W.option && H.disabled === W.disabled && H.multiple === W.multiple
+                  (w, O) => w.isSelected === O.isSelected && w.option === O.option && w.disabled === O.disabled && w.multiple === O.multiple
                 ),
                 {
-                  key: l,
+                  key: a,
                   option: n,
-                  isSelected: d,
-                  multiple: f,
-                  onSelect: P,
+                  isSelected: u,
+                  multiple: d,
+                  onSelect: I,
                   disabled: c,
-                  isLoading: A
+                  isLoading: $
                 }
               ) : /* @__PURE__ */ s.jsx(
-                je,
+                we,
                 {
                   disabled: c,
-                  multiple: f,
-                  isLoading: A,
-                  isSelected: d,
-                  onSelect: _,
+                  multiple: d,
+                  isLoading: $,
+                  isSelected: u,
+                  onSelect: M,
                   option: n
                 },
-                l
+                a
               );
-              return ue(M, h(n));
+              return R(ge, g(n));
             }) })
           ]
         }
       )
     }
   );
-  return O ? Z : Ke(Z, document.body);
+  return _ ? le : Ke(le, document.body);
 }
-const Ve = R(Ze, (r, e) => r.options === e.options && r.selectedOptionsIds === e.selectedOptionsIds && r.multiple === e.multiple && r.disabled === e.disabled && r.emptyMessage === e.emptyMessage && r.renderOption === e.renderOption && r.isOpen === e.isOpen && r.attachToParent === e.attachToParent && r.optionValue === e.optionValue && r.optionLabel === e.optionLabel && r.filteredOptions === e.filteredOptions && r.isLoading === e.isLoading), je = R(({ option: r, isSelected: e, onSelect: f, multiple: c, disabled: o, isLoading: a }) => a ? /* @__PURE__ */ s.jsxs("div", { className: "flex gap-2 w-full px-3 py-2 cursor-wait", children: [
+const Ve = W(Ze, (r, e) => r.options === e.options && r.selectedOptionsIds === e.selectedOptionsIds && r.multiple === e.multiple && r.disabled === e.disabled && r.emptyMessage === e.emptyMessage && r.renderOption === e.renderOption && r.isOpen === e.isOpen && r.attachToParent === e.attachToParent && r.optionValue === e.optionValue && r.optionLabel === e.optionLabel && r.filteredOptions === e.filteredOptions && r.isLoading === e.isLoading), we = W(({ option: r, isSelected: e, onSelect: d, multiple: c, disabled: o, isLoading: l }) => l ? /* @__PURE__ */ s.jsxs("div", { className: "flex gap-2 w-full px-3 py-2 cursor-wait", children: [
   /* @__PURE__ */ s.jsx(Ce, { className: "size-6 aspect-square" }),
   /* @__PURE__ */ s.jsx(Ce, { className: "flex-1 h-6" })
 ] }) : (
@@ -759,11 +762,11 @@ const Ve = R(Ze, (r, e) => r.options === e.options && r.selectedOptionsIds === e
     "div",
     {
       onMouseDown: (y) => {
-        y.preventDefault(), y.stopPropagation(), !o && f?.(r);
+        y.preventDefault(), y.stopPropagation(), !o && d?.(r);
       },
       className: i(
         "px-3 py-2 cursor-pointer flex items-center transition-colors text-neutral-default-default ",
-        e ? "bg-neutral-medium-selected text-primary-default-default" : "hover:bg-neutral-medium-hover text-neutral-default-hover",
+        e ? " text-primary-default-default" : "hover:bg-neutral-medium-hover text-neutral-default-hover",
         o && "text-neutral-default-disabled hover:bg-neutral-default-default"
       ),
       children: [
@@ -779,14 +782,14 @@ const Ve = R(Ze, (r, e) => r.options === e.options && r.selectedOptionsIds === e
     }
   )
 ), (r, e) => r.isSelected === e.isSelected);
-je.displayName = "DefaultOptionRenderer";
-const Le = R(({ selectedOptions: r, placeholder: e, onRemoveOption: f, displayMode: c, multiple: o, className: a, disabled: y }) => r?.length === 0 ? e ? /* @__PURE__ */ s.jsx("span", { className: "text-neutral-medium-default opacity-50", children: e }) : null : c === "chips" && o ? /* @__PURE__ */ s.jsx("div", { className: i("flex items-center gap-1 ", a), children: r.map((p) => /* @__PURE__ */ s.jsx(
+we.displayName = "DefaultOptionRenderer";
+const Le = W(({ selectedOptions: r, placeholder: e, onRemoveOption: d, displayMode: c, multiple: o, className: l, disabled: y }) => r?.length === 0 ? e ? /* @__PURE__ */ s.jsx("span", { className: "text-neutral-medium-default opacity-50", children: e }) : null : c === "chips" && o ? /* @__PURE__ */ s.jsx("div", { className: i("flex items-center gap-1 ", l), children: r.map((p) => /* @__PURE__ */ s.jsx(
   Xe,
   {
     tabIndex: -1,
     id: p.id,
     label: p.label,
-    onRemove: f,
+    onRemove: d,
     disabled: y
   },
   p.id
@@ -797,5 +800,5 @@ const Le = R(({ selectedOptions: r, placeholder: e, onRemoveOption: f, displayMo
 Le.displayName = "DefaultSelectionDisplay";
 export {
   ut as S,
-  $ as g
+  P as g
 };