prometeo-design-system 3.1.5 → 3.1.6

package/dist/Select.es.js

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