@sanity/ui/dist/_chunks-es/_visual-editing.mjs.map

The Sanity UI components.

{"version":3,"file":"_visual-editing.mjs","sources":["../../src/core/_compat.ts","../../src/core/constants.ts","../../src/core/helpers/element.ts","../../src/core/helpers/scroll.ts","../../src/core/styles/helpers.ts","../../src/core/styles/font/responsiveFont.ts","../../src/core/styles/font/codeFontStyle.ts","../../src/core/styles/font/headingFontStyle.ts","../../src/core/styles/font/labelFontStyle.ts","../../src/core/styles/font/textAlignStyle.ts","../../src/core/styles/font/textFontStyle.ts","../../src/core/lib/globalScope.ts","../../src/core/lib/createGlobalScopedContext.ts","../../src/core/theme/themeContext.ts","../../src/core/theme/themeProvider.tsx","../../src/core/theme/useRootTheme.ts","../../src/core/theme/themeColorProvider.tsx","../../src/core/theme/useTheme.ts","../../src/core/styles/border/borderStyle.ts","../../src/core/styles/box/boxStyle.ts","../../src/core/styles/flex/flexItemStyle.ts","../../src/core/styles/flex/flexStyle.ts","../../src/core/styles/focusRing/index.ts","../../src/core/styles/grid/gridItemStyle.ts","../../src/core/styles/grid/gridStyle.ts","../../src/core/styles/input/responsiveInputPaddingStyle.ts","../../src/core/styles/input/textInputStyle.ts","../../src/core/styles/margin/marginStyle.ts","../../src/core/styles/padding/paddingStyle.ts","../../src/core/styles/radius/radiusStyle.ts","../../src/core/styles/shadow/shadowStyle.ts","../../src/core/utils/spanWithTextOverflow.tsx","../../src/core/primitives/label/styles.ts","../../src/core/primitives/label/label.tsx","../../src/core/primitives/avatar/styles.ts","../../src/core/primitives/avatar/avatar.tsx","../../src/core/primitives/avatar/avatarCounter.tsx","../../src/core/primitives/avatar/avatarStack.tsx","../../src/core/primitives/box/box.tsx","../../src/core/primitives/text/styles.ts","../../src/core/primitives/text/text.tsx","../../src/core/primitives/badge/styles.ts","../../src/core/primitives/badge/badge.tsx","../../src/core/primitives/flex/flex.tsx","../../src/core/primitives/spinner/spinner.tsx","../../src/core/styles/card/_cardColorStyle.ts","../../src/core/primitives/button/styles.ts","../../src/core/primitives/button/button.tsx","../../src/core/primitives/card/styles.ts","../../src/core/primitives/card/card.tsx","../../src/core/hooks/useClickOutsideEvent.ts","../../src/core/hooks/useCustomValidity.ts","../../src/core/observers/resizeObserver.ts","../../src/core/observers/elementSizeObserver.ts","../../src/core/hooks/useElementSize.ts","../../src/core/hooks/useGlobalKeyDown.ts","../../src/core/hooks/useMatchMedia.ts","../../src/core/hooks/useMediaIndex/useMediaIndex.ts","../../src/core/hooks/usePrefersDark.ts","../../src/core/hooks/usePrefersReducedMotion.ts","../../src/core/primitives/checkbox/styles.ts","../../src/core/primitives/checkbox/checkbox.tsx","../../src/core/primitives/code/styles.ts","../../src/core/primitives/code/code.tsx","../../src/core/primitives/container/styles.ts","../../src/core/primitives/container/container.tsx","../../src/core/primitives/grid/grid.tsx","../../src/core/primitives/heading/styles.ts","../../src/core/primitives/heading/heading.tsx","../../src/core/primitives/inline/styles.ts","../../src/core/primitives/inline/inline.tsx","../../src/core/primitives/kbd/kbd.tsx","../../src/core/middleware/origin.ts","../../src/core/utils/arrow/cmds.ts","../../src/core/utils/arrow/arrow.tsx","../../src/core/utils/boundaryElement/boundaryElementContext.ts","../../src/core/utils/boundaryElement/boundaryElementProvider.tsx","../../src/core/lib/isRecord.ts","../../src/core/utils/boundaryElement/useBoundaryElement.ts","../../src/core/utils/conditionalWrapper/conditionalWrapper.tsx","../../src/core/utils/elementQuery/helpers.ts","../../src/core/utils/elementQuery/elementQuery.tsx","../../src/core/utils/layer/getLayerContext.ts","../../src/core/utils/layer/layerContext.ts","../../src/core/utils/layer/layerProvider.tsx","../../src/core/utils/layer/useLayer.ts","../../src/core/utils/layer/layer.tsx","../../src/core/utils/portal/portalContext.ts","../../src/core/utils/portal/usePortal.ts","../../src/core/utils/portal/portal.ts","../../src/core/utils/portal/portalProvider.tsx","../../src/core/utils/srOnly/srOnly.tsx","../../src/core/utils/virtualList/virtualList.tsx","../../src/core/utils/getElementRef.ts","../../src/core/primitives/popover/constants.ts","../../src/core/primitives/popover/floating-ui/size.ts","../../src/core/primitives/popover/helpers.ts","../../src/core/primitives/popover/popoverCard.tsx","../../src/core/primitives/popover/popover.tsx","../../src/core/primitives/radio/styles.ts","../../src/core/primitives/radio/radio.tsx","../../src/core/primitives/select/styles.ts","../../src/core/primitives/select/select.tsx","../../src/core/primitives/stack/styles.ts","../../src/core/primitives/stack/stack.tsx","../../src/core/primitives/switch/styles.ts","../../src/core/primitives/switch/switch.tsx","../../src/core/primitives/textArea/textArea.tsx","../../src/core/primitives/textInput/textInput.tsx","../../src/core/hooks/useDelayedState.ts","../../src/core/primitives/tooltip/constants.ts","../../src/core/primitives/tooltip/tooltipCard.tsx","../../src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupContext.tsx","../../src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx","../../src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts","../../src/core/primitives/tooltip/tooltip.tsx","../../src/core/components/hotkeys/hotkeys.tsx","../../src/core/components/menu/menuContext.ts","../../src/core/components/menu/helpers.ts","../../src/core/components/menu/useMenuController.ts","../../src/core/components/menu/menu.tsx","../../src/core/components/menu/menuDivider.ts","../../src/core/primitives/_selectable/style.ts","../../src/core/primitives/_selectable/selectable.tsx","../../src/core/components/menu/useMenu.ts","../../src/core/components/menu/menuGroup.tsx","../../src/core/components/menu/menuItem.tsx","../../src/core/components/tab/tab.tsx","../../src/core/components/tab/tabList.tsx"],"sourcesContent":["// This file re-exports API members which existed in the `@sanity/ui` export in v1.\n\nimport {\n  type BaseTheme as _BaseTheme,\n  buildTheme,\n  type HSL as _HSL,\n  type PartialThemeColorBuilderOpts,\n  type RGB as _RGB,\n  type RootTheme as _RootTheme,\n  type Theme as _Theme,\n  type ThemeAvatar,\n  type ThemeBoxShadow,\n  type ThemeColor,\n  type ThemeColorBase,\n  type ThemeColorBuilderOpts,\n  type ThemeColorButton,\n  type ThemeColorButtonModeKey as _ThemeColorButtonModeKey,\n  type ThemeColorButtonState,\n  type ThemeColorButtonStates,\n  type ThemeColorButtonTones,\n  type ThemeColorCard,\n  type ThemeColorCardState,\n  type ThemeColorGenericState,\n  type ThemeColorInput,\n  type ThemeColorInputState,\n  type ThemeColorInputStates,\n  type ThemeColorMuted,\n  type ThemeColorMutedTone,\n  type ThemeColorName,\n  type ThemeColorScheme,\n  type ThemeColorSchemeKey as _ThemeColorSchemeKey,\n  type ThemeColorSchemes,\n  type ThemeColorSelectable,\n  type ThemeColorSelectableState,\n  type ThemeColorSelectableStates,\n  type ThemeColorSolid,\n  type ThemeColorSolidTone,\n  type ThemeColorSpot,\n  type ThemeColorSpotKey,\n  type ThemeColorSyntax as _ThemeColorSyntax,\n  type ThemeColorToneKey,\n  type ThemeFont as _ThemeFont,\n  type ThemeFontKey as _ThemeFontKey,\n  type ThemeFonts as _ThemeFonts,\n  type ThemeFontSize as _ThemeFontSize,\n  type ThemeFontWeight as _ThemeFontWeight,\n  type ThemeFontWeightKey as _ThemeFontWeightKey,\n  type ThemeInput,\n  type ThemeLayer as _ThemeLayer,\n  type ThemeShadow as _ThemeShadow,\n  type ThemeStyles,\n} from '@sanity/ui/theme'\n\n/**\n * @public\n * @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.\n */\nexport type BaseTheme = _BaseTheme\n\n/**\n * @public\n * @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.\n */\nexport type BoxShadow = ThemeBoxShadow\n\n/**\n * @public\n * @deprecated Use `HSL` from `@sanity/ui/theme` instead.\n */\nexport type HSL = _HSL\n\n/**\n * @public\n * @deprecated Use `RGB` from `@sanity/ui/theme` instead.\n */\nexport type RGB = _RGB\n\n/**\n * @public\n * @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.\n */\nexport type RootTheme = _RootTheme\n\n/**\n * @public\n * @deprecated Use `ThemeStyles` from `@sanity/ui/theme` instead.\n */\nexport type Styles = ThemeStyles\n\n/**\n * @public\n * @deprecated Use `Theme` from `@sanity/ui/theme` instead.\n */\nexport type Theme = _Theme\n\n/**\n * @public\n * @deprecated Use `ThemeColorButtonModeKey` from `@sanity/ui/theme` instead.\n */\nexport type ThemeColorButtonModeKey = _ThemeColorButtonModeKey\n\n/**\n * @public\n * @deprecated Use `ThemeColorSchemeKey` from `@sanity/ui/theme` instead.\n */\nexport type ThemeColorSchemeKey = _ThemeColorSchemeKey\n\n/**\n * @public\n * @deprecated Use `ThemeColorSyntax` from `@sanity/ui/theme` instead.\n */\nexport type ThemeColorSyntax = _ThemeColorSyntax\n\n/**\n * @public\n * @deprecated Use `ThemeFont` from `@sanity/ui/theme` instead.\n */\nexport type ThemeFont = _ThemeFont\n\n/**\n * @public\n * @deprecated Use `ThemeFontKey` from `@sanity/ui/theme` instead.\n */\nexport type ThemeFontKey = _ThemeFontKey\n\n/**\n * @public\n * @deprecated Use `ThemeFontSize` from `@sanity/ui/theme` instead.\n */\nexport type ThemeFontSize = _ThemeFontSize\n\n/**\n * @public\n * @deprecated Use `ThemeFontWeight` from `@sanity/ui/theme` instead.\n */\nexport type ThemeFontWeight = _ThemeFontWeight\n\n/**\n * @public\n * @deprecated Use `ThemeFontWeightKey` from `@sanity/ui/theme` instead.\n */\nexport type ThemeFontWeightKey = _ThemeFontWeightKey\n\n/**\n * @public\n * @deprecated Use `ThemeFonts` from `@sanity/ui/theme` instead.\n */\nexport type ThemeFonts = _ThemeFonts\n\n/**\n * @public\n * @deprecated Use `ThemeLayer` from `@sanity/ui/theme` instead.\n */\nexport type ThemeLayer = _ThemeLayer\n\n/**\n * @public\n * @deprecated Use `ThemeShadow` from `@sanity/ui/theme` instead.\n */\nexport type ThemeShadow = _ThemeShadow\n\nexport {\n  type PartialThemeColorBuilderOpts,\n  type ThemeAvatar,\n  type ThemeColor,\n  type ThemeColorBase,\n  type ThemeColorBuilderOpts,\n  type ThemeColorButton,\n  type ThemeColorButtonState,\n  type ThemeColorButtonStates,\n  type ThemeColorButtonTones,\n  type ThemeColorCard,\n  type ThemeColorCardState,\n  type ThemeColorGenericState,\n  type ThemeColorInput,\n  type ThemeColorInputState,\n  type ThemeColorInputStates,\n  type ThemeColorMuted,\n  type ThemeColorMutedTone,\n  type ThemeColorName,\n  type ThemeColorScheme,\n  type ThemeColorSchemes,\n  type ThemeColorSelectable,\n  type ThemeColorSelectableState,\n  type ThemeColorSelectableStates,\n  type ThemeColorSolid,\n  type ThemeColorSolidTone,\n  type ThemeColorSpot,\n  type ThemeColorSpotKey,\n  type ThemeColorToneKey,\n  type ThemeInput,\n}\n\nimport {\n  createColorTheme as _createColorTheme,\n  hexToRgb as _hexToRgb,\n  hslToRgb as _hslToRgb,\n  multiply as _multiply,\n  parseColor as _parseColor,\n  rgba as _rgba,\n  rgbToHex as _rgbToHex,\n  rgbToHsl as _rgbToHsl,\n  screen as _screen,\n} from '@sanity/ui/theme'\n\n/**\n * @public\n * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.\n */\nexport const createColorTheme = _createColorTheme\n\n/**\n * @public\n * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.\n */\nexport const hexToRgb = _hexToRgb\n\n/**\n * @public\n * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.\n */\nexport const hslToRgb = _hslToRgb\n\n/**\n * @public\n * @deprecated Use `multiply` from `@sanity/ui/theme` instead.\n */\nexport const multiply = _multiply\n\n/**\n * @public\n * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.\n */\nexport const parseColor = _parseColor\n\n/**\n * @public\n * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.\n */\nexport const rgbToHex = _rgbToHex\n\n/**\n * @public\n * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.\n */\nexport const rgbToHsl = _rgbToHsl\n\n/**\n * @public\n * @deprecated Use `rgba` from `@sanity/ui/theme` instead.\n */\nexport const rgba = _rgba\n\n/**\n * @public\n * @deprecated Use `screen` from `@sanity/ui/theme` instead.\n */\nexport const screen = _screen\n\n/**\n * @public\n * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.\n */\nexport const studioTheme = buildTheme()\n","import type {Transition, Variant} from 'framer-motion'\n\n/**\n * @internal\n */\nexport const EMPTY_ARRAY: never[] = []\n\n/**\n * @internal\n */\nexport const EMPTY_RECORD: Record<string, never> = {}\n\nconst POPOVER_MOTION_DURATION = 0.2\n\n/**\n * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.\n * @internal\n */\nexport const POPOVER_MOTION_PROPS: {\n  card: {\n    initial: Variant\n    hidden: Variant\n    visible: Variant\n    scaleIn: Variant\n    scaleOut: Variant\n  }\n  children: {\n    hidden: Variant\n    visible: Variant\n  }\n  transition: Transition\n} = {\n  card: {\n    initial: {\n      scale: 0.97,\n      willChange: 'transform',\n    },\n    hidden: {\n      opacity: 0,\n    },\n    visible: {\n      opacity: 1,\n      transition: {\n        when: 'beforeChildren',\n        duration: POPOVER_MOTION_DURATION / 2,\n      },\n    },\n    scaleIn: {\n      scale: 1,\n    },\n    scaleOut: {\n      scale: 0.97,\n    },\n  },\n  children: {\n    hidden: {\n      opacity: 0,\n    },\n    visible: {\n      opacity: 1,\n    },\n  },\n  transition: {\n    type: 'spring',\n    visualDuration: POPOVER_MOTION_DURATION,\n    bounce: 0.25,\n  },\n}\n\n/**\n * @internal\n * @deprecated No longer used.\n */\nexport const FLOATING_STATIC_SIDES: Record<string, 'bottom' | 'left' | 'top' | 'right'> = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n}\n","/**\n * @internal\n */\nexport function _isEnterToClickElement(element: HTMLElement): boolean {\n  return isHTMLAnchorElement(element) || isHTMLButtonElement(element)\n}\n\n/**\n * @internal\n */\nexport function isHTMLElement(node: unknown): node is HTMLElement {\n  return node instanceof Node && node.nodeType === Node.ELEMENT_NODE\n}\n\n/**\n * @internal\n */\nexport function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement {\n  return isHTMLElement(element) && element.nodeName === 'A'\n}\n\n/**\n * @internal\n */\nexport function isHTMLInputElement(element: unknown): element is HTMLInputElement {\n  return isHTMLElement(element) && element.nodeName === 'INPUT'\n}\n\n/**\n * @internal\n */\nexport function isHTMLButtonElement(element: unknown): element is HTMLButtonElement {\n  return isHTMLElement(element) && element.nodeName === 'BUTTON'\n}\n\n/**\n * @internal\n */\nexport function isHTMLSelectElement(element: unknown): element is HTMLSelectElement {\n  return isHTMLElement(element) && element.nodeName === 'SELECT'\n}\n\n/**\n * @internal\n */\nexport function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement {\n  return isHTMLElement(element) && element.nodeName === 'TEXTAREA'\n}\n\n/**\n * @internal\n */\nexport function containsOrEqualsElement(element: HTMLElement, node: Node): boolean {\n  return element.contains(node) || element === node\n}\n","/**\n * @internal\n */\nexport function _isScrollable(el: Node): boolean {\n  if (!(el instanceof Element)) return false\n\n  const style = window.getComputedStyle(el)\n\n  return (\n    style.overflowX.includes('auto') ||\n    style.overflowX.includes('scroll') ||\n    style.overflowY.includes('auto') ||\n    style.overflowY.includes('scroll')\n  )\n}\n","import {CSSObject, getTheme_v2, Theme} from '@sanity/ui/theme'\n\nimport {EMPTY_ARRAY} from '../constants'\n\n/**\n * @internal\n */\nexport function _fillCSSObject(keys: string[], value: string | number | CSSObject): CSSObject {\n  return keys.reduce<CSSObject>((style, key) => {\n    style[key] = value\n\n    return style\n  }, {})\n}\n\n/**\n * @public\n */\nexport function rem(pixelValue: number): string | 0 {\n  if (pixelValue === 0) return 0\n\n  return `${pixelValue / 16}rem`\n}\n\n/**\n * @internal\n */\nexport function _responsive<T>(\n  media: number[],\n  values: T[],\n  callback: (value: T, index: number, array: T[]) => CSSObject,\n): CSSObject[] {\n  const statements = values?.map(callback) || []\n\n  return statements.map((statement, mediaIndex) => {\n    if (mediaIndex === 0) return statement\n\n    return {[`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement}\n  })\n}\n\n/**\n * @internal\n */\nexport function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[] {\n  if (val === undefined) return defaultVal || EMPTY_ARRAY\n\n  return Array.isArray(val) ? val : [val]\n}\n\n/**\n * @internal\n */\nexport function _getResponsiveSpace(\n  theme: Theme,\n  props: string[],\n  spaceIndexes: number[] = EMPTY_ARRAY,\n): CSSObject[] | null {\n  if (!Array.isArray(spaceIndexes)) {\n    throw new Error('the property must be array of numbers')\n  }\n\n  if (spaceIndexes.length === 0) {\n    return null\n  }\n\n  const {media, space} = getTheme_v2(theme)\n\n  return _responsive(media, spaceIndexes, (spaceIndex) =>\n    _fillCSSObject(props, rem(space[spaceIndex])),\n  )\n}\n","import {CSSObject, getTheme_v2, ThemeFontKey, ThemeFontSize} from '@sanity/ui/theme'\n\nimport {_responsive, rem} from '../helpers'\nimport {ThemeProps} from '../types'\nimport {ResponsiveFontStyleProps} from './types'\n\n/**\n * A utility function getting responsive font styles.\n * @internal\n */\nexport function responsiveFont(\n  fontKey: ThemeFontKey,\n  props: ResponsiveFontStyleProps & ThemeProps,\n): CSSObject[] {\n  const {$size, $weight} = props\n  const {font, media} = getTheme_v2(props.theme)\n  const {family, sizes, weights} = font[fontKey]\n  const fontWeight = ($weight && weights[$weight]) || weights.regular\n\n  // eslint-disable-next-line no-warning-comments\n  // @todo: make this configurable\n  const defaultSize = sizes[2]\n\n  const base: CSSObject = {\n    'position': 'relative',\n    'fontFamily': family,\n    'fontWeight': `${fontWeight}`,\n    'padding': '1px 0',\n    'margin': 0,\n\n    '&:before': {\n      content: '\"\"',\n      display: 'block',\n      height: 0,\n    },\n\n    '&:after': {\n      content: '\"\"',\n      display: 'block',\n      height: 0,\n    },\n\n    '& > code, & > span': {\n      display: 'block',\n    },\n\n    '&:not([hidden])': {\n      display: 'block',\n    },\n  }\n\n  // eslint-disable-next-line no-warning-comments\n  // @TODO fix the real condition that is causing $size to be undefined sometimes\n  if (!$size) {\n    // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it\n    if (!responsiveFont.warned) {\n      // eslint-disable-next-line no-console\n      console.warn('No size specified for responsive font', {fontKey, $size, props, base})\n      // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it\n      responsiveFont.warned = true\n    }\n\n    return [base]\n  }\n\n  const resp = _responsive(media, $size, (sizeIndex) => fontSize(sizes[sizeIndex] || defaultSize))\n\n  return [base, ...resp]\n}\n\nexport function fontSize(size: ThemeFontSize): CSSObject {\n  const {ascenderHeight, descenderHeight, fontSize, iconSize, letterSpacing, lineHeight} = size\n  const negHeight = ascenderHeight + descenderHeight\n  const capHeight = lineHeight - negHeight\n  const iconOffset = (capHeight - iconSize) / 2\n  const customIconSize = Math.floor((fontSize * 1.125) / 2) * 2 + 1\n  const customIconOffset = (capHeight - customIconSize) / 2\n\n  return {\n    'fontSize': rem(fontSize),\n    'lineHeight': `calc(${lineHeight} / ${fontSize})`,\n    'letterSpacing': rem(letterSpacing),\n    'transform': `translateY(${rem(descenderHeight)})`,\n\n    '&:before': {\n      marginTop: `calc(${rem(0 - negHeight)} - 1px)`,\n    },\n\n    '&:after': {\n      marginBottom: '-1px',\n    },\n\n    '& svg:not([data-sanity-icon])': {\n      fontSize: `calc(${customIconSize} / 16 * 1rem)`,\n      margin: rem(customIconOffset),\n    },\n\n    '& [data-sanity-icon]': {\n      fontSize: `calc(${iconSize} / 16 * 1rem)`,\n      margin: rem(iconOffset),\n    },\n  }\n}\n","import {CSSObject} from '@sanity/ui/theme'\n\nimport {ThemeProps} from '../types'\nimport {responsiveFont} from './responsiveFont'\nimport {ResponsiveFontStyleProps} from './types'\n\n/**\n * Get responsive CSS for the `code` font style.\n * @internal\n */\nexport function responsiveCodeFontStyle(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[] {\n  return responsiveFont('code', props)\n}\n","import {CSSObject} from '@sanity/ui/theme'\n\nimport {ThemeProps} from '../types'\nimport {responsiveFont} from './responsiveFont'\nimport {ResponsiveFontStyleProps} from './types'\n\n/**\n * Get responsive CSS for the `heading` font style.\n * @internal\n */\nexport function responsiveHeadingFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[] {\n  return responsiveFont('heading', props)\n}\n","import {CSSObject} from '@sanity/ui/theme'\n\nimport {ThemeProps} from '../types'\nimport {responsiveFont} from './responsiveFont'\nimport {ResponsiveFontStyleProps} from './types'\n\n/**\n * Get responsive CSS for the `label` font style.\n * @internal\n */\nexport function responsiveLabelFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[] {\n  return responsiveFont('label', props)\n}\n","import {CSSObject, getTheme_v2} from '@sanity/ui/theme'\n\nimport {_responsive} from '../helpers'\nimport {ThemeProps} from '../types'\nimport {ResponsiveTextAlignStyleProps} from './types'\n\n/**\n * Get responsive text align styles.\n * @internal\n */\nexport function responsiveTextAlignStyle(\n  props: ResponsiveTextAlignStyleProps & ThemeProps,\n): CSSObject[] {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$align, (textAlign) => {\n    return {textAlign}\n  })\n}\n","import {CSSObject} from '@sanity/ui/theme'\n\nimport {ThemeProps} from '../types'\nimport {responsiveFont} from './responsiveFont'\nimport {ResponsiveFontStyleProps} from './types'\n\n/**\n * Get responsive CSS for the `text` font style.\n * @internal\n */\nexport function responsiveTextFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[] {\n  return responsiveFont('text', props)\n}\n","/**\n * Gets the global scope instance in a given environment.\n *\n * The strategy is to return the most modern, and if not, the most common:\n * - The `globalThis` variable is the modern approach to accessing the global scope\n * - The `window` variable is the global scope in a web browser\n * - The `self` variable is the global scope in workers and others\n * - The `global` variable is the global scope in Node.js\n */\nfunction getGlobalScope() {\n  if (typeof globalThis !== 'undefined') return globalThis\n  if (typeof window !== 'undefined') return window\n  if (typeof self !== 'undefined') return self\n  if (typeof global !== 'undefined') return global\n\n  throw new Error('@sanity/ui: could not locate global scope')\n}\n\nexport const globalScope = getGlobalScope() as any\n","/**\n * As `@sanity/ui` is declared as a dependency, and may be duplicated, sometimes across major versions\n * it's critical that vital react contexts are shared even when there is a duplicate.\n * If we used a model similar to `sanity` itself, or `styled-components`, this would be unnecessary as\n * those libraries enforce single instances.\n * Since we don't enforce it we have to support a sanity plugin being able to call hooks like `useToast`, and then\n * read the context setup by `sanity`, which calls `ToastProvider`, even if the provider and hook are different instances in memory.\n * It's also why it's vital that all changes to globally scoped providers remain fully backwards compatible to v1.\n */\n\nimport {type Context, createContext} from 'react'\n\nimport {globalScope} from './globalScope'\n\nexport function createGlobalScopedContext<ContextType, const T extends ContextType = ContextType>(\n  /**\n   * Enforce that all Symbol.for keys used for globally scoped contexts have a predictable prefix\n   */\n  key: `@sanity/ui/context/${string}`,\n  defaultValue: T,\n): Context<ContextType> {\n  const symbol = Symbol.for(key)\n\n  /**\n   * Prevent errors about re-renders on React SSR on Next.js App Router\n   */\n  if (typeof document === 'undefined') {\n    const context = createContext<ContextType>(defaultValue)\n    context.displayName = key\n    return context\n  }\n\n  globalScope[symbol] = globalScope[symbol] || createContext<T>(defaultValue)\n\n  return globalScope[symbol]\n}\n","import {createGlobalScopedContext} from '../lib/createGlobalScopedContext'\nimport {ThemeContextValue} from './types'\n\n/**\n * @internal\n */\nexport const ThemeContext = createGlobalScopedContext<ThemeContextValue | null>(\n  '@sanity/ui/context/theme',\n  null,\n)\n","import {\n  getScopedTheme,\n  type RootTheme,\n  type Theme,\n  type ThemeColorCardToneKey,\n  type ThemeColorSchemeKey,\n} from '@sanity/ui/theme'\nimport {useContext, useMemo} from 'react'\nimport {ThemeProvider as StyledThemeProvider} from 'styled-components'\n\nimport {ThemeContext} from './themeContext'\nimport {ThemeContextValue} from './types'\n\n/**\n * @public\n */\nexport interface ThemeProviderProps {\n  children?: React.ReactNode\n  scheme?: ThemeColorSchemeKey\n  theme?: RootTheme\n  tone?: ThemeColorCardToneKey\n}\n\n/**\n * @public\n */\nexport function ThemeProvider(props: ThemeProviderProps): React.JSX.Element {\n  const parentTheme = useContext(ThemeContext)\n  const {children} = props\n  const scheme = props.scheme ?? (parentTheme?.scheme || 'light')\n  const rootTheme = props.theme ?? (parentTheme?.theme || null)\n  const tone = props.tone ?? (parentTheme?.tone || 'default')\n\n  const themeContext: ThemeContextValue | null = useMemo(() => {\n    if (!rootTheme) return null\n\n    return {\n      version: 0.0,\n      theme: rootTheme,\n      scheme,\n      tone,\n    }\n  }, [rootTheme, scheme, tone])\n\n  const theme: Theme | null = useMemo(() => {\n    if (!rootTheme) return null\n\n    return getScopedTheme(rootTheme, scheme, tone)\n  }, [scheme, rootTheme, tone])\n\n  if (!theme) {\n    return <pre>ThemeProvider: no \"theme\" property provided</pre>\n  }\n\n  return (\n    <ThemeContext.Provider value={themeContext}>\n      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n    </ThemeContext.Provider>\n  )\n}\n\nThemeProvider.displayName = 'ThemeProvider'\n","import {useContext} from 'react'\n\nimport {ThemeContext} from './themeContext'\nimport {ThemeContextValue} from './types'\n\n/**\n * @public\n */\nexport function useRootTheme(): ThemeContextValue {\n  const value = useContext(ThemeContext)\n\n  if (!value) {\n    throw new Error('useRootTheme(): missing context value')\n  }\n\n  return value as unknown as ThemeContextValue\n}\n","import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'\n\nimport {ThemeProvider} from './themeProvider'\nimport {useRootTheme} from './useRootTheme'\n\n/**\n * @public\n */\nexport interface ThemeColorProviderProps {\n  children?: React.ReactNode\n  scheme?: ThemeColorSchemeKey\n  tone?: ThemeColorCardToneKey\n}\n\n/**\n * @public\n */\nexport function ThemeColorProvider(props: ThemeColorProviderProps): React.JSX.Element {\n  const {children, scheme, tone} = props\n  const root = useRootTheme()\n\n  return (\n    <ThemeProvider scheme={scheme || root.scheme} theme={root.theme} tone={tone}>\n      {children}\n    </ThemeProvider>\n  )\n}\n\nThemeColorProvider.displayName = 'ThemeColorProvider'\n","import {getTheme_v2, Theme, Theme_v2} from '@sanity/ui/theme'\nimport {useTheme as useStyledTheme} from 'styled-components'\n\n/**\n * @public\n */\nexport function useTheme(): Theme {\n  return useStyledTheme() as Theme\n}\n\n/**\n * @public\n */\nexport function useTheme_v2(): Theme_v2 {\n  return getTheme_v2(useStyledTheme() as Theme)\n}\n","import {CSSObject, getTheme_v2} from '@sanity/ui/theme'\n\nimport {_responsive} from '../helpers'\nimport {ThemeProps} from '../types'\nimport {ResponsiveBorderStyleProps} from './types'\n\nexport function responsiveBorderStyle(): Array<\n  (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]\n> {\n  return [border, borderTop, borderRight, borderBottom, borderLeft]\n}\n\nfunction border(props: ResponsiveBorderStyleProps & ThemeProps) {\n  const {card, media} = getTheme_v2(props.theme)\n  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`\n\n  return _responsive(media, props.$border, (value) =>\n    value ? {'&&': {border: borderStyle}} : {'&&': {border: 0}},\n  )\n}\n\nfunction borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {\n  const {card, media} = getTheme_v2(props.theme)\n  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`\n\n  return _responsive(media, props.$borderTop, (value) =>\n    value ? {'&&': {borderTop: borderStyle}} : {'&&': {borderTop: 0}},\n  )\n}\n\nfunction borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {\n  const {card, media} = getTheme_v2(props.theme)\n  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`\n\n  return _responsive(media, props.$borderRight, (value) =>\n    value ? {'&&': {borderRight: borderStyle}} : {'&&': {borderRight: 0}},\n  )\n}\n\nfunction borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {\n  const {card, media} = getTheme_v2(props.theme)\n  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`\n\n  return _responsive(media, props.$borderBottom, (value) =>\n    value ? {'&&': {borderBottom: borderStyle}} : {'&&': {borderBottom: 0}},\n  )\n}\n\nfunction borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {\n  const {card, media} = getTheme_v2(props.theme)\n  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`\n\n  return _responsive(media, props.$borderLeft, (value) =>\n    value ? {'&&': {borderLeft: borderStyle}} : {'&&': {borderLeft: 0}},\n  )\n}\n","import {CSSObject, getTheme_v2} from '@sanity/ui/theme'\nimport {Property} from 'csstype'\n\nimport {_responsive} from '../helpers'\nimport {ThemeProps} from '../types'\nimport {ResponsiveBoxStyleProps} from './types'\n\nconst BASE_STYLE: CSSObject = {\n  '&[data-as=\"ul\"],&[data-as=\"ol\"]': {\n    listStyle: 'none',\n  },\n}\n\nconst BOX_SIZING: {[key: string]: Property.BoxSizing} = {\n  content: 'content-box',\n  border: 'border-box',\n}\n\nconst BOX_HEIGHT = {\n  stretch: 'stretch',\n  fill: '100%',\n}\n\nexport function boxStyle(): CSSObject {\n  return BASE_STYLE\n}\n\nexport function responsiveBoxStyle(): Array<\n  (props: ResponsiveBoxStyleProps & ThemeProps) => CSSObject[]\n> {\n  return [\n    responsiveBoxSizingStyle,\n    responsiveBoxHeightStyle,\n    responsiveBoxOverflowStyle,\n    responsiveBoxDisplayStyle,\n  ]\n}\n\nfunction responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps) {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$display, (display) => ({\n    '&:not([hidden])': {display},\n  }))\n}\n\nfunction responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$sizing, (sizing) => ({\n    boxSizing: BOX_SIZING[sizing],\n  }))\n}\n\nfunction responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$height, (height) => ({\n    height: BOX_HEIGHT[height],\n  }))\n}\n\nfunction responsiveBoxOverflowStyle(props: ResponsiveBoxStyleProps & ThemeProps) {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$overflow, (overflow) => ({\n    overflow,\n  }))\n}\n","import {CSSObject, getTheme_v2} from '@sanity/ui/theme'\n\nimport {EMPTY_ARRAY} from '../../constants'\nimport {_responsive} from '../helpers'\nimport {ThemeProps} from '../types'\nimport {ResponsiveFlexItemStyleProps} from './types'\n\nconst BASE_STYLE: CSSObject = {\n  minWidth: 0,\n  minHeight: 0,\n}\n\nexport function flexItemStyle(): Array<\n  CSSObject | ((props: ResponsiveFlexItemStyleProps & ThemeProps) => CSSObject[])\n> {\n  return [BASE_STYLE, responsiveFlexItemStyle]\n}\n\nexport function responsiveFlexItemStyle(\n  props: ResponsiveFlexItemStyleProps & ThemeProps,\n): CSSObject[] {\n  const {media} = getTheme_v2(props.theme)\n\n  if (!props.$flex) return EMPTY_ARRAY\n\n  return _responsive(media, props.$flex, (flex) => ({flex: `${flex}`}))\n}\n","import {CSSObject, getTheme_v2} from '@sanity/ui/theme'\n\nimport {_responsive, rem} from '../helpers'\nimport {ThemeProps} from '../types'\nimport {ResponsiveFlexStyleProps} from './types'\n\nconst BASE_STYLE: CSSObject = {\n  '&&:not([hidden])': {\n    display: 'flex',\n  },\n}\n\nexport function responsiveFlexStyle(): Array<\n  CSSObject | ((props: ResponsiveFlexStyleProps & ThemeProps) => CSSObject[])\n> {\n  return [\n    BASE_STYLE,\n    responsiveFlexAlignStyle,\n    responsiveFlexGapStyle,\n    responsiveFlexWrapStyle,\n    responsiveFlexJustifyStyle,\n    responsiveFlexDirectionStyle,\n  ]\n}\n\nexport function responsiveFlexAlignStyle(\n  props: ResponsiveFlexStyleProps & ThemeProps,\n): CSSObject[] {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$align, (align) => {\n    return {alignItems: align}\n  })\n}\n\nfunction responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {\n  const {media, space} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$gap, (gap) => ({\n    gap: gap ? rem(space[gap]) : undefined,\n  }))\n}\n\nexport function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$wrap, (wrap) => {\n    return {flexWrap: wrap}\n  })\n}\n\nexport function responsiveFlexJustifyStyle(\n  props: ResponsiveFlexStyleProps & ThemeProps,\n): CSSObject[] {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$justify, (justify) => {\n    return {justifyContent: justify}\n  })\n}\n\nexport function responsiveFlexDirectionStyle(\n  props: ResponsiveFlexStyleProps & ThemeProps,\n): CSSObject[] {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$direction, (direction) => {\n    return {flexDirection: direction}\n  })\n}\n","import {ThemeFocusRing} from '@sanity/ui/theme'\n\nexport function focusRingBorderStyle(border: {color: string; width: number}): string {\n  return `inset 0 0 0 ${border.width}px ${border.color}`\n}\n\nexport function focusRingStyle(opts: {\n  base?: {bg: string}\n  border?: {color: string; width: number}\n  focusRing: ThemeFocusRing\n}): string {\n  const {base, border, focusRing} = opts\n  const focusRingOutsetWidth = focusRing.offset + focusRing.width\n  const focusRingInsetWidth = 0 - focusRing.offset\n  const bgColor = base ? base.bg : 'var(--card-bg-color)'\n\n  return [\n    focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`,\n    border && focusRingBorderStyle(border),\n    focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`,\n    focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`,\n  ]\n    .filter(Boolean)\n    .join(',')\n}\n","import {CSSObject, getTheme_v2} from '@sanity/ui/theme'\n\nimport {_responsive} from '../helpers'\nimport {ThemeProps} from '../types'\nimport {ResponsiveGridItemStyleProps} from './types'\n\nexport function responsiveGridItemStyle(): Array<\n  (props: ResponsiveGridItemStyleProps & ThemeProps) => CSSObject[]\n> {\n  return [\n    responsiveGridItemRowStyle,\n    responsiveGridItemRowStartStyle,\n    responsiveGridItemRowEndStyle,\n    responsiveGridItemColumnStyle,\n    responsiveGridItemColumnStartStyle,\n    responsiveGridItemColumnEndStyle,\n  ]\n}\n\nconst GRID_ITEM_ROW = {\n  auto: 'auto',\n  full: '1 / -1',\n}\n\nconst GRID_ITEM_COLUMN = {\n  auto: 'auto',\n  full: '1 / -1',\n}\n\nfunction responsiveGridItemRowStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$row, (row) => {\n    if (typeof row === 'number') {\n      return {gridRow: `span ${row} / span ${row}`}\n    }\n\n    return {gridRow: GRID_ITEM_ROW[row]}\n  })\n}\n\nfunction responsiveGridItemRowStartStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$rowStart, (rowStart) => ({\n    gridRowStart: `${rowStart}`,\n  }))\n}\n\nfunction responsiveGridItemRowEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$rowEnd, (rowEnd) => ({gridRowEnd: `${rowEnd}`}))\n}\n\nfunction responsiveGridItemColumnStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$column, (column) => {\n    if (typeof column === 'number') {\n      return {gridColumn: `span ${column} / span ${column}`}\n    }\n\n    return {gridColumn: GRID_ITEM_COLUMN[column]}\n  })\n}\n\nfunction responsiveGridItemColumnStartStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$columnStart, (columnStart) => ({\n    gridColumnStart: `${columnStart}`,\n  }))\n}\n\nfunction responsiveGridItemColumnEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$columnEnd, (columnEnd) => ({\n    gridColumnEnd: `${columnEnd}`,\n  }))\n}\n","import {CSSObject, getTheme_v2} from '@sanity/ui/theme'\n\nimport {_responsive, rem} from '../helpers'\nimport {ThemeProps} from '../types'\nimport {ResponsiveGridStyleProps} from './types'\n\nconst GRID_CSS = {\n  '&&:not([hidden])': {\n    display: 'grid',\n  },\n  '&[data-as=\"ul\"],&[data-as=\"ol\"]': {\n    listStyle: 'none',\n  },\n}\n\nconst GRID_AUTO_COLUMS = {\n  auto: 'auto',\n  min: 'min-content',\n  max: 'max-content',\n  fr: 'minmax(0, 1fr)',\n}\n\nconst GRID_AUTO_ROWS = {\n  auto: 'auto',\n  min: 'min-content',\n  max: 'max-content',\n  fr: 'minmax(0, 1fr)',\n}\n\nexport function responsiveGridStyle(): Array<\n  CSSObject | ((props: ResponsiveGridStyleProps & ThemeProps) => CSSObject[])\n> {\n  return [\n    GRID_CSS,\n    responsiveGridAutoFlowStyle,\n    responsiveGridAutoRowsStyle,\n    responsiveGridAutoColsStyle,\n    responsiveGridColumnsStyle,\n    responsiveGridRowsStyle,\n    responsiveGridGapStyle,\n    responsiveGridGapXStyle,\n    responsiveGridGapYStyle,\n  ]\n}\n\nfunction responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$autoFlow, (autoFlow) => ({\n    gridAutoFlow: autoFlow,\n  }))\n}\n\nfunction responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$autoRows, (autoRows) => ({\n    gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows],\n  }))\n}\n\nfunction responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$autoCols, (autoCols) => ({\n    gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols],\n  }))\n}\n\nfunction responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$columns, (columns) => ({\n    gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`,\n  }))\n}\n\nfunction responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n  const {media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$rows, (rows) => ({\n    gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`,\n  }))\n}\n\nfunction responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n  const {media, space} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$gap, (gap) => ({\n    gridGap: gap ? rem(space[gap]) : undefined,\n  }))\n}\n\nfunction responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n  const {media, space} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$gapX, (gapX) => ({\n    columnGap: gapX ? rem(space[gapX]) : undefined,\n  }))\n}\n\nfunction responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n  const {media, space} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$gapY, (gapY) => ({\n    rowGap: gapY ? rem(space[gapY]) : undefined,\n  }))\n}\n","import {CSSObject, getTheme_v2} from '@sanity/ui/theme'\n\nimport {_responsive, rem} from '../helpers'\nimport {ThemeProps} from '../types'\n\nexport interface TextInputResponsivePaddingStyleProps {\n  $fontSize: number[]\n  $iconLeft?: boolean\n  $iconRight?: boolean\n  $padding: number[]\n  $space: number[]\n}\n\nexport function responsiveInputPaddingStyle(\n  props: TextInputResponsivePaddingStyleProps & ThemeProps,\n): CSSObject[] {\n  const {$fontSize, $iconLeft, $iconRight, $padding, $space} = props\n  const {font, media, space} = getTheme_v2(props.theme)\n  const len = Math.max($padding.length, $space.length, $fontSize.length)\n  const _padding: number[] = []\n  const _space: number[] = []\n  const _fontSize: number[] = []\n\n  for (let i = 0; i < len; i += 1) {\n    _fontSize[i] = $fontSize[i] === undefined ? _fontSize[i - 1] : $fontSize[i]\n    _padding[i] = $padding[i] === undefined ? _padding[i - 1] : $padding[i]\n    _space[i] = $space[i] === undefined ? _space[i - 1] : $space[i]\n  }\n\n  return _responsive(media, _padding, (_, i) => {\n    const size = font.text.sizes[_fontSize[i]] || font.text.sizes[2]\n    const emSize = size.lineHeight - size.ascenderHeight - size.descenderHeight\n    const p = space[_padding[i]]\n    const s = space[_space[i]]\n\n    const styles = {\n      paddingTop: rem(p - size.ascenderHeight),\n      paddingRight: rem(p),\n      paddingBottom: rem(p - size.descenderHeight),\n      paddingLeft: rem(p),\n    }\n\n    if ($iconRight) styles.paddingRight = rem(p + emSize + s)\n    if ($iconLeft) styles.paddingLeft = rem(p + emSize + s)\n\n    return styles\n  })\n}\n\nexport function responsiveInputPaddingIconsStyle(\n  props: {\n    $fontSize: number[]\n    $padding: number[]\n    $space: number[]\n  } & ThemeProps,\n): CSSObject[] {\n  return responsiveInputPaddingStyle({...props, $iconLeft: true, $iconRight: true})\n}\n\nexport function responsiveInputPaddingIconLeftStyle(\n  props: {\n    $fontSize: number[]\n    $padding: number[]\n    $space: number[]\n  } & ThemeProps,\n): CSSObject[] {\n  return responsiveInputPaddingStyle({...props, $iconLeft: true})\n}\n\nexport function responsiveInputPaddingIconRightStyle(\n  props: {\n    $fontSize: number[]\n    $padding: number[]\n    $space: number[]\n  } & ThemeProps,\n): CSSObject[] {\n  return responsiveInputPaddingStyle({...props, $iconRight: true})\n}\n","import {CSSObject, getTheme_v2, ThemeColorSchemeKey, ThemeFontWeightKey} from '@sanity/ui/theme'\nimport {css} from 'styled-components'\n\nimport {CardTone} from '../../types'\nimport {focusRingBorderStyle, focusRingStyle} from '../focusRing'\nimport {_responsive, rem} from '../helpers'\nimport {ThemeProps} from '../types'\n\n/**\n * @internal\n */\nexport interface TextInputInputStyleProps {\n  $fontSize: number[]\n  $scheme: ThemeColorSchemeKey\n  $tone: CardTone\n  $weight?: ThemeFontWeightKey\n}\n\n/**\n * @internal\n */\nexport interface TextInputRepresentationStyleProps {\n  $hasPrefix?: boolean\n  $hasSuffix?: boolean\n  $scheme: ThemeColorSchemeKey\n  $tone: CardTone\n  $unstableDisableFocusRing?: boolean\n}\n\nconst ROOT_STYLE = css`\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n`\n\nexport function textInputRootStyle(): ReturnType<typeof css> {\n  return ROOT_STYLE\n}\n\nexport function textInputBaseStyle(\n  props: TextInputInputStyleProps & ThemeProps,\n): ReturnType<typeof css> {\n  const {$scheme, $tone, $weight} = props\n  const {color, font} = getTheme_v2(props.theme)\n\n  return css`\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ${font.text.family};\n    font-weight: ${($weight && font.text.weights[$weight]) || font.text.weights.regular};\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome’s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {\n      --input-fg-color: ${color.input.default.enabled.fg};\n      --input-placeholder-color: ${color.input.default.enabled.placeholder};\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ${color.input.default.enabled.fg};\n        --input-placeholder-color: ${color.input.default.enabled.placeholder};\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ${color.input.default.disabled.fg};\n        --input-placeholder-color: ${color.input.default.disabled.placeholder};\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ${color.input.invalid.enabled.fg};\n        --input-placeholder-color: ${color.input.invalid.enabled.placeholder};\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ${color.input.default.readOnly.fg};\n        --input-placeholder-color: ${color.input.default.readOnly.placeholder};\n      }\n    }\n  `\n}\n\nexport function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemeProps): CSSObject[] {\n  const {font, media} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$fontSize, (sizeIndex) => {\n    const size = font.text.sizes[sizeIndex] || font.text.sizes[2]\n\n    return {\n      fontSize: rem(size.fontSize),\n      lineHeight: `${size.lineHeight / size.fontSize}`,\n    }\n  })\n}\n\nexport function textInputRepresentationStyle(\n  props: TextInputRepresentationStyleProps & ThemeProps,\n): ReturnType<typeof css> {\n  const {$hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing} = props\n  const {color, input} = getTheme_v2(props.theme)\n\n  return css`\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ${$hasPrefix ? 0 : undefined};\n    border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};\n    border-top-right-radius: ${$hasSuffix ? 0 : undefined};\n    border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};\n\n    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {\n      --card-bg-color: ${color.input.default.enabled.bg};\n      --card-fg-color: ${color.input.default.enabled.fg};\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ${focusRingBorderStyle({\n          color: color.input.default.enabled.border,\n          width: input.border.width,\n        })};\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ${color.input.invalid.enabled.bg};\n        --card-fg-color: ${color.input.invalid.enabled.fg};\n\n        &[data-border] {\n          --input-box-shadow: ${focusRingBorderStyle({\n            color: color.input.invalid.enabled.border,\n            width: input.border.width,\n          })};\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ${$unstableDisableFocusRing\n            ? undefined\n            : focusRingStyle({\n                border: {color: color.input.default.enabled.border, width: input.border.width},\n                focusRing: input.text.focusRing,\n              })};\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ${$unstableDisableFocusRing\n            ? undefined\n            : focusRingStyle({focusRing: input.text.focusRing})};\n        }\n      }\n\n      /* disabled */\n      *:not(:invalid):disabled + & {\n        --card-bg-color: ${color.input.default.disabled.bg} !important;\n        --card-fg-color: ${color.input.default.disabled.fg} !important;\n        --card-icon-color: ${color.input.default.disabled.fg} !important;\n\n        &[data-border] {\n          --input-box-shadow: ${focusRingBorderStyle({\n            color: color.input.default.disabled.border,\n            width: input.border.width,\n          })};\n        }\n      }\n\n      *:invalid:disabled + & {\n        --card-bg-color: ${color.input.invalid.disabled.bg} !important;\n        --card-fg-color: ${color.input.invalid.disabled.fg} !important;\n        --card-icon-color: ${color.input.invalid.disabled.fg} !important;\n\n        &[data-border] {\n          -