@sanity/ui 3.0.0-static.26 → 3.0.0-static.28

package/dist/_chunks-cjs/_visual-editing.cjs

@@ -1,5 +1,5 @@
 "use strict";
-var jsxRuntime = require("react/jsx-runtime"), reactCompilerRuntime = require("react-compiler-runtime"), theme = require("@sanity/ui/theme"), react = require("react"), styledComponents = require("styled-components"), css = require("@sanity/ui/css"), resizeObserver = require("@juggle/resize-observer"), useEffectEvent = require("use-effect-event"), icons = require("@sanity/icons"), reactIs = require("react-is"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), dynamic = require("@vanilla-extract/dynamic"), reactDom = require("react-dom");
+var jsxRuntime = require("react/jsx-runtime"), compilerRuntime = require("react/compiler-runtime"), theme = require("@sanity/ui/theme"), react = require("react"), styledComponents = require("styled-components"), css = require("@sanity/ui/css"), useEffectEvent = require("use-effect-event"), icons = require("@sanity/icons"), reactIs = require("react-is"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), reactDom = require("react-dom"), dynamic = require("@vanilla-extract/dynamic");
 function getGlobalScope() {
   if (typeof globalThis < "u") return globalThis;
   if (typeof window < "u") return window;
@@ -14,7 +14,7 @@ function createGlobalScopedContext(key2, defaultValue) {
 }
 const CardContext = createGlobalScopedContext("@sanity/ui/context/card", null);
 function CardProvider(props) {
-  const $ = reactCompilerRuntime.c(7), {
+  const $ = compilerRuntime.c(7), {
     children,
     tone,
     scheme,
@@ -31,7 +31,7 @@ function CardProvider(props) {
 }
 const ThemeContext = createGlobalScopedContext("@sanity/ui/context/theme", null);
 function ThemeProvider(props) {
-  const $ = reactCompilerRuntime.c(19), parentTheme = react.useContext(ThemeContext), {
+  const $ = compilerRuntime.c(19), parentTheme = react.useContext(ThemeContext), {
     children
   } = props, scheme = props.scheme ?? (parentTheme?.scheme || "light"), rootTheme = props.theme ?? (parentTheme?.theme || null), tone = props.tone ?? (parentTheme?.tone || "default");
   let t0;
@@ -77,7 +77,7 @@ function useRootTheme() {
   return value;
 }
 function ThemeColorProvider(props) {
-  const $ = reactCompilerRuntime.c(5), {
+  const $ = compilerRuntime.c(5), {
     children,
     scheme,
     tone
@@ -89,7 +89,7 @@ function useTheme() {
   return styledComponents.useTheme();
 }
 function useTheme_v2() {
-  const $ = reactCompilerRuntime.c(2), t0 = styledComponents.useTheme();
+  const $ = compilerRuntime.c(2), t0 = styledComponents.useTheme();
   let t1;
   return $[0] !== t0 ? (t1 = theme.getTheme_v2(t0), $[0] = t0, $[1] = t1) : t1 = $[1], t1;
 }
@@ -162,190 +162,8 @@ 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 $ = reactCompilerRuntime.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.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], react.useEffect(t2, t3), react.useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
-}
-function _temp$5() {
-  return EMPTY_ARRAY;
-}
-function useCustomValidity(ref, customValidity) {
-  const $ = reactCompilerRuntime.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], react.useEffect(t0, t1);
-}
-const _ResizeObserver = typeof document < "u" && typeof window < "u" && window.ResizeObserver ? window.ResizeObserver : resizeObserver.ResizeObserver, _elementSizeObserver = _createElementSizeObserver();
-function _createElementRectValueListener() {
-  return {
-    subscribe(element, subscriber) {
-      const resizeObserver2 = 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 resizeObserver2.observe(element), () => {
-        resizeObserver2.unobserve(element), resizeObserver2.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 $ = reactCompilerRuntime.c(3), [size2, setSize] = react.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]), react.useEffect(t0, t1), size2;
-}
-function useGlobalKeyDown(onKeyDown) {
-  const $ = reactCompilerRuntime.c(5);
-  let t0;
-  $[0] !== onKeyDown ? (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0) : t0 = $[1];
-  const handleKeyDown = useEffectEvent.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], react.useEffect(t1, t2);
-}
-function useMatchMedia(mediaQueryString, getServerSnapshot2) {
-  const $ = reactCompilerRuntime.c(4);
-  react.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], react.useSyncExternalStore(t0, t1, getServerSnapshot2);
-}
-const media = Object.values(css.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 $ = reactCompilerRuntime.c(1);
-  let t0, t1;
-  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = _createMediaStore(), $[0] = t1) : t1 = $[0], t0 = t1;
-  const store = t0;
-  return react.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 $ = reactCompilerRuntime.c(3);
+  const $ = compilerRuntime.c(3);
   let t0;
   $[0] !== defaultVal || $[1] !== val ? (t0 = () => [_getResponsiveProp(val, defaultVal), JSON.stringify(val ?? defaultVal)], $[0] = defaultVal, $[1] = val, $[2] = t0) : t0 = $[2];
   const [t1, setCache] = react.useState(t0), [cachedVal, cachedHash] = t1, hash = JSON.stringify(val ?? defaultVal);
@@ -353,7 +171,7 @@ function useResponsiveProp(val, defaultVal) {
 }
 const DEFAULT_BOX_ELEMENT = "div";
 function Box(props) {
-  const $ = reactCompilerRuntime.c(154), t0 = props;
+  const $ = compilerRuntime.c(154), t0 = props;
   let alignItems, autoCols, autoFlow, autoRows, borderBottom, borderLeft, borderRight, borderTop, children, className, column, columnEnd, columnStart, columns, flex, flexDirection, flexWrap, gap, gapX, gapY, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnEnd, gridColumnStart, gridRow, gridRowEnd, gridRowStart, gridTemplateColumns, gridTemplateRows, height, inset, insetBottom, insetLeft, insetRight, insetTop, justifyContent, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, maxWidth, muted, outline, overflow, overflowX, overflowY, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, pointerEvents, position, radius, rest, row, rowEnd, rowStart, rows, shadow, t1, t2, t3, t4, t5, t6, t7, t8, textAlign, width;
   $[0] !== t0 ? ({
     alignItems,
@@ -513,8 +331,8 @@ function Box(props) {
 }
 const DEFAULT_TEXT_ELEMENT = "div";
 function Text(props) {
-  const $ = reactCompilerRuntime.c(30), t0 = props;
-  let accent, align, children, className, flex, muted, rest, t1, t2, t3, textOverflowProp;
+  const $ = compilerRuntime.c(32), t0 = props;
+  let accent, align, children, className, flex, muted, rest, t1, t2, t3, t4, textOverflowProp;
   $[0] !== t0 ? ({
     accent,
     align,
@@ -522,34 +340,36 @@ function Text(props) {
     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 = css.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 = css.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 = css.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__ */ jsxRuntime.jsx("span", { className: t5, children }), $[22] = children, $[23] = t5, $[24] = t6) : t6 = $[24];
+  $[22] !== textOverflowProp ? (t6 = css.textOverflow({
+    textOverflow: textOverflowProp
+  }), $[22] = textOverflowProp, $[23] = t6) : t6 = $[23];
   let t7;
-  return $[25] !== Element || $[26] !== rest || $[27] !== t4 || $[28] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 $ = reactCompilerRuntime.c(5);
+  const $ = compilerRuntime.c(5);
   let rest;
   $[0] !== props ? ({
     ...rest
@@ -561,7 +381,7 @@ function AnimatedSpinnerIcon(props) {
 }
 const DEFAULT_SPINNER_ELEMENT = "div";
 function Spinner(props) {
-  const $ = reactCompilerRuntime.c(11), t0 = props;
+  const $ = compilerRuntime.c(11), t0 = props;
   let className, rest, t1;
   $[0] !== t0 ? ({
     as: t1,
@@ -586,7 +406,6 @@ function Button(props) {
     children,
     className,
     disabled,
-    display = "inline-flex",
     flex,
     fontSize = 1,
     gap = props.space ?? props.padding ?? 3,
@@ -626,7 +445,6 @@ function Button(props) {
       ...rest,
       className: css.button({
         className,
-        display,
         flex,
         mode,
         radius,
@@ -645,7 +463,7 @@ function Button(props) {
             react.isValidElement(IconComponent) && IconComponent,
             reactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
           ] }),
-          text && /* @__PURE__ */ jsxRuntime.jsx(Text, { align: textAlign, as: "span", flex: "none", muted, size: fontSize, textOverflow, weight: textWeight, children: text }),
+          text && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", maxWidth: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { align: textAlign, as: "span", muted, size: fontSize, textOverflow, weight: textWeight, children: text }) }),
           IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { as: "span", flex: "none", muted: !0, size: fontSize, children: [
             react.isValidElement(IconRightComponent) && IconRightComponent,
             reactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
@@ -661,7 +479,7 @@ function useCard() {
 }
 const DEFAULT_CARD_ELEMENT = "div";
 function Card(props) {
-  const $ = reactCompilerRuntime.c(38), t0 = props;
+  const $ = compilerRuntime.c(38), t0 = props;
   let className, disabled, pressed, rest, schemeProp, selected, style, t1, t2, t3, t4, t5;
   $[0] !== t0 ? ({
     __unstable_checkered: t1,
@@ -699,90 +517,22 @@ function Card(props) {
   }
   return node;
 }
-const LazyRefractor = react.lazy(() => Promise.resolve().then(function() {
-  return require("./refractor.cjs");
-})), DEFAULT_CODE_ELEMENT = "pre";
-function Code(props) {
-  const $ = reactCompilerRuntime.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 = css.code({
-    className,
-    size: size2,
-    weight
-  }), $[8] = className, $[9] = size2, $[10] = weight, $[11] = t4) : t4 = $[11];
-  let t5;
-  $[12] !== children ? (t5 = /* @__PURE__ */ jsxRuntime.jsx("code", { children }), $[12] = children, $[13] = t5) : t5 = $[13];
-  let t6;
-  $[14] !== children || $[15] !== language ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(LazyRefractor, { language, value: children }), $[14] = children, $[15] = language, $[16] = t6) : t6 = $[16];
-  let t7;
-  $[17] !== t5 || $[18] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(react.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__ */ jsxRuntime.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 $ = reactCompilerRuntime.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__ */ jsxRuntime.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 useMatchMedia(mediaQueryString, getServerSnapshot2) {
+  const $ = compilerRuntime.c(4);
+  react.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], react.useSyncExternalStore(t0, t1, getServerSnapshot2);
 }
-const DEFAULT_GRID_ELEMENT = "div";
-function Grid(props) {
-  const $ = reactCompilerRuntime.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__ */ jsxRuntime.jsx(Box, { "data-ui": "Grid", ...rest, as, display: "grid", children }), $[4] = as, $[5] = children, $[6] = rest, $[7] = t2) : t2 = $[7], t2;
+function usePrefersReducedMotion(t0) {
+  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$5 : t0);
 }
-const DEFAULT_KBD_ELEMENT = "kbd";
-function KBD(props) {
-  const $ = reactCompilerRuntime.c(22), t0 = props;
-  let children, className, rest, t1, t2, t3, t4, t5;
-  $[0] !== t0 ? ({
-    as: t1,
-    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 = css.kbd({
-    className,
-    radius
-  }), $[9] = className, $[10] = radius, $[11] = t7) : t7 = $[11];
-  let t8;
-  $[12] !== children || $[13] !== fontSize ? (t8 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
+function _temp$5() {
+  return !1;
 }
 const origin = {
   name: "@sanity/ui/origin",
@@ -815,170 +565,83 @@ const origin = {
 function clamp(num, min, max) {
   return Math.min(Math.max(num, min), max);
 }
-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));
+const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null), DEFAULT_VALUE = {
+  version: 0,
+  element: null
+};
+function useBoundaryElement() {
+  const value = react.useContext(BoundaryElementContext);
+  if (value && (!isRecord(value) || value.version !== 0))
+    throw new Error("useBoundaryElement(): the context value is not compatible");
+  return value || DEFAULT_VALUE;
 }
-function moveTowardsFractional(movingPoint, targetPoint, fraction) {
-  return {
-    x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
-    y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction
-  };
+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 = react.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 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(" ");
+function Portal(props) {
+  const $ = compilerRuntime.c(6), {
+    children,
+    __unstable_name: name
+  } = props, card = useCard(), portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
+  if (!portalElement)
+    return null;
+  const t0 = card?.scheme || "light";
+  let t1;
+  $[0] !== children || $[1] !== t0 ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { tone: "transparent", scheme: t0, children }), $[0] = children, $[1] = t0, $[2] = t1) : t1 = $[2];
+  let t2;
+  return $[3] !== portalElement || $[4] !== t1 ? (t2 = reactDom.createPortal(t1, portalElement), $[3] = portalElement, $[4] = t1, $[5] = t2) : t2 = $[5], t2;
 }
-const DEFAULT_ARROW_ELEMENT = "div";
-function Arrow(props) {
-  const $ = reactCompilerRuntime.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;
+function PortalProvider(props) {
+  const $ = compilerRuntime.c(7), {
+    boundaryElement,
+    children,
+    element,
+    __unstable_elements: elementsProp
+  } = props, elements = useUnique(elementsProp), fallbackElement = react.useSyncExternalStore(emptySubscribe, _temp$4, _temp2$2);
+  let t0;
+  const t1 = boundaryElement || null, t2 = element || fallbackElement;
   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`;
+  $[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;
-  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = css._arrow(), $[7] = t4) : t4 = $[7];
-  const t5 = `${w}px`;
-  let t6;
-  $[8] !== t5 ? (t6 = dynamic.assignInlineVars({
-    [css.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 = css._arrowSvg(), $[13] = t8) : t8 = $[13];
-  const t9 = `0 0 ${w} ${w}`;
-  let t10;
-  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t10 = css._arrowStrokeMask(), $[14] = t10) : t10 = $[14];
-  let t11;
-  $[15] !== w ? (t11 = /* @__PURE__ */ jsxRuntime.jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsxRuntime.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 = css._arrowStroke(), $[17] = t12) : t12 = $[17];
-  let t13;
-  $[18] !== strokePath ? (t13 = /* @__PURE__ */ jsxRuntime.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 = css._arrowShape(), $[20] = t14) : t14 = $[20];
-  let t15;
-  $[21] !== fillPath ? (t15 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Element, { ...rest, className: t4, style: t7, children: t16 }), $[29] = Element, $[30] = rest, $[31] = t16, $[32] = t7, $[33] = t17) : t17 = $[33], t17;
+  return $[4] !== children || $[5] !== value ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value, children }), $[4] = children, $[5] = value, $[6] = t4) : t4 = $[6], t4;
 }
-const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null), DEFAULT_VALUE = {
-  version: 0,
-  element: null
+function _temp2$2() {
+  return null;
+}
+function _temp$4() {
+  return document.body;
+}
+const emptySubscribe = () => () => {
 };
-function useBoundaryElement() {
-  const value = react.useContext(BoundaryElementContext);
-  if (value && (!isRecord(value) || value.version !== 0))
-    throw new Error("useBoundaryElement(): the context value is not compatible");
-  return value || DEFAULT_VALUE;
+function useUnique(value) {
+  const valueRef = react.useRef(value);
+  return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
 }
-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(css.BREAKPOINTS);
-function ElementQuery(props) {
-  const $ = reactCompilerRuntime.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] = react.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]), react.useImperativeHandle(forwardedRef, t7, t8);
-  let t9;
-  return $[15] !== Element || $[16] !== children || $[17] !== max || $[18] !== min || $[19] !== rest ? (t9 = /* @__PURE__ */ jsxRuntime.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;
+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)
@@ -991,7 +654,7 @@ function getLayerContext(contextValue) {
 }
 const LayerContext = createGlobalScopedContext("@sanity/ui/context/layer", null);
 function useLayer() {
-  const $ = reactCompilerRuntime.c(2), value = react.useContext(LayerContext);
+  const $ = compilerRuntime.c(2), value = react.useContext(LayerContext);
   if (!value)
     throw new Error("useLayer(): missing context value");
   try {
@@ -1004,7 +667,7 @@ function useLayer() {
 }
 const DEFAULT_LAYER_CARD_ELEMENT = "div";
 function LayerCard(props) {
-  const $ = reactCompilerRuntime.c(27), t0 = props;
+  const $ = compilerRuntime.c(27), t0 = props;
   let children, forwardedRef, onActivate, onFocus, rest, t1, t2, t3;
   $[0] !== t0 ? ({
     as: t1,
@@ -1043,8 +706,64 @@ function LayerCard(props) {
   let t10;
   return $[20] !== children || $[21] !== handleFocus || $[22] !== position || $[23] !== rest || $[24] !== t8 || $[25] !== t9 ? (t10 = /* @__PURE__ */ jsxRuntime.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;
 }
+const media = Object.values(css.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 $ = compilerRuntime.c(1);
+  let t0, t1;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = _createMediaStore(), $[0] = t1) : t1 = $[0], t0 = t1;
+  const store = t0;
+  return react.useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
+}
 function LayerProvider(props) {
-  const $ = reactCompilerRuntime.c(19), {
+  const $ = compilerRuntime.c(19), {
     children,
     zOffset: t0
   } = props, zOffsetProp = t0 === void 0 ? 0 : t0, parentContextValue = react.useContext(LayerContext);
@@ -1063,13 +782,13 @@ function LayerProvider(props) {
         [childLevel]: prevLen + 1
       };
       return setSize(Object.keys(nextState).length), nextState;
-    }) : setSize(_temp$2), () => {
+    }) : 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$2), parentDispose?.();
+      }) : setSize(_temp2$1), parentDispose?.();
     };
   }, $[3] = parentRegisterChild, $[4] = setChildLayers, $[5] = t3) : t3 = $[5];
   const registerChild = t3;
@@ -1088,15 +807,15 @@ function LayerProvider(props) {
   let t8;
   return $[16] !== children || $[17] !== value ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children }), $[16] = children, $[17] = value, $[18] = t8) : t8 = $[18], t8;
 }
-function _temp2$2(v_0) {
+function _temp2$1(v_0) {
   return v_0 - 1;
 }
-function _temp$2(v) {
+function _temp$3(v) {
   return v + 1;
 }
 const DEFAULT_LAYER_ELEMENT = "div";
 function Layer(props) {
-  const $ = reactCompilerRuntime.c(12), t0 = props;
+  const $ = compilerRuntime.c(12), t0 = props;
   let children, rest, t1, t2;
   $[0] !== t0 ? ({
     as: t1,
@@ -1110,74 +829,6 @@ function Layer(props) {
   let t4;
   return $[9] !== t3 || $[10] !== zOffset ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: t3 }), $[9] = t3, $[10] = zOffset, $[11] = t4) : t4 = $[11], t4;
 }
-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 = react.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 $ = reactCompilerRuntime.c(6), {
-    children,
-    __unstable_name: name
-  } = props, card = useCard(), portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
-  if (!portalElement)
-    return null;
-  const t0 = card?.scheme || "light";
-  let t1;
-  $[0] !== children || $[1] !== t0 ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { tone: "transparent", scheme: t0, children }), $[0] = children, $[1] = t0, $[2] = t1) : t1 = $[2];
-  let t2;
-  return $[3] !== portalElement || $[4] !== t1 ? (t2 = reactDom.createPortal(t1, portalElement), $[3] = portalElement, $[4] = t1, $[5] = t2) : t2 = $[5], t2;
-}
-function PortalProvider(props) {
-  const $ = reactCompilerRuntime.c(7), {
-    boundaryElement,
-    children,
-    element,
-    __unstable_elements: elementsProp
-  } = props, elements = useUnique(elementsProp), fallbackElement = react.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__ */ jsxRuntime.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 = react.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"],
@@ -1233,8 +884,131 @@ function size(options) {
     }
   };
 }
+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 $ = compilerRuntime.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 = css._arrow(), $[7] = t4) : t4 = $[7];
+  const t5 = `${w}px`;
+  let t6;
+  $[8] !== t5 ? (t6 = dynamic.assignInlineVars({
+    [css.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 = css._arrowSvg(), $[13] = t8) : t8 = $[13];
+  const t9 = `0 0 ${w} ${w}`;
+  let t10;
+  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t10 = css._arrowStrokeMask(), $[14] = t10) : t10 = $[14];
+  let t11;
+  $[15] !== w ? (t11 = /* @__PURE__ */ jsxRuntime.jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsxRuntime.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 = css._arrowStroke(), $[17] = t12) : t12 = $[17];
+  let t13;
+  $[18] !== strokePath ? (t13 = /* @__PURE__ */ jsxRuntime.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 = css._arrowShape(), $[20] = t14) : t14 = $[20];
+  let t15;
+  $[21] !== fillPath ? (t15 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 $ = compilerRuntime.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__ */ jsxRuntime.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 $ = reactCompilerRuntime.c(65);
+  const $ = compilerRuntime.c(65);
   let animate, arrow, 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,
@@ -1309,7 +1083,7 @@ function PopoverLayer(props) {
 }
 const DEFAULT_POPOVER_ELEMENT = "div";
 function ViewportOverlay() {
-  const $ = reactCompilerRuntime.c(2), {
+  const $ = compilerRuntime.c(2), {
     zIndex
   } = useLayer();
   let t0;
@@ -1439,7 +1213,7 @@ function getElementRef$1(element) {
 }
 const DEFAULT_STACK_ELEMENT = "div";
 function Stack(props) {
-  const $ = reactCompilerRuntime.c(13), t0 = props;
+  const $ = compilerRuntime.c(13), t0 = props;
   let className, gap, rest, space, t1;
   $[0] !== t0 ? ({
     as: t1,
@@ -1457,9 +1231,18 @@ function Stack(props) {
   let t4;
   return $[8] !== as || $[9] !== rest || $[10] !== t2 || $[11] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.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 $ = compilerRuntime.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], react.useEffect(t0, t1);
+}
 const DEFAULT_TEXT_INPUT_ELEMENT = "input";
 function TextInput(props) {
-  const $ = reactCompilerRuntime.c(89), t0 = props;
+  const $ = compilerRuntime.c(89), t0 = props;
   let IconComponent, IconRightComponent, __unstable_disableFocusRing, className, clearButton, customValidity, forwardedRef, gap, onClear, prefix, readOnly, rest, suffix, t1, t2, t3, t4, t5, t6, t7, t8, width;
   if ($[0] !== t0) {
     const {
@@ -1493,7 +1276,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 = react.useRef(null), responsivePadding = useResponsiveProp(padding), withClearButton = !!clearButton;
   let t9;
   $[23] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => ref.current, $[23] = t9) : t9 = $[23], react.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();
@@ -1572,258 +1355,84 @@ 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 $ = reactCompilerRuntime.c(3), [state, setState] = react.useState(initialState), delayedAction = react.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 $ = compilerRuntime.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.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], react.useEffect(t2, t3), react.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 react.useContext(TooltipDelayGroupContext);
+function useGlobalKeyDown(onKeyDown) {
+  const $ = compilerRuntime.c(5);
+  let t0;
+  $[0] !== onKeyDown ? (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0) : t0 = $[1];
+  const handleKeyDown = useEffectEvent.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], react.useEffect(t1, t2);
 }
-function TooltipLayer(props) {
-  const $ = reactCompilerRuntime.c(50);
-  let animate, arrow, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, rest, scheme, shadow, style, t0;
-  $[0] !== props ? ({
-    animate,
-    arrow,
-    arrowRef,
-    arrowX,
-    arrowY,
+const DEFAULT_KBD_ELEMENT = "kbd";
+function KBD(props) {
+  const $ = compilerRuntime.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] = arrow, $[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], arrow = $[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] !== arrow || $[32] !== arrowRef || $[33] !== arrowStyle ? (t12 = arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_TOOLTIP_ARROW_WIDTH, height: DEFAULT_TOOLTIP_ARROW_HEIGHT, radius: DEFAULT_TOOLTIP_ARROW_RADIUS }), $[31] = arrow, $[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__ */ jsxRuntime.jsxs(Layer, { "data-ui": "Tooltip__layer", ...rest, as: framerMotion.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 = css.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, card = useCard(), animate = usePrefersReducedMotion() ? !1 : _animate, ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
-  react.useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = react.useMemo(() => {
-    const ret = [];
-    return ret.push(reactDom$1.flip({
-      boundary: boundaryElement || void 0,
-      fallbackPlacements,
-      padding: DEFAULT_TOOLTIP_PADDING,
-      rootBoundary
-    })), ret.push(reactDom$1.offset({
-      mainAxis: DEFAULT_TOOLTIP_DISTANCE
-    })), ret.push(reactDom$1.shift({
-      boundary: boundaryElement || void 0,
-      rootBoundary,
-      padding: DEFAULT_TOOLTIP_PADDING
-    })), arrowProp && ret.push(reactDom$1.arrow({
-      element: arrowRef,
-      padding: DEFAULT_TOOLTIP_PADDING
-    })), animate && ret.push(origin), ret;
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements]), {
-    floatingStyles,
-    placement,
-    middlewareData,
-    refs,
-    update
-  } = reactDom$1.useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: reactDom$1.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 = react.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 = react.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 = react.useCallback((e) => {
-    handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
-  }, [childProp?.props, handleIsOpenChange]), handleClick = react.useCallback((e_0) => {
-    handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
-  }, [childProp?.props, handleIsOpenChange]), handleContextMenu = react.useCallback((e_1) => {
-    handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
-  }, [childProp?.props, handleIsOpenChange]), handleFocus = react.useCallback((e_2) => {
-    handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseEnter = react.useCallback((e_3) => {
-    handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseLeave = react.useCallback((e_4) => {
-    handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
-  }, [childProp?.props, handleIsOpenChange]);
-  useCloseOnMouseLeave({
-    handleIsOpenChange,
-    referenceElement,
-    showTooltip,
-    isInsideGroup
-  }), react.useEffect(() => {
-    disabled && showTooltip && handleIsOpenChange(!1);
-  }, [disabled, handleIsOpenChange, showTooltip]), react.useEffect(() => {
-    !content && showTooltip && handleIsOpenChange(!1);
-  }, [content, handleIsOpenChange, showTooltip]), react.useEffect(() => {
-    if (!showTooltip) return;
-    function handleWindowKeyDown(event) {
-      event.key === "Escape" && handleIsOpenChange(!1, !0);
-    }
-    return window.addEventListener("keydown", handleWindowKeyDown), () => {
-      window.removeEventListener("keydown", handleWindowKeyDown);
-    };
-  }, [handleIsOpenChange, showTooltip]), react.useLayoutEffect(() => {
-    const availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
-    setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
-  }, [boundaryElement, portalElement]);
-  const setArrow = react.useCallback((arrowEl) => {
-    arrowRef.current = arrowEl, update();
-  }, [update]), setFloating = react.useCallback((node) => {
-    ref.current = node, refs.setFloating(node);
-  }, [refs]), child = react.useMemo(() => childProp ? react.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 (react.useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [referenceElement]), !child) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  if (disabled) return child;
-  const node_0 = /* @__PURE__ */ jsxRuntime.jsx(TooltipLayer, { "data-ui": "Tooltip", ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: css.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__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { tone: tone === "inherit" ? card?.tone ?? "default" : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children,
-    child
-  ] });
-}
-function useCloseOnMouseLeave(t0) {
-  const $ = reactCompilerRuntime.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.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], react.useEffect(t2, t3);
+    radius
+  }), $[9] = className, $[10] = radius, $[11] = t7) : t7 = $[11];
+  let t8;
+  $[12] !== children || $[13] !== fontSize ? (t8 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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) {
-  const $ = reactCompilerRuntime.c(27), t0 = props;
+  const $ = compilerRuntime.c(27), t0 = props;
   let fontSize, gap, gapX, gapY, keys, padding, radius, rest, t1, t2;
   $[0] !== t0 ? ({
     as: t1,
@@ -1990,7 +1599,7 @@ function useMenuController(props) {
 }
 const DEFAULT_MENU_ELEMENT = "div";
 function Menu(props) {
-  const $ = reactCompilerRuntime.c(58), t0 = props;
+  const $ = compilerRuntime.c(58), t0 = props;
   let _shouldFocus, children, className, forwardedRef, gap, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, rest, t1, t2, t3;
   if ($[0] !== t0) {
     const {
@@ -2082,7 +1691,7 @@ function Menu(props) {
 }
 const DEFAULT_MENU_DIVIDER_ELEMENT = "hr";
 function MenuDivider(props) {
-  const $ = reactCompilerRuntime.c(10), t0 = props;
+  const $ = compilerRuntime.c(10), t0 = props;
   let className, rest, t1;
   $[0] !== t0 ? ({
     as: t1,
@@ -2099,24 +1708,26 @@ function MenuDivider(props) {
 }
 const DEFAULT_SELECTABLE_ELEMENT = "button";
 function Selectable(props) {
-  const $ = reactCompilerRuntime.c(14), t0 = props;
-  let className, radius, rest, t1, tone;
+  const $ = compilerRuntime.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] = t1, $[5] = tone) : (className = $[1], radius = $[2], rest = $[3], t1 = $[4], tone = $[5]);
+  } = 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;
-  $[6] !== className || $[7] !== radius || $[8] !== tone ? (t2 = css._selectable({
+  $[7] !== className || $[8] !== radius || $[9] !== tone ? (t2 = css._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__ */ jsxRuntime.jsx(Box, { ...rest, as, className: t2 }), $[10] = as, $[11] = rest, $[12] = t2, $[13] = t3) : t3 = $[13], t3;
+  }), $[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__ */ jsxRuntime.jsx(Box, { ...rest, as, className: t2, "data-selected": t3 }), $[11] = as, $[12] = rest, $[13] = t2, $[14] = t3, $[15] = t4) : t4 = $[15], t4;
 }
 function useMenu() {
   const value = react.useContext(MenuContext);
@@ -2128,7 +1739,7 @@ function useMenu() {
 }
 const DEFAULT_MENU_GROUP_ELEMENT = "button";
 function MenuGroup(props) {
-  const $ = reactCompilerRuntime.c(79), t0 = props;
+  const $ = compilerRuntime.c(78), t0 = props;
   let IconComponent, children, gap, menuProps, onClick, popover, rest, t1, t2, t3, t4, t5, t6, text;
   $[0] !== t0 ? ({
     as: t1,
@@ -2208,32 +1819,32 @@ 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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Text, { size: fontSize, children: [
     react.isValidElement(IconComponent) && IconComponent,
     reactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
-  ] }), $[47] = IconComponent, $[48] = fontSize, $[49] = t27) : t27 = $[49];
+  ] }), $[47] = IconComponent, $[48] = fontSize, $[49] = t25) : t25 = $[49];
+  let t26;
+  $[50] !== fontSize || $[51] !== text ? (t26 = /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize, textOverflow: "ellipsis", weight: "medium", children: text }) }), $[50] = fontSize, $[51] = text, $[52] = t26) : t26 = $[52];
+  let t27;
+  $[53] === Symbol.for("react.memo_cache_sentinel") ? (t27 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}), $[53] = t27) : t27 = $[53];
   let t28;
-  $[50] !== fontSize || $[51] !== text ? (t28 = /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize, textOverflow: "ellipsis", weight: "medium", children: text }) }), $[50] = fontSize, $[51] = text, $[52] = t28) : t28 = $[52];
+  $[54] !== fontSize ? (t28 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize, children: t27 }), $[54] = fontSize, $[55] = t28) : t28 = $[55];
   let t29;
-  $[53] === Symbol.for("react.memo_cache_sentinel") ? (t29 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}), $[53] = t29) : t29 = $[53];
+  $[56] !== padding || $[57] !== t24 || $[58] !== t25 || $[59] !== t26 || $[60] !== t28 ? (t29 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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] !== popover || $[77] !== t32 ? (t33 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t32 }), $[74] = childMenu, $[75] = open, $[76] = popover, $[77] = t32, $[78] = t33) : t33 = $[78], t33;
+  return $[73] !== childMenu || $[74] !== open || $[75] !== popover || $[76] !== t30 ? (t31 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t30 }), $[73] = childMenu, $[74] = open, $[75] = popover, $[76] = t30, $[77] = t31) : t31 = $[77], t31;
 }
 const DEFAULT_MENU_ITEM_ELEMENT = "button";
 function MenuItem(props) {
-  const $ = reactCompilerRuntime.c(75), t0 = props;
+  const $ = compilerRuntime.c(75), t0 = props;
   let IconComponent, IconRightComponent, children, disabled, forwardedRef, gap, gapX, gapY, hotkeys, onClick, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, pressed, rest, selectedProp, t1, t2, t3, t4, t5, t6, text;
   $[0] !== t0 ? ({
     as: t1,
@@ -2321,7 +1932,7 @@ function MenuItem(props) {
 }
 const DEFAULT_TAB_ELEMENT = "button";
 function Tab(props) {
-  const $ = reactCompilerRuntime.c(33), t0 = props;
+  const $ = compilerRuntime.c(33), t0 = props;
   let focused, forwardedRef, icon, id, label, onClick, onFocus, rest, selected, t1, t2, t3;
   $[0] !== t0 ? ({
     as: t1,
@@ -2360,7 +1971,7 @@ function Tab(props) {
 }
 const DEFAULT_TAB_LIST_ELEMENT = "div";
 function TabList(props) {
-  const $ = reactCompilerRuntime.c(21), t0 = props;
+  const $ = compilerRuntime.c(21), t0 = props;
   let childrenProp, rest, t1, t2, t3, t4;
   $[0] !== t0 ? ({
     as: t1,
@@ -2394,6 +2005,271 @@ function TabList(props) {
 function _isReactElement(node) {
   return !!node;
 }
+const DEFAULT_GRID_ELEMENT = "div";
+function Grid(props) {
+  const $ = compilerRuntime.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__ */ jsxRuntime.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 $ = compilerRuntime.c(3), [state, setState] = react.useState(initialState), delayedAction = react.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 react.useContext(TooltipDelayGroupContext);
+}
+function TooltipLayer(props) {
+  const $ = compilerRuntime.c(50);
+  let animate, arrow, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, rest, scheme, shadow, style, t0;
+  $[0] !== props ? ({
+    animate,
+    arrow,
+    arrowRef,
+    arrowX,
+    arrowY,
+    children,
+    originX,
+    originY,
+    padding,
+    placement,
+    radius,
+    scheme,
+    shadow,
+    style,
+    tone: t0,
+    ...rest
+  } = props, $[0] = props, $[1] = animate, $[2] = arrow, $[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], arrow = $[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] !== arrow || $[32] !== arrowRef || $[33] !== arrowStyle ? (t12 = arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_TOOLTIP_ARROW_WIDTH, height: DEFAULT_TOOLTIP_ARROW_HEIGHT, radius: DEFAULT_TOOLTIP_ARROW_RADIUS }), $[31] = arrow, $[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__ */ jsxRuntime.jsxs(Layer, { "data-ui": "Tooltip__layer", ...rest, as: framerMotion.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, card = useCard(), animate = usePrefersReducedMotion() ? !1 : _animate, ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
+  react.useImperativeHandle(forwardedRef, () => ref.current);
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = react.useMemo(() => {
+    const ret = [];
+    return ret.push(reactDom$1.flip({
+      boundary: boundaryElement || void 0,
+      fallbackPlacements,
+      padding: DEFAULT_TOOLTIP_PADDING,
+      rootBoundary
+    })), ret.push(reactDom$1.offset({
+      mainAxis: DEFAULT_TOOLTIP_DISTANCE
+    })), ret.push(reactDom$1.shift({
+      boundary: boundaryElement || void 0,
+      rootBoundary,
+      padding: DEFAULT_TOOLTIP_PADDING
+    })), arrowProp && ret.push(reactDom$1.arrow({
+      element: arrowRef,
+      padding: DEFAULT_TOOLTIP_PADDING
+    })), animate && ret.push(origin), ret;
+  }, [animate, arrowProp, boundaryElement, fallbackPlacements]), {
+    floatingStyles,
+    placement,
+    middlewareData,
+    refs,
+    update
+  } = reactDom$1.useFloating({
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: reactDom$1.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 = react.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 = react.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 = react.useCallback((e) => {
+    handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
+  }, [childProp?.props, handleIsOpenChange]), handleClick = react.useCallback((e_0) => {
+    handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
+  }, [childProp?.props, handleIsOpenChange]), handleContextMenu = react.useCallback((e_1) => {
+    handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
+  }, [childProp?.props, handleIsOpenChange]), handleFocus = react.useCallback((e_2) => {
+    handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
+  }, [childProp?.props, handleIsOpenChange]), handleMouseEnter = react.useCallback((e_3) => {
+    handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
+  }, [childProp?.props, handleIsOpenChange]), handleMouseLeave = react.useCallback((e_4) => {
+    handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
+  }, [childProp?.props, handleIsOpenChange]);
+  useCloseOnMouseLeave({
+    handleIsOpenChange,
+    referenceElement,
+    showTooltip,
+    isInsideGroup
+  }), react.useEffect(() => {
+    disabled && showTooltip && handleIsOpenChange(!1);
+  }, [disabled, handleIsOpenChange, showTooltip]), react.useEffect(() => {
+    !content && showTooltip && handleIsOpenChange(!1);
+  }, [content, handleIsOpenChange, showTooltip]), react.useEffect(() => {
+    if (!showTooltip) return;
+    function handleWindowKeyDown(event) {
+      event.key === "Escape" && handleIsOpenChange(!1, !0);
+    }
+    return window.addEventListener("keydown", handleWindowKeyDown), () => {
+      window.removeEventListener("keydown", handleWindowKeyDown);
+    };
+  }, [handleIsOpenChange, showTooltip]), react.useLayoutEffect(() => {
+    const availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
+    setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
+  }, [boundaryElement, portalElement]);
+  const setArrow = react.useCallback((arrowEl) => {
+    arrowRef.current = arrowEl, update();
+  }, [update]), setFloating = react.useCallback((node) => {
+    ref.current = node, refs.setFloating(node);
+  }, [refs]), child = react.useMemo(() => childProp ? react.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 (react.useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [referenceElement]), !child) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  if (disabled) return child;
+  const node_0 = /* @__PURE__ */ jsxRuntime.jsx(TooltipLayer, { "data-ui": "Tooltip", ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: css.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__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { tone: tone === "inherit" ? card?.tone ?? "default" : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children,
+    child
+  ] });
+}
+function useCloseOnMouseLeave(t0) {
+  const $ = compilerRuntime.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.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], react.useEffect(t2, t3);
+}
 exports.AnimatedSpinnerIcon = AnimatedSpinnerIcon;
 exports.Arrow = Arrow;
 exports.BoundaryElementContext = BoundaryElementContext;
@@ -2401,13 +2277,10 @@ exports.Box = Box;
 exports.Button = Button;
 exports.Card = Card;
 exports.CardProvider = CardProvider;
-exports.Code = Code;
 exports.DEFAULT_ARROW_ELEMENT = DEFAULT_ARROW_ELEMENT;
 exports.DEFAULT_BOX_ELEMENT = DEFAULT_BOX_ELEMENT;
 exports.DEFAULT_BUTTON_ELEMENT = DEFAULT_BUTTON_ELEMENT;
 exports.DEFAULT_CARD_ELEMENT = DEFAULT_CARD_ELEMENT;
-exports.DEFAULT_CODE_ELEMENT = DEFAULT_CODE_ELEMENT;
-exports.DEFAULT_ELEMENT_QUERY_ELEMENT = DEFAULT_ELEMENT_QUERY_ELEMENT;
 exports.DEFAULT_FLEX_ELEMENT = DEFAULT_FLEX_ELEMENT;
 exports.DEFAULT_GRID_ELEMENT = DEFAULT_GRID_ELEMENT;
 exports.DEFAULT_HOTKEYS_ELEMENT = DEFAULT_HOTKEYS_ELEMENT;
@@ -2418,6 +2291,7 @@ exports.DEFAULT_MENU_ELEMENT = DEFAULT_MENU_ELEMENT;
 exports.DEFAULT_MENU_GROUP_ELEMENT = DEFAULT_MENU_GROUP_ELEMENT;
 exports.DEFAULT_MENU_ITEM_ELEMENT = DEFAULT_MENU_ITEM_ELEMENT;
 exports.DEFAULT_POPOVER_ELEMENT = DEFAULT_POPOVER_ELEMENT;
+exports.DEFAULT_SELECTABLE_ELEMENT = DEFAULT_SELECTABLE_ELEMENT;
 exports.DEFAULT_SPINNER_ELEMENT = DEFAULT_SPINNER_ELEMENT;
 exports.DEFAULT_STACK_ELEMENT = DEFAULT_STACK_ELEMENT;
 exports.DEFAULT_TAB_ELEMENT = DEFAULT_TAB_ELEMENT;
@@ -2427,7 +2301,6 @@ exports.DEFAULT_TEXT_INPUT_ELEMENT = DEFAULT_TEXT_INPUT_ELEMENT;
 exports.DEFAULT_TOOLTIP_ELEMENT = DEFAULT_TOOLTIP_ELEMENT;
 exports.EMPTY_ARRAY = EMPTY_ARRAY;
 exports.EMPTY_RECORD = EMPTY_RECORD;
-exports.ElementQuery = ElementQuery;
 exports.Flex = Flex;
 exports.Grid = Grid;
 exports.Hotkeys = Hotkeys;
@@ -2453,8 +2326,6 @@ exports.ThemeProvider = ThemeProvider;
 exports.Tooltip = Tooltip;
 exports.TooltipDelayGroupContext = TooltipDelayGroupContext;
 exports.Z_OFFSETS = Z_OFFSETS;
-exports._ResizeObserver = _ResizeObserver;
-exports._elementSizeObserver = _elementSizeObserver;
 exports._getArrayProp = _getArrayProp;
 exports._getResponsiveProp = _getResponsiveProp;
 exports._isEnterToClickElement = _isEnterToClickElement;
@@ -2472,7 +2343,6 @@ exports.useCard = useCard;
 exports.useClickOutsideEvent = useClickOutsideEvent;
 exports.useCustomValidity = useCustomValidity;
 exports.useDelayedState = useDelayedState;
-exports.useElementSize = useElementSize;
 exports.useGlobalKeyDown = useGlobalKeyDown;
 exports.useLayer = useLayer;
 exports.useMatchMedia = useMatchMedia;