@arc-ui/components 12.0.0-beta7 → 12.0.0

package/lib/Menu/Menu.cjs

@@ -0,0 +1,1688 @@
+'use client';
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var Combination = require('../_shared/cjs/Combination-6m6aOXZq.cjs');
+var index$1 = require('../_shared/cjs/index-DXNM3D1d.cjs');
+var index = require('../_shared/cjs/index-CklPiHsS.cjs');
+var index$2 = require('../_shared/cjs/index-KrMgv4q_.cjs');
+var index$3 = require('../_shared/cjs/index-BGGFOAAx.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+var Icon = require('../_shared/cjs/Icon-Dk2XHa7V.cjs');
+var Text = require('../_shared/cjs/Text-jwsn80lQ.cjs');
+var CheckboxIcon = require('../_shared/cjs/CheckboxIcon-BTkdXfpp.cjs');
+var index$4 = require('../_shared/cjs/index-CTlXMLug.cjs');
+var Rule = require('../_shared/cjs/Rule-jmvOpci7.cjs');
+var BtIconChevronRightMid = require('../_shared/cjs/BtIconChevronRightMid-eGxk3ae6.cjs');
+var Surface = require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+require('react-dom');
+require('../_shared/cjs/index-B11wQrRa.cjs');
+require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/ThemeIcon-CwYN77IF.cjs');
+require('../_shared/cjs/FormControl-TtboqHRx.cjs');
+require('../_shared/cjs/DisclosureMini-Cy7hNc90.cjs');
+require('../_shared/cjs/VisuallyHidden-CQg3cOVK.cjs');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
+var EVENT_OPTIONS = { bubbles: false, cancelable: true };
+var GROUP_NAME$2 = "RovingFocusGroup";
+var [Collection$1, useCollection$1, createCollectionScope$1] = index.createCollection(GROUP_NAME$2);
+var [createRovingFocusGroupContext, createRovingFocusGroupScope] = index$1.createContextScope(
+  GROUP_NAME$2,
+  [createCollectionScope$1]
+);
+var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME$2);
+var RovingFocusGroup = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Collection$1.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsxRuntime.jsx(Collection$1.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsxRuntime.jsx(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
+  }
+);
+RovingFocusGroup.displayName = GROUP_NAME$2;
+var RovingFocusGroupImpl = React__namespace.forwardRef((props, forwardedRef) => {
+  const {
+    __scopeRovingFocusGroup,
+    orientation,
+    loop = false,
+    dir,
+    currentTabStopId: currentTabStopIdProp,
+    defaultCurrentTabStopId,
+    onCurrentTabStopIdChange,
+    onEntryFocus,
+    preventScrollOnEntryFocus = false,
+    ...groupProps
+  } = props;
+  const ref = React__namespace.useRef(null);
+  const composedRefs = Combination.useComposedRefs(forwardedRef, ref);
+  const direction = index.useDirection(dir);
+  const [currentTabStopId = null, setCurrentTabStopId] = index$1.useControllableState({
+    prop: currentTabStopIdProp,
+    defaultProp: defaultCurrentTabStopId,
+    onChange: onCurrentTabStopIdChange
+  });
+  const [isTabbingBackOut, setIsTabbingBackOut] = React__namespace.useState(false);
+  const handleEntryFocus = index$1.useCallbackRef(onEntryFocus);
+  const getItems = useCollection$1(__scopeRovingFocusGroup);
+  const isClickFocusRef = React__namespace.useRef(false);
+  const [focusableItemsCount, setFocusableItemsCount] = React__namespace.useState(0);
+  React__namespace.useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
+      return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
+    }
+  }, [handleEntryFocus]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RovingFocusProvider,
+    {
+      scope: __scopeRovingFocusGroup,
+      orientation,
+      dir: direction,
+      loop,
+      currentTabStopId,
+      onItemFocus: React__namespace.useCallback(
+        (tabStopId) => setCurrentTabStopId(tabStopId),
+        [setCurrentTabStopId]
+      ),
+      onItemShiftTab: React__namespace.useCallback(() => setIsTabbingBackOut(true), []),
+      onFocusableItemAdd: React__namespace.useCallback(
+        () => setFocusableItemsCount((prevCount) => prevCount + 1),
+        []
+      ),
+      onFocusableItemRemove: React__namespace.useCallback(
+        () => setFocusableItemsCount((prevCount) => prevCount - 1),
+        []
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Combination.Primitive.div,
+        {
+          tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
+          "data-orientation": orientation,
+          ...groupProps,
+          ref: composedRefs,
+          style: { outline: "none", ...props.style },
+          onMouseDown: Combination.composeEventHandlers(props.onMouseDown, () => {
+            isClickFocusRef.current = true;
+          }),
+          onFocus: Combination.composeEventHandlers(props.onFocus, (event) => {
+            const isKeyboardFocus = !isClickFocusRef.current;
+            if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+              const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+              event.currentTarget.dispatchEvent(entryFocusEvent);
+              if (!entryFocusEvent.defaultPrevented) {
+                const items = getItems().filter((item) => item.focusable);
+                const activeItem = items.find((item) => item.active);
+                const currentItem = items.find((item) => item.id === currentTabStopId);
+                const candidateItems = [activeItem, currentItem, ...items].filter(
+                  Boolean
+                );
+                const candidateNodes = candidateItems.map((item) => item.ref.current);
+                focusFirst$1(candidateNodes, preventScrollOnEntryFocus);
+              }
+            }
+            isClickFocusRef.current = false;
+          }),
+          onBlur: Combination.composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))
+        }
+      )
+    }
+  );
+});
+var ITEM_NAME$2 = "RovingFocusGroupItem";
+var RovingFocusGroupItem = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeRovingFocusGroup,
+      focusable = true,
+      active = false,
+      tabStopId,
+      ...itemProps
+    } = props;
+    const autoId = index$1.useId();
+    const id = tabStopId || autoId;
+    const context = useRovingFocusContext(ITEM_NAME$2, __scopeRovingFocusGroup);
+    const isCurrentTabStop = context.currentTabStopId === id;
+    const getItems = useCollection$1(__scopeRovingFocusGroup);
+    const { onFocusableItemAdd, onFocusableItemRemove } = context;
+    React__namespace.useEffect(() => {
+      if (focusable) {
+        onFocusableItemAdd();
+        return () => onFocusableItemRemove();
+      }
+    }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Collection$1.ItemSlot,
+      {
+        scope: __scopeRovingFocusGroup,
+        id,
+        focusable,
+        active,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Combination.Primitive.span,
+          {
+            tabIndex: isCurrentTabStop ? 0 : -1,
+            "data-orientation": context.orientation,
+            ...itemProps,
+            ref: forwardedRef,
+            onMouseDown: Combination.composeEventHandlers(props.onMouseDown, (event) => {
+              if (!focusable) event.preventDefault();
+              else context.onItemFocus(id);
+            }),
+            onFocus: Combination.composeEventHandlers(props.onFocus, () => context.onItemFocus(id)),
+            onKeyDown: Combination.composeEventHandlers(props.onKeyDown, (event) => {
+              if (event.key === "Tab" && event.shiftKey) {
+                context.onItemShiftTab();
+                return;
+              }
+              if (event.target !== event.currentTarget) return;
+              const focusIntent = getFocusIntent(event, context.orientation, context.dir);
+              if (focusIntent !== void 0) {
+                if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+                event.preventDefault();
+                const items = getItems().filter((item) => item.focusable);
+                let candidateNodes = items.map((item) => item.ref.current);
+                if (focusIntent === "last") candidateNodes.reverse();
+                else if (focusIntent === "prev" || focusIntent === "next") {
+                  if (focusIntent === "prev") candidateNodes.reverse();
+                  const currentIndex = candidateNodes.indexOf(event.currentTarget);
+                  candidateNodes = context.loop ? wrapArray$1(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
+                }
+                setTimeout(() => focusFirst$1(candidateNodes));
+              }
+            })
+          }
+        )
+      }
+    );
+  }
+);
+RovingFocusGroupItem.displayName = ITEM_NAME$2;
+var MAP_KEY_TO_FOCUS_INTENT = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+function getDirectionAwareKey(key, dir) {
+  if (dir !== "rtl") return key;
+  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
+}
+function getFocusIntent(event, orientation, dir) {
+  const key = getDirectionAwareKey(event.key, dir);
+  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
+  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
+  return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function focusFirst$1(candidates, preventScroll = false) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidate of candidates) {
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus({ preventScroll });
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function wrapArray$1(array, startIndex) {
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+var Root = RovingFocusGroup;
+var Item = RovingFocusGroupItem;
+
+var SELECTION_KEYS = ["Enter", " "];
+var FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
+var LAST_KEYS = ["ArrowUp", "PageDown", "End"];
+var FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
+var SUB_OPEN_KEYS = {
+  ltr: [...SELECTION_KEYS, "ArrowRight"],
+  rtl: [...SELECTION_KEYS, "ArrowLeft"]
+};
+var SUB_CLOSE_KEYS = {
+  ltr: ["ArrowLeft"],
+  rtl: ["ArrowRight"]
+};
+var MENU_NAME = "Menu";
+var [Collection, useCollection, createCollectionScope] = index.createCollection(MENU_NAME);
+var [createMenuContext, createMenuScope] = index$1.createContextScope(MENU_NAME, [
+  createCollectionScope,
+  index$2.createPopperScope,
+  createRovingFocusGroupScope
+]);
+var usePopperScope = index$2.createPopperScope();
+var useRovingFocusGroupScope = createRovingFocusGroupScope();
+var [MenuProvider$1, useMenuContext$1] = createMenuContext(MENU_NAME);
+var [MenuRootProvider, useMenuRootContext] = createMenuContext(MENU_NAME);
+var Menu$1 = (props) => {
+  const { __scopeMenu, open = false, children, dir, onOpenChange, modal = true } = props;
+  const popperScope = usePopperScope(__scopeMenu);
+  const [content, setContent] = React__namespace.useState(null);
+  const isUsingKeyboardRef = React__namespace.useRef(false);
+  const handleOpenChange = index$1.useCallbackRef(onOpenChange);
+  const direction = index.useDirection(dir);
+  React__namespace.useEffect(() => {
+    const handleKeyDown = () => {
+      isUsingKeyboardRef.current = true;
+      document.addEventListener("pointerdown", handlePointer, { capture: true, once: true });
+      document.addEventListener("pointermove", handlePointer, { capture: true, once: true });
+    };
+    const handlePointer = () => isUsingKeyboardRef.current = false;
+    document.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, { capture: true });
+      document.removeEventListener("pointerdown", handlePointer, { capture: true });
+      document.removeEventListener("pointermove", handlePointer, { capture: true });
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(index$2.Root2, { ...popperScope, children: /* @__PURE__ */ jsxRuntime.jsx(
+    MenuProvider$1,
+    {
+      scope: __scopeMenu,
+      open,
+      onOpenChange: handleOpenChange,
+      content,
+      onContentChange: setContent,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        MenuRootProvider,
+        {
+          scope: __scopeMenu,
+          onClose: React__namespace.useCallback(() => handleOpenChange(false), [handleOpenChange]),
+          isUsingKeyboardRef,
+          dir: direction,
+          modal,
+          children
+        }
+      )
+    }
+  ) });
+};
+Menu$1.displayName = MENU_NAME;
+var ANCHOR_NAME = "MenuAnchor";
+var MenuAnchor = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeMenu, ...anchorProps } = props;
+    const popperScope = usePopperScope(__scopeMenu);
+    return /* @__PURE__ */ jsxRuntime.jsx(index$2.Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
+  }
+);
+MenuAnchor.displayName = ANCHOR_NAME;
+var PORTAL_NAME$1 = "MenuPortal";
+var [PortalProvider, usePortalContext] = createMenuContext(PORTAL_NAME$1, {
+  forceMount: void 0
+});
+var MenuPortal$1 = (props) => {
+  const { __scopeMenu, forceMount, children, container } = props;
+  const context = useMenuContext$1(PORTAL_NAME$1, __scopeMenu);
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsxRuntime.jsx(index$3.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsxRuntime.jsx(Combination.Portal, { asChild: true, container, children }) }) });
+};
+MenuPortal$1.displayName = PORTAL_NAME$1;
+var CONTENT_NAME$1 = "MenuContent";
+var [MenuContentProvider, useMenuContentContext] = createMenuContext(CONTENT_NAME$1);
+var MenuContent$1 = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const portalContext = usePortalContext(CONTENT_NAME$1, props.__scopeMenu);
+    const { forceMount = portalContext.forceMount, ...contentProps } = props;
+    const context = useMenuContext$1(CONTENT_NAME$1, props.__scopeMenu);
+    const rootContext = useMenuRootContext(CONTENT_NAME$1, props.__scopeMenu);
+    return /* @__PURE__ */ jsxRuntime.jsx(Collection.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsxRuntime.jsx(index$3.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsxRuntime.jsx(Collection.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsxRuntime.jsx(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsxRuntime.jsx(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
+  }
+);
+var MenuRootContentModal = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const context = useMenuContext$1(CONTENT_NAME$1, props.__scopeMenu);
+    const ref = React__namespace.useRef(null);
+    const composedRefs = Combination.useComposedRefs(forwardedRef, ref);
+    React__namespace.useEffect(() => {
+      const content = ref.current;
+      if (content) return Combination.hideOthers(content);
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MenuContentImpl,
+      {
+        ...props,
+        ref: composedRefs,
+        trapFocus: context.open,
+        disableOutsidePointerEvents: context.open,
+        disableOutsideScroll: true,
+        onFocusOutside: Combination.composeEventHandlers(
+          props.onFocusOutside,
+          (event) => event.preventDefault(),
+          { checkForDefaultPrevented: false }
+        ),
+        onDismiss: () => context.onOpenChange(false)
+      }
+    );
+  }
+);
+var MenuRootContentNonModal = React__namespace.forwardRef((props, forwardedRef) => {
+  const context = useMenuContext$1(CONTENT_NAME$1, props.__scopeMenu);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MenuContentImpl,
+    {
+      ...props,
+      ref: forwardedRef,
+      trapFocus: false,
+      disableOutsidePointerEvents: false,
+      disableOutsideScroll: false,
+      onDismiss: () => context.onOpenChange(false)
+    }
+  );
+});
+var MenuContentImpl = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeMenu,
+      loop = false,
+      trapFocus,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      disableOutsidePointerEvents,
+      onEntryFocus,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      onDismiss,
+      disableOutsideScroll,
+      ...contentProps
+    } = props;
+    const context = useMenuContext$1(CONTENT_NAME$1, __scopeMenu);
+    const rootContext = useMenuRootContext(CONTENT_NAME$1, __scopeMenu);
+    const popperScope = usePopperScope(__scopeMenu);
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
+    const getItems = useCollection(__scopeMenu);
+    const [currentItemId, setCurrentItemId] = React__namespace.useState(null);
+    const contentRef = React__namespace.useRef(null);
+    const composedRefs = Combination.useComposedRefs(forwardedRef, contentRef, context.onContentChange);
+    const timerRef = React__namespace.useRef(0);
+    const searchRef = React__namespace.useRef("");
+    const pointerGraceTimerRef = React__namespace.useRef(0);
+    const pointerGraceIntentRef = React__namespace.useRef(null);
+    const pointerDirRef = React__namespace.useRef("right");
+    const lastPointerXRef = React__namespace.useRef(0);
+    const ScrollLockWrapper = disableOutsideScroll ? Combination.ReactRemoveScroll : React__namespace.Fragment;
+    const scrollLockWrapperProps = disableOutsideScroll ? { as: Combination.Slot, allowPinchZoom: true } : void 0;
+    const handleTypeaheadSearch = (key) => {
+      const search = searchRef.current + key;
+      const items = getItems().filter((item) => !item.disabled);
+      const currentItem = document.activeElement;
+      const currentMatch = items.find((item) => item.ref.current === currentItem)?.textValue;
+      const values = items.map((item) => item.textValue);
+      const nextMatch = getNextMatch(values, search, currentMatch);
+      const newItem = items.find((item) => item.textValue === nextMatch)?.ref.current;
+      (function updateSearch(value) {
+        searchRef.current = value;
+        window.clearTimeout(timerRef.current);
+        if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
+      })(search);
+      if (newItem) {
+        setTimeout(() => newItem.focus());
+      }
+    };
+    React__namespace.useEffect(() => {
+      return () => window.clearTimeout(timerRef.current);
+    }, []);
+    Combination.useFocusGuards();
+    const isPointerMovingToSubmenu = React__namespace.useCallback((event) => {
+      const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
+      return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MenuContentProvider,
+      {
+        scope: __scopeMenu,
+        searchRef,
+        onItemEnter: React__namespace.useCallback(
+          (event) => {
+            if (isPointerMovingToSubmenu(event)) event.preventDefault();
+          },
+          [isPointerMovingToSubmenu]
+        ),
+        onItemLeave: React__namespace.useCallback(
+          (event) => {
+            if (isPointerMovingToSubmenu(event)) return;
+            contentRef.current?.focus();
+            setCurrentItemId(null);
+          },
+          [isPointerMovingToSubmenu]
+        ),
+        onTriggerLeave: React__namespace.useCallback(
+          (event) => {
+            if (isPointerMovingToSubmenu(event)) event.preventDefault();
+          },
+          [isPointerMovingToSubmenu]
+        ),
+        pointerGraceTimerRef,
+        onPointerGraceIntentChange: React__namespace.useCallback((intent) => {
+          pointerGraceIntentRef.current = intent;
+        }, []),
+        children: /* @__PURE__ */ jsxRuntime.jsx(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Combination.FocusScope,
+          {
+            asChild: true,
+            trapped: trapFocus,
+            onMountAutoFocus: Combination.composeEventHandlers(onOpenAutoFocus, (event) => {
+              event.preventDefault();
+              contentRef.current?.focus({ preventScroll: true });
+            }),
+            onUnmountAutoFocus: onCloseAutoFocus,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Combination.DismissableLayer,
+              {
+                asChild: true,
+                disableOutsidePointerEvents,
+                onEscapeKeyDown,
+                onPointerDownOutside,
+                onFocusOutside,
+                onInteractOutside,
+                onDismiss,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Root,
+                  {
+                    asChild: true,
+                    ...rovingFocusGroupScope,
+                    dir: rootContext.dir,
+                    orientation: "vertical",
+                    loop,
+                    currentTabStopId: currentItemId,
+                    onCurrentTabStopIdChange: setCurrentItemId,
+                    onEntryFocus: Combination.composeEventHandlers(onEntryFocus, (event) => {
+                      if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
+                    }),
+                    preventScrollOnEntryFocus: true,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      index$2.Content,
+                      {
+                        role: "menu",
+                        "aria-orientation": "vertical",
+                        "data-state": getOpenState(context.open),
+                        "data-radix-menu-content": "",
+                        dir: rootContext.dir,
+                        ...popperScope,
+                        ...contentProps,
+                        ref: composedRefs,
+                        style: { outline: "none", ...contentProps.style },
+                        onKeyDown: Combination.composeEventHandlers(contentProps.onKeyDown, (event) => {
+                          const target = event.target;
+                          const isKeyDownInside = target.closest("[data-radix-menu-content]") === event.currentTarget;
+                          const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+                          const isCharacterKey = event.key.length === 1;
+                          if (isKeyDownInside) {
+                            if (event.key === "Tab") event.preventDefault();
+                            if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
+                          }
+                          const content = contentRef.current;
+                          if (event.target !== content) return;
+                          if (!FIRST_LAST_KEYS.includes(event.key)) return;
+                          event.preventDefault();
+                          const items = getItems().filter((item) => !item.disabled);
+                          const candidateNodes = items.map((item) => item.ref.current);
+                          if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
+                          focusFirst(candidateNodes);
+                        }),
+                        onBlur: Combination.composeEventHandlers(props.onBlur, (event) => {
+                          if (!event.currentTarget.contains(event.target)) {
+                            window.clearTimeout(timerRef.current);
+                            searchRef.current = "";
+                          }
+                        }),
+                        onPointerMove: Combination.composeEventHandlers(
+                          props.onPointerMove,
+                          whenMouse((event) => {
+                            const target = event.target;
+                            const pointerXHasChanged = lastPointerXRef.current !== event.clientX;
+                            if (event.currentTarget.contains(target) && pointerXHasChanged) {
+                              const newDir = event.clientX > lastPointerXRef.current ? "right" : "left";
+                              pointerDirRef.current = newDir;
+                              lastPointerXRef.current = event.clientX;
+                            }
+                          })
+                        )
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          }
+        ) })
+      }
+    );
+  }
+);
+MenuContent$1.displayName = CONTENT_NAME$1;
+var GROUP_NAME$1 = "MenuGroup";
+var MenuGroup$1 = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeMenu, ...groupProps } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(Combination.Primitive.div, { role: "group", ...groupProps, ref: forwardedRef });
+  }
+);
+MenuGroup$1.displayName = GROUP_NAME$1;
+var LABEL_NAME$1 = "MenuLabel";
+var MenuLabel$1 = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeMenu, ...labelProps } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(Combination.Primitive.div, { ...labelProps, ref: forwardedRef });
+  }
+);
+MenuLabel$1.displayName = LABEL_NAME$1;
+var ITEM_NAME$1 = "MenuItem";
+var ITEM_SELECT = "menu.itemSelect";
+var MenuItem$1 = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { disabled = false, onSelect, ...itemProps } = props;
+    const ref = React__namespace.useRef(null);
+    const rootContext = useMenuRootContext(ITEM_NAME$1, props.__scopeMenu);
+    const contentContext = useMenuContentContext(ITEM_NAME$1, props.__scopeMenu);
+    const composedRefs = Combination.useComposedRefs(forwardedRef, ref);
+    const isPointerDownRef = React__namespace.useRef(false);
+    const handleSelect = () => {
+      const menuItem = ref.current;
+      if (!disabled && menuItem) {
+        const itemSelectEvent = new CustomEvent(ITEM_SELECT, { bubbles: true, cancelable: true });
+        menuItem.addEventListener(ITEM_SELECT, (event) => onSelect?.(event), { once: true });
+        Combination.dispatchDiscreteCustomEvent(menuItem, itemSelectEvent);
+        if (itemSelectEvent.defaultPrevented) {
+          isPointerDownRef.current = false;
+        } else {
+          rootContext.onClose();
+        }
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MenuItemImpl,
+      {
+        ...itemProps,
+        ref: composedRefs,
+        disabled,
+        onClick: Combination.composeEventHandlers(props.onClick, handleSelect),
+        onPointerDown: (event) => {
+          props.onPointerDown?.(event);
+          isPointerDownRef.current = true;
+        },
+        onPointerUp: Combination.composeEventHandlers(props.onPointerUp, (event) => {
+          if (!isPointerDownRef.current) event.currentTarget?.click();
+        }),
+        onKeyDown: Combination.composeEventHandlers(props.onKeyDown, (event) => {
+          const isTypingAhead = contentContext.searchRef.current !== "";
+          if (disabled || isTypingAhead && event.key === " ") return;
+          if (SELECTION_KEYS.includes(event.key)) {
+            event.currentTarget.click();
+            event.preventDefault();
+          }
+        })
+      }
+    );
+  }
+);
+MenuItem$1.displayName = ITEM_NAME$1;
+var MenuItemImpl = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeMenu, disabled = false, textValue, ...itemProps } = props;
+    const contentContext = useMenuContentContext(ITEM_NAME$1, __scopeMenu);
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
+    const ref = React__namespace.useRef(null);
+    const composedRefs = Combination.useComposedRefs(forwardedRef, ref);
+    const [isFocused, setIsFocused] = React__namespace.useState(false);
+    const [textContent, setTextContent] = React__namespace.useState("");
+    React__namespace.useEffect(() => {
+      const menuItem = ref.current;
+      if (menuItem) {
+        setTextContent((menuItem.textContent ?? "").trim());
+      }
+    }, [itemProps.children]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Collection.ItemSlot,
+      {
+        scope: __scopeMenu,
+        disabled,
+        textValue: textValue ?? textContent,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Item, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Combination.Primitive.div,
+          {
+            role: "menuitem",
+            "data-highlighted": isFocused ? "" : void 0,
+            "aria-disabled": disabled || void 0,
+            "data-disabled": disabled ? "" : void 0,
+            ...itemProps,
+            ref: composedRefs,
+            onPointerMove: Combination.composeEventHandlers(
+              props.onPointerMove,
+              whenMouse((event) => {
+                if (disabled) {
+                  contentContext.onItemLeave(event);
+                } else {
+                  contentContext.onItemEnter(event);
+                  if (!event.defaultPrevented) {
+                    const item = event.currentTarget;
+                    item.focus({ preventScroll: true });
+                  }
+                }
+              })
+            ),
+            onPointerLeave: Combination.composeEventHandlers(
+              props.onPointerLeave,
+              whenMouse((event) => contentContext.onItemLeave(event))
+            ),
+            onFocus: Combination.composeEventHandlers(props.onFocus, () => setIsFocused(true)),
+            onBlur: Combination.composeEventHandlers(props.onBlur, () => setIsFocused(false))
+          }
+        ) })
+      }
+    );
+  }
+);
+var CHECKBOX_ITEM_NAME$1 = "MenuCheckboxItem";
+var MenuCheckboxItem = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { checked = false, onCheckedChange, ...checkboxItemProps } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsxRuntime.jsx(
+      MenuItem$1,
+      {
+        role: "menuitemcheckbox",
+        "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+        ...checkboxItemProps,
+        ref: forwardedRef,
+        "data-state": getCheckedState(checked),
+        onSelect: Combination.composeEventHandlers(
+          checkboxItemProps.onSelect,
+          () => onCheckedChange?.(isIndeterminate(checked) ? true : !checked),
+          { checkForDefaultPrevented: false }
+        )
+      }
+    ) });
+  }
+);
+MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME$1;
+var RADIO_GROUP_NAME$1 = "MenuRadioGroup";
+var [RadioGroupProvider, useRadioGroupContext] = createMenuContext(
+  RADIO_GROUP_NAME$1,
+  { value: void 0, onValueChange: () => {
+  } }
+);
+var MenuRadioGroup = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { value, onValueChange, ...groupProps } = props;
+    const handleValueChange = index$1.useCallbackRef(onValueChange);
+    return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: /* @__PURE__ */ jsxRuntime.jsx(MenuGroup$1, { ...groupProps, ref: forwardedRef }) });
+  }
+);
+MenuRadioGroup.displayName = RADIO_GROUP_NAME$1;
+var RADIO_ITEM_NAME$1 = "MenuRadioItem";
+var MenuRadioItem = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { value, ...radioItemProps } = props;
+    const context = useRadioGroupContext(RADIO_ITEM_NAME$1, props.__scopeMenu);
+    const checked = value === context.value;
+    return /* @__PURE__ */ jsxRuntime.jsx(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsxRuntime.jsx(
+      MenuItem$1,
+      {
+        role: "menuitemradio",
+        "aria-checked": checked,
+        ...radioItemProps,
+        ref: forwardedRef,
+        "data-state": getCheckedState(checked),
+        onSelect: Combination.composeEventHandlers(
+          radioItemProps.onSelect,
+          () => context.onValueChange?.(value),
+          { checkForDefaultPrevented: false }
+        )
+      }
+    ) });
+  }
+);
+MenuRadioItem.displayName = RADIO_ITEM_NAME$1;
+var ITEM_INDICATOR_NAME = "MenuItemIndicator";
+var [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext(
+  ITEM_INDICATOR_NAME,
+  { checked: false }
+);
+var MenuItemIndicator = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeMenu, forceMount, ...itemIndicatorProps } = props;
+    const indicatorContext = useItemIndicatorContext(ITEM_INDICATOR_NAME, __scopeMenu);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index$3.Presence,
+      {
+        present: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Combination.Primitive.span,
+          {
+            ...itemIndicatorProps,
+            ref: forwardedRef,
+            "data-state": getCheckedState(indicatorContext.checked)
+          }
+        )
+      }
+    );
+  }
+);
+MenuItemIndicator.displayName = ITEM_INDICATOR_NAME;
+var SEPARATOR_NAME$1 = "MenuSeparator";
+var MenuSeparator$1 = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeMenu, ...separatorProps } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Combination.Primitive.div,
+      {
+        role: "separator",
+        "aria-orientation": "horizontal",
+        ...separatorProps,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+MenuSeparator$1.displayName = SEPARATOR_NAME$1;
+var ARROW_NAME$1 = "MenuArrow";
+var MenuArrow = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeMenu, ...arrowProps } = props;
+    const popperScope = usePopperScope(__scopeMenu);
+    return /* @__PURE__ */ jsxRuntime.jsx(index$2.Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
+  }
+);
+MenuArrow.displayName = ARROW_NAME$1;
+var SUB_NAME = "MenuSub";
+var [MenuSubProvider, useMenuSubContext] = createMenuContext(SUB_NAME);
+var MenuSub = (props) => {
+  const { __scopeMenu, children, open = false, onOpenChange } = props;
+  const parentMenuContext = useMenuContext$1(SUB_NAME, __scopeMenu);
+  const popperScope = usePopperScope(__scopeMenu);
+  const [trigger, setTrigger] = React__namespace.useState(null);
+  const [content, setContent] = React__namespace.useState(null);
+  const handleOpenChange = index$1.useCallbackRef(onOpenChange);
+  React__namespace.useEffect(() => {
+    if (parentMenuContext.open === false) handleOpenChange(false);
+    return () => handleOpenChange(false);
+  }, [parentMenuContext.open, handleOpenChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(index$2.Root2, { ...popperScope, children: /* @__PURE__ */ jsxRuntime.jsx(
+    MenuProvider$1,
+    {
+      scope: __scopeMenu,
+      open,
+      onOpenChange: handleOpenChange,
+      content,
+      onContentChange: setContent,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        MenuSubProvider,
+        {
+          scope: __scopeMenu,
+          contentId: index$1.useId(),
+          triggerId: index$1.useId(),
+          trigger,
+          onTriggerChange: setTrigger,
+          children
+        }
+      )
+    }
+  ) });
+};
+MenuSub.displayName = SUB_NAME;
+var SUB_TRIGGER_NAME$1 = "MenuSubTrigger";
+var MenuSubTrigger = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const context = useMenuContext$1(SUB_TRIGGER_NAME$1, props.__scopeMenu);
+    const rootContext = useMenuRootContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
+    const subContext = useMenuSubContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
+    const contentContext = useMenuContentContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
+    const openTimerRef = React__namespace.useRef(null);
+    const { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext;
+    const scope = { __scopeMenu: props.__scopeMenu };
+    const clearOpenTimer = React__namespace.useCallback(() => {
+      if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }, []);
+    React__namespace.useEffect(() => clearOpenTimer, [clearOpenTimer]);
+    React__namespace.useEffect(() => {
+      const pointerGraceTimer = pointerGraceTimerRef.current;
+      return () => {
+        window.clearTimeout(pointerGraceTimer);
+        onPointerGraceIntentChange(null);
+      };
+    }, [pointerGraceTimerRef, onPointerGraceIntentChange]);
+    return /* @__PURE__ */ jsxRuntime.jsx(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsxRuntime.jsx(
+      MenuItemImpl,
+      {
+        id: subContext.triggerId,
+        "aria-haspopup": "menu",
+        "aria-expanded": context.open,
+        "aria-controls": subContext.contentId,
+        "data-state": getOpenState(context.open),
+        ...props,
+        ref: Combination.composeRefs(forwardedRef, subContext.onTriggerChange),
+        onClick: (event) => {
+          props.onClick?.(event);
+          if (props.disabled || event.defaultPrevented) return;
+          event.currentTarget.focus();
+          if (!context.open) context.onOpenChange(true);
+        },
+        onPointerMove: Combination.composeEventHandlers(
+          props.onPointerMove,
+          whenMouse((event) => {
+            contentContext.onItemEnter(event);
+            if (event.defaultPrevented) return;
+            if (!props.disabled && !context.open && !openTimerRef.current) {
+              contentContext.onPointerGraceIntentChange(null);
+              openTimerRef.current = window.setTimeout(() => {
+                context.onOpenChange(true);
+                clearOpenTimer();
+              }, 100);
+            }
+          })
+        ),
+        onPointerLeave: Combination.composeEventHandlers(
+          props.onPointerLeave,
+          whenMouse((event) => {
+            clearOpenTimer();
+            const contentRect = context.content?.getBoundingClientRect();
+            if (contentRect) {
+              const side = context.content?.dataset.side;
+              const rightSide = side === "right";
+              const bleed = rightSide ? -5 : 5;
+              const contentNearEdge = contentRect[rightSide ? "left" : "right"];
+              const contentFarEdge = contentRect[rightSide ? "right" : "left"];
+              contentContext.onPointerGraceIntentChange({
+                area: [
+                  // Apply a bleed on clientX to ensure that our exit point is
+                  // consistently within polygon bounds
+                  { x: event.clientX + bleed, y: event.clientY },
+                  { x: contentNearEdge, y: contentRect.top },
+                  { x: contentFarEdge, y: contentRect.top },
+                  { x: contentFarEdge, y: contentRect.bottom },
+                  { x: contentNearEdge, y: contentRect.bottom }
+                ],
+                side
+              });
+              window.clearTimeout(pointerGraceTimerRef.current);
+              pointerGraceTimerRef.current = window.setTimeout(
+                () => contentContext.onPointerGraceIntentChange(null),
+                300
+              );
+            } else {
+              contentContext.onTriggerLeave(event);
+              if (event.defaultPrevented) return;
+              contentContext.onPointerGraceIntentChange(null);
+            }
+          })
+        ),
+        onKeyDown: Combination.composeEventHandlers(props.onKeyDown, (event) => {
+          const isTypingAhead = contentContext.searchRef.current !== "";
+          if (props.disabled || isTypingAhead && event.key === " ") return;
+          if (SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
+            context.onOpenChange(true);
+            context.content?.focus();
+            event.preventDefault();
+          }
+        })
+      }
+    ) });
+  }
+);
+MenuSubTrigger.displayName = SUB_TRIGGER_NAME$1;
+var SUB_CONTENT_NAME$1 = "MenuSubContent";
+var MenuSubContent = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const portalContext = usePortalContext(CONTENT_NAME$1, props.__scopeMenu);
+    const { forceMount = portalContext.forceMount, ...subContentProps } = props;
+    const context = useMenuContext$1(CONTENT_NAME$1, props.__scopeMenu);
+    const rootContext = useMenuRootContext(CONTENT_NAME$1, props.__scopeMenu);
+    const subContext = useMenuSubContext(SUB_CONTENT_NAME$1, props.__scopeMenu);
+    const ref = React__namespace.useRef(null);
+    const composedRefs = Combination.useComposedRefs(forwardedRef, ref);
+    return /* @__PURE__ */ jsxRuntime.jsx(Collection.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsxRuntime.jsx(index$3.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsxRuntime.jsx(Collection.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsxRuntime.jsx(
+      MenuContentImpl,
+      {
+        id: subContext.contentId,
+        "aria-labelledby": subContext.triggerId,
+        ...subContentProps,
+        ref: composedRefs,
+        align: "start",
+        side: rootContext.dir === "rtl" ? "left" : "right",
+        disableOutsidePointerEvents: false,
+        disableOutsideScroll: false,
+        trapFocus: false,
+        onOpenAutoFocus: (event) => {
+          if (rootContext.isUsingKeyboardRef.current) ref.current?.focus();
+          event.preventDefault();
+        },
+        onCloseAutoFocus: (event) => event.preventDefault(),
+        onFocusOutside: Combination.composeEventHandlers(props.onFocusOutside, (event) => {
+          if (event.target !== subContext.trigger) context.onOpenChange(false);
+        }),
+        onEscapeKeyDown: Combination.composeEventHandlers(props.onEscapeKeyDown, (event) => {
+          rootContext.onClose();
+          event.preventDefault();
+        }),
+        onKeyDown: Combination.composeEventHandlers(props.onKeyDown, (event) => {
+          const isKeyDownInside = event.currentTarget.contains(event.target);
+          const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);
+          if (isKeyDownInside && isCloseKey) {
+            context.onOpenChange(false);
+            subContext.trigger?.focus();
+            event.preventDefault();
+          }
+        })
+      }
+    ) }) }) });
+  }
+);
+MenuSubContent.displayName = SUB_CONTENT_NAME$1;
+function getOpenState(open) {
+  return open ? "open" : "closed";
+}
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getCheckedState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+function focusFirst(candidates) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidate of candidates) {
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus();
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function wrapArray(array, startIndex) {
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+function getNextMatch(values, search, currentMatch) {
+  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+  const normalizedSearch = isRepeated ? search[0] : search;
+  const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+  let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
+  const excludeCurrentMatch = normalizedSearch.length === 1;
+  if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
+  const nextMatch = wrappedValues.find(
+    (value) => value.toLowerCase().startsWith(normalizedSearch.toLowerCase())
+  );
+  return nextMatch !== currentMatch ? nextMatch : void 0;
+}
+function isPointInPolygon(point, polygon) {
+  const { x, y } = point;
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i].x;
+    const yi = polygon[i].y;
+    const xj = polygon[j].x;
+    const yj = polygon[j].y;
+    const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+    if (intersect) inside = !inside;
+  }
+  return inside;
+}
+function isPointerInGraceArea(event, area) {
+  if (!area) return false;
+  const cursorPos = { x: event.clientX, y: event.clientY };
+  return isPointInPolygon(cursorPos, area);
+}
+function whenMouse(handler) {
+  return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
+}
+var Root3 = Menu$1;
+var Anchor2 = MenuAnchor;
+var Portal = MenuPortal$1;
+var Content2$1 = MenuContent$1;
+var Group = MenuGroup$1;
+var Label = MenuLabel$1;
+var Item2$1 = MenuItem$1;
+var CheckboxItem = MenuCheckboxItem;
+var RadioGroup = MenuRadioGroup;
+var RadioItem = MenuRadioItem;
+var ItemIndicator = MenuItemIndicator;
+var Separator = MenuSeparator$1;
+var Arrow2 = MenuArrow;
+var Sub = MenuSub;
+var SubTrigger = MenuSubTrigger;
+var SubContent = MenuSubContent;
+
+var DROPDOWN_MENU_NAME = "DropdownMenu";
+var [createDropdownMenuContext, createDropdownMenuScope] = index$1.createContextScope(
+  DROPDOWN_MENU_NAME,
+  [createMenuScope]
+);
+var useMenuScope = createMenuScope();
+var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
+var DropdownMenu = (props) => {
+  const {
+    __scopeDropdownMenu,
+    children,
+    dir,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    modal = true
+  } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const triggerRef = React__namespace.useRef(null);
+  const [open = false, setOpen] = index$1.useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuProvider,
+    {
+      scope: __scopeDropdownMenu,
+      triggerId: index$1.useId(),
+      triggerRef,
+      contentId: index$1.useId(),
+      open,
+      onOpenChange: setOpen,
+      onOpenToggle: React__namespace.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+      modal,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Root3, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
+    }
+  );
+};
+DropdownMenu.displayName = DROPDOWN_MENU_NAME;
+var TRIGGER_NAME = "DropdownMenuTrigger";
+var DropdownMenuTrigger = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
+    const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ jsxRuntime.jsx(Anchor2, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Combination.Primitive.button,
+      {
+        type: "button",
+        id: context.triggerId,
+        "aria-haspopup": "menu",
+        "aria-expanded": context.open,
+        "aria-controls": context.open ? context.contentId : void 0,
+        "data-state": context.open ? "open" : "closed",
+        "data-disabled": disabled ? "" : void 0,
+        disabled,
+        ...triggerProps,
+        ref: Combination.composeRefs(forwardedRef, context.triggerRef),
+        onPointerDown: Combination.composeEventHandlers(props.onPointerDown, (event) => {
+          if (!disabled && event.button === 0 && event.ctrlKey === false) {
+            context.onOpenToggle();
+            if (!context.open) event.preventDefault();
+          }
+        }),
+        onKeyDown: Combination.composeEventHandlers(props.onKeyDown, (event) => {
+          if (disabled) return;
+          if (["Enter", " "].includes(event.key)) context.onOpenToggle();
+          if (event.key === "ArrowDown") context.onOpenChange(true);
+          if (["Enter", " ", "ArrowDown"].includes(event.key)) event.preventDefault();
+        })
+      }
+    ) });
+  }
+);
+DropdownMenuTrigger.displayName = TRIGGER_NAME;
+var PORTAL_NAME = "DropdownMenuPortal";
+var DropdownMenuPortal = (props) => {
+  const { __scopeDropdownMenu, ...portalProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { ...menuScope, ...portalProps });
+};
+DropdownMenuPortal.displayName = PORTAL_NAME;
+var CONTENT_NAME = "DropdownMenuContent";
+var DropdownMenuContent = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDropdownMenu, ...contentProps } = props;
+    const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    const hasInteractedOutsideRef = React__namespace.useRef(false);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Content2$1,
+      {
+        id: context.contentId,
+        "aria-labelledby": context.triggerId,
+        ...menuScope,
+        ...contentProps,
+        ref: forwardedRef,
+        onCloseAutoFocus: Combination.composeEventHandlers(props.onCloseAutoFocus, (event) => {
+          if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
+          hasInteractedOutsideRef.current = false;
+          event.preventDefault();
+        }),
+        onInteractOutside: Combination.composeEventHandlers(props.onInteractOutside, (event) => {
+          const originalEvent = event.detail.originalEvent;
+          const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+          const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+          if (!context.modal || isRightClick) hasInteractedOutsideRef.current = true;
+        }),
+        style: {
+          ...props.style,
+          // re-namespace exposed content custom properties
+          ...{
+            "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
+            "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
+            "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
+            "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
+            "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
+          }
+        }
+      }
+    );
+  }
+);
+DropdownMenuContent.displayName = CONTENT_NAME;
+var GROUP_NAME = "DropdownMenuGroup";
+var DropdownMenuGroup = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDropdownMenu, ...groupProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ jsxRuntime.jsx(Group, { ...menuScope, ...groupProps, ref: forwardedRef });
+  }
+);
+DropdownMenuGroup.displayName = GROUP_NAME;
+var LABEL_NAME = "DropdownMenuLabel";
+var DropdownMenuLabel = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDropdownMenu, ...labelProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ jsxRuntime.jsx(Label, { ...menuScope, ...labelProps, ref: forwardedRef });
+  }
+);
+DropdownMenuLabel.displayName = LABEL_NAME;
+var ITEM_NAME = "DropdownMenuItem";
+var DropdownMenuItem = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDropdownMenu, ...itemProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ jsxRuntime.jsx(Item2$1, { ...menuScope, ...itemProps, ref: forwardedRef });
+  }
+);
+DropdownMenuItem.displayName = ITEM_NAME;
+var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
+var DropdownMenuCheckboxItem = React__namespace.forwardRef((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...checkboxItemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsxRuntime.jsx(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
+});
+DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
+var DropdownMenuRadioGroup = React__namespace.forwardRef((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...radioGroupProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
+});
+DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
+var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
+var DropdownMenuRadioItem = React__namespace.forwardRef((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...radioItemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
+});
+DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
+var INDICATOR_NAME = "DropdownMenuItemIndicator";
+var DropdownMenuItemIndicator = React__namespace.forwardRef((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsxRuntime.jsx(ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
+});
+DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
+var SEPARATOR_NAME = "DropdownMenuSeparator";
+var DropdownMenuSeparator = React__namespace.forwardRef((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...separatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsxRuntime.jsx(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
+});
+DropdownMenuSeparator.displayName = SEPARATOR_NAME;
+var ARROW_NAME = "DropdownMenuArrow";
+var DropdownMenuArrow = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDropdownMenu, ...arrowProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { ...menuScope, ...arrowProps, ref: forwardedRef });
+  }
+);
+DropdownMenuArrow.displayName = ARROW_NAME;
+var DropdownMenuSub = (props) => {
+  const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const [open = false, setOpen] = index$1.useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
+};
+var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
+var DropdownMenuSubTrigger = React__namespace.forwardRef((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subTriggerProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsxRuntime.jsx(SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
+});
+DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+var SUB_CONTENT_NAME = "DropdownMenuSubContent";
+var DropdownMenuSubContent = React__namespace.forwardRef((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subContentProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SubContent,
+    {
+      ...menuScope,
+      ...subContentProps,
+      ref: forwardedRef,
+      style: {
+        ...props.style,
+        // re-namespace exposed content custom properties
+        ...{
+          "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
+          "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
+          "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
+          "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
+          "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
+        }
+      }
+    }
+  );
+});
+DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
+var Root2 = DropdownMenu;
+var Trigger = DropdownMenuTrigger;
+var Portal2 = DropdownMenuPortal;
+var Content2 = DropdownMenuContent;
+var Group2 = DropdownMenuGroup;
+var Item2 = DropdownMenuItem;
+var CheckboxItem2 = DropdownMenuCheckboxItem;
+var RadioGroup2 = DropdownMenuRadioGroup;
+var RadioItem2 = DropdownMenuRadioItem;
+var Separator2 = DropdownMenuSeparator;
+var Sub2 = DropdownMenuSub;
+var SubTrigger2 = DropdownMenuSubTrigger;
+var SubContent2 = DropdownMenuSubContent;
+
+var MenuContext = React.createContext(null);
+var useMenuContext = function () {
+    var ctx = React.useContext(MenuContext);
+    if (!ctx) {
+        throw new Error("useMenuContext must be used within a <MenuProvider>");
+    }
+    return ctx;
+};
+
+var MenuProvider = function (_a) {
+    var isMobileMenu = _a.isMobileMenu, defaultWidth = _a.defaultWidth, children = _a.children;
+    var _b = React.useState([]), stack = _b[0], setStack = _b[1];
+    var focusFirstMenuItem = function () {
+        requestAnimationFrame(function () {
+            var wrappers = document.querySelectorAll("[data-radix-popper-content-wrapper]");
+            var latestWrapper = wrappers[wrappers.length - 1];
+            if (!latestWrapper)
+                return;
+            var firstItem = latestWrapper.querySelector('[role="menuitem"]');
+            firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+        });
+    };
+    var goForward = function (item, navigatedViaKeyboard) {
+        setStack(function (prevStack) { return tslib_es6.__spreadArray(tslib_es6.__spreadArray([], prevStack, true), [item], false); });
+        if (navigatedViaKeyboard) {
+            focusFirstMenuItem();
+        }
+    };
+    var goBack = function (navigatedViaKeyboard) {
+        setStack(function (prevStack) {
+            var newStack = prevStack.slice(0, -1);
+            if (navigatedViaKeyboard) {
+                var last_1 = prevStack[prevStack.length - 1];
+                requestAnimationFrame(function () {
+                    var trigger = (last_1 === null || last_1 === void 0 ? void 0 : last_1.triggerId)
+                        ? document.querySelector("[data-menu-trigger=\"".concat(last_1.triggerId, "\"]"))
+                        : null;
+                    if (trigger) {
+                        trigger.focus();
+                    }
+                    else {
+                        focusFirstMenuItem();
+                    }
+                });
+            }
+            return newStack;
+        });
+    };
+    var reset = function () {
+        setStack([]);
+    };
+    return (React.createElement(MenuContext.Provider, { value: {
+            isMobileMenu: isMobileMenu,
+            stack: stack,
+            goForward: goForward,
+            goBack: goBack,
+            reset: reset,
+            defaultWidth: defaultWidth,
+        } }, children));
+};
+
+/**
+ * Use 'Menu' to display a list of selectable options, e.g. suggestions, presets or autocomplete results.
+ */
+var Menu = function (_a) {
+    var defaultOpen = _a.defaultOpen, open = _a.open, onOpenChange = _a.onOpenChange, _b = _a.modal, modal = _b === void 0 ? true : _b, _c = _a.isMobileMenu, isMobileMenu = _c === void 0 ? false : _c, children = _a.children, defaultWidth = _a.defaultWidth, props = tslib_es6.__rest(_a, ["defaultOpen", "open", "onOpenChange", "modal", "isMobileMenu", "children", "defaultWidth"]);
+    return (React.createElement(Root2, tslib_es6.__assign({ defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, modal: modal }, filterAttrs.filterAttrs(props)),
+        React.createElement(MenuProvider, { isMobileMenu: isMobileMenu, defaultWidth: defaultWidth }, children)));
+};
+
+var MenuItemContentTemplate = function (_a) {
+    var leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, trailingIcon = _a.trailingIcon, children = _a.children;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "arc-MenuItem-content" },
+            leadingIcon && (React.createElement("div", { className: "arc-MenuItem-leadingIcon" },
+                React.createElement(Icon.Icon, { icon: leadingIcon, size: 24 }))),
+            React.createElement("div", { className: "arc-MenuItem-text" },
+                React.createElement(Text.Text, { size: "m" }, children),
+                supportingText && React.createElement(Text.Text, { size: "xs" }, supportingText))),
+        keyCommands || trailingIcon ? (React.createElement("div", { className: "arc-MenuItem-actions" },
+            keyCommands && (React.createElement("div", { className: "arc-MenuItem-keyCommands" }, keyCommands)),
+            trailingIcon && (React.createElement("div", { className: "arc-MenuItem-trailingIcon" },
+                React.createElement(Icon.Icon, { icon: trailingIcon, size: 24 }))))) : null));
+};
+
+var MenuItemCheckbox = function (_a) {
+    var children = _a.children, checked = _a.checked, onCheckedChange = _a.onCheckedChange, isDisabled = _a.isDisabled, onSelect = _a.onSelect, id = _a.id, _b = _a.shouldKeepOpen, shouldKeepOpen = _b === void 0 ? true : _b, props = tslib_es6.__rest(_a, ["children", "checked", "onCheckedChange", "isDisabled", "onSelect", "id", "shouldKeepOpen"]);
+    return (React.createElement(CheckboxItem2, tslib_es6.__assign({ className: "arc-MenuItem arc-MenuItemCheckbox", checked: checked, onCheckedChange: onCheckedChange, disabled: isDisabled, onSelect: function (event) {
+            if (shouldKeepOpen) {
+                event.preventDefault();
+                onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(!checked);
+            }
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
+        }, id: id }, filterAttrs.filterAttrs(props)),
+        React.createElement(CheckboxIcon.CheckboxIcon, { size: "s", id: id, error: false, isDisabled: isDisabled, onChange: function () { return onCheckedChange; }, checked: checked, indeterminate: false }),
+        React.createElement(MenuItemContentTemplate, null, children)));
+};
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconChevronLeftMid =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' fill-rule='evenodd' d='m7.621 8 2.849 2.852a.673.673 0 0 1-.732 1.097.7.7 0 0 1-.218-.145L6.196 8.476a.673.673 0 0 1 0-.951L9.52 4.197a.67.67 0 0 1 1.146.476c0 .178-.07.349-.196.475z' clip-rule='evenodd'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconTickAlt2Px =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m13.5 21.914-4.707-4.707a1 1 0 0 1 0-1.414 1.024 1.024 0 0 1 1.414 0l3.293 3.293 8.293-8.293a1 1 0 1 1 1.414 1.414Z'/%3e%3c/svg%3e";
+
+/**
+ * Renders a menu item, optionally as a link if `href` is provided.
+ */
+var MenuItem = function (_a) {
+    var leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, trailingIcon = _a.trailingIcon, children = _a.children, onClick = _a.onClick, _b = _a.shouldKeepOpen, shouldKeepOpen = _b === void 0 ? true : _b, isDisabled = _a.isDisabled, href = _a.href, ariaLabel = _a.ariaLabel, props = tslib_es6.__rest(_a, ["leadingIcon", "supportingText", "keyCommands", "trailingIcon", "children", "onClick", "shouldKeepOpen", "isDisabled", "href", "ariaLabel"]);
+    var Component = href ? "a" : "div";
+    return (React.createElement(Item2, tslib_es6.__assign({ className: "arc-MenuItem", asChild: true, "aria-label": ariaLabel, onClick: isDisabled ? undefined : onClick, onSelect: function (event) {
+            if (shouldKeepOpen) {
+                event.preventDefault();
+            }
+        }, disabled: isDisabled }, filterAttrs.filterAttrs(props)),
+        React.createElement(Component, tslib_es6.__assign({ className: href && "arc-MenuItem--link", href: href }, props),
+            React.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children))));
+};
+
+/**
+ * Visual separator used to divide groups of menu items.
+ */
+var MenuSeparator = function (props) {
+    return (React.createElement(Separator2, tslib_es6.__assign({ className: "arc-MenuSeparator" }, filterAttrs.filterAttrs(props)),
+        React.createElement(Rule.Rule, null)));
+};
+
+/**
+ * The component that pops out when the dropdown menu is open.
+ */
+var MenuContent = React.forwardRef(function (_a, ref) {
+    var children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, _b = _a.align, align = _b === void 0 ? "start" : _b, alignOffset = _a.alignOffset, side = _a.side, initalTitle = _a.initalTitle, isFluidToViewport = _a.isFluidToViewport, props = tslib_es6.__rest(_a, ["children", "width", "minWidth", "maxWidth", "align", "alignOffset", "side", "initalTitle", "isFluidToViewport"]);
+    var _c = useMenuContext(), isMobileMenu = _c.isMobileMenu, stack = _c.stack, goBack = _c.goBack, defaultWidth = _c.defaultWidth, reset = _c.reset;
+    if (!isMobileMenu) {
+        return (React.createElement(Content2, tslib_es6.__assign({ ref: ref, style: { width: width !== null && width !== void 0 ? width : defaultWidth, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent", sideOffset: 12, loop: true, collisionPadding: 0, forceMount: true, align: align, alignOffset: alignOffset, side: side }, filterAttrs.filterAttrs(props)),
+            React.createElement("div", { className: "arc-MenuContent-content" }, children)));
+    }
+    var active = stack.length > 0 ? stack[stack.length - 1].content : children;
+    var prevTitle = stack.length > 1 ? stack[stack.length - 2].title : initalTitle || "Back";
+    return (React.createElement(Content2, tslib_es6.__assign({ style: { width: width !== null && width !== void 0 ? width : defaultWidth, minWidth: minWidth, maxWidth: maxWidth }, sideOffset: 12, collisionPadding: 12, className: index$4.classNames("arc-MenuContent arc-MenuContent--mobile", {
+            "arc-MenuContent--isFluid": isFluidToViewport || defaultWidth === "fluid",
+        }), side: "bottom", avoidCollisions: true, onKeyDown: function (e) {
+            if (stack.length > 0) {
+                if (e.key === "ArrowLeft") {
+                    goBack(true);
+                }
+            }
+        }, forceMount: true, onPointerDownOutside: reset, onEscapeKeyDown: reset }, filterAttrs.filterAttrs(props)),
+        stack.length > 0 && (React.createElement(React.Fragment, null,
+            React.createElement(MenuItem, { onClick: goBack, leadingIcon: BtIconChevronLeftMid }, prevTitle),
+            React.createElement(MenuSeparator, null))),
+        React.createElement("div", { key: stack.length, className: "arc-MenuContent-content arc-MenuContent-fade" }, active)));
+});
+
+/**
+ * Displays footer content at the bottom of the menu.
+ */
+var MenuFooter = function (_a) {
+    var leadingIcon = _a.leadingIcon, trailingIcon = _a.trailingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, children = _a.children, onClick = _a.onClick, isDisabled = _a.isDisabled, ariaLabel = _a.ariaLabel;
+    return (React.createElement("div", { className: "arc-MenuFooter", style: {
+            position: "relative",
+        } },
+        React.createElement("div", { className: "arc-MenuSeparator", style: { paddingTop: 0 } },
+            React.createElement(Rule.Rule, null)),
+        React.createElement(Item2, { className: "arc-MenuItem", "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
+            React.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children))));
+};
+
+/**
+ * Groups related menu items together within a dropdown menu.
+ */
+var MenuGroup = function (_a) {
+    var children = _a.children, props = tslib_es6.__rest(_a, ["children"]);
+    return (React.createElement(Group2, tslib_es6.__assign({ className: "arc-MenuGroup" }, filterAttrs.filterAttrs(props)), children));
+};
+
+/**
+ * Displays a header within the dropdown menu.
+ */
+var MenuHeader = function (_a) {
+    var leadingIcon = _a.leadingIcon, trailingIcon = _a.trailingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, children = _a.children, onClick = _a.onClick, isDisabled = _a.isDisabled, ariaLabel = _a.ariaLabel;
+    return (React.createElement("div", { className: "arc-MenuHeader" },
+        React.createElement(Item2, { className: "arc-MenuItem", style: { marginBottom: 0 }, "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
+            React.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children)),
+        React.createElement("div", { className: "arc-MenuSeparator", style: {
+                paddingBottom: 0,
+            } },
+            React.createElement(Rule.Rule, null))));
+};
+
+/**
+ * Provides a label to group related menu items.
+ */
+var MenuLabel = function (_a) {
+    var children = _a.children, props = tslib_es6.__rest(_a, ["children"]);
+    return (React.createElement(Item2, tslib_es6.__assign({ asChild: true, className: "arc-MenuLabel", tabIndex: 0, role: "presentation" }, filterAttrs.filterAttrs(props), { style: { pointerEvents: "none" } }),
+        React.createElement("div", null, children)));
+};
+
+/**
+ * When used, portals the content part into the body. By default it's arc's theme element
+ */
+var MenuPortal = function (_a) {
+    var children = _a.children, props = tslib_es6.__rest(_a, ["children"]);
+    var _b = index$1.useThemeElement(), themeElement = _b[0], setThemeElement = _b[1];
+    return (React.createElement("span", { ref: setThemeElement, style: { display: "none" } },
+        React.createElement(Portal2, tslib_es6.__assign({ container: themeElement }, filterAttrs.filterAttrs(props)), children)));
+};
+
+/**
+ * Groups menu items allowing single selection from multiple options.
+ */
+var MenuGroupSingleSelect = function (_a) {
+    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, props = tslib_es6.__rest(_a, ["children", "value", "onValueChange"]);
+    return (React.createElement(RadioGroup2, tslib_es6.__assign({ className: "arc-MenuGroupSingleSelect", value: value, onValueChange: onValueChange }, filterAttrs.filterAttrs(props)), children));
+};
+
+/**
+ * A selectable menu item used within a radio group.
+ */
+var MenuItemSingleSelect = function (_a) {
+    var children = _a.children, value = _a.value, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onSelect = _a.onSelect, leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, _c = _a.shouldKeepOpen, shouldKeepOpen = _c === void 0 ? true : _c, props = tslib_es6.__rest(_a, ["children", "value", "disabled", "onSelect", "leadingIcon", "supportingText", "shouldKeepOpen"]);
+    return (React.createElement(RadioItem2, tslib_es6.__assign({ className: "arc-MenuItem arc-MenuItemSingleSelect", value: value, disabled: disabled, onSelect: function (event) {
+            if (shouldKeepOpen) {
+                event.preventDefault();
+            }
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+        } }, filterAttrs.filterAttrs(props)),
+        React.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, supportingText: supportingText, trailingIcon: BtIconTickAlt2Px }, children)));
+};
+
+/**
+ * Scrollable container that adjusts height based on surrounding menu content.
+ */
+var MenuScrollable = function (_a) {
+    var children = _a.children;
+    var scrollableRefFunc = function (el) {
+        var totalSiblingHeight = 0;
+        // get the closest Menu.Content element this will always exist within the menu component
+        var contentContainer = el === null || el === void 0 ? void 0 : el.closest(".arc-MenuContent-content");
+        if (!contentContainer || !el)
+            return;
+        // loop over all children in Menu.Content children to get height of each non scrollable element (excluding the scroll element itself)
+        Array.from(contentContainer.children).forEach(function (child) {
+            if (child !== el) {
+                totalSiblingHeight += child.offsetHeight + 6;
+            }
+        });
+        var availableHeight = "calc(var(--radix-dropdown-menu-content-available-height) - ".concat(totalSiblingHeight, "px - 25px)");
+        el.style.height = "".concat(el.scrollHeight, "px");
+        el.style.maxHeight = availableHeight;
+    };
+    return (React.createElement("div", { ref: scrollableRefFunc, className: "arc-MenuScrollable" }, children));
+};
+
+/**
+ * Container for multi-level menu content within a dropdown menu.
+ */
+var MenuItemMultiLevel = function (_a) {
+    var _b;
+    var children = _a.children, props = tslib_es6.__rest(_a, ["children"]);
+    var isMobileMenu = useMenuContext().isMobileMenu;
+    if (!isMobileMenu) {
+        return React.createElement(Sub2, tslib_es6.__assign({}, filterAttrs.filterAttrs(props)), children);
+    }
+    var arr = React.Children.toArray(children);
+    // assuming that there will be two children in menu item multi level
+    var trigger = arr[0];
+    var portal = arr[1];
+    var pairedContent;
+    if (portal && ((_b = portal.props) === null || _b === void 0 ? void 0 : _b.children)) {
+        var portalChild = React.Children.toArray(portal.props.children);
+        pairedContent = portalChild.find(function (el) { var _a; return ((_a = el === null || el === void 0 ? void 0 : el.type) === null || _a === void 0 ? void 0 : _a.displayName) === "MenuItemMultiLevelContent"; });
+    }
+    if (!trigger || !pairedContent) {
+        console.warn("MenuItemMultiLevel requires both a Trigger and Portal");
+    }
+    // Inject content into the trigger,  skip rendering the portal in mobile
+    return React.cloneElement(trigger, { pairedContent: pairedContent });
+};
+
+/**
+ * The multi-level menu content that pops out when a menu item with children is hovered or clicked.
+ */
+var MenuItemMultiLevelContent = React.forwardRef(function (_a, ref) {
+    var children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, alignOffset = _a.alignOffset, props = tslib_es6.__rest(_a, ["children", "width", "minWidth", "maxWidth", "alignOffset"]);
+    var _b = useMenuContext(), isMobileMenu = _b.isMobileMenu, defaultWidth = _b.defaultWidth;
+    if (isMobileMenu) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    return (React.createElement(SubContent2, tslib_es6.__assign({ ref: ref, style: { width: width !== null && width !== void 0 ? width : defaultWidth, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent", sideOffset: 24, collisionPadding: 12, avoidCollisions: true, alignOffset: alignOffset }, filterAttrs.filterAttrs(props)), children));
+});
+MenuItemMultiLevelContent.displayName = "MenuItemMultiLevelContent";
+
+/**
+ * Trigger element that opens a multi-level menu when selected.
+ */
+var MenuItemMultiLevelTrigger = function (_a) {
+    var children = _a.children, isDisabled = _a.isDisabled, leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, ariaLabel = _a.ariaLabel, pairedContent = _a.pairedContent, props = tslib_es6.__rest(_a, ["children", "isDisabled", "leadingIcon", "supportingText", "keyCommands", "ariaLabel", "pairedContent"]);
+    var _b = useMenuContext(), isMobileMenu = _b.isMobileMenu, goForward = _b.goForward;
+    var moveFoward = function (e, navigatedViaKeyboard) {
+        e.preventDefault();
+        if (pairedContent) {
+            goForward({
+                title: String(children),
+                content: pairedContent,
+                triggerId: String(children),
+            }, navigatedViaKeyboard);
+        }
+    };
+    if (isMobileMenu) {
+        return (React.createElement(Item2, tslib_es6.__assign({ disabled: isDisabled, "aria-label": ariaLabel, onKeyDown: function (e) {
+                if (e.key === "ArrowRight") {
+                    moveFoward(e, true);
+                }
+            }, onClick: function (e) {
+                moveFoward(e, false);
+            }, className: "arc-MenuItem", "data-menu-trigger": children }, filterAttrs.filterAttrs(props)),
+            React.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: BtIconChevronRightMid.BtIconChevronRightMid, supportingText: supportingText, keyCommands: keyCommands }, "".concat(children))));
+    }
+    // desktop fallback
+    return (React.createElement(SubTrigger2, tslib_es6.__assign({ className: "arc-MenuItem arc-MenuItem--trigger", disabled: isDisabled, "aria-label": ariaLabel }, filterAttrs.filterAttrs(props)),
+        React.createElement("div", { className: "arc-MenuItem-content" },
+            leadingIcon && (React.createElement("div", { className: "arc-MenuItem-leadingIcon" },
+                React.createElement(Icon.Icon, { icon: leadingIcon, size: 24 }))),
+            React.createElement("div", { className: "arc-MenuItem-text" },
+                React.createElement(Text.Text, { size: "m" }, children),
+                supportingText && React.createElement(Text.Text, { size: "xs" }, supportingText))),
+        React.createElement("div", { className: "arc-MenuItem-actions" },
+            keyCommands && (React.createElement("div", { className: "arc-MenuItem-keyCommands" }, keyCommands)),
+            React.createElement("div", { className: "arc-MenuItem-trailingIcon" },
+                React.createElement(Icon.Icon, { icon: BtIconChevronRightMid.BtIconChevronRightMid, size: 24 })))));
+};
+
+/**
+ * The element that toggles the menu.
+ */
+var MenuTrigger = function (_a) {
+    var children = _a.children, asChild = _a.asChild, props = tslib_es6.__rest(_a, ["children", "asChild"]);
+    var surface = React.useContext(Surface.Context).surface;
+    return (React.createElement(Trigger, tslib_es6.__assign({ className: index$4.classNames("arc-MenuTrigger", {
+            "arc-MenuTrigger--onDarkSurface": surface === "dark",
+        }), asChild: asChild }, filterAttrs.filterAttrs(props)), children));
+};
+
+exports.Menu = Menu;
+exports.MenuContent = MenuContent;
+exports.MenuFooter = MenuFooter;
+exports.MenuGroup = MenuGroup;
+exports.MenuGroupSingleSelect = MenuGroupSingleSelect;
+exports.MenuHeader = MenuHeader;
+exports.MenuItem = MenuItem;
+exports.MenuItemCheckbox = MenuItemCheckbox;
+exports.MenuItemContentTemplate = MenuItemContentTemplate;
+exports.MenuItemMultiLevel = MenuItemMultiLevel;
+exports.MenuItemMultiLevelContent = MenuItemMultiLevelContent;
+exports.MenuItemMultiLevelTrigger = MenuItemMultiLevelTrigger;
+exports.MenuItemSingleSelect = MenuItemSingleSelect;
+exports.MenuLabel = MenuLabel;
+exports.MenuPortal = MenuPortal;
+exports.MenuScrollable = MenuScrollable;
+exports.MenuSeparator = MenuSeparator;
+exports.MenuTrigger = MenuTrigger;