chore: upgrade to styled-components v6

apps/v1/components/CodeSnippet.tsx

@@ -2,7 +2,7 @@ import { ClipboardIcon } from '@sanity/icons'
 import { Box, Button, Card, Code, type CodeProps } from '@sanity/ui'
 import { useToast } from '@sanity/ui'
 import { memo } from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 const StyledCode = styled(Code)`
   padding-right: 2rem;

apps/v1/components/ColorTintsPreview.tsx

@@ -1,6 +1,6 @@
 import { Box, Card, Stack, Text, Tooltip, useToast } from '@sanity/ui'
 import { memo } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 import { createTintsFromHue } from 'utils/createTonesFromHues'
 import type { Hue } from 'utils/types'
 

apps/v1/components/ExportTheme.styles.tsx

@@ -15,7 +15,7 @@ import {
   useState,
 } from 'react'
 import scrollIntoView from 'scroll-into-view-if-needed'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 interface QuizRowProps {
   children: ReactNode

apps/v1/components/HeaderCard.tsx

@@ -7,7 +7,7 @@ import {
   useState,
   useTransition,
 } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 interface Props {
   scheme: ThemeColorSchemeKey

apps/v1/components/HueColorInput.tsx

@@ -1,7 +1,7 @@
 import { Stack, Text } from '@sanity/ui'
 import { ColorInput, Label } from 'components/Sidebar.styles'
 import { type ChangeEventHandler, memo, useId } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 interface Props {
   label: string

apps/v1/components/HuesFields.tsx

@@ -13,7 +13,7 @@ import {
   useMemo,
   useState,
 } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 import { TONES } from 'utils/colors'
 import { isColor } from 'utils/parseHuesFromSearchParams'
 import { roundMidPoint } from 'utils/roundMidPoint'

apps/v1/components/ImageColorPaletteGrid.tsx

@@ -1,6 +1,6 @@
 import { Box, Grid, Skeleton } from '@sanity/ui'
 import { memo, type ReactNode } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 interface Props {
   image: ReactNode

apps/v1/components/ImportFromImage.styles.tsx

@@ -3,7 +3,7 @@ import { Box, Card, Grid, Skeleton, Stack, Text } from '@sanity/ui'
 import { ImageColorPaletteGridSkeleton } from 'components/ImageColorPaletteGrid'
 import { Label } from 'components/Sidebar.styles'
 import { memo, type ReactNode } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 const ButtonSkeleton = styled(Skeleton).attrs({ radius: 2, animated: true })`
   /* Magic number, equals 25px, the height of the variant buttons */

apps/v1/components/ImportFromSanityImageAsset.tsx

@@ -18,7 +18,7 @@ import {
   useMemo,
 } from 'react'
 import { MediaPreview, type PreviewLayoutKey, type PreviewProps } from 'sanity'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 import { suspend } from 'suspend-react'
 import { applyHues } from 'utils/applyHues'
 import { useFetcher } from 'utils/fetcher'

apps/v1/components/Logo.tsx

@@ -1,7 +1,7 @@
 import type { ThemeColorSchemeKey } from '@sanity/ui/theme'
 import { animate, spring } from 'motion'
 import { memo, useEffect, useRef } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 const Svg = styled.svg`
   position: relative;

apps/v1/components/PresetsMenu.tsx

@@ -34,7 +34,7 @@ import {
   useMemo,
   useState,
 } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 import { expandPresetSearchParams } from 'utils/expandPresetSearchParams'
 import { presets } from 'utils/presets'
 import type { Hues, ThemePreset } from 'utils/types'

apps/v1/components/ShareTab.tsx

@@ -3,7 +3,7 @@ import { ClipboardIcon, LockIcon } from '@sanity/icons'
 import { Grid, Stack, useToast } from '@sanity/ui'
 import { Button, Label } from 'components/Sidebar.styles'
 import { memo, useLayoutEffect, useState } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 import { shortenPresetSearchParams } from 'utils/shortenPresetSearchParams'
 
 const ShareIcon = styled(_ShareIcon)`

apps/v1/components/Sidebar.styles.tsx

@@ -1,6 +1,6 @@
 import { Button as UiButton, Text } from '@sanity/ui'
 import { transparentize } from 'polished'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 export const Button = styled(UiButton).attrs({
   fontSize: 1,

apps/v1/components/StudioViewer.tsx

@@ -15,7 +15,7 @@ import {
   useState,
 } from 'react'
 import { type StudioProviderProps, type WorkspaceOptions } from 'sanity'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 export type View = 'default' | 'split'
 

apps/v1/components/Themer.tsx

@@ -19,7 +19,7 @@ import { useIdleCallback } from 'hooks/useIdleCallback'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { StudioProviderProps, StudioTheme } from 'sanity'
 import { config } from 'studios'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 import { suspend } from 'suspend-react'
 import { expandPresetSearchParams } from 'utils/expandPresetSearchParams'
 import { shortenPresetSearchParams } from 'utils/shortenPresetSearchParams'

apps/v1/package.json

@@ -43,7 +43,7 @@
     "sanity-plugin-mux-input": "^2.2.1",
     "scroll-into-view-if-needed": "^3.0.10",
     "slugify": "^1.6.6",
-    "styled-components": "^5.3.11",
+    "styled-components": "^6.1.8",
     "suspend-react": "^0.1.3"
   },
   "devDependencies": {
@@ -52,7 +52,6 @@
     "@types/node": "^18.17.11",
     "@types/prettier": "^3.0.0",
     "@types/react": "^18.2.21",
-    "@types/styled-components": "^5.1.26",
     "esbuild": "^0.19.2",
     "esbuild-plugin-replace": "^1.4.0",
     "eslint": "^8.47.0",

apps/v2/package.json

@@ -9,15 +9,14 @@
   "dependencies": {
     "@sanity/icons": "^2.4.1",
     "@sanity/ui": "^2.0.0",
-    "@types/styled-components": "^5.1.26",
     "motion": "^10.16.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "react-is": "^18.2.0",
     "sanity": "^3.25.0",
     "sanity-plugin-mux-input": "^2.2.1",
-    "styled-components": "^5.3.11"
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@sanity/eslint-config-studio": "^3.0.0",

apps/v2/src/Logo.tsx

@@ -1,6 +1,6 @@
 import { animate, spring } from 'motion'
 import { memo, useEffect, useRef } from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 const Svg = styled.svg`
   position: relative;

apps/v2/src/index.tsx

@@ -34,7 +34,7 @@ import {
   useColorScheme,
   type StudioTheme,
 } from 'sanity'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 import Logo from './Logo'
 

examples/advanced/package.json

@@ -13,7 +13,7 @@
     "react-is": "^18.2.0",
     "sanity": "^3.25.0",
     "sanity-plugin-mux-input": "^2.2.1",
-    "styled-components": "^5.3.11"
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@sanity/eslint-config-studio": "^3.0.0",

examples/basic/package.json

@@ -13,7 +13,7 @@
     "react-is": "^18.2.0",
     "sanity": "^3.25.0",
     "sanity-plugin-mux-input": "^2.2.1",
-    "styled-components": "^5.3.11"
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@sanity/eslint-config-studio": "^3.0.0",

examples/next-dynamic/package.json

@@ -15,7 +15,7 @@
     "react-is": "^18.2.0",
     "sanity": "^3.25.0",
     "sanity-plugin-mux-input": "^2.2.1",
-    "styled-components": "^5.3.11"
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@types/node": "^18.17.11",

examples/next-static/package.json

@@ -15,7 +15,7 @@
     "react-is": "^18.2.0",
     "sanity": "^3.25.0",
     "sanity-plugin-mux-input": "^2.2.1",
-    "styled-components": "^5.3.11"
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@types/node": "^18.17.11",