@sanity/ui 2.0.13-alpha.2 → 2.0.13

package/src/core/primitives/grid/grid.tsx

@@ -1,5 +1,5 @@
 import {forwardRef} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
 import {Box, BoxProps} from '../box'

package/src/core/primitives/heading/heading.tsx

@@ -1,6 +1,6 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {
   ResponsiveFontStyleProps,

package/src/core/primitives/heading/styles.ts

@@ -1,10 +1,11 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {HeadingStyleProps} from './types'
 
 export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnType<typeof css> {
   const {$accent, $muted} = props
-  const {font} = props.theme.sanity.v2
+  const {font} = getTheme_v2(props.theme)
 
   return css`
     ${$accent &&

package/src/core/primitives/inline/inline.tsx

@@ -1,5 +1,5 @@
 import {forwardRef, useMemo} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {childrenToElementArray} from '../helpers'

package/src/core/primitives/inline/styles.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
@@ -18,7 +18,7 @@ export function inlineBaseStyle(): CSSObject {
 }
 
 export function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {
-  const {media, space} = props.theme.sanity.v2
+  const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$space, (spaceIndex) => {
     const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex])

package/src/core/primitives/kbd/kbd.tsx

@@ -1,5 +1,5 @@
 import {forwardRef} from 'react'
-import styled, {css} from 'styled-components'
+import {styled, css} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {Radius} from '../../types'

package/src/core/primitives/label/label.tsx

@@ -1,6 +1,6 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
 import {TextAlign} from '../../types'

package/src/core/primitives/label/styles.ts

@@ -1,3 +1,4 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 
@@ -5,7 +6,7 @@ export function labelBaseStyle(
   props: {$accent?: boolean; $muted: boolean} & ThemeProps,
 ): ReturnType<typeof css> {
   const {$accent, $muted} = props
-  const {font} = props.theme.sanity.v2
+  const {font} = getTheme_v2(props.theme)
 
   return css`
     text-transform: uppercase;

package/src/core/primitives/popover/popoverCard.tsx

@@ -2,7 +2,7 @@ import {Strategy} from '@floating-ui/react-dom'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
 import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
 import {Arrow, useLayer} from '../../utils'

package/src/core/primitives/radio/radio.tsx

@@ -1,5 +1,5 @@
 import {forwardRef} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {useForwardedRef, useCustomValidity} from '../../hooks'
 import {radioBaseStyle, inputElementStyle} from './styles'
 

package/src/core/primitives/radio/styles.ts

@@ -1,3 +1,4 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
@@ -17,7 +18,7 @@ export function radioBaseStyle(): ReturnType<typeof css> {
 }
 
 export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
-  const {color, input} = props.theme.sanity.v2
+  const {color, input} = getTheme_v2(props.theme)
   const dist = (input.radio.size - input.radio.markSize) / 2
 
   return css`

package/src/core/primitives/select/select.tsx

@@ -1,6 +1,6 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {forwardRef} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
 import {Radius} from '../../types'
 import {Box} from '../box'

package/src/core/primitives/select/styles.ts

@@ -1,4 +1,4 @@
-import {ThemeFontSize} from '@sanity/ui/theme'
+import {ThemeFontSize, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
@@ -24,7 +24,7 @@ function rootStyle(): ReturnType<typeof css> {
 }
 
 function inputBaseStyle(props: ThemeProps): ReturnType<typeof css> {
-  const {font} = props.theme.sanity.v2
+  const {font} = getTheme_v2(props.theme)
 
   return css`
     -webkit-font-smoothing: antialiased;
@@ -43,7 +43,7 @@ function inputBaseStyle(props: ThemeProps): ReturnType<typeof css> {
 }
 
 function inputColorStyle(props: ThemeProps) {
-  const {color, input} = props.theme.sanity.v2
+  const {color, input} = getTheme_v2(props.theme)
 
   return css`
     /* enabled */
@@ -102,7 +102,7 @@ function textSize(size: ThemeFontSize) {
 
 function inputTextSizeStyle(props: {$fontSize: number[]} & ThemeProps) {
   const {$fontSize} = props
-  const {font, media} = props.theme.sanity.v2
+  const {font, media} = getTheme_v2(props.theme)
 
   return _responsive(media, $fontSize, (sizeIndex) =>
     textSize(font.text.sizes[sizeIndex] || font.text.sizes[2]),
@@ -129,7 +129,7 @@ function inputStyle(): Array<
 }
 
 function iconBoxStyle(props: ThemeProps): ReturnType<typeof css> {
-  const {color} = props.theme.sanity.v2
+  const {color} = getTheme_v2(props.theme)
 
   return css`
     pointer-events: none;

package/src/core/primitives/spinner/spinner.tsx

@@ -1,6 +1,6 @@
 import {SpinnerIcon} from '@sanity/icons'
 import {forwardRef} from 'react'
-import styled, {keyframes} from 'styled-components'
+import {styled, keyframes} from 'styled-components'
 import {Text} from '../text'
 
 /**

package/src/core/primitives/stack/stack.tsx

@@ -1,5 +1,5 @@
 import {forwardRef} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {stackBaseStyle, responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps} from './styles'

package/src/core/primitives/stack/styles.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
 
 export interface ResponsiveStackSpaceStyleProps {
@@ -23,7 +23,7 @@ export function stackBaseStyle(): CSSObject {
 export function responsiveStackSpaceStyle(
   props: ResponsiveStackSpaceStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {media, space} = props.theme.sanity.v2
+  const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$space, (spaceIndex) => ({
     gridGap: rem(space[spaceIndex]),

package/src/core/primitives/switch/styles.ts

@@ -1,3 +1,4 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
@@ -35,7 +36,7 @@ export function switchInputStyles(): ReturnType<typeof css> {
 
 /* Representation */
 export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {color, input} = props.theme.sanity.v2
+  const {color, input} = getTheme_v2(props.theme)
 
   return css`
     --switch-bg-color: ${color.input.default.enabled.border};
@@ -111,7 +112,7 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
 
 /* Track */
 export function switchTrackStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {input} = props.theme.sanity.v2
+  const {input} = getTheme_v2(props.theme)
 
   return css`
     &:not([hidden]) {
@@ -132,7 +133,7 @@ export function switchThumbStyles(
   props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps,
 ): ReturnType<typeof css> {
   const {$indeterminate} = props
-  const {input} = props.theme.sanity.v2
+  const {input} = getTheme_v2(props.theme)
   const trackWidth = input.switch.width
   const trackHeight = input.switch.height
   const trackPadding = input.switch.padding

package/src/core/primitives/switch/switch.tsx

@@ -1,5 +1,5 @@
 import {forwardRef, useEffect} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {useForwardedRef} from '../../hooks'
 import {
   switchBaseStyles,

package/src/core/primitives/text/__workshop__/colored.tsx

@@ -1,7 +1,7 @@
 import {Flex, Text, ThemeProps} from '@sanity/ui'
-import {ThemeColorAvatarColorKey, ThemeColorSpotKey} from '@sanity/ui/theme'
+import {ThemeColorAvatarColorKey, ThemeColorSpotKey, getTheme_v2} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
-import styled, {css} from 'styled-components'
+import {styled, css} from 'styled-components'
 import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
 
 const ColoredText = styled(Text)<{$color?: ThemeColorSpotKey}>((
@@ -9,7 +9,7 @@ const ColoredText = styled(Text)<{$color?: ThemeColorSpotKey}>((
     $color?: ThemeColorAvatarColorKey
   } & ThemeProps,
 ) => {
-  const {color} = props.theme.sanity.v2
+  const {color} = getTheme_v2(props.theme)
 
   return css`
     color: ${color.avatar[props.$color || 'gray'].bg};

package/src/core/primitives/text/styles.ts

@@ -1,3 +1,4 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 
@@ -5,7 +6,7 @@ export function textBaseStyle(
   props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
 ): ReturnType<typeof css> {
   const {$accent, $muted} = props
-  const {font} = props.theme.sanity.v2
+  const {font} = getTheme_v2(props.theme)
 
   return css`
     color: var(--card-fg-color);

package/src/core/primitives/text/text.tsx

@@ -1,6 +1,6 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {
   ResponsiveFontStyleProps,

package/src/core/primitives/textArea/textArea.tsx

@@ -1,6 +1,6 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
 import {
   responsiveInputPaddingStyle,

package/src/core/primitives/textInput/textInput.tsx

@@ -2,7 +2,7 @@ import {CloseIcon} from '@sanity/icons'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {createElement, forwardRef, isValidElement, useCallback, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp, useForwardedRef, useCustomValidity} from '../../hooks'
 import {

package/src/core/primitives/tooltip/tooltip.tsx

@@ -22,7 +22,7 @@ import {
   ForwardedRef,
   useId,
 } from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {useArrayProp, useForwardedRef, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'

package/src/core/primitives/tooltip/tooltipCard.tsx

@@ -1,7 +1,7 @@
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
 import {Placement, Radius} from '../../types'
 import {Arrow} from '../../utils'

package/src/core/styles/border/borderStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBorderStyleProps} from './types'
@@ -10,7 +10,7 @@ export function responsiveBorderStyle(): Array<
 }
 
 function border(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {card, media} = props.theme.sanity.v2
+  const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$border, (value) =>
@@ -19,7 +19,7 @@ function border(props: ResponsiveBorderStyleProps & ThemeProps) {
 }
 
 function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {card, media} = props.theme.sanity.v2
+  const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderTop, (value) =>
@@ -28,7 +28,7 @@ function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
 }
 
 function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {card, media} = props.theme.sanity.v2
+  const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderRight, (value) =>
@@ -37,7 +37,7 @@ function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
 }
 
 function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {card, media} = props.theme.sanity.v2
+  const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderBottom, (value) =>
@@ -46,7 +46,7 @@ function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
 }
 
 function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {card, media} = props.theme.sanity.v2
+  const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderLeft, (value) =>

package/src/core/styles/box/boxStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {Property} from 'csstype'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
@@ -36,7 +36,7 @@ export function responsiveBoxStyle(): Array<
 }
 
 function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$display, (display) => ({
     '&:not([hidden])': {display},
@@ -44,7 +44,7 @@ function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps)
 }
 
 function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$sizing, (sizing) => ({
     boxSizing: BOX_SIZING[sizing],
@@ -52,7 +52,7 @@ function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
 }
 
 function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$height, (height) => ({
     height: BOX_HEIGHT[height],
@@ -60,7 +60,7 @@ function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
 }
 
 function responsiveBoxOverflowStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$overflow, (overflow) => ({
     overflow,

package/src/core/styles/flex/flexItemStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {EMPTY_ARRAY} from '../../constants'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
@@ -18,7 +18,7 @@ export function flexItemStyle(): Array<
 export function responsiveFlexItemStyle(
   props: ResponsiveFlexItemStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   if (!props.$flex) return EMPTY_ARRAY
 

package/src/core/styles/flex/flexStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexStyleProps} from './types'
@@ -25,7 +25,7 @@ export function responsiveFlexStyle(): Array<
 export function responsiveFlexAlignStyle(
   props: ResponsiveFlexStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$align, (align) => {
     return {alignItems: align}
@@ -33,7 +33,7 @@ export function responsiveFlexAlignStyle(
 }
 
 function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
-  const {media, space} = props.theme.sanity.v2
+  const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$gap, (gap) => ({
     gap: gap ? rem(space[gap]) : undefined,
@@ -41,7 +41,7 @@ function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
 }
 
 export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$wrap, (wrap) => {
     return {flexWrap: wrap}
@@ -51,7 +51,7 @@ export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeP
 export function responsiveFlexJustifyStyle(
   props: ResponsiveFlexStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$justify, (justify) => {
     return {justifyContent: justify}
@@ -61,7 +61,7 @@ export function responsiveFlexJustifyStyle(
 export function responsiveFlexDirectionStyle(
   props: ResponsiveFlexStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$direction, (direction) => {
     return {flexDirection: direction}

package/src/core/styles/font/responsiveFont.ts

@@ -1,4 +1,4 @@
-import {ThemeFontSize, ThemeFontKey} from '@sanity/ui/theme'
+import {ThemeFontSize, ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
@@ -13,7 +13,7 @@ export function responsiveFont(
   props: ResponsiveFontStyleProps & ThemeProps,
 ): CSSObject[] {
   const {$size, $weight} = props
-  const {font, media} = props.theme.sanity.v2
+  const {font, media} = getTheme_v2(props.theme)
   const {family, sizes, weights} = font[fontKey]
   const fontWeight = ($weight && weights[$weight]) || weights.regular
 

package/src/core/styles/font/textAlignStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveTextAlignStyleProps} from './types'
@@ -10,7 +10,7 @@ import {ResponsiveTextAlignStyleProps} from './types'
 export function responsiveTextAlignStyle(
   props: ResponsiveTextAlignStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$align, (textAlign) => {
     return {textAlign}

package/src/core/styles/grid/gridItemStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridItemStyleProps} from './types'
@@ -27,7 +27,7 @@ const GRID_ITEM_COLUMN = {
 }
 
 function responsiveGridItemRowStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$row, (row) => {
     if (typeof row === 'number') {
@@ -39,7 +39,7 @@ function responsiveGridItemRowStyle(props: ResponsiveGridItemStyleProps & ThemeP
 }
 
 function responsiveGridItemRowStartStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$rowStart, (rowStart) => ({
     gridRowStart: rowStart,
@@ -47,13 +47,13 @@ function responsiveGridItemRowStartStyle(props: ResponsiveGridItemStyleProps & T
 }
 
 function responsiveGridItemRowEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$rowEnd, (rowEnd) => ({gridRowEnd: rowEnd}))
 }
 
 function responsiveGridItemColumnStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$column, (column) => {
     if (typeof column === 'number') {
@@ -65,7 +65,7 @@ function responsiveGridItemColumnStyle(props: ResponsiveGridItemStyleProps & The
 }
 
 function responsiveGridItemColumnStartStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$columnStart, (columnStart) => ({
     gridColumnStart: columnStart,
@@ -73,7 +73,7 @@ function responsiveGridItemColumnStartStyle(props: ResponsiveGridItemStyleProps
 }
 
 function responsiveGridItemColumnEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$columnEnd, (columnEnd) => ({
     gridColumnEnd: columnEnd,

package/src/core/styles/grid/gridStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridStyleProps} from './types'
@@ -43,7 +43,7 @@ export function responsiveGridStyle(): Array<
 }
 
 function responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$autoFlow, (autoFlow) => ({
     gridAutoFlow: autoFlow,
@@ -51,7 +51,7 @@ function responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProp
 }
 
 function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$autoRows, (autoRows) => ({
     gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows],
@@ -59,7 +59,7 @@ function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProp
 }
 
 function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$autoCols, (autoCols) => ({
     gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols],
@@ -67,7 +67,7 @@ function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProp
 }
 
 function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$columns, (columns) => ({
     gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`,
@@ -75,7 +75,7 @@ function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps
 }
 
 function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$rows, (rows) => ({
     gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`,
@@ -83,7 +83,7 @@ function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
 }
 
 function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media, space} = props.theme.sanity.v2
+  const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$gap, (gap) => ({
     gridGap: gap ? rem(space[gap]) : undefined,
@@ -91,7 +91,7 @@ function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
 }
 
 function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media, space} = props.theme.sanity.v2
+  const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$gapX, (gapX) => ({
     columnGap: gapX ? rem(space[gapX]) : undefined,
@@ -99,7 +99,7 @@ function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
 }
 
 function responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media, space} = props.theme.sanity.v2
+  const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$gapY, (gapY) => ({
     rowGap: gapY ? rem(space[gapY]) : undefined,