import { jsx as a, jsxs as _, Fragment as te } from "react/jsx-runtime";
import { useFormFieldControl as oe } from "../form-field/index.mjs";
import { useCombinedState as Le } from "@spark-ui/hooks/use-combined-state";
import { b as g, u as Ee } from "../downshift.esm-Ncwetv0s.mjs";
import { Children as B, isValidElement as z, createContext as ne, useRef as A, useState as T, useEffect as P, useId as q, Fragment as se, useContext as re, useLayoutEffect as ct } from "react";
import { Popover as K } from "../popover/index.mjs";
import { DeleteOutline as Ae } from "@spark-ui/icons/DeleteOutline";
import { a as f, c as Me } from "../index-BmAFn37q.mjs";
import { I as $ } from "../Icon-D1RueiPY.mjs";
import { useMergeRefs as W } from "@spark-ui/hooks/use-merge-refs";
import { ArrowHorizontalDown as dt } from "@spark-ui/icons/ArrowHorizontalDown";
import { I as ut } from "../IconButton-BY3gYXtU.mjs";
import { V as mt } from "../VisuallyHidden-ByNP7ZUI.mjs";
import { Check as pt } from "@spark-ui/icons/Check";
import { S as bt } from "../Spinner-CYL5kyzM.mjs";
function Fe(e, o) {
  let t = 0;
  for (const [n] of e.entries()) {
    if (n === o)
      return t;
    t++;
  }
  return -1;
}
const ft = (e, o) => {
  let t = 0;
  for (const n of e.keys()) {
    if (t === o) return n;
    t++;
  }
}, It = (e, o) => {
  const t = ft(e, o);
  return t !== void 0 ? e.get(t) : void 0;
}, J = (e) => e ? e.type.displayName : "", Be = (e, o = []) => (B.forEach(e, (t) => {
  if (z(t)) {
    if (J(t) === "Combobox.Item") {
      const n = t.props;
      o.push({
        value: n.value,
        disabled: !!n.disabled,
        text: Ke(n.children)
      });
    }
    t.props.children && Be(t.props.children, o);
  }
}), o), ze = (e) => {
  if (!e) return "";
  for (const o of B.toArray(e))
    if (z(o)) {
      const t = o;
      if (J(t) === "Combobox.ItemText")
        return t.props.children;
      const n = ze(t.props.children);
      if (n) return n;
    }
  return "";
}, Ke = (e) => typeof e == "string" ? e : ze(e), Re = (e) => {
  const o = /* @__PURE__ */ new Map();
  return Be(e).forEach((t) => {
    o.set(t.value, t);
  }), o;
}, $e = (e, o) => B.toArray(e).some((t) => z(t) ? J(t) === o ? !0 : t.props.children ? $e(t.props.children, o) : !1 : !1), F = (e, o) => B.toArray(e).filter(z).find((t) => o === J(t) || ""), xt = ({
  multiselect: e,
  selectedItems: o,
  allowCustomValue: t = !1,
  setSelectedItems: n,
  triggerAreaRef: l,
  items: r
}) => (i, { changes: s, type: m }) => {
  const u = l.current?.contains?.(document.activeElement);
  switch (m) {
    case g.stateChangeTypes.InputClick:
      return {
        ...s,
        isOpen: !0
        // keep menu opened
      };
    case g.stateChangeTypes.InputKeyDownEnter:
    case g.stateChangeTypes.ItemClick: {
      const b = { ...s };
      if (s.selectedItem != null) {
        b.inputValue = "", b.isOpen = !0;
        const O = Fe(r, s.selectedItem.value);
        b.highlightedIndex = O;
        const k = e.selectedItems.some(
          (x) => x.value === s.selectedItem?.value
        ) ? o.filter((x) => x.value !== s.selectedItem?.value) : [...o, s.selectedItem];
        n(k);
      }
      return b;
    }
    case g.stateChangeTypes.ToggleButtonClick:
      return {
        ...s,
        inputValue: t ? s.inputValue : ""
      };
    case g.stateChangeTypes.InputChange:
      return {
        ...s,
        selectedItem: s.highlightedIndex === -1 ? null : s.selectedItem
      };
    case g.stateChangeTypes.InputBlur:
      return {
        ...s,
        inputValue: t ? s.inputValue : "",
        isOpen: u
      };
    default:
      return s;
  }
}, yt = ({
  filteredItems: e,
  allowCustomValue: o = !1,
  setSelectedItem: t
}) => (l, { changes: r, type: c }) => {
  const i = e.find(
    (s) => s.text.toLowerCase() === l.inputValue.toLowerCase()
  );
  switch (c) {
    case g.stateChangeTypes.InputKeyDownEscape:
      return r.selectedItem || t(null), r;
    case g.stateChangeTypes.ItemClick:
    case g.stateChangeTypes.InputKeyDownEnter:
      return r.selectedItem && t(r.selectedItem), r;
    case g.stateChangeTypes.InputClick:
      return { ...r, isOpen: !0 };
    case g.stateChangeTypes.ToggleButtonClick:
    case g.stateChangeTypes.InputBlur:
      return o ? r : l.inputValue === "" ? (t(null), { ...r, selectedItem: null }) : i ? (t(i), { ...r, selectedItem: i, inputValue: i.text }) : l.selectedItem ? { ...r, inputValue: l.selectedItem.text } : { ...r, inputValue: "" };
    default:
      return r;
  }
}, We = ne(null), ee = (e, o) => o ? new Map(
  Array.from(e).filter(([t, { text: n }]) => n.toLowerCase().includes(o.toLowerCase()))
) : e, U = ":combobox", Ct = ({
  children: e,
  state: o,
  allowCustomValue: t = !1,
  filtering: n = "auto",
  disabled: l = !1,
  multiple: r = !1,
  readOnly: c = !1,
  wrap: i = !0,
  // Value
  value: s,
  defaultValue: m,
  onValueChange: u,
  // Open
  open: b,
  defaultOpen: O,
  onOpenChange: I,
  isLoading: k
}) => {
  const x = A(!1), [w, N] = T(""), [E, h] = T(n === "strict"), R = A(null), V = A(null), [X, G] = T(null), [D] = Le(s, m), Q = n === "strict" || n === "auto" && E, [C, qe] = T(Re(e)), [H, ve] = T(
    Q ? ee(C, w) : C
  ), [we, Ne] = T(
    C.get(D) || null
  ), [Te, Pe] = T(
    D ? [...C.values()].filter((d) => D.includes(d.value)) : []
  ), Se = (d) => {
    h(!1), d?.value !== we?.value && (Ne(d), setTimeout(() => {
      u?.(d?.value);
    }, 0));
  }, Y = (d) => {
    Pe(d), setTimeout(() => {
      u?.(d.map((y) => y.value));
    }, 0);
  };
  P(() => {
    if (!x.current) {
      x.current = !0;
      return;
    }
    if (r) {
      const d = D.reduce(
        (y, p) => {
          const S = C.get(p);
          return S ? [...y, S] : y;
        },
        []
      );
      Pe(D ? d : []);
    } else
      Ne(C.get(D) || null);
  }, [r ? JSON.stringify(D) : D]);
  const M = oe(), Ue = `${U}-label-${q()}`, Je = `${U}-field-${q()}`, Oe = M.id || Je, Xe = M.labelId || Ue, Qe = M.state || o, Ye = M.disabled ?? l, Ze = M.readOnly ?? c, [ke, et] = T(
    $e(e, "Combobox.Popover")
  ), [tt, ot] = T(!1), [nt, st] = T("mouse");
  P(() => {
    ve(Q ? ee(C, w) : C);
  }, [w, C]);
  const Ve = Ee({
    selectedItems: Te,
    stateReducer: (d, { type: y, changes: p }) => {
      const S = Ee.stateChangeTypes;
      switch (y) {
        case S.SelectedItemKeyDownBackspace:
        case S.SelectedItemKeyDownDelete: {
          Y(p.selectedItems || []);
          let L;
          return y === S.SelectedItemKeyDownDelete ? L = d?.activeIndex === p.selectedItems?.length ? -1 : d.activeIndex : L = (p?.activeIndex || 0) - 1 >= 0 ? d.activeIndex - 1 : p?.activeIndex, {
            ...p,
            activeIndex: L
          };
        }
        case S.SelectedItemClick:
          return V.current && V.current.focus(), {
            ...p,
            activeIndex: -1
            // the focus will remain on the input
          };
        case S.FunctionRemoveSelectedItem:
          return {
            ...p,
            activeIndex: -1
            // the focus will remain on the input
          };
        case S.DropdownKeyDownNavigationPrevious:
          return Z.closeMenu(), p;
        default:
          return p;
      }
    }
  }), De = Array.from(H.values());
  P(() => {
    X?.(w || "");
  }, [w]);
  const Z = g({
    inputId: Oe,
    items: De,
    selectedItem: r ? void 0 : we,
    id: Oe,
    labelId: Xe,
    // Input
    inputValue: w,
    onInputValueChange: ({ inputValue: d }) => {
      if (N(d), Q) {
        const y = ee(C, d || "");
        ve(y);
      }
    },
    // Open
    initialIsOpen: O,
    ...b != null && { isOpen: b },
    onIsOpenChange: (d) => {
      d.isOpen != null && I?.(d.isOpen);
    },
    // Custom Spark item object parsing
    itemToString: (d) => d?.text,
    isItemDisabled: (d) => {
      const y = !!w && !De.some((p) => d.value === p.value);
      return d.disabled || y;
    },
    // Main reducer
    stateReducer: r ? xt({
      multiselect: Ve,
      selectedItems: Te,
      allowCustomValue: t,
      setSelectedItems: Y,
      triggerAreaRef: R,
      items: C
    }) : yt({
      allowCustomValue: t,
      setSelectedItem: Se,
      filteredItems: [...H.values()]
    }),
    /**
     * Downshift default behaviour is to scroll into view the highlighted item when the dropdown opens. This behaviour is not stable and scrolls the dropdown to the bottom of the screen.
     */
    scrollIntoView: (d) => {
      d && d.scrollIntoView({ block: "nearest" });
    }
  });
  P(() => {
    const d = Re(e), y = [...C.values()], p = [...d.values()];
    (y.length !== p.length || y.some((L, j) => {
      const at = L.value !== p[j]?.value, it = L.text !== p[j]?.text;
      return at || it;
    })) && qe(d);
  }, [e]);
  const [rt, lt] = ke ? [K, { open: !0 }] : [se, {}];
  return /* @__PURE__ */ a(
    We.Provider,
    {
      value: {
        // Data
        itemsMap: C,
        filteredItemsMap: H,
        highlightedItem: It(H, Z.highlightedIndex),
        // State
        multiple: r,
        disabled: Ye,
        readOnly: Ze,
        areSelectedItemsInTrigger: tt,
        setAreSelectedItemsInTrigger: ot,
        hasPopover: ke,
        setHasPopover: et,
        state: Qe,
        lastInteractionType: nt,
        setLastInteractionType: st,
        wrap: i,
        // Refs
        innerInputRef: V,
        triggerAreaRef: R,
        // Downshift state
        ...Z,
        ...Ve,
        setInputValue: N,
        selectItem: Se,
        setSelectedItems: Y,
        isLoading: k,
        setOnInputValueChange: G,
        isTyping: E,
        setIsTyping: h
      },
      children: /* @__PURE__ */ a(rt, { ...lt, children: e })
    }
  );
}, v = () => {
  const e = re(We);
  if (!e)
    throw Error("useComboboxContext must be used within a Combobox provider");
  return e;
}, Ge = ({ children: e, ...o }) => /* @__PURE__ */ a(Ct, { ...o, children: e });
Ge.displayName = "Combobox";
const le = ({
  className: e,
  tabIndex: o = -1,
  onClick: t,
  ref: n,
  ...l
}) => {
  const r = v(), c = (i) => {
    i.stopPropagation(), r.multiple ? r.setSelectedItems([]) : r.selectItem(null), r.setInputValue(""), r.innerInputRef.current && r.innerInputRef.current.focus(), t && t(i);
  };
  return /* @__PURE__ */ a(
    "button",
    {
      ref: n,
      className: f(e, "h-sz-44 text-neutral hover:text-neutral-hovered"),
      tabIndex: o,
      onClick: c,
      type: "button",
      ...l,
      children: /* @__PURE__ */ a($, { size: "sm", children: /* @__PURE__ */ a(Ae, {}) })
    }
  );
};
le.displayName = "Combobox.ClearButton";
const ae = ({
  className: e,
  closedLabel: o,
  openedLabel: t,
  intent: n = "neutral",
  design: l = "ghost",
  size: r = "sm",
  ref: c,
  ...i
}) => {
  const s = v(), { ref: m, ...u } = s.getToggleButtonProps({
    disabled: s.disabled || s.readOnly,
    onClick: (I) => {
      I.stopPropagation();
    }
  }), b = u["aria-expanded"], O = W(c, m);
  return /* @__PURE__ */ a(
    ut,
    {
      ref: O,
      className: f(e, "ml-sm mt-[calc((44px-32px)/2)]"),
      intent: n,
      design: l,
      size: r,
      ...u,
      ...i,
      "aria-label": b ? t : o,
      disabled: s.disabled,
      children: /* @__PURE__ */ a(
        $,
        {
          className: f("shrink-0", "rotate-0 transition duration-100 ease-in", {
            "rotate-180": b
          }),
          size: "sm",
          children: /* @__PURE__ */ a(dt, {})
        }
      )
    }
  );
};
ae.displayName = "Combobox.Disclosure";
const ie = ({ className: e, children: o, ref: t }) => v().filteredItemsMap.size === 0 ? /* @__PURE__ */ a(
  "div",
  {
    ref: t,
    className: f("px-lg py-md text-body-1 text-on-surface/dim-1", e),
    children: o
  }
) : null;
ie.displayName = "Combobox.Empty";
const He = ne(null), gt = ({ children: e }) => {
  const o = `${U}-group-label-${q()}`;
  return /* @__PURE__ */ a(He.Provider, { value: { groupLabelId: o }, children: e });
}, je = () => {
  const e = re(He);
  if (!e)
    throw Error("useComboboxGroupContext must be used within a ComboboxGroup provider");
  return e;
}, ce = ({ children: e, ref: o, ...t }) => /* @__PURE__ */ a(gt, { children: /* @__PURE__ */ a(ht, { ref: o, ...t, children: e }) }), ht = ({ children: e, className: o, ref: t }) => {
  const n = v(), l = je();
  return B.toArray(e).some((c) => z(c) && n.filteredItemsMap.get(c.props.value)) ? /* @__PURE__ */ a(
    "div",
    {
      ref: t,
      role: "group",
      "aria-labelledby": l.groupLabelId,
      className: f(o),
      children: e
    }
  ) : null;
};
ce.displayName = "Combobox.Group";
const de = ({
  "aria-label": e,
  className: o,
  placeholder: t,
  value: n,
  defaultValue: l,
  onValueChange: r,
  ref: c,
  ...i
}) => {
  const s = v(), m = oe(), [u] = Le(n, l), { isInvalid: b, description: O } = m;
  P(() => {
    u != null && s.setInputValue(u);
  }, [u]), P(() => {
    r && s.setOnInputValueChange(() => r), !s.multiple && s.selectedItem && s.setInputValue(s.selectedItem.text);
  }, []);
  const I = s.hasPopover ? K.Trigger : se, k = s.hasPopover ? {
    asChild: !0,
    type: void 0
  } : {}, x = s.getDropdownProps(), w = W(c, s.innerInputRef, x.ref), N = s.getInputProps({
    disabled: s.disabled || s.readOnly,
    ...x,
    onKeyDown: (V) => {
      x.onKeyDown?.(V), s.setLastInteractionType("keyboard"), s.setIsTyping(!0);
    },
    /**
     *
     * Important:
     * - without this, the input cursor is moved to the end after every change.
     * @see https://github.com/downshift-js/downshift/issues/1108#issuecomment-674180157
     */
    onChange: (V) => {
      s.setInputValue(V.target.value);
    },
    ref: w
  }), E = s.multiple ? !s.areSelectedItemsInTrigger || s.selectedItems.length === 0 : s.selectedItem === null;
  function h(V, X) {
    return (G) => {
      V?.(G), X?.(G);
    };
  }
  const R = {
    onBlur: h(i.onBlur, N.onBlur),
    onChange: h(i.onChange, N.onChange),
    onClick: h(i.onClick, N.onClick),
    onKeyDown: h(i.onKeyDown, N.onKeyDown)
  };
  return /* @__PURE__ */ _(te, { children: [
    e && /* @__PURE__ */ a(mt, { children: /* @__PURE__ */ a("label", { ...s.getLabelProps(), children: e }) }),
    /* @__PURE__ */ a(I, { ...k, children: /* @__PURE__ */ a(
      "input",
      {
        "data-spark-component": "combobox-input",
        type: "text",
        ...E && { placeholder: t },
        className: f(
          "max-w-full shrink-0 grow basis-[80px]",
          "h-sz-28 bg-surface px-sm text-body-1 text-ellipsis outline-hidden",
          "disabled:text-on-surface/dim-3 disabled:cursor-not-allowed disabled:bg-transparent",
          "read-only:text-on-surface read-only:cursor-default read-only:bg-transparent",
          o
        ),
        ...i,
        ...N,
        ...R,
        value: s.inputValue,
        "aria-label": e,
        disabled: s.disabled,
        readOnly: s.readOnly,
        "aria-invalid": b,
        "aria-describedby": O
      }
    ) })
  ] });
};
de.displayName = "Combobox.Input";
const _e = ne(null), vt = ({
  value: e,
  disabled: o = !1,
  children: t
}) => {
  const n = v(), [l, r] = T(void 0), c = Fe(n.filteredItemsMap, e), i = { disabled: o, value: e, text: Ke(t) }, s = n.multiple ? n.selectedItems.some((m) => m.value === e) : n.selectedItem?.value === e;
  return /* @__PURE__ */ a(
    _e.Provider,
    {
      value: { textId: l, setTextId: r, isSelected: s, itemData: i, index: c, disabled: o },
      children: t
    }
  );
}, ue = () => {
  const e = re(_e);
  if (!e)
    throw Error("useComboboxItemContext must be used within a ComboboxItem provider");
  return e;
}, me = ({ children: e, ref: o, ...t }) => {
  const { value: n, disabled: l } = t;
  return /* @__PURE__ */ a(vt, { value: n, disabled: l, children: /* @__PURE__ */ a(Nt, { ref: o, ...t, children: e }) });
}, wt = Me("px-lg py-md text-body-1", {
  variants: {
    selected: {
      true: "font-bold"
    },
    disabled: {
      true: "opacity-dim-3 cursor-not-allowed",
      false: "cursor-pointer"
    },
    highlighted: {
      true: ""
    },
    interactionType: {
      mouse: "",
      keyboard: ""
    }
  },
  compoundVariants: [
    {
      highlighted: !0,
      interactionType: "mouse",
      class: "bg-surface-hovered"
    },
    {
      highlighted: !0,
      interactionType: "keyboard",
      class: "u-outline"
    }
  ]
}), Nt = ({
  className: e,
  disabled: o = !1,
  value: t,
  children: n,
  ref: l,
  ...r
}) => {
  const c = v(), i = ue(), s = !!c.filteredItemsMap.get(t), { ref: m, ...u } = c.getItemProps({
    item: i.itemData,
    index: i.index
  }), b = W(l, m);
  return s ? /* @__PURE__ */ a(
    "li",
    {
      ref: b,
      className: f(
        wt({
          selected: i.isSelected,
          disabled: o,
          highlighted: c.highlightedItem?.value === t,
          interactionType: c.lastInteractionType,
          className: e
        })
      ),
      ...u,
      ...r,
      "aria-selected": i.isSelected,
      "aria-labelledby": i.textId,
      children: n
    },
    t
  ) : null;
};
me.displayName = "Combobox.Item";
const pe = ({
  className: e,
  children: o,
  label: t,
  ref: n
}) => {
  const { disabled: l, isSelected: r } = ue(), c = o || /* @__PURE__ */ a($, { size: "sm", children: /* @__PURE__ */ a(pt, { "aria-label": t }) });
  return /* @__PURE__ */ a(
    "span",
    {
      ref: n,
      className: f("min-h-sz-16 min-w-sz-16 flex", l && "opacity-dim-3", e),
      children: r && c
    }
  );
};
pe.displayName = "Combobox.ItemIndicator";
const be = ({ children: e, className: o, ref: t, ...n }) => {
  const l = v(), { ref: r, ...c } = l.getMenuProps({
    onMouseMove: () => {
      l.setLastInteractionType("mouse");
    }
  }), i = A(null), s = W(t, r, i), m = l.hasPopover ? l.isOpen : !0, u = l.hasPopover && !m;
  return ct(() => {
    i.current?.parentElement && (i.current.parentElement.style.pointerEvents = u ? "none" : "", i.current.style.pointerEvents = u ? "none" : "");
  }, [u]), /* @__PURE__ */ a(
    "ul",
    {
      ref: s,
      className: f(
        o,
        "flex flex-col",
        m ? "block" : "pointer-events-none invisible opacity-0",
        l.hasPopover && "p-lg",
        l.isLoading && "items-center overflow-y-auto"
      ),
      ...n,
      ...c,
      "aria-busy": l.isLoading,
      "data-spark-component": "combobox-items",
      children: l.isLoading ? /* @__PURE__ */ a(bt, { size: "sm" }) : e
    }
  );
};
be.displayName = "Combobox.Items";
const fe = ({ children: e, className: o, ref: t }) => {
  const n = `${U}-item-text-${q()}`, { setTextId: l } = ue();
  return P(() => (l(n), () => l(void 0))), /* @__PURE__ */ a("span", { id: n, className: f("inline", o), ref: t, children: e });
};
fe.displayName = "Combobox.ItemText";
const Ie = ({ children: e, className: o, ref: t }) => {
  const n = je();
  return /* @__PURE__ */ a(
    "div",
    {
      ref: t,
      id: n.groupLabelId,
      className: f("px-md py-sm text-body-2 text-neutral italic", o),
      children: e
    }
  );
};
Ie.displayName = "Combobox.Label";
const xe = ({ children: e }) => /* @__PURE__ */ a($, { size: "sm", className: "h-sz-44 shrink-0", children: e });
xe.displayName = "Combobox.LeadingIcon";
const ye = ({
  children: e,
  matchTriggerWidth: o = !0,
  sideOffset: t = 4,
  className: n,
  ref: l,
  ...r
}) => {
  const c = v();
  return P(() => (c.setHasPopover(!0), () => c.setHasPopover(!1)), []), /* @__PURE__ */ a(
    K.Content,
    {
      ref: l,
      inset: !0,
      asChild: !0,
      matchTriggerWidth: o,
      className: f("z-dropdown! relative", n),
      sideOffset: t,
      onOpenAutoFocus: (i) => {
        i.preventDefault();
      },
      ...r,
      "data-spark-component": "combobox-popover",
      children: e
    }
  );
};
ye.displayName = "Combobox.Popover";
const Ce = ({ children: e, ...o }) => /* @__PURE__ */ a(K.Portal, { ...o, children: e });
Ce.displayName = "Combobox.Portal";
const Tt = ({ item: e, index: o }) => {
  const t = v(), n = !t.disabled && !t.readOnly, l = (s) => {
    const m = s.target;
    t.lastInteractionType === "keyboard" && m.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "nearest"
    });
  }, { disabled: r, ...c } = t.getSelectedItemProps({
    disabled: t.disabled || t.readOnly,
    selectedItem: e,
    index: o
  });
  return /* @__PURE__ */ _(
    r ? "button" : "span",
    {
      role: "presentation",
      "data-spark-component": "combobox-selected-item",
      className: f(
        "h-sz-28 bg-neutral-container flex items-center rounded-md align-middle",
        "text-body-2 text-on-neutral-container",
        "disabled:opacity-dim-3 disabled:cursor-not-allowed",
        "focus-visible:u-outline-inset outline-hidden",
        { "px-md": !n, "pl-md": n }
      ),
      ...c,
      tabIndex: -1,
      ...r && { disabled: !0 },
      onFocus: l,
      children: [
        /* @__PURE__ */ a(
          "span",
          {
            className: f("line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis", {
              "w-max": !t.wrap
            }),
            children: e.text
          }
        ),
        t.disabled,
        n && /* @__PURE__ */ a(
          "button",
          {
            type: "button",
            tabIndex: -1,
            "aria-hidden": !0,
            className: "px-md h-full cursor-pointer",
            onClick: (s) => {
              s.stopPropagation();
              const m = t.selectedItems.filter(
                (u) => u.value !== e.value
              );
              t.setSelectedItems(m), t.innerInputRef.current && t.innerInputRef.current.focus({ preventScroll: !0 });
            },
            children: /* @__PURE__ */ a($, { size: "sm", children: /* @__PURE__ */ a(Ae, {}) })
          }
        )
      ]
    },
    `selected-item-${o}`
  );
}, ge = () => {
  const e = v();
  return e.multiple && e.selectedItems.length ? /* @__PURE__ */ a(te, { children: e.selectedItems.map((o, t) => /* @__PURE__ */ a(Tt, { item: o, index: t }, o.value)) }) : null;
};
ge.displayName = "Combobox.SelectedItems";
const Pt = Me(
  [
    "flex items-start gap-md min-h-sz-44 text-body-1",
    "h-fit rounded-lg px-lg",
    // outline styles
    "ring-1 outline-hidden ring-inset focus-within:ring-2 focus-within:ring-focus"
  ],
  {
    variants: {
      allowWrap: {
        true: "",
        false: "h-sz-44"
      },
      state: {
        undefined: "ring-outline",
        error: "ring-error",
        alert: "ring-alert",
        success: "ring-success"
      },
      disabled: {
        true: "cursor-not-allowed border-outline bg-on-surface/dim-5 text-on-surface/dim-3"
      },
      readOnly: {
        true: "cursor-default bg-on-surface/dim-5 text-on-surface"
      }
    },
    compoundVariants: [
      {
        disabled: !1,
        state: void 0,
        class: "default:hover:ring-outline-high"
      },
      {
        disabled: !1,
        readOnly: !1,
        class: "bg-surface text-on-surface cursor-text"
      }
    ],
    defaultVariants: {
      state: void 0,
      disabled: !1,
      readOnly: !1
    }
  }
), St = (e, o) => {
  const t = A(null);
  P(() => {
    const n = () => {
      const r = e.current?.scrollWidth || null;
      t.current && r && r > t.current && o(), t.current = r, requestAnimationFrame(n);
    }, l = requestAnimationFrame(n);
    return () => cancelAnimationFrame(l);
  }, [e]);
}, he = ({ className: e, children: o, ref: t }) => {
  const n = v(), l = oe(), r = F(o, "Combobox.LeadingIcon"), c = F(o, "Combobox.SelectedItems"), i = F(o, "Combobox.Input"), s = F(o, "Combobox.ClearButton"), m = F(o, "Combobox.Disclosure"), [u, b] = n.hasPopover ? [K.Anchor, { asChild: !0, type: void 0 }] : [se, {}], O = W(t, n.triggerAreaRef), I = A(null), k = l.disabled || n.disabled, x = l.readOnly || n.readOnly, w = !!s && !k && !x, N = () => {
    if (I.current && !n.wrap) {
      const { scrollWidth: h, clientWidth: R } = I.current;
      I.current.scrollLeft = h - R;
    }
  };
  St(I, N);
  const E = !!c;
  return P(() => {
    n.setAreSelectedItemsInTrigger(E);
  }, [E]), P(() => {
    const h = new ResizeObserver(N);
    return I.current && h.observe(I.current), () => {
      h.disconnect();
    };
  }, []), /* @__PURE__ */ a(te, { children: /* @__PURE__ */ a(u, { ...b, children: /* @__PURE__ */ _(
    "div",
    {
      ref: O,
      className: Pt({
        className: e,
        state: n.state,
        disabled: k,
        readOnly: x,
        allowWrap: n.wrap
      }),
      onClick: () => {
        !n.isOpen && !k && !x && (n.openMenu(), n.innerInputRef.current && n.innerInputRef.current.focus());
      },
      children: [
        r,
        /* @__PURE__ */ _(
          "div",
          {
            ref: I,
            className: f(
              "min-w-none gap-sm py-md inline-flex grow items-start",
              n.wrap ? "flex-wrap" : "u-no-scrollbar overflow-x-auto p-[2px]"
            ),
            children: [
              c,
              i
            ]
          }
        ),
        w && s,
        m
      ]
    }
  ) }) });
};
he.displayName = "Combobox.Trigger";
const Ot = Object.assign(Ge, {
  Group: ce,
  Item: me,
  Items: be,
  ItemText: fe,
  ItemIndicator: pe,
  Label: Ie,
  Popover: ye,
  Trigger: he,
  LeadingIcon: xe,
  Empty: ie,
  Input: de,
  Disclosure: ae,
  SelectedItems: ge,
  ClearButton: le,
  Portal: Ce
});
Ot.displayName = "Combobox";
ce.displayName = "Combobox.Group";
be.displayName = "Combobox.Items";
me.displayName = "Combobox.Item";
fe.displayName = "Combobox.ItemText";
pe.displayName = "Combobox.ItemIndicator";
Ie.displayName = "Combobox.Label";
ye.displayName = "Combobox.Popover";
he.displayName = "Combobox.Trigger";
xe.displayName = "Combobox.LeadingIcon";
ie.displayName = "Combobox.Empty";
de.displayName = "Combobox.Input";
ae.displayName = "Combobox.Disclosure";
ge.displayName = "Combobox.SelectedItems";
le.displayName = "Combobox.ClearButton";
Ce.displayName = "Combobox.Portal";
export {
  Ot as Combobox,
  Ct as ComboboxProvider,
  v as useComboboxContext
};
//# sourceMappingURL=index.mjs.map
