@sanity/ui 2.3.6-canary.2 → 2.3.6-canary.3

package/dist/index.js

@@ -934,7 +934,7 @@ const Root$B = styledComponents.styled.div(
     status = "online",
     size: sizeProp = 1,
     ...restProps
-  } = props, { avatar } = useTheme_v2(), as = reactIs.isValidElementType(asProp) ? asProp : "div", size2 = react.useMemo(() => _getArrayProp(sizeProp), [sizeProp]), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = react.useId(), [arrowPosition, setArrowPosition] = react.useState(
+  } = props, { avatar } = useTheme_v2(), as = reactIs.isValidElementType(asProp) ? asProp : "div", size2 = _getArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = react.useId(), [arrowPosition, setArrowPosition] = react.useState(
     animateArrowFrom || arrowPositionProp || "inside"
   ), [imageFailed, setImageFailed] = react.useState(!1), imageId = `avatar-image-${elementId}`;
   react.useEffect(() => {
@@ -946,10 +946,7 @@ const Root$B = styledComponents.styled.div(
   }, [src]);
   const handleImageError = react.useCallback(() => {
     setImageFailed(!0), onImageLoadError && onImageLoadError(new Error("Avatar: the image failed to load"));
-  }, [onImageLoadError]), initialsSize = react.useMemo(
-    () => size2.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0),
-    [size2]
-  );
+  }, [onImageLoadError]), initialsSize = size2.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Root$B,
     {
@@ -1044,11 +1041,8 @@ const Root$A = styledComponents.styled.div(
   _responsiveAvatarCounterSizeStyle,
   _avatarCounterBaseStyle
 ), AvatarCounter = react.forwardRef(function(props, ref) {
-  const { count, size: sizeProp = 1 } = props, size2 = react.useMemo(() => _getArrayProp(sizeProp), [sizeProp]), fontSize2 = react.useMemo(
-    () => size2.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0),
-    [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 }) });
+  const { count, size: size2 } = props, $size = _getArrayProp(size2 != null ? size2 : 1), fontSize2 = $size.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$A, { $size, "data-ui": "AvatarCounter", ref, children: /* @__PURE__ */ jsxRuntime.jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }) });
 }), BASE_STYLES = styledComponents.css`
   white-space: nowrap;
 
@@ -1080,10 +1074,7 @@ const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avata
     maxLength: maxLengthProp = 4,
     size: sizeProp = 1,
     ...restProps
-  } = props, children = react.useMemo(
-    () => react.Children.toArray(childrenProp).filter(react.isValidElement),
-    [childrenProp]
-  ), maxLength = Math.max(maxLengthProp, 0), size2 = react.useMemo(() => _getArrayProp(sizeProp), [sizeProp]), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
+  } = props, children = react.Children.toArray(childrenProp).filter(react.isValidElement), maxLength = Math.max(maxLengthProp, 0), size2 = react.useMemo(() => _getArrayProp(sizeProp), [sizeProp]), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
   return /* @__PURE__ */ jsxRuntime.jsxs(Root$z, { "data-ui": "AvatarStack", ...restProps, ref, $size: size2, children: [
     len === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: len, size: size2 }) }),
     len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) }),
@@ -2830,10 +2821,10 @@ function findMinBreakpoints(media, width) {
   return ret;
 }
 const ElementQuery = react.forwardRef(function(props, forwardedRef) {
-  const theme2 = useTheme_v2(), { children, media = theme2.media, ...restProps } = props, ref = react.useRef(null), [element, setElement] = react.useState(null), elementSize = useElementSize(element), width = react.useMemo(() => {
+  const theme2 = useTheme_v2(), { children, media: _media, ...restProps } = props, media = _media != null ? _media : theme2.media, ref = react.useRef(null), [element, setElement] = react.useState(null), elementSize = useElementSize(element), width = react.useMemo(() => {
     var _a;
     return (_a = elementSize == null ? void 0 : elementSize.border.width) != null ? _a : window.innerWidth;
-  }, [elementSize]), max = react.useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = react.useMemo(() => findMinBreakpoints(media, width), [media, width]);
+  }, [elementSize]), max = findMaxBreakpoints(media, width), min = findMinBreakpoints(media, width);
   react.useImperativeHandle(forwardedRef, () => ref.current);
   const setRef = react.useCallback((el) => {
     ref.current = el, setElement(el);
@@ -2967,18 +2958,18 @@ function _isScrollable(el) {
 }
 function LayerProvider(props) {
   var _a;
-  const { children, zOffset: zOffsetProp = 0 } = props, parentContextValue = react.useContext(LayerContext), parent = parentContextValue && getLayerContext(parentContextValue), parentRegisterChild = parent == null ? void 0 : parent.registerChild, level = ((_a = parent == null ? void 0 : parent.level) != null ? _a : 0) + 1, zOffset = react.useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex], [, setChildLayers] = react.useState({}), [size2, setSize] = react.useState(0), isTopLayer = size2 === 0, registerChild = react.useCallback(
+  const { children, zOffset: zOffsetProp = 0 } = props, parentContextValue = react.useContext(LayerContext), parentRegisterChild = react.useContext(LayerContextRegisterChild), parent = parentContextValue && getLayerContext(parentContextValue), level = ((_a = parent == null ? void 0 : parent.level) != null ? _a : 0) + 1, zOffset = react.useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex], [childLayers, setChildLayers] = react.useState({}), size2 = react.useMemo(() => Object.keys(childLayers).length, [childLayers]), isTopLayer = size2 === 0, registerChild = react.useCallback(
     (childLevel) => {
       const parentDispose = parentRegisterChild == null ? void 0 : parentRegisterChild(childLevel);
-      return childLevel !== void 0 ? setChildLayers((state) => {
+      return setChildLayers((state) => {
         var _a2;
-        const prevLen = (_a2 = state[childLevel]) != null ? _a2 : 0, nextState = { ...state, [childLevel]: prevLen + 1 };
-        return setSize(Object.keys(nextState).length), nextState;
-      }) : setSize((v) => v + 1), () => {
-        childLevel !== void 0 ? setChildLayers((state) => {
+        const prevLen = (_a2 = state[childLevel]) != null ? _a2 : 0;
+        return { ...state, [childLevel]: prevLen + 1 };
+      }), () => {
+        setChildLayers((state) => {
           const nextState = { ...state };
-          return nextState[childLevel] === 1 ? (delete nextState[childLevel], setSize(Object.keys(nextState).length)) : nextState[childLevel] -= 1, nextState;
-        }) : setSize((v) => v - 1), parentDispose == null || parentDispose();
+          return nextState[childLevel] === 1 ? delete nextState[childLevel] : nextState[childLevel] -= 1, nextState;
+        }), parentDispose == null || parentDispose();
       };
     },
     [parentRegisterChild]
@@ -2989,15 +2980,14 @@ function LayerProvider(props) {
       version: 0,
       isTopLayer,
       level,
-      registerChild,
       size: size2,
       zIndex
     }),
-    [isTopLayer, level, registerChild, size2, zIndex]
+    [isTopLayer, level, size2, zIndex]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(LayerContextRegisterChild.Provider, { value: registerChild, children }) });
 }
-const Root$j = styledComponents.styled.div({ position: "relative" }), LayerChildren = react.forwardRef(function(props, forwardedRef) {
+const LayerContextRegisterChild = react.createContext(null), 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(() => {
     isTopLayerRef.current !== isTopLayer && isTopLayer && (onActivate == null || onActivate({ activeElement: lastFocusedRef.current })), isTopLayerRef.current = isTopLayer;
@@ -3265,19 +3255,19 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
 PopoverCard.displayName = "PopoverCard";
 const Popover = react.memo(
   react.forwardRef(function(props, forwardedRef) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const { container, layer } = useTheme_v2(), boundaryElementContext = useBoundaryElement(), {
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = !1,
       arrow: arrowProp = !1,
-      boundaryElement = boundaryElementContext.element,
-      children: childProp,
+      boundaryElement: _boundaryElement,
+      children,
       constrainSize = !1,
       content,
       disabled,
-      fallbackPlacements = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS$1[(_a = props.placement) != null ? _a : "bottom"],
+      fallbackPlacements: _fallbackPlacements,
       matchReferenceWidth,
-      floatingBoundary = (_c = props.boundaryElement) != null ? _c : boundaryElementContext.element,
+      floatingBoundary: _floatingBoundary,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onActivate,
       open,
@@ -3287,16 +3277,16 @@ const Popover = react.memo(
       portal,
       preventOverflow = !0,
       radius: radiusProp = 3,
-      referenceBoundary = (_d = props.boundaryElement) != null ? _d : boundaryElementContext.element,
+      referenceBoundary: _referenceBoundary,
       referenceElement,
       scheme,
       shadow: shadowProp = 3,
       tone = "inherit",
       width: widthProp = "auto",
-      zOffset: zOffsetProp = layer.popover.zOffset,
+      zOffset: _zOffset,
       updateRef,
       ...restProps
-    } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = (_e = useElementSize(boundaryElement)) == null ? void 0 : _e.border, padding = react.useMemo(() => _getArrayProp(paddingProp), [paddingProp]), radius = react.useMemo(() => _getArrayProp(radiusProp), [radiusProp]), shadow = react.useMemo(() => _getArrayProp(shadowProp), [shadowProp]), widthArrayProp = react.useMemo(() => _getArrayProp(widthProp), [widthProp]), zOffset = react.useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
+    } = props, boundaryElement = _boundaryElement != null ? _boundaryElement : boundaryElementContext.element, referenceBoundary = (_a = _referenceBoundary != null ? _referenceBoundary : props.boundaryElement) != null ? _a : boundaryElementContext.element, floatingBoundary = (_b = _floatingBoundary != null ? _floatingBoundary : props.boundaryElement) != null ? _b : boundaryElementContext.element, fallbackPlacements = _fallbackPlacements != null ? _fallbackPlacements : DEFAULT_FALLBACK_PLACEMENTS$1[(_c = props.placement) != null ? _c : "bottom"], zOffsetProp = _zOffset != null ? _zOffset : layer.popover.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = (_d = useElementSize(boundaryElement)) == null ? void 0 : _d.border, padding = react.useMemo(() => _getArrayProp(paddingProp), [paddingProp]), radius = react.useMemo(() => _getArrayProp(radiusProp), [radiusProp]), shadow = react.useMemo(() => _getArrayProp(shadowProp), [shadowProp]), widthArrayProp = _getArrayProp(widthProp), zOffset = react.useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
     react.useImperativeHandle(
       forwardedRef,
       () => ref.current
@@ -3377,27 +3367,18 @@ const Popover = react.memo(
       middleware,
       placement: placementProp,
       whileElementsMounted: reactDom$1.autoUpdate
-    }), referenceHidden = (_f = middlewareData.hide) == null ? void 0 : _f.referenceHidden, arrowX = (_g = middlewareData.arrow) == null ? void 0 : _g.x, arrowY = (_h = middlewareData.arrow) == null ? void 0 : _h.y, originX = (_i = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _i.originX, originY = (_j = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _j.originY, setArrow = react.useCallback((arrowEl) => {
+    }), referenceHidden = (_e = middlewareData.hide) == null ? void 0 : _e.referenceHidden, arrowX = (_f = middlewareData.arrow) == null ? void 0 : _f.x, arrowY = (_g = middlewareData.arrow) == null ? void 0 : _g.y, originX = (_h = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _h.originX, originY = (_i = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _i.originY, setArrow = react.useCallback((arrowEl) => {
       arrowRef.current = arrowEl;
     }, []), setFloating = react.useCallback(
       (node) => {
         ref.current = node, refs.setFloating(node);
       },
       [refs]
-    ), setReference = react.useCallback(
-      (node) => {
-        refs.setReference(node);
-        const childRef = childProp == null ? void 0 : childProp.ref;
-        typeof childRef == "function" ? childRef(node) : childRef && (childRef.current = node);
-      },
-      [childProp, refs]
-    ), child = react.useMemo(() => !childProp || referenceElement ? null : react.cloneElement(childProp, { ref: setReference }), [childProp, referenceElement, setReference]);
-    if (react.useEffect(() => {
-      updateRef && (typeof updateRef == "function" ? updateRef(update) : updateRef && (updateRef.current = update));
-    }, [update, updateRef]), react.useEffect(() => {
-      child || refs.setReference(referenceElement || null);
-    }, [referenceElement, refs, child]), disabled)
-      return childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    );
+    if (react.useImperativeHandle(updateRef, () => update, [update]), react.useEffect(() => {
+      children || refs.setReference(referenceElement || null);
+    }, [children, referenceElement, refs]), disabled)
+      return children || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
     const popover = /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(
       PopoverCard,
       {
@@ -3431,22 +3412,35 @@ const Popover = react.memo(
         ConditionalWrapper,
         {
           condition: animate,
-          wrapper: (children) => /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }),
+          wrapper: (children2) => /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: children2 }),
           children: open && /* @__PURE__ */ jsxRuntime.jsx(
             ConditionalWrapper,
             {
               condition: !!portal,
-              wrapper: (children) => /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children }),
+              wrapper: (children2) => /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: children2 }),
               children: popover
             }
           )
         }
       ),
-      child
+      children && !referenceElement && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: (node) => {
+            logDeprecatedWarning(), refs.setReference(node);
+          },
+          style: { display: "contents" },
+          children
+        }
+      )
     ] });
   })
 );
 Popover.displayName = "Popover";
+let didWarn = !1;
+function logDeprecatedWarning() {
+  didWarn || (console.warn("Popover: Please use the `referenceElement` prop instead of passing a children."), didWarn = !0);
+}
 function radioBaseStyle() {
   return styledComponents.css`
     position: relative;
@@ -4319,30 +4313,30 @@ const Root$a = styledComponents.styled(Layer)`
   pointer-events: none;
   max-width: ${({ $maxWidth }) => $maxWidth}px;
 `, Tooltip = react.forwardRef(function(props, forwardedRef) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f;
   const boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), {
     animate: _animate = !1,
     arrow: arrowProp = !1,
-    boundaryElement = boundaryElementContext == null ? void 0 : boundaryElementContext.element,
+    boundaryElement: _boundaryElement,
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS[(_a = props.placement) != null ? _a : "bottom"],
+    fallbackPlacements: _fallbackPlacements,
     padding = 2,
     placement: placementProp = "bottom",
     portal: portalProp,
     radius = 2,
     scheme,
     shadow = 2,
-    zOffset = layer.tooltip.zOffset,
+    zOffset: _zOffset,
     delay,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = react.useMemo(
+  } = props, zOffset = _zOffset != null ? _zOffset : layer.tooltip.zOffset, fallbackPlacementsProp = _fallbackPlacements != null ? _fallbackPlacements : DEFAULT_FALLBACK_PLACEMENTS[(_a = props.placement) != null ? _a : "bottom"], boundaryElement = _boundaryElement != null ? _boundaryElement : boundaryElementContext == null ? void 0 : boundaryElementContext.element, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = react.useMemo(
     () => _getArrayProp(fallbackPlacementsProp),
     [fallbackPlacementsProp]
   ), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
   react.useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, documentBodyOffsetWidth = react.useSyncExternalStore(
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_b = portal.elements) == null ? void 0 : _b[portalProp]) || null : portal.element, documentBodyOffsetWidth = react.useSyncExternalStore(
     emptySubscribe,
     () => document.body.offsetWidth,
     // We don't actually know what the width of the body is during SSR, so we'll just assume it's 800px or larger
@@ -4373,7 +4367,7 @@ const Root$a = styledComponents.styled(Layer)`
     middleware,
     placement: placementProp,
     whileElementsMounted: reactDom$1.autoUpdate
-  }), arrowX = (_d = middlewareData.arrow) == null ? void 0 : _d.x, arrowY = (_e = middlewareData.arrow) == null ? void 0 : _e.y, originX = (_f = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _f.originX, originY = (_g = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _g.originY, tooltipId = react.useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), showTooltip = isOpen || (delayGroupContext == null ? void 0 : delayGroupContext.openTooltipId) === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.open) || 0, closeDelayProp = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.close) || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = react.useCallback(
+  }), arrowX = (_c = middlewareData.arrow) == null ? void 0 : _c.x, arrowY = (_d = middlewareData.arrow) == null ? void 0 : _d.y, originX = (_e = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _e.originX, originY = (_f = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _f.originY, tooltipId = react.useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), showTooltip = isOpen || (delayGroupContext == null ? void 0 : delayGroupContext.openTooltipId) === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.open) || 0, closeDelayProp = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.close) || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = react.useCallback(
     (open, immediate) => {
       if (isInsideGroup)
         if (open) {
@@ -4426,9 +4420,9 @@ const Root$a = styledComponents.styled(Layer)`
   );
   react.useEffect(() => {
     if (!showTooltip) return;
-    function handleWindowMouseMove(event) {
+    const handleWindowMouseMove = (event) => {
       referenceElement && (referenceElement === event.target || event.target instanceof Node && referenceElement.contains(event.target) || (handleIsOpenChange(!1), window.removeEventListener("mousemove", handleWindowMouseMove)));
-    }
+    };
     return window.addEventListener("mousemove", handleWindowMouseMove), () => {
       window.removeEventListener("mousemove", handleWindowMouseMove);
     };
@@ -4629,37 +4623,34 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     forwardedRef,
     () => inputElementRef.current
   );
-  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = react.useMemo(() => _getArrayProp(paddingProp), [paddingProp]), currentOption = react.useMemo(
+  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = _getArrayProp(paddingProp), currentOption = react.useMemo(
     () => value !== null ? options.find((o) => o.value === value) : void 0,
     [options, value]
   ), filteredOptions = react.useMemo(
     () => options.filter((option) => query ? filterOption(query, option) : !0),
     [filterOption, options, query]
-  ), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = react.useCallback(
-    (event) => {
-      setTimeout(() => {
-        if (popoverMouseWithinRef.current)
-          return;
-        const elements = (relatedElements || []).concat(
-          rootElementRef.current ? [rootElementRef.current] : [],
-          resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : []
-        );
-        let focusInside = !1;
-        if (document.activeElement) {
-          for (const e of elements)
-            if (e === document.activeElement || e.contains(document.activeElement)) {
-              focusInside = !0;
-              break;
-            }
-        }
-        focusInside === !1 && (dispatch({ type: "root/blur" }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), onBlur && onBlur(event));
-      }, 0);
-    },
-    [onBlur, onQueryChange, relatedElements]
-  ), handleRootFocus = react.useCallback((event) => {
+  ), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = (event) => {
+    setTimeout(() => {
+      if (popoverMouseWithinRef.current)
+        return;
+      const elements = (relatedElements || []).concat(
+        rootElementRef.current ? [rootElementRef.current] : [],
+        resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : []
+      );
+      let focusInside = !1;
+      if (document.activeElement) {
+        for (const e of elements)
+          if (e === document.activeElement || e.contains(document.activeElement)) {
+            focusInside = !0;
+            break;
+          }
+      }
+      focusInside === !1 && (dispatch({ type: "root/blur" }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), onBlur && onBlur(event));
+    }, 0);
+  }, handleRootFocus = (event) => {
     const listBoxElement = listBoxElementRef.current, focusedElement = event.target instanceof HTMLElement ? event.target : null, listFocused2 = (listBoxElement == null ? void 0 : listBoxElement.contains(focusedElement)) || !1;
     listFocused2 !== listFocusedRef.current && (listFocusedRef.current = listFocused2, dispatch({ type: "root/setListFocused", listFocused: listFocused2 }));
-  }, []), handleOptionSelect = react.useCallback(
+  }, handleOptionSelect = react.useCallback(
     (v) => {
       var _a;
       dispatch({ type: "value/change", value: v }), popoverMouseWithinRef.current = !1, onSelect && onSelect(v), valueRef.current = v, onChange && onChange(v), onQueryChange && onQueryChange(null), (_a = inputElementRef.current) == null || _a.focus();
@@ -5149,13 +5140,13 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
     onFocus,
     padding: paddingProp = 3,
     portal: portalProp,
-    position: positionProp = dialog.position || "fixed",
+    position: _position,
     scheme,
     width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
+    zOffset: _zOffset,
     animate: _animate = !1,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = react.useMemo(() => _getArrayProp(cardRadiusProp), [cardRadiusProp]), padding = react.useMemo(() => _getArrayProp(paddingProp), [paddingProp]), position = react.useMemo(() => _getArrayProp(positionProp), [positionProp]), width = react.useMemo(() => _getArrayProp(widthProp), [widthProp]), zOffset = react.useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), preDivRef = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null), handleFocus = react.useCallback(
+  } = props, positionProp = _position != null ? _position : dialog.position || "fixed", zOffsetProp = _zOffset != null ? _zOffset : dialog.zOffset || layer.dialog.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = react.useMemo(() => _getArrayProp(cardRadiusProp), [cardRadiusProp]), padding = react.useMemo(() => _getArrayProp(paddingProp), [paddingProp]), position = react.useMemo(() => _getArrayProp(positionProp), [positionProp]), width = react.useMemo(() => _getArrayProp(widthProp), [widthProp]), zOffset = react.useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), preDivRef = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null), handleFocus = react.useCallback(
     (event) => {
       onFocus == null || onFocus(event);
       const target = event.target, cardElement = cardRef.current;
@@ -5419,10 +5410,10 @@ const Root$5 = styledComponents.styled(Box)`
     originElement,
     padding = 1,
     registerElement,
-    shouldFocus = props.focusFirst && "first" || props.focusLast && "last" || null,
+    shouldFocus: _shouldFocus,
     space = 1,
     ...restProps
-  } = props, ref = react.useRef(null);
+  } = props, shouldFocus = _shouldFocus != null ? _shouldFocus : props.focusFirst && "first" || props.focusLast && "last" || null, ref = react.useRef(null);
   react.useImperativeHandle(forwardedRef, () => ref.current);
   const { isTopLayer } = useLayer(), {
     activeElement,
@@ -5768,9 +5759,9 @@ function MenuGroup(props) {
     onClickOutside,
     onEscape,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
+    onItemMouseEnter: _onItemMouseEnter,
     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), radius = react.useMemo(() => _getArrayProp(radiusProp), [radiusProp]), handleMouseEnter = react.useCallback(
+  } = menu, onItemMouseEnter = _onItemMouseEnter != null ? _onItemMouseEnter : menu.onMouseEnter, [rootElement, setRootElement] = react.useState(null), [open, setOpen] = react.useState(!1), shouldFocusRef = react.useRef(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = react.useState(!1), radius = react.useMemo(() => _getArrayProp(radiusProp), [radiusProp]), handleMouseEnter = react.useCallback(
     (event) => {
       setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
     },
@@ -5876,9 +5867,9 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     activeElement,
     mount,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
-    onItemMouseLeave = menu.onMouseLeave
-  } = menu, [rootElement, setRootElement] = react.useState(null), active = !!activeElement && activeElement === rootElement, ref = react.useRef(null);
+    onItemMouseEnter: _onItemMouseEnter,
+    onItemMouseLeave: _onItemMouseLeave
+  } = menu, onItemMouseEnter = _onItemMouseEnter != null ? _onItemMouseEnter : menu.onMouseEnter, onItemMouseLeave = _onItemMouseLeave != null ? _onItemMouseLeave : menu.onMouseLeave, [rootElement, setRootElement] = react.useState(null), active = !!activeElement && activeElement === rootElement, ref = react.useRef(null);
   react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
   const handleClick = react.useCallback(
     (event) => {
@@ -6198,33 +6189,12 @@ const subscribe = () => () => {
   max-width: 420px;
   width: 100%;
 `;
-let toastId = 0;
 function ToastProvider(props) {
   const { children, padding = 4, paddingX, paddingY, zOffset } = props, [state, _setState] = react.useState([]), toastsRef = react.useRef({}), mounted = useMounted(), prefersReducedMotion = usePrefersReducedMotion(), variants = react.useMemo(
-    () => ({
-      initial: {
-        opacity: 0,
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
-        y: 32,
-        scale: 0.25,
-        willChange: "transform"
-      },
-      animate: {
-        opacity: [0, 1, 1],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [0, 0, 1],
-        y: 0,
-        scale: 1
-      },
-      exit: {
-        opacity: [1, 1, 0],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [1, 0, 0],
-        scale: 0.5,
-        transition: prefersReducedMotion ? { duration: 0 } : { duration: 0.2 }
-      }
-    }),
+    () => getVariants(prefersReducedMotion),
     [prefersReducedMotion]
   ), value = react.useMemo(() => ({ version: 0, push: (params) => {
-    const setState = (state2) => react.startTransition(() => _setState(state2)), id = params.id || String(toastId++), duration = params.duration || 5e3, dismiss = () => {
+    const setState = (state2) => react.startTransition(() => _setState(state2)), id = params.id || crypto.randomUUID(), duration = params.duration || 5e3, dismiss = () => {
       var _a;
       const timeoutId = (_a = toastsRef.current[id]) == null ? void 0 : _a.timeoutId;
       setState((prevState) => {
@@ -6277,6 +6247,29 @@ function ToastProvider(props) {
     )) }) }) }) })
   ] });
 }
+function getVariants(prefersReducedMotion) {
+  return {
+    initial: {
+      opacity: 0,
+      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
+      y: 32,
+      scale: 0.25,
+      willChange: "transform"
+    },
+    animate: {
+      opacity: [0, 1, 1],
+      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [0, 0, 1],
+      y: 0,
+      scale: 1
+    },
+    exit: {
+      opacity: [1, 1, 0],
+      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [1, 0, 0],
+      scale: 0.5,
+      transition: { duration: prefersReducedMotion ? 0 : 0.2 }
+    }
+  };
+}
 function useToast() {
   const value = react.useContext(ToastContext);
   if (!value)
@@ -6463,6 +6456,28 @@ const key = Symbol.for("@sanity/ui/context/tree"), TreeContext = createGlobalSco
   })
 );
 Tree.displayName = "Tree";
+function useTree() {
+  const tree = react.useContext(TreeContext);
+  if (!tree)
+    throw new Error("Tree: missing context value");
+  return tree;
+}
+const TreeGroup = react.memo(function(props) {
+  const { children, expanded = !1, ...restProps } = props, tree = useTree();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Stack,
+    {
+      as: "ul",
+      "data-ui": "TreeGroup",
+      ...restProps,
+      hidden: !expanded,
+      marginTop: tree.space,
+      role: "group",
+      space: tree.space,
+      children
+    }
+  );
+});
 function treeItemRootStyle() {
   return styledComponents.css`
     &[role='none'] > [role='treeitem'] {
@@ -6549,28 +6564,9 @@ function treeItemBoxStyle(props) {
     }
   `;
 }
-function useTree() {
-  const tree = react.useContext(TreeContext);
-  if (!tree)
-    throw new Error("Tree: missing context value");
-  return tree;
-}
-const TreeGroup = react.memo(function(props) {
-  const { children, expanded = !1, ...restProps } = props, tree = useTree();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Stack,
-    {
-      as: "ul",
-      "data-ui": "TreeGroup",
-      ...restProps,
-      hidden: !expanded,
-      marginTop: tree.space,
-      role: "group",
-      space: tree.space,
-      children
-    }
-  );
-}), Root = react.memo(styledComponents.styled.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styledComponents.styled(Box).attrs({ forwardedAs: "a" })(treeItemBoxStyle), ToggleArrowText = styledComponents.styled(Text)`
+const Root = react.memo(styledComponents.styled.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styledComponents.styled(Box).attrs({ forwardedAs: "a" })(
+  treeItemBoxStyle
+), ToggleArrowText = styledComponents.styled(Text)`
   & > svg {
     transition: transform 100ms;
   }
@@ -6591,12 +6587,12 @@ const TreeGroup = react.memo(function(props) {
     text,
     weight,
     ...restProps
-  } = props, rootRef = react.useRef(null), treeitemRef = react.useRef(null), tree = useTree(), { path, registerItem, setExpanded, setFocusedElement } = tree, _id = react.useId(), id = idProp || _id, itemPath = react.useMemo(() => path.concat([id || ""]), [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootRef.current, expanded = (itemState == null ? void 0 : itemState.expanded) === void 0 ? expandedProp : (itemState == null ? void 0 : itemState.expanded) || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1, contextValue = react.useMemo(
+  } = props, rootRef = react.useRef(null), treeitemRef = react.useRef(null), tree = useTree(), { path, registerItem, setExpanded, setFocusedElement } = tree, _id = react.useId(), id = idProp || _id, itemPath = react.useMemo(() => [...path, id || ""], [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootRef.current, expanded = (itemState == null ? void 0 : itemState.expanded) === void 0 ? expandedProp : (itemState == null ? void 0 : itemState.expanded) || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1, contextValue = react.useMemo(
     () => ({ ...tree, level: tree.level + 1, path: itemPath }),
     [itemPath, tree]
   ), handleClick = react.useCallback(
     (event) => {
-      onClick && onClick(event);
+      onClick == null || onClick(event);
       const target = event.target;
       target instanceof HTMLElement && (target.getAttribute("data-ui") === "TreeItem" || target.closest('[data-ui="TreeItem__box"]')) && (event.stopPropagation(), setExpanded(itemKey, !expanded), setFocusedElement(rootRef.current));
     },
@@ -6614,23 +6610,26 @@ const TreeGroup = react.memo(function(props) {
     if (rootRef.current)
       return registerItem(rootRef.current, itemPath.join("/"), expanded, selected);
   }, [expanded, itemPath, registerItem, selected]);
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { padding, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Box,
-      {
-        marginRight: space,
-        style: {
-          visibility: IconComponent || children ? "visible" : "hidden",
-          pointerEvents: "none"
-        },
-        children: [
-          IconComponent && /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {}) }),
-          !IconComponent && /* @__PURE__ */ jsxRuntime.jsx(ToggleArrowText, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ToggleArrowRightIcon, { style: { transform: expanded ? "rotate(90deg)" : void 0 } }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, textOverflow: "ellipsis", weight, children: text }) })
-  ] });
+  const content = react.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsxs(Flex, { padding, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Box,
+        {
+          marginRight: space,
+          style: {
+            visibility: IconComponent || children ? "visible" : "hidden",
+            pointerEvents: "none"
+          },
+          children: [
+            IconComponent && /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {}) }),
+            !IconComponent && /* @__PURE__ */ jsxRuntime.jsx(ToggleArrowText, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ToggleArrowRightIcon, { style: { transform: expanded ? "rotate(90deg)" : void 0 } }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, textOverflow: "ellipsis", weight, children: text }) })
+    ] }),
+    [IconComponent, children, expanded, fontSize2, muted, padding, space, text, weight]
+  );
   return href ? /* @__PURE__ */ jsxRuntime.jsxs(
     Root,
     {