@sanity/ui 1.0.1 → 1.1.0-beta.1

package/dist/{index.esm.js → index.cjs}

@@ -1,3 +1,5 @@
+'use strict';
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70, _templateObject71, _templateObject72, _templateObject73, _templateObject74, _templateObject75, _templateObject76, _templateObject77, _templateObject78, _templateObject79, _templateObject80, _templateObject81, _templateObject82, _templateObject83, _templateObject84, _templateObject85, _templateObject86, _templateObject87, _templateObject88, _templateObject89, _templateObject90;
 const _excluded = ["color", "layer"],
   _excluded2 = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"],
@@ -55,17 +57,30 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo, useState, useRef, useEffect, createContext, useContext, useLayoutEffect, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1 } from 'react';
-import ReactIs, { isElement as isElement$1, isFragment, isValidElementType } from 'react-is';
-import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, keyframes } from 'styled-components';
-import { white as white$1, black as black$1, hues } from '@sanity/color';
-import { SpinnerIcon, CheckmarkIcon, RemoveIcon, SelectIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon } from '@sanity/icons';
-import Refractor from 'react-refractor';
-import { detectOverflow, flip, offset, shift, arrow, hide, autoUpdate, useFloating } from '@floating-ui/react-dom';
-import { createPortal } from 'react-dom';
-import { AnimatePresence, motion } from 'framer-motion';
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var ReactIs = require('react-is');
+var styled = require('styled-components');
+var color$1 = require('@sanity/color');
+var icons = require('@sanity/icons');
+var Refractor = require('react-refractor');
+var reactDom$1 = require('@floating-ui/react-dom');
+var reactDom = require('react-dom');
+var framerMotion = require('framer-motion');
+function _interopDefaultCompat(e) {
+  return e && typeof e === 'object' && 'default' in e ? e : {
+    default: e
+  };
+}
+var ReactIs__default = /*#__PURE__*/_interopDefaultCompat(ReactIs);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var Refractor__default = /*#__PURE__*/_interopDefaultCompat(Refractor);
 const EMPTY_ARRAY = [];
 const EMPTY_RECORD = {};
 const FLOATING_STATIC_SIDES = {
@@ -221,7 +236,7 @@ function responsiveTextFont(props) {
 }
 function useArrayProp(val, defaultVal) {
   const __perf_hash__ = JSON.stringify(val != null ? val : defaultVal);
-  return useMemo(() => _getArrayProp(val, defaultVal), [__perf_hash__]);
+  return react.useMemo(() => _getArrayProp(val, defaultVal), [__perf_hash__]);
 }
 function _getElements(element, elementsArg) {
   const ret = [element];
@@ -237,10 +252,10 @@ function _getElements(element, elementsArg) {
 function useClickOutside(listener) {
   let elementsArg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : EMPTY_ARRAY;
   let boundaryElement = arguments.length > 2 ? arguments[2] : undefined;
-  const [element, setElement] = useState(null);
-  const [elements, setElements] = useState(() => _getElements(element, elementsArg));
-  const elementsRef = useRef(elements);
-  useEffect(() => {
+  const [element, setElement] = react.useState(null);
+  const [elements, setElements] = react.useState(() => _getElements(element, elementsArg));
+  const elementsRef = react.useRef(elements);
+  react.useEffect(() => {
     const prevElements = elementsRef.current;
     const nextElements = _getElements(element, elementsArg);
     if (prevElements.length !== nextElements.length) {
@@ -263,7 +278,7 @@ function useClickOutside(listener) {
       }
     }
   }, [element, elementsArg]);
-  useEffect(() => {
+  react.useEffect(() => {
     if (!listener) return void 0;
     const handleWindowMouseDown = evt => {
       const target = evt.target;
@@ -869,8 +884,8 @@ function _createElementSizeObserver() {
   };
 }
 function useElementSize(element) {
-  const [size, setSize] = useState(null);
-  useEffect(() => {
+  const [size, setSize] = react.useState(null);
+  react.useEffect(() => {
     if (!element) return void 0;
     return _elementSizeObserver.subscribe(element, setSize);
   }, [element]);
@@ -881,7 +896,7 @@ function useElementRect(element) {
   return (elementSize == null ? void 0 : elementSize._contentRect) || null;
 }
 function useGlobalKeyDown(onKeyDown) {
-  return useEffect(() => {
+  return react.useEffect(() => {
     addEventListener("keydown", onKeyDown);
     return () => removeEventListener("keydown", onKeyDown);
   }, [onKeyDown]);
@@ -2208,12 +2223,12 @@ function screen(bg, fg) {
   return hex;
 }
 const tones = {
-  default: hues.gray,
-  transparent: hues.gray,
-  primary: hues.blue,
-  positive: hues.green,
-  caution: hues.yellow,
-  critical: hues.red
+  default: color$1.hues.gray,
+  transparent: color$1.hues.gray,
+  primary: color$1.hues.blue,
+  positive: color$1.hues.green,
+  caution: color$1.hues.yellow,
+  critical: color$1.hues.red
 };
 const NEUTRAL_TONES = ["default", "transparent"];
 const color = createColorTheme({
@@ -2223,13 +2238,13 @@ const color = createColorTheme({
       name
     } = _ref11;
     if (name === "default") {
-      const tints2 = hues.gray;
+      const tints2 = color$1.hues.gray;
       const skeletonFrom2 = dark ? tints2[900].hex : tints2[100].hex;
       return {
-        fg: dark ? white$1.hex : black$1.hex,
-        bg: dark ? black$1.hex : white$1.hex,
+        fg: dark ? color$1.white.hex : color$1.black.hex,
+        bg: dark ? color$1.black.hex : color$1.white.hex,
         border: tints2[dark ? 800 : 200].hex,
-        focusRing: hues.blue[dark ? 500 : 500].hex,
+        focusRing: color$1.hues.blue[dark ? 500 : 500].hex,
         shadow: {
           outline: rgba(tints2[500].hex, 0.4),
           umbra: dark ? rgba(tints2[950].hex, 0.4) : rgba(tints2[500].hex, 0.2),
@@ -2249,7 +2264,7 @@ const color = createColorTheme({
         fg: tints2[dark ? 100 : 900].hex,
         bg: tints2[dark ? 950 : 50].hex,
         border: tints2[dark ? 800 : 300].hex,
-        focusRing: hues.blue[500].hex,
+        focusRing: color$1.hues.blue[500].hex,
         shadow: {
           outline: rgba(tints2[500].hex, 0.4),
           umbra: dark ? rgba(tints2[900].hex, 0.4) : rgba(tints2[500].hex, 0.2),
@@ -2302,7 +2317,7 @@ const color = createColorTheme({
         bg: bg2,
         bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
         border: mix(base.bg, tints[dark ? 800 : 200].hex),
-        fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
+        fg: mix(base.bg, dark ? color$1.black.hex : color$1.white.hex),
         muted: {
           fg: mix(base.bg, tints[dark ? 950 : 50].hex)
         },
@@ -2329,15 +2344,15 @@ const color = createColorTheme({
         bg: bg2,
         bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
         border: mix(base.bg, tints[dark ? 300 : 600].hex),
-        fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
+        fg: mix(base.bg, dark ? color$1.black.hex : color$1.white.hex),
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex)
         },
         accent: {
-          fg: mix2(bg2, hues.red[dark ? 800 : 200].hex)
+          fg: mix2(bg2, color$1.hues.red[dark ? 800 : 200].hex)
         },
         link: {
-          fg: mix2(bg2, hues.blue[dark ? 800 : 200].hex)
+          fg: mix2(bg2, color$1.hues.blue[dark ? 800 : 200].hex)
         },
         code: {
           bg: mix(bg2, tints[dark ? 950 : 50].hex),
@@ -2356,15 +2371,15 @@ const color = createColorTheme({
         bg: mix(base.bg, tints[dark ? 200 : 800].hex),
         bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
         border: mix(base.bg, tints[dark ? 200 : 800].hex),
-        fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
+        fg: mix(base.bg, dark ? color$1.black.hex : color$1.white.hex),
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex)
         },
         accent: {
-          fg: mix2(bg2, hues.red[dark ? 800 : 200].hex)
+          fg: mix2(bg2, color$1.hues.red[dark ? 800 : 200].hex)
         },
         link: {
-          fg: mix2(bg2, hues.blue[dark ? 800 : 200].hex)
+          fg: mix2(bg2, color$1.hues.blue[dark ? 800 : 200].hex)
         },
         code: {
           bg: mix(bg2, tints[dark ? 950 : 50].hex),
@@ -2386,15 +2401,15 @@ const color = createColorTheme({
         bg: bg2,
         bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
         border: mix(base.bg, tints[dark ? 200 : 800].hex),
-        fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
+        fg: mix(base.bg, dark ? color$1.black.hex : color$1.white.hex),
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex)
         },
         accent: {
-          fg: mix2(bg2, hues.red[dark ? 800 : 200].hex)
+          fg: mix2(bg2, color$1.hues.red[dark ? 800 : 200].hex)
         },
         link: {
-          fg: mix2(bg2, hues.blue[dark ? 800 : 200].hex)
+          fg: mix2(bg2, color$1.hues.blue[dark ? 800 : 200].hex)
         },
         code: {
           bg: mix(bg2, tints[dark ? 950 : 50].hex),
@@ -2412,15 +2427,15 @@ const color = createColorTheme({
       bg,
       bg2: mix2(bg, tints[dark ? 50 : 950].hex),
       border: mix(base.bg, tints[dark ? 400 : 500].hex),
-      fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
+      fg: mix(base.bg, dark ? color$1.black.hex : color$1.white.hex),
       muted: {
         fg: mix(base.bg, tints[dark ? 900 : 100].hex)
       },
       accent: {
-        fg: mix2(bg, hues.red[dark ? 900 : 100].hex)
+        fg: mix2(bg, color$1.hues.red[dark ? 900 : 100].hex)
       },
       link: {
-        fg: mix2(bg, hues.blue[dark ? 900 : 100].hex)
+        fg: mix2(bg, color$1.hues.blue[dark ? 900 : 100].hex)
       },
       code: {
         bg: mix(bg, tints[dark ? 950 : 50].hex),
@@ -2484,10 +2499,10 @@ const color = createColorTheme({
           fg: mix(base.bg, tints[dark ? 400 : 600].hex)
         },
         accent: {
-          fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
+          fg: mix(base.bg, color$1.hues.red[dark ? 400 : 500].hex)
         },
         link: {
-          fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex)
+          fg: mix(base.bg, color$1.hues.blue[dark ? 400 : 600].hex)
         },
         code: {
           bg: mix(bg2, tints[dark ? 950 : 50].hex),
@@ -2514,10 +2529,10 @@ const color = createColorTheme({
           fg: mix(base.bg, tints[dark ? 400 : 600].hex)
         },
         accent: {
-          fg: mix(bg2, hues.red[dark ? 400 : 500].hex)
+          fg: mix(bg2, color$1.hues.red[dark ? 400 : 500].hex)
         },
         link: {
-          fg: mix(bg2, hues.blue[dark ? 400 : 600].hex)
+          fg: mix(bg2, color$1.hues.blue[dark ? 400 : 600].hex)
         },
         code: {
           bg: mix(bg2, tints[dark ? 950 : 50].hex),
@@ -2544,10 +2559,10 @@ const color = createColorTheme({
           fg: mix(base.bg, tints[dark ? 400 : 600].hex)
         },
         accent: {
-          fg: mix(bg2, hues.red[dark ? 400 : 500].hex)
+          fg: mix(bg2, color$1.hues.red[dark ? 400 : 500].hex)
         },
         link: {
-          fg: mix(bg2, hues.blue[dark ? 400 : 600].hex)
+          fg: mix(bg2, color$1.hues.blue[dark ? 400 : 600].hex)
         },
         code: {
           bg: mix(bg2, tints[dark ? 950 : 50].hex),
@@ -2570,10 +2585,10 @@ const color = createColorTheme({
         fg: mix(base.bg, tints[dark ? 400 : 600].hex)
       },
       accent: {
-        fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
+        fg: mix(base.bg, color$1.hues.red[dark ? 400 : 500].hex)
       },
       link: {
-        fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex)
+        fg: mix(base.bg, color$1.hues.blue[dark ? 400 : 600].hex)
       },
       code: {
         bg: mix(base.bg, tints[dark ? 950 : 50].hex),
@@ -2662,10 +2677,10 @@ const color = createColorTheme({
         fg: mix(base.bg, tints[dark ? 400 : 600].hex)
       },
       accent: {
-        fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
+        fg: mix(base.bg, color$1.hues.red[dark ? 400 : 500].hex)
       },
       link: {
-        fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex)
+        fg: mix(base.bg, color$1.hues.blue[dark ? 400 : 600].hex)
       },
       code: {
         bg: mix(base.bg, tints[dark ? 950 : 50].hex),
@@ -2698,31 +2713,31 @@ const color = createColorTheme({
       return {
         bg: base.bg,
         fg: base.fg,
-        border: mix(base.bg, hues.gray[dark ? 700 : 300].hex),
-        placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex)
+        border: mix(base.bg, color$1.hues.gray[dark ? 700 : 300].hex),
+        placeholder: mix(base.bg, color$1.hues.gray[dark ? 600 : 400].hex)
       };
     }
     if (state === "disabled") {
       return {
-        bg: mix(base.bg, hues.gray[dark ? 950 : 50].hex),
-        fg: mix(base.bg, hues.gray[dark ? 700 : 300].hex),
-        border: mix(base.bg, hues.gray[dark ? 900 : 100].hex),
-        placeholder: mix(base.bg, hues.gray[dark ? 800 : 200].hex)
+        bg: mix(base.bg, color$1.hues.gray[dark ? 950 : 50].hex),
+        fg: mix(base.bg, color$1.hues.gray[dark ? 700 : 300].hex),
+        border: mix(base.bg, color$1.hues.gray[dark ? 900 : 100].hex),
+        placeholder: mix(base.bg, color$1.hues.gray[dark ? 800 : 200].hex)
       };
     }
     if (state === "readOnly") {
       return {
-        bg: mix(base.bg, hues.gray[dark ? 950 : 50].hex),
-        fg: mix(base.bg, hues.gray[dark ? 200 : 800].hex),
-        border: mix(base.bg, hues.gray[dark ? 800 : 200].hex),
-        placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex)
+        bg: mix(base.bg, color$1.hues.gray[dark ? 950 : 50].hex),
+        fg: mix(base.bg, color$1.hues.gray[dark ? 200 : 800].hex),
+        border: mix(base.bg, color$1.hues.gray[dark ? 800 : 200].hex),
+        placeholder: mix(base.bg, color$1.hues.gray[dark ? 600 : 400].hex)
       };
     }
     return {
       bg: base.bg,
       fg: base.fg,
       border: base.border,
-      placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex)
+      placeholder: mix(base.bg, color$1.hues.gray[dark ? 600 : 400].hex)
     };
   },
   selectable: _ref17 => {
@@ -2764,7 +2779,7 @@ const color = createColorTheme({
       key
     } = _ref18;
     const mix = dark ? screen : multiply;
-    return mix(base.bg, hues[key][dark ? 400 : 500].hex);
+    return mix(base.bg, color$1.hues[key][dark ? 400 : 500].hex);
   },
   syntax: _ref19 => {
     let {
@@ -2775,42 +2790,42 @@ const color = createColorTheme({
     const mainShade = dark ? 400 : 600;
     const secondaryShade = dark ? 600 : 400;
     return {
-      atrule: mix(base.bg, hues.purple[mainShade].hex),
-      attrName: mix(base.bg, hues.green[mainShade].hex),
-      attrValue: mix(base.bg, hues.yellow[mainShade].hex),
-      attribute: mix(base.bg, hues.yellow[mainShade].hex),
-      boolean: mix(base.bg, hues.purple[mainShade].hex),
-      builtin: mix(base.bg, hues.purple[mainShade].hex),
-      cdata: mix(base.bg, hues.yellow[mainShade].hex),
-      char: mix(base.bg, hues.yellow[mainShade].hex),
-      class: mix(base.bg, hues.orange[mainShade].hex),
-      className: mix(base.bg, hues.cyan[mainShade].hex),
-      comment: mix(base.bg, hues.gray[secondaryShade].hex),
-      constant: mix(base.bg, hues.purple[mainShade].hex),
-      deleted: mix(base.bg, hues.red[mainShade].hex),
-      doctype: mix(base.bg, hues.gray[secondaryShade].hex),
-      entity: mix(base.bg, hues.red[mainShade].hex),
-      function: mix(base.bg, hues.green[mainShade].hex),
-      hexcode: mix(base.bg, hues.blue[mainShade].hex),
-      id: mix(base.bg, hues.purple[mainShade].hex),
-      important: mix(base.bg, hues.purple[mainShade].hex),
-      inserted: mix(base.bg, hues.yellow[mainShade].hex),
-      keyword: mix(base.bg, hues.magenta[mainShade].hex),
-      number: mix(base.bg, hues.purple[mainShade].hex),
-      operator: mix(base.bg, hues.magenta[mainShade].hex),
-      prolog: mix(base.bg, hues.gray[secondaryShade].hex),
-      property: mix(base.bg, hues.blue[mainShade].hex),
-      pseudoClass: mix(base.bg, hues.yellow[mainShade].hex),
-      pseudoElement: mix(base.bg, hues.yellow[mainShade].hex),
-      punctuation: mix(base.bg, hues.gray[mainShade].hex),
-      regex: mix(base.bg, hues.blue[mainShade].hex),
-      selector: mix(base.bg, hues.red[mainShade].hex),
-      string: mix(base.bg, hues.yellow[mainShade].hex),
-      symbol: mix(base.bg, hues.purple[mainShade].hex),
-      tag: mix(base.bg, hues.red[mainShade].hex),
-      unit: mix(base.bg, hues.orange[mainShade].hex),
-      url: mix(base.bg, hues.red[mainShade].hex),
-      variable: mix(base.bg, hues.red[mainShade].hex)
+      atrule: mix(base.bg, color$1.hues.purple[mainShade].hex),
+      attrName: mix(base.bg, color$1.hues.green[mainShade].hex),
+      attrValue: mix(base.bg, color$1.hues.yellow[mainShade].hex),
+      attribute: mix(base.bg, color$1.hues.yellow[mainShade].hex),
+      boolean: mix(base.bg, color$1.hues.purple[mainShade].hex),
+      builtin: mix(base.bg, color$1.hues.purple[mainShade].hex),
+      cdata: mix(base.bg, color$1.hues.yellow[mainShade].hex),
+      char: mix(base.bg, color$1.hues.yellow[mainShade].hex),
+      class: mix(base.bg, color$1.hues.orange[mainShade].hex),
+      className: mix(base.bg, color$1.hues.cyan[mainShade].hex),
+      comment: mix(base.bg, color$1.hues.gray[secondaryShade].hex),
+      constant: mix(base.bg, color$1.hues.purple[mainShade].hex),
+      deleted: mix(base.bg, color$1.hues.red[mainShade].hex),
+      doctype: mix(base.bg, color$1.hues.gray[secondaryShade].hex),
+      entity: mix(base.bg, color$1.hues.red[mainShade].hex),
+      function: mix(base.bg, color$1.hues.green[mainShade].hex),
+      hexcode: mix(base.bg, color$1.hues.blue[mainShade].hex),
+      id: mix(base.bg, color$1.hues.purple[mainShade].hex),
+      important: mix(base.bg, color$1.hues.purple[mainShade].hex),
+      inserted: mix(base.bg, color$1.hues.yellow[mainShade].hex),
+      keyword: mix(base.bg, color$1.hues.magenta[mainShade].hex),
+      number: mix(base.bg, color$1.hues.purple[mainShade].hex),
+      operator: mix(base.bg, color$1.hues.magenta[mainShade].hex),
+      prolog: mix(base.bg, color$1.hues.gray[secondaryShade].hex),
+      property: mix(base.bg, color$1.hues.blue[mainShade].hex),
+      pseudoClass: mix(base.bg, color$1.hues.yellow[mainShade].hex),
+      pseudoElement: mix(base.bg, color$1.hues.yellow[mainShade].hex),
+      punctuation: mix(base.bg, color$1.hues.gray[mainShade].hex),
+      regex: mix(base.bg, color$1.hues.blue[mainShade].hex),
+      selector: mix(base.bg, color$1.hues.red[mainShade].hex),
+      string: mix(base.bg, color$1.hues.yellow[mainShade].hex),
+      symbol: mix(base.bg, color$1.hues.purple[mainShade].hex),
+      tag: mix(base.bg, color$1.hues.red[mainShade].hex),
+      unit: mix(base.bg, color$1.hues.orange[mainShade].hex),
+      url: mix(base.bg, color$1.hues.red[mainShade].hex),
+      variable: mix(base.bg, color$1.hues.red[mainShade].hex)
     };
   }
 });
@@ -3090,17 +3105,17 @@ function getGlobalScope() {
 }
 const globalScope = getGlobalScope();
 const key$7 = Symbol.for("@sanity/ui/context/theme");
-globalScope[key$7] = globalScope[key$7] || createContext(null);
+globalScope[key$7] = globalScope[key$7] || react.createContext(null);
 const ThemeContext = globalScope[key$7];
 function ThemeProvider(props) {
-  const parentTheme = useContext(ThemeContext);
+  const parentTheme = react.useContext(ThemeContext);
   const {
     children,
     scheme = (parentTheme == null ? void 0 : parentTheme.scheme) || "light",
     theme: themeProp = (parentTheme == null ? void 0 : parentTheme.theme) || null,
     tone = (parentTheme == null ? void 0 : parentTheme.tone) || "default"
   } = props;
-  const theme = useMemo(() => {
+  const theme = react.useMemo(() => {
     if (!themeProp) return null;
     const {
         color: rootColor,
@@ -3117,20 +3132,20 @@ function ThemeProvider(props) {
       })
     };
   }, [scheme, themeProp, tone]);
-  const value = useMemo(() => themeProp && {
+  const value = react.useMemo(() => themeProp && {
     version: 0,
     theme: themeProp,
     scheme,
     tone
   }, [themeProp, scheme, tone]);
   if (!theme) {
-    return /* @__PURE__ */jsx("pre", {
+    return /* @__PURE__ */jsxRuntime.jsx("pre", {
       children: 'ThemeProvider: no "theme" property provided'
     });
   }
-  return /* @__PURE__ */jsx(ThemeContext.Provider, {
+  return /* @__PURE__ */jsxRuntime.jsx(ThemeContext.Provider, {
     value,
-    children: /* @__PURE__ */jsx(ThemeProvider$1, {
+    children: /* @__PURE__ */jsxRuntime.jsx(styled.ThemeProvider, {
       theme,
       children
     })
@@ -3140,7 +3155,7 @@ function isRecord(value) {
   return Boolean(value && typeof value === "object");
 }
 function useRootTheme() {
-  const value = useContext(ThemeContext);
+  const value = react.useContext(ThemeContext);
   if (!value) {
     throw new Error("useRootTheme(): missing context value");
   }
@@ -3156,7 +3171,7 @@ function ThemeColorProvider(props) {
     tone
   } = props;
   const root = useRootTheme();
-  return /* @__PURE__ */jsx(ThemeProvider, {
+  return /* @__PURE__ */jsxRuntime.jsx(ThemeProvider, {
     scheme: scheme || root.scheme,
     theme: root.theme,
     tone,
@@ -3164,7 +3179,7 @@ function ThemeColorProvider(props) {
   });
 }
 function useTheme() {
-  return useTheme$1();
+  return styled.useTheme();
 }
 const MEDIA_MANAGER_CACHE = /* @__PURE__ */new WeakMap();
 function _getMediaQuery(media, index) {
@@ -3243,18 +3258,18 @@ function useMediaIndex() {
   const {
     media
   } = theme.sanity;
-  const manager = useMemo(() => _getMediaManager(media), [media]);
-  const [index, setIndex] = useState(manager.getCurrentIndex);
-  useEffect(() => manager.subscribe(setIndex), [manager]);
+  const manager = react.useMemo(() => _getMediaManager(media), [media]);
+  const [index, setIndex] = react.useState(manager.getCurrentIndex);
+  react.useEffect(() => manager.subscribe(setIndex), [manager]);
   return index;
 }
 function usePrefersDark() {
-  const mq = useMemo(() => {
+  const mq = react.useMemo(() => {
     if (typeof window === "undefined") return void 0;
     return window.matchMedia("(prefers-color-scheme: dark)");
   }, []);
-  const [dark, setDark] = useState((mq == null ? void 0 : mq.matches) || false);
-  useEffect(() => {
+  const [dark, setDark] = react.useState((mq == null ? void 0 : mq.matches) || false);
+  react.useEffect(() => {
     if (!mq) return void 0;
     setDark(mq.matches);
     const handleChange = () => setDark(mq.matches);
@@ -3263,9 +3278,9 @@ function usePrefersDark() {
   }, [mq]);
   return dark;
 }
-const useIsomorphicEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const useIsomorphicEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 function useForwardedRef(ref) {
-  const innerRef = useRef(null);
+  const innerRef = react.useRef(null);
   useIsomorphicEffect(() => {
     if (!ref) return;
     if (typeof ref === "function") {
@@ -3277,7 +3292,7 @@ function useForwardedRef(ref) {
   return innerRef;
 }
 function useCustomValidity(ref, customValidity) {
-  useEffect(() => {
+  react.useEffect(() => {
     if (ref.current) {
       ref.current.setCustomValidity(customValidity || "");
     }
@@ -3791,7 +3806,7 @@ function responsiveInputPaddingIconRightStyle(props) {
     $iconRight: true
   }));
 }
-const ROOT_STYLE = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
+const ROOT_STYLE = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
 function textInputRootStyle() {
   return ROOT_STYLE;
 }
@@ -3804,7 +3819,7 @@ function textInputBaseStyle(props) {
   } = props;
   const font = theme.sanity.fonts.text;
   const color = theme.sanity.color.input;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n    }\n  "])), font.family, $weight && font.weights[$weight] || font.weights.regular, $scheme, $tone, color.default.enabled.fg, color.default.enabled.placeholder, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
+  return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n    }\n  "])), font.family, $weight && font.weights[$weight] || font.weights.regular, $scheme, $tone, color.default.enabled.fg, color.default.enabled.placeholder, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
 }
 function textInputFontSizeStyle(props) {
   const {
@@ -3835,7 +3850,7 @@ function textInputRepresentationStyle(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.input;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
+  return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }), color.invalid.enabled.bg, color.invalid.enabled.fg, focusRingBorderStyle({
@@ -3913,11 +3928,11 @@ function textBaseStyle(props) {
   const {
     weights
   } = theme.sanity.fonts.text;
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
+  return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
 }
-const Root$E = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
-const SpanWithTextOverflow$2 = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
-const Text = forwardRef(function Text2(props, ref) {
+const Root$E = styled__default.default.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
+const SpanWithTextOverflow$2 = styled__default.default.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+const Text = react.forwardRef(function Text2(props, ref) {
   const {
       accent = false,
       align,
@@ -3930,11 +3945,11 @@ const Text = forwardRef(function Text2(props, ref) {
     restProps = _objectWithoutProperties(props, _excluded2);
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
-    children = /* @__PURE__ */jsx(SpanWithTextOverflow$2, {
+    children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow$2, {
       children
     });
   }
-  return /* @__PURE__ */jsx(Root$E, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$E, _objectSpread(_objectSpread({
     "data-ui": "Text"
   }, restProps), {}, {
     $accent: accent,
@@ -3943,7 +3958,7 @@ const Text = forwardRef(function Text2(props, ref) {
     ref,
     $size: useArrayProp(size),
     $weight: weight,
-    children: /* @__PURE__ */jsx("span", {
+    children: /* @__PURE__ */jsxRuntime.jsx("span", {
       children
     })
   }));
@@ -4092,12 +4107,12 @@ function avatarStrokeStyle() {
     }
   };
 }
-const Root$D = styled.div(responsiveAvatarSizeStyle, avatarStyle.root);
-const Arrow = styled.div(avatarStyle.arrow);
-const BgStroke = styled.ellipse(avatarStyle.bgStroke);
-const Stroke = styled.ellipse(avatarStyle.stroke);
-const Initials = styled.div(avatarStyle.initials);
-const Avatar = forwardRef(function Avatar2(props, ref) {
+const Root$D = styled__default.default.div(responsiveAvatarSizeStyle, avatarStyle.root);
+const Arrow = styled__default.default.div(avatarStyle.arrow);
+const BgStroke = styled__default.default.ellipse(avatarStyle.bgStroke);
+const Stroke = styled__default.default.ellipse(avatarStyle.stroke);
+const Initials = styled__default.default.div(avatarStyle.initials);
+const Avatar = react.forwardRef(function Avatar2(props, ref) {
   const {
       as: asProp,
       color: colorKey = "gray",
@@ -4111,33 +4126,33 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
       size: sizeProp = 0
     } = props,
     restProps = _objectWithoutProperties(props, _excluded3);
-  const as = ReactIs.isValidElementType(asProp) ? asProp : "div";
+  const as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div";
   const size = useArrayProp(sizeProp);
   const theme = useTheme();
   const color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray;
   const avatarSize = theme.sanity.avatar.sizes[size[0]] || theme.sanity.avatar.sizes[0];
   const _sizeRem = avatarSize.size;
   const _radius = _sizeRem / 2;
-  const elementId = useId();
-  const [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside");
-  const [imageFailed, setImageFailed] = useState(false);
+  const elementId = react.useId();
+  const [arrowPosition, setArrowPosition] = react.useState(animateArrowFrom || arrowPositionProp || "inside");
+  const [imageFailed, setImageFailed] = react.useState(false);
   const imageId = "avatar-image-".concat(elementId);
-  useEffect(() => {
+  react.useEffect(() => {
     if (arrowPosition === arrowPositionProp) return void 0;
     const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp));
     return () => cancelAnimationFrame(raf);
   }, [arrowPosition, arrowPositionProp]);
-  useEffect(() => {
+  react.useEffect(() => {
     if (src) setImageFailed(false);
   }, [src]);
-  const handleImageError = useCallback(() => {
+  const handleImageError = react.useCallback(() => {
     setImageFailed(true);
     if (onImageLoadError) {
       onImageLoadError(new Error("Avatar: the image failed to load"));
     }
   }, [onImageLoadError]);
-  const initialsSize = useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
-  return /* @__PURE__ */jsxs(Root$D, _objectSpread(_objectSpread({
+  const initialsSize = react.useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$D, _objectSpread(_objectSpread({
     as,
     "data-as": typeof as === "string" ? as : void 0,
     "data-ui": "Avatar"
@@ -4149,45 +4164,45 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
     "data-status": status,
     ref,
     title,
-    children: [/* @__PURE__ */jsx(Arrow, {
-      children: /* @__PURE__ */jsx("svg", {
+    children: [/* @__PURE__ */jsxRuntime.jsx(Arrow, {
+      children: /* @__PURE__ */jsxRuntime.jsx("svg", {
         width: "11",
         height: "7",
         viewBox: "0 0 11 7",
         fill: "none",
-        children: /* @__PURE__ */jsx("path", {
+        children: /* @__PURE__ */jsxRuntime.jsx("path", {
           d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z",
           fill: color
         })
       })
-    }), !imageFailed && src && /* @__PURE__ */jsxs("svg", {
+    }), !imageFailed && src && /* @__PURE__ */jsxRuntime.jsxs("svg", {
       viewBox: "0 0 ".concat(_sizeRem, " ").concat(_sizeRem),
       fill: "none",
-      children: [/* @__PURE__ */jsx("defs", {
-        children: /* @__PURE__ */jsx("pattern", {
+      children: [/* @__PURE__ */jsxRuntime.jsx("defs", {
+        children: /* @__PURE__ */jsxRuntime.jsx("pattern", {
           id: imageId,
           patternContentUnits: "objectBoundingBox",
           width: "1",
           height: "1",
-          children: /* @__PURE__ */jsx("image", {
+          children: /* @__PURE__ */jsxRuntime.jsx("image", {
             href: src,
             width: "1",
             height: "1",
             onError: handleImageError
           })
         })
-      }), /* @__PURE__ */jsx("circle", {
+      }), /* @__PURE__ */jsxRuntime.jsx("circle", {
         cx: _radius,
         cy: _radius,
         r: _radius,
         fill: "url(#".concat(imageId, ")")
-      }), /* @__PURE__ */jsx(BgStroke, {
+      }), /* @__PURE__ */jsxRuntime.jsx(BgStroke, {
         cx: _radius,
         cy: _radius,
         rx: _radius,
         ry: _radius,
         vectorEffect: "non-scaling-stroke"
-      }), /* @__PURE__ */jsx(Stroke, {
+      }), /* @__PURE__ */jsxRuntime.jsx(Stroke, {
         cx: _radius,
         cy: _radius,
         rx: _radius,
@@ -4195,12 +4210,12 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
         stroke: color,
         vectorEffect: "non-scaling-stroke"
       })]
-    }), (imageFailed || !src) && initials && /* @__PURE__ */jsx(Fragment, {
-      children: /* @__PURE__ */jsx(Initials, {
-        children: /* @__PURE__ */jsx(Text, {
+    }), (imageFailed || !src) && initials && /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: /* @__PURE__ */jsxRuntime.jsx(Initials, {
+        children: /* @__PURE__ */jsxRuntime.jsx(Text, {
           as: "span",
           size: initialsSize,
-          children: /* @__PURE__ */jsx("strong", {
+          children: /* @__PURE__ */jsxRuntime.jsx("strong", {
             children: initials
           })
         })
@@ -4230,24 +4245,24 @@ function _avatarCounterBaseStyle(props) {
   const {
     theme
   } = props;
-  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
+  return styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
 }
-const Root$C = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
-const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
+const Root$C = styled__default.default.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
+const AvatarCounter = react.forwardRef(function AvatarCounter2(props, ref) {
   const {
     count,
     size: sizeProp = 0
   } = props;
   const size = useArrayProp(sizeProp);
-  const counterSize = useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
-  return /* @__PURE__ */jsx(Root$C, {
+  const counterSize = react.useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
+  return /* @__PURE__ */jsxRuntime.jsx(Root$C, {
     $size: size,
     "data-ui": "AvatarCounter",
     ref,
-    children: /* @__PURE__ */jsx(Text, {
+    children: /* @__PURE__ */jsxRuntime.jsx(Text, {
       as: "span",
       size: counterSize,
-      children: /* @__PURE__ */jsx("strong", {
+      children: /* @__PURE__ */jsxRuntime.jsx("strong", {
         children: count
       })
     })
@@ -4255,9 +4270,9 @@ const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
 });
 function childrenToElementArray(children) {
   const childrenArray = Array.isArray(children) ? children : [children];
-  return childrenArray.filter(node => isElement$1(node) || isFragment(node) || typeof node === "string");
+  return childrenArray.filter(node => ReactIs.isElement(node) || ReactIs.isFragment(node) || typeof node === "string");
 }
-const BASE_STYLES = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
+const BASE_STYLES = styled.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
 function avatarStackStyle() {
   return BASE_STYLES;
 }
@@ -4279,8 +4294,8 @@ function responsiveAvatarStackSizeStyle(props) {
     };
   });
 }
-const Root$B = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
-const AvatarStack = forwardRef(function AvatarStack2(props, ref) {
+const Root$B = styled__default.default.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
+const AvatarStack = react.forwardRef(function AvatarStack2(props, ref) {
   const {
       children: childrenProp,
       maxLength: maxLengthProp = 4,
@@ -4294,29 +4309,29 @@ const AvatarStack = forwardRef(function AvatarStack2(props, ref) {
   const visibleCount = maxLength - 1;
   const extraCount = len - visibleCount;
   const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
-  return /* @__PURE__ */jsxs(Root$B, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$B, _objectSpread(_objectSpread({
     "data-ui": "AvatarStack"
   }, restProps), {}, {
     ref,
     $size: size,
-    children: [len === 0 && /* @__PURE__ */jsx("div", {
-      children: /* @__PURE__ */jsx(AvatarCounter, {
+    children: [len === 0 && /* @__PURE__ */jsxRuntime.jsx("div", {
+      children: /* @__PURE__ */jsxRuntime.jsx(AvatarCounter, {
         count: len
       })
-    }), len !== 0 && extraCount > 1 && /* @__PURE__ */jsx("div", {
-      children: /* @__PURE__ */jsx(AvatarCounter, {
+    }), len !== 0 && extraCount > 1 && /* @__PURE__ */jsxRuntime.jsx("div", {
+      children: /* @__PURE__ */jsxRuntime.jsx(AvatarCounter, {
         count: extraCount,
         size
       })
-    }), visibleChildren.map((child, childIndex) => /* @__PURE__ */jsx("div", {
-      children: cloneElement(child, {
+    }), visibleChildren.map((child, childIndex) => /* @__PURE__ */jsxRuntime.jsx("div", {
+      children: react.cloneElement(child, {
         size
       })
     }, String(childIndex)))]
   }));
 });
-const Root$A = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
-const Box = forwardRef(function Box2(props, ref) {
+const Root$A = styled__default.default.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
+const Box = react.forwardRef(function Box2(props, ref) {
   const {
       as: asProp = "div",
       column,
@@ -4346,7 +4361,7 @@ const Box = forwardRef(function Box2(props, ref) {
       sizing
     } = props,
     restProps = _objectWithoutProperties(props, _excluded5);
-  return /* @__PURE__ */jsx(Root$A, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$A, _objectSpread(_objectSpread({
     "data-as": typeof asProp === "string" ? asProp : void 0,
     "data-ui": "Box"
   }, restProps), {}, {
@@ -4389,11 +4404,11 @@ function labelBaseStyle(props) {
   const {
     fonts
   } = theme.sanity;
-  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    text-transform: uppercase;\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      color: var(--card-muted-fg-color);\n    "]))), fonts.code.family);
+  return styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    text-transform: uppercase;\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      color: var(--card-muted-fg-color);\n    "]))), fonts.code.family);
 }
-const Root$z = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
-const SpanWithTextOverflow$1 = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
-const Label = forwardRef(function Label2(props, ref) {
+const Root$z = styled__default.default.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
+const SpanWithTextOverflow$1 = styled__default.default.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+const Label = react.forwardRef(function Label2(props, ref) {
   const {
       accent,
       align,
@@ -4406,15 +4421,15 @@ const Label = forwardRef(function Label2(props, ref) {
     restProps = _objectWithoutProperties(props, _excluded6);
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
-    children = /* @__PURE__ */jsx(SpanWithTextOverflow$1, {
+    children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow$1, {
       children
     });
   } else {
-    children = /* @__PURE__ */jsx("span", {
+    children = /* @__PURE__ */jsxRuntime.jsx("span", {
       children
     });
   }
-  return /* @__PURE__ */jsx(Root$z, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$z, _objectSpread(_objectSpread({
     "data-ui": "Label"
   }, restProps), {}, {
     $accent: accent,
@@ -4444,8 +4459,8 @@ function badgeStyle(props) {
     }
   };
 }
-const Root$y = styled(Box)(responsiveRadiusStyle, badgeStyle);
-const Badge = forwardRef(function Badge2(props, ref) {
+const Root$y = styled__default.default(Box)(responsiveRadiusStyle, badgeStyle);
+const Badge = react.forwardRef(function Badge2(props, ref) {
   const {
       children,
       fontSize,
@@ -4455,7 +4470,7 @@ const Badge = forwardRef(function Badge2(props, ref) {
       tone = "default"
     } = props,
     restProps = _objectWithoutProperties(props, _excluded7);
-  return /* @__PURE__ */jsx(Root$y, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$y, _objectSpread(_objectSpread({
     "data-ui": "Badge"
   }, restProps), {}, {
     $mode: mode,
@@ -4463,14 +4478,14 @@ const Badge = forwardRef(function Badge2(props, ref) {
     $radius: useArrayProp(radius),
     padding: useArrayProp(padding),
     ref,
-    children: /* @__PURE__ */jsx(Label, {
+    children: /* @__PURE__ */jsxRuntime.jsx(Label, {
       size: fontSize,
       children
     })
   }));
 });
-const Root$x = styled(Box)(flexItemStyle, responsiveFlexStyle);
-const Flex = forwardRef(function Flex2(props, ref) {
+const Root$x = styled__default.default(Box)(flexItemStyle, responsiveFlexStyle);
+const Flex = react.forwardRef(function Flex2(props, ref) {
   const {
       align,
       as,
@@ -4480,7 +4495,7 @@ const Flex = forwardRef(function Flex2(props, ref) {
       wrap
     } = props,
     restProps = _objectWithoutProperties(props, _excluded8);
-  return /* @__PURE__ */jsx(Root$x, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$x, _objectSpread(_objectSpread({
     "data-ui": "Flex"
   }, restProps), {}, {
     $align: useArrayProp(align),
@@ -4492,14 +4507,14 @@ const Flex = forwardRef(function Flex2(props, ref) {
     ref
   }));
 });
-const rotate$1 = keyframes(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-const Root$w = styled(Text)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
-const Spinner = forwardRef(function Spinner2(props, ref) {
-  return /* @__PURE__ */jsx(Root$w, _objectSpread(_objectSpread({
+const rotate$1 = styled.keyframes(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+const Root$w = styled__default.default(Text)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
+const Spinner = react.forwardRef(function Spinner2(props, ref) {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$w, _objectSpread(_objectSpread({
     "data-ui": "Spinner"
   }, props), {}, {
     ref,
-    children: /* @__PURE__ */jsx(SpinnerIcon, {})
+    children: /* @__PURE__ */jsxRuntime.jsx(icons.SpinnerIcon, {})
   }));
 });
 function _colorVarsStyle(base, color) {
@@ -4528,7 +4543,7 @@ function _colorVarsStyle(base, color) {
   };
 }
 function buttonBaseStyles() {
-  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])));
+  return styled.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])));
 }
 const buttonTheme = {
   border: {
@@ -4575,9 +4590,9 @@ function buttonColorStyles(props) {
     }
   }, (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.button) == null ? void 0 : _b.root].filter(Boolean);
 }
-const Root$v = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
-const LoadingBox = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--card-bg-color);\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])));
-const Button = forwardRef(function Button2(props, ref) {
+const Root$v = styled__default.default.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
+const LoadingBox = styled__default.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--card-bg-color);\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])));
+const Button = react.forwardRef(function Button2(props, ref) {
   const {
       children,
       disabled,
@@ -4614,7 +4629,7 @@ const Button = forwardRef(function Button2(props, ref) {
   const radius = useArrayProp(radiusProp);
   const space = useArrayProp(spaceProp);
   const theme = useTheme();
-  const boxProps = useMemo(() => ({
+  const boxProps = react.useMemo(() => ({
     padding,
     paddingX,
     paddingY,
@@ -4623,7 +4638,7 @@ const Button = forwardRef(function Button2(props, ref) {
     paddingLeft,
     paddingRight
   }), [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]);
-  return /* @__PURE__ */jsxs(Root$v, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$v, _objectSpread(_objectSpread({
     "data-ui": "Button"
   }, restProps), {}, {
     $mode: mode,
@@ -4634,34 +4649,34 @@ const Button = forwardRef(function Button2(props, ref) {
     disabled: Boolean(loading || disabled),
     ref,
     type,
-    children: [Boolean(loading) && /* @__PURE__ */jsx(LoadingBox, {
-      children: /* @__PURE__ */jsx(Spinner, {})
-    }), (icon || text || iconRight) && /* @__PURE__ */jsx(Box, _objectSpread(_objectSpread({
+    children: [Boolean(loading) && /* @__PURE__ */jsxRuntime.jsx(LoadingBox, {
+      children: /* @__PURE__ */jsxRuntime.jsx(Spinner, {})
+    }), (icon || text || iconRight) && /* @__PURE__ */jsxRuntime.jsx(Box, _objectSpread(_objectSpread({
       as: "span"
     }, boxProps), {}, {
-      children: /* @__PURE__ */jsxs(Flex, {
+      children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
         as: "span",
         justify,
-        children: [icon && /* @__PURE__ */jsxs(Text, {
+        children: [icon && /* @__PURE__ */jsxRuntime.jsxs(Text, {
           size: fontSize,
-          children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
-        }), text && /* @__PURE__ */jsx(Box, {
+          children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
+        }), text && /* @__PURE__ */jsxRuntime.jsx(Box, {
           flex: iconRight ? 1 : void 0,
           marginLeft: icon ? space : void 0,
           marginRight: iconRight ? space : void 0,
-          children: /* @__PURE__ */jsx(Text, {
+          children: /* @__PURE__ */jsxRuntime.jsx(Text, {
             align: textAlign,
             size: fontSize,
             textOverflow: "ellipsis",
             weight: theme.sanity.button.textWeight,
             children: text
           })
-        }), iconRight && /* @__PURE__ */jsxs(Text, {
+        }), iconRight && /* @__PURE__ */jsxRuntime.jsxs(Text, {
           size: fontSize,
-          children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
+          children: [react.isValidElement(iconRight) && iconRight, ReactIs.isValidElementType(iconRight) && react.createElement(iconRight)]
         })]
       })
-    })), children && /* @__PURE__ */jsx(Box, _objectSpread(_objectSpread({
+    })), children && /* @__PURE__ */jsxRuntime.jsx(Box, _objectSpread(_objectSpread({
       as: "span"
     }, boxProps), {}, {
       children
@@ -4677,7 +4692,7 @@ function cardBaseStyle(props) {
     theme
   } = props;
   const space = theme.sanity.space;
-  return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
+  return styled.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && styled.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
 }
 function cardColorStyle(props) {
   var _a, _b;
@@ -4698,7 +4713,7 @@ function cardColorStyle(props) {
     width: 0,
     color: "var(--card-border-color)"
   };
-  return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    color-scheme: ", ";\n\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      --card-focus-ring-box-shadow: none;\n\n      cursor: default;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      cursor: pointer;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), dark ? "dark" : "light", _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
+  return styled.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    color-scheme: ", ";\n\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      --card-focus-ring-box-shadow: none;\n\n      cursor: default;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      cursor: pointer;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), dark ? "dark" : "light", _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
     base,
     border,
     focusRing
@@ -4708,8 +4723,8 @@ function cardColorStyle(props) {
     focusRing
   }) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.card) == null ? void 0 : _b.root);
 }
-const Root$u = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
-const Card = forwardRef(function Card2(props, ref) {
+const Root$u = styled__default.default(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
+const Card = react.forwardRef(function Card2(props, ref) {
   const {
       __unstable_checkered: checkered = false,
       __unstable_focusRing: focusRing = false,
@@ -4727,13 +4742,13 @@ const Card = forwardRef(function Card2(props, ref) {
       tone: toneProp = "default"
     } = props,
     restProps = _objectWithoutProperties(props, _excluded10);
-  const as = isValidElementType(asProp) ? asProp : "div";
+  const as = ReactIs.isValidElementType(asProp) ? asProp : "div";
   const rootTheme = useRootTheme();
   const tone = toneProp === "inherit" ? rootTheme.tone : toneProp;
-  return /* @__PURE__ */jsx(ThemeColorProvider, {
+  return /* @__PURE__ */jsxRuntime.jsx(ThemeColorProvider, {
     scheme,
     tone,
-    children: /* @__PURE__ */jsx(Root$u, _objectSpread(_objectSpread({
+    children: /* @__PURE__ */jsxRuntime.jsx(Root$u, _objectSpread(_objectSpread({
       "data-as": typeof as === "string" ? as : void 0,
       "data-scheme": rootTheme.scheme,
       "data-ui": "Card",
@@ -4759,7 +4774,7 @@ const Card = forwardRef(function Card2(props, ref) {
   });
 });
 function checkboxBaseStyles() {
-  return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    position: relative;\n    display: inline-block;\n  "])));
+  return styled.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    position: relative;\n    display: inline-block;\n  "])));
 }
 function inputElementStyles(props) {
   const {
@@ -4771,7 +4786,7 @@ function inputElementStyles(props) {
     input,
     radius
   } = theme.sanity;
-  return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    opacity: 0;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n\n    & + span {\n      position: relative;\n      display: block;\n      height: ", ";\n      width: ", ";\n      box-sizing: border-box;\n      box-shadow: ", ";\n      border-radius: ", ";\n      line-height: 1;\n      background-color: ", ";\n\n      & > svg {\n        display: block;\n        position: absolute;\n        opacity: 0;\n        height: 100%;\n        width: 100%;\n\n        & > path {\n          vector-effect: non-scaling-stroke;\n          stroke-width: 2 !important;\n        }\n      }\n    }\n\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span > svg:first-child {\n      opacity: 1;\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:not([data-read-only]):disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:indeterminate + span > svg:last-child {\n      opacity: 1;\n    }\n  "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
+  return styled.css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    opacity: 0;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n\n    & + span {\n      position: relative;\n      display: block;\n      height: ", ";\n      width: ", ";\n      box-sizing: border-box;\n      box-shadow: ", ";\n      border-radius: ", ";\n      line-height: 1;\n      background-color: ", ";\n\n      & > svg {\n        display: block;\n        position: absolute;\n        opacity: 0;\n        height: 100%;\n        width: 100%;\n\n        & > path {\n          vector-effect: non-scaling-stroke;\n          stroke-width: 2 !important;\n        }\n      }\n    }\n\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span > svg:first-child {\n      opacity: 1;\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:not([data-read-only]):disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:indeterminate + span > svg:last-child {\n      opacity: 1;\n    }\n  "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }), rem(radius[2]), color.default.enabled.bg, focusRingStyle({
@@ -4791,9 +4806,9 @@ function inputElementStyles(props) {
     color: color.default.disabled.border
   }), color.default.disabled.fg);
 }
-const Root$t = styled.div(checkboxBaseStyles);
-const Input$5 = styled.input(inputElementStyles);
-const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
+const Root$t = styled__default.default.div(checkboxBaseStyles);
+const Input$5 = styled__default.default.input(inputElementStyles);
+const Checkbox = react.forwardRef(function Checkbox2(props, forwardedRef) {
   const {
       checked,
       className,
@@ -4806,16 +4821,16 @@ const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
     restProps = _objectWithoutProperties(props, _excluded11);
   const ref = useForwardedRef(forwardedRef);
   useCustomValidity(ref, customValidity);
-  useEffect(() => {
+  react.useEffect(() => {
     if (ref.current) {
       ref.current.indeterminate = indeterminate || false;
     }
   }, [indeterminate, ref]);
-  return /* @__PURE__ */jsxs(Root$t, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$t, {
     className,
     "data-ui": "Checkbox",
     style,
-    children: [/* @__PURE__ */jsx(Input$5, _objectSpread(_objectSpread({
+    children: [/* @__PURE__ */jsxRuntime.jsx(Input$5, _objectSpread(_objectSpread({
       "data-read-only": !disabled && readOnly ? "" : void 0
     }, restProps), {}, {
       checked,
@@ -4823,8 +4838,8 @@ const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
       type: "checkbox",
       readOnly,
       ref
-    })), /* @__PURE__ */jsxs("span", {
-      children: [/* @__PURE__ */jsx(CheckmarkIcon, {}), /* @__PURE__ */jsx(RemoveIcon, {})]
+    })), /* @__PURE__ */jsxRuntime.jsxs("span", {
+      children: [/* @__PURE__ */jsxRuntime.jsx(icons.CheckmarkIcon, {}), /* @__PURE__ */jsxRuntime.jsx(icons.RemoveIcon, {})]
     })]
   });
 });
@@ -4945,10 +4960,10 @@ function codeSyntaxHighlightingStyle(_ref20) {
   };
 }
 function codeBaseStyle() {
-  return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    color: var(--card-code-fg-color);\n\n    & code {\n      font-family: inherit;\n\n      &.refractor .token {\n        ", "\n      }\n    }\n\n    & a {\n      color: inherit;\n      text-decoration: underline;\n      border-radius: 1px;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), codeSyntaxHighlightingStyle);
+  return styled.css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    color: var(--card-code-fg-color);\n\n    & code {\n      font-family: inherit;\n\n      &.refractor .token {\n        ", "\n      }\n    }\n\n    & a {\n      color: inherit;\n      text-decoration: underline;\n      border-radius: 1px;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), codeSyntaxHighlightingStyle);
 }
-const Root$s = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
-const Code = forwardRef(function Code2(props, ref) {
+const Root$s = styled__default.default.pre(codeBaseStyle, responsiveCodeFontStyle);
+const Code = react.forwardRef(function Code2(props, ref) {
   const {
       children,
       language: languageProp,
@@ -4957,16 +4972,16 @@ const Code = forwardRef(function Code2(props, ref) {
     } = props,
     restProps = _objectWithoutProperties(props, _excluded12);
   const language = typeof languageProp === "string" ? languageProp : void 0;
-  const registered = language ? Refractor.hasLanguage(language) : false;
-  return /* @__PURE__ */jsxs(Root$s, _objectSpread(_objectSpread({
+  const registered = language ? Refractor__default.default.hasLanguage(language) : false;
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$s, _objectSpread(_objectSpread({
     "data-ui": "Code"
   }, restProps), {}, {
     $size: useArrayProp(size),
     $weight: weight,
     ref,
-    children: [!(language && registered) && /* @__PURE__ */jsx("code", {
+    children: [!(language && registered) && /* @__PURE__ */jsxRuntime.jsx("code", {
       children
-    }), language && registered && /* @__PURE__ */jsx(Refractor, {
+    }), language && registered && /* @__PURE__ */jsxRuntime.jsx(Refractor__default.default, {
       inline: true,
       language,
       value: String(children)
@@ -4992,14 +5007,14 @@ function responsiveContainerWidthStyle(props) {
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
 }
-const Root$r = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle);
-const Container = forwardRef(function Container2(props, ref) {
+const Root$r = styled__default.default(Box)(containerBaseStyle, responsiveContainerWidthStyle);
+const Container = react.forwardRef(function Container2(props, ref) {
   const {
       as,
       width = 2
     } = props,
     restProps = _objectWithoutProperties(props, _excluded13);
-  return /* @__PURE__ */jsx(Root$r, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$r, _objectSpread(_objectSpread({
     "data-ui": "Container"
   }, restProps), {}, {
     $width: useArrayProp(width),
@@ -5007,8 +5022,8 @@ const Container = forwardRef(function Container2(props, ref) {
     ref
   }));
 });
-const Root$q = styled(Box)(responsiveGridStyle);
-const Grid = forwardRef(function Grid2(props, ref) {
+const Root$q = styled__default.default(Box)(responsiveGridStyle);
+const Grid = react.forwardRef(function Grid2(props, ref) {
   const {
       as,
       autoRows,
@@ -5022,7 +5037,7 @@ const Grid = forwardRef(function Grid2(props, ref) {
       children
     } = props,
     restProps = _objectWithoutProperties(props, _excluded14);
-  return /* @__PURE__ */jsx(Root$q, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$q, _objectSpread(_objectSpread({
     "data-as": typeof as === "string" ? as : void 0,
     "data-ui": "Grid"
   }, restProps), {}, {
@@ -5045,11 +5060,11 @@ function headingBaseStyle(props) {
     $muted,
     theme
   } = props;
-  return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family);
+  return styled.css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family);
 }
-const Root$p = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
-const SpanWithTextOverflow = styled.span(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
-const Heading = forwardRef(function Heading2(props, ref) {
+const Root$p = styled__default.default.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
+const SpanWithTextOverflow = styled__default.default.span(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+const Heading = react.forwardRef(function Heading2(props, ref) {
   const {
       accent = false,
       align,
@@ -5062,11 +5077,11 @@ const Heading = forwardRef(function Heading2(props, ref) {
     restProps = _objectWithoutProperties(props, _excluded15);
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
-    children = /* @__PURE__ */jsx(SpanWithTextOverflow, {
+    children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow, {
       children
     });
   }
-  return /* @__PURE__ */jsx(Root$p, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$p, _objectSpread(_objectSpread({
     "data-ui": "Heading"
   }, restProps), {}, {
     $accent: accent,
@@ -5075,7 +5090,7 @@ const Heading = forwardRef(function Heading2(props, ref) {
     $size: useArrayProp(size),
     $weight: weight,
     ref,
-    children: /* @__PURE__ */jsx("span", {
+    children: /* @__PURE__ */jsxRuntime.jsx("span", {
       children
     })
   }));
@@ -5106,18 +5121,18 @@ function inlineSpaceStyle(props) {
     };
   });
 }
-const Root$o = styled(Box)(inlineBaseStyle, inlineSpaceStyle);
-const Inline = forwardRef(function Inline2(props, ref) {
+const Root$o = styled__default.default(Box)(inlineBaseStyle, inlineSpaceStyle);
+const Inline = react.forwardRef(function Inline2(props, ref) {
   const {
       as,
       children: childrenProp,
       space
     } = props,
     restProps = _objectWithoutProperties(props, _excluded16);
-  const children = useMemo(() => childrenToElementArray(childrenProp).filter(Boolean).map((child, idx) => /* @__PURE__ */jsx("div", {
+  const children = react.useMemo(() => childrenToElementArray(childrenProp).filter(Boolean).map((child, idx) => /* @__PURE__ */jsxRuntime.jsx("div", {
     children: child
   }, idx)), [childrenProp]);
-  return /* @__PURE__ */jsx(Root$o, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$o, _objectSpread(_objectSpread({
     "data-ui": "Inline"
   }, restProps), {}, {
     $space: useArrayProp(space),
@@ -5127,10 +5142,10 @@ const Inline = forwardRef(function Inline2(props, ref) {
   }));
 });
 function kbdStyle() {
-  return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n    background: var(--card-bg-color);\n    font: inherit;\n    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n    background: var(--card-bg-color);\n    font: inherit;\n    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
-const Root$n = styled.kbd(responsiveRadiusStyle, kbdStyle);
-const KBD = forwardRef(function KBD2(props, ref) {
+const Root$n = styled__default.default.kbd(responsiveRadiusStyle, kbdStyle);
+const KBD = react.forwardRef(function KBD2(props, ref) {
   const {
       children,
       fontSize = 1,
@@ -5138,15 +5153,15 @@ const KBD = forwardRef(function KBD2(props, ref) {
       radius = 2
     } = props,
     restProps = _objectWithoutProperties(props, _excluded17);
-  return /* @__PURE__ */jsx(Root$n, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$n, _objectSpread(_objectSpread({
     "data-ui": "KBD"
   }, restProps), {}, {
     $radius: useArrayProp(radius),
     ref,
-    children: /* @__PURE__ */jsx(Box, {
+    children: /* @__PURE__ */jsxRuntime.jsx(Box, {
       as: "span",
       padding,
-      children: /* @__PURE__ */jsx(Code, {
+      children: /* @__PURE__ */jsxRuntime.jsx(Code, {
         as: "span",
         muted: true,
         size: fontSize,
@@ -5156,18 +5171,18 @@ const KBD = forwardRef(function KBD2(props, ref) {
   }));
 });
 const key$6 = Symbol.for("@sanity/ui/context/boundaryElement");
-globalScope[key$6] = globalScope[key$6] || createContext(null);
+globalScope[key$6] = globalScope[key$6] || react.createContext(null);
 const BoundaryElementContext = globalScope[key$6];
 function BoundaryElementProvider(props) {
   const {
     children,
     element
   } = props;
-  const value = useMemo(() => ({
+  const value = react.useMemo(() => ({
     version: 0,
     element
   }), [element]);
-  return /* @__PURE__ */jsx(BoundaryElementContext.Provider, {
+  return /* @__PURE__ */jsxRuntime.jsx(BoundaryElementContext.Provider, {
     value,
     children
   });
@@ -5177,7 +5192,7 @@ const DEFAULT_VALUE = {
   element: null
 };
 function useBoundaryElement() {
-  const value = useContext(BoundaryElementContext);
+  const value = react.useContext(BoundaryElementContext);
   if (value && (!isRecord(value) || value.version !== 0)) {
     throw new Error("useBoundaryElement(): the context value is not compatible");
   }
@@ -5203,7 +5218,7 @@ function findMinBreakpoints(media, width) {
   }
   return ret;
 }
-const ElementQuery = forwardRef(function ElementQuery2(props, ref) {
+const ElementQuery = react.forwardRef(function ElementQuery2(props, ref) {
   const theme = useTheme();
   const {
       children,
@@ -5211,19 +5226,19 @@ const ElementQuery = forwardRef(function ElementQuery2(props, ref) {
     } = props,
     restProps = _objectWithoutProperties(props, _excluded18);
   const forwardedRef = useForwardedRef(ref);
-  const [element, setElement] = useState(null);
+  const [element, setElement] = react.useState(null);
   const elementSize = useElementSize(element);
-  const width = useMemo(() => {
+  const width = react.useMemo(() => {
     var _a;
     return (_a = elementSize == null ? void 0 : elementSize.border.width) != null ? _a : window.innerWidth;
   }, [elementSize]);
-  const max = useMemo(() => findMaxBreakpoints(media, width), [media, width]);
-  const min = useMemo(() => findMinBreakpoints(media, width), [media, width]);
-  const setRef = useCallback(el => {
+  const max = react.useMemo(() => findMaxBreakpoints(media, width), [media, width]);
+  const min = react.useMemo(() => findMinBreakpoints(media, width), [media, width]);
+  const setRef = react.useCallback(el => {
     forwardedRef.current = el;
     setElement(el);
   }, [forwardedRef]);
-  return /* @__PURE__ */jsx("div", _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     "data-ui": "ElementQuery"
   }, restProps), {}, {
     "data-eq-max": max.length ? max.join(" ") : void 0,
@@ -5232,7 +5247,7 @@ const ElementQuery = forwardRef(function ElementQuery2(props, ref) {
     children
   }));
 });
-class ErrorBoundary extends Component {
+class ErrorBoundary extends react.Component {
   constructor() {
     super(...arguments);
     this.state = {
@@ -5256,7 +5271,7 @@ class ErrorBoundary extends Component {
     } = this.state;
     if (error) {
       const message = typeof (error == null ? void 0 : error.message) === "string" ? error.message : "Error";
-      return /* @__PURE__ */jsx(Code, {
+      return /* @__PURE__ */jsxRuntime.jsx(Code, {
         children: message
       });
     }
@@ -5264,10 +5279,10 @@ class ErrorBoundary extends Component {
   }
 }
 const key$5 = Symbol.for("@sanity/ui/context/layer");
-globalScope[key$5] = globalScope[key$5] || createContext(null);
+globalScope[key$5] = globalScope[key$5] || react.createContext(null);
 const LayerContext = globalScope[key$5];
 function useLayer() {
-  const value = useContext(LayerContext);
+  const value = react.useContext(LayerContext);
   if (!value) {
     throw new Error("useLayer(): missing context value");
   }
@@ -5281,35 +5296,35 @@ function LayerProvider(props) {
     children,
     zOffset: zOffsetProp = 0
   } = props;
-  const parent = useContext(LayerContext);
+  const parent = react.useContext(LayerContext);
   const zOffset = useArrayProp(zOffsetProp);
   const maxMediaIndex = zOffset.length - 1;
   const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex);
   const zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex];
-  const [size, setSize] = useState(0);
-  const registerChild = useCallback(() => {
+  const [size, setSize] = react.useState(0);
+  const registerChild = react.useCallback(() => {
     setSize(v => v + 1);
     return () => setSize(v => v - 1);
   }, []);
   const parentRegisterChild = parent == null ? void 0 : parent.registerChild;
-  useEffect(() => {
+  react.useEffect(() => {
     if (!parentRegisterChild) return;
     return parentRegisterChild();
   }, [parentRegisterChild]);
-  const value = useMemo(() => ({
+  const value = react.useMemo(() => ({
     version: 0,
     isTopLayer: size === 0,
     registerChild,
     size,
     zIndex
   }), [size, registerChild, zIndex]);
-  return /* @__PURE__ */jsx(LayerContext.Provider, {
+  return /* @__PURE__ */jsxRuntime.jsx(LayerContext.Provider, {
     value,
     children
   });
 }
-const Root$m = styled.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-const LayerChildren = forwardRef(function LayerChildren2(props, ref) {
+const Root$m = styled__default.default.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+const LayerChildren = react.forwardRef(function LayerChildren2(props, ref) {
   const {
       children,
       style = EMPTY_RECORD
@@ -5318,7 +5333,7 @@ const LayerChildren = forwardRef(function LayerChildren2(props, ref) {
   const {
     zIndex
   } = useLayer();
-  return /* @__PURE__ */jsx(Root$m, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$m, _objectSpread(_objectSpread({}, restProps), {}, {
     "data-ui": "Layer",
     ref,
     style: _objectSpread(_objectSpread({}, style), {}, {
@@ -5327,15 +5342,15 @@ const LayerChildren = forwardRef(function LayerChildren2(props, ref) {
     children
   }));
 });
-const Layer = forwardRef(function Layer2(props, ref) {
+const Layer = react.forwardRef(function Layer2(props, ref) {
   const {
       children,
       zOffset = 1
     } = props,
     restProps = _objectWithoutProperties(props, _excluded20);
-  return /* @__PURE__ */jsx(LayerProvider, {
+  return /* @__PURE__ */jsxRuntime.jsx(LayerProvider, {
     zOffset,
-    children: /* @__PURE__ */jsx(LayerChildren, _objectSpread(_objectSpread({}, restProps), {}, {
+    children: /* @__PURE__ */jsxRuntime.jsx(LayerChildren, _objectSpread(_objectSpread({}, restProps), {}, {
       ref,
       children
     }))
@@ -5360,10 +5375,10 @@ const defaultContextValue = {
     return globalScope[elementKey];
   }
 };
-globalScope[key$4] = globalScope[key$4] || createContext(defaultContextValue);
+globalScope[key$4] = globalScope[key$4] || react.createContext(defaultContextValue);
 const PortalContext = globalScope[key$4];
 function usePortal() {
-  const value = useContext(PortalContext);
+  const value = react.useContext(PortalContext);
   if (!value) {
     throw new Error("usePortal(): missing context value");
   }
@@ -5383,10 +5398,10 @@ function Portal(props) {
   if (!portalElement) {
     return null;
   }
-  return createPortal(children, portalElement);
+  return reactDom.createPortal(children, portalElement);
 }
 function useUnique(value) {
-  const valueRef = useRef(value);
+  const valueRef = react.useRef(value);
   if (!_isEqual(valueRef.current, value)) {
     valueRef.current = value;
   }
@@ -5412,7 +5427,7 @@ function PortalProvider(props) {
     __unstable_elements: elementsProp
   } = props;
   const elements = useUnique(elementsProp);
-  const value = useMemo(() => {
+  const value = react.useMemo(() => {
     return {
       version: 0,
       boundaryElement: boundaryElement || null,
@@ -5420,18 +5435,18 @@ function PortalProvider(props) {
       elements
     };
   }, [boundaryElement, element, elements]);
-  return /* @__PURE__ */jsx(PortalContext.Provider, {
+  return /* @__PURE__ */jsxRuntime.jsx(PortalContext.Provider, {
     value,
     children
   });
 }
-const Root$l = styled.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n"])));
-const SrOnly = forwardRef(function SrOnly2(props, ref) {
+const Root$l = styled__default.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n"])));
+const SrOnly = react.forwardRef(function SrOnly2(props, ref) {
   const {
     as,
     children
   } = props;
-  return /* @__PURE__ */jsx(Root$l, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$l, {
     "aria-hidden": true,
     as,
     "data-ui": "SrOnly",
@@ -5526,9 +5541,9 @@ function _isScrollable(el) {
   const style = window.getComputedStyle(el);
   return style.overflowX.includes("auto") || style.overflowX.includes("scroll") || style.overflowY.includes("auto") || style.overflowY.includes("scroll");
 }
-const Root$k = styled.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-const ItemWrapper = styled.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
-const VirtualList = forwardRef(function VirtualList2(props, ref) {
+const Root$k = styled__default.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+const ItemWrapper = styled__default.default.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
+const VirtualList = react.forwardRef(function VirtualList2(props, ref) {
   const {
       as = "div",
       gap = 0,
@@ -5542,18 +5557,18 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
     space
   } = useTheme().sanity;
   const forwardedRef = useForwardedRef(ref);
-  const wrapperRef = useRef(null);
-  const [scrollTop, setScrollTop] = useState(0);
-  const [scrollHeight, setScrollHeight] = useState(0);
-  const [itemHeight, setItemHeight] = useState(-1);
-  useEffect(() => {
+  const wrapperRef = react.useRef(null);
+  const [scrollTop, setScrollTop] = react.useState(0);
+  const [scrollHeight, setScrollHeight] = react.useState(0);
+  const [itemHeight, setItemHeight] = react.useState(-1);
+  react.useEffect(() => {
     if (!wrapperRef.current) return;
     const firstElement = wrapperRef.current.firstChild;
     if (firstElement instanceof HTMLElement) {
       setItemHeight(firstElement.offsetHeight);
     }
   }, [renderItem]);
-  useEffect(() => {
+  react.useEffect(() => {
     if (!forwardedRef.current) return;
     let _scrollEl = forwardedRef.current.parentNode;
     while (_scrollEl && !_isScrollable(_scrollEl)) {
@@ -5600,7 +5615,7 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
   const height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0;
   const fromIndex = height ? Math.max(Math.floor(scrollTop / height * len) - 2, 0) : 0;
   const toIndex = height ? Math.ceil((scrollTop + scrollHeight) / height * len) + 1 : 0;
-  useEffect(() => {
+  react.useEffect(() => {
     if (!onChange) return;
     onChange({
       fromIndex,
@@ -5611,10 +5626,10 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
       toIndex
     });
   }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex]);
-  const children = useMemo(() => {
+  const children = react.useMemo(() => {
     if (!renderItem || items.length === 0) return null;
     if (itemHeight === -1) {
-      return [/* @__PURE__ */jsx(ItemWrapper, {
+      return [/* @__PURE__ */jsxRuntime.jsx(ItemWrapper, {
         children: renderItem(items[0])
       }, 0)];
     }
@@ -5622,7 +5637,7 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
       const itemIndex = fromIndex + _itemIndex;
       const node = renderItem(item);
       const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
-      return /* @__PURE__ */jsx(ItemWrapper, {
+      return /* @__PURE__ */jsxRuntime.jsx(ItemWrapper, {
         style: {
           top: itemIndex * (itemHeight + space[gap])
         },
@@ -5630,15 +5645,15 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
       }, key);
     });
   }, [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex]);
-  const wrapperStyle = useMemo(() => ({
+  const wrapperStyle = react.useMemo(() => ({
     height
   }), [height]);
-  return /* @__PURE__ */jsx(Root$k, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$k, _objectSpread(_objectSpread({
     as,
     "data-ui": "VirtualList"
   }, restProps), {}, {
     ref: forwardedRef,
-    children: /* @__PURE__ */jsx("div", {
+    children: /* @__PURE__ */jsxRuntime.jsx("div", {
       ref: wrapperRef,
       style: wrapperStyle,
       children
@@ -5669,7 +5684,7 @@ function size(options) {
         floating,
         reference
       } = rects;
-      const overflow = await detectOverflow(args, {
+      const overflow = await reactDom$1.detectOverflow(args, {
         altBoundary: true,
         boundary: options.boundaryElement || void 0,
         elementContext: "floating",
@@ -5716,23 +5731,23 @@ function size(options) {
     }
   };
 }
-const Root$j = styled.div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  position: absolute;\n  pointer-events: none;\n  width: ", "px;\n  height: ", "px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: ", "px ", "px;\n  }\n\n  [data-placement^='top'] > & {\n    bottom: -", "px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -", "px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -", "px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -", "px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])), DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH);
-const BorderPath = styled.path(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
-const ShapePath = styled.path(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
-const PopoverArrow = forwardRef(function PopoverArrow2(props, ref) {
-  return /* @__PURE__ */jsx(Root$j, _objectSpread(_objectSpread({
+const Root$j = styled__default.default.div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  position: absolute;\n  pointer-events: none;\n  width: ", "px;\n  height: ", "px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: ", "px ", "px;\n  }\n\n  [data-placement^='top'] > & {\n    bottom: -", "px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -", "px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -", "px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -", "px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])), DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH);
+const BorderPath = styled__default.default.path(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
+const ShapePath = styled__default.default.path(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
+const PopoverArrow = react.forwardRef(function PopoverArrow2(props, ref) {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$j, _objectSpread(_objectSpread({
     "data-ui": "Popover__arrow"
   }, props), {}, {
     ref,
-    children: /* @__PURE__ */jsxs("svg", {
+    children: /* @__PURE__ */jsxRuntime.jsxs("svg", {
       width: DEFAULT_POPOVER_ARROW_WIDTH,
       height: DEFAULT_POPOVER_ARROW_HEIGHT,
       viewBox: "0 0 27 11",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: [/* @__PURE__ */jsx(BorderPath, {
+      children: [/* @__PURE__ */jsxRuntime.jsx(BorderPath, {
         d: "M1.18708 1C3.29803 1.0011 5.29585 1.95479 6.62414 3.59561L11.1683 9.20895C12.369 10.6922 14.631 10.6922 15.8317 9.20894L20.3759 3.59561C21.7042 1.95478 23.702 1.0011 25.8129 1H21.9436C21.0533 1.49255 20.2545 2.15618 19.5986 2.96641L15.0545 8.57975C14.254 9.56855 12.746 9.56855 11.9455 8.57975L7.40139 2.96642C6.74548 2.15618 5.94673 1.49255 5.05643 1H1.18708Z"
-      }), /* @__PURE__ */jsx(ShapePath, {
+      }), /* @__PURE__ */jsxRuntime.jsx(ShapePath, {
         d: "M1.18342 0C3.59749 0 5.88246 1.0901 7.40138 2.96642L11.9455 8.57975C12.746 9.56855 14.254 9.56855 15.0545 8.57975L19.5986 2.96641C21.1175 1.0901 23.4025 0 25.8166 0H27H0H1.18342Z"
       })]
     })
@@ -5752,9 +5767,9 @@ function popoverCardStyle(props) {
     maxWidth: typeof $boundaryWidth === "number" ? "".concat($boundaryWidth - DEFAULT_POPOVER_PADDING * 2, "px") : void 0
   };
 }
-const Root$i = memo(styled(Card)(popoverCardStyle));
-const PopoverContainer = memo(styled(Container)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  max-height: inherit;\n  max-width: inherit;\n"]))));
-const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
+const Root$i = react.memo(styled__default.default(Card)(popoverCardStyle));
+const PopoverContainer = react.memo(styled__default.default(Container)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  max-height: inherit;\n  max-width: inherit;\n"]))));
+const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref) {
   const {
       __unstable_margins: marginsProp,
       arrow,
@@ -5780,17 +5795,17 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
   const {
     zIndex
   } = useLayer();
-  const margins = useMemo(() => marginsProp || DEFAULT_POPOVER_MARGINS, [marginsProp]);
+  const margins = react.useMemo(() => marginsProp || DEFAULT_POPOVER_MARGINS, [marginsProp]);
   const x = (xProp != null ? xProp : 0) + margins[3];
   const y = (yProp != null ? yProp : 0) + margins[0];
-  const rootStyle = useMemo(() => _objectSpread({
+  const rootStyle = react.useMemo(() => _objectSpread({
     position: strategy,
     top: y,
     left: x,
     zIndex
   }, style), [strategy, style, x, y, zIndex]);
   const staticSide = placement && FLOATING_STATIC_SIDES[placement.split("-")[0]];
-  const arrowStyle = useMemo(() => {
+  const arrowStyle = react.useMemo(() => {
     const style2 = {
       left: arrowX !== null ? arrowX : void 0,
       top: arrowY !== null ? arrowY : void 0,
@@ -5800,7 +5815,7 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
     if (staticSide) style2[staticSide] = 0 - DEFAULT_POPOVER_ARROW_WIDTH;
     return style2;
   }, [arrowX, arrowY, staticSide]);
-  return /* @__PURE__ */jsxs(Root$i, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$i, _objectSpread(_objectSpread({}, restProps), {}, {
     $boundaryWidth: boundaryWidth,
     "data-placement": placement,
     "data-ui": "Popover",
@@ -5811,7 +5826,7 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
     sizing: "border",
     style: rootStyle,
     tone,
-    children: [/* @__PURE__ */jsx(PopoverContainer, {
+    children: [/* @__PURE__ */jsxRuntime.jsx(PopoverContainer, {
       "data-ui": "Popover__wrapper",
       flex: 1,
       overflow,
@@ -5819,14 +5834,14 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
       sizing: "border",
       width,
       children
-    }), arrow && /* @__PURE__ */jsx(PopoverArrow, {
+    }), arrow && /* @__PURE__ */jsxRuntime.jsx(PopoverArrow, {
       ref: arrowRef,
       style: arrowStyle
     })]
   }));
 }));
 PopoverCard.displayName = "PopoverCard";
-const Popover = memo(forwardRef(function Popover2(props, ref) {
+const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
   var _a, _b, _c, _d, _e;
   const theme = useTheme();
   const boundaryElementContext = useBoundaryElement();
@@ -5862,19 +5877,19 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
   const width = useArrayProp(widthProp);
   const zOffset = useArrayProp(zOffsetProp);
   const forwardedRef = useForwardedRef(ref);
-  const arrowRef = useRef(null);
+  const arrowRef = react.useRef(null);
   const rootBoundary = "viewport";
-  const middleware = useMemo(() => {
+  const middleware = react.useMemo(() => {
     const ret = [];
     if (constrainSize || preventOverflow) {
-      ret.push(flip({
+      ret.push(reactDom$1.flip({
         boundary: boundaryElement || void 0,
         fallbackPlacements,
         padding: DEFAULT_POPOVER_PADDING,
         rootBoundary
       }));
     }
-    ret.push(offset({
+    ret.push(reactDom$1.offset({
       mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0
     }));
     if (constrainSize || matchReferenceWidthProp) {
@@ -5902,29 +5917,29 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
       }));
     }
     if (preventOverflow) {
-      ret.push(shift({
+      ret.push(reactDom$1.shift({
         boundary: boundaryElement || void 0,
         rootBoundary,
         padding: DEFAULT_POPOVER_PADDING
       }));
     }
     if (arrowProp) {
-      ret.push(arrow({
+      ret.push(reactDom$1.arrow({
         element: arrowRef,
         padding: DEFAULT_POPOVER_PADDING
       }));
     }
-    ret.push(hide({
+    ret.push(reactDom$1.hide({
       boundary: boundaryElement || void 0,
       padding: DEFAULT_POPOVER_PADDING,
       strategy: "referenceHidden"
     }));
     return ret;
   }, [arrowProp, boundaryElement, constrainSize, fallbackPlacements, margins, matchReferenceWidthProp, preventOverflow]);
-  const floatingProps = useMemo(() => ({
+  const floatingProps = react.useMemo(() => ({
     middleware,
     placement: placementProp,
-    whileElementsMounted: autoUpdate
+    whileElementsMounted: reactDom$1.autoUpdate
   }), [middleware, placementProp]);
   const {
     x,
@@ -5934,18 +5949,18 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     floating: floatingRef,
     middlewareData,
     strategy
-  } = useFloating(floatingProps);
+  } = reactDom$1.useFloating(floatingProps);
   const referenceHidden = (_c = middlewareData.hide) == null ? void 0 : _c.referenceHidden;
   const arrowX = (_d = middlewareData.arrow) == null ? void 0 : _d.x;
   const arrowY = (_e = middlewareData.arrow) == null ? void 0 : _e.y;
-  const setArrow = useCallback(arrowEl => {
+  const setArrow = react.useCallback(arrowEl => {
     arrowRef.current = arrowEl;
   }, []);
-  const setFloating = useCallback(node => {
+  const setFloating = react.useCallback(node => {
     forwardedRef.current = node;
     floatingRef(node);
   }, [floatingRef, forwardedRef]);
-  const setReference = useCallback(node => {
+  const setReference = react.useCallback(node => {
     referenceRef(node);
     const childRef = childProp == null ? void 0 : childProp.ref;
     if (typeof childRef === "function") {
@@ -5954,21 +5969,21 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
       childRef.current = node;
     }
   }, [childProp, referenceRef]);
-  const child = useMemo(() => {
+  const child = react.useMemo(() => {
     if (!childProp || referenceElement) return null;
-    return cloneElement(childProp, {
+    return react.cloneElement(childProp, {
       ref: setReference
     });
   }, [childProp, referenceElement, setReference]);
-  useEffect(() => {
+  react.useEffect(() => {
     referenceRef(referenceElement || null);
   }, [referenceRef, referenceElement]);
   if (disabled) {
-    return childProp || /* @__PURE__ */jsx(Fragment, {});
+    return childProp || /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
-  const popover = /* @__PURE__ */jsx(LayerProvider, {
+  const popover = /* @__PURE__ */jsxRuntime.jsx(LayerProvider, {
     zOffset,
-    children: /* @__PURE__ */jsx(PopoverCard, _objectSpread(_objectSpread({}, restProps), {}, {
+    children: /* @__PURE__ */jsxRuntime.jsx(PopoverCard, _objectSpread(_objectSpread({}, restProps), {}, {
       __unstable_margins: margins,
       arrow: arrowProp,
       arrowRef: setArrow,
@@ -5991,9 +6006,9 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
       children: content
     }))
   });
-  return /* @__PURE__ */jsxs(Fragment, {
-    children: [open && /* @__PURE__ */jsx(Fragment, {
-      children: portal ? /* @__PURE__ */jsx(Portal, {
+  return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [open && /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: portal ? /* @__PURE__ */jsxRuntime.jsx(Portal, {
         __unstable_name: typeof portal === "string" ? portal : void 0,
         children: popover
       }) : popover
@@ -6002,7 +6017,7 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
 }));
 Popover.displayName = "Popover";
 function radioBaseStyle() {
-  return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n    position: relative;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n\n    &[data-read-only] {\n      outline: 1px solid red;\n    }\n  "])));
+  return styled.css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n    position: relative;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n\n    &[data-read-only] {\n      outline: 1px solid red;\n    }\n  "])));
 }
 function inputElementStyle(props) {
   const {
@@ -6014,7 +6029,7 @@ function inputElementStyle(props) {
   } = theme.sanity;
   const color = theme.sanity.color.input;
   const dist = (input.radio.size - input.radio.markSize) / 2;
-  return css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n    appearance: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n    border-radius: ", ";\n    border: none;\n\n    /* enabled */\n    & + span {\n      display: block;\n      position: relative;\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      box-shadow: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        height: ", ";\n        width: ", ";\n        border-radius: ", ";\n        background: ", ";\n        opacity: 0;\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span::after {\n      opacity: 1;\n    }\n\n    /* read only */\n    &[data-read-only] + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n  "])), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), color.default.enabled.bg, focusRingBorderStyle({
+  return styled.css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n    appearance: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n    border-radius: ", ";\n    border: none;\n\n    /* enabled */\n    & + span {\n      display: block;\n      position: relative;\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      box-shadow: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        height: ", ";\n        width: ", ";\n        border-radius: ", ";\n        background: ", ";\n        opacity: 0;\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span::after {\n      opacity: 1;\n    }\n\n    /* read only */\n    &[data-read-only] + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n  "])), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), color.default.enabled.bg, focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), color.default.enabled.fg, focusRingStyle({
@@ -6028,9 +6043,9 @@ function inputElementStyle(props) {
     width: input.border.width
   }), color.default.readOnly.border, color.default.readOnly.bg, color.default.readOnly.fg, color.default.disabled.border, color.default.disabled.bg, color.default.disabled.fg);
 }
-const Root$h = styled.div(radioBaseStyle);
-const Input$4 = styled.input(inputElementStyle);
-const Radio = forwardRef(function Radio2(props, forwardedRef) {
+const Root$h = styled__default.default.div(radioBaseStyle);
+const Input$4 = styled__default.default.input(inputElementStyle);
+const Radio = react.forwardRef(function Radio2(props, forwardedRef) {
   const {
       className,
       disabled,
@@ -6041,29 +6056,29 @@ const Radio = forwardRef(function Radio2(props, forwardedRef) {
     restProps = _objectWithoutProperties(props, _excluded24);
   const ref = useForwardedRef(forwardedRef);
   useCustomValidity(ref, customValidity);
-  return /* @__PURE__ */jsxs(Root$h, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$h, {
     className,
     "data-ui": "Radio",
     style,
-    children: [/* @__PURE__ */jsx(Input$4, _objectSpread(_objectSpread({
+    children: [/* @__PURE__ */jsxRuntime.jsx(Input$4, _objectSpread(_objectSpread({
       "data-read-only": !disabled && readOnly ? "" : void 0
     }, restProps), {}, {
       disabled: disabled || readOnly,
       readOnly,
       ref,
       type: "radio"
-    })), /* @__PURE__ */jsx("span", {})]
+    })), /* @__PURE__ */jsxRuntime.jsx("span", {})]
   });
 });
 function rootStyle() {
-  return css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function inputBaseStyle(props) {
   const {
     theme
   } = props;
   const font = theme.sanity.fonts.text;
-  return css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n    -webkit-font-smoothing: antialiased;\n    appearance: none;\n    border: 0;\n    font-family: ", ";\n    color: inherit;\n    width: 100%;\n    outline: none;\n    margin: 0;\n\n    &:disabled {\n      opacity: 1;\n    }\n  "])), font.family);
+  return styled.css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n    -webkit-font-smoothing: antialiased;\n    appearance: none;\n    border: 0;\n    font-family: ", ";\n    color: inherit;\n    width: 100%;\n    outline: none;\n    margin: 0;\n\n    &:disabled {\n      opacity: 1;\n    }\n  "])), font.family);
 }
 function inputColorStyle(props) {
   const {
@@ -6074,7 +6089,7 @@ function inputColorStyle(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.input;
-  return css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n    /* enabled */\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n\n    /* hovered */\n    @media (hover: hover) {\n      &:not(:disabled):hover {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus {\n      box-shadow: ", ";\n    }\n\n    /* read-only */\n    &[data-read-only] {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
+  return styled.css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n    /* enabled */\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n\n    /* hovered */\n    @media (hover: hover) {\n      &:not(:disabled):hover {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus {\n      box-shadow: ", ";\n    }\n\n    /* read-only */\n    &[data-read-only] {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }), color.default.hovered.bg, color.default.hovered.fg, focusRingBorderStyle({
@@ -6118,17 +6133,17 @@ function iconBoxStyle(props) {
     theme
   } = props;
   const color = theme.sanity.color.input;
-  return css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    /* enabled */\n    --card-fg-color: ", ";\n\n    /* hover */\n    @media (hover: hover) {\n      select:not(disabled):not(:read-only):hover + && {\n        --card-fg-color: ", ";\n      }\n    }\n\n    /* disabled */\n    select:disabled + && {\n      --card-fg-color: ", ";\n    }\n\n    /* read-only */\n    select[data-read-only] + && {\n      --card-fg-color: ", ";\n    }\n  "])), color.default.enabled.fg, color.default.hovered.fg, color.default.disabled.fg, color.default.readOnly.fg);
+  return styled.css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    /* enabled */\n    --card-fg-color: ", ";\n\n    /* hover */\n    @media (hover: hover) {\n      select:not(disabled):not(:read-only):hover + && {\n        --card-fg-color: ", ";\n      }\n    }\n\n    /* disabled */\n    select:disabled + && {\n      --card-fg-color: ", ";\n    }\n\n    /* read-only */\n    select[data-read-only] + && {\n      --card-fg-color: ", ";\n    }\n  "])), color.default.enabled.fg, color.default.hovered.fg, color.default.disabled.fg, color.default.readOnly.fg);
 }
 const selectStyle = {
   root: rootStyle,
   input: inputStyle,
   iconBox: iconBoxStyle
 };
-const Root$g = styled.div(selectStyle.root);
-const Input$3 = styled.select(selectStyle.input);
-const IconBox = styled(Box)(selectStyle.iconBox);
-const Select = forwardRef(function Select2(props, forwardedRef) {
+const Root$g = styled__default.default.div(selectStyle.root);
+const Input$3 = styled__default.default.select(selectStyle.input);
+const IconBox = styled__default.default(Box)(selectStyle.iconBox);
+const Select = react.forwardRef(function Select2(props, forwardedRef) {
   const {
       children,
       customValidity,
@@ -6142,9 +6157,9 @@ const Select = forwardRef(function Select2(props, forwardedRef) {
     restProps = _objectWithoutProperties(props, _excluded25);
   const ref = useForwardedRef(forwardedRef);
   useCustomValidity(ref, customValidity);
-  return /* @__PURE__ */jsxs(Root$g, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$g, {
     "data-ui": "Select",
-    children: [/* @__PURE__ */jsx(Input$3, _objectSpread(_objectSpread({
+    children: [/* @__PURE__ */jsxRuntime.jsx(Input$3, _objectSpread(_objectSpread({
       "data-read-only": !disabled && readOnly ? "" : void 0,
       "data-ui": "Select"
     }, restProps), {}, {
@@ -6155,11 +6170,11 @@ const Select = forwardRef(function Select2(props, forwardedRef) {
       disabled: disabled || readOnly,
       ref,
       children
-    })), /* @__PURE__ */jsx(IconBox, {
+    })), /* @__PURE__ */jsxRuntime.jsx(IconBox, {
       padding,
-      children: /* @__PURE__ */jsx(Text, {
+      children: /* @__PURE__ */jsxRuntime.jsx(Text, {
         size: fontSize,
-        children: /* @__PURE__ */jsx(SelectIcon, {})
+        children: /* @__PURE__ */jsxRuntime.jsx(icons.SelectIcon, {})
       })
     })]
   });
@@ -6189,14 +6204,14 @@ function responsiveStackSpaceStyle(props) {
     gridGap: rem(space[spaceIndex])
   }));
 }
-const Root$f = styled(Box)(stackBaseStyle, responsiveStackSpaceStyle);
-const Stack = forwardRef(function Stack2(props, ref) {
+const Root$f = styled__default.default(Box)(stackBaseStyle, responsiveStackSpaceStyle);
+const Stack = react.forwardRef(function Stack2(props, ref) {
   const {
       as,
       space
     } = props,
     restProps = _objectWithoutProperties(props, _excluded26);
-  return /* @__PURE__ */jsx(Root$f, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$f, _objectSpread(_objectSpread({
     "data-as": typeof as === "string" ? as : void 0,
     "data-ui": "Stack"
   }, restProps), {}, {
@@ -6206,10 +6221,10 @@ const Stack = forwardRef(function Stack2(props, ref) {
   }));
 });
 function switchBaseStyles() {
-  return css(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function switchInputStyles() {
-  return css(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    padding: 0;\n    margin: 0;\n\n    /* Place the input element above the representation element */\n    z-index: 1;\n  "])));
+  return styled.css(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    padding: 0;\n    margin: 0;\n\n    /* Place the input element above the representation element */\n    z-index: 1;\n  "])));
 }
 function switchRepresentationStyles(props) {
   const {
@@ -6220,7 +6235,7 @@ function switchRepresentationStyles(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.button.default;
-  return css(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
+  return styled.css(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
     focusRing
   }), color.positive.enabled.bg, color.positive.enabled.fg, color.default.hovered.bg, color.default.hovered.fg, color.positive.hovered.bg, color.positive.hovered.fg, color.default.disabled.bg, color.default.disabled.fg);
 }
@@ -6231,7 +6246,7 @@ function switchTrackStyles(props) {
   const {
     input
   } = theme.sanity;
-  return css(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n    &:not([hidden]) {\n      display: block;\n    }\n    background-color: var(--switch-bg-color);\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n  "])), rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2));
+  return styled.css(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n    &:not([hidden]) {\n      display: block;\n    }\n    background-color: var(--switch-bg-color);\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n  "])), rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2));
 }
 function switchThumbStyles(props) {
   const {
@@ -6248,14 +6263,14 @@ function switchThumbStyles(props) {
   const checkedOffset = trackWidth - trackPadding * 2 - size;
   const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding;
   const checked = $indeterminate !== true && props.$checked === true;
-  return css(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n    &:not([hidden]) {\n      display: block;\n    }\n    position: absolute;\n    left: ", ";\n    top: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    transition-property: transform;\n    transition-duration: ", "ms;\n    transition-timing-function: ", ";\n    background: var(--switch-fg-color);\n    transform: translate3d(0, 0, 0);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && css(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
+  return styled.css(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n    &:not([hidden]) {\n      display: block;\n    }\n    position: absolute;\n    left: ", ";\n    top: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    transition-property: transform;\n    transition-duration: ", "ms;\n    transition-timing-function: ", ";\n    background: var(--switch-fg-color);\n    transform: translate3d(0, 0, 0);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && styled.css(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && styled.css(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
 }
-const Root$e = styled.span(switchBaseStyles);
-const Input$2 = styled.input(switchInputStyles);
-const Representation = styled.span(switchRepresentationStyles);
-const Track = styled.span(switchTrackStyles);
-const Thumb = styled.span(switchThumbStyles);
-const Switch = forwardRef(function Switch2(props, forwardedRef) {
+const Root$e = styled__default.default.span(switchBaseStyles);
+const Input$2 = styled__default.default.input(switchInputStyles);
+const Representation = styled__default.default.span(switchRepresentationStyles);
+const Track = styled__default.default.span(switchTrackStyles);
+const Thumb = styled__default.default.span(switchThumbStyles);
+const Switch = react.forwardRef(function Switch2(props, forwardedRef) {
   const {
       checked,
       className,
@@ -6266,37 +6281,37 @@ const Switch = forwardRef(function Switch2(props, forwardedRef) {
     } = props,
     restProps = _objectWithoutProperties(props, _excluded27);
   const ref = useForwardedRef(forwardedRef);
-  useEffect(() => {
+  react.useEffect(() => {
     if (ref.current) {
       ref.current.indeterminate = indeterminate || false;
     }
   }, [indeterminate, ref]);
-  return /* @__PURE__ */jsxs(Root$e, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$e, {
     className,
     "data-ui": "Switch",
     style,
-    children: [/* @__PURE__ */jsx(Input$2, _objectSpread(_objectSpread({
+    children: [/* @__PURE__ */jsxRuntime.jsx(Input$2, _objectSpread(_objectSpread({
       "data-read-only": !disabled && readOnly ? "" : void 0
     }, restProps), {}, {
       checked: indeterminate !== true && checked,
       disabled: disabled || readOnly,
       type: "checkbox",
       ref
-    })), /* @__PURE__ */jsxs(Representation, {
+    })), /* @__PURE__ */jsxRuntime.jsxs(Representation, {
       "aria-hidden": true,
       "data-name": "representation",
-      children: [/* @__PURE__ */jsx(Track, {}), /* @__PURE__ */jsx(Thumb, {
+      children: [/* @__PURE__ */jsxRuntime.jsx(Track, {}), /* @__PURE__ */jsxRuntime.jsx(Thumb, {
         $checked: checked,
         $indeterminate: indeterminate
       })]
     })]
   });
 });
-const Root$d = styled.span(textInputRootStyle);
-const InputRoot$1 = styled.span(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
-const Input$1 = styled.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
-const Presentation$1 = styled.div(responsiveRadiusStyle, textInputRepresentationStyle);
-const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
+const Root$d = styled__default.default.span(textInputRootStyle);
+const InputRoot$1 = styled__default.default.span(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+const Input$1 = styled__default.default.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
+const Presentation$1 = styled__default.default.div(responsiveRadiusStyle, textInputRepresentationStyle);
+const TextArea = react.forwardRef(function TextArea2(props, forwardedRef) {
   const {
       border = true,
       customValidity,
@@ -6310,10 +6325,10 @@ const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
   const ref = useForwardedRef(forwardedRef);
   const rootTheme = useRootTheme();
   useCustomValidity(ref, customValidity);
-  return /* @__PURE__ */jsx(Root$d, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$d, {
     "data-ui": "TextArea",
-    children: /* @__PURE__ */jsxs(InputRoot$1, {
-      children: [/* @__PURE__ */jsx(Input$1, _objectSpread(_objectSpread({
+    children: /* @__PURE__ */jsxRuntime.jsxs(InputRoot$1, {
+      children: [/* @__PURE__ */jsxRuntime.jsx(Input$1, _objectSpread(_objectSpread({
         "data-as": "textarea",
         "data-scheme": rootTheme.scheme,
         "data-tone": rootTheme.tone
@@ -6326,7 +6341,7 @@ const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
         $weight: weight,
         disabled,
         ref
-      })), /* @__PURE__ */jsx(Presentation$1, {
+      })), /* @__PURE__ */jsxRuntime.jsx(Presentation$1, {
         $radius: useArrayProp(radius),
         $scheme: rootTheme.scheme,
         $tone: rootTheme.tone,
@@ -6340,22 +6355,22 @@ const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
 const CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
 };
-const Root$c = styled(Card).attrs({
+const Root$c = styled__default.default(Card).attrs({
   forwardedAs: "span"
 })(textInputRootStyle);
-const InputRoot = styled.span(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
-const Prefix = styled(Card).attrs({
+const InputRoot = styled__default.default.span(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+const Prefix = styled__default.default(Card).attrs({
   forwardedAs: "span"
 })(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
-const Suffix = styled(Card).attrs({
+const Suffix = styled__default.default(Card).attrs({
   forwardedAs: "span"
 })(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
-const Input = styled.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
-const Presentation = styled.span(responsiveRadiusStyle, textInputRepresentationStyle);
-const LeftBox = styled(Box)(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
-const RightBox = styled(Box)(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
-const RightCard = styled(Card)(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
-const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
+const Input = styled__default.default.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
+const Presentation = styled__default.default.span(responsiveRadiusStyle, textInputRepresentationStyle);
+const LeftBox = styled__default.default(Box)(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
+const RightBox = styled__default.default(Box)(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const RightCard = styled__default.default(Card)(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
   const {
       border = true,
       clearButton,
@@ -6387,29 +6402,29 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
   const $hasSuffix = Boolean(suffix);
   const $hasPrefix = Boolean(prefix);
   useCustomValidity(ref, customValidity);
-  const handleClearMouseDown = useCallback(event => {
+  const handleClearMouseDown = react.useCallback(event => {
     event.preventDefault();
     event.stopPropagation();
   }, []);
-  const handleClearClick = useCallback(event => {
+  const handleClearClick = react.useCallback(event => {
     var _a;
     event.preventDefault();
     event.stopPropagation();
     if (onClear) onClear();
     (_a = ref.current) == null ? void 0 : _a.focus();
   }, [onClear, ref]);
-  const prefixNode = useMemo(() => prefix && /* @__PURE__ */jsx(Prefix, {
+  const prefixNode = react.useMemo(() => prefix && /* @__PURE__ */jsxRuntime.jsx(Prefix, {
     borderTop: true,
     borderLeft: true,
     borderBottom: true,
     radius,
     sizing: "border",
     tone: "inherit",
-    children: /* @__PURE__ */jsx("span", {
+    children: /* @__PURE__ */jsxRuntime.jsx("span", {
       children: prefix
     })
   }), [prefix, radius]);
-  const presentationNode = useMemo(() => /* @__PURE__ */jsxs(Presentation, {
+  const presentationNode = react.useMemo(() => /* @__PURE__ */jsxRuntime.jsxs(Presentation, {
     $hasPrefix,
     $hasSuffix,
     $radius: radius,
@@ -6418,43 +6433,43 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
     "data-border": border ? "" : void 0,
     "data-scheme": rootTheme.scheme,
     "data-tone": rootTheme.tone,
-    children: [icon && /* @__PURE__ */jsx(LeftBox, {
+    children: [icon && /* @__PURE__ */jsxRuntime.jsx(LeftBox, {
       padding,
-      children: /* @__PURE__ */jsxs(Text, {
+      children: /* @__PURE__ */jsxRuntime.jsxs(Text, {
         size: fontSize,
-        children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
+        children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
       })
-    }), !$hasClearButton && iconRight && /* @__PURE__ */jsx(RightBox, {
+    }), !$hasClearButton && iconRight && /* @__PURE__ */jsxRuntime.jsx(RightBox, {
       padding,
-      children: /* @__PURE__ */jsxs(Text, {
+      children: /* @__PURE__ */jsxRuntime.jsxs(Text, {
         size: fontSize,
-        children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
+        children: [react.isValidElement(iconRight) && iconRight, ReactIs.isValidElementType(iconRight) && react.createElement(iconRight)]
       })
     })]
   }), [border, fontSize, icon, iconRight, padding, radius, rootTheme, $hasClearButton, $hasPrefix, $hasSuffix]);
-  const clearButtonBoxPadding = useMemo(() => padding.map(v => {
+  const clearButtonBoxPadding = react.useMemo(() => padding.map(v => {
     if (v === 0) return 0;
     if (v === 1) return 1;
     if (v === 2) return 1;
     return v - 2;
   }), [padding]);
-  const clearButtonPadding = useMemo(() => padding.map(v => {
+  const clearButtonPadding = react.useMemo(() => padding.map(v => {
     if (v === 0) return 0;
     if (v === 1) return 0;
     if (v === 2) return 1;
     return v - 1;
   }), [padding]);
-  const clearButtonProps = useMemo(() => typeof clearButton === "object" ? clearButton : EMPTY_RECORD, [clearButton]);
-  const clearButtonNode = useMemo(() => !disabled && !readOnly && clearButton && /* @__PURE__ */jsx(RightCard, {
+  const clearButtonProps = react.useMemo(() => typeof clearButton === "object" ? clearButton : EMPTY_RECORD, [clearButton]);
+  const clearButtonNode = react.useMemo(() => !disabled && !readOnly && clearButton && /* @__PURE__ */jsxRuntime.jsx(RightCard, {
     forwardedAs: "span",
     padding: clearButtonBoxPadding,
     style: CLEAR_BUTTON_BOX_STYLE,
     tone: customValidity ? "critical" : "inherit",
-    children: /* @__PURE__ */jsx(Button, _objectSpread(_objectSpread({
+    children: /* @__PURE__ */jsxRuntime.jsx(Button, _objectSpread(_objectSpread({
       "aria-label": "Clear",
       "data-qa": "clear-button",
       fontSize,
-      icon: CloseIcon,
+      icon: icons.CloseIcon,
       mode: "bleed",
       padding: clearButtonPadding,
       radius
@@ -6463,22 +6478,22 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
       onMouseDown: handleClearMouseDown
     }))
   }), [clearButton, clearButtonBoxPadding, clearButtonPadding, clearButtonProps, customValidity, disabled, fontSize, handleClearClick, handleClearMouseDown, radius, readOnly]);
-  const suffixNode = useMemo(() => suffix && /* @__PURE__ */jsx(Suffix, {
+  const suffixNode = react.useMemo(() => suffix && /* @__PURE__ */jsxRuntime.jsx(Suffix, {
     borderTop: true,
     borderRight: true,
     borderBottom: true,
     radius,
     sizing: "border",
     tone: "inherit",
-    children: /* @__PURE__ */jsx("span", {
+    children: /* @__PURE__ */jsxRuntime.jsx("span", {
       children: suffix
     })
   }), [radius, suffix]);
-  return /* @__PURE__ */jsxs(Root$c, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$c, {
     "data-ui": "TextInput",
     tone: rootTheme.tone,
-    children: [prefixNode, /* @__PURE__ */jsxs(InputRoot, {
-      children: [/* @__PURE__ */jsx(Input, _objectSpread(_objectSpread({
+    children: [prefixNode, /* @__PURE__ */jsxRuntime.jsxs(InputRoot, {
+      children: [/* @__PURE__ */jsxRuntime.jsx(Input, _objectSpread(_objectSpread({
         "data-as": "input",
         "data-scheme": rootTheme.scheme,
         "data-tone": rootTheme.tone
@@ -6499,29 +6514,29 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
     }), suffixNode]
   });
 });
-const Root$b = styled.div(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\n  position: absolute;\n  pointer-events: none;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 7.5px 7.5px;\n  }\n\n  /* position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.5px;\n  } */\n\n  [data-placement^='top'] > & {\n    bottom: -27px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
-const Border = styled.path(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
-const Shape = styled.path(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
-const TooltipArrow = forwardRef(function TooltipArrow2(props, ref) {
+const Root$b = styled__default.default.div(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\n  position: absolute;\n  pointer-events: none;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 7.5px 7.5px;\n  }\n\n  /* position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.5px;\n  } */\n\n  [data-placement^='top'] > & {\n    bottom: -27px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
+const Border = styled__default.default.path(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
+const Shape = styled__default.default.path(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
+const TooltipArrow = react.forwardRef(function TooltipArrow2(props, ref) {
   const restProps = _extends({}, (_objectDestructuringEmpty(props), props));
-  return /* @__PURE__ */jsx(Root$b, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$b, _objectSpread(_objectSpread({
     "data-ui": "Tooltip__arrow"
   }, restProps), {}, {
     ref,
-    children: /* @__PURE__ */jsxs("svg", {
+    children: /* @__PURE__ */jsxRuntime.jsxs("svg", {
       width: "15",
       height: "15",
       viewBox: "0 0 15 15",
-      children: [/* @__PURE__ */jsx(Border, {
+      children: [/* @__PURE__ */jsxRuntime.jsx(Border, {
         d: "M11.5266 1C11.032 1.32802 10.5837 1.73105 10.1995 2.20057L9.04792 3.6081C8.24771 4.58614 6.7523 4.58614 5.95209 3.6081L4.80047 2.20057C4.41632 1.73105 3.96796 1.32802 3.47341 1H0.156727C1.65639 1 3.07687 1.67313 4.02651 2.83381L5.17813 4.24134C6.37844 5.70839 8.62156 5.70839 9.82187 4.24134L10.9735 2.83381C11.9231 1.67313 13.3436 1 14.8433 1H11.5266Z"
-      }), /* @__PURE__ */jsx(Shape, {
+      }), /* @__PURE__ */jsxRuntime.jsx(Shape, {
         d: "M0.156725 0C1.95632 0 3.66089 0.80776 4.80047 2.20057L5.95209 3.6081C6.75229 4.58614 8.24771 4.58614 9.04791 3.6081L10.1995 2.20057C11.3391 0.80776 13.0437 0 14.8433 0H15H0H0.156725Z"
       })]
     })
   }));
 });
-const Root$a = styled(Layer)(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
-const Tooltip = forwardRef(function Tooltip2(props, ref) {
+const Root$a = styled__default.default(Layer)(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
+const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
   var _a, _b, _c;
   const boundaryElementContext = useBoundaryElement();
   const theme = useTheme();
@@ -6541,26 +6556,26 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     restProps = _objectWithoutProperties(props, _excluded30);
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp);
   const forwardedRef = useForwardedRef(ref);
-  const [referenceElement, setReferenceElement] = useState(null);
-  const arrowRef = useRef(null);
+  const [referenceElement, setReferenceElement] = react.useState(null);
+  const arrowRef = react.useRef(null);
   const rootBoundary = "viewport";
-  const middleware = useMemo(() => {
+  const middleware = react.useMemo(() => {
     const ret = [];
-    ret.push(flip({
+    ret.push(reactDom$1.flip({
       boundary: boundaryElement || void 0,
       fallbackPlacements,
       padding: 4,
       rootBoundary
     }));
-    ret.push(offset({
+    ret.push(reactDom$1.offset({
       mainAxis: 3
     }));
-    ret.push(shift({
+    ret.push(reactDom$1.shift({
       boundary: boundaryElement || void 0,
       rootBoundary,
       padding: 4
     }));
-    ret.push(arrow({
+    ret.push(reactDom$1.arrow({
       element: arrowRef,
       padding: 2
     }));
@@ -6575,12 +6590,12 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     middlewareData,
     update,
     strategy
-  } = useFloating({
+  } = reactDom$1.useFloating({
     middleware,
     placement: placementProp,
-    whileElementsMounted: autoUpdate
+    whileElementsMounted: reactDom$1.autoUpdate
   });
-  const rootStyle = useMemo(() => ({
+  const rootStyle = react.useMemo(() => ({
     position: strategy,
     top: y != null ? y : 0,
     left: x != null ? x : 0
@@ -6588,7 +6603,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   const staticSide = placement && FLOATING_STATIC_SIDES[placement.split("-")[0]];
   const arrowX = (_b = middlewareData.arrow) == null ? void 0 : _b.x;
   const arrowY = (_c = middlewareData.arrow) == null ? void 0 : _c.y;
-  const arrowStyle = useMemo(() => {
+  const arrowStyle = react.useMemo(() => {
     const style = {
       left: arrowX !== null ? arrowX : void 0,
       top: arrowY !== null ? arrowY : void 0,
@@ -6598,12 +6613,12 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     if (staticSide) style[staticSide] = -15;
     return style;
   }, [arrowX, arrowY, staticSide]);
-  const [isOpen, setIsOpen] = useState(false);
-  const handleBlur = useCallback(() => setIsOpen(false), []);
-  const handleFocus = useCallback(() => setIsOpen(true), []);
-  const handleMouseEnter = useCallback(() => setIsOpen(true), []);
-  const handleMouseLeave = useCallback(() => setIsOpen(false), []);
-  useEffect(() => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const handleBlur = react.useCallback(() => setIsOpen(false), []);
+  const handleFocus = react.useCallback(() => setIsOpen(true), []);
+  const handleMouseEnter = react.useCallback(() => setIsOpen(true), []);
+  const handleMouseLeave = react.useCallback(() => setIsOpen(false), []);
+  react.useEffect(() => {
     if (!isOpen) return;
     function handleWindowMouseMove(event) {
       if (!referenceElement) return;
@@ -6618,23 +6633,23 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
       window.removeEventListener("mousemove", handleWindowMouseMove);
     };
   }, [isOpen, referenceElement]);
-  useEffect(() => {
+  react.useEffect(() => {
     if (disabled) setIsOpen(false);
   }, [disabled]);
-  useEffect(() => {
+  react.useEffect(() => {
     if (!content) setIsOpen(false);
   }, [content]);
-  useEffect(() => reference(referenceElement), [reference, referenceElement]);
-  const setArrow = useCallback(arrowEl => {
+  react.useEffect(() => reference(referenceElement), [reference, referenceElement]);
+  const setArrow = react.useCallback(arrowEl => {
     arrowRef.current = arrowEl;
     update();
   }, [update]);
-  const setFloating = useCallback(node => {
+  const setFloating = react.useCallback(node => {
     forwardedRef.current = node;
     floating(node);
   }, [floating, forwardedRef]);
   const childRef = childProp == null ? void 0 : childProp.ref;
-  const setReference = useCallback(node => {
+  const setReference = react.useCallback(node => {
     if (typeof childRef === "function") {
       childRef(node);
     } else if (childRef) {
@@ -6642,9 +6657,9 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     }
     setReferenceElement(node);
   }, [childRef]);
-  const child = useMemo(() => {
+  const child = react.useMemo(() => {
     if (!childProp) return null;
-    return cloneElement(childProp, {
+    return react.cloneElement(childProp, {
       onBlur: handleBlur,
       onFocus: handleFocus,
       onMouseEnter: handleMouseEnter,
@@ -6652,40 +6667,40 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
       ref: setReference
     });
   }, [childProp, handleBlur, handleFocus, handleMouseEnter, handleMouseLeave, setReference]);
-  if (!child) return /* @__PURE__ */jsx(Fragment, {});
+  if (!child) return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {});
   if (disabled) return child;
-  const root = /* @__PURE__ */jsx(Root$a, _objectSpread(_objectSpread({
+  const root = /* @__PURE__ */jsxRuntime.jsx(Root$a, _objectSpread(_objectSpread({
     "data-ui": "Tooltip"
   }, restProps), {}, {
     ref: setFloating,
     style: rootStyle,
     zOffset,
-    children: /* @__PURE__ */jsxs(Card, {
+    children: /* @__PURE__ */jsxRuntime.jsxs(Card, {
       "data-ui": "Tooltip__card",
       "data-placement": placement,
       padding,
       radius: 2,
       scheme,
       shadow,
-      children: [content, /* @__PURE__ */jsx(TooltipArrow, {
+      children: [content, /* @__PURE__ */jsxRuntime.jsx(TooltipArrow, {
         ref: setArrow,
         style: arrowStyle
       })]
     })
   }));
-  return /* @__PURE__ */jsxs(Fragment, {
-    children: [child, isOpen && /* @__PURE__ */jsx(Fragment, {
-      children: portal ? /* @__PURE__ */jsx(Portal, {
+  return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [child, isOpen && /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: portal ? /* @__PURE__ */jsxRuntime.jsx(Portal, {
         __unstable_name: typeof portal === "string" ? portal : void 0,
         children: root
       }) : root
     })]
   });
 });
-const Root$9 = styled.div(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n  line-height: 0;\n"])));
-const ListBox = styled(Box)(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n  & > ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n"])));
-const rotate = keyframes(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-const AnimatedSpinnerIcon = styled(SpinnerIcon)(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
+const Root$9 = styled__default.default.div(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n  line-height: 0;\n"])));
+const ListBox = styled__default.default(Box)(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n  & > ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n"])));
+const rotate = styled.keyframes(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+const AnimatedSpinnerIcon = styled__default.default(icons.SpinnerIcon)(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
 function AutocompleteOption(props) {
   const {
     children,
@@ -6694,17 +6709,17 @@ function AutocompleteOption(props) {
     selected,
     value
   } = props;
-  const handleClick = useCallback(() => {
+  const handleClick = react.useCallback(() => {
     setTimeout(() => {
       onSelect(value);
     }, 0);
   }, [onSelect, value]);
-  const handleKeyDown = useCallback(event => {
+  const handleKeyDown = react.useCallback(event => {
     if (event.key === "Enter" && !_isEnterToClickElement(event.currentTarget)) {
       handleClick();
     }
   }, [handleClick]);
-  return /* @__PURE__ */jsx("li", {
+  return /* @__PURE__ */jsxRuntime.jsx("li", {
     "aria-selected": selected,
     "data-ui": "AutocompleteOption",
     id,
@@ -6776,7 +6791,7 @@ const AUTOCOMPLETE_POPOVER_PLACEMENT = "bottom-start";
 const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ["bottom-start", "top-start"];
 const DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value;
 const DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1;
-const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
+const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, ref) {
   const {
       border = true,
       customValidity,
@@ -6807,7 +6822,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
       value: valueProp
     } = props,
     restProps = _objectWithoutProperties(props, _excluded31);
-  const [state, dispatch] = useReducer(autocompleteReducer, {
+  const [state, dispatch] = react.useReducer(autocompleteReducer, {
     activeValue: valueProp || null,
     focused: false,
     listFocused: false,
@@ -6821,16 +6836,16 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     query,
     value
   } = state;
-  const defaultRenderOption = useCallback(_ref22 => {
+  const defaultRenderOption = react.useCallback(_ref22 => {
     let {
       value: value2
     } = _ref22;
-    return /* @__PURE__ */jsx(Card, {
+    return /* @__PURE__ */jsxRuntime.jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
       radius: 2,
       tone: "inherit",
-      children: /* @__PURE__ */jsx(Text, {
+      children: /* @__PURE__ */jsxRuntime.jsx(Text, {
         size: fontSize,
         textOverflow: "ellipsis",
         children: value2
@@ -6839,24 +6854,24 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
   }, [fontSize, paddingProp]);
   const renderOption = typeof renderOptionProp === "function" ? renderOptionProp : defaultRenderOption;
   const filterOption = typeof filterOptionProp === "function" ? filterOptionProp : DEFAULT_FILTER_OPTION;
-  const rootElementRef = useRef(null);
-  const resultsPopoverElementRef = useRef(null);
-  const inputElementRef = useRef(null);
-  const listBoxElementRef = useRef(null);
-  const listFocusedRef = useRef(false);
-  const valueRef = useRef(value);
-  const valuePropRef = useRef(valueProp);
-  const popoverMouseWithinRef = useRef(false);
+  const rootElementRef = react.useRef(null);
+  const resultsPopoverElementRef = react.useRef(null);
+  const inputElementRef = react.useRef(null);
+  const listBoxElementRef = react.useRef(null);
+  const listFocusedRef = react.useRef(false);
+  const valueRef = react.useRef(value);
+  const valuePropRef = react.useRef(valueProp);
+  const popoverMouseWithinRef = react.useRef(false);
   const forwardedRef = useForwardedRef(ref);
   const listBoxId = "".concat(id, "-listbox");
   const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY;
   const padding = useArrayProp(paddingProp);
-  const currentOption = useMemo(() => value !== null ? options.find(o => o.value === value) : void 0, [options, value]);
-  const filteredOptions = useMemo(() => options.filter(option => query ? filterOption(query, option) : true), [filterOption, options, query]);
+  const currentOption = react.useMemo(() => value !== null ? options.find(o => o.value === value) : void 0, [options, value]);
+  const filteredOptions = react.useMemo(() => options.filter(option => query ? filterOption(query, option) : true), [filterOption, options, query]);
   const filteredOptionsLen = filteredOptions.length;
   const activeItemId = activeValue ? "".concat(id, "-option-").concat(activeValue) : void 0;
   const expanded = query !== null && loading || focused && query !== null;
-  const handleRootBlur = useCallback(event => {
+  const handleRootBlur = react.useCallback(event => {
     setTimeout(() => {
       if (popoverMouseWithinRef.current) {
         return;
@@ -6881,7 +6896,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
       }
     }, 0);
   }, [onBlur, onQueryChange, relatedElements]);
-  const handleRootFocus = useCallback(event => {
+  const handleRootFocus = react.useCallback(event => {
     const listBoxElement = listBoxElementRef.current;
     const focusedElement = event.target instanceof HTMLElement ? event.target : null;
     const listFocused2 = (listBoxElement == null ? void 0 : listBoxElement.contains(focusedElement)) || false;
@@ -6893,7 +6908,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
       });
     }
   }, []);
-  const handleOptionSelect = useCallback(v => {
+  const handleOptionSelect = react.useCallback(v => {
     var _a;
     dispatch({
       type: "value/change",
@@ -6906,7 +6921,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     if (onQueryChange) onQueryChange(null);
     (_a = inputElementRef.current) == null ? void 0 : _a.focus();
   }, [onChange, onSelect, onQueryChange]);
-  const handleRootKeyDown = useCallback(event => {
+  const handleRootKeyDown = react.useCallback(event => {
     var _a, _b;
     if (event.key === "ArrowDown") {
       event.preventDefault();
@@ -6954,7 +6969,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
       return;
     }
   }, [activeValue, filteredOptions, filteredOptionsLen, onQueryChange]);
-  const handleInputChange = useCallback(event => {
+  const handleInputChange = react.useCallback(event => {
     const nextQuery = event.currentTarget.value;
     dispatch({
       type: "input/change",
@@ -6962,7 +6977,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     });
     if (onQueryChange) onQueryChange(nextQuery);
   }, [onQueryChange]);
-  const handleInputFocus = useCallback(event => {
+  const handleInputFocus = react.useCallback(event => {
     if (!focused) {
       dispatch({
         type: "input/focus"
@@ -6970,13 +6985,13 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
       if (onFocus) onFocus(event);
     }
   }, [focused, onFocus]);
-  const handlePopoverMouseEnter = useCallback(() => {
+  const handlePopoverMouseEnter = react.useCallback(() => {
     popoverMouseWithinRef.current = true;
   }, []);
-  const handlePopoverMouseLeave = useCallback(() => {
+  const handlePopoverMouseLeave = react.useCallback(() => {
     popoverMouseWithinRef.current = false;
   }, []);
-  const handleClearButtonClick = useCallback(() => {
+  const handleClearButtonClick = react.useCallback(() => {
     var _a;
     dispatch({
       type: "root/clear"
@@ -6986,12 +7001,12 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     if (onQueryChange) onQueryChange(null);
     (_a = inputElementRef.current) == null ? void 0 : _a.focus();
   }, [onChange, onQueryChange]);
-  const handleClearButtonFocus = useCallback(() => {
+  const handleClearButtonFocus = react.useCallback(() => {
     dispatch({
       type: "input/focus"
     });
   }, []);
-  useEffect(() => {
+  react.useEffect(() => {
     if (valueProp !== valuePropRef.current) {
       valuePropRef.current = valueProp;
       if (valueProp !== void 0) {
@@ -7011,7 +7026,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
       });
     }
   }, [valueProp]);
-  useEffect(() => {
+  react.useEffect(() => {
     if (!focused && valueRef.current) {
       dispatch({
         type: "root/setActiveValue",
@@ -7019,7 +7034,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
       });
     }
   }, [focused]);
-  useEffect(() => {
+  react.useEffect(() => {
     const listElement = listBoxElementRef.current;
     if (!listElement) return;
     const activeOption = filteredOptions.find(o => o.value === activeValue);
@@ -7034,11 +7049,11 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
       }
     }
   }, [activeValue, filteredOptions]);
-  const setRef = useCallback(el => {
+  const setRef = react.useCallback(el => {
     inputElementRef.current = el;
     forwardedRef.current = el;
   }, [forwardedRef]);
-  const clearButton = useMemo(() => {
+  const clearButton = react.useMemo(() => {
     if (!loading && !disabled && value) {
       return {
         "aria-label": "Clear",
@@ -7047,15 +7062,15 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     }
     return void 0;
   }, [disabled, handleClearButtonFocus, loading, value]);
-  const openButtonBoxPadding = useMemo(() => padding.map(v => {
+  const openButtonBoxPadding = react.useMemo(() => padding.map(v => {
     if (v === 0) return 0;
     if (v === 1) return 1;
     if (v === 2) return 1;
     return v - 2;
   }), [padding]);
-  const openButtonPadding = useMemo(() => padding.map(v => Math.max(v - 1, 0)), [padding]);
-  const openButtonProps = useMemo(() => typeof openButton === "object" ? openButton : EMPTY_RECORD, [openButton]);
-  const handleOpenClick = useCallback(event => {
+  const openButtonPadding = react.useMemo(() => padding.map(v => Math.max(v - 1, 0)), [padding]);
+  const openButtonProps = react.useMemo(() => typeof openButton === "object" ? openButton : EMPTY_RECORD, [openButton]);
+  const handleOpenClick = react.useCallback(event => {
     dispatch({
       type: "root/open",
       query: value ? renderValue(value, currentOption) : ""
@@ -7066,21 +7081,21 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
       return (_a = inputElementRef.current) == null ? void 0 : _a.focus();
     });
   }, [currentOption, openButtonProps, renderValue, value]);
-  const openButtonNode = useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */jsx(Box, {
+  const openButtonNode = react.useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */jsxRuntime.jsx(Box, {
     "aria-hidden": expanded,
     padding: openButtonBoxPadding,
-    children: /* @__PURE__ */jsx(Button, _objectSpread(_objectSpread({
+    children: /* @__PURE__ */jsxRuntime.jsx(Button, _objectSpread(_objectSpread({
       "aria-label": "Open",
       disabled: expanded,
       fontSize,
-      icon: ChevronDownIcon,
+      icon: icons.ChevronDownIcon,
       mode: "bleed",
       padding: openButtonPadding
     }, openButtonProps), {}, {
       onClick: handleOpenClick
     }))
   }) : void 0, [disabled, expanded, fontSize, handleOpenClick, openButton, openButtonBoxPadding, openButtonPadding, openButtonProps, readOnly]);
-  const inputValue = useMemo(() => {
+  const inputValue = react.useMemo(() => {
     if (query === null) {
       if (value !== null) {
         return renderValue(value, currentOption);
@@ -7089,7 +7104,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     }
     return query;
   }, [currentOption, query, renderValue, value]);
-  const input = /* @__PURE__ */jsx(TextInput, _objectSpread(_objectSpread({}, restProps), {}, {
+  const input = /* @__PURE__ */jsxRuntime.jsx(TextInput, _objectSpread(_objectSpread({}, restProps), {}, {
     "aria-activedescendant": activeItemId,
     "aria-autocomplete": "list",
     "aria-expanded": expanded,
@@ -7119,21 +7134,21 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     suffix: suffix || openButtonNode,
     value: inputValue
   }));
-  const handleListBoxKeyDown = useCallback(event => {
+  const handleListBoxKeyDown = react.useCallback(event => {
     var _a;
     if (event.key === "Tab") {
       if (listFocused) (_a = inputElementRef.current) == null ? void 0 : _a.focus();
     }
   }, [listFocused]);
-  const content = useMemo(() => {
+  const content = react.useMemo(() => {
     if (filteredOptions.length === 0) return null;
-    return /* @__PURE__ */jsx(ListBox, _objectSpread(_objectSpread({
+    return /* @__PURE__ */jsxRuntime.jsx(ListBox, _objectSpread(_objectSpread({
       "data-ui": "AutoComplete__results",
       onKeyDown: handleListBoxKeyDown,
       padding: 1
     }, listBox), {}, {
       tabIndex: -1,
-      children: /* @__PURE__ */jsx(Stack, {
+      children: /* @__PURE__ */jsxRuntime.jsx(Stack, {
         as: "ul",
         "aria-multiselectable": false,
         "data-ui": "AutoComplete__resultsList",
@@ -7143,12 +7158,12 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
         space: 1,
         children: filteredOptions.map(option => {
           const active = activeValue !== null ? option.value === activeValue : currentOption === option;
-          return /* @__PURE__ */jsx(AutocompleteOption, {
+          return /* @__PURE__ */jsxRuntime.jsx(AutocompleteOption, {
             id: "".concat(id, "-option-").concat(option.value),
             onSelect: handleOptionSelect,
             selected: active,
             value: option.value,
-            children: cloneElement(renderOption(option), {
+            children: react.cloneElement(renderOption(option), {
               disabled: loading,
               selected: active,
               tabIndex: listFocused && active ? 0 : -1
@@ -7158,7 +7173,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
       })
     }));
   }, [activeValue, currentOption, filteredOptions, handleOptionSelect, handleListBoxKeyDown, id, listBox, listBoxId, listFocused, loading, renderOption]);
-  const results = useMemo(() => {
+  const results = react.useMemo(() => {
     if (renderPopover) {
       return renderPopover({
         content,
@@ -7171,7 +7186,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     if (filteredOptionsLen === 0) {
       return null;
     }
-    return /* @__PURE__ */jsx(Popover, _objectSpread({
+    return /* @__PURE__ */jsxRuntime.jsx(Popover, _objectSpread({
       arrow: false,
       constrainSize: true,
       content,
@@ -7188,7 +7203,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
       referenceElement: inputElementRef.current
     }, popover));
   }, [content, expanded, filteredOptionsLen, handlePopoverMouseEnter, handlePopoverMouseLeave, popover, radius, renderPopover]);
-  return /* @__PURE__ */jsxs(Root$9, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$9, {
     "data-ui": "Autocomplete",
     onBlur: handleRootBlur,
     onFocus: handleRootFocus,
@@ -7198,9 +7213,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
   });
 });
 const Autocomplete = InnerAutocomplete;
-const Root$8 = styled.ol(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  list-style: none;\n  align-items: center;\n  white-space: nowrap;\n  line-height: 0;\n"])));
-const ExpandButton = styled(Button)(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n  appearance: none;\n  margin: -4px;\n"])));
-const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
+const Root$8 = styled__default.default.ol(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  list-style: none;\n  align-items: center;\n  white-space: nowrap;\n  line-height: 0;\n"])));
+const ExpandButton = styled__default.default(Button)(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n  appearance: none;\n  margin: -4px;\n"])));
+const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
   const {
       children,
       maxLength,
@@ -7209,23 +7224,23 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
     } = props,
     restProps = _objectWithoutProperties(props, _excluded32);
   const space = useArrayProp(spaceRaw);
-  const [open, setOpen] = useState(false);
-  const [expandElement, setExpandElement] = useState(null);
-  const [popoverElement, setPopoverElement] = useState(null);
-  const collapse = useCallback(() => setOpen(false), []);
-  const expand = useCallback(() => setOpen(true), []);
+  const [open, setOpen] = react.useState(false);
+  const [expandElement, setExpandElement] = react.useState(null);
+  const [popoverElement, setPopoverElement] = react.useState(null);
+  const collapse = react.useCallback(() => setOpen(false), []);
+  const expand = react.useCallback(() => setOpen(true), []);
   useClickOutside(collapse, [expandElement, popoverElement]);
-  const rawItems = useMemo(() => Children.toArray(children).filter(child => {
-    return isValidElement(child);
+  const rawItems = react.useMemo(() => react.Children.toArray(children).filter(child => {
+    return react.isValidElement(child);
   }), [children]);
-  const items = useMemo(() => {
+  const items = react.useMemo(() => {
     const len = rawItems.length;
     if (maxLength && len > maxLength) {
       const beforeLength = Math.ceil(maxLength / 2);
       const afterLength = Math.floor(maxLength / 2);
-      return [...rawItems.slice(0, beforeLength - 1), /* @__PURE__ */jsx(Popover, {
+      return [...rawItems.slice(0, beforeLength - 1), /* @__PURE__ */jsxRuntime.jsx(Popover, {
         constrainSize: true,
-        content: /* @__PURE__ */jsx(Stack, {
+        content: /* @__PURE__ */jsxRuntime.jsx(Stack, {
           as: "ol",
           overflow: "auto",
           padding: space,
@@ -7236,7 +7251,7 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
         placement: "top",
         portal: true,
         ref: setPopoverElement,
-        children: /* @__PURE__ */jsx(ExpandButton, {
+        children: /* @__PURE__ */jsxRuntime.jsx(ExpandButton, {
           fontSize: 1,
           mode: "bleed",
           onClick: open ? collapse : expand,
@@ -7249,20 +7264,20 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
     }
     return rawItems;
   }, [collapse, expand, maxLength, open, rawItems, space]);
-  return /* @__PURE__ */jsx(Root$8, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$8, _objectSpread(_objectSpread({
     "data-ui": "Breadcrumbs"
   }, restProps), {}, {
     ref,
-    children: items.map((item, itemIndex) => /* @__PURE__ */jsxs(Fragment$1, {
-      children: [itemIndex > 0 && /* @__PURE__ */jsx(Box, {
+    children: items.map((item, itemIndex) => /* @__PURE__ */jsxRuntime.jsxs(react.Fragment, {
+      children: [itemIndex > 0 && /* @__PURE__ */jsxRuntime.jsx(Box, {
         "aria-hidden": true,
         as: "li",
         paddingX: space,
-        children: separator || /* @__PURE__ */jsx(Text, {
+        children: separator || /* @__PURE__ */jsxRuntime.jsx(Text, {
           muted: true,
           children: "/"
         })
-      }), /* @__PURE__ */jsx(Box, {
+      }), /* @__PURE__ */jsxRuntime.jsx(Box, {
         as: "li",
         children: item
       })]
@@ -7302,21 +7317,21 @@ function responsiveDialogPositionStyle(props) {
   }));
 }
 const key$3 = Symbol.for("@sanity/ui/context/dialog");
-globalScope[key$3] = globalScope[key$3] || createContext({
+globalScope[key$3] = globalScope[key$3] || react.createContext({
   version: 0
 });
 const DialogContext = globalScope[key$3];
 function useDialog() {
-  return useContext(DialogContext);
+  return react.useContext(DialogContext);
 }
-const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
-const DialogContainer = styled(Container)(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
-const DialogCardRoot = styled(Card)(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  overflow: hidden;\n"])));
-const DialogLayout = styled(Flex)(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
-const DialogHeader = styled(Card)(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 2;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    border-bottom: 1px solid var(--card-hairline-soft-color);\n  }\n"])));
-const DialogContent = styled(Box)(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
-const DialogFooter = styled(Box)(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 3;\n  border-top: 1px solid var(--card-hairline-soft-color);\n"])));
-const DialogCard = forwardRef(function DialogCard2(props, ref) {
+const Root$7 = styled__default.default(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
+const DialogContainer = styled__default.default(Container)(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
+const DialogCardRoot = styled__default.default(Card)(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  overflow: hidden;\n"])));
+const DialogLayout = styled__default.default(Flex)(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
+const DialogHeader = styled__default.default(Card)(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 2;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    border-bottom: 1px solid var(--card-hairline-soft-color);\n  }\n"])));
+const DialogContent = styled__default.default(Box)(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
+const DialogFooter = styled__default.default(Box)(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 3;\n  border-top: 1px solid var(--card-hairline-soft-color);\n"])));
+const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
   const {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
@@ -7336,8 +7351,8 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
   const shadow = useArrayProp(shadowProp);
   const width = useArrayProp(widthProp);
   const forwardedRef = useForwardedRef(ref);
-  const [rootElement, setRootElement] = useState(null);
-  const localContentRef = useRef(null);
+  const [rootElement, setRootElement] = react.useState(null);
+  const localContentRef = react.useRef(null);
   const layer = useLayer();
   const {
     isTopLayer
@@ -7345,13 +7360,13 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
   const labelId = "".concat(id, "_label");
   const showCloseButton = Boolean(onClose) && hideCloseButton === false;
   const showHeader = Boolean(header) || showCloseButton;
-  useEffect(() => {
+  react.useEffect(() => {
     if (!autoFocus) return;
     if (forwardedRef.current) {
       focusFirstDescendant(forwardedRef.current);
     }
   }, [autoFocus, forwardedRef]);
-  useGlobalKeyDown(useCallback(event => {
+  useGlobalKeyDown(react.useCallback(event => {
     if (!isTopLayer || !onClose) return;
     if (event.key === "Escape") {
       event.preventDefault();
@@ -7359,63 +7374,63 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
       onClose();
     }
   }, [isTopLayer, onClose]));
-  useClickOutside(useCallback(() => {
+  useClickOutside(react.useCallback(() => {
     if (!isTopLayer || !onClickOutside) return;
     onClickOutside();
   }, [isTopLayer, onClickOutside]), [rootElement]);
-  const setRef = useCallback(el => {
+  const setRef = react.useCallback(el => {
     setRootElement(el);
     forwardedRef.current = el;
   }, [forwardedRef]);
-  const setContentRef = useCallback(el => {
+  const setContentRef = react.useCallback(el => {
     localContentRef.current = el;
     if (typeof contentRef === "function") contentRef(el);else if (contentRef) contentRef.current = el;
   }, [contentRef]);
-  return /* @__PURE__ */jsx(DialogContainer, {
+  return /* @__PURE__ */jsxRuntime.jsx(DialogContainer, {
     "data-ui": "DialogCard",
     width,
-    children: /* @__PURE__ */jsx(DialogCardRoot, {
+    children: /* @__PURE__ */jsxRuntime.jsx(DialogCardRoot, {
       radius,
       ref: setRef,
       scheme,
       shadow,
-      children: /* @__PURE__ */jsxs(DialogLayout, {
+      children: /* @__PURE__ */jsxRuntime.jsxs(DialogLayout, {
         direction: "column",
-        children: [showHeader && /* @__PURE__ */jsx(DialogHeader, {
-          children: /* @__PURE__ */jsxs(Flex, {
-            children: [/* @__PURE__ */jsx(Box, {
+        children: [showHeader && /* @__PURE__ */jsxRuntime.jsx(DialogHeader, {
+          children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
+            children: [/* @__PURE__ */jsxRuntime.jsx(Box, {
               flex: 1,
               padding: 4,
-              children: header && /* @__PURE__ */jsx(Text, {
+              children: header && /* @__PURE__ */jsxRuntime.jsx(Text, {
                 id: labelId,
                 weight: "semibold",
                 children: header
               })
-            }), showCloseButton && /* @__PURE__ */jsx(Box, {
+            }), showCloseButton && /* @__PURE__ */jsxRuntime.jsx(Box, {
               padding: 2,
-              children: /* @__PURE__ */jsx(Button, {
+              children: /* @__PURE__ */jsxRuntime.jsx(Button, {
                 "aria-label": "Close dialog",
                 disabled: !onClose,
-                icon: CloseIcon,
+                icon: icons.CloseIcon,
                 mode: "bleed",
                 onClick: onClose,
                 padding: 3
               })
             })]
           })
-        }), /* @__PURE__ */jsx(DialogContent, {
+        }), /* @__PURE__ */jsxRuntime.jsx(DialogContent, {
           flex: 1,
           ref: setContentRef,
           tabIndex: -1,
           children
-        }), footer && /* @__PURE__ */jsx(DialogFooter, {
+        }), footer && /* @__PURE__ */jsxRuntime.jsx(DialogFooter, {
           children: footer
         })]
       })
     })
   });
 });
-const Dialog = forwardRef(function Dialog2(props, ref) {
+const Dialog = react.forwardRef(function Dialog2(props, ref) {
   var _a;
   const dialog = useDialog();
   const theme = useTheme();
@@ -7444,10 +7459,10 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
   const position = useArrayProp(positionProp);
   const width = useArrayProp(widthProp);
   const zOffset = useArrayProp(zOffsetProp);
-  const preDivRef = useRef(null);
-  const postDivRef = useRef(null);
-  const cardRef = useRef(null);
-  const handleFocus = useCallback(event => {
+  const preDivRef = react.useRef(null);
+  const postDivRef = react.useRef(null);
+  const cardRef = react.useRef(null);
+  const handleFocus = react.useCallback(event => {
     const target = event.target;
     const cardElement = cardRef.current;
     if (!cardElement) {
@@ -7463,9 +7478,9 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
     }
   }, []);
   const labelId = "".concat(id, "_label");
-  return /* @__PURE__ */jsx(Portal, {
+  return /* @__PURE__ */jsxRuntime.jsx(Portal, {
     __unstable_name: portal,
-    children: /* @__PURE__ */jsxs(Root$7, _objectSpread(_objectSpread({}, restProps), {}, {
+    children: /* @__PURE__ */jsxRuntime.jsxs(Root$7, _objectSpread(_objectSpread({}, restProps), {}, {
       $padding: padding,
       $position: position,
       "aria-labelledby": labelId,
@@ -7476,10 +7491,10 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
       ref,
       role: "dialog",
       zOffset,
-      children: [/* @__PURE__ */jsx("div", {
+      children: [/* @__PURE__ */jsxRuntime.jsx("div", {
         ref: preDivRef,
         tabIndex: 0
-      }), /* @__PURE__ */jsx(DialogCard, {
+      }), /* @__PURE__ */jsxRuntime.jsx(DialogCard, {
         __unstable_autoFocus: autoFocus,
         __unstable_hideCloseButton: hideCloseButton,
         contentRef,
@@ -7494,7 +7509,7 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
         shadow: cardShadow,
         width,
         children
-      }), /* @__PURE__ */jsx("div", {
+      }), /* @__PURE__ */jsxRuntime.jsx("div", {
         ref: postDivRef,
         tabIndex: 0
       })]
@@ -7507,19 +7522,19 @@ function DialogProvider(props) {
     position,
     zOffset
   } = props;
-  const contextValue = useMemo(() => ({
+  const contextValue = react.useMemo(() => ({
     version: 0,
     position,
     zOffset
   }), [position, zOffset]);
-  return /* @__PURE__ */jsx(DialogContext.Provider, {
+  return /* @__PURE__ */jsxRuntime.jsx(DialogContext.Provider, {
     value: contextValue,
     children
   });
 }
-const Root$6 = styled.kbd(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n  font: inherit;\n"])));
-const Key = styled(KBD)(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
-const Hotkeys = forwardRef(function Hotkeys2(props, ref) {
+const Root$6 = styled__default.default.kbd(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n  font: inherit;\n"])));
+const Key = styled__default.default(KBD)(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
+const Hotkeys = react.forwardRef(function Hotkeys2(props, ref) {
   const {
       fontSize,
       keys,
@@ -7530,16 +7545,16 @@ const Hotkeys = forwardRef(function Hotkeys2(props, ref) {
     restProps = _objectWithoutProperties(props, _excluded34);
   const space = useArrayProp(spaceProp);
   if (!keys || keys.length === 0) {
-    return /* @__PURE__ */jsx(Fragment, {});
+    return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
-  return /* @__PURE__ */jsx(Root$6, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$6, _objectSpread(_objectSpread({
     "data-ui": "Hotkeys"
   }, restProps), {}, {
     ref,
-    children: /* @__PURE__ */jsx(Inline, {
+    children: /* @__PURE__ */jsxRuntime.jsx(Inline, {
       as: "span",
       space,
-      children: keys.map((key, i) => /* @__PURE__ */jsx(Key, {
+      children: keys.map((key, i) => /* @__PURE__ */jsxRuntime.jsx(Key, {
         fontSize,
         padding,
         radius,
@@ -7549,7 +7564,7 @@ const Hotkeys = forwardRef(function Hotkeys2(props, ref) {
   }));
 });
 const key$2 = Symbol.for("@sanity/ui/context/menu");
-globalScope[key$2] = globalScope[key$2] || createContext(null);
+globalScope[key$2] = globalScope[key$2] || react.createContext(null);
 const MenuContext = globalScope[key$2];
 function _isFocusable(element) {
   return isHTMLAnchorElement(element) && element.getAttribute("data-disabled") !== "true" || isHTMLButtonElement(element) && !element.disabled;
@@ -7601,17 +7616,17 @@ function useMenuController(props) {
     originElement,
     shouldFocus
   } = props;
-  const elementsRef = useRef([]);
-  const [rootElement, setRootElement] = useState(null);
-  const [activeIndex, _setActiveIndex] = useState(-1);
-  const activeIndexRef = useRef(activeIndex);
+  const elementsRef = react.useRef([]);
+  const [rootElement, setRootElement] = react.useState(null);
+  const [activeIndex, _setActiveIndex] = react.useState(-1);
+  const activeIndexRef = react.useRef(activeIndex);
   const activeElement = elementsRef.current[activeIndex] || null;
   const mounted = Boolean(rootElement);
-  const setActiveIndex = useCallback(nextActiveIndex => {
+  const setActiveIndex = react.useCallback(nextActiveIndex => {
     _setActiveIndex(nextActiveIndex);
     activeIndexRef.current = nextActiveIndex;
   }, []);
-  const mount = useCallback((element, selected) => {
+  const mount = react.useCallback((element, selected) => {
     if (!element) return () => void 0;
     if (elementsRef.current.indexOf(element) === -1) {
       elementsRef.current.push(element);
@@ -7628,7 +7643,7 @@ function useMenuController(props) {
       }
     };
   }, [rootElement, setActiveIndex]);
-  const handleKeyDown = useCallback(event => {
+  const handleKeyDown = react.useCallback(event => {
     if (event.key === "Tab") {
       if (originElement) {
         originElement.focus();
@@ -7687,16 +7702,16 @@ function useMenuController(props) {
       onKeyDown(event);
     }
   }, [onKeyDown, originElement, setActiveIndex]);
-  const handleItemMouseEnter = useCallback(event => {
+  const handleItemMouseEnter = react.useCallback(event => {
     const element = event.currentTarget;
     const currentIndex = elementsRef.current.indexOf(element);
     setActiveIndex(currentIndex);
   }, [setActiveIndex]);
-  const handleItemMouseLeave = useCallback(() => {
+  const handleItemMouseLeave = react.useCallback(() => {
     rootElement == null ? void 0 : rootElement.focus();
     setActiveIndex(-1);
   }, [rootElement, setActiveIndex]);
-  useEffect(() => {
+  react.useEffect(() => {
     if (!mounted) return;
     const rafId = window.requestAnimationFrame(() => {
       const _activeIndex = activeIndexRef.current;
@@ -7739,8 +7754,8 @@ function useMenuController(props) {
     setRootElement
   };
 }
-const Root$5 = styled(Box)(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["\n  outline: none;\n  overflow: auto;\n"])));
-const Menu = forwardRef(function Menu2(props, ref) {
+const Root$5 = styled__default.default(Box)(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["\n  outline: none;\n  overflow: auto;\n"])));
+const Menu = react.forwardRef(function Menu2(props, ref) {
   const {
       children,
       focusFirst,
@@ -7775,26 +7790,26 @@ const Menu = forwardRef(function Menu2(props, ref) {
     originElement,
     shouldFocus
   });
-  const handleRefChange = useCallback(el => {
+  const handleRefChange = react.useCallback(el => {
     setRootElement(el);
     forwardedRef.current = el;
   }, [forwardedRef, setRootElement]);
-  useEffect(() => {
+  react.useEffect(() => {
     if (onItemSelect) onItemSelect(activeIndex);
   }, [activeIndex, onItemSelect]);
-  useClickOutside(useCallback(event => isTopLayer && onClickOutside && onClickOutside(event), [isTopLayer, onClickOutside]), [rootElement]);
-  useGlobalKeyDown(useCallback(event => {
+  useClickOutside(react.useCallback(event => isTopLayer && onClickOutside && onClickOutside(event), [isTopLayer, onClickOutside]), [rootElement]);
+  useGlobalKeyDown(react.useCallback(event => {
     if (!isTopLayer) return;
     if (event.key === "Escape") {
       event.stopPropagation();
       if (onEscape) onEscape();
     }
   }, [isTopLayer, onEscape]));
-  useEffect(() => {
+  react.useEffect(() => {
     if (!rootElement || !registerElement) return;
     return registerElement(rootElement);
   }, [registerElement, rootElement]);
-  const value = useMemo(() => ({
+  const value = react.useMemo(() => ({
     version: 0,
     activeElement,
     activeIndex,
@@ -7808,9 +7823,9 @@ const Menu = forwardRef(function Menu2(props, ref) {
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave
   }), [activeElement, activeIndex, mount, handleItemMouseEnter, handleItemMouseLeave, onClickOutside, onEscape, onItemClick, registerElement]);
-  return /* @__PURE__ */jsx(MenuContext.Provider, {
+  return /* @__PURE__ */jsxRuntime.jsx(MenuContext.Provider, {
     value,
-    children: /* @__PURE__ */jsx(Root$5, _objectSpread(_objectSpread({
+    children: /* @__PURE__ */jsxRuntime.jsx(Root$5, _objectSpread(_objectSpread({
       "data-ui": "Menu"
     }, restProps), {}, {
       onKeyDown: handleKeyDown,
@@ -7818,14 +7833,14 @@ const Menu = forwardRef(function Menu2(props, ref) {
       ref: handleRefChange,
       role: "menu",
       tabIndex: -1,
-      children: /* @__PURE__ */jsx(Stack, {
+      children: /* @__PURE__ */jsxRuntime.jsx(Stack, {
         space,
         children
       })
     }))
   });
 });
-const MenuButton = forwardRef(function MenuButton2(props, ref) {
+const MenuButton = react.forwardRef(function MenuButton2(props, ref) {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = false,
     boundaryElement: deprecated_boundaryElement,
@@ -7840,24 +7855,24 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     popoverRadius: deprecated_popoverRadius,
     preventOverflow: deprecated_preventOverflow
   } = props;
-  const [open, setOpen] = useState(false);
-  const [shouldFocus, setShouldFocus] = useState(null);
-  const [buttonElement, setButtonElement] = useState(null);
-  const [menuElements, setChildMenuElements] = useState([]);
-  const openRef = useRef(open);
-  useEffect(() => {
+  const [open, setOpen] = react.useState(false);
+  const [shouldFocus, setShouldFocus] = react.useState(null);
+  const [buttonElement, setButtonElement] = react.useState(null);
+  const [menuElements, setChildMenuElements] = react.useState([]);
+  const openRef = react.useRef(open);
+  react.useEffect(() => {
     if (onClose && !open && openRef.current) {
       onClose();
     }
   }, [onClose, open]);
-  useEffect(() => {
+  react.useEffect(() => {
     openRef.current = open;
   }, [open]);
-  const handleButtonClick = useCallback(() => {
+  const handleButtonClick = react.useCallback(() => {
     setOpen(v => !v);
     setShouldFocus(null);
   }, []);
-  const handleButtonKeyDown = useCallback(event => {
+  const handleButtonKeyDown = react.useCallback(event => {
     if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       setOpen(true);
@@ -7871,7 +7886,7 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
       return;
     }
   }, []);
-  const handleMenuClickOutside = useCallback(event => {
+  const handleMenuClickOutside = react.useCallback(event => {
     const target = event.target;
     if (!(target instanceof Node)) {
       return;
@@ -7886,12 +7901,12 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     }
     setOpen(false);
   }, [buttonElement, menuElements]);
-  const handleMenuEscape = useCallback(() => {
+  const handleMenuEscape = react.useCallback(() => {
     setOpen(false);
     if (disableRestoreFocusOnClose) return;
     if (buttonElement) buttonElement.focus();
   }, [buttonElement, disableRestoreFocusOnClose]);
-  const handleBlur = useCallback(event => {
+  const handleBlur = react.useCallback(event => {
     const target = event.relatedTarget;
     if (!(target instanceof Node)) {
       return;
@@ -7903,12 +7918,12 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     }
     setOpen(false);
   }, [menuElements]);
-  const handleItemClick = useCallback(() => {
+  const handleItemClick = react.useCallback(() => {
     setOpen(false);
     if (disableRestoreFocusOnClose) return;
     if (buttonElement) buttonElement.focus();
   }, [buttonElement, disableRestoreFocusOnClose]);
-  const registerElement = useCallback(el => {
+  const registerElement = react.useCallback(el => {
     setChildMenuElements(els => els.concat([el]));
     return () => {
       setChildMenuElements(els => {
@@ -7916,7 +7931,7 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
       });
     };
   }, []);
-  const menuProps = useMemo(() => ({
+  const menuProps = react.useMemo(() => ({
     "aria-labelledby": id,
     onBlurCapture: handleBlur,
     onClickOutside: handleMenuClickOutside,
@@ -7926,8 +7941,8 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     registerElement,
     shouldFocus
   }), [buttonElement, handleMenuClickOutside, handleMenuEscape, handleItemClick, id, handleBlur, registerElement, shouldFocus]);
-  const menu = isElement$1(menuProp) ? cloneElement(menuProp, menuProps) : null;
-  const setButtonRef = useCallback(el => {
+  const menu = ReactIs.isElement(menuProp) ? react.cloneElement(menuProp, menuProps) : null;
+  const setButtonRef = react.useCallback(el => {
     if (typeof ref === "function") {
       ref(el);
     } else if (ref) {
@@ -7935,7 +7950,7 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     }
     setButtonElement(el);
   }, [ref]);
-  const button = useMemo(() => isElement$1(buttonProp) ? cloneElement(buttonProp, {
+  const button = react.useMemo(() => ReactIs.isElement(buttonProp) ? react.cloneElement(buttonProp, {
     "data-ui": "MenuButton",
     id,
     onClick: handleButtonClick,
@@ -7945,7 +7960,7 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     ref: setButtonRef,
     selected: open
   }) : null, [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef]);
-  const popoverProps = useMemo(() => _objectSpread({
+  const popoverProps = react.useMemo(() => _objectSpread({
     boundaryElement: deprecated_boundaryElement,
     overflow: "auto",
     placement: deprecated_placement,
@@ -7954,17 +7969,17 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     radius: deprecated_popoverRadius,
     scheme: deprecated_popoverScheme
   }, popover || {}), [deprecated_boundaryElement, deprecated_placement, deprecated_popoverRadius, deprecated_popoverScheme, deprecated_portal, deprecated_preventOverflow, popover]);
-  return /* @__PURE__ */jsx(Popover, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Popover, _objectSpread(_objectSpread({
     "data-ui": "MenuButton__popover"
   }, popoverProps), {}, {
     content: menu,
     open,
-    children: button || /* @__PURE__ */jsx(Fragment, {})
+    children: button || /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {})
   }));
 });
-const MenuDivider = styled.hr(_templateObject76 || (_templateObject76 = _taggedTemplateLiteral(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
+const MenuDivider = styled__default.default.hr(_templateObject76 || (_templateObject76 = _taggedTemplateLiteral(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
 function selectableBaseStyle() {
-  return css(_templateObject77 || (_templateObject77 = _taggedTemplateLiteral(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
+  return styled.css(_templateObject77 || (_templateObject77 = _taggedTemplateLiteral(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
 }
 function selectableColorStyle(props) {
   var _a, _b;
@@ -7978,11 +7993,11 @@ function selectableColorStyle(props) {
     selectable
   } = theme.sanity.color;
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return css(_templateObject78 || (_templateObject78 = _taggedTemplateLiteral(["\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n    outline: none;\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[aria-pressed='true'] {\n          ", "\n        }\n\n        &[data-selected],\n        &[aria-selected='true'] > & {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    ", "\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.card) == null ? void 0 : _b.root);
+  return styled.css(_templateObject78 || (_templateObject78 = _taggedTemplateLiteral(["\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n    outline: none;\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[aria-pressed='true'] {\n          ", "\n        }\n\n        &[data-selected],\n        &[aria-selected='true'] > & {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    ", "\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.card) == null ? void 0 : _b.root);
 }
-const Selectable = styled(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
+const Selectable = styled__default.default(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 function useMenu() {
-  const value = useContext(MenuContext);
+  const value = react.useContext(MenuContext);
   if (!value) {
     throw new Error("useMenu(): missing context value");
   }
@@ -8016,17 +8031,17 @@ function MenuGroup(props) {
     onItemMouseEnter = menu.onMouseEnter,
     registerElement
   } = menu;
-  const [rootElement, setRootElement] = useState(null);
-  const [open, setOpen] = useState(false);
-  const shouldFocusRef = useRef(null);
+  const [rootElement, setRootElement] = react.useState(null);
+  const [open, setOpen] = react.useState(false);
+  const shouldFocusRef = react.useRef(null);
   const active = Boolean(activeElement) && activeElement === rootElement;
-  const [withinMenu, setWithinMenu] = useState(false);
-  const handleMouseEnter = useCallback(event => {
+  const [withinMenu, setWithinMenu] = react.useState(false);
+  const handleMouseEnter = react.useCallback(event => {
     setWithinMenu(false);
     onItemMouseEnter(event);
     setOpen(true);
   }, [onItemMouseEnter]);
-  const handleMenuKeyDown = useCallback(event => {
+  const handleMenuKeyDown = react.useCallback(event => {
     if (event.key === "ArrowLeft") {
       event.stopPropagation();
       setOpen(false);
@@ -8035,7 +8050,7 @@ function MenuGroup(props) {
       });
     }
   }, [rootElement]);
-  const handleClick = useCallback(event => {
+  const handleClick = react.useCallback(event => {
     if (onClick) onClick(event);
     shouldFocusRef.current = "first";
     setOpen(true);
@@ -8043,19 +8058,19 @@ function MenuGroup(props) {
       shouldFocusRef.current = null;
     });
   }, [onClick]);
-  const handleChildItemClick = useCallback(() => {
+  const handleChildItemClick = react.useCallback(() => {
     setOpen(false);
     if (onItemClick) onItemClick();
   }, [onItemClick]);
-  const handleMenuMouseEnter = useCallback(() => setWithinMenu(true), []);
-  useEffect(() => mount(rootElement), [mount, rootElement]);
-  useEffect(() => {
+  const handleMenuMouseEnter = react.useCallback(() => setWithinMenu(true), []);
+  react.useEffect(() => mount(rootElement), [mount, rootElement]);
+  react.useEffect(() => {
     if (!active) setOpen(false);
   }, [active]);
-  useEffect(() => {
+  react.useEffect(() => {
     if (!open) setWithinMenu(false);
   }, [open]);
-  const childMenu = /* @__PURE__ */jsx(Menu, {
+  const childMenu = /* @__PURE__ */jsxRuntime.jsx(Menu, {
     onClickOutside,
     onEscape,
     onItemClick: handleChildItemClick,
@@ -8065,7 +8080,7 @@ function MenuGroup(props) {
     shouldFocus: shouldFocusRef.current,
     children
   });
-  const handleKeyDown = useCallback(event => {
+  const handleKeyDown = react.useCallback(event => {
     const target = event.currentTarget;
     if (document.activeElement !== target) {
       return;
@@ -8080,11 +8095,11 @@ function MenuGroup(props) {
       return;
     }
   }, []);
-  return /* @__PURE__ */jsx(Popover, _objectSpread(_objectSpread({}, popover), {}, {
+  return /* @__PURE__ */jsxRuntime.jsx(Popover, _objectSpread(_objectSpread({}, popover), {}, {
     content: childMenu,
     "data-ui": "MenuGroup__popover",
     open,
-    children: /* @__PURE__ */jsx(Selectable, _objectSpread(_objectSpread({
+    children: /* @__PURE__ */jsxRuntime.jsx(Selectable, _objectSpread(_objectSpread({
       "data-as": as,
       "data-ui": "MenuGroup",
       forwardedAs: as
@@ -8100,25 +8115,25 @@ function MenuGroup(props) {
       ref: setRootElement,
       tabIndex: -1,
       type: as === "button" ? "button" : void 0,
-      children: /* @__PURE__ */jsx(Box, {
+      children: /* @__PURE__ */jsxRuntime.jsx(Box, {
         padding,
-        children: /* @__PURE__ */jsxs(Flex, {
-          children: [icon && /* @__PURE__ */jsxs(Text, {
+        children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
+          children: [icon && /* @__PURE__ */jsxRuntime.jsxs(Text, {
             size: fontSize,
-            children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
-          }), /* @__PURE__ */jsx(Box, {
+            children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
+          }), /* @__PURE__ */jsxRuntime.jsx(Box, {
             flex: 1,
             marginLeft: icon ? space : void 0,
-            children: /* @__PURE__ */jsx(Text, {
+            children: /* @__PURE__ */jsxRuntime.jsx(Text, {
               size: fontSize,
               textOverflow: "ellipsis",
               children: text
             })
-          }), /* @__PURE__ */jsx(Box, {
+          }), /* @__PURE__ */jsxRuntime.jsx(Box, {
             marginLeft: space,
-            children: /* @__PURE__ */jsx(Text, {
+            children: /* @__PURE__ */jsxRuntime.jsx(Text, {
               size: fontSize,
-              children: /* @__PURE__ */jsx(ChevronRightIcon, {})
+              children: /* @__PURE__ */jsxRuntime.jsx(icons.ChevronRightIcon, {})
             })
           })]
         })
@@ -8126,7 +8141,7 @@ function MenuGroup(props) {
     }))
   }));
 }
-const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
+const MenuItem = react.forwardRef(function MenuItem2(props, forwardedRef) {
   const {
       as = "button",
       children,
@@ -8159,16 +8174,16 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     onItemMouseEnter = menu.onMouseEnter,
     onItemMouseLeave = menu.onMouseLeave
   } = menu;
-  const [rootElement, setRootElement] = useState(null);
+  const [rootElement, setRootElement] = react.useState(null);
   const active = Boolean(activeElement) && activeElement === rootElement;
-  useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
+  react.useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
   const ref = useForwardedRef(forwardedRef);
-  const handleClick = useCallback(event => {
+  const handleClick = react.useCallback(event => {
     if (disabled) return;
     if (onClick) onClick(event);
     if (onItemClick) onItemClick();
   }, [disabled, onClick, onItemClick]);
-  const paddingProps = useMemo(() => ({
+  const paddingProps = react.useMemo(() => ({
     padding,
     paddingX,
     paddingY,
@@ -8177,11 +8192,11 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     paddingBottom,
     paddingLeft
   }), [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]);
-  const setRef = useCallback(el => {
+  const setRef = react.useCallback(el => {
     ref.current = el;
     setRootElement(el);
   }, [ref]);
-  return /* @__PURE__ */jsxs(Selectable, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsxs(Selectable, _objectSpread(_objectSpread({
     "data-ui": "MenuItem"
   }, restProps), {}, {
     "aria-pressed": as === "button" && pressed,
@@ -8200,48 +8215,48 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     role: "menuitem",
     tabIndex: -1,
     type: as === "button" ? "button" : void 0,
-    children: [(icon || text || iconRight) && /* @__PURE__ */jsx(Box, _objectSpread(_objectSpread({
+    children: [(icon || text || iconRight) && /* @__PURE__ */jsxRuntime.jsx(Box, _objectSpread(_objectSpread({
       as: "span"
     }, paddingProps), {}, {
-      children: /* @__PURE__ */jsxs(Flex, {
+      children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
         as: "span",
-        children: [icon && /* @__PURE__ */jsxs(Text, {
+        children: [icon && /* @__PURE__ */jsxRuntime.jsxs(Text, {
           size: fontSize,
-          children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
-        }), text && /* @__PURE__ */jsx(Box, {
+          children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
+        }), text && /* @__PURE__ */jsxRuntime.jsx(Box, {
           flex: 1,
           marginLeft: icon ? space : void 0,
           marginRight: iconRight ? space : void 0,
-          children: /* @__PURE__ */jsx(Text, {
+          children: /* @__PURE__ */jsxRuntime.jsx(Text, {
             size: fontSize,
             textOverflow: "ellipsis",
             children: text
           })
-        }), hotkeys && /* @__PURE__ */jsx(Box, {
+        }), hotkeys && /* @__PURE__ */jsxRuntime.jsx(Box, {
           marginLeft: space,
           style: {
             marginTop: -4,
             marginBottom: -4
           },
-          children: /* @__PURE__ */jsx(Hotkeys, {
+          children: /* @__PURE__ */jsxRuntime.jsx(Hotkeys, {
             fontSize,
             keys: hotkeys
           })
-        }), iconRight && /* @__PURE__ */jsxs(Text, {
+        }), iconRight && /* @__PURE__ */jsxRuntime.jsxs(Text, {
           size: fontSize,
-          children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
+          children: [react.isValidElement(iconRight) && iconRight, ReactIs.isValidElementType(iconRight) && react.createElement(iconRight)]
         })]
       })
-    })), children && /* @__PURE__ */jsx(Box, _objectSpread(_objectSpread({
+    })), children && /* @__PURE__ */jsxRuntime.jsx(Box, _objectSpread(_objectSpread({
       as: "span"
     }, paddingProps), {}, {
       children
     }))]
   }));
 });
-const keyframe = keyframes(_templateObject79 || (_templateObject79 = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
-const animation = css(_templateObject80 || (_templateObject80 = _taggedTemplateLiteral(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
-const skeletonStyle = css(_templateObject81 || (_templateObject81 = _taggedTemplateLiteral(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref24 => {
+const keyframe = styled.keyframes(_templateObject79 || (_templateObject79 = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
+const animation = styled.css(_templateObject80 || (_templateObject80 = _taggedTemplateLiteral(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
+const skeletonStyle = styled.css(_templateObject81 || (_templateObject81 = _taggedTemplateLiteral(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref24 => {
   let {
     $visible
   } = _ref24;
@@ -8250,18 +8265,18 @@ const skeletonStyle = css(_templateObject81 || (_templateObject81 = _taggedTempl
   let {
     $animated
   } = _ref25;
-  return $animated ? animation : css(_templateObject82 || (_templateObject82 = _taggedTemplateLiteral(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
+  return $animated ? animation : styled.css(_templateObject82 || (_templateObject82 = _taggedTemplateLiteral(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
 });
-const Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle);
-const Skeleton = forwardRef(function Skeleton2(props, ref) {
+const Root$4 = styled__default.default(Box)(responsiveRadiusStyle, skeletonStyle);
+const Skeleton = react.forwardRef(function Skeleton2(props, ref) {
   const {
       animated = false,
       delay,
       radius
     } = props,
     restProps = _objectWithoutProperties(props, _excluded38);
-  const [visible, setVisible] = useState(delay ? false : true);
-  useEffect(() => {
+  const [visible, setVisible] = react.useState(delay ? false : true);
+  react.useEffect(() => {
     if (!delay) {
       return setVisible(true);
     }
@@ -8272,14 +8287,14 @@ const Skeleton = forwardRef(function Skeleton2(props, ref) {
       clearTimeout(timeout);
     };
   }, [delay]);
-  return /* @__PURE__ */jsx(Root$4, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$4, _objectSpread(_objectSpread({}, restProps), {}, {
     $animated: animated,
     $radius: useArrayProp(radius),
     $visible: visible,
     ref
   }));
 });
-const Root$3 = styled(Skeleton)(_ref26 => {
+const Root$3 = styled__default.default(Skeleton)(_ref26 => {
   let {
     $size,
     $style,
@@ -8298,55 +8313,55 @@ const Root$3 = styled(Skeleton)(_ref26 => {
   });
   return styles;
 });
-const TextSkeleton = forwardRef(function TextSkeleton2(props, ref) {
+const TextSkeleton = react.forwardRef(function TextSkeleton2(props, ref) {
   const {
       size = 2
     } = props,
     restProps = _objectWithoutProperties(props, _excluded39);
   const $size = useArrayProp(size);
-  return /* @__PURE__ */jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
     $size,
     ref,
     $style: "text"
   }));
 });
-const LabelSkeleton = forwardRef(function TextSkeleton3(props, ref) {
+const LabelSkeleton = react.forwardRef(function TextSkeleton3(props, ref) {
   const {
       size = 2
     } = props,
     restProps = _objectWithoutProperties(props, _excluded40);
   const $size = useArrayProp(size);
-  return /* @__PURE__ */jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
     $size,
     ref,
     $style: "label"
   }));
 });
-const HeadingSkeleton = forwardRef(function TextSkeleton4(props, ref) {
+const HeadingSkeleton = react.forwardRef(function TextSkeleton4(props, ref) {
   const {
       size = 2
     } = props,
     restProps = _objectWithoutProperties(props, _excluded41);
   const $size = useArrayProp(size);
-  return /* @__PURE__ */jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
     $size,
     ref,
     $style: "heading"
   }));
 });
-const CodeSkeleton = forwardRef(function TextSkeleton5(props, ref) {
+const CodeSkeleton = react.forwardRef(function TextSkeleton5(props, ref) {
   const {
       size = 2
     } = props,
     restProps = _objectWithoutProperties(props, _excluded42);
   const $size = useArrayProp(size);
-  return /* @__PURE__ */jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
     $size,
     ref,
     $style: "code"
   }));
 });
-const Tab = forwardRef(function Tab2(props, forwardedRef) {
+const Tab = react.forwardRef(function Tab2(props, forwardedRef) {
   const {
       icon,
       id,
@@ -8359,17 +8374,17 @@ const Tab = forwardRef(function Tab2(props, forwardedRef) {
       selected
     } = props,
     restProps = _objectWithoutProperties(props, _excluded43);
-  const elementRef = useRef(null);
-  const focusedRef = useRef(false);
-  const handleBlur = useCallback(() => {
+  const elementRef = react.useRef(null);
+  const focusedRef = react.useRef(false);
+  const handleBlur = react.useCallback(() => {
     focusedRef.current = false;
   }, []);
-  const handleFocus = useCallback(event => {
+  const handleFocus = react.useCallback(event => {
     focusedRef.current = true;
     if (onFocus) onFocus(event);
   }, [onFocus]);
   const ref = useForwardedRef(forwardedRef);
-  useEffect(() => {
+  react.useEffect(() => {
     if (focused && !focusedRef.current) {
       if (elementRef.current) elementRef.current.focus();
       focusedRef.current = true;
@@ -8379,7 +8394,7 @@ const Tab = forwardRef(function Tab2(props, forwardedRef) {
     elementRef.current = el;
     ref.current = el;
   };
-  return /* @__PURE__ */jsx(Button, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Button, _objectSpread(_objectSpread({
     "data-ui": "Tab"
   }, restProps), {}, {
     "aria-selected": selected ? "true" : "false",
@@ -8402,23 +8417,23 @@ const Tab = forwardRef(function Tab2(props, forwardedRef) {
 function _isReactElement(node) {
   return Boolean(node);
 }
-const TabList = forwardRef(function TabList2(props, ref) {
+const TabList = react.forwardRef(function TabList2(props, ref) {
   const {
       children: childrenProp
     } = props,
     restProps = _objectWithoutProperties(props, _excluded44);
-  const [focusedIndex, setFocusedIndex] = useState(-1);
-  const children = useMemo(() => childrenProp.filter(_isReactElement), [childrenProp]);
-  const tabs = children.map((child, childIndex) => cloneElement(child, {
+  const [focusedIndex, setFocusedIndex] = react.useState(-1);
+  const children = react.useMemo(() => childrenProp.filter(_isReactElement), [childrenProp]);
+  const tabs = children.map((child, childIndex) => react.cloneElement(child, {
     focused: focusedIndex === childIndex,
     key: childIndex,
     onFocus: () => handleTabFocus(childIndex)
   }));
   const numTabs = tabs.length;
-  const handleTabFocus = useCallback(tabIdx => {
+  const handleTabFocus = react.useCallback(tabIdx => {
     setFocusedIndex(tabIdx);
   }, []);
-  const handleKeyDown = useCallback(event => {
+  const handleKeyDown = react.useCallback(event => {
     if (event.key === "ArrowLeft") {
       setFocusedIndex(prevIndex => (prevIndex + numTabs - 1) % numTabs);
     }
@@ -8426,7 +8441,7 @@ const TabList = forwardRef(function TabList2(props, ref) {
       setFocusedIndex(prevIndex => (prevIndex + 1) % numTabs);
     }
   }, [numTabs]);
-  return /* @__PURE__ */jsx(Inline, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Inline, _objectSpread(_objectSpread({
     "data-ui": "TabList"
   }, restProps), {}, {
     onKeyDown: handleKeyDown,
@@ -8435,12 +8450,12 @@ const TabList = forwardRef(function TabList2(props, ref) {
     children: tabs
   }));
 });
-const TabPanel = forwardRef(function TabPanel2(props, ref) {
+const TabPanel = react.forwardRef(function TabPanel2(props, ref) {
   const {
       flex
     } = props,
     restProps = _objectWithoutProperties(props, _excluded45);
-  return /* @__PURE__ */jsx(Box, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Box, _objectSpread(_objectSpread({
     "data-ui": "TabPanel"
   }, restProps), {}, {
     flex,
@@ -8462,8 +8477,8 @@ const ROLES = {
   success: "alert",
   info: "alert"
 };
-const Root$2 = styled(Card)(_templateObject83 || (_templateObject83 = _taggedTemplateLiteral(["\n  pointer-events: all;\n"])));
-const TextBox = styled(Flex)(_templateObject84 || (_templateObject84 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n"])));
+const Root$2 = styled__default.default(Card)(_templateObject83 || (_templateObject83 = _taggedTemplateLiteral(["\n  pointer-events: all;\n"])));
+const TextBox = styled__default.default(Flex)(_templateObject84 || (_templateObject84 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n"])));
 function Toast(props) {
   const {
       closable,
@@ -8475,7 +8490,7 @@ function Toast(props) {
     restProps = _objectWithoutProperties(props, _excluded46);
   const cardTone = status ? STATUS_CARD_TONE[status] : "default";
   const role = status ? ROLES[status] : "status";
-  return /* @__PURE__ */jsx(Root$2, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Root$2, _objectSpread(_objectSpread({
     "data-ui": "Toast",
     role
   }, restProps), {}, {
@@ -8483,27 +8498,27 @@ function Toast(props) {
     radius: 2,
     shadow: 2,
     tone: cardTone,
-    children: /* @__PURE__ */jsxs(Flex, {
+    children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
       align: "flex-start",
-      children: [/* @__PURE__ */jsx(TextBox, {
+      children: [/* @__PURE__ */jsxRuntime.jsx(TextBox, {
         flex: 1,
         padding: 3,
-        children: /* @__PURE__ */jsxs(Stack, {
+        children: /* @__PURE__ */jsxRuntime.jsxs(Stack, {
           space: 3,
-          children: [title && /* @__PURE__ */jsx(Text, {
+          children: [title && /* @__PURE__ */jsxRuntime.jsx(Text, {
             weight: "semibold",
             children: title
-          }), description && /* @__PURE__ */jsx(Text, {
+          }), description && /* @__PURE__ */jsxRuntime.jsx(Text, {
             muted: true,
             size: 1,
             children: description
           })]
         })
-      }), closable && /* @__PURE__ */jsx(Box, {
+      }), closable && /* @__PURE__ */jsxRuntime.jsx(Box, {
         padding: 1,
-        children: /* @__PURE__ */jsx(Button, {
+        children: /* @__PURE__ */jsxRuntime.jsx(Button, {
           as: "button",
-          icon: CloseIcon,
+          icon: icons.CloseIcon,
           mode: "bleed",
           padding: 2,
           onClick: onClose,
@@ -8516,10 +8531,10 @@ function Toast(props) {
   }));
 }
 const key$1 = Symbol.for("@sanity/ui/context/toast");
-globalScope[key$1] = globalScope[key$1] || createContext(null);
+globalScope[key$1] = globalScope[key$1] || react.createContext(null);
 const ToastContext = globalScope[key$1];
-const Root$1 = styled(Layer)(_templateObject85 || (_templateObject85 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n"])));
-const ToastContainer = styled.div(_templateObject86 || (_templateObject86 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  max-width: 420px;\n  width: 100%;\n"])));
+const Root$1 = styled__default.default(Layer)(_templateObject85 || (_templateObject85 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n"])));
+const ToastContainer = styled__default.default.div(_templateObject86 || (_templateObject86 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  max-width: 420px;\n  width: 100%;\n"])));
 let toastId = 0;
 function ToastProvider(props) {
   const {
@@ -8529,11 +8544,11 @@ function ToastProvider(props) {
     paddingY,
     zOffset
   } = props;
-  const [state, setState] = useState({
+  const [state, setState] = react.useState({
     toasts: []
   });
-  const toastsRef = useRef({});
-  const push = useCallback(params => {
+  const toastsRef = react.useRef({});
+  const push = react.useCallback(params => {
     const id = params.id || String(toastId++);
     const duration = params.duration || 5e3;
     const dismiss = () => {
@@ -8575,7 +8590,7 @@ function ToastProvider(props) {
     };
     return id;
   }, []);
-  useEffect(() => () => {
+  react.useEffect(() => () => {
     for (const {
       timeoutId
     } of Object.values(toastsRef.current)) {
@@ -8583,21 +8598,21 @@ function ToastProvider(props) {
     }
     toastsRef.current = {};
   }, []);
-  const value = useMemo(() => ({
+  const value = react.useMemo(() => ({
     version: 0,
     push
   }), [push]);
-  return /* @__PURE__ */jsxs(ToastContext.Provider, {
+  return /* @__PURE__ */jsxRuntime.jsxs(ToastContext.Provider, {
     value,
-    children: [children, /* @__PURE__ */jsx(Root$1, {
+    children: [children, /* @__PURE__ */jsxRuntime.jsx(Root$1, {
       "data-ui": "ToastProvider",
       zOffset,
-      children: /* @__PURE__ */jsx(ToastContainer, {
-        children: /* @__PURE__ */jsx(Box, {
+      children: /* @__PURE__ */jsxRuntime.jsx(ToastContainer, {
+        children: /* @__PURE__ */jsxRuntime.jsx(Box, {
           padding,
           paddingX,
           paddingY,
-          children: /* @__PURE__ */jsx(AnimatePresence, {
+          children: /* @__PURE__ */jsxRuntime.jsx(framerMotion.AnimatePresence, {
             initial: false,
             children: state.toasts.map(_ref27 => {
               let {
@@ -8605,7 +8620,7 @@ function ToastProvider(props) {
                 id,
                 params
               } = _ref27;
-              return /* @__PURE__ */jsx(motion.div, {
+              return /* @__PURE__ */jsxRuntime.jsx(framerMotion.motion.div, {
                 animate: {
                   opacity: 1,
                   y: 0,
@@ -8629,7 +8644,7 @@ function ToastProvider(props) {
                   damping: 30,
                   stiffness: 400
                 },
-                children: /* @__PURE__ */jsx(Toast, {
+                children: /* @__PURE__ */jsxRuntime.jsx(Toast, {
                   closable: params.closable,
                   description: params.description,
                   onClose: dismiss,
@@ -8645,7 +8660,7 @@ function ToastProvider(props) {
   });
 }
 function useToast() {
-  const value = useContext(ToastContext);
+  const value = react.useContext(ToastContext);
   if (!value) {
     throw new Error("useToast(): missing context value");
   }
@@ -8725,28 +8740,28 @@ function _focusItemElement(el) {
   }
 }
 const key = Symbol.for("@sanity/ui/context/tree");
-globalScope[key] = globalScope[key] || createContext(null);
+globalScope[key] = globalScope[key] || react.createContext(null);
 const TreeContext = globalScope[key];
-const Tree = memo(forwardRef(function Tree2(props, ref) {
+const Tree = react.memo(react.forwardRef(function Tree2(props, ref) {
   const {
       children,
       space = 1
     } = props,
     restProps = _objectWithoutProperties(props, _excluded47);
   const forwardedRef = useForwardedRef(ref);
-  const [focusedElement, setFocusedElement] = useState(null);
-  const focusedElementRef = useRef(focusedElement);
-  const path = useMemo(() => [], []);
-  const [itemElements, setItemElements] = useState([]);
-  const [state, setState] = useState({});
-  const stateRef = useRef(state);
-  useEffect(() => {
+  const [focusedElement, setFocusedElement] = react.useState(null);
+  const focusedElementRef = react.useRef(focusedElement);
+  const path = react.useMemo(() => [], []);
+  const [itemElements, setItemElements] = react.useState([]);
+  const [state, setState] = react.useState({});
+  const stateRef = react.useRef(state);
+  react.useEffect(() => {
     focusedElementRef.current = focusedElement;
   }, [focusedElement]);
-  useEffect(() => {
+  react.useEffect(() => {
     stateRef.current = state;
   }, [state]);
-  const registerItem = useCallback((element, path2, expanded, selected) => {
+  const registerItem = react.useCallback((element, path2, expanded, selected) => {
     setState(s => _objectSpread(_objectSpread({}, s), {}, {
       [path2]: {
         element,
@@ -8764,7 +8779,7 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
       });
     };
   }, []);
-  const setExpanded = useCallback((path2, expanded) => {
+  const setExpanded = react.useCallback((path2, expanded) => {
     setState(s => {
       const itemState = s[path2];
       if (!itemState) return s;
@@ -8775,7 +8790,7 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
       });
     });
   }, []);
-  const contextValue = useMemo(() => ({
+  const contextValue = react.useMemo(() => ({
     version: 0,
     focusedElement: focusedElement || itemElements[0] || null,
     level: 0,
@@ -8786,7 +8801,7 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
     space,
     state
   }), [focusedElement, itemElements, path, registerItem, setExpanded, space, state]);
-  const handleKeyDown = useCallback(event => {
+  const handleKeyDown = react.useCallback(event => {
     var _a;
     if (!focusedElementRef.current) return;
     if (event.key === "ArrowDown") {
@@ -8853,14 +8868,14 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
       return;
     }
   }, [itemElements]);
-  useEffect(() => {
+  react.useEffect(() => {
     if (!forwardedRef.current) return;
     const _itemElements = Array.from(forwardedRef.current.querySelectorAll('[data-ui="TreeItem"]'));
     setItemElements(_itemElements);
   }, [children, forwardedRef]);
-  return /* @__PURE__ */jsx(TreeContext.Provider, {
+  return /* @__PURE__ */jsxRuntime.jsx(TreeContext.Provider, {
     value: contextValue,
-    children: /* @__PURE__ */jsx(Stack, _objectSpread(_objectSpread({
+    children: /* @__PURE__ */jsxRuntime.jsx(Stack, _objectSpread(_objectSpread({
       as: "ul",
       "data-ui": "Tree"
     }, restProps), {}, {
@@ -8874,7 +8889,7 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
 }));
 Tree.displayName = "Tree";
 function treeItemRootStyle() {
-  return css(_templateObject87 || (_templateObject87 = _taggedTemplateLiteral(["\n    &[role='none'] > [role='treeitem'] {\n      outline: none;\n      cursor: default;\n      border-radius: 3px;\n\n      &:focus {\n        position: relative;\n      }\n    }\n\n    &[role='treeitem'] {\n      outline: none;\n\n      & > div {\n        cursor: default;\n        border-radius: 3px;\n      }\n\n      &:focus > div {\n        position: relative;\n      }\n    }\n  "])));
+  return styled.css(_templateObject87 || (_templateObject87 = _taggedTemplateLiteral(["\n    &[role='none'] > [role='treeitem'] {\n      outline: none;\n      cursor: default;\n      border-radius: 3px;\n\n      &:focus {\n        position: relative;\n      }\n    }\n\n    &[role='treeitem'] {\n      outline: none;\n\n      & > div {\n        cursor: default;\n        border-radius: 3px;\n      }\n\n      &:focus > div {\n        position: relative;\n      }\n    }\n  "])));
 }
 function treeItemRootColorStyle(props) {
   const {
@@ -8887,7 +8902,7 @@ function treeItemRootColorStyle(props) {
     selectable
   } = theme.sanity.color;
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return css(_templateObject88 || (_templateObject88 = _taggedTemplateLiteral(["\n    /* <div role=\"none\"><a data-ui=\"TreeItem__box\" role=\"treeitem\" tabIndex=\"0\"></div> */\n    &[role='none'] {\n      & > [role='treeitem'] {\n        ", "\n\n        background-color: var(--card-bg-color);\n        color: var(--treeitem-fg-color);\n      }\n\n      &[data-selected] > [role='treeitem'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {\n          ", "\n        }\n\n        & > [role='treeitem']:focus {\n          ", "\n        }\n      }\n    }\n\n    /* <div role=\"treeitem\" tabIndex=\"0\"><div data-ui=\"TreeItem__box\"></div> */\n    &[role='treeitem'] {\n      & > [data-ui='TreeItem__box'] {\n        ", "\n\n        background-color: var(--card-bg-color);\n        color: var(--card-fg-color);\n      }\n\n      &[data-selected] > [data-ui='TreeItem__box'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {\n          ", "\n        }\n\n        &:focus > [data-ui='TreeItem__box'] {\n          ", "\n        }\n      }\n    }\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected));
+  return styled.css(_templateObject88 || (_templateObject88 = _taggedTemplateLiteral(["\n    /* <div role=\"none\"><a data-ui=\"TreeItem__box\" role=\"treeitem\" tabIndex=\"0\"></div> */\n    &[role='none'] {\n      & > [role='treeitem'] {\n        ", "\n\n        background-color: var(--card-bg-color);\n        color: var(--treeitem-fg-color);\n      }\n\n      &[data-selected] > [role='treeitem'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {\n          ", "\n        }\n\n        & > [role='treeitem']:focus {\n          ", "\n        }\n      }\n    }\n\n    /* <div role=\"treeitem\" tabIndex=\"0\"><div data-ui=\"TreeItem__box\"></div> */\n    &[role='treeitem'] {\n      & > [data-ui='TreeItem__box'] {\n        ", "\n\n        background-color: var(--card-bg-color);\n        color: var(--card-fg-color);\n      }\n\n      &[data-selected] > [data-ui='TreeItem__box'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {\n          ", "\n        }\n\n        &:focus > [data-ui='TreeItem__box'] {\n          ", "\n        }\n      }\n    }\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected));
 }
 function treeItemBoxStyle(props) {
   const {
@@ -8897,23 +8912,23 @@ function treeItemBoxStyle(props) {
   const {
     space
   } = theme.sanity;
-  return css(_templateObject89 || (_templateObject89 = _taggedTemplateLiteral(["\n    padding-left: ", ";\n\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])), rem(space[2] * $level));
+  return styled.css(_templateObject89 || (_templateObject89 = _taggedTemplateLiteral(["\n    padding-left: ", ";\n\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])), rem(space[2] * $level));
 }
 function useTree() {
-  const tree = useContext(TreeContext);
+  const tree = react.useContext(TreeContext);
   if (!tree) {
     throw new Error("Tree: missing context value");
   }
   return tree;
 }
-const TreeGroup = memo(function TreeGroup2(props) {
+const TreeGroup = react.memo(function TreeGroup2(props) {
   const {
       children,
       expanded = false
     } = props,
     restProps = _objectWithoutProperties(props, _excluded48);
   const tree = useTree();
-  return /* @__PURE__ */jsx(Stack, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsx(Stack, _objectSpread(_objectSpread({
     as: "ul",
     "data-ui": "TreeGroup"
   }, restProps), {}, {
@@ -8924,12 +8939,12 @@ const TreeGroup = memo(function TreeGroup2(props) {
     children
   }));
 });
-const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle));
-const TreeItemBox = styled(Box).attrs({
+const Root = react.memo(styled__default.default.li(treeItemRootStyle, treeItemRootColorStyle));
+const TreeItemBox = styled__default.default(Box).attrs({
   forwardedAs: "a"
 })(treeItemBoxStyle);
-const ToggleArrowText = styled(Text)(_templateObject90 || (_templateObject90 = _taggedTemplateLiteral(["\n  & > svg {\n    transition: transform 100ms;\n  }\n"])));
-const TreeItem = memo(function TreeItem2(props) {
+const ToggleArrowText = styled__default.default(Text)(_templateObject90 || (_templateObject90 = _taggedTemplateLiteral(["\n  & > svg {\n    transition: transform 100ms;\n  }\n"])));
+const TreeItem = react.memo(function TreeItem2(props) {
   const {
       children,
       expanded: expandedProp = false,
@@ -8946,8 +8961,8 @@ const TreeItem = memo(function TreeItem2(props) {
       weight
     } = props,
     restProps = _objectWithoutProperties(props, _excluded49);
-  const rootRef = useRef(null);
-  const treeitemRef = useRef(null);
+  const rootRef = react.useRef(null);
+  const treeitemRef = react.useRef(null);
   const tree = useTree();
   const {
     path,
@@ -8955,19 +8970,19 @@ const TreeItem = memo(function TreeItem2(props) {
     setExpanded,
     setFocusedElement
   } = tree;
-  const _id = useId();
+  const _id = react.useId();
   const id = idProp || _id;
-  const itemPath = useMemo(() => path.concat([id || ""]), [id, path]);
+  const itemPath = react.useMemo(() => path.concat([id || ""]), [id, path]);
   const itemKey = itemPath.join("/");
   const itemState = tree.state[itemKey];
   const focused = tree.focusedElement === rootRef.current;
   const expanded = (itemState == null ? void 0 : itemState.expanded) === void 0 ? expandedProp : (itemState == null ? void 0 : itemState.expanded) || false;
   const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1;
-  const contextValue = useMemo(() => _objectSpread(_objectSpread({}, tree), {}, {
+  const contextValue = react.useMemo(() => _objectSpread(_objectSpread({}, tree), {}, {
     level: tree.level + 1,
     path: itemPath
   }), [itemPath, tree]);
-  const handleClick = useCallback(event => {
+  const handleClick = react.useCallback(event => {
     if (onClick) onClick(event);
     const target = event.target;
     if (target instanceof HTMLElement && (target.getAttribute("data-ui") === "TreeItem__box" || target.closest('[data-ui="TreeItem__box"]'))) {
@@ -8976,42 +8991,42 @@ const TreeItem = memo(function TreeItem2(props) {
       setFocusedElement(rootRef.current);
     }
   }, [expanded, itemKey, onClick, setExpanded, setFocusedElement]);
-  const handleKeyDown = useCallback(event => {
+  const handleKeyDown = react.useCallback(event => {
     if (focused && event.key === "Enter") {
       const el = treeitemRef.current || rootRef.current;
       el == null ? void 0 : el.click();
     }
   }, [focused]);
-  useEffect(() => {
+  react.useEffect(() => {
     if (!rootRef.current) return;
     return registerItem(rootRef.current, itemPath.join("/"), expanded, selected);
   }, [expanded, itemPath, registerItem, selected]);
-  const content = /* @__PURE__ */jsxs(Flex, {
+  const content = /* @__PURE__ */jsxRuntime.jsxs(Flex, {
     padding,
-    children: [/* @__PURE__ */jsxs(Box, {
+    children: [/* @__PURE__ */jsxRuntime.jsxs(Box, {
       marginRight: space,
       style: {
         visibility: icon || children ? "visible" : "hidden",
         pointerEvents: "none"
       },
-      children: [icon && /* @__PURE__ */jsx(Text, {
+      children: [icon && /* @__PURE__ */jsxRuntime.jsx(Text, {
         muted,
         size: fontSize,
         weight,
-        children: createElement(icon)
-      }), !icon && /* @__PURE__ */jsx(ToggleArrowText, {
+        children: react.createElement(icon)
+      }), !icon && /* @__PURE__ */jsxRuntime.jsx(ToggleArrowText, {
         muted,
         size: fontSize,
         weight,
-        children: /* @__PURE__ */jsx(ToggleArrowRightIcon, {
+        children: /* @__PURE__ */jsxRuntime.jsx(icons.ToggleArrowRightIcon, {
           style: {
             transform: expanded ? "rotate(90deg)" : void 0
           }
         })
       })]
-    }), /* @__PURE__ */jsx(Box, {
+    }), /* @__PURE__ */jsxRuntime.jsx(Box, {
       flex: 1,
-      children: /* @__PURE__ */jsx(Text, {
+      children: /* @__PURE__ */jsxRuntime.jsx(Text, {
         muted,
         size: fontSize,
         textOverflow: "ellipsis",
@@ -9021,7 +9036,7 @@ const TreeItem = memo(function TreeItem2(props) {
     })]
   });
   if (href) {
-    return /* @__PURE__ */jsxs(Root, _objectSpread(_objectSpread({
+    return /* @__PURE__ */jsxRuntime.jsxs(Root, _objectSpread(_objectSpread({
       "data-selected": selected ? "" : void 0,
       "data-tree-id": id,
       "data-tree-key": itemKey,
@@ -9030,7 +9045,7 @@ const TreeItem = memo(function TreeItem2(props) {
       onClick: handleClick,
       ref: rootRef,
       role: "none",
-      children: [/* @__PURE__ */jsx(TreeItemBox, {
+      children: [/* @__PURE__ */jsxRuntime.jsx(TreeItemBox, {
         $level: tree.level,
         "aria-expanded": expanded,
         "data-ui": "TreeItem__box",
@@ -9039,16 +9054,16 @@ const TreeItem = memo(function TreeItem2(props) {
         role: "treeitem",
         tabIndex,
         children: content
-      }), /* @__PURE__ */jsx(TreeContext.Provider, {
+      }), /* @__PURE__ */jsxRuntime.jsx(TreeContext.Provider, {
         value: contextValue,
-        children: children && /* @__PURE__ */jsx(TreeGroup, {
+        children: children && /* @__PURE__ */jsxRuntime.jsx(TreeGroup, {
           hidden: !expanded,
           children
         })
       })]
     }));
   }
-  return /* @__PURE__ */jsxs(Root, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxRuntime.jsxs(Root, _objectSpread(_objectSpread({
     "data-selected": selected ? "" : void 0,
     "data-ui": "TreeItem",
     "data-tree-id": id,
@@ -9060,19 +9075,132 @@ const TreeItem = memo(function TreeItem2(props) {
     ref: rootRef,
     role: "treeitem",
     tabIndex,
-    children: [/* @__PURE__ */jsx(TreeItemBox, {
+    children: [/* @__PURE__ */jsxRuntime.jsx(TreeItemBox, {
       $level: tree.level,
       as: "div",
       "data-ui": "TreeItem__box",
       children: content
-    }), /* @__PURE__ */jsx(TreeContext.Provider, {
+    }), /* @__PURE__ */jsxRuntime.jsx(TreeContext.Provider, {
       value: contextValue,
-      children: children && /* @__PURE__ */jsx(TreeGroup, {
+      children: children && /* @__PURE__ */jsxRuntime.jsx(TreeGroup, {
         expanded,
         children
       })
     })]
   }));
 });
-export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, useRootTheme, useTheme, useToast, useTree };
-//# sourceMappingURL=index.esm.js.map
+exports.Autocomplete = Autocomplete;
+exports.Avatar = Avatar;
+exports.AvatarCounter = AvatarCounter;
+exports.AvatarStack = AvatarStack;
+exports.Badge = Badge;
+exports.BoundaryElementProvider = BoundaryElementProvider;
+exports.Box = Box;
+exports.Breadcrumbs = Breadcrumbs;
+exports.Button = Button;
+exports.Card = Card;
+exports.Checkbox = Checkbox;
+exports.Code = Code;
+exports.CodeSkeleton = CodeSkeleton;
+exports.Container = Container;
+exports.Dialog = Dialog;
+exports.DialogContext = DialogContext;
+exports.DialogProvider = DialogProvider;
+exports.ElementQuery = ElementQuery;
+exports.ErrorBoundary = ErrorBoundary;
+exports.Flex = Flex;
+exports.Grid = Grid;
+exports.Heading = Heading;
+exports.HeadingSkeleton = HeadingSkeleton;
+exports.Hotkeys = Hotkeys;
+exports.Inline = Inline;
+exports.KBD = KBD;
+exports.Label = Label;
+exports.LabelSkeleton = LabelSkeleton;
+exports.Layer = Layer;
+exports.LayerProvider = LayerProvider;
+exports.Menu = Menu;
+exports.MenuButton = MenuButton;
+exports.MenuDivider = MenuDivider;
+exports.MenuGroup = MenuGroup;
+exports.MenuItem = MenuItem;
+exports.Popover = Popover;
+exports.Portal = Portal;
+exports.PortalProvider = PortalProvider;
+exports.Radio = Radio;
+exports.Select = Select;
+exports.Skeleton = Skeleton;
+exports.Spinner = Spinner;
+exports.SrOnly = SrOnly;
+exports.Stack = Stack;
+exports.Switch = Switch;
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.Text = Text;
+exports.TextArea = TextArea;
+exports.TextInput = TextInput;
+exports.TextSkeleton = TextSkeleton;
+exports.ThemeColorProvider = ThemeColorProvider;
+exports.ThemeProvider = ThemeProvider;
+exports.Toast = Toast;
+exports.ToastProvider = ToastProvider;
+exports.Tooltip = Tooltip;
+exports.Tree = Tree;
+exports.TreeItem = TreeItem;
+exports.VirtualList = VirtualList;
+exports._ResizeObserver = _ResizeObserver;
+exports._elementSizeObserver = _elementSizeObserver;
+exports._fillCSSObject = _fillCSSObject;
+exports._getArrayProp = _getArrayProp;
+exports._getResponsiveSpace = _getResponsiveSpace;
+exports._hasFocus = _hasFocus;
+exports._isEnterToClickElement = _isEnterToClickElement;
+exports._isScrollable = _isScrollable;
+exports._raf = _raf;
+exports._raf2 = _raf2;
+exports._responsive = _responsive;
+exports.attemptFocus = attemptFocus;
+exports.createColorTheme = createColorTheme;
+exports.focusFirstDescendant = focusFirstDescendant;
+exports.focusLastDescendant = focusLastDescendant;
+exports.hexToRgb = hexToRgb;
+exports.hslToRgb = hslToRgb;
+exports.isFocusable = isFocusable;
+exports.isHTMLAnchorElement = isHTMLAnchorElement;
+exports.isHTMLButtonElement = isHTMLButtonElement;
+exports.isHTMLElement = isHTMLElement;
+exports.isHTMLInputElement = isHTMLInputElement;
+exports.isHTMLSelectElement = isHTMLSelectElement;
+exports.isHTMLTextAreaElement = isHTMLTextAreaElement;
+exports.multiply = multiply$1;
+exports.parseColor = parseColor;
+exports.rem = rem;
+exports.responsiveCodeFontStyle = responsiveCodeFontStyle;
+exports.responsiveHeadingFont = responsiveHeadingFont;
+exports.responsiveLabelFont = responsiveLabelFont;
+exports.responsiveTextAlignStyle = responsiveTextAlignStyle;
+exports.responsiveTextFont = responsiveTextFont;
+exports.rgbToHex = rgbToHex;
+exports.rgbToHsl = rgbToHsl;
+exports.rgba = rgba;
+exports.screen = screen$1;
+exports.studioTheme = studioTheme;
+exports.useArrayProp = useArrayProp;
+exports.useBoundaryElement = useBoundaryElement;
+exports.useClickOutside = useClickOutside;
+exports.useCustomValidity = useCustomValidity;
+exports.useDialog = useDialog;
+exports.useElementRect = useElementRect;
+exports.useElementSize = useElementSize;
+exports.useForwardedRef = useForwardedRef;
+exports.useGlobalKeyDown = useGlobalKeyDown;
+exports.useLayer = useLayer;
+exports.useMediaIndex = useMediaIndex;
+exports.usePortal = usePortal;
+exports.usePrefersDark = usePrefersDark;
+exports.useRootTheme = useRootTheme;
+exports.useTheme = useTheme;
+exports.useToast = useToast;
+exports.useTree = useTree;
+//# sourceMappingURL=index.cjs.map