@sanity/ui 2.0.13-alpha.1 → 2.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.13-alpha.1",
+  "version": "2.0.13",
   "keywords": [
     "sanity",
     "ui",
@@ -13,7 +13,6 @@
   "bugs": {
     "url": "https://github.com/sanity-io/ui/issues"
   },
-  "type": "commonjs",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/sanity-io/ui.git"
@@ -107,8 +106,8 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.8",
-    "@sanity/color": "^3.0.0",
-    "@sanity/icons": "^2.11.3",
+    "@sanity/color": "^3.0.2",
+    "@sanity/icons": "^2.11.4",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
     "react-refractor": "^2.1.7"
@@ -121,38 +120,38 @@
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^5.1.4",
+    "@sanity/pkg-utils": "^5.1.6",
     "@sanity/semantic-release-preset": "^4.1.7",
-    "@sanity/ui-workshop": "^2.0.6",
-    "@storybook/addon-a11y": "^8.0.2",
-    "@storybook/addon-docs": "^8.0.2",
-    "@storybook/addon-essentials": "^8.0.2",
-    "@storybook/addon-interactions": "^8.0.2",
-    "@storybook/addon-links": "^8.0.2",
-    "@storybook/addon-storysource": "^8.0.2",
-    "@storybook/addon-themes": "^8.0.2",
-    "@storybook/blocks": "^8.0.2",
+    "@sanity/ui-workshop": "^2.0.7",
+    "@storybook/addon-a11y": "^8.0.5",
+    "@storybook/addon-docs": "^8.0.5",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-storysource": "^8.0.5",
+    "@storybook/addon-themes": "^8.0.5",
+    "@storybook/blocks": "^8.0.5",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^8.0.2",
-    "@storybook/react": "^8.0.2",
-    "@storybook/react-vite": "^8.0.2",
+    "@storybook/manager-api": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-vite": "^8.0.5",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.0.2",
+    "@storybook/theming": "^8.0.5",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.2.2",
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.5.9",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
     "@types/react-is": "^18.2.4",
     "@types/refractor": "^3.4.1",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
     "commitizen": "^4.3.0",
-    "cypress": "^13.7.0",
+    "cypress": "^13.7.1",
     "cypress-real-events": "^1.12.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.0",
@@ -173,19 +172,19 @@
     "module-alias": "^2.2.3",
     "npm-run-all2": "^5.0.2",
     "prettier": "^3.2.5",
-    "prettier-plugin-packagejson": "^2.4.12",
+    "prettier-plugin-packagejson": "^2.4.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "refractor": "^4.8.1",
     "rimraf": "^5.0.1",
-    "semantic-release": "^23.0.5",
+    "semantic-release": "^23.0.6",
     "start-server-and-test": "^2.0.3",
-    "storybook": "^8.0.2",
+    "storybook": "^8.0.5",
     "styled-components": "^6.1.8",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.4.2",
-    "vite": "^5.2.2",
+    "vite": "^5.2.7",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "peerDependencies": {
@@ -194,7 +193,7 @@
     "react-is": "^18",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@8.15.5",
+  "packageManager": "pnpm@8.15.6",
   "engines": {
     "node": ">=14.0.0"
   },

package/src/core/components/dialog/styles.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {_responsive, ThemeProps} from '../../styles'
 import {DialogPosition} from '../../types'
@@ -11,7 +11,7 @@ export interface ResponsiveDialogPositionStyleProps {
 }
 
 export function dialogStyle({theme}: ThemeProps): CSSObject {
-  const {color} = theme.sanity.v2
+  const {color} = getTheme_v2(theme)
 
   return {
     '&:not([hidden])': {
@@ -32,7 +32,7 @@ export function dialogStyle({theme}: ThemeProps): CSSObject {
 export function responsiveDialogPositionStyle(
   props: ResponsiveDialogPositionStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$position, (position) => ({'&&': {position}}))
 }

package/src/core/components/skeleton/textSkeleton.tsx

@@ -1,4 +1,4 @@
-import {ThemeFontKey} from '@sanity/ui/theme'
+import {ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
@@ -12,7 +12,7 @@ const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
   } & ThemeProps,
 ) => {
   const {$size, $style} = props
-  const {font, media} = props.theme.sanity.v2
+  const {font, media} = getTheme_v2(props.theme)
   const fontStyle = font[$style]
 
   const styles = _responsive(media, $size, (sizeIndex) => {

package/src/core/components/tree/style.ts

@@ -1,3 +1,4 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {_cardColorStyle} from '../../styles/card'
@@ -37,7 +38,7 @@ export function treeItemRootStyle(): ReturnType<typeof css> {
 
 export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css> {
   const $tone = 'default'
-  const {color} = props.theme.sanity.v2
+  const {color} = getTheme_v2(props.theme)
   const tone = color.selectable[$tone]
 
   return css`
@@ -91,7 +92,7 @@ export function treeItemBoxStyle(
   props: TreeItemBoxStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
   const {$level} = props
-  const {space} = props.theme.sanity.v2
+  const {space} = getTheme_v2(props.theme)
 
   return css`
     padding-left: ${rem(space[2] * $level)};

package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -1,7 +1,7 @@
 /** @jest-environment node */
 
+import {buildTheme} from '@sanity/ui/theme'
 import {renderToString, renderToStaticMarkup} from 'react-dom/server'
-import {buildTheme} from '../../../theme'
 import {ThemeProvider} from '../../theme'
 import {useMediaIndex} from './useMediaIndex'
 

package/src/core/primitives/_selectable/style.ts

@@ -1,3 +1,4 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {_cardColorStyle} from '../../styles/card'
@@ -38,7 +39,7 @@ export function selectableColorStyle(
   props: SelectableStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
   const {$tone} = props
-  const {color, style} = props.theme.sanity.v2
+  const {color, style} = getTheme_v2(props.theme)
   const tone = color.selectable[$tone]
 
   return css`

package/src/core/primitives/avatar/avatarCounter.tsx

@@ -1,3 +1,4 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef, useMemo} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
@@ -7,7 +8,7 @@ import {AvatarSize} from '../../types'
 import {Label} from '../label'
 
 function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
-  const {avatar, media} = props.theme.sanity.v2
+  const {avatar, media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$size, (size) => {
     const avatarSize = avatar.sizes[size]
@@ -23,7 +24,7 @@ function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeP
 }
 
 function _avatarCounterBaseStyle(props: ThemeProps) {
-  const {space} = props.theme.sanity.v2
+  const {space} = getTheme_v2(props.theme)
 
   return css`
     align-items: center;

package/src/core/primitives/avatar/avatarStack.tsx

@@ -1,3 +1,4 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {cloneElement, forwardRef} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
@@ -24,7 +25,7 @@ function avatarStackStyle() {
 }
 
 function responsiveAvatarStackSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
-  const {avatar, media} = props.theme.sanity.v2
+  const {avatar, media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$size, (size) => {
     const avatarSize = avatar.sizes[size]

package/src/core/primitives/avatar/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 {focusRingStyle} from '../../styles/internal'
 import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
@@ -57,7 +57,7 @@ function avatarArrowStyle(): CSSObject {
 
 export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSObject {
   const {$color} = props
-  const {avatar} = props.theme.sanity.v2
+  const {avatar} = getTheme_v2(props.theme)
 
   return {
     '--avatar-bg-color': `var(--card-avatar-${$color}-bg-color)`,
@@ -104,7 +104,7 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
 export function responsiveAvatarSizeStyle(
   props: ResponsiveAvatarSizeStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {avatar, media} = props.theme.sanity.v2
+  const {avatar, media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$size, (size) => {
     const avatarSize = avatar.sizes[size] || avatar.sizes[0]

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

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {_cardColorStyle} from '../../styles/card'
@@ -12,7 +12,7 @@ export function buttonBaseStyles(
   props: {$width?: ButtonWidth} & ThemeProps,
 ): ReturnType<typeof css> {
   const {$width} = props
-  const {style} = props.theme.sanity.v2
+  const {style} = getTheme_v2(props.theme)
 
   return css`
     ${style?.button};
@@ -67,7 +67,7 @@ export function buttonColorStyles(
   props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
 ): CSSObject[] {
   const {$mode} = props
-  const {button, color: baseColor, style} = props.theme.sanity.v2
+  const {button, color: baseColor, style} = getTheme_v2(props.theme)
   const shadow = props.$mode === 'ghost'
   const mode = baseColor.button[$mode] || baseColor.button.default
   const color = mode[props.$tone] || mode.default

package/src/core/primitives/card/__workshop__/selected.tsx

@@ -1,6 +1,6 @@
 import {EditIcon, PublishIcon} from '@sanity/icons'
 import {Box, Card, Container, Flex, Inline, Stack, Text, ThemeProps, useRootTheme} from '@sanity/ui'
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {ThemeColorStateToneKey, getTheme_v2} from '@sanity/ui/theme'
 import {useBoolean} from '@sanity/ui-workshop'
 import {styled, css} from 'styled-components'
 
@@ -10,7 +10,7 @@ const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((
   } & ThemeProps,
 ) => {
   const {$tone} = props
-  const {color} = props.theme.sanity.v2
+  const {color} = getTheme_v2(props.theme)
   const tone = color.button.default[$tone]
 
   return css`

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

@@ -1,3 +1,4 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {_cardColorStyle} from '../../styles/card'
@@ -12,7 +13,7 @@ export function cardStyle(
 
 export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
   const {$checkered} = props
-  const {space} = props.theme.sanity.v2
+  const {space} = getTheme_v2(props.theme)
 
   return css`
     ${$checkered &&
@@ -49,7 +50,7 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<ty
 
 export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
   const {$checkered, $focusRing} = props
-  const {card, color, style} = props.theme.sanity.v2
+  const {card, color, style} = getTheme_v2(props.theme)
   const border = {width: card.border.width, color: 'var(--card-border-color)'}
 
   return css`

package/src/core/primitives/checkbox/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'
@@ -10,7 +11,7 @@ export function checkboxBaseStyles(): ReturnType<typeof css> {
 }
 
 export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {color, input, radius} = props.theme.sanity.v2
+  const {color, input, radius} = getTheme_v2(props.theme)
   const {focusRing} = input.checkbox
 
   return css`

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

@@ -1,7 +1,10 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css, ExecutionContext} from 'styled-components'
 
 function codeSyntaxHighlightingStyle({theme}: ExecutionContext) {
-  const color = theme.sanity.v2.color.syntax
+  const {
+    color: {syntax: color},
+  } = getTheme_v2(theme)
 
   return {
     '&.atrule': {color: color.atrule},

package/src/core/primitives/container/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 {ResponsiveWidthStyleProps} from './types'
 
@@ -14,7 +14,7 @@ export function containerBaseStyle(): CSSObject {
 export function responsiveContainerWidthStyle(
   props: ResponsiveWidthStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {container, media} = props.theme.sanity.v2
+  const {container, media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$width, (val) => ({
     maxWidth: val === 'auto' ? 'none' : rem(container[val]),

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/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/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/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/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/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/text/__workshop__/colored.tsx

@@ -1,5 +1,5 @@
 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 {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
@@ -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/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,