prometeo-design-system 2.4.4 → 2.5.1

package/dist/Select-B32JqJIS.js

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