@sanity/ui 4.2.0 → 5.0.0-alpha.10

package/dist/menu.js

@@ -1,626 +0,0 @@
-"use client";
-import { n as _getArrayProp } from "./helpers-C8xxXAQC.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-D1usxIE0.js";
-import { t as Flex } from "./flex-DmbDG2ks.js";
-import { n as Text, t as Stack } from "./stack-rsNFPq2-.js";
-import { t as Popover } from "./popover-B7-28L8y.js";
-import { t as useClickOutsideEvent } from "./useClickOutsideEvent-wGLGWBZN.js";
-import { i as useGlobalKeyDown, t as Hotkeys } from "./hotkeys-CaHsQlsO.js";
-import { c } from "react/compiler-runtime";
-import { clsx } from "clsx/lite";
-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() {}
-var menu = "_196sf460";
-/**
-* The `Menu` component is a building block for application menus.
-*
-* @public
-*/
-function Menu(props) {
-	let $ = c(54), children, className, forwardedRef, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, restProps, t0, t1, t2;
-	$[0] === props ? (children = $[1], className = $[2], forwardedRef = $[3], onClickOutside = $[4], onEscape = $[5], onItemClick = $[6], onItemSelect = $[7], onKeyDown = $[8], originElement = $[9], registerElement = $[10], restProps = $[11], t0 = $[12], t1 = $[13], t2 = $[14]) : ({children, className, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, padding: t0, ref: forwardedRef, registerElement, shouldFocus: t1, gap: t2, ...restProps} = props, $[0] = props, $[1] = children, $[2] = className, $[3] = forwardedRef, $[4] = onClickOutside, $[5] = onEscape, $[6] = onItemClick, $[7] = onItemSelect, $[8] = onKeyDown, $[9] = originElement, $[10] = registerElement, $[11] = restProps, $[12] = t0, $[13] = t1, $[14] = t2);
-	let padding = t0 === void 0 ? 1 : t0, shouldFocus = t1 === void 0 ? null : t1, gap = t2 === void 0 ? 1 : t2, ref = useRef(null), t3;
-	$[15] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => ref.current, $[15] = t3) : t3 = $[15], useImperativeHandle(forwardedRef, t3);
-	let { isTopLayer } = useLayer(), t4;
-	$[16] !== onKeyDown || $[17] !== originElement || $[18] !== shouldFocus ? (t4 = {
-		onKeyDown,
-		originElement,
-		shouldFocus,
-		rootElementRef: ref
-	}, $[16] = onKeyDown, $[17] = originElement, $[18] = shouldFocus, $[19] = t4) : t4 = $[19];
-	let { activeElement, activeIndex, handleItemMouseEnter, handleItemMouseLeave, handleKeyDown, mount } = useMenuController(t4), unregisterElementRef = useRef(null), t5;
-	$[20] === registerElement ? t5 = $[21] : (t5 = (el) => {
-		unregisterElementRef.current &&= (unregisterElementRef.current(), null), ref.current = el, ref.current && registerElement && (unregisterElementRef.current = registerElement(ref.current));
-	}, $[20] = registerElement, $[21] = t5);
-	let handleRefChange = t5, t6, t7;
-	$[22] !== activeIndex || $[23] !== onItemSelect ? (t6 = () => {
-		onItemSelect && onItemSelect(activeIndex);
-	}, t7 = [activeIndex, onItemSelect], $[22] = activeIndex, $[23] = onItemSelect, $[24] = t6, $[25] = t7) : (t6 = $[24], t7 = $[25]), useEffect(t6, t7);
-	let t8;
-	$[26] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => [ref.current], $[26] = t8) : t8 = $[26], useClickOutsideEvent(isTopLayer && onClickOutside, t8);
-	let t9;
-	$[27] !== isTopLayer || $[28] !== onEscape ? (t9 = (event) => {
-		isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
-	}, $[27] = isTopLayer, $[28] = onEscape, $[29] = t9) : t9 = $[29], useGlobalKeyDown(t9);
-	let t10;
-	$[30] !== activeElement || $[31] !== handleItemMouseEnter || $[32] !== handleItemMouseLeave || $[33] !== mount || $[34] !== onClickOutside || $[35] !== onEscape || $[36] !== onItemClick || $[37] !== registerElement ? (t10 = {
-		version: 2,
-		activeElement,
-		mount,
-		onClickOutside,
-		onEscape,
-		onItemClick,
-		onItemMouseEnter: handleItemMouseEnter,
-		onItemMouseLeave: handleItemMouseLeave,
-		registerElement
-	}, $[30] = activeElement, $[31] = handleItemMouseEnter, $[32] = handleItemMouseLeave, $[33] = mount, $[34] = onClickOutside, $[35] = onEscape, $[36] = onItemClick, $[37] = registerElement, $[38] = t10) : t10 = $[38];
-	let value = t10, t11;
-	$[39] === className ? t11 = $[40] : (t11 = clsx(menu, className), $[39] = className, $[40] = t11);
-	let t12;
-	$[41] !== children || $[42] !== gap ? (t12 = /* @__PURE__ */ jsx(Stack, {
-		gap,
-		children
-	}), $[41] = children, $[42] = gap, $[43] = t12) : t12 = $[43];
-	let t13;
-	$[44] !== handleKeyDown || $[45] !== handleRefChange || $[46] !== padding || $[47] !== restProps || $[48] !== t11 || $[49] !== t12 ? (t13 = /* @__PURE__ */ jsx(Box, {
-		className: t11,
-		"data-ui": "Menu",
-		...restProps,
-		onKeyDown: handleKeyDown,
-		padding,
-		ref: handleRefChange,
-		role: "menu",
-		tabIndex: -1,
-		children: t12
-	}), $[44] = handleKeyDown, $[45] = handleRefChange, $[46] = padding, $[47] = restProps, $[48] = t11, $[49] = t12, $[50] = t13) : t13 = $[50];
-	let t14;
-	return $[51] !== t13 || $[52] !== value ? (t14 = /* @__PURE__ */ jsx(MenuContext.Provider, {
-		value,
-		children: t13
-	}), $[51] = t13, $[52] = value, $[53] = t14) : t14 = $[53], t14;
-}
-/**
-* 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;
-}
-var menuDivider = "_17s3sc10";
-function MenuDividerComponent(props) {
-	let $ = c(12), className, ref, restProps, t0;
-	$[0] === props ? (className = $[1], ref = $[2], restProps = $[3], t0 = $[4]) : ({as: t0, className, ref, ...restProps} = props, $[0] = props, $[1] = className, $[2] = ref, $[3] = restProps, $[4] = t0);
-	let Component = t0 === void 0 ? "hr" : t0, t1;
-	$[5] === className ? t1 = $[6] : (t1 = clsx(menuDivider, className), $[5] = className, $[6] = t1);
-	let t2;
-	return $[7] !== Component || $[8] !== ref || $[9] !== restProps || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(Component, {
-		"data-ui": "MenuDivider",
-		className: t1,
-		ref,
-		...restProps
-	}), $[7] = Component, $[8] = ref, $[9] = restProps, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
-}
-/**
-* @public
-*/
-const MenuDivider = MenuDividerComponent;
-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-71o6vd-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