prometeo-design-system 2.5.4 → 2.5.6

package/dist/Select-CrTtTmXZ.js

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