prometeo-design-system 2.8.8 → 2.8.9

package/dist/Select-BD5FTxVw.js

@@ -0,0 +1,1100 @@
+import { j as s } from "./jsx-runtime-DKDX3adD.js";
+import { a as Qe, i as Xe, f as Ue, S as Ye } from "./Icons-DtFC5DJ7.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 Ze } from "react";
+import et from "./Spinner.es.js";
+import { createPortal as tt } from "react-dom";
+import { u as nt } from "./useDragScroll-CHN9OMwn.js";
+import { u as rt, I as lt } from "./Input-Cck37DpG.js";
+import { H as ot } from "./HelperComponent-g_xuKWzK.js";
+import st from "./CheckBox.es.js";
+import Ke from "./Skeleton.es.js";
+const at = {
+  default: {
+    container: "text-neutral-default-default border-neutral-default-default ",
+    icon: ""
+  },
+  error: {
+    container: "",
+    icon: ""
+  },
+  success: {
+    container: "",
+    icon: ""
+  }
+}, Fe = {
+  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]",
+      at[v].container,
+      u && Fe.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(Qe, { size: 18, className: f(u && Fe.icon) })
+        }
+      )
+    ]
+  }
+);
+Ve.displayName = "Chip";
+const it = 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 qe = (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;
+}, ut = (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;
+}, _e = {
+  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")
+  }
+}, Re = {
+  input: f(
+    "border-neutral-strong-default text-neutral-default-default pointer-events-none",
+    "focus:ring-0 focus:border-primary-default-disabled ",
+    "hover:border-neutral-default-disabled"
+  ),
+  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 ct(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: je,
+    renderOptionContext: Ie,
+    buttonClassName: He,
+    dropdownClassName: ae,
+    containerClassName: Q,
+    dropdownOptions: O,
+    helperComponent: ee,
+    errorComponent: Ce,
+    onRemoveOption: Ee,
+    onOptionClick: X,
+    onClose: Se,
+    onClear: me,
+    disabled: te = !1,
+    overflow: We = "wrap",
+    variant: F = "default",
+    isLoading: he = !1,
+    attachToParent: Ae = !1,
+    displayMode: we = "compact",
+    labelVariant: ie = "default",
+    disableOpenOnFocus: Me = !1,
+    emptyMessage: ke = "No hay opciones disponibles"
+  } = e, { ref: Oe } = rt(), { bind: ne, ref: ze } = nt({
+    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 !== "", Le = {}, Te = oe(() => ie === "static" && N ? N : "", [ie, N]), Ge = oe(
+    () => O?.controledSearchValue || v,
+    [O?.controledSearchValue, v]
+  ), $e = () => {
+    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(() => ut(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 Pe;
+        B === "select" || B === "toggle" && !D ? Pe = C : Pe = void 0, e.onChange?.(Pe, 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), Ee?.(a);
+    },
+    [
+      X,
+      Ee,
+      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]), Ze(
+    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") && !Me && !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: Le,
+      children: [
+        /* @__PURE__ */ s.jsxs("div", { className: f("relative bg-inherit ", Q), children: [
+          /* @__PURE__ */ s.jsx(
+            "label",
+            {
+              htmlFor: x,
+              ref: Oe,
+              className: f(
+                "left-3 pointer-events-none bg-inherit z-10",
+                ie === "default" && "transition-all duration-200 ease-in-out",
+                $e(),
+                pe || n ? _e[F].label : "text-neutral-medium-default",
+                te && Re.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",
+                _e[F].input,
+                te && Re.input,
+                He
+              ),
+              children: [
+                /* @__PURE__ */ s.jsx(
+                  "div",
+                  {
+                    className: f(
+                      "flex-1 overflow-x-auto overflow-y-hidden px-1 prometeo-scrollbar-none "
+                    ),
+                    ref: ze,
+                    onPointerUp: ne.onPointerUp,
+                    onPointerDown: ne.onPointerDown,
+                    onPointerMove: ne.onPointerMove,
+                    onPointerLeave: ne.onPointerLeave,
+                    onPointerCancel: ne.onPointerCancel,
+                    onClickCapture: ne.onClickCapture,
+                    children: je ? Ne.createElement(
+                      Z(
+                        je,
+                        (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: Te,
+                        onRemoveOption: q,
+                        multiple: e.multiple || !1,
+                        className: f(
+                          We === "scroll" ? "flex-nowrap" : "flex-wrap"
+                        ),
+                        disabled: te
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
+                  he && /* @__PURE__ */ s.jsx(
+                    et,
+                    {
+                      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(
+                        Xe,
+                        {
+                          size: 20,
+                          className: f(
+                            " cursor-pointer transition-all",
+                            _e[F].icon
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ s.jsx(
+                    Ue,
+                    {
+                      size: 20,
+                      className: f(
+                        "transition-transform text-neutral-default-default",
+                        n ? "rotate-180" : "",
+                        te && Re.icon
+                      )
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] }),
+        n && /* @__PURE__ */ s.jsx(
+          mt,
+          {
+            label: M,
+            isOpen: n,
+            disabled: te,
+            optionValue: E,
+            optionLabel: de,
+            emptyMessage: ke,
+            labelVariant: ie,
+            renderOption: J,
+            renderOptionGroupHeader: fe,
+            attachToParent: Ae,
+            filteredOptions: i,
+            multiple: e.multiple || !1,
+            dropdownClassName: ae,
+            selectedOptionsIds: c,
+            setFilteredOptions: u,
+            renderOptionContext: Ie,
+            options: d,
+            selectRef: j,
+            dropdownRef: p,
+            selectButtonRef: k,
+            helperComponentRef: W,
+            onOptionClick: y,
+            onCloseDropdown: () => m(!1),
+            searchValue: Ge,
+            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(
+          ot,
+          {
+            ref: W,
+            variant: F,
+            className: "absolute bottom-0 h-5 overflow-visible ",
+            children: Ce || ee
+          }
+        ) })
+      ]
+    }
+  );
+}
+const dt = Z(ct, (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), Dt = dt;
+function ft({
+  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: je,
+  dropdownClassName: Ie,
+  helperComponentRef: He,
+  selectedOptionsIds: ae,
+  setFilteredOptions: Q,
+  onSearchValueChange: O,
+  isLoading: ee = !1,
+  hideSearchBar: Ce = !1,
+  inputSearchPlaceholder: Ee = "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, Ae] = De({
+    direction: "down",
+    height: F
+  }), [we, ie] = De(
+    () => /* @__PURE__ */ new Set()
+  ), Me = U(
+    (r) => !we.has(r),
+    [we]
+  ), ke = 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;
+      });
+    },
+    []
+  ), Oe = (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 - (He?.current?.offsetHeight ? He?.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`);
+  }, ze = () => {
+    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 = ze();
+        Ae(o), Oe(o.direction), ne(o.height);
+      }
+      p.current.style.opacity = "1", p.current.style.pointerEvents = "auto";
+    }
+  };
+  ve(() => {
+    E || !h.current || !n || Oe();
+  }, [ae]), ve(() => {
+    pe(n);
+  }, [n]), ve(() => {
+    i && Q(i);
+  }, [i]), ve(() => {
+    if (ee || !I) return;
+    const r = Le(i, I);
+    Q(r);
+  }, [i]);
+  const Le = (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 = qe(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 = qe(y.label, o);
+      d ? R && w.push(y) : R && c.push(y);
+    }), L(), c;
+  }, Te = (r) => {
+    const o = Le(i, r);
+    if (Q(o), O) {
+      if (r === "") {
+        Ge();
+        return;
+      }
+      O(r);
+      return;
+    }
+    z && i && z(r);
+  }, Ge = 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
+  ]), $e = (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(
+      Be,
+      {
+        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",
+        Ie
+      ),
+      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(
+              lt,
+              {
+                name: "",
+                label: "",
+                size: "small",
+                tabIndex: 0,
+                value: I,
+                disabled: v,
+                ref: V,
+                labelVariant: "static",
+                icon: /* @__PURE__ */ s.jsx(Ye, {}),
+                isFetching: ee,
+                onKeyDown: $e,
+                onClear: Ge,
+                onChange: (r) => Te(r.target.value),
+                placeholder: Ee,
+                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: je || 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 : Me(g);
+                  r = H;
+                  const $ = c.originalOption, P = c.groupData?.groupOptions ?? [], le = (_) => {
+                    X && ke(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: () => ke(g),
+                          children: /* @__PURE__ */ s.jsx(
+                            Ue,
+                            {
+                              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(
+                  Be,
+                  {
+                    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 : tt(ge, document.body);
+}
+const mt = Z(
+  ft,
+  (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
+), Be = 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(Ke, { className: "size-6 aspect-square" }),
+            /* @__PURE__ */ s.jsx(Ke, { 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(st, { checked: n, disabled: u }),
+            /* @__PURE__ */ s.jsx("span", { children: p })
+          ]
+        },
+        e.id
+      )
+    );
+  },
+  (e, n) => e.isSelected === n.isSelected && e.disabled === n.disabled
+);
+Be.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(
+    it,
+    {
+      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 {
+  Dt as S,
+  G as g
+};