@sanity/ui 2.8.15 → 2.8.17

package/dist/index.js

@@ -1,200 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), require$$0 = require("react"), ReactIs = require("react-is"), styledComponents = require("styled-components"), icons = require("@sanity/icons"), Refractor = require("react-refractor"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), reactDom = require("react-dom"), useEffectEvent = require("use-effect-event"), getTheme_v2 = require("./_chunks-cjs/getTheme_v2.js");
+var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), reactCompilerRuntime = require("react-compiler-runtime"), react = require("react"), ReactIs = require("react-is"), styledComponents = require("styled-components"), icons = require("@sanity/icons"), Refractor = require("react-refractor"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), reactDom = require("react-dom"), useEffectEvent = require("use-effect-event"), getTheme_v2 = require("./_chunks-cjs/getTheme_v2.js");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
-var require$$0__default = /* @__PURE__ */ _interopDefaultCompat(require$$0), ReactIs__default = /* @__PURE__ */ _interopDefaultCompat(ReactIs), Refractor__default = /* @__PURE__ */ _interopDefaultCompat(Refractor);
-const createColorTheme = theme.createColorTheme, hexToRgb = theme.hexToRgb, hslToRgb = theme.hslToRgb, multiply = theme.multiply, parseColor = theme.parseColor, rgbToHex = theme.rgbToHex, rgbToHsl = theme.rgbToHsl, rgba = theme.rgba, screen = theme.screen, studioTheme = theme.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__default.default;
-  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,
-    useEffect,
-    isValidElement
-  } = 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 = useRef(null);
-    val.current != null && (val.current.count += 1), useEffect(() => {
-      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 (isValidElement(oldValue2) || isValidElement(newValue2))
-            isValidElement(oldValue2) !== isValidElement(newValue2) ? error(`type ${isValidElement(oldValue2) ? "React element" : "object"}`, `type ${isValidElement(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 = {
+var ReactIs__default = /* @__PURE__ */ _interopDefaultCompat(ReactIs), Refractor__default = /* @__PURE__ */ _interopDefaultCompat(Refractor);
+const createColorTheme = theme.createColorTheme, hexToRgb = theme.hexToRgb, hslToRgb = theme.hslToRgb, multiply = theme.multiply, parseColor = theme.parseColor, rgbToHex = theme.rgbToHex, rgbToHsl = theme.rgbToHsl, rgba = theme.rgba, screen = theme.screen, studioTheme = theme.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,
@@ -337,8 +148,8 @@ function responsiveTextFont(props) {
   return responsiveFont("text", props);
 }
 function useArrayProp(val, defaultVal) {
-  const __perf_hash__ = require$$0.useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val]);
-  return require$$0.useMemo(
+  const __perf_hash__ = react.useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val]);
+  return react.useMemo(
     () => _getArrayProp(val, defaultVal),
     // Improve performance: Keep object identify for a given hash of the value
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -352,10 +163,10 @@ 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] = require$$0.useState(null);
+  const $ = reactCompilerRuntime.c(12), elementsArg = t0 === void 0 ? EMPTY_ARRAY : t0, [element, setElement] = react.useState(null);
   let t1;
   $[0] !== element || $[1] !== elementsArg ? (t1 = () => _getElements(element, elementsArg), $[0] = element, $[1] = elementsArg, $[2] = t1) : t1 = $[2];
-  const [elements, setElements] = require$$0.useState(t1), elementsRef = require$$0.useRef(elements);
+  const [elements, setElements] = react.useState(t1), elementsRef = react.useRef(elements);
   let t2, t3;
   $[3] !== element || $[4] !== elementsArg ? (t2 = () => {
     const prevElements = elementsRef.current, nextElements = _getElements(element, elementsArg);
@@ -373,7 +184,7 @@ function useClickOutside(listener, t0, boundaryElement) {
         setElements(nextElements), elementsRef.current = nextElements;
         return;
       }
-  }, t3 = [element, elementsArg], $[3] = element, $[4] = elementsArg, $[5] = t2, $[6] = t3) : (t2 = $[5], t3 = $[6]), require$$0.useEffect(t2, t3);
+  }, t3 = [element, elementsArg], $[3] = element, $[4] = elementsArg, $[5] = t2, $[6] = t3) : (t2 = $[5], t3 = $[6]), react.useEffect(t2, t3);
   let t4, t5;
   return $[7] !== listener || $[8] !== boundaryElement || $[9] !== elements ? (t4 = () => {
     if (!listener)
@@ -390,10 +201,10 @@ function useClickOutside(listener, t0, boundaryElement) {
     return window.addEventListener("mousedown", handleWindowMouseDown), () => {
       window.removeEventListener("mousedown", handleWindowMouseDown);
     };
-  }, t5 = [boundaryElement, listener, elements], $[7] = listener, $[8] = boundaryElement, $[9] = elements, $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]), require$$0.useEffect(t4, t5), setElement;
+  }, t5 = [boundaryElement, listener, elements], $[7] = listener, $[8] = boundaryElement, $[9] = elements, $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]), react.useEffect(t4, t5), setElement;
 }
 function useClickOutsideEvent(listener, t0, boundaryElement) {
-  const $ = distExports.c(8), elementsArg = t0 === void 0 ? _temp$5 : t0;
+  const $ = reactCompilerRuntime.c(8), elementsArg = t0 === void 0 ? _temp$5 : t0;
   let t1;
   $[0] !== listener || $[1] !== boundaryElement || $[2] !== elementsArg ? (t1 = (evt) => {
     if (!listener)
@@ -419,19 +230,19 @@ function useClickOutsideEvent(listener, t0, boundaryElement) {
     return document.addEventListener("mousedown", handleEvent), () => {
       document.removeEventListener("mousedown", handleEvent);
     };
-  }, t3 = [hasListener, onEvent], $[4] = hasListener, $[5] = onEvent, $[6] = t2, $[7] = t3) : (t2 = $[6], t3 = $[7]), require$$0.useEffect(t2, t3), require$$0.useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
+  }, t3 = [hasListener, onEvent], $[4] = hasListener, $[5] = onEvent, $[6] = t2, $[7] = t3) : (t2 = $[6], t3 = $[7]), react.useEffect(t2, t3), react.useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
 }
 function _temp$5() {
   return EMPTY_ARRAY;
 }
 function useCustomValidity(ref, customValidity) {
-  const $ = distExports.c(6);
+  const $ = reactCompilerRuntime.c(6);
   let t0;
   $[0] !== ref.current || $[1] !== customValidity ? (t0 = () => {
     ref.current?.setCustomValidity(customValidity || "");
   }, $[0] = ref.current, $[1] = customValidity, $[2] = t0) : t0 = $[2];
   let t1;
-  $[3] !== customValidity || $[4] !== ref ? (t1 = [customValidity, ref], $[3] = customValidity, $[4] = ref, $[5] = t1) : t1 = $[5], require$$0.useEffect(t0, t1);
+  $[3] !== customValidity || $[4] !== ref ? (t1 = [customValidity, ref], $[3] = customValidity, $[4] = ref, $[5] = t1) : t1 = $[5], react.useEffect(t0, t1);
 }
 var resizeObservers = [], hasActiveObservations = function() {
   return resizeObservers.some(function(ro) {
@@ -757,31 +568,31 @@ function _createElementSizeObserver() {
   };
 }
 function useElementSize(element) {
-  const $ = distExports.c(3), [size2, setSize] = require$$0.useState(null);
+  const $ = reactCompilerRuntime.c(3), [size2, setSize] = react.useState(null);
   let t0, t1;
   return $[0] !== element ? (t0 = () => {
     if (element)
       return _elementSizeObserver.subscribe(element, setSize);
-  }, t1 = [element], $[0] = element, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), require$$0.useEffect(t0, t1), size2;
+  }, t1 = [element], $[0] = element, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), react.useEffect(t0, t1), size2;
 }
 function useElementRect(element) {
   return useElementSize(element)?._contentRect || null;
 }
 function useForwardedRef(ref) {
-  const $ = distExports.c(1), innerRef = require$$0.useRef(null);
+  const $ = reactCompilerRuntime.c(1), innerRef = react.useRef(null);
   let t0;
-  return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => innerRef.current, $[0] = t0) : t0 = $[0], require$$0.useImperativeHandle(ref, t0), innerRef;
+  return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => innerRef.current, $[0] = t0) : t0 = $[0], react.useImperativeHandle(ref, t0), innerRef;
 }
 function useGlobalKeyDown(onKeyDown) {
-  const $ = distExports.c(3);
+  const $ = reactCompilerRuntime.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]), require$$0.useEffect(t0, t1);
+  return $[0] !== onKeyDown ? (t0 = () => (addEventListener("keydown", onKeyDown), () => removeEventListener("keydown", onKeyDown)), t1 = [onKeyDown], $[0] = onKeyDown, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), react.useEffect(t0, t1);
 }
 function useMatchMedia(mediaQueryString, getServerSnapshot2) {
   const {
     subscribe: subscribe2,
     getSnapshot
-  } = require$$0.useMemo(() => {
+  } = react.useMemo(() => {
     let MEDIA_QUERY_CACHE;
     const getMatchMedia = () => (MEDIA_QUERY_CACHE || (MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)), MEDIA_QUERY_CACHE);
     return {
@@ -792,7 +603,7 @@ function useMatchMedia(mediaQueryString, getServerSnapshot2) {
       getSnapshot: () => getMatchMedia().matches
     };
   }, [mediaQueryString]);
-  return require$$0.useDebugValue(mediaQueryString), require$$0.useSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
+  return react.useDebugValue(mediaQueryString), react.useSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
 }
 function getGlobalScope() {
   if (typeof globalThis < "u") return globalThis;
@@ -804,32 +615,32 @@ function getGlobalScope() {
 const globalScope = getGlobalScope();
 function createGlobalScopedContext(key2, defaultValue) {
   const symbol = Symbol.for(key2);
-  return typeof document > "u" ? require$$0.createContext(defaultValue) : (globalScope[symbol] = globalScope[symbol] || require$$0.createContext(defaultValue), globalScope[symbol]);
+  return typeof document > "u" ? react.createContext(defaultValue) : (globalScope[symbol] = globalScope[symbol] || react.createContext(defaultValue), globalScope[symbol]);
 }
 const ThemeContext = createGlobalScopedContext("@sanity/ui/context/theme", null);
 function ThemeProvider(props) {
-  const parentTheme = require$$0.useContext(ThemeContext), {
+  const parentTheme = react.useContext(ThemeContext), {
     children,
     scheme = parentTheme?.scheme || "light",
     theme: rootTheme = parentTheme?.theme || null,
     tone = parentTheme?.tone || "default"
-  } = props, themeContext = require$$0.useMemo(() => rootTheme ? {
+  } = props, themeContext = react.useMemo(() => rootTheme ? {
     version: 0,
     theme: rootTheme,
     scheme,
     tone
-  } : null, [rootTheme, scheme, tone]), theme$1 = require$$0.useMemo(() => rootTheme ? theme.getScopedTheme(rootTheme, scheme, tone) : null, [scheme, rootTheme, tone]);
+  } : null, [rootTheme, scheme, tone]), theme$1 = react.useMemo(() => rootTheme ? theme.getScopedTheme(rootTheme, scheme, tone) : null, [scheme, rootTheme, tone]);
   return theme$1 ? /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme: theme$1, children }) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
 }
 ThemeProvider.displayName = "ThemeProvider";
 function useRootTheme() {
-  const value = require$$0.useContext(ThemeContext);
+  const value = react.useContext(ThemeContext);
   if (!value)
     throw new Error("useRootTheme(): missing context value");
   return value;
 }
 function ThemeColorProvider(props) {
-  const $ = distExports.c(5), {
+  const $ = reactCompilerRuntime.c(5), {
     children,
     scheme,
     tone
@@ -842,7 +653,7 @@ function useTheme() {
   return styledComponents.useTheme();
 }
 function useTheme_v2() {
-  const $ = distExports.c(2), t0 = styledComponents.useTheme();
+  const $ = reactCompilerRuntime.c(2), t0 = styledComponents.useTheme();
   let t1;
   return $[0] !== t0 ? (t1 = theme.getTheme_v2(t0), $[0] = t0, $[1] = t1) : t1 = $[1], t1;
 }
@@ -895,13 +706,13 @@ function getServerSnapshot() {
   return 0;
 }
 function useMediaIndex() {
-  const $ = distExports.c(2), {
+  const $ = reactCompilerRuntime.c(2), {
     media
   } = useTheme_v2();
   let t0, t1;
   $[0] !== media ? (t1 = _createMediaStore(media), $[0] = media, $[1] = t1) : t1 = $[1], t0 = t1;
   const store = t0;
-  return require$$0.useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
+  return react.useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
 }
 function usePrefersDark(t0) {
   return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$4 : t0);
@@ -1626,8 +1437,8 @@ const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAl
   text-overflow: ellipsis;
   overflow: hidden;
   overflow: clip;
-`, Label = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(22);
+`, Label = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(22);
   let t0, t1, childrenProp, textOverflow, align, restProps, accent, weight;
   $[0] !== props ? ({
     accent,
@@ -1798,8 +1609,8 @@ function avatarStrokeStyle() {
 }
 const Root$B = styledComponents.styled.div(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = styledComponents.styled.div(avatarStyle.arrow), BgStroke = styledComponents.styled.ellipse(avatarStyle.bgStroke), Stroke = styledComponents.styled.ellipse(avatarStyle.stroke), Initials = styledComponents.styled.div(avatarStyle.initials), InitialsLabel = styledComponents.styled(Label)({
   color: "inherit"
-}), Image = styledComponents.styled.svg(avatarStyle.image), Avatar = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(53);
+}), Image = styledComponents.styled.svg(avatarStyle.image), Avatar = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(53);
   let t0, t1, t2, asProp, animateArrowFrom, arrowPositionProp, src, onImageLoadError, __unstable_hideInnerStroke, initials, restProps, title;
   $[0] !== props ? ({
     __unstable_hideInnerStroke,
@@ -1817,18 +1628,18 @@ const Root$B = styledComponents.styled.div(responsiveAvatarSizeStyle, avatarStyl
   } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = asProp, $[5] = animateArrowFrom, $[6] = arrowPositionProp, $[7] = src, $[8] = onImageLoadError, $[9] = __unstable_hideInnerStroke, $[10] = initials, $[11] = restProps, $[12] = title) : (t0 = $[1], t1 = $[2], t2 = $[3], asProp = $[4], animateArrowFrom = $[5], arrowPositionProp = $[6], src = $[7], onImageLoadError = $[8], __unstable_hideInnerStroke = $[9], initials = $[10], restProps = $[11], title = $[12]);
   const color = t0 === void 0 ? "gray" : t0, status = t1 === void 0 ? "online" : t1, sizeProp = t2 === void 0 ? 1 : t2, {
     avatar
-  } = useTheme_v2(), as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div", size2 = useArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = require$$0.useId(), [arrowPosition, setArrowPosition] = require$$0.useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = require$$0.useState(!1), imageId = `avatar-image-${elementId}`;
+  } = useTheme_v2(), as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div", size2 = useArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = react.useId(), [arrowPosition, setArrowPosition] = react.useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = react.useState(!1), imageId = `avatar-image-${elementId}`;
   let t3, t4;
   $[13] !== arrowPosition || $[14] !== arrowPositionProp ? (t3 = () => {
     if (arrowPosition === arrowPositionProp)
       return;
     const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp));
     return () => cancelAnimationFrame(raf);
-  }, t4 = [arrowPosition, arrowPositionProp], $[13] = arrowPosition, $[14] = arrowPositionProp, $[15] = t3, $[16] = t4) : (t3 = $[15], t4 = $[16]), require$$0.useEffect(t3, t4);
+  }, t4 = [arrowPosition, arrowPositionProp], $[13] = arrowPosition, $[14] = arrowPositionProp, $[15] = t3, $[16] = t4) : (t3 = $[15], t4 = $[16]), react.useEffect(t3, t4);
   let t5, t6;
   $[17] !== src ? (t5 = () => {
     src && setImageFailed(!1);
-  }, t6 = [src], $[17] = src, $[18] = t5, $[19] = t6) : (t5 = $[18], t6 = $[19]), require$$0.useEffect(t5, t6);
+  }, t6 = [src], $[17] = src, $[18] = t5, $[19] = t6) : (t5 = $[18], t6 = $[19]), react.useEffect(t5, t6);
   let t7;
   $[20] !== onImageLoadError ? (t7 = () => {
     setImageFailed(!0), onImageLoadError && onImageLoadError(new Error("Avatar: the image failed to load"));
@@ -1897,8 +1708,8 @@ function _avatarCounterBaseStyle(props) {
     }
   `;
 }
-const Root$A = styledComponents.styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(10), {
+const Root$A = styledComponents.styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(10), {
     count,
     size: t0
   } = props, size2 = useArrayProp(t0 === void 0 ? 1 : t0);
@@ -1944,24 +1755,24 @@ function responsiveAvatarStackSizeStyle(props) {
     } : EMPTY_RECORD;
   });
 }
-const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = require$$0.forwardRef(function(props, ref) {
+const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
   const {
     children: childrenProp,
     maxLength: maxLengthProp = 4,
     size: sizeProp = 1,
     ...restProps
-  } = props, children = require$$0.useMemo(() => require$$0.Children.toArray(childrenProp).filter(require$$0.isValidElement), [childrenProp]), maxLength = Math.max(maxLengthProp, 0), size2 = useArrayProp(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
+  } = props, children = react.useMemo(() => react.Children.toArray(childrenProp).filter(react.isValidElement), [childrenProp]), maxLength = Math.max(maxLengthProp, 0), size2 = useArrayProp(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
   return /* @__PURE__ */ jsxRuntime.jsxs(Root$z, { "data-ui": "AvatarStack", ...restProps, ref, $size: size2, children: [
     len === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: len, size: size2 }) }),
     len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) }),
-    visibleChildren.map((child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: require$$0.cloneElement(child, {
+    visibleChildren.map((child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.cloneElement(child, {
       size: size2
     }) }, String(childIndex)))
   ] });
 });
 AvatarStack.displayName = "ForwardRef(AvatarStack)";
-const Root$y = styledComponents.styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(59);
+const Root$y = styledComponents.styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.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,
@@ -2071,8 +1882,8 @@ const Root$x = styledComponents.styled.div(responsiveTextFont, responsiveTextAli
   text-overflow: ellipsis;
   overflow: hidden;
   overflow: clip;
-`, Text = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(22);
+`, Text = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(22);
   let t0, t1, t2, childrenProp, textOverflow, align, restProps, weight;
   $[0] !== props ? ({
     accent: t0,
@@ -2112,8 +1923,8 @@ function badgeStyle(props) {
     }
   };
 }
-const Root$w = styledComponents.styled(Box)(responsiveRadiusStyle, badgeStyle), Badge = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(17);
+const Root$w = styledComponents.styled(Box)(responsiveRadiusStyle, badgeStyle), Badge = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(17);
   let t0, t1, t2, t3, children, restProps;
   if ($[0] !== props) {
     const {
@@ -2135,8 +1946,8 @@ const Root$w = styledComponents.styled(Box)(responsiveRadiusStyle, badgeStyle),
   return $[10] !== restProps || $[11] !== tone || $[12] !== t4 || $[13] !== t5 || $[14] !== ref || $[15] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(Root$w, { "data-ui": "Badge", ...restProps, $tone: tone, $radius: t4, padding: t5, ref, children: t6 }), $[10] = restProps, $[11] = tone, $[12] = t4, $[13] = t5, $[14] = ref, $[15] = t6, $[16] = t7) : t7 = $[16], t7;
 });
 Badge.displayName = "ForwardRef(Badge)";
-const Root$v = styledComponents.styled(Box)(flexItemStyle, responsiveFlexStyle), Flex = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(17);
+const Root$v = styledComponents.styled(Box)(flexItemStyle, responsiveFlexStyle), Flex = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(17);
   let t0, align, gap, justify, wrap, restProps, as;
   $[0] !== props ? ({
     align,
@@ -2164,8 +1975,8 @@ const rotate$1 = styledComponents.keyframes`
   & > span > svg {
     animation: ${rotate$1} 500ms linear infinite;
   }
-`, Spinner = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(4);
+`, Spinner = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(4);
   let t0;
   $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsxRuntime.jsx(icons.SpinnerIcon, {}), $[0] = t0) : t0 = $[0];
   let t1;
@@ -2345,8 +2156,8 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
   border-radius: inherit;
   z-index: 1;
   box-shadow: inherit;
-`, Button = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(64);
+`, Button = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.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,
@@ -2394,12 +2205,12 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
   let t15;
   $[36] !== IconComponent || $[37] !== text || $[38] !== IconRightComponent || $[39] !== fontSize2 || $[40] !== muted || $[41] !== textAlign || $[42] !== button || $[43] !== justify || $[44] !== space || $[45] !== boxProps ? (t15 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", justify, gap: space, children: [
     IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-      require$$0.isValidElement(IconComponent) && IconComponent,
+      react.isValidElement(IconComponent) && IconComponent,
       ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
     ] }),
     text && /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, align: textAlign, size: fontSize2, textOverflow: "ellipsis", weight: button.textWeight, children: text }) }),
     IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-      require$$0.isValidElement(IconRightComponent) && IconRightComponent,
+      react.isValidElement(IconRightComponent) && IconRightComponent,
       ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
     ] })
   ] }) }), $[36] = IconComponent, $[37] = text, $[38] = IconRightComponent, $[39] = fontSize2, $[40] = muted, $[41] = textAlign, $[42] = button, $[43] = justify, $[44] = space, $[45] = boxProps, $[46] = t15) : t15 = $[46];
@@ -2561,8 +2372,8 @@ function cardColorStyle(props) {
     ${style?.card?.root}
   `;
 }
-const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(42);
+const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(42);
   let t0, t1, t2, t3, asProp, border2, borderTop2, borderRight2, borderBottom2, borderLeft2, shadow, pressed, selected, restProps, muted, scheme;
   $[0] !== props ? ({
     __unstable_checkered: t0,
@@ -2727,8 +2538,8 @@ function inputElementStyles(props) {
     }
   `;
 }
-const Root$r = styledComponents.styled.div(checkboxBaseStyles), Input$5 = styledComponents.styled.input(inputElementStyles), Checkbox = require$$0.forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(25);
+const Root$r = styledComponents.styled.div(checkboxBaseStyles), Input$5 = styledComponents.styled.input(inputElementStyles), Checkbox = react.forwardRef(function(props, forwardedRef) {
+  const $ = reactCompilerRuntime.c(25);
   let indeterminate, customValidity, disabled, readOnly, restProps, checked, className, style;
   $[0] !== props ? ({
     checked,
@@ -2740,13 +2551,13 @@ const Root$r = styledComponents.styled.div(checkboxBaseStyles), Input$5 = styled
     style,
     ...restProps
   } = props, $[0] = props, $[1] = indeterminate, $[2] = customValidity, $[3] = disabled, $[4] = readOnly, $[5] = restProps, $[6] = checked, $[7] = className, $[8] = style) : (indeterminate = $[1], customValidity = $[2], disabled = $[3], readOnly = $[4], restProps = $[5], checked = $[6], className = $[7], style = $[8]);
-  const ref = require$$0.useRef(null);
+  const ref = react.useRef(null);
   let t0;
-  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[9] = t0) : t0 = $[9], require$$0.useImperativeHandle(forwardedRef, t0);
+  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[9] = t0) : t0 = $[9], react.useImperativeHandle(forwardedRef, t0);
   let t1, t2;
   $[10] !== indeterminate ? (t1 = () => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
-  }, t2 = [indeterminate], $[10] = indeterminate, $[11] = t1, $[12] = t2) : (t1 = $[11], t2 = $[12]), require$$0.useEffect(t1, t2), useCustomValidity(ref, customValidity);
+  }, t2 = [indeterminate], $[10] = indeterminate, $[11] = t1, $[12] = t2) : (t1 = $[11], t2 = $[12]), react.useEffect(t1, t2), useCustomValidity(ref, customValidity);
   const t3 = !disabled && readOnly ? "" : void 0, t4 = customValidity ? "" : void 0, t5 = disabled || readOnly;
   let t6;
   $[13] !== t3 || $[14] !== t4 || $[15] !== restProps || $[16] !== checked || $[17] !== t5 || $[18] !== readOnly ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Input$5, { "data-read-only": t3, "data-error": t4, ...restProps, checked, disabled: t5, type: "checkbox", readOnly, ref }), $[13] = t3, $[14] = t4, $[15] = restProps, $[16] = checked, $[17] = t5, $[18] = readOnly, $[19] = t6) : t6 = $[19];
@@ -2910,8 +2721,8 @@ function codeBaseStyle() {
     }
   `;
 }
-const Root$q = styledComponents.styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(23);
+const Root$q = styledComponents.styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(23);
   let t0, languageProp, children, restProps, weight;
   $[0] !== props ? ({
     children,
@@ -2951,8 +2762,8 @@ function responsiveContainerWidthStyle(props) {
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
 }
-const Root$p = styledComponents.styled(Box)(containerBaseStyle, responsiveContainerWidthStyle), Container = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(9);
+const Root$p = styledComponents.styled(Box)(containerBaseStyle, responsiveContainerWidthStyle), Container = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(9);
   let t0, restProps, as;
   $[0] !== props ? ({
     as,
@@ -2964,8 +2775,8 @@ const Root$p = styledComponents.styled(Box)(containerBaseStyle, responsiveContai
   return $[4] !== restProps || $[5] !== t1 || $[6] !== as || $[7] !== ref ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(Root$p, { "data-ui": "Container", ...restProps, $width: t1, forwardedAs: as, ref }), $[4] = restProps, $[5] = t1, $[6] = as, $[7] = ref, $[8] = t2) : t2 = $[8], t2;
 });
 Container.displayName = "ForwardRef(Container)";
-const Root$o = styledComponents.styled(Box)(responsiveGridStyle), Grid = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(26);
+const Root$o = styledComponents.styled(Box)(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(26);
   let as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, restProps, children;
   $[0] !== props ? ({
     as,
@@ -3050,8 +2861,8 @@ const Root$n = styledComponents.styled.div(headingBaseStyle, responsiveTextAlign
   text-overflow: ellipsis;
   overflow: hidden;
   overflow: clip;
-`, Heading = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(22);
+`, Heading = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(22);
   let t0, t1, t2, childrenProp, textOverflow, align, restProps, weight;
   $[0] !== props ? ({
     accent: t0,
@@ -3103,8 +2914,8 @@ function inlineSpaceStyle(props) {
     };
   });
 }
-const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(13);
+const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(13);
   let childrenProp, space, restProps, as;
   $[0] !== props ? ({
     as,
@@ -3115,7 +2926,7 @@ const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle),
   let t0, t1;
   if ($[5] !== childrenProp) {
     let t22;
-    $[7] === Symbol.for("react.memo_cache_sentinel") ? (t22 = (child) => child && /* @__PURE__ */ jsxRuntime.jsx("div", { children: child }), $[7] = t22) : t22 = $[7], t1 = require$$0.Children.map(childrenProp, t22), $[5] = childrenProp, $[6] = t1;
+    $[7] === Symbol.for("react.memo_cache_sentinel") ? (t22 = (child) => child && /* @__PURE__ */ jsxRuntime.jsx("div", { children: child }), $[7] = t22) : t22 = $[7], t1 = react.Children.map(childrenProp, t22), $[5] = childrenProp, $[6] = t1;
   } else
     t1 = $[6];
   t0 = t1;
@@ -3141,8 +2952,8 @@ function kbdStyle() {
     }
   `;
 }
-const Root$l = styledComponents.styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(17);
+const Root$l = styledComponents.styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(17);
   let t0, t1, t2, children, restProps;
   $[0] !== props ? ({
     children,
@@ -3279,8 +3090,8 @@ const Root$k = styledComponents.styled.div(({
   stroke: var(--card-shadow-outline-color);
 `, ShapePath = styledComponents.styled.path`
   fill: var(--card-bg-color);
-`, Arrow = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(24);
+`, Arrow = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(24);
   let t0, w, h, restProps;
   $[0] !== props ? ({
     width: w,
@@ -3328,7 +3139,7 @@ const Root$k = styledComponents.styled.div(({
 Arrow.displayName = "ForwardRef(Arrow)";
 const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null);
 function BoundaryElementProvider(props) {
-  const $ = distExports.c(5), {
+  const $ = reactCompilerRuntime.c(5), {
     children,
     element
   } = props;
@@ -3350,7 +3161,7 @@ const DEFAULT_VALUE = {
   element: null
 };
 function useBoundaryElement() {
-  const value = require$$0.useContext(BoundaryElementContext);
+  const value = react.useContext(BoundaryElementContext);
   if (value && (!isRecord(value) || value.version !== 0))
     throw new Error("useBoundaryElement(): the context value is not compatible");
   return value || DEFAULT_VALUE;
@@ -3375,20 +3186,20 @@ function findMinBreakpoints(media, width) {
     media[i] <= width && ret.push(i);
   return ret;
 }
-const ElementQuery = require$$0.forwardRef(function(props, forwardedRef) {
+const ElementQuery = react.forwardRef(function(props, forwardedRef) {
   const theme2 = useTheme_v2(), {
     children,
     media = theme2.media,
     ...restProps
-  } = props, ref = require$$0.useRef(null), [element, setElement] = require$$0.useState(null), elementSize = useElementSize(element), width = require$$0.useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize]), max = require$$0.useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = require$$0.useMemo(() => findMinBreakpoints(media, width), [media, width]);
-  require$$0.useImperativeHandle(forwardedRef, () => ref.current);
-  const setRef = require$$0.useCallback((el) => {
+  } = props, ref = react.useRef(null), [element, setElement] = react.useState(null), elementSize = useElementSize(element), width = react.useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize]), max = react.useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = react.useMemo(() => findMinBreakpoints(media, width), [media, width]);
+  react.useImperativeHandle(forwardedRef, () => ref.current);
+  const setRef = react.useCallback((el) => {
     ref.current = el, setElement(el);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-ui": "ElementQuery", ...restProps, "data-eq-max": max.length ? max.join(" ") : void 0, "data-eq-min": min.length ? min.join(" ") : void 0, ref: setRef, children });
 });
 ElementQuery.displayName = "ForwardRef(ElementQuery)";
-class ErrorBoundary extends require$$0.Component {
+class ErrorBoundary extends react.Component {
   state = {
     error: null
   };
@@ -3425,7 +3236,7 @@ function getLayerContext(contextValue) {
 }
 const LayerContext = createGlobalScopedContext("@sanity/ui/context/layer", null);
 function useLayer() {
-  const $ = distExports.c(2), value = require$$0.useContext(LayerContext);
+  const $ = reactCompilerRuntime.c(2), value = react.useContext(LayerContext);
   if (!value)
     throw new Error("useLayer(): missing context value");
   try {
@@ -3515,7 +3326,7 @@ function LayerProvider(props) {
   const {
     children,
     zOffset: zOffsetProp = 0
-  } = props, parentContextValue = require$$0.useContext(LayerContext), parent = parentContextValue && getLayerContext(parentContextValue), parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1, zOffset = useArrayProp(zOffsetProp), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex], [, setChildLayers] = require$$0.useState({}), [size2, setSize] = require$$0.useState(0), isTopLayer = size2 === 0, registerChild = require$$0.useCallback((childLevel) => {
+  } = props, parentContextValue = react.useContext(LayerContext), parent = parentContextValue && getLayerContext(parentContextValue), parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1, zOffset = useArrayProp(zOffsetProp), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex], [, setChildLayers] = react.useState({}), [size2, setSize] = react.useState(0), isTopLayer = size2 === 0, registerChild = react.useCallback((childLevel) => {
     const parentDispose = parentRegisterChild?.(childLevel);
     return childLevel !== void 0 ? setChildLayers((state) => {
       const prevLen = state[childLevel] ?? 0, nextState = {
@@ -3532,8 +3343,8 @@ function LayerProvider(props) {
       }) : setSize((v_0) => v_0 - 1), parentDispose?.();
     };
   }, [parentRegisterChild]);
-  require$$0.useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild]);
-  const value = require$$0.useMemo(() => ({
+  react.useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild]);
+  const value = react.useMemo(() => ({
     version: 0,
     isTopLayer,
     level,
@@ -3546,8 +3357,8 @@ function LayerProvider(props) {
 LayerProvider.displayName = "LayerProvider";
 const Root$j = styledComponents.styled.div({
   position: "relative"
-}), LayerChildren = require$$0.forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(22);
+}), LayerChildren = react.forwardRef(function(props, forwardedRef) {
+  const $ = reactCompilerRuntime.c(22);
   let t0, onActivate, onFocus, restProps, children;
   $[0] !== props ? ({
     children,
@@ -3559,15 +3370,15 @@ const Root$j = styledComponents.styled.div({
   const style = t0 === void 0 ? EMPTY_RECORD : t0, {
     zIndex,
     isTopLayer
-  } = useLayer(), lastFocusedRef = require$$0.useRef(null), ref = require$$0.useRef(null), isTopLayerRef = require$$0.useRef(isTopLayer);
+  } = useLayer(), lastFocusedRef = react.useRef(null), ref = react.useRef(null), isTopLayerRef = react.useRef(isTopLayer);
   let t1;
-  $[6] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => ref.current, $[6] = t1) : t1 = $[6], require$$0.useImperativeHandle(forwardedRef, t1);
+  $[6] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => ref.current, $[6] = t1) : t1 = $[6], react.useImperativeHandle(forwardedRef, t1);
   let t2, t3;
   $[7] !== isTopLayer || $[8] !== onActivate ? (t2 = () => {
     isTopLayerRef.current !== isTopLayer && isTopLayer && onActivate?.({
       activeElement: lastFocusedRef.current
     }), isTopLayerRef.current = isTopLayer;
-  }, t3 = [isTopLayer, onActivate], $[7] = isTopLayer, $[8] = onActivate, $[9] = t2, $[10] = t3) : (t2 = $[9], t3 = $[10]), require$$0.useEffect(t2, t3);
+  }, t3 = [isTopLayer, onActivate], $[7] = isTopLayer, $[8] = onActivate, $[9] = t2, $[10] = t3) : (t2 = $[9], t3 = $[10]), react.useEffect(t2, t3);
   let t4;
   $[11] !== onFocus || $[12] !== isTopLayer ? (t4 = (event) => {
     onFocus?.(event);
@@ -3582,8 +3393,8 @@ const Root$j = styledComponents.styled.div({
   }, $[14] = style, $[15] = zIndex, $[16] = t5) : t5 = $[16];
   let t6;
   return $[17] !== restProps || $[18] !== handleFocus || $[19] !== t5 || $[20] !== children ? (t6 = /* @__PURE__ */ jsxRuntime.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 = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(11);
+}), Layer = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(11);
   let t0, restProps, children;
   $[0] !== props ? ({
     children,
@@ -3607,7 +3418,7 @@ const defaultContextValue = {
   }
 }, PortalContext = createGlobalScopedContext(key, defaultContextValue);
 function usePortal() {
-  const value = require$$0.useContext(PortalContext);
+  const value = react.useContext(PortalContext);
   if (!value)
     throw new Error("usePortal(): missing context value");
   if (!isRecord(value) || value.version !== 0)
@@ -3615,7 +3426,7 @@ function usePortal() {
   return value;
 }
 function Portal(props) {
-  const $ = distExports.c(3), {
+  const $ = reactCompilerRuntime.c(3), {
     children,
     __unstable_name: name
   } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
@@ -3626,12 +3437,12 @@ function Portal(props) {
 }
 Portal.displayName = "Portal";
 function PortalProvider(props) {
-  const $ = distExports.c(7), {
+  const $ = reactCompilerRuntime.c(7), {
     boundaryElement,
     children,
     element,
     __unstable_elements: elementsProp
-  } = props, elements = useUnique(elementsProp), fallbackElement = require$$0.useSyncExternalStore(emptySubscribe, _temp$2, _temp2$1);
+  } = props, elements = useUnique(elementsProp), fallbackElement = react.useSyncExternalStore(emptySubscribe, _temp$2, _temp2$1);
   let t0;
   const t1 = boundaryElement || null, t2 = element || fallbackElement;
   let t3;
@@ -3655,7 +3466,7 @@ PortalProvider.displayName = "PortalProvider";
 const emptySubscribe = () => () => {
 };
 function useUnique(value) {
-  const valueRef = require$$0.useRef(value);
+  const valueRef = react.useRef(value);
   return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
 }
 function _isEqual(objA, objB) {
@@ -3671,8 +3482,8 @@ const Root$i = styledComponents.styled.div`
   position: absolute;
   overflow: hidden;
   overflow: clip;
-`, SrOnly = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(4), {
+`, SrOnly = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(4), {
     as,
     children
   } = props;
@@ -3686,8 +3497,8 @@ const Root$h = styledComponents.styled.div`
   position: absolute;
   left: 0;
   right: 0;
-`, VirtualList = require$$0.forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(56);
+`, VirtualList = react.forwardRef(function(props, forwardedRef) {
+  const $ = reactCompilerRuntime.c(56);
   let t0, t1, t2, renderItem, onChange, getItemKey, restProps;
   $[0] !== props ? ({
     as: t0,
@@ -3703,9 +3514,9 @@ const Root$h = styledComponents.styled.div`
   $[8] !== t2 ? (t3 = t2 === void 0 ? [] : t2, $[8] = t2, $[9] = t3) : t3 = $[9];
   const items = t3, {
     space
-  } = useTheme_v2(), ref = require$$0.useRef(null), wrapperRef = require$$0.useRef(null), [scrollTop, setScrollTop] = require$$0.useState(0), [scrollHeight, setScrollHeight] = require$$0.useState(0), [itemHeight, setItemHeight] = require$$0.useState(-1);
+  } = useTheme_v2(), ref = react.useRef(null), wrapperRef = react.useRef(null), [scrollTop, setScrollTop] = react.useState(0), [scrollHeight, setScrollHeight] = react.useState(0), [itemHeight, setItemHeight] = react.useState(-1);
   let t4;
-  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[10] = t4) : t4 = $[10], require$$0.useImperativeHandle(forwardedRef, t4);
+  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[10] = t4) : t4 = $[10], react.useImperativeHandle(forwardedRef, t4);
   let t5;
   $[11] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => {
     if (!wrapperRef.current)
@@ -3714,7 +3525,7 @@ const Root$h = styledComponents.styled.div`
     firstElement instanceof HTMLElement && setItemHeight(firstElement.offsetHeight);
   }, $[11] = t5) : t5 = $[11];
   let t6;
-  $[12] !== renderItem ? (t6 = [renderItem], $[12] = renderItem, $[13] = t6) : t6 = $[13], require$$0.useEffect(t5, t6);
+  $[12] !== renderItem ? (t6 = [renderItem], $[12] = renderItem, $[13] = t6) : t6 = $[13], react.useEffect(t5, t6);
   let t7, t8;
   $[14] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => {
     if (!ref.current)
@@ -3749,7 +3560,7 @@ const Root$h = styledComponents.styled.div`
     }), window.addEventListener("resize", handleResize), setScrollHeight(window.innerHeight), handleScroll_0(), () => {
       window.removeEventListener("scroll", handleScroll_0), window.removeEventListener("resize", handleResize);
     };
-  }, t8 = [], $[14] = t7, $[15] = t8) : (t7 = $[14], t8 = $[15]), require$$0.useEffect(t7, t8);
+  }, t8 = [], $[14] = t7, $[15] = t8) : (t7 = $[14], t8 = $[15]), react.useEffect(t7, t8);
   const len = items.length, height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0, fromIndex = height ? Math.max(Math.floor(scrollTop / height * len) - 2, 0) : 0, toIndex = height ? Math.ceil((scrollTop + scrollHeight) / height * len) + 1 : 0;
   let t9, t10;
   $[16] !== onChange || $[17] !== fromIndex || $[18] !== space || $[19] !== gap || $[20] !== itemHeight || $[21] !== scrollHeight || $[22] !== scrollTop || $[23] !== toIndex ? (t9 = () => {
@@ -3761,7 +3572,7 @@ const Root$h = styledComponents.styled.div`
       scrollTop,
       toIndex
     });
-  }, t10 = [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex], $[16] = onChange, $[17] = fromIndex, $[18] = space, $[19] = gap, $[20] = itemHeight, $[21] = scrollHeight, $[22] = scrollTop, $[23] = toIndex, $[24] = t9, $[25] = t10) : (t9 = $[24], t10 = $[25]), require$$0.useEffect(t9, t10);
+  }, t10 = [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex], $[16] = onChange, $[17] = fromIndex, $[18] = space, $[19] = gap, $[20] = itemHeight, $[21] = scrollHeight, $[22] = scrollTop, $[23] = toIndex, $[24] = t9, $[25] = t10) : (t9 = $[24], t10 = $[25]), react.useEffect(t9, t10);
   let t11;
   bb0: {
     if (!renderItem || items.length === 0) {
@@ -3883,8 +3694,8 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
     opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
     will-change: opacity;
   }
-`, PopoverCard = require$$0.memo(require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(60);
+`, PopoverCard = react.memo(react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(60);
   let marginsProp, xProp, yProp, animate, originX, originY, strategy, style, width, arrowX, arrowY, restProps, padding, children, overflow, arrow, arrowRef, placement, radius, scheme, shadow, tone;
   $[0] !== props ? ({
     __unstable_margins: marginsProp,
@@ -3956,7 +3767,7 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
   ] }), $[48] = t8, $[49] = placement, $[50] = radius, $[51] = ref, $[52] = scheme, $[53] = shadow, $[54] = rootStyle2, $[55] = tone, $[56] = t9, $[57] = t11, $[58] = t12, $[59] = t13) : t13 = $[59], t13;
 }));
 PopoverCard.displayName = "Memo(ForwardRef(PopoverCard))";
-const Popover = require$$0.memo(require$$0.forwardRef(function(props, forwardedRef) {
+const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
   const {
     container,
     layer
@@ -3990,31 +3801,31 @@ const Popover = require$$0.memo(require$$0.forwardRef(function(props, forwardedR
     zOffset: zOffsetProp = layer.popover.zOffset,
     updateRef,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = require$$0.useRef(null), arrowRef = require$$0.useRef(null), rootBoundary = "viewport";
-  require$$0.useImperativeHandle(forwardedRef, () => ref.current);
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
+  react.useImperativeHandle(forwardedRef, () => ref.current);
   const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
     container,
     mediaIndex,
     width: widthArrayProp
-  }), widthRef = require$$0.useRef(width);
-  require$$0.useEffect(() => {
+  }), widthRef = react.useRef(width);
+  react.useEffect(() => {
     widthRef.current = width;
   }, [width]);
   const maxWidth = calcMaxWidth({
     boundaryWidth,
     currentWidth: width
-  }), maxWidthRef = require$$0.useRef(maxWidth);
-  require$$0.useEffect(() => {
+  }), maxWidthRef = react.useRef(maxWidth);
+  react.useEffect(() => {
     maxWidthRef.current = maxWidth;
   }, [maxWidth]);
-  const referenceWidthRef = require$$0.useRef();
-  require$$0.useEffect(() => {
+  const referenceWidthRef = react.useRef();
+  react.useEffect(() => {
     const floatingElement = ref.current;
     if (!open || !floatingElement) return;
     const referenceWidth = referenceWidthRef.current;
     matchReferenceWidth ? referenceWidth !== void 0 && (floatingElement.style.width = `${referenceWidth}px`) : width !== void 0 && (floatingElement.style.width = `${width}px`), typeof maxWidth == "number" && (floatingElement.style.maxWidth = `${maxWidth}px`);
   }, [width, matchReferenceWidth, maxWidth, open]);
-  const middleware = require$$0.useMemo(() => {
+  const middleware = react.useMemo(() => {
     const ret = [];
     return (constrainSize || preventOverflow) && ret.push(reactDom$1.flip({
       boundary: floatingBoundary || void 0,
@@ -4063,20 +3874,20 @@ const Popover = require$$0.memo(require$$0.forwardRef(function(props, forwardedR
     middleware,
     placement: placementProp,
     whileElementsMounted: reactDom$1.autoUpdate
-  }), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, setArrow = require$$0.useCallback((arrowEl) => {
+  }), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, setArrow = react.useCallback((arrowEl) => {
     arrowRef.current = arrowEl;
-  }, []), setFloating = require$$0.useCallback((node) => {
+  }, []), setFloating = react.useCallback((node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), setReference = require$$0.useCallback((node_0) => {
+  }, [refs]), setReference = react.useCallback((node_0) => {
     refs.setReference(node_0);
     const childRef = getElementRef(childProp);
     typeof childRef == "function" ? childRef(node_0) : childRef && (childRef.current = node_0);
-  }, [childProp, refs]), child = require$$0.useMemo(() => !childProp || referenceElement ? null : require$$0.cloneElement(childProp, {
+  }, [childProp, refs]), child = react.useMemo(() => !childProp || referenceElement ? null : react.cloneElement(childProp, {
     ref: setReference
   }), [childProp, referenceElement, setReference]);
-  if (require$$0.useEffect(() => {
+  if (react.useEffect(() => {
     updateRef && (typeof updateRef == "function" ? updateRef(update) : updateRef && (updateRef.current = update));
-  }, [update, updateRef]), require$$0.useEffect(() => {
+  }, [update, updateRef]), react.useEffect(() => {
     child || refs.setReference(referenceElement || null);
   }, [referenceElement, refs, child]), disabled)
     return childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
@@ -4108,7 +3919,7 @@ function inputElementStyle(props) {
   const {
     color,
     input
-  } = theme.getTheme_v2(props.theme), dist2 = (input.radio.size - input.radio.markSize) / 2;
+  } = theme.getTheme_v2(props.theme), dist = (input.radio.size - input.radio.markSize) / 2;
   return styledComponents.css`
     appearance: none;
     position: absolute;
@@ -4140,8 +3951,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)};
@@ -4205,8 +4016,8 @@ function inputElementStyle(props) {
     }
   `;
 }
-const Root$g = styledComponents.styled.div(radioBaseStyle), Input$4 = styledComponents.styled.input(inputElementStyle), Radio = require$$0.forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(19);
+const Root$g = styledComponents.styled.div(radioBaseStyle), Input$4 = styledComponents.styled.input(inputElementStyle), Radio = react.forwardRef(function(props, forwardedRef) {
+  const $ = reactCompilerRuntime.c(19);
   let customValidity, disabled, readOnly, restProps, className, style;
   $[0] !== props ? ({
     className,
@@ -4216,9 +4027,9 @@ const Root$g = styledComponents.styled.div(radioBaseStyle), Input$4 = styledComp
     readOnly,
     ...restProps
   } = props, $[0] = props, $[1] = customValidity, $[2] = disabled, $[3] = readOnly, $[4] = restProps, $[5] = className, $[6] = style) : (customValidity = $[1], disabled = $[2], readOnly = $[3], restProps = $[4], className = $[5], style = $[6]);
-  const ref = require$$0.useRef(null);
+  const ref = react.useRef(null);
   let t0;
-  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[7] = t0) : t0 = $[7], require$$0.useImperativeHandle(forwardedRef, t0), useCustomValidity(ref, customValidity);
+  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[7] = t0) : t0 = $[7], react.useImperativeHandle(forwardedRef, t0), useCustomValidity(ref, customValidity);
   const t1 = !disabled && readOnly ? "" : void 0, t2 = customValidity ? "" : void 0, t3 = disabled || readOnly;
   let t4;
   $[8] !== t1 || $[9] !== t2 || $[10] !== restProps || $[11] !== t3 || $[12] !== readOnly ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Input$4, { "data-read-only": t1, "data-error": t2, ...restProps, disabled: t3, readOnly, ref, type: "radio" }), $[8] = t1, $[9] = t2, $[10] = restProps, $[11] = t3, $[12] = readOnly, $[13] = t4) : t4 = $[13];
@@ -4373,8 +4184,8 @@ const selectStyle = {
   root: rootStyle,
   input: inputStyle,
   iconBox: iconBoxStyle
-}, Root$f = styledComponents.styled.div(selectStyle.root), Input$3 = styledComponents.styled.select(selectStyle.input), IconBox = styledComponents.styled(Box)(selectStyle.iconBox), Select = require$$0.forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(29);
+}, Root$f = styledComponents.styled.div(selectStyle.root), Input$3 = styledComponents.styled.select(selectStyle.input), IconBox = styledComponents.styled(Box)(selectStyle.iconBox), Select = react.forwardRef(function(props, forwardedRef) {
+  const $ = reactCompilerRuntime.c(29);
   let t0, t1, t2, t3, customValidity, disabled, readOnly, restProps, children;
   $[0] !== props ? ({
     children,
@@ -4387,9 +4198,9 @@ const selectStyle = {
     space: t3,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = customValidity, $[6] = disabled, $[7] = readOnly, $[8] = restProps, $[9] = children) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], customValidity = $[5], disabled = $[6], readOnly = $[7], restProps = $[8], children = $[9]);
-  const fontSize2 = t0 === void 0 ? 2 : t0, padding = t1 === void 0 ? 3 : t1, radius = t2 === void 0 ? 2 : t2, space = t3 === void 0 ? 3 : t3, ref = require$$0.useRef(null);
+  const fontSize2 = t0 === void 0 ? 2 : t0, padding = t1 === void 0 ? 3 : t1, radius = t2 === void 0 ? 2 : t2, space = t3 === void 0 ? 3 : t3, ref = react.useRef(null);
   let t4;
-  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[10] = t4) : t4 = $[10], require$$0.useImperativeHandle(forwardedRef, t4), useCustomValidity(ref, customValidity);
+  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[10] = t4) : t4 = $[10], react.useImperativeHandle(forwardedRef, t4), useCustomValidity(ref, customValidity);
   const t5 = !disabled && readOnly ? "" : void 0, t6 = useArrayProp(fontSize2), t7 = useArrayProp(padding), t8 = useArrayProp(radius), t9 = useArrayProp(space), t10 = disabled || readOnly;
   let t11;
   $[11] !== t5 || $[12] !== restProps || $[13] !== t6 || $[14] !== t7 || $[15] !== t8 || $[16] !== t9 || $[17] !== t10 || $[18] !== children ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Input$3, { "data-read-only": t5, "data-ui": "Select", ...restProps, $fontSize: t6, $padding: t7, $radius: t8, $space: t9, disabled: t10, ref, children }), $[11] = t5, $[12] = restProps, $[13] = t6, $[14] = t7, $[15] = t8, $[16] = t9, $[17] = t10, $[18] = children, $[19] = t11) : t11 = $[19];
@@ -4428,8 +4239,8 @@ function responsiveStackSpaceStyle(props) {
     gridGap: rem(space[spaceIndex])
   }));
 }
-const Root$e = styledComponents.styled(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(10);
+const Root$e = styledComponents.styled(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(10);
   let as, space, restProps;
   $[0] !== props ? ({
     as,
@@ -4594,8 +4405,8 @@ function switchThumbStyles(props) {
     `}
   `;
 }
-const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledComponents.styled.input(switchInputStyles), Representation = styledComponents.styled.span(switchRepresentationStyles), Track = styledComponents.styled.span(switchTrackStyles), Thumb = styledComponents.styled.span(switchThumbStyles), Switch = require$$0.forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(26);
+const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledComponents.styled.input(switchInputStyles), Representation = styledComponents.styled.span(switchRepresentationStyles), Track = styledComponents.styled.span(switchTrackStyles), Thumb = styledComponents.styled.span(switchThumbStyles), Switch = react.forwardRef(function(props, forwardedRef) {
+  const $ = reactCompilerRuntime.c(26);
   let indeterminate, disabled, readOnly, checked, restProps, className, style;
   $[0] !== props ? ({
     checked,
@@ -4606,13 +4417,13 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
     style,
     ...restProps
   } = props, $[0] = props, $[1] = indeterminate, $[2] = disabled, $[3] = readOnly, $[4] = checked, $[5] = restProps, $[6] = className, $[7] = style) : (indeterminate = $[1], disabled = $[2], readOnly = $[3], checked = $[4], restProps = $[5], className = $[6], style = $[7]);
-  const ref = require$$0.useRef(null);
+  const ref = react.useRef(null);
   let t0;
-  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[8] = t0) : t0 = $[8], require$$0.useImperativeHandle(forwardedRef, t0);
+  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[8] = t0) : t0 = $[8], react.useImperativeHandle(forwardedRef, t0);
   let t1, t2;
   $[9] !== indeterminate ? (t1 = () => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
-  }, t2 = [indeterminate], $[9] = indeterminate, $[10] = t1, $[11] = t2) : (t1 = $[10], t2 = $[11]), require$$0.useEffect(t1, t2);
+  }, t2 = [indeterminate], $[9] = indeterminate, $[10] = t1, $[11] = t2) : (t1 = $[10], t2 = $[11]), react.useEffect(t1, t2);
   const t3 = !disabled && readOnly ? "" : void 0, t4 = indeterminate !== !0 && checked, t5 = disabled || readOnly;
   let t6;
   $[12] !== t3 || $[13] !== restProps || $[14] !== t4 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Input$2, { "data-read-only": t3, ...restProps, checked: t4, disabled: t5, type: "checkbox", ref }), $[12] = t3, $[13] = restProps, $[14] = t4, $[15] = t5, $[16] = t6) : t6 = $[16];
@@ -4635,8 +4446,8 @@ const Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = s
   min-width: 0;
   display: block;
   position: relative;
-`, Input$1 = styledComponents.styled.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation$1 = styledComponents.styled.div(responsiveRadiusStyle, textInputRepresentationStyle), TextArea = require$$0.forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(29);
+`, Input$1 = styledComponents.styled.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation$1 = styledComponents.styled.div(responsiveRadiusStyle, textInputRepresentationStyle), TextArea = react.forwardRef(function(props, forwardedRef) {
+  const $ = reactCompilerRuntime.c(29);
   let t0, t1, t2, t3, t4, customValidity, restProps, weight, __unstable_disableFocusRing;
   $[0] !== props ? ({
     border: t0,
@@ -4649,9 +4460,9 @@ const Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = s
     __unstable_disableFocusRing,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = customValidity, $[7] = restProps, $[8] = weight, $[9] = __unstable_disableFocusRing) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], customValidity = $[6], restProps = $[7], weight = $[8], __unstable_disableFocusRing = $[9]);
-  const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSize2 = t2 === void 0 ? 2 : t2, padding = t3 === void 0 ? 3 : t3, radius = t4 === void 0 ? 2 : t4, ref = require$$0.useRef(null), rootTheme = useRootTheme();
+  const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSize2 = t2 === void 0 ? 2 : t2, padding = t3 === void 0 ? 3 : t3, radius = t4 === void 0 ? 2 : t4, ref = react.useRef(null), rootTheme = useRootTheme();
   let t5;
-  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[10] = t5) : t5 = $[10], require$$0.useImperativeHandle(forwardedRef, t5), useCustomValidity(ref, customValidity);
+  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[10] = t5) : t5 = $[10], react.useImperativeHandle(forwardedRef, t5), useCustomValidity(ref, customValidity);
   const t6 = rootTheme.scheme, t7 = rootTheme.tone, t8 = useArrayProp(fontSize2), t9 = useArrayProp(padding), t10 = rootTheme.scheme, t11 = useArrayProp(0);
   let t12;
   $[11] !== rootTheme.scheme || $[12] !== rootTheme.tone || $[13] !== restProps || $[14] !== t8 || $[15] !== t9 || $[16] !== t11 || $[17] !== weight || $[18] !== disabled ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(Input$1, { "data-as": "textarea", "data-scheme": t6, "data-tone": t7, ...restProps, $fontSize: t8, $padding: t9, $scheme: t10, $space: t11, $tone: rootTheme.tone, $weight: weight, disabled, ref }), $[11] = rootTheme.scheme, $[12] = rootTheme.tone, $[13] = restProps, $[14] = t8, $[15] = t9, $[16] = t11, $[17] = weight, $[18] = disabled, $[19] = t12) : t12 = $[19];
@@ -4711,8 +4522,8 @@ const CLEAR_BUTTON_BOX_STYLE = {
   "&:not([hidden])": {
     display: "block"
   }
-}), TextInput = require$$0.forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(86);
+}), TextInput = react.forwardRef(function(props, forwardedRef) {
+  const $ = reactCompilerRuntime.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,
@@ -4734,9 +4545,9 @@ const CLEAR_BUTTON_BOX_STYLE = {
     weight,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = t6, $[8] = clearButton, $[9] = IconComponent, $[10] = IconRightComponent, $[11] = suffix, $[12] = prefix, $[13] = customValidity, $[14] = onClear, $[15] = __unstable_disableFocusRing, $[16] = readOnly, $[17] = restProps, $[18] = weight) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], t6 = $[7], clearButton = $[8], IconComponent = $[9], IconRightComponent = $[10], suffix = $[11], prefix = $[12], customValidity = $[13], onClear = $[14], __unstable_disableFocusRing = $[15], readOnly = $[16], restProps = $[17], weight = $[18]);
-  const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSizeProp = t2 === void 0 ? 2 : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, type = t6 === void 0 ? "text" : t6, ref = require$$0.useRef(null), rootTheme = useRootTheme(), fontSize2 = useArrayProp(fontSizeProp), padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp), $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
+  const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSizeProp = t2 === void 0 ? 2 : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, type = t6 === void 0 ? "text" : t6, ref = react.useRef(null), rootTheme = useRootTheme(), fontSize2 = useArrayProp(fontSizeProp), padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp), $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
   let t7;
-  $[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], require$$0.useImperativeHandle(forwardedRef, t7), useCustomValidity(ref, customValidity);
+  $[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], react.useImperativeHandle(forwardedRef, t7), useCustomValidity(ref, customValidity);
   const handleClearMouseDown = _temp$1;
   let t8;
   $[20] !== onClear ? (t8 = (event_0) => {
@@ -4750,12 +4561,12 @@ const CLEAR_BUTTON_BOX_STYLE = {
   const t12 = border2 ? "" : void 0;
   let t13;
   $[25] !== IconComponent || $[26] !== fontSize2 || $[27] !== padding ? (t13 = IconComponent && /* @__PURE__ */ jsxRuntime.jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-    require$$0.isValidElement(IconComponent) && IconComponent,
+    react.isValidElement(IconComponent) && IconComponent,
     ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
   ] }) }), $[25] = IconComponent, $[26] = fontSize2, $[27] = padding, $[28] = t13) : t13 = $[28];
   let t14;
   $[29] !== $hasClearButton || $[30] !== IconRightComponent || $[31] !== fontSize2 || $[32] !== padding ? (t14 = !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsxRuntime.jsx(RightBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-    require$$0.isValidElement(IconRightComponent) && IconRightComponent,
+    react.isValidElement(IconRightComponent) && IconRightComponent,
     ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
   ] }) }), $[29] = $hasClearButton, $[30] = IconRightComponent, $[31] = fontSize2, $[32] = padding, $[33] = t14) : t14 = $[33];
   let t15;
@@ -4809,7 +4620,7 @@ function _temp$1(event) {
   event.preventDefault(), event.stopPropagation();
 }
 function useDelayedState(initialState) {
-  const $ = distExports.c(3), [state, setState] = require$$0.useState(initialState), delayedAction = require$$0.useRef();
+  const $ = reactCompilerRuntime.c(3), [state, setState] = react.useState(initialState), delayedAction = react.useRef();
   let t0;
   $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = (nextState, delay) => {
     const action = () => {
@@ -4841,8 +4652,8 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
     opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
     will-change: opacity;
   }
-`, TooltipCard = require$$0.memo(require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(42);
+`, TooltipCard = react.memo(react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(42);
   let animate, originX, originY, style, arrowX, arrowY, restProps, arrow, arrowRef, placement, padding, radius, scheme, shadow, children;
   $[0] !== props ? ({
     animate,
@@ -4894,10 +4705,10 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
 TooltipCard.displayName = "Memo(ForwardRef(TooltipCard))";
 const TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/tooltipDelayGroup", null);
 function useTooltipDelayGroup() {
-  return require$$0.useContext(TooltipDelayGroupContext);
+  return react.useContext(TooltipDelayGroupContext);
 }
 function TooltipDelayGroupProvider(props) {
-  const $ = distExports.c(10), {
+  const $ = reactCompilerRuntime.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;
@@ -4919,7 +4730,7 @@ function TooltipDelayGroupProvider(props) {
 TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
 const Root$a = styledComponents.styled(Layer)`
   pointer-events: none;
-`, Tooltip = require$$0.forwardRef(function(props, forwardedRef) {
+`, Tooltip = react.forwardRef(function(props, forwardedRef) {
   const boundaryElementContext = useBoundaryElement(), {
     layer
   } = useTheme_v2(), {
@@ -4939,9 +4750,9 @@ const Root$a = styledComponents.styled(Layer)`
     zOffset = layer.tooltip.zOffset,
     delay,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = require$$0.useRef(null), [referenceElement, setReferenceElement] = require$$0.useState(null), arrowRef = require$$0.useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = require$$0.useState(0);
-  require$$0.useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = require$$0.useMemo(() => {
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
+  react.useImperativeHandle(forwardedRef, () => ref.current);
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = react.useMemo(() => {
     const ret = [];
     return ret.push(reactDom$1.flip({
       boundary: boundaryElement || void 0,
@@ -4968,7 +4779,7 @@ const Root$a = styledComponents.styled(Layer)`
     middleware,
     placement: placementProp,
     whileElementsMounted: reactDom$1.autoUpdate
-  }), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = require$$0.useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = require$$0.useCallback((open, immediate) => {
+  }), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = react.useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = react.useCallback((open, immediate) => {
     if (isInsideGroup)
       if (open) {
         const groupedOpenDelay = immediate ? 0 : openDelay;
@@ -4979,28 +4790,28 @@ const Root$a = styledComponents.styled(Layer)`
       }
     else
       setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
-  }, [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]), handleBlur = require$$0.useCallback((e) => {
+  }, [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]), handleBlur = react.useCallback((e) => {
     handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
-  }, [childProp?.props, handleIsOpenChange]), handleClick = require$$0.useCallback((e_0) => {
+  }, [childProp?.props, handleIsOpenChange]), handleClick = react.useCallback((e_0) => {
     handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
-  }, [childProp?.props, handleIsOpenChange]), handleContextMenu = require$$0.useCallback((e_1) => {
+  }, [childProp?.props, handleIsOpenChange]), handleContextMenu = react.useCallback((e_1) => {
     handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
-  }, [childProp?.props, handleIsOpenChange]), handleFocus = require$$0.useCallback((e_2) => {
+  }, [childProp?.props, handleIsOpenChange]), handleFocus = react.useCallback((e_2) => {
     handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseEnter = require$$0.useCallback((e_3) => {
+  }, [childProp?.props, handleIsOpenChange]), handleMouseEnter = react.useCallback((e_3) => {
     handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseLeave = require$$0.useCallback((e_4) => {
+  }, [childProp?.props, handleIsOpenChange]), handleMouseLeave = react.useCallback((e_4) => {
     handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
   }, [childProp?.props, handleIsOpenChange]);
   useCloseOnMouseLeave({
     handleIsOpenChange,
     referenceElement,
     showTooltip
-  }), require$$0.useEffect(() => {
+  }), react.useEffect(() => {
     disabled && showTooltip && handleIsOpenChange(!1);
-  }, [disabled, handleIsOpenChange, showTooltip]), require$$0.useEffect(() => {
+  }, [disabled, handleIsOpenChange, showTooltip]), react.useEffect(() => {
     !content && showTooltip && handleIsOpenChange(!1);
-  }, [content, handleIsOpenChange, showTooltip]), require$$0.useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]), require$$0.useEffect(() => {
+  }, [content, handleIsOpenChange, showTooltip]), react.useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]), react.useEffect(() => {
     if (!showTooltip) return;
     function handleWindowKeyDown(event) {
       event.key === "Escape" && handleIsOpenChange(!1, !0);
@@ -5008,17 +4819,17 @@ const Root$a = styledComponents.styled(Layer)`
     return window.addEventListener("keydown", handleWindowKeyDown), () => {
       window.removeEventListener("keydown", handleWindowKeyDown);
     };
-  }, [handleIsOpenChange, showTooltip]), require$$0.useLayoutEffect(() => {
+  }, [handleIsOpenChange, showTooltip]), react.useLayoutEffect(() => {
     const availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
     setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
   }, [boundaryElement, portalElement]);
-  const setArrow = require$$0.useCallback((arrowEl) => {
+  const setArrow = react.useCallback((arrowEl) => {
     arrowRef.current = arrowEl, update();
-  }, [update]), setFloating = require$$0.useCallback((node) => {
+  }, [update]), setFloating = react.useCallback((node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), childRef = require$$0.useRef(null);
-  require$$0.useImperativeHandle(childProp?.ref, () => childRef.current);
-  const child = require$$0.useMemo(() => childProp ? require$$0.cloneElement(childProp, {
+  }, [refs]), childRef = react.useRef(null);
+  react.useImperativeHandle(childProp?.ref, () => childRef.current);
+  const child = react.useMemo(() => childProp ? react.cloneElement(childProp, {
     onBlur: handleBlur,
     onFocus: handleFocus,
     onMouseEnter: handleMouseEnter,
@@ -5027,7 +4838,7 @@ const Root$a = styledComponents.styled(Layer)`
     onContextMenu: handleContextMenu,
     ref: childRef
   }) : null, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave]);
-  if (require$$0.useEffect(() => {
+  if (react.useEffect(() => {
     if (child)
       return setReferenceElement(childRef.current), () => setReferenceElement(null);
   }, [child]), !child) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
@@ -5043,7 +4854,7 @@ const Root$a = styledComponents.styled(Layer)`
 });
 Tooltip.displayName = "ForwardRef(Tooltip)";
 function useCloseOnMouseLeave(t0) {
-  const $ = distExports.c(7), {
+  const $ = reactCompilerRuntime.c(7), {
     handleIsOpenChange,
     referenceElement,
     showTooltip
@@ -5061,7 +4872,7 @@ function useCloseOnMouseLeave(t0) {
       onMouseMove(event.target, () => window.removeEventListener("mousemove", handleMouseMove));
     };
     return window.addEventListener("mousemove", handleMouseMove), () => window.removeEventListener("mousemove", handleMouseMove);
-  }, t3 = [onMouseMove, showTooltip], $[3] = showTooltip, $[4] = onMouseMove, $[5] = t2, $[6] = t3) : (t2 = $[5], t3 = $[6]), require$$0.useEffect(t2, t3);
+  }, t3 = [onMouseMove, showTooltip], $[3] = showTooltip, $[4] = onMouseMove, $[5] = t2, $[6] = t3) : (t2 = $[5], t3 = $[6]), react.useEffect(t2, t3);
 }
 const Root$9 = styledComponents.styled.div`
   line-height: 0;
@@ -5083,7 +4894,7 @@ const Root$9 = styledComponents.styled.div`
   animation: ${rotate} 500ms linear infinite;
 `;
 function AutocompleteOption(props) {
-  const $ = distExports.c(11), {
+  const $ = reactCompilerRuntime.c(11), {
     children,
     id,
     onSelect,
@@ -5144,7 +4955,7 @@ function autocompleteReducer(state, msg2) {
     value: msg2.value
   } : state;
 }
-const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "Home", "End", "PageUp", "PageDown", "Meta", "Tab", "CapsLock"], AUTOCOMPLETE_POPOVER_PLACEMENT = "bottom-start", AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ["bottom-start", "top-start"], DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value, DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1, InnerAutocomplete = require$$0.forwardRef(function(props, forwardedRef) {
+const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "Home", "End", "PageUp", "PageDown", "Meta", "Tab", "CapsLock"], AUTOCOMPLETE_POPOVER_PLACEMENT = "bottom-start", AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ["bottom-start", "top-start"], DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value, DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1, InnerAutocomplete = react.forwardRef(function(props, forwardedRef) {
   const {
     border: border2 = !0,
     customValidity,
@@ -5175,7 +4986,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
     suffix,
     value: valueProp,
     ...restProps
-  } = props, [state, dispatch] = require$$0.useReducer(autocompleteReducer, {
+  } = props, [state, dispatch] = react.useReducer(autocompleteReducer, {
     activeValue: valueProp || null,
     focused: !1,
     listFocused: !1,
@@ -5187,11 +4998,11 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
     listFocused,
     query,
     value
-  } = state, defaultRenderOption = require$$0.useCallback(({
+  } = state, defaultRenderOption = react.useCallback(({
     value: value_0
-  }) => /* @__PURE__ */ jsxRuntime.jsx(Card, { "data-as": "button", padding: paddingProp, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", children: value_0 }) }), [fontSize2, paddingProp]), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = require$$0.useRef(null), resultsPopoverElementRef = require$$0.useRef(null), inputElementRef = require$$0.useRef(null), listBoxElementRef = require$$0.useRef(null), listFocusedRef = require$$0.useRef(!1), valueRef = require$$0.useRef(value), valuePropRef = require$$0.useRef(valueProp), popoverMouseWithinRef = require$$0.useRef(!1);
-  require$$0.useImperativeHandle(forwardedRef, () => inputElementRef.current);
-  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useArrayProp(paddingProp), currentOption = require$$0.useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = require$$0.useMemo(() => options.filter((option) => query ? filterOption(query, option) : !0), [filterOption, options, query]), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = require$$0.useCallback((event) => {
+  }) => /* @__PURE__ */ jsxRuntime.jsx(Card, { "data-as": "button", padding: paddingProp, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", children: value_0 }) }), [fontSize2, paddingProp]), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = react.useRef(null), resultsPopoverElementRef = react.useRef(null), inputElementRef = react.useRef(null), listBoxElementRef = react.useRef(null), listFocusedRef = react.useRef(!1), valueRef = react.useRef(value), valuePropRef = react.useRef(valueProp), popoverMouseWithinRef = react.useRef(!1);
+  react.useImperativeHandle(forwardedRef, () => inputElementRef.current);
+  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useArrayProp(paddingProp), currentOption = react.useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = react.useMemo(() => options.filter((option) => query ? filterOption(query, option) : !0), [filterOption, options, query]), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = react.useCallback((event) => {
     setTimeout(() => {
       if (popoverMouseWithinRef.current)
         return;
@@ -5208,18 +5019,18 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
         type: "root/blur"
       }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), onBlur && onBlur(event));
     }, 0);
-  }, [onBlur, onQueryChange, relatedElements]), handleRootFocus = require$$0.useCallback((event_0) => {
+  }, [onBlur, onQueryChange, relatedElements]), handleRootFocus = react.useCallback((event_0) => {
     const listBoxElement = listBoxElementRef.current, focusedElement = event_0.target instanceof HTMLElement ? event_0.target : null, listFocused_0 = listBoxElement?.contains(focusedElement) || !1;
     listFocused_0 !== listFocusedRef.current && (listFocusedRef.current = listFocused_0, dispatch({
       type: "root/setListFocused",
       listFocused: listFocused_0
     }));
-  }, []), handleOptionSelect = require$$0.useCallback((v) => {
+  }, []), handleOptionSelect = react.useCallback((v) => {
     dispatch({
       type: "value/change",
       value: v
     }), popoverMouseWithinRef.current = !1, onSelect && onSelect(v), valueRef.current = v, onChange && onChange(v), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
-  }, [onChange, onSelect, onQueryChange]), handleRootKeyDown = require$$0.useCallback((event_1) => {
+  }, [onChange, onSelect, onQueryChange]), handleRootKeyDown = react.useCallback((event_1) => {
     if (event_1.key === "ArrowDown") {
       if (event_1.preventDefault(), !filteredOptionsLen) return;
       const activeOption = filteredOptions.find((o_0) => o_0.value === activeValue), activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1, nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen];
@@ -5251,35 +5062,35 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
       inputElementRef.current?.focus();
       return;
     }
-  }, [activeValue, filteredOptions, filteredOptionsLen, onQueryChange]), handleInputChange = require$$0.useCallback((event_2) => {
+  }, [activeValue, filteredOptions, filteredOptionsLen, onQueryChange]), handleInputChange = react.useCallback((event_2) => {
     const nextQuery = event_2.currentTarget.value;
     dispatch({
       type: "input/change",
       query: nextQuery
     }), onQueryChange && onQueryChange(nextQuery);
-  }, [onQueryChange]), dispatchOpen = require$$0.useCallback(() => {
+  }, [onQueryChange]), dispatchOpen = react.useCallback(() => {
     dispatch({
       type: "root/open",
       query: value ? renderValue(value, currentOption) : ""
     });
-  }, [currentOption, renderValue, value]), handleInputFocus = require$$0.useCallback((event_3) => {
+  }, [currentOption, renderValue, value]), handleInputFocus = react.useCallback((event_3) => {
     focused || (dispatch({
       type: "input/focus"
     }), onFocus && onFocus(event_3), openOnFocus && dispatchOpen());
-  }, [focused, onFocus, openOnFocus, dispatchOpen]), handlePopoverMouseEnter = require$$0.useCallback(() => {
+  }, [focused, onFocus, openOnFocus, dispatchOpen]), handlePopoverMouseEnter = react.useCallback(() => {
     popoverMouseWithinRef.current = !0;
-  }, []), handlePopoverMouseLeave = require$$0.useCallback(() => {
+  }, []), handlePopoverMouseLeave = react.useCallback(() => {
     popoverMouseWithinRef.current = !1;
-  }, []), handleClearButtonClick = require$$0.useCallback(() => {
+  }, []), handleClearButtonClick = react.useCallback(() => {
     dispatch({
       type: "root/clear"
     }), valueRef.current = "", onChange && onChange(""), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
-  }, [onChange, onQueryChange]), handleClearButtonFocus = require$$0.useCallback(() => {
+  }, [onChange, onQueryChange]), handleClearButtonFocus = react.useCallback(() => {
     dispatch({
       type: "input/focus"
     });
   }, []);
-  require$$0.useEffect(() => {
+  react.useEffect(() => {
     if (valueProp !== valuePropRef.current) {
       valuePropRef.current = valueProp, valueProp !== void 0 && (dispatch({
         type: "value/change",
@@ -5291,12 +5102,12 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
       type: "value/change",
       value: valueProp || null
     }));
-  }, [valueProp]), require$$0.useEffect(() => {
+  }, [valueProp]), react.useEffect(() => {
     !focused && valueRef.current && dispatch({
       type: "root/setActiveValue",
       value: valueRef.current
     });
-  }, [focused]), require$$0.useEffect(() => {
+  }, [focused]), react.useEffect(() => {
     const listElement = listBoxElementRef.current;
     if (!listElement) return;
     const activeOption_1 = filteredOptions.find((o_2) => o_2.value === activeValue);
@@ -5309,24 +5120,24 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
       }
     }
   }, [activeValue, filteredOptions]);
-  const clearButton = require$$0.useMemo(() => {
+  const clearButton = react.useMemo(() => {
     if (!loading && !disabled && value)
       return {
         "aria-label": "Clear",
         onFocus: handleClearButtonFocus
       };
-  }, [disabled, handleClearButtonFocus, loading, value]), openButtonBoxPadding = require$$0.useMemo(() => padding.map((v_0) => v_0 === 0 ? 0 : v_0 === 1 || v_0 === 2 ? 1 : v_0 - 2), [padding]), openButtonPadding = require$$0.useMemo(() => padding.map((v_1) => Math.max(v_1 - 1, 0)), [padding]), openButtonProps = require$$0.useMemo(() => typeof openButton == "object" ? openButton : EMPTY_RECORD, [openButton]), handleOpenClick = require$$0.useCallback((event_4) => {
+  }, [disabled, handleClearButtonFocus, loading, value]), openButtonBoxPadding = react.useMemo(() => padding.map((v_0) => v_0 === 0 ? 0 : v_0 === 1 || v_0 === 2 ? 1 : v_0 - 2), [padding]), openButtonPadding = react.useMemo(() => padding.map((v_1) => Math.max(v_1 - 1, 0)), [padding]), openButtonProps = react.useMemo(() => typeof openButton == "object" ? openButton : EMPTY_RECORD, [openButton]), handleOpenClick = react.useCallback((event_4) => {
     dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event_4), _raf(() => inputElementRef.current?.focus());
-  }, [openButtonProps, dispatchOpen]), openButtonNode = require$$0.useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { "aria-label": "Open", disabled: expanded, fontSize: fontSize2, icon: icons.ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, [disabled, expanded, fontSize2, handleOpenClick, openButton, openButtonBoxPadding, openButtonPadding, openButtonProps, readOnly]), inputValue = require$$0.useMemo(() => query === null ? value !== null ? renderValue(value, currentOption) : "" : query, [currentOption, query, renderValue, value]), input = /* @__PURE__ */ jsxRuntime.jsx(TextInput, { ...restProps, "aria-activedescendant": activeItemId, "aria-autocomplete": "list", "aria-expanded": expanded, "aria-owns": listBoxId, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", border: border2, clearButton, customValidity, disabled, fontSize: fontSize2, icon, iconRight: loading && AnimatedSpinnerIcon, id, inputMode: "search", onChange: handleInputChange, onClear: handleClearButtonClick, onFocus: handleInputFocus, padding, prefix, radius, readOnly, ref: inputElementRef, role: "combobox", spellCheck: !1, suffix: suffix || openButtonNode, value: inputValue }), handleListBoxKeyDown = require$$0.useCallback((event_5) => {
+  }, [openButtonProps, dispatchOpen]), openButtonNode = react.useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { "aria-label": "Open", disabled: expanded, fontSize: fontSize2, icon: icons.ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, [disabled, expanded, fontSize2, handleOpenClick, openButton, openButtonBoxPadding, openButtonPadding, openButtonProps, readOnly]), inputValue = react.useMemo(() => query === null ? value !== null ? renderValue(value, currentOption) : "" : query, [currentOption, query, renderValue, value]), input = /* @__PURE__ */ jsxRuntime.jsx(TextInput, { ...restProps, "aria-activedescendant": activeItemId, "aria-autocomplete": "list", "aria-expanded": expanded, "aria-owns": listBoxId, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", border: border2, clearButton, customValidity, disabled, fontSize: fontSize2, icon, iconRight: loading && AnimatedSpinnerIcon, id, inputMode: "search", onChange: handleInputChange, onClear: handleClearButtonClick, onFocus: handleInputFocus, padding, prefix, radius, readOnly, ref: inputElementRef, role: "combobox", spellCheck: !1, suffix: suffix || openButtonNode, value: inputValue }), handleListBoxKeyDown = react.useCallback((event_5) => {
     event_5.key === "Tab" && listFocused && inputElementRef.current?.focus();
-  }, [listFocused]), content = require$$0.useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ListBox, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", id: listBoxId, ref: listBoxElementRef, role: "listbox", space: 1, children: filteredOptions.map((option_0) => {
+  }, [listFocused]), content = react.useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ListBox, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", id: listBoxId, ref: listBoxElementRef, role: "listbox", space: 1, children: filteredOptions.map((option_0) => {
     const active = activeValue !== null ? option_0.value === activeValue : currentOption === option_0;
-    return /* @__PURE__ */ jsxRuntime.jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: require$$0.cloneElement(renderOption(option_0), {
+    return /* @__PURE__ */ jsxRuntime.jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: react.cloneElement(renderOption(option_0), {
       disabled: loading,
       selected: active,
       tabIndex: listFocused && active ? 0 : -1
     }) }, option_0.value);
-  }) }) }), [activeValue, currentOption, filteredOptions, handleOptionSelect, handleListBoxKeyDown, id, listBox, listBoxId, listFocused, loading, renderOption]), results = require$$0.useMemo(() => renderPopover ? renderPopover({
+  }) }) }), [activeValue, currentOption, filteredOptions, handleOptionSelect, handleListBoxKeyDown, id, listBox, listBoxId, listFocused, loading, renderOption]), results = react.useMemo(() => renderPopover ? renderPopover({
     content,
     hidden: !expanded,
     inputElement: inputElementRef.current,
@@ -5350,16 +5161,16 @@ const Autocomplete = InnerAutocomplete, Root$8 = styledComponents.styled.ol`
 `, ExpandButton = styledComponents.styled(Button)`
   appearance: none;
   margin: -4px;
-`, Breadcrumbs = require$$0.forwardRef(function(props, ref) {
+`, Breadcrumbs = react.forwardRef(function(props, ref) {
   const {
     children,
     maxLength,
     separator,
     space: spaceRaw = 2,
     ...restProps
-  } = props, space = useArrayProp(spaceRaw), [open, setOpen] = require$$0.useState(!1), expandElementRef = require$$0.useRef(null), popoverElementRef = require$$0.useRef(null), collapse = require$$0.useCallback(() => setOpen(!1), []), expand = require$$0.useCallback(() => setOpen(!0), []);
+  } = props, space = useArrayProp(spaceRaw), [open, setOpen] = react.useState(!1), expandElementRef = react.useRef(null), popoverElementRef = react.useRef(null), collapse = react.useCallback(() => setOpen(!1), []), expand = react.useCallback(() => setOpen(!0), []);
   useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current]);
-  const rawItems = require$$0.useMemo(() => require$$0.Children.toArray(children).filter(require$$0.isValidElement), [children]), items = require$$0.useMemo(() => {
+  const rawItems = react.useMemo(() => react.Children.toArray(children).filter(react.isValidElement), [children]), items = react.useMemo(() => {
     const len = rawItems.length;
     if (maxLength && len > maxLength) {
       const beforeLength = Math.ceil(maxLength / 2), afterLength = Math.floor(maxLength / 2);
@@ -5367,7 +5178,7 @@ const Autocomplete = InnerAutocomplete, Root$8 = styledComponents.styled.ol`
     }
     return rawItems;
   }, [collapse, expand, maxLength, open, rawItems, space]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$8, { "data-ui": "Breadcrumbs", ...restProps, ref, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(require$$0.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$8, { "data-ui": "Breadcrumbs", ...restProps, ref, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
     itemIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": !0, as: "li", paddingX: space, children: separator || /* @__PURE__ */ jsxRuntime.jsx(Text, { muted: !0, children: "/" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "li", children: item })
   ] }, itemIndex)) });
@@ -5435,7 +5246,7 @@ const DialogContext = createGlobalScopedContext("@sanity/ui/context/dialog", {
   version: 0
 });
 function useDialog() {
-  return require$$0.useContext(DialogContext);
+  return react.useContext(DialogContext);
 }
 function isTargetWithinScope(boundaryElement, portalElement, target) {
   return !boundaryElement || !portalElement ? !0 : containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
@@ -5473,8 +5284,8 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
 `, DialogFooter = styledComponents.styled(Box)`
   position: relative;
   z-index: 3;
-`, DialogCard = require$$0.forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(38), {
+`, DialogCard = react.forwardRef(function(props, forwardedRef) {
+  const $ = reactCompilerRuntime.c(38), {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
     children,
@@ -5489,17 +5300,17 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
     scheme,
     shadow: shadowProp,
     width: widthProp
-  } = props, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), width = useArrayProp(widthProp), ref = require$$0.useRef(null), contentRef = require$$0.useRef(null), layer = useLayer(), {
+  } = props, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), width = useArrayProp(widthProp), ref = react.useRef(null), contentRef = react.useRef(null), layer = useLayer(), {
     isTopLayer
   } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
   let t0;
-  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[0] = t0) : t0 = $[0], require$$0.useImperativeHandle(forwardedRef, t0);
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[0] = t0) : t0 = $[0], react.useImperativeHandle(forwardedRef, t0);
   let t1;
-  $[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => contentRef.current, $[1] = t1) : t1 = $[1], require$$0.useImperativeHandle(forwardedContentRef, t1);
+  $[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => contentRef.current, $[1] = t1) : t1 = $[1], react.useImperativeHandle(forwardedContentRef, t1);
   let t2, t3;
   $[2] !== autoFocus ? (t2 = () => {
     autoFocus && ref.current && focusFirstDescendant(ref.current);
-  }, t3 = [autoFocus, ref], $[2] = autoFocus, $[3] = t2, $[4] = t3) : (t2 = $[3], t3 = $[4]), require$$0.useEffect(t2, t3);
+  }, t3 = [autoFocus, ref], $[2] = autoFocus, $[3] = t2, $[4] = t3) : (t2 = $[3], t3 = $[4]), react.useEffect(t2, t3);
   let t4;
   $[5] !== isTopLayer || $[6] !== onClose || $[7] !== boundaryElement || $[8] !== portalElement ? (t4 = (event) => {
     if (!isTopLayer || !onClose)
@@ -5535,7 +5346,7 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
   return $[35] !== width || $[36] !== t11 ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(DialogContainer, { "data-ui": "DialogCard", width, children: t11 }), $[35] = width, $[36] = t11, $[37] = t12) : t12 = $[37], t12;
 });
 DialogCard.displayName = "ForwardRef(DialogCard)";
-const Dialog = require$$0.forwardRef(function(props, ref) {
+const Dialog = react.forwardRef(function(props, ref) {
   const dialog = useDialog(), {
     layer
   } = useTheme_v2(), {
@@ -5560,7 +5371,7 @@ const Dialog = require$$0.forwardRef(function(props, ref) {
     zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
     animate: _animate = !1,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), padding = useArrayProp(paddingProp), position = useArrayProp(positionProp), width = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), preDivRef = require$$0.useRef(null), postDivRef = require$$0.useRef(null), cardRef = require$$0.useRef(null), focusedElementRef = require$$0.useRef(null), handleFocus = require$$0.useCallback((event) => {
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), padding = useArrayProp(paddingProp), position = useArrayProp(positionProp), width = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), preDivRef = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null), handleFocus = react.useCallback((event) => {
     onFocus?.(event);
     const target = event.target, cardElement = cardRef.current;
     if (cardElement && target === preDivRef.current) {
@@ -5572,7 +5383,7 @@ const Dialog = require$$0.forwardRef(function(props, ref) {
       return;
     }
     isHTMLElement(event.target) && (focusedElementRef.current = event.target);
-  }, [onFocus]), labelId = `${id}_label`, rootClickTimeoutRef = require$$0.useRef(), handleRootClick = require$$0.useCallback(() => {
+  }, [onFocus]), labelId = `${id}_label`, rootClickTimeoutRef = react.useRef(), handleRootClick = react.useCallback(() => {
     rootClickTimeoutRef.current && clearTimeout(rootClickTimeoutRef.current), rootClickTimeoutRef.current = setTimeout(() => {
       const activeElement = document.activeElement;
       if (activeElement && !isTargetWithinScope(boundaryElement, portalElement, activeElement)) {
@@ -5594,7 +5405,7 @@ const Dialog = require$$0.forwardRef(function(props, ref) {
 });
 Dialog.displayName = "ForwardRef(Dialog)";
 function DialogProvider(props) {
-  const $ = distExports.c(6), {
+  const $ = reactCompilerRuntime.c(6), {
     children,
     position,
     zOffset
@@ -5621,8 +5432,8 @@ const Root$6 = styledComponents.styled.kbd`
   &:not([hidden]) {
     display: block;
   }
-`, Hotkeys = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(24);
+`, Hotkeys = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(24);
   let t0, keys, fontSize2, padding, radius, restProps;
   $[0] !== props ? ({
     fontSize: fontSize2,
@@ -5692,9 +5503,9 @@ function useMenuController(props) {
     originElement,
     shouldFocus,
     rootElementRef
-  } = props, elementsRef = require$$0.useRef([]), [activeIndex, _setActiveIndex] = require$$0.useState(-1), activeIndexRef = require$$0.useRef(activeIndex), activeElement = require$$0.useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex]), mounted = !!rootElementRef.current, setActiveIndex = require$$0.useCallback((nextActiveIndex) => {
+  } = props, elementsRef = react.useRef([]), [activeIndex, _setActiveIndex] = react.useState(-1), activeIndexRef = react.useRef(activeIndex), activeElement = react.useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex]), mounted = !!rootElementRef.current, setActiveIndex = react.useCallback((nextActiveIndex) => {
     _setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex;
-  }, []), mount = require$$0.useCallback((element, selected) => {
+  }, []), mount = react.useCallback((element, selected) => {
     if (!element) return () => {
     };
     if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElementRef.current, elementsRef.current)), selected) {
@@ -5705,7 +5516,7 @@ function useMenuController(props) {
       const idx = elementsRef.current.indexOf(element);
       idx > -1 && elementsRef.current.splice(idx, 1);
     };
-  }, [rootElementRef, setActiveIndex]), handleKeyDown = require$$0.useCallback((event) => {
+  }, [rootElementRef, setActiveIndex]), handleKeyDown = react.useCallback((event) => {
     if (event.key === "Tab") {
       originElement && originElement.focus();
       return;
@@ -5749,13 +5560,13 @@ function useMenuController(props) {
       return;
     }
     onKeyDown && onKeyDown(event);
-  }, [onKeyDown, originElement, setActiveIndex]), handleItemMouseEnter = require$$0.useCallback((event_0) => {
+  }, [onKeyDown, originElement, setActiveIndex]), handleItemMouseEnter = react.useCallback((event_0) => {
     const element_0 = event_0.currentTarget, currentIndex_3 = elementsRef.current.indexOf(element_0);
     setActiveIndex(currentIndex_3);
-  }, [setActiveIndex]), handleItemMouseLeave = require$$0.useCallback(() => {
+  }, [setActiveIndex]), handleItemMouseLeave = react.useCallback(() => {
     setActiveIndex(-2), rootElementRef.current?.focus();
   }, [rootElementRef, setActiveIndex]);
-  return require$$0.useEffect(() => {
+  return react.useEffect(() => {
     if (!mounted) return;
     const rafId = requestAnimationFrame(() => {
       if (activeIndex === -1) {
@@ -5790,7 +5601,7 @@ function useMenuController(props) {
 const Root$5 = styledComponents.styled(Box)`
   outline: none;
   overflow: auto;
-`, Menu = require$$0.forwardRef(function(props, forwardedRef) {
+`, Menu = react.forwardRef(function(props, forwardedRef) {
   const {
     children,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -5808,8 +5619,8 @@ const Root$5 = styledComponents.styled(Box)`
     shouldFocus = props.focusFirst && "first" || props.focusLast && "last" || null,
     space = 1,
     ...restProps
-  } = props, ref = require$$0.useRef(null);
-  require$$0.useImperativeHandle(forwardedRef, () => ref.current);
+  } = props, ref = react.useRef(null);
+  react.useImperativeHandle(forwardedRef, () => ref.current);
   const {
     isTopLayer
   } = useLayer(), {
@@ -5824,15 +5635,15 @@ const Root$5 = styledComponents.styled(Box)`
     originElement,
     shouldFocus,
     rootElementRef: ref
-  }), unregisterElementRef = require$$0.useRef(null), handleRefChange = require$$0.useCallback((el) => {
+  }), unregisterElementRef = react.useRef(null), handleRefChange = react.useCallback((el) => {
     unregisterElementRef.current && (unregisterElementRef.current(), unregisterElementRef.current = null), ref.current = el, ref.current && registerElement && (unregisterElementRef.current = registerElement(ref.current));
   }, [registerElement]);
-  require$$0.useEffect(() => {
+  react.useEffect(() => {
     onItemSelect && onItemSelect(activeIndex);
-  }, [activeIndex, onItemSelect]), useClickOutsideEvent(isTopLayer && onClickOutside, () => [ref.current]), useGlobalKeyDown(require$$0.useCallback((event) => {
+  }, [activeIndex, onItemSelect]), useClickOutsideEvent(isTopLayer && onClickOutside, () => [ref.current]), useGlobalKeyDown(react.useCallback((event) => {
     isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
   }, [isTopLayer, onEscape]));
-  const value = require$$0.useMemo(() => ({
+  const value = react.useMemo(() => ({
     version: 0,
     activeElement,
     activeIndex,
@@ -5850,7 +5661,7 @@ const Root$5 = styledComponents.styled(Box)`
   return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(Root$5, { "data-ui": "Menu", ...restProps, onKeyDown: handleKeyDown, padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Stack, { space, children }) }) });
 });
 Menu.displayName = "ForwardRef(Menu)";
-const MenuButton = require$$0.forwardRef(function(props, forwardedRef) {
+const MenuButton = react.forwardRef(function(props, forwardedRef) {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = !1,
     boundaryElement: deprecated_boundaryElement,
@@ -5865,19 +5676,19 @@ const MenuButton = require$$0.forwardRef(function(props, forwardedRef) {
     popover,
     popoverRadius: deprecated_popoverRadius,
     preventOverflow: deprecated_preventOverflow
-  } = props, [open, setOpen] = require$$0.useState(!1), [shouldFocus, setShouldFocus] = require$$0.useState(null), [buttonElement, setButtonElement] = require$$0.useState(null), [menuElements, setChildMenuElements] = require$$0.useState([]), openRef = require$$0.useRef(open);
-  require$$0.useEffect(() => {
+  } = props, [open, setOpen] = react.useState(!1), [shouldFocus, setShouldFocus] = react.useState(null), [buttonElement, setButtonElement] = react.useState(null), [menuElements, setChildMenuElements] = react.useState([]), openRef = react.useRef(open);
+  react.useEffect(() => {
     onOpen && open && !openRef.current && onOpen();
-  }, [onOpen, open]), require$$0.useEffect(() => {
+  }, [onOpen, open]), react.useEffect(() => {
     onClose && !open && openRef.current && onClose();
-  }, [onClose, open]), require$$0.useEffect(() => {
+  }, [onClose, open]), react.useEffect(() => {
     openRef.current = open;
   }, [open]);
-  const handleButtonClick = require$$0.useCallback(() => {
+  const handleButtonClick = react.useCallback(() => {
     setOpen((v) => !v), setShouldFocus(null);
-  }, []), handleMouseDown = require$$0.useCallback((event) => {
+  }, []), handleMouseDown = react.useCallback((event) => {
     open && event.preventDefault();
-  }, [open]), handleButtonKeyDown = require$$0.useCallback((event_0) => {
+  }, [open]), handleButtonKeyDown = react.useCallback((event_0) => {
     if (event_0.key === "ArrowDown" || event_0.key === "Enter" || event_0.key === " ") {
       event_0.preventDefault(), setOpen(!0), setShouldFocus("first");
       return;
@@ -5886,7 +5697,7 @@ const MenuButton = require$$0.forwardRef(function(props, forwardedRef) {
       event_0.preventDefault(), setOpen(!0), setShouldFocus("last");
       return;
     }
-  }, []), handleMenuClickOutside = require$$0.useCallback((event_1) => {
+  }, []), handleMenuClickOutside = react.useCallback((event_1) => {
     const target = event_1.target;
     if (target instanceof Node && !(buttonElement && (target === buttonElement || buttonElement.contains(target)))) {
       for (const el of menuElements)
@@ -5894,9 +5705,9 @@ const MenuButton = require$$0.forwardRef(function(props, forwardedRef) {
           return;
       setOpen(!1);
     }
-  }, [buttonElement, menuElements]), handleMenuEscape = require$$0.useCallback(() => {
+  }, [buttonElement, menuElements]), handleMenuEscape = react.useCallback(() => {
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
-  }, [buttonElement, disableRestoreFocusOnClose]), handleBlur = require$$0.useCallback((event_2) => {
+  }, [buttonElement, disableRestoreFocusOnClose]), handleBlur = react.useCallback((event_2) => {
     const target_0 = event_2.relatedTarget;
     if (target_0 instanceof Node) {
       for (const el_0 of menuElements)
@@ -5904,9 +5715,9 @@ const MenuButton = require$$0.forwardRef(function(props, forwardedRef) {
           return;
       setOpen(!1);
     }
-  }, [menuElements]), handleItemClick = require$$0.useCallback(() => {
+  }, [menuElements]), handleItemClick = react.useCallback(() => {
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
-  }, [buttonElement, disableRestoreFocusOnClose]), registerElement = require$$0.useCallback((el_1) => (setChildMenuElements((els) => els.concat([el_1])), () => setChildMenuElements((els_0) => els_0.filter((_el) => _el !== el_1))), []), menuProps = require$$0.useMemo(() => ({
+  }, [buttonElement, disableRestoreFocusOnClose]), registerElement = react.useCallback((el_1) => (setChildMenuElements((els) => els.concat([el_1])), () => setChildMenuElements((els_0) => els_0.filter((_el) => _el !== el_1))), []), menuProps = react.useMemo(() => ({
     "aria-labelledby": id,
     onBlurCapture: handleBlur,
     onClickOutside: handleMenuClickOutside,
@@ -5915,7 +5726,7 @@ const MenuButton = require$$0.forwardRef(function(props, forwardedRef) {
     originElement: buttonElement,
     registerElement,
     shouldFocus
-  }), [buttonElement, handleMenuClickOutside, handleMenuEscape, handleItemClick, id, handleBlur, registerElement, shouldFocus]), menu = menuProp && require$$0.cloneElement(menuProp, menuProps), ref = require$$0.useRef(null), button = require$$0.useMemo(() => buttonProp && require$$0.cloneElement(buttonProp, {
+  }), [buttonElement, handleMenuClickOutside, handleMenuEscape, handleItemClick, id, handleBlur, registerElement, shouldFocus]), menu = menuProp && react.cloneElement(menuProp, menuProps), ref = react.useRef(null), button = react.useMemo(() => buttonProp && react.cloneElement(buttonProp, {
     "data-ui": "MenuButton",
     id,
     onClick: handleButtonClick,
@@ -5926,11 +5737,11 @@ const MenuButton = require$$0.forwardRef(function(props, forwardedRef) {
     ref,
     selected: buttonProp.props.selected ?? open
   }), [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open]);
-  require$$0.useImperativeHandle(forwardedRef, () => ref.current), require$$0.useEffect(() => {
+  react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
     if (button)
       return setButtonElement(ref.current), () => setButtonElement(null);
   }, [button]);
-  const popoverProps = require$$0.useMemo(() => ({
+  const popoverProps = react.useMemo(() => ({
     boundaryElement: deprecated_boundaryElement,
     overflow: "auto",
     placement: deprecated_placement,
@@ -6053,7 +5864,7 @@ function selectableColorStyle(props) {
 const Selectable = styledComponents.styled(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 Selectable.displayName = "Selectable";
 function useMenu() {
-  const value = require$$0.useContext(MenuContext);
+  const value = react.useContext(MenuContext);
   if (!value)
     throw new Error("useMenu(): missing context value");
   if (!isRecord(value) || value.version !== 0)
@@ -6084,27 +5895,27 @@ function MenuGroup(props) {
     onItemClick,
     onItemMouseEnter = menu.onMouseEnter,
     registerElement
-  } = menu, [rootElement, setRootElement] = require$$0.useState(null), [open, setOpen] = require$$0.useState(!1), [shouldFocus, setShouldFocus] = require$$0.useState(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = require$$0.useState(!1), handleMouseEnter = require$$0.useCallback((event) => {
+  } = menu, [rootElement, setRootElement] = react.useState(null), [open, setOpen] = react.useState(!1), [shouldFocus, setShouldFocus] = react.useState(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = react.useState(!1), handleMouseEnter = react.useCallback((event) => {
     setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
-  }, [onItemMouseEnter]), handleMenuKeyDown = require$$0.useCallback((event_0) => {
+  }, [onItemMouseEnter]), handleMenuKeyDown = react.useCallback((event_0) => {
     event_0.key === "ArrowLeft" && (event_0.stopPropagation(), setOpen(!1), requestAnimationFrame(() => {
       rootElement?.focus();
     }));
-  }, [rootElement]), handleClick = require$$0.useCallback((event_1) => {
+  }, [rootElement]), handleClick = react.useCallback((event_1) => {
     onClick?.(event_1), setShouldFocus("first"), setOpen(!0);
-  }, [onClick]), handleChildItemClick = require$$0.useCallback(() => {
+  }, [onClick]), handleChildItemClick = react.useCallback(() => {
     setOpen(!1), onItemClick?.();
-  }, [onItemClick]), handleMenuMouseEnter = require$$0.useCallback(() => setWithinMenu(!0), []);
-  require$$0.useEffect(() => mount(rootElement), [mount, rootElement]), require$$0.useEffect(() => {
+  }, [onItemClick]), handleMenuMouseEnter = react.useCallback(() => setWithinMenu(!0), []);
+  react.useEffect(() => mount(rootElement), [mount, rootElement]), react.useEffect(() => {
     active || setOpen(!1);
-  }, [active]), require$$0.useEffect(() => {
+  }, [active]), react.useEffect(() => {
     open || setWithinMenu(!1);
-  }, [open]), require$$0.useEffect(() => {
+  }, [open]), react.useEffect(() => {
     if (!shouldFocus) return;
     const rafId = requestAnimationFrame(() => setShouldFocus(null));
     return () => cancelAnimationFrame(rafId);
   }, [shouldFocus]);
-  const childMenu = /* @__PURE__ */ jsxRuntime.jsx(Menu, { onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus, children }), handleKeyDown = require$$0.useCallback((event_2) => {
+  const childMenu = /* @__PURE__ */ jsxRuntime.jsx(Menu, { onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus, children }), handleKeyDown = react.useCallback((event_2) => {
     const target = event_2.currentTarget;
     if (document.activeElement === target && event_2.key === "ArrowRight") {
       setShouldFocus("first"), setOpen(!0), setWithinMenu(!0);
@@ -6113,7 +5924,7 @@ function MenuGroup(props) {
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: /* @__PURE__ */ jsxRuntime.jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": as === "button" ? withinMenu : void 0, "data-pressed": as !== "button" ? withinMenu : void 0, "data-selected": !withinMenu && active ? "" : void 0, $radius: useArrayProp(radius), $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: as === "button" ? "button" : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
     IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-      require$$0.isValidElement(IconComponent) && IconComponent,
+      react.isValidElement(IconComponent) && IconComponent,
       ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
@@ -6121,7 +5932,7 @@ function MenuGroup(props) {
   ] }) }) });
 }
 MenuGroup.displayName = "MenuGroup";
-const MenuItem = require$$0.forwardRef(function(props, forwardedRef) {
+const MenuItem = react.forwardRef(function(props, forwardedRef) {
   const {
     as = "button",
     children,
@@ -6153,11 +5964,11 @@ const MenuItem = require$$0.forwardRef(function(props, forwardedRef) {
     onItemClick,
     onItemMouseEnter = menu.onMouseEnter,
     onItemMouseLeave = menu.onMouseLeave
-  } = menu, [rootElement, setRootElement] = require$$0.useState(null), active = !!activeElement && activeElement === rootElement, ref = require$$0.useRef(null);
-  require$$0.useImperativeHandle(forwardedRef, () => ref.current), require$$0.useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
-  const handleClick = require$$0.useCallback((event) => {
+  } = menu, [rootElement, setRootElement] = react.useState(null), active = !!activeElement && activeElement === rootElement, ref = react.useRef(null);
+  react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
+  const handleClick = react.useCallback((event) => {
     disabled || (onClick && onClick(event), onItemClick && onItemClick());
-  }, [disabled, onClick, onItemClick]), paddingProps = require$$0.useMemo(() => ({
+  }, [disabled, onClick, onItemClick]), paddingProps = react.useMemo(() => ({
     padding,
     paddingX,
     paddingY,
@@ -6165,13 +5976,13 @@ const MenuItem = require$$0.forwardRef(function(props, forwardedRef) {
     paddingRight,
     paddingBottom,
     paddingLeft
-  }), [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]), hotkeysFontSize = useArrayProp(fontSize2).map((s) => s - 1), setRef = require$$0.useCallback((el) => {
+  }), [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]), hotkeysFontSize = useArrayProp(fontSize2).map((s) => s - 1), setRef = react.useCallback((el) => {
     ref.current = el, setRootElement(el);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(Selectable, { "data-ui": "MenuItem", ...restProps, "aria-pressed": as === "button" && pressed, "data-pressed": as !== "button" && pressed ? "" : void 0, "data-selected": active ? "" : void 0, "data-disabled": disabled ? "" : void 0, forwardedAs: as, $radius: useArrayProp(radius), $padding: useArrayProp(0), $tone: disabled ? "default" : tone, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, role: "menuitem", tabIndex: -1, type: as === "button" ? "button" : void 0, children: [
     (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
       IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-        require$$0.isValidElement(IconComponent) && IconComponent,
+        react.isValidElement(IconComponent) && IconComponent,
         ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
       ] }),
       text && /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
@@ -6180,7 +5991,7 @@ const MenuItem = require$$0.forwardRef(function(props, forwardedRef) {
         marginBottom: -4
       } }),
       IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-        require$$0.isValidElement(IconRightComponent) && IconRightComponent,
+        react.isValidElement(IconRightComponent) && IconRightComponent,
         ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
       ] })
     ] }),
@@ -6228,8 +6039,8 @@ const keyframe = styledComponents.keyframes`
   @media screen and (prefers-reduced-motion: reduce) {
     background-color: var(--card-skeleton-color-from);
   }
-`, Root$4 = styledComponents.styled(Box)(responsiveRadiusStyle, skeletonStyle), Skeleton = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(14);
+`, Root$4 = styledComponents.styled(Box)(responsiveRadiusStyle, skeletonStyle), Skeleton = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(14);
   let t0, delay, radius, restProps;
   $[0] !== props ? ({
     animated: t0,
@@ -6237,7 +6048,7 @@ const keyframe = styledComponents.keyframes`
     radius,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = delay, $[3] = radius, $[4] = restProps) : (t0 = $[1], delay = $[2], radius = $[3], restProps = $[4]);
-  const animated = t0 === void 0 ? !1 : t0, [visible, setVisible] = require$$0.useState(!delay);
+  const animated = t0 === void 0 ? !1 : t0, [visible, setVisible] = react.useState(!delay);
   let t1, t2;
   $[5] !== delay ? (t1 = () => {
     if (!delay)
@@ -6248,7 +6059,7 @@ const keyframe = styledComponents.keyframes`
     return () => {
       clearTimeout(timeout);
     };
-  }, t2 = [delay], $[5] = delay, $[6] = t1, $[7] = t2) : (t1 = $[6], t2 = $[7]), require$$0.useEffect(t1, t2);
+  }, t2 = [delay], $[5] = delay, $[6] = t1, $[7] = t2) : (t1 = $[6], t2 = $[7]), react.useEffect(t1, t2);
   const t3 = useArrayProp(radius);
   let t4;
   return $[8] !== restProps || $[9] !== animated || $[10] !== t3 || $[11] !== visible || $[12] !== ref ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Root$4, { ...restProps, $animated: animated, $radius: t3, $visible: visible, ref }), $[8] = restProps, $[9] = animated, $[10] = t3, $[11] = visible, $[12] = ref, $[13] = t4) : t4 = $[13], t4;
@@ -6268,8 +6079,8 @@ const Root$3 = styledComponents.styled(Skeleton)((props) => {
       height: fontSize2.lineHeight - fontSize2.ascenderHeight - fontSize2.descenderHeight
     };
   });
-}), TextSkeleton = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(7);
+}), TextSkeleton = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(7);
   let t0, restProps;
   $[0] !== props ? ({
     size: t0,
@@ -6280,8 +6091,8 @@ const Root$3 = styledComponents.styled(Skeleton)((props) => {
   return $[3] !== restProps || $[4] !== $size || $[5] !== ref ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "text" }), $[3] = restProps, $[4] = $size, $[5] = ref, $[6] = t1) : t1 = $[6], t1;
 });
 TextSkeleton.displayName = "ForwardRef(TextSkeleton)";
-const LabelSkeleton = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(7);
+const LabelSkeleton = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(7);
   let t0, restProps;
   $[0] !== props ? ({
     size: t0,
@@ -6292,8 +6103,8 @@ const LabelSkeleton = require$$0.forwardRef(function(props, ref) {
   return $[3] !== restProps || $[4] !== $size || $[5] !== ref ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "label" }), $[3] = restProps, $[4] = $size, $[5] = ref, $[6] = t1) : t1 = $[6], t1;
 });
 LabelSkeleton.displayName = "ForwardRef(LabelSkeleton)";
-const HeadingSkeleton = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(7);
+const HeadingSkeleton = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(7);
   let t0, restProps;
   $[0] !== props ? ({
     size: t0,
@@ -6304,8 +6115,8 @@ const HeadingSkeleton = require$$0.forwardRef(function(props, ref) {
   return $[3] !== restProps || $[4] !== $size || $[5] !== ref ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "heading" }), $[3] = restProps, $[4] = $size, $[5] = ref, $[6] = t1) : t1 = $[6], t1;
 });
 HeadingSkeleton.displayName = "ForwardRef(HeadingSkeleton)";
-const CodeSkeleton = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(7);
+const CodeSkeleton = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(7);
   let t0, restProps;
   $[0] !== props ? ({
     size: t0,
@@ -6318,8 +6129,8 @@ const CodeSkeleton = require$$0.forwardRef(function(props, ref) {
 CodeSkeleton.displayName = "ForwardRef(CodeSkeleton)";
 const CustomButton = styledComponents.styled(Button)`
   max-width: 100%;
-`, Tab = require$$0.forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(30);
+`, Tab = react.forwardRef(function(props, forwardedRef) {
+  const $ = reactCompilerRuntime.c(30);
   let t0, t1, onFocus, focused, selected, restProps, icon, id, onClick, label;
   $[0] !== props ? ({
     icon,
@@ -6333,9 +6144,9 @@ const CustomButton = styledComponents.styled(Button)`
     selected,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = onFocus, $[4] = focused, $[5] = selected, $[6] = restProps, $[7] = icon, $[8] = id, $[9] = onClick, $[10] = label) : (t0 = $[1], t1 = $[2], onFocus = $[3], focused = $[4], selected = $[5], restProps = $[6], icon = $[7], id = $[8], onClick = $[9], label = $[10]);
-  const fontSize2 = t0 === void 0 ? 1 : t0, padding = t1 === void 0 ? 2 : t1, ref = require$$0.useRef(null), focusedRef = require$$0.useRef(!1);
+  const fontSize2 = t0 === void 0 ? 1 : t0, padding = t1 === void 0 ? 2 : t1, ref = react.useRef(null), focusedRef = react.useRef(!1);
   let t2;
-  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[11] = t2) : t2 = $[11], require$$0.useImperativeHandle(forwardedRef, t2);
+  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[11] = t2) : t2 = $[11], react.useImperativeHandle(forwardedRef, t2);
   let t3;
   $[12] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => {
     focusedRef.current = !1;
@@ -6349,7 +6160,7 @@ const CustomButton = styledComponents.styled(Button)`
   let t5, t6;
   $[15] !== focused ? (t5 = () => {
     focused && !focusedRef.current && (ref.current && ref.current.focus(), focusedRef.current = !0);
-  }, t6 = [focused], $[15] = focused, $[16] = t5, $[17] = t6) : (t5 = $[16], t6 = $[17]), require$$0.useEffect(t5, t6);
+  }, t6 = [focused], $[15] = focused, $[16] = t5, $[17] = t6) : (t5 = $[16], t6 = $[17]), react.useEffect(t5, t6);
   const t7 = selected ? "true" : "false", t8 = selected ? 0 : -1;
   let t9;
   return $[18] !== restProps || $[19] !== t7 || $[20] !== fontSize2 || $[21] !== icon || $[22] !== id || $[23] !== onClick || $[24] !== handleFocus || $[25] !== padding || $[26] !== selected || $[27] !== t8 || $[28] !== label ? (t9 = /* @__PURE__ */ jsxRuntime.jsx(CustomButton, { "data-ui": "Tab", ...restProps, "aria-selected": t7, fontSize: fontSize2, icon, id, mode: "bleed", onClick, onBlur: handleBlur, onFocus: handleFocus, padding, ref, role: "tab", selected, tabIndex: t8, text: label, type: "button" }), $[18] = restProps, $[19] = t7, $[20] = fontSize2, $[21] = icon, $[22] = id, $[23] = onClick, $[24] = handleFocus, $[25] = padding, $[26] = selected, $[27] = t8, $[28] = label, $[29] = t9) : t9 = $[29], t9;
@@ -6365,24 +6176,24 @@ const CustomInline = styledComponents.styled(Inline)`
     max-width: 100%;
     box-sizing: border-box;
   }
-`, TabList = require$$0.forwardRef(function(props, ref) {
+`, TabList = react.forwardRef(function(props, ref) {
   const {
     children: childrenProp,
     ...restProps
-  } = props, [focusedIndex, setFocusedIndex] = require$$0.useState(-1), tabs = require$$0.useMemo(() => childrenProp.filter(_isReactElement), [childrenProp]).map((child, childIndex) => require$$0.cloneElement(child, {
+  } = props, [focusedIndex, setFocusedIndex] = react.useState(-1), tabs = react.useMemo(() => childrenProp.filter(_isReactElement), [childrenProp]).map((child, childIndex) => react.cloneElement(child, {
     focused: focusedIndex === childIndex,
     key: childIndex,
     onFocus: () => handleTabFocus(childIndex)
-  })), numTabs = tabs.length, handleTabFocus = require$$0.useCallback((tabIdx) => {
+  })), numTabs = tabs.length, handleTabFocus = react.useCallback((tabIdx) => {
     setFocusedIndex(tabIdx);
-  }, []), handleKeyDown = require$$0.useCallback((event) => {
+  }, []), handleKeyDown = react.useCallback((event) => {
     event.key === "ArrowLeft" && setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs), event.key === "ArrowRight" && setFocusedIndex((prevIndex_0) => (prevIndex_0 + 1) % numTabs);
   }, [numTabs]);
   return /* @__PURE__ */ jsxRuntime.jsx(CustomInline, { "data-ui": "TabList", ...restProps, onKeyDown: handleKeyDown, ref, role: "tablist", children: tabs });
 });
 TabList.displayName = "ForwardRef(TabList)";
-const TabPanel = require$$0.forwardRef(function(props, ref) {
-  const $ = distExports.c(9);
+const TabPanel = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(9);
   let restProps, flex;
   $[0] !== props ? ({
     flex,
@@ -6454,7 +6265,7 @@ const STATUS_CARD_TONE = {
   info: "alert"
 }, Root$2 = styledComponents.styled(Card)(rootStyles);
 function Toast(props) {
-  const $ = distExports.c(30);
+  const $ = reactCompilerRuntime.c(30);
   let t0, status, title, description, closable, onClose, restProps, duration;
   $[0] !== props ? ({
     closable,
@@ -6490,7 +6301,7 @@ function Toast(props) {
 }
 Toast.displayName = "Toast";
 function useMounted() {
-  return require$$0.useSyncExternalStore(subscribe, _temp, _temp2);
+  return react.useSyncExternalStore(subscribe, _temp, _temp2);
 }
 function _temp2() {
   return !1;
@@ -6522,7 +6333,7 @@ function ToastProvider(props) {
     paddingX,
     paddingY,
     zOffset
-  } = props, [state, _setState] = require$$0.useState([]), toastsRef = require$$0.useRef({}), mounted = useMounted(), prefersReducedMotion = usePrefersReducedMotion(), variants = require$$0.useMemo(() => ({
+  } = props, [state, _setState] = react.useState([]), toastsRef = react.useRef({}), mounted = useMounted(), prefersReducedMotion = usePrefersReducedMotion(), variants = react.useMemo(() => ({
     initial: {
       opacity: 0,
       [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
@@ -6546,10 +6357,10 @@ function ToastProvider(props) {
         duration: 0.2
       }
     }
-  }), [prefersReducedMotion]), value = require$$0.useMemo(() => ({
+  }), [prefersReducedMotion]), value = react.useMemo(() => ({
     version: 0,
     push: (params) => {
-      const setState = (state_0) => require$$0.startTransition(() => _setState(state_0)), id = params.id || String(toastId++), duration = params.duration || 5e3, dismiss = () => {
+      const setState = (state_0) => react.startTransition(() => _setState(state_0)), id = params.id || String(toastId++), duration = params.duration || 5e3, dismiss = () => {
         const timeoutId = toastsRef.current[id]?.timeoutId;
         setState((prevState) => {
           const idx = prevState.findIndex((t) => t.id === id);
@@ -6572,7 +6383,7 @@ function ToastProvider(props) {
       }, id;
     }
   }), []);
-  return require$$0.useEffect(() => () => {
+  return react.useEffect(() => () => {
     for (const {
       timeoutId: timeoutId_0
     } of Object.values(toastsRef.current))
@@ -6595,7 +6406,7 @@ function ToastProvider(props) {
 }
 ToastProvider.displayName = "ToastProvider";
 function useToast() {
-  const value = require$$0.useContext(ToastContext);
+  const value = react.useContext(ToastContext);
   if (!value)
     throw new Error("useToast(): missing context value");
   if (!isRecord(value) || value.version !== 0)
@@ -6656,8 +6467,8 @@ function _focusItemElement(el) {
     firstChild && firstChild instanceof HTMLElement && firstChild.focus();
   }
 }
-const TreeContext = createGlobalScopedContext("@sanity/ui/context/tree", null), Tree = require$$0.memo(require$$0.forwardRef(function(props, forwardedRef) {
-  const $ = distExports.c(37);
+const TreeContext = createGlobalScopedContext("@sanity/ui/context/tree", null), Tree = react.memo(react.forwardRef(function(props, forwardedRef) {
+  const $ = reactCompilerRuntime.c(37);
   let t0, onFocus, children, restProps;
   $[0] !== props ? ({
     children,
@@ -6665,26 +6476,26 @@ const TreeContext = createGlobalScopedContext("@sanity/ui/context/tree", null),
     onFocus,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = onFocus, $[3] = children, $[4] = restProps) : (t0 = $[1], onFocus = $[2], children = $[3], restProps = $[4]);
-  const space = t0 === void 0 ? 1 : t0, ref = require$$0.useRef(null), [focusedElement, setFocusedElement] = require$$0.useState(null), focusedElementRef = require$$0.useRef(focusedElement);
+  const space = t0 === void 0 ? 1 : t0, ref = react.useRef(null), [focusedElement, setFocusedElement] = react.useState(null), focusedElementRef = react.useRef(focusedElement);
   let t1, t2;
   $[5] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[5] = t2) : t2 = $[5], t1 = t2;
   const path = t1;
   let t3;
   $[6] === Symbol.for("react.memo_cache_sentinel") ? (t3 = [], $[6] = t3) : t3 = $[6];
-  const [itemElements, setItemElements] = require$$0.useState(t3);
+  const [itemElements, setItemElements] = react.useState(t3);
   let t4;
   $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = {}, $[7] = t4) : t4 = $[7];
-  const [state, setState] = require$$0.useState(t4), stateRef = require$$0.useRef(state);
+  const [state, setState] = react.useState(t4), stateRef = react.useRef(state);
   let t5;
-  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[8] = t5) : t5 = $[8], require$$0.useImperativeHandle(forwardedRef, t5);
+  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[8] = t5) : t5 = $[8], react.useImperativeHandle(forwardedRef, t5);
   let t6, t7;
   $[9] !== focusedElement ? (t6 = () => {
     focusedElementRef.current = focusedElement;
-  }, t7 = [focusedElement], $[9] = focusedElement, $[10] = t6, $[11] = t7) : (t6 = $[10], t7 = $[11]), require$$0.useEffect(t6, t7);
+  }, t7 = [focusedElement], $[9] = focusedElement, $[10] = t6, $[11] = t7) : (t6 = $[10], t7 = $[11]), react.useEffect(t6, t7);
   let t8, t9;
   $[12] !== state ? (t8 = () => {
     stateRef.current = state;
-  }, t9 = [state], $[12] = state, $[13] = t8, $[14] = t9) : (t8 = $[13], t9 = $[14]), require$$0.useEffect(t8, t9);
+  }, t9 = [state], $[12] = state, $[13] = t8, $[14] = t9) : (t8 = $[13], t9 = $[14]), react.useEffect(t8, t9);
   let t10;
   $[15] === Symbol.for("react.memo_cache_sentinel") ? (t10 = (element, path_0, expanded, selected) => (setState((s) => ({
     ...s,
@@ -6805,7 +6616,7 @@ const TreeContext = createGlobalScopedContext("@sanity/ui/context/tree", null),
     setItemElements(_itemElements);
   }, $[25] = t17) : t17 = $[25];
   let t18;
-  $[26] !== children ? (t18 = [children], $[26] = children, $[27] = t18) : t18 = $[27], require$$0.useEffect(t17, t18);
+  $[26] !== children ? (t18 = [children], $[26] = children, $[27] = t18) : t18 = $[27], react.useEffect(t17, t18);
   let t19;
   $[28] !== restProps || $[29] !== handleFocus || $[30] !== handleKeyDown || $[31] !== space || $[32] !== children ? (t19 = /* @__PURE__ */ jsxRuntime.jsx(Stack, { as: "ul", "data-ui": "Tree", ...restProps, onFocus: handleFocus, onKeyDown: handleKeyDown, ref, role: "tree", space, children }), $[28] = restProps, $[29] = handleFocus, $[30] = handleKeyDown, $[31] = space, $[32] = children, $[33] = t19) : t19 = $[33];
   let t20;
@@ -6905,13 +6716,13 @@ function treeItemBoxStyle(props) {
   `;
 }
 function useTree() {
-  const tree = require$$0.useContext(TreeContext);
+  const tree = react.useContext(TreeContext);
   if (!tree)
     throw new Error("Tree: missing context value");
   return tree;
 }
-const TreeGroup = require$$0.memo(function(props) {
-  const $ = distExports.c(9);
+const TreeGroup = react.memo(function(props) {
+  const $ = reactCompilerRuntime.c(9);
   let t0, restProps, children;
   $[0] !== props ? ({
     children,
@@ -6921,13 +6732,13 @@ const TreeGroup = require$$0.memo(function(props) {
   const expanded = t0 === void 0 ? !1 : t0, tree = useTree(), t1 = !expanded;
   let t2;
   return $[4] !== restProps || $[5] !== t1 || $[6] !== tree.space || $[7] !== children ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(Stack, { as: "ul", "data-ui": "TreeGroup", ...restProps, hidden: t1, marginTop: tree.space, role: "group", space: tree.space, children }), $[4] = restProps, $[5] = t1, $[6] = tree.space, $[7] = children, $[8] = t2) : t2 = $[8], t2;
-}), Root = require$$0.memo(styledComponents.styled.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styledComponents.styled(Box).attrs({
+}), Root = react.memo(styledComponents.styled.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styledComponents.styled(Box).attrs({
   forwardedAs: "a"
 })(treeItemBoxStyle), ToggleArrowText = styledComponents.styled(Text)`
   & > svg {
     transition: transform 100ms;
   }
-`, TreeItem = require$$0.memo(function(props) {
+`, TreeItem = react.memo(function(props) {
   const {
     children,
     expanded: expandedProp = !1,
@@ -6944,23 +6755,23 @@ const TreeGroup = require$$0.memo(function(props) {
     text,
     weight,
     ...restProps
-  } = props, rootRef = require$$0.useRef(null), treeitemRef = require$$0.useRef(null), tree = useTree(), {
+  } = props, rootRef = react.useRef(null), treeitemRef = react.useRef(null), tree = useTree(), {
     path,
     registerItem,
     setExpanded,
     setFocusedElement
-  } = tree, _id = require$$0.useId(), id = idProp || _id, itemPath = require$$0.useMemo(() => path.concat([id || ""]), [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootRef.current, expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1, contextValue = require$$0.useMemo(() => ({
+  } = tree, _id = react.useId(), id = idProp || _id, itemPath = react.useMemo(() => path.concat([id || ""]), [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootRef.current, expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1, contextValue = react.useMemo(() => ({
     ...tree,
     level: tree.level + 1,
     path: itemPath
-  }), [itemPath, tree]), handleClick = require$$0.useCallback((event) => {
+  }), [itemPath, tree]), handleClick = react.useCallback((event) => {
     onClick && onClick(event);
     const target = event.target;
     target instanceof HTMLElement && (target.getAttribute("data-ui") === "TreeItem" || target.closest('[data-ui="TreeItem__box"]')) && (event.stopPropagation(), setExpanded(itemKey, !expanded), setFocusedElement(rootRef.current));
-  }, [expanded, itemKey, onClick, setExpanded, setFocusedElement]), handleKeyDown = require$$0.useCallback((event_0) => {
+  }, [expanded, itemKey, onClick, setExpanded, setFocusedElement]), handleKeyDown = react.useCallback((event_0) => {
     focused && event_0.key === "Enter" && (treeitemRef.current || rootRef.current)?.click();
   }, [focused]);
-  require$$0.useEffect(() => {
+  react.useEffect(() => {
     if (rootRef.current)
       return registerItem(rootRef.current, itemPath.join("/"), expanded, selected);
   }, [expanded, itemPath, registerItem, selected]);