@sanity/ui
Version:
The Sanity UI components.
1 lines • 488 kB
Source Map (JSON)
{"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/hooks/useArrayProp.ts","../../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/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/hooks/useMediaIndex/useMediaIndex.ts","../../src/core/hooks/usePrefersDark.ts","../../src/core/hooks/usePrefersReducedMotion.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/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 // @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 // @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","import {useState} from 'react'\n\nimport {_getArrayProp} from '../styles'\n\n/** @beta */\nexport type ArrayPropPrimitive = string | number | boolean | undefined | null\n\n/**\n * This API might change. DO NOT USE IN PRODUCTION.\n * @beta\n */\nexport function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(\n val: T | T[] | undefined,\n defaultVal?: T[],\n): T[] {\n const [[cachedVal, cachedHash], setCache] = useState<[T[], string]>(() => [\n _getArrayProp(val, defaultVal),\n JSON.stringify(val ?? defaultVal),\n ])\n\n const hash = JSON.stringify(val ?? defaultVal)\n\n if (hash !== cachedHash) {\n // If the cached hash has changed, update the cache right away.\n // Calling setState during render is fine in this case, and preferred over a useEffect loop\n // https://19.react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes\n setCache([_getArrayProp(val, defaultVal), hash])\n }\n\n return cachedVal\n}\n","import {useDebugValue, useEffect} from 'react'\nimport {useEffectEvent} from 'use-effect-event'\n\nimport {EMPTY_ARRAY} from '../constants'\n\n/**\n * @public\n */\nexport type ClickOutsideEventListener = (event: MouseEvent) => void\n\n/**\n * @public\n */\nexport type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]\n\n/**\n * @public\n */\nexport function useClickOutsideEvent(\n listener: ClickOutsideEventListener | false | undefined,\n elementsArg: () => ClickOutsideEventElements = () => EMPTY_ARRAY,\n boundaryElement?: () => HTMLElement | null,\n): void {\n /**\n * The `useEffectEvent` hook allow us to always see the latest value of `listener`, `elementsArg` and `boundaryElement` without needing to\n * juggle `useState`, `useRef` and `useState` to make sure the `mousedown` event listener isn't constantly being added and removed.\n */\n const onEvent = useEffectEvent((evt: MouseEvent) => {\n if (!listener) {\n return\n }\n\n const target = evt.target\n\n if (!(target instanceof Node)) {\n return\n }\n\n const resolvedBoundaryElement = boundaryElement?.()\n\n if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target)) {\n return\n }\n\n const elements = elementsArg().flat()\n\n for (const el of elements) {\n if (!el) continue\n\n if (target === el || el.contains(target)) {\n return\n }\n }\n\n listener(evt)\n })\n\n const hasListener = Boolean(listener)\n\n useEffect(() => {\n if (!hasListener) return undefined\n\n const handleEvent = (evt: MouseEvent) => onEvent(evt)\n\n document.addEventListener('mousedown', handleEvent)\n\n return () => {\n document.removeEventListener('mousedown', handleEvent)\n }\n }, [hasListener])\n\n useDebugValue(listener ? 'MouseDown On' : 'MouseDown Off')\n}\n","import {useEffect} from 'react'\n\n/**\n * @beta\n */\nexport function useCustomValidity(\n ref: {current: null | {setCustomValidity: (validity: string) => void}},\n customValidity: string | undefined,\n): void {\n useEffect(() => {\n ref.current?.setCustomValidity(customValidity || '')\n }, [customValidity, ref])\n}\n","import {ResizeObserver as ResizeObserverPolyfill} from '@juggle/resize-observer'\n\n/**\n * @internal\n */\nexport const _ResizeObserver: typeof ResizeObserver =\n typeof document !== 'undefined' && typeof window !== 'undefined' && window.ResizeObserver\n ? window.ResizeObserver\n : ResizeObserverPolyfill\n","import {_ResizeObserver} from './resizeObserver'\n\n/**\n * @beta\n */\nexport interface ElementRectValue {\n width: number\n height: number\n}\n\n/**\n * @beta\n */\nexport interface ElementSize {\n content: ElementRectValue\n border: ElementRectValue\n\n /** @deprecated INTERNAL ONLY */\n _contentRect: DOMRectReadOnly\n}\n\n/**\n * @internal\n */\nexport type _ElementSizeSubscriber = (elementRect: ElementSize) => void\n\n/**\n * @internal\n */\nexport interface _ElementSizeObserver {\n subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void\n}\n\n/**\n * @internal\n */\nexport interface _ElementSizeListener {\n subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void\n}\n\n// Initialize element size observer\n// NOTE: this should NOT have size effects\n/**\n * @internal\n */\nexport const _elementSizeObserver = _createElementSizeObserver()\n\nfunction _createElementRectValueListener(): _ElementSizeListener {\n return {\n subscribe(element, subscriber) {\n const resizeObserver = new _ResizeObserver(([entry]) => {\n subscriber({\n _contentRect: entry.contentRect,\n border: {\n width: entry.borderBoxSize[0].inlineSize,\n height: entry.borderBoxSize[0].blockSize,\n },\n content: {\n width: entry.contentRect.width,\n height: entry.contentRect.height,\n },\n })\n })\n\n resizeObserver.observe(element)\n\n return () => {\n resizeObserver.unobserve(element)\n resizeObserver.disconnect()\n }\n },\n }\n}\n\nfunction _createElementSizeObserver(): _ElementSizeObserver {\n const disposeCache = new WeakMap<HTMLElement, () => void>()\n const subscribersCache = new WeakMap<HTMLElement, _ElementSizeSubscriber[]>()\n\n return {\n subscribe(element, subscriber) {\n const subscribers = subscribersCache.get(element) || []\n\n let dispose = disposeCache.get(element)\n\n if (!subscribersCache.has(element)) {\n subscribersCache.set(element, subscribers)\n\n const listener = _createElementRectValueListener()\n\n // listen\n dispose = listener.subscribe(element, (elementRect) => {\n for (const sub of subscribers) {\n sub(elementRect)\n }\n })\n }\n\n subscribers.push(subscriber)\n\n return () => {\n // dispose\n\n const idx = subscribers.indexOf(subscriber)\n\n if (idx > -1) {\n subscribers.splice(idx, 1)\n }\n\n if (subscribers.length === 0) {\n // unlisten\n if (dispose) dispose()\n }\n }\n },\n }\n}\n","import {useEffect, useState} from 'react'\n\nimport {_elementSizeObserver, ElementSize} from '../observers/elementSizeObserver'\n\n/**\n * Subscribe to the size of a DOM element.\n * @beta\n */\nexport function useElementSize(element: HTMLElement | null): ElementSize | null {\n const [size, setSize] = useState<ElementSize | null>(null)\n\n useEffect(() => {\n if (!element) return undefined\n\n return _elementSizeObserver.subscribe(element, setSize)\n }, [element])\n\n return size\n}\n","import {useEffect} from 'react'\nimport {useEffectEvent} from 'use-effect-event'\n\n/**\n * @beta\n */\nexport function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void): void {\n const handleKeyDown = useEffectEvent((event: KeyboardEvent) => onKeyDown(event))\n\n useEffect(() => {\n const handler = (event: KeyboardEvent) => handleKeyDown(event)\n\n window.addEventListener('keydown', handler)\n\n return () => window.removeEventListener('keydown', handler)\n }, [])\n}\n","import {useCallback, useDebugValue, useSyncExternalStore} from 'react'\n\n/**\n * Efficiently subscribes to `window.matchMedia` queries\n *\n * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)\n *\n * @public\n */\nexport function useMatchMedia(\n mediaQueryString: `(${string})`,\n getServerSnapshot?: () => boolean,\n): boolean {\n useDebugValue(mediaQueryString)\n\n return useSyncExternalStore(\n useCallback(\n (onStoreChange) => {\n const media = window.matchMedia(mediaQueryString)\n media.addEventListener('change', onStoreChange)\n return () => media.removeEventListener('change', onStoreChange)\n },\n [mediaQueryString],\n ),\n () => window.matchMedia(mediaQueryString).matches,\n getServerSnapshot,\n )\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 return createContext<ContextType>(defaultValue)\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 {useMemo, useSyncExternalStore} from 'react'\n\nimport {useTheme_v2} from '../../theme'\n\n/**\n * @internal\n */\nexport interface _MediaStore {\n subscribe: (onStoreChange: () => void) => () => void\n getSnapshot: () => number\n}\n\ntype MediaQueryMinWidth = `(min-width: ${number}px)`\ntype MediaQueryMaxWidth = `(max-width: ${number}px)`\ntype MediaQueryMinMaxWidth = `${MediaQueryMinWidth} and ${MediaQueryMaxWidth}`\ntype MediaQuery = `screen and ${MediaQueryMinWidth | MediaQueryMaxWidth | MediaQueryMinMaxWidth}`\n\nfunction _getMediaQuery(media: number[], index: number): MediaQuery {\n if (index === 0) {\n return `screen and (max-width: ${media[index] - 1}px)`\n }\n\n if (index === media.length) {\n return `screen and (min-width: ${media[index - 1]}px)`\n }\n\n return `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`\n}\n\nfunction _createMediaStore(media: number[]): _MediaStore {\n const mediaLen = media.length\n let sizes: {mq: MediaQueryList; index: number}[]\n\n // The _createMediaStore function is called in both server and client environments.\n // However since subscribe and getSnapshot are only called on the client we lazy init what we need for them\n // so that we don't need to run checks for wether it's safe to call `window.matchMedia`\n const getSizes = () => {\n if (!sizes) {\n sizes = []\n\n for (let index = mediaLen; index > -1; index -= 1) {\n const mediaQuery = _getMediaQuery(media, index)\n\n sizes.push({index, mq: window.matchMedia(mediaQuery)})\n }\n }\n\n return sizes\n }\n\n const getSnapshot = () => {\n for (const {index, mq} of getSizes()) {\n if (mq.matches) return index\n }\n\n return 0\n }\n\n const subscribe = (onStoreChange: () => void) => {\n const disposeFns: (() => void)[] = []\n\n for (const {mq} of getSizes()) {\n const handleChange = () => {\n if (mq.matches) onStoreChange()\n }\n\n mq.addEventListener('change', handleChange)\n\n disposeFns.push(() => mq.removeEventListener('change', handleChange))\n }\n\n return () => {\n for (const disposeFn of disposeFns) {\n disposeFn()\n }\n }\n }\n\n return {getSnapshot, subscribe}\n}\n\n/**\n * Only called during server-side rendering, and hydration if using hydrateRoot\n * Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query\n * and we assume `(prefers-color-scheme: light)` since it's the most common scheme\n *\n * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering\n */\nfunction getServerSnapshot() {\n return 0\n}\n\n/**\n * This API might change. DO NOT USE IN PRODUCTION.\n * @beta\n */\nexport function useMediaIndex(): number {\n const {media} = useTheme_v2()\n const store = useMemo(() => _createMediaStore(media), [media])\n\n return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)\n}\n","import {useMatchMedia} from './useMatchMedia'\n\n/**\n * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.\n *\n * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)\n *\n * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.\n * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme\n * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df\n *\n * @public\n */\nexport function usePrefersDark(getServerSnapshot = () => false): boolean {\n return useMatchMedia('(prefers-color-scheme: dark)', getServerSnapshot)\n}\n","import {useMatchMedia} from './useMatchMedia'\n\n/**\n * Returns true if motion should be reduced\n *\n * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)\n *\n * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.\n * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion\n * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b\n *\n * @public\n */\nexport function usePrefersReducedMotion(getServerSnapshot = () => false): boolean {\n return useMatchMedia('(prefers-reduced-motion: reduce)', getServerSnapshot)\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