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

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

@@ -1,17 +1,17 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
 import { getScopedTheme, getTheme_v2 } from "@sanity/ui/theme";
-import { createContext, useContext, useEffect, useDebugValue, useState, useSyncExternalStore, isValidElement, lazy, Suspense, useImperativeHandle, useRef, useMemo, useCallback, cloneElement, useId, useLayoutEffect, Children } from "react";
+import { createContext, useContext, useEffect, useDebugValue, useState, useSyncExternalStore, isValidElement, lazy, Suspense, useRef, useImperativeHandle, useMemo, useCallback, cloneElement, useId, useLayoutEffect, Children } from "react";
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1 } from "styled-components";
-import { BREAKPOINTS, box, text, textOverflow, animatedSpinnerIcon, spinner, button, buttonLoadingBox, card, code, kbd, _arrow, vars, _arrowSvg, _arrowStrokeMask, _arrowStroke, _arrowShape, popoverCard, popover, stack, textInput, textInputPrefix, textInputElement, _inputElement, _inputPresentation, textInputSuffix, tooltip, menu, menuDivider, _selectable } from "@sanity/ui/css";
+import { BREAKPOINTS, _arrow, vars, _arrowSvg, _arrowStrokeMask, _arrowStroke, _arrowShape, box, text, textOverflow, animatedSpinnerIcon, spinner, button, buttonLoadingBox, card, code, kbd, popoverCard, popover, stack, textInput, textInputPrefix, textInputElement, _inputElement, _inputPresentation, textInputSuffix, tooltip, menu, menuDivider, _selectable } from "@sanity/ui/css";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { useEffectEvent } from "use-effect-event";
 import { SpinnerIcon, CloseIcon, ChevronRightIcon } from "@sanity/icons";
 import { isValidElementType } from "react-is";
 import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from "@floating-ui/react-dom";
 import { motion, AnimatePresence } from "framer-motion";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { createPortal } from "react-dom";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 function getGlobalScope() {
   if (typeof globalThis < "u") return globalThis;
   if (typeof window < "u") return window;
@@ -363,6 +363,113 @@ function useResponsiveProp(val, defaultVal) {
   const [t1, setCache] = useState(t0), [cachedVal, cachedHash] = t1, hash = JSON.stringify(val ?? defaultVal);
   return hash !== cachedHash && setCache([_getResponsiveProp(val, defaultVal), hash]), cachedVal;
 }
+function moveTowardsLength(movingPoint, targetPoint, amount) {
+  const width = targetPoint.x - movingPoint.x, height = targetPoint.y - movingPoint.y, distance = Math.sqrt(width * width + height * height);
+  return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance));
+}
+function moveTowardsFractional(movingPoint, targetPoint, fraction) {
+  return {
+    x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
+    y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction
+  };
+}
+function getRoundedCommands(points) {
+  const len = points.length, cmds = [];
+  for (let i = 0; i < len; i += 1) {
+    const point = points[i], prevPoint = points[i - 1], nextPoint = points[i + 1];
+    if (prevPoint && point.radius) {
+      const curveStart = moveTowardsLength(point, prevPoint, point.radius), curveEnd = moveTowardsLength(point, nextPoint, point.radius), startControl = moveTowardsFractional(curveStart, point, 0.5), endControl = moveTowardsFractional(point, curveEnd, 0.5);
+      cmds.push({
+        type: "point",
+        ...curveStart
+      }), cmds.push({
+        type: "curve",
+        curveEnd,
+        startControl,
+        endControl
+      });
+    } else
+      cmds.push({
+        type: "point",
+        ...point
+      });
+  }
+  return cmds;
+}
+function compileCommands(cmds) {
+  return cmds.map((n, idx) => n.type === "point" ? `${idx === 0 ? "M" : "L"} ${n.x} ${n.y}` : n.type === "curve" ? `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}` : "").join(" ");
+}
+const DEFAULT_ARROW_ELEMENT = "div";
+function Arrow(props) {
+  const $ = c(34), t0 = props;
+  let h, rest, style, t1, t2, w;
+  $[0] !== t0 ? ({
+    as: t1,
+    width: w,
+    height: h,
+    radius: t2,
+    style,
+    ...rest
+  } = t0, $[0] = t0, $[1] = h, $[2] = rest, $[3] = style, $[4] = t1, $[5] = t2, $[6] = w) : (h = $[1], rest = $[2], style = $[3], t1 = $[4], t2 = $[5], w = $[6]);
+  const Element = t1 === void 0 ? DEFAULT_ARROW_ELEMENT : t1, radius = t2 === void 0 ? 0 : t2, center = w / 2;
+  let t3;
+  const points = [{
+    x: 0,
+    y: 0
+  }, {
+    x: radius,
+    y: 0,
+    radius
+  }, {
+    x: center,
+    y: h - 1,
+    radius
+  }, {
+    x: w - radius,
+    y: 0,
+    radius
+  }, {
+    x: w,
+    y: 0
+  }], cmds = getRoundedCommands(points);
+  t3 = compileCommands(cmds);
+  const path = t3, strokePath = `${path}`, fillPath = `${path} M ${w} -1 M 0 -1 Z`;
+  let t4;
+  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = _arrow(), $[7] = t4) : t4 = $[7];
+  const t5 = `${w}px`;
+  let t6;
+  $[8] !== t5 ? (t6 = assignInlineVars({
+    [vars.arrow.size]: t5
+  }), $[8] = t5, $[9] = t6) : t6 = $[9];
+  let t7;
+  $[10] !== style || $[11] !== t6 ? (t7 = {
+    ...style,
+    ...t6
+  }, $[10] = style, $[11] = t6, $[12] = t7) : t7 = $[12];
+  let t8;
+  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t8 = _arrowSvg(), $[13] = t8) : t8 = $[13];
+  const t9 = `0 0 ${w} ${w}`;
+  let t10;
+  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t10 = _arrowStrokeMask(), $[14] = t10) : t10 = $[14];
+  let t11;
+  $[15] !== w ? (t11 = /* @__PURE__ */ jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsx("rect", { className: t10, x: 0, width: w, height: w, fill: "white" }) }), $[15] = w, $[16] = t11) : t11 = $[16];
+  let t12;
+  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t12 = _arrowStroke(), $[17] = t12) : t12 = $[17];
+  let t13;
+  $[18] !== strokePath ? (t13 = /* @__PURE__ */ jsx("path", { className: t12, d: strokePath, mask: "url(#stroke-mask)" }), $[18] = strokePath, $[19] = t13) : t13 = $[19];
+  let t14;
+  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t14 = _arrowShape(), $[20] = t14) : t14 = $[20];
+  let t15;
+  $[21] !== fillPath ? (t15 = /* @__PURE__ */ jsx("path", { className: t14, d: fillPath }), $[21] = fillPath, $[22] = t15) : t15 = $[22];
+  let t16;
+  $[23] !== t11 || $[24] !== t13 || $[25] !== t15 || $[26] !== t9 || $[27] !== w ? (t16 = /* @__PURE__ */ jsxs("svg", { className: t8, width: w, height: w, viewBox: t9, children: [
+    t11,
+    t13,
+    t15
+  ] }), $[23] = t11, $[24] = t13, $[25] = t15, $[26] = t9, $[27] = w, $[28] = t16) : t16 = $[28];
+  let t17;
+  return $[29] !== Element || $[30] !== rest || $[31] !== t16 || $[32] !== t7 ? (t17 = /* @__PURE__ */ jsx(Element, { ...rest, className: t4, style: t7, children: t16 }), $[29] = Element, $[30] = rest, $[31] = t16, $[32] = t7, $[33] = t17) : t17 = $[33], t17;
+}
 const DEFAULT_BOX_ELEMENT = "div";
 function Box(props) {
   const $ = c(154), t0 = props;
@@ -794,202 +901,6 @@ function KBD(props) {
   let t9;
   return $[15] !== display || $[16] !== padding || $[17] !== rest || $[18] !== t6 || $[19] !== t7 || $[20] !== t8 ? (t9 = /* @__PURE__ */ jsx(Box, { "data-ui": "KBD", ...rest, as: t6, className: t7, display, muted: !0, padding, children: t8 }), $[15] = display, $[16] = padding, $[17] = rest, $[18] = t6, $[19] = t7, $[20] = t8, $[21] = t9) : t9 = $[21], t9;
 }
-const origin = {
-  name: "@sanity/ui/origin",
-  fn({
-    middlewareData,
-    placement,
-    rects
-  }) {
-    const [side] = placement.split("-"), floatingWidth = rects.floating.width, floatingHeight = rects.floating.height, shiftX = middlewareData.shift?.x || 0, shiftY = middlewareData.shift?.y || 0;
-    if (floatingWidth <= 0 || floatingHeight <= 0)
-      return {};
-    const isVerticalPlacement = ["bottom", "top"].includes(side), {
-      originX,
-      originY
-    } = isVerticalPlacement ? {
-      originX: clamp(0.5 - shiftX / floatingWidth, 0, 1),
-      originY: side === "bottom" ? 0 : 1
-    } : {
-      originX: side === "left" ? 1 : 0,
-      originY: clamp(0.5 - shiftY / floatingHeight, 0, 1)
-    };
-    return {
-      data: {
-        originX,
-        originY
-      }
-    };
-  }
-};
-function clamp(num, min, max) {
-  return Math.min(Math.max(num, min), max);
-}
-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 BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null), DEFAULT_VALUE = {
-  version: 0,
-  element: null
-};
-function useBoundaryElement() {
-  const value = useContext(BoundaryElementContext);
-  if (value && (!isRecord(value) || value.version !== 0))
-    throw new Error("useBoundaryElement(): the context value is not compatible");
-  return value || DEFAULT_VALUE;
-}
-function findMaxBreakpoints(media2, width) {
-  const ret = [];
-  for (let i = 0; i < media2.length; i += 1)
-    media2[i] > width && ret.push(i);
-  return ret;
-}
-function findMinBreakpoints(media2, width) {
-  const ret = [];
-  for (let i = 0; i < media2.length; i += 1)
-    media2[i] <= width && ret.push(i);
-  return ret;
-}
-const DEFAULT_ELEMENT_QUERY_ELEMENT = "div", DEFAULT_BREAKPOINTS = Object.values(BREAKPOINTS);
-function ElementQuery(props) {
-  const $ = c(21), t0 = props;
-  let children, forwardedRef, mediaProp, rest, t1;
-  $[0] !== t0 ? ({
-    as: t1,
-    children,
-    media: mediaProp,
-    ref: forwardedRef,
-    ...rest
-  } = t0, $[0] = t0, $[1] = children, $[2] = forwardedRef, $[3] = mediaProp, $[4] = rest, $[5] = t1) : (children = $[1], forwardedRef = $[2], mediaProp = $[3], rest = $[4], t1 = $[5]);
-  const Element = t1 === void 0 ? DEFAULT_ELEMENT_QUERY_ELEMENT : t1, breakpoints = mediaProp ?? DEFAULT_BREAKPOINTS, [element, setElement] = useState(null), elementSize = useElementSize(element);
-  let t2;
-  t2 = elementSize?.border.width ?? window.innerWidth;
-  const width = t2;
-  let t3, t4;
-  if ($[6] !== breakpoints || $[7] !== width) {
-    const eq = findMaxBreakpoints(breakpoints, width);
-    t4 = eq.length ? eq.join(" ") : void 0, $[6] = breakpoints, $[7] = width, $[8] = t4;
-  } else
-    t4 = $[8];
-  t3 = t4;
-  const max = t3;
-  let t5, t6;
-  if ($[9] !== breakpoints || $[10] !== width) {
-    const eq_0 = findMinBreakpoints(breakpoints, width);
-    t6 = eq_0.length ? eq_0.join(" ") : void 0, $[9] = breakpoints, $[10] = width, $[11] = t6;
-  } else
-    t6 = $[11];
-  t5 = t6;
-  const min = t5;
-  let t7, t8;
-  $[12] !== element ? (t7 = () => element, t8 = [element], $[12] = element, $[13] = t7, $[14] = t8) : (t7 = $[13], t8 = $[14]), useImperativeHandle(forwardedRef, t7, t8);
-  let t9;
-  return $[15] !== Element || $[16] !== children || $[17] !== max || $[18] !== min || $[19] !== rest ? (t9 = /* @__PURE__ */ jsx(Element, { "data-ui": "ElementQuery", ...rest, "data-eq-max": max, "data-eq-min": min, ref: setElement, children }), $[15] = Element, $[16] = children, $[17] = max, $[18] = min, $[19] = rest, $[20] = t9) : t9 = $[20], t9;
-}
 function getLayerContext(contextValue) {
   if (!isRecord(contextValue) || contextValue.version !== 0)
     throw new Error("the context value is not compatible");
@@ -1120,6 +1031,95 @@ function Layer(props) {
   let t4;
   return $[9] !== t3 || $[10] !== zOffset ? (t4 = /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: t3 }), $[9] = t3, $[10] = zOffset, $[11] = t4) : t4 = $[11], t4;
 }
+const origin = {
+  name: "@sanity/ui/origin",
+  fn({
+    middlewareData,
+    placement,
+    rects
+  }) {
+    const [side] = placement.split("-"), floatingWidth = rects.floating.width, floatingHeight = rects.floating.height, shiftX = middlewareData.shift?.x || 0, shiftY = middlewareData.shift?.y || 0;
+    if (floatingWidth <= 0 || floatingHeight <= 0)
+      return {};
+    const isVerticalPlacement = ["bottom", "top"].includes(side), {
+      originX,
+      originY
+    } = isVerticalPlacement ? {
+      originX: clamp(0.5 - shiftX / floatingWidth, 0, 1),
+      originY: side === "bottom" ? 0 : 1
+    } : {
+      originX: side === "left" ? 1 : 0,
+      originY: clamp(0.5 - shiftY / floatingHeight, 0, 1)
+    };
+    return {
+      data: {
+        originX,
+        originY
+      }
+    };
+  }
+};
+function clamp(num, min, max) {
+  return Math.min(Math.max(num, min), max);
+}
+const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null), DEFAULT_VALUE = {
+  version: 0,
+  element: null
+};
+function useBoundaryElement() {
+  const value = useContext(BoundaryElementContext);
+  if (value && (!isRecord(value) || value.version !== 0))
+    throw new Error("useBoundaryElement(): the context value is not compatible");
+  return value || DEFAULT_VALUE;
+}
+function findMaxBreakpoints(media2, width) {
+  const ret = [];
+  for (let i = 0; i < media2.length; i += 1)
+    media2[i] > width && ret.push(i);
+  return ret;
+}
+function findMinBreakpoints(media2, width) {
+  const ret = [];
+  for (let i = 0; i < media2.length; i += 1)
+    media2[i] <= width && ret.push(i);
+  return ret;
+}
+const DEFAULT_ELEMENT_QUERY_ELEMENT = "div", DEFAULT_BREAKPOINTS = Object.values(BREAKPOINTS);
+function ElementQuery(props) {
+  const $ = c(21), t0 = props;
+  let children, forwardedRef, mediaProp, rest, t1;
+  $[0] !== t0 ? ({
+    as: t1,
+    children,
+    media: mediaProp,
+    ref: forwardedRef,
+    ...rest
+  } = t0, $[0] = t0, $[1] = children, $[2] = forwardedRef, $[3] = mediaProp, $[4] = rest, $[5] = t1) : (children = $[1], forwardedRef = $[2], mediaProp = $[3], rest = $[4], t1 = $[5]);
+  const Element = t1 === void 0 ? DEFAULT_ELEMENT_QUERY_ELEMENT : t1, breakpoints = mediaProp ?? DEFAULT_BREAKPOINTS, [element, setElement] = useState(null), elementSize = useElementSize(element);
+  let t2;
+  t2 = elementSize?.border.width ?? window.innerWidth;
+  const width = t2;
+  let t3, t4;
+  if ($[6] !== breakpoints || $[7] !== width) {
+    const eq = findMaxBreakpoints(breakpoints, width);
+    t4 = eq.length ? eq.join(" ") : void 0, $[6] = breakpoints, $[7] = width, $[8] = t4;
+  } else
+    t4 = $[8];
+  t3 = t4;
+  const max = t3;
+  let t5, t6;
+  if ($[9] !== breakpoints || $[10] !== width) {
+    const eq_0 = findMinBreakpoints(breakpoints, width);
+    t6 = eq_0.length ? eq_0.join(" ") : void 0, $[9] = breakpoints, $[10] = width, $[11] = t6;
+  } else
+    t6 = $[11];
+  t5 = t6;
+  const min = t5;
+  let t7, t8;
+  $[12] !== element ? (t7 = () => element, t8 = [element], $[12] = element, $[13] = t7, $[14] = t8) : (t7 = $[13], t8 = $[14]), useImperativeHandle(forwardedRef, t7, t8);
+  let t9;
+  return $[15] !== Element || $[16] !== children || $[17] !== max || $[18] !== min || $[19] !== rest ? (t9 = /* @__PURE__ */ jsx(Element, { "data-ui": "ElementQuery", ...rest, "data-eq-max": max, "data-eq-min": min, ref: setElement, children }), $[15] = Element, $[16] = children, $[17] = max, $[18] = min, $[19] = rest, $[20] = t9) : t9 = $[20], t9;
+}
 const key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`);
 globalScope[elementKey] = null;
 const defaultContextValue = {