prometeo-design-system 2.3.4 → 2.3.6

package/dist/Select.es.js

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