@sanity/ui 3.0.0-static.27 → 3.0.0-static.29

package/dist/_chunks-es/_visual-editing.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { c } from "react-compiler-runtime";
+import { c } from "react/compiler-runtime";
 import { getScopedTheme, getTheme_v2 } from "@sanity/ui/theme";
-import { createContext, useContext, useEffect, useDebugValue, useState, useSyncExternalStore, isValidElement, lazy, Suspense, useRef, useImperativeHandle, useMemo, useCallback, cloneElement, useId, useLayoutEffect, Children } from "react";
+import { createContext, useContext, useState, isValidElement, useDebugValue, useSyncExternalStore, useRef, useImperativeHandle, useEffect, useMemo, useCallback, cloneElement, Children, useId, useLayoutEffect } from "react";
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1 } from "styled-components";
-import { BREAKPOINTS, _arrow, vars, _arrowSvg, _arrowStrokeMask, _arrowStroke, _arrowShape, box, text, textOverflow, animatedSpinnerIcon, spinner, button, buttonLoadingBox, card, code, kbd, popoverCard, popover, stack, textInput, textInputPrefix, textInputElement, _inputElement, _inputPresentation, textInputSuffix, tooltip, menu, menuDivider, _selectable } from "@sanity/ui/css";
-import { ResizeObserver } from "@juggle/resize-observer";
+import { box, _selectable, text, textOverflow, animatedSpinnerIcon, spinner, button, buttonLoadingBox, card, BREAKPOINTS, _arrow, vars, _arrowSvg, _arrowStrokeMask, _arrowStroke, _arrowShape, popoverCard, popover, stack, textInput, textInputPrefix, textInputElement, _inputElement, _inputPresentation, textInputSuffix, kbd, menu, menuDivider, tooltip } from "@sanity/ui/css";
 import { useEffectEvent } from "use-effect-event";
 import { SpinnerIcon, CloseIcon, ChevronRightIcon } from "@sanity/icons";
 import { isValidElementType } from "react-is";
@@ -174,188 +173,6 @@ function _getArrayProp(val, defaultVal) {
 function _getResponsiveProp(val, defaultVal) {
   return val === void 0 ? defaultVal || EMPTY_ARRAY : isArray(val) || isRecord(val) ? val : [val];
 }
-function useClickOutsideEvent(listener, t0, boundaryElement) {
-  const $ = c(9), elementsArg = t0 === void 0 ? _temp$5 : t0;
-  let t1;
-  $[0] !== boundaryElement || $[1] !== elementsArg || $[2] !== listener ? (t1 = (evt) => {
-    if (!listener)
-      return;
-    const target = evt.target;
-    if (!(target instanceof Node))
-      return;
-    const resolvedBoundaryElement = boundaryElement?.();
-    if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target))
-      return;
-    const elements = elementsArg().flat();
-    for (const el of elements)
-      if (el && (target === el || el.contains(target)))
-        return;
-    listener(evt);
-  }, $[0] = boundaryElement, $[1] = elementsArg, $[2] = listener, $[3] = t1) : t1 = $[3];
-  const onEvent = useEffectEvent(t1), hasListener = !!listener;
-  let t2;
-  $[4] !== hasListener || $[5] !== onEvent ? (t2 = () => {
-    if (!hasListener)
-      return;
-    const handleEvent = (evt_0) => onEvent(evt_0);
-    return document.addEventListener("mousedown", handleEvent), () => {
-      document.removeEventListener("mousedown", handleEvent);
-    };
-  }, $[4] = hasListener, $[5] = onEvent, $[6] = t2) : t2 = $[6];
-  let t3;
-  $[7] !== hasListener ? (t3 = [hasListener], $[7] = hasListener, $[8] = t3) : t3 = $[8], useEffect(t2, t3), useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
-}
-function _temp$5() {
-  return EMPTY_ARRAY;
-}
-function useCustomValidity(ref, customValidity) {
-  const $ = c(6);
-  let t0;
-  $[0] !== customValidity || $[1] !== ref.current ? (t0 = () => {
-    ref.current?.setCustomValidity(customValidity || "");
-  }, $[0] = customValidity, $[1] = ref.current, $[2] = t0) : t0 = $[2];
-  let t1;
-  $[3] !== customValidity || $[4] !== ref ? (t1 = [customValidity, ref], $[3] = customValidity, $[4] = ref, $[5] = t1) : t1 = $[5], useEffect(t0, t1);
-}
-const _ResizeObserver = typeof document < "u" && typeof window < "u" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver, _elementSizeObserver = _createElementSizeObserver();
-function _createElementRectValueListener() {
-  return {
-    subscribe(element, subscriber) {
-      const resizeObserver = new _ResizeObserver(([entry]) => {
-        subscriber({
-          _contentRect: entry.contentRect,
-          border: {
-            width: entry.borderBoxSize[0].inlineSize,
-            height: entry.borderBoxSize[0].blockSize
-          },
-          content: {
-            width: entry.contentRect.width,
-            height: entry.contentRect.height
-          }
-        });
-      });
-      return resizeObserver.observe(element), () => {
-        resizeObserver.unobserve(element), resizeObserver.disconnect();
-      };
-    }
-  };
-}
-function _createElementSizeObserver() {
-  const disposeCache = /* @__PURE__ */ new WeakMap(), subscribersCache = /* @__PURE__ */ new WeakMap();
-  return {
-    subscribe(element, subscriber) {
-      const subscribers = subscribersCache.get(element) || [];
-      let dispose = disposeCache.get(element);
-      return subscribersCache.has(element) || (subscribersCache.set(element, subscribers), dispose = _createElementRectValueListener().subscribe(element, (elementRect) => {
-        for (const sub of subscribers)
-          sub(elementRect);
-      })), subscribers.push(subscriber), () => {
-        const idx = subscribers.indexOf(subscriber);
-        idx > -1 && subscribers.splice(idx, 1), subscribers.length === 0 && dispose && dispose();
-      };
-    }
-  };
-}
-function useElementSize(element) {
-  const $ = c(3), [size2, setSize] = useState(null);
-  let t0, t1;
-  return $[0] !== element ? (t0 = () => {
-    if (element)
-      return _elementSizeObserver.subscribe(element, setSize);
-  }, t1 = [element], $[0] = element, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), useEffect(t0, t1), size2;
-}
-function useGlobalKeyDown(onKeyDown) {
-  const $ = c(5);
-  let t0;
-  $[0] !== onKeyDown ? (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0) : t0 = $[1];
-  const handleKeyDown = useEffectEvent(t0);
-  let t1;
-  $[2] !== handleKeyDown ? (t1 = () => {
-    const handler = (event_0) => handleKeyDown(event_0);
-    return window.addEventListener("keydown", handler), () => window.removeEventListener("keydown", handler);
-  }, $[2] = handleKeyDown, $[3] = t1) : t1 = $[3];
-  let t2;
-  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[4] = t2) : t2 = $[4], useEffect(t1, t2);
-}
-function useMatchMedia(mediaQueryString, getServerSnapshot2) {
-  const $ = c(4);
-  useDebugValue(mediaQueryString);
-  let t0;
-  $[0] !== mediaQueryString ? (t0 = (onStoreChange) => {
-    const media2 = window.matchMedia(mediaQueryString);
-    return media2.addEventListener("change", onStoreChange), () => media2.removeEventListener("change", onStoreChange);
-  }, $[0] = mediaQueryString, $[1] = t0) : t0 = $[1];
-  let t1;
-  return $[2] !== mediaQueryString ? (t1 = () => window.matchMedia(mediaQueryString).matches, $[2] = mediaQueryString, $[3] = t1) : t1 = $[3], useSyncExternalStore(t0, t1, getServerSnapshot2);
-}
-const media = Object.values(BREAKPOINTS);
-function _getMediaQuery(media2, index) {
-  return index === 0 ? `screen and (max-width: ${media2[index + 1] - 1}px)` : index === media2.length - 1 ? `screen and (min-width: ${media2[index]}px)` : `screen and (min-width: ${media2[index]}px) and (max-width: ${media2[index + 1] - 1}px)`;
-}
-function _createMediaStore() {
-  const mediaLen = media.length;
-  let sizes;
-  const getSizes = () => {
-    if (!sizes) {
-      sizes = [];
-      for (let index = mediaLen; index > -1; index -= 1) {
-        const mediaQuery = _getMediaQuery(media, index);
-        sizes.push({
-          index,
-          mq: window.matchMedia(mediaQuery)
-        });
-      }
-    }
-    return sizes;
-  };
-  return {
-    getSnapshot: () => {
-      for (const {
-        index,
-        mq
-      } of getSizes())
-        if (mq.matches) return index;
-      return 0;
-    },
-    subscribe: (onStoreChange) => {
-      const disposeFns = [];
-      for (const {
-        mq
-      } of getSizes()) {
-        const handleChange = () => {
-          mq.matches && onStoreChange();
-        };
-        mq.addEventListener("change", handleChange), disposeFns.push(() => mq.removeEventListener("change", handleChange));
-      }
-      return () => {
-        for (const disposeFn of disposeFns)
-          disposeFn();
-      };
-    }
-  };
-}
-function getServerSnapshot() {
-  return 0;
-}
-function useMediaIndex() {
-  const $ = c(1);
-  let t0, t1;
-  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = _createMediaStore(), $[0] = t1) : t1 = $[0], t0 = t1;
-  const store = t0;
-  return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
-}
-function usePrefersDark(t0) {
-  return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$4 : t0);
-}
-function _temp$4() {
-  return !1;
-}
-function usePrefersReducedMotion(t0) {
-  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$3 : t0);
-}
-function _temp$3() {
-  return !1;
-}
 function useResponsiveProp(val, defaultVal) {
   const $ = c(3);
   let t0;
@@ -363,113 +180,6 @@ function useResponsiveProp(val, defaultVal) {
   const [t1, setCache] = useState(t0), [cachedVal, cachedHash] = t1, hash = JSON.stringify(val ?? defaultVal);
   return hash !== cachedHash && setCache([_getResponsiveProp(val, defaultVal), hash]), cachedVal;
 }
-function moveTowardsLength(movingPoint, targetPoint, amount) {
-  const width = targetPoint.x - movingPoint.x, height = targetPoint.y - movingPoint.y, distance = Math.sqrt(width * width + height * height);
-  return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance));
-}
-function moveTowardsFractional(movingPoint, targetPoint, fraction) {
-  return {
-    x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
-    y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction
-  };
-}
-function getRoundedCommands(points) {
-  const len = points.length, cmds = [];
-  for (let i = 0; i < len; i += 1) {
-    const point = points[i], prevPoint = points[i - 1], nextPoint = points[i + 1];
-    if (prevPoint && point.radius) {
-      const curveStart = moveTowardsLength(point, prevPoint, point.radius), curveEnd = moveTowardsLength(point, nextPoint, point.radius), startControl = moveTowardsFractional(curveStart, point, 0.5), endControl = moveTowardsFractional(point, curveEnd, 0.5);
-      cmds.push({
-        type: "point",
-        ...curveStart
-      }), cmds.push({
-        type: "curve",
-        curveEnd,
-        startControl,
-        endControl
-      });
-    } else
-      cmds.push({
-        type: "point",
-        ...point
-      });
-  }
-  return cmds;
-}
-function compileCommands(cmds) {
-  return cmds.map((n, idx) => n.type === "point" ? `${idx === 0 ? "M" : "L"} ${n.x} ${n.y}` : n.type === "curve" ? `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}` : "").join(" ");
-}
-const DEFAULT_ARROW_ELEMENT = "div";
-function Arrow(props) {
-  const $ = c(34), t0 = props;
-  let h, rest, style, t1, t2, w;
-  $[0] !== t0 ? ({
-    as: t1,
-    width: w,
-    height: h,
-    radius: t2,
-    style,
-    ...rest
-  } = t0, $[0] = t0, $[1] = h, $[2] = rest, $[3] = style, $[4] = t1, $[5] = t2, $[6] = w) : (h = $[1], rest = $[2], style = $[3], t1 = $[4], t2 = $[5], w = $[6]);
-  const Element = t1 === void 0 ? DEFAULT_ARROW_ELEMENT : t1, radius = t2 === void 0 ? 0 : t2, center = w / 2;
-  let t3;
-  const points = [{
-    x: 0,
-    y: 0
-  }, {
-    x: radius,
-    y: 0,
-    radius
-  }, {
-    x: center,
-    y: h - 1,
-    radius
-  }, {
-    x: w - radius,
-    y: 0,
-    radius
-  }, {
-    x: w,
-    y: 0
-  }], cmds = getRoundedCommands(points);
-  t3 = compileCommands(cmds);
-  const path = t3, strokePath = `${path}`, fillPath = `${path} M ${w} -1 M 0 -1 Z`;
-  let t4;
-  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = _arrow(), $[7] = t4) : t4 = $[7];
-  const t5 = `${w}px`;
-  let t6;
-  $[8] !== t5 ? (t6 = assignInlineVars({
-    [vars.arrow.size]: t5
-  }), $[8] = t5, $[9] = t6) : t6 = $[9];
-  let t7;
-  $[10] !== style || $[11] !== t6 ? (t7 = {
-    ...style,
-    ...t6
-  }, $[10] = style, $[11] = t6, $[12] = t7) : t7 = $[12];
-  let t8;
-  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t8 = _arrowSvg(), $[13] = t8) : t8 = $[13];
-  const t9 = `0 0 ${w} ${w}`;
-  let t10;
-  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t10 = _arrowStrokeMask(), $[14] = t10) : t10 = $[14];
-  let t11;
-  $[15] !== w ? (t11 = /* @__PURE__ */ jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsx("rect", { className: t10, x: 0, width: w, height: w, fill: "white" }) }), $[15] = w, $[16] = t11) : t11 = $[16];
-  let t12;
-  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t12 = _arrowStroke(), $[17] = t12) : t12 = $[17];
-  let t13;
-  $[18] !== strokePath ? (t13 = /* @__PURE__ */ jsx("path", { className: t12, d: strokePath, mask: "url(#stroke-mask)" }), $[18] = strokePath, $[19] = t13) : t13 = $[19];
-  let t14;
-  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t14 = _arrowShape(), $[20] = t14) : t14 = $[20];
-  let t15;
-  $[21] !== fillPath ? (t15 = /* @__PURE__ */ jsx("path", { className: t14, d: fillPath }), $[21] = fillPath, $[22] = t15) : t15 = $[22];
-  let t16;
-  $[23] !== t11 || $[24] !== t13 || $[25] !== t15 || $[26] !== t9 || $[27] !== w ? (t16 = /* @__PURE__ */ jsxs("svg", { className: t8, width: w, height: w, viewBox: t9, children: [
-    t11,
-    t13,
-    t15
-  ] }), $[23] = t11, $[24] = t13, $[25] = t15, $[26] = t9, $[27] = w, $[28] = t16) : t16 = $[28];
-  let t17;
-  return $[29] !== Element || $[30] !== rest || $[31] !== t16 || $[32] !== t7 ? (t17 = /* @__PURE__ */ jsx(Element, { ...rest, className: t4, style: t7, children: t16 }), $[29] = Element, $[30] = rest, $[31] = t16, $[32] = t7, $[33] = t17) : t17 = $[33], t17;
-}
 const DEFAULT_BOX_ELEMENT = "div";
 function Box(props) {
   const $ = c(154), t0 = props;
@@ -630,42 +340,67 @@ function Box(props) {
   let t10;
   return $[149] !== Element || $[150] !== children || $[151] !== rest || $[152] !== t9 ? (t10 = /* @__PURE__ */ jsx(Element, { "data-ui": "Box", ...rest, className: t9, children }), $[149] = Element, $[150] = children, $[151] = rest, $[152] = t9, $[153] = t10) : t10 = $[153], t10;
 }
-const DEFAULT_TEXT_ELEMENT = "div";
-function Text(props) {
-  const $ = c(30), t0 = props;
-  let accent, align, children, className, flex, muted, rest, t1, t2, t3, textOverflowProp;
-  $[0] !== t0 ? ({
+const DEFAULT_SELECTABLE_ELEMENT = "button";
+function Selectable(props) {
+  const $ = c(16), t0 = props;
+  let className, radius, rest, selected, t1, tone;
+  $[0] !== t0 ? ({
+    as: t1,
+    className,
+    radius,
+    selected,
+    tone,
+    ...rest
+  } = t0, $[0] = t0, $[1] = className, $[2] = radius, $[3] = rest, $[4] = selected, $[5] = t1, $[6] = tone) : (className = $[1], radius = $[2], rest = $[3], selected = $[4], t1 = $[5], tone = $[6]);
+  const as = t1 === void 0 ? DEFAULT_SELECTABLE_ELEMENT : t1;
+  let t2;
+  $[7] !== className || $[8] !== radius || $[9] !== tone ? (t2 = _selectable({
+    className,
+    radius,
+    tone
+  }), $[7] = className, $[8] = radius, $[9] = tone, $[10] = t2) : t2 = $[10];
+  const t3 = selected ? "" : void 0;
+  let t4;
+  return $[11] !== as || $[12] !== rest || $[13] !== t2 || $[14] !== t3 ? (t4 = /* @__PURE__ */ jsx(Box, { ...rest, as, className: t2, "data-selected": t3 }), $[11] = as, $[12] = rest, $[13] = t2, $[14] = t3, $[15] = t4) : t4 = $[15], t4;
+}
+const DEFAULT_TEXT_ELEMENT = "div";
+function Text(props) {
+  const $ = c(32), t0 = props;
+  let accent, align, children, className, flex, muted, rest, t1, t2, t3, t4, textOverflowProp;
+  $[0] !== t0 ? ({
     accent,
     align,
     as: t1,
     children,
     className,
     flex,
+    maxWidth: t2,
     muted,
-    size: t2,
+    size: t3,
     textOverflow: textOverflowProp,
-    weight: t3,
+    weight: t4,
     ...rest
-  } = t0, $[0] = t0, $[1] = accent, $[2] = align, $[3] = children, $[4] = className, $[5] = flex, $[6] = muted, $[7] = rest, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = textOverflowProp) : (accent = $[1], align = $[2], children = $[3], className = $[4], flex = $[5], muted = $[6], rest = $[7], t1 = $[8], t2 = $[9], t3 = $[10], textOverflowProp = $[11]);
-  const Element = t1 === void 0 ? DEFAULT_TEXT_ELEMENT : t1, size2 = t2 === void 0 ? 2 : t2, weight = t3 === void 0 ? "regular" : t3;
-  let t4;
-  $[12] !== accent || $[13] !== align || $[14] !== className || $[15] !== flex || $[16] !== muted || $[17] !== size2 || $[18] !== weight ? (t4 = text({
+  } = t0, $[0] = t0, $[1] = accent, $[2] = align, $[3] = children, $[4] = className, $[5] = flex, $[6] = muted, $[7] = rest, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = t4, $[12] = textOverflowProp) : (accent = $[1], align = $[2], children = $[3], className = $[4], flex = $[5], muted = $[6], rest = $[7], t1 = $[8], t2 = $[9], t3 = $[10], t4 = $[11], textOverflowProp = $[12]);
+  const Element = t1 === void 0 ? DEFAULT_TEXT_ELEMENT : t1, maxWidth = t2 === void 0 ? "fill" : t2, size2 = t3 === void 0 ? 2 : t3, weight = t4 === void 0 ? "regular" : t4;
+  let t5;
+  $[13] !== accent || $[14] !== align || $[15] !== className || $[16] !== flex || $[17] !== maxWidth || $[18] !== muted || $[19] !== size2 || $[20] !== weight ? (t5 = text({
     className,
     accent,
     align,
     flex,
+    maxWidth,
     muted,
     size: size2,
     weight
-  }), $[12] = accent, $[13] = align, $[14] = className, $[15] = flex, $[16] = muted, $[17] = size2, $[18] = weight, $[19] = t4) : t4 = $[19];
-  let t5;
-  $[20] !== textOverflowProp ? (t5 = textOverflow({
-    textOverflow: textOverflowProp
-  }), $[20] = textOverflowProp, $[21] = t5) : t5 = $[21];
+  }), $[13] = accent, $[14] = align, $[15] = className, $[16] = flex, $[17] = maxWidth, $[18] = muted, $[19] = size2, $[20] = weight, $[21] = t5) : t5 = $[21];
   let t6;
-  $[22] !== children || $[23] !== t5 ? (t6 = /* @__PURE__ */ jsx("span", { className: t5, children }), $[22] = children, $[23] = t5, $[24] = t6) : t6 = $[24];
+  $[22] !== textOverflowProp ? (t6 = textOverflow({
+    textOverflow: textOverflowProp
+  }), $[22] = textOverflowProp, $[23] = t6) : t6 = $[23];
   let t7;
-  return $[25] !== Element || $[26] !== rest || $[27] !== t4 || $[28] !== t6 ? (t7 = /* @__PURE__ */ jsx(Element, { "data-ui": "Text", ...rest, className: t4, children: t6 }), $[25] = Element, $[26] = rest, $[27] = t4, $[28] = t6, $[29] = t7) : t7 = $[29], t7;
+  $[24] !== children || $[25] !== t6 ? (t7 = /* @__PURE__ */ jsx("span", { className: t6, children }), $[24] = children, $[25] = t6, $[26] = t7) : t7 = $[26];
+  let t8;
+  return $[27] !== Element || $[28] !== rest || $[29] !== t5 || $[30] !== t7 ? (t8 = /* @__PURE__ */ jsx(Element, { "data-ui": "Text", ...rest, className: t5, children: t7 }), $[27] = Element, $[28] = rest, $[29] = t5, $[30] = t7, $[31] = t8) : t8 = $[31], t8;
 }
 function AnimatedSpinnerIcon(props) {
   const $ = c(5);
@@ -705,7 +440,6 @@ function Button(props) {
     children,
     className,
     disabled,
-    display = "inline-flex",
     flex,
     fontSize = 1,
     gap = props.space ?? props.padding ?? 3,
@@ -745,7 +479,6 @@ function Button(props) {
       ...rest,
       className: button({
         className,
-        display,
         flex,
         mode,
         radius,
@@ -764,7 +497,7 @@ function Button(props) {
             isValidElement(IconComponent) && IconComponent,
             isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
           ] }),
-          text2 && /* @__PURE__ */ jsx(Text, { align: textAlign, as: "span", flex: "none", muted, size: fontSize, textOverflow: textOverflow2, weight: textWeight, children: text2 }),
+          text2 && /* @__PURE__ */ jsx(Box, { as: "span", maxWidth: "auto", children: /* @__PURE__ */ jsx(Text, { align: textAlign, as: "span", muted, size: fontSize, textOverflow: textOverflow2, weight: textWeight, children: text2 }) }),
           IconRightComponent && /* @__PURE__ */ jsxs(Text, { as: "span", flex: "none", muted: !0, size: fontSize, children: [
             isValidElement(IconRightComponent) && IconRightComponent,
             isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
@@ -775,6 +508,64 @@ function Button(props) {
     }
   );
 }
+function useMatchMedia(mediaQueryString, getServerSnapshot2) {
+  const $ = c(4);
+  useDebugValue(mediaQueryString);
+  let t0;
+  $[0] !== mediaQueryString ? (t0 = (onStoreChange) => {
+    const media2 = window.matchMedia(mediaQueryString);
+    return media2.addEventListener("change", onStoreChange), () => media2.removeEventListener("change", onStoreChange);
+  }, $[0] = mediaQueryString, $[1] = t0) : t0 = $[1];
+  let t1;
+  return $[2] !== mediaQueryString ? (t1 = () => window.matchMedia(mediaQueryString).matches, $[2] = mediaQueryString, $[3] = t1) : t1 = $[3], useSyncExternalStore(t0, t1, getServerSnapshot2);
+}
+function usePrefersReducedMotion(t0) {
+  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$5 : t0);
+}
+function _temp$5() {
+  return !1;
+}
+const origin = {
+  name: "@sanity/ui/origin",
+  fn({
+    middlewareData,
+    placement,
+    rects
+  }) {
+    const [side] = placement.split("-"), floatingWidth = rects.floating.width, floatingHeight = rects.floating.height, shiftX = middlewareData.shift?.x || 0, shiftY = middlewareData.shift?.y || 0;
+    if (floatingWidth <= 0 || floatingHeight <= 0)
+      return {};
+    const isVerticalPlacement = ["bottom", "top"].includes(side), {
+      originX,
+      originY
+    } = isVerticalPlacement ? {
+      originX: clamp(0.5 - shiftX / floatingWidth, 0, 1),
+      originY: side === "bottom" ? 0 : 1
+    } : {
+      originX: side === "left" ? 1 : 0,
+      originY: clamp(0.5 - shiftY / floatingHeight, 0, 1)
+    };
+    return {
+      data: {
+        originX,
+        originY
+      }
+    };
+  }
+};
+function clamp(num, min, max) {
+  return Math.min(Math.max(num, min), max);
+}
+const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null), DEFAULT_VALUE = {
+  version: 0,
+  element: null
+};
+function useBoundaryElement() {
+  const value = useContext(BoundaryElementContext);
+  if (value && (!isRecord(value) || value.version !== 0))
+    throw new Error("useBoundaryElement(): the context value is not compatible");
+  return value || DEFAULT_VALUE;
+}
 function useCard() {
   return useContext(CardContext);
 }
@@ -818,88 +609,73 @@ function Card(props) {
   }
   return node;
 }
-const LazyRefractor = lazy(() => import("./refractor.js")), DEFAULT_CODE_ELEMENT = "pre";
-function Code(props) {
-  const $ = c(25), t0 = props;
-  let children, className, languageProp, rest, t1, t2, t3;
-  $[0] !== t0 ? ({
-    as: t1,
-    children,
-    className,
-    language: languageProp,
-    size: t2,
-    weight: t3,
-    ...rest
-  } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = languageProp, $[4] = rest, $[5] = t1, $[6] = t2, $[7] = t3) : (children = $[1], className = $[2], languageProp = $[3], rest = $[4], t1 = $[5], t2 = $[6], t3 = $[7]);
-  const Element = t1 === void 0 ? DEFAULT_CODE_ELEMENT : t1, size2 = t2 === void 0 ? 2 : t2, weight = t3 === void 0 ? "regular" : t3, language = typeof languageProp == "string" ? languageProp : void 0;
-  let t4;
-  $[8] !== className || $[9] !== size2 || $[10] !== weight ? (t4 = code({
-    className,
-    size: size2,
-    weight
-  }), $[8] = className, $[9] = size2, $[10] = weight, $[11] = t4) : t4 = $[11];
-  let t5;
-  $[12] !== children ? (t5 = /* @__PURE__ */ jsx("code", { children }), $[12] = children, $[13] = t5) : t5 = $[13];
-  let t6;
-  $[14] !== children || $[15] !== language ? (t6 = /* @__PURE__ */ jsx(LazyRefractor, { language, value: children }), $[14] = children, $[15] = language, $[16] = t6) : t6 = $[16];
-  let t7;
-  $[17] !== t5 || $[18] !== t6 ? (t7 = /* @__PURE__ */ jsx(Suspense, { fallback: t5, children: t6 }), $[17] = t5, $[18] = t6, $[19] = t7) : t7 = $[19];
-  let t8;
-  return $[20] !== Element || $[21] !== rest || $[22] !== t4 || $[23] !== t7 ? (t8 = /* @__PURE__ */ jsx(Element, { "data-ui": "Code", ...rest, className: t4, children: t7 }), $[20] = Element, $[21] = rest, $[22] = t4, $[23] = t7, $[24] = t8) : t8 = $[24], t8;
-}
-const DEFAULT_FLEX_ELEMENT = "div";
-function Flex(props) {
-  const $ = c(14), t0 = props;
-  let align, justify, rest, t1, t2, wrap;
-  $[0] !== t0 ? ({
-    align,
-    as: t1,
-    direction: t2,
-    justify,
-    wrap,
-    ...rest
-  } = t0, $[0] = t0, $[1] = align, $[2] = justify, $[3] = rest, $[4] = t1, $[5] = t2, $[6] = wrap) : (align = $[1], justify = $[2], rest = $[3], t1 = $[4], t2 = $[5], wrap = $[6]);
-  const as = t1 === void 0 ? DEFAULT_FLEX_ELEMENT : t1, direction = t2 === void 0 ? "row" : t2;
-  let t3;
-  return $[7] !== align || $[8] !== as || $[9] !== direction || $[10] !== justify || $[11] !== rest || $[12] !== wrap ? (t3 = /* @__PURE__ */ jsx(Box, { "data-ui": "Flex", ...rest, alignItems: align, as, display: "flex", flexDirection: direction, flexWrap: wrap, justifyContent: justify }), $[7] = align, $[8] = as, $[9] = direction, $[10] = justify, $[11] = rest, $[12] = wrap, $[13] = t3) : t3 = $[13], t3;
+const key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`);
+globalScope[elementKey] = null;
+const defaultContextValue = {
+  version: 0,
+  boundaryElement: null,
+  get element() {
+    return typeof document > "u" ? null : (globalScope[elementKey] || (globalScope[elementKey] = document.createElement("div"), globalScope[elementKey].setAttribute("data-portal", ""), document.body.appendChild(globalScope[elementKey])), globalScope[elementKey]);
+  }
+}, PortalContext = createGlobalScopedContext(key, defaultContextValue);
+function usePortal() {
+  const value = useContext(PortalContext);
+  if (!value)
+    throw new Error("usePortal(): missing context value");
+  if (!isRecord(value) || value.version !== 0)
+    throw new Error("usePortal(): the context value is not compatible");
+  return value;
 }
-const DEFAULT_GRID_ELEMENT = "div";
-function Grid(props) {
-  const $ = c(8), t0 = props;
-  let children, rest, t1;
-  $[0] !== t0 ? ({
-    as: t1,
+function Portal(props) {
+  const $ = c(6), {
     children,
-    ...rest
-  } = t0, $[0] = t0, $[1] = children, $[2] = rest, $[3] = t1) : (children = $[1], rest = $[2], t1 = $[3]);
-  const as = t1 === void 0 ? DEFAULT_GRID_ELEMENT : t1;
+    __unstable_name: name
+  } = props, card2 = useCard(), portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
+  if (!portalElement)
+    return null;
+  const t0 = card2?.scheme || "light";
+  let t1;
+  $[0] !== children || $[1] !== t0 ? (t1 = /* @__PURE__ */ jsx(CardProvider, { tone: "transparent", scheme: t0, children }), $[0] = children, $[1] = t0, $[2] = t1) : t1 = $[2];
   let t2;
-  return $[4] !== as || $[5] !== children || $[6] !== rest ? (t2 = /* @__PURE__ */ jsx(Box, { "data-ui": "Grid", ...rest, as, display: "grid", children }), $[4] = as, $[5] = children, $[6] = rest, $[7] = t2) : t2 = $[7], t2;
+  return $[3] !== portalElement || $[4] !== t1 ? (t2 = createPortal(t1, portalElement), $[3] = portalElement, $[4] = t1, $[5] = t2) : t2 = $[5], t2;
 }
-const DEFAULT_KBD_ELEMENT = "kbd";
-function KBD(props) {
-  const $ = c(22), t0 = props;
-  let children, className, rest, t1, t2, t3, t4, t5;
-  $[0] !== t0 ? ({
-    as: t1,
+function PortalProvider(props) {
+  const $ = c(7), {
+    boundaryElement,
     children,
-    className,
-    display: t2,
-    fontSize: t3,
-    padding: t4,
-    radius: t5,
-    ...rest
-  } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = rest, $[4] = t1, $[5] = t2, $[6] = t3, $[7] = t4, $[8] = t5) : (children = $[1], className = $[2], rest = $[3], t1 = $[4], t2 = $[5], t3 = $[6], t4 = $[7], t5 = $[8]);
-  const as = t1 === void 0 ? DEFAULT_KBD_ELEMENT : t1, display = t2 === void 0 ? "inline-block" : t2, fontSize = t3 === void 0 ? 0 : t3, padding = t4 === void 0 ? 1 : t4, radius = t5 === void 0 ? 2 : t5, t6 = as;
-  let t7;
-  $[9] !== className || $[10] !== radius ? (t7 = kbd({
-    className,
-    radius
-  }), $[9] = className, $[10] = radius, $[11] = t7) : t7 = $[11];
-  let t8;
-  $[12] !== children || $[13] !== fontSize ? (t8 = /* @__PURE__ */ jsx(Text, { as: "span", muted: !0, size: fontSize, weight: "semibold", children }), $[12] = children, $[13] = fontSize, $[14] = t8) : t8 = $[14];
-  let t9;
-  return $[15] !== display || $[16] !== padding || $[17] !== rest || $[18] !== t6 || $[19] !== t7 || $[20] !== t8 ? (t9 = /* @__PURE__ */ jsx(Box, { "data-ui": "KBD", ...rest, as: t6, className: t7, display, muted: !0, padding, children: t8 }), $[15] = display, $[16] = padding, $[17] = rest, $[18] = t6, $[19] = t7, $[20] = t8, $[21] = t9) : t9 = $[21], t9;
+    element,
+    __unstable_elements: elementsProp
+  } = props, elements = useUnique(elementsProp), fallbackElement = useSyncExternalStore(emptySubscribe, _temp$4, _temp2$2);
+  let t0;
+  const t1 = boundaryElement || null, t2 = element || fallbackElement;
+  let t3;
+  $[0] !== elements || $[1] !== t1 || $[2] !== t2 ? (t3 = {
+    version: 0,
+    boundaryElement: t1,
+    element: t2,
+    elements
+  }, $[0] = elements, $[1] = t1, $[2] = t2, $[3] = t3) : t3 = $[3], t0 = t3;
+  const value = t0;
+  let t4;
+  return $[4] !== children || $[5] !== value ? (t4 = /* @__PURE__ */ jsx(PortalContext.Provider, { value, children }), $[4] = children, $[5] = value, $[6] = t4) : t4 = $[6], t4;
+}
+function _temp2$2() {
+  return null;
+}
+function _temp$4() {
+  return document.body;
+}
+const emptySubscribe = () => () => {
+};
+function useUnique(value) {
+  const valueRef = useRef(value);
+  return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
+}
+function _isEqual(objA, objB) {
+  if (!objA || !objB)
+    return objA === objB;
+  const keysA = Object.keys(objA), keysB = Object.keys(objB);
+  return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
 }
 function getLayerContext(contextValue) {
   if (!isRecord(contextValue) || contextValue.version !== 0)
@@ -964,59 +740,115 @@ function LayerCard(props) {
   let t10;
   return $[20] !== children || $[21] !== handleFocus || $[22] !== position || $[23] !== rest || $[24] !== t8 || $[25] !== t9 ? (t10 = /* @__PURE__ */ jsx(Card, { "data-ui": "Layer", ...rest, as: t8, onFocus: handleFocus, position, ref, style: t9, children }), $[20] = children, $[21] = handleFocus, $[22] = position, $[23] = rest, $[24] = t8, $[25] = t9, $[26] = t10) : t10 = $[26], t10;
 }
-function LayerProvider(props) {
-  const $ = c(19), {
-    children,
-    zOffset: t0
-  } = props, zOffsetProp = t0 === void 0 ? 0 : t0, parentContextValue = useContext(LayerContext);
-  let t1;
-  $[0] !== parentContextValue ? (t1 = parentContextValue && getLayerContext(parentContextValue), $[0] = parentContextValue, $[1] = t1) : t1 = $[1];
-  const parent = t1, parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1, zOffset = useResponsiveProp(zOffsetProp), maxMediaIndex = Object.values(zOffset).length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + (zOffset[mediaIndex] ?? 0) : zOffset[mediaIndex] ?? 0;
-  let t2;
-  $[2] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {}, $[2] = t2) : t2 = $[2];
-  const [, setChildLayers] = useState(t2), [size2, setSize] = useState(0), isTopLayer = size2 === 0;
-  let t3;
-  $[3] !== parentRegisterChild || $[4] !== setChildLayers ? (t3 = (childLevel) => {
-    const parentDispose = parentRegisterChild?.(childLevel);
-    return childLevel !== void 0 ? setChildLayers((state) => {
-      const prevLen = state[childLevel] ?? 0, nextState = {
-        ...state,
-        [childLevel]: prevLen + 1
-      };
-      return setSize(Object.keys(nextState).length), nextState;
-    }) : setSize(_temp$2), () => {
-      childLevel !== void 0 ? setChildLayers((state_0) => {
-        const nextState_0 = {
-          ...state_0
-        };
-        return nextState_0[childLevel] === 1 ? (delete nextState_0[childLevel], setSize(Object.keys(nextState_0).length)) : nextState_0[childLevel] = nextState_0[childLevel] - 1, nextState_0;
-      }) : setSize(_temp2$2), parentDispose?.();
-    };
-  }, $[3] = parentRegisterChild, $[4] = setChildLayers, $[5] = t3) : t3 = $[5];
-  const registerChild = t3;
-  let t4, t5;
-  $[6] !== level || $[7] !== parentRegisterChild ? (t4 = () => parentRegisterChild?.(level), t5 = [level, parentRegisterChild], $[6] = level, $[7] = parentRegisterChild, $[8] = t4, $[9] = t5) : (t4 = $[8], t5 = $[9]), useEffect(t4, t5);
-  let t6, t7;
-  $[10] !== isTopLayer || $[11] !== level || $[12] !== registerChild || $[13] !== size2 || $[14] !== zIndex ? (t7 = {
-    version: 0,
-    isTopLayer,
-    level,
-    registerChild,
-    size: size2,
-    zIndex
-  }, $[10] = isTopLayer, $[11] = level, $[12] = registerChild, $[13] = size2, $[14] = zIndex, $[15] = t7) : t7 = $[15], t6 = t7;
-  const value = t6;
-  let t8;
-  return $[16] !== children || $[17] !== value ? (t8 = /* @__PURE__ */ jsx(LayerContext.Provider, { value, children }), $[16] = children, $[17] = value, $[18] = t8) : t8 = $[18], t8;
-}
-function _temp2$2(v_0) {
-  return v_0 - 1;
-}
-function _temp$2(v) {
-  return v + 1;
+const media = Object.values(BREAKPOINTS);
+function _getMediaQuery(media2, index) {
+  return index === 0 ? `screen and (max-width: ${media2[index + 1] - 1}px)` : index === media2.length - 1 ? `screen and (min-width: ${media2[index]}px)` : `screen and (min-width: ${media2[index]}px) and (max-width: ${media2[index + 1] - 1}px)`;
 }
-const DEFAULT_LAYER_ELEMENT = "div";
-function Layer(props) {
+function _createMediaStore() {
+  const mediaLen = media.length;
+  let sizes;
+  const getSizes = () => {
+    if (!sizes) {
+      sizes = [];
+      for (let index = mediaLen; index > -1; index -= 1) {
+        const mediaQuery = _getMediaQuery(media, index);
+        sizes.push({
+          index,
+          mq: window.matchMedia(mediaQuery)
+        });
+      }
+    }
+    return sizes;
+  };
+  return {
+    getSnapshot: () => {
+      for (const {
+        index,
+        mq
+      } of getSizes())
+        if (mq.matches) return index;
+      return 0;
+    },
+    subscribe: (onStoreChange) => {
+      const disposeFns = [];
+      for (const {
+        mq
+      } of getSizes()) {
+        const handleChange = () => {
+          mq.matches && onStoreChange();
+        };
+        mq.addEventListener("change", handleChange), disposeFns.push(() => mq.removeEventListener("change", handleChange));
+      }
+      return () => {
+        for (const disposeFn of disposeFns)
+          disposeFn();
+      };
+    }
+  };
+}
+function getServerSnapshot() {
+  return 0;
+}
+function useMediaIndex() {
+  const $ = c(1);
+  let t0, t1;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = _createMediaStore(), $[0] = t1) : t1 = $[0], t0 = t1;
+  const store = t0;
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
+}
+function LayerProvider(props) {
+  const $ = c(19), {
+    children,
+    zOffset: t0
+  } = props, zOffsetProp = t0 === void 0 ? 0 : t0, parentContextValue = useContext(LayerContext);
+  let t1;
+  $[0] !== parentContextValue ? (t1 = parentContextValue && getLayerContext(parentContextValue), $[0] = parentContextValue, $[1] = t1) : t1 = $[1];
+  const parent = t1, parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1, zOffset = useResponsiveProp(zOffsetProp), maxMediaIndex = Object.values(zOffset).length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + (zOffset[mediaIndex] ?? 0) : zOffset[mediaIndex] ?? 0;
+  let t2;
+  $[2] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {}, $[2] = t2) : t2 = $[2];
+  const [, setChildLayers] = useState(t2), [size2, setSize] = useState(0), isTopLayer = size2 === 0;
+  let t3;
+  $[3] !== parentRegisterChild || $[4] !== setChildLayers ? (t3 = (childLevel) => {
+    const parentDispose = parentRegisterChild?.(childLevel);
+    return childLevel !== void 0 ? setChildLayers((state) => {
+      const prevLen = state[childLevel] ?? 0, nextState = {
+        ...state,
+        [childLevel]: prevLen + 1
+      };
+      return setSize(Object.keys(nextState).length), nextState;
+    }) : setSize(_temp$3), () => {
+      childLevel !== void 0 ? setChildLayers((state_0) => {
+        const nextState_0 = {
+          ...state_0
+        };
+        return nextState_0[childLevel] === 1 ? (delete nextState_0[childLevel], setSize(Object.keys(nextState_0).length)) : nextState_0[childLevel] = nextState_0[childLevel] - 1, nextState_0;
+      }) : setSize(_temp2$1), parentDispose?.();
+    };
+  }, $[3] = parentRegisterChild, $[4] = setChildLayers, $[5] = t3) : t3 = $[5];
+  const registerChild = t3;
+  let t4, t5;
+  $[6] !== level || $[7] !== parentRegisterChild ? (t4 = () => parentRegisterChild?.(level), t5 = [level, parentRegisterChild], $[6] = level, $[7] = parentRegisterChild, $[8] = t4, $[9] = t5) : (t4 = $[8], t5 = $[9]), useEffect(t4, t5);
+  let t6, t7;
+  $[10] !== isTopLayer || $[11] !== level || $[12] !== registerChild || $[13] !== size2 || $[14] !== zIndex ? (t7 = {
+    version: 0,
+    isTopLayer,
+    level,
+    registerChild,
+    size: size2,
+    zIndex
+  }, $[10] = isTopLayer, $[11] = level, $[12] = registerChild, $[13] = size2, $[14] = zIndex, $[15] = t7) : t7 = $[15], t6 = t7;
+  const value = t6;
+  let t8;
+  return $[16] !== children || $[17] !== value ? (t8 = /* @__PURE__ */ jsx(LayerContext.Provider, { value, children }), $[16] = children, $[17] = value, $[18] = t8) : t8 = $[18], t8;
+}
+function _temp2$1(v_0) {
+  return v_0 - 1;
+}
+function _temp$3(v) {
+  return v + 1;
+}
+const DEFAULT_LAYER_ELEMENT = "div";
+function Layer(props) {
   const $ = c(12), t0 = props;
   let children, rest, t1, t2;
   $[0] !== t0 ? ({
@@ -1031,163 +863,6 @@ function Layer(props) {
   let t4;
   return $[9] !== t3 || $[10] !== zOffset ? (t4 = /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: t3 }), $[9] = t3, $[10] = zOffset, $[11] = t4) : t4 = $[11], t4;
 }
-const origin = {
-  name: "@sanity/ui/origin",
-  fn({
-    middlewareData,
-    placement,
-    rects
-  }) {
-    const [side] = placement.split("-"), floatingWidth = rects.floating.width, floatingHeight = rects.floating.height, shiftX = middlewareData.shift?.x || 0, shiftY = middlewareData.shift?.y || 0;
-    if (floatingWidth <= 0 || floatingHeight <= 0)
-      return {};
-    const isVerticalPlacement = ["bottom", "top"].includes(side), {
-      originX,
-      originY
-    } = isVerticalPlacement ? {
-      originX: clamp(0.5 - shiftX / floatingWidth, 0, 1),
-      originY: side === "bottom" ? 0 : 1
-    } : {
-      originX: side === "left" ? 1 : 0,
-      originY: clamp(0.5 - shiftY / floatingHeight, 0, 1)
-    };
-    return {
-      data: {
-        originX,
-        originY
-      }
-    };
-  }
-};
-function clamp(num, min, max) {
-  return Math.min(Math.max(num, min), max);
-}
-const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null), DEFAULT_VALUE = {
-  version: 0,
-  element: null
-};
-function useBoundaryElement() {
-  const value = useContext(BoundaryElementContext);
-  if (value && (!isRecord(value) || value.version !== 0))
-    throw new Error("useBoundaryElement(): the context value is not compatible");
-  return value || DEFAULT_VALUE;
-}
-function findMaxBreakpoints(media2, width) {
-  const ret = [];
-  for (let i = 0; i < media2.length; i += 1)
-    media2[i] > width && ret.push(i);
-  return ret;
-}
-function findMinBreakpoints(media2, width) {
-  const ret = [];
-  for (let i = 0; i < media2.length; i += 1)
-    media2[i] <= width && ret.push(i);
-  return ret;
-}
-const DEFAULT_ELEMENT_QUERY_ELEMENT = "div", DEFAULT_BREAKPOINTS = Object.values(BREAKPOINTS);
-function ElementQuery(props) {
-  const $ = c(21), t0 = props;
-  let children, forwardedRef, mediaProp, rest, t1;
-  $[0] !== t0 ? ({
-    as: t1,
-    children,
-    media: mediaProp,
-    ref: forwardedRef,
-    ...rest
-  } = t0, $[0] = t0, $[1] = children, $[2] = forwardedRef, $[3] = mediaProp, $[4] = rest, $[5] = t1) : (children = $[1], forwardedRef = $[2], mediaProp = $[3], rest = $[4], t1 = $[5]);
-  const Element = t1 === void 0 ? DEFAULT_ELEMENT_QUERY_ELEMENT : t1, breakpoints = mediaProp ?? DEFAULT_BREAKPOINTS, [element, setElement] = useState(null), elementSize = useElementSize(element);
-  let t2;
-  t2 = elementSize?.border.width ?? window.innerWidth;
-  const width = t2;
-  let t3, t4;
-  if ($[6] !== breakpoints || $[7] !== width) {
-    const eq = findMaxBreakpoints(breakpoints, width);
-    t4 = eq.length ? eq.join(" ") : void 0, $[6] = breakpoints, $[7] = width, $[8] = t4;
-  } else
-    t4 = $[8];
-  t3 = t4;
-  const max = t3;
-  let t5, t6;
-  if ($[9] !== breakpoints || $[10] !== width) {
-    const eq_0 = findMinBreakpoints(breakpoints, width);
-    t6 = eq_0.length ? eq_0.join(" ") : void 0, $[9] = breakpoints, $[10] = width, $[11] = t6;
-  } else
-    t6 = $[11];
-  t5 = t6;
-  const min = t5;
-  let t7, t8;
-  $[12] !== element ? (t7 = () => element, t8 = [element], $[12] = element, $[13] = t7, $[14] = t8) : (t7 = $[13], t8 = $[14]), useImperativeHandle(forwardedRef, t7, t8);
-  let t9;
-  return $[15] !== Element || $[16] !== children || $[17] !== max || $[18] !== min || $[19] !== rest ? (t9 = /* @__PURE__ */ jsx(Element, { "data-ui": "ElementQuery", ...rest, "data-eq-max": max, "data-eq-min": min, ref: setElement, children }), $[15] = Element, $[16] = children, $[17] = max, $[18] = min, $[19] = rest, $[20] = t9) : t9 = $[20], t9;
-}
-const key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`);
-globalScope[elementKey] = null;
-const defaultContextValue = {
-  version: 0,
-  boundaryElement: null,
-  get element() {
-    return typeof document > "u" ? null : (globalScope[elementKey] || (globalScope[elementKey] = document.createElement("div"), globalScope[elementKey].setAttribute("data-portal", ""), document.body.appendChild(globalScope[elementKey])), globalScope[elementKey]);
-  }
-}, PortalContext = createGlobalScopedContext(key, defaultContextValue);
-function usePortal() {
-  const value = useContext(PortalContext);
-  if (!value)
-    throw new Error("usePortal(): missing context value");
-  if (!isRecord(value) || value.version !== 0)
-    throw new Error("usePortal(): the context value is not compatible");
-  return value;
-}
-function Portal(props) {
-  const $ = c(6), {
-    children,
-    __unstable_name: name
-  } = props, card2 = useCard(), portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
-  if (!portalElement)
-    return null;
-  const t0 = card2?.scheme || "light";
-  let t1;
-  $[0] !== children || $[1] !== t0 ? (t1 = /* @__PURE__ */ jsx(CardProvider, { tone: "transparent", scheme: t0, children }), $[0] = children, $[1] = t0, $[2] = t1) : t1 = $[2];
-  let t2;
-  return $[3] !== portalElement || $[4] !== t1 ? (t2 = createPortal(t1, portalElement), $[3] = portalElement, $[4] = t1, $[5] = t2) : t2 = $[5], t2;
-}
-function PortalProvider(props) {
-  const $ = c(7), {
-    boundaryElement,
-    children,
-    element,
-    __unstable_elements: elementsProp
-  } = props, elements = useUnique(elementsProp), fallbackElement = useSyncExternalStore(emptySubscribe, _temp$1, _temp2$1);
-  let t0;
-  const t1 = boundaryElement || null, t2 = element || fallbackElement;
-  let t3;
-  $[0] !== elements || $[1] !== t1 || $[2] !== t2 ? (t3 = {
-    version: 0,
-    boundaryElement: t1,
-    element: t2,
-    elements
-  }, $[0] = elements, $[1] = t1, $[2] = t2, $[3] = t3) : t3 = $[3], t0 = t3;
-  const value = t0;
-  let t4;
-  return $[4] !== children || $[5] !== value ? (t4 = /* @__PURE__ */ jsx(PortalContext.Provider, { value, children }), $[4] = children, $[5] = value, $[6] = t4) : t4 = $[6], t4;
-}
-function _temp2$1() {
-  return null;
-}
-function _temp$1() {
-  return document.body;
-}
-const emptySubscribe = () => () => {
-};
-function useUnique(value) {
-  const valueRef = useRef(value);
-  return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
-}
-function _isEqual(objA, objB) {
-  if (!objA || !objB)
-    return objA === objB;
-  const keysA = Object.keys(objA), keysB = Object.keys(objB);
-  return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
-}
 const DEFAULT_POPOVER_DISTANCE = 4, DEFAULT_POPOVER_PADDING = 4, DEFAULT_POPOVER_ARROW_WIDTH = 19, DEFAULT_POPOVER_ARROW_HEIGHT = 8, DEFAULT_POPOVER_ARROW_RADIUS = 2, DEFAULT_POPOVER_MARGINS = [0, 0, 0, 0], DEFAULT_FALLBACK_PLACEMENTS$1 = {
   top: ["bottom", "left", "right"],
   "top-start": ["bottom-start", "left-start", "right-start"],
@@ -1243,39 +918,162 @@ function size(options) {
     }
   };
 }
-function PopoverLayer(props) {
-  const $ = c(65);
-  let animate, arrow2, arrowRef, arrowX, arrowY, children, marginsProp, maxWidth, originX, originY, overflow, padding, placement, radius, referenceWidth, rest, shadow, strategy, style, t0, xProp, yProp;
-  $[0] !== props ? ({
-    __unstable_margins: marginsProp,
-    animate,
-    arrow: arrow2,
-    arrowRef,
-    arrowX,
-    arrowY,
-    children,
-    maxWidth,
-    padding,
-    placement,
-    originX,
-    originY,
-    overflow,
-    radius,
-    referenceWidth,
-    shadow,
-    strategy,
-    style,
-    tone: t0,
-    x: xProp,
-    y: yProp,
-    ...rest
-  } = props, $[0] = props, $[1] = animate, $[2] = arrow2, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = marginsProp, $[8] = maxWidth, $[9] = originX, $[10] = originY, $[11] = overflow, $[12] = padding, $[13] = placement, $[14] = radius, $[15] = referenceWidth, $[16] = rest, $[17] = shadow, $[18] = strategy, $[19] = style, $[20] = t0, $[21] = xProp, $[22] = yProp) : (animate = $[1], arrow2 = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], marginsProp = $[7], maxWidth = $[8], originX = $[9], originY = $[10], overflow = $[11], padding = $[12], placement = $[13], radius = $[14], referenceWidth = $[15], rest = $[16], shadow = $[17], strategy = $[18], style = $[19], t0 = $[20], xProp = $[21], yProp = $[22]);
-  const tone = t0 === void 0 ? "inherit" : t0;
-  let t1;
-  t1 = marginsProp || DEFAULT_POPOVER_MARGINS;
-  const margins = t1, x = (xProp ?? 0) + margins[3], y = (yProp ?? 0) + margins[0];
-  let t2;
-  const t3 = animate ? "transform" : void 0;
+function moveTowardsLength(movingPoint, targetPoint, amount) {
+  const width = targetPoint.x - movingPoint.x, height = targetPoint.y - movingPoint.y, distance = Math.sqrt(width * width + height * height);
+  return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance));
+}
+function moveTowardsFractional(movingPoint, targetPoint, fraction) {
+  return {
+    x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
+    y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction
+  };
+}
+function getRoundedCommands(points) {
+  const len = points.length, cmds = [];
+  for (let i = 0; i < len; i += 1) {
+    const point = points[i], prevPoint = points[i - 1], nextPoint = points[i + 1];
+    if (prevPoint && point.radius) {
+      const curveStart = moveTowardsLength(point, prevPoint, point.radius), curveEnd = moveTowardsLength(point, nextPoint, point.radius), startControl = moveTowardsFractional(curveStart, point, 0.5), endControl = moveTowardsFractional(point, curveEnd, 0.5);
+      cmds.push({
+        type: "point",
+        ...curveStart
+      }), cmds.push({
+        type: "curve",
+        curveEnd,
+        startControl,
+        endControl
+      });
+    } else
+      cmds.push({
+        type: "point",
+        ...point
+      });
+  }
+  return cmds;
+}
+function compileCommands(cmds) {
+  return cmds.map((n, idx) => n.type === "point" ? `${idx === 0 ? "M" : "L"} ${n.x} ${n.y}` : n.type === "curve" ? `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}` : "").join(" ");
+}
+const DEFAULT_ARROW_ELEMENT = "div";
+function Arrow(props) {
+  const $ = c(34), t0 = props;
+  let h, rest, style, t1, t2, w;
+  $[0] !== t0 ? ({
+    as: t1,
+    width: w,
+    height: h,
+    radius: t2,
+    style,
+    ...rest
+  } = t0, $[0] = t0, $[1] = h, $[2] = rest, $[3] = style, $[4] = t1, $[5] = t2, $[6] = w) : (h = $[1], rest = $[2], style = $[3], t1 = $[4], t2 = $[5], w = $[6]);
+  const Element = t1 === void 0 ? DEFAULT_ARROW_ELEMENT : t1, radius = t2 === void 0 ? 0 : t2, center = w / 2;
+  let t3;
+  const points = [{
+    x: 0,
+    y: 0
+  }, {
+    x: radius,
+    y: 0,
+    radius
+  }, {
+    x: center,
+    y: h - 1,
+    radius
+  }, {
+    x: w - radius,
+    y: 0,
+    radius
+  }, {
+    x: w,
+    y: 0
+  }], cmds = getRoundedCommands(points);
+  t3 = compileCommands(cmds);
+  const path = t3, strokePath = `${path}`, fillPath = `${path} M ${w} -1 M 0 -1 Z`;
+  let t4;
+  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = _arrow(), $[7] = t4) : t4 = $[7];
+  const t5 = `${w}px`;
+  let t6;
+  $[8] !== t5 ? (t6 = assignInlineVars({
+    [vars.arrow.size]: t5
+  }), $[8] = t5, $[9] = t6) : t6 = $[9];
+  let t7;
+  $[10] !== style || $[11] !== t6 ? (t7 = {
+    ...style,
+    ...t6
+  }, $[10] = style, $[11] = t6, $[12] = t7) : t7 = $[12];
+  let t8;
+  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t8 = _arrowSvg(), $[13] = t8) : t8 = $[13];
+  const t9 = `0 0 ${w} ${w}`;
+  let t10;
+  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t10 = _arrowStrokeMask(), $[14] = t10) : t10 = $[14];
+  let t11;
+  $[15] !== w ? (t11 = /* @__PURE__ */ jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsx("rect", { className: t10, x: 0, width: w, height: w, fill: "white" }) }), $[15] = w, $[16] = t11) : t11 = $[16];
+  let t12;
+  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t12 = _arrowStroke(), $[17] = t12) : t12 = $[17];
+  let t13;
+  $[18] !== strokePath ? (t13 = /* @__PURE__ */ jsx("path", { className: t12, d: strokePath, mask: "url(#stroke-mask)" }), $[18] = strokePath, $[19] = t13) : t13 = $[19];
+  let t14;
+  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t14 = _arrowShape(), $[20] = t14) : t14 = $[20];
+  let t15;
+  $[21] !== fillPath ? (t15 = /* @__PURE__ */ jsx("path", { className: t14, d: fillPath }), $[21] = fillPath, $[22] = t15) : t15 = $[22];
+  let t16;
+  $[23] !== t11 || $[24] !== t13 || $[25] !== t15 || $[26] !== t9 || $[27] !== w ? (t16 = /* @__PURE__ */ jsxs("svg", { className: t8, width: w, height: w, viewBox: t9, children: [
+    t11,
+    t13,
+    t15
+  ] }), $[23] = t11, $[24] = t13, $[25] = t15, $[26] = t9, $[27] = w, $[28] = t16) : t16 = $[28];
+  let t17;
+  return $[29] !== Element || $[30] !== rest || $[31] !== t16 || $[32] !== t7 ? (t17 = /* @__PURE__ */ jsx(Element, { ...rest, className: t4, style: t7, children: t16 }), $[29] = Element, $[30] = rest, $[31] = t16, $[32] = t7, $[33] = t17) : t17 = $[33], t17;
+}
+const DEFAULT_FLEX_ELEMENT = "div";
+function Flex(props) {
+  const $ = c(14), t0 = props;
+  let align, justify, rest, t1, t2, wrap;
+  $[0] !== t0 ? ({
+    align,
+    as: t1,
+    direction: t2,
+    justify,
+    wrap,
+    ...rest
+  } = t0, $[0] = t0, $[1] = align, $[2] = justify, $[3] = rest, $[4] = t1, $[5] = t2, $[6] = wrap) : (align = $[1], justify = $[2], rest = $[3], t1 = $[4], t2 = $[5], wrap = $[6]);
+  const as = t1 === void 0 ? DEFAULT_FLEX_ELEMENT : t1, direction = t2 === void 0 ? "row" : t2;
+  let t3;
+  return $[7] !== align || $[8] !== as || $[9] !== direction || $[10] !== justify || $[11] !== rest || $[12] !== wrap ? (t3 = /* @__PURE__ */ jsx(Box, { "data-ui": "Flex", ...rest, alignItems: align, as, display: "flex", flexDirection: direction, flexWrap: wrap, justifyContent: justify }), $[7] = align, $[8] = as, $[9] = direction, $[10] = justify, $[11] = rest, $[12] = wrap, $[13] = t3) : t3 = $[13], t3;
+}
+function PopoverLayer(props) {
+  const $ = c(65);
+  let animate, arrow2, arrowRef, arrowX, arrowY, children, marginsProp, maxWidth, originX, originY, overflow, padding, placement, radius, referenceWidth, rest, shadow, strategy, style, t0, xProp, yProp;
+  $[0] !== props ? ({
+    __unstable_margins: marginsProp,
+    animate,
+    arrow: arrow2,
+    arrowRef,
+    arrowX,
+    arrowY,
+    children,
+    maxWidth,
+    padding,
+    placement,
+    originX,
+    originY,
+    overflow,
+    radius,
+    referenceWidth,
+    shadow,
+    strategy,
+    style,
+    tone: t0,
+    x: xProp,
+    y: yProp,
+    ...rest
+  } = props, $[0] = props, $[1] = animate, $[2] = arrow2, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = marginsProp, $[8] = maxWidth, $[9] = originX, $[10] = originY, $[11] = overflow, $[12] = padding, $[13] = placement, $[14] = radius, $[15] = referenceWidth, $[16] = rest, $[17] = shadow, $[18] = strategy, $[19] = style, $[20] = t0, $[21] = xProp, $[22] = yProp) : (animate = $[1], arrow2 = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], marginsProp = $[7], maxWidth = $[8], originX = $[9], originY = $[10], overflow = $[11], padding = $[12], placement = $[13], radius = $[14], referenceWidth = $[15], rest = $[16], shadow = $[17], strategy = $[18], style = $[19], t0 = $[20], xProp = $[21], yProp = $[22]);
+  const tone = t0 === void 0 ? "inherit" : t0;
+  let t1;
+  t1 = marginsProp || DEFAULT_POPOVER_MARGINS;
+  const margins = t1, x = (xProp ?? 0) + margins[3], y = (yProp ?? 0) + margins[0];
+  let t2;
+  const t3 = animate ? "transform" : void 0;
   let t4;
   $[23] !== originX || $[24] !== originY || $[25] !== referenceWidth || $[26] !== style || $[27] !== t3 || $[28] !== x || $[29] !== y ? (t4 = {
     left: x,
@@ -1467,6 +1265,15 @@ function Stack(props) {
   let t4;
   return $[8] !== as || $[9] !== rest || $[10] !== t2 || $[11] !== t3 ? (t4 = /* @__PURE__ */ jsx(Box, { "data-ui": "Stack", ...rest, as, gridAutoRows: "min", className: t2, display: "grid", gap: t3 }), $[8] = as, $[9] = rest, $[10] = t2, $[11] = t3, $[12] = t4) : t4 = $[12], t4;
 }
+function useCustomValidity(ref, customValidity) {
+  const $ = c(6);
+  let t0;
+  $[0] !== customValidity || $[1] !== ref.current ? (t0 = () => {
+    ref.current?.setCustomValidity(customValidity || "");
+  }, $[0] = customValidity, $[1] = ref.current, $[2] = t0) : t0 = $[2];
+  let t1;
+  $[3] !== customValidity || $[4] !== ref ? (t1 = [customValidity, ref], $[3] = customValidity, $[4] = ref, $[5] = t1) : t1 = $[5], useEffect(t0, t1);
+}
 const DEFAULT_TEXT_INPUT_ELEMENT = "input";
 function TextInput(props) {
   const $ = c(89), t0 = props;
@@ -1503,7 +1310,7 @@ function TextInput(props) {
   const Element = t1 === void 0 ? DEFAULT_TEXT_INPUT_ELEMENT : t1, border = t2 === void 0 ? !0 : t2, disabled = t3 === void 0 ? !1 : t3, fontSize = t4 === void 0 ? 2 : t4, padding = t5 === void 0 ? 3 : t5, radius = t6 === void 0 ? 2 : t6, space = t7 === void 0 ? 3 : t7, type = t8 === void 0 ? "text" : t8, ref = useRef(null), responsivePadding = useResponsiveProp(padding), withClearButton = !!clearButton;
   let t9;
   $[23] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => ref.current, $[23] = t9) : t9 = $[23], useImperativeHandle(forwardedRef, t9), useCustomValidity(ref, customValidity);
-  const handleClearMouseDown = _temp;
+  const handleClearMouseDown = _temp$2;
   let t10;
   $[24] !== onClear ? (t10 = (event_0) => {
     event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
@@ -1582,254 +1389,80 @@ function _temp2(t0) {
   const [key2, value] = t0;
   return value === 0 ? [key2, 0] : value === 1 ? [key2, 1] : value === 2 ? [key2, 1] : [key2, typeof value == "number" ? value - 2 : 0];
 }
-function _temp(event) {
+function _temp$2(event) {
   event.preventDefault(), event.stopPropagation();
 }
-function useDelayedState(initialState) {
-  const $ = c(3), [state, setState] = useState(initialState), delayedAction = useRef(void 0);
-  let t0;
-  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = (nextState, delay) => {
-    const action = () => {
-      setState(nextState);
-    };
-    if (delayedAction.current && (clearTimeout(delayedAction.current), delayedAction.current = void 0), !delay)
-      return action();
-    delayedAction.current = setTimeout(action, delay);
-  }, $[0] = t0) : t0 = $[0];
-  const onStateChange = t0;
+function useClickOutsideEvent(listener, t0, boundaryElement) {
+  const $ = c(9), elementsArg = t0 === void 0 ? _temp$1 : t0;
   let t1;
-  return $[1] !== state ? (t1 = [state, onStateChange], $[1] = state, $[2] = t1) : t1 = $[2], t1;
+  $[0] !== boundaryElement || $[1] !== elementsArg || $[2] !== listener ? (t1 = (evt) => {
+    if (!listener)
+      return;
+    const target = evt.target;
+    if (!(target instanceof Node))
+      return;
+    const resolvedBoundaryElement = boundaryElement?.();
+    if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target))
+      return;
+    const elements = elementsArg().flat();
+    for (const el of elements)
+      if (el && (target === el || el.contains(target)))
+        return;
+    listener(evt);
+  }, $[0] = boundaryElement, $[1] = elementsArg, $[2] = listener, $[3] = t1) : t1 = $[3];
+  const onEvent = useEffectEvent(t1), hasListener = !!listener;
+  let t2;
+  $[4] !== hasListener || $[5] !== onEvent ? (t2 = () => {
+    if (!hasListener)
+      return;
+    const handleEvent = (evt_0) => onEvent(evt_0);
+    return document.addEventListener("mousedown", handleEvent), () => {
+      document.removeEventListener("mousedown", handleEvent);
+    };
+  }, $[4] = hasListener, $[5] = onEvent, $[6] = t2) : t2 = $[6];
+  let t3;
+  $[7] !== hasListener ? (t3 = [hasListener], $[7] = hasListener, $[8] = t3) : t3 = $[8], useEffect(t2, t3), useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
 }
-function getElementRef(element) {
-  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
+function _temp$1() {
+  return EMPTY_ARRAY;
 }
-const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAULT_TOOLTIP_ARROW_RADIUS = 2, DEFAULT_TOOLTIP_DISTANCE = 4, DEFAULT_TOOLTIP_PADDING = 4, DEFAULT_FALLBACK_PLACEMENTS = {
-  top: ["top-end", "top-start", "bottom", "left", "right"],
-  "top-start": ["top", "top-end", "bottom-start", "left-start", "right-start"],
-  "top-end": ["top", "top-start", "bottom-end", "left-end", "right-end"],
-  bottom: ["bottom-end", "bottom-start", "top", "left", "right"],
-  "bottom-start": ["bottom", "bottom-end", "top-start", "left-start", "right-start"],
-  "bottom-end": ["bottom", "bottom-start", "top-end", "left-end", "right-end"],
-  left: ["left-end", "left-start", "right", "top", "bottom"],
-  "left-start": ["left", "left-end", "right-start", "top-start", "bottom-start"],
-  "left-end": ["left", "left-start", "right-end", "top-end", "bottom-end"],
-  right: ["right-end", "right-start", "left", "top", "bottom"],
-  "right-start": ["right", "right-end", "left-start", "top-start", "bottom-start"],
-  "right-end": ["right", "right-start", "left-end", "top-end", "bottom-end"]
-}, TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/tooltipDelayGroup", null);
-function useTooltipDelayGroup() {
-  return useContext(TooltipDelayGroupContext);
+function useGlobalKeyDown(onKeyDown) {
+  const $ = c(5);
+  let t0;
+  $[0] !== onKeyDown ? (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0) : t0 = $[1];
+  const handleKeyDown = useEffectEvent(t0);
+  let t1;
+  $[2] !== handleKeyDown ? (t1 = () => {
+    const handler = (event_0) => handleKeyDown(event_0);
+    return window.addEventListener("keydown", handler), () => window.removeEventListener("keydown", handler);
+  }, $[2] = handleKeyDown, $[3] = t1) : t1 = $[3];
+  let t2;
+  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[4] = t2) : t2 = $[4], useEffect(t1, t2);
 }
-function TooltipLayer(props) {
-  const $ = c(50);
-  let animate, arrow2, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, rest, scheme, shadow, style, t0;
-  $[0] !== props ? ({
-    animate,
-    arrow: arrow2,
-    arrowRef,
-    arrowX,
-    arrowY,
+const DEFAULT_KBD_ELEMENT = "kbd";
+function KBD(props) {
+  const $ = c(22), t0 = props;
+  let children, className, rest, t1, t2, t3, t4, t5;
+  $[0] !== t0 ? ({
+    as: t1,
     children,
-    originX,
-    originY,
-    padding,
-    placement,
-    radius,
-    scheme,
-    shadow,
-    style,
-    tone: t0,
+    className,
+    display: t2,
+    fontSize: t3,
+    padding: t4,
+    radius: t5,
     ...rest
-  } = props, $[0] = props, $[1] = animate, $[2] = arrow2, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = originX, $[8] = originY, $[9] = padding, $[10] = placement, $[11] = radius, $[12] = rest, $[13] = scheme, $[14] = shadow, $[15] = style, $[16] = t0) : (animate = $[1], arrow2 = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], originX = $[7], originY = $[8], padding = $[9], placement = $[10], radius = $[11], rest = $[12], scheme = $[13], shadow = $[14], style = $[15], t0 = $[16]);
-  const tone = t0 === void 0 ? "inherit" : t0;
-  let t1;
-  const t2 = animate ? "transform" : void 0;
-  let t3;
-  $[17] !== originX || $[18] !== originY || $[19] !== style || $[20] !== t2 ? (t3 = {
-    originX,
-    originY,
-    willChange: t2,
-    ...style
-  }, $[17] = originX, $[18] = originY, $[19] = style, $[20] = t2, $[21] = t3) : t3 = $[21], t1 = t3;
-  const rootStyle = t1;
-  let t4;
-  const t5 = arrowX !== null ? arrowX : void 0, t6 = arrowY !== null ? arrowY : void 0;
+  } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = rest, $[4] = t1, $[5] = t2, $[6] = t3, $[7] = t4, $[8] = t5) : (children = $[1], className = $[2], rest = $[3], t1 = $[4], t2 = $[5], t3 = $[6], t4 = $[7], t5 = $[8]);
+  const as = t1 === void 0 ? DEFAULT_KBD_ELEMENT : t1, display = t2 === void 0 ? "inline-block" : t2, fontSize = t3 === void 0 ? 0 : t3, padding = t4 === void 0 ? 1 : t4, radius = t5 === void 0 ? 2 : t5, t6 = as;
   let t7;
-  $[22] !== t5 || $[23] !== t6 ? (t7 = {
-    left: t5,
-    top: t6,
-    right: void 0,
-    bottom: void 0
-  }, $[22] = t5, $[23] = t6, $[24] = t7) : t7 = $[24], t4 = t7;
-  const arrowStyle = t4, t8 = animate ? "" : void 0;
-  let t9;
-  $[25] !== animate ? (t9 = animate ? ["hidden", "initial"] : void 0, $[25] = animate, $[26] = t9) : t9 = $[26];
-  let t10;
-  $[27] !== animate ? (t10 = animate ? ["visible", "scaleIn"] : void 0, $[27] = animate, $[28] = t10) : t10 = $[28];
-  let t11;
-  $[29] !== animate ? (t11 = animate ? ["hidden", "scaleOut"] : void 0, $[29] = animate, $[30] = t11) : t11 = $[30];
-  let t12;
-  $[31] !== arrow2 || $[32] !== arrowRef || $[33] !== arrowStyle ? (t12 = arrow2 && /* @__PURE__ */ jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_TOOLTIP_ARROW_WIDTH, height: DEFAULT_TOOLTIP_ARROW_HEIGHT, radius: DEFAULT_TOOLTIP_ARROW_RADIUS }), $[31] = arrow2, $[32] = arrowRef, $[33] = arrowStyle, $[34] = t12) : t12 = $[34];
-  let t13;
-  return $[35] !== children || $[36] !== padding || $[37] !== placement || $[38] !== radius || $[39] !== rest || $[40] !== rootStyle || $[41] !== scheme || $[42] !== shadow || $[43] !== t10 || $[44] !== t11 || $[45] !== t12 || $[46] !== t8 || $[47] !== t9 || $[48] !== tone ? (t13 = /* @__PURE__ */ jsxs(Layer, { "data-ui": "Tooltip__layer", ...rest, as: motion.div, "data-animate": t8, "data-placement": placement, padding, radius, scheme, shadow, style: rootStyle, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t9, animate: t10, exit: t11, tone, children: [
-    children,
-    t12
-  ] }), $[35] = children, $[36] = padding, $[37] = placement, $[38] = radius, $[39] = rest, $[40] = rootStyle, $[41] = scheme, $[42] = shadow, $[43] = t10, $[44] = t11, $[45] = t12, $[46] = t8, $[47] = t9, $[48] = tone, $[49] = t13) : t13 = $[49], t13;
-}
-const DEFAULT_TOOLTIP_ELEMENT = "div";
-function Tooltip(props) {
-  const boundaryElementContext = useBoundaryElement(), {
-    animate: _animate = !1,
-    arrow: arrowProp = !1,
-    as = DEFAULT_TOOLTIP_ELEMENT,
-    boundaryElement = boundaryElementContext?.element,
-    children: childProp,
+  $[9] !== className || $[10] !== radius ? (t7 = kbd({
     className,
-    content,
-    delay,
-    disabled,
-    fallbackPlacements = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"],
-    padding = 2,
-    placement: placementProp = "bottom",
-    portal: portalProp,
-    radius = 3,
-    ref: forwardedRef,
-    scheme,
-    shadow = 2,
-    zOffset = Z_OFFSETS.tooltip,
-    tone = "inherit",
-    ...rest
-  } = props, card2 = useCard(), animate = usePrefersReducedMotion() ? !1 : _animate, ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = useState(0);
-  useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = useMemo(() => {
-    const ret = [];
-    return ret.push(flip({
-      boundary: boundaryElement || void 0,
-      fallbackPlacements,
-      padding: DEFAULT_TOOLTIP_PADDING,
-      rootBoundary
-    })), ret.push(offset({
-      mainAxis: DEFAULT_TOOLTIP_DISTANCE
-    })), ret.push(shift({
-      boundary: boundaryElement || void 0,
-      rootBoundary,
-      padding: DEFAULT_TOOLTIP_PADDING
-    })), arrowProp && ret.push(arrow({
-      element: arrowRef,
-      padding: DEFAULT_TOOLTIP_PADDING
-    })), animate && ret.push(origin), ret;
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements]), {
-    floatingStyles,
-    placement,
-    middlewareData,
-    refs,
-    update
-  } = useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: autoUpdate,
-    elements: {
-      reference: referenceElement
-    },
-    transform: !1
-  }), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), {
-    setIsGroupActive,
-    setOpenTooltipId
-  } = delayGroupContext || {}, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = useCallback((open, immediate) => {
-    if (isInsideGroup)
-      if (open) {
-        const groupedOpenDelay = immediate ? 0 : openDelay;
-        setIsGroupActive?.(open, groupedOpenDelay), setOpenTooltipId?.(tooltipId, groupedOpenDelay);
-      } else {
-        const groupDeactivateDelay = closeDelay > 200 ? closeDelay : 200;
-        setIsGroupActive?.(open, groupDeactivateDelay), setOpenTooltipId?.(null, immediate ? 0 : closeDelay);
-      }
-    else
-      setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
-  }, [isInsideGroup, openDelay, setIsGroupActive, setOpenTooltipId, tooltipId, closeDelay, setIsOpen]), handleBlur = useCallback((e) => {
-    handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
-  }, [childProp?.props, handleIsOpenChange]), handleClick = useCallback((e_0) => {
-    handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
-  }, [childProp?.props, handleIsOpenChange]), handleContextMenu = useCallback((e_1) => {
-    handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
-  }, [childProp?.props, handleIsOpenChange]), handleFocus = useCallback((e_2) => {
-    handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseEnter = useCallback((e_3) => {
-    handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseLeave = useCallback((e_4) => {
-    handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
-  }, [childProp?.props, handleIsOpenChange]);
-  useCloseOnMouseLeave({
-    handleIsOpenChange,
-    referenceElement,
-    showTooltip,
-    isInsideGroup
-  }), useEffect(() => {
-    disabled && showTooltip && handleIsOpenChange(!1);
-  }, [disabled, handleIsOpenChange, showTooltip]), useEffect(() => {
-    !content && showTooltip && handleIsOpenChange(!1);
-  }, [content, handleIsOpenChange, showTooltip]), useEffect(() => {
-    if (!showTooltip) return;
-    function handleWindowKeyDown(event) {
-      event.key === "Escape" && handleIsOpenChange(!1, !0);
-    }
-    return window.addEventListener("keydown", handleWindowKeyDown), () => {
-      window.removeEventListener("keydown", handleWindowKeyDown);
-    };
-  }, [handleIsOpenChange, showTooltip]), useLayoutEffect(() => {
-    const availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
-    setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
-  }, [boundaryElement, portalElement]);
-  const setArrow = useCallback((arrowEl) => {
-    arrowRef.current = arrowEl, update();
-  }, [update]), setFloating = useCallback((node) => {
-    ref.current = node, refs.setFloating(node);
-  }, [refs]), child = useMemo(() => childProp ? cloneElement(childProp, {
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onClick: handleClick,
-    onContextMenu: handleContextMenu,
-    ref: setReferenceElement
-  }) : null, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave]);
-  if (useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [referenceElement]), !child) return /* @__PURE__ */ jsx(Fragment, {});
-  if (disabled) return child;
-  const node_0 = /* @__PURE__ */ jsx(TooltipLayer, { "data-ui": "Tooltip", ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: tooltip({
-    className
-  }), originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, style: {
-    ...floatingStyles,
-    maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
-  }, tone, zOffset, children: content }), children = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: /* @__PURE__ */ jsx(CardProvider, { tone: tone === "inherit" ? card2?.tone ?? "default" : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children,
-    child
-  ] });
-}
-function useCloseOnMouseLeave(t0) {
-  const $ = c(10), {
-    handleIsOpenChange,
-    referenceElement,
-    showTooltip,
-    isInsideGroup
-  } = t0;
-  let t1;
-  $[0] !== handleIsOpenChange || $[1] !== referenceElement ? (t1 = (target, teardown) => {
-    referenceElement && (referenceElement === target || target instanceof Node && referenceElement.contains(target) || (handleIsOpenChange(!1), teardown()));
-  }, $[0] = handleIsOpenChange, $[1] = referenceElement, $[2] = t1) : t1 = $[2];
-  const onMouseMove = useEffectEvent(t1);
-  let t2;
-  $[3] !== isInsideGroup || $[4] !== onMouseMove || $[5] !== showTooltip ? (t2 = () => {
-    if (!showTooltip || isInsideGroup)
-      return;
-    const handleMouseMove = (event) => {
-      onMouseMove(event.target, () => window.removeEventListener("mousemove", handleMouseMove));
-    };
-    return window.addEventListener("mousemove", handleMouseMove), () => window.removeEventListener("mousemove", handleMouseMove);
-  }, $[3] = isInsideGroup, $[4] = onMouseMove, $[5] = showTooltip, $[6] = t2) : t2 = $[6];
-  let t3;
-  $[7] !== isInsideGroup || $[8] !== showTooltip ? (t3 = [isInsideGroup, showTooltip], $[7] = isInsideGroup, $[8] = showTooltip, $[9] = t3) : t3 = $[9], useEffect(t2, t3);
+    radius
+  }), $[9] = className, $[10] = radius, $[11] = t7) : t7 = $[11];
+  let t8;
+  $[12] !== children || $[13] !== fontSize ? (t8 = /* @__PURE__ */ jsx(Text, { as: "span", muted: !0, size: fontSize, weight: "semibold", children }), $[12] = children, $[13] = fontSize, $[14] = t8) : t8 = $[14];
+  let t9;
+  return $[15] !== display || $[16] !== padding || $[17] !== rest || $[18] !== t6 || $[19] !== t7 || $[20] !== t8 ? (t9 = /* @__PURE__ */ jsx(Box, { "data-ui": "KBD", ...rest, as: t6, className: t7, display, muted: !0, padding, children: t8 }), $[15] = display, $[16] = padding, $[17] = rest, $[18] = t6, $[19] = t7, $[20] = t8, $[21] = t9) : t9 = $[21], t9;
 }
 const DEFAULT_HOTKEYS_ELEMENT = "kbd";
 function Hotkeys(props) {
@@ -2107,27 +1740,6 @@ function MenuDivider(props) {
   let t3;
   return $[6] !== Element || $[7] !== rest || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsx(Element, { ...rest, className: t2 }), $[6] = Element, $[7] = rest, $[8] = t2, $[9] = t3) : t3 = $[9], t3;
 }
-const DEFAULT_SELECTABLE_ELEMENT = "button";
-function Selectable(props) {
-  const $ = c(14), t0 = props;
-  let className, radius, rest, t1, tone;
-  $[0] !== t0 ? ({
-    as: t1,
-    className,
-    radius,
-    tone,
-    ...rest
-  } = t0, $[0] = t0, $[1] = className, $[2] = radius, $[3] = rest, $[4] = t1, $[5] = tone) : (className = $[1], radius = $[2], rest = $[3], t1 = $[4], tone = $[5]);
-  const as = t1 === void 0 ? DEFAULT_SELECTABLE_ELEMENT : t1;
-  let t2;
-  $[6] !== className || $[7] !== radius || $[8] !== tone ? (t2 = _selectable({
-    className,
-    radius,
-    tone
-  }), $[6] = className, $[7] = radius, $[8] = tone, $[9] = t2) : t2 = $[9];
-  let t3;
-  return $[10] !== as || $[11] !== rest || $[12] !== t2 ? (t3 = /* @__PURE__ */ jsx(Box, { ...rest, as, className: t2 }), $[10] = as, $[11] = rest, $[12] = t2, $[13] = t3) : t3 = $[13], t3;
-}
 function useMenu() {
   const value = useContext(MenuContext);
   if (!value)
@@ -2138,7 +1750,7 @@ function useMenu() {
 }
 const DEFAULT_MENU_GROUP_ELEMENT = "button";
 function MenuGroup(props) {
-  const $ = c(79), t0 = props;
+  const $ = c(78), t0 = props;
   let IconComponent, children, gap, menuProps, onClick, popover2, rest, t1, t2, t3, t4, t5, t6, text2;
   $[0] !== t0 ? ({
     as: t1,
@@ -2218,28 +1830,28 @@ function MenuGroup(props) {
       return;
     }
   }, $[46] = t21) : t21 = $[46];
-  const handleKeyDown = t21, t22 = as === "button" ? withinMenu : void 0, t23 = as !== "button" ? withinMenu : void 0, t24 = !withinMenu && active ? "" : void 0, t25 = as === "button" ? "button" : void 0, t26 = gap ?? space;
-  let t27;
-  $[47] !== IconComponent || $[48] !== fontSize ? (t27 = IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize, children: [
+  const handleKeyDown = t21, t22 = as === "button" ? withinMenu : void 0, t23 = as === "button" ? "button" : void 0, t24 = gap ?? space;
+  let t25;
+  $[47] !== IconComponent || $[48] !== fontSize ? (t25 = IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize, children: [
     isValidElement(IconComponent) && IconComponent,
     isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
-  ] }), $[47] = IconComponent, $[48] = fontSize, $[49] = t27) : t27 = $[49];
+  ] }), $[47] = IconComponent, $[48] = fontSize, $[49] = t25) : t25 = $[49];
+  let t26;
+  $[50] !== fontSize || $[51] !== text2 ? (t26 = /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize, textOverflow: "ellipsis", weight: "medium", children: text2 }) }), $[50] = fontSize, $[51] = text2, $[52] = t26) : t26 = $[52];
+  let t27;
+  $[53] === Symbol.for("react.memo_cache_sentinel") ? (t27 = /* @__PURE__ */ jsx(ChevronRightIcon, {}), $[53] = t27) : t27 = $[53];
   let t28;
-  $[50] !== fontSize || $[51] !== text2 ? (t28 = /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize, textOverflow: "ellipsis", weight: "medium", children: text2 }) }), $[50] = fontSize, $[51] = text2, $[52] = t28) : t28 = $[52];
+  $[54] !== fontSize ? (t28 = /* @__PURE__ */ jsx(Text, { size: fontSize, children: t27 }), $[54] = fontSize, $[55] = t28) : t28 = $[55];
   let t29;
-  $[53] === Symbol.for("react.memo_cache_sentinel") ? (t29 = /* @__PURE__ */ jsx(ChevronRightIcon, {}), $[53] = t29) : t29 = $[53];
+  $[56] !== padding || $[57] !== t24 || $[58] !== t25 || $[59] !== t26 || $[60] !== t28 ? (t29 = /* @__PURE__ */ jsxs(Flex, { gap: t24, padding, children: [
+    t25,
+    t26,
+    t28
+  ] }), $[56] = padding, $[57] = t24, $[58] = t25, $[59] = t26, $[60] = t28, $[61] = t29) : t29 = $[61];
   let t30;
-  $[54] !== fontSize ? (t30 = /* @__PURE__ */ jsx(Text, { size: fontSize, children: t29 }), $[54] = fontSize, $[55] = t30) : t30 = $[55];
+  $[62] !== as || $[63] !== handleClick || $[64] !== handleMouseEnter || $[65] !== radius || $[66] !== rest || $[67] !== t22 || $[68] !== t23 || $[69] !== t29 || $[70] !== tone || $[71] !== withinMenu ? (t30 = /* @__PURE__ */ jsx(Selectable, { "data-ui": "MenuGroup", ...rest, "aria-pressed": t22, as, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, radius, ref: setRootElement, selected: withinMenu, tabIndex: -1, tone, type: t23, children: t29 }), $[62] = as, $[63] = handleClick, $[64] = handleMouseEnter, $[65] = radius, $[66] = rest, $[67] = t22, $[68] = t23, $[69] = t29, $[70] = tone, $[71] = withinMenu, $[72] = t30) : t30 = $[72];
   let t31;
-  $[56] !== padding || $[57] !== t26 || $[58] !== t27 || $[59] !== t28 || $[60] !== t30 ? (t31 = /* @__PURE__ */ jsxs(Flex, { gap: t26, padding, children: [
-    t27,
-    t28,
-    t30
-  ] }), $[56] = padding, $[57] = t26, $[58] = t27, $[59] = t28, $[60] = t30, $[61] = t31) : t31 = $[61];
-  let t32;
-  $[62] !== as || $[63] !== handleClick || $[64] !== handleMouseEnter || $[65] !== radius || $[66] !== rest || $[67] !== t22 || $[68] !== t23 || $[69] !== t24 || $[70] !== t25 || $[71] !== t31 || $[72] !== tone ? (t32 = /* @__PURE__ */ jsx(Selectable, { "data-ui": "MenuGroup", ...rest, "aria-pressed": t22, as, "data-pressed": t23, "data-selected": t24, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, radius, ref: setRootElement, tabIndex: -1, tone, type: t25, children: t31 }), $[62] = as, $[63] = handleClick, $[64] = handleMouseEnter, $[65] = radius, $[66] = rest, $[67] = t22, $[68] = t23, $[69] = t24, $[70] = t25, $[71] = t31, $[72] = tone, $[73] = t32) : t32 = $[73];
-  let t33;
-  return $[74] !== childMenu || $[75] !== open || $[76] !== popover2 || $[77] !== t32 ? (t33 = /* @__PURE__ */ jsx(Popover, { ...popover2, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t32 }), $[74] = childMenu, $[75] = open, $[76] = popover2, $[77] = t32, $[78] = t33) : t33 = $[78], t33;
+  return $[73] !== childMenu || $[74] !== open || $[75] !== popover2 || $[76] !== t30 ? (t31 = /* @__PURE__ */ jsx(Popover, { ...popover2, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t30 }), $[73] = childMenu, $[74] = open, $[75] = popover2, $[76] = t30, $[77] = t31) : t31 = $[77], t31;
 }
 const DEFAULT_MENU_ITEM_ELEMENT = "button";
 function MenuItem(props) {
@@ -2404,6 +2016,271 @@ function TabList(props) {
 function _isReactElement(node) {
   return !!node;
 }
+const DEFAULT_GRID_ELEMENT = "div";
+function Grid(props) {
+  const $ = c(8), t0 = props;
+  let children, rest, t1;
+  $[0] !== t0 ? ({
+    as: t1,
+    children,
+    ...rest
+  } = t0, $[0] = t0, $[1] = children, $[2] = rest, $[3] = t1) : (children = $[1], rest = $[2], t1 = $[3]);
+  const as = t1 === void 0 ? DEFAULT_GRID_ELEMENT : t1;
+  let t2;
+  return $[4] !== as || $[5] !== children || $[6] !== rest ? (t2 = /* @__PURE__ */ jsx(Box, { "data-ui": "Grid", ...rest, as, display: "grid", children }), $[4] = as, $[5] = children, $[6] = rest, $[7] = t2) : t2 = $[7], t2;
+}
+function usePrefersDark(t0) {
+  return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp : t0);
+}
+function _temp() {
+  return !1;
+}
+function useDelayedState(initialState) {
+  const $ = c(3), [state, setState] = useState(initialState), delayedAction = useRef(void 0);
+  let t0;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = (nextState, delay) => {
+    const action = () => {
+      setState(nextState);
+    };
+    if (delayedAction.current && (clearTimeout(delayedAction.current), delayedAction.current = void 0), !delay)
+      return action();
+    delayedAction.current = setTimeout(action, delay);
+  }, $[0] = t0) : t0 = $[0];
+  const onStateChange = t0;
+  let t1;
+  return $[1] !== state ? (t1 = [state, onStateChange], $[1] = state, $[2] = t1) : t1 = $[2], t1;
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
+}
+const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAULT_TOOLTIP_ARROW_RADIUS = 2, DEFAULT_TOOLTIP_DISTANCE = 4, DEFAULT_TOOLTIP_PADDING = 4, DEFAULT_FALLBACK_PLACEMENTS = {
+  top: ["top-end", "top-start", "bottom", "left", "right"],
+  "top-start": ["top", "top-end", "bottom-start", "left-start", "right-start"],
+  "top-end": ["top", "top-start", "bottom-end", "left-end", "right-end"],
+  bottom: ["bottom-end", "bottom-start", "top", "left", "right"],
+  "bottom-start": ["bottom", "bottom-end", "top-start", "left-start", "right-start"],
+  "bottom-end": ["bottom", "bottom-start", "top-end", "left-end", "right-end"],
+  left: ["left-end", "left-start", "right", "top", "bottom"],
+  "left-start": ["left", "left-end", "right-start", "top-start", "bottom-start"],
+  "left-end": ["left", "left-start", "right-end", "top-end", "bottom-end"],
+  right: ["right-end", "right-start", "left", "top", "bottom"],
+  "right-start": ["right", "right-end", "left-start", "top-start", "bottom-start"],
+  "right-end": ["right", "right-start", "left-end", "top-end", "bottom-end"]
+}, TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/tooltipDelayGroup", null);
+function useTooltipDelayGroup() {
+  return useContext(TooltipDelayGroupContext);
+}
+function TooltipLayer(props) {
+  const $ = c(50);
+  let animate, arrow2, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, rest, scheme, shadow, style, t0;
+  $[0] !== props ? ({
+    animate,
+    arrow: arrow2,
+    arrowRef,
+    arrowX,
+    arrowY,
+    children,
+    originX,
+    originY,
+    padding,
+    placement,
+    radius,
+    scheme,
+    shadow,
+    style,
+    tone: t0,
+    ...rest
+  } = props, $[0] = props, $[1] = animate, $[2] = arrow2, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = originX, $[8] = originY, $[9] = padding, $[10] = placement, $[11] = radius, $[12] = rest, $[13] = scheme, $[14] = shadow, $[15] = style, $[16] = t0) : (animate = $[1], arrow2 = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], originX = $[7], originY = $[8], padding = $[9], placement = $[10], radius = $[11], rest = $[12], scheme = $[13], shadow = $[14], style = $[15], t0 = $[16]);
+  const tone = t0 === void 0 ? "inherit" : t0;
+  let t1;
+  const t2 = animate ? "transform" : void 0;
+  let t3;
+  $[17] !== originX || $[18] !== originY || $[19] !== style || $[20] !== t2 ? (t3 = {
+    originX,
+    originY,
+    willChange: t2,
+    ...style
+  }, $[17] = originX, $[18] = originY, $[19] = style, $[20] = t2, $[21] = t3) : t3 = $[21], t1 = t3;
+  const rootStyle = t1;
+  let t4;
+  const t5 = arrowX !== null ? arrowX : void 0, t6 = arrowY !== null ? arrowY : void 0;
+  let t7;
+  $[22] !== t5 || $[23] !== t6 ? (t7 = {
+    left: t5,
+    top: t6,
+    right: void 0,
+    bottom: void 0
+  }, $[22] = t5, $[23] = t6, $[24] = t7) : t7 = $[24], t4 = t7;
+  const arrowStyle = t4, t8 = animate ? "" : void 0;
+  let t9;
+  $[25] !== animate ? (t9 = animate ? ["hidden", "initial"] : void 0, $[25] = animate, $[26] = t9) : t9 = $[26];
+  let t10;
+  $[27] !== animate ? (t10 = animate ? ["visible", "scaleIn"] : void 0, $[27] = animate, $[28] = t10) : t10 = $[28];
+  let t11;
+  $[29] !== animate ? (t11 = animate ? ["hidden", "scaleOut"] : void 0, $[29] = animate, $[30] = t11) : t11 = $[30];
+  let t12;
+  $[31] !== arrow2 || $[32] !== arrowRef || $[33] !== arrowStyle ? (t12 = arrow2 && /* @__PURE__ */ jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_TOOLTIP_ARROW_WIDTH, height: DEFAULT_TOOLTIP_ARROW_HEIGHT, radius: DEFAULT_TOOLTIP_ARROW_RADIUS }), $[31] = arrow2, $[32] = arrowRef, $[33] = arrowStyle, $[34] = t12) : t12 = $[34];
+  let t13;
+  return $[35] !== children || $[36] !== padding || $[37] !== placement || $[38] !== radius || $[39] !== rest || $[40] !== rootStyle || $[41] !== scheme || $[42] !== shadow || $[43] !== t10 || $[44] !== t11 || $[45] !== t12 || $[46] !== t8 || $[47] !== t9 || $[48] !== tone ? (t13 = /* @__PURE__ */ jsxs(Layer, { "data-ui": "Tooltip__layer", ...rest, as: motion.div, "data-animate": t8, "data-placement": placement, padding, radius, scheme, shadow, style: rootStyle, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t9, animate: t10, exit: t11, tone, children: [
+    children,
+    t12
+  ] }), $[35] = children, $[36] = padding, $[37] = placement, $[38] = radius, $[39] = rest, $[40] = rootStyle, $[41] = scheme, $[42] = shadow, $[43] = t10, $[44] = t11, $[45] = t12, $[46] = t8, $[47] = t9, $[48] = tone, $[49] = t13) : t13 = $[49], t13;
+}
+const DEFAULT_TOOLTIP_ELEMENT = "div";
+function Tooltip(props) {
+  const boundaryElementContext = useBoundaryElement(), {
+    animate: _animate = !1,
+    arrow: arrowProp = !1,
+    as = DEFAULT_TOOLTIP_ELEMENT,
+    boundaryElement = boundaryElementContext?.element,
+    children: childProp,
+    className,
+    content,
+    delay,
+    disabled,
+    fallbackPlacements = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"],
+    padding = 2,
+    placement: placementProp = "bottom",
+    portal: portalProp,
+    radius = 3,
+    ref: forwardedRef,
+    scheme,
+    shadow = 2,
+    zOffset = Z_OFFSETS.tooltip,
+    tone = "inherit",
+    ...rest
+  } = props, card2 = useCard(), animate = usePrefersReducedMotion() ? !1 : _animate, ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = useState(0);
+  useImperativeHandle(forwardedRef, () => ref.current);
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = useMemo(() => {
+    const ret = [];
+    return ret.push(flip({
+      boundary: boundaryElement || void 0,
+      fallbackPlacements,
+      padding: DEFAULT_TOOLTIP_PADDING,
+      rootBoundary
+    })), ret.push(offset({
+      mainAxis: DEFAULT_TOOLTIP_DISTANCE
+    })), ret.push(shift({
+      boundary: boundaryElement || void 0,
+      rootBoundary,
+      padding: DEFAULT_TOOLTIP_PADDING
+    })), arrowProp && ret.push(arrow({
+      element: arrowRef,
+      padding: DEFAULT_TOOLTIP_PADDING
+    })), animate && ret.push(origin), ret;
+  }, [animate, arrowProp, boundaryElement, fallbackPlacements]), {
+    floatingStyles,
+    placement,
+    middlewareData,
+    refs,
+    update
+  } = useFloating({
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: autoUpdate,
+    elements: {
+      reference: referenceElement
+    },
+    transform: !1
+  }), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), {
+    setIsGroupActive,
+    setOpenTooltipId
+  } = delayGroupContext || {}, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = useCallback((open, immediate) => {
+    if (isInsideGroup)
+      if (open) {
+        const groupedOpenDelay = immediate ? 0 : openDelay;
+        setIsGroupActive?.(open, groupedOpenDelay), setOpenTooltipId?.(tooltipId, groupedOpenDelay);
+      } else {
+        const groupDeactivateDelay = closeDelay > 200 ? closeDelay : 200;
+        setIsGroupActive?.(open, groupDeactivateDelay), setOpenTooltipId?.(null, immediate ? 0 : closeDelay);
+      }
+    else
+      setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
+  }, [isInsideGroup, openDelay, setIsGroupActive, setOpenTooltipId, tooltipId, closeDelay, setIsOpen]), handleBlur = useCallback((e) => {
+    handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
+  }, [childProp?.props, handleIsOpenChange]), handleClick = useCallback((e_0) => {
+    handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
+  }, [childProp?.props, handleIsOpenChange]), handleContextMenu = useCallback((e_1) => {
+    handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
+  }, [childProp?.props, handleIsOpenChange]), handleFocus = useCallback((e_2) => {
+    handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
+  }, [childProp?.props, handleIsOpenChange]), handleMouseEnter = useCallback((e_3) => {
+    handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
+  }, [childProp?.props, handleIsOpenChange]), handleMouseLeave = useCallback((e_4) => {
+    handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
+  }, [childProp?.props, handleIsOpenChange]);
+  useCloseOnMouseLeave({
+    handleIsOpenChange,
+    referenceElement,
+    showTooltip,
+    isInsideGroup
+  }), useEffect(() => {
+    disabled && showTooltip && handleIsOpenChange(!1);
+  }, [disabled, handleIsOpenChange, showTooltip]), useEffect(() => {
+    !content && showTooltip && handleIsOpenChange(!1);
+  }, [content, handleIsOpenChange, showTooltip]), useEffect(() => {
+    if (!showTooltip) return;
+    function handleWindowKeyDown(event) {
+      event.key === "Escape" && handleIsOpenChange(!1, !0);
+    }
+    return window.addEventListener("keydown", handleWindowKeyDown), () => {
+      window.removeEventListener("keydown", handleWindowKeyDown);
+    };
+  }, [handleIsOpenChange, showTooltip]), useLayoutEffect(() => {
+    const availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
+    setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
+  }, [boundaryElement, portalElement]);
+  const setArrow = useCallback((arrowEl) => {
+    arrowRef.current = arrowEl, update();
+  }, [update]), setFloating = useCallback((node) => {
+    ref.current = node, refs.setFloating(node);
+  }, [refs]), child = useMemo(() => childProp ? cloneElement(childProp, {
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: handleClick,
+    onContextMenu: handleContextMenu,
+    ref: setReferenceElement
+  }) : null, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave]);
+  if (useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [referenceElement]), !child) return /* @__PURE__ */ jsx(Fragment, {});
+  if (disabled) return child;
+  const node_0 = /* @__PURE__ */ jsx(TooltipLayer, { "data-ui": "Tooltip", ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: tooltip({
+    className
+  }), originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, style: {
+    ...floatingStyles,
+    maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
+  }, tone, zOffset, children: content }), children = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: /* @__PURE__ */ jsx(CardProvider, { tone: tone === "inherit" ? card2?.tone ?? "default" : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children,
+    child
+  ] });
+}
+function useCloseOnMouseLeave(t0) {
+  const $ = c(10), {
+    handleIsOpenChange,
+    referenceElement,
+    showTooltip,
+    isInsideGroup
+  } = t0;
+  let t1;
+  $[0] !== handleIsOpenChange || $[1] !== referenceElement ? (t1 = (target, teardown) => {
+    referenceElement && (referenceElement === target || target instanceof Node && referenceElement.contains(target) || (handleIsOpenChange(!1), teardown()));
+  }, $[0] = handleIsOpenChange, $[1] = referenceElement, $[2] = t1) : t1 = $[2];
+  const onMouseMove = useEffectEvent(t1);
+  let t2;
+  $[3] !== isInsideGroup || $[4] !== onMouseMove || $[5] !== showTooltip ? (t2 = () => {
+    if (!showTooltip || isInsideGroup)
+      return;
+    const handleMouseMove = (event) => {
+      onMouseMove(event.target, () => window.removeEventListener("mousemove", handleMouseMove));
+    };
+    return window.addEventListener("mousemove", handleMouseMove), () => window.removeEventListener("mousemove", handleMouseMove);
+  }, $[3] = isInsideGroup, $[4] = onMouseMove, $[5] = showTooltip, $[6] = t2) : t2 = $[6];
+  let t3;
+  $[7] !== isInsideGroup || $[8] !== showTooltip ? (t3 = [isInsideGroup, showTooltip], $[7] = isInsideGroup, $[8] = showTooltip, $[9] = t3) : t3 = $[9], useEffect(t2, t3);
+}
 export {
   AnimatedSpinnerIcon,
   Arrow,
@@ -2412,13 +2289,10 @@ export {
   Button,
   Card,
   CardProvider,
-  Code,
   DEFAULT_ARROW_ELEMENT,
   DEFAULT_BOX_ELEMENT,
   DEFAULT_BUTTON_ELEMENT,
   DEFAULT_CARD_ELEMENT,
-  DEFAULT_CODE_ELEMENT,
-  DEFAULT_ELEMENT_QUERY_ELEMENT,
   DEFAULT_FLEX_ELEMENT,
   DEFAULT_GRID_ELEMENT,
   DEFAULT_HOTKEYS_ELEMENT,
@@ -2429,6 +2303,7 @@ export {
   DEFAULT_MENU_GROUP_ELEMENT,
   DEFAULT_MENU_ITEM_ELEMENT,
   DEFAULT_POPOVER_ELEMENT,
+  DEFAULT_SELECTABLE_ELEMENT,
   DEFAULT_SPINNER_ELEMENT,
   DEFAULT_STACK_ELEMENT,
   DEFAULT_TAB_ELEMENT,
@@ -2438,7 +2313,6 @@ export {
   DEFAULT_TOOLTIP_ELEMENT,
   EMPTY_ARRAY,
   EMPTY_RECORD,
-  ElementQuery,
   Flex,
   Grid,
   Hotkeys,
@@ -2464,8 +2338,6 @@ export {
   Tooltip,
   TooltipDelayGroupContext,
   Z_OFFSETS,
-  _ResizeObserver,
-  _elementSizeObserver,
   _getArrayProp,
   _getResponsiveProp,
   _isEnterToClickElement,
@@ -2483,7 +2355,6 @@ export {
   useClickOutsideEvent,
   useCustomValidity,
   useDelayedState,
-  useElementSize,
   useGlobalKeyDown,
   useLayer,
   useMatchMedia,