@sanity/ui 2.11.5 → 2.11.7-canary.0

package/dist/index.esm.js

@@ -166,13 +166,9 @@ function _getElements(element, elementsArg) {
     Array.isArray(el) ? ret.push(...el) : ret.push(el);
   return ret.filter(Boolean);
 }
-function useClickOutside(listener, t0, boundaryElement) {
-  const $ = c(12), elementsArg = t0 === void 0 ? EMPTY_ARRAY : t0, [element, setElement] = useState(null);
-  let t1;
-  $[0] !== element || $[1] !== elementsArg ? (t1 = () => _getElements(element, elementsArg), $[0] = element, $[1] = elementsArg, $[2] = t1) : t1 = $[2];
-  const [elements, setElements] = useState(t1), elementsRef = useRef(elements);
-  let t2, t3;
-  $[3] !== element || $[4] !== elementsArg ? (t2 = () => {
+function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
+  const [element, setElement] = useState(null), [elements, setElements] = useState(() => _getElements(element, elementsArg)), elementsRef = useRef(elements);
+  return useEffect(() => {
     const prevElements = elementsRef.current, nextElements = _getElements(element, elementsArg);
     if (prevElements.length !== nextElements.length) {
       setElements(nextElements), elementsRef.current = nextElements;
@@ -188,11 +184,8 @@ function useClickOutside(listener, t0, boundaryElement) {
         setElements(nextElements), elementsRef.current = nextElements;
         return;
       }
-  }, t3 = [element, elementsArg], $[3] = element, $[4] = elementsArg, $[5] = t2, $[6] = t3) : (t2 = $[5], t3 = $[6]), useEffect(t2, t3);
-  let t4, t5;
-  return $[7] !== boundaryElement || $[8] !== elements || $[9] !== listener ? (t4 = () => {
-    if (!listener)
-      return;
+  }, [element, elementsArg]), useEffect(() => {
+    if (!listener) return;
     const handleWindowMouseDown = (evt) => {
       const target = evt.target;
       if (target instanceof Node && !(boundaryElement && !boundaryElement.contains(target))) {
@@ -205,10 +198,10 @@ function useClickOutside(listener, t0, boundaryElement) {
     return window.addEventListener("mousedown", handleWindowMouseDown), () => {
       window.removeEventListener("mousedown", handleWindowMouseDown);
     };
-  }, t5 = [boundaryElement, listener, elements], $[7] = boundaryElement, $[8] = elements, $[9] = listener, $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]), useEffect(t4, t5), setElement;
+  }, [boundaryElement, listener, elements]), setElement;
 }
 function useClickOutsideEvent(listener, t0, boundaryElement) {
-  const $ = c(8), elementsArg = t0 === void 0 ? _temp$b : t0;
+  const $ = c(8), elementsArg = t0 === void 0 ? _temp$a : t0;
   let t1;
   $[0] !== boundaryElement || $[1] !== elementsArg || $[2] !== listener ? (t1 = (evt) => {
     if (!listener)
@@ -236,7 +229,7 @@ function useClickOutsideEvent(listener, t0, boundaryElement) {
     };
   }, t3 = [hasListener, onEvent], $[4] = hasListener, $[5] = onEvent, $[6] = t2, $[7] = t3) : (t2 = $[6], t3 = $[7]), useEffect(t2, t3), useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
 }
-function _temp$b() {
+function _temp$a() {
   return EMPTY_ARRAY;
 }
 function useCustomValidity(ref, customValidity) {
@@ -749,15 +742,15 @@ function useMediaIndex() {
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
 }
 function usePrefersDark(t0) {
-  return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$a : t0);
+  return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$9 : t0);
 }
-function _temp$a() {
+function _temp$9() {
   return !1;
 }
 function usePrefersReducedMotion(t0) {
-  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$9 : t0);
+  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$8 : t0);
 }
-function _temp$9() {
+function _temp$8() {
   return !1;
 }
 function responsiveBorderStyle() {
@@ -1702,7 +1695,7 @@ const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
   }, $[20] = onImageLoadError, $[21] = t7) : t7 = $[21];
   const handleImageError = t7;
   let t8, t9;
-  $[22] !== size2 ? (t9 = size2.map(_temp$8), $[22] = size2, $[23] = t9) : t9 = $[23], t8 = t9;
+  $[22] !== size2 ? (t9 = size2.map(_temp$7), $[22] = size2, $[23] = t9) : t9 = $[23], t8 = t9;
   const initialsSize = t8, t10 = typeof as == "string" ? as : void 0;
   let t11;
   $[24] !== color ? (t11 = /* @__PURE__ */ jsx(Arrow$1, { children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[24] = color, $[25] = t11) : t11 = $[25];
@@ -1723,7 +1716,7 @@ const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
   ] }), $[39] = arrowPosition, $[40] = as, $[41] = color, $[42] = ref, $[43] = restProps, $[44] = size2, $[45] = status, $[46] = t10, $[47] = t11, $[48] = t12, $[49] = t13, $[50] = title, $[51] = t14) : t14 = $[51], t14;
 });
 Avatar.displayName = "ForwardRef(Avatar)";
-function _temp$8(s) {
+function _temp$7(s) {
   return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
 }
 function _responsiveAvatarCounterSizeStyle(props) {
@@ -1771,7 +1764,7 @@ const StyledAvatarCounter = /* @__PURE__ */ styled.div.withConfig({
     size: t0
   } = props, size2 = useArrayProp(t0 === void 0 ? 1 : t0);
   let t1, t2;
-  $[0] !== size2 ? (t2 = size2.map(_temp$7), $[0] = size2, $[1] = t2) : t2 = $[1], t1 = t2;
+  $[0] !== size2 ? (t2 = size2.map(_temp$6), $[0] = size2, $[1] = t2) : t2 = $[1], t1 = t2;
   const fontSize2 = t1;
   let t3;
   $[2] !== count || $[3] !== fontSize2 ? (t3 = /* @__PURE__ */ jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }), $[2] = count, $[3] = fontSize2, $[4] = t3) : t3 = $[4];
@@ -1779,7 +1772,7 @@ const StyledAvatarCounter = /* @__PURE__ */ styled.div.withConfig({
   return $[5] !== ref || $[6] !== size2 || $[7] !== t3 ? (t4 = /* @__PURE__ */ jsx(StyledAvatarCounter, { $size: size2, "data-ui": "AvatarCounter", ref, children: t3 }), $[5] = ref, $[6] = size2, $[7] = t3, $[8] = t4) : t4 = $[8], t4;
 });
 AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
-function _temp$7(s) {
+function _temp$6(s) {
   return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
 }
 const BASE_STYLES = css`
@@ -3013,13 +3006,13 @@ const StyledInline = /* @__PURE__ */ styled(Box).withConfig({
     ...restProps
   } = props, $[0] = props, $[1] = as, $[2] = childrenProp, $[3] = restProps, $[4] = space) : (as = $[1], childrenProp = $[2], restProps = $[3], space = $[4]);
   let t0, t1;
-  $[5] !== childrenProp ? (t1 = Children.map(childrenProp, _temp$6), $[5] = childrenProp, $[6] = t1) : t1 = $[6], t0 = t1;
+  $[5] !== childrenProp ? (t1 = Children.map(childrenProp, _temp$5), $[5] = childrenProp, $[6] = t1) : t1 = $[6], t0 = t1;
   const children = t0, t2 = useArrayProp(space);
   let t3;
   return $[7] !== as || $[8] !== children || $[9] !== restProps || $[10] !== t2 ? (t3 = /* @__PURE__ */ jsx(StyledInline, { "data-ui": "Inline", ...restProps, $space: t2, forwardedAs: as, ref, children }), $[7] = as, $[8] = children, $[9] = restProps, $[10] = t2, $[11] = t3) : t3 = $[11], t3;
 });
 Inline.displayName = "ForwardRef(Inline)";
-function _temp$6(child) {
+function _temp$5(child) {
   return child && /* @__PURE__ */ jsx("div", { children: child });
 }
 function kbdStyle() {
@@ -3458,7 +3451,7 @@ function LayerProvider(props) {
         [childLevel]: prevLen + 1
       };
       return setSize(Object.keys(nextState).length), nextState;
-    }) : setSize(_temp$5), () => {
+    }) : setSize(_temp$4), () => {
       childLevel !== void 0 ? setChildLayers((state_0) => {
         const nextState_0 = {
           ...state_0
@@ -3486,7 +3479,7 @@ function LayerProvider(props) {
 function _temp2$3(v_0) {
   return v_0 - 1;
 }
-function _temp$5(v) {
+function _temp$4(v) {
   return v + 1;
 }
 LayerProvider.displayName = "LayerProvider";
@@ -3580,7 +3573,7 @@ function PortalProvider(props) {
     children,
     element,
     __unstable_elements: elementsProp
-  } = props, elements = useUnique(elementsProp), fallbackElement = useSyncExternalStore(emptySubscribe, _temp$4, _temp2$2);
+  } = props, elements = useUnique(elementsProp), fallbackElement = useSyncExternalStore(emptySubscribe, _temp$3, _temp2$2);
   let t0;
   const t1 = boundaryElement || null, t2 = element || fallbackElement;
   let t3;
@@ -3597,7 +3590,7 @@ function PortalProvider(props) {
 function _temp2$2() {
   return null;
 }
-function _temp$4() {
+function _temp$3() {
   return document.body;
 }
 PortalProvider.displayName = "PortalProvider";
@@ -3664,11 +3657,8 @@ const StyledVirtualList = styled.div.withConfig({
   $[14] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => {
     if (!ref.current)
       return;
-    let _scrollEl = ref.current.parentNode;
-    for (; _scrollEl && !_isScrollable(_scrollEl); )
-      _scrollEl = _scrollEl.parentNode;
-    if (_scrollEl) {
-      const scrollEl = _scrollEl;
+    const scrollEl = findScrollable(ref.current.parentNode);
+    if (scrollEl) {
       if (!(scrollEl instanceof HTMLElement))
         return;
       const handleScroll = () => {
@@ -3746,6 +3736,16 @@ const StyledVirtualList = styled.div.withConfig({
   return $[52] !== as || $[53] !== restProps || $[54] !== t14 ? (t15 = /* @__PURE__ */ jsx(StyledVirtualList, { as, "data-ui": "VirtualList", ...restProps, ref, children: t14 }), $[52] = as, $[53] = restProps, $[54] = t14, $[55] = t15) : t15 = $[55], t15;
 });
 VirtualList.displayName = "ForwardRef(VirtualList)";
+function findScrollable(parentNode) {
+  let _scrollEl = parentNode;
+  for (; _scrollEl && !_isScrollable(_scrollEl); )
+    _scrollEl = _scrollEl.parentNode;
+  return _scrollEl;
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
+}
 const DEFAULT_POPOVER_DISTANCE = 4, DEFAULT_POPOVER_PADDING = 4, DEFAULT_POPOVER_ARROW_WIDTH = 19, DEFAULT_POPOVER_ARROW_HEIGHT = 8, DEFAULT_POPOVER_ARROW_RADIUS = 2, DEFAULT_POPOVER_MARGINS = [0, 0, 0, 0], DEFAULT_FALLBACK_PLACEMENTS$1 = {
   top: ["bottom", "left", "right"],
   "top-start": ["bottom-start", "left-start", "right-start"],
@@ -4025,10 +4025,6 @@ const Popover = memo(forwardRef(function(props, forwardedRef) {
   ] });
 }));
 Popover.displayName = "Memo(ForwardRef(Popover))";
-function getElementRef(element) {
-  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
-}
 function radioBaseStyle() {
   return css`
     position: relative;
@@ -4711,7 +4707,7 @@ const CLEAR_BUTTON_BOX_STYLE = {
   const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSizeProp = t2 === void 0 ? 2 : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, type = t6 === void 0 ? "text" : t6, ref = useRef(null), rootTheme = useRootTheme(), fontSize2 = useArrayProp(fontSizeProp), padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp), $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
   let t7;
   $[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], useImperativeHandle(forwardedRef, t7), useCustomValidity(ref, customValidity);
-  const handleClearMouseDown = _temp$3;
+  const handleClearMouseDown = _temp$2;
   let t8;
   $[20] !== onClear ? (t8 = (event_0) => {
     event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
@@ -4769,7 +4765,7 @@ const CLEAR_BUTTON_BOX_STYLE = {
   ] }), $[79] = prefixNode, $[80] = rootTheme.tone, $[81] = suffixNode, $[82] = t27, $[83] = t28) : t28 = $[83], t28;
 });
 TextInput.displayName = "ForwardRef(TextInput)";
-function _temp$3(event) {
+function _temp$2(event) {
   event.preventDefault(), event.stopPropagation();
 }
 function _temp2$1(v) {
@@ -4988,21 +4984,16 @@ const StyledTooltip = styled(Layer).withConfig({
     arrowRef.current = arrowEl, update();
   }, [update]), setFloating = useCallback((node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), childRef = useRef(null);
-  useImperativeHandle(childProp?.ref, () => childRef.current);
-  const child = useMemo(() => childProp ? cloneElement(childProp, {
+  }, [refs]), child = useMemo(() => childProp ? cloneElement(childProp, {
     onBlur: handleBlur,
     onFocus: handleFocus,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onClick: handleClick,
     onContextMenu: handleContextMenu,
-    ref: childRef
+    ref: setReferenceElement
   }) : null, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave]);
-  if (useEffect(() => {
-    if (child)
-      return setReferenceElement(childRef.current), () => setReferenceElement(null);
-  }, [child]), !child) return /* @__PURE__ */ jsx(Fragment, {});
+  if (useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [referenceElement]), !child) return /* @__PURE__ */ jsx(Fragment, {});
   if (disabled) return child;
   const tooltip = /* @__PURE__ */ jsx(StyledTooltip, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: {
     ...floatingStyles,
@@ -5841,8 +5832,8 @@ const StyledMenu = styled(Box).withConfig({
 });
 Menu.displayName = "ForwardRef(Menu)";
 const MenuButton = forwardRef(function(props, forwardedRef) {
-  const $ = c(62), {
-    __unstable_disableRestoreFocusOnClose: t0,
+  const {
+    __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = !1,
     boundaryElement: deprecated_boundaryElement,
     button: buttonProp,
     id,
@@ -5851,38 +5842,23 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
     onOpen,
     placement: deprecated_placement,
     popoverScheme: deprecated_popoverScheme,
-    portal: t1,
+    portal: deprecated_portal = !0,
     popover,
     popoverRadius: deprecated_popoverRadius,
     preventOverflow: deprecated_preventOverflow
-  } = props, disableRestoreFocusOnClose = t0 === void 0 ? !1 : t0, deprecated_portal = t1 === void 0 ? !0 : t1, [open, setOpen] = useState(!1), [shouldFocus, setShouldFocus] = useState(null), [buttonElement, setButtonElement] = useState(null);
-  let t2;
-  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[0] = t2) : t2 = $[0];
-  const [menuElements, setChildMenuElements] = useState(t2), openRef = useRef(open);
-  let t3, t4;
-  $[1] !== onOpen || $[2] !== open ? (t3 = () => {
+  } = props, [open, setOpen] = useState(!1), [shouldFocus, setShouldFocus] = useState(null), [buttonElement, setButtonElement] = useState(null), [menuElements, setChildMenuElements] = useState([]), openRef = useRef(open);
+  useEffect(() => {
     onOpen && open && !openRef.current && onOpen();
-  }, t4 = [onOpen, open], $[1] = onOpen, $[2] = open, $[3] = t3, $[4] = t4) : (t3 = $[3], t4 = $[4]), useEffect(t3, t4);
-  let t5, t6;
-  $[5] !== onClose || $[6] !== open ? (t5 = () => {
+  }, [onOpen, open]), useEffect(() => {
     onClose && !open && openRef.current && onClose();
-  }, t6 = [onClose, open], $[5] = onClose, $[6] = open, $[7] = t5, $[8] = t6) : (t5 = $[7], t6 = $[8]), useEffect(t5, t6);
-  let t7, t8;
-  $[9] !== open ? (t7 = () => {
+  }, [onClose, open]), useEffect(() => {
     openRef.current = open;
-  }, t8 = [open], $[9] = open, $[10] = t7, $[11] = t8) : (t7 = $[10], t8 = $[11]), useEffect(t7, t8);
-  let t9;
-  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => {
-    setOpen(_temp$2), setShouldFocus(null);
-  }, $[12] = t9) : t9 = $[12];
-  const handleButtonClick = t9;
-  let t10;
-  $[13] !== open ? (t10 = (event) => {
+  }, [open]);
+  const handleButtonClick = useCallback(() => {
+    setOpen((v) => !v), setShouldFocus(null);
+  }, []), handleMouseDown = useCallback((event) => {
     open && event.preventDefault();
-  }, $[13] = open, $[14] = t10) : t10 = $[14];
-  const handleMouseDown = t10;
-  let t11;
-  $[15] === Symbol.for("react.memo_cache_sentinel") ? (t11 = (event_0) => {
+  }, [open]), handleButtonKeyDown = useCallback((event_0) => {
     if (event_0.key === "ArrowDown" || event_0.key === "Enter" || event_0.key === " ") {
       event_0.preventDefault(), setOpen(!0), setShouldFocus("first");
       return;
@@ -5891,10 +5867,7 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
       event_0.preventDefault(), setOpen(!0), setShouldFocus("last");
       return;
     }
-  }, $[15] = t11) : t11 = $[15];
-  const handleButtonKeyDown = t11;
-  let t12;
-  $[16] !== buttonElement || $[17] !== menuElements ? (t12 = (event_1) => {
+  }, []), handleMenuClickOutside = useCallback((event_1) => {
     const target = event_1.target;
     if (target instanceof Node && !(buttonElement && (target === buttonElement || buttonElement.contains(target)))) {
       for (const el of menuElements)
@@ -5902,15 +5875,9 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
           return;
       setOpen(!1);
     }
-  }, $[16] = buttonElement, $[17] = menuElements, $[18] = t12) : t12 = $[18];
-  const handleMenuClickOutside = t12;
-  let t13;
-  $[19] !== buttonElement || $[20] !== disableRestoreFocusOnClose ? (t13 = () => {
+  }, [buttonElement, menuElements]), handleMenuEscape = useCallback(() => {
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
-  }, $[19] = buttonElement, $[20] = disableRestoreFocusOnClose, $[21] = t13) : t13 = $[21];
-  const handleMenuEscape = t13;
-  let t14;
-  $[22] !== menuElements ? (t14 = (event_2) => {
+  }, [buttonElement, disableRestoreFocusOnClose]), handleBlur = useCallback((event_2) => {
     const target_0 = event_2.relatedTarget;
     if (target_0 instanceof Node) {
       for (const el_0 of menuElements)
@@ -5918,18 +5885,9 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
           return;
       setOpen(!1);
     }
-  }, $[22] = menuElements, $[23] = t14) : t14 = $[23];
-  const handleBlur = t14;
-  let t15;
-  $[24] !== buttonElement || $[25] !== disableRestoreFocusOnClose ? (t15 = () => {
+  }, [menuElements]), handleItemClick = useCallback(() => {
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
-  }, $[24] = buttonElement, $[25] = disableRestoreFocusOnClose, $[26] = t15) : t15 = $[26];
-  const handleItemClick = t15;
-  let t16;
-  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t16 = (el_1) => (setChildMenuElements((els) => els.concat([el_1])), () => setChildMenuElements((els_0) => els_0.filter((_el) => _el !== el_1))), $[27] = t16) : t16 = $[27];
-  const registerElement = t16;
-  let t17;
-  $[28] !== buttonElement || $[29] !== handleBlur || $[30] !== handleItemClick || $[31] !== handleMenuClickOutside || $[32] !== handleMenuEscape || $[33] !== id || $[34] !== menuProp || $[35] !== shouldFocus ? (t17 = menuProp && cloneElement(menuProp, {
+  }, [buttonElement, disableRestoreFocusOnClose]), registerElement = useCallback((el_1) => (setChildMenuElements((els) => els.concat([el_1])), () => setChildMenuElements((els_0) => els_0.filter((_el) => _el !== el_1))), []), menu = menuProp && cloneElement(menuProp, {
     "aria-labelledby": id,
     onBlurCapture: handleBlur,
     onClickOutside: handleMenuClickOutside,
@@ -5938,10 +5896,7 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
     originElement: buttonElement,
     registerElement,
     shouldFocus
-  }), $[28] = buttonElement, $[29] = handleBlur, $[30] = handleItemClick, $[31] = handleMenuClickOutside, $[32] = handleMenuEscape, $[33] = id, $[34] = menuProp, $[35] = shouldFocus, $[36] = t17) : t17 = $[36];
-  const menu = t17;
-  let t18, t19;
-  $[37] !== buttonProp || $[38] !== handleMouseDown || $[39] !== id || $[40] !== open ? (t19 = buttonProp && cloneElement(buttonProp, {
+  }), button = useMemo(() => buttonProp && cloneElement(buttonProp, {
     "data-ui": "MenuButton",
     id,
     onClick: handleButtonClick,
@@ -5951,14 +5906,9 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
     "aria-expanded": open,
     ref: setButtonElement,
     selected: buttonProp.props.selected ?? open
-  }), $[37] = buttonProp, $[38] = handleMouseDown, $[39] = id, $[40] = open, $[41] = t19) : t19 = $[41], t18 = t19;
-  const button = t18;
-  let t20, t21;
-  $[42] !== buttonElement ? (t20 = () => buttonElement, t21 = [buttonElement], $[42] = buttonElement, $[43] = t20, $[44] = t21) : (t20 = $[43], t21 = $[44]), useImperativeHandle(forwardedRef, t20, t21);
-  let t22, t23;
-  $[45] !== popover ? (t23 = popover || {}, $[45] = popover, $[46] = t23) : t23 = $[46];
-  let t24;
-  $[47] !== deprecated_boundaryElement || $[48] !== deprecated_placement || $[49] !== deprecated_popoverRadius || $[50] !== deprecated_popoverScheme || $[51] !== deprecated_portal || $[52] !== deprecated_preventOverflow || $[53] !== t23 ? (t24 = {
+  }), [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open]);
+  useImperativeHandle(forwardedRef, () => buttonElement, [buttonElement]);
+  const popoverProps = useMemo(() => ({
     boundaryElement: deprecated_boundaryElement,
     overflow: "auto",
     placement: deprecated_placement,
@@ -5966,18 +5916,11 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
     preventOverflow: deprecated_preventOverflow,
     radius: deprecated_popoverRadius,
     scheme: deprecated_popoverScheme,
-    ...t23
-  }, $[47] = deprecated_boundaryElement, $[48] = deprecated_placement, $[49] = deprecated_popoverRadius, $[50] = deprecated_popoverScheme, $[51] = deprecated_portal, $[52] = deprecated_preventOverflow, $[53] = t23, $[54] = t24) : t24 = $[54], t22 = t24;
-  const popoverProps = t22;
-  let t25;
-  $[55] !== button ? (t25 = button || /* @__PURE__ */ jsx(Fragment, {}), $[55] = button, $[56] = t25) : t25 = $[56];
-  let t26;
-  return $[57] !== menu || $[58] !== open || $[59] !== popoverProps || $[60] !== t25 ? (t26 = /* @__PURE__ */ jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: t25 }), $[57] = menu, $[58] = open, $[59] = popoverProps, $[60] = t25, $[61] = t26) : t26 = $[61], t26;
+    ...popover || {}
+  }), [deprecated_boundaryElement, deprecated_placement, deprecated_popoverRadius, deprecated_popoverScheme, deprecated_portal, deprecated_preventOverflow, popover]);
+  return /* @__PURE__ */ jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: button || /* @__PURE__ */ jsx(Fragment, {}) });
 });
 MenuButton.displayName = "ForwardRef(MenuButton)";
-function _temp$2(v) {
-  return !v;
-}
 const MenuDivider = styled.hr.withConfig({
   displayName: "MenuDivider",
   componentId: "sc-uhoxwu-0"