@sanity/ui 4.0.0-next.4 → 4.0.0-next.6

package/dist/menu.js

@@ -0,0 +1,614 @@
+"use client";
+import { n as _getArrayProp } from "./helpers-bwfx1e-Y.js";
+import { i as isHTMLButtonElement, r as isHTMLAnchorElement } from "./element-BYgCE_iK.js";
+import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
+import { d as createGlobalScopedContext, h as _cardColorStyle, l as useRootTheme, r as isRecord, t as useLayer, v as responsiveRadiusStyle, y as Box } from "./useLayer-9Pz-GG0r.js";
+import { t as Flex } from "./flex-BYRpBTOc.js";
+import { n as Text, t as Stack } from "./stack-C5WV-BRh.js";
+import { t as Popover } from "./popover-DfXz9lUl.js";
+import { t as useClickOutsideEvent } from "./useClickOutsideEvent-lEVhDFCQ.js";
+import { i as useGlobalKeyDown, t as Hotkeys } from "./hotkeys-aHdaZFAl.js";
+import { c } from "react/compiler-runtime";
+import { cloneElement, isValidElement, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { css, styled } from "styled-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { isValidElementType } from "react-is";
+import { ChevronRightIcon } from "@sanity/icons/ChevronRight";
+const MenuContext = createGlobalScopedContext("@sanity/ui/context/menu", null);
+/**
+* @internal
+*/
+function _isFocusable(element) {
+	return isHTMLAnchorElement(element) && element.getAttribute("data-disabled") !== "true" || isHTMLButtonElement(element) && !element.disabled;
+}
+/**
+* @internal
+*/
+function _getFocusableElements(elements) {
+	return elements.filter(_isFocusable);
+}
+function _getDOMPath(rootElement, el) {
+	let path = [], e = el;
+	for (; e !== rootElement;) {
+		let parentElement = e.parentElement;
+		if (!parentElement) return path;
+		let index = Array.from(parentElement.childNodes).indexOf(e);
+		if (path.unshift(index), parentElement === rootElement) return path;
+		e = parentElement;
+	}
+	return path;
+}
+const EMPTY_PATH = [];
+/**
+* @internal
+*/
+function _sortElements(rootElement, elements) {
+	if (!rootElement) return;
+	let map = /* @__PURE__ */ new WeakMap();
+	for (let el of elements) map.set(el, _getDOMPath(rootElement, el));
+	let _sort = (a, b) => {
+		let _a = map.get(a) || EMPTY_PATH, _b = map.get(b) || EMPTY_PATH, len = Math.max(_a.length, _b.length);
+		for (let i = 0; i < len; i += 1) {
+			let aIndex = _a[i] || -1, bIndex = _b[i] || -1;
+			if (aIndex !== bIndex) return aIndex - bIndex;
+		}
+		return 0;
+	};
+	elements.sort(_sort);
+}
+/**
+* This controller is responsible for controlling UI menu state.
+*
+* @internal
+*/
+function useMenuController(props) {
+	let $ = c(23), { onKeyDown, originElement, shouldFocus, rootElementRef } = props, t0;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = [], $[0] = t0) : t0 = $[0];
+	let elementsRef = useRef(t0), [activeIndex, _setActiveIndex] = useState(-1), activeIndexRef = useRef(activeIndex), [activeElement, setActiveElement] = useState(null), t1;
+	$[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = (nextActiveIndex) => {
+		_setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex, setActiveElement(elementsRef.current[nextActiveIndex] || null);
+	}, $[1] = t1) : t1 = $[1];
+	let setActiveIndex = t1, t2;
+	$[2] === rootElementRef ? t2 = $[3] : (t2 = (element, selected) => {
+		if (!element) return _temp$2;
+		if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElementRef.current, elementsRef.current)), selected) {
+			let selectedIndex = elementsRef.current.indexOf(element);
+			setActiveIndex(selectedIndex);
+		}
+		return () => {
+			let idx = elementsRef.current.indexOf(element);
+			idx > -1 && elementsRef.current.splice(idx, 1);
+		};
+	}, $[2] = rootElementRef, $[3] = t2);
+	let mount = t2, t3, t4;
+	$[4] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => () => setActiveIndex(-1), t4 = [setActiveIndex], $[4] = t3, $[5] = t4) : (t3 = $[4], t4 = $[5]), useEffect(t3, t4);
+	let t5;
+	$[6] !== onKeyDown || $[7] !== originElement ? (t5 = (event) => {
+		if (event.key === "Tab") {
+			originElement && originElement.focus();
+			return;
+		}
+		if (event.key === "Home") {
+			event.preventDefault(), event.stopPropagation();
+			let el = _getFocusableElements(elementsRef.current)[0];
+			if (!el) return;
+			let currentIndex = elementsRef.current.indexOf(el);
+			setActiveIndex(currentIndex);
+			return;
+		}
+		if (event.key === "End") {
+			event.preventDefault(), event.stopPropagation();
+			let focusableElements_0 = _getFocusableElements(elementsRef.current), el_0 = focusableElements_0[focusableElements_0.length - 1];
+			if (!el_0) return;
+			let currentIndex_0 = elementsRef.current.indexOf(el_0);
+			setActiveIndex(currentIndex_0);
+			return;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault(), event.stopPropagation();
+			let focusableElements_1 = _getFocusableElements(elementsRef.current), focusableLen = focusableElements_1.length;
+			if (focusableLen === 0) return;
+			let focusedElement = elementsRef.current[activeIndexRef.current], focusedIndex = focusableElements_1.indexOf(focusedElement);
+			focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen;
+			let el_1 = focusableElements_1[focusedIndex], currentIndex_1 = elementsRef.current.indexOf(el_1);
+			setActiveIndex(currentIndex_1);
+			return;
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault(), event.stopPropagation();
+			let focusableElements_2 = _getFocusableElements(elementsRef.current), focusableLen_0 = focusableElements_2.length;
+			if (focusableLen_0 === 0) return;
+			let focusedElement_0 = elementsRef.current[activeIndexRef.current], focusedIndex_0 = focusableElements_2.indexOf(focusedElement_0);
+			focusedIndex_0 = (focusedIndex_0 + 1) % focusableLen_0;
+			let el_2 = focusableElements_2[focusedIndex_0], currentIndex_2 = elementsRef.current.indexOf(el_2);
+			setActiveIndex(currentIndex_2);
+			return;
+		}
+		onKeyDown && onKeyDown(event);
+	}, $[6] = onKeyDown, $[7] = originElement, $[8] = t5) : t5 = $[8];
+	let handleKeyDown = t5, t6;
+	$[9] === Symbol.for("react.memo_cache_sentinel") ? (t6 = (event_0) => {
+		let element_0 = event_0.currentTarget, currentIndex_3 = elementsRef.current.indexOf(element_0);
+		setActiveIndex(currentIndex_3);
+	}, $[9] = t6) : t6 = $[9];
+	let handleItemMouseEnter = t6, t7;
+	$[10] === rootElementRef ? t7 = $[11] : (t7 = () => {
+		setActiveIndex(-2), rootElementRef.current?.focus();
+	}, $[10] = rootElementRef, $[11] = t7);
+	let handleItemMouseLeave = t7, t8, t9;
+	$[12] !== activeIndex || $[13] !== rootElementRef || $[14] !== shouldFocus ? (t8 = () => {
+		if (!rootElementRef.current) return;
+		let rafId = requestAnimationFrame(() => {
+			if (activeIndex === -1) {
+				if (shouldFocus === "first") {
+					let el_3 = _getFocusableElements(elementsRef.current)[0];
+					if (el_3) {
+						let currentIndex_4 = elementsRef.current.indexOf(el_3);
+						setActiveIndex(currentIndex_4);
+					}
+				}
+				if (shouldFocus === "last") {
+					let focusableElements_4 = _getFocusableElements(elementsRef.current), el_4 = focusableElements_4[focusableElements_4.length - 1];
+					if (el_4) {
+						let currentIndex_5 = elementsRef.current.indexOf(el_4);
+						setActiveIndex(currentIndex_5);
+					}
+				}
+				return;
+			}
+			(elementsRef.current[activeIndex] || null)?.focus();
+		});
+		return () => cancelAnimationFrame(rafId);
+	}, t9 = [
+		activeIndex,
+		rootElementRef,
+		setActiveIndex,
+		shouldFocus
+	], $[12] = activeIndex, $[13] = rootElementRef, $[14] = shouldFocus, $[15] = t8, $[16] = t9) : (t8 = $[15], t9 = $[16]), useEffect(t8, t9);
+	let t10;
+	return $[17] !== activeElement || $[18] !== activeIndex || $[19] !== handleItemMouseLeave || $[20] !== handleKeyDown || $[21] !== mount ? (t10 = {
+		activeElement,
+		activeIndex,
+		handleItemMouseEnter,
+		handleItemMouseLeave,
+		handleKeyDown,
+		mount
+	}, $[17] = activeElement, $[18] = activeIndex, $[19] = handleItemMouseLeave, $[20] = handleKeyDown, $[21] = mount, $[22] = t10) : t10 = $[22], t10;
+}
+function _temp$2() {}
+const StyledMenu = styled(Box).withConfig({
+	displayName: "StyledMenu",
+	componentId: "sc-24nah5-0"
+})`outline:none;overflow:auto;`;
+/**
+* The `Menu` component is a building block for application menus.
+*
+* @public
+*/
+function Menu(props) {
+	let $ = c(50), children, forwardedRef, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, restProps, t0, t1, t2;
+	$[0] === props ? (children = $[1], forwardedRef = $[2], onClickOutside = $[3], onEscape = $[4], onItemClick = $[5], onItemSelect = $[6], onKeyDown = $[7], originElement = $[8], registerElement = $[9], restProps = $[10], t0 = $[11], t1 = $[12], t2 = $[13]) : ({children, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, padding: t0, ref: forwardedRef, registerElement, shouldFocus: t1, gap: t2, ...restProps} = props, $[0] = props, $[1] = children, $[2] = forwardedRef, $[3] = onClickOutside, $[4] = onEscape, $[5] = onItemClick, $[6] = onItemSelect, $[7] = onKeyDown, $[8] = originElement, $[9] = registerElement, $[10] = restProps, $[11] = t0, $[12] = t1, $[13] = t2);
+	let padding = t0 === void 0 ? 1 : t0, shouldFocus = t1 === void 0 ? null : t1, gap = t2 === void 0 ? 1 : t2, ref = useRef(null), t3;
+	$[14] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => ref.current, $[14] = t3) : t3 = $[14], useImperativeHandle(forwardedRef, t3);
+	let { isTopLayer } = useLayer(), t4;
+	$[15] !== onKeyDown || $[16] !== originElement || $[17] !== shouldFocus ? (t4 = {
+		onKeyDown,
+		originElement,
+		shouldFocus,
+		rootElementRef: ref
+	}, $[15] = onKeyDown, $[16] = originElement, $[17] = shouldFocus, $[18] = t4) : t4 = $[18];
+	let { activeElement, activeIndex, handleItemMouseEnter, handleItemMouseLeave, handleKeyDown, mount } = useMenuController(t4), unregisterElementRef = useRef(null), t5;
+	$[19] === registerElement ? t5 = $[20] : (t5 = (el) => {
+		unregisterElementRef.current &&= (unregisterElementRef.current(), null), ref.current = el, ref.current && registerElement && (unregisterElementRef.current = registerElement(ref.current));
+	}, $[19] = registerElement, $[20] = t5);
+	let handleRefChange = t5, t6, t7;
+	$[21] !== activeIndex || $[22] !== onItemSelect ? (t6 = () => {
+		onItemSelect && onItemSelect(activeIndex);
+	}, t7 = [activeIndex, onItemSelect], $[21] = activeIndex, $[22] = onItemSelect, $[23] = t6, $[24] = t7) : (t6 = $[23], t7 = $[24]), useEffect(t6, t7);
+	let t8;
+	$[25] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => [ref.current], $[25] = t8) : t8 = $[25], useClickOutsideEvent(isTopLayer && onClickOutside, t8);
+	let t9;
+	$[26] !== isTopLayer || $[27] !== onEscape ? (t9 = (event) => {
+		isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
+	}, $[26] = isTopLayer, $[27] = onEscape, $[28] = t9) : t9 = $[28], useGlobalKeyDown(t9);
+	let t10;
+	$[29] !== activeElement || $[30] !== handleItemMouseEnter || $[31] !== handleItemMouseLeave || $[32] !== mount || $[33] !== onClickOutside || $[34] !== onEscape || $[35] !== onItemClick || $[36] !== registerElement ? (t10 = {
+		version: 2,
+		activeElement,
+		mount,
+		onClickOutside,
+		onEscape,
+		onItemClick,
+		onItemMouseEnter: handleItemMouseEnter,
+		onItemMouseLeave: handleItemMouseLeave,
+		registerElement
+	}, $[29] = activeElement, $[30] = handleItemMouseEnter, $[31] = handleItemMouseLeave, $[32] = mount, $[33] = onClickOutside, $[34] = onEscape, $[35] = onItemClick, $[36] = registerElement, $[37] = t10) : t10 = $[37];
+	let value = t10, t11;
+	$[38] !== children || $[39] !== gap ? (t11 = /* @__PURE__ */ jsx(Stack, {
+		gap,
+		children
+	}), $[38] = children, $[39] = gap, $[40] = t11) : t11 = $[40];
+	let t12;
+	$[41] !== handleKeyDown || $[42] !== handleRefChange || $[43] !== padding || $[44] !== restProps || $[45] !== t11 ? (t12 = /* @__PURE__ */ jsx(StyledMenu, {
+		"data-ui": "Menu",
+		...restProps,
+		onKeyDown: handleKeyDown,
+		padding,
+		ref: handleRefChange,
+		role: "menu",
+		tabIndex: -1,
+		children: t11
+	}), $[41] = handleKeyDown, $[42] = handleRefChange, $[43] = padding, $[44] = restProps, $[45] = t11, $[46] = t12) : t12 = $[46];
+	let t13;
+	return $[47] !== t12 || $[48] !== value ? (t13 = /* @__PURE__ */ jsx(MenuContext.Provider, {
+		value,
+		children: t12
+	}), $[47] = t12, $[48] = value, $[49] = t13) : t13 = $[49], t13;
+}
+/**
+* The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
+*
+* @public
+*/
+function MenuButton(props) {
+	let $ = c(56), { __unstable_disableRestoreFocusOnClose: t0, button: buttonProp, id, menu: menuProp, onClose, onOpen, popover, ref: forwardedRef } = props, disableRestoreFocusOnClose = t0 !== void 0 && t0, [open, setOpen] = useState(!1), [shouldFocus, setShouldFocus] = useState(null), [buttonElement, setButtonElement] = useState(null), t1;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [], $[0] = t1) : t1 = $[0];
+	let [menuElements, setChildMenuElements] = useState(t1), openRef = useRef(open), t2, t3;
+	$[1] !== onOpen || $[2] !== open ? (t2 = () => {
+		onOpen && open && !openRef.current && onOpen();
+	}, t3 = [onOpen, open], $[1] = onOpen, $[2] = open, $[3] = t2, $[4] = t3) : (t2 = $[3], t3 = $[4]), useEffect(t2, t3);
+	let t4, t5;
+	$[5] !== onClose || $[6] !== open ? (t4 = () => {
+		onClose && !open && openRef.current && onClose();
+	}, t5 = [onClose, open], $[5] = onClose, $[6] = open, $[7] = t4, $[8] = t5) : (t4 = $[7], t5 = $[8]), useEffect(t4, t5);
+	let t6, t7;
+	$[9] === open ? (t6 = $[10], t7 = $[11]) : (t6 = () => {
+		openRef.current = open;
+	}, t7 = [open], $[9] = open, $[10] = t6, $[11] = t7), useEffect(t6, t7);
+	let t8;
+	$[12] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => {
+		setOpen(_temp$1), setShouldFocus(null);
+	}, $[12] = t8) : t8 = $[12];
+	let handleButtonClick = t8, t9;
+	$[13] === open ? t9 = $[14] : (t9 = (event) => {
+		open && event.preventDefault();
+	}, $[13] = open, $[14] = t9);
+	let handleMouseDown = t9, t10;
+	$[15] === Symbol.for("react.memo_cache_sentinel") ? (t10 = (event_0) => {
+		if (event_0.key === "ArrowDown" || event_0.key === "Enter" || event_0.key === " ") {
+			event_0.preventDefault(), setOpen(!0), setShouldFocus("first");
+			return;
+		}
+		if (event_0.key === "ArrowUp") {
+			event_0.preventDefault(), setOpen(!0), setShouldFocus("last");
+			return;
+		}
+	}, $[15] = t10) : t10 = $[15];
+	let handleButtonKeyDown = t10, t11;
+	$[16] !== buttonElement || $[17] !== menuElements ? (t11 = (event_1) => {
+		let target = event_1.target;
+		if (target instanceof Node && !(buttonElement && (target === buttonElement || buttonElement.contains(target)))) {
+			for (let el of menuElements) if (target === el || el.contains(target)) return;
+			setOpen(!1);
+		}
+	}, $[16] = buttonElement, $[17] = menuElements, $[18] = t11) : t11 = $[18];
+	let handleMenuClickOutside = t11, t12;
+	$[19] !== buttonElement || $[20] !== disableRestoreFocusOnClose ? (t12 = () => {
+		setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
+	}, $[19] = buttonElement, $[20] = disableRestoreFocusOnClose, $[21] = t12) : t12 = $[21];
+	let handleMenuEscape = t12, t13;
+	$[22] === menuElements ? t13 = $[23] : (t13 = (event_2) => {
+		let target_0 = event_2.relatedTarget;
+		if (target_0 instanceof Node) {
+			for (let el_0 of menuElements) if (el_0 === target_0 || el_0.contains(target_0)) return;
+			setOpen(!1);
+		}
+	}, $[22] = menuElements, $[23] = t13);
+	let handleBlur = t13, t14;
+	$[24] !== buttonElement || $[25] !== disableRestoreFocusOnClose ? (t14 = () => {
+		setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
+	}, $[24] = buttonElement, $[25] = disableRestoreFocusOnClose, $[26] = t14) : t14 = $[26];
+	let handleItemClick = t14, t15;
+	$[27] === Symbol.for("react.memo_cache_sentinel") ? (t15 = (el_1) => (setChildMenuElements((els) => els.concat([el_1])), () => setChildMenuElements((els_0) => els_0.filter((_el) => _el !== el_1))), $[27] = t15) : t15 = $[27];
+	let registerElement = t15, t16;
+	$[28] !== buttonElement || $[29] !== handleBlur || $[30] !== handleItemClick || $[31] !== handleMenuClickOutside || $[32] !== handleMenuEscape || $[33] !== id || $[34] !== menuProp || $[35] !== shouldFocus ? (t16 = menuProp && cloneElement(menuProp, {
+		"aria-labelledby": id,
+		onBlurCapture: handleBlur,
+		onClickOutside: handleMenuClickOutside,
+		onEscape: handleMenuEscape,
+		onItemClick: handleItemClick,
+		originElement: buttonElement,
+		registerElement,
+		shouldFocus
+	}), $[28] = buttonElement, $[29] = handleBlur, $[30] = handleItemClick, $[31] = handleMenuClickOutside, $[32] = handleMenuEscape, $[33] = id, $[34] = menuProp, $[35] = shouldFocus, $[36] = t16) : t16 = $[36];
+	let menu = t16, t17;
+	$[37] !== buttonProp || $[38] !== handleMouseDown || $[39] !== id || $[40] !== open ? (t17 = buttonProp && cloneElement(buttonProp, {
+		"data-ui": "MenuButton",
+		id,
+		onClick: handleButtonClick,
+		onKeyDown: handleButtonKeyDown,
+		onMouseDown: handleMouseDown,
+		"aria-haspopup": !0,
+		"aria-expanded": open,
+		ref: setButtonElement,
+		selected: buttonProp.props.selected ?? open
+	}), $[37] = buttonProp, $[38] = handleMouseDown, $[39] = id, $[40] = open, $[41] = t17) : t17 = $[41];
+	let button = t17, t18, t19;
+	$[42] === buttonElement ? (t18 = $[43], t19 = $[44]) : (t18 = () => buttonElement, t19 = [buttonElement], $[42] = buttonElement, $[43] = t18, $[44] = t19), useImperativeHandle(forwardedRef, t18, t19);
+	let t20;
+	$[45] === popover ? t20 = $[46] : (t20 = popover || {}, $[45] = popover, $[46] = t20);
+	let t21;
+	$[47] === t20 ? t21 = $[48] : (t21 = {
+		overflow: "auto",
+		portal: !0,
+		...t20
+	}, $[47] = t20, $[48] = t21);
+	let popoverProps = t21, t22;
+	$[49] === button ? t22 = $[50] : (t22 = button || /* @__PURE__ */ jsx(Fragment$1, {}), $[49] = button, $[50] = t22);
+	let t23;
+	return $[51] !== menu || $[52] !== open || $[53] !== popoverProps || $[54] !== t22 ? (t23 = /* @__PURE__ */ jsx(Popover, {
+		"data-ui": "MenuButton__popover",
+		...popoverProps,
+		content: menu,
+		open,
+		children: t22
+	}), $[51] = menu, $[52] = open, $[53] = popoverProps, $[54] = t22, $[55] = t23) : t23 = $[55], t23;
+}
+function _temp$1(v) {
+	return !v;
+}
+/**
+* @public
+*/
+const MenuDivider = styled.hr.withConfig({
+	displayName: "MenuDivider",
+	componentId: "sc-sxuath-0"
+})`height:1px;border:0;background:var(--card-hairline-soft-color);margin:0;`;
+function selectableBaseStyle() {
+	return css`background-color:inherit;color:inherit;&[data-as='button']{-webkit-font-smoothing:inherit;appearance:none;outline:none;font:inherit;text-align:inherit;border:0;width:-moz-available;width:-webkit-fill-available;width:stretch;}&[data-as='a']{text-decoration:none;}`;
+}
+function selectableColorStyle(props) {
+	let { $tone } = props, { color, style } = getTheme_v2(props.theme), tone = color.selectable[$tone];
+	return css`${_cardColorStyle(color, tone.enabled)} background-color:var(--card-bg-color);color:var(--card-fg-color);outline:none;&[data-as='button']{&:disabled{${_cardColorStyle(color, tone.disabled)}}&:not(:disabled){&[aria-pressed='true']{${_cardColorStyle(color, tone.pressed)}}&[data-selected],&[aria-selected='true'] > &{${_cardColorStyle(color, tone.selected)}}@media (hover:hover){&:not([data-selected]){&[data-hovered],&:hover{${_cardColorStyle(color, tone.hovered)}}&:active{${_cardColorStyle(color, tone.pressed)}}}}}}&[data-as='a']{&[data-disabled]{${_cardColorStyle(color, tone.disabled)}}&:not([data-disabled]){&[data-pressed]{${_cardColorStyle(color, tone.pressed)}}&[data-selected]{${_cardColorStyle(color, tone.selected)}}@media (hover:hover){&:not([data-selected]){&[data-hovered],&:hover{${_cardColorStyle(color, tone.hovered)}}&:active{${_cardColorStyle(color, tone.pressed)}}}}}}${style?.card?.root}`;
+}
+/**
+* @internal
+*/
+const Selectable = /* @__PURE__ */ styled(Box).withConfig({
+	displayName: "Selectable",
+	componentId: "sc-njdnrn-0"
+})(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
+function useMenu() {
+	let value = useContext(MenuContext);
+	if (!value) throw Error("useMenu(): missing context value");
+	if (!isRecord(value) || value.version !== 2) throw Error("useMenu(): the context value is not compatible");
+	return value;
+}
+/**
+* @public
+*/
+const MenuGroup = function MenuGroup(props) {
+	let $ = c(81), IconComponent, children, menuProps, onClick, popover, restProps, t0, t1, t2, t3, t4, t5, text;
+	$[0] === props ? (IconComponent = $[1], children = $[2], menuProps = $[3], onClick = $[4], popover = $[5], restProps = $[6], t0 = $[7], t1 = $[8], t2 = $[9], t3 = $[10], t4 = $[11], t5 = $[12], text = $[13]) : ({as: t0, children, fontSize: t1, icon: IconComponent, menu: menuProps, onClick, padding: t2, popover, radius: t3, gap: t4, text, tone: t5, ...restProps} = props, $[0] = props, $[1] = IconComponent, $[2] = children, $[3] = menuProps, $[4] = onClick, $[5] = popover, $[6] = restProps, $[7] = t0, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = t4, $[12] = t5, $[13] = text);
+	let as = t0 === void 0 ? "button" : t0, fontSize = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 3 : t2, radius = t3 === void 0 ? 2 : t3, gap = t4 === void 0 ? 3 : t4, tone = t5 === void 0 ? "default" : t5, menu = useMenu(), { scheme } = useRootTheme(), { activeElement, mount, onClickOutside, onEscape, onItemClick, onItemMouseEnter: _onItemMouseEnter, registerElement } = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter, [rootElement, setRootElement] = useState(null), [open, setOpen] = useState(!1), [shouldFocus, setShouldFocus] = useState(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = useState(!1), t6;
+	$[14] === onItemMouseEnter ? t6 = $[15] : (t6 = (event) => {
+		setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
+	}, $[14] = onItemMouseEnter, $[15] = t6);
+	let handleMouseEnter = t6, t7;
+	$[16] === rootElement ? t7 = $[17] : (t7 = (event_0) => {
+		event_0.key === "ArrowLeft" && (event_0.stopPropagation(), setOpen(!1), requestAnimationFrame(() => {
+			rootElement?.focus();
+		}));
+	}, $[16] = rootElement, $[17] = t7);
+	let handleMenuKeyDown = t7, t8;
+	$[18] === onClick ? t8 = $[19] : (t8 = (event_1) => {
+		onClick?.(event_1), setShouldFocus("first"), setOpen(!0);
+	}, $[18] = onClick, $[19] = t8);
+	let handleClick = t8, t9;
+	$[20] === onItemClick ? t9 = $[21] : (t9 = () => {
+		setOpen(!1), onItemClick?.();
+	}, $[20] = onItemClick, $[21] = t9);
+	let handleChildItemClick = t9, t10;
+	$[22] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => setWithinMenu(!0), $[22] = t10) : t10 = $[22];
+	let handleMenuMouseEnter = t10, t11, t12;
+	$[23] !== mount || $[24] !== rootElement ? (t11 = () => mount(rootElement), t12 = [mount, rootElement], $[23] = mount, $[24] = rootElement, $[25] = t11, $[26] = t12) : (t11 = $[25], t12 = $[26]), useEffect(t11, t12);
+	let t13, t14;
+	$[27] === active ? (t13 = $[28], t14 = $[29]) : (t13 = () => {
+		active || setOpen(!1);
+	}, t14 = [active], $[27] = active, $[28] = t13, $[29] = t14), useEffect(t13, t14);
+	let t15, t16;
+	$[30] === open ? (t15 = $[31], t16 = $[32]) : (t15 = () => {
+		open || setWithinMenu(!1);
+	}, t16 = [open], $[30] = open, $[31] = t15, $[32] = t16), useEffect(t15, t16);
+	let t17, t18;
+	$[33] === shouldFocus ? (t17 = $[34], t18 = $[35]) : (t17 = () => {
+		if (!shouldFocus) return;
+		let rafId = requestAnimationFrame(() => setShouldFocus(null));
+		return () => cancelAnimationFrame(rafId);
+	}, t18 = [shouldFocus], $[33] = shouldFocus, $[34] = t17, $[35] = t18), useEffect(t17, t18);
+	let t19;
+	$[36] !== children || $[37] !== handleChildItemClick || $[38] !== handleMenuKeyDown || $[39] !== menuProps || $[40] !== onClickOutside || $[41] !== onEscape || $[42] !== registerElement || $[43] !== shouldFocus ? (t19 = /* @__PURE__ */ jsx(Menu, {
+		...menuProps,
+		onClickOutside,
+		onEscape,
+		onItemClick: handleChildItemClick,
+		onKeyDown: handleMenuKeyDown,
+		onMouseEnter: handleMenuMouseEnter,
+		registerElement,
+		shouldFocus,
+		children
+	}), $[36] = children, $[37] = handleChildItemClick, $[38] = handleMenuKeyDown, $[39] = menuProps, $[40] = onClickOutside, $[41] = onEscape, $[42] = registerElement, $[43] = shouldFocus, $[44] = t19) : t19 = $[44];
+	let childMenu = t19, t20;
+	$[45] === Symbol.for("react.memo_cache_sentinel") ? (t20 = (event_2) => {
+		let target = event_2.currentTarget;
+		if (document.activeElement === target && event_2.key === "ArrowRight") {
+			setShouldFocus("first"), setOpen(!0), setWithinMenu(!0);
+			return;
+		}
+	}, $[45] = t20) : t20 = $[45];
+	let handleKeyDown = t20, t21 = as === "button" ? withinMenu : void 0, t22 = as === "button" ? void 0 : withinMenu, t23 = !withinMenu && active ? "" : void 0, t24;
+	$[46] === radius ? t24 = $[47] : (t24 = _getArrayProp(radius), $[46] = radius, $[47] = t24);
+	let t25 = as === "button" ? "button" : void 0, t26;
+	$[48] !== IconComponent || $[49] !== fontSize ? (t26 = IconComponent && /* @__PURE__ */ jsxs(Text, {
+		size: fontSize,
+		children: [isValidElement(IconComponent) && IconComponent, isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})]
+	}), $[48] = IconComponent, $[49] = fontSize, $[50] = t26) : t26 = $[50];
+	let t27;
+	$[51] !== fontSize || $[52] !== text ? (t27 = /* @__PURE__ */ jsx(Box, {
+		flex: 1,
+		children: /* @__PURE__ */ jsx(Text, {
+			size: fontSize,
+			textOverflow: "ellipsis",
+			weight: "medium",
+			children: text
+		})
+	}), $[51] = fontSize, $[52] = text, $[53] = t27) : t27 = $[53];
+	let t28;
+	$[54] === Symbol.for("react.memo_cache_sentinel") ? (t28 = /* @__PURE__ */ jsx(ChevronRightIcon, {}), $[54] = t28) : t28 = $[54];
+	let t29;
+	$[55] === fontSize ? t29 = $[56] : (t29 = /* @__PURE__ */ jsx(Text, {
+		size: fontSize,
+		children: t28
+	}), $[55] = fontSize, $[56] = t29);
+	let t30;
+	$[57] !== gap || $[58] !== padding || $[59] !== t26 || $[60] !== t27 || $[61] !== t29 ? (t30 = /* @__PURE__ */ jsxs(Flex, {
+		gap,
+		padding,
+		children: [
+			t26,
+			t27,
+			t29
+		]
+	}), $[57] = gap, $[58] = padding, $[59] = t26, $[60] = t27, $[61] = t29, $[62] = t30) : t30 = $[62];
+	let t31;
+	$[63] !== as || $[64] !== handleClick || $[65] !== handleMouseEnter || $[66] !== restProps || $[67] !== scheme || $[68] !== t21 || $[69] !== t22 || $[70] !== t23 || $[71] !== t24 || $[72] !== t25 || $[73] !== t30 || $[74] !== tone ? (t31 = /* @__PURE__ */ jsx(Selectable, {
+		"data-as": as,
+		"data-ui": "MenuGroup",
+		forwardedAs: as,
+		...restProps,
+		"aria-pressed": t21,
+		"data-pressed": t22,
+		"data-selected": t23,
+		$radius: t24,
+		$tone: tone,
+		$scheme: scheme,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		onMouseEnter: handleMouseEnter,
+		ref: setRootElement,
+		tabIndex: -1,
+		type: t25,
+		children: t30
+	}), $[63] = as, $[64] = handleClick, $[65] = handleMouseEnter, $[66] = restProps, $[67] = scheme, $[68] = t21, $[69] = t22, $[70] = t23, $[71] = t24, $[72] = t25, $[73] = t30, $[74] = tone, $[75] = t31) : t31 = $[75];
+	let t32;
+	return $[76] !== childMenu || $[77] !== open || $[78] !== popover || $[79] !== t31 ? (t32 = /* @__PURE__ */ jsx(Popover, {
+		...popover,
+		content: childMenu,
+		"data-ui": "MenuGroup__popover",
+		open,
+		children: t31
+	}), $[76] = childMenu, $[77] = open, $[78] = popover, $[79] = t31, $[80] = t32) : t32 = $[80], t32;
+}, MenuItem = function MenuItem(props) {
+	let $ = c(76), IconComponent, IconRightComponent, children, disabled, forwardedRef, hotkeys, onClick, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, pressed, restProps, selectedProp, t0, t1, t2, t3, t4, t5, text;
+	$[0] === props ? (IconComponent = $[1], IconRightComponent = $[2], children = $[3], disabled = $[4], forwardedRef = $[5], hotkeys = $[6], onClick = $[7], paddingBottom = $[8], paddingLeft = $[9], paddingRight = $[10], paddingTop = $[11], paddingX = $[12], paddingY = $[13], pressed = $[14], restProps = $[15], selectedProp = $[16], t0 = $[17], t1 = $[18], t2 = $[19], t3 = $[20], t4 = $[21], t5 = $[22], text = $[23]) : ({as: t0, children, disabled, fontSize: t1, hotkeys, icon: IconComponent, iconRight: IconRightComponent, onClick, padding: t2, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, pressed, radius: t3, ref: forwardedRef, selected: selectedProp, gap: t4, text, tone: t5, ...restProps} = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = forwardedRef, $[6] = hotkeys, $[7] = onClick, $[8] = paddingBottom, $[9] = paddingLeft, $[10] = paddingRight, $[11] = paddingTop, $[12] = paddingX, $[13] = paddingY, $[14] = pressed, $[15] = restProps, $[16] = selectedProp, $[17] = t0, $[18] = t1, $[19] = t2, $[20] = t3, $[21] = t4, $[22] = t5, $[23] = text);
+	let as = t0 === void 0 ? "button" : t0, fontSize = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 3 : t2, radius = t3 === void 0 ? 2 : t3, gap = t4 === void 0 ? 3 : t4, tone = t5 === void 0 ? "default" : t5, { scheme } = useRootTheme(), menu = useMenu(), { activeElement, mount, onItemClick, onItemMouseEnter: _onItemMouseEnter, onItemMouseLeave: _onItemMouseLeave } = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter, onItemMouseLeave = _onItemMouseLeave ?? menu.onItemMouseLeave, [rootElement, setRootElement] = useState(null), active = !!activeElement && activeElement === rootElement, ref = useRef(null), t6;
+	$[24] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[24] = t6) : t6 = $[24], useImperativeHandle(forwardedRef, t6);
+	let t7, t8;
+	$[25] !== mount || $[26] !== rootElement || $[27] !== selectedProp ? (t7 = () => mount(rootElement, selectedProp), t8 = [
+		mount,
+		rootElement,
+		selectedProp
+	], $[25] = mount, $[26] = rootElement, $[27] = selectedProp, $[28] = t7, $[29] = t8) : (t7 = $[28], t8 = $[29]), useEffect(t7, t8);
+	let t9;
+	$[30] !== disabled || $[31] !== onClick || $[32] !== onItemClick ? (t9 = (event) => {
+		disabled || (onClick && onClick(event), onItemClick && onItemClick());
+	}, $[30] = disabled, $[31] = onClick, $[32] = onItemClick, $[33] = t9) : t9 = $[33];
+	let handleClick = t9, t10;
+	$[34] !== padding || $[35] !== paddingBottom || $[36] !== paddingLeft || $[37] !== paddingRight || $[38] !== paddingTop || $[39] !== paddingX || $[40] !== paddingY ? (t10 = {
+		padding,
+		paddingX,
+		paddingY,
+		paddingTop,
+		paddingRight,
+		paddingBottom,
+		paddingLeft
+	}, $[34] = padding, $[35] = paddingBottom, $[36] = paddingLeft, $[37] = paddingRight, $[38] = paddingTop, $[39] = paddingX, $[40] = paddingY, $[41] = t10) : t10 = $[41];
+	let paddingProps = t10, t11;
+	$[42] === fontSize ? t11 = $[43] : (t11 = _getArrayProp(fontSize).map(_temp), $[42] = fontSize, $[43] = t11);
+	let hotkeysFontSize = t11, t12;
+	$[44] === Symbol.for("react.memo_cache_sentinel") ? (t12 = (el) => {
+		ref.current = el, setRootElement(el);
+	}, $[44] = t12) : t12 = $[44];
+	let setRef = t12, t13 = as !== "button" && pressed ? "" : void 0, t14 = active ? "" : void 0, t15 = disabled ? "" : void 0, t16;
+	$[45] === radius ? t16 = $[46] : (t16 = _getArrayProp(radius), $[45] = radius, $[46] = t16);
+	let t17;
+	$[47] === Symbol.for("react.memo_cache_sentinel") ? (t17 = _getArrayProp(0), $[47] = t17) : t17 = $[47];
+	let t18 = disabled ? "default" : tone, t19 = as === "button" ? "button" : void 0, t20;
+	$[48] !== IconComponent || $[49] !== IconRightComponent || $[50] !== fontSize || $[51] !== gap || $[52] !== hotkeys || $[53] !== hotkeysFontSize || $[54] !== paddingProps || $[55] !== text ? (t20 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxs(Flex, {
+		as: "span",
+		gap,
+		align: "center",
+		...paddingProps,
+		children: [
+			IconComponent && /* @__PURE__ */ jsxs(Text, {
+				size: fontSize,
+				children: [isValidElement(IconComponent) && IconComponent, isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})]
+			}),
+			text && /* @__PURE__ */ jsx(Box, {
+				flex: 1,
+				children: /* @__PURE__ */ jsx(Text, {
+					size: fontSize,
+					textOverflow: "ellipsis",
+					weight: "medium",
+					children: text
+				})
+			}),
+			hotkeys && /* @__PURE__ */ jsx(Hotkeys, {
+				fontSize: hotkeysFontSize,
+				keys: hotkeys,
+				style: {
+					marginTop: -4,
+					marginBottom: -4
+				}
+			}),
+			IconRightComponent && /* @__PURE__ */ jsxs(Text, {
+				size: fontSize,
+				children: [isValidElement(IconRightComponent) && IconRightComponent, isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})]
+			})
+		]
+	}), $[48] = IconComponent, $[49] = IconRightComponent, $[50] = fontSize, $[51] = gap, $[52] = hotkeys, $[53] = hotkeysFontSize, $[54] = paddingProps, $[55] = text, $[56] = t20) : t20 = $[56];
+	let t21;
+	$[57] !== children || $[58] !== paddingProps ? (t21 = children && /* @__PURE__ */ jsx(Box, {
+		as: "span",
+		...paddingProps,
+		children
+	}), $[57] = children, $[58] = paddingProps, $[59] = t21) : t21 = $[59];
+	let t22;
+	return $[60] !== as || $[61] !== disabled || $[62] !== handleClick || $[63] !== onItemMouseEnter || $[64] !== onItemMouseLeave || $[65] !== restProps || $[66] !== scheme || $[67] !== t13 || $[68] !== t14 || $[69] !== t15 || $[70] !== t16 || $[71] !== t18 || $[72] !== t19 || $[73] !== t20 || $[74] !== t21 ? (t22 = /* @__PURE__ */ jsxs(Selectable, {
+		"data-ui": "MenuItem",
+		role: "menuitem",
+		...restProps,
+		"data-pressed": t13,
+		"data-selected": t14,
+		"data-disabled": t15,
+		forwardedAs: as,
+		$radius: t16,
+		$padding: t17,
+		$tone: t18,
+		$scheme: scheme,
+		disabled,
+		onClick: handleClick,
+		onMouseEnter: onItemMouseEnter,
+		onMouseLeave: onItemMouseLeave,
+		ref: setRef,
+		tabIndex: -1,
+		type: t19,
+		children: [t20, t21]
+	}), $[60] = as, $[61] = disabled, $[62] = handleClick, $[63] = onItemMouseEnter, $[64] = onItemMouseLeave, $[65] = restProps, $[66] = scheme, $[67] = t13, $[68] = t14, $[69] = t15, $[70] = t16, $[71] = t18, $[72] = t19, $[73] = t20, $[74] = t21, $[75] = t22) : t22 = $[75], t22;
+};
+function _temp(s) {
+	return s - 1;
+}
+export { Menu, MenuButton, MenuDivider, MenuGroup, MenuItem };
+
+//# sourceMappingURL=menu.js.map