@sanity/ui 2.0.13-alpha.2 → 2.0.14

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

@@ -6,10 +6,10 @@ import {
   offset,
   shift,
   useFloating,
-  Middleware,
-  RootBoundary,
+  type Middleware,
+  type RootBoundary,
 } from '@floating-ui/react-dom'
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {AnimatePresence} from 'framer-motion'
 import {
   cloneElement,
@@ -19,24 +19,25 @@ import {
   useMemo,
   useRef,
   useState,
-  ForwardedRef,
+  type ForwardedRef,
   useId,
+  useSyncExternalStore,
 } 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'
 import {useTheme_v2} from '../../theme'
-import {Placement} from '../../types'
+import type {Placement} from '../../types'
 import {
   ConditionalWrapper,
   Layer,
-  LayerProps,
+  type LayerProps,
   Portal,
   useBoundaryElement,
   usePortal,
 } from '../../utils'
-import {Delay} from '../types'
+import type {Delay} from '../types'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_TOOLTIP_DISTANCE,
@@ -131,17 +132,23 @@ export const Tooltip = forwardRef(function Tooltip(
   const portalElement =
     typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
 
+  const documentBodyOffsetWidth = useSyncExternalStore(
+    emptySubscribe,
+    () => document.body.offsetWidth,
+    // We don't actually know what the width of the body is during SSR, so we'll just assume it's 800px or larger
+    () => 800,
+  )
   // Get the maximum tooltip width (sans tooltip padding)
   // Tooltip width should never exceed the width of either any supplied boundary or portal element.
   // If both portal and boundary elements are provided, use the smaller width of the two.
   const tooltipWidth = useMemo(() => {
     const availableWidths = [
       ...(boundaryElement ? [boundaryElement.offsetWidth] : []),
-      portalElement?.offsetWidth || document.body.offsetWidth,
+      portalElement?.offsetWidth || documentBodyOffsetWidth,
     ]
 
     return Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2
-  }, [boundaryElement, portalElement?.offsetWidth])
+  }, [boundaryElement, documentBodyOffsetWidth, portalElement?.offsetWidth])
 
   const middleware = useMemo(() => {
     const ret: Middleware[] = []
@@ -242,14 +249,14 @@ export const Tooltip = forwardRef(function Tooltip(
   )
   const handleClick = useCallback(
     (e: MouseEvent) => {
-      handleIsOpenChange(false, true), [handleIsOpenChange]
+      handleIsOpenChange(false, true)
       childProp?.props.onClick?.(e)
     },
     [childProp?.props, handleIsOpenChange],
   )
   const handleContextMenu = useCallback(
     (e: MouseEvent) => {
-      handleIsOpenChange(false, true), [handleIsOpenChange]
+      handleIsOpenChange(false, true)
       childProp?.props.onContextMenu?.(e)
     },
     [childProp?.props, handleIsOpenChange],
@@ -446,3 +453,5 @@ export const Tooltip = forwardRef(function Tooltip(
     </>
   )
 })
+
+const emptySubscribe = () => () => {}

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}