@sanity/ui 1.0.2 → 1.1.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/{index.esm.js → index.cjs} +933 -807
  2. package/dist/index.cjs.map +1 -0
  3. package/dist/index.js +806 -932
  4. package/dist/index.js.map +1 -1
  5. package/package.json +10 -9
  6. package/dist/index.esm.js.map +0 -1
package/dist/{index.esm.js → index.cjs} RENAMED
@@ -1,3 +1,5 @@
1
+ 'use strict';
2
+
1
3
  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;
2
4
  const _excluded = ["color", "layer"],
3
5
  _excluded2 = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"],
@@ -58,16 +60,27 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
58
60
  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; }
59
61
  function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
60
62
  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); }
61
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
62
- import { useMemo, useState, useRef, useEffect, createContext, useContext, useLayoutEffect, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1 } from 'react';
63
- import ReactIs, { isElement as isElement$1, isFragment, isValidElementType } from 'react-is';
64
- import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, keyframes } from 'styled-components';
65
- import { white as white$1, black as black$1, hues } from '@sanity/color';
66
- import { SpinnerIcon, CheckmarkIcon, RemoveIcon, SelectIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon } from '@sanity/icons';
67
- import Refractor from 'react-refractor';
68
- import { detectOverflow, flip, offset, shift, arrow, hide, autoUpdate, useFloating } from '@floating-ui/react-dom';
69
- import { createPortal } from 'react-dom';
70
- import { AnimatePresence, motion } from 'framer-motion';
63
+ Object.defineProperty(exports, '__esModule', {
64
+ value: true
65
+ });
66
+ var jsxRuntime = require('react/jsx-runtime');
67
+ var react = require('react');
68
+ var ReactIs = require('react-is');
69
+ var styled = require('styled-components');
70
+ var color$1 = require('@sanity/color');
71
+ var icons = require('@sanity/icons');
72
+ var Refractor = require('react-refractor');
73
+ var reactDom$1 = require('@floating-ui/react-dom');
74
+ var reactDom = require('react-dom');
75
+ var framerMotion = require('framer-motion');
76
+ function _interopDefaultCompat(e) {
77
+ return e && typeof e === 'object' && 'default' in e ? e : {
78
+ default: e
79
+ };
80
+ }
81
+ var ReactIs__default = /*#__PURE__*/_interopDefaultCompat(ReactIs);
82
+ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
83
+ var Refractor__default = /*#__PURE__*/_interopDefaultCompat(Refractor);
71
84
  const EMPTY_ARRAY = [];
72
85
  const EMPTY_RECORD = {};
73
86
  const FLOATING_STATIC_SIDES = {
@@ -223,7 +236,7 @@ function responsiveTextFont(props) {
223
236
  }
224
237
  function useArrayProp(val, defaultVal) {
225
238
  const __perf_hash__ = JSON.stringify(val != null ? val : defaultVal);
226
- return useMemo(() => _getArrayProp(val, defaultVal), [__perf_hash__]);
239
+ return react.useMemo(() => _getArrayProp(val, defaultVal), [__perf_hash__]);
227
240
  }
228
241
  function _getElements(element, elementsArg) {
229
242
  const ret = [element];
@@ -239,10 +252,10 @@ function _getElements(element, elementsArg) {
239
252
  function useClickOutside(listener) {
240
253
  let elementsArg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : EMPTY_ARRAY;
241
254
  let boundaryElement = arguments.length > 2 ? arguments[2] : undefined;
242
- const [element, setElement] = useState(null);
243
- const [elements, setElements] = useState(() => _getElements(element, elementsArg));
244
- const elementsRef = useRef(elements);
245
- useEffect(() => {
255
+ const [element, setElement] = react.useState(null);
256
+ const [elements, setElements] = react.useState(() => _getElements(element, elementsArg));
257
+ const elementsRef = react.useRef(elements);
258
+ react.useEffect(() => {
246
259
  const prevElements = elementsRef.current;
247
260
  const nextElements = _getElements(element, elementsArg);
248
261
  if (prevElements.length !== nextElements.length) {
@@ -265,7 +278,7 @@ function useClickOutside(listener) {
265
278
  }
266
279
  }
267
280
  }, [element, elementsArg]);
268
- useEffect(() => {
281
+ react.useEffect(() => {
269
282
  if (!listener) return void 0;
270
283
  const handleWindowMouseDown = evt => {
271
284
  const target = evt.target;
@@ -871,8 +884,8 @@ function _createElementSizeObserver() {
871
884
  };
872
885
  }
873
886
  function useElementSize(element) {
874
- const [size, setSize] = useState(null);
875
- useEffect(() => {
887
+ const [size, setSize] = react.useState(null);
888
+ react.useEffect(() => {
876
889
  if (!element) return void 0;
877
890
  return _elementSizeObserver.subscribe(element, setSize);
878
891
  }, [element]);
@@ -883,7 +896,7 @@ function useElementRect(element) {
883
896
  return (elementSize == null ? void 0 : elementSize._contentRect) || null;
884
897
  }
885
898
  function useGlobalKeyDown(onKeyDown) {
886
- return useEffect(() => {
899
+ return react.useEffect(() => {
887
900
  addEventListener("keydown", onKeyDown);
888
901
  return () => removeEventListener("keydown", onKeyDown);
889
902
  }, [onKeyDown]);
@@ -2210,12 +2223,12 @@ function screen(bg, fg) {
2210
2223
  return hex;
2211
2224
  }
2212
2225
  const tones = {
2213
- default: hues.gray,
2214
- transparent: hues.gray,
2215
- primary: hues.blue,
2216
- positive: hues.green,
2217
- caution: hues.yellow,
2218
- critical: hues.red
2226
+ default: color$1.hues.gray,
2227
+ transparent: color$1.hues.gray,
2228
+ primary: color$1.hues.blue,
2229
+ positive: color$1.hues.green,
2230
+ caution: color$1.hues.yellow,
2231
+ critical: color$1.hues.red
2219
2232
  };
2220
2233
  const NEUTRAL_TONES = ["default", "transparent"];
2221
2234
  const color = createColorTheme({
@@ -2225,13 +2238,13 @@ const color = createColorTheme({
2225
2238
  name
2226
2239
  } = _ref11;
2227
2240
  if (name === "default") {
2228
- const tints2 = hues.gray;
2241
+ const tints2 = color$1.hues.gray;
2229
2242
  const skeletonFrom2 = dark ? tints2[900].hex : tints2[100].hex;
2230
2243
  return {
2231
- fg: dark ? white$1.hex : black$1.hex,
2232
- bg: dark ? black$1.hex : white$1.hex,
2244
+ fg: dark ? color$1.white.hex : color$1.black.hex,
2245
+ bg: dark ? color$1.black.hex : color$1.white.hex,
2233
2246
  border: tints2[dark ? 800 : 200].hex,
2234
- focusRing: hues.blue[dark ? 500 : 500].hex,
2247
+ focusRing: color$1.hues.blue[dark ? 500 : 500].hex,
2235
2248
  shadow: {
2236
2249
  outline: rgba(tints2[500].hex, 0.4),
2237
2250
  umbra: dark ? rgba(tints2[950].hex, 0.4) : rgba(tints2[500].hex, 0.2),
@@ -2251,7 +2264,7 @@ const color = createColorTheme({
2251
2264
  fg: tints2[dark ? 100 : 900].hex,
2252
2265
  bg: tints2[dark ? 950 : 50].hex,
2253
2266
  border: tints2[dark ? 800 : 300].hex,
2254
- focusRing: hues.blue[500].hex,
2267
+ focusRing: color$1.hues.blue[500].hex,
2255
2268
  shadow: {
2256
2269
  outline: rgba(tints2[500].hex, 0.4),
2257
2270
  umbra: dark ? rgba(tints2[900].hex, 0.4) : rgba(tints2[500].hex, 0.2),
@@ -2304,7 +2317,7 @@ const color = createColorTheme({
2304
2317
  bg: bg2,
2305
2318
  bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
2306
2319
  border: mix(base.bg, tints[dark ? 800 : 200].hex),
2307
- fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
2320
+ fg: mix(base.bg, dark ? color$1.black.hex : color$1.white.hex),
2308
2321
  muted: {
2309
2322
  fg: mix(base.bg, tints[dark ? 950 : 50].hex)
2310
2323
  },
@@ -2331,15 +2344,15 @@ const color = createColorTheme({
2331
2344
  bg: bg2,
2332
2345
  bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
2333
2346
  border: mix(base.bg, tints[dark ? 300 : 600].hex),
2334
- fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
2347
+ fg: mix(base.bg, dark ? color$1.black.hex : color$1.white.hex),
2335
2348
  muted: {
2336
2349
  fg: mix(base.bg, tints[dark ? 800 : 200].hex)
2337
2350
  },
2338
2351
  accent: {
2339
- fg: mix2(bg2, hues.red[dark ? 800 : 200].hex)
2352
+ fg: mix2(bg2, color$1.hues.red[dark ? 800 : 200].hex)
2340
2353
  },
2341
2354
  link: {
2342
- fg: mix2(bg2, hues.blue[dark ? 800 : 200].hex)
2355
+ fg: mix2(bg2, color$1.hues.blue[dark ? 800 : 200].hex)
2343
2356
  },
2344
2357
  code: {
2345
2358
  bg: mix(bg2, tints[dark ? 950 : 50].hex),
@@ -2358,15 +2371,15 @@ const color = createColorTheme({
2358
2371
  bg: mix(base.bg, tints[dark ? 200 : 800].hex),
2359
2372
  bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
2360
2373
  border: mix(base.bg, tints[dark ? 200 : 800].hex),
2361
- fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
2374
+ fg: mix(base.bg, dark ? color$1.black.hex : color$1.white.hex),
2362
2375
  muted: {
2363
2376
  fg: mix(base.bg, tints[dark ? 800 : 200].hex)
2364
2377
  },
2365
2378
  accent: {
2366
- fg: mix2(bg2, hues.red[dark ? 800 : 200].hex)
2379
+ fg: mix2(bg2, color$1.hues.red[dark ? 800 : 200].hex)
2367
2380
  },
2368
2381
  link: {
2369
- fg: mix2(bg2, hues.blue[dark ? 800 : 200].hex)
2382
+ fg: mix2(bg2, color$1.hues.blue[dark ? 800 : 200].hex)
2370
2383
  },
2371
2384
  code: {
2372
2385
  bg: mix(bg2, tints[dark ? 950 : 50].hex),
@@ -2388,15 +2401,15 @@ const color = createColorTheme({
2388
2401
  bg: bg2,
2389
2402
  bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
2390
2403
  border: mix(base.bg, tints[dark ? 200 : 800].hex),
2391
- fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
2404
+ fg: mix(base.bg, dark ? color$1.black.hex : color$1.white.hex),
2392
2405
  muted: {
2393
2406
  fg: mix(base.bg, tints[dark ? 800 : 200].hex)
2394
2407
  },
2395
2408
  accent: {
2396
- fg: mix2(bg2, hues.red[dark ? 800 : 200].hex)
2409
+ fg: mix2(bg2, color$1.hues.red[dark ? 800 : 200].hex)
2397
2410
  },
2398
2411
  link: {
2399
- fg: mix2(bg2, hues.blue[dark ? 800 : 200].hex)
2412
+ fg: mix2(bg2, color$1.hues.blue[dark ? 800 : 200].hex)
2400
2413
  },
2401
2414
  code: {
2402
2415
  bg: mix(bg2, tints[dark ? 950 : 50].hex),
@@ -2414,15 +2427,15 @@ const color = createColorTheme({
2414
2427
  bg,
2415
2428
  bg2: mix2(bg, tints[dark ? 50 : 950].hex),
2416
2429
  border: mix(base.bg, tints[dark ? 400 : 500].hex),
2417
- fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
2430
+ fg: mix(base.bg, dark ? color$1.black.hex : color$1.white.hex),
2418
2431
  muted: {
2419
2432
  fg: mix(base.bg, tints[dark ? 900 : 100].hex)
2420
2433
  },
2421
2434
  accent: {
2422
- fg: mix2(bg, hues.red[dark ? 900 : 100].hex)
2435
+ fg: mix2(bg, color$1.hues.red[dark ? 900 : 100].hex)
2423
2436
  },
2424
2437
  link: {
2425
- fg: mix2(bg, hues.blue[dark ? 900 : 100].hex)
2438
+ fg: mix2(bg, color$1.hues.blue[dark ? 900 : 100].hex)
2426
2439
  },
2427
2440
  code: {
2428
2441
  bg: mix(bg, tints[dark ? 950 : 50].hex),
@@ -2486,10 +2499,10 @@ const color = createColorTheme({
2486
2499
  fg: mix(base.bg, tints[dark ? 400 : 600].hex)
2487
2500
  },
2488
2501
  accent: {
2489
- fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
2502
+ fg: mix(base.bg, color$1.hues.red[dark ? 400 : 500].hex)
2490
2503
  },
2491
2504
  link: {
2492
- fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex)
2505
+ fg: mix(base.bg, color$1.hues.blue[dark ? 400 : 600].hex)
2493
2506
  },
2494
2507
  code: {
2495
2508
  bg: mix(bg2, tints[dark ? 950 : 50].hex),
@@ -2516,10 +2529,10 @@ const color = createColorTheme({
2516
2529
  fg: mix(base.bg, tints[dark ? 400 : 600].hex)
2517
2530
  },
2518
2531
  accent: {
2519
- fg: mix(bg2, hues.red[dark ? 400 : 500].hex)
2532
+ fg: mix(bg2, color$1.hues.red[dark ? 400 : 500].hex)
2520
2533
  },
2521
2534
  link: {
2522
- fg: mix(bg2, hues.blue[dark ? 400 : 600].hex)
2535
+ fg: mix(bg2, color$1.hues.blue[dark ? 400 : 600].hex)
2523
2536
  },
2524
2537
  code: {
2525
2538
  bg: mix(bg2, tints[dark ? 950 : 50].hex),
@@ -2546,10 +2559,10 @@ const color = createColorTheme({
2546
2559
  fg: mix(base.bg, tints[dark ? 400 : 600].hex)
2547
2560
  },
2548
2561
  accent: {
2549
- fg: mix(bg2, hues.red[dark ? 400 : 500].hex)
2562
+ fg: mix(bg2, color$1.hues.red[dark ? 400 : 500].hex)
2550
2563
  },
2551
2564
  link: {
2552
- fg: mix(bg2, hues.blue[dark ? 400 : 600].hex)
2565
+ fg: mix(bg2, color$1.hues.blue[dark ? 400 : 600].hex)
2553
2566
  },
2554
2567
  code: {
2555
2568
  bg: mix(bg2, tints[dark ? 950 : 50].hex),
@@ -2572,10 +2585,10 @@ const color = createColorTheme({
2572
2585
  fg: mix(base.bg, tints[dark ? 400 : 600].hex)
2573
2586
  },
2574
2587
  accent: {
2575
- fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
2588
+ fg: mix(base.bg, color$1.hues.red[dark ? 400 : 500].hex)
2576
2589
  },
2577
2590
  link: {
2578
- fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex)
2591
+ fg: mix(base.bg, color$1.hues.blue[dark ? 400 : 600].hex)
2579
2592
  },
2580
2593
  code: {
2581
2594
  bg: mix(base.bg, tints[dark ? 950 : 50].hex),
@@ -2664,10 +2677,10 @@ const color = createColorTheme({
2664
2677
  fg: mix(base.bg, tints[dark ? 400 : 600].hex)
2665
2678
  },
2666
2679
  accent: {
2667
- fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
2680
+ fg: mix(base.bg, color$1.hues.red[dark ? 400 : 500].hex)
2668
2681
  },
2669
2682
  link: {
2670
- fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex)
2683
+ fg: mix(base.bg, color$1.hues.blue[dark ? 400 : 600].hex)
2671
2684
  },
2672
2685
  code: {
2673
2686
  bg: mix(base.bg, tints[dark ? 950 : 50].hex),
@@ -2700,31 +2713,31 @@ const color = createColorTheme({
2700
2713
  return {
2701
2714
  bg: base.bg,
2702
2715
  fg: base.fg,
2703
- border: mix(base.bg, hues.gray[dark ? 700 : 300].hex),
2704
- placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex)
2716
+ border: mix(base.bg, color$1.hues.gray[dark ? 700 : 300].hex),
2717
+ placeholder: mix(base.bg, color$1.hues.gray[dark ? 600 : 400].hex)
2705
2718
  };
2706
2719
  }
2707
2720
  if (state === "disabled") {
2708
2721
  return {
2709
- bg: mix(base.bg, hues.gray[dark ? 950 : 50].hex),
2710
- fg: mix(base.bg, hues.gray[dark ? 700 : 300].hex),
2711
- border: mix(base.bg, hues.gray[dark ? 900 : 100].hex),
2712
- placeholder: mix(base.bg, hues.gray[dark ? 800 : 200].hex)
2722
+ bg: mix(base.bg, color$1.hues.gray[dark ? 950 : 50].hex),
2723
+ fg: mix(base.bg, color$1.hues.gray[dark ? 700 : 300].hex),
2724
+ border: mix(base.bg, color$1.hues.gray[dark ? 900 : 100].hex),
2725
+ placeholder: mix(base.bg, color$1.hues.gray[dark ? 800 : 200].hex)
2713
2726
  };
2714
2727
  }
2715
2728
  if (state === "readOnly") {
2716
2729
  return {
2717
- bg: mix(base.bg, hues.gray[dark ? 950 : 50].hex),
2718
- fg: mix(base.bg, hues.gray[dark ? 200 : 800].hex),
2719
- border: mix(base.bg, hues.gray[dark ? 800 : 200].hex),
2720
- placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex)
2730
+ bg: mix(base.bg, color$1.hues.gray[dark ? 950 : 50].hex),
2731
+ fg: mix(base.bg, color$1.hues.gray[dark ? 200 : 800].hex),
2732
+ border: mix(base.bg, color$1.hues.gray[dark ? 800 : 200].hex),
2733
+ placeholder: mix(base.bg, color$1.hues.gray[dark ? 600 : 400].hex)
2721
2734
  };
2722
2735
  }
2723
2736
  return {
2724
2737
  bg: base.bg,
2725
2738
  fg: base.fg,
2726
2739
  border: base.border,
2727
- placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex)
2740
+ placeholder: mix(base.bg, color$1.hues.gray[dark ? 600 : 400].hex)
2728
2741
  };
2729
2742
  },
2730
2743
  selectable: _ref17 => {
@@ -2766,7 +2779,7 @@ const color = createColorTheme({
2766
2779
  key
2767
2780
  } = _ref18;
2768
2781
  const mix = dark ? screen : multiply;
2769
- return mix(base.bg, hues[key][dark ? 400 : 500].hex);
2782
+ return mix(base.bg, color$1.hues[key][dark ? 400 : 500].hex);
2770
2783
  },
2771
2784
  syntax: _ref19 => {
2772
2785
  let {
@@ -2777,42 +2790,42 @@ const color = createColorTheme({
2777
2790
  const mainShade = dark ? 400 : 600;
2778
2791
  const secondaryShade = dark ? 600 : 400;
2779
2792
  return {
2780
- atrule: mix(base.bg, hues.purple[mainShade].hex),
2781
- attrName: mix(base.bg, hues.green[mainShade].hex),
2782
- attrValue: mix(base.bg, hues.yellow[mainShade].hex),
2783
- attribute: mix(base.bg, hues.yellow[mainShade].hex),
2784
- boolean: mix(base.bg, hues.purple[mainShade].hex),
2785
- builtin: mix(base.bg, hues.purple[mainShade].hex),
2786
- cdata: mix(base.bg, hues.yellow[mainShade].hex),
2787
- char: mix(base.bg, hues.yellow[mainShade].hex),
2788
- class: mix(base.bg, hues.orange[mainShade].hex),
2789
- className: mix(base.bg, hues.cyan[mainShade].hex),
2790
- comment: mix(base.bg, hues.gray[secondaryShade].hex),
2791
- constant: mix(base.bg, hues.purple[mainShade].hex),
2792
- deleted: mix(base.bg, hues.red[mainShade].hex),
2793
- doctype: mix(base.bg, hues.gray[secondaryShade].hex),
2794
- entity: mix(base.bg, hues.red[mainShade].hex),
2795
- function: mix(base.bg, hues.green[mainShade].hex),
2796
- hexcode: mix(base.bg, hues.blue[mainShade].hex),
2797
- id: mix(base.bg, hues.purple[mainShade].hex),
2798
- important: mix(base.bg, hues.purple[mainShade].hex),
2799
- inserted: mix(base.bg, hues.yellow[mainShade].hex),
2800
- keyword: mix(base.bg, hues.magenta[mainShade].hex),
2801
- number: mix(base.bg, hues.purple[mainShade].hex),
2802
- operator: mix(base.bg, hues.magenta[mainShade].hex),
2803
- prolog: mix(base.bg, hues.gray[secondaryShade].hex),
2804
- property: mix(base.bg, hues.blue[mainShade].hex),
2805
- pseudoClass: mix(base.bg, hues.yellow[mainShade].hex),
2806
- pseudoElement: mix(base.bg, hues.yellow[mainShade].hex),
2807
- punctuation: mix(base.bg, hues.gray[mainShade].hex),
2808
- regex: mix(base.bg, hues.blue[mainShade].hex),
2809
- selector: mix(base.bg, hues.red[mainShade].hex),
2810
- string: mix(base.bg, hues.yellow[mainShade].hex),
2811
- symbol: mix(base.bg, hues.purple[mainShade].hex),
2812
- tag: mix(base.bg, hues.red[mainShade].hex),
2813
- unit: mix(base.bg, hues.orange[mainShade].hex),
2814
- url: mix(base.bg, hues.red[mainShade].hex),
2815
- variable: mix(base.bg, hues.red[mainShade].hex)
2793
+ atrule: mix(base.bg, color$1.hues.purple[mainShade].hex),
2794
+ attrName: mix(base.bg, color$1.hues.green[mainShade].hex),
2795
+ attrValue: mix(base.bg, color$1.hues.yellow[mainShade].hex),
2796
+ attribute: mix(base.bg, color$1.hues.yellow[mainShade].hex),
2797
+ boolean: mix(base.bg, color$1.hues.purple[mainShade].hex),
2798
+ builtin: mix(base.bg, color$1.hues.purple[mainShade].hex),
2799
+ cdata: mix(base.bg, color$1.hues.yellow[mainShade].hex),
2800
+ char: mix(base.bg, color$1.hues.yellow[mainShade].hex),
2801
+ class: mix(base.bg, color$1.hues.orange[mainShade].hex),
2802
+ className: mix(base.bg, color$1.hues.cyan[mainShade].hex),
2803
+ comment: mix(base.bg, color$1.hues.gray[secondaryShade].hex),
2804
+ constant: mix(base.bg, color$1.hues.purple[mainShade].hex),
2805
+ deleted: mix(base.bg, color$1.hues.red[mainShade].hex),
2806
+ doctype: mix(base.bg, color$1.hues.gray[secondaryShade].hex),
2807
+ entity: mix(base.bg, color$1.hues.red[mainShade].hex),
2808
+ function: mix(base.bg, color$1.hues.green[mainShade].hex),
2809
+ hexcode: mix(base.bg, color$1.hues.blue[mainShade].hex),
2810
+ id: mix(base.bg, color$1.hues.purple[mainShade].hex),
2811
+ important: mix(base.bg, color$1.hues.purple[mainShade].hex),
2812
+ inserted: mix(base.bg, color$1.hues.yellow[mainShade].hex),
2813
+ keyword: mix(base.bg, color$1.hues.magenta[mainShade].hex),
2814
+ number: mix(base.bg, color$1.hues.purple[mainShade].hex),
2815
+ operator: mix(base.bg, color$1.hues.magenta[mainShade].hex),
2816
+ prolog: mix(base.bg, color$1.hues.gray[secondaryShade].hex),
2817
+ property: mix(base.bg, color$1.hues.blue[mainShade].hex),
2818
+ pseudoClass: mix(base.bg, color$1.hues.yellow[mainShade].hex),
2819
+ pseudoElement: mix(base.bg, color$1.hues.yellow[mainShade].hex),
2820
+ punctuation: mix(base.bg, color$1.hues.gray[mainShade].hex),
2821
+ regex: mix(base.bg, color$1.hues.blue[mainShade].hex),
2822
+ selector: mix(base.bg, color$1.hues.red[mainShade].hex),
2823
+ string: mix(base.bg, color$1.hues.yellow[mainShade].hex),
2824
+ symbol: mix(base.bg, color$1.hues.purple[mainShade].hex),
2825
+ tag: mix(base.bg, color$1.hues.red[mainShade].hex),
2826
+ unit: mix(base.bg, color$1.hues.orange[mainShade].hex),
2827
+ url: mix(base.bg, color$1.hues.red[mainShade].hex),
2828
+ variable: mix(base.bg, color$1.hues.red[mainShade].hex)
2816
2829
  };
2817
2830
  }
2818
2831
  });
@@ -3092,17 +3105,17 @@ function getGlobalScope() {
3092
3105
  }
3093
3106
  const globalScope = getGlobalScope();
3094
3107
  const key$7 = Symbol.for("@sanity/ui/context/theme");
3095
- globalScope[key$7] = globalScope[key$7] || createContext(null);
3108
+ globalScope[key$7] = globalScope[key$7] || react.createContext(null);
3096
3109
  const ThemeContext = globalScope[key$7];
3097
3110
  function ThemeProvider(props) {
3098
- const parentTheme = useContext(ThemeContext);
3111
+ const parentTheme = react.useContext(ThemeContext);
3099
3112
  const {
3100
3113
  children,
3101
3114
  scheme = (parentTheme == null ? void 0 : parentTheme.scheme) || "light",
3102
3115
  theme: themeProp = (parentTheme == null ? void 0 : parentTheme.theme) || null,
3103
3116
  tone = (parentTheme == null ? void 0 : parentTheme.tone) || "default"
3104
3117
  } = props;
3105
- const theme = useMemo(() => {
3118
+ const theme = react.useMemo(() => {
3106
3119
  if (!themeProp) return null;
3107
3120
  const {
3108
3121
  color: rootColor,
@@ -3119,20 +3132,20 @@ function ThemeProvider(props) {
3119
3132
  })
3120
3133
  };
3121
3134
  }, [scheme, themeProp, tone]);
3122
- const value = useMemo(() => themeProp && {
3135
+ const value = react.useMemo(() => themeProp && {
3123
3136
  version: 0,
3124
3137
  theme: themeProp,
3125
3138
  scheme,
3126
3139
  tone
3127
3140
  }, [themeProp, scheme, tone]);
3128
3141
  if (!theme) {
3129
- return /* @__PURE__ */jsx("pre", {
3142
+ return /* @__PURE__ */jsxRuntime.jsx("pre", {
3130
3143
  children: 'ThemeProvider: no "theme" property provided'
3131
3144
  });
3132
3145
  }
3133
- return /* @__PURE__ */jsx(ThemeContext.Provider, {
3146
+ return /* @__PURE__ */jsxRuntime.jsx(ThemeContext.Provider, {
3134
3147
  value,
3135
- children: /* @__PURE__ */jsx(ThemeProvider$1, {
3148
+ children: /* @__PURE__ */jsxRuntime.jsx(styled.ThemeProvider, {
3136
3149
  theme,
3137
3150
  children
3138
3151
  })
@@ -3142,7 +3155,7 @@ function isRecord(value) {
3142
3155
  return Boolean(value && typeof value === "object");
3143
3156
  }
3144
3157
  function useRootTheme() {
3145
- const value = useContext(ThemeContext);
3158
+ const value = react.useContext(ThemeContext);
3146
3159
  if (!value) {
3147
3160
  throw new Error("useRootTheme(): missing context value");
3148
3161
  }
@@ -3158,7 +3171,7 @@ function ThemeColorProvider(props) {
3158
3171
  tone
3159
3172
  } = props;
3160
3173
  const root = useRootTheme();
3161
- return /* @__PURE__ */jsx(ThemeProvider, {
3174
+ return /* @__PURE__ */jsxRuntime.jsx(ThemeProvider, {
3162
3175
  scheme: scheme || root.scheme,
3163
3176
  theme: root.theme,
3164
3177
  tone,
@@ -3166,7 +3179,7 @@ function ThemeColorProvider(props) {
3166
3179
  });
3167
3180
  }
3168
3181
  function useTheme() {
3169
- return useTheme$1();
3182
+ return styled.useTheme();
3170
3183
  }
3171
3184
  const MEDIA_MANAGER_CACHE = /* @__PURE__ */new WeakMap();
3172
3185
  function _getMediaQuery(media, index) {
@@ -3245,18 +3258,18 @@ function useMediaIndex() {
3245
3258
  const {
3246
3259
  media
3247
3260
  } = theme.sanity;
3248
- const manager = useMemo(() => _getMediaManager(media), [media]);
3249
- const [index, setIndex] = useState(manager.getCurrentIndex);
3250
- useEffect(() => manager.subscribe(setIndex), [manager]);
3261
+ const manager = react.useMemo(() => _getMediaManager(media), [media]);
3262
+ const [index, setIndex] = react.useState(manager.getCurrentIndex);
3263
+ react.useEffect(() => manager.subscribe(setIndex), [manager]);
3251
3264
  return index;
3252
3265
  }
3253
3266
  function usePrefersDark() {
3254
- const mq = useMemo(() => {
3267
+ const mq = react.useMemo(() => {
3255
3268
  if (typeof window === "undefined") return void 0;
3256
3269
  return window.matchMedia("(prefers-color-scheme: dark)");
3257
3270
  }, []);
3258
- const [dark, setDark] = useState((mq == null ? void 0 : mq.matches) || false);
3259
- useEffect(() => {
3271
+ const [dark, setDark] = react.useState((mq == null ? void 0 : mq.matches) || false);
3272
+ react.useEffect(() => {
3260
3273
  if (!mq) return void 0;
3261
3274
  setDark(mq.matches);
3262
3275
  const handleChange = () => setDark(mq.matches);
@@ -3265,9 +3278,9 @@ function usePrefersDark() {
3265
3278
  }, [mq]);
3266
3279
  return dark;
3267
3280
  }
3268
- const useIsomorphicEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
3281
+ const useIsomorphicEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
3269
3282
  function useForwardedRef(ref) {
3270
- const innerRef = useRef(null);
3283
+ const innerRef = react.useRef(null);
3271
3284
  useIsomorphicEffect(() => {
3272
3285
  if (!ref) return;
3273
3286
  if (typeof ref === "function") {
@@ -3279,7 +3292,7 @@ function useForwardedRef(ref) {
3279
3292
  return innerRef;
3280
3293
  }
3281
3294
  function useCustomValidity(ref, customValidity) {
3282
- useEffect(() => {
3295
+ react.useEffect(() => {
3283
3296
  if (ref.current) {
3284
3297
  ref.current.setCustomValidity(customValidity || "");
3285
3298
  }
@@ -3793,7 +3806,7 @@ function responsiveInputPaddingIconRightStyle(props) {
3793
3806
  $iconRight: true
3794
3807
  }));
3795
3808
  }
3796
- const ROOT_STYLE = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &:not([hidden]) {\n display: flex;\n }\n\n align-items: center;\n"])));
3809
+ const ROOT_STYLE = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &:not([hidden]) {\n display: flex;\n }\n\n align-items: center;\n"])));
3797
3810
  function textInputRootStyle() {
3798
3811
  return ROOT_STYLE;
3799
3812
  }
@@ -3806,7 +3819,7 @@ function textInputBaseStyle(props) {
3806
3819
  } = props;
3807
3820
  const font = theme.sanity.fonts.text;
3808
3821
  const color = theme.sanity.color.input;
3809
- 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);
3822
+ 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);
3810
3823
  }
3811
3824
  function textInputFontSizeStyle(props) {
3812
3825
  const {
@@ -3837,7 +3850,7 @@ function textInputRepresentationStyle(props) {
3837
3850
  input
3838
3851
  } = theme.sanity;
3839
3852
  const color = theme.sanity.color.input;
3840
- 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({
3853
+ 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({
3841
3854
  color: color.default.enabled.border,
3842
3855
  width: input.border.width
3843
3856
  }), color.invalid.enabled.bg, color.invalid.enabled.fg, focusRingBorderStyle({
@@ -3915,11 +3928,11 @@ function textBaseStyle(props) {
3915
3928
  const {
3916
3929
  weights
3917
3930
  } = theme.sanity.fonts.text;
3918
- 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);
3931
+ 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);
3919
3932
  }
3920
- const Root$E = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
3921
- const SpanWithTextOverflow$2 = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
3922
- const Text = forwardRef(function Text2(props, ref) {
3933
+ const Root$E = styled__default.default.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
3934
+ 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"])));
3935
+ const Text = react.forwardRef(function Text2(props, ref) {
3923
3936
  const {
3924
3937
  accent = false,
3925
3938
  align,
@@ -3932,11 +3945,11 @@ const Text = forwardRef(function Text2(props, ref) {
3932
3945
  restProps = _objectWithoutProperties(props, _excluded2);
3933
3946
  let children = childrenProp;
3934
3947
  if (textOverflow === "ellipsis") {
3935
- children = /* @__PURE__ */jsx(SpanWithTextOverflow$2, {
3948
+ children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow$2, {
3936
3949
  children
3937
3950
  });
3938
3951
  }
3939
- return /* @__PURE__ */jsx(Root$E, _objectSpread(_objectSpread({
3952
+ return /* @__PURE__ */jsxRuntime.jsx(Root$E, _objectSpread(_objectSpread({
3940
3953
  "data-ui": "Text"
3941
3954
  }, restProps), {}, {
3942
3955
  $accent: accent,
@@ -3945,7 +3958,7 @@ const Text = forwardRef(function Text2(props, ref) {
3945
3958
  ref,
3946
3959
  $size: useArrayProp(size),
3947
3960
  $weight: weight,
3948
- children: /* @__PURE__ */jsx("span", {
3961
+ children: /* @__PURE__ */jsxRuntime.jsx("span", {
3949
3962
  children
3950
3963
  })
3951
3964
  }));
@@ -4094,12 +4107,12 @@ function avatarStrokeStyle() {
4094
4107
  }
4095
4108
  };
4096
4109
  }
4097
- const Root$D = styled.div(responsiveAvatarSizeStyle, avatarStyle.root);
4098
- const Arrow = styled.div(avatarStyle.arrow);
4099
- const BgStroke = styled.ellipse(avatarStyle.bgStroke);
4100
- const Stroke = styled.ellipse(avatarStyle.stroke);
4101
- const Initials = styled.div(avatarStyle.initials);
4102
- const Avatar = forwardRef(function Avatar2(props, ref) {
4110
+ const Root$D = styled__default.default.div(responsiveAvatarSizeStyle, avatarStyle.root);
4111
+ const Arrow = styled__default.default.div(avatarStyle.arrow);
4112
+ const BgStroke = styled__default.default.ellipse(avatarStyle.bgStroke);
4113
+ const Stroke = styled__default.default.ellipse(avatarStyle.stroke);
4114
+ const Initials = styled__default.default.div(avatarStyle.initials);
4115
+ const Avatar = react.forwardRef(function Avatar2(props, ref) {
4103
4116
  const {
4104
4117
  as: asProp,
4105
4118
  color: colorKey = "gray",
@@ -4113,33 +4126,33 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
4113
4126
  size: sizeProp = 0
4114
4127
  } = props,
4115
4128
  restProps = _objectWithoutProperties(props, _excluded3);
4116
- const as = ReactIs.isValidElementType(asProp) ? asProp : "div";
4129
+ const as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div";
4117
4130
  const size = useArrayProp(sizeProp);
4118
4131
  const theme = useTheme();
4119
4132
  const color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray;
4120
4133
  const avatarSize = theme.sanity.avatar.sizes[size[0]] || theme.sanity.avatar.sizes[0];
4121
4134
  const _sizeRem = avatarSize.size;
4122
4135
  const _radius = _sizeRem / 2;
4123
- const elementId = useId();
4124
- const [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside");
4125
- const [imageFailed, setImageFailed] = useState(false);
4136
+ const elementId = react.useId();
4137
+ const [arrowPosition, setArrowPosition] = react.useState(animateArrowFrom || arrowPositionProp || "inside");
4138
+ const [imageFailed, setImageFailed] = react.useState(false);
4126
4139
  const imageId = "avatar-image-".concat(elementId);
4127
- useEffect(() => {
4140
+ react.useEffect(() => {
4128
4141
  if (arrowPosition === arrowPositionProp) return void 0;
4129
4142
  const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp));
4130
4143
  return () => cancelAnimationFrame(raf);
4131
4144
  }, [arrowPosition, arrowPositionProp]);
4132
- useEffect(() => {
4145
+ react.useEffect(() => {
4133
4146
  if (src) setImageFailed(false);
4134
4147
  }, [src]);
4135
- const handleImageError = useCallback(() => {
4148
+ const handleImageError = react.useCallback(() => {
4136
4149
  setImageFailed(true);
4137
4150
  if (onImageLoadError) {
4138
4151
  onImageLoadError(new Error("Avatar: the image failed to load"));
4139
4152
  }
4140
4153
  }, [onImageLoadError]);
4141
- const initialsSize = useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
4142
- return /* @__PURE__ */jsxs(Root$D, _objectSpread(_objectSpread({
4154
+ const initialsSize = react.useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
4155
+ return /* @__PURE__ */jsxRuntime.jsxs(Root$D, _objectSpread(_objectSpread({
4143
4156
  as,
4144
4157
  "data-as": typeof as === "string" ? as : void 0,
4145
4158
  "data-ui": "Avatar"
@@ -4151,45 +4164,45 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
4151
4164
  "data-status": status,
4152
4165
  ref,
4153
4166
  title,
4154
- children: [/* @__PURE__ */jsx(Arrow, {
4155
- children: /* @__PURE__ */jsx("svg", {
4167
+ children: [/* @__PURE__ */jsxRuntime.jsx(Arrow, {
4168
+ children: /* @__PURE__ */jsxRuntime.jsx("svg", {
4156
4169
  width: "11",
4157
4170
  height: "7",
4158
4171
  viewBox: "0 0 11 7",
4159
4172
  fill: "none",
4160
- children: /* @__PURE__ */jsx("path", {
4173
+ children: /* @__PURE__ */jsxRuntime.jsx("path", {
4161
4174
  d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z",
4162
4175
  fill: color
4163
4176
  })
4164
4177
  })
4165
- }), !imageFailed && src && /* @__PURE__ */jsxs("svg", {
4178
+ }), !imageFailed && src && /* @__PURE__ */jsxRuntime.jsxs("svg", {
4166
4179
  viewBox: "0 0 ".concat(_sizeRem, " ").concat(_sizeRem),
4167
4180
  fill: "none",
4168
- children: [/* @__PURE__ */jsx("defs", {
4169
- children: /* @__PURE__ */jsx("pattern", {
4181
+ children: [/* @__PURE__ */jsxRuntime.jsx("defs", {
4182
+ children: /* @__PURE__ */jsxRuntime.jsx("pattern", {
4170
4183
  id: imageId,
4171
4184
  patternContentUnits: "objectBoundingBox",
4172
4185
  width: "1",
4173
4186
  height: "1",
4174
- children: /* @__PURE__ */jsx("image", {
4187
+ children: /* @__PURE__ */jsxRuntime.jsx("image", {
4175
4188
  href: src,
4176
4189
  width: "1",
4177
4190
  height: "1",
4178
4191
  onError: handleImageError
4179
4192
  })
4180
4193
  })
4181
- }), /* @__PURE__ */jsx("circle", {
4194
+ }), /* @__PURE__ */jsxRuntime.jsx("circle", {
4182
4195
  cx: _radius,
4183
4196
  cy: _radius,
4184
4197
  r: _radius,
4185
4198
  fill: "url(#".concat(imageId, ")")
4186
- }), /* @__PURE__ */jsx(BgStroke, {
4199
+ }), /* @__PURE__ */jsxRuntime.jsx(BgStroke, {
4187
4200
  cx: _radius,
4188
4201
  cy: _radius,
4189
4202
  rx: _radius,
4190
4203
  ry: _radius,
4191
4204
  vectorEffect: "non-scaling-stroke"
4192
- }), /* @__PURE__ */jsx(Stroke, {
4205
+ }), /* @__PURE__ */jsxRuntime.jsx(Stroke, {
4193
4206
  cx: _radius,
4194
4207
  cy: _radius,
4195
4208
  rx: _radius,
@@ -4197,12 +4210,12 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
4197
4210
  stroke: color,
4198
4211
  vectorEffect: "non-scaling-stroke"
4199
4212
  })]
4200
- }), (imageFailed || !src) && initials && /* @__PURE__ */jsx(Fragment, {
4201
- children: /* @__PURE__ */jsx(Initials, {
4202
- children: /* @__PURE__ */jsx(Text, {
4213
+ }), (imageFailed || !src) && initials && /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
4214
+ children: /* @__PURE__ */jsxRuntime.jsx(Initials, {
4215
+ children: /* @__PURE__ */jsxRuntime.jsx(Text, {
4203
4216
  as: "span",
4204
4217
  size: initialsSize,
4205
- children: /* @__PURE__ */jsx("strong", {
4218
+ children: /* @__PURE__ */jsxRuntime.jsx("strong", {
4206
4219
  children: initials
4207
4220
  })
4208
4221
  })
@@ -4232,24 +4245,24 @@ function _avatarCounterBaseStyle(props) {
4232
4245
  const {
4233
4246
  theme
4234
4247
  } = props;
4235
- 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]));
4248
+ 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]));
4236
4249
  }
4237
- const Root$C = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
4238
- const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
4250
+ const Root$C = styled__default.default.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
4251
+ const AvatarCounter = react.forwardRef(function AvatarCounter2(props, ref) {
4239
4252
  const {
4240
4253
  count,
4241
4254
  size: sizeProp = 0
4242
4255
  } = props;
4243
4256
  const size = useArrayProp(sizeProp);
4244
- const counterSize = useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
4245
- return /* @__PURE__ */jsx(Root$C, {
4257
+ const counterSize = react.useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
4258
+ return /* @__PURE__ */jsxRuntime.jsx(Root$C, {
4246
4259
  $size: size,
4247
4260
  "data-ui": "AvatarCounter",
4248
4261
  ref,
4249
- children: /* @__PURE__ */jsx(Text, {
4262
+ children: /* @__PURE__ */jsxRuntime.jsx(Text, {
4250
4263
  as: "span",
4251
4264
  size: counterSize,
4252
- children: /* @__PURE__ */jsx("strong", {
4265
+ children: /* @__PURE__ */jsxRuntime.jsx("strong", {
4253
4266
  children: count
4254
4267
  })
4255
4268
  })
@@ -4257,9 +4270,9 @@ const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
4257
4270
  });
4258
4271
  function childrenToElementArray(children) {
4259
4272
  const childrenArray = Array.isArray(children) ? children : [children];
4260
- return childrenArray.filter(node => isElement$1(node) || isFragment(node) || typeof node === "string");
4273
+ return childrenArray.filter(node => ReactIs.isElement(node) || ReactIs.isFragment(node) || typeof node === "string");
4261
4274
  }
4262
- 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"])));
4275
+ 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"])));
4263
4276
  function avatarStackStyle() {
4264
4277
  return BASE_STYLES;
4265
4278
  }
@@ -4281,8 +4294,8 @@ function responsiveAvatarStackSizeStyle(props) {
4281
4294
  };
4282
4295
  });
4283
4296
  }
4284
- const Root$B = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
4285
- const AvatarStack = forwardRef(function AvatarStack2(props, ref) {
4297
+ const Root$B = styled__default.default.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
4298
+ const AvatarStack = react.forwardRef(function AvatarStack2(props, ref) {
4286
4299
  const {
4287
4300
  children: childrenProp,
4288
4301
  maxLength: maxLengthProp = 4,
@@ -4296,29 +4309,29 @@ const AvatarStack = forwardRef(function AvatarStack2(props, ref) {
4296
4309
  const visibleCount = maxLength - 1;
4297
4310
  const extraCount = len - visibleCount;
4298
4311
  const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
4299
- return /* @__PURE__ */jsxs(Root$B, _objectSpread(_objectSpread({
4312
+ return /* @__PURE__ */jsxRuntime.jsxs(Root$B, _objectSpread(_objectSpread({
4300
4313
  "data-ui": "AvatarStack"
4301
4314
  }, restProps), {}, {
4302
4315
  ref,
4303
4316
  $size: size,
4304
- children: [len === 0 && /* @__PURE__ */jsx("div", {
4305
- children: /* @__PURE__ */jsx(AvatarCounter, {
4317
+ children: [len === 0 && /* @__PURE__ */jsxRuntime.jsx("div", {
4318
+ children: /* @__PURE__ */jsxRuntime.jsx(AvatarCounter, {
4306
4319
  count: len
4307
4320
  })
4308
- }), len !== 0 && extraCount > 1 && /* @__PURE__ */jsx("div", {
4309
- children: /* @__PURE__ */jsx(AvatarCounter, {
4321
+ }), len !== 0 && extraCount > 1 && /* @__PURE__ */jsxRuntime.jsx("div", {
4322
+ children: /* @__PURE__ */jsxRuntime.jsx(AvatarCounter, {
4310
4323
  count: extraCount,
4311
4324
  size
4312
4325
  })
4313
- }), visibleChildren.map((child, childIndex) => /* @__PURE__ */jsx("div", {
4314
- children: cloneElement(child, {
4326
+ }), visibleChildren.map((child, childIndex) => /* @__PURE__ */jsxRuntime.jsx("div", {
4327
+ children: react.cloneElement(child, {
4315
4328
  size
4316
4329
  })
4317
4330
  }, String(childIndex)))]
4318
4331
  }));
4319
4332
  });
4320
- const Root$A = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
4321
- const Box = forwardRef(function Box2(props, ref) {
4333
+ const Root$A = styled__default.default.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
4334
+ const Box = react.forwardRef(function Box2(props, ref) {
4322
4335
  const {
4323
4336
  as: asProp = "div",
4324
4337
  column,
@@ -4348,7 +4361,7 @@ const Box = forwardRef(function Box2(props, ref) {
4348
4361
  sizing
4349
4362
  } = props,
4350
4363
  restProps = _objectWithoutProperties(props, _excluded5);
4351
- return /* @__PURE__ */jsx(Root$A, _objectSpread(_objectSpread({
4364
+ return /* @__PURE__ */jsxRuntime.jsx(Root$A, _objectSpread(_objectSpread({
4352
4365
  "data-as": typeof asProp === "string" ? asProp : void 0,
4353
4366
  "data-ui": "Box"
4354
4367
  }, restProps), {}, {
@@ -4391,11 +4404,11 @@ function labelBaseStyle(props) {
4391
4404
  const {
4392
4405
  fonts
4393
4406
  } = theme.sanity;
4394
- 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);
4407
+ 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);
4395
4408
  }
4396
- const Root$z = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
4397
- const SpanWithTextOverflow$1 = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
4398
- const Label = forwardRef(function Label2(props, ref) {
4409
+ const Root$z = styled__default.default.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
4410
+ 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"])));
4411
+ const Label = react.forwardRef(function Label2(props, ref) {
4399
4412
  const {
4400
4413
  accent,
4401
4414
  align,
@@ -4408,15 +4421,15 @@ const Label = forwardRef(function Label2(props, ref) {
4408
4421
  restProps = _objectWithoutProperties(props, _excluded6);
4409
4422
  let children = childrenProp;
4410
4423
  if (textOverflow === "ellipsis") {
4411
- children = /* @__PURE__ */jsx(SpanWithTextOverflow$1, {
4424
+ children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow$1, {
4412
4425
  children
4413
4426
  });
4414
4427
  } else {
4415
- children = /* @__PURE__ */jsx("span", {
4428
+ children = /* @__PURE__ */jsxRuntime.jsx("span", {
4416
4429
  children
4417
4430
  });
4418
4431
  }
4419
- return /* @__PURE__ */jsx(Root$z, _objectSpread(_objectSpread({
4432
+ return /* @__PURE__ */jsxRuntime.jsx(Root$z, _objectSpread(_objectSpread({
4420
4433
  "data-ui": "Label"
4421
4434
  }, restProps), {}, {
4422
4435
  $accent: accent,
@@ -4446,8 +4459,8 @@ function badgeStyle(props) {
4446
4459
  }
4447
4460
  };
4448
4461
  }
4449
- const Root$y = styled(Box)(responsiveRadiusStyle, badgeStyle);
4450
- const Badge = forwardRef(function Badge2(props, ref) {
4462
+ const Root$y = styled__default.default(Box)(responsiveRadiusStyle, badgeStyle);
4463
+ const Badge = react.forwardRef(function Badge2(props, ref) {
4451
4464
  const {
4452
4465
  children,
4453
4466
  fontSize,
@@ -4457,7 +4470,7 @@ const Badge = forwardRef(function Badge2(props, ref) {
4457
4470
  tone = "default"
4458
4471
  } = props,
4459
4472
  restProps = _objectWithoutProperties(props, _excluded7);
4460
- return /* @__PURE__ */jsx(Root$y, _objectSpread(_objectSpread({
4473
+ return /* @__PURE__ */jsxRuntime.jsx(Root$y, _objectSpread(_objectSpread({
4461
4474
  "data-ui": "Badge"
4462
4475
  }, restProps), {}, {
4463
4476
  $mode: mode,
@@ -4465,14 +4478,14 @@ const Badge = forwardRef(function Badge2(props, ref) {
4465
4478
  $radius: useArrayProp(radius),
4466
4479
  padding: useArrayProp(padding),
4467
4480
  ref,
4468
- children: /* @__PURE__ */jsx(Label, {
4481
+ children: /* @__PURE__ */jsxRuntime.jsx(Label, {
4469
4482
  size: fontSize,
4470
4483
  children
4471
4484
  })
4472
4485
  }));
4473
4486
  });
4474
- const Root$x = styled(Box)(flexItemStyle, responsiveFlexStyle);
4475
- const Flex = forwardRef(function Flex2(props, ref) {
4487
+ const Root$x = styled__default.default(Box)(flexItemStyle, responsiveFlexStyle);
4488
+ const Flex = react.forwardRef(function Flex2(props, ref) {
4476
4489
  const {
4477
4490
  align,
4478
4491
  as,
@@ -4482,7 +4495,7 @@ const Flex = forwardRef(function Flex2(props, ref) {
4482
4495
  wrap
4483
4496
  } = props,
4484
4497
  restProps = _objectWithoutProperties(props, _excluded8);
4485
- return /* @__PURE__ */jsx(Root$x, _objectSpread(_objectSpread({
4498
+ return /* @__PURE__ */jsxRuntime.jsx(Root$x, _objectSpread(_objectSpread({
4486
4499
  "data-ui": "Flex"
4487
4500
  }, restProps), {}, {
4488
4501
  $align: useArrayProp(align),
@@ -4494,14 +4507,14 @@ const Flex = forwardRef(function Flex2(props, ref) {
4494
4507
  ref
4495
4508
  }));
4496
4509
  });
4497
- const rotate$1 = keyframes(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n"])));
4498
- const Root$w = styled(Text)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n & > span > svg {\n animation: ", " 500ms linear infinite;\n }\n"])), rotate$1);
4499
- const Spinner = forwardRef(function Spinner2(props, ref) {
4500
- return /* @__PURE__ */jsx(Root$w, _objectSpread(_objectSpread({
4510
+ const rotate$1 = styled.keyframes(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n"])));
4511
+ const Root$w = styled__default.default(Text)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n & > span > svg {\n animation: ", " 500ms linear infinite;\n }\n"])), rotate$1);
4512
+ const Spinner = react.forwardRef(function Spinner2(props, ref) {
4513
+ return /* @__PURE__ */jsxRuntime.jsx(Root$w, _objectSpread(_objectSpread({
4501
4514
  "data-ui": "Spinner"
4502
4515
  }, props), {}, {
4503
4516
  ref,
4504
- children: /* @__PURE__ */jsx(SpinnerIcon, {})
4517
+ children: /* @__PURE__ */jsxRuntime.jsx(icons.SpinnerIcon, {})
4505
4518
  }));
4506
4519
  });
4507
4520
  function _colorVarsStyle(base, color) {
@@ -4530,7 +4543,7 @@ function _colorVarsStyle(base, color) {
4530
4543
  };
4531
4544
  }
4532
4545
  function buttonBaseStyles() {
4533
- 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 "])));
4546
+ 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 "])));
4534
4547
  }
4535
4548
  const buttonTheme = {
4536
4549
  border: {
@@ -4577,9 +4590,9 @@ function buttonColorStyles(props) {
4577
4590
  }
4578
4591
  }, (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.button) == null ? void 0 : _b.root].filter(Boolean);
4579
4592
  }
4580
- const Root$v = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
4581
- 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"])));
4582
- const Button = forwardRef(function Button2(props, ref) {
4593
+ const Root$v = styled__default.default.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
4594
+ 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"])));
4595
+ const Button = react.forwardRef(function Button2(props, ref) {
4583
4596
  const {
4584
4597
  children,
4585
4598
  disabled,
@@ -4616,7 +4629,7 @@ const Button = forwardRef(function Button2(props, ref) {
4616
4629
  const radius = useArrayProp(radiusProp);
4617
4630
  const space = useArrayProp(spaceProp);
4618
4631
  const theme = useTheme();
4619
- const boxProps = useMemo(() => ({
4632
+ const boxProps = react.useMemo(() => ({
4620
4633
  padding,
4621
4634
  paddingX,
4622
4635
  paddingY,
@@ -4625,7 +4638,7 @@ const Button = forwardRef(function Button2(props, ref) {
4625
4638
  paddingLeft,
4626
4639
  paddingRight
4627
4640
  }), [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]);
4628
- return /* @__PURE__ */jsxs(Root$v, _objectSpread(_objectSpread({
4641
+ return /* @__PURE__ */jsxRuntime.jsxs(Root$v, _objectSpread(_objectSpread({
4629
4642
  "data-ui": "Button"
4630
4643
  }, restProps), {}, {
4631
4644
  $mode: mode,
@@ -4636,34 +4649,34 @@ const Button = forwardRef(function Button2(props, ref) {
4636
4649
  disabled: Boolean(loading || disabled),
4637
4650
  ref,
4638
4651
  type,
4639
- children: [Boolean(loading) && /* @__PURE__ */jsx(LoadingBox, {
4640
- children: /* @__PURE__ */jsx(Spinner, {})
4641
- }), (icon || text || iconRight) && /* @__PURE__ */jsx(Box, _objectSpread(_objectSpread({
4652
+ children: [Boolean(loading) && /* @__PURE__ */jsxRuntime.jsx(LoadingBox, {
4653
+ children: /* @__PURE__ */jsxRuntime.jsx(Spinner, {})
4654
+ }), (icon || text || iconRight) && /* @__PURE__ */jsxRuntime.jsx(Box, _objectSpread(_objectSpread({
4642
4655
  as: "span"
4643
4656
  }, boxProps), {}, {
4644
- children: /* @__PURE__ */jsxs(Flex, {
4657
+ children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
4645
4658
  as: "span",
4646
4659
  justify,
4647
- children: [icon && /* @__PURE__ */jsxs(Text, {
4660
+ children: [icon && /* @__PURE__ */jsxRuntime.jsxs(Text, {
4648
4661
  size: fontSize,
4649
- children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
4650
- }), text && /* @__PURE__ */jsx(Box, {
4662
+ children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
4663
+ }), text && /* @__PURE__ */jsxRuntime.jsx(Box, {
4651
4664
  flex: iconRight ? 1 : void 0,
4652
4665
  marginLeft: icon ? space : void 0,
4653
4666
  marginRight: iconRight ? space : void 0,
4654
- children: /* @__PURE__ */jsx(Text, {
4667
+ children: /* @__PURE__ */jsxRuntime.jsx(Text, {
4655
4668
  align: textAlign,
4656
4669
  size: fontSize,
4657
4670
  textOverflow: "ellipsis",
4658
4671
  weight: theme.sanity.button.textWeight,
4659
4672
  children: text
4660
4673
  })
4661
- }), iconRight && /* @__PURE__ */jsxs(Text, {
4674
+ }), iconRight && /* @__PURE__ */jsxRuntime.jsxs(Text, {
4662
4675
  size: fontSize,
4663
- children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
4676
+ children: [react.isValidElement(iconRight) && iconRight, ReactIs.isValidElementType(iconRight) && react.createElement(iconRight)]
4664
4677
  })]
4665
4678
  })
4666
- })), children && /* @__PURE__ */jsx(Box, _objectSpread(_objectSpread({
4679
+ })), children && /* @__PURE__ */jsxRuntime.jsx(Box, _objectSpread(_objectSpread({
4667
4680
  as: "span"
4668
4681
  }, boxProps), {}, {
4669
4682
  children
@@ -4679,7 +4692,7 @@ function cardBaseStyle(props) {
4679
4692
  theme
4680
4693
  } = props;
4681
4694
  const space = theme.sanity.space;
4682
- 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]));
4695
+ 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]));
4683
4696
  }
4684
4697
  function cardColorStyle(props) {
4685
4698
  var _a, _b;
@@ -4700,7 +4713,7 @@ function cardColorStyle(props) {
4700
4713
  width: 0,
4701
4714
  color: "var(--card-border-color)"
4702
4715
  };
4703
- 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({
4716
+ 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({
4704
4717
  base,
4705
4718
  border,
4706
4719
  focusRing
@@ -4710,8 +4723,8 @@ function cardColorStyle(props) {
4710
4723
  focusRing
4711
4724
  }) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.card) == null ? void 0 : _b.root);
4712
4725
  }
4713
- const Root$u = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
4714
- const Card = forwardRef(function Card2(props, ref) {
4726
+ const Root$u = styled__default.default(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
4727
+ const Card = react.forwardRef(function Card2(props, ref) {
4715
4728
  const {
4716
4729
  __unstable_checkered: checkered = false,
4717
4730
  __unstable_focusRing: focusRing = false,
@@ -4729,13 +4742,13 @@ const Card = forwardRef(function Card2(props, ref) {
4729
4742
  tone: toneProp = "default"
4730
4743
  } = props,
4731
4744
  restProps = _objectWithoutProperties(props, _excluded10);
4732
- const as = isValidElementType(asProp) ? asProp : "div";
4745
+ const as = ReactIs.isValidElementType(asProp) ? asProp : "div";
4733
4746
  const rootTheme = useRootTheme();
4734
4747
  const tone = toneProp === "inherit" ? rootTheme.tone : toneProp;
4735
- return /* @__PURE__ */jsx(ThemeColorProvider, {
4748
+ return /* @__PURE__ */jsxRuntime.jsx(ThemeColorProvider, {
4736
4749
  scheme,
4737
4750
  tone,
4738
- children: /* @__PURE__ */jsx(Root$u, _objectSpread(_objectSpread({
4751
+ children: /* @__PURE__ */jsxRuntime.jsx(Root$u, _objectSpread(_objectSpread({
4739
4752
  "data-as": typeof as === "string" ? as : void 0,
4740
4753
  "data-scheme": rootTheme.scheme,
4741
4754
  "data-ui": "Card",
@@ -4761,7 +4774,7 @@ const Card = forwardRef(function Card2(props, ref) {
4761
4774
  });
4762
4775
  });
4763
4776
  function checkboxBaseStyles() {
4764
- return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n "])));
4777
+ return styled.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n "])));
4765
4778
  }
4766
4779
  function inputElementStyles(props) {
4767
4780
  const {
@@ -4773,7 +4786,7 @@ function inputElementStyles(props) {
4773
4786
  input,
4774
4787
  radius
4775
4788
  } = theme.sanity;
4776
- 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({
4789
+ 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({
4777
4790
  color: color.default.enabled.border,
4778
4791
  width: input.border.width
4779
4792
  }), rem(radius[2]), color.default.enabled.bg, focusRingStyle({
@@ -4793,9 +4806,9 @@ function inputElementStyles(props) {
4793
4806
  color: color.default.disabled.border
4794
4807
  }), color.default.disabled.fg);
4795
4808
  }
4796
- const Root$t = styled.div(checkboxBaseStyles);
4797
- const Input$5 = styled.input(inputElementStyles);
4798
- const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
4809
+ const Root$t = styled__default.default.div(checkboxBaseStyles);
4810
+ const Input$5 = styled__default.default.input(inputElementStyles);
4811
+ const Checkbox = react.forwardRef(function Checkbox2(props, forwardedRef) {
4799
4812
  const {
4800
4813
  checked,
4801
4814
  className,
@@ -4808,16 +4821,16 @@ const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
4808
4821
  restProps = _objectWithoutProperties(props, _excluded11);
4809
4822
  const ref = useForwardedRef(forwardedRef);
4810
4823
  useCustomValidity(ref, customValidity);
4811
- useEffect(() => {
4824
+ react.useEffect(() => {
4812
4825
  if (ref.current) {
4813
4826
  ref.current.indeterminate = indeterminate || false;
4814
4827
  }
4815
4828
  }, [indeterminate, ref]);
4816
- return /* @__PURE__ */jsxs(Root$t, {
4829
+ return /* @__PURE__ */jsxRuntime.jsxs(Root$t, {
4817
4830
  className,
4818
4831
  "data-ui": "Checkbox",
4819
4832
  style,
4820
- children: [/* @__PURE__ */jsx(Input$5, _objectSpread(_objectSpread({
4833
+ children: [/* @__PURE__ */jsxRuntime.jsx(Input$5, _objectSpread(_objectSpread({
4821
4834
  "data-read-only": !disabled && readOnly ? "" : void 0
4822
4835
  }, restProps), {}, {
4823
4836
  checked,
@@ -4825,8 +4838,8 @@ const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
4825
4838
  type: "checkbox",
4826
4839
  readOnly,
4827
4840
  ref
4828
- })), /* @__PURE__ */jsxs("span", {
4829
- children: [/* @__PURE__ */jsx(CheckmarkIcon, {}), /* @__PURE__ */jsx(RemoveIcon, {})]
4841
+ })), /* @__PURE__ */jsxRuntime.jsxs("span", {
4842
+ children: [/* @__PURE__ */jsxRuntime.jsx(icons.CheckmarkIcon, {}), /* @__PURE__ */jsxRuntime.jsx(icons.RemoveIcon, {})]
4830
4843
  })]
4831
4844
  });
4832
4845
  });
@@ -4947,10 +4960,10 @@ function codeSyntaxHighlightingStyle(_ref20) {
4947
4960
  };
4948
4961
  }
4949
4962
  function codeBaseStyle() {
4950
- 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);
4963
+ 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);
4951
4964
  }
4952
- const Root$s = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
4953
- const Code = forwardRef(function Code2(props, ref) {
4965
+ const Root$s = styled__default.default.pre(codeBaseStyle, responsiveCodeFontStyle);
4966
+ const Code = react.forwardRef(function Code2(props, ref) {
4954
4967
  const {
4955
4968
  children,
4956
4969
  language: languageProp,
@@ -4959,16 +4972,16 @@ const Code = forwardRef(function Code2(props, ref) {
4959
4972
  } = props,
4960
4973
  restProps = _objectWithoutProperties(props, _excluded12);
4961
4974
  const language = typeof languageProp === "string" ? languageProp : void 0;
4962
- const registered = language ? Refractor.hasLanguage(language) : false;
4963
- return /* @__PURE__ */jsxs(Root$s, _objectSpread(_objectSpread({
4975
+ const registered = language ? Refractor__default.default.hasLanguage(language) : false;
4976
+ return /* @__PURE__ */jsxRuntime.jsxs(Root$s, _objectSpread(_objectSpread({
4964
4977
  "data-ui": "Code"
4965
4978
  }, restProps), {}, {
4966
4979
  $size: useArrayProp(size),
4967
4980
  $weight: weight,
4968
4981
  ref,
4969
- children: [!(language && registered) && /* @__PURE__ */jsx("code", {
4982
+ children: [!(language && registered) && /* @__PURE__ */jsxRuntime.jsx("code", {
4970
4983
  children
4971
- }), language && registered && /* @__PURE__ */jsx(Refractor, {
4984
+ }), language && registered && /* @__PURE__ */jsxRuntime.jsx(Refractor__default.default, {
4972
4985
  inline: true,
4973
4986
  language,
4974
4987
  value: String(children)
@@ -4994,14 +5007,14 @@ function responsiveContainerWidthStyle(props) {
4994
5007
  maxWidth: val === "auto" ? "none" : rem(container[val])
4995
5008
  }));
4996
5009
  }
4997
- const Root$r = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle);
4998
- const Container = forwardRef(function Container2(props, ref) {
5010
+ const Root$r = styled__default.default(Box)(containerBaseStyle, responsiveContainerWidthStyle);
5011
+ const Container = react.forwardRef(function Container2(props, ref) {
4999
5012
  const {
5000
5013
  as,
5001
5014
  width = 2
5002
5015
  } = props,
5003
5016
  restProps = _objectWithoutProperties(props, _excluded13);
5004
- return /* @__PURE__ */jsx(Root$r, _objectSpread(_objectSpread({
5017
+ return /* @__PURE__ */jsxRuntime.jsx(Root$r, _objectSpread(_objectSpread({
5005
5018
  "data-ui": "Container"
5006
5019
  }, restProps), {}, {
5007
5020
  $width: useArrayProp(width),
@@ -5009,8 +5022,8 @@ const Container = forwardRef(function Container2(props, ref) {
5009
5022
  ref
5010
5023
  }));
5011
5024
  });
5012
- const Root$q = styled(Box)(responsiveGridStyle);
5013
- const Grid = forwardRef(function Grid2(props, ref) {
5025
+ const Root$q = styled__default.default(Box)(responsiveGridStyle);
5026
+ const Grid = react.forwardRef(function Grid2(props, ref) {
5014
5027
  const {
5015
5028
  as,
5016
5029
  autoRows,
@@ -5024,7 +5037,7 @@ const Grid = forwardRef(function Grid2(props, ref) {
5024
5037
  children
5025
5038
  } = props,
5026
5039
  restProps = _objectWithoutProperties(props, _excluded14);
5027
- return /* @__PURE__ */jsx(Root$q, _objectSpread(_objectSpread({
5040
+ return /* @__PURE__ */jsxRuntime.jsx(Root$q, _objectSpread(_objectSpread({
5028
5041
  "data-as": typeof as === "string" ? as : void 0,
5029
5042
  "data-ui": "Grid"
5030
5043
  }, restProps), {}, {
@@ -5047,11 +5060,11 @@ function headingBaseStyle(props) {
5047
5060
  $muted,
5048
5061
  theme
5049
5062
  } = props;
5050
- 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);
5063
+ 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);
5051
5064
  }
5052
- const Root$p = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
5053
- const SpanWithTextOverflow = styled.span(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
5054
- const Heading = forwardRef(function Heading2(props, ref) {
5065
+ const Root$p = styled__default.default.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
5066
+ const SpanWithTextOverflow = styled__default.default.span(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
5067
+ const Heading = react.forwardRef(function Heading2(props, ref) {
5055
5068
  const {
5056
5069
  accent = false,
5057
5070
  align,
@@ -5064,11 +5077,11 @@ const Heading = forwardRef(function Heading2(props, ref) {
5064
5077
  restProps = _objectWithoutProperties(props, _excluded15);
5065
5078
  let children = childrenProp;
5066
5079
  if (textOverflow === "ellipsis") {
5067
- children = /* @__PURE__ */jsx(SpanWithTextOverflow, {
5080
+ children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow, {
5068
5081
  children
5069
5082
  });
5070
5083
  }
5071
- return /* @__PURE__ */jsx(Root$p, _objectSpread(_objectSpread({
5084
+ return /* @__PURE__ */jsxRuntime.jsx(Root$p, _objectSpread(_objectSpread({
5072
5085
  "data-ui": "Heading"
5073
5086
  }, restProps), {}, {
5074
5087
  $accent: accent,
@@ -5077,7 +5090,7 @@ const Heading = forwardRef(function Heading2(props, ref) {
5077
5090
  $size: useArrayProp(size),
5078
5091
  $weight: weight,
5079
5092
  ref,
5080
- children: /* @__PURE__ */jsx("span", {
5093
+ children: /* @__PURE__ */jsxRuntime.jsx("span", {
5081
5094
  children
5082
5095
  })
5083
5096
  }));
@@ -5108,18 +5121,18 @@ function inlineSpaceStyle(props) {
5108
5121
  };
5109
5122
  });
5110
5123
  }
5111
- const Root$o = styled(Box)(inlineBaseStyle, inlineSpaceStyle);
5112
- const Inline = forwardRef(function Inline2(props, ref) {
5124
+ const Root$o = styled__default.default(Box)(inlineBaseStyle, inlineSpaceStyle);
5125
+ const Inline = react.forwardRef(function Inline2(props, ref) {
5113
5126
  const {
5114
5127
  as,
5115
5128
  children: childrenProp,
5116
5129
  space
5117
5130
  } = props,
5118
5131
  restProps = _objectWithoutProperties(props, _excluded16);
5119
- const children = useMemo(() => childrenToElementArray(childrenProp).filter(Boolean).map((child, idx) => /* @__PURE__ */jsx("div", {
5132
+ const children = react.useMemo(() => childrenToElementArray(childrenProp).filter(Boolean).map((child, idx) => /* @__PURE__ */jsxRuntime.jsx("div", {
5120
5133
  children: child
5121
5134
  }, idx)), [childrenProp]);
5122
- return /* @__PURE__ */jsx(Root$o, _objectSpread(_objectSpread({
5135
+ return /* @__PURE__ */jsxRuntime.jsx(Root$o, _objectSpread(_objectSpread({
5123
5136
  "data-ui": "Inline"
5124
5137
  }, restProps), {}, {
5125
5138
  $space: useArrayProp(space),
@@ -5129,10 +5142,10 @@ const Inline = forwardRef(function Inline2(props, ref) {
5129
5142
  }));
5130
5143
  });
5131
5144
  function kbdStyle() {
5132
- 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 "])));
5145
+ 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 "])));
5133
5146
  }
5134
- const Root$n = styled.kbd(responsiveRadiusStyle, kbdStyle);
5135
- const KBD = forwardRef(function KBD2(props, ref) {
5147
+ const Root$n = styled__default.default.kbd(responsiveRadiusStyle, kbdStyle);
5148
+ const KBD = react.forwardRef(function KBD2(props, ref) {
5136
5149
  const {
5137
5150
  children,
5138
5151
  fontSize = 1,
@@ -5140,15 +5153,15 @@ const KBD = forwardRef(function KBD2(props, ref) {
5140
5153
  radius = 2
5141
5154
  } = props,
5142
5155
  restProps = _objectWithoutProperties(props, _excluded17);
5143
- return /* @__PURE__ */jsx(Root$n, _objectSpread(_objectSpread({
5156
+ return /* @__PURE__ */jsxRuntime.jsx(Root$n, _objectSpread(_objectSpread({
5144
5157
  "data-ui": "KBD"
5145
5158
  }, restProps), {}, {
5146
5159
  $radius: useArrayProp(radius),
5147
5160
  ref,
5148
- children: /* @__PURE__ */jsx(Box, {
5161
+ children: /* @__PURE__ */jsxRuntime.jsx(Box, {
5149
5162
  as: "span",
5150
5163
  padding,
5151
- children: /* @__PURE__ */jsx(Code, {
5164
+ children: /* @__PURE__ */jsxRuntime.jsx(Code, {
5152
5165
  as: "span",
5153
5166
  muted: true,
5154
5167
  size: fontSize,
@@ -5158,18 +5171,18 @@ const KBD = forwardRef(function KBD2(props, ref) {
5158
5171
  }));
5159
5172
  });
5160
5173
  const key$6 = Symbol.for("@sanity/ui/context/boundaryElement");
5161
- globalScope[key$6] = globalScope[key$6] || createContext(null);
5174
+ globalScope[key$6] = globalScope[key$6] || react.createContext(null);
5162
5175
  const BoundaryElementContext = globalScope[key$6];
5163
5176
  function BoundaryElementProvider(props) {
5164
5177
  const {
5165
5178
  children,
5166
5179
  element
5167
5180
  } = props;
5168
- const value = useMemo(() => ({
5181
+ const value = react.useMemo(() => ({
5169
5182
  version: 0,
5170
5183
  element
5171
5184
  }), [element]);
5172
- return /* @__PURE__ */jsx(BoundaryElementContext.Provider, {
5185
+ return /* @__PURE__ */jsxRuntime.jsx(BoundaryElementContext.Provider, {
5173
5186
  value,
5174
5187
  children
5175
5188
  });
@@ -5179,7 +5192,7 @@ const DEFAULT_VALUE = {
5179
5192
  element: null
5180
5193
  };
5181
5194
  function useBoundaryElement() {
5182
- const value = useContext(BoundaryElementContext);
5195
+ const value = react.useContext(BoundaryElementContext);
5183
5196
  if (value && (!isRecord(value) || value.version !== 0)) {
5184
5197
  throw new Error("useBoundaryElement(): the context value is not compatible");
5185
5198
  }
@@ -5205,7 +5218,7 @@ function findMinBreakpoints(media, width) {
5205
5218
  }
5206
5219
  return ret;
5207
5220
  }
5208
- const ElementQuery = forwardRef(function ElementQuery2(props, ref) {
5221
+ const ElementQuery = react.forwardRef(function ElementQuery2(props, ref) {
5209
5222
  const theme = useTheme();
5210
5223
  const {
5211
5224
  children,
@@ -5213,19 +5226,19 @@ const ElementQuery = forwardRef(function ElementQuery2(props, ref) {
5213
5226
  } = props,
5214
5227
  restProps = _objectWithoutProperties(props, _excluded18);
5215
5228
  const forwardedRef = useForwardedRef(ref);
5216
- const [element, setElement] = useState(null);
5229
+ const [element, setElement] = react.useState(null);
5217
5230
  const elementSize = useElementSize(element);
5218
- const width = useMemo(() => {
5231
+ const width = react.useMemo(() => {
5219
5232
  var _a;
5220
5233
  return (_a = elementSize == null ? void 0 : elementSize.border.width) != null ? _a : window.innerWidth;
5221
5234
  }, [elementSize]);
5222
- const max = useMemo(() => findMaxBreakpoints(media, width), [media, width]);
5223
- const min = useMemo(() => findMinBreakpoints(media, width), [media, width]);
5224
- const setRef = useCallback(el => {
5235
+ const max = react.useMemo(() => findMaxBreakpoints(media, width), [media, width]);
5236
+ const min = react.useMemo(() => findMinBreakpoints(media, width), [media, width]);
5237
+ const setRef = react.useCallback(el => {
5225
5238
  forwardedRef.current = el;
5226
5239
  setElement(el);
5227
5240
  }, [forwardedRef]);
5228
- return /* @__PURE__ */jsx("div", _objectSpread(_objectSpread({
5241
+ return /* @__PURE__ */jsxRuntime.jsx("div", _objectSpread(_objectSpread({
5229
5242
  "data-ui": "ElementQuery"
5230
5243
  }, restProps), {}, {
5231
5244
  "data-eq-max": max.length ? max.join(" ") : void 0,
@@ -5234,7 +5247,7 @@ const ElementQuery = forwardRef(function ElementQuery2(props, ref) {
5234
5247
  children
5235
5248
  }));
5236
5249
  });
5237
- class ErrorBoundary extends Component {
5250
+ class ErrorBoundary extends react.Component {
5238
5251
  constructor() {
5239
5252
  super(...arguments);
5240
5253
  this.state = {
@@ -5258,7 +5271,7 @@ class ErrorBoundary extends Component {
5258
5271
  } = this.state;
5259
5272
  if (error) {
5260
5273
  const message = typeof (error == null ? void 0 : error.message) === "string" ? error.message : "Error";
5261
- return /* @__PURE__ */jsx(Code, {
5274
+ return /* @__PURE__ */jsxRuntime.jsx(Code, {
5262
5275
  children: message
5263
5276
  });
5264
5277
  }
@@ -5266,10 +5279,10 @@ class ErrorBoundary extends Component {
5266
5279
  }
5267
5280
  }
5268
5281
  const key$5 = Symbol.for("@sanity/ui/context/layer");
5269
- globalScope[key$5] = globalScope[key$5] || createContext(null);
5282
+ globalScope[key$5] = globalScope[key$5] || react.createContext(null);
5270
5283
  const LayerContext = globalScope[key$5];
5271
5284
  function useLayer() {
5272
- const value = useContext(LayerContext);
5285
+ const value = react.useContext(LayerContext);
5273
5286
  if (!value) {
5274
5287
  throw new Error("useLayer(): missing context value");
5275
5288
  }
@@ -5283,35 +5296,35 @@ function LayerProvider(props) {
5283
5296
  children,
5284
5297
  zOffset: zOffsetProp = 0
5285
5298
  } = props;
5286
- const parent = useContext(LayerContext);
5299
+ const parent = react.useContext(LayerContext);
5287
5300
  const zOffset = useArrayProp(zOffsetProp);
5288
5301
  const maxMediaIndex = zOffset.length - 1;
5289
5302
  const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex);
5290
5303
  const zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex];
5291
- const [size, setSize] = useState(0);
5292
- const registerChild = useCallback(() => {
5304
+ const [size, setSize] = react.useState(0);
5305
+ const registerChild = react.useCallback(() => {
5293
5306
  setSize(v => v + 1);
5294
5307
  return () => setSize(v => v - 1);
5295
5308
  }, []);
5296
5309
  const parentRegisterChild = parent == null ? void 0 : parent.registerChild;
5297
- useEffect(() => {
5310
+ react.useEffect(() => {
5298
5311
  if (!parentRegisterChild) return;
5299
5312
  return parentRegisterChild();
5300
5313
  }, [parentRegisterChild]);
5301
- const value = useMemo(() => ({
5314
+ const value = react.useMemo(() => ({
5302
5315
  version: 0,
5303
5316
  isTopLayer: size === 0,
5304
5317
  registerChild,
5305
5318
  size,
5306
5319
  zIndex
5307
5320
  }), [size, registerChild, zIndex]);
5308
- return /* @__PURE__ */jsx(LayerContext.Provider, {
5321
+ return /* @__PURE__ */jsxRuntime.jsx(LayerContext.Provider, {
5309
5322
  value,
5310
5323
  children
5311
5324
  });
5312
5325
  }
5313
- const Root$m = styled.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n position: relative;\n"])));
5314
- const LayerChildren = forwardRef(function LayerChildren2(props, ref) {
5326
+ const Root$m = styled__default.default.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n position: relative;\n"])));
5327
+ const LayerChildren = react.forwardRef(function LayerChildren2(props, ref) {
5315
5328
  const {
5316
5329
  children,
5317
5330
  style = EMPTY_RECORD
@@ -5320,7 +5333,7 @@ const LayerChildren = forwardRef(function LayerChildren2(props, ref) {
5320
5333
  const {
5321
5334
  zIndex
5322
5335
  } = useLayer();
5323
- return /* @__PURE__ */jsx(Root$m, _objectSpread(_objectSpread({}, restProps), {}, {
5336
+ return /* @__PURE__ */jsxRuntime.jsx(Root$m, _objectSpread(_objectSpread({}, restProps), {}, {
5324
5337
  "data-ui": "Layer",
5325
5338
  ref,
5326
5339
  style: _objectSpread(_objectSpread({}, style), {}, {
@@ -5329,15 +5342,15 @@ const LayerChildren = forwardRef(function LayerChildren2(props, ref) {
5329
5342
  children
5330
5343
  }));
5331
5344
  });
5332
- const Layer = forwardRef(function Layer2(props, ref) {
5345
+ const Layer = react.forwardRef(function Layer2(props, ref) {
5333
5346
  const {
5334
5347
  children,
5335
5348
  zOffset = 1
5336
5349
  } = props,
5337
5350
  restProps = _objectWithoutProperties(props, _excluded20);
5338
- return /* @__PURE__ */jsx(LayerProvider, {
5351
+ return /* @__PURE__ */jsxRuntime.jsx(LayerProvider, {
5339
5352
  zOffset,
5340
- children: /* @__PURE__ */jsx(LayerChildren, _objectSpread(_objectSpread({}, restProps), {}, {
5353
+ children: /* @__PURE__ */jsxRuntime.jsx(LayerChildren, _objectSpread(_objectSpread({}, restProps), {}, {
5341
5354
  ref,
5342
5355
  children
5343
5356
  }))
@@ -5362,10 +5375,10 @@ const defaultContextValue = {
5362
5375
  return globalScope[elementKey];
5363
5376
  }
5364
5377
  };
5365
- globalScope[key$4] = globalScope[key$4] || createContext(defaultContextValue);
5378
+ globalScope[key$4] = globalScope[key$4] || react.createContext(defaultContextValue);
5366
5379
  const PortalContext = globalScope[key$4];
5367
5380
  function usePortal() {
5368
- const value = useContext(PortalContext);
5381
+ const value = react.useContext(PortalContext);
5369
5382
  if (!value) {
5370
5383
  throw new Error("usePortal(): missing context value");
5371
5384
  }
@@ -5385,10 +5398,10 @@ function Portal(props) {
5385
5398
  if (!portalElement) {
5386
5399
  return null;
5387
5400
  }
5388
- return createPortal(children, portalElement);
5401
+ return reactDom.createPortal(children, portalElement);
5389
5402
  }
5390
5403
  function useUnique(value) {
5391
- const valueRef = useRef(value);
5404
+ const valueRef = react.useRef(value);
5392
5405
  if (!_isEqual(valueRef.current, value)) {
5393
5406
  valueRef.current = value;
5394
5407
  }
@@ -5414,7 +5427,7 @@ function PortalProvider(props) {
5414
5427
  __unstable_elements: elementsProp
5415
5428
  } = props;
5416
5429
  const elements = useUnique(elementsProp);
5417
- const value = useMemo(() => {
5430
+ const value = react.useMemo(() => {
5418
5431
  return {
5419
5432
  version: 0,
5420
5433
  boundaryElement: boundaryElement || null,
@@ -5422,18 +5435,18 @@ function PortalProvider(props) {
5422
5435
  elements
5423
5436
  };
5424
5437
  }, [boundaryElement, element, elements]);
5425
- return /* @__PURE__ */jsx(PortalContext.Provider, {
5438
+ return /* @__PURE__ */jsxRuntime.jsx(PortalContext.Provider, {
5426
5439
  value,
5427
5440
  children
5428
5441
  });
5429
5442
  }
5430
- const Root$l = styled.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n display: block;\n width: 0;\n height: 0;\n position: absolute;\n overflow: hidden;\n"])));
5431
- const SrOnly = forwardRef(function SrOnly2(props, ref) {
5443
+ 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"])));
5444
+ const SrOnly = react.forwardRef(function SrOnly2(props, ref) {
5432
5445
  const {
5433
5446
  as,
5434
5447
  children
5435
5448
  } = props;
5436
- return /* @__PURE__ */jsx(Root$l, {
5449
+ return /* @__PURE__ */jsxRuntime.jsx(Root$l, {
5437
5450
  "aria-hidden": true,
5438
5451
  as,
5439
5452
  "data-ui": "SrOnly",
@@ -5528,9 +5541,9 @@ function _isScrollable(el) {
5528
5541
  const style = window.getComputedStyle(el);
5529
5542
  return style.overflowX.includes("auto") || style.overflowX.includes("scroll") || style.overflowY.includes("auto") || style.overflowY.includes("scroll");
5530
5543
  }
5531
- const Root$k = styled.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n position: relative;\n"])));
5532
- const ItemWrapper = styled.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n"])));
5533
- const VirtualList = forwardRef(function VirtualList2(props, ref) {
5544
+ const Root$k = styled__default.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n position: relative;\n"])));
5545
+ const ItemWrapper = styled__default.default.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n"])));
5546
+ const VirtualList = react.forwardRef(function VirtualList2(props, ref) {
5534
5547
  const {
5535
5548
  as = "div",
5536
5549
  gap = 0,
@@ -5544,18 +5557,18 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
5544
5557
  space
5545
5558
  } = useTheme().sanity;
5546
5559
  const forwardedRef = useForwardedRef(ref);
5547
- const wrapperRef = useRef(null);
5548
- const [scrollTop, setScrollTop] = useState(0);
5549
- const [scrollHeight, setScrollHeight] = useState(0);
5550
- const [itemHeight, setItemHeight] = useState(-1);
5551
- useEffect(() => {
5560
+ const wrapperRef = react.useRef(null);
5561
+ const [scrollTop, setScrollTop] = react.useState(0);
5562
+ const [scrollHeight, setScrollHeight] = react.useState(0);
5563
+ const [itemHeight, setItemHeight] = react.useState(-1);
5564
+ react.useEffect(() => {
5552
5565
  if (!wrapperRef.current) return;
5553
5566
  const firstElement = wrapperRef.current.firstChild;
5554
5567
  if (firstElement instanceof HTMLElement) {
5555
5568
  setItemHeight(firstElement.offsetHeight);
5556
5569
  }
5557
5570
  }, [renderItem]);
5558
- useEffect(() => {
5571
+ react.useEffect(() => {
5559
5572
  if (!forwardedRef.current) return;
5560
5573
  let _scrollEl = forwardedRef.current.parentNode;
5561
5574
  while (_scrollEl && !_isScrollable(_scrollEl)) {
@@ -5602,7 +5615,7 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
5602
5615
  const height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0;
5603
5616
  const fromIndex = height ? Math.max(Math.floor(scrollTop / height * len) - 2, 0) : 0;
5604
5617
  const toIndex = height ? Math.ceil((scrollTop + scrollHeight) / height * len) + 1 : 0;
5605
- useEffect(() => {
5618
+ react.useEffect(() => {
5606
5619
  if (!onChange) return;
5607
5620
  onChange({
5608
5621
  fromIndex,
@@ -5613,10 +5626,10 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
5613
5626
  toIndex
5614
5627
  });
5615
5628
  }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex]);
5616
- const children = useMemo(() => {
5629
+ const children = react.useMemo(() => {
5617
5630
  if (!renderItem || items.length === 0) return null;
5618
5631
  if (itemHeight === -1) {
5619
- return [/* @__PURE__ */jsx(ItemWrapper, {
5632
+ return [/* @__PURE__ */jsxRuntime.jsx(ItemWrapper, {
5620
5633
  children: renderItem(items[0])
5621
5634
  }, 0)];
5622
5635
  }
@@ -5624,7 +5637,7 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
5624
5637
  const itemIndex = fromIndex + _itemIndex;
5625
5638
  const node = renderItem(item);
5626
5639
  const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
5627
- return /* @__PURE__ */jsx(ItemWrapper, {
5640
+ return /* @__PURE__ */jsxRuntime.jsx(ItemWrapper, {
5628
5641
  style: {
5629
5642
  top: itemIndex * (itemHeight + space[gap])
5630
5643
  },
@@ -5632,15 +5645,15 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
5632
5645
  }, key);
5633
5646
  });
5634
5647
  }, [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex]);
5635
- const wrapperStyle = useMemo(() => ({
5648
+ const wrapperStyle = react.useMemo(() => ({
5636
5649
  height
5637
5650
  }), [height]);
5638
- return /* @__PURE__ */jsx(Root$k, _objectSpread(_objectSpread({
5651
+ return /* @__PURE__ */jsxRuntime.jsx(Root$k, _objectSpread(_objectSpread({
5639
5652
  as,
5640
5653
  "data-ui": "VirtualList"
5641
5654
  }, restProps), {}, {
5642
5655
  ref: forwardedRef,
5643
- children: /* @__PURE__ */jsx("div", {
5656
+ children: /* @__PURE__ */jsxRuntime.jsx("div", {
5644
5657
  ref: wrapperRef,
5645
5658
  style: wrapperStyle,
5646
5659
  children
@@ -5671,7 +5684,7 @@ function size(options) {
5671
5684
  floating,
5672
5685
  reference
5673
5686
  } = rects;
5674
- const overflow = await detectOverflow(args, {
5687
+ const overflow = await reactDom$1.detectOverflow(args, {
5675
5688
  altBoundary: true,
5676
5689
  boundary: options.boundaryElement || void 0,
5677
5690
  elementContext: "floating",
@@ -5718,23 +5731,23 @@ function size(options) {
5718
5731
  }
5719
5732
  };
5720
5733
  }
5721
- 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);
5722
- const BorderPath = styled.path(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n fill: var(--card-shadow-outline-color);\n"])));
5723
- const ShapePath = styled.path(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n fill: var(--card-bg-color);\n"])));
5724
- const PopoverArrow = forwardRef(function PopoverArrow2(props, ref) {
5725
- return /* @__PURE__ */jsx(Root$j, _objectSpread(_objectSpread({
5734
+ 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);
5735
+ const BorderPath = styled__default.default.path(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n fill: var(--card-shadow-outline-color);\n"])));
5736
+ const ShapePath = styled__default.default.path(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n fill: var(--card-bg-color);\n"])));
5737
+ const PopoverArrow = react.forwardRef(function PopoverArrow2(props, ref) {
5738
+ return /* @__PURE__ */jsxRuntime.jsx(Root$j, _objectSpread(_objectSpread({
5726
5739
  "data-ui": "Popover__arrow"
5727
5740
  }, props), {}, {
5728
5741
  ref,
5729
- children: /* @__PURE__ */jsxs("svg", {
5742
+ children: /* @__PURE__ */jsxRuntime.jsxs("svg", {
5730
5743
  width: DEFAULT_POPOVER_ARROW_WIDTH,
5731
5744
  height: DEFAULT_POPOVER_ARROW_HEIGHT,
5732
5745
  viewBox: "0 0 27 11",
5733
5746
  fill: "none",
5734
5747
  xmlns: "http://www.w3.org/2000/svg",
5735
- children: [/* @__PURE__ */jsx(BorderPath, {
5748
+ children: [/* @__PURE__ */jsxRuntime.jsx(BorderPath, {
5736
5749
  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"
5737
- }), /* @__PURE__ */jsx(ShapePath, {
5750
+ }), /* @__PURE__ */jsxRuntime.jsx(ShapePath, {
5738
5751
  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"
5739
5752
  })]
5740
5753
  })
@@ -5754,9 +5767,9 @@ function popoverCardStyle(props) {
5754
5767
  maxWidth: typeof $boundaryWidth === "number" ? "".concat($boundaryWidth - DEFAULT_POPOVER_PADDING * 2, "px") : void 0
5755
5768
  };
5756
5769
  }
5757
- const Root$i = memo(styled(Card)(popoverCardStyle));
5758
- const PopoverContainer = memo(styled(Container)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n max-height: inherit;\n max-width: inherit;\n"]))));
5759
- const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
5770
+ const Root$i = react.memo(styled__default.default(Card)(popoverCardStyle));
5771
+ const PopoverContainer = react.memo(styled__default.default(Container)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n max-height: inherit;\n max-width: inherit;\n"]))));
5772
+ const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref) {
5760
5773
  const {
5761
5774
  __unstable_margins: marginsProp,
5762
5775
  arrow,
@@ -5782,17 +5795,17 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
5782
5795
  const {
5783
5796
  zIndex
5784
5797
  } = useLayer();
5785
- const margins = useMemo(() => marginsProp || DEFAULT_POPOVER_MARGINS, [marginsProp]);
5798
+ const margins = react.useMemo(() => marginsProp || DEFAULT_POPOVER_MARGINS, [marginsProp]);
5786
5799
  const x = (xProp != null ? xProp : 0) + margins[3];
5787
5800
  const y = (yProp != null ? yProp : 0) + margins[0];
5788
- const rootStyle = useMemo(() => _objectSpread({
5801
+ const rootStyle = react.useMemo(() => _objectSpread({
5789
5802
  position: strategy,
5790
5803
  top: y,
5791
5804
  left: x,
5792
5805
  zIndex
5793
5806
  }, style), [strategy, style, x, y, zIndex]);
5794
5807
  const staticSide = placement && FLOATING_STATIC_SIDES[placement.split("-")[0]];
5795
- const arrowStyle = useMemo(() => {
5808
+ const arrowStyle = react.useMemo(() => {
5796
5809
  const style2 = {
5797
5810
  left: arrowX !== null ? arrowX : void 0,
5798
5811
  top: arrowY !== null ? arrowY : void 0,
@@ -5802,7 +5815,7 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
5802
5815
  if (staticSide) style2[staticSide] = 0 - DEFAULT_POPOVER_ARROW_WIDTH;
5803
5816
  return style2;
5804
5817
  }, [arrowX, arrowY, staticSide]);
5805
- return /* @__PURE__ */jsxs(Root$i, _objectSpread(_objectSpread({}, restProps), {}, {
5818
+ return /* @__PURE__ */jsxRuntime.jsxs(Root$i, _objectSpread(_objectSpread({}, restProps), {}, {
5806
5819
  $boundaryWidth: boundaryWidth,
5807
5820
  "data-placement": placement,
5808
5821
  "data-ui": "Popover",
@@ -5813,7 +5826,7 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
5813
5826
  sizing: "border",
5814
5827
  style: rootStyle,
5815
5828
  tone,
5816
- children: [/* @__PURE__ */jsx(PopoverContainer, {
5829
+ children: [/* @__PURE__ */jsxRuntime.jsx(PopoverContainer, {
5817
5830
  "data-ui": "Popover__wrapper",
5818
5831
  flex: 1,
5819
5832
  overflow,
@@ -5821,14 +5834,14 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
5821
5834
  sizing: "border",
5822
5835
  width,
5823
5836
  children
5824
- }), arrow && /* @__PURE__ */jsx(PopoverArrow, {
5837
+ }), arrow && /* @__PURE__ */jsxRuntime.jsx(PopoverArrow, {
5825
5838
  ref: arrowRef,
5826
5839
  style: arrowStyle
5827
5840
  })]
5828
5841
  }));
5829
5842
  }));
5830
5843
  PopoverCard.displayName = "PopoverCard";
5831
- const Popover = memo(forwardRef(function Popover2(props, ref) {
5844
+ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
5832
5845
  var _a, _b, _c, _d, _e;
5833
5846
  const theme = useTheme();
5834
5847
  const boundaryElementContext = useBoundaryElement();
@@ -5864,19 +5877,19 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
5864
5877
  const width = useArrayProp(widthProp);
5865
5878
  const zOffset = useArrayProp(zOffsetProp);
5866
5879
  const forwardedRef = useForwardedRef(ref);
5867
- const arrowRef = useRef(null);
5880
+ const arrowRef = react.useRef(null);
5868
5881
  const rootBoundary = "viewport";
5869
- const middleware = useMemo(() => {
5882
+ const middleware = react.useMemo(() => {
5870
5883
  const ret = [];
5871
5884
  if (constrainSize || preventOverflow) {
5872
- ret.push(flip({
5885
+ ret.push(reactDom$1.flip({
5873
5886
  boundary: boundaryElement || void 0,
5874
5887
  fallbackPlacements,
5875
5888
  padding: DEFAULT_POPOVER_PADDING,
5876
5889
  rootBoundary
5877
5890
  }));
5878
5891
  }
5879
- ret.push(offset({
5892
+ ret.push(reactDom$1.offset({
5880
5893
  mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0
5881
5894
  }));
5882
5895
  if (constrainSize || matchReferenceWidthProp) {
@@ -5904,29 +5917,29 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
5904
5917
  }));
5905
5918
  }
5906
5919
  if (preventOverflow) {
5907
- ret.push(shift({
5920
+ ret.push(reactDom$1.shift({
5908
5921
  boundary: boundaryElement || void 0,
5909
5922
  rootBoundary,
5910
5923
  padding: DEFAULT_POPOVER_PADDING
5911
5924
  }));
5912
5925
  }
5913
5926
  if (arrowProp) {
5914
- ret.push(arrow({
5927
+ ret.push(reactDom$1.arrow({
5915
5928
  element: arrowRef,
5916
5929
  padding: DEFAULT_POPOVER_PADDING
5917
5930
  }));
5918
5931
  }
5919
- ret.push(hide({
5932
+ ret.push(reactDom$1.hide({
5920
5933
  boundary: boundaryElement || void 0,
5921
5934
  padding: DEFAULT_POPOVER_PADDING,
5922
5935
  strategy: "referenceHidden"
5923
5936
  }));
5924
5937
  return ret;
5925
5938
  }, [arrowProp, boundaryElement, constrainSize, fallbackPlacements, margins, matchReferenceWidthProp, preventOverflow]);
5926
- const floatingProps = useMemo(() => ({
5939
+ const floatingProps = react.useMemo(() => ({
5927
5940
  middleware,
5928
5941
  placement: placementProp,
5929
- whileElementsMounted: autoUpdate
5942
+ whileElementsMounted: reactDom$1.autoUpdate
5930
5943
  }), [middleware, placementProp]);
5931
5944
  const {
5932
5945
  x,
@@ -5936,18 +5949,18 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
5936
5949
  floating: floatingRef,
5937
5950
  middlewareData,
5938
5951
  strategy
5939
- } = useFloating(floatingProps);
5952
+ } = reactDom$1.useFloating(floatingProps);
5940
5953
  const referenceHidden = (_c = middlewareData.hide) == null ? void 0 : _c.referenceHidden;
5941
5954
  const arrowX = (_d = middlewareData.arrow) == null ? void 0 : _d.x;
5942
5955
  const arrowY = (_e = middlewareData.arrow) == null ? void 0 : _e.y;
5943
- const setArrow = useCallback(arrowEl => {
5956
+ const setArrow = react.useCallback(arrowEl => {
5944
5957
  arrowRef.current = arrowEl;
5945
5958
  }, []);
5946
- const setFloating = useCallback(node => {
5959
+ const setFloating = react.useCallback(node => {
5947
5960
  forwardedRef.current = node;
5948
5961
  floatingRef(node);
5949
5962
  }, [floatingRef, forwardedRef]);
5950
- const setReference = useCallback(node => {
5963
+ const setReference = react.useCallback(node => {
5951
5964
  referenceRef(node);
5952
5965
  const childRef = childProp == null ? void 0 : childProp.ref;
5953
5966
  if (typeof childRef === "function") {
@@ -5956,21 +5969,21 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
5956
5969
  childRef.current = node;
5957
5970
  }
5958
5971
  }, [childProp, referenceRef]);
5959
- const child = useMemo(() => {
5972
+ const child = react.useMemo(() => {
5960
5973
  if (!childProp || referenceElement) return null;
5961
- return cloneElement(childProp, {
5974
+ return react.cloneElement(childProp, {
5962
5975
  ref: setReference
5963
5976
  });
5964
5977
  }, [childProp, referenceElement, setReference]);
5965
- useEffect(() => {
5978
+ react.useEffect(() => {
5966
5979
  referenceRef(referenceElement || null);
5967
5980
  }, [referenceRef, referenceElement]);
5968
5981
  if (disabled) {
5969
- return childProp || /* @__PURE__ */jsx(Fragment, {});
5982
+ return childProp || /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {});
5970
5983
  }
5971
- const popover = /* @__PURE__ */jsx(LayerProvider, {
5984
+ const popover = /* @__PURE__ */jsxRuntime.jsx(LayerProvider, {
5972
5985
  zOffset,
5973
- children: /* @__PURE__ */jsx(PopoverCard, _objectSpread(_objectSpread({}, restProps), {}, {
5986
+ children: /* @__PURE__ */jsxRuntime.jsx(PopoverCard, _objectSpread(_objectSpread({}, restProps), {}, {
5974
5987
  __unstable_margins: margins,
5975
5988
  arrow: arrowProp,
5976
5989
  arrowRef: setArrow,
@@ -5993,9 +6006,9 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
5993
6006
  children: content
5994
6007
  }))
5995
6008
  });
5996
- return /* @__PURE__ */jsxs(Fragment, {
5997
- children: [open && /* @__PURE__ */jsx(Fragment, {
5998
- children: portal ? /* @__PURE__ */jsx(Portal, {
6009
+ return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
6010
+ children: [open && /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
6011
+ children: portal ? /* @__PURE__ */jsxRuntime.jsx(Portal, {
5999
6012
  __unstable_name: typeof portal === "string" ? portal : void 0,
6000
6013
  children: popover
6001
6014
  }) : popover
@@ -6004,7 +6017,7 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
6004
6017
  }));
6005
6018
  Popover.displayName = "Popover";
6006
6019
  function radioBaseStyle() {
6007
- 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 "])));
6020
+ 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 "])));
6008
6021
  }
6009
6022
  function inputElementStyle(props) {
6010
6023
  const {
@@ -6016,7 +6029,7 @@ function inputElementStyle(props) {
6016
6029
  } = theme.sanity;
6017
6030
  const color = theme.sanity.color.input;
6018
6031
  const dist = (input.radio.size - input.radio.markSize) / 2;
6019
- 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({
6032
+ 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({
6020
6033
  color: color.default.enabled.border,
6021
6034
  width: input.border.width
6022
6035
  }), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), color.default.enabled.fg, focusRingStyle({
@@ -6030,9 +6043,9 @@ function inputElementStyle(props) {
6030
6043
  width: input.border.width
6031
6044
  }), color.default.readOnly.border, color.default.readOnly.bg, color.default.readOnly.fg, color.default.disabled.border, color.default.disabled.bg, color.default.disabled.fg);
6032
6045
  }
6033
- const Root$h = styled.div(radioBaseStyle);
6034
- const Input$4 = styled.input(inputElementStyle);
6035
- const Radio = forwardRef(function Radio2(props, forwardedRef) {
6046
+ const Root$h = styled__default.default.div(radioBaseStyle);
6047
+ const Input$4 = styled__default.default.input(inputElementStyle);
6048
+ const Radio = react.forwardRef(function Radio2(props, forwardedRef) {
6036
6049
  const {
6037
6050
  className,
6038
6051
  disabled,
@@ -6043,29 +6056,29 @@ const Radio = forwardRef(function Radio2(props, forwardedRef) {
6043
6056
  restProps = _objectWithoutProperties(props, _excluded24);
6044
6057
  const ref = useForwardedRef(forwardedRef);
6045
6058
  useCustomValidity(ref, customValidity);
6046
- return /* @__PURE__ */jsxs(Root$h, {
6059
+ return /* @__PURE__ */jsxRuntime.jsxs(Root$h, {
6047
6060
  className,
6048
6061
  "data-ui": "Radio",
6049
6062
  style,
6050
- children: [/* @__PURE__ */jsx(Input$4, _objectSpread(_objectSpread({
6063
+ children: [/* @__PURE__ */jsxRuntime.jsx(Input$4, _objectSpread(_objectSpread({
6051
6064
  "data-read-only": !disabled && readOnly ? "" : void 0
6052
6065
  }, restProps), {}, {
6053
6066
  disabled: disabled || readOnly,
6054
6067
  readOnly,
6055
6068
  ref,
6056
6069
  type: "radio"
6057
- })), /* @__PURE__ */jsx("span", {})]
6070
+ })), /* @__PURE__ */jsxRuntime.jsx("span", {})]
6058
6071
  });
6059
6072
  });
6060
6073
  function rootStyle() {
6061
- return css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n position: relative;\n width: stretch;\n\n &:not([hidden]) {\n display: inline-block;\n }\n "])));
6074
+ return styled.css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n position: relative;\n width: stretch;\n\n &:not([hidden]) {\n display: inline-block;\n }\n "])));
6062
6075
  }
6063
6076
  function inputBaseStyle(props) {
6064
6077
  const {
6065
6078
  theme
6066
6079
  } = props;
6067
6080
  const font = theme.sanity.fonts.text;
6068
- 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);
6081
+ 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);
6069
6082
  }
6070
6083
  function inputColorStyle(props) {
6071
6084
  const {
@@ -6076,7 +6089,7 @@ function inputColorStyle(props) {
6076
6089
  input
6077
6090
  } = theme.sanity;
6078
6091
  const color = theme.sanity.color.input;
6079
- 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({
6092
+ 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({
6080
6093
  color: color.default.enabled.border,
6081
6094
  width: input.border.width
6082
6095
  }), color.default.hovered.bg, color.default.hovered.fg, focusRingBorderStyle({
@@ -6120,17 +6133,17 @@ function iconBoxStyle(props) {
6120
6133
  theme
6121
6134
  } = props;
6122
6135
  const color = theme.sanity.color.input;
6123
- 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);
6136
+ 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);
6124
6137
  }
6125
6138
  const selectStyle = {
6126
6139
  root: rootStyle,
6127
6140
  input: inputStyle,
6128
6141
  iconBox: iconBoxStyle
6129
6142
  };
6130
- const Root$g = styled.div(selectStyle.root);
6131
- const Input$3 = styled.select(selectStyle.input);
6132
- const IconBox = styled(Box)(selectStyle.iconBox);
6133
- const Select = forwardRef(function Select2(props, forwardedRef) {
6143
+ const Root$g = styled__default.default.div(selectStyle.root);
6144
+ const Input$3 = styled__default.default.select(selectStyle.input);
6145
+ const IconBox = styled__default.default(Box)(selectStyle.iconBox);
6146
+ const Select = react.forwardRef(function Select2(props, forwardedRef) {
6134
6147
  const {
6135
6148
  children,
6136
6149
  customValidity,
@@ -6144,9 +6157,9 @@ const Select = forwardRef(function Select2(props, forwardedRef) {
6144
6157
  restProps = _objectWithoutProperties(props, _excluded25);
6145
6158
  const ref = useForwardedRef(forwardedRef);
6146
6159
  useCustomValidity(ref, customValidity);
6147
- return /* @__PURE__ */jsxs(Root$g, {
6160
+ return /* @__PURE__ */jsxRuntime.jsxs(Root$g, {
6148
6161
  "data-ui": "Select",
6149
- children: [/* @__PURE__ */jsx(Input$3, _objectSpread(_objectSpread({
6162
+ children: [/* @__PURE__ */jsxRuntime.jsx(Input$3, _objectSpread(_objectSpread({
6150
6163
  "data-read-only": !disabled && readOnly ? "" : void 0,
6151
6164
  "data-ui": "Select"
6152
6165
  }, restProps), {}, {
@@ -6157,11 +6170,11 @@ const Select = forwardRef(function Select2(props, forwardedRef) {
6157
6170
  disabled: disabled || readOnly,
6158
6171
  ref,
6159
6172
  children
6160
- })), /* @__PURE__ */jsx(IconBox, {
6173
+ })), /* @__PURE__ */jsxRuntime.jsx(IconBox, {
6161
6174
  padding,
6162
- children: /* @__PURE__ */jsx(Text, {
6175
+ children: /* @__PURE__ */jsxRuntime.jsx(Text, {
6163
6176
  size: fontSize,
6164
- children: /* @__PURE__ */jsx(SelectIcon, {})
6177
+ children: /* @__PURE__ */jsxRuntime.jsx(icons.SelectIcon, {})
6165
6178
  })
6166
6179
  })]
6167
6180
  });
@@ -6191,14 +6204,14 @@ function responsiveStackSpaceStyle(props) {
6191
6204
  gridGap: rem(space[spaceIndex])
6192
6205
  }));
6193
6206
  }
6194
- const Root$f = styled(Box)(stackBaseStyle, responsiveStackSpaceStyle);
6195
- const Stack = forwardRef(function Stack2(props, ref) {
6207
+ const Root$f = styled__default.default(Box)(stackBaseStyle, responsiveStackSpaceStyle);
6208
+ const Stack = react.forwardRef(function Stack2(props, ref) {
6196
6209
  const {
6197
6210
  as,
6198
6211
  space
6199
6212
  } = props,
6200
6213
  restProps = _objectWithoutProperties(props, _excluded26);
6201
- return /* @__PURE__ */jsx(Root$f, _objectSpread(_objectSpread({
6214
+ return /* @__PURE__ */jsxRuntime.jsx(Root$f, _objectSpread(_objectSpread({
6202
6215
  "data-as": typeof as === "string" ? as : void 0,
6203
6216
  "data-ui": "Stack"
6204
6217
  }, restProps), {}, {
@@ -6208,10 +6221,10 @@ const Stack = forwardRef(function Stack2(props, ref) {
6208
6221
  }));
6209
6222
  });
6210
6223
  function switchBaseStyles() {
6211
- return css(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n position: relative;\n &:not([hidden]) {\n display: inline-block;\n }\n "])));
6224
+ return styled.css(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n position: relative;\n &:not([hidden]) {\n display: inline-block;\n }\n "])));
6212
6225
  }
6213
6226
  function switchInputStyles() {
6214
- 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 "])));
6227
+ 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 "])));
6215
6228
  }
6216
6229
  function switchRepresentationStyles(props) {
6217
6230
  const {
@@ -6222,7 +6235,7 @@ function switchRepresentationStyles(props) {
6222
6235
  input
6223
6236
  } = theme.sanity;
6224
6237
  const color = theme.sanity.color.button.default;
6225
- 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({
6238
+ 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({
6226
6239
  focusRing
6227
6240
  }), 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);
6228
6241
  }
@@ -6233,7 +6246,7 @@ function switchTrackStyles(props) {
6233
6246
  const {
6234
6247
  input
6235
6248
  } = theme.sanity;
6236
- 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));
6249
+ 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));
6237
6250
  }
6238
6251
  function switchThumbStyles(props) {
6239
6252
  const {
@@ -6250,14 +6263,14 @@ function switchThumbStyles(props) {
6250
6263
  const checkedOffset = trackWidth - trackPadding * 2 - size;
6251
6264
  const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding;
6252
6265
  const checked = $indeterminate !== true && props.$checked === true;
6253
- 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));
6266
+ 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));
6254
6267
  }
6255
- const Root$e = styled.span(switchBaseStyles);
6256
- const Input$2 = styled.input(switchInputStyles);
6257
- const Representation = styled.span(switchRepresentationStyles);
6258
- const Track = styled.span(switchTrackStyles);
6259
- const Thumb = styled.span(switchThumbStyles);
6260
- const Switch = forwardRef(function Switch2(props, forwardedRef) {
6268
+ const Root$e = styled__default.default.span(switchBaseStyles);
6269
+ const Input$2 = styled__default.default.input(switchInputStyles);
6270
+ const Representation = styled__default.default.span(switchRepresentationStyles);
6271
+ const Track = styled__default.default.span(switchTrackStyles);
6272
+ const Thumb = styled__default.default.span(switchThumbStyles);
6273
+ const Switch = react.forwardRef(function Switch2(props, forwardedRef) {
6261
6274
  const {
6262
6275
  checked,
6263
6276
  className,
@@ -6268,37 +6281,37 @@ const Switch = forwardRef(function Switch2(props, forwardedRef) {
6268
6281
  } = props,
6269
6282
  restProps = _objectWithoutProperties(props, _excluded27);
6270
6283
  const ref = useForwardedRef(forwardedRef);
6271
- useEffect(() => {
6284
+ react.useEffect(() => {
6272
6285
  if (ref.current) {
6273
6286
  ref.current.indeterminate = indeterminate || false;
6274
6287
  }
6275
6288
  }, [indeterminate, ref]);
6276
- return /* @__PURE__ */jsxs(Root$e, {
6289
+ return /* @__PURE__ */jsxRuntime.jsxs(Root$e, {
6277
6290
  className,
6278
6291
  "data-ui": "Switch",
6279
6292
  style,
6280
- children: [/* @__PURE__ */jsx(Input$2, _objectSpread(_objectSpread({
6293
+ children: [/* @__PURE__ */jsxRuntime.jsx(Input$2, _objectSpread(_objectSpread({
6281
6294
  "data-read-only": !disabled && readOnly ? "" : void 0
6282
6295
  }, restProps), {}, {
6283
6296
  checked: indeterminate !== true && checked,
6284
6297
  disabled: disabled || readOnly,
6285
6298
  type: "checkbox",
6286
6299
  ref
6287
- })), /* @__PURE__ */jsxs(Representation, {
6300
+ })), /* @__PURE__ */jsxRuntime.jsxs(Representation, {
6288
6301
  "aria-hidden": true,
6289
6302
  "data-name": "representation",
6290
- children: [/* @__PURE__ */jsx(Track, {}), /* @__PURE__ */jsx(Thumb, {
6303
+ children: [/* @__PURE__ */jsxRuntime.jsx(Track, {}), /* @__PURE__ */jsxRuntime.jsx(Thumb, {
6291
6304
  $checked: checked,
6292
6305
  $indeterminate: indeterminate
6293
6306
  })]
6294
6307
  })]
6295
6308
  });
6296
6309
  });
6297
- const Root$d = styled.span(textInputRootStyle);
6298
- const InputRoot$1 = styled.span(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n flex: 1;\n min-width: 0;\n display: block;\n position: relative;\n"])));
6299
- const Input$1 = styled.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
6300
- const Presentation$1 = styled.div(responsiveRadiusStyle, textInputRepresentationStyle);
6301
- const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
6310
+ const Root$d = styled__default.default.span(textInputRootStyle);
6311
+ const InputRoot$1 = styled__default.default.span(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n flex: 1;\n min-width: 0;\n display: block;\n position: relative;\n"])));
6312
+ const Input$1 = styled__default.default.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
6313
+ const Presentation$1 = styled__default.default.div(responsiveRadiusStyle, textInputRepresentationStyle);
6314
+ const TextArea = react.forwardRef(function TextArea2(props, forwardedRef) {
6302
6315
  const {
6303
6316
  border = true,
6304
6317
  customValidity,
@@ -6312,10 +6325,10 @@ const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
6312
6325
  const ref = useForwardedRef(forwardedRef);
6313
6326
  const rootTheme = useRootTheme();
6314
6327
  useCustomValidity(ref, customValidity);
6315
- return /* @__PURE__ */jsx(Root$d, {
6328
+ return /* @__PURE__ */jsxRuntime.jsx(Root$d, {
6316
6329
  "data-ui": "TextArea",
6317
- children: /* @__PURE__ */jsxs(InputRoot$1, {
6318
- children: [/* @__PURE__ */jsx(Input$1, _objectSpread(_objectSpread({
6330
+ children: /* @__PURE__ */jsxRuntime.jsxs(InputRoot$1, {
6331
+ children: [/* @__PURE__ */jsxRuntime.jsx(Input$1, _objectSpread(_objectSpread({
6319
6332
  "data-as": "textarea",
6320
6333
  "data-scheme": rootTheme.scheme,
6321
6334
  "data-tone": rootTheme.tone
@@ -6328,7 +6341,7 @@ const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
6328
6341
  $weight: weight,
6329
6342
  disabled,
6330
6343
  ref
6331
- })), /* @__PURE__ */jsx(Presentation$1, {
6344
+ })), /* @__PURE__ */jsxRuntime.jsx(Presentation$1, {
6332
6345
  $radius: useArrayProp(radius),
6333
6346
  $scheme: rootTheme.scheme,
6334
6347
  $tone: rootTheme.tone,
@@ -6342,22 +6355,22 @@ const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
6342
6355
  const CLEAR_BUTTON_BOX_STYLE = {
6343
6356
  zIndex: 2
6344
6357
  };
6345
- const Root$c = styled(Card).attrs({
6358
+ const Root$c = styled__default.default(Card).attrs({
6346
6359
  forwardedAs: "span"
6347
6360
  })(textInputRootStyle);
6348
- const InputRoot = styled.span(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n flex: 1;\n min-width: 0;\n display: block;\n position: relative;\n"])));
6349
- const Prefix = styled(Card).attrs({
6361
+ const InputRoot = styled__default.default.span(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n flex: 1;\n min-width: 0;\n display: block;\n position: relative;\n"])));
6362
+ const Prefix = styled__default.default(Card).attrs({
6350
6363
  forwardedAs: "span"
6351
6364
  })(_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"])));
6352
- const Suffix = styled(Card).attrs({
6365
+ const Suffix = styled__default.default(Card).attrs({
6353
6366
  forwardedAs: "span"
6354
6367
  })(_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"])));
6355
- const Input = styled.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
6356
- const Presentation = styled.span(responsiveRadiusStyle, textInputRepresentationStyle);
6357
- const LeftBox = styled(Box)(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n"])));
6358
- const RightBox = styled(Box)(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n"])));
6359
- const RightCard = styled(Card)(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n background-color: transparent;\n position: absolute;\n top: 0;\n right: 0;\n"])));
6360
- const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
6368
+ const Input = styled__default.default.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
6369
+ const Presentation = styled__default.default.span(responsiveRadiusStyle, textInputRepresentationStyle);
6370
+ const LeftBox = styled__default.default(Box)(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n"])));
6371
+ const RightBox = styled__default.default(Box)(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n"])));
6372
+ const RightCard = styled__default.default(Card)(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n background-color: transparent;\n position: absolute;\n top: 0;\n right: 0;\n"])));
6373
+ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
6361
6374
  const {
6362
6375
  border = true,
6363
6376
  clearButton,
@@ -6389,29 +6402,29 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
6389
6402
  const $hasSuffix = Boolean(suffix);
6390
6403
  const $hasPrefix = Boolean(prefix);
6391
6404
  useCustomValidity(ref, customValidity);
6392
- const handleClearMouseDown = useCallback(event => {
6405
+ const handleClearMouseDown = react.useCallback(event => {
6393
6406
  event.preventDefault();
6394
6407
  event.stopPropagation();
6395
6408
  }, []);
6396
- const handleClearClick = useCallback(event => {
6409
+ const handleClearClick = react.useCallback(event => {
6397
6410
  var _a;
6398
6411
  event.preventDefault();
6399
6412
  event.stopPropagation();
6400
6413
  if (onClear) onClear();
6401
6414
  (_a = ref.current) == null ? void 0 : _a.focus();
6402
6415
  }, [onClear, ref]);
6403
- const prefixNode = useMemo(() => prefix && /* @__PURE__ */jsx(Prefix, {
6416
+ const prefixNode = react.useMemo(() => prefix && /* @__PURE__ */jsxRuntime.jsx(Prefix, {
6404
6417
  borderTop: true,
6405
6418
  borderLeft: true,
6406
6419
  borderBottom: true,
6407
6420
  radius,
6408
6421
  sizing: "border",
6409
6422
  tone: "inherit",
6410
- children: /* @__PURE__ */jsx("span", {
6423
+ children: /* @__PURE__ */jsxRuntime.jsx("span", {
6411
6424
  children: prefix
6412
6425
  })
6413
6426
  }), [prefix, radius]);
6414
- const presentationNode = useMemo(() => /* @__PURE__ */jsxs(Presentation, {
6427
+ const presentationNode = react.useMemo(() => /* @__PURE__ */jsxRuntime.jsxs(Presentation, {
6415
6428
  $hasPrefix,
6416
6429
  $hasSuffix,
6417
6430
  $radius: radius,
@@ -6420,43 +6433,43 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
6420
6433
  "data-border": border ? "" : void 0,
6421
6434
  "data-scheme": rootTheme.scheme,
6422
6435
  "data-tone": rootTheme.tone,
6423
- children: [icon && /* @__PURE__ */jsx(LeftBox, {
6436
+ children: [icon && /* @__PURE__ */jsxRuntime.jsx(LeftBox, {
6424
6437
  padding,
6425
- children: /* @__PURE__ */jsxs(Text, {
6438
+ children: /* @__PURE__ */jsxRuntime.jsxs(Text, {
6426
6439
  size: fontSize,
6427
- children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
6440
+ children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
6428
6441
  })
6429
- }), !$hasClearButton && iconRight && /* @__PURE__ */jsx(RightBox, {
6442
+ }), !$hasClearButton && iconRight && /* @__PURE__ */jsxRuntime.jsx(RightBox, {
6430
6443
  padding,
6431
- children: /* @__PURE__ */jsxs(Text, {
6444
+ children: /* @__PURE__ */jsxRuntime.jsxs(Text, {
6432
6445
  size: fontSize,
6433
- children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
6446
+ children: [react.isValidElement(iconRight) && iconRight, ReactIs.isValidElementType(iconRight) && react.createElement(iconRight)]
6434
6447
  })
6435
6448
  })]
6436
6449
  }), [border, fontSize, icon, iconRight, padding, radius, rootTheme, $hasClearButton, $hasPrefix, $hasSuffix]);
6437
- const clearButtonBoxPadding = useMemo(() => padding.map(v => {
6450
+ const clearButtonBoxPadding = react.useMemo(() => padding.map(v => {
6438
6451
  if (v === 0) return 0;
6439
6452
  if (v === 1) return 1;
6440
6453
  if (v === 2) return 1;
6441
6454
  return v - 2;
6442
6455
  }), [padding]);
6443
- const clearButtonPadding = useMemo(() => padding.map(v => {
6456
+ const clearButtonPadding = react.useMemo(() => padding.map(v => {
6444
6457
  if (v === 0) return 0;
6445
6458
  if (v === 1) return 0;
6446
6459
  if (v === 2) return 1;
6447
6460
  return v - 1;
6448
6461
  }), [padding]);
6449
- const clearButtonProps = useMemo(() => typeof clearButton === "object" ? clearButton : EMPTY_RECORD, [clearButton]);
6450
- const clearButtonNode = useMemo(() => !disabled && !readOnly && clearButton && /* @__PURE__ */jsx(RightCard, {
6462
+ const clearButtonProps = react.useMemo(() => typeof clearButton === "object" ? clearButton : EMPTY_RECORD, [clearButton]);
6463
+ const clearButtonNode = react.useMemo(() => !disabled && !readOnly && clearButton && /* @__PURE__ */jsxRuntime.jsx(RightCard, {
6451
6464
  forwardedAs: "span",
6452
6465
  padding: clearButtonBoxPadding,
6453
6466
  style: CLEAR_BUTTON_BOX_STYLE,
6454
6467
  tone: customValidity ? "critical" : "inherit",
6455
- children: /* @__PURE__ */jsx(Button, _objectSpread(_objectSpread({
6468
+ children: /* @__PURE__ */jsxRuntime.jsx(Button, _objectSpread(_objectSpread({
6456
6469
  "aria-label": "Clear",
6457
6470
  "data-qa": "clear-button",
6458
6471
  fontSize,
6459
- icon: CloseIcon,
6472
+ icon: icons.CloseIcon,
6460
6473
  mode: "bleed",
6461
6474
  padding: clearButtonPadding,
6462
6475
  radius
@@ -6465,22 +6478,22 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
6465
6478
  onMouseDown: handleClearMouseDown
6466
6479
  }))
6467
6480
  }), [clearButton, clearButtonBoxPadding, clearButtonPadding, clearButtonProps, customValidity, disabled, fontSize, handleClearClick, handleClearMouseDown, radius, readOnly]);
6468
- const suffixNode = useMemo(() => suffix && /* @__PURE__ */jsx(Suffix, {
6481
+ const suffixNode = react.useMemo(() => suffix && /* @__PURE__ */jsxRuntime.jsx(Suffix, {
6469
6482
  borderTop: true,
6470
6483
  borderRight: true,
6471
6484
  borderBottom: true,
6472
6485
  radius,
6473
6486
  sizing: "border",
6474
6487
  tone: "inherit",
6475
- children: /* @__PURE__ */jsx("span", {
6488
+ children: /* @__PURE__ */jsxRuntime.jsx("span", {
6476
6489
  children: suffix
6477
6490
  })
6478
6491
  }), [radius, suffix]);
6479
- return /* @__PURE__ */jsxs(Root$c, {
6492
+ return /* @__PURE__ */jsxRuntime.jsxs(Root$c, {
6480
6493
  "data-ui": "TextInput",
6481
6494
  tone: rootTheme.tone,
6482
- children: [prefixNode, /* @__PURE__ */jsxs(InputRoot, {
6483
- children: [/* @__PURE__ */jsx(Input, _objectSpread(_objectSpread({
6495
+ children: [prefixNode, /* @__PURE__ */jsxRuntime.jsxs(InputRoot, {
6496
+ children: [/* @__PURE__ */jsxRuntime.jsx(Input, _objectSpread(_objectSpread({
6484
6497
  "data-as": "input",
6485
6498
  "data-scheme": rootTheme.scheme,
6486
6499
  "data-tone": rootTheme.tone
@@ -6501,29 +6514,29 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
6501
6514
  }), suffixNode]
6502
6515
  });
6503
6516
  });
6504
- 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"])));
6505
- const Border = styled.path(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n fill: var(--card-shadow-outline-color);\n"])));
6506
- const Shape = styled.path(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n fill: var(--card-bg-color);\n"])));
6507
- const TooltipArrow = forwardRef(function TooltipArrow2(props, ref) {
6517
+ 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"])));
6518
+ const Border = styled__default.default.path(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n fill: var(--card-shadow-outline-color);\n"])));
6519
+ const Shape = styled__default.default.path(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n fill: var(--card-bg-color);\n"])));
6520
+ const TooltipArrow = react.forwardRef(function TooltipArrow2(props, ref) {
6508
6521
  const restProps = _extends({}, (_objectDestructuringEmpty(props), props));
6509
- return /* @__PURE__ */jsx(Root$b, _objectSpread(_objectSpread({
6522
+ return /* @__PURE__ */jsxRuntime.jsx(Root$b, _objectSpread(_objectSpread({
6510
6523
  "data-ui": "Tooltip__arrow"
6511
6524
  }, restProps), {}, {
6512
6525
  ref,
6513
- children: /* @__PURE__ */jsxs("svg", {
6526
+ children: /* @__PURE__ */jsxRuntime.jsxs("svg", {
6514
6527
  width: "15",
6515
6528
  height: "15",
6516
6529
  viewBox: "0 0 15 15",
6517
- children: [/* @__PURE__ */jsx(Border, {
6530
+ children: [/* @__PURE__ */jsxRuntime.jsx(Border, {
6518
6531
  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"
6519
- }), /* @__PURE__ */jsx(Shape, {
6532
+ }), /* @__PURE__ */jsxRuntime.jsx(Shape, {
6520
6533
  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"
6521
6534
  })]
6522
6535
  })
6523
6536
  }));
6524
6537
  });
6525
- const Root$a = styled(Layer)(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n pointer-events: none;\n"])));
6526
- const Tooltip = forwardRef(function Tooltip2(props, ref) {
6538
+ const Root$a = styled__default.default(Layer)(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n pointer-events: none;\n"])));
6539
+ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
6527
6540
  var _a, _b, _c;
6528
6541
  const boundaryElementContext = useBoundaryElement();
6529
6542
  const theme = useTheme();
@@ -6543,26 +6556,26 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
6543
6556
  restProps = _objectWithoutProperties(props, _excluded30);
6544
6557
  const fallbackPlacements = useArrayProp(fallbackPlacementsProp);
6545
6558
  const forwardedRef = useForwardedRef(ref);
6546
- const [referenceElement, setReferenceElement] = useState(null);
6547
- const arrowRef = useRef(null);
6559
+ const [referenceElement, setReferenceElement] = react.useState(null);
6560
+ const arrowRef = react.useRef(null);
6548
6561
  const rootBoundary = "viewport";
6549
- const middleware = useMemo(() => {
6562
+ const middleware = react.useMemo(() => {
6550
6563
  const ret = [];
6551
- ret.push(flip({
6564
+ ret.push(reactDom$1.flip({
6552
6565
  boundary: boundaryElement || void 0,
6553
6566
  fallbackPlacements,
6554
6567
  padding: 4,
6555
6568
  rootBoundary
6556
6569
  }));
6557
- ret.push(offset({
6570
+ ret.push(reactDom$1.offset({
6558
6571
  mainAxis: 3
6559
6572
  }));
6560
- ret.push(shift({
6573
+ ret.push(reactDom$1.shift({
6561
6574
  boundary: boundaryElement || void 0,
6562
6575
  rootBoundary,
6563
6576
  padding: 4
6564
6577
  }));
6565
- ret.push(arrow({
6578
+ ret.push(reactDom$1.arrow({
6566
6579
  element: arrowRef,
6567
6580
  padding: 2
6568
6581
  }));
@@ -6577,12 +6590,12 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
6577
6590
  middlewareData,
6578
6591
  update,
6579
6592
  strategy
6580
- } = useFloating({
6593
+ } = reactDom$1.useFloating({
6581
6594
  middleware,
6582
6595
  placement: placementProp,
6583
- whileElementsMounted: autoUpdate
6596
+ whileElementsMounted: reactDom$1.autoUpdate
6584
6597
  });
6585
- const rootStyle = useMemo(() => ({
6598
+ const rootStyle = react.useMemo(() => ({
6586
6599
  position: strategy,
6587
6600
  top: y != null ? y : 0,
6588
6601
  left: x != null ? x : 0
@@ -6590,7 +6603,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
6590
6603
  const staticSide = placement && FLOATING_STATIC_SIDES[placement.split("-")[0]];
6591
6604
  const arrowX = (_b = middlewareData.arrow) == null ? void 0 : _b.x;
6592
6605
  const arrowY = (_c = middlewareData.arrow) == null ? void 0 : _c.y;
6593
- const arrowStyle = useMemo(() => {
6606
+ const arrowStyle = react.useMemo(() => {
6594
6607
  const style = {
6595
6608
  left: arrowX !== null ? arrowX : void 0,
6596
6609
  top: arrowY !== null ? arrowY : void 0,
@@ -6600,12 +6613,12 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
6600
6613
  if (staticSide) style[staticSide] = -15;
6601
6614
  return style;
6602
6615
  }, [arrowX, arrowY, staticSide]);
6603
- const [isOpen, setIsOpen] = useState(false);
6604
- const handleBlur = useCallback(() => setIsOpen(false), []);
6605
- const handleFocus = useCallback(() => setIsOpen(true), []);
6606
- const handleMouseEnter = useCallback(() => setIsOpen(true), []);
6607
- const handleMouseLeave = useCallback(() => setIsOpen(false), []);
6608
- useEffect(() => {
6616
+ const [isOpen, setIsOpen] = react.useState(false);
6617
+ const handleBlur = react.useCallback(() => setIsOpen(false), []);
6618
+ const handleFocus = react.useCallback(() => setIsOpen(true), []);
6619
+ const handleMouseEnter = react.useCallback(() => setIsOpen(true), []);
6620
+ const handleMouseLeave = react.useCallback(() => setIsOpen(false), []);
6621
+ react.useEffect(() => {
6609
6622
  if (!isOpen) return;
6610
6623
  function handleWindowMouseMove(event) {
6611
6624
  if (!referenceElement) return;
@@ -6620,23 +6633,23 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
6620
6633
  window.removeEventListener("mousemove", handleWindowMouseMove);
6621
6634
  };
6622
6635
  }, [isOpen, referenceElement]);
6623
- useEffect(() => {
6636
+ react.useEffect(() => {
6624
6637
  if (disabled) setIsOpen(false);
6625
6638
  }, [disabled]);
6626
- useEffect(() => {
6639
+ react.useEffect(() => {
6627
6640
  if (!content) setIsOpen(false);
6628
6641
  }, [content]);
6629
- useEffect(() => reference(referenceElement), [reference, referenceElement]);
6630
- const setArrow = useCallback(arrowEl => {
6642
+ react.useEffect(() => reference(referenceElement), [reference, referenceElement]);
6643
+ const setArrow = react.useCallback(arrowEl => {
6631
6644
  arrowRef.current = arrowEl;
6632
6645
  update();
6633
6646
  }, [update]);
6634
- const setFloating = useCallback(node => {
6647
+ const setFloating = react.useCallback(node => {
6635
6648
  forwardedRef.current = node;
6636
6649
  floating(node);
6637
6650
  }, [floating, forwardedRef]);
6638
6651
  const childRef = childProp == null ? void 0 : childProp.ref;
6639
- const setReference = useCallback(node => {
6652
+ const setReference = react.useCallback(node => {
6640
6653
  if (typeof childRef === "function") {
6641
6654
  childRef(node);
6642
6655
  } else if (childRef) {
@@ -6644,9 +6657,9 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
6644
6657
  }
6645
6658
  setReferenceElement(node);
6646
6659
  }, [childRef]);
6647
- const child = useMemo(() => {
6660
+ const child = react.useMemo(() => {
6648
6661
  if (!childProp) return null;
6649
- return cloneElement(childProp, {
6662
+ return react.cloneElement(childProp, {
6650
6663
  onBlur: handleBlur,
6651
6664
  onFocus: handleFocus,
6652
6665
  onMouseEnter: handleMouseEnter,
@@ -6654,40 +6667,40 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
6654
6667
  ref: setReference
6655
6668
  });
6656
6669
  }, [childProp, handleBlur, handleFocus, handleMouseEnter, handleMouseLeave, setReference]);
6657
- if (!child) return /* @__PURE__ */jsx(Fragment, {});
6670
+ if (!child) return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {});
6658
6671
  if (disabled) return child;
6659
- const root = /* @__PURE__ */jsx(Root$a, _objectSpread(_objectSpread({
6672
+ const root = /* @__PURE__ */jsxRuntime.jsx(Root$a, _objectSpread(_objectSpread({
6660
6673
  "data-ui": "Tooltip"
6661
6674
  }, restProps), {}, {
6662
6675
  ref: setFloating,
6663
6676
  style: rootStyle,
6664
6677
  zOffset,
6665
- children: /* @__PURE__ */jsxs(Card, {
6678
+ children: /* @__PURE__ */jsxRuntime.jsxs(Card, {
6666
6679
  "data-ui": "Tooltip__card",
6667
6680
  "data-placement": placement,
6668
6681
  padding,
6669
6682
  radius: 2,
6670
6683
  scheme,
6671
6684
  shadow,
6672
- children: [content, /* @__PURE__ */jsx(TooltipArrow, {
6685
+ children: [content, /* @__PURE__ */jsxRuntime.jsx(TooltipArrow, {
6673
6686
  ref: setArrow,
6674
6687
  style: arrowStyle
6675
6688
  })]
6676
6689
  })
6677
6690
  }));
6678
- return /* @__PURE__ */jsxs(Fragment, {
6679
- children: [child, isOpen && /* @__PURE__ */jsx(Fragment, {
6680
- children: portal ? /* @__PURE__ */jsx(Portal, {
6691
+ return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
6692
+ children: [child, isOpen && /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
6693
+ children: portal ? /* @__PURE__ */jsxRuntime.jsx(Portal, {
6681
6694
  __unstable_name: typeof portal === "string" ? portal : void 0,
6682
6695
  children: root
6683
6696
  }) : root
6684
6697
  })]
6685
6698
  });
6686
6699
  });
6687
- const Root$9 = styled.div(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n line-height: 0;\n"])));
6688
- const ListBox = styled(Box)(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n & > ul {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n"])));
6689
- const rotate = keyframes(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n"])));
6690
- const AnimatedSpinnerIcon = styled(SpinnerIcon)(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n animation: ", " 500ms linear infinite;\n"])), rotate);
6700
+ const Root$9 = styled__default.default.div(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n line-height: 0;\n"])));
6701
+ const ListBox = styled__default.default(Box)(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n & > ul {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n"])));
6702
+ const rotate = styled.keyframes(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n"])));
6703
+ const AnimatedSpinnerIcon = styled__default.default(icons.SpinnerIcon)(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n animation: ", " 500ms linear infinite;\n"])), rotate);
6691
6704
  function AutocompleteOption(props) {
6692
6705
  const {
6693
6706
  children,
@@ -6696,17 +6709,17 @@ function AutocompleteOption(props) {
6696
6709
  selected,
6697
6710
  value
6698
6711
  } = props;
6699
- const handleClick = useCallback(() => {
6712
+ const handleClick = react.useCallback(() => {
6700
6713
  setTimeout(() => {
6701
6714
  onSelect(value);
6702
6715
  }, 0);
6703
6716
  }, [onSelect, value]);
6704
- const handleKeyDown = useCallback(event => {
6717
+ const handleKeyDown = react.useCallback(event => {
6705
6718
  if (event.key === "Enter" && !_isEnterToClickElement(event.currentTarget)) {
6706
6719
  handleClick();
6707
6720
  }
6708
6721
  }, [handleClick]);
6709
- return /* @__PURE__ */jsx("li", {
6722
+ return /* @__PURE__ */jsxRuntime.jsx("li", {
6710
6723
  "aria-selected": selected,
6711
6724
  "data-ui": "AutocompleteOption",
6712
6725
  id,
@@ -6778,7 +6791,7 @@ const AUTOCOMPLETE_POPOVER_PLACEMENT = "bottom-start";
6778
6791
  const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ["bottom-start", "top-start"];
6779
6792
  const DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value;
6780
6793
  const DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1;
6781
- const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
6794
+ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, ref) {
6782
6795
  const {
6783
6796
  border = true,
6784
6797
  customValidity,
@@ -6809,7 +6822,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
6809
6822
  value: valueProp
6810
6823
  } = props,
6811
6824
  restProps = _objectWithoutProperties(props, _excluded31);
6812
- const [state, dispatch] = useReducer(autocompleteReducer, {
6825
+ const [state, dispatch] = react.useReducer(autocompleteReducer, {
6813
6826
  activeValue: valueProp || null,
6814
6827
  focused: false,
6815
6828
  listFocused: false,
@@ -6823,16 +6836,16 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
6823
6836
  query,
6824
6837
  value
6825
6838
  } = state;
6826
- const defaultRenderOption = useCallback(_ref22 => {
6839
+ const defaultRenderOption = react.useCallback(_ref22 => {
6827
6840
  let {
6828
6841
  value: value2
6829
6842
  } = _ref22;
6830
- return /* @__PURE__ */jsx(Card, {
6843
+ return /* @__PURE__ */jsxRuntime.jsx(Card, {
6831
6844
  "data-as": "button",
6832
6845
  padding: paddingProp,
6833
6846
  radius: 2,
6834
6847
  tone: "inherit",
6835
- children: /* @__PURE__ */jsx(Text, {
6848
+ children: /* @__PURE__ */jsxRuntime.jsx(Text, {
6836
6849
  size: fontSize,
6837
6850
  textOverflow: "ellipsis",
6838
6851
  children: value2
@@ -6841,24 +6854,24 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
6841
6854
  }, [fontSize, paddingProp]);
6842
6855
  const renderOption = typeof renderOptionProp === "function" ? renderOptionProp : defaultRenderOption;
6843
6856
  const filterOption = typeof filterOptionProp === "function" ? filterOptionProp : DEFAULT_FILTER_OPTION;
6844
- const rootElementRef = useRef(null);
6845
- const resultsPopoverElementRef = useRef(null);
6846
- const inputElementRef = useRef(null);
6847
- const listBoxElementRef = useRef(null);
6848
- const listFocusedRef = useRef(false);
6849
- const valueRef = useRef(value);
6850
- const valuePropRef = useRef(valueProp);
6851
- const popoverMouseWithinRef = useRef(false);
6857
+ const rootElementRef = react.useRef(null);
6858
+ const resultsPopoverElementRef = react.useRef(null);
6859
+ const inputElementRef = react.useRef(null);
6860
+ const listBoxElementRef = react.useRef(null);
6861
+ const listFocusedRef = react.useRef(false);
6862
+ const valueRef = react.useRef(value);
6863
+ const valuePropRef = react.useRef(valueProp);
6864
+ const popoverMouseWithinRef = react.useRef(false);
6852
6865
  const forwardedRef = useForwardedRef(ref);
6853
6866
  const listBoxId = "".concat(id, "-listbox");
6854
6867
  const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY;
6855
6868
  const padding = useArrayProp(paddingProp);
6856
- const currentOption = useMemo(() => value !== null ? options.find(o => o.value === value) : void 0, [options, value]);
6857
- const filteredOptions = useMemo(() => options.filter(option => query ? filterOption(query, option) : true), [filterOption, options, query]);
6869
+ const currentOption = react.useMemo(() => value !== null ? options.find(o => o.value === value) : void 0, [options, value]);
6870
+ const filteredOptions = react.useMemo(() => options.filter(option => query ? filterOption(query, option) : true), [filterOption, options, query]);
6858
6871
  const filteredOptionsLen = filteredOptions.length;
6859
6872
  const activeItemId = activeValue ? "".concat(id, "-option-").concat(activeValue) : void 0;
6860
6873
  const expanded = query !== null && loading || focused && query !== null;
6861
- const handleRootBlur = useCallback(event => {
6874
+ const handleRootBlur = react.useCallback(event => {
6862
6875
  setTimeout(() => {
6863
6876
  if (popoverMouseWithinRef.current) {
6864
6877
  return;
@@ -6883,7 +6896,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
6883
6896
  }
6884
6897
  }, 0);
6885
6898
  }, [onBlur, onQueryChange, relatedElements]);
6886
- const handleRootFocus = useCallback(event => {
6899
+ const handleRootFocus = react.useCallback(event => {
6887
6900
  const listBoxElement = listBoxElementRef.current;
6888
6901
  const focusedElement = event.target instanceof HTMLElement ? event.target : null;
6889
6902
  const listFocused2 = (listBoxElement == null ? void 0 : listBoxElement.contains(focusedElement)) || false;
@@ -6895,7 +6908,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
6895
6908
  });
6896
6909
  }
6897
6910
  }, []);
6898
- const handleOptionSelect = useCallback(v => {
6911
+ const handleOptionSelect = react.useCallback(v => {
6899
6912
  var _a;
6900
6913
  dispatch({
6901
6914
  type: "value/change",
@@ -6908,7 +6921,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
6908
6921
  if (onQueryChange) onQueryChange(null);
6909
6922
  (_a = inputElementRef.current) == null ? void 0 : _a.focus();
6910
6923
  }, [onChange, onSelect, onQueryChange]);
6911
- const handleRootKeyDown = useCallback(event => {
6924
+ const handleRootKeyDown = react.useCallback(event => {
6912
6925
  var _a, _b;
6913
6926
  if (event.key === "ArrowDown") {
6914
6927
  event.preventDefault();
@@ -6956,7 +6969,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
6956
6969
  return;
6957
6970
  }
6958
6971
  }, [activeValue, filteredOptions, filteredOptionsLen, onQueryChange]);
6959
- const handleInputChange = useCallback(event => {
6972
+ const handleInputChange = react.useCallback(event => {
6960
6973
  const nextQuery = event.currentTarget.value;
6961
6974
  dispatch({
6962
6975
  type: "input/change",
@@ -6964,7 +6977,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
6964
6977
  });
6965
6978
  if (onQueryChange) onQueryChange(nextQuery);
6966
6979
  }, [onQueryChange]);
6967
- const handleInputFocus = useCallback(event => {
6980
+ const handleInputFocus = react.useCallback(event => {
6968
6981
  if (!focused) {
6969
6982
  dispatch({
6970
6983
  type: "input/focus"
@@ -6972,13 +6985,13 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
6972
6985
  if (onFocus) onFocus(event);
6973
6986
  }
6974
6987
  }, [focused, onFocus]);
6975
- const handlePopoverMouseEnter = useCallback(() => {
6988
+ const handlePopoverMouseEnter = react.useCallback(() => {
6976
6989
  popoverMouseWithinRef.current = true;
6977
6990
  }, []);
6978
- const handlePopoverMouseLeave = useCallback(() => {
6991
+ const handlePopoverMouseLeave = react.useCallback(() => {
6979
6992
  popoverMouseWithinRef.current = false;
6980
6993
  }, []);
6981
- const handleClearButtonClick = useCallback(() => {
6994
+ const handleClearButtonClick = react.useCallback(() => {
6982
6995
  var _a;
6983
6996
  dispatch({
6984
6997
  type: "root/clear"
@@ -6988,12 +7001,12 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
6988
7001
  if (onQueryChange) onQueryChange(null);
6989
7002
  (_a = inputElementRef.current) == null ? void 0 : _a.focus();
6990
7003
  }, [onChange, onQueryChange]);
6991
- const handleClearButtonFocus = useCallback(() => {
7004
+ const handleClearButtonFocus = react.useCallback(() => {
6992
7005
  dispatch({
6993
7006
  type: "input/focus"
6994
7007
  });
6995
7008
  }, []);
6996
- useEffect(() => {
7009
+ react.useEffect(() => {
6997
7010
  if (valueProp !== valuePropRef.current) {
6998
7011
  valuePropRef.current = valueProp;
6999
7012
  if (valueProp !== void 0) {
@@ -7013,7 +7026,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
7013
7026
  });
7014
7027
  }
7015
7028
  }, [valueProp]);
7016
- useEffect(() => {
7029
+ react.useEffect(() => {
7017
7030
  if (!focused && valueRef.current) {
7018
7031
  dispatch({
7019
7032
  type: "root/setActiveValue",
@@ -7021,7 +7034,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
7021
7034
  });
7022
7035
  }
7023
7036
  }, [focused]);
7024
- useEffect(() => {
7037
+ react.useEffect(() => {
7025
7038
  const listElement = listBoxElementRef.current;
7026
7039
  if (!listElement) return;
7027
7040
  const activeOption = filteredOptions.find(o => o.value === activeValue);
@@ -7036,11 +7049,11 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
7036
7049
  }
7037
7050
  }
7038
7051
  }, [activeValue, filteredOptions]);
7039
- const setRef = useCallback(el => {
7052
+ const setRef = react.useCallback(el => {
7040
7053
  inputElementRef.current = el;
7041
7054
  forwardedRef.current = el;
7042
7055
  }, [forwardedRef]);
7043
- const clearButton = useMemo(() => {
7056
+ const clearButton = react.useMemo(() => {
7044
7057
  if (!loading && !disabled && value) {
7045
7058
  return {
7046
7059
  "aria-label": "Clear",
@@ -7049,15 +7062,15 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
7049
7062
  }
7050
7063
  return void 0;
7051
7064
  }, [disabled, handleClearButtonFocus, loading, value]);
7052
- const openButtonBoxPadding = useMemo(() => padding.map(v => {
7065
+ const openButtonBoxPadding = react.useMemo(() => padding.map(v => {
7053
7066
  if (v === 0) return 0;
7054
7067
  if (v === 1) return 1;
7055
7068
  if (v === 2) return 1;
7056
7069
  return v - 2;
7057
7070
  }), [padding]);
7058
- const openButtonPadding = useMemo(() => padding.map(v => Math.max(v - 1, 0)), [padding]);
7059
- const openButtonProps = useMemo(() => typeof openButton === "object" ? openButton : EMPTY_RECORD, [openButton]);
7060
- const handleOpenClick = useCallback(event => {
7071
+ const openButtonPadding = react.useMemo(() => padding.map(v => Math.max(v - 1, 0)), [padding]);
7072
+ const openButtonProps = react.useMemo(() => typeof openButton === "object" ? openButton : EMPTY_RECORD, [openButton]);
7073
+ const handleOpenClick = react.useCallback(event => {
7061
7074
  dispatch({
7062
7075
  type: "root/open",
7063
7076
  query: value ? renderValue(value, currentOption) : ""
@@ -7068,21 +7081,21 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
7068
7081
  return (_a = inputElementRef.current) == null ? void 0 : _a.focus();
7069
7082
  });
7070
7083
  }, [currentOption, openButtonProps, renderValue, value]);
7071
- const openButtonNode = useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */jsx(Box, {
7084
+ const openButtonNode = react.useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */jsxRuntime.jsx(Box, {
7072
7085
  "aria-hidden": expanded,
7073
7086
  padding: openButtonBoxPadding,
7074
- children: /* @__PURE__ */jsx(Button, _objectSpread(_objectSpread({
7087
+ children: /* @__PURE__ */jsxRuntime.jsx(Button, _objectSpread(_objectSpread({
7075
7088
  "aria-label": "Open",
7076
7089
  disabled: expanded,
7077
7090
  fontSize,
7078
- icon: ChevronDownIcon,
7091
+ icon: icons.ChevronDownIcon,
7079
7092
  mode: "bleed",
7080
7093
  padding: openButtonPadding
7081
7094
  }, openButtonProps), {}, {
7082
7095
  onClick: handleOpenClick
7083
7096
  }))
7084
7097
  }) : void 0, [disabled, expanded, fontSize, handleOpenClick, openButton, openButtonBoxPadding, openButtonPadding, openButtonProps, readOnly]);
7085
- const inputValue = useMemo(() => {
7098
+ const inputValue = react.useMemo(() => {
7086
7099
  if (query === null) {
7087
7100
  if (value !== null) {
7088
7101
  return renderValue(value, currentOption);
@@ -7091,7 +7104,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
7091
7104
  }
7092
7105
  return query;
7093
7106
  }, [currentOption, query, renderValue, value]);
7094
- const input = /* @__PURE__ */jsx(TextInput, _objectSpread(_objectSpread({}, restProps), {}, {
7107
+ const input = /* @__PURE__ */jsxRuntime.jsx(TextInput, _objectSpread(_objectSpread({}, restProps), {}, {
7095
7108
  "aria-activedescendant": activeItemId,
7096
7109
  "aria-autocomplete": "list",
7097
7110
  "aria-expanded": expanded,
@@ -7121,21 +7134,21 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
7121
7134
  suffix: suffix || openButtonNode,
7122
7135
  value: inputValue
7123
7136
  }));
7124
- const handleListBoxKeyDown = useCallback(event => {
7137
+ const handleListBoxKeyDown = react.useCallback(event => {
7125
7138
  var _a;
7126
7139
  if (event.key === "Tab") {
7127
7140
  if (listFocused) (_a = inputElementRef.current) == null ? void 0 : _a.focus();
7128
7141
  }
7129
7142
  }, [listFocused]);
7130
- const content = useMemo(() => {
7143
+ const content = react.useMemo(() => {
7131
7144
  if (filteredOptions.length === 0) return null;
7132
- return /* @__PURE__ */jsx(ListBox, _objectSpread(_objectSpread({
7145
+ return /* @__PURE__ */jsxRuntime.jsx(ListBox, _objectSpread(_objectSpread({
7133
7146
  "data-ui": "AutoComplete__results",
7134
7147
  onKeyDown: handleListBoxKeyDown,
7135
7148
  padding: 1
7136
7149
  }, listBox), {}, {
7137
7150
  tabIndex: -1,
7138
- children: /* @__PURE__ */jsx(Stack, {
7151
+ children: /* @__PURE__ */jsxRuntime.jsx(Stack, {
7139
7152
  as: "ul",
7140
7153
  "aria-multiselectable": false,
7141
7154
  "data-ui": "AutoComplete__resultsList",
@@ -7145,12 +7158,12 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
7145
7158
  space: 1,
7146
7159
  children: filteredOptions.map(option => {
7147
7160
  const active = activeValue !== null ? option.value === activeValue : currentOption === option;
7148
- return /* @__PURE__ */jsx(AutocompleteOption, {
7161
+ return /* @__PURE__ */jsxRuntime.jsx(AutocompleteOption, {
7149
7162
  id: "".concat(id, "-option-").concat(option.value),
7150
7163
  onSelect: handleOptionSelect,
7151
7164
  selected: active,
7152
7165
  value: option.value,
7153
- children: cloneElement(renderOption(option), {
7166
+ children: react.cloneElement(renderOption(option), {
7154
7167
  disabled: loading,
7155
7168
  selected: active,
7156
7169
  tabIndex: listFocused && active ? 0 : -1
@@ -7160,7 +7173,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
7160
7173
  })
7161
7174
  }));
7162
7175
  }, [activeValue, currentOption, filteredOptions, handleOptionSelect, handleListBoxKeyDown, id, listBox, listBoxId, listFocused, loading, renderOption]);
7163
- const results = useMemo(() => {
7176
+ const results = react.useMemo(() => {
7164
7177
  if (renderPopover) {
7165
7178
  return renderPopover({
7166
7179
  content,
@@ -7173,7 +7186,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
7173
7186
  if (filteredOptionsLen === 0) {
7174
7187
  return null;
7175
7188
  }
7176
- return /* @__PURE__ */jsx(Popover, _objectSpread({
7189
+ return /* @__PURE__ */jsxRuntime.jsx(Popover, _objectSpread({
7177
7190
  arrow: false,
7178
7191
  constrainSize: true,
7179
7192
  content,
@@ -7190,7 +7203,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
7190
7203
  referenceElement: inputElementRef.current
7191
7204
  }, popover));
7192
7205
  }, [content, expanded, filteredOptionsLen, handlePopoverMouseEnter, handlePopoverMouseLeave, popover, radius, renderPopover]);
7193
- return /* @__PURE__ */jsxs(Root$9, {
7206
+ return /* @__PURE__ */jsxRuntime.jsxs(Root$9, {
7194
7207
  "data-ui": "Autocomplete",
7195
7208
  onBlur: handleRootBlur,
7196
7209
  onFocus: handleRootFocus,
@@ -7200,9 +7213,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
7200
7213
  });
7201
7214
  });
7202
7215
  const Autocomplete = InnerAutocomplete;
7203
- 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"])));
7204
- const ExpandButton = styled(Button)(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n appearance: none;\n margin: -4px;\n"])));
7205
- const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
7216
+ 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"])));
7217
+ const ExpandButton = styled__default.default(Button)(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n appearance: none;\n margin: -4px;\n"])));
7218
+ const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
7206
7219
  const {
7207
7220
  children,
7208
7221
  maxLength,
@@ -7211,23 +7224,23 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
7211
7224
  } = props,
7212
7225
  restProps = _objectWithoutProperties(props, _excluded32);
7213
7226
  const space = useArrayProp(spaceRaw);
7214
- const [open, setOpen] = useState(false);
7215
- const [expandElement, setExpandElement] = useState(null);
7216
- const [popoverElement, setPopoverElement] = useState(null);
7217
- const collapse = useCallback(() => setOpen(false), []);
7218
- const expand = useCallback(() => setOpen(true), []);
7227
+ const [open, setOpen] = react.useState(false);
7228
+ const [expandElement, setExpandElement] = react.useState(null);
7229
+ const [popoverElement, setPopoverElement] = react.useState(null);
7230
+ const collapse = react.useCallback(() => setOpen(false), []);
7231
+ const expand = react.useCallback(() => setOpen(true), []);
7219
7232
  useClickOutside(collapse, [expandElement, popoverElement]);
7220
- const rawItems = useMemo(() => Children.toArray(children).filter(child => {
7221
- return isValidElement(child);
7233
+ const rawItems = react.useMemo(() => react.Children.toArray(children).filter(child => {
7234
+ return react.isValidElement(child);
7222
7235
  }), [children]);
7223
- const items = useMemo(() => {
7236
+ const items = react.useMemo(() => {
7224
7237
  const len = rawItems.length;
7225
7238
  if (maxLength && len > maxLength) {
7226
7239
  const beforeLength = Math.ceil(maxLength / 2);
7227
7240
  const afterLength = Math.floor(maxLength / 2);
7228
- return [...rawItems.slice(0, beforeLength - 1), /* @__PURE__ */jsx(Popover, {
7241
+ return [...rawItems.slice(0, beforeLength - 1), /* @__PURE__ */jsxRuntime.jsx(Popover, {
7229
7242
  constrainSize: true,
7230
- content: /* @__PURE__ */jsx(Stack, {
7243
+ content: /* @__PURE__ */jsxRuntime.jsx(Stack, {
7231
7244
  as: "ol",
7232
7245
  overflow: "auto",
7233
7246
  padding: space,
@@ -7238,7 +7251,7 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
7238
7251
  placement: "top",
7239
7252
  portal: true,
7240
7253
  ref: setPopoverElement,
7241
- children: /* @__PURE__ */jsx(ExpandButton, {
7254
+ children: /* @__PURE__ */jsxRuntime.jsx(ExpandButton, {
7242
7255
  fontSize: 1,
7243
7256
  mode: "bleed",
7244
7257
  onClick: open ? collapse : expand,
@@ -7251,20 +7264,20 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
7251
7264
  }
7252
7265
  return rawItems;
7253
7266
  }, [collapse, expand, maxLength, open, rawItems, space]);
7254
- return /* @__PURE__ */jsx(Root$8, _objectSpread(_objectSpread({
7267
+ return /* @__PURE__ */jsxRuntime.jsx(Root$8, _objectSpread(_objectSpread({
7255
7268
  "data-ui": "Breadcrumbs"
7256
7269
  }, restProps), {}, {
7257
7270
  ref,
7258
- children: items.map((item, itemIndex) => /* @__PURE__ */jsxs(Fragment$1, {
7259
- children: [itemIndex > 0 && /* @__PURE__ */jsx(Box, {
7271
+ children: items.map((item, itemIndex) => /* @__PURE__ */jsxRuntime.jsxs(react.Fragment, {
7272
+ children: [itemIndex > 0 && /* @__PURE__ */jsxRuntime.jsx(Box, {
7260
7273
  "aria-hidden": true,
7261
7274
  as: "li",
7262
7275
  paddingX: space,
7263
- children: separator || /* @__PURE__ */jsx(Text, {
7276
+ children: separator || /* @__PURE__ */jsxRuntime.jsx(Text, {
7264
7277
  muted: true,
7265
7278
  children: "/"
7266
7279
  })
7267
- }), /* @__PURE__ */jsx(Box, {
7280
+ }), /* @__PURE__ */jsxRuntime.jsx(Box, {
7268
7281
  as: "li",
7269
7282
  children: item
7270
7283
  })]
@@ -7304,21 +7317,21 @@ function responsiveDialogPositionStyle(props) {
7304
7317
  }));
7305
7318
  }
7306
7319
  const key$3 = Symbol.for("@sanity/ui/context/dialog");
7307
- globalScope[key$3] = globalScope[key$3] || createContext({
7320
+ globalScope[key$3] = globalScope[key$3] || react.createContext({
7308
7321
  version: 0
7309
7322
  });
7310
7323
  const DialogContext = globalScope[key$3];
7311
7324
  function useDialog() {
7312
- return useContext(DialogContext);
7325
+ return react.useContext(DialogContext);
7313
7326
  }
7314
- const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
7315
- 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"])));
7316
- 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"])));
7317
- const DialogLayout = styled(Flex)(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n flex: 1;\n min-height: 0;\n width: 100%;\n"])));
7318
- 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"])));
7319
- const DialogContent = styled(Box)(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["\n position: relative;\n z-index: 1;\n overflow: auto;\n outline: none;\n"])));
7320
- 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"])));
7321
- const DialogCard = forwardRef(function DialogCard2(props, ref) {
7327
+ const Root$7 = styled__default.default(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
7328
+ 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"])));
7329
+ 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"])));
7330
+ const DialogLayout = styled__default.default(Flex)(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n flex: 1;\n min-height: 0;\n width: 100%;\n"])));
7331
+ 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"])));
7332
+ const DialogContent = styled__default.default(Box)(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["\n position: relative;\n z-index: 1;\n overflow: auto;\n outline: none;\n"])));
7333
+ 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"])));
7334
+ const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
7322
7335
  const {
7323
7336
  __unstable_autoFocus: autoFocus,
7324
7337
  __unstable_hideCloseButton: hideCloseButton,
@@ -7338,8 +7351,8 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
7338
7351
  const shadow = useArrayProp(shadowProp);
7339
7352
  const width = useArrayProp(widthProp);
7340
7353
  const forwardedRef = useForwardedRef(ref);
7341
- const [rootElement, setRootElement] = useState(null);
7342
- const localContentRef = useRef(null);
7354
+ const [rootElement, setRootElement] = react.useState(null);
7355
+ const localContentRef = react.useRef(null);
7343
7356
  const layer = useLayer();
7344
7357
  const {
7345
7358
  isTopLayer
@@ -7347,13 +7360,13 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
7347
7360
  const labelId = "".concat(id, "_label");
7348
7361
  const showCloseButton = Boolean(onClose) && hideCloseButton === false;
7349
7362
  const showHeader = Boolean(header) || showCloseButton;
7350
- useEffect(() => {
7363
+ react.useEffect(() => {
7351
7364
  if (!autoFocus) return;
7352
7365
  if (forwardedRef.current) {
7353
7366
  focusFirstDescendant(forwardedRef.current);
7354
7367
  }
7355
7368
  }, [autoFocus, forwardedRef]);
7356
- useGlobalKeyDown(useCallback(event => {
7369
+ useGlobalKeyDown(react.useCallback(event => {
7357
7370
  if (!isTopLayer || !onClose) return;
7358
7371
  if (event.key === "Escape") {
7359
7372
  event.preventDefault();
@@ -7361,63 +7374,63 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
7361
7374
  onClose();
7362
7375
  }
7363
7376
  }, [isTopLayer, onClose]));
7364
- useClickOutside(useCallback(() => {
7377
+ useClickOutside(react.useCallback(() => {
7365
7378
  if (!isTopLayer || !onClickOutside) return;
7366
7379
  onClickOutside();
7367
7380
  }, [isTopLayer, onClickOutside]), [rootElement]);
7368
- const setRef = useCallback(el => {
7381
+ const setRef = react.useCallback(el => {
7369
7382
  setRootElement(el);
7370
7383
  forwardedRef.current = el;
7371
7384
  }, [forwardedRef]);
7372
- const setContentRef = useCallback(el => {
7385
+ const setContentRef = react.useCallback(el => {
7373
7386
  localContentRef.current = el;
7374
7387
  if (typeof contentRef === "function") contentRef(el);else if (contentRef) contentRef.current = el;
7375
7388
  }, [contentRef]);
7376
- return /* @__PURE__ */jsx(DialogContainer, {
7389
+ return /* @__PURE__ */jsxRuntime.jsx(DialogContainer, {
7377
7390
  "data-ui": "DialogCard",
7378
7391
  width,
7379
- children: /* @__PURE__ */jsx(DialogCardRoot, {
7392
+ children: /* @__PURE__ */jsxRuntime.jsx(DialogCardRoot, {
7380
7393
  radius,
7381
7394
  ref: setRef,
7382
7395
  scheme,
7383
7396
  shadow,
7384
- children: /* @__PURE__ */jsxs(DialogLayout, {
7397
+ children: /* @__PURE__ */jsxRuntime.jsxs(DialogLayout, {
7385
7398
  direction: "column",
7386
- children: [showHeader && /* @__PURE__ */jsx(DialogHeader, {
7387
- children: /* @__PURE__ */jsxs(Flex, {
7388
- children: [/* @__PURE__ */jsx(Box, {
7399
+ children: [showHeader && /* @__PURE__ */jsxRuntime.jsx(DialogHeader, {
7400
+ children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
7401
+ children: [/* @__PURE__ */jsxRuntime.jsx(Box, {
7389
7402
  flex: 1,
7390
7403
  padding: 4,
7391
- children: header && /* @__PURE__ */jsx(Text, {
7404
+ children: header && /* @__PURE__ */jsxRuntime.jsx(Text, {
7392
7405
  id: labelId,
7393
7406
  weight: "semibold",
7394
7407
  children: header
7395
7408
  })
7396
- }), showCloseButton && /* @__PURE__ */jsx(Box, {
7409
+ }), showCloseButton && /* @__PURE__ */jsxRuntime.jsx(Box, {
7397
7410
  padding: 2,
7398
- children: /* @__PURE__ */jsx(Button, {
7411
+ children: /* @__PURE__ */jsxRuntime.jsx(Button, {
7399
7412
  "aria-label": "Close dialog",
7400
7413
  disabled: !onClose,
7401
- icon: CloseIcon,
7414
+ icon: icons.CloseIcon,
7402
7415
  mode: "bleed",
7403
7416
  onClick: onClose,
7404
7417
  padding: 3
7405
7418
  })
7406
7419
  })]
7407
7420
  })
7408
- }), /* @__PURE__ */jsx(DialogContent, {
7421
+ }), /* @__PURE__ */jsxRuntime.jsx(DialogContent, {
7409
7422
  flex: 1,
7410
7423
  ref: setContentRef,
7411
7424
  tabIndex: -1,
7412
7425
  children
7413
- }), footer && /* @__PURE__ */jsx(DialogFooter, {
7426
+ }), footer && /* @__PURE__ */jsxRuntime.jsx(DialogFooter, {
7414
7427
  children: footer
7415
7428
  })]
7416
7429
  })
7417
7430
  })
7418
7431
  });
7419
7432
  });
7420
- const Dialog = forwardRef(function Dialog2(props, ref) {
7433
+ const Dialog = react.forwardRef(function Dialog2(props, ref) {
7421
7434
  var _a;
7422
7435
  const dialog = useDialog();
7423
7436
  const theme = useTheme();
@@ -7446,10 +7459,10 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
7446
7459
  const position = useArrayProp(positionProp);
7447
7460
  const width = useArrayProp(widthProp);
7448
7461
  const zOffset = useArrayProp(zOffsetProp);
7449
- const preDivRef = useRef(null);
7450
- const postDivRef = useRef(null);
7451
- const cardRef = useRef(null);
7452
- const handleFocus = useCallback(event => {
7462
+ const preDivRef = react.useRef(null);
7463
+ const postDivRef = react.useRef(null);
7464
+ const cardRef = react.useRef(null);
7465
+ const handleFocus = react.useCallback(event => {
7453
7466
  const target = event.target;
7454
7467
  const cardElement = cardRef.current;
7455
7468
  if (!cardElement) {
@@ -7465,9 +7478,9 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
7465
7478
  }
7466
7479
  }, []);
7467
7480
  const labelId = "".concat(id, "_label");
7468
- return /* @__PURE__ */jsx(Portal, {
7481
+ return /* @__PURE__ */jsxRuntime.jsx(Portal, {
7469
7482
  __unstable_name: portal,
7470
- children: /* @__PURE__ */jsxs(Root$7, _objectSpread(_objectSpread({}, restProps), {}, {
7483
+ children: /* @__PURE__ */jsxRuntime.jsxs(Root$7, _objectSpread(_objectSpread({}, restProps), {}, {
7471
7484
  $padding: padding,
7472
7485
  $position: position,
7473
7486
  "aria-labelledby": labelId,
@@ -7478,10 +7491,10 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
7478
7491
  ref,
7479
7492
  role: "dialog",
7480
7493
  zOffset,
7481
- children: [/* @__PURE__ */jsx("div", {
7494
+ children: [/* @__PURE__ */jsxRuntime.jsx("div", {
7482
7495
  ref: preDivRef,
7483
7496
  tabIndex: 0
7484
- }), /* @__PURE__ */jsx(DialogCard, {
7497
+ }), /* @__PURE__ */jsxRuntime.jsx(DialogCard, {
7485
7498
  __unstable_autoFocus: autoFocus,
7486
7499
  __unstable_hideCloseButton: hideCloseButton,
7487
7500
  contentRef,
@@ -7496,7 +7509,7 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
7496
7509
  shadow: cardShadow,
7497
7510
  width,
7498
7511
  children
7499
- }), /* @__PURE__ */jsx("div", {
7512
+ }), /* @__PURE__ */jsxRuntime.jsx("div", {
7500
7513
  ref: postDivRef,
7501
7514
  tabIndex: 0
7502
7515
  })]
@@ -7509,19 +7522,19 @@ function DialogProvider(props) {
7509
7522
  position,
7510
7523
  zOffset
7511
7524
  } = props;
7512
- const contextValue = useMemo(() => ({
7525
+ const contextValue = react.useMemo(() => ({
7513
7526
  version: 0,
7514
7527
  position,
7515
7528
  zOffset
7516
7529
  }), [position, zOffset]);
7517
- return /* @__PURE__ */jsx(DialogContext.Provider, {
7530
+ return /* @__PURE__ */jsxRuntime.jsx(DialogContext.Provider, {
7518
7531
  value: contextValue,
7519
7532
  children
7520
7533
  });
7521
7534
  }
7522
- const Root$6 = styled.kbd(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["\n &:not([hidden]) {\n display: block;\n }\n font: inherit;\n"])));
7523
- const Key = styled(KBD)(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n &:not([hidden]) {\n display: block;\n }\n"])));
7524
- const Hotkeys = forwardRef(function Hotkeys2(props, ref) {
7535
+ const Root$6 = styled__default.default.kbd(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["\n &:not([hidden]) {\n display: block;\n }\n font: inherit;\n"])));
7536
+ const Key = styled__default.default(KBD)(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n &:not([hidden]) {\n display: block;\n }\n"])));
7537
+ const Hotkeys = react.forwardRef(function Hotkeys2(props, ref) {
7525
7538
  const {
7526
7539
  fontSize,
7527
7540
  keys,
@@ -7532,16 +7545,16 @@ const Hotkeys = forwardRef(function Hotkeys2(props, ref) {
7532
7545
  restProps = _objectWithoutProperties(props, _excluded34);
7533
7546
  const space = useArrayProp(spaceProp);
7534
7547
  if (!keys || keys.length === 0) {
7535
- return /* @__PURE__ */jsx(Fragment, {});
7548
+ return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {});
7536
7549
  }
7537
- return /* @__PURE__ */jsx(Root$6, _objectSpread(_objectSpread({
7550
+ return /* @__PURE__ */jsxRuntime.jsx(Root$6, _objectSpread(_objectSpread({
7538
7551
  "data-ui": "Hotkeys"
7539
7552
  }, restProps), {}, {
7540
7553
  ref,
7541
- children: /* @__PURE__ */jsx(Inline, {
7554
+ children: /* @__PURE__ */jsxRuntime.jsx(Inline, {
7542
7555
  as: "span",
7543
7556
  space,
7544
- children: keys.map((key, i) => /* @__PURE__ */jsx(Key, {
7557
+ children: keys.map((key, i) => /* @__PURE__ */jsxRuntime.jsx(Key, {
7545
7558
  fontSize,
7546
7559
  padding,
7547
7560
  radius,
@@ -7551,7 +7564,7 @@ const Hotkeys = forwardRef(function Hotkeys2(props, ref) {
7551
7564
  }));
7552
7565
  });
7553
7566
  const key$2 = Symbol.for("@sanity/ui/context/menu");
7554
- globalScope[key$2] = globalScope[key$2] || createContext(null);
7567
+ globalScope[key$2] = globalScope[key$2] || react.createContext(null);
7555
7568
  const MenuContext = globalScope[key$2];
7556
7569
  function _isFocusable(element) {
7557
7570
  return isHTMLAnchorElement(element) && element.getAttribute("data-disabled") !== "true" || isHTMLButtonElement(element) && !element.disabled;
@@ -7603,17 +7616,17 @@ function useMenuController(props) {
7603
7616
  originElement,
7604
7617
  shouldFocus
7605
7618
  } = props;
7606
- const elementsRef = useRef([]);
7607
- const [rootElement, setRootElement] = useState(null);
7608
- const [activeIndex, _setActiveIndex] = useState(-1);
7609
- const activeIndexRef = useRef(activeIndex);
7619
+ const elementsRef = react.useRef([]);
7620
+ const [rootElement, setRootElement] = react.useState(null);
7621
+ const [activeIndex, _setActiveIndex] = react.useState(-1);
7622
+ const activeIndexRef = react.useRef(activeIndex);
7610
7623
  const activeElement = elementsRef.current[activeIndex] || null;
7611
7624
  const mounted = Boolean(rootElement);
7612
- const setActiveIndex = useCallback(nextActiveIndex => {
7625
+ const setActiveIndex = react.useCallback(nextActiveIndex => {
7613
7626
  _setActiveIndex(nextActiveIndex);
7614
7627
  activeIndexRef.current = nextActiveIndex;
7615
7628
  }, []);
7616
- const mount = useCallback((element, selected) => {
7629
+ const mount = react.useCallback((element, selected) => {
7617
7630
  if (!element) return () => void 0;
7618
7631
  if (elementsRef.current.indexOf(element) === -1) {
7619
7632
  elementsRef.current.push(element);
@@ -7630,7 +7643,7 @@ function useMenuController(props) {
7630
7643
  }
7631
7644
  };
7632
7645
  }, [rootElement, setActiveIndex]);
7633
- const handleKeyDown = useCallback(event => {
7646
+ const handleKeyDown = react.useCallback(event => {
7634
7647
  if (event.key === "Tab") {
7635
7648
  if (originElement) {
7636
7649
  originElement.focus();
@@ -7689,16 +7702,16 @@ function useMenuController(props) {
7689
7702
  onKeyDown(event);
7690
7703
  }
7691
7704
  }, [onKeyDown, originElement, setActiveIndex]);
7692
- const handleItemMouseEnter = useCallback(event => {
7705
+ const handleItemMouseEnter = react.useCallback(event => {
7693
7706
  const element = event.currentTarget;
7694
7707
  const currentIndex = elementsRef.current.indexOf(element);
7695
7708
  setActiveIndex(currentIndex);
7696
7709
  }, [setActiveIndex]);
7697
- const handleItemMouseLeave = useCallback(() => {
7710
+ const handleItemMouseLeave = react.useCallback(() => {
7698
7711
  rootElement == null ? void 0 : rootElement.focus();
7699
7712
  setActiveIndex(-1);
7700
7713
  }, [rootElement, setActiveIndex]);
7701
- useEffect(() => {
7714
+ react.useEffect(() => {
7702
7715
  if (!mounted) return;
7703
7716
  const rafId = window.requestAnimationFrame(() => {
7704
7717
  const _activeIndex = activeIndexRef.current;
@@ -7741,8 +7754,8 @@ function useMenuController(props) {
7741
7754
  setRootElement
7742
7755
  };
7743
7756
  }
7744
- const Root$5 = styled(Box)(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["\n outline: none;\n overflow: auto;\n"])));
7745
- const Menu = forwardRef(function Menu2(props, ref) {
7757
+ const Root$5 = styled__default.default(Box)(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["\n outline: none;\n overflow: auto;\n"])));
7758
+ const Menu = react.forwardRef(function Menu2(props, ref) {
7746
7759
  const {
7747
7760
  children,
7748
7761
  focusFirst,
@@ -7777,26 +7790,26 @@ const Menu = forwardRef(function Menu2(props, ref) {
7777
7790
  originElement,
7778
7791
  shouldFocus
7779
7792
  });
7780
- const handleRefChange = useCallback(el => {
7793
+ const handleRefChange = react.useCallback(el => {
7781
7794
  setRootElement(el);
7782
7795
  forwardedRef.current = el;
7783
7796
  }, [forwardedRef, setRootElement]);
7784
- useEffect(() => {
7797
+ react.useEffect(() => {
7785
7798
  if (onItemSelect) onItemSelect(activeIndex);
7786
7799
  }, [activeIndex, onItemSelect]);
7787
- useClickOutside(useCallback(event => isTopLayer && onClickOutside && onClickOutside(event), [isTopLayer, onClickOutside]), [rootElement]);
7788
- useGlobalKeyDown(useCallback(event => {
7800
+ useClickOutside(react.useCallback(event => isTopLayer && onClickOutside && onClickOutside(event), [isTopLayer, onClickOutside]), [rootElement]);
7801
+ useGlobalKeyDown(react.useCallback(event => {
7789
7802
  if (!isTopLayer) return;
7790
7803
  if (event.key === "Escape") {
7791
7804
  event.stopPropagation();
7792
7805
  if (onEscape) onEscape();
7793
7806
  }
7794
7807
  }, [isTopLayer, onEscape]));
7795
- useEffect(() => {
7808
+ react.useEffect(() => {
7796
7809
  if (!rootElement || !registerElement) return;
7797
7810
  return registerElement(rootElement);
7798
7811
  }, [registerElement, rootElement]);
7799
- const value = useMemo(() => ({
7812
+ const value = react.useMemo(() => ({
7800
7813
  version: 0,
7801
7814
  activeElement,
7802
7815
  activeIndex,
@@ -7810,9 +7823,9 @@ const Menu = forwardRef(function Menu2(props, ref) {
7810
7823
  onMouseEnter: handleItemMouseEnter,
7811
7824
  onMouseLeave: handleItemMouseLeave
7812
7825
  }), [activeElement, activeIndex, mount, handleItemMouseEnter, handleItemMouseLeave, onClickOutside, onEscape, onItemClick, registerElement]);
7813
- return /* @__PURE__ */jsx(MenuContext.Provider, {
7826
+ return /* @__PURE__ */jsxRuntime.jsx(MenuContext.Provider, {
7814
7827
  value,
7815
- children: /* @__PURE__ */jsx(Root$5, _objectSpread(_objectSpread({
7828
+ children: /* @__PURE__ */jsxRuntime.jsx(Root$5, _objectSpread(_objectSpread({
7816
7829
  "data-ui": "Menu"
7817
7830
  }, restProps), {}, {
7818
7831
  onKeyDown: handleKeyDown,
@@ -7820,14 +7833,14 @@ const Menu = forwardRef(function Menu2(props, ref) {
7820
7833
  ref: handleRefChange,
7821
7834
  role: "menu",
7822
7835
  tabIndex: -1,
7823
- children: /* @__PURE__ */jsx(Stack, {
7836
+ children: /* @__PURE__ */jsxRuntime.jsx(Stack, {
7824
7837
  space,
7825
7838
  children
7826
7839
  })
7827
7840
  }))
7828
7841
  });
7829
7842
  });
7830
- const MenuButton = forwardRef(function MenuButton2(props, ref) {
7843
+ const MenuButton = react.forwardRef(function MenuButton2(props, ref) {
7831
7844
  const {
7832
7845
  __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = false,
7833
7846
  boundaryElement: deprecated_boundaryElement,
@@ -7842,24 +7855,24 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
7842
7855
  popoverRadius: deprecated_popoverRadius,
7843
7856
  preventOverflow: deprecated_preventOverflow
7844
7857
  } = props;
7845
- const [open, setOpen] = useState(false);
7846
- const [shouldFocus, setShouldFocus] = useState(null);
7847
- const [buttonElement, setButtonElement] = useState(null);
7848
- const [menuElements, setChildMenuElements] = useState([]);
7849
- const openRef = useRef(open);
7850
- useEffect(() => {
7858
+ const [open, setOpen] = react.useState(false);
7859
+ const [shouldFocus, setShouldFocus] = react.useState(null);
7860
+ const [buttonElement, setButtonElement] = react.useState(null);
7861
+ const [menuElements, setChildMenuElements] = react.useState([]);
7862
+ const openRef = react.useRef(open);
7863
+ react.useEffect(() => {
7851
7864
  if (onClose && !open && openRef.current) {
7852
7865
  onClose();
7853
7866
  }
7854
7867
  }, [onClose, open]);
7855
- useEffect(() => {
7868
+ react.useEffect(() => {
7856
7869
  openRef.current = open;
7857
7870
  }, [open]);
7858
- const handleButtonClick = useCallback(() => {
7871
+ const handleButtonClick = react.useCallback(() => {
7859
7872
  setOpen(v => !v);
7860
7873
  setShouldFocus(null);
7861
7874
  }, []);
7862
- const handleButtonKeyDown = useCallback(event => {
7875
+ const handleButtonKeyDown = react.useCallback(event => {
7863
7876
  if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
7864
7877
  event.preventDefault();
7865
7878
  setOpen(true);
@@ -7873,7 +7886,7 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
7873
7886
  return;
7874
7887
  }
7875
7888
  }, []);
7876
- const handleMenuClickOutside = useCallback(event => {
7889
+ const handleMenuClickOutside = react.useCallback(event => {
7877
7890
  const target = event.target;
7878
7891
  if (!(target instanceof Node)) {
7879
7892
  return;
@@ -7888,12 +7901,12 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
7888
7901
  }
7889
7902
  setOpen(false);
7890
7903
  }, [buttonElement, menuElements]);
7891
- const handleMenuEscape = useCallback(() => {
7904
+ const handleMenuEscape = react.useCallback(() => {
7892
7905
  setOpen(false);
7893
7906
  if (disableRestoreFocusOnClose) return;
7894
7907
  if (buttonElement) buttonElement.focus();
7895
7908
  }, [buttonElement, disableRestoreFocusOnClose]);
7896
- const handleBlur = useCallback(event => {
7909
+ const handleBlur = react.useCallback(event => {
7897
7910
  const target = event.relatedTarget;
7898
7911
  if (!(target instanceof Node)) {
7899
7912
  return;
@@ -7905,12 +7918,12 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
7905
7918
  }
7906
7919
  setOpen(false);
7907
7920
  }, [menuElements]);
7908
- const handleItemClick = useCallback(() => {
7921
+ const handleItemClick = react.useCallback(() => {
7909
7922
  setOpen(false);
7910
7923
  if (disableRestoreFocusOnClose) return;
7911
7924
  if (buttonElement) buttonElement.focus();
7912
7925
  }, [buttonElement, disableRestoreFocusOnClose]);
7913
- const registerElement = useCallback(el => {
7926
+ const registerElement = react.useCallback(el => {
7914
7927
  setChildMenuElements(els => els.concat([el]));
7915
7928
  return () => {
7916
7929
  setChildMenuElements(els => {
@@ -7918,7 +7931,7 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
7918
7931
  });
7919
7932
  };
7920
7933
  }, []);
7921
- const menuProps = useMemo(() => ({
7934
+ const menuProps = react.useMemo(() => ({
7922
7935
  "aria-labelledby": id,
7923
7936
  onBlurCapture: handleBlur,
7924
7937
  onClickOutside: handleMenuClickOutside,
@@ -7928,8 +7941,8 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
7928
7941
  registerElement,
7929
7942
  shouldFocus
7930
7943
  }), [buttonElement, handleMenuClickOutside, handleMenuEscape, handleItemClick, id, handleBlur, registerElement, shouldFocus]);
7931
- const menu = isElement$1(menuProp) ? cloneElement(menuProp, menuProps) : null;
7932
- const setButtonRef = useCallback(el => {
7944
+ const menu = ReactIs.isElement(menuProp) ? react.cloneElement(menuProp, menuProps) : null;
7945
+ const setButtonRef = react.useCallback(el => {
7933
7946
  if (typeof ref === "function") {
7934
7947
  ref(el);
7935
7948
  } else if (ref) {
@@ -7937,7 +7950,7 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
7937
7950
  }
7938
7951
  setButtonElement(el);
7939
7952
  }, [ref]);
7940
- const button = useMemo(() => isElement$1(buttonProp) ? cloneElement(buttonProp, {
7953
+ const button = react.useMemo(() => ReactIs.isElement(buttonProp) ? react.cloneElement(buttonProp, {
7941
7954
  "data-ui": "MenuButton",
7942
7955
  id,
7943
7956
  onClick: handleButtonClick,
@@ -7947,7 +7960,7 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
7947
7960
  ref: setButtonRef,
7948
7961
  selected: open
7949
7962
  }) : null, [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef]);
7950
- const popoverProps = useMemo(() => _objectSpread({
7963
+ const popoverProps = react.useMemo(() => _objectSpread({
7951
7964
  boundaryElement: deprecated_boundaryElement,
7952
7965
  overflow: "auto",
7953
7966
  placement: deprecated_placement,
@@ -7956,17 +7969,17 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
7956
7969
  radius: deprecated_popoverRadius,
7957
7970
  scheme: deprecated_popoverScheme
7958
7971
  }, popover || {}), [deprecated_boundaryElement, deprecated_placement, deprecated_popoverRadius, deprecated_popoverScheme, deprecated_portal, deprecated_preventOverflow, popover]);
7959
- return /* @__PURE__ */jsx(Popover, _objectSpread(_objectSpread({
7972
+ return /* @__PURE__ */jsxRuntime.jsx(Popover, _objectSpread(_objectSpread({
7960
7973
  "data-ui": "MenuButton__popover"
7961
7974
  }, popoverProps), {}, {
7962
7975
  content: menu,
7963
7976
  open,
7964
- children: button || /* @__PURE__ */jsx(Fragment, {})
7977
+ children: button || /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {})
7965
7978
  }));
7966
7979
  });
7967
- const MenuDivider = styled.hr(_templateObject76 || (_templateObject76 = _taggedTemplateLiteral(["\n height: 1px;\n border: 0;\n background: var(--card-hairline-soft-color);\n margin: 0;\n"])));
7980
+ 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"])));
7968
7981
  function selectableBaseStyle() {
7969
- 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 "])));
7982
+ 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 "])));
7970
7983
  }
7971
7984
  function selectableColorStyle(props) {
7972
7985
  var _a, _b;
@@ -7980,11 +7993,11 @@ function selectableColorStyle(props) {
7980
7993
  selectable
7981
7994
  } = theme.sanity.color;
7982
7995
  const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
7983
- 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);
7996
+ 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);
7984
7997
  }
7985
- const Selectable = styled(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
7998
+ const Selectable = styled__default.default(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
7986
7999
  function useMenu() {
7987
- const value = useContext(MenuContext);
8000
+ const value = react.useContext(MenuContext);
7988
8001
  if (!value) {
7989
8002
  throw new Error("useMenu(): missing context value");
7990
8003
  }
@@ -8018,17 +8031,17 @@ function MenuGroup(props) {
8018
8031
  onItemMouseEnter = menu.onMouseEnter,
8019
8032
  registerElement
8020
8033
  } = menu;
8021
- const [rootElement, setRootElement] = useState(null);
8022
- const [open, setOpen] = useState(false);
8023
- const shouldFocusRef = useRef(null);
8034
+ const [rootElement, setRootElement] = react.useState(null);
8035
+ const [open, setOpen] = react.useState(false);
8036
+ const shouldFocusRef = react.useRef(null);
8024
8037
  const active = Boolean(activeElement) && activeElement === rootElement;
8025
- const [withinMenu, setWithinMenu] = useState(false);
8026
- const handleMouseEnter = useCallback(event => {
8038
+ const [withinMenu, setWithinMenu] = react.useState(false);
8039
+ const handleMouseEnter = react.useCallback(event => {
8027
8040
  setWithinMenu(false);
8028
8041
  onItemMouseEnter(event);
8029
8042
  setOpen(true);
8030
8043
  }, [onItemMouseEnter]);
8031
- const handleMenuKeyDown = useCallback(event => {
8044
+ const handleMenuKeyDown = react.useCallback(event => {
8032
8045
  if (event.key === "ArrowLeft") {
8033
8046
  event.stopPropagation();
8034
8047
  setOpen(false);
@@ -8037,7 +8050,7 @@ function MenuGroup(props) {
8037
8050
  });
8038
8051
  }
8039
8052
  }, [rootElement]);
8040
- const handleClick = useCallback(event => {
8053
+ const handleClick = react.useCallback(event => {
8041
8054
  if (onClick) onClick(event);
8042
8055
  shouldFocusRef.current = "first";
8043
8056
  setOpen(true);
@@ -8045,19 +8058,19 @@ function MenuGroup(props) {
8045
8058
  shouldFocusRef.current = null;
8046
8059
  });
8047
8060
  }, [onClick]);
8048
- const handleChildItemClick = useCallback(() => {
8061
+ const handleChildItemClick = react.useCallback(() => {
8049
8062
  setOpen(false);
8050
8063
  if (onItemClick) onItemClick();
8051
8064
  }, [onItemClick]);
8052
- const handleMenuMouseEnter = useCallback(() => setWithinMenu(true), []);
8053
- useEffect(() => mount(rootElement), [mount, rootElement]);
8054
- useEffect(() => {
8065
+ const handleMenuMouseEnter = react.useCallback(() => setWithinMenu(true), []);
8066
+ react.useEffect(() => mount(rootElement), [mount, rootElement]);
8067
+ react.useEffect(() => {
8055
8068
  if (!active) setOpen(false);
8056
8069
  }, [active]);
8057
- useEffect(() => {
8070
+ react.useEffect(() => {
8058
8071
  if (!open) setWithinMenu(false);
8059
8072
  }, [open]);
8060
- const childMenu = /* @__PURE__ */jsx(Menu, {
8073
+ const childMenu = /* @__PURE__ */jsxRuntime.jsx(Menu, {
8061
8074
  onClickOutside,
8062
8075
  onEscape,
8063
8076
  onItemClick: handleChildItemClick,
@@ -8067,7 +8080,7 @@ function MenuGroup(props) {
8067
8080
  shouldFocus: shouldFocusRef.current,
8068
8081
  children
8069
8082
  });
8070
- const handleKeyDown = useCallback(event => {
8083
+ const handleKeyDown = react.useCallback(event => {
8071
8084
  const target = event.currentTarget;
8072
8085
  if (document.activeElement !== target) {
8073
8086
  return;
@@ -8082,11 +8095,11 @@ function MenuGroup(props) {
8082
8095
  return;
8083
8096
  }
8084
8097
  }, []);
8085
- return /* @__PURE__ */jsx(Popover, _objectSpread(_objectSpread({}, popover), {}, {
8098
+ return /* @__PURE__ */jsxRuntime.jsx(Popover, _objectSpread(_objectSpread({}, popover), {}, {
8086
8099
  content: childMenu,
8087
8100
  "data-ui": "MenuGroup__popover",
8088
8101
  open,
8089
- children: /* @__PURE__ */jsx(Selectable, _objectSpread(_objectSpread({
8102
+ children: /* @__PURE__ */jsxRuntime.jsx(Selectable, _objectSpread(_objectSpread({
8090
8103
  "data-as": as,
8091
8104
  "data-ui": "MenuGroup",
8092
8105
  forwardedAs: as
@@ -8102,25 +8115,25 @@ function MenuGroup(props) {
8102
8115
  ref: setRootElement,
8103
8116
  tabIndex: -1,
8104
8117
  type: as === "button" ? "button" : void 0,
8105
- children: /* @__PURE__ */jsx(Box, {
8118
+ children: /* @__PURE__ */jsxRuntime.jsx(Box, {
8106
8119
  padding,
8107
- children: /* @__PURE__ */jsxs(Flex, {
8108
- children: [icon && /* @__PURE__ */jsxs(Text, {
8120
+ children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
8121
+ children: [icon && /* @__PURE__ */jsxRuntime.jsxs(Text, {
8109
8122
  size: fontSize,
8110
- children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
8111
- }), /* @__PURE__ */jsx(Box, {
8123
+ children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
8124
+ }), /* @__PURE__ */jsxRuntime.jsx(Box, {
8112
8125
  flex: 1,
8113
8126
  marginLeft: icon ? space : void 0,
8114
- children: /* @__PURE__ */jsx(Text, {
8127
+ children: /* @__PURE__ */jsxRuntime.jsx(Text, {
8115
8128
  size: fontSize,
8116
8129
  textOverflow: "ellipsis",
8117
8130
  children: text
8118
8131
  })
8119
- }), /* @__PURE__ */jsx(Box, {
8132
+ }), /* @__PURE__ */jsxRuntime.jsx(Box, {
8120
8133
  marginLeft: space,
8121
- children: /* @__PURE__ */jsx(Text, {
8134
+ children: /* @__PURE__ */jsxRuntime.jsx(Text, {
8122
8135
  size: fontSize,
8123
- children: /* @__PURE__ */jsx(ChevronRightIcon, {})
8136
+ children: /* @__PURE__ */jsxRuntime.jsx(icons.ChevronRightIcon, {})
8124
8137
  })
8125
8138
  })]
8126
8139
  })
@@ -8128,7 +8141,7 @@ function MenuGroup(props) {
8128
8141
  }))
8129
8142
  }));
8130
8143
  }
8131
- const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
8144
+ const MenuItem = react.forwardRef(function MenuItem2(props, forwardedRef) {
8132
8145
  const {
8133
8146
  as = "button",
8134
8147
  children,
@@ -8161,16 +8174,16 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
8161
8174
  onItemMouseEnter = menu.onMouseEnter,
8162
8175
  onItemMouseLeave = menu.onMouseLeave
8163
8176
  } = menu;
8164
- const [rootElement, setRootElement] = useState(null);
8177
+ const [rootElement, setRootElement] = react.useState(null);
8165
8178
  const active = Boolean(activeElement) && activeElement === rootElement;
8166
- useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
8179
+ react.useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
8167
8180
  const ref = useForwardedRef(forwardedRef);
8168
- const handleClick = useCallback(event => {
8181
+ const handleClick = react.useCallback(event => {
8169
8182
  if (disabled) return;
8170
8183
  if (onClick) onClick(event);
8171
8184
  if (onItemClick) onItemClick();
8172
8185
  }, [disabled, onClick, onItemClick]);
8173
- const paddingProps = useMemo(() => ({
8186
+ const paddingProps = react.useMemo(() => ({
8174
8187
  padding,
8175
8188
  paddingX,
8176
8189
  paddingY,
@@ -8179,11 +8192,11 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
8179
8192
  paddingBottom,
8180
8193
  paddingLeft
8181
8194
  }), [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]);
8182
- const setRef = useCallback(el => {
8195
+ const setRef = react.useCallback(el => {
8183
8196
  ref.current = el;
8184
8197
  setRootElement(el);
8185
8198
  }, [ref]);
8186
- return /* @__PURE__ */jsxs(Selectable, _objectSpread(_objectSpread({
8199
+ return /* @__PURE__ */jsxRuntime.jsxs(Selectable, _objectSpread(_objectSpread({
8187
8200
  "data-ui": "MenuItem"
8188
8201
  }, restProps), {}, {
8189
8202
  "aria-pressed": as === "button" && pressed,
@@ -8202,48 +8215,48 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
8202
8215
  role: "menuitem",
8203
8216
  tabIndex: -1,
8204
8217
  type: as === "button" ? "button" : void 0,
8205
- children: [(icon || text || iconRight) && /* @__PURE__ */jsx(Box, _objectSpread(_objectSpread({
8218
+ children: [(icon || text || iconRight) && /* @__PURE__ */jsxRuntime.jsx(Box, _objectSpread(_objectSpread({
8206
8219
  as: "span"
8207
8220
  }, paddingProps), {}, {
8208
- children: /* @__PURE__ */jsxs(Flex, {
8221
+ children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
8209
8222
  as: "span",
8210
- children: [icon && /* @__PURE__ */jsxs(Text, {
8223
+ children: [icon && /* @__PURE__ */jsxRuntime.jsxs(Text, {
8211
8224
  size: fontSize,
8212
- children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
8213
- }), text && /* @__PURE__ */jsx(Box, {
8225
+ children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
8226
+ }), text && /* @__PURE__ */jsxRuntime.jsx(Box, {
8214
8227
  flex: 1,
8215
8228
  marginLeft: icon ? space : void 0,
8216
8229
  marginRight: iconRight ? space : void 0,
8217
- children: /* @__PURE__ */jsx(Text, {
8230
+ children: /* @__PURE__ */jsxRuntime.jsx(Text, {
8218
8231
  size: fontSize,
8219
8232
  textOverflow: "ellipsis",
8220
8233
  children: text
8221
8234
  })
8222
- }), hotkeys && /* @__PURE__ */jsx(Box, {
8235
+ }), hotkeys && /* @__PURE__ */jsxRuntime.jsx(Box, {
8223
8236
  marginLeft: space,
8224
8237
  style: {
8225
8238
  marginTop: -4,
8226
8239
  marginBottom: -4
8227
8240
  },
8228
- children: /* @__PURE__ */jsx(Hotkeys, {
8241
+ children: /* @__PURE__ */jsxRuntime.jsx(Hotkeys, {
8229
8242
  fontSize,
8230
8243
  keys: hotkeys
8231
8244
  })
8232
- }), iconRight && /* @__PURE__ */jsxs(Text, {
8245
+ }), iconRight && /* @__PURE__ */jsxRuntime.jsxs(Text, {
8233
8246
  size: fontSize,
8234
- children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
8247
+ children: [react.isValidElement(iconRight) && iconRight, ReactIs.isValidElementType(iconRight) && react.createElement(iconRight)]
8235
8248
  })]
8236
8249
  })
8237
- })), children && /* @__PURE__ */jsx(Box, _objectSpread(_objectSpread({
8250
+ })), children && /* @__PURE__ */jsxRuntime.jsx(Box, _objectSpread(_objectSpread({
8238
8251
  as: "span"
8239
8252
  }, paddingProps), {}, {
8240
8253
  children
8241
8254
  }))]
8242
8255
  }));
8243
8256
  });
8244
- const keyframe = keyframes(_templateObject79 || (_templateObject79 = _taggedTemplateLiteral(["\n 0% {\n background-position: 100%;\n }\n 100% {\n background-position: -100%;\n }\n"])));
8245
- 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);
8246
- 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 => {
8257
+ const keyframe = styled.keyframes(_templateObject79 || (_templateObject79 = _taggedTemplateLiteral(["\n 0% {\n background-position: 100%;\n }\n 100% {\n background-position: -100%;\n }\n"])));
8258
+ 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);
8259
+ 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 => {
8247
8260
  let {
8248
8261
  $visible
8249
8262
  } = _ref24;
@@ -8252,18 +8265,18 @@ const skeletonStyle = css(_templateObject81 || (_templateObject81 = _taggedTempl
8252
8265
  let {
8253
8266
  $animated
8254
8267
  } = _ref25;
8255
- return $animated ? animation : css(_templateObject82 || (_templateObject82 = _taggedTemplateLiteral(["\n background-color: var(--card-skeleton-color-from);\n "])));
8268
+ return $animated ? animation : styled.css(_templateObject82 || (_templateObject82 = _taggedTemplateLiteral(["\n background-color: var(--card-skeleton-color-from);\n "])));
8256
8269
  });
8257
- const Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle);
8258
- const Skeleton = forwardRef(function Skeleton2(props, ref) {
8270
+ const Root$4 = styled__default.default(Box)(responsiveRadiusStyle, skeletonStyle);
8271
+ const Skeleton = react.forwardRef(function Skeleton2(props, ref) {
8259
8272
  const {
8260
8273
  animated = false,
8261
8274
  delay,
8262
8275
  radius
8263
8276
  } = props,
8264
8277
  restProps = _objectWithoutProperties(props, _excluded38);
8265
- const [visible, setVisible] = useState(delay ? false : true);
8266
- useEffect(() => {
8278
+ const [visible, setVisible] = react.useState(delay ? false : true);
8279
+ react.useEffect(() => {
8267
8280
  if (!delay) {
8268
8281
  return setVisible(true);
8269
8282
  }
@@ -8274,14 +8287,14 @@ const Skeleton = forwardRef(function Skeleton2(props, ref) {
8274
8287
  clearTimeout(timeout);
8275
8288
  };
8276
8289
  }, [delay]);
8277
- return /* @__PURE__ */jsx(Root$4, _objectSpread(_objectSpread({}, restProps), {}, {
8290
+ return /* @__PURE__ */jsxRuntime.jsx(Root$4, _objectSpread(_objectSpread({}, restProps), {}, {
8278
8291
  $animated: animated,
8279
8292
  $radius: useArrayProp(radius),
8280
8293
  $visible: visible,
8281
8294
  ref
8282
8295
  }));
8283
8296
  });
8284
- const Root$3 = styled(Skeleton)(_ref26 => {
8297
+ const Root$3 = styled__default.default(Skeleton)(_ref26 => {
8285
8298
  let {
8286
8299
  $size,
8287
8300
  $style,
@@ -8300,55 +8313,55 @@ const Root$3 = styled(Skeleton)(_ref26 => {
8300
8313
  });
8301
8314
  return styles;
8302
8315
  });
8303
- const TextSkeleton = forwardRef(function TextSkeleton2(props, ref) {
8316
+ const TextSkeleton = react.forwardRef(function TextSkeleton2(props, ref) {
8304
8317
  const {
8305
8318
  size = 2
8306
8319
  } = props,
8307
8320
  restProps = _objectWithoutProperties(props, _excluded39);
8308
8321
  const $size = useArrayProp(size);
8309
- return /* @__PURE__ */jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
8322
+ return /* @__PURE__ */jsxRuntime.jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
8310
8323
  $size,
8311
8324
  ref,
8312
8325
  $style: "text"
8313
8326
  }));
8314
8327
  });
8315
- const LabelSkeleton = forwardRef(function TextSkeleton3(props, ref) {
8328
+ const LabelSkeleton = react.forwardRef(function TextSkeleton3(props, ref) {
8316
8329
  const {
8317
8330
  size = 2
8318
8331
  } = props,
8319
8332
  restProps = _objectWithoutProperties(props, _excluded40);
8320
8333
  const $size = useArrayProp(size);
8321
- return /* @__PURE__ */jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
8334
+ return /* @__PURE__ */jsxRuntime.jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
8322
8335
  $size,
8323
8336
  ref,
8324
8337
  $style: "label"
8325
8338
  }));
8326
8339
  });
8327
- const HeadingSkeleton = forwardRef(function TextSkeleton4(props, ref) {
8340
+ const HeadingSkeleton = react.forwardRef(function TextSkeleton4(props, ref) {
8328
8341
  const {
8329
8342
  size = 2
8330
8343
  } = props,
8331
8344
  restProps = _objectWithoutProperties(props, _excluded41);
8332
8345
  const $size = useArrayProp(size);
8333
- return /* @__PURE__ */jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
8346
+ return /* @__PURE__ */jsxRuntime.jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
8334
8347
  $size,
8335
8348
  ref,
8336
8349
  $style: "heading"
8337
8350
  }));
8338
8351
  });
8339
- const CodeSkeleton = forwardRef(function TextSkeleton5(props, ref) {
8352
+ const CodeSkeleton = react.forwardRef(function TextSkeleton5(props, ref) {
8340
8353
  const {
8341
8354
  size = 2
8342
8355
  } = props,
8343
8356
  restProps = _objectWithoutProperties(props, _excluded42);
8344
8357
  const $size = useArrayProp(size);
8345
- return /* @__PURE__ */jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
8358
+ return /* @__PURE__ */jsxRuntime.jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
8346
8359
  $size,
8347
8360
  ref,
8348
8361
  $style: "code"
8349
8362
  }));
8350
8363
  });
8351
- const Tab = forwardRef(function Tab2(props, forwardedRef) {
8364
+ const Tab = react.forwardRef(function Tab2(props, forwardedRef) {
8352
8365
  const {
8353
8366
  icon,
8354
8367
  id,
@@ -8361,17 +8374,17 @@ const Tab = forwardRef(function Tab2(props, forwardedRef) {
8361
8374
  selected
8362
8375
  } = props,
8363
8376
  restProps = _objectWithoutProperties(props, _excluded43);
8364
- const elementRef = useRef(null);
8365
- const focusedRef = useRef(false);
8366
- const handleBlur = useCallback(() => {
8377
+ const elementRef = react.useRef(null);
8378
+ const focusedRef = react.useRef(false);
8379
+ const handleBlur = react.useCallback(() => {
8367
8380
  focusedRef.current = false;
8368
8381
  }, []);
8369
- const handleFocus = useCallback(event => {
8382
+ const handleFocus = react.useCallback(event => {
8370
8383
  focusedRef.current = true;
8371
8384
  if (onFocus) onFocus(event);
8372
8385
  }, [onFocus]);
8373
8386
  const ref = useForwardedRef(forwardedRef);
8374
- useEffect(() => {
8387
+ react.useEffect(() => {
8375
8388
  if (focused && !focusedRef.current) {
8376
8389
  if (elementRef.current) elementRef.current.focus();
8377
8390
  focusedRef.current = true;
@@ -8381,7 +8394,7 @@ const Tab = forwardRef(function Tab2(props, forwardedRef) {
8381
8394
  elementRef.current = el;
8382
8395
  ref.current = el;
8383
8396
  };
8384
- return /* @__PURE__ */jsx(Button, _objectSpread(_objectSpread({
8397
+ return /* @__PURE__ */jsxRuntime.jsx(Button, _objectSpread(_objectSpread({
8385
8398
  "data-ui": "Tab"
8386
8399
  }, restProps), {}, {
8387
8400
  "aria-selected": selected ? "true" : "false",
@@ -8404,23 +8417,23 @@ const Tab = forwardRef(function Tab2(props, forwardedRef) {
8404
8417
  function _isReactElement(node) {
8405
8418
  return Boolean(node);
8406
8419
  }
8407
- const TabList = forwardRef(function TabList2(props, ref) {
8420
+ const TabList = react.forwardRef(function TabList2(props, ref) {
8408
8421
  const {
8409
8422
  children: childrenProp
8410
8423
  } = props,
8411
8424
  restProps = _objectWithoutProperties(props, _excluded44);
8412
- const [focusedIndex, setFocusedIndex] = useState(-1);
8413
- const children = useMemo(() => childrenProp.filter(_isReactElement), [childrenProp]);
8414
- const tabs = children.map((child, childIndex) => cloneElement(child, {
8425
+ const [focusedIndex, setFocusedIndex] = react.useState(-1);
8426
+ const children = react.useMemo(() => childrenProp.filter(_isReactElement), [childrenProp]);
8427
+ const tabs = children.map((child, childIndex) => react.cloneElement(child, {
8415
8428
  focused: focusedIndex === childIndex,
8416
8429
  key: childIndex,
8417
8430
  onFocus: () => handleTabFocus(childIndex)
8418
8431
  }));
8419
8432
  const numTabs = tabs.length;
8420
- const handleTabFocus = useCallback(tabIdx => {
8433
+ const handleTabFocus = react.useCallback(tabIdx => {
8421
8434
  setFocusedIndex(tabIdx);
8422
8435
  }, []);
8423
- const handleKeyDown = useCallback(event => {
8436
+ const handleKeyDown = react.useCallback(event => {
8424
8437
  if (event.key === "ArrowLeft") {
8425
8438
  setFocusedIndex(prevIndex => (prevIndex + numTabs - 1) % numTabs);
8426
8439
  }
@@ -8428,7 +8441,7 @@ const TabList = forwardRef(function TabList2(props, ref) {
8428
8441
  setFocusedIndex(prevIndex => (prevIndex + 1) % numTabs);
8429
8442
  }
8430
8443
  }, [numTabs]);
8431
- return /* @__PURE__ */jsx(Inline, _objectSpread(_objectSpread({
8444
+ return /* @__PURE__ */jsxRuntime.jsx(Inline, _objectSpread(_objectSpread({
8432
8445
  "data-ui": "TabList"
8433
8446
  }, restProps), {}, {
8434
8447
  onKeyDown: handleKeyDown,
@@ -8437,12 +8450,12 @@ const TabList = forwardRef(function TabList2(props, ref) {
8437
8450
  children: tabs
8438
8451
  }));
8439
8452
  });
8440
- const TabPanel = forwardRef(function TabPanel2(props, ref) {
8453
+ const TabPanel = react.forwardRef(function TabPanel2(props, ref) {
8441
8454
  const {
8442
8455
  flex
8443
8456
  } = props,
8444
8457
  restProps = _objectWithoutProperties(props, _excluded45);
8445
- return /* @__PURE__ */jsx(Box, _objectSpread(_objectSpread({
8458
+ return /* @__PURE__ */jsxRuntime.jsx(Box, _objectSpread(_objectSpread({
8446
8459
  "data-ui": "TabPanel"
8447
8460
  }, restProps), {}, {
8448
8461
  flex,
@@ -8464,8 +8477,8 @@ const ROLES = {
8464
8477
  success: "alert",
8465
8478
  info: "alert"
8466
8479
  };
8467
- const Root$2 = styled(Card)(_templateObject83 || (_templateObject83 = _taggedTemplateLiteral(["\n pointer-events: all;\n"])));
8468
- const TextBox = styled(Flex)(_templateObject84 || (_templateObject84 = _taggedTemplateLiteral(["\n overflow-x: auto;\n"])));
8480
+ const Root$2 = styled__default.default(Card)(_templateObject83 || (_templateObject83 = _taggedTemplateLiteral(["\n pointer-events: all;\n"])));
8481
+ const TextBox = styled__default.default(Flex)(_templateObject84 || (_templateObject84 = _taggedTemplateLiteral(["\n overflow-x: auto;\n"])));
8469
8482
  function Toast(props) {
8470
8483
  const {
8471
8484
  closable,
@@ -8477,7 +8490,7 @@ function Toast(props) {
8477
8490
  restProps = _objectWithoutProperties(props, _excluded46);
8478
8491
  const cardTone = status ? STATUS_CARD_TONE[status] : "default";
8479
8492
  const role = status ? ROLES[status] : "status";
8480
- return /* @__PURE__ */jsx(Root$2, _objectSpread(_objectSpread({
8493
+ return /* @__PURE__ */jsxRuntime.jsx(Root$2, _objectSpread(_objectSpread({
8481
8494
  "data-ui": "Toast",
8482
8495
  role
8483
8496
  }, restProps), {}, {
@@ -8485,27 +8498,27 @@ function Toast(props) {
8485
8498
  radius: 2,
8486
8499
  shadow: 2,
8487
8500
  tone: cardTone,
8488
- children: /* @__PURE__ */jsxs(Flex, {
8501
+ children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
8489
8502
  align: "flex-start",
8490
- children: [/* @__PURE__ */jsx(TextBox, {
8503
+ children: [/* @__PURE__ */jsxRuntime.jsx(TextBox, {
8491
8504
  flex: 1,
8492
8505
  padding: 3,
8493
- children: /* @__PURE__ */jsxs(Stack, {
8506
+ children: /* @__PURE__ */jsxRuntime.jsxs(Stack, {
8494
8507
  space: 3,
8495
- children: [title && /* @__PURE__ */jsx(Text, {
8508
+ children: [title && /* @__PURE__ */jsxRuntime.jsx(Text, {
8496
8509
  weight: "semibold",
8497
8510
  children: title
8498
- }), description && /* @__PURE__ */jsx(Text, {
8511
+ }), description && /* @__PURE__ */jsxRuntime.jsx(Text, {
8499
8512
  muted: true,
8500
8513
  size: 1,
8501
8514
  children: description
8502
8515
  })]
8503
8516
  })
8504
- }), closable && /* @__PURE__ */jsx(Box, {
8517
+ }), closable && /* @__PURE__ */jsxRuntime.jsx(Box, {
8505
8518
  padding: 1,
8506
- children: /* @__PURE__ */jsx(Button, {
8519
+ children: /* @__PURE__ */jsxRuntime.jsx(Button, {
8507
8520
  as: "button",
8508
- icon: CloseIcon,
8521
+ icon: icons.CloseIcon,
8509
8522
  mode: "bleed",
8510
8523
  padding: 2,
8511
8524
  onClick: onClose,
@@ -8518,10 +8531,10 @@ function Toast(props) {
8518
8531
  }));
8519
8532
  }
8520
8533
  const key$1 = Symbol.for("@sanity/ui/context/toast");
8521
- globalScope[key$1] = globalScope[key$1] || createContext(null);
8534
+ globalScope[key$1] = globalScope[key$1] || react.createContext(null);
8522
8535
  const ToastContext = globalScope[key$1];
8523
- 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"])));
8524
- 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"])));
8536
+ 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"])));
8537
+ 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"])));
8525
8538
  let toastId = 0;
8526
8539
  function ToastProvider(props) {
8527
8540
  const {
@@ -8531,11 +8544,11 @@ function ToastProvider(props) {
8531
8544
  paddingY,
8532
8545
  zOffset
8533
8546
  } = props;
8534
- const [state, setState] = useState({
8547
+ const [state, setState] = react.useState({
8535
8548
  toasts: []
8536
8549
  });
8537
- const toastsRef = useRef({});
8538
- const push = useCallback(params => {
8550
+ const toastsRef = react.useRef({});
8551
+ const push = react.useCallback(params => {
8539
8552
  const id = params.id || String(toastId++);
8540
8553
  const duration = params.duration || 5e3;
8541
8554
  const dismiss = () => {
@@ -8577,7 +8590,7 @@ function ToastProvider(props) {
8577
8590
  };
8578
8591
  return id;
8579
8592
  }, []);
8580
- useEffect(() => () => {
8593
+ react.useEffect(() => () => {
8581
8594
  for (const {
8582
8595
  timeoutId
8583
8596
  } of Object.values(toastsRef.current)) {
@@ -8585,21 +8598,21 @@ function ToastProvider(props) {
8585
8598
  }
8586
8599
  toastsRef.current = {};
8587
8600
  }, []);
8588
- const value = useMemo(() => ({
8601
+ const value = react.useMemo(() => ({
8589
8602
  version: 0,
8590
8603
  push
8591
8604
  }), [push]);
8592
- return /* @__PURE__ */jsxs(ToastContext.Provider, {
8605
+ return /* @__PURE__ */jsxRuntime.jsxs(ToastContext.Provider, {
8593
8606
  value,
8594
- children: [children, /* @__PURE__ */jsx(Root$1, {
8607
+ children: [children, /* @__PURE__ */jsxRuntime.jsx(Root$1, {
8595
8608
  "data-ui": "ToastProvider",
8596
8609
  zOffset,
8597
- children: /* @__PURE__ */jsx(ToastContainer, {
8598
- children: /* @__PURE__ */jsx(Box, {
8610
+ children: /* @__PURE__ */jsxRuntime.jsx(ToastContainer, {
8611
+ children: /* @__PURE__ */jsxRuntime.jsx(Box, {
8599
8612
  padding,
8600
8613
  paddingX,
8601
8614
  paddingY,
8602
- children: /* @__PURE__ */jsx(AnimatePresence, {
8615
+ children: /* @__PURE__ */jsxRuntime.jsx(framerMotion.AnimatePresence, {
8603
8616
  initial: false,
8604
8617
  children: state.toasts.map(_ref27 => {
8605
8618
  let {
@@ -8607,7 +8620,7 @@ function ToastProvider(props) {
8607
8620
  id,
8608
8621
  params
8609
8622
  } = _ref27;
8610
- return /* @__PURE__ */jsx(motion.div, {
8623
+ return /* @__PURE__ */jsxRuntime.jsx(framerMotion.motion.div, {
8611
8624
  animate: {
8612
8625
  opacity: 1,
8613
8626
  y: 0,
@@ -8631,7 +8644,7 @@ function ToastProvider(props) {
8631
8644
  damping: 30,
8632
8645
  stiffness: 400
8633
8646
  },
8634
- children: /* @__PURE__ */jsx(Toast, {
8647
+ children: /* @__PURE__ */jsxRuntime.jsx(Toast, {
8635
8648
  closable: params.closable,
8636
8649
  description: params.description,
8637
8650
  onClose: dismiss,
@@ -8647,7 +8660,7 @@ function ToastProvider(props) {
8647
8660
  });
8648
8661
  }
8649
8662
  function useToast() {
8650
- const value = useContext(ToastContext);
8663
+ const value = react.useContext(ToastContext);
8651
8664
  if (!value) {
8652
8665
  throw new Error("useToast(): missing context value");
8653
8666
  }
@@ -8727,28 +8740,28 @@ function _focusItemElement(el) {
8727
8740
  }
8728
8741
  }
8729
8742
  const key = Symbol.for("@sanity/ui/context/tree");
8730
- globalScope[key] = globalScope[key] || createContext(null);
8743
+ globalScope[key] = globalScope[key] || react.createContext(null);
8731
8744
  const TreeContext = globalScope[key];
8732
- const Tree = memo(forwardRef(function Tree2(props, ref) {
8745
+ const Tree = react.memo(react.forwardRef(function Tree2(props, ref) {
8733
8746
  const {
8734
8747
  children,
8735
8748
  space = 1
8736
8749
  } = props,
8737
8750
  restProps = _objectWithoutProperties(props, _excluded47);
8738
8751
  const forwardedRef = useForwardedRef(ref);
8739
- const [focusedElement, setFocusedElement] = useState(null);
8740
- const focusedElementRef = useRef(focusedElement);
8741
- const path = useMemo(() => [], []);
8742
- const [itemElements, setItemElements] = useState([]);
8743
- const [state, setState] = useState({});
8744
- const stateRef = useRef(state);
8745
- useEffect(() => {
8752
+ const [focusedElement, setFocusedElement] = react.useState(null);
8753
+ const focusedElementRef = react.useRef(focusedElement);
8754
+ const path = react.useMemo(() => [], []);
8755
+ const [itemElements, setItemElements] = react.useState([]);
8756
+ const [state, setState] = react.useState({});
8757
+ const stateRef = react.useRef(state);
8758
+ react.useEffect(() => {
8746
8759
  focusedElementRef.current = focusedElement;
8747
8760
  }, [focusedElement]);
8748
- useEffect(() => {
8761
+ react.useEffect(() => {
8749
8762
  stateRef.current = state;
8750
8763
  }, [state]);
8751
- const registerItem = useCallback((element, path2, expanded, selected) => {
8764
+ const registerItem = react.useCallback((element, path2, expanded, selected) => {
8752
8765
  setState(s => _objectSpread(_objectSpread({}, s), {}, {
8753
8766
  [path2]: {
8754
8767
  element,
@@ -8766,7 +8779,7 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
8766
8779
  });
8767
8780
  };
8768
8781
  }, []);
8769
- const setExpanded = useCallback((path2, expanded) => {
8782
+ const setExpanded = react.useCallback((path2, expanded) => {
8770
8783
  setState(s => {
8771
8784
  const itemState = s[path2];
8772
8785
  if (!itemState) return s;
@@ -8777,7 +8790,7 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
8777
8790
  });
8778
8791
  });
8779
8792
  }, []);
8780
- const contextValue = useMemo(() => ({
8793
+ const contextValue = react.useMemo(() => ({
8781
8794
  version: 0,
8782
8795
  focusedElement: focusedElement || itemElements[0] || null,
8783
8796
  level: 0,
@@ -8788,7 +8801,7 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
8788
8801
  space,
8789
8802
  state
8790
8803
  }), [focusedElement, itemElements, path, registerItem, setExpanded, space, state]);
8791
- const handleKeyDown = useCallback(event => {
8804
+ const handleKeyDown = react.useCallback(event => {
8792
8805
  var _a;
8793
8806
  if (!focusedElementRef.current) return;
8794
8807
  if (event.key === "ArrowDown") {
@@ -8855,14 +8868,14 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
8855
8868
  return;
8856
8869
  }
8857
8870
  }, [itemElements]);
8858
- useEffect(() => {
8871
+ react.useEffect(() => {
8859
8872
  if (!forwardedRef.current) return;
8860
8873
  const _itemElements = Array.from(forwardedRef.current.querySelectorAll('[data-ui="TreeItem"]'));
8861
8874
  setItemElements(_itemElements);
8862
8875
  }, [children, forwardedRef]);
8863
- return /* @__PURE__ */jsx(TreeContext.Provider, {
8876
+ return /* @__PURE__ */jsxRuntime.jsx(TreeContext.Provider, {
8864
8877
  value: contextValue,
8865
- children: /* @__PURE__ */jsx(Stack, _objectSpread(_objectSpread({
8878
+ children: /* @__PURE__ */jsxRuntime.jsx(Stack, _objectSpread(_objectSpread({
8866
8879
  as: "ul",
8867
8880
  "data-ui": "Tree"
8868
8881
  }, restProps), {}, {
@@ -8876,7 +8889,7 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
8876
8889
  }));
8877
8890
  Tree.displayName = "Tree";
8878
8891
  function treeItemRootStyle() {
8879
- 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 "])));
8892
+ 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 "])));
8880
8893
  }
8881
8894
  function treeItemRootColorStyle(props) {
8882
8895
  const {
@@ -8889,7 +8902,7 @@ function treeItemRootColorStyle(props) {
8889
8902
  selectable
8890
8903
  } = theme.sanity.color;
8891
8904
  const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
8892
- 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));
8905
+ 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));
8893
8906
  }
8894
8907
  function treeItemBoxStyle(props) {
8895
8908
  const {
@@ -8899,23 +8912,23 @@ function treeItemBoxStyle(props) {
8899
8912
  const {
8900
8913
  space
8901
8914
  } = theme.sanity;
8902
- return css(_templateObject89 || (_templateObject89 = _taggedTemplateLiteral(["\n padding-left: ", ";\n\n &[data-as='a'] {\n text-decoration: none;\n }\n "])), rem(space[2] * $level));
8915
+ return styled.css(_templateObject89 || (_templateObject89 = _taggedTemplateLiteral(["\n padding-left: ", ";\n\n &[data-as='a'] {\n text-decoration: none;\n }\n "])), rem(space[2] * $level));
8903
8916
  }
8904
8917
  function useTree() {
8905
- const tree = useContext(TreeContext);
8918
+ const tree = react.useContext(TreeContext);
8906
8919
  if (!tree) {
8907
8920
  throw new Error("Tree: missing context value");
8908
8921
  }
8909
8922
  return tree;
8910
8923
  }
8911
- const TreeGroup = memo(function TreeGroup2(props) {
8924
+ const TreeGroup = react.memo(function TreeGroup2(props) {
8912
8925
  const {
8913
8926
  children,
8914
8927
  expanded = false
8915
8928
  } = props,
8916
8929
  restProps = _objectWithoutProperties(props, _excluded48);
8917
8930
  const tree = useTree();
8918
- return /* @__PURE__ */jsx(Stack, _objectSpread(_objectSpread({
8931
+ return /* @__PURE__ */jsxRuntime.jsx(Stack, _objectSpread(_objectSpread({
8919
8932
  as: "ul",
8920
8933
  "data-ui": "TreeGroup"
8921
8934
  }, restProps), {}, {
@@ -8926,12 +8939,12 @@ const TreeGroup = memo(function TreeGroup2(props) {
8926
8939
  children
8927
8940
  }));
8928
8941
  });
8929
- const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle));
8930
- const TreeItemBox = styled(Box).attrs({
8942
+ const Root = react.memo(styled__default.default.li(treeItemRootStyle, treeItemRootColorStyle));
8943
+ const TreeItemBox = styled__default.default(Box).attrs({
8931
8944
  forwardedAs: "a"
8932
8945
  })(treeItemBoxStyle);
8933
- const ToggleArrowText = styled(Text)(_templateObject90 || (_templateObject90 = _taggedTemplateLiteral(["\n & > svg {\n transition: transform 100ms;\n }\n"])));
8934
- const TreeItem = memo(function TreeItem2(props) {
8946
+ const ToggleArrowText = styled__default.default(Text)(_templateObject90 || (_templateObject90 = _taggedTemplateLiteral(["\n & > svg {\n transition: transform 100ms;\n }\n"])));
8947
+ const TreeItem = react.memo(function TreeItem2(props) {
8935
8948
  const {
8936
8949
  children,
8937
8950
  expanded: expandedProp = false,
@@ -8948,8 +8961,8 @@ const TreeItem = memo(function TreeItem2(props) {
8948
8961
  weight
8949
8962
  } = props,
8950
8963
  restProps = _objectWithoutProperties(props, _excluded49);
8951
- const rootRef = useRef(null);
8952
- const treeitemRef = useRef(null);
8964
+ const rootRef = react.useRef(null);
8965
+ const treeitemRef = react.useRef(null);
8953
8966
  const tree = useTree();
8954
8967
  const {
8955
8968
  path,
@@ -8957,19 +8970,19 @@ const TreeItem = memo(function TreeItem2(props) {
8957
8970
  setExpanded,
8958
8971
  setFocusedElement
8959
8972
  } = tree;
8960
- const _id = useId();
8973
+ const _id = react.useId();
8961
8974
  const id = idProp || _id;
8962
- const itemPath = useMemo(() => path.concat([id || ""]), [id, path]);
8975
+ const itemPath = react.useMemo(() => path.concat([id || ""]), [id, path]);
8963
8976
  const itemKey = itemPath.join("/");
8964
8977
  const itemState = tree.state[itemKey];
8965
8978
  const focused = tree.focusedElement === rootRef.current;
8966
8979
  const expanded = (itemState == null ? void 0 : itemState.expanded) === void 0 ? expandedProp : (itemState == null ? void 0 : itemState.expanded) || false;
8967
8980
  const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1;
8968
- const contextValue = useMemo(() => _objectSpread(_objectSpread({}, tree), {}, {
8981
+ const contextValue = react.useMemo(() => _objectSpread(_objectSpread({}, tree), {}, {
8969
8982
  level: tree.level + 1,
8970
8983
  path: itemPath
8971
8984
  }), [itemPath, tree]);
8972
- const handleClick = useCallback(event => {
8985
+ const handleClick = react.useCallback(event => {
8973
8986
  if (onClick) onClick(event);
8974
8987
  const target = event.target;
8975
8988
  if (target instanceof HTMLElement && (target.getAttribute("data-ui") === "TreeItem__box" || target.closest('[data-ui="TreeItem__box"]'))) {
@@ -8978,42 +8991,42 @@ const TreeItem = memo(function TreeItem2(props) {
8978
8991
  setFocusedElement(rootRef.current);
8979
8992
  }
8980
8993
  }, [expanded, itemKey, onClick, setExpanded, setFocusedElement]);
8981
- const handleKeyDown = useCallback(event => {
8994
+ const handleKeyDown = react.useCallback(event => {
8982
8995
  if (focused && event.key === "Enter") {
8983
8996
  const el = treeitemRef.current || rootRef.current;
8984
8997
  el == null ? void 0 : el.click();
8985
8998
  }
8986
8999
  }, [focused]);
8987
- useEffect(() => {
9000
+ react.useEffect(() => {
8988
9001
  if (!rootRef.current) return;
8989
9002
  return registerItem(rootRef.current, itemPath.join("/"), expanded, selected);
8990
9003
  }, [expanded, itemPath, registerItem, selected]);
8991
- const content = /* @__PURE__ */jsxs(Flex, {
9004
+ const content = /* @__PURE__ */jsxRuntime.jsxs(Flex, {
8992
9005
  padding,
8993
- children: [/* @__PURE__ */jsxs(Box, {
9006
+ children: [/* @__PURE__ */jsxRuntime.jsxs(Box, {
8994
9007
  marginRight: space,
8995
9008
  style: {
8996
9009
  visibility: icon || children ? "visible" : "hidden",
8997
9010
  pointerEvents: "none"
8998
9011
  },
8999
- children: [icon && /* @__PURE__ */jsx(Text, {
9012
+ children: [icon && /* @__PURE__ */jsxRuntime.jsx(Text, {
9000
9013
  muted,
9001
9014
  size: fontSize,
9002
9015
  weight,
9003
- children: createElement(icon)
9004
- }), !icon && /* @__PURE__ */jsx(ToggleArrowText, {
9016
+ children: react.createElement(icon)
9017
+ }), !icon && /* @__PURE__ */jsxRuntime.jsx(ToggleArrowText, {
9005
9018
  muted,
9006
9019
  size: fontSize,
9007
9020
  weight,
9008
- children: /* @__PURE__ */jsx(ToggleArrowRightIcon, {
9021
+ children: /* @__PURE__ */jsxRuntime.jsx(icons.ToggleArrowRightIcon, {
9009
9022
  style: {
9010
9023
  transform: expanded ? "rotate(90deg)" : void 0
9011
9024
  }
9012
9025
  })
9013
9026
  })]
9014
- }), /* @__PURE__ */jsx(Box, {
9027
+ }), /* @__PURE__ */jsxRuntime.jsx(Box, {
9015
9028
  flex: 1,
9016
- children: /* @__PURE__ */jsx(Text, {
9029
+ children: /* @__PURE__ */jsxRuntime.jsx(Text, {
9017
9030
  muted,
9018
9031
  size: fontSize,
9019
9032
  textOverflow: "ellipsis",
@@ -9023,7 +9036,7 @@ const TreeItem = memo(function TreeItem2(props) {
9023
9036
  })]
9024
9037
  });
9025
9038
  if (href) {
9026
- return /* @__PURE__ */jsxs(Root, _objectSpread(_objectSpread({
9039
+ return /* @__PURE__ */jsxRuntime.jsxs(Root, _objectSpread(_objectSpread({
9027
9040
  "data-selected": selected ? "" : void 0,
9028
9041
  "data-tree-id": id,
9029
9042
  "data-tree-key": itemKey,
@@ -9032,7 +9045,7 @@ const TreeItem = memo(function TreeItem2(props) {
9032
9045
  onClick: handleClick,
9033
9046
  ref: rootRef,
9034
9047
  role: "none",
9035
- children: [/* @__PURE__ */jsx(TreeItemBox, {
9048
+ children: [/* @__PURE__ */jsxRuntime.jsx(TreeItemBox, {
9036
9049
  $level: tree.level,
9037
9050
  "aria-expanded": expanded,
9038
9051
  "data-ui": "TreeItem__box",
@@ -9041,16 +9054,16 @@ const TreeItem = memo(function TreeItem2(props) {
9041
9054
  role: "treeitem",
9042
9055
  tabIndex,
9043
9056
  children: content
9044
- }), /* @__PURE__ */jsx(TreeContext.Provider, {
9057
+ }), /* @__PURE__ */jsxRuntime.jsx(TreeContext.Provider, {
9045
9058
  value: contextValue,
9046
- children: children && /* @__PURE__ */jsx(TreeGroup, {
9059
+ children: children && /* @__PURE__ */jsxRuntime.jsx(TreeGroup, {
9047
9060
  hidden: !expanded,
9048
9061
  children
9049
9062
  })
9050
9063
  })]
9051
9064
  }));
9052
9065
  }
9053
- return /* @__PURE__ */jsxs(Root, _objectSpread(_objectSpread({
9066
+ return /* @__PURE__ */jsxRuntime.jsxs(Root, _objectSpread(_objectSpread({
9054
9067
  "data-selected": selected ? "" : void 0,
9055
9068
  "data-ui": "TreeItem",
9056
9069
  "data-tree-id": id,
@@ -9062,19 +9075,132 @@ const TreeItem = memo(function TreeItem2(props) {
9062
9075
  ref: rootRef,
9063
9076
  role: "treeitem",
9064
9077
  tabIndex,
9065
- children: [/* @__PURE__ */jsx(TreeItemBox, {
9078
+ children: [/* @__PURE__ */jsxRuntime.jsx(TreeItemBox, {
9066
9079
  $level: tree.level,
9067
9080
  as: "div",
9068
9081
  "data-ui": "TreeItem__box",
9069
9082
  children: content
9070
- }), /* @__PURE__ */jsx(TreeContext.Provider, {
9083
+ }), /* @__PURE__ */jsxRuntime.jsx(TreeContext.Provider, {
9071
9084
  value: contextValue,
9072
- children: children && /* @__PURE__ */jsx(TreeGroup, {
9085
+ children: children && /* @__PURE__ */jsxRuntime.jsx(TreeGroup, {
9073
9086
  expanded,
9074
9087
  children
9075
9088
  })
9076
9089
  })]
9077
9090
  }));
9078
9091
  });
9079
- 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 };
9080
- //# sourceMappingURL=index.esm.js.map
9092
+ exports.Autocomplete = Autocomplete;
9093
+ exports.Avatar = Avatar;
9094
+ exports.AvatarCounter = AvatarCounter;
9095
+ exports.AvatarStack = AvatarStack;
9096
+ exports.Badge = Badge;
9097
+ exports.BoundaryElementProvider = BoundaryElementProvider;
9098
+ exports.Box = Box;
9099
+ exports.Breadcrumbs = Breadcrumbs;
9100
+ exports.Button = Button;
9101
+ exports.Card = Card;
9102
+ exports.Checkbox = Checkbox;
9103
+ exports.Code = Code;
9104
+ exports.CodeSkeleton = CodeSkeleton;
9105
+ exports.Container = Container;
9106
+ exports.Dialog = Dialog;
9107
+ exports.DialogContext = DialogContext;
9108
+ exports.DialogProvider = DialogProvider;
9109
+ exports.ElementQuery = ElementQuery;
9110
+ exports.ErrorBoundary = ErrorBoundary;
9111
+ exports.Flex = Flex;
9112
+ exports.Grid = Grid;
9113
+ exports.Heading = Heading;
9114
+ exports.HeadingSkeleton = HeadingSkeleton;
9115
+ exports.Hotkeys = Hotkeys;
9116
+ exports.Inline = Inline;
9117
+ exports.KBD = KBD;
9118
+ exports.Label = Label;
9119
+ exports.LabelSkeleton = LabelSkeleton;
9120
+ exports.Layer = Layer;
9121
+ exports.LayerProvider = LayerProvider;
9122
+ exports.Menu = Menu;
9123
+ exports.MenuButton = MenuButton;
9124
+ exports.MenuDivider = MenuDivider;
9125
+ exports.MenuGroup = MenuGroup;
9126
+ exports.MenuItem = MenuItem;
9127
+ exports.Popover = Popover;
9128
+ exports.Portal = Portal;
9129
+ exports.PortalProvider = PortalProvider;
9130
+ exports.Radio = Radio;
9131
+ exports.Select = Select;
9132
+ exports.Skeleton = Skeleton;
9133
+ exports.Spinner = Spinner;
9134
+ exports.SrOnly = SrOnly;
9135
+ exports.Stack = Stack;
9136
+ exports.Switch = Switch;
9137
+ exports.Tab = Tab;
9138
+ exports.TabList = TabList;
9139
+ exports.TabPanel = TabPanel;
9140
+ exports.Text = Text;
9141
+ exports.TextArea = TextArea;
9142
+ exports.TextInput = TextInput;
9143
+ exports.TextSkeleton = TextSkeleton;
9144
+ exports.ThemeColorProvider = ThemeColorProvider;
9145
+ exports.ThemeProvider = ThemeProvider;
9146
+ exports.Toast = Toast;
9147
+ exports.ToastProvider = ToastProvider;
9148
+ exports.Tooltip = Tooltip;
9149
+ exports.Tree = Tree;
9150
+ exports.TreeItem = TreeItem;
9151
+ exports.VirtualList = VirtualList;
9152
+ exports._ResizeObserver = _ResizeObserver;
9153
+ exports._elementSizeObserver = _elementSizeObserver;
9154
+ exports._fillCSSObject = _fillCSSObject;
9155
+ exports._getArrayProp = _getArrayProp;
9156
+ exports._getResponsiveSpace = _getResponsiveSpace;
9157
+ exports._hasFocus = _hasFocus;
9158
+ exports._isEnterToClickElement = _isEnterToClickElement;
9159
+ exports._isScrollable = _isScrollable;
9160
+ exports._raf = _raf;
9161
+ exports._raf2 = _raf2;
9162
+ exports._responsive = _responsive;
9163
+ exports.attemptFocus = attemptFocus;
9164
+ exports.createColorTheme = createColorTheme;
9165
+ exports.focusFirstDescendant = focusFirstDescendant;
9166
+ exports.focusLastDescendant = focusLastDescendant;
9167
+ exports.hexToRgb = hexToRgb;
9168
+ exports.hslToRgb = hslToRgb;
9169
+ exports.isFocusable = isFocusable;
9170
+ exports.isHTMLAnchorElement = isHTMLAnchorElement;
9171
+ exports.isHTMLButtonElement = isHTMLButtonElement;
9172
+ exports.isHTMLElement = isHTMLElement;
9173
+ exports.isHTMLInputElement = isHTMLInputElement;
9174
+ exports.isHTMLSelectElement = isHTMLSelectElement;
9175
+ exports.isHTMLTextAreaElement = isHTMLTextAreaElement;
9176
+ exports.multiply = multiply$1;
9177
+ exports.parseColor = parseColor;
9178
+ exports.rem = rem;
9179
+ exports.responsiveCodeFontStyle = responsiveCodeFontStyle;
9180
+ exports.responsiveHeadingFont = responsiveHeadingFont;
9181
+ exports.responsiveLabelFont = responsiveLabelFont;
9182
+ exports.responsiveTextAlignStyle = responsiveTextAlignStyle;
9183
+ exports.responsiveTextFont = responsiveTextFont;
9184
+ exports.rgbToHex = rgbToHex;
9185
+ exports.rgbToHsl = rgbToHsl;
9186
+ exports.rgba = rgba;
9187
+ exports.screen = screen$1;
9188
+ exports.studioTheme = studioTheme;
9189
+ exports.useArrayProp = useArrayProp;
9190
+ exports.useBoundaryElement = useBoundaryElement;
9191
+ exports.useClickOutside = useClickOutside;
9192
+ exports.useCustomValidity = useCustomValidity;
9193
+ exports.useDialog = useDialog;
9194
+ exports.useElementRect = useElementRect;
9195
+ exports.useElementSize = useElementSize;
9196
+ exports.useForwardedRef = useForwardedRef;
9197
+ exports.useGlobalKeyDown = useGlobalKeyDown;
9198
+ exports.useLayer = useLayer;
9199
+ exports.useMediaIndex = useMediaIndex;
9200
+ exports.usePortal = usePortal;
9201
+ exports.usePrefersDark = usePrefersDark;
9202
+ exports.useRootTheme = useRootTheme;
9203
+ exports.useTheme = useTheme;
9204
+ exports.useToast = useToast;
9205
+ exports.useTree = useTree;
9206
+ //# sourceMappingURL=index.cjs.map