import { jsx as e, jsxs as S, Fragment as F } from "react/jsx-runtime";
import { l as K, $ as L, m as E, n as O, o as j, p as k } from "./Dialog-B0BQfdQa.es.js";
import { createSlotRecipeContext as V } from "@chakra-ui/react";
import { createContext as g, useContext as W } from "react";
import { g as q } from "./CollectionBuilder-BOe312C_.es.js";
import { e as a } from "./extract-style-props-BdibuNZ7.es.js";
import { d as z } from "./Header-CiYtrnTw.es.js";
import { ChevronRight as A } from "@commercetools/nimbus-icons";
import { I as B } from "./icon-DJsVh7VR.es.js";
import { a as D } from "./Button-BjcDZ5eb.es.js";
import { useSlotRecipe as G } from "@chakra-ui/react/styled-system";
const { withProvider: H, withContext: u } = /* @__PURE__ */ V({
  key: "menu"
}), J = /* @__PURE__ */ H("div", "root"), f = /* @__PURE__ */ u("button", "trigger"), Q = /* @__PURE__ */ u("div", "popover"), U = /* @__PURE__ */ u("div", "content"), X = /* @__PURE__ */ u("div", "item"), Y = /* @__PURE__ */ u("div", "section"), Z = /* @__PURE__ */ u(
  "div",
  "sectionLabel"
), P = /* @__PURE__ */ g(void 0), _ = P.Provider, $ = () => W(P), x = (t) => {
  const o = G({ key: "menu" }), [c, r] = o.splitVariantProps(t), { children: s, trigger: n, isOpen: i, defaultOpen: l, onOpenChange: d, ...p } = r, [m, b] = a(p);
  return /* @__PURE__ */ e(J, { ...c, ...m, asChild: !0, children: /* @__PURE__ */ e(K, { ...{
    trigger: n,
    isOpen: i,
    defaultOpen: l,
    onOpenChange: d
  }, children: /* @__PURE__ */ e(_, { value: b, children: s }) }) });
};
x.displayName = "Menu.Root";
const C = ({
  children: t,
  asChild: o,
  ref: c,
  ...r
}) => {
  const [s, n] = a(r);
  return o ? /* @__PURE__ */ e(f, { ref: c, asChild: !0, ...s, children: t }) : /* @__PURE__ */ e(f, { asChild: !0, ...s, children: /* @__PURE__ */ e(D, { ref: c, ...n, children: t }) });
};
C.displayName = "Menu.Trigger";
const ee = /* @__PURE__ */ g(
  void 0
), y = ee.Provider, M = ({
  children: t,
  placement: o,
  ref: c
}) => {
  const r = $();
  if (!r)
    throw new Error("Menu.Content must be used within Menu.Root");
  const { placement: s, ...n } = r, i = o || s || "bottom start";
  return /* @__PURE__ */ e(y, { value: { selectionMode: n.selectionMode }, children: /* @__PURE__ */ e(Q, { asChild: !0, children: /* @__PURE__ */ e(L, { placement: i, offset: 4, shouldFlip: !0, children: /* @__PURE__ */ e(U, { asChild: !0, children: /* @__PURE__ */ e(E, { ref: c, shouldFocusWrap: !0, autoFocus: "first", ...n, children: t }) }) }) }) });
};
M.displayName = "Menu.Content";
const v = ({
  children: t,
  isCritical: o,
  ref: c,
  ...r
}) => {
  const [s, n] = a(r);
  return /* @__PURE__ */ e(
    X,
    {
      asChild: !0,
      ...s,
      "data-critical": o ? "" : void 0,
      children: /* @__PURE__ */ e(O, { ref: c, ...n, children: ({ hasSubmenu: i }) => /* @__PURE__ */ S(F, { children: [
        t,
        i && /* @__PURE__ */ e(B, { slot: "caretIcon", children: /* @__PURE__ */ e(A, {}) })
      ] }) })
    }
  );
};
v.displayName = "Menu.Item";
const R = ({
  children: t,
  ref: o,
  ...c
}) => {
  const [r, s] = a(c);
  return /* @__PURE__ */ e(Z, { asChild: !0, ...r, children: /* @__PURE__ */ e(z, { ref: o, ...s, children: t }) });
};
R.displayName = "Menu.SectionLabel";
const T = ({
  children: t,
  ref: o,
  label: c,
  items: r,
  ...s
}) => {
  const n = $(), {
    selectionMode: i = n?.selectionMode,
    selectedKeys: l = n?.selectedKeys,
    defaultSelectedKeys: d = n?.defaultSelectedKeys,
    onSelectionChange: p = n?.onSelectionChange,
    disallowEmptySelection: m = n?.disallowEmptySelection,
    ...b
  } = s, [h, I] = a(b);
  return /* @__PURE__ */ e(y, { value: { selectionMode: i }, children: /* @__PURE__ */ e(Y, { asChild: !0, ...h, children: /* @__PURE__ */ S(
    j,
    {
      ref: o,
      selectionMode: i,
      selectedKeys: l,
      defaultSelectedKeys: d,
      onSelectionChange: p,
      disallowEmptySelection: m,
      ...I,
      children: [
        /* @__PURE__ */ e(R, { children: c }),
        r ? /* @__PURE__ */ e(q, { items: r, children: t }) : t
      ]
    }
  ) }) });
};
T.displayName = "Menu.Section";
const N = ({
  children: t,
  ...o
}) => /* @__PURE__ */ e(k, { ...o, children: t });
N.displayName = "Menu.SubmenuTrigger";
const w = ({ children: t, ...o }) => /* @__PURE__ */ e(M, { ...o, placement: "end", children: t });
w.displayName = "Menu.Submenu";
const pe = {
  /**
   * # Menu.Root
   *
   * The root container component that provides configuration and state management
   * for the entire menu. Wraps MenuTrigger and handles open/close state.
   *
   * @example
   * ```tsx
   * <Menu.Root onAction={(key) => console.log(key)}>
   *   <Menu.Trigger>Options</Menu.Trigger>
   *   <Menu.Content>
   *     <Menu.Item id="edit">Edit</Menu.Item>
   *   </Menu.Content>
   * </Menu.Root>
   * ```
   */
  Root: x,
  /**
   * # Menu.Trigger
   *
   * The button or element that opens the menu when activated.
   * Supports custom trigger elements via the `asChild` prop.
   *
   * @example
   * ```tsx
   * <Menu.Root>
   *   <Menu.Trigger>Open Menu</Menu.Trigger>
   *   <Menu.Content>...</Menu.Content>
   * </Menu.Root>
   * ```
   */
  Trigger: C,
  /**
   * # Menu.Content
   *
   * The popover container that displays menu items. Automatically positions
   * relative to the trigger and handles focus management.
   *
   * @example
   * ```tsx
   * <Menu.Root>
   *   <Menu.Trigger>Options</Menu.Trigger>
   *   <Menu.Content>
   *     <Menu.Item id="save">Save</Menu.Item>
   *     <Menu.Item id="delete">Delete</Menu.Item>
   *   </Menu.Content>
   * </Menu.Root>
   * ```
   */
  Content: M,
  /**
   * # Menu.Item
   *
   * An individual menu item that can be selected. Supports icons, labels,
   * descriptions, keyboard shortcuts, and critical styling.
   *
   * @example
   * ```tsx
   * <Menu.Item id="delete" isCritical>
   *   <Icon slot="icon"><Icons.Delete /></Icon>
   *   <Text slot="label">Delete</Text>
   *   <Text slot="description">Remove permanently</Text>
   *   <Kbd slot="keyboard">⌘⌫</Kbd>
   * </Menu.Item>
   * ```
   */
  Item: v,
  /**
   * # Menu.Section
   *
   * Groups related menu items with an optional label. Supports selection modes
   * for single or multiple selections within the section.
   *
   * @example
   * ```tsx
   * <Menu.Content>
   *   <Menu.Section label="Edit Actions">
   *     <Menu.Item id="copy">Copy</Menu.Item>
   *     <Menu.Item id="paste">Paste</Menu.Item>
   *   </Menu.Section>
   * </Menu.Content>
   * ```
   */
  Section: T,
  /**
   * # Menu.Submenu
   *
   * A nested menu that appears when hovering over or selecting a submenu trigger.
   * Automatically positioned to the side of the parent menu.
   *
   * @example
   * ```tsx
   * <Menu.Item>
   *   <Menu.SubmenuTrigger>
   *     <Text slot="label">More Options</Text>
   *   </Menu.SubmenuTrigger>
   *   <Menu.Submenu>
   *     <Menu.Item id="option1">Option 1</Menu.Item>
   *   </Menu.Submenu>
   * </Menu.Item>
   * ```
   */
  Submenu: w,
  /**
   * # Menu.SubmenuTrigger
   *
   * The trigger element for opening a submenu. Must be used within a Menu.Item
   * and paired with Menu.Submenu.
   *
   * @example
   * ```tsx
   * <Menu.Item>
   *   <Menu.SubmenuTrigger>
   *     <Text slot="label">Export</Text>
   *   </Menu.SubmenuTrigger>
   *   <Menu.Submenu>
   *     <Menu.Item id="pdf">PDF</Menu.Item>
   *     <Menu.Item id="csv">CSV</Menu.Item>
   *   </Menu.Submenu>
   * </Menu.Item>
   * ```
   */
  SubmenuTrigger: N
};
export {
  pe as M,
  x as a,
  C as b,
  M as c,
  v as d,
  T as e,
  N as f,
  w as g
};
//# sourceMappingURL=menu-Zlnps1eW.es.js.map
