prometeo-design-system 2.6.8 → 2.7.0

package/dist/Select-BQMdfu1n.js

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