prometeo-design-system 2.4.1 → 2.4.2

package/dist/Select.es.js

@@ -1,49 +1,49 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
-import { Icons as k } from "./Icons.es.js";
+import { j as n } from "./jsx-runtime-ByW6EXIE.js";
+import { Icons as z } from "./Icons.es.js";
 import { c as a } from "./cn-B6yFEsav.js";
-import ce, { useRef as F, useLayoutEffect as we, memo as z, useState as ie, useMemo as U, useCallback as P, useEffect as Z } from "react";
-import Ne from "./Spinner.es.js";
-import { createPortal as je } from "react-dom";
-import { u as Ce } from "./useDragScroll-CHN9OMwn.js";
-import Ee from "./CheckBox.es.js";
-const He = (r) => {
-  let n = r;
-  for (; n && n !== document.body; ) {
-    const s = window.getComputedStyle(n).backgroundColor;
+import ce, { useRef as F, useLayoutEffect as we, memo as I, useState as ie, useMemo as B, useCallback as k, useEffect as ee } from "react";
+import Ce from "./Spinner.es.js";
+import { createPortal as Ee } from "react-dom";
+import { u as He } from "./useDragScroll-CHN9OMwn.js";
+import Se from "./CheckBox.es.js";
+const ke = (e) => {
+  let r = e;
+  for (; r && r !== document.body; ) {
+    const s = window.getComputedStyle(r).backgroundColor;
     if (s && s !== "transparent" && s !== "rgba(0, 0, 0, 0)")
       return s;
-    n = n.parentElement;
+    r = r.parentElement;
   }
-  const u = window.getComputedStyle(document.body).backgroundColor;
-  return u && u !== "transparent" && u !== "rgba(0, 0, 0, 0)" ? u : "rgb(255, 255, 255)";
+  const l = window.getComputedStyle(document.body).backgroundColor;
+  return l && l !== "transparent" && l !== "rgba(0, 0, 0, 0)" ? l : "rgb(255, 255, 255)";
 };
-function Pe() {
-  const r = F(null);
+function ze() {
+  const e = F(null);
   return we(() => {
-    if (!r.current || !r.current.parentElement) return;
-    const n = He(r.current.parentElement);
-    r.current.style.backgroundColor = n;
+    if (!e.current || !e.current.parentElement) return;
+    const r = ke(e.current.parentElement);
+    e.current.style.backgroundColor = r;
   }, []), {
-    ref: r
+    ref: e
   };
 }
-const de = (r) => {
-  const { variant: n, className: u } = r, c = {
+const de = (e) => {
+  const { variant: r, className: l } = e, c = {
     default: "text-neutral-medium-default pt-[1px]",
     error: "text-error-medium-default pt-[1px]",
     success: "text-success-medium-default"
   }, s = {
-    default: /* @__PURE__ */ t.jsx(k.Info, { size: 16, className: "text-neutral-medium-default " }),
-    error: /* @__PURE__ */ t.jsx(k.Error, { size: 16, className: "text-error-medium-default" }),
-    success: /* @__PURE__ */ t.jsx(k.Check, { size: 16, className: "text-success-medium-default" })
+    default: /* @__PURE__ */ n.jsx(z.Info, { size: 16, className: "text-neutral-medium-default " }),
+    error: /* @__PURE__ */ n.jsx(z.Error, { size: 16, className: "text-error-medium-default" }),
+    success: /* @__PURE__ */ n.jsx(z.Check, { size: 16, className: "text-success-medium-default" })
   };
-  return /* @__PURE__ */ t.jsx("div", { ref: r.ref, className: a("pl-3", u), children: typeof r.children == "string" ? /* @__PURE__ */ t.jsxs("div", { className: "flex gap-0.5 items-start", children: [
-    s[n],
-    /* @__PURE__ */ t.jsx("p", { className: a(" prometeo-fonts-body-small", c[n]), children: r.children })
-  ] }) : r.children });
+  return /* @__PURE__ */ n.jsx("div", { ref: e.ref, className: a("pl-3", l), children: typeof e.children == "string" ? /* @__PURE__ */ n.jsxs("div", { className: "flex gap-0.5 items-start", children: [
+    s[r],
+    /* @__PURE__ */ n.jsx("p", { className: a(" prometeo-fonts-body-small", c[r]), children: e.children })
+  ] }) : e.children });
 };
 de.displayName = "HelperText";
-const ke = z(de), ze = {
+const Ie = I(de), Oe = {
   default: {
     container: "text-neutral-default-default border-neutral-default-default ",
     icon: ""
@@ -59,21 +59,21 @@ const ke = z(de), ze = {
 }, oe = {
   icon: " text-neutral-default-disabled",
   container: " border-neutral-strong-default text-neutral-default-disabled"
-}, fe = ({ id: r, label: n, onRemove: u, className: c, disabled: s, variant: o = "default" }) => /* @__PURE__ */ t.jsxs(
+}, fe = ({ id: e, label: r, onRemove: l, className: c, disabled: s, variant: o = "default" }) => /* @__PURE__ */ n.jsxs(
   "div",
   {
     className: a(
       "inline-flex max-w-[calc(50%-0.25rem)] items-center gap-1 px-2 py-1 bg-inherit text-xs rounded-lg border",
-      ze[o].container,
+      Oe[o].container,
       s && oe.container
     ),
     children: [
-      /* @__PURE__ */ t.jsx("span", { className: "truncate w-max ", children: n }),
-      u && /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ n.jsx("span", { className: "truncate w-max ", children: r }),
+      l && /* @__PURE__ */ n.jsx(
         "button",
         {
-          onMouseDown: (p) => {
-            s || (p.stopPropagation(), p.preventDefault(), u?.(r));
+          onMouseDown: (g) => {
+            s || (g.stopPropagation(), g.preventDefault(), l?.(e));
           },
           className: a(
             "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",
@@ -82,27 +82,27 @@ const ke = z(de), ze = {
           ),
           type: "button",
           tabIndex: -1,
-          children: /* @__PURE__ */ t.jsx(k.Close, { size: 18, className: a(s && oe.icon) })
+          children: /* @__PURE__ */ n.jsx(z.Close, { size: 18, className: a(s && oe.icon) })
         }
       )
     ]
   }
 );
 fe.displayName = "Chip";
-const Ie = z(fe);
-function h(r, n) {
-  if (typeof n == "function")
-    return n(r);
-  const u = n?.split(".");
-  let c = r;
-  for (const s of u)
+const _e = I(fe);
+function m(e, r) {
+  if (typeof r == "function")
+    return r(e);
+  const l = r?.split(".");
+  let c = e;
+  for (const s of l)
     if (c && typeof c == "object" && s in c)
       c = c[s];
     else
       return;
   return c;
 }
-const X = {
+const Z = {
   default: {
     container: "",
     input: a(
@@ -151,7 +151,7 @@ const X = {
       "peer-focus:text-success-light"
     )
   }
-}, Y = {
+}, V = {
   input: a(
     "border-neutral-strong-default text-neutral-default-default",
     "focus:ring-primary-default-default focus:ring-[1px] focus:border-primary-default-default ",
@@ -165,199 +165,206 @@ const X = {
     "text-neutral-medium-disabled",
     "peer-focus:text-primary-default-default"
   )
-}, Se = ({
-  label: r,
-  onOptionClick: n,
-  value: u,
+}, Me = ({
+  label: e,
+  onOptionClick: r,
+  value: l,
   isLoading: c = !1,
   options: s,
   multiple: o = !1,
-  onClear: p,
-  onClose: m,
+  onClear: g,
+  onClose: x,
   className: i,
-  id: C,
-  emptyMessage: O = "No hay opciones disponibles",
-  optionValue: f,
-  optionLabel: v,
-  renderOption: I,
-  placeholder: N,
-  renderSelection: j,
-  containerClassName: V,
-  buttonClassName: $,
-  dropdownClassName: S,
-  displayMode: B = "compact",
-  onRemoveOption: _,
-  width: M = "100%",
+  id: E,
+  emptyMessage: P = "No hay opciones disponibles",
+  optionValue: d,
+  optionLabel: b,
+  renderOption: O,
+  placeholder: j,
+  renderSelection: w,
+  containerClassName: te,
+  buttonClassName: L,
+  dropdownClassName: _,
+  displayMode: G = "compact",
+  onRemoveOption: M,
+  width: $ = "100%",
   height: D,
-  labelVariant: b = "default",
-  attachToParent: d = !1,
-  name: l,
-  overflow: y = "wrap",
-  onChange: g,
-  helperComponent: ee,
-  errorComponent: te,
-  disabled: E = !1,
-  variant: L = "default"
+  labelVariant: y = "default",
+  attachToParent: f = !1,
+  name: u,
+  overflow: v = "wrap",
+  onChange: h,
+  helperComponent: re,
+  errorComponent: ne,
+  disabled: H = !1,
+  variant: W = "default"
 }) => {
-  const [G, K] = ie(!1), W = F(null), re = F(null), ne = F(null), { ref: pe } = Pe(), { bind: H, ref: ge } = Ce({
+  const [A, K] = ie(!1), R = F(null), se = F(null), ae = F(null), { ref: pe } = ze(), { bind: S, ref: ge } = He({
     axis: "x",
     cursor: { idle: "default", dragging: "grabbing" }
-  }), A = u && u.length > 0, q = U(() => s?.filter((e) => u?.includes(h(e, f))), [s, u, f]), he = () => b === "static" ? "relative prometeo-fonts-label-large" : G || A ? "absolute top-0 -translate-y-1/2 left-2 scale-90 px-1 prometeo-fonts-body-medium" : "absolute top-1/2 -translate-y-1/2 scale-100 prometeo-fonts-body-large", J = {}, T = U(() => s.map((e) => ({
-    id: h(e, f),
-    value: h(e, f),
-    label: h(e, v)
-  })), [s, f, v]);
-  M && M !== "100%" && (J.width = M), D && (J.height = D);
-  const be = P(() => j ? { height: y === "scroll" ? "48px" : "max-content" } : D ? { height: D } : {}, [D, y, j]);
-  Z(() => {
-    const e = (x) => {
-      if (W.current) {
-        if (x.type === "mousedown" && W.current.contains(x.target) || x.type === "scroll" && re.current?.contains(x.target))
+  }), T = l && l.length > 0, q = B(() => s?.filter((t) => l?.includes(m(t, d))), [l, d, s]), he = () => y === "static" ? "relative prometeo-fonts-label-large" : A || T ? "absolute top-0 -translate-y-1/2 left-2 scale-90 px-1 prometeo-fonts-body-medium" : "absolute top-1/2 -translate-y-1/2 scale-100 prometeo-fonts-body-large", J = {};
+  $ && $ !== "100%" && (J.width = $), D && (J.height = D);
+  const be = k(() => w ? { height: v === "scroll" ? "48px" : "max-content" } : D ? { height: D } : {}, [D, v, w]);
+  ee(() => {
+    const t = (p) => {
+      if (R.current) {
+        if (p.type === "mousedown" && R.current.contains(p.target) || p.type === "scroll" && se.current?.contains(p.target))
           return;
         K(!1);
       }
     };
-    return document.addEventListener("mousedown", e), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e, !0), () => {
-      document.removeEventListener("mousedown", e), window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e, !0);
+    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);
     };
   }, []);
-  const se = P(() => {
-    K((e) => !e);
-  }, []), R = P((e) => {
+  const le = k(() => {
+    K((t) => !t);
+  }, []), Q = B(() => s.map((t) => ({
+    id: m(t, d),
+    value: m(t, d),
+    label: m(t, b)
+  })), [s, d, b]), U = k((t) => {
     if (o) {
-      const x = u?.includes(e.id);
-      let w = [];
-      const ue = T.filter((Q) => u?.includes(Q.id));
-      x ? w = ue.filter((Q) => Q.id !== e.id) : w = [...ue, e], g?.(w, l);
+      const p = l?.includes(t.id);
+      let N = [];
+      const ue = s.map((C) => ({
+        id: m(C, d),
+        value: m(C, d),
+        label: m(C, b)
+      })).filter((C) => l?.includes(C.id));
+      p ? N = ue.filter((C) => C.id !== t.id) : N = [...ue, t], h?.(N, u);
     } else
-      g?.([e], l);
-  }, [o, g, l, T, u]), ye = P((e) => {
-    n?.(e, l), R(e), o || (K(!1), m?.());
-  }, [o, n, m, l, R]), ve = (e) => {
-    e.preventDefault(), e.stopPropagation(), e.target.blur(), p?.(), g?.([], l);
-  }, ae = P((e) => {
-    o || g?.([], l);
-    const x = s.find((w) => h(w, f) === e);
-    if (x) {
-      const w = {
-        id: h(x, f),
-        label: h(x, v),
-        value: h(x, f)
+      h?.([t], u);
+  }, [o, h, u, s, d, b, l]), ye = k((t) => {
+    r?.(t, u), U?.(t), o || (K(!1), x?.());
+  }, [o, r, x, u, U]), ve = (t) => {
+    t.preventDefault(), t.stopPropagation(), t.target.blur(), g?.(), h?.([], u);
+  }, X = k((t) => {
+    o || h?.([], u);
+    const p = s.find((N) => m(N, d) === t);
+    if (p) {
+      const N = {
+        id: m(p, d),
+        label: m(p, b),
+        value: m(p, d)
       };
-      n?.(w, l), R(w), _?.(x);
+      r?.(N, u), U(N), M?.(p);
     }
-  }, [n, _, v, f, s, l, o, g, R]), De = U(() => b === "static" && N ? N : "", [b, N]), le = U(
-    () => new Set(q.map((e) => h(e, f))),
-    [q, f]
+  }, [r, M, b, d, s, u, o, h, U]), De = k((t) => {
+    X(t);
+  }, [X]), Ne = B(() => y === "static" && j ? j : "", [y, j]), Y = B(
+    () => new Set(q.map((t) => m(t, d))),
+    [q, d]
+  ), je = B(
+    () => Q.filter((t) => Y.has(t.id)),
+    [Q, Y]
   );
-  return /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ n.jsxs(
     "div",
     {
       className: a(
         "relative bg-inherit select-none w-full",
         i,
-        b === "static" && "mt-2"
+        y === "static" && "mt-2"
       ),
-      ref: W,
+      ref: R,
       style: J,
       draggable: !1,
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: a("relative bg-inherit ", V), children: [
-          /* @__PURE__ */ t.jsx(
+        /* @__PURE__ */ n.jsxs("div", { className: a("relative bg-inherit ", te), children: [
+          /* @__PURE__ */ n.jsx(
             "label",
             {
-              htmlFor: C,
+              htmlFor: E,
               ref: pe,
               className: a(
                 "left-3 pointer-events-none bg-inherit z-10",
-                b === "default" && "transition-all duration-200 ease-in-out",
+                y === "default" && "transition-all duration-200 ease-in-out",
                 he(),
-                A || G ? X[L].label : "text-neutral-medium-default",
-                E && Y.label
+                T || A ? Z[W].label : "text-neutral-medium-default",
+                H && V.label
               ),
-              children: r
+              children: e
             }
           ),
-          /* @__PURE__ */ t.jsxs(
+          /* @__PURE__ */ n.jsxs(
             "div",
             {
               role: "button",
-              id: C,
-              onClick: (e) => {
-                e.preventDefault(), e.stopPropagation(), se();
+              id: E,
+              onClick: (t) => {
+                t.preventDefault(), t.stopPropagation(), le();
               },
-              onKeyDown: (e) => {
-                (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), se());
+              onKeyDown: (t) => {
+                (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), le());
               },
               tabIndex: 0,
               className: a(
                 "w-full px-2 text-left border rounded-lg transition-all duration-200 ease-in-out",
                 "flex items-center justify-start bg-inherit gap-2 ",
                 "focus:outline-none",
-                B === "chips" && o && A ? "min-h-12 py-2" : !D && "h-12 min-h-12",
-                X[L].input,
-                E && Y.input,
-                $
+                G === "chips" && o && T ? "min-h-12 py-2" : !D && "h-12 min-h-12",
+                Z[W].input,
+                H && V.input,
+                L
               ),
               style: be(),
               children: [
-                /* @__PURE__ */ t.jsx(
+                /* @__PURE__ */ n.jsx(
                   "div",
                   {
                     className: a(
                       "flex-1 overflow-x-auto overflow-y-hidden px-1 prometeo-scrollbar-none  ",
-                      j ? " " : ""
+                      w ? " " : ""
                     ),
                     ref: ge,
-                    onPointerDown: H.onPointerDown,
-                    onPointerMove: H.onPointerMove,
-                    onPointerUp: H.onPointerUp,
-                    onPointerLeave: H.onPointerLeave,
-                    onPointerCancel: H.onPointerCancel,
-                    onClickCapture: H.onClickCapture,
-                    children: j ? ce.createElement(j, {
+                    onPointerDown: S.onPointerDown,
+                    onPointerMove: S.onPointerMove,
+                    onPointerUp: S.onPointerUp,
+                    onPointerLeave: S.onPointerLeave,
+                    onPointerCancel: S.onPointerCancel,
+                    onClickCapture: S.onClickCapture,
+                    children: w ? ce.createElement(w, {
                       selectedOptions: q,
-                      placeholder: N,
+                      placeholder: j,
                       multiple: o,
-                      onRemoveOption: (e) => {
-                        ae(e);
-                      },
-                      disabled: E
-                    }) : /* @__PURE__ */ t.jsx(
+                      onRemoveOption: De,
+                      disabled: H
+                    }) : /* @__PURE__ */ n.jsx(
                       xe,
                       {
-                        displayMode: B,
-                        selectedOptions: T.filter((e) => le.has(e.id)),
-                        placeholder: De,
-                        onRemoveOption: ae,
+                        displayMode: G,
+                        selectedOptions: je,
+                        placeholder: Ne,
+                        onRemoveOption: X,
                         multiple: o,
-                        className: a(y === "scroll" ? "flex-nowrap" : "flex-wrap"),
-                        disabled: E
+                        className: a(v === "scroll" ? "flex-nowrap" : "flex-wrap"),
+                        disabled: H
                       }
                     )
                   }
                 ),
-                /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
-                  c && /* @__PURE__ */ t.jsx(Ne, { size: "small", variant: "clip", className: "mt-2", speedMultiplier: 0.7 }),
-                  A && p && /* @__PURE__ */ t.jsx(
+                /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-2", children: [
+                  c && /* @__PURE__ */ n.jsx(Ce, { size: "small", variant: "clip", className: "mt-2", speedMultiplier: 0.7 }),
+                  T && g && /* @__PURE__ */ n.jsx(
                     "button",
                     {
-                      onMouseDown: (e) => {
-                        e.preventDefault(), e.stopPropagation(), ve(e);
+                      onMouseDown: (t) => {
+                        t.preventDefault(), t.stopPropagation(), ve(t);
                       },
                       type: "button",
                       tabIndex: -1,
-                      children: /* @__PURE__ */ t.jsx(k.Cancel, { size: 24, className: a(" cursor-pointer transition-all", X[L].icon) })
+                      children: /* @__PURE__ */ n.jsx(z.Cancel, { size: 24, className: a(" cursor-pointer transition-all", Z[W].icon) })
                     }
                   ),
-                  /* @__PURE__ */ t.jsx(
-                    k.ChevronDown,
+                  /* @__PURE__ */ n.jsx(
+                    z.ChevronDown,
                     {
                       size: 20,
                       className: a(
                         "transition-transform text-neutral-default-default",
-                        G ? "rotate-180" : "",
-                        E && Y.icon
+                        A ? "rotate-180" : "",
+                        H && V.icon
                       )
                     }
                   )
@@ -366,94 +373,94 @@ const X = {
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx(
-          Me,
+        /* @__PURE__ */ n.jsx(
+          Be,
           {
-            options: I ? s : T,
-            selectedOptionsIds: le,
+            options: O ? s : Q,
+            selectedOptionsIds: Y,
             onOptionClick: ye,
-            emptyMessage: O,
-            dropdownClassName: S,
+            emptyMessage: P,
+            dropdownClassName: _,
             multiple: o,
-            attachToParent: d,
-            selectRef: W,
-            dropdownRef: re,
-            isOpen: G,
-            renderOption: I,
-            optionLabel: v,
-            optionValue: f,
-            helperComponentRef: ne,
-            disabled: E,
-            labelVariant: b
+            attachToParent: f,
+            selectRef: R,
+            dropdownRef: se,
+            isOpen: A,
+            renderOption: O,
+            optionLabel: b,
+            optionValue: d,
+            helperComponentRef: ae,
+            disabled: H,
+            labelVariant: y
           }
         ),
-        (te || ee) && /* @__PURE__ */ t.jsx(
-          ke,
+        (ne || re) && /* @__PURE__ */ n.jsx(
+          Ie,
           {
-            ref: ne,
-            variant: L,
+            ref: ae,
+            variant: W,
             className: "mt-1",
-            children: te || ee
+            children: ne || re
           }
         )
       ]
     }
   );
-}, Re = z(Se);
-function _e({
-  options: r,
-  onOptionClick: n,
-  dropdownClassName: u,
+}, Fe = I(Me, (e, r) => e.value === r.value && e.options === r.options && e.isLoading === r.isLoading && e.disabled === r.disabled && e.errorComponent === r.errorComponent && e.helperComponent === r.helperComponent && e.variant === r.variant && e.label === r.label && e.id === r.id && e.name === r.name && e.placeholder === r.placeholder);
+function $e({
+  options: e,
+  onOptionClick: r,
+  dropdownClassName: l,
   emptyMessage: c,
   selectedOptionsIds: s,
   multiple: o,
-  attachToParent: p,
-  selectRef: m,
+  attachToParent: g,
+  selectRef: x,
   dropdownRef: i,
-  isOpen: C,
-  renderOption: O,
-  optionValue: f,
-  optionLabel: v,
-  helperComponentRef: I,
-  disabled: N,
-  labelVariant: j
+  isOpen: E,
+  renderOption: P,
+  optionValue: d,
+  optionLabel: b,
+  helperComponentRef: O,
+  disabled: j,
+  labelVariant: w
 }) {
-  const $ = j === "static" ? -24 : 4, [S, B] = ie("down"), _ = (d) => {
-    if (!i.current || !m.current) return;
-    const l = m.current.getBoundingClientRect();
-    switch (d || S) {
+  const L = w === "static" ? -24 : 4, [_, G] = ie("down"), M = (f) => {
+    if (!i.current || !x.current) return;
+    const u = x.current.getBoundingClientRect();
+    switch (f || _) {
       case "down":
-        i.current.style.top = `${l.top + l.height - (I?.current?.offsetHeight ? I?.current?.offsetHeight + 4 : 0)}px`;
+        i.current.style.top = `${u.top + u.height - (O?.current?.offsetHeight ? O?.current?.offsetHeight + 4 : 0)}px`;
         break;
       case "up":
-        i.current.style.top = "auto", i.current.style.bottom = `${window.innerHeight - l.top + $}px`;
+        i.current.style.top = "auto", i.current.style.bottom = `${window.innerHeight - u.top + L}px`;
         break;
     }
-    i.current.style.left = `${l.left}px`, i.current.style.width = `${l.width}px`;
-  }, M = () => {
-    if (!i.current || !m.current) return S;
-    const d = m.current.getBoundingClientRect(), l = d.bottom + 240 < window.innerHeight, y = d.top - 240 - $ > 0;
-    let g = "down";
-    return l ? g = "down" : y && (g = "up"), g;
-  }, D = (d) => {
-    if (!(!i.current || !m.current)) {
-      if (i.current.style.transition = "max-height 0.2s ease,opacity 0.2s ease", !d) {
+    i.current.style.left = `${u.left}px`, i.current.style.width = `${u.width}px`;
+  }, $ = () => {
+    if (!i.current || !x.current) return _;
+    const f = x.current.getBoundingClientRect(), u = f.bottom + 240 < window.innerHeight, v = f.top - 240 - L > 0;
+    let h = "down";
+    return u ? h = "down" : v && (h = "up"), h;
+  }, D = (f) => {
+    if (!(!i.current || !x.current)) {
+      if (i.current.style.transition = "max-height 0.2s ease,opacity 0.2s ease", !f) {
         i.current.style.maxHeight = "0", i.current.style.opacity = "0", i.current.style.pointerEvents = "none";
         return;
       }
-      if (!p) {
-        const l = M();
-        B(l), _(l);
+      if (!g) {
+        const u = $();
+        G(u), M(u);
       }
       i.current.style.maxHeight = "240px", i.current.style.opacity = "1", i.current.style.pointerEvents = "auto";
     }
   };
-  Z(() => {
-    p || !m.current || !C || _();
-  }, [s]), Z(() => {
-    D(C);
-  }, [C]);
-  const b = /* @__PURE__ */ t.jsx(
+  ee(() => {
+    g || !x.current || !E || M();
+  }, [s]), ee(() => {
+    D(E);
+  }, [E]);
+  const y = /* @__PURE__ */ n.jsx(
     "div",
     {
       ref: i,
@@ -464,82 +471,82 @@ function _e({
       className: a(
         " z-50 w-full mt-1 bg-neutral-default-default border border-neutral-default-default rounded-md shadow-lg",
         "max-h-60 overflow-auto",
-        p ? "absolute z-50 " : "fixed z-100 top-0 left-0",
-        S === "up" ? "h-auto" : "min-h-52",
-        u
+        g ? "absolute z-50 " : "fixed z-100 top-0 left-0",
+        _ === "up" ? "h-auto" : "min-h-52",
+        l
       ),
-      children: r.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: c }) : r.map((d) => {
-        const l = typeof d.id < "u" ? d.id : h(d, f), y = s.has(l), g = P(() => {
-          n({
-            id: l,
-            label: String(h(d, v)),
-            value: h(d, f)
+      children: e.length === 0 ? /* @__PURE__ */ n.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: c }) : e.map((f) => {
+        const u = typeof f.id < "u" ? f.id : m(f, d), v = s.has(u), h = () => {
+          r({
+            id: u,
+            label: String(m(f, b)),
+            value: m(f, d)
           });
-        }, [n, l, v, f, d]);
-        return O ? ce.createElement(O, {
-          key: l,
-          option: d,
-          isSelected: y,
+        };
+        return P ? ce.createElement(P, {
+          key: u,
+          option: f,
+          isSelected: v,
           multiple: o,
-          onSelect: g,
-          disabled: N
-        }) : /* @__PURE__ */ t.jsx(
+          onSelect: h,
+          disabled: j
+        }) : /* @__PURE__ */ n.jsx(
           me,
           {
-            option: d,
+            option: f,
             multiple: o,
-            isSelected: y,
-            onSelect: n,
-            disabled: N
+            isSelected: v,
+            onSelect: r,
+            disabled: j
           },
-          l
+          u
         );
       })
     }
   );
-  return p ? b : je(b, document.body);
+  return g ? y : Ee(y, document.body);
 }
-const Me = z(_e), me = z(({ option: r, isSelected: n, onSelect: u, multiple: c, disabled: s }) => (
+const Be = I($e), me = I(({ option: e, isSelected: r, onSelect: l, multiple: c, disabled: s }) => (
   // biome-ignore lint/a11y/noStaticElementInteractions: no keyboard interaction needed
-  /* @__PURE__ */ t.jsxs(
+  /* @__PURE__ */ n.jsxs(
     "div",
     {
       onMouseDown: (o) => {
-        o.preventDefault(), o.stopPropagation(), !s && u?.(r);
+        o.preventDefault(), o.stopPropagation(), !s && l?.(e);
       },
       className: a(
         "px-3 py-2 cursor-pointer flex items-center transition-colors text-neutral-default-default ",
-        n ? "bg-neutral-medium-selected text-primary-default-default" : "hover:bg-neutral-medium-hover text-neutral-default-hover",
+        r ? "bg-neutral-medium-selected text-primary-default-default" : "hover:bg-neutral-medium-hover text-neutral-default-hover",
         s && "text-neutral-default-disabled hover:bg-neutral-default-default"
       ),
       children: [
-        c && /* @__PURE__ */ t.jsx(
-          Ee,
+        c && /* @__PURE__ */ n.jsx(
+          Se,
           {
-            checked: n,
+            checked: r,
             disabled: s
           }
         ),
-        /* @__PURE__ */ t.jsx("span", { children: r.label })
+        /* @__PURE__ */ n.jsx("span", { children: e.label })
       ]
     }
   )
-));
+), (e, r) => e.isSelected === r.isSelected);
 me.displayName = "DefaultOptionRenderer";
-const xe = z(({ selectedOptions: r, placeholder: n, onRemoveOption: u, displayMode: c, multiple: s, className: o, disabled: p }) => r?.length === 0 ? n ? /* @__PURE__ */ t.jsx("span", { className: "text-neutral-medium-default opacity-50", children: n }) : null : c === "chips" && s ? /* @__PURE__ */ t.jsx("div", { className: a("flex items-center gap-1 ", o), children: r.map((m) => /* @__PURE__ */ t.jsx(
-  Ie,
+const xe = I(({ selectedOptions: e, placeholder: r, onRemoveOption: l, displayMode: c, multiple: s, className: o, disabled: g }) => e?.length === 0 ? r ? /* @__PURE__ */ n.jsx("span", { className: "text-neutral-medium-default opacity-50", children: r }) : null : c === "chips" && s ? /* @__PURE__ */ n.jsx("div", { className: a("flex items-center gap-1 ", o), children: e.map((x) => /* @__PURE__ */ n.jsx(
+  _e,
   {
-    id: m.id,
-    label: m.label,
-    onRemove: u,
-    disabled: p
+    id: x.id,
+    label: x.label,
+    onRemove: l,
+    disabled: g
   },
-  m.id
-)) }) : r?.length === 1 ? /* @__PURE__ */ t.jsx("span", { children: r[0].label }) : /* @__PURE__ */ t.jsxs("span", { children: [
-  r?.length,
+  x.id
+)) }) : e?.length === 1 ? /* @__PURE__ */ n.jsx("span", { children: e[0].label }) : /* @__PURE__ */ n.jsxs("span", { children: [
+  e?.length,
   " seleccionados"
 ] }));
 xe.displayName = "DefaultSelectionDisplay";
 export {
-  Re as default
+  Fe as default
 };