@sanity/ui 2.8.5 → 2.8.7

package/dist/index.js

@@ -173,10 +173,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;
@@ -580,6 +580,7 @@ function ThemeProvider(props) {
   } : null, [rootTheme, scheme, tone]), theme$1 = react.useMemo(() => rootTheme ? theme.getScopedTheme(rootTheme, scheme, tone) : null, [scheme, rootTheme, tone]);
   return theme$1 ? /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme: theme$1, children }) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
 }
+ThemeProvider.displayName = "ThemeProvider";
 function useRootTheme() {
   const value = react.useContext(ThemeContext);
   if (!value)
@@ -590,6 +591,7 @@ function ThemeColorProvider(props) {
   const { children, scheme, tone } = props, root = useRootTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { scheme: scheme || root.scheme, theme: root.theme, tone, children });
 }
+ThemeColorProvider.displayName = "ThemeColorProvider";
 function useTheme() {
   return styledComponents.useTheme();
 }
@@ -1269,7 +1271,9 @@ const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAl
       children
     }
   );
-}), avatarStyle = {
+});
+Label.displayName = "ForwardRef(Label)";
+const avatarStyle = {
   root: avatarRootStyle,
   arrow: avatarArrowStyle,
   bgStroke: avatarBgStrokeStyle,
@@ -1497,6 +1501,7 @@ const Root$B = styledComponents.styled.div(
     }
   );
 });
+Avatar.displayName = "ForwardRef(Avatar)";
 function _responsiveAvatarCounterSizeStyle(props) {
   const { avatar, media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$size, (size2) => {
@@ -1537,7 +1542,9 @@ const Root$A = styledComponents.styled.div(
     [size2]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(Root$A, { $size: size2, "data-ui": "AvatarCounter", ref, children: /* @__PURE__ */ jsxRuntime.jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }) });
-}), BASE_STYLES = styledComponents.css`
+});
+AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
+const BASE_STYLES = styledComponents.css`
   white-space: nowrap;
 
   & > div {
@@ -1577,7 +1584,9 @@ const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avata
     len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) }),
     visibleChildren.map((child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.cloneElement(child, { size: size2 }) }, String(childIndex)))
   ] });
-}), Root$y = styledComponents.styled.div(
+});
+AvatarStack.displayName = "ForwardRef(AvatarStack)";
+const Root$y = styledComponents.styled.div(
   boxStyle,
   flexItemStyle,
   responsiveBoxStyle,
@@ -1651,6 +1660,7 @@ const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avata
     }
   );
 });
+Box.displayName = "ForwardRef(Box)";
 function textBaseStyle(props) {
   const { $accent, $muted } = props, { font } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
@@ -1751,6 +1761,7 @@ const Root$x = styledComponents.styled.div(
     }
   );
 });
+Text.displayName = "ForwardRef(Text)";
 function badgeStyle(props) {
   const { $tone } = props;
   return {
@@ -1790,7 +1801,9 @@ const Root$w = styledComponents.styled(Box)(
       children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children })
     }
   );
-}), Root$v = styledComponents.styled(Box)(
+});
+Badge.displayName = "ForwardRef(Badge)";
+const Root$v = styledComponents.styled(Box)(
   flexItemStyle,
   responsiveFlexStyle
 ), Flex = react.forwardRef(function(props, ref) {
@@ -1809,7 +1822,9 @@ const Root$w = styledComponents.styled(Box)(
       ref
     }
   );
-}), rotate$1 = styledComponents.keyframes`
+});
+Flex.displayName = "ForwardRef(Flex)";
+const rotate$1 = styledComponents.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -1824,6 +1839,7 @@ const Root$w = styledComponents.styled(Box)(
 `, Spinner = react.forwardRef(function(props, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(Root$u, { "data-ui": "Spinner", ...props, ref, children: /* @__PURE__ */ jsxRuntime.jsx(icons.SpinnerIcon, {}) });
 });
+Spinner.displayName = "ForwardRef(Spinner)";
 function _cardColorStyle(base, color, checkered = !1) {
   return {
     // from base
@@ -2077,6 +2093,7 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
     }
   );
 });
+Button.displayName = "ForwardRef(Button)";
 function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
@@ -2250,6 +2267,7 @@ const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRad
     }
   ) });
 });
+Card.displayName = "ForwardRef(Card)";
 function checkboxBaseStyles() {
   return styledComponents.css`
     position: relative;
@@ -2405,6 +2423,7 @@ const Root$r = styledComponents.styled.div(checkboxBaseStyles), Input$5 = styled
     ] })
   ] });
 });
+Checkbox.displayName = "ForwardRef(Checkbox)";
 function codeSyntaxHighlightingStyle({ theme: theme$1 }) {
   const {
     color: { syntax: color }
@@ -2483,7 +2502,9 @@ const Root$q = styledComponents.styled.pre(codeBaseStyle, responsiveCodeFontStyl
     !(language && registered) && /* @__PURE__ */ jsxRuntime.jsx("code", { children }),
     language && registered && /* @__PURE__ */ jsxRuntime.jsx(Refractor__default.default, { inline: !0, language, value: String(children) })
   ] });
-}), BASE_STYLE$1 = {
+});
+Code.displayName = "ForwardRef(Code)";
+const BASE_STYLE$1 = {
   width: "100%",
   margin: "0 auto"
 };
@@ -2511,7 +2532,9 @@ const Root$p = styledComponents.styled(Box)(
       ref
     }
   );
-}), Root$o = styledComponents.styled(Box)(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
+});
+Container.displayName = "ForwardRef(Container)";
+const Root$o = styledComponents.styled(Box)(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
   const { as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Root$o,
@@ -2533,6 +2556,7 @@ const Root$p = styledComponents.styled(Box)(
     }
   );
 });
+Grid.displayName = "ForwardRef(Grid)";
 function headingBaseStyle(props) {
   const { $accent, $muted } = props, { font } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
@@ -2620,6 +2644,7 @@ const Root$n = styledComponents.styled.div(headingBaseStyle, responsiveTextAlign
     }
   );
 });
+Heading.displayName = "ForwardRef(Heading)";
 function inlineBaseStyle() {
   return {
     lineHeight: 0,
@@ -2659,6 +2684,7 @@ const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle),
     }
   );
 });
+Inline.displayName = "ForwardRef(Inline)";
 function kbdStyle() {
   return styledComponents.css`
     --card-bg-color: var(--card-kbd-bg-color);
@@ -2679,7 +2705,9 @@ function kbdStyle() {
 const Root$l = styledComponents.styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
   const { children, fontSize: fontSize2 = 0, padding = 1, radius = 2, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(Root$l, { "data-ui": "KBD", ...restProps, $radius: useArrayProp(radius), ref, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, children: /* @__PURE__ */ jsxRuntime.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;
@@ -2820,7 +2848,9 @@ const Root$k = styledComponents.styled.div(
     /* @__PURE__ */ jsxRuntime.jsx(StrokePath, { d: strokePath, mask: "url(#stroke-mask)", strokeWidth: strokeWidth * 2 }),
     /* @__PURE__ */ jsxRuntime.jsx(ShapePath, { d: fillPath })
   ] }) });
-}), BoundaryElementContext = createGlobalScopedContext(
+});
+Arrow.displayName = "ForwardRef(Arrow)";
+const BoundaryElementContext = createGlobalScopedContext(
   "@sanity/ui/context/boundaryElement",
   null
 );
@@ -2828,6 +2858,7 @@ function BoundaryElementProvider(props) {
   const { children, element } = props, value = react.useMemo(() => ({ version: 0, element }), [element]);
   return /* @__PURE__ */ jsxRuntime.jsx(BoundaryElementContext.Provider, { value, children });
 }
+BoundaryElementProvider.displayName = "BoundaryElementProvider";
 function isRecord(value) {
   return !!(value && typeof value == "object" && !Array.isArray(value));
 }
@@ -2848,6 +2879,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)
@@ -2881,6 +2913,7 @@ const ElementQuery = react.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 react.Component {
   constructor() {
@@ -3031,6 +3064,7 @@ function LayerProvider(props) {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children });
 }
+LayerProvider.displayName = "LayerProvider";
 const Root$j = styledComponents.styled.div({ position: "relative" }), LayerChildren = react.forwardRef(function(props, forwardedRef) {
   const { children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = react.useRef(null), ref = react.useRef(null), isTopLayerRef = react.useRef(isTopLayer);
   react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
@@ -3048,7 +3082,9 @@ const Root$j = styledComponents.styled.div({ position: "relative" }), LayerChild
 }), Layer = react.forwardRef(function(props, ref) {
   const { children, zOffset = 1, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsxRuntime.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,
@@ -3070,6 +3106,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 ? reactDom.createPortal(children, portalElement) : null;
 }
+Portal.displayName = "Portal";
 function PortalProvider(props) {
   const { boundaryElement, children, element, __unstable_elements: elementsProp } = props, elements = useUnique(elementsProp), fallbackElement = react.useSyncExternalStore(
     emptySubscribe,
@@ -3083,6 +3120,7 @@ function PortalProvider(props) {
   }), [boundaryElement, element, elements, fallbackElement]);
   return /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value, children });
 }
+PortalProvider.displayName = "PortalProvider";
 const emptySubscribe = () => () => {
 };
 function useUnique(value) {
@@ -3105,7 +3143,9 @@ const Root$i = styledComponents.styled.div`
 `, SrOnly = react.forwardRef(function(props, ref) {
   const { as, children } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(Root$i, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children });
-}), Root$h = styledComponents.styled.div`
+});
+SrOnly.displayName = "ForwardRef(SrOnly)";
+const Root$h = styledComponents.styled.div`
   position: relative;
 `, ItemWrapper = styledComponents.styled.div`
   position: absolute;
@@ -3154,7 +3194,9 @@ const Root$i = styledComponents.styled.div`
     return /* @__PURE__ */ jsxRuntime.jsx(ItemWrapper, { style: { top: itemIndex * (itemHeight + space[gap]) }, children: node }, key2);
   }), [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex]), wrapperStyle = react.useMemo(() => ({ height }), [height]);
   return /* @__PURE__ */ jsxRuntime.jsx(Root$h, { as, "data-ui": "VirtualList", ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.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"],
@@ -3297,7 +3339,7 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
     );
   })
 );
-PopoverCard.displayName = "PopoverCard";
+PopoverCard.displayName = "Memo(ForwardRef(PopoverCard))";
 const Popover = react.memo(
   react.forwardRef(function(props, forwardedRef) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
@@ -3481,7 +3523,7 @@ const Popover = react.memo(
     ] });
   })
 );
-Popover.displayName = "Popover";
+Popover.displayName = "Memo(ForwardRef(Popover))";
 function radioBaseStyle() {
   return styledComponents.css`
     position: relative;
@@ -3611,6 +3653,7 @@ const Root$g = styledComponents.styled.div(radioBaseStyle), Input$4 = styledComp
     /* @__PURE__ */ jsxRuntime.jsx("span", {})
   ] });
 });
+Radio.displayName = "ForwardRef(Radio)";
 function rootStyle() {
   return styledComponents.css`
     position: relative;
@@ -3778,7 +3821,9 @@ const selectStyle = {
     ),
     /* @__PURE__ */ jsxRuntime.jsx(IconBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}) }) })
   ] });
-}), BASE_STYLE = {
+});
+Select.displayName = "ForwardRef(Select)";
+const BASE_STYLE = {
   "&&:not([hidden])": {
     display: "grid"
   },
@@ -3811,6 +3856,7 @@ const Root$e = styledComponents.styled(Box)(stackBaseStyle, responsiveStackSpace
     }
   );
 });
+Stack.displayName = "ForwardRef(Stack)";
 function switchBaseStyles() {
   return styledComponents.css`
     position: relative;
@@ -3977,7 +4023,9 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
       /* @__PURE__ */ jsxRuntime.jsx(Thumb, { $checked: checked, $indeterminate: indeterminate })
     ] })
   ] });
-}), Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = styledComponents.styled.span`
+});
+Switch.displayName = "ForwardRef(Switch)";
+const Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = styledComponents.styled.span`
   flex: 1;
   min-width: 0;
   display: block;
@@ -4035,7 +4083,9 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
       }
     )
   ] }) });
-}), CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styledComponents.styled(Card).attrs({ forwardedAs: "span" })(textInputRootStyle), InputRoot = styledComponents.styled.span`
+});
+TextArea.displayName = "ForwardRef(TextArea)";
+const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styledComponents.styled(Card).attrs({ forwardedAs: "span" })(textInputRootStyle), InputRoot = styledComponents.styled.span`
   flex: 1;
   min-width: 0;
   display: block;
@@ -4235,6 +4285,7 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
     suffixNode
   ] });
 });
+TextInput.displayName = "ForwardRef(TextInput)";
 function useDelayedState(initialState) {
   const [state, setState] = react.useState(initialState), delayedAction = react.useRef(), onStateChange = react.useCallback((nextState, delay) => {
     const action = () => {
@@ -4328,7 +4379,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
@@ -4351,6 +4402,7 @@ function TooltipDelayGroupProvider(props) {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupContext.Provider, { value, children });
 }
+TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
 const Root$a = styledComponents.styled(Layer)`
   pointer-events: none;
 `, Tooltip = react.forwardRef(function(props, forwardedRef) {
@@ -4550,6 +4602,7 @@ const Root$a = styledComponents.styled(Layer)`
     child
   ] });
 });
+Tooltip.displayName = "ForwardRef(Tooltip)";
 function useCloseOnMouseLeave({
   handleIsOpenChange,
   referenceElement,
@@ -4965,7 +5018,9 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
       ]
     }
   );
-}), Autocomplete = InnerAutocomplete, Root$8 = styledComponents.styled.ol`
+});
+InnerAutocomplete.displayName = "ForwardRef(Autocomplete)";
+const Autocomplete = InnerAutocomplete, Root$8 = styledComponents.styled.ol`
   margin: 0;
   padding: 0;
   display: flex;
@@ -5019,6 +5074,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "li", children: item })
   ] }, itemIndex)) });
 });
+Breadcrumbs.displayName = "ForwardRef(Breadcrumbs)";
 function dialogStyle({ theme: theme$1 }) {
   const { color } = theme.getTheme_v2(theme$1);
   return {
@@ -5166,7 +5222,9 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
     /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { flex: 1, ref: contentRef, tabIndex: -1, children }),
     footer && /* @__PURE__ */ jsxRuntime.jsx(DialogFooter, { children: footer })
   ] }) }) });
-}), Dialog = react.forwardRef(function(props, ref) {
+});
+DialogCard.displayName = "ForwardRef(DialogCard)";
+const Dialog = react.forwardRef(function(props, ref) {
   var _a;
   const dialog = useDialog(), { layer } = useTheme_v2(), {
     __unstable_autoFocus: autoFocus = !0,
@@ -5263,6 +5321,7 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
     }
   ) });
 });
+Dialog.displayName = "ForwardRef(Dialog)";
 function DialogProvider(props) {
   const { children, position, zOffset } = props, contextValue = react.useMemo(
     () => ({
@@ -5274,6 +5333,7 @@ function DialogProvider(props) {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: contextValue, children });
 }
+DialogProvider.displayName = "DialogProvider";
 const Root$6 = styledComponents.styled.kbd`
   font: inherit;
   padding: 1px;
@@ -5288,7 +5348,9 @@ const Root$6 = styledComponents.styled.kbd`
 `, Hotkeys = react.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) : /* @__PURE__ */ jsxRuntime.jsx(Root$6, { "data-ui": "Hotkeys", ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { as: "span", space, children: keys.map((key2, i) => /* @__PURE__ */ jsxRuntime.jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i)) }) });
-}), MenuContext = createGlobalScopedContext(
+});
+Hotkeys.displayName = "ForwardRef(Hotkeys)";
+const MenuContext = createGlobalScopedContext(
   "@sanity/ui/context/menu",
   null
 );
@@ -5329,13 +5391,13 @@ function _sortElements(rootElement, elements) {
   elements.sort(_sort);
 }
 function useMenuController(props) {
-  const { onKeyDown, originElement, shouldFocus } = props, elementsRef = react.useRef([]), [rootElement, setRootElement] = react.useState(null), [activeIndex, _setActiveIndex] = react.useState(-1), activeIndexRef = react.useRef(activeIndex), activeElement = elementsRef.current[activeIndex] || null, mounted = !!rootElement, setActiveIndex = react.useCallback((nextActiveIndex) => {
+  const { onKeyDown, originElement, shouldFocus, rootElementRef } = props, elementsRef = react.useRef([]), [activeIndex, _setActiveIndex] = react.useState(-1), activeIndexRef = react.useRef(activeIndex), activeElement = react.useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex]), mounted = !!rootElementRef.current, setActiveIndex = react.useCallback((nextActiveIndex) => {
     _setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex;
   }, []), mount = react.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);
       }
@@ -5344,7 +5406,7 @@ function useMenuController(props) {
         idx > -1 && elementsRef.current.splice(idx, 1);
       };
     },
-    [rootElement, setActiveIndex]
+    [rootElementRef, setActiveIndex]
   ), handleKeyDown = react.useCallback(
     (event) => {
       if (event.key === "Tab") {
@@ -5399,44 +5461,40 @@ function useMenuController(props) {
     },
     [setActiveIndex]
   ), handleItemMouseLeave = react.useCallback(() => {
-    setActiveIndex(-2), rootElement == null || rootElement.focus();
-  }, [setActiveIndex, rootElement]);
+    var _a;
+    setActiveIndex(-2), (_a = rootElementRef.current) == null || _a.focus();
+  }, [rootElementRef, setActiveIndex]);
   return react.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 = styledComponents.styled(Box)`
@@ -5468,34 +5526,23 @@ const Root$5 = styledComponents.styled(Box)`
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
-    mount,
-    rootElement,
-    setRootElement
-  } = useMenuController({ onKeyDown, originElement, shouldFocus }), handleRefChange = react.useCallback(
+    mount
+  } = useMenuController({ onKeyDown, originElement, shouldFocus, rootElementRef: ref }), unregisterElementRef = react.useRef(null), handleRefChange = react.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]
   );
   react.useEffect(() => {
     onItemSelect && onItemSelect(activeIndex);
-  }, [activeIndex, onItemSelect]), useClickOutside(
-    react.useCallback(
-      (event) => isTopLayer && onClickOutside && onClickOutside(event),
-      [isTopLayer, onClickOutside]
-    ),
-    [rootElement]
-  ), useGlobalKeyDown(
+  }, [activeIndex, onItemSelect]), useClickOutsideEvent(isTopLayer && onClickOutside, () => [ref.current]), useGlobalKeyDown(
     react.useCallback(
       (event) => {
         isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
       },
       [isTopLayer, onEscape]
     )
-  ), react.useEffect(() => {
-    if (!(!rootElement || !registerElement))
-      return registerElement(rootElement);
-  }, [registerElement, rootElement]);
+  );
   const value = react.useMemo(
     () => ({
       version: 0,
@@ -5537,7 +5584,9 @@ const Root$5 = styledComponents.styled(Box)`
       children: /* @__PURE__ */ jsxRuntime.jsx(Stack, { space, children })
     }
   ) });
-}), MenuButton = react.forwardRef(function(props, forwardedRef) {
+});
+Menu.displayName = "ForwardRef(Menu)";
+const MenuButton = react.forwardRef(function(props, forwardedRef) {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = !1,
     boundaryElement: deprecated_boundaryElement,
@@ -5602,9 +5651,7 @@ const Root$5 = styledComponents.styled(Box)`
     [menuElements]
   ), handleItemClick = react.useCallback(() => {
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
-  }, [buttonElement, disableRestoreFocusOnClose]), registerElement = react.useCallback((el) => (setChildMenuElements((els) => els.concat([el])), () => {
-    setChildMenuElements((els) => els.filter((_el) => _el !== el));
-  }), []), menuProps = react.useMemo(
+  }, [buttonElement, disableRestoreFocusOnClose]), registerElement = react.useCallback((el) => (setChildMenuElements((els) => els.concat([el])), () => setChildMenuElements((els) => els.filter((_el) => _el !== el))), []), menuProps = react.useMemo(
     () => ({
       "aria-labelledby": id,
       onBlurCapture: handleBlur,
@@ -5671,12 +5718,15 @@ const Root$5 = styledComponents.styled(Box)`
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: button || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) });
-}), MenuDivider = styledComponents.styled.hr`
+});
+MenuButton.displayName = "ForwardRef(MenuButton)";
+const MenuDivider = styledComponents.styled.hr`
   height: 1px;
   border: 0;
   background: var(--card-hairline-soft-color);
   margin: 0;
 `;
+MenuDivider.displayName = "MenuDivider";
 function selectableBaseStyle() {
   return styledComponents.css`
     background-color: inherit;
@@ -5778,6 +5828,7 @@ const Selectable = styledComponents.styled(Box)(
   selectableBaseStyle,
   selectableColorStyle
 );
+Selectable.displayName = "Selectable";
 function useMenu() {
   const value = react.useContext(MenuContext);
   if (!value)
@@ -5808,7 +5859,7 @@ function MenuGroup(props) {
     onItemClick,
     onItemMouseEnter = menu.onMouseEnter,
     registerElement
-  } = menu, [rootElement, setRootElement] = react.useState(null), [open, setOpen] = react.useState(!1), shouldFocusRef = react.useRef(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = react.useState(!1), handleMouseEnter = react.useCallback(
+  } = menu, [rootElement, setRootElement] = react.useState(null), [open, setOpen] = react.useState(!1), [shouldFocus, setShouldFocus] = react.useState(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = react.useState(!1), handleMouseEnter = react.useCallback(
     (event) => {
       setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
     },
@@ -5822,19 +5873,21 @@ function MenuGroup(props) {
     [rootElement]
   ), handleClick = react.useCallback(
     (event) => {
-      onClick && onClick(event), shouldFocusRef.current = "first", setOpen(!0), requestAnimationFrame(() => {
-        shouldFocusRef.current = null;
-      });
+      onClick == null || onClick(event), setShouldFocus("first"), setOpen(!0);
     },
     [onClick]
   ), handleChildItemClick = react.useCallback(() => {
-    setOpen(!1), onItemClick && onItemClick();
+    setOpen(!1), onItemClick == null || onItemClick();
   }, [onItemClick]), handleMenuMouseEnter = react.useCallback(() => setWithinMenu(!0), []);
   react.useEffect(() => mount(rootElement), [mount, rootElement]), react.useEffect(() => {
     active || setOpen(!1);
   }, [active]), react.useEffect(() => {
     open || setWithinMenu(!1);
-  }, [open]);
+  }, [open]), react.useEffect(() => {
+    if (!shouldFocus) return;
+    const rafId = requestAnimationFrame(() => setShouldFocus(null));
+    return () => cancelAnimationFrame(rafId);
+  }, [shouldFocus]);
   const childMenu = /* @__PURE__ */ jsxRuntime.jsx(
     Menu,
     {
@@ -5844,15 +5897,13 @@ function MenuGroup(props) {
       onKeyDown: handleMenuKeyDown,
       onMouseEnter: handleMenuMouseEnter,
       registerElement,
-      shouldFocus: shouldFocusRef.current,
+      shouldFocus,
       children
     }
   ), handleKeyDown = react.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;
     }
   }, []);
@@ -5886,6 +5937,7 @@ function MenuGroup(props) {
     }
   ) });
 }
+MenuGroup.displayName = "MenuGroup";
 const MenuItem = react.forwardRef(function(props, forwardedRef) {
   const {
     as = "button",
@@ -5983,7 +6035,9 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       ]
     }
   );
-}), keyframe = styledComponents.keyframes`
+});
+MenuItem.displayName = "ForwardRef(MenuItem)";
+const keyframe = styledComponents.keyframes`
   0% {
     background-position: 100%;
   }
@@ -6043,7 +6097,9 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       ref
     }
   );
-}), Root$3 = styledComponents.styled(Skeleton)((props) => {
+});
+Skeleton.displayName = "ForwardRef(Skeleton)";
+const Root$3 = styledComponents.styled(Skeleton)((props) => {
   const { $size, $style } = props, { font, media } = theme.getTheme_v2(props.theme), fontStyle = font[$style];
   return _responsive(media, $size, (sizeIndex) => {
     const fontSize2 = fontStyle.sizes[sizeIndex];
@@ -6052,16 +6108,24 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
 }), TextSkeleton = react.forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
   return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "text" });
-}), LabelSkeleton = react.forwardRef(function(props, ref) {
+});
+TextSkeleton.displayName = "ForwardRef(TextSkeleton)";
+const LabelSkeleton = react.forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
   return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "label" });
-}), HeadingSkeleton = react.forwardRef(function(props, ref) {
+});
+LabelSkeleton.displayName = "ForwardRef(LabelSkeleton)";
+const HeadingSkeleton = react.forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
   return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "heading" });
-}), CodeSkeleton = react.forwardRef(function(props, ref) {
+});
+HeadingSkeleton.displayName = "ForwardRef(HeadingSkeleton)";
+const CodeSkeleton = react.forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
   return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "code" });
-}), CustomButton = styledComponents.styled(Button)`
+});
+CodeSkeleton.displayName = "ForwardRef(CodeSkeleton)";
+const CustomButton = styledComponents.styled(Button)`
   max-width: 100%;
 `, Tab = react.forwardRef(function(props, forwardedRef) {
   const {
@@ -6113,6 +6177,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     }
   );
 });
+Tab.displayName = "ForwardRef(Tab)";
 function _isReactElement(node) {
   return !!node;
 }
@@ -6149,7 +6214,9 @@ const CustomInline = styledComponents.styled(Inline)`
       children: tabs
     }
   );
-}), TabPanel = react.forwardRef(function(props, ref) {
+});
+TabList.displayName = "ForwardRef(TabList)";
+const TabPanel = react.forwardRef(function(props, ref) {
   const { flex, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
@@ -6163,7 +6230,9 @@ const CustomInline = styledComponents.styled(Inline)`
       children: props.children
     }
   );
-}), TextBox = styledComponents.styled(Flex)`
+});
+TabPanel.displayName = "ForwardRef(TabPanel)";
+const TextBox = styledComponents.styled(Flex)`
   overflow-x: auto;
 `, loadingAnimation = styledComponents.keyframes`
   0% {
@@ -6171,7 +6240,7 @@ const CustomInline = styledComponents.styled(Inline)`
   }
   100% {
     width: 100%;
-  } 
+  }
 `, LOADING_BAR_HEIGHT = 2;
 function rootStyles(props) {
   const { color } = getTheme_v2.getTheme_v2(props.theme), loadingBarColor = color.button.default[props.tone].enabled.bg;
@@ -6257,6 +6326,7 @@ function Toast(props) {
     }
   );
 }
+Toast.displayName = "Toast";
 function useMounted() {
   return react.useSyncExternalStore(
     subscribe,
@@ -6363,6 +6433,7 @@ function ToastProvider(props) {
     )) }) }) }) })
   ] });
 }
+ToastProvider.displayName = "ToastProvider";
 function useToast() {
   const value = react.useContext(ToastContext);
   if (!value)
@@ -6551,7 +6622,7 @@ const TreeContext = createGlobalScopedContext(
     ) });
   })
 );
-Tree.displayName = "Tree";
+Tree.displayName = "Memo(ForwardRef(Tree))";
 function treeItemRootStyle() {
   return styledComponents.css`
     &[role='none'] > [role='treeitem'] {
@@ -6770,6 +6841,7 @@ const TreeGroup = react.memo(function(props) {
     }
   );
 });
+TreeItem.displayName = "Memo(TreeItem)";
 exports.Arrow = Arrow;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;