diff --git a/.vscode/settings.json b/.vscode/settings.json
index c1f5657..bf4f8ad 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,11 +1,9 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "files.exclude": {
-    "**/node_modules": true,
-    // "**/.yarn": true,
     "**/.cache": true,
-    "**/.temp": true,
-    "**/.history": true
+    "**/.history": true,
+    "**/.temp": true
   },
   "search.exclude": {
     "**/node_modules": true,
diff --git a/compatibility-tests/test-cra-react18/package.json b/compatibility-tests/test-cra-react18/package.json
index 152c9b3..a4feae9 100644
--- a/compatibility-tests/test-cra-react18/package.json
+++ b/compatibility-tests/test-cra-react18/package.json
@@ -14,8 +14,8 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@theatre/core": "^0.0.1-COMPAT.1",
-    "@theatre/studio": "^0.0.1-COMPAT.1",
     "@theatre/r3f": "^0.0.1-COMPAT.1",
+    "@theatre/studio": "^0.0.1-COMPAT.1",
     "react-scripts": "^5.0.1",
     "three": ">0.132.0",
     "web-vitals": "^1.0.1"
diff --git a/compatibility-tests/test-cra-react18/src/App.js b/compatibility-tests/test-cra-react18/src/App.js
deleted file mode 100644
index 5a338c6..0000000
--- a/compatibility-tests/test-cra-react18/src/App.js
+++ /dev/null
@@ -1,154 +0,0 @@
-import {getProject} from '@theatre/core'
-import * as THREE from 'three'
-import React, {useState, useEffect, useRef} from 'react'
-import {useFrame, Canvas} from '@react-three/fiber'
-import {Shadow, softShadows} from '@react-three/drei'
-import studio from '@theatre/studio'
-import {editable as e, SheetProvider} from '@theatre/r3f'
-import extension from '@theatre/r3f/dist/extension'
-
-if (process.env.NODE_ENV === 'development') {
-  studio.extend(extension)
-  studio.initialize()
-}
-
-// Soft shadows are expensive, comment and refresh when it's too slow
-softShadows()
-
-// credit: https://codesandbox.io/s/camera-pan-nsb7f
-
-function Button() {
-  const vec = new THREE.Vector3()
-  const light = useRef(undefined)
-  const [active, setActive] = useState(false)
-  const [zoom, set] = useState(true)
-  useEffect(
-    () => void (document.body.style.cursor = active ? 'pointer' : 'auto'),
-    [active],
-  )
-
-  useFrame((state) => {
-    const step = 0.1
-    const camera = state.camera
-    camera.fov = THREE.MathUtils.lerp(camera.fov, zoom ? 10 : 42, step)
-    camera.position.lerp(
-      vec.set(zoom ? 25 : 10, zoom ? 1 : 5, zoom ? 0 : 10),
-      step,
-    )
-    state.camera.lookAt(0, 0, 0)
-    state.camera.updateProjectionMatrix()
-
-    light.current.position.lerp(
-      vec.set(zoom ? 4 : 0, zoom ? 3 : 8, zoom ? 3 : 5),
-      step,
-    )
-  })
-
-  return (
-    <e.mesh
-      receiveShadow
-      castShadow
-      onClick={() => set(!zoom)}
-      onPointerOver={() => setActive(true)}
-      onPointerOut={() => setActive(false)}
-      uniqueName="The Button"
-    >
-      <sphereBufferGeometry args={[0.75, 64, 64]} />
-      <meshPhysicalMaterial
-        color={active ? 'purple' : '#e7b056'}
-        clearcoat={1}
-        clearcoatRoughness={0}
-      />
-      <Shadow
-        position-y={-0.79}
-        rotation-x={-Math.PI / 2}
-        opacity={0.6}
-        scale={[0.8, 0.8, 1]}
-      />
-      <directionalLight
-        ref={light}
-        castShadow
-        intensity={1.5}
-        shadow-camera-far={70}
-      />
-    </e.mesh>
-  )
-}
-
-function Plane({color, uniqueName, ...props}) {
-  return (
-    <e.mesh receiveShadow castShadow {...props} uniqueName={uniqueName}>
-      <boxBufferGeometry />
-      <meshStandardMaterial color={color} />
-    </e.mesh>
-  )
-}
-
-function App() {
-  return (
-    <div>
-      <Canvas
-        // @ts-ignore
-        shadowMap
-        gl={{preserveDrawingBuffer: true}}
-        linear
-        frameloop="demand"
-        dpr={[1.5, 2]}
-      >
-        <SheetProvider
-          sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}
-        >
-          {/* @ts-ignore */}
-          <e.perspectiveCamera makeDefault uniqueName="Camera" />
-          <ambientLight intensity={0.4} />
-          <e.pointLight
-            position={[-10, -10, 5]}
-            intensity={2}
-            color="#ff20f0"
-            uniqueName="Light 1"
-          />
-          <e.pointLight
-            position={[0, 0.5, -1]}
-            distance={1}
-            intensity={2}
-            color="#e4be00"
-            uniqueName="Light 2"
-          />
-          <group position={[0, -0.9, -3]}>
-            <Plane
-              color="hotpink"
-              rotation-x={-Math.PI / 2}
-              position-z={2}
-              scale={[4, 20, 0.2]}
-              uniqueName="plane1"
-            />
-            <Plane
-              color="#e4be00"
-              rotation-x={-Math.PI / 2}
-              position-y={1}
-              scale={[4.2, 0.2, 4]}
-              uniqueName="plane2"
-            />
-            <Plane
-              color="#736fbd"
-              rotation-x={-Math.PI / 2}
-              position={[-1.7, 1, 3.5]}
-              scale={[0.5, 4, 4]}
-              uniqueName="plane3"
-            />
-            <Plane
-              color="white"
-              rotation-x={-Math.PI / 2}
-              position={[0, 4.5, 3]}
-              scale={[2, 0.03, 4]}
-              uniqueName="plane4"
-            />
-          </group>
-          <Button />
-        </SheetProvider>
-      </Canvas>
-    </div>
-  )
-}
-
-export default App
diff --git a/compatibility-tests/test-cra-react18/src/index.js b/compatibility-tests/test-cra-react18/src/index.js
index 69e4852..5add984 100644
--- a/compatibility-tests/test-cra-react18/src/index.js
+++ b/compatibility-tests/test-cra-react18/src/index.js
@@ -1,19 +1,92 @@
-// import ReactDOM from 'react-dom'
-
-import studio from '@theatre/studio'
 import {getProject} from '@theatre/core'
-// import React from 'react'
-// import App from './App'
+import ReactDOM from 'react-dom/client'
+import React from 'react'
+import {Canvas} from '@react-three/fiber'
+import studio from '@theatre/studio'
+import {editable as e, SheetProvider} from '@theatre/r3f'
+import extension from '@theatre/r3f/dist/extension'
 
-studio.initialize({usePersistentStorage: false})
+if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
+  studio.extend(extension)
+  studio.initialize({usePersistentStorage: false})
+}
+
+// credit: https://codesandbox.io/s/camera-pan-nsb7f
+
+function Plane({color, uniqueName, ...props}) {
+  return (
+    <e.mesh {...props} uniqueName={uniqueName}>
+      <boxBufferGeometry />
+      <meshStandardMaterial color={color} />
+    </e.mesh>
+  )
+}
+
+function App() {
+  return (
+    <Canvas
+      gl={{preserveDrawingBuffer: true}}
+      linear
+      frameloop="demand"
+      dpr={[1.5, 2]}
+      style={{position: 'absolute', top: 0, left: 0}}
+    >
+      <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
+        {/* @ts-ignore */}
+        <e.orthographicCamera makeDefault uniqueName="Camera" />
+        <ambientLight intensity={0.4} />
+        <e.pointLight
+          position={[-10, -10, 5]}
+          intensity={2}
+          color="#ff20f0"
+          uniqueName="Light 1"
+        />
+        <e.pointLight
+          position={[0, 0.5, -1]}
+          distance={1}
+          intensity={2}
+          color="#e4be00"
+          uniqueName="Light 2"
+        />
+        <group position={[0, -0.9, -3]}>
+          <Plane
+            color="hotpink"
+            rotation-x={-Math.PI / 2}
+            position-z={2}
+            scale={[4, 20, 0.2]}
+            uniqueName="plane1"
+          />
+          <Plane
+            color="#e4be00"
+            rotation-x={-Math.PI / 2}
+            position-y={1}
+            scale={[4.2, 0.2, 4]}
+            uniqueName="plane2"
+          />
+          <Plane
+            color="#736fbd"
+            rotation-x={-Math.PI / 2}
+            position={[-1.7, 1, 3.5]}
+            scale={[0.5, 4, 4]}
+            uniqueName="plane3"
+          />
+          <Plane
+            color="white"
+            rotation-x={-Math.PI / 2}
+            position={[0, 4.5, 3]}
+            scale={[2, 0.03, 4]}
+            uniqueName="plane4"
+          />
+        </group>
+      </SheetProvider>
+    </Canvas>
+  )
+}
 
 const project = getProject('Project')
 const sheet = project.sheet('Sheet')
 const obj = sheet.object('Obj', {str: 'some string', num: 0})
 
-// ReactDOM.render(
-//   <React.StrictMode>
-//     <App obj={obj} />
-//   </React.StrictMode>,
-//   document.getElementById('root'),
-// )
+const container = document.getElementById('root')
+const root = ReactDOM.createRoot(container)
+root.render(<App obj={obj}>hi</App>)
diff --git a/compatibility-tests/test-next/package.json b/compatibility-tests/test-next/package.json
index ca816ba..a36ab51 100644
--- a/compatibility-tests/test-next/package.json
+++ b/compatibility-tests/test-next/package.json
@@ -7,9 +7,10 @@
   },
   "dependencies": {
     "@theatre/core": "^0.0.1-COMPAT.1",
+    "@theatre/r3f": "^0.0.1-COMPAT.1",
     "@theatre/studio": "^0.0.1-COMPAT.1",
     "next": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }
diff --git a/compatibility-tests/test-next/pages/index.js b/compatibility-tests/test-next/pages/index.js
index ca7f1d3..b7cc143 100644
--- a/compatibility-tests/test-next/pages/index.js
+++ b/compatibility-tests/test-next/pages/index.js
@@ -1,23 +1,91 @@
-import Head from 'next/head'
-
-// import ReactDOM from 'react-dom'
-
-import studio from '@theatre/studio'
 import {getProject} from '@theatre/core'
-// import React from 'react'
-// import App from './App'
+import React from 'react'
+import {Canvas} from '@react-three/fiber'
+import studio from '@theatre/studio'
+import {editable as e, SheetProvider} from '@theatre/r3f'
+import extension from '@theatre/r3f/dist/extension'
 
-studio.initialize({usePersistentStorage: false})
+if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
+  studio.extend(extension)
+  studio.initialize({usePersistentStorage: false})
+}
+
+// credit: https://codesandbox.io/s/camera-pan-nsb7f
+
+function Plane({color, uniqueName, ...props}) {
+  return (
+    <e.mesh {...props} uniqueName={uniqueName}>
+      <boxBufferGeometry />
+      <meshStandardMaterial color={color} />
+    </e.mesh>
+  )
+}
+
+function App() {
+  return (
+    <Canvas
+      gl={{preserveDrawingBuffer: true}}
+      linear
+      frameloop="demand"
+      dpr={[1.5, 2]}
+      style={{position: 'absolute', top: 0, left: 0}}
+    >
+      <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
+        {/* @ts-ignore */}
+        <e.orthographicCamera makeDefault uniqueName="Camera" />
+        <ambientLight intensity={0.4} />
+        <e.pointLight
+          position={[-10, -10, 5]}
+          intensity={2}
+          color="#ff20f0"
+          uniqueName="Light 1"
+        />
+        <e.pointLight
+          position={[0, 0.5, -1]}
+          distance={1}
+          intensity={2}
+          color="#e4be00"
+          uniqueName="Light 2"
+        />
+        <group position={[0, -0.9, -3]}>
+          <Plane
+            color="hotpink"
+            rotation-x={-Math.PI / 2}
+            position-z={2}
+            scale={[4, 20, 0.2]}
+            uniqueName="plane1"
+          />
+          <Plane
+            color="#e4be00"
+            rotation-x={-Math.PI / 2}
+            position-y={1}
+            scale={[4.2, 0.2, 4]}
+            uniqueName="plane2"
+          />
+          <Plane
+            color="#736fbd"
+            rotation-x={-Math.PI / 2}
+            position={[-1.7, 1, 3.5]}
+            scale={[0.5, 4, 4]}
+            uniqueName="plane3"
+          />
+          <Plane
+            color="white"
+            rotation-x={-Math.PI / 2}
+            position={[0, 4.5, 3]}
+            scale={[2, 0.03, 4]}
+            uniqueName="plane4"
+          />
+        </group>
+      </SheetProvider>
+    </Canvas>
+  )
+}
 
 const project = getProject('Project')
 const sheet = project.sheet('Sheet')
 const obj = sheet.object('Obj', {str: 'some string', num: 0})
 
-function App({obj}) {
-  console.log(obj)
-  return <div>hi</div>
-}
-
 export default function Home() {
   return <App obj={obj}>hi</App>
 }
diff --git a/compatibility-tests/test-parcel1-react17/package.json b/compatibility-tests/test-parcel1-react17/package.json
index 06a5670..ccd4e01 100644
--- a/compatibility-tests/test-parcel1-react17/package.json
+++ b/compatibility-tests/test-parcel1-react17/package.json
@@ -4,12 +4,12 @@
     "dev": "parcel serve ./index.html"
   },
   "dependencies": {
-    "parcel-bundler": "^1.12.5",
     "@react-three/drei": "^7.3.1",
     "@react-three/fiber": "^7.0.6",
     "@theatre/core": "^0.0.1-COMPAT.1",
     "@theatre/r3f": "^0.0.1-COMPAT.1",
     "@theatre/studio": "^0.0.1-COMPAT.1",
+    "parcel-bundler": "^1.12.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "three": "^0.137.0"
diff --git a/compatibility-tests/test-parcel1-react17/src/App.js b/compatibility-tests/test-parcel1-react17/src/App.js
deleted file mode 100644
index 5a338c6..0000000
--- a/compatibility-tests/test-parcel1-react17/src/App.js
+++ /dev/null
@@ -1,154 +0,0 @@
-import {getProject} from '@theatre/core'
-import * as THREE from 'three'
-import React, {useState, useEffect, useRef} from 'react'
-import {useFrame, Canvas} from '@react-three/fiber'
-import {Shadow, softShadows} from '@react-three/drei'
-import studio from '@theatre/studio'
-import {editable as e, SheetProvider} from '@theatre/r3f'
-import extension from '@theatre/r3f/dist/extension'
-
-if (process.env.NODE_ENV === 'development') {
-  studio.extend(extension)
-  studio.initialize()
-}
-
-// Soft shadows are expensive, comment and refresh when it's too slow
-softShadows()
-
-// credit: https://codesandbox.io/s/camera-pan-nsb7f
-
-function Button() {
-  const vec = new THREE.Vector3()
-  const light = useRef(undefined)
-  const [active, setActive] = useState(false)
-  const [zoom, set] = useState(true)
-  useEffect(
-    () => void (document.body.style.cursor = active ? 'pointer' : 'auto'),
-    [active],
-  )
-
-  useFrame((state) => {
-    const step = 0.1
-    const camera = state.camera
-    camera.fov = THREE.MathUtils.lerp(camera.fov, zoom ? 10 : 42, step)
-    camera.position.lerp(
-      vec.set(zoom ? 25 : 10, zoom ? 1 : 5, zoom ? 0 : 10),
-      step,
-    )
-    state.camera.lookAt(0, 0, 0)
-    state.camera.updateProjectionMatrix()
-
-    light.current.position.lerp(
-      vec.set(zoom ? 4 : 0, zoom ? 3 : 8, zoom ? 3 : 5),
-      step,
-    )
-  })
-
-  return (
-    <e.mesh
-      receiveShadow
-      castShadow
-      onClick={() => set(!zoom)}
-      onPointerOver={() => setActive(true)}
-      onPointerOut={() => setActive(false)}
-      uniqueName="The Button"
-    >
-      <sphereBufferGeometry args={[0.75, 64, 64]} />
-      <meshPhysicalMaterial
-        color={active ? 'purple' : '#e7b056'}
-        clearcoat={1}
-        clearcoatRoughness={0}
-      />
-      <Shadow
-        position-y={-0.79}
-        rotation-x={-Math.PI / 2}
-        opacity={0.6}
-        scale={[0.8, 0.8, 1]}
-      />
-      <directionalLight
-        ref={light}
-        castShadow
-        intensity={1.5}
-        shadow-camera-far={70}
-      />
-    </e.mesh>
-  )
-}
-
-function Plane({color, uniqueName, ...props}) {
-  return (
-    <e.mesh receiveShadow castShadow {...props} uniqueName={uniqueName}>
-      <boxBufferGeometry />
-      <meshStandardMaterial color={color} />
-    </e.mesh>
-  )
-}
-
-function App() {
-  return (
-    <div>
-      <Canvas
-        // @ts-ignore
-        shadowMap
-        gl={{preserveDrawingBuffer: true}}
-        linear
-        frameloop="demand"
-        dpr={[1.5, 2]}
-      >
-        <SheetProvider
-          sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}
-        >
-          {/* @ts-ignore */}
-          <e.perspectiveCamera makeDefault uniqueName="Camera" />
-          <ambientLight intensity={0.4} />
-          <e.pointLight
-            position={[-10, -10, 5]}
-            intensity={2}
-            color="#ff20f0"
-            uniqueName="Light 1"
-          />
-          <e.pointLight
-            position={[0, 0.5, -1]}
-            distance={1}
-            intensity={2}
-            color="#e4be00"
-            uniqueName="Light 2"
-          />
-          <group position={[0, -0.9, -3]}>
-            <Plane
-              color="hotpink"
-              rotation-x={-Math.PI / 2}
-              position-z={2}
-              scale={[4, 20, 0.2]}
-              uniqueName="plane1"
-            />
-            <Plane
-              color="#e4be00"
-              rotation-x={-Math.PI / 2}
-              position-y={1}
-              scale={[4.2, 0.2, 4]}
-              uniqueName="plane2"
-            />
-            <Plane
-              color="#736fbd"
-              rotation-x={-Math.PI / 2}
-              position={[-1.7, 1, 3.5]}
-              scale={[0.5, 4, 4]}
-              uniqueName="plane3"
-            />
-            <Plane
-              color="white"
-              rotation-x={-Math.PI / 2}
-              position={[0, 4.5, 3]}
-              scale={[2, 0.03, 4]}
-              uniqueName="plane4"
-            />
-          </group>
-          <Button />
-        </SheetProvider>
-      </Canvas>
-    </div>
-  )
-}
-
-export default App
diff --git a/compatibility-tests/test-parcel1-react17/src/index.js b/compatibility-tests/test-parcel1-react17/src/index.js
index b2d2250..506257b 100644
--- a/compatibility-tests/test-parcel1-react17/src/index.js
+++ b/compatibility-tests/test-parcel1-react17/src/index.js
@@ -1,9 +1,87 @@
+import {getProject} from '@theatre/core'
 import ReactDOM from 'react-dom'
-import '@theatre/studio'
 import React from 'react'
-import App from './App'
+import {Canvas} from '@react-three/fiber'
+import studio from '@theatre/studio'
+import {editable as e, SheetProvider} from '@theatre/r3f'
+import extension from '@theatre/r3f/dist/extension'
 
-console.log('hj')
+if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
+  studio.extend(extension)
+  studio.initialize({usePersistentStorage: false})
+}
+
+// credit: https://codesandbox.io/s/camera-pan-nsb7f
+
+function Plane({color, uniqueName, ...props}) {
+  return (
+    <e.mesh {...props} uniqueName={uniqueName}>
+      <boxBufferGeometry />
+      <meshStandardMaterial color={color} />
+    </e.mesh>
+  )
+}
+
+function App() {
+  return (
+    <Canvas
+      gl={{preserveDrawingBuffer: true}}
+      linear
+      frameloop="demand"
+      dpr={[1.5, 2]}
+      style={{position: 'absolute', top: 0, left: 0}}
+    >
+      <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
+        {/* @ts-ignore */}
+        <e.orthographicCamera makeDefault uniqueName="Camera" />
+        <ambientLight intensity={0.4} />
+        <e.pointLight
+          position={[-10, -10, 5]}
+          intensity={2}
+          color="#ff20f0"
+          uniqueName="Light 1"
+        />
+        <e.pointLight
+          position={[0, 0.5, -1]}
+          distance={1}
+          intensity={2}
+          color="#e4be00"
+          uniqueName="Light 2"
+        />
+        <group position={[0, -0.9, -3]}>
+          <Plane
+            color="hotpink"
+            rotation-x={-Math.PI / 2}
+            position-z={2}
+            scale={[4, 20, 0.2]}
+            uniqueName="plane1"
+          />
+          <Plane
+            color="#e4be00"
+            rotation-x={-Math.PI / 2}
+            position-y={1}
+            scale={[4.2, 0.2, 4]}
+            uniqueName="plane2"
+          />
+          <Plane
+            color="#736fbd"
+            rotation-x={-Math.PI / 2}
+            position={[-1.7, 1, 3.5]}
+            scale={[0.5, 4, 4]}
+            uniqueName="plane3"
+          />
+          <Plane
+            color="white"
+            rotation-x={-Math.PI / 2}
+            position={[0, 4.5, 3]}
+            scale={[2, 0.03, 4]}
+            uniqueName="plane4"
+          />
+        </group>
+      </SheetProvider>
+    </Canvas>
+  )
+}
 
 ReactDOM.render(
   <React.StrictMode>
diff --git a/compatibility-tests/test-parcel1-react18/package.json b/compatibility-tests/test-parcel1-react18/package.json
index d7cf605..d34fa6e 100644
--- a/compatibility-tests/test-parcel1-react18/package.json
+++ b/compatibility-tests/test-parcel1-react18/package.json
@@ -4,8 +4,9 @@
     "dev": "parcel serve ./index.html"
   },
   "dependencies": {
-    "@theatre/core": "0.0.1-COMPAT.1",
-    "@theatre/studio": "0.0.1-COMPAT.1",
+    "@theatre/core": "^0.0.1-COMPAT.1",
+    "@theatre/r3f": "^0.0.1-COMPAT.1",
+    "@theatre/studio": "^0.0.1-COMPAT.1",
     "parcel-bundler": "^1.12.5",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
diff --git a/compatibility-tests/test-parcel1-react18/src/App.js b/compatibility-tests/test-parcel1-react18/src/App.js
deleted file mode 100644
index 1533aae..0000000
--- a/compatibility-tests/test-parcel1-react18/src/App.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-
-export default function App({obj}) {
-  console.log(obj)
-  return <div>hi</div>
-}
diff --git a/compatibility-tests/test-parcel1-react18/src/index.js b/compatibility-tests/test-parcel1-react18/src/index.js
index 69e4852..5add984 100644
--- a/compatibility-tests/test-parcel1-react18/src/index.js
+++ b/compatibility-tests/test-parcel1-react18/src/index.js
@@ -1,19 +1,92 @@
-// import ReactDOM from 'react-dom'
-
-import studio from '@theatre/studio'
 import {getProject} from '@theatre/core'
-// import React from 'react'
-// import App from './App'
+import ReactDOM from 'react-dom/client'
+import React from 'react'
+import {Canvas} from '@react-three/fiber'
+import studio from '@theatre/studio'
+import {editable as e, SheetProvider} from '@theatre/r3f'
+import extension from '@theatre/r3f/dist/extension'
 
-studio.initialize({usePersistentStorage: false})
+if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
+  studio.extend(extension)
+  studio.initialize({usePersistentStorage: false})
+}
+
+// credit: https://codesandbox.io/s/camera-pan-nsb7f
+
+function Plane({color, uniqueName, ...props}) {
+  return (
+    <e.mesh {...props} uniqueName={uniqueName}>
+      <boxBufferGeometry />
+      <meshStandardMaterial color={color} />
+    </e.mesh>
+  )
+}
+
+function App() {
+  return (
+    <Canvas
+      gl={{preserveDrawingBuffer: true}}
+      linear
+      frameloop="demand"
+      dpr={[1.5, 2]}
+      style={{position: 'absolute', top: 0, left: 0}}
+    >
+      <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
+        {/* @ts-ignore */}
+        <e.orthographicCamera makeDefault uniqueName="Camera" />
+        <ambientLight intensity={0.4} />
+        <e.pointLight
+          position={[-10, -10, 5]}
+          intensity={2}
+          color="#ff20f0"
+          uniqueName="Light 1"
+        />
+        <e.pointLight
+          position={[0, 0.5, -1]}
+          distance={1}
+          intensity={2}
+          color="#e4be00"
+          uniqueName="Light 2"
+        />
+        <group position={[0, -0.9, -3]}>
+          <Plane
+            color="hotpink"
+            rotation-x={-Math.PI / 2}
+            position-z={2}
+            scale={[4, 20, 0.2]}
+            uniqueName="plane1"
+          />
+          <Plane
+            color="#e4be00"
+            rotation-x={-Math.PI / 2}
+            position-y={1}
+            scale={[4.2, 0.2, 4]}
+            uniqueName="plane2"
+          />
+          <Plane
+            color="#736fbd"
+            rotation-x={-Math.PI / 2}
+            position={[-1.7, 1, 3.5]}
+            scale={[0.5, 4, 4]}
+            uniqueName="plane3"
+          />
+          <Plane
+            color="white"
+            rotation-x={-Math.PI / 2}
+            position={[0, 4.5, 3]}
+            scale={[2, 0.03, 4]}
+            uniqueName="plane4"
+          />
+        </group>
+      </SheetProvider>
+    </Canvas>
+  )
+}
 
 const project = getProject('Project')
 const sheet = project.sheet('Sheet')
 const obj = sheet.object('Obj', {str: 'some string', num: 0})
 
-// ReactDOM.render(
-//   <React.StrictMode>
-//     <App obj={obj} />
-//   </React.StrictMode>,
-//   document.getElementById('root'),
-// )
+const container = document.getElementById('root')
+const root = ReactDOM.createRoot(container)
+root.render(<App obj={obj}>hi</App>)
diff --git a/compatibility-tests/test-parcel2-react18/package.json b/compatibility-tests/test-parcel2-react18/package.json
index a1df9f8..ecbdba8 100644
--- a/compatibility-tests/test-parcel2-react18/package.json
+++ b/compatibility-tests/test-parcel2-react18/package.json
@@ -4,8 +4,9 @@
     "dev": "parcel serve ./index.html"
   },
   "dependencies": {
-    "@theatre/core": "0.0.1-COMPAT.1",
-    "@theatre/studio": "0.0.1-COMPAT.1",
+    "@theatre/core": "^0.0.1-COMPAT.1",
+    "@theatre/r3f": "^0.0.1-COMPAT.1",
+    "@theatre/studio": "^0.0.1-COMPAT.1",
     "parcel": "^2.5.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
diff --git a/compatibility-tests/test-parcel2-react18/src/App.js b/compatibility-tests/test-parcel2-react18/src/App.js
deleted file mode 100644
index 1533aae..0000000
--- a/compatibility-tests/test-parcel2-react18/src/App.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-
-export default function App({obj}) {
-  console.log(obj)
-  return <div>hi</div>
-}
diff --git a/compatibility-tests/test-parcel2-react18/src/index.js b/compatibility-tests/test-parcel2-react18/src/index.js
index 69e4852..5add984 100644
--- a/compatibility-tests/test-parcel2-react18/src/index.js
+++ b/compatibility-tests/test-parcel2-react18/src/index.js
@@ -1,19 +1,92 @@
-// import ReactDOM from 'react-dom'
-
-import studio from '@theatre/studio'
 import {getProject} from '@theatre/core'
-// import React from 'react'
-// import App from './App'
+import ReactDOM from 'react-dom/client'
+import React from 'react'
+import {Canvas} from '@react-three/fiber'
+import studio from '@theatre/studio'
+import {editable as e, SheetProvider} from '@theatre/r3f'
+import extension from '@theatre/r3f/dist/extension'
 
-studio.initialize({usePersistentStorage: false})
+if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
+  studio.extend(extension)
+  studio.initialize({usePersistentStorage: false})
+}
+
+// credit: https://codesandbox.io/s/camera-pan-nsb7f
+
+function Plane({color, uniqueName, ...props}) {
+  return (
+    <e.mesh {...props} uniqueName={uniqueName}>
+      <boxBufferGeometry />
+      <meshStandardMaterial color={color} />
+    </e.mesh>
+  )
+}
+
+function App() {
+  return (
+    <Canvas
+      gl={{preserveDrawingBuffer: true}}
+      linear
+      frameloop="demand"
+      dpr={[1.5, 2]}
+      style={{position: 'absolute', top: 0, left: 0}}
+    >
+      <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
+        {/* @ts-ignore */}
+        <e.orthographicCamera makeDefault uniqueName="Camera" />
+        <ambientLight intensity={0.4} />
+        <e.pointLight
+          position={[-10, -10, 5]}
+          intensity={2}
+          color="#ff20f0"
+          uniqueName="Light 1"
+        />
+        <e.pointLight
+          position={[0, 0.5, -1]}
+          distance={1}
+          intensity={2}
+          color="#e4be00"
+          uniqueName="Light 2"
+        />
+        <group position={[0, -0.9, -3]}>
+          <Plane
+            color="hotpink"
+            rotation-x={-Math.PI / 2}
+            position-z={2}
+            scale={[4, 20, 0.2]}
+            uniqueName="plane1"
+          />
+          <Plane
+            color="#e4be00"
+            rotation-x={-Math.PI / 2}
+            position-y={1}
+            scale={[4.2, 0.2, 4]}
+            uniqueName="plane2"
+          />
+          <Plane
+            color="#736fbd"
+            rotation-x={-Math.PI / 2}
+            position={[-1.7, 1, 3.5]}
+            scale={[0.5, 4, 4]}
+            uniqueName="plane3"
+          />
+          <Plane
+            color="white"
+            rotation-x={-Math.PI / 2}
+            position={[0, 4.5, 3]}
+            scale={[2, 0.03, 4]}
+            uniqueName="plane4"
+          />
+        </group>
+      </SheetProvider>
+    </Canvas>
+  )
+}
 
 const project = getProject('Project')
 const sheet = project.sheet('Sheet')
 const obj = sheet.object('Obj', {str: 'some string', num: 0})
 
-// ReactDOM.render(
-//   <React.StrictMode>
-//     <App obj={obj} />
-//   </React.StrictMode>,
-//   document.getElementById('root'),
-// )
+const container = document.getElementById('root')
+const root = ReactDOM.createRoot(container)
+root.render(<App obj={obj}>hi</App>)
diff --git a/compatibility-tests/test-vite-react18/src/App.tsx b/compatibility-tests/test-vite-react18/src/App.tsx
deleted file mode 100644
index 5a338c6..0000000
--- a/compatibility-tests/test-vite-react18/src/App.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import {getProject} from '@theatre/core'
-import * as THREE from 'three'
-import React, {useState, useEffect, useRef} from 'react'
-import {useFrame, Canvas} from '@react-three/fiber'
-import {Shadow, softShadows} from '@react-three/drei'
-import studio from '@theatre/studio'
-import {editable as e, SheetProvider} from '@theatre/r3f'
-import extension from '@theatre/r3f/dist/extension'
-
-if (process.env.NODE_ENV === 'development') {
-  studio.extend(extension)
-  studio.initialize()
-}
-
-// Soft shadows are expensive, comment and refresh when it's too slow
-softShadows()
-
-// credit: https://codesandbox.io/s/camera-pan-nsb7f
-
-function Button() {
-  const vec = new THREE.Vector3()
-  const light = useRef(undefined)
-  const [active, setActive] = useState(false)
-  const [zoom, set] = useState(true)
-  useEffect(
-    () => void (document.body.style.cursor = active ? 'pointer' : 'auto'),
-    [active],
-  )
-
-  useFrame((state) => {
-    const step = 0.1
-    const camera = state.camera
-    camera.fov = THREE.MathUtils.lerp(camera.fov, zoom ? 10 : 42, step)
-    camera.position.lerp(
-      vec.set(zoom ? 25 : 10, zoom ? 1 : 5, zoom ? 0 : 10),
-      step,
-    )
-    state.camera.lookAt(0, 0, 0)
-    state.camera.updateProjectionMatrix()
-
-    light.current.position.lerp(
-      vec.set(zoom ? 4 : 0, zoom ? 3 : 8, zoom ? 3 : 5),
-      step,
-    )
-  })
-
-  return (
-    <e.mesh
-      receiveShadow
-      castShadow
-      onClick={() => set(!zoom)}
-      onPointerOver={() => setActive(true)}
-      onPointerOut={() => setActive(false)}
-      uniqueName="The Button"
-    >
-      <sphereBufferGeometry args={[0.75, 64, 64]} />
-      <meshPhysicalMaterial
-        color={active ? 'purple' : '#e7b056'}
-        clearcoat={1}
-        clearcoatRoughness={0}
-      />
-      <Shadow
-        position-y={-0.79}
-        rotation-x={-Math.PI / 2}
-        opacity={0.6}
-        scale={[0.8, 0.8, 1]}
-      />
-      <directionalLight
-        ref={light}
-        castShadow
-        intensity={1.5}
-        shadow-camera-far={70}
-      />
-    </e.mesh>
-  )
-}
-
-function Plane({color, uniqueName, ...props}) {
-  return (
-    <e.mesh receiveShadow castShadow {...props} uniqueName={uniqueName}>
-      <boxBufferGeometry />
-      <meshStandardMaterial color={color} />
-    </e.mesh>
-  )
-}
-
-function App() {
-  return (
-    <div>
-      <Canvas
-        // @ts-ignore
-        shadowMap
-        gl={{preserveDrawingBuffer: true}}
-        linear
-        frameloop="demand"
-        dpr={[1.5, 2]}
-      >
-        <SheetProvider
-          sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}
-        >
-          {/* @ts-ignore */}
-          <e.perspectiveCamera makeDefault uniqueName="Camera" />
-          <ambientLight intensity={0.4} />
-          <e.pointLight
-            position={[-10, -10, 5]}
-            intensity={2}
-            color="#ff20f0"
-            uniqueName="Light 1"
-          />
-          <e.pointLight
-            position={[0, 0.5, -1]}
-            distance={1}
-            intensity={2}
-            color="#e4be00"
-            uniqueName="Light 2"
-          />
-          <group position={[0, -0.9, -3]}>
-            <Plane
-              color="hotpink"
-              rotation-x={-Math.PI / 2}
-              position-z={2}
-              scale={[4, 20, 0.2]}
-              uniqueName="plane1"
-            />
-            <Plane
-              color="#e4be00"
-              rotation-x={-Math.PI / 2}
-              position-y={1}
-              scale={[4.2, 0.2, 4]}
-              uniqueName="plane2"
-            />
-            <Plane
-              color="#736fbd"
-              rotation-x={-Math.PI / 2}
-              position={[-1.7, 1, 3.5]}
-              scale={[0.5, 4, 4]}
-              uniqueName="plane3"
-            />
-            <Plane
-              color="white"
-              rotation-x={-Math.PI / 2}
-              position={[0, 4.5, 3]}
-              scale={[2, 0.03, 4]}
-              uniqueName="plane4"
-            />
-          </group>
-          <Button />
-        </SheetProvider>
-      </Canvas>
-    </div>
-  )
-}
-
-export default App
diff --git a/compatibility-tests/test-vite-react18/src/main.tsx b/compatibility-tests/test-vite-react18/src/main.tsx
index 7cfe000..74b59ab 100644
--- a/compatibility-tests/test-vite-react18/src/main.tsx
+++ b/compatibility-tests/test-vite-react18/src/main.tsx
@@ -1,11 +1,92 @@
-import ReactDOM from 'react-dom'
-import '@theatre/studio'
+import {getProject} from '@theatre/core'
+import ReactDOM from 'react-dom/client'
 import React from 'react'
-import App from './App'
+import {Canvas} from '@react-three/fiber'
+import studio from '@theatre/studio'
+import {editable as e, SheetProvider} from '@theatre/r3f'
+import extension from '@theatre/r3f/dist/extension'
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root'),
-)
+if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
+  studio.extend(extension)
+  studio.initialize({usePersistentStorage: false})
+}
+
+// credit: https://codesandbox.io/s/camera-pan-nsb7f
+
+function Plane({color, uniqueName, ...props}: any) {
+  return (
+    <e.mesh {...props} uniqueName={uniqueName}>
+      <boxBufferGeometry />
+      <meshStandardMaterial color={color} />
+    </e.mesh>
+  )
+}
+
+function App() {
+  return (
+    <Canvas
+      gl={{preserveDrawingBuffer: true}}
+      linear
+      frameloop="demand"
+      dpr={[1.5, 2]}
+      style={{position: 'absolute', top: 0, left: 0}}
+    >
+      <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
+        {/* @ts-ignore */}
+        <e.orthographicCamera makeDefault uniqueName="Camera" />
+        <ambientLight intensity={0.4} />
+        <e.pointLight
+          position={[-10, -10, 5]}
+          intensity={2}
+          color="#ff20f0"
+          uniqueName="Light 1"
+        />
+        <e.pointLight
+          position={[0, 0.5, -1]}
+          distance={1}
+          intensity={2}
+          color="#e4be00"
+          uniqueName="Light 2"
+        />
+        <group position={[0, -0.9, -3]}>
+          <Plane
+            color="hotpink"
+            rotation-x={-Math.PI / 2}
+            position-z={2}
+            scale={[4, 20, 0.2]}
+            uniqueName="plane1"
+          />
+          <Plane
+            color="#e4be00"
+            rotation-x={-Math.PI / 2}
+            position-y={1}
+            scale={[4.2, 0.2, 4]}
+            uniqueName="plane2"
+          />
+          <Plane
+            color="#736fbd"
+            rotation-x={-Math.PI / 2}
+            position={[-1.7, 1, 3.5]}
+            scale={[0.5, 4, 4]}
+            uniqueName="plane3"
+          />
+          <Plane
+            color="white"
+            rotation-x={-Math.PI / 2}
+            position={[0, 4.5, 3]}
+            scale={[2, 0.03, 4]}
+            uniqueName="plane4"
+          />
+        </group>
+      </SheetProvider>
+    </Canvas>
+  )
+}
+
+const project = getProject('Project')
+const sheet = project.sheet('Sheet')
+const obj = sheet.object('Obj', {str: 'some string', num: 0})
+
+const container = document.getElementById('root')
+const root = ReactDOM.createRoot(container)
+root.render(<App obj={obj}>hi</App>)
diff --git a/packages/r3f/devEnv/bundle.ts b/packages/r3f/devEnv/bundle.ts
index 0ca96cf..ff82b66 100644
--- a/packages/r3f/devEnv/bundle.ts
+++ b/packages/r3f/devEnv/bundle.ts
@@ -41,7 +41,14 @@ async function createBundles() {
       metafile: true,
     }
 
-    const result = await build(esbuildConfig)
+    const result = await Promise.all([
+      build(esbuildConfig),
+      build({
+        ...esbuildConfig,
+        outfile: path.join(__dirname, '../dist/index.esm.js'),
+        format: 'esm',
+      }),
+    ])
   }
 
   /**
@@ -91,6 +98,13 @@ async function createBundles() {
       metafile: true,
     }
 
-    const result = await build(esbuildConfig)
+    const result = await Promise.all([
+      build(esbuildConfig),
+      build({
+        ...esbuildConfig,
+        outfile: path.join(__dirname, '../dist/extension/index.esm.js'),
+        format: 'esm',
+      }),
+    ])
   }
 }
diff --git a/packages/r3f/package.json b/packages/r3f/package.json
index 2bac464..b4f9070 100644
--- a/packages/r3f/package.json
+++ b/packages/r3f/package.json
@@ -20,14 +20,20 @@
     "directory": "packages/r3f"
   },
   "main": "dist/index.js",
-  "module": "dist/index.js",
+  "module": "dist/index.esm.js",
   "sideEffects": false,
   "files": [
     "dist/**/*"
   ],
   "exports": {
-    ".": "./dist/index.js",
-    "./dist/extension": "./dist/extension/index.js"
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js"
+    },
+    "./dist/extension": {
+      "import": "./dist/extension/index.esm.js",
+      "require": "./dist/extension/index.js"
+    }
   },
   "scripts": {
     "prepack": "yarn run build",
@@ -56,7 +62,7 @@
     "react-shadow": "^19.0.3",
     "react-use-measure": "^2.0.4",
     "reakit": "^1.3.8",
-    "styled-components": "^5.3.0",
+    "styled-components": "^5.3.5",
     "typescript": "^4.4.2",
     "zustand": "^3.5.1"
   },
diff --git a/packages/r3f/src/extension/components/ReferenceWindow/ReferenceWindow.tsx b/packages/r3f/src/extension/components/ReferenceWindow/ReferenceWindow.tsx
index 52e65d7..4e88b99 100644
--- a/packages/r3f/src/extension/components/ReferenceWindow/ReferenceWindow.tsx
+++ b/packages/r3f/src/extension/components/ReferenceWindow/ReferenceWindow.tsx
@@ -99,7 +99,8 @@ const ReferenceWindow: VFC<ReferenceWindowProps> = ({
 
   const [width, height] = useMemo(() => {
     if (!gl) return [0, 0]
-    const aspectRatio = origWidth / origHeight
+    const aspectRatio =
+      origWidth / (origHeight || Number.EPSILON) || Number.EPSILON
 
     const width = Math.min(aspectRatio * maxHeight, maxWidth)
 
diff --git a/packages/r3f/src/extension/components/TransformControls.tsx b/packages/r3f/src/extension/components/TransformControls.tsx
index 8f45553..6145401 100644
--- a/packages/r3f/src/extension/components/TransformControls.tsx
+++ b/packages/r3f/src/extension/components/TransformControls.tsx
@@ -2,7 +2,7 @@ import type {Object3D, Event} from 'three'
 import React, {forwardRef, useLayoutEffect, useEffect, useMemo} from 'react'
 import type {ReactThreeFiber, Overwrite} from '@react-three/fiber'
 import {useThree} from '@react-three/fiber'
-import {TransformControls as TransformControlsImpl} from 'three/examples/jsm/controls/TransformControls'
+import {TransformControls as TransformControlsImpl} from 'three-stdlib'
 import type {OrbitControls} from 'three-stdlib'
 
 type R3fTransformControls = Overwrite<
@@ -18,6 +18,10 @@ export interface TransformControlsProps extends R3fTransformControls {
   orbitControlsRef?: React.MutableRefObject<OrbitControls | null>
   onObjectChange?: (event: Event) => void
   onDraggingChange?: (event: Event) => void
+
+  // not a complete list of props that transform controls can take
+  mode: TransformControlsImpl['mode']
+  space: TransformControlsImpl['space']
 }
 
 const TransformControls = forwardRef(
diff --git a/theatre/package.json b/theatre/package.json
index 10f327e..d5da597 100644
--- a/theatre/package.json
+++ b/theatre/package.json
@@ -85,7 +85,7 @@
     "rollup": "^2.56.3",
     "rollup-plugin-dts": "^4.0.0",
     "shallowequal": "^1.1.0",
-    "styled-components": "^5.3.0",
+    "styled-components": "^5.3.5",
     "svg-inline-loader": "^0.8.2",
     "timing-function": "^0.2.3",
     "ts-node": "^10.0.0",
diff --git a/theatre/studio/src/Studio.ts b/theatre/studio/src/Studio.ts
index bd144fd..088e747 100644
--- a/theatre/studio/src/Studio.ts
+++ b/theatre/studio/src/Studio.ts
@@ -25,7 +25,7 @@ import checkForUpdates from './checkForUpdates'
 
 export type CoreExports = typeof _coreExports
 
-let {default: UIConstructor} =
+const UIConstructorModule =
   typeof window !== 'undefined' ? require('./UI') : null
 
 const STUDIO_NOT_INITIALIZED_MESSAGE = `You seem to have imported '@theatre/studio' but haven't initialized it. You can initialize the studio by:
@@ -99,7 +99,7 @@ export class Studio {
     this.publicApi = new TheatreStudio(this)
 
     if (process.env.NODE_ENV !== 'test' && typeof window !== 'undefined') {
-      this.ui = new UIConstructor(this)
+      this.ui = new UIConstructorModule.default(this)
     }
 
     this._attachToIncomingProjects()
diff --git a/yarn.lock b/yarn.lock
index d7638a9..0bbea0e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5719,19 +5719,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:^0.8.8":
-  version: 0.8.8
-  resolution: "@emotion/is-prop-valid@npm:0.8.8"
+"@emotion/is-prop-valid@npm:^1.1.0":
+  version: 1.2.0
+  resolution: "@emotion/is-prop-valid@npm:1.2.0"
   dependencies:
-    "@emotion/memoize": 0.7.4
-  checksum: bb7ec6d48c572c540e24e47cc94fc2f8dec2d6a342ae97bc9c8b6388d9b8d283862672172a1bb62d335c02662afe6291e10c71e9b8642664a8b43416cdceffac
+    "@emotion/memoize": ^0.8.0
+  checksum: cc7a19850a4c5b24f1514665289442c8c641709e6f7711067ad550e05df331da0692a16148e85eda6f47e31b3261b64d74c5e25194d053223be16231f969d633
   languageName: node
   linkType: hard
 
-"@emotion/memoize@npm:0.7.4":
-  version: 0.7.4
-  resolution: "@emotion/memoize@npm:0.7.4"
-  checksum: 4e3920d4ec95995657a37beb43d3f4b7d89fed6caa2b173a4c04d10482d089d5c3ea50bbc96618d918b020f26ed6e9c4026bbd45433566576c1f7b056c3271dc
+"@emotion/memoize@npm:^0.8.0":
+  version: 0.8.0
+  resolution: "@emotion/memoize@npm:0.8.0"
+  checksum: c87bb110b829edd8e1c13b90a6bc37cebc39af29c7599a1e66a48e06f9bec43e8e53495ba86278cc52e7589549492c8dfdc81d19f4fdec0cee6ba13d2ad2c928
   languageName: node
   linkType: hard
 
@@ -7548,7 +7548,7 @@ __metadata:
     react-shadow: ^19.0.3
     react-use-measure: ^2.0.4
     reakit: ^1.3.8
-    styled-components: ^5.3.0
+    styled-components: ^5.3.5
     typescript: ^4.4.2
     zustand: ^3.5.1
   peerDependencies:
@@ -29125,13 +29125,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^5.3.0":
-  version: 5.3.0
-  resolution: "styled-components@npm:5.3.0"
+"styled-components@npm:^5.3.5":
+  version: 5.3.5
+  resolution: "styled-components@npm:5.3.5"
   dependencies:
     "@babel/helper-module-imports": ^7.0.0
     "@babel/traverse": ^7.4.5
-    "@emotion/is-prop-valid": ^0.8.8
+    "@emotion/is-prop-valid": ^1.1.0
     "@emotion/stylis": ^0.8.4
     "@emotion/unitless": ^0.7.4
     babel-plugin-styled-components: ">= 1.12.0"
@@ -29143,7 +29143,7 @@ fsevents@^1.2.7:
     react: ">= 16.8.0"
     react-dom: ">= 16.8.0"
     react-is: ">= 16.8.0"
-  checksum: 19792fc00da531a083963c3679429dc739e03cb1ca7af2adf0317b25fcaf23655b8f37f8595a210be26003aa5a143003c6dc66ef80c545da85447277a4985bd1
+  checksum: 05a664dfe423c2906959a0f3f47f9b1ad630e493eb2e06deea0dc0906af33ba5ca17277b98948a6c9642e73894d6533391aebf45576489f5afe920c974e9f8eb
   languageName: node
   linkType: hard
 
@@ -29697,7 +29697,7 @@ fsevents@^1.2.7:
     rollup: ^2.56.3
     rollup-plugin-dts: ^4.0.0
     shallowequal: ^1.1.0
-    styled-components: ^5.3.0
+    styled-components: ^5.3.5
     svg-inline-loader: ^0.8.2
     timing-function: ^0.2.3
     ts-node: ^10.0.0