@sanity/ui 1.5.0 → 1.6.0

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-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) } })); }
 Object.defineProperty(exports, '__esModule', {
   value: true
@@ -5815,6 +5815,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__default.default.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__default.default.path(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
 const ShapePath = styled__default.default.path(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
@@ -5837,22 +5857,14 @@ const PopoverArrow = react.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 = react.memo(styled__default.default(Card)(popoverCardStyle));
-const PopoverContainer = react.memo(styled__default.default(Container)(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n  max-height: inherit;\n  max-width: inherit;\n"]))));
+const Root$i = styled__default.default(Card)({
+  "&:not([hidden])": {
+    display: "flex"
+  },
+  flexDirection: "column",
+  width: "max-content",
+  minWidth: "min-content"
+});
 const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref) {
   const {
     __unstable_margins: marginsProp,
@@ -5860,7 +5872,6 @@ const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref
     arrowRef,
     arrowX,
     arrowY,
-    boundaryWidth,
     children,
     padding,
     placement,
@@ -5871,7 +5882,7 @@ const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref
     strategy,
     style,
     tone,
-    width = "auto",
+    width,
     x: xProp,
     y: yProp,
     ...restProps
@@ -5886,9 +5897,10 @@ const PopoverCard = react.memo(react.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 = react.useMemo(() => {
     const style2 = {
@@ -5901,10 +5913,9 @@ const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref
     return style2;
   }, [arrowX, arrowY, staticSide]);
   return /* @__PURE__ */jsxRuntime.jsxs(Root$i, {
+    "data-ui": "Popover",
     ...restProps,
-    $boundaryWidth: boundaryWidth,
     "data-placement": placement,
-    "data-ui": "Popover",
     radius,
     ref,
     scheme,
@@ -5912,14 +5923,17 @@ const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref
     sizing: "border",
     style: rootStyle,
     tone,
-    children: [/* @__PURE__ */jsxRuntime.jsx(PopoverContainer, {
+    children: [/* @__PURE__ */jsxRuntime.jsx(Flex, {
       "data-ui": "Popover__wrapper",
+      direction: "column",
       flex: 1,
       overflow,
-      padding,
-      sizing: "border",
-      width,
-      children
+      children: /* @__PURE__ */jsxRuntime.jsx(Flex, {
+        direction: "column",
+        flex: 1,
+        padding,
+        children
+      })
     }), arrow && /* @__PURE__ */jsxRuntime.jsx(PopoverArrow, {
       ref: arrowRef,
       style: arrowStyle
@@ -5928,7 +5942,7 @@ const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref
 }));
 PopoverCard.displayName = "PopoverCard";
 const Popover = react.memo(react.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 {
@@ -5940,7 +5954,8 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
     content,
     disabled,
     fallbackPlacements,
-    matchReferenceWidth: matchReferenceWidthProp,
+    matchReferenceWidth,
+    floatingBoundary = (_a = props.boundaryElement) != null ? _a : boundaryElementContext.element,
     open,
     overflow = "hidden",
     padding: paddingProp,
@@ -5948,28 +5963,65 @@ const Popover = react.memo(react.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 = react.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 = react.useRef(width);
+  react.useEffect(() => {
+    widthRef.current = width;
+  }, [width]);
+  const maxWidth = calcMaxWidth({
+    boundaryWidth,
+    currentWidth: width
+  });
+  const maxWidthRef = react.useRef(maxWidth);
+  react.useEffect(() => {
+    maxWidthRef.current = maxWidth;
+  }, [maxWidth]);
+  const referenceWidthRef = react.useRef();
+  react.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 = react.useMemo(() => {
     const ret = [];
     if (constrainSize || preventOverflow) {
       ret.push(reactDom$1.flip({
-        boundary: boundaryElement || void 0,
+        boundary: floatingBoundary || void 0,
         fallbackPlacements,
         padding: DEFAULT_POPOVER_PADDING,
         rootBoundary
@@ -5978,7 +6030,7 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
     ret.push(reactDom$1.offset({
       mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0
     }));
-    if (constrainSize || matchReferenceWidthProp) {
+    if (constrainSize || matchReferenceWidth) {
       ret.push(size({
         apply(_ref21) {
           let {
@@ -5987,24 +6039,29 @@ const Popover = react.memo(react.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(reactDom$1.shift({
-        boundary: boundaryElement || void 0,
+        boundary: floatingBoundary || void 0,
         rootBoundary,
         padding: DEFAULT_POPOVER_PADDING
       }));
@@ -6016,45 +6073,44 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
       }));
     }
     ret.push(reactDom$1.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 = react.useMemo(() => ({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: reactDom$1.autoUpdate
-  }), [middleware, placementProp]);
+  }, [arrowProp, constrainSize, fallbackPlacements, floatingBoundary, margins, matchReferenceWidth, preventOverflow, referenceBoundary]);
   const {
     x,
     y,
-    placement,
-    reference: referenceRef,
-    floating: floatingRef,
     middlewareData,
-    strategy
-  } = reactDom$1.useFloating(floatingProps);
-  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
+  } = reactDom$1.useFloating({
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: reactDom$1.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 = react.useCallback(arrowEl => {
     arrowRef.current = arrowEl;
   }, []);
   const setFloating = react.useCallback(node => {
     forwardedRef.current = node;
-    floatingRef(node);
-  }, [floatingRef, forwardedRef]);
+    refs.setFloating(node);
+  }, [forwardedRef, refs]);
   const setReference = react.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 = react.useMemo(() => {
     if (!childProp || referenceElement) return null;
     return react.cloneElement(childProp, {
@@ -6062,8 +6118,17 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
     });
   }, [childProp, referenceElement, setReference]);
   react.useEffect(() => {
-    referenceRef(referenceElement || null);
-  }, [referenceRef, referenceElement]);
+    if (updateRef) {
+      if (typeof updateRef === "function") {
+        updateRef(update);
+      } else if (updateRef) {
+        updateRef.current = update;
+      }
+    }
+  }, [update, updateRef]);
+  react.useEffect(() => {
+    refs.setReference(referenceElement || null);
+  }, [referenceElement, refs]);
   if (disabled) {
     return childProp || /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
@@ -6076,7 +6141,6 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
       arrowRef: setArrow,
       arrowX,
       arrowY,
-      boundaryWidth: preventOverflow ? boundarySize == null ? void 0 : boundarySize.width : void 0,
       hidden: referenceHidden,
       overflow,
       padding,
@@ -6087,9 +6151,9 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
       shadow,
       strategy,
       tone,
+      width: matchReferenceWidth ? referenceWidthRef.current : width,
       x,
       y,
-      width,
       children: content
     })
   });
@@ -6104,7 +6168,7 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
 }));
 Popover.displayName = "Popover";
 function radioBaseStyle() {
-  return styled.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 styled.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 {
@@ -6116,7 +6180,7 @@ function inputElementStyle(props) {
   } = theme.sanity;
   const color = theme.sanity.color.input;
   const dist = (input.radio.size - input.radio.markSize) / 2;
-  return styled.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 styled.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({
@@ -6158,14 +6222,14 @@ const Radio = react.forwardRef(function Radio2(props, forwardedRef) {
   });
 });
 function rootStyle() {
-  return styled.css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.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 styled.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 styled.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 {
@@ -6176,7 +6240,7 @@ function inputColorStyle(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.input;
-  return styled.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 styled.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({
@@ -6220,7 +6284,7 @@ function iconBoxStyle(props) {
     theme
   } = props;
   const color = theme.sanity.color.input;
-  return styled.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 styled.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,
@@ -6308,10 +6372,10 @@ const Stack = react.forwardRef(function Stack2(props, ref) {
   });
 });
 function switchBaseStyles() {
-  return styled.css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function switchInputStyles() {
-  return styled.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 styled.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 {
@@ -6322,7 +6386,7 @@ function switchRepresentationStyles(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.button.default;
-  return styled.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 styled.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);
 }
@@ -6333,7 +6397,7 @@ function switchTrackStyles(props) {
   const {
     input
   } = theme.sanity;
-  return styled.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 styled.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 {
@@ -6350,7 +6414,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 styled.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 && styled.css(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && styled.css(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
+  return styled.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 && styled.css(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && styled.css(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
 }
 const Root$e = styled__default.default.span(switchBaseStyles);
 const Input$2 = styled__default.default.input(switchInputStyles);
@@ -6395,7 +6459,7 @@ const Switch = react.forwardRef(function Switch2(props, forwardedRef) {
   });
 });
 const Root$d = styled__default.default.span(textInputRootStyle);
-const InputRoot$1 = styled__default.default.span(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+const InputRoot$1 = styled__default.default.span(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
 const Input$1 = styled__default.default.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 const Presentation$1 = styled__default.default.div(responsiveRadiusStyle, textInputRepresentationStyle);
 const TextArea = react.forwardRef(function TextArea2(props, forwardedRef) {
@@ -6445,18 +6509,18 @@ const CLEAR_BUTTON_BOX_STYLE = {
 const Root$c = styled__default.default(Card).attrs({
   forwardedAs: "span"
 })(textInputRootStyle);
-const InputRoot = styled__default.default.span(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+const InputRoot = styled__default.default.span(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
 const Prefix = styled__default.default(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__default.default(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__default.default.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 const Presentation = styled__default.default.span(responsiveRadiusStyle, textInputRepresentationStyle);
-const LeftBox = styled__default.default(Box)(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
-const RightBox = styled__default.default(Box)(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
-const RightCard = styled__default.default(Card)(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const LeftBox = styled__default.default(Box)(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
+const RightBox = styled__default.default(Box)(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const RightCard = styled__default.default(Card)(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
 const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
   const {
     border = true,
@@ -6601,9 +6665,9 @@ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
     }), suffixNode]
   });
 });
-const Root$b = styled__default.default.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__default.default.path(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
-const Shape = styled__default.default.path(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
+const Root$b = styled__default.default.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__default.default.path(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
+const Shape = styled__default.default.path(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
 const TooltipArrow = react.forwardRef(function TooltipArrow2(props, ref) {
   const {
     ...restProps
@@ -6624,7 +6688,7 @@ const TooltipArrow = react.forwardRef(function TooltipArrow2(props, ref) {
     })
   });
 });
-const Root$a = styled__default.default(Layer)(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
+const Root$a = styled__default.default(Layer)(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
 const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
   var _a, _b, _c;
   const boundaryElementContext = useBoundaryElement();
@@ -6674,9 +6738,8 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     x,
     y,
     placement,
-    reference,
-    floating,
     middlewareData,
+    refs,
     update,
     strategy
   } = reactDom$1.useFloating({
@@ -6728,15 +6791,15 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
   react.useEffect(() => {
     if (!content) setIsOpen(false);
   }, [content]);
-  react.useEffect(() => reference(referenceElement), [reference, referenceElement]);
+  react.useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]);
   const setArrow = react.useCallback(arrowEl => {
     arrowRef.current = arrowEl;
     update();
   }, [update]);
   const setFloating = react.useCallback(node => {
     forwardedRef.current = node;
-    floating(node);
-  }, [floating, forwardedRef]);
+    refs.setFloating(node);
+  }, [forwardedRef, refs]);
   const childRef = childProp == null ? void 0 : childProp.ref;
   const setReference = react.useCallback(node => {
     if (typeof childRef === "function") {
@@ -6786,10 +6849,10 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     })]
   });
 });
-const Root$9 = styled__default.default.div(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n  line-height: 0;\n"])));
-const ListBox = styled__default.default(Box)(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n  & > ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n"])));
-const rotate = styled.keyframes(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-const AnimatedSpinnerIcon = styled__default.default(icons.SpinnerIcon)(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
+const Root$9 = styled__default.default.div(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n  line-height: 0;\n"])));
+const ListBox = styled__default.default(Box)(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n  & > ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n"])));
+const rotate = styled.keyframes(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+const AnimatedSpinnerIcon = styled__default.default(icons.SpinnerIcon)(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
 function AutocompleteOption(props) {
   const {
     children,
@@ -7313,8 +7376,8 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
   });
 });
 const Autocomplete = InnerAutocomplete;
-const Root$8 = styled__default.default.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__default.default(Button)(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["\n  appearance: none;\n  margin: -4px;\n"])));
+const Root$8 = styled__default.default.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__default.default(Button)(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n  appearance: none;\n  margin: -4px;\n"])));
 const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
   const {
     children,
@@ -7429,12 +7492,12 @@ function isTargetWithinScope(boundaryElement, portalElement, target) {
   return containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
 const Root$7 = styled__default.default(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
-const DialogContainer = styled__default.default(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__default.default(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__default.default(Flex)(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
-const DialogHeader = styled__default.default(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__default.default(Box)(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
-const DialogFooter = styled__default.default(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__default.default(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__default.default(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__default.default(Flex)(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
+const DialogHeader = styled__default.default(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__default.default(Box)(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
+const DialogFooter = styled__default.default(Box)(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 3;\n  border-top: 1px solid var(--card-hairline-soft-color);\n"])));
 const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
   var _a;
   const {
@@ -7678,8 +7741,8 @@ function DialogProvider(props) {
     children
   });
 }
-const Root$6 = styled__default.default.kbd(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n  font: inherit;\n"])));
-const Key = styled__default.default(KBD)(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
+const Root$6 = styled__default.default.kbd(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n  font: inherit;\n"])));
+const Key = styled__default.default(KBD)(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
 const Hotkeys = react.forwardRef(function Hotkeys2(props, ref) {
   const {
     fontSize,
@@ -7900,7 +7963,7 @@ function useMenuController(props) {
     setRootElement
   };
 }
-const Root$5 = styled__default.default(Box)(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n  outline: none;\n  overflow: auto;\n"])));
+const Root$5 = styled__default.default(Box)(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["\n  outline: none;\n  overflow: auto;\n"])));
 const Menu = react.forwardRef(function Menu2(props, ref) {
   const {
     children,
@@ -8133,9 +8196,9 @@ const MenuButton = react.forwardRef(function MenuButton2(props, ref) {
     children: button || /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {})
   });
 });
-const MenuDivider = styled__default.default.hr(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
+const MenuDivider = styled__default.default.hr(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
 function selectableBaseStyle() {
-  return styled.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 styled.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;
@@ -8149,7 +8212,7 @@ function selectableColorStyle(props) {
     selectable
   } = theme.sanity.color;
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return styled.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 styled.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__default.default(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 function useMenu() {
@@ -8411,9 +8474,9 @@ const MenuItem = react.forwardRef(function MenuItem2(props, forwardedRef) {
     })]
   });
 });
-const keyframe = styled.keyframes(_templateObject78 || (_templateObject78 = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
-const animation = styled.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 = styled.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"])), _ref24 => {
+const keyframe = styled.keyframes(_templateObject77 || (_templateObject77 = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
+const animation = styled.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 = styled.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
   } = _ref24;
@@ -8422,7 +8485,7 @@ const skeletonStyle = styled.css(_templateObject80 || (_templateObject80 = _tagg
   let {
     $animated
   } = _ref25;
-  return $animated ? animation : styled.css(_templateObject81 || (_templateObject81 = _taggedTemplateLiteral(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
+  return $animated ? animation : styled.css(_templateObject80 || (_templateObject80 = _taggedTemplateLiteral(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
 });
 const Root$4 = styled__default.default(Box)(responsiveRadiusStyle, skeletonStyle);
 const Skeleton = react.forwardRef(function Skeleton2(props, ref) {
@@ -8639,8 +8702,8 @@ const ROLES = {
   success: "alert",
   info: "alert"
 };
-const Root$2 = styled__default.default(Card)(_templateObject82 || (_templateObject82 = _taggedTemplateLiteral(["\n  pointer-events: all;\n"])));
-const TextBox = styled__default.default(Flex)(_templateObject83 || (_templateObject83 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n"])));
+const Root$2 = styled__default.default(Card)(_templateObject81 || (_templateObject81 = _taggedTemplateLiteral(["\n  pointer-events: all;\n"])));
+const TextBox = styled__default.default(Flex)(_templateObject82 || (_templateObject82 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n"])));
 function Toast(props) {
   const {
     closable,
@@ -8700,8 +8763,8 @@ function useMounted() {
 const key$1 = Symbol.for("@sanity/ui/context/toast");
 globalScope[key$1] = globalScope[key$1] || react.createContext(null);
 const ToastContext = globalScope[key$1];
-const Root$1 = styled__default.default(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__default.default.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__default.default(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__default.default.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 {
@@ -9062,7 +9125,7 @@ const Tree = react.memo(react.forwardRef(function Tree2(props, ref) {
 }));
 Tree.displayName = "Tree";
 function treeItemRootStyle() {
-  return styled.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 styled.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 {
@@ -9075,7 +9138,7 @@ function treeItemRootColorStyle(props) {
     selectable
   } = theme.sanity.color;
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return styled.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 styled.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 {
@@ -9085,7 +9148,7 @@ function treeItemBoxStyle(props) {
   const {
     space
   } = theme.sanity;
-  return styled.css(_templateObject88 || (_templateObject88 = _taggedTemplateLiteral(["\n    padding-left: ", ";\n\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])), rem(space[2] * $level));
+  return styled.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 = react.useContext(TreeContext);
@@ -9116,7 +9179,7 @@ const Root = react.memo(styled__default.default.li(treeItemRootStyle, treeItemRo
 const TreeItemBox = styled__default.default(Box).attrs({
   forwardedAs: "a"
 })(treeItemBoxStyle);
-const ToggleArrowText = styled__default.default(Text)(_templateObject89 || (_templateObject89 = _taggedTemplateLiteral(["\n  & > svg {\n    transition: transform 100ms;\n  }\n"])));
+const ToggleArrowText = styled__default.default(Text)(_templateObject88 || (_templateObject88 = _taggedTemplateLiteral(["\n  & > svg {\n    transition: transform 100ms;\n  }\n"])));
 const TreeItem = react.memo(function TreeItem2(props) {
   const {
     children,