prometeo-design-system 2.3.3 → 2.3.5

package/dist/Select.es.js

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