feat!: use UI v4

Author: stipsan

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 (
--    <div>
-+    <div className={container}>
-      <h1>This is my first story.</h1>
-      <p>Some text: {text}</p>
-      <p>A boolean: {boolean ? 'true' : 'false'}</p>
-      <p>A number: {number}</p>
-      <p>A string: {string}</p>
-      <p>An option: {option}</p>
-    </div>
-  )
-}
-```
-
 ## License
 
 [MIT](LICENSE)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui-workshop",
-  "version": "3.4.0",
+  "version": "4.0.0-static.11",
   "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"
   },