@sanity/ui 2.0.11-canary.0 → 2.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.11-canary.0",
+  "version": "2.0.12",
   "keywords": [
     "sanity",
     "ui",
@@ -53,6 +53,32 @@
     "src",
     "theme.js"
   ],
+  "scripts": {
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
+    "clean": "rimraf .workshop dist",
+    "commit": "cz",
+    "cypress:dev": "run-p dev cypress:open",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "dev": "run-p storybook:dev workshop:dev",
+    "figma:pkg:build": "cd figma && pnpm build",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx --quiet",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
+    "prepare": "husky install",
+    "prepublishOnly": "pnpm build",
+    "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
+    "test": "jest",
+    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
+    "watch": "pkg watch --strict",
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
+  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -82,20 +108,20 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.8",
     "@sanity/color": "^3.0.0",
-    "@sanity/icons": "^2.11.2",
+    "@sanity/icons": "^2.11.3",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.1",
-    "@babel/preset-env": "^7.24.1",
+    "@babel/core": "^7.24.3",
+    "@babel/preset-env": "^7.24.3",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "5.1.3-canary.0",
+    "@sanity/pkg-utils": "^5.1.4",
     "@sanity/semantic-release-preset": "^4.1.7",
     "@sanity/ui-workshop": "^2.0.6",
     "@storybook/addon-a11y": "^8.0.2",
@@ -159,7 +185,7 @@
     "styled-components": "^6.1.8",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.4.2",
-    "vite": "^5.2.0",
+    "vite": "^5.2.2",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "peerDependencies": {
@@ -175,29 +201,5 @@
   "publishConfig": {
     "access": "public",
     "provenance": true
-  },
-  "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
-    "commit": "cz",
-    "cypress:dev": "run-p dev cypress:open",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "dev": "run-p storybook:dev workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx --quiet",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
-    "ts:check": "tsc",
-    "watch": "pkg watch --strict",
-    "workshop:build": "workshop build",
-    "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   }
-}
+}

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/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 {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'

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/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/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/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,6 @@
 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'

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

@@ -1,6 +1,6 @@
 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'

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/card/__workshop__/selected.tsx

@@ -2,7 +2,7 @@ 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 {useBoolean} from '@sanity/ui-workshop'
-import styled, {css} from 'styled-components'
+import {styled, css} from 'styled-components'
 
 const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((
   props: {

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/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/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/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/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/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/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/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/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/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/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, 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}>((

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/utils/arrow/arrow.tsx

@@ -1,5 +1,5 @@
 import {ForwardedRef, HTMLProps, ReactElement, forwardRef} from 'react'
-import styled, {css} from 'styled-components'
+import {styled, css} from 'styled-components'
 import {useTheme_v2} from '../../theme'
 import {Point, compileCommands, getRoundedCommands} from './cmds'
 

package/src/core/utils/elementQuery/__workshop__/customMedia.tsx

@@ -1,5 +1,5 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 const TestCard = styled(Card)`
   --card-fg-color: orange;

package/src/core/utils/layer/layer.tsx

@@ -1,5 +1,5 @@
 import {FocusEvent, forwardRef, useCallback, useEffect, useRef} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
 import {useForwardedRef} from '../../hooks'

package/src/core/utils/srOnly/srOnly.tsx

@@ -1,5 +1,5 @@
 import {forwardRef} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 /**
  * @public

package/src/core/utils/virtualList/virtualList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {forwardRef, useEffect, useMemo, useRef, useState} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {_isScrollable} from '../../helpers'
 import {useForwardedRef} from '../../hooks'
 import {_ResizeObserver} from '../../observers'