text: import { useId } from '@reach/auto-id';
  import React, { useState, useRef, useEffect, createContext, useContext, useMemo, useLayoutEffect, forwardRef, useCallback, cloneElement, isValidElement, createElement, useReducer, Children, Fragment } from 'react';
  import ReactIs, { isElement, isFragment, isValidElementType } from 'react-is';
  import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, keyframes } from 'styled-components';
  import { white as white$1, black as black$1, hues } from '@sanity/color';
  import { SpinnerIcon, CheckmarkIcon, RemoveIcon, SelectIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon } from '@sanity/icons';
  import Refractor from 'react-refractor';
  import { usePopper } from 'react-popper';
  import { ResizeObserver as ResizeObserver$1 } from '@juggle/resize-observer';
  import ReactDOM from 'react-dom';
  import { isEqual } from 'lodash';
  import maxSizeModifier from 'popper-max-size-modifier';
  import { AnimatePresence, motion } from 'framer-motion';
  
  function _extends() {
    _extends = Object.assign || function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
  
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
  
      return target;
    };
  
    return _extends.apply(this, arguments);
  }
  
  function _objectWithoutPropertiesLoose(source, excluded) {
    if (source == null) return {};
    var target = {};
    var sourceKeys = Object.keys(source);
    var key, i;
  
    for (i = 0; i < sourceKeys.length; i++) {
      key = sourceKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      target[key] = source[key];
    }
  
    return target;
  }
  
  const EMPTY_ARRAY = [];
  const EMPTY_RECORD$1 = {};
  
  function _getElements(element, elementsArg) {
    const ret = [element];
  
    for (const el of elementsArg) {
      if (Array.isArray(el)) {
        ret.push(...el);
      } else {
        ret.push(el);
      }
    }
  
    return ret.filter(Boolean);
  }
  /**
   * @public
   */
  
  
  function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
    const [element, setElement] = useState(null);
    const [elements, setElements] = useState(() => _getElements(element, elementsArg));
    const elementsRef = useRef(elements);
    useEffect(() => {
      const prevElements = elementsRef.current;
  
      const nextElements = _getElements(element, elementsArg);
  
      if (prevElements.length !== nextElements.length) {
        setElements(nextElements);
        elementsRef.current = nextElements;
        return;
      }
  
      for (const el of prevElements) {
        if (!nextElements.includes(el)) {
          setElements(nextElements);
          elementsRef.current = nextElements;
          return;
        }
      }
  
      for (const el of nextElements) {
        if (!prevElements.includes(el)) {
          setElements(nextElements);
          elementsRef.current = nextElements;
          return;
        }
      }
    }, [element, elementsArg]);
    useEffect(() => {
      if (!listener) return undefined;
  
      const handleWindowMouseDown = evt => {
        const target = evt.target;
  
        if (!(target instanceof Node)) {
          return;
        }
  
        if (boundaryElement && !boundaryElement.contains(target)) {
          return;
        }
  
        for (const el of elements) {
          if (target === el || el.contains(target)) {
            return;
          }
        }
  
        listener(evt);
      };
  
      window.addEventListener('mousedown', handleWindowMouseDown);
      return () => {
        window.removeEventListener('mousedown', handleWindowMouseDown);
      };
    }, [boundaryElement, listener, elements]);
    return setElement;
  }
  
  /**
   * Subscribe to the rect of a DOM element.
   * @beta
   */
  
  function useElementRect(element) {
    const [rect, setRect] = useState(null);
    useEffect(() => {
      if (!element) return undefined;
      const ro = new ResizeObserver(entries => {
        setRect(entries[0].contentRect);
      });
      ro.observe(element);
      return () => ro.disconnect();
    }, [element]);
    return rect;
  }
  
  /**
   * @beta
   */
  
  function useGlobalKeyDown(onKeyDown) {
    return useEffect(() => {
      addEventListener('keydown', onKeyDown);
      return () => removeEventListener('keydown', onKeyDown);
    }, [onKeyDown]);
  }
  
  function multiplyChannel(b, s) {
    return b * s;
  }
  /**
   * Apply the \`multiply\` blend mode
   * Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
   * @internal
   */
  
  
  function multiply$1(b, s) {
    return {
      r: Math.round(clamp$1(multiplyChannel(b.r / 255, s.r / 255) * 255)),
      g: Math.round(clamp$1(multiplyChannel(b.g / 255, s.g / 255) * 255)),
      b: Math.round(clamp$1(multiplyChannel(b.b / 255, s.b / 255) * 255))
    };
  }
  
  function clamp$1(num) {
    return Math.max(Math.min(num, 255), 0);
  }
  
  function screenChannel(b, s) {
    return b + s - b * s;
  }
  /**
   * Apply the \`screen\` blend mode
   * Source: https://www.w3.org/TR/compositing-1/#blendingscreen
   * @internal
   */
  
  
  function screen$1(b, s) {
    return {
      r: Math.round(clamp(screenChannel(b.r / 255, s.r / 255) * 255)),
      g: Math.round(clamp(screenChannel(b.g / 255, s.g / 255) * 255)),
      b: Math.round(clamp(screenChannel(b.b / 255, s.b / 255) * 255))
    };
  }
  
  function clamp(num) {
    return Math.max(Math.min(num, 255), 0);
  }
  
  /**
   * @internal
   */
  function hexToRgb(hex) {
    if (hex.length === 4) {
      const hexR = hex.slice(1, 2);
      const hexG = hex.slice(2, 3);
      const hexB = hex.slice(3, 4);
      return {
        r: parseInt(hexR + hexR, 16),
        g: parseInt(hexG + hexG, 16),
        b: parseInt(hexB + hexB, 16)
      };
    }
  
    return {
      r: parseInt(hex.slice(1, 3), 16),
      g: parseInt(hex.slice(3, 5), 16),
      b: parseInt(hex.slice(5, 7), 16)
    };
  }
  /**
   * @internal
   */
  
  function rgbToHex({
    r,
    g,
    b
  }) {
    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
  }
  /**
   * @internal
   * @see https://css-tricks.com/converting-color-spaces-in-javascript/
   */
  
  function rgbToHsl({
    r,
    g,
    b
  }) {
    // Make r, g, and b fractions of 1
    r /= 255;
    g /= 255;
    b /= 255; // Find greatest and smallest channel values
  
    const cmin = Math.min(r, g, b);
    const cmax = Math.max(r, g, b);
    const delta = cmax - cmin;
    let h = 0;
    let s = 0;
    let l = 0; // Calculate hue
    // No difference
  
    if (delta == 0) h = 0; // Red is max
    else if (cmax == r) h = (g - b) / delta % 6; // Green is max
    else if (cmax == g) h = (b - r) / delta + 2; // Blue is max
    else h = (r - g) / delta + 4;
    h = Math.round(h * 60); // Make negative hues positive behind 360°
  
    if (h < 0) h += 360; // Calculate lightness
  
    l = (cmax + cmin) / 2; // Calculate saturation
  
    s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); // Multiply l and s by 100
  
    s = +(s * 100).toFixed(1);
    l = +(l * 100).toFixed(1);
    return {
      h,
      s,
      l
    };
  }
  /**
   * @internal
   */
  
  function hslToRgb(hsl) {
    // Must be fractions of 1
    const s = hsl.s / 100;
    const l = hsl.l / 100;
    const c = (1 - Math.abs(2 * l - 1)) * s;
    const x = c * (1 - Math.abs(hsl.h / 60 % 2 - 1));
    const m = l - c / 2;
    let r = 0;
    let g = 0;
    let b = 0;
  
    if (0 <= hsl.h && hsl.h < 60) {
      r = c;
      g = x;
      b = 0;
    } else if (60 <= hsl.h && hsl.h < 120) {
      r = x;
      g = c;
      b = 0;
    } else if (120 <= hsl.h && hsl.h < 180) {
      r = 0;
      g = c;
      b = x;
    } else if (180 <= hsl.h && hsl.h < 240) {
      r = 0;
      g = x;
      b = c;
    } else if (240 <= hsl.h && hsl.h < 300) {
      r = x;
      g = 0;
      b = c;
    } else if (300 <= hsl.h && hsl.h < 360) {
      r = c;
      g = 0;
      b = x;
    }
  
    return {
      r: Math.round((r + m) * 255),
      g: Math.round((g + m) * 255),
      b: Math.round((b + m) * 255)
    };
  }
  
  const HEX_CHARS = '0123456789ABCDEFabcdef';
  const HSL_RE = /hsl\(\s*(\d+)\s*,\s*((\d+(?:\.\d+)?)%)\s*,\s*((\d+(?:\.\d+)?)%)\s*\)/i;
  
  function isHexChars(str) {
    for (const c of str) {
      if (HEX_CHARS.indexOf(c) === -1) {
        return false;
      }
    }
  
    return true;
  }
  
  function isHex(str) {
    if (str[0] !== '#') return false; // Accept both #000 and #000000
  
    if (!(str.length === 4 || str.length === 7)) return false;
    return isHexChars(str.slice(1));
  }
  
  function parseHsl(str) {
    const res = HSL_RE.exec(str);
  
    if (!res) {
      throw new Error(`parseHsl: string is not a HSL color: "${str}"`);
    }
  
    return {
      h: parseInt(res[1]),
      s: parseFloat(res[3]),
      l: parseFloat(res[5])
    };
  }
  /**
   * @internal
   */
  
  
  function parseColor(color) {
    if (!color) return {
      r: 0,
      g: 0,
      b: 0
    };
  
    if (typeof color !== 'string') {
      throw new Error('parseColor: expected a string');
    }
  
    if (isHex(color)) {
      return hexToRgb(color);
    }
  
    if (color.startsWith('hsl(')) {
      return hslToRgb(parseHsl(color));
    }
  
    throw new Error(`parseColor: unexpected color format: "${color}"`);
  }
  
  /**
   * @internal
   */
  
  function rgba(color, a) {
    const rgb = parseColor(color);
    return `rgba(${rgb.r},${rgb.g},${rgb.b},${a})`;
  }
  
  function createButtonTones(opts, base, dark, solid, muted, mode) {
    return {
      default: opts.button({
        base,
        dark,
        solid: solid.default,
        muted: muted.default,
        mode
      }),
      primary: opts.button({
        base,
        dark,
        solid: solid.primary,
        muted: muted.primary,
        mode
      }),
      positive: opts.button({
        base,
        dark,
        solid: solid.positive,
        muted: muted.positive,
        mode
      }),
      caution: opts.button({
        base,
        dark,
        solid: solid.caution,
        muted: muted.caution,
        mode
      }),
      critical: opts.button({
        base,
        dark,
        solid: solid.critical,
        muted: muted.critical,
        mode
      })
    };
  }
  
  function createButtonModes(opts, base, dark, solid, muted) {
    return {
      default: createButtonTones(opts, base, dark, solid, muted, 'default'),
      ghost: createButtonTones(opts, base, dark, solid, muted, 'ghost'),
      bleed: createButtonTones(opts, base, dark, solid, muted, 'bleed')
    };
  }
  
  function createCardStates(opts, base, dark, name, solid, muted) {
    return {
      enabled: opts.card({
        base,
        dark,
        name,
        state: 'enabled',
        solid,
        muted
      }),
      disabled: opts.card({
        base,
        dark,
        name,
        state: 'disabled',
        solid,
        muted
      }),
      hovered: opts.card({
        base,
        dark,
        name,
        state: 'hovered',
        solid,
        muted
      }),
      pressed: opts.card({
        base,
        dark,
        name,
        state: 'pressed',
        solid,
        muted
      }),
      selected: opts.card({
        base,
        dark,
        name,
        state: 'selected',
        solid,
        muted
      })
    };
  }
  
  const black = 'hsl(0, 0%, 0%)';
  const white = 'hsl(0, 0%, 100%)';
  const colors = {
    default: {
      lightest: 'hsl(0, 0%, 95%)',
      lighter: 'hsl(0, 0%, 70%)',
      light: 'hsl(0, 0%, 65%)',
      base: 'hsl(0, 0%, 50%)',
      dark: 'hsl(0, 0%, 35%)',
      darker: 'hsl(0, 0%, 20%)',
      darkest: 'hsl(0, 0%, 5%)'
    },
    transparent: {
      lightest: 'hsl(240, 100%, 95%)',
      lighter: 'hsl(240, 100%, 70%)',
      light: 'hsl(240, 100%, 65%)',
      base: 'hsl(240, 100%, 50%)',
      dark: 'hsl(240, 100%, 35%)',
      darker: 'hsl(240, 100%, 20%)',
      darkest: 'hsl(240, 100%, 5%)'
    },
    primary: {
      lightest: 'hsl(240, 100%, 95%)',
      lighter: 'hsl(240, 100%, 70%)',
      light: 'hsl(240, 100%, 65%)',
      base: 'hsl(240, 100%, 50%)',
      dark: 'hsl(240, 100%, 35%)',
      darker: 'hsl(240, 100%, 20%)',
      darkest: 'hsl(240, 100%, 5%)'
    },
    positive: {
      lightest: 'hsl(120, 100%, 95%)',
      lighter: 'hsl(120, 100%, 70%)',
      light: 'hsl(120, 100%, 65%)',
      base: 'hsl(120, 100%, 50%)',
      dark: 'hsl(120, 100%, 35%)',
      darker: 'hsl(120, 100%, 20%)',
      darkest: 'hsl(120, 100%, 5%)'
    },
    caution: {
      lightest: 'hsl(60, 100%, 95%)',
      lighter: 'hsl(60, 100%, 70%)',
      light: 'hsl(60, 100%, 65%)',
      base: 'hsl(60, 100%, 50%)',
      dark: 'hsl(60, 100%, 35%)',
      darker: 'hsl(60, 100%, 20%)',
      darkest: 'hsl(60, 100%, 5%)'
    },
    critical: {
      lightest: 'hsl(0, 100%, 95%)',
      lighter: 'hsl(0, 100%, 70%)',
      light: 'hsl(0, 100%, 65%)',
      base: 'hsl(0, 100%, 50%)',
      dark: 'hsl(0, 100%, 35%)',
      darker: 'hsl(0, 100%, 20%)',
      darkest: 'hsl(0, 100%, 5%)'
    }
  };
  const spots = {
    gray: 'hsl(0, 0%, 50%)',
    red: 'hsl(0, 100%, 50%)',
    orange: 'hsl(30, 100%, 50%)',
    yellow: 'hsl(60, 100%, 50%)',
    green: 'hsl(120, 100%, 50%)',
    cyan: 'hsl(180, 100%, 50%)',
    blue: 'hsl(240, 100%, 50%)',
    purple: 'hsl(270, 100%, 50%)',
    magenta: 'hsl(300, 100%, 50%)'
  };
  const tones$1 = {
    transparent: {
      bg: [colors.transparent.darkest, colors.transparent.lightest],
      fg: [colors.transparent.lightest, colors.transparent.darkest],
      border: [colors.transparent.darker, colors.transparent.lighter],
      focusRing: [colors.transparent.base, colors.transparent.base]
    },
    primary: {
      bg: [colors.primary.darkest, colors.primary.lightest],
      fg: [colors.primary.lightest, colors.primary.darkest],
      border: [colors.primary.darker, colors.primary.lighter],
      focusRing: [colors.primary.base, colors.primary.base]
    },
    positive: {
      bg: [colors.positive.darkest, colors.positive.lightest],
      fg: [colors.positive.lightest, colors.positive.darkest],
      border: [colors.positive.darker, colors.positive.lighter],
      focusRing: [colors.positive.base, colors.positive.base]
    },
    caution: {
      bg: [colors.caution.darkest, colors.caution.lightest],
      fg: [colors.caution.lightest, colors.caution.darkest],
      border: [colors.caution.darker, colors.caution.lighter],
      focusRing: [colors.caution.base, colors.caution.base]
    },
    critical: {
      bg: [colors.critical.darkest, colors.critical.lightest],
      fg: [colors.critical.lightest, colors.critical.darkest],
      border: [colors.critical.darker, colors.critical.lighter],
      focusRing: [colors.critical.base, colors.critical.base]
    }
  };
  const defaultOpts = {
    base: ({
      dark,
      name
    }) => {
      if (name === 'default') {
        return {
          bg: dark ? black : white,
          fg: dark ? white : black,
          border: dark ? colors.default.darkest : colors.default.lightest,
          focusRing: colors.primary.base,
          shadow: {
            outline: black,
            umbra: black,
            penumbra: black,
            ambient: black
          },
          skeleton: {
            from: dark ? white : black,
            to: dark ? white : black
          }
        };
      } // Variants:
      // - primary
      // - positive
      // - caution
      // - critical
  
  
      return {
        bg: tones$1[name].bg[dark ? 0 : 1],
        fg: tones$1[name].fg[dark ? 0 : 1],
        border: tones$1[name].border[dark ? 0 : 1],
        focusRing: tones$1[name].focusRing[dark ? 0 : 1],
        shadow: {
          outline: black,
          umbra: black,
          penumbra: black,
          ambient: black
        },
        skeleton: {
          from: dark ? white : black,
          to: dark ? white : black
        }
      };
    },
    solid: ({
      base,
      dark,
      state,
      tone
    }) => {
      const color = colors[tone];
  
      if (state === 'hovered') {
        return {
          bg: dark ? color.light : color.dark,
          bg2: dark ? color.light : color.dark,
          border: dark ? color.lighter : color.darker,
          fg: dark ? color.darkest : color.lightest,
          muted: {
            fg: black
          },
          accent: {
            fg: black
          },
          link: {
            fg: black
          },
          code: {
            bg: black,
            fg: black
          },
          skeleton: base.skeleton
        };
      }
  
      return {
        bg: color.base,
        bg2: color.base,
        border: dark ? color.light : color.dark,
        fg: dark ? color.darkest : color.lightest,
        muted: {
          fg: black
        },
        accent: {
          fg: black
        },
        link: {
          fg: black
        },
        code: {
          bg: black,
          fg: black
        },
        skeleton: base.skeleton
      };
    },
    muted: ({
      base,
      dark,
      state,
      tone
    }) => {
      const color = colors[tone];
  
      if (state === 'hovered') {
        return {
          bg: dark ? color.darker : color.lighter,
          bg2: dark ? color.darker : color.lighter,
          border: dark ? color.lighter : color.darker,
          fg: dark ? color.lightest : color.darkest,
          muted: {
            fg: black
          },
          accent: {
            fg: black
          },
          link: {
            fg: black
          },
          code: {
            bg: black,
            fg: black
          },
          skeleton: base.skeleton
        };
      }
  
      return {
        bg: dark ? color.darkest : color.lightest,
        bg2: dark ? color.darkest : color.lightest,
        border: dark ? color.darker : color.lighter,
        fg: dark ? color.lighter : color.darker,
        muted: {
          fg: black
        },
        accent: {
          fg: black
        },
        link: {
          fg: black
        },
        code: {
          bg: black,
          fg: black
        },
        skeleton: base.skeleton
      };
    },
    button: ({
      base,
      mode,
      muted,
      solid
    }) => {
      if (mode === 'bleed') {
        return _extends({}, muted, {
          enabled: {
            bg: 'transparent',
            bg2: 'transparent',
            fg: muted.enabled.fg,
            border: 'transparent',
            muted: {
              fg: black
            },
            accent: {
              fg: black
            },
            link: {
              fg: black
            },
            code: {
              bg: black,
              fg: black
            },
            skeleton: base.skeleton
          },
          hovered: {
            bg: muted.enabled.bg,
            bg2: muted.enabled.bg,
            fg: muted.hovered.fg,
            border: 'transparent',
            muted: {
              fg: black
            },
            accent: {
              fg: black
            },
            link: {
              fg: black
            },
            code: {
              bg: black,
              fg: black
            },
            skeleton: base.skeleton
          }
        });
      }
  
      if (mode === 'ghost') return _extends({}, solid, {
        enabled: muted.enabled
      });
      return solid;
    },
    card: ({
      base
    }) => {
      return {
        bg: black,
        bg2: black,
        fg: black,
        border: black,
        muted: {
          fg: black
        },
        accent: {
          fg: black
        },
        link: {
          fg: black
        },
        code: {
          bg: black,
          fg: black
        },
        skeleton: base.skeleton
      };
    },
    input: () => {
      return {
        bg: black,
        fg: black,
        border: black,
        placeholder: black
      };
    },
    selectable: ({
      muted,
      state,
      tone
    }) => {
      return muted[tone][state];
    },
    spot: ({
      key
    }) => {
      return spots[key];
    },
    syntax: () => ({
      atrule: black,
      attrName: black,
      attrValue: black,
      attribute: black,
      boolean: black,
      builtin: black,
      cdata: black,
      char: black,
      class: black,
      className: black,
      comment: black,
      constant: black,
      deleted: black,
      doctype: black,
      entity: black,
      function: black,
      hexcode: black,
      id: black,
      important: black,
      inserted: black,
      keyword: black,
      number: black,
      operator: black,
      prolog: black,
      property: black,
      pseudoClass: black,
      pseudoElement: black,
      punctuation: black,
      regex: black,
      selector: black,
      string: black,
      symbol: black,
      tag: black,
      unit: black,
      url: black,
      variable: black
    })
  };
  
  function createInputModes(opts, base, dark, solid, muted) {
    return {
      default: {
        enabled: opts.input({
          base,
          dark,
          mode: 'default',
          state: 'enabled',
          solid: solid.default,
          muted: muted.default
        }),
        disabled: opts.input({
          base,
          dark,
          mode: 'default',
          state: 'disabled',
          solid: solid.default,
          muted: muted.default
        }),
        hovered: opts.input({
          base,
          dark,
          mode: 'default',
          state: 'hovered',
          solid: solid.default,
          muted: muted.default
        }),
        readOnly: opts.input({
          base,
          dark,
          mode: 'default',
          state: 'readOnly',
          solid: solid.default,
          muted: muted.default
        })
      },
      invalid: {
        enabled: opts.input({
          base,
          dark,
          mode: 'invalid',
          state: 'enabled',
          solid: solid.default,
          muted: muted.default
        }),
        disabled: opts.input({
          base,
          dark,
          mode: 'invalid',
          state: 'disabled',
          solid: solid.default,
          muted: muted.default
        }),
        hovered: opts.input({
          base,
          dark,
          mode: 'invalid',
          state: 'hovered',
          solid: solid.default,
          muted: muted.default
        }),
        readOnly: opts.input({
          base,
          dark,
          mode: 'invalid',
          state: 'readOnly',
          solid: solid.default,
          muted: muted.default
        })
      }
    };
  }
  
  function createMutedTones(opts, base, dark, name) {
    return {
      default: {
        enabled: opts.muted({
          base,
          dark,
          tone: 'default',
          name,
          state: 'enabled'
        }),
        disabled: opts.muted({
          base,
          dark,
          tone: 'default',
          name,
          state: 'disabled'
        }),
        hovered: opts.muted({
          base,
          dark,
          tone: 'default',
          name,
          state: 'hovered'
        }),
        pressed: opts.muted({
          base,
          dark,
          tone: 'default',
          name,
          state: 'pressed'
        }),
        selected: opts.muted({
          base,
          dark,
          tone: 'default',
          name,
          state: 'selected'
        })
      },
      transparent: {
        enabled: opts.muted({
          base,
          dark,
          tone: 'transparent',
          name,
          state: 'enabled'
        }),
        disabled: opts.muted({
          base,
          dark,
          tone: 'transparent',
          name,
          state: 'disabled'
        }),
        hovered: opts.muted({
          base,
          dark,
          tone: 'transparent',
          name,
          state: 'hovered'
        }),
        pressed: opts.muted({
          base,
          dark,
          tone: 'transparent',
          name,
          state: 'pressed'
        }),
        selected: opts.muted({
          base,
          dark,
          tone: 'transparent',
          name,
          state: 'selected'
        })
      },
      primary: {
        enabled: opts.muted({
          base,
          dark,
          tone: 'primary',
          name,
          state: 'enabled'
        }),
        disabled: opts.muted({
          base,
          dark,
          tone: 'primary',
          name,
          state: 'disabled'
        }),
        hovered: opts.muted({
          base,
          dark,
          tone: 'primary',
          name,
          state: 'hovered'
        }),
        pressed: opts.muted({
          base,
          dark,
          tone: 'primary',
          name,
          state: 'pressed'
        }),
        selected: opts.muted({
          base,
          dark,
          tone: 'primary',
          name,
          state: 'selected'
        })
      },
      positive: {
        enabled: opts.muted({
          base,
          dark,
          tone: 'positive',
          name,
          state: 'enabled'
        }),
        disabled: opts.muted({
          base,
          dark,
          tone: 'positive',
          name,
          state: 'disabled'
        }),
        hovered: opts.muted({
          base,
          dark,
          tone: 'positive',
          name,
          state: 'hovered'
        }),
        pressed: opts.muted({
          base,
          dark,
          tone: 'positive',
          name,
          state: 'pressed'
        }),
        selected: opts.muted({
          base,
          dark,
          tone: 'positive',
          name,
          state: 'selected'
        })
      },
      caution: {
        enabled: opts.muted({
          base,
          dark,
          tone: 'caution',
          name,
          state: 'enabled'
        }),
        disabled: opts.muted({
          base,
          dark,
          tone: 'caution',
          name,
          state: 'disabled'
        }),
        hovered: opts.muted({
          base,
          dark,
          tone: 'caution',
          name,
          state: 'hovered'
        }),
        pressed: opts.muted({
          base,
          dark,
          tone: 'caution',
          name,
          state: 'pressed'
        }),
        selected: opts.muted({
          base,
          dark,
          tone: 'caution',
          name,
          state: 'selected'
        })
      },
      critical: {
        enabled: opts.muted({
          base,
          dark,
          tone: 'critical',
          name,
          state: 'enabled'
        }),
        disabled: opts.muted({
          base,
          dark,
          tone: 'critical',
          name,
          state: 'disabled'
        }),
        hovered: opts.muted({
          base,
          dark,
          tone: 'critical',
          name,
          state: 'hovered'
        }),
        pressed: opts.muted({
          base,
          dark,
          tone: 'critical',
          name,
          state: 'pressed'
        }),
        selected: opts.muted({
          base,
          dark,
          tone: 'critical',
          name,
          state: 'selected'
        })
      }
    };
  }
  
  function createSelectableTones(opts, base, dark, solid, muted) {
    return {
      default: _createSelectableStates(opts, base, dark, solid, muted, 'default'),
      primary: _createSelectableStates(opts, base, dark, solid, muted, 'primary'),
      positive: _createSelectableStates(opts, base, dark, solid, muted, 'positive'),
      caution: _createSelectableStates(opts, base, dark, solid, muted, 'caution'),
      critical: _createSelectableStates(opts, base, dark, solid, muted, 'critical')
    };
  }
  
  function _createSelectableStates(opts, base, dark, solid, muted, tone) {
    return {
      enabled: opts.selectable({
        base,
        dark,
        solid,
        muted,
        state: 'enabled',
        tone
      }),
      hovered: opts.selectable({
        base,
        dark,
        solid,
        muted,
        state: 'hovered',
        tone
      }),
      pressed: opts.selectable({
        base,
        dark,
        solid,
        muted,
        state: 'pressed',
        tone
      }),
      selected: opts.selectable({
        base,
        dark,
        solid,
        muted,
        state: 'selected',
        tone
      }),
      disabled: opts.selectable({
        base,
        dark,
        solid,
        muted,
        state: 'disabled',
        tone
      })
    };
  }
  
  function createSolidTones(opts, base, dark, name) {
    return {
      default: {
        enabled: opts.solid({
          base,
          dark,
          tone: 'default',
          name,
          state: 'enabled'
        }),
        disabled: opts.solid({
          base,
          dark,
          tone: 'default',
          name,
          state: 'disabled'
        }),
        hovered: opts.solid({
          base,
          dark,
          tone: 'default',
          name,
          state: 'hovered'
        }),
        pressed: opts.solid({
          base,
          dark,
          tone: 'default',
          name,
          state: 'pressed'
        }),
        selected: opts.solid({
          base,
          dark,
          tone: 'default',
          name,
          state: 'selected'
        })
      },
      transparent: {
        enabled: opts.solid({
          base,
          dark,
          tone: 'transparent',
          name,
          state: 'enabled'
        }),
        disabled: opts.solid({
          base,
          dark,
          tone: 'transparent',
          name,
          state: 'disabled'
        }),
        hovered: opts.solid({
          base,
          dark,
          tone: 'transparent',
          name,
          state: 'hovered'
        }),
        pressed: opts.solid({
          base,
          dark,
          tone: 'transparent',
          name,
          state: 'pressed'
        }),
        selected: opts.solid({
          base,
          dark,
          tone: 'transparent',
          name,
          state: 'selected'
        })
      },
      primary: {
        enabled: opts.solid({
          base,
          dark,
          tone: 'primary',
          name,
          state: 'enabled'
        }),
        disabled: opts.solid({
          base,
          dark,
          tone: 'primary',
          name,
          state: 'disabled'
        }),
        hovered: opts.solid({
          base,
          dark,
          tone: 'primary',
          name,
          state: 'hovered'
        }),
        pressed: opts.solid({
          base,
          dark,
          tone: 'primary',
          name,
          state: 'pressed'
        }),
        selected: opts.solid({
          base,
          dark,
          tone: 'primary',
          name,
          state: 'selected'
        })
      },
      positive: {
        enabled: opts.solid({
          base,
          dark,
          tone: 'positive',
          name,
          state: 'enabled'
        }),
        disabled: opts.solid({
          base,
          dark,
          tone: 'positive',
          name,
          state: 'disabled'
        }),
        hovered: opts.solid({
          base,
          dark,
          tone: 'positive',
          name,
          state: 'hovered'
        }),
        pressed: opts.solid({
          base,
          dark,
          tone: 'positive',
          name,
          state: 'pressed'
        }),
        selected: opts.solid({
          base,
          dark,
          tone: 'positive',
          name,
          state: 'selected'
        })
      },
      caution: {
        enabled: opts.solid({
          base,
          dark,
          tone: 'caution',
          name,
          state: 'enabled'
        }),
        disabled: opts.solid({
          base,
          dark,
          tone: 'caution',
          name,
          state: 'disabled'
        }),
        hovered: opts.solid({
          base,
          dark,
          tone: 'caution',
          name,
          state: 'hovered'
        }),
        pressed: opts.solid({
          base,
          dark,
          tone: 'caution',
          name,
          state: 'pressed'
        }),
        selected: opts.solid({
          base,
          dark,
          tone: 'caution',
          name,
          state: 'selected'
        })
      },
      critical: {
        enabled: opts.solid({
          base,
          dark,
          tone: 'critical',
          name,
          state: 'enabled'
        }),
        disabled: opts.solid({
          base,
          dark,
          tone: 'critical',
          name,
          state: 'disabled'
        }),
        hovered: opts.solid({
          base,
          dark,
          tone: 'critical',
          name,
          state: 'hovered'
        }),
        pressed: opts.solid({
          base,
          dark,
          tone: 'critical',
          name,
          state: 'pressed'
        }),
        selected: opts.solid({
          base,
          dark,
          tone: 'critical',
          name,
          state: 'selected'
        })
      }
    };
  }
  
  function createSpot(opts, base, dark) {
    return {
      gray: opts.spot({
        base,
        dark,
        key: 'gray'
      }),
      blue: opts.spot({
        base,
        dark,
        key: 'blue'
      }),
      purple: opts.spot({
        base,
        dark,
        key: 'purple'
      }),
      magenta: opts.spot({
        base,
        dark,
        key: 'magenta'
      }),
      red: opts.spot({
        base,
        dark,
        key: 'red'
      }),
      orange: opts.spot({
        base,
        dark,
        key: 'orange'
      }),
      yellow: opts.spot({
        base,
        dark,
        key: 'yellow'
      }),
      green: opts.spot({
        base,
        dark,
        key: 'green'
      }),
      cyan: opts.spot({
        base,
        dark,
        key: 'cyan'
      })
    };
  }
  
  /**
   * @public
   */
  
  function createColorTheme(partialOpts = {}) {
    const builders = _extends({}, defaultOpts, partialOpts);
  
    return {
      light: _createColorScheme(builders, false),
      dark: _createColorScheme(builders, true)
    };
  }
  /**
   * @internal
   */
  
  function _createColorScheme(opts, dark) {
    return {
      default: _createColor(opts, dark, 'default'),
      transparent: _createColor(opts, dark, 'transparent'),
      primary: _createColor(opts, dark, 'primary'),
      positive: _createColor(opts, dark, 'positive'),
      caution: _createColor(opts, dark, 'caution'),
      critical: _createColor(opts, dark, 'critical')
    };
  }
  /**
   * @internal
   */
  
  
  function _createColor(opts, dark, name) {
    const base = opts.base({
      dark,
      name
    });
    const solid = createSolidTones(opts, base, dark, name);
    const muted = createMutedTones(opts, base, dark, name);
    return {
      base,
      button: createButtonModes(opts, base, dark, solid, muted),
      card: createCardStates(opts, base, dark, name, solid, muted),
      dark,
      input: createInputModes(opts, base, dark, solid, muted),
      selectable: createSelectableTones(opts, base, dark, solid, muted),
      spot: createSpot(opts, base, dark),
      syntax: opts.syntax({
        base,
        dark
      }),
      solid,
      muted
    };
  }
  
  function multiply(bg, fg) {
    const b = parseColor(bg);
    const s = parseColor(fg);
    const hex = rgbToHex(multiply$1(b, s));
    return hex;
  }
  function screen(bg, fg) {
    const b = parseColor(bg);
    const s = parseColor(fg);
    const hex = rgbToHex(screen$1(b, s));
    return hex;
  }
  
  const tones = {
    default: hues.gray,
    transparent: hues.gray,
    primary: hues.blue,
    positive: hues.green,
    caution: hues.yellow,
    critical: hues.red
  };
  const NEUTRAL_TONES = ['default', 'transparent'];
  const color = createColorTheme({
    base: ({
      dark,
      name
    }) => {
      if (name === 'default') {
        const _skeletonFrom = dark ? hues.gray[900].hex : hues.gray[100].hex;
  
        return {
          fg: dark ? white$1.hex : black$1.hex,
          bg: dark ? black$1.hex : white$1.hex,
          border: hues.gray[dark ? 800 : 200].hex,
          focusRing: hues.blue[dark ? 500 : 500].hex,
          shadow: {
            outline: rgba(hues.gray[500].hex, 0.4),
            umbra: rgba(dark ? black$1.hex : hues.gray[500].hex, 0.2),
            penumbra: rgba(dark ? black$1.hex : hues.gray[500].hex, 0.14),
            ambient: rgba(dark ? black$1.hex : hues.gray[500].hex, 0.12)
          },
          skeleton: {
            from: _skeletonFrom,
            to: rgba(_skeletonFrom, 0.5)
          }
        };
      }
  
      if (name === 'transparent') {
        const _tints = tones.default;
        const _skeletonFrom2 = _tints[dark ? 800 : 200].hex;
        return {
          fg: _tints[dark ? 100 : 900].hex,
          bg: _tints[dark ? 950 : 50].hex,
          border: _tints[dark ? 800 : 300].hex,
          focusRing: hues.blue[500].hex,
          shadow: {
            outline: rgba(_tints[500].hex, dark ? 0.2 : 0.4),
            umbra: rgba(dark ? black$1.hex : _tints[500].hex, 0.2),
            penumbra: rgba(dark ? black$1.hex : _tints[500].hex, 0.14),
            ambient: rgba(dark ? black$1.hex : _tints[500].hex, 0.12)
          },
          skeleton: {
            from: _skeletonFrom2,
            to: rgba(_skeletonFrom2, 0.5)
          }
        };
      }
  
      const tints = tones[name] || tones.default;
      const skeletonFrom = tints[dark ? 800 : 200].hex;
      return {
        fg: tints[dark ? 100 : 900].hex,
        bg: tints[dark ? 950 : 50].hex,
        border: tints[dark ? 800 : 200].hex,
        focusRing: tints[500].hex,
        shadow: {
          outline: rgba(tints[500].hex, dark ? 0.2 : 0.4),
          umbra: rgba(dark ? black$1.hex : tints[500].hex, 0.2),
          penumbra: rgba(dark ? black$1.hex : tints[500].hex, 0.14),
          ambient: rgba(dark ? black$1.hex : tints[500].hex, 0.12)
        },
        skeleton: {
          from: skeletonFrom,
          to: rgba(skeletonFrom, 0.5)
        }
      };
    },
    solid: ({
      base,
      dark,
      name,
      state,
      tone
    }) => {
      const mix = dark ? screen : multiply;
      const mix2 = dark ? multiply : screen;
      const defaultTints = tones[name] || tones.default;
      const isNeutral = NEUTRAL_TONES.includes(name) && NEUTRAL_TONES.includes(tone);
      let tints = tones[tone === 'default' ? name : tone] || defaultTints;
  
      if (state === 'disabled') {
        tints = defaultTints;
  
        const _bg = mix(base.bg, tints[dark ? 800 : 200].hex);
  
        const _skeletonFrom3 = mix2(_bg, tints[dark ? 200 : 800].hex);
  
        return {
          bg: _bg,
          bg2: mix2(_bg, tints[dark ? 50 : 950].hex),
          border: mix(base.bg, tints[dark ? 800 : 200].hex),
          fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
          muted: {
            fg: mix(base.bg, tints[dark ? 950 : 50].hex)
          },
          accent: {
            fg: mix(base.bg, tints[dark ? 950 : 50].hex)
          },
          link: {
            fg: mix(base.bg, tints[dark ? 950 : 50].hex)
          },
          code: {
            bg: _bg,
            fg: mix(base.bg, tints[dark ? 950 : 50].hex)
          },
          skeleton: {
            from: _skeletonFrom3,
            to: rgba(_skeletonFrom3, 0.5)
          }
        };
      }
  
      if (state === 'hovered') {
        const _bg2 = mix(base.bg, tints[dark ? 300 : 600].hex);
  
        const _skeletonFrom4 = mix2(_bg2, tints[dark ? 200 : 800].hex);
  
        return {
          bg: _bg2,
          bg2: mix2(_bg2, tints[dark ? 50 : 950].hex),
          border: mix(base.bg, tints[dark ? 300 : 600].hex),
          fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
          muted: {
            fg: mix(base.bg, tints[dark ? 800 : 200].hex)
          },
          accent: {
            fg: mix2(_bg2, hues.red[dark ? 800 : 200].hex)
          },
          link: {
            fg: mix2(_bg2, hues.blue[dark ? 800 : 200].hex)
          },
          code: {
            bg: mix(_bg2, tints[dark ? 950 : 50].hex),
            fg: mix(base.bg, tints[dark ? 800 : 200].hex)
          },
          skeleton: {
            from: _skeletonFrom4,
            to: rgba(_skeletonFrom4, 0.5)
          }
        };
      }
  
      if (state === 'pressed') {
        const _bg3 = mix(base.bg, tints[dark ? 200 : 800].hex);
  
        const _skeletonFrom5 = mix2(_bg3, tints[dark ? 200 : 800].hex);
  
        return {
          bg: mix(base.bg, tints[dark ? 200 : 800].hex),
          bg2: mix2(_bg3, tints[dark ? 50 : 950].hex),
          border: mix(base.bg, tints[dark ? 200 : 800].hex),
          fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
          muted: {
            fg: mix(base.bg, tints[dark ? 800 : 200].hex)
          },
          accent: {
            fg: mix2(_bg3, hues.red[dark ? 800 : 200].hex)
          },
          link: {
            fg: mix2(_bg3, hues.blue[dark ? 800 : 200].hex)
          },
          code: {
            bg: mix(_bg3, tints[dark ? 950 : 50].hex),
            fg: mix(base.bg, tints[dark ? 800 : 200].hex)
          },
          skeleton: {
            from: _skeletonFrom5,
            to: rgba(_skeletonFrom5, 0.5)
          }
        };
      }
  
      if (state === 'selected') {
        if (isNeutral) {
          tints = tones.primary;
        }
  
        const _bg4 = mix(base.bg, tints[dark ? 200 : 800].hex);
  
        const _skeletonFrom6 = mix2(_bg4, tints[dark ? 200 : 800].hex);
  
        return {
          bg: _bg4,
          bg2: mix2(_bg4, tints[dark ? 50 : 950].hex),
          border: mix(base.bg, tints[dark ? 200 : 800].hex),
          fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
          muted: {
            fg: mix(base.bg, tints[dark ? 800 : 200].hex)
          },
          accent: {
            fg: mix2(_bg4, hues.red[dark ? 800 : 200].hex)
          },
          link: {
            fg: mix2(_bg4, hues.blue[dark ? 800 : 200].hex)
          },
          code: {
            bg: mix(_bg4, tints[dark ? 950 : 50].hex),
            fg: mix(base.bg, tints[dark ? 800 : 200].hex)
          },
          skeleton: {
            from: _skeletonFrom6,
            to: rgba(_skeletonFrom6, 0.5)
          }
        };
      } // state: "enabled" | unknown
  
  
      const bg = mix(base.bg, tints[dark ? 400 : 500].hex);
      const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex);
      return {
        bg,
        bg2: mix2(bg, tints[dark ? 50 : 950].hex),
        border: mix(base.bg, tints[dark ? 400 : 500].hex),
        fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
        muted: {
          fg: mix(base.bg, tints[dark ? 900 : 100].hex)
        },
        accent: {
          fg: mix2(bg, hues.red[dark ? 900 : 100].hex)
        },
        link: {
          fg: mix2(bg, hues.blue[dark ? 900 : 100].hex)
        },
        code: {
          bg: mix(bg, tints[dark ? 950 : 50].hex),
          fg: mix(base.bg, tints[dark ? 900 : 100].hex)
        },
        skeleton: {
          from: skeletonFrom,
          to: rgba(skeletonFrom, 0.5)
        }
      };
    },
    muted: ({
      base,
      dark,
      name,
      state,
      tone
    }) => {
      const mix = dark ? screen : multiply;
      const defaultTints = tones[name] || tones.default;
      const isNeutral = NEUTRAL_TONES.includes(name) && NEUTRAL_TONES.includes(tone);
      let tints = tones[tone === 'default' ? name : tone] || defaultTints;
  
      if (state === 'disabled') {
        tints = defaultTints;
        const _bg5 = base.bg;
  
        const _skeletonFrom7 = mix(_bg5, tints[dark ? 900 : 100].hex);
  
        return {
          bg: _bg5,
          bg2: mix(_bg5, tints[dark ? 950 : 50].hex),
          border: mix(_bg5, tints[dark ? 950 : 50].hex),
          fg: mix(_bg5, tints[dark ? 800 : 200].hex),
          muted: {
            fg: mix(_bg5, tints[dark ? 900 : 100].hex)
          },
          accent: {
            fg: mix(_bg5, tints[dark ? 900 : 100].hex)
          },
          link: {
            fg: mix(_bg5, tints[dark ? 900 : 100].hex)
          },
          code: {
            bg: _bg5,
            fg: mix(_bg5, tints[dark ? 900 : 100].hex)
          },
          skeleton: {
            from: rgba(_skeletonFrom7, 0.5),
            to: rgba(_skeletonFrom7, 0.25)
          }
        };
      }
  
      if (state === 'hovered') {
        // if (isNeutral) {
        //   tints = tones.primary
        // }
        const _bg6 = mix(base.bg, tints[dark ? 950 : 50].hex);
  
        const _skeletonFrom8 = mix(_bg6, tints[dark ? 900 : 100].hex);
  
        return {
          bg: _bg6,
          bg2: mix(_bg6, tints[dark ? 950 : 50].hex),
          border: mix(_bg6, tints[dark ? 900 : 100].hex),
          fg: mix(base.bg, tints[dark ? 200 : 800].hex),
          muted: {
            fg: mix(base.bg, tints[dark ? 400 : 600].hex)
          },
          accent: {
            fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
          },
          link: {
            fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex)
          },
          code: {
            bg: mix(_bg6, tints[dark ? 950 : 50].hex),
            fg: mix(base.bg, tints[dark ? 400 : 600].hex)
          },
          skeleton: {
            from: _skeletonFrom8,
            to: rgba(_skeletonFrom8, 0.5)
          }
        };
      }
  
      if (state === 'pressed') {
        if (isNeutral) {
          tints = tones.primary;
        }
  
        const _bg7 = mix(base.bg, tints[dark ? 900 : 100].hex);
  
        const _skeletonFrom9 = mix(_bg7, tints[dark ? 900 : 100].hex);
  
        return {
          bg: _bg7,
          bg2: mix(_bg7, tints[dark ? 950 : 50].hex),
          border: mix(_bg7, tints[dark ? 900 : 100].hex),
          fg: mix(base.bg, tints[dark ? 200 : 800].hex),
          muted: {
            fg: mix(base.bg, tints[dark ? 400 : 600].hex)
          },
          accent: {
            fg: mix(_bg7, hues.red[dark ? 400 : 500].hex)
          },
          link: {
            fg: mix(_bg7, hues.blue[dark ? 400 : 600].hex)
          },
          code: {
            bg: mix(_bg7, tints[dark ? 950 : 50].hex),
            fg: mix(base.bg, tints[dark ? 400 : 600].hex)
          },
          skeleton: {
            from: _skeletonFrom9,
            to: rgba(_skeletonFrom9, 0.5)
          }
        };
      }
  
      if (state === 'selected') {
        if (isNeutral) {
          tints = tones.primary;
        }
  
        const _bg8 = mix(base.bg, tints[dark ? 900 : 100].hex);
  
        const _skeletonFrom10 = mix(_bg8, tints[dark ? 900 : 100].hex);
  
        return {
          bg: _bg8,
          bg2: mix(_bg8, tints[dark ? 950 : 50].hex),
          border: mix(_bg8, tints[dark ? 900 : 100].hex),
          fg: mix(base.bg, tints[dark ? 200 : 800].hex),
          muted: {
            fg: mix(base.bg, tints[dark ? 400 : 600].hex)
          },
          accent: {
            fg: mix(_bg8, hues.red[dark ? 400 : 500].hex)
          },
          link: {
            fg: mix(_bg8, hues.blue[dark ? 400 : 600].hex)
          },
          code: {
            bg: mix(_bg8, tints[dark ? 950 : 50].hex),
            fg: mix(base.bg, tints[dark ? 400 : 600].hex)
          },
          skeleton: {
            from: _skeletonFrom10,
            to: rgba(_skeletonFrom10, 0.5)
          }
        };
      }
  
      const bg = base.bg;
      const skeletonFrom = mix(bg, tints[dark ? 900 : 100].hex);
      return {
        bg,
        bg2: mix(bg, tints[dark ? 950 : 50].hex),
        border: mix(bg, tints[dark ? 900 : 100].hex),
        fg: mix(base.bg, tints[dark ? 300 : 700].hex),
        muted: {
          fg: mix(base.bg, tints[dark ? 400 : 600].hex)
        },
        accent: {
          fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
        },
        link: {
          fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex)
        },
        code: {
          bg: mix(base.bg, tints[dark ? 950 : 50].hex),
          fg: mix(base.bg, tints[dark ? 400 : 600].hex)
        },
        skeleton: {
          from: skeletonFrom,
          to: rgba(skeletonFrom, 0.5)
        }
      };
    },
    button: ({
      base,
      mode,
      muted,
      solid
    }) => {
      if (mode === 'bleed') {
        return {
          enabled: _extends({}, muted.enabled, {
            border: muted.enabled.bg
          }),
          hovered: _extends({}, muted.hovered, {
            border: muted.hovered.bg
          }),
          pressed: _extends({}, muted.pressed, {
            border: muted.pressed.bg
          }),
          selected: _extends({}, muted.selected, {
            border: muted.selected.bg
          }),
          disabled: _extends({}, muted.disabled, {
            border: muted.disabled.bg
          })
        };
      }
  
      if (mode === 'ghost') {
        return _extends({}, solid, {
          enabled: _extends({}, muted.enabled, {
            border: base.border
          }),
          disabled: muted.disabled
        });
      }
  
      return solid;
    },
    card: ({
      base,
      dark,
      muted,
      name,
      solid,
      state
    }) => {
      if (state === 'hovered') {
        return muted[name].hovered;
      }
  
      if (state === 'disabled') {
        return muted[name].disabled;
      }
  
      const isNeutral = NEUTRAL_TONES.includes(name);
      const tints = tones[name] || tones.default;
      const mix = dark ? screen : multiply;
  
      if (state === 'pressed') {
        if (isNeutral) {
          return muted.primary.pressed;
        }
  
        return muted[name].pressed;
      }
  
      if (state === 'selected') {
        if (isNeutral) {
          return solid.primary.enabled;
        }
  
        return solid[name].enabled;
      }
  
      const bg = base.bg;
      const skeletonFrom = mix(base.bg, tints[dark ? 900 : 100].hex);
      return {
        bg,
        bg2: mix(bg, tints[dark ? 950 : 50].hex),
        fg: base.fg,
        border: base.border,
        muted: {
          fg: mix(base.bg, tints[dark ? 400 : 600].hex)
        },
        accent: {
          fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
        },
        link: {
          fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex)
        },
        code: {
          bg: mix(base.bg, tints[dark ? 950 : 50].hex),
          fg: tints[dark ? 400 : 600].hex
        },
        skeleton: {
          from: skeletonFrom,
          to: rgba(skeletonFrom, 0.5)
        }
      };
    },
    input: ({
      base,
      dark,
      mode,
      state
    }) => {
      const mix = dark ? screen : multiply;
  
      if (mode === 'invalid') {
        const tints = tones.critical;
        return {
          bg: mix(base.bg, tints[dark ? 950 : 50].hex),
          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
          border: mix(base.bg, tints[dark ? 800 : 200].hex),
          placeholder: mix(base.bg, tints[dark ? 600 : 400].hex)
        };
      }
  
      if (state === 'hovered') {
        return {
          bg: base.bg,
          fg: base.fg,
          border: mix(base.bg, hues.gray[dark ? 700 : 300].hex),
          placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex)
        };
      }
  
      if (state === 'disabled') {
        return {
          bg: mix(base.bg, hues.gray[dark ? 950 : 50].hex),
          fg: mix(base.bg, hues.gray[dark ? 700 : 300].hex),
          border: mix(base.bg, hues.gray[dark ? 900 : 100].hex),
          placeholder: mix(base.bg, hues.gray[dark ? 800 : 200].hex)
        };
      }
  
      if (state === 'readOnly') {
        return {
          bg: mix(base.bg, hues.gray[dark ? 950 : 50].hex),
          fg: mix(base.bg, hues.gray[dark ? 200 : 800].hex),
          border: mix(base.bg, hues.gray[dark ? 800 : 200].hex),
          placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex)
        };
      }
  
      return {
        bg: base.bg,
        fg: base.fg,
        border: base.border,
        placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex)
      };
    },
    selectable: ({
      base,
      muted,
      tone,
      solid,
      state
    }) => {
      if (state === 'enabled') {
        return _extends({}, muted[tone].enabled, {
          bg: base.bg
        });
      }
  
      if (state === 'pressed') {
        if (tone === 'default') {
          return muted.primary.pressed;
        }
  
        return muted[tone].pressed;
      }
  
      if (state === 'selected') {
        if (tone === 'default') {
          return solid.primary.enabled;
        }
  
        return solid[tone].enabled;
      }
  
      if (state === 'disabled') {
        return _extends({}, muted[tone].disabled, {
          bg: base.bg
        });
      }
  
      return muted[tone][state];
    },
    spot: ({
      base,
      dark,
      key
    }) => {
      const mix = dark ? screen : multiply;
      return mix(base.bg, hues[key][dark ? 400 : 500].hex);
    },
    syntax: ({
      base,
      dark
    }) => {
      const mix = dark ? screen : multiply;
      const mainShade = dark ? 400 : 600;
      const secondaryShade = dark ? 600 : 400;
      return {
        atrule: mix(base.bg, hues.purple[mainShade].hex),
        attrName: mix(base.bg, hues.green[mainShade].hex),
        attrValue: mix(base.bg, hues.yellow[mainShade].hex),
        attribute: mix(base.bg, hues.yellow[mainShade].hex),
        boolean: mix(base.bg, hues.purple[mainShade].hex),
        builtin: mix(base.bg, hues.purple[mainShade].hex),
        cdata: mix(base.bg, hues.yellow[mainShade].hex),
        char: mix(base.bg, hues.yellow[mainShade].hex),
        class: mix(base.bg, hues.orange[mainShade].hex),
        className: mix(base.bg, hues.cyan[mainShade].hex),
        comment: mix(base.bg, hues.gray[secondaryShade].hex),
        constant: mix(base.bg, hues.purple[mainShade].hex),
        deleted: mix(base.bg, hues.red[mainShade].hex),
        doctype: mix(base.bg, hues.gray[secondaryShade].hex),
        entity: mix(base.bg, hues.red[mainShade].hex),
        function: mix(base.bg, hues.green[mainShade].hex),
        hexcode: mix(base.bg, hues.blue[mainShade].hex),
        id: mix(base.bg, hues.purple[mainShade].hex),
        important: mix(base.bg, hues.purple[mainShade].hex),
        inserted: mix(base.bg, hues.yellow[mainShade].hex),
        keyword: mix(base.bg, hues.magenta[mainShade].hex),
        number: mix(base.bg, hues.purple[mainShade].hex),
        operator: mix(base.bg, hues.magenta[mainShade].hex),
        prolog: mix(base.bg, hues.gray[secondaryShade].hex),
        property: mix(base.bg, hues.blue[mainShade].hex),
        pseudoClass: mix(base.bg, hues.yellow[mainShade].hex),
        pseudoElement: mix(base.bg, hues.yellow[mainShade].hex),
        punctuation: mix(base.bg, hues.gray[mainShade].hex),
        regex: mix(base.bg, hues.blue[mainShade].hex),
        selector: mix(base.bg, hues.red[mainShade].hex),
        string: mix(base.bg, hues.yellow[mainShade].hex),
        symbol: mix(base.bg, hues.purple[mainShade].hex),
        tag: mix(base.bg, hues.red[mainShade].hex),
        unit: mix(base.bg, hues.orange[mainShade].hex),
        url: mix(base.bg, hues.red[mainShade].hex),
        variable: mix(base.bg, hues.red[mainShade].hex)
      };
    }
  });
  
  const fonts = {
    code: {
      family: '-apple-system-ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace',
      horizontalOffset: 0.075,
      weights: {
        regular: 400,
        medium: 500,
        semibold: 600,
        bold: 700
      },
      sizes: [{
        ascenderHeight: 3,
        descenderHeight: 3,
        fontSize: 10,
        iconSize: 17,
        lineHeight: 13,
        letterSpacing: 0
      }, {
        ascenderHeight: 4,
        descenderHeight: 4,
        fontSize: 13,
        iconSize: 21,
        lineHeight: 17,
        letterSpacing: 0
      }, {
        ascenderHeight: 5,
        descenderHeight: 5,
        fontSize: 16,
        iconSize: 25,
        lineHeight: 21,
        letterSpacing: 0
      }, {
        ascenderHeight: 6,
        descenderHeight: 6,
        fontSize: 19,
        iconSize: 29,
        lineHeight: 25,
        letterSpacing: 0
      }, {
        ascenderHeight: 7,
        descenderHeight: 7,
        fontSize: 22,
        iconSize: 33,
        lineHeight: 29,
        letterSpacing: 0
      }]
    },
    heading: {
      family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif',
      horizontalOffset: 0.075,
      weights: {
        regular: 700,
        medium: 800,
        semibold: 900,
        bold: 900
      },
      sizes: [{
        ascenderHeight: 4,
        descenderHeight: 4,
        fontSize: 12,
        iconSize: 17,
        lineHeight: 17,
        letterSpacing: 0
      }, {
        ascenderHeight: 5,
        descenderHeight: 5,
        fontSize: 16,
        iconSize: 25,
        lineHeight: 21,
        letterSpacing: 0
      }, {
        ascenderHeight: 6,
        descenderHeight: 6,
        fontSize: 21,
        iconSize: 33,
        lineHeight: 27,
        letterSpacing: 0
      }, {
        ascenderHeight: 7,
        descenderHeight: 7,
        fontSize: 27,
        iconSize: 41,
        lineHeight: 33,
        letterSpacing: 0
      }, {
        ascenderHeight: 9,
        descenderHeight: 7,
        fontSize: 33,
        iconSize: 49,
        lineHeight: 39,
        letterSpacing: 0
      }, {
        ascenderHeight: 10,
        descenderHeight: 8,
        fontSize: 38,
        iconSize: 53,
        lineHeight: 45,
        letterSpacing: 0
      }]
    },
    label: {
      family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif',
      horizontalOffset: 0.075,
      weights: {
        regular: 600,
        medium: 700,
        semibold: 800,
        bold: 900
      },
      sizes: [{
        ascenderHeight: 2,
        descenderHeight: 2,
        fontSize: 9.8,
        iconSize: 15,
        lineHeight: 11,
        letterSpacing: 0.5
      }, {
        ascenderHeight: 2,
        descenderHeight: 2,
        fontSize: 11.25,
        iconSize: 17,
        lineHeight: 12,
        letterSpacing: 0.5
      }, {
        ascenderHeight: 2,
        descenderHeight: 2,
        fontSize: 12.75,
        iconSize: 19,
        lineHeight: 13,
        letterSpacing: 0.5
      }, {
        ascenderHeight: 2,
        descenderHeight: 2,
        fontSize: 14,
        iconSize: 21,
        lineHeight: 14,
        letterSpacing: 0.5
      }, {
        ascenderHeight: 2,
        descenderHeight: 2,
        fontSize: 15.5,
        iconSize: 23,
        lineHeight: 15,
        letterSpacing: 0.5
      }]
    },
    text: {
      family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif',
      horizontalOffset: 0.075,
      weights: {
        regular: 400,
        medium: 500,
        semibold: 600,
        bold: 700
      },
      sizes: [{
        ascenderHeight: 3,
        descenderHeight: 3,
        fontSize: 10,
        iconSize: 17,
        lineHeight: 13,
        letterSpacing: 0
      }, {
        ascenderHeight: 4,
        descenderHeight: 4,
        fontSize: 13,
        iconSize: 21,
        lineHeight: 17,
        letterSpacing: 0
      }, {
        ascenderHeight: 5,
        descenderHeight: 5,
        fontSize: 16,
        iconSize: 25,
        lineHeight: 21,
        letterSpacing: 0
      }, {
        ascenderHeight: 6,
        descenderHeight: 6,
        fontSize: 19,
        iconSize: 29,
        lineHeight: 25,
        letterSpacing: 0
      }, {
        ascenderHeight: 7,
        descenderHeight: 7,
        fontSize: 22,
        iconSize: 33,
        lineHeight: 29,
        letterSpacing: 0
      }]
    }
  };
  
  /**
   * @public
   */
  
  const studioTheme = {
    avatar: {
      sizes: [{
        distance: -3,
        size: 25
      }, {
        distance: -6,
        size: 35
      }, {
        distance: -9,
        size: 55
      }]
    },
    button: {
      textWeight: 'medium'
    },
    color,
    container: [320, 640, 960, 1280, 1600, 1920],
    focusRing: {
      offset: 1,
      width: 2
    },
    fonts,
    media: [360, 600, 900, 1200, 1800, 2400],
    radius: [0, 1, 3, 6, 9, 12, 21],
    shadows: [null, {
      umbra: [0, 0, 0, 0],
      penumbra: [0, 0, 0, 0],
      ambient: [0, 0, 0, 0]
    }, {
      umbra: [0, 3, 5, -1],
      penumbra: [0, 6, 10, 0],
      ambient: [0, 1, 18, 0]
    }, {
      umbra: [0, 7, 8, -4],
      penumbra: [0, 12, 17, 2],
      ambient: [0, 5, 22, 4]
    }, {
      umbra: [0, 9, 11, -5],
      penumbra: [0, 18, 28, 2],
      ambient: [0, 7, 34, 6]
    }, {
      umbra: [0, 11, 15, -7],
      penumbra: [0, 24, 38, 3],
      ambient: [0, 9, 46, 8]
    }],
    space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
    input: {
      checkbox: {
        size: 17
      },
      radio: {
        size: 17,
        markSize: 9
      },
      switch: {
        width: 33,
        height: 17,
        padding: 4,
        transitionDurationMs: 150,
        transitionTimingFunction: 'ease-out'
      },
      border: {
        width: 1
      }
    } // styles: {
    //   button: {
    //     root: {
    //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
    //     },
    //   },
    //   card: {
    //     root: {
    //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
    //     },
    //   },
    // },
  
  };
  
  const DEFAULT_THEME_LAYER = {
    dialog: {
      zOffset: 600
    },
    popover: {
      zOffset: 400
    },
    tooltip: {
      zOffset: 200
    }
  };
  
  /**
   * Gets the global scope instance in a given environment.
   *
   * The strategy is to return the most modern, and if not, the most common:
   * - The `globalThis` variable is the modern approach to accessing the global scope
   * - The `window` variable is the global scope in a web browser
   * - The `self` variable is the global scope in workers and others
   * - The `global` variable is the global scope in Node.js
   */
  function getGlobalScope() {
    if (typeof globalThis !== 'undefined') return globalThis;
    if (typeof window !== 'undefined') return window;
    if (typeof self !== 'undefined') return self;
    if (typeof global !== 'undefined') return global;
    throw new Error('@sanity/ui: could not locate global scope');
  }
  
  const globalScope = getGlobalScope();
  
  const key$7 = Symbol.for('@sanity/ui/context/theme');
  globalScope[key$7] = globalScope[key$7] || /*#__PURE__*/createContext(null);
  /**
   * @internal
   */
  
  const ThemeContext = globalScope[key$7];
  
  const _excluded$H = ["color", "layer"];
  /**
   * @public
   */
  
  function ThemeProvider(props) {
    const parentTheme = useContext(ThemeContext);
    const {
      children,
      scheme = (parentTheme == null ? void 0 : parentTheme.scheme) || 'light',
      theme: themeProp = (parentTheme == null ? void 0 : parentTheme.theme) || null,
      tone = (parentTheme == null ? void 0 : parentTheme.tone) || 'default'
    } = props;
    const theme = useMemo(() => {
      if (!themeProp) return null;
  
      const {
        color: rootColor,
        layer: rootLayer
      } = themeProp,
            restTheme = _objectWithoutPropertiesLoose(themeProp, _excluded$H);
  
      const colorScheme = rootColor[scheme] || rootColor.light;
      const color = colorScheme[tone] || colorScheme.default;
      const layer = rootLayer || DEFAULT_THEME_LAYER;
      return {
        sanity: _extends({}, restTheme, {
          color,
          layer
        })
      };
    }, [scheme, themeProp, tone]);
    const value = useMemo(() => themeProp && {
      version: 0.0,
      theme: themeProp,
      scheme,
      tone
    }, [themeProp, scheme, tone]);
  
    if (!theme) {
      return /*#__PURE__*/React.createElement("pre", null, "ThemeProvider: no \"theme\" property provided");
    }
  
    return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
      value: value
    }, /*#__PURE__*/React.createElement(ThemeProvider$1, {
      theme: theme
    }, children));
  }
  
  function isRecord(value) {
    return Boolean(value && typeof value === 'object');
  }
  
  /**
   * @public
   */
  
  function useRootTheme() {
    const value = useContext(ThemeContext);
  
    if (!value) {
      throw new Error('useRootTheme(): missing context value');
    } // NOTE: This check is for future-compatiblity
    // - If the value is not an object, it’s not compatible with the current version
    // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
  
  
    if (!isRecord(value) || value.version !== 0.0) {
      throw new Error('useRootTheme(): the context value is not compatible');
    }
  
    return value;
  }
  
  /**
   * @public
   */
  
  function ThemeColorProvider(props) {
    const {
      children,
      scheme,
      tone
    } = props;
    const root = useRootTheme();
    return /*#__PURE__*/React.createElement(ThemeProvider, {
      scheme: scheme || root.scheme,
      theme: root.theme,
      tone: tone
    }, children);
  }
  
  /**
   * @public
   */
  
  function useTheme() {
    return useTheme$1();
  }
  
  const MEDIA_MANAGER_CACHE = new WeakMap();
  
  function _getMediaQuery(media, index) {
    if (index === 0) {
      return `screen and (max-width: ${media[index] - 1}px)`;
    }
  
    if (index === media.length) {
      return `screen and (min-width: ${media[index - 1]}px)`;
    }
  
    return `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`;
  }
  
  function _createMediaManager(media) {
    const mediaLen = media.length;
    const sizes = [];
  
    if (typeof window !== 'undefined') {
      for (let index = mediaLen; index > -1; index -= 1) {
        const mediaQuery = _getMediaQuery(media, index);
  
        sizes.push({
          index,
          mq: window.matchMedia(mediaQuery)
        });
      }
    }
  
    const getCurrentIndex = () => {
      for (const {
        index,
        mq
      } of sizes) {
        if (mq.matches) return index;
      }
  
      return 0;
    };
  
    const subscribe = subscriber => {
      const disposeFns = [];
  
      for (const {
        index,
        mq
      } of sizes) {
        const handleChange = () => {
          if (mq.matches) subscriber(index);
        };
  
        if (mq.addEventListener) {
          mq.addEventListener('change', handleChange);
        } else {
          mq.addListener(handleChange);
        }
  
        disposeFns.push(() => {
          if (mq.removeEventListener) {
            mq.removeEventListener('change', handleChange);
          } else {
            mq.removeListener(handleChange);
          }
        });
      }
  
      return () => {
        for (const disposeFn of disposeFns) {
          disposeFn();
        }
      };
    };
  
    return {
      getCurrentIndex,
      subscribe
    };
  }
  /**
   * @internal
   */
  
  
  function _getMediaManager(media) {
    let manager = MEDIA_MANAGER_CACHE.get(media);
  
    if (!manager) {
      manager = _createMediaManager(media);
      MEDIA_MANAGER_CACHE.set(media, manager);
    }
  
    return manager;
  }
  
  /**
   * This API might change. DO NOT USE IN PRODUCTION.
   * @beta
   */
  
  function useMediaIndex() {
    const theme = useTheme();
    const {
      media
    } = theme.sanity;
    const manager = useMemo(() => _getMediaManager(media), [media]);
    const [index, setIndex] = useState(manager.getCurrentIndex);
    useEffect(() => manager.subscribe(setIndex), [manager]);
    return index;
  }
  
  /**
   * @public
   */
  
  function usePrefersDark() {
    const [dark, setDark] = useState(false);
    useEffect(() => {
      const mq = window.matchMedia('(prefers-color-scheme: dark)');
      setDark(mq.matches);
  
      const handleChange = () => setDark(mq.matches);
  
      mq.addEventListener('change', handleChange);
      return () => mq.removeEventListener('change', handleChange);
    }, []);
    return dark;
  }
  
  /**
   * @beta
   */
  
  const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
  
  /**
   * @beta
   */
  
  function useForwardedRef(ref) {
    const innerRef = useRef(null);
    useIsomorphicEffect(() => {
      if (!ref) return;
  
      if (typeof ref === 'function') {
        ref(innerRef.current);
      } else {
        ref.current = innerRef.current;
      }
    });
    return innerRef;
  }
  
  /**
   * @beta
   */
  
  function useCustomValidity(ref, customValidity) {
    useEffect(() => {
      if (ref.current) {
        ref.current.setCustomValidity(customValidity || '');
      }
    }, [customValidity, ref]);
  }
  
  /**
   * @internal
   */
  
  function fillCSSObject(propKeys, value) {
    return propKeys.reduce((obj, propKey) => {
      obj[propKey] = value;
      return obj;
    }, {});
  }
  /**
   * @public
   */
  
  function rem(pixelValue) {
    if (pixelValue === 0) return 0;
    return `${pixelValue / 16}rem`;
  }
  /**
   * @internal
   */
  
  function responsive(media, values, callback) {
    const statements = values.map(callback);
    return statements.map((statement, mediaIndex) => {
      if (mediaIndex === 0) return statement;
      return {
        [`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement
      };
    });
  }
  /**
   * @internal
   */
  
  function getResponsiveProp(val, defaultVal) {
    if (val === undefined) return defaultVal || EMPTY_ARRAY;
    return Array.isArray(val) ? val : [val];
  }
  /**
   * @internal
   */
  
  function getResponsiveSpace(theme, props, spaceIndexes = EMPTY_ARRAY) {
    if (!Array.isArray(spaceIndexes)) {
      throw new Error('the property must be array of numbers');
    }
  
    if (spaceIndexes.length === 0) {
      return null;
    }
  
    return responsive(theme.sanity.media, spaceIndexes, spaceIndex => fillCSSObject(props, rem(theme.sanity.space[spaceIndex])));
  }
  
  /**
   * A utility function getting responsive font styles.
   * @internal
   */
  
  function responsiveFont(fontKey, props) {
    const {
      $size,
      $weight,
      theme
    } = props;
    const {
      fonts,
      media
    } = theme.sanity;
    const {
      family,
      sizes,
      weights,
      horizontalOffset
    } = fonts[fontKey];
    const fontWeight = $weight && weights[$weight] || weights.regular; // @todo: make this configurable
  
    const defaultSize = sizes[2];
    const base = {
      position: 'relative',
      fontFamily: family,
      fontWeight,
      padding: '1px',
      margin: 0,
      '&:before': {
        content: '""',
        display: 'block',
        height: 0
      },
      '&:after': {
        content: '""',
        display: 'block',
        height: 0
      },
      '& > code, & > span': {
        display: 'block'
      },
      '&:not([hidden])': {
        display: 'block'
      }
    };
    const resp = responsive(media, getResponsiveProp($size), sizeIndex => fontSize(sizes[sizeIndex] || defaultSize, horizontalOffset));
    return [base, ...resp];
  }
  function fontSize(size, horizontalOffset) {
    const {
      ascenderHeight,
      descenderHeight,
      fontSize,
      iconSize,
      letterSpacing,
      lineHeight
    } = size;
    const negHeight = ascenderHeight + descenderHeight;
    const capHeight = lineHeight - negHeight;
    const iconOffset = (capHeight - iconSize) / 2;
    const customIconSize = Math.floor(fontSize * 1.125 / 2) * 2 + 1;
    const customIconOffset = (capHeight - customIconSize) / 2;
    return {
      fontSize: rem(fontSize),
      lineHeight: `calc(${lineHeight} / ${fontSize})`,
      letterSpacing: rem(letterSpacing),
      transform: `translateY(${rem(descenderHeight)})`,
      '&:before': {
        marginTop: `calc(${rem(0 - negHeight)} - 1px)`
      },
      '&:after': {
        marginBottom: '-1px'
      },
      '& > code, & > span': {
        margin: horizontalOffset ? `0 calc(${rem(0 - horizontalOffset * fontSize)} - 1px)` : '0 -1px'
      },
      '& svg:not([data-sanity-icon])': {
        fontSize: `calc(${customIconSize} / 16 * 1rem)`,
        margin: [// top & bottom
        rem(customIconOffset), // left & right
        horizontalOffset ? `calc(${rem(customIconOffset)} + ${rem(horizontalOffset * fontSize)})` : rem(customIconOffset)].join(' ')
      },
      '& [data-sanity-icon]': {
        fontSize: `calc(${iconSize} / 16 * 1rem)`,
        margin: [// top & bottom
        rem(iconOffset), // left & right
        horizontalOffset ? `calc(${rem(iconOffset)} + ${rem(horizontalOffset * fontSize)})` : rem(iconOffset)].join(' ')
      }
    };
  }
  
  /**
   * Get responsive CSS for the `code` font style.
   * @internal
   */
  
  function responsiveCodeFontStyle(props) {
    return responsiveFont('code', props);
  }
  
  /**
   * Get responsive CSS for the `heading` font style.
   * @internal
   */
  
  function responsiveHeadingFont(props) {
    return responsiveFont('heading', props);
  }
  
  /**
   * Get responsive CSS for the `label` font style.
   * @internal
   */
  
  function responsiveLabelFont(props) {
    return responsiveFont('label', props);
  }
  
  /**
   * Get responsive text align styles.
   * @internal
   */
  
  function responsiveTextAlignStyle(props) {
    const {
      theme
    } = props;
    return responsive(theme.sanity.media, getResponsiveProp(props.$align), textAlign => {
      return {
        textAlign
      };
    });
  }
  
  /**
   * Get responsive CSS for the `text` font style.
   * @internal
   */
  
  function responsiveTextFont(props) {
    return responsiveFont('text', props);
  }
  
  /**
   * This API might change. DO NOT USE IN PRODUCTION.
   * @beta
   */
  
  function useResponsiveProp(val, defaultVal) {
    return useMemo(() => getResponsiveProp(val, defaultVal), [defaultVal, val]);
  }
  
  const BORDER_VALUE = '1px solid var(--card-border-color)';
  function responsiveBorderStyle() {
    return [border, borderTop, borderRight, borderBottom, borderLeft];
  }
  
  function border(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$border), value => value ? {
      '&&': {
        border: BORDER_VALUE
      }
    } : {
      '&&': {
        border: 0
      }
    });
  }
  
  function borderTop(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$borderTop), value => value ? {
      '&&': {
        borderTop: BORDER_VALUE
      }
    } : {
      '&&': {
        borderTop: 0
      }
    });
  }
  
  function borderRight(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$borderRight), value => value ? {
      '&&': {
        borderRight: BORDER_VALUE
      }
    } : {
      '&&': {
        borderRight: 0
      }
    });
  }
  
  function borderBottom(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$borderBottom), value => value ? {
      '&&': {
        borderBottom: BORDER_VALUE
      }
    } : {
      '&&': {
        borderBottom: 0
      }
    });
  }
  
  function borderLeft(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$borderLeft), value => value ? {
      '&&': {
        borderLeft: BORDER_VALUE
      }
    } : {
      '&&': {
        borderLeft: 0
      }
    });
  }
  
  const BASE_STYLE$4 = {
    '&[data-as="ul"],&[data-as="ol"]': {
      listStyle: 'none'
    }
  };
  const BOX_SIZING = {
    content: 'content-box',
    border: 'border-box'
  };
  const BOX_HEIGHT = {
    stretch: 'stretch',
    fill: '100%'
  };
  function boxStyle() {
    return BASE_STYLE$4;
  }
  function responsiveBoxStyle() {
    return [responsiveBoxSizingStyle, responsiveBoxHeightStyle, responsiveBoxOverflowStyle, responsiveBoxDisplayStyle];
  }
  
  function responsiveBoxDisplayStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$display), display => ({
      '&:not([hidden])': {
        display
      }
    }));
  }
  
  function responsiveBoxSizingStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$sizing), sizing => ({
      boxSizing: BOX_SIZING[sizing]
    }));
  }
  
  function responsiveBoxHeightStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$height), height => ({
      height: BOX_HEIGHT[height]
    }));
  }
  
  function responsiveBoxOverflowStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$overflow), overflow => ({
      overflow
    }));
  }
  
  const BASE_STYLE$3 = {
    '&&:not([hidden])': {
      display: 'flex'
    }
  };
  function responsiveFlexStyle() {
    return [BASE_STYLE$3, responsiveFlexAlignStyle, responsiveFlexGapStyle, responsiveFlexWrapStyle, responsiveFlexJustifyStyle, responsiveFlexDirectionStyle];
  }
  function responsiveFlexAlignStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$align), align => {
      return {
        alignItems: align
      };
    });
  }
  
  function responsiveFlexGapStyle(props) {
    const {
      theme
    } = props;
    const {
      media,
      space
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$gap), gap => ({
      gap: gap ? rem(space[gap]) : undefined
    }));
  }
  
  function responsiveFlexWrapStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$wrap), wrap => {
      return {
        flexWrap: wrap
      };
    });
  }
  function responsiveFlexJustifyStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$justify), justify => {
      return {
        justifyContent: justify
      };
    });
  }
  function responsiveFlexDirectionStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$direction), direction => {
      return {
        flexDirection: direction
      };
    });
  }
  
  const BASE_STYLE$2 = {
    minWidth: 0,
    minHeight: 0
  };
  function flexItemStyle() {
    return [BASE_STYLE$2, responsiveFlexItemStyle];
  }
  function responsiveFlexItemStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$flex), flex => ({
      flex
    }));
  }
  
  function focusRingBorderStyle(border) {
    return `inset 0 0 0 ${border.width}px ${border.color}`;
  }
  function focusRingStyle(opts) {
    const {
      base,
      border,
      focusRing
    } = opts;
    const focusRingOutsetWidth = focusRing.offset + focusRing.width;
    const focusRingInsetWidth = 0 - focusRing.offset;
    const bgColor = base ? base.bg : 'var(--card-bg-color)';
    return [focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`, border && focusRingBorderStyle(border), focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`, focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`].filter(Boolean).join(',');
  }
  
  const GRID_CSS = {
    '&&:not([hidden])': {
      display: 'grid'
    },
    '&[data-as="ul"],&[data-as="ol"]': {
      listStyle: 'none'
    }
  };
  const GRID_AUTO_COLUMS = {
    auto: 'auto',
    min: 'min-content',
    max: 'max-content',
    fr: 'minmax(0, 1fr)'
  };
  const GRID_AUTO_ROWS = {
    auto: 'auto',
    min: 'min-content',
    max: 'max-content',
    fr: 'minmax(0, 1fr)'
  };
  function responsiveGridStyle() {
    return [GRID_CSS, responsiveGridAutoFlowStyle, responsiveGridAutoRowsStyle, responsiveGridAutoColsStyle, responsiveGridColumnsStyle, responsiveGridRowsStyle, responsiveGridGapStyle, responsiveGridGapXStyle, responsiveGridGapYStyle];
  }
  
  function responsiveGridAutoFlowStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$autoFlow), autoFlow => ({
      gridAutoFlow: autoFlow
    }));
  }
  
  function responsiveGridAutoRowsStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$autoRows), autoRows => ({
      gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows]
    }));
  }
  
  function responsiveGridAutoColsStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$autoCols), autoCols => ({
      gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols]
    }));
  }
  
  function responsiveGridColumnsStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$columns), columns => ({
      gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`
    }));
  }
  
  function responsiveGridRowsStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$rows), rows => ({
      gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`
    }));
  }
  
  function responsiveGridGapStyle(props) {
    const {
      theme
    } = props;
    const {
      media,
      space
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$gap), gap => ({
      gridGap: gap ? rem(space[gap]) : undefined
    }));
  }
  
  function responsiveGridGapXStyle(props) {
    const {
      theme
    } = props;
    const {
      media,
      space
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$gapX), gapX => ({
      columnGap: gapX ? rem(space[gapX]) : undefined
    }));
  }
  
  function responsiveGridGapYStyle(props) {
    const {
      theme
    } = props;
    const {
      media,
      space
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$gapY), gapY => ({
      rowGap: gapY ? rem(space[gapY]) : undefined
    }));
  }
  
  function responsiveGridItemStyle() {
    return [responsiveGridItemRowStyle, responsiveGridItemRowStartStyle, responsiveGridItemRowEndStyle, responsiveGridItemColumnStyle, responsiveGridItemColumnStartStyle, responsiveGridItemColumnEndStyle];
  }
  const GRID_ITEM_ROW = {
    auto: 'auto',
    full: '1 / -1'
  };
  const GRID_ITEM_COLUMN = {
    auto: 'auto',
    full: '1 / -1'
  };
  
  function responsiveGridItemRowStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$row), row => {
      if (typeof row === 'number') {
        return {
          gridRow: `span ${row} / span ${row}`
        };
      }
  
      return {
        gridRow: GRID_ITEM_ROW[row]
      };
    });
  }
  
  function responsiveGridItemRowStartStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$rowStart), rowStart => ({
      gridRowStart: rowStart
    }));
  }
  
  function responsiveGridItemRowEndStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$rowEnd), rowEnd => ({
      gridRowEnd: rowEnd
    }));
  }
  
  function responsiveGridItemColumnStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$column), column => {
      if (typeof column === 'number') {
        return {
          gridColumn: `span ${column} / span ${column}`
        };
      }
  
      return {
        gridColumn: GRID_ITEM_COLUMN[column]
      };
    });
  }
  
  function responsiveGridItemColumnStartStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$columnStart), columnStart => ({
      gridColumnStart: columnStart
    }));
  }
  
  function responsiveGridItemColumnEndStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$columnEnd), columnEnd => ({
      gridColumnEnd: columnEnd
    }));
  }
  
  function responsiveInputPaddingStyle(props) {
    const {
      $iconLeft,
      $iconRight,
      theme
    } = props;
    const {
      fonts,
      media,
      space: spaceScale
    } = theme.sanity;
    const padding = getResponsiveProp(props.$padding, [0]);
    const space = getResponsiveProp(props.$space, [0]);
    const size = getResponsiveProp(props.$fontSize, [0]);
    const len = Math.max(padding.length, space.length, size.length);
    const _padding = [];
    const _space = [];
    const _size = [];
  
    for (let i = 0; i < len; i += 1) {
      _padding[i] = padding[i] === undefined ? _padding[i - 1] : padding[i];
      _space[i] = space[i] === undefined ? _space[i - 1] : space[i];
      _size[i] = size[i] === undefined ? _size[i - 1] : size[i];
    }
  
    return responsive(media, _padding, (_, i) => {
      const fontSize = fonts.text.sizes[_size[i]] || fonts.text.sizes[2];
      const emSize = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight;
      const p = spaceScale[_padding[i]];
      const s = spaceScale[_space[i]];
      const styles = {
        paddingTop: rem(p - fontSize.ascenderHeight),
        paddingRight: rem(p),
        paddingBottom: rem(p - fontSize.descenderHeight),
        paddingLeft: rem(p)
      };
      if ($iconRight) styles.paddingRight = rem(p + emSize + s);
      if ($iconLeft) styles.paddingLeft = rem(p + emSize + s);
      return styles;
    });
  }
  function responsiveInputPaddingIconRightStyle(props) {
    return responsiveInputPaddingStyle(_extends({}, props, {
      $iconRight: true
    }));
  }
  
  let _$D = t => t,
      _t$E,
      _t2$n,
      _t3$e;
  const ROOT_STYLE = css(_t$E || (_t$E = _$D`
    &:not([hidden]) {
      display: flex;
    }
  `));
  function textInputRootStyle() {
    return ROOT_STYLE;
  }
  function textInputBaseStyle(props) {
    const {
      theme,
      $weight
    } = props;
    const font = theme.sanity.fonts.text;
    const color = theme.sanity.color.input;
    return css(_t2$n || (_t2$n = _$D`
      --input-fg-color: ${0};
      --input-placeholder-color: ${0};
  
      appearance: none;
      background: none;
      border: 0;
      border-radius: 0;
      outline: none;
      width: 100%;
      box-sizing: border-box;
      font-family: ${0};
      font-weight: ${0};
      margin: 0;
      position: relative;
      z-index: 1;
      display: block;
      color: var(--input-fg-color);
  
      /* NOTE: This is a hack to disable Chrome’s autofill styles */
      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        -webkit-text-fill-color: var(--input-fg-color) !important;
        transition: background-color 5000s;
        transition-delay: 86400s /* 24h */;
      }
  
      &::placeholder {
        color: var(--input-placeholder-color);
      }
  
      /* &:is(textarea) */
      &[data-as='textarea'] {
        resize: none;
      }
  
      /* enabled */
      &:not(:invalid):not(:disabled):not(:read-only) {
        --input-fg-color: ${0};
        --input-placeholder-color: ${0};
      }
  
      /* disabled */
      &:not(:invalid):disabled {
        --input-fg-color: ${0};
        --input-placeholder-color: ${0};
      }
  
      /* invalid */
      &:invalid {
        --input-fg-color: ${0};
        --input-placeholder-color: ${0};
      }
  
      /* readOnly */
      &:read-only {
        --input-fg-color: ${0};
        --input-placeholder-color: ${0};
      }
    `), color.default.enabled.fg, color.default.enabled.placeholder, font.family, $weight && font.weights[$weight] || font.weights.regular, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
  }
  function textInputFontSizeStyle(props) {
    const {
      theme
    } = props;
    const {
      fonts,
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$fontSize, [2]), sizeIndex => {
      const size = fonts.text.sizes[sizeIndex] || fonts.text.sizes[2];
      return {
        fontSize: rem(size.fontSize),
        lineHeight: size.lineHeight / size.fontSize
      };
    });
  }
  function textInputRepresentationStyle(props) {
    const {
      $border,
      $hasPrefix,
      $hasSuffix,
      theme
    } = props;
    const {
      focusRing,
      input
    } = theme.sanity;
    const color = theme.sanity.color.input;
    return css(_t3$e || (_t3$e = _$D`
      --card-bg-color: ${0};
      --card-fg-color: ${0};
      --input-box-shadow: none;
  
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: block;
      pointer-events: none;
      z-index: 0;
      background-color: var(--card-bg-color);
      box-shadow: var(--input-box-shadow);
  
      border-top-left-radius: ${0};
      border-bottom-left-radius: ${0};
      border-top-right-radius: ${0};
      border-bottom-right-radius: ${0};
  
      /* enabled */
      *:not(:disabled) + && {
        --input-box-shadow: ${0};
      }
  
      /* invalid */
      *:not(:disabled):invalid + && {
        --card-bg-color: ${0};
        --card-fg-color: ${0};
        --input-box-shadow: ${0};
      }
  
      /* focused */
      *:not(:disabled):focus + && {
        --input-box-shadow: ${0};
      }
  
      /* disabled */
      *:disabled + && {
        --card-bg-color: ${0};
        --card-fg-color: ${0};
        --input-box-shadow: ${0};
      }
  
      /* hovered */
      @media (hover: hover) {
        *:not(:disabled):not(:read-only):not(:invalid):hover + && {
          --card-bg-color: ${0};
          --card-fg-color: ${0};
        }
  
        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + && {
          --input-box-shadow: ${0};
        }
      }
  
      /* readOnly */
      *:read-only + && {
        --card-bg-color: ${0};
        --card-fg-color: ${0};
      }
    `), color.default.enabled.bg, color.default.enabled.fg, $hasPrefix ? 0 : undefined, $hasPrefix ? 0 : undefined, $hasSuffix ? 0 : undefined, $hasSuffix ? 0 : undefined, $border ? focusRingBorderStyle({
      color: color.default.enabled.border,
      width: input.border.width
    }) : undefined, color.invalid.enabled.bg, color.invalid.enabled.fg, $border ? focusRingBorderStyle({
      color: color.invalid.enabled.border,
      width: input.border.width
    }) : 'none', focusRingStyle({
      border: $border ? {
        color: color.default.enabled.border,
        width: input.border.width
      } : undefined,
      focusRing
    }), color.default.disabled.bg, color.default.disabled.fg, $border ? focusRingBorderStyle({
      color: color.default.disabled.border,
      width: input.border.width
    }) : 'none', color.default.hovered.bg, color.default.hovered.fg, $border ? focusRingBorderStyle({
      color: color.default.hovered.border,
      width: input.border.width
    }) : 'none', color.default.readOnly.bg, color.default.readOnly.fg);
  }
  
  function responsiveMarginStyle(props) {
    const {
      theme
    } = props;
    return [getResponsiveSpace(theme, ['margin'], getResponsiveProp(props.$margin)), getResponsiveSpace(theme, ['marginLeft', 'marginRight'], getResponsiveProp(props.$marginX)), getResponsiveSpace(theme, ['marginTop', 'marginBottom'], getResponsiveProp(props.$marginY)), getResponsiveSpace(theme, ['marginTop'], getResponsiveProp(props.$marginTop)), getResponsiveSpace(theme, ['marginRight'], getResponsiveProp(props.$marginRight)), getResponsiveSpace(theme, ['marginBottom'], getResponsiveProp(props.$marginBottom)), getResponsiveSpace(theme, ['marginLeft'], getResponsiveProp(props.$marginLeft))].filter(Boolean);
  }
  
  function responsivePaddingStyle(props) {
    const {
      theme
    } = props;
    return [getResponsiveSpace(theme, ['padding'], getResponsiveProp(props.$padding)), getResponsiveSpace(theme, ['paddingLeft', 'paddingRight'], getResponsiveProp(props.$paddingX)), getResponsiveSpace(theme, ['paddingTop', 'paddingBottom'], getResponsiveProp(props.$paddingY)), getResponsiveSpace(theme, ['paddingTop'], getResponsiveProp(props.$paddingTop)), getResponsiveSpace(theme, ['paddingRight'], getResponsiveProp(props.$paddingRight)), getResponsiveSpace(theme, ['paddingBottom'], getResponsiveProp(props.$paddingBottom)), getResponsiveSpace(theme, ['paddingLeft'], getResponsiveProp(props.$paddingLeft))].filter(Boolean);
  }
  
  function responsiveRadiusStyle(props) {
    const {
      theme
    } = props;
    const {
      media,
      radius
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$radius), radiusIndex => ({
      borderRadius: rem(radius[radiusIndex])
    }));
  }
  
  function toBoxShadow(shadow, color) {
    return `${shadow.map(rem).join(' ')} ${color}`;
  }
  
  function shadowStyle(shadow) {
    if (!shadow) return EMPTY_RECORD$1;
    const outline = `0 0 0 ${rem(1)} var(--card-shadow-outline-color)`;
    const umbra = toBoxShadow(shadow.umbra, 'var(--card-shadow-umbra-color)');
    const penumbra = toBoxShadow(shadow.penumbra, 'var(--card-shadow-penumbra-color)');
    const ambient = toBoxShadow(shadow.ambient, 'var(--card-shadow-ambient-color)');
    return {
      boxShadow: `${outline}, ${umbra}, ${penumbra}, ${ambient}`
    };
  }
  
  function responsiveShadowStyle(props) {
    const {
      theme
    } = props;
    const {
      media,
      shadows
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$shadow), shadow => shadowStyle(shadows[shadow]));
  }
  
  let _$C = t => t,
      _t$D,
      _t2$m,
      _t3$d;
  function textBaseStyle(props) {
    const {
      $accent,
      $muted,
      theme
    } = props;
    const {
      weights
    } = theme.sanity.fonts.text;
    return css(_t$D || (_t$D = _$C`
      color: var(--card-fg-color);
  
      ${0}
  
      ${0}
  
      & code {
        font-family: ${0};
        border-radius: 1px;
        background-color: var(--card-code-bg-color);
        color: var(--card-code-fg-color);
      }
  
      & a {
        text-decoration: none;
        border-radius: 1px;
        color: var(--card-link-color);
        outline: none;
  
        @media (hover: hover) {
          &:hover {
            text-decoration: underline;
          }
        }
  
        &:focus {
          box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);
        }
  
        &:focus:not(:focus-visible) {
          box-shadow: none;
        }
      }
  
      & strong {
        font-weight: ${0};
      }
  
      & [data-sanity-icon] {
        vertical-align: baseline;
      }
    `), $accent && css(_t2$m || (_t2$m = _$C`
        color: var(--card-accent-fg-color);
      `)), $muted && css(_t3$d || (_t3$d = _$C`
        color: var(--card-muted-fg-color);
      `)), theme.sanity.fonts.code.family, weights.bold);
  }
  
  const _excluded$G = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
  
  let _$B = t => t,
      _t$C;
  const Root$E = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
  const SpanWithTextOverflow$2 = styled.span(_t$C || (_t$C = _$B`
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  `));
  /**
   * @public
   */
  
  const Text = /*#__PURE__*/forwardRef(function Text(props, ref) {
    const {
      accent = false,
      align,
      children: childrenProp,
      muted = false,
      size = 2,
      textOverflow,
      weight
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$G);
  
    let children = childrenProp;
  
    if (textOverflow === 'ellipsis') {
      children = /*#__PURE__*/React.createElement(SpanWithTextOverflow$2, null, children);
    }
  
    return /*#__PURE__*/React.createElement(Root$E, _extends({
      "data-ui": "Text"
    }, restProps, {
      "$accent": accent,
      "$align": align,
      "$muted": muted,
      ref: ref,
      "$size": size,
      "$weight": weight
    }), /*#__PURE__*/React.createElement("span", null, children));
  });
  
  const avatarStyle = {
    root: avatarRootStyle,
    arrow: avatarArrowStyle,
    bgStroke: avatarBgStrokeStyle,
    stroke: avatarStrokeStyle,
    initials: avatarInitialsStyle
  };
  
  function avatarArrowStyle() {
    return {
      position: 'absolute',
      boxSizing: 'border-box',
      zIndex: 0,
      opacity: 0,
      transition: 'all 0.2s linear',
      transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      '& > svg': {
        width: '11px',
        height: '7px',
        position: 'absolute',
        top: '-5px',
        left: '50%',
        transform: 'translateX(-6px)',
        '&:not([hidden])': {
          display: 'block'
        }
      },
      "[data-arrow-position='inside'] > &": {
        transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
        opacity: 0
      },
      "[data-arrow-position='top'] > &": {
        opacity: 1,
        transform: 'rotate(0deg)'
      },
      "[data-arrow-position='bottom'] > &": {
        opacity: 1,
        transform: 'rotate(-180deg)'
      }
    };
  }
  
  function avatarRootStyle(props) {
    const {
      $color,
      theme
    } = props;
    const {
      focusRing
    } = theme.sanity;
    return {
      backgroundColor: $color,
      position: 'relative',
      boxSizing: 'border-box',
      userSelect: 'none',
      boxShadow: '0 0 0 1px var(--card-bg-color)',
      '&[data-status="inactive"]': {
        opacity: 0.5
      },
      '&>svg': {
        '&:not([hidden])': {
          display: 'block'
        }
      },
  
      /* &:is(button) */
      '&[data-as="button"]': {
        '-webkit-font-smoothing': 'inherit',
        appearance: 'none',
        margin: 0,
        padding: 0,
        border: 0,
        font: 'inherit',
        color: 'inherit',
        outline: 'none',
        '&:focus': {
          boxShadow: focusRingStyle({
            focusRing
          })
        },
        '&:focus:not(:focus-visible)': {
          boxShadow: 'none'
        }
      }
    };
  }
  function responsiveAvatarSizeStyle(props) {
    const {
      theme
    } = props;
    const {
      avatar,
      media
    } = theme.sanity;
    return responsive(media, props.$size, size => {
      const avatarSize = avatar.sizes[size] || avatar.sizes[0];
      return {
        width: rem(avatarSize.size),
        height: rem(avatarSize.size),
        borderRadius: rem(avatarSize.size / 2),
        '&>svg': {
          width: rem(avatarSize.size),
          height: rem(avatarSize.size),
          borderRadius: rem(avatarSize.size / 2)
        }
      };
    });
  }
  function avatarInitialsStyle(props) {
    const {
      theme
    } = props;
    const {
      base
    } = theme.sanity.color;
    return {
      width: '100%',
      height: '100%',
      color: base.fg,
      alignItems: 'center',
      justifyContent: 'center',
      textTransform: 'uppercase',
      textAlign: 'center',
      borderRadius: '50%',
      '&:not([hidden])': {
        display: 'flex'
      }
    };
  }
  
  function avatarBgStrokeStyle() {
    return {
      strokeWidth: '4px',
      stroke: 'var(--card-bg-color)'
    };
  }
  
  function avatarStrokeStyle() {
    return {
      strokeWidth: '3px',
      '[data-status="editing"] &': {
        strokeSasharray: '2 4',
        strokeLinecap: 'round'
      }
    };
  }
  
  const _excluded$F = ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"];
  const Root$D = styled.div(responsiveAvatarSizeStyle, avatarStyle.root);
  const Arrow = styled.div(avatarStyle.arrow);
  const BgStroke = styled.ellipse(avatarStyle.bgStroke);
  const Stroke = styled.ellipse(avatarStyle.stroke);
  const Initials = styled.div(avatarStyle.initials);
  /**
   * @public
   */
  
  const Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
    const {
      as: asProp,
      color: colorKey = 'gray',
      src,
      title,
      initials,
      onImageLoadError,
      arrowPosition: arrowPositionProp,
      animateArrowFrom,
      status = 'online',
      size: sizeProp
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
  
    const as = ReactIs.isValidElementType(asProp) ? asProp : 'div';
    const size = useResponsiveProp(sizeProp, [0]);
    const theme = useTheme();
    const color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray; // @todo: remove this
  
    const avatarSize = theme.sanity.avatar.sizes[size[0]] || theme.sanity.avatar.sizes[0];
    const _sizeRem = avatarSize.size;
  
    const _radius = _sizeRem / 2;
  
    const elementId = useId() || '';
    const [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || 'inside');
    const [imageFailed, setImageFailed] = useState(false);
    const imageId = `avatar-image-${elementId}`;
    useEffect(() => {
      if (arrowPosition === arrowPositionProp) return undefined; // Start animation in the next frame
  
      const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp));
      return () => cancelAnimationFrame(raf);
    }, [arrowPosition, arrowPositionProp]);
    useEffect(() => {
      if (src) setImageFailed(false);
    }, [src]);
    const handleImageError = useCallback(() => {
      setImageFailed(true);
  
      if (onImageLoadError) {
        onImageLoadError(new Error('Avatar: the image failed to load'));
      }
    }, [onImageLoadError]);
    return /*#__PURE__*/React.createElement(Root$D, _extends({
      as: as,
      "data-as": typeof as === 'string' ? as : undefined,
      "data-ui": "Avatar"
    }, restProps, {
      "$size": size,
      "$color": color,
      "aria-label": title,
      "data-arrow-position": arrowPosition,
      "data-status": status,
      ref: ref,
      title: title
    }), /*#__PURE__*/React.createElement(Arrow, null, /*#__PURE__*/React.createElement("svg", {
      width: "11",
      height: "7",
      viewBox: "0 0 11 7",
      fill: "none"
    }, /*#__PURE__*/React.createElement("path", {
      d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z",
      fill: color
    }))), !imageFailed && src && /*#__PURE__*/React.createElement("svg", {
      viewBox: `0 0 ${_sizeRem} ${_sizeRem}`,
      fill: "none"
    }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("pattern", {
      id: imageId,
      patternContentUnits: "objectBoundingBox",
      width: "1",
      height: "1"
    }, /*#__PURE__*/React.createElement("image", {
      href: src,
      width: "1",
      height: "1",
      onError: handleImageError
    }))), /*#__PURE__*/React.createElement("circle", {
      cx: _radius,
      cy: _radius,
      r: _radius,
      fill: `url(#${imageId})`
    }), /*#__PURE__*/React.createElement(BgStroke, {
      cx: _radius,
      cy: _radius,
      rx: _radius,
      ry: _radius,
      vectorEffect: "non-scaling-stroke"
    }), /*#__PURE__*/React.createElement(Stroke, {
      cx: _radius,
      cy: _radius,
      rx: _radius,
      ry: _radius,
      stroke: color,
      vectorEffect: "non-scaling-stroke"
    })), (imageFailed || !src) && initials && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Initials, null, /*#__PURE__*/React.createElement(Text, {
      as: "span",
      size: size.map(s => s === 0 ? 0 : s + 1)
    }, /*#__PURE__*/React.createElement("strong", null, initials)))));
  });
  
  let _$A = t => t,
      _t$B;
  
  function responsiveAvatarCounterSizeStyle(props) {
    const {
      theme
    } = props;
    const {
      avatar,
      media
    } = theme.sanity;
    return responsive(media, props.$size, size => {
      const avatarSize = avatar.sizes[size];
      if (!avatarSize) return EMPTY_RECORD$1;
      return {
        borderRadius: rem(avatarSize.size / 2),
        minWidth: rem(avatarSize.size),
        height: rem(avatarSize.size)
      };
    });
  }
  
  function avatarCounterBaseStyle(props) {
    const {
      theme
    } = props;
    return css(_t$B || (_t$B = _$A`
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      user-select: none;
      color: inherit;
      color: var(--card-fg-color);
      background: var(--card-bg-color);
      box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);
      padding: 0 ${0};
  
      &:not([hidden]) {
        display: flex;
      }
    `), rem(theme.sanity.space[2]));
  }
  
  const Root$C = styled.div(responsiveAvatarCounterSizeStyle, avatarCounterBaseStyle);
  /**
   * @public
   */
  
  const AvatarCounter = /*#__PURE__*/forwardRef(function AvatarCounter(props, ref) {
    const {
      count,
      size: sizeProp = 0,
      tone
    } = props;
    const size = useResponsiveProp(sizeProp, [0]);
    return /*#__PURE__*/React.createElement(Root$C, {
      "$size": size,
      "data-tone": tone,
      ref: ref
    }, /*#__PURE__*/React.createElement(Text, {
      as: "span",
      size: size.map(s => s === 0 ? 0 : s + 1)
    }, /*#__PURE__*/React.createElement("strong", null, count)));
  });
  
  function childrenToElementArray(children) {
    const childrenArray = Array.isArray(children) ? children : [children];
    return childrenArray.filter(node => isElement(node) || isFragment(node) || typeof node === 'string');
  }
  
  const _excluded$E = ["children", "maxLength", "size", "tone"];
  
  let _$z = t => t,
      _t$A;
  const BASE_STYLES = css(_t$A || (_t$A = _$z`
    white-space: nowrap;
  
    & > div {
      vertical-align: top;
  
      &:not([hidden]) {
        display: inline-block;
      }
    }
  `));
  
  function avatarStackStyle() {
    return BASE_STYLES;
  }
  
  function responsiveAvatarStackSizeStyle(props) {
    const {
      theme
    } = props;
    const {
      avatar,
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.size), size => {
      const avatarSize = avatar.sizes[size];
      if (!avatarSize) return EMPTY_RECORD$1;
      return {
        '& > div + div': {
          marginLeft: rem(avatarSize.distance)
        }
      };
    });
  }
  
  const Root$B = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
  /**
   * @public
   */
  
  const AvatarStack = /*#__PURE__*/forwardRef(function AvatarStack(props, ref) {
    const {
      children: childrenProp,
      maxLength: maxLengthProp = 4,
      size = 0,
      tone
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$E);
  
    const maxLength = Math.max(maxLengthProp, 0);
    const children = childrenToElementArray(childrenProp).filter(child => typeof child !== 'string');
    const len = children.length;
    const visibleCount = maxLength - 1;
    const extraCount = len - visibleCount;
    const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
    return /*#__PURE__*/React.createElement(Root$B, _extends({
      "data-ui": "AvatarStack"
    }, restProps, {
      ref: ref,
      size: size
    }), len === 0 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AvatarCounter, {
      count: len,
      tone: tone
    })), len !== 0 && extraCount > 1 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AvatarCounter, {
      count: extraCount,
      size: size,
      tone: tone
    })), visibleChildren.map((child, childIndex) => /*#__PURE__*/React.createElement("div", {
      key: String(childIndex)
    }, /*#__PURE__*/cloneElement(child, {
      size,
      tone
    }))));
  });
  
  const _excluded$D = ["as", "column", "columnStart", "columnEnd", "display", "flex", "height", "margin", "marginX", "marginY", "marginTop", "marginRight", "marginBottom", "marginLeft", "overflow", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "row", "rowStart", "rowEnd", "sizing"];
  const Root$A = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
  /**
   * @public
   */
  
  const Box = /*#__PURE__*/forwardRef(function Box(props, ref) {
    const {
      as: asProp = 'div',
      column,
      columnStart,
      columnEnd,
      display = 'block',
      flex,
      height,
      margin = 0,
      marginX,
      marginY,
      marginTop,
      marginRight,
      marginBottom,
      marginLeft,
      overflow,
      padding = 0,
      paddingX,
      paddingY,
      paddingTop,
      paddingRight,
      paddingBottom,
      paddingLeft,
      row,
      rowStart,
      rowEnd,
      sizing
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$D);
  
    return /*#__PURE__*/React.createElement(Root$A, _extends({
      "data-as": asProp,
      "data-ui": "Box"
    }, restProps, {
      "$column": column,
      "$columnStart": columnStart,
      "$columnEnd": columnEnd,
      "$display": display,
      "$flex": flex,
      "$height": height,
      "$margin": margin,
      "$marginX": marginX,
      "$marginY": marginY,
      "$marginTop": marginTop,
      "$marginRight": marginRight,
      "$marginBottom": marginBottom,
      "$marginLeft": marginLeft,
      "$overflow": overflow,
      "$padding": padding,
      "$paddingX": paddingX,
      "$paddingY": paddingY,
      "$paddingTop": paddingTop,
      "$paddingRight": paddingRight,
      "$paddingBottom": paddingBottom,
      "$paddingLeft": paddingLeft,
      "$row": row,
      "$rowStart": rowStart,
      "$rowEnd": rowEnd,
      "$sizing": sizing,
      as: asProp,
      ref: ref
    }), props.children);
  });
  
  let _$y = t => t,
      _t$z,
      _t2$l,
      _t3$c;
  function labelBaseStyle(props) {
    const {
      $accent,
      $muted,
      theme
    } = props;
    const {
      fonts
    } = theme.sanity;
    return css(_t$z || (_t$z = _$y`
      text-transform: uppercase;
  
      ${0}
  
      ${0}
  
      & code {
        font-family: ${0};
        border-radius: 1px;
      }
  
      & a {
        text-decoration: none;
        border-radius: 1px;
      }
  
      & [data-sanity-icon] {
        vertical-align: baseline;
      }
    `), $accent && css(_t2$l || (_t2$l = _$y`
        color: var(--card-accent-fg-color);
      `)), $muted && css(_t3$c || (_t3$c = _$y`
        color: var(--card-muted-fg-color);
      `)), fonts.code.family);
  }
  
  const _excluded$C = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
  
  let _$x = t => t,
      _t$y;
  const Root$z = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
  const SpanWithTextOverflow$1 = styled.span(_t$y || (_t$y = _$x`
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  `));
  /**
   * @public
   */
  
  const Label = /*#__PURE__*/forwardRef(function Label(props, ref) {
    const {
      accent,
      align,
      children: childrenProp,
      muted = false,
      size = 2,
      textOverflow,
      weight
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$C);
  
    let children = childrenProp;
  
    if (textOverflow === 'ellipsis') {
      children = /*#__PURE__*/React.createElement(SpanWithTextOverflow$1, null, children);
    } else {
      children = /*#__PURE__*/React.createElement("span", null, children);
    }
  
    return /*#__PURE__*/React.createElement(Root$z, _extends({
      "data-ui": "Label"
    }, restProps, {
      "$accent": accent,
      "$align": align,
      "$muted": muted,
      "$size": size,
      "$weight": weight,
      ref: ref
    }), children);
  });
  
  function badgeStyle(props) {
    const {
      $mode,
      $tone,
      theme
    } = props;
    const palette = theme.sanity.color[$mode === 'outline' ? 'muted' : 'solid'];
    const color = palette[$tone] || palette.default;
    return {
      backgroundColor: color.enabled.bg,
      color: color.enabled.fg,
      boxShadow: `inset 0 0 0 1px ${color.enabled.border}`,
      cursor: 'default',
      '&:not([hidden])': {
        display: 'inline-block'
      }
    };
  }
  
  const _excluded$B = ["children", "fontSize", "mode", "padding", "radius", "tone"];
  const Root$y = styled(Box)(responsiveRadiusStyle, badgeStyle);
  /**
   * @public
   */
  
  const Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
    const {
      children,
      fontSize,
      mode = 'default',
      padding = 1,
      radius = 2,
      tone = 'default'
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$B);
  
    return /*#__PURE__*/React.createElement(Root$y, _extends({
      "data-ui": "Badge"
    }, restProps, {
      "$mode": mode,
      "$tone": tone,
      "$radius": radius,
      padding: padding,
      ref: ref
    }), /*#__PURE__*/React.createElement(Label, {
      size: fontSize
    }, children));
  });
  
  const _excluded$A = ["align", "as", "direction", "gap", "justify", "wrap"];
  const Root$x = styled(Box)(flexItemStyle, responsiveFlexStyle);
  /**
   * @public
   */
  
  const Flex = /*#__PURE__*/forwardRef(function Flex(props, ref) {
    const {
      align,
      as,
      direction = 'row',
      gap,
      justify,
      wrap
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$A);
  
    return /*#__PURE__*/React.createElement(Root$x, _extends({
      "data-ui": "Flex"
    }, restProps, {
      "$align": align,
      "$direction": direction,
      "$gap": gap,
      "$justify": justify,
      "$wrap": wrap,
      forwardedAs: as,
      ref: ref
    }));
  });
  
  let _$w = t => t,
      _t$x,
      _t2$k;
  const rotate$1 = keyframes(_t$x || (_t$x = _$w`
    from {
      transform: rotate(0deg);
    }
  
    to {
      transform: rotate(360deg);
    }
  `));
  const Root$w = styled(Text)(_t2$k || (_t2$k = _$w`
    & > span > svg {
      animation: ${0} 500ms linear infinite;
    }
  `), rotate$1);
  /**
   * @public
   */
  
  const Spinner = /*#__PURE__*/forwardRef(function Spinner(props, ref) {
    return /*#__PURE__*/React.createElement(Root$w, _extends({
      "data-ui": "Spinner"
    }, props, {
      ref: ref
    }), /*#__PURE__*/React.createElement(SpinnerIcon, null));
  });
  
  /**
   * @internal
   */
  function _colorVarsStyle(base, color, checkered = false) {
    var _color$muted, _color$accent, _color$link, _color$code, _color$code2, _color$skeleton, _color$skeleton2, _color$link2;
  
    return {
      // Base
      // @todo: rename to "--base-"?
      '--card-shadow-outline-color': base.shadow.outline,
      '--card-shadow-umbra-color': base.shadow.umbra,
      '--card-shadow-penumbra-color': base.shadow.penumbra,
      '--card-shadow-ambient-color': base.shadow.ambient,
      '--card-focus-ring-color': base.focusRing,
      // Card
      '--card-bg-color': color.bg,
      '--card-bg-image': checkered ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.bg2 || color.bg} 0% 50%)` : undefined,
      '--card-fg-color': color.fg,
      '--card-border-color': color.border,
      '--card-muted-fg-color': (_color$muted = color.muted) == null ? void 0 : _color$muted.fg,
      '--card-accent-fg-color': (_color$accent = color.accent) == null ? void 0 : _color$accent.fg,
      '--card-link-fg-color': (_color$link = color.link) == null ? void 0 : _color$link.fg,
      '--card-code-bg-color': (_color$code = color.code) == null ? void 0 : _color$code.bg,
      '--card-code-fg-color': (_color$code2 = color.code) == null ? void 0 : _color$code2.fg,
      '--card-skeleton-color-from': (_color$skeleton = color.skeleton) == null ? void 0 : _color$skeleton.from,
      '--card-skeleton-color-to': (_color$skeleton2 = color.skeleton) == null ? void 0 : _color$skeleton2.to,
      // @todo: deprecate
      '--card-link-color': (_color$link2 = color.link) == null ? void 0 : _color$link2.fg,
      '--card-hairline-soft-color': color.border,
      '--card-hairline-hard-color': color.border
    };
  }
  
  let _$v = t => t,
      _t$w;
  /**
   * @internal
   */
  
  function buttonBaseStyles() {
    return css(_t$w || (_t$w = _$v`
      -webkit-font-smoothing: inherit;
      appearance: none;
      display: inline-flex;
      align-items: center;
      font: inherit;
      border: 0;
      outline: none;
      user-select: none;
      text-decoration: none;
      border: 0;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
      white-space: nowrap;
      text-align: left;
      position: relative;
  
      & > span {
        display: block;
        flex: 1;
        min-width: 0;
        border-radius: inherit;
      }
  
      &::-moz-focus-inner {
        border: 0;
        padding: 0;
      }
    `));
  }
  const buttonTheme = {
    border: {
      width: 1
    }
  };
  /**
   * @internal
   */
  
  function buttonColorStyles(props) {
    var _theme$sanity$styles, _theme$sanity$styles$;
  
    const {
      $mode,
      theme
    } = props;
    const {
      focusRing
    } = theme.sanity;
    const base = theme.sanity.color.base;
    const mode = theme.sanity.color.button[$mode] || theme.sanity.color.button.default;
    const color = mode[props.$tone] || mode.default;
    const border = {
      width: buttonTheme.border.width,
      color: 'var(--card-border-color)'
    };
    return [_colorVarsStyle(base, color.enabled), {
      backgroundColor: 'var(--card-bg-color)',
      color: 'var(--card-fg-color)',
      boxShadow: focusRingBorderStyle(border),
      '&:disabled, &[data-disabled="true"]': _colorVarsStyle(base, color.disabled),
      "&:not([data-disabled='true'])": {
        '&:focus': {
          boxShadow: focusRingStyle({
            base,
            border,
            focusRing
          })
        },
        '&:focus:not(:focus-visible)': {
          boxShadow: focusRingBorderStyle(border)
        },
        '@media (hover: hover)': {
          '&:hover': _colorVarsStyle(base, color.hovered),
          '&:active': _colorVarsStyle(base, color.pressed)
        },
        '&[data-selected]': _colorVarsStyle(base, color.pressed)
      }
    }, (_theme$sanity$styles = theme.sanity.styles) == null ? void 0 : (_theme$sanity$styles$ = _theme$sanity$styles.button) == null ? void 0 : _theme$sanity$styles$.root].filter(Boolean);
  }
  
  const _excluded$z = ["children", "disabled", "fontSize", "icon", "iconRight", "justify", "loading", "mode", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "radius", "selected", "space", "text", "textAlign", "tone", "type"];
  
  let _$u = t => t,
      _t$v;
  const Root$v = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
  const LoadingBox = styled.div(_t$v || (_t$v = _$u`
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--card-bg-color);
    border-radius: inherit;
    z-index: 1;
    box-shadow: inherit;
  `));
  /**
   * @public
   */
  
  const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
    const {
      children,
      disabled,
      fontSize,
      icon,
      iconRight,
      justify = 'center',
      loading,
      mode = 'default',
      padding = 3,
      paddingX,
      paddingY,
      paddingTop,
      paddingBottom,
      paddingLeft,
      paddingRight,
      radius = 2,
      selected,
      space = 3,
      text,
      textAlign,
      tone = 'default',
      type = 'button'
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$z);
  
    const theme = useTheme();
    const boxProps = useMemo(() => ({
      // flex: 1,
      padding,
      paddingX,
      paddingY,
      paddingTop,
      paddingBottom,
      paddingLeft,
      paddingRight
    }), [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]);
    return /*#__PURE__*/React.createElement(Root$v, _extends({
      "data-ui": "Button"
    }, restProps, {
      "$mode": mode,
      "$radius": radius,
      "$tone": tone,
      "data-disabled": Boolean(loading || disabled),
      "data-selected": selected ? '' : undefined,
      disabled: Boolean(loading || disabled),
      ref: ref,
      type: type
    }), Boolean(loading) && /*#__PURE__*/React.createElement(LoadingBox, null, /*#__PURE__*/React.createElement(Spinner, null)), (icon || text || iconRight) && /*#__PURE__*/React.createElement(Box, _extends({
      as: "span"
    }, boxProps), /*#__PURE__*/React.createElement(Flex, {
      as: "span",
      justify: justify
    }, icon && /*#__PURE__*/React.createElement(Text, {
      size: fontSize
    }, /*#__PURE__*/isValidElement(icon) && icon, isValidElementType(icon) && /*#__PURE__*/createElement(icon)), text && /*#__PURE__*/React.createElement(Box, {
      flex: iconRight ? 1 : undefined,
      marginLeft: icon ? space : undefined,
      marginRight: iconRight ? space : undefined
    }, /*#__PURE__*/React.createElement(Text, {
      align: textAlign,
      size: fontSize,
      textOverflow: "ellipsis",
      weight: theme.sanity.button.textWeight
    }, text)), iconRight && /*#__PURE__*/React.createElement(Text, {
      size: fontSize
    }, /*#__PURE__*/isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && /*#__PURE__*/createElement(iconRight)))), children && /*#__PURE__*/React.createElement(Box, _extends({
      as: "span"
    }, boxProps), children));
  });
  
  let _$t = t => t,
      _t$u,
      _t2$j,
      _t3$b;
  function cardStyle(props) {
    return [cardBaseStyle(props), cardColorStyle(props)];
  }
  function cardBaseStyle(props) {
    const {
      $checkered,
      theme
    } = props;
    const space = theme.sanity.space;
    return css(_t$u || (_t$u = _$t`
      ${0}
  
      &[data-as='button'] {
        -webkit-font-smoothing: inherit;
        appearance: none;
        outline: none;
        font: inherit;
        text-align: inherit;
        border: 0;
        width: stretch;
      }
  
      /* &:is(a) */
      &[data-as='a'] {
        outline: none;
        text-decoration: none;
      }
  
      /* &:is(pre) */
      &[data-as='pre'] {
        font: inherit;
      }
    `), $checkered && css(_t2$j || (_t2$j = _$t`
        background-size: ${0}px ${0}px;
        background-position: 50% 50%;
        background-image: var(--card-bg-image);
      `), space[3], space[3]));
  }
  function cardColorStyle(props) {
    var _theme$sanity$styles, _theme$sanity$styles$;
  
    const {
      $checkered,
      $focusRing,
      theme
    } = props;
    const {
      focusRing
    } = theme.sanity;
    const {
      base,
      card
    } = theme.sanity.color;
    const border = {
      width: 0,
      color: 'var(--card-border-color)'
    };
    return css(_t3$b || (_t3$b = _$t`
      ${0}
  
      background-color: var(--card-bg-color);
      color: var(--card-fg-color);
  
      /* &:is(button) */
      &[data-as='button'] {
        --card-focus-ring-box-shadow: none;
  
        cursor: default;
        box-shadow: var(--card-focus-ring-box-shadow);
  
        &:disabled {
          ${0}
        }
  
        &:not(:disabled) {
          &[data-pressed] {
            ${0}
          }
  
          &[data-selected] {
            ${0}
          }
  
          @media (hover: hover) {
            &:not([data-pressed]):not([data-selected]) {
              &:hover {
                ${0}
              }
  
              &:active {
                ${0}
              }
            }
          }
  
          &:focus {
            --card-focus-ring-box-shadow: ${0};
          }
  
          &:focus:not(:focus-visible) {
            --card-focus-ring-box-shadow: ${0};
          }
        }
      }
  
      /* &:is(a) */
      &[data-as='a'] {
        cursor: pointer;
        box-shadow: var(--card-focus-ring-box-shadow);
  
        &[data-disabled] {
          ${0}
        }
  
        &:not([data-disabled]) {
          &[data-pressed] {
            ${0}
          }
  
          &[data-selected] {
            ${0}
          }
  
          @media (hover: hover) {
            &:not([data-pressed]):not([data-selected]) {
              &:hover {
                ${0}
              }
  
              &:active {
                ${0}
              }
            }
          }
  
          &:focus {
            --card-focus-ring-box-shadow: ${0};
          }
  
          &:focus:not(:focus-visible) {
            --card-focus-ring-box-shadow: ${0};
          }
        }
      }
  
      ${0}
    `), _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
      base,
      border,
      focusRing
    }) : undefined, $focusRing ? focusRingBorderStyle(border) : undefined, _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
      base,
      border,
      focusRing
    }) : undefined, $focusRing ? focusRingBorderStyle(border) : undefined, (_theme$sanity$styles = theme.sanity.styles) == null ? void 0 : (_theme$sanity$styles$ = _theme$sanity$styles.card) == null ? void 0 : _theme$sanity$styles$.root);
  }
  
  const _excluded$y = ["pressed", "__unstable_checkered", "__unstable_focusRing", "as", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "radius", "scheme", "selected", "shadow", "tone"];
  const Root$u = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
  /**
   * @public
   */
  
  const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
    const {
      pressed = false,
      __unstable_checkered: checkered = false,
      __unstable_focusRing: focusRing = false,
      as: asProp,
      border,
      borderTop,
      borderRight,
      borderBottom,
      borderLeft,
      radius = 0,
      scheme,
      selected,
      shadow,
      tone: toneProp = 'default'
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$y);
  
    const as = isValidElementType(asProp) ? asProp : 'div';
    const rootTheme = useRootTheme();
    const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp;
    return /*#__PURE__*/React.createElement(ThemeColorProvider, {
      scheme: scheme,
      tone: tone
    }, /*#__PURE__*/React.createElement(Root$u, _extends({
      "data-as": typeof as === 'string' ? as : undefined,
      "data-checkered": checkered ? '' : undefined,
      "data-pressed": pressed ? '' : undefined,
      "data-scheme": rootTheme.scheme,
      "data-selected": selected ? '' : undefined,
      "data-ui": "Card",
      "data-tone": tone
    }, restProps, {
      "$border": border,
      "$borderTop": borderTop,
      "$borderRight": borderRight,
      "$borderBottom": borderBottom,
      "$borderLeft": borderLeft,
      "$checkered": checkered,
      "$focusRing": focusRing,
      "$radius": radius,
      "$shadow": shadow,
      "$tone": tone,
      forwardedAs: as,
      ref: ref,
      selected: selected
    })));
  });
  
  let _$s = t => t,
      _t$t,
      _t2$i;
  function checkboxBaseStyles() {
    return css(_t$t || (_t$t = _$s`
      position: relative;
      display: inline-block;
    `));
  }
  function inputElementStyles(props) {
    const {
      theme
    } = props;
    const color = theme.sanity.color.input;
    const {
      focusRing,
      input,
      radius
    } = theme.sanity;
    return css(_t2$i || (_t2$i = _$s`
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      outline: none;
      opacity: 0;
      z-index: 1;
      padding: 0;
      margin: 0;
  
      & + span {
        position: relative;
        display: block;
        height: ${0};
        width: ${0};
        box-sizing: border-box;
        box-shadow: ${0};
        border-radius: ${0};
        line-height: 1;
        background-color: ${0};
  
        & > svg {
          display: block;
          position: absolute;
          opacity: 0;
          height: 100%;
          width: 100%;
  
          & > path {
            vector-effect: non-scaling-stroke;
            stroke-width: 2 !important;
          }
        }
      }
  
      &:not(:disabled):focus + span {
        box-shadow: ${0};
      }
  
      &:not(:disabled):focus:not(:focus-visible) + span {
        box-shadow: ${0};
      }
  
      &:checked + span > svg:first-child {
        opacity: 1;
      }
  
      &[data-read-only] + span {
        background-color: ${0};
        box-shadow: ${0};
        color: ${0};
      }
  
      &:not([data-read-only]):disabled + span {
        background-color: ${0};
        box-shadow: ${0};
        color: ${0};
      }
  
      &:indeterminate + span > svg:last-child {
        opacity: 1;
      }
    `), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
      color: color.default.enabled.border,
      width: input.border.width
    }), rem(radius[2]), color.default.enabled.bg, focusRingStyle({
      border: {
        width: input.border.width,
        color: color.default.enabled.border
      },
      focusRing
    }), focusRingBorderStyle({
      color: color.default.enabled.border,
      width: input.border.width
    }), color.default.readOnly.bg, focusRingBorderStyle({
      width: input.border.width,
      color: color.default.readOnly.border
    }), color.default.readOnly.fg, color.default.disabled.bg, focusRingBorderStyle({
      width: input.border.width,
      color: color.default.disabled.border
    }), color.default.disabled.fg);
  }
  
  const _excluded$x = ["checked", "className", "disabled", "indeterminate", "customValidity", "readOnly", "style"];
  const Root$t = styled.div(checkboxBaseStyles);
  const Input$5 = styled.input(inputElementStyles);
  /**
   * @public
   */
  
  const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, forwardedRef) {
    const {
      checked,
      className,
      disabled,
      indeterminate,
      customValidity,
      readOnly,
      style
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$x);
  
    const ref = useForwardedRef(forwardedRef);
    useCustomValidity(ref, customValidity);
    useEffect(() => {
      if (ref.current) {
        // Set the indeterminate state
        ref.current.indeterminate = indeterminate || false;
      }
    }, [indeterminate, ref]);
    return /*#__PURE__*/React.createElement(Root$t, {
      className: className,
      "data-ui": "Checkbox",
      style: style
    }, /*#__PURE__*/React.createElement(Input$5, _extends({
      "data-read-only": !disabled && readOnly ? '' : undefined
    }, restProps, {
      checked: checked,
      disabled: disabled || readOnly,
      type: "checkbox",
      readOnly: readOnly,
      ref: ref
    })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CheckmarkIcon, null), /*#__PURE__*/React.createElement(RemoveIcon, null)));
  });
  
  let _$r = t => t,
      _t$s;
  
  function codeSyntaxHighlightingStyle({
    theme
  }) {
    const color = theme.sanity.color.syntax;
    return {
      '&.atrule': {
        color: color.atrule
      },
      '&.attr-name': {
        color: color.attrName
      },
      '&.attr-value': {
        color: color.attrValue
      },
      '&.attribute': {
        color: color.attribute
      },
      '&.boolean': {
        color: color.boolean
      },
      '&.builtin': {
        color: color.builtin
      },
      '&.cdata': {
        color: color.cdata
      },
      '&.char': {
        color: color.char
      },
      '&.class': {
        color: color.class
      },
      '&.class-name': {
        color: color.className
      },
      '&.comment': {
        color: color.comment
      },
      '&.constant': {
        color: color.constant
      },
      '&.deleted': {
        color: color.deleted
      },
      '&.doctype': {
        color: color.doctype
      },
      '&.entity': {
        color: color.entity
      },
      '&.function': {
        color: color.function
      },
      '&.hexcode': {
        color: color.hexcode
      },
      '&.id': {
        color: color.id
      },
      '&.important': {
        color: color.important
      },
      '&.inserted': {
        color: color.inserted
      },
      '&.keyword': {
        color: color.keyword
      },
      '&.number': {
        color: color.number
      },
      '&.operator': {
        color: color.operator
      },
      '&.prolog': {
        color: color.prolog
      },
      '&.property': {
        color: color.property
      },
      '&.pseudo-class': {
        color: color.pseudoClass
      },
      '&.pseudo-element': {
        color: color.pseudoElement
      },
      '&.punctuation': {
        color: color.punctuation
      },
      '&.regex': {
        color: color.regex
      },
      '&.selector': {
        color: color.selector
      },
      '&.string': {
        color: color.string
      },
      '&.symbol': {
        color: color.symbol
      },
      '&.tag': {
        color: color.tag
      },
      '&.unit': {
        color: color.unit
      },
      '&.url': {
        color: color.url
      },
      '&.variable': {
        color: color.variable
      }
    };
  }
  
  function codeBaseStyle() {
    return css(_t$s || (_t$s = _$r`
      color: var(--card-code-fg-color);
  
      & code {
        font-family: inherit;
  
        &.refractor .token {
          ${0}
        }
      }
  
      & a {
        color: inherit;
        text-decoration: underline;
        border-radius: 1px;
      }
  
      & [data-sanity-icon] {
        vertical-align: baseline;
      }
    `), codeSyntaxHighlightingStyle);
  }
  
  const _excluded$w = ["children", "language", "size", "weight"];
  const Root$s = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
  /**
   * @public
   */
  
  const Code = /*#__PURE__*/forwardRef(function Code(props, ref) {
    const {
      children,
      language: languageProp,
      size = 2,
      weight
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$w);
  
    const language = typeof languageProp === 'string' ? languageProp : undefined;
    const registered = language ? Refractor.hasLanguage(language) : false;
    return /*#__PURE__*/React.createElement(Root$s, _extends({
      "data-ui": "Code"
    }, restProps, {
      "$size": size,
      "$weight": weight,
      ref: ref
    }), !(language && registered) && /*#__PURE__*/React.createElement("code", null, children), language && registered && /*#__PURE__*/React.createElement(Refractor, {
      inline: true,
      language: language,
      value: String(children)
    }));
  });
  
  const BASE_STYLE$1 = {
    width: '100%',
    margin: '0 auto'
  };
  function containerBaseStyle() {
    return BASE_STYLE$1;
  }
  function responsiveContainerWidthStyle(props) {
    const {
      theme
    } = props;
    const {
      container,
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$width), val => ({
      maxWidth: val === 'auto' ? 'none' : rem(container[val])
    }));
  }
  
  const _excluded$v = ["as", "width"];
  const Root$r = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle);
  /**
   * @public
   */
  
  const Container = /*#__PURE__*/forwardRef(function Container(props, ref) {
    const {
      as,
      width = 2
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$v);
  
    return /*#__PURE__*/React.createElement(Root$r, _extends({
      "data-ui": "Container"
    }, restProps, {
      "$width": width,
      forwardedAs: as,
      ref: ref
    }));
  });
  
  const _excluded$u = ["as", "autoRows", "autoCols", "autoFlow", "columns", "gap", "gapX", "gapY", "rows", "children"];
  const Root$q = styled(Box)(responsiveGridStyle);
  /**
   * @public
   */
  
  const Grid = /*#__PURE__*/forwardRef(function Grid(props, ref) {
    const {
      as,
      autoRows,
      autoCols,
      autoFlow,
      columns,
      gap,
      gapX,
      gapY,
      rows,
      children
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$u);
  
    return /*#__PURE__*/React.createElement(Root$q, _extends({
      "data-as": typeof as === 'string' ? as : undefined,
      "data-ui": "Grid"
    }, restProps, {
      "$autoRows": autoRows,
      "$autoCols": autoCols,
      "$autoFlow": autoFlow,
      "$columns": columns,
      "$gap": gap,
      "$gapX": gapX,
      "$gapY": gapY,
      "$rows": rows,
      forwardedAs: as,
      ref: ref
    }), children);
  });
  
  let _$q = t => t,
      _t$r,
      _t2$h,
      _t3$a;
  function headingBaseStyle(props) {
    const {
      $accent,
      $muted,
      theme
    } = props;
    return css(_t$r || (_t$r = _$q`
      ${0}
  
      ${0}
  
      & code {
        font-family: ${0};
        border-radius: 1px;
      }
  
      & a {
        text-decoration: none;
        border-radius: 1px;
        color: var(--card-link-color);
        outline: none;
  
        @media (hover: hover) {
          &:hover {
            text-decoration: underline;
          }
        }
  
        &:focus {
          box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);
        }
  
        &:focus:not(:focus-visible) {
          box-shadow: none;
        }
      }
  
      & [data-sanity-icon] {
        vertical-align: baseline;
      }
    `), $accent && css(_t2$h || (_t2$h = _$q`
        color: var(--card-accent-fg-color);
      `)), $muted && css(_t3$a || (_t3$a = _$q`
        color: var(--card-muted-fg-color);
      `)), theme.sanity.fonts.code.family);
  }
  
  const _excluded$t = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
  
  let _$p = t => t,
      _t$q;
  const Root$p = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
  const SpanWithTextOverflow = styled.span(_t$q || (_t$q = _$p`
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  `));
  /**
   * @public
   */
  
  const Heading = /*#__PURE__*/forwardRef(function Heading(props, ref) {
    const {
      accent = false,
      align,
      children: childrenProp,
      muted = false,
      size = 2,
      textOverflow,
      weight
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$t);
  
    let children = childrenProp;
  
    if (textOverflow === 'ellipsis') {
      children = /*#__PURE__*/React.createElement(SpanWithTextOverflow, null, children);
    }
  
    return /*#__PURE__*/React.createElement(Root$p, _extends({
      "data-ui": "Heading"
    }, restProps, {
      "$accent": accent,
      "$align": align,
      "$muted": muted,
      "$size": size,
      "$weight": weight,
      ref: ref
    }), /*#__PURE__*/React.createElement("span", null, children));
  });
  
  function inlineBaseStyle() {
    return {
      lineHeight: 0,
      '&&:not([hidden])': {
        display: 'block'
      },
      '& > div': {
        display: 'inline-block',
        verticalAlign: 'middle'
      }
    };
  }
  function inlineSpaceStyle(props) {
    const {
      theme
    } = props;
    return responsive(theme.sanity.media, getResponsiveProp(props.$space), spaceIndex => {
      const space = rem(theme.sanity.space[spaceIndex]);
      return {
        margin: `-${space} 0 0 -${space}`,
        '& > div': {
          padding: `${space} 0 0 ${space}`
        }
      };
    });
  }
  
  const _excluded$s = ["as", "children", "space"];
  const Root$o = styled(Box)(inlineBaseStyle, inlineSpaceStyle);
  /**
   * @public
   */
  
  const Inline = /*#__PURE__*/forwardRef(function Inline(props, ref) {
    const {
      as,
      children: childrenProp,
      space
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$s);
  
    const children = childrenToElementArray(childrenProp).filter(Boolean);
    return /*#__PURE__*/React.createElement(Root$o, _extends({
      "data-ui": "Inline"
    }, restProps, {
      "$space": space,
      forwardedAs: as,
      ref: ref
    }), children.map((child, idx) => /*#__PURE__*/React.createElement("div", {
      key: idx
    }, child)));
  });
  
  const _excluded$r = ["children", "fontSize", "padding", "radius"];
  
  let _$o = t => t,
      _t$p;
  
  function kbdStyle() {
    return css(_t$p || (_t$p = _$o`
      background: var(--card-bg-color);
      font: inherit;
      box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);
  
      &:not([hidden]) {
        display: inline-block;
      }
    `));
  }
  
  const Root$n = styled.kbd(responsiveRadiusStyle, kbdStyle);
  /**
   * @public
   */
  
  const KBD = /*#__PURE__*/forwardRef(function KBD(props, ref) {
    const {
      children,
      fontSize = 1,
      padding = 1,
      radius = 2
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$r);
  
    return /*#__PURE__*/React.createElement(Root$n, _extends({
      "data-ui": "KBD"
    }, restProps, {
      "$radius": radius,
      ref: ref
    }), /*#__PURE__*/React.createElement(Box, {
      as: "span",
      padding: padding
    }, /*#__PURE__*/React.createElement(Code, {
      as: "span",
      muted: true,
      size: fontSize
    }, children)));
  });
  
  const key$6 = Symbol.for('@sanity/ui/context/boundaryElement');
  globalScope[key$6] = globalScope[key$6] || /*#__PURE__*/createContext(null);
  const BoundaryElementContext = globalScope[key$6];
  
  /**
   * @public
   */
  
  function BoundaryElementProvider(props) {
    const {
      children,
      element
    } = props;
    const value = useMemo(() => ({
      version: 0.0,
      element
    }), [element]);
    return /*#__PURE__*/React.createElement(BoundaryElementContext.Provider, {
      value: value
    }, children);
  }
  
  const DEFAULT_VALUE = {
    version: 0.0,
    element: null
  };
  /**
   * @public
   */
  
  function useBoundaryElement() {
    const value = useContext(BoundaryElementContext); // NOTE: This check is for future-compatiblity
    // - If the value is not an object, it’s not compatible with the current version
    // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
  
    if (value && (!isRecord(value) || value.version !== 0.0)) {
      throw new Error('useBoundaryElement(): the context value is not compatible');
    }
  
    return value || DEFAULT_VALUE;
  }
  
  /**
   * @internal
   */
  
  const RO = typeof window !== 'undefined' && window.ResizeObserver ? window.ResizeObserver : ResizeObserver$1;
  
  function findMaxBreakpoints(media, width) {
    const ret = [];
  
    for (let i = 0; i < media.length; i += 1) {
      const bp = media[i];
  
      if (bp > width) {
        ret.push(i);
      }
    }
  
    return ret;
  }
  function findMinBreakpoints(media, width) {
    const ret = [];
  
    for (let i = 0; i < media.length; i += 1) {
      const bp = media[i];
  
      if (bp <= width) {
        ret.push(i);
      }
    }
  
    return ret;
  }
  
  const _excluded$q = ["children", "media"];
  /**
   * DO NOT USE IN PRODUCTION.
   * @beta
   */
  
  const ElementQuery = /*#__PURE__*/forwardRef(function ElementQuery(props, ref) {
    const theme = useTheme();
  
    const {
      children,
      media = theme.sanity.media
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$q);
  
    const [width, setWidth] = useState(() => window.innerWidth);
    const forwardedRef = useForwardedRef(ref);
    const [element, setElement] = useState(null);
    useEffect(() => {
      if (!element) return;
  
      const handleResizeEntries = entries => {
        setWidth(entries[0].contentRect.width);
      };
  
      const ro = new RO(handleResizeEntries);
      ro.observe(element);
      return () => ro.disconnect();
    }, [element]);
    const max = useMemo(() => findMaxBreakpoints(media, width), [media, width]);
    const min = useMemo(() => findMinBreakpoints(media, width), [media, width]);
    const setRef = useCallback(el => {
      forwardedRef.current = el;
      setElement(el);
    }, [forwardedRef]);
    return /*#__PURE__*/React.createElement("div", _extends({
      "data-ui": "ElementQuery"
    }, restProps, {
      "data-eq-max": max.length ? max.join(' ') : undefined,
      "data-eq-min": min.length ? min.join(' ') : undefined,
      ref: setRef
    }), children);
  });
  
  /**
   * DO NOT USE IN PRODUCTION
   * @beta
   */
  
  class ErrorBoundary extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {
        error: null
      };
    }
  
    static getDerivedStateFromError(error) {
      // Update state so the next render will show the fallback UI.
      return {
        error
      };
    }
  
    componentDidCatch(error, info) {
      this.props.onCatch({
        error,
        info
      });
    }
  
    render() {
      const {
        error
      } = this.state;
  
      if (error) {
        return /*#__PURE__*/React.createElement(Code, null, error.message);
      }
  
      return this.props.children;
    }
  
  }
  
  const key$5 = Symbol.for('@sanity/ui/context/layer');
  globalScope[key$5] = globalScope[key$5] || /*#__PURE__*/createContext(null);
  const LayerContext = globalScope[key$5];
  
  /**
   * @public
   */
  
  function useLayer() {
    const value = useContext(LayerContext);
  
    if (!value) {
      throw new Error('useLayer(): missing context value');
    } // NOTE: This check is for future-compatiblity
    // - If the value is not an object, it’s not compatible with the current version
    // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
  
  
    if (!isRecord(value) || value.version !== 0.0) {
      throw new Error('useLayer(): the context value is not compatible');
    }
  
    return value;
  }
  
  /**
   * @public
   */
  
  function LayerProvider(props) {
    const {
      children,
      zOffset: zOffsetProp = 0
    } = props;
    const parent = useContext(LayerContext);
    const zOffset = useResponsiveProp(zOffsetProp);
    const maxMediaIndex = zOffset.length - 1;
    const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex);
    const zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex];
    const [size, setSize] = useState(0);
    const registerChild = useCallback(() => {
      setSize(v => v + 1);
      return () => setSize(v => v - 1);
    }, []);
    const parentRegisterChild = parent == null ? void 0 : parent.registerChild;
    useEffect(() => {
      if (!parentRegisterChild) return;
      return parentRegisterChild();
    }, [parentRegisterChild]);
    const value = useMemo(() => ({
      version: 0.0,
      isTopLayer: size === 0,
      registerChild,
      size,
      zIndex
    }), [size, registerChild, zIndex]);
    return /*#__PURE__*/React.createElement(LayerContext.Provider, {
      value: value
    }, children);
  }
  
  const _excluded$p = ["children", "style"],
        _excluded2$1 = ["children", "zOffset"];
  
  let _$n = t => t,
      _t$o;
  const Root$m = styled.div(_t$o || (_t$o = _$n`
    position: relative;
  `));
  const LayerChildren = /*#__PURE__*/forwardRef(function LayerChildren(props, ref) {
    const {
      children,
      style = EMPTY_RECORD$1
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$p);
  
    const {
      zIndex
    } = useLayer();
    return /*#__PURE__*/React.createElement(Root$m, _extends({}, restProps, {
      ref: ref,
      style: _extends({}, style, {
        zIndex
      })
    }), children);
  });
  /**
   * @public
   */
  
  const Layer = /*#__PURE__*/forwardRef(function Layer(props, ref) {
    const {
      children,
      zOffset = 1
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded2$1);
  
    return /*#__PURE__*/React.createElement(LayerProvider, {
      zOffset: zOffset
    }, /*#__PURE__*/React.createElement(LayerChildren, _extends({}, restProps, {
      ref: ref
    }), children));
  });
  
  const key$4 = Symbol.for('@sanity/ui/context/portal');
  const elementKey = Symbol.for('@sanity/ui/context/portal/element');
  globalScope[elementKey] = null;
  const defaultContextValue = {
    version: 0.0,
    boundaryElement: null,
  
    get element() {
      if (typeof window === 'undefined') {
        return null;
      }
  
      if (globalScope[elementKey]) {
        return globalScope[elementKey];
      }
  
      globalScope[elementKey] = document.createElement('div');
      globalScope[elementKey].setAttribute('data-portal', '');
      document.body.appendChild(globalScope[elementKey]);
      return globalScope[elementKey];
    }
  
  };
  globalScope[key$4] = globalScope[key$4] || /*#__PURE__*/createContext(defaultContextValue);
  const PortalContext = globalScope[key$4];
  
  /**
   * @public
   */
  
  function usePortal() {
    const value = useContext(PortalContext);
  
    if (!value) {
      throw new Error('usePortal(): missing context value');
    } // NOTE: This check is for future-compatiblity
    // - If the value is not an object, it’s not compatible with the current version
    // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
  
  
    if (!isRecord(value) || value.version !== 0.0) {
      throw new Error('usePortal(): the context value is not compatible');
    }
  
    return value;
  }
  
  /**
   * @public
   */
  
  function Portal(props) {
    var _portal$elements;
  
    const {
      children,
      __unstable_name: name
    } = props;
    const portal = usePortal();
    const portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || ((_portal$elements = portal.elements) == null ? void 0 : _portal$elements.default);
  
    if (!portalElement) {
      return null;
    }
  
    return /*#__PURE__*/ReactDOM.createPortal(children, portalElement);
  }
  
  /**
   * This is React hook – an and escape hatch – to make sure that a value is the same
   * on every render. SHOULD NOT BE USED IN MOST CASES.
   *
   * @internal
   */
  
  function useUnique(value) {
    const valueRef = useRef(value);
  
    if (!isEqual(valueRef.current, value)) {
      valueRef.current = value;
    }
  
    return valueRef.current;
  }
  
  const __BROWSER__ = typeof window !== 'undefined';
  /**
   * @public
   */
  
  
  function PortalProvider(props) {
    const {
      boundaryElement,
      children,
      element,
      __unstable_elements: elementsProp
    } = props;
    const elements = useUnique(elementsProp);
    const value = useMemo(() => {
      return {
        version: 0.0,
        boundaryElement: boundaryElement || null,
        element: element || __BROWSER__ && document.body || null,
        elements
      };
    }, [boundaryElement, element, elements]);
    return /*#__PURE__*/React.createElement(PortalContext.Provider, {
      value: value
    }, children);
  }
  
  let _$m = t => t,
      _t$n;
  const Root$l = styled.div(_t$n || (_t$n = _$m`
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    overflow: hidden;
  `));
  /**
   * @public
   */
  
  const SrOnly = /*#__PURE__*/forwardRef(function SrOnly(props, ref) {
    const {
      as,
      children
    } = props;
    return /*#__PURE__*/React.createElement(Root$l, {
      "aria-hidden": true,
      as: as,
      "data-ui": "SrOnly",
      ref: ref
    }, children);
  });
  
  /**
   * @internal
   */
  function _raf(fn) {
    const frameId = requestAnimationFrame(fn);
    return () => {
      cancelAnimationFrame(frameId);
    };
  }
  /**
   * @internal
   */
  
  function _raf2(fn) {
    let innerDispose = null;
  
    const outerDispose = _raf(() => {
      innerDispose = _raf(fn);
    });
  
    return () => {
      if (innerDispose) innerDispose();
      outerDispose();
    };
  }
  
  /**
   * @internal
   */
  function _isEnterToClickElement(element) {
    return isHTMLAnchorElement(element) || isHTMLButtonElement(element);
  }
  /**
   * @internal
   */
  
  function isHTMLElement(node) {
    return node instanceof Node && node.nodeType === Node.ELEMENT_NODE;
  }
  /**
   * @internal
   */
  
  function isHTMLAnchorElement(element) {
    return isHTMLElement(element) && element.nodeName === 'A';
  }
  /**
   * @internal
   */
  
  function isHTMLInputElement(element) {
    return isHTMLElement(element) && element.nodeName === 'INPUT';
  }
  /**
   * @internal
   */
  
  function isHTMLButtonElement(element) {
    return isHTMLElement(element) && element.nodeName === 'BUTTON';
  }
  /**
   * @internal
   */
  
  function isHTMLSelectElement(element) {
    return isHTMLElement(element) && element.nodeName === 'SELECT';
  }
  /**
   * @internal
   */
  
  function isHTMLTextAreaElement(element) {
    return isHTMLElement(element) && element.nodeName === 'TEXTAREA';
  }
  
  //   IgnoreUtilFocusChanges: false,
  // }
  
  /**
   * @internal
   */
  
  function _hasFocus(element) {
    return Boolean(document.activeElement) && element.contains(document.activeElement);
  }
  /**
   * @internal
   */
  
  function isFocusable(element) {
    if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null) {
      return true;
    }
  
    if (isHTMLAnchorElement(element)) {
      return Boolean(element.href) && element.rel !== 'ignore';
    }
  
    if (isHTMLInputElement(element)) {
      return element.type !== 'hidden' && element.type !== 'file' && !element.disabled;
    }
  
    if (isHTMLButtonElement(element) || isHTMLSelectElement(element) || isHTMLTextAreaElement(element)) {
      return !element.disabled;
    }
  
    return false;
  }
  /**
   * @internal
   */
  
  function attemptFocus(element) {
    if (!isFocusable(element)) {
      return false;
    } // globalFocusState.IgnoreUtilFocusChanges = true
  
  
    try {
      element.focus();
    } catch (_) {// ignore
    } // globalFocusState.IgnoreUtilFocusChanges = false
  
  
    return document.activeElement === element;
  }
  /**
   * @internal
   */
  
  function focusFirstDescendant(element) {
    for (let i = 0; i < element.childNodes.length; i++) {
      const child = element.childNodes[i];
  
      if (isHTMLElement(child) && (attemptFocus(child) || focusFirstDescendant(child))) {
        return true;
      }
    }
  
    return false;
  }
  /**
   * @internal
   */
  
  function focusLastDescendant(element) {
    for (let i = element.childNodes.length - 1; i >= 0; i--) {
      const child = element.childNodes[i];
  
      if (isHTMLElement(child) && (attemptFocus(child) || focusLastDescendant(child))) {
        return true;
      }
    }
  
    return false;
  }
  
  /**
   * @internal
   */
  function _isScrollable(el) {
    if (!(el instanceof Element)) return false;
    const style = window.getComputedStyle(el);
    return style.overflowX.includes('auto') || style.overflowX.includes('scroll') || style.overflowY.includes('auto') || style.overflowY.includes('scroll');
  }
  
  const _excluded$o = ["as", "gap", "getItemKey", "items", "onChange", "renderItem"];
  
  let _$l = t => t,
      _t$m,
      _t2$g;
  const Root$k = styled.div(_t$m || (_t$m = _$l`
    position: relative;
  `));
  const ItemWrapper = styled.div(_t2$g || (_t2$g = _$l`
    position: absolute;
    left: 0;
    right: 0;
  `));
  /**
   * @beta
   */
  
  const VirtualList = /*#__PURE__*/forwardRef(function VirtualList(props, ref) {
    const {
      as = 'div',
      gap = 0,
      getItemKey,
      items = [],
      onChange,
      renderItem
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$o);
  
    const {
      space
    } = useTheme().sanity;
    const forwardedRef = useForwardedRef(ref);
    const wrapperRef = useRef(null);
    const [scrollTop, setScrollTop] = useState(0);
    const [scrollHeight, setScrollHeight] = useState(0);
    const [itemHeight, setItemHeight] = useState(-1);
    useEffect(() => {
      if (!wrapperRef.current) return;
      const firstElement = wrapperRef.current.firstChild;
  
      if (firstElement instanceof HTMLElement) {
        setItemHeight(firstElement.offsetHeight);
      }
    }, [renderItem]);
    useEffect(() => {
      if (!forwardedRef.current) return;
      let _scrollEl = forwardedRef.current.parentNode;
  
      while (_scrollEl && !_isScrollable(_scrollEl)) {
        _scrollEl = _scrollEl.parentNode;
      }
  
      if (_scrollEl) {
        const scrollEl = _scrollEl;
        if (!(scrollEl instanceof HTMLElement)) return;
  
        const _handleScroll = () => {
          setScrollTop(scrollEl.scrollTop);
        };
  
        scrollEl.addEventListener('scroll', _handleScroll, {
          passive: true
        });
        const ro = new ResizeObserver(entries => {
          setScrollHeight(entries[0].contentRect.height);
        });
        ro.observe(scrollEl);
  
        _handleScroll();
  
        return () => {
          scrollEl.removeEventListener('scroll', _handleScroll);
          ro.unobserve(scrollEl);
          ro.disconnect();
        };
      }
  
      const handleScroll = () => {
        setScrollTop(window.scrollY);
      };
  
      const handleResize = () => {
        setScrollHeight(window.innerHeight);
      };
  
      window.addEventListener('scroll', handleScroll, {
        passive: true
      });
      window.addEventListener('resize', handleResize);
      setScrollHeight(window.innerHeight);
      handleScroll();
      return () => {
        window.removeEventListener('scroll', handleScroll);
        window.removeEventListener('resize', handleResize);
      };
    }, [forwardedRef]);
    const len = items.length;
    const height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0;
    const fromIndex = height ? Math.max(Math.floor(scrollTop / height * len) - 2, 0) : 0;
    const toIndex = height ? Math.ceil((scrollTop + scrollHeight) / height * len) + 1 : 0;
    useEffect(() => {
      if (!onChange) return;
      onChange({
        fromIndex,
        gap: space[gap],
        itemHeight,
        scrollHeight,
        scrollTop,
        toIndex
      });
    }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex]);
    const children = useMemo(() => {
      if (!renderItem || items.length === 0) return null;
  
      if (itemHeight === -1) {
        return [/*#__PURE__*/React.createElement(ItemWrapper, {
          key: 0
        }, renderItem(items[0]))];
      }
  
      return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
        const itemIndex = fromIndex + _itemIndex;
        const node = renderItem(item);
        const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
        return /*#__PURE__*/React.createElement(ItemWrapper, {
          key: key,
          style: {
            top: itemIndex * (itemHeight + space[gap])
          }
        }, node);
      });
    }, [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex]);
    const wrapperStyle = useMemo(() => ({
      height
    }), [height]);
    return /*#__PURE__*/React.createElement(Root$k, _extends({
      as: as,
      "data-ui": "VirtualList"
    }, restProps, {
      ref: forwardedRef
    }), /*#__PURE__*/React.createElement("div", {
      ref: wrapperRef,
      style: wrapperStyle
    }, children));
  });
  
  let _$k = t => t,
      _t$l,
      _t2$f,
      _t3$9;
  const Root$j = styled.div(_t$l || (_t$l = _$k`
    position: absolute;
    pointer-events: none;
    width: 27px;
    height: 27px;
    fill: none;
  
    :empty + & {
      display: none;
    }
  
    & > svg {
      display: block;
      transform-origin: 13.5px 13.5px;
    }
  
    [data-popper-placement^='top'] > div > & {
      bottom: -27px;
    }
  
    [data-popper-placement^='right'] > div > & {
      left: -27px;
  
      & > svg {
        transform: rotate(90deg);
      }
    }
  
    [data-popper-placement^='left'] > div > & {
      right: -27px;
  
      & > svg {
        transform: rotate(-90deg);
      }
    }
  
    [data-popper-placement^='bottom'] > div > & {
      top: -27px;
  
      & > svg {
        transform: rotate(180deg);
      }
    }
  `));
  const BorderPath = styled.path(_t2$f || (_t2$f = _$k`
    fill: var(--card-shadow-outline-color);
  `));
  const ShapePath = styled.path(_t3$9 || (_t3$9 = _$k`
    fill: var(--card-bg-color);
  `));
  const PopoverArrow = /*#__PURE__*/forwardRef(function PopoverArrow(props, ref) {
    return /*#__PURE__*/React.createElement(Root$j, _extends({
      "data-ui": "PopoverArrow"
    }, props, {
      ref: ref
    }), /*#__PURE__*/React.createElement("svg", {
      width: "27",
      height: "11",
      viewBox: "0 0 27 11",
      fill: "none",
      xmlns: "http://www.w3.org/2000/svg"
    }, /*#__PURE__*/React.createElement(BorderPath, {
      d: "M1.18708 1C3.29803 1.0011 5.29585 1.95479 6.62414 3.59561L11.1683 9.20895C12.369 10.6922 14.631 10.6922 15.8317 9.20894L20.3759 3.59561C21.7042 1.95478 23.702 1.0011 25.8129 1H21.9436C21.0533 1.49255 20.2545 2.15618 19.5986 2.96641L15.0545 8.57975C14.254 9.56855 12.746 9.56855 11.9455 8.57975L7.40139 2.96642C6.74548 2.15618 5.94673 1.49255 5.05643 1H1.18708Z"
    }), /*#__PURE__*/React.createElement(ShapePath, {
      d: "M1.18342 0C3.59749 0 5.88246 1.0901 7.40138 2.96642L11.9455 8.57975C12.746 9.56855 14.254 9.56855 15.0545 8.57975L19.5986 2.96641C21.1175 1.0901 23.4025 0 25.8166 0H27H0H1.18342Z"
    })));
  });
  
  /*
  
  The order of popper phases:
  
  - beforeRead
  - read
  - afterRead
  - beforeMain
  - main
  - afterMain
  - beforeWrite
  - write
  - afterWrite
  
  */
  
  function getPopoverModifiers(props) {
    const {
      allowedAutoPlacements,
      arrow,
      arrowElement,
      boundaryElement,
      constrainSize,
      distance,
      fallbackPlacements,
      margins,
      matchReferenceWidth,
      open,
      preventOverflow,
      skidding,
      tether,
      tetherOffset
    } = props; // NOTE: For later viewers:
    // Prior to adding this change, the popover would get `maxWidth: 0` the 2nd time it
    // was opened, when used with `constrainSize`. I was looking for a way to "reset"
    // the size of the popover as measured by Popper.js, and this seems to be a workaround.
  
    if (!open) {
      return [];
    }
  
    const detectOverflowOptions = {
      altAxis: !constrainSize,
      boundary: boundaryElement || undefined,
      padding: 8,
      tether,
      tetherOffset
    };
    return [constrainSize && _extends({}, maxSizeModifier, {
      options: detectOverflowOptions
    }), constrainSize && {
      name: 'applyMaxSize',
      enabled: true,
      phase: 'beforeWrite',
      requires: ['maxSize'],
  
      fn({
        state
      }) {
        const {
          width,
          height
        } = state.modifiersData.maxSize;
        state.styles.popper = _extends({}, state.styles.popper, {
          maxWidth: `${width}px`,
          maxHeight: `${height}px`
        });
      }
  
    }, arrow && {
      name: 'arrow',
      options: {
        element: arrowElement,
        padding: 4
      }
    }, (constrainSize || preventOverflow) && {
      name: 'preventOverflow',
      options: detectOverflowOptions
    }, {
      name: 'offset',
      options: {
        offset: [skidding, distance]
      }
    }, margins && {
      name: 'margins',
      enabled: true,
      phase: 'beforeRead',
      fn: ({
        state
      }) => {
        const {
          rects
        } = state;
  
        if (rects.reference) {
          rects.reference.x += margins[3];
          rects.reference.y += margins[1];
          rects.reference.width -= margins[1] + margins[3];
          rects.reference.height -= margins[0] + margins[2];
        }
      }
    }, {
      name: 'flip',
      options: {
        allowedAutoPlacements,
        boundary: boundaryElement || undefined,
        fallbackPlacements,
        padding: 8
      }
    }, matchReferenceWidth && {
      name: 'matchWidth',
      enabled: true,
      phase: 'beforeWrite',
      requires: ['computeStyles'],
  
      fn({
        state
      }) {
        const {
          width
        } = state.rects.reference;
        state.styles.popper.width = `${width}px`;
      },
  
      effect: ({
        state
      }) => {
        const refElement = state.elements.reference;
  
        if (refElement instanceof HTMLElement) {
          state.elements.popper.style.width = `${refElement.offsetWidth - (margins ? margins[1] + margins[3] : 0)}px`;
        }
      }
    }].filter(Boolean);
  }
  
  function usePopoverModifiers(props) {
    const {
      allowedAutoPlacements,
      arrow,
      arrowElement,
      boundaryElement,
      constrainSize,
      distance,
      fallbackPlacements,
      margins,
      matchReferenceWidth,
      open,
      preventOverflow,
      skidding,
      tether,
      tetherOffset
    } = props;
    return useMemo(() => {
      return getPopoverModifiers({
        allowedAutoPlacements,
        arrow,
        arrowElement,
        boundaryElement,
        constrainSize,
        distance,
        fallbackPlacements,
        margins,
        matchReferenceWidth,
        open,
        preventOverflow,
        skidding,
        tether,
        tetherOffset
      });
    }, [allowedAutoPlacements, arrow, arrowElement, boundaryElement, constrainSize, distance, fallbackPlacements, margins, matchReferenceWidth, open, preventOverflow, skidding, tether, tetherOffset]);
  }
  
  const _excluded$n = ["__unstable_margins", "allowedAutoPlacements", "arrow", "boundaryElement", "children", "content", "constrainSize", "disabled", "fallbackPlacements", "open", "padding", "placement", "portal", "preventOverflow", "radius", "referenceElement", "matchReferenceWidth", "shadow", "scheme", "style", "tether", "tetherOffset", "tone", "width", "zOffset"];
  
  let _2 = t => t,
      _t$k,
      _t2$e,
      _t3$8;
  const Root$i = styled(Layer)(({
    $preventOverflow
  }) => css(_t$k || (_t$k = _2`
      pointer-events: none;
      display: flex;
      flex-direction: column;
      max-width: calc(100% - 16px);
  
      & > * {
        min-height: 0;
      }
  
      /* Hide the popover when the reference element is out of bounds */
      ${0}
    `), $preventOverflow && css(_t2$e || (_t2$e = _2`
        &[data-popper-reference-hidden='true'] {
          display: none;
        }
      `))));
  const PopoverCard = styled(Card)(({
    $constrainSize
  }) => css(_t3$8 || (_t3$8 = _2`
      flex: 1;
      max-height: ${0};
      pointer-events: all;
  
      && {
        display: flex;
      }
  
      flex-direction: column;
  
      & > * {
        min-height: 0;
      }
  
      ${0}
    `), $constrainSize && '100%', responsiveContainerWidthStyle));
  /**
   * @public
   */
  
  const Popover = /*#__PURE__*/forwardRef(function Popover(props, ref) {
    var _theme$sanity$layer;
  
    const boundaryElementContext = useBoundaryElement();
    const theme = useTheme();
  
    const {
      __unstable_margins: margins,
      allowedAutoPlacements,
      arrow = true,
      boundaryElement: boundaryElementProp = boundaryElementContext.element,
      children: child,
      content,
      constrainSize,
      disabled,
      fallbackPlacements,
      open = false,
      padding,
      placement = 'bottom',
      portal: portalProp = false,
      preventOverflow,
      radius = 3,
      referenceElement: referenceElementProp,
      matchReferenceWidth,
      shadow = 3,
      scheme,
      style = EMPTY_RECORD$1,
      tether,
      tetherOffset,
      tone = 'inherit',
      width = 0,
      zOffset = (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.popover.zOffset
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$n);
  
    const forwardedRef = useForwardedRef(ref);
    const portal = usePortal();
    const [referenceElement, setReferenceElement] = useState(null);
    const [popperElement, setPopperElement] = useState(null);
    const [arrowElement, setArrowElement] = useState(null);
    const popperReferenceElement = referenceElementProp || referenceElement;
    const modifiers = usePopoverModifiers({
      allowedAutoPlacements,
      arrow,
      arrowElement,
      boundaryElement: boundaryElementProp || portal.boundaryElement,
      constrainSize,
      distance: arrow ? 4 : 0,
      fallbackPlacements,
      margins,
      matchReferenceWidth,
      open,
      preventOverflow,
      skidding: 0,
      tether,
      tetherOffset
    });
    const popper = usePopper(popperReferenceElement, popperElement, {
      placement,
      modifiers
    });
    const {
      attributes,
      forceUpdate,
      styles
    } = popper;
    const setRef = useCallback(el => {
      const childRef = child.ref;
      setReferenceElement(el);
  
      if (typeof childRef === 'function') {
        childRef(el);
      } else if (childRef) {
        childRef.current = el;
      }
    }, [child]);
    const setRootRef = useCallback(el => {
      setPopperElement(el);
      forwardedRef.current = el;
    }, [forwardedRef]);
    const popoverStyle = useMemo(() => _extends({}, style, styles.popper), [style, styles]);
    useEffect(() => {
      if (forceUpdate) {
        try {
          forceUpdate();
        } catch (_) {// ignore caught error
        }
      }
    }, [content, forceUpdate, open, popperReferenceElement]);
  
    if (disabled) {
      return child || /*#__PURE__*/React.createElement(React.Fragment, null);
    }
  
    const node = /*#__PURE__*/React.createElement(Root$i, _extends({
      "data-ui": "Popover"
    }, restProps, {
      "$preventOverflow": preventOverflow,
      ref: setRootRef,
      style: popoverStyle,
      zOffset: zOffset
    }, attributes.popper), /*#__PURE__*/React.createElement(PopoverCard, {
      "$constrainSize": constrainSize,
      "data-ui": "PopoverCard",
      padding: padding,
      radius: radius,
      scheme: scheme,
      shadow: shadow,
      tone: tone,
      width: width
    }, arrow && /*#__PURE__*/React.createElement(PopoverArrow, {
      ref: setArrowElement,
      style: styles.arrow
    }), content));
    return /*#__PURE__*/React.createElement(React.Fragment, null, child && !referenceElementProp ? /*#__PURE__*/cloneElement(child, {
      ref: setRef
    }) : child || /*#__PURE__*/React.createElement(React.Fragment, null), open && /*#__PURE__*/React.createElement(React.Fragment, null, portalProp && /*#__PURE__*/React.createElement(Portal, {
      __unstable_name: typeof portalProp === 'string' ? portalProp : undefined
    }, node), !portalProp && node));
  });
  
  let _$j = t => t,
      _t$j,
      _t2$d;
  function radioBaseStyle() {
    return css(_t$j || (_t$j = _$j`
      position: relative;
  
      &:not([hidden]) {
        display: inline-block;
      }
  
      &[data-read-only] {
        outline: 1px solid red;
      }
    `));
  }
  function inputElementStyle(props) {
    const {
      theme
    } = props;
    const {
      focusRing,
      input
    } = theme.sanity;
    const color = theme.sanity.color.input;
    const dist = (input.radio.size - input.radio.markSize) / 2;
    return css(_t2$d || (_t2$d = _$j`
      appearance: none;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      height: 100%;
      width: 100%;
      outline: none;
      z-index: 1;
      padding: 0;
      margin: 0;
      border-radius: ${0};
      border: none;
  
      /* enabled */
      & + span {
        display: block;
        position: relative;
        height: ${0};
        width: ${0};
        border-radius: ${0};
        background: ${0};
        box-shadow: ${0};
  
        &::after {
          content: '';
          position: absolute;
          top: ${0};
          left: ${0};
          height: ${0};
          width: ${0};
          border-radius: ${0};
          background: ${0};
          opacity: 0;
        }
      }
  
      /* focused */
      &:not(:disabled):focus + span {
        box-shadow: ${0};
      }
  
      &:not(:disabled):focus:not(:focus-visible) + span {
        box-shadow: ${0};
      }
  
      &:checked + span::after {
        opacity: 1;
      }
  
      /* read only */
      &[data-read-only] + span {
        box-shadow: 0 0 0 1px ${0};
        background: ${0};
  
        &::after {
          background: ${0};
        }
      }
  
      /* disabled */
      &:not([data-read-only]):disabled + span {
        box-shadow: 0 0 0 1px ${0};
        background: ${0};
  
        &::after {
          background: ${0};
        }
      }
    `), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), color.default.enabled.bg, focusRingBorderStyle({
      color: color.default.enabled.border,
      width: input.border.width
    }), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), color.default.enabled.fg, focusRingStyle({
      border: {
        width: input.border.width,
        color: color.default.enabled.border
      },
      focusRing
    }), focusRingBorderStyle({
      color: color.default.enabled.border,
      width: input.border.width
    }), color.default.readOnly.border, color.default.readOnly.bg, color.default.readOnly.fg, color.default.disabled.border, color.default.disabled.bg, color.default.disabled.fg);
  }
  
  const _excluded$m = ["className", "disabled", "style", "customValidity", "readOnly"];
  const Root$h = styled.div(radioBaseStyle);
  const Input$4 = styled.input(inputElementStyle);
  /**
   * @public
   */
  
  const Radio = /*#__PURE__*/forwardRef(function Radio(props, forwardedRef) {
    const {
      className,
      disabled,
      style,
      customValidity,
      readOnly
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$m);
  
    const ref = useForwardedRef(forwardedRef);
    useCustomValidity(ref, customValidity);
    return /*#__PURE__*/React.createElement(Root$h, {
      className: className,
      "data-ui": "Radio",
      style: style
    }, /*#__PURE__*/React.createElement(Input$4, _extends({
      "data-read-only": !disabled && readOnly ? '' : undefined
    }, restProps, {
      disabled: disabled || readOnly,
      readOnly: readOnly,
      ref: ref,
      type: "radio"
    })), /*#__PURE__*/React.createElement("span", null));
  });
  
  let _$i = t => t,
      _t$i,
      _t2$c,
      _t3$7,
      _t4$5;
  
  function rootStyle() {
    return css(_t$i || (_t$i = _$i`
      position: relative;
      width: stretch;
  
      &:not([hidden]) {
        display: inline-block;
      }
    `));
  }
  
  function inputBaseStyle(props) {
    const {
      theme
    } = props;
    const font = theme.sanity.fonts.text;
    return css(_t2$c || (_t2$c = _$i`
      -webkit-font-smoothing: antialiased;
      appearance: none;
      border: 0;
      font-family: ${0};
      color: inherit;
      width: 100%;
      outline: none;
      margin: 0;
  
      &:disabled {
        opacity: 1;
      }
    `), font.family);
  }
  
  function inputColorStyle(props) {
    const {
      theme
    } = props;
    const {
      focusRing,
      input
    } = theme.sanity;
    const color = theme.sanity.color.input;
    return css(_t3$7 || (_t3$7 = _$i`
      /* enabled */
      background-color: ${0};
      color: ${0};
      box-shadow: ${0};
  
      /* hovered */
      @media (hover: hover) {
        &:not(:disabled):hover {
          background-color: ${0};
          color: ${0};
          box-shadow: ${0};
        }
      }
  
      /* focused */
      &:not(:disabled):focus {
        box-shadow: ${0};
      }
  
      /* read-only */
      &[data-read-only] {
        background-color: ${0};
        color: ${0};
        box-shadow: ${0};
      }
  
      /* disabled */
      &:not([data-read-only]):disabled {
        background-color: ${0};
        color: ${0};
        box-shadow: ${0};
      }
    `), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
      color: color.default.enabled.border,
      width: input.border.width
    }), color.default.hovered.bg, color.default.hovered.fg, focusRingBorderStyle({
      color: color.default.hovered.border,
      width: input.border.width
    }), focusRingStyle({
      border: {
        width: input.border.width,
        color: color.default.enabled.border
      },
      focusRing
    }), color.default.readOnly.bg, color.default.readOnly.fg, focusRingBorderStyle({
      color: color.default.readOnly.border,
      width: input.border.width
    }), color.default.disabled.bg, color.default.disabled.fg, focusRingBorderStyle({
      color: color.default.disabled.border,
      width: input.border.width
    }));
  }
  
  function textSize(size) {
    return {
      fontSize: rem(size.fontSize),
      lineHeight: rem(size.lineHeight)
    };
  }
  
  function inputTextSizeStyle(props) {
    const {
      theme,
      $fontSize
    } = props;
    const {
      sizes
    } = theme.sanity.fonts.text;
    return responsive(theme.sanity.media, getResponsiveProp($fontSize), sizeIndex => textSize(sizes[sizeIndex] || sizes[2]));
  }
  
  function inputStyle() {
    return [responsiveRadiusStyle, inputBaseStyle, inputColorStyle, inputTextSizeStyle, responsiveInputPaddingIconRightStyle];
  }
  
  function iconBoxStyle(props) {
    const {
      theme
    } = props;
    const color = theme.sanity.color.input;
    return css(_t4$5 || (_t4$5 = _$i`
      pointer-events: none;
      position: absolute;
      top: 0;
      right: 0;
  
      /* enabled */
      --card-fg-color: ${0};
  
      /* hover */
      @media (hover: hover) {
        select:not(disabled):not(:read-only):hover + && {
          --card-fg-color: ${0};
        }
      }
  
      /* disabled */
      select:disabled + && {
        --card-fg-color: ${0};
      }
  
      /* read-only */
      select[data-read-only] + && {
        --card-fg-color: ${0};
      }
    `), color.default.enabled.fg, color.default.hovered.fg, color.default.disabled.fg, color.default.readOnly.fg);
  }
  
  const selectStyle = {
    root: rootStyle,
    input: inputStyle,
    iconBox: iconBoxStyle
  };
  
  const _excluded$l = ["children", "customValidity", "disabled", "fontSize", "padding", "radius", "readOnly", "space"];
  const Root$g = styled.div(selectStyle.root);
  const Input$3 = styled.select(selectStyle.input);
  const IconBox = styled(Box)(selectStyle.iconBox);
  /**
   * @public
   */
  
  const Select = /*#__PURE__*/forwardRef(function Select(props, forwardedRef) {
    const {
      children,
      customValidity,
      disabled,
      fontSize = 2,
      padding = 3,
      radius = 1,
      readOnly,
      space = 3
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$l);
  
    const ref = useForwardedRef(forwardedRef);
    useCustomValidity(ref, customValidity);
    return /*#__PURE__*/React.createElement(Root$g, {
      "data-ui": "Select"
    }, /*#__PURE__*/React.createElement(Input$3, _extends({
      "data-read-only": !disabled && readOnly ? '' : undefined,
      "data-ui": "Select"
    }, restProps, {
      "$fontSize": fontSize,
      "$padding": padding,
      "$radius": radius,
      "$space": space,
      disabled: disabled || readOnly,
      ref: ref
    }), children), /*#__PURE__*/React.createElement(IconBox, {
      padding: padding
    }, /*#__PURE__*/React.createElement(Text, {
      size: fontSize
    }, /*#__PURE__*/React.createElement(SelectIcon, null))));
  });
  
  const BASE_STYLE = {
    '&&:not([hidden])': {
      display: 'grid'
    },
    '&[data-as="ul"],&[data-as="ol"]': {
      listStyle: 'none'
    },
    gridTemplateColumns: 'minmax(0, 1fr)',
    gridAutoRows: 'min-content'
  };
  function stackBaseStyle() {
    return BASE_STYLE;
  }
  function responsiveStackSpaceStyle(props) {
    const {
      theme
    } = props;
    const {
      media,
      space
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$space), spaceIndex => ({
      gridGap: rem(space[spaceIndex])
    }));
  }
  
  const _excluded$k = ["as", "space"];
  const Root$f = styled(Box)(stackBaseStyle, responsiveStackSpaceStyle);
  /**
   * @public
   */
  
  const Stack = /*#__PURE__*/forwardRef(function Stack(props, ref) {
    const {
      as,
      space
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$k);
  
    return /*#__PURE__*/React.createElement(Root$f, _extends({
      "data-as": typeof as === 'string' ? as : undefined,
      "data-ui": "Stack"
    }, restProps, {
      "$space": space,
      forwardedAs: as,
      ref: ref
    }));
  });
  
  let _$h = t => t,
      _t$h,
      _t2$b,
      _t3$6,
      _t4$4,
      _t5$3,
      _t6$1,
      _t7;
  /* Root */
  
  function switchBaseStyles() {
    return css(_t$h || (_t$h = _$h`
      position: relative;
      &:not([hidden]) {
        display: inline-block;
      }
    `));
  }
  /* Input */
  
  function switchInputStyles() {
    // Visually hide the input element while keeping it interactive
    return css(_t2$b || (_t2$b = _$h`
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0;
      height: 100%;
      width: 100%;
      outline: none;
      padding: 0;
      margin: 0;
  
      /* Place the input element above the representation element */
      z-index: 1;
    `));
  }
  /* Representation */
  
  function switchRepresentationStyles(props) {
    const {
      theme
    } = props;
    const {
      focusRing,
      input
    } = theme.sanity;
    const color = theme.sanity.color.button.default;
    return css(_t3$6 || (_t3$6 = _$h`
      --switch-bg-color: ${0};
      --switch-fg-color: ${0};
      --switch-box-shadow: none;
  
      &:not([hidden]) {
        display: block;
      }
      position: relative;
      width: ${0};
      height: ${0};
      border-radius: ${0};
  
      /* Make sure it’s not possible to interact with the wrapper element */
      pointer-events: none;
  
      &:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        box-shadow: var(--switch-box-shadow);
        border-radius: inherit;
      }
  
      /* Focus styles */
      input:focus + && {
        --switch-box-shadow: ${0};
      }
  
      input:focus:not(:focus-visible) + && {
        --switch-box-shadow: none;
      }
  
      input:checked + && {
        --switch-bg-color: ${0};
        --switch-fg-color: ${0};
      }
  
      @media (hover: hover) {
        input:not(:disabled):hover + && {
          --switch-bg-color: ${0};
          --switch-fg-color: ${0};
        }
  
        input:not(:disabled):checked:hover + && {
          --switch-bg-color: ${0};
          --switch-fg-color: ${0};
        }
      }
  
      input:not([data-read-only]):disabled + && {
        --switch-bg-color: ${0};
        --switch-fg-color: ${0};
      }
    `), color.default.enabled.bg, color.default.enabled.fg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
      focusRing
    }), color.positive.enabled.bg, color.positive.enabled.fg, color.default.hovered.bg, color.default.hovered.fg, color.positive.hovered.bg, color.positive.hovered.fg, color.default.disabled.bg, color.default.disabled.fg);
  }
  /* Track */
  
  function switchTrackStyles(props) {
    const {
      theme
    } = props;
    const {
      input
    } = theme.sanity;
    return css(_t4$4 || (_t4$4 = _$h`
      &:not([hidden]) {
        display: block;
      }
      background-color: var(--switch-bg-color);
      position: absolute;
      left: 0;
      top: 0;
      width: ${0};
      height: ${0};
      border-radius: ${0};
    `), rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2));
  }
  /* Thumb */
  
  function switchThumbStyles(props) {
    const {
      $indeterminate,
      theme
    } = props;
    const {
      input
    } = theme.sanity;
    const trackWidth = input.switch.width;
    const trackHeight = input.switch.height;
    const trackPadding = input.switch.padding;
    const size = trackHeight - input.switch.padding * 2;
    const checkedOffset = trackWidth - trackPadding * 2 - size;
    const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding;
    const checked = $indeterminate !== true && props.$checked === true;
    return css(_t5$3 || (_t5$3 = _$h`
      &:not([hidden]) {
        display: block;
      }
      position: absolute;
      left: ${0};
      top: ${0};
      height: ${0};
      width: ${0};
      border-radius: ${0};
      transition-property: transform;
      transition-duration: ${0}ms;
      transition-timing-function: ${0};
      background: var(--switch-fg-color);
      transform: translate3d(0, 0, 0);
  
      ${0}
  
      ${0}
    `), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_t6$1 || (_t6$1 = _$h`
        transform: translate3d(${0}px, 0, 0);
      `), checkedOffset), $indeterminate && css(_t7 || (_t7 = _$h`
        transform: translate3d(${0}px, 0, 0);
      `), indeterminateOffset));
  }
  
  const _excluded$j = ["checked", "className", "disabled", "indeterminate", "readOnly", "style"];
  const Root$e = styled.span(switchBaseStyles);
  const Input$2 = styled.input(switchInputStyles);
  const Representation = styled.span(switchRepresentationStyles);
  const Track = styled.span(switchTrackStyles);
  const Thumb = styled.span(switchThumbStyles);
  /**
   * @public
   */
  
  const Switch = /*#__PURE__*/forwardRef(function Switch(props, forwardedRef) {
    const {
      checked,
      className,
      disabled,
      indeterminate,
      readOnly,
      style
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$j);
  
    const ref = useForwardedRef(forwardedRef);
    useEffect(() => {
      if (ref.current) {
        // Set the indeterminate state
        ref.current.indeterminate = indeterminate || false;
      }
    }, [indeterminate, ref]);
    return /*#__PURE__*/React.createElement(Root$e, {
      className: className,
      "data-ui": "Switch",
      style: style
    }, /*#__PURE__*/React.createElement(Input$2, _extends({
      "data-read-only": !disabled && readOnly ? '' : undefined
    }, restProps, {
      checked: indeterminate !== true && checked,
      disabled: disabled || readOnly,
      type: "checkbox",
      ref: ref
    })), /*#__PURE__*/React.createElement(Representation, {
      "aria-hidden": true,
      "data-name": "representation"
    }, /*#__PURE__*/React.createElement(Track, null), /*#__PURE__*/React.createElement(Thumb, {
      "$checked": checked,
      "$indeterminate": indeterminate
    })));
  });
  
  const _excluded$i = ["border", "customValidity", "disabled", "fontSize", "padding", "radius"];
  
  let _$g = t => t,
      _t$g;
  const Root$d = styled.span(textInputRootStyle);
  const InputRoot$1 = styled.span(_t$g || (_t$g = _$g`
    flex: 1;
    min-width: 0;
    display: block;
    position: relative;
  `));
  const Input$1 = styled.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
  const Presentation$1 = styled.div(responsiveRadiusStyle, textInputRepresentationStyle);
  /**
   * @public
   */
  
  const TextArea = /*#__PURE__*/forwardRef(function TextArea(props, forwardedRef) {
    const {
      border = true,
      customValidity,
      disabled = false,
      fontSize = 2,
      padding = 3,
      radius = 1
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$i);
  
    const ref = useForwardedRef(forwardedRef);
    useCustomValidity(ref, customValidity);
    return /*#__PURE__*/React.createElement(Root$d, {
      "data-ui": "TextArea"
    }, /*#__PURE__*/React.createElement(InputRoot$1, null, /*#__PURE__*/React.createElement(Input$1, _extends({
      "data-as": "textarea"
    }, restProps, {
      "$fontSize": fontSize,
      "$padding": padding,
      disabled: disabled,
      ref: ref
    })), /*#__PURE__*/React.createElement(Presentation$1, {
      "$border": border,
      "$radius": radius
    })));
  });
  
  const _excluded$h = ["border", "clearButton", "disabled", "fontSize", "icon", "iconRight", "onClear", "padding", "prefix", "radius", "readOnly", "space", "suffix", "customValidity", "type"];
  
  let _$f = t => t,
      _t$f,
      _t2$a,
      _t3$5,
      _t4$3,
      _t5$2;
  const CLEAR_BUTTON_BOX_STYLE = {
    zIndex: 2
  };
  const Root$c = styled.span(textInputRootStyle);
  const InputRoot = styled.span(_t$f || (_t$f = _$f`
    flex: 1;
    min-width: 0;
    display: block;
    position: relative;
  `));
  const Prefix = styled(Card).attrs({
    forwardedAs: 'span'
  })(_t2$a || (_t2$a = _$f`
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  
    & > span {
      display: block;
      margin: -1px;
    }
  `));
  const Suffix = styled(Card).attrs({
    forwardedAs: 'span'
  })(_t3$5 || (_t3$5 = _$f`
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  
    & > span {
      display: block;
      margin: -1px;
    }
  `));
  const Input = styled.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
  const Presentation = styled.span(responsiveRadiusStyle, textInputRepresentationStyle);
  const LeftBox = styled(Box)(_t4$3 || (_t4$3 = _$f`
    position: absolute;
    top: 0;
    left: 0;
  `));
  const RightCard = styled(Card)(_t5$2 || (_t5$2 = _$f`
    background-color: transparent;
    position: absolute;
    top: 0;
    right: 0;
  `));
  /**
   * @public
   */
  
  const TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef) {
    const {
      border = true,
      clearButton,
      disabled = false,
      fontSize = 2,
      icon,
      iconRight,
      onClear,
      padding: paddingProp = 3,
      prefix,
      radius: radiusProp = 1,
      readOnly,
      space = 3,
      suffix,
      customValidity,
      type = 'text'
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$h);
  
    const ref = useForwardedRef(forwardedRef);
    const padding = useResponsiveProp(paddingProp);
    const radius = useResponsiveProp(radiusProp); // Transient properties
  
    const $hasClearButton = Boolean(clearButton);
    const $hasIcon = Boolean(icon);
    const $hasIconRight = Boolean(iconRight);
    const $hasSuffix = Boolean(suffix);
    const $hasPrefix = Boolean(prefix);
    useCustomValidity(ref, customValidity); // Prevent the clear button from taking the focus away from the input
  
    const handleClearMouseDown = useCallback(event => {
      event.preventDefault();
      event.stopPropagation();
    }, []);
    const handleClearClick = useCallback(event => {
      var _ref$current;
  
      event.preventDefault();
      event.stopPropagation();
      if (onClear) onClear(); // Focus the input, in case focus has been lost when clicking the clear button
  
      (_ref$current = ref.current) == null ? void 0 : _ref$current.focus();
    }, [onClear, ref]); // Render prefix (memoized)
  
    const prefixNode = useMemo(() => prefix && /*#__PURE__*/React.createElement(Prefix, {
      borderTop: true,
      borderLeft: true,
      borderBottom: true,
      radius: radius,
      sizing: "border",
      tone: "inherit"
    }, /*#__PURE__*/React.createElement("span", null, prefix)), [prefix, radius]); // Render presentation (memoized)
  
    const presentationNode = useMemo(() => /*#__PURE__*/React.createElement(Presentation, {
      "$border": border,
      "$hasPrefix": $hasPrefix,
      "$hasSuffix": $hasSuffix,
      "$radius": radius
    }, icon && /*#__PURE__*/React.createElement(LeftBox, {
      padding: padding
    }, /*#__PURE__*/React.createElement(Text, {
      size: fontSize
    }, /*#__PURE__*/isValidElement(icon) && icon, isValidElementType(icon) && /*#__PURE__*/createElement(icon))), !$hasClearButton && iconRight && /*#__PURE__*/React.createElement(RightCard, {
      padding: padding
    }, /*#__PURE__*/React.createElement(Text, {
      size: fontSize
    }, /*#__PURE__*/isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && /*#__PURE__*/createElement(iconRight)))), [border, fontSize, icon, iconRight, padding, radius, $hasClearButton, $hasPrefix, $hasSuffix]); // Render clear button (memoized)
  
    const clearButtonBoxPadding = useMemo(() => padding.map(v => v - 2), [padding]);
    const clearButtonPadding = useMemo(() => padding.map(v => v - 1), [padding]);
    const clearButtonProps = useMemo(() => typeof clearButton === 'object' ? clearButton : EMPTY_RECORD$1, [clearButton]);
    const clearButtonNode = useMemo(() => !disabled && !readOnly && clearButton && /*#__PURE__*/React.createElement(RightCard, {
      forwardedAs: "span",
      padding: clearButtonBoxPadding,
      style: CLEAR_BUTTON_BOX_STYLE,
      tone: customValidity ? 'critical' : 'inherit'
    }, /*#__PURE__*/React.createElement(Button, _extends({
      "data-qa": "clear-button",
      fontSize: fontSize,
      icon: CloseIcon,
      mode: "bleed",
      padding: clearButtonPadding,
      radius: radius.map(r => r - 1)
    }, clearButtonProps, {
      onClick: handleClearClick,
      onMouseDown: handleClearMouseDown
    }))), [clearButton, clearButtonBoxPadding, clearButtonPadding, clearButtonProps, customValidity, disabled, fontSize, handleClearClick, handleClearMouseDown, radius, readOnly]); // Render suffix (memoized)
  
    const suffixNode = useMemo(() => suffix && /*#__PURE__*/React.createElement(Suffix, {
      borderTop: true,
      borderRight: true,
      borderBottom: true,
      radius: radius,
      sizing: "border",
      tone: "inherit"
    }, /*#__PURE__*/React.createElement("span", null, suffix)), [radius, suffix]);
    return /*#__PURE__*/React.createElement(Root$c, {
      "data-ui": "TextInput"
    }, prefixNode, /*#__PURE__*/React.createElement(InputRoot, null, /*#__PURE__*/React.createElement(Input, _extends({
      "data-as": "input"
    }, restProps, {
      "$iconLeft": $hasIcon,
      "$iconRight": $hasIconRight || $hasClearButton,
      "$padding": padding,
      "$space": space,
      "$fontSize": fontSize,
      disabled: disabled,
      readOnly: readOnly,
      ref: ref,
      type: type
    })), presentationNode, clearButtonNode), suffixNode);
  });
  
  let _$e = t => t,
      _t$e,
      _t2$9,
      _t3$4;
  const Root$b = styled.div(_t$e || (_t$e = _$e`
    position: absolute;
    width: 15px;
    height: 15px;
    fill: none;
  
    :empty + & {
      display: none;
    }
  
    & > svg {
      &:not([hidden]) {
        display: block;
      }
      transform-origin: 7.5px 7.5px;
    }
  
    [data-popper-placement^='top'] > div > & {
      bottom: -15px;
    }
  
    [data-popper-placement^='right'] > div > & {
      left: -15px;
  
      & > svg {
        transform: rotate(90deg);
      }
    }
  
    [data-popper-placement^='left'] > div > & {
      right: -15px;
  
      & > svg {
        transform: rotate(-90deg);
      }
    }
  
    [data-popper-placement^='bottom'] > div > & {
      top: -15px;
  
      & > svg {
        transform: rotate(180deg);
      }
    }
  `));
  const Border = styled.path(_t2$9 || (_t2$9 = _$e`
    fill: var(--card-shadow-outline-color);
  `));
  const Shape = styled.path(_t3$4 || (_t3$4 = _$e`
    fill: var(--card-bg-color);
  `));
  const TooltipArrow = /*#__PURE__*/forwardRef(function TooltipArrow(props, ref) {
    const restProps = _extends({}, props);
  
    return /*#__PURE__*/React.createElement(Root$b, _extends({}, restProps, {
      ref: ref
    }), /*#__PURE__*/React.createElement("svg", {
      width: "15",
      height: "15",
      viewBox: "0 0 15 15"
    }, /*#__PURE__*/React.createElement(Border, {
      d: "M11.5266 1C11.032 1.32802 10.5837 1.73105 10.1995 2.20057L9.04792 3.6081C8.24771 4.58614 6.7523 4.58614 5.95209 3.6081L4.80047 2.20057C4.41632 1.73105 3.96796 1.32802 3.47341 1H0.156727C1.65639 1 3.07687 1.67313 4.02651 2.83381L5.17813 4.24134C6.37844 5.70839 8.62156 5.70839 9.82187 4.24134L10.9735 2.83381C11.9231 1.67313 13.3436 1 14.8433 1H11.5266Z"
    }), /*#__PURE__*/React.createElement(Shape, {
      d: "M0.156725 0C1.95632 0 3.66089 0.80776 4.80047 2.20057L5.95209 3.6081C6.75229 4.58614 8.24771 4.58614 9.04791 3.6081L10.1995 2.20057C11.3391 0.80776 13.0437 0 14.8433 0H15H0H0.156725Z"
    })));
  });
  
  const _excluded$g = ["allowedAutoPlacements", "boundaryElement", "children", "content", "disabled", "fallbackPlacements", "placement", "portal", "scheme", "zOffset"];
  
  let _$d = t => t,
      _t$d;
  const Root$a = styled(Layer)(_t$d || (_t$d = _$d`
    pointer-events: none;
  `));
  /**
   * @public
   */
  
  const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
    var _theme$sanity$layer;
  
    const boundaryElementContext = useBoundaryElement();
    const theme = useTheme();
  
    const {
      allowedAutoPlacements,
      boundaryElement = boundaryElementContext == null ? void 0 : boundaryElementContext.element,
      children,
      content,
      disabled,
      fallbackPlacements,
      placement = 'bottom',
      portal,
      scheme,
      zOffset = (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.tooltip.zOffset
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$g);
  
    const forwardedRef = useForwardedRef(ref);
    const [referenceElement, setReferenceElement] = useState(null);
    const [popperElement, setPopperElement] = useState(null);
    const [arrowElement, setArrowElement] = useState(null);
    const popper = usePopper(referenceElement, popperElement, {
      placement,
      modifiers: [{
        name: 'arrow',
        options: {
          element: arrowElement,
          padding: 4
        }
      }, {
        name: 'preventOverflow',
        options: {
          altAxis: true,
          boundary: boundaryElement || undefined,
          padding: 4
        }
      }, {
        name: 'offset',
        options: {
          offset: [0, 3]
        }
      }, {
        name: 'flip',
        options: {
          allowedAutoPlacements,
          fallbackPlacements
        }
      }]
    });
    const {
      forceUpdate
    } = popper;
    const [isOpen, setIsOpen] = useState(false);
    const handleBlur = useCallback(() => setIsOpen(false), []);
    const handleFocus = useCallback(() => setIsOpen(true), []);
    const handleMouseEnter = useCallback(() => setIsOpen(true), []);
    const handleMouseLeave = useCallback(() => setIsOpen(false), []); // Detect whether the mouse is moving outside of the reference element. This is sometimes
    // necessary, because the tooltip might not always close as it should (e.g. when clicking
    // the reference element triggers a CPU-heavy operation.)
  
    useEffect(() => {
      if (!isOpen) return;
  
      function handleWindowMouseMove(event) {
        if (!referenceElement) return;
        const isHoveringReference = referenceElement === event.target || event.target instanceof Node && referenceElement.contains(event.target);
  
        if (!isHoveringReference) {
          setIsOpen(false);
          window.removeEventListener('mousemove', handleWindowMouseMove);
        }
      }
  
      window.addEventListener('mousemove', handleWindowMouseMove);
      return () => {
        window.removeEventListener('mousemove', handleWindowMouseMove);
      };
    }, [isOpen, referenceElement]);
    useEffect(() => {
      if (forceUpdate) forceUpdate();
    }, [forceUpdate, content]); // Close when `disabled` changes to `true`
  
    useEffect(() => {
      if (disabled) setIsOpen(false);
    }, [disabled]); // Close when `content` changes to falsy
  
    useEffect(() => {
      if (!content) setIsOpen(false);
    }, [content]);
  
    const setRef = el => {
      setPopperElement(el);
      forwardedRef.current = el;
    };
  
    if (!children) return /*#__PURE__*/React.createElement(React.Fragment, null);
    if (disabled) return children;
    const referenceProps = {
      onBlur: handleBlur,
      onFocus: handleFocus,
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave,
      ref: setReferenceElement
    };
    const referenceNode = /*#__PURE__*/cloneElement(children, referenceProps);
    const popperNode = /*#__PURE__*/React.createElement(Root$a, _extends({
      "data-ui": "Tooltip"
    }, restProps, popper.attributes.popper, {
      ref: setRef,
      style: popper.styles.popper,
      zOffset: zOffset
    }), /*#__PURE__*/React.createElement(Card, {
      radius: 2,
      scheme: scheme,
      shadow: 3
    }, content, /*#__PURE__*/React.createElement(TooltipArrow, {
      ref: setArrowElement,
      style: popper.styles.arrow
    })));
    return /*#__PURE__*/React.createElement(React.Fragment, null, referenceNode, isOpen && /*#__PURE__*/React.createElement(React.Fragment, null, portal && /*#__PURE__*/React.createElement(Portal, {
      __unstable_name: typeof portal === 'string' ? portal : undefined
    }, popperNode), !portal && popperNode));
  });
  
  let _$c = t => t,
      _t$c,
      _t2$8,
      _t3$3,
      _t4$2,
      _t5$1;
  /**
   * @internal
   */
  
  const Root$9 = styled.div(_t$c || (_t$c = _$c`
    /* position: relative; */
  `));
  /**
   * @internal
   */
  
  const ListBox = styled(Box)(_t2$8 || (_t2$8 = _$c`
    & > ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
  `));
  /**
   * @internal
   */
  
  const ResultsPopover = styled(Popover)(_t3$3 || (_t3$3 = _$c`
    & > div {
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
  
    &[data-popper-reference-hidden='true'] {
      display: none;
    }
  `));
  const rotate = keyframes(_t4$2 || (_t4$2 = _$c`
    from {
      transform: rotate(0deg);
    }
  
    to {
      transform: rotate(360deg);
    }
  `));
  /**
   * @internal
   */
  
  const AnimatedSpinnerIcon = styled(SpinnerIcon)(_t5$1 || (_t5$1 = _$c`
    animation: ${0} 500ms linear infinite;
  `), rotate);
  
  function AutocompleteOption(props) {
    const {
      children,
      id,
      onSelect,
      selected,
      value
    } = props;
    const handleClick = useCallback(() => {
      // Calling the `onSelect` in a timeout is a fix to
      // allow the `click` event to propagate in some cases
      setTimeout(() => {
        onSelect(value);
      }, 0);
    }, [onSelect, value]);
    const handleKeyDown = useCallback(event => {
      if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {
        handleClick();
      }
    }, [handleClick]);
    return /*#__PURE__*/React.createElement("li", {
      "aria-selected": selected,
      "data-ui": "AutocompleteOption",
      id: id,
      role: "option",
      onClick: handleClick,
      onKeyDown: handleKeyDown
    }, children);
  }
  
  /**
   * @internal
   */
  function autocompleteReducer(state, msg) {
    if (msg.type === 'input/change') {
      return _extends({}, state, {
        activeValue: null,
        focused: true,
        query: msg.query
      });
    }
  
    if (msg.type === 'input/focus') {
      return _extends({}, state, {
        focused: true
      });
    }
  
    if (msg.type === 'root/blur') {
      return _extends({}, state, {
        focused: false,
        query: null
      });
    }
  
    if (msg.type === 'root/clear') {
      return _extends({}, state, {
        activeValue: null,
        query: null,
        value: null
      });
    }
  
    if (msg.type === 'root/escape') {
      return _extends({}, state, {
        focused: false,
        query: null
      });
    }
  
    if (msg.type === 'root/open') {
      return _extends({}, state, {
        query: state.query || msg.query
      });
    }
  
    if (msg.type === 'root/setActiveValue') {
      return _extends({}, state, {
        activeValue: msg.value,
        listFocused: msg.listFocused || state.listFocused
      });
    }
  
    if (msg.type === 'root/setListFocused') {
      // prevent unnecessary re-render
      if (state.listFocused === msg.listFocused) return state;
      return _extends({}, state, {
        listFocused: msg.listFocused
      });
    }
  
    if (msg.type === 'value/change') {
      return _extends({}, state, {
        activeValue: msg.value,
        query: null,
        value: msg.value
      });
    }
  
    return state;
  }
  
  /**
   * @internal
   */
  const EMPTY_RECORD = {};
  /**
   * @internal
   */
  
  const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ['Control', 'Shift', 'Alt', 'Enter', 'Home', 'End', 'PageUp', 'PageDown', 'Meta', 'Tab', 'CapsLock'];
  /**
   * @internal
   */
  
  const AUTOCOMPLETE_POPOVER_MARGINS = [0, 1, 1, 1];
  /**
   * @internal
   */
  
  const AUTOCOMPLETE_POPOVER_PLACEMENT = 'bottom-start';
  /**
   * @internal
   */
  
  const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ['top-start'];
  
  const _excluded$f = ["border", "customValidity", "disabled", "filterOption", "fontSize", "icon", "id", "listBox", "loading", "onBlur", "onChange", "onFocus", "onQueryChange", "onSelect", "openButton", "options", "padding", "popover", "prefix", "radius", "readOnly", "relatedElements", "renderOption", "renderPopover", "renderValue", "value"];
  
  const defaultRenderValue = (value, option) => option ? option.value : value;
  
  const defaultFilterOption = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1;
  
  const InnerAutocomplete = /*#__PURE__*/forwardRef(function InnerAutocomplete(props, ref) {
    const {
      border = true,
      customValidity,
      disabled,
      filterOption: filterOptionProp,
      fontSize = 2,
      icon,
      id,
      listBox = {},
      loading,
      onBlur,
      onChange,
      onFocus,
      onQueryChange,
      onSelect,
      openButton,
      options: optionsProp,
      padding: paddingProp = 3,
      popover = {},
      prefix,
      radius = 3,
      readOnly,
      relatedElements,
      renderOption: renderOptionProp,
      renderPopover,
      renderValue = defaultRenderValue,
      value: valueProp
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$f);
  
    const [state, dispatch] = useReducer(autocompleteReducer, {
      activeValue: valueProp || null,
      focused: false,
      listFocused: false,
      query: null,
      value: valueProp || null
    });
    const {
      activeValue,
      focused,
      listFocused,
      query,
      value
    } = state;
    const defaultRenderOption = useCallback(({
      value
    }) => /*#__PURE__*/React.createElement(Card, {
      "data-as": "button",
      padding: paddingProp,
      radius: 2,
      tone: "inherit"
    }, /*#__PURE__*/React.createElement(Text, {
      size: fontSize,
      textOverflow: "ellipsis"
    }, value)), [fontSize, paddingProp]);
    const renderOption = typeof renderOptionProp === 'function' ? renderOptionProp : defaultRenderOption;
    const filterOption = typeof filterOptionProp === 'function' ? filterOptionProp : defaultFilterOption;
    const [rootElement, setRootElement] = useState(null);
    const [resultsPopoverElement, setResultsPopoverElement] = useState(null);
    const inputElementRef = useRef(null);
    const listBoxElementRef = useRef(null);
    const focusedElementRef = useRef(null);
    const valueRef = useRef(value);
    const valuePropRef = useRef(valueProp);
    const forwardedRef = useForwardedRef(ref);
    const popoverMouseWithinRef = useRef(false);
    const listBoxId = `${id}-listbox`;
    const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY;
    const padding = useResponsiveProp(paddingProp);
    const currentOption = useMemo(() => value !== null ? options.find(o => o.value === value) : undefined, [options, value]);
    const filteredOptions = useMemo(() => options.filter(option => query ? filterOption(query, option) : true), [filterOption, options, query]);
    const filteredOptionsLen = filteredOptions.length;
    const activeItemId = activeValue ? `${id}-option-${activeValue}` : undefined;
    const expanded = query !== null && loading || focused && query !== null;
    const handleRootBlur = useCallback(event => {
      setTimeout(() => {
        // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar
        // closes the results in certain situations):
        // - Do not handle blur if the mouse is within the popover
        if (popoverMouseWithinRef.current) {
          return;
        }
  
        const elements = (relatedElements || []).concat(rootElement ? [rootElement] : [], resultsPopoverElement ? [resultsPopoverElement] : []);
        let focusInside = false;
  
        if (document.activeElement) {
          for (const e of elements) {
            if (e === document.activeElement || e.contains(document.activeElement)) {
              focusInside = true;
              break;
            }
          }
        }
  
        if (focusInside === false) {
          dispatch({
            type: 'root/blur'
          });
          popoverMouseWithinRef.current = false;
          if (onQueryChange) onQueryChange(null);
          if (onBlur) onBlur(event);
        }
      }, 0);
    }, [onBlur, onQueryChange, relatedElements, resultsPopoverElement, rootElement]);
    const handleRootFocus = useCallback(event => {
      const listBoxElement = listBoxElementRef.current;
      const focusedElement = event.target instanceof HTMLElement ? event.target : null;
      focusedElementRef.current = focusedElement;
      const nextListFocused = Boolean(listBoxElement && focusedElement && listBoxElement.contains(focusedElement));
      dispatch({
        type: 'root/setListFocused',
        listFocused: nextListFocused
      });
    }, []);
    const handleOptionSelect = useCallback(v => {
      var _inputElementRef$curr;
  
      dispatch({
        type: 'value/change',
        value: v
      });
      popoverMouseWithinRef.current = false;
      if (onSelect) onSelect(v);
      valueRef.current = v;
      if (onChange) onChange(v);
      if (onQueryChange) onQueryChange(null);
      (_inputElementRef$curr = inputElementRef.current) == null ? void 0 : _inputElementRef$curr.focus();
    }, [onChange, onSelect, onQueryChange]);
    const handleRootKeyDown = useCallback(event => {
      if (event.key === 'ArrowDown') {
        event.preventDefault();
        if (!filteredOptionsLen) return;
        const activeOption = filteredOptions.find(o => o.value === activeValue);
        const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1;
        const nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen];
  
        if (nextActiveOption) {
          dispatch({
            type: 'root/setActiveValue',
            value: nextActiveOption.value,
            listFocused: true
          });
        }
  
        return;
      }
  
      if (event.key === 'ArrowUp') {
        event.preventDefault();
        if (!filteredOptionsLen) return;
        const activeOption = filteredOptions.find(o => o.value === activeValue);
        const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1;
        const nextActiveOption = filteredOptions[activeIndex === -1 ? filteredOptionsLen - 1 : (filteredOptionsLen + activeIndex - 1) % filteredOptionsLen];
  
        if (nextActiveOption) {
          dispatch({
            type: 'root/setActiveValue',
            value: nextActiveOption.value,
            listFocused: true
          });
        }
  
        return;
      }
  
      if (event.key === 'Escape') {
        var _inputElementRef$curr2;
  
        dispatch({
          type: 'root/escape'
        });
        popoverMouseWithinRef.current = false;
        if (onQueryChange) onQueryChange(null);
        (_inputElementRef$curr2 = inputElementRef.current) == null ? void 0 : _inputElementRef$curr2.focus();
        return;
      }
  
      const target = event.target;
      const listEl = listBoxElementRef.current;
  
      if ((listEl === target || listEl != null && listEl.contains(target)) && !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)) {
        var _inputElementRef$curr3;
  
        (_inputElementRef$curr3 = inputElementRef.current) == null ? void 0 : _inputElementRef$curr3.focus();
        return;
      }
    }, [activeValue, filteredOptions, filteredOptionsLen, onQueryChange]);
    const handleInputChange = useCallback(event => {
      const nextQuery = event.currentTarget.value;
      dispatch({
        type: 'input/change',
        query: nextQuery
      });
      if (onQueryChange) onQueryChange(nextQuery);
    }, [onQueryChange]);
    const handleInputFocus = useCallback(event => {
      if (!focused) {
        dispatch({
          type: 'input/focus'
        });
        if (onFocus) onFocus(event);
      }
    }, [focused, onFocus]);
    const handlePopoverMouseEnter = useCallback(() => {
      popoverMouseWithinRef.current = true;
    }, []);
    const handlePopoverMouseLeave = useCallback(() => {
      popoverMouseWithinRef.current = false;
    }, []);
    const handleClearButtonClick = useCallback(() => {
      var _inputElementRef$curr4;
  
      dispatch({
        type: 'root/clear'
      });
      valueRef.current = '';
      if (onChange) onChange('');
      if (onQueryChange) onQueryChange(null);
      (_inputElementRef$curr4 = inputElementRef.current) == null ? void 0 : _inputElementRef$curr4.focus();
    }, [onChange, onQueryChange]);
    const handleClearButtonFocus = useCallback(() => {
      dispatch({
        type: 'input/focus'
      });
    }, []); // Change the value when `value` prop changes
  
    useEffect(() => {
      if (valueProp !== valuePropRef.current) {
        valuePropRef.current = valueProp;
  
        if (valueProp !== undefined) {
          dispatch({
            type: 'value/change',
            value: valueProp
          });
          valueRef.current = valueProp;
        }
  
        return;
      }
  
      if (valueProp !== value) {
        dispatch({
          type: 'value/change',
          value: valueProp || null
        });
      }
    }, [valueProp, value]); // Reset active item when closing
  
    useEffect(() => {
      if (!focused) {
        if (valueRef.current) {
          dispatch({
            type: 'root/setActiveValue',
            value: valueRef.current
          });
        }
      }
    }, [focused]); // Focus the selected item
  
    useEffect(() => {
      const listElement = listBoxElementRef.current;
      if (!listElement) return;
      const activeOption = filteredOptions.find(o => o.value === activeValue);
  
      if (activeOption) {
        const activeIndex = filteredOptions.indexOf(activeOption);
        const activeItemElement = listElement.childNodes[activeIndex];
  
        if (activeItemElement) {
          if (_hasFocus(activeItemElement)) {
            // already focused
            return;
          }
  
          focusFirstDescendant(activeItemElement);
        }
      }
    }, [activeValue, filteredOptions]);
    const setRef = useCallback(el => {
      inputElementRef.current = el;
      forwardedRef.current = el;
    }, [forwardedRef]);
    const clearButton = useMemo(() => {
      if (!loading && !disabled && value) {
        return {
          'aria-label': 'Clear',
          onFocus: handleClearButtonFocus
        };
      }
  
      return undefined;
    }, [disabled, handleClearButtonFocus, loading, value]);
    const openButtonBoxPadding = useMemo(() => padding.map(v => v - 2), [padding]);
    const openButtonPadding = useMemo(() => padding.map(v => v - 1), [padding]);
    const openButtonProps = useMemo(() => typeof openButton === 'object' ? openButton : EMPTY_RECORD, [openButton]);
    const handleOpenClick = useCallback(event => {
      dispatch({
        type: 'root/open',
        query: value ? renderValue(value, currentOption) : ''
      });
      if (openButtonProps.onClick) openButtonProps.onClick(event);
  
      _raf(() => {
        var _inputElementRef$curr5;
  
        return (_inputElementRef$curr5 = inputElementRef.current) == null ? void 0 : _inputElementRef$curr5.focus();
      });
    }, [currentOption, openButtonProps, renderValue, value]);
    const openButtonNode = useMemo(() => !disabled && !readOnly && openButton ? /*#__PURE__*/React.createElement(Box, {
      "aria-hidden": expanded,
      padding: openButtonBoxPadding
    }, /*#__PURE__*/React.createElement(Button, _extends({
      "aria-label": "Open",
      disabled: expanded,
      fontSize: fontSize,
      icon: ChevronDownIcon,
      mode: "bleed",
      padding: openButtonPadding
    }, openButtonProps, {
      onClick: handleOpenClick
    }))) : undefined, [disabled, expanded, fontSize, handleOpenClick, openButton, openButtonBoxPadding, openButtonPadding, openButtonProps, readOnly]);
    const inputValue = useMemo(() => {
      if (query === null) {
        if (value !== null) {
          return renderValue(value, currentOption);
        }
  
        return '';
      }
  
      return query;
    }, [currentOption, query, renderValue, value]);
    const input = /*#__PURE__*/React.createElement(TextInput, _extends({}, restProps, {
      "aria-activedescendant": activeItemId,
      "aria-autocomplete": "list",
      "aria-expanded": expanded,
      "aria-owns": listBoxId,
      autoCapitalize: "off",
      autoComplete: "off",
      autoCorrect: "off",
      border: border,
      clearButton: clearButton,
      customValidity: customValidity,
      disabled: disabled,
      fontSize: fontSize,
      icon: icon,
      iconRight: loading && AnimatedSpinnerIcon,
      id: id,
      inputMode: "search",
      onChange: handleInputChange,
      onClear: handleClearButtonClick,
      onFocus: handleInputFocus,
      padding: padding,
      prefix: prefix,
      radius: radius,
      readOnly: readOnly,
      ref: setRef,
      role: "combobox",
      spellCheck: false,
      suffix: openButtonNode,
      value: inputValue
    }));
    const handleListBoxKeyDown = useCallback(event => {
      // If the focus is currently in the list, move focus to the input element
      if (event.key === 'Tab') {
        var _inputElementRef$curr6;
  
        if (listFocused) (_inputElementRef$curr6 = inputElementRef.current) == null ? void 0 : _inputElementRef$curr6.focus();
      }
    }, [listFocused]);
    const content = useMemo(() => {
      if (filteredOptions.length === 0) return null;
      return /*#__PURE__*/React.createElement(ListBox, _extends({
        onKeyDown: handleListBoxKeyDown,
        padding: 1
      }, listBox, {
        tabIndex: -1
      }), /*#__PURE__*/React.createElement(Stack, {
        as: "ul",
        "aria-multiselectable": false,
        id: listBoxId,
        ref: listBoxElementRef,
        role: "listbox",
        space: 1
      }, filteredOptions.map(option => {
        const active = activeValue !== null ? option.value === activeValue : currentOption === option;
        return /*#__PURE__*/React.createElement(AutocompleteOption, {
          id: `${id}-option-${option.value}`,
          key: option.value,
          onSelect: handleOptionSelect,
          selected: active,
          value: option.value
        }, /*#__PURE__*/cloneElement(renderOption(option), {
          disabled: loading,
          selected: active,
          tabIndex: listFocused && active ? 0 : -1
        }));
      })));
    }, [activeValue, currentOption, filteredOptions, handleOptionSelect, handleListBoxKeyDown, id, listBox, listBoxId, listFocused, loading, renderOption]);
    const results = useMemo(() => {
      if (renderPopover) {
        return renderPopover({
          content,
          hidden: !expanded,
          inputElement: inputElementRef.current,
          onMouseEnter: handlePopoverMouseEnter,
          onMouseLeave: handlePopoverMouseLeave
        }, setResultsPopoverElement);
      }
  
      if (filteredOptionsLen === 0) {
        return null;
      }
  
      return /*#__PURE__*/React.createElement(ResultsPopover, _extends({
        __unstable_margins: AUTOCOMPLETE_POPOVER_MARGINS,
        arrow: false,
        constrainSize: true,
        content: content,
        fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS,
        matchReferenceWidth: true,
        onMouseEnter: handlePopoverMouseEnter,
        onMouseLeave: handlePopoverMouseLeave,
        open: expanded,
        placement: AUTOCOMPLETE_POPOVER_PLACEMENT,
        portal: true,
        radius: radius,
        ref: setResultsPopoverElement,
        referenceElement: inputElementRef.current
      }, popover));
    }, [content, expanded, filteredOptionsLen, handlePopoverMouseEnter, handlePopoverMouseLeave, popover, radius, renderPopover]);
    return /*#__PURE__*/React.createElement(Root$9, {
      "data-ui": "Autocomplete",
      onBlur: handleRootBlur,
      onFocus: handleRootFocus,
      onKeyDown: handleRootKeyDown,
      ref: setRootElement
    }, input, results);
  });
  /**
   * @public
   */
  
  const Autocomplete = InnerAutocomplete;
  
  let _$b = t => t,
      _t$b,
      _t2$7;
  const Root$8 = styled.ol(_t$b || (_t$b = _$b`
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
    white-space: nowrap;
    line-height: 0;
  `));
  const ExpandButton = styled(Button)(_t2$7 || (_t2$7 = _$b`
    appearance: none;
    margin: -4px;
  `));
  
  const _excluded$e = ["children", "maxLength", "separator", "space"];
  /**
   * @beta
   */
  
  const Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(props, ref) {
    const {
      children,
      maxLength,
      separator,
      space = 2
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$e);
  
    const [open, setOpen] = useState(false);
    const [expandElement, setExpandElement] = useState(null);
    const [popoverElement, setPopoverElement] = useState(null);
    const collapse = useCallback(() => setOpen(false), []);
    const expand = useCallback(() => setOpen(true), []);
    useClickOutside(collapse, [expandElement, popoverElement]);
    const rawItems = useMemo(() => Children.toArray(children).filter(child => {
      return /*#__PURE__*/isValidElement(child);
    }), [children]);
    const items = useMemo(() => {
      const len = rawItems.length;
  
      if (maxLength && len > maxLength) {
        const beforeLength = Math.ceil(maxLength / 2);
        const afterLength = Math.floor(maxLength / 2);
        return [...rawItems.slice(0, beforeLength - 1), /*#__PURE__*/React.createElement(Popover, {
          constrainSize: true,
          content: /*#__PURE__*/React.createElement(Stack, {
            as: "ol",
            overflow: "auto",
            padding: space,
            space: space
          }, rawItems.slice(beforeLength - 1, len - afterLength)),
          key: "button",
          open: open,
          placement: "top",
          portal: true,
          ref: setPopoverElement
        }, /*#__PURE__*/React.createElement(ExpandButton, {
          fontSize: 1,
          mode: "bleed",
          onClick: open ? collapse : expand,
          padding: 1,
          ref: setExpandElement,
          selected: open,
          text: "\u2026"
        })), ...rawItems.slice(len - afterLength)];
      }
  
      return rawItems;
    }, [collapse, expand, maxLength, open, rawItems, space]);
    return /*#__PURE__*/React.createElement(Root$8, _extends({
      "data-ui": "Breadcrumbs"
    }, restProps, {
      ref: ref
    }), items.map((item, itemIndex) => /*#__PURE__*/React.createElement(Fragment, {
      key: itemIndex
    }, itemIndex > 0 && /*#__PURE__*/React.createElement(Box, {
      "aria-hidden": true,
      as: "li",
      paddingX: space
    }, separator || /*#__PURE__*/React.createElement(Text, {
      muted: true
    }, "/")), /*#__PURE__*/React.createElement(Box, {
      as: "li"
    }, item))));
  });
  
  function dialogStyle({
    theme
  }) {
    const color = theme.sanity.color.base;
    return {
      '&:not([hidden])': {
        display: 'flex'
      },
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      alignItems: 'center',
      justifyContent: 'center',
      outline: 'none',
      background: color.shadow.penumbra
    };
  }
  function responsiveDialogPositionStyle(props) {
    const {
      theme
    } = props;
    const {
      media
    } = theme.sanity;
    return responsive(media, getResponsiveProp(props.$position), position => ({
      '&&': {
        position
      }
    }));
  }
  
  const key$3 = Symbol.for('@sanity/ui/context/dialog');
  globalScope[key$3] = globalScope[key$3] || /*#__PURE__*/createContext({
    version: 0.0
  });
  /**
   * @internal
   */
  
  const DialogContext = globalScope[key$3];
  
  /**
   * This API might change. DO NOT USE IN PRODUCTION.
   * @beta
   */
  
  function useDialog() {
    return useContext(DialogContext);
  }
  
  const _excluded$d = ["__unstable_autoFocus", "__unstable_hideCloseButton", "cardRadius", "cardShadow", "children", "contentRef", "footer", "header", "id", "onClickOutside", "onClose", "padding", "portal", "position", "scheme", "width", "zOffset"];
  
  let _$a = t => t,
      _t$a,
      _t2$6,
      _t3$2,
      _t4$1,
      _t5,
      _t6;
  const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
  const DialogContainer = styled(Container)(_t$a || (_t$a = _$a`
    &:not([hidden]) {
      display: flex;
    }
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  `));
  const DialogCardRoot = styled(Card)(_t2$6 || (_t2$6 = _$a`
    &:not([hidden]) {
      display: flex;
    }
    width: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  `));
  const DialogLayout = styled(Flex)(_t3$2 || (_t3$2 = _$a`
    flex: 1;
    min-height: 0;
    width: 100%;
  `));
  const DialogHeader = styled(Card)(_t4$1 || (_t4$1 = _$a`
    position: relative;
    z-index: 2;
  
    &:after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      border-bottom: 1px solid var(--card-hairline-soft-color);
    }
  `));
  const DialogContent = styled(Box)(_t5 || (_t5 = _$a`
    position: relative;
    z-index: 1;
    overflow: auto;
    outline: none;
  `));
  const DialogFooter = styled(Box)(_t6 || (_t6 = _$a`
    position: relative;
    z-index: 3;
    border-top: 1px solid var(--card-hairline-soft-color);
  `));
  const DialogCard = /*#__PURE__*/forwardRef(function DialogCard(props, ref) {
    const {
      __unstable_autoFocus: autoFocus,
      __unstable_hideCloseButton: hideCloseButton,
      children,
      contentRef,
      footer,
      header,
      id,
      onClickOutside,
      onClose,
      radius,
      scheme,
      shadow,
      width
    } = props;
    const forwardedRef = useForwardedRef(ref);
    const [rootElement, setRootElement] = useState(null);
    const localContentRef = useRef(null);
    const layer = useLayer();
    const {
      isTopLayer
    } = layer;
    const labelId = `${id}_label`;
    const showCloseButton = Boolean(onClose) && hideCloseButton === false;
    const showHeader = Boolean(header) || showCloseButton;
    useEffect(() => {
      if (!autoFocus) return; // On mount: focus the first interactive element in the contents
  
      if (forwardedRef.current) {
        focusFirstDescendant(forwardedRef.current);
      }
    }, [autoFocus, forwardedRef]);
    useGlobalKeyDown(useCallback(event => {
      if (!isTopLayer || !onClose) return;
  
      if (event.key === 'Escape') {
        event.preventDefault();
        event.stopPropagation();
        onClose();
      }
    }, [isTopLayer, onClose]));
    useClickOutside(useCallback(() => {
      if (!isTopLayer || !onClickOutside) return;
      onClickOutside();
    }, [isTopLayer, onClickOutside]), [rootElement]);
    const setRef = useCallback(el => {
      setRootElement(el);
      forwardedRef.current = el;
    }, [forwardedRef]);
    const setContentRef = useCallback(el => {
      localContentRef.current = el;
      if (typeof contentRef === 'function') contentRef(el);else if (contentRef) contentRef.current = el;
    }, [contentRef]);
    return /*#__PURE__*/React.createElement(DialogContainer, {
      "data-ui": "DialogCard",
      width: width
    }, /*#__PURE__*/React.createElement(DialogCardRoot, {
      radius: radius,
      ref: setRef,
      scheme: scheme,
      shadow: shadow
    }, /*#__PURE__*/React.createElement(DialogLayout, {
      direction: "column"
    }, showHeader && /*#__PURE__*/React.createElement(DialogHeader, null, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
      flex: 1,
      padding: 4
    }, header && /*#__PURE__*/React.createElement(Text, {
      id: labelId,
      weight: "semibold"
    }, header)), showCloseButton && /*#__PURE__*/React.createElement(Box, {
      padding: 2
    }, /*#__PURE__*/React.createElement(Button, {
      "aria-label": "Close dialog",
      disabled: !onClose,
      icon: CloseIcon,
      mode: "bleed",
      onClick: onClose,
      padding: 3
    })))), /*#__PURE__*/React.createElement(DialogContent, {
      flex: 1,
      ref: setContentRef,
      tabIndex: -1
    }, children), footer && /*#__PURE__*/React.createElement(DialogFooter, null, footer))));
  });
  /**
   * @public
   */
  
  const Dialog = /*#__PURE__*/forwardRef(function Dialog(props, ref) {
    var _theme$sanity$layer;
  
    const dialog = useDialog();
    const theme = useTheme();
  
    const {
      __unstable_autoFocus: autoFocus = true,
      __unstable_hideCloseButton: hideCloseButton = false,
      cardRadius = 3,
      cardShadow = 4,
      children,
      contentRef,
      footer,
      header,
      id,
      onClickOutside,
      onClose,
      padding = 4,
      portal,
      position = dialog.position || 'fixed',
      scheme,
      width = 0,
      zOffset = dialog.zOffset || ((_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.dialog.zOffset)
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$d);
  
    const preDivRef = useRef(null);
    const postDivRef = useRef(null);
    const cardRef = useRef(null);
    const handleFocus = useCallback(event => {
      const target = event.target;
      const cardElement = cardRef.current;
  
      if (!cardElement) {
        return;
      }
  
      if (target === preDivRef.current) {
        focusLastDescendant(cardElement);
        return;
      }
  
      if (target === postDivRef.current) {
        focusFirstDescendant(cardElement);
        return;
      }
    }, []);
    const labelId = `${id}_label`;
    return /*#__PURE__*/React.createElement(Portal, {
      __unstable_name: portal
    }, /*#__PURE__*/React.createElement(Root$7, _extends({}, restProps, {
      "$padding": padding,
      "$position": position,
      "aria-labelledby": labelId,
      "aria-modal": true,
      "data-ui": "Dialog",
      id: id,
      onFocus: handleFocus,
      ref: ref,
      role: "dialog",
      zOffset: zOffset
    }), /*#__PURE__*/React.createElement("div", {
      ref: preDivRef,
      tabIndex: 0
    }), /*#__PURE__*/React.createElement(DialogCard, {
      __unstable_autoFocus: autoFocus,
      __unstable_hideCloseButton: hideCloseButton,
      contentRef: contentRef,
      footer: footer,
      header: header,
      id: id,
      onClickOutside: onClickOutside,
      onClose: onClose,
      radius: cardRadius,
      ref: cardRef,
      scheme: scheme,
      shadow: cardShadow,
      width: width
    }, children), /*#__PURE__*/React.createElement("div", {
      ref: postDivRef,
      tabIndex: 0
    })));
  });
  
  /**
   * This API might change. DO NOT USE IN PRODUCTION.
   * @beta
   */
  
  function DialogProvider(props) {
    const {
      children,
      position,
      zOffset
    } = props;
    const contextValue = useMemo(() => ({
      version: 0.0,
      position,
      zOffset
    }), [position, zOffset]);
    return /*#__PURE__*/React.createElement(DialogContext.Provider, {
      value: contextValue
    }, children);
  }
  
  const _excluded$c = ["fontSize", "keys", "padding", "radius", "space"];
  
  let _$9 = t => t,
      _t$9,
      _t2$5;
  const Root$6 = styled.kbd(_t$9 || (_t$9 = _$9`
    &:not([hidden]) {
      display: block;
    }
    font: inherit;
  `));
  const Key = styled(KBD)(_t2$5 || (_t2$5 = _$9`
    &:not([hidden]) {
      display: block;
    }
  `));
  /**
   * @public
   */
  
  const Hotkeys = /*#__PURE__*/forwardRef(function Hotkeys(props, ref) {
    const {
      fontSize,
      keys,
      padding,
      radius,
      space = 1
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$c);
  
    if (!keys || keys.length === 0) {
      return /*#__PURE__*/React.createElement(React.Fragment, null);
    }
  
    return /*#__PURE__*/React.createElement(Root$6, _extends({
      "data-ui": "Hotkeys"
    }, restProps, {
      ref: ref
    }), /*#__PURE__*/React.createElement(Inline, {
      as: "span",
      space: space
    }, keys.map((key, i) => /*#__PURE__*/React.createElement(Key, {
      fontSize: fontSize,
      key: i,
      padding: padding,
      radius: radius
    }, key))));
  });
  
  /**
   * @internal
   */
  
  function _isFocusable(element) {
    return isHTMLAnchorElement(element) && element.getAttribute('data-disabled') !== 'true' || isHTMLButtonElement(element) && !element.disabled;
  }
  /**
   * @internal
   */
  
  
  function _getFocusableElements(elements) {
    return elements.filter(_isFocusable);
  }
  /**
   * @internal
   */
  
  function _getDOMPath(rootElement, el) {
    const path = [];
    let e = el;
  
    while (e !== rootElement) {
      const parentElement = e.parentElement;
      if (!parentElement) return path;
      const children = Array.from(parentElement.childNodes);
      const index = children.indexOf(e);
      path.unshift(index);
  
      if (parentElement === rootElement) {
        return path;
      }
  
      e = parentElement;
    }
  
    return path;
  }
  const EMPTY_PATH = [];
  /**
   * @internal
   */
  
  function _sortElements(rootElement, elements) {
    if (!rootElement) return;
    const map = new WeakMap();
  
    for (const el of elements) {
      map.set(el, _getDOMPath(rootElement, el));
    }
  
    const _sort = (a, b) => {
      const _a = map.get(a) || EMPTY_PATH;
  
      const _b = map.get(b) || EMPTY_PATH;
  
      const len = Math.max(_a.length, _b.length); // Loop until there are different indexes
  
      for (let i = 0; i < len; i += 1) {
        const aIndex = _a[i] || -1;
        const bIndex = _b[i] || -1;
  
        if (aIndex !== bIndex) {
          return aIndex - bIndex;
        }
      }
  
      return 0;
    };
  
    elements.sort(_sort);
  }
  
  const key$2 = Symbol.for('@sanity/ui/context/menu');
  globalScope[key$2] = globalScope[key$2] || /*#__PURE__*/createContext(null);
  const MenuContext = globalScope[key$2];
  
  const _excluded$b = ["children", "focusFirst", "focusLast", "onClickOutside", "onEscape", "onItemClick", "onItemSelect", "onKeyDown", "originElement", "padding", "registerElement", "shouldFocus", "space"];
  
  let _$8 = t => t,
      _t$8;
  const Root$5 = styled(Box)(_t$8 || (_t$8 = _$8`
    outline: none;
    overflow: auto;
  `));
  /**
   * @public
   */
  
  const Menu = /*#__PURE__*/forwardRef(function Menu(props, ref) {
    const {
      children,
      onClickOutside,
      onEscape,
      onItemClick,
      onItemSelect,
      onKeyDown,
      originElement,
      padding = 1,
      registerElement,
      shouldFocus = props.focusFirst && 'first' || props.focusLast && 'last' || null,
      space = 1
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$b);
  
    const {
      isTopLayer
    } = useLayer();
    const [rootElement, setRootElement] = useState(null);
    const elementsRef = useRef([]);
    const [activeIndex, setActiveIndex] = useState(-1);
    const activeIndexRef = useRef(activeIndex);
    const activeElement = elementsRef.current[activeIndex] || null;
    const activeElementRef = useRef(activeElement);
    const mounted = Boolean(rootElement);
    const setRef = useCallback(el => {
      setRootElement(el);
      if (typeof ref === 'function') ref(el);else if (ref) ref.current = el;
    }, [ref]);
    const mount = useCallback((element, selected) => {
      if (!element) return () => undefined;
  
      if (elementsRef.current.indexOf(element) === -1) {
        elementsRef.current.push(element);
  
        _sortElements(rootElement, elementsRef.current);
      }
  
      if (selected) {
        const selectedIndex = elementsRef.current.indexOf(element);
        setActiveIndex(selectedIndex);
        activeIndexRef.current = selectedIndex;
      }
  
      return () => {
        const idx = elementsRef.current.indexOf(element);
  
        if (idx > -1) {
          elementsRef.current.splice(idx, 1);
        }
      };
    }, [rootElement]);
    const handleKeyDown = useCallback(event => {
      // Move focus to the element that opened the menu before handling the `Tab` press
      if (event.key === 'Tab') {
        if (originElement) {
          originElement.focus();
        }
  
        return;
      } // Move focus to the first focusable menuitem
  
  
      if (event.key === 'Home') {
        event.preventDefault();
        event.stopPropagation();
  
        const focusableElements = _getFocusableElements(elementsRef.current);
  
        const el = focusableElements[0];
        if (!el) return;
        const currentIndex = elementsRef.current.indexOf(el);
        setActiveIndex(currentIndex);
        activeIndexRef.current = currentIndex;
        return;
      } // Move focus to the last focusable menuitem
  
  
      if (event.key === 'End') {
        event.preventDefault();
        event.stopPropagation();
  
        const focusableElements = _getFocusableElements(elementsRef.current);
  
        const el = focusableElements[focusableElements.length - 1];
        if (!el) return;
        const currentIndex = elementsRef.current.indexOf(el);
        setActiveIndex(currentIndex);
        activeIndexRef.current = currentIndex;
        return;
      }
  
      if (event.key === 'ArrowUp') {
        event.preventDefault();
        event.stopPropagation();
  
        const focusableElements = _getFocusableElements(elementsRef.current);
  
        const focusableLen = focusableElements.length;
        if (focusableLen === 0) return;
        const focusedElement = elementsRef.current[activeIndex];
        let focusedIndex = focusableElements.indexOf(focusedElement);
        focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen;
        const el = focusableElements[focusedIndex];
        const currentIndex = elementsRef.current.indexOf(el);
        setActiveIndex(currentIndex);
        activeIndexRef.current = currentIndex;
        return;
      }
  
      if (event.key === 'ArrowDown') {
        event.preventDefault();
        event.stopPropagation();
  
        const focusableElements = _getFocusableElements(elementsRef.current);
  
        const focusableLen = focusableElements.length;
        if (focusableLen === 0) return;
        const focusedElement = elementsRef.current[activeIndex];
        let focusedIndex = focusableElements.indexOf(focusedElement);
        focusedIndex = (focusedIndex + 1) % focusableLen;
        const el = focusableElements[focusedIndex];
        const currentIndex = elementsRef.current.indexOf(el);
        setActiveIndex(currentIndex);
        activeIndexRef.current = currentIndex;
        return;
      }
  
      if (onKeyDown) {
        onKeyDown(event);
      }
    }, [activeIndex, onKeyDown, originElement]);
    const handleItemMouseEnter = useCallback(event => {
      const element = event.currentTarget;
      const currentIndex = elementsRef.current.indexOf(element);
      setActiveIndex(currentIndex);
      activeIndexRef.current = currentIndex;
    }, []);
    const handleItemMouseLeave = useCallback(() => {
      rootElement == null ? void 0 : rootElement.focus();
      setActiveIndex(-1);
      activeIndexRef.current = -1;
    }, [rootElement]); // Trigger `onItemSelect` when active index changes
  
    useEffect(() => {
      if (onItemSelect) onItemSelect(activeIndex);
    }, [activeIndex, onItemSelect]);
    useEffect(() => {
      activeElementRef.current = activeElement;
    }, [activeElement]); // Set focus on the currently active element
  
    useEffect(() => {
      if (!mounted) return;
      const rafId = window.requestAnimationFrame(() => {
        const _activeIndex = activeIndexRef.current;
  
        if (_activeIndex === -1) {
          if (shouldFocus === 'first') {
            const focusableElements = _getFocusableElements(elementsRef.current);
  
            const el = focusableElements[0];
  
            if (el) {
              const currentIndex = elementsRef.current.indexOf(el);
              setActiveIndex(currentIndex);
              activeIndexRef.current = currentIndex;
            }
          }
  
          if (shouldFocus === 'last') {
            const focusableElements = _getFocusableElements(elementsRef.current);
  
            const el = focusableElements[focusableElements.length - 1];
  
            if (el) {
              const currentIndex = elementsRef.current.indexOf(el);
              setActiveIndex(currentIndex);
              activeIndexRef.current = currentIndex;
            }
          }
  
          return;
        }
  
        const element = elementsRef.current[_activeIndex] || null;
        element == null ? void 0 : element.focus();
      });
      return () => {
        window.cancelAnimationFrame(rafId);
      };
    }, [activeIndex, mounted, shouldFocus]);
    useClickOutside(useCallback(event => isTopLayer && onClickOutside && onClickOutside(event), [isTopLayer, onClickOutside]), [rootElement]);
    useGlobalKeyDown(useCallback(event => {
      if (!isTopLayer) return;
  
      if (event.key === 'Escape') {
        event.stopPropagation();
        if (onEscape) onEscape();
      }
    }, [isTopLayer, onEscape]));
    useEffect(() => {
      if (!rootElement || !registerElement) return;
      return registerElement(rootElement);
    }, [registerElement, rootElement]);
    const value = useMemo(() => ({
      version: 0.0,
      activeElement,
      activeIndex,
      mount,
      onClickOutside,
      onEscape,
      onMouseEnter: handleItemMouseEnter,
      onMouseLeave: handleItemMouseLeave,
      onItemClick,
      registerElement
    }), [activeElement, activeIndex, mount, handleItemMouseEnter, handleItemMouseLeave, onClickOutside, onEscape, onItemClick, registerElement]);
    return /*#__PURE__*/React.createElement(MenuContext.Provider, {
      value: value
    }, /*#__PURE__*/React.createElement(Root$5, _extends({
      "data-ui": "Menu"
    }, restProps, {
      onKeyDown: handleKeyDown,
      padding: padding,
      ref: setRef,
      role: "menu",
      tabIndex: -1
    }), /*#__PURE__*/React.createElement(Stack, {
      space: space
    }, children)));
  });
  
  /**
   * @public
   */
  
  const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(props, ref) {
    const {
      __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = false,
      boundaryElement,
      button: buttonProp,
      id,
      menu: menuProp,
      onClose,
      placement,
      popoverScheme,
      portal,
      popover,
      popoverRadius,
      preventOverflow
    } = props;
    const [open, setOpen] = useState(false);
    const [shouldFocus, setShouldFocus] = useState(null);
    const [buttonElement, setButtonElement] = useState(null);
    const [menuElements, setChildMenuElements] = useState([]);
    const openRef = useRef(open);
    useEffect(() => {
      if (onClose && !open && openRef.current) {
        onClose();
      }
    }, [onClose, open]);
    useEffect(() => {
      openRef.current = open;
    }, [open]);
    const handleButtonClick = useCallback(() => {
      setOpen(v => !v);
      setShouldFocus(null);
    }, []);
    const handleButtonKeyDown = useCallback(event => {
      // On `ArrowDown`, `Enter` and `Space`
      // - Opens menu and moves focus to first menuitem
      if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        setOpen(true);
        setShouldFocus('first');
        return;
      } // On `ArrowUp`
      // - 	Opens menu and moves focus to last menuitem
  
  
      if (event.key === 'ArrowUp') {
        event.preventDefault();
        setOpen(true);
        setShouldFocus('last');
        return;
      }
    }, []);
    const handleMenuClickOutside = useCallback(event => {
      const target = event.target;
  
      if (!(target instanceof Node)) {
        return;
      }
  
      if (buttonElement && (target === buttonElement || buttonElement.contains(target))) {
        return;
      }
  
      for (const el of menuElements) {
        if (target === el || el.contains(target)) {
          return;
        }
      }
  
      setOpen(false);
    }, [buttonElement, menuElements]);
    const handleMenuEscape = useCallback(() => {
      setOpen(false);
      if (disableRestoreFocusOnClose) return;
      if (buttonElement) buttonElement.focus();
    }, [buttonElement, disableRestoreFocusOnClose]);
    const handleBlur = useCallback(event => {
      const target = event.relatedTarget;
  
      if (!(target instanceof Node)) {
        return;
      }
  
      for (const el of menuElements) {
        if (el === target || el.contains(target)) {
          return;
        }
      }
  
      setOpen(false);
    }, [menuElements]);
    const handleItemClick = useCallback(() => {
      setOpen(false);
      if (disableRestoreFocusOnClose) return;
      if (buttonElement) buttonElement.focus();
    }, [buttonElement, disableRestoreFocusOnClose]);
    const registerElement = useCallback(el => {
      setChildMenuElements(els => els.concat([el]));
      return () => {
        setChildMenuElements(els => {
          return els.filter(_el => _el !== el);
        });
      };
    }, []);
    const menuProps = useMemo(() => ({
      'aria-labelledby': id,
      onBlurCapture: handleBlur,
      onClickOutside: handleMenuClickOutside,
      onEscape: handleMenuEscape,
      onItemClick: handleItemClick,
      originElement: buttonElement,
      registerElement,
      shouldFocus
    }), [buttonElement, handleMenuClickOutside, handleMenuEscape, handleItemClick, id, handleBlur, registerElement, shouldFocus]);
    const menu = isElement(menuProp) ? /*#__PURE__*/cloneElement(menuProp, menuProps) : null;
    const setButtonRef = useCallback(el => {
      if (typeof ref === 'function') {
        ref(el);
      } else if (ref) {
        ref.current = el;
      }
  
      setButtonElement(el);
    }, [ref]);
    const button = useMemo(() => isElement(buttonProp) ? /*#__PURE__*/cloneElement(buttonProp, {
      'data-ui': 'MenuButton',
      id,
      onClick: handleButtonClick,
      onKeyDown: handleButtonKeyDown,
      'aria-haspopup': true,
      'aria-expanded': open,
      ref: setButtonRef,
      selected: open
    }) : null, [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef]);
    const popoverProps = useMemo(() => {
      return _extends({
        boundaryElement,
        placement,
        portal,
        radius: popoverRadius,
        overflow: preventOverflow,
        scheme: popoverScheme
      }, popover || {});
    }, [boundaryElement, placement, popover, popoverRadius, portal, preventOverflow, popoverScheme]);
    return /*#__PURE__*/React.createElement(Popover, _extends({}, popoverProps, {
      content: menu,
      "data-ui": "MenuButton__popover",
      open: open
    }), button || /*#__PURE__*/React.createElement(React.Fragment, null));
  });
  
  let _$7 = t => t,
      _t$7;
  /**
   * @public
   */
  
  const MenuDivider = styled.hr(_t$7 || (_t$7 = _$7`
    height: 1px;
    border: 0;
    background: var(--card-hairline-soft-color);
    margin: 0;
  `));
  
  let _$6 = t => t,
      _t$6,
      _t2$4;
  function selectableBaseStyle() {
    return css(_t$6 || (_t$6 = _$6`
      background-color: inherit;
      color: inherit;
  
      &[data-as='button'] {
        -webkit-font-smoothing: inherit;
        appearance: none;
        outline: none;
        font: inherit;
        text-align: inherit;
        border: 0;
        width: stretch;
      }
  
      /* &:is(a) */
      &[data-as='a'] {
        text-decoration: none;
      }
    `));
  }
  function selectableColorStyle(props) {
    var _theme$sanity$styles, _theme$sanity$styles$;
  
    const {
      $tone,
      theme
    } = props;
    const {
      base,
      muted,
      selectable
    } = theme.sanity.color; // @todo: remove use of `muted` here
  
    const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
    return css(_t2$4 || (_t2$4 = _$6`
      ${0}
  
      background-color: var(--card-bg-color);
      color: var(--card-fg-color);
      outline: none;
  
      /* &:is(button) */
      &[data-as='button'] {
        &:disabled {
          ${0}
        }
  
        &:not(:disabled) {
          &[aria-pressed='true'] {
            ${0}
          }
  
          &[data-selected],
          &[aria-selected='true'] > & {
            ${0}
          }
  
          @media (hover: hover) {
            &:not([data-selected]) {
              &:hover {
                ${0}
              }
  
              &:active {
                ${0}
              }
            }
          }
        }
      }
  
      /* &:is(a) */
      &[data-as='a'] {
        &[data-disabled] {
          ${0}
        }
  
        &:not([data-disabled]) {
          &[data-pressed] {
            ${0}
          }
  
          &[data-selected] {
            ${0}
          }
  
          @media (hover: hover) {
            &:not([data-selected]) {
              &:hover {
                ${0}
              }
  
              &:active {
                ${0}
              }
            }
          }
        }
      }
  
      ${0}
    `), _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), (_theme$sanity$styles = theme.sanity.styles) == null ? void 0 : (_theme$sanity$styles$ = _theme$sanity$styles.card) == null ? void 0 : _theme$sanity$styles$.root);
  }
  
  /**
   * @internal
   */
  
  const Selectable = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
  
  function useMenu() {
    const value = useContext(MenuContext);
  
    if (!value) {
      throw new Error('useMenu(): missing context value');
    } // NOTE: This check is for future-compatiblity
    // - If the value is not an object, it’s not compatible with the current version
    // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
  
  
    if (!isRecord(value) || value.version !== 0.0) {
      throw new Error('useMenu(): the context value is not compatible');
    }
  
    return value;
  }
  
  const _excluded$a = ["as", "children", "fontSize", "onClick", "padding", "popover", "radius", "text", "tone"];
  
  let _$5 = t => t,
      _t$5;
  const MOUSE_LEAVE_TIMEOUT = 1000;
  const TextContainer = styled.span(_t$5 || (_t$5 = _$5`
    &:not([hidden]) {
      display: flex;
    }
  
    & > div:first-child {
      flex: 1;
      min-width: 0;
    }
  `));
  /**
   * @public
   */
  
  function MenuGroup(props) {
    const {
      as = 'button',
      children,
      fontSize,
      onClick,
      padding = 3,
      popover = {},
      radius = 2,
      text,
      tone = 'default'
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$a);
  
    const [open, setOpen] = useState(false);
    const {
      activeElement,
      mount,
      onClickOutside,
      onEscape,
      onItemClick,
      onMouseEnter,
      onMouseLeave,
      registerElement
    } = useMenu();
    const [rootElement, setRootElement] = useState(null);
    const mouseLeaveTimeoutRef = useRef(null);
    const shouldFocusRef = useRef(null);
    const active = Boolean(activeElement) && activeElement === rootElement; // const selected = active || open
    // Register the element
  
    useEffect(() => mount(rootElement), [mount, rootElement]);
    const handleMouseEnter = useCallback(event => {
      if (mouseLeaveTimeoutRef.current) {
        clearTimeout(mouseLeaveTimeoutRef.current);
        mouseLeaveTimeoutRef.current = null;
      }
  
      onMouseEnter(event);
      setOpen(true);
    }, [onMouseEnter]);
    const handleMouseLeave = useCallback(event => {
      onMouseLeave(event);
      mouseLeaveTimeoutRef.current = setTimeout(() => {
        setOpen(false);
      }, MOUSE_LEAVE_TIMEOUT);
    }, [onMouseLeave]);
    const handleMenuKeyDown = useCallback(event => {
      if (event.key === 'ArrowLeft') {
        event.stopPropagation();
        setOpen(false);
        requestAnimationFrame(() => {
          rootElement == null ? void 0 : rootElement.focus();
        });
      }
    }, [rootElement]);
    const handleMenuMouseEnter = useCallback(() => {
      if (mouseLeaveTimeoutRef.current) {
        clearTimeout(mouseLeaveTimeoutRef.current);
        mouseLeaveTimeoutRef.current = null;
      }
    }, []);
    const handleMenuMouseLeave = useCallback(() => {
      mouseLeaveTimeoutRef.current = setTimeout(() => {
        setOpen(false);
      }, MOUSE_LEAVE_TIMEOUT);
    }, []);
    const handleClick = useCallback(event => {
      if (onClick) onClick(event);
      shouldFocusRef.current = 'first';
      setOpen(true);
      requestAnimationFrame(() => {
        shouldFocusRef.current = null;
      });
    }, [onClick]);
    const handleItemClick = useCallback(() => {
      setOpen(false);
      if (onItemClick) onItemClick();
    }, [onItemClick]);
    useEffect(() => {
      return () => {
        if (mouseLeaveTimeoutRef.current !== null) {
          clearTimeout(mouseLeaveTimeoutRef.current);
          mouseLeaveTimeoutRef.current = null;
        }
      };
    }, []);
    const content = /*#__PURE__*/React.createElement(Menu, {
      onClickOutside: onClickOutside,
      onEscape: onEscape,
      onItemClick: handleItemClick,
      onKeyDown: handleMenuKeyDown,
      onMouseEnter: handleMenuMouseEnter,
      onMouseLeave: handleMenuMouseLeave,
      registerElement: registerElement,
      shouldFocus: shouldFocusRef.current
    }, children);
    const handleKeyDown = useCallback(event => {
      const target = event.currentTarget;
  
      if (document.activeElement !== target) {
        return;
      }
  
      if (event.key === 'ArrowRight') {
        shouldFocusRef.current = 'first';
        setOpen(true);
        requestAnimationFrame(() => {
          shouldFocusRef.current = null;
        });
        return;
      }
    }, []);
    return /*#__PURE__*/React.createElement(Popover, _extends({}, popover, {
      content: content,
      "data-ui": "MenuGroup__popover",
      open: open
    }), /*#__PURE__*/React.createElement(Selectable, _extends({
      "data-as": as,
      "data-ui": "MenuGroup",
      forwardedAs: as
    }, restProps, {
      "aria-pressed": as === 'button' ? !active && open : undefined,
      "data-pressed": as !== 'button' ? !active && open : undefined,
      "data-selected": active ? '' : undefined,
      "$radius": radius,
      "$tone": tone,
      onClick: handleClick,
      onKeyDown: handleKeyDown,
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave,
      ref: setRootElement,
      tabIndex: -1,
      type: as === 'button' ? 'button' : undefined
    }), /*#__PURE__*/React.createElement(Box, {
      padding: padding
    }, /*#__PURE__*/React.createElement(TextContainer, null, /*#__PURE__*/React.createElement(Text, {
      size: fontSize
    }, text), /*#__PURE__*/React.createElement(Text, {
      size: fontSize
    }, /*#__PURE__*/React.createElement(ChevronRightIcon, null))))));
  }
  
  const _excluded$9 = ["as", "children", "disabled", "fontSize", "hotkeys", "icon", "iconRight", "onClick", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "pressed", "radius", "selected", "space", "text", "tone"];
  /**
   * @public
   */
  
  const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forwardedRef) {
    const {
      as = 'button',
      children,
      disabled,
      fontSize = 2,
      hotkeys,
      icon,
      iconRight,
      onClick,
      padding = 3,
      paddingX,
      paddingY,
      paddingTop,
      paddingRight,
      paddingBottom,
      paddingLeft,
      pressed,
      radius = 2,
      selected: selectedProp,
      space = 3,
      text,
      tone = 'default'
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$9);
  
    const {
      activeElement,
      mount,
      onItemClick,
      onMouseEnter,
      onMouseLeave
    } = useMenu();
    const [rootElement, setRootElement] = useState(null);
    const selected = Boolean(activeElement) && rootElement === activeElement;
    useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
    const ref = useForwardedRef(forwardedRef);
    const handleClick = useCallback(event => {
      if (disabled) return;
      if (onClick) onClick(event);
      if (onItemClick) onItemClick();
    }, [disabled, onClick, onItemClick]);
    const paddingProps = useMemo(() => ({
      padding,
      paddingX,
      paddingY,
      paddingTop,
      paddingRight,
      paddingBottom,
      paddingLeft
    }), [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]);
    const setRef = useCallback(el => {
      ref.current = el;
      setRootElement(el);
    }, [ref]);
    return /*#__PURE__*/React.createElement(Selectable, _extends({
      "data-as": as,
      "data-ui": "MenuItem",
      forwardedAs: as
    }, restProps, {
      "aria-pressed": as === 'button' && pressed,
      "data-pressed": as !== 'button' && pressed ? '' : undefined,
      "data-selected": selected ? '' : undefined,
      "data-disabled": disabled ? '' : undefined,
      "$radius": radius,
      "$tone": tone,
      disabled: disabled,
      onClick: handleClick,
      onMouseEnter: onMouseEnter,
      onMouseLeave: onMouseLeave,
      padding: 0,
      ref: setRef,
      role: "menuitem",
      tabIndex: -1,
      type: as === 'button' ? 'button' : undefined
    }), (icon || text || iconRight) && /*#__PURE__*/React.createElement(Box, _extends({
      as: "span"
    }, paddingProps), /*#__PURE__*/React.createElement(Flex, {
      as: "span"
    }, icon && /*#__PURE__*/React.createElement(Text, {
      size: fontSize
    }, /*#__PURE__*/isValidElement(icon) && icon, isValidElementType(icon) && /*#__PURE__*/createElement(icon)), text && /*#__PURE__*/React.createElement(Box, {
      flex: 1,
      marginLeft: icon ? space : undefined,
      marginRight: iconRight ? space : undefined
    }, /*#__PURE__*/React.createElement(Text, {
      size: fontSize,
      textOverflow: "ellipsis"
    }, text)), hotkeys && /*#__PURE__*/React.createElement(Box, {
      marginLeft: space,
      style: {
        marginTop: -4,
        marginBottom: -4
      }
    }, /*#__PURE__*/React.createElement(Hotkeys, {
      fontSize: fontSize,
      keys: hotkeys
    })), iconRight && /*#__PURE__*/React.createElement(Text, {
      size: fontSize
    }, /*#__PURE__*/isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && /*#__PURE__*/createElement(iconRight)))), children && /*#__PURE__*/React.createElement(Box, _extends({
      as: "span"
    }, paddingProps), children));
  });
  
  let _$4 = t => t,
      _t$4,
      _t2$3,
      _t3$1,
      _t4;
  const keyframe = keyframes(_t$4 || (_t$4 = _$4`
    0% {
      background-position: 100%;
    }
    100% {
      background-position: -100%;
    }
  `));
  const animation = css(_t2$3 || (_t2$3 = _$4`
    background-image: linear-gradient(
      to right,
      var(--card-skeleton-color-from),
      var(--card-skeleton-color-to),
      var(--card-skeleton-color-from),
      var(--card-skeleton-color-from),
      var(--card-skeleton-color-from)
    );
    background-position: 100%;
    background-size: 200% 100%;
    background-attachment: fixed;
    animation-name: ${0};
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 2000ms;
  `), keyframe);
  /**
   * This API might change. DO NOT USE IN PRODUCTION.
   * @beta
   */
  
  const skeletonStyle = css(_t3$1 || (_t3$1 = _$4`
    opacity: ${0};
    transition: opacity 200ms ease-in;
  
    @media screen and (prefers-reduced-motion: no-preference) {
      ${0}
    }
  
    @media screen and (prefers-reduced-motion: reduce) {
      background-color: var(--card-skeleton-color-from);
    }
  `), ({
    $visible
  }) => $visible ? 1 : 0, ({
    $animated
  }) => $animated ? animation : css(_t4 || (_t4 = _$4`
              background-color: var(--card-skeleton-color-from);
            `)));
  
  const _excluded$8 = ["animated", "delay", "radius"];
  const Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle);
  /**
   * This API might change. DO NOT USE IN PRODUCTION.
   * @beta
   */
  
  const Skeleton = /*#__PURE__*/forwardRef(function Skeleton(props, ref) {
    const {
      animated = false,
      delay,
      radius
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$8);
  
    const [visible, setVisible] = useState(delay ? false : true);
    useEffect(() => {
      if (!delay) {
        return setVisible(true);
      }
  
      const timeout = setTimeout(() => {
        setVisible(true);
      }, delay);
      return () => {
        clearTimeout(timeout);
      };
    }, [delay]);
    return /*#__PURE__*/React.createElement(Root$4, _extends({}, restProps, {
      "$animated": animated,
      "$radius": radius,
      "$visible": visible,
      ref: ref
    }));
  });
  
  const _excluded$7 = ["size"],
        _excluded2 = ["size"],
        _excluded3 = ["size"],
        _excluded4 = ["size"];
  const Root$3 = styled(Skeleton)(({
    $size,
    $style,
    theme
  }) => {
    const {
      media
    } = theme.sanity;
    const font = theme.sanity.fonts[$style];
    const styles = responsive(media, $size, sizeIndex => {
      const fontSize = font.sizes[sizeIndex];
      const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight;
      return {
        height: capHeight
      };
    });
    return styles;
  });
  /**
   * This API might change. DO NOT USE IN PRODUCTION.
   * @beta
   */
  
  const TextSkeleton = /*#__PURE__*/forwardRef(function TextSkeleton(props, ref) {
    const {
      size = 2
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$7);
  
    const $size = useResponsiveProp(size);
    return /*#__PURE__*/React.createElement(Root$3, _extends({}, restProps, {
      "$size": $size,
      ref: ref,
      "$style": "text"
    }));
  });
  /**
   * This API might change. DO NOT USE IN PRODUCTION.
   * @beta
   */
  
  const LabelSkeleton = /*#__PURE__*/forwardRef(function TextSkeleton(props, ref) {
    const {
      size = 2
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded2);
  
    const $size = useResponsiveProp(size);
    return /*#__PURE__*/React.createElement(Root$3, _extends({}, restProps, {
      "$size": $size,
      ref: ref,
      "$style": "label"
    }));
  });
  /**
   * This API might change. DO NOT USE IN PRODUCTION.
   * @beta
   */
  
  const HeadingSkeleton = /*#__PURE__*/forwardRef(function TextSkeleton(props, ref) {
    const {
      size = 2
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded3);
  
    const $size = useResponsiveProp(size);
    return /*#__PURE__*/React.createElement(Root$3, _extends({}, restProps, {
      "$size": $size,
      ref: ref,
      "$style": "heading"
    }));
  });
  /**
   * This API might change. DO NOT USE IN PRODUCTION.
   * @beta
   */
  
  const CodeSkeleton = /*#__PURE__*/forwardRef(function TextSkeleton(props, ref) {
    const {
      size = 2
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded4);
  
    const $size = useResponsiveProp(size);
    return /*#__PURE__*/React.createElement(Root$3, _extends({}, restProps, {
      "$size": $size,
      ref: ref,
      "$style": "code"
    }));
  });
  
  const _excluded$6 = ["icon", "id", "focused", "fontSize", "label", "onClick", "onFocus", "padding", "selected"];
  /**
   * @public
   */
  
  const Tab = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
    const {
      icon,
      id,
      focused,
      fontSize,
      label,
      onClick,
      onFocus,
      padding = 2,
      selected
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$6);
  
    const elementRef = useRef(null);
    const focusedRef = useRef(false);
    const handleBlur = useCallback(() => {
      focusedRef.current = false;
    }, []);
    const handleFocus = useCallback(event => {
      focusedRef.current = true;
      if (onFocus) onFocus(event);
    }, [onFocus]);
    const ref = useForwardedRef(forwardedRef);
    useEffect(() => {
      if (focused && !focusedRef.current) {
        if (elementRef.current) elementRef.current.focus();
        focusedRef.current = true;
      }
    }, [focused]);
  
    const setRef = el => {
      elementRef.current = el;
      ref.current = el;
    };
  
    return /*#__PURE__*/React.createElement(Button, _extends({
      "data-ui": "Tab"
    }, restProps, {
      "aria-selected": selected ? 'true' : 'false',
      fontSize: fontSize,
      icon: icon,
      id: id,
      mode: "bleed",
      onClick: onClick,
      onBlur: handleBlur,
      onFocus: handleFocus,
      padding: padding,
      ref: setRef,
      role: "tab",
      selected: selected,
      tabIndex: selected ? 0 : -1,
      text: label,
      type: "button"
    }));
  });
  
  const _excluded$5 = ["children"];
  
  function _isReactElement(node) {
    return Boolean(node);
  }
  /**
   * @public
   */
  
  
  const TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
    const {
      children: childrenProp
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$5);
  
    const [focusedIndex, setFocusedIndex] = useState(-1);
    const children = useMemo(() => childrenProp.filter(_isReactElement), [childrenProp]);
    const tabs = children.map((child, childIndex) => /*#__PURE__*/cloneElement(child, {
      focused: focusedIndex === childIndex,
      key: childIndex,
      onFocus: () => handleTabFocus(childIndex)
    }));
    const numTabs = tabs.length;
    const handleTabFocus = useCallback(tabIdx => {
      setFocusedIndex(tabIdx);
    }, []);
    const handleKeyDown = useCallback(event => {
      if (event.key === 'ArrowLeft') {
        setFocusedIndex(prevIndex => (prevIndex + numTabs - 1) % numTabs);
      }
  
      if (event.key === 'ArrowRight') {
        setFocusedIndex(prevIndex => (prevIndex + 1) % numTabs);
      }
    }, [numTabs]);
    return /*#__PURE__*/React.createElement(Inline, _extends({
      "data-ui": "TabList"
    }, restProps, {
      onKeyDown: handleKeyDown,
      ref: ref,
      role: "tablist"
    }), tabs);
  });
  
  const _excluded$4 = ["flex"];
  /**
   * @public
   */
  
  const TabPanel = /*#__PURE__*/forwardRef(function TabPanel(props, ref) {
    const {
      flex
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$4);
  
    return /*#__PURE__*/React.createElement(Box, _extends({
      "data-ui": "TabPanel"
    }, restProps, {
      flex: flex,
      ref: ref,
      role: "tabpanel",
      tabIndex: props.tabIndex === undefined ? 0 : props.tabIndex
    }), props.children);
  });
  
  const _excluded$3 = ["closable", "description", "onClose", "title", "status"];
  
  let _$3 = t => t,
      _t$3,
      _t2$2;
  const STATUS_CARD_TONE = {
    error: 'critical',
    warning: 'caution',
    success: 'positive',
    info: 'primary'
  };
  const ROLES = {
    error: 'alert',
    warning: 'alert',
    success: 'alert',
    info: 'alert'
  };
  const Root$2 = styled(Card)(_t$3 || (_t$3 = _$3`
    pointer-events: all;
  `));
  const TextBox = styled(Flex)(_t2$2 || (_t2$2 = _$3`
    overflow-x: auto;
  `));
  /**
   * @public
   */
  
  function Toast(props) {
    const {
      closable,
      description,
      onClose,
      title,
      status
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$3);
  
    const cardTone = status ? STATUS_CARD_TONE[status] : 'default';
    const role = status ? ROLES[status] : 'status';
    return /*#__PURE__*/React.createElement(Root$2, _extends({
      "data-ui": "Toast",
      role: role
    }, restProps, {
      marginTop: 3,
      radius: 2,
      shadow: 2,
      tone: cardTone
    }), /*#__PURE__*/React.createElement(Flex, {
      align: "flex-start"
    }, /*#__PURE__*/React.createElement(TextBox, {
      flex: 1,
      padding: 3
    }, /*#__PURE__*/React.createElement(Stack, {
      space: 3
    }, title && /*#__PURE__*/React.createElement(Text, {
      weight: "semibold"
    }, title), description && /*#__PURE__*/React.createElement(Text, {
      muted: true,
      size: 1
    }, description))), closable && /*#__PURE__*/React.createElement(Box, {
      padding: 1
    }, /*#__PURE__*/React.createElement(Button, {
      as: "button",
      icon: CloseIcon,
      mode: "bleed",
      padding: 2,
      onClick: onClose,
      style: {
        verticalAlign: 'top'
      }
    }))));
  }
  
  const key$1 = Symbol.for('@sanity/ui/context/toast');
  globalScope[key$1] = globalScope[key$1] || /*#__PURE__*/createContext(null);
  const ToastContext = globalScope[key$1];
  
  let _$2 = t => t,
      _t$2,
      _t2$1;
  const Root$1 = styled(Layer)(_t$2 || (_t$2 = _$2`
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  `));
  const ToastContainer = styled.div(_t2$1 || (_t2$1 = _$2`
    box-sizing: border-box;
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 420px;
    width: 100%;
  `));
  let toastId = 0;
  /**
   * @public
   */
  
  function ToastProvider(props) {
    const {
      children,
      padding = 4,
      paddingX,
      paddingY,
      zOffset
    } = props;
    const [state, setState] = useState({
      toasts: []
    });
    const toastsRef = useRef({});
    const push = useCallback(params => {
      const id = params.id || String(toastId++);
      const duration = params.duration || 5000;
  
      const dismiss = () => {
        var _toastsRef$current$id;
  
        const timeoutId = (_toastsRef$current$id = toastsRef.current[id]) == null ? void 0 : _toastsRef$current$id.timeoutId;
        setState(prevState => {
          const idx = prevState.toasts.findIndex(t => t.id === id);
  
          if (idx > -1) {
            const toasts = prevState.toasts.slice(0);
            toasts.splice(idx, 1);
            return _extends({}, prevState, {
              toasts
            });
          }
  
          return prevState;
        });
  
        if (timeoutId !== undefined) {
          clearTimeout(timeoutId);
          delete toastsRef.current[id];
        }
      };
  
      setState(prevState => {
        return _extends({}, prevState, {
          toasts: prevState.toasts.filter(t => t.id !== id).concat([{
            dismiss,
            id,
            params: _extends({}, params, {
              duration
            })
          }])
        });
      });
  
      if (toastsRef.current[id]) {
        clearTimeout(toastsRef.current[id].timeoutId);
        delete toastsRef.current[id];
      }
  
      toastsRef.current[id] = {
        timeoutId: setTimeout(dismiss, duration)
      };
      return id;
    }, []); // clear timeouts on unmount
  
    useEffect(() => () => {
      for (const {
        timeoutId
      } of Object.values(toastsRef.current)) {
        clearTimeout(timeoutId);
      }
  
      toastsRef.current = {};
    }, []);
    const value = useMemo(() => ({
      version: 0.0,
      push
    }), [push]);
    return /*#__PURE__*/React.createElement(ToastContext.Provider, {
      value: value
    }, children, /*#__PURE__*/React.createElement(Root$1, {
      "data-ui": "ToastProvider",
      zOffset: zOffset
    }, /*#__PURE__*/React.createElement(ToastContainer, null, /*#__PURE__*/React.createElement(Box, {
      padding: padding,
      paddingX: paddingX,
      paddingY: paddingY
    }, /*#__PURE__*/React.createElement(AnimatePresence, {
      initial: false
    }, state.toasts.map(({
      dismiss,
      id,
      params
    }) => /*#__PURE__*/React.createElement(motion.div, {
      animate: {
        opacity: 1,
        y: 0,
        scale: 1
      },
      exit: {
        opacity: 0,
        scale: 0.5,
        transition: {
          duration: 0.2
        }
      },
      initial: {
        opacity: 0,
        y: 32,
        scale: 0.25
      },
      key: id,
      layout: "position",
      transition: {
        type: 'spring',
        damping: 30,
        stiffness: 400
      }
    }, /*#__PURE__*/React.createElement(Toast, {
      closable: params.closable,
      description: params.description,
      onClose: dismiss,
      status: params.status,
      title: params.title
    }))))))));
  }
  
  /**
   * @public
   */
  
  function useToast() {
    const value = useContext(ToastContext);
  
    if (!value) {
      throw new Error('useToast(): missing context value');
    } // NOTE: This check is for future-compatiblity
    // - If the value is not an object, it’s not compatible with the current version
    // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
  
  
    if (!isRecord(value) || value.version !== 0.0) {
      throw new Error('useToast(): the context value is not compatible');
    }
  
    return value;
  }
  
  function _findPrevItemElement(state, itemElements, focusedElement) {
    const idx = itemElements.indexOf(focusedElement);
    const els = itemElements.slice(0, idx);
    const len = els.length;
  
    for (let i = len - 1; i >= 0; i -= 1) {
      const itemKey = els[i].getAttribute('data-tree-key');
  
      if (!itemKey) {
        continue;
      }
  
      const segments = itemKey.split('/');
      segments.pop();
      const p = [];
      let expanded = true;
  
      for (let j = 0; j < segments.length; j += 1) {
        var _state$k;
  
        p.push(segments[j]);
        const k = p.join('/');
  
        if (!((_state$k = state[k]) != null && _state$k.expanded)) {
          expanded = false;
          break;
        }
      }
  
      if (expanded) {
        return els[i];
      }
    }
  
    return null;
  }
  function _findNextItemElement(state, itemElements, focusedElement) {
    const idx = itemElements.indexOf(focusedElement);
    const els = itemElements.slice(idx);
    const len = itemElements.length;
  
    for (let i = 1; i < len; i += 1) {
      if (!els[i]) {
        continue;
      }
  
      const itemKey = els[i].getAttribute('data-tree-key');
  
      if (!itemKey) {
        continue;
      }
  
      const segments = itemKey.split('/');
      segments.pop();
      const p = [];
      let expanded = true;
  
      for (let j = 0; j < segments.length; j += 1) {
        var _state$k2;
  
        p.push(segments[j]);
        const k = p.join('/');
  
        if (!((_state$k2 = state[k]) != null && _state$k2.expanded)) {
          expanded = false;
          break;
        }
      }
  
      if (expanded) {
        return els[i];
      }
    }
  
    return null;
  }
  function _focusItemElement(el) {
    if (el.getAttribute('role') === 'treeitem') {
      el.focus();
    }
  
    if (el.getAttribute('role') === 'none') {
      const firstChild = el.firstChild;
  
      if (firstChild && firstChild instanceof HTMLElement) {
        firstChild.focus();
      }
    }
  }
  
  const key = Symbol.for('@sanity/ui/context/tree');
  globalScope[key] = globalScope[key] || /*#__PURE__*/createContext(null);
  /**
   * @internal
   */
  
  const TreeContext = globalScope[key];
  
  const _excluded$2 = ["children", "space"];
  /**
   * This API might change. DO NOT USE IN PRODUCTION.
   * @beta
   */
  
  function Tree(props) {
    const {
      children,
      space = 1
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$2);
  
    const [focusedElement, setFocusedElement] = useState(null);
    const path = useMemo(() => [], []);
    const rootRef = useRef(null);
    const [itemElements, setItemElements] = useState([]);
    const [state, setState] = useState({});
    const registerItem = useCallback((element, path, expanded, selected) => {
      setState(s => _extends({}, s, {
        [path]: {
          element,
          expanded
        }
      }));
  
      if (selected) {
        setFocusedElement(element);
      }
  
      return () => {
        setState(s => {
          const newState = _extends({}, s);
  
          delete newState[path];
          return newState;
        });
      };
    }, []);
    const setExpanded = useCallback((path, expanded) => {
      setState(s => {
        const itemState = s[path];
        if (!itemState) return s;
        return _extends({}, s, {
          [path]: _extends({}, itemState, {
            expanded
          })
        });
      });
    }, []);
    const contextValue = useMemo(() => ({
      version: 0.0,
      focusedElement: focusedElement || itemElements[0] || null,
      level: 0,
      path,
      registerItem,
      setExpanded,
      setFocusedElement,
      space,
      state
    }), [focusedElement, itemElements, path, registerItem, setExpanded, space, state]);
    const handleKeyDown = useCallback(event => {
      if (!focusedElement) return;
  
      if (event.key === 'ArrowDown') {
        event.preventDefault();
  
        const nextEl = _findNextItemElement(state, itemElements, focusedElement);
  
        if (nextEl) {
          _focusItemElement(nextEl);
  
          setFocusedElement(nextEl);
        }
  
        return;
      }
  
      if (event.key === 'ArrowUp') {
        event.preventDefault();
  
        const prevEl = _findPrevItemElement(state, itemElements, focusedElement);
  
        if (prevEl) {
          _focusItemElement(prevEl);
  
          setFocusedElement(prevEl);
        }
  
        return;
      }
  
      if (event.key === 'ArrowLeft') {
        event.preventDefault();
        const itemKey = focusedElement.getAttribute('data-tree-key');
        if (!itemKey) return;
        const itemState = state[itemKey];
        if (!itemState) return;
  
        if (itemState.expanded) {
          setState(s => {
            const itemState = s[itemKey];
            if (!itemState) return s;
            return _extends({}, s, {
              [itemKey]: _extends({}, itemState, {
                expanded: false
              })
            });
          });
        } else {
          const itemPath = itemKey.split('/');
          itemPath.pop();
          const parentKey = itemPath.join('/');
          const parentState = parentKey && state[parentKey];
  
          if (parentState) {
            parentState.element.focus();
            setFocusedElement(parentState.element);
          }
        }
  
        return;
      }
  
      if (event.key === 'ArrowRight') {
        var _state$focusedKey;
  
        event.preventDefault();
        const focusedKey = focusedElement.getAttribute('data-tree-key');
        if (!focusedKey) return;
  
        if (!((_state$focusedKey = state[focusedKey]) != null && _state$focusedKey.expanded)) {
          setState(s => {
            const itemState = s[focusedKey];
            if (!itemState) return s;
            return _extends({}, s, {
              [focusedKey]: _extends({}, itemState, {
                expanded: true
              })
            });
          });
        }
  
        return;
      }
    }, [focusedElement, itemElements, state]);
    useEffect(() => {
      if (!rootRef.current) return;
  
      const _itemElements = Array.from(rootRef.current.querySelectorAll('[data-ui="TreeItem"]'));
  
      setItemElements(_itemElements);
    }, [children]);
    return /*#__PURE__*/React.createElement(TreeContext.Provider, {
      value: contextValue
    }, /*#__PURE__*/React.createElement(Stack, _extends({
      as: "ul",
      "data-ui": "Tree"
    }, restProps, {
      onKeyDown: handleKeyDown,
      ref: rootRef,
      role: "tree",
      space: space
    }), children));
  }
  
  let _$1 = t => t,
      _t$1,
      _t2,
      _t3;
  function treeItemRootStyle() {
    return css(_t$1 || (_t$1 = _$1`
      &[role='none'] > [role='treeitem'] {
        outline: none;
        cursor: default;
        border-radius: 3px;
  
        &:focus {
          position: relative;
        }
      }
  
      &[role='treeitem'] {
        outline: none;
  
        & > div {
          cursor: default;
          border-radius: 3px;
        }
  
        &:focus > div {
          position: relative;
        }
      }
    `));
  }
  function treeItemRootColorStyle(props) {
    const {
      theme
    } = props;
    const $tone = 'default';
    const {
      base,
      muted,
      selectable
    } = theme.sanity.color; // @todo: remove use of `muted` here
  
    const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
    return css(_t2 || (_t2 = _$1`
      /* <div role="none"><a data-ui="TreeItem__box" role="treeitem" tabIndex="0"></div> */
      &[role='none'] {
        & > [role='treeitem'] {
          ${0}
  
          background-color: var(--card-bg-color);
          color: var(--treeitem-fg-color);
        }
  
        &[data-selected] > [role='treeitem'] {
          ${0}
        }
  
        @media (hover: hover) {
          &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
            ${0}
          }
  
          & > [role='treeitem']:focus {
            ${0}
          }
        }
      }
  
      /* <div role="treeitem" tabIndex="0"><div data-ui="TreeItem__box"></div> */
      &[role='treeitem'] {
        & > [data-ui='TreeItem__box'] {
          ${0}
  
          background-color: var(--card-bg-color);
          color: var(--card-fg-color);
        }
  
        &[data-selected] > [data-ui='TreeItem__box'] {
          ${0}
        }
  
        @media (hover: hover) {
          &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
            ${0}
          }
  
          &:focus > [data-ui='TreeItem__box'] {
            ${0}
          }
        }
      }
    `), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected));
  }
  function treeItemBoxStyle(props) {
    const {
      $level,
      theme
    } = props;
    const {
      space
    } = theme.sanity;
    return css(_t3 || (_t3 = _$1`
      padding-left: ${0};
  
      &[data-as='a'] {
        text-decoration: none;
      }
    `), rem(space[2] * $level));
  }
  
  /**
   * @beta
   */
  
  function useTree() {
    const tree = useContext(TreeContext);
  
    if (!tree) {
      throw new Error('Tree: missing context value');
    }
  
    return tree;
  }
  
  const _excluded$1 = ["children", "expanded"];
  function TreeGroup(props) {
    const {
      children,
      expanded = false
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
  
    const tree = useTree();
    return /*#__PURE__*/React.createElement(Stack, _extends({
      as: "ul",
      "data-ui": "TreeGroup"
    }, restProps, {
      hidden: !expanded,
      marginTop: tree.space,
      role: "group",
      space: tree.space
    }), children);
  }
  
  const _excluded = ["children", "expanded", "fontSize", "href", "icon", "id", "muted", "onClick", "padding", "selected", "space", "text", "weight"];
  
  let _ = t => t,
      _t;
  const Root = styled.li(treeItemRootStyle, treeItemRootColorStyle);
  const TreeItemBox = styled(Box).attrs({
    forwardedAs: 'a'
  })(treeItemBoxStyle);
  const ToggleArrowText = styled(Text)(_t || (_t = _`
    & > svg {
      transition: transform 100ms;
    }
  `));
  /**
   * This API might change. DO NOT USE IN PRODUCTION.
   * @beta
   */
  
  function TreeItem(props) {
    const {
      children,
      expanded: expandedProp = false,
      fontSize,
      href,
      icon,
      id: idProp,
      muted,
      onClick,
      padding = 3,
      selected = false,
      space = 2,
      text,
      weight
    } = props,
          restProps = _objectWithoutPropertiesLoose(props, _excluded);
  
    const rootRef = useRef(null);
    const treeitemRef = useRef(null);
    const tree = useTree();
    const {
      path,
      registerItem,
      setExpanded,
      setFocusedElement
    } = tree;
    const id = useId(idProp) || idProp;
    const itemPath = useMemo(() => path.concat([id || '']), [id, path]);
    const itemKey = itemPath.join('/');
    const itemState = tree.state[itemKey];
    const focused = tree.focusedElement === rootRef.current;
    const expanded = (itemState == null ? void 0 : itemState.expanded) === undefined ? expandedProp : (itemState == null ? void 0 : itemState.expanded) || false;
    const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1;
    const contextValue = useMemo(() => _extends({}, tree, {
      level: tree.level + 1,
      path: itemPath
    }), [itemPath, tree]);
    const handleClick = useCallback(event => {
      if (onClick) onClick(event);
      const target = event.target;
  
      if (target instanceof HTMLElement && (target.getAttribute('data-ui') === 'TreeItem__box' || target.closest('[data-ui="TreeItem__box"]'))) {
        event.stopPropagation();
        setExpanded(itemKey, !expanded);
        setFocusedElement(rootRef.current);
      }
    }, [expanded, itemKey, onClick, setExpanded, setFocusedElement]);
    const handleKeyDown = useCallback(event => {
      if (focused && event.key === 'Enter') {
        const el = treeitemRef.current || rootRef.current;
        el == null ? void 0 : el.click();
      }
    }, [focused]);
    useEffect(() => {
      if (!rootRef.current) return;
      return registerItem(rootRef.current, itemPath.join('/'), expanded, selected);
    }, [expanded, itemPath, registerItem, selected]);
    const content = /*#__PURE__*/React.createElement(Flex, {
      padding: padding
    }, /*#__PURE__*/React.createElement(Box, {
      marginRight: space,
      style: {
        visibility: icon || children ? 'visible' : 'hidden',
        pointerEvents: 'none'
      }
    }, icon && /*#__PURE__*/React.createElement(Text, {
      muted: muted,
      size: fontSize,
      weight: weight
    }, /*#__PURE__*/createElement(icon)), !icon && /*#__PURE__*/React.createElement(ToggleArrowText, {
      muted: muted,
      size: fontSize,
      weight: weight
    }, /*#__PURE__*/React.createElement(ToggleArrowRightIcon, {
      style: {
        transform: expanded ? 'rotate(90deg)' : undefined
      }
    }))), /*#__PURE__*/React.createElement(Box, {
      flex: 1
    }, /*#__PURE__*/React.createElement(Text, {
      muted: muted,
      size: fontSize,
      textOverflow: "ellipsis",
      weight: weight
    }, text)));
  
    if (href) {
      return /*#__PURE__*/React.createElement(Root, _extends({
        "data-selected": selected ? '' : undefined,
        "data-tree-id": id,
        "data-tree-key": itemKey,
        "data-ui": "TreeItem"
      }, restProps, {
        onClick: handleClick,
        ref: rootRef,
        role: "none"
      }), /*#__PURE__*/React.createElement(TreeItemBox, {
        "$level": tree.level,
        "aria-expanded": expanded,
        "data-ui": "TreeItem__box",
        href: href,
        ref: treeitemRef,
        role: "treeitem",
        tabIndex: tabIndex
      }, content), /*#__PURE__*/React.createElement(TreeContext.Provider, {
        value: contextValue
      }, children && /*#__PURE__*/React.createElement(TreeGroup, {
        hidden: !expanded
      }, children)));
    }
  
    return /*#__PURE__*/React.createElement(Root, _extends({
      "data-selected": selected ? '' : undefined,
      "data-ui": "TreeItem",
      "data-tree-id": id,
      "data-tree-key": itemKey
    }, restProps, {
      "aria-expanded": expanded,
      onClick: handleClick,
      onKeyDown: handleKeyDown,
      ref: rootRef,
      role: "treeitem",
      tabIndex: tabIndex
    }), /*#__PURE__*/React.createElement(TreeItemBox, {
      "$level": tree.level,
      as: "div",
      "data-ui": "TreeItem__box"
    }, content), /*#__PURE__*/React.createElement(TreeContext.Provider, {
      value: contextValue
    }, children && /*#__PURE__*/React.createElement(TreeGroup, {
      expanded: expanded
    }, children)));
  }
  
  export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, RO as ResizeObserver, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, Tree, TreeItem, VirtualList, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, attemptFocus, createColorTheme, fillCSSObject, focusFirstDescendant, focusLastDescendant, getResponsiveProp, getResponsiveSpace, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsive, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen$1 as screen, studioTheme, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, useResponsiveProp, useRootTheme, useTheme, useToast, useTree };
  //# sourceMappingURL=sanity-ui.modern.js.map
  