diff --git a/package.config.ts b/package.config.ts
index cfc254862..f00945407 100644
--- a/package.config.ts
+++ b/package.config.ts
@@ -14,6 +14,6 @@ export default defineConfig({
     noImplicitBrowsersList: 'off',
   },
   tsconfig: 'tsconfig.dist.json',
-  babel: {reactCompiler: true},
+  babel: {reactCompiler: true, styledComponents: true},
   reactCompilerOptions: {target: '18'},
 })
diff --git a/package.json b/package.json
index b40a6de4d..c5928239d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.10.17",
+  "version": "2.10.18-canary.0",
   "keywords": [
     "sanity",
     "ui",
@@ -122,7 +122,7 @@
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.12.3",
+    "@sanity/pkg-utils": "^6.13.0",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.0.20",
@@ -155,6 +155,7 @@
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.4",
     "babel-plugin-react-compiler": "19.0.0-beta-55955c9-20241229",
+    "babel-plugin-styled-components": "^2.1.4",
     "commitizen": "^4.3.1",
     "cypress": "^13.17.0",
     "cypress-real-events": "^1.13.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index de67c7895..471231451 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -64,8 +64,8 @@ importers:
         specifier: ^3.4.0
         version: 3.4.0
       '@sanity/pkg-utils':
-        specifier: ^6.12.3
-        version: 6.12.3(@types/babel__core@7.20.5)(@types/node@20.17.11)(babel-plugin-react-compiler@19.0.0-beta-55955c9-20241229)(typescript@5.7.2)
+        specifier: ^6.13.0
+        version: 6.13.0(@types/babel__core@7.20.5)(@types/node@20.17.11)(babel-plugin-react-compiler@19.0.0-beta-55955c9-20241229)(typescript@5.7.2)
       '@sanity/prettier-config':
         specifier: ^1.0.3
         version: 1.0.3(prettier@3.4.2)
@@ -162,6 +162,9 @@ importers:
       babel-plugin-react-compiler:
         specifier: 19.0.0-beta-55955c9-20241229
         version: 19.0.0-beta-55955c9-20241229
+      babel-plugin-styled-components:
+        specifier: ^2.1.4
+        version: 2.1.4(@babel/core@7.26.0)(styled-components@6.1.13(react-dom@19.0.0(react@19.0.0))(react@19.0.0))
       commitizen:
         specifier: ^4.3.1
         version: 4.3.1(@types/node@20.17.11)(typescript@5.7.2)
@@ -1790,8 +1793,8 @@ packages:
     peerDependencies:
       react: ^19.0.0
 
-  '@sanity/pkg-utils@6.12.3':
-    resolution: {integrity: sha512-8vxnk0RNG5+VYbi7ooMW28i8PlkMp8BJcCe258pWd+OYctjmA/L4cdIwXr2hr+NxTYmO8KUJqxHZ84z1nFv7ZQ==}
+  '@sanity/pkg-utils@6.13.0':
+    resolution: {integrity: sha512-RxKMKh0pm4rvRumdul97JcQE+q55VobpaYU8YemV0MPHfD47+O2khVhcxe99CHzlhtYI0ru18s6QMLn3GBOEMg==}
     engines: {node: '>=18.17.0'}
     hasBin: true
     peerDependencies:
@@ -2705,6 +2708,11 @@ packages:
   babel-plugin-react-compiler@19.0.0-beta-55955c9-20241229:
     resolution: {integrity: sha512-APpa9fRiG5UN5kxnB/vznaSBKbXwAWZs6QshN3MLntzWa4cUhOxzUSd7Ohmr5sLQaM0ZHjjOg07pw1ZoR7+Oog==}
 
+  babel-plugin-styled-components@2.1.4:
+    resolution: {integrity: sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==}
+    peerDependencies:
+      styled-components: '>= 2'
+
   babel-preset-current-node-syntax@1.1.0:
     resolution: {integrity: sha512-ldYss8SbBlWva1bs28q78Ju5Zq1F+8BrqBZZ0VFhLBvhh6lCpC2o3gDJi/5DRLs9FgYZCnmPYIVFU4lRXCkyUw==}
     peerDependencies:
@@ -9240,7 +9248,7 @@ snapshots:
     dependencies:
       react: 19.0.0
 
-  '@sanity/pkg-utils@6.12.3(@types/babel__core@7.20.5)(@types/node@20.17.11)(babel-plugin-react-compiler@19.0.0-beta-55955c9-20241229)(typescript@5.7.2)':
+  '@sanity/pkg-utils@6.13.0(@types/babel__core@7.20.5)(@types/node@20.17.11)(babel-plugin-react-compiler@19.0.0-beta-55955c9-20241229)(typescript@5.7.2)':
     dependencies:
       '@babel/core': 7.26.0
       '@babel/preset-typescript': 7.26.0(@babel/core@7.26.0)
@@ -10447,6 +10455,18 @@ snapshots:
     dependencies:
       '@babel/types': 7.26.3
 
+  babel-plugin-styled-components@2.1.4(@babel/core@7.26.0)(styled-components@6.1.13(react-dom@19.0.0(react@19.0.0))(react@19.0.0)):
+    dependencies:
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.0)
+      lodash: 4.17.21
+      picomatch: 2.3.1
+      styled-components: 6.1.13(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+
   babel-preset-current-node-syntax@1.1.0(@babel/core@7.26.0):
     dependencies:
       '@babel/core': 7.26.0