prometeo-design-system 2.8.5 → 2.8.7

package/dist/components/Select/Select.js

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