prometeo-design-system 2.4.3 → 2.5.0

package/dist/Select-CxJFcGuQ.js

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