@sanity/ui 0.38.3-next.30 → 0.38.3-next.36

package/dist/sanity-ui.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, _templateObject90, _templateObject91, _templateObject92, _templateObject93;
+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, _templateObject90;
 
 const _excluded = ["color", "layer"],
       _excluded2 = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"],
@@ -23,33 +23,34 @@ const _excluded = ["color", "layer"],
       _excluded19 = ["children", "style"],
       _excluded20 = ["children", "zOffset"],
       _excluded21 = ["as", "gap", "getItemKey", "items", "onChange", "renderItem"],
-      _excluded22 = ["__unstable_margins", "allowedAutoPlacements", "arrow", "boundaryElement", "children", "content", "constrainSize", "disabled", "fallbackPlacements", "open", "padding", "placement", "portal", "preventOverflow", "radius", "referenceElement", "matchReferenceWidth", "shadow", "scheme", "style", "tether", "tetherOffset", "tone", "width", "zOffset"],
-      _excluded23 = ["className", "disabled", "style", "customValidity", "readOnly"],
-      _excluded24 = ["children", "customValidity", "disabled", "fontSize", "padding", "radius", "readOnly", "space"],
-      _excluded25 = ["as", "space"],
-      _excluded26 = ["checked", "className", "disabled", "indeterminate", "readOnly", "style"],
-      _excluded27 = ["border", "customValidity", "disabled", "fontSize", "padding", "radius", "weight"],
-      _excluded28 = ["border", "clearButton", "disabled", "fontSize", "icon", "iconRight", "onClear", "padding", "prefix", "radius", "readOnly", "space", "suffix", "customValidity", "type", "weight"],
-      _excluded29 = ["allowedAutoPlacements", "boundaryElement", "children", "content", "disabled", "fallbackPlacements", "placement", "portal", "scheme", "zOffset"],
-      _excluded30 = ["border", "customValidity", "disabled", "filterOption", "fontSize", "icon", "id", "listBox", "loading", "onBlur", "onChange", "onFocus", "onQueryChange", "onSelect", "openButton", "options", "padding", "popover", "prefix", "radius", "readOnly", "relatedElements", "renderOption", "renderPopover", "renderValue", "suffix", "value"],
-      _excluded31 = ["children", "maxLength", "separator", "space"],
-      _excluded32 = ["__unstable_autoFocus", "__unstable_hideCloseButton", "cardRadius", "cardShadow", "children", "contentRef", "footer", "header", "id", "onClickOutside", "onClose", "padding", "portal", "position", "scheme", "width", "zOffset"],
-      _excluded33 = ["fontSize", "keys", "padding", "radius", "space"],
-      _excluded34 = ["children", "focusFirst", "focusLast", "onClickOutside", "onEscape", "onItemClick", "onItemSelect", "onKeyDown", "originElement", "padding", "registerElement", "shouldFocus", "space"],
-      _excluded35 = ["as", "children", "fontSize", "icon", "onClick", "padding", "popover", "radius", "space", "text", "tone"],
-      _excluded36 = ["as", "children", "disabled", "fontSize", "hotkeys", "icon", "iconRight", "onClick", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "pressed", "radius", "selected", "space", "text", "tone"],
-      _excluded37 = ["animated", "delay", "radius"],
-      _excluded38 = ["size"],
+      _excluded22 = ["__unstable_margins", "arrow", "arrowRef", "arrowX", "arrowY", "availableHeight", "availableWidth", "boundaryWidth", "children", "padding", "placement", "overflow", "radius", "referenceWidth", "scheme", "shadow", "strategy", "tone", "width", "x", "y"],
+      _excluded23 = ["__unstable_margins", "allowedAutoPlacements", "arrow", "boundaryElement", "children", "constrainSize", "content", "disabled", "fallbackPlacements", "matchReferenceWidth", "open", "overflow", "padding", "placement", "portal", "preventOverflow", "radius", "referenceElement", "scheme", "shadow", "tether", "tetherOffset", "tone", "width", "zOffset"],
+      _excluded24 = ["className", "disabled", "style", "customValidity", "readOnly"],
+      _excluded25 = ["children", "customValidity", "disabled", "fontSize", "padding", "radius", "readOnly", "space"],
+      _excluded26 = ["as", "space"],
+      _excluded27 = ["checked", "className", "disabled", "indeterminate", "readOnly", "style"],
+      _excluded28 = ["border", "customValidity", "disabled", "fontSize", "padding", "radius", "weight"],
+      _excluded29 = ["border", "clearButton", "disabled", "fontSize", "icon", "iconRight", "onClear", "padding", "prefix", "radius", "readOnly", "space", "suffix", "customValidity", "type", "weight"],
+      _excluded30 = ["boundaryElement", "children", "content", "disabled", "fallbackPlacements", "padding", "placement", "portal", "scheme", "shadow", "zOffset"],
+      _excluded31 = ["border", "customValidity", "disabled", "filterOption", "fontSize", "icon", "id", "listBox", "loading", "onBlur", "onChange", "onFocus", "onQueryChange", "onSelect", "openButton", "options", "padding", "popover", "prefix", "radius", "readOnly", "relatedElements", "renderOption", "renderPopover", "renderValue", "suffix", "value"],
+      _excluded32 = ["children", "maxLength", "separator", "space"],
+      _excluded33 = ["__unstable_autoFocus", "__unstable_hideCloseButton", "cardRadius", "cardShadow", "children", "contentRef", "footer", "header", "id", "onClickOutside", "onClose", "padding", "portal", "position", "scheme", "width", "zOffset"],
+      _excluded34 = ["fontSize", "keys", "padding", "radius", "space"],
+      _excluded35 = ["children", "focusFirst", "focusLast", "onClickOutside", "onEscape", "onItemClick", "onItemSelect", "onKeyDown", "originElement", "padding", "registerElement", "shouldFocus", "space"],
+      _excluded36 = ["as", "children", "fontSize", "icon", "onClick", "padding", "popover", "radius", "space", "text", "tone"],
+      _excluded37 = ["as", "children", "disabled", "fontSize", "hotkeys", "icon", "iconRight", "onClick", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "pressed", "radius", "selected", "space", "text", "tone"],
+      _excluded38 = ["animated", "delay", "radius"],
       _excluded39 = ["size"],
       _excluded40 = ["size"],
       _excluded41 = ["size"],
-      _excluded42 = ["icon", "id", "focused", "fontSize", "label", "onClick", "onFocus", "padding", "selected"],
-      _excluded43 = ["children"],
-      _excluded44 = ["flex"],
-      _excluded45 = ["closable", "description", "onClose", "title", "status"],
-      _excluded46 = ["children", "space"],
-      _excluded47 = ["children", "expanded"],
-      _excluded48 = ["children", "expanded", "fontSize", "href", "icon", "id", "muted", "onClick", "padding", "selected", "space", "text", "weight"];
+      _excluded42 = ["size"],
+      _excluded43 = ["icon", "id", "focused", "fontSize", "label", "onClick", "onFocus", "padding", "selected"],
+      _excluded44 = ["children"],
+      _excluded45 = ["flex"],
+      _excluded46 = ["closable", "description", "onClose", "title", "status"],
+      _excluded47 = ["children", "space"],
+      _excluded48 = ["children", "expanded"],
+      _excluded49 = ["children", "expanded", "fontSize", "href", "icon", "id", "muted", "onClick", "padding", "selected", "space", "text", "weight"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -83,12 +84,10 @@ var icons = require('@sanity/icons');
 
 var Refractor = require('react-refractor');
 
-var reactPopper = require('react-popper');
+var reactDom$1 = require('@floating-ui/react-dom');
 
 var reactDom = require('react-dom');
 
-var maxSizeModifier = require('popper-max-size-modifier');
-
 var framerMotion = require('framer-motion');
 
 function _interopDefaultLegacy(e) {
@@ -103,10 +102,14 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var Refractor__default = /*#__PURE__*/_interopDefaultLegacy(Refractor);
 
-var maxSizeModifier__default = /*#__PURE__*/_interopDefaultLegacy(maxSizeModifier);
-
 const EMPTY_ARRAY = [];
 const EMPTY_RECORD = {};
+const FLOATING_STATIC_SIDES = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
 
 function _fillCSSObject(keys, value) {
   return keys.reduce((style, key) => {
@@ -513,7 +516,7 @@ var parseDimension = function (pixel) {
   return parseFloat(pixel || '0');
 };
 
-var size = function (inlineSize, blockSize, switchSizes) {
+var size$1 = function (inlineSize, blockSize, switchSizes) {
   if (inlineSize === void 0) {
     inlineSize = 0;
   }
@@ -530,9 +533,9 @@ var size = function (inlineSize, blockSize, switchSizes) {
 };
 
 var zeroBoxes = freeze({
-  devicePixelContentBoxSize: size(),
-  borderBoxSize: size(),
-  contentBoxSize: size(),
+  devicePixelContentBoxSize: size$1(),
+  borderBoxSize: size$1(),
+  contentBoxSize: size$1(),
   contentRect: new DOMRectReadOnly(0, 0, 0, 0)
 });
 
@@ -577,9 +580,9 @@ var calculateBoxSizes = function (target, forceRecalculation) {
   var borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea;
   var borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea;
   var boxes = freeze({
-    devicePixelContentBoxSize: size(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
-    borderBoxSize: size(borderBoxWidth, borderBoxHeight, switchSizes),
-    contentBoxSize: size(contentWidth, contentHeight, switchSizes),
+    devicePixelContentBoxSize: size$1(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
+    borderBoxSize: size$1(borderBoxWidth, borderBoxHeight, switchSizes),
+    contentBoxSize: size$1(contentWidth, contentHeight, switchSizes),
     contentRect: new DOMRectReadOnly(paddingLeft, paddingTop, contentWidth, contentHeight)
   });
   cache.set(target, boxes);
@@ -6211,12 +6214,12 @@ const VirtualList = react.forwardRef(function VirtualList2(props, ref) {
     })
   }));
 });
-const Root$j = styled__default["default"].div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  position: absolute;\n  pointer-events: none;\n  width: 27px;\n  height: 27px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 13.5px 13.5px;\n  }\n\n  [data-popper-placement^='top'] > div > & {\n    bottom: -27px;\n  }\n\n  [data-popper-placement^='right'] > div > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-popper-placement^='left'] > div > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-popper-placement^='bottom'] > div > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
+const Root$j = styled__default["default"].div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  position: absolute;\n  pointer-events: none;\n  width: 27px;\n  height: 27px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 13.5px 13.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 BorderPath = styled__default["default"].path(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
 const ShapePath = styled__default["default"].path(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
 const PopoverArrow = react.forwardRef(function PopoverArrow2(props, ref) {
   return /* @__PURE__ */jsxRuntime.jsx(Root$j, _objectSpread(_objectSpread({
-    "data-ui": "PopoverArrow"
+    "data-ui": "Popover__arrow"
   }, props), {}, {
     ref,
     children: /* @__PURE__ */jsxRuntime.jsxs("svg", {
@@ -6234,315 +6237,290 @@ const PopoverArrow = react.forwardRef(function PopoverArrow2(props, ref) {
   }));
 });
 
-function getPopoverModifiers(props) {
+function popoverCardStyle(props) {
   const {
-    allowedAutoPlacements,
-    arrow,
-    arrowElement,
-    boundaryElement,
-    constrainSize,
-    distance,
-    fallbackPlacements,
-    margins,
-    matchReferenceWidth,
-    open,
-    preventOverflow,
-    skidding,
-    tether,
-    tetherOffset
+    $boundaryWidth
   } = props;
-
-  if (!open) {
-    return [];
-  }
-
-  const detectOverflowOptions = {
-    altAxis: !constrainSize,
-    boundary: boundaryElement || void 0,
-    padding: 8,
-    tether,
-    tetherOffset
+  return {
+    maxWidth: $boundaryWidth ? "".concat($boundaryWidth - 16, "px") : "calc(100% - 16px)"
   };
-  return [constrainSize && _objectSpread(_objectSpread({}, maxSizeModifier__default["default"]), {}, {
-    options: detectOverflowOptions
-  }), constrainSize && {
-    name: "applyMaxSize",
-    enabled: true,
-    phase: "beforeWrite",
-    requires: ["maxSize"],
-
-    fn(_ref21) {
-      let {
-        state
-      } = _ref21;
-      const {
-        width,
-        height
-      } = state.modifiersData.maxSize;
-      state.styles.popper = _objectSpread(_objectSpread({}, state.styles.popper), {}, {
-        maxWidth: "".concat(width, "px"),
-        maxHeight: "".concat(height, "px")
-      });
-    }
+}
 
-  }, arrow && {
-    name: "arrow",
-    options: {
-      element: arrowElement,
-      padding: 4
-    }
-  }, (constrainSize || preventOverflow) && {
-    name: "preventOverflow",
-    options: detectOverflowOptions
-  }, {
-    name: "offset",
-    options: {
-      offset: [skidding, distance]
-    }
-  }, margins && {
-    name: "margins",
-    enabled: true,
-    phase: "beforeRead",
-    fn: _ref22 => {
-      let {
-        state
-      } = _ref22;
-      const {
-        rects
-      } = state;
-
-      if (rects.reference) {
-        rects.reference.x += margins[3];
-        rects.reference.y += margins[1];
-        rects.reference.width -= margins[1] + margins[3];
-        rects.reference.height -= margins[0] + margins[2];
-      }
-    }
-  }, {
-    name: "flip",
-    options: {
-      allowedAutoPlacements,
-      boundary: boundaryElement || void 0,
-      fallbackPlacements,
-      padding: 8
-    }
-  }, matchReferenceWidth && {
-    name: "matchWidth",
-    enabled: true,
-    phase: "beforeWrite",
-    requires: ["computeStyles"],
-
-    fn(_ref23) {
-      let {
-        state
-      } = _ref23;
-      const {
-        width
-      } = state.rects.reference;
-      state.styles.popper.width = "".concat(width, "px");
-    },
+const Root$i = react.memo(styled__default["default"](Card)(popoverCardStyle));
+const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref) {
+  const {
+    __unstable_margins: marginsProp,
+    arrow,
+    arrowRef,
+    arrowX,
+    arrowY,
+    availableHeight,
+    availableWidth,
+    boundaryWidth,
+    children,
+    padding,
+    placement,
+    overflow,
+    radius,
+    referenceWidth: referenceWidthProp,
+    scheme,
+    shadow,
+    strategy,
+    tone,
+    width,
+    x: xProp,
+    y: yProp
+  } = props,
+        restProps = _objectWithoutProperties(props, _excluded22);
 
-    effect: _ref24 => {
-      let {
-        state
-      } = _ref24;
-      const refElement = state.elements.reference;
+  const {
+    zIndex
+  } = useLayer();
+  const margins = react.useMemo(() => marginsProp || [0, 0, 0, 0], [marginsProp]);
+  const referenceWidth = referenceWidthProp ? referenceWidthProp - margins[1] - margins[3] : void 0;
+  const x = (xProp != null ? xProp : 0) + margins[3];
+  const y = (yProp != null ? yProp : 0) + margins[0];
+  const maxWidth = availableWidth ? Math.min(availableWidth - 8, referenceWidth || Infinity) : void 0;
+  const rootStyle = react.useMemo(() => ({
+    position: strategy,
+    top: y,
+    left: x,
+    zIndex,
+    width: referenceWidth,
+    maxWidth: referenceWidth ? void 0 : maxWidth
+  }), [referenceWidth, maxWidth, strategy, x, y, zIndex]);
+  const wrapperStyle = react.useMemo(() => ({
+    minHeight: 25,
+    maxHeight: availableHeight ? availableHeight - 8 : void 0
+  }), [availableHeight]);
+  const staticSide = placement && FLOATING_STATIC_SIDES[placement.split("-")[0]];
+  const arrowStyle = react.useMemo(() => {
+    const style = {
+      left: arrowX !== null ? arrowX : void 0,
+      top: arrowY !== null ? arrowY : void 0,
+      right: void 0,
+      bottom: void 0
+    };
+    if (staticSide) style[staticSide] = -27;
+    return style;
+  }, [arrowX, arrowY, staticSide]);
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$i, _objectSpread(_objectSpread({}, restProps), {}, {
+    $boundaryWidth: boundaryWidth,
+    "data-placement": placement,
+    "data-ui": "Popover",
+    radius,
+    ref,
+    scheme,
+    shadow,
+    style: rootStyle,
+    tone,
+    $width: width,
+    children: [/* @__PURE__ */jsxRuntime.jsx(Box, {
+      "data-ui": "Popover__wrapper",
+      overflow,
+      padding,
+      sizing: "border",
+      style: wrapperStyle,
+      children
+    }), arrow && /* @__PURE__ */jsxRuntime.jsx(PopoverArrow, {
+      ref: arrowRef,
+      style: arrowStyle
+    })]
+  }));
+}));
+PopoverCard.displayName = "PopoverCard";
+
+function size(scope) {
+  return reactDom$1.size({
+    apply(args) {
+      if (scope.constrainSize) {
+        scope.setAvailableWidth(args.availableWidth);
+        scope.setAvailableHeight(args.availableHeight);
+      }
 
-      if (refElement instanceof HTMLElement) {
-        state.elements.popper.style.width = "".concat(refElement.offsetWidth - (margins ? margins[1] + margins[3] : 0), "px");
+      if (scope.matchReferenceWidth) {
+        scope.setReferenceWidth(args.rects.reference.width);
       }
-    }
-  }].filter(Boolean);
-}
+    },
 
-function usePopoverModifiers(props) {
-  const {
-    allowedAutoPlacements,
-    arrow,
-    arrowElement,
-    boundaryElement,
-    constrainSize,
-    distance,
-    fallbackPlacements,
-    margins,
-    matchReferenceWidth,
-    open,
-    preventOverflow,
-    skidding,
-    tether,
-    tetherOffset
-  } = props;
-  return react.useMemo(() => {
-    return getPopoverModifiers({
-      allowedAutoPlacements,
-      arrow,
-      arrowElement,
-      boundaryElement,
-      constrainSize,
-      distance,
-      fallbackPlacements,
-      margins,
-      matchReferenceWidth,
-      open,
-      preventOverflow,
-      skidding,
-      tether,
-      tetherOffset
-    });
-  }, [allowedAutoPlacements, arrow, arrowElement, boundaryElement, constrainSize, distance, fallbackPlacements, margins, matchReferenceWidth, open, preventOverflow, skidding, tether, tetherOffset]);
+    boundary: scope.boundaryElement || void 0
+  });
 }
 
-const Root$i = styled__default["default"](Layer)(_ref25 => {
-  let {
-    $preventOverflow
-  } = _ref25;
-  return styled.css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n    pointer-events: none;\n    display: flex;\n    flex-direction: column;\n    max-width: calc(100% - 16px);\n\n    & > * {\n      min-height: 0;\n    }\n\n    /* Hide the popover when the reference element is out of bounds */\n    ", "\n  "])), $preventOverflow && styled.css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n      &[data-popper-reference-hidden='true'] {\n        display: none;\n      }\n    "]))));
-});
-const PopoverCard = styled__default["default"](Card)(_ref26 => {
-  let {
-    $constrainSize
-  } = _ref26;
-  return styled.css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n    flex: 1;\n    max-height: ", ";\n    pointer-events: all;\n\n    && {\n      display: flex;\n    }\n\n    flex-direction: column;\n\n    & > * {\n      min-height: 0;\n    }\n\n    ", "\n  "])), $constrainSize && "100%", responsiveContainerWidthStyle);
-});
-const Popover = react.forwardRef(function Popover2(props, ref) {
-  var _a;
+const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
+  var _a, _b, _c, _d;
 
-  const boundaryElementContext = useBoundaryElement();
   const theme = useTheme();
+  const boundaryElementContext = useBoundaryElement();
 
   const {
     __unstable_margins: margins,
     allowedAutoPlacements,
-    arrow = true,
-    boundaryElement: boundaryElementProp = boundaryElementContext.element,
-    children: child,
+    arrow: arrowProp = true,
+    boundaryElement = boundaryElementContext.element,
+    children: childProp,
+    constrainSize = false,
     content,
-    constrainSize,
     disabled,
     fallbackPlacements,
-    open = false,
-    padding,
-    placement = "bottom",
-    portal: portalProp = false,
-    preventOverflow,
-    radius = 3,
-    referenceElement: referenceElementProp,
-    matchReferenceWidth,
-    shadow = 3,
+    matchReferenceWidth: matchReferenceWidthProp,
+    open,
+    overflow = props.constrainSize ? "auto" : void 0,
+    padding: paddingProp,
+    placement: placementProp = "bottom",
+    portal,
+    preventOverflow = true,
+    radius: radiusProp = 3,
+    referenceElement,
     scheme,
-    style = EMPTY_RECORD,
+    shadow: shadowProp = 3,
     tether,
     tetherOffset,
     tone = "inherit",
-    width: widthProp = 0,
-    zOffset = (_a = theme.sanity.layer) == null ? void 0 : _a.popover.zOffset
+    width: widthProp = void 0,
+    zOffset: zOffsetProp = (_a = theme.sanity.layer) == null ? void 0 : _a.popover.zOffset
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded22);
+        restProps = _objectWithoutProperties(props, _excluded23);
 
+  const boundarySize = (_b = useElementSize(boundaryElement)) == null ? void 0 : _b.border;
+  const padding = useArrayProp(paddingProp);
+  const radius = useArrayProp(radiusProp);
+  const shadow = useArrayProp(shadowProp);
+  const width = useArrayProp(widthProp);
+  const zOffset = useArrayProp(zOffsetProp);
+  const [availableWidth, setAvailableWidth] = react.useState(void 0);
+  const [availableHeight, setAvailableHeight] = react.useState(void 0);
+  const [referenceWidth, setReferenceWidth] = react.useState(void 0);
   const forwardedRef = useForwardedRef(ref);
-  const portal = usePortal();
-  const [referenceElement, setReferenceElement] = react.useState(null);
-  const [popperElement, setPopperElement] = react.useState(null);
-  const [arrowElement, setArrowElement] = react.useState(null);
-  const popperReferenceElement = referenceElementProp || referenceElement;
-  const width = useArrayProp(matchReferenceWidth ? "auto" : widthProp);
-  const modifiers = usePopoverModifiers({
-    allowedAutoPlacements,
-    arrow,
-    arrowElement,
-    boundaryElement: boundaryElementProp || portal.boundaryElement,
-    constrainSize,
-    distance: arrow ? 4 : 0,
-    fallbackPlacements,
-    margins,
-    matchReferenceWidth,
-    open,
-    preventOverflow,
-    skidding: 0,
-    tether,
-    tetherOffset
-  });
-  const popper = reactPopper.usePopper(popperReferenceElement, popperElement, {
+  const arrowRef = react.useRef(null);
+  const rootBoundary = "viewport";
+  const middleware = react.useMemo(() => {
+    const ret = [];
+
+    if (constrainSize || preventOverflow) {
+      ret.push(reactDom$1.flip({
+        boundary: boundaryElement || void 0,
+        fallbackPlacements,
+        padding: 8,
+        rootBoundary
+      }));
+    }
+
+    ret.push(size({
+      boundaryElement,
+      constrainSize,
+      matchReferenceWidth: matchReferenceWidthProp,
+      setAvailableHeight,
+      setAvailableWidth,
+      setReferenceWidth
+    }));
+    ret.push(reactDom$1.offset({
+      mainAxis: arrowProp ? 4 : 0
+    }));
+
+    if (preventOverflow) {
+      ret.push(reactDom$1.shift({
+        boundary: boundaryElement || void 0,
+        rootBoundary,
+        padding: 8
+      }));
+    }
+
+    if (arrowProp) {
+      ret.push(reactDom$1.arrow({
+        element: arrowRef,
+        padding: 4
+      }));
+    }
+
+    return ret;
+  }, [arrowProp, boundaryElement, constrainSize, fallbackPlacements, matchReferenceWidthProp, preventOverflow]);
+  const {
+    x,
+    y,
     placement,
-    modifiers
+    reference,
+    floating,
+    middlewareData,
+    strategy
+  } = reactDom$1.useFloating({
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: reactDom$1.autoUpdate
   });
-  const {
-    attributes,
-    forceUpdate,
-    styles
-  } = popper;
-  const setRef = react.useCallback(el => {
-    const childRef = child.ref;
-    setReferenceElement(el);
+  const arrowX = (_c = middlewareData.arrow) == null ? void 0 : _c.x;
+  const arrowY = (_d = middlewareData.arrow) == null ? void 0 : _d.y;
+  const setArrow = react.useCallback(arrowEl => {
+    arrowRef.current = arrowEl;
+  }, []);
+  const setFloating = react.useCallback(node => {
+    forwardedRef.current = node;
+    floating(node);
+  }, [floating, forwardedRef]);
+  const setReference = react.useCallback(node => {
+    reference(node);
+    const childRef = childProp == null ? void 0 : childProp.ref;
 
     if (typeof childRef === "function") {
-      childRef(el);
+      childRef(node);
     } else if (childRef) {
-      childRef.current = el;
+      childRef.current = node;
     }
-  }, [child]);
-  const setRootRef = react.useCallback(el => {
-    setPopperElement(el);
-    forwardedRef.current = el;
-  }, [forwardedRef]);
-  const popoverStyle = react.useMemo(() => _objectSpread(_objectSpread({}, style), styles.popper), [style, styles]);
-  const updateTimeoutRef = react.useRef(null);
+  }, [childProp, reference]);
+  const child = react.useMemo(() => {
+    if (!childProp || referenceElement) return null;
+    return react.cloneElement(childProp, {
+      ref: setReference
+    });
+  }, [childProp, referenceElement, setReference]);
   react.useEffect(() => {
-    if (updateTimeoutRef.current) {
-      clearTimeout(updateTimeoutRef.current);
-      updateTimeoutRef.current = null;
-    }
-
-    updateTimeoutRef.current = setTimeout(() => {
-      if (forceUpdate) {
-        try {
-          forceUpdate();
-        } catch (_) {}
-      }
-    }, 0);
-  }, [content, forceUpdate, open, popperReferenceElement]);
+    if (referenceElement) reference(referenceElement);
+  }, [reference, referenceElement]);
 
   if (disabled) {
-    return child || /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    return childProp || /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
 
-  const node = /* @__PURE__ */jsxRuntime.jsx(Root$i, _objectSpread(_objectSpread(_objectSpread({
-    "data-ui": "Popover"
-  }, restProps), {}, {
-    $preventOverflow: preventOverflow,
-    ref: setRootRef,
-    style: popoverStyle,
-    zOffset
-  }, attributes.popper), {}, {
-    children: /* @__PURE__ */jsxRuntime.jsxs(PopoverCard, {
-      $constrainSize: constrainSize,
-      $width: width,
-      "data-ui": "PopoverCard",
+  const popover = /* @__PURE__ */jsxRuntime.jsx(LayerProvider, {
+    zOffset,
+    children: /* @__PURE__ */jsxRuntime.jsx(PopoverCard, _objectSpread(_objectSpread({}, restProps), {}, {
+      __unstable_margins: margins,
+      arrow: arrowProp,
+      arrowRef: setArrow,
+      arrowX,
+      arrowY,
+      availableWidth: constrainSize ? availableWidth : void 0,
+      availableHeight: constrainSize ? availableHeight : void 0,
+      boundaryWidth: boundarySize == null ? void 0 : boundarySize.width,
+      overflow,
       padding,
+      placement,
       radius,
+      ref: setFloating,
+      referenceWidth: matchReferenceWidthProp ? referenceWidth : void 0,
       scheme,
       shadow,
+      strategy,
       tone,
-      children: [arrow && /* @__PURE__ */jsxRuntime.jsx(PopoverArrow, {
-        ref: setArrowElement,
-        style: styles.arrow
-      }), content]
-    })
-  }));
+      x,
+      y,
+      width,
+      children: content
+    }))
+  });
   return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [child && !referenceElementProp ? react.cloneElement(child, {
-      ref: setRef
-    }) : child || /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {}), open && /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [portalProp && /* @__PURE__ */jsxRuntime.jsx(Portal, {
-        __unstable_name: typeof portalProp === "string" ? portalProp : void 0,
-        children: node
-      }), !portalProp && node]
-    })]
+    children: [open && /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: portal ? /* @__PURE__ */jsxRuntime.jsx(Portal, {
+        __unstable_name: typeof portal === "string" ? portal : void 0,
+        children: popover
+      }) : popover
+    }), child]
   });
-});
+}));
+Popover.displayName = "Popover";
 
 function radioBaseStyle() {
-  return styled.css(_templateObject39 || (_templateObject39 = _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(_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  "])));
 }
 
 function inputElementStyle(props) {
@@ -6555,7 +6533,7 @@ function inputElementStyle(props) {
   } = theme.sanity;
   const color = theme.sanity.color.input;
   const dist = (input.radio.size - input.radio.markSize) / 2;
-  return styled.css(_templateObject40 || (_templateObject40 = _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(_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({
     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({
@@ -6580,7 +6558,7 @@ const Radio = react.forwardRef(function Radio2(props, forwardedRef) {
     customValidity,
     readOnly
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded23);
+        restProps = _objectWithoutProperties(props, _excluded24);
 
   const ref = useForwardedRef(forwardedRef);
   useCustomValidity(ref, customValidity);
@@ -6600,7 +6578,7 @@ const Radio = react.forwardRef(function Radio2(props, forwardedRef) {
 });
 
 function rootStyle() {
-  return styled.css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 
 function inputBaseStyle(props) {
@@ -6608,7 +6586,7 @@ function inputBaseStyle(props) {
     theme
   } = props;
   const font = theme.sanity.fonts.text;
-  return styled.css(_templateObject42 || (_templateObject42 = _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(_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);
 }
 
 function inputColorStyle(props) {
@@ -6620,7 +6598,7 @@ function inputColorStyle(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.input;
-  return styled.css(_templateObject43 || (_templateObject43 = _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(_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({
     color: color.default.enabled.border,
     width: input.border.width
   }), color.default.hovered.bg, color.default.hovered.fg, focusRingBorderStyle({
@@ -6668,7 +6646,7 @@ function iconBoxStyle(props) {
     theme
   } = props;
   const color = theme.sanity.color.input;
-  return styled.css(_templateObject44 || (_templateObject44 = _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(_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);
 }
 
 const selectStyle = {
@@ -6690,7 +6668,7 @@ const Select = react.forwardRef(function Select2(props, forwardedRef) {
     readOnly,
     space = 3
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded24);
+        restProps = _objectWithoutProperties(props, _excluded25);
 
   const ref = useForwardedRef(forwardedRef);
   useCustomValidity(ref, customValidity);
@@ -6750,7 +6728,7 @@ const Stack = react.forwardRef(function Stack2(props, ref) {
     as,
     space
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded25);
+        restProps = _objectWithoutProperties(props, _excluded26);
 
   return /* @__PURE__ */jsxRuntime.jsx(Root$f, _objectSpread(_objectSpread({
     "data-as": typeof as === "string" ? as : void 0,
@@ -6763,11 +6741,11 @@ const Stack = react.forwardRef(function Stack2(props, ref) {
 });
 
 function switchBaseStyles() {
-  return styled.css(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 
 function switchInputStyles() {
-  return styled.css(_templateObject46 || (_templateObject46 = _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(_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  "])));
 }
 
 function switchRepresentationStyles(props) {
@@ -6779,7 +6757,7 @@ function switchRepresentationStyles(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.button.default;
-  return styled.css(_templateObject47 || (_templateObject47 = _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(_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({
     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);
 }
@@ -6791,7 +6769,7 @@ function switchTrackStyles(props) {
   const {
     input
   } = theme.sanity;
-  return styled.css(_templateObject48 || (_templateObject48 = _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(_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));
 }
 
 function switchThumbStyles(props) {
@@ -6809,7 +6787,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(_templateObject49 || (_templateObject49 = _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(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && styled.css(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
+  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));
 }
 
 const Root$e = styled__default["default"].span(switchBaseStyles);
@@ -6826,7 +6804,7 @@ const Switch = react.forwardRef(function Switch2(props, forwardedRef) {
     readOnly,
     style
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded26);
+        restProps = _objectWithoutProperties(props, _excluded27);
 
   const ref = useForwardedRef(forwardedRef);
   react.useEffect(() => {
@@ -6856,7 +6834,7 @@ const Switch = react.forwardRef(function Switch2(props, forwardedRef) {
   });
 });
 const Root$d = styled__default["default"].span(textInputRootStyle);
-const InputRoot$1 = styled__default["default"].span(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+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 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) {
@@ -6869,7 +6847,7 @@ const TextArea = react.forwardRef(function TextArea2(props, forwardedRef) {
     radius = 1,
     weight
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded27);
+        restProps = _objectWithoutProperties(props, _excluded28);
 
   const ref = useForwardedRef(forwardedRef);
   const rootTheme = useRootTheme();
@@ -6907,18 +6885,18 @@ const CLEAR_BUTTON_BOX_STYLE = {
 const Root$c = styled__default["default"](Card).attrs({
   forwardedAs: "span"
 })(textInputRootStyle);
-const InputRoot = styled__default["default"].span(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+const InputRoot = styled__default["default"].span(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
 const Prefix = styled__default["default"](Card).attrs({
   forwardedAs: "span"
-})(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
+})(_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"])));
 const Suffix = styled__default["default"](Card).attrs({
   forwardedAs: "span"
-})(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
+})(_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"])));
 const Input = styled__default["default"].input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 const Presentation = styled__default["default"].span(responsiveRadiusStyle, textInputRepresentationStyle);
-const LeftBox = styled__default["default"](Box)(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
-const RightBox = styled__default["default"](Box)(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
-const RightCard = styled__default["default"](Card)(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+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 TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
   const {
     border = true,
@@ -6938,7 +6916,7 @@ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
     type = "text",
     weight
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded28);
+        restProps = _objectWithoutProperties(props, _excluded29);
 
   const ref = useForwardedRef(forwardedRef);
   const rootTheme = useRootTheme();
@@ -7064,13 +7042,15 @@ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
     }), suffixNode]
   });
 });
-const Root$b = styled__default["default"].div(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\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-popper-placement^='top'] > div > & {\n    bottom: -15px;\n  }\n\n  [data-popper-placement^='right'] > div > & {\n    left: -15px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-popper-placement^='left'] > div > & {\n    right: -15px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-popper-placement^='bottom'] > div > & {\n    top: -15px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
-const Border = styled__default["default"].path(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
-const Shape = styled__default["default"].path(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
+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 TooltipArrow = react.forwardRef(function TooltipArrow2(props, ref) {
   const restProps = _extends({}, props);
 
-  return /* @__PURE__ */jsxRuntime.jsx(Root$b, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$b, _objectSpread(_objectSpread({
+    "data-ui": "Tooltip__arrow"
+  }, restProps), {}, {
     ref,
     children: /* @__PURE__ */jsxRuntime.jsxs("svg", {
       width: "15",
@@ -7084,63 +7064,87 @@ const TooltipArrow = react.forwardRef(function TooltipArrow2(props, ref) {
     })
   }));
 });
-const Root$a = styled__default["default"](Layer)(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
+const Root$a = styled__default["default"](Layer)(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
 const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
-  var _a;
+  var _a, _b, _c;
 
   const boundaryElementContext = useBoundaryElement();
   const theme = useTheme();
 
   const {
-    allowedAutoPlacements,
     boundaryElement = boundaryElementContext == null ? void 0 : boundaryElementContext.element,
-    children,
+    children: childProp,
     content,
     disabled,
     fallbackPlacements: fallbackPlacementsProp,
-    placement = "bottom",
+    padding,
+    placement: placementProp = "bottom",
     portal,
     scheme,
+    shadow = 2,
     zOffset = (_a = theme.sanity.layer) == null ? void 0 : _a.tooltip.zOffset
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded29);
+        restProps = _objectWithoutProperties(props, _excluded30);
 
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp);
   const forwardedRef = useForwardedRef(ref);
   const [referenceElement, setReferenceElement] = react.useState(null);
-  const [popperElement, setPopperElement] = react.useState(null);
-  const [arrowElement, setArrowElement] = react.useState(null);
-  const popper = reactPopper.usePopper(referenceElement, popperElement, {
+  const arrowRef = react.useRef(null);
+  const rootBoundary = "viewport";
+  const middleware = react.useMemo(() => {
+    const ret = [];
+    ret.push(reactDom$1.flip({
+      boundary: boundaryElement || void 0,
+      fallbackPlacements,
+      padding: 4,
+      rootBoundary
+    }));
+    ret.push(reactDom$1.offset({
+      mainAxis: 3
+    }));
+    ret.push(reactDom$1.shift({
+      boundary: boundaryElement || void 0,
+      rootBoundary,
+      padding: 4
+    }));
+    ret.push(reactDom$1.arrow({
+      element: arrowRef,
+      padding: 2
+    }));
+    return ret;
+  }, [boundaryElement, fallbackPlacements]);
+  const {
+    x,
+    y,
     placement,
-    modifiers: [{
-      name: "arrow",
-      options: {
-        element: arrowElement,
-        padding: 4
-      }
-    }, {
-      name: "preventOverflow",
-      options: {
-        altAxis: true,
-        boundary: boundaryElement || void 0,
-        padding: 4
-      }
-    }, {
-      name: "offset",
-      options: {
-        offset: [0, 3]
-      }
-    }, {
-      name: "flip",
-      options: {
-        allowedAutoPlacements,
-        fallbackPlacements
-      }
-    }]
+    reference,
+    floating,
+    middlewareData,
+    update,
+    strategy
+  } = reactDom$1.useFloating({
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: reactDom$1.autoUpdate
   });
-  const {
-    forceUpdate
-  } = popper;
+  const rootStyle = react.useMemo(() => ({
+    position: strategy,
+    top: y != null ? y : 0,
+    left: x != null ? x : 0
+  }), [strategy, x, y]);
+  const staticSide = placement && FLOATING_STATIC_SIDES[placement.split("-")[0]];
+  const arrowX = (_b = middlewareData.arrow) == null ? void 0 : _b.x;
+  const arrowY = (_c = middlewareData.arrow) == null ? void 0 : _c.y;
+  const arrowStyle = react.useMemo(() => {
+    const style = {
+      left: arrowX !== null ? arrowX : void 0,
+      top: arrowY !== null ? arrowY : void 0,
+      right: void 0,
+      bottom: void 0
+    };
+    if (staticSide) style[staticSide] = -15;
+    return style;
+  }, [arrowX, arrowY, staticSide]);
   const [isOpen, setIsOpen] = react.useState(false);
   const handleBlur = react.useCallback(() => setIsOpen(false), []);
   const handleFocus = react.useCallback(() => setIsOpen(true), []);
@@ -7164,73 +7168,76 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
       window.removeEventListener("mousemove", handleWindowMouseMove);
     };
   }, [isOpen, referenceElement]);
-  const updateTimeoutRef = react.useRef(null);
-  react.useEffect(() => {
-    if (updateTimeoutRef.current) {
-      clearTimeout(updateTimeoutRef.current);
-      updateTimeoutRef.current = null;
-    }
-
-    updateTimeoutRef.current = setTimeout(() => {
-      if (forceUpdate) {
-        try {
-          forceUpdate();
-        } catch (_) {}
-      }
-    }, 0);
-  }, [forceUpdate, content]);
   react.useEffect(() => {
     if (disabled) setIsOpen(false);
   }, [disabled]);
   react.useEffect(() => {
     if (!content) setIsOpen(false);
   }, [content]);
+  react.useEffect(() => reference(referenceElement), [reference, referenceElement]);
+  const setArrow = react.useCallback(arrowEl => {
+    arrowRef.current = arrowEl;
+    update();
+  }, [update]);
+  const setFloating = react.useCallback(node => {
+    forwardedRef.current = node;
+    floating(node);
+  }, [floating, forwardedRef]);
+  const childRef = childProp == null ? void 0 : childProp.ref;
+  const setReference = react.useCallback(node => {
+    if (typeof childRef === "function") {
+      childRef(node);
+    } else if (childRef) {
+      childRef.current = node;
+    }
 
-  const setRef = el => {
-    setPopperElement(el);
-    forwardedRef.current = el;
-  };
-
-  if (!children) return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  if (disabled) return children;
-  const referenceProps = {
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    ref: setReferenceElement
-  };
-  const referenceNode = react.cloneElement(children, referenceProps);
-  const popperNode = /* @__PURE__ */jsxRuntime.jsx(Root$a, _objectSpread(_objectSpread(_objectSpread({
+    setReferenceElement(node);
+  }, [childRef]);
+  const child = react.useMemo(() => {
+    if (!childProp) return null;
+    return react.cloneElement(childProp, {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ref: setReference
+    });
+  }, [childProp, handleBlur, handleFocus, handleMouseEnter, handleMouseLeave, setReference]);
+  if (!child) return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  if (disabled) return child;
+  const root = /* @__PURE__ */jsxRuntime.jsx(Root$a, _objectSpread(_objectSpread({
     "data-ui": "Tooltip"
-  }, restProps), popper.attributes.popper), {}, {
-    ref: setRef,
-    style: popper.styles.popper,
+  }, restProps), {}, {
+    ref: setFloating,
+    style: rootStyle,
     zOffset,
     children: /* @__PURE__ */jsxRuntime.jsxs(Card, {
+      "data-ui": "Tooltip__card",
+      "data-placement": placement,
+      padding,
       radius: 2,
       scheme,
-      shadow: 3,
+      shadow,
       children: [content, /* @__PURE__ */jsxRuntime.jsx(TooltipArrow, {
-        ref: setArrowElement,
-        style: popper.styles.arrow
+        ref: setArrow,
+        style: arrowStyle
       })]
     })
   }));
   return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [referenceNode, isOpen && /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [portal && /* @__PURE__ */jsxRuntime.jsx(Portal, {
+    children: [child, isOpen && /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: portal ? /* @__PURE__ */jsxRuntime.jsx(Portal, {
         __unstable_name: typeof portal === "string" ? portal : void 0,
-        children: popperNode
-      }), !portal && popperNode]
+        children: root
+      }) : root
     })]
   });
 });
-const Root$9 = styled__default["default"].div(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["\n  line-height: 0;\n"])));
-const ListBox = styled__default["default"](Box)(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n  & > ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n"])));
-const ResultsPopover = styled__default["default"](Popover)(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["\n  & > div {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  &[data-popper-reference-hidden='true'] {\n    display: none;\n  }\n"])));
-const rotate = styled.keyframes(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-const AnimatedSpinnerIcon = styled__default["default"](icons.SpinnerIcon)(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
+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 ResultsPopover = styled__default["default"](Popover)(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n  &[data-popper-reference-hidden='true'] {\n    display: none;\n  }\n"])));
+const rotate = styled.keyframes(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+const AnimatedSpinnerIcon = styled__default["default"](icons.SpinnerIcon)(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
 
 function AutocompleteOption(props) {
   const {
@@ -7329,13 +7336,13 @@ function autocompleteReducer(state, msg) {
 }
 
 const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "Home", "End", "PageUp", "PageDown", "Meta", "Tab", "CapsLock"];
-const AUTOCOMPLETE_POPOVER_MARGINS = [0, 1, 1, 1];
-const AUTOCOMPLETE_POPOVER_PLACEMENT = "bottom-start";
-const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ["top-start"];
+const AUTOCOMPLETE_POPOVER_MARGINS = [0, 1, 0, 0];
+const AUTOCOMPLETE_POPOVER_PLACEMENT = "bottom";
+const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ["bottom", "top"];
 
-const defaultRenderValue = (value, option) => option ? option.value : value;
+const DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value;
 
-const defaultFilterOption = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1;
+const DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1;
 
 const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, ref) {
   const {
@@ -7346,7 +7353,7 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
     fontSize = 2,
     icon,
     id,
-    listBox = {},
+    listBox = EMPTY_RECORD,
     loading,
     onBlur,
     onChange,
@@ -7356,18 +7363,18 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
     openButton,
     options: optionsProp,
     padding: paddingProp = 3,
-    popover = {},
+    popover = EMPTY_RECORD,
     prefix,
     radius = 3,
     readOnly,
     relatedElements,
     renderOption: renderOptionProp,
     renderPopover,
-    renderValue = defaultRenderValue,
+    renderValue = DEFAULT_RENDER_VALUE,
     suffix,
     value: valueProp
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded30);
+        restProps = _objectWithoutProperties(props, _excluded31);
 
   const [state, dispatch] = react.useReducer(autocompleteReducer, {
     activeValue: valueProp || null,
@@ -7383,10 +7390,10 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
     query,
     value
   } = state;
-  const defaultRenderOption = react.useCallback(_ref27 => {
+  const defaultRenderOption = react.useCallback(_ref21 => {
     let {
       value: value2
-    } = _ref27;
+    } = _ref21;
     return /* @__PURE__ */jsxRuntime.jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
@@ -7400,7 +7407,7 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
     });
   }, [fontSize, paddingProp]);
   const renderOption = typeof renderOptionProp === "function" ? renderOptionProp : defaultRenderOption;
-  const filterOption = typeof filterOptionProp === "function" ? filterOptionProp : defaultFilterOption;
+  const filterOption = typeof filterOptionProp === "function" ? filterOptionProp : DEFAULT_FILTER_OPTION;
   const rootElementRef = react.useRef(null);
   const resultsPopoverElementRef = react.useRef(null);
   const inputElementRef = react.useRef(null);
@@ -7637,12 +7644,7 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
     if (v === 2) return 1;
     return v - 2;
   }), [padding]);
-  const openButtonPadding = react.useMemo(() => padding.map(v => {
-    if (v === 0) return 0;
-    if (v === 1) return 0;
-    if (v === 2) return 1;
-    return v - 1;
-  }), [padding]);
+  const openButtonPadding = react.useMemo(() => padding.map(v => Math.max(v - 1, 0)), [padding]);
   const openButtonProps = react.useMemo(() => typeof openButton === "object" ? openButton : EMPTY_RECORD, [openButton]);
   const handleOpenClick = react.useCallback(event => {
     dispatch({
@@ -7794,8 +7796,8 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
   });
 });
 const Autocomplete = InnerAutocomplete;
-const Root$8 = styled__default["default"].ol(_templateObject68 || (_templateObject68 = _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)(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n  appearance: none;\n  margin: -4px;\n"])));
+const Root$8 = styled__default["default"].ol(_templateObject65 || (_templateObject65 = _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)(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n  appearance: none;\n  margin: -4px;\n"])));
 const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
   const {
     children,
@@ -7803,7 +7805,7 @@ const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
     separator,
     space: spaceRaw = 2
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded31);
+        restProps = _objectWithoutProperties(props, _excluded32);
 
   const space = useArrayProp(spaceRaw);
   const [open, setOpen] = react.useState(false);
@@ -7869,10 +7871,10 @@ const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
   }));
 });
 
-function dialogStyle(_ref28) {
+function dialogStyle(_ref22) {
   let {
     theme
-  } = _ref28;
+  } = _ref22;
   const color = theme.sanity.color.base;
   return {
     "&:not([hidden])": {
@@ -7914,12 +7916,12 @@ function useDialog() {
 }
 
 const Root$7 = styled__default["default"](Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
-const DialogContainer = styled__default["default"](Container)(_templateObject70 || (_templateObject70 = _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)(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  overflow: hidden;\n"])));
-const DialogLayout = styled__default["default"](Flex)(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
-const DialogHeader = styled__default["default"](Card)(_templateObject73 || (_templateObject73 = _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)(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
-const DialogFooter = styled__default["default"](Box)(_templateObject75 || (_templateObject75 = _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)(_templateObject67 || (_templateObject67 = _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)(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  overflow: hidden;\n"])));
+const DialogLayout = styled__default["default"](Flex)(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
+const DialogHeader = styled__default["default"](Card)(_templateObject70 || (_templateObject70 = _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)(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
+const DialogFooter = styled__default["default"](Box)(_templateObject72 || (_templateObject72 = _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) {
   const {
     __unstable_autoFocus: autoFocus,
@@ -8046,7 +8048,7 @@ const Dialog = react.forwardRef(function Dialog2(props, ref) {
     width: widthProp = 0,
     zOffset: zOffsetProp = dialog.zOffset || ((_a = theme.sanity.layer) == null ? void 0 : _a.dialog.zOffset)
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded32);
+        restProps = _objectWithoutProperties(props, _excluded33);
 
   const cardRadius = useArrayProp(cardRadiusProp);
   const padding = useArrayProp(paddingProp);
@@ -8131,8 +8133,8 @@ function DialogProvider(props) {
   });
 }
 
-const Root$6 = styled__default["default"].kbd(_templateObject76 || (_templateObject76 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n  font: inherit;\n"])));
-const Key = styled__default["default"](KBD)(_templateObject77 || (_templateObject77 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
+const Root$6 = styled__default["default"].kbd(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n  font: inherit;\n"])));
+const Key = styled__default["default"](KBD)(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
 const Hotkeys = react.forwardRef(function Hotkeys2(props, ref) {
   const {
     fontSize,
@@ -8141,7 +8143,7 @@ const Hotkeys = react.forwardRef(function Hotkeys2(props, ref) {
     radius,
     space: spaceProp = 1
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded33);
+        restProps = _objectWithoutProperties(props, _excluded34);
 
   const space = useArrayProp(spaceProp);
 
@@ -8403,7 +8405,7 @@ function useMenuController(props) {
   };
 }
 
-const Root$5 = styled__default["default"](Box)(_templateObject78 || (_templateObject78 = _taggedTemplateLiteral(["\n  outline: none;\n  overflow: auto;\n"])));
+const Root$5 = styled__default["default"](Box)(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["\n  outline: none;\n  overflow: auto;\n"])));
 const Menu = react.forwardRef(function Menu2(props, ref) {
   const {
     children,
@@ -8420,7 +8422,7 @@ const Menu = react.forwardRef(function Menu2(props, ref) {
     shouldFocus = props.focusFirst && "first" || props.focusLast && "last" || null,
     space = 1
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded34);
+        restProps = _objectWithoutProperties(props, _excluded35);
 
   const forwardedRef = useForwardedRef(ref);
   const {
@@ -8637,10 +8639,10 @@ const MenuButton = react.forwardRef(function MenuButton2(props, ref) {
     children: button || /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {})
   }));
 });
-const MenuDivider = styled__default["default"].hr(_templateObject79 || (_templateObject79 = _taggedTemplateLiteral(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
+const MenuDivider = styled__default["default"].hr(_templateObject76 || (_templateObject76 = _taggedTemplateLiteral(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
 
 function selectableBaseStyle() {
-  return styled.css(_templateObject80 || (_templateObject80 = _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(_templateObject77 || (_templateObject77 = _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) {
@@ -8656,7 +8658,7 @@ function selectableColorStyle(props) {
     selectable
   } = theme.sanity.color;
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return styled.css(_templateObject81 || (_templateObject81 = _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            &: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            &: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(_templateObject78 || (_templateObject78 = _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            &: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            &: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);
@@ -8689,7 +8691,7 @@ function MenuGroup(props) {
     text,
     tone = "default"
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded35);
+        restProps = _objectWithoutProperties(props, _excluded36);
 
   const menu = useMenu();
   const {
@@ -8838,7 +8840,7 @@ const MenuItem = react.forwardRef(function MenuItem2(props, forwardedRef) {
     text,
     tone = "default"
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded36);
+        restProps = _objectWithoutProperties(props, _excluded37);
 
   const menu = useMenu();
   const {
@@ -8928,18 +8930,18 @@ const MenuItem = react.forwardRef(function MenuItem2(props, forwardedRef) {
     }))]
   }));
 });
-const keyframe = styled.keyframes(_templateObject82 || (_templateObject82 = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
-const animation = styled.css(_templateObject83 || (_templateObject83 = _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(_templateObject84 || (_templateObject84 = _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"])), _ref29 => {
+const keyframe = styled.keyframes(_templateObject79 || (_templateObject79 = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
+const animation = styled.css(_templateObject80 || (_templateObject80 = _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(_templateObject81 || (_templateObject81 = _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"])), _ref23 => {
   let {
     $visible
-  } = _ref29;
+  } = _ref23;
   return $visible ? 1 : 0;
-}, _ref30 => {
+}, _ref24 => {
   let {
     $animated
-  } = _ref30;
-  return $animated ? animation : styled.css(_templateObject85 || (_templateObject85 = _taggedTemplateLiteral(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
+  } = _ref24;
+  return $animated ? animation : styled.css(_templateObject82 || (_templateObject82 = _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) {
@@ -8948,7 +8950,7 @@ const Skeleton = react.forwardRef(function Skeleton2(props, ref) {
     delay,
     radius
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded37);
+        restProps = _objectWithoutProperties(props, _excluded38);
 
   const [visible, setVisible] = react.useState(delay ? false : true);
   react.useEffect(() => {
@@ -8970,12 +8972,12 @@ const Skeleton = react.forwardRef(function Skeleton2(props, ref) {
     ref
   }));
 });
-const Root$3 = styled__default["default"](Skeleton)(_ref31 => {
+const Root$3 = styled__default["default"](Skeleton)(_ref25 => {
   let {
     $size,
     $style,
     theme
-  } = _ref31;
+  } = _ref25;
   const {
     media
   } = theme.sanity;
@@ -8995,7 +8997,7 @@ const TextSkeleton = react.forwardRef(function TextSkeleton2(props, ref) {
   const {
     size = 2
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded38);
+        restProps = _objectWithoutProperties(props, _excluded39);
 
   const $size = useArrayProp(size);
   return /* @__PURE__ */jsxRuntime.jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
@@ -9008,7 +9010,7 @@ const LabelSkeleton = react.forwardRef(function TextSkeleton3(props, ref) {
   const {
     size = 2
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded39);
+        restProps = _objectWithoutProperties(props, _excluded40);
 
   const $size = useArrayProp(size);
   return /* @__PURE__ */jsxRuntime.jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
@@ -9021,7 +9023,7 @@ const HeadingSkeleton = react.forwardRef(function TextSkeleton4(props, ref) {
   const {
     size = 2
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded40);
+        restProps = _objectWithoutProperties(props, _excluded41);
 
   const $size = useArrayProp(size);
   return /* @__PURE__ */jsxRuntime.jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
@@ -9034,7 +9036,7 @@ const CodeSkeleton = react.forwardRef(function TextSkeleton5(props, ref) {
   const {
     size = 2
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded41);
+        restProps = _objectWithoutProperties(props, _excluded42);
 
   const $size = useArrayProp(size);
   return /* @__PURE__ */jsxRuntime.jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
@@ -9055,7 +9057,7 @@ const Tab = react.forwardRef(function Tab2(props, forwardedRef) {
     padding = 2,
     selected
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded42);
+        restProps = _objectWithoutProperties(props, _excluded43);
 
   const elementRef = react.useRef(null);
   const focusedRef = react.useRef(false);
@@ -9108,7 +9110,7 @@ const TabList = react.forwardRef(function TabList2(props, ref) {
   const {
     children: childrenProp
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded43);
+        restProps = _objectWithoutProperties(props, _excluded44);
 
   const [focusedIndex, setFocusedIndex] = react.useState(-1);
   const children = react.useMemo(() => childrenProp.filter(_isReactElement), [childrenProp]);
@@ -9143,7 +9145,7 @@ const TabPanel = react.forwardRef(function TabPanel2(props, ref) {
   const {
     flex
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded44);
+        restProps = _objectWithoutProperties(props, _excluded45);
 
   return /* @__PURE__ */jsxRuntime.jsx(Box, _objectSpread(_objectSpread({
     "data-ui": "TabPanel"
@@ -9167,8 +9169,8 @@ const ROLES = {
   success: "alert",
   info: "alert"
 };
-const Root$2 = styled__default["default"](Card)(_templateObject86 || (_templateObject86 = _taggedTemplateLiteral(["\n  pointer-events: all;\n"])));
-const TextBox = styled__default["default"](Flex)(_templateObject87 || (_templateObject87 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n"])));
+const Root$2 = styled__default["default"](Card)(_templateObject83 || (_templateObject83 = _taggedTemplateLiteral(["\n  pointer-events: all;\n"])));
+const TextBox = styled__default["default"](Flex)(_templateObject84 || (_templateObject84 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n"])));
 
 function Toast(props) {
   const {
@@ -9178,7 +9180,7 @@ function Toast(props) {
     title,
     status
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded45);
+        restProps = _objectWithoutProperties(props, _excluded46);
 
   const cardTone = status ? STATUS_CARD_TONE[status] : "default";
   const role = status ? ROLES[status] : "status";
@@ -9226,8 +9228,8 @@ function Toast(props) {
 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)(_templateObject88 || (_templateObject88 = _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(_templateObject89 || (_templateObject89 = _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)(_templateObject85 || (_templateObject85 = _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(_templateObject86 || (_templateObject86 = _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) {
@@ -9317,12 +9319,12 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsxRuntime.jsx(framerMotion.AnimatePresence, {
             initial: false,
-            children: state.toasts.map(_ref32 => {
+            children: state.toasts.map(_ref26 => {
               let {
                 dismiss,
                 id,
                 params
-              } = _ref32;
+              } = _ref26;
               return /* @__PURE__ */jsxRuntime.jsx(framerMotion.motion.div, {
                 animate: {
                   opacity: 1,
@@ -9477,7 +9479,7 @@ const Tree = react.memo(react.forwardRef(function Tree2(props, ref) {
     children,
     space = 1
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded46);
+        restProps = _objectWithoutProperties(props, _excluded47);
 
   const forwardedRef = useForwardedRef(ref);
   const [focusedElement, setFocusedElement] = react.useState(null);
@@ -9644,7 +9646,7 @@ const Tree = react.memo(react.forwardRef(function Tree2(props, ref) {
 Tree.displayName = "Tree";
 
 function treeItemRootStyle() {
-  return styled.css(_templateObject90 || (_templateObject90 = _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(_templateObject87 || (_templateObject87 = _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) {
@@ -9658,7 +9660,7 @@ function treeItemRootColorStyle(props) {
     selectable
   } = theme.sanity.color;
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return styled.css(_templateObject91 || (_templateObject91 = _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(_templateObject88 || (_templateObject88 = _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) {
@@ -9669,7 +9671,7 @@ function treeItemBoxStyle(props) {
   const {
     space
   } = theme.sanity;
-  return styled.css(_templateObject92 || (_templateObject92 = _taggedTemplateLiteral(["\n    padding-left: ", ";\n\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])), rem(space[2] * $level));
+  return styled.css(_templateObject89 || (_templateObject89 = _taggedTemplateLiteral(["\n    padding-left: ", ";\n\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])), rem(space[2] * $level));
 }
 
 function useTree() {
@@ -9687,7 +9689,7 @@ const TreeGroup = react.memo(function TreeGroup2(props) {
     children,
     expanded = false
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded47);
+        restProps = _objectWithoutProperties(props, _excluded48);
 
   const tree = useTree();
   return /* @__PURE__ */jsxRuntime.jsx(Stack, _objectSpread(_objectSpread({
@@ -9705,7 +9707,7 @@ const Root = react.memo(styled__default["default"].li(treeItemRootStyle, treeIte
 const TreeItemBox = styled__default["default"](Box).attrs({
   forwardedAs: "a"
 })(treeItemBoxStyle);
-const ToggleArrowText = styled__default["default"](Text)(_templateObject93 || (_templateObject93 = _taggedTemplateLiteral(["\n  & > svg {\n    transition: transform 100ms;\n  }\n"])));
+const ToggleArrowText = styled__default["default"](Text)(_templateObject90 || (_templateObject90 = _taggedTemplateLiteral(["\n  & > svg {\n    transition: transform 100ms;\n  }\n"])));
 const TreeItem = react.memo(function TreeItem2(props) {
   const {
     children,
@@ -9722,7 +9724,7 @@ const TreeItem = react.memo(function TreeItem2(props) {
     text,
     weight
   } = props,
-        restProps = _objectWithoutProperties(props, _excluded48);
+        restProps = _objectWithoutProperties(props, _excluded49);
 
   const rootRef = react.useRef(null);
   const treeitemRef = react.useRef(null);