@sanity/ui 1.4.0 → 1.6.0

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70, _templateObject71, _templateObject72, _templateObject73, _templateObject74, _templateObject75, _templateObject76, _templateObject77, _templateObject78, _templateObject79, _templateObject80, _templateObject81, _templateObject82, _templateObject83, _templateObject84, _templateObject85, _templateObject86, _templateObject87, _templateObject88, _templateObject89;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70, _templateObject71, _templateObject72, _templateObject73, _templateObject74, _templateObject75, _templateObject76, _templateObject77, _templateObject78, _templateObject79, _templateObject80, _templateObject81, _templateObject82, _templateObject83, _templateObject84, _templateObject85, _templateObject86, _templateObject87, _templateObject88;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useLayoutEffect, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1, startTransition } from 'react';
@@ -7,7 +7,7 @@ import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css,
 import { white as white$1, black as black$1, hues } from '@sanity/color';
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, SelectIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon } from '@sanity/icons';
 import Refractor from 'react-refractor';
-import { detectOverflow, flip, offset, shift, arrow, hide, autoUpdate, useFloating } from '@floating-ui/react-dom';
+import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from '@floating-ui/react-dom';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 const EMPTY_ARRAY = [];
@@ -3063,9 +3063,9 @@ function getGlobalScope() {
   throw new Error("@sanity/ui: could not locate global scope");
 }
 const globalScope = getGlobalScope();
-const key$8 = Symbol.for("@sanity/ui/context/theme");
-globalScope[key$8] = globalScope[key$8] || createContext(null);
-const ThemeContext = globalScope[key$8];
+const key$7 = Symbol.for("@sanity/ui/context/theme");
+globalScope[key$7] = globalScope[key$7] || createContext(null);
+const ThemeContext = globalScope[key$7];
 function ThemeProvider(props) {
   const parentTheme = useContext(ThemeContext);
   const {
@@ -5155,9 +5155,9 @@ const KBD = forwardRef(function KBD2(props, ref) {
     })
   });
 });
-const key$7 = Symbol.for("@sanity/ui/context/boundaryElement");
-globalScope[key$7] = globalScope[key$7] || createContext(null);
-const BoundaryElementContext = globalScope[key$7];
+const key$6 = Symbol.for("@sanity/ui/context/boundaryElement");
+globalScope[key$6] = globalScope[key$6] || createContext(null);
+const BoundaryElementContext = globalScope[key$6];
 function BoundaryElementProvider(props) {
   const {
     children,
@@ -5275,9 +5275,9 @@ function getLayerContext(contextValue) {
   }
   throw new Error("could not get layer context");
 }
-const key$6 = Symbol.for("@sanity/ui/context/layer");
-globalScope[key$6] = globalScope[key$6] || createContext(null);
-const LayerContext = globalScope[key$6];
+const key$5 = Symbol.for("@sanity/ui/context/layer");
+globalScope[key$5] = globalScope[key$5] || createContext(null);
+const LayerContext = globalScope[key$5];
 function useLayer() {
   const value = useContext(LayerContext);
   if (!value) {
@@ -5514,7 +5514,7 @@ const Layer = forwardRef(function Layer2(props, ref) {
     })
   });
 });
-const key$5 = Symbol.for("@sanity/ui/context/portal");
+const key$4 = Symbol.for("@sanity/ui/context/portal");
 const elementKey = Symbol.for("@sanity/ui/context/portal/element");
 globalScope[elementKey] = null;
 const defaultContextValue = {
@@ -5533,8 +5533,8 @@ const defaultContextValue = {
     return globalScope[elementKey];
   }
 };
-globalScope[key$5] = globalScope[key$5] || createContext(defaultContextValue);
-const PortalContext = globalScope[key$5];
+globalScope[key$4] = globalScope[key$4] || createContext(defaultContextValue);
+const PortalContext = globalScope[key$4];
 function usePortal() {
   const value = useContext(PortalContext);
   if (!value) {
@@ -5802,6 +5802,26 @@ function size(options) {
     }
   };
 }
+function calcCurrentWidth(params) {
+  const {
+    mediaIndex,
+    theme,
+    width
+  } = params;
+  const w = width[mediaIndex];
+  const currentWidth = w === void 0 ? width[width.length - 1] : w;
+  return typeof currentWidth === "number" ? theme.sanity.container[currentWidth] : void 0;
+}
+function calcMaxWidth(params) {
+  const {
+    boundaryWidth,
+    currentWidth
+  } = params;
+  if (currentWidth === void 0 && boundaryWidth === void 0) {
+    return void 0;
+  }
+  return Math.min(currentWidth != null ? currentWidth : Infinity, (boundaryWidth || Infinity) - DEFAULT_POPOVER_PADDING * 2);
+}
 const Root$j = styled.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  position: absolute;\n  pointer-events: none;\n  width: ", "px;\n  height: ", "px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: ", "px ", "px;\n  }\n\n  [data-placement^='top'] > & {\n    bottom: -", "px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -", "px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -", "px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -", "px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])), DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH);
 const BorderPath = styled.path(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
 const ShapePath = styled.path(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
@@ -5824,22 +5844,14 @@ const PopoverArrow = forwardRef(function PopoverArrow2(props, ref) {
     })
   });
 });
-function popoverCardStyle(props) {
-  const {
-    $boundaryWidth
-  } = props;
-  return {
-    "&:not([hidden])": {
-      display: "flex"
-    },
-    flexDirection: "column",
-    width: "max-content",
-    minWidth: "min-content",
-    maxWidth: typeof $boundaryWidth === "number" ? "".concat($boundaryWidth - DEFAULT_POPOVER_PADDING * 2, "px") : void 0
-  };
-}
-const Root$i = memo(styled(Card)(popoverCardStyle));
-const PopoverContainer = memo(styled(Container)(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n  max-height: inherit;\n  max-width: inherit;\n"]))));
+const Root$i = styled(Card)({
+  "&:not([hidden])": {
+    display: "flex"
+  },
+  flexDirection: "column",
+  width: "max-content",
+  minWidth: "min-content"
+});
 const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
   const {
     __unstable_margins: marginsProp,
@@ -5847,7 +5859,6 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
     arrowRef,
     arrowX,
     arrowY,
-    boundaryWidth,
     children,
     padding,
     placement,
@@ -5858,7 +5869,7 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
     strategy,
     style,
     tone,
-    width = "auto",
+    width,
     x: xProp,
     y: yProp,
     ...restProps
@@ -5873,9 +5884,10 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
     position: strategy,
     top: y,
     left: x,
+    width,
     zIndex,
     ...style
-  }), [strategy, style, x, y, zIndex]);
+  }), [strategy, style, width, x, y, zIndex]);
   const staticSide = placement && FLOATING_STATIC_SIDES[placement.split("-")[0]];
   const arrowStyle = useMemo(() => {
     const style2 = {
@@ -5888,10 +5900,9 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
     return style2;
   }, [arrowX, arrowY, staticSide]);
   return /* @__PURE__ */jsxs(Root$i, {
+    "data-ui": "Popover",
     ...restProps,
-    $boundaryWidth: boundaryWidth,
     "data-placement": placement,
-    "data-ui": "Popover",
     radius,
     ref,
     scheme,
@@ -5899,14 +5910,17 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
     sizing: "border",
     style: rootStyle,
     tone,
-    children: [/* @__PURE__ */jsx(PopoverContainer, {
+    children: [/* @__PURE__ */jsx(Flex, {
       "data-ui": "Popover__wrapper",
+      direction: "column",
       flex: 1,
       overflow,
-      padding,
-      sizing: "border",
-      width,
-      children
+      children: /* @__PURE__ */jsx(Flex, {
+        direction: "column",
+        flex: 1,
+        padding,
+        children
+      })
     }), arrow && /* @__PURE__ */jsx(PopoverArrow, {
       ref: arrowRef,
       style: arrowStyle
@@ -5914,19 +5928,8 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
   });
 }));
 PopoverCard.displayName = "PopoverCard";
-const key$4 = Symbol.for("@sanity/ui/context/popover");
-globalScope[key$4] = globalScope[key$4] || createContext(null);
-const PopoverContext = globalScope[key$4];
-const useOnForcedUpdate = eventHandler => {
-  const contextValue = useContext(PopoverContext);
-  useEffect(() => {
-    if ((contextValue == null ? void 0 : contextValue.lastUpdateId) !== null) {
-      eventHandler == null ? void 0 : eventHandler();
-    }
-  }, [contextValue == null ? void 0 : contextValue.lastUpdateId]);
-};
 const Popover = memo(forwardRef(function Popover2(props, ref) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g;
   const theme = useTheme();
   const boundaryElementContext = useBoundaryElement();
   const {
@@ -5938,7 +5941,8 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     content,
     disabled,
     fallbackPlacements,
-    matchReferenceWidth: matchReferenceWidthProp,
+    matchReferenceWidth,
+    floatingBoundary = (_a = props.boundaryElement) != null ? _a : boundaryElementContext.element,
     open,
     overflow = "hidden",
     padding: paddingProp,
@@ -5946,28 +5950,65 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     portal,
     preventOverflow = true,
     radius: radiusProp = 3,
+    referenceBoundary = (_b = props.boundaryElement) != null ? _b : boundaryElementContext.element,
     referenceElement,
     scheme,
     shadow: shadowProp = 3,
     tone = "inherit",
     width: widthProp = "auto",
-    zOffset: zOffsetProp = (_a = theme.sanity.layer) == null ? void 0 : _a.popover.zOffset,
+    zOffset: zOffsetProp = (_c = theme.sanity.layer) == null ? void 0 : _c.popover.zOffset,
+    updateRef,
     ...restProps
   } = props;
-  const boundarySize = (_b = useElementSize(boundaryElement)) == null ? void 0 : _b.border;
+  const boundarySize = (_d = useElementSize(boundaryElement)) == null ? void 0 : _d.border;
   const padding = useArrayProp(paddingProp);
   const radius = useArrayProp(radiusProp);
   const shadow = useArrayProp(shadowProp);
-  const width = useArrayProp(widthProp);
+  const widthArrayProp = useArrayProp(widthProp);
   const zOffset = useArrayProp(zOffsetProp);
   const forwardedRef = useForwardedRef(ref);
   const arrowRef = useRef(null);
   const rootBoundary = "viewport";
+  const mediaIndex = useMediaIndex();
+  const boundaryWidth = constrainSize || preventOverflow ? boundarySize == null ? void 0 : boundarySize.width : void 0;
+  const width = calcCurrentWidth({
+    mediaIndex,
+    theme,
+    width: widthArrayProp
+  });
+  const widthRef = useRef(width);
+  useEffect(() => {
+    widthRef.current = width;
+  }, [width]);
+  const maxWidth = calcMaxWidth({
+    boundaryWidth,
+    currentWidth: width
+  });
+  const maxWidthRef = useRef(maxWidth);
+  useEffect(() => {
+    maxWidthRef.current = maxWidth;
+  }, [maxWidth]);
+  const referenceWidthRef = useRef();
+  useEffect(() => {
+    const floatingElement = forwardedRef.current;
+    if (!open || !floatingElement) return;
+    const referenceWidth = referenceWidthRef.current;
+    if (matchReferenceWidth) {
+      if (referenceWidth !== void 0) {
+        floatingElement.style.width = "".concat(referenceWidth, "px");
+      }
+    } else if (width !== void 0) {
+      floatingElement.style.width = "".concat(width, "px");
+    }
+    if (typeof maxWidth === "number") {
+      floatingElement.style.maxWidth = "".concat(maxWidth, "px");
+    }
+  }, [width, forwardedRef, matchReferenceWidth, maxWidth, open]);
   const middleware = useMemo(() => {
     const ret = [];
     if (constrainSize || preventOverflow) {
       ret.push(flip({
-        boundary: boundaryElement || void 0,
+        boundary: floatingBoundary || void 0,
         fallbackPlacements,
         padding: DEFAULT_POPOVER_PADDING,
         rootBoundary
@@ -5976,7 +6017,7 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     ret.push(offset({
       mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0
     }));
-    if (constrainSize || matchReferenceWidthProp) {
+    if (constrainSize || matchReferenceWidth) {
       ret.push(size({
         apply(_ref21) {
           let {
@@ -5985,24 +6026,29 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
             elements,
             referenceWidth
           } = _ref21;
-          if (matchReferenceWidthProp) {
+          referenceWidthRef.current = referenceWidth;
+          const _currentWidth = widthRef.current;
+          const _maxWidth = maxWidthRef.current;
+          if (matchReferenceWidth) {
             elements.floating.style.width = "".concat(referenceWidth, "px");
+          } else if (_currentWidth !== void 0) {
+            elements.floating.style.width = "".concat(_currentWidth, "px");
           }
           if (constrainSize) {
-            elements.floating.style.maxWidth = "".concat(availableWidth, "px");
+            elements.floating.style.maxWidth = "".concat(Math.min(availableWidth, _maxWidth != null ? _maxWidth : Infinity), "px");
             elements.floating.style.maxHeight = "".concat(availableHeight, "px");
           }
         },
-        boundaryElement,
+        boundaryElement: floatingBoundary || void 0,
         constrainSize,
         margins,
-        matchReferenceWidth: matchReferenceWidthProp,
+        matchReferenceWidth,
         padding: DEFAULT_POPOVER_PADDING
       }));
     }
     if (preventOverflow) {
       ret.push(shift({
-        boundary: boundaryElement || void 0,
+        boundary: floatingBoundary || void 0,
         rootBoundary,
         padding: DEFAULT_POPOVER_PADDING
       }));
@@ -6014,49 +6060,44 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
       }));
     }
     ret.push(hide({
-      boundary: boundaryElement || void 0,
+      boundary: referenceBoundary || void 0,
       padding: DEFAULT_POPOVER_PADDING,
       strategy: "referenceHidden"
     }));
     return ret;
-  }, [arrowProp, boundaryElement, constrainSize, fallbackPlacements, margins, matchReferenceWidthProp, preventOverflow]);
-  const floatingProps = useMemo(() => ({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: autoUpdate
-  }), [middleware, placementProp]);
+  }, [arrowProp, constrainSize, fallbackPlacements, floatingBoundary, margins, matchReferenceWidth, preventOverflow, referenceBoundary]);
   const {
     x,
     y,
-    placement,
-    reference: referenceRef,
-    floating: floatingRef,
-    update: floatingUpdate,
     middlewareData,
-    strategy
-  } = useFloating(floatingProps);
-  const handleForcedUpdate = useCallback(() => {
-    floatingUpdate();
-  }, [floatingUpdate]);
-  const referenceHidden = (_c = middlewareData.hide) == null ? void 0 : _c.referenceHidden;
-  const arrowX = (_d = middlewareData.arrow) == null ? void 0 : _d.x;
-  const arrowY = (_e = middlewareData.arrow) == null ? void 0 : _e.y;
+    placement,
+    refs,
+    strategy,
+    update
+  } = useFloating({
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: autoUpdate
+  });
+  const referenceHidden = (_e = middlewareData.hide) == null ? void 0 : _e.referenceHidden;
+  const arrowX = (_f = middlewareData.arrow) == null ? void 0 : _f.x;
+  const arrowY = (_g = middlewareData.arrow) == null ? void 0 : _g.y;
   const setArrow = useCallback(arrowEl => {
     arrowRef.current = arrowEl;
   }, []);
   const setFloating = useCallback(node => {
     forwardedRef.current = node;
-    floatingRef(node);
-  }, [floatingRef, forwardedRef]);
+    refs.setFloating(node);
+  }, [forwardedRef, refs]);
   const setReference = useCallback(node => {
-    referenceRef(node);
+    refs.setReference(node);
     const childRef = childProp == null ? void 0 : childProp.ref;
     if (typeof childRef === "function") {
       childRef(node);
     } else if (childRef) {
       childRef.current = node;
     }
-  }, [childProp, referenceRef]);
+  }, [childProp, refs]);
   const child = useMemo(() => {
     if (!childProp || referenceElement) return null;
     return cloneElement(childProp, {
@@ -6064,9 +6105,17 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     });
   }, [childProp, referenceElement, setReference]);
   useEffect(() => {
-    referenceRef(referenceElement || null);
-  }, [referenceRef, referenceElement]);
-  useOnForcedUpdate(handleForcedUpdate);
+    if (updateRef) {
+      if (typeof updateRef === "function") {
+        updateRef(update);
+      } else if (updateRef) {
+        updateRef.current = update;
+      }
+    }
+  }, [update, updateRef]);
+  useEffect(() => {
+    refs.setReference(referenceElement || null);
+  }, [referenceElement, refs]);
   if (disabled) {
     return childProp || /* @__PURE__ */jsx(Fragment, {});
   }
@@ -6079,7 +6128,6 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
       arrowRef: setArrow,
       arrowX,
       arrowY,
-      boundaryWidth: preventOverflow ? boundarySize == null ? void 0 : boundarySize.width : void 0,
       hidden: referenceHidden,
       overflow,
       padding,
@@ -6090,9 +6138,9 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
       shadow,
       strategy,
       tone,
+      width: matchReferenceWidth ? referenceWidthRef.current : width,
       x,
       y,
-      width,
       children: content
     })
   });
@@ -6106,37 +6154,8 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
   });
 }));
 Popover.displayName = "Popover";
-const PopoverProvider = _ref22 => {
-  let {
-    children
-  } = _ref22;
-  const [lastUpdateId, setUpdateId] = useState(null);
-  const forceUpdate = useCallback(() => {
-    const newId = Math.random().toString(36).substr(2, 9);
-    setUpdateId(newId);
-  }, []);
-  const value = useMemo(() => ({
-    version: 0,
-    lastUpdateId,
-    forceUpdate
-  }), [lastUpdateId, forceUpdate]);
-  return /* @__PURE__ */jsx(PopoverContext.Provider, {
-    value,
-    children
-  });
-};
-function usePopover() {
-  const value = useContext(PopoverContext);
-  if (!value) {
-    throw new Error("usePopover(): missing context value");
-  }
-  if (!isRecord(value) || value.version !== 0) {
-    throw new Error("usePopover(): the context value is not compatible");
-  }
-  return value;
-}
 function radioBaseStyle() {
-  return css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n    position: relative;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n\n    &[data-read-only] {\n      outline: 1px solid red;\n    }\n  "])));
+  return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n    position: relative;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n\n    &[data-read-only] {\n      outline: 1px solid red;\n    }\n  "])));
 }
 function inputElementStyle(props) {
   const {
@@ -6148,7 +6167,7 @@ function inputElementStyle(props) {
   } = theme.sanity;
   const color = theme.sanity.color.input;
   const dist = (input.radio.size - input.radio.markSize) / 2;
-  return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n    appearance: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n    border-radius: ", ";\n    border: none;\n\n    /* enabled */\n    & + span {\n      display: block;\n      position: relative;\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      box-shadow: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        height: ", ";\n        width: ", ";\n        border-radius: ", ";\n        background: ", ";\n        opacity: 0;\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span::after {\n      opacity: 1;\n    }\n\n    /* read only */\n    &[data-read-only] + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n  "])), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), color.default.enabled.bg, focusRingBorderStyle({
+  return css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n    appearance: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n    border-radius: ", ";\n    border: none;\n\n    /* enabled */\n    & + span {\n      display: block;\n      position: relative;\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      box-shadow: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        height: ", ";\n        width: ", ";\n        border-radius: ", ";\n        background: ", ";\n        opacity: 0;\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span::after {\n      opacity: 1;\n    }\n\n    /* read only */\n    &[data-read-only] + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n  "])), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), color.default.enabled.bg, focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), color.default.enabled.fg, focusRingStyle({
@@ -6190,14 +6209,14 @@ const Radio = forwardRef(function Radio2(props, forwardedRef) {
   });
 });
 function rootStyle() {
-  return css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function inputBaseStyle(props) {
   const {
     theme
   } = props;
   const font = theme.sanity.fonts.text;
-  return css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n    -webkit-font-smoothing: antialiased;\n    appearance: none;\n    border: 0;\n    font-family: ", ";\n    color: inherit;\n    width: 100%;\n    outline: none;\n    margin: 0;\n\n    &:disabled {\n      opacity: 1;\n    }\n  "])), font.family);
+  return css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n    -webkit-font-smoothing: antialiased;\n    appearance: none;\n    border: 0;\n    font-family: ", ";\n    color: inherit;\n    width: 100%;\n    outline: none;\n    margin: 0;\n\n    &:disabled {\n      opacity: 1;\n    }\n  "])), font.family);
 }
 function inputColorStyle(props) {
   const {
@@ -6208,7 +6227,7 @@ function inputColorStyle(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.input;
-  return css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n    /* enabled */\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n\n    /* hovered */\n    @media (hover: hover) {\n      &:not(:disabled):hover {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus {\n      box-shadow: ", ";\n    }\n\n    /* read-only */\n    &[data-read-only] {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
+  return css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n    /* enabled */\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n\n    /* hovered */\n    @media (hover: hover) {\n      &:not(:disabled):hover {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus {\n      box-shadow: ", ";\n    }\n\n    /* read-only */\n    &[data-read-only] {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }), color.default.hovered.bg, color.default.hovered.fg, focusRingBorderStyle({
@@ -6252,7 +6271,7 @@ function iconBoxStyle(props) {
     theme
   } = props;
   const color = theme.sanity.color.input;
-  return css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    /* enabled */\n    --card-fg-color: ", ";\n\n    /* hover */\n    @media (hover: hover) {\n      select:not(disabled):not(:read-only):hover + && {\n        --card-fg-color: ", ";\n      }\n    }\n\n    /* disabled */\n    select:disabled + && {\n      --card-fg-color: ", ";\n    }\n\n    /* read-only */\n    select[data-read-only] + && {\n      --card-fg-color: ", ";\n    }\n  "])), color.default.enabled.fg, color.default.hovered.fg, color.default.disabled.fg, color.default.readOnly.fg);
+  return css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    /* enabled */\n    --card-fg-color: ", ";\n\n    /* hover */\n    @media (hover: hover) {\n      select:not(disabled):not(:read-only):hover + && {\n        --card-fg-color: ", ";\n      }\n    }\n\n    /* disabled */\n    select:disabled + && {\n      --card-fg-color: ", ";\n    }\n\n    /* read-only */\n    select[data-read-only] + && {\n      --card-fg-color: ", ";\n    }\n  "])), color.default.enabled.fg, color.default.hovered.fg, color.default.disabled.fg, color.default.readOnly.fg);
 }
 const selectStyle = {
   root: rootStyle,
@@ -6340,10 +6359,10 @@ const Stack = forwardRef(function Stack2(props, ref) {
   });
 });
 function switchBaseStyles() {
-  return css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function switchInputStyles() {
-  return css(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    padding: 0;\n    margin: 0;\n\n    /* Place the input element above the representation element */\n    z-index: 1;\n  "])));
+  return css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    padding: 0;\n    margin: 0;\n\n    /* Place the input element above the representation element */\n    z-index: 1;\n  "])));
 }
 function switchRepresentationStyles(props) {
   const {
@@ -6354,7 +6373,7 @@ function switchRepresentationStyles(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.button.default;
-  return css(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
+  return css(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
     focusRing
   }), color.positive.enabled.bg, color.positive.enabled.fg, color.default.hovered.bg, color.default.hovered.fg, color.positive.hovered.bg, color.positive.hovered.fg, color.default.disabled.bg, color.default.disabled.fg);
 }
@@ -6365,7 +6384,7 @@ function switchTrackStyles(props) {
   const {
     input
   } = theme.sanity;
-  return css(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n    &:not([hidden]) {\n      display: block;\n    }\n    background-color: var(--switch-bg-color);\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n  "])), rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2));
+  return css(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n    &:not([hidden]) {\n      display: block;\n    }\n    background-color: var(--switch-bg-color);\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n  "])), rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2));
 }
 function switchThumbStyles(props) {
   const {
@@ -6382,7 +6401,7 @@ function switchThumbStyles(props) {
   const checkedOffset = trackWidth - trackPadding * 2 - size;
   const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding;
   const checked = $indeterminate !== true && props.$checked === true;
-  return css(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n    &:not([hidden]) {\n      display: block;\n    }\n    position: absolute;\n    left: ", ";\n    top: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    transition-property: transform;\n    transition-duration: ", "ms;\n    transition-timing-function: ", ";\n    background: var(--switch-fg-color);\n    transform: translate3d(0, 0, 0);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && css(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
+  return css(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n    &:not([hidden]) {\n      display: block;\n    }\n    position: absolute;\n    left: ", ";\n    top: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    transition-property: transform;\n    transition-duration: ", "ms;\n    transition-timing-function: ", ";\n    background: var(--switch-fg-color);\n    transform: translate3d(0, 0, 0);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && css(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
 }
 const Root$e = styled.span(switchBaseStyles);
 const Input$2 = styled.input(switchInputStyles);
@@ -6427,7 +6446,7 @@ const Switch = forwardRef(function Switch2(props, forwardedRef) {
   });
 });
 const Root$d = styled.span(textInputRootStyle);
-const InputRoot$1 = styled.span(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+const InputRoot$1 = styled.span(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
 const Input$1 = styled.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 const Presentation$1 = styled.div(responsiveRadiusStyle, textInputRepresentationStyle);
 const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
@@ -6477,18 +6496,18 @@ const CLEAR_BUTTON_BOX_STYLE = {
 const Root$c = styled(Card).attrs({
   forwardedAs: "span"
 })(textInputRootStyle);
-const InputRoot = styled.span(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+const InputRoot = styled.span(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
 const Prefix = styled(Card).attrs({
   forwardedAs: "span"
-})(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
+})(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
 const Suffix = styled(Card).attrs({
   forwardedAs: "span"
-})(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
+})(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
 const Input = styled.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 const Presentation = styled.span(responsiveRadiusStyle, textInputRepresentationStyle);
-const LeftBox = styled(Box)(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
-const RightBox = styled(Box)(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
-const RightCard = styled(Card)(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const LeftBox = styled(Box)(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
+const RightBox = styled(Box)(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const RightCard = styled(Card)(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
 const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
   const {
     border = true,
@@ -6633,9 +6652,9 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
     }), suffixNode]
   });
 });
-const Root$b = styled.div(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n  position: absolute;\n  pointer-events: none;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 7.5px 7.5px;\n  }\n\n  /* position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.5px;\n  } */\n\n  [data-placement^='top'] > & {\n    bottom: -27px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
-const Border = styled.path(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
-const Shape = styled.path(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
+const Root$b = styled.div(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["\n  position: absolute;\n  pointer-events: none;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 7.5px 7.5px;\n  }\n\n  /* position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.5px;\n  } */\n\n  [data-placement^='top'] > & {\n    bottom: -27px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
+const Border = styled.path(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
+const Shape = styled.path(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
 const TooltipArrow = forwardRef(function TooltipArrow2(props, ref) {
   const {
     ...restProps
@@ -6656,7 +6675,7 @@ const TooltipArrow = forwardRef(function TooltipArrow2(props, ref) {
     })
   });
 });
-const Root$a = styled(Layer)(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
+const Root$a = styled(Layer)(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
 const Tooltip = forwardRef(function Tooltip2(props, ref) {
   var _a, _b, _c;
   const boundaryElementContext = useBoundaryElement();
@@ -6706,9 +6725,8 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     x,
     y,
     placement,
-    reference,
-    floating,
     middlewareData,
+    refs,
     update,
     strategy
   } = useFloating({
@@ -6760,15 +6778,15 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   useEffect(() => {
     if (!content) setIsOpen(false);
   }, [content]);
-  useEffect(() => reference(referenceElement), [reference, referenceElement]);
+  useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]);
   const setArrow = useCallback(arrowEl => {
     arrowRef.current = arrowEl;
     update();
   }, [update]);
   const setFloating = useCallback(node => {
     forwardedRef.current = node;
-    floating(node);
-  }, [floating, forwardedRef]);
+    refs.setFloating(node);
+  }, [forwardedRef, refs]);
   const childRef = childProp == null ? void 0 : childProp.ref;
   const setReference = useCallback(node => {
     if (typeof childRef === "function") {
@@ -6818,10 +6836,10 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     })]
   });
 });
-const Root$9 = styled.div(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n  line-height: 0;\n"])));
-const ListBox = styled(Box)(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n  & > ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n"])));
-const rotate = keyframes(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-const AnimatedSpinnerIcon = styled(SpinnerIcon)(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
+const Root$9 = styled.div(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n  line-height: 0;\n"])));
+const ListBox = styled(Box)(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n  & > ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n"])));
+const rotate = keyframes(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+const AnimatedSpinnerIcon = styled(SpinnerIcon)(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
 function AutocompleteOption(props) {
   const {
     children,
@@ -6966,10 +6984,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     query,
     value
   } = state;
-  const defaultRenderOption = useCallback(_ref23 => {
+  const defaultRenderOption = useCallback(_ref22 => {
     let {
       value: value2
-    } = _ref23;
+    } = _ref22;
     return /* @__PURE__ */jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
@@ -7345,8 +7363,8 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
   });
 });
 const Autocomplete = InnerAutocomplete;
-const Root$8 = styled.ol(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  list-style: none;\n  align-items: center;\n  white-space: nowrap;\n  line-height: 0;\n"])));
-const ExpandButton = styled(Button)(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["\n  appearance: none;\n  margin: -4px;\n"])));
+const Root$8 = styled.ol(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  list-style: none;\n  align-items: center;\n  white-space: nowrap;\n  line-height: 0;\n"])));
+const ExpandButton = styled(Button)(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n  appearance: none;\n  margin: -4px;\n"])));
 const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
   const {
     children,
@@ -7416,10 +7434,10 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
     }, itemIndex))
   });
 });
-function dialogStyle(_ref24) {
+function dialogStyle(_ref23) {
   let {
     theme
-  } = _ref24;
+  } = _ref23;
   const color = theme.sanity.color.base;
   return {
     "&:not([hidden])": {
@@ -7461,12 +7479,12 @@ function isTargetWithinScope(boundaryElement, portalElement, target) {
   return containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
 const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
-const DialogContainer = styled(Container)(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
-const DialogCardRoot = styled(Card)(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  overflow: hidden;\n  overflow: clip;\n"])));
-const DialogLayout = styled(Flex)(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
-const DialogHeader = styled(Card)(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 2;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    border-bottom: 1px solid var(--card-hairline-soft-color);\n  }\n"])));
-const DialogContent = styled(Box)(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
-const DialogFooter = styled(Box)(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 3;\n  border-top: 1px solid var(--card-hairline-soft-color);\n"])));
+const DialogContainer = styled(Container)(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
+const DialogCardRoot = styled(Card)(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  overflow: hidden;\n  overflow: clip;\n"])));
+const DialogLayout = styled(Flex)(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
+const DialogHeader = styled(Card)(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 2;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    border-bottom: 1px solid var(--card-hairline-soft-color);\n  }\n"])));
+const DialogContent = styled(Box)(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
+const DialogFooter = styled(Box)(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 3;\n  border-top: 1px solid var(--card-hairline-soft-color);\n"])));
 const DialogCard = forwardRef(function DialogCard2(props, ref) {
   var _a;
   const {
@@ -7710,8 +7728,8 @@ function DialogProvider(props) {
     children
   });
 }
-const Root$6 = styled.kbd(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n  font: inherit;\n"])));
-const Key = styled(KBD)(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
+const Root$6 = styled.kbd(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n  font: inherit;\n"])));
+const Key = styled(KBD)(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
 const Hotkeys = forwardRef(function Hotkeys2(props, ref) {
   const {
     fontSize,
@@ -7932,7 +7950,7 @@ function useMenuController(props) {
     setRootElement
   };
 }
-const Root$5 = styled(Box)(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n  outline: none;\n  overflow: auto;\n"])));
+const Root$5 = styled(Box)(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["\n  outline: none;\n  overflow: auto;\n"])));
 const Menu = forwardRef(function Menu2(props, ref) {
   const {
     children,
@@ -8029,6 +8047,7 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     id,
     menu: menuProp,
     onClose,
+    onOpen,
     placement: deprecated_placement,
     popoverScheme: deprecated_popoverScheme,
     portal: deprecated_portal = true,
@@ -8041,6 +8060,11 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
   const [buttonElement, setButtonElement] = useState(null);
   const [menuElements, setChildMenuElements] = useState([]);
   const openRef = useRef(open);
+  useEffect(() => {
+    if (onOpen && open && !openRef.current) {
+      onOpen();
+    }
+  }, [onOpen, open]);
   useEffect(() => {
     if (onClose && !open && openRef.current) {
       onClose();
@@ -8159,9 +8183,9 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     children: button || /* @__PURE__ */jsx(Fragment, {})
   });
 });
-const MenuDivider = styled.hr(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
+const MenuDivider = styled.hr(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
 function selectableBaseStyle() {
-  return css(_templateObject76 || (_templateObject76 = _taggedTemplateLiteral(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
+  return css(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
 }
 function selectableColorStyle(props) {
   var _a, _b;
@@ -8175,7 +8199,7 @@ function selectableColorStyle(props) {
     selectable
   } = theme.sanity.color;
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return css(_templateObject77 || (_templateObject77 = _taggedTemplateLiteral(["\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n    outline: none;\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[aria-pressed='true'] {\n          ", "\n        }\n\n        &[data-selected],\n        &[aria-selected='true'] > & {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    ", "\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.card) == null ? void 0 : _b.root);
+  return css(_templateObject76 || (_templateObject76 = _taggedTemplateLiteral(["\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n    outline: none;\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[aria-pressed='true'] {\n          ", "\n        }\n\n        &[data-selected],\n        &[aria-selected='true'] > & {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    ", "\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.card) == null ? void 0 : _b.root);
 }
 const Selectable = styled(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 function useMenu() {
@@ -8437,18 +8461,18 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     })]
   });
 });
-const keyframe = keyframes(_templateObject78 || (_templateObject78 = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
-const animation = css(_templateObject79 || (_templateObject79 = _taggedTemplateLiteral(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
-const skeletonStyle = css(_templateObject80 || (_templateObject80 = _taggedTemplateLiteral(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref25 => {
+const keyframe = keyframes(_templateObject77 || (_templateObject77 = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
+const animation = css(_templateObject78 || (_templateObject78 = _taggedTemplateLiteral(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
+const skeletonStyle = css(_templateObject79 || (_templateObject79 = _taggedTemplateLiteral(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref24 => {
   let {
     $visible
-  } = _ref25;
+  } = _ref24;
   return $visible ? 1 : 0;
-}, _ref26 => {
+}, _ref25 => {
   let {
     $animated
-  } = _ref26;
-  return $animated ? animation : css(_templateObject81 || (_templateObject81 = _taggedTemplateLiteral(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
+  } = _ref25;
+  return $animated ? animation : css(_templateObject80 || (_templateObject80 = _taggedTemplateLiteral(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
 });
 const Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle);
 const Skeleton = forwardRef(function Skeleton2(props, ref) {
@@ -8478,12 +8502,12 @@ const Skeleton = forwardRef(function Skeleton2(props, ref) {
     ref
   });
 });
-const Root$3 = styled(Skeleton)(_ref27 => {
+const Root$3 = styled(Skeleton)(_ref26 => {
   let {
     $size,
     $style,
     theme
-  } = _ref27;
+  } = _ref26;
   const {
     media
   } = theme.sanity;
@@ -8665,8 +8689,8 @@ const ROLES = {
   success: "alert",
   info: "alert"
 };
-const Root$2 = styled(Card)(_templateObject82 || (_templateObject82 = _taggedTemplateLiteral(["\n  pointer-events: all;\n"])));
-const TextBox = styled(Flex)(_templateObject83 || (_templateObject83 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n"])));
+const Root$2 = styled(Card)(_templateObject81 || (_templateObject81 = _taggedTemplateLiteral(["\n  pointer-events: all;\n"])));
+const TextBox = styled(Flex)(_templateObject82 || (_templateObject82 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n"])));
 function Toast(props) {
   const {
     closable,
@@ -8726,8 +8750,8 @@ function useMounted() {
 const key$1 = Symbol.for("@sanity/ui/context/toast");
 globalScope[key$1] = globalScope[key$1] || createContext(null);
 const ToastContext = globalScope[key$1];
-const Root$1 = styled(Layer)(_templateObject84 || (_templateObject84 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n"])));
-const ToastContainer = styled.div(_templateObject85 || (_templateObject85 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  max-width: 420px;\n  width: 100%;\n"])));
+const Root$1 = styled(Layer)(_templateObject83 || (_templateObject83 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n"])));
+const ToastContainer = styled.div(_templateObject84 || (_templateObject84 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  max-width: 420px;\n  width: 100%;\n"])));
 let toastId = 0;
 function ToastProvider(props) {
   const {
@@ -8804,12 +8828,12 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsx(AnimatePresence, {
             initial: false,
-            children: state.map(_ref28 => {
+            children: state.map(_ref27 => {
               let {
                 dismiss,
                 id,
                 params
-              } = _ref28;
+              } = _ref27;
               return /* @__PURE__ */jsx(motion.div, {
                 animate: {
                   opacity: 1,
@@ -9088,7 +9112,7 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
 }));
 Tree.displayName = "Tree";
 function treeItemRootStyle() {
-  return css(_templateObject86 || (_templateObject86 = _taggedTemplateLiteral(["\n    &[role='none'] > [role='treeitem'] {\n      outline: none;\n      cursor: default;\n      border-radius: 3px;\n\n      &:focus {\n        position: relative;\n      }\n    }\n\n    &[role='treeitem'] {\n      outline: none;\n\n      & > div {\n        cursor: default;\n        border-radius: 3px;\n      }\n\n      &:focus > div {\n        position: relative;\n      }\n    }\n  "])));
+  return css(_templateObject85 || (_templateObject85 = _taggedTemplateLiteral(["\n    &[role='none'] > [role='treeitem'] {\n      outline: none;\n      cursor: default;\n      border-radius: 3px;\n\n      &:focus {\n        position: relative;\n      }\n    }\n\n    &[role='treeitem'] {\n      outline: none;\n\n      & > div {\n        cursor: default;\n        border-radius: 3px;\n      }\n\n      &:focus > div {\n        position: relative;\n      }\n    }\n  "])));
 }
 function treeItemRootColorStyle(props) {
   const {
@@ -9101,7 +9125,7 @@ function treeItemRootColorStyle(props) {
     selectable
   } = theme.sanity.color;
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return css(_templateObject87 || (_templateObject87 = _taggedTemplateLiteral(["\n    /* <div role=\"none\"><a data-ui=\"TreeItem__box\" role=\"treeitem\" tabIndex=\"0\"></div> */\n    &[role='none'] {\n      & > [role='treeitem'] {\n        ", "\n\n        background-color: var(--card-bg-color);\n        color: var(--treeitem-fg-color);\n      }\n\n      &[data-selected] > [role='treeitem'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {\n          ", "\n        }\n\n        & > [role='treeitem']:focus {\n          ", "\n        }\n      }\n    }\n\n    /* <div role=\"treeitem\" tabIndex=\"0\"><div data-ui=\"TreeItem__box\"></div> */\n    &[role='treeitem'] {\n      & > [data-ui='TreeItem__box'] {\n        ", "\n\n        background-color: var(--card-bg-color);\n        color: var(--card-fg-color);\n      }\n\n      &[data-selected] > [data-ui='TreeItem__box'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {\n          ", "\n        }\n\n        &:focus > [data-ui='TreeItem__box'] {\n          ", "\n        }\n      }\n    }\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected));
+  return css(_templateObject86 || (_templateObject86 = _taggedTemplateLiteral(["\n    /* <div role=\"none\"><a data-ui=\"TreeItem__box\" role=\"treeitem\" tabIndex=\"0\"></div> */\n    &[role='none'] {\n      & > [role='treeitem'] {\n        ", "\n\n        background-color: var(--card-bg-color);\n        color: var(--treeitem-fg-color);\n      }\n\n      &[data-selected] > [role='treeitem'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {\n          ", "\n        }\n\n        & > [role='treeitem']:focus {\n          ", "\n        }\n      }\n    }\n\n    /* <div role=\"treeitem\" tabIndex=\"0\"><div data-ui=\"TreeItem__box\"></div> */\n    &[role='treeitem'] {\n      & > [data-ui='TreeItem__box'] {\n        ", "\n\n        background-color: var(--card-bg-color);\n        color: var(--card-fg-color);\n      }\n\n      &[data-selected] > [data-ui='TreeItem__box'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {\n          ", "\n        }\n\n        &:focus > [data-ui='TreeItem__box'] {\n          ", "\n        }\n      }\n    }\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected));
 }
 function treeItemBoxStyle(props) {
   const {
@@ -9111,7 +9135,7 @@ function treeItemBoxStyle(props) {
   const {
     space
   } = theme.sanity;
-  return css(_templateObject88 || (_templateObject88 = _taggedTemplateLiteral(["\n    padding-left: ", ";\n\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])), rem(space[2] * $level));
+  return css(_templateObject87 || (_templateObject87 = _taggedTemplateLiteral(["\n    padding-left: ", ";\n\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])), rem(space[2] * $level));
 }
 function useTree() {
   const tree = useContext(TreeContext);
@@ -9142,7 +9166,7 @@ const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle));
 const TreeItemBox = styled(Box).attrs({
   forwardedAs: "a"
 })(treeItemBoxStyle);
-const ToggleArrowText = styled(Text)(_templateObject89 || (_templateObject89 = _taggedTemplateLiteral(["\n  & > svg {\n    transition: transform 100ms;\n  }\n"])));
+const ToggleArrowText = styled(Text)(_templateObject88 || (_templateObject88 = _taggedTemplateLiteral(["\n  & > svg {\n    transition: transform 100ms;\n  }\n"])));
 const TreeItem = memo(function TreeItem2(props) {
   const {
     children,
@@ -9289,5 +9313,5 @@ const TreeItem = memo(function TreeItem2(props) {
     })]
   });
 });
-export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, PopoverProvider, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePopover, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useToast, useTree };
+export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useToast, useTree };
 //# sourceMappingURL=index.esm.js.map