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

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

@@ -3,7 +3,7 @@ import { c } from "react/compiler-runtime";
 import { getScopedTheme, getTheme_v2 } from "@sanity/ui/theme";
 import { createContext, useContext, useState, isValidElement, useDebugValue, useSyncExternalStore, useRef, useImperativeHandle, useEffect, useMemo, useCallback, cloneElement, Children, useId, useLayoutEffect } from "react";
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1 } from "styled-components";
-import { box, _selectable, text, textOverflow, animatedSpinnerIcon, spinner, button, buttonLoadingBox, card, BREAKPOINTS, _arrow, vars, _arrowSvg, _arrowStrokeMask, _arrowStroke, _arrowShape, popoverCard, popover, stack, textInput, textInputPrefix, textInputElement, _inputElement, _inputPresentation, textInputSuffix, kbd, menu, menuDivider, tooltip } from "@sanity/ui/css";
+import { box, text, textOverflow, animatedSpinnerIcon, spinner, button, buttonLoadingBox, _arrow, vars, _arrowSvg, _arrowStrokeMask, _arrowStroke, _arrowShape, card, BREAKPOINTS, popoverCard, popover, _selectable, stack, textInput, textInputPrefix, textInputElement, _inputElement, _inputPresentation, textInputSuffix, kbd, menu, menuDivider, tooltip } from "@sanity/ui/css";
 import { useEffectEvent } from "use-effect-event";
 import { SpinnerIcon, CloseIcon, ChevronRightIcon } from "@sanity/icons";
 import { isValidElementType } from "react-is";
@@ -340,29 +340,6 @@ function Box(props) {
   let t10;
   return $[149] !== Element || $[150] !== children || $[151] !== rest || $[152] !== t9 ? (t10 = /* @__PURE__ */ jsx(Element, { "data-ui": "Box", ...rest, className: t9, children }), $[149] = Element, $[150] = children, $[151] = rest, $[152] = t9, $[153] = t10) : t10 = $[153], t10;
 }
-const DEFAULT_SELECTABLE_ELEMENT = "button";
-function Selectable(props) {
-  const $ = c(16), t0 = props;
-  let className, radius, rest, selected, t1, tone;
-  $[0] !== t0 ? ({
-    as: t1,
-    className,
-    radius,
-    selected,
-    tone,
-    ...rest
-  } = t0, $[0] = t0, $[1] = className, $[2] = radius, $[3] = rest, $[4] = selected, $[5] = t1, $[6] = tone) : (className = $[1], radius = $[2], rest = $[3], selected = $[4], t1 = $[5], tone = $[6]);
-  const as = t1 === void 0 ? DEFAULT_SELECTABLE_ELEMENT : t1;
-  let t2;
-  $[7] !== className || $[8] !== radius || $[9] !== tone ? (t2 = _selectable({
-    className,
-    radius,
-    tone
-  }), $[7] = className, $[8] = radius, $[9] = tone, $[10] = t2) : t2 = $[10];
-  const t3 = selected ? "" : void 0;
-  let t4;
-  return $[11] !== as || $[12] !== rest || $[13] !== t2 || $[14] !== t3 ? (t4 = /* @__PURE__ */ jsx(Box, { ...rest, as, className: t2, "data-selected": t3 }), $[11] = as, $[12] = rest, $[13] = t2, $[14] = t3, $[15] = t4) : t4 = $[15], t4;
-}
 const DEFAULT_TEXT_ELEMENT = "div";
 function Text(props) {
   const $ = c(32), t0 = props;
@@ -569,46 +546,6 @@ function useBoundaryElement() {
 function useCard() {
   return useContext(CardContext);
 }
-const DEFAULT_CARD_ELEMENT = "div";
-function Card(props) {
-  const $ = c(38), t0 = props;
-  let className, disabled, pressed, rest, schemeProp, selected, style, t1, t2, t3, t4, t5;
-  $[0] !== t0 ? ({
-    __unstable_checkered: t1,
-    __unstable_focusRing: t2,
-    as: t3,
-    className,
-    disabled,
-    pressed,
-    radius: t4,
-    scheme: schemeProp,
-    selected,
-    style,
-    tone: t5,
-    ...rest
-  } = t0, $[0] = t0, $[1] = className, $[2] = disabled, $[3] = pressed, $[4] = rest, $[5] = schemeProp, $[6] = selected, $[7] = style, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = t4, $[12] = t5) : (className = $[1], disabled = $[2], pressed = $[3], rest = $[4], schemeProp = $[5], selected = $[6], style = $[7], t1 = $[8], t2 = $[9], t3 = $[10], t4 = $[11], t5 = $[12]);
-  const checkered = t1 === void 0 ? !1 : t1, focusRing = t2 === void 0 ? !1 : t2, as = t3 === void 0 ? DEFAULT_CARD_ELEMENT : t3, radius = t4 === void 0 ? 0 : t4, toneProp = t5 === void 0 ? "default" : t5, parent = useCard(), tone = toneProp === "inherit" ? parent?.tone : toneProp, scheme = schemeProp === void 0 ? parent?.scheme : schemeProp, t6 = scheme === parent?.scheme ? void 0 : scheme;
-  let t7;
-  $[13] !== className || $[14] !== t6 || $[15] !== tone ? (t7 = card({
-    className,
-    scheme: t6,
-    tone
-  }), $[13] = className, $[14] = t6, $[15] = tone, $[16] = t7) : t7 = $[16];
-  const t8 = checkered ? "" : void 0, t9 = disabled ? "" : void 0, t10 = focusRing ? "" : void 0, t11 = pressed ? "" : void 0, t12 = selected ? "" : void 0;
-  let t13;
-  $[17] !== as || $[18] !== radius || $[19] !== rest || $[20] !== style || $[21] !== t10 || $[22] !== t11 || $[23] !== t12 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9 ? (t13 = /* @__PURE__ */ jsx(Box, { "data-ui": "Card", ...rest, as, className: t7, "data-checkered": t8, "data-disabled": t9, "data-focus-ring": t10, "data-pressed": t11, "data-selected": t12, radius, style }), $[17] = as, $[18] = radius, $[19] = rest, $[20] = style, $[21] = t10, $[22] = t11, $[23] = t12, $[24] = t7, $[25] = t8, $[26] = t9, $[27] = t13) : t13 = $[27];
-  let node = t13;
-  if (scheme === parent?.scheme && tone === parent?.tone)
-    return node;
-  const t14 = scheme ?? "light", t15 = tone ?? "default", t16 = parent?.unstable_CompatProvider;
-  let t17;
-  if ($[28] !== node || $[29] !== t14 || $[30] !== t15 || $[31] !== t16 ? (t17 = /* @__PURE__ */ jsx(CardProvider, { scheme: t14, tone: t15, unstable_CompatProvider: t16, children: node }), $[28] = node, $[29] = t14, $[30] = t15, $[31] = t16, $[32] = t17) : t17 = $[32], node = t17, parent?.unstable_CompatProvider) {
-    const CompatProvider = parent.unstable_CompatProvider, t18 = scheme ?? "light", t19 = tone ?? parent?.tone ?? "default";
-    let t20;
-    return $[33] !== CompatProvider || $[34] !== node || $[35] !== t18 || $[36] !== t19 ? (t20 = /* @__PURE__ */ jsx(CompatProvider, { scheme: t18, tone: t19, children: node }), $[33] = CompatProvider, $[34] = node, $[35] = t18, $[36] = t19, $[37] = t20) : t20 = $[37], t20;
-  }
-  return node;
-}
 const key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`);
 globalScope[elementKey] = null;
 const defaultContextValue = {
@@ -639,44 +576,6 @@ function Portal(props) {
   let t2;
   return $[3] !== portalElement || $[4] !== t1 ? (t2 = createPortal(t1, portalElement), $[3] = portalElement, $[4] = t1, $[5] = t2) : t2 = $[5], t2;
 }
-function PortalProvider(props) {
-  const $ = c(7), {
-    boundaryElement,
-    children,
-    element,
-    __unstable_elements: elementsProp
-  } = props, elements = useUnique(elementsProp), fallbackElement = useSyncExternalStore(emptySubscribe, _temp$4, _temp2$2);
-  let t0;
-  const t1 = boundaryElement || null, t2 = element || fallbackElement;
-  let t3;
-  $[0] !== elements || $[1] !== t1 || $[2] !== t2 ? (t3 = {
-    version: 0,
-    boundaryElement: t1,
-    element: t2,
-    elements
-  }, $[0] = elements, $[1] = t1, $[2] = t2, $[3] = t3) : t3 = $[3], t0 = t3;
-  const value = t0;
-  let t4;
-  return $[4] !== children || $[5] !== value ? (t4 = /* @__PURE__ */ jsx(PortalContext.Provider, { value, children }), $[4] = children, $[5] = value, $[6] = t4) : t4 = $[6], t4;
-}
-function _temp2$2() {
-  return null;
-}
-function _temp$4() {
-  return document.body;
-}
-const emptySubscribe = () => () => {
-};
-function useUnique(value) {
-  const valueRef = useRef(value);
-  return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
-}
-function _isEqual(objA, objB) {
-  if (!objA || !objB)
-    return objA === objB;
-  const keysA = Object.keys(objA), keysB = Object.keys(objB);
-  return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
-}
 function getLayerContext(contextValue) {
   if (!isRecord(contextValue) || contextValue.version !== 0)
     throw new Error("the context value is not compatible");
@@ -699,6 +598,224 @@ function useLayer() {
     throw err instanceof Error ? new Error(`useLayer(): ${err.message}`) : new Error(`useLayer(): ${err}`);
   }
 }
+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"],
+  "top-end": ["bottom-end", "left-end", "right-end"],
+  bottom: ["top", "left", "right"],
+  "bottom-start": ["top-start", "left-start", "right-start"],
+  "bottom-end": ["top-end", "left-end", "right-end"],
+  left: ["right", "top", "bottom"],
+  "left-start": ["right-start", "top-start", "bottom-start"],
+  "left-end": ["right-end", "top-end", "bottom-end"],
+  right: ["left", "top", "bottom"],
+  "right-start": ["left-start", "top-start", "bottom-start"],
+  "right-end": ["left-end", "top-end", "bottom-end"]
+};
+function size(options) {
+  const {
+    apply,
+    margins,
+    padding = 0
+  } = options;
+  return {
+    name: "@sanity/ui/size",
+    async fn(args) {
+      const {
+        elements,
+        placement,
+        platform,
+        rects
+      } = args, {
+        floating,
+        reference
+      } = rects, overflow = await detectOverflow(args, {
+        altBoundary: !0,
+        boundary: options.boundaryElement || void 0,
+        elementContext: "floating",
+        padding,
+        rootBoundary: "viewport"
+      });
+      let maxWidth = 1 / 0, maxHeight = 1 / 0;
+      const floatingW = floating.width, floatingH = floating.height;
+      placement.includes("top") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.top), placement.includes("right") && (maxWidth = floatingW - overflow.right, maxHeight = floatingH - (overflow.top + overflow.bottom)), placement.includes("bottom") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.bottom), placement.includes("left") && (maxWidth = floatingW - overflow.left, maxHeight = floatingH - (overflow.top + overflow.bottom)), apply({
+        availableWidth: maxWidth - margins[1] - margins[3],
+        availableHeight: maxHeight - margins[0] - margins[2],
+        elements,
+        referenceWidth: reference.width - margins[1] - margins[3]
+      });
+      const nextDimensions = await platform.getDimensions(elements.floating), targetH = nextDimensions.height, targetW = nextDimensions.width;
+      return floatingW !== targetW || floatingH !== targetH ? {
+        reset: {
+          rects: !0
+        }
+      } : {};
+    }
+  };
+}
+function moveTowardsLength(movingPoint, targetPoint, amount) {
+  const width = targetPoint.x - movingPoint.x, height = targetPoint.y - movingPoint.y, distance = Math.sqrt(width * width + height * height);
+  return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance));
+}
+function moveTowardsFractional(movingPoint, targetPoint, fraction) {
+  return {
+    x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
+    y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction
+  };
+}
+function getRoundedCommands(points) {
+  const len = points.length, cmds = [];
+  for (let i = 0; i < len; i += 1) {
+    const point = points[i], prevPoint = points[i - 1], nextPoint = points[i + 1];
+    if (prevPoint && point.radius) {
+      const curveStart = moveTowardsLength(point, prevPoint, point.radius), curveEnd = moveTowardsLength(point, nextPoint, point.radius), startControl = moveTowardsFractional(curveStart, point, 0.5), endControl = moveTowardsFractional(point, curveEnd, 0.5);
+      cmds.push({
+        type: "point",
+        ...curveStart
+      }), cmds.push({
+        type: "curve",
+        curveEnd,
+        startControl,
+        endControl
+      });
+    } else
+      cmds.push({
+        type: "point",
+        ...point
+      });
+  }
+  return cmds;
+}
+function compileCommands(cmds) {
+  return cmds.map((n, idx) => n.type === "point" ? `${idx === 0 ? "M" : "L"} ${n.x} ${n.y}` : n.type === "curve" ? `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}` : "").join(" ");
+}
+const DEFAULT_ARROW_ELEMENT = "div";
+function Arrow(props) {
+  const $ = c(34), t0 = props;
+  let h, rest, style, t1, t2, w;
+  $[0] !== t0 ? ({
+    as: t1,
+    width: w,
+    height: h,
+    radius: t2,
+    style,
+    ...rest
+  } = t0, $[0] = t0, $[1] = h, $[2] = rest, $[3] = style, $[4] = t1, $[5] = t2, $[6] = w) : (h = $[1], rest = $[2], style = $[3], t1 = $[4], t2 = $[5], w = $[6]);
+  const Element = t1 === void 0 ? DEFAULT_ARROW_ELEMENT : t1, radius = t2 === void 0 ? 0 : t2, center = w / 2;
+  let t3;
+  const points = [{
+    x: 0,
+    y: 0
+  }, {
+    x: radius,
+    y: 0,
+    radius
+  }, {
+    x: center,
+    y: h - 1,
+    radius
+  }, {
+    x: w - radius,
+    y: 0,
+    radius
+  }, {
+    x: w,
+    y: 0
+  }], cmds = getRoundedCommands(points);
+  t3 = compileCommands(cmds);
+  const path = t3, strokePath = `${path}`, fillPath = `${path} M ${w} -1 M 0 -1 Z`;
+  let t4;
+  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = _arrow(), $[7] = t4) : t4 = $[7];
+  const t5 = `${w}px`;
+  let t6;
+  $[8] !== t5 ? (t6 = assignInlineVars({
+    [vars.arrow.size]: t5
+  }), $[8] = t5, $[9] = t6) : t6 = $[9];
+  let t7;
+  $[10] !== style || $[11] !== t6 ? (t7 = {
+    ...style,
+    ...t6
+  }, $[10] = style, $[11] = t6, $[12] = t7) : t7 = $[12];
+  let t8;
+  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t8 = _arrowSvg(), $[13] = t8) : t8 = $[13];
+  const t9 = `0 0 ${w} ${w}`;
+  let t10;
+  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t10 = _arrowStrokeMask(), $[14] = t10) : t10 = $[14];
+  let t11;
+  $[15] !== w ? (t11 = /* @__PURE__ */ jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsx("rect", { className: t10, x: 0, width: w, height: w, fill: "white" }) }), $[15] = w, $[16] = t11) : t11 = $[16];
+  let t12;
+  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t12 = _arrowStroke(), $[17] = t12) : t12 = $[17];
+  let t13;
+  $[18] !== strokePath ? (t13 = /* @__PURE__ */ jsx("path", { className: t12, d: strokePath, mask: "url(#stroke-mask)" }), $[18] = strokePath, $[19] = t13) : t13 = $[19];
+  let t14;
+  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t14 = _arrowShape(), $[20] = t14) : t14 = $[20];
+  let t15;
+  $[21] !== fillPath ? (t15 = /* @__PURE__ */ jsx("path", { className: t14, d: fillPath }), $[21] = fillPath, $[22] = t15) : t15 = $[22];
+  let t16;
+  $[23] !== t11 || $[24] !== t13 || $[25] !== t15 || $[26] !== t9 || $[27] !== w ? (t16 = /* @__PURE__ */ jsxs("svg", { className: t8, width: w, height: w, viewBox: t9, children: [
+    t11,
+    t13,
+    t15
+  ] }), $[23] = t11, $[24] = t13, $[25] = t15, $[26] = t9, $[27] = w, $[28] = t16) : t16 = $[28];
+  let t17;
+  return $[29] !== Element || $[30] !== rest || $[31] !== t16 || $[32] !== t7 ? (t17 = /* @__PURE__ */ jsx(Element, { ...rest, className: t4, style: t7, children: t16 }), $[29] = Element, $[30] = rest, $[31] = t16, $[32] = t7, $[33] = t17) : t17 = $[33], t17;
+}
+const DEFAULT_FLEX_ELEMENT = "div";
+function Flex(props) {
+  const $ = c(14), t0 = props;
+  let align, justify, rest, t1, t2, wrap;
+  $[0] !== t0 ? ({
+    align,
+    as: t1,
+    direction: t2,
+    justify,
+    wrap,
+    ...rest
+  } = t0, $[0] = t0, $[1] = align, $[2] = justify, $[3] = rest, $[4] = t1, $[5] = t2, $[6] = wrap) : (align = $[1], justify = $[2], rest = $[3], t1 = $[4], t2 = $[5], wrap = $[6]);
+  const as = t1 === void 0 ? DEFAULT_FLEX_ELEMENT : t1, direction = t2 === void 0 ? "row" : t2;
+  let t3;
+  return $[7] !== align || $[8] !== as || $[9] !== direction || $[10] !== justify || $[11] !== rest || $[12] !== wrap ? (t3 = /* @__PURE__ */ jsx(Box, { "data-ui": "Flex", ...rest, alignItems: align, as, display: "flex", flexDirection: direction, flexWrap: wrap, justifyContent: justify }), $[7] = align, $[8] = as, $[9] = direction, $[10] = justify, $[11] = rest, $[12] = wrap, $[13] = t3) : t3 = $[13], t3;
+}
+const DEFAULT_CARD_ELEMENT = "div";
+function Card(props) {
+  const $ = c(38), t0 = props;
+  let className, disabled, pressed, rest, schemeProp, selected, style, t1, t2, t3, t4, t5;
+  $[0] !== t0 ? ({
+    __unstable_checkered: t1,
+    __unstable_focusRing: t2,
+    as: t3,
+    className,
+    disabled,
+    pressed,
+    radius: t4,
+    scheme: schemeProp,
+    selected,
+    style,
+    tone: t5,
+    ...rest
+  } = t0, $[0] = t0, $[1] = className, $[2] = disabled, $[3] = pressed, $[4] = rest, $[5] = schemeProp, $[6] = selected, $[7] = style, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = t4, $[12] = t5) : (className = $[1], disabled = $[2], pressed = $[3], rest = $[4], schemeProp = $[5], selected = $[6], style = $[7], t1 = $[8], t2 = $[9], t3 = $[10], t4 = $[11], t5 = $[12]);
+  const checkered = t1 === void 0 ? !1 : t1, focusRing = t2 === void 0 ? !1 : t2, as = t3 === void 0 ? DEFAULT_CARD_ELEMENT : t3, radius = t4 === void 0 ? 0 : t4, toneProp = t5 === void 0 ? "default" : t5, parent = useCard(), tone = toneProp === "inherit" ? parent?.tone : toneProp, scheme = schemeProp === void 0 ? parent?.scheme : schemeProp, t6 = scheme === parent?.scheme ? void 0 : scheme;
+  let t7;
+  $[13] !== className || $[14] !== t6 || $[15] !== tone ? (t7 = card({
+    className,
+    scheme: t6,
+    tone
+  }), $[13] = className, $[14] = t6, $[15] = tone, $[16] = t7) : t7 = $[16];
+  const t8 = checkered ? "" : void 0, t9 = disabled ? "" : void 0, t10 = focusRing ? "" : void 0, t11 = pressed ? "" : void 0, t12 = selected ? "" : void 0;
+  let t13;
+  $[17] !== as || $[18] !== radius || $[19] !== rest || $[20] !== style || $[21] !== t10 || $[22] !== t11 || $[23] !== t12 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9 ? (t13 = /* @__PURE__ */ jsx(Box, { "data-ui": "Card", ...rest, as, className: t7, "data-checkered": t8, "data-disabled": t9, "data-focus-ring": t10, "data-pressed": t11, "data-selected": t12, radius, style }), $[17] = as, $[18] = radius, $[19] = rest, $[20] = style, $[21] = t10, $[22] = t11, $[23] = t12, $[24] = t7, $[25] = t8, $[26] = t9, $[27] = t13) : t13 = $[27];
+  let node = t13;
+  if (scheme === parent?.scheme && tone === parent?.tone)
+    return node;
+  const t14 = scheme ?? "light", t15 = tone ?? "default", t16 = parent?.unstable_CompatProvider;
+  let t17;
+  if ($[28] !== node || $[29] !== t14 || $[30] !== t15 || $[31] !== t16 ? (t17 = /* @__PURE__ */ jsx(CardProvider, { scheme: t14, tone: t15, unstable_CompatProvider: t16, children: node }), $[28] = node, $[29] = t14, $[30] = t15, $[31] = t16, $[32] = t17) : t17 = $[32], node = t17, parent?.unstable_CompatProvider) {
+    const CompatProvider = parent.unstable_CompatProvider, t18 = scheme ?? "light", t19 = tone ?? parent?.tone ?? "default";
+    let t20;
+    return $[33] !== CompatProvider || $[34] !== node || $[35] !== t18 || $[36] !== t19 ? (t20 = /* @__PURE__ */ jsx(CompatProvider, { scheme: t18, tone: t19, children: node }), $[33] = CompatProvider, $[34] = node, $[35] = t18, $[36] = t19, $[37] = t20) : t20 = $[37], t20;
+  }
+  return node;
+}
 const DEFAULT_LAYER_CARD_ELEMENT = "div";
 function LayerCard(props) {
   const $ = c(27), t0 = props;
@@ -816,13 +933,13 @@ function LayerProvider(props) {
         [childLevel]: prevLen + 1
       };
       return setSize(Object.keys(nextState).length), nextState;
-    }) : setSize(_temp$3), () => {
+    }) : setSize(_temp$4), () => {
       childLevel !== void 0 ? setChildLayers((state_0) => {
         const nextState_0 = {
           ...state_0
         };
         return nextState_0[childLevel] === 1 ? (delete nextState_0[childLevel], setSize(Object.keys(nextState_0).length)) : nextState_0[childLevel] = nextState_0[childLevel] - 1, nextState_0;
-      }) : setSize(_temp2$1), parentDispose?.();
+      }) : setSize(_temp2$2), parentDispose?.();
     };
   }, $[3] = parentRegisterChild, $[4] = setChildLayers, $[5] = t3) : t3 = $[5];
   const registerChild = t3;
@@ -841,10 +958,10 @@ function LayerProvider(props) {
   let t8;
   return $[16] !== children || $[17] !== value ? (t8 = /* @__PURE__ */ jsx(LayerContext.Provider, { value, children }), $[16] = children, $[17] = value, $[18] = t8) : t8 = $[18], t8;
 }
-function _temp2$1(v_0) {
+function _temp2$2(v_0) {
   return v_0 - 1;
 }
-function _temp$3(v) {
+function _temp$4(v) {
   return v + 1;
 }
 const DEFAULT_LAYER_ELEMENT = "div";
@@ -863,184 +980,6 @@ function Layer(props) {
   let t4;
   return $[9] !== t3 || $[10] !== zOffset ? (t4 = /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: t3 }), $[9] = t3, $[10] = zOffset, $[11] = t4) : t4 = $[11], t4;
 }
-const 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"],
-  "top-end": ["bottom-end", "left-end", "right-end"],
-  bottom: ["top", "left", "right"],
-  "bottom-start": ["top-start", "left-start", "right-start"],
-  "bottom-end": ["top-end", "left-end", "right-end"],
-  left: ["right", "top", "bottom"],
-  "left-start": ["right-start", "top-start", "bottom-start"],
-  "left-end": ["right-end", "top-end", "bottom-end"],
-  right: ["left", "top", "bottom"],
-  "right-start": ["left-start", "top-start", "bottom-start"],
-  "right-end": ["left-end", "top-end", "bottom-end"]
-};
-function size(options) {
-  const {
-    apply,
-    margins,
-    padding = 0
-  } = options;
-  return {
-    name: "@sanity/ui/size",
-    async fn(args) {
-      const {
-        elements,
-        placement,
-        platform,
-        rects
-      } = args, {
-        floating,
-        reference
-      } = rects, overflow = await detectOverflow(args, {
-        altBoundary: !0,
-        boundary: options.boundaryElement || void 0,
-        elementContext: "floating",
-        padding,
-        rootBoundary: "viewport"
-      });
-      let maxWidth = 1 / 0, maxHeight = 1 / 0;
-      const floatingW = floating.width, floatingH = floating.height;
-      placement.includes("top") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.top), placement.includes("right") && (maxWidth = floatingW - overflow.right, maxHeight = floatingH - (overflow.top + overflow.bottom)), placement.includes("bottom") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.bottom), placement.includes("left") && (maxWidth = floatingW - overflow.left, maxHeight = floatingH - (overflow.top + overflow.bottom)), apply({
-        availableWidth: maxWidth - margins[1] - margins[3],
-        availableHeight: maxHeight - margins[0] - margins[2],
-        elements,
-        referenceWidth: reference.width - margins[1] - margins[3]
-      });
-      const nextDimensions = await platform.getDimensions(elements.floating), targetH = nextDimensions.height, targetW = nextDimensions.width;
-      return floatingW !== targetW || floatingH !== targetH ? {
-        reset: {
-          rects: !0
-        }
-      } : {};
-    }
-  };
-}
-function moveTowardsLength(movingPoint, targetPoint, amount) {
-  const width = targetPoint.x - movingPoint.x, height = targetPoint.y - movingPoint.y, distance = Math.sqrt(width * width + height * height);
-  return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance));
-}
-function moveTowardsFractional(movingPoint, targetPoint, fraction) {
-  return {
-    x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
-    y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction
-  };
-}
-function getRoundedCommands(points) {
-  const len = points.length, cmds = [];
-  for (let i = 0; i < len; i += 1) {
-    const point = points[i], prevPoint = points[i - 1], nextPoint = points[i + 1];
-    if (prevPoint && point.radius) {
-      const curveStart = moveTowardsLength(point, prevPoint, point.radius), curveEnd = moveTowardsLength(point, nextPoint, point.radius), startControl = moveTowardsFractional(curveStart, point, 0.5), endControl = moveTowardsFractional(point, curveEnd, 0.5);
-      cmds.push({
-        type: "point",
-        ...curveStart
-      }), cmds.push({
-        type: "curve",
-        curveEnd,
-        startControl,
-        endControl
-      });
-    } else
-      cmds.push({
-        type: "point",
-        ...point
-      });
-  }
-  return cmds;
-}
-function compileCommands(cmds) {
-  return cmds.map((n, idx) => n.type === "point" ? `${idx === 0 ? "M" : "L"} ${n.x} ${n.y}` : n.type === "curve" ? `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}` : "").join(" ");
-}
-const DEFAULT_ARROW_ELEMENT = "div";
-function Arrow(props) {
-  const $ = c(34), t0 = props;
-  let h, rest, style, t1, t2, w;
-  $[0] !== t0 ? ({
-    as: t1,
-    width: w,
-    height: h,
-    radius: t2,
-    style,
-    ...rest
-  } = t0, $[0] = t0, $[1] = h, $[2] = rest, $[3] = style, $[4] = t1, $[5] = t2, $[6] = w) : (h = $[1], rest = $[2], style = $[3], t1 = $[4], t2 = $[5], w = $[6]);
-  const Element = t1 === void 0 ? DEFAULT_ARROW_ELEMENT : t1, radius = t2 === void 0 ? 0 : t2, center = w / 2;
-  let t3;
-  const points = [{
-    x: 0,
-    y: 0
-  }, {
-    x: radius,
-    y: 0,
-    radius
-  }, {
-    x: center,
-    y: h - 1,
-    radius
-  }, {
-    x: w - radius,
-    y: 0,
-    radius
-  }, {
-    x: w,
-    y: 0
-  }], cmds = getRoundedCommands(points);
-  t3 = compileCommands(cmds);
-  const path = t3, strokePath = `${path}`, fillPath = `${path} M ${w} -1 M 0 -1 Z`;
-  let t4;
-  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = _arrow(), $[7] = t4) : t4 = $[7];
-  const t5 = `${w}px`;
-  let t6;
-  $[8] !== t5 ? (t6 = assignInlineVars({
-    [vars.arrow.size]: t5
-  }), $[8] = t5, $[9] = t6) : t6 = $[9];
-  let t7;
-  $[10] !== style || $[11] !== t6 ? (t7 = {
-    ...style,
-    ...t6
-  }, $[10] = style, $[11] = t6, $[12] = t7) : t7 = $[12];
-  let t8;
-  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t8 = _arrowSvg(), $[13] = t8) : t8 = $[13];
-  const t9 = `0 0 ${w} ${w}`;
-  let t10;
-  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t10 = _arrowStrokeMask(), $[14] = t10) : t10 = $[14];
-  let t11;
-  $[15] !== w ? (t11 = /* @__PURE__ */ jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsx("rect", { className: t10, x: 0, width: w, height: w, fill: "white" }) }), $[15] = w, $[16] = t11) : t11 = $[16];
-  let t12;
-  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t12 = _arrowStroke(), $[17] = t12) : t12 = $[17];
-  let t13;
-  $[18] !== strokePath ? (t13 = /* @__PURE__ */ jsx("path", { className: t12, d: strokePath, mask: "url(#stroke-mask)" }), $[18] = strokePath, $[19] = t13) : t13 = $[19];
-  let t14;
-  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t14 = _arrowShape(), $[20] = t14) : t14 = $[20];
-  let t15;
-  $[21] !== fillPath ? (t15 = /* @__PURE__ */ jsx("path", { className: t14, d: fillPath }), $[21] = fillPath, $[22] = t15) : t15 = $[22];
-  let t16;
-  $[23] !== t11 || $[24] !== t13 || $[25] !== t15 || $[26] !== t9 || $[27] !== w ? (t16 = /* @__PURE__ */ jsxs("svg", { className: t8, width: w, height: w, viewBox: t9, children: [
-    t11,
-    t13,
-    t15
-  ] }), $[23] = t11, $[24] = t13, $[25] = t15, $[26] = t9, $[27] = w, $[28] = t16) : t16 = $[28];
-  let t17;
-  return $[29] !== Element || $[30] !== rest || $[31] !== t16 || $[32] !== t7 ? (t17 = /* @__PURE__ */ jsx(Element, { ...rest, className: t4, style: t7, children: t16 }), $[29] = Element, $[30] = rest, $[31] = t16, $[32] = t7, $[33] = t17) : t17 = $[33], t17;
-}
-const DEFAULT_FLEX_ELEMENT = "div";
-function Flex(props) {
-  const $ = c(14), t0 = props;
-  let align, justify, rest, t1, t2, wrap;
-  $[0] !== t0 ? ({
-    align,
-    as: t1,
-    direction: t2,
-    justify,
-    wrap,
-    ...rest
-  } = t0, $[0] = t0, $[1] = align, $[2] = justify, $[3] = rest, $[4] = t1, $[5] = t2, $[6] = wrap) : (align = $[1], justify = $[2], rest = $[3], t1 = $[4], t2 = $[5], wrap = $[6]);
-  const as = t1 === void 0 ? DEFAULT_FLEX_ELEMENT : t1, direction = t2 === void 0 ? "row" : t2;
-  let t3;
-  return $[7] !== align || $[8] !== as || $[9] !== direction || $[10] !== justify || $[11] !== rest || $[12] !== wrap ? (t3 = /* @__PURE__ */ jsx(Box, { "data-ui": "Flex", ...rest, alignItems: align, as, display: "flex", flexDirection: direction, flexWrap: wrap, justifyContent: justify }), $[7] = align, $[8] = as, $[9] = direction, $[10] = justify, $[11] = rest, $[12] = wrap, $[13] = t3) : t3 = $[13], t3;
-}
 function PopoverLayer(props) {
   const $ = c(65);
   let animate, arrow2, arrowRef, arrowX, arrowY, children, marginsProp, maxWidth, originX, originY, overflow, padding, placement, radius, referenceWidth, rest, shadow, strategy, style, t0, xProp, yProp;
@@ -1245,6 +1184,29 @@ function getElementRef$1(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_SELECTABLE_ELEMENT = "button";
+function Selectable(props) {
+  const $ = c(16), t0 = props;
+  let className, radius, rest, selected, t1, tone;
+  $[0] !== t0 ? ({
+    as: t1,
+    className,
+    radius,
+    selected,
+    tone,
+    ...rest
+  } = t0, $[0] = t0, $[1] = className, $[2] = radius, $[3] = rest, $[4] = selected, $[5] = t1, $[6] = tone) : (className = $[1], radius = $[2], rest = $[3], selected = $[4], t1 = $[5], tone = $[6]);
+  const as = t1 === void 0 ? DEFAULT_SELECTABLE_ELEMENT : t1;
+  let t2;
+  $[7] !== className || $[8] !== radius || $[9] !== tone ? (t2 = _selectable({
+    className,
+    radius,
+    tone
+  }), $[7] = className, $[8] = radius, $[9] = tone, $[10] = t2) : t2 = $[10];
+  const t3 = selected ? "" : void 0;
+  let t4;
+  return $[11] !== as || $[12] !== rest || $[13] !== t2 || $[14] !== t3 ? (t4 = /* @__PURE__ */ jsx(Box, { ...rest, as, className: t2, "data-selected": t3 }), $[11] = as, $[12] = rest, $[13] = t2, $[14] = t3, $[15] = t4) : t4 = $[15], t4;
+}
 const DEFAULT_STACK_ELEMENT = "div";
 function Stack(props) {
   const $ = c(13), t0 = props;
@@ -1310,14 +1272,14 @@ function TextInput(props) {
   const Element = t1 === void 0 ? DEFAULT_TEXT_INPUT_ELEMENT : t1, border = t2 === void 0 ? !0 : t2, disabled = t3 === void 0 ? !1 : t3, fontSize = t4 === void 0 ? 2 : t4, padding = t5 === void 0 ? 3 : t5, radius = t6 === void 0 ? 2 : t6, space = t7 === void 0 ? 3 : t7, type = t8 === void 0 ? "text" : t8, ref = useRef(null), responsivePadding = useResponsiveProp(padding), withClearButton = !!clearButton;
   let t9;
   $[23] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => ref.current, $[23] = t9) : t9 = $[23], useImperativeHandle(forwardedRef, t9), useCustomValidity(ref, customValidity);
-  const handleClearMouseDown = _temp$2;
+  const handleClearMouseDown = _temp$3;
   let t10;
   $[24] !== onClear ? (t10 = (event_0) => {
     event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
   }, $[24] = onClear, $[25] = t10) : t10 = $[25];
   const handleClearClick = t10;
   let t11, t12;
-  $[26] !== responsivePadding ? (t12 = Object.fromEntries(Object.entries(responsivePadding).map(_temp2)), $[26] = responsivePadding, $[27] = t12) : t12 = $[27], t11 = t12;
+  $[26] !== responsivePadding ? (t12 = Object.fromEntries(Object.entries(responsivePadding).map(_temp2$1)), $[26] = responsivePadding, $[27] = t12) : t12 = $[27], t11 = t12;
   const clearButtonBoxPadding = t11;
   let t13, t14;
   $[28] !== responsivePadding ? (t14 = Object.fromEntries(Object.entries(responsivePadding).map(_temp3)), $[28] = responsivePadding, $[29] = t14) : t14 = $[29], t13 = t14;
@@ -1385,15 +1347,15 @@ function _temp3(t0) {
   const [key_0, value_0] = t0;
   return value_0 === 0 ? [key_0, 0] : value_0 === 1 ? [key_0, 0] : value_0 === 2 ? [key_0, 1] : [key_0, typeof value_0 == "number" ? value_0 - 1 : 0];
 }
-function _temp2(t0) {
+function _temp2$1(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$2(event) {
+function _temp$3(event) {
   event.preventDefault(), event.stopPropagation();
 }
 function useClickOutsideEvent(listener, t0, boundaryElement) {
-  const $ = c(9), elementsArg = t0 === void 0 ? _temp$1 : t0;
+  const $ = c(9), elementsArg = t0 === void 0 ? _temp$2 : t0;
   let t1;
   $[0] !== boundaryElement || $[1] !== elementsArg || $[2] !== listener ? (t1 = (evt) => {
     if (!listener)
@@ -1423,7 +1385,7 @@ function useClickOutsideEvent(listener, t0, boundaryElement) {
   let t3;
   $[7] !== hasListener ? (t3 = [hasListener], $[7] = hasListener, $[8] = t3) : t3 = $[8], useEffect(t2, t3), useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
 }
-function _temp$1() {
+function _temp$2() {
   return EMPTY_ARRAY;
 }
 function useGlobalKeyDown(onKeyDown) {
@@ -1453,14 +1415,14 @@ function KBD(props) {
     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;
+  const as = t1 === void 0 ? DEFAULT_KBD_ELEMENT : t1, display = t2 === void 0 ? "inline-block" : t2, fontSize = t3 === void 0 ? 1 : t3, padding = t4 === void 0 ? 1 : t4, radius = t5 === void 0 ? 2 : t5, t6 = as;
   let t7;
   $[9] !== className || $[10] !== radius ? (t7 = kbd({
     className,
     radius
   }), $[9] = className, $[10] = radius, $[11] = t7) : t7 = $[11];
   let t8;
-  $[12] !== children || $[13] !== fontSize ? (t8 = /* @__PURE__ */ jsx(Text, { as: "span", muted: !0, size: fontSize, weight: "semibold", children }), $[12] = children, $[13] = fontSize, $[14] = t8) : t8 = $[14];
+  $[12] !== children || $[13] !== fontSize ? (t8 = /* @__PURE__ */ jsx(Text, { as: "span", muted: !0, size: fontSize, weight: "medium", children }), $[12] = children, $[13] = fontSize, $[14] = t8) : t8 = $[14];
   let t9;
   return $[15] !== display || $[16] !== padding || $[17] !== rest || $[18] !== t6 || $[19] !== t7 || $[20] !== t8 ? (t9 = /* @__PURE__ */ jsx(Box, { "data-ui": "KBD", ...rest, as: t6, className: t7, display, muted: !0, padding, children: t8 }), $[15] = display, $[16] = padding, $[17] = rest, $[18] = t6, $[19] = t7, $[20] = t8, $[21] = t9) : t9 = $[21], t9;
 }
@@ -2030,11 +1992,49 @@ function Grid(props) {
   return $[4] !== as || $[5] !== children || $[6] !== rest ? (t2 = /* @__PURE__ */ jsx(Box, { "data-ui": "Grid", ...rest, as, display: "grid", children }), $[4] = as, $[5] = children, $[6] = rest, $[7] = t2) : t2 = $[7], t2;
 }
 function usePrefersDark(t0) {
-  return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp : t0);
+  return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$1 : t0);
 }
-function _temp() {
+function _temp$1() {
   return !1;
 }
+function PortalProvider(props) {
+  const $ = c(7), {
+    boundaryElement,
+    children,
+    element,
+    __unstable_elements: elementsProp
+  } = props, elements = useUnique(elementsProp), fallbackElement = useSyncExternalStore(emptySubscribe, _temp, _temp2);
+  let t0;
+  const t1 = boundaryElement || null, t2 = element || fallbackElement;
+  let t3;
+  $[0] !== elements || $[1] !== t1 || $[2] !== t2 ? (t3 = {
+    version: 0,
+    boundaryElement: t1,
+    element: t2,
+    elements
+  }, $[0] = elements, $[1] = t1, $[2] = t2, $[3] = t3) : t3 = $[3], t0 = t3;
+  const value = t0;
+  let t4;
+  return $[4] !== children || $[5] !== value ? (t4 = /* @__PURE__ */ jsx(PortalContext.Provider, { value, children }), $[4] = children, $[5] = value, $[6] = t4) : t4 = $[6], t4;
+}
+function _temp2() {
+  return null;
+}
+function _temp() {
+  return document.body;
+}
+const emptySubscribe = () => () => {
+};
+function useUnique(value) {
+  const valueRef = useRef(value);
+  return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
+}
+function _isEqual(objA, objB) {
+  if (!objA || !objB)
+    return objA === objB;
+  const keysA = Object.keys(objA), keysB = Object.keys(objB);
+  return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
+}
 function useDelayedState(initialState) {
   const $ = c(3), [state, setState] = useState(initialState), delayedAction = useRef(void 0);
   let t0;