@sanity/ui 2.0.12 → 2.0.13-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.12",
+  "version": "2.0.13-alpha.2",
   "keywords": [
     "sanity",
     "ui",

package/src/core/components/autocomplete/autocomplete.styles.tsx

@@ -1,5 +1,5 @@
 import {SpinnerIcon} from '@sanity/icons'
-import {styled, keyframes} from 'styled-components'
+import styled, {keyframes} from 'styled-components'
 import {Box} from '../../primitives'
 
 /**

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

@@ -1,4 +1,4 @@
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {Button} from '../../primitives'
 
 export const Root = styled.ol`

package/src/core/components/dialog/__workshop__/panes.tsx

@@ -1,5 +1,5 @@
 import {useCallback, useState} from 'react'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {Box, Button, Card, Flex} from '../../../primitives'
 import {BoundaryElementProvider, PortalProvider} from '../../../utils'
 import {Menu, MenuButton, MenuItem} from '../../menu'

package/src/core/components/dialog/dialog.tsx

@@ -1,7 +1,7 @@
 import {CloseIcon} from '@sanity/icons'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {
   containsOrEqualsElement,
   focusFirstDescendant,

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

@@ -1,4 +1,4 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+import {CSSObject} 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} = getTheme_v2(theme)
+  const {color} = theme.sanity.v2
 
   return {
     '&:not([hidden])': {
@@ -32,7 +32,7 @@ export function dialogStyle({theme}: ThemeProps): CSSObject {
 export function responsiveDialogPositionStyle(
   props: ResponsiveDialogPositionStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {media} = getTheme_v2(props.theme)
+  const {media} = props.theme.sanity.v2
 
   return _responsive(media, props.$position, (position) => ({'&&': {position}}))
 }

package/src/core/components/hotkeys/hotkeys.tsx

@@ -1,5 +1,5 @@
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Inline, KBD} from '../../primitives'
 import {Radius} from '../../types'

package/src/core/components/menu/menu.tsx

@@ -1,5 +1,5 @@
 import {forwardRef, useCallback, useEffect, useMemo} from 'react'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
 import {Box, Stack} from '../../primitives'
 import {ResponsivePaddingProps} from '../../primitives/types'

package/src/core/components/menu/menuDivider.ts

@@ -1,4 +1,4 @@
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 
 /**
  * @public

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

@@ -1,5 +1,5 @@
 import {forwardRef, useEffect, useState} from 'react'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Box} from '../../primitives'
 import {BoxProps, ResponsiveRadiusProps} from '../../primitives'

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

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

package/src/core/components/tab/tab.tsx

@@ -1,5 +1,5 @@
 import {forwardRef, useCallback, useEffect, useRef} from 'react'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {useForwardedRef} from '../../hooks'
 import {Button} from '../../primitives'
 import {ButtonTone} from '../../types'

package/src/core/components/tab/tabList.tsx

@@ -1,5 +1,5 @@
 import {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {Inline, InlineProps} from '../../primitives'
 
 /**

package/src/core/components/toast/toast.tsx

@@ -1,6 +1,6 @@
 import {CloseIcon} from '@sanity/icons'
 import {ThemeColorToneKey} from '@sanity/ui/theme'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
 import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
 import type {ButtonTone} from '../../types'

package/src/core/components/toast/toastProvider.tsx

@@ -1,6 +1,6 @@
 import {AnimatePresence, motion, type Variants} from 'framer-motion'
 import {useMemo, useRef, useState, startTransition, useEffect} from 'react'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
 import {useMounted} from '../../hooks/useMounted'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'

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

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

package/src/core/components/tree/treeItem.tsx

@@ -1,7 +1,7 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {createElement, memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {Box, BoxProps, Flex, Text} from '../../primitives'
 import {
   treeItemRootStyle,

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/selectable.tsx

@@ -1,4 +1,4 @@
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/radius'
 import {Box} from '../box'
 import {selectableBaseStyle, selectableColorStyle, SelectableStyleProps} from './style'

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

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

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

@@ -1,7 +1,7 @@
 import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {useTheme_v2} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'

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

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

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

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

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

@@ -1,4 +1,4 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+import {CSSObject} 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} = getTheme_v2(props.theme)
+  const {avatar} = props.theme.sanity.v2
 
   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} = getTheme_v2(props.theme)
+  const {avatar, media} = props.theme.sanity.v2
 
   return _responsive(media, props.$size, (size) => {
     const avatarSize = avatar.sizes[size] || avatar.sizes[0]

package/src/core/primitives/badge/badge.tsx

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

package/src/core/primitives/box/box.tsx

@@ -1,5 +1,5 @@
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {
   boxStyle,

package/src/core/primitives/button/__workshop__/sanityUploadButton.tsx

@@ -1,6 +1,6 @@
 import {UploadIcon} from '@sanity/icons'
 import {Button, Flex} from '@sanity/ui'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 
 const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
   & input {

package/src/core/primitives/button/__workshop__/styled1.tsx

@@ -1,5 +1,5 @@
 import {Button, Flex} from '@sanity/ui'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 
 const StyledButton1 = styled.a`
   &:hover {

package/src/core/primitives/button/__workshop__/styled2.tsx

@@ -1,5 +1,5 @@
 import {Button, Flex} from '@sanity/ui'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 
 const StyledButton2 = styled(Button)<{$color?: boolean}>`
   &:hover {

package/src/core/primitives/button/button.tsx

@@ -1,6 +1,6 @@
 import {createElement, forwardRef, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'

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

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

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

@@ -1,5 +1,5 @@
 import {Card, Flex, Text} from '@sanity/ui'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 
 const StyledCard = styled(Card).attrs({forwardedAs: 'ol'})``
 

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

@@ -1,7 +1,7 @@
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {
   responsiveBorderStyle,

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

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

package/src/core/primitives/checkbox/checkbox.tsx

@@ -1,6 +1,6 @@
 import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
 import {forwardRef, useEffect} from 'react'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity} from '../../hooks'
 import {checkboxBaseStyles, inputElementStyles} from './styles'
 

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

@@ -1,4 +1,3 @@
-import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
@@ -11,7 +10,7 @@ export function checkboxBaseStyles(): ReturnType<typeof css> {
 }
 
 export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {color, input, radius} = getTheme_v2(props.theme)
+  const {color, input, radius} = props.theme.sanity.v2
   const {focusRing} = input.checkbox
 
   return css`

package/src/core/primitives/code/code.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {forwardRef} from 'react'
 import Refractor from 'react-refractor'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
 import {codeBaseStyle} from './styles'

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

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

package/src/core/primitives/container/container.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 {ResponsiveWidthProps} from '../types'

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

@@ -1,4 +1,4 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+import {CSSObject} 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} = getTheme_v2(props.theme)
+  const {container, media} = props.theme.sanity.v2
 
   return _responsive(media, props.$width, (val) => ({
     maxWidth: val === 'auto' ? 'none' : rem(container[val]),

package/src/core/primitives/flex/__workshop__/example.tsx

@@ -1,6 +1,6 @@
 import {Card, Code, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '../../../__workshop__/constants'
 
 const DebugCard = styled(Card)`

package/src/core/primitives/flex/flex.tsx

@@ -1,5 +1,5 @@
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {
   flexItemStyle,

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,11 +1,10 @@
-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} = getTheme_v2(props.theme)
+  const {font} = props.theme.sanity.v2
 
   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, getTheme_v2} from '@sanity/ui/theme'
+import {CSSObject} 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} = getTheme_v2(props.theme)
+  const {media, space} = props.theme.sanity.v2
 
   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,4 +1,3 @@
-import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 
@@ -6,7 +5,7 @@ export function labelBaseStyle(
   props: {$accent?: boolean; $muted: boolean} & ThemeProps,
 ): ReturnType<typeof css> {
   const {$accent, $muted} = props
-  const {font} = getTheme_v2(props.theme)
+  const {font} = props.theme.sanity.v2
 
   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'