prometeo-design-system 2.6.2 → 2.6.4

package/dist/Select-CSFKGhU7.js

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