diff --git a/.changeset/deep-cameras-matter.md b/.changeset/deep-cameras-matter.md
new file mode 100644
index 00000000..2c53a82b
--- /dev/null
+++ b/.changeset/deep-cameras-matter.md
@@ -0,0 +1,5 @@
+---
+'@sanity/ui-workshop': patch
+---
+
+Update react compiler to v1
diff --git a/.changeset/pre.json b/.changeset/pre.json
new file mode 100644
index 00000000..ce8bb456
--- /dev/null
+++ b/.changeset/pre.json
@@ -0,0 +1,10 @@
+{
+ "mode": "pre",
+ "tag": "static",
+ "initialVersions": {
+ "@sanity/ui-workshop": "4.0.0-static.11"
+ },
+ "changesets": [
+ "deep-cameras-matter"
+ ]
+}
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index be54cdef..d77f3541 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -5,6 +5,7 @@ on:
pull_request:
branches:
- main
+ - static
permissions:
contents: read # for checkout
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index fa3c16c7..78229cef 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -4,6 +4,7 @@ on:
push:
branches:
- main
+ - static
concurrency: ${{ github.workflow }}-${{ github.ref }}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 263bbab8..da422286 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,22 @@
+
+
+## 4.0.0-static.12
+
+### Patch Changes
+
+- [#185](https://github.com/sanity-io/ui-workshop/pull/185) [`4cc0738`](https://github.com/sanity-io/ui-workshop/commit/4cc0738310247e908ad94d29c03554c16248b8df) Thanks [@stipsan](https://github.com/stipsan)! - Update react compiler to v1
+
## 3.4.0
### Minor Changes
- [`b1f9eea`](https://github.com/sanity-io/ui-workshop/commit/b1f9eeaab4bb016cbd867e9c0dff91cd9af293af) Thanks [@stipsan](https://github.com/stipsan)! - Upgrade React Compiler to v1
+# 📓 Changelog
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
## [3.3.2](https://github.com/sanity-io/ui-workshop/compare/v3.3.1...v3.3.2) (2025-08-07)
### Bug Fixes
diff --git a/README.md b/README.md
index 2e147349..93a98b04 100644
--- a/README.md
+++ b/README.md
@@ -88,85 +88,6 @@ function TestStory() {
}
```
-## Styling
-
-In addition to the [CSS features that `vite` supports](https://vite.dev/guide/features.html#css), you can also use [Vanilla Extract](https://vanilla-extract.style/) for styling.
-
-First install the `@vanilla-extract/css` package:
-
-```sh
-npm install @vanilla-extract/css
-```
-
-Then, add a `style.css.ts` file for your workshop:
-
-```ts
-// src/__workshop__/style.css.ts
-
-import {style} from '@vanilla-extract/css'
-
-export const container = style({
- display: 'grid',
- alignItems: 'center',
- justifyContent: 'center',
- height: '100%',
- width: '100%',
-})
-```
-
-And finally, import the `container` className and use it in your workshop:
-
-```diff
-import {
- defineScope,
- useBoolean,
- useNumber,
- useSelect,
- useString,
- useText,
-} from '@sanity/ui-workshop'
-+import {container} from './style.css'
-
-export default defineScope({
- name: 'test',
- title: 'Test',
- stories: [
- {
- name: 'test',
- title: 'Test',
- component: TestStory,
- },
- ],
-})
-
-const options = {
- None: '',
- Small: 'sm',
- Medium: 'md',
- Large: 'lg',
-}
-
-function TestStory() {
- const text = useText('Text', 'Hello, world')
- const boolean = useBoolean('Boolean', true)
- const number = useNumber('Number', 1234)
- const string = useString('String', '...')
- const option = useSelect('Select option', options)
-
- return (
--
-+
-
This is my first story.
-
Some text: {text}
-
A boolean: {boolean ? 'true' : 'false'}
-
A number: {number}
-
A string: {string}
-
An option: {option}
-
- )
-}
-```
-
## License
[MIT](LICENSE)
diff --git a/package.json b/package.json
index 5d45ab19..9e879022 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@sanity/ui-workshop",
- "version": "3.4.0",
+ "version": "4.0.0-static.12",
"keywords": [
"sanity",
"ui",
@@ -108,6 +108,7 @@
"esbuild-register": "^3.6.0",
"express": "^5.1.0",
"globby": "^11.1.0",
+ "lightningcss": "^1.30.2",
"lodash": "^4.17.21",
"mkdirp": "^2.1.6",
"pako": "^2.1.0",
@@ -121,7 +122,7 @@
"@sanity/browserslist-config": "^1.0.5",
"@sanity/pkg-utils": "^8.1.21",
"@sanity/prettier-config": "^2.0.1",
- "@sanity/ui": "^3.1.10",
+ "@sanity/ui": "4.0.0-static.38",
"@types/cpx": "^1.5.5",
"@types/express": "^5.0.3",
"@types/lodash": "^4.17.20",
@@ -153,7 +154,7 @@
"vitest": "^3.2.4"
},
"peerDependencies": {
- "@sanity/ui": "^3",
+ "@sanity/ui": "^4.0.0-0",
"react": "^19",
"react-dom": "^19"
},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0c036104..167138b9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,10 +22,10 @@ importers:
version: 2.1.5
'@vanilla-extract/vite-plugin':
specifier: ^5.1.1
- version: 5.1.1(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)(vite@7.1.10(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6))
+ version: 5.1.1(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)(vite@7.1.11(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6))
'@vitejs/plugin-react':
specifier: ^5.0.4
- version: 5.0.4(vite@7.1.10(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6))
+ version: 5.0.4(vite@7.1.11(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6))
axe-core:
specifier: ^4.11.0
version: 4.11.0
@@ -53,6 +53,9 @@ importers:
globby:
specifier: ^11.1.0
version: 11.1.0
+ lightningcss:
+ specifier: ^1.30.2
+ version: 1.30.2
lodash:
specifier: ^4.17.21
version: 4.17.21
@@ -70,7 +73,7 @@ importers:
version: 4.0.0
vite:
specifier: ^7.1.10
- version: 7.1.10(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
+ version: 7.1.11(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
devDependencies:
'@changesets/changelog-github':
specifier: ^0.5.1
@@ -88,8 +91,8 @@ importers:
specifier: ^2.0.1
version: 2.0.1(prettier@3.6.2)
'@sanity/ui':
- specifier: ^3.1.10
- version: 3.1.10(@emotion/is-prop-valid@1.2.2)(react-dom@19.2.0(react@19.2.0))(react-is@19.2.0)(react@19.2.0)(styled-components@6.1.19(react-dom@19.2.0(react@19.2.0))(react@19.2.0))
+ specifier: 4.0.0-static.38
+ version: 4.0.0-static.38(@emotion/is-prop-valid@1.2.2)(react-dom@19.2.0(react@19.2.0))(react-is@19.2.0)(react@19.2.0)
'@types/cpx':
specifier: ^1.5.5
version: 1.5.5
@@ -404,9 +407,6 @@ packages:
'@emotion/memoize@0.8.1':
resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
- '@emotion/unitless@0.8.1':
- resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
-
'@esbuild/aix-ppc64@0.25.11':
resolution: {integrity: sha512-Xt1dOL13m8u0WE8iplx9Ibbm+hFAO0GsU2P34UNoDGvZYkY8ifSiy6Zuc1lYxfG7svWE2fzqCUmFp5HCn51gJg==}
engines: {node: '>=18'}
@@ -979,113 +979,113 @@ packages:
rollup:
optional: true
- '@rollup/rollup-android-arm-eabi@4.52.4':
- resolution: {integrity: sha512-BTm2qKNnWIQ5auf4deoetINJm2JzvihvGb9R6K/ETwKLql/Bb3Eg2H1FBp1gUb4YGbydMA3jcmQTR73q7J+GAA==}
+ '@rollup/rollup-android-arm-eabi@4.52.5':
+ resolution: {integrity: sha512-8c1vW4ocv3UOMp9K+gToY5zL2XiiVw3k7f1ksf4yO1FlDFQ1C2u72iACFnSOceJFsWskc2WZNqeRhFRPzv+wtQ==}
cpu: [arm]
os: [android]
- '@rollup/rollup-android-arm64@4.52.4':
- resolution: {integrity: sha512-P9LDQiC5vpgGFgz7GSM6dKPCiqR3XYN1WwJKA4/BUVDjHpYsf3iBEmVz62uyq20NGYbiGPR5cNHI7T1HqxNs2w==}
+ '@rollup/rollup-android-arm64@4.52.5':
+ resolution: {integrity: sha512-mQGfsIEFcu21mvqkEKKu2dYmtuSZOBMmAl5CFlPGLY94Vlcm+zWApK7F/eocsNzp8tKmbeBP8yXyAbx0XHsFNA==}
cpu: [arm64]
os: [android]
- '@rollup/rollup-darwin-arm64@4.52.4':
- resolution: {integrity: sha512-QRWSW+bVccAvZF6cbNZBJwAehmvG9NwfWHwMy4GbWi/BQIA/laTIktebT2ipVjNncqE6GLPxOok5hsECgAxGZg==}
+ '@rollup/rollup-darwin-arm64@4.52.5':
+ resolution: {integrity: sha512-takF3CR71mCAGA+v794QUZ0b6ZSrgJkArC+gUiG6LB6TQty9T0Mqh3m2ImRBOxS2IeYBo4lKWIieSvnEk2OQWA==}
cpu: [arm64]
os: [darwin]
- '@rollup/rollup-darwin-x64@4.52.4':
- resolution: {integrity: sha512-hZgP05pResAkRJxL1b+7yxCnXPGsXU0fG9Yfd6dUaoGk+FhdPKCJ5L1Sumyxn8kvw8Qi5PvQ8ulenUbRjzeCTw==}
+ '@rollup/rollup-darwin-x64@4.52.5':
+ resolution: {integrity: sha512-W901Pla8Ya95WpxDn//VF9K9u2JbocwV/v75TE0YIHNTbhqUTv9w4VuQ9MaWlNOkkEfFwkdNhXgcLqPSmHy0fA==}
cpu: [x64]
os: [darwin]
- '@rollup/rollup-freebsd-arm64@4.52.4':
- resolution: {integrity: sha512-xmc30VshuBNUd58Xk4TKAEcRZHaXlV+tCxIXELiE9sQuK3kG8ZFgSPi57UBJt8/ogfhAF5Oz4ZSUBN77weM+mQ==}
+ '@rollup/rollup-freebsd-arm64@4.52.5':
+ resolution: {integrity: sha512-QofO7i7JycsYOWxe0GFqhLmF6l1TqBswJMvICnRUjqCx8b47MTo46W8AoeQwiokAx3zVryVnxtBMcGcnX12LvA==}
cpu: [arm64]
os: [freebsd]
- '@rollup/rollup-freebsd-x64@4.52.4':
- resolution: {integrity: sha512-WdSLpZFjOEqNZGmHflxyifolwAiZmDQzuOzIq9L27ButpCVpD7KzTRtEG1I0wMPFyiyUdOO+4t8GvrnBLQSwpw==}
+ '@rollup/rollup-freebsd-x64@4.52.5':
+ resolution: {integrity: sha512-jr21b/99ew8ujZubPo9skbrItHEIE50WdV86cdSoRkKtmWa+DDr6fu2c/xyRT0F/WazZpam6kk7IHBerSL7LDQ==}
cpu: [x64]
os: [freebsd]
- '@rollup/rollup-linux-arm-gnueabihf@4.52.4':
- resolution: {integrity: sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==}
+ '@rollup/rollup-linux-arm-gnueabihf@4.52.5':
+ resolution: {integrity: sha512-PsNAbcyv9CcecAUagQefwX8fQn9LQ4nZkpDboBOttmyffnInRy8R8dSg6hxxl2Re5QhHBf6FYIDhIj5v982ATQ==}
cpu: [arm]
os: [linux]
- '@rollup/rollup-linux-arm-musleabihf@4.52.4':
- resolution: {integrity: sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==}
+ '@rollup/rollup-linux-arm-musleabihf@4.52.5':
+ resolution: {integrity: sha512-Fw4tysRutyQc/wwkmcyoqFtJhh0u31K+Q6jYjeicsGJJ7bbEq8LwPWV/w0cnzOqR2m694/Af6hpFayLJZkG2VQ==}
cpu: [arm]
os: [linux]
- '@rollup/rollup-linux-arm64-gnu@4.52.4':
- resolution: {integrity: sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==}
+ '@rollup/rollup-linux-arm64-gnu@4.52.5':
+ resolution: {integrity: sha512-a+3wVnAYdQClOTlyapKmyI6BLPAFYs0JM8HRpgYZQO02rMR09ZcV9LbQB+NL6sljzG38869YqThrRnfPMCDtZg==}
cpu: [arm64]
os: [linux]
- '@rollup/rollup-linux-arm64-musl@4.52.4':
- resolution: {integrity: sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==}
+ '@rollup/rollup-linux-arm64-musl@4.52.5':
+ resolution: {integrity: sha512-AvttBOMwO9Pcuuf7m9PkC1PUIKsfaAJ4AYhy944qeTJgQOqJYJ9oVl2nYgY7Rk0mkbsuOpCAYSs6wLYB2Xiw0Q==}
cpu: [arm64]
os: [linux]
- '@rollup/rollup-linux-loong64-gnu@4.52.4':
- resolution: {integrity: sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==}
+ '@rollup/rollup-linux-loong64-gnu@4.52.5':
+ resolution: {integrity: sha512-DkDk8pmXQV2wVrF6oq5tONK6UHLz/XcEVow4JTTerdeV1uqPeHxwcg7aFsfnSm9L+OO8WJsWotKM2JJPMWrQtA==}
cpu: [loong64]
os: [linux]
- '@rollup/rollup-linux-ppc64-gnu@4.52.4':
- resolution: {integrity: sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==}
+ '@rollup/rollup-linux-ppc64-gnu@4.52.5':
+ resolution: {integrity: sha512-W/b9ZN/U9+hPQVvlGwjzi+Wy4xdoH2I8EjaCkMvzpI7wJUs8sWJ03Rq96jRnHkSrcHTpQe8h5Tg3ZzUPGauvAw==}
cpu: [ppc64]
os: [linux]
- '@rollup/rollup-linux-riscv64-gnu@4.52.4':
- resolution: {integrity: sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==}
+ '@rollup/rollup-linux-riscv64-gnu@4.52.5':
+ resolution: {integrity: sha512-sjQLr9BW7R/ZiXnQiWPkErNfLMkkWIoCz7YMn27HldKsADEKa5WYdobaa1hmN6slu9oWQbB6/jFpJ+P2IkVrmw==}
cpu: [riscv64]
os: [linux]
- '@rollup/rollup-linux-riscv64-musl@4.52.4':
- resolution: {integrity: sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==}
+ '@rollup/rollup-linux-riscv64-musl@4.52.5':
+ resolution: {integrity: sha512-hq3jU/kGyjXWTvAh2awn8oHroCbrPm8JqM7RUpKjalIRWWXE01CQOf/tUNWNHjmbMHg/hmNCwc/Pz3k1T/j/Lg==}
cpu: [riscv64]
os: [linux]
- '@rollup/rollup-linux-s390x-gnu@4.52.4':
- resolution: {integrity: sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==}
+ '@rollup/rollup-linux-s390x-gnu@4.52.5':
+ resolution: {integrity: sha512-gn8kHOrku8D4NGHMK1Y7NA7INQTRdVOntt1OCYypZPRt6skGbddska44K8iocdpxHTMMNui5oH4elPH4QOLrFQ==}
cpu: [s390x]
os: [linux]
- '@rollup/rollup-linux-x64-gnu@4.52.4':
- resolution: {integrity: sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==}
+ '@rollup/rollup-linux-x64-gnu@4.52.5':
+ resolution: {integrity: sha512-hXGLYpdhiNElzN770+H2nlx+jRog8TyynpTVzdlc6bndktjKWyZyiCsuDAlpd+j+W+WNqfcyAWz9HxxIGfZm1Q==}
cpu: [x64]
os: [linux]
- '@rollup/rollup-linux-x64-musl@4.52.4':
- resolution: {integrity: sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==}
+ '@rollup/rollup-linux-x64-musl@4.52.5':
+ resolution: {integrity: sha512-arCGIcuNKjBoKAXD+y7XomR9gY6Mw7HnFBv5Rw7wQRvwYLR7gBAgV7Mb2QTyjXfTveBNFAtPt46/36vV9STLNg==}
cpu: [x64]
os: [linux]
- '@rollup/rollup-openharmony-arm64@4.52.4':
- resolution: {integrity: sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==}
+ '@rollup/rollup-openharmony-arm64@4.52.5':
+ resolution: {integrity: sha512-QoFqB6+/9Rly/RiPjaomPLmR/13cgkIGfA40LHly9zcH1S0bN2HVFYk3a1eAyHQyjs3ZJYlXvIGtcCs5tko9Cw==}
cpu: [arm64]
os: [openharmony]
- '@rollup/rollup-win32-arm64-msvc@4.52.4':
- resolution: {integrity: sha512-8GKr640PdFNXwzIE0IrkMWUNUomILLkfeHjXBi/nUvFlpZP+FA8BKGKpacjW6OUUHaNI6sUURxR2U2g78FOHWQ==}
+ '@rollup/rollup-win32-arm64-msvc@4.52.5':
+ resolution: {integrity: sha512-w0cDWVR6MlTstla1cIfOGyl8+qb93FlAVutcor14Gf5Md5ap5ySfQ7R9S/NjNaMLSFdUnKGEasmVnu3lCMqB7w==}
cpu: [arm64]
os: [win32]
- '@rollup/rollup-win32-ia32-msvc@4.52.4':
- resolution: {integrity: sha512-AIy/jdJ7WtJ/F6EcfOb2GjR9UweO0n43jNObQMb6oGxkYTfLcnN7vYYpG+CN3lLxrQkzWnMOoNSHTW54pgbVxw==}
+ '@rollup/rollup-win32-ia32-msvc@4.52.5':
+ resolution: {integrity: sha512-Aufdpzp7DpOTULJCuvzqcItSGDH73pF3ko/f+ckJhxQyHtp67rHw3HMNxoIdDMUITJESNE6a8uh4Lo4SLouOUg==}
cpu: [ia32]
os: [win32]
- '@rollup/rollup-win32-x64-gnu@4.52.4':
- resolution: {integrity: sha512-UF9KfsH9yEam0UjTwAgdK0anlQ7c8/pWPU2yVjyWcF1I1thABt6WXE47cI71pGiZ8wGvxohBoLnxM04L/wj8mQ==}
+ '@rollup/rollup-win32-x64-gnu@4.52.5':
+ resolution: {integrity: sha512-UGBUGPFp1vkj6p8wCRraqNhqwX/4kNQPS57BCFc8wYh0g94iVIW33wJtQAx3G7vrjjNtRaxiMUylM0ktp/TRSQ==}
cpu: [x64]
os: [win32]
- '@rollup/rollup-win32-x64-msvc@4.52.4':
- resolution: {integrity: sha512-bf9PtUa0u8IXDVxzRToFQKsNCRz9qLYfR/MpECxl4mRoWYjAeFjgxj1XdZr2M/GNVpT05p+LgQOHopYDlUu6/w==}
+ '@rollup/rollup-win32-x64-msvc@4.52.5':
+ resolution: {integrity: sha512-TAcgQh2sSkykPRWLrdyy2AiceMckNf5loITqXxFI5VuQjS5tSuw3WlwdN8qv8vzjLAUTvYaH/mVjSFpbkFbpTg==}
cpu: [x64]
os: [win32]
@@ -1151,14 +1151,13 @@ packages:
peerDependencies:
prettier: ^3.6.2
- '@sanity/ui@3.1.10':
- resolution: {integrity: sha512-iwhImz9I0nHAj48yKsTGCMOGL+ZDnljvFLxZbvQkzUDwL42UH+JNeo1m/K3fYyRVb6w9SkvpaSyBf2GhFiAVyg==}
+ '@sanity/ui@4.0.0-static.38':
+ resolution: {integrity: sha512-99qhMYfSn19lNLIIoXQjLuE+Oyy8qbUwrce5OkdsXi09LtU4yaj57j//vm1QAtB2l00NJcfY0WMwGFLYY/2pAA==}
engines: {node: '>=20.19 <22 || >=22.12'}
peerDependencies:
- react: ^18 || >=19.0.0-0
- react-dom: ^18 || >=19.0.0-0
- react-is: ^18 || >=19.0.0-0
- styled-components: ^5.2 || ^6
+ react: ^19
+ react-dom: ^19
+ react-is: ^19
'@sindresorhus/merge-streams@4.0.0':
resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
@@ -1267,9 +1266,6 @@ packages:
'@types/serve-static@1.15.8':
resolution: {integrity: sha512-roei0UY3LhpOJvjbIP6ZZFngyLKl5dskOtDhxY5THRSpO+ZI+nzJ+m5yUMzGrp89YRa7lvknKkMYjqQFGwA7Sg==}
- '@types/stylis@4.2.5':
- resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==}
-
'@types/unist@2.0.11':
resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
@@ -1697,9 +1693,6 @@ packages:
resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
engines: {node: '>=6'}
- camelize@1.0.1:
- resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
-
caniuse-lite@1.0.30001750:
resolution: {integrity: sha512-cuom0g5sdX6rw00qOoLNSFCJ9/mYIsuSOA+yzpDw8eopiFqcVwQvZHqov0vmEighRxX++cfC0Vg1G+1Iy/mSpQ==}
@@ -1828,13 +1821,6 @@ packages:
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
engines: {node: '>= 8'}
- css-color-keywords@1.0.0:
- resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==}
- engines: {node: '>=4'}
-
- css-to-react-native@3.2.0:
- resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
-
css-what@6.2.2:
resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
engines: {node: '>= 6'}
@@ -3578,13 +3564,6 @@ packages:
resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
engines: {node: '>= 0.4'}
- postcss-value-parser@4.2.0:
- resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-
- postcss@8.4.49:
- resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
- engines: {node: ^10 || ^12 || >=14}
-
postcss@8.5.6:
resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
engines: {node: ^10 || ^12 || >=14}
@@ -3685,11 +3664,6 @@ packages:
resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
hasBin: true
- react-compiler-runtime@1.0.0:
- resolution: {integrity: sha512-rRfjYv66HlG8896yPUDONgKzG5BxZD1nV9U6rkm+7VCuvQc903C4MjcoZR4zPw53IKSOX9wMQVpA1IAbRtzQ7w==}
- peerDependencies:
- react: ^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental
-
react-dom@19.2.0:
resolution: {integrity: sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==}
peerDependencies:
@@ -3875,8 +3849,8 @@ packages:
esbuild: '>=0.18.0'
rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
- rollup@4.52.4:
- resolution: {integrity: sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==}
+ rollup@4.52.5:
+ resolution: {integrity: sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==}
engines: {node: '>=18.0.0', npm: '>=8.0.0'}
hasBin: true
@@ -3975,9 +3949,6 @@ packages:
setprototypeof@1.2.0:
resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
- shallowequal@1.1.0:
- resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
-
shebang-command@2.0.0:
resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
engines: {node: '>=8'}
@@ -4169,16 +4140,6 @@ packages:
strip-literal@3.0.0:
resolution: {integrity: sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==}
- styled-components@6.1.19:
- resolution: {integrity: sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==}
- engines: {node: '>= 16'}
- peerDependencies:
- react: '>= 16.8.0'
- react-dom: '>= 16.8.0'
-
- stylis@4.3.2:
- resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==}
-
subarg@1.0.0:
resolution: {integrity: sha512-RIrIdRY0X1xojthNcVtgT9sjpOGagEUKpZdgBUi054OEPFo282yg+zE+t1Rj3+RqKq2xStL7uUHhY+AjbC4BXg==}
@@ -4289,9 +4250,6 @@ packages:
resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
engines: {node: '>=6'}
- tslib@2.6.2:
- resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-
tslib@2.8.1:
resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
@@ -4444,8 +4402,8 @@ packages:
engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
hasBin: true
- vite@7.1.10:
- resolution: {integrity: sha512-CmuvUBzVJ/e3HGxhg6cYk88NGgTnBoOo7ogtfJJ0fefUWAxN/WDSUa50o+oVBxuIhO8FoEZW0j2eW7sfjs5EtA==}
+ vite@7.1.11:
+ resolution: {integrity: sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==}
engines: {node: ^20.19.0 || >=22.12.0}
hasBin: true
peerDependencies:
@@ -5002,10 +4960,10 @@ snapshots:
'@emotion/is-prop-valid@1.2.2':
dependencies:
'@emotion/memoize': 0.8.1
+ optional: true
- '@emotion/memoize@0.8.1': {}
-
- '@emotion/unitless@0.8.1': {}
+ '@emotion/memoize@0.8.1':
+ optional: true
'@esbuild/aix-ppc64@0.25.11':
optional: true
@@ -5262,11 +5220,11 @@ snapshots:
'@nodelib/fs.scandir': 2.1.5
fastq: 1.19.1
- '@optimize-lodash/rollup-plugin@5.0.2(rollup@4.52.4)':
+ '@optimize-lodash/rollup-plugin@5.0.2(rollup@4.52.5)':
dependencies:
'@optimize-lodash/transform': 3.0.6
- '@rollup/pluginutils': 5.2.0(rollup@4.52.4)
- rollup: 4.52.4
+ '@rollup/pluginutils': 5.2.0(rollup@4.52.5)
+ rollup: 4.52.5
'@optimize-lodash/transform@3.0.6':
dependencies:
@@ -5390,24 +5348,24 @@ snapshots:
'@rolldown/pluginutils@1.0.0-beta.42': {}
- '@rollup/plugin-alias@5.1.1(rollup@4.52.4)':
+ '@rollup/plugin-alias@5.1.1(rollup@4.52.5)':
optionalDependencies:
- rollup: 4.52.4
+ rollup: 4.52.5
- '@rollup/plugin-babel@6.0.4(@babel/core@7.28.4)(@types/babel__core@7.20.5)(rollup@4.52.4)':
+ '@rollup/plugin-babel@6.0.4(@babel/core@7.28.4)(@types/babel__core@7.20.5)(rollup@4.52.5)':
dependencies:
'@babel/core': 7.28.4
'@babel/helper-module-imports': 7.27.1
- '@rollup/pluginutils': 5.2.0(rollup@4.52.4)
+ '@rollup/pluginutils': 5.2.0(rollup@4.52.5)
optionalDependencies:
'@types/babel__core': 7.20.5
- rollup: 4.52.4
+ rollup: 4.52.5
transitivePeerDependencies:
- supports-color
- '@rollup/plugin-commonjs@28.0.6(rollup@4.52.4)':
+ '@rollup/plugin-commonjs@28.0.6(rollup@4.52.5)':
dependencies:
- '@rollup/pluginutils': 5.2.0(rollup@4.52.4)
+ '@rollup/pluginutils': 5.2.0(rollup@4.52.5)
commondir: 1.0.1
estree-walker: 2.0.2
fdir: 6.5.0(picomatch@4.0.3)
@@ -5415,111 +5373,111 @@ snapshots:
magic-string: 0.30.19
picomatch: 4.0.3
optionalDependencies:
- rollup: 4.52.4
+ rollup: 4.52.5
- '@rollup/plugin-json@6.1.0(rollup@4.52.4)':
+ '@rollup/plugin-json@6.1.0(rollup@4.52.5)':
dependencies:
- '@rollup/pluginutils': 5.2.0(rollup@4.52.4)
+ '@rollup/pluginutils': 5.2.0(rollup@4.52.5)
optionalDependencies:
- rollup: 4.52.4
+ rollup: 4.52.5
- '@rollup/plugin-node-resolve@16.0.3(rollup@4.52.4)':
+ '@rollup/plugin-node-resolve@16.0.3(rollup@4.52.5)':
dependencies:
- '@rollup/pluginutils': 5.2.0(rollup@4.52.4)
+ '@rollup/pluginutils': 5.2.0(rollup@4.52.5)
'@types/resolve': 1.20.2
deepmerge: 4.3.1
is-module: 1.0.0
resolve: 1.22.10
optionalDependencies:
- rollup: 4.52.4
+ rollup: 4.52.5
- '@rollup/plugin-replace@6.0.2(rollup@4.52.4)':
+ '@rollup/plugin-replace@6.0.2(rollup@4.52.5)':
dependencies:
- '@rollup/pluginutils': 5.2.0(rollup@4.52.4)
+ '@rollup/pluginutils': 5.2.0(rollup@4.52.5)
magic-string: 0.30.19
optionalDependencies:
- rollup: 4.52.4
+ rollup: 4.52.5
- '@rollup/plugin-terser@0.4.4(rollup@4.52.4)':
+ '@rollup/plugin-terser@0.4.4(rollup@4.52.5)':
dependencies:
serialize-javascript: 6.0.2
smob: 1.5.0
terser: 5.43.1
optionalDependencies:
- rollup: 4.52.4
+ rollup: 4.52.5
- '@rollup/pluginutils@5.2.0(rollup@4.52.4)':
+ '@rollup/pluginutils@5.2.0(rollup@4.52.5)':
dependencies:
'@types/estree': 1.0.8
estree-walker: 2.0.2
picomatch: 4.0.3
optionalDependencies:
- rollup: 4.52.4
+ rollup: 4.52.5
- '@rollup/rollup-android-arm-eabi@4.52.4':
+ '@rollup/rollup-android-arm-eabi@4.52.5':
optional: true
- '@rollup/rollup-android-arm64@4.52.4':
+ '@rollup/rollup-android-arm64@4.52.5':
optional: true
- '@rollup/rollup-darwin-arm64@4.52.4':
+ '@rollup/rollup-darwin-arm64@4.52.5':
optional: true
- '@rollup/rollup-darwin-x64@4.52.4':
+ '@rollup/rollup-darwin-x64@4.52.5':
optional: true
- '@rollup/rollup-freebsd-arm64@4.52.4':
+ '@rollup/rollup-freebsd-arm64@4.52.5':
optional: true
- '@rollup/rollup-freebsd-x64@4.52.4':
+ '@rollup/rollup-freebsd-x64@4.52.5':
optional: true
- '@rollup/rollup-linux-arm-gnueabihf@4.52.4':
+ '@rollup/rollup-linux-arm-gnueabihf@4.52.5':
optional: true
- '@rollup/rollup-linux-arm-musleabihf@4.52.4':
+ '@rollup/rollup-linux-arm-musleabihf@4.52.5':
optional: true
- '@rollup/rollup-linux-arm64-gnu@4.52.4':
+ '@rollup/rollup-linux-arm64-gnu@4.52.5':
optional: true
- '@rollup/rollup-linux-arm64-musl@4.52.4':
+ '@rollup/rollup-linux-arm64-musl@4.52.5':
optional: true
- '@rollup/rollup-linux-loong64-gnu@4.52.4':
+ '@rollup/rollup-linux-loong64-gnu@4.52.5':
optional: true
- '@rollup/rollup-linux-ppc64-gnu@4.52.4':
+ '@rollup/rollup-linux-ppc64-gnu@4.52.5':
optional: true
- '@rollup/rollup-linux-riscv64-gnu@4.52.4':
+ '@rollup/rollup-linux-riscv64-gnu@4.52.5':
optional: true
- '@rollup/rollup-linux-riscv64-musl@4.52.4':
+ '@rollup/rollup-linux-riscv64-musl@4.52.5':
optional: true
- '@rollup/rollup-linux-s390x-gnu@4.52.4':
+ '@rollup/rollup-linux-s390x-gnu@4.52.5':
optional: true
- '@rollup/rollup-linux-x64-gnu@4.52.4':
+ '@rollup/rollup-linux-x64-gnu@4.52.5':
optional: true
- '@rollup/rollup-linux-x64-musl@4.52.4':
+ '@rollup/rollup-linux-x64-musl@4.52.5':
optional: true
- '@rollup/rollup-openharmony-arm64@4.52.4':
+ '@rollup/rollup-openharmony-arm64@4.52.5':
optional: true
- '@rollup/rollup-win32-arm64-msvc@4.52.4':
+ '@rollup/rollup-win32-arm64-msvc@4.52.5':
optional: true
- '@rollup/rollup-win32-ia32-msvc@4.52.4':
+ '@rollup/rollup-win32-ia32-msvc@4.52.5':
optional: true
- '@rollup/rollup-win32-x64-gnu@4.52.4':
+ '@rollup/rollup-win32-x64-gnu@4.52.5':
optional: true
- '@rollup/rollup-win32-x64-msvc@4.52.4':
+ '@rollup/rollup-win32-x64-msvc@4.52.5':
optional: true
'@rtsao/scc@1.1.0': {}
@@ -5579,16 +5537,16 @@ snapshots:
'@babel/types': 7.28.4
'@microsoft/api-extractor': 7.53.1(@types/node@20.19.21)
'@microsoft/tsdoc-config': 0.17.1
- '@optimize-lodash/rollup-plugin': 5.0.2(rollup@4.52.4)
- '@rollup/plugin-alias': 5.1.1(rollup@4.52.4)
- '@rollup/plugin-babel': 6.0.4(@babel/core@7.28.4)(@types/babel__core@7.20.5)(rollup@4.52.4)
- '@rollup/plugin-commonjs': 28.0.6(rollup@4.52.4)
- '@rollup/plugin-json': 6.1.0(rollup@4.52.4)
- '@rollup/plugin-node-resolve': 16.0.3(rollup@4.52.4)
- '@rollup/plugin-replace': 6.0.2(rollup@4.52.4)
- '@rollup/plugin-terser': 0.4.4(rollup@4.52.4)
+ '@optimize-lodash/rollup-plugin': 5.0.2(rollup@4.52.5)
+ '@rollup/plugin-alias': 5.1.1(rollup@4.52.5)
+ '@rollup/plugin-babel': 6.0.4(@babel/core@7.28.4)(@types/babel__core@7.20.5)(rollup@4.52.5)
+ '@rollup/plugin-commonjs': 28.0.6(rollup@4.52.5)
+ '@rollup/plugin-json': 6.1.0(rollup@4.52.5)
+ '@rollup/plugin-node-resolve': 16.0.3(rollup@4.52.5)
+ '@rollup/plugin-replace': 6.0.2(rollup@4.52.5)
+ '@rollup/plugin-terser': 0.4.4(rollup@4.52.5)
'@sanity/browserslist-config': 1.0.5
- '@vanilla-extract/rollup-plugin': 1.4.1(rollup@4.52.4)
+ '@vanilla-extract/rollup-plugin': 1.4.1(rollup@4.52.5)
browserslist: 4.26.3
cac: 6.7.14
chalk: 5.6.2
@@ -5610,8 +5568,8 @@ snapshots:
rimraf: 6.0.1
rolldown: 1.0.0-beta.42
rolldown-plugin-dts: 0.16.11(rolldown@1.0.0-beta.42)(typescript@5.9.3)
- rollup: 4.52.4
- rollup-plugin-esbuild: 6.2.1(esbuild@0.25.11)(rollup@4.52.4)
+ rollup: 4.52.5
+ rollup-plugin-esbuild: 6.2.1(esbuild@0.25.11)(rollup@4.52.5)
rxjs: 7.8.2
treeify: 1.1.0
tsx: 4.20.6
@@ -5638,20 +5596,19 @@ snapshots:
prettier: 3.6.2
prettier-plugin-packagejson: 2.5.19(prettier@3.6.2)
- '@sanity/ui@3.1.10(@emotion/is-prop-valid@1.2.2)(react-dom@19.2.0(react@19.2.0))(react-is@19.2.0)(react@19.2.0)(styled-components@6.1.19(react-dom@19.2.0(react@19.2.0))(react@19.2.0))':
+ '@sanity/ui@4.0.0-static.38(@emotion/is-prop-valid@1.2.2)(react-dom@19.2.0(react@19.2.0))(react-is@19.2.0)(react@19.2.0)':
dependencies:
'@floating-ui/react-dom': 2.1.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
'@juggle/resize-observer': 3.4.0
'@sanity/color': 3.0.6
'@sanity/icons': 3.7.4(react@19.2.0)
+ '@vanilla-extract/dynamic': 2.1.5
csstype: 3.1.3
framer-motion: 12.23.24(@emotion/is-prop-valid@1.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
react: 19.2.0
- react-compiler-runtime: 1.0.0(react@19.2.0)
react-dom: 19.2.0(react@19.2.0)
react-is: 19.2.0
react-refractor: 4.0.0(react@19.2.0)
- styled-components: 6.1.19(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
use-effect-event: 2.0.3(react@19.2.0)
transitivePeerDependencies:
- '@emotion/is-prop-valid'
@@ -5777,8 +5734,6 @@ snapshots:
'@types/node': 20.19.21
'@types/send': 0.17.5
- '@types/stylis@4.2.5': {}
-
'@types/unist@2.0.11': {}
'@types/unist@3.0.3': {}
@@ -5876,7 +5831,7 @@ snapshots:
dependencies:
'@vanilla-extract/css': 1.17.4
'@vanilla-extract/integration': 8.0.4
- vite: 7.1.10(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
+ vite: 7.1.11(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
vite-node: 3.2.4(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
transitivePeerDependencies:
- '@types/node'
@@ -5934,20 +5889,20 @@ snapshots:
'@vanilla-extract/private@1.0.9': {}
- '@vanilla-extract/rollup-plugin@1.4.1(rollup@4.52.4)':
+ '@vanilla-extract/rollup-plugin@1.4.1(rollup@4.52.5)':
dependencies:
'@vanilla-extract/integration': 8.0.4
magic-string: 0.30.19
- rollup: 4.52.4
+ rollup: 4.52.5
transitivePeerDependencies:
- babel-plugin-macros
- supports-color
- '@vanilla-extract/vite-plugin@5.1.1(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)(vite@7.1.10(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6))':
+ '@vanilla-extract/vite-plugin@5.1.1(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)(vite@7.1.11(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6))':
dependencies:
'@vanilla-extract/compiler': 0.3.1(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
'@vanilla-extract/integration': 8.0.4
- vite: 7.1.10(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
+ vite: 7.1.11(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
transitivePeerDependencies:
- '@types/node'
- babel-plugin-macros
@@ -5963,7 +5918,7 @@ snapshots:
- tsx
- yaml
- '@vitejs/plugin-react@5.0.4(vite@7.1.10(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6))':
+ '@vitejs/plugin-react@5.0.4(vite@7.1.11(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6))':
dependencies:
'@babel/core': 7.28.4
'@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.4)
@@ -5971,7 +5926,7 @@ snapshots:
'@rolldown/pluginutils': 1.0.0-beta.38
'@types/babel__core': 7.20.5
react-refresh: 0.17.0
- vite: 7.1.10(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
+ vite: 7.1.11(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
transitivePeerDependencies:
- supports-color
@@ -5983,13 +5938,13 @@ snapshots:
chai: 5.2.1
tinyrainbow: 2.0.0
- '@vitest/mocker@3.2.4(vite@7.1.10(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6))':
+ '@vitest/mocker@3.2.4(vite@7.1.11(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6))':
dependencies:
'@vitest/spy': 3.2.4
estree-walker: 3.0.3
magic-string: 0.30.19
optionalDependencies:
- vite: 7.1.10(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
+ vite: 7.1.11(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
'@vitest/pretty-format@3.2.4':
dependencies:
@@ -6348,8 +6303,6 @@ snapshots:
callsites@3.1.0: {}
- camelize@1.0.1: {}
-
caniuse-lite@1.0.30001750: {}
chai@5.2.1:
@@ -6491,14 +6444,6 @@ snapshots:
shebang-command: 2.0.0
which: 2.0.2
- css-color-keywords@1.0.0: {}
-
- css-to-react-native@3.2.0:
- dependencies:
- camelize: 1.0.1
- css-color-keywords: 1.0.0
- postcss-value-parser: 4.2.0
-
css-what@6.2.2: {}
cssesc@3.0.0: {}
@@ -8426,14 +8371,6 @@ snapshots:
possible-typed-array-names@1.1.0: {}
- postcss-value-parser@4.2.0: {}
-
- postcss@8.4.49:
- dependencies:
- nanoid: 3.3.11
- picocolors: 1.1.1
- source-map-js: 1.2.1
-
postcss@8.5.6:
dependencies:
nanoid: 3.3.11
@@ -8527,10 +8464,6 @@ snapshots:
minimist: 1.2.8
strip-json-comments: 2.0.1
- react-compiler-runtime@1.0.0(react@19.2.0):
- dependencies:
- react: 19.2.0
-
react-dom@19.2.0(react@19.2.0):
dependencies:
react: 19.2.0
@@ -8735,43 +8668,43 @@ snapshots:
'@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.42
'@rolldown/binding-win32-x64-msvc': 1.0.0-beta.42
- rollup-plugin-esbuild@6.2.1(esbuild@0.25.11)(rollup@4.52.4):
+ rollup-plugin-esbuild@6.2.1(esbuild@0.25.11)(rollup@4.52.5):
dependencies:
debug: 4.4.3
es-module-lexer: 1.7.0
esbuild: 0.25.11
get-tsconfig: 4.10.1
- rollup: 4.52.4
+ rollup: 4.52.5
unplugin-utils: 0.2.4
transitivePeerDependencies:
- supports-color
- rollup@4.52.4:
+ rollup@4.52.5:
dependencies:
'@types/estree': 1.0.8
optionalDependencies:
- '@rollup/rollup-android-arm-eabi': 4.52.4
- '@rollup/rollup-android-arm64': 4.52.4
- '@rollup/rollup-darwin-arm64': 4.52.4
- '@rollup/rollup-darwin-x64': 4.52.4
- '@rollup/rollup-freebsd-arm64': 4.52.4
- '@rollup/rollup-freebsd-x64': 4.52.4
- '@rollup/rollup-linux-arm-gnueabihf': 4.52.4
- '@rollup/rollup-linux-arm-musleabihf': 4.52.4
- '@rollup/rollup-linux-arm64-gnu': 4.52.4
- '@rollup/rollup-linux-arm64-musl': 4.52.4
- '@rollup/rollup-linux-loong64-gnu': 4.52.4
- '@rollup/rollup-linux-ppc64-gnu': 4.52.4
- '@rollup/rollup-linux-riscv64-gnu': 4.52.4
- '@rollup/rollup-linux-riscv64-musl': 4.52.4
- '@rollup/rollup-linux-s390x-gnu': 4.52.4
- '@rollup/rollup-linux-x64-gnu': 4.52.4
- '@rollup/rollup-linux-x64-musl': 4.52.4
- '@rollup/rollup-openharmony-arm64': 4.52.4
- '@rollup/rollup-win32-arm64-msvc': 4.52.4
- '@rollup/rollup-win32-ia32-msvc': 4.52.4
- '@rollup/rollup-win32-x64-gnu': 4.52.4
- '@rollup/rollup-win32-x64-msvc': 4.52.4
+ '@rollup/rollup-android-arm-eabi': 4.52.5
+ '@rollup/rollup-android-arm64': 4.52.5
+ '@rollup/rollup-darwin-arm64': 4.52.5
+ '@rollup/rollup-darwin-x64': 4.52.5
+ '@rollup/rollup-freebsd-arm64': 4.52.5
+ '@rollup/rollup-freebsd-x64': 4.52.5
+ '@rollup/rollup-linux-arm-gnueabihf': 4.52.5
+ '@rollup/rollup-linux-arm-musleabihf': 4.52.5
+ '@rollup/rollup-linux-arm64-gnu': 4.52.5
+ '@rollup/rollup-linux-arm64-musl': 4.52.5
+ '@rollup/rollup-linux-loong64-gnu': 4.52.5
+ '@rollup/rollup-linux-ppc64-gnu': 4.52.5
+ '@rollup/rollup-linux-riscv64-gnu': 4.52.5
+ '@rollup/rollup-linux-riscv64-musl': 4.52.5
+ '@rollup/rollup-linux-s390x-gnu': 4.52.5
+ '@rollup/rollup-linux-x64-gnu': 4.52.5
+ '@rollup/rollup-linux-x64-musl': 4.52.5
+ '@rollup/rollup-openharmony-arm64': 4.52.5
+ '@rollup/rollup-win32-arm64-msvc': 4.52.5
+ '@rollup/rollup-win32-ia32-msvc': 4.52.5
+ '@rollup/rollup-win32-x64-gnu': 4.52.5
+ '@rollup/rollup-win32-x64-msvc': 4.52.5
fsevents: 2.3.3
router@2.2.0:
@@ -8901,8 +8834,6 @@ snapshots:
setprototypeof@1.2.0: {}
- shallowequal@1.1.0: {}
-
shebang-command@2.0.0:
dependencies:
shebang-regex: 3.0.0
@@ -9128,22 +9059,6 @@ snapshots:
dependencies:
js-tokens: 9.0.1
- styled-components@6.1.19(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
- dependencies:
- '@emotion/is-prop-valid': 1.2.2
- '@emotion/unitless': 0.8.1
- '@types/stylis': 4.2.5
- css-to-react-native: 3.2.0
- csstype: 3.1.3
- postcss: 8.4.49
- react: 19.2.0
- react-dom: 19.2.0(react@19.2.0)
- shallowequal: 1.1.0
- stylis: 4.3.2
- tslib: 2.6.2
-
- stylis@4.3.2: {}
-
subarg@1.0.0:
dependencies:
minimist: 1.2.8
@@ -9250,8 +9165,6 @@ snapshots:
minimist: 1.2.8
strip-bom: 3.0.0
- tslib@2.6.2: {}
-
tslib@2.8.1: {}
tsx@4.20.6:
@@ -9412,7 +9325,7 @@ snapshots:
debug: 4.4.3
es-module-lexer: 1.7.0
pathe: 2.0.3
- vite: 7.1.10(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
+ vite: 7.1.11(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
transitivePeerDependencies:
- '@types/node'
- jiti
@@ -9427,13 +9340,13 @@ snapshots:
- tsx
- yaml
- vite@7.1.10(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6):
+ vite@7.1.11(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6):
dependencies:
esbuild: 0.25.11
fdir: 6.5.0(picomatch@4.0.3)
picomatch: 4.0.3
postcss: 8.5.6
- rollup: 4.52.4
+ rollup: 4.52.5
tinyglobby: 0.2.15
optionalDependencies:
'@types/node': 20.19.21
@@ -9447,7 +9360,7 @@ snapshots:
dependencies:
'@types/chai': 5.2.2
'@vitest/expect': 3.2.4
- '@vitest/mocker': 3.2.4(vite@7.1.10(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6))
+ '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6))
'@vitest/pretty-format': 3.2.4
'@vitest/runner': 3.2.4
'@vitest/snapshot': 3.2.4
@@ -9465,7 +9378,7 @@ snapshots:
tinyglobby: 0.2.15
tinypool: 1.1.1
tinyrainbow: 2.0.0
- vite: 7.1.10(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
+ vite: 7.1.11(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
vite-node: 3.2.4(@types/node@20.19.21)(jiti@2.5.1)(lightningcss@1.30.2)(terser@5.43.1)(tsx@4.20.6)
why-is-node-running: 2.3.0
optionalDependencies:
diff --git a/src/__workshop__/index.tsx b/src/__workshop__/index.tsx
index 5d6147de..e25489ff 100644
--- a/src/__workshop__/index.tsx
+++ b/src/__workshop__/index.tsx
@@ -36,13 +36,13 @@ function TestStory() {
return (
-
- This is my first story.
- Some text: {text}
- A boolean: {boolean ? 'true' : 'false'}
- A number: {number}
- A string: {string}
- An option: {option}
+
+ This is my first story.
+ Some text: {text}
+ A boolean: {boolean ? 'true' : 'false'}
+ A number: {number}
+ A string: {string}
+ An option: {option}
)
diff --git a/src/core/GlobalStyle.ts b/src/core/GlobalStyle.ts
deleted file mode 100644
index fccd143e..00000000
--- a/src/core/GlobalStyle.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {useRootTheme} from '@sanity/ui'
-import {setElementVars} from '@vanilla-extract/dynamic'
-import {useInsertionEffect} from 'react'
-
-import {bodyBackgroundColor} from '#styles'
-
-export function GlobalStyle(): null {
- const {scheme, theme} = useRootTheme()
- const bg = theme.v2!.color[scheme].default.bg!
-
- useInsertionEffect(() => {
- setElementVars(document.body, {
- [bodyBackgroundColor]: bg,
- })
- }, [bg])
-
- return null
-}
diff --git a/src/core/Workshop.tsx b/src/core/Workshop.tsx
index b39a0fdc..e39b9929 100644
--- a/src/core/Workshop.tsx
+++ b/src/core/Workshop.tsx
@@ -1,15 +1,11 @@
-import {
- BoundaryElementProvider,
- Flex,
- PortalProvider,
- ThemeColorSchemeKey,
- ToastProvider,
- useMediaIndex,
-} from '@sanity/ui'
+import {Flex, useMediaIndex} from '@sanity/ui'
+import type {ColorScheme} from '@sanity/ui/theme'
import {debounce} from 'lodash'
import {isEqual} from 'lodash'
import {memo, startTransition, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {workshopLayout} from '#styles'
+
import {WorkshopConfig} from './config'
import {DEFAULT_VIEWPORT_VALUE, DEFAULT_ZOOM_VALUE} from './constants'
import {WorkshopInspector} from './inspector'
@@ -27,13 +23,13 @@ import {workshopReducer} from './workshopReducer'
export interface WorkshopProps {
config: WorkshopConfig
locationStore: WorkshopLocationStore
- onSchemeChange: (nextScheme: ThemeColorSchemeKey) => void
- scheme?: ThemeColorSchemeKey
+ onSchemeChange: (nextScheme: ColorScheme) => void
+ scheme?: ColorScheme
}
function getStateFromLocation(
loc: Omit
,
- schemeProp?: ThemeColorSchemeKey,
+ schemeProp?: ColorScheme,
frameReady?: boolean,
): WorkshopState {
const path = loc.path
@@ -44,7 +40,7 @@ function getStateFromLocation(
frameReady: frameReady || false,
path,
payload,
- scheme: schemeProp || (typeof scheme === 'string' ? (scheme as ThemeColorSchemeKey) : 'light'),
+ scheme: schemeProp || (typeof scheme === 'string' ? (scheme as ColorScheme) : 'light'),
viewport: typeof viewport === 'string' ? viewport : 'auto',
zoom: typeof zoom === 'number' ? zoom : 1,
}
@@ -86,8 +82,6 @@ export const Workshop = memo(function Workshop(props: WorkshopProps): React.Reac
const withNavbar = config.features?.navbar ?? true
const channel = useMemo(() => createPubsub(), [])
const frame = useMemo(() => createWorkshopFrameController(), [])
- const [boundaryElement, setBoundaryElement] = useState(null)
- const [portalElement, setPortalElement] = useState(null)
const [{frameReady, path, payload, scheme, viewport, zoom}, setState] = useState(
() => getStateFromLocation(locationStore.get(), schemeProp),
)
@@ -245,39 +239,25 @@ export const Workshop = memo(function Workshop(props: WorkshopProps): React.Reac
viewport={viewport}
zoom={zoom}
>
-
-
-
-
- {withNavbar && (
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
+
+ {withNavbar && (
+
+ )}
+
+
+
+
+
+
+
)
})
diff --git a/src/core/WorkshopCanvas.tsx b/src/core/WorkshopCanvas.tsx
index 1ca80c7b..52e1e1da 100644
--- a/src/core/WorkshopCanvas.tsx
+++ b/src/core/WorkshopCanvas.tsx
@@ -34,7 +34,7 @@ export const WorkshopCanvas = memo(function WorkshopCanvas(props: {
{path === '/' && (
-
+
{title}
Browse workshop stories in the navigator to the left.
diff --git a/src/core/WorkshopContext.ts b/src/core/WorkshopContext.ts
index 95157950..d0fe8eb8 100644
--- a/src/core/WorkshopContext.ts
+++ b/src/core/WorkshopContext.ts
@@ -1,4 +1,4 @@
-import {ThemeColorSchemeKey} from '@sanity/ui'
+import type {ColorScheme} from '@sanity/ui/theme'
import {createContext} from 'react'
import {WorkshopCollection, WorkshopPlugin, WorkshopScope, WorkshopStory} from './config'
@@ -16,7 +16,7 @@ export interface WorkshopContextValue {
origin: 'frame' | 'main'
path: string
payload: Record
- scheme: ThemeColorSchemeKey
+ scheme: ColorScheme
scope: WorkshopScope | null
scopes: WorkshopScope[]
story: WorkshopStory | null
diff --git a/src/core/WorkshopProvider.tsx b/src/core/WorkshopProvider.tsx
index b4b0f7f1..94915bab 100644
--- a/src/core/WorkshopProvider.tsx
+++ b/src/core/WorkshopProvider.tsx
@@ -1,4 +1,4 @@
-import {ThemeColorSchemeKey} from '@sanity/ui'
+import type {ColorScheme} from '@sanity/ui/theme'
import {memo, useMemo} from 'react'
import {WorkshopConfig, WorkshopPlugin} from './config'
@@ -19,7 +19,7 @@ export interface WorkshopProviderProps {
origin: 'frame' | 'main'
path: string
payload: Record
- scheme: ThemeColorSchemeKey
+ scheme: ColorScheme
viewport?: string
zoom?: number
}
@@ -92,5 +92,3 @@ export const WorkshopProvider = memo(function WorkshopProvider(
)
})
-
-WorkshopProvider.displayName = 'Memo(WorkshopProvider)'
diff --git a/src/core/config/types.ts b/src/core/config/types.ts
index 12048cd6..c47e1766 100644
--- a/src/core/config/types.ts
+++ b/src/core/config/types.ts
@@ -1,5 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
-import {RootTheme} from '@sanity/ui'
import {ElementType, ReactNode} from 'react'
/** @public */
@@ -32,7 +31,6 @@ export interface WorkshopConfig {
frameUrl?: string
plugins?: WorkshopPlugin[]
scopes: WorkshopScope[]
- theme?: RootTheme
title?: string
}
diff --git a/src/core/frame/WorkshopCanvas.tsx b/src/core/frame/WorkshopCanvas.tsx
index 383aa6d6..a9cf367c 100644
--- a/src/core/frame/WorkshopCanvas.tsx
+++ b/src/core/frame/WorkshopCanvas.tsx
@@ -1,5 +1,5 @@
import {Box, Button, Card, Code, ErrorBoundary, Flex, Heading, Spinner, Stack} from '@sanity/ui'
-import {createElement, memo, Suspense, useCallback, useState} from 'react'
+import {memo, Suspense, useCallback, useState} from 'react'
import {WorkshopStory} from '../config'
import {useWorkshop} from '../useWorkshop'
@@ -35,14 +35,17 @@ export const WorkshopCanvas = memo(function WorkshopCanvas(): React.ReactNode {
)
}
+ const Story = story.component
return (
<>
{story.title}
}>
-
- {createElement(story.component)}
+
+
+
+
>
@@ -74,7 +77,7 @@ const ErrorScreen = memo(function ErrorScreen(props: {
return (
-
+
{error.message}
diff --git a/src/core/frame/WorkshopFrame.tsx b/src/core/frame/WorkshopFrame.tsx
index 56fe4293..a118b4fb 100644
--- a/src/core/frame/WorkshopFrame.tsx
+++ b/src/core/frame/WorkshopFrame.tsx
@@ -1,10 +1,4 @@
-import {
- BoundaryElementProvider,
- Card,
- PortalProvider,
- ThemeColorSchemeKey,
- ToastProvider,
-} from '@sanity/ui'
+import type {ColorScheme} from '@sanity/ui/theme'
import {memo, useCallback, useEffect, useMemo, useState} from 'react'
import {WorkshopConfig} from '../config'
@@ -19,7 +13,7 @@ import {createMainController} from './WorkshopMainController'
/** @internal */
export interface WorkshopFrameProps {
config: WorkshopConfig
- setScheme: (nextScheme: ThemeColorSchemeKey) => void
+ setScheme: (nextScheme: ColorScheme) => void
}
function getStateFromLocation(): WorkshopState {
@@ -30,7 +24,7 @@ function getStateFromLocation(): WorkshopState {
frameReady: false,
path,
payload,
- scheme: typeof scheme === 'string' ? (scheme as ThemeColorSchemeKey) : 'light',
+ scheme: typeof scheme === 'string' ? (scheme as ColorScheme) : 'light',
viewport: typeof viewport === 'string' ? viewport : 'auto',
zoom: typeof zoom === 'string' ? Number(zoom) : 1,
}
@@ -43,8 +37,6 @@ export const WorkshopFrame = memo(function WorkshopFrame(
const {config, setScheme} = props
const main = useMemo(() => createMainController(), [])
const channel = useMemo(() => createPubsub(), [])
- const [boundaryElement, setBoundaryElement] = useState(null)
- const [portalElement, setPortalElement] = useState(null)
// Publish messages to both frame+main
const broadcast = useCallback(
@@ -75,28 +67,19 @@ export const WorkshopFrame = memo(function WorkshopFrame(
useEffect(() => broadcast({type: 'workshop/frameReady'}), [broadcast])
return (
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
)
})
diff --git a/src/core/helpers.ts b/src/core/helpers.ts
index 82b07b01..2f6a823c 100644
--- a/src/core/helpers.ts
+++ b/src/core/helpers.ts
@@ -1,4 +1,4 @@
-import {ThemeColorSchemeKey} from '@sanity/ui'
+import type {ColorScheme} from '@sanity/ui/theme'
import {WorkshopScope, WorkshopStory} from './config'
@@ -36,7 +36,7 @@ export function buildFrameUrl(params: {
baseUrl?: string
path: string
payload: Record
- scheme: ThemeColorSchemeKey
+ scheme: ColorScheme
viewport: string
zoom: number
}): string {
diff --git a/src/core/inspector/InspectorHeader.tsx b/src/core/inspector/InspectorHeader.tsx
index da297716..a178a2cf 100644
--- a/src/core/inspector/InspectorHeader.tsx
+++ b/src/core/inspector/InspectorHeader.tsx
@@ -1,7 +1,7 @@
import {Card, Layer, Tab, TabList} from '@sanity/ui'
import {memo, useCallback} from 'react'
-import {inspectorHeader, inspectorHeaderCard} from '#styles'
+import {inspectorHeader} from '#styles'
import {InspectorTab} from './types'
@@ -13,9 +13,9 @@ export const InspectorHeader = memo(function InspectorHeader(props: {
const {currentTabId, onTabChange, tabs} = props
return (
-
-
-
+
+
+
{tabs.map((tab) => (
{showTabs && }
diff --git a/src/core/inspector/types.ts b/src/core/inspector/types.ts
index ef045ddc..aae7b9dc 100644
--- a/src/core/inspector/types.ts
+++ b/src/core/inspector/types.ts
@@ -1,11 +1,10 @@
-import {ButtonTone} from '@sanity/ui'
-import {ReactNode} from 'react'
+import type {ElementTone} from '@sanity/ui/theme'
import {WorkshopPlugin} from '../config'
export interface InspectorTab {
id: string
- label: ReactNode
+ label: React.ReactNode
plugin: WorkshopPlugin
- tone?: ButtonTone
+ tone?: ElementTone
}
diff --git a/src/core/mount.tsx b/src/core/mount.tsx
index 2b9698b5..292c0ad8 100644
--- a/src/core/mount.tsx
+++ b/src/core/mount.tsx
@@ -1,46 +1,50 @@
-import {studioTheme, ThemeColorSchemeKey, ThemeProvider, usePrefersDark} from '@sanity/ui'
-import {startTransition, StrictMode, useEffect, useMemo, useState} from 'react'
+import '@sanity/ui/css/index.css'
+
+import {Root, usePrefersDark} from '@sanity/ui'
+import type {ColorScheme} from '@sanity/ui/theme'
+import {startTransition, StrictMode, useEffect, useState} from 'react'
import {createRoot} from 'react-dom/client'
import {WorkshopConfig} from './config'
-import {GlobalStyle} from './GlobalStyle'
import {createLocationStore} from './location'
import {Workshop} from './Workshop'
/** @beta */
-export function mount(options: {config: WorkshopConfig; element: HTMLElement | null}): void {
- const {config, element} = options
-
- if (!element) throw new Error('missing element')
+export function mount(options: {config: WorkshopConfig}): void {
+ const {config} = options
- const root = createRoot(element)
+ const root = createRoot(document)
root.render(
-
+
,
)
}
-function Root(props: {config: WorkshopConfig}) {
+function App(props: {config: WorkshopConfig}) {
const {config} = props
+ const [locationStore] = useState(() => createLocationStore())
const prefersDark = usePrefersDark()
- const [scheme, setScheme] = useState(prefersDark ? 'dark' : 'light')
- const locationStore = useMemo(() => createLocationStore(), [])
+ const [scheme, setScheme] = useState(prefersDark ? 'dark' : 'light')
useEffect(() => {
startTransition(() => setScheme(prefersDark ? 'dark' : 'light'))
}, [prefersDark])
return (
-
-
+
+
+
-
+
)
}
diff --git a/src/core/mountFrame.tsx b/src/core/mountFrame.tsx
index d5425e78..ca1238ea 100644
--- a/src/core/mountFrame.tsx
+++ b/src/core/mountFrame.tsx
@@ -1,35 +1,39 @@
-import {studioTheme, ThemeColorSchemeKey, ThemeProvider, usePrefersDark} from '@sanity/ui'
+import '@sanity/ui/css/index.css'
+
+import {Root, usePrefersDark} from '@sanity/ui'
+import type {ColorScheme} from '@sanity/ui/theme'
import {StrictMode, useState} from 'react'
import {createRoot} from 'react-dom/client'
import {WorkshopConfig} from './config'
import {WorkshopFrame} from './frame'
-import {GlobalStyle} from './GlobalStyle'
/** @beta */
-export function mountFrame(options: {config: WorkshopConfig; element: HTMLElement | null}): void {
- const {config, element} = options
-
- if (!element) throw new Error('missing element')
+export function mountFrame(options: {config: WorkshopConfig}): void {
+ const {config} = options
- const root = createRoot(element)
+ const root = createRoot(document)
root.render(
-
+
,
)
}
-function Root(props: {config: WorkshopConfig}) {
+function App(props: {config: WorkshopConfig}) {
const {config} = props
const prefersDark = usePrefersDark()
- const [scheme, setScheme] = useState(prefersDark ? 'dark' : 'light')
+ const [scheme, setScheme] = useState(prefersDark ? 'dark' : 'light')
return (
-
-
+
+
+
-
+
)
}
diff --git a/src/core/navbar/NavbarBreadcrumbs.tsx b/src/core/navbar/NavbarBreadcrumbs.tsx
index cca50795..8dd10050 100644
--- a/src/core/navbar/NavbarBreadcrumbs.tsx
+++ b/src/core/navbar/NavbarBreadcrumbs.tsx
@@ -1,6 +1,8 @@
import {Breadcrumbs, Text} from '@sanity/ui'
import {memo, useCallback} from 'react'
+import {navbarBreadcrumbsLink} from '#styles'
+
import {useWorkshop} from '../useWorkshop'
/** @internal */
@@ -40,10 +42,10 @@ const NavbarBreadcrumbsView = memo(function NavbarBreadcrumbsView(props: {
/
}
- space={2}
+ gap={2}
>
-
+
{title}
diff --git a/src/core/navbar/OpenCanvasButton.tsx b/src/core/navbar/OpenCanvasButton.tsx
index 8d228d7c..9113dc0d 100644
--- a/src/core/navbar/OpenCanvasButton.tsx
+++ b/src/core/navbar/OpenCanvasButton.tsx
@@ -17,18 +17,32 @@ export const OpenCanvasButton = memo(function OpenCanvasButton() {
[frameUrl, path, payload, scheme, zoom, viewport],
)
- return (
+ const fontSize = 1
+ const iconRight = LaunchIcon
+ const mode = 'ghost'
+ const padding = 2
+ const text = 'Open story'
+ return canvasUrl ? (
+ ) : (
+
)
})
diff --git a/src/core/navbar/WorkshopNavbar.tsx b/src/core/navbar/WorkshopNavbar.tsx
index 7fa9c543..96c87e41 100644
--- a/src/core/navbar/WorkshopNavbar.tsx
+++ b/src/core/navbar/WorkshopNavbar.tsx
@@ -2,6 +2,8 @@ import {ControlsIcon, MenuIcon} from '@sanity/icons'
import {Box, Button, Card, Flex, Inline, Text, useMediaIndex} from '@sanity/ui'
import {memo} from 'react'
+import {navbarBreadcrumbsContainer, navbarCard} from '#styles'
+
import {useWorkshop} from '../useWorkshop'
import {NavbarBreadcrumbs} from './NavbarBreadcrumbs'
import {OpenCanvasButton} from './OpenCanvasButton'
@@ -21,7 +23,7 @@ export const WorkshopNavbar = memo(function WorkshopNavbar(props: {
const {story, title} = useWorkshop()
return (
-
+
-
+
diff --git a/src/core/navigator/SearchResults.tsx b/src/core/navigator/SearchResults.tsx
index 58c11a0e..4447422e 100644
--- a/src/core/navigator/SearchResults.tsx
+++ b/src/core/navigator/SearchResults.tsx
@@ -6,12 +6,12 @@ import {WorkshopScope, WorkshopStory} from '../config'
/** @internal */
export const SearchResults = memo(function SearchResults(props: {
matches: {scope: WorkshopScope; story: WorkshopStory}[]
- onStoryClick: (event: React.MouseEvent) => void
+ onStoryClick: (event: React.MouseEvent) => void
}) {
const {matches, onStoryClick} = props
return (
-
+
{matches.map(({scope, story}) => (
+
)
diff --git a/src/core/navigator/WorkshopNavigator.tsx b/src/core/navigator/WorkshopNavigator.tsx
index 49c4be12..c5a5a28c 100644
--- a/src/core/navigator/WorkshopNavigator.tsx
+++ b/src/core/navigator/WorkshopNavigator.tsx
@@ -1,8 +1,10 @@
import {SearchIcon} from '@sanity/icons'
import {Box, Card, Flex, Layer, TextInput} from '@sanity/ui'
+import type {Display, ResponsiveProp} from '@sanity/ui/css'
+import {FontTextSize} from '@sanity/ui/theme'
import {memo, useCallback, useMemo, useState} from 'react'
-import {workshopNavigator} from '#styles'
+import {navigatorSearchCard, workshopNavigator} from '#styles'
import {WorkshopScope, WorkshopStory} from '../config'
import {EMPTY_ARRAY} from '../constants'
@@ -12,9 +14,7 @@ import {SearchResults} from './SearchResults'
import {StoryTree} from './StoryTree'
import {MenuCollection, MenuList, MenuScope} from './types'
-const flexNoneStyle: React.CSSProperties = {flex: 'none'}
-const lineHeightNoneStyle: React.CSSProperties = {lineHeight: 0}
-const textInputFontSize = [2, 2, 1]
+const textInputFontSize: ResponsiveProp = [2, 2, 1]
/** @internal */
export const WorkshopNavigator = memo(function WorkshopNavigator(props: {
@@ -52,7 +52,7 @@ export const WorkshopNavigator = memo(function WorkshopNavigator(props: {
const handleSearchQueryClear = useCallback(() => setQuery(''), [])
const handleStoryClick = useCallback(
- (event: React.MouseEvent) => {
+ (event: React.MouseEvent) => {
event.preventDefault()
const target = event.currentTarget
@@ -86,21 +86,28 @@ const NavigatorView = memo(function NavigatorView(props: {
menu: MenuScope | MenuList
onSearchQueryChange: (event: React.ChangeEvent) => void
onSearchQueryClear: () => void
- onStoryClick: (event: React.MouseEvent) => void
+ onStoryClick: (event: React.MouseEvent) => void
query: string
}) {
const {expanded, matches, menu, onSearchQueryChange, onSearchQueryClear, onStoryClick, query} =
props
+ const display = useMemo>(
+ () => (expanded ? ['block'] : ['none', 'none', 'block']),
+ [expanded],
+ )
+
return (
-
-
+
+
diff --git a/src/core/plugins/props/components/booleanProp.tsx b/src/core/plugins/props/components/booleanProp.tsx
index d4874b45..b08ad7da 100644
--- a/src/core/plugins/props/components/booleanProp.tsx
+++ b/src/core/plugins/props/components/booleanProp.tsx
@@ -1,6 +1,8 @@
import {Box, Checkbox, Flex, Text} from '@sanity/ui'
import {memo} from 'react'
+import {booleanPropBox} from '#styles'
+
import {BooleanPropSchema} from '../types'
import {useProps} from '../useProps'
@@ -14,7 +16,7 @@ export const BooleanProp = memo(function BooleanProp(props: {
return (
-
+
setPropValue(schema.name, event.currentTarget.checked)}
diff --git a/src/core/runtime/types.ts b/src/core/runtime/types.ts
index bfa3658b..38f3b265 100644
--- a/src/core/runtime/types.ts
+++ b/src/core/runtime/types.ts
@@ -1,3 +1,4 @@
+import type {vanillaExtractPlugin} from '@vanilla-extract/vite-plugin'
import {InlineConfig} from 'vite'
/** @public */
@@ -9,5 +10,6 @@ export interface WorkshopRuntime {
server?: {
port?: number
}
+ vanillaExtract?: boolean | Parameters[0]
vite?: (viteConfig: InlineConfig) => InlineConfig | Promise
}
diff --git a/src/core/styles.css.ts b/src/core/styles.css.ts
index 559bcda4..b6a89ea9 100644
--- a/src/core/styles.css.ts
+++ b/src/core/styles.css.ts
@@ -1,65 +1,6 @@
-import {
- createVar,
- createViewTransition,
- globalFontFace,
- globalStyle,
- style,
-} from '@vanilla-extract/css'
+import {createVar, createViewTransition, globalStyle, style} from '@vanilla-extract/css'
import {calc} from '@vanilla-extract/css-utils'
-const fontDisplay: FontDisplay = 'swap'
-
-globalFontFace('Inter', [
- {
- src: `url('https://studio-static.sanity.io/Inter-Regular.woff2') format('woff2')`,
- fontDisplay,
- fontStyle: 'normal',
- fontWeight: '400',
- },
- {
- src: `url('https://studio-static.sanity.io/Inter-Italic.woff2') format('woff2')`,
- fontDisplay,
- fontStyle: 'italic',
- fontWeight: '400',
- },
- {
- src: `url('https://studio-static.sanity.io/Inter-Medium.woff2') format('woff2')`,
- fontDisplay,
- fontStyle: 'normal',
- fontWeight: '500',
- },
- {
- src: `url('https://studio-static.sanity.io/Inter-MediumItalic.woff2') format('woff2')`,
- fontDisplay,
- fontStyle: 'italic',
- fontWeight: '500',
- },
- {
- src: `url('https://studio-static.sanity.io/Inter-SemiBold.woff2') format('woff2')`,
- fontDisplay,
- fontStyle: 'normal',
- fontWeight: '600',
- },
- {
- src: `url('https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2') format('woff2')`,
- fontDisplay,
- fontStyle: 'italic',
- fontWeight: '600',
- },
- {
- src: `url('https://studio-static.sanity.io/Inter-Bold.woff2') format('woff2')`,
- fontDisplay,
- fontStyle: 'normal',
- fontWeight: '700',
- },
- {
- src: `url('https://studio-static.sanity.io/Inter-BoldItalic.woff2') format('woff2')`,
- fontDisplay,
- fontStyle: 'italic',
- fontWeight: '700',
- },
-])
-
globalStyle('html', {
WebkitTextSizeAdjust: '100%',
textSizeAdjust: '100%',
@@ -67,23 +8,11 @@ globalStyle('html', {
WebkitFontSmoothing: 'antialiased',
})
-globalStyle('html, body, #root', {
+globalStyle('html, body', {
height: '100%',
margin: 0,
})
-export const bodyBackgroundColor = createVar(
- {
- syntax: '',
- inherits: false,
- initialValue: '#fff',
- },
- 'body-background-color',
-)
-globalStyle('body', {
- backgroundColor: bodyBackgroundColor,
-})
-
export const canvasViewTransition = createViewTransition('canvas')
export const zoom = createVar(
{
@@ -107,7 +36,7 @@ export const viewportMaxWidth = createVar('viewport-max-width')
export const viewportMaxHeight = createVar('viewport-max-height')
export const iframeContainer = style({
selectors: {
- '&&&': {
+ '&&': {
maxWidth: calc.multiply(viewportMaxWidth, zoom),
maxHeight: calc.multiply(viewportMaxHeight, zoom),
},
@@ -115,11 +44,9 @@ export const iframeContainer = style({
})
const workshopAside = style({
- 'overflow': 'hidden',
'@media': {
'screen and (min-width: 600px)': {
maxWidth: '300px',
- overflow: 'auto',
selectors: {
'&&': {
minWidth: '180px',
@@ -129,43 +56,49 @@ const workshopAside = style({
},
})
-export const workshopInspector = style([
- workshopAside,
- {
- '@media': {
- 'screen and (min-width: 600px)': {
- borderLeft: `1px solid var(--card-border-color)`,
- },
+export const workshopInspector = style([workshopAside])
+
+export const workshopNavigator = style([workshopAside])
+
+export const inspectorHeader = style({
+ top: 0,
+})
+
+export const workshopLayout = style({
+ selectors: {
+ '&&': {
+ minWidth: '320px',
},
},
-])
+})
-export const workshopNavigator = style([
- workshopAside,
- {
- '@media': {
- 'screen and (min-width: 600px)': {
- borderRight: `1px solid var(--card-border-color)`,
- },
+export const navbarBreadcrumbsContainer = style({
+ selectors: {
+ '&&': {
+ minWidth: '250px',
},
},
-])
-
-export const inspectorHeader = style({
+})
+export const navbarBreadcrumbsLink = style({
selectors: {
'&&': {
- flex: 'none',
- position: 'sticky',
- top: 0,
+ color: 'inherit',
},
},
})
-export const inspectorHeaderCard = style({
- 'lineHeight': 0,
- '@media': {
- 'screen and (max-width: 599px)': {
- textAlign: 'center',
+const force0LineHeight = style({
+ selectors: {
+ '&&': {
+ lineHeight: '0',
},
},
})
+
+export const navbarCard = style([force0LineHeight])
+
+export const navigatorSearchCard = style([force0LineHeight])
+
+export const booleanPropBox = style([force0LineHeight])
+
+export const perfInspectorCard = style([force0LineHeight])
diff --git a/src/core/types/msg.ts b/src/core/types/msg.ts
index d4649c83..2c4d6e7c 100644
--- a/src/core/types/msg.ts
+++ b/src/core/types/msg.ts
@@ -1,4 +1,4 @@
-import {ThemeColorSchemeKey} from '@sanity/ui'
+import type {ColorScheme} from '@sanity/ui/theme'
import {WorkshopState} from './state'
@@ -33,7 +33,7 @@ export interface WorkshopToggleSchemeMsg {
/** @public */
export interface WorkshopSetSchemeMsg {
type: 'workshop/setScheme'
- value: ThemeColorSchemeKey
+ value: ColorScheme
}
/** @public */
diff --git a/src/core/types/state.ts b/src/core/types/state.ts
index 5358d594..bf45f361 100644
--- a/src/core/types/state.ts
+++ b/src/core/types/state.ts
@@ -1,11 +1,11 @@
-import {ThemeColorSchemeKey} from '@sanity/ui'
+import type {ColorScheme} from '@sanity/ui/theme'
/** @public */
export interface WorkshopState {
frameReady: boolean
path: string
payload: Record
- scheme: ThemeColorSchemeKey
+ scheme: ColorScheme
viewport: string
zoom: number
}
diff --git a/src/plugin-a11y/A11yInspector.tsx b/src/plugin-a11y/A11yInspector.tsx
index cd620a27..5bffe033 100644
--- a/src/plugin-a11y/A11yInspector.tsx
+++ b/src/plugin-a11y/A11yInspector.tsx
@@ -1,4 +1,5 @@
-import {Box, Card, CardTone, Code, Stack, Text} from '@sanity/ui'
+import {Box, Card, Code, Stack, Text} from '@sanity/ui'
+import type {CardTone} from '@sanity/ui/theme'
import axe from 'axe-core'
import {memo} from 'react'
@@ -12,7 +13,7 @@ export const A11yInspector = memo(function A11yInspector(): React.ReactNode {
{results && (
<>
-
+
{results.violations.map((violation) => (
))}
@@ -33,7 +34,7 @@ const ResultItem = memo(function ResultItem(props: {result: axe.Result; tone?: C
return (
-
+
{result.help}
{result.impact && <> ({result.impact})>}
@@ -48,10 +49,10 @@ const ResultItem = memo(function ResultItem(props: {result: axe.Result; tone?: C
-
+
{result.nodes.map((node, nodeIndex) => {
return (
-
+
{node.failureSummary && {node.failureSummary}}
diff --git a/src/plugin-a11y/A11yProvider.tsx b/src/plugin-a11y/A11yProvider.tsx
index cd7b1a49..9fdf25fc 100644
--- a/src/plugin-a11y/A11yProvider.tsx
+++ b/src/plugin-a11y/A11yProvider.tsx
@@ -1,8 +1,8 @@
-import {useWorkshop} from '@sanity/ui-workshop'
import axe, {AxeResults} from 'axe-core'
import {memo, useEffect, useMemo, useState} from 'react'
-import {A11yContext, A11yContextValue} from './A11yContext'
+import {useWorkshop} from '../core/useWorkshop'
+import {A11yContext, type A11yContextValue} from './A11yContext'
import {A11yMsg} from './msg'
/** @internal */
diff --git a/src/plugin-a11y/index.ts b/src/plugin-a11y/index.ts
index 689f8f03..12c11111 100644
--- a/src/plugin-a11y/index.ts
+++ b/src/plugin-a11y/index.ts
@@ -1,4 +1,4 @@
-import {WorkshopPlugin} from '@sanity/ui-workshop'
+import type {WorkshopPlugin} from '@sanity/ui-workshop'
import {A11yInspector} from './A11yInspector'
import {A11yProvider} from './A11yProvider'
diff --git a/src/plugin-perf/PerfInspector.tsx b/src/plugin-perf/PerfInspector.tsx
index 74db246f..8096e8ec 100644
--- a/src/plugin-perf/PerfInspector.tsx
+++ b/src/plugin-perf/PerfInspector.tsx
@@ -2,6 +2,8 @@ import {PlayIcon, TrashIcon} from '@sanity/icons'
import {Box, Button, Card, Flex, Stack, Text} from '@sanity/ui'
import {memo} from 'react'
+import {perfInspectorCard} from '#styles'
+
import {usePerf} from './hooks'
/** @internal */
@@ -21,14 +23,14 @@ export const PerfInspector = memo(function PerfInspector(): React.ReactNode {
}
return (
-
+
{testDetails.map((detail) => {
const testResults = results.filter((r) => r.name === detail.name)
return (
-
+
-
+
{detail.title || detail.name}
diff --git a/src/plugin-perf/PerfProvider.tsx b/src/plugin-perf/PerfProvider.tsx
index 0f0e7f23..c7eb4c4e 100644
--- a/src/plugin-perf/PerfProvider.tsx
+++ b/src/plugin-perf/PerfProvider.tsx
@@ -1,11 +1,11 @@
-import {useWorkshop} from '@sanity/ui-workshop'
import {memo, useCallback, useEffect, useMemo, useState} from 'react'
+import {useWorkshop} from '../core/useWorkshop'
import {_runTest} from './_runTest'
-import {PerfMsg} from './msg'
-import {PerfContext, PerfContextValue} from './PerfContext'
+import type {PerfMsg} from './msg'
+import {PerfContext, type PerfContextValue} from './PerfContext'
import {perfReducer} from './perfReducer'
-import {PerfState, PerfTest, PerfTestRenderResult} from './types'
+import type {PerfState, PerfTest, PerfTestRenderResult} from './types'
/** @internal */
export const PerfProvider = memo(function PerfProvider(props: {
diff --git a/src/plugin-perf/index.ts b/src/plugin-perf/index.ts
index f71775f5..22ee36fd 100644
--- a/src/plugin-perf/index.ts
+++ b/src/plugin-perf/index.ts
@@ -1,5 +1,5 @@
export type {PerfContextValue} from './PerfContext'
-import {WorkshopPlugin} from '@sanity/ui-workshop'
+import type {WorkshopPlugin} from '@sanity/ui-workshop'
import {PerfInspector} from './PerfInspector'
import {PerfProvider} from './PerfProvider'
diff --git a/src/plugin-perf/perfReducer.ts b/src/plugin-perf/perfReducer.ts
index 77010138..73b2169a 100644
--- a/src/plugin-perf/perfReducer.ts
+++ b/src/plugin-perf/perfReducer.ts
@@ -1,7 +1,7 @@
-import {WorkshopMsg} from '@sanity/ui-workshop'
+import type {WorkshopMsg} from '@sanity/ui-workshop'
-import {PerfMsg} from './msg'
-import {PerfState} from './types'
+import type {PerfMsg} from './msg'
+import type {PerfState} from './types'
/** @internal */
export function perfReducer(state: PerfState, msg: PerfMsg | WorkshopMsg): PerfState {
diff --git a/src/runtime/build.ts b/src/runtime/build.ts
index 88b931bf..2c10e25b 100644
--- a/src/runtime/build.ts
+++ b/src/runtime/build.ts
@@ -43,7 +43,12 @@ export async function build(options: {cwd: string}): Promise {
await writeFile(path.resolve(runtimeDir, 'scopes.ts'), code)
- const baseViteConfig = createViteConfig({cwd, outDir, runtimeDir})
+ const baseViteConfig = createViteConfig({
+ cwd,
+ outDir,
+ runtimeDir,
+ vanillaExtract: runtime?.vanillaExtract,
+ })
let viteConfig = runtime?.vite?.(baseViteConfig) || baseViteConfig
diff --git a/src/runtime/devServer/createDevServer.ts b/src/runtime/devServer/createDevServer.ts
index 76e83096..dc8de65a 100644
--- a/src/runtime/devServer/createDevServer.ts
+++ b/src/runtime/devServer/createDevServer.ts
@@ -15,7 +15,7 @@ export async function createDevServer(options: {
const {cwd, outDir, runtime, runtimeDir} = options
const baseViteConfig: InlineConfig = {
- ...createViteConfig({cwd, outDir, runtimeDir}),
+ ...createViteConfig({cwd, outDir, runtimeDir, vanillaExtract: runtime?.vanillaExtract}),
appType: 'custom', // don't include HTML middlewares
configFile: false,
logLevel: 'info',
diff --git a/src/runtime/runtime/_writeFrameHTML.ts b/src/runtime/runtime/_writeFrameHTML.ts
index 894d0043..677f92bb 100644
--- a/src/runtime/runtime/_writeFrameHTML.ts
+++ b/src/runtime/runtime/_writeFrameHTML.ts
@@ -11,7 +11,6 @@ const HTML = `
/>
-