@sanity/ui 2.8.5 → 2.8.7

package/dist/index.esm.js

@@ -178,10 +178,10 @@ function useClickOutsideEvent(listener, elementsArg = () => EMPTY_ARRAY, boundar
     const target = evt.target;
     if (!(target instanceof Node))
       return;
-    const resolvedBoundaryElement = typeof boundaryElement == "function" ? boundaryElement() : boundaryElement;
+    const resolvedBoundaryElement = boundaryElement == null ? void 0 : boundaryElement();
     if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target))
       return;
-    const elements = (Array.isArray(elementsArg) ? elementsArg : elementsArg()).flat();
+    const elements = elementsArg().flat();
     for (const el of elements)
       if (el && (target === el || el.contains(target)))
         return;
@@ -585,6 +585,7 @@ function ThemeProvider(props) {
   } : null, [rootTheme, scheme, tone]), theme = useMemo(() => rootTheme ? getScopedTheme(rootTheme, scheme, tone) : null, [scheme, rootTheme, tone]);
   return theme ? /* @__PURE__ */ jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsx(ThemeProvider$1, { theme, children }) }) : /* @__PURE__ */ jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
 }
+ThemeProvider.displayName = "ThemeProvider";
 function useRootTheme() {
   const value = useContext(ThemeContext);
   if (!value)
@@ -595,6 +596,7 @@ function ThemeColorProvider(props) {
   const { children, scheme, tone } = props, root = useRootTheme();
   return /* @__PURE__ */ jsx(ThemeProvider, { scheme: scheme || root.scheme, theme: root.theme, tone, children });
 }
+ThemeColorProvider.displayName = "ThemeColorProvider";
 function useTheme() {
   return useTheme$1();
 }
@@ -1274,7 +1276,9 @@ const Root$C = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBa
       children
     }
   );
-}), avatarStyle = {
+});
+Label.displayName = "ForwardRef(Label)";
+const avatarStyle = {
   root: avatarRootStyle,
   arrow: avatarArrowStyle,
   bgStroke: avatarBgStrokeStyle,
@@ -1502,6 +1506,7 @@ const Root$B = styled.div(
     }
   );
 });
+Avatar.displayName = "ForwardRef(Avatar)";
 function _responsiveAvatarCounterSizeStyle(props) {
   const { avatar, media } = getTheme_v2(props.theme);
   return _responsive(media, props.$size, (size2) => {
@@ -1542,7 +1547,9 @@ const Root$A = styled.div(
     [size2]
   );
   return /* @__PURE__ */ jsx(Root$A, { $size: size2, "data-ui": "AvatarCounter", ref, children: /* @__PURE__ */ jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }) });
-}), BASE_STYLES = css`
+});
+AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
+const BASE_STYLES = css`
   white-space: nowrap;
 
   & > div {
@@ -1582,7 +1589,9 @@ const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), Ava
     len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: extraCount, size: size2 }) }),
     visibleChildren.map((child, childIndex) => /* @__PURE__ */ jsx("div", { children: cloneElement(child, { size: size2 }) }, String(childIndex)))
   ] });
-}), Root$y = styled.div(
+});
+AvatarStack.displayName = "ForwardRef(AvatarStack)";
+const Root$y = styled.div(
   boxStyle,
   flexItemStyle,
   responsiveBoxStyle,
@@ -1656,6 +1665,7 @@ const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), Ava
     }
   );
 });
+Box.displayName = "ForwardRef(Box)";
 function textBaseStyle(props) {
   const { $accent, $muted } = props, { font } = getTheme_v2(props.theme);
   return css`
@@ -1756,6 +1766,7 @@ const Root$x = styled.div(
     }
   );
 });
+Text.displayName = "ForwardRef(Text)";
 function badgeStyle(props) {
   const { $tone } = props;
   return {
@@ -1795,7 +1806,9 @@ const Root$w = styled(Box)(
       children: /* @__PURE__ */ jsx(Text, { size: fontSize2, children })
     }
   );
-}), Root$v = styled(Box)(
+});
+Badge.displayName = "ForwardRef(Badge)";
+const Root$v = styled(Box)(
   flexItemStyle,
   responsiveFlexStyle
 ), Flex = forwardRef(function(props, ref) {
@@ -1814,7 +1827,9 @@ const Root$w = styled(Box)(
       ref
     }
   );
-}), rotate$1 = keyframes`
+});
+Flex.displayName = "ForwardRef(Flex)";
+const rotate$1 = keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -1829,6 +1844,7 @@ const Root$w = styled(Box)(
 `, Spinner = forwardRef(function(props, ref) {
   return /* @__PURE__ */ jsx(Root$u, { "data-ui": "Spinner", ...props, ref, children: /* @__PURE__ */ jsx(SpinnerIcon, {}) });
 });
+Spinner.displayName = "ForwardRef(Spinner)";
 function _cardColorStyle(base, color, checkered = !1) {
   return {
     // from base
@@ -2082,6 +2098,7 @@ const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
     }
   );
 });
+Button.displayName = "ForwardRef(Button)";
 function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
@@ -2255,6 +2272,7 @@ const Root$s = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, respons
     }
   ) });
 });
+Card.displayName = "ForwardRef(Card)";
 function checkboxBaseStyles() {
   return css`
     position: relative;
@@ -2410,6 +2428,7 @@ const Root$r = styled.div(checkboxBaseStyles), Input$5 = styled.input(inputEleme
     ] })
   ] });
 });
+Checkbox.displayName = "ForwardRef(Checkbox)";
 function codeSyntaxHighlightingStyle({ theme }) {
   const {
     color: { syntax: color }
@@ -2488,7 +2507,9 @@ const Root$q = styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = forwar
     !(language && registered) && /* @__PURE__ */ jsx("code", { children }),
     language && registered && /* @__PURE__ */ jsx(Refractor, { inline: !0, language, value: String(children) })
   ] });
-}), BASE_STYLE$1 = {
+});
+Code.displayName = "ForwardRef(Code)";
+const BASE_STYLE$1 = {
   width: "100%",
   margin: "0 auto"
 };
@@ -2516,7 +2537,9 @@ const Root$p = styled(Box)(
       ref
     }
   );
-}), Root$o = styled(Box)(responsiveGridStyle), Grid = forwardRef(function(props, ref) {
+});
+Container.displayName = "ForwardRef(Container)";
+const Root$o = styled(Box)(responsiveGridStyle), Grid = forwardRef(function(props, ref) {
   const { as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps } = props;
   return /* @__PURE__ */ jsx(
     Root$o,
@@ -2538,6 +2561,7 @@ const Root$p = styled(Box)(
     }
   );
 });
+Grid.displayName = "ForwardRef(Grid)";
 function headingBaseStyle(props) {
   const { $accent, $muted } = props, { font } = getTheme_v2(props.theme);
   return css`
@@ -2625,6 +2649,7 @@ const Root$n = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsive
     }
   );
 });
+Heading.displayName = "ForwardRef(Heading)";
 function inlineBaseStyle() {
   return {
     lineHeight: 0,
@@ -2664,6 +2689,7 @@ const Root$m = styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = forwardR
     }
   );
 });
+Inline.displayName = "ForwardRef(Inline)";
 function kbdStyle() {
   return css`
     --card-bg-color: var(--card-kbd-bg-color);
@@ -2684,7 +2710,9 @@ function kbdStyle() {
 const Root$l = styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(function(props, ref) {
   const { children, fontSize: fontSize2 = 0, padding = 1, radius = 2, ...restProps } = props;
   return /* @__PURE__ */ jsx(Root$l, { "data-ui": "KBD", ...restProps, $radius: useArrayProp(radius), ref, children: /* @__PURE__ */ jsx(Box, { as: "span", padding, children: /* @__PURE__ */ jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }) }) });
-}), origin = {
+});
+KBD.displayName = "ForwardRef(KBD)";
+const origin = {
   name: "@sanity/ui/origin",
   fn({ middlewareData, placement, rects }) {
     var _a, _b;
@@ -2825,7 +2853,9 @@ const Root$k = styled.div(
     /* @__PURE__ */ jsx(StrokePath, { d: strokePath, mask: "url(#stroke-mask)", strokeWidth: strokeWidth * 2 }),
     /* @__PURE__ */ jsx(ShapePath, { d: fillPath })
   ] }) });
-}), BoundaryElementContext = createGlobalScopedContext(
+});
+Arrow.displayName = "ForwardRef(Arrow)";
+const BoundaryElementContext = createGlobalScopedContext(
   "@sanity/ui/context/boundaryElement",
   null
 );
@@ -2833,6 +2863,7 @@ function BoundaryElementProvider(props) {
   const { children, element } = props, value = useMemo(() => ({ version: 0, element }), [element]);
   return /* @__PURE__ */ jsx(BoundaryElementContext.Provider, { value, children });
 }
+BoundaryElementProvider.displayName = "BoundaryElementProvider";
 function isRecord(value) {
   return !!(value && typeof value == "object" && !Array.isArray(value));
 }
@@ -2853,6 +2884,7 @@ function ConditionalWrapper({
 }) {
   return condition ? wrapper(children) : children;
 }
+ConditionalWrapper.displayName = "ConditionalWrapper";
 function findMaxBreakpoints(media, width) {
   const ret = [];
   for (let i = 0; i < media.length; i += 1)
@@ -2886,6 +2918,7 @@ const ElementQuery = forwardRef(function(props, forwardedRef) {
     }
   );
 });
+ElementQuery.displayName = "ForwardRef(ElementQuery)";
 var __defProp = Object.defineProperty, __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key2] = value, __publicField = (obj, key2, value) => __defNormalProp(obj, key2 + "", value);
 class ErrorBoundary extends Component {
   constructor() {
@@ -3036,6 +3069,7 @@ function LayerProvider(props) {
   );
   return /* @__PURE__ */ jsx(LayerContext.Provider, { value, children });
 }
+LayerProvider.displayName = "LayerProvider";
 const Root$j = styled.div({ position: "relative" }), LayerChildren = forwardRef(function(props, forwardedRef) {
   const { children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = useRef(null), ref = useRef(null), isTopLayerRef = useRef(isTopLayer);
   useImperativeHandle(forwardedRef, () => ref.current), useEffect(() => {
@@ -3053,7 +3087,9 @@ const Root$j = styled.div({ position: "relative" }), LayerChildren = forwardRef(
 }), Layer = forwardRef(function(props, ref) {
   const { children, zOffset = 1, ...restProps } = props;
   return /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsx(LayerChildren, { ...restProps, ref, children }) });
-}), key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`);
+});
+Layer.displayName = "ForwardRef(Layer)";
+const key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`);
 globalScope[elementKey] = null;
 const defaultContextValue = {
   version: 0,
@@ -3075,6 +3111,7 @@ function Portal(props) {
   const { children, __unstable_name: name } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || ((_a = portal.elements) == null ? void 0 : _a.default);
   return portalElement ? createPortal(children, portalElement) : null;
 }
+Portal.displayName = "Portal";
 function PortalProvider(props) {
   const { boundaryElement, children, element, __unstable_elements: elementsProp } = props, elements = useUnique(elementsProp), fallbackElement = useSyncExternalStore(
     emptySubscribe,
@@ -3088,6 +3125,7 @@ function PortalProvider(props) {
   }), [boundaryElement, element, elements, fallbackElement]);
   return /* @__PURE__ */ jsx(PortalContext.Provider, { value, children });
 }
+PortalProvider.displayName = "PortalProvider";
 const emptySubscribe = () => () => {
 };
 function useUnique(value) {
@@ -3110,7 +3148,9 @@ const Root$i = styled.div`
 `, SrOnly = forwardRef(function(props, ref) {
   const { as, children } = props;
   return /* @__PURE__ */ jsx(Root$i, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children });
-}), Root$h = styled.div`
+});
+SrOnly.displayName = "ForwardRef(SrOnly)";
+const Root$h = styled.div`
   position: relative;
 `, ItemWrapper = styled.div`
   position: absolute;
@@ -3159,7 +3199,9 @@ const Root$i = styled.div`
     return /* @__PURE__ */ jsx(ItemWrapper, { style: { top: itemIndex * (itemHeight + space[gap]) }, children: node }, key2);
   }), [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex]), wrapperStyle = useMemo(() => ({ height }), [height]);
   return /* @__PURE__ */ jsx(Root$h, { as, "data-ui": "VirtualList", ...restProps, ref, children: /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: wrapperStyle, children }) });
-}), 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 = {
+});
+VirtualList.displayName = "ForwardRef(VirtualList)";
+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"],
   "top-end": ["bottom-end", "left-end", "right-end"],
@@ -3302,7 +3344,7 @@ const MotionCard$1 = styled(motion(Card))`
     );
   })
 );
-PopoverCard.displayName = "PopoverCard";
+PopoverCard.displayName = "Memo(ForwardRef(PopoverCard))";
 const Popover = memo(
   forwardRef(function(props, forwardedRef) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
@@ -3486,7 +3528,7 @@ const Popover = memo(
     ] });
   })
 );
-Popover.displayName = "Popover";
+Popover.displayName = "Memo(ForwardRef(Popover))";
 function radioBaseStyle() {
   return css`
     position: relative;
@@ -3616,6 +3658,7 @@ const Root$g = styled.div(radioBaseStyle), Input$4 = styled.input(inputElementSt
     /* @__PURE__ */ jsx("span", {})
   ] });
 });
+Radio.displayName = "ForwardRef(Radio)";
 function rootStyle() {
   return css`
     position: relative;
@@ -3783,7 +3826,9 @@ const selectStyle = {
     ),
     /* @__PURE__ */ jsx(IconBox, { padding, children: /* @__PURE__ */ jsx(Text, { size: fontSize2, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) }) })
   ] });
-}), BASE_STYLE = {
+});
+Select.displayName = "ForwardRef(Select)";
+const BASE_STYLE = {
   "&&:not([hidden])": {
     display: "grid"
   },
@@ -3816,6 +3861,7 @@ const Root$e = styled(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = f
     }
   );
 });
+Stack.displayName = "ForwardRef(Stack)";
 function switchBaseStyles() {
   return css`
     position: relative;
@@ -3982,7 +4028,9 @@ const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInput
       /* @__PURE__ */ jsx(Thumb, { $checked: checked, $indeterminate: indeterminate })
     ] })
   ] });
-}), Root$c = styled.span(textInputRootStyle), InputRoot$1 = styled.span`
+});
+Switch.displayName = "ForwardRef(Switch)";
+const Root$c = styled.span(textInputRootStyle), InputRoot$1 = styled.span`
   flex: 1;
   min-width: 0;
   display: block;
@@ -4040,7 +4088,9 @@ const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInput
       }
     )
   ] }) });
-}), CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styled(Card).attrs({ forwardedAs: "span" })(textInputRootStyle), InputRoot = styled.span`
+});
+TextArea.displayName = "ForwardRef(TextArea)";
+const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styled(Card).attrs({ forwardedAs: "span" })(textInputRootStyle), InputRoot = styled.span`
   flex: 1;
   min-width: 0;
   display: block;
@@ -4240,6 +4290,7 @@ const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInput
     suffixNode
   ] });
 });
+TextInput.displayName = "ForwardRef(TextInput)";
 function useDelayedState(initialState) {
   const [state, setState] = useState(initialState), delayedAction = useRef(), onStateChange = useCallback((nextState, delay) => {
     const action = () => {
@@ -4333,7 +4384,7 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
     );
   })
 );
-TooltipCard.displayName = "TooltipCard";
+TooltipCard.displayName = "Memo(ForwardRef(TooltipCard))";
 const TooltipDelayGroupContext = createGlobalScopedContext(
   "@sanity/ui/context/tooltipDelayGroup",
   null
@@ -4356,6 +4407,7 @@ function TooltipDelayGroupProvider(props) {
   );
   return /* @__PURE__ */ jsx(TooltipDelayGroupContext.Provider, { value, children });
 }
+TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
 const Root$a = styled(Layer)`
   pointer-events: none;
 `, Tooltip = forwardRef(function(props, forwardedRef) {
@@ -4555,6 +4607,7 @@ const Root$a = styled(Layer)`
     child
   ] });
 });
+Tooltip.displayName = "ForwardRef(Tooltip)";
 function useCloseOnMouseLeave({
   handleIsOpenChange,
   referenceElement,
@@ -4970,7 +5023,9 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
       ]
     }
   );
-}), Autocomplete = InnerAutocomplete, Root$8 = styled.ol`
+});
+InnerAutocomplete.displayName = "ForwardRef(Autocomplete)";
+const Autocomplete = InnerAutocomplete, Root$8 = styled.ol`
   margin: 0;
   padding: 0;
   display: flex;
@@ -5024,6 +5079,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     /* @__PURE__ */ jsx(Box, { as: "li", children: item })
   ] }, itemIndex)) });
 });
+Breadcrumbs.displayName = "ForwardRef(Breadcrumbs)";
 function dialogStyle({ theme }) {
   const { color } = getTheme_v2(theme);
   return {
@@ -5171,7 +5227,9 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
     /* @__PURE__ */ jsx(DialogContent, { flex: 1, ref: contentRef, tabIndex: -1, children }),
     footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer })
   ] }) }) });
-}), Dialog = forwardRef(function(props, ref) {
+});
+DialogCard.displayName = "ForwardRef(DialogCard)";
+const Dialog = forwardRef(function(props, ref) {
   var _a;
   const dialog = useDialog(), { layer } = useTheme_v2(), {
     __unstable_autoFocus: autoFocus = !0,
@@ -5268,6 +5326,7 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
     }
   ) });
 });
+Dialog.displayName = "ForwardRef(Dialog)";
 function DialogProvider(props) {
   const { children, position, zOffset } = props, contextValue = useMemo(
     () => ({
@@ -5279,6 +5338,7 @@ function DialogProvider(props) {
   );
   return /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children });
 }
+DialogProvider.displayName = "DialogProvider";
 const Root$6 = styled.kbd`
   font: inherit;
   padding: 1px;
@@ -5293,7 +5353,9 @@ const Root$6 = styled.kbd`
 `, Hotkeys = forwardRef(function(props, ref) {
   const { fontSize: fontSize2, keys, padding, radius, space: spaceProp = 0.5, ...restProps } = props, space = useArrayProp(spaceProp);
   return !keys || keys.length === 0 ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx(Root$6, { "data-ui": "Hotkeys", ...restProps, ref, children: /* @__PURE__ */ jsx(Inline, { as: "span", space, children: keys.map((key2, i) => /* @__PURE__ */ jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i)) }) });
-}), MenuContext = createGlobalScopedContext(
+});
+Hotkeys.displayName = "ForwardRef(Hotkeys)";
+const MenuContext = createGlobalScopedContext(
   "@sanity/ui/context/menu",
   null
 );
@@ -5334,13 +5396,13 @@ function _sortElements(rootElement, elements) {
   elements.sort(_sort);
 }
 function useMenuController(props) {
-  const { onKeyDown, originElement, shouldFocus } = props, elementsRef = useRef([]), [rootElement, setRootElement] = useState(null), [activeIndex, _setActiveIndex] = useState(-1), activeIndexRef = useRef(activeIndex), activeElement = elementsRef.current[activeIndex] || null, mounted = !!rootElement, setActiveIndex = useCallback((nextActiveIndex) => {
+  const { onKeyDown, originElement, shouldFocus, rootElementRef } = props, elementsRef = useRef([]), [activeIndex, _setActiveIndex] = useState(-1), activeIndexRef = useRef(activeIndex), activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex]), mounted = !!rootElementRef.current, setActiveIndex = useCallback((nextActiveIndex) => {
     _setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex;
   }, []), mount = useCallback(
     (element, selected) => {
       if (!element) return () => {
       };
-      if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElement, elementsRef.current)), selected) {
+      if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElementRef.current, elementsRef.current)), selected) {
         const selectedIndex = elementsRef.current.indexOf(element);
         setActiveIndex(selectedIndex);
       }
@@ -5349,7 +5411,7 @@ function useMenuController(props) {
         idx > -1 && elementsRef.current.splice(idx, 1);
       };
     },
-    [rootElement, setActiveIndex]
+    [rootElementRef, setActiveIndex]
   ), handleKeyDown = useCallback(
     (event) => {
       if (event.key === "Tab") {
@@ -5404,44 +5466,40 @@ function useMenuController(props) {
     },
     [setActiveIndex]
   ), handleItemMouseLeave = useCallback(() => {
-    setActiveIndex(-2), rootElement == null || rootElement.focus();
-  }, [setActiveIndex, rootElement]);
+    var _a;
+    setActiveIndex(-2), (_a = rootElementRef.current) == null || _a.focus();
+  }, [rootElementRef, setActiveIndex]);
   return useEffect(() => {
     if (!mounted) return;
-    const rafId = window.requestAnimationFrame(() => {
-      const _activeIndex = activeIndexRef.current;
-      if (_activeIndex === -1) {
+    const rafId = requestAnimationFrame(() => {
+      if (activeIndex === -1) {
         if (shouldFocus === "first") {
           const el = _getFocusableElements(elementsRef.current)[0];
           if (el) {
             const currentIndex = elementsRef.current.indexOf(el);
-            setActiveIndex(currentIndex), activeIndexRef.current = currentIndex;
+            setActiveIndex(currentIndex);
           }
         }
         if (shouldFocus === "last") {
           const focusableElements = _getFocusableElements(elementsRef.current), el = focusableElements[focusableElements.length - 1];
           if (el) {
             const currentIndex = elementsRef.current.indexOf(el);
-            setActiveIndex(currentIndex), activeIndexRef.current = currentIndex;
+            setActiveIndex(currentIndex);
           }
         }
         return;
       }
-      const element = elementsRef.current[_activeIndex] || null;
+      const element = elementsRef.current[activeIndex] || null;
       element == null || element.focus();
     });
-    return () => {
-      window.cancelAnimationFrame(rafId);
-    };
+    return () => cancelAnimationFrame(rafId);
   }, [activeIndex, mounted, setActiveIndex, shouldFocus]), {
     activeElement,
     activeIndex,
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
-    mount,
-    rootElement,
-    setRootElement
+    mount
   };
 }
 const Root$5 = styled(Box)`
@@ -5473,34 +5531,23 @@ const Root$5 = styled(Box)`
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
-    mount,
-    rootElement,
-    setRootElement
-  } = useMenuController({ onKeyDown, originElement, shouldFocus }), handleRefChange = useCallback(
+    mount
+  } = useMenuController({ onKeyDown, originElement, shouldFocus, rootElementRef: ref }), unregisterElementRef = useRef(null), handleRefChange = useCallback(
     (el) => {
-      setRootElement(el), ref.current = el;
+      unregisterElementRef.current && (unregisterElementRef.current(), unregisterElementRef.current = null), ref.current = el, ref.current && registerElement && (unregisterElementRef.current = registerElement(ref.current));
     },
-    [setRootElement]
+    [registerElement]
   );
   useEffect(() => {
     onItemSelect && onItemSelect(activeIndex);
-  }, [activeIndex, onItemSelect]), useClickOutside(
-    useCallback(
-      (event) => isTopLayer && onClickOutside && onClickOutside(event),
-      [isTopLayer, onClickOutside]
-    ),
-    [rootElement]
-  ), useGlobalKeyDown(
+  }, [activeIndex, onItemSelect]), useClickOutsideEvent(isTopLayer && onClickOutside, () => [ref.current]), useGlobalKeyDown(
     useCallback(
       (event) => {
         isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
       },
       [isTopLayer, onEscape]
     )
-  ), useEffect(() => {
-    if (!(!rootElement || !registerElement))
-      return registerElement(rootElement);
-  }, [registerElement, rootElement]);
+  );
   const value = useMemo(
     () => ({
       version: 0,
@@ -5542,7 +5589,9 @@ const Root$5 = styled(Box)`
       children: /* @__PURE__ */ jsx(Stack, { space, children })
     }
   ) });
-}), MenuButton = forwardRef(function(props, forwardedRef) {
+});
+Menu.displayName = "ForwardRef(Menu)";
+const MenuButton = forwardRef(function(props, forwardedRef) {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = !1,
     boundaryElement: deprecated_boundaryElement,
@@ -5607,9 +5656,7 @@ const Root$5 = styled(Box)`
     [menuElements]
   ), handleItemClick = useCallback(() => {
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
-  }, [buttonElement, disableRestoreFocusOnClose]), registerElement = useCallback((el) => (setChildMenuElements((els) => els.concat([el])), () => {
-    setChildMenuElements((els) => els.filter((_el) => _el !== el));
-  }), []), menuProps = useMemo(
+  }, [buttonElement, disableRestoreFocusOnClose]), registerElement = useCallback((el) => (setChildMenuElements((els) => els.concat([el])), () => setChildMenuElements((els) => els.filter((_el) => _el !== el))), []), menuProps = useMemo(
     () => ({
       "aria-labelledby": id,
       onBlurCapture: handleBlur,
@@ -5676,12 +5723,15 @@ const Root$5 = styled(Box)`
     ]
   );
   return /* @__PURE__ */ jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: button || /* @__PURE__ */ jsx(Fragment, {}) });
-}), MenuDivider = styled.hr`
+});
+MenuButton.displayName = "ForwardRef(MenuButton)";
+const MenuDivider = styled.hr`
   height: 1px;
   border: 0;
   background: var(--card-hairline-soft-color);
   margin: 0;
 `;
+MenuDivider.displayName = "MenuDivider";
 function selectableBaseStyle() {
   return css`
     background-color: inherit;
@@ -5783,6 +5833,7 @@ const Selectable = styled(Box)(
   selectableBaseStyle,
   selectableColorStyle
 );
+Selectable.displayName = "Selectable";
 function useMenu() {
   const value = useContext(MenuContext);
   if (!value)
@@ -5813,7 +5864,7 @@ function MenuGroup(props) {
     onItemClick,
     onItemMouseEnter = menu.onMouseEnter,
     registerElement
-  } = menu, [rootElement, setRootElement] = useState(null), [open, setOpen] = useState(!1), shouldFocusRef = useRef(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = useState(!1), handleMouseEnter = useCallback(
+  } = menu, [rootElement, setRootElement] = useState(null), [open, setOpen] = useState(!1), [shouldFocus, setShouldFocus] = useState(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = useState(!1), handleMouseEnter = useCallback(
     (event) => {
       setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
     },
@@ -5827,19 +5878,21 @@ function MenuGroup(props) {
     [rootElement]
   ), handleClick = useCallback(
     (event) => {
-      onClick && onClick(event), shouldFocusRef.current = "first", setOpen(!0), requestAnimationFrame(() => {
-        shouldFocusRef.current = null;
-      });
+      onClick == null || onClick(event), setShouldFocus("first"), setOpen(!0);
     },
     [onClick]
   ), handleChildItemClick = useCallback(() => {
-    setOpen(!1), onItemClick && onItemClick();
+    setOpen(!1), onItemClick == null || onItemClick();
   }, [onItemClick]), handleMenuMouseEnter = useCallback(() => setWithinMenu(!0), []);
   useEffect(() => mount(rootElement), [mount, rootElement]), useEffect(() => {
     active || setOpen(!1);
   }, [active]), useEffect(() => {
     open || setWithinMenu(!1);
-  }, [open]);
+  }, [open]), useEffect(() => {
+    if (!shouldFocus) return;
+    const rafId = requestAnimationFrame(() => setShouldFocus(null));
+    return () => cancelAnimationFrame(rafId);
+  }, [shouldFocus]);
   const childMenu = /* @__PURE__ */ jsx(
     Menu,
     {
@@ -5849,15 +5902,13 @@ function MenuGroup(props) {
       onKeyDown: handleMenuKeyDown,
       onMouseEnter: handleMenuMouseEnter,
       registerElement,
-      shouldFocus: shouldFocusRef.current,
+      shouldFocus,
       children
     }
   ), handleKeyDown = useCallback((event) => {
     const target = event.currentTarget;
     if (document.activeElement === target && event.key === "ArrowRight") {
-      shouldFocusRef.current = "first", setOpen(!0), setWithinMenu(!0), requestAnimationFrame(() => {
-        shouldFocusRef.current = null;
-      });
+      setShouldFocus("first"), setOpen(!0), setWithinMenu(!0);
       return;
     }
   }, []);
@@ -5891,6 +5942,7 @@ function MenuGroup(props) {
     }
   ) });
 }
+MenuGroup.displayName = "MenuGroup";
 const MenuItem = forwardRef(function(props, forwardedRef) {
   const {
     as = "button",
@@ -5988,7 +6040,9 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
       ]
     }
   );
-}), keyframe = keyframes`
+});
+MenuItem.displayName = "ForwardRef(MenuItem)";
+const keyframe = keyframes`
   0% {
     background-position: 100%;
   }
@@ -6048,7 +6102,9 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
       ref
     }
   );
-}), Root$3 = styled(Skeleton)((props) => {
+});
+Skeleton.displayName = "ForwardRef(Skeleton)";
+const Root$3 = styled(Skeleton)((props) => {
   const { $size, $style } = props, { font, media } = getTheme_v2(props.theme), fontStyle = font[$style];
   return _responsive(media, $size, (sizeIndex) => {
     const fontSize2 = fontStyle.sizes[sizeIndex];
@@ -6057,16 +6113,24 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
 }), TextSkeleton = forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
   return /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "text" });
-}), LabelSkeleton = forwardRef(function(props, ref) {
+});
+TextSkeleton.displayName = "ForwardRef(TextSkeleton)";
+const LabelSkeleton = forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
   return /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "label" });
-}), HeadingSkeleton = forwardRef(function(props, ref) {
+});
+LabelSkeleton.displayName = "ForwardRef(LabelSkeleton)";
+const HeadingSkeleton = forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
   return /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "heading" });
-}), CodeSkeleton = forwardRef(function(props, ref) {
+});
+HeadingSkeleton.displayName = "ForwardRef(HeadingSkeleton)";
+const CodeSkeleton = forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
   return /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "code" });
-}), CustomButton = styled(Button)`
+});
+CodeSkeleton.displayName = "ForwardRef(CodeSkeleton)";
+const CustomButton = styled(Button)`
   max-width: 100%;
 `, Tab = forwardRef(function(props, forwardedRef) {
   const {
@@ -6118,6 +6182,7 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
     }
   );
 });
+Tab.displayName = "ForwardRef(Tab)";
 function _isReactElement(node) {
   return !!node;
 }
@@ -6154,7 +6219,9 @@ const CustomInline = styled(Inline)`
       children: tabs
     }
   );
-}), TabPanel = forwardRef(function(props, ref) {
+});
+TabList.displayName = "ForwardRef(TabList)";
+const TabPanel = forwardRef(function(props, ref) {
   const { flex, ...restProps } = props;
   return /* @__PURE__ */ jsx(
     Box,
@@ -6168,7 +6235,9 @@ const CustomInline = styled(Inline)`
       children: props.children
     }
   );
-}), TextBox = styled(Flex)`
+});
+TabPanel.displayName = "ForwardRef(TabPanel)";
+const TextBox = styled(Flex)`
   overflow-x: auto;
 `, loadingAnimation = keyframes`
   0% {
@@ -6176,7 +6245,7 @@ const CustomInline = styled(Inline)`
   }
   100% {
     width: 100%;
-  } 
+  }
 `, LOADING_BAR_HEIGHT = 2;
 function rootStyles(props) {
   const { color } = getTheme_v2$1(props.theme), loadingBarColor = color.button.default[props.tone].enabled.bg;
@@ -6262,6 +6331,7 @@ function Toast(props) {
     }
   );
 }
+Toast.displayName = "Toast";
 function useMounted() {
   return useSyncExternalStore(
     subscribe,
@@ -6368,6 +6438,7 @@ function ToastProvider(props) {
     )) }) }) }) })
   ] });
 }
+ToastProvider.displayName = "ToastProvider";
 function useToast() {
   const value = useContext(ToastContext);
   if (!value)
@@ -6556,7 +6627,7 @@ const TreeContext = createGlobalScopedContext(
     ) });
   })
 );
-Tree.displayName = "Tree";
+Tree.displayName = "Memo(ForwardRef(Tree))";
 function treeItemRootStyle() {
   return css`
     &[role='none'] > [role='treeitem'] {
@@ -6775,6 +6846,7 @@ const TreeGroup = memo(function(props) {
     }
   );
 });
+TreeItem.displayName = "Memo(TreeItem)";
 export {
   Arrow,
   Autocomplete,