prometeo-design-system 2.4.1 → 2.4.3

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