@sanity/ui 2.8.15 → 2.8.16

package/dist/index.esm.js

@@ -1,6 +1,7 @@
 import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, getTheme_v2, getScopedTheme } from "@sanity/ui/theme";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import require$$0, { useMemo, useState, useRef, useEffect, useDebugValue, useImperativeHandle, useSyncExternalStore, createContext, useContext, forwardRef, useId, Children, isValidElement, cloneElement, useCallback, Component, memo, useLayoutEffect, useReducer, Fragment as Fragment$1, startTransition } from "react";
+import { c } from "react-compiler-runtime";
+import { useMemo, useState, useRef, useEffect, useDebugValue, useImperativeHandle, useSyncExternalStore, createContext, useContext, forwardRef, useId, Children, isValidElement, cloneElement, useCallback, Component, memo, useLayoutEffect, useReducer, Fragment as Fragment$1, startTransition } from "react";
 import ReactIs, { isValidElementType } from "react-is";
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, styled, keyframes } from "styled-components";
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon, ToggleArrowRightIcon } from "@sanity/icons";
@@ -10,196 +11,7 @@ import { motion, AnimatePresence } from "framer-motion";
 import { createPortal } from "react-dom";
 import { useEffectEvent } from "use-effect-event";
 import { getTheme_v2 as getTheme_v2$1 } from "./_legacy/getTheme_v2.esm.js";
-const createColorTheme = createColorTheme$1, hexToRgb = hexToRgb$1, hslToRgb = hslToRgb$1, multiply = multiply$1, parseColor = parseColor$1, rgbToHex = rgbToHex$1, rgbToHsl = rgbToHsl$1, rgba = rgba$1, screen = screen$1, studioTheme = buildTheme();
-var dist = {};
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @lightSyntaxTransform
- * @noflow
- * @nolint
- * @preventMunge
- * @preserve-invariant-messages
- */
-var hasRequiredDist;
-function requireDist() {
-  if (hasRequiredDist) return dist;
-  hasRequiredDist = 1;
-  var React = require$$0;
-  function _interopNamespaceDefault(e) {
-    var n = /* @__PURE__ */ Object.create(null);
-    return e && Object.keys(e).forEach(function(k) {
-      if (k !== "default") {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: !0,
-          get: function() {
-            return e[k];
-          }
-        });
-      }
-    }), n.default = e, Object.freeze(n);
-  }
-  var React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React), _a, _b;
-  const {
-    useRef: useRef2,
-    useEffect: useEffect2,
-    isValidElement: isValidElement2
-  } = React__namespace, ReactSecretInternals = (_a = React__namespace.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE) !== null && _a !== void 0 ? _a : React__namespace.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, $empty = Symbol.for("react.memo_cache_sentinel"), c = typeof ((_b = React__namespace.__COMPILER_RUNTIME) === null || _b === void 0 ? void 0 : _b.c) == "function" ? React__namespace.__COMPILER_RUNTIME.c : function(size2) {
-    return React__namespace.useMemo(() => {
-      const $ = new Array(size2);
-      for (let ii = 0; ii < size2; ii++)
-        $[ii] = $empty;
-      return $[$empty] = !0, $;
-    }, []);
-  }, LazyGuardDispatcher = {};
-  ["readContext", "useCallback", "useContext", "useEffect", "useImperativeHandle", "useInsertionEffect", "useLayoutEffect", "useMemo", "useReducer", "useRef", "useState", "useDebugValue", "useDeferredValue", "useTransition", "useMutableSource", "useSyncExternalStore", "useId", "unstable_isNewReconciler", "getCacheSignal", "getCacheForType", "useCacheRefresh"].forEach((name) => {
-    LazyGuardDispatcher[name] = () => {
-      throw new Error(`[React] Unexpected React hook call (${name}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `);
-    };
-  });
-  let originalDispatcher = null;
-  LazyGuardDispatcher.useMemoCache = (count) => {
-    if (originalDispatcher == null)
-      throw new Error("React Compiler internal invariant violation: unexpected null dispatcher");
-    return originalDispatcher.useMemoCache(count);
-  };
-  var GuardKind;
-  (function(GuardKind2) {
-    GuardKind2[GuardKind2.PushGuardContext = 0] = "PushGuardContext", GuardKind2[GuardKind2.PopGuardContext = 1] = "PopGuardContext", GuardKind2[GuardKind2.PushExpectHook = 2] = "PushExpectHook", GuardKind2[GuardKind2.PopExpectHook = 3] = "PopExpectHook";
-  })(GuardKind || (GuardKind = {}));
-  function setCurrent(newDispatcher) {
-    return ReactSecretInternals.ReactCurrentDispatcher.current = newDispatcher, ReactSecretInternals.ReactCurrentDispatcher.current;
-  }
-  const guardFrames = [];
-  function $dispatcherGuard(kind) {
-    const curr = ReactSecretInternals.ReactCurrentDispatcher.current;
-    if (kind === GuardKind.PushGuardContext) {
-      if (guardFrames.push(curr), guardFrames.length === 1 && (originalDispatcher = curr), curr === LazyGuardDispatcher)
-        throw new Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");
-      setCurrent(LazyGuardDispatcher);
-    } else if (kind === GuardKind.PopGuardContext) {
-      const lastFrame = guardFrames.pop();
-      if (lastFrame == null)
-        throw new Error("React Compiler internal error: unexpected null in guard stack");
-      guardFrames.length === 0 && (originalDispatcher = null), setCurrent(lastFrame);
-    } else if (kind === GuardKind.PushExpectHook)
-      guardFrames.push(curr), setCurrent(originalDispatcher);
-    else if (kind === GuardKind.PopExpectHook) {
-      const lastFrame = guardFrames.pop();
-      if (lastFrame == null)
-        throw new Error("React Compiler internal error: unexpected null in guard stack");
-      setCurrent(lastFrame);
-    } else
-      throw new Error("React Compiler internal error: unreachable block" + kind);
-  }
-  function $reset($) {
-    for (let ii = 0; ii < $.length; ii++)
-      $[ii] = $empty;
-  }
-  function $makeReadOnly() {
-    throw new Error("TODO: implement $makeReadOnly in react-compiler-runtime");
-  }
-  const renderCounterRegistry = /* @__PURE__ */ new Map();
-  function clearRenderCounterRegistry() {
-    for (const counters of renderCounterRegistry.values())
-      counters.forEach((counter) => {
-        counter.count = 0;
-      });
-  }
-  function registerRenderCounter(name, val) {
-    let counters = renderCounterRegistry.get(name);
-    counters == null && (counters = /* @__PURE__ */ new Set(), renderCounterRegistry.set(name, counters)), counters.add(val);
-  }
-  function removeRenderCounter(name, val) {
-    const counters = renderCounterRegistry.get(name);
-    counters?.delete(val);
-  }
-  function useRenderCounter(name) {
-    const val = useRef2(null);
-    val.current != null && (val.current.count += 1), useEffect2(() => {
-      if (val.current == null) {
-        const counter = {
-          count: 0
-        };
-        registerRenderCounter(name, counter), val.current = counter;
-      }
-      return () => {
-        val.current !== null && removeRenderCounter(name, val.current);
-      };
-    });
-  }
-  const seenErrors = /* @__PURE__ */ new Set();
-  function $structuralCheck(oldValue, newValue, variableName, fnName, kind, loc) {
-    function error(l, r, path, depth) {
-      const str = `${fnName}:${loc} [${kind}] ${variableName}${path} changed from ${l} to ${r} at depth ${depth}`;
-      seenErrors.has(str) || (seenErrors.add(str), console.error(str));
-    }
-    const depthLimit = 2;
-    function recur(oldValue2, newValue2, path, depth) {
-      if (!(depth > depthLimit)) {
-        if (oldValue2 === newValue2)
-          return;
-        if (typeof oldValue2 != typeof newValue2)
-          error(`type ${typeof oldValue2}`, `type ${typeof newValue2}`, path, depth);
-        else if (typeof oldValue2 == "object") {
-          const oldArray = Array.isArray(oldValue2), newArray = Array.isArray(newValue2);
-          if (oldValue2 === null && newValue2 !== null)
-            error("null", `type ${typeof newValue2}`, path, depth);
-          else if (newValue2 === null)
-            error(`type ${typeof oldValue2}`, "null", path, depth);
-          else if (oldValue2 instanceof Map)
-            if (!(newValue2 instanceof Map))
-              error("Map instance", "other value", path, depth);
-            else if (oldValue2.size !== newValue2.size)
-              error(`Map instance with size ${oldValue2.size}`, `Map instance with size ${newValue2.size}`, path, depth);
-            else
-              for (const [k, v] of oldValue2)
-                newValue2.has(k) ? recur(v, newValue2.get(k), `${path}.get(${k})`, depth + 1) : error(`Map instance with key ${k}`, `Map instance without key ${k}`, path, depth);
-          else if (newValue2 instanceof Map)
-            error("other value", "Map instance", path, depth);
-          else if (oldValue2 instanceof Set)
-            if (!(newValue2 instanceof Set))
-              error("Set instance", "other value", path, depth);
-            else if (oldValue2.size !== newValue2.size)
-              error(`Set instance with size ${oldValue2.size}`, `Set instance with size ${newValue2.size}`, path, depth);
-            else
-              for (const v of newValue2)
-                oldValue2.has(v) || error(`Set instance without element ${v}`, `Set instance with element ${v}`, path, depth);
-          else if (newValue2 instanceof Set)
-            error("other value", "Set instance", path, depth);
-          else if (oldArray || newArray)
-            if (oldArray !== newArray)
-              error(`type ${oldArray ? "array" : "object"}`, `type ${newArray ? "array" : "object"}`, path, depth);
-            else if (oldValue2.length !== newValue2.length)
-              error(`array with length ${oldValue2.length}`, `array with length ${newValue2.length}`, path, depth);
-            else
-              for (let ii = 0; ii < oldValue2.length; ii++)
-                recur(oldValue2[ii], newValue2[ii], `${path}[${ii}]`, depth + 1);
-          else if (isValidElement2(oldValue2) || isValidElement2(newValue2))
-            isValidElement2(oldValue2) !== isValidElement2(newValue2) ? error(`type ${isValidElement2(oldValue2) ? "React element" : "object"}`, `type ${isValidElement2(newValue2) ? "React element" : "object"}`, path, depth) : oldValue2.type !== newValue2.type ? error(`React element of type ${oldValue2.type}`, `React element of type ${newValue2.type}`, path, depth) : recur(oldValue2.props, newValue2.props, `[props of ${path}]`, depth + 1);
-          else {
-            for (const key2 in newValue2)
-              key2 in oldValue2 || error(`object without key ${key2}`, `object with key ${key2}`, path, depth);
-            for (const key2 in oldValue2)
-              key2 in newValue2 ? recur(oldValue2[key2], newValue2[key2], `${path}.${key2}`, depth + 1) : error(`object with key ${key2}`, `object without key ${key2}`, path, depth);
-          }
-        } else {
-          if (typeof oldValue2 == "function")
-            return;
-          isNaN(oldValue2) || isNaN(newValue2) ? isNaN(oldValue2) !== isNaN(newValue2) && error(`${isNaN(oldValue2) ? "NaN" : "non-NaN value"}`, `${isNaN(newValue2) ? "NaN" : "non-NaN value"}`, path, depth) : oldValue2 !== newValue2 && error(oldValue2, newValue2, path, depth);
-        }
-      }
-    }
-    recur(oldValue, newValue, "", 0);
-  }
-  return dist.$dispatcherGuard = $dispatcherGuard, dist.$makeReadOnly = $makeReadOnly, dist.$reset = $reset, dist.$structuralCheck = $structuralCheck, dist.c = c, dist.clearRenderCounterRegistry = clearRenderCounterRegistry, dist.renderCounterRegistry = renderCounterRegistry, dist.useRenderCounter = useRenderCounter, dist;
-}
-var distExports = requireDist();
-const EMPTY_ARRAY = [], EMPTY_RECORD = {}, POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = "--motion-content-opacity", POPOVER_MOTION_PROPS = {
+const createColorTheme = createColorTheme$1, hexToRgb = hexToRgb$1, hslToRgb = hslToRgb$1, multiply = multiply$1, parseColor = parseColor$1, rgbToHex = rgbToHex$1, rgbToHsl = rgbToHsl$1, rgba = rgba$1, screen = screen$1, studioTheme = buildTheme(), EMPTY_ARRAY = [], EMPTY_RECORD = {}, POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = "--motion-content-opacity", POPOVER_MOTION_PROPS = {
   initial: {
     opacity: 0.5,
     [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
@@ -357,7 +169,7 @@ function _getElements(element, elementsArg) {
   return ret.filter(Boolean);
 }
 function useClickOutside(listener, t0, boundaryElement) {
-  const $ = distExports.c(12), elementsArg = t0 === void 0 ? EMPTY_ARRAY : t0, [element, setElement] = useState(null);
+  const $ = c(12), elementsArg = t0 === void 0 ? EMPTY_ARRAY : t0, [element, setElement] = useState(null);
   let t1;
   $[0] !== element || $[1] !== elementsArg ? (t1 = () => _getElements(element, elementsArg), $[0] = element, $[1] = elementsArg, $[2] = t1) : t1 = $[2];
   const [elements, setElements] = useState(t1), elementsRef = useRef(elements);
@@ -398,7 +210,7 @@ function useClickOutside(listener, t0, boundaryElement) {
   }, t5 = [boundaryElement, listener, elements], $[7] = listener, $[8] = boundaryElement, $[9] = elements, $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]), useEffect(t4, t5), setElement;
 }
 function useClickOutsideEvent(listener, t0, boundaryElement) {
-  const $ = distExports.c(8), elementsArg = t0 === void 0 ? _temp$5 : t0;
+  const $ = c(8), elementsArg = t0 === void 0 ? _temp$5 : t0;
   let t1;
   $[0] !== listener || $[1] !== boundaryElement || $[2] !== elementsArg ? (t1 = (evt) => {
     if (!listener)
@@ -430,7 +242,7 @@ function _temp$5() {
   return EMPTY_ARRAY;
 }
 function useCustomValidity(ref, customValidity) {
-  const $ = distExports.c(6);
+  const $ = c(6);
   let t0;
   $[0] !== ref.current || $[1] !== customValidity ? (t0 = () => {
     ref.current?.setCustomValidity(customValidity || "");
@@ -762,7 +574,7 @@ function _createElementSizeObserver() {
   };
 }
 function useElementSize(element) {
-  const $ = distExports.c(3), [size2, setSize] = useState(null);
+  const $ = c(3), [size2, setSize] = useState(null);
   let t0, t1;
   return $[0] !== element ? (t0 = () => {
     if (element)
@@ -773,12 +585,12 @@ function useElementRect(element) {
   return useElementSize(element)?._contentRect || null;
 }
 function useForwardedRef(ref) {
-  const $ = distExports.c(1), innerRef = useRef(null);
+  const $ = c(1), innerRef = useRef(null);
   let t0;
   return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => innerRef.current, $[0] = t0) : t0 = $[0], useImperativeHandle(ref, t0), innerRef;
 }
 function useGlobalKeyDown(onKeyDown) {
-  const $ = distExports.c(3);
+  const $ = c(3);
   let t0, t1;
   return $[0] !== onKeyDown ? (t0 = () => (addEventListener("keydown", onKeyDown), () => removeEventListener("keydown", onKeyDown)), t1 = [onKeyDown], $[0] = onKeyDown, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), useEffect(t0, t1);
 }
@@ -834,7 +646,7 @@ function useRootTheme() {
   return value;
 }
 function ThemeColorProvider(props) {
-  const $ = distExports.c(5), {
+  const $ = c(5), {
     children,
     scheme,
     tone
@@ -847,7 +659,7 @@ function useTheme() {
   return useTheme$1();
 }
 function useTheme_v2() {
-  const $ = distExports.c(2), t0 = useTheme$1();
+  const $ = c(2), t0 = useTheme$1();
   let t1;
   return $[0] !== t0 ? (t1 = getTheme_v2(t0), $[0] = t0, $[1] = t1) : t1 = $[1], t1;
 }
@@ -900,7 +712,7 @@ function getServerSnapshot() {
   return 0;
 }
 function useMediaIndex() {
-  const $ = distExports.c(2), {
+  const $ = c(2), {
     media
   } = useTheme_v2();
   let t0, t1;
@@ -1632,7 +1444,7 @@ const Root$C = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBa
   overflow: hidden;
   overflow: clip;
 `, Label = forwardRef(function(props, ref) {
-  const $ = distExports.c(22);
+  const $ = c(22);
   let t0, t1, childrenProp, textOverflow, align, restProps, accent, weight;
   $[0] !== props ? ({
     accent,
@@ -1804,7 +1616,7 @@ function avatarStrokeStyle() {
 const Root$B = styled.div(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = styled.div(avatarStyle.arrow), BgStroke = styled.ellipse(avatarStyle.bgStroke), Stroke = styled.ellipse(avatarStyle.stroke), Initials = styled.div(avatarStyle.initials), InitialsLabel = styled(Label)({
   color: "inherit"
 }), Image = styled.svg(avatarStyle.image), Avatar = forwardRef(function(props, ref) {
-  const $ = distExports.c(53);
+  const $ = c(53);
   let t0, t1, t2, asProp, animateArrowFrom, arrowPositionProp, src, onImageLoadError, __unstable_hideInnerStroke, initials, restProps, title;
   $[0] !== props ? ({
     __unstable_hideInnerStroke,
@@ -1903,7 +1715,7 @@ function _avatarCounterBaseStyle(props) {
   `;
 }
 const Root$A = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = forwardRef(function(props, ref) {
-  const $ = distExports.c(10), {
+  const $ = c(10), {
     count,
     size: t0
   } = props, size2 = useArrayProp(t0 === void 0 ? 1 : t0);
@@ -1966,7 +1778,7 @@ const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), Ava
 });
 AvatarStack.displayName = "ForwardRef(AvatarStack)";
 const Root$y = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = forwardRef(function(props, ref) {
-  const $ = distExports.c(59);
+  const $ = c(59);
   let t0, t1, t2, t3, column, columnStart, columnEnd, flex, height, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, overflow, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, row, rowStart, rowEnd, sizing, restProps;
   $[0] !== props ? ({
     as: t0,
@@ -2077,7 +1889,7 @@ const Root$x = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBase
   overflow: hidden;
   overflow: clip;
 `, Text = forwardRef(function(props, ref) {
-  const $ = distExports.c(22);
+  const $ = c(22);
   let t0, t1, t2, childrenProp, textOverflow, align, restProps, weight;
   $[0] !== props ? ({
     accent: t0,
@@ -2118,7 +1930,7 @@ function badgeStyle(props) {
   };
 }
 const Root$w = styled(Box)(responsiveRadiusStyle, badgeStyle), Badge = forwardRef(function(props, ref) {
-  const $ = distExports.c(17);
+  const $ = c(17);
   let t0, t1, t2, t3, children, restProps;
   if ($[0] !== props) {
     const {
@@ -2141,7 +1953,7 @@ const Root$w = styled(Box)(responsiveRadiusStyle, badgeStyle), Badge = forwardRe
 });
 Badge.displayName = "ForwardRef(Badge)";
 const Root$v = styled(Box)(flexItemStyle, responsiveFlexStyle), Flex = forwardRef(function(props, ref) {
-  const $ = distExports.c(17);
+  const $ = c(17);
   let t0, align, gap, justify, wrap, restProps, as;
   $[0] !== props ? ({
     align,
@@ -2170,7 +1982,7 @@ const rotate$1 = keyframes`
     animation: ${rotate$1} 500ms linear infinite;
   }
 `, Spinner = forwardRef(function(props, ref) {
-  const $ = distExports.c(4);
+  const $ = c(4);
   let t0;
   $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx(SpinnerIcon, {}), $[0] = t0) : t0 = $[0];
   let t1;
@@ -2351,7 +2163,7 @@ const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
   z-index: 1;
   box-shadow: inherit;
 `, Button = forwardRef(function(props, ref) {
-  const $ = distExports.c(64);
+  const $ = c(64);
   let t0, t1, t2, t3, t4, t5, t6, t7, t8, paddingXProp, paddingYProp, paddingTopProp, paddingBottomProp, paddingLeftProp, paddingRightProp, loading, disabled, selected, IconComponent, text, IconRightComponent, textAlign, children, restProps, width;
   $[0] !== props ? ({
     children,
@@ -2567,7 +2379,7 @@ function cardColorStyle(props) {
   `;
 }
 const Root$s = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function(props, ref) {
-  const $ = distExports.c(42);
+  const $ = c(42);
   let t0, t1, t2, t3, asProp, border2, borderTop2, borderRight2, borderBottom2, borderLeft2, shadow, pressed, selected, restProps, muted, scheme;
   $[0] !== props ? ({
     __unstable_checkered: t0,
@@ -2733,7 +2545,7 @@ function inputElementStyles(props) {
   `;
 }
 const Root$r = styled.div(checkboxBaseStyles), Input$5 = styled.input(inputElementStyles), Checkbox = forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(25);
+  const $ = c(25);
   let indeterminate, customValidity, disabled, readOnly, restProps, checked, className, style;
   $[0] !== props ? ({
     checked,
@@ -2916,7 +2728,7 @@ function codeBaseStyle() {
   `;
 }
 const Root$q = styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = forwardRef(function(props, ref) {
-  const $ = distExports.c(23);
+  const $ = c(23);
   let t0, languageProp, children, restProps, weight;
   $[0] !== props ? ({
     children,
@@ -2957,7 +2769,7 @@ function responsiveContainerWidthStyle(props) {
   }));
 }
 const Root$p = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle), Container = forwardRef(function(props, ref) {
-  const $ = distExports.c(9);
+  const $ = c(9);
   let t0, restProps, as;
   $[0] !== props ? ({
     as,
@@ -2970,7 +2782,7 @@ const Root$p = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle), C
 });
 Container.displayName = "ForwardRef(Container)";
 const Root$o = styled(Box)(responsiveGridStyle), Grid = forwardRef(function(props, ref) {
-  const $ = distExports.c(26);
+  const $ = c(26);
   let as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, restProps, children;
   $[0] !== props ? ({
     as,
@@ -3056,7 +2868,7 @@ const Root$n = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsive
   overflow: hidden;
   overflow: clip;
 `, Heading = forwardRef(function(props, ref) {
-  const $ = distExports.c(22);
+  const $ = c(22);
   let t0, t1, t2, childrenProp, textOverflow, align, restProps, weight;
   $[0] !== props ? ({
     accent: t0,
@@ -3109,7 +2921,7 @@ function inlineSpaceStyle(props) {
   });
 }
 const Root$m = styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = forwardRef(function(props, ref) {
-  const $ = distExports.c(13);
+  const $ = c(13);
   let childrenProp, space, restProps, as;
   $[0] !== props ? ({
     as,
@@ -3147,7 +2959,7 @@ function kbdStyle() {
   `;
 }
 const Root$l = styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(function(props, ref) {
-  const $ = distExports.c(17);
+  const $ = c(17);
   let t0, t1, t2, children, restProps;
   $[0] !== props ? ({
     children,
@@ -3285,7 +3097,7 @@ const Root$k = styled.div(({
 `, ShapePath = styled.path`
   fill: var(--card-bg-color);
 `, Arrow = forwardRef(function(props, ref) {
-  const $ = distExports.c(24);
+  const $ = c(24);
   let t0, w, h, restProps;
   $[0] !== props ? ({
     width: w,
@@ -3333,7 +3145,7 @@ const Root$k = styled.div(({
 Arrow.displayName = "ForwardRef(Arrow)";
 const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null);
 function BoundaryElementProvider(props) {
-  const $ = distExports.c(5), {
+  const $ = c(5), {
     children,
     element
   } = props;
@@ -3430,7 +3242,7 @@ function getLayerContext(contextValue) {
 }
 const LayerContext = createGlobalScopedContext("@sanity/ui/context/layer", null);
 function useLayer() {
-  const $ = distExports.c(2), value = useContext(LayerContext);
+  const $ = c(2), value = useContext(LayerContext);
   if (!value)
     throw new Error("useLayer(): missing context value");
   try {
@@ -3552,7 +3364,7 @@ LayerProvider.displayName = "LayerProvider";
 const Root$j = styled.div({
   position: "relative"
 }), LayerChildren = forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(22);
+  const $ = c(22);
   let t0, onActivate, onFocus, restProps, children;
   $[0] !== props ? ({
     children,
@@ -3588,7 +3400,7 @@ const Root$j = styled.div({
   let t6;
   return $[17] !== restProps || $[18] !== handleFocus || $[19] !== t5 || $[20] !== children ? (t6 = /* @__PURE__ */ jsx(Root$j, { ...restProps, "data-ui": "Layer", onFocus: handleFocus, ref, style: t5, children }), $[17] = restProps, $[18] = handleFocus, $[19] = t5, $[20] = children, $[21] = t6) : t6 = $[21], t6;
 }), Layer = forwardRef(function(props, ref) {
-  const $ = distExports.c(11);
+  const $ = c(11);
   let t0, restProps, children;
   $[0] !== props ? ({
     children,
@@ -3620,7 +3432,7 @@ function usePortal() {
   return value;
 }
 function Portal(props) {
-  const $ = distExports.c(3), {
+  const $ = c(3), {
     children,
     __unstable_name: name
   } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
@@ -3631,7 +3443,7 @@ function Portal(props) {
 }
 Portal.displayName = "Portal";
 function PortalProvider(props) {
-  const $ = distExports.c(7), {
+  const $ = c(7), {
     boundaryElement,
     children,
     element,
@@ -3677,7 +3489,7 @@ const Root$i = styled.div`
   overflow: hidden;
   overflow: clip;
 `, SrOnly = forwardRef(function(props, ref) {
-  const $ = distExports.c(4), {
+  const $ = c(4), {
     as,
     children
   } = props;
@@ -3692,7 +3504,7 @@ const Root$h = styled.div`
   left: 0;
   right: 0;
 `, VirtualList = forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(56);
+  const $ = c(56);
   let t0, t1, t2, renderItem, onChange, getItemKey, restProps;
   $[0] !== props ? ({
     as: t0,
@@ -3889,7 +3701,7 @@ const MotionCard$1 = styled(motion(Card))`
     will-change: opacity;
   }
 `, PopoverCard = memo(forwardRef(function(props, ref) {
-  const $ = distExports.c(60);
+  const $ = c(60);
   let marginsProp, xProp, yProp, animate, originX, originY, strategy, style, width, arrowX, arrowY, restProps, padding, children, overflow, arrow2, arrowRef, placement, radius, scheme, shadow, tone;
   $[0] !== props ? ({
     __unstable_margins: marginsProp,
@@ -4113,7 +3925,7 @@ function inputElementStyle(props) {
   const {
     color,
     input
-  } = getTheme_v2(props.theme), dist2 = (input.radio.size - input.radio.markSize) / 2;
+  } = getTheme_v2(props.theme), dist = (input.radio.size - input.radio.markSize) / 2;
   return css`
     appearance: none;
     position: absolute;
@@ -4145,8 +3957,8 @@ function inputElementStyle(props) {
       &::after {
         content: '';
         position: absolute;
-        top: ${rem(dist2)};
-        left: ${rem(dist2)};
+        top: ${rem(dist)};
+        left: ${rem(dist)};
         height: ${rem(input.radio.markSize)};
         width: ${rem(input.radio.markSize)};
         border-radius: ${rem(input.radio.markSize / 2)};
@@ -4211,7 +4023,7 @@ function inputElementStyle(props) {
   `;
 }
 const Root$g = styled.div(radioBaseStyle), Input$4 = styled.input(inputElementStyle), Radio = forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(19);
+  const $ = c(19);
   let customValidity, disabled, readOnly, restProps, className, style;
   $[0] !== props ? ({
     className,
@@ -4379,7 +4191,7 @@ const selectStyle = {
   input: inputStyle,
   iconBox: iconBoxStyle
 }, Root$f = styled.div(selectStyle.root), Input$3 = styled.select(selectStyle.input), IconBox = styled(Box)(selectStyle.iconBox), Select = forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(29);
+  const $ = c(29);
   let t0, t1, t2, t3, customValidity, disabled, readOnly, restProps, children;
   $[0] !== props ? ({
     children,
@@ -4434,7 +4246,7 @@ function responsiveStackSpaceStyle(props) {
   }));
 }
 const Root$e = styled(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = forwardRef(function(props, ref) {
-  const $ = distExports.c(10);
+  const $ = c(10);
   let as, space, restProps;
   $[0] !== props ? ({
     as,
@@ -4600,7 +4412,7 @@ function switchThumbStyles(props) {
   `;
 }
 const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInputStyles), Representation = styled.span(switchRepresentationStyles), Track = styled.span(switchTrackStyles), Thumb = styled.span(switchThumbStyles), Switch = forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(26);
+  const $ = c(26);
   let indeterminate, disabled, readOnly, checked, restProps, className, style;
   $[0] !== props ? ({
     checked,
@@ -4641,7 +4453,7 @@ const Root$c = styled.span(textInputRootStyle), InputRoot$1 = styled.span`
   display: block;
   position: relative;
 `, Input$1 = styled.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation$1 = styled.div(responsiveRadiusStyle, textInputRepresentationStyle), TextArea = forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(29);
+  const $ = c(29);
   let t0, t1, t2, t3, t4, customValidity, restProps, weight, __unstable_disableFocusRing;
   $[0] !== props ? ({
     border: t0,
@@ -4717,7 +4529,7 @@ const CLEAR_BUTTON_BOX_STYLE = {
     display: "block"
   }
 }), TextInput = forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(86);
+  const $ = c(86);
   let t0, t1, t2, t3, t4, t5, t6, clearButton, IconComponent, IconRightComponent, suffix, prefix, customValidity, onClear, __unstable_disableFocusRing, readOnly, restProps, weight;
   $[0] !== props ? ({
     __unstable_disableFocusRing,
@@ -4814,7 +4626,7 @@ function _temp$1(event) {
   event.preventDefault(), event.stopPropagation();
 }
 function useDelayedState(initialState) {
-  const $ = distExports.c(3), [state, setState] = useState(initialState), delayedAction = useRef();
+  const $ = c(3), [state, setState] = useState(initialState), delayedAction = useRef();
   let t0;
   $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = (nextState, delay) => {
     const action = () => {
@@ -4847,7 +4659,7 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
     will-change: opacity;
   }
 `, TooltipCard = memo(forwardRef(function(props, ref) {
-  const $ = distExports.c(42);
+  const $ = c(42);
   let animate, originX, originY, style, arrowX, arrowY, restProps, arrow2, arrowRef, placement, padding, radius, scheme, shadow, children;
   $[0] !== props ? ({
     animate,
@@ -4902,7 +4714,7 @@ function useTooltipDelayGroup() {
   return useContext(TooltipDelayGroupContext);
 }
 function TooltipDelayGroupProvider(props) {
-  const $ = distExports.c(10), {
+  const $ = c(10), {
     children,
     delay
   } = props, [isGroupActive, setIsGroupActive] = useDelayedState(!1), [openTooltipId, setOpenTooltipId] = useDelayedState(null), openDelay = typeof delay == "number" ? delay : delay?.open || 0, closeDelay = typeof delay == "number" ? delay : delay?.close || 0;
@@ -5048,7 +4860,7 @@ const Root$a = styled(Layer)`
 });
 Tooltip.displayName = "ForwardRef(Tooltip)";
 function useCloseOnMouseLeave(t0) {
-  const $ = distExports.c(7), {
+  const $ = c(7), {
     handleIsOpenChange,
     referenceElement,
     showTooltip
@@ -5088,7 +4900,7 @@ const Root$9 = styled.div`
   animation: ${rotate} 500ms linear infinite;
 `;
 function AutocompleteOption(props) {
-  const $ = distExports.c(11), {
+  const $ = c(11), {
     children,
     id,
     onSelect,
@@ -5479,7 +5291,7 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
   position: relative;
   z-index: 3;
 `, DialogCard = forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(38), {
+  const $ = c(38), {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
     children,
@@ -5599,7 +5411,7 @@ const Dialog = forwardRef(function(props, ref) {
 });
 Dialog.displayName = "ForwardRef(Dialog)";
 function DialogProvider(props) {
-  const $ = distExports.c(6), {
+  const $ = c(6), {
     children,
     position,
     zOffset
@@ -5627,7 +5439,7 @@ const Root$6 = styled.kbd`
     display: block;
   }
 `, Hotkeys = forwardRef(function(props, ref) {
-  const $ = distExports.c(24);
+  const $ = c(24);
   let t0, keys, fontSize2, padding, radius, restProps;
   $[0] !== props ? ({
     fontSize: fontSize2,
@@ -6234,7 +6046,7 @@ const keyframe = keyframes`
     background-color: var(--card-skeleton-color-from);
   }
 `, Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle), Skeleton = forwardRef(function(props, ref) {
-  const $ = distExports.c(14);
+  const $ = c(14);
   let t0, delay, radius, restProps;
   $[0] !== props ? ({
     animated: t0,
@@ -6274,7 +6086,7 @@ const Root$3 = styled(Skeleton)((props) => {
     };
   });
 }), TextSkeleton = forwardRef(function(props, ref) {
-  const $ = distExports.c(7);
+  const $ = c(7);
   let t0, restProps;
   $[0] !== props ? ({
     size: t0,
@@ -6286,7 +6098,7 @@ const Root$3 = styled(Skeleton)((props) => {
 });
 TextSkeleton.displayName = "ForwardRef(TextSkeleton)";
 const LabelSkeleton = forwardRef(function(props, ref) {
-  const $ = distExports.c(7);
+  const $ = c(7);
   let t0, restProps;
   $[0] !== props ? ({
     size: t0,
@@ -6298,7 +6110,7 @@ const LabelSkeleton = forwardRef(function(props, ref) {
 });
 LabelSkeleton.displayName = "ForwardRef(LabelSkeleton)";
 const HeadingSkeleton = forwardRef(function(props, ref) {
-  const $ = distExports.c(7);
+  const $ = c(7);
   let t0, restProps;
   $[0] !== props ? ({
     size: t0,
@@ -6310,7 +6122,7 @@ const HeadingSkeleton = forwardRef(function(props, ref) {
 });
 HeadingSkeleton.displayName = "ForwardRef(HeadingSkeleton)";
 const CodeSkeleton = forwardRef(function(props, ref) {
-  const $ = distExports.c(7);
+  const $ = c(7);
   let t0, restProps;
   $[0] !== props ? ({
     size: t0,
@@ -6324,7 +6136,7 @@ CodeSkeleton.displayName = "ForwardRef(CodeSkeleton)";
 const CustomButton = styled(Button)`
   max-width: 100%;
 `, Tab = forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(30);
+  const $ = c(30);
   let t0, t1, onFocus, focused, selected, restProps, icon, id, onClick, label;
   $[0] !== props ? ({
     icon,
@@ -6387,7 +6199,7 @@ const CustomInline = styled(Inline)`
 });
 TabList.displayName = "ForwardRef(TabList)";
 const TabPanel = forwardRef(function(props, ref) {
-  const $ = distExports.c(9);
+  const $ = c(9);
   let restProps, flex;
   $[0] !== props ? ({
     flex,
@@ -6459,7 +6271,7 @@ const STATUS_CARD_TONE = {
   info: "alert"
 }, Root$2 = styled(Card)(rootStyles);
 function Toast(props) {
-  const $ = distExports.c(30);
+  const $ = c(30);
   let t0, status, title, description, closable, onClose, restProps, duration;
   $[0] !== props ? ({
     closable,
@@ -6662,7 +6474,7 @@ function _focusItemElement(el) {
   }
 }
 const TreeContext = createGlobalScopedContext("@sanity/ui/context/tree", null), Tree = memo(forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(37);
+  const $ = c(37);
   let t0, onFocus, children, restProps;
   $[0] !== props ? ({
     children,
@@ -6916,7 +6728,7 @@ function useTree() {
   return tree;
 }
 const TreeGroup = memo(function(props) {
-  const $ = distExports.c(9);
+  const $ = c(9);
   let t0, restProps, children;
   $[0] !== props ? ({
     children,