<>
       

-        

+        

           
             “The parameters comprise sequences which are theoretically infinite
             but limits are, of course, set to them in practice. There is an
@@ -68,37 +99,45 @@ export default function BorderImage() {
             
           
         
-          
-            

-                
Borders
-                

-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                
-                

-                
Radius
-                
-                
-                
-                
-                
-                

-                
Spacing
-                
-                
-                
-            
-          
+        
+          

+            
Borders
+            

+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+            
+            

+              
Radius
+              
+              
+              
+              
+            
+            

+              
Spacing
+              
+              
+            
+          
+        
       
       

         
(initialStyles)
-
-  return (
-    

-      
-      

-        

-          fun with ✂️
-        
-      
-    
-  )
-}
diff --git a/apps/docs/pages/examples/filters.tsx b/apps/docs/pages/examples/filters.tsx
index 8a7124a4..68ca6a3a 100644
--- a/apps/docs/pages/examples/filters.tsx
+++ b/apps/docs/pages/examples/filters.tsx
@@ -1,47 +1,48 @@
-import { Editor, styled } from '@compai/css-gui'
+import { Editor, Inputs, styled, toCSSObject } from '@compai/css-gui'
 import { useState } from 'react'
 import { Container } from '../../components/Container'
 
-const initialStyles = {
-  filter: [{ type: 'sepia', amount: { value: 50, unit: '%' } }],
-}
-
 export default function Filters() {
-  const [styles, setStyles] = useState(initialStyles)
+  const [styles, setStyles] = useState({
+    filter: [
+      {
+        name: 'blur',
+        arguments: { value: 8, unit: 'px' },
+      },
+    ],
+  })
+
   return (
     

-    
-      
-      

-        
+        
+          
+        
+        

-          Fun with filters
-        
-      
+          

+            Fun with filters
+          
+        
       
     
   )
diff --git a/apps/docs/pages/examples/flex.tsx b/apps/docs/pages/examples/flex.tsx
index ff3a28e6..d22d99f8 100644
--- a/apps/docs/pages/examples/flex.tsx
+++ b/apps/docs/pages/examples/flex.tsx
@@ -1,8 +1,6 @@
 import { useState } from 'react'
-import Link from 'next/link'
 import { Editor, Inputs, styled, codegen } from '@compai/css-gui'
 import { defaultTheme } from '../../data/default-theme'
-import { Container } from '../../components/Container'
 
 const initialStyles = {
   display: 'flex',
@@ -35,7 +33,7 @@ export default function TextDecoration() {
       

@@ -72,23 +70,94 @@ export default function TextDecoration() {
         
         

           
-
-            
One
-            
Two
-            
Three
-            
Four
-            
Five
-            
Six
-            
Seven
-            
Eight
-            
Nine
-            
Ten
-            
Eleven
-            
Twelve
+            

+              
+              One
+            
+            

+              
+              Two
+            
+            

+              
+              Three
+            
+            

+              
+              Four
+            
+            

+              
+              Five
+            
+            

+              
+              Six
+            
+            

+              
+              Seven
+            
+            

+              
+              Eight
+            
+            

+              
+              Nine
+            
+            

+              
+              Ten
+            
+            

+              
+              Eleven
+            
+            

+              
+              Twelve
+            
           
         
       
-      

+      

         
 ({
 
 const initialStyles = {
   transform: [
-    { type: 'perspective', amount: { value: 512, unit: 'px' } },
-    { type: 'rotateX', amount: { value: 15, unit: 'deg' } },
-    { type: 'rotateY', amount: { value: 15, unit: 'deg' } },
+    { name: 'perspective', arguments: { value: 512, unit: 'px' } },
+    { name: 'rotateX', arguments: { value: 15, unit: 'deg' } },
+    { name: 'rotateY', arguments: { value: 15, unit: 'deg' } },
   ],
 }
 
diff --git a/apps/docs/pages/examples/grid.tsx b/apps/docs/pages/examples/grid.tsx.tmp
similarity index 100%
rename from apps/docs/pages/examples/grid.tsx
rename to apps/docs/pages/examples/grid.tsx.tmp
diff --git a/apps/docs/pages/examples/masks.tsx b/apps/docs/pages/examples/masks.tsx
index e51cffcd..909918c7 100644
--- a/apps/docs/pages/examples/masks.tsx
+++ b/apps/docs/pages/examples/masks.tsx
@@ -8,23 +8,19 @@ const initialStyles = {
     {
       clip: 'border-box',
       image: {
-        type: 'url',
-        arguments: ['https://source.unsplash.com/random'],
+        name: 'url',
+        arguments: 'https://dlu344star2bj.cloudfront.net/i/3090-0015.jpg',
       },
       origin: 'border-box',
       position: {
-        x: { value: 0, type: '%' },
-        y: { value: 0, type: '%' },
-      },
-      repeat: {
-        x: 'no-repeat',
-        y: 'no-repeat',
-      },
-      size: {
-        type: 'dimensions',
-        x: { value: 100, unit: '%' },
-        y: { value: 100, unit: '%' },
+        x: { value: 0, unit: '%' },
+        y: { value: 0, unit: '%' },
       },
+      repeat: ['no-repeat', 'no-repeat'],
+      size: [
+        { value: 100, unit: '%' },
+        { value: 100, unit: '%' },
+      ],
       composite: 'add',
       mode: 'luminance',
     },
@@ -35,13 +31,16 @@ export default function MaskExample() {
   const [styles, setStyles] = useState(initialStyles)
   return (
     

-    
-      
 img': {maxWidth: '100%', display: 'block'} }}>
-        
-      
-      
-        
-      
+      
+        
 img': { maxWidth: '100%', display: 'block' } }}>
+          
+        
+        
+          
+        
       
     
   )
diff --git a/apps/docs/pages/examples/offset.tsx b/apps/docs/pages/examples/offset.tsx
index feb434ad..67c926f6 100644
--- a/apps/docs/pages/examples/offset.tsx
+++ b/apps/docs/pages/examples/offset.tsx
@@ -2,20 +2,25 @@ import { Editor, toCSSObject } from '@compai/css-gui'
 import { useState } from 'react'
 
 const initialStyles = {
-  offsetPath: {
-    shape: {
-      type: 'path',
-      path: 'M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80',
+  offset: {
+    path: {
+      type: 'shape',
+      shape: {
+        name: 'path',
+        arguments: 'M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80',
+      },
+      box: 'margin-box',
+    },
+    anchor: { x: 'center', y: 'center' },
+    distance: { value: 50, unit: '%' },
+    rotate: { value: 0, unit: 'deg' },
+    position: {
+      x: { value: 50, unit: '%' },
+      y: { value: 50, unit: '%' },
     },
-    box: 'margin-box',
-  },
-  offsetAnchor: {
-    x: { value: 'center', unit: 'keyword' },
-    y: { value: 'center', unit: 'keyword' },
   },
-  offsetDistance: { value: 50, unit: '%' },
-  offsetRotate: { value: 0, unit: 'deg' },
 }
+
 export default function OffsetExample() {
   const [styles, setStyles] = useState(initialStyles)
   return (
diff --git a/apps/docs/pages/examples/shadows.tsx b/apps/docs/pages/examples/shadows.tsx
index f4664d89..da9860ea 100644
--- a/apps/docs/pages/examples/shadows.tsx
+++ b/apps/docs/pages/examples/shadows.tsx
@@ -1,4 +1,4 @@
-import { Editor, styled } from '@compai/css-gui'
+import { Editor, styled, toCSSObject } from '@compai/css-gui'
 import { useState } from 'react'
 import { Container } from '../../components/Container'
 
@@ -45,8 +45,8 @@ export default function Shadows() {
           justifyContent: 'center',
         }}
       >
-        

           Fun with shadows
-        
+        
       
-      

+      

         
       
     
diff --git a/apps/docs/pages/examples/shape-outside.tsx b/apps/docs/pages/examples/shape-outside.tsx
index 5776ca53..4b4aea2e 100644
--- a/apps/docs/pages/examples/shape-outside.tsx
+++ b/apps/docs/pages/examples/shape-outside.tsx
@@ -5,12 +5,11 @@ const initialStyles = {
   shapeOutside: {
     type: 'shape',
     shape: {
-      type: 'inset',
-      top: { value: 2, unit: 'px' },
-      right: { value: 2, unit: 'px' },
-      bottom: { value: 2, unit: 'px' },
-      left: { value: 2, unit: 'px' },
-      borderRadius: { value: 16, unit: 'px' },
+      name: 'inset',
+      arguments: {
+        offset: { top: { value: 2, unit: 'px' } },
+        borderRadius: { value: 16, unit: 'px' },
+      },
     },
     box: 'margin-box',
   },
@@ -29,7 +28,7 @@ export default function ShapeOutsideExample() {
 
   return (
     

-      

+      

         

         {text}
       
-      

-       
-     
+      

+        
+      
     
   )
 }
diff --git a/apps/docs/pages/examples/simple-button.tsx b/apps/docs/pages/examples/simple-button.tsx
index 7c3c8046..097d01ec 100644
--- a/apps/docs/pages/examples/simple-button.tsx
+++ b/apps/docs/pages/examples/simple-button.tsx
@@ -11,11 +11,13 @@ const initialStyles = {
   },
   appearance: 'none',
   borderWidth: {
-    value: 0,
-    unit: 'px',
+    top: {
+      value: 0,
+      unit: 'px',
+    },
   },
-  fontWeight: '600',
-  fontSize: '16px',
+  fontWeight: 600,
+  fontSize: { value: 16, unit: 'px' },
   outlineWidth: {
     value: 0,
     unit: 'px',
@@ -25,12 +27,12 @@ const initialStyles = {
     value: 0,
     unit: 'px',
   },
-  'hover': {
+  hover: {
     color: '#ffffff',
     backgroundColor: '#3e38b0',
     outlineColor: '#3e38b0',
   },
-  'focus': {
+  focus: {
     color: '#ffffff',
     backgroundColor: '#3e38b0',
     outlineWidth: {
@@ -42,9 +44,9 @@ const initialStyles = {
     outlineOffset: {
       value: 4,
       unit: 'px',
-    }
+    },
   },
-  'active': {
+  active: {
     color: '#ffffff',
     backgroundColor: '#8170ff',
     outlineColor: '#8170ff',
@@ -54,45 +56,68 @@ const initialStyles = {
 export default function SimpleButton() {
   const [styles, setStyles] = useState(initialStyles)
   return (
-    

-        

+      

+          boxShadow:
+            'inset 0 0 0 1px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.2)',
+        }}
+      >
         
-          

+          

             
             
           
-          

+          

             
           
           
-          

-            
Hover
-            

+          

+            

+              Hover
+            
+            

               
               
               
             
           
-          

-            
Focus
-            

+          

+            

+              Focus
+            
+            

               
               
             
-            

+            

               
               
               
               
             
           
-          

-            
Active
-            

+          

+            

+              Active
+            
+            

               
               
               
@@ -100,9 +125,7 @@ export default function SimpleButton() {
           
         
       
-      

+      

         
           Click Here
         
-        
-        
-          
-            {codegen.css(styles)}
-          
-        
+      
+      
+        
{codegen.css(styles)}
+      
     
   )
 }
diff --git a/apps/docs/pages/examples/svg.tsx b/apps/docs/pages/examples/svg.tsx
index e5ffbd6c..69c141e7 100644
--- a/apps/docs/pages/examples/svg.tsx
+++ b/apps/docs/pages/examples/svg.tsx
@@ -1,46 +1,17 @@
-import { codegen, Editor, toCSSObject } from '@compai/css-gui'
+import { Editor, parseStyles, toCSSObject } from '@compai/css-gui'
 import { useState } from 'react'
 import { defaultTheme } from '../../data/default-theme'
-import { Container } from '../../components/Container'
 
-const initialStyles = {
+const initialStyles = parseStyles({
   stroke: '#fff',
   fill: 'none',
-  strokeAlignment: {
-    value: 'center',
-    unit: 'keyword',
-  },
-  strokeWidth: {
-    value: 8,
-    unit: 'px',
-  },
-  strokeLinejoin: {
-    value: 'round',
-    unit: 'keyword',
-  },
-  strokeLinecap: {
-    value: 'square',
-    unit: 'keyword',
-  },
-  strokeDashadjust: {
-    value: 'dashed',
-    unit: 'keyword',
-  },
-  strokeDashcorner: {
-    value: 0,
-    unit: 'px',
-  },
-  strokeDashoffset: {
-    value: 0,
-    unit: 'px',
-  },
-  strokeDasharray: [
-    { value: 0, unit: 'number' },
-    { value: 8, unit: 'number' },
-    { value: 0, unit: 'number' },
-    { value: 24, unit: 'number' },
-  ],
-}
+  strokeAlignment: 'center',
+  strokeWidth: '8px',
+  strokeLinejoin: 'round',
+  strokeLinecap: 'square',
+  strokeDashadjust: 'dashed',
+  strokeDasharray: '1, 20, 1, 15',
+})
 export default function SvgExample() {
   const [styles, setStyles] = useState(initialStyles)
 
diff --git a/apps/docs/pages/examples/text-decoration.tsx b/apps/docs/pages/examples/text-decoration.tsx
index cf5ca3ab..b89b0ffb 100644
--- a/apps/docs/pages/examples/text-decoration.tsx
+++ b/apps/docs/pages/examples/text-decoration.tsx
@@ -1,32 +1,17 @@
 import { useState } from 'react'
 import Link from 'next/link'
-import { Editor, Inputs, styled, codegen } from '@compai/css-gui'
+import { Editor, Inputs, styled, codegen, parseStyles } from '@compai/css-gui'
 import { defaultTheme } from '../../data/default-theme'
 import { Container } from '../../components/Container'
 
-const initialStyles = {
-  textDecorationColor: 'primary',
-  textDecorationThickness: {
-    value: 8,
-    unit: 'px',
-  },
-  textDecorationLine: 'underline',
-  textDecorationStyle: 'wavy',
+const initialStyles = parseStyles({
+  textDecoration: 'tomato 8px underline wavy',
   // Font
-  fontSize: {
-    value: 3,
-    unit: 'rem',
-  },
-  letterSpacing: {
-    value: 'initial',
-    unit: 'keyword',
-  },
-  lineHeight: {
-    value: '1.25',
-    unit: 'number',
-  },
-  fontFamily: 'Space Mono',
-}
+  fontSize: '3rem',
+  letterSpacing: 'initial',
+  lineHeight: '1.25',
+  // fontFamily: 'Space Mono',
+})
 
 export default function TextDecoration() {
   const [styles, setStyles] = useState(initialStyles)
@@ -34,7 +19,6 @@ export default function TextDecoration() {
   return (
     <>
       
<>
               

                 
Text Decoration
-                
-                
+                {/* 
                 
+                
+                 */}
+                
                 
-                
               
               

                 
Font
@@ -66,7 +51,7 @@ export default function TextDecoration() {
           
             “The parameters comprise sequences which are theoretically infinite
             but limits are, of course, set to them in practice.“
-            
 
+            

             
               In{' '}
               
         

       

-      

+      

         

       

-        

           Fun with transforms
-        
+        
         
(initialStyles)
   return (
-    

-    

-      

-        
-      
+    

+      

+        

+          
+        
         
 div': { display: 'grid', gap: '1em' } }}>
           
         
diff --git a/apps/docs/pages/examples/typography.tsx b/apps/docs/pages/examples/typography.tsx
index 59f7be1b..29bb9666 100644
--- a/apps/docs/pages/examples/typography.tsx
+++ b/apps/docs/pages/examples/typography.tsx
@@ -2,39 +2,35 @@ import { useState } from 'react'
 import Link from 'next/link'
 import { Editor, Inputs, styled, codegen } from '@compai/css-gui'
 import { defaultTheme } from '../../data/default-theme'
-import { Container } from '../../components/Container'
 
 const initialStyles = {
-  color: 'text',
-  backgroundColor: 'background',
+  color: { type: 'theme', path: 'text' },
+  backgroundColor: { type: 'theme', path: 'background' },
   fontFamily: 'Recursive',
   fontSize: {
     value: 3,
     unit: 'rem',
   },
-  letterSpacing: {
-    value: 'initial',
-    unit: 'keyword',
-  },
+  letterSpacing: 'initial',
   lineHeight: {
-    value: '1.5',
+    value: 1.5,
     unit: 'number',
   },
-  textDecorationColor: 'primary',
+  textDecorationColor: { type: 'theme', path: 'primary' },
   textDecorationThickness: {
     value: 0,
     unit: 'px',
   },
   textDecorationLine: 'none',
-  textDecorationStyle: 'none',
+  textDecorationStyle: 'solid',
   width: {
     value: 100,
-    unit: '%'
+    unit: '%',
   },
   maxWidth: {
     value: 42,
-    unit: 'em'
-  }
+    unit: 'em',
+  },
 }
 
 export default function Typography() {
@@ -47,8 +43,15 @@ export default function Typography() {
           display: 'flex',
         }}
       >
-        
-        

+        

           
             “The parameters comprise sequences which are theoretically infinite
             but limits are, of course, set to them in practice. There is an
@@ -69,67 +72,77 @@ export default function Typography() {
           
         
       
-          
-          <>
-            
Typography
-            

-              

-                

-                  
-                  
-                
-                
-              
-              

-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-              
-              

-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-              
-              

-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-              
-            
-            
-          
-      

+      
+        <>
+          
Typography
+          

+            

+              

+                
+                
+              
+              
+            
+            

+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+            
+            

+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+            
+            

+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+            
+          
+        
+      
+      

         

-      

-        
   )
 }
diff --git a/apps/docs/pages/html-editor.tsx b/apps/docs/pages/html-editor.tsx
new file mode 100644
index 00000000..79ffd9b4
--- /dev/null
+++ b/apps/docs/pages/html-editor.tsx
@@ -0,0 +1,42 @@
+import { HtmlEditor, HtmlRenderer, HtmlEditorProvider } from '@compai/css-gui'
+import { useState } from 'react'
+import { defaultTheme } from '../data/default-theme'
+import { initialValue } from '../data/initial-html-editor-data'
+
+export default function HtmlEditorExample() {
+  const [html, setHtml] = useState(initialValue)
+
+  return (
+    
+      
+    
+  )
+}
diff --git a/apps/docs/pages/inputs/responsive.mdx b/apps/docs/pages/inputs/responsive.mdx
deleted file mode 100644
index 3f688426..00000000
--- a/apps/docs/pages/inputs/responsive.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { FirstParagraph } from '../../components/FirstParagraph'
-import { ResponsiveExample } from '../../components/examples/Responsive'
-import { Container } from '../../components/Container'
-
-
-
-# Responsive Input
-
-
-  A responsive utility for creating dynamic inputs based on breakpoints.
-
-
-Use this component to expose controls that target breakpoints or a single, global
-value. Responsive outputs contain an array of values based on the number of breakpoints
-in the theme.
-
-## Example
-
-
-
-## Usage
-
-```ts
-import { useState } from 'react'
-import {
-  Length,
-  ResponsiveLength,
-  LengthInput,
-  ResponsiveInput,
-} from '@compai/css-gui'
-
-const DEFAULT_VALUE = {
-  value: 16,
-  unit: 'px',
-}
-export const ResponsiveExample = () => {
-  const [value, setValue] = useState(DEFAULT_VALUE)
-
-  return (
-    <>
-      
-      
{JSON.stringify(value, null, 2)}
-    
-  )
-}
-```
-
-
diff --git a/apps/docs/pages/library/card.tsx b/apps/docs/pages/library/card.tsx
new file mode 100644
index 00000000..0b29287f
--- /dev/null
+++ b/apps/docs/pages/library/card.tsx
@@ -0,0 +1,174 @@
+import {
+  HtmlEditor,
+  HtmlRenderer,
+  HtmlEditorProvider,
+  htmlToEditorSchema,
+} from '@compai/css-gui'
+import { useState } from 'react'
+
+const initialValue: any = {
+  tagName: 'a',
+  href: '#',
+  style: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'stretch',
+    flexDirection: 'column',
+    // textDecoration: 'none',
+    overflow: ['hidden'],
+    height: 'auto',
+  },
+  children: [
+    {
+      tagName: 'section',
+      style: {
+        overflow: ['hidden'],
+        maxHeight: { value: 40, unit: 'vh' },
+        minHeight: {
+          type: 'responsive',
+          values: [
+            { value: 160, unit: 'px' },
+            { value: 256, unit: 'px' },
+            { value: 256, unit: 'px' },
+          ],
+        },
+      },
+      children: [
+        {
+          tagName: 'img',
+          style: {
+            width: { value: 100, unit: '%' },
+            display: 'block',
+          },
+          attributes: {
+            src: 'https://dlu344star2bj.cloudfront.net/i/3090-0015.jpg',
+          },
+          children: [],
+        },
+      ],
+    },
+    {
+      tagName: 'div',
+      style: {
+        height: { value: 100, unit: '%' },
+        display: 'flex',
+        flexDirection: 'column',
+        paddingTop: { value: 32, unit: 'px' },
+        paddingBottom: { value: 32, unit: 'px' },
+      },
+      children: [
+        {
+          tagName: 'h2',
+          style: {
+            marginTop: { value: 0, unit: 'px' },
+            marginBottom: { value: 0, unit: 'px' },
+            fontWeight: '900',
+            fontSize: {
+              type: 'responsive',
+              values: [
+                { value: 24, unit: 'px' },
+                { value: 32, unit: 'px' },
+                { value: 48, unit: 'px' },
+              ],
+            },
+            lineHeight: { value: 1.25, unit: 'number' },
+          },
+          children: ['Hello, world!'],
+        },
+        {
+          tagName: 'h3',
+          style: {
+            marginTop: { value: 8, unit: 'px' },
+            marginBottom: { value: 0, unit: 'px' },
+            fontWeight: '600',
+            opacity: { value: 0.7, unit: '%' },
+            fontSize: {
+              type: 'responsive',
+              values: [
+                { value: 14, unit: 'px' },
+                { value: 16, unit: 'px' },
+                { value: 20, unit: 'px' },
+              ],
+            },
+            lineHeight: { value: 1.25, unit: 'number' },
+          },
+          children: ['This is a subtitle'],
+        },
+        {
+          tagName: 'p',
+          style: {
+            fontSize: {
+              type: 'responsive',
+              values: [
+                { value: 14, unit: 'px' },
+                { value: 16, unit: 'px' },
+                { value: 16, unit: 'px' },
+              ],
+            },
+            lineHeight: { value: 1.5, unit: 'number' },
+            marginTop: { value: 16, unit: 'px' },
+            marginBottom: { value: 24, unit: 'px' },
+          },
+          children: [
+            `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+             Fusce pellentesque varius molestie. Integer viverra dui at
+             mauris tempus, a posuere turpis tincidunt. Etiam vitae aliquet
+             nunc.`,
+          ],
+        },
+        {
+          tagName: 'section',
+          style: {},
+          children: [
+            {
+              tagName: 'button',
+              style: {
+                all: 'unset',
+                backgroundColor: 'tomato',
+                color: '#fff',
+                display: 'inline-flex',
+                fontSize: {
+                  type: 'responsive',
+                  values: [
+                    { value: 14, unit: 'px' },
+                    { value: 16, unit: 'px' },
+                    { value: 16, unit: 'px' },
+                  ],
+                },
+                fontWeight: '800',
+                justifyContent: 'center',
+                maxWidth: {
+                  value: 100,
+                  unit: 'px',
+                },
+                textAlign: 'center',
+                // textDecoration: 'none',
+                whiteSpace: 'nowrap',
+                paddingLeft: { value: 16, unit: 'px' },
+                paddingRight: { value: 16, unit: 'px' },
+                paddingTop: { value: 4, unit: 'px' },
+                paddingBottom: { value: 4, unit: 'px' },
+              },
+              children: ['Click me!'],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
+
+export default function HtmlEditorExample() {
+  const [html, setHtml] = useState(initialValue)
+
+  return (
+    

+      
+        
+        

+          
+        
+      
+    
+  )
+}
diff --git a/apps/docs/pages/properties/index.tsx b/apps/docs/pages/properties/index.tsx
index a74b04c1..0d1b97e5 100644
--- a/apps/docs/pages/properties/index.tsx
+++ b/apps/docs/pages/properties/index.tsx
@@ -12,6 +12,13 @@ import { BorderColorPreview } from '../../components/examples/BorderColorPreview
 import { BorderWidthPreview } from '../../components/examples/BorderWidthPreview'
 import { BorderStylePreview } from '../../components/examples/BorderStylePreview'
 
+import { AlignItemsPreview } from '../../components/examples/AlignItemsPreview'
+import { JustifyContentPreview } from '../../components/examples/JustifyContentPreview'
+import { FlexWrapPreview } from '../../components/examples/FlexWrapPreview'
+import { FlexGrowPreview } from '../../components/examples/FlexGrowPreview'
+import { FlexShrinkPreview } from '../../components/examples/FlexShrinkPreview'
+import { FlexDirectionPreview } from '../../components/examples/FlexDirectionPreview'
+
 import { OutlineColorPreview } from '../../components/examples/OutlineColorPreview'
 import { OutlineWidthPreview } from '../../components/examples/OutlineWidthPreview'
 import { OutlineStylePreview } from '../../components/examples/OutlineStylePreview'
@@ -64,7 +71,7 @@ export default function Docs() {
           

@@ -77,6 +84,12 @@ export default function Docs() {
             
             
             
+            
+            
+            
+            
+            
+            
             
             
             
diff --git a/package.json b/package.json
index 74aaa70e..7a7c1bd9 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
   },
   "engines": {
     "npm": ">=7.0.0",
-    "node": ">=14.0.0"
+    "node": ">=24.0.0"
   },
   "prettier": {
     "singleQuote": true,
@@ -31,10 +31,10 @@
   },
   "packageManager": "yarn@1.22.18",
   "dependencies": {
-    "@changesets/cli": "^2.22.0",
+    "@changesets/cli": "^2.26.0",
     "@manypkg/cli": "^0.19.1",
-    "prettier": "^2.6.2",
-    "tsup": "^5.12.6",
-    "turbo": "^1.2.6"
+    "prettier": "^2.7.1",
+    "tsup": "^6.2.3",
+    "turbo": "^1.3.1"
   }
 }
diff --git a/packages/config/package.json b/packages/config/package.json
index d599929c..f8db14b5 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -8,8 +8,8 @@
     "eslint-preset.js"
   ],
   "dependencies": {
-    "eslint-config-next": "^12.1.5",
+    "eslint-config-next": "^13.2.3",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-react": "7.29.4"
+    "eslint-plugin-react": "7.30.0"
   }
 }
diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md
index 727e22dd..ed89bf96 100644
--- a/packages/gui/CHANGELOG.md
+++ b/packages/gui/CHANGELOG.md
@@ -1,5 +1,1147 @@
 # @compai/css-gui
 
+## 0.0.247
+
+### Patch Changes
+
+- 2c1bbde9: Bump @radix-ui/react-dropdown-menu from 1.0.0 to 2.0.3
+
+## 0.0.246
+
+### Patch Changes
+
+- 95540fca: Adds Astro support for export
+
+## 0.0.245
+
+### Patch Changes
+
+- debd3b89: Properly handle pseudos when stringifying CSS object
+
+## 0.0.244
+
+### Patch Changes
+
+- d543091c: Changes color to be more accessible in editor
+- fd7865c8: Fixes typo
+
+## 0.0.243
+
+### Patch Changes
+
+- bb2079e3: New design styles
+- e116b855: Ensure theme is passed to style element stringification
+
+## 0.0.242
+
+### Patch Changes
+
+- 1f758bed: Fixes to two small design bugs
+
+## 0.0.241
+
+### Patch Changes
+
+- 4be2253e: Copy over emotion's hash code, faux ESM makes it tricky to use as dep
+
+## 0.0.240
+
+### Patch Changes
+
+- 3d312157: Add style element to enhance export
+
+## 0.0.239
+
+### Patch Changes
+
+- 8db98565: Use style string and don't destructure slots as attrs
+
+## 0.0.238
+
+### Patch Changes
+
+- 700259d1: Make sure all code generators are passed theme in export
+
+## 0.0.237
+
+### Patch Changes
+
+- 263b9b23: Move getAttrSyntax to util
+
+## 0.0.236
+
+### Patch Changes
+
+- 38996b16: Include attributes in enhance export
+
+## 0.0.235
+
+### Patch Changes
+
+- b0c58514: Implement first pass of enhance output
+
+## 0.0.234
+
+### Patch Changes
+
+- 63cc6ff4: Add initial support for selector functions
+
+## 0.0.233
+
+### Patch Changes
+
+- adea2803: Add filter element attributes
+
+## 0.0.232
+
+### Patch Changes
+
+- 08e07226: Bump @radix-ui/react-slider from 0.1.4 to 1.0.0
+- d48ae3bf: Bump copy-to-clipboard from 3.3.1 to 3.3.2
+
+## 0.0.231
+
+### Patch Changes
+
+- 294beec5: Adds new svg elements and attributes
+
+## 0.0.230
+
+### Patch Changes
+
+- 0846769d: Fix color label overflow
+
+## 0.0.229
+
+### Patch Changes
+
+- 5770da69: Improve tap targets and spacing
+
+## 0.0.228
+
+### Patch Changes
+
+- 312acb38: Apply styles to text parent
+
+## 0.0.227
+
+### Patch Changes
+
+- 8d695237: Ignore colors with alpha in regen
+
+## 0.0.226
+
+### Patch Changes
+
+- 98b7d345: Fix regen for theme values
+
+## 0.0.225
+
+### Patch Changes
+
+- 603fbfed: Add an empty text node to prose elements
+
+## 0.0.224
+
+### Patch Changes
+
+- 859ef100: Fix inconsistent typefaces
+- d6ddbe3b: Send along options to stringify in tuple schema
+
+## 0.0.223
+
+### Patch Changes
+
+- 049630e1: Add repeat keywords to count
+
+## 0.0.222
+
+### Patch Changes
+
+- 7f4f6573: Add component swapping
+
+## 0.0.221
+
+### Patch Changes
+
+- d1039b08: Move event propagation call
+
+## 0.0.220
+
+### Patch Changes
+
+- c9b6365d: Disable browser label/input selection handling in the canvas
+
+## 0.0.219
+
+### Patch Changes
+
+- ff2f1dcd: A small patch to remove autocorrect from property input control
+
+## 0.0.218
+
+### Patch Changes
+
+- 794eab84: Make font size consistent in DOM tree
+
+## 0.0.217
+
+### Patch Changes
+
+- eb553037: Improve node type swapping
+
+## 0.0.216
+
+### Patch Changes
+
+- 354f899f: Implement inline insert for components/slots
+
+## 0.0.215
+
+### Patch Changes
+
+- 565f3ed3: Maintain component children
+
+## 0.0.214
+
+### Patch Changes
+
+- 74ac4a3e: Improve adding box shadow layers
+
+## 0.0.213
+
+### Patch Changes
+
+- 8114b4c4: Improve color display
+
+## 0.0.212
+
+### Patch Changes
+
+- 3f04e7ac: Only wrap imports when there's more than one top level element
+
+## 0.0.211
+
+### Patch Changes
+
+- 790afdba: Keep component name in combobox when selected
+
+## 0.0.210
+
+### Patch Changes
+
+- 9628acc5: Keep props around when swapping between components
+
+## 0.0.209
+
+### Patch Changes
+
+- 50d060da: Adds new properties and svg elements
+
+## 0.0.208
+
+### Patch Changes
+
+- b5dc91a7: Make sure tag name combobox syncs
+
+## 0.0.207
+
+### Patch Changes
+
+- c53ca4bb: Improve enter handling for combobox
+
+## 0.0.206
+
+### Patch Changes
+
+- 2908cba5: Make sure default value is passed to base schema
+
+## 0.0.205
+
+### Patch Changes
+
+- 635d59de: Fix palette picker z index
+
+## 0.0.204
+
+### Patch Changes
+
+- f0114ae9: Fix color picker style bug
+
+## 0.0.203
+
+### Patch Changes
+
+- 08f99dbb: Fixes typo
+- a90031f8: Visual changes to editor controls
+
+## 0.0.202
+
+### Patch Changes
+
+- f7c41754: Bump @radix-ui/react-switch from 0.1.5 to 1.0.0
+- 5aa3cbec: Bump @radix-ui/react-dropdown-menu from 0.1.6 to 1.0.0
+- 473ba671: Bump @radix-ui/react-popover from 0.1.6 to 1.0.0
+
+## 0.0.201
+
+### Patch Changes
+
+- afcce3ed: Improve control styles
+
+## 0.0.200
+
+### Patch Changes
+
+- 58c2c3fa: Display theme value for scales
+
+## 0.0.199
+
+### Patch Changes
+
+- af5a6cf9: Add component name to dropdown in editor
+
+## 0.0.198
+
+### Patch Changes
+
+- f464b9d0: Bump theme-ui from 0.14.6 to 0.14.7
+
+## 0.0.197
+
+### Patch Changes
+
+- 5cb0fcf5: Show function names in input
+
+## 0.0.196
+
+### Patch Changes
+
+- a3654f79: Add theme support in gradient
+
+## 0.0.195
+
+### Patch Changes
+
+- 5a373ac3: Add support for box shadows in theme
+
+## 0.0.194
+
+### Patch Changes
+
+- 9784d96d: Add changeset
+
+## 0.0.193
+
+### Patch Changes
+
+- b5c54ad8: Make border radius theme aware
+
+## 0.0.192
+
+### Patch Changes
+
+- 82aafd34: Add random image to image when added to canvas
+
+## 0.0.191
+
+### Patch Changes
+
+- 1fd09f49: Improve font family theme integration
+
+## 0.0.190
+
+### Patch Changes
+
+- 684e2f65: Fix gradient stops adding
+
+## 0.0.189
+
+### Patch Changes
+
+- 05f3157a: Add component/slot to layers panel
+
+## 0.0.188
+
+### Patch Changes
+
+- 130847c4: Fix bug with inline text editing
+
+## 0.0.187
+
+### Patch Changes
+
+- db4fa469: Implement inline text editing
+
+## 0.0.186
+
+### Patch Changes
+
+- 6e4d520b: Theme handling improvements, remove duplicate UI
+
+## 0.0.185
+
+### Patch Changes
+
+- d9ff3da0: Properly handle contrast for all properties
+
+## 0.0.184
+
+### Patch Changes
+
+- 304e6671: Improve node adding and editing
+
+## 0.0.183
+
+### Patch Changes
+
+- 49aae809: Constrain to accessible contrasts when generating colors
+
+## 0.0.182
+
+### Patch Changes
+
+- 2351ca88: Handle textarea children
+
+## 0.0.181
+
+### Patch Changes
+
+- 1a4562c9: Refactor fieldset passing
+
+## 0.0.180
+
+### Patch Changes
+
+- d7124e11: Add draggable reordering to field array inputs
+
+## 0.0.179
+
+### Patch Changes
+
+- 5820a1bb: Fix node type select
+
+## 0.0.178
+
+### Patch Changes
+
+- bb72987d: Ignore style attribute on import for now
+
+## 0.0.177
+
+### Patch Changes
+
+- 474882f6: Improve nested component selection
+
+## 0.0.176
+
+### Patch Changes
+
+- ebde90d6: Improve HTML node imports
+
+## 0.0.175
+
+### Patch Changes
+
+- cc3bed1f: Improve fieldset fuzzy search
+
+## 0.0.174
+
+### Patch Changes
+
+- 92807f4a: Add support for nested elements
+
+## 0.0.173
+
+### Patch Changes
+
+- 9b88bf0d: Implement HTML and Markdown imports for DOM structure
+
+## 0.0.172
+
+### Patch Changes
+
+- 3930a3bc: Improve element selection
+
+## 0.0.171
+
+### Patch Changes
+
+- 56cacc60: Fix transforms
+
+## 0.0.170
+
+### Patch Changes
+
+- ff1d652e: Ensure that theme colors are generated
+
+## 0.0.169
+
+### Patch Changes
+
+- 122bd3ed: Enable selection for nested components
+
+## 0.0.168
+
+### Patch Changes
+
+- b6d1c2fe: Internal refactor of HTML renderers and editors
+
+## 0.0.167
+
+### Patch Changes
+
+- e2bd4fb8: Internal refactor for canvas prop instantiation
+
+## 0.0.166
+
+### Patch Changes
+
+- 084d6bb9: Add inline text editing to node tree
+
+## 0.0.165
+
+### Patch Changes
+
+- 1a9b3f54: Add more rect attributes
+
+## 0.0.164
+
+### Patch Changes
+
+- 27c01a47: Add support for nesting components as children
+
+## 0.0.163
+
+### Patch Changes
+
+- 7ee06fcd: Internal refactoring
+
+## 0.0.162
+
+### Patch Changes
+
+- 0a39cf5f: Don't allow for path selection inside component
+
+## 0.0.161
+
+### Patch Changes
+
+- 57dd87dd: Expose attributes for a component
+
+## 0.0.160
+
+### Patch Changes
+
+- b2c31b23: Make list schema use theme when relevant
+
+## 0.0.159
+
+### Patch Changes
+
+- 03505bbf: Add prop syntax to relevant exports
+
+## 0.0.158
+
+### Patch Changes
+
+- 993b2236: Add basic slot support for strings
+
+## 0.0.157
+
+### Patch Changes
+
+- 971e506a: Improve some default values
+
+## 0.0.156
+
+### Patch Changes
+
+- 2bd60942: Fix component selection
+
+## 0.0.155
+
+### Patch Changes
+
+- 184ff579: Fix responsive theme values
+
+## 0.0.154
+
+### Patch Changes
+
+- e4f12cad: Add initial component support
+
+## 0.0.153
+
+### Patch Changes
+
+- 7ba14dbb: Adds background color to fix bug on node editor
+
+## 0.0.152
+
+### Patch Changes
+
+- 0246cd41: Changes element editor to sticky position
+
+## 0.0.151
+
+### Patch Changes
+
+- 7683e6b8: Fix theme selection for box side
+
+## 0.0.150
+
+### Patch Changes
+
+- 000e4489: Add polyline element
+
+## 0.0.149
+
+### Patch Changes
+
+- 87d117be: Fix skew x/y
+
+## 0.0.148
+
+### Patch Changes
+
+- 5bd603aa: Allow cursor to be overridden in canvas
+- 97d48aee: Fix translate3d
+
+## 0.0.147
+
+### Patch Changes
+
+- 7e8991b8: Only set default canvas styles in canvas mode
+
+## 0.0.146
+
+### Patch Changes
+
+- 888a55fe: Set default to current color
+
+## 0.0.145
+
+### Patch Changes
+
+- 6f28e1db: Add theme support for box side properties
+- 141b70c7: Pass theme to shorthands
+
+## 0.0.144
+
+### Patch Changes
+
+- d2bf7579: Pass theme to codegen
+
+## 0.0.143
+
+### Patch Changes
+
+- 236266eb: Zero index theme values
+
+## 0.0.142
+
+### Patch Changes
+
+- 07cf4070: Fix system colors
+
+## 0.0.141
+
+### Patch Changes
+
+- 1fd871b3: Pass theme along with document for codegen
+
+## 0.0.140
+
+### Patch Changes
+
+- 09588f40: Improve theme integration
+
+## 0.0.139
+
+### Patch Changes
+
+- 20f68b77: Remove unneeded internal function
+- ffb1ef8e: Fix theme handling in HTML editor
+
+## 0.0.138
+
+### Patch Changes
+
+- 6ad62f66: Add some basic SVG functionality
+
+## 0.0.137
+
+### Patch Changes
+
+- 6df72919: Properly hide none schema type, tie in variable fonts
+
+## 0.0.136
+
+### Patch Changes
+
+- af3185f5: Default z index to 1
+
+## 0.0.135
+
+### Patch Changes
+
+- 5bfb117d: Change default length value for height
+
+## 0.0.134
+
+### Patch Changes
+
+- 4790114f: Don't error when the theme path doesn't exist
+- 50b691fd: Adjust height/width default values
+
+## 0.0.133
+
+### Patch Changes
+
+- cbac582a: Don't use old color shape
+
+## 0.0.132
+
+### Patch Changes
+
+- ea271f92: Stringify font family
+
+## 0.0.131
+
+### Patch Changes
+
+- d9d7d449: Add back node copying, make more robust
+
+## 0.0.130
+
+### Patch Changes
+
+- 5d9ad0c1: Misc bug fixes including tuple handling and box sides
+
+## 0.0.129
+
+### Patch Changes
+
+- 46040f61: Remove user select from labels
+
+## 0.0.128
+
+### Patch Changes
+
+- e4b01dea: Hide copy node temporarily
+
+## 0.0.127
+
+### Patch Changes
+
+- 3c1b1a68: Remove default button styles, add tokenizer
+
+## 0.0.126
+
+### Patch Changes
+
+- 3660e1ad: Transform legacy formats, ensure transform happens before CSS export
+
+## 0.0.125
+
+### Patch Changes
+
+- 89c8d7fa: Stringify keywords before validation
+
+## 0.0.124
+
+### Patch Changes
+
+- 69fc6fcb: Accept theme in html editor, pass to style controls
+
+## 0.0.123
+
+### Patch Changes
+
+- c269a1e3: More app like chrome
+
+## 0.0.122
+
+### Patch Changes
+
+- 94f1b85: Add copy/wrap node
+
+## 0.0.121
+
+### Patch Changes
+
+- 4632b1b: Make item display configurable
+
+## 0.0.120
+
+### Patch Changes
+
+- 1588bfd: Make default node an empty div
+- 0273dee: Fix background-size
+
+## 0.0.119
+
+### Patch Changes
+
+- c2a64fb: Fix selection bug on node adding
+- cc6d912: Improve comboboxes
+
+## 0.0.118
+
+### Patch Changes
+
+- 31bdf9b: Clear all styles dropdown
+
+## 0.0.117
+
+### Patch Changes
+
+- e432f72: Changes layers editor
+- 6c83225: Remove fieldset
+
+## 0.0.116
+
+### Patch Changes
+
+- 356d97e: Ensure "add child" is always shown
+
+## 0.0.115
+
+### Patch Changes
+
+- e0ef441: Make nodes in html editor unist friendly
+- 5fe33db: Remove props transform temporarily
+- ad2ed3e: Remove attr default temporarily
+- b894bd0: Improve unstyled html export
+
+## 0.0.114
+
+### Patch Changes
+
+- f7619d5: Fix schema transformer to not destructure raw strings
+- 0587bb0: Format exports
+- db91166: Add React(vanilla/Emotion/Theme UI/Styled JSX) and Vue exports
+
+## 0.0.113
+
+### Patch Changes
+
+- 2dbba5d: fixes lab and lch color picker
+
+## 0.0.112
+
+### Patch Changes
+
+- 67f54e3: fixes selecting values in picker
+
+## 0.0.111
+
+### Patch Changes
+
+- d2b4e14: Fixes color picker mode switching
+
+## 0.0.110
+
+### Patch Changes
+
+- 6df9f13: Make theme more of a first class citizen
+
+## 0.0.109
+
+### Patch Changes
+
+- cf5bfc0: Generative controls
+
+## 0.0.108
+
+### Patch Changes
+
+- 89a9014: Handle undefined values in dimension input
+
+## 0.0.107
+
+### Patch Changes
+
+- 0fa831b: Add tabs for node/tree/export, add copy to clipboarfor exported HTML + CSS
+- 00e15a3: Fix node editing in tabs
+- 1042ffc: Design tweaks to editor
+- 438ad58: Fix navigation alignment
+- 2474219: Force styles editor re-render when selection changes in html editor
+
+## 0.0.106
+
+### Patch Changes
+
+- f9d81c3: Changes label copy
+- 91a1e64: Design tweaks to editor
+
+## 0.0.105
+
+### Patch Changes
+
+- e1b17b3: Improve fuzzy sort by ignoring hypen in property names
+
+## 0.0.104
+
+### Patch Changes
+
+- 0b70d4a: Don't set outline or user select when not in canvas mode
+
+## 0.0.103
+
+### Patch Changes
+
+- 12d442b: Minor internal improvements to inputs
+
+## 0.0.102
+
+### Patch Changes
+
+- 760266c: Removes modes from color groups
+
+## 0.0.101
+
+### Patch Changes
+
+- eb84f84: Allow manually typed decimals in number input
+
+## 0.0.100
+
+### Patch Changes
+
+- 77a9d7c: Fixes colorpicker for safari
+
+## 0.0.99
+
+### Patch Changes
+
+- c96be76: Fix bug with default values
+
+## 0.0.98
+
+### Patch Changes
+
+- 21ec5af: Remove unneeded canvas wrap
+- b943e01: kebab property names
+- b0847c4: Fix href handling in canvas
+
+## 0.0.97
+
+### Patch Changes
+
+- c8f38a8: Tweak styles
+- 60189e3: Fix combobox, convert all inputs to new schema
+- ce61c0c: Clean up visuals
+
+## 0.0.96
+
+### Patch Changes
+
+- a679ce7: Implement dynamic fieldsets for pseudos
+
+## 0.0.95
+
+### Patch Changes
+
+- 28f0e9d: Fix combobox init
+
+## 0.0.94
+
+### Patch Changes
+
+- 0b91ab3: Begin generating controls from schema
+
+## 0.0.93
+
+### Patch Changes
+
+- 665fe5e: Fixes importing theme and theme value ranges
+
+## 0.0.92
+
+### Patch Changes
+
+- 159bfb1: Bump react and @types/react
+- 167af9a: Bump react-feather from 2.0.9 to 2.0.10
+
+## 0.0.91
+
+### Patch Changes
+
+- 1b7b5b4: Improve stringification to handle edge cases
+- 5fad1da: Improve dimensional controls for space and border
+- 76a9a8b: Fix palette swatches/gradient stops
+- 32b0449: Export a schema version
+
+## 0.0.90
+
+### Patch Changes
+
+- e552e6e: Adds html elements and attributes
+
+## 0.0.89
+
+### Patch Changes
+
+- a985b87: Fixes regen for color input
+
+## 0.0.88
+
+### Patch Changes
+
+- dc0f8a9: Improve selection after adding and removing nodes
+- f6630f1: Turn off user select in canvas
+
+## 0.0.87
+
+### Patch Changes
+
+- 4c12a85: Fix DraggableInput to be immediately reflected value when keyed down
+
+## 0.0.86
+
+### Patch Changes
+
+- db6f904: Add HTML codegen
+- 6fff7cd: Make text input on HTML editor a textarea
+
+## 0.0.85
+
+### Patch Changes
+
+- 95aec83: Only wrap elements in span when in canvas
+
+## 0.0.84
+
+### Patch Changes
+
+- 6e4b786: fixes negative value entry and NaN values
+
+## 0.0.83
+
+### Patch Changes
+
+- 2f746c0: New default values
+- f6b2ab6: Adds additional default values
+
+## 0.0.82
+
+### Patch Changes
+
+- 1b14e3b: Adds theme preview picker to color popover
+- dd9fff9: Fix tree view
+
+## 0.0.81
+
+### Patch Changes
+
+- 26e8157: Use text node rather than string
+
+## 0.0.80
+
+### Patch Changes
+
+- c8cfc1f: Delete href in canvas to avoid browser jump
+- 29cb0a3: Use default cursor in tree view
+- 607f95e: Make label spacing more consistent
+
+## 0.0.79
+
+### Patch Changes
+
+- ad49603: Sets value to theme unit on mount if init value matches a theme
+- d8d15c6: Set cursor to default in canvas
+- aae59ca: Improve selection styles
+
+## 0.0.78
+
+### Patch Changes
+
+- b0adbe2: Add selection indicator to tree view
+
+## 0.0.77
+
+### Patch Changes
+
+- d076466: Ensure class attrs don't drop styling
+
+## 0.0.76
+
+### Patch Changes
+
+- 6ec180e: Better handle void elements
+
+## 0.0.75
+
+### Patch Changes
+
+- a4373e2: Fix theme font families to the top of the input
+- b2e9ea5: Add ability to provide a theme as a provider
+
+## 0.0.74
+
+### Patch Changes
+
+- 300787d: Adds variable font tag support to html editor
+
+## 0.0.73
+
+### Patch Changes
+
+- 71c8bc4: Add selection state to HTML editor
+
+## 0.0.72
+
+### Patch Changes
+
+- f5460f6: Select outer root when html editor mounts
+
+## 0.0.71
+
+### Patch Changes
+
+- 2082101: Keep combobox value in sync
+
+## 0.0.70
+
+### Patch Changes
+
+- 02d3cac: Adds font tags to html editor
+
+## 0.0.69
+
+### Patch Changes
+
+- 60842c6: Adjust some types
+
+## 0.0.68
+
+### Patch Changes
+
+- d43581d: Fix duplicates bug
+
+## 0.0.67
+
+### Patch Changes
+
+- 5dc4b27: Fix sorting for properties
+
+## 0.0.66
+
+### Patch Changes
+
+- cec7fb8: Add default styles when a html tag is selected
+- 0ffe9ca: Adds more HTML elements to the list
+- fff36f0: Clears combobox when item selected
+
+## 0.0.65
+
+### Patch Changes
+
+- 26eeecb: Point to documentation if styles object is absent
+- e2cc0a2: Add property controls for fieldsets
+
 ## 0.0.64
 
 ### Patch Changes
diff --git a/packages/gui/jest.config.cjs b/packages/gui/jest.config.cjs
new file mode 100644
index 00000000..670d7889
--- /dev/null
+++ b/packages/gui/jest.config.cjs
@@ -0,0 +1,13 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest/presets/default-esm',
+  testEnvironment: 'node',
+  globals: {
+    'ts-jest': {
+      useESM: true,
+    },
+  },
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+  },
+}
diff --git a/packages/gui/package.json b/packages/gui/package.json
index c3f2a8a2..97ae23a3 100644
--- a/packages/gui/package.json
+++ b/packages/gui/package.json
@@ -1,12 +1,14 @@
 {
   "name": "@compai/css-gui",
-  "version": "0.0.64",
+  "version": "0.0.247",
   "type": "module",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
   "scripts": {
     "build": "tsup",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
     "dev": "tsup --watch",
     "clean": "rm -rf .turbo node_modules dist"
   },
@@ -25,13 +27,16 @@
     "react-dom": ">= 18"
   },
   "devDependencies": {
+    "@types/jest": "^28.1.3",
     "@types/lodash-es": "^4.17.6",
-    "@types/react": "18.0.5",
+    "@types/react": "18.0.10",
     "@types/react-dom": "^18.0.1",
     "@types/uuid": "^8.3.4",
     "config": "*",
-    "react": "18.0.0",
+    "jest": "^28.1.1",
+    "react": "18.1.0",
     "react-dom": "18.0.0",
+    "ts-jest": "^28.0.5",
     "tsconfig": "*",
     "typescript": "^4.6.4"
   },
@@ -40,24 +45,38 @@
     "@mdx-js/react": "^1.6.22",
     "@radix-ui/react-accordion": "^0.1.6",
     "@radix-ui/react-collapsible": "^0.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.0.3",
     "@radix-ui/react-label": "^0.1.5",
-    "@radix-ui/react-popover": "^0.1.6",
-    "@radix-ui/react-slider": "^0.1.4",
-    "@radix-ui/react-switch": "^0.1.5",
+    "@radix-ui/react-popover": "^1.0.0",
+    "@radix-ui/react-select": "^0.1.1",
+    "@radix-ui/react-slider": "^1.0.0",
+    "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-tabs": "^0.1.5",
-    "@radix-ui/react-toggle": "^0.1.4",
+    "@radix-ui/react-toggle": "^1.0.1",
     "@radix-ui/react-tooltip": "^0.1.7",
+    "@use-gesture/react": "^10.2.17",
+    "copy-to-clipboard": "^3.3.2",
     "csstype": "^3.0.11",
     "culori": "^2.0.3",
     "downshift": "^6.1.7",
+    "escape-html": "^1.0.3",
+    "fuzzysort": "^2.0.1",
     "get-contrast": "^3.0.0",
+    "hast-to-hyperscript": "^10.0.1",
+    "hast-util-to-html": "^8.0.3",
+    "hast-util-to-mdast": "^8.3.1",
     "immer": "^9.0.12",
     "lodash-es": "^4.17.21",
-    "react-feather": "^2.0.9",
-    "react-use-gesture": "^9.1.3",
+    "mdast-util-from-markdown": "^1.2.0",
+    "mdast-util-to-hast": "^12.1.2",
+    "mdast-util-to-markdown": "^1.3.0",
+    "property-information": "^6.1.1",
+    "react-feather": "^2.0.10",
     "rehype-parse": "^8.0.4",
     "rehype-sanitize": "^5.0.1",
-    "theme-ui": "^0.14.5",
+    "rehype-stringify": "^9.0.3",
+    "remark-parse": "^10.0.1",
+    "theme-ui": "^0.14.7",
     "unified": "^10.1.2",
     "unist-util-remove": "^3.1.0",
     "unist-util-visit": "^4.1.0",
diff --git a/packages/gui/src/components/AddFieldset.tsx b/packages/gui/src/components/AddFieldset.tsx
new file mode 100644
index 00000000..97878923
--- /dev/null
+++ b/packages/gui/src/components/AddFieldset.tsx
@@ -0,0 +1,60 @@
+import fuzzysort from 'fuzzysort'
+import { elements } from '../data/elements'
+import { pseudoClasses } from '../data/pseudo-classes'
+import { pseudoElements } from '../data/pseudo-elements'
+import { Styles } from '../types/css'
+import { Combobox, Label } from './primitives'
+import { useEditor } from './providers/EditorContext'
+import { KeyArg } from './providers/types'
+import { joinPath } from './providers/util'
+
+interface Props {
+  field?: KeyArg
+  styles: Styles
+  label?: string
+}
+export const AddFieldsetControl = ({
+  field,
+  styles,
+  label = 'Add pseudo element or class',
+}: Props) => {
+  const { setField } = useEditor()
+  const allItems = [...pseudoClasses, ...pseudoElements, ...elements]
+
+  const handleFilterItems = (input: string) => {
+    if (input === '') {
+      return allItems
+    }
+
+    const styleItems = Object.keys(styles)
+    return fuzzysort
+      .go(input.replace(/-/g, ''), allItems)
+      .map((res) => res.target)
+      .filter((item) => !styleItems.includes(item))
+  }
+
+  const handleAddFieldset = (propertyName: string) => {
+    const fullField = field ? joinPath(field, propertyName) : propertyName
+    setField(fullField, {})
+  }
+
+  return (
+    

+      {label}
+      
+    
+  )
+}
diff --git a/packages/gui/src/components/AddProperty.tsx b/packages/gui/src/components/AddProperty.tsx
index c072382c..5ee811b5 100644
--- a/packages/gui/src/components/AddProperty.tsx
+++ b/packages/gui/src/components/AddProperty.tsx
@@ -1,194 +1,67 @@
-import { useCombobox } from 'downshift'
-import { useEffect, useId, useRef, useState } from 'react'
 import { properties as propertyList } from '../data/properties'
-import { getDefaultValue } from '../lib/defaults'
+import { getDefaultValue } from './Editor/util'
 import { Styles } from '../types/css'
-import { Label } from './primitives'
+import { Combobox, Label } from './primitives'
 import { useDynamicControls } from './providers/DynamicPropertiesContext'
 import { useEditor } from './providers/EditorContext'
+import { KeyArg } from './providers/types'
+import { joinPath } from './providers/util'
+import fuzzysort from 'fuzzysort'
+import { kebabCase } from 'lodash-es'
 
 interface Props {
+  field?: KeyArg
   styles: Styles
+  label?: string
 }
-export const AddPropertyControl = ({ styles }: Props) => {
+export const AddPropertyControl = ({
+  field,
+  styles,
+  label = 'Add property',
+}: Props) => {
   const { setField } = useEditor()
   const { addDynamicProperty } = useDynamicControls()
-  const id = useId()
-  const inputRef = useRef(null)
 
-  // @ts-ignore
+  //@ts-ignore
   const allProperties: string[] = Object.entries(propertyList)
     .map(([name, data]) => {
-      return data.type !== 'none' ? name : null
+      return data.input ? name : null
     })
     .filter(Boolean)
 
-  const [inputItems, setInputItems] = useState([])
-  const [filterValue, setFilterValue] = useState('')
-
-  useEffect(() => {
-    handleFilterItems(filterValue)
-  }, [])
-
-  const {
-    isOpen,
-    toggleMenu,
-    getMenuProps,
-    getInputProps,
-    getItemProps,
-    getComboboxProps,
-    highlightedIndex,
-  } = useCombobox({
-    id,
-    items: inputItems,
-    selectedItem: filterValue,
-    onInputValueChange: ({ inputValue }) => {
-      handleFilterItems(inputValue!)
-    },
-    onSelectedItemChange: ({ selectedItem }) => {
-      handleAddProperty(selectedItem ?? '')
-    },
-  })
-
   const handleFilterItems = (input: string) => {
+    if (input === '') {
+      return allProperties
+    }
+
     const styleItems = Object.keys(styles)
-    const filteredItems = allProperties
-      .filter((item) => {
-        if (item.toLowerCase().startsWith(input.toLowerCase() || '')) {
-          return !styleItems.includes(item)
-        }
-      })
-      .sort()
-    setInputItems(filteredItems)
+    return fuzzysort
+      .go(input.replace(/-/g, ''), allProperties)
+      .map((res) => res.target)
+      .filter((item) => !styleItems.includes(item))
   }
 
   const handleAddProperty = (propertyName: string) => {
-    setField(propertyName, getDefaultValue(propertyName))
-    if (addDynamicProperty) {
+    const fullField = field ? joinPath(field, propertyName) : propertyName
+
+    setField(fullField, getDefaultValue(propertyName))
+    if (addDynamicProperty && !field) {
       addDynamicProperty(propertyName)
     }
   }
 
   return (
-    

-      
-        Add property
-         setFilterValue(e.target.value),
-          })}
-          onFocus={() => {
-            if (!isOpen) {
-              toggleMenu()
-              handleFilterItems('')
-            }
-          }}
-          sx={{ display: 'block', width: '100%' }}
+    

+      
+        {label}
+         kebabCase(str)}
+          clearOnSelect
         />
       
-      

-        

-          {isOpen && inputItems.length === 0 && (
-            

-              No results
-               {
-                  handleAddProperty('')
-                  // @ts-ignore
-                  inputRef.current.focus()
-                  if (!isOpen) {
-                    toggleMenu()
-                  }
-                }}
-              >
-                Clear
-              
-            
-          )}
-          {isOpen &&
-            inputItems.map((item, index) => {
-              return (
-                
-              )
-            })}
-        
-      
     
   )
 }
diff --git a/packages/gui/src/components/Editor/Controls.tsx b/packages/gui/src/components/Editor/Controls.tsx
index f96eb475..e23c66b1 100644
--- a/packages/gui/src/components/Editor/Controls.tsx
+++ b/packages/gui/src/components/Editor/Controls.tsx
@@ -5,16 +5,12 @@ import {
   Fragment,
   isValidElement,
   ReactNode,
-  useEffect,
-  useId,
+  useMemo,
+  useState,
 } from 'react'
-import {
-  CSSUnitValue,
-  Length,
-  MultidimensionalLength,
-  ResponsiveLength,
-  Styles,
-} from '../../types/css'
+import { camelCase, isNil, mapValues, uniq } from 'lodash-es'
+import { RefreshCw } from 'react-feather'
+import { Styles } from '../../types/css'
 import { Theme } from '../../types/theme'
 import { EditorProvider, useEditor } from '../providers/EditorContext'
 import { useDynamicControls } from '../providers/DynamicPropertiesContext'
@@ -22,36 +18,34 @@ import { EditorData, KeyArg, Recipe } from '../providers/types'
 import { GenericFieldset, useFieldset } from './Fieldset'
 import { joinPath } from '../providers/util'
 import { properties } from '../../data/properties'
-import { ColorInput } from '../inputs/ColorInput'
-import { LengthInput } from '../inputs/LengthInput'
-import { ResponsiveInput } from '../Responsive'
 import { sentenceCase } from '../../lib/util'
-import { EditorProps } from '../../types/editor'
-import { DimensionInput } from '../inputs/Dimension'
-import { SelectInput } from '../inputs/SelectInput'
-import { GLOBAL_KEYWORDS } from '../../data/global-keywords'
-import { Label } from '../primitives'
-import { camelCase, kebabCase, uniq } from 'lodash-es'
 import { useThemeProperty } from '../providers/ThemeContext'
-import { PositionInput } from '../inputs/PositionInput'
-import { TimeInput } from '../inputs/TimeInput'
 import { UnitSteps } from '../../lib'
 import { pascalCase } from '../../lib/util'
 import { UnitRanges } from '../../data/ranges'
-import { StringInput } from '../inputs/StringInput'
-import { DEFAULT_LENGTH } from '../../lib/constants'
-import { getDefaultValue } from '../../lib/defaults'
-import { MultidimensionInput } from '../inputs/Multidimension'
-import { Responsive } from '../Responsive/Input'
 import { AddPropertyControl } from '../AddProperty'
-import { DeletePropButton } from '../inputs/Dimension/Input'
 import {
-  getFieldsetPropsFromProperty,
+  getDefaultValue,
   isFieldsetGroup,
+  partitionProperties,
   sortProperties,
 } from './util'
 import { stylesToEditorSchema } from '../../lib/transformers/styles-to-editor-schema'
 import { removeInternalCSSClassSyntax } from '../../lib/classes'
+import { AddFieldsetControl } from '../AddFieldset'
+import IconButton from '../ui/IconButton'
+import { SchemaInput } from '../inputs/SchemaInput'
+import { EditorDropdown } from '../ui/dropdowns/EditorDropdown'
+import { FieldsetDropdown } from '../ui/dropdowns/FieldsetDropdown'
+import { tokenize } from '../../lib/parse'
+import {
+  addPseudoSyntax,
+  getSelectorFunctionArgument,
+  getSelectorFunctionName,
+  isSelectorFunction,
+  removePseudoSyntax,
+  stringifySelectorFunction,
+} from '../../lib/pseudos'
 
 export const getPropertyFromField = (field: KeyArg) => {
   if (Array.isArray(field)) {
@@ -66,32 +60,17 @@ interface ControlProps extends InputProps {
   showRemove?: boolean
 }
 const Control = ({ field, showRemove = false, ...props }: ControlProps) => {
-  const { getField, setField, removeField } = useEditor()
+  const { getField, getParentField, setField, removeField } = useEditor()
   const { removeDynamicProperty } = useDynamicControls()
   const fieldset = useFieldset()
   const property = getPropertyFromField(field)
-  const Component: ComponentType | null = getInputComponent(property)
   const themeValues = useThemeProperty(property)
-  const keywords = [
-    ...(properties[property].keywords ?? []),
-    ...GLOBAL_KEYWORDS,
-  ]
-  const dependantProperties = properties[property].dependantProperties ?? []
-
-  if (!Component) {
-    console.error(`Unknown field: ${field}, ignoring`)
-    return null
-  }
+  const dependantProperties =
+    (properties[property] as any).dependantProperties ?? []
 
   const fieldsetName = fieldset?.name ?? null
   const fullField = fieldsetName ? joinPath(fieldsetName, field) : field
-  const componentProps = {
-    label: sentenceCase(property),
-    themeValues: themeValues,
-    ...properties[property],
-    ...props,
-    keywords,
-  }
+  const componentProps = { themeValues, ...props }
 
   if (dependantProperties.length) {
     return (
@@ -112,15 +91,24 @@ const Control = ({ field, showRemove = false, ...props }: ControlProps) => {
     removeField(fullField)
   }
 
+  const schema = properties[property]
+
+  if (schema.type === 'none') {
+    return null
+  }
+
   return (
-     {
         setField(fullField, newValue)
       }}
-      onRemove={showRemove ? handleRemoveProperty : null}
+      onRemove={showRemove ? handleRemoveProperty : undefined}
+      ruleset={getParentField(fullField)}
       property={property}
-      {...componentProps}
     />
   )
 }
@@ -138,9 +126,8 @@ const ComponentWithPropertyGroup = ({
   showRemove = false,
   ...props
 }: ComponentGroupProps) => {
-  const Component: ComponentType | null = getInputComponent(property)
+  const Component: ComponentType | undefined = getInputComponent(property)
   const { getFields, setFields, removeField } = useEditor()
-
   if (!Component) {
     console.error(`Unknown field: ${property}, ignoring`)
     return null
@@ -174,6 +161,7 @@ interface ControlsProps {
   onChange: (newStyles: any) => void
   children?: ReactNode
   hideResponsiveControls?: boolean
+  showRegenerate?: boolean
   showAddProperties?: boolean
 }
 export const Editor = ({
@@ -181,6 +169,7 @@ export const Editor = ({
   styles,
   onChange,
   children,
+  showRegenerate,
   hideResponsiveControls,
   showAddProperties,
 }: ControlsProps) => {
@@ -198,21 +187,52 @@ export const Editor = ({
     onChange(newData)
   }
 
-  useEffect(() => {
-    if (children) {
-      const defaultStyles = getDefaultsFromChildren(children)
-      // TODO this should be a deep merge when we support defaults for nested
-      onChange({ ...defaultStyles, ...styles })
-    }
-  }, [])
+  const propertyList = useMemo(() => {
+    return getPropertiesFromChildren(children)
+  }, [children])
+
+  const defaultStyles = useMemo(() => {
+    return Object.fromEntries(
+      propertyList
+        .filter((property) => !(styles as any)[property])
+        .map((property) => {
+          return [property, getDefaultValue(property)]
+        })
+    )
+  }, [propertyList])
+
+  const allStyles = { ...defaultStyles, ...styles }
+
+  function regenerateAll(): any {
+    return mapValues(allStyles, (value, property) => {
+      return (
+        properties[property].regenerate?.({
+          theme,
+          previousValue: value,
+          ruleset: allStyles,
+          property,
+        }) ?? value
+      )
+    })
+  }
 
   return (
     
+      {showRegenerate && (
+        

+           onChange(regenerateAll())}
+            sx={{ ml: 'auto' }}
+          >
+            
+          
+        
+      )}
       
         {children}
       
@@ -228,16 +248,51 @@ export const EditorControls = ({
   children,
   showAddProperties,
 }: EditorControlsProps) => {
-  const { value: styles } = useEditor()
-  const properties = sortProperties(uniq(Object.keys(styles)))
-  const controls = children ? children : 
+  const { value: styles, clearAll } = useEditor()
+  const [fieldsets, properties] = partitionProperties(uniq(Object.keys(styles)))
+  const controls = children ? (
+    children
+  ) : (
+    
+  )
+
+  const fieldsetControls = children ? null : (
+    
+  )
 
   return (
-    <>
+    

+      {showAddProperties ? (
+        

+          

+            
+          
+          

+            
+          
+        
+      ) : null}
       {controls}
+      {showAddProperties ? (
+        

+          
+        
+      ) : null}
+      {fieldsetControls}
       {children ?  : null}
-      {showAddProperties ?  : null}
-    
+    
   )
 }
 
@@ -255,34 +310,103 @@ type ControlSetProps = {
 }
 const ControlSet = ({ field, properties }: ControlSetProps) => {
   return (
-    <>
+    

       {properties.map((property) => {
         const fullField = field ? joinPath(field, property) : property
 
         return isFieldsetGroup(property) ? (
-          
+          
         ) : (
           
         )
       })}
-    
+    
   )
 }
 
 type FieldsetControlProps = {
-  field?: KeyArg
-  property: string
+  field: string
 }
-const FieldsetControl = ({ field, property }: FieldsetControlProps) => {
-  const { getField } = useEditor()
-  const styles = getField(field || property)
+const FieldsetControl = ({ field }: FieldsetControlProps) => {
+  const { getField, removeField, setFields } = useEditor()
+  const [argument, setArgument] = useState(getSelectorFunctionArgument(field))
+
+  const styles = getField(field)
   const properties = Object.keys(styles)
+  const label = addPseudoSyntax(field)
+  const rawFieldsetName = getSelectorFunctionName(field)
 
   return (
-    

-      
{removeInternalCSSClassSyntax(property)}
-      
-        
+    

+      

+        

+          {rawFieldsetName}
+          {isSelectorFunction(rawFieldsetName) ? (
+            <>
+              {'('}
+               {
+                  setArgument(e.target.value)
+                }}
+                onBlur={() => {
+                  setFields(
+                    {
+                      [stringifySelectorFunction(rawFieldsetName, argument)]:
+                        styles,
+                    },
+                    [field]
+                  )
+                }}
+              />
+              {')'}
+            
+          ) : null}
+        
+         removeField(field)} />
+      
+      
+        

+          
+        
+        
       
     
   )
@@ -290,229 +414,24 @@ const FieldsetControl = ({ field, property }: FieldsetControlProps) => {
 
 function getInputComponent(property: string) {
   const propertyData = properties[property]
-  if (typeof propertyData.type === 'function') {
-    return propertyData.type
-  }
-  return getPrimitiveInput(propertyData.type)
-}
-
-function getPrimitiveInput(type: string) {
-  switch (type) {
-    case 'keyword':
-      return KeywordInput
-    case 'number':
-      return NumberInput
-    case 'integer':
-      return IntegerInput
-    case 'percentage':
-      return PercentageInput
-    case 'length':
-      return ResponsiveLengthInput
-    case 'multiLength':
-      return MultidimensionLengthInput
-    case 'time':
-      return TimeInput
-    case 'string':
-      return StringInput
-    case 'color':
-      return ColorInput
-    case 'position':
-      return PositionInput
-    case 'none':
-      return null
-    default:
-      return TextInput
-  }
-}
-
-type EditorPropsWithLabel = EditorProps & {
-  label: string
-  responsive: boolean
-}
-const NumberInput = ({
-  value,
-  onChange,
-  onRemove,
-  label,
-  ...props
-}: EditorPropsWithLabel) => {
-  return (
-    
-  )
-}
-
-const IntegerInput = ({
-  value,
-  onChange,
-  onRemove,
-  label,
-  ...props
-}: EditorPropsWithLabel) => {
-  return (
-    
-  )
-}
-
-const PercentageInput = ({
-  value,
-  onChange,
-  onRemove,
-  label,
-  ...props
-}: EditorPropsWithLabel) => {
-  return (
-    
-  )
-}
-
-const ResponsiveLengthInput = ({
-  value,
-  onChange,
-  onRemove,
-  label,
-  property,
-  ...props
-}: EditorPropsWithLabel & { property: string }) => {
-  return (
-    
-  )
-}
-
-const MultidimensionLengthInput = ({
-  value,
-  onChange,
-  onRemove,
-  label,
-  ...props
-}: EditorPropsWithLabel> & {
-  property: string
-}) => {
-  return (
-    
-  )
-}
-
-const DEFAULT_KEYWORD = 'inherit'
-const KeywordInput = ({
-  value,
-  onChange,
-  onRemove,
-  label,
-  keywords,
-  responsive,
-}: EditorPropsWithLabel & { keywords: string[] }) => {
-  if (responsive) {
-    return (
-       onChange(newValue)}
-        defaultValue={DEFAULT_KEYWORD}
-        onRemove={onRemove}
-        Component={SelectInput}
-        componentProps={{
-          options: keywords,
-        }}
-      />
-    )
-  }
-
-  return (
-    
-  )
-}
-
-const TextInput = ({
-  value,
-  onChange,
-  onRemove,
-  label,
-}: EditorPropsWithLabel) => {
-  const id = `${useId()}-${kebabCase(label)}`
-  return (
-    

-      {label}
-      

-         onChange(e.target.value)}
-          sx={{ mr: 1 }}
-        />
-        {onRemove && }
-      
-    
-  )
+  return propertyData.input
 }
 
 /**
- * Extract the defaults from the editor's children
+ * Extract the properties from the editor's children
  */
-function getDefaultsFromChildren(children: ReactNode): Record {
+function getPropertiesFromChildren(children: ReactNode): string[] {
   // Based on: https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/components.tsx#L270
-  let defaults: Record = {}
+  let properties: string[] = []
   Children.forEach(children, (element) => {
     if (!isValidElement(element)) {
       return
     }
     if (element.type === Fragment) {
-      defaults = {
-        ...defaults,
-        ...getDefaultsFromChildren(element.props.children),
-      }
+      properties = [
+        ...properties,
+        ...getPropertiesFromChildren(element.props.children),
+      ]
     }
     // TODO defaults on nested fields
     if (
@@ -520,17 +439,29 @@ function getDefaultsFromChildren(children: ReactNode): Record {
       (element.type as any).displayName
     ) {
       const property = camelCase((element.type as any).displayName)
-      defaults = {
-        ...defaults,
-        [property]: getDefaultValue(property),
-      }
+      properties = [...properties, property]
     }
     if (element.props.children) {
-      defaults = {
-        ...defaults,
-        ...getDefaultsFromChildren(element.props.children),
-      }
+      properties = [
+        ...properties,
+        ...getPropertiesFromChildren(element.props.children),
+      ]
+    }
+  })
+  return properties
+}
+
+export function parseStyles(styles: Record) {
+  return mapValues(styles, (value, property) => {
+    const schema = properties[property]
+    if (!schema) {
+      throw new Error(`Parsing unknown property: ${property}`)
+    }
+
+    const [parsed, rest] = schema.parse!(tokenize(value))
+    if (isNil(parsed) || rest.length > 0) {
+      throw new Error(`Error parsing given value ${value} into ${property}`)
     }
+    return parsed
   })
-  return defaults
 }
diff --git a/packages/gui/src/components/Editor/Fieldset.tsx b/packages/gui/src/components/Editor/Fieldset.tsx
index 8c449a17..1e5660c9 100644
--- a/packages/gui/src/components/Editor/Fieldset.tsx
+++ b/packages/gui/src/components/Editor/Fieldset.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { elements } from '../../data/elements'
 import { pseudoClasses } from '../../data/pseudo-classes'
 import { pseudoElements } from '../../data/pseudo-elements'
-import { getFieldsetPropsFromProperty } from './util'
+import { getFieldsetPropsFromName } from './util'
 
 type PseudoElementTypes = typeof pseudoElements[number]
 type PseudoClassTypes = typeof pseudoClasses[number]
@@ -42,14 +42,9 @@ export const Fieldset = ({ type, name, children }: FieldsetProps) => {
 }
 
 type GenericFieldsetProps = {
-  property: string
+  field: string
   children?: React.ReactNode
 }
-export const GenericFieldset = ({
-  property,
-  children,
-}: GenericFieldsetProps) => {
-  return (
-    
{children}
-  )
+export const GenericFieldset = ({ field, children }: GenericFieldsetProps) => {
+  return 
{children}
 }
diff --git a/packages/gui/src/components/Editor/util.ts b/packages/gui/src/components/Editor/util.ts
index 934192ef..af51b475 100644
--- a/packages/gui/src/components/Editor/util.ts
+++ b/packages/gui/src/components/Editor/util.ts
@@ -1,4 +1,5 @@
 import { partition, sortBy } from 'lodash-es'
+import { properties } from '../../data/properties'
 import {
   addInternalCSSClassSyntax,
   isInternalCSSClass,
@@ -29,9 +30,7 @@ export const isFieldsetGroup = (str: string) => {
   return isPseudo(str) || isElement(str) || isInternalCSSClass(str)
 }
 
-export const getFieldsetPropsFromProperty = (
-  str: string
-): FieldsetContextProps => {
+export const getFieldsetPropsFromName = (str: string): FieldsetContextProps => {
   if (isElement(str)) {
     return {
       type: 'element',
@@ -50,7 +49,18 @@ export const getFieldsetPropsFromProperty = (
   }
 }
 
+export const partitionProperties = (properties: string[]) => {
+  return partition(properties, isFieldsetGroup)
+}
+
 export const sortProperties = (properties: string[]) => {
-  const [fieldsets, props] = partition(properties, isFieldsetGroup)
+  const [fieldsets, props] = partitionProperties(properties)
   return [...sortBy(props), ...sortBy(fieldsets).reverse()]
 }
+
+export function getDefaultValue(property: string) {
+  const propertyDefinition = properties[property] ?? {}
+  // If a default value is defined, return it
+  // @ts-ignore
+  return propertyDefinition.defaultValue
+}
diff --git a/packages/gui/src/components/FieldArray.tsx b/packages/gui/src/components/FieldArray.tsx
index 0f3f8a11..14e3cbda 100644
--- a/packages/gui/src/components/FieldArray.tsx
+++ b/packages/gui/src/components/FieldArray.tsx
@@ -1,193 +1,143 @@
-import { Trash, ChevronUp, ChevronDown } from 'react-feather'
-import { useState, ComponentType, useId, ReactNode } from 'react'
-import * as Collapsible from '@radix-ui/react-collapsible'
-import IconButton from './ui/IconButton'
-import { kebabCase } from 'lodash-es'
-import { Label } from './primitives'
-import { ExpandMarker } from './ui/ExpandMarker'
+import { useState } from 'react'
+import { replace, remove, insert } from '../lib/array'
+import { EditorPropsWithLabel } from '../types/editor'
+import { SchemaInput } from './inputs/SchemaInput'
+import { DataTypeSchema } from './schemas/types'
 
-interface FieldArrayProps {
-  label: string
-  value: T[]
-  onChange(newValue: T[]): void
+export interface FieldArrayProps extends EditorPropsWithLabel {
   /**
    * The component to render each of the individual input values.
    * (See `LayerProps` for what props this takes)
    */
-  content: ComponentType>
-  /** The values that should be populated when a new item is added. */
-  newItem(): T
-  /** How to stringify the contents of the layer */
-  stringify(value: T[]): string
-}
-
-export interface LayerProps {
-  value: T
-  onChange(newValue: T): void
-  label: string
+  itemSchema: DataTypeSchema
+  addItem?(currentValue: T[]): T
 }
 
 /**
  * An alternative field array that is collapsible.
  */
 export default function FieldArray({
-  label,
-  value = [],
-  onChange,
-  content: Content,
-  newItem,
-  stringify,
+  addItem,
+  ...props
 }: FieldArrayProps) {
-  const id = `${useId()}-${kebabCase(label)}`
-  const [open, setOpen] = useState(true)
+  const { label = '', value = [], onChange, itemSchema } = props
+  const [dragIndex, setDragIndex] = useState(-1)
+  const isDragging = dragIndex >= 0
 
-  const handleReorder = (i1: number, i2: number) => {
-    onChange(flip(value, i1, i2))
+  const handleDragDrop = (i1: number, i2: number) => {
+    const item = value[i1]
+    const removed = remove(value, i1)
+    if (i2 > i1) i2--
+    const final = insert(removed, i2, item)
+    onChange(final)
   }
 
   return (
-    

-      
-        

-          {label}
-          
-            
-            {stringify(value)}
-          
-        
-        
+    

+      {value.map((item, i) => {
+        return (
           

-            {value.map((item, i) => {
-              return (
-                

-                   {
-                      onChange(replace(value, i, newValue))
-                    }}
-                    label={'' + i}
-                  />
-                  

-                     {
-                        onChange(remove(value, i))
-                      }}
-                    >
-                      
-                    
-                    

-                       {
-                          if (i > 0) {
-                            handleReorder(i, i - 1)
-                          }
-                        }}
-                      >
-                        
-                      
-                       {
-                          if (i < value.length - 1) {
-                            handleReorder(i, i + 1)
-                          }
-                        }}
-                      >
-                        
-                      
-                    
-                  
-                
-              )
-            })}
-             {
-                onChange(value.concat([newItem()]))
-              }}
+            {isDragging && (
+               {
+                  handleDragDrop(dragIndex, i)
+                  setDragIndex(-1)
+                }}
+              />
+            )}
+            

-              + Add {label.toLowerCase()}
-            
+               {
+                  onChange(replace(value, i, newValue))
+                }}
+                onRemove={() => onChange(remove(value, i))}
+                onDrag={() => {
+                  setDragIndex(i)
+                }}
+                onDragEnd={() => {
+                  setDragIndex(-1)
+                }}
+              />
+            
           
-        
-      
+        )
+      })}
+      {isDragging && (
+         {
+            handleDragDrop(dragIndex, value.length)
+            setDragIndex(-1)
+          }}
+        />
+      )}
+       {
+          const newLayerValue = addItem?.(value) ?? itemSchema.defaultValue
+          onChange(value.concat([newLayerValue]))
+        }}
+        sx={{
+          width: '100%',
+          appearance: 'none',
+          px: 0,
+          py: 2,
+          m: 0,
+          border: '1px solid',
+          borderColor: 'border',
+          borderRadius: '6px',
+          background: 'none',
+          cursor: 'pointer',
+          color: 'text',
+        }}
+      >
+        + Add {label.toLowerCase()}
+      
     
   )
 }
 
-// Return a new array with the given indices flipped
-function flip(array: T[], i1: number, i2: number) {
-  const copy = [...array]
-  copy[i1] = array[i2]
-  copy[i2] = array[i1]
-  return copy
+interface DropZoneProps {
+  onDrop(): void
 }
 
-// Return a new array with the value at the index removed
-function remove(array: T[], index: number) {
-  const copy = [...array]
-  copy.splice(index, 1)
-  return copy
-}
-
-function replace(array: T[], index: number, newValue: T) {
-  const copy = [...array]
-  copy.splice(index, 1, newValue)
-  return copy
+function DropZone({ onDrop }: DropZoneProps) {
+  const [hovered, setHovered] = useState(false)
+  return (
+    

+      
 setHovered(true)}
+        onDragLeave={() => setHovered(false)}
+        onDragOver={(e) => {
+          e.preventDefault()
+        }}
+        onDrop={onDrop}
+      >
+    
+  )
 }
diff --git a/packages/gui/src/components/Layers.tsx b/packages/gui/src/components/Layers.tsx
index 573a97fb..28d6850d 100644
--- a/packages/gui/src/components/Layers.tsx
+++ b/packages/gui/src/components/Layers.tsx
@@ -1,16 +1,14 @@
 import { Trash, ChevronUp, ChevronDown } from 'react-feather'
-import { useState, ComponentType, useId, ReactNode } from 'react'
+import { useState, ComponentType, useId } from 'react'
 import * as Accordion from '@radix-ui/react-accordion'
-import * as Collapsible from '@radix-ui/react-collapsible'
 import IconButton from './ui/IconButton'
 import { kebabCase } from 'lodash-es'
-import { Label } from './primitives'
 import LayerHeader from './LayerHeader'
+import { flip, replace, remove } from '../lib/array'
+import { InputHeader } from './ui/InputHeader'
+import { EditorPropsWithLabel } from '../types/editor'
 
-interface LayersProps {
-  label: string
-  value: T[]
-  onChange(newValue: T[]): void
+interface LayersProps extends EditorPropsWithLabel {
   /**
    * The component to render each of the individual input values.
    * (See `LayerProps` for what props this takes)
@@ -32,15 +30,16 @@ export interface LayerProps {
 /**
  * An alternative field array that is collapsible.
  */
-export default function Layers({
-  label,
-  value = [],
-  onChange,
-  content: Content,
-  stringify,
-  newItem,
-  thumbnail,
-}: LayersProps) {
+export default function Layers(props: LayersProps) {
+  const {
+    label = '',
+    value = [],
+    onChange,
+    content: Content,
+    stringify,
+    newItem,
+    thumbnail,
+  } = props
   const id = `${useId()}-${kebabCase(label)}`
   const [expandedLayer, setExpandedLayer] = useState(-1)
 
@@ -50,190 +49,146 @@ export default function Layers({
 
   return (
     

-      {label}
-      
-        
-          
-        
-        
+      

+         setExpandedLayer(i === '' ? -1 : +i)}
         >
-          

-             setExpandedLayer(i === '' ? -1 : +i)}
-            >
-              {value.map((item, i) => {
-                return (
-                  
-                     {
+            return (
+              
+                
+                  
+                    
+                  
+                  

+                     {
+                        onChange(remove(value, i))
+                        // If the deleted value was expanded, close it
+                        if (i === expandedLayer) {
+                          setExpandedLayer(-1)
+                        } else if (i < expandedLayer) {
+                          // If the deleted value was at a lower index, adjust expanded value accordingly
+                          setExpandedLayer((v) => v - 1)
+                        }
+                      }}
                     >
-                      
-                        
-                      
-                      

-                         {
-                            onChange(remove(value, i))
-                            // If the deleted value was expanded, close it
-                            if (i === expandedLayer) {
-                              setExpandedLayer(-1)
-                            } else if (i < expandedLayer) {
-                              // If the deleted value was at a lower index, adjust expanded value accordingly
-                              setExpandedLayer((v) => v - 1)
-                            }
-                          }}
-                        >
-                          
-                        
-                        

-                           {
-                              if (i > 0) {
-                                handleReorder(i, i - 1)
-                                if (i === expandedLayer) {
-                                  setExpandedLayer(i - 1)
-                                } else if (i - 1 === expandedLayer) {
-                                  setExpandedLayer(i)
-                                }
-                              }
-                            }}
-                          >
-                            
-                          
-                           {
-                              if (i < value.length - 1) {
-                                handleReorder(i, i + 1)
-                              }
-                              if (i === expandedLayer) {
-                                setExpandedLayer(i + 1)
-                              } else if (i + 1 === expandedLayer) {
-                                setExpandedLayer(i)
-                              }
-                            }}
-                          >
-                            
-                          
-                        
-                      
-                    
-                    
+                    
+                    

-                       {
-                          onChange(replace(value, i, newValue))
+                       {
+                          if (i > 0) {
+                            handleReorder(i, i - 1)
+                            if (i === expandedLayer) {
+                              setExpandedLayer(i - 1)
+                            } else if (i - 1 === expandedLayer) {
+                              setExpandedLayer(i)
+                            }
+                          }
                         }}
-                      />
-                    
-                  
-                )
-              })}
-            
-             {
-                onChange(value.concat([newItem()]))
-              }}
-              sx={{
-                width: '100%',
-                appearance: 'none',
-                px: 0,
-                py: 2,
-                m: 0,
-                border: 'none',
-                background: 'none',
-                cursor: 'pointer',
-                color: 'text',
-              }}
-            >
-              + Add {label.toLowerCase()}
-            
-          
-        
-      
+                      >
+                        
+                      
+                       {
+                          if (i < value.length - 1) {
+                            handleReorder(i, i + 1)
+                          }
+                          if (i === expandedLayer) {
+                            setExpandedLayer(i + 1)
+                          } else if (i + 1 === expandedLayer) {
+                            setExpandedLayer(i)
+                          }
+                        }}
+                      >
+                        
+                      
+                    
+                  
+                
+                
+                   {
+                      onChange(replace(value, i, newValue))
+                    }}
+                  />
+                
+              
+            )
+          })}
+        
+         {
+            onChange(value.concat([newItem()]))
+          }}
+          sx={{
+            width: '100%',
+            appearance: 'none',
+            px: 0,
+            py: 2,
+            mt: 2,
+            border: 'none',
+            background: 'none',
+            cursor: 'pointer',
+            color: 'text',
+          }}
+        >
+          + Add {label.toLowerCase()}
+        
+      
     
   )
 }
-
-// Return a new array with the given indices flipped
-function flip(array: T[], i1: number, i2: number) {
-  const copy = [...array]
-  copy[i1] = array[i2]
-  copy[i2] = array[i1]
-  return copy
-}
-
-// Return a new array with the value at the index removed
-function remove(array: T[], index: number) {
-  const copy = [...array]
-  copy.splice(index, 1)
-  return copy
-}
-
-function replace(array: T[], index: number, newValue: T) {
-  const copy = [...array]
-  copy.splice(index, 1, newValue)
-  return copy
-}
diff --git a/packages/gui/src/components/RenderElement.tsx b/packages/gui/src/components/RenderElement.tsx
index 06f2958d..d9012ec6 100644
--- a/packages/gui/src/components/RenderElement.tsx
+++ b/packages/gui/src/components/RenderElement.tsx
@@ -2,6 +2,7 @@ import { HTMLAttributes } from 'react'
 import { toCSSObject } from '../lib'
 import { Styles } from '../types/css'
 import { FontTags } from './inputs/FontFamily/FontTags'
+import { useTheme } from './providers/ThemeContext'
 
 type RenderElementProps = HTMLAttributes & {
   tagName: string
@@ -13,8 +14,9 @@ export const RenderElement = ({
   styles,
   ...props
 }: RenderElementProps) => {
+  const theme = useTheme()
   const Component = tagName
-  const styleObject = toCSSObject(styles)
+  const styleObject = toCSSObject(styles, theme)
 
   return (
     // @ts-ignore
diff --git a/packages/gui/src/components/Responsive/Input.tsx b/packages/gui/src/components/Responsive/Input.tsx
index 038db570..afb74304 100644
--- a/packages/gui/src/components/Responsive/Input.tsx
+++ b/packages/gui/src/components/Responsive/Input.tsx
@@ -1,165 +1,25 @@
-import * as React from 'react'
-import { ToggleRight, ToggleLeft } from 'react-feather'
-import { Breakpoint } from '../../types/theme'
-import { useTheme } from '../providers/ThemeContext'
-import { Label } from '../primitives'
-import { useEditorConfig } from '../providers/EditorConfigContext'
-import { DeletePropButton } from '../inputs/Dimension/Input'
+import { DataTypeSchema } from '../schemas/types'
+import FieldArray from '../FieldArray'
 
-const DEFAULT_BREAKPOINT_COUNT = 3
-
-export type Responsive = T | T[]
+export type Responsive = { type: 'responsive'; values: T[] }
 type ResponsiveInputProps = {
-  value?: Responsive
-  defaultValue: Responsive
+  value: Responsive
   onChange: (newValue: Responsive) => void
-  onRemove?: () => void
-  label: string
-  property?: string
-  // TODO: Type this component
-  Component: React.ComponentType
-  componentProps?: any
+  itemSchema: DataTypeSchema
 }
 export function ResponsiveInput({
   value,
   onChange,
-  onRemove,
-  label,
-  Component,
-  componentProps = {},
-  property,
-  defaultValue,
+  itemSchema,
 }: ResponsiveInputProps) {
-  const { breakpoints } = useTheme()
-  const breakpointCount = breakpoints?.length || DEFAULT_BREAKPOINT_COUNT
-
-  const handleResponsiveChange =
-    (breakpointIndex: number) => (newItemValue: Responsive) => {
-      const newValue: any[] = Array.isArray(value) ? [...value] : []
-      newValue[breakpointIndex] = newItemValue
-      onChange(newValue)
-    }
-
-  const handleChange = (newItemValue: Responsive) => {
-    onChange(newItemValue)
-  }
-
-  const handleSwitchToResponsive = () => {
-    const newValue: any[] = Array(breakpointCount).fill(value ?? null)
-    onChange(newValue)
-  }
-
-  const handleSwitchFromResponsive = () => {
-    const newValue: Responsive | undefined = Array.isArray(value)
-      ? value[0]
-      : value
-    onChange(newValue ?? defaultValue)
-  }
-
-  const isResponsiveControls = Array.isArray(value)
-
-  const editors = isResponsiveControls ? (
-    Array(breakpointCount)
-      .fill(null)
-      .map((_breakpoint: Breakpoint, i: number) => {
-        return (
-          

-            
-          
-        )
-      })
-  ) : (
-    
-  )
-
   return (
-    

-      
-        

-          {label}
-          

-            
-            {onRemove ?  : null}
-          
-        
-      
-      {editors}
-    
-  )
-}
-
-type ResponsiveToggleProps = {
-  isResponsive: boolean
-  onSwitchFromResponsive: () => void
-  onSwitchToResponsive: () => void
-}
-const ResponsiveToggle = ({
-  isResponsive,
-  onSwitchFromResponsive,
-  onSwitchToResponsive,
-}: ResponsiveToggleProps) => {
-  const { hideResponsiveControls } = useEditorConfig()
-
-  if (hideResponsiveControls) {
-    return null
-  }
-
-  return isResponsive ? (
-     {
+        onChange({ ...value, values: newValues })
       }}
-      onClick={onSwitchFromResponsive}
-    >
-      Responsive{' '}
-      
-    
-  ) : (
-    
-      Responsive 
-    
+    />
   )
 }
diff --git a/packages/gui/src/components/html/AttributeEditor.tsx b/packages/gui/src/components/html/AttributeEditor.tsx
deleted file mode 100644
index 951c2a60..00000000
--- a/packages/gui/src/components/html/AttributeEditor.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { X } from 'react-feather'
-import { Label } from '../primitives'
-import IconButton from '../ui/IconButton'
-import { useEffect } from 'react'
-import { Combobox } from '../primitives'
-
-interface AttributeEditorProps {
-  value: Record
-  onChange(value: Record): void
-  element: string
-}
-
-const GLOBAL_ATTRIBUTES = ['class', 'id', 'title']
-const ATTRIBUTE_MAP: Record = {
-  a: [...GLOBAL_ATTRIBUTES, 'href', 'target'],
-  button: ['disabled'],
-  img: [...GLOBAL_ATTRIBUTES, 'src', 'alt'],
-  input: [...GLOBAL_ATTRIBUTES, 'type', 'name', 'disabled', 'required'],
-  h1: GLOBAL_ATTRIBUTES,
-  h2: GLOBAL_ATTRIBUTES,
-  h3: GLOBAL_ATTRIBUTES,
-  h4: GLOBAL_ATTRIBUTES,
-  h5: GLOBAL_ATTRIBUTES,
-  h6: GLOBAL_ATTRIBUTES,
-  p: GLOBAL_ATTRIBUTES,
-  span: GLOBAL_ATTRIBUTES,
-  div: GLOBAL_ATTRIBUTES,
-}
-
-export const AttributeEditor = ({
-  value = {},
-  onChange,
-  element,
-}: AttributeEditorProps) => {
-  useEffect(() => {
-    handleElementChange()
-  }, [element])
-
-  const handleElementChange = () => {
-    const newAttributes = Object.entries(value).reduce(
-      (acc: any, [k, v]: any) => {
-        return ATTRIBUTE_MAP[element].includes(k) ? { ...acc, [k]: v } : acc
-      },
-      {}
-    )
-
-    onChange(newAttributes)
-  }
-
-  const handleFilterItems = (input: string) => {
-    return ATTRIBUTE_MAP[element].filter((item) => {
-      if (item.toLowerCase().startsWith(input.toLowerCase() || '')) {
-        return !Object.keys(value).includes(item)
-      }
-    })
-  }
-
-  const handleItemSelected = (selectedItem: string) => {
-    onChange({ ...value, [selectedItem]: '' })
-  }
-
-  const handleItemRemoved = (removedItem: string) => {
-    const newValue = { ...value }
-    delete newValue[removedItem]
-    onChange(newValue)
-  }
-
-  return (
-    

-      {/* @ts-ignore */}
-      {Object.entries(value).map(([key, attrValue]) => {
-        return (
-          

-            
-              {key}
-               onChange({ ...value, [key]: e.target.value })}
-              />
-            
-             handleItemRemoved(key)}>
-              
-            
-          
-        )
-      })}
-      Add Attribute
-      
-    
-  )
-}
diff --git a/packages/gui/src/components/html/CanvasProvider.tsx b/packages/gui/src/components/html/CanvasProvider.tsx
new file mode 100644
index 00000000..c9790142
--- /dev/null
+++ b/packages/gui/src/components/html/CanvasProvider.tsx
@@ -0,0 +1,94 @@
+import { createContext, MouseEvent, ReactNode, useContext } from 'react'
+import { toCSSObject } from '../../lib/codegen/to-css-object'
+import { toReactProps } from '../../lib/codegen/to-react-props'
+import { useTheme } from '../providers/ThemeContext'
+import { useHtmlEditor } from './Provider'
+import { ComponentData, ElementPath, HtmlNode } from './types'
+import { cleanAttributesForCanvas, isSamePath } from './util'
+
+const DEFAULT_CANVAS_VALUE = {}
+const DEFAULT_ELEMENT_STYLES_IN_CANVAS = {
+  cursor: 'default',
+}
+
+type CanvasProviderType = {
+  canvas?: boolean
+}
+
+export type CanvasElementProps = {
+  path: ElementPath
+  value: HtmlNode
+  component?: ComponentData
+  onClick?(e: MouseEvent): void
+}
+
+export function useCanvas() {
+  const context = useContext(CanvasContext)
+  return context
+}
+
+export function useCanvasProps({
+  path,
+  value,
+  component,
+  onClick,
+}: CanvasElementProps) {
+  const { canvas } = useContext(CanvasContext)
+  const { selected, setSelected } = useHtmlEditor()
+  const theme = useTheme()
+
+  const { attributes = {}, style = {} } = value
+
+  const sx = toCSSObject(
+    {
+      ...(canvas ? DEFAULT_ELEMENT_STYLES_IN_CANVAS : {}),
+      ...style,
+    },
+    theme
+  )
+
+  if (isSamePath(path, selected) && canvas) {
+    sx.outlineWidth = 'thin'
+    sx.outlineStyle = 'solid'
+    sx.outlineColor = 'primary'
+    sx.outlineOffset = '4px'
+    sx.userSelect = 'none'
+  }
+
+  const handleSelect = (e: MouseEvent) => {
+    if (!canvas) {
+      return
+    }
+
+    if (onClick) {
+      return onClick(e)
+    }
+
+    e.stopPropagation()
+    setSelected(path)
+  }
+
+  const props = toReactProps({
+    ...(canvas ? cleanAttributesForCanvas(attributes) : attributes),
+    ...(canvas ? { 'data-path': path.join('-') } : {}),
+    sx,
+    outerProps: component?.props,
+    onClick: handleSelect,
+  })
+
+  return props
+}
+
+const CanvasContext = createContext(DEFAULT_CANVAS_VALUE)
+
+type CanvasProviderProps = CanvasProviderType & {
+  children: ReactNode
+}
+
+export function CanvasProvider({ children, canvas }: CanvasProviderProps) {
+  return (
+    
+      {children}
+    
+  )
+}
diff --git a/packages/gui/src/components/html/Component/Editor.tsx b/packages/gui/src/components/html/Component/Editor.tsx
new file mode 100644
index 00000000..8cd2a72e
--- /dev/null
+++ b/packages/gui/src/components/html/Component/Editor.tsx
@@ -0,0 +1,171 @@
+import { ChangeEvent } from 'react'
+import fuzzysort from 'fuzzysort'
+import { sample } from 'lodash-es'
+import { RefreshCw } from 'react-feather'
+import { Label, Combobox } from '../../primitives'
+import { ComponentData, Slot } from '../types'
+import { useHtmlEditor } from '../Provider'
+import { getSlots, isSlot } from '../../../lib/codegen/util'
+import { mergeComponentAttributes } from './util'
+import IconButton from '../../ui/IconButton'
+
+interface ComponentEditorProps {
+  value: ComponentData
+  onChange(value: ComponentData): void
+}
+
+export const ComponentEditor = ({ value, onChange }: ComponentEditorProps) => {
+  const { components = [] } = useHtmlEditor()
+
+  const componentIds = components.map((c) => c.id)
+  const componentNames = components.map((c) => c.tagName)
+  const componentProps = value.props || {}
+  const slots = getSlots(value.value)
+  const attributes = mergeComponentAttributes(value)
+  const attributeEntries = Object.entries(attributes)
+
+  const handleFilterComponents = (input: string) => {
+    if (!input) {
+      return componentIds
+    }
+
+    return fuzzysort
+      .go(input, componentNames)
+      .map((res) => res.target)
+      .map((name) => components.find((c) => c.tagName === name)?.id ?? name)
+  }
+
+  const handleComponentSelected = (selectedItem: string) => {
+    const component = components.find((c) => c.id === selectedItem)
+
+    if (component) {
+      onChange({
+        ...component,
+        props: value.props,
+        children: value.children,
+      })
+    }
+  }
+
+  const handlePropChange =
+    (name: string) => (e: ChangeEvent) => {
+      onChange({
+        ...value,
+        props: {
+          ...componentProps,
+          [name]: e.target.value,
+        },
+      })
+    }
+
+  const handleAttributeChange =
+    (name: string) => (e: ChangeEvent) => {
+      onChange({
+        ...value,
+        attributes: {
+          ...attributes,
+          [name]: e.target.value,
+        },
+      })
+    }
+
+  const handleSwap = () => {
+    const newComponentId = sample(value.swappableComponentIds || [])
+    const newComponent = components.find((c) => c.id === newComponentId)
+
+    if (!newComponentId || !newComponent) {
+      return
+    }
+
+    onChange({
+      ...value,
+      id: newComponentId,
+      tagName: newComponent.tagName,
+      value: newComponent.value,
+      swappableComponentIds: newComponent.swappableComponentIds,
+    })
+  }
+
+  return (
+    

+      

+        Component
+        
+           {
+              return components.find((c) => c.id === id)?.tagName ?? id
+            }}
+            items={componentIds}
+          />
+          {value.swappableComponentIds?.length ? (
+            
+              
+            
+          ) : null}
+        
+      
+      

+        
Props
+        {slots.map((slot, index) => {
+          return (
+            

+              {slot.name}
+              
+            
+          )
+        })}
+        {attributeEntries.length ? (
+          <>
+            {attributeEntries.map((entry) => {
+              const [key, rawValue] = entry
+
+              const val = isSlot(rawValue as Slot)
+                ? (rawValue as Slot).value
+                : rawValue
+
+              return (
+                

+                  
+                    {key}
+                    

+                      
+                    
+                  
+                
+              )
+            })}
+          
+        ) : null}
+      
+    
+  )
+}
diff --git a/packages/gui/src/components/html/Component/Provider.tsx b/packages/gui/src/components/html/Component/Provider.tsx
new file mode 100644
index 00000000..45d0df51
--- /dev/null
+++ b/packages/gui/src/components/html/Component/Provider.tsx
@@ -0,0 +1,92 @@
+import { createContext, ReactNode, useContext } from 'react'
+import { useHtmlEditor } from '../Provider'
+import { ComponentData, ElementPath, HtmlNode, Slot } from '../types'
+import { setChildAtPath } from '../util'
+import { updateSlotForComponentInstance } from './util'
+
+const DEFAULT_COMPONENT_VALUE = {}
+
+type ComponentProviderType = {
+  value?: ComponentData
+  path?: ElementPath
+  selectComponent?(e: MouseEvent): void
+  updateComponent?(path: ElementPath, newItem: HtmlNode): void
+  updateComponentSlot?(newSlotValue: HtmlNode): void
+}
+
+export function useComponent() {
+  const context = useContext(ComponentContext)
+  return context
+}
+
+const ComponentContext = createContext(
+  DEFAULT_COMPONENT_VALUE
+)
+
+type ComponentProviderProps = {
+  value: ComponentData
+  path: ElementPath
+  children: ReactNode
+}
+
+export function ComponentProvider({
+  value,
+  path,
+  children,
+}: ComponentProviderProps) {
+  const {
+    setSelected,
+    value: fullValue,
+    update,
+    components,
+    updateComponent: emitUpdatedComponent,
+  } = useHtmlEditor()
+  const selectComponent = (e: MouseEvent) => {
+    e.stopImmediatePropagation()
+    setSelected(path)
+  }
+
+  const updateComponent = (fullEditPath: ElementPath, newValue: HtmlNode) => {
+    const component = components!.find((c) => c.id === value.id)!
+    const editPath = fullEditPath.slice(path.length)
+
+    const newComponentValue = setChildAtPath(value.value, editPath, newValue)
+    const newComponent = {
+      ...component,
+      value: newComponentValue,
+    }
+
+    const newFullValue = setChildAtPath(fullValue, path, {
+      ...value,
+      value: newComponentValue,
+    })
+
+    update(newFullValue)
+    emitUpdatedComponent?.(newComponent)
+  }
+
+  const updateComponentSlot = (newValue: HtmlNode) => {
+    const fullComponent = updateSlotForComponentInstance(
+      value,
+      newValue as Slot
+    )
+
+    // @ts-ignore
+    const newFullValue = setChildAtPath(fullValue, path, fullComponent)
+    update(newFullValue)
+  }
+
+  return (
+    
+      {children}
+    
+  )
+}
diff --git a/packages/gui/src/components/html/Component/SlotProvider.tsx b/packages/gui/src/components/html/Component/SlotProvider.tsx
new file mode 100644
index 00000000..f5de0e66
--- /dev/null
+++ b/packages/gui/src/components/html/Component/SlotProvider.tsx
@@ -0,0 +1,30 @@
+import { createContext, ReactNode, useContext } from 'react'
+import { ElementPath, Slot } from '../types'
+
+const DEFAULT_SLOT_VALUE = {}
+
+type SlotProviderType = {
+  value?: Slot
+  path?: ElementPath
+}
+
+export function useSlot() {
+  const context = useContext(SlotContext)
+  return context
+}
+
+const SlotContext = createContext(DEFAULT_SLOT_VALUE)
+
+type SlotProviderProps = {
+  value: Slot
+  path: ElementPath
+  children: ReactNode
+}
+
+export function SlotProvider({ value, path, children }: SlotProviderProps) {
+  return (
+    
+      {children}
+    
+  )
+}
diff --git a/packages/gui/src/components/html/Component/index.ts b/packages/gui/src/components/html/Component/index.ts
new file mode 100644
index 00000000..23518ca5
--- /dev/null
+++ b/packages/gui/src/components/html/Component/index.ts
@@ -0,0 +1,2 @@
+export * from './Provider'
+export * from './Editor'
diff --git a/packages/gui/src/components/html/Component/util.ts b/packages/gui/src/components/html/Component/util.ts
new file mode 100644
index 00000000..59f46b25
--- /dev/null
+++ b/packages/gui/src/components/html/Component/util.ts
@@ -0,0 +1,24 @@
+import { ComponentData, Slot } from '../types'
+
+export const mergeComponentAttributes = (value: ComponentData) => {
+  const attributes = {
+    ...(value.value.attributes || {}),
+    ...(value.attributes || {}),
+  }
+
+  return attributes
+}
+
+export const updateSlotForComponentInstance = (
+  value: ComponentData,
+  slotValue: Slot
+) => {
+  const props = value.props || {}
+  return {
+    ...value,
+    props: {
+      ...props,
+      [slotValue.name]: slotValue.value,
+    },
+  }
+}
diff --git a/packages/gui/src/components/html/Editor.tsx b/packages/gui/src/components/html/Editor.tsx
new file mode 100644
index 00000000..b78de0cb
--- /dev/null
+++ b/packages/gui/src/components/html/Editor.tsx
@@ -0,0 +1,184 @@
+import { Editor } from '../Editor'
+import * as Tabs from '@radix-ui/react-tabs'
+import { Code, Layers, LogIn } from 'react-feather'
+import { useHtmlEditor } from './Provider'
+import { getChildAtPath, removeChildAtPath, setChildAtPath } from './util'
+import { Export } from './Export'
+import { useTheme } from '../providers/ThemeContext'
+import { NodeEditor } from './Editors/NodeEditor'
+import { TreeNode } from './TreeNode'
+import { Import } from './Import'
+import { isText } from '../../lib/codegen/util'
+
+const TABS_TRIGGER_STYLES: any = {
+  all: 'unset',
+  cursor: 'pointer',
+  fontSize: 0,
+  fontWeight: 500,
+  px: 3,
+  py: 1,
+  my: 2,
+  borderRadius: '6px',
+  color: 'muted',
+  display: 'inline-flex',
+  gap: '.5em',
+  alignItems: 'center',
+  filter: 'grayscale(100%)',
+  transition: 'all .2s ease-in-out',
+  '&[data-state="active"]': {
+    color: 'text',
+    filter: 'grayscale(0%)',
+    bg: 'backgroundOffset',
+  },
+  ':hover': {
+    color: 'text',
+    filter: 'grayscale(0%)',
+  },
+}
+const TABS_CONTENT_STYLES: any = {
+  width: 400,
+  height: 'calc(100vh - 97px)',
+  maxHeight: '100%',
+  overflow: 'hidden',
+  resize: 'horizontal',
+  borderRightWidth: '1px',
+  borderRightStyle: 'solid',
+  borderColor: 'border',
+  '&::-webkit-scrollbar': { display: 'none' },
+  scrollbarWidth: 0,
+}
+
+const TABS_EDITOR_STYLES: any = {
+  width: '400px',
+  height: 'calc(100vh - 97px)',
+  maxHeight: '100%',
+  overflow: 'hidden',
+  resize: 'horizontal',
+  borderRightWidth: '1px',
+  borderRightStyle: 'solid',
+  borderRightColor: 'border',
+  '&::-webkit-scrollbar': { display: 'none' },
+  scrollbarWidth: 0,
+}
+
+/**
+ * An HTML tree-based editor that lets you add HTML nodes and mess around with their styles
+ */
+export function HtmlEditor() {
+  const {
+    value,
+    update: onChange,
+    selected: providedSelected,
+    setSelected,
+  } = useHtmlEditor()
+  const theme = useTheme()
+
+  const selected = providedSelected || []
+  const nodeValue = getChildAtPath(value, selected)
+
+  let nodeForStyleEditor = nodeValue
+  const stylePath = [...selected]
+  if (isText(nodeValue)) {
+    stylePath.pop()
+    nodeForStyleEditor = getChildAtPath(value, stylePath)
+  }
+
+  return (
+    

+      
+        
+          
+            🎨 Editor
+          
+          
+             Import
+          
+          
+             Export
+          
+        
+        
+          

+             {
+                const newItem = { ...nodeForStyleEditor, style: newStyles }
+                onChange(setChildAtPath(value, stylePath, newItem))
+              }}
+              showRegenerate
+              showAddProperties
+            />
+          
+          
 Layers
+            

+            
+                onChange(setChildAtPath(value, selected, newItem))
+              }
+              onParentChange={(newItem) => {
+                const parentPath = [...(selected || [])]
+                parentPath.pop()
+                const newValue = setChildAtPath(value, parentPath, newItem)
+                onChange(newValue)
+              }}
+              onRemove={() => {
+                onChange(removeChildAtPath(value, selected))
+                const newPath = [...selected]
+                newPath.pop()
+                setSelected(newPath)
+              }}
+            />
+            

+              

+                
+              
+            
+            
+        
+        
+          
+        
+        
+          
+        
+      
+    

+  )
+}
diff --git a/packages/gui/src/components/html/Editors/AttributeEditor.tsx b/packages/gui/src/components/html/Editors/AttributeEditor.tsx
new file mode 100644
index 00000000..295254be
--- /dev/null
+++ b/packages/gui/src/components/html/Editors/AttributeEditor.tsx
@@ -0,0 +1,199 @@
+import { X } from 'react-feather'
+import { Label } from '../../primitives'
+import IconButton from '../../ui/IconButton'
+import { ChangeEvent, useEffect } from 'react'
+import { Combobox } from '../../primitives'
+import { ATTRIBUTE_MAP } from '../../../data/attributes'
+import { isSlot } from '../../../lib/codegen/util'
+import { Slot } from '../types'
+
+interface AttributeEditorProps {
+  value: Record
+  onChange(value: Record): void
+  element: string
+}
+
+export const AttributeEditor = ({
+  value = {},
+  onChange,
+  element,
+}: AttributeEditorProps) => {
+  useEffect(() => {
+    handleElementChange()
+  }, [element])
+
+  const handleElementChange = () => {
+    const newAttributes = Object.entries(value).reduce(
+      (acc: any, [k, v]: any) => {
+        return ATTRIBUTE_MAP[element].includes(k) ? { ...acc, [k]: v } : acc
+      },
+      {}
+    )
+
+    onChange(newAttributes)
+  }
+
+  const handleFilterItems = (input: string) => {
+    return ATTRIBUTE_MAP[element].filter((item) => {
+      if (item.toLowerCase().startsWith(input.toLowerCase() || '')) {
+        return !Object.keys(value).includes(item)
+      }
+    })
+  }
+
+  const handleItemSelected = (selectedItem: string) => {
+    onChange({ ...value, [selectedItem]: '' })
+  }
+
+  const handleItemRemoved = (removedItem: string) => {
+    const newValue = { ...value }
+    delete newValue[removedItem]
+    onChange(newValue)
+  }
+
+  const handleSlotToggle = (key: string) => {
+    const val = value[key]
+    const slotValue = val as unknown as Slot
+
+    if (isSlot(slotValue)) {
+      onChange({
+        ...value,
+        [key]: slotValue.value as string,
+      })
+    } else {
+      onChange({
+        ...value,
+        [key]: {
+          type: 'slot',
+          name: key,
+          value: val as string,
+        },
+      })
+    }
+  }
+
+  return (
+    

+      

+        Add attribute
+        
+      
+      {/* @ts-ignore */}
+      {Object.entries(value).map(([key, attrValue]) => {
+        if (isSlot(attrValue as unknown as Slot)) {
+          return (
+            
+                onChange({ ...value, [key]: newValue })
+              }
+              onRemove={() => handleItemRemoved(key)}
+              onSlot={() => handleSlotToggle(key)}
+            />
+          )
+        }
+
+        return (
+           onChange({ ...value, [key]: e.target.value })}
+            onRemove={() => handleItemRemoved(key)}
+            onSlot={() => handleSlotToggle(key)}
+          />
+        )
+      })}
+    
+  )
+}
+
+interface StringAttributeEditorProps {
+  name: string
+  value: string
+  onChange(e: ChangeEvent): void
+  onRemove(): void
+  onSlot(): void
+}
+const StringAttributeEditor = ({
+  name,
+  value,
+  onChange,
+  onRemove,
+  onSlot,
+}: StringAttributeEditorProps) => {
+  return (
+    

+      
+        {name}
+        

+          
+          
+            
+          
+          Make slot
+        
+      
+    
+  )
+}
+
+interface SlotAttributeEditorProps {
+  name: string
+  value: Slot
+  onChange(newValue: Slot): void
+  onRemove(): void
+  onSlot(): void
+}
+const SlotAttributeEditor = ({
+  name,
+  value,
+  onChange,
+  onRemove,
+  onSlot,
+}: SlotAttributeEditorProps) => {
+  return (
+    

+      {name}
+      
+        Name
+        

+          
+              onChange({
+                ...value,
+                name: e.target.value,
+              })
+            }
+          />
+        
+      
+      
+        Value
+        

+          
+              onChange({
+                ...value,
+                value: e.target.value,
+              })
+            }
+          />
+          
+            
+          
+          Make string
+        
+      
+    
+  )
+}
diff --git a/packages/gui/src/components/html/Editors/NodeEditor.tsx b/packages/gui/src/components/html/Editors/NodeEditor.tsx
new file mode 100644
index 00000000..10af647c
--- /dev/null
+++ b/packages/gui/src/components/html/Editors/NodeEditor.tsx
@@ -0,0 +1,230 @@
+import fuzzysort from 'fuzzysort'
+import { Layers } from 'react-feather'
+import { HtmlNode } from '../types'
+import { Label, Combobox } from '../../primitives'
+import { SelectInput } from '../../inputs/SelectInput'
+import { AttributeEditor } from './AttributeEditor'
+import { DEFAULT_ATTRIBUTES, DEFAULT_STYLES } from '../default-styles'
+import { useHtmlEditor } from '../Provider'
+import { addChildAtPath, getChildAtPath } from '../util'
+import { NodeEditorDropdown } from '../../ui/dropdowns/NodeEditorDropdown'
+import { ComponentEditor } from '../Component'
+import { SlotEditor } from './SlotEditor'
+import { HTML_TAGS } from '../data'
+import { useNodeTypes } from './util'
+import { isProseElement } from '../../../lib/elements'
+
+interface EditorProps {
+  value: HtmlNode
+  onChange(value: HtmlNode): void
+}
+
+interface TagEditorProps extends EditorProps {
+  onRemove(): void
+  onParentChange?(parentValue: HtmlNode): void
+}
+
+export function NodeEditor({
+  value,
+  onChange,
+  onRemove,
+  onParentChange,
+}: TagEditorProps) {
+  const { value: fullValue, selected, components } = useHtmlEditor()
+  let nodeType = value.type === 'text' ? 'text' : 'tag'
+  if (value.type === 'component') {
+    nodeType = 'component'
+  } else if (value.type === 'slot') {
+    nodeType = 'slot'
+  }
+
+  const nodeTypes = useNodeTypes()
+
+  return (
+    

+      

+        

+           {
+              if (newType === 'text') {
+                onChange({ type: 'text', value: '' })
+              } else if (newType === 'component') {
+                const firstComponent = components?.[0]
+
+                if (firstComponent) {
+                  onChange({
+                    ...firstComponent,
+                    props: value.props,
+                    children: value.children,
+                  })
+                }
+              } else if (newType === 'slot') {
+                onChange({
+                  type: 'slot',
+                  name: 'newSlot',
+                  value: 'Hello, world!',
+                })
+              } else {
+                onChange({
+                  type: 'element',
+                  tagName: 'div',
+                  props: value.props,
+                  children: value.children ?? [],
+                })
+              }
+            }}
+            options={nodeTypes}
+          />
+        
+        

+           {
+              const parentPath = [...(selected || [])]
+              const childIndex = parentPath.pop() // Remove child from parent path
+
+              const parent = getChildAtPath(fullValue, parentPath)
+              const newParent = addChildAtPath(parent, [childIndex ?? 0], {
+                ...value,
+              })
+
+              const onChangeForParent = onParentChange
+                ? onParentChange
+                : onChange
+              onChangeForParent(newParent)
+            }}
+            onWrap={() => {
+              const wrappedNode: HtmlNode = {
+                type: 'element',
+                tagName: 'div',
+                children: [value],
+              }
+              return onChange(wrappedNode)
+            }}
+          />
+        
+      
+      
+    
+  )
+}
+
+function NodeSwitch({ value, onChange }: EditorProps) {
+  const { selected } = useHtmlEditor()
+
+  if (value.type === 'text') {
+    return (
+      

+        
+          Content
+          +              onChange({
+                ...value,
+                value: e.target.value,
+              })
+            }
+          />
+        </Label>
+      </div>
+    )
+  }
+
+  if (value.type === 'component') {
+    return <ComponentEditor value={value} onChange={onChange} />
+  }
+
+  if (value.type === 'slot') {
+    return <SlotEditor value={value} onChange={onChange} />
+  }
+
+  const tagKey = [...(selected || []), value.tagName || ''].join('-')
+
+  return (
+      <article
+        sx={{
+          pb: 4,
+        }}
+      >
+        <div sx={{ px: 3, mb: 2 }}>
+          <Label>Element</Label>{' '}
+          <Combobox
+            key={tagKey}
+            onFilterItems={(filterValue) => {
+              if (!filterValue) {
+                return HTML_TAGS
+              }
+
+              return fuzzysort
+                .go(filterValue, HTML_TAGS)
+                .map((res) => res.target)
+            }}
+            onItemSelected={(selectedItem) => {
+              const defaultStyles = DEFAULT_STYLES[selectedItem] || {}
+              const mergedStyles = { ...defaultStyles, ...value.style }
+              const defaultAttributes = DEFAULT_ATTRIBUTES[selectedItem] || {}
+              const mergedAttributes = {
+                ...defaultAttributes,
+                ...(value.attributes || {}),
+              }
+              const fullValue = {
+                ...value,
+                attributes: mergedAttributes,
+                tagName: selectedItem,
+                style: mergedStyles,
+              }
+              if (isProseElement(selectedItem) && !fullValue.children?.length) {
+                fullValue.children = [{ type: 'text', value: '' }]
+              }
+              onChange(fullValue)
+            }}
+            items={HTML_TAGS}
+            value={value.tagName}
+          />
+        </div>
+        <div>
+          <AttributeEditor
+            value={value.attributes ?? {}}
+            onChange={(newAttributes) =>
+              onChange({ ...value, attributes: newAttributes })
+            }
+            element={value.tagName as string}
+          />
+        </div>
+      </article>
+  )
+}
diff --git a/packages/gui/src/components/html/Editors/SlotEditor.tsx b/packages/gui/src/components/html/Editors/SlotEditor.tsx
new file mode 100644
index 00000000..7197bd21
--- /dev/null
+++ b/packages/gui/src/components/html/Editors/SlotEditor.tsx
@@ -0,0 +1,33 @@
+import { Label } from '../../primitives'
+import { Slot } from '../types'
+import { ChangeEvent } from 'react'
+
+interface SlotEditorProps {
+  value: Slot
+  onChange(value: Slot): void
+}
+
+export const SlotEditor = ({ value, onChange }: SlotEditorProps) => {
+  const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...value, name: e.target.value })
+  }
+
+  const handleDefaultValueChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...value, value: e.target.value })
+  }
+
+  return (
+    <div>
+      <div sx={{ px: 3, pb: 3 }}>
+        <Label>Prop name</Label>
+        <input type="text" value={value.name} onChange={handleNameChange} />
+        <Label>Default Value</Label>
+        <input
+          type="text"
+          value={value.value ?? ''}
+          onChange={handleDefaultValueChange}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/packages/gui/src/components/html/Editors/index.ts b/packages/gui/src/components/html/Editors/index.ts
new file mode 100644
index 00000000..b5c6689a
--- /dev/null
+++ b/packages/gui/src/components/html/Editors/index.ts
@@ -0,0 +1,3 @@
+export * from './AttributeEditor'
+export * from './NodeEditor'
+export * from './SlotEditor'
diff --git a/packages/gui/src/components/html/Editors/util.ts b/packages/gui/src/components/html/Editors/util.ts
new file mode 100644
index 00000000..d5d83aa9
--- /dev/null
+++ b/packages/gui/src/components/html/Editors/util.ts
@@ -0,0 +1,8 @@
+import { useHtmlEditor } from '../Provider'
+
+export const useNodeTypes = () => {
+  const { hasComponents } = useHtmlEditor()
+
+  const baseNodeTypes = ['text', 'tag']
+  return hasComponents ? [...baseNodeTypes, 'component', 'slot'] : baseNodeTypes
+}
diff --git a/packages/gui/src/components/html/Export.tsx b/packages/gui/src/components/html/Export.tsx
new file mode 100644
index 00000000..974859a8
--- /dev/null
+++ b/packages/gui/src/components/html/Export.tsx
@@ -0,0 +1,130 @@
+import { startCase } from 'lodash-es'
+import { useEffect, useState } from 'react'
+import { Copy } from 'react-feather'
+import { codegen } from '../../lib'
+import { extractStyles } from '../../lib/codegen/extract-styles'
+import { useCopyToClipboard } from '../../useCopyToClipboard'
+import { HtmlNode } from './types'
+
+const PRE_STYLES = {
+  overflow: 'auto',
+  height: '80vh',
+  border: 'thin solid',
+  borderColor: 'border',
+  backgroundColor: 'rgba(0, 0, 0, 0.02)',
+  p: 2,
+  m: 3,
+}
+
+const CODEGEN_DISPLAY_NAMES: Record<string, string> = {
+  css: 'CSS',
+  html: 'HTML + CSS',
+  unstyledHtml: 'HTML',
+  themeUI: 'Theme UI',
+  styledJsx: 'Styled JSX',
+}
+
+type ExportProps = {
+  value: HtmlNode
+  theme?: any
+}
+export const Export = ({ value, theme }: ExportProps) => {
+  const [src, setSrc] = useState<string | null>(null)
+  const [loading, setLoading] = useState<boolean>(true)
+  const [copied, setCopied] = useState<boolean>(true)
+  const [format, setFormat] = useState<string>('html')
+  const copyToClipboard = useCopyToClipboard()
+
+  useEffect(() => {
+    setLoading(true)
+    setSrc('')
+
+    // @ts-ignore
+    let gen = codegen[format]
+    if (format === 'css') {
+      gen = codegen.html
+    }
+
+    gen(value, { theme }).then((v: string) => {
+      setLoading(false)
+
+      if (format === 'css') {
+        return extractStyles(v).then((res) => {
+          setSrc(res.styles)
+        })
+      }
+
+      setSrc(v)
+    })
+  }, [value, format])
+
+  useEffect(() => {
+    if (!copied) {
+      return
+    }
+
+    const clearCopiedTimer = setTimeout(() => setCopied(false), 1000)
+    return () => clearTimeout(clearCopiedTimer)
+  }, [copied])
+
+  const handleCopyToClipboard = () => {
+    copyToClipboard(src)
+    setCopied(true)
+  }
+
+  if (loading) {
+    return <pre sx={PRE_STYLES}>Exporting...</pre>
+  }
+
+  return (
+    <>
+      <pre sx={PRE_STYLES}>{src}</pre>
+      <div sx={{ px: 3, pb: 4, display: 'flex', alignItems: 'center' }}>
+        <select
+          value={format}
+          onChange={(e) => setFormat(e.target.value)}
+          sx={{
+            mr: 2,
+            px: 1,
+            py: 1,
+          }}
+        >
+          {Object.keys(codegen).map((f) => {
+            return (
+              <option key={f} value={f}>
+                {CODEGEN_DISPLAY_NAMES[f] ?? startCase(f)}
+              </option>
+            )
+          })}
+        </select>
+        <button
+          sx={{
+            appearance: 'none',
+            WebkitAppearance: 'none',
+            boxSizing: 'border-box',
+            border: '0',
+            borderRadius: '6px',
+            color: '#fff',
+            bg: '#6465ff',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: 1,
+            fontWeight: 500,
+            width: '100%',
+            px: 3,
+            py: 2,
+            cursor: 'pointer',
+            '&:hover': {
+              bg: '#4e4fec',
+            },
+          }}
+          onClick={handleCopyToClipboard}
+        >
+          <Copy size={14} sx={{ mr: 2 }} />
+          {copied ? 'Copied to clipboard!' : 'Copy to clipboard'}
+        </button>
+      </div>
+    </>
+  )
+}
diff --git a/packages/gui/src/components/html/FontTags.tsx b/packages/gui/src/components/html/FontTags.tsx
new file mode 100644
index 00000000..b2a7f0c7
--- /dev/null
+++ b/packages/gui/src/components/html/FontTags.tsx
@@ -0,0 +1,104 @@
+import { debounce, uniq } from 'lodash-es'
+import { useEffect, useState } from 'react'
+import { stringifyFontFamily } from '../../lib/stringify'
+import { Theme } from '../../types/theme'
+import {
+  buildFontFamiliesHref,
+  buildVariableFontFamiliesHref,
+} from '../inputs/FontFamily/FontTags'
+import { useTheme } from '../providers/ThemeContext'
+
+export function getStyleFonts(style: any, theme?: Theme): string[] {
+  if (!style) return []
+  let fonts: string[] = []
+
+  if (style.fontFamily) {
+    fonts.push(style.fontFamily)
+  }
+
+  for (const [_, v] of Object.entries(style)) {
+    if (typeof v === 'object') {
+      fonts = [...fonts, ...getStyleFonts(v)]
+    }
+  }
+
+  return uniq(fonts).map((font) => stringifyFontFamily(font, theme))
+}
+
+export function getHTMLTreeFonts(root: any, theme?: Theme): string[] {
+  if (!root) return []
+  let treeFonts: any[] = []
+
+  if (root.style) {
+    treeFonts = [...getStyleFonts(root.style)]
+  }
+
+  if (root.type === 'component' && root.value) {
+    return [...treeFonts, ...getHTMLTreeFonts(root.value, theme)]
+  }
+
+  if (!root.children) {
+    return treeFonts
+  }
+
+  for (const node of root.children) {
+    if (node.type !== 'text') {
+      treeFonts = [...treeFonts, ...getHTMLTreeFonts(node, theme)]
+    }
+  }
+
+  return uniq(treeFonts).map((font) => stringifyFontFamily(font, theme))
+}
+
+interface BuildHrefProps {
+  tree: any
+  style: any
+  setStaticHref: Function
+  setVariableHref: Function
+  theme?: Theme
+}
+async function buildHrefs({
+  tree,
+  style,
+  setStaticHref,
+  setVariableHref,
+  theme,
+}: BuildHrefProps) {
+  const fonts = style
+    ? getStyleFonts(style, theme)
+    : getHTMLTreeFonts(tree, theme)
+  const staticHref = await buildFontFamiliesHref(fonts)
+  const variableHref = await buildVariableFontFamiliesHref(fonts)
+
+  setStaticHref(staticHref)
+  setVariableHref(variableHref)
+}
+
+const debouncedBuildHref = debounce(buildHrefs, 1500)
+
+interface Props {
+  htmlTree: any
+  style?: any
+}
+export function HTMLFontTags({ htmlTree = {}, style }: Props) {
+  const theme = useTheme()
+  const [staticHref, setStaticHref] = useState<string>('')
+  const [variableHref, setVariableHref] = useState<string>('')
+
+  useEffect(() => {
+    debouncedBuildHref({
+      tree: htmlTree,
+      style,
+      setStaticHref,
+      setVariableHref,
+      theme,
+    })
+  }, [htmlTree, style])
+
+  return (
+    <>
+      {staticHref ? <link rel="stylesheet" href={staticHref} /> : null}
+      {variableHref ? <link rel="stylesheet" href={variableHref} /> : null}
+    </>
+  )
+}
diff --git a/packages/gui/src/components/html/Import.tsx b/packages/gui/src/components/html/Import.tsx
new file mode 100644
index 00000000..e5b79bd3
--- /dev/null
+++ b/packages/gui/src/components/html/Import.tsx
@@ -0,0 +1,109 @@
+import { startCase } from 'lodash-es'
+import { ChangeEvent, useState } from 'react'
+import { HtmlNode } from './types'
+import * as parsers from '../../lib/parsers'
+import { htmlToMd, mdToHtml } from '../../lib'
+
+const PRE_STYLES = {
+  overflow: 'auto',
+  height: '80vh',
+  border: 'thin solid',
+  borderColor: 'border',
+  backgroundColor: 'rgba(0, 0, 0, 0.02)',
+  display: 'block',
+  minWidth: '100%',
+  width: '-webkit-fill-available',
+  p: 2,
+  my: 3,
+}
+
+const FORMATS: string[] = ['html', 'md']
+
+const DISPLAY_NAMES: Record<string, string> = {
+  html: 'HTML',
+  md: 'Markdown',
+}
+
+type ImportProps = {
+  onChange(newValue: HtmlNode): void
+}
+export const Import = ({ onChange }: ImportProps) => {
+  const [src, setSrc] = useState<string>('')
+  const [format, setFormat] = useState<string>('html')
+
+  const handleSetFormat = (e: ChangeEvent<HTMLSelectElement>) => {
+    const newFormat = e.target.value
+
+    let newSrc = src
+    if (newFormat === 'md') {
+      newSrc = htmlToMd(src)
+    } else if (newFormat === 'html') {
+      newSrc = mdToHtml(src)
+    }
+
+    setFormat(newFormat)
+    setSrc(newSrc)
+  }
+
+  const handleImport = () => {
+    // @ts-ignore
+    const newValue = parsers[format](src)
+    onChange(newValue)
+  }
+
+  return (
+    <div sx={{px: 3}}>
+      <textarea
+        sx={PRE_STYLES}
+        value={src}
+        onChange={(e) => setSrc(e.target.value)}
+      />
+      <div sx={{ pb: 4, display: 'flex', alignItems: 'center' }}>
+        <select
+          value={format}
+          onChange={handleSetFormat}
+          sx={{
+            mr: 2,
+            px: 1,
+            py: 1,
+          }}
+        >
+          {FORMATS.map((f) => {
+            return (
+              <option key={f} value={f}>
+                {DISPLAY_NAMES[f] ?? startCase(f)}
+              </option>
+            )
+          })}
+        </select>
+        <button
+          sx={{
+            appearance: 'none',
+            WebkitAppearance: 'none',
+            boxSizing: 'border-box',
+            border: '0',
+            borderRadius: '6px',
+            color: '#ffffff',
+            bg: '#6465ff',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: 1,
+            fontWeight: 500,
+            width: '100%',
+            px: 3,
+            py: 2,
+            cursor: 'pointer',
+            transition: '.2s background-color ease-in-out',
+            '&:hover': {
+              bg: '#4e4fec',
+            },
+          }}
+          onClick={handleImport}
+        >
+          Import
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/gui/src/components/html/Provider.tsx b/packages/gui/src/components/html/Provider.tsx
new file mode 100644
index 00000000..8db5b0e1
--- /dev/null
+++ b/packages/gui/src/components/html/Provider.tsx
@@ -0,0 +1,123 @@
+import { createContext, ReactNode, useContext, useState } from 'react'
+import { htmlToEditorSchema } from '../../lib'
+import { stylesToEditorSchema } from '../../lib/transformers/styles-to-editor-schema'
+import { ThemeProvider } from '../providers/ThemeContext'
+import { HtmlNode, ElementPath, ElementData, ComponentData } from './types'
+
+const DEFAULT_HTML_EDITOR_VALUE = {
+  selected: [],
+  setSelected: () => {},
+  value: htmlToEditorSchema(`
+    <div class="section">
+      <h1>Hello, world!</h1>
+      <h2>Weeee!</h2>
+      <button>I'm a CTA</button>
+      <a href="https://components.ai">I'm a link!</a>
+    </div>
+  `),
+  isEditing: false,
+  setEditing: () => {},
+  hasComponents: false,
+  update: () => {},
+}
+
+export type HtmlEditor = {
+  value: HtmlNode
+  update(value: HtmlNode): void
+  theme?: any
+  selected: ElementPath | null
+  setSelected(newSelection: ElementPath | null): void
+  isEditing: boolean
+  setEditing(value: boolean): void
+  components?: ComponentData[]
+  updateComponent?(newComponent: ComponentData): void
+  hasComponents: boolean
+}
+
+export function useHtmlEditor() {
+  const context = useContext(HtmlEditorContext)
+  return context
+}
+
+const HtmlEditorContext = createContext<HtmlEditor>(DEFAULT_HTML_EDITOR_VALUE)
+
+const coerceNodeIntoUnist = (node: any) => {
+  if (node.tagName) {
+    return { type: 'element', attributes: {}, ...node }
+  }
+
+  return node
+}
+
+export const transformValueToSchema = (value: any): ElementData => {
+  const fullValue = coerceNodeIntoUnist(value)
+
+  const transformed = Object.entries(fullValue).reduce((acc, [key, val]) => {
+    let updatedValue: any = val
+    if (key === 'children' && Array.isArray(val)) {
+      updatedValue = val.map((child) => transformValueToSchema(child))
+    } else if (key === 'style') {
+      updatedValue = stylesToEditorSchema(val)
+    } else if (value.type === 'component' && key === 'value') {
+      updatedValue = transformValueToSchema(val)
+    }
+
+    if (value.tagName && !value.type) {
+      return {
+        type: 'element',
+        [key]: updatedValue,
+        ...acc,
+      }
+    }
+
+    return {
+      [key]: updatedValue,
+      ...acc,
+    }
+  }, {})
+
+  return transformed as ElementData
+}
+
+type HtmlEditorProviderProps = {
+  value: HtmlNode
+  onChange(value: HtmlNode): void
+  children: ReactNode
+  theme?: any
+  components?: ComponentData[]
+  updateComponent?(newComponent: ComponentData): void
+}
+
+export function HtmlEditorProvider({
+  children,
+  value,
+  theme,
+  components = [],
+  updateComponent,
+  onChange,
+}: HtmlEditorProviderProps) {
+  const [selected, setSelected] = useState<ElementPath | null>([])
+  const [isEditing, setEditing] = useState(false)
+  const transformedValue = transformValueToSchema(value)
+
+  const fullContext = {
+    value: transformedValue,
+    selected,
+    setSelected: (newSelection: ElementPath | null) =>
+      setSelected(newSelection),
+    components,
+    isEditing,
+    setEditing: (newValue: any) => setEditing(newValue),
+    updateComponent,
+    hasComponents: !!components.length,
+    update: onChange,
+  }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <HtmlEditorContext.Provider value={fullContext}>
+        {children}
+      </HtmlEditorContext.Provider>
+    </ThemeProvider>
+  )
+}
diff --git a/packages/gui/src/components/html/Renderer.tsx b/packages/gui/src/components/html/Renderer.tsx
deleted file mode 100644
index d3724ec7..00000000
--- a/packages/gui/src/components/html/Renderer.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { toCSSObject } from '../../lib'
-import { ElementData } from './types'
-
-interface Props {
-  value: ElementData
-}
-
-export function HtmlRenderer({ value }: Props) {
-  const { tagName, attributes = {}, style = {}, children = [] } = value
-  const Tag: any = value.tagName || 'div'
-  return (
-    <Tag {...attributes} sx={{ ...toCSSObject(style) }}>
-      {children.map((child, i) => {
-        if (typeof child === 'string') {
-          return child
-        }
-        return <HtmlRenderer key={i} value={child} />
-      })}
-    </Tag>
-  )
-}
diff --git a/packages/gui/src/components/html/Renderer/Element.tsx b/packages/gui/src/components/html/Renderer/Element.tsx
new file mode 100644
index 00000000..8b8b3a82
--- /dev/null
+++ b/packages/gui/src/components/html/Renderer/Element.tsx
@@ -0,0 +1,140 @@
+import { isVoidElement } from '../../../lib/elements'
+import { CanvasElementProps, useCanvasProps } from '../CanvasProvider'
+import { ComponentProvider, useComponent } from '../Component'
+import { SlotProvider } from '../Component/SlotProvider'
+import { mergeComponentAttributes } from '../Component/util'
+import { ComponentData, ElementPath, HtmlNode, Slot } from '../types'
+import { removeTailFromPath } from '../util'
+import { TextRenderer } from './Text'
+
+export function ElementRenderer({
+  value,
+  path,
+  ...canvasElementProps
+}: CanvasElementProps) {
+  const { selectComponent, value: componentValue } = useComponent()
+  const { onClick, ...props } = useCanvasProps({
+    value,
+    path,
+    component: componentValue,
+    ...canvasElementProps,
+  })
+
+  if (value.type === 'slot') {
+    return <SlotRenderer value={value} path={path} />
+  } else if (value.type === 'component') {
+    return <ComponentRenderer value={value} path={path} />
+  }
+
+  const Tag: any = value.tagName || 'div'
+
+  const handleClick = (e: MouseEvent) => {
+    if (selectComponent) {
+      return selectComponent(e)
+    }
+
+    onClick(e)
+  }
+
+  if (isVoidElement(Tag)) {
+    return <Tag {...props} onClick={handleClick} />
+  }
+
+  if (Tag === 'textarea' && value.children) {
+    return (
+      <Tag {...props} onClick={handleClick}>
+        {value.children.map((child) => child.value).join(' ')}
+      </Tag>
+    )
+  }
+
+  return (
+    <Tag {...props} onClick={handleClick}>
+      <ChildrenRenderer value={value.children} path={path} />
+    </Tag>
+  )
+}
+
+interface ChildrenRendererProps {
+  value?: HtmlNode[]
+  path: ElementPath
+}
+function ChildrenRenderer({ value = [], path }: ChildrenRendererProps) {
+  return (
+    <>
+      {value.map((child, i) => {
+        const childPath: ElementPath = [...path, i]
+        if (child.type === 'text') {
+          return <TextRenderer key={i} value={child} path={childPath} />
+        }
+
+        return <ElementRenderer key={i} value={child} path={childPath} />
+      })}
+    </>
+  )
+}
+
+interface ComponentRendererProps {
+  value: ComponentData
+  path: ElementPath
+}
+export function ComponentRenderer({ value, path }: ComponentRendererProps) {
+  const fullValue = {
+    ...value.value,
+    attributes: mergeComponentAttributes(value),
+  }
+
+  return (
+    <ComponentProvider value={value} path={path}>
+      <ElementRenderer value={fullValue} path={path} />
+    </ComponentProvider>
+  )
+}
+
+interface SlotRendererProps {
+  value: Slot
+  path: ElementPath
+}
+function SlotRenderer({ value, path }: SlotRendererProps) {
+  const { value: outerValue } = useComponent()
+
+  const outerProps = outerValue?.props || {}
+  const hasSlottedChildren = value.name === 'children' && outerValue?.children
+
+  if (hasSlottedChildren) {
+    // Slots are essentially "fragments" when it comes to rendering. As such, we
+    // don't want their rendering to count as part of the constructed path. Since
+    // we're going to pass the children to the ChildrenRenderer which automatically
+    // increments the path for the component's direct children, we can remove the
+    // tail of the path which is currently pointing to the slot itself.
+    //
+    // The slot is being rendered from a ChildrenRenderer so the path construction
+    // by default will look something like:
+    //   * component (path of [0]) -> renders children/slots with paths of [0, n]
+    //   * slot receives path of [0, 0] -> renders children with paths of [0, 0, n]
+    //   * children receive path of [0, 0, n]
+    //
+    // This results in [0, 0, n] for the component's children when we want [0, n].
+    //
+    // With this change we end up with the following:
+    //   * component (path of [0]) -> renders children/slots with paths of [0, n]
+    //   * slot receives path of [0, n] then passes [0] to render paths of [0, n]
+    //   * children receive paths of [0, n]
+    //
+    // With the proper paths being passed to the component's child slots, the canvas
+    // selection and node editing target the proper elements. Yay.
+    const passThroughPath = removeTailFromPath(path)
+    return (
+      <ChildrenRenderer value={outerValue.children!} path={passThroughPath} />
+    )
+  }
+
+  const slotValue = outerProps[value.name] || value.value
+  const textNode: HtmlNode = { type: 'text', value: slotValue as string }
+
+  return (
+    <SlotProvider value={value} path={path}>
+      <TextRenderer value={textNode} path={path} />
+    </SlotProvider>
+  )
+}
diff --git a/packages/gui/src/components/html/Renderer/Html.tsx b/packages/gui/src/components/html/Renderer/Html.tsx
new file mode 100644
index 00000000..b44f9681
--- /dev/null
+++ b/packages/gui/src/components/html/Renderer/Html.tsx
@@ -0,0 +1,25 @@
+import { ElementPath, HtmlNode } from '../types'
+import { HTMLFontTags } from '../FontTags'
+import { transformValueToSchema } from '../Provider'
+import { CanvasProvider } from '../CanvasProvider'
+import { ElementRenderer } from './Element'
+
+const DEFAULT_PATH: ElementPath = []
+
+interface HtmlRendererProps {
+  value: HtmlNode
+  path?: ElementPath
+  canvas?: boolean
+}
+export function HtmlRenderer({ value, canvas = true }: HtmlRendererProps) {
+  const transformedVal = transformValueToSchema(value)
+
+  return (
+    <>
+      <HTMLFontTags htmlTree={transformedVal} />
+      <CanvasProvider canvas={canvas}>
+        <ElementRenderer value={transformedVal} path={DEFAULT_PATH} />
+      </CanvasProvider>
+    </>
+  )
+}
diff --git a/packages/gui/src/components/html/Renderer/Text.tsx b/packages/gui/src/components/html/Renderer/Text.tsx
new file mode 100644
index 00000000..6ca70ac4
--- /dev/null
+++ b/packages/gui/src/components/html/Renderer/Text.tsx
@@ -0,0 +1,90 @@
+import { FormEvent, useCallback, useState } from 'react'
+import { useCanvas } from '../CanvasProvider'
+import { useComponent } from '../Component'
+import { useSlot } from '../Component/SlotProvider'
+import { useHtmlEditor } from '../Provider'
+import { ElementPath, HtmlNode, Slot } from '../types'
+import { setChildAtPath } from '../util'
+
+type TextRendererProps = {
+  value: HtmlNode
+  path: ElementPath
+}
+export function TextRenderer({
+  value: providedValue,
+  path,
+}: TextRendererProps) {
+  const { value: slot } = useSlot()
+  const {
+    value: component,
+    updateComponent,
+    updateComponentSlot,
+  } = useComponent()
+  const { value: fullValue, update } = useHtmlEditor()
+  const { canvas } = useCanvas()
+  const [text, setText] = useState<string>(providedValue.value as string)
+  const [editing, setEditing] = useState(false)
+
+  const textRef = useCallback(() => {
+    if (!editing) {
+      return setText(providedValue.value as string)
+    }
+  }, [providedValue])
+
+  const handleInput = (e: FormEvent) => {
+    if (slot) {
+      return handleSlotInput(e)
+    } else if (component) {
+      return handleComponentInput(e)
+    }
+
+    // We still handle the text and component types a little funky so
+    // TS isn't happy here. Need to fix that...
+    // @ts-ignore
+    const newText: HtmlNode = {
+      ...providedValue,
+      value: e.currentTarget.textContent || '',
+    }
+    const newValue = setChildAtPath(fullValue, path, newText)
+    update(newValue)
+  }
+
+  const handleComponentInput = (e: FormEvent) => {
+    const newText = e.currentTarget.textContent || ''
+    // @ts-ignore
+    const newTextNode: HtmlNode = {
+      ...providedValue,
+      value: newText,
+    }
+
+    updateComponent!(path, newTextNode)
+  }
+
+  const handleSlotInput = (e: FormEvent) => {
+    const newSlot: Slot = {
+      ...(slot as Slot),
+      value: e.currentTarget.textContent ?? '',
+    }
+
+    updateComponentSlot!(newSlot)
+  }
+
+  if (!canvas) {
+    return <>{providedValue.value || null}</>
+  }
+
+  return (
+    <span
+      ref={textRef}
+      sx={{
+        outline: 'none',
+      }}
+      contentEditable={true}
+      onInput={handleInput}
+      onBlur={() => setEditing(false)}
+      onClick={() => setEditing(true)}
+    >
+      {text}
+    </span>
+  )
+}
diff --git a/packages/gui/src/components/html/Renderer/index.ts b/packages/gui/src/components/html/Renderer/index.ts
new file mode 100644
index 00000000..7c9a376d
--- /dev/null
+++ b/packages/gui/src/components/html/Renderer/index.ts
@@ -0,0 +1 @@
+export * from './Html'
diff --git a/packages/gui/src/components/html/TreeNode.tsx b/packages/gui/src/components/html/TreeNode.tsx
new file mode 100644
index 00000000..2903c679
--- /dev/null
+++ b/packages/gui/src/components/html/TreeNode.tsx
@@ -0,0 +1,421 @@
+import { HtmlNode, ElementPath } from './types'
+import * as Collapsible from '@radix-ui/react-collapsible'
+import { useState } from 'react'
+import { useHtmlEditor } from './Provider'
+import { isProseElement, isVoidElement } from '../../lib/elements'
+import { addChildAtPath, isSamePath, replaceAt } from './util'
+import { hasChildrenSlot } from '../../lib/codegen/util'
+import { Combobox } from '../primitives'
+import { HTML_TAGS } from './data'
+import { DEFAULT_ATTRIBUTES, DEFAULT_STYLES } from './default-styles'
+import { Plus } from 'react-feather'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { useNodeTypes } from './Editors/util'
+
+interface EditorProps {
+  value: HtmlNode
+  onChange(value: HtmlNode): void
+}
+interface TreeNodeProps extends EditorProps {
+  path: ElementPath
+  onSelect(path: ElementPath | null): void
+}
+
+export function TreeNode({ value, path, onSelect, onChange }: TreeNodeProps) {
+  const { selected, isEditing, setEditing, components } = useHtmlEditor()
+  const [open, setOpen] = useState(true)
+  const isSelected = isSamePath(path, selected)
+  const isEditingNode = isSelected && isEditing
+
+  function handleSelect() {
+    // If we are selecting a different node than the currently selected node, move out of editing mode
+    if (!isSelected) {
+      setEditing(false)
+    }
+    onSelect(path)
+  }
+
+  if (value.type === 'text') {
+    return (
+      <div sx={{ cursor: 'default' }}>
+        <button
+          sx={{
+            appearance: 'none',
+            border: 'none',
+            backgroundColor: 'background',
+            color: 'text',
+            fontWeight: isSelected ? 600 : 400,
+            textAlign: 'start',
+            fontSize: 0,
+            width: '100%',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+          }}
+          onClick={() => {
+            handleSelect()
+          }}
+        >
+          {isEditingNode ? (
+            <textarea
+              sx={{
+                display: 'block',
+                width: '100%',
+              }}
+              value={value.value}
+              onChange={(e) =>
+                onChange({
+                  ...value,
+                  value: e.target.value,
+                })
+              }
+            />
+          ) : (
+            <button
+              sx={{
+                textAlign: 'left',
+                cursor: isSelected ? 'text' : 'pointer',
+                fontWeight: isSelected ? 600 : 400,
+                border: 'none',
+                backgroundColor: 'transparent',
+                color: 'text',
+                margin: 0,
+                padding: 0,
+              }}
+              onClick={() => {
+                if (isSelected) {
+                  setEditing(true)
+                }
+              }}
+            >
+              "{value.value}"
+            </button>
+          )}
+        </button>
+      </div>
+    )
+  }
+
+  if (value.type === 'slot') {
+    return (
+      <div sx={{ cursor: 'default' }}>
+        <button
+          sx={{
+            appearance: 'none',
+            border: 'none',
+            backgroundColor: 'background',
+            color: 'text',
+            fontWeight: isSelected ? 600 : 400,
+            textAlign: 'start',
+            fontSize: 0,
+          }}
+          onClick={() => handleSelect()}
+        >
+          {value.name}: "{value.value}"
+        </button>
+      </div>
+    )
+  }
+
+  const tagEditor = isEditingNode ? (
+    <Combobox
+      key={selected?.join('-')}
+      onFilterItems={(filterValue) => {
+        return HTML_TAGS.filter((el) => el.startsWith(filterValue))
+      }}
+      onItemSelected={(selectedItem) => {
+        const defaultStyles = DEFAULT_STYLES[selectedItem] || {}
+        const mergedStyles = { ...defaultStyles, ...value.style }
+        const defaultAttributes = DEFAULT_ATTRIBUTES[selectedItem] || {}
+        const mergedAttributes = {
+          ...defaultAttributes,
+          ...(value.attributes || {}),
+        }
+        const fullValue = {
+          ...value,
+          attributes: mergedAttributes,
+          tagName: selectedItem,
+          style: mergedStyles,
+        }
+        if (isProseElement(selectedItem) && !fullValue.children?.length) {
+          fullValue.children = [{ type: 'text', value: '' }]
+        }
+        setEditing(false)
+        onChange(fullValue)
+      }}
+      items={HTML_TAGS}
+      value={value.tagName}
+    />
+  ) : (
+    <button
+      sx={{
+        cursor: isSelected ? 'text' : 'pointer',
+        fontWeight: isSelected ? 600 : 400,
+        border: 'none',
+        backgroundColor: 'transparent',
+        color: 'text',
+        margin: 0,
+        padding: 0,
+        fontSize: '14px',
+        fontFamily: 'monospace',
+      }}
+      onClick={() => {
+        if (isSelected) {
+          setEditing(true)
+        }
+      }}
+    >
+      {value.tagName}
+    </button>
+  )
+
+  const tagButton = (
+    <button
+      sx={{
+        appearance: 'none',
+        WebkitAppearance: 'none',
+        cursor: 'pointer',
+        border: 'none',
+        backgroundColor: isSelected ? '#d128dd' : 'background',
+        color: 'text',
+        fontSize: '14px',
+        fontFamily: 'monospace',
+        fontWeight: isSelected ? 700 : 400,
+        borderRadius: '6px',
+        px: 2,
+        mr: 0,
+        ml: 0,
+        textAlign: 'start',
+        display: 'inline-flex',
+      }}
+      onClick={() => {
+        handleSelect()
+      }}
+    >
+      <{tagEditor}
+      {!open || isSelfClosing(value) ? ' /' : null}>
+    </button>
+  )
+
+  if (isSelfClosing(value)) {
+    return tagButton
+  }
+
+  function handleAddChild(i: number, type: string) {
+    let child = DEFAULT_TEXT
+    if (type === 'tag') {
+      child = DEFAULT_TAG
+    } else if (type === 'component') {
+      child = components![0]
+    } else if (type === 'slot') {
+      child = DEFAULT_SLOT
+    }
+
+    onChange(addChildAtPath(value, [i], child))
+  }
+
+  return (
+    <Collapsible.Root open={open} onOpenChange={setOpen}>
+      <Collapsible.Trigger
+        sx={{
+          border: 'none',
+          backgroundColor: 'background',
+          color: 'text',
+          cursor: 'pointer',
+          width: '16px',
+          height: '16px',
+          display: 'inline-flex',
+          alignItems: 'center',
+          fontFamily: 'monospace',
+          ':before': {
+            cursor: 'default',
+            content: open ? '"▼"' : '"▶︎"',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            width: '100%',
+          },
+        }}
+      />
+      <span sx={{ fontSize: 1, lineHeight: 1, fontFamily: 'monospace' }}>
+        {tagButton}
+      </span>
+      <Collapsible.Content>
+        <div sx={{ ml: 4, py: '0.0625rem' }}>
+          {value.children?.map((child, i) => {
+            return (
+              <div key={i}>
+                <AddChildButton
+                  onClick={(childType) => {
+                    handleAddChild(i, childType)
+                    onSelect([...path, i])
+                    setEditing(true)
+                  }}
+                />
+                <div sx={{ py: '0.0625rem' }}>
+                  <TreeNode
+                    value={child}
+                    onSelect={onSelect}
+                    path={[...path, i]}
+                    onChange={(newChild) => {
+                      onChange({
+                        ...value,
+                        children: replaceAt(value.children ?? [], i, newChild),
+                      })
+                    }}
+                  />
+                </div>
+              </div>
+            )
+          })}
+          <AddChildButton
+            onClick={(childType) => {
+              const index = value.children?.length ?? 0
+              handleAddChild(index, childType)
+              onSelect([...path, index])
+              setEditing(true)
+            }}
+          />
+        </div>
+        <div sx={{ display: 'flex', alignItems: 'center' }}>
+          <div
+            sx={{
+              border: '0',
+              backgroundColor: 'background',
+              color: 'text',
+              cursor: 'pointer',
+              width: '16px',
+              height: '16px',
+              display: 'flex',
+              alignItems: 'center',
+              fontFamily: 'monospace',
+              fontSize: 1,
+              p: 0,
+              mr: '1px',
+              ':before': {
+                boxSizing: 'border-box',
+                cursor: 'default',
+                content: '" "',
+                whiteSpace: 'pre',
+                height: '100%',
+                width: '100%',
+              },
+            }}
+          ></div>
+          <div
+            sx={{
+              lineHeight: 1,
+              py: 0,
+              px: 2,
+              fontSize: '14px',
+              fontFamily: 'monospace',
+              bg: isSelected ? '#d128dd' : 'background',
+              fontWeight: isSelected ? 700 : 400,
+              borderRadius: '6px',
+              transition: 'background-color .2s ease-in-out',
+            }}
+          >
+            </{value.tagName}>
+          </div>
+        </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  )
+}
+
+const isSelfClosing = (node: HtmlNode) => {
+  if (node.type !== 'component') {
+    return isVoidElement(node.tagName as string)
+  }
+
+  return !hasChildrenSlot(node.value)
+}
+
+const DEFAULT_TAG: HtmlNode = {
+  type: 'element',
+  tagName: 'div',
+}
+
+const DEFAULT_TEXT: HtmlNode = {
+  type: 'text',
+  value: '',
+}
+
+const DEFAULT_SLOT: HtmlNode = {
+  type: 'slot',
+  name: 'newSlot',
+  value: '',
+}
+
+function AddChildButton({ onClick }: { onClick(type: string): void }) {
+  const [hovered, setHovered] = useState(false)
+  const [open, setOpen] = useState(false)
+  const nodeTypes = useNodeTypes()
+
+  return (
+    <div sx={{ position: 'relative' }}>
+      <DropdownMenu.Root open={open} onOpenChange={setOpen}>
+        <DropdownMenu.Trigger
+          sx={{
+            '--height': '0.5rem',
+            display: 'flex',
+            alignItems: 'center',
+            position: 'absolute',
+            height: 'var(--height)',
+            top: 'calc(var(--height) / -2 )',
+            width: '100%',
+            cursor: 'pointer',
+            ':hover': {
+              color: 'muted',
+            },
+
+            background: 'transparent',
+            border: 'none',
+
+            '::before': {
+              content: '""',
+              backgroundColor: hovered || open ? 'muted' : 'transparent',
+              display: 'block',
+              height: '2px',
+              width: '100%',
+            },
+          }}
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+        >
+          <Plus size={16} />
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          sx={{
+            minWidth: '12rem',
+            border: '1px solid',
+            borderColor: 'border',
+            borderRadius: '0.25rem',
+            backgroundColor: 'background',
+            py: 2,
+          }}
+        >
+          {nodeTypes.map((childType) => {
+            return (
+              <DropdownMenu.Item
+                key={childType}
+                onClick={() => {
+                  onClick(childType)
+                }}
+                sx={{
+                  cursor: 'pointer',
+                  px: 3,
+                  ':hover': {
+                    backgroundColor: 'backgroundOffset',
+                  },
+                }}
+              >
+                Add {childType}
+              </DropdownMenu.Item>
+            )
+          })}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </div>
+  )
+}
diff --git a/packages/gui/src/components/html/data.ts b/packages/gui/src/components/html/data.ts
new file mode 100644
index 00000000..99ef8d8a
--- /dev/null
+++ b/packages/gui/src/components/html/data.ts
@@ -0,0 +1,134 @@
+export const HTML_TAGS = [
+  'a',
+  'abbr',
+  'address',
+  'animate',
+  'animateMotion',
+  'animateTransform',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'base',
+  'bdi',
+  'bdo',
+  'blockquote',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  'clipPath',
+  'circle',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'desc',
+  'details',
+  'dfn',
+  'dialog',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'feBlend',
+  'feColorMatrix',
+  'feComponentTransfer',
+  'feComposite',
+  'feConvolveMatrix',
+  'feDiffuseLighting',
+  'feDisplacementMap',
+  'feDropShadow',
+  'feFlood',
+  'feGaussianBlur',
+  'feImage',
+  'feMerge',
+  'feMorphology',
+  'feOffset',
+  'feSpecularLighting',
+  'feTile',
+  'feTurbulence',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'filter',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'header',
+  'hr',
+  'i',
+  'img',
+  'input',
+  'ins',
+  'kbd',
+  'label',
+  'legend',
+  'li',
+  'line',
+  'main',
+  'mark',
+  'marker',
+  'menu',
+  'menuitem',
+  'meter',
+  'nav',
+  'noscript',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'path',
+  'picture',
+  'polyline',
+  'pre',
+  'progress',
+  'q',
+  'rect',
+  'rp',
+  'rt',
+  'rtc',
+  'ruby',
+  's',
+  'samp',
+  'section',
+  'select',
+  'set',
+  'slot',
+  'small',
+  'source',
+  'span',
+  'stop',
+  'sub',
+  'summary',
+  'sup',
+  'svg',
+  'table',
+  'tbody',
+  'td',
+  'template',
+  'text',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'tr',
+  'track',
+  'u',
+  'ul',
+  'var',
+  'video',
+  'wbr',
+]
diff --git a/packages/gui/src/components/html/default-styles.ts b/packages/gui/src/components/html/default-styles.ts
new file mode 100644
index 00000000..5304c0ac
--- /dev/null
+++ b/packages/gui/src/components/html/default-styles.ts
@@ -0,0 +1,22 @@
+export const DEFAULT_STYLES: Record<string, any> = {
+  button: {},
+  a: {},
+  input: {},
+  h1: { textAlign: 'left' },
+  h2: { textAlign: 'left' },
+  h3: { textAlign: 'left' },
+  h4: { textAlign: 'left' },
+  h5: { textAlign: 'left' },
+  h6: { textAlign: 'left' },
+}
+
+export const DEFAULT_ATTRIBUTES: Record<string, any> = {
+  svg: {
+    version: '1.1',
+    xmlns: 'http://www.w3.org/2000/svg',
+  },
+  img: {
+    src: 'https://dlu344star2bj.cloudfront.net/i/3090-0015.jpg',
+    alt: 'Image',
+  },
+}
diff --git a/packages/gui/src/components/html/editor.tsx b/packages/gui/src/components/html/editor.tsx
deleted file mode 100644
index c597c867..00000000
--- a/packages/gui/src/components/html/editor.tsx
+++ /dev/null
@@ -1,426 +0,0 @@
-import { Editor } from '../Editor'
-import { HtmlNode } from './types'
-import * as Collapsible from '@radix-ui/react-collapsible'
-import { Fragment, useState } from 'react'
-import { filter, isNil, values } from 'lodash-es'
-import IconButton from '../ui/IconButton'
-import { X } from 'react-feather'
-import { Label, Combobox } from '../primitives'
-import { SelectInput } from '../inputs/SelectInput'
-import { AttributeEditor } from './AttributeEditor'
-
-const HTML_TAGS = [
-  'p',
-  'img',
-  'button',
-  'a',
-  'input',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'span',
-  'div',
-]
-
-interface EditorProps {
-  value: HtmlNode
-  onChange(value: HtmlNode): void
-}
-
-type ElementPath = number[]
-
-/**
- * An HTML tree-based editor that lets you add HTML nodes and mess around with their styles
- */
-export function HtmlEditor({ value, onChange }: EditorProps) {
-  const [selected, setSelected] = useState<ElementPath | null>(null)
-  return (
-    <div sx={{ 
-      display: 'flex', 
-      width: 'auto',
-    }}>
-    <div sx={{ 
-      pt: 3, 
-      pb: 3,
-      borderColor: 'border',
-      borderRightWidth: '1px',
-      borderRightStyle: 'solid',
-      borderBottomWidth: '1px',
-      borderBottomStyle: 'solid',
-      overflowX: 'auto',
-      resize: 'horizontal',
-      }}>
-      <TreeNode
-        value={value}
-        onSelect={setSelected}
-        path={[]}
-        onChange={onChange}
-      />
-     </div>
-      {selected && (
-        <NodeEditor
-          value={getChildAtPath(value, selected)}
-          onChange={(newItem) =>
-            onChange(setChildAtPath(value, selected, newItem))
-          }
-          onRemove={() => {
-            onChange(removeChildAtPath(value, selected))
-            setSelected(null)
-          }}
-        />
-      )}
-    </div>
-  )
-}
-
-interface TagEditorProps extends EditorProps {
-  onRemove(): void
-}
-
-function NodeEditor({ value, onChange, onRemove }: TagEditorProps) {
-  const nodeType = typeof value === 'string' ? 'text' : 'tag'
-  return (
-    <div sx={{ 
-    resize: 'horizontal',
-    overflowX: 'auto',
-    p: 3, 
-    borderRightWidth: '1px',
-    borderRightStyle: 'solid',
-    borderBottomWidth: '1px',
-    borderBottomStyle: 'solid',
-    borderColor: 'border',
-    }}>
-      <div sx={{ mb: 2, display: 'flex', alignItems: 'flex-end'}}>
-        <SelectInput
-          label="Type"
-          value={nodeType}
-          onChange={(value) => {
-            if (value === 'text') {
-              onChange('')
-            } else {
-              onChange({
-                tagName: 'div',
-              })
-            }
-          }}
-          options={['text', 'tag']}
-        />
-        <div sx={{ position: 'relative', top: '-4px' }}>
-          <IconButton onClick={onRemove}>
-            <X size={14} />
-          </IconButton>
-        </div>
-      </div>
-      <NodeSwitch value={value} onChange={onChange} />
-    </div>
-  )
-}
-
-function NodeSwitch({ value, onChange }: EditorProps) {
-  if (typeof value === 'string') {
-    return (
-      <div>
-        <Label>
-          Content
-          <input value={value} onChange={(e) => onChange(e.target.value)} />
-        </Label>
-      </div>
-    )
-  }
-
-  return (
-    <div>
-      <article sx={{ 
-        borderBottomWidth: '1px',
-        borderBottomStyle: 'solid',
-        borderBottomColor: 'border',
-        mb: 3, 
-      }}>
-        <div sx={{ mb: 2 }}>
-          <Label>Tag name</Label>{' '}
-          <Combobox
-            onFilterItems={(filterValue) => {
-              return HTML_TAGS.filter((el) => el.startsWith(filterValue))
-            }}
-            onItemSelected={(selectedItem) =>
-              onChange({ ...value, tagName: selectedItem })
-            }
-            items={HTML_TAGS}
-            value={value.tagName}
-          />
-        </div>
-        <div>
-          <AttributeEditor
-            value={value.attributes ?? {}}
-            onChange={(newAttributes) =>
-              onChange({ ...value, attributes: newAttributes })
-            }
-            element={value.tagName}
-          />
-        </div>
-      </article>
-      <div>
-        <Label> 🎨 Styles</Label>
-        <div sx={{ mt: 2 }}>
-        <Editor
-          styles={value.style ?? {}}
-          onChange={(newStyles) => onChange({ ...value, style: newStyles })}
-          showAddProperties
-        />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-interface TreeNodeProps extends EditorProps {
-  path: ElementPath
-  onSelect(path: ElementPath | null): void
-}
-
-function TreeNode({ value, path, onSelect, onChange }: TreeNodeProps) {
-  const [open, setOpen] = useState(true)
-  if (typeof value === 'string') {
-    return (
-      <div>
-        <button
-          sx={{
-            border: 'none',
-            backgroundColor: 'background',
-            color: 'text',
-          }}
-          onClick={() => onSelect(path)}
-        >
-          "{value}"
-        </button>
-      </div>
-    )
-  }
-  return (
-    <Collapsible.Root open={open} onOpenChange={setOpen}>
-      <Collapsible.Trigger
-        sx={{
-          border: 'none',
-          backgroundColor: 'background',
-          color: 'text',
-          ':before': {
-            cursor: 'pointer',
-            content: open ? '"▼"' : '"▶︎"',
-            display: 'inline-block',
-            width: '1rem',
-            height: '1rem',
-            position: 'relative',
-            top: '-2px',
-          },
-        }}
-      ></Collapsible.Trigger>
-      <button
-        sx={{
-          border: 'none',
-          backgroundColor: 'background',
-          color: 'text',
-          fontSize: '1rem',
-        }}
-        onClick={() => onSelect(path)}
-      >
-        <{value.tagName}
-        {!open && '/'}>
-      </button>
-      <Collapsible.Content>
-        <div sx={{ ml: 4 }}>
-          {value.children?.map((child, i) => {
-            return (
-              <Fragment key={i}>
-                <AddChildButton
-                  onClick={() => {
-                    onChange(addChildAtPath(value, [i], ''))
-                    onSelect(null)
-                  }}
-                />
-                <TreeNode
-                  value={child}
-                  onSelect={onSelect}
-                  path={[...path, i]}
-                  onChange={(newChild) => {
-                    onChange({
-                      ...value,
-                      children: replaceAt(value.children ?? [], i, newChild),
-                    })
-                  }}
-                />
-              </Fragment>
-            )
-          })}
-          <AddChildButton
-            onClick={() => {
-              onChange(addChildAtPath(value, [value.children?.length ?? 0], ''))
-              onSelect(null)
-            }}
-          />
-        </div>
-        <div sx={{ ml: '1rem' }}></{value.tagName}></div>
-      </Collapsible.Content>
-    </Collapsible.Root>
-  )
-}
-
-function AddChildButton({ onClick }: { onClick(): void }) {
-  return (
-    <button
-      onClick={onClick}
-      sx={{
-        cursor: 'pointer',
-        display: 'block',
-        background: 'none',
-        border: 'none',
-        textAlign: 'left',
-        color: 'transparent',
-        fontSize: '0.75rem',
-        height: '0.25rem',
-        m: 0,
-        p: 0,
-        transition: 'height 250ms',
-        whiteSpace: 'nowrap',
-        zIndex: '99',
-        ':hover': {
-          color: 'muted',
-          height: '1rem',
-        },
-      }}
-    >
-      + Add child
-    </button>
-  )
-}
-
-interface AttributeEditorProps {
-  value: Record<string, string>
-  onChange(value: Record<string, string>): void
-}
-
-function getChildAtPath(element: HtmlNode, path: ElementPath): HtmlNode {
-  if (path.length === 0) {
-    return element
-  }
-  if (typeof element === 'string') {
-    return element
-  }
-  const [head, ...rest] = path
-  const child = element.children?.[head]
-  if (isNil(child)) {
-    throw new Error('bad path')
-  }
-  return getChildAtPath(child, rest)
-}
-
-function addChildAtPath(
-  element: HtmlNode,
-  path: ElementPath,
-  item: HtmlNode
-): HtmlNode {
-  console.log({ element, path })
-  // if no path, replace the element
-  if (path.length === 0) {
-    throw new Error('Cannot add to root path')
-  }
-  if (typeof element === 'string') {
-    return element
-  }
-  if (path.length === 1) {
-    console.log('path length 1')
-    return {
-      ...element,
-      children: addAt(element.children ?? [], path[0], item),
-    }
-  }
-  const [head, ...rest] = path
-  const child = element.children?.[head]
-  if (isNil(child)) {
-    throw new Error('bad path')
-  }
-  return {
-    ...element,
-    children: replaceAt(
-      element.children ?? [],
-      head,
-      addChildAtPath(child, rest, item)
-    ),
-  }
-}
-
-function setChildAtPath(
-  element: HtmlNode,
-  path: ElementPath,
-  newChild: HtmlNode
-): HtmlNode {
-  // if no path, replace the element
-  if (path.length === 0) {
-    return newChild
-  }
-  if (typeof element === 'string') {
-    return element
-  }
-  const [head, ...rest] = path
-  const child = element.children?.[head]
-  if (isNil(child)) {
-    throw new Error('bad path')
-  }
-  return {
-    ...element,
-    children: replaceAt(
-      element.children ?? [],
-      head,
-      setChildAtPath(child, rest, newChild)
-    ),
-  }
-}
-
-function removeChildAtPath(element: HtmlNode, path: ElementPath): HtmlNode {
-  // if no path, invalid
-  if (path.length === 0) {
-    throw new Error('Cannot remove top-level')
-  }
-  if (typeof element === 'string') {
-    return element
-  }
-  if (path.length === 1) {
-    return {
-      ...element,
-      children: removeAt(element.children ?? [], path[0]),
-    }
-  }
-  const [head, ...rest] = path
-  const child = element.children?.[head]
-  if (isNil(child)) {
-    throw new Error('bad path')
-  }
-  return {
-    ...element,
-    children: replaceAt(
-      element.children ?? [],
-      head,
-      removeChildAtPath(child, rest)
-    ),
-  }
-}
-
-function addAt<T>(items: T[], index: number, newItem: T) {
-  const spliced = [...items]
-  spliced.splice(index, 0, newItem)
-  return spliced
-}
-
-function replaceAt<T>(items: T[], index: number, newItem: T) {
-  const spliced = [...items]
-  spliced.splice(index, 1, newItem)
-  return spliced
-}
-
-function removeAt<T>(items: T[], index: number) {
-  const spliced = [...items]
-  spliced.splice(index, 1)
-  return spliced
-}
diff --git a/packages/gui/src/components/html/types.ts b/packages/gui/src/components/html/types.ts
index 17d217e4..71d4a77f 100644
--- a/packages/gui/src/components/html/types.ts
+++ b/packages/gui/src/components/html/types.ts
@@ -1,9 +1,39 @@
 export interface ElementData {
-  tagName: string
-  attributes?: Record<string, string>
+  type: 'element' | 'text'
+  tagName?: string
+  attributes?: Record<string, string | Slot>
   // `style` is an attribute, but we treat it specially for CSS.gui
   style?: Record<string, any>
+  value?: string
+  children?: HtmlNode[]
+  props?: Props
+}
+export type Props = {
+  [key: string]: string | number
+}
+
+export interface Slot {
+  type: 'slot'
+  name: string
+  value?: string
+  tagName?: string
+  attributes?: Record<string, string | Slot>
+  style?: Record<string, any>
+  children?: HtmlNode[]
+  props?: Props
+}
+export interface ComponentData {
+  type: 'component'
+  id: string
+  tagName: string
+  props?: Props
+  value: HtmlNode
+  attributes?: Record<string, string | Slot>
+  style?: Record<string, any>
+  swappableComponentIds?: string[]
   children?: HtmlNode[]
 }
 
-export type HtmlNode = ElementData | string
+export type HtmlBaseNode = ElementData | ComponentData
+export type HtmlNode = HtmlBaseNode | Slot
+export type ElementPath = number[]
diff --git a/packages/gui/src/components/html/util.ts b/packages/gui/src/components/html/util.ts
new file mode 100644
index 00000000..47d60a81
--- /dev/null
+++ b/packages/gui/src/components/html/util.ts
@@ -0,0 +1,165 @@
+import { HtmlNode, ElementPath, Slot } from './types'
+import { isNil } from 'lodash-es'
+
+export const isSamePath = (
+  path1: ElementPath | null,
+  path2: ElementPath | null
+) => {
+  if (!path1 || !path2) {
+    return false
+  }
+
+  return path1.join('-') === path2.join('-')
+}
+
+export const removeTailFromPath = (path: ElementPath) => {
+  const newPath = [...path]
+  newPath.pop()
+  return newPath
+}
+
+export const cleanAttributesForCanvas = (
+  attributes: Record<string, string | Slot>
+) => {
+  const newAttributes = { ...attributes }
+
+  if (newAttributes.href) {
+    newAttributes.href = '#!'
+  }
+
+  return newAttributes
+}
+
+export function getChildAtPath(element: HtmlNode, path: ElementPath): HtmlNode {
+  if (path.length === 0) {
+    return element
+  }
+  if (typeof element === 'string') {
+    return element
+  }
+  const [head, ...rest] = path
+  const child = element.children?.[head]
+  if (isNil(child)) {
+    throw new Error('bad path')
+  }
+  return getChildAtPath(child, rest)
+}
+
+export function getParentAtPath(
+  element: HtmlNode,
+  path: ElementPath
+): HtmlNode {
+  const newPath = [...path]
+  newPath.pop()
+  return getChildAtPath(element, newPath)
+}
+
+export function addChildAtPath(
+  element: HtmlNode,
+  path: ElementPath,
+  item: HtmlNode
+): HtmlNode {
+  // if no path, replace the element
+  if (path.length === 0) {
+    throw new Error('Cannot add to root path')
+  }
+  if (typeof element === 'string') {
+    return element
+  }
+  if (path.length === 1) {
+    return {
+      ...element,
+      children: addAt(element.children ?? [], path[0], item),
+    }
+  }
+  const [head, ...rest] = path
+  const child = element.children?.[head]
+  if (isNil(child)) {
+    throw new Error('bad path')
+  }
+  return {
+    ...element,
+    children: replaceAt(
+      element.children ?? [],
+      head,
+      addChildAtPath(child, rest, item)
+    ),
+  }
+}
+
+export function setChildAtPath(
+  element: HtmlNode,
+  path: ElementPath,
+  newChild: HtmlNode
+): HtmlNode {
+  // if no path, replace the element
+  if (path.length === 0) {
+    return newChild
+  }
+  if (typeof element === 'string') {
+    return element
+  }
+  const [head, ...rest] = path
+  const child = element.children?.[head]
+  if (isNil(child)) {
+    throw new Error('bad path')
+  }
+  return {
+    ...element,
+    children: replaceAt(
+      element.children ?? [],
+      head,
+      setChildAtPath(child, rest, newChild)
+    ),
+  }
+}
+
+export function removeChildAtPath(
+  element: HtmlNode,
+  path: ElementPath
+): HtmlNode {
+  // if no path, invalid
+  if (path.length === 0) {
+    throw new Error('Cannot remove top-level')
+  }
+  if (typeof element === 'string') {
+    return element
+  }
+  if (path.length === 1) {
+    return {
+      ...element,
+      children: removeAt(element.children ?? [], path[0]),
+    }
+  }
+  const [head, ...rest] = path
+  const child = element.children?.[head]
+  if (isNil(child)) {
+    throw new Error('bad path')
+  }
+  return {
+    ...element,
+    children: replaceAt(
+      element.children ?? [],
+      head,
+      removeChildAtPath(child, rest)
+    ),
+  }
+}
+
+function addAt<T>(items: T[], index: number, newItem: T) {
+  const spliced = [...items]
+  spliced.splice(index, 0, newItem)
+  return spliced
+}
+
+export function replaceAt<T>(items: T[], index: number, newItem: T) {
+  const spliced = [...items]
+  spliced.splice(index, 1, newItem)
+  return spliced
+}
+
+function removeAt<T>(items: T[], index: number) {
+  const spliced = [...items]
+  spliced.splice(index, 1)
+  return spliced
+}
diff --git a/packages/gui/src/components/inputs/AngleInput.tsx b/packages/gui/src/components/inputs/AngleInput.tsx
deleted file mode 100644
index 9e25530a..00000000
--- a/packages/gui/src/components/inputs/AngleInput.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Angle, ANGLE_UNITS } from '../../types/css'
-import { DimensionInput } from './Dimension'
-import { EditorProps } from '../../types/editor'
-
-// TODO allow optional percentage for conic gradients
-export function AngleInput({
-  value,
-  onChange,
-  label,
-  keywords = [],
-}: EditorProps<Angle> & { label: string; keywords?: string[] }) {
-  return (
-    <DimensionInput
-      value={value}
-      onChange={onChange}
-      label={label}
-      keywords={keywords}
-      units={ANGLE_UNITS}
-      steps={angleSteps}
-      conversions={angleConversions}
-    />
-  )
-}
-
-const angleConversions = {
-  deg: 360,
-  turn: 1,
-  rad: 2 * Math.PI,
-  grad: 400,
-}
-
-const angleSteps = {
-  deg: 1,
-  turn: 0.01,
-  rad: 0.01,
-  grad: 1,
-}
diff --git a/packages/gui/src/components/inputs/Animation/field.tsx b/packages/gui/src/components/inputs/Animation/field.tsx
deleted file mode 100644
index bbde946d..00000000
--- a/packages/gui/src/components/inputs/Animation/field.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import Layers, { LayerProps } from '../../Layers'
-import {
-  Animation,
-  animationDirections,
-  animationFillModes,
-  animationPlayStates,
-} from './types'
-import { stringifyAnimationList } from './stringify'
-import { getInputProps } from '../../../lib/util'
-import { SelectInput } from '../SelectInput'
-import { TimeInput } from '../TimeInput'
-import { EasingFunctionEditor } from '../EasingFunction'
-import { DimensionInput } from '../Dimension'
-import { Label } from '../../primitives'
-import { useId } from 'react'
-import { EditorPropsWithLabel } from '../../../types/editor'
-
-export default function AnimationInput(
-  props: EditorPropsWithLabel<Animation[]>
-) {
-  const newItem = () => {
-    return {
-      name: 'none',
-      timingFunction: { type: 'cubic-bezier', p1: 0, p2: 0, p3: 0, p4: 0 },
-      direction: 'normal',
-      duration: { value: 350, unit: 'ms' },
-      delay: { value: 0, unit: 'ms' },
-      fillMode: 'none',
-      iterationCount: { value: 1, unit: 'number' },
-      playState: 'running',
-    } as const
-  }
-  return (
-    <Layers<Animation>
-      {...props}
-      newItem={newItem}
-      content={AnimationEntry}
-      stringify={stringifyAnimationList}
-    />
-  )
-}
-
-export const AnimationEntry = (props: LayerProps<Animation>) => {
-  return (
-    <div sx={{ margin: 3, display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <NameInput {...getInputProps(props, 'name')} />
-      <div
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(2, 1fr)',
-          gap: 3,
-        }}
-      >
-        <TimeInput {...getInputProps(props, 'duration')} />
-        <TimeInput {...getInputProps(props, 'delay')} />
-      </div>
-      <EasingFunctionEditor {...getInputProps(props, 'timingFunction')} />
-      <DimensionInput
-        {...getInputProps(props, 'iterationCount')}
-        units={['number']}
-        keywords={['infinite']}
-      />
-      <SelectInput
-        {...getInputProps(props, 'direction')}
-        options={animationDirections}
-      />
-      <SelectInput
-        {...getInputProps(props, 'fillMode')}
-        options={animationFillModes}
-      />
-      <SelectInput
-        {...getInputProps(props, 'playState')}
-        options={animationPlayStates}
-      />
-    </div>
-  )
-}
-
-function NameInput({ label, value, onChange }: EditorPropsWithLabel<string>) {
-  const id = `${useId()}-${label}`
-  return (
-    <div>
-      <Label htmlFor={id}>{label}</Label>
-      <input
-        id={id}
-        type="text"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-      />
-    </div>
-  )
-}
diff --git a/packages/gui/src/components/inputs/Animation/stringify.ts b/packages/gui/src/components/inputs/Animation/stringify.ts
deleted file mode 100644
index 033d6832..00000000
--- a/packages/gui/src/components/inputs/Animation/stringify.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { stringifyValues } from '../../../lib/stringify'
-import { stringifyEasingFunction } from '../EasingFunction/stringify'
-import { Animation, animationDirections } from './types'
-
-export function stringifyAnimationList(animationList: Animation[]) {
-  return animationList.map(stringifyAnimation).join(', ')
-}
-
-export function stringifyAnimation(animation: Animation) {
-  const {
-    duration,
-    delay,
-    fillMode,
-    iterationCount,
-    name,
-    playState,
-    direction,
-    timingFunction,
-  } = animation
-
-  return stringifyValues([
-    name,
-    duration,
-    stringifyEasingFunction(timingFunction),
-    delay,
-    iterationCount,
-    direction,
-    fillMode,
-    playState,
-  ])
-}
diff --git a/packages/gui/src/components/inputs/Animation/types.ts b/packages/gui/src/components/inputs/Animation/types.ts
deleted file mode 100644
index 759faed0..00000000
--- a/packages/gui/src/components/inputs/Animation/types.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { CSSUnitValue, Time } from '../../../types/css'
-import { keywordValues } from '../EasingFunction/keywords'
-import { EasingFunction } from '../EasingFunction/types'
-
-export interface Animation {
-  delay: Time
-  direction: AnimationDirection
-  duration: Time
-  fillMode: AnimationFillMode
-  iterationCount: CSSUnitValue
-  name: string
-  playState: AnimationPlayState
-  timingFunction: EasingFunction
-}
-
-export const animationDirections = [
-  'normal',
-  'reverse',
-  'alternate',
-  'alternate-reverse',
-] as const
-export type AnimationDirection = typeof animationDirections[number]
-
-export const animationFillModes = [
-  'none',
-  'forwards',
-  'backwards',
-  'both',
-] as const
-export type AnimationFillMode = typeof animationFillModes[number]
-
-export const animationPlayStates = ['running', 'paused'] as const
-export type AnimationPlayState = typeof animationPlayStates[number]
-
-export const DEFAULT_ANIMATION: Animation = {
-  delay: { value: 0, unit: 's' },
-  duration: { value: 0, unit: 's' },
-  direction: 'normal',
-  fillMode: 'none',
-  iterationCount: { value: 1, unit: 'number' },
-  name: 'none',
-  playState: 'running',
-  timingFunction: keywordValues.ease,
-}
diff --git a/packages/gui/src/components/inputs/Background/field.tsx b/packages/gui/src/components/inputs/Background/field.tsx
deleted file mode 100644
index 73850c58..00000000
--- a/packages/gui/src/components/inputs/Background/field.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { EditorProps, EditorPropsWithLabel } from '../../../types/editor'
-import {
-  attachmentKeywords,
-  Background,
-  repeatKeywords,
-  RepeatStyle,
-} from './types'
-
-import { stringifyBackgroundList } from './stringify'
-
-import Layers from '../../Layers'
-import { getInputProps } from '../../../lib/util'
-import { ImageSourceEditor } from '../ImageSource/field'
-import { PositionInput } from '../PositionInput'
-import { Label } from '../../primitives'
-import { SelectInput } from '../SelectInput'
-import { BgSizeInput } from '../BgSizeInput'
-import { BOX_KEYWORDS } from '../../../types/css'
-
-export default function BackgroundInput(
-  props: EditorPropsWithLabel<Background[]>
-) {
-  const newItem = () => {
-    // generate a new text shadow with the units of the previous box shadow
-    return {
-      attachment: 'scroll',
-      clip: 'border-box',
-      image: {
-        type: 'gradient',
-        gradient: {
-          type: 'linear',
-          angle: { value: 0, unit: 'deg' },
-          stops: [],
-        },
-      },
-      origin: 'border-box',
-      position: {
-        x: { value: 0, unit: 'px' },
-        y: { value: 0, unit: 'px' },
-      },
-      repeat: {
-        x: 'no-repeat',
-        y: 'no-repeat',
-      },
-      size: {
-        x: { value: 100, unit: '%' },
-        y: { value: 100, unit: '%' },
-      },
-    } as any
-  }
-  return (
-    <Layers<Background>
-      {...props}
-      newItem={newItem}
-      content={BackgroundLayer}
-      stringify={stringifyBackgroundList}
-      thumbnail={Thumbnail}
-    />
-  )
-}
-
-export const BackgroundLayer = (props: EditorProps<Background>) => {
-  return (
-    <div sx={{ m: 3, display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <ImageSourceEditor {...getInputProps(props, 'image')} />
-      <PositionInput {...getInputProps(props, 'position')} />
-      <BgSizeInput {...getInputProps(props, 'size')} />
-      <RepeatStyleInput {...getInputProps(props, 'repeat')} />
-      <SelectInput
-        {...getInputProps(props, 'attachment')}
-        options={attachmentKeywords}
-      />
-      <SelectInput {...getInputProps(props, 'origin')} options={BOX_KEYWORDS} />
-      <SelectInput
-        {...getInputProps(props, 'clip')}
-        options={[...BOX_KEYWORDS, 'text']}
-      />
-    </div>
-  )
-}
-
-export function RepeatStyleInput(props: EditorPropsWithLabel<RepeatStyle>) {
-  return (
-    <div>
-      <Label>Repeat</Label>
-      <div
-        sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 2 }}
-      >
-        <SelectInput {...getInputProps(props, 'x')} options={repeatKeywords} />
-        <SelectInput {...getInputProps(props, 'y')} options={repeatKeywords} />
-      </div>
-    </div>
-  )
-}
-
-function Thumbnail({ value }: { value: string }) {
-  return (
-    <div
-      sx={{
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        background: value,
-      }}
-    ></div>
-  )
-}
diff --git a/packages/gui/src/components/inputs/Background/stringify.ts b/packages/gui/src/components/inputs/Background/stringify.ts
deleted file mode 100644
index 9fa9b580..00000000
--- a/packages/gui/src/components/inputs/Background/stringify.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { stringifyPosition, stringifyValues } from '../../../lib/stringify'
-import { stringifyBgSize } from '../BgSizeInput'
-import { stringifyImageSource } from '../ImageSource/stringify'
-import { Background, RepeatStyle } from './types'
-
-export function stringifyBackgroundList(backgrounds: Background[]) {
-  return backgrounds.map(stringifyBackground).join(', ')
-}
-
-export function stringifyBackground(background: Background) {
-  const { attachment, clip, image, origin, position, repeat, size } = background
-  return stringifyValues([
-    stringifyImageSource(image),
-    stringifyPosition(position),
-    `/ ${stringifyBgSize(size)}`,
-    stringifyRepeatStyle(repeat),
-    attachment,
-    origin,
-    clip,
-  ])
-}
-
-export function stringifyRepeatStyle(repeat: RepeatStyle) {
-  return `${repeat.x} ${repeat.y}`
-}
diff --git a/packages/gui/src/components/inputs/Background/types.ts b/packages/gui/src/components/inputs/Background/types.ts
deleted file mode 100644
index 0dee6cef..00000000
--- a/packages/gui/src/components/inputs/Background/types.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Box, Position } from '../../../types/css'
-import { BgSize } from '../BgSizeInput'
-import { ImageSource } from '../ImageSource/types'
-
-export interface Background {
-  attachment: Attachment
-  clip: Box | 'text'
-  // TODO background color for final layer
-  // color: Color
-  image: ImageSource
-  origin: Box
-  position: Position
-  repeat: RepeatStyle
-  size: BgSize
-}
-
-export interface RepeatStyle {
-  x: Repeat
-  y: Repeat
-}
-
-export const repeatKeywords = ['repeat', 'space', 'round', 'no-repeat'] as const
-type Repeat = typeof repeatKeywords[number]
-
-export const attachmentKeywords = ['scroll', 'fixed', 'local'] as const
-type Attachment = typeof attachmentKeywords[number]
diff --git a/packages/gui/src/components/inputs/BasicShape/input.tsx b/packages/gui/src/components/inputs/BasicShape/input.tsx
deleted file mode 100644
index 26fb4529..00000000
--- a/packages/gui/src/components/inputs/BasicShape/input.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import { getInputProps } from '../../../lib/util'
-import { EditorProps, EditorPropsWithLabel } from '../../../types/editor'
-import FieldArray from '../../FieldArray'
-import { Label } from '../../primitives'
-import { LengthInput } from '../LengthInput'
-import { PositionInput } from '../PositionInput'
-import { SelectInput } from '../SelectInput'
-import { stringifyBasicShape } from './stringify'
-import {
-  BasicShape,
-  BasicShapeType,
-  Circle,
-  Ellipse,
-  Inset,
-  Path,
-  Point,
-  Polygon,
-} from './types'
-
-export function BasicShapeInput(props: EditorPropsWithLabel<BasicShape>) {
-  return (
-    <div>
-      <Label>{props.label}</Label>
-      <SelectInput
-        {...getInputProps(props, 'type')}
-        options={['inset', 'circle', 'ellipse', 'polygon', 'path']}
-        onChange={(type) => props.onChange(getDefaultBasicShape(type))}
-      />
-      <BasicShapeSwitch {...props} />
-    </div>
-  )
-}
-
-function BasicShapeSwitch(props: EditorProps<BasicShape>) {
-  switch (props.value.type) {
-    case 'inset': {
-      const _props = props as EditorProps<Inset>
-      return (
-        <div>
-          <LengthInput percentage {...getInputProps(_props, 'top')} />
-          <LengthInput percentage {...getInputProps(_props, 'right')} />
-          <LengthInput percentage {...getInputProps(_props, 'bottom')} />
-          <LengthInput percentage {...getInputProps(_props, 'left')} />
-          <LengthInput percentage {...getInputProps(_props, 'borderRadius')} />
-        </div>
-      )
-    }
-    case 'circle': {
-      const _props = props as EditorProps<Circle>
-      return (
-        <div>
-          <LengthInput
-            percentage
-            {...getInputProps(_props, 'radius')}
-            keywords={['closest-side', 'farthest-side']}
-          />
-          <PositionInput {...getInputProps(_props, 'position')} />
-        </div>
-      )
-    }
-    case 'ellipse': {
-      const _props = props as EditorProps<Ellipse>
-      return (
-        <div>
-          <LengthInput
-            percentage
-            {...getInputProps(_props, 'rx')}
-            keywords={['closest-side', 'farthest-side']}
-          />
-          <LengthInput
-            percentage
-            {...getInputProps(_props, 'ry')}
-            keywords={['closest-side', 'farthest-side']}
-          />
-
-          <PositionInput {...getInputProps(_props, 'position')} />
-        </div>
-      )
-    }
-    case 'polygon': {
-      const _props = props as EditorProps<Polygon>
-      return (
-        <div>
-          <SelectInput
-            {...getInputProps(_props, 'fillRule')}
-            options={['nonzero', 'evenodd']}
-          />
-          <FieldArray
-            {...getInputProps(_props, 'points')}
-            stringify={stringifyBasicShape as any}
-            content={PointInput}
-            newItem={() => ({
-              x: { value: 0, unit: 'px' },
-              y: { value: 0, unit: 'px' },
-            })}
-          />
-        </div>
-      )
-    }
-    case 'path': {
-      const _props = props as EditorProps<Path>
-      return (
-        <div>
-          <SelectInput
-            {...getInputProps(_props, 'fillRule')}
-            options={['nonzero', 'evenodd']}
-          />
-          <div>
-            <Label>path</Label>
-            <input
-              type="text"
-              value={_props.value.path}
-              onChange={(e) =>
-                _props.onChange({ ..._props.value, path: e.target.value })
-              }
-            />
-          </div>
-        </div>
-      )
-    }
-  }
-}
-
-function PointInput(props: EditorPropsWithLabel<Point>) {
-  return (
-    <div sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
-      <LengthInput percentage {...getInputProps(props, 'x')} />
-      <LengthInput percentage {...getInputProps(props, 'y')} />
-    </div>
-  )
-}
-
-export function getDefaultBasicShape(type: BasicShapeType): BasicShape {
-  switch (type) {
-    case 'inset': {
-      return {
-        type,
-        top: { value: 0, unit: 'px' },
-        right: { value: 0, unit: 'px' },
-        bottom: { value: 0, unit: 'px' },
-        left: { value: 0, unit: 'px' },
-        borderRadius: { value: 0, unit: 'px' },
-      }
-    }
-    case 'circle': {
-      return {
-        type,
-        radius: { value: 'closest-side', unit: 'keyword' },
-        position: {
-          x: { value: 'center', unit: 'keyword' },
-          y: { value: 'center', unit: 'keyword' },
-        },
-      }
-    }
-    case 'ellipse': {
-      return {
-        type,
-        rx: { value: 'closest-side', unit: 'keyword' },
-        ry: { value: 'closest-side', unit: 'keyword' },
-        position: {
-          x: { value: 'center', unit: 'keyword' },
-          y: { value: 'center', unit: 'keyword' },
-        },
-      }
-    }
-    case 'polygon': {
-      return {
-        type,
-        fillRule: 'nonzero',
-        points: [
-          {
-            x: { value: 0, unit: '%' },
-            y: { value: 0, unit: '%' },
-          },
-          {
-            x: { value: 100, unit: '%' },
-            y: { value: 0, unit: '%' },
-          },
-          {
-            x: { value: 100, unit: '%' },
-            y: { value: 100, unit: '%' },
-          },
-          {
-            x: { value: 0, unit: '%' },
-            y: { value: 100, unit: '%' },
-          },
-        ],
-      }
-    }
-    case 'path': {
-      return {
-        type,
-        fillRule: 'nonzero',
-        path: '',
-      }
-    }
-  }
-}
diff --git a/packages/gui/src/components/inputs/BasicShape/stringify.ts b/packages/gui/src/components/inputs/BasicShape/stringify.ts
deleted file mode 100644
index b46ae086..00000000
--- a/packages/gui/src/components/inputs/BasicShape/stringify.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import {
-  stringifyFunction,
-  stringifyPosition,
-  stringifyUnit,
-} from '../../../lib/stringify'
-import { BasicShape } from './types'
-
-export function stringifyBasicShape(value: BasicShape) {
-  const { type } = value
-  switch (type) {
-    case 'inset': {
-      const { top, right, bottom, left, borderRadius } = value
-      return stringifyFunction(
-        type,
-        [top, right, bottom, left, 'round', borderRadius],
-        ' '
-      )
-    }
-    case 'circle': {
-      const { radius, position } = value
-      return stringifyFunction(
-        type,
-        [radius, 'at', stringifyPosition(position)],
-        ' '
-      )
-    }
-    case 'ellipse': {
-      const { rx, ry, position } = value
-      return stringifyFunction(
-        type,
-        [rx, ry, 'at', stringifyPosition(position)],
-        ' '
-      )
-    }
-    case 'polygon': {
-      const { fillRule, points } = value
-      return stringifyFunction(type, [
-        fillRule,
-        points
-          .map(({ x, y }) => `${stringifyUnit(x)} ${stringifyUnit(y)}`)
-          .join(', '),
-      ])
-    }
-    case 'path': {
-      const { fillRule, path } = value
-      return stringifyFunction(type, [fillRule, `"${path}"`])
-    }
-  }
-}
diff --git a/packages/gui/src/components/inputs/BasicShape/types.ts b/packages/gui/src/components/inputs/BasicShape/types.ts
deleted file mode 100644
index 78938f5c..00000000
--- a/packages/gui/src/components/inputs/BasicShape/types.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Length, LengthPercentage, Position } from '../../../types/css'
-
-export type BasicShape = Inset | Circle | Ellipse | Polygon | Path
-export type BasicShapeType = BasicShape['type']
-
-export interface Inset {
-  type: 'inset'
-  top: LengthPercentage
-  left: LengthPercentage
-  bottom: LengthPercentage
-  right: LengthPercentage
-  // TODO full border radius syntax
-  borderRadius: LengthPercentage
-}
-
-export interface Circle {
-  type: 'circle'
-  radius: LengthPercentage // keywords: closest-side, farthest-side
-  position: Position
-}
-
-export interface Ellipse {
-  type: 'ellipse'
-  rx: LengthPercentage
-  ry: LengthPercentage
-  position: Position
-}
-
-export interface Polygon {
-  type: 'polygon'
-  fillRule: FillRule
-  points: Point[]
-}
-
-export interface Path {
-  type: 'path'
-  fillRule: FillRule
-  path: string // TODO svg path editor
-}
-
-type FillRule = 'nonzero' | 'evenodd'
-export type Point = { x: LengthPercentage; y: LengthPercentage }
diff --git a/packages/gui/src/components/inputs/BgSizeInput.tsx b/packages/gui/src/components/inputs/BgSizeInput.tsx
deleted file mode 100644
index 422fe4c0..00000000
--- a/packages/gui/src/components/inputs/BgSizeInput.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { stringifyUnit } from '../../lib/stringify'
-import { getInputProps } from '../../lib/util'
-import { LengthPercentage } from '../../types/css'
-import { EditorPropsWithLabel } from '../../types/editor'
-import { Label } from '../primitives'
-import { LengthInput } from './LengthInput'
-
-export type BgSize = BgSizeKeyword | BgSizeDimensions
-
-interface BgSizeKeyword {
-  type: 'keyword'
-  value: 'contain' | 'cover'
-}
-
-interface BgSizeDimensions {
-  type: 'dimensions'
-  x: LengthPercentage
-  y: LengthPercentage
-}
-
-/**
- * Input representing a background size (or anything in the shape of a background size, like clip-size).
- */
-export function BgSizeInput(props: EditorPropsWithLabel<BgSize>) {
-  return (
-    <div>
-      <div
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'min-content 1fr min-content',
-          gap: 2,
-          alignItems: 'center',
-        }}
-      >
-        <Label>{props.label}</Label>
-        {props.value.type === 'keyword' ? (
-          <select
-            value={props.value.value}
-            onChange={(e) =>
-              props.onChange({ ...props.value, value: e.target.value } as any)
-            }
-          >
-            {/* TODO enable global keywords */}
-            <option value="cover">cover</option>
-            <option value="contain">contain</option>
-          </select>
-        ) : (
-          <output sx={{ fontSize: 1 }}>{stringifyBgSize(props.value)}</output>
-        )}
-        <select
-          value={props.value.type}
-          onChange={(e) =>
-            props.onChange(getDefaultBgSize(e.target.value as any))
-          }
-        >
-          <option value="keyword">keyword</option>
-          <option value="dimensions">dimensions</option>
-        </select>
-      </div>
-      {props.value.type === 'dimensions' && (
-        <div
-          sx={{
-            display: 'grid',
-            gap: 1,
-          }}
-        >
-          <LengthInput percentage {...getInputProps(props, 'x' as any)} />
-          <LengthInput percentage {...getInputProps(props, 'y' as any)} />
-        </div>
-      )}
-    </div>
-  )
-}
-
-export function stringifyBgSize(size: BgSize) {
-  switch (size.type) {
-    case 'keyword':
-      return size.value
-    case 'dimensions':
-      return `${stringifyUnit(size.x)} ${stringifyUnit(size.y)}`
-  }
-}
-
-function getDefaultBgSize(type: 'keyword' | 'dimensions'): BgSize {
-  switch (type) {
-    case 'keyword':
-      return { type, value: 'cover' }
-    case 'dimensions':
-      return {
-        type,
-        x: { value: 100, unit: '%' },
-        y: { value: 100, unit: '%' },
-      }
-  }
-}
diff --git a/packages/gui/src/components/inputs/BorderSpacing.tsx b/packages/gui/src/components/inputs/BorderSpacing.tsx
deleted file mode 100644
index 48c96a48..00000000
--- a/packages/gui/src/components/inputs/BorderSpacing.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { stringifyValues } from '../../lib/stringify'
-import { getInputProps } from '../../lib/util'
-import { Length } from '../../types/css'
-import { EditorPropsWithLabel } from '../../types/editor'
-import { Label } from '../primitives'
-import { LengthInput } from './LengthInput'
-
-interface BorderSpacing {
-  x: Length
-  y: Length
-}
-
-export function BorderSpacingInput(props: EditorPropsWithLabel<BorderSpacing>) {
-  return (
-    <div>
-      <Label>{props.label}</Label>
-      <div sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-        <LengthInput
-          {...getInputProps(props, 'x')}
-          percentage
-          keywords={['left', 'center', 'right']}
-        />
-        <LengthInput
-          {...getInputProps(props, 'y')}
-          percentage
-          keywords={['top', 'center', 'bottom']}
-        />
-      </div>
-    </div>
-  )
-}
-
-export function stringifyBorderSpacing(value: BorderSpacing) {
-  return stringifyValues([value.x, value.y])
-}
diff --git a/packages/gui/src/components/inputs/BoxShadow/field.tsx b/packages/gui/src/components/inputs/BoxShadow/field.tsx
deleted file mode 100644
index 0dfd5fbd..00000000
--- a/packages/gui/src/components/inputs/BoxShadow/field.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ColorInput } from '../ColorInput'
-import { CheckboxInput } from '../CheckboxInput'
-import { LengthInput } from '../LengthInput'
-import Layers, { LayerProps } from '../../Layers'
-import { BoxShadow } from './types'
-import { stringifyBoxShadow } from './stringify'
-import { getInputProps } from '../../../lib/util'
-import { EditorPropsWithLabel } from '../../../types/editor'
-
-export default function BoxShadowInput(
-  props: EditorPropsWithLabel<BoxShadow[]>
-) {
-  const newItem = () => {
-    return {
-      spread: { value: 0, unit: 'px' },
-      blur: { value: 0, unit: 'px' },
-      offsetX: { value: 0, unit: 'px' },
-      offsetY: { value: 0, unit: 'px' },
-      color: '#000',
-    } as const
-  }
-  return (
-    <Layers<BoxShadow>
-      {...props}
-      newItem={newItem}
-      content={BoxShadowEditor}
-      stringify={stringifyBoxShadow}
-      thumbnail={Thumbnail}
-    />
-  )
-}
-
-export const BoxShadowEditor = (props: LayerProps<BoxShadow>) => {
-  return (
-    <div sx={{ margin: 3 }}>
-      <section sx={{ display: 'flex', alignItems: 'center' }}>
-        <div sx={{ width: '50%' }}>
-          <ColorInput {...getInputProps(props, 'color')} />
-        </div>
-        <CheckboxInput {...getInputProps(props, 'inset')} />
-      </section>
-      <LengthInput {...getInputProps(props, 'offsetX')} label="Offset X" />
-      <LengthInput {...getInputProps(props, 'offsetY')} label="Offset Y" />
-      <LengthInput {...getInputProps(props, 'spread')} />
-      <LengthInput {...getInputProps(props, 'blur')} />
-    </div>
-  )
-}
-
-function Thumbnail({ value }: { value: string }) {
-  return (
-    <div
-      sx={{
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <div sx={{ width: '1rem', height: '1rem', boxShadow: value }} />
-    </div>
-  )
-}
diff --git a/packages/gui/src/components/inputs/BoxShadow/stringify.tsx b/packages/gui/src/components/inputs/BoxShadow/stringify.tsx
deleted file mode 100644
index 3bffbc62..00000000
--- a/packages/gui/src/components/inputs/BoxShadow/stringify.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { BoxShadow } from './types'
-import { stringifyUnit } from '../../../lib/stringify'
-
-export function stringifyBoxShadow(boxShadow: BoxShadow | BoxShadow[]): string {
-  if (Array.isArray(boxShadow)) {
-    return boxShadow.filter(Boolean).map(stringifyBoxShadow).join(', ')
-  }
-
-  return stringifyEntry(boxShadow)
-}
-
-const stringifyEntry = (boxShadow: BoxShadow) => {
-  return [
-    boxShadow.inset && 'inset',
-    stringifyUnit(boxShadow.offsetX),
-    stringifyUnit(boxShadow.offsetY),
-    stringifyUnit(boxShadow.blur),
-    stringifyUnit(boxShadow.spread),
-    boxShadow.color,
-  ]
-    .filter(Boolean)
-    .join(' ')
-}
diff --git a/packages/gui/src/components/inputs/BoxShadow/types.ts b/packages/gui/src/components/inputs/BoxShadow/types.ts
deleted file mode 100644
index 3f951eed..00000000
--- a/packages/gui/src/components/inputs/BoxShadow/types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Color, Length } from '../../../types/css'
-export interface BoxShadow {
-  inset?: boolean
-  offsetX: Length
-  offsetY: Length
-  spread: Length
-  blur: Length
-  color: Color
-}
-
-export const DEFAULT_BOX_SHADOW: BoxShadow = {
-  offsetX: { value: 0, unit: 'px' },
-  offsetY: { value: 0, unit: 'px' },
-  spread: { value: 0, unit: 'px' },
-  blur: { value: 0, unit: 'px' },
-  color: 'transparent',
-}
diff --git a/packages/gui/src/components/inputs/CheckboxInput.tsx b/packages/gui/src/components/inputs/CheckboxInput.tsx
index 29b2b5b5..269de8d4 100644
--- a/packages/gui/src/components/inputs/CheckboxInput.tsx
+++ b/packages/gui/src/components/inputs/CheckboxInput.tsx
@@ -1,23 +1,14 @@
-import { kebabCase } from 'lodash-es'
-import { useId } from 'react'
 import { EditorProps } from '../../types/editor'
-import { Label } from '../primitives'
 
 export function CheckboxInput({
-  label,
   value = false,
   onChange,
-}: EditorProps<boolean | undefined> & { label: string }) {
-  const id = `${useId()}-${kebabCase(label)}`
+}: EditorProps<boolean | undefined>) {
   return (
-    <>
-      <Label htmlFor={id}>{label}</Label>
-      <input
-        id={id}
-        type="checkbox"
-        value={value.toString()}
-        onChange={(e) => onChange(e.target.checked)}
-      />
-    </>
+    <input
+      type="checkbox"
+      checked={value}
+      onChange={(e) => onChange(e.target.checked)}
+    />
   )
 }
diff --git a/packages/gui/src/components/inputs/ClipPath.tsx b/packages/gui/src/components/inputs/ClipPath.tsx
deleted file mode 100644
index aebb5bf8..00000000
--- a/packages/gui/src/components/inputs/ClipPath.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Label } from 'theme-ui'
-import { stringifyValues } from '../../lib/stringify'
-import { getInputProps } from '../../lib/util'
-import { GeometryBox, GEOMETRY_BOX_KEYWORDS } from '../../types/css'
-import { EditorPropsWithLabel } from '../../types/editor'
-import { BasicShapeInput } from './BasicShape/input'
-import { stringifyBasicShape } from './BasicShape/stringify'
-import { BasicShape } from './BasicShape/types'
-import { SelectInput } from './SelectInput'
-
-// TODO `url()` option
-interface ClipPath {
-  shape: BasicShape
-  box: GeometryBox
-}
-
-export function ClipPathInput(props: EditorPropsWithLabel<ClipPath>) {
-  return (
-    <div>
-      <Label>{props.label}</Label>
-      <BasicShapeInput {...getInputProps(props, 'shape')} />
-      <SelectInput
-        {...getInputProps(props, 'box')}
-        options={GEOMETRY_BOX_KEYWORDS}
-      />
-    </div>
-  )
-}
-
-export function stringifyClipPath(value: ClipPath) {
-  return stringifyValues([stringifyBasicShape(value.shape), value.box])
-}
diff --git a/packages/gui/src/components/inputs/ColorInput.tsx b/packages/gui/src/components/inputs/ColorInput.tsx
index fb74b67d..5a9e3977 100644
--- a/packages/gui/src/components/inputs/ColorInput.tsx
+++ b/packages/gui/src/components/inputs/ColorInput.tsx
@@ -1,37 +1,18 @@
-import { useId } from 'react'
 import { Color } from '../../types/css'
-import { EditorProps } from '../../types/editor'
-import { ColorPopover, Label } from '../primitives'
+import { EditorPropsWithLabel } from '../../types/editor'
+import { ColorPopover } from '../primitives'
 import { useTheme } from '../providers/ThemeContext'
-import { DeletePropButton } from './Dimension/Input'
+import { InputHeader } from '../ui/InputHeader'
 
-interface Props extends EditorProps<Color> {
-  label: string
+interface Props extends EditorPropsWithLabel<Color> {
   defaultValue?: Color
 }
 
-export function ColorInput({
-  label,
-  value,
-  onChange,
-  onRemove,
-  defaultValue = '#000',
-}: Props) {
+export function ColorInput(props: Props) {
   const theme = useTheme()
-  const id = useId()
-  const fullId = `${id}-${label}`
   return (
-    <div>
-      <Label htmlFor={fullId}>{label}</Label>
-      <div sx={{ display: 'flex', flexDirection: 'row' }}>
-        <ColorPopover
-          id={fullId}
-          value={value || defaultValue}
-          onChange={onChange}
-          theme={theme}
-        />
-        {onRemove && <DeletePropButton onRemove={onRemove} />}
-      </div>
+    <div sx={{ display: 'flex', flexDirection: 'row' }}>
+      <ColorPopover {...props} theme={theme} />
     </div>
   )
 }
diff --git a/packages/gui/src/components/inputs/Dimension/Input.tsx b/packages/gui/src/components/inputs/Dimension/Input.tsx
index 327d080d..ea79f07d 100644
--- a/packages/gui/src/components/inputs/Dimension/Input.tsx
+++ b/packages/gui/src/components/inputs/Dimension/Input.tsx
@@ -1,249 +1,95 @@
-import * as React from 'react'
-import {
-  AbsoluteLengthUnits,
-  CalcOperand,
-  CSSFunctionCalc,
-  CSSUnitValue,
-  Dimension,
-  KeywordUnits,
-  ThemeUnits,
-  UnitlessUnits,
-} from '../../../types/css'
-import {
-  Label,
-  Number,
-  ThemeValue,
-  UnitSelect,
-  ValueSelect,
-} from '../../primitives'
-import { reducer } from './reducer'
-import { State } from './types'
-import { EditorProps } from '../../../types/editor'
+import { CSSUnitValue, Dimension } from '../../../types/css'
+import { Number, UnitSelect } from '../../primitives'
+import { EditorPropsWithLabel } from '../../../types/editor'
 import { UnitConversions } from '../../../lib/convert'
-import { compact, kebabCase } from 'lodash-es'
-import { CalcInput } from '../../primitives/CalcInput'
+import { convertUnits } from '../../../lib/convert'
 import { X } from 'react-feather'
+import IconButton from '../../ui/IconButton'
 
 // Mapping of units to [min, max] tuple
 type UnitRanges = Record<string, [min: number, max: number]>
+export type Range = UnitRanges | 'nonnegative'
 // Mapping of units to steps
 type UnitSteps = Record<string, number>
 
-export interface DimensionInputProps extends EditorProps<Dimension> {
-  label?: string
-  range?: UnitRanges
+export interface DimensionInputProps extends EditorPropsWithLabel<Dimension> {
+  range?: Range
   steps?: UnitSteps
   units?: readonly string[]
-  /** The available keyword values for the property. If provided, 'keyword' will be appended as a unit */
-  keywords?: string[]
-  /** The available theme values for the property. If provided, 'theme' will be appended as a unit */
-  themeValues?: (CSSUnitValue & { id: string })[]
   conversions?: UnitConversions
-  property?: string
 }
-export const DimensionInput = ({
-  value,
-  onChange,
-  onRemove,
-  label,
-  range,
-  units = [],
-  keywords = [],
-  themeValues = [],
-  steps,
-  conversions = {},
-  property,
-}: DimensionInputProps) => {
-  const id = `${React.useId()}-${kebabCase(label)}`
-  
-  const [state, dispatch] = React.useReducer(reducer, {
-    value: (value as CSSUnitValue)?.value || 0,
-    unit: (value as CSSUnitValue)?.unit || units[0] || AbsoluteLengthUnits.Px,
-    themeId: (value as CSSUnitValue)?.themeId,
-    key: 0,
-  } as State)
-  React.useEffect(() => {
-    if ((value as CSSFunctionCalc)?.type === 'calc') return
-    const unitValue = value as CSSUnitValue
-    if (
-      // Only want to call on change when the value differs
-      state.value !== unitValue?.value ||
-      state.unit !== unitValue?.unit ||
-      state.themeId !== unitValue?.themeId
-    ) {
-      const newValue: CSSUnitValue = {
-        value: state.value,
-        unit: state.unit,
-      }
-      if (state.themeId) {
-        newValue.themeId = state.themeId
-      }
-      onChange(newValue)
-    }
-  }, [state])
 
-  const allUnits = compact([
-    themeValues.length > 0 && 'theme',
-    ...units,
-    keywords.length > 0 && 'keyword',
-    UnitlessUnits.Calc,
-  ])
+export function DimensionInput(props: DimensionInputProps) {
+  const {
+    value = {},
+    onChange,
+    range: providedRange,
+    units = [],
+    steps,
+    conversions = {},
+  } = props
 
-  return (
-    <div sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-      {label && (
-        <Label htmlFor={id} sx={{ display: 'block' }}>
-          {label}
-        </Label>
-      )}
-      <div
-        sx={{
-          display: 'flex',
-          width: '100%',
-          alignItems: 'center',
-        }}
-      >
-        {state.unit === KeywordUnits.Keyword ? (
-          <ValueSelect
-            value={state.value}
-            values={keywords}
-            onChange={(e: any) => {
-              dispatch({
-                type: 'CHANGED_INPUT_VALUE',
-                value: e.target.value,
-              })
-            }}
-          />
-        ) : state.themeId ? (
-          <ThemeValue
-            value={themeValues.findIndex((tv) => tv.id === state.themeId) + 1}
-            onChange={(newValue: number) => {
-              const themeValue = themeValues[newValue - 1]
-              dispatch({
-                type: 'CHANGED_INPUT_TO_THEME_VALUE',
-                value: themeValue?.value ?? 0,
-                unit: (themeValue?.unit as any) ?? 'px',
-                themeId: themeValue.id,
-              })
-            }}
-            themeValues={themeValues}
-          />
-        ) : state.unit === UnitlessUnits.Calc ? (
-          <CalcInput
-            units={allUnits}
-            onChange={onChange}
-            //@ts-ignore
-            value={value}
-            label={label}
-            steps={steps}
-            range={range}
-            conversions={conversions}
-            themeValues={themeValues}
-          />
-        ) : (
-          <Number
-            id={id}
-            key={state.key}
-            value={state.value}
-            step={steps?.[state.unit]}
-            min={range?.[state.unit]?.[0]}
-            max={range?.[state.unit]?.[1]}
-            onChange={(newValue: number) => {
-              dispatch({
-                type: 'CHANGED_INPUT_VALUE',
-                value: newValue,
-              })
-            }}
-          />
-        )}
-        <UnitSelect
-          units={allUnits}
-          value={state.themeId ? ThemeUnits.Theme : state.unit}
-          onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-            const newUnit = e.target.value
-
-            if (newUnit === KeywordUnits.Keyword) {
-              dispatch({
-                type: 'CHANGED_INPUT_VALUE',
-                value: keywords[0],
-              })
-            }
+  const range =
+    providedRange === 'nonnegative' ? nonnegativeRange(units) : providedRange
 
-            if (newUnit === UnitlessUnits.Calc) {
-              onChange({
-                arguments: {
-                  valueX: value as CSSUnitValue,
-                  valueY: { value: 1, unit: 'px' },
-                  operand: CalcOperand.Plus,
-                },
-                type: 'calc',
-              })
-            }
-            if (
-              state.unit === UnitlessUnits.Calc &&
-              newUnit !== UnitlessUnits.Calc
-            ) {
-              const unitValue = (value as CSSFunctionCalc).arguments.valueX
-                .value
+  const normedValue = value as CSSUnitValue
 
-              onChange({ value: unitValue, unit: newUnit })
-              dispatch({
-                value: unitValue,
-                type: 'CHANGED_INPUT_VALUE',
-              })
-            }
+  const allUnits = units
 
-            if (newUnit === ThemeUnits.Theme) {
-              const themeValue = themeValues?.[0]
-              return dispatch({
-                type: 'CHANGED_INPUT_TO_THEME_VALUE',
-                value: themeValue?.value ?? 0,
-                unit: (themeValue?.unit as any) ?? 'px',
-                themeId: themeValue?.id,
-              })
-            }
-
-            dispatch({
-              type: 'CHANGED_UNIT_VALUE',
-              unit: newUnit,
-              steps: steps,
+  return (
+    <div
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        borderRadius: '0.25rem',
+        border: '1px solid',
+        borderColor: 'border',
+        px: 2,
+      }}
+    >
+      <Number
+        value={normedValue.value}
+        step={steps?.[normedValue.unit]}
+        min={range?.[normedValue.unit]?.[0]}
+        max={range?.[normedValue.unit]?.[1]}
+        onChange={(newValue: number) => {
+          onChange({
+            ...normedValue,
+            value: newValue,
+          })
+        }}
+      />
+      <UnitSelect
+        units={allUnits}
+        value={normedValue.unit}
+        onChange={(newUnit) => {
+          onChange({
+            unit: newUnit,
+            value: convertUnits(
+              newUnit,
+              normedValue,
               conversions,
-            })
-          }}
-          sx={{ marginLeft: 1, minHeight: '1.6em', width: 72 }}
-        />
-      </div>
-      {onRemove && (
-        <DeletePropButton onRemove={onRemove}/>
-      )}
+              steps
+            ) as any,
+          })
+        }}
+      />
     </div>
   )
 }
 
+export function nonnegativeRange(units: readonly string[]): UnitRanges {
+  return Object.fromEntries(units.map((unit) => [unit, [0, Infinity]]))
+}
 interface DeleteProps {
   onRemove(): void
 }
 export const DeletePropButton = ({ onRemove }: DeleteProps) => {
   return (
-    <button 
-      sx={{
-        cursor: 'pointer',
-        appearance: 'none',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'right',
-        p: 0,
-        bg: 'rgba(0,0,0,0)',
-        border: 0,
-        color: 'muted',
-        transition: '.2s color ease-in-out',
-        ':hover': {
-          color: 'text',
-        }
-      }}
+    <IconButton
       onClick={() => onRemove()}
     >
-      <X size={14} strokeWidth={3} color='currentColor' />
-    </button>
+      <X size={16} strokeWidth={3} color="currentColor" />
+    </IconButton>
   )
 }
diff --git a/packages/gui/src/components/inputs/Dimension/reducer.ts b/packages/gui/src/components/inputs/Dimension/reducer.ts
deleted file mode 100644
index 20578e33..00000000
--- a/packages/gui/src/components/inputs/Dimension/reducer.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { convertUnits } from '../../../lib/convert'
-import { State, Action } from './types'
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case 'CHANGED_INPUT_VALUE': {
-      return {
-        ...state,
-        value: action.value,
-        themeId: action.themeId,
-      }
-    }
-    case 'CHANGED_UNIT_VALUE': {
-      return {
-        ...state,
-        value: convertUnits(
-          action.unit,
-          state,
-          action.conversions,
-          action.steps
-        ),
-        unit: action.unit,
-        key: state.key + 1, // Force number scrubber re-render
-        themeId: undefined,
-      }
-    }
-    case 'CHANGED_INPUT_TO_THEME_VALUE': {
-      return {
-        ...state,
-        value: action.value,
-        unit: action.unit,
-        themeId: action.themeId,
-      }
-    }
-    default: {
-      break
-    }
-  }
-
-  return state
-}
diff --git a/packages/gui/src/components/inputs/Dimension/types.ts b/packages/gui/src/components/inputs/Dimension/types.ts
deleted file mode 100644
index dd3bc0a4..00000000
--- a/packages/gui/src/components/inputs/Dimension/types.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { UnitConversions, UnitSteps } from '../../../lib'
-import { CSSFunctionCalc } from '../../../types/css'
-
-export type State = {
-  key: number
-  value: number | string
-  unit: string
-  themeId?: string
-  min?: number
-  max?: number
-}
-
-export type Action =
-  | {
-      type: 'CHANGED_INPUT_VALUE'
-      value: number | string
-      themeId?: string
-    }
-  | {
-      type: 'CHANGED_UNIT_VALUE'
-      unit: string
-      conversions: UnitConversions
-      steps?: UnitSteps
-    }
-  | {
-      type: 'CHANGED_INPUT_TO_THEME_VALUE'
-      value: number | string
-      unit: string
-      themeId?: string
-    }
diff --git a/packages/gui/src/components/inputs/EasingFunction/stringify.ts b/packages/gui/src/components/inputs/EasingFunction/stringify.ts
index 2300914a..452a3145 100644
--- a/packages/gui/src/components/inputs/EasingFunction/stringify.ts
+++ b/packages/gui/src/components/inputs/EasingFunction/stringify.ts
@@ -1,12 +1,7 @@
-import { getKeywordFromValue } from './keywords'
 import { EasingFunction } from './types'
 
 // Convert the transition function to a CSS Value
 export function stringifyEasingFunction(value: EasingFunction) {
-  const keyword = getKeywordFromValue(value)
-  if (keyword) {
-    return keyword
-  }
   switch (value.type) {
     case 'cubic-bezier':
       return `cubic-bezier(${value.p1}, ${value.p2}, ${value.p3}, ${value.p4})`
diff --git a/packages/gui/src/components/inputs/Filter/field.tsx b/packages/gui/src/components/inputs/Filter/field.tsx
deleted file mode 100644
index 91d4b0e3..00000000
--- a/packages/gui/src/components/inputs/Filter/field.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import { LengthInput } from '../LengthInput'
-import Layers, { LayerProps } from '../../Layers'
-
-import {
-  Filter,
-  FilterType,
-  Blur,
-  DropShadow,
-  HueRotate,
-  AmountFilter,
-} from './types'
-import { stringifyFilter } from './stringify'
-import { EditorProps, EditorPropsWithLabel } from '../../../types/editor'
-import { getInputProps } from '../../../lib/util'
-import { SelectInput } from '../SelectInput'
-import { NumberPercentageInput } from '../NumberPercentageInput'
-import { AngleInput } from '../AngleInput'
-import { ColorInput } from '../ColorInput'
-
-export default function FilterInput(props: EditorPropsWithLabel<Filter[]>) {
-  const newItem = () => {
-    return getDefault('blur')
-  }
-  return (
-    <Layers<Filter>
-      {...props}
-      newItem={newItem}
-      stringify={stringifyFilter}
-      content={FilterEditor}
-      thumbnail={Thumbnail}
-    />
-  )
-}
-
-export const FilterEditor = (props: LayerProps<Filter>) => {
-  return (
-    <div sx={{ m: 3 }}>
-      <SelectInput
-        {...getInputProps(props, 'type')}
-        options={filterTypes}
-        onChange={(newType) => {
-          props.onChange(convertFilterValue(props.value, newType))
-        }}
-      />
-      <FilterSwitch {...props} />
-    </div>
-  )
-}
-
-const filterTypes = [
-  'blur',
-  'brightness',
-  'contrast',
-  'drop-shadow',
-  'grayscale',
-  'hue-rotate',
-  'invert',
-  'opacity',
-  'saturate',
-  'sepia',
-] as const
-
-function FilterSwitch(props: LayerProps<Filter>) {
-  switch (props.value.type) {
-    case 'blur': {
-      const _props = props as EditorProps<Blur>
-      return <LengthInput {...getInputProps(_props, 'radius')} />
-    }
-    case 'drop-shadow': {
-      const _props = props as EditorProps<DropShadow>
-      return (
-        <div>
-          <LengthInput {...getInputProps(_props, 'offsetX')} />
-          <LengthInput {...getInputProps(_props, 'offsetY')} />
-          <LengthInput {...getInputProps(_props, 'blurRadius')} />
-          <ColorInput {...getInputProps(_props, 'color')} />
-        </div>
-      )
-    }
-    case 'hue-rotate': {
-      const _props = props as EditorProps<HueRotate>
-      return <AngleInput {...getInputProps(_props, 'angle')} />
-    }
-    default: {
-      const _props = props as EditorProps<AmountFilter>
-      // TODO some of the filters have different boundaries
-      return <NumberPercentageInput {...getInputProps(_props, 'amount')} />
-    }
-  }
-}
-function Thumbnail({ value }: { value: string }) {
-  return (
-    <div
-      sx={{
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <div
-        sx={{
-          width: '1rem',
-          height: '1rem',
-          filter: value,
-          borderRadius: '9999px',
-          backgroundImage:
-            'conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)',
-        }}
-      />
-    </div>
-  )
-}
-
-function convertFilterValue(value: Filter, newType: FilterType): Filter {
-  if (value.type === newType) {
-    return value
-  }
-
-  // When converting between two values that take a number-percentage amount
-  // keep the amount
-  if (isAmountFilter(value.type) && isAmountFilter(newType)) {
-    return { ...value, type: newType } as any
-  }
-
-  // Otherwise, reset to the default of that filter type
-  return getDefault(newType)
-}
-
-function getDefault(type: FilterType): Filter {
-  switch (type) {
-    case 'hue-rotate':
-      return { type, angle: { value: 0, unit: 'deg' } }
-    case 'blur':
-      return { type, radius: { value: 0, unit: 'px' } }
-    case 'drop-shadow':
-      return {
-        type,
-        offsetX: { value: 0, unit: 'px' },
-        offsetY: { value: 0, unit: 'px' },
-        blurRadius: { value: 0, unit: 'px' },
-        color: '#000',
-      }
-    default:
-      return { type, amount: { value: 0, unit: 'number' } }
-  }
-}
-
-function isAmountFilter(type: FilterType) {
-  return !['hue-rotate', 'blur', 'drop-shadow'].includes(type)
-}
diff --git a/packages/gui/src/components/inputs/Filter/stringify.ts b/packages/gui/src/components/inputs/Filter/stringify.ts
deleted file mode 100644
index d84bf22e..00000000
--- a/packages/gui/src/components/inputs/Filter/stringify.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { stringifyFunction, stringifyUnit } from '../../../lib/stringify'
-import { Filter } from './types'
-
-export function stringifyFilter(filter: Filter | Filter[]) {
-  if (Array.isArray(filter)) {
-    return filter.map(stringifyEntry).join(' ')
-  }
-  return stringifyEntry(filter)
-}
-
-function stringifyEntry(filter: Filter) {
-  const { type } = filter
-  switch (type) {
-    case 'blur':
-      return stringifyFunction(type, [filter.radius])
-    case 'drop-shadow': {
-      const { offsetX, offsetY, blurRadius, color } = filter
-      return stringifyFunction(type, [offsetX, offsetY, blurRadius, color], ' ')
-    }
-    case 'hue-rotate':
-      return stringifyFunction(type, [filter.angle])
-    default:
-      return stringifyFunction(type, [filter.amount])
-  }
-}
diff --git a/packages/gui/src/components/inputs/Filter/types.ts b/packages/gui/src/components/inputs/Filter/types.ts
deleted file mode 100644
index a00d46ab..00000000
--- a/packages/gui/src/components/inputs/Filter/types.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Angle, Color, Length, NumberPercentage } from '../../../types/css'
-
-// TODO URLs
-export type Filter = Blur | DropShadow | HueRotate | AmountFilter
-export type FilterType = Filter['type']
-
-export interface Blur {
-  type: 'blur'
-  radius: Length
-}
-
-export interface DropShadow {
-  type: 'drop-shadow'
-  offsetX: Length
-  offsetY: Length
-  blurRadius: Length
-  color: Color
-}
-
-export interface HueRotate {
-  type: 'hue-rotate'
-  angle: Angle
-}
-
-// A filter with a single number-percentage amount
-export interface AmountFilter {
-  type:
-    | 'brightness'
-    | 'contrast'
-    | 'grayscale'
-    | 'invert'
-    | 'opacity'
-    | 'saturate'
-    | 'sepia'
-  amount: NumberPercentage
-}
diff --git a/packages/gui/src/components/inputs/FontFamily/FontTags.tsx b/packages/gui/src/components/inputs/FontFamily/FontTags.tsx
index 7f3bafa2..52847684 100644
--- a/packages/gui/src/components/inputs/FontFamily/FontTags.tsx
+++ b/packages/gui/src/components/inputs/FontFamily/FontTags.tsx
@@ -1,56 +1,81 @@
 import * as React from 'react'
 import { debounce } from 'lodash-es'
-import { toGoogleFontUrl, toGoogleVariableFontUrl } from '../../../lib/util'
+import {
+  toGoogleFontUrl,
+  toGoogleVariableFontUrl,
+  FontFamilyData,
+} from '../../../lib/util'
 
-export const getVariableFontFamilyHref = async (fontFamily: string) => {
-  const formattedName = fontFamily?.replace(/['"]+/g, '')
-  try {
-    const res = await fetch(
-      `https://components.ai/api/v1/typefaces/variable?name=${formattedName}`
-    )
-    const varFontData = await res.json()
-    const fullData = {
-      name: fontFamily,
-      ...(varFontData ?? {}),
+const getVariableFontFamiliesData = async (fonts: string[]) => {
+  const data = []
+  for (const font of fonts) {
+    const formattedName = font.replace(/['"]+/g, '')
+    try {
+      const res = await fetch(
+        `https://components.ai/api/v1/typefaces/variable?name=${formattedName}`
+      )
+      const varFontData = await res.json()
+      data.push({
+        name: font,
+        ...(varFontData ?? {}),
+      })
+    } catch (e) {
+      console.error(`Failed to fetch variable font ${font}`)
     }
-
-    return toGoogleVariableFontUrl([fullData])
-  } catch {
-    return null
   }
+
+  return data
 }
 
-const getFontFamilyHref = async (font: string) => {
-  try {
-    const res = await fetch(`https://components.ai/api/v1/typefaces/${font}`)
-    const rawFontData = await res.json()
+const getFontFamiliesData = async (
+  fonts: string[]
+): Promise<FontFamilyData[]> => {
+  const data: FontFamilyData[] = []
+  for (const font of fonts) {
+    try {
+      const res = await fetch(`https://components.ai/api/v1/typefaces/${font}`)
+      const rawFontData = await res.json()
 
-    const styles = Object.keys(rawFontData?.variants)
-    const weights = Object.keys(rawFontData?.variants[styles[0]])
-    const fontData = {
-      name: rawFontData?.name,
-      weights,
-      styles,
+      const styles = Object.keys(rawFontData?.variants)
+      const weights = Object.keys(rawFontData?.variants[styles[0]])
+      data.push({
+        name: rawFontData?.name,
+        weights,
+        styles,
+      })
+    } catch (e) {
+      console.error(`Failed to fetch ${font}`)
     }
-
-    return toGoogleFontUrl([fontData])
-  } catch (e) {
-    console.error(`failed to fetch ${font} font`)
-    return null
   }
+
+  return data
+}
+
+export const buildVariableFontFamiliesHref = async (
+  fonts: string[]
+): Promise<string | null> => {
+  const fontData = await getVariableFontFamiliesData(fonts) 
+  return toGoogleVariableFontUrl(fontData)
+}
+
+export const buildFontFamiliesHref = async (
+  fonts: string[]
+): Promise<string | null> => {
+  const fontData = await getFontFamiliesData(fonts)
+  return toGoogleFontUrl(fontData)
 }
 
 const getVariableStyleSheet = async (
   fontFamily: string,
   setVariableStyleSheet: Function
 ) => {
-  const sheet = await getVariableFontFamilyHref(fontFamily)
+  const sheet = await buildVariableFontFamiliesHref([fontFamily])
   setVariableStyleSheet(sheet)
 }
 const debouncedVariableStyleSheet = debounce(getVariableStyleSheet, 1000)
 
 const getStyleSheet = async (fontFamily: string, setStyleSheet: Function) => {
-  const sheet = await getFontFamilyHref(fontFamily)
+  const sheet = await buildFontFamiliesHref([fontFamily])
   setStyleSheet(sheet)
 }
 const debouncedGetStyleSheet = debounce(getStyleSheet, 1000)
diff --git a/packages/gui/src/components/inputs/FontFamily/Input.tsx b/packages/gui/src/components/inputs/FontFamily/Input.tsx
index 502b9d39..fc242163 100644
--- a/packages/gui/src/components/inputs/FontFamily/Input.tsx
+++ b/packages/gui/src/components/inputs/FontFamily/Input.tsx
@@ -6,6 +6,7 @@ import { EditorProps } from '../../../types/editor'
 import { Label } from '../../primitives'
 import { NumberInput } from '../NumberInput'
 import { DeletePropButton } from '../Dimension/Input'
+import { useEditor } from '../../providers/EditorContext'
 
 type Font = {
   name: string
@@ -31,6 +32,8 @@ const nameMap: any = {
   CRSV: 'Cursive',
   MONO: 'Mono',
   slnt: 'Slant',
+  wdth: 'Width',
+  wght: 'Weight',
 }
 
 interface Props extends EditorProps<FontFamilyType> {
@@ -39,6 +42,7 @@ interface Props extends EditorProps<FontFamilyType> {
 }
 
 export function FontFamilyInput({ label, value, onChange, onRemove }: Props) {
+  const { theme } = useEditor()
   const id = React.useId()
   const fullId = `${id}-${label ? kebabCase(label) : 'font-family'}`
 
@@ -66,6 +70,7 @@ export function FontFamilyInput({ label, value, onChange, onRemove }: Props) {
     getFontData()
   }, [])
 
+  const themeFonts = Object.keys(theme.fonts || {})
   const [includeSans, setIncSans] = React.useState<boolean>(true)
   const [includeSerif, setIncSerif] = React.useState<boolean>(true)
   const [includeMono, setIncMono] = React.useState<boolean>(true)
@@ -116,7 +121,7 @@ export function FontFamilyInput({ label, value, onChange, onRemove }: Props) {
     })
 
     const items = filteredOptions.map((opt) => opt.name).sort()
-    setInputItems(items)
+    setInputItems([...themeFonts, ...items])
   }
 
   const handleFontChange = (name: string) => {
@@ -128,7 +133,7 @@ export function FontFamilyInput({ label, value, onChange, onRemove }: Props) {
     setVariableFont(fontData)
   }
 
-  const handleCustomAxesChange = (axisKey: string, newValue: any) => {
+  const handleCustomAxisChange = (axisKey: string, newValue: any) => {
     const axisDict: Record<string, any> = {}
     value.fontVariationSettings?.split(',').forEach((axis: string) => {
       const axisSplit = axis.split(' ')
@@ -153,7 +158,7 @@ export function FontFamilyInput({ label, value, onChange, onRemove }: Props) {
           {label}
         </Label>
       )}
-      <div sx={{ display: 'flex', flexDirection: 'row' }}>
+      <div sx={{ pb: 2, display: 'flex', flexDirection: 'row', gap: '8px' }}>
         <input
           type="text"
           value={value.fontFamily}
@@ -167,11 +172,9 @@ export function FontFamilyInput({ label, value, onChange, onRemove }: Props) {
               handleFilterItems('')
             }
           }}
-          sx={{ width: '100%', }}
+          sx={{ width: '100%' }}
         />
-        {onRemove && (
-          <DeletePropButton onRemove={onRemove} />
-        )}
+        {onRemove && <DeletePropButton onRemove={onRemove} />}
       </div>
       <div
         sx={{
@@ -249,8 +252,8 @@ export function FontFamilyInput({ label, value, onChange, onRemove }: Props) {
                 width: '100%',
                 alignItems: 'center',
                 justifyContent: 'space-between',
-                paddingY: 2,
-                paddingX: 3,
+                py: 2,
+                px: 3,
                 fontSize: 1,
               }}
             >
@@ -281,6 +284,7 @@ export function FontFamilyInput({ label, value, onChange, onRemove }: Props) {
                     margin: 0,
                     pl: 3,
                     py: 1,
+                    fontWeight: themeFonts.includes(item) ? 600 : 400,
                     backgroundColor:
                       highlightedIndex === index
                         ? 'backgroundOffset'
@@ -304,60 +308,30 @@ export function FontFamilyInput({ label, value, onChange, onRemove }: Props) {
             })}
         </ul>
       </div>
+      <section sx={{ 
+        display: 'flex', flexDirection: 'column', gap: '8px'
+      }}>
       {variableFont &&
         Object.entries(variableFont).map(([k, v]) => {
           if (['name', 'ital'].includes(k)) return null
           if (typeof v === 'string') return null
 
-          if (k === 'wdth') {
-            return (
-              <CustomAxis
-                key={k}
-                axisKey={k}
-                defaultValue={v.default}
-                value={value.fontVariationSettings ?? `'${k}' ${v.default};`}
-                onChange={(e: any) => handleCustomAxesChange(k, e)}
-                min={v.min}
-                max={v.max}
-                step={v.step}
-                label="Width"
-                sx={{ width: '100%' }}
-              />
-            )
-          }
-
-          if (k === 'wght') {
-            return (
-              <NumberInput
-                key={k}
-                value={value.fontWeight ?? v.default}
-                onChange={(newVal: number) =>
-                  onChange({ ...value, fontWeight: newVal })
-                }
-                min={v.min}
-                max={v.max}
-                step={v.step}
-                label="Font Weight"
-                sx={{ width: '100%' }}
-              />
-            )
-          }
-
           return (
             <CustomAxis
               key={k}
               defaultValue={v.default}
               value={value.fontVariationSettings}
-              onChange={(e: any) => handleCustomAxesChange(k, e)}
+              onChange={(e: any) => handleCustomAxisChange(k, e)}
               axisKey={k}
               min={v.min}
               max={v.max}
               step={v.step}
               label={nameMap[k] ?? k}
-              sx={{ width: '100%' }}
+              sx={{ width: '100%', }}
             />
           )
         })}
+      </section>
     </div>
   )
 }
diff --git a/packages/gui/src/components/inputs/Gradient/field.tsx b/packages/gui/src/components/inputs/Gradient/field.tsx
deleted file mode 100644
index 890eb73a..00000000
--- a/packages/gui/src/components/inputs/Gradient/field.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { SelectInput } from '../SelectInput'
-import { getInputProps } from '../../../lib/util'
-import GradientStopsField from './stops'
-import {
-  ConicGradient,
-  Gradient,
-  LinearGradient,
-  RadialGradient,
-} from './types'
-import { PositionInput } from '../PositionInput'
-import { AngleInput } from '../AngleInput'
-import { EditorProps } from '../../../types/editor'
-
-const gradientTypeOptions = [
-  'linear',
-  'radial',
-  'conic',
-  'repeating-linear',
-  'repeating-radial',
-  'repeating-conic',
-] as const
-type GradientFieldProps = {
-  value: Gradient
-  onChange: (newValue: Gradient) => void
-}
-export const GradientField = (props: GradientFieldProps) => {
-  return (
-    <div>
-      <div sx={{ py: 1, display: 'flex', alignItems: 'center' }}>
-        <SelectInput
-          {...getInputProps(props, 'type')}
-          options={gradientTypeOptions}
-          onChange={(type) => {
-            props.onChange({
-              ...getDefaultGradient(type),
-              // keep the stops of the current gradient when overriding
-              stops: props.value.stops,
-            })
-          }}
-        />
-      </div>
-      <GradientEditor {...props} />
-      <div sx={{ mt: 3 }}>
-        <GradientStopsField
-          {...getInputProps(props, 'stops')}
-          repeating={props.value.type?.startsWith('repeating-')}
-        />
-      </div>
-    </div>
-  )
-}
-
-export const GradientEditor = ({ value, ...props }: GradientFieldProps) => {
-  switch (value.type) {
-    case 'linear':
-    case 'repeating-linear':
-      return <LinearGradientEditor {...props} value={value as LinearGradient} />
-    case 'radial':
-    case 'repeating-radial':
-      return <RadialGradientEditor {...props} value={value as RadialGradient} />
-    case 'conic':
-    case 'repeating-conic':
-      return <ConicGradientEditor {...props} value={value as ConicGradient} />
-    default:
-      return null
-  }
-}
-
-export const LinearGradientEditor = (props: EditorProps<LinearGradient>) => {
-  return (
-    <AngleInput
-      {...getInputProps(props, 'angle')}
-      keywords={[
-        'to top',
-        'to right',
-        'to bottom',
-        'to left',
-        'to top left',
-        'to top right',
-        'to bottom right',
-        'to bottom left',
-      ]}
-    />
-  )
-}
-
-export const RadialGradientEditor = (props: EditorProps<RadialGradient>) => {
-  return (
-    <div>
-      <div sx={{ display: 'flex' }}>
-        <PositionInput {...getInputProps(props, 'position')} />
-      </div>
-      <div sx={{ display: 'flex' }}>
-        <SelectInput
-          {...getInputProps(props, 'shape')}
-          options={['circle', 'ellipse']}
-        />
-      </div>
-    </div>
-  )
-}
-
-export const ConicGradientEditor = (props: EditorProps<ConicGradient>) => {
-  return (
-    <div>
-      <div sx={{ display: 'flex' }}>
-        <PositionInput {...getInputProps(props, 'position')} />
-      </div>
-      <AngleInput {...getInputProps(props, 'angle')} />
-    </div>
-  )
-}
-
-function getDefaultGradient(type: Gradient['type']): Gradient {
-  switch (type) {
-    case 'linear':
-    case 'repeating-linear':
-      return {
-        type,
-        angle: { value: 0, unit: 'deg' },
-        stops: [],
-      }
-    case 'radial':
-    case 'repeating-radial':
-      return {
-        type,
-        shape: 'circle',
-        position: {
-          x: { value: 'center', unit: 'keyword' },
-          y: { value: 'center', unit: 'keyword' },
-        },
-        stops: [],
-      }
-    case 'conic':
-    case 'repeating-conic':
-      return {
-        type,
-        angle: { value: 0, unit: 'deg' },
-        position: {
-          x: { value: 'center', unit: 'keyword' },
-          y: { value: 'center', unit: 'keyword' },
-        },
-        stops: [],
-      }
-  }
-}
diff --git a/packages/gui/src/components/inputs/Gradient/stops.tsx b/packages/gui/src/components/inputs/Gradient/stops.tsx
index a8d91814..9f3795ac 100644
--- a/packages/gui/src/components/inputs/Gradient/stops.tsx
+++ b/packages/gui/src/components/inputs/Gradient/stops.tsx
@@ -8,18 +8,26 @@ import { NumberInput } from '../NumberInput'
 import { getInputProps, randomInt } from '../../../lib/util'
 import { GradientStop as GradientStopValue } from './types'
 import { stringifyGradient } from './stringify'
+import { useTheme } from '../../providers/ThemeContext'
+import { DataTypeSchema } from '../../schemas/types'
+import { SchemaInput } from '../SchemaInput'
+import { color } from '../../schemas/color'
+import { Theme } from '../../../types/theme'
 
 interface StopsProps {
   value: GradientStopValue[]
   onChange: any
   repeating: boolean
+  itemSchema: DataTypeSchema<any>
 }
 
 export default function GradientStopsField({
   onChange,
   value,
   repeating,
+  itemSchema,
 }: StopsProps) {
+  const theme = useTheme()
   const track = useRef<any>(null)
   const [selected, setSelected] = useState(-1)
   const [dragIndex, setDragIndex] = useState(-1)
@@ -65,14 +73,17 @@ export default function GradientStopsField({
 
   return (
     <div>
-      <label>Stops</label>
+      <label sx={{ fontSize: 0, fontWeight: 600 }}>Stops</label>
       <Toolbar
         onAdd={() => {
           setSelected(value.length)
           onChange([
             ...value,
             {
-              color: randomColor(),
+              color: {
+                type: 'theme',
+                path: randomColor({ theme, previousValue: '#000' }),
+              },
               hinting: randomInt(0, 100),
             },
           ])
@@ -97,10 +108,11 @@ export default function GradientStopsField({
           height: '2rem',
         }}
       >
-        <Track value={value} repeating={repeating} />
+        <Track value={value} repeating={repeating} theme={theme} />
         {value.map((stop, i) => {
           return (
             <Marker
+              theme={theme}
               tabIndex={0}
               key={i}
               value={stop}
@@ -137,7 +149,9 @@ export default function GradientStopsField({
         })}
       </div>
       {selected !== -1 && value[selected] && (
-        <StopFields
+        <SchemaInput
+          label=""
+          schema={itemSchema}
           value={value[selected]}
           onChange={(newStopValue: GradientStopValue) => {
             const newValue = produce(value, (draft: any) => {
@@ -182,8 +196,9 @@ function Toolbar({ onAdd, onDelete }: ToolbarProps) {
 interface TrackProps {
   repeating: boolean
   value: GradientStopValue[]
+  theme: Theme
 }
-function Track({ repeating, value }: TrackProps) {
+function Track({ repeating, value, theme }: TrackProps) {
   return (
     <div
       sx={{
@@ -200,11 +215,14 @@ function Track({ repeating, value }: TrackProps) {
           content: "''",
           position: 'absolute',
           inset: 0,
-          backgroundImage: stringifyGradient({
-            type: repeating ? 'repeating-linear' : 'linear',
-            angle: { value: 90, unit: 'deg' },
-            stops: value,
-          }),
+          backgroundImage: stringifyGradient(
+            {
+              type: repeating ? 'repeating-linear' : 'linear',
+              angle: { value: 90, unit: 'deg' },
+              stops: value,
+            },
+            theme
+          ),
         },
       }}
     />
@@ -218,7 +236,7 @@ interface StopFieldsProps {
 function StopFields(props: StopFieldsProps) {
   return (
     <div sx={{ display: 'grid', gridTemplateColumns: '2fr 1fr', mt: 2 }}>
-      <ColorInput {...getInputProps(props, 'color')} />
+      <ColorInput {...(getInputProps(props, 'color') as any)} />
       <NumberInput {...getInputProps(props, 'hinting')} />
     </div>
   )
@@ -226,9 +244,10 @@ function StopFields(props: StopFieldsProps) {
 
 interface MarkerProps extends HTMLAttributes<HTMLDivElement> {
   value: GradientStopValue
+  theme: Theme
   isSelected: boolean
 }
-function Marker({ value, isSelected, ...props }: MarkerProps) {
+function Marker({ value, isSelected, theme, ...props }: MarkerProps) {
   return (
     <div
       {...props}
@@ -237,6 +256,7 @@ function Marker({ value, isSelected, ...props }: MarkerProps) {
         position: 'absolute',
         borderRadius: '9999px',
         width: '2rem',
+        height: '2rem',
         aspectRatio: '1 / 1',
         border: '2px solid',
         borderColor: 'white',
@@ -257,7 +277,7 @@ function Marker({ value, isSelected, ...props }: MarkerProps) {
           content: "''",
           position: 'absolute',
           inset: 0,
-          backgroundColor: value.color,
+          backgroundColor: color().stringify(value.color, theme),
         },
       }}
     />
diff --git a/packages/gui/src/components/inputs/Gradient/stringify.ts b/packages/gui/src/components/inputs/Gradient/stringify.ts
index 11d2fe54..65631ae8 100644
--- a/packages/gui/src/components/inputs/Gradient/stringify.ts
+++ b/packages/gui/src/components/inputs/Gradient/stringify.ts
@@ -4,15 +4,17 @@ import {
   stringifyPosition,
   stringifyUnit,
 } from '../../../lib/stringify'
-import { Gradient } from './types'
+import { Theme } from '../../../types/theme'
+import { color } from '../../schemas/color'
+import { Gradient, GradientStop } from './types'
 
-export function stringifyGradient(gradient: Gradient): string {
+export function stringifyGradient(gradient: Gradient, theme?: Theme): string {
   switch (gradient.type) {
     case 'linear':
     case 'repeating-linear': {
       return stringifyFunction(gradient.type + '-gradient', [
         gradient.angle,
-        stringifyStops(gradient, '%'),
+        stringifyStops(gradient.stops, theme),
       ])
     }
     case 'radial':
@@ -21,25 +23,27 @@ export function stringifyGradient(gradient: Gradient): string {
         `${gradient.shape ?? 'circle'} at ${stringifyPosition(
           gradient.position
         )}`,
-        stringifyStops(gradient, '%'),
+        stringifyStops(gradient.stops, theme),
       ])
     }
     case 'conic':
     case 'repeating-conic': {
-      console.log(gradient.position, stringifyPosition(gradient.position))
       return stringifyFunction(gradient.type + '-gradient', [
         `from ${stringifyUnit(gradient.angle)} at ${stringifyPosition(
           gradient.position
         )}`,
-        stringifyStops(gradient, '%'),
+        stringifyStops(gradient.stops, theme),
       ])
     }
   }
 }
 
-const stringifyStops = (gradient: Gradient, unit: string) => {
-  return sortBy(gradient?.stops, (stop) => stop.hinting)
+export const stringifyStops = (stops: GradientStop[], theme?: Theme) => {
+  return sortBy(stops, (stop) => stop.hinting)
     ?.filter(Boolean)
-    ?.map(({ color, hinting }) => `${color} ${hinting}${unit}`)
+    ?.map(
+      ({ color: stopColor, hinting }) =>
+        `${color().stringify(stopColor, theme)} ${hinting}%`
+    )
     ?.join(', ')
 }
diff --git a/packages/gui/src/components/inputs/Gradient/types.ts b/packages/gui/src/components/inputs/Gradient/types.ts
index 606c7129..fe8f5ee0 100644
--- a/packages/gui/src/components/inputs/Gradient/types.ts
+++ b/packages/gui/src/components/inputs/Gradient/types.ts
@@ -1,4 +1,5 @@
 import { Angle, Color, Position } from '../../../types/css'
+import { ThemeColor } from '../../primitives/ColorPicker/PalettePicker'
 
 interface BaseGradient {
   type: string
@@ -6,7 +7,7 @@ interface BaseGradient {
 }
 
 export interface GradientStop {
-  color: Color
+  color: Color | ThemeColor
   hinting: number // TODO units
 }
 
diff --git a/packages/gui/src/components/inputs/GridLine.tsx b/packages/gui/src/components/inputs/GridLine.tsx
deleted file mode 100644
index ed20f2ba..00000000
--- a/packages/gui/src/components/inputs/GridLine.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { getInputProps } from '../../lib/util'
-import { Label, Number } from '../primitives'
-import * as Toggle from '@radix-ui/react-toggle'
-import { stringifyValues } from '../../lib/stringify'
-import { EditorPropsWithLabel } from '../../types/editor'
-
-interface GridLine {
-  span?: boolean
-  position: number
-  ident: string
-}
-
-interface Props extends EditorPropsWithLabel<GridLine> {}
-
-/**
- * Input for grid-{row/column}-{start/end}
- */
-export function GridLineInput(props: Props) {
-  const { label, value, onChange } = props
-  return (
-    <div>
-      <Label>{label}</Label>
-      <div sx={{ display: 'grid', gridTemplateColumns: 'max-content 1fr 1fr' }}>
-        <Toggle.Root
-          pressed={value.span}
-          onPressedChange={(pressed) => onChange({ ...value, span: pressed })}
-          sx={{
-            border: '1px solid',
-            borderColor: 'border',
-            backgroundColor: 'background',
-            color: 'muted',
-            '&[data-state=on]': {
-              backgroundColor: 'text',
-              color: 'background',
-            },
-          }}
-        >
-          span
-        </Toggle.Root>
-        <Number {...getInputProps(props, 'position')} />
-        <input
-          type="text"
-          value={value.ident}
-          onChange={(e) => onChange({ ...value, ident: e.target.value })}
-        />
-      </div>
-    </div>
-  )
-}
-
-export function stringifyGridLine(value: GridLine) {
-  const { span, position, ident } = value
-  return stringifyValues([span ? 'span' : null, position, ident ? ident : null])
-}
diff --git a/packages/gui/src/components/inputs/GridTrack/field.tsx b/packages/gui/src/components/inputs/GridTrack/field.tsx
deleted file mode 100644
index 39108b28..00000000
--- a/packages/gui/src/components/inputs/GridTrack/field.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { getInputProps } from '../../../lib/util'
-import { EditorProps, EditorPropsWithLabel } from '../../../types/editor'
-import Layers from '../../Layers'
-import { NumberInput } from '../NumberInput'
-import { SelectInput } from '../SelectInput'
-import TrackSizeListInput, {
-  getDefaultTrackSizeValue,
-  TrackSizeSwitch,
-} from '../TrackSize/field'
-import { TrackSize } from '../TrackSize/types'
-import { stringifyGridTrackList } from './stringify'
-import { GridTrack, TrackRepeat } from './types'
-
-export default function GridTrackListInput(
-  props: EditorPropsWithLabel<GridTrack[]>
-) {
-  const addItem = () => {
-    return {
-      type: 'breadth',
-      value: { value: 1, unit: 'fr' },
-    } as const
-  }
-  return (
-    <Layers
-      {...props}
-      stringify={stringifyGridTrackList}
-      newItem={addItem}
-      content={GridTrackInput}
-    />
-  )
-}
-
-function GridTrackInput(props: EditorProps<GridTrack>) {
-  return (
-    <div sx={{ m: 3, display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <SelectInput
-        {...getInputProps(props, 'type')}
-        options={['breadth', 'minmax', 'fit-content', 'repeat']}
-        onChange={(type) => props.onChange(getDefaultGridTrackValue(type))}
-      />
-      <GridTrackSwitch {...props} />
-    </div>
-  )
-}
-
-function GridTrackSwitch(props: EditorProps<GridTrack>) {
-  switch (props.value.type) {
-    case 'repeat': {
-      const _props = props as EditorProps<TrackRepeat>
-      return <TrackRepeatInput {..._props} />
-    }
-    default: {
-      const _props = props as EditorProps<TrackSize>
-      return <TrackSizeSwitch {..._props} />
-    }
-  }
-}
-
-function TrackRepeatInput(props: EditorProps<TrackRepeat>) {
-  return (
-    <div sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <NumberInput {...getInputProps(props, 'count')} min={0} />
-      <TrackSizeListInput {...getInputProps(props, 'trackList')} />
-    </div>
-  )
-}
-
-function getDefaultGridTrackValue(type: GridTrack['type']): GridTrack {
-  switch (type) {
-    case 'repeat': {
-      return {
-        type,
-        count: 1,
-        trackList: [{ type: 'breadth', value: { value: 1, unit: 'fr' } }],
-      }
-    }
-    default:
-      return getDefaultTrackSizeValue(type)
-  }
-}
diff --git a/packages/gui/src/components/inputs/GridTrack/stringify.ts b/packages/gui/src/components/inputs/GridTrack/stringify.ts
deleted file mode 100644
index c3ae2371..00000000
--- a/packages/gui/src/components/inputs/GridTrack/stringify.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { stringifyFunction } from '../../../lib/stringify'
-import {
-  stringifyTrackSize,
-  stringifyTrackSizeList,
-} from '../TrackSize/stringify'
-import { GridTrack, TrackRepeat } from './types'
-
-export function stringifyGridTrackList(trackList: GridTrack[]) {
-  return trackList.map(stringifyGridTrack).join(' ')
-}
-
-export function stringifyGridTrack(track: GridTrack) {
-  switch (track.type) {
-    case 'repeat':
-      return stringifyTrackRepeat(track)
-    default:
-      return stringifyTrackSize(track)
-  }
-}
-
-function stringifyTrackRepeat(track: TrackRepeat) {
-  const { type, count, trackList } = track
-  return stringifyFunction(type, [count, stringifyTrackSizeList(trackList)])
-}
diff --git a/packages/gui/src/components/inputs/GridTrack/types.ts b/packages/gui/src/components/inputs/GridTrack/types.ts
deleted file mode 100644
index 393057ba..00000000
--- a/packages/gui/src/components/inputs/GridTrack/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { CSSUnitValue } from '../../../types/css'
-import { TrackSize } from '../TrackSize/types'
-
-export type GridTrack = TrackSize | TrackRepeat
-
-// TODO track names
-export interface TrackRepeat {
-  type: 'repeat'
-  count: number // TODO change to accept keywords
-  trackList: TrackSize[]
-}
diff --git a/packages/gui/src/components/inputs/ImageSource/field.tsx b/packages/gui/src/components/inputs/ImageSource/field.tsx
deleted file mode 100644
index 47f90a18..00000000
--- a/packages/gui/src/components/inputs/ImageSource/field.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import Layers, { LayerProps } from '../../Layers'
-import { ImageSource, ImageSourceType } from './types'
-import { getInputProps } from '../../../lib/util'
-import { SelectInput } from '../SelectInput'
-import { stringifyImageSource } from './stringify'
-import { URLInput } from '../../primitives/URLInput'
-import produce from 'immer'
-import { GradientField } from '../Gradient/field'
-import { EditorPropsWithLabel } from '../../../types/editor'
-
-const DEFAULT_IMAGE_URL = ''
-export default function ImageSourceInput(
-  props: EditorPropsWithLabel<ImageSource[]>
-) {
-  const newItem = () => {
-    return getDefault('url')
-  }
-
-  return (
-    <Layers<ImageSource>
-      {...props}
-      newItem={newItem}
-      content={ImageSourceEditor}
-      stringify={stringifyImageSource}
-      thumbnail={Thumbnail}
-    />
-  )
-}
-
-export const ImageSourceEditor = (props: LayerProps<ImageSource>) => {
-  return (
-    <div>
-      <SelectInput
-        {...getInputProps(props, 'type')}
-        options={['url', 'gradient']}
-        onChange={(newType) => {
-          props.onChange(convertBackgroundImageValue(props.value, newType))
-        }}
-      />
-      {props.value.type === 'url' ? (
-        <URLInput
-          value={props.value.arguments[0]}
-          onChange={(newUrl: string) => {
-            const newValue = produce(props.value, (draft: any) => {
-              draft.arguments[0] = newUrl
-            })
-            props.onChange(newValue)
-          }}
-        />
-      ) : (
-        <GradientField
-          value={props.value.gradient}
-          onChange={(newGradient) => {
-            const newValue = produce(props.value, (draft: any) => {
-              draft.gradient = newGradient
-            })
-            props.onChange(newValue)
-          }}
-        />
-      )}
-    </div>
-  )
-}
-
-function Thumbnail({ value }: { value: string }) {
-  return (
-    <div
-      sx={{
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <div
-        sx={{
-          width: '1rem',
-          height: '1rem',
-          borderRadius: '9999px',
-          backgroundImage: value,
-        }}
-      />
-    </div>
-  )
-}
-
-function convertBackgroundImageValue(
-  value: ImageSource,
-  newType: ImageSourceType
-): ImageSource {
-  if (value.type === newType) {
-    return value
-  }
-
-  // Otherwise, reset to the default of that filter type
-  return getDefault(newType)
-}
-
-function getDefault(type: ImageSourceType): ImageSource {
-  switch (type) {
-    case 'gradient':
-      return {
-        type,
-        gradient: {
-          type: 'linear',
-          angle: { value: 0, unit: 'deg' },
-          stops: [],
-        },
-      }
-    case 'url':
-    default:
-      return { type: 'url', arguments: [DEFAULT_IMAGE_URL] }
-  }
-}
diff --git a/packages/gui/src/components/inputs/ImageSource/stringify.ts b/packages/gui/src/components/inputs/ImageSource/stringify.ts
deleted file mode 100644
index cbf8d9f0..00000000
--- a/packages/gui/src/components/inputs/ImageSource/stringify.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { stringifyFunction } from '../../../lib/stringify'
-import { stringifyGradient } from '../Gradient/stringify'
-import { ImageSource } from './types'
-
-export function stringifyImageSource(imageSource: ImageSource | ImageSource[]) {
-  if (Array.isArray(imageSource)) {
-    return imageSource.map(stringifyEntry).join(', ')
-  }
-  return stringifyEntry(imageSource)
-}
-
-function stringifyEntry(imageSource: ImageSource) {
-  const { type } = imageSource
-  switch (type) {
-    case 'gradient': {
-      return stringifyGradient(imageSource.gradient)
-    }
-    case 'url':
-    default:
-      return stringifyFunction(type, imageSource.arguments)
-  }
-}
diff --git a/packages/gui/src/components/inputs/ImageSource/types.ts b/packages/gui/src/components/inputs/ImageSource/types.ts
deleted file mode 100644
index 4c1ed88d..00000000
--- a/packages/gui/src/components/inputs/ImageSource/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { CSSFunctionURL } from '../../../types/css'
-import { Gradient } from '../Gradient/types'
-
-// TODO: The background-image grammar and functionality is actually much
-// more complex, but for now we'll just roll with url() and gradients.
-// For now, we'll hardcode the bg image as a single element stack which
-// we serialize, though in the future there's no reason why we can't expose
-// this as a proper stack/layer.
-export type ImageSourceType = 'url' | 'gradient'
-export type ImageSourceGradient = {
-  type: 'gradient'
-  gradient: Gradient
-}
-export type ImageSource = CSSFunctionURL | ImageSourceGradient
diff --git a/packages/gui/src/components/inputs/KeywordInput.tsx b/packages/gui/src/components/inputs/KeywordInput.tsx
new file mode 100644
index 00000000..9e0cc236
--- /dev/null
+++ b/packages/gui/src/components/inputs/KeywordInput.tsx
@@ -0,0 +1,23 @@
+import { EditorPropsWithLabel } from '../../types/editor'
+import { KeywordSelect } from '../primitives/KeywordSelect'
+import { InputHeader } from '../ui/InputHeader'
+
+interface Props<T extends string> extends EditorPropsWithLabel<T> {
+  options: T[]
+}
+export function KeywordInput<T extends string>(props: Props<T>) {
+  return (
+    <div
+      sx={{
+        border: '1px solid',
+        borderColor: 'border',
+        borderRadius: '0.25rem',
+        width: 'max-content',
+        px: 2,
+        py: 1,
+      }}
+    >
+      <KeywordSelect {...props} value={String(props.value)} />
+    </div>
+  )
+}
diff --git a/packages/gui/src/components/inputs/LengthInput.tsx b/packages/gui/src/components/inputs/LengthInput.tsx
deleted file mode 100644
index ee8b6b48..00000000
--- a/packages/gui/src/components/inputs/LengthInput.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { compact } from 'lodash-es'
-import {
-  CSSFunctionCalc,
-  CSSUnitValue,
-  Dimension,
-  Length,
-  LENGTH_UNITS,
-  PercentageLengthUnits,
-  UnitlessUnits,
-} from '../../types/css'
-import { DimensionInput } from './Dimension'
-
-interface LengthInputProps {
-  value: Dimension
-  onChange: (value: Length) => void
-  label: string
-  property?: string
-  keywords?: string[]
-  number?: boolean
-  percentage?: boolean
-  flex?: boolean
-  themeValues?: (CSSUnitValue & { id: string })[]
-}
-
-export function LengthInput({
-  property,
-  number,
-  percentage,
-  flex,
-  value: providedValue,
-  ...props
-}: LengthInputProps) {
-  const units = compact([
-    number && UnitlessUnits.Number,
-    ...LENGTH_UNITS,
-    percentage && PercentageLengthUnits.Pct,
-    flex && 'fr', // TODO flex should be non-negative
-  ])
-  const value =
-    providedValue === '0' ? { value: 0, unit: 'number' } : providedValue
-  return (
-    <DimensionInput
-      value={value}
-      units={units}
-      conversions={lengthConversions}
-      steps={lengthSteps}
-      property={property}
-      {...props}
-    />
-  )
-}
-
-const lengthConversions = {
-  px: 16,
-  rem: 1,
-  em: 1,
-}
-
-const lengthSteps = {
-  number: 0.1,
-  theme: 1,
-  px: 1,
-  em: 0.125,
-  rem: 0.125,
-  '%': 0.1,
-  fr: 0.1,
-}
diff --git a/packages/gui/src/components/inputs/Mask/field.tsx b/packages/gui/src/components/inputs/Mask/field.tsx
deleted file mode 100644
index d8295d9c..00000000
--- a/packages/gui/src/components/inputs/Mask/field.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { EditorProps, EditorPropsWithLabel } from '../../../types/editor'
-
-import { stringifyMaskList } from './stringify'
-
-import Layers from '../../Layers'
-import { getInputProps } from '../../../lib/util'
-import { ImageSourceEditor } from '../ImageSource/field'
-import { PositionInput } from '../PositionInput'
-import { SelectInput } from '../SelectInput'
-import { Mask, compositingOperators, maskingModes } from './types'
-import { RepeatStyleInput } from '../Background/field'
-import { BgSizeInput } from '../BgSizeInput'
-import { GEOMETRY_BOX_KEYWORDS } from '../../../types/css'
-
-export default function MaskInput(props: EditorPropsWithLabel<Mask[]>) {
-  const newItem = () => {
-    // generate a new text shadow with the units of the previous box shadow
-    return {
-      clip: 'border-box',
-      image: {
-        type: 'gradient',
-        gradient: {
-          type: 'linear',
-          angle: { value: 0, unit: 'deg' },
-          stops: [],
-        },
-      },
-      origin: 'border-box',
-      position: {
-        x: { value: 0, unit: 'px' },
-        y: { value: 0, unit: 'px' },
-      },
-      repeat: {
-        x: 'no-repeat',
-        y: 'no-repeat',
-      },
-      size: {
-        x: { value: 100, unit: '%' },
-        y: { value: 100, unit: '%' },
-      },
-      composite: 'add',
-      mode: 'alpha',
-    } as any
-  }
-  return (
-    <Layers<Mask>
-      {...props}
-      newItem={newItem}
-      content={MaskLayer}
-      stringify={stringifyMaskList}
-      thumbnail={Thumbnail}
-    />
-  )
-}
-
-export const MaskLayer = (props: EditorProps<Mask>) => {
-  return (
-    <div sx={{ m: 3, display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <ImageSourceEditor {...getInputProps(props, 'image')} />
-      <PositionInput {...getInputProps(props, 'position')} />
-      <BgSizeInput {...getInputProps(props, 'size')} />
-      <RepeatStyleInput {...getInputProps(props, 'repeat')} />
-      <SelectInput
-        {...getInputProps(props, 'origin')}
-        options={GEOMETRY_BOX_KEYWORDS}
-      />
-      <SelectInput
-        {...getInputProps(props, 'clip')}
-        options={[...GEOMETRY_BOX_KEYWORDS, 'no-clip']}
-      />
-      <SelectInput
-        {...getInputProps(props, 'composite')}
-        options={compositingOperators}
-      />
-      <SelectInput {...getInputProps(props, 'mode')} options={maskingModes} />
-    </div>
-  )
-}
-
-function Thumbnail({ value }: { value: string }) {
-  return (
-    <div
-      sx={{
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        mask: value,
-        backgroundImage:
-          'conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)',
-      }}
-    ></div>
-  )
-}
diff --git a/packages/gui/src/components/inputs/Mask/stringify.ts b/packages/gui/src/components/inputs/Mask/stringify.ts
deleted file mode 100644
index 1a61f2e4..00000000
--- a/packages/gui/src/components/inputs/Mask/stringify.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { stringifyPosition, stringifyValues } from '../../../lib/stringify'
-import { stringifyRepeatStyle } from '../Background/stringify'
-import { stringifyBgSize } from '../BgSizeInput'
-import { stringifyImageSource } from '../ImageSource/stringify'
-import { Mask } from './types'
-
-export function stringifyMaskList(maskList: Mask[]) {
-  return maskList.map(stringifyMask).join(', ')
-}
-
-function stringifyMask(mask: Mask) {
-  const { clip, image, origin, position, repeat, size, composite, mode } = mask
-  return stringifyValues([
-    stringifyImageSource(image),
-    stringifyPosition(position),
-    `/ ${stringifyBgSize(size)}`,
-    stringifyRepeatStyle(repeat),
-    origin,
-    clip,
-    composite,
-    mode,
-  ])
-}
diff --git a/packages/gui/src/components/inputs/Mask/types.ts b/packages/gui/src/components/inputs/Mask/types.ts
deleted file mode 100644
index 55cf54d5..00000000
--- a/packages/gui/src/components/inputs/Mask/types.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { GeometryBox, Position } from '../../../types/css'
-import { RepeatStyle } from '../Background/types'
-import { BgSize } from '../BgSizeInput'
-import { ImageSource } from '../ImageSource/types'
-
-export interface Mask {
-  clip: GeometryBox | 'no-clip'
-  composite: CompositeOperator
-  image: ImageSource
-  mode: MaskingMode
-  origin: GeometryBox
-  position: Position
-  repeat: RepeatStyle
-  size: BgSize
-}
-
-export const maskingModes = ['alpha', 'luminance', 'match-source'] as const
-type MaskingMode = typeof maskingModes[number]
-
-export const compositingOperators = [
-  'add',
-  'subtract',
-  'intersect',
-  'exclude',
-] as const
-type CompositeOperator = typeof compositingOperators[number]
diff --git a/packages/gui/src/components/inputs/Multidimension/Input.tsx b/packages/gui/src/components/inputs/Multidimension/Input.tsx
deleted file mode 100644
index d45523ae..00000000
--- a/packages/gui/src/components/inputs/Multidimension/Input.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as React from 'react'
-import {
-  CSSUnitValue,
-  Length,
-  MultidimensionalLength,
-} from '../../../types/css'
-import { reducer } from './reducer'
-import { State } from './types'
-import { EditorProps } from '../../../types/editor'
-import { DEFAULT_LENGTH } from '../../../lib/constants'
-import { LengthInput } from '../LengthInput'
-import { isMultidimensionalLength } from '../../../lib/util'
-import { convertToMultidimensional } from './util'
-
-// Mapping of units to [min, max] tuple
-type UnitRanges = Record<string, [min: number, max: number]>
-// Mapping of units to steps
-type UnitSteps = Record<string, number>
-
-export interface MultidimensionInputProps
-  extends EditorProps<MultidimensionalLength | Length> {
-  label?: string
-  dimensions: number
-}
-export const MultidimensionInput = ({
-  value,
-  onChange,
-  dimensions,
-  label,
-  ...props
-}: MultidimensionInputProps) => {
-  const [state, dispatch] = React.useReducer(reducer, {
-    value: convertToMultidimensional(value ?? DEFAULT_LENGTH),
-    dimensions,
-    isMultidimensional: isMultidimensionalLength(value),
-    key: 0,
-  } as State)
-  React.useEffect(() => {
-    onChange(state.value)
-  }, [state])
-
-  const handleDimensionChange = (dimension: number) => (value: Length) => {
-    dispatch({
-      type: 'CHANGED_VALUE',
-      dimension,
-      value,
-    })
-  }
-
-  return (
-    <div>
-      <>
-        <LengthInput
-          label=""
-          value={(state.value as MultidimensionalLength).values[0]}
-          onChange={handleDimensionChange(0)}
-          {...props}
-        />
-        <div sx={{ pt: 1 }}>
-          <LengthInput
-            label=""
-            value={(state.value as MultidimensionalLength).values[1]}
-            onChange={handleDimensionChange(1)}
-            {...props}
-          />
-        </div>
-      </>
-    </div>
-  )
-}
diff --git a/packages/gui/src/components/inputs/Multidimension/index.ts b/packages/gui/src/components/inputs/Multidimension/index.ts
deleted file mode 100644
index ba0d3b5d..00000000
--- a/packages/gui/src/components/inputs/Multidimension/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { MultidimensionInput } from './Input'
diff --git a/packages/gui/src/components/inputs/Multidimension/reducer.ts b/packages/gui/src/components/inputs/Multidimension/reducer.ts
deleted file mode 100644
index d39b32a7..00000000
--- a/packages/gui/src/components/inputs/Multidimension/reducer.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import produce from 'immer'
-import { CSSUnitValue, MultidimensionalLengthUnit } from '../../../types/css'
-import { State, Action } from './types'
-import { convertToMultidimensional } from './util'
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case 'CHANGED_VALUE': {
-      const dimension = action.dimension as number
-      const newValueItem = action.value as CSSUnitValue
-
-      // @ts-ignore
-      if (isNaN(newValueItem.value) && dimension > 0) {
-        const firstValue = convertToMultidimensional(state.value).values[0]
-
-        return {
-          ...state,
-          isMultidimensional: false,
-          value: firstValue,
-        }
-      }
-
-      const newValue = produce(
-        convertToMultidimensional(state.value),
-        (draft: MultidimensionalLengthUnit) => {
-          draft.values[dimension] = newValueItem
-        }
-      )
-
-      return {
-        ...state,
-        isMultidimensional: true,
-        value: newValue,
-      }
-    }
-    default: {
-      break
-    }
-  }
-
-  return state
-}
diff --git a/packages/gui/src/components/inputs/Multidimension/types.ts b/packages/gui/src/components/inputs/Multidimension/types.ts
deleted file mode 100644
index 87d87716..00000000
--- a/packages/gui/src/components/inputs/Multidimension/types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Length, MultidimensionalLengthUnit } from '../../../types/css'
-
-export type State = {
-  key: number
-  dimensions: number
-  value: MultidimensionalLengthUnit | Length
-  isMultidimensional: boolean
-}
-
-export type Action =
-  | {
-      type: 'CHANGED_VALUE'
-      dimension: number
-      value: Length
-    }
-  | {
-      type: 'TOGGLE_MULTIDIMENSIONAL'
-    }
diff --git a/packages/gui/src/components/inputs/Multidimension/util.ts b/packages/gui/src/components/inputs/Multidimension/util.ts
deleted file mode 100644
index 3b747858..00000000
--- a/packages/gui/src/components/inputs/Multidimension/util.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { isMultidimensionalLength } from '../../../lib/util'
-import { Length, MultidimensionalLength } from '../../../types/css'
-
-export const convertToMultidimensional = (
-  value: Length | MultidimensionalLength,
-  dimensions: number = 2
-): MultidimensionalLength => {
-  if (isMultidimensionalLength(value)) {
-    return value as MultidimensionalLength
-  }
-
-  const values = Array(dimensions).fill(value)
-
-  return {
-    type: 'multidimensionalLength',
-    values: values,
-  }
-}
diff --git a/packages/gui/src/components/inputs/NumberInput.tsx b/packages/gui/src/components/inputs/NumberInput.tsx
index 96a4e2f2..6368a55d 100644
--- a/packages/gui/src/components/inputs/NumberInput.tsx
+++ b/packages/gui/src/components/inputs/NumberInput.tsx
@@ -1,21 +1,27 @@
-import { kebabCase } from 'lodash-es'
-import { useId } from 'react'
-import { Number, Label } from '../primitives'
-import { EditorProps } from '../../types/editor'
+import { Number } from '../primitives'
+import { EditorPropsWithLabel } from '../../types/editor'
+import { InputHeader } from '../ui/InputHeader'
 
-interface Props extends EditorProps<number> {
-  label: string
+interface Props extends EditorPropsWithLabel<number> {
   min?: number
   max?: number
   step?: number
 }
 /** A labelled number field */
-export function NumberInput({ label, value, ...props }: Props) {
-  const id = `${useId()}-${kebabCase(label)}`
+export function NumberInput(props: Props) {
   return (
-    <div>
-      <Label htmlFor={id}>{label}</Label>
-      <Number id={id} value={value} {...props} />
-    </div>
+    <InputHeader {...props}>
+      <div
+        sx={{
+          px: 1,
+          border: '1px solid',
+          borderColor: 'border',
+          borderRadius: '0.25rem',
+          width: 'min-content',
+        }}
+      >
+        <Number {...props} />
+      </div>
+    </InputHeader>
   )
 }
diff --git a/packages/gui/src/components/inputs/OffsetPath.tsx b/packages/gui/src/components/inputs/OffsetPath.tsx
deleted file mode 100644
index 8799fcd2..00000000
--- a/packages/gui/src/components/inputs/OffsetPath.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Label } from 'theme-ui'
-import { stringifyValues } from '../../lib/stringify'
-import { EditorPropsWithLabel, getInputProps } from '../../lib/util'
-import { GeometryBox, GEOMETRY_BOX_KEYWORDS } from '../../types/css'
-import { BasicShapeInput } from './BasicShape/input'
-import { stringifyBasicShape } from './BasicShape/stringify'
-import { BasicShape } from './BasicShape/types'
-import { SelectInput } from './SelectInput'
-
-// TODO `url()` and `ray()` options
-interface OffsetPath {
-  shape: BasicShape
-  box: GeometryBox
-}
-
-export function OffsetPathInput(props: EditorPropsWithLabel<OffsetPath>) {
-  return (
-    <div>
-      <Label>{props.label}</Label>
-      <BasicShapeInput {...getInputProps(props, 'shape')} />
-      <SelectInput
-        {...getInputProps(props, 'box')}
-        options={GEOMETRY_BOX_KEYWORDS}
-      />
-    </div>
-  )
-}
-
-export function stringifyOffsetPath(value: OffsetPath) {
-  return stringifyValues([stringifyBasicShape(value.shape)])
-}
diff --git a/packages/gui/src/components/inputs/PositionInput.tsx b/packages/gui/src/components/inputs/PositionInput.tsx
deleted file mode 100644
index 232884f9..00000000
--- a/packages/gui/src/components/inputs/PositionInput.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { getInputProps } from '../../lib/util'
-import { Position } from '../../types/css'
-import { EditorPropsWithLabel } from '../../types/editor'
-import { Label } from '../primitives'
-import { DeletePropButton } from './Dimension/Input'
-import { LengthInput } from './LengthInput'
-
-export function PositionInput({ onRemove, ...props }: EditorPropsWithLabel<Position>) {
-  return (
-    <div>
-      <Label>{props.label}</Label>
-      <div sx={{ display: 'grid', gap: 1 }}>
-        <LengthInput
-          {...getInputProps(props, 'x')}
-          percentage
-          keywords={['left', 'center', 'right']}
-        />
-        <LengthInput
-          {...getInputProps(props, 'y')}
-          percentage
-          keywords={['top', 'center', 'bottom']}
-        />
-        {onRemove && (
-          <DeletePropButton onRemove={onRemove} />
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/packages/gui/src/components/inputs/PrimitiveInput.tsx b/packages/gui/src/components/inputs/PrimitiveInput.tsx
new file mode 100644
index 00000000..94640db8
--- /dev/null
+++ b/packages/gui/src/components/inputs/PrimitiveInput.tsx
@@ -0,0 +1,42 @@
+import { CSSUnitValue } from '../../types/css'
+import { EditorPropsWithLabel } from '../../types/editor'
+import { DimensionInput } from './Dimension'
+import { NumberInput } from './NumberInput'
+
+export const IntegerInput = ({
+  value,
+  onChange,
+  onRemove,
+  label,
+  ...props
+}: EditorPropsWithLabel<number>) => {
+  return (
+    <NumberInput
+      value={value}
+      label={label}
+      onChange={onChange}
+      onRemove={onRemove}
+      {...props}
+    />
+  )
+}
+
+export const PercentageInput = ({
+  value,
+  onChange,
+  onRemove,
+  label,
+  ...props
+}: EditorPropsWithLabel<CSSUnitValue>) => {
+  return (
+    <DimensionInput
+      value={value}
+      label={label}
+      onChange={onChange}
+      onRemove={onRemove}
+      units={['%']}
+      steps={{ '%': 0.1 }}
+      {...props}
+    />
+  )
+}
diff --git a/packages/gui/src/components/inputs/SchemaInput.tsx b/packages/gui/src/components/inputs/SchemaInput.tsx
new file mode 100644
index 00000000..a966af70
--- /dev/null
+++ b/packages/gui/src/components/inputs/SchemaInput.tsx
@@ -0,0 +1,84 @@
+import { DataTypeSchema } from '../schemas/types'
+import * as Collapsible from '@radix-ui/react-collapsible'
+import { InputHeader } from '../ui/InputHeader'
+import IconButton from '../ui/IconButton'
+import { ChevronDown } from 'react-feather'
+
+interface Props<T> {
+  schema: DataTypeSchema<T>
+  label: string
+  value: T
+  ruleset?: any
+  property?: string
+  onChange(value: T): void
+  onRemove?(): void
+  onDrag?(): void
+  onDragEnd?(): void
+}
+
+/**
+ * Creates a labelled input from a schema
+ */
+export function SchemaInput<T>({
+  schema,
+  label,
+  value,
+  onChange,
+  ruleset,
+  property,
+  ...props
+}: Props<T>) {
+  const Input = schema.input
+  const InlineInput = schema.inlineInput
+
+  const content = Input && (
+    <Input
+      label=""
+      value={value}
+      onChange={onChange}
+      ruleset={ruleset}
+      property={property}
+    />
+  )
+  const { hasBlockInput = () => !!content } = schema
+  return (
+    <Collapsible.Root defaultOpen>
+      <InputHeader
+        {...schema}
+        {...props}
+        label={label}
+        value={value}
+        onChange={onChange}
+        ruleset={ruleset}
+        property={property}
+      >
+        {hasBlockInput(value) && (
+          <Collapsible.Trigger asChild>
+            <IconButton
+              sx={{
+                mr: 2,
+                transform: 'rotate(0deg)',
+                transition: 'transform 250ms',
+                '&[data-state=closed]': {
+                  transform: 'rotate(-90deg)',
+                },
+              }}
+            >
+              <ChevronDown size={14} />
+            </IconButton>
+          </Collapsible.Trigger>
+        )}
+        {InlineInput && (
+          <InlineInput
+            label=''
+            value={value}
+            onChange={onChange}
+            ruleset={ruleset}
+            property={property}
+          />
+        )}
+      </InputHeader>
+      {content && <Collapsible.Content>{content}</Collapsible.Content>}
+    </Collapsible.Root>
+  )
+}
diff --git a/packages/gui/src/components/inputs/ScrollSnapAlign.tsx b/packages/gui/src/components/inputs/ScrollSnapAlign.tsx
deleted file mode 100644
index 6ce15e08..00000000
--- a/packages/gui/src/components/inputs/ScrollSnapAlign.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { stringifyValues } from '../../lib/stringify'
-import { getInputProps } from '../../lib/util'
-import { EditorProps } from '../../types/editor'
-import { Label } from '../primitives'
-import { SelectInput } from './SelectInput'
-
-interface ScrollSnapAlign {
-  x: SnapPosition
-  y: SnapPosition
-}
-
-const snapPositions = ['none', 'start', 'center', 'end'] as const
-type SnapPosition = typeof snapPositions[number]
-
-export function ScrollSnapAlignInput(props: EditorProps<ScrollSnapAlign>) {
-  return (
-    <div>
-      <Label>{props.label}</Label>
-      <div sx={{ display: 'grid', gap: 1 }}>
-        <SelectInput {...getInputProps(props, 'x')} options={snapPositions} />
-        <SelectInput {...getInputProps(props, 'y')} options={snapPositions} />
-      </div>
-    </div>
-  )
-}
-
-export function stringifyScrollSnapAlign(value: ScrollSnapAlign) {
-  const { x, y } = value
-  return stringifyValues([x, y])
-}
diff --git a/packages/gui/src/components/inputs/SelectInput.tsx b/packages/gui/src/components/inputs/SelectInput.tsx
index d5766982..d574d680 100644
--- a/packages/gui/src/components/inputs/SelectInput.tsx
+++ b/packages/gui/src/components/inputs/SelectInput.tsx
@@ -1,7 +1,5 @@
-import { kebabCase } from 'lodash-es'
-import { useId } from 'react'
-import { Label } from '../primitives'
-import { DeletePropButton } from './Dimension/Input'
+import * as Select from '../ui/Select'
+import { InputHeader } from '../ui/InputHeader'
 
 interface Props<T extends string> {
   label: string
@@ -9,41 +7,45 @@ interface Props<T extends string> {
   onRemove?: () => void
   value: T
   options: readonly T[]
+  ruleset?: any
+  property?: string
+  decorateText?(text: T): string
 }
 // A select input with a label
 export function SelectInput<T extends string>({
-  label,
-  value,
-  onChange,
-  onRemove,
-  options,
+  decorateText,
+  ...props
 }: Props<T>) {
-  const id = `${useId()}-${kebabCase(label)}`
+  const { value, onChange, options = [] } = props
 
   return (
-    <div>
-      <Label htmlFor={id}>
-        <span>{label}</span>
-        <div sx={{ display: 'flex', flexDirection: 'row' }}>
-          <select
-            id={id}
-            value={value}
-            onChange={(e) => onChange(e.target.value as T)}
-            sx={{ width: '100%', minHeight: '1.6em', mr: 1 }}
-          >
-            {options.map((v) => {
-              return (
-                <option key={v} value={v}>
-                  {v}
-                </option>
-              )
-            })}
-          </select>
-          {onRemove && (
-            <DeletePropButton onRemove={onRemove}/>
-          )}
-        </div>
-      </Label>
-    </div>
+    <InputHeader {...props}>
+      <Select.Root value={value} onValueChange={onChange}>
+        <Select.Trigger
+          sx={{
+            border: '1px solid',
+            borderColor: 'border',
+            borderRadius: '0.25rem',
+            height: '1.25rem',
+            px: 2,
+          }}
+        >
+          <Select.Value />
+          <Select.Icon />
+        </Select.Trigger>
+        <Select.Content>
+          {options.map((v) => {
+            return (
+              <Select.Item key={v} value={v}>
+                <Select.ItemIndicator />
+                <Select.ItemText>
+                  {decorateText ? decorateText(v) : v}
+                </Select.ItemText>
+              </Select.Item>
+            )
+          })}
+        </Select.Content>
+      </Select.Root>
+    </InputHeader>
   )
 }
diff --git a/packages/gui/src/components/inputs/ShapeOutside.tsx b/packages/gui/src/components/inputs/ShapeOutside.tsx
deleted file mode 100644
index 3a1a5525..00000000
--- a/packages/gui/src/components/inputs/ShapeOutside.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { stringifyValues } from '../../lib/stringify'
-import { getInputProps } from '../../lib/util'
-import { ShapeBox, SHAPE_BOX_KEYWORDS } from '../../types/css'
-import { EditorProps, EditorPropsWithLabel } from '../../types/editor'
-import { Label } from '../primitives'
-import { BasicShapeInput, getDefaultBasicShape } from './BasicShape/input'
-import { stringifyBasicShape } from './BasicShape/stringify'
-import { BasicShape } from './BasicShape/types'
-import { ImageSourceEditor } from './ImageSource/field'
-import { stringifyImageSource } from './ImageSource/stringify'
-import { ImageSource } from './ImageSource/types'
-import { SelectInput } from './SelectInput'
-
-type ShapeOutside = Image | Shape
-
-interface Image {
-  type: 'image'
-  image: ImageSource
-}
-
-interface Shape {
-  type: 'shape'
-  shape: BasicShape
-  box: ShapeBox
-}
-
-export function ShapeOutsideInput(props: EditorPropsWithLabel<ShapeOutside>) {
-  return (
-    <div>
-      <Label>{props.label}</Label>
-      <SelectInput
-        {...getInputProps(props, 'type')}
-        options={['image', 'shape']}
-        onChange={(type) => props.onChange(getDefaultValue(type))}
-      />
-      <ShapeOutsideSwitch {...props} />
-    </div>
-  )
-}
-
-function ShapeOutsideSwitch(props: EditorProps<ShapeOutside>) {
-  switch (props.value.type) {
-    case 'image': {
-      const _props = props as EditorProps<Image>
-      return <ImageSourceEditor {...getInputProps(_props, 'image')} />
-    }
-    case 'shape': {
-      const _props = props as EditorProps<Shape>
-      return (
-        <div>
-          <BasicShapeInput {...getInputProps(_props, 'shape')} />
-          <SelectInput
-            {...getInputProps(_props, 'box')}
-            options={SHAPE_BOX_KEYWORDS}
-          />
-        </div>
-      )
-    }
-  }
-}
-
-export function stringifyShapeOutside(value: ShapeOutside) {
-  switch (value.type) {
-    case 'image': {
-      return stringifyImageSource(value.image)
-    }
-    case 'shape': {
-      return stringifyValues([stringifyBasicShape(value.shape), value.box])
-    }
-  }
-}
-
-function getDefaultValue(type: 'image' | 'shape'): ShapeOutside {
-  switch (type) {
-    case 'image': {
-      return {
-        type,
-        image: {
-          type: 'gradient',
-          gradient: {
-            type: 'linear',
-            angle: { value: 0, unit: 'deg' },
-            stops: [
-              { hinting: 0, color: 'black' },
-              { hinting: 100, color: 'transparent' },
-            ],
-          },
-        },
-      }
-    }
-    case 'shape': {
-      return {
-        type,
-        shape: getDefaultBasicShape('inset'),
-        box: 'content-box',
-      }
-    }
-  }
-}
diff --git a/packages/gui/src/components/inputs/StrokeDasharray.tsx b/packages/gui/src/components/inputs/StrokeDasharray.tsx
deleted file mode 100644
index 8dcfdedf..00000000
--- a/packages/gui/src/components/inputs/StrokeDasharray.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { stringifyValues } from '../../lib/stringify'
-import { Length } from '../../types/css'
-import { EditorPropsWithLabel } from '../../types/editor'
-import FieldArray from '../FieldArray'
-import { LengthInput } from './LengthInput'
-
-export function StrokeDasharrayInput({
-  label,
-  value,
-  onChange,
-}: EditorPropsWithLabel<Length[]>) {
-  return (
-    <FieldArray
-      label={label}
-      value={value}
-      onChange={onChange}
-      content={StrokeDasharrayContent}
-      stringify={stringifyStrokeDasharray}
-      newItem={() => ({ value: 0, unit: 'number' })}
-    />
-  )
-}
-
-function StrokeDasharrayContent({
-  label,
-  value,
-  onChange,
-}: EditorPropsWithLabel<Length>) {
-  return (
-    <LengthInput
-      percentage
-      number
-      label={label}
-      value={value}
-      onChange={onChange}
-    />
-  )
-}
-
-export function stringifyStrokeDasharray(items: Length[]) {
-  return stringifyValues(items)
-}
diff --git a/packages/gui/src/components/inputs/TextDecoration.tsx b/packages/gui/src/components/inputs/TextDecoration.tsx
deleted file mode 100644
index ff7344f5..00000000
--- a/packages/gui/src/components/inputs/TextDecoration.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { stringifyValues } from '../../lib/stringify'
-import { getInputProps } from '../../lib/util'
-import { Color, Length } from '../../types/css'
-import { EditorPropsWithLabel } from '../../types/editor'
-import { Label } from '../primitives'
-import { ColorInput } from './ColorInput'
-import { LengthInput } from './LengthInput'
-import { SelectInput } from './SelectInput'
-
-interface TextDecoration {
-  color: Color
-  line: TextDecorationLine
-  style: TextDecorationStyle
-  thickness: Length
-}
-
-export const textDecorationLines = [
-  'none',
-  'underline',
-  'overline',
-  'line-through',
-  'blink',
-  'underline line-through',
-  'underline overline',
-  'overline line-through',
-  'underline overline line-through',
-] as const
-type TextDecorationLine = typeof textDecorationLines[number]
-
-export const textDecorationStyles = [
-  'solid',
-  'double',
-  'dotted',
-  'dashed',
-  'wavy',
-] as const
-type TextDecorationStyle = typeof textDecorationStyles[number]
-
-// TODO I want this to be collapsible
-export function TextDecorationInput(
-  props: EditorPropsWithLabel<TextDecoration>
-) {
-  return (
-    <div>
-      <Label>{props.label}</Label>
-      <ColorInput {...getInputProps(props, 'color')} />
-      <SelectInput
-        {...getInputProps(props, 'line')}
-        options={textDecorationLines}
-      />
-      <SelectInput
-        {...getInputProps(props, 'style')}
-        options={textDecorationStyles}
-      />
-      <LengthInput
-        percentage
-        {...getInputProps(props, 'thickness')}
-        keywords={['auto', 'from-font']}
-      />
-    </div>
-  )
-}
-
-export function stringifyTextDecoration(value: TextDecoration) {
-  const { color, line, style, thickness } = value
-  return stringifyValues([color, line, style, thickness])
-}
diff --git a/packages/gui/src/components/inputs/TextInput.tsx b/packages/gui/src/components/inputs/TextInput.tsx
index 1680a0a5..2f1dcf79 100644
--- a/packages/gui/src/components/inputs/TextInput.tsx
+++ b/packages/gui/src/components/inputs/TextInput.tsx
@@ -1,37 +1,18 @@
-import { kebabCase } from 'lodash-es'
-import { useId } from 'react'
-import { Label } from '../primitives'
-import { DeletePropButton } from './Dimension/Input'
+import { EditorPropsWithLabel } from '../../types/editor'
+import { InputHeader } from '../ui/InputHeader'
 
-interface Props<T extends string> {
-  label: string
-  onChange: (newValue: T) => void
-  onRemove?: () => void
-  value: T
-}
-export function TextInput<T extends string>({
-  label,
-  value,
-  onChange,
-  onRemove,
-}: Props<T>) {
-  const id = `${useId()}-${kebabCase(label)}`
+type Props = EditorPropsWithLabel<string>
 
+export function TextInput<T extends string>(props: Props) {
+  const { value, onChange } = props
   return (
-    <div>
-      <Label htmlFor={id}>
-        <span>{label}</span>
-        <div sx={{ display: 'flex', flexDirection: 'row' }}>
-          <input
-            type="text"
-            id={id}
-            value={value}
-            onChange={(e) => onChange(e.target.value as T)}
-            sx={{ width: '100%', minHeight: '1.6em', mr: 1 }}
-          />
-          {onRemove && <DeletePropButton onRemove={onRemove} />}
-        </div>
-      </Label>
+    <div sx={{ width: '100%' }}>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value as T)}
+        sx={{ WebkitAppearance: 'none', appearance: 'none', width: '100%', border: '1px solid', boxSizing: 'border-box', display: 'block', p:2, borderRadius: '6px' }}
+      />
     </div>
   )
 }
diff --git a/packages/gui/src/components/inputs/TextShadow/field.tsx b/packages/gui/src/components/inputs/TextShadow/field.tsx
deleted file mode 100644
index 6cea8e66..00000000
--- a/packages/gui/src/components/inputs/TextShadow/field.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { ColorInput } from '../ColorInput'
-import { LengthInput } from '../LengthInput'
-import { EditorProps, EditorPropsWithLabel } from '../../../types/editor'
-import { TextShadow } from './types'
-
-import { stringifyTextShadow } from './stringify'
-
-import Layers from '../../Layers'
-import { getInputProps } from '../../../lib/util'
-
-export default function TextShadowInput(
-  props: EditorPropsWithLabel<TextShadow[]>
-) {
-  const newItem = () => {
-    // generate a new text shadow with the units of the previous box shadow
-    return {
-      blur: { value: 0, unit: 'px' },
-      spread: { value: 0, unit: 'px' },
-      offsetX: { value: 0, unit: 'px' },
-      offsetY: { value: 0, unit: 'px' },
-      color: '#000',
-    } as const
-  }
-  return (
-    <Layers<TextShadow>
-      {...props}
-      newItem={newItem}
-      content={TextShadowEditor}
-      stringify={stringifyTextShadow}
-      thumbnail={Thumbnail}
-    />
-  )
-}
-
-export const TextShadowEditor = (props: EditorProps<TextShadow>) => {
-  return (
-    <div sx={{ margin: 3 }}>
-      <ColorInput {...getInputProps(props, 'color')} />
-      <LengthInput {...getInputProps(props, 'offsetX')} label="Offset X" />
-      <LengthInput {...getInputProps(props, 'offsetY')} label="Offset Y" />
-      <LengthInput {...getInputProps(props, 'blur')} />
-    </div>
-  )
-}
-
-function Thumbnail({ value }: { value: string }) {
-  return (
-    <div
-      sx={{
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <div sx={{ textShadow: value, fontWeight: 'bold' }}>Aa</div>
-    </div>
-  )
-}
diff --git a/packages/gui/src/components/inputs/TextShadow/stringify.ts b/packages/gui/src/components/inputs/TextShadow/stringify.ts
deleted file mode 100644
index 6b12b4e5..00000000
--- a/packages/gui/src/components/inputs/TextShadow/stringify.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { TextShadow } from './types'
-import { stringifyUnit } from '../../../lib/stringify'
-
-export function stringifyTextShadow(
-  textShadow: TextShadow | TextShadow[]
-): string {
-  if (Array.isArray(textShadow)) {
-    return textShadow.filter(Boolean).map(stringifyTextShadow).join(', ')
-  }
-
-  return stringifyEntry(textShadow)
-}
-
-const stringifyEntry = (textShadow: TextShadow) => {
-  return [
-    stringifyUnit(textShadow?.offsetX),
-    stringifyUnit(textShadow?.offsetY),
-    stringifyUnit(textShadow?.blur),
-    textShadow?.color,
-  ]
-    .filter(Boolean)
-    .join(' ')
-}
diff --git a/packages/gui/src/components/inputs/TextShadow/types.tsx b/packages/gui/src/components/inputs/TextShadow/types.tsx
deleted file mode 100644
index e85eb931..00000000
--- a/packages/gui/src/components/inputs/TextShadow/types.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Color, Length } from '../../../types/css'
-
-export interface TextShadow {
-  offsetX: Length
-  offsetY: Length
-  blur: Length
-  color: Color
-}
-
-export const DEFAULT_TEXT_SHADOW: TextShadow = {
-  offsetX: { value: 0, unit: 'px' },
-  offsetY: { value: 0, unit: 'px' },
-  blur: { value: 0, unit: 'px' },
-  color: 'transparent',
-}
diff --git a/packages/gui/src/components/inputs/TimeInput.tsx b/packages/gui/src/components/inputs/TimeInput.tsx
deleted file mode 100644
index b3dbd4d3..00000000
--- a/packages/gui/src/components/inputs/TimeInput.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Time, TIME_UNITS } from '../../types/css'
-import { EditorPropsWithLabel } from '../../types/editor'
-import { DimensionInput } from './Dimension'
-
-export const TimeInput = (props: EditorPropsWithLabel<Time>) => {
-  return (
-    <DimensionInput
-      units={TIME_UNITS}
-      steps={timeSteps}
-      conversions={timeConversions}
-      {...props}
-    />
-  )
-}
-
-const timeConversions = {
-  ms: 1000,
-  s: 1,
-}
-
-const timeSteps = {
-  ms: 25,
-  s: 0.025,
-}
diff --git a/packages/gui/src/components/inputs/TrackSize/field.tsx b/packages/gui/src/components/inputs/TrackSize/field.tsx
deleted file mode 100644
index 030ec869..00000000
--- a/packages/gui/src/components/inputs/TrackSize/field.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { getInputProps } from '../../../lib/util'
-import { EditorProps, EditorPropsWithLabel } from '../../../types/editor'
-import Layers from '../../Layers'
-import { LengthInput } from '../LengthInput'
-import { SelectInput } from '../SelectInput'
-import { stringifyTrackSizeList } from './stringify'
-import { FitContent, MinMax, TrackBreadth, TrackSize } from './types'
-
-export default function TrackSizeListInput(
-  props: EditorPropsWithLabel<TrackSize[]>
-) {
-  const addItem = () => {
-    return {
-      type: 'breadth',
-      value: { value: 1, unit: 'fr' },
-    } as const
-  }
-  return (
-    <Layers
-      {...props}
-      stringify={stringifyTrackSizeList}
-      newItem={addItem}
-      content={TrackSizeInput}
-    />
-  )
-}
-
-function TrackSizeInput(props: EditorProps<TrackSize>) {
-  return (
-    <div>
-      <SelectInput
-        {...getInputProps(props, 'type')}
-        options={['breadth', 'minmax', 'fit-content']}
-        onChange={(type) => props.onChange(getDefaultTrackSizeValue(type))}
-      />
-      <TrackSizeSwitch {...props} />
-    </div>
-  )
-}
-
-export function TrackSizeSwitch(props: EditorProps<TrackSize>) {
-  switch (props.value.type) {
-    case 'breadth': {
-      const _props = props as EditorProps<TrackBreadth>
-      return (
-        <LengthInput
-          percentage
-          flex
-          {...getInputProps(_props, 'value')}
-          keywords={trackKeywords}
-        />
-      )
-    }
-    case 'minmax': {
-      const _props = props as EditorProps<MinMax>
-      return (
-        <div>
-          <LengthInput
-            percentage
-            {...getInputProps(_props, 'min')}
-            keywords={trackKeywords}
-          />
-          <LengthInput
-            percentage
-            flex
-            {...getInputProps(_props, 'max')}
-            keywords={trackKeywords}
-          />
-        </div>
-      )
-    }
-    case 'fit-content': {
-      const _props = props as EditorProps<FitContent>
-      return <LengthInput percentage {...getInputProps(_props, 'value')} />
-    }
-  }
-}
-
-const trackKeywords = ['min-content', 'max-content', 'auto']
-
-export function getDefaultTrackSizeValue(type: TrackSize['type']): TrackSize {
-  switch (type) {
-    case 'breadth':
-      return { type, value: { value: 1, unit: 'fr' } }
-    case 'minmax':
-      return {
-        type,
-        min: { value: 20, unit: 'px' },
-        max: { value: 1, unit: 'fr' },
-      }
-    case 'fit-content':
-      return {
-        type,
-        value: { value: 100, unit: '%' },
-      }
-  }
-}
diff --git a/packages/gui/src/components/inputs/TrackSize/stringify.ts b/packages/gui/src/components/inputs/TrackSize/stringify.ts
deleted file mode 100644
index 6697e562..00000000
--- a/packages/gui/src/components/inputs/TrackSize/stringify.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { stringifyFunction, stringifyPrimitive } from '../../../lib/stringify'
-import { TrackSize } from './types'
-
-export function stringifyTrackSizeList(trackSizeList: TrackSize[]) {
-  return trackSizeList.map(stringifyTrackSize).join(' ')
-}
-
-export function stringifyTrackSize(trackSize: TrackSize) {
-  switch (trackSize.type) {
-    case 'breadth':
-      return stringifyPrimitive(trackSize.value)
-    case 'minmax':
-      return stringifyFunction(trackSize.type, [trackSize.min, trackSize.max])
-    case 'fit-content':
-      return stringifyFunction(trackSize.type, [trackSize.value])
-  }
-}
diff --git a/packages/gui/src/components/inputs/TrackSize/types.ts b/packages/gui/src/components/inputs/TrackSize/types.ts
deleted file mode 100644
index 42fbbc2d..00000000
--- a/packages/gui/src/components/inputs/TrackSize/types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { LengthPercentage } from '../../../types/css'
-
-export type TrackSize = TrackBreadth | MinMax | FitContent
-
-export interface TrackBreadth {
-  type: 'breadth'
-  value: LengthPercentage // + fr
-}
-
-export interface MinMax {
-  type: 'minmax'
-  min: LengthPercentage
-  max: LengthPercentage
-}
-
-export interface FitContent {
-  type: 'fit-content'
-  value: LengthPercentage
-}
diff --git a/packages/gui/src/components/inputs/Transform/field.tsx b/packages/gui/src/components/inputs/Transform/field.tsx
deleted file mode 100644
index a365d8ff..00000000
--- a/packages/gui/src/components/inputs/Transform/field.tsx
+++ /dev/null
@@ -1,322 +0,0 @@
-import { LengthInput } from '../LengthInput'
-import Layers, { LayerProps } from '../../Layers'
-
-import {
-  Matrix,
-  Perspective,
-  Rotate,
-  Rotate3D,
-  Scale,
-  Skew,
-  Transform,
-  TransformType,
-  Translate,
-} from './types'
-import { EditorProps, EditorPropsWithLabel } from '../../../types/editor'
-import { getInputProps as _getInputProps } from '../../../lib/util'
-import { SelectInput } from '../SelectInput'
-import { AngleInput } from '../AngleInput'
-import { stringifyTransform } from './stringify'
-import { Angle, Length } from '../../../types/css'
-import { NumberInput } from '../NumberInput'
-import { range } from 'lodash-es'
-
-export default function TransformInput(
-  props: EditorPropsWithLabel<Transform[]>
-) {
-  const newItem = () => {
-    return getDefault('matrix')
-  }
-  return (
-    <Layers<Transform>
-      {...props}
-      newItem={newItem}
-      content={TransformEditor}
-      stringify={stringifyTransform}
-      thumbnail={Thumbnail}
-    />
-  )
-}
-
-export const TransformEditor = (props: LayerProps<Transform>) => {
-  return (
-    <div sx={{ p: 3 }}>
-      <SelectInput
-        {...getInputProps(props, 'type')}
-        options={filterTypes}
-        onChange={(newType) => {
-          props.onChange(convertTransformValue(props.value, newType))
-        }}
-      />
-      <TransformSwitch {...props} />
-    </div>
-  )
-}
-
-const filterTypes = [
-  'matrix',
-  'matrix3d',
-  'perspective',
-  'rotate',
-  'rotate3d',
-  'rotateX',
-  'rotateY',
-  'rotateZ',
-  'scale',
-  'scale3d',
-  'scaleX',
-  'scaleY',
-  'scaleZ',
-  'skew',
-  'skewX',
-  'skewY',
-  'translate',
-  'translate3d',
-  'translateX',
-  'translateY',
-  'translateZ',
-] as const
-
-function TransformSwitch(props: LayerProps<Transform>) {
-  switch (props.value.type) {
-    case 'matrix': {
-      const _props = props as EditorProps<Matrix>
-
-      return (
-        <div
-          sx={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(3, 1fr)',
-          }}
-        >
-          {(['a', 'c', 'tx', 'b', 'd', 'ty'] as const).map((item) => {
-            return <IncNumberInput {...getInputProps(_props, item)} />
-          })}{' '}
-        </div>
-      )
-    }
-    case 'matrix3d': {
-      const { value, onChange } = props
-      const { values } = value
-      return (
-        <div
-          sx={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(4, 1fr)',
-          }}
-        >
-          {range(0, 4).flatMap((i) => {
-            return range(0, 4).map((j) => {
-              const index = j * 4 + i
-              const label = `${'abcd'[j]}${i}`
-              return (
-                <IncNumberInput
-                  label={label}
-                  value={values[index]}
-                  onChange={(newValue) => {
-                    const copy = [...values]
-                    copy.splice(index, 1, newValue)
-                    onChange({ ...value, values: copy })
-                  }}
-                />
-              )
-            })
-          })}
-        </div>
-      )
-    }
-    case 'perspective': {
-      return (
-        <LengthInput
-          {...getInputProps(props as EditorProps<Perspective>, 'd')}
-        />
-      )
-    }
-    case 'rotate':
-    case 'rotateX':
-    case 'rotateY':
-    case 'rotateZ': {
-      const _props = props as EditorProps<Rotate>
-      return <AngleInput {...getInputProps(_props, 'a')} />
-    }
-    case 'rotate3d': {
-      const _props = props as EditorProps<Rotate3D>
-      return (
-        <>
-          <AngleInput {...getInputProps(_props, 'a')} />
-          <IncNumberInput {...getInputProps(_props, 'x')} />
-          <IncNumberInput {...getInputProps(_props, 'y')} />
-          <IncNumberInput {...getInputProps(_props, 'z')} />
-        </>
-      )
-    }
-    case 'scale': {
-      const _props = props as EditorProps<Scale>
-      return (
-        <>
-          <IncNumberInput {...getInputProps(_props, 'sx')} />
-          <IncNumberInput {...getInputProps(_props, 'sy')} />
-        </>
-      )
-    }
-    case 'scale3d': {
-      const _props = props as EditorProps<Scale>
-      return (
-        <>
-          <IncNumberInput {...getInputProps(_props, 'sx')} />
-          <IncNumberInput {...getInputProps(_props, 'sy')} />
-          <IncNumberInput {...getInputProps(_props, 'sz')} />
-        </>
-      )
-    }
-    case 'scaleX': {
-      const _props = props as EditorProps<Scale>
-      return <IncNumberInput {...getInputProps(_props, 'sx')} />
-    }
-    case 'scaleY': {
-      const _props = props as EditorProps<Scale>
-      return <IncNumberInput {...getInputProps(_props, 'sy')} />
-    }
-    case 'scaleZ': {
-      const _props = props as EditorProps<Scale>
-      return <IncNumberInput {...getInputProps(_props, 'sz')} />
-    }
-    case 'skew': {
-      const _props = props as EditorProps<Skew>
-      return (
-        <>
-          <AngleInput {...getInputProps(_props, 'ax')} />
-          <AngleInput {...getInputProps(_props, 'ay')} />
-        </>
-      )
-    }
-    case 'skewX': {
-      const _props = props as EditorProps<Skew>
-      return <AngleInput {...getInputProps(_props, 'ax')} />
-    }
-    case 'skewY': {
-      const _props = props as EditorProps<Skew>
-      return <AngleInput {...getInputProps(_props, 'ay')} />
-    }
-    case 'translate': {
-      const _props = props as EditorProps<Translate>
-      return (
-        <>
-          <LengthInput percentage {...getInputProps(_props, 'tx')} />
-          <LengthInput percentage {...getInputProps(_props, 'ty')} />
-        </>
-      )
-    }
-    case 'translate3d': {
-      const _props = props as EditorProps<Translate>
-      return (
-        <>
-          <LengthInput percentage {...getInputProps(_props, 'tx')} />
-          <LengthInput percentage {...getInputProps(_props, 'ty')} />
-          <LengthInput {...getInputProps(_props, 'tz')} />
-        </>
-      )
-    }
-    case 'translateX': {
-      const _props = props as EditorProps<Translate>
-      return <LengthInput percentage {...getInputProps(_props, 'tx')} />
-    }
-    case 'translateY': {
-      const _props = props as EditorProps<Translate>
-      return <LengthInput percentage {...getInputProps(_props, 'ty')} />
-    }
-    case 'translateZ': {
-      const _props = props as EditorProps<Translate>
-      return <LengthInput {...getInputProps(_props, 'tz')} />
-    }
-  }
-  return null
-}
-
-function getInputProps<T extends object, K extends keyof T>(
-  props: EditorProps<T>,
-  property: K
-): EditorPropsWithLabel<T[typeof property]> {
-  return {
-    ..._getInputProps(props, property),
-    label: '' + property, // don't capitalize label
-  }
-}
-
-function Thumbnail({ value }: { value: string }) {
-  return (
-    <div
-      sx={{
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <div
-        sx={{
-          width: '1rem',
-          height: '1rem',
-          transform: value,
-          backgroundColor: '#f00',
-        }}
-      />
-    </div>
-  )
-}
-
-function convertTransformValue(
-  value: Transform,
-  newType: TransformType
-): Transform {
-  // TODO handle transforms between different values
-  return getDefault(newType)
-}
-
-function getDefault(type: TransformType): Transform {
-  switch (type) {
-    case 'matrix':
-      return { type, a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 }
-    case 'matrix3d':
-      const values = [...Array(16)].map((x) => 0)
-      values[0] = 1
-      values[5] = 1
-      values[10] = 1
-      values[15] = 1
-      return { type, values }
-    case 'perspective':
-      return { type, d: ZERO }
-    case 'rotate':
-    case 'rotateX':
-    case 'rotateY':
-    case 'rotateZ':
-      return { type, a: ZERO_DEG }
-    case 'rotate3d':
-      return { type, a: ZERO_DEG, x: 0, y: 0, z: 0 }
-    case 'scale':
-    case 'scale3d':
-    case 'scaleX':
-    case 'scaleY':
-    case 'scaleZ':
-      return { type, sx: 0, sy: 0, sz: 0 }
-    case 'skew':
-    case 'skewX':
-    case 'skewY':
-      return { type, ax: ZERO_DEG, ay: ZERO_DEG }
-    case 'translate':
-    case 'translate3d':
-    case 'translateX':
-    case 'translateY':
-    case 'translateZ':
-      return { type, tx: ZERO, ty: ZERO, tz: ZERO }
-  }
-}
-
-const ZERO: Length = { value: 0, unit: 'px' }
-const ZERO_DEG: Angle = { value: 0, unit: 'deg' }
-
-// Override the number input with more incremental steps for this one
-function IncNumberInput(props: Parameters<typeof NumberInput>[0]) {
-  return <NumberInput {...props} step={0.1} />
-}
diff --git a/packages/gui/src/components/inputs/Transform/stringify.tsx b/packages/gui/src/components/inputs/Transform/stringify.tsx
deleted file mode 100644
index 1aa6cffd..00000000
--- a/packages/gui/src/components/inputs/Transform/stringify.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { stringifyFunction } from '../../../lib/stringify'
-import { Transform } from './types'
-
-export function stringifyTransform(transform: Transform | Transform[]) {
-  if (Array.isArray(transform)) {
-    return transform.filter(Boolean).map(stringifyEntry).join(' ')
-  }
-
-  return stringifyEntry(transform)
-}
-
-const stringifyEntry = (transform: Transform) => {
-  const { type } = transform
-  switch (type) {
-    case 'matrix': {
-      const { a, b, c, d, tx, ty } = transform
-      return stringifyFunction(type, [a, b, c, d, tx, ty])
-    }
-    case 'matrix3d':
-      return stringifyFunction(type, transform.values)
-    case 'perspective':
-      return stringifyFunction(type, [transform.d])
-    case 'rotate':
-    case 'rotateX':
-    case 'rotateY':
-    case 'rotateZ':
-      return stringifyFunction(type, [transform.a])
-    case 'rotate3d': {
-      const { x, y, z, a } = transform
-      return stringifyFunction(type, [x, y, z, a])
-    }
-    case 'scale': {
-      const { sx, sy } = transform
-      return stringifyFunction(type, [sx, sy])
-    }
-    case 'scale3d': {
-      const { sx, sy, sz } = transform
-      return stringifyFunction(type, [sx, sy, sz])
-    }
-    case 'scaleX': {
-      return stringifyFunction(type, [transform.sx])
-    }
-    case 'scaleY': {
-      return stringifyFunction(type, [transform.sy])
-    }
-    case 'scaleZ': {
-      return stringifyFunction(type, [transform.sz])
-    }
-    case 'skew': {
-      const { ax, ay } = transform
-      return stringifyFunction(type, [ax, ay])
-    }
-    case 'skewX': {
-      return stringifyFunction(type, [transform.ax])
-    }
-    case 'skewY': {
-      return stringifyFunction(type, [transform.ay])
-    }
-    case 'translate': {
-      const { tx, ty } = transform
-      return stringifyFunction(type, [tx, ty])
-    }
-    case 'translate3d': {
-      const { tx, ty, tz } = transform
-      return stringifyFunction(type, [tx, ty, tz])
-    }
-    case 'translateX': {
-      return stringifyFunction(type, [transform.tx])
-    }
-    case 'translateY': {
-      return stringifyFunction(type, [transform.ty])
-    }
-    case 'translateZ': {
-      return stringifyFunction(type, [transform.tz])
-    }
-  }
-}
diff --git a/packages/gui/src/components/inputs/Transform/types.ts b/packages/gui/src/components/inputs/Transform/types.ts
deleted file mode 100644
index 7b2b59f4..00000000
--- a/packages/gui/src/components/inputs/Transform/types.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Angle, Length } from '../../../types/css'
-
-export type Transform =
-  | Matrix
-  | Matrix3D
-  | Perspective
-  | Rotate
-  | Rotate3D
-  | Scale
-  | Skew
-  | Translate
-export type TransformType = Transform['type']
-
-export interface Matrix {
-  type: 'matrix'
-  a: number
-  b: number
-  c: number
-  d: number
-  tx: number
-  ty: number
-}
-
-export interface Matrix3D {
-  type: 'matrix3d'
-  values: number[] // should be 16 length
-}
-
-export interface Perspective {
-  type: 'perspective'
-  d: Length
-}
-
-export interface Rotate {
-  type: 'rotate' | 'rotateX' | 'rotateY' | 'rotateZ'
-  a: Angle
-}
-
-export interface Rotate3D {
-  type: 'rotate3d'
-  a: Angle
-  // All these should be between 0 and 1
-  x: number
-  y: number
-  z: number
-}
-
-export interface Scale {
-  type: 'scale' | 'scale3d' | 'scaleX' | 'scaleY' | 'scaleZ'
-  // TODO apparently this might be allowed to be percentages?
-  sx: number
-  sy: number
-  sz: number
-}
-
-export interface Skew {
-  type: 'skew' | 'skewX' | 'skewY'
-  ax: Angle
-  ay: Angle
-}
-
-export interface Translate {
-  type: 'translate' | 'translate3d' | 'translateX' | 'translateY' | 'translateZ'
-  tx: LengthPercentage
-  ty: LengthPercentage
-  tz: Length
-}
-
-// These are typed the same now, but we make the distinction that percentages aren't allowed
-type LengthPercentage = Length
diff --git a/packages/gui/src/components/inputs/TransformOrigin.tsx b/packages/gui/src/components/inputs/TransformOrigin.tsx
deleted file mode 100644
index 7c817186..00000000
--- a/packages/gui/src/components/inputs/TransformOrigin.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { stringifyValues } from '../../lib/stringify'
-import { getInputProps } from '../../lib/util'
-import { Length, LengthPercentage } from '../../types/css'
-import { EditorPropsWithLabel } from '../../types/editor'
-import { Label } from '../primitives'
-import { LengthInput } from './LengthInput'
-
-interface TransformOrigin {
-  x: LengthPercentage
-  y: LengthPercentage
-  z: Length
-}
-export function TransformOriginInput(
-  props: EditorPropsWithLabel<TransformOrigin>
-) {
-  return (
-    <div>
-      <Label>{props.label}</Label>
-      <div
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 1,
-        }}
-      >
-        <LengthInput
-          percentage
-          {...getInputProps(props, 'x')}
-          keywords={['left', 'center', 'right']}
-        />
-        <LengthInput
-          percentage
-          {...getInputProps(props, 'y')}
-          keywords={['top', 'center', 'bottom']}
-        />
-        <LengthInput {...getInputProps(props, 'z')} />
-      </div>
-    </div>
-  )
-}
-
-export function stringifyTransformOrigin(value: TransformOrigin) {
-  const { x, y, z } = value
-  return stringifyValues([x, y, z])
-}
diff --git a/packages/gui/src/components/inputs/Transition/field.tsx b/packages/gui/src/components/inputs/Transition/field.tsx
deleted file mode 100644
index cab9925e..00000000
--- a/packages/gui/src/components/inputs/Transition/field.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Layers, { LayerProps } from '../../Layers'
-import { Transition } from './types'
-import { stringifyTransitionList } from './stringify'
-import { getInputProps } from '../../../lib/util'
-import { SelectInput } from '../SelectInput'
-import { ANIMATABLE_PROPERTIES } from '../../../data/animatable'
-import { TimeInput } from '../TimeInput'
-import { EasingFunctionEditor } from '../EasingFunction'
-import { EditorPropsWithLabel } from '../../../types/editor'
-
-export default function TransitionInput(
-  props: EditorPropsWithLabel<Transition[]>
-) {
-  const newItem = () => {
-    return {
-      property: 'all',
-      timingFunction: { type: 'cubic-bezier', p1: 0, p2: 0, p3: 0, p4: 0 },
-      duration: { value: 350, unit: 'ms' },
-      delay: { value: 0, unit: 'ms' },
-    } as const
-  }
-  return (
-    <Layers<Transition>
-      {...props}
-      newItem={newItem}
-      content={TransitionEntry}
-      stringify={stringifyTransitionList}
-    />
-  )
-}
-
-export const TransitionEntry = (props: LayerProps<Transition>) => {
-  return (
-    <div sx={{ margin: 3, display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <SelectInput
-        {...getInputProps(props, 'property')}
-        options={ANIMATABLE_PROPERTIES}
-      />
-      <div
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(2, 1fr)',
-          gap: 3,
-        }}
-      >
-        <TimeInput {...getInputProps(props, 'duration')} />
-        <TimeInput {...getInputProps(props, 'delay')} />
-      </div>
-      <EasingFunctionEditor {...getInputProps(props, 'timingFunction')} />
-    </div>
-  )
-}
diff --git a/packages/gui/src/components/inputs/Transition/stringify.ts b/packages/gui/src/components/inputs/Transition/stringify.ts
deleted file mode 100644
index deaf7011..00000000
--- a/packages/gui/src/components/inputs/Transition/stringify.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { stringifyValues } from '../../../lib/stringify'
-import { stringifyEasingFunction } from '../EasingFunction/stringify'
-import { Transition } from './types'
-
-export function stringifyTransitionList(transitionList: Transition[]) {
-  return transitionList.map(stringifyTransition).join(', ')
-}
-
-function stringifyTransition(transition: Transition) {
-  const { timingFunction, duration, property, delay } = transition
-  return stringifyValues([
-    property,
-    duration,
-    stringifyEasingFunction(timingFunction),
-    delay,
-  ])
-}
diff --git a/packages/gui/src/components/inputs/Transition/types.ts b/packages/gui/src/components/inputs/Transition/types.ts
deleted file mode 100644
index e985aa43..00000000
--- a/packages/gui/src/components/inputs/Transition/types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Time } from '../../../types/css'
-import { keywordValues } from '../EasingFunction/keywords'
-import { EasingFunction } from '../EasingFunction/types'
-
-export interface Transition {
-  property: string
-  timingFunction: EasingFunction
-  duration: Time
-  delay: Time
-}
-
-export const DEFAULT_TRANSITION: Transition = {
-  delay: { value: 0, unit: 's' },
-  duration: { value: 250, unit: 'ms' },
-  property: 'all',
-  timingFunction: keywordValues.ease,
-}
diff --git a/packages/gui/src/components/primitives/CalcInput.tsx b/packages/gui/src/components/primitives/CalcInput.tsx
deleted file mode 100644
index 25a1bbf0..00000000
--- a/packages/gui/src/components/primitives/CalcInput.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import { kebabCase, uniq } from 'lodash-es'
-import { useId } from 'react'
-import { UnitRanges } from '../../data/ranges'
-import { convertUnits, UnitConversions, UnitSteps } from '../../lib'
-import { stringifyUnit } from '../../lib/stringify'
-import {
-  AbsoluteLengthUnits,
-  CalcOperand,
-  CSSFunctionCalc,
-  CSSUnitValue,
-  ThemeUnits,
-  UnitlessUnits,
-} from '../../types/css'
-import { EditorProps } from '../../types/editor'
-import { SelectInput } from '../inputs/SelectInput'
-import { Number } from '../primitives'
-import { UnitSelect } from './UnitSelect'
-import { ValueSelect } from './ValueSelect'
-
-interface CalcInputProps extends EditorProps<CSSFunctionCalc> {
-  label?: string
-  range?: UnitRanges
-  steps?: UnitSteps
-  units: readonly string[]
-  conversions?: UnitConversions
-  themeValues?: (CSSUnitValue & { id: string })[]
-}
-
-export const CalcInput = ({
-  units,
-  onChange,
-  value,
-  range,
-  steps,
-  conversions,
-  themeValues,
-}: CalcInputProps) => {
-  const allUnits = uniq([...units, UnitlessUnits.Number])
-
-  return (
-    <div sx={{ width: '100%' }}>
-      <NumberUnitInput
-        value={value.arguments.valueX}
-        onChange={(newValue: CSSUnitValue) => {
-          onChange({
-            ...value,
-            arguments: {
-              ...value.arguments,
-              valueX: newValue,
-            },
-          })
-        }}
-        units={allUnits}
-        steps={steps}
-        range={range}
-        conversions={conversions}
-        themeValues={themeValues}
-      />
-      <SelectInput
-        options={[
-          CalcOperand.Plus,
-          CalcOperand.Sub,
-          CalcOperand.Div,
-          CalcOperand.Mult,
-        ]}
-        label=""
-        onChange={(newValue: CalcOperand) => {
-          const y = value.arguments.valueY
-
-          if (newValue === CalcOperand.Div || newValue === CalcOperand.Mult) {
-            return onChange({
-              ...value,
-              arguments: {
-                ...value.arguments,
-                operand: newValue,
-                valueY: {
-                  ...value.arguments.valueY,
-                  unit: UnitlessUnits.Number,
-                },
-              },
-            })
-          }
-
-          if (
-            y.unit === UnitlessUnits.Number &&
-            (newValue === CalcOperand.Plus || newValue === CalcOperand.Sub)
-          ) {
-            return onChange({
-              ...value,
-              arguments: {
-                ...value.arguments,
-                operand: newValue,
-                valueY: { value: 16, unit: AbsoluteLengthUnits.Px },
-              },
-            })
-          }
-
-          onChange({
-            ...value,
-            arguments: {
-              ...value.arguments,
-              operand: newValue,
-            },
-          })
-        }}
-        value={value.arguments.operand}
-      />
-      <NumberUnitInput
-        value={value.arguments.valueY}
-        onChange={(newValue: CSSUnitValue) => {
-          onChange({
-            ...value,
-            arguments: {
-              ...value.arguments,
-              valueY: newValue,
-            },
-          })
-        }}
-        units={allUnits}
-        steps={steps}
-        range={range}
-        conversions={conversions}
-        themeValues={themeValues}
-      />
-    </div>
-  )
-}
-
-interface NumberUnitInput extends EditorProps<CSSUnitValue> {
-  units: readonly string[]
-  steps?: UnitSteps
-  range?: UnitRanges
-  conversions?: UnitConversions
-  themeValues?: (CSSUnitValue & { id: string })[]
-}
-
-const NumberUnitInput = ({
-  value,
-  onChange,
-  units,
-  steps,
-  range,
-  conversions,
-  themeValues,
-  label,
-}: NumberUnitInput) => {
-  const id = `${useId()}-${kebabCase(label)}`
-  const validUnits = units.filter((u) => u !== UnitlessUnits.Calc)
-
-  return (
-    <div sx={{ display: 'flex', flexDirection: 'row', my: 1 }}>
-      {value.unit === ThemeUnits.Theme ? (
-        <ValueSelect
-          onChange={(e: any) => {
-            const themeValue = themeValues?.find((p) => p.id === e.target.value)
-            const newValue = themeValue && stringifyUnit(themeValue)
-            onChange({ ...value, value: newValue ?? `16px` })
-          }}
-          values={themeValues ?? []}
-        />
-      ) : (
-        <Number
-          id={id}
-          step={steps?.[value.unit]}
-          min={range?.[value.unit]?.[0]}
-          max={range?.[value.unit]?.[1]}
-          value={value.value}
-          onChange={(newValue: number) =>
-            onChange({ ...value, value: newValue })
-          }
-        />
-      )}
-      <UnitSelect
-        sx={{ ml: 1 }}
-        units={validUnits}
-        value={value.unit}
-        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-          const newUnit = e.target.value
-          const convertedValue = convertUnits(
-            newUnit,
-            value,
-            conversions,
-            steps
-          )
-          const newValue =
-            newUnit === ThemeUnits.Theme && themeValues
-              ? stringifyUnit(themeValues?.[0])
-              : convertedValue
-
-          //@ts-ignore
-          onChange({ value: newValue, unit: newUnit })
-        }}
-      />
-    </div>
-  )
-}
diff --git a/packages/gui/src/components/primitives/ColorPicker/ChannelFields.tsx b/packages/gui/src/components/primitives/ColorPicker/ChannelFields.tsx
index 70337afb..fe28c132 100644
--- a/packages/gui/src/components/primitives/ColorPicker/ChannelFields.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/ChannelFields.tsx
@@ -1,9 +1,8 @@
 import * as culori from 'culori'
 import { InputHTMLAttributes } from 'react'
+import { Color } from '../../../types/css'
 import { round } from './util'
 
-type Color = string
-
 interface Props {
   value: Color
   onChange(value: Color): void
@@ -79,7 +78,10 @@ function RgbInput({ value, onChange }: Props) {
             value={Math.round(rgba[field] * 255)}
             onChange={(e) =>
               onChange(
-                culori.formatRgb({ ...rgba, [field]: +e.target.value / 255 })
+                culori.formatRgb({
+                  ...rgba,
+                  [field]: +e.target.value / 255,
+                })
               )
             }
           />
@@ -180,7 +182,10 @@ function HslInput({ value, onChange }: Props) {
             step={0.01}
             onChange={(e) =>
               onChange(
-                culori.formatHsl({ ...hsla, [field]: +e.target.value / 100 })
+                culori.formatHsl({
+                  ...hsla,
+                  [field]: +e.target.value / 100,
+                })
               )
             }
           />
diff --git a/packages/gui/src/components/primitives/ColorPicker/ColorArea.tsx b/packages/gui/src/components/primitives/ColorPicker/ColorArea.tsx
index d6ad3050..301cb076 100644
--- a/packages/gui/src/components/primitives/ColorPicker/ColorArea.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/ColorArea.tsx
@@ -56,7 +56,7 @@ export default function ColorArea({ value, onChange, track, thumb }: Props) {
       sx={{
         position: 'relative',
         width: '100%',
-        aspectRatio: '1 / 1',
+        height: '14rem',
       }}
       onMouseDown={(e) => {
         dragging.current = true
diff --git a/packages/gui/src/components/primitives/ColorPicker/ColorMarker.tsx b/packages/gui/src/components/primitives/ColorPicker/ColorMarker.tsx
index c866d7be..f27514d3 100644
--- a/packages/gui/src/components/primitives/ColorPicker/ColorMarker.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/ColorMarker.tsx
@@ -12,6 +12,7 @@ export default function ColorMarker(props: Props) {
         zIndex: 10,
         cursor: 'grab',
         width: '2rem',
+        height: '2rem',
         aspectRatio: '1 / 1',
         borderRadius: '9999px',
         border: '2px solid',
diff --git a/packages/gui/src/components/primitives/ColorPicker/Field.tsx b/packages/gui/src/components/primitives/ColorPicker/Field.tsx
index f038a46e..a5d0a1cf 100644
--- a/packages/gui/src/components/primitives/ColorPicker/Field.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/Field.tsx
@@ -1,15 +1,11 @@
-import * as Tabs from '@radix-ui/react-tabs'
-import { compact } from 'lodash-es'
 import { ButtonHTMLAttributes, useState } from 'react'
 import ValuePicker from './ValuePicker'
-import SystemPicker from './SystemPicker'
-import PalettePicker from './PalettePicker'
 import IconButton from '../../ui/IconButton'
 import { RefreshCw, Trash } from 'react-feather'
 import { Theme } from '../../../types/theme'
-import { randomHexColor as random } from '../../../lib/color'
-
-type Color = string
+import { randomColor, randomHexColor } from '../../../lib/color'
+import { Color } from '../../../types/css'
+import { themeGet } from '../../../lib'
 
 export interface Props {
   value: Color
@@ -17,130 +13,86 @@ export interface Props {
   theme?: Theme
   /** If provided, a label to render for the color picker */
   title?: string
-  /** The initial tab to show on load */
-  initialTab?: string
-  /** If true, will hide the "system" tab from the color picker */
-  hideSystemColors?: boolean
   /** If provided, will render a trash icon that calls `onRemove` when clicked */
   onRemove?(): void
   /**
    * Allows a custom regenerate function (e.g. for color contrast) when the user clicks
    * the regenerate button. If not provided, uses the default random color generator.
    */
-  onRegenerate?(): Color
+  onRegenerate?(theme?: Theme): Color
+  ruleset?: any
+  property?: string
 }
 
 /**
- * The color picker field: provides a color picker that lets the user:
- *
- *  - pick a color value directly in multiple color modes
- *  - select a system color
- *  - select a palette color from the user theme
- *
- * The picker appears as a field taking up the entire parent space. If a popover is desired,
- * use ColorPopover instead.
- *
+ * Color picker field for choosing a color among different color spaces
  */
 export default function ColorPicker({
   value,
   onChange,
   theme,
   title,
-  hideSystemColors,
-  initialTab = 'picker',
   onRemove,
   onRegenerate,
+  ruleset,
+  property,
 }: Props) {
-  const [tab, setTab] = useState(initialTab)
   return (
     <div>
-      <Tabs.Root value={tab} onValueChange={setTab}>
-        {title && (
-          <div
-            sx={{
-              textTransform: 'uppercase',
-              opacity: 0.7,
-              fontWeight: 800,
-              margin: 0,
-              width: '100%',
-            }}
-          >
-            {title}
-          </div>
-        )}
-        <div sx={{ display: 'flex', my: 1 }}>
-          <Tabs.List
-            sx={{
-              display: 'flex',
-              justifyContent: 'left',
-              gap: 2,
-              py: 1,
-            }}
-          >
-            {compact([
-              'picker',
-              !hideSystemColors && 'system',
-              theme && 'theme',
-            ]).map((tab: string) => {
-              return (
-                <Tabs.Trigger
-                  key={tab}
-                  value={tab}
-                  sx={{
-                    color: 'text',
-                    backgroundColor: 'transparent',
-                    padding: 0,
-                    border: 'none',
-                    fontSize: 1,
-                    '&[data-state="active"]': { fontWeight: 600 },
-                  }}
-                >
-                  {tab}
-                </Tabs.Trigger>
-              )
-            })}
-          </Tabs.List>
-          <div
-            sx={{
-              marginLeft: 'auto',
-              display: 'flex',
+      {title && (
+        <div
+          sx={{
+            textTransform: 'uppercase',
+            opacity: 0.7,
+            fontWeight: 800,
+            margin: 0,
+            width: '100%',
+          }}
+        >
+          {title}
+        </div>
+      )}
+      <div sx={{ display: 'flex', my: 1 }}>
+        <div
+          sx={{
+            marginLeft: 'auto',
+            display: 'flex',
+          }}
+        >
+          {onRemove && (
+            <ActionButton onClick={onRemove}>
+              <Trash size={14} />
+            </ActionButton>
+          )}
+          <ActionButton
+            onClick={() => {
+              // If a user-defined regenerator is given, use it
+              if (onRegenerate) {
+                onChange(onRegenerate(theme))
+                return
+              } else {
+                // Otherwise, regenerate a random color based on theme
+                const path =
+                  randomColor({
+                    theme,
+                    ruleset,
+                    previousValue: value,
+                    property,
+                  }) ?? randomHexColor()
+                const color = themeGet({
+                  theme,
+                  path,
+                  property: 'color',
+                })
+                onChange(color)
+              }
             }}
           >
-            {onRemove && (
-              <ActionButton onClick={onRemove}>
-                <Trash size={14} />
-              </ActionButton>
-            )}
-            <ActionButton
-              onClick={() => {
-                // If a user-defined regenerator is given, use it
-                if (onRegenerate) {
-                  onChange(onRegenerate())
-                  return
-                } else {
-                  // Otherwise, regenerate a random color based on theme
-                  onChange(random()) //{ theme }))
-                }
-              }}
-            >
-              <RefreshCw size={14} />
-            </ActionButton>
-          </div>
+            <RefreshCw size={14} />
+          </ActionButton>
         </div>
-        <Tabs.Content value="picker">
-          <ValuePicker value={value} onChange={onChange} />
-        </Tabs.Content>
-        {!hideSystemColors && (
-          <Tabs.Content value="system">
-            <SystemPicker value={value} onChange={onChange} />
-          </Tabs.Content>
-        )}
-        {theme && (
-          <Tabs.Content value="theme">
-            <PalettePicker value={value} onChange={onChange} theme={theme} />
-          </Tabs.Content>
-        )}
-      </Tabs.Root>
+      </div>
+      <ValuePicker value={value} onChange={onChange} theme={theme} />
     </div>
   )
 }
@@ -155,6 +107,7 @@ function ActionButton(props: ButtonHTMLAttributes<HTMLButtonElement>) {
         padding: 1,
         borderRadius: '9999px',
         aspectRatio: '1 / 1',
+        height: '1.5rem',
         width: '1.5rem',
         ':hover': {
           backgroundColor: 'backgroundOffset',
diff --git a/packages/gui/src/components/primitives/ColorPicker/HSVPicker.tsx b/packages/gui/src/components/primitives/ColorPicker/HSVPicker.tsx
index d900896d..ebcb47ab 100644
--- a/packages/gui/src/components/primitives/ColorPicker/HSVPicker.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/HSVPicker.tsx
@@ -4,6 +4,7 @@ import ColorSlider from './ColorSlider'
 import ColorArea from './ColorArea'
 import { useEffect, useState } from 'react'
 import { isValidColor, format } from './util'
+import { Color } from '../../../types/css'
 
 interface HsvValue {
   h: number
@@ -13,8 +14,8 @@ interface HsvValue {
 }
 
 interface Props {
-  value: string
-  onChange(value: string): void
+  value: Color
+  onChange(value: Color): void
   mode: string
 }
 
diff --git a/packages/gui/src/components/primitives/ColorPicker/LCHPicker.tsx b/packages/gui/src/components/primitives/ColorPicker/LCHPicker.tsx
index c890fa42..db7a662e 100644
--- a/packages/gui/src/components/primitives/ColorPicker/LCHPicker.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/LCHPicker.tsx
@@ -4,6 +4,7 @@ import ColorSlider from './ColorSlider'
 import { useEffect, useState } from 'react'
 import { isValidColor, format, withFallback } from './util'
 import { range } from 'lodash-es'
+import { Color } from '../../../types/css'
 
 interface LchValue {
   l: number
@@ -13,8 +14,8 @@ interface LchValue {
 }
 
 interface Props {
-  value: string
-  onChange(value: string): void
+  value: Color
+  onChange(value: Color): void
   mode: string
 }
 
diff --git a/packages/gui/src/components/primitives/ColorPicker/LabPicker.tsx b/packages/gui/src/components/primitives/ColorPicker/LabPicker.tsx
index a88d2307..6ec8f099 100644
--- a/packages/gui/src/components/primitives/ColorPicker/LabPicker.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/LabPicker.tsx
@@ -4,6 +4,7 @@ import ColorSlider from './ColorSlider'
 import { useEffect, useState } from 'react'
 import { isValidColor, format, withFallback } from './util'
 import { range } from 'lodash-es'
+import { Color } from '../../../types/css'
 
 interface LabValue {
   l: number
@@ -13,8 +14,8 @@ interface LabValue {
 }
 
 interface Props {
-  value: string
-  onChange(value: string): void
+  value: Color
+  onChange(value: Color): void
   mode: string
 }
 
diff --git a/packages/gui/src/components/primitives/ColorPicker/P3HSVPicker.tsx b/packages/gui/src/components/primitives/ColorPicker/P3HSVPicker.tsx
index 39188fbf..886c1b06 100644
--- a/packages/gui/src/components/primitives/ColorPicker/P3HSVPicker.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/P3HSVPicker.tsx
@@ -5,6 +5,7 @@ import ColorSlider from './ColorSlider'
 import ColorArea from './ColorArea'
 import { range } from 'lodash-es'
 import { isValidColor, format, withFallback } from './util'
+import { Color } from '../../../types/css'
 
 interface HsvValue {
   mode: 'hsv'
@@ -15,8 +16,8 @@ interface HsvValue {
 }
 
 interface Props {
-  value: string
-  onChange(value: string): void
+  value: Color
+  onChange(value: Color): void
   mode: string
 }
 
diff --git a/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx b/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx
index 87e78fc7..a525776d 100644
--- a/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx
@@ -1,43 +1,162 @@
-import { Theme } from '../../../types/theme'
-import ColorValueDisplay from './ValueDisplay'
+import * as Popover from '@radix-ui/react-popover'
+import { themeGet } from '../../../lib'
+import { useTheme } from '../../providers/ThemeContext'
+import { joinPath } from '../../providers/util'
+import Checkerboard from './Checkerboard'
+import { hasAlpha, withFallback } from './util'
+
+export interface ThemeColor {
+  type: 'theme'
+  path: string
+}
 
-type Color = string
 interface Props {
-  value: Color
-  onChange(value: Color): void
-  theme: Theme
+  value: ThemeColor
+  onChange(value: ThemeColor): void
+}
+
+export default function PalettePopover({
+  value,
+  onChange,
+  // swatch,
+  ...props
+}: Props) {
+  const theme = useTheme()
+  const rawValue = themeGet({
+    property: 'color',
+    path: value.path,
+    theme,
+  })
+
+  const labelMeta = value.path === rawValue ? null : `(${rawValue})`
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger
+        sx={{
+          pl: 1,
+          pr: 2,
+          py: 1,
+          cursor: 'pointer',
+          color: 'text',
+          backgroundColor: 'transparent',
+          border: '1px solid',
+          borderColor: 'border',
+          borderRadius: '0.25rem',
+          maxWidth: '200px',
+          fontSize: '0.875rem',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 2,
+        }}
+      >
+        {/* swatch */}
+        <Popover.Anchor>{<Swatch value={value} />}</Popover.Anchor>
+        {value.path}
+        <span sx={{ fontSize: 0, color: 'muted' }}>{labelMeta}</span>
+      </Popover.Trigger>
+      <Popover.Content
+        sx={{
+          width: '20rem',
+          backgroundColor: 'background',
+          padding: '8px 16px',
+          border: '1px solid',
+          borderColor: 'border',
+          borderRadius: '0.5rem',
+          zIndex: 99999,
+        }}
+      >
+        <PalettePicker value={value} onChange={onChange} {...props} />
+      </Popover.Content>
+    </Popover.Root>
+  )
+}
+
+function Swatch({ value }: { value: ThemeColor }) {
+  const theme = useTheme()
+  // FIXME extracting color value from path is annoying...
+  const color = themeGet({ theme, property: 'color', path: value.path })
+  const isTransparent = hasAlpha(color)
+  return (
+    <div
+      sx={{
+        position: 'relative',
+        width: '1.25rem',
+        height: '1.25rem',
+        aspectRatio: '1 / 1',
+        borderRadius: '0.25rem',
+        overflow: 'hidden',
+        border: '1px solid',
+        borderColor: 'border',
+      }}
+    >
+      {/* The checkerboard causes weird aliasing to occur on Firefox,
+       * so we only show it when there is a transparency */}
+      {isTransparent && <Checkerboard sx={{ inset: 0 }} />}
+      <div
+        sx={{
+          inset: 0,
+          height: '100%',
+          width: '100%',
+          ...withFallback(color, (color) => ({ backgroundColor: color })),
+        }}
+      />
+    </div>
+  )
 }
 
 /**
  * A color picker that allows selecting colors from a provided user theme
  */
-export default function PalettePicker({ value, onChange, theme }: Props) {
+export function PalettePicker({ value, onChange }: Props) {
+  const theme = useTheme()
+  const valueColor = themeGet({ theme, property: 'color', path: value.path })
   return (
     <div>
-      <ColorValueDisplay value={value} onChange={onChange} />
+      {/* <ColorValueDisplay value={color} onChange={onChange} /> */}
       <div sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-        {theme?.colors?.map((colorGroup: any, i: number) => {
+        {Object.entries(theme?.colors ?? {}).map(([name, colorGroup]) => {
+          if (!(colorGroup instanceof Array)) {
+            return null
+          }
           return (
-            <div key={i} sx={{ display: 'flex', gap: '.125rem' }}>
-              {colorGroup.colors.map((color: any, i: number) => {
-                const selected = value === color.value
+            <div key={name} sx={{ display: 'flex', gap: '.125rem' }}>
+              {(colorGroup as any).map((color: any, i: number) => {
+                const colorPath = `${name}.${i}`
+                const selected = valueColor === color
+                const rawColor = themeGet({
+                  theme,
+                  property: 'color',
+                  path: colorPath,
+                })
 
                 return (
                   <button
                     key={color.id}
-                    title={`${colorGroup.name}.${i}`}
+                    title={`${colorPath} (${rawColor})`}
                     sx={{
+                      appearance: 'none',
+                      WebkitAppearance: 'none',
                       cursor: 'pointer',
-                      border: selected ? '2px solid' : '1px solid',
+                      borderWidth: selected ? '2px' : '1px',
                       borderColor: selected ? '#ff0000' : 'border',
-                      borderRadius: '.25rem',
+                      borderStyle: 'solid',
+                      borderRadius: '9999px',
                       padding: 0,
                       margin: 0,
-                      width: '1.5rem',
+                      width: '100%',
                       aspectRatio: '1 / 1',
-                      backgroundColor: color.value,
+                      backgroundColor: color,
                     }}
-                    onClick={() => onChange(color.value)}
+                    onClick={() =>
+                      onChange({
+                        type: 'theme',
+                        path: `${name}.${i}`,
+                      })
+                    }
                   />
                 )
               })}
diff --git a/packages/gui/src/components/primitives/ColorPicker/Popover.tsx b/packages/gui/src/components/primitives/ColorPicker/Popover.tsx
index 17d95692..d76526f6 100644
--- a/packages/gui/src/components/primitives/ColorPicker/Popover.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/Popover.tsx
@@ -4,8 +4,6 @@ import ColorField, { Props as PickerProps } from './Field'
 import { hasAlpha, withFallback } from './util'
 
 interface Props extends PickerProps {
-  /** Whether the text value of the color should be displayed  */
-  showText?: boolean
   /** The element to render on the swatch preview */
   swatch?: JSX.Element
   id?: string
@@ -18,7 +16,6 @@ interface Props extends PickerProps {
 export default function ColorPopover({
   value,
   onChange,
-  showText,
   swatch,
   ...props
 }: Props) {
@@ -26,20 +23,28 @@ export default function ColorPopover({
     <Popover.Root>
       <Popover.Trigger
         sx={{
-          p: 0,
+          pl: 1,
+          pr: 2,
+          py: 1,
+          cursor: 'pointer',
           color: 'text',
           backgroundColor: 'transparent',
-          border: 'none',
-          width: '100%',
+          border: '1px solid',
+          borderColor: 'border',
+          borderRadius: '0.25rem',
+          width: 'max-content',
           fontSize: '0.875rem',
           textOverflow: 'ellipsis',
           overflow: 'hidden',
           whiteSpace: 'nowrap',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 2,
         }}
       >
         {/* swatch */}
         <Popover.Anchor>{swatch || <Swatch value={value} />}</Popover.Anchor>
-        {showText ? value : null}
+        {value}
       </Popover.Trigger>
       <Popover.Content
         sx={{
@@ -49,6 +54,7 @@ export default function ColorPopover({
           border: '1px solid',
           borderColor: 'border',
           borderRadius: '0.5rem',
+          zIndex: 9999,
         }}
       >
         <ColorField value={value} onChange={onChange} {...props} />
@@ -63,9 +69,10 @@ function Swatch({ value }: { value: string }) {
     <div
       sx={{
         position: 'relative',
-        width: '2rem',
+        width: '1.25rem',
+        height: '1.25rem',
         aspectRatio: '1 / 1',
-        borderRadius: '0.5rem',
+        borderRadius: '0.25rem',
         overflow: 'hidden',
         border: '1px solid',
         borderColor: 'border',
diff --git a/packages/gui/src/components/primitives/ColorPicker/PreviewPalettePicker.tsx b/packages/gui/src/components/primitives/ColorPicker/PreviewPalettePicker.tsx
new file mode 100644
index 00000000..2d55ea18
--- /dev/null
+++ b/packages/gui/src/components/primitives/ColorPicker/PreviewPalettePicker.tsx
@@ -0,0 +1,93 @@
+import { useState } from 'react'
+import { Color } from '../../../types/css'
+import { Theme } from '../../../types/theme'
+import { Label } from '../Label'
+import { ThemeColor } from './PalettePicker'
+
+interface MiniPaletteProps {
+  value: Color
+  onChange(value: ThemeColor): void
+  theme?: Theme
+}
+
+export function PreviewPalettePicker({
+  value,
+  onChange,
+  theme,
+}: MiniPaletteProps) {
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(true)
+  const collapsedRows = 8
+  return (
+    <>
+      <Label sx={{ py: 2 }}>Theme Colors</Label>
+      <div
+        sx={{
+          '& *': {
+            transition: 'all .2s ease-in-out',
+          },
+        }}
+      >
+        {theme?.colors?.map((colorGroup: any, i: number) => {
+          if (isCollapsed && i >= collapsedRows) {
+            return null
+          }
+
+          return (
+            <div
+              key={i}
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(12,1fr)',
+                gap: '.25rem',
+                mb: 1,
+              }}
+            >
+              {colorGroup.colors.map((color: any, i: number) => {
+                const selected = value === color.value
+
+                return (
+                  <button
+                    key={color.id}
+                    title={`${colorGroup.name}.${i}`}
+                    sx={{
+                      appearance: 'none',
+                      WebkitAppearance: 'none',
+                      cursor: 'pointer',
+                      boxShadow: selected ? 'inset 0 0 0 2px white, 0 0 0 2px '+color.value : 'inset 0 0 0 2px rgba(0,0,0,.15)',
+                      borderRadius: '9999px',
+                      padding: 0,
+                      margin: 0,
+                      width: '100%',
+                      aspectRatio: '1 / 1',
+                      backgroundColor: color.value,
+                      border: 0,
+                    }}
+                    onClick={() =>
+                      onChange({
+                        type: 'theme',
+                        path: `${colorGroup.name}.${i}`,
+                      })
+                    }
+                  />
+                )
+              })}
+            </div>
+          )
+        })}
+      </div>
+      <a
+        sx={{
+          width: '100%',
+          display: 'block',
+          textAlign: 'right',
+          pt: 2,
+          fontSize: 0,
+          cursor: 'pointer',
+        }}
+        onClick={() => setIsCollapsed(!isCollapsed)}
+      >
+        {`${isCollapsed ? 'View All' : 'Hide'}`}
+      </a>
+    </>
+  )
+}
diff --git a/packages/gui/src/components/primitives/ColorPicker/SystemPicker.tsx b/packages/gui/src/components/primitives/ColorPicker/SystemPicker.tsx
index 781b961f..0081e5d8 100644
--- a/packages/gui/src/components/primitives/ColorPicker/SystemPicker.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/SystemPicker.tsx
@@ -1,7 +1,6 @@
+import { Color } from '../../../types/css'
 import ColorValueDisplay from './ValueDisplay'
 
-type Color = string
-
 interface Props {
   value: Color
   onChange(value: Color): void
diff --git a/packages/gui/src/components/primitives/ColorPicker/ValueDisplay.tsx b/packages/gui/src/components/primitives/ColorPicker/ValueDisplay.tsx
index 2f8a5138..ae3afa8c 100644
--- a/packages/gui/src/components/primitives/ColorPicker/ValueDisplay.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/ValueDisplay.tsx
@@ -1,16 +1,35 @@
-import { getColorMode, withFallback } from './util'
+import { getColorMode, isValidColor, withFallback } from './util'
 import Checkerboard from './Checkerboard'
 import { AlertTriangle } from 'react-feather'
 import * as Popover from '@radix-ui/react-popover'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { Color } from '../../../types/css'
 
 interface Props {
-  value: string
-  onChange(value: string): void
+  value: Color
+  onChange(value: Color): void
 }
 /** Displays a swatch of the color and its current value */
 export default function ColorValueDisplay({ value, onChange }: Props) {
   const colorMode = getColorMode(value)
+  const [internalValue, setInternalValue] = useState(value)
+
+  // Only propagate the value change if it's a valid color
+  function handleChange(newValue: string) {
+    setInternalValue(newValue)
+    if (isValidColor(newValue)) {
+      onChange(newValue)
+    }
+  }
+
+  // we probably shouldn't be using an effect but idk how to do this otherwise
+  // https://beta.reactjs.org/learn/you-might-not-need-an-effect
+  useEffect(() => {
+    if (value !== internalValue) {
+      setInternalValue(value)
+    }
+  }, [value])
+
   return (
     <div
       sx={{
@@ -34,7 +53,9 @@ export default function ColorValueDisplay({ value, onChange }: Props) {
           sx={{
             position: 'absolute',
             inset: 0,
-            ...withFallback(value, (color) => ({ backgroundColor: color })),
+            ...withFallback(value, (color) => ({
+              backgroundColor: color,
+            })),
           }}
         />
       </div>
@@ -43,8 +64,8 @@ export default function ColorValueDisplay({ value, onChange }: Props) {
       )}
       <input
         type="text"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
+        value={internalValue}
+        onChange={(e) => handleChange(e.target.value)}
         sx={{
           py: 1,
           width: '100%',
diff --git a/packages/gui/src/components/primitives/ColorPicker/ValuePicker.tsx b/packages/gui/src/components/primitives/ColorPicker/ValuePicker.tsx
index 834f876e..873fa354 100644
--- a/packages/gui/src/components/primitives/ColorPicker/ValuePicker.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/ValuePicker.tsx
@@ -5,16 +5,21 @@ import ColorValueDisplay from './ValueDisplay'
 import { format, getColorMode, isValidColor } from './util'
 import LchColorPicker from './LCHPicker'
 import LabColorPicker from './LabPicker'
+import { Theme } from '../../../types/theme'
+import { PreviewPalettePicker } from './PreviewPalettePicker'
+import { Color } from '../../../types/css'
 
-type Color = string
 interface Props {
   value: Color
   onChange(value: Color): void
+  theme?: Theme
+  onTabChange?(value: string): void
 }
 
 // The "normal" color picker that lets you set a color value directly
 export default function ColorPicker(props: Props) {
   const { value, onChange } = props
+
   const normedValue = isValidColor(value) ? value : '#000000'
   const mode = getColorMode(normedValue)
 
@@ -33,7 +38,7 @@ export default function ColorPicker(props: Props) {
         <select
           value={mode}
           onChange={(e) => {
-            onChange(format(value, e.target.value))
+            onChange(format(normedValue, e.target.value))
           }}
           sx={{
             marginLeft: 'auto',
diff --git a/packages/gui/src/components/primitives/Combobox.tsx b/packages/gui/src/components/primitives/Combobox.tsx
index 921817c7..dd65f531 100644
--- a/packages/gui/src/components/primitives/Combobox.tsx
+++ b/packages/gui/src/components/primitives/Combobox.tsx
@@ -1,18 +1,29 @@
-import { useCombobox } from "downshift"
-import { useEffect, useId, useRef, useState } from "react"
+import { useCombobox } from 'downshift'
+import {
+  ChangeEvent,
+  KeyboardEvent,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react'
 
 interface ComboboxInterface {
   onFilterItems: (filterValue: string) => string[]
   onItemSelected: (selectedItem: string) => void
   items: string[]
   value?: string
+  clearOnSelect?: boolean
+  decorateItemText?: (text: string) => string
 }
 
 export function Combobox({
   onFilterItems,
   onItemSelected,
   items,
-  value
+  value,
+  clearOnSelect = false,
+  decorateItemText = (str) => str,
 }: ComboboxInterface) {
   const id = useId()
   const inputRef = useRef(null)
@@ -34,6 +45,7 @@ export function Combobox({
     getItemProps,
   } = useCombobox({
     id,
+    initialInputValue: value,
     items: inputItems,
     selectedItem: filterValue,
     onInputValueChange: ({ inputValue }) => {
@@ -50,17 +62,34 @@ export function Combobox({
   }
 
   const handleItemSelected = (selectedItem: string) => {
-    setFilterValue(selectedItem)
     onItemSelected(selectedItem)
+    const selectedItemText = decorateItemText
+      ? decorateItemText(selectedItem)
+      : selectedItem
+    setFilterValue(clearOnSelect ? '' : selectedItemText)
+  }
+
+  const handleEnter = () => {
+    if (items.includes(filterValue)) {
+      handleItemSelected(filterValue)
+      toggleMenu()
+    }
   }
 
   return (
-    <div {...getComboboxProps()}>
+    <div {...getComboboxProps()} sx={{ width: '100%' }}>
       <input
-        type='text'          
+        type="text"
         {...getInputProps({
           ref: inputRef,
-          onChange: (e: any) => setFilterValue(e.target.value),
+          onChange: (e: ChangeEvent<HTMLInputElement>) => {
+            setFilterValue(e.target.value)
+          },
+          onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === 'Enter') {
+              handleEnter()
+            }
+          },
         })}
         onFocus={() => {
           if (!isOpen) {
@@ -68,8 +97,19 @@ export function Combobox({
             handleFilterItems('')
           }
         }}
-        // value={filterValue}
-        sx={{ width: '100%' }}
+        autocorrect="off"
+        spellcheck="false"
+        sx={{
+          WebkitAppearance: 'none',
+          appearance: 'none',
+          width: '100%',
+          borderWidth: '1px',
+          borderStyle: 'solid',
+          borderColor: 'inputBorder',
+          borderRadius: '4px',
+          p: 2,
+          bg: 'background',
+        }}
       />
       <div
         sx={{
@@ -148,6 +188,8 @@ export function Combobox({
                     margin: 0,
                     pl: 3,
                     py: 1,
+                    cursor: 'auto',
+                    userSelect: 'none',
                     backgroundColor:
                       highlightedIndex === index
                         ? 'backgroundOffset'
@@ -165,7 +207,7 @@ export function Combobox({
                     toggleMenu()
                   }}
                 >
-                  {item}
+                  {decorateItemText(item)}
                 </li>
               )
             })}
diff --git a/packages/gui/src/components/primitives/KeywordSelect.tsx b/packages/gui/src/components/primitives/KeywordSelect.tsx
new file mode 100644
index 00000000..ffec77d6
--- /dev/null
+++ b/packages/gui/src/components/primitives/KeywordSelect.tsx
@@ -0,0 +1,32 @@
+import * as Select from '../ui/Select'
+import { GLOBAL_KEYWORDS } from '../../data/global-keywords'
+import { EditorProps } from '../../types/editor'
+
+interface Props<T extends string> extends EditorProps<T> {
+  options: T[]
+  hideIcon?: boolean
+}
+
+export const KeywordSelect = <T extends string>({
+  onChange,
+  value,
+  options,
+}: Props<T>) => {
+  return (
+    <Select.Root value={value} onValueChange={onChange}>
+      <Select.Trigger>
+        <Select.Value />
+      </Select.Trigger>
+      <Select.Content>
+        {options.map((option) => {
+          return (
+            <Select.Item value={option}>
+              <Select.ItemIndicator />
+              <Select.ItemText>{option}</Select.ItemText>
+            </Select.Item>
+          )
+        })}
+      </Select.Content>
+    </Select.Root>
+  )
+}
diff --git a/packages/gui/src/components/primitives/Label.tsx b/packages/gui/src/components/primitives/Label.tsx
index 59bf3906..3804fcb3 100644
--- a/packages/gui/src/components/primitives/Label.tsx
+++ b/packages/gui/src/components/primitives/Label.tsx
@@ -6,6 +6,6 @@ interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
 }
 export const Label = (props: LabelProps) => {
   return (
-    <Root {...props} sx={{ fontSize: 0, fontWeight: 500, display: 'block' }} />
+    <Root {...props} sx={{ userSelect: 'none', fontSize: 0, fontWeight: 500, display: 'block' }} />
   )
 }
diff --git a/packages/gui/src/components/primitives/Number/Cursor.tsx b/packages/gui/src/components/primitives/Number/Cursor.tsx
index 803e9ef7..e89a7b58 100644
--- a/packages/gui/src/components/primitives/Number/Cursor.tsx
+++ b/packages/gui/src/components/primitives/Number/Cursor.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react'
-import { CursorProps } from './types'
 
+interface CursorProps {
+  x: number
+  y: number
+}
 const InternalCursor = ({ x, y }: CursorProps, ref: any) => {
   return (
     <svg
diff --git a/packages/gui/src/components/primitives/Number/Input.tsx b/packages/gui/src/components/primitives/Number/Input.tsx
index e0405153..e9e9f707 100644
--- a/packages/gui/src/components/primitives/Number/Input.tsx
+++ b/packages/gui/src/components/primitives/Number/Input.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { NumberInputProps } from './types'
-import { useDrag } from 'react-use-gesture'
+import { useDrag } from '@use-gesture/react'
 import { roundToStep } from '../../../lib/math'
 
 interface DraggableLabelProps {
-  step: number
+  step?: number
   onUpdate: (newValue: any) => void
   value: number
   min?: number
@@ -12,20 +12,40 @@ interface DraggableLabelProps {
 }
 
 export const DraggableInput = ({
-  value,
+  value = 0,
   onUpdate,
-  step,
+  step = 1,
   min,
   max,
 }: DraggableLabelProps) => {
   const [dragging, setDragging] = React.useState<boolean>(false)
+  // Keep track of an internal value so that when the user types in an invalid number,
+  // we just wait until the value is valid again to update
+  const [internalValue, setInternalValue] = React.useState<number | string>(
+    value
+  )
   const initialValue = React.useRef<number>(value)
 
+  const updateValue = (newValue: number) => {
+    let inRangeValue = newValue
+    if (min || min === 0) inRangeValue = Math.max(newValue, min)
+    if (max || max === 0) inRangeValue = Math.min(inRangeValue, max)
+
+    setInternalValue(inRangeValue)
+    onUpdate(inRangeValue)
+  }
+
+  React.useEffect(() => {
+    if (value !== internalValue) {
+      setInternalValue(value)
+    }
+  }, [value])
+
   const bind = useDrag(
-    ({ dragging, first, last, tap, movement: [dx] }) => {
+    ({ dragging = false, first, last, tap, movement: [dx] }) => {
       setDragging(dragging)
-      const parsedValue = typeof value === 'string' ? parseFloat(value) : value
 
+      const parsedValue = typeof value === 'string' ? parseFloat(value) : value
       if (tap || last) return
       if (first) {
         initialValue.current = parsedValue
@@ -36,27 +56,57 @@ export const DraggableInput = ({
       if (dragging && (min || min === 0)) newValue = Math.max(newValue, min)
       if (dragging && (max || max === 0)) newValue = Math.min(newValue, max)
 
-      onUpdate(newValue)
-    },
-    { pointerEvents: true }
+      updateValue(newValue)
+    }
+    // { pointerEvents: true }
   )
 
   return (
     <input
-      type="number"
-      value={value}
-      onChange={({ target: { value: inputValue }}: any) => {
+      type="text"
+      value={internalValue}
+      onKeyDown={(e) => {
+        switch (e.key) {
+          case 'ArrowUp': {
+            updateValue(roundToStep(value + step, step))
+            return
+          }
+          case 'ArrowDown': {
+            updateValue(roundToStep(value - step, step))
+            return
+          }
+        }
+      }}
+      onChange={({ target: { value: inputValue } }: any) => {
         let newValue = parseFloat(inputValue)
-        if (dragging && (min || min === 0)) newValue = Math.max(newValue, min)
-        if (dragging && (max || max === 0)) newValue = Math.min(newValue, max)
 
-        onUpdate(newValue)
+        if (min || min === 0) newValue = Math.max(newValue, min)
+        if (max || max === 0) newValue = Math.min(newValue, max)
+
+        // A user is currently typing a negative number or a decimal which results
+        // in the number being temporarily invalid. When this happens, update the
+        // internal value and wait for the value to become valid again.
+        const valueIsInFlight = inputValue === '-' || inputValue.endsWith('.')
+        if (valueIsInFlight) {
+          return setInternalValue(inputValue)
+        }
+
+        setInternalValue(newValue ?? '')
+        onUpdate(newValue || 0)
       }}
       sx={{
         cursor: dragging ? 'ew-resize' : 'default',
-        minHeight: '1.6em',
-        width: '100%',
+        lineHeight: 1.5,
+        p: 1,
+        width: '7ch',
+        // Use fractional steps to approximate the minimum width
+        // so we don't get "jitters" moving between fractional and integer values
+        minWidth: `${step.toString().length + 1}ch`,
         textAlign: 'right',
+        background: 'none',
+        color: 'text',
+        border: 'none',
+        transition: 'width 150ms',
       }}
       {...bind()}
     />
diff --git a/packages/gui/src/components/primitives/UnitSelect.tsx b/packages/gui/src/components/primitives/UnitSelect.tsx
index 7e3b75ab..31850958 100644
--- a/packages/gui/src/components/primitives/UnitSelect.tsx
+++ b/packages/gui/src/components/primitives/UnitSelect.tsx
@@ -1,18 +1,28 @@
-import * as React from 'react'
+import * as Select from '../ui/Select'
+import { EditorProps } from '../../types/editor'
 
-type UnitSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
+interface Props extends EditorProps<string> {
   units: readonly string[]
 }
-export const UnitSelect = ({ units, ...props }: UnitSelectProps) => {
+export const UnitSelect = ({ units, value, onChange }: Props) => {
   return (
-    <select {...props}>
-      {units.map((unit: string) => {
-        return (
-          <option key={unit} value={unit}>
-            {unit}
-          </option>
-        )
-      })}
-    </select>
+    <Select.Root value={value ?? units[0]} onValueChange={onChange}>
+      <Select.Trigger>
+        <Select.Value>
+          {!['number', 'keyword'].includes(value) && value}
+        </Select.Value>
+        {/* <Select.Icon /> */}
+      </Select.Trigger>
+      <Select.Content>
+        {units.map((unit: string) => {
+          return (
+            <Select.Item key={unit} value={unit}>
+              <Select.ItemIndicator />
+              <Select.ItemText>{unit}</Select.ItemText>
+            </Select.Item>
+          )
+        })}
+      </Select.Content>
+    </Select.Root>
   )
 }
diff --git a/packages/gui/src/components/primitives/ValueSelect.tsx b/packages/gui/src/components/primitives/ValueSelect.tsx
index 7cb03674..45dd0bd8 100644
--- a/packages/gui/src/components/primitives/ValueSelect.tsx
+++ b/packages/gui/src/components/primitives/ValueSelect.tsx
@@ -1,9 +1,9 @@
-import { stringifyUnit } from '../../lib/stringify'
+import * as Select from '@radix-ui/react-select'
 
 interface ValueInputProps {
   onChange: (e: any) => void
-  value?: number | string
-  values: any[]
+  value: string
+  values: string[]
 }
 
 export const ValueSelect = ({
@@ -12,20 +12,60 @@ export const ValueSelect = ({
   values,
 }: ValueInputProps): any => {
   return (
-    <select
-      value={value}
-      onChange={onChange}
-      sx={{ width: '100%', minHeight: '1.6em' }}
-    >
-      {values.map((v) => {
-        return typeof v === 'string' ? (
-          <option key={v}>{v}</option>
-        ) : (
-          <option key={v} value={v.id}>
-            {stringifyUnit(v)}
-          </option>
-        )
-      })}
-    </select>
+    <Select.Root value={value} onValueChange={onChange}>
+      <Select.Trigger
+        sx={{
+          minHeight: '1.6em',
+          background: 'none',
+          border: 'none',
+          color: 'text',
+          width: 'max-content',
+          ':hover': {
+            background: 'backgroundOffset',
+          },
+        }}
+      >
+        <Select.Value />
+      </Select.Trigger>
+      <Select.Content
+        sx={{
+          backgroundColor: 'background',
+          text: 'text',
+          py: 1,
+          border: '1px solid',
+          borderColor: 'border',
+          borderRadius: '0.5rem',
+          fontSize: 1,
+        }}
+      >
+        <Select.Viewport>
+          {values.map((value) => {
+            return (
+              <Select.Item
+                value={value}
+                sx={{
+                  pr: 3,
+                  pl: 4,
+                  cursor: 'pointer',
+                  ':hover': {
+                    backgroundColor: 'primary',
+                  },
+                }}
+              >
+                <Select.ItemIndicator
+                  sx={{
+                    position: 'absolute',
+                    left: 3,
+                  }}
+                >
+                  ✓
+                </Select.ItemIndicator>
+                <Select.ItemText>{value}</Select.ItemText>
+              </Select.Item>
+            )
+          })}
+        </Select.Viewport>
+      </Select.Content>
+    </Select.Root>
   )
 }
diff --git a/packages/gui/src/components/providers/EditorContext.tsx b/packages/gui/src/components/providers/EditorContext.tsx
index 7ac65075..0ce3060b 100644
--- a/packages/gui/src/components/providers/EditorContext.tsx
+++ b/packages/gui/src/components/providers/EditorContext.tsx
@@ -2,8 +2,8 @@ import { ThemeProvider as ThemeUIProvider } from 'theme-ui'
 import { get, unset } from 'lodash-es'
 import { createContext, ReactNode, useContext } from 'react'
 import { KeyArg, Recipe, EditorData } from './types'
-import { applyRecipe } from './util'
-import { ThemeProvider } from './ThemeContext'
+import { applyRecipe, parentPath } from './util'
+import { ThemeProvider, useTheme } from './ThemeContext'
 import { EditorConfigProvider, EditorConfig } from './EditorConfigContext'
 import { theme as uiTheme } from '../ui/theme'
 import { Theme } from '../../types/theme'
@@ -14,19 +14,30 @@ export interface EditorContextValue<V> extends EditorData<V> {
   theme?: Theme
   setValue(value: Recipe<V>): void
   getField<T = any>(key: KeyArg): T
+  getParentField<T = any>(key: KeyArg): T
   setField<T>(key: KeyArg, value: Recipe<T>): void
   setFields<T>(fields: Record<string, Recipe<T>>, removeFields?: KeyArg[]): void
   removeField(key: KeyArg): void
+  clearAll(): void
 }
 
 export function useEditor() {
   const context = useContext(EditorContext)
+  const theme = useTheme()
   const { onChange: editComponentData, value } = context
 
   function getField<T = any>(field: KeyArg | undefined) {
     return field ? (get(value, field) as T) : value
   }
 
+  function getParentField<T = any>(field: KeyArg | undefined) {
+    if (!field || !Array.isArray(field)) {
+      return value
+    }
+
+    return get(value, parentPath(field))
+  }
+
   function getFields<T = any>(fields: KeyArg[] | undefined) {
     const fieldsValue = fields?.reduce((acc: any, curr: KeyArg) => {
       const fieldValue = get(value, curr) as T
@@ -70,14 +81,25 @@ export function useEditor() {
     })
   }
 
+  const clearAll = () => {
+    editComponentData((draft) => {
+      Object.keys(draft.value).map((key: string) => {
+        unset(draft.value, key)
+      })
+    })
+  }
+
   return {
     ...context,
     getField,
+    getParentField,
     getFields,
     setField,
     setFields,
     onChange,
     removeField,
+    clearAll,
+    theme,
   }
 }
 
@@ -105,6 +127,7 @@ export function EditorProvider<V>({
   showAddProperties?: boolean
   children: ReactNode
 }) {
+  const outerTheme = useTheme()
   const editorConfig: EditorConfig = {
     hideResponsiveControls: hideResponsiveControls ?? false,
     showAddProperties: showAddProperties ?? false,
@@ -113,7 +136,7 @@ export function EditorProvider<V>({
   const value = stylesToEditorSchema(providedValue)
 
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={theme || outerTheme}>
       <ThemeUIProvider theme={uiTheme}>
         <EditorConfigProvider config={editorConfig}>
           <DynamicControlsProvider>
diff --git a/packages/gui/src/components/providers/ThemeContext.tsx b/packages/gui/src/components/providers/ThemeContext.tsx
index a6b645dc..2af6a3af 100644
--- a/packages/gui/src/components/providers/ThemeContext.tsx
+++ b/packages/gui/src/components/providers/ThemeContext.tsx
@@ -6,13 +6,41 @@ const DEFAULT_THEME_CONTEXT: Theme = {}
 const ThemeContext = React.createContext<Theme>(DEFAULT_THEME_CONTEXT)
 
 export const useTheme = (): Theme => React.useContext(ThemeContext)
-export const useThemeProperty = (property?: string): any[] => {
+export const useThemeProperty = (
+  property?: string
+): any[] | Record<string, string> => {
   const context = React.useContext(ThemeContext)
   switch (property) {
-    case 'fontSize':
+    case 'fontSizes':
       return context.fontSizes || []
-    case 'lineHeight':
+    case 'lineHeights':
       return context.lineHeights || []
+    case 'space':
+      return context.space || []
+    case 'borderRadius':
+      return context.borderRadius || []
+    case 'borderWidths':
+      return context.borderWidths || []
+    case 'borderStyles':
+      return context.borderStyles || []
+    case 'colors':
+      return context.colors || []
+    case 'fonts':
+      return context.fonts || {}
+    case 'fontWeights':
+      return context.fontWeights || []
+    case 'letterSpacings':
+      return context.letterSpacings || []
+    case 'text':
+      return context.text || []
+    case 'textShadows':
+      return context.textShadows || []
+    case 'gradients':
+      return context.gradients || []
+    case 'transitions':
+      return context.transitions || []
+    case 'sizes':
+      return context.sizes || []
     default:
       return []
   }
diff --git a/packages/gui/src/components/providers/util.ts b/packages/gui/src/components/providers/util.ts
index cdc3bec1..9073f7f2 100644
--- a/packages/gui/src/components/providers/util.ts
+++ b/packages/gui/src/components/providers/util.ts
@@ -6,6 +6,12 @@ export function joinPath(path1: KeyArg, path2: KeyArg): KeyPath {
   return [...toPath(path1), ...toPath(path2)]
 }
 
+export function parentPath(path: KeyPath): KeyPath {
+  const parentPath = [...path]
+  parentPath.pop()
+  return parentPath
+}
+
 // lib/util's set and get functions don't handle the case
 // of setting a nested path when parent paths don't exist,
 // so we make our own functions for now
diff --git a/packages/gui/src/components/schemas/angle.ts b/packages/gui/src/components/schemas/angle.ts
new file mode 100644
index 00000000..cf0cc917
--- /dev/null
+++ b/packages/gui/src/components/schemas/angle.ts
@@ -0,0 +1,34 @@
+import { Angle, ANGLE_UNITS } from '../../types/css'
+import { dimension } from './dimension'
+
+const angleRanges = {
+  deg: [0, 360],
+  turn: [0, 1],
+  rad: [0, 2 * Math.PI],
+  grad: [0, 400],
+} as const
+
+const angleConversions = {
+  deg: 360,
+  turn: 1,
+  rad: 2 * Math.PI,
+  grad: 400,
+}
+
+export const angleSteps = {
+  deg: 1,
+  turn: 0.01,
+  rad: 0.01,
+  grad: 1,
+}
+
+export function angle({ defaultValue }: { defaultValue?: Angle } = {}) {
+  return dimension({
+    type: 'angle',
+    defaultValue,
+    steps: angleSteps,
+    regenRanges: angleRanges,
+    conversions: angleConversions,
+    units: ANGLE_UNITS,
+  })
+}
diff --git a/packages/gui/src/components/schemas/animation.tsx b/packages/gui/src/components/schemas/animation.tsx
new file mode 100644
index 00000000..d770fe1c
--- /dev/null
+++ b/packages/gui/src/components/schemas/animation.tsx
@@ -0,0 +1,51 @@
+import { easingFunction } from './easing-function'
+import { joinSchemas } from './joinSchemas'
+import { listSchema } from './list'
+import { objectSchema } from './object'
+import { ident, integer, keyword } from './primitives'
+import { shorthandSchema } from './shorthand'
+import { time } from './time'
+
+const delay = time()
+const direction = keyword([
+  'normal',
+  'reverse',
+  'alternate',
+  'alternate-reverse',
+])
+const duration = time({
+  defaultValue: { value: 350, unit: 'ms' },
+})
+const fillMode = keyword(['none', 'forwards', 'backwards', 'both'])
+const iterationCount = joinSchemas([integer(), keyword(['infinite'])])
+const name = ident({ defaultValue: 'none' })
+const playState = keyword(['running', 'paused'])
+const timingFunction = easingFunction
+
+export const animationDelay = listSchema({ itemSchema: delay })
+export const animationDirection = listSchema({ itemSchema: direction })
+export const animationDuration = listSchema({ itemSchema: duration })
+export const animationFillMode = listSchema({ itemSchema: fillMode })
+export const animationIterationCount = listSchema({
+  itemSchema: iterationCount,
+})
+export const animationName = listSchema({ itemSchema: name })
+export const animationPlayState = listSchema({ itemSchema: playState })
+export const animationTimingFunction = listSchema({
+  itemSchema: timingFunction,
+})
+
+const singleAnimation = shorthandSchema({
+  type: '<animation>',
+  fields: {
+    name,
+    duration,
+    timingFunction,
+    delay,
+    iterationCount,
+    direction,
+    fillMode,
+    playState,
+  },
+})
+export const animation = listSchema({ itemSchema: singleAnimation })
diff --git a/packages/gui/src/components/schemas/aspect-ratio.ts b/packages/gui/src/components/schemas/aspect-ratio.ts
new file mode 100644
index 00000000..085cec75
--- /dev/null
+++ b/packages/gui/src/components/schemas/aspect-ratio.ts
@@ -0,0 +1,5 @@
+import { joinSchemas } from './joinSchemas'
+import { keyword } from './primitives'
+import { ratio } from './ratio'
+
+export const aspectRatio = joinSchemas([ratio(), keyword(['auto'])])
diff --git a/packages/gui/src/components/schemas/background.tsx b/packages/gui/src/components/schemas/background.tsx
new file mode 100644
index 00000000..ea5c0900
--- /dev/null
+++ b/packages/gui/src/components/schemas/background.tsx
@@ -0,0 +1,75 @@
+import { BOX_KEYWORDS } from '../../types/css'
+import { image } from './image'
+import { joinSchemas } from './joinSchemas'
+import { listSchema } from './list'
+import { objectSchema } from './object'
+import { position } from './position'
+import { keyword, lengthPercentage } from './primitives'
+import { shorthandSchema } from './shorthand'
+import { tupleSchema } from './tuple'
+
+const attachment = keyword(['scroll', 'fixed', 'local'])
+const clip = keyword([...BOX_KEYWORDS, 'text'])
+const origin = keyword(BOX_KEYWORDS)
+const repeat = joinSchemas([
+  tupleSchema({
+    itemSchema: keyword(['repeat', 'space', 'round', 'no-repeat']),
+    labels: ['x', 'y'],
+  }),
+  keyword(['repeat-x', 'repeat-y']),
+])
+const size = joinSchemas([
+  keyword(['cover', 'contain']),
+  tupleSchema({
+    itemSchema: joinSchemas([
+      keyword(['auto']),
+      lengthPercentage({
+        defaultValue: { value: 100, unit: '%' },
+      }),
+    ]),
+    labels: ['x', 'y'],
+  }),
+])
+
+export const backgroundAttachment = listSchema({ itemSchema: attachment })
+export const backgroundClip = listSchema({ itemSchema: clip })
+export const backgroundOrigin = listSchema({ itemSchema: origin })
+export const backgroundRepeat = listSchema({ itemSchema: repeat })
+export const backgroundSize = listSchema({ itemSchema: size })
+export const backgroundImage = listSchema({ itemSchema: image })
+export const backgroundPosition = listSchema({ itemSchema: position })
+
+const singleBackground = shorthandSchema({
+  type: '<background>',
+  fields: {
+    image,
+    position,
+    size,
+    repeat,
+    attachment,
+    origin,
+    clip,
+  },
+  slash: ['size'],
+})
+export const background = listSchema({ itemSchema: singleBackground })
+
+const blendMode = keyword([
+  'normal',
+  'multiply',
+  'screen',
+  'overlay',
+  'darken',
+  'lighten',
+  'color-dodge',
+  'color-burn',
+  'hard-light',
+  'soft-light',
+  'difference',
+  'exclusion',
+  'hue',
+  'saturation',
+  'color',
+  'luminosity',
+])
+export const backgroundBlendMode = listSchema({ itemSchema: blendMode })
diff --git a/packages/gui/src/components/schemas/basic-shape.tsx b/packages/gui/src/components/schemas/basic-shape.tsx
new file mode 100644
index 00000000..4d237bb7
--- /dev/null
+++ b/packages/gui/src/components/schemas/basic-shape.tsx
@@ -0,0 +1,72 @@
+import { LengthPercentage } from '../../types/css'
+import { boxSideSchema } from './box-side'
+import { listSchema } from './list'
+import { functionSchema } from './function'
+import { position } from './position'
+import { keyword, length, lengthPercentage, string } from './primitives'
+import { objectSchema } from './object'
+import { joinSchemas } from './joinSchemas'
+
+const shapeRadius = joinSchemas([
+  lengthPercentage(),
+  keyword(['closest-side', 'farthest-side']),
+])
+
+const inset = functionSchema(
+  'inset',
+  objectSchema({
+    fields: {
+      offset: boxSideSchema({
+        itemSchema: lengthPercentage(),
+      }),
+      // TODO full border-radius syntax
+      borderRadius: lengthPercentage(),
+    },
+    separator: ' round ',
+  })
+)
+
+const circle = functionSchema(
+  'circle',
+  objectSchema({
+    fields: {
+      radius: shapeRadius,
+      position: position,
+    },
+    separator: ' at ',
+  })
+)
+
+const ellipse = functionSchema(
+  'ellipse',
+  objectSchema({
+    fields: {
+      rx: shapeRadius,
+      ry: shapeRadius,
+      position: position,
+    },
+    stringify: ({ rx, ry, position }) => `${rx} ${ry} at ${position}`,
+  })
+)
+
+export type Point = { x: LengthPercentage; y: LengthPercentage }
+
+const polygon = functionSchema(
+  'polygon',
+  objectSchema({
+    fields: {
+      fillRule: keyword(['nonzero', 'evenodd']),
+      points: listSchema({
+        itemSchema: objectSchema({
+          fields: { x: length(), y: length() },
+        }),
+      }),
+    },
+  })
+)
+
+const path = functionSchema('path', string())
+
+export const basicShape = joinSchemas([inset, circle, ellipse, polygon, path], {
+  type: '<basic-shape>',
+})
diff --git a/packages/gui/src/components/schemas/border-image.tsx b/packages/gui/src/components/schemas/border-image.tsx
new file mode 100644
index 00000000..7a8c021c
--- /dev/null
+++ b/packages/gui/src/components/schemas/border-image.tsx
@@ -0,0 +1,52 @@
+import { boxSideSchema } from './box-side'
+import { image } from './image'
+import { joinSchemas } from './joinSchemas'
+import { objectSchema } from './object'
+import {
+  keyword,
+  length,
+  lengthPercentage,
+  numberPercentage,
+} from './primitives'
+import { shorthandSchema } from './shorthand'
+import { toggle } from './toggle'
+import { tupleSchema } from './tuple'
+
+export const borderImageOutset = boxSideSchema({
+  itemSchema: length({ number: true }),
+})
+
+export const borderImageRepeat = tupleSchema({
+  itemSchema: keyword(['stretch', 'repeat', 'round', 'space']),
+  labels: ['y', 'x'],
+})
+
+export const borderImageSlice = objectSchema({
+  fields: {
+    value: boxSideSchema({ itemSchema: numberPercentage() }),
+    fill: toggle('fill'),
+  },
+})
+
+export const borderImageSource = joinSchemas([image, keyword(['none'])])
+
+export const borderImageWidth = boxSideSchema({
+  itemSchema: joinSchemas([
+    lengthPercentage({
+      number: true,
+      range: 'nonnegative',
+    }),
+    keyword(['auto']),
+  ]),
+})
+
+export const borderImage = shorthandSchema({
+  fields: {
+    source: borderImageSource,
+    slice: borderImageSlice,
+    width: borderImageWidth,
+    outset: borderImageOutset,
+    repeat: borderImageRepeat,
+  },
+  slash: ['width', 'outset'],
+})
diff --git a/packages/gui/src/components/schemas/border-radius.tsx b/packages/gui/src/components/schemas/border-radius.tsx
new file mode 100644
index 00000000..e68df0c5
--- /dev/null
+++ b/packages/gui/src/components/schemas/border-radius.tsx
@@ -0,0 +1,23 @@
+import { joinSchemas } from './joinSchemas'
+import { lengthPercentage } from './primitives'
+import { themeScale } from './theme'
+import { tupleSchema } from './tuple'
+
+const borderRadiusItem = tupleSchema({
+  itemSchema: joinSchemas([
+    lengthPercentage({ range: 'nonnegative' }),
+    themeScale('borderRadius'),
+  ]),
+  labels: ['x', 'y'],
+})
+
+export const borderTopLeftRadius = borderRadiusItem
+export const borderBottomLeftRadius = borderRadiusItem
+export const borderTopRightRadius = borderRadiusItem
+export const borderBottomRightRadius = borderRadiusItem
+
+// TODO four-valued syntax
+export const borderRadius = joinSchemas([
+  lengthPercentage({ range: 'nonnegative' }),
+  themeScale('borderRadius'),
+])
diff --git a/packages/gui/src/components/schemas/border-spacing.tsx b/packages/gui/src/components/schemas/border-spacing.tsx
new file mode 100644
index 00000000..1ef5de21
--- /dev/null
+++ b/packages/gui/src/components/schemas/border-spacing.tsx
@@ -0,0 +1,8 @@
+import { length } from './primitives'
+import { tupleSchema } from './tuple'
+
+// TODO inlcude other table properties here?
+export const borderSpacing = tupleSchema({
+  itemSchema: length({ range: 'nonnegative' }),
+  labels: ['x', 'y'],
+})
diff --git a/packages/gui/src/components/schemas/border.tsx b/packages/gui/src/components/schemas/border.tsx
new file mode 100644
index 00000000..2bf61c09
--- /dev/null
+++ b/packages/gui/src/components/schemas/border.tsx
@@ -0,0 +1,118 @@
+import { boxSideSchema } from './box-side'
+import { color } from './color'
+import { joinSchemas } from './joinSchemas'
+import { objectSchema } from './object'
+import { keyword, length } from './primitives'
+import { shorthandSchema } from './shorthand'
+import { themeScale } from './theme'
+import { tupleSchema } from './tuple'
+
+/* Border width */
+
+const borderWidthItem = joinSchemas([
+  length({ range: 'nonnegative' }),
+  keyword(['thin', 'medium', 'thick']),
+  themeScale('borderWidths'),
+])
+
+export const borderTopWidth = borderWidthItem
+export const borderRightWidth = borderWidthItem
+export const borderBottomWidth = borderWidthItem
+export const borderLeftWidth = borderWidthItem
+
+export const borderBlockStartWidth = borderWidthItem
+export const borderBlockEndWidth = borderWidthItem
+export const borderInlineStartWidth = borderWidthItem
+export const borderInlineEndWidth = borderWidthItem
+
+export const borderBlockWidth = tupleSchema({
+  itemSchema: borderWidthItem,
+  labels: ['Start', 'End'],
+})
+export const borderInlineWidth = tupleSchema({
+  itemSchema: borderWidthItem,
+  labels: ['Start', 'End'],
+})
+
+export const borderWidth = boxSideSchema({ itemSchema: borderWidthItem })
+
+/* Border style */
+
+const borderStyleItem = keyword([
+  'none',
+  'hidden',
+  'dotted',
+  'dashed',
+  'solid',
+  'double',
+  'groove',
+  'ridge',
+  'inset',
+  'outset',
+])
+export const borderTopStyle = borderStyleItem
+export const borderRightStyle = borderStyleItem
+export const borderBottomStyle = borderStyleItem
+export const borderLeftStyle = borderStyleItem
+export const borderStyle = boxSideSchema({ itemSchema: borderStyleItem })
+
+export const borderBlockStartStyle = borderStyleItem
+export const borderBlockEndStyle = borderStyleItem
+export const borderInlineStartStyle = borderStyleItem
+export const borderInlineEndStyle = borderStyleItem
+
+export const borderBlockStyle = tupleSchema({
+  itemSchema: borderStyleItem,
+  labels: ['Start', 'End'],
+})
+export const borderInlineStyle = tupleSchema({
+  itemSchema: borderStyleItem,
+  labels: ['Start', 'End'],
+})
+
+/* Border color */
+
+const borderColorItem = color()
+
+export const borderTopColor = borderColorItem
+export const borderRightColor = borderColorItem
+export const borderBottomColor = borderColorItem
+export const borderLeftColor = borderColorItem
+export const borderColor = boxSideSchema({ itemSchema: borderColorItem })
+
+export const borderBlockStartColor = borderColorItem
+export const borderBlockEndColor = borderColorItem
+export const borderInlineStartColor = borderColorItem
+export const borderInlineEndColor = borderColorItem
+
+export const borderBlockColor = tupleSchema({
+  itemSchema: borderColorItem,
+  labels: ['Start', 'End'],
+})
+export const borderInlineColor = tupleSchema({
+  itemSchema: borderColorItem,
+  labels: ['Start', 'End'],
+})
+
+const borderItem = shorthandSchema({
+  fields: {
+    width: borderWidthItem,
+    style: borderStyleItem,
+    color: borderColorItem,
+  },
+})
+
+export const borderTop = borderItem
+export const borderRight = borderItem
+export const borderBottom = borderItem
+export const borderLeft = borderItem
+
+export const borderBlockStart = borderItem
+export const borderBlockEnd = borderItem
+export const borderInlineStart = borderItem
+export const borderInlineEnd = borderItem
+
+export const borderBlock = borderItem
+export const borderInline = borderItem
+
+export const border = borderItem
diff --git a/packages/gui/src/components/schemas/box-shadow.tsx b/packages/gui/src/components/schemas/box-shadow.tsx
new file mode 100644
index 00000000..4939f874
--- /dev/null
+++ b/packages/gui/src/components/schemas/box-shadow.tsx
@@ -0,0 +1,31 @@
+import { color } from './color'
+import { joinSchemas } from './joinSchemas'
+import { listSchema } from './list'
+import { objectSchema } from './object'
+import { keyword, length } from './primitives'
+import { themeRecord } from './theme'
+import { toggle } from './toggle'
+
+const singleBoxShadow = objectSchema({
+  type: '<box-shadow>',
+  fields: {
+    inset: toggle('inset'),
+    color: color(),
+    offsetX: length({ themeProperty: 'space' }),
+    offsetY: length({ themeProperty: 'space' }),
+    blur: length({ range: 'nonnegative', themeProperty: 'space' }),
+    spread: length({ themeProperty: 'space' }),
+  },
+})
+
+export const boxShadow = joinSchemas([
+  listSchema({
+    itemSchema: singleBoxShadow,
+    addItem: (curr: any) => {
+      const [last] = curr.slice(-1)
+      return last
+    },
+  }),
+  keyword(['none']),
+  themeRecord('boxShadows'),
+])
diff --git a/packages/gui/src/components/schemas/box-side.tsx b/packages/gui/src/components/schemas/box-side.tsx
new file mode 100644
index 00000000..0b8349c0
--- /dev/null
+++ b/packages/gui/src/components/schemas/box-side.tsx
@@ -0,0 +1,155 @@
+import { compact, isNil, mapValues } from 'lodash-es'
+import { getInputProps } from '../../lib/util'
+import { DataTypeSchema, RegenOptions } from './types'
+import * as Toggle from '@radix-ui/react-toggle'
+import { Maximize, Minimize } from 'react-feather'
+import { SchemaInput } from '../inputs/SchemaInput'
+
+interface CreateBoxSideSchema<T> {
+  itemSchema: DataTypeSchema<T>
+}
+
+export interface BoxSide<T> {
+  top: T
+  right?: T
+  bottom?: T
+  left?: T
+}
+
+/**
+ * Schema describing positional top-right-bottom-left properties
+ * (aka, the sides of a box).
+ */
+export function boxSideSchema<T>({
+  itemSchema,
+}: CreateBoxSideSchema<T>): DataTypeSchema<BoxSide<T>> {
+  function stringify(value: BoxSide<T>, ...args) {
+    const { stringify, defaultValue } = itemSchema
+    if (isLinked(value)) {
+      return stringify(value.top, ...args)
+    }
+    const {
+      top,
+      right = defaultValue,
+      bottom = defaultValue,
+      left = defaultValue,
+    } = value
+    return [top, right, bottom, left]
+      .map((side) => stringify(side, ...args))
+      .join(' ')
+  }
+  const defaultValue = {
+    top: itemSchema.defaultValue,
+  }
+
+  function regenerate({ theme, previousValue }: RegenOptions<BoxSide<T>>) {
+    return mapValues(previousValue, (value) => {
+      if (value) {
+        return (
+          itemSchema.regenerate?.({ theme, previousValue: value }) ??
+          previousValue
+        )
+      }
+    }) as BoxSide<T>
+  }
+  return {
+    type: `${itemSchema.type} {1,4}`,
+    stringify,
+    defaultValue,
+    regenerate,
+    validate: ((value: any) => {
+      if (typeof value !== 'object') {
+        return false
+      }
+      const { top, left, right, bottom } = value
+      // If *nothing* is defined, it is not a box side
+      if (!top) return false
+      return compact([top, left, right, bottom]).every((item) =>
+        itemSchema.validate(item)
+      )
+    }) as any,
+    input(props) {
+      const ItemInput = itemSchema.input
+      const linked = isLinked(props.value)
+      const linkToggle = (
+        <Toggle.Root
+          title="Show all directions (longhand)"
+          sx={{
+            p: 0,
+            background: 'none',
+            border: 'none',
+            color: 'muted',
+
+            '&[data-state=on]': {
+              color: 'text',
+            },
+          }}
+          pressed={linked}
+          onPressedChange={(pressed) => {
+            if (pressed) {
+              props.onChange({ top: props.value.top })
+            } else {
+              props.onChange({
+                top: props.value.top,
+                right: props.value.top,
+                bottom: props.value.top,
+                left: props.value.top,
+              })
+            }
+          }}
+        >
+          {linked ? (
+            <Maximize size={16} />
+          ) : (
+            <Minimize size={16} />
+          )}
+        </Toggle.Root>
+      )
+      return (
+        <div>
+          {linked ? (
+            <div sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 1, }}>
+              {linkToggle}
+              <SchemaInput
+                schema={itemSchema}
+                {...getInputProps(props, 'top')}
+                label=""
+              />
+            </div>
+          ) : (
+            <div
+              sx={{
+                display: 'grid',
+                justifyItems: 'center',
+                alignItems: 'center',
+                gridTemplateRows: '1fr max-content 1fr',
+                gridTemplateAreas: `
+                "top top top"
+                "left link right"
+                "bottom bottom bottom"
+            `,
+              }}
+            >
+              <div sx={{ gridArea: 'link' }}>{linkToggle}</div>
+              {['top', 'left', 'right', 'bottom'].map((side) => {
+                return (
+                  <div sx={{ gridArea: side }}>
+                    <SchemaInput
+                      schema={itemSchema}
+                      {...getInputProps(props, side as any)}
+                      label=""
+                    />
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      )
+    },
+  }
+}
+
+function isLinked(value: BoxSide<any>) {
+  return isNil(value?.bottom) && isNil(value?.left) && isNil(value?.right)
+}
diff --git a/packages/gui/src/components/schemas/calc.tsx b/packages/gui/src/components/schemas/calc.tsx
new file mode 100644
index 00000000..eddc1182
--- /dev/null
+++ b/packages/gui/src/components/schemas/calc.tsx
@@ -0,0 +1,32 @@
+import { functionSchema } from './function'
+import { joinSchemas } from './joinSchemas'
+import { objectSchema } from './object'
+import { keyword, number } from './primitives'
+import { DataTypeSchema } from './types'
+
+export function calc<T>(schema: DataTypeSchema<T>) {
+  const calcValue = () => schema
+  const calcProduct = () =>
+    objectSchema({
+      type: '* /',
+      fields: {
+        x: calcValue(),
+        operator: keyword(['*', '/']),
+        y: number({ defaultValue: 1 }),
+      },
+    })
+
+  const productOrValue = joinSchemas([calcValue(), calcProduct()])
+
+  // TODO should be a list
+  const calcSum: () => DataTypeSchema<any> = () =>
+    objectSchema({
+      type: '+ -',
+      fields: {
+        x: productOrValue,
+        operator: keyword(['+', '-']),
+        y: productOrValue,
+      },
+    })
+  return functionSchema('calc', joinSchemas([calcSum(), calcProduct()]))
+}
diff --git a/packages/gui/src/components/schemas/clip-path.tsx b/packages/gui/src/components/schemas/clip-path.tsx
new file mode 100644
index 00000000..86bd05dd
--- /dev/null
+++ b/packages/gui/src/components/schemas/clip-path.tsx
@@ -0,0 +1,17 @@
+import { SHAPE_BOX_KEYWORDS } from '../../types/css'
+import { basicShape } from './basic-shape'
+import { joinSchemas } from './joinSchemas'
+import { objectSchema } from './object'
+import { keyword } from './primitives'
+import { url } from './url'
+
+export const clipPath = joinSchemas([
+  url,
+  objectSchema({
+    type: '<shape>',
+    fields: {
+      shape: basicShape,
+      box: keyword(SHAPE_BOX_KEYWORDS),
+    },
+  }),
+])
diff --git a/packages/gui/src/components/schemas/color.ts b/packages/gui/src/components/schemas/color.ts
new file mode 100644
index 00000000..51bf3a6e
--- /dev/null
+++ b/packages/gui/src/components/schemas/color.ts
@@ -0,0 +1,86 @@
+import { themeGet } from '../../lib'
+import { randomColor, randomHexColor } from '../../lib/color'
+import { Color } from '../../types/css'
+import { ColorInput } from '../inputs/ColorInput'
+import PalettePopover, {
+  ThemeColor,
+} from '../primitives/ColorPicker/PalettePicker'
+import { isValidColor } from '../primitives/ColorPicker/util'
+import { joinSchemas } from './joinSchemas'
+import { keyword } from './primitives'
+import { DataTypeSchema } from './types'
+
+function rawColor({
+  defaultValue = '#000',
+}: {
+  defaultValue?: Color
+} = {}): DataTypeSchema<Color> {
+  return {
+    type: 'color',
+    inlineInput: ColorInput,
+    stringify: (value) => value,
+    defaultValue,
+    regenerate: (...args) => {
+      const path = randomColor(...args) || randomHexColor()
+      const theme = args?.[0]?.theme
+
+      return themeGet({
+        theme,
+        path,
+        property: 'color',
+      })
+    },
+    validate: ((value: any) => {
+      return typeof value === 'string' && isValidColor(value)
+    }) as any,
+    parse(tokens) {
+      const [first, ...rest] = tokens
+      // TODO hsl and stuff will be parsed as functions
+      if (typeof first === 'string' && isValidColor(first)) {
+        return [first, rest]
+      }
+      return [undefined, tokens]
+    },
+  }
+}
+
+const themeColor: DataTypeSchema<ThemeColor> = {
+  type: 'theme',
+  inlineInput: PalettePopover,
+  stringify: (value, theme = {}) => {
+    return themeGet({
+      theme,
+      property: 'color',
+      path: value.path,
+    })
+  },
+  defaultValue: { type: 'theme', path: 'primary' },
+  regenerate: (...args) => {
+    const path = randomColor(...args) ?? ''
+    const color: ThemeColor = { type: 'theme', path }
+    return color
+  },
+  validate: ((value: any) => {
+    if (typeof value !== 'object') return false
+    return value.type === 'theme' && typeof value.path === 'string'
+  }) as any,
+  parse(tokens) {
+    // TODO aaaargh how are we going to do this
+    return [undefined, tokens]
+  },
+}
+
+export function color({
+  defaultValue = '#000000',
+}: {
+  defaultValue?: any
+} = {}) {
+  return joinSchemas(
+    [
+      rawColor({ defaultValue }),
+      keyword(['currentcolor', 'transparent'], { type: 'system' }),
+      themeColor,
+    ],
+    { defaultValue }
+  )
+}
diff --git a/packages/gui/src/components/schemas/column-rule.ts b/packages/gui/src/components/schemas/column-rule.ts
new file mode 100644
index 00000000..a4a3e6bf
--- /dev/null
+++ b/packages/gui/src/components/schemas/column-rule.ts
@@ -0,0 +1,35 @@
+import { color } from './color'
+import { joinSchemas } from './joinSchemas'
+import { objectSchema } from './object'
+import { keyword, lengthPercentage } from './primitives'
+import { shorthandSchema } from './shorthand'
+
+export const columnRuleColor = color({ defaultValue: '#6465ff' })
+export const columnRuleStyle = keyword(
+  [
+    'none',
+    'hidden',
+    'dotted',
+    'dashed',
+    'solid',
+    'double',
+    'groove',
+    'ridge',
+    'inset',
+    'outset',
+  ],
+  { defaultValue: 'solid' }
+)
+export const columnRuleWidth = joinSchemas([
+  lengthPercentage({ range: 'nonnegative' }),
+  keyword(['thin', 'medium', 'thick']),
+])
+
+export const columnRule = shorthandSchema({
+  fields: {
+    color: columnRuleColor,
+    style: columnRuleStyle,
+    width: columnRuleWidth,
+  },
+  type: '<column-rule>',
+})
diff --git a/packages/gui/src/components/schemas/columns.tsx b/packages/gui/src/components/schemas/columns.tsx
new file mode 100644
index 00000000..7c8bbed4
--- /dev/null
+++ b/packages/gui/src/components/schemas/columns.tsx
@@ -0,0 +1,19 @@
+import { joinSchemas } from './joinSchemas'
+import { integer, keyword, length } from './primitives'
+import { shorthandSchema } from './shorthand'
+import { themeScale } from './theme'
+
+export const columnWidth = joinSchemas([
+  length(),
+  themeScale('sizes'),
+  keyword(['auto']),
+])
+
+export const columnCount = joinSchemas([integer(), keyword(['inset'])])
+
+export const columns = shorthandSchema({
+  fields: {
+    width: columnWidth,
+    count: columnCount,
+  },
+})
diff --git a/packages/gui/src/components/schemas/content.ts b/packages/gui/src/components/schemas/content.ts
new file mode 100644
index 00000000..89661197
--- /dev/null
+++ b/packages/gui/src/components/schemas/content.ts
@@ -0,0 +1,24 @@
+import { image } from './image'
+import { joinSchemas } from './joinSchemas'
+import { listSchema } from './list'
+import { keyword, string } from './primitives'
+
+const quote = keyword(
+  ['open-quote', 'close-quote', 'no-open-quote', 'no-close-quote'],
+  { type: '<quote>' }
+)
+
+const contentEntry = joinSchemas(
+  // 'string' needs to appear last because otherwise it'll clobber the keyword types
+  // TODO counter() | counters()
+  [image, quote, keyword(['contents']), string()],
+  {
+    type: '<content>',
+    defaultType: 'string',
+  }
+)
+const contentList = listSchema({ itemSchema: contentEntry })
+
+// TODO element() function
+// TODO '/ [alt text]' notation
+export const content = joinSchemas([contentList, keyword(['normal', 'none'])])
diff --git a/packages/gui/src/components/schemas/dimension.tsx b/packages/gui/src/components/schemas/dimension.tsx
new file mode 100644
index 00000000..339c5d4f
--- /dev/null
+++ b/packages/gui/src/components/schemas/dimension.tsx
@@ -0,0 +1,91 @@
+import { toNumber } from 'lodash-es'
+import { UnitConversions, UnitSteps } from '../../lib'
+import { bindProps } from '../../lib/components'
+import { Token } from '../../lib/parse'
+import { randomStep } from '../../lib/random'
+import { stringifyUnit } from '../../lib/stringify'
+import { DimensionInput } from '../inputs/Dimension'
+import { Range } from '../inputs/Dimension/Input'
+import { calc } from './calc'
+import { joinSchemas } from './joinSchemas'
+import { DataTypeSchema, RegenOptions } from './types'
+
+type UnitRanges<U extends string> = Record<U, readonly [number, number]>
+
+interface DimensionProps<U extends string> {
+  type: string
+  range?: Range
+  steps: UnitSteps
+  units: readonly U[]
+  conversions?: UnitConversions
+  defaultValue?: UnitValue<U>
+  regenRanges: UnitRanges<U>
+}
+
+type UnitValue<U> = { value: number; unit: U }
+
+function basicDimension<U extends string>({
+  type,
+  range,
+  steps,
+  units,
+  conversions,
+  defaultValue = { value: 0, unit: units[0] },
+  regenRanges,
+}: DimensionProps<U>): DataTypeSchema<UnitValue<U>> {
+  function regenerate({ previousValue }: RegenOptions<UnitValue<U>>) {
+    const unit = previousValue.unit
+    const [min, max] = regenRanges[unit] ?? [0, 100]
+    return {
+      unit,
+      value: randomStep(min, max, steps[unit] ?? 1),
+    }
+  }
+  return {
+    type,
+    inlineInput: bindProps(DimensionInput, {
+      conversions,
+      range,
+      steps,
+      units,
+    }),
+    stringify: stringifyUnit as any,
+    defaultValue,
+    regenerate,
+    validate: ((value: any) => validateDimension(value, units)) as any,
+    parse(tokens) {
+      const [first, ...rest] = tokens
+      const result = parseDimension(first, units)
+      if (!result) {
+        return [undefined, tokens]
+      }
+      return [result, rest]
+    },
+  }
+}
+
+export function dimension<U extends string>(options: DimensionProps<U>) {
+  const base = basicDimension(options)
+  return joinSchemas([base, calc(base)], { type: base.type })
+}
+
+function validateDimension(value: any, units: readonly string[]) {
+  if (typeof value !== 'object') return false
+  return units.includes(value.unit) && typeof value.value === 'number'
+}
+
+function parseDimension<U extends string>(
+  token: Token,
+  units: readonly U[]
+): UnitValue<U> | undefined {
+  if (typeof token !== 'string') return undefined
+  // special case handling for raw numbers
+  if ((units as any).includes('number') && !isNaN(+token)) {
+    return { value: +token, unit: 'number' as U }
+  }
+  const unit = units.find((unit) => token.endsWith(unit))
+  if (!unit) return undefined
+  const numberPart = toNumber(token.replace(unit, ''))
+  if (isNaN(numberPart)) return undefined
+  return { value: numberPart, unit }
+}
diff --git a/packages/gui/src/components/schemas/easing-function.tsx b/packages/gui/src/components/schemas/easing-function.tsx
new file mode 100644
index 00000000..976055b1
--- /dev/null
+++ b/packages/gui/src/components/schemas/easing-function.tsx
@@ -0,0 +1,68 @@
+import { split } from '../../lib/array'
+import { EasingFunctionEditor } from '../inputs/EasingFunction'
+import { keywordValues } from '../inputs/EasingFunction/keywords'
+import { stringifyEasingFunction } from '../inputs/EasingFunction/stringify'
+import { EasingFunction } from '../inputs/EasingFunction/types'
+import { joinSchemas } from './joinSchemas'
+import { keyword } from './primitives'
+import { DataTypeSchema } from './types'
+
+const rawEasingFunction: DataTypeSchema<EasingFunction> = {
+  type: '<easing-function>',
+  input: EasingFunctionEditor,
+  stringify: stringifyEasingFunction,
+  defaultValue: keywordValues.linear,
+  validate: ((value: any) => {
+    // I would LOVE to be able to generalize this using schemas
+    if (typeof value !== 'object') return false
+    switch (value.type) {
+      case 'cubic-bezier': {
+        const { p1, p2, p3, p4 } = value
+        return [p1, p2, p3, p4].every((val) => typeof val === 'number')
+      }
+      case 'steps': {
+        const { stops, jumpTerm } = value
+        return (
+          typeof stops === 'number' &&
+          ['jump-start', 'jump-end', 'jump-none', 'jump-both'].includes(
+            jumpTerm
+          )
+        )
+      }
+    }
+  }) as any,
+  parse(tokens) {
+    const [first, ...rest] = tokens
+    // ensure the easing function uses function syntax
+    if (typeof first === 'string') return [undefined, tokens]
+    const { name, arguments: args } = first
+    if (name === 'cubic-bezier') {
+      const [p1, p2, p3, p4] = args
+        .join('')
+        .split(',')
+        .map((p) => +p)
+      return [{ type: 'cubic-bezier', p1, p2, p3, p4 }, rest]
+    }
+    if (name === 'steps') {
+      const [numberOfSteps, direction] = args.join('').split(',')
+      return [
+        { type: 'steps', stops: +numberOfSteps, jumpTerm: direction as any },
+        rest,
+      ]
+    }
+    return [undefined, tokens]
+  },
+}
+
+export const easingFunction = joinSchemas([
+  rawEasingFunction,
+  keyword([
+    'linear',
+    'ease',
+    'ease-in',
+    'ease-out',
+    'ease-in-out',
+    'step-start',
+    'step-end',
+  ]),
+])
diff --git a/packages/gui/src/components/schemas/filter.tsx b/packages/gui/src/components/schemas/filter.tsx
new file mode 100644
index 00000000..f4e5a779
--- /dev/null
+++ b/packages/gui/src/components/schemas/filter.tsx
@@ -0,0 +1,49 @@
+import { listSchema } from './list'
+import { functionSchema } from './function'
+import { keyword, length, numberPercentage } from './primitives'
+import { objectSchema } from './object'
+import { joinSchemas } from './joinSchemas'
+import { angle } from './angle'
+import { color } from './color'
+
+const blur = functionSchema('blur', length())
+
+const dropShadow = functionSchema(
+  'drop-shadow',
+  objectSchema({
+    fields: {
+      color: color(),
+      offsetX: length(),
+      offsetY: length(),
+      blurRadius: length(),
+    },
+  })
+)
+
+const hueRotate = functionSchema('hue-rotate', angle())
+
+const amountFilter = (name: string) => functionSchema(name, numberPercentage())
+
+const singleFilter = joinSchemas(
+  [
+    blur,
+    dropShadow,
+    hueRotate,
+    amountFilter('brightness'),
+    amountFilter('contrast'),
+    amountFilter('grayscale'),
+    amountFilter('invert'),
+    amountFilter('opacity'),
+    amountFilter('saturate'),
+    amountFilter('sepia'),
+  ],
+  { type: '<filter>' }
+)
+
+export const filter = joinSchemas([
+  listSchema({
+    itemSchema: singleFilter,
+    separator: ' ',
+  }),
+  keyword(['none']),
+])
diff --git a/packages/gui/src/components/schemas/flex.ts b/packages/gui/src/components/schemas/flex.ts
new file mode 100644
index 00000000..f7c61f39
--- /dev/null
+++ b/packages/gui/src/components/schemas/flex.ts
@@ -0,0 +1,23 @@
+import { objectSchema } from './object'
+import { lengthPercentage, number } from './primitives'
+
+export const flexGrow = number({
+  range: 'nonnegative',
+})
+
+export const flexShrink = number({
+  range: 'nonnegative',
+  defaultValue: 1,
+})
+
+export const flexBasis = lengthPercentage({
+  range: 'nonnegative',
+})
+
+export const flex = objectSchema({
+  fields: {
+    grow: flexGrow,
+    shrink: flexShrink,
+    basis: flexBasis,
+  },
+})
diff --git a/packages/gui/src/components/schemas/function.tsx b/packages/gui/src/components/schemas/function.tsx
new file mode 100644
index 00000000..44cf7121
--- /dev/null
+++ b/packages/gui/src/components/schemas/function.tsx
@@ -0,0 +1,64 @@
+import { isNil } from 'lodash-es'
+import { getInputProps } from '../../lib/util'
+import { SchemaInput } from '../inputs/SchemaInput'
+import { DataTypeSchema } from './types'
+
+export interface FunctionData<N extends string, T> {
+  name: N
+  arguments: T
+}
+
+/**
+ * Wrapper on an object schema representing a CSS function
+ */
+export function functionSchema<N extends string, T>(
+  name: N,
+  argsSchema: DataTypeSchema<T>
+): DataTypeSchema<FunctionData<N, T>> {
+  return {
+    // a function's display type is its name
+    type: name,
+    stringify(value: FunctionData<N, T>, theme) {
+      return `${value.name}(${argsSchema.stringify(value.arguments, theme)})`
+    },
+    defaultValue: {
+      name,
+      arguments: argsSchema.defaultValue,
+    },
+    regenerate({ previousValue }) {
+      return {
+        name,
+        arguments:
+          argsSchema.regenerate?.({ previousValue: previousValue.arguments }) ??
+          argsSchema.defaultValue,
+      }
+    },
+    validate: ((value: any) => {
+      if (typeof value !== 'object') return false
+      return value.name === name && argsSchema.validate(value.arguments)
+    }) as any,
+    input(props) {
+      return (
+        <div>
+          <span sx={{ fontSize: 1, fontWeight: 600 }}>
+            {props.value.name}()
+          </span>
+          <SchemaInput
+            schema={argsSchema}
+            {...getInputProps(props, 'arguments')}
+            label=""
+          />
+        </div>
+      )
+    },
+    parse(tokens) {
+      const [token, ...rest] = tokens
+      if (typeof token === 'string') return [undefined, tokens]
+      const { name: parseName, arguments: parseArgs } = token
+      if (name !== parseName) return [undefined, tokens]
+      const [argsResult, argsRest] = argsSchema.parse!(parseArgs)
+      if (isNil(argsResult) || argsRest.length > 0) return [undefined, tokens]
+      return [{ name, arguments: argsResult }, rest]
+    },
+  }
+}
diff --git a/packages/gui/src/components/schemas/gap.tsx b/packages/gui/src/components/schemas/gap.tsx
new file mode 100644
index 00000000..95504482
--- /dev/null
+++ b/packages/gui/src/components/schemas/gap.tsx
@@ -0,0 +1,17 @@
+import { joinSchemas } from './joinSchemas'
+import { keyword, lengthPercentage } from './primitives'
+import { themeScale } from './theme'
+import { tupleSchema } from './tuple'
+
+const gapItem = joinSchemas([
+  lengthPercentage({ range: 'nonnegative' }),
+  keyword(['normal']),
+  themeScale('space'),
+])
+
+export const rowGap = gapItem
+export const columnGap = gapItem
+export const gap = tupleSchema({
+  itemSchema: gapItem,
+  labels: ['row', 'column'],
+})
diff --git a/packages/gui/src/components/schemas/gradient.tsx b/packages/gui/src/components/schemas/gradient.tsx
new file mode 100644
index 00000000..36e37fe2
--- /dev/null
+++ b/packages/gui/src/components/schemas/gradient.tsx
@@ -0,0 +1,124 @@
+import { bindProps } from '../../lib/components'
+import GradientStopsField from '../inputs/Gradient/stops'
+import { GradientStop } from '../inputs/Gradient/types'
+import { functionSchema } from './function'
+import { position } from './position'
+import { keyword, number } from './primitives'
+import { angle } from './angle'
+import { DataTypeSchema } from './types'
+import { objectSchema } from './object'
+import { joinSchemas } from './joinSchemas'
+import { color } from './color'
+import { listSchema } from './list'
+import { stringifyStops } from '../inputs/Gradient/stringify'
+
+const gradientStop = objectSchema({
+  fields: {
+    color: color({ defaultValue: '#000000' }),
+    hinting: number({
+      stringify: (x) => `${x}%`,
+      regenRange: [0, 100],
+    }), // TODO should be length or percentage
+  },
+})
+
+function stops(repeating: boolean = false): DataTypeSchema<GradientStop[]> {
+  return listSchema({
+    itemSchema: gradientStop,
+    input: bindProps(GradientStopsField, { repeating }),
+    stringify: stringifyStops,
+  })
+}
+
+const directions = [
+  'to left',
+  'to right',
+  'to top',
+  'to bottom',
+  'to top left',
+  'to top right',
+  'to bottom right',
+  'to bottom left',
+] as const
+
+function linearArgs(repeating?: boolean) {
+  return objectSchema({
+    fields: {
+      angle: joinSchemas([angle(), keyword(directions)]),
+      stops: stops(repeating),
+    },
+    separator: ', ',
+  })
+}
+
+const linear = functionSchema('linear-gradient', linearArgs())
+const repeatingLinear = functionSchema(
+  'repeating-linear-gradient',
+  linearArgs(true)
+)
+
+function radialArgs(repeating?: boolean) {
+  return objectSchema({
+    fields: {
+      shape: keyword(['circle', 'ellipse']),
+      // TODO length sizes
+      size: keyword([
+        'farthest-corner',
+        'nearest-corner',
+        'farthest-side',
+        'nearest-side',
+      ]),
+      position,
+      stops: stops(repeating),
+    },
+    stringify: ({ shape, size, position, stops }) =>
+      `${shape} ${size} at ${position}, ${stops}`,
+  })
+}
+
+const radial = functionSchema('radial-gradient', radialArgs())
+const repeatingRadial = functionSchema(
+  'repeating-radial-gradient',
+  radialArgs(true)
+)
+
+function conicArgs(repeating?: boolean) {
+  return objectSchema({
+    fields: {
+      angle: angle(),
+      position,
+      stops: stops(repeating),
+    },
+    stringify: ({ angle, position, stops }) =>
+      `from ${angle} at ${position}, ${stops}`,
+  })
+}
+const conic = functionSchema('conic-gradient', conicArgs())
+const repeatingConic = functionSchema(
+  'repeating-conic-gradient',
+  conicArgs(true)
+)
+
+export const gradient = joinSchemas(
+  [linear, repeatingLinear, radial, repeatingRadial, conic, repeatingConic],
+  { type: 'gradient' }
+)
+
+type DataTypeOfSchema<S> = S extends DataTypeSchema<infer T> ? T : never
+type GradientVariants = typeof gradient
+type Gradient = DataTypeOfSchema<GradientVariants>
+
+export function convertGradient(
+  oldValue: Gradient,
+  newType: keyof GradientVariants
+) {
+  if (
+    oldValue.name === `repeating-${newType}` ||
+    newType === `repeating-${oldValue.name}`
+  ) {
+    return oldValue
+  }
+  return {
+    stops: oldValue.arguments.stops,
+  }
+}
diff --git a/packages/gui/src/components/schemas/grid-area.tsx b/packages/gui/src/components/schemas/grid-area.tsx
new file mode 100644
index 00000000..81cbbd3b
--- /dev/null
+++ b/packages/gui/src/components/schemas/grid-area.tsx
@@ -0,0 +1,22 @@
+import { joinSchemas } from './joinSchemas'
+import { objectSchema } from './object'
+import { ident, integer, keyword } from './primitives'
+import { toggle } from './toggle'
+
+const gridLine = joinSchemas([
+  objectSchema({
+    fields: {
+      span: toggle('span'),
+      position: integer(),
+      ident: ident(),
+    },
+  }),
+  keyword(['auto']),
+])
+
+export const gridColumnStart = gridLine
+export const gridRowStart = gridLine
+export const gridColumnEnd = gridLine
+export const gridRowEnd = gridLine
+
+// TODO gridRow, gridColumn, gridArea
diff --git a/packages/gui/src/components/schemas/grid.tsx b/packages/gui/src/components/schemas/grid.tsx
new file mode 100644
index 00000000..451c1267
--- /dev/null
+++ b/packages/gui/src/components/schemas/grid.tsx
@@ -0,0 +1,79 @@
+import { functionSchema } from './function'
+import { joinSchemas } from './joinSchemas'
+import { listSchema } from './list'
+import { objectSchema } from './object'
+import { integer, keyword, lengthPercentage } from './primitives'
+
+const inflexibleBreadth = joinSchemas([
+  lengthPercentage({ range: 'nonnegative' }),
+  keyword(['min-content', 'max-content', 'auto']),
+])
+const trackBreadth = joinSchemas([
+  lengthPercentage({
+    range: 'nonnegative',
+    flex: true,
+    defaultValue: { value: 1, unit: 'fr' },
+  }),
+  keyword(['min-content', 'max-content', 'auto']),
+])
+
+const trackSize = joinSchemas([
+  trackBreadth,
+  functionSchema(
+    'minmax',
+    objectSchema({
+      fields: { min: inflexibleBreadth, max: trackBreadth },
+      separator: ', ',
+    })
+  ),
+  functionSchema('fit-content', lengthPercentage()),
+])
+
+const repeatTrackCount = joinSchemas([
+  integer({ defaultValue: 3 }),
+  keyword(['auto-fit', 'auto-fill']),
+])
+
+const trackList = joinSchemas(
+  [
+    trackSize,
+    functionSchema(
+      'repeat',
+      objectSchema({
+        fields: {
+          count: repeatTrackCount,
+          trackList: listSchema({ itemSchema: trackSize, separator: ' ' }),
+        },
+        separator: ', ',
+      })
+    ),
+  ],
+  { defaultType: 'repeat' }
+)
+
+export const gridAutoRows = listSchema({
+  itemSchema: trackSize,
+  separator: ' ',
+})
+export const gridAutoColumns = listSchema({
+  itemSchema: trackSize,
+  separator: ' ',
+})
+export const gridAutoFlow = keyword([
+  'row',
+  'column',
+  'dense',
+  'row dense',
+  'column dense',
+])
+
+export const gridTemplateRows = listSchema({
+  itemSchema: trackList,
+  separator: ' ',
+})
+export const gridTemplateColumns = listSchema({
+  itemSchema: trackList,
+  separator: ' ',
+})
+
+// TODO grid-template, grid-template-areas, grid
diff --git a/packages/gui/src/components/schemas/image.tsx b/packages/gui/src/components/schemas/image.tsx
new file mode 100644
index 00000000..fbed8627
--- /dev/null
+++ b/packages/gui/src/components/schemas/image.tsx
@@ -0,0 +1,6 @@
+import { gradient } from './gradient'
+import { joinSchemas } from './joinSchemas'
+import { url } from './url'
+
+// TODO conversion logic
+export const image = joinSchemas([url, gradient])
diff --git a/packages/gui/src/components/schemas/inset.tsx b/packages/gui/src/components/schemas/inset.tsx
new file mode 100644
index 00000000..06ff5aa6
--- /dev/null
+++ b/packages/gui/src/components/schemas/inset.tsx
@@ -0,0 +1,17 @@
+import { boxSideSchema } from './box-side'
+import { joinSchemas } from './joinSchemas'
+import { keyword, lengthPercentage } from './primitives'
+
+const insetItem = joinSchemas([
+  lengthPercentage({ themeProperty: 'space' }),
+  keyword(['auto']),
+])
+
+export const top = insetItem
+export const bottom = insetItem
+export const left = insetItem
+export const right = insetItem
+
+export const inset = boxSideSchema({
+  itemSchema: insetItem,
+})
diff --git a/packages/gui/src/components/schemas/joinSchemas.tsx b/packages/gui/src/components/schemas/joinSchemas.tsx
new file mode 100644
index 00000000..50db79e8
--- /dev/null
+++ b/packages/gui/src/components/schemas/joinSchemas.tsx
@@ -0,0 +1,35 @@
+import { optionsSchema } from './options'
+import { DataTypeSchema } from './types'
+
+interface JoinSchemaOptions<S> {
+  type?: string
+  defaultType?: string
+  defaultValue?: ExtractDataType<S>
+  convert?(oldValue: ExtractDataType<S>, newType: string): S | undefined
+}
+
+export function joinSchemas<S extends DataTypeSchema<any>>(
+  schemas: S[],
+  { type, convert, defaultType, defaultValue }: JoinSchemaOptions<S> = {}
+): DataTypeSchema<ExtractDataType<S>> {
+  let variants = {}
+
+  for (const variant of schemas) {
+    if (variant.variants) {
+      variants = { ...variants, ...variant.variants }
+    } else {
+      variants = { ...variants, [variant.type]: variant }
+    }
+  }
+  // TODO Keep conversion functions from sub-variants
+  // if a `convert` function is defined, it is not propagated to the joined schema right now
+  return optionsSchema({
+    variants,
+    type,
+    convert: convert as any,
+    defaultType: defaultType as any,
+    defaultValue,
+  })
+}
+
+type ExtractDataType<S> = S extends DataTypeSchema<infer T> ? T : never
diff --git a/packages/gui/src/components/schemas/list-style.tsx b/packages/gui/src/components/schemas/list-style.tsx
new file mode 100644
index 00000000..f4ec3366
--- /dev/null
+++ b/packages/gui/src/components/schemas/list-style.tsx
@@ -0,0 +1,26 @@
+import { image } from './image'
+import { keyword } from './primitives'
+import { shorthandSchema } from './shorthand'
+
+export const listStyleImage = image
+export const listStylePosition = keyword(['inside', 'outside'])
+// TODO there are a *lot* more values for this, as well as `symbol` values
+export const listStyleType = keyword([
+  'none',
+  'disc',
+  'circle',
+  'square',
+  'decimal',
+  'georgian',
+  'trad-chinese-informal',
+  'kannada',
+  'custom-counter-style',
+])
+
+export const listStyle = shorthandSchema({
+  fields: {
+    type: listStyleType,
+    position: listStylePosition,
+    image: listStyleImage,
+  },
+})
diff --git a/packages/gui/src/components/schemas/list.tsx b/packages/gui/src/components/schemas/list.tsx
new file mode 100644
index 00000000..37936e23
--- /dev/null
+++ b/packages/gui/src/components/schemas/list.tsx
@@ -0,0 +1,74 @@
+import { ComponentType } from 'react'
+import { split } from '../../lib/array'
+import FieldArray, { FieldArrayProps } from '../FieldArray'
+import { DataTypeSchema, RegenOptions } from './types'
+
+interface CreateList<T> {
+  itemSchema: DataTypeSchema<T>
+  separator?: string
+  input?: ComponentType<FieldArrayProps<T>>
+  addItem?(currentValue: T[]): T
+  stringify?(value: T[]): string
+}
+
+export function listSchema<T>({
+  itemSchema,
+  addItem,
+  separator = ', ',
+  input: Input,
+  stringify,
+}: CreateList<T>): DataTypeSchema<T[]> {
+  if (!stringify) {
+    stringify = (value: T[], ...args: any[]) => {
+      const stringified = value.map((item) =>
+        itemSchema.stringify(item, ...args)
+      )
+      return stringified.join(separator)
+    }
+  }
+  const defaultValue = [itemSchema.defaultValue]
+
+  function regenerate({ theme, previousValue }: RegenOptions<T[]>) {
+    return previousValue.map((value) => {
+      return itemSchema.regenerate?.({ theme, previousValue: value }) ?? value
+    })
+  }
+
+  return {
+    type: `${itemSchema.type} list`,
+    stringify,
+    defaultValue,
+    input(props) {
+      if (Input) {
+        return <Input {...props} itemSchema={itemSchema} />
+      }
+      return <FieldArray {...props} itemSchema={itemSchema} addItem={addItem} />
+    },
+    regenerate,
+    validate: ((value: any) => {
+      if (!(value instanceof Array)) {
+        return false
+      }
+      return value.every((item) => itemSchema.validate(item))
+    }) as any,
+    parse(tokens) {
+      const parseSeperator = separator.trim()
+      // Split the tokens based on the separator
+      const ensplittenedTokens = parseSeperator
+        ? split(tokens, parseSeperator)
+        : tokens.map((t) => [t])
+
+      const results = []
+      for (const tokenGroup of ensplittenedTokens) {
+        const [result, rest] = itemSchema.parse!(tokenGroup)
+        // Make sure the item schema parses the group *entirely* without loose ends
+        if (!result || rest.length > 0) {
+          return [undefined, tokens]
+        }
+        results.push(result)
+      }
+      // When parsed, the list should take up the remaining tokens
+      return [results, []]
+    },
+  }
+}
diff --git a/packages/gui/src/components/schemas/margin.tsx b/packages/gui/src/components/schemas/margin.tsx
new file mode 100644
index 00000000..d0426585
--- /dev/null
+++ b/packages/gui/src/components/schemas/margin.tsx
@@ -0,0 +1,34 @@
+import { boxSideSchema } from './box-side'
+import { joinSchemas } from './joinSchemas'
+import { keyword, lengthPercentage } from './primitives'
+import { themeScale } from './theme'
+import { tupleSchema } from './tuple'
+
+const marginItem = joinSchemas([
+  lengthPercentage({ themeProperty: 'space' }),
+  keyword(['auto']),
+  themeScale('space'),
+])
+
+export const marginBottom = marginItem
+export const marginTop = marginItem
+export const marginLeft = marginItem
+export const marginRight = marginItem
+
+export const marginBlockStart = marginItem
+export const marginBlockEnd = marginItem
+export const marginInlineStart = marginItem
+export const marginInlineEnd = marginItem
+
+export const marginBlock = tupleSchema({
+  itemSchema: marginItem,
+  labels: ['Start', 'End'],
+})
+export const marginInline = tupleSchema({
+  itemSchema: marginItem,
+  labels: ['Start', 'End'],
+})
+
+export const margin = boxSideSchema({
+  itemSchema: marginItem,
+})
diff --git a/packages/gui/src/components/schemas/mask-border.tsx b/packages/gui/src/components/schemas/mask-border.tsx
new file mode 100644
index 00000000..fcf5dac3
--- /dev/null
+++ b/packages/gui/src/components/schemas/mask-border.tsx
@@ -0,0 +1,52 @@
+import { boxSideSchema } from './box-side'
+import { image } from './image'
+import { joinSchemas } from './joinSchemas'
+import { objectSchema } from './object'
+import {
+  keyword,
+  length,
+  lengthPercentage,
+  numberPercentage,
+} from './primitives'
+import { shorthandSchema } from './shorthand'
+import { toggle } from './toggle'
+import { tupleSchema } from './tuple'
+
+export const maskBorderMode = keyword(['alpha', 'luminance'])
+export const maskBorderOutset = boxSideSchema({
+  itemSchema: length({ number: true }),
+})
+
+export const maskBorderRepeat = tupleSchema({
+  itemSchema: keyword(['stretch', 'repeat', 'round', 'space']),
+  labels: ['y', 'x'],
+})
+
+export const maskBorderSlice = objectSchema({
+  fields: {
+    value: boxSideSchema({ itemSchema: numberPercentage() }),
+    fill: toggle('fill'),
+  },
+})
+
+// TODO "none"
+export const maskBorderSource = image
+
+export const maskBorderWidth = joinSchemas([
+  boxSideSchema({
+    itemSchema: lengthPercentage({ number: true }),
+  }),
+  keyword(['auto']),
+])
+
+export const maskBorder = shorthandSchema({
+  fields: {
+    source: maskBorderSource,
+    slice: maskBorderSlice,
+    width: maskBorderWidth,
+    outset: maskBorderOutset,
+    repeat: maskBorderRepeat,
+    mode: maskBorderMode,
+  },
+  slash: ['width', 'outset'],
+})
diff --git a/packages/gui/src/components/schemas/mask.tsx b/packages/gui/src/components/schemas/mask.tsx
new file mode 100644
index 00000000..a8e1b898
--- /dev/null
+++ b/packages/gui/src/components/schemas/mask.tsx
@@ -0,0 +1,56 @@
+import { GEOMETRY_BOX_KEYWORDS } from '../../types/css'
+import { image } from './image'
+import { joinSchemas } from './joinSchemas'
+import { listSchema } from './list'
+import { position } from './position'
+import { keyword, lengthPercentage } from './primitives'
+import { shorthandSchema } from './shorthand'
+import { tupleSchema } from './tuple'
+
+const composite = keyword(['add', 'subtract', 'intersect', 'exclude'])
+const clip = keyword([...GEOMETRY_BOX_KEYWORDS, 'no-clip'])
+const mode = keyword(['alpha', 'luminance', 'match-source'])
+const origin = keyword(GEOMETRY_BOX_KEYWORDS)
+const repeat = joinSchemas([
+  tupleSchema({
+    itemSchema: keyword(['repeat', 'space', 'round', 'no-repeat']),
+    labels: ['x', 'y'],
+  }),
+  keyword(['repeat-x', 'repeat-y']),
+])
+const size = joinSchemas([
+  tupleSchema({
+    itemSchema: joinSchemas([
+      lengthPercentage({
+        defaultValue: { value: 100, unit: '%' },
+      }),
+      keyword(['auto']),
+    ]),
+    labels: ['x', 'y'],
+  }),
+  keyword(['cover', 'contain']),
+])
+
+export const maskComposite = listSchema({ itemSchema: composite })
+export const maskClip = listSchema({ itemSchema: clip })
+export const maskMode = listSchema({ itemSchema: mode })
+export const maskOrigin = listSchema({ itemSchema: origin })
+export const maskRepeat = listSchema({ itemSchema: repeat })
+export const maskSize = listSchema({ itemSchema: size })
+export const maskImage = listSchema({ itemSchema: image })
+export const maskPosition = listSchema({ itemSchema: position })
+
+const singleMask = shorthandSchema({
+  fields: {
+    image,
+    position,
+    size,
+    repeat,
+    origin,
+    clip,
+    composite,
+    mode,
+  },
+  slash: ['size'],
+})
+export const mask = listSchema({ itemSchema: singleMask })
diff --git a/packages/gui/src/components/schemas/object-position.tsx b/packages/gui/src/components/schemas/object-position.tsx
new file mode 100644
index 00000000..2fad1460
--- /dev/null
+++ b/packages/gui/src/components/schemas/object-position.tsx
@@ -0,0 +1,11 @@
+import { position } from './position'
+import { keyword } from './primitives'
+
+export const objectPosition = position
+export const objectFit = keyword([
+  'fill',
+  'contain',
+  'cover',
+  'none',
+  'scale-down',
+])
diff --git a/packages/gui/src/components/schemas/object.tsx b/packages/gui/src/components/schemas/object.tsx
new file mode 100644
index 00000000..60a27171
--- /dev/null
+++ b/packages/gui/src/components/schemas/object.tsx
@@ -0,0 +1,88 @@
+import { mapValues } from 'lodash-es'
+import { Token } from '../../lib/parse'
+import { getInputProps } from '../../lib/util'
+import { SchemaInput } from '../inputs/SchemaInput'
+import { DataTypeSchema, RegenOptions } from './types'
+
+interface CreateObject<T extends object> {
+  type?: string
+  fields: {
+    [Property in keyof T]: DataTypeSchema<T[Property]>
+  }
+  keyOrder?: (keyof T)[]
+  stringify?(values: Record<keyof T, string>): string
+  separator?: string
+  defaultValue?: Partial<T>
+  parse?(tokens: Token[]): [result: T | undefined, rest: Token[]]
+}
+
+export function objectSchema<T extends object>({
+  type = 'object',
+  fields,
+  keyOrder = Object.keys(fields) as (keyof T)[],
+  separator = ' ',
+  stringify: providedStringify,
+  defaultValue: providedDefaultValue,
+  parse,
+}: CreateObject<T>): DataTypeSchema<T> {
+  function stringify(value: T, ...args) {
+    if (providedStringify) {
+      const stringifiedFields = mapValues(fields, (schema, key: keyof T) => {
+        return schema.stringify(value[key], ...args)
+      }) as any
+      return providedStringify(stringifiedFields)
+    }
+    // By default, join the stringified values with spaces in key order
+    return keyOrder
+      .map((key) => {
+        return fields[key].stringify(value[key], ...args)
+      })
+      .join(separator)
+  }
+  const defaultValue = {
+    ...mapValues(fields, (schema) => schema.defaultValue),
+    ...providedDefaultValue,
+  } as any // IDK why the typing doesn't work
+
+  function regenerate({ theme, previousValue }: RegenOptions<T>): T {
+    return mapValues(previousValue, (value, key: keyof T) => {
+      return fields[key].regenerate?.({ theme, previousValue: value }) ?? value
+    }) as T
+  }
+  return {
+    type,
+    defaultValue,
+    stringify,
+    input(props) {
+      return (
+        <div
+          sx={{
+            display: 'grid',
+            gap: 2,
+            borderLeft: '1px solid',
+            borderColor: 'border',
+            pl: 2,
+            my: 2,
+          }}
+        >
+          {keyOrder.map((key) => {
+            const schema = fields[key]
+            return (
+              <SchemaInput schema={schema} {...getInputProps(props, key)} />
+            )
+          })}
+        </div>
+      )
+    },
+    regenerate,
+    validate: ((value: any) => {
+      if (typeof value !== 'object') {
+        return false
+      }
+      return Object.entries(fields).every(([key, schema]: any) => {
+        return schema.validate(value[key])
+      })
+    }) as any,
+    parse,
+  }
+}
diff --git a/packages/gui/src/components/schemas/offset.tsx b/packages/gui/src/components/schemas/offset.tsx
new file mode 100644
index 00000000..5f8fbf7d
--- /dev/null
+++ b/packages/gui/src/components/schemas/offset.tsx
@@ -0,0 +1,37 @@
+import { SHAPE_BOX_KEYWORDS } from '../../types/css'
+import { angle } from './angle'
+import { basicShape } from './basic-shape'
+import { image } from './image'
+import { joinSchemas } from './joinSchemas'
+import { objectSchema } from './object'
+import { position } from './position'
+import { keyword, lengthPercentage } from './primitives'
+import { shorthandSchema } from './shorthand'
+
+export const offsetAnchor = joinSchemas([position, keyword(['auto'])])
+export const offsetPosition = joinSchemas([position, keyword(['auto'])])
+export const offsetDistance = lengthPercentage()
+export const offsetPath = joinSchemas([
+  image,
+  objectSchema({
+    type: '<shape>',
+    fields: {
+      shape: basicShape,
+      box: keyword(SHAPE_BOX_KEYWORDS),
+    },
+  }),
+])
+
+// TODO 'auto <angle>'
+export const offsetRotate = angle()
+
+export const offset = shorthandSchema({
+  fields: {
+    position: offsetPosition,
+    path: offsetPath,
+    distance: offsetDistance,
+    rotate: offsetRotate,
+    anchor: offsetAnchor,
+  },
+  slash: ['anchor'],
+})
diff --git a/packages/gui/src/components/schemas/options.tsx b/packages/gui/src/components/schemas/options.tsx
new file mode 100644
index 00000000..e02d55d0
--- /dev/null
+++ b/packages/gui/src/components/schemas/options.tsx
@@ -0,0 +1,118 @@
+import { DataTypeSchema, RegenOptions } from './types'
+import * as Select from '../ui/Select'
+
+interface CreateOptions<T extends Record<string, any>> {
+  variants: { [V in keyof T]: DataTypeSchema<T[V]> }
+  type?: string
+  order?: (keyof T)[]
+  convert?(oldValue: Unionize<T>[any], newType: keyof T): T | undefined
+  defaultType?: keyof T
+  defaultValue?: any
+}
+
+/**
+ * Create a schema that lets a user choose between several types,
+ * each with a distinct structure as specified by the given `variants`.
+ */
+export function optionsSchema<T extends Record<string, any>>({
+  variants,
+  type = 'options',
+  order = Object.keys(variants),
+  convert,
+  defaultType = order[0],
+  defaultValue,
+}: CreateOptions<T>): DataTypeSchema<Unionize<T>> {
+  function getType(value: T): keyof T {
+    for (const [type, schema] of Object.entries(variants)) {
+      if (schema.validate(value)) return type
+    }
+
+    throw new Error(
+      `Provided value ${JSON.stringify(
+        value
+      )} is not one of the options [${Object.keys(variants).join(', ')}].`
+    )
+  }
+  function regenerate({
+    previousValue,
+    ...options
+  }: RegenOptions<Unionize<T>>): Unionize<T> {
+    const type = getType(previousValue)
+    const newValue = variants[type].regenerate?.({ previousValue, ...options })
+    return newValue ?? previousValue
+  }
+
+  return {
+    type,
+    variants: variants as any,
+    inlineInput(props) {
+      const type = getType(props.value)
+      const InlineInput = variants[type].inlineInput
+      // Render the select
+      return (
+        <div sx={{ display: 'flex' }}>
+          {InlineInput && <InlineInput {...props} />}
+          <Select.Root
+            value={type.toString()}
+            onValueChange={(newType) => {
+              props.onChange(
+                convert?.(props.value, newType) ??
+                  (variants[newType].defaultValue as any)
+              )
+            }}
+          >
+            <Select.Trigger>
+              <Select.Value>{''}</Select.Value>
+              <Select.Icon />
+            </Select.Trigger>
+            <Select.Content>
+              {order.map((typeOption: any) => {
+                return (
+                  <Select.Item key={typeOption} value={typeOption}>
+                    <Select.ItemText>{typeOption}</Select.ItemText>
+                    <Select.ItemIndicator />
+                  </Select.Item>
+                )
+              })}
+            </Select.Content>
+          </Select.Root>
+        </div>
+      )
+    },
+    input(props) {
+      const type = getType(props.value)
+      const Component = variants[type].input
+      return Component ? <Component {...props} /> : null
+    },
+    hasBlockInput(value) {
+      const type = getType(value)
+      return !!variants[type].input
+    },
+    stringify(value, ...args) {
+      const type = getType(value)
+      return variants[type].stringify(value, ...args)
+    },
+    defaultValue: defaultValue ?? variants[defaultType].defaultValue,
+    regenerate,
+    validate: ((value: any) => {
+      return Object.values(variants).some((variantSchema) =>
+        variantSchema.validate(value)
+      )
+    }) as any,
+    parse(tokens) {
+      // Try to find a variant that parses the options completely, and return that variant
+      // TODO deal with instances where the one of the variants just swallows up the other
+      for (const variantSchema of Object.values(variants)) {
+        const [result, rest] = variantSchema.parse(tokens)
+        if (result) {
+          return [result, rest]
+        }
+      }
+      return [undefined, tokens]
+    },
+  }
+}
+
+// Utility types to help typecheck these options correctly,
+// based on: https://stackoverflow.com/questions/62591230/typescript-convert-a-tagged-union-into-an-union-type
+type Unionize<T> = { [K in keyof T]: T[K] }[keyof T]
diff --git a/packages/gui/src/components/schemas/outline.tsx b/packages/gui/src/components/schemas/outline.tsx
new file mode 100644
index 00000000..fa6c7117
--- /dev/null
+++ b/packages/gui/src/components/schemas/outline.tsx
@@ -0,0 +1,37 @@
+import { color } from './color'
+import { joinSchemas } from './joinSchemas'
+import { keyword, length } from './primitives'
+import { shorthandSchema } from './shorthand'
+
+export const outlineColor = joinSchemas([
+  color({ defaultValue: '#6465ff' }),
+  keyword(['invert']),
+])
+
+export const outlineWidth = joinSchemas([
+  length(),
+  keyword(['thin', 'medium', 'thick']),
+])
+
+export const outlineStyle = keyword([
+  'auto',
+  'none',
+  'dotted',
+  'dashed',
+  'solid',
+  'double',
+  'groove',
+  'ridge',
+  'inset',
+  'outset',
+])
+
+export const outline = shorthandSchema({
+  fields: {
+    color: outlineColor,
+    width: outlineWidth,
+    style: outlineStyle,
+  },
+})
+
+export const outlineOffset = length({ defaultValue: { value: 4, unit: 'px' } })
diff --git a/packages/gui/src/components/schemas/overflow.tsx b/packages/gui/src/components/schemas/overflow.tsx
new file mode 100644
index 00000000..179a5b10
--- /dev/null
+++ b/packages/gui/src/components/schemas/overflow.tsx
@@ -0,0 +1,21 @@
+import { tupleSchema } from './tuple'
+import { keyword } from './primitives'
+
+const overflowKeywords = [
+  'visible',
+  'hidden',
+  'clip',
+  'scroll',
+  'auto',
+] as const
+const overflowAxis = keyword(overflowKeywords)
+
+export const overflowX = overflowAxis
+export const overflowY = overflowAxis
+export const overflowInline = overflowAxis
+export const overflowBlock = overflowAxis
+
+export const overflow = tupleSchema({
+  itemSchema: overflowAxis,
+  labels: ['x', 'y'],
+})
diff --git a/packages/gui/src/components/schemas/overscroll.tsx b/packages/gui/src/components/schemas/overscroll.tsx
new file mode 100644
index 00000000..69251da4
--- /dev/null
+++ b/packages/gui/src/components/schemas/overscroll.tsx
@@ -0,0 +1,15 @@
+import { keyword } from './primitives'
+import { tupleSchema } from './tuple'
+
+const overscrollKeywords = ['auto', 'contain', 'none'] as const
+const overscrollAxis = keyword(overscrollKeywords)
+
+export const overscrollBehaviorInline = overscrollAxis
+export const overscrollBehaviorBlock = overscrollAxis
+export const overscrollBehaviorX = overscrollAxis
+export const overscrollBehaviorY = overscrollAxis
+
+export const overscrollBehavior = tupleSchema({
+  itemSchema: overscrollAxis,
+  labels: ['x', 'y'],
+})
diff --git a/packages/gui/src/components/schemas/padding.tsx b/packages/gui/src/components/schemas/padding.tsx
new file mode 100644
index 00000000..a609e819
--- /dev/null
+++ b/packages/gui/src/components/schemas/padding.tsx
@@ -0,0 +1,33 @@
+import { boxSideSchema } from './box-side'
+import { joinSchemas } from './joinSchemas'
+import { lengthPercentage } from './primitives'
+import { themeScale } from './theme'
+import { tupleSchema } from './tuple'
+
+const paddingItem = joinSchemas([
+  lengthPercentage({ range: 'nonnegative' }),
+  themeScale('space'),
+])
+
+export const paddingBottom = paddingItem
+export const paddingTop = paddingItem
+export const paddingLeft = paddingItem
+export const paddingRight = paddingItem
+
+export const paddingBlockStart = paddingItem
+export const paddingBlockEnd = paddingItem
+export const paddingInlineStart = paddingItem
+export const paddingInlineEnd = paddingItem
+
+export const paddingBlock = tupleSchema({
+  itemSchema: paddingItem,
+  labels: ['Start', 'End'],
+})
+export const paddingInline = tupleSchema({
+  itemSchema: paddingItem,
+  labels: ['Start', 'End'],
+})
+
+export const padding = boxSideSchema({
+  itemSchema: paddingItem,
+})
diff --git a/packages/gui/src/components/schemas/perspective.tsx b/packages/gui/src/components/schemas/perspective.tsx
new file mode 100644
index 00000000..e24b23ab
--- /dev/null
+++ b/packages/gui/src/components/schemas/perspective.tsx
@@ -0,0 +1,6 @@
+import { joinSchemas } from './joinSchemas'
+import { position } from './position'
+import { keyword, length } from './primitives'
+
+export const perspective = joinSchemas([length(), keyword(['none'])])
+export const perspectiveOrigin = position
diff --git a/packages/gui/src/components/schemas/place.ts b/packages/gui/src/components/schemas/place.ts
new file mode 100644
index 00000000..85b4cf50
--- /dev/null
+++ b/packages/gui/src/components/schemas/place.ts
@@ -0,0 +1,141 @@
+import { objectSchema } from './object'
+import { keyword } from './primitives'
+
+export const alignItems = keyword([
+  'center',
+  'start',
+  'end',
+  'flex-start',
+  'flex-end',
+  'normal',
+  'stretch',
+  'self-start',
+  'self-end',
+  'baseline',
+  'first baseline',
+  'last baseline',
+  'safe center',
+  'unsafe center',
+  'safe right',
+  'unsafe right',
+  'safe end',
+  'unsafe end',
+  'safe self-end',
+  'unsafe self-end',
+  'safe flex-end',
+  'unsafe flex-end',
+])
+
+export const justifyItems = keyword([
+  'center',
+  'start',
+  'end',
+  'flex-start',
+  'flex-end',
+  'normal',
+  'stretch',
+  'self-start',
+  'self-end',
+  'left',
+  'right',
+  'baseline',
+  'first baseline',
+  'last baseline',
+  'safe center',
+  'unsafe center',
+  // TODO legacy values
+])
+
+export const placeItems = objectSchema({
+  fields: {
+    align: alignItems,
+    justify: justifyItems,
+  },
+})
+
+export const alignContent = keyword([
+  'center',
+  'start',
+  'end',
+  'flex-start',
+  'flex-end',
+  'normal',
+  'baseline',
+  'first baseline',
+  'last baseline',
+  'space-between',
+  'space-around',
+  'space-evenly',
+  'stretch',
+  'safe center',
+  'unsafe center',
+])
+
+export const justifyContent = keyword([
+  'start',
+  'center',
+  'end',
+  'space-between',
+  'space-around',
+  'space-evenly',
+  'flex-start',
+  'flex-end',
+  'left',
+  'right',
+  'normal',
+  'stretch',
+  'safe center',
+  'unsafe center',
+])
+
+export const placeContent = objectSchema({
+  fields: {
+    align: alignContent,
+    justify: justifyContent,
+  },
+})
+
+export const alignSelf = keyword([
+  'auto',
+  'center',
+  'start',
+  'end',
+  'flex-start',
+  'flex-end',
+  'normal',
+  'stretch',
+  'baseline',
+  'first baseline',
+  'last baseline',
+  'space-between',
+  'space-around',
+  'space-evenly',
+  'safe center',
+  'unsafe center',
+])
+
+export const justifySelf = keyword([
+  'normal',
+  'stretch',
+  'center',
+  'start',
+  'end',
+  'flex-start',
+  'flex-end',
+  'self-start',
+  'self-end',
+  'left',
+  'right',
+  'baseline',
+  'first baseline',
+  'last baseline',
+  'safe center',
+  'unsafe center',
+])
+
+export const placeSelf = objectSchema({
+  fields: {
+    align: alignSelf,
+    justify: justifySelf,
+  },
+})
diff --git a/packages/gui/src/components/schemas/position.tsx b/packages/gui/src/components/schemas/position.tsx
new file mode 100644
index 00000000..e7a4c074
--- /dev/null
+++ b/packages/gui/src/components/schemas/position.tsx
@@ -0,0 +1,36 @@
+import { joinSchemas } from './joinSchemas'
+import { objectSchema } from './object'
+import { keyword, lengthPercentage } from './primitives'
+
+const positionX = joinSchemas([
+  lengthPercentage({
+    defaultValue: { value: 50, unit: '%' },
+  }),
+  objectSchema({
+    type: 'offset',
+    fields: {
+      direction: keyword(['left', 'right']),
+      offset: lengthPercentage(),
+    },
+  }),
+  keyword(['left', 'center', 'right']),
+])
+
+const positionY = joinSchemas([
+  lengthPercentage({
+    defaultValue: { value: 50, unit: '%' },
+  }),
+  objectSchema({
+    type: 'offset',
+    fields: {
+      direction: keyword(['top', 'bottom']),
+      offset: lengthPercentage(),
+    },
+  }),
+  keyword(['top', 'center', 'bottom']),
+])
+
+// TODO function so we can set default values
+export const position = objectSchema({
+  fields: { x: positionX, y: positionY },
+})
diff --git a/packages/gui/src/components/schemas/primitives.tsx b/packages/gui/src/components/schemas/primitives.tsx
new file mode 100644
index 00000000..8089d423
--- /dev/null
+++ b/packages/gui/src/components/schemas/primitives.tsx
@@ -0,0 +1,266 @@
+import { compact, isInteger, toNumber } from 'lodash-es'
+import { bindProps } from '../../lib/components'
+import { choose, randomStep } from '../../lib/random'
+import { randomInt } from '../../lib/util'
+import {
+  CSSUnitValue,
+  Length,
+  LENGTH_UNITS,
+  NumberPercentage,
+} from '../../types/css'
+import { Range } from '../inputs/Dimension/Input'
+import { KeywordInput } from '../inputs/KeywordInput'
+import { NumberInput } from '../inputs/NumberInput'
+import { IntegerInput } from '../inputs/PrimitiveInput'
+import { TextInput } from '../inputs/TextInput'
+import { dimension } from './dimension'
+import { DataTypeSchema } from './types'
+
+export function percentage({
+  defaultValue,
+}: { defaultValue?: CSSUnitValue } = {}) {
+  return dimension({
+    type: '%',
+    defaultValue,
+    steps: { '%': 0.1 },
+    regenRanges: { '%': [0, 100] },
+    units: ['%'],
+  })
+}
+
+export function number({
+  defaultValue = 0,
+  range,
+  regenRange = [0, 2],
+  stringify = (x) => x.toString(),
+}: {
+  defaultValue?: number
+  range?: 'nonnegative'
+  regenRange?: [number, number]
+  stringify?(x: number): string
+} = {}): DataTypeSchema<number> {
+  function regenerate() {
+    const [regenMin, regenMax] = regenRange
+    return randomStep(regenMin, regenMax, 0.1)
+  }
+  const [min, max] =
+    range === 'nonnegative' ? [0, Infinity] : [-Infinity, Infinity]
+  return {
+    type: 'number',
+    inlineInput: bindProps(NumberInput, { step: 0.1, min, max }),
+    stringify,
+    defaultValue,
+    regenerate,
+    validate: ((value: any) => typeof value === 'number') as any,
+    parse(tokens) {
+      const [token, ...rest] = tokens
+      if (typeof token !== 'string') return [undefined, tokens]
+      const asNumber = toNumber(token)
+      if (isNaN(asNumber)) return [undefined, tokens]
+      return [asNumber, rest]
+    },
+  }
+}
+
+export function numberPercentage({
+  defaultValue,
+}: { defaultValue?: NumberPercentage } = {}) {
+  return dimension({
+    type: 'number/%',
+    defaultValue,
+    steps: { '%': 0.1, number: 0.001 },
+    regenRanges: { '%': [0, 100], number: [0, 1] },
+    units: ['%', 'number'],
+  })
+}
+
+const lengthConversions = {
+  px: 16,
+  rem: 1,
+  em: 1,
+}
+
+export const lengthSteps = {
+  number: 0.1,
+  theme: 1,
+  px: 1,
+  em: 0.125,
+  rem: 0.125,
+  '%': 0.1,
+  fr: 0.1,
+}
+
+const lengthRanges = {
+  px: [0, 256],
+  rem: [0, 16],
+  em: [0, 16],
+  '%': [0, 100],
+  number: [0, 2],
+  fr: [0, 5],
+  // TODO remaining ranges
+} as const
+
+interface LengthProps {
+  defaultValue?: Length
+  // keywords?: string[]
+  number?: boolean
+  percentage?: boolean
+  flex?: boolean
+  // themeValues?: (CSSUnitValue & { id: string })[]
+  themeProperty?: string
+  range?: Range
+}
+export function length({
+  defaultValue,
+  percentage,
+  number,
+  flex,
+  ...props
+}: LengthProps = {}) {
+  const units = compact([
+    ...LENGTH_UNITS,
+    percentage && '%',
+    number && 'number',
+    flex && 'fr',
+  ]) as any[]
+  return dimension({
+    type: 'length',
+    defaultValue,
+    steps: lengthSteps,
+    regenRanges: lengthRanges,
+    conversions: lengthConversions,
+    units,
+    ...props,
+  })
+}
+
+export function lengthPercentage(props: Omit<LengthProps, 'percentage'> = {}) {
+  return length({ ...props, percentage: true })
+}
+
+export function integer({
+  defaultValue = 0,
+}: {
+  defaultValue?: number
+} = {}): DataTypeSchema<number> {
+  function regenerate() {
+    return randomInt(0, 11)
+  }
+  return {
+    type: 'integer',
+    inlineInput: bindProps(IntegerInput, { regenerate }),
+    stringify: (value) => value.toString(),
+    defaultValue,
+    validate: ((value: any) => typeof value === 'number') as any,
+    parse(tokens) {
+      const [token, ...rest] = tokens
+      if (typeof token !== 'string') return [undefined, tokens]
+      const asNumber = toNumber(token)
+      if (isNaN(asNumber)) return [undefined, tokens]
+      if (!isInteger(number)) return [undefined, tokens]
+      return [asNumber, rest]
+    },
+  }
+}
+
+export function ident({
+  defaultValue = '',
+}: {
+  defaultValue?: string
+} = {}): DataTypeSchema<string> {
+  return {
+    type: '<custom-ident>',
+    // Right now, just use a text input.
+    // In the future we may want to do smart-identification of identifiers
+    // the user has used in other places
+    inlineInput: TextInput,
+    stringify: (value) => value,
+    defaultValue,
+    validate: ((value: any) => typeof value === 'string') as any,
+    parse(tokens) {
+      const [token, ...rest] = tokens
+      if (typeof token !== 'string') return [undefined, tokens]
+      // TODO allow escaped characters
+      if (!/[-_0-9A-Za-z]+/.test(token)) return [undefined, tokens]
+      return [token, rest]
+    },
+  }
+}
+
+export function string({
+  defaultValue = '',
+}: {
+  defaultValue?: string
+} = {}): DataTypeSchema<string> {
+  return {
+    type: 'string',
+    inlineInput: TextInput,
+    stringify: (value) => `"${value}"`,
+    defaultValue,
+    validate: ((value: any) => typeof value === 'string') as any,
+    parse(tokens) {
+      const [token, ...rest] = tokens
+      if (typeof token !== 'string') return [undefined, tokens]
+      const ends = [token[0], token[token.length - 1]]
+      if (ends.some((x) => x === '"') || ends.some((x) => x === "'")) {
+        return [token.substring(1, token.length - 1), rest]
+      }
+      return [undefined, tokens]
+    },
+  }
+}
+
+export function keyword<T extends string>(
+  options: readonly T[],
+  {
+    defaultValue = options[0],
+    themeProperty,
+    type = 'keyword',
+  }: {
+    defaultValue?: T
+    themeProperty?: string
+    type?: string
+  } = {}
+): DataTypeSchema<T> {
+  if (options.length === 1) {
+    return literal(options[0])
+  }
+  function regenerate() {
+    return choose(options)
+  }
+  return {
+    type,
+    inlineInput: bindProps(KeywordInput, {
+      options,
+      regenerate,
+      themeProperty,
+    }),
+    stringify: (value) => value,
+    defaultValue,
+    regenerate: regenerate,
+    validate: ((value: any) => options.includes(value.toString())) as any,
+    parse(tokens) {
+      const [token, ...rest] = tokens
+      if (typeof token !== 'string') return [undefined, tokens]
+      if (!options.includes(token as T)) return [undefined, tokens]
+      return [token as T, rest]
+    },
+  }
+}
+
+function literal<T extends string>(value: T): DataTypeSchema<T> {
+  return {
+    type: value,
+    inlineInput: () => <pre sx={{ fontSize: 0 }}>{value}</pre>,
+    stringify: (value) => value,
+    defaultValue: value,
+    regenerate: () => value,
+    validate: ((testValue: any) => testValue === value) as any,
+    parse(tokens) {
+      const [token, ...rest] = tokens
+      if (typeof token !== 'string') return [undefined, tokens]
+      if (token !== value) return [undefined, tokens]
+      return [value, rest]
+    },
+  }
+}
diff --git a/packages/gui/src/components/schemas/quotes.ts b/packages/gui/src/components/schemas/quotes.ts
new file mode 100644
index 00000000..64d25eb1
--- /dev/null
+++ b/packages/gui/src/components/schemas/quotes.ts
@@ -0,0 +1,13 @@
+import { listSchema } from './list'
+import { string } from './primitives'
+import { tupleSchema } from './tuple'
+
+export const quotes = listSchema({
+  itemSchema: tupleSchema({
+    itemSchema: string(),
+    labels: ['open', 'close'],
+    linkable: false,
+    separator: ' ',
+  }),
+  separator: ' ',
+})
diff --git a/packages/gui/src/components/schemas/ratio.ts b/packages/gui/src/components/schemas/ratio.ts
new file mode 100644
index 00000000..78bcaf81
--- /dev/null
+++ b/packages/gui/src/components/schemas/ratio.ts
@@ -0,0 +1,13 @@
+import { objectSchema } from './object'
+import { number } from './primitives'
+
+export function ratio() {
+  return objectSchema({
+    type: '<ratio>',
+    fields: {
+      width: number({ defaultValue: 1 }),
+      height: number({ defaultValue: 1 }),
+    },
+    stringify: ({ width, height }) => `${width} / ${height}`,
+  })
+}
diff --git a/packages/gui/src/components/schemas/responsive.tsx b/packages/gui/src/components/schemas/responsive.tsx
new file mode 100644
index 00000000..6530934b
--- /dev/null
+++ b/packages/gui/src/components/schemas/responsive.tsx
@@ -0,0 +1,79 @@
+import FieldArray from '../FieldArray'
+import { DataTypeSchema } from './types'
+
+export type Responsive<T> = { type: 'responsive'; values: T[] }
+
+export function responsive<T>(
+  itemSchema: DataTypeSchema<T>
+): DataTypeSchema<Responsive<T>> {
+  return {
+    type: 'responsive',
+    inlineInput({ value }) {
+      return (
+        <pre sx={{ fontSize: 0 }}>
+          {value.values.map((item) => itemSchema.stringify(item)).join(', ')}
+        </pre>
+      )
+    },
+    input({ value, onChange }) {
+      return (
+        <ResponsiveInput
+          value={value}
+          onChange={onChange}
+          itemSchema={itemSchema}
+        />
+      )
+    },
+    defaultValue: {
+      type: 'responsive',
+      values: [
+        itemSchema.defaultValue,
+        itemSchema.defaultValue,
+        itemSchema.defaultValue,
+      ],
+    },
+    validate: ((value: any) => {
+      if (typeof value !== 'object') return false
+      if (value.type !== 'responsive') return false
+      if (!(value.values instanceof Array)) return false
+      return value.values.map(itemSchema.validate)
+    }) as any,
+    regenerate({ theme, previousValue }) {
+      return {
+        ...previousValue,
+        values: previousValue.values.map(
+          (value) =>
+            itemSchema.regenerate?.({ theme, previousValue: value }) ??
+            itemSchema.defaultValue
+        ),
+      }
+    },
+    stringify(value, ...args) {
+      return (value as any).values.map((val: T) =>
+        itemSchema.stringify(val, ...args)
+      )
+    },
+  }
+}
+
+type ResponsiveInputProps<T> = {
+  value: Responsive<T>
+  onChange: (newValue: Responsive<T>) => void
+  itemSchema: DataTypeSchema<T>
+}
+export function ResponsiveInput<T>({
+  value,
+  onChange,
+  itemSchema,
+}: ResponsiveInputProps<T>) {
+  return (
+    <FieldArray
+      label=""
+      itemSchema={itemSchema}
+      value={value.values}
+      onChange={(newValues) => {
+        onChange({ ...value, values: newValues })
+      }}
+    />
+  )
+}
diff --git a/packages/gui/src/components/schemas/scroll-margin.tsx b/packages/gui/src/components/schemas/scroll-margin.tsx
new file mode 100644
index 00000000..75496521
--- /dev/null
+++ b/packages/gui/src/components/schemas/scroll-margin.tsx
@@ -0,0 +1,34 @@
+import { boxSideSchema } from './box-side'
+import { joinSchemas } from './joinSchemas'
+import { keyword, lengthPercentage } from './primitives'
+import { themeScale } from './theme'
+import { tupleSchema } from './tuple'
+
+const scrollMarginItem = joinSchemas([
+  lengthPercentage(),
+  keyword(['auto']),
+  themeScale('space'),
+])
+
+export const scrollMarginBottom = scrollMarginItem
+export const scrollMarginTop = scrollMarginItem
+export const scrollMarginLeft = scrollMarginItem
+export const scrollMarginRight = scrollMarginItem
+
+export const scrollMarginBlockStart = scrollMarginItem
+export const scrollMarginBlockEnd = scrollMarginItem
+export const scrollMarginInlineStart = scrollMarginItem
+export const scrollMarginInlineEnd = scrollMarginItem
+
+export const scrollMarginBlock = tupleSchema({
+  itemSchema: scrollMarginItem,
+  labels: ['Start', 'End'],
+})
+export const scrollMarginInline = tupleSchema({
+  itemSchema: scrollMarginItem,
+  labels: ['Start', 'End'],
+})
+
+export const scrollMargin = boxSideSchema({
+  itemSchema: scrollMarginItem,
+})
diff --git a/packages/gui/src/components/schemas/scroll-padding.tsx b/packages/gui/src/components/schemas/scroll-padding.tsx
new file mode 100644
index 00000000..84fdf63d
--- /dev/null
+++ b/packages/gui/src/components/schemas/scroll-padding.tsx
@@ -0,0 +1,34 @@
+import { boxSideSchema } from './box-side'
+import { joinSchemas } from './joinSchemas'
+import { keyword, lengthPercentage } from './primitives'
+import { themeScale } from './theme'
+import { tupleSchema } from './tuple'
+
+const scrollPaddingItem = joinSchemas([
+  lengthPercentage(),
+  keyword(['auto']),
+  themeScale('space'),
+])
+
+export const scrollPaddingBottom = scrollPaddingItem
+export const scrollPaddingTop = scrollPaddingItem
+export const scrollPaddingLeft = scrollPaddingItem
+export const scrollPaddingRight = scrollPaddingItem
+
+export const scrollPaddingBlockStart = scrollPaddingItem
+export const scrollPaddingBlockEnd = scrollPaddingItem
+export const scrollPaddingInlineStart = scrollPaddingItem
+export const scrollPaddingInlineEnd = scrollPaddingItem
+
+export const scrollPaddingBlock = tupleSchema({
+  itemSchema: scrollPaddingItem,
+  labels: ['Start', 'End'],
+})
+export const scrollPaddingInline = tupleSchema({
+  itemSchema: scrollPaddingItem,
+  labels: ['Start', 'End'],
+})
+
+export const scrollPadding = boxSideSchema({
+  itemSchema: scrollPaddingItem,
+})
diff --git a/packages/gui/src/components/schemas/scroll-snap-align.tsx b/packages/gui/src/components/schemas/scroll-snap-align.tsx
new file mode 100644
index 00000000..520452bd
--- /dev/null
+++ b/packages/gui/src/components/schemas/scroll-snap-align.tsx
@@ -0,0 +1,8 @@
+import { keyword } from './primitives'
+import { tupleSchema } from './tuple'
+
+// TODO include other scroll snap attributes here?
+export const scrollSnapAlign = tupleSchema({
+  itemSchema: keyword(['none', 'start', 'center', 'end']),
+  labels: ['block', 'inline'],
+})
diff --git a/packages/gui/src/components/schemas/shape-outside.tsx b/packages/gui/src/components/schemas/shape-outside.tsx
new file mode 100644
index 00000000..63379df2
--- /dev/null
+++ b/packages/gui/src/components/schemas/shape-outside.tsx
@@ -0,0 +1,20 @@
+import { SHAPE_BOX_KEYWORDS } from '../../types/css'
+import { basicShape } from './basic-shape'
+import { image } from './image'
+import { joinSchemas } from './joinSchemas'
+import { objectSchema } from './object'
+import { keyword, lengthPercentage, numberPercentage } from './primitives'
+
+export const shapeOutside = joinSchemas([
+  image,
+  objectSchema({
+    type: '<shape>',
+    fields: {
+      shape: basicShape,
+      box: keyword(SHAPE_BOX_KEYWORDS),
+    },
+  }),
+])
+
+export const shapeImageThreshold = numberPercentage()
+export const shapeMargin = lengthPercentage()
diff --git a/packages/gui/src/components/schemas/shorthand.ts b/packages/gui/src/components/schemas/shorthand.ts
new file mode 100644
index 00000000..5c19a3e6
--- /dev/null
+++ b/packages/gui/src/components/schemas/shorthand.ts
@@ -0,0 +1,74 @@
+import { isNil } from 'lodash-es'
+import { objectSchema } from './object'
+import { DataTypeSchema } from './types'
+
+interface CreateShorthand<T extends object> {
+  type?: string
+  fields: {
+    [Property in keyof T]: DataTypeSchema<T[Property]>
+  }
+  keyOrder?: (keyof T)[]
+  /** Designates keys that should be preceded by a slash when stringified. */
+  slash?: (keyof T)[]
+  defaultValue?: Partial<T>
+}
+
+/**
+ * Used for objects representing CSS shorthands, like `background` or `border`.
+ * These consist of one or more optional properties.
+ */
+export function shorthandSchema<T extends object>({
+  type,
+  fields,
+  keyOrder = Object.keys(fields) as (keyof T)[],
+  slash,
+  defaultValue,
+}: CreateShorthand<T>) {
+  return objectSchema({
+    type,
+    fields,
+    keyOrder,
+    defaultValue,
+    stringify: (stringifiedFields) => {
+      return keyOrder
+        .map((field) => {
+          const stringified = stringifiedFields[field]
+          return slash?.includes(field) ? `/ ${stringified}` : stringified
+        })
+        .join(' ')
+    },
+    parse(tokens) {
+      let remaining = [...tokens]
+      const result: Partial<T> = {}
+      while (remaining.length > 0) {
+        let foundMatch = false
+        // Iterate through the fields to see if we can find a matching parse
+        for (const key of keyOrder) {
+          const fieldSchema = fields[key]
+          // TODO handle slashed fields
+          const [parsed, rest] = fieldSchema.parse!(remaining)
+          if (!isNil(parsed)) {
+            result[key] = parsed
+            remaining = rest
+            foundMatch = true
+            break
+          }
+        }
+        if (!foundMatch) {
+          break
+        }
+      }
+      // If we got no matches at all, then parsing failed
+      if (Object.keys(result).length === 0) {
+        return [undefined, tokens]
+      }
+      // Fill the rest with defaults
+      for (const key of keyOrder) {
+        if (isNil(result[key])) {
+          result[key] = fields[key].defaultValue
+        }
+      }
+      return [result as T, remaining]
+    },
+  })
+}
diff --git a/packages/gui/src/components/schemas/stroke.tsx b/packages/gui/src/components/schemas/stroke.tsx
new file mode 100644
index 00000000..79379357
--- /dev/null
+++ b/packages/gui/src/components/schemas/stroke.tsx
@@ -0,0 +1,49 @@
+import { color } from './color'
+import { joinSchemas } from './joinSchemas'
+import { listSchema } from './list'
+import {
+  keyword,
+  length,
+  lengthPercentage,
+  number,
+  numberPercentage,
+} from './primitives'
+import { url } from './url'
+
+export const stroke = joinSchemas([
+  url,
+  color(),
+  keyword(['none', 'context-fill', 'context-stroke']),
+])
+
+export const strokeDasharray = listSchema({
+  itemSchema: length({ number: true }),
+})
+export const strokeDashoffset = lengthPercentage({ number: true })
+export const strokeLinejoin = keyword([
+  'miter',
+  'miter-clip',
+  'round',
+  'bevel',
+  'arcs',
+])
+export const strokeLinecap = keyword(['butt', 'round', 'square'])
+export const strokeMiterlimit = number()
+export const strokeOpacity = numberPercentage({
+  defaultValue: { value: 1, unit: 'number' },
+})
+export const strokeWidth = lengthPercentage({
+  number: true,
+  defaultValue: { value: 1, unit: 'px' },
+})
+
+// Experimental / non-supported properties
+export const strokeAlignment = keyword(['center', 'inner', 'outer'])
+export const strokeDashadjust = keyword([
+  'none',
+  'stretch',
+  'compress',
+  'dashed',
+  'gaps',
+])
+export const strokeDashcorner = joinSchemas([length(), keyword(['auto'])])
diff --git a/packages/gui/src/components/schemas/text-decoration.tsx b/packages/gui/src/components/schemas/text-decoration.tsx
new file mode 100644
index 00000000..6822dccd
--- /dev/null
+++ b/packages/gui/src/components/schemas/text-decoration.tsx
@@ -0,0 +1,51 @@
+import { color } from './color'
+import { joinSchemas } from './joinSchemas'
+import { keyword, lengthPercentage } from './primitives'
+import { shorthandSchema } from './shorthand'
+
+const textDecorationLineKeywords = [
+  'none',
+  'underline',
+  'overline',
+  'line-through',
+  'blink',
+  'underline line-through',
+  'underline overline',
+  'overline line-through',
+  'underline overline line-through',
+] as const
+export const textDecorationLine = keyword(textDecorationLineKeywords, {
+  defaultValue: 'underline',
+})
+
+const textDecorationStyleKeywords = [
+  'solid',
+  'double',
+  'dotted',
+  'dashed',
+  'wavy',
+] as const
+export const textDecorationStyle = keyword(textDecorationStyleKeywords)
+export const textDecorationLength = joinSchemas([
+  lengthPercentage(),
+  keyword(['auto', 'from-font']),
+])
+
+export const textDecorationColor = color({ defaultValue: '#6465ff' })
+export const textDecorationThickness = joinSchemas([
+  lengthPercentage({
+    defaultValue: { value: 4, unit: 'px' },
+  }),
+  keyword(['auto', 'from-font']),
+])
+
+export const textDecoration = shorthandSchema({
+  fields: {
+    color: textDecorationColor,
+    line: textDecorationLine,
+    style: textDecorationStyle,
+    thickness: textDecorationThickness,
+  },
+})
+
+// TODO I think we can define the individual text-decoration properties here as well?
diff --git a/packages/gui/src/components/schemas/text-emphasis.ts b/packages/gui/src/components/schemas/text-emphasis.ts
new file mode 100644
index 00000000..50c9d746
--- /dev/null
+++ b/packages/gui/src/components/schemas/text-emphasis.ts
@@ -0,0 +1,34 @@
+import { color } from './color'
+import { keyword } from './primitives'
+import { shorthandSchema } from './shorthand'
+
+export const textEmphasisColor = color()
+// TODO separate [open/filled] properties
+export const textEmphasisStyle = keyword([
+  'filled',
+  'open',
+  'dot',
+  'circle',
+  'double-circle',
+  'triangle',
+  'filled sesame',
+  'open sesame',
+])
+
+export const textEmphasis = shorthandSchema({
+  fields: {
+    color: textEmphasisColor,
+    style: textEmphasisStyle,
+  },
+})
+
+// TODO separate keywords
+export const textEmphasisPosition = keyword([
+  'over right',
+  'over left',
+  'under right',
+  'under left',
+  'left over',
+  'right under',
+  'left under',
+])
diff --git a/packages/gui/src/components/schemas/text-shadow.tsx b/packages/gui/src/components/schemas/text-shadow.tsx
new file mode 100644
index 00000000..312e3195
--- /dev/null
+++ b/packages/gui/src/components/schemas/text-shadow.tsx
@@ -0,0 +1,20 @@
+import { color } from './color'
+import { joinSchemas } from './joinSchemas'
+import { listSchema } from './list'
+import { objectSchema } from './object'
+import { keyword, length } from './primitives'
+
+const singleTextShadow = objectSchema({
+  type: '<text-shadow>',
+  fields: {
+    color: color(),
+    offsetX: length(),
+    offsetY: length(),
+    blur: length({ range: 'nonnegative' }),
+  },
+})
+
+export const textShadow = joinSchemas([
+  listSchema({ itemSchema: singleTextShadow }),
+  keyword(['none']),
+])
diff --git a/packages/gui/src/components/schemas/theme.tsx b/packages/gui/src/components/schemas/theme.tsx
new file mode 100644
index 00000000..2f5dd882
--- /dev/null
+++ b/packages/gui/src/components/schemas/theme.tsx
@@ -0,0 +1,107 @@
+import { useTheme } from '../providers/ThemeContext'
+import { get, range, sample } from 'lodash-es'
+import { ThemeNamedValue, ThemeValue } from '../../types/css'
+import { SelectInput } from '../inputs/SelectInput'
+import { DataTypeSchema } from './types'
+import { joinPath } from '../providers/util'
+import { randomInt } from '../../lib/random'
+
+export function themeScale(path: string): DataTypeSchema<ThemeValue> {
+  return {
+    type: 'theme',
+    validate: ((value: any) => {
+      if (typeof value !== 'object') return false
+      return (
+        value.type === 'theme' &&
+        typeof value.path === 'string' &&
+        typeof value.index === 'number'
+      )
+    }) as any,
+    stringify(value, theme) {
+      return get(theme, joinPath(value.path, value.index))
+    },
+    regenerate(options) {
+      const scale = get(options.theme, options.previousValue.path)
+      return {
+        ...options.previousValue,
+        index: randomInt(0, scale.length),
+      }
+    },
+    inlineInput(props) {
+      const theme = useTheme()
+      const numOptions = get(theme, path)?.length || 0
+      const decorateText = (step: string) => {
+        const value = get(theme, joinPath(path, step))
+        return `${step} - ${value}`
+      }
+      return (
+        <SelectInput
+          label=""
+          value={`${props.value.index}`}
+          onChange={(value) =>
+            props.onChange({
+              ...props.value,
+              index: +value,
+            })
+          }
+          options={range(0, numOptions).map((x) => x.toString())}
+          decorateText={decorateText}
+        />
+      )
+    },
+    // TODO function version of defaultValue, pass in theme
+    defaultValue: { type: 'theme', path, index: 0 },
+    parse(tokens) {
+      return [undefined, tokens]
+    },
+  }
+}
+
+// Theme properties for stuff represented by a string name
+export function themeRecord(path: string): DataTypeSchema<ThemeNamedValue> {
+  return {
+    type: 'theme',
+    validate: ((value: any) => {
+      if (typeof value !== 'object') return false
+      return (
+        value.type === 'theme' &&
+        typeof value.path === 'string' &&
+        typeof value.key === 'string'
+      )
+    }) as any,
+    stringify(value, theme) {
+      return get(theme, `${value.path}.${value.key}`)
+    },
+    regenerate(options) {
+      const records = get(options.theme, options.previousValue.path)
+      const paths = Object.keys(records || {})
+
+      return {
+        ...options.previousValue,
+        key: sample(paths) ?? '',
+      }
+    },
+    inlineInput(props) {
+      const theme = useTheme()
+      const options = Object.keys(get(theme, path))
+      return (
+        <SelectInput
+          label=""
+          value={props.value.key || options[0]}
+          onChange={(value) =>
+            props.onChange({
+              ...props.value,
+              key: value,
+            })
+          }
+          options={options}
+        />
+      )
+    },
+    // TODO function version of defaultValue, pass in theme
+    defaultValue: { type: 'theme', path, key: '' },
+    parse(tokens) {
+      return [undefined, tokens]
+    },
+  }
+}
diff --git a/packages/gui/src/components/schemas/time.ts b/packages/gui/src/components/schemas/time.ts
new file mode 100644
index 00000000..130b67db
--- /dev/null
+++ b/packages/gui/src/components/schemas/time.ts
@@ -0,0 +1,28 @@
+import { Time, TIME_UNITS } from '../../types/css'
+import { dimension } from './dimension'
+
+const timeRanges = {
+  s: [0, 2],
+  ms: [0, 2000],
+} as const
+
+const timeConversions = {
+  ms: 1000,
+  s: 1,
+}
+
+const timeSteps = {
+  ms: 25,
+  s: 0.025,
+}
+
+export function time({ defaultValue }: { defaultValue?: Time } = {}) {
+  return dimension({
+    type: 'time',
+    defaultValue,
+    steps: timeSteps,
+    regenRanges: timeRanges,
+    conversions: timeConversions,
+    units: TIME_UNITS,
+  })
+}
diff --git a/packages/gui/src/components/schemas/toggle.ts b/packages/gui/src/components/schemas/toggle.ts
new file mode 100644
index 00000000..158f7514
--- /dev/null
+++ b/packages/gui/src/components/schemas/toggle.ts
@@ -0,0 +1,15 @@
+import { CheckboxInput } from '../inputs/CheckboxInput'
+import { DataTypeSchema } from './types'
+
+/**
+ * Represents an input where the item is present or not
+ */
+export function toggle(label: string): DataTypeSchema<boolean> {
+  return {
+    type: label,
+    defaultValue: false,
+    inlineInput: CheckboxInput,
+    stringify: (value) => (value ? label : ''),
+    validate: ((value: any) => !value || typeof value === 'boolean') as any,
+  }
+}
diff --git a/packages/gui/src/components/schemas/topLevel.ts b/packages/gui/src/components/schemas/topLevel.ts
new file mode 100644
index 00000000..83d8122c
--- /dev/null
+++ b/packages/gui/src/components/schemas/topLevel.ts
@@ -0,0 +1,30 @@
+import { GLOBAL_KEYWORDS } from '../../data/global-keywords'
+import { joinSchemas } from './joinSchemas'
+import { keyword } from './primitives'
+import { responsive } from './responsive'
+import { DataTypeSchema } from './types'
+
+const NO_GLOBAL_SCHEMA_PROPERTIES = ['fontFamily', 'fontVariationSettings']
+
+export function topLevel<T>(schema: DataTypeSchema<T>, property: string) {
+  if (NO_GLOBAL_SCHEMA_PROPERTIES.includes(property)) {
+    return schema
+  }
+  const withGlobal = joinSchemas([schema, global])
+  const responsiveInput = responsive(withGlobal)
+  return joinSchemas([withGlobal, responsiveInput], {
+    convert(oldValue, newType) {
+      // If converting *from* a responsive input, take the first value
+      if (responsiveInput.validate(oldValue)) {
+        return oldValue.values[0] as any
+      }
+      // If converting *to* a responsive input, triplicate the current input
+      if (newType === 'responsive') {
+        return { type: 'responsive', values: [oldValue, oldValue, oldValue] }
+      }
+      return undefined
+    },
+  })
+}
+
+const global = keyword(GLOBAL_KEYWORDS, { type: 'global' })
diff --git a/packages/gui/src/components/schemas/transform.tsx b/packages/gui/src/components/schemas/transform.tsx
new file mode 100644
index 00000000..cf0c911e
--- /dev/null
+++ b/packages/gui/src/components/schemas/transform.tsx
@@ -0,0 +1,223 @@
+import { listSchema } from './list'
+import { functionSchema } from './function'
+import { keyword, length, lengthPercentage, number } from './primitives'
+import { tupleSchema } from './tuple'
+import { objectSchema } from './object'
+import { joinSchemas } from './joinSchemas'
+import { angle } from './angle'
+import { SchemaInput } from '../inputs/SchemaInput'
+import { replace } from '../../lib/array'
+
+const translate = functionSchema(
+  'translate',
+  tupleSchema({
+    itemSchema: lengthPercentage(),
+    labels: ['x', 'y'],
+  })
+)
+const translateX = functionSchema('translateX', lengthPercentage())
+const translateY = functionSchema('translateY', lengthPercentage())
+const translateZ = functionSchema('translateZ', lengthPercentage())
+const translate3d = functionSchema(
+  'translate3d',
+  tupleSchema({
+    // TODO 'z' axis should be  `length` only
+    itemSchema: lengthPercentage(),
+    labels: ['x', 'y', 'z'],
+    linkable: false,
+  })
+)
+
+const scaleNumber = number({ defaultValue: 1 })
+const scale = functionSchema(
+  'scale',
+  tupleSchema({
+    itemSchema: scaleNumber,
+    labels: ['x', 'y'],
+  })
+)
+const scaleX = functionSchema('scaleX', scaleNumber)
+const scaleY = functionSchema('scaleY', scaleNumber)
+const scaleZ = functionSchema('scaleZ', scaleNumber)
+const scale3d = functionSchema(
+  'scale3d',
+  tupleSchema({
+    itemSchema: scaleNumber,
+    labels: ['x', 'y', 'z'],
+    linkable: false,
+  })
+)
+
+const rotate = functionSchema('rotate', angle())
+const rotateX = functionSchema('rotateX', angle())
+const rotateY = functionSchema('rotateY', angle())
+const rotateZ = functionSchema('rotateZ', angle())
+const rotate3d = functionSchema(
+  'rotate3d',
+  objectSchema({
+    fields: {
+      value: tupleSchema({
+        itemSchema: number(),
+        labels: ['x', 'y', 'z'],
+        linkable: false,
+        separator: ', ',
+      }),
+      angle: angle(),
+    },
+  })
+)
+
+const skew = functionSchema(
+  'skew',
+  tupleSchema({
+    itemSchema: angle(),
+    labels: ['x', 'y'],
+    separator: ', ',
+  })
+)
+const skewX = functionSchema('skewX', angle())
+const skewY = functionSchema('skewY', angle())
+
+// TODO restrict to first value
+const perspective = functionSchema('perspective', length())
+
+const matrixNumber = number()
+
+const matrixLabels = ['a', 'b', 'c', 'd', 'tx', 'ty']
+const matrix = functionSchema(
+  'matrix',
+  tupleSchema({
+    itemSchema: number(),
+    separator: ', ',
+    labels: matrixLabels,
+    linkable: false,
+    defaultValue: [1, 0, 0, 1, 0, 0],
+    input(props) {
+      const { value, onChange } = props
+      return (
+        <div
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, 1fr)',
+            gap: 3,
+          }}
+        >
+          {[0, 1].flatMap((i) => {
+            return [0, 1, 2].map((j) => {
+              const index = 2 * j + i
+              return (
+                <SchemaInput
+                  key={index}
+                  schema={matrixNumber}
+                  value={value[index]}
+                  onChange={(newValue) => {
+                    onChange(replace(value, index, newValue))
+                  }}
+                  label={matrixLabels[index]}
+                />
+              )
+            })
+          })}
+        </div>
+      )
+    },
+  })
+)
+
+const matrix3d = functionSchema(
+  'matrix3d',
+  tupleSchema({
+    itemSchema: matrixNumber,
+    separator: ',',
+    labels: [
+      'a1',
+      'b1',
+      'c1',
+      'd1',
+      'a2',
+      'b2',
+      'c2',
+      'd2',
+      'a3',
+      'b3',
+      'c3',
+      'd3',
+      'a4',
+      'b4',
+      'c4',
+      'd4',
+    ],
+    defaultValue: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+    linkable: false,
+    input(props) {
+      const { value, onChange } = props
+      return (
+        <div>
+          {['a', 'b', 'c', 'd'].map((letter, i) => {
+            return (
+              <div sx={{ display: 'flex' }}>
+                {[0, 1, 2, 3].map((j) => {
+                  const index = 4 * i + j
+                  return (
+                    <SchemaInput
+                      key={index}
+                      schema={matrixNumber}
+                      value={value[index]}
+                      onChange={(newValue) => {
+                        onChange(replace(value, index, newValue))
+                      }}
+                      label=""
+                    />
+                  )
+                })}
+              </div>
+            )
+          })}
+        </div>
+      )
+    },
+  })
+)
+
+const singleTransform = joinSchemas(
+  [
+    translate,
+    translateX,
+    translateY,
+    translateZ,
+    translate3d,
+    scale,
+    scaleX,
+    scaleY,
+    scaleZ,
+    scale3d,
+    rotate,
+    rotateX,
+    rotateY,
+    rotateZ,
+    rotate3d,
+    skew,
+    skewX,
+    skewY,
+    perspective,
+    matrix,
+    matrix3d,
+  ],
+  { type: 'transform' }
+)
+
+export const transform = joinSchemas([
+  listSchema({
+    itemSchema: singleTransform,
+    separator: ' ',
+  }),
+  keyword(['none']),
+])
+
+export const transformOrigin = objectSchema({
+  fields: {
+    x: joinSchemas([keyword(['left', 'center', 'right']), lengthPercentage()]),
+    y: joinSchemas([keyword(['top', 'center', 'bottom']), lengthPercentage()]),
+    z: length(),
+  },
+})
diff --git a/packages/gui/src/components/schemas/transition.tsx b/packages/gui/src/components/schemas/transition.tsx
new file mode 100644
index 00000000..4fd77dba
--- /dev/null
+++ b/packages/gui/src/components/schemas/transition.tsx
@@ -0,0 +1,43 @@
+import { ANIMATABLE_PROPERTIES } from '../../data/animatable'
+import { easingFunction } from './easing-function'
+import { listSchema } from './list'
+import { keyword } from './primitives'
+import { shorthandSchema } from './shorthand'
+import { time } from './time'
+
+const singleProperty = keyword(ANIMATABLE_PROPERTIES, {
+  defaultValue: 'all',
+  themeProperty: 'transitions',
+})
+const singleDuration = time({
+  defaultValue: { value: 350, unit: 'ms' },
+})
+const singleDelay = time()
+const singleTimingFunction = easingFunction
+
+export const transitionProperty = listSchema({
+  itemSchema: singleProperty,
+})
+export const transitionDuration = listSchema({
+  itemSchema: singleDuration,
+})
+export const transitionDelay = listSchema({
+  itemSchema: singleDelay,
+})
+export const transitionTimingFunction = listSchema({
+  itemSchema: singleTimingFunction,
+})
+
+const singleTransition = shorthandSchema({
+  fields: {
+    property: singleProperty,
+    duration: singleDuration,
+    delay: singleDelay,
+    timingFunction: singleTimingFunction,
+  },
+  keyOrder: ['property', 'duration', 'delay', 'timingFunction'],
+})
+
+export const transition = listSchema({
+  itemSchema: singleTransition,
+})
diff --git a/packages/gui/src/components/schemas/tuple.tsx b/packages/gui/src/components/schemas/tuple.tsx
new file mode 100644
index 00000000..4f3c3b6e
--- /dev/null
+++ b/packages/gui/src/components/schemas/tuple.tsx
@@ -0,0 +1,115 @@
+import { DataTypeSchema, RegenOptions } from './types'
+import * as Toggle from '@radix-ui/react-toggle'
+import { Link } from 'react-feather'
+import { SchemaInput } from '../inputs/SchemaInput'
+import { replace } from '../../lib/array'
+import { ComponentType } from 'react'
+import { EditorPropsWithLabel } from '../../types/editor'
+
+interface CreateTupleSchema<T> {
+  itemSchema: DataTypeSchema<T>
+  labels: string[]
+  linkable?: boolean
+  separator?: string
+  /** Custom block input for the schema */
+  input?: ComponentType<EditorPropsWithLabel<T[]>>
+  defaultValue?: T[]
+}
+
+/**
+ * Schema for elements that take a set of values
+ * in a defined order that may be linked together
+ * (e.g. x/y, row/column, start/end)
+ */
+export function tupleSchema<T>({
+  itemSchema,
+  labels,
+  linkable = true,
+  separator = ' ',
+  input: CustomInput,
+  defaultValue: providedDefault,
+}: CreateTupleSchema<T>): DataTypeSchema<T[]> {
+  function isLinked(value: T[]) {
+    return value.length <= 1
+  }
+
+  const defaultValue = linkable
+    ? [itemSchema.defaultValue]
+    : labels.map(() => itemSchema.defaultValue)
+
+  function stringify(value: T[], ...args: any[]) {
+    return (
+      value
+        ?.map((item) => itemSchema.stringify(item, ...args))
+        .join(separator) ?? null
+    )
+  }
+
+  function regenerate({ theme, previousValue }: RegenOptions<T[]>) {
+    return previousValue.map(
+      (item) => itemSchema.regenerate?.({ theme, previousValue: item }) ?? item
+    )
+  }
+
+  return {
+    type: `${itemSchema.type} list`,
+    stringify,
+    defaultValue: providedDefault ?? defaultValue,
+    regenerate,
+    validate: ((value: any) => {
+      if (!(value instanceof Array)) {
+        return false
+      }
+      return value.every((item) => itemSchema.validate(item))
+    }) as any,
+    input(props) {
+      if (CustomInput) {
+        return <CustomInput {...props} />
+      }
+      const { value, onChange } = props
+      const linked = isLinked(value)
+      return (
+        <div sx={{ display: 'flex', gap: 2 }}>
+          {linkable && (
+            <Toggle.Root
+              title="Link inputs"
+              sx={{
+                p: 0,
+                background: 'none',
+                border: 'none',
+                color: 'muted',
+
+                '&[data-state=on]': {
+                  color: 'text',
+                },
+              }}
+              pressed={linked}
+              onPressedChange={(pressed) => {
+                if (pressed) {
+                  onChange([value[0]])
+                } else {
+                  onChange(labels.map(() => value[0]))
+                }
+              }}
+            >
+              <Link size={14} />
+            </Toggle.Root>
+          )}
+          {value.map((item, i) => {
+            return (
+              <SchemaInput
+                key={i}
+                schema={itemSchema}
+                value={value[i]}
+                onChange={(newValue) => {
+                  onChange(replace(value, i, newValue))
+                }}
+                label=""
+              />
+            )
+          })}
+        </div>
+      )
+    },
+  }
+}
diff --git a/packages/gui/src/components/schemas/types.ts b/packages/gui/src/components/schemas/types.ts
new file mode 100644
index 00000000..8d414129
--- /dev/null
+++ b/packages/gui/src/components/schemas/types.ts
@@ -0,0 +1,41 @@
+import { ComponentType } from 'react'
+import { Token } from '../../lib/parse'
+import { EditorPropsWithLabel } from '../../types/editor'
+import { Theme } from '../../types/theme'
+
+export interface DataTypeSchema<T> {
+  /** the display type of the schema */
+  type: string
+  /** The block input for the schema, to display below the label */
+  input?: ComponentType<EditorPropsWithLabel<T>>
+  /** The inline input for the schema, to be displayed next to the label */
+  inlineInput?: ComponentType<EditorPropsWithLabel<T>>
+  /** The default value to render for the schema */
+  defaultValue: T
+  /** Validates whether a value adheres to the schema */
+  validate(value: unknown): value is T
+  /** How to stringify the values of the schema */
+  stringify(value: T, theme?: Theme): string
+  /** Function to generate a new value in the schema, based on the provided options */
+  regenerate?(options: RegenOptions<T>): T
+  /** Variants of the schema for use in joining multiple types of schema together */
+  variants?: SchemaVariants<T>
+  /** Whether the input has a block input */
+  hasBlockInput?(value: T): boolean
+  /**
+   * Parse the list of tokens into this schema input.
+   * Returns a tuple of:
+   *  - the parsed data, or undefined if this does not parse
+   *  - the rest of the unparsed tokens
+   */
+  parse?(tokens: Token[]): [result: T | undefined, rest: Token[]]
+}
+
+export interface RegenOptions<T> {
+  previousValue: T
+  theme?: Theme
+  ruleset?: any
+  property?: string
+}
+
+export type SchemaVariants<T> = { [V in keyof T]: DataTypeSchema<T[V]> }
diff --git a/packages/gui/src/components/schemas/url.ts b/packages/gui/src/components/schemas/url.ts
new file mode 100644
index 00000000..60c0e17f
--- /dev/null
+++ b/packages/gui/src/components/schemas/url.ts
@@ -0,0 +1,7 @@
+import { functionSchema } from './function'
+import { string } from './primitives'
+
+export const url = functionSchema(
+  'url',
+  string({ defaultValue: 'https://dlu344star2bj.cloudfront.net/i/3090-0015.jpg' })
+)
diff --git a/packages/gui/src/components/ui/IconButton.tsx b/packages/gui/src/components/ui/IconButton.tsx
index 4e84e179..b08b538b 100644
--- a/packages/gui/src/components/ui/IconButton.tsx
+++ b/packages/gui/src/components/ui/IconButton.tsx
@@ -6,12 +6,13 @@ export default function IconButton(props: Props) {
   return (
     <button
       sx={{
-        p: 0,
+        p: 1,
         m: 0,
         appearance: 'none',
         WebkitAppearance: 'none',
-        background: 'none',
+        background: 'backgroundOffset',
         border: 'none',
+        borderRadius: '6px',
         cursor: 'pointer',
         color: 'muted',
         display: 'flex',
diff --git a/packages/gui/src/components/ui/InputHeader.tsx b/packages/gui/src/components/ui/InputHeader.tsx
new file mode 100644
index 00000000..3ecd21ee
--- /dev/null
+++ b/packages/gui/src/components/ui/InputHeader.tsx
@@ -0,0 +1,79 @@
+import { ReactNode } from 'react'
+import { RefreshCw, X } from 'react-feather'
+import { EditorPropsWithLabel } from '../../types/editor'
+import { Label } from '../primitives'
+import { useTheme } from '../providers/ThemeContext'
+import IconButton from './IconButton'
+
+interface Props extends Omit<EditorPropsWithLabel<any>, 'keywords'> {
+  children?: ReactNode
+  regenerate?(options: any): any
+  onDrag?(): void
+  onDragEnd?(): void
+}
+
+export function InputHeader({
+  children,
+  label,
+  value,
+  onChange,
+  onRemove,
+  onDrag,
+  onDragEnd,
+  regenerate,
+  ruleset,
+  property,
+}: Props) {
+  const theme = useTheme()
+  return (
+    <div
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      {onDrag && (
+        <div
+          draggable
+          onDrag={onDrag}
+          onDragEnd={onDragEnd}
+          sx={{ mr: 1, color: 'muted', cursor: 'grab', height: '10px', width: '10px' }}
+        >
+          <svg viewBox="0 0 10 10" width='100%' height='100%' fill='currentColor' sx={{ display: 'block'}}>
+            <path d="M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z" />
+          </svg>
+        </div>
+      )}
+      {label && <Label sx={{ mr: 3 }}>{label}</Label>}
+      {children}
+      <div sx={{ ml: 'auto', pl: 2, mr: 0, display: 'flex', alignItems: 'center', gap: '8px', justifyContent: 'space-between' }}>
+        {regenerate && (
+          <IconButton
+            data-type="regen-button"
+            title="Regenerate"
+            sx={{ transition: 'opacity 150ms' }}
+            onClick={() => {
+              onChange(
+                regenerate({ theme, previousValue: value, ruleset, property })
+              )
+            }}
+          >
+            <RefreshCw size={15} strokeWidth={2} />
+          </IconButton>
+        )}
+        {onRemove && <DeleteButton onRemove={onRemove} />}
+      </div>
+    </div>
+  )
+}
+
+interface DeleteButtonProps {
+  onRemove(): void
+}
+export const DeleteButton = ({ onRemove }: DeleteButtonProps) => {
+  return (
+    <IconButton onClick={() => onRemove()}>
+      <X size={16} strokeWidth={3} color="currentColor" sx={{ display: 'block' }}/>
+    </IconButton>
+  )
+}
diff --git a/packages/gui/src/components/ui/Select.tsx b/packages/gui/src/components/ui/Select.tsx
new file mode 100644
index 00000000..f5a53bd9
--- /dev/null
+++ b/packages/gui/src/components/ui/Select.tsx
@@ -0,0 +1,110 @@
+import * as Select from '@radix-ui/react-select'
+import { ComponentType } from 'react'
+import { ChevronDown } from 'react-feather'
+
+/* compai-styled versions of the radix select input */
+
+export const Root = Select.Root
+export const Value = Select.Value
+
+type PropsType<X> = X extends ComponentType<infer P> ? P : never
+
+export const Trigger = (props: PropsType<typeof Select.Trigger>) => {
+  return (
+    <Select.Trigger
+      sx={{
+        display: 'flex',
+        gap: 1,
+        alignItems: 'center',
+        appearance: 'none',
+        border: 'none',
+        p: 0,
+        background: 'none',
+        color: 'text',
+        width: 'max-content',
+      }}
+      {...props}
+    />
+  )
+}
+
+export const Icon = (props: PropsType<typeof Select.Icon>) => {
+  return (
+    <Select.Icon {...props}>
+      <ChevronDown size={14} sx={{ transform: 'translateY(3px)' }} />
+    </Select.Icon>
+  )
+}
+
+export const Content = ({
+  children,
+  ...props
+}: PropsType<typeof Select.Content>) => {
+  return (
+    <Select.Content
+      {...props}
+      sx={{
+        backgroundColor: 'background',
+        py: 2,
+        border: '1px solid',
+        borderColor: 'border',
+        borderRadius: '0.5rem',
+        fontSize: 1,
+        cursor: 'pointer',
+      }}
+    >
+      {/* Combine with the viewpoint (and the scroll arrows?) for convenience */}
+      <Select.Viewport>{children}</Select.Viewport>
+    </Select.Content>
+  )
+}
+
+export const Item = (props: PropsType<typeof Select.Item>) => {
+  return (
+    <Select.SelectItem
+      {...props}
+      sx={{
+        position: 'relative',
+        pr: 3,
+        pl: 4,
+        ':hover': {
+          backgroundColor: 'primary',
+        },
+      }}
+    />
+  )
+}
+
+export const ItemIndicator = (
+  props: PropsType<typeof Select.ItemIndicator>
+) => {
+  return (
+    <Select.ItemIndicator
+      {...props}
+      sx={{
+        position: 'absolute',
+        left: 3,
+      }}
+    >
+      ✓
+    </Select.ItemIndicator>
+  )
+}
+
+export const ItemText = Select.ItemText
+export const Separator = Select.Separator
+export const Label = (props: PropsType<typeof Select.Label>) => {
+  return (
+    <Select.Label
+      {...props}
+      sx={{
+        px: 2,
+        fontStyle: 'italic',
+        color: 'muted',
+        fontSize: '0.75rem',
+      }}
+    />
+  )
+}
+// export const Label = Select.Label
+export const Group = Select.Group
diff --git a/packages/gui/src/components/ui/dropdowns/EditorDropdown.tsx b/packages/gui/src/components/ui/dropdowns/EditorDropdown.tsx
new file mode 100644
index 00000000..72499d84
--- /dev/null
+++ b/packages/gui/src/components/ui/dropdowns/EditorDropdown.tsx
@@ -0,0 +1,39 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { MoreVertical, Trash } from 'react-feather'
+import { DROPDOWN_ITEM_STYLES, DROPDOWN_STYLES } from './styles'
+import IconButton from '../IconButton'
+
+type EditorDropdownProps = {
+  onClearStyles(): void
+}
+export const EditorDropdown = ({ onClearStyles }: EditorDropdownProps) => {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger
+        sx={{
+          all: 'unset',
+          lineHeight: 1,
+          position: 'relative',
+          color: 'muted',
+        }}
+      >
+        <IconButton sx={{ ml: 2 }}>
+          <MoreVertical size={16} />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content sx={DROPDOWN_STYLES}>
+        <DropdownMenu.Item sx={DROPDOWN_ITEM_STYLES} onClick={onClearStyles}>
+          <div
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <Trash size={12} sx={{ color: 'muted', mr: 2 }} />{' '}
+            <span>Clear all styles</span>
+          </div>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  )
+}
diff --git a/packages/gui/src/components/ui/dropdowns/FieldsetDropdown.tsx b/packages/gui/src/components/ui/dropdowns/FieldsetDropdown.tsx
new file mode 100644
index 00000000..643f4cc8
--- /dev/null
+++ b/packages/gui/src/components/ui/dropdowns/FieldsetDropdown.tsx
@@ -0,0 +1,52 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { MoreVertical, Trash } from 'react-feather'
+import { DROPDOWN_ITEM_STYLES, DROPDOWN_STYLES } from './styles'
+
+type FieldsetDropdownProps = {
+  onRemove(): void
+}
+export const FieldsetDropdown = ({ onRemove }: FieldsetDropdownProps) => {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger
+        sx={{
+          p: 1,
+          mr: 0,
+          appearance: 'none',
+          WebkitAppearance: 'none',
+          background: 'backgroundOffset',
+          border: 'none',
+          borderRadius: '6px',
+          cursor: 'pointer',
+          color: 'muted',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transition: 'color .2s ease-in-out',
+          ':hover': {
+            color: 'text',
+          },
+          ':disabled': {
+            opacity: '50%',
+            cursor: 'initial',
+          },
+        }}
+      >
+        <MoreVertical size={15} strokeWidth={2}  />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content sx={DROPDOWN_STYLES}>
+        <DropdownMenu.Item sx={DROPDOWN_ITEM_STYLES} onClick={onRemove}>
+          <div
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <Trash size={12} sx={{ color: 'muted', mr: 2 }} />{' '}
+            <span>Delete group</span>
+          </div>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  )
+}
diff --git a/packages/gui/src/components/ui/dropdowns/NodeEditorDropdown.tsx b/packages/gui/src/components/ui/dropdowns/NodeEditorDropdown.tsx
new file mode 100644
index 00000000..ae1febe6
--- /dev/null
+++ b/packages/gui/src/components/ui/dropdowns/NodeEditorDropdown.tsx
@@ -0,0 +1,81 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { Copy, Plus, MoreVertical, Trash } from 'react-feather'
+import { DROPDOWN_ITEM_STYLES, DROPDOWN_STYLES } from './styles'
+import IconButton from '../IconButton'
+
+type NodeEditorDropdownProps = {
+  onRemove(): void
+  onWrap(): void
+  onDuplicate(): void
+}
+export const NodeEditorDropdown = ({
+  onRemove,
+  onWrap,
+  onDuplicate,
+}: NodeEditorDropdownProps) => {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger
+      sx={{
+        p: 1,
+        mr: 2,
+        appearance: 'none',
+        WebkitAppearance: 'none',
+        background: 'backgroundOffset',
+        border: 'none',
+        borderRadius: '6px',
+        cursor: 'pointer',
+        color: 'muted',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'color .2s ease-in-out',
+        ':hover': {
+          color: 'text',
+        },
+        ':disabled': {
+          opacity: '50%',
+          cursor: 'initial',
+        },
+      }}
+      >
+        <MoreVertical size={15} />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content sx={DROPDOWN_STYLES}>
+        <DropdownMenu.Item sx={DROPDOWN_ITEM_STYLES} onClick={onDuplicate}>
+          <div
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <Copy size={12} sx={{ color: 'muted', mr: 2 }} />{' '}
+            <span>Duplicate</span>
+          </div>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item sx={DROPDOWN_ITEM_STYLES} onClick={onWrap}>
+          <div
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <Plus size={12} sx={{ color: 'muted', mr: 2 }} />{' '}
+            <span>Add parent element</span>
+          </div>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item sx={DROPDOWN_ITEM_STYLES} onClick={onRemove}>
+          <div
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <Trash size={12} sx={{ color: 'muted', mr: 2 }} />{' '}
+            <span>Remove</span>
+          </div>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  )
+}
diff --git a/packages/gui/src/components/ui/dropdowns/styles.ts b/packages/gui/src/components/ui/dropdowns/styles.ts
new file mode 100644
index 00000000..760e5ddd
--- /dev/null
+++ b/packages/gui/src/components/ui/dropdowns/styles.ts
@@ -0,0 +1,35 @@
+export const DROPDOWN_STYLES: any = {
+  backgroundColor: 'background',
+  color: 'text',
+  borderRadius: 8,
+  border: 'thin solid',
+  borderColor: 'border',
+  width: 256,
+  py: 1,
+  position: 'relative',
+}
+
+export const DROPDOWN_ITEM_STYLES: any = {
+  px: 3,
+  py: 2,
+  color: 'text',
+  fontSize: [0, 1, 1],
+  fontWeight: 500,
+  lineHeight: 1,
+  textDecoration: 'none',
+  transition: '.25s color ease-in-out',
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  ':hover': {
+    outline: 'none',
+    border: 'none',
+    color: 'primary',
+  },
+}
+
+export const DROPDOWN_SEPARATOR_STYLES: any = {
+  my: 1,
+  borderTop: 'thin solid',
+  borderColor: 'border',
+}
diff --git a/packages/gui/src/data/attributes.ts b/packages/gui/src/data/attributes.ts
new file mode 100644
index 00000000..7d5521b7
--- /dev/null
+++ b/packages/gui/src/data/attributes.ts
@@ -0,0 +1,534 @@
+const GLOBAL_ATTRIBUTES = ['class', 'id', 'title']
+const SVG_PRESENTATION_ATTRIBUTES = [
+  'clip-path',
+  'clip-rule',
+  'clipPathUnits',
+  'color',
+  'display',
+  'fill',
+  'fill-opacity',
+  'fill-rule',
+  'filter',
+  'mask',
+  'opacity',
+  'shape-rendering',
+  'stroke',
+  'stroke-dasharray',
+  'stroke-dashoffset',
+  'stroke-linecap',
+  'stroke-linejoin',
+  'stroke-miterlimit',
+  'stroke-opacity',
+  'stroke-width',
+  'transform',
+  'vector-effect',
+  'visibility',
+]
+
+const FILTER_PRIMITIVE_ATTRIBUTES = ['height', 'width', 'x', 'y', 'result']
+
+export const ATTRIBUTE_MAP: Record<string, string[]> = {
+  a: [
+    ...GLOBAL_ATTRIBUTES,
+    'href',
+    'target',
+    'download',
+    'hreflang',
+    'referrerpolicy',
+    'rel',
+  ],
+  abbr: GLOBAL_ATTRIBUTES,
+  address: GLOBAL_ATTRIBUTES,
+  area: [...GLOBAL_ATTRIBUTES, 'shape', 'coords', 'href', 'alt'],
+  article: GLOBAL_ATTRIBUTES,
+  aside: GLOBAL_ATTRIBUTES,
+  audio: [
+    ...GLOBAL_ATTRIBUTES,
+    'src',
+    'autoplay',
+    'controls',
+    'crossorigin',
+    'disableremoteplayback',
+    'loop',
+    'muted',
+    'preload',
+  ],
+  b: GLOBAL_ATTRIBUTES,
+  bdi: GLOBAL_ATTRIBUTES,
+  bdo: GLOBAL_ATTRIBUTES,
+  blockquote: [...GLOBAL_ATTRIBUTES, 'cite'],
+  br: GLOBAL_ATTRIBUTES,
+  button: [
+    'type',
+    'disabled',
+    'name',
+    'value',
+    'autofocus',
+    'form',
+    'formaction',
+    'formenctype',
+    'formnovalidate',
+    'formtarget',
+    'formmethod',
+    'step',
+    'formnovalidate',
+    'formtarget',
+  ],
+  caption: GLOBAL_ATTRIBUTES,
+  cite: GLOBAL_ATTRIBUTES,
+  clipPath: [...GLOBAL_ATTRIBUTES, ...SVG_PRESENTATION_ATTRIBUTES],
+  code: GLOBAL_ATTRIBUTES,
+  col: GLOBAL_ATTRIBUTES,
+  colgroup: GLOBAL_ATTRIBUTES,
+  data: [...GLOBAL_ATTRIBUTES, 'datetime'],
+  datalist: GLOBAL_ATTRIBUTES,
+  dd: GLOBAL_ATTRIBUTES,
+  del: GLOBAL_ATTRIBUTES,
+  desc: GLOBAL_ATTRIBUTES,
+  details: GLOBAL_ATTRIBUTES,
+  dfn: GLOBAL_ATTRIBUTES,
+  dialog: [...GLOBAL_ATTRIBUTES, 'open'],
+  div: GLOBAL_ATTRIBUTES,
+  dl: GLOBAL_ATTRIBUTES,
+  dt: GLOBAL_ATTRIBUTES,
+  em: GLOBAL_ATTRIBUTES,
+  feBlend: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'in',
+    'in2',
+    'mode',
+  ],
+  feColorMatrix: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'in',
+    'type',
+    'values',
+  ],
+  feComponentTransfer: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'in',
+  ],
+  feComposite: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'in',
+    'in2',
+    'operator',
+    'ki',
+    'k2',
+    'k3',
+    'k4',
+  ],
+  feConvolveMatrix: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'in',
+    'order',
+    'kernelMatrix',
+    'divisor',
+    'bias',
+    'targetX',
+    'targetY',
+    'edgeMode',
+    'kernelUnitLength',
+    'preserveAlpha',
+  ],
+  feDiffuseLighting: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'in',
+    'surfaceScale',
+    'diffuseConstant',
+    'kernelUnitLength',
+  ],
+  feDisplacementMap: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'in',
+    'in2',
+    'scale',
+    'xChannelSelector',
+    'yChannelSelector',
+  ],
+  feFlood: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'flood-color',
+    'flood-opacity',
+  ],
+  feGaussianBlur: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'in',
+    'stdDeviation',
+    'edgeMode',
+  ],
+  feImage: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'xlink:href',
+    'preserveAspectRatio',
+  ],
+  feMerge: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+  ],
+  feMergeNode: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'in',
+  ],
+  feMorphology: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'in',
+    'operator',
+    'radius',
+  ],
+  feOffset: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'in',
+    'dx',
+    'dy',
+  ],
+  fePointLight: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'x',
+    'y',
+    'z',
+  ],
+  feSpecularLighting: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'in',
+    'surfaceScale',
+    'specularConstant',
+    'specularExponent',
+    'kernelUnitLength',
+  ],
+  feSpotLight: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'x',
+    'y',
+    'z',
+    'pointsAtX',
+    'pointsAtY',
+    'pointsAtZ',
+    'specularExponent',
+    'limitingConeAngle',
+  ],
+  feTile: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'in',
+  ],
+  feTurbulence: [
+    ...GLOBAL_ATTRIBUTES,
+    ...FILTER_PRIMITIVE_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'baseFrequency',
+    'numOctaves',
+    'seed',
+    'stitchTiles',
+    'type',
+  ],
+  fieldset: [...GLOBAL_ATTRIBUTES, 'disabled', 'form', 'name'],
+  figcaption: GLOBAL_ATTRIBUTES,
+  figure: GLOBAL_ATTRIBUTES,
+  footer: GLOBAL_ATTRIBUTES,
+  form: [
+    ...GLOBAL_ATTRIBUTES,
+    'accept-charset',
+    'autocomplete',
+    'name',
+    'rel',
+    'action',
+    'enctype',
+    'method',
+    'novalidate',
+    'target',
+  ],
+  h1: GLOBAL_ATTRIBUTES,
+  h2: GLOBAL_ATTRIBUTES,
+  h3: GLOBAL_ATTRIBUTES,
+  h4: GLOBAL_ATTRIBUTES,
+  h5: GLOBAL_ATTRIBUTES,
+  h6: GLOBAL_ATTRIBUTES,
+  header: GLOBAL_ATTRIBUTES,
+  hr: GLOBAL_ATTRIBUTES,
+  i: GLOBAL_ATTRIBUTES,
+  img: [
+    ...GLOBAL_ATTRIBUTES,
+    'alt',
+    'src',
+    'srcset',
+    'width',
+    'height',
+    'sizes',
+    'referrerpolicy',
+    'loading',
+    'fetchpriority',
+    'ismap',
+    'decoding',
+    'crossorigin',
+  ],
+  input: [
+    ...GLOBAL_ATTRIBUTES,
+    // TODO: Adjust attribute list based on type value
+    'type',
+    'value', // all
+    'name', // all
+    'disabled', // almost all
+    'required', // almost all
+    'checked', // radio, checkbox
+    'autocomplete', // all
+    'dirname', // text, search
+    'form', // all
+    'formaction', // image, submit
+    'formenctype', // image, submit
+    'formmethod', // image, submit
+    'formnovalidate', // image, submit
+    'formtarget', // image, submit
+    'alt', // image
+    'src', // image
+    'list', // almost all
+    'max', // numeric types
+    'maxlength', // password, search, tel, text, url
+    'min', // numeric types
+    'minlength', // password, search, tel, text, url
+    'step', // numeric types
+    'capture', // file
+    'accept', // file
+    'multiple', // email, file
+    'pattern', // password, text, tel
+    'placeholder', // password, search, tel, text, url
+    'readonly', // almost all
+    'size', // email, password, tel, text, url
+  ],
+  kbd: GLOBAL_ATTRIBUTES,
+  label: [...GLOBAL_ATTRIBUTES, 'for'],
+  legend: GLOBAL_ATTRIBUTES,
+  li: [...GLOBAL_ATTRIBUTES, 'value', 'type'],
+  main: GLOBAL_ATTRIBUTES,
+  map: [...GLOBAL_ATTRIBUTES, 'name'],
+  mark: GLOBAL_ATTRIBUTES,
+  menu: GLOBAL_ATTRIBUTES,
+  menuitem: GLOBAL_ATTRIBUTES,
+  meter: [
+    ...GLOBAL_ATTRIBUTES,
+    'value',
+    'min',
+    'max',
+    'low',
+    'high',
+    'optimum',
+  ],
+  nav: GLOBAL_ATTRIBUTES,
+  noscript: GLOBAL_ATTRIBUTES,
+  ol: [...GLOBAL_ATTRIBUTES, 'reversed', 'start', 'type'],
+  optgroup: GLOBAL_ATTRIBUTES,
+  option: GLOBAL_ATTRIBUTES,
+  output: GLOBAL_ATTRIBUTES,
+  p: GLOBAL_ATTRIBUTES,
+  picture: GLOBAL_ATTRIBUTES,
+  pre: GLOBAL_ATTRIBUTES,
+  progress: [...GLOBAL_ATTRIBUTES, 'max', 'value'],
+  q: [...GLOBAL_ATTRIBUTES, 'cite'],
+  rp: GLOBAL_ATTRIBUTES,
+  rt: GLOBAL_ATTRIBUTES,
+  rtc: GLOBAL_ATTRIBUTES,
+  ruby: GLOBAL_ATTRIBUTES,
+  s: GLOBAL_ATTRIBUTES,
+  samp: GLOBAL_ATTRIBUTES,
+  section: GLOBAL_ATTRIBUTES,
+  set: [
+    ...GLOBAL_ATTRIBUTES,
+    'attributeName',
+    'to',
+    'begin',
+    'dur',
+    'end',
+    'min',
+    'max',
+    'restart',
+    'repeatCount',
+    'repeatDur',
+    'fill',
+  ],
+  slot: [...GLOBAL_ATTRIBUTES, 'name'],
+  small: GLOBAL_ATTRIBUTES,
+  source: [
+    ...GLOBAL_ATTRIBUTES,
+    'type',
+    'src',
+    'srcset',
+    'width',
+    'height',
+    'sizes',
+    'media',
+  ],
+  span: GLOBAL_ATTRIBUTES,
+  strong: GLOBAL_ATTRIBUTES,
+  sub: GLOBAL_ATTRIBUTES,
+  sup: GLOBAL_ATTRIBUTES,
+  table: GLOBAL_ATTRIBUTES,
+  tbody: GLOBAL_ATTRIBUTES,
+  td: [...GLOBAL_ATTRIBUTES, 'colspan', 'headers', 'rowspan'],
+  template: GLOBAL_ATTRIBUTES,
+  textarea: [
+    ...GLOBAL_ATTRIBUTES,
+    'autocomplete',
+    'autofocus',
+    'cols',
+    'disabled',
+    'form',
+    'maxlength',
+    'minlength',
+    'name',
+    'placeholder',
+    'readonly',
+    'required',
+    'rows',
+    'spellcheck',
+    'wrap',
+  ],
+  tfoot: GLOBAL_ATTRIBUTES,
+  th: GLOBAL_ATTRIBUTES,
+  thead: GLOBAL_ATTRIBUTES,
+  time: [...GLOBAL_ATTRIBUTES, 'datetime'],
+  tr: GLOBAL_ATTRIBUTES,
+  track: [...GLOBAL_ATTRIBUTES, 'default', 'kind', 'label', 'src', 'srclang'],
+  u: GLOBAL_ATTRIBUTES,
+  ul: GLOBAL_ATTRIBUTES,
+  var: GLOBAL_ATTRIBUTES,
+  video: [
+    ...GLOBAL_ATTRIBUTES,
+    'src',
+    'width',
+    'height',
+    'autoplay',
+    'loop',
+    'muted',
+    'playsinline',
+    'poster',
+    'preload',
+    'autopictureinpicture',
+    'disabledpictureinpicture',
+    'disabledremoteplayback',
+    'controls',
+    'constrolslist',
+    'crossorigin',
+  ],
+  wbr: GLOBAL_ATTRIBUTES,
+  svg: [
+    ...GLOBAL_ATTRIBUTES,
+    'viewBox',
+    'width',
+    'height',
+    'fill-rule',
+    'fill-opacity',
+    'clip-path',
+    'clip-rule',
+    'version',
+    'xmlns',
+    'preserveAspectRatio',
+  ],
+  circle: [...GLOBAL_ATTRIBUTES, 'cx', 'cy', 'r', 'stroke'],
+  ellipse: [
+    ...GLOBAL_ATTRIBUTES,
+    'cx',
+    'cy',
+    'rx',
+    'ry',
+    'pathLength',
+    'stroke',
+  ],
+  rect: [
+    ...GLOBAL_ATTRIBUTES,
+    'width',
+    'height',
+    'x',
+    'y',
+    'rx',
+    'ry',
+    'stroke',
+  ],
+  line: [...GLOBAL_ATTRIBUTES, 'x1', 'y1', 'x2', 'y2', 'stroke'],
+  mask: [
+    ...GLOBAL_ATTRIBUTES,
+    'width',
+    'height',
+    'x',
+    'y',
+    'maskUnits',
+    'maskContentUnits',
+  ],
+  path: [...GLOBAL_ATTRIBUTES, 'd', 'stroke'],
+  pattern: [
+    ...GLOBAL_ATTRIBUTES,
+    'width',
+    'height',
+    'patternContentUnits',
+    'patternTransform',
+    'patternUnits',
+    'preserveAspectRatio',
+    'viewBox',
+    'x',
+    'y',
+    'xlink:href',
+  ],
+  polyline: [...GLOBAL_ATTRIBUTES, ...SVG_PRESENTATION_ATTRIBUTES, 'points'],
+  polygon: [
+    ...GLOBAL_ATTRIBUTES,
+    ...SVG_PRESENTATION_ATTRIBUTES,
+    'points',
+    'pathLength',
+  ],
+  stop: [...GLOBAL_ATTRIBUTES, 'offset', 'stop-color', 'stop-opacity'],
+  symbol: [
+    ...GLOBAL_ATTRIBUTES,
+    'width',
+    'height',
+    'viewBox',
+    'x',
+    'y',
+    'refX',
+    'refY',
+  ],
+  use: [...GLOBAL_ATTRIBUTES, 'href', 'x', 'y', 'clip-path'],
+  defs: [...GLOBAL_ATTRIBUTES],
+  g: [...GLOBAL_ATTRIBUTES],
+  filter: [
+    ...GLOBAL_ATTRIBUTES,
+    'x',
+    'y',
+    'width',
+    'height',
+    'filterUnits',
+    'primitiveUnits',
+  ],
+}
diff --git a/packages/gui/src/data/elements.ts b/packages/gui/src/data/elements.ts
index b6312b28..86ba9f9e 100644
--- a/packages/gui/src/data/elements.ts
+++ b/packages/gui/src/data/elements.ts
@@ -2,6 +2,9 @@ export const elements = [
   'a',
   'abbr',
   'address',
+  'animate',
+  'animateMotion',
+  'animateTransform',
   'area',
   'article',
   'aside',
@@ -16,14 +19,18 @@ export const elements = [
   'button',
   'canvas',
   'caption',
+  'circle',
   'cite',
+  'clipPath',
   'code',
   'col',
   'colgroup',
   'data',
   'datalist',
   'dd',
+  'defs',
   'del',
+  'desc',
   'details',
   'dfn',
   'dialog',
@@ -32,6 +39,22 @@ export const elements = [
   'dt',
   'em',
   'embed',
+  'feBlend',
+  'feColorMatrix',
+  'feComponentTransfer',
+  'feComposite',
+  'feConvolveMatrix',
+  'feDiffuseLighting',
+  'feDisplacementMap',
+  'feDropShadow',
+  'feFlood',
+  'feGaussianBlur',
+  'feImage',
+  'feMerge',
+  'feMorphology',
+  'feOffset',
+  'feSpecularLighting',
+  'feTile',
   'fieldset',
   'figcaption',
   'figure',
@@ -61,6 +84,8 @@ export const elements = [
   'main',
   'map',
   'mark',
+  'marker',
+  'mask',
   'math',
   'menu',
   'menuitem',
@@ -75,6 +100,7 @@ export const elements = [
   'output',
   'p',
   'param',
+  'pattern',
   'picture',
   'pre',
   'progress',
@@ -89,21 +115,27 @@ export const elements = [
   'script',
   'section',
   'select',
+  'set',
   'slot',
   'small',
   'source',
   'span',
+  'stop',
   'strong',
   'style',
   'sub',
   'summary',
   'sup',
   'svg',
+  'switch',
+  'symbol',
   'table',
   'tbody',
   'td',
   'template',
+  'text',
   'textarea',
+  'textPath',
   'tfoot',
   'th',
   'thead',
@@ -113,6 +145,7 @@ export const elements = [
   'track',
   'u',
   'ul',
+  'use',
   'var',
   'video',
   'wbr',
diff --git a/packages/gui/src/data/properties.ts b/packages/gui/src/data/properties.ts
index ce6390c5..0216be7f 100644
--- a/packages/gui/src/data/properties.ts
+++ b/packages/gui/src/data/properties.ts
@@ -1,149 +1,150 @@
 import { ComponentType } from 'react'
-import BoxShadowPicker from '../components/inputs/BoxShadow/field'
-import { stringifyBoxShadow } from '../components/inputs/BoxShadow/stringify'
-import EasingFunctionPicker from '../components/inputs/EasingFunction/picker'
-import { stringifyEasingFunction } from '../components/inputs/EasingFunction/stringify'
-import FilterPicker from '../components/inputs/Filter/field'
-import { stringifyFilter } from '../components/inputs/Filter/stringify'
-import TextShadowPicker from '../components/inputs/TextShadow/field'
 import { FontFamily } from '../components/inputs/FontFamily'
-import { stringifyTextShadow } from '../components/inputs/TextShadow/stringify'
-import TransformPicker from '../components/inputs/Transform/field'
-import { stringifyTransform } from '../components/inputs/Transform/stringify'
 import {
   AbsoluteLengthUnits,
   FontRelativeLengthUnits,
   ViewportPercentageLengthUnits,
   PercentageLengthUnits,
 } from '../types/css'
-import { ANIMATABLE_PROPERTIES } from './animatable'
-import {
-  stringifyTextDecoration,
-  TextDecorationInput,
-  textDecorationLines,
-  textDecorationStyles,
-} from '../components/inputs/TextDecoration'
 import { UnitSteps } from '../lib'
-import ImageSourcePicker from '../components/inputs/ImageSource/field'
-import { stringifyImageSource } from '../components/inputs/ImageSource/stringify'
 import { allProperties } from './css-properties'
-import { camelCase, uniqBy } from 'lodash-es'
-import { positiveRanges, UnitRanges } from './ranges'
-import TransitionInput from '../components/inputs/Transition/field'
-import { stringifyTransitionList } from '../components/inputs/Transition/stringify'
-import BackgroundInput from '../components/inputs/Background/field'
-import { stringifyBackgroundList } from '../components/inputs/Background/stringify'
-import MaskInput from '../components/inputs/Mask/field'
-import { stringifyMaskList } from '../components/inputs/Mask/stringify'
-import AnimationInput from '../components/inputs/Animation/field'
-import { stringifyAnimationList } from '../components/inputs/Animation/stringify'
-import {
-  stringifyStrokeDasharray,
-  StrokeDasharrayInput,
-} from '../components/inputs/StrokeDasharray'
-import TrackSizeListInput from '../components/inputs/TrackSize/field'
-import { stringifyTrackSizeList } from '../components/inputs/TrackSize/stringify'
-import GridTrackListInput from '../components/inputs/GridTrack/field'
-import { stringifyGridTrackList } from '../components/inputs/GridTrack/stringify'
-import { BgSizeInput, stringifyBgSize } from '../components/inputs/BgSizeInput'
-import {
-  stringifyTransformOrigin,
-  TransformOriginInput,
-} from '../components/inputs/TransformOrigin'
-import { GridLineInput, stringifyGridLine } from '../components/inputs/GridLine'
-import {
-  ScrollSnapAlignInput,
-  stringifyScrollSnapAlign,
-} from '../components/inputs/ScrollSnapAlign'
-import {
-  BorderSpacingInput,
-  stringifyBorderSpacing,
-} from '../components/inputs/BorderSpacing'
-import { ClipPathInput, stringifyClipPath } from '../components/inputs/ClipPath'
-import {
-  ShapeOutsideInput,
-  stringifyShapeOutside,
-} from '../components/inputs/ShapeOutside'
-import { NumberPercentageInput } from '../components/inputs/NumberPercentageInput'
-import {
-  OffsetPathInput,
-  stringifyOffsetPath,
-} from '../components/inputs/OffsetPath'
-import { AngleInput } from '../components/inputs/AngleInput'
+import { camelCase, compact, mapValues, uniqBy } from 'lodash-es'
+import { UnitRanges } from './ranges'
 import { EditorPropsWithLabel } from '../types/editor'
-import { DEFAULT_ANIMATION } from '../components/inputs/Animation/types'
-import { DEFAULT_TRANSITION } from '../components/inputs/Transition/types'
-import { DEFAULT_BOX_SHADOW } from '../components/inputs/BoxShadow/types'
-import { DEFAULT_TEXT_SHADOW } from '../components/inputs/TextShadow/types'
+
+import * as animationProperties from '../components/schemas/animation'
+import * as aspectRatioProperties from '../components/schemas/aspect-ratio'
+import * as backgroundProperties from '../components/schemas/background'
+import * as borderProperties from '../components/schemas/border'
+import * as borderRadiusProperties from '../components/schemas/border-radius'
+import * as borderImageProperties from '../components/schemas/border-image'
+import { borderSpacing } from '../components/schemas/border-spacing'
+import { boxShadow } from '../components/schemas/box-shadow'
+import { clipPath } from '../components/schemas/clip-path'
+import * as columnProperties from '../components/schemas/columns'
+import * as columnRuleProperties from '../components/schemas/column-rule'
+import { content } from '../components/schemas/content'
+import { filter } from '../components/schemas/filter'
+import * as flexProperties from '../components/schemas/flex'
+import * as gapProperties from '../components/schemas/gap'
+import * as gridProperties from '../components/schemas/grid'
+import * as gridAreaProperties from '../components/schemas/grid-area'
+import * as insetProperties from '../components/schemas/inset'
+import * as listStyleProperties from '../components/schemas/list-style'
+import * as marginProperties from '../components/schemas/margin'
+import * as maskProperties from '../components/schemas/mask'
+import * as maskBorderProperties from '../components/schemas/mask-border'
+import * as objectProperties from '../components/schemas/object-position'
+import * as offsetProperties from '../components/schemas/offset'
+import * as outlineProperties from '../components/schemas/outline'
+import * as overflowProperties from '../components/schemas/overflow'
+import * as overscrollProperties from '../components/schemas/overscroll'
+import * as paddingProperties from '../components/schemas/padding'
+import * as perspectiveProperties from '../components/schemas/perspective'
+import * as placeProperties from '../components/schemas/place'
+import * as scrollMarginProperties from '../components/schemas/scroll-margin'
+import * as scrollPaddingProperties from '../components/schemas/scroll-padding'
+import { scrollSnapAlign } from '../components/schemas/scroll-snap-align'
+import * as shapeOutsideProperties from '../components/schemas/shape-outside'
+import * as strokeProperties from '../components/schemas/stroke'
+import * as textDecorationProperties from '../components/schemas/text-decoration'
+import * as textEmphasisProperties from '../components/schemas/text-emphasis'
+import { textShadow } from '../components/schemas/text-shadow'
+import * as transformProperties from '../components/schemas/transform'
+import * as transitionProperties from '../components/schemas/transition'
+import {
+  integer,
+  keyword,
+  length,
+  number,
+  percentage,
+  string,
+} from '../components/schemas/primitives'
+import { DataTypeSchema } from '../components/schemas/types'
+import { joinSchemas } from '../components/schemas/joinSchemas'
+import { themeRecord, themeScale } from '../components/schemas/theme'
+import { color } from '../components/schemas/color'
+import { angle } from '../components/schemas/angle'
+import { time } from '../components/schemas/time'
+import { topLevel } from '../components/schemas/topLevel'
+import { stringifyFontFamily } from '../lib/stringify'
+import { quotes } from '../components/schemas/quotes'
 
 type PropertyData = {
-  type: string | ComponentType<EditorPropsWithLabel<any>>
+  input: PrimitiveType | ComponentType<EditorPropsWithLabel<any>>
   percentage?: boolean
   number?: boolean
   keywords?: readonly string[]
   range?: UnitRanges
   defaultValue?: any
-  stringify?: (value: any) => string
   dependantProperties?: string[]
   steps?: UnitSteps
-  label?: string
-  responsive?: boolean
-  dimensions?: number
+  themeProperty?: string
 }
 
-export const properties: Record<string, PropertyData> = {
+// Map of primitive schemas
+const primitiveMap = {
+  color: color,
+  number: number,
+  length: length,
+  angle: angle,
+  time: time,
+  percentage: percentage,
+  keyword: keyword,
+  integer: integer,
+  string: string,
+  none: (items: any) => {
+    return {}
+  },
+}
+type PrimitiveType = keyof typeof primitiveMap
+
+function themeSchema(property: string) {
+  if (['lineHeights', 'letterSpacings'].includes(property)) {
+    return themeRecord(property)
+  }
+  return themeScale(property)
+}
+
+function normalizeSchema(propertyData: PropertyData): DataTypeSchema<any> {
+  const { input, keywords, themeProperty } = propertyData
+  if (typeof input === 'string') {
+    if (input === 'keyword') {
+      return keyword(keywords!, propertyData)
+    } else if (input === 'none') {
+      return {
+        type: 'none',
+        defaultValue: null,
+        validate: (() => true) as any,
+        stringify: (value) => String(value),
+      }
+    } else {
+      // TODO: Figure out how to make this use Ranges rather than UnitRanges
+      // so there's proper support for `range: 'nonnegative'`
+      // @ts-ignore
+      let schema = primitiveMap[input](propertyData) as any
+      return joinSchemas(
+        compact([
+          schema,
+          keywords && keyword(keywords),
+          themeProperty && themeSchema(themeProperty),
+        ]),
+        { defaultValue: propertyData.defaultValue }
+      )
+    }
+  }
+  return propertyData as any
+}
+
+export const rawProperties: Record<string, any> = {
   accentColor: {
-    type: 'color',
+    input: 'color',
     defaultValue: 'tomato',
     keywords: ['auto', 'currentcolor', 'transparent'],
   },
-  alignContent: {
-    type: 'keyword',
-    responsive: true,
-    keywords: [
-      'center',
-      'start',
-      'end',
-      'flex-start',
-      'flex-end',
-      'normal',
-      'baseline',
-      'first baseline',
-      'last baseline',
-      'space-between',
-      'space-around',
-      'space-evenly',
-      'stretch',
-      'safe center',
-      'unsafe center',
-    ],
-    defaultValue: 'center',
-  },
-  alignItems: {
-    type: 'keyword',
-    responsive: true,
-    keywords: [
-      'center',
-      'start',
-      'end',
-      'flex-start',
-      'flex-end',
-      'normal',
-      'stretch',
-      'baseline',
-      'first baseline',
-      'last baseline',
-      'space-between',
-      'space-around',
-      'space-evenly',
-      'safe center',
-      'unsafe center',
-    ],
-    defaultValue: 'center',
-  },
   alignmentBaseline: {
     // Can be used with tspan tref altGlyph and textPath SVG elements
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'baseline',
       'text-bottom',
@@ -154,87 +155,15 @@ export const properties: Record<string, PropertyData> = {
       'mathematical',
       'text-top',
     ],
-    defaultValue: 'auto',
-  },
-  alignSelf: {
-    type: 'keyword',
-    responsive: true,
-    keywords: [
-      'auto',
-      'center',
-      'start',
-      'end',
-      'flex-start',
-      'flex-end',
-      'normal',
-      'stretch',
-      'baseline',
-      'first baseline',
-      'last baseline',
-      'space-between',
-      'space-around',
-      'space-evenly',
-      'safe center',
-      'unsafe center',
-    ],
-    defaultValue: 'auto',
   },
   all: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [],
+    defaultValue: 'unset',
   },
-  animation: {
-    type: AnimationInput,
-    stringify: stringifyAnimationList,
-    defaultValue: [DEFAULT_ANIMATION],
-  },
-  // TODO array of time values
-  animationDelay: {
-    type: 'time',
-    defaultValue: {
-      value: 0,
-      unit: 'ms',
-    },
-  },
-  animationDirection: {
-    type: 'keyword',
-    keywords: ['normal', 'reverse', 'alternate', 'alternate-reverse'],
-    defaultValue: 'normal',
-  },
-  animationDuration: {
-    type: 'time',
-    defaultValue: {
-      value: 500,
-      unit: 'ms',
-    },
-  },
-  animationFillMode: {
-    type: 'keyword',
-    keywords: ['none', 'forwards', 'backwards', 'both'],
-    defaultValue: 'forwards',
-  },
-  animationIterationCount: {
-    type: 'number',
-    keywords: ['infinite'],
-    range: { number: [0, Infinity] },
-    defaultValue: 'infinite',
-  },
-  animationPlayState: {
-    type: 'keyword',
-    keywords: ['running', 'paused'],
-    defaultValue: 'running',
-  },
-  // TODO this should be a combobox
-  animationProperty: {
-    type: 'keyword',
-    keywords: ANIMATABLE_PROPERTIES,
-  },
-  animationTimingFunction: {
-    type: EasingFunctionPicker,
-    stringify: stringifyEasingFunction,
-  },
+  ...animationProperties,
   appearance: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'none',
       'auto',
@@ -255,385 +184,56 @@ export const properties: Record<string, PropertyData> = {
     ],
     defaultValue: 'none',
   },
+  ...aspectRatioProperties,
   backfaceVisibility: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['visible', 'hidden'],
     defaultValue: 'hidden',
   },
-  // TODO: Add defaultValue
-  background: {
-    type: BackgroundInput,
-    stringify: stringifyBackgroundList,
-  },
-  backgroundAttachment: {
-    type: 'keyword',
-    keywords: ['scroll', 'fixed', 'local', 'local, scroll', 'scroll, local'],
-    defaultValue: 'scroll',
-  },
-  backgroundBlendMode: {
-    // TODO multiple properties
-    type: 'keyword',
-    keywords: [
-      'normal',
-      'multiply',
-      'screen',
-      'overlay',
-      'darken',
-      'lighten',
-      'color-dodge',
-      'color-burn',
-      'hard-light',
-      'soft-light',
-      'difference',
-      'exclusion',
-      'hue',
-      'saturation',
-      'color',
-      'luminosity',
-    ],
-    defaultValue: 'overlay',
-  },
+  ...backgroundProperties,
   backgroundColor: {
-    type: 'color',
+    input: 'color',
     defaultValue: 'tomato',
-    keywords: ['currentcolor', 'transparent'],
-  },
-  backgroundClip: {
-    type: 'keyword',
-    keywords: [
-      'border-box',
-      'padding-box',
-      'content-box',
-      'text',
-      'content-box, border-box',
-    ],
-    defaultValue: 'border-box',
-  },
-  // TODO: Add defaultValue
-  backgroundImage: {
-    type: ImageSourcePicker,
-    stringify: stringifyImageSource,
-    label: 'Background Image',
-  },
-  backgroundOrigin: {
-    type: 'keyword',
-    keywords: ['border-box', 'padding-box', 'content-box'],
-    defaultValue: 'border-box',
-  },
-  backgroundPosition: {
-    type: 'position',
   },
   backgroundPositionX: {
     // TODO: Add side relative values option and multiple values option
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['top', 'left', 'center'],
     defaultValue: 'center',
   },
   backgroundPositionY: {
     // TOO: Add side relative values option and multiple values option
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['top', 'center', 'bottom'],
     defaultValue: 'center',
   },
-  borderRadius: {
-    type: 'length',
-    percentage: true,
-    range: {
-      ...positiveRanges(),
-      [AbsoluteLengthUnits.Px]: [0, Infinity],
-      [FontRelativeLengthUnits.Em]: [0, 64],
-      [FontRelativeLengthUnits.Rem]: [0, 64],
-    },
-    defaultValue: {
-      value: 6,
-      unit: 'px',
-    },
-  },
-  backgroundRepeat: {
-    type: 'keyword',
-    keywords: [
-      'repeat-x',
-      'repeat-y',
-      'repeat',
-      'space',
-      'round',
-      'no-repeat',
-      'repeat space',
-      'repeat repeat',
-      'round space',
-      'no-repeat round',
-    ],
-    defaultValue: 'no-repeat',
-  },
-  backgroundSize: {
-    // TODO: Add two value syntax
-    type: 'length',
-    percentage: true,
-    keywords: ['cover', 'contain', 'auto'],
-    range: {
-      [AbsoluteLengthUnits.Px]: [0, 128],
-      [FontRelativeLengthUnits.Em]: [0, 8],
-      [FontRelativeLengthUnits.Rem]: [0, 8],
-      [PercentageLengthUnits.Pct]: [0.1, 100],
-    },
-    defaultValue: 'cover',
-  },
+  ...borderRadiusProperties,
   blockSize: {
     // TODO: Add fit-content function
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['max-content', 'min-content', 'auto'],
     defaultValue: 'auto',
+    themeProperty: 'sizes',
   },
   borderCollapse: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['collapse', 'separate'],
     defaultValue: 'collapse',
   },
-  // TODO: 4-positional arguments separated by spaces
-  borderImageOutset: {
-    type: 'length',
-    number: true,
-    defaultValue: {
-      value: 4,
-      unit: 'px',
-    },
-  },
-  // TODO: 2-positional arguments separated by spaces
-  borderImageRepeat: {
-    type: 'keyword',
-    keywords: ['stretch', 'repeat', 'round', 'space'],
-    defaultValue: 'stretch',
-  },
-  // TODO: Add defaultValue
-  borderImageSlice: {
-    type: 'length',
-    number: true,
-    percentage: true,
-    range: { number: [-1, 2000] },
-  },
-  // TODO this actually can only accept *one* image value, not an array
-  // TODO: Add defaultValue
-  borderImageSource: {
-    type: ImageSourcePicker,
-    stringify: stringifyImageSource,
-    label: 'Border Image',
-  },
-  // TODO this can accept multiple values
-  borderImageWidth: {
-    type: 'length',
-    keywords: ['thin', 'medium', 'thick'],
-    defaultValue: {
-      value: 4,
-      unit: 'px',
-    },
-  },
-  borderBottomColor: {
-    type: 'color',
-    keywords: ['currentcolor', 'transparent'],
-    defaultValue: '#6465ff',
-  },
-  borderBottomLeftRadius: {
-    type: 'multiLength',
-    dimensions: 2,
-  },
-  borderBottomRightRadius: {
-    type: 'multiLength',
-    dimensions: 2,
-  },
-  borderBottomStyle: {
-    type: 'keyword',
-    keywords: [
-      'none',
-      'hidden',
-      'dotted',
-      'dashed',
-      'solid',
-      'double',
-      'groove',
-      'ridge',
-      'inset',
-      'outset',
-    ],
-    defaultValue: 'solid',
-  },
-  borderBottomWidth: {
-    type: 'length',
-    keywords: ['thin', 'medium', 'thick'],
-    range: {
-      [AbsoluteLengthUnits.Px]: [0, 512],
-      [FontRelativeLengthUnits.Em]: [0, 16],
-      [FontRelativeLengthUnits.Rem]: [0, 16],
-      [ViewportPercentageLengthUnits.Vh]: [0, 100],
-      [ViewportPercentageLengthUnits.Vw]: [0, 100],
-      [PercentageLengthUnits.Pct]: [0.1, 100],
-    },
-    defaultValue: {
-      value: 2,
-      unit: 'px',
-    },
-  },
-  borderLeftColor: {
-    type: 'color',
-    keywords: ['currentcolor', 'transparent'],
-    defaultValue: '#6465ff',
-  },
-  borderLeftStyle: {
-    type: 'keyword',
-    keywords: [
-      'none',
-      'hidden',
-      'dotted',
-      'dashed',
-      'solid',
-      'double',
-      'groove',
-      'ridge',
-      'inset',
-      'outset',
-    ],
-    defaultValue: 'solid',
-  },
-  borderLeftWidth: {
-    type: 'length',
-    keywords: ['thin', 'medium', 'thick'],
-    range: {
-      [AbsoluteLengthUnits.Px]: [0, 512],
-      [FontRelativeLengthUnits.Em]: [0, 16],
-      [FontRelativeLengthUnits.Rem]: [0, 16],
-      [ViewportPercentageLengthUnits.Vh]: [0, 100],
-      [ViewportPercentageLengthUnits.Vw]: [0, 100],
-      [PercentageLengthUnits.Pct]: [0.1, 100],
-    },
-  },
-  borderRightColor: {
-    type: 'color',
-    keywords: ['currentcolor', 'transparent'],
-    defaultValue: '#6465ff',
-  },
-  borderRightStyle: {
-    type: 'keyword',
-    keywords: [
-      'none',
-      'hidden',
-      'dotted',
-      'dashed',
-      'solid',
-      'double',
-      'groove',
-      'ridge',
-      'inset',
-      'outset',
-    ],
-    defaultValue: 'solid',
-  },
-  borderRightWidth: {
-    type: 'length',
-    keywords: ['thin', 'medium', 'thick'],
-    range: {
-      [AbsoluteLengthUnits.Px]: [0, 512],
-      [FontRelativeLengthUnits.Em]: [0, 16],
-      [FontRelativeLengthUnits.Rem]: [0, 16],
-      [ViewportPercentageLengthUnits.Vh]: [0, 100],
-      [ViewportPercentageLengthUnits.Vw]: [0, 100],
-      [PercentageLengthUnits.Pct]: [0.1, 100],
-    },
-  },
-  borderTopColor: {
-    type: 'color',
-    keywords: ['currentcolor', 'transparent'],
-    defaultValue: '#6465ff',
-  },
-  borderTopLeftRadius: {
-    type: 'multiLength',
-    dimensions: 2,
-  },
-  borderTopRightRadius: {
-    type: 'multiLength',
-    dimensions: 2,
-  },
-  borderTopStyle: {
-    type: 'keyword',
-    keywords: [
-      'none',
-      'hidden',
-      'dotted',
-      'dashed',
-      'solid',
-      'double',
-      'groove',
-      'ridge',
-      'inset',
-      'outset',
-    ],
-    defaultValue: 'solid',
-  },
-  borderTopWidth: {
-    type: 'length',
-    keywords: ['thin', 'medium', 'thick'],
-    range: {
-      [AbsoluteLengthUnits.Px]: [0, 512],
-      [FontRelativeLengthUnits.Em]: [0, 16],
-      [FontRelativeLengthUnits.Rem]: [0, 16],
-      [ViewportPercentageLengthUnits.Vh]: [0, 100],
-      [ViewportPercentageLengthUnits.Vw]: [0, 100],
-      [PercentageLengthUnits.Pct]: [0.1, 100],
-    },
-  },
-  borderColor: {
-    type: 'color',
-    keywords: ['currentcolor', 'transparent'],
-  },
-  borderSpacing: {
-    type: BorderSpacingInput,
-    stringify: stringifyBorderSpacing,
-  },
-  borderStyle: {
-    type: 'keyword',
-    keywords: [
-      'none',
-      'hidden',
-      'dotted',
-      'dashed',
-      'solid',
-      'double',
-      'groove',
-      'ridge',
-      'inset',
-      'outset',
-    ],
-    defaultValue: 'solid',
-  },
-  borderWidth: {
-    type: 'length',
-    keywords: ['thin', 'medium', 'thick'],
-    range: {
-      [AbsoluteLengthUnits.Px]: [0, 512],
-      [FontRelativeLengthUnits.Em]: [0, 16],
-      [FontRelativeLengthUnits.Rem]: [0, 16],
-      [ViewportPercentageLengthUnits.Vh]: [0, 100],
-      [ViewportPercentageLengthUnits.Vw]: [0, 100],
-      [PercentageLengthUnits.Pct]: [0.1, 100],
-    },
-  },
-  bottom: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-  },
+  ...borderProperties,
+  ...borderImageProperties,
+  borderSpacing,
   boxDecorationBreak: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['slice', 'clone'],
+    defaultValue: 'initial',
   },
-  boxShadow: {
-    type: BoxShadowPicker,
-    stringify: stringifyBoxShadow,
-    defaultValue: [DEFAULT_BOX_SHADOW],
-  },
+  boxShadow,
   boxSnap: {
-    type: 'keyword',
+    input: 'keyword',
     defaultValue: 'none',
     keywords: [
       'none',
@@ -645,12 +245,12 @@ export const properties: Record<string, PropertyData> = {
     ],
   },
   boxSizing: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['border-box', 'content-box'],
     defaultValue: 'border-box',
   },
   breakAfter: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'auto',
       'avoid',
@@ -669,7 +269,7 @@ export const properties: Record<string, PropertyData> = {
     ],
   },
   breakBefore: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'auto',
       'avoid',
@@ -688,11 +288,11 @@ export const properties: Record<string, PropertyData> = {
     ],
   },
   breakInside: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'avoid', 'avoid-page', 'avoid-column', 'avoid-region'],
   },
   captionSide: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'top',
       'bottom',
@@ -701,110 +301,50 @@ export const properties: Record<string, PropertyData> = {
       'inline-start',
       'inline-end',
     ],
+    defaultValue: 'bottom',
   },
   caretColor: {
-    type: 'color',
+    input: 'color',
     defaultValue: '#6465ff',
-    keywords: ['currentcolor', 'transparent'],
   },
   clear: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['none', 'left', 'right', 'both', 'inline-start', 'inline-end'],
     defaultValue: 'both',
   },
-  clipPath: {
-    type: ClipPathInput,
-    stringify: stringifyClipPath,
-  },
+  clipPath,
   clipRule: {
     // SVG
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['nonzero', 'evenodd'],
+    defaultValue: 'nonzero',
   },
   color: {
-    type: 'color',
-    keywords: ['currentcolor', 'transparent'],
+    input: 'color',
     defaultValue: '#6465ff',
   },
   colorAdjust: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['economy', 'exact'],
     defaultValue: 'exact',
   },
   colorInterpolationFilters: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'sRGB', 'linearRGB'],
-    defaultValue: 'auto',
-  },
-  columnCount: {
-    type: 'integer',
-    keywords: ['auto'],
   },
+  ...columnProperties,
+  ...columnRuleProperties,
   columnFill: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'balance', 'balance-all'],
   },
-  columnGap: {
-    type: 'length',
-    percentage: true,
-    defaultValue: 0,
-    range: {
-      [AbsoluteLengthUnits.Px]: [0, 128],
-      [FontRelativeLengthUnits.Em]: [0, 8],
-      [FontRelativeLengthUnits.Rem]: [0, 8],
-      [ViewportPercentageLengthUnits.Vh]: [0, 100],
-      [ViewportPercentageLengthUnits.Vw]: [0, 100],
-      [PercentageLengthUnits.Pct]: [0.1, 100],
-    },
-    keywords: ['normal'],
-  },
-  columnRuleColor: {
-    type: 'color',
-    keywords: ['currentcolor', 'transparent'],
-  },
-  columnRuleStyle: {
-    type: 'keyword',
-    keywords: [
-      'none',
-      'hidden',
-      'dotted',
-      'dashed',
-      'solid',
-      'double',
-      'groove',
-      'ridge',
-      'inset',
-      'outset',
-    ],
-  },
-  columnRuleWidth: {
-    type: 'length',
-    percentage: true,
-    range: {
-      [AbsoluteLengthUnits.Px]: [0, 32],
-      [FontRelativeLengthUnits.Em]: [0, 2],
-      [FontRelativeLengthUnits.Rem]: [0, 2],
-      [PercentageLengthUnits.Pct]: [0.1, 100],
-    },
-    keywords: ['thin', 'medium', 'thick'],
-  },
   columnSpan: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['none', 'all'],
-  },
-  columnWidth: {
-    type: 'length',
-    percentage: true,
-    range: {
-      [AbsoluteLengthUnits.Px]: [0, 512],
-      [FontRelativeLengthUnits.Em]: [0, 16],
-      [FontRelativeLengthUnits.Rem]: [0, 16],
-      [PercentageLengthUnits.Pct]: [0.1, 100],
-    },
-    keywords: ['auto'],
+    defaultValue: 'all',
   },
   contain: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'none',
       'strict',
@@ -818,15 +358,17 @@ export const properties: Record<string, PropertyData> = {
       'size layout paint style',
       'size layout paint style content',
     ],
+    defaultValue: 'none',
   },
+  content,
   contentVisibility: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['visible', 'hidden', 'auto'],
     defaultValue: 'visible',
   },
   // TODO: Add url() for images to cursor
   cursor: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'auto',
       'default',
@@ -868,13 +410,13 @@ export const properties: Record<string, PropertyData> = {
     defaultValue: 'pointer',
   },
   direction: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['ltr', 'rtl'],
     defaultValue: 'ltr',
   },
   display: {
-    type: 'keyword',
-    responsive: true,
+    input: 'keyword',
+
     keywords: [
       'block',
       'inline',
@@ -901,7 +443,7 @@ export const properties: Record<string, PropertyData> = {
   },
   dominantBaseline: {
     // SVG
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'auto',
       'text-bottom',
@@ -915,45 +457,26 @@ export const properties: Record<string, PropertyData> = {
     ],
   },
   emptyCells: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['show', 'hide'],
+    defaultValue: 'hide',
   },
   fill: {
-    type: 'color',
+    input: 'color',
     keywords: ['none', 'context-fill', 'context-stroke'],
+    defaultValue: '#6465ff',
   },
-  filter: {
-    type: FilterPicker,
-    stringify: stringifyFilter,
-  },
-  flexBasis: {
-    type: 'length',
-    percentage: true,
-    range: {
-      [AbsoluteLengthUnits.Px]: [0, 512],
-      [FontRelativeLengthUnits.Em]: [0, 16],
-      [FontRelativeLengthUnits.Rem]: [0, 16],
-      [PercentageLengthUnits.Pct]: [0.1, 100],
-    },
-    keywords: [
-      'auto',
-      'fill',
-      'max-content',
-      'min-content',
-      'fit-content',
-      'content',
-    ],
-    defaultValue: 'auto',
-  },
+  filter,
+  ...flexProperties,
   flexDirection: {
-    type: 'keyword',
-    responsive: true,
+    input: 'keyword',
+
     keywords: ['row', 'row-reverse', 'column', 'column-reverse'],
     defaultValue: 'row',
   },
   flexFlow: {
-    type: 'keyword',
-    responsive: true,
+    input: 'keyword',
+
     keywords: [
       'row',
       'row-reverse',
@@ -973,35 +496,25 @@ export const properties: Record<string, PropertyData> = {
     ],
     defaultValue: 'row wrap',
   },
-  flexGrow: {
-    type: 'number',
-    range: { number: [0, Infinity] },
-    defaultValue: 0,
-  },
-  flexShrink: {
-    type: 'number',
-    range: { number: [0, Infinity] },
-    defaultValue: 1,
-  },
   flexWrap: {
-    type: 'keyword',
-    responsive: true,
+    input: 'keyword',
+
     keywords: ['nowrap', 'wrap', 'wrap-reverse'],
     defaultValue: 'wrap',
   },
   float: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['left', 'right', 'none', 'inline-start', 'inline-end'],
     defaultValue: 'none',
   },
   floatDefer: {
-    type: 'number',
+    input: 'number',
     keywords: ['last', 'none'],
     defaultValue: 'none',
     range: { number: [0, Infinity] },
   },
   floatOffset: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     range: {
       [AbsoluteLengthUnits.Px]: [0, 512],
@@ -1015,38 +528,37 @@ export const properties: Record<string, PropertyData> = {
     },
   },
   floatReference: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['inline', 'column', 'region', 'page'],
   },
   floodColor: {
-    type: 'color',
-    keywords: ['currentcolor', 'transparent'],
+    input: 'color',
     defaultValue: '#6465ff',
   },
   floodOpacity: {
-    type: 'percentage',
+    input: 'percentage',
     defaultValue: {
       value: 100,
       unit: '%',
     },
   },
   fontFamily: {
-    type: FontFamily,
-    dependantProperties: ['fontStyle', 'fontWeight', 'fontVariationSettings'],
+    input: FontFamily,
+    stringify: stringifyFontFamily,
+    dependantProperties: ['fontStyle', 'fontVariationSettings'],
     defaultValue: 'Inter',
+    themeProperty: 'fonts',
   },
   fontKerning: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'normal', 'none'],
-    defaultValue: 'auto',
   },
   fontOpticalSizing: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'none'],
-    defaultValue: 'auto',
   },
   fontSize: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     range: {
       [AbsoluteLengthUnits.Px]: [0, 512],
@@ -1074,9 +586,10 @@ export const properties: Record<string, PropertyData> = {
       value: 24,
       unit: 'px',
     },
+    themeProperty: 'fontSizes',
   },
   fontStretch: {
-    type: 'percentage',
+    input: 'percentage',
     keywords: [
       'ultra-condensed',
       'extra-condensed',
@@ -1092,7 +605,7 @@ export const properties: Record<string, PropertyData> = {
     defaultValue: 'ultra-condensed',
   },
   fontStyle: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'normal',
       'italic',
@@ -1104,7 +617,7 @@ export const properties: Record<string, PropertyData> = {
     ],
   },
   fontSynthesis: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'none',
       'weight',
@@ -1117,7 +630,7 @@ export const properties: Record<string, PropertyData> = {
     ],
   },
   fontVariantCaps: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'normal',
       'small-caps',
@@ -1129,7 +642,7 @@ export const properties: Record<string, PropertyData> = {
     ],
   },
   fontVariantEastAsian: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'normal',
       'ruby',
@@ -1144,7 +657,7 @@ export const properties: Record<string, PropertyData> = {
     ],
   },
   fontVariantLigatures: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'normal',
       'none',
@@ -1159,7 +672,7 @@ export const properties: Record<string, PropertyData> = {
     ],
   },
   fontVariantNumeric: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'normal',
       'ordinal',
@@ -1174,14 +687,14 @@ export const properties: Record<string, PropertyData> = {
     ],
   },
   fontVariantPosition: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['normal', 'sub', 'super'],
   },
   fontVariationSettings: {
-    type: 'none',
+    input: 'none',
   },
   fontWeight: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       '100',
       '200',
@@ -1198,54 +711,17 @@ export const properties: Record<string, PropertyData> = {
       'bolder',
     ],
     defaultValue: '400',
+    themeProperty: 'fontWeights',
   },
   forceColorAdjust: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'none'],
   },
-  // TODO two-valued syntax
-  gap: {
-    type: 'length',
-    percentage: true,
-  },
-  gridAutoColumns: {
-    type: TrackSizeListInput,
-    stringify: stringifyTrackSizeList,
-  },
-  gridAutoFlow: {
-    type: 'keyword',
-    keywords: ['row', 'column', 'dense', 'row dense', 'column dense'],
-  },
-  gridAutoRows: {
-    type: TrackSizeListInput,
-    stringify: stringifyTrackSizeList,
-  },
-  gridColumnStart: {
-    type: GridLineInput,
-    stringify: stringifyGridLine,
-  },
-  gridColumnEnd: {
-    type: GridLineInput,
-    stringify: stringifyGridLine,
-  },
-  gridRowStart: {
-    type: GridLineInput,
-    stringify: stringifyGridLine,
-  },
-  gridRowEnd: {
-    type: GridLineInput,
-    stringify: stringifyGridLine,
-  },
-  gridTemplateColumns: {
-    type: GridTrackListInput,
-    stringify: stringifyGridTrackList,
-  },
-  gridTemplateRows: {
-    type: GridTrackListInput,
-    stringify: stringifyGridTrackList,
-  },
+  ...gapProperties,
+  ...gridProperties,
+  ...gridAreaProperties,
   hangingPunctuation: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'none',
       'first',
@@ -1263,177 +739,82 @@ export const properties: Record<string, PropertyData> = {
     defaultValue: 'none',
   },
   height: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['max-content', 'min-content', 'auto'],
     range: {
       [AbsoluteLengthUnits.Px]: [0, 2160],
-      [FontRelativeLengthUnits.Em]: [0, 16],
-      [FontRelativeLengthUnits.Rem]: [0, 16],
+      [FontRelativeLengthUnits.Em]: [0, 256],
+      [FontRelativeLengthUnits.Rem]: [0, 256],
       [PercentageLengthUnits.Pct]: [0.1, 200],
       [ViewportPercentageLengthUnits.Vh]: [0, 100],
       [ViewportPercentageLengthUnits.Vw]: [0, 100],
       [ViewportPercentageLengthUnits.VMin]: [0, 100],
       [ViewportPercentageLengthUnits.VMax]: [0, 100],
     },
-    defaultValue: 'auto',
+    defaultValue: {
+      value: 100,
+      unit: '%',
+    },
+    themeProperty: 'sizes',
   },
   hyphenateCharacter: {
-    type: 'string',
+    input: 'string',
     keywords: ['auto'],
   },
   hyphens: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['none', 'manual', 'auto'],
     defaultValue: 'auto',
   },
   imageOrientation: {
     // NOTE: there is an <angle> version that is deprecated in favor of rotate()
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['none', 'from-image'],
     defaultValue: 'from-image',
   },
   initialLetterAlign: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'alphabetic', 'hanging', 'ideographic'],
-    defaultValue: 'auto',
   },
   initialLetterWrap: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['none', 'first', 'all', 'grid'],
     defaultValue: 'none',
   },
+  ...insetProperties,
   imageRendering: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'crisp-edges', 'pixelated'],
     defaultValue: 'auto',
   },
   isolation: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'isolate'],
   },
-  justifyContent: {
-    type: 'keyword',
-    responsive: true,
-    keywords: [
-      'start',
-      'center',
-      'end',
-      'space-between',
-      'space-around',
-      'space-evenly',
-      'flex-start',
-      'flex-end',
-      'left',
-      'right',
-      'normal',
-      'stretch',
-      'safe center',
-      'unsafe center',
-    ],
-    defaultValue: 'center',
-  },
-  justifyItems: {
-    type: 'keyword',
-    keywords: [
-      'normal',
-      'stretch',
-      'center',
-      'start',
-      'end',
-      'flex-start',
-      'flex-end',
-      'self-start',
-      'self-end',
-      'left',
-      'right',
-      'baseline',
-      'first baseline',
-      'last baseline',
-      'safe center',
-      'unsafe center',
-    ],
-    defaultValue: 'center',
-  },
-  justifySelf: {
-    type: 'keyword',
-    keywords: [
-      'normal',
-      'stretch',
-      'center',
-      'start',
-      'end',
-      'flex-start',
-      'flex-end',
-      'self-start',
-      'self-end',
-      'left',
-      'right',
-      'baseline',
-      'first baseline',
-      'last baseline',
-      'safe center',
-      'unsafe center',
-    ],
-    defaultValue: 'center',
-  },
-  left: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: {
-      value: 0,
-      unit: 'px',
-    },
-  },
   letterSpacing: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['normal'],
     defaultValue: 'normal',
+    themeProperty: 'letterSpacings',
   },
   lightingColor: {
-    type: 'color',
-    keywords: ['currentcolor', 'transparent'],
+    input: 'color',
   },
   lineBreak: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'loose', 'normal', 'strict', 'anywhere'],
     defaultValue: 'auto',
   },
-  listStyleImage: {
-    // TODO only accepts a single image
-    type: ImageSourcePicker,
-    stringify: stringifyImageSource,
-    label: 'List Style Image',
-  },
-  listStylePosition: {
-    type: 'keyword',
-    keywords: ['inside', 'outside'],
-    defaultValue: 'outside',
-  },
-  listStyleType: {
-    type: 'keyword',
-    keywords: [
-      'none',
-      'disc',
-      'circle',
-      'square',
-      'decimal',
-      'georgian',
-      'trad-chinese-informal',
-      'kannada',
-      'custom-counter-style',
-    ],
-    defaultValue: 'disc',
-  },
+  ...listStyleProperties,
   lineGrid: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['match-parent', 'create'],
   },
   lineHeight: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     number: true,
     range: { number: [0, 2] },
@@ -1443,282 +824,124 @@ export const properties: Record<string, PropertyData> = {
       value: 1.5,
       unit: 'number',
     },
+    themeProperty: 'lineHeights',
   },
   lineHeightStep: {
-    type: 'length',
-    percentage: true,
-  },
-  lineSnap: {
-    type: 'keyword',
-    keywords: ['none', 'baseline', 'contain'],
-    defaultValue: 'none',
-  },
-  margin: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: {
-      value: 0,
-      unit: 'px',
-    },
-  },
-  marginTop: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: {
-      value: 0,
-      unit: 'px',
-    },
-  },
-  marginLeft: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: {
-      value: 0,
-      unit: 'px',
-    },
-  },
-  marginBottom: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: {
-      value: 0,
-      unit: 'px',
-    },
-  },
-  marginRight: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: {
-      value: 0,
-      unit: 'px',
-    },
-  },
-  marqueeDirection: {
-    type: 'keyword',
-    keywords: ['forward', 'reverse'],
-    defaultValue: 'forward',
-  },
-  marqueeLoop: {
-    type: 'integer',
-    range: { number: [1, Infinity] },
-    defaultValue: 'infinite',
-  },
-  marqueeStyle: {
-    type: 'keyword',
-    keywords: ['scroll', 'slide', 'alternate'],
-    defaultValue: 'scroll',
-  },
-  marqueeSpeed: {
-    type: 'keyword',
-    keywords: ['slow', 'normal', 'fast'],
-    defaultValue: 'slow',
-  },
-  mask: {
-    type: MaskInput,
-    stringify: stringifyMaskList,
-  },
-  maskBorderMode: {
-    type: 'keyword',
-    keywords: ['luminance', 'alpha'],
-    defaultValue: 'luminance',
-  },
-  maskBorderSource: {
-    type: ImageSourcePicker,
-    stringify: stringifyImageSource,
-    label: 'Mask Border Source',
-  },
-  maskBorderSize: {
-    type: BgSizeInput,
-    stringify: stringifyBgSize,
-  },
-  maskBorderWidth: {
-    // TODO: add multiple sides (top, bottom, left, right)
-    type: 'length',
-    percentage: true,
-    number: true,
-    keywords: ['auto'],
-    defaultValue: {
-      value: 8,
-      unit: 'px',
-    },
-  },
-  maskBorderRepeat: {
-    type: 'keyword',
-    keywords: [
-      'stretch',
-      'repeat',
-      'round',
-      'space',
-      'round stretch',
-      'round repeat',
-      'round space',
-      'stretch repeat',
-      'stretch round',
-      'stretch space',
-      'repeat stretch',
-      'repeat round',
-      'repeat space',
-      'space stretch',
-      'space round',
-      'space repeat',
-    ],
-    defaultValue: 'stretch',
-  },
-  maskClip: {
-    type: 'keyword',
-    keywords: [
-      'content-box',
-      'padding-box',
-      'border-box',
-      'margin-box',
-      'fill-box',
-      'stroke-box',
-      'view-box',
-      'no-clip',
-    ],
-    defaultValue: 'border-box',
-  },
-  maskComposite: {
-    // TODO should be an array of values
-    type: 'keyword',
-    keywords: ['add', 'subtract', 'intersect', 'exclude'],
-    defaultValue: 'add',
+    input: 'length',
+    percentage: true,
   },
-  maskImage: {
-    type: ImageSourcePicker,
-    stringify: stringifyImageSource,
-    label: 'Mask Image',
+  lineSnap: {
+    input: 'keyword',
+    keywords: ['none', 'baseline', 'contain'],
+    defaultValue: 'none',
   },
-  maskMode: {
-    type: 'keyword',
-    keywords: [
-      'alpha',
-      'luminance',
-      'match-source',
-      'alpha, luminance',
-      'alpha, match-source',
-      'alpha, match-source, luminance',
-      'match-source, luminance',
-    ],
-    defaultValue: 'luminance',
+  ...marginProperties,
+  marqueeDirection: {
+    input: 'keyword',
+    keywords: ['forward', 'reverse'],
+    defaultValue: 'forward',
   },
-  maskOrigin: {
-    type: 'keyword',
-    keywords: [
-      'content-box',
-      'padding-box',
-      'border-box',
-      'margin-box',
-      'fill-box',
-      'stroke-box',
-      'view-box',
-      'padding-box, content-box',
-      'view-box, fill-box, border-box',
-    ],
-    defaultValue: 'border-box',
+  marqueeLoop: {
+    input: 'integer',
+    range: { number: [1, Infinity] },
+    defaultValue: 'infinite',
   },
-  maskPosition: { type: 'position' },
-  maskRepeat: {
-    type: 'keyword',
-    keywords: [
-      'repeat-x',
-      'repeat-y',
-      'repeat',
-      'space',
-      'round',
-      'no-repeat',
-      'repeat space',
-      'repeat repeat',
-      'round space',
-      'no-repeat round',
-    ],
-    defaultValue: 'no-repeat',
+  marqueeStyle: {
+    input: 'keyword',
+    keywords: ['scroll', 'slide', 'alternate'],
+    defaultValue: 'scroll',
   },
-  maskSize: {
-    type: BgSizeInput,
-    stringify: stringifyBgSize,
+  marqueeSpeed: {
+    input: 'keyword',
+    keywords: ['slow', 'normal', 'fast'],
+    defaultValue: 'slow',
   },
+  ...maskProperties,
+  ...maskBorderProperties,
   maskType: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['luminance', 'alpha'],
     defaultValue: 'alpha',
   },
   // TODO: add fit-content function
   maxBlockSize: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['none', 'max-content', 'min-content'],
+    themeProperty: 'sizes',
   },
   maxHeight: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['none', 'max-content', 'min-content', 'auto'],
     defaultValue: {
       value: 100,
       unit: '%',
     },
+    themeProperty: 'sizes',
   },
   maxInlineSize: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['none', 'max-content', 'min-content'],
+    themeProperty: 'sizes',
   },
   maxLines: {
-    type: 'number',
+    input: 'number',
     keywords: ['none'],
     range: { number: [0, 9999] },
   },
   // TODO: add fit-content function
   maxWidth: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['none', 'max-content', 'min-content', 'auto'],
     defaultValue: {
       value: 100,
       unit: '%',
     },
+    themeProperty: 'sizes',
   },
   minHeight: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['max-content', 'min-content', 'auto'],
     defaultValue: {
       value: 48,
       unit: 'px',
     },
+    themeProperty: 'sizes',
   },
   minBlockSize: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['max-content', 'min-content'],
     defaultValue: {
       value: 0,
       unit: 'px',
     },
+    themeProperty: 'sizes',
   },
   minInlineSize: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['max-content', 'min-content'],
     defaultValue: {
       value: 0,
       unit: 'px',
     },
+    themeProperty: 'sizes',
   },
   // TODO: add fit-content function
   minWidth: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['max-content', 'min-content', 'auto'],
     defaultValue: 'auto',
+    themeProperty: 'sizes',
   },
   mixBlendMode: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'normal',
       'multiply',
@@ -1739,36 +962,10 @@ export const properties: Record<string, PropertyData> = {
     ],
     defaultValue: 'overlay',
   },
-  offsetAnchor: {
-    type: 'position',
-    keywords: ['auto'], // TODO the keyword isn't being populated currently
-    defaultValue: 'auto',
-  },
-  offsetDistance: {
-    type: 'length',
-    percentage: true,
-    defaultValue: {
-      value: 0,
-      unit: 'px',
-    },
-  },
-  offsetPath: {
-    type: OffsetPathInput,
-    stringify: stringifyOffsetPath,
-  },
-  offsetRotate: {
-    type: AngleInput,
-  },
-  objectFit: {
-    type: 'keyword',
-    keywords: ['contain', 'cover', 'fill', 'none', 'scale-down'],
-    defaultValue: 'cover',
-  },
-  objectPosition: {
-    type: 'position',
-  },
+  ...objectProperties,
+  ...offsetProperties,
   opacity: {
-    type: 'percentage',
+    input: 'percentage',
     range: {
       [PercentageLengthUnits.Pct]: [0, 100],
     },
@@ -1778,209 +975,37 @@ export const properties: Record<string, PropertyData> = {
     },
   },
   order: {
-    type: 'integer',
+    input: 'integer',
     defaultValue: 0,
   },
   orphans: {
-    type: 'integer',
+    input: 'integer',
     range: { number: [1, 10] },
     defaultValue: 2,
   },
-  outlineColor: {
-    type: 'color',
-    keywords: ['invert'],
-    defaultValue: '#6465ff',
-  },
-  outlineOffset: {
-    type: 'length',
-    percentage: true,
-    defaultValue: {
-      value: 4,
-      unit: 'px',
-    },
-  },
-  outlineStyle: {
-    type: 'keyword',
-    keywords: [
-      'none',
-      'dotted',
-      'dashed',
-      'solid',
-      'double',
-      'groove',
-      'ridge',
-      'inset',
-      'outset',
-    ],
-    defaultValue: 'solid',
-  },
-  outlineWidth: {
-    type: 'length',
-    percentage: true,
-    keywords: ['thin', 'medium', 'thick'],
-    defaultValue: {
-      value: 2,
-      unit: 'px',
-    },
-  },
-  overflow: {
-    type: 'keyword',
-    keywords: ['visible', 'hidden', 'clip', 'scroll', 'auto', 'hidden visible'],
-    defaultValue: 'visible',
-  },
+  ...outlineProperties,
+  ...overflowProperties,
   overflowAnchor: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'none'],
     defaultValue: 'auto',
   },
-  overflowBlock: {
-    type: 'keyword',
-    keywords: ['visible', 'hidden', 'scroll', 'auto'],
-    defaultValue: 'auto',
-  },
   overflowClipMargin: {
     // TODO: Add ranges
-    type: 'length',
+    input: 'length',
     percentage: true,
   },
-  overflowInline: {
-    type: 'keyword',
-    keywords: ['visible', 'hidden', 'scroll', 'auto'],
-    defaultValue: 'auto',
-  },
   overflowWrap: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['normal', 'break-word', 'anywhere'],
     defaultValue: 'normal',
   },
-  overflowX: {
-    type: 'keyword',
-    keywords: ['visible', 'hidden', 'clip', 'scroll', 'auto'],
-    defaultValue: 'auto',
-  },
-  overflowY: {
-    type: 'keyword',
-    keywords: ['visible', 'hidden', 'clip', 'scroll', 'auto'],
-    defaultValue: 'auto',
-  },
-  overscrollBehavior: {
-    type: 'keyword',
-    keywords: ['auto', 'contain', 'none', 'auto contain'],
-    defaultValue: 'auto',
-  },
-  overscrollBehaviorBlock: {
-    type: 'keyword',
-    keywords: ['auto', 'contain', 'none'],
-    defaultValue: 'auto',
-  },
-  overscrollBehaviorInline: {
-    type: 'keyword',
-    keywords: ['auto', 'contain', 'none'],
-    defaultValue: 'auto',
-  },
-  overscrollBehaviorX: {
-    type: 'keyword',
-    keywords: ['auto', 'contain', 'none'],
-    defaultValue: 'auto',
-  },
-  overscrollBehaviorY: {
-    type: 'keyword',
-    keywords: ['auto', 'contain', 'none'],
-    defaultValue: 'auto',
-  },
-  padding: {
-    type: 'length',
-    percentage: true,
-    defaultValue: {
-      value: 0,
-      unit: 'px',
-    },
-  },
-  paddingTop: {
-    type: 'length',
-    percentage: true,
-    defaultValue: {
-      value: 0,
-      unit: 'px',
-    },
-  },
-  paddingLeft: {
-    type: 'length',
-    percentage: true,
-    defaultValue: {
-      value: 0,
-      unit: 'px',
-    },
-  },
-  paddingBottom: {
-    type: 'length',
-    percentage: true,
-    defaultValue: {
-      value: 0,
-      unit: 'px',
-    },
-  },
-  paddingRight: {
-    type: 'length',
-    percentage: true,
-    defaultValue: {
-      value: 0,
-      unit: 'px',
-    },
-  },
-  // TODO: Add defaultValue
-  perspective: {
-    type: 'length',
-    keywords: ['none'],
-  },
-  // TODO: Add defaultValue
-  perspectiveOrigin: {
-    type: 'position',
-  },
-  placeItems: {
-    type: 'keyword',
-    keywords: [
-      'center',
-      'normal start',
-      'center normal',
-      'start legacy',
-      'end normal',
-      'self-start legacy',
-      'self-end normal',
-      'flex-start legacy',
-      'flex-end normal',
-      'left legacy',
-      'right normal',
-      'baseline normal',
-      'first baseline legacy',
-      'last baseline normal',
-      'stretch legacy',
-    ],
-    defaultValue: 'center',
-  },
-  placeSelf: {
-    type: 'keyword',
-    keywords: [
-      'auto center',
-      'normal start',
-      'center normal',
-      'start auto',
-      'end normal',
-      'self-start auto',
-      'self-end normal',
-      'flex-start auto',
-      'flex-end normal',
-      'left auto',
-      'right normal',
-      'baseline normal',
-      'first baseline auto',
-      'last baseline normal',
-      'stretch auto',
-    ],
-    defaultValue: 'auto center',
-  },
+  ...overscrollProperties,
+  ...paddingProperties,
+  ...perspectiveProperties,
+  ...placeProperties,
   pointerEvents: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'auto',
       'none',
@@ -1997,159 +1022,66 @@ export const properties: Record<string, PropertyData> = {
     defaultValue: 'auto',
   },
   position: {
-    type: 'keyword',
-    keywords: ['static', 'relative', 'asbolsute', 'fixed', 'sticky'],
+    input: 'keyword',
+    keywords: ['static', 'relative', 'absolute', 'fixed', 'sticky'],
     defaultValue: 'static',
   },
   printColorAdjust: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['economy', 'exact'],
     defaultValue: 'exact',
   },
+  quotes,
   resize: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['none', 'both', 'horizontal', 'vertical', 'block', 'inline'],
     defaultValue: 'none',
   },
-  right: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: {
-      value: 0,
-      unit: 'px',
-    },
-  },
-  rowGap: {
-    type: 'length',
-    percentage: true,
-    range: {
-      [AbsoluteLengthUnits.Px]: [0, 128],
-      [FontRelativeLengthUnits.Em]: [0, 8],
-      [FontRelativeLengthUnits.Rem]: [0, 8],
-      [ViewportPercentageLengthUnits.Vh]: [0, 100],
-      [ViewportPercentageLengthUnits.Vw]: [0, 100],
-      [PercentageLengthUnits.Pct]: [0.1, 100],
-    },
-    defaultValue: {
-      value: 2,
-      unit: 'em',
-    },
-  },
   rubyAlign: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['start', 'center', 'space-between', 'space-around'],
     defaultValue: 'start',
   },
   rubyMerge: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['separate', 'merge', 'auto'],
     defaultValue: 'auto',
   },
   rubyPosition: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['over', 'under', 'inter-character', 'alternate'],
     defaultValue: 'alternate',
   },
   scrollBehavior: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'smooth'],
     defaultValue: 'auto',
   },
   scrollbarColor: {
-    type: 'color',
+    input: 'color',
     keywords: ['auto', 'currentcolor', 'transparent'],
     defaultValue: '#ff33cc',
   },
   scrollbarGutter: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'stable', 'stable both-edges'],
     defaultValue: 'auto',
   },
   scrollbarWidth: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'thin', 'none'],
     defaultValue: 'auto',
   },
-  // TODO positional syntax
-  scrollPadding: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: 'auto',
-  },
-  scrollPaddingBlock: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: 'auto',
-  },
-  scrollPaddingBlockEnd: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: 'auto',
-  },
-  scrollPaddingBlockStart: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: 'auto',
-  },
-  scrollPaddingBottom: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: 'auto',
-  },
-  scrollPaddingInline: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: 'auto',
-  },
-  scrollPaddingInlineEnd: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: 'auto',
-  },
-  scrollPaddingInlineStart: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: 'auto',
-  },
-  scrollPaddingLeft: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: 'auto',
-  },
-  scrollPaddingRight: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: 'auto',
-  },
-  scrollPaddingTop: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: 'auto',
-  },
-  // TODO: Add defaultValue
-  scrollSnapAlign: {
-    type: ScrollSnapAlignInput,
-    stringify: stringifyScrollSnapAlign,
-  },
+  ...scrollMarginProperties,
+  ...scrollPaddingProperties,
+  scrollSnapAlign,
   scrollSnapStop: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['normal', 'always'],
     defaultValue: 'normal',
   },
   scrollSnapType: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'none',
       'x',
@@ -2163,104 +1095,22 @@ export const properties: Record<string, PropertyData> = {
     ],
     defaultValue: 'none',
   },
-  // TODO: Add defaultValue
-  shapeImageThreshold: {
-    type: NumberPercentageInput,
-  },
-  shapeMargin: {
-    type: 'length',
-    percentage: true,
-    defaultValue: {
-      value: 0,
-      unit: 'px',
-    },
-  },
-  // TODO: Add defaultValue
-  shapeOutside: {
-    type: ShapeOutsideInput,
-    stringify: stringifyShapeOutside,
-  },
-  stroke: {
-    // TODO URL <color> values
-    type: 'color',
-    keywords: ['none', 'context-fill', 'context-stroke'],
-    defaultValue: '#6465ff',
-  },
-  strokeAlignment: {
-    type: 'keyword',
-    keywords: ['center', 'inner', 'outer'],
-    defaultValue: 'center',
-  },
-  // TODO: Add defaultValue
-  strokeDasharray: {
-    type: StrokeDasharrayInput,
-    stringify: stringifyStrokeDasharray,
-  },
-  strokeDashadjust: {
-    type: 'keyword',
-    keywords: ['none', 'stretch', 'compress', 'dashed', 'gaps'],
-    defaultValue: 'none',
-  },
-  strokeDashcorner: {
-    type: 'length',
-    percentage: true,
-    keywords: ['none'],
-    defaultValue: 'none',
-  },
-  strokeDashoffset: {
-    type: 'number',
-    percentage: true,
-    number: true, // for SVG, raw numbers are counted as pixels
-    range: { number: [-9999, 9999] }, // Todo add %
-    defaultValue: 0,
-  },
-  strokeLinejoin: {
-    type: 'keyword',
-    keywords: ['miter', 'miter-clip', 'round', 'bevel', 'arcs'],
-    defaultValue: 'miter',
-  },
-  strokeLinecap: {
-    type: 'keyword',
-    keywords: ['butt', 'round', 'square'],
-    defaultValue: 'round',
-  },
-  strokeMiterlimit: {
-    type: 'number',
-    defaultValue: 4,
-    range: { number: [1, 256] }, // 256 seems reasonable but can adjust +/- if needed
-  },
-  strokeOpacity: {
-    type: 'percentage',
-    defaultValue: 1,
-  },
-  strokeWidth: {
-    type: 'length',
-    percentage: true,
-    range: {
-      [AbsoluteLengthUnits.Px]: [0, 512],
-      [FontRelativeLengthUnits.Em]: [0, 16],
-      [FontRelativeLengthUnits.Rem]: [0, 16],
-      [PercentageLengthUnits.Pct]: [0.1, 400],
-    },
-    defaultValue: {
-      value: 4,
-      unit: 'px',
-    },
-  },
-  // TODO: Add defaultValue
+  ...shapeOutsideProperties,
+  ...strokeProperties,
   tabSize: {
-    type: 'length',
+    input: 'length',
     number: true,
+    defaultValue: 1,
   },
   tableLayout: {
     // TODO: Only have control appear when display: table
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'fixed'],
     defaultValue: 'auto',
   },
   textAlign: {
-    type: 'keyword',
-    responsive: true,
+    input: 'keyword',
+
     keywords: [
       'start',
       'end',
@@ -2274,7 +1124,7 @@ export const properties: Record<string, PropertyData> = {
     defaultValue: 'start',
   },
   textAlignAll: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'start',
       'end',
@@ -2287,7 +1137,7 @@ export const properties: Record<string, PropertyData> = {
     defaultValue: 'start',
   },
   textAlignLast: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'auto',
       'start',
@@ -2303,37 +1153,13 @@ export const properties: Record<string, PropertyData> = {
   },
   textCombineUpright: {
     // note: there is a special `digits <number>` syntax that is only supported by Internet Explorer??
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['none', 'all'],
     defaultValue: 'none',
   },
-  // TODO: Add defaultValue
-  textDecoration: {
-    type: TextDecorationInput,
-    stringify: stringifyTextDecoration,
-  },
-  textDecorationColor: {
-    type: 'color',
-    keywords: ['currentcolor', 'transparent'],
-    defaultValue: '#6465ff',
-  },
-  textDecorationLine: {
-    type: 'keyword',
-    keywords: textDecorationLines,
-    defaultValue: 'underline',
-  },
-  textDecorationThickness: {
-    //TODO: Add value ranges
-    type: 'length',
-    percentage: true,
-    keywords: ['auto', 'from-font'],
-    defaultValue: {
-      value: 4,
-      unit: 'px',
-    },
-  },
+  ...textDecorationProperties,
   textDecorationSkip: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'none',
       'objects',
@@ -2347,49 +1173,13 @@ export const properties: Record<string, PropertyData> = {
     defaultValue: 'none',
   },
   textDecorationSkipInk: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['none', 'auto', 'all'],
     defaultValue: 'auto',
   },
-  textDecorationStyle: {
-    type: 'keyword',
-    keywords: textDecorationStyles,
-    defaultValue: 'solid',
-  },
-  textEmphasisColor: {
-    type: 'color',
-    keywords: ['currentcolor', 'transparent'],
-    defaultValue: '#6465ff',
-  },
-  textEmphasisPosition: {
-    type: 'keyword',
-    keywords: [
-      'over right',
-      'over left',
-      'under right',
-      'under left',
-      'left over',
-      'right under',
-      'left under',
-    ],
-    defaultValue: 'over right',
-  },
-  textEmphasisStyle: {
-    type: 'string',
-    keywords: [
-      'filled',
-      'open',
-      'dot',
-      'circle',
-      'double-circle',
-      'triangle',
-      'filled sesame',
-      'open sesame',
-    ],
-    defaultValue: 'none',
-  },
+  ...textEmphasisProperties,
   textIndent: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     defaultValue: {
       value: 1,
@@ -2397,12 +1187,12 @@ export const properties: Record<string, PropertyData> = {
     },
   },
   textJustify: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['none', 'auto', 'inter-word', 'inter-character', 'distribute'],
     defaultValue: 'auto',
   },
   textOrientation: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'mixed',
       'upright',
@@ -2415,27 +1205,23 @@ export const properties: Record<string, PropertyData> = {
   textOverflow: {
     // TODO firefox supports two-value syntax and there are more experimental values
     // but these are supported by all browsers
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['clip', 'ellipsis'],
     defaultValue: 'clip',
   },
   textRendering: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'auto',
       'optimizeSpeed',
-      'optimzeLegibility',
+      'optimizeLegibility',
       'geometricPrecision',
     ],
     defaultValue: 'optimizeLegibility',
   },
-  textShadow: {
-    type: TextShadowPicker,
-    stringify: stringifyTextShadow,
-    defaultValue: [DEFAULT_TEXT_SHADOW],
-  },
+  textShadow,
   textSpaceCollapse: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'collapse',
       'discard',
@@ -2446,7 +1232,7 @@ export const properties: Record<string, PropertyData> = {
     defaultValue: 'collapse',
   },
   textTransform: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'none',
       'capitalize',
@@ -2455,29 +1241,19 @@ export const properties: Record<string, PropertyData> = {
       'full-width',
       'full-size-kana',
     ],
-    defaultValue: 'none',
   },
   textUnderlinePosition: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'under', 'left', 'right', 'under left', 'right under'],
     defaultValue: 'under',
   },
   textWrap: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['wrap', 'nowrap', 'balance', 'stable', 'pretty'],
     defaultValue: 'wrap',
   },
-  top: {
-    type: 'length',
-    percentage: true,
-    keywords: ['auto'],
-    defaultValue: {
-      value: 0,
-      unit: 'px',
-    },
-  },
   touchAction: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'auto',
       'none',
@@ -2492,12 +1268,9 @@ export const properties: Record<string, PropertyData> = {
     ],
     defaultValue: 'auto',
   },
-  transform: {
-    type: TransformPicker,
-    stringify: stringifyTransform,
-  },
+  ...transformProperties,
   transformBox: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'content-box',
       'border-box',
@@ -2507,30 +1280,13 @@ export const properties: Record<string, PropertyData> = {
     ],
     defaultValue: 'view-box',
   },
-  transformOrigin: {
-    type: TransformOriginInput,
-    stringify: stringifyTransformOrigin,
-  },
   transformStyle: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['flat', 'preserve-3d'],
   },
-  transition: {
-    type: TransitionInput,
-    stringify: stringifyTransitionList,
-    defaultValue: [DEFAULT_TRANSITION],
-  },
-  // TODO array of time values
-  transitionDelay: { type: 'time' },
-  transitionDuration: { type: 'time' },
-  // TODO this should be a combobox
-  transitionProperty: { type: 'keyword', keywords: ANIMATABLE_PROPERTIES },
-  transitionTimingFunction: {
-    type: EasingFunctionPicker,
-    stringify: stringifyEasingFunction,
-  },
+  ...transitionProperties,
   unicodeBidi: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'normal',
       'embed',
@@ -2542,12 +1298,12 @@ export const properties: Record<string, PropertyData> = {
     defaultValue: 'normal',
   },
   userSelect: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['none', 'auto', 'text', 'contain', 'all'],
     defaultValue: 'auto',
   },
   verticalAlign: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     range: {
       [AbsoluteLengthUnits.Px]: [0, 512],
@@ -2568,12 +1324,12 @@ export const properties: Record<string, PropertyData> = {
     defaultValue: 'baseline',
   },
   visibility: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['visible', 'hidden', 'collapse'],
     defaultValue: 'visible',
   },
   whiteSpace: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: [
       'normal',
       'nowrap',
@@ -2585,18 +1341,18 @@ export const properties: Record<string, PropertyData> = {
     defaultValue: 'normal',
   },
   widows: {
-    type: 'integer',
+    input: 'integer',
     range: { number: [1, Infinity] },
     defaultValue: 2,
   },
   width: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['max-content', 'min-content', 'auto'],
     range: {
       [AbsoluteLengthUnits.Px]: [0, 3840],
-      [FontRelativeLengthUnits.Em]: [0, 16],
-      [FontRelativeLengthUnits.Rem]: [0, 16],
+      [FontRelativeLengthUnits.Em]: [0, 256],
+      [FontRelativeLengthUnits.Rem]: [0, 256],
       [PercentageLengthUnits.Pct]: [0.1, 200],
       [ViewportPercentageLengthUnits.Vh]: [0, 100],
       [ViewportPercentageLengthUnits.Vw]: [0, 100],
@@ -2604,60 +1360,66 @@ export const properties: Record<string, PropertyData> = {
       [ViewportPercentageLengthUnits.VMax]: [0, 100],
     },
     defaultValue: { value: 100, unit: '%' },
+    themeProperty: 'sizes',
   },
   wordBreak: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['normal', 'break-all', 'keep-all', 'break-word'],
     defaultValue: 'normal',
   },
   wordSpacing: {
-    type: 'length',
+    input: 'length',
     percentage: true,
     keywords: ['normal'],
     defaultValue: 'normal',
   },
   wordWrap: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['normal', 'break-word', 'anywhere'],
     defaultValue: 'normal',
   },
   wrapAfter: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'avoid', 'avoid-line', 'aboid-flex', 'line', 'flex'],
     defaultValue: 'auto',
   },
   wrapBefore: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'avoid', 'avoid-line', 'aboid-flex', 'line', 'flex'],
     defaultValue: 'auto',
   },
   wrapFlow: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'both', 'start', 'end', 'minimum', 'maximum', 'clear'],
     defaultValue: 'auto',
   },
   wrapInside: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['auto', 'avoid'],
     defaultValue: 'auto',
   },
   wrapThrough: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['none', 'wrap'],
     defaultValue: 'none',
   },
   writingMode: {
-    type: 'keyword',
+    input: 'keyword',
     keywords: ['horizontal-tb', 'vertical-rl', 'vertical-lr'],
     defaultValue: 'horizontal-tb',
   },
   zIndex: {
-    type: 'integer',
+    input: 'integer',
     keywords: ['auto'],
-    defaultValue: 'auto',
+    defaultValue: 1,
   },
 }
 
+export const properties: Record<string, DataTypeSchema<any>> = mapValues(
+  rawProperties,
+  (value, property) => topLevel(normalizeSchema(value), property)
+) as any
+
 export const supportedProperties = uniqBy(allProperties, 'property').filter(
   (property) => {
     return properties[camelCase(property.property)]
diff --git a/packages/gui/src/data/pseudo-classes.ts b/packages/gui/src/data/pseudo-classes.ts
index 51b827f3..9b488b63 100644
--- a/packages/gui/src/data/pseudo-classes.ts
+++ b/packages/gui/src/data/pseudo-classes.ts
@@ -43,15 +43,25 @@ export const inputPseudoClasses = [
 export const treeStructuralPseudoClasses = [
   'root',
   'empty',
-  'nth-child',
-  'nth-last-child',
   'first-child',
   'last-child',
   'only-child',
-  'nth-of-type',
-  'nth-last-of-type',
   'only-of-type',
 ] as const
+export const selectorFunctionPseudoClasses = [
+  'dir',
+  'has',
+  'host-context',
+  'host',
+  'is',
+  'lang',
+  'not',
+  'nth-child',
+  'nth-last-child',
+  'nth-last-of-type',
+  'nth-of-type',
+  'where',
+]
 export const pseudoClasses = [
   ...linquisticPseudoClasses,
   ...locationPseudoClasses,
@@ -60,4 +70,5 @@ export const pseudoClasses = [
   ...resourceStatePseudoClasses,
   ...inputPseudoClasses,
   ...treeStructuralPseudoClasses,
+  ...selectorFunctionPseudoClasses,
 ] as const
diff --git a/packages/gui/src/data/pseudo-elements.ts b/packages/gui/src/data/pseudo-elements.ts
index 9027fc73..196ddbc8 100644
--- a/packages/gui/src/data/pseudo-elements.ts
+++ b/packages/gui/src/data/pseudo-elements.ts
@@ -1,3 +1,5 @@
+export const selectorFunctionPseudoElements = ['part', 'slotted']
+
 export const pseudoElements = [
   'after',
   'backdrop',
@@ -13,4 +15,5 @@ export const pseudoElements = [
   'selection',
   'spelling-error',
   'target-text',
+  ...selectorFunctionPseudoElements,
 ] as const
diff --git a/packages/gui/src/data/selector-functions.ts b/packages/gui/src/data/selector-functions.ts
new file mode 100644
index 00000000..a7e48f00
--- /dev/null
+++ b/packages/gui/src/data/selector-functions.ts
@@ -0,0 +1,7 @@
+import { selectorFunctionPseudoClasses } from './pseudo-classes'
+import { selectorFunctionPseudoElements } from './pseudo-elements'
+
+export const selectorFunctions = [
+  ...selectorFunctionPseudoClasses,
+  ...selectorFunctionPseudoElements,
+] as const
diff --git a/packages/gui/src/index.ts b/packages/gui/src/index.ts
index 05c0e16e..210c21bd 100644
--- a/packages/gui/src/index.ts
+++ b/packages/gui/src/index.ts
@@ -3,7 +3,6 @@ export { styled } from './components/Styled'
 export { RenderElement } from './components/RenderElement'
 
 export { Number as NumberInput } from './components/primitives'
-export { LengthInput } from './components/inputs/LengthInput'
 export { SelectInput } from './components/inputs/SelectInput'
 export { TextInput } from './components/inputs/TextInput'
 export { DimensionInput } from './components/inputs/Dimension'
@@ -19,13 +18,15 @@ export {
 } from './components/providers/ThemeContext'
 export { EditorProvider } from './components/providers/EditorContext'
 export { Layout } from './components/ui/Layout'
-export { HtmlEditor } from './components/html/editor'
+export { HtmlEditor } from './components/html/Editor'
 export { HtmlRenderer } from './components/html/Renderer'
+export { HtmlEditorProvider } from './components/html/Provider'
 
 export { theme } from './components/ui/theme'
 export { supportedProperties, unsupportedProperties } from './data/properties'
 export { allProperties } from './data/css-properties'
 export { mdnProperties } from './data/mdn-properties'
+export { parseStyles } from './components/Editor/Controls'
 
 export * from './lib'
 export * from './types/theme'
diff --git a/packages/gui/src/lib/array.ts b/packages/gui/src/lib/array.ts
new file mode 100644
index 00000000..dc5a4c9e
--- /dev/null
+++ b/packages/gui/src/lib/array.ts
@@ -0,0 +1,41 @@
+// Return a new array with the given indices flipped
+export function flip<T>(array: T[], i1: number, i2: number) {
+  const copy = [...array]
+  copy[i1] = array[i2]
+  copy[i2] = array[i1]
+  return copy
+}
+
+// Return a new array with the value at the index removed
+export function remove<T>(array: T[], index: number) {
+  const copy = [...array]
+  copy.splice(index, 1)
+  return copy
+}
+
+export function insert<T>(array: T[], index: number, newValue: T) {
+  const copy = [...array]
+  copy.splice(index, 0, newValue)
+  return copy
+}
+
+export function replace<T>(array: T[], index: number, newValue: T) {
+  const copy = [...array]
+  copy.splice(index, 1, newValue)
+  return copy
+}
+
+export function split<T>(array: T[], separator: T) {
+  const result = []
+  let current: T[] = []
+  for (const item of array) {
+    if (item === separator) {
+      result.push(current)
+      current = []
+    } else {
+      current.push(item)
+    }
+  }
+  result.push(current)
+  return result
+}
diff --git a/packages/gui/src/lib/codegen/astro.ts b/packages/gui/src/lib/codegen/astro.ts
new file mode 100644
index 00000000..ab6bdc70
--- /dev/null
+++ b/packages/gui/src/lib/codegen/astro.ts
@@ -0,0 +1,40 @@
+import { toH } from 'hast-to-hyperscript'
+import { HtmlNode } from '../../components/html/types'
+import { editorSchemaToHast } from '../transformers/editor-schema-to-hast'
+import { toCSSObject } from './to-css-object'
+import { stringifyHastNode } from './stringify-hast-node-as-html'
+import { toReactProps } from './to-react-props'
+import { format } from './format'
+import { CodegenOptions } from './types'
+import { Theme } from '../../types/theme'
+import { inlineStylesToStyleElement } from '../transformers/inline-styles-to-style-element'
+
+const h = (theme: Theme) => (tagName: string, props: any, children?: any[]) => {
+  const newProps = toReactProps(props)
+
+  if (newProps.style) {
+    const style = newProps.style
+    delete newProps.style
+    newProps.style = toCSSObject(style, theme)
+  }
+
+  return { tagName, props: newProps, children }
+}
+
+export const astro = async (node: HtmlNode, options: CodegenOptions) => {
+  const root = editorSchemaToHast(node, { addSlotTagSyntax: true })
+  const { node: htmlNode, styles } = inlineStylesToStyleElement(root, options)
+  // @ts-ignore
+  const markup = stringifyHastNode(toH(h(options?.theme), htmlNode))
+
+  const htmlString = `${markup}
+${styles.trim() ? `\n<style>${styles}</style>\n` : ''}`
+  const formattedHtmlString = await format('html', htmlString)
+
+  const output = `---
+---
+
+${formattedHtmlString}`
+
+  return format('html', output)
+}
diff --git a/packages/gui/src/lib/codegen/css.ts b/packages/gui/src/lib/codegen/css.ts
new file mode 100644
index 00000000..a4e2d987
--- /dev/null
+++ b/packages/gui/src/lib/codegen/css.ts
@@ -0,0 +1,98 @@
+import { defaultBreakpoints } from '@theme-ui/css'
+import { isEmpty } from 'lodash-es'
+import { HtmlNode } from '../../components/html/types'
+import { Styles } from '../../types/css'
+import { Theme } from '../../types/theme'
+import { stringifyUnit } from '../stringify'
+import { isNestedSelectorWithSyntax } from '../util'
+import { extractStyles } from './extract-styles'
+import { stringifyCSSObject } from './stringify-css-object'
+import { toCSSObject } from './to-css-object'
+
+const DEFAULT_BREAKPOINTS_COUNT = defaultBreakpoints.length
+
+const getStylesByBreakpoint = (obj: any, breakpoint: number): any => {
+  return Object.entries(obj).reduce((acc: any, curr: [string, any]) => {
+    const [key, value] = curr
+    if (isNestedSelectorWithSyntax(key)) {
+      const stylesByBreakpoint = getStylesByBreakpoint(value, breakpoint)
+
+      if (isEmpty(stylesByBreakpoint)) {
+        return acc
+      }
+
+      return {
+        ...acc,
+        [key]: getStylesByBreakpoint(value, breakpoint),
+      }
+    }
+
+    if (breakpoint === 0) {
+      return {
+        ...acc,
+        [key]: Array.isArray(value) ? value[0] : value,
+      }
+    }
+
+    if (Array.isArray(value)) {
+      return {
+        ...acc,
+        [key]: value[breakpoint] ?? null,
+      }
+    }
+
+    return acc
+  }, {})
+}
+
+const partitionStylesByBreakpoints = (
+  obj: any,
+  breakpointsCount: number
+): any[] => {
+  const byBreakpoints: any[] = Array(breakpointsCount).fill(null)
+
+  return byBreakpoints.map((_: any, index: number) => {
+    return getStylesByBreakpoint(obj, index)
+  })
+}
+
+type CSSOptions = {
+  selector?: string
+  theme?: Theme
+}
+export const css = (
+  styles: Styles,
+  { theme, selector = '.css-gui-element' }: CSSOptions = {}
+) => {
+  const breakpointsCount =
+    theme?.breakpoints?.length || DEFAULT_BREAKPOINTS_COUNT
+  const obj: any = toCSSObject(styles, theme)
+  const byBreakpoints = partitionStylesByBreakpoints(obj, breakpointsCount)
+
+  const cssStrings = byBreakpoints
+    .map((styles: any, index: number) => {
+      if (!styles || isEmpty(styles)) {
+        return null
+      }
+
+      const stylesForBreakpoint = stringifyCSSObject(styles, selector)
+
+      if (index === 0) {
+        return stylesForBreakpoint
+      } else if (isEmpty(stylesForBreakpoint)) {
+        return null
+      } else {
+        const themeBreakpoint = theme?.breakpoints?.[index]
+        const breakpoint = themeBreakpoint
+          ? stringifyUnit(themeBreakpoint)
+          : defaultBreakpoints[index]
+
+        return `@media screen (min-width: ${breakpoint}) {
+          ${stylesForBreakpoint}
+        }`
+      }
+    })
+    .filter(Boolean)
+
+  return cssStrings.join('\n\n')
+}
diff --git a/packages/gui/src/lib/codegen/emotion.ts b/packages/gui/src/lib/codegen/emotion.ts
new file mode 100644
index 00000000..6e1cbcbf
--- /dev/null
+++ b/packages/gui/src/lib/codegen/emotion.ts
@@ -0,0 +1,39 @@
+import { toH } from 'hast-to-hyperscript'
+import { HtmlNode } from '../../components/html/types'
+import { editorSchemaToHast } from '../transformers/editor-schema-to-hast'
+import { toCSSObject } from './to-css-object'
+import { stringifyHastNode } from './stringify-hast-node-as-jsx'
+import { toReactProps } from './to-react-props'
+import { format } from './format'
+import { getPropSyntax } from './util'
+import { Theme } from '../../types/theme'
+import { CodegenOptions } from './types'
+
+const h =
+  (theme?: Theme) => (tagName: string, props: any, children?: any[]) => {
+    const newProps = toReactProps(props)
+
+    if (newProps.style) {
+      const style = newProps.style
+      delete newProps.style
+      newProps.css = toCSSObject(style, theme)
+    }
+
+    return { tagName, props: newProps, children }
+  }
+
+export const emotion = async (node: HtmlNode, options: CodegenOptions) => {
+  const root = editorSchemaToHast(node, { addSlotSyntax: true })
+  const functionBody = stringifyHastNode(toH(h(options?.theme), root))
+
+  const output = `
+  /** @jsxImportSource @emotion/react */
+  export default function Component(${getPropSyntax(node)}) {
+    return (
+      ${functionBody}
+    )
+  }
+  `
+
+  return format('js', output)
+}
diff --git a/packages/gui/src/lib/codegen/enhance-sfc.ts b/packages/gui/src/lib/codegen/enhance-sfc.ts
new file mode 100644
index 00000000..60c27ab0
--- /dev/null
+++ b/packages/gui/src/lib/codegen/enhance-sfc.ts
@@ -0,0 +1,46 @@
+import { toH } from 'hast-to-hyperscript'
+import { HtmlNode } from '../../components/html/types'
+import { editorSchemaToHast } from '../transformers/editor-schema-to-hast'
+import { toCSSObject } from './to-css-object'
+import { stringifyHastNode } from './stringify-hast-node-as-html'
+import { toReactProps } from './to-react-props'
+import { format } from './format'
+import { getAttrSyntax } from './util'
+import { CodegenOptions } from './types'
+import { Theme } from '../../types/theme'
+import { inlineStylesToStyleElement } from '../transformers/inline-styles-to-style-element'
+
+const h = (theme: Theme) => (tagName: string, props: any, children?: any[]) => {
+  const newProps = toReactProps(props)
+
+  if (newProps.style) {
+    const style = newProps.style
+    delete newProps.style
+    newProps.style = toCSSObject(style, theme)
+  }
+
+  return { tagName, props: newProps, children }
+}
+
+export const enhanceSFC = async (node: HtmlNode, options: CodegenOptions) => {
+  const root = editorSchemaToHast(node, { addSlotTagSyntax: true })
+  const { node: htmlNode, styles } = inlineStylesToStyleElement(root, options)
+  // @ts-ignore
+  const functionBody = stringifyHastNode(toH(h(options?.theme), htmlNode))
+
+  const htmlString = `
+        <style>${styles}</style>
+      ${functionBody}`
+  const formattedHtmlString = await format('html', htmlString)
+
+  const output = `
+  export default function Component({ html, state = {} }) {
+    ${getAttrSyntax(node)}
+    return html\`
+      ${formattedHtmlString}
+    \`
+  }
+  `
+
+  return format('js', output)
+}
diff --git a/packages/gui/src/lib/codegen/extract-styles.ts b/packages/gui/src/lib/codegen/extract-styles.ts
new file mode 100644
index 00000000..5c77a826
--- /dev/null
+++ b/packages/gui/src/lib/codegen/extract-styles.ts
@@ -0,0 +1,34 @@
+import { unified } from 'unified'
+import rehypeParse from 'rehype-parse'
+import rehypeStringify from 'rehype-stringify'
+import { remove } from 'unist-util-remove'
+import { visit } from 'unist-util-visit'
+
+type Extracted = {
+  styles: string
+  html: string
+}
+export const extractStyles = async (html: string): Promise<Extracted> => {
+  const styles: string[] = []
+  const processed = String(
+    await unified()
+      .use(rehypeParse, { fragment: true })
+      .use(rehypeStringify)
+      .use(() => (tree) => {
+        visit(tree, 'element', (node: any) => {
+          if (node.tagName !== 'style') {
+            return
+          }
+
+          styles.push(node.children[0].value)
+        })
+      })
+      .use(() => (tree) => {
+        // @ts-ignore
+        remove(tree, 'element', (node: any) => node.tagName === 'style')
+      })
+      .processSync(html)
+  )
+
+  return { styles: styles.join('\n'), html: processed }
+}
diff --git a/packages/gui/src/lib/codegen/format.ts b/packages/gui/src/lib/codegen/format.ts
new file mode 100644
index 00000000..badef4be
--- /dev/null
+++ b/packages/gui/src/lib/codegen/format.ts
@@ -0,0 +1,16 @@
+export const format = async (language: string, src: string) => {
+  try {
+    const res = await fetch('https://components.ai/api/format', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ format: language, src }),
+    })
+
+    const { src: output } = await res.json()
+    return output
+  } catch (e) {
+    return src
+  }
+}
diff --git a/packages/gui/src/lib/codegen/html.ts b/packages/gui/src/lib/codegen/html.ts
new file mode 100644
index 00000000..10dd729c
--- /dev/null
+++ b/packages/gui/src/lib/codegen/html.ts
@@ -0,0 +1,27 @@
+import { unified } from 'unified'
+import rehypeStringify from 'rehype-stringify'
+import { HtmlNode } from '../../components/html/types'
+import { editorSchemaToHast } from '../transformers/editor-schema-to-hast'
+import { format } from './format'
+import { CodegenOptions } from './types'
+
+export const unstyledHtml = async (node: HtmlNode) => {
+  const root = editorSchemaToHast(node, {
+    removeStyleProperty: true,
+  })
+  const output = unified().use(rehypeStringify).stringify(root)
+  return format('html', output)
+}
+
+export const html = async (node: HtmlNode, { theme }: CodegenOptions = {}) => {
+  const res = await fetch('https://components.ai/api/v1/gui/export/html', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ html: node, theme }),
+  })
+
+  const html = await res.text()
+  return html
+}
diff --git a/packages/gui/src/lib/codegen/index.ts b/packages/gui/src/lib/codegen/index.ts
index 0aafb28f..b43ef9a9 100644
--- a/packages/gui/src/lib/codegen/index.ts
+++ b/packages/gui/src/lib/codegen/index.ts
@@ -1,96 +1,9 @@
-import { defaultBreakpoints } from '@theme-ui/css'
-import { isEmpty } from 'lodash-es'
-import { Styles } from '../../types/css'
-import { Theme } from '../../types/theme'
-import { stringifyUnit } from '../stringify'
-import { isNestedSelector, isNestedSelectorWithSyntax } from '../util'
-import { stringifyCSSObject } from './stringify-css-object'
-import { toCSSObject } from './to-css-object'
-
-const DEFAULT_BREAKPOINTS_COUNT = 3
-
-const getStylesByBreakpoint = (obj: any, breakpoint: number): any => {
-  return Object.entries(obj).reduce((acc: any, curr: [string, any]) => {
-    const [key, value] = curr
-    if (isNestedSelectorWithSyntax(key)) {
-      const stylesByBreakpoint = getStylesByBreakpoint(value, breakpoint)
-
-      if (isEmpty(stylesByBreakpoint)) {
-        return acc
-      }
-
-      return {
-        ...acc,
-        [key]: getStylesByBreakpoint(value, breakpoint),
-      }
-    }
-
-    if (breakpoint === 0) {
-      return {
-        ...acc,
-        [key]: Array.isArray(value) ? value[0] : value,
-      }
-    }
-
-    if (Array.isArray(value)) {
-      return {
-        ...acc,
-        [key]: value[breakpoint] ?? null,
-      }
-    }
-
-    return acc
-  }, {})
-}
-
-const partitionStylesByBreakpoints = (
-  obj: any,
-  breakpointsCount: number
-): any[] => {
-  const byBreakpoints: any[] = Array(breakpointsCount).fill(null)
-
-  return byBreakpoints.map((_: any, index: number) => {
-    return getStylesByBreakpoint(obj, index)
-  })
-}
-
-type CSSOptions = {
-  selector?: string
-  theme?: Theme
-}
-export const css = (
-  styles: Styles,
-  { theme, selector = '.css-gui-element' }: CSSOptions = {}
-) => {
-  const breakpointsCount =
-    theme?.breakpoints?.length || DEFAULT_BREAKPOINTS_COUNT
-  const obj: any = toCSSObject(styles)
-  const byBreakpoints = partitionStylesByBreakpoints(obj, breakpointsCount)
-
-  const cssStrings = byBreakpoints
-    .map((styles: any, index: number) => {
-      if (!styles || isEmpty(styles)) {
-        return null
-      }
-
-      const stylesForBreakpoint = stringifyCSSObject(styles, selector)
-
-      if (index === 0) {
-        return stylesForBreakpoint
-      } else if (isEmpty(stylesForBreakpoint)) {
-        return null
-      } else {
-        const themeBreakpoint = theme?.breakpoints?.[index]
-        const breakpoint = themeBreakpoint
-          ? stringifyUnit(themeBreakpoint)
-          : defaultBreakpoints[index]
-
-        return `@media screen (min-width: ${breakpoint}) {
-          ${stylesForBreakpoint}
-        }`
-      }
-    })
-    .filter(Boolean)
-
-  return cssStrings.join('\n\n')
-}
+export * from './css'
+export * from './html'
+export * from './react'
+export * from './vue'
+export * from './theme-ui'
+export * from './emotion'
+export * from './styled-jsx'
+export * from './enhance-sfc'
+export * from './astro'
diff --git a/packages/gui/src/lib/codegen/react.ts b/packages/gui/src/lib/codegen/react.ts
new file mode 100644
index 00000000..c7aebd5e
--- /dev/null
+++ b/packages/gui/src/lib/codegen/react.ts
@@ -0,0 +1,43 @@
+import { toH } from 'hast-to-hyperscript'
+import { HtmlNode } from '../../components/html/types'
+import { extractStyles } from './extract-styles'
+import { format } from './format'
+import { html as toHtml } from './html'
+import { stringifyHastNode } from './stringify-hast-node-as-jsx'
+import { toReactProps } from './to-react-props'
+import { CodegenOptions } from './types'
+
+const h = (tagName: string, props: any, children?: any[]) => {
+  const newProps = toReactProps(props)
+
+  return { tagName, props: newProps, children }
+}
+
+export const react = async (
+  node: HtmlNode,
+  options: CodegenOptions
+): Promise<string> => {
+  const html = await toHtml(node, options)
+  const { styles } = await extractStyles(html)
+  const jsx = stringifyHastNode(toH(h, node as any))
+
+  const output = `
+    import * as React from 'react'
+
+    export default function Component() {
+      return (
+        <>
+          <Styles />${jsx}
+        </>
+      )
+    }
+
+    function Styles() {
+      return <style dangerouslySetInnerHTML={{ __html: STYLES }} />
+    }
+
+    const STYLES = \`${styles}\`
+`
+
+  return format('js', output)
+}
diff --git a/packages/gui/src/lib/codegen/stringify-css-object.ts b/packages/gui/src/lib/codegen/stringify-css-object.ts
index a7e0f63b..95d3076f 100644
--- a/packages/gui/src/lib/codegen/stringify-css-object.ts
+++ b/packages/gui/src/lib/codegen/stringify-css-object.ts
@@ -1,9 +1,9 @@
 import { isEmpty, kebabCase } from 'lodash-es'
 import { isCSSClass } from '../classes'
 import { isElement } from '../elements'
-import { isPseudo } from '../pseudos'
+import { addPseudoSyntax, hasPseudoSyntax, isPseudo } from '../pseudos'
 
-const objectToDecls = (obj: any): string => {
+export const objectToDecls = (obj: any): string => {
   return Object.entries(obj)
     .map(([key, value]: [string, any]) => {
       return `  ${kebabCase(key)}: ${value};`
@@ -28,8 +28,8 @@ const flattenCSSObject = (
         ...flattenedGroups,
       }
       return
-    } else if (isPseudo(key)) {
-      const fullSelector = selector + key
+    } else if (isPseudo(key) || hasPseudoSyntax(key)) {
+      const fullSelector = selector + addPseudoSyntax(key)
       const flattenedGroups = flattenCSSObject(value, fullSelector)
       cssDeclGroups = {
         ...cssDeclGroups,
diff --git a/packages/gui/src/lib/codegen/stringify-hast-node-as-html.ts b/packages/gui/src/lib/codegen/stringify-hast-node-as-html.ts
new file mode 100644
index 00000000..5163f078
--- /dev/null
+++ b/packages/gui/src/lib/codegen/stringify-hast-node-as-html.ts
@@ -0,0 +1,70 @@
+import { isArray, isNumber, isObject, kebabCase } from 'lodash-es'
+import escapeHtml from 'escape-html'
+import { isElement, isVoidElement } from '../elements'
+import { getSlots, isSlot } from './util'
+import { objectToDecls } from './stringify-css-object'
+
+// TODO: This can, and should, be done at the AST level in the future
+export const formatTagName = (node: any) => {
+  if (isElement(node.tagName)) {
+    return node.tagName
+  }
+
+  const formatted = kebabCase(node.tagName)
+
+  if (!formatted.includes('-')) {
+    return `my-${formatted}`
+  }
+
+  return formatted
+}
+
+export const stringifyHastNode = (node: any) => {
+  if (typeof node === 'string' || isSlot(node)) {
+    return node.value || node
+  }
+
+  if (node.props.style) {
+    node.props.style = objectToDecls(node.props.style).trim()
+  }
+
+  if (isVoidElement(node.tagName)) {
+    return `<${formatTagName(node)} ${stringifyProps(node.props)} />`
+  }
+
+  let children = node.children?.map(stringifyHastNode).join('\n') || ''
+
+  // TODO: This can, and should, be done at the AST level in the future
+  if (!children?.length && node.type) {
+    const childSlot = getSlots(node.value).find(
+      (slot) => slot.name === 'children'
+    )
+    children = childSlot ? stringifyHastNode(childSlot) : ''
+    children = `<slot>${children}</slot>`
+  }
+
+  return `
+    <${formatTagName(node)} ${stringifyProps(node.props)}>
+      ${children}
+    </${formatTagName(node)}>`
+}
+export const stringifyProps = (props: any): string => {
+  if (!props) {
+    return ''
+  }
+
+  return Object.entries(props)
+    .map(([key, value]): any => {
+      if (isArray(value) || isObject(value)) {
+        return `${key}={${JSON.stringify(value)}}`
+      }
+
+      if (isNumber(value)) {
+        return `${key}={${value}}`
+      }
+
+      const fullValue = escapeHtml(value as string)
+      return `${key}="${fullValue}"`
+    })
+    .join(' ')
+}
diff --git a/packages/gui/src/lib/codegen/stringify-hast-node-as-jsx.ts b/packages/gui/src/lib/codegen/stringify-hast-node-as-jsx.ts
new file mode 100644
index 00000000..2612243f
--- /dev/null
+++ b/packages/gui/src/lib/codegen/stringify-hast-node-as-jsx.ts
@@ -0,0 +1,40 @@
+import { isArray, isNumber, isObject } from 'lodash-es'
+import escapeHtml from 'escape-html'
+import { isVoidElement } from '../elements'
+
+export const stringifyHastNode = (node: any) => {
+  if (typeof node === 'string') {
+    return node
+  }
+
+  if (!node.children || isVoidElement(node.tagName)) {
+    return `<${node.tagName} ${stringifyProps(node.props)} />`
+  }
+
+  const children = node.children.map(stringifyHastNode).join('\n')
+
+  return `
+    <${node.tagName} ${stringifyProps(node.props)}>
+      ${children}
+    </${node.tagName}>`
+}
+export const stringifyProps = (props: any): string => {
+  if (!props) {
+    return ''
+  }
+
+  return Object.entries(props)
+    .map(([key, value]): any => {
+      if (isArray(value) || isObject(value)) {
+        return `${key}={${JSON.stringify(value)}}`
+      }
+
+      if (isNumber(value)) {
+        return `${key}={${value}}`
+      }
+
+      const fullValue = escapeHtml(value as string)
+      return `${key}="${fullValue}"`
+    })
+    .join(' ')
+}
diff --git a/packages/gui/src/lib/codegen/styled-jsx.ts b/packages/gui/src/lib/codegen/styled-jsx.ts
new file mode 100644
index 00000000..f80d064a
--- /dev/null
+++ b/packages/gui/src/lib/codegen/styled-jsx.ts
@@ -0,0 +1,38 @@
+import { toH } from 'hast-to-hyperscript'
+import { HtmlNode } from '../../components/html/types'
+import { extractStyles } from './extract-styles'
+import { format } from './format'
+import { html as toHtml } from './html'
+import { stringifyHastNode } from './stringify-hast-node-as-jsx'
+import { toReactProps } from './to-react-props'
+import { CodegenOptions } from './types'
+
+const h = (tagName: string, props: any, children?: any[]) => {
+  const newProps = toReactProps(props)
+
+  return { tagName, props: newProps, children }
+}
+
+export const styledJsx = async (
+  node: HtmlNode,
+  options: CodegenOptions
+): Promise<string> => {
+  const html = await toHtml(node, options)
+  const { styles } = await extractStyles(html)
+  const jsx = stringifyHastNode(toH(h, node as any))
+
+  const output = `
+    import * as React from 'react'
+
+    export default function Component() {
+      return (
+        <>
+          ${jsx}
+          <styled jsx>{\`${styles}\`}</styled>
+        </>
+      )
+    }
+`
+
+  return format('js', output)
+}
diff --git a/packages/gui/src/lib/codegen/theme-ui.ts b/packages/gui/src/lib/codegen/theme-ui.ts
new file mode 100644
index 00000000..375973ab
--- /dev/null
+++ b/packages/gui/src/lib/codegen/theme-ui.ts
@@ -0,0 +1,42 @@
+import { toH } from 'hast-to-hyperscript'
+import { HtmlNode } from '../../components/html/types'
+import { editorSchemaToHast } from '../transformers/editor-schema-to-hast'
+import { toCSSObject } from './to-css-object'
+import { stringifyHastNode } from './stringify-hast-node-as-jsx'
+import { toReactProps } from './to-react-props'
+import { format } from './format'
+import { getPropSyntax } from './util'
+import { CodegenOptions } from './types'
+import { Theme } from '../../types/theme'
+
+const h =
+  (theme?: Theme) => (tagName: string, props: any, children?: any[]) => {
+    const newProps = toReactProps(props)
+
+    if (newProps.style) {
+      const style = newProps.style
+      delete newProps.style
+      newProps.sx = toCSSObject(style, theme)
+    }
+
+    return { tagName, props: newProps, children }
+  }
+
+export const themeUI = async (
+  node: HtmlNode,
+  { theme }: CodegenOptions = {}
+) => {
+  const root = editorSchemaToHast(node, { addSlotSyntax: true })
+  const functionBody = stringifyHastNode(toH(h(theme), root))
+
+  const output = `
+  /** @jsxImportSource theme-ui */
+  export default function Component(${getPropSyntax(node)}) {
+    return (
+      ${functionBody}
+    )
+  }
+  `
+
+  return format('js', output)
+}
diff --git a/packages/gui/src/lib/codegen/to-css-object.ts b/packages/gui/src/lib/codegen/to-css-object.ts
index a051e740..2d8fe635 100644
--- a/packages/gui/src/lib/codegen/to-css-object.ts
+++ b/packages/gui/src/lib/codegen/to-css-object.ts
@@ -1,69 +1,44 @@
-import { Styles, Length, CSSUnitValue, CSSFunctionCalc, UnitlessUnits } from '../../types/css'
-import { stringifySelector, stringifyUnit, stringifyCalcFunction } from '../stringify'
-import { has } from 'lodash-es'
-import { isMultidimensionalLength, isNestedSelector } from '../util'
+import { Styles, Length } from '../../types/css'
+import { stringifySelector } from '../stringify'
+import { isNestedSelector } from '../util'
 import { properties } from '../../data/properties'
+import { Theme } from '../../types/theme'
+import { stylesToEditorSchema } from '../transformers/styles-to-editor-schema'
 
 export const stringifyProperty = (
   property: string = '', // In the future the property might determine how we stringify
-  value?: unknown
-): Array<string | null> | string | number | null => {
+  value?: unknown,
+  theme?: Theme
+): string | undefined => {
   const stringify = properties[property]?.stringify
   if (stringify) {
-    return stringify(value)
-  }
-  if (Array.isArray(value)) {
-    // @ts-ignore
-    return value.map((v: Length | string | null) =>
-      stringifyProperty(property, v)
-    )
-  }
-
-  if (isCSSFunctionCalc(value)) {
-    // @ts-ignore
-    return stringifyCalcFunction(value)
-  }
-
-  if (isMultidimensionalLength(value)) {
-    return stringifyUnit(value)
-  }
-
-  if (!isCSSUnitValue(value)) {
-    return String(value) ?? null
+    try {
+      return stringify(value, theme)
+    } catch (e) {
+      throw new Error(`Error stringifying ${property}\n${e}`)
+    }
   }
-  return stringifyUnit(value)
 }
 
 type StyleEntry = [string, Length | string | null | undefined]
-export const toCSSObject = (styles: Styles): any => {
-  // @ts-ignore
-  return Object.entries(styles).reduce((acc: Styles, curr: StyleEntry) => {
-    const [property, value] = curr
-    if (isNestedSelector(property.replace(/^:+/, ''))) {
+export const toCSSObject = (providedStyles: Styles, theme?: Theme): any => {
+  const styles = stylesToEditorSchema(providedStyles)
+  const cssObject = Object.entries(styles).reduce(
+    // @ts-ignore
+    (acc: Styles, curr: StyleEntry) => {
+      const [property, value] = curr
+      if (isNestedSelector(property.replace(/^:+/, ''))) {
+        return {
+          ...acc,
+          [stringifySelector(property)]: toCSSObject(value as Styles, theme),
+        }
+      }
       return {
         ...acc,
-        [stringifySelector(property)]: toCSSObject(value as Styles),
+        [property]: stringifyProperty(property, value, theme),
       }
-    }
-    return {
-      ...acc,
-      [property]: stringifyProperty(property, value),
-    }
-  }, {})
-}
-
-function isCSSUnitValue(value: unknown): value is CSSUnitValue {
-  if (typeof value !== 'object') {
-    return false
-  }
-
-  if (!has(value, 'value') || !has(value, 'unit')) {
-    return false
-  }
-
-  return true
-}
-
-export function isCSSFunctionCalc(value: unknown): value is CSSFunctionCalc {
-  return (value as CSSFunctionCalc).type === UnitlessUnits.Calc
+    },
+    {}
+  )
+  return cssObject
 }
diff --git a/packages/gui/src/lib/codegen/to-react-props.ts b/packages/gui/src/lib/codegen/to-react-props.ts
new file mode 100644
index 00000000..b62f3c55
--- /dev/null
+++ b/packages/gui/src/lib/codegen/to-react-props.ts
@@ -0,0 +1,29 @@
+import * as propInfo from 'property-information'
+import { stringifySlotInProp } from './util'
+
+const SCHEMA = 'html' as unknown as propInfo.Schema
+
+type Props = Record<string, any>
+export const toReactProps = ({ outerProps, ...props }: Props): Props => {
+  return Object.entries(props).reduce((acc, curr) => {
+    const [key, value] = curr
+
+    // There are other "magic" properties that can be passed like
+    // css/sx which cause property-information to error because
+    // it only understands HTML spec-compliant attributes.
+    try {
+      const info = propInfo.find(SCHEMA, key)
+      const propName = info.property || key
+
+      return {
+        [propName]: stringifySlotInProp(value, outerProps),
+        ...acc,
+      }
+    } catch (e) {
+      return {
+        [key]: stringifySlotInProp(value, outerProps),
+        ...acc,
+      }
+    }
+  }, {})
+}
diff --git a/packages/gui/src/lib/codegen/types.ts b/packages/gui/src/lib/codegen/types.ts
new file mode 100644
index 00000000..0f36468c
--- /dev/null
+++ b/packages/gui/src/lib/codegen/types.ts
@@ -0,0 +1,4 @@
+export type CodegenOptions = {
+  selector?: string
+  theme?: any
+}
diff --git a/packages/gui/src/lib/codegen/util.ts b/packages/gui/src/lib/codegen/util.ts
new file mode 100644
index 00000000..3271aae6
--- /dev/null
+++ b/packages/gui/src/lib/codegen/util.ts
@@ -0,0 +1,74 @@
+import { camelCase, kebabCase } from 'lodash-es'
+import { unified } from 'unified'
+import { visit } from 'unist-util-visit'
+import { HtmlNode, Slot } from '../../components/html/types'
+
+export const getSlots = (value: HtmlNode) => {
+  if (isText(value) || isSlot(value)) {
+    return []
+  }
+
+  let slots: Slot[] = []
+  unified()
+    .use(() => (tree: any) => {
+      visit(tree, 'slot', (node: any) => {
+        slots.push(node)
+      })
+      visit(tree, 'element', (node: any) => {
+        const attributes = node.attributes || {}
+        Object.values(attributes).forEach((val: any) => {
+          if (isSlot(val)) {
+            slots.push(val)
+          }
+        })
+      })
+    })
+    .runSync(value)
+
+  return slots
+}
+
+export const getPropSyntax = (value: HtmlNode) => {
+  const slots = getSlots(value)
+  const props = slots.map((slot) => camelCase(slot.name)).join(', ')
+  return props.length ? `{ ${props} }` : ''
+}
+
+export const hasChildrenSlot = (value: HtmlNode) => {
+  const slots = getSlots(value)
+  return !!slots.find((slot) => slot.name === 'children')
+}
+
+export const stringifySlotInProp = (value: any, outerProps: any) => {
+  if (isSlot(value)) {
+    const slotName = value.name
+    if (outerProps && outerProps[slotName]) {
+      return outerProps[slotName]
+    }
+
+    return value.value ?? null
+  }
+
+  return value
+}
+
+export const isText = (value: HtmlNode) => value?.type === 'text'
+export const isSlot = (value: HtmlNode) => value?.type === 'slot'
+
+// TODO: This should find attr slots only
+export const getAttrSyntax = (value: HtmlNode) => {
+  return ''
+  const slots = getSlots(value)
+
+  if (!slots.length) {
+    return ''
+  }
+
+  const props = slots.map((slot) => kebabCase(slot.name)).join(', ')
+  const attrString = props.length ? `{ ${props} }` : ''
+
+  return `
+    const { attrs } = state
+    const ${attrString} = attrs
+  `
+}
diff --git a/packages/gui/src/lib/codegen/vue.ts b/packages/gui/src/lib/codegen/vue.ts
new file mode 100644
index 00000000..8ea08440
--- /dev/null
+++ b/packages/gui/src/lib/codegen/vue.ts
@@ -0,0 +1,17 @@
+import { HtmlNode } from '../../components/html/types'
+import { extractStyles } from './extract-styles'
+import { format } from './format'
+import { html as toHtml } from './html'
+import { CodegenOptions } from './types'
+
+export const vue = async (node: HtmlNode, options: CodegenOptions) => {
+  const src = await toHtml(node, options)
+  const { html, styles } = await extractStyles(src)
+
+  const output = `
+<template>${html}</template>
+<style>${styles}</style>
+`
+
+  return format('html', output)
+}
diff --git a/packages/gui/src/lib/color.ts b/packages/gui/src/lib/color.ts
index 2c90d6b1..4ec37b4d 100644
--- a/packages/gui/src/lib/color.ts
+++ b/packages/gui/src/lib/color.ts
@@ -1,18 +1,102 @@
-import { flattenDeep, get, sample } from 'lodash-es'
-import { Theme } from '../types/theme'
+import {
+  cloneDeep,
+  isBoolean,
+  isNumber,
+  isObject,
+  isString,
+  sample,
+} from 'lodash-es'
+import getContrast from 'get-contrast'
+import * as culori from 'culori'
+import { ThemeColor } from '../components/primitives/ColorPicker/PalettePicker'
+import { RegenOptions } from '../components/schemas/types'
+import { Color } from '../types/css'
+import { themeGet } from './theme'
 
-export function randomColor(theme?: Theme) {
-  if (theme && theme.colors) {
-    const path = sample(Object.keys(flattenDeep(theme.colors))) ?? ''
+const CONTRAST_THRESHOLD = 4.5
+const CONTRAST_PROPERTY_MAP: Record<string, string> = {
+  color: 'backgroundColor',
+  backgroundColor: 'color',
+}
 
-    return {
-      id: path,
-      path,
-      value: get(theme.colors, path?.split('.'), randomHexColor()),
-    }
+const getColorToContrastWith = (
+  property: string,
+  ruleset: Record<string, any>,
+  theme?: any
+) => {
+  const contrastProperty = CONTRAST_PROPERTY_MAP[property]
+  if (!contrastProperty) {
+    return null
+  }
+
+  const valueOrPath = ruleset[contrastProperty]
+  if (!valueOrPath) {
+    return null
+  }
+
+  return themeGet({
+    theme,
+    path: valueOrPath?.path || valueOrPath,
+    property: 'color',
+  })
+}
+
+const hasContrastToCheck = (
+  property?: string,
+  ruleset?: Record<string, any>,
+  theme?: any
+) => {
+  if (!property || !ruleset) {
+    return false
   }
 
-  return randomHexColor()
+  return !!getColorToContrastWith(property, ruleset, theme)
+}
+
+export function randomColor({
+  theme,
+  ruleset,
+  property,
+}: RegenOptions<Color | ThemeColor>) {
+  if (!theme?.colors) {
+    return randomHexColor()
+  }
+
+  const allColors = cloneDeep(theme.colors)
+  // @ts-ignore
+  delete allColors.modes
+
+  const colors = flatten(allColors)
+
+  if (!hasContrastToCheck(property, ruleset, theme)) {
+    return sample(Object.keys(colors))
+  }
+
+  const colorToContrastWith = getColorToContrastWith(property!, ruleset, theme)
+  const colorsWithContrast = Object.entries(colors).reduce(
+    (acc: string[], curr) => {
+      const [path, value] = curr
+
+      try {
+        if (hasAlpha(value)) {
+          return acc
+        }
+
+        if (
+          getContrast.ratio(value, colorToContrastWith) >= CONTRAST_THRESHOLD
+        ) {
+          return [...acc, path]
+        }
+      } catch (e) {}
+
+      return acc
+    },
+    []
+  )
+
+  return colorsWithContrast.length
+    ? sample(colorsWithContrast)
+    : sample(Object.keys(colors))
 }
 
 export function randomHexColor() {
@@ -21,3 +105,39 @@ export function randomHexColor() {
     ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6)
   )
 }
+
+export function hasAlpha(color: string) {
+  if (!isValidColor(color)) {
+    return false
+  }
+  const { alpha = 1 } = culori.parse(color)
+  return alpha !== 1
+}
+
+export function isValidColor(value: Color) {
+  return !!culori.parse(value)
+}
+
+type Key = string | number
+type KeyPath = Key[]
+type Obj = Record<string, any>
+const keyify = (keys: KeyPath) => keys.join('.')
+const flatten = (obj: Obj, parentKeys?: KeyPath): Obj =>
+  Object.keys(obj).reduce((acc: Obj, key: Key) => {
+    const val = obj[key]
+    const keys: KeyPath = (parentKeys || []).concat([key])
+
+    if (isString(val) || isBoolean(val) || isNumber(val)) {
+      acc[keyify(keys)] = val
+      return acc
+    } else if (isObject(val)) {
+      return Object.assign(acc, flatten(val, keys))
+    }
+
+    val.forEach((v: any, i: number) => {
+      const key = keyify(keys.concat([i]))
+      acc[key] = v
+    })
+
+    return acc
+  }, {})
diff --git a/packages/gui/src/lib/components.tsx b/packages/gui/src/lib/components.tsx
new file mode 100644
index 00000000..ee3a4fc7
--- /dev/null
+++ b/packages/gui/src/lib/components.tsx
@@ -0,0 +1,19 @@
+import { ComponentType } from 'react'
+
+/**
+ * Bind `props` onto `Component` and create a new component without those props
+ */
+export function bindProps<P, Q extends Partial<P>>(
+  Component: ComponentType<P>,
+  props: Omit<P, keyof Q> | ((props: Q) => Omit<P, keyof Q>)
+): ComponentType<any> {
+  if (typeof props === 'function') {
+    return (subProps: Q) => {
+      return <Component {...subProps} {...(props(subProps) as any)} />
+    }
+  }
+  // TODO fix this typing
+  return (subProps: Q) => {
+    return <Component {...subProps} {...(props as any)} />
+  }
+}
diff --git a/packages/gui/src/lib/constants.ts b/packages/gui/src/lib/constants.ts
index 74f50ea7..c796cb0c 100644
--- a/packages/gui/src/lib/constants.ts
+++ b/packages/gui/src/lib/constants.ts
@@ -1,5 +1,7 @@
 import { AbsoluteLengthUnits, Length } from '../types/css'
 
+export const SCHEMA_VERSION = 1
+
 export const THEME_ALIASES: Record<string, string> = {
   bg: 'backgroundColor',
   m: 'margin',
diff --git a/packages/gui/src/lib/convert.ts b/packages/gui/src/lib/convert.ts
index 1daa2133..c5dd7491 100644
--- a/packages/gui/src/lib/convert.ts
+++ b/packages/gui/src/lib/convert.ts
@@ -24,6 +24,10 @@ export const convertUnits = (
     return newSteps ? roundToStep(newValue, newSteps) : newValue
   }
 
+  if (value.unit === 'keyword') {
+    return conversions[newUnit] ?? 0
+  }
+
   // If the new unit has a value but the old one doesn't, return the new one
   if (conversions[newUnit] && value.unit !== UnitlessUnits.Calc) {
     return conversions[newUnit]
diff --git a/packages/gui/src/lib/defaults.ts b/packages/gui/src/lib/defaults.ts
deleted file mode 100644
index e09be7d9..00000000
--- a/packages/gui/src/lib/defaults.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { properties } from '../data/properties'
-
-export function getDefaultValue(property: string) {
-  const propertyDefinition = properties[property] ?? {}
-  // If a default value is defined, return it
-  if (propertyDefinition.defaultValue) {
-    return propertyDefinition.defaultValue
-  }
-  switch (propertyDefinition.type) {
-    case 'keyword':
-      return { value: propertyDefinition.keywords![0], unit: 'keyword' }
-    case 'number':
-    case 'integer':
-      return { value: 0, unit: 'number' }
-    case 'length':
-      return { value: 0, unit: 'px' }
-    case 'percentage':
-      return { value: 0, unit: '%' }
-    case 'time':
-      return { value: 0, unit: 's' }
-    case 'string':
-      return { value: '', unit: 'string' }
-    case 'color':
-      return 'inherit'
-    case 'position':
-      return {
-        x: { value: 0, unit: '%' },
-        y: { value: 0, unit: '%' },
-      }
-  }
-}
diff --git a/packages/gui/src/lib/elements.ts b/packages/gui/src/lib/elements.ts
index 6f358a69..c0909266 100644
--- a/packages/gui/src/lib/elements.ts
+++ b/packages/gui/src/lib/elements.ts
@@ -1,5 +1,14 @@
-import { elements } from '../data/elements'
+import { elements, voidElements } from '../data/elements'
 
 export const isElement = (str: string): boolean => {
   return !!elements.filter((el) => str === el).length
 }
+
+export const isVoidElement = (str: string): boolean => {
+  return !!voidElements.filter((el) => str === el).length
+}
+
+const PROSE_ELEMENTS = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+export const isProseElement = (str: string): boolean => {
+  return PROSE_ELEMENTS.includes(str)
+}
diff --git a/packages/gui/src/lib/hash.ts b/packages/gui/src/lib/hash.ts
new file mode 100644
index 00000000..fb0da82b
--- /dev/null
+++ b/packages/gui/src/lib/hash.ts
@@ -0,0 +1,65 @@
+/* eslint-disable */
+// Copied from https://github.com/emotion-js/emotion/blob/6eef2e3ede044d64530d94f08fe0e92f6267dc6c/packages/hash/src/index.js
+// License https://github.com/emotion-js/emotion/blob/6eef2e3ede044d64530d94f08fe0e92f6267dc6c/packages/hash/LICENSE
+// Inspired by https://github.com/garycourt/murmurhash-js
+// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
+
+export default function murmur2(str: string): string {
+  // 'm' and 'r' are mixing constants generated offline.
+  // They're not really 'magic', they just happen to work well.
+
+  // const m = 0x5bd1e995;
+  // const r = 24;
+
+  // Initialize the hash
+
+  var h = 0
+
+  // Mix 4 bytes at a time into the hash
+
+  var k,
+    i = 0,
+    len = str.length
+  for (; len >= 4; ++i, len -= 4) {
+    k =
+      (str.charCodeAt(i) & 0xff) |
+      ((str.charCodeAt(++i) & 0xff) << 8) |
+      ((str.charCodeAt(++i) & 0xff) << 16) |
+      ((str.charCodeAt(++i) & 0xff) << 24)
+
+    k =
+      /* Math.imul(k, m): */
+      (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16)
+    k ^= /* k >>> r: */ k >>> 24
+
+    h =
+      /* Math.imul(k, m): */
+      ((k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16)) ^
+      /* Math.imul(h, m): */
+      ((h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16))
+  }
+
+  // Handle the last few bytes of the input array
+
+  switch (len) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 0xff) << 16
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 0xff) << 8
+    case 1:
+      h ^= str.charCodeAt(i) & 0xff
+      h =
+        /* Math.imul(h, m): */
+        (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16)
+  }
+
+  // Do a few final mixes of the hash to ensure the last few
+  // bytes are well-incorporated.
+
+  h ^= h >>> 13
+  h =
+    /* Math.imul(h, m): */
+    (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16)
+
+  return ((h ^ (h >>> 15)) >>> 0).toString(36)
+}
diff --git a/packages/gui/src/lib/index.ts b/packages/gui/src/lib/index.ts
index 0769af32..b7e0e3c3 100644
--- a/packages/gui/src/lib/index.ts
+++ b/packages/gui/src/lib/index.ts
@@ -1,5 +1,7 @@
 export * from './convert'
 export * as codegen from './codegen'
+export * as parsers from './parsers'
+export * from './transformers'
 export * from './codegen/to-css-object'
 export * from './theme'
-export * from './transformers'
+export { SCHEMA_VERSION } from './constants'
diff --git a/packages/gui/src/lib/parse.test.ts b/packages/gui/src/lib/parse.test.ts
new file mode 100644
index 00000000..5bd8965d
--- /dev/null
+++ b/packages/gui/src/lib/parse.test.ts
@@ -0,0 +1,52 @@
+import { tokenize } from './parse'
+describe('tokenize()', () => {
+  it('tokenizes dimensions and numbers', () => {
+    expect(tokenize('2rem')).toEqual(['2rem'])
+    expect(tokenize('2.5')).toEqual(['2.5'])
+  })
+
+  describe('strings', () => {
+    it('tokenizes double-quoted strings', () => {
+      expect(tokenize('"some name"')).toEqual(['"some name"'])
+    })
+    it('tokenizes single-quoted strings', () => {
+      expect(tokenize("'some name'")).toEqual(["'some name'"])
+    })
+    it.todo('tokenizes escaped strings correctly')
+  })
+
+  it('tokenizes lists', () => {
+    expect(tokenize('inset 2rem 3rem 1rem 4rem')).toEqual([
+      'inset',
+      '2rem',
+      '3rem',
+      '1rem',
+      '4rem',
+    ])
+  })
+
+  describe('functions', () => {
+    it('tokenizes functions', () => {
+      expect(tokenize('translate(2px,3px)')).toEqual([
+        { name: 'translate', arguments: ['2px', ',', '3px'] },
+      ])
+    })
+    it('tokenizes nested functions', () => {
+      expect(tokenize('repeat(1, fit-content(3rem))')).toEqual([
+        {
+          name: 'repeat',
+          arguments: [
+            '1',
+            ',',
+            {
+              name: 'fit-content',
+              arguments: ['3rem'],
+            },
+          ],
+        },
+      ])
+    })
+
+    it.todo('fails gracefully on mismatched parentheses')
+  })
+})
diff --git a/packages/gui/src/lib/parse.ts b/packages/gui/src/lib/parse.ts
new file mode 100644
index 00000000..27a15ef2
--- /dev/null
+++ b/packages/gui/src/lib/parse.ts
@@ -0,0 +1,63 @@
+export type Token = string | CssFunction
+
+interface CssFunction {
+  name: string
+  arguments: Token[]
+}
+
+export function tokenize(text: string) {
+  return processTokens(tokenizeRaw(text))
+}
+
+export function processTokens(tokens: string[]) {
+  const result = []
+  while (tokens.length > 0) {
+    const [next, rest] = processToken(tokens)
+    result.push(next)
+    tokens = rest
+  }
+  return result
+}
+
+function processToken(tokens: string[]): [Token, string[]] {
+  const [head, ...tail] = tokens
+  if (!isFunctionIdent(head)) {
+    return [head, tail]
+  }
+  const [args, rest] = processArguments(tail)
+  return [{ name: head.slice(0, -1), arguments: args }, rest.slice(1)]
+}
+
+// Process arguments of CSS functions
+function processArguments(tokens: string[]): [Token[], string[]] {
+  const result = []
+  // TODO error handling when tokens are invalid
+  while (tokens.length && tokens[0] !== ')') {
+    const [nextToken, tail] = processToken(tokens)
+    result.push(nextToken)
+    tokens = tail
+  }
+  return [result, tokens]
+}
+
+function isFunctionIdent(str: string) {
+  return /[-A-Za-z0-9]+\(/.test(str)
+}
+
+/**
+ * Tokenize the value into css value tokens (not counting functions)
+ */
+export function tokenizeRaw(str: string) {
+  // A CSS token is defined to be one of the following:
+  //  - an alphanumeric, dashed character
+  //  - a hex color
+  //  - a string, either with double quotes (") or single quotes (')
+  //  - a function, which has a string and items wrapped in parentheses
+  //  - a literal used in css ( , / + - * )
+  // TODO fail if there are any extraneous non-space characters
+  return [
+    ...str.matchAll(
+      /(?:"[^"]*")|(?:'[^']*')|(?:[-_A-Za-z0-9]+\()|[-_%A-Za-z0-9.]+|(?:#[a-f0-9]+)|\/|,|\)|\+|\-|\*/g
+    ),
+  ].map((match) => match[0])
+}
diff --git a/packages/gui/src/lib/parsers/html.ts b/packages/gui/src/lib/parsers/html.ts
new file mode 100644
index 00000000..bea8b1b6
--- /dev/null
+++ b/packages/gui/src/lib/parsers/html.ts
@@ -0,0 +1,8 @@
+import { htmlToEditorSchema } from '../transformers'
+
+export const html = (htmlString: string) => {
+  // TODO: Use unified to wrap and remove doctype
+  const fullString = `<div>${htmlString.replace('<!DOCTYPE html>', '')}</div>`
+  const data = htmlToEditorSchema(fullString)
+  return data
+}
diff --git a/packages/gui/src/lib/parsers/index.ts b/packages/gui/src/lib/parsers/index.ts
new file mode 100644
index 00000000..d4e7091d
--- /dev/null
+++ b/packages/gui/src/lib/parsers/index.ts
@@ -0,0 +1,2 @@
+export { html } from './html'
+export { md } from './md'
diff --git a/packages/gui/src/lib/parsers/md.ts b/packages/gui/src/lib/parsers/md.ts
new file mode 100644
index 00000000..6d458cde
--- /dev/null
+++ b/packages/gui/src/lib/parsers/md.ts
@@ -0,0 +1,17 @@
+import { fromMarkdown } from 'mdast-util-from-markdown'
+import { toHast } from 'mdast-util-to-hast'
+import { hastToEditorSchema } from '../transformers/hast-to-editor-schema'
+
+export const md = (mdString: string) => {
+  const tree = toHast(fromMarkdown(mdString))!
+  return hastToEditorSchema({
+    type: 'root',
+    children: [
+      {
+        type: 'element',
+        tagName: 'div',
+        children: (tree as any).children,
+      },
+    ],
+  })
+}
diff --git a/packages/gui/src/lib/pseudos.ts b/packages/gui/src/lib/pseudos.ts
index 07dbbea9..aa494b0a 100644
--- a/packages/gui/src/lib/pseudos.ts
+++ b/packages/gui/src/lib/pseudos.ts
@@ -1,5 +1,6 @@
 import { pseudoClasses } from '../data/pseudo-classes'
 import { pseudoElements } from '../data/pseudo-elements'
+import { selectorFunctions } from '../data/selector-functions'
 
 export const isPseudoClass = (str: string): boolean => {
   return !!pseudoClasses.filter((value) => value === str).length
@@ -9,8 +10,12 @@ export const isPseudoElement = (str: string): boolean => {
   return !!pseudoElements.filter((value) => value === str).length
 }
 
+export const isSelectorFunction = (str: string): boolean => {
+  return !!selectorFunctions.filter((value) => str.startsWith(value)).length
+}
+
 export const isPseudo = (str: string): boolean => {
-  return isPseudoClass(str) || isPseudoElement(str)
+  return isPseudoClass(str) || isPseudoElement(str) || isSelectorFunction(str)
 }
 
 export const hasPseudoSyntax = (str: string): boolean => {
@@ -21,8 +26,27 @@ export const removePseudoSyntax = (str: string): string => {
   return str.replace(/^:+/, '')
 }
 
+export const getSelectorFunctionArgument = (str: string): string => {
+  return str.match(/\(([^)]+)\)/)?.[1] ?? ''
+}
+
+export const getSelectorFunctionName = (str: string): string => {
+  return str.split('(')[0]
+}
+
+export const stringifySelectorFunction = (
+  functionName: string,
+  argument: string
+): string => {
+  return `${addPseudoSyntax(functionName)}(${argument})`
+}
+
 export const addPseudoSyntax = (str: string): string => {
-  if (isPseudoClass(str)) {
+  if (hasPseudoSyntax(str)) {
+    return str
+  }
+
+  if (isPseudoClass(str) || isSelectorFunction(str)) {
     return ':' + str
   } else if (isPseudoElement(str)) {
     return '::' + str
diff --git a/packages/gui/src/lib/random.ts b/packages/gui/src/lib/random.ts
new file mode 100644
index 00000000..3f6b7386
--- /dev/null
+++ b/packages/gui/src/lib/random.ts
@@ -0,0 +1,15 @@
+import { roundToStep } from './math'
+
+export function randomInt(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min) + min)
+}
+
+export function randomStep(min: number, max: number, step: number) {
+  min = Math.min(max, min)
+  return roundToStep(Math.random() * (max - min) + min, step)
+}
+
+export function choose<T>(items: readonly T[]) {
+  const index = randomInt(0, items.length)
+  return items[index]
+}
diff --git a/packages/gui/src/lib/stringify.ts b/packages/gui/src/lib/stringify.ts
index 00b5df6b..3e7cc976 100644
--- a/packages/gui/src/lib/stringify.ts
+++ b/packages/gui/src/lib/stringify.ts
@@ -6,13 +6,14 @@ import {
   Position,
   CSSFunctionCalc,
 } from '../types/css'
+import { Theme } from '../types/theme'
 import {
   addCSSClassSyntax,
   isInternalCSSClass,
   removeInternalCSSClassSyntax,
 } from './classes'
 import { addPseudoSyntax } from './pseudos'
-import { isMultidimensionalLength } from './util'
+import { themeGet } from './theme'
 
 export function stringifySelector(selector: string): string {
   if (isElement(selector)) {
@@ -32,41 +33,26 @@ export const stringifyCalcFunction = ({ arguments: args }: CSSFunctionCalc) => {
 }
 
 export function stringifyUnit(
-  providedValue: Length | MultidimensionalLength
+  providedValue: Length | MultidimensionalLength | Color
+  // theme?: Theme
 ): string | number | null {
-  if (isMultidimensionalLength(providedValue)) {
-    return (providedValue as MultidimensionalLength).values
-      .map(stringifyUnit)
-      .join(' ')
-  }
-
   const value = providedValue as Length
 
-  if (value === '0') {
-    return value
-  }
   if (!value || value.value === undefined) {
     return null
   }
 
-  if (['theme', 'raw', 'keyword', 'calc'].includes(value.unit)) {
+  if (['raw', 'keyword', 'calc'].includes(value.unit)) {
     return value.value
   }
 
-  if (value.unit === 'string') {
-    // TODO handle string escapes
-    return `'${value.value}'`
-  }
-
   if (value.unit === 'number') {
     return String(value.value)
   }
 
-  return `${value.value}${value.unit || DEFAULT_LENGTH_UNIT}`
+  return `${value.value}${value.unit || ''}`
 }
 
-const DEFAULT_LENGTH_UNIT = 'px'
-
 export function stringifyFunction(
   name: string,
   properties: Primitive[],
@@ -74,7 +60,7 @@ export function stringifyFunction(
 ) {
   return `${name}(${properties
     .filter((x) => !isNil(x))
-    .map(stringifyPrimitive)
+    .map((x) => stringifyPrimitive(x))
     .join(separator)})`
 }
 
@@ -92,7 +78,7 @@ export function stringifyPosition(position: Position) {
   return `${stringifyUnit(position.x)} ${stringifyUnit(position.y)}`
 }
 
-export function stringifyPrimitive(value: Primitive) {
+export function stringifyPrimitive(value: Primitive, theme?: Theme) {
   if (typeof value === 'number') {
     return '' + value
   }
@@ -102,4 +88,14 @@ export function stringifyPrimitive(value: Primitive) {
   return stringifyUnit(value)
 }
 
-type Primitive = Length | number | Color | MultidimensionalLength
+export function stringifyFontFamily(value: string, theme?: Theme) {
+  return (
+    themeGet({
+      property: 'fontFamily',
+      path: value,
+      theme,
+    }) ?? value
+  )
+}
+
+type Primitive = Length | number | Color | MultidimensionalLength | string
diff --git a/packages/gui/src/lib/theme.ts b/packages/gui/src/lib/theme.ts
index 7767c15c..9edad782 100644
--- a/packages/gui/src/lib/theme.ts
+++ b/packages/gui/src/lib/theme.ts
@@ -1,8 +1,19 @@
 import { v4 as uuid } from 'uuid'
-import { ColorModesScale } from 'theme-ui'
+import { ColorModesScale, get as themeUIGet } from 'theme-ui'
 import { THEME_SCALES } from './constants'
 import { ColorGroup, Theme } from '../types/theme'
 
+type GetArguments = {
+  theme: any
+  path: string | number
+  property: string
+}
+export const themeGet = ({ theme, path, property }: GetArguments) => {
+  const scale = THEME_SCALES[property]
+  const fullPath = [scale, path].filter(Boolean).join('.')
+  return themeUIGet(theme, fullPath) ?? path ?? property
+}
+
 export const isThemeable = (property?: string): boolean =>
   !!THEME_SCALES[property || '']
 
@@ -12,25 +23,15 @@ export const importColors = (colors?: ColorModesScale): ColorGroup[] => {
   }
 
   return Object.entries(colors)
-    .filter(([name, group]) => name !== 'modes' && !!group)
+    .filter(
+      ([name, group]) => name !== 'modes' && !!group && Array.isArray(group)
+    )
     .map(([name, group]) => {
-      if (!Array.isArray(group)) {
-        return {
-          id: uuid(),
-          name,
-          colors: [
-            {
-              id: uuid(),
-              value: String(group),
-            },
-          ],
-        }
-      }
-
       return {
         id: uuid(),
         name,
-        colors: group.map((value: string) => {
+        //@ts-ignore
+        colors: group?.map((value: string) => {
           return {
             id: uuid(),
             value: value,
@@ -40,6 +41,20 @@ export const importColors = (colors?: ColorModesScale): ColorGroup[] => {
     })
 }
 
+type FontsObject = Record<string, string>
+type FontsArray = string[]
+type Fonts = FontsObject | FontsArray
+export const importFonts = (fonts: Fonts) => {
+  if (Array.isArray(fonts)) {
+    return fonts.reduce((acc, value: string) => {
+      return {
+        ...acc,
+        [value]: value,
+      }
+    }, {})
+  }
+}
+
 type RawLength = number | string
 type FullLength = {
   id: string
@@ -48,18 +63,30 @@ type FullLength = {
   name?: string
 }
 export const importRawLengths = (fontSizes: RawLength[]): FullLength[] => {
-  return fontSizes?.map((value: number | string) => {
-    // TODO: If a string we should parse for other units and/or keywords
-    return {
-      id: uuid(),
-      value,
-      unit: 'px',
-    }
-  })
+  // TODO: Handle object mappings
+  if (Array.isArray(fontSizes)) {
+    return fontSizes?.map((value: number | string) => {
+      // TODO: If a string we should parse for other units and/or keywords
+      const unit =
+        typeof value === 'string' ? `${value.match(/-?[a-zA-Z]+/)}` : 'px'
+      const parsedValue =
+        typeof value === 'string' ? Number(value.match(/-?[\d.]+/)) : value
+
+      return {
+        id: uuid(),
+        value: parsedValue,
+        unit,
+      }
+    })
+  }
+
+  return []
 }
 
 export const importTheme = (theme: any): Theme => {
-  const colors = importColors(theme.colors)
+  // const colors = importColors(theme.colors)
+  const colors = theme.colors
+  const fonts = importFonts(theme.fonts || [])
   const fontSizes = importRawLengths(theme.fontSizes || [])
   const lineHeights = importRawLengths(theme.lineHeights || [])
   const space = importRawLengths(theme.space || [])
@@ -68,6 +95,7 @@ export const importTheme = (theme: any): Theme => {
 
   return {
     colors,
+    fonts,
     fontSizes,
     lineHeights,
     space,
diff --git a/packages/gui/src/lib/transformers/editor-schema-to-hast.ts b/packages/gui/src/lib/transformers/editor-schema-to-hast.ts
new file mode 100644
index 00000000..7bea0fe0
--- /dev/null
+++ b/packages/gui/src/lib/transformers/editor-schema-to-hast.ts
@@ -0,0 +1,45 @@
+import { camelCase, cloneDeep } from 'lodash-es'
+import { unified } from 'unified'
+import { visit } from 'unist-util-visit'
+import { attributesToProperties } from './plugins/attributes-to-properties'
+import { convertComponentsToHast } from './plugins/convert-components-to-hast'
+import { moveStyleToProperties } from './plugins/move-style-to-properties'
+import { removeProperties } from './plugins/remove-properties'
+
+type Options = {
+  removeStyleProperty?: boolean
+  addSlotSyntax?: boolean
+  addSlotTagSyntax?: boolean
+}
+export const editorSchemaToHast = (node: any, options?: Options) => {
+  const propertiesToRemove: string[] = []
+
+  if (options?.removeStyleProperty) {
+    propertiesToRemove.push('style')
+  }
+
+  const processedTree = unified()
+    .use(convertComponentsToHast)
+    // @ts-ignore
+    .use(attributesToProperties)
+    .use(moveStyleToProperties as any)
+    // @ts-ignore
+    .use(removeProperties, { propertiesToRemove })
+    .use(() => (tree) => {
+      if (options?.addSlotSyntax) {
+        visit(tree, 'slot', (node) => {
+          node.type = 'text'
+          node.value = `{${camelCase(node.name)}}`
+        })
+      }
+      if (options?.addSlotTagSyntax) {
+        visit(tree, 'slot', (node) => {
+          node.type = 'text'
+          node.value = `<slot name="${camelCase(node.name)}"></slot>`
+        })
+      }
+    })
+    .runSync(cloneDeep(node))
+
+  return processedTree
+}
diff --git a/packages/gui/src/lib/transformers/hast-to-editor-schema.ts b/packages/gui/src/lib/transformers/hast-to-editor-schema.ts
new file mode 100644
index 00000000..b6531ce3
--- /dev/null
+++ b/packages/gui/src/lib/transformers/hast-to-editor-schema.ts
@@ -0,0 +1,20 @@
+import { unified } from 'unified'
+import { cleanNewLines } from './plugins/clean-new-lines'
+import { propertiesToAttributes } from './plugins/properties-to-attributes'
+import { Root } from 'rehype-parse/lib'
+import { transformStyleAttributes } from './plugins/transform-style-attributes'
+import { moveStyleToTopLevel } from './plugins/move-style-to-top-level'
+
+export const hastToEditorSchema = (tree: Root) => {
+  const processedTree = unified()
+    .use(cleanNewLines)
+    // @ts-ignore
+    .use(moveStyleToTopLevel)
+    // @ts-ignore
+    .use(propertiesToAttributes)
+    .use(transformStyleAttributes)
+    .runSync(tree)
+
+  const htmlBody = processedTree.children[0]
+  return htmlBody
+}
diff --git a/packages/gui/src/lib/transformers/html-to-editor-schema.ts b/packages/gui/src/lib/transformers/html-to-editor-schema.ts
index c69f01f7..2b76e131 100644
--- a/packages/gui/src/lib/transformers/html-to-editor-schema.ts
+++ b/packages/gui/src/lib/transformers/html-to-editor-schema.ts
@@ -1,23 +1,14 @@
-import { useState, useEffect, Fragment, createElement, ReactNode } from 'react'
 import { unified } from 'unified'
 import rehypeParse from 'rehype-parse'
-import rehypeSanitize from 'rehype-sanitize'
-import { cleanNewLines } from './plugins/clean-new-lines'
-import { propertiesToAttributes } from './plugins/properties-to-attributes'
-import { textNodesToStrings } from './plugins/text-nodes-to-strings'
+import { hastToEditorSchema } from './hast-to-editor-schema'
 
 export const htmlToEditorSchema = (text: string) => {
   const tree = unified().use(rehypeParse, { fragment: true }).parse(text)
+  const processedTree = hastToEditorSchema(tree)
 
-  const processedTree = unified()
-    // Don't use rehype sanitize for now since it's a bit
-    // overly strict for our purposes.
-    //.use(rehypeSanitize)
-    .use(cleanNewLines)
-    // @ts-ignore
-    .use(propertiesToAttributes)
-    .use(textNodesToStrings)
-    .runSync(tree)
+  if (processedTree.children.length > 1) {
+    return processedTree
+  }
 
   const htmlBody = processedTree.children[0]
   return htmlBody
diff --git a/packages/gui/src/lib/transformers/html-to-md.ts b/packages/gui/src/lib/transformers/html-to-md.ts
new file mode 100644
index 00000000..1504b621
--- /dev/null
+++ b/packages/gui/src/lib/transformers/html-to-md.ts
@@ -0,0 +1,10 @@
+import { unified } from 'unified'
+import rehypeParse from 'rehype-parse'
+import { toMdast } from 'hast-util-to-mdast'
+import { toMarkdown } from 'mdast-util-to-markdown'
+
+export const htmlToMd = (text: string) => {
+  const tree = unified().use(rehypeParse, { fragment: true }).parse(text)
+  const mdast = toMdast(tree)
+  return toMarkdown(mdast)
+}
diff --git a/packages/gui/src/lib/transformers/index.ts b/packages/gui/src/lib/transformers/index.ts
index 8cb57b9a..c5cd4ffa 100644
--- a/packages/gui/src/lib/transformers/index.ts
+++ b/packages/gui/src/lib/transformers/index.ts
@@ -1 +1,3 @@
 export * from './html-to-editor-schema'
+export * from './html-to-md'
+export * from './md-to-html'
diff --git a/packages/gui/src/lib/transformers/inline-styles-to-style-element.ts b/packages/gui/src/lib/transformers/inline-styles-to-style-element.ts
new file mode 100644
index 00000000..b04c2b75
--- /dev/null
+++ b/packages/gui/src/lib/transformers/inline-styles-to-style-element.ts
@@ -0,0 +1,46 @@
+import { cloneDeep } from 'lodash-es'
+import { unified } from 'unified'
+import { visit } from 'unist-util-visit'
+import hash from '../hash'
+import { stringifyCSSObject } from '../codegen/stringify-css-object'
+import { toCSSObject } from '../codegen/to-css-object'
+import { addCSSClassSyntax } from '../classes'
+import { CodegenOptions } from '../codegen/types'
+
+export const inlineStylesToStyleElement = (
+  node: any,
+  options: CodegenOptions
+) => {
+  const styleMap: Record<string, any> = {}
+  const processedTree = unified()
+    .use(() => (tree) => {
+      visit(tree, 'element', (node: any) => {
+        if (!node.properties.style) {
+          return
+        }
+
+        const style = node.properties.style
+        // @ts-ignore
+        const selector = 'css-' + hash(JSON.stringify(style))
+
+        if (!node.properties.class) {
+          node.properties.class = selector
+        } else {
+          node.properties.class = node.properties.class + ' ' + selector
+        }
+
+        delete node.properties.style
+
+        styleMap[selector] = stringifyCSSObject(
+          toCSSObject(style, options?.theme),
+          addCSSClassSyntax(selector)
+        )
+      })
+    })
+    .runSync(cloneDeep(node))
+
+  return {
+    node: processedTree,
+    styles: Object.values(styleMap).join('\n'),
+  }
+}
diff --git a/packages/gui/src/lib/transformers/md-to-html.ts b/packages/gui/src/lib/transformers/md-to-html.ts
new file mode 100644
index 00000000..52ab8dd1
--- /dev/null
+++ b/packages/gui/src/lib/transformers/md-to-html.ts
@@ -0,0 +1,9 @@
+import { toHast } from 'mdast-util-to-hast'
+import { toHtml } from 'hast-util-to-html'
+import { fromMarkdown } from 'mdast-util-from-markdown'
+
+export const mdToHtml = (text: string) => {
+  const mdast = fromMarkdown(text)
+  const hast = toHast(mdast)!
+  return toHtml(hast)
+}
diff --git a/packages/gui/src/lib/transformers/plugins/attributes-to-properties.ts b/packages/gui/src/lib/transformers/plugins/attributes-to-properties.ts
new file mode 100644
index 00000000..c0492046
--- /dev/null
+++ b/packages/gui/src/lib/transformers/plugins/attributes-to-properties.ts
@@ -0,0 +1,5 @@
+import { renameNodeAttribute } from './rename-node-attribute'
+
+export const attributesToProperties = () => (tree: any) => {
+  return renameNodeAttribute(tree, 'attributes', 'properties')
+}
diff --git a/packages/gui/src/lib/transformers/plugins/convert-components-to-hast.ts b/packages/gui/src/lib/transformers/plugins/convert-components-to-hast.ts
new file mode 100644
index 00000000..01f8f6d1
--- /dev/null
+++ b/packages/gui/src/lib/transformers/plugins/convert-components-to-hast.ts
@@ -0,0 +1,12 @@
+import { visit } from 'unist-util-visit'
+
+export const convertComponentsToHast = () => (tree: any) => {
+  visit(tree, 'component', (node) => {
+    node.type = 'element'
+    node.component = true
+    node.attributes = {
+      ...node.attributes,
+      ...node.value.attributes,
+    }
+  })
+}
diff --git a/packages/gui/src/lib/transformers/plugins/move-style-to-properties.ts b/packages/gui/src/lib/transformers/plugins/move-style-to-properties.ts
new file mode 100644
index 00000000..b1edc1da
--- /dev/null
+++ b/packages/gui/src/lib/transformers/plugins/move-style-to-properties.ts
@@ -0,0 +1,12 @@
+import { visit } from 'unist-util-visit'
+
+export const moveStyleToProperties = () => (tree: any) => {
+  visit(tree, 'element', (node) => {
+    if (!node.style) {
+      return
+    }
+
+    node.properties.style = node.style
+    delete node.style
+  })
+}
diff --git a/packages/gui/src/lib/transformers/plugins/move-style-to-top-level.ts b/packages/gui/src/lib/transformers/plugins/move-style-to-top-level.ts
new file mode 100644
index 00000000..1b38e698
--- /dev/null
+++ b/packages/gui/src/lib/transformers/plugins/move-style-to-top-level.ts
@@ -0,0 +1,12 @@
+import { visit } from 'unist-util-visit'
+
+export const moveStyleToTopLevel = () => (tree: any) => {
+  visit(tree, 'element', (node) => {
+    if (!node.properties.style) {
+      return
+    }
+
+    node.style = node.properties.style
+    delete node.properties.style
+  })
+}
diff --git a/packages/gui/src/lib/transformers/plugins/properties-to-attributes.ts b/packages/gui/src/lib/transformers/plugins/properties-to-attributes.ts
index c82a3025..efb158ed 100644
--- a/packages/gui/src/lib/transformers/plugins/properties-to-attributes.ts
+++ b/packages/gui/src/lib/transformers/plugins/properties-to-attributes.ts
@@ -1,33 +1,5 @@
-import { visit } from 'unist-util-visit'
+import { renameNodeAttribute } from './rename-node-attribute'
 
 export const propertiesToAttributes = () => (tree: any) => {
-  visit(tree, 'element', (node) => {
-    if (!node.properties) {
-      return
-    }
-
-    const properties: Record<string, string[]> = node.properties
-    const attributes = Object.entries(properties).reduce(
-      (acc: Record<string, string>, curr: [string, string | string[]]) => {
-        const [attr, value] = curr
-
-        if (Array.isArray(value)) {
-          return {
-            [attr]: value.join(' '),
-            ...acc,
-          }
-        }
-
-        return {
-          [attr]: value as string,
-          ...acc,
-        }
-      },
-      {}
-    )
-
-    node.attributes = attributes
-    delete node.properties
-    delete node.position
-  })
+  return renameNodeAttribute(tree, 'properties', 'attributes')
 }
diff --git a/packages/gui/src/lib/transformers/plugins/remove-properties.ts b/packages/gui/src/lib/transformers/plugins/remove-properties.ts
new file mode 100644
index 00000000..26641384
--- /dev/null
+++ b/packages/gui/src/lib/transformers/plugins/remove-properties.ts
@@ -0,0 +1,26 @@
+import { visit } from 'unist-util-visit'
+
+type Options = {
+  propertiesToRemove?: string[]
+}
+export const removeProperties = (options: Options) => (tree: any) => {
+  const { propertiesToRemove } = options
+  visit(tree, 'element', (node) => {
+    const properties = Object.entries(node.properties).reduce(
+      (acc: any, curr: any) => {
+        const [key, value] = curr
+        if (propertiesToRemove?.includes(key)) {
+          return acc
+        }
+
+        return {
+          ...acc,
+          [key]: value,
+        }
+      },
+      {}
+    )
+
+    node.properties = properties
+  })
+}
diff --git a/packages/gui/src/lib/transformers/plugins/rename-node-attribute.ts b/packages/gui/src/lib/transformers/plugins/rename-node-attribute.ts
new file mode 100644
index 00000000..6f89097d
--- /dev/null
+++ b/packages/gui/src/lib/transformers/plugins/rename-node-attribute.ts
@@ -0,0 +1,18 @@
+import { visit } from 'unist-util-visit'
+
+export const renameNodeAttribute = (
+  tree: any,
+  currKey: string,
+  newKey: string
+) => {
+  visit(tree, 'element', (node) => {
+    if (!node[currKey]) {
+      return
+    }
+
+    const currValue: Record<string, string[]> = node[currKey]
+
+    node[newKey] = currValue
+    delete node[currKey]
+  })
+}
diff --git a/packages/gui/src/lib/transformers/plugins/transform-style-attributes.ts b/packages/gui/src/lib/transformers/plugins/transform-style-attributes.ts
new file mode 100644
index 00000000..70480e91
--- /dev/null
+++ b/packages/gui/src/lib/transformers/plugins/transform-style-attributes.ts
@@ -0,0 +1,16 @@
+import { isObject, isString } from 'lodash-es'
+import { visit } from 'unist-util-visit'
+
+export const transformStyleAttributes = () => (tree: any) => {
+  visit(tree, 'element', (node) => {
+    if (!node.style || isObject(node.style)) {
+      return
+    }
+
+    // TODO: Perform a style import
+    // https://github.com/components-ai/css.gui/issues/506
+    if (isString(node.style)) {
+      delete node.style
+    }
+  })
+}
diff --git a/packages/gui/src/lib/transformers/styles-to-editor-schema.ts b/packages/gui/src/lib/transformers/styles-to-editor-schema.ts
index b77808d9..e72aec5b 100644
--- a/packages/gui/src/lib/transformers/styles-to-editor-schema.ts
+++ b/packages/gui/src/lib/transformers/styles-to-editor-schema.ts
@@ -1,3 +1,5 @@
+import { isObject } from 'lodash-es'
+import { rawProperties } from '../../data/properties'
 import {
   addInternalCSSClassSyntax,
   isCSSClass,
@@ -5,7 +7,27 @@ import {
 } from '../classes'
 import { hasPseudoSyntax, removePseudoSyntax } from '../pseudos'
 
+const isLegacyColor = (property: string, value: any) =>
+  rawProperties[property]?.input === 'color' &&
+  isObject(value) &&
+  (value as any).value
+const isLegacyUrl = (value: any) => value?.type === 'url'
+
+const transformProperty = (property: string, value: any) => {
+  if (isLegacyColor(property, value)) {
+    return (value as any).value
+  }
+
+  return value
+}
+
 export const stylesToEditorSchema = (styles: any) => {
+  if (!styles) {
+    console.error(
+      'A styles object is required. For more information please read https://components.ai/open-source/css-gui/components/editor'
+    )
+    return {}
+  }
   const stylesSchema = Object.entries(styles).reduce((acc, curr) => {
     const [rawProperty, rawValue] = curr
 
@@ -19,6 +41,11 @@ export const stylesToEditorSchema = (styles: any) => {
       value = stylesToEditorSchema(rawValue)
     }
 
+    if (Array.isArray(value)) {
+      value = value.map((v) => transformComplexObject(v))
+    }
+    value = transformProperty(rawProperty, value)
+
     return {
       [property]: value,
       ...acc,
@@ -27,3 +54,36 @@ export const stylesToEditorSchema = (styles: any) => {
 
   return stylesSchema
 }
+
+const transformComplexObject = (value: any): any => {
+  if (typeof value === 'string' || typeof value === 'number') {
+    return value
+  }
+
+  if (isLegacyUrl(value)) {
+    return {
+      name: 'url',
+      arguments: value.arguments?.[0] || value.arguments,
+    }
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(transformComplexObject)
+  }
+
+  const transformed = Object.entries(value).reduce((acc, [k, val]) => {
+    let newValue = transformProperty(k, val)
+    if (Array.isArray(val)) {
+      newValue = val.map(transformComplexObject)
+    } else if (typeof val === 'object') {
+      newValue = transformComplexObject(val)
+    }
+
+    return {
+      ...acc,
+      [k]: newValue,
+    }
+  }, {})
+
+  return transformed
+}
diff --git a/packages/gui/src/lib/util.ts b/packages/gui/src/lib/util.ts
index cf246aa1..7a3c0f5d 100644
--- a/packages/gui/src/lib/util.ts
+++ b/packages/gui/src/lib/util.ts
@@ -1,4 +1,4 @@
-import { isPseudoClass, isPseudoElement } from './pseudos'
+import { isPseudoClass, isPseudoElement, isSelectorFunction } from './pseudos'
 import { isElement } from './elements'
 import { lowerCase, startCase, upperFirst } from 'lodash-es'
 import { EditorProps, EditorPropsWithLabel } from '../types/editor'
@@ -20,8 +20,8 @@ export function getInputProps<T extends object, K extends keyof T>(
   key: K
 ): EditorPropsWithLabel<T[typeof key]> {
   return {
-    value: props.value[key],
-    label: sentenceCase('' + key),
+    value: props.value && props.value[key],
+    label: sentenceCase('' + key.toString()),
     onChange: (newValue) => props.onChange({ ...props.value, [key]: newValue }),
   }
 }
@@ -31,6 +31,7 @@ export function isNestedSelector(selector: string): boolean {
     isElement(selector) ||
     isPseudoClass(selector) ||
     isPseudoElement(selector) ||
+    isSelectorFunction(selector) ||
     isInternalCSSClass(selector) ||
     false
   )
@@ -64,7 +65,7 @@ export function randomInt(min: number, max: number) {
 /**
  * Create a google font style sheet from an array of font data.
  */
-type FontFamilyData = {
+export type FontFamilyData = {
   name: string
   weights: (string | number)[]
   styles: string[]
diff --git a/packages/gui/src/types/css.ts b/packages/gui/src/types/css.ts
index 6d647a0a..e310a4c7 100644
--- a/packages/gui/src/types/css.ts
+++ b/packages/gui/src/types/css.ts
@@ -8,6 +8,7 @@ export type ColorObject = {
 }
 
 export type Color = string
+
 export type FontFamilyType = { [k: string]: any }
 
 export const enum FontRelativeLengthUnits {
@@ -47,7 +48,7 @@ export const enum CalcOperand {
   Mult = '*',
   Plus = '+',
   Sub = '-',
-  Div = '/'
+  Div = '/',
 }
 // Only use a subset for now to keep things simpler
 export type LengthPercentageUnit = LengthUnit | PercentageLengthUnits.Pct
@@ -98,6 +99,7 @@ export interface NumberPercentage {
 }
 
 export type CSSFunctionCalc = {
+  unit: 'calc'
   type: 'calc'
   arguments: CalcFunction
 }
@@ -107,13 +109,13 @@ export type CalcFunction = {
   operand: CalcOperand
 }
 export type CSSUnitValue = {
-  value: number | string
+  value: number
   unit: string
-  themeId?: string
+  themePath?: string
 }
-export type Dimension = Length | CSSFunctionCalc
+export type Dimension = CSSUnitValue | CSSFunctionCalc
 export type GenericLength = '0'
-export type Length = CSSUnitValue | GenericLength
+export type Length = CSSUnitValue
 // This isn't differentiated type-wise but it's good to keep track of
 // what actually accepts % values
 export type LengthPercentage = Length
@@ -141,7 +143,11 @@ export interface Position {
   y: Length
 }
 
-export const BOX_KEYWORDS = ['box', 'padding-box', 'content-box'] as const
+export const BOX_KEYWORDS = [
+  'border-box',
+  'padding-box',
+  'content-box',
+] as const
 export type Box = typeof BOX_KEYWORDS[number]
 
 export const SHAPE_BOX_KEYWORDS = [...BOX_KEYWORDS, 'margin-box'] as const
@@ -154,3 +160,30 @@ export const GEOMETRY_BOX_KEYWORDS = [
   'view-box',
 ] as const
 export type GeometryBox = typeof GEOMETRY_BOX_KEYWORDS[number]
+
+const primitives = [
+  'keyword',
+  'number',
+  'integer',
+  'percentage',
+  'length',
+  'time',
+  'string',
+  'color',
+] as const
+export type Primitive = typeof primitives[number]
+export function isPrimitive(type: string): type is Primitive {
+  return (primitives as readonly string[]).includes(type)
+}
+
+export interface ThemeValue {
+  type: 'theme'
+  path: string // theme path
+  index: number
+}
+
+export interface ThemeNamedValue {
+  type: 'theme'
+  path: string
+  key: string
+}
diff --git a/packages/gui/src/types/editor.ts b/packages/gui/src/types/editor.ts
index e1cad3d7..ef72234c 100644
--- a/packages/gui/src/types/editor.ts
+++ b/packages/gui/src/types/editor.ts
@@ -1,7 +1,11 @@
-export interface EditorProps<T> {
-  value: T
-  onChange(newValue: T): void
+export interface EditorProps<T, K = never> {
+  value: T | K
+  onChange(newValue: T | K): void
   onRemove?(): void
+  ruleset?: any
+  property?: string
 }
 
-export type EditorPropsWithLabel<T> = EditorProps<T> & { label: string }
+export type EditorPropsWithLabel<T, K = never> = EditorProps<T, K> & {
+  label: string
+}
diff --git a/packages/gui/src/types/modules.d.ts b/packages/gui/src/types/modules.d.ts
index f4bb8792..f449a497 100644
--- a/packages/gui/src/types/modules.d.ts
+++ b/packages/gui/src/types/modules.d.ts
@@ -1 +1,3 @@
 declare module 'culori'
+declare module 'escape-html'
+declare module 'get-contrast'
diff --git a/packages/gui/src/types/theme.ts b/packages/gui/src/types/theme.ts
index 059f3e58..488126e3 100644
--- a/packages/gui/src/types/theme.ts
+++ b/packages/gui/src/types/theme.ts
@@ -8,14 +8,17 @@ export type Theme = {
   breakpoints?: Breakpoint[]
   colors?: ColorGroup[]
   durations?: Duration[]
-  fonts?: FontFamily[]
+  fonts?: Record<string, string>
   fontSizes?: FontSize[]
+  fontWeights?: FontWeight[]
   gradients?: Gradient[]
   letterSpacings?: LetterSpacing[]
   lineHeights?: LineHeight[]
   space?: Spacing[]
   text?: TextStyle[]
   textShadows?: TextShadowEntry[]
+  transitions?: Transition[]
+  sizes?: Size[]
 }
 
 export type BorderRadius = {
@@ -138,6 +141,12 @@ export type Spacing = {
   name?: string
 }
 
+export type Size = {
+  id: string
+  value: number | string
+  unit: string
+}
+
 export type TextShadow = {
   offsetX: Length
   offsetY: Length
@@ -164,3 +173,8 @@ export type TextStyleProperty = {
   value: any
   unit?: string
 }
+
+export type Transition = {
+  id: string
+  name: string
+}
diff --git a/packages/gui/src/useCopyToClipboard.ts b/packages/gui/src/useCopyToClipboard.ts
new file mode 100644
index 00000000..eb48e11c
--- /dev/null
+++ b/packages/gui/src/useCopyToClipboard.ts
@@ -0,0 +1,82 @@
+import writeText from 'copy-to-clipboard'
+import { useCallback, useState, useRef, useEffect } from 'react'
+
+const useMountedState = () => {
+  const mountedRef = useRef(false)
+  const get = useCallback(() => mountedRef.current, [])
+
+  useEffect(() => {
+    mountedRef.current = true
+
+    return () => {
+      mountedRef.current = false
+    }
+  })
+
+  return get
+}
+
+type ClipboardState = {
+  value?: string | number | null
+  error?: Error
+  noUserInteraction?: boolean
+}
+
+export const useCopyToClipboard = () => {
+  const isMounted = useMountedState()
+  const [state, setState] = useState<ClipboardState>({
+    value: undefined,
+    error: undefined,
+    noUserInteraction: true,
+  })
+
+  const copyToClipboard = useCallback((value: string | null) => {
+    if (!isMounted()) {
+      return
+    }
+    let noUserInteraction
+    let normalizedValue
+    try {
+      // only strings and numbers casted to strings can be copied to clipboard
+      if (typeof value !== 'string' && typeof value !== 'number') {
+        const error = new Error(
+          `Cannot copy typeof ${typeof value} to clipboard, must be a string`
+        )
+        if (process.env.NODE_ENV === 'development') console.error(error)
+        const newState: ClipboardState = {
+          value,
+          error,
+          noUserInteraction: true,
+        }
+        return setState(newState)
+      }
+      // empty strings are also considered invalid
+      else if (value === '') {
+        const error = new Error(`Cannot copy empty string to clipboard.`)
+        if (process.env.NODE_ENV === 'development') console.error(error)
+        setState({
+          value,
+          error,
+          noUserInteraction: true,
+        })
+        return
+      }
+      normalizedValue = value.toString()
+      noUserInteraction = writeText(normalizedValue)
+      setState({
+        value: normalizedValue,
+        error: undefined,
+        noUserInteraction,
+      })
+    } catch (error) {
+      const newState: ClipboardState = {
+        value: normalizedValue,
+        error: error as Error,
+        noUserInteraction,
+      }
+      setState(newState)
+    }
+  }, [])
+
+  return copyToClipboard
+}
diff --git a/packages/gui/tsconfig.json b/packages/gui/tsconfig.json
index cd6c94d6..92aaca0a 100644
--- a/packages/gui/tsconfig.json
+++ b/packages/gui/tsconfig.json
@@ -1,5 +1,8 @@
 {
   "extends": "tsconfig/react-library.json",
   "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "module": "ESNext"
+  }
 }
diff --git a/readme.md b/readme.md
index af30da9d..9234d77c 100644
--- a/readme.md
+++ b/readme.md
@@ -2,9 +2,12 @@
 
 **_Visual development environment for CSS._**
 
+![CSS GUI screenshot](https://user-images.githubusercontent.com/1748143/173137122-53686102-fda8-4da8-b75f-dd78187b8666.png)
+
 CSS GUI is a visual toolkit for editing element styles on the web.
 It's theme-aware, performant, and can be composed into any React app.
 
+- [**Create and save designs →**](https://comp.new)
 - [**Read the documentation →**](https://components.ai/open-source/css-gui)
 - [**Play with a demo on CodeSandbox →**](https://codesandbox.io/s/cssgui-example-w1c9h5)
 - [**Watch an introduction on YouTube →**](https://www.youtube.com/watch?v=b6J2TGyDYc0)
@@ -14,25 +17,13 @@ It's theme-aware, performant, and can be composed into any React app.
 - Controls for 280 CSS properties
 - Theme aware so you can quickly select from your brand
 - Responsive value arrays
-- Support for all CSS units 
+- Support for all CSS units
 - Variable font support
 - +1000 Google fonts
 - Support for styling any element, pseudo-element or pseudo-class
 - Scrubbable number inputs
 - Smart default ranges
 
-## ⚠️ Under active development
-
-This project is a work in (rapid) progress.
-
-Over the next few weeks the API will be stabilizing as more functionality is added.
-CSS GUI only [supports a portion](https://components.ai/open-source/css-gui/unsupported)
-of the CSS spec currently, but the intention is to support it all.
-
-[We welcome any and all contributions](https://github.com/components-ai/css.gui/blob/main/.github/contributing.md).
-We'd love it if you try to experiment with CSS GUI. Please feel free to report bugs
-or make feature requests.
-
 ## Why?
 
 We want to improve creative coding and web development workflows by making
@@ -50,10 +41,17 @@ These controls are specifically built for CSS and will adhere to the CSS spec.
 This builds on the web platform itself, allowing the expressiveness of CSS/HTML/SVG
 to create endless outputs.
 
-It's our goal and intention to support the entire CSS spec beginning with the more
+It's our [goal and intention](https://components.ai/open-source/css-gui/unsupported)
+to support the entire CSS spec beginning with the more
 common controls like Length, Color, Keywords and expanding over time to more complex
 stacks and grammars (think gradients, background-image, box shadow, etc.).
 
+## How can you help?
+
+[We welcome any and all contributions](https://github.com/components-ai/css.gui/blob/main/.github/contributing.md).
+We'd love it if you try to experiment with CSS GUI and let us know how it goes. Please feel free to
+[report bugs or make feature requests](https://github.com/components-ai/css.gui/issues/new).
+
 ## Installation
 
 ```sh
@@ -84,8 +82,7 @@ export const MyEditor = () => {
 }
 ```
 
-For more customization, you can compose together your own controls and style
-pseudo-elements.
+For more customization, you can compose your own controls and style pseudo-elements.
 
 ```js
 import { useState } from 'react'
@@ -135,4 +132,4 @@ and its supporting packages.
 - [**dat.gui**](https://github.com/dataarts/dat.gui): well known, especially in the generative design/three space
 - [**leva**](https://github.com/pmndrs/leva): a React-based [pmndrs](https://pmnd.rs/) project that builds the entire control set from hooks
 - [**Blender**](https://blender.org): Shader and Geometry nodes allow for rapid exploration withiin the available rendering space
-- [**MDN Docs**](https://developer.mozilla.org/en-US/): have long been an amazing introduction to how various CSS property values will affect the appearance of a DOM element.
+- [**MDN docs**](https://developer.mozilla.org/en-US/): have long been an amazing introduction to how various CSS property values will affect the appearance of a DOM element.
diff --git a/yarn.lock b/yarn.lock
index f0ba7dd9..ed172099 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,30 +2,150 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@^7.0.0":
+"@ampproject/remapping@^2.1.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
+  integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.1.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
   integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
   dependencies:
     "@babel/highlight" "^7.16.7"
 
-"@babel/helper-module-imports@^7.12.13":
+"@babel/compat-data@^7.17.10":
+  version "7.18.5"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.5.tgz#acac0c839e317038c73137fbb6ef71a1d6238471"
+  integrity sha512-BxhE40PVCBxVEJsSBhB6UWyAuqJRxGsAw8BdHMJ3AKGydcwuWW4kOO3HmqBQAdcq/OP+/DlTVxLvsCzRTnZuGg==
+
+"@babel/core@^7.11.6", "@babel/core@^7.12.3":
+  version "7.18.5"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.5.tgz#c597fa680e58d571c28dda9827669c78cdd7f000"
+  integrity sha512-MGY8vg3DxMnctw0LdvSEojOsumc70g0t18gNyUdAZqB1Rpd1Bqo/svHGvt+UJ6JcGX+DIekGFDxxIWofBxLCnQ==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.18.2"
+    "@babel/helper-compilation-targets" "^7.18.2"
+    "@babel/helper-module-transforms" "^7.18.0"
+    "@babel/helpers" "^7.18.2"
+    "@babel/parser" "^7.18.5"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.18.5"
+    "@babel/types" "^7.18.4"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.1"
+    semver "^6.3.0"
+
+"@babel/generator@^7.18.2", "@babel/generator@^7.7.2":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.2.tgz#33873d6f89b21efe2da63fe554460f3df1c5880d"
+  integrity sha512-W1lG5vUwFvfMd8HVXqdfbuG7RuaSrTCCD8cl8fP8wOivdbtbIg2Db3IWUcgvfxKbbn6ZBGYRW/Zk1MIwK49mgw==
+  dependencies:
+    "@babel/types" "^7.18.2"
+    "@jridgewell/gen-mapping" "^0.3.0"
+    jsesc "^2.5.1"
+
+"@babel/helper-compilation-targets@^7.18.2":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.2.tgz#67a85a10cbd5fc7f1457fec2e7f45441dc6c754b"
+  integrity sha512-s1jnPotJS9uQnzFtiZVBUxe67CuBa679oWFHpxYYnTpRL/1ffhyX44R9uYiXoa/pLXcY9H2moJta0iaanlk/rQ==
+  dependencies:
+    "@babel/compat-data" "^7.17.10"
+    "@babel/helper-validator-option" "^7.16.7"
+    browserslist "^4.20.2"
+    semver "^6.3.0"
+
+"@babel/helper-environment-visitor@^7.16.7", "@babel/helper-environment-visitor@^7.18.2":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.2.tgz#8a6d2dedb53f6bf248e31b4baf38739ee4a637bd"
+  integrity sha512-14GQKWkX9oJzPiQQ7/J36FTXcD4kSp8egKjO9nINlSKiHITRA9q/R74qu8S9xlc/b/yjsJItQUeeh3xnGN0voQ==
+
+"@babel/helper-function-name@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz#136fcd54bc1da82fcb47565cf16fd8e444b1ff12"
+  integrity sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.17.0"
+
+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
   integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-module-transforms@^7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.0.tgz#baf05dec7a5875fb9235bd34ca18bad4e21221cd"
+  integrity sha512-kclUYSUBIjlvnzN2++K9f2qzYKFgjmnmjwL4zlmU5f8ZtzgWe8s0rUPSTGy2HmK4P8T52MQsS+HTQAgZd3dMEA==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-simple-access" "^7.17.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.18.0"
+    "@babel/types" "^7.18.0"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.17.12", "@babel/helper-plugin-utils@^7.8.0":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96"
+  integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==
+
 "@babel/helper-plugin-utils@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
   integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
 
+"@babel/helper-simple-access@^7.17.7":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.2.tgz#4dc473c2169ac3a1c9f4a51cfcd091d1c36fcff9"
+  integrity sha512-7LIrjYzndorDY88MycupkpQLKS1AFfsVRm2k/9PtKScSy5tZq0McZTj+DiMRynboZfIqOKvo03pmhTaUgiD6fQ==
+  dependencies:
+    "@babel/types" "^7.18.2"
+
+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-validator-identifier@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
   integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
 
+"@babel/helper-validator-option@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
+  integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
+
+"@babel/helpers@^7.18.2":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.18.2.tgz#970d74f0deadc3f5a938bfa250738eb4ac889384"
+  integrity sha512-j+d+u5xT5utcQSzrh9p+PaJX94h++KN+ng9b9WEJq7pkUPAd61FGqhjuUEdfknb3E/uDBb7ruwEeKkIxNJPIrg==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.18.2"
+    "@babel/types" "^7.18.2"
+
 "@babel/highlight@^7.16.7":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.9.tgz#61b2ee7f32ea0454612def4fccdae0de232b73e3"
@@ -35,6 +155,46 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.16.7", "@babel/parser@^7.18.5":
+  version "7.18.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.5.tgz#337062363436a893a2d22faa60be5bb37091c83c"
+  integrity sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw==
+
+"@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-bigint@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.8.3":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-import-meta@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
+  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-jsx@^7.12.13":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
@@ -42,6 +202,62 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-top-level-await@^7.8.3":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.7.2":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.17.12.tgz#b54fc3be6de734a56b87508f99d6428b5b605a7b"
+  integrity sha512-TYY0SXFiO31YXtNg3HtFwNJHjLsAyIIhAhNWkQ5whPPS7HWUFlg9z0Ta4qAQNjQbP1wsSt/oKkmZ/4/WWdMUpw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/runtime-corejs3@^7.10.2":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.17.9.tgz#3d02d0161f0fbf3ada8e88159375af97690f4055"
@@ -50,12 +266,45 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.8", "@babel/runtime@^7.16.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2":
-  version "7.17.9"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
-  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.8", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
+  integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
   dependencies:
-    regenerator-runtime "^0.13.4"
+    regenerator-runtime "^0.13.11"
+
+"@babel/template@^7.16.7", "@babel/template@^7.3.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/traverse@^7.18.0", "@babel/traverse@^7.18.2", "@babel/traverse@^7.18.5", "@babel/traverse@^7.7.2":
+  version "7.18.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.5.tgz#94a8195ad9642801837988ab77f36e992d9a20cd"
+  integrity sha512-aKXj1KT66sBj0vVzk6rEeAO6Z9aiiQ68wfDgge3nHhA/my6xMM/7HGQUNumKZaoa2qUPQ5whJG9aAifsxUKfLA==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.18.2"
+    "@babel/helper-environment-visitor" "^7.18.2"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.18.5"
+    "@babel/types" "^7.18.4"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.0.0", "@babel/types@^7.17.0", "@babel/types@^7.18.0", "@babel/types@^7.18.2", "@babel/types@^7.18.4", "@babel/types@^7.3.0", "@babel/types@^7.3.3":
+  version "7.18.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.4.tgz#27eae9b9fd18e9dccc3f9d6ad051336f307be354"
+  integrity sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
 
 "@babel/types@^7.16.7":
   version "7.17.0"
@@ -65,66 +314,72 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@changesets/apply-release-plan@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@changesets/apply-release-plan/-/apply-release-plan-6.0.0.tgz#6c663ff99d919bba3902343d76c35cbbbb046520"
-  integrity sha512-gp6nIdVdfYdwKww2+f8whckKmvfE4JEm4jJgBhTmooi0uzHWhnxvk6JIzQi89qEAMINN0SeVNnXiAtbFY0Mj3w==
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
+  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
+
+"@changesets/apply-release-plan@^6.1.3":
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/@changesets/apply-release-plan/-/apply-release-plan-6.1.3.tgz#3bcc0bd57ba00d50d20df7d0141f1a9b2134eaf7"
+  integrity sha512-ECDNeoc3nfeAe1jqJb5aFQX7CqzQhD2klXRez2JDb/aVpGUbX673HgKrnrgJRuQR/9f2TtLoYIzrGB9qwD77mg==
   dependencies:
-    "@babel/runtime" "^7.10.4"
-    "@changesets/config" "^2.0.0"
+    "@babel/runtime" "^7.20.1"
+    "@changesets/config" "^2.3.0"
     "@changesets/get-version-range-type" "^0.3.2"
-    "@changesets/git" "^1.3.2"
-    "@changesets/types" "^5.0.0"
+    "@changesets/git" "^2.0.0"
+    "@changesets/types" "^5.2.1"
     "@manypkg/get-packages" "^1.1.3"
     detect-indent "^6.0.0"
     fs-extra "^7.0.1"
     lodash.startcase "^4.4.0"
     outdent "^0.5.0"
-    prettier "^1.19.1"
+    prettier "^2.7.1"
     resolve-from "^5.0.0"
     semver "^5.4.1"
 
-"@changesets/assemble-release-plan@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@changesets/assemble-release-plan/-/assemble-release-plan-5.1.2.tgz#63ed3a00f62b5af08a82e83801a252ac9726c625"
-  integrity sha512-nOFyDw4APSkY/vh5WNwGEtThPgEjVShp03PKVdId6wZTJALVcAALCSLmDRfeqjE2z9EsGJb7hZdDlziKlnqZgw==
+"@changesets/assemble-release-plan@^5.2.3":
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/@changesets/assemble-release-plan/-/assemble-release-plan-5.2.3.tgz#5ce6191c6e193d40b566a7b0e01690cfb106f4db"
+  integrity sha512-g7EVZCmnWz3zMBAdrcKhid4hkHT+Ft1n0mLussFMcB1dE2zCuwcvGoy9ec3yOgPGF4hoMtgHaMIk3T3TBdvU9g==
   dependencies:
-    "@babel/runtime" "^7.10.4"
+    "@babel/runtime" "^7.20.1"
     "@changesets/errors" "^0.1.4"
-    "@changesets/get-dependents-graph" "^1.3.2"
-    "@changesets/types" "^5.0.0"
+    "@changesets/get-dependents-graph" "^1.3.5"
+    "@changesets/types" "^5.2.1"
     "@manypkg/get-packages" "^1.1.3"
     semver "^5.4.1"
 
-"@changesets/changelog-git@^0.1.11":
-  version "0.1.11"
-  resolved "https://registry.yarnpkg.com/@changesets/changelog-git/-/changelog-git-0.1.11.tgz#80eb45d3562aba2164f25ccc31ac97b9dcd1ded3"
-  integrity sha512-sWJvAm+raRPeES9usNpZRkooeEB93lOpUN0Lmjz5vhVAb7XGIZrHEJ93155bpE1S0c4oJ5Di9ZWgzIwqhWP/Wg==
+"@changesets/changelog-git@^0.1.14":
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/@changesets/changelog-git/-/changelog-git-0.1.14.tgz#852caa7727dcf91497c131d05bc2cd6248532ada"
+  integrity sha512-+vRfnKtXVWsDDxGctOfzJsPhaCdXRYoe+KyWYoq5X/GqoISREiat0l3L8B0a453B2B4dfHGcZaGyowHbp9BSaA==
   dependencies:
-    "@changesets/types" "^5.0.0"
+    "@changesets/types" "^5.2.1"
 
-"@changesets/cli@^2.22.0":
-  version "2.22.0"
-  resolved "https://registry.yarnpkg.com/@changesets/cli/-/cli-2.22.0.tgz#3bdbfb4a7a81ef37f63114e77da84e23f906b763"
-  integrity sha512-4bA3YoBkd5cm5WUxmrR2N9WYE7EeQcM+R3bVYMUj2NvffkQVpU3ckAI+z8UICoojq+HRl2OEwtz+S5UBmYY4zw==
+"@changesets/cli@^2.26.0":
+  version "2.26.0"
+  resolved "https://registry.yarnpkg.com/@changesets/cli/-/cli-2.26.0.tgz#f215ddb2b41574ffd0dda9cd77fac927ba048fd3"
+  integrity sha512-0cbTiDms+ICTVtEwAFLNW0jBNex9f5+fFv3I771nBvdnV/mOjd1QJ4+f8KtVSOrwD9SJkk9xbDkWFb0oXd8d1Q==
   dependencies:
-    "@babel/runtime" "^7.10.4"
-    "@changesets/apply-release-plan" "^6.0.0"
-    "@changesets/assemble-release-plan" "^5.1.2"
-    "@changesets/changelog-git" "^0.1.11"
-    "@changesets/config" "^2.0.0"
+    "@babel/runtime" "^7.20.1"
+    "@changesets/apply-release-plan" "^6.1.3"
+    "@changesets/assemble-release-plan" "^5.2.3"
+    "@changesets/changelog-git" "^0.1.14"
+    "@changesets/config" "^2.3.0"
     "@changesets/errors" "^0.1.4"
-    "@changesets/get-dependents-graph" "^1.3.2"
-    "@changesets/get-release-plan" "^3.0.8"
-    "@changesets/git" "^1.3.2"
+    "@changesets/get-dependents-graph" "^1.3.5"
+    "@changesets/get-release-plan" "^3.0.16"
+    "@changesets/git" "^2.0.0"
     "@changesets/logger" "^0.0.5"
-    "@changesets/pre" "^1.0.11"
-    "@changesets/read" "^0.5.5"
-    "@changesets/types" "^5.0.0"
-    "@changesets/write" "^0.1.8"
+    "@changesets/pre" "^1.0.14"
+    "@changesets/read" "^0.5.9"
+    "@changesets/types" "^5.2.1"
+    "@changesets/write" "^0.2.3"
     "@manypkg/get-packages" "^1.1.3"
     "@types/is-ci" "^3.0.0"
     "@types/semver" "^6.0.0"
+    ansi-colors "^4.1.3"
     chalk "^2.1.0"
     enquirer "^2.3.0"
     external-editor "^3.1.0"
@@ -139,17 +394,17 @@
     semver "^5.4.1"
     spawndamnit "^2.0.0"
     term-size "^2.1.0"
-    tty-table "^2.8.10"
+    tty-table "^4.1.5"
 
-"@changesets/config@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@changesets/config/-/config-2.0.0.tgz#1770fdfeba2155cf07154c37e96b55cbd27969f0"
-  integrity sha512-r5bIFY6CN3K6SQ+HZbjyE3HXrBIopONR47mmX7zUbORlybQXtympq9rVAOzc0Oflbap8QeIexc+hikfZoREXDg==
+"@changesets/config@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@changesets/config/-/config-2.3.0.tgz#bff074d6492fa772cee139f9a04efa4cd56445bb"
+  integrity sha512-EgP/px6mhCx8QeaMAvWtRrgyxW08k/Bx2tpGT+M84jEdX37v3VKfh4Cz1BkwrYKuMV2HZKeHOh8sHvja/HcXfQ==
   dependencies:
     "@changesets/errors" "^0.1.4"
-    "@changesets/get-dependents-graph" "^1.3.2"
+    "@changesets/get-dependents-graph" "^1.3.5"
     "@changesets/logger" "^0.0.5"
-    "@changesets/types" "^5.0.0"
+    "@changesets/types" "^5.2.1"
     "@manypkg/get-packages" "^1.1.3"
     fs-extra "^7.0.1"
     micromatch "^4.0.2"
@@ -161,28 +416,28 @@
   dependencies:
     extendable-error "^0.1.5"
 
-"@changesets/get-dependents-graph@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.2.tgz#f3ec7ce75f4afb6e3e4b6a87fde065f552c85998"
-  integrity sha512-tsqA6qZRB86SQuApSoDvI8yEWdyIlo/WLI4NUEdhhxLMJ0dapdeT6rUZRgSZzK1X2nv5YwR0MxQBbDAiDibKrg==
+"@changesets/get-dependents-graph@^1.3.5":
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.5.tgz#f94c6672d2f9a87aa35512eea74550585ba41c21"
+  integrity sha512-w1eEvnWlbVDIY8mWXqWuYE9oKhvIaBhzqzo4ITSJY9hgoqQ3RoBqwlcAzg11qHxv/b8ReDWnMrpjpKrW6m1ZTA==
   dependencies:
-    "@changesets/types" "^5.0.0"
+    "@changesets/types" "^5.2.1"
     "@manypkg/get-packages" "^1.1.3"
     chalk "^2.1.0"
     fs-extra "^7.0.1"
     semver "^5.4.1"
 
-"@changesets/get-release-plan@^3.0.8":
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/@changesets/get-release-plan/-/get-release-plan-3.0.8.tgz#2ac7c4f7903aedede3d27af66311ad1db7937e5d"
-  integrity sha512-TJYiWNuP0Lzu2dL/KHuk75w7TkiE5HqoYirrXF7SJIxkhlgH9toQf2C7IapiFTObtuF1qDN8HJAX1CuIOwXldg==
-  dependencies:
-    "@babel/runtime" "^7.10.4"
-    "@changesets/assemble-release-plan" "^5.1.2"
-    "@changesets/config" "^2.0.0"
-    "@changesets/pre" "^1.0.11"
-    "@changesets/read" "^0.5.5"
-    "@changesets/types" "^5.0.0"
+"@changesets/get-release-plan@^3.0.16":
+  version "3.0.16"
+  resolved "https://registry.yarnpkg.com/@changesets/get-release-plan/-/get-release-plan-3.0.16.tgz#5d9cfc4ffda02c496ef0fde407210de8e3a0fb19"
+  integrity sha512-OpP9QILpBp1bY2YNIKFzwigKh7Qe9KizRsZomzLe6pK8IUo8onkAAVUD8+JRKSr8R7d4+JRuQrfSSNlEwKyPYg==
+  dependencies:
+    "@babel/runtime" "^7.20.1"
+    "@changesets/assemble-release-plan" "^5.2.3"
+    "@changesets/config" "^2.3.0"
+    "@changesets/pre" "^1.0.14"
+    "@changesets/read" "^0.5.9"
+    "@changesets/types" "^5.2.1"
     "@manypkg/get-packages" "^1.1.3"
 
 "@changesets/get-version-range-type@^0.3.2":
@@ -190,16 +445,17 @@
   resolved "https://registry.yarnpkg.com/@changesets/get-version-range-type/-/get-version-range-type-0.3.2.tgz#8131a99035edd11aa7a44c341cbb05e668618c67"
   integrity sha512-SVqwYs5pULYjYT4op21F2pVbcrca4qA/bAA3FmFXKMN7Y+HcO8sbZUTx3TAy2VXulP2FACd1aC7f2nTuqSPbqg==
 
-"@changesets/git@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@changesets/git/-/git-1.3.2.tgz#336051d9a6d965806b1bc473559a9a2cc70773a6"
-  integrity sha512-p5UL+urAg0Nnpt70DLiBe2iSsMcDubTo9fTOD/61krmcJ466MGh71OHwdAwu1xG5+NKzeysdy1joRTg8CXcEXA==
+"@changesets/git@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@changesets/git/-/git-2.0.0.tgz#8de57649baf13a86eb669a25fa51bcad5cea517f"
+  integrity sha512-enUVEWbiqUTxqSnmesyJGWfzd51PY4H7mH9yUw0hPVpZBJ6tQZFMU3F3mT/t9OJ/GjyiM4770i+sehAn6ymx6A==
   dependencies:
-    "@babel/runtime" "^7.10.4"
+    "@babel/runtime" "^7.20.1"
     "@changesets/errors" "^0.1.4"
-    "@changesets/types" "^5.0.0"
+    "@changesets/types" "^5.2.1"
     "@manypkg/get-packages" "^1.1.3"
     is-subdir "^1.1.1"
+    micromatch "^4.0.2"
     spawndamnit "^2.0.0"
 
 "@changesets/logger@^0.0.5":
@@ -209,35 +465,35 @@
   dependencies:
     chalk "^2.1.0"
 
-"@changesets/parse@^0.3.13":
-  version "0.3.13"
-  resolved "https://registry.yarnpkg.com/@changesets/parse/-/parse-0.3.13.tgz#82788c1fc18da4750b07357a7a06142d0d975aa1"
-  integrity sha512-wh9Ifa0dungY6d2nMz6XxF6FZ/1I7j+mEgPAqrIyKS64nifTh1Ua82qKKMMK05CL7i4wiB2NYc3SfnnCX3RVeA==
+"@changesets/parse@^0.3.16":
+  version "0.3.16"
+  resolved "https://registry.yarnpkg.com/@changesets/parse/-/parse-0.3.16.tgz#f8337b70aeb476dc81745ab3294022909bc4a84a"
+  integrity sha512-127JKNd167ayAuBjUggZBkmDS5fIKsthnr9jr6bdnuUljroiERW7FBTDNnNVyJ4l69PzR57pk6mXQdtJyBCJKg==
   dependencies:
-    "@changesets/types" "^5.0.0"
+    "@changesets/types" "^5.2.1"
     js-yaml "^3.13.1"
 
-"@changesets/pre@^1.0.11":
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/@changesets/pre/-/pre-1.0.11.tgz#46a56790fdceabd03407559bbf91340c8e83fb6a"
-  integrity sha512-CXZnt4SV9waaC9cPLm7818+SxvLKIDHUxaiTXnJYDp1c56xIexx1BNfC1yMuOdzO2a3rAIcZua5Odxr3dwSKfg==
+"@changesets/pre@^1.0.14":
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/@changesets/pre/-/pre-1.0.14.tgz#9df73999a4d15804da7381358d77bb37b00ddf0f"
+  integrity sha512-dTsHmxQWEQekHYHbg+M1mDVYFvegDh9j/kySNuDKdylwfMEevTeDouR7IfHNyVodxZXu17sXoJuf2D0vi55FHQ==
   dependencies:
-    "@babel/runtime" "^7.10.4"
+    "@babel/runtime" "^7.20.1"
     "@changesets/errors" "^0.1.4"
-    "@changesets/types" "^5.0.0"
+    "@changesets/types" "^5.2.1"
     "@manypkg/get-packages" "^1.1.3"
     fs-extra "^7.0.1"
 
-"@changesets/read@^0.5.5":
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/@changesets/read/-/read-0.5.5.tgz#9ed90ef3e9f1ba3436ba5580201854a3f4163058"
-  integrity sha512-bzonrPWc29Tsjvgh+8CqJ0apQOwWim0zheeD4ZK44ApSa/GudnZJTODtA3yNOOuQzeZmL0NUebVoHIurtIkA7w==
+"@changesets/read@^0.5.9":
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/@changesets/read/-/read-0.5.9.tgz#a1b63a82b8e9409738d7a0f9cc39b6d7c28cbab0"
+  integrity sha512-T8BJ6JS6j1gfO1HFq50kU3qawYxa4NTbI/ASNVVCBTsKquy2HYwM9r7ZnzkiMe8IEObAJtUVGSrePCOxAK2haQ==
   dependencies:
-    "@babel/runtime" "^7.10.4"
-    "@changesets/git" "^1.3.2"
+    "@babel/runtime" "^7.20.1"
+    "@changesets/git" "^2.0.0"
     "@changesets/logger" "^0.0.5"
-    "@changesets/parse" "^0.3.13"
-    "@changesets/types" "^5.0.0"
+    "@changesets/parse" "^0.3.16"
+    "@changesets/types" "^5.2.1"
     chalk "^2.1.0"
     fs-extra "^7.0.1"
     p-filter "^2.1.0"
@@ -252,21 +508,21 @@
   resolved "https://registry.yarnpkg.com/@changesets/types/-/types-4.1.0.tgz#fb8f7ca2324fd54954824e864f9a61a82cb78fe0"
   integrity sha512-LDQvVDv5Kb50ny2s25Fhm3d9QSZimsoUGBsUioj6MC3qbMUCuC8GPIvk/M6IvXx3lYhAs0lwWUQLb+VIEUCECw==
 
-"@changesets/types@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@changesets/types/-/types-5.0.0.tgz#d5eb52d074bc0358ce47d54bca54370b907812a0"
-  integrity sha512-IT1kBLSbAgTS4WtpU6P5ko054hq12vk4tgeIFRVE7Vnm4a/wgbNvBalgiKP0MjEXbCkZbItiGQHkCGxYWR55sA==
+"@changesets/types@^5.2.1":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@changesets/types/-/types-5.2.1.tgz#a228c48004aa8a93bce4be2d1d31527ef3bf21f6"
+  integrity sha512-myLfHbVOqaq9UtUKqR/nZA/OY7xFjQMdfgfqeZIBK4d0hA6pgxArvdv8M+6NUzzBsjWLOtvApv8YHr4qM+Kpfg==
 
-"@changesets/write@^0.1.8":
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/@changesets/write/-/write-0.1.8.tgz#feed408f644c496bc52afc4dd1353670b4152ecb"
-  integrity sha512-oIHeFVMuP6jf0TPnKPpaFpvvAf3JBc+s2pmVChbeEgQTBTALoF51Z9kqxQfG4XONZPHZnqkmy564c7qohhhhTQ==
+"@changesets/write@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@changesets/write/-/write-0.2.3.tgz#baf6be8ada2a67b9aba608e251bfea4fdc40bc63"
+  integrity sha512-Dbamr7AIMvslKnNYsLFafaVORx4H0pvCA2MHqgtNCySMe1blImEyAEOzDmcgKAkgz4+uwoLz7demIrX+JBr/Xw==
   dependencies:
-    "@babel/runtime" "^7.10.4"
-    "@changesets/types" "^5.0.0"
+    "@babel/runtime" "^7.20.1"
+    "@changesets/types" "^5.2.1"
     fs-extra "^7.0.1"
     human-id "^1.0.2"
-    prettier "^1.19.1"
+    prettier "^2.7.1"
 
 "@compai/logo@^0.1.0":
   version "0.1.0"
@@ -371,35 +627,314 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
-"@eslint/eslintrc@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.2.1.tgz#8b5e1c49f4077235516bc9ec7d41378c0f69b8c6"
-  integrity sha512-bxvbYnBPN1Gibwyp6NrpnFzA3YtRL3BBAyEAFVIpNTm2Rn4Vy87GA5M4aSn3InRrlsbX5N0GW7XIx+U4SAEKdQ==
+"@esbuild/linux-loong64@0.15.6":
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.6.tgz#45be4184f00e505411bc265a05e709764114acd8"
+  integrity sha512-hqmVU2mUjH6J2ZivHphJ/Pdse2ZD+uGCHK0uvsiLDk/JnSedEVj77CiVUnbMKuU4tih1TZZL8tG9DExQg/GZsw==
+
+"@eslint/eslintrc@^1.3.3":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95"
+  integrity sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.3.1"
-    globals "^13.9.0"
+    espree "^9.4.0"
+    globals "^13.15.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
     js-yaml "^4.1.0"
-    minimatch "^3.0.4"
+    minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@humanwhocodes/config-array@^0.9.2":
-  version "0.9.5"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"
-  integrity sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==
+"@floating-ui/core@^0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.7.3.tgz#d274116678ffae87f6b60e90f88cc4083eefab86"
+  integrity sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==
+
+"@floating-ui/dom@^0.5.3":
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.5.4.tgz#4eae73f78bcd4bd553ae2ade30e6f1f9c73fe3f1"
+  integrity sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==
+  dependencies:
+    "@floating-ui/core" "^0.7.3"
+
+"@floating-ui/react-dom@0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-0.7.2.tgz#0bf4ceccb777a140fc535c87eb5d6241c8e89864"
+  integrity sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==
+  dependencies:
+    "@floating-ui/dom" "^0.5.3"
+    use-isomorphic-layout-effect "^1.1.1"
+
+"@humanwhocodes/config-array@^0.11.6":
+  version "0.11.7"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.7.tgz#38aec044c6c828f6ed51d5d7ae3d9b9faf6dbb0f"
+  integrity sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==
   dependencies:
     "@humanwhocodes/object-schema" "^1.2.1"
     debug "^4.1.1"
-    minimatch "^3.0.4"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
 "@humanwhocodes/object-schema@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
+  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
+  dependencies:
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    get-package-type "^0.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
+
+"@istanbuljs/schema@^0.1.2":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
+  integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
+
+"@jest/console@^28.1.1":
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-28.1.1.tgz#305f8ca50b6e70413839f54c0e002b60a0f2fd7d"
+  integrity sha512-0RiUocPVFEm3WRMOStIHbRWllG6iW6E3/gUPnf4lkrVFyXIIDeCe+vlKeYyFOMhB2EPE6FLFCNADSOOQMaqvyA==
+  dependencies:
+    "@jest/types" "^28.1.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^28.1.1"
+    jest-util "^28.1.1"
+    slash "^3.0.0"
+
+"@jest/core@^28.1.1":
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-28.1.1.tgz#086830bec6267accf9af5ca76f794858e9f9f092"
+  integrity sha512-3pYsBoZZ42tXMdlcFeCc/0j9kOlK7MYuXs2B1QbvDgMoW1K9NJ4G/VYvIbMb26iqlkTfPHo7SC2JgjDOk/mxXw==
+  dependencies:
+    "@jest/console" "^28.1.1"
+    "@jest/reporters" "^28.1.1"
+    "@jest/test-result" "^28.1.1"
+    "@jest/transform" "^28.1.1"
+    "@jest/types" "^28.1.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^28.0.2"
+    jest-config "^28.1.1"
+    jest-haste-map "^28.1.1"
+    jest-message-util "^28.1.1"
+    jest-regex-util "^28.0.2"
+    jest-resolve "^28.1.1"
+    jest-resolve-dependencies "^28.1.1"
+    jest-runner "^28.1.1"
+    jest-runtime "^28.1.1"
+    jest-snapshot "^28.1.1"
+    jest-util "^28.1.1"
+    jest-validate "^28.1.1"
+    jest-watcher "^28.1.1"
+    micromatch "^4.0.4"
+    pretty-format "^28.1.1"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/environment@^28.1.1":
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-28.1.1.tgz#c4cbf85283278d768f816ebd1a258ea6f9e39d4f"
+  integrity sha512-9auVQ2GzQ7nrU+lAr8KyY838YahElTX9HVjbQPPS2XjlxQ+na18G113OoBhyBGBtD6ZnO/SrUy5WR8EzOj1/Uw==
+  dependencies:
+    "@jest/fake-timers" "^28.1.1"
+    "@jest/types" "^28.1.1"
+    "@types/node" "*"
+    jest-mock "^28.1.1"
+
+"@jest/expect-utils@^28.1.1":
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-28.1.1.tgz#d84c346025b9f6f3886d02c48a6177e2b0360587"
+  integrity sha512-n/ghlvdhCdMI/hTcnn4qV57kQuV9OTsZzH1TTCVARANKhl6hXJqLKUkwX69ftMGpsbpt96SsDD8n8LD2d9+FRw==
+  dependencies:
+    jest-get-type "^28.0.2"
+
+"@jest/expect@^28.1.1":
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-28.1.1.tgz#ea4fcc8504b45835029221c0dc357c622a761326"
+  integrity sha512-/+tQprrFoT6lfkMj4mW/mUIfAmmk/+iQPmg7mLDIFOf2lyf7EBHaS+x3RbeR0VZVMe55IvX7QRoT/2aK3AuUXg==
+  dependencies:
+    expect "^28.1.1"
+    jest-snapshot "^28.1.1"
+
+"@jest/fake-timers@^28.1.1":
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-28.1.1.tgz#47ce33296ab9d680c76076d51ddbe65ceb3337f1"
+  integrity sha512-BY/3+TyLs5+q87rGWrGUY5f8e8uC3LsVHS9Diz8+FV3ARXL4sNnkLlIB8dvDvRrp+LUCGM+DLqlsYubizGUjIA==
+  dependencies:
+    "@jest/types" "^28.1.1"
+    "@sinonjs/fake-timers" "^9.1.1"
+    "@types/node" "*"
+    jest-message-util "^28.1.1"
+    jest-mock "^28.1.1"
+    jest-util "^28.1.1"
+
+"@jest/globals@^28.1.1":
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-28.1.1.tgz#c0a7977f85e26279cc090d9adcdf82b8a34c4061"
+  integrity sha512-dEgl/6v7ToB4vXItdvcltJBgny0xBE6xy6IYQrPJAJggdEinGxCDMivNv7sFzPcTITGquXD6UJwYxfJ/5ZwDSg==
+  dependencies:
+    "@jest/environment" "^28.1.1"
+    "@jest/expect" "^28.1.1"
+    "@jest/types" "^28.1.1"
+
+"@jest/reporters@^28.1.1":
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-28.1.1.tgz#9389f4bb3cce4d9b586f6195f83c79cd2a1c8662"
+  integrity sha512-597Zj4D4d88sZrzM4atEGLuO7SdA/YrOv9SRXHXRNC+/FwPCWxZhBAEzhXoiJzfRwn8zes/EjS8Lo6DouGN5Gg==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^28.1.1"
+    "@jest/test-result" "^28.1.1"
+    "@jest/transform" "^28.1.1"
+    "@jest/types" "^28.1.1"
+    "@jridgewell/trace-mapping" "^0.3.7"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^5.1.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-message-util "^28.1.1"
+    jest-util "^28.1.1"
+    jest-worker "^28.1.1"
+    slash "^3.0.0"
+    string-length "^4.0.1"
+    strip-ansi "^6.0.0"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^9.0.0"
+
+"@jest/schemas@^28.0.2":
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-28.0.2.tgz#08c30df6a8d07eafea0aef9fb222c5e26d72e613"
+  integrity sha512-YVDJZjd4izeTDkij00vHHAymNXQ6WWsdChFRK86qck6Jpr3DCL5W3Is3vslviRlP+bLuMYRLbdp98amMvqudhA==
+  dependencies:
+    "@sinclair/typebox" "^0.23.3"
+
+"@jest/source-map@^28.0.2":
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-28.0.2.tgz#914546f4410b67b1d42c262a1da7e0406b52dc90"
+  integrity sha512-Y9dxC8ZpN3kImkk0LkK5XCEneYMAXlZ8m5bflmSL5vrwyeUpJfentacCUg6fOb8NOpOO7hz2+l37MV77T6BFPw==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.7"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+
+"@jest/test-result@^28.1.1":
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-28.1.1.tgz#c6f18d1bbb01aa88925dd687872a75f8414b317a"
+  integrity sha512-hPmkugBktqL6rRzwWAtp1JtYT4VHwv8OQ+9lE5Gymj6dHzubI/oJHMUpPOt8NrdVWSrz9S7bHjJUmv2ggFoUNQ==
+  dependencies:
+    "@jest/console" "^28.1.1"
+    "@jest/types" "^28.1.1"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^28.1.1":
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-28.1.1.tgz#f594ee2331df75000afe0d1ae3237630ecec732e"
+  integrity sha512-nuL+dNSVMcWB7OOtgb0EGH5AjO4UBCt68SLP08rwmC+iRhyuJWS9MtZ/MpipxFwKAlHFftbMsydXqWre8B0+XA==
+  dependencies:
+    "@jest/test-result" "^28.1.1"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^28.1.1"
+    slash "^3.0.0"
+
+"@jest/transform@^28.1.1":
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-28.1.1.tgz#83541f2a3f612077c8501f49cc4e205d4e4a6b27"
+  integrity sha512-PkfaTUuvjUarl1EDr5ZQcCA++oXkFCP9QFUkG0yVKVmNObjhrqDy0kbMpMebfHWm3CCDHjYNem9eUSH8suVNHQ==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/types" "^28.1.1"
+    "@jridgewell/trace-mapping" "^0.3.7"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^28.1.1"
+    jest-regex-util "^28.0.2"
+    jest-util "^28.1.1"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    write-file-atomic "^4.0.1"
+
+"@jest/types@^28.1.1":
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-28.1.1.tgz#d059bbc80e6da6eda9f081f293299348bd78ee0b"
+  integrity sha512-vRXVqSg1VhDnB8bWcmvLzmg0Bt9CRKVgHPXqYwvWMX3TvAjeO+nRuK6+VdTKCtWOvYlmkF/HqNAL/z+N3B53Kw==
+  dependencies:
+    "@jest/schemas" "^28.0.2"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
+"@jridgewell/gen-mapping@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
+  integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.0"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@jridgewell/gen-mapping@^0.3.0":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz#cf92a983c83466b8c0ce9124fadeaf09f7c66ea9"
+  integrity sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.0"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/resolve-uri@^3.0.3":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz#30cd49820a962aff48c8fffc5cd760151fca61fe"
+  integrity sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==
+
+"@jridgewell/set-array@^1.0.0":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.1.tgz#36a6acc93987adcf0ba50c66908bd0b70de8afea"
+  integrity sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==
+
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.13"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz#b6461fb0c2964356c469e115f504c95ad97ab88c"
+  integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
+
+"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.7", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.13"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz#dcfe3e95f224c8fe97a87a5235defec999aa92ea"
+  integrity sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
 "@manypkg/cli@^0.19.1":
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/@manypkg/cli/-/cli-0.19.1.tgz#2dec45d340e1265276625c4b6c9b284d3376bd10"
@@ -443,10 +978,10 @@
     globby "^11.0.0"
     read-yaml-file "^1.1.0"
 
-"@mdx-js/loader@^2.1.1":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-2.1.1.tgz#98f0f2d8fc7f6b2f2c51ea2f4185e9c1ebcb187a"
-  integrity sha512-24danl02C30QoXVQTqvoEL84jN1e2BBSYMk9A/DGYBtHWXg5kdVp+A6P4hrFOwHvkEIjRbY0N49jPOSbpOgrOQ==
+"@mdx-js/loader@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-2.1.2.tgz#fe7631bbef1e6546f4289f7adaef60083c22063a"
+  integrity sha512-P7CWhrqE5rZ3ewBngZ9t/zQPbSq42iuty78K3zJ8Bl518qnOX1d106c+n7I/zHODPAmw9JfYMQdbv9WrrHa0DA==
   dependencies:
     "@mdx-js/mdx" "^2.0.0"
     source-map "^0.7.0"
@@ -487,101 +1022,87 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
-"@ndhoule/each@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@ndhoule/each/-/each-2.0.1.tgz#bbed372a603e0713a3193c706a73ddebc5b426a9"
-  integrity sha1-u+03KmA+BxOjGTxwanPd68W0Jqk=
-  dependencies:
-    "@ndhoule/keys" "^2.0.0"
-
-"@ndhoule/keys@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@ndhoule/keys/-/keys-2.0.0.tgz#3d64ae677c65a261747bf3a457c62eb292a4e0ce"
-  integrity sha1-PWSuZ3xlomF0e/OkV8YuspKk4M4=
+"@next/env@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.3.1.tgz#18266bd92de3b4aa4037b1927aa59e6f11879260"
+  integrity sha512-9P9THmRFVKGKt9DYqeC2aKIxm8rlvkK38V1P1sRE7qyoPBIs8l9oo79QoSdPtOWfzkbDAVUqvbQGgTMsb8BtJg==
 
-"@ndhoule/map@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@ndhoule/map/-/map-2.0.1.tgz#f5ca0a47424ea67f46e2a6d499b9e9bc886aefa8"
-  integrity sha1-9coKR0JOpn9G4qbUmbnpvIhq76g=
-  dependencies:
-    "@ndhoule/each" "^2.0.1"
-
-"@next/env@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.5.tgz#a21ba6708022d630402ca2b340316e69a0296dfc"
-  integrity sha512-+34yUJslfJi7Lyx6ELuN8nWcOzi27izfYnZIC1Dqv7kmmfiBVxgzR3BXhlvEMTKC2IRJhXVs2FkMY+buQe3k7Q==
-
-"@next/eslint-plugin-next@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.1.5.tgz#273885b35e6bbcd40ff1436d2a8d0ec03fb6f6ef"
-  integrity sha512-Cnb8ERC5bNKBFrnMH6203sp/b0Y78QRx1XsFu+86oBtDBmQmOFoHu7teQjHm69ER73XKK3aGaeoLiXacHoUFsg==
+"@next/eslint-plugin-next@13.2.3":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.2.3.tgz#5af8ddeac6dbe028c812a0e59c41952c004d95d5"
+  integrity sha512-QmMPItnU7VeojI1KnuwL9SLFWEwmaNHNlnOGpoTwdLoSiP9sc8KYiAHWEc4/44L+cAdCxcZYvn7frcRNP5l84Q==
   dependencies:
     glob "7.1.7"
 
-"@next/mdx@^12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/mdx/-/mdx-12.1.5.tgz#302fbf195b406d32423f6a0317771d3b27f88e8e"
-  integrity sha512-3R8J/3jKz4bCAOWDKVhxXoUETy3eqC+zaNlgwLK7LAid3UZjioVZ+jxIJmopd1auqjpev7doKeRE2p8YG55QLg==
-
-"@next/swc-android-arm-eabi@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.5.tgz#36729ab3dfd7743e82cfe536b43254dcb146620c"
-  integrity sha512-SKnGTdYcoN04Y2DvE0/Y7/MjkA+ltsmbuH/y/hR7Ob7tsj+8ZdOYuk+YvW1B8dY20nDPHP58XgDTSm2nA8BzzA==
-
-"@next/swc-android-arm64@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.1.5.tgz#52578f552305c92d0b9b81d603c9643fb71e0835"
-  integrity sha512-YXiqgQ/9Rxg1dXp6brXbeQM1JDx9SwUY/36JiE+36FXqYEmDYbxld9qkX6GEzkc5rbwJ+RCitargnzEtwGW0mw==
-
-"@next/swc-darwin-arm64@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.5.tgz#3d5b53211484c72074f4975ba0ec2b1107db300e"
-  integrity sha512-y8mhldb/WFZ6lFeowkGfi0cO/lBdiBqDk4T4LZLvCpoQp4Or/NzUN6P5NzBQZ5/b4oUHM/wQICEM+1wKA4qIVw==
-
-"@next/swc-darwin-x64@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.5.tgz#adcabb732d226453777c0d37d58eaff9328b66fd"
-  integrity sha512-wqJ3X7WQdTwSGi0kIDEmzw34QHISRIQ5uvC+VXmsIlCPFcMA+zM5723uh8NfuKGquDMiEMS31a83QgkuHMYbwQ==
-
-"@next/swc-linux-arm-gnueabihf@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.5.tgz#82a7cde67482b756bc65fbebf1dfa8a782074e93"
-  integrity sha512-WnhdM5duONMvt2CncAl+9pim0wBxDS2lHoo7ub/o/i1bRbs11UTzosKzEXVaTDCUkCX2c32lIDi1WcN2ZPkcdw==
-
-"@next/swc-linux-arm64-gnu@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.5.tgz#f82ca014504950aab751e81f467492e9be0bad5d"
-  integrity sha512-Jq2H68yQ4bLUhR/XQnbw3LDW0GMQn355qx6rU36BthDLeGue7YV7MqNPa8GKvrpPocEMW77nWx/1yI6w6J07gw==
-
-"@next/swc-linux-arm64-musl@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.5.tgz#f811ec9f4b12a978426c284c95ab2f515ddf7f9e"
-  integrity sha512-KgPjwdbhDqXI7ghNN8V/WAiLquc9Ebe8KBrNNEL0NQr+yd9CyKJ6KqjayVkmX+hbHzbyvbui/5wh/p3CZQ9xcQ==
-
-"@next/swc-linux-x64-gnu@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.5.tgz#d44857257e6d20dc841998951d584ab1f25772c3"
-  integrity sha512-O2ErUTvCJ6DkNTSr9pbu1n3tcqykqE/ebty1rwClzIYdOgpB3T2MfEPP+K7GhUR87wmN/hlihO9ch7qpVFDGKw==
-
-"@next/swc-linux-x64-musl@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.5.tgz#3cc523abadc9a2a6de680593aff06e71cc29ecef"
-  integrity sha512-1eIlZmlO/VRjxxzUBcVosf54AFU3ltAzHi+BJA+9U/lPxCYIsT+R4uO3QksRzRjKWhVQMRjEnlXyyq5SKJm7BA==
-
-"@next/swc-win32-arm64-msvc@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.5.tgz#c62232d869f1f9b22e8f24e4e7f05307c20f30ca"
-  integrity sha512-oromsfokbEuVb0CBLLE7R9qX3KGXucZpsojLpzUh1QJjuy1QkrPJncwr8xmWQnwgtQ6ecMWXgXPB+qtvizT9Tw==
-
-"@next/swc-win32-ia32-msvc@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.5.tgz#2bd9b28a9ba730d12a493e7d9d18e150fe89d496"
-  integrity sha512-a/51L5KzBpeZSW9LbekMo3I3Cwul+V+QKwbEIMA+Qwb2qrlcn1L9h3lt8cHqNTFt2y72ce6aTwDTw1lyi5oIRA==
-
-"@next/swc-win32-x64-msvc@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.5.tgz#02f377e4d41eaaacf265e34bab9bacd8efc4a351"
-  integrity sha512-/SoXW1Ntpmpw3AXAzfDRaQidnd8kbZ2oSni8u5z0yw6t4RwJvmdZy1eOaAADRThWKV+2oU90++LSnXJIwBRWYQ==
+"@next/mdx@^12.2.5":
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/@next/mdx/-/mdx-12.2.5.tgz#f88743cad222c53bf1648ce15d22e9a49a4c5bc4"
+  integrity sha512-b4gDNNvlt1Icf9D+nMzc66Tn1ei4lYRUFjwjWdCgdQFCo2ahKl+/f4R/g958KGzZMFmmXBJ7JIfzeAqgPv7TsA==
+
+"@next/swc-android-arm-eabi@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.1.tgz#b15ce8ad376102a3b8c0f3c017dde050a22bb1a3"
+  integrity sha512-i+BvKA8tB//srVPPQxIQN5lvfROcfv4OB23/L1nXznP+N/TyKL8lql3l7oo2LNhnH66zWhfoemg3Q4VJZSruzQ==
+
+"@next/swc-android-arm64@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.3.1.tgz#85d205f568a790a137cb3c3f720d961a2436ac9c"
+  integrity sha512-CmgU2ZNyBP0rkugOOqLnjl3+eRpXBzB/I2sjwcGZ7/Z6RcUJXK5Evz+N0ucOxqE4cZ3gkTeXtSzRrMK2mGYV8Q==
+
+"@next/swc-darwin-arm64@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.1.tgz#b105457d6760a7916b27e46c97cb1a40547114ae"
+  integrity sha512-hT/EBGNcu0ITiuWDYU9ur57Oa4LybD5DOQp4f22T6zLfpoBMfBibPtR8XktXmOyFHrL/6FC2p9ojdLZhWhvBHg==
+
+"@next/swc-darwin-x64@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.1.tgz#6947b39082271378896b095b6696a7791c6e32b1"
+  integrity sha512-9S6EVueCVCyGf2vuiLiGEHZCJcPAxglyckTZcEwLdJwozLqN0gtS0Eq0bQlGS3dH49Py/rQYpZ3KVWZ9BUf/WA==
+
+"@next/swc-freebsd-x64@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.1.tgz#2b6c36a4d84aae8b0ea0e0da9bafc696ae27085a"
+  integrity sha512-qcuUQkaBZWqzM0F1N4AkAh88lLzzpfE6ImOcI1P6YeyJSsBmpBIV8o70zV+Wxpc26yV9vpzb+e5gCyxNjKJg5Q==
+
+"@next/swc-linux-arm-gnueabihf@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.1.tgz#6e421c44285cfedac1f4631d5de330dd60b86298"
+  integrity sha512-diL9MSYrEI5nY2wc/h/DBewEDUzr/DqBjIgHJ3RUNtETAOB3spMNHvJk2XKUDjnQuluLmFMloet9tpEqU2TT9w==
+
+"@next/swc-linux-arm64-gnu@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.1.tgz#8863f08a81f422f910af126159d2cbb9552ef717"
+  integrity sha512-o/xB2nztoaC7jnXU3Q36vGgOolJpsGG8ETNjxM1VAPxRwM7FyGCPHOMk1XavG88QZSQf+1r+POBW0tLxQOJ9DQ==
+
+"@next/swc-linux-arm64-musl@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.1.tgz#0038f07cf0b259d70ae0c80890d826dfc775d9f3"
+  integrity sha512-2WEasRxJzgAmP43glFNhADpe8zB7kJofhEAVNbDJZANp+H4+wq+/cW1CdDi8DqjkShPEA6/ejJw+xnEyDID2jg==
+
+"@next/swc-linux-x64-gnu@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.1.tgz#c66468f5e8181ffb096c537f0dbfb589baa6a9c1"
+  integrity sha512-JWEaMyvNrXuM3dyy9Pp5cFPuSSvG82+yABqsWugjWlvfmnlnx9HOQZY23bFq3cNghy5V/t0iPb6cffzRWylgsA==
+
+"@next/swc-linux-x64-musl@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.1.tgz#c6269f3e96ac0395bc722ad97ce410ea5101d305"
+  integrity sha512-xoEWQQ71waWc4BZcOjmatuvPUXKTv6MbIFzpm4LFeCHsg2iwai0ILmNXf81rJR+L1Wb9ifEke2sQpZSPNz1Iyg==
+
+"@next/swc-win32-arm64-msvc@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.1.tgz#83c639ee969cee36ce247c3abd1d9df97b5ecade"
+  integrity sha512-hswVFYQYIeGHE2JYaBVtvqmBQ1CppplQbZJS/JgrVI3x2CurNhEkmds/yqvDONfwfbttTtH4+q9Dzf/WVl3Opw==
+
+"@next/swc-win32-ia32-msvc@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.1.tgz#52995748b92aa8ad053440301bc2c0d9fbcf27c2"
+  integrity sha512-Kny5JBehkTbKPmqulr5i+iKntO5YMP+bVM8Hf8UAmjSMVo3wehyLVc9IZkNmcbxi+vwETnQvJaT5ynYBkJ9dWA==
+
+"@next/swc-win32-x64-msvc@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.1.tgz#27d71a95247a9eaee03d47adee7e3bd594514136"
+  integrity sha512-W1ijvzzg+kPEX6LAc+50EYYSEo0FVu7dmTE+t+DM4iOLqgGHoW9uYSz9wCVdkXOEEMP9xhXfGpcSxsfDucyPkA==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -601,7 +1122,7 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
-"@nodelib/fs.walk@^1.2.3":
+"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
@@ -609,6 +1130,18 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@pkgr/utils@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@pkgr/utils/-/utils-2.3.1.tgz#0a9b06ffddee364d6642b3cd562ca76f55b34a03"
+  integrity sha512-wfzX8kc1PMyUILA+1Z/EqoE4UCXGy0iRGMhPwdfae1+f0OXlLqCk+By+aMzgJBzR9AzS4CDizioG6Ss1gvAFJw==
+  dependencies:
+    cross-spawn "^7.0.3"
+    is-glob "^4.0.3"
+    open "^8.4.0"
+    picocolors "^1.0.0"
+    tiny-glob "^0.2.9"
+    tslib "^2.4.0"
+
 "@radix-ui/number@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-0.1.0.tgz#73ad13d5cc5f75fa5e147d72e5d5d5e50d688256"
@@ -616,6 +1149,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/number@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.0.tgz#4c536161d0de750b3f5d55860fc3de46264f897b"
+  integrity sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/popper@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/popper/-/popper-0.1.0.tgz#c387a38f31b7799e1ea0d2bb1ca0c91c2931b063"
@@ -631,6 +1171,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/primitive@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
+  integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-accordion@^0.1.6":
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-accordion/-/react-accordion-0.1.6.tgz#b76613d56717ed24b8cf6cb1897cbd54f04714ed"
@@ -654,6 +1201,22 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "0.1.4"
 
+"@radix-ui/react-arrow@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.0.tgz#c461f4c2cab3317e3d42a1ae62910a4cbb0192a1"
+  integrity sha512-1MUuv24HCdepi41+qfv125EwMuxgQ+U+h0A9K3BjCO/J8nVRREKHHpkD9clwfnjEDk9hgGzCnff4aUKCPiRepw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.0"
+
+"@radix-ui/react-arrow@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz#5246adf79e97f89e819af68da51ddcf349ecf1c4"
+  integrity sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.1"
+
 "@radix-ui/react-collapsible@0.1.6", "@radix-ui/react-collapsible@^0.1.6":
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-0.1.6.tgz#3eeadac476761b3c9b8dd91e8a32eb1a547e5a06"
@@ -680,6 +1243,28 @@
     "@radix-ui/react-primitive" "0.1.4"
     "@radix-ui/react-slot" "0.1.2"
 
+"@radix-ui/react-collection@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.0.tgz#0ec4c72fabd35a03b5787075ac799e3b17ca5710"
+  integrity sha512-8i1pf5dKjnq90Z8udnnXKzdCEV3/FYrfw0n/b6NvB6piXEn3fO1bOh7HBcpG8XrnIXzxlYu2oCcR38QpyLS/mg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-slot" "1.0.0"
+
+"@radix-ui/react-collection@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.1.tgz#259506f97c6703b36291826768d3c1337edd1de5"
+  integrity sha512-uuiFbs+YCKjn3X1DTSx9G7BHApu4GHbi3kgiwsnFUbOKCrwejAJv4eE4Vc8C0Oaxt9T0aV4ox0WCOdx+39Xo+g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-slot" "1.0.1"
+
 "@radix-ui/react-compose-refs@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz#cff6e780a0f73778b976acff2c2a5b6551caab95"
@@ -687,6 +1272,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-compose-refs@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
+  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-context@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-0.1.1.tgz#06996829ea124d9a1bc1dbe3e51f33588fab0875"
@@ -694,6 +1286,20 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-context@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
+  integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-direction@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.0.tgz#a2e0b552352459ecf96342c79949dd833c1e6e45"
+  integrity sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-dismissable-layer@0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.5.tgz#9379032351e79028d472733a5cc8ba4a0ea43314"
@@ -707,10 +1313,48 @@
     "@radix-ui/react-use-callback-ref" "0.1.0"
     "@radix-ui/react-use-escape-keydown" "0.1.0"
 
-"@radix-ui/react-focus-guards@0.1.0":
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-0.1.0.tgz#ba3b6f902cba7826569f8edc21ff8223dece7def"
-  integrity sha512-kRx/swAjEfBpQ3ns7J3H4uxpXuWCqN7MpALiSDOXiyo2vkWv0L9sxvbpZeTulINuE3CGMzicVMuNc/VWXjFKOg==
+"@radix-ui/react-dismissable-layer@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz#35b7826fa262fd84370faef310e627161dffa76b"
+  integrity sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-escape-keydown" "1.0.0"
+
+"@radix-ui/react-dismissable-layer@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.2.tgz#f04d1061bddf00b1ca304148516b9ddc62e45fb2"
+  integrity sha512-WjJzMrTWROozDqLB0uRWYvj4UuXsM/2L19EmQ3Au+IJWqwvwq9Bwd+P8ivo0Deg9JDPArR1I6MbWNi1CmXsskg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-escape-keydown" "1.0.2"
+
+"@radix-ui/react-dropdown-menu@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.3.tgz#901fd338346dc977cf6345371e95ad9d5fde1fe7"
+  integrity sha512-ToCPPztcJMu8WW33xCoG/nGcclVsCsV90IiEdkLhrWro3DzJOR2pPUoSi/aXX7c8imRO0DsZOrfL2bmn0U9qAQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-menu" "2.0.3"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+
+"@radix-ui/react-focus-guards@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz#339c1c69c41628c1a5e655f15f7020bf11aa01fa"
+  integrity sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==
   dependencies:
     "@babel/runtime" "^7.13.10"
 
@@ -724,6 +1368,26 @@
     "@radix-ui/react-primitive" "0.1.4"
     "@radix-ui/react-use-callback-ref" "0.1.0"
 
+"@radix-ui/react-focus-scope@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz#95a0c1188276dc8933b1eac5f1cdb6471e01ade5"
+  integrity sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
+"@radix-ui/react-focus-scope@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.1.tgz#faea8c25f537c5a5c38c50914b63722db0e7f951"
+  integrity sha512-Ej2MQTit8IWJiS2uuujGUmxXjF/y5xZptIIQnyd2JHLwtV0R2j9NRVoRj/1j/gJ7e3REdaBw4Hjf4a1ImhkZcQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
 "@radix-ui/react-id@0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-0.1.5.tgz#010d311bedd5a2884c1e9bb6aaaa4e6cc1d1d3b8"
@@ -732,6 +1396,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "0.1.0"
 
+"@radix-ui/react-id@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e"
+  integrity sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
 "@radix-ui/react-label@0.1.5", "@radix-ui/react-label@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-0.1.5.tgz#12cd965bfc983e0148121d4c99fb8e27a917c45c"
@@ -743,26 +1415,63 @@
     "@radix-ui/react-id" "0.1.5"
     "@radix-ui/react-primitive" "0.1.4"
 
-"@radix-ui/react-popover@^0.1.6":
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-0.1.6.tgz#788e969239d9c55239678e615ab591b6b7ba5cdc"
-  integrity sha512-zQzgUqW4RQDb0ItAL1xNW4K4olUrkfV3jeEPs9rG+nsDQurO+W9TT+YZ9H1mmgAJqlthyv1sBRZGdBm4YjtD6Q==
+"@radix-ui/react-label@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-1.0.0.tgz#c6691b0bec18958512a952c18732279285b61fef"
+  integrity sha512-k+EbxeRaVbSJ4oaR9eUYuC0cDIGRB4TAPhilbFCIMpP9pXFNcyQPQUvRaVOQBrviuArYM80xh0BQR/0y3kjUdQ==
   dependencies:
     "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "0.1.0"
-    "@radix-ui/react-compose-refs" "0.1.0"
-    "@radix-ui/react-context" "0.1.1"
-    "@radix-ui/react-dismissable-layer" "0.1.5"
-    "@radix-ui/react-focus-guards" "0.1.0"
-    "@radix-ui/react-focus-scope" "0.1.4"
-    "@radix-ui/react-id" "0.1.5"
-    "@radix-ui/react-popper" "0.1.4"
-    "@radix-ui/react-portal" "0.1.4"
-    "@radix-ui/react-presence" "0.1.2"
-    "@radix-ui/react-primitive" "0.1.4"
-    "@radix-ui/react-use-controllable-state" "0.1.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+
+"@radix-ui/react-menu@2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.0.3.tgz#7bfa1b8e976a829c37ad4660967b59fd46df1b08"
+  integrity sha512-JKgWMzNhWqnimRynMDtR26bKfpraGUj4e39+g9p45Fb1XTEDWepjvtBlkjhZcM068VHiwp7HALqkt7Y5qVRbyQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-collection" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-dismissable-layer" "1.0.2"
+    "@radix-ui/react-focus-guards" "1.0.0"
+    "@radix-ui/react-focus-scope" "1.0.1"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-popper" "1.1.0"
+    "@radix-ui/react-portal" "1.0.1"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-roving-focus" "1.0.2"
+    "@radix-ui/react-slot" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
     aria-hidden "^1.1.1"
-    react-remove-scroll "^2.4.0"
+    react-remove-scroll "2.5.5"
+
+"@radix-ui/react-popover@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.0.tgz#5ee72013089fdf9038417fc1eb98a749c17457fd"
+  integrity sha512-osxFFO0TiZ9ABpEOitZu0R1Fdd+tSpJgAqLZxRLLdZQ7ya0onSODcITp5hXDVuYQeVXH6pKEBGwXN6ZGjZ0a5g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-dismissable-layer" "1.0.0"
+    "@radix-ui/react-focus-guards" "1.0.0"
+    "@radix-ui/react-focus-scope" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-popper" "1.0.0"
+    "@radix-ui/react-portal" "1.0.0"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-slot" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.4"
 
 "@radix-ui/react-popper@0.1.4":
   version "0.1.4"
@@ -779,6 +1488,39 @@
     "@radix-ui/react-use-size" "0.1.1"
     "@radix-ui/rect" "0.1.1"
 
+"@radix-ui/react-popper@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.0.0.tgz#fb4f937864bf39c48f27f55beee61fa9f2bef93c"
+  integrity sha512-k2dDd+1Wl0XWAMs9ZvAxxYsB9sOsEhrFQV4CINd7IUZf0wfdye4OHen9siwxvZImbzhgVeKTJi68OQmPRvVdMg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@floating-ui/react-dom" "0.7.2"
+    "@radix-ui/react-arrow" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+    "@radix-ui/react-use-rect" "1.0.0"
+    "@radix-ui/react-use-size" "1.0.0"
+    "@radix-ui/rect" "1.0.0"
+
+"@radix-ui/react-popper@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.0.tgz#2be7e4c0cd4581f54277ca33a981c9037d2a8e60"
+  integrity sha512-07U7jpI0dZcLRAxT7L9qs6HecSoPhDSJybF7mEGHJDBDv+ZoGCvIlva0s+WxMXwJEav+ckX3hAlXBtnHmuvlCQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@floating-ui/react-dom" "0.7.2"
+    "@radix-ui/react-arrow" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+    "@radix-ui/react-use-rect" "1.0.0"
+    "@radix-ui/react-use-size" "1.0.0"
+    "@radix-ui/rect" "1.0.0"
+
 "@radix-ui/react-portal@0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-0.1.4.tgz#17bdce3d7f1a9a0b35cb5e935ab8bc562441a7d2"
@@ -788,6 +1530,22 @@
     "@radix-ui/react-primitive" "0.1.4"
     "@radix-ui/react-use-layout-effect" "0.1.0"
 
+"@radix-ui/react-portal@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.0.tgz#7220b66743394fabb50c55cb32381395cc4a276b"
+  integrity sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.0"
+
+"@radix-ui/react-portal@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.1.tgz#169c5a50719c2bb0079cf4c91a27aa6d37e5dd33"
+  integrity sha512-NY2vUWI5WENgAT1nfC6JS7RU5xRYBfjZVLq0HmgEN1Ezy3rk/UruMV4+Rd0F40PEaFC5SrLS1ixYvcYIQrb4Ig==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.1"
+
 "@radix-ui/react-presence@0.1.2":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-0.1.2.tgz#9f11cce3df73cf65bc348e8b76d891f0d54c1fe3"
@@ -797,6 +1555,15 @@
     "@radix-ui/react-compose-refs" "0.1.0"
     "@radix-ui/react-use-layout-effect" "0.1.0"
 
+"@radix-ui/react-presence@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
+  integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
 "@radix-ui/react-primitive@0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz#6c233cf08b0cb87fecd107e9efecb3f21861edc1"
@@ -805,6 +1572,22 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "0.1.2"
 
+"@radix-ui/react-primitive@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz#376cd72b0fcd5e0e04d252ed33eb1b1f025af2b0"
+  integrity sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.0"
+
+"@radix-ui/react-primitive@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz#c1ebcce283dd2f02e4fbefdaa49d1cb13dbc990a"
+  integrity sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.1"
+
 "@radix-ui/react-roving-focus@0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-0.1.5.tgz#cc48d17a36b56f253d54905b0fd60ee134cb97ee"
@@ -820,10 +1603,26 @@
     "@radix-ui/react-use-callback-ref" "0.1.0"
     "@radix-ui/react-use-controllable-state" "0.1.0"
 
-"@radix-ui/react-slider@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-0.1.4.tgz#a7b7a480ee00158195794b08cd3f1583cf102518"
-  integrity sha512-0z3bCcdrAi+FIcoLXS6r0ESVWuuyMnUJoCsFm7tC7Rtv95x34YtaI8YfSyQmzuMVS4rTsNtCCTZ/s727uRaVkQ==
+"@radix-ui/react-roving-focus@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.2.tgz#d8ac2e3b8006697bdfc2b0eb06bef7e15b6245de"
+  integrity sha512-HLK+CqD/8pN6GfJm3U+cqpqhSKYAWiOJDe+A+8MfxBnOue39QEeMa43csUn2CXCHQT0/mewh1LrrG4tfkM9DMA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-collection" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+
+"@radix-ui/react-select@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-0.1.1.tgz#ceedea6856a37e4079492e1c69601797cedd2c85"
+  integrity sha512-xY3jLz2c6ZBHflldGsA79bE/swUfRMpiRPQf+JDihOufsd3z5uW22PFe0MS5bGZiIpK6aAZAvwqEd2Bu7hqp8w==
   dependencies:
     "@babel/runtime" "^7.13.10"
     "@radix-ui/number" "0.1.0"
@@ -831,12 +1630,37 @@
     "@radix-ui/react-collection" "0.1.4"
     "@radix-ui/react-compose-refs" "0.1.0"
     "@radix-ui/react-context" "0.1.1"
+    "@radix-ui/react-dismissable-layer" "0.1.5"
+    "@radix-ui/react-focus-scope" "0.1.4"
+    "@radix-ui/react-id" "0.1.5"
+    "@radix-ui/react-label" "0.1.5"
+    "@radix-ui/react-portal" "0.1.4"
     "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-use-callback-ref" "0.1.0"
     "@radix-ui/react-use-controllable-state" "0.1.0"
-    "@radix-ui/react-use-direction" "0.1.0"
     "@radix-ui/react-use-layout-effect" "0.1.0"
     "@radix-ui/react-use-previous" "0.1.1"
-    "@radix-ui/react-use-size" "0.1.1"
+    "@radix-ui/react-visually-hidden" "0.1.4"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "^2.4.0"
+
+"@radix-ui/react-slider@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.0.0.tgz#4cabadd243aa088eb45ac710cd7cdc518fafb07e"
+  integrity sha512-LMZET7vn7HYwYSjsc9Jcen8Vn4cJXZZxQT7T+lGlqp+F+FofX+H86TBF2yDq+L51d99f1KLEsflTGBz9WRLSig==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/number" "1.0.0"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-collection" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+    "@radix-ui/react-use-previous" "1.0.0"
+    "@radix-ui/react-use-size" "1.0.0"
 
 "@radix-ui/react-slot@0.1.2":
   version "0.1.2"
@@ -846,20 +1670,36 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "0.1.0"
 
-"@radix-ui/react-switch@^0.1.5":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-0.1.5.tgz#071ffa19a17a47fdc5c5e6f371bd5901c9fef2f4"
-  integrity sha512-ITtslJPK+Yi34iNf7K9LtsPaLD76oRIVzn0E8JpEO5HW8gpRBGb2NNI9mxKtEB30TVqIcdjdL10AmuIfOMwjtg==
+"@radix-ui/react-slot@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.0.tgz#7fa805b99891dea1e862d8f8fbe07f4d6d0fd698"
+  integrity sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==
   dependencies:
     "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "0.1.0"
-    "@radix-ui/react-compose-refs" "0.1.0"
-    "@radix-ui/react-context" "0.1.1"
-    "@radix-ui/react-label" "0.1.5"
-    "@radix-ui/react-primitive" "0.1.4"
-    "@radix-ui/react-use-controllable-state" "0.1.0"
-    "@radix-ui/react-use-previous" "0.1.1"
-    "@radix-ui/react-use-size" "0.1.1"
+    "@radix-ui/react-compose-refs" "1.0.0"
+
+"@radix-ui/react-slot@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81"
+  integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+
+"@radix-ui/react-switch@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.0.tgz#f714eb81da7b16dae7f5ab6e774e3194d8f009b6"
+  integrity sha512-SydkCiuirxJfRG8259J0RIpOw1p6y4TgJdNYvDNXgkEjCjFzLCvBbgDNQn9SeYXk3mjO/ezMgMFsacnrp4eihw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-label" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    "@radix-ui/react-use-previous" "1.0.0"
+    "@radix-ui/react-use-size" "1.0.0"
 
 "@radix-ui/react-tabs@^0.1.5":
   version "0.1.5"
@@ -874,15 +1714,15 @@
     "@radix-ui/react-roving-focus" "0.1.5"
     "@radix-ui/react-use-controllable-state" "0.1.0"
 
-"@radix-ui/react-toggle@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-0.1.4.tgz#c5c63f7cc5a03556bb58e0a763735b41bb0331f9"
-  integrity sha512-gxUq6NgMc4ChV8VJnwdYqueeoblspwXHAexYo+jM9N2hFLbI1C587jLjdTHzIcUa9q68Xaw4jtiImWDOokEhRw==
+"@radix-ui/react-toggle@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-1.0.1.tgz#20120c060cd3cd6267463a6a9bcb106134b5af57"
+  integrity sha512-hZIp9ZKnw4NwVqeB4evWBLa91ryaSJhAO0Ed82wkzRPgg/I29ypcY6SuBb3AMZW+GsuBZpIVujpCq+33TdEcyg==
   dependencies:
     "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "0.1.0"
-    "@radix-ui/react-primitive" "0.1.4"
-    "@radix-ui/react-use-controllable-state" "0.1.0"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
 
 "@radix-ui/react-tooltip@^0.1.7":
   version "0.1.7"
@@ -920,6 +1760,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-callback-ref@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
+  integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-controllable-state@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-0.1.0.tgz#4fced164acfc69a4e34fb9d193afdab973a55de1"
@@ -928,12 +1775,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "0.1.0"
 
-"@radix-ui/react-use-direction@0.1.0":
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-direction/-/react-use-direction-0.1.0.tgz#97ac1d52e497c974389e7988f809238ed72e7df7"
-  integrity sha512-NajpY/An9TCPSfOVkgWIdXJV+VuWl67PxB6kOKYmtNAFHvObzIoh8o0n9sAuwSAyFCZVq211FEf9gvVDRhOyiA==
+"@radix-ui/react-use-controllable-state@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f"
+  integrity sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==
   dependencies:
     "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
 
 "@radix-ui/react-use-escape-keydown@0.1.0":
   version "0.1.0"
@@ -943,6 +1791,22 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "0.1.0"
 
+"@radix-ui/react-use-escape-keydown@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz#aef375db4736b9de38a5a679f6f49b45a060e5d1"
+  integrity sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
+"@radix-ui/react-use-escape-keydown@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.2.tgz#09ab6455ab240b4f0a61faf06d4e5132c4d639f6"
+  integrity sha512-DXGim3x74WgUv+iMNCF+cAo8xUHHeqvjx8zs7trKf+FkQKPQXLk2sX7Gx1ysH7Q76xCpZuxIJE7HLPxRE+Q+GA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
 "@radix-ui/react-use-layout-effect@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-0.1.0.tgz#ebf71bd6d2825de8f1fbb984abf2293823f0f223"
@@ -950,6 +1814,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-layout-effect@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
+  integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-previous@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz#0226017f72267200f6e832a7103760e96a6db5d0"
@@ -957,6 +1828,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-previous@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz#e48a69c3a7d8078a967084038df66d0d181c56ac"
+  integrity sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-rect@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-0.1.1.tgz#6c15384beee59c086e75b89a7e66f3d2e583a856"
@@ -965,6 +1843,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/rect" "0.1.1"
 
+"@radix-ui/react-use-rect@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz#b040cc88a4906b78696cd3a32b075ed5b1423b3e"
+  integrity sha512-TB7pID8NRMEHxb/qQJpvSt3hQU4sqNPM1VCTjTRjEOa7cEop/QMuq8S6fb/5Tsz64kqSvB9WnwsDHtjnrM9qew==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/rect" "1.0.0"
+
 "@radix-ui/react-use-size@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-0.1.1.tgz#f6b75272a5d41c3089ca78c8a2e48e5f204ef90f"
@@ -972,6 +1858,14 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-size@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz#a0b455ac826749419f6354dc733e2ca465054771"
+  integrity sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
 "@radix-ui/react-visually-hidden@0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-0.1.4.tgz#6c75eae34fb5d084b503506fbfc05587ced05f03"
@@ -987,23 +1881,42 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@rushstack/eslint-patch@1.0.8":
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.0.8.tgz#be3e914e84eacf16dbebd311c0d0b44aa1174c64"
-  integrity sha512-ZK5v4bJwgXldAUA8r3q9YKfCwOqoHTK/ZqRjSeRXQrBXWouoPnS4MQtgC4AXGiiBuUu5wxrRgTlv0ktmM4P1Aw==
-
-"@segment/snippet@^4.15.3":
-  version "4.15.3"
-  resolved "https://registry.yarnpkg.com/@segment/snippet/-/snippet-4.15.3.tgz#ac829ec4570b249f559756293f4736e434885de7"
-  integrity sha512-75kVTYaQGYMkwVjJvCLLOlzxV8jCDxvKG68U88joo/rBx95SIXETcjUmIXF6A7SFRCgz83B+zrZbo+JYsmHkig==
+"@radix-ui/rect@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.0.tgz#0dc8e6a829ea2828d53cbc94b81793ba6383bf3c"
+  integrity sha512-d0O68AYy/9oeEy1DdC07bz1/ZXX+DqCskRd3i4JzLSTXwefzaepQrKjXC7aNM8lTHjFLDO0pDgaEiQ7jEk+HVg==
   dependencies:
-    "@ndhoule/map" "^2.0.1"
+    "@babel/runtime" "^7.13.10"
+
+"@rushstack/eslint-patch@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz#6801033be7ff87a6b7cadaf5b337c9f366a3c4b0"
+  integrity sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==
+
+"@sinclair/typebox@^0.23.3":
+  version "0.23.5"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.23.5.tgz#93f7b9f4e3285a7a9ade7557d9a8d36809cbc47d"
+  integrity sha512-AFBVi/iT4g20DHoujvMH1aEDn8fGJh4xsRGCP6d8RpLPMqsNPvW01Jcn0QysXTsg++/xj25NmJsGyH9xug/wKg==
 
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
   integrity sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==
 
+"@sinonjs/commons@^1.7.0":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
+  integrity sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==
+  dependencies:
+    type-detect "4.0.8"
+
+"@sinonjs/fake-timers@^9.1.1":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-9.1.2.tgz#4eaab737fab77332ab132d396a3c0d364bd0ea8c"
+  integrity sha512-BPS4ynJW/o92PUR4wgriz2Ud5gpST5vz6GQfMixEDK0Z8ZCUv2M7SkBLykH56T++Xs+8ln9zTGbOvNGIe02/jw==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
 "@styled-system/background@^5.1.2":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@styled-system/background/-/background-5.1.2.tgz#75c63d06b497ab372b70186c0bf608d62847a2ba"
@@ -1103,6 +2016,13 @@
     "@styled-system/core" "^5.1.2"
     "@styled-system/css" "^5.1.5"
 
+"@swc/helpers@0.4.11":
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.11.tgz#db23a376761b3d31c26502122f349a21b592c8de"
+  integrity sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==
+  dependencies:
+    tslib "^2.4.0"
+
 "@szmarczak/http-timer@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
@@ -1110,66 +2030,66 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@theme-ui/color-modes@0.14.5":
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/@theme-ui/color-modes/-/color-modes-0.14.5.tgz#c9b77f2a6f7b529268e4e47147f763dfe8d2f215"
-  integrity sha512-cblrNDonr0sqPY9xRNcRLc4mDud9W59BxgTqS6GznB4fdnztV9FgN488JODbo4uHiHMZddhno0Vb3f/bbs6jsQ==
+"@theme-ui/color-modes@0.14.7":
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/@theme-ui/color-modes/-/color-modes-0.14.7.tgz#6f93bf4d0890ffe3386df311663eaee9bea40796"
+  integrity sha512-nEVS9o37Ga+ARLIivibWJzp6T2Q7cz6N0FRuSQYUSBimuMw329SRBXZ9LTmltatQO9+iYb5miiJOe/t/vQeOxg==
   dependencies:
-    "@theme-ui/core" "0.14.5"
-    "@theme-ui/css" "0.14.5"
+    "@theme-ui/core" "0.14.7"
+    "@theme-ui/css" "0.14.7"
     deepmerge "^4.2.2"
 
-"@theme-ui/components@0.14.5":
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/@theme-ui/components/-/components-0.14.5.tgz#63f0d5fdb042e46562f839cb4ce84b6cb964717e"
-  integrity sha512-V1h7j4yUsIbS6oHd5ke7ogCWq7ng31vzpUkK3xGI2acV+N0jfJNf7CfG6AaJfiwP0kAZhtCbIMvFsRWbRyvEnA==
+"@theme-ui/components@0.14.7":
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/@theme-ui/components/-/components-0.14.7.tgz#163e61c172f49d299bcf009ab606293207d5c739"
+  integrity sha512-iIzqBvRL8GNVkzuZinxInYNFW/38pvqqthuCgLsnOC0/A4Q4v13mn/fxlZa6pJjwouswsRLOrkd63bS7Svzkfw==
   dependencies:
     "@styled-system/color" "^5.1.2"
     "@styled-system/should-forward-prop" "^5.1.2"
     "@styled-system/space" "^5.1.2"
-    "@theme-ui/css" "0.14.5"
+    "@theme-ui/css" "0.14.7"
     "@types/styled-system" "^5.1.13"
 
-"@theme-ui/core@0.14.5":
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/@theme-ui/core/-/core-0.14.5.tgz#a12ea2c7c73d4328da5762272a24edca52513f27"
-  integrity sha512-fyllFax0hnABTMS3ryKP0w1oa2oHCE4xUKRZMwyA46ldV3pe3C4to8SmlF7x6RgSlsyrwdpEm34aB1ZgHsWrQg==
+"@theme-ui/core@0.14.7":
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/@theme-ui/core/-/core-0.14.7.tgz#110ba2216ee5f9fa6873e9c4237be679ee93e50a"
+  integrity sha512-u60cKOZYsGDG9sSoM4jYj743OpNXXU27f7vXGwrO/B1t/1sv1MAQA0R8HtVwoi9DyOIcOmWfMWYTiMg+4vV1MA==
   dependencies:
-    "@theme-ui/css" "0.14.5"
-    "@theme-ui/parse-props" "0.14.5"
+    "@theme-ui/css" "0.14.7"
+    "@theme-ui/parse-props" "0.14.7"
     deepmerge "^4.2.2"
 
-"@theme-ui/css@0.14.5":
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/@theme-ui/css/-/css-0.14.5.tgz#ac2bf57ee8f7ed1e960b175d2e76b43f04fde20d"
-  integrity sha512-EZztsPXJEg8rceTRGwWDD++d9QFSwEkl5913BvWmWTmB/Ips91ZIpnTbhfVRbG3bgUa+9lc1VwSEHOsHkN5mgw==
+"@theme-ui/css@0.14.7":
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/@theme-ui/css/-/css-0.14.7.tgz#4a3e22486a5be953b1dcb7f4e84dfa1b5b70c4eb"
+  integrity sha512-DbGw0T4MrTjiRs6lnyYgSD2TV/LvFErzDDpm0ICPL2KqDwqgHX4mFpDafj8/DkyCO9wx2KEiUuE+0NtOlR3i4w==
   dependencies:
     csstype "^3.0.10"
 
-"@theme-ui/mdx@0.14.5":
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/@theme-ui/mdx/-/mdx-0.14.5.tgz#a462cf378d5a8ef4a03369a75e3b258bbab6d566"
-  integrity sha512-iYYsvo6TZAxc9frXJWUijEYLmZltbsv3xFfBptA2iaw8iDj/Aw2ggtHpVyGVXGAgS09vfgH+ebFuzup61ADdDw==
+"@theme-ui/mdx@0.14.7":
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/@theme-ui/mdx/-/mdx-0.14.7.tgz#638e7bb23aa46c43b544fc31be6ab647fb2227a1"
+  integrity sha512-Hqlrzj5tI/fRuD5sJMblTcaChA5xajeSC7qpMRACjWgdNNiw/g/bi0V5uNejBRpILgmZua5EDQ2XV0IqhSGcPQ==
   dependencies:
-    "@theme-ui/core" "0.14.5"
-    "@theme-ui/css" "0.14.5"
+    "@theme-ui/core" "0.14.7"
+    "@theme-ui/css" "0.14.7"
 
-"@theme-ui/parse-props@0.14.5":
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/@theme-ui/parse-props/-/parse-props-0.14.5.tgz#abdcca2a7c83dcd899b35b2488582b592b065825"
-  integrity sha512-VB4/eH3v+1hXkzVWW0pahNdooG8gEreUXMyizR5TsJffy8KwjW6CsZJheoDJhyRfFk2nLhi1M0PjA+01lxL1qg==
+"@theme-ui/parse-props@0.14.7":
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/@theme-ui/parse-props/-/parse-props-0.14.7.tgz#491a2c32bfce4edd326f332e6320cf1d309d9a45"
+  integrity sha512-qF10mAYs3wcIkSU5ZSbmHUngwTkPS87D23qg1ArbeO+m+/e4uqOy0+6W0Lt/4JTP7lnWWsCYuScK3F3hOp2q0w==
   dependencies:
-    "@theme-ui/css" "0.14.5"
+    "@theme-ui/css" "0.14.7"
 
-"@theme-ui/theme-provider@0.14.5":
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/@theme-ui/theme-provider/-/theme-provider-0.14.5.tgz#cb319deccfaa8e94f38e6629b2f4c0dc95865ed4"
-  integrity sha512-FHT2FLQB412USzW/JX7UXXcJXdFyEDcwwaOXrR5caHX+XDb61k1tkXhT7fjnCpEx+z7rOeCXjxai3sQGk5SFNg==
+"@theme-ui/theme-provider@0.14.7":
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/@theme-ui/theme-provider/-/theme-provider-0.14.7.tgz#7bd98a9915ea421b098dc8253e5ac7508eb147cc"
+  integrity sha512-RmuDkdotzMcNSx/nI2nwBtQAwH/B9mae/nsR0o6AXyd+zOAfF9YY3vbtjYZicaYfcE/mnjmXqKTTwd4KaHu4UQ==
   dependencies:
-    "@theme-ui/color-modes" "0.14.5"
-    "@theme-ui/core" "0.14.5"
-    "@theme-ui/css" "0.14.5"
-    "@theme-ui/mdx" "0.14.5"
+    "@theme-ui/color-modes" "0.14.7"
+    "@theme-ui/core" "0.14.7"
+    "@theme-ui/css" "0.14.7"
+    "@theme-ui/mdx" "0.14.7"
 
 "@tootallnate/once@1":
   version "1.1.2"
@@ -1183,6 +2103,39 @@
   dependencies:
     "@types/estree" "*"
 
+"@types/babel__core@^7.1.14":
+  version "7.1.19"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.19.tgz#7b497495b7d1b4812bdb9d02804d0576f43ee460"
+  integrity sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.4.tgz#1f20ce4c5b1990b37900b63f050182d28c2439b7"
+  integrity sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.1.tgz#3d1a48fd9d6c0edfd56f2ff578daed48f36c8969"
+  integrity sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
+  version "7.17.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.17.1.tgz#1a0e73e8c28c7e832656db372b779bfd2ef37314"
+  integrity sha512-kVzjari1s2YVi77D3w1yuvohV2idweYXMCDzqBiVNN63TcDWrIlTVOYpqVrvbbyOE/IyzBoTKF0fdnLPEORFxA==
+  dependencies:
+    "@babel/types" "^7.3.0"
+
 "@types/debug@^4.0.0":
   version "4.1.7"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.7.tgz#7cc0ea761509124709b8b2d1090d8f6c17aadb82"
@@ -1207,6 +2160,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.46.tgz#0fb6bfbbeabd7a30880504993369c4bf1deab1fe"
   integrity sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==
 
+"@types/extend@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/extend/-/extend-3.0.1.tgz#923dc2d707d944382433e01d6cc0c69030ab2c75"
+  integrity sha512-R1g/VyKFFI2HLC1QGAeTtCBWCo6n75l41OnsVYNbmKG+kempOESaodf6BeJyUM3Q0rKa/NQcTHbB2+66lNnxLw==
+
 "@types/glob@^7.1.1":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"
@@ -1215,6 +2173,13 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/graceful-fs@^4.1.3":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
+  integrity sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/hast@^2.0.0":
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.4.tgz#8aa5ef92c117d20d974a82bdfb6a648b08c0bafc"
@@ -1229,6 +2194,33 @@
   dependencies:
     ci-info "^3.1.0"
 
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
+  integrity sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==
+
+"@types/istanbul-lib-report@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
+  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz#9153fe98bba2bd565a63add9436d6f0d7f8468ff"
+  integrity sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/jest@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-28.1.3.tgz#52f3f3e50ce59191ff5fbb1084896cc0cf30c9ce"
+  integrity sha512-Tsbjk8Y2hkBaY/gJsataeb4q9Mubw9EOz7+4RjPkzD5KjTvHHs7cpws22InaoXxAVAhF5HfFbzJjo6oKWqSZLw==
+  dependencies:
+    jest-matcher-utils "^28.0.0"
+    pretty-format "^28.0.0"
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -1278,10 +2270,10 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
-"@types/node@*", "@types/node@^17.0.31":
-  version "17.0.31"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.31.tgz#a5bb84ecfa27eec5e1c802c6bbf8139bdb163a5d"
-  integrity sha512-AR0x5HbXGqkEx9CadRH3EBYx/VkiUgZIhP4wvPn/+5KIsgpNoyFaRlVe0Zlx9gRtg8fA06a9tskE2MSN7TcG4Q==
+"@types/node@*", "@types/node@^18.11.9":
+  version "18.11.9"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.9.tgz#02d013de7058cea16d36168ef2fc653464cfbad4"
+  integrity sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==
 
 "@types/node@^12.7.1":
   version "12.20.47"
@@ -1303,6 +2295,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb"
   integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==
 
+"@types/prettier@^2.1.5":
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.6.3.tgz#68ada76827b0010d0db071f739314fa429943d0a"
+  integrity sha512-ymZk3LEC/fsut+/Q5qejp6R9O1rMxz3XaRHDV6kX8MrGAhOSPqVARbDi+EZvInBpw+BnCX3TD240byVkOfQsHg==
+
 "@types/prop-types@*":
   version "15.7.5"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
@@ -1315,10 +2312,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@18.0.5":
-  version "18.0.5"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.5.tgz#1a4d4b705ae6af5aed369dec22800b20f89f5301"
-  integrity sha512-UPxNGInDCIKlfqBrm8LDXYWNfLHwIdisWcsH5GpMyGjhEDLFgTtlRBaoWuCua9HcyuE0rMkmAeZ3FXV1pYLIYQ==
+"@types/react@*", "@types/react@18.0.10":
+  version "18.0.10"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.10.tgz#5692944d4a45e204fb7a981eb1388afe919cf4d0"
+  integrity sha512-dIugadZuIPrRzvIEevIu7A1smqOAjkSMv8qOfwPt9Ve6i6JT/FQcCHyk2qIAxwsQNKZt5/oGR0T4z9h2dXRAkg==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -1334,6 +2331,11 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-6.2.3.tgz#5798ecf1bec94eaa64db39ee52808ec0693315aa"
   integrity sha512-KQf+QAMWKMrtBMsB8/24w53tEsxllMj6TuA80TT/5igJalLI/zm0L3oXRbIAl4Ohfc85gyHX/jhMwsVkmhLU4A==
 
+"@types/stack-utils@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
+  integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
+
 "@types/styled-system@^5.1.13":
   version "5.1.15"
   resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.15.tgz#075f969cc028a895dba916c07708e2fe828d7077"
@@ -1351,49 +2353,73 @@
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
   integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
 
-"@typescript-eslint/parser@5.10.1":
-  version "5.10.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.10.1.tgz#4ce9633cc33fc70bc13786cb793c1a76fe5ad6bd"
-  integrity sha512-GReo3tjNBwR5RnRO0K2wDIDN31cM3MmDtgyQ85oAxAmC5K3j/g85IjP+cDfcqDsDDBf1HNKQAD0WqOYL8jXqUA==
-  dependencies:
-    "@typescript-eslint/scope-manager" "5.10.1"
-    "@typescript-eslint/types" "5.10.1"
-    "@typescript-eslint/typescript-estree" "5.10.1"
-    debug "^4.3.2"
+"@types/yargs-parser@*":
+  version "21.0.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
+  integrity sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==
+
+"@types/yargs@^17.0.8":
+  version "17.0.10"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.10.tgz#591522fce85d8739bca7b8bb90d048e4478d186a"
+  integrity sha512-gmEaFwpj/7f/ROdtIlci1R1VYU1J4j95m8T+Tj3iBgiBFKg1foE/PSl93bBd5T9LDXNPo8UlNN6W0qwD8O5OaA==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@typescript-eslint/parser@^5.42.0":
+  version "5.54.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.54.0.tgz#def186eb1b1dbd0439df0dacc44fb6d8d5c417fe"
+  integrity sha512-aAVL3Mu2qTi+h/r04WI/5PfNWvO6pdhpeMRWk9R7rEV4mwJNzoWf5CCU5vDKBsPIFQFjEq1xg7XBI2rjiMXQbQ==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.54.0"
+    "@typescript-eslint/types" "5.54.0"
+    "@typescript-eslint/typescript-estree" "5.54.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@5.54.0":
+  version "5.54.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.54.0.tgz#74b28ac9a3fc8166f04e806c957adb8c1fd00536"
+  integrity sha512-VTPYNZ7vaWtYna9M4oD42zENOBrb+ZYyCNdFs949GcN8Miwn37b8b7eMj+EZaq7VK9fx0Jd+JhmkhjFhvnovhg==
+  dependencies:
+    "@typescript-eslint/types" "5.54.0"
+    "@typescript-eslint/visitor-keys" "5.54.0"
+
+"@typescript-eslint/types@5.54.0":
+  version "5.54.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.54.0.tgz#7d519df01f50739254d89378e0dcac504cab2740"
+  integrity sha512-nExy+fDCBEgqblasfeE3aQ3NuafBUxZxgxXcYfzYRZFHdVvk5q60KhCSkG0noHgHRo/xQ/BOzURLZAafFpTkmQ==
+
+"@typescript-eslint/typescript-estree@5.54.0":
+  version "5.54.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.54.0.tgz#f6f3440cabee8a43a0b25fa498213ebb61fdfe99"
+  integrity sha512-X2rJG97Wj/VRo5YxJ8Qx26Zqf0RRKsVHd4sav8NElhbZzhpBI8jU54i6hfo9eheumj4oO4dcRN1B/zIVEqR/MQ==
+  dependencies:
+    "@typescript-eslint/types" "5.54.0"
+    "@typescript-eslint/visitor-keys" "5.54.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
 
-"@typescript-eslint/scope-manager@5.10.1":
-  version "5.10.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.10.1.tgz#f0539c73804d2423506db2475352a4dec36cd809"
-  integrity sha512-Lyvi559Gvpn94k7+ElXNMEnXu/iundV5uFmCUNnftbFrUbAJ1WBoaGgkbOBm07jVZa682oaBU37ao/NGGX4ZDg==
+"@typescript-eslint/visitor-keys@5.54.0":
+  version "5.54.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.54.0.tgz#846878afbf0cd67c19cfa8d75947383d4490db8f"
+  integrity sha512-xu4wT7aRCakGINTLGeyGqDn+78BwFlggwBjnHa1ar/KaGagnmwLYmlrXIrgAaQ3AE1Vd6nLfKASm7LrFHNbKGA==
   dependencies:
-    "@typescript-eslint/types" "5.10.1"
-    "@typescript-eslint/visitor-keys" "5.10.1"
-
-"@typescript-eslint/types@5.10.1":
-  version "5.10.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.10.1.tgz#dca9bd4cb8c067fc85304a31f38ec4766ba2d1ea"
-  integrity sha512-ZvxQ2QMy49bIIBpTqFiOenucqUyjTQ0WNLhBM6X1fh1NNlYAC6Kxsx8bRTY3jdYsYg44a0Z/uEgQkohbR0H87Q==
+    "@typescript-eslint/types" "5.54.0"
+    eslint-visitor-keys "^3.3.0"
 
-"@typescript-eslint/typescript-estree@5.10.1":
-  version "5.10.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.1.tgz#b268e67be0553f8790ba3fe87113282977adda15"
-  integrity sha512-PwIGnH7jIueXv4opcwEbVGDATjGPO1dx9RkUl5LlHDSe+FXxPwFL5W/qYd5/NHr7f6lo/vvTrAzd0KlQtRusJQ==
-  dependencies:
-    "@typescript-eslint/types" "5.10.1"
-    "@typescript-eslint/visitor-keys" "5.10.1"
-    debug "^4.3.2"
-    globby "^11.0.4"
-    is-glob "^4.0.3"
-    semver "^7.3.5"
-    tsutils "^3.21.0"
+"@use-gesture/core@10.2.17":
+  version "10.2.17"
+  resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.17.tgz#dc78913cd5d105217c3f1d1c16a32ad6426a00ba"
+  integrity sha512-62hCybe4x6oGZ1/JA9gSYIdghV1FqxCdvYWt9SqCEAAikwT1OmVl2Q/Uu8CP636L57D+DfXtw6PWM+fdhr4oJQ==
 
-"@typescript-eslint/visitor-keys@5.10.1":
-  version "5.10.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.1.tgz#29102de692f59d7d34ecc457ed59ab5fc558010b"
-  integrity sha512-NjQ0Xinhy9IL979tpoTRuLKxMc0zJC7QVSdeerXs2/QvOy2yRkzX5dRb10X5woNUdJgU8G3nYRDlI33sq1K4YQ==
+"@use-gesture/react@^10.2.17":
+  version "10.2.17"
+  resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.17.tgz#00bc413da42a358dd3f9173c0631b54522e76614"
+  integrity sha512-Vfrp1KgdYn/kOEUAYNXtGBCl2dr38s3G6rru1TOPs+cVUjfNyNxvJK56grUyJ336N3rQLK8F9G7+FfrHuc3g/Q==
   dependencies:
-    "@typescript-eslint/types" "5.10.1"
-    eslint-visitor-keys "^3.0.0"
+    "@use-gesture/core" "10.2.17"
 
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.6"
@@ -1408,7 +2434,7 @@ acorn-globals@^6.0.0:
     acorn "^7.1.1"
     acorn-walk "^7.1.1"
 
-acorn-jsx@^5.0.0, acorn-jsx@^5.3.1:
+acorn-jsx@^5.0.0, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
@@ -1423,11 +2449,16 @@ acorn@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.0.0, acorn@^8.2.4, acorn@^8.7.0:
+acorn@^8.0.0, acorn@^8.2.4:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
   integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
 
+acorn@^8.8.0:
+  version "8.8.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
+  integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -1445,10 +2476,17 @@ ajv@^6.10.0, ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ansi-colors@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
-  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
+ansi-colors@^4.1.1, ansi-colors@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
+  integrity sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==
+
+ansi-escapes@^4.2.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+  dependencies:
+    type-fest "^0.21.3"
 
 ansi-regex@^5.0.1:
   version "5.0.1"
@@ -1469,12 +2507,17 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+ansi-styles@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
+  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
+
 any-promise@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
   integrity sha1-q8av7tzqUugJzcA3au0845Y10X8=
 
-anymatch@~3.1.2:
+anymatch@^3.0.3, anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
   integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
@@ -1524,17 +2567,28 @@ arr-union@^3.1.0:
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
   integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
 
-array-includes@^3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.4.tgz#f5b493162c760f3539631f005ba2bb46acb45ba9"
-  integrity sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==
+array-includes@^3.1.4, array-includes@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.5.tgz#2c320010db8d31031fd2a5f6b3bbd4b1aad31bdb"
+  integrity sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
     get-intrinsic "^1.1.1"
     is-string "^1.0.7"
 
+array-includes@^3.1.6:
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.6.tgz#9e9e720e194f198266ba9e18c29e6a9b0e4b225f"
+  integrity sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    get-intrinsic "^1.1.3"
+    is-string "^1.0.7"
+
 array-union@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -1557,7 +2611,7 @@ array-unique@^0.3.2:
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
   integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
-array.prototype.flat@^1.2.5:
+array.prototype.flat@^1.2.3, array.prototype.flat@^1.2.5:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz#0b0c1567bf57b38b56b4c97b8aa72ab45e4adc7b"
   integrity sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==
@@ -1567,7 +2621,7 @@ array.prototype.flat@^1.2.5:
     es-abstract "^1.19.2"
     es-shim-unscopables "^1.0.0"
 
-array.prototype.flatmap@^1.2.5:
+array.prototype.flatmap@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz#a7e8ed4225f4788a70cd910abcf0791e76a5534f"
   integrity sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==
@@ -1577,6 +2631,27 @@ array.prototype.flatmap@^1.2.5:
     es-abstract "^1.19.2"
     es-shim-unscopables "^1.0.0"
 
+array.prototype.flatmap@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz#1aae7903c2100433cb8261cd4ed310aab5c4a183"
+  integrity sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.tosorted@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz#ccf44738aa2b5ac56578ffda97c03fd3e23dd532"
+  integrity sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    es-shim-unscopables "^1.0.0"
+    get-intrinsic "^1.1.3"
+
 arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
@@ -1607,6 +2682,11 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+available-typed-arrays@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
+  integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
+
 axe-core@^4.3.5:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.1.tgz#7dbdc25989298f9ad006645cd396782443757413"
@@ -1617,6 +2697,40 @@ axobject-query@^2.2.0:
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
+babel-jest@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-28.1.1.tgz#2a3a4ae50964695b2d694ccffe4bec537c5a3586"
+  integrity sha512-MEt0263viUdAkTq5D7upHPNxvt4n9uLUGa6pPz3WviNBMtOmStb1lIXS3QobnoqM+qnH+vr4EKlvhe8QcmxIYw==
+  dependencies:
+    "@jest/transform" "^28.1.1"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^28.1.1"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    slash "^3.0.0"
+
+babel-plugin-istanbul@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
+  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^5.0.4"
+    test-exclude "^6.0.0"
+
+babel-plugin-jest-hoist@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-28.1.1.tgz#5e055cdcc47894f28341f87f5e35aad2df680b11"
+  integrity sha512-NovGCy5Hn25uMJSAU8FaHqzs13cFoOI4lhIujiepssjCKRsAo3TA734RDWSGxuFTsUJXerYOqQQodlxgmtqbzw==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.1.14"
+    "@types/babel__traverse" "^7.0.6"
+
 babel-plugin-macros@^2.6.1:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
@@ -1626,6 +2740,32 @@ babel-plugin-macros@^2.6.1:
     cosmiconfig "^6.0.0"
     resolve "^1.12.0"
 
+babel-preset-current-node-syntax@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
+  integrity sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==
+  dependencies:
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-bigint" "^7.8.3"
+    "@babel/plugin-syntax-class-properties" "^7.8.3"
+    "@babel/plugin-syntax-import-meta" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-top-level-await" "^7.8.3"
+
+babel-preset-jest@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-28.1.1.tgz#5b6e5e69f963eb2d70f739c607b8f723c0ee75e4"
+  integrity sha512-FCq9Oud0ReTeWtcneYf/48981aTfXYuB9gbU4rBNNJVBSQ6ssv7E6v/qvbBxtOWwZFXjLZwpg+W3q7J6vhH25g==
+  dependencies:
+    babel-plugin-jest-hoist "^28.1.1"
+    babel-preset-current-node-syntax "^1.0.0"
+
 bail@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d"
@@ -1704,15 +2844,44 @@ browser-process-hrtime@^1.0.0:
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
   integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
+browserslist@^4.20.2:
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.0.tgz#7ab19572361a140ecd1e023e2c1ed95edda0cefe"
+  integrity sha512-UQxE0DIhRB5z/zDz9iA03BOfxaN2+GQdBYH/2WrSIWEUrnpzTPJbhqt+umq6r3acaPRTW1FNTkrcp0PXgtFkvA==
+  dependencies:
+    caniuse-lite "^1.0.30001358"
+    electron-to-chromium "^1.4.164"
+    node-releases "^2.0.5"
+    update-browserslist-db "^1.0.0"
+
+bs-logger@0.x:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
+  integrity sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==
+  dependencies:
+    fast-json-stable-stringify "2.x"
+
+bser@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
+  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
+  dependencies:
+    node-int64 "^0.4.0"
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
 builtins@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
   integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og=
 
-bundle-require@^3.0.2:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/bundle-require/-/bundle-require-3.0.4.tgz#2b52ba77d99c0a586b5854cd21d36954e63cc110"
-  integrity sha512-VXG6epB1yrLAvWVQpl92qF347/UXmncQj7J3U8kZEbdVZ1ZkQyr4hYeL/9RvcE8vVVdp53dY78Fd/3pqfRqI1A==
+bundle-require@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/bundle-require/-/bundle-require-3.1.0.tgz#e07256ff02c72cd3a665afa84ce930d111ae4252"
+  integrity sha512-IIXtAO7fKcwPHNPt9kY/WNVJqy7NDy6YqJvv6ENH0TOZoJ+yjpEsn1w40WKZbR2ibfu5g1rfgJTvmFHpm5aOMA==
   dependencies:
     load-tsconfig "^0.2.0"
 
@@ -1781,10 +2950,15 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-caniuse-lite@^1.0.30001283:
-  version "1.0.30001328"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001328.tgz#0ed7a2ca65ec45872c613630201644237ba1e329"
-  integrity sha512-Ue55jHkR/s4r00FLNiX+hGMMuwml/QGqqzVeMQ5thUewznU2EdULFvI3JR7JJid6OrjJNfFvHY2G2dIjmRaDDQ==
+camelcase@^6.2.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
+  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+
+caniuse-lite@^1.0.30001358, caniuse-lite@^1.0.30001406:
+  version "1.0.30001414"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001414.tgz#5f1715e506e71860b4b07c50060ea6462217611e"
+  integrity sha512-t55jfSaWjCdocnFdKQoO+d2ct9C59UZg4dY3OnUlSZ447r8pUtIKdp0hpAzrGFultmTC+Us+KpKi4GZl/LXlFg==
 
 ccount@^2.0.0:
   version "2.0.1"
@@ -1800,15 +2974,7 @@ chalk@^2.0.0, chalk@^2.1.0, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
-  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
-chalk@^4.0.0:
+chalk@^4.0.0, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -1816,6 +2982,11 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+char-regex@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
+  integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
+
 character-entities-html4@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-2.1.0.tgz#1f1adb940c971a4b22ba39ddca6b618dc6e56b2b"
@@ -1861,6 +3032,11 @@ ci-info@^3.1.0, ci-info@^3.2.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.3.0.tgz#b4ed1fb6818dea4803a55c623041f9165d2066b2"
   integrity sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==
 
+cjs-module-lexer@^1.0.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
+  integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
+
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -1885,6 +3061,15 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
 clone-response@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b"
@@ -1897,6 +3082,16 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
+
+collect-v8-coverage@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
+  integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -1961,7 +3156,7 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-convert-source-map@^1.5.0:
+convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -1973,6 +3168,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.2.tgz#5b263ec2366224b100181dded7ce0579b340c107"
+  integrity sha512-Vme1Z6RUDzrb6xAI7EZlVZ5uvOk2F//GaxKUxajDqm9LhOVM1inxNAD2vy+UZDYsd0uyA9s7b3/FVZPSxqrCfg==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-pure@^3.20.2:
   version "3.21.1"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.21.1.tgz#8c4d1e78839f5f46208de7230cebfb72bc3bdb51"
@@ -2066,7 +3268,7 @@ csv-stringify@^5.6.5:
   resolved "https://registry.yarnpkg.com/csv-stringify/-/csv-stringify-5.6.5.tgz#c6d74badda4b49a79bf4e72f91cce1e33b94de00"
   integrity sha512-PjiQ659aQ+fUTQqSrd1XEDnOr52jh30RBurfzkscaE2tPaFsDH5wOAHJiw8XAHphRknCwMUE9KRayc4K/NbO8A==
 
-csv@^5.3.1:
+csv@^5.5.0:
   version "5.5.3"
   resolved "https://registry.yarnpkg.com/csv/-/csv-5.5.3.tgz#cd26c1e45eae00ce6a9b7b27dcb94955ec95207d"
   integrity sha512-QTaY0XjjhTQOdguARF0lGKm5/mEq9PD9/VhZZegHDIBq2tQwgNpHc3dneD4mGo2iJs+fTKv5Bp0fZ+BRuY3Z0g==
@@ -2102,7 +3304,7 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-debug@4, debug@^4.0.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2:
+debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -2160,6 +3362,11 @@ decompress-response@^3.3.0:
   dependencies:
     mimic-response "^1.0.0"
 
+dedent@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+  integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
+
 deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
@@ -2187,6 +3394,11 @@ defer-to-connect@^1.0.1:
   resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591"
   integrity sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==
 
+define-lazy-prop@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
+  integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
+
 define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -2194,6 +3406,14 @@ define-properties@^1.1.3:
   dependencies:
     object-keys "^1.0.12"
 
+define-properties@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
+  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
+  dependencies:
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
 define-property@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
@@ -2238,11 +3458,21 @@ detect-indent@^6.0.0:
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
   integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
 
+detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
+  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
+
 detect-node-es@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
   integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
 
+diff-sequences@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-28.1.1.tgz#9989dc731266dc2903457a70e996f3a041913ac6"
+  integrity sha512-FU0iFaH/E23a+a718l8Qa/19bF9p06kgE0KipMOMadwa3SjnaElKzPaUC0vnibs6/B/9ni97s61mcejk8W1fQw==
+
 diff@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
@@ -2299,6 +3529,16 @@ duplexer3@^0.1.4:
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
   integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
 
+electron-to-chromium@^1.4.164:
+  version "1.4.168"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.168.tgz#8f6bda320a434ac963850d18e41d83220973cbdd"
+  integrity sha512-yz247hclRBaP8ABB1hf9kL7AMfa+yC2hB9F3XF8Y87VWMnYgq4QYvV6acRACcDkTDxfGQ4GYK/aZPQiuFMGbaA==
+
+emittery@^0.10.2:
+  version "0.10.2"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.10.2.tgz#902eec8aedb8c41938c46e9385e9db7e03182933"
+  integrity sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -2316,6 +3556,14 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
+enhanced-resolve@^5.10.0:
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz#300e1c90228f5b570c4d35babf263f6da7155634"
+  integrity sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 enquirer@^2.3.0:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
@@ -2330,6 +3578,35 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+es-abstract@^1.19.0, es-abstract@^1.19.5:
+  version "1.20.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.1.tgz#027292cd6ef44bd12b1913b828116f54787d1814"
+  integrity sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    function.prototype.name "^1.1.5"
+    get-intrinsic "^1.1.1"
+    get-symbol-description "^1.0.0"
+    has "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    is-callable "^1.2.4"
+    is-negative-zero "^2.0.2"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    is-string "^1.0.7"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    regexp.prototype.flags "^1.4.3"
+    string.prototype.trimend "^1.0.5"
+    string.prototype.trimstart "^1.0.5"
+    unbox-primitive "^1.0.2"
+
 es-abstract@^1.19.1, es-abstract@^1.19.2:
   version "1.19.3"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.19.3.tgz#4dd9da55868192756c83c5c30c7878d04e77125d"
@@ -2356,6 +3633,54 @@ es-abstract@^1.19.1, es-abstract@^1.19.2:
     string.prototype.trimstart "^1.0.4"
     unbox-primitive "^1.0.1"
 
+es-abstract@^1.20.4:
+  version "1.21.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.21.1.tgz#e6105a099967c08377830a0c9cb589d570dd86c6"
+  integrity sha512-QudMsPOz86xYz/1dG1OuGBKOELjCh99IIWHLzy5znUB6j8xG2yMA7bfTV86VSqKF+Y/H08vQPR+9jyXpuC6hfg==
+  dependencies:
+    available-typed-arrays "^1.0.5"
+    call-bind "^1.0.2"
+    es-set-tostringtag "^2.0.1"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    function.prototype.name "^1.1.5"
+    get-intrinsic "^1.1.3"
+    get-symbol-description "^1.0.0"
+    globalthis "^1.0.3"
+    gopd "^1.0.1"
+    has "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.4"
+    is-array-buffer "^3.0.1"
+    is-callable "^1.2.7"
+    is-negative-zero "^2.0.2"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    is-string "^1.0.7"
+    is-typed-array "^1.1.10"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.4.3"
+    safe-regex-test "^1.0.0"
+    string.prototype.trimend "^1.0.6"
+    string.prototype.trimstart "^1.0.6"
+    typed-array-length "^1.0.4"
+    unbox-primitive "^1.0.2"
+    which-typed-array "^1.1.9"
+
+es-set-tostringtag@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
+  integrity sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==
+  dependencies:
+    get-intrinsic "^1.1.3"
+    has "^1.0.3"
+    has-tostringtag "^1.0.0"
+
 es-shim-unscopables@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
@@ -2372,142 +3697,153 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-esbuild-android-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.36.tgz#fc5f95ce78c8c3d790fa16bc71bd904f2bb42aa1"
-  integrity sha512-jwpBhF1jmo0tVCYC/ORzVN+hyVcNZUWuozGcLHfod0RJCedTDTvR4nwlTXdx1gtncDqjk33itjO+27OZHbiavw==
-
-esbuild-android-arm64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.36.tgz#44356fbb9f8de82a5cdf11849e011dfb3ad0a8a8"
-  integrity sha512-/hYkyFe7x7Yapmfv4X/tBmyKnggUmdQmlvZ8ZlBnV4+PjisrEhAvC3yWpURuD9XoB8Wa1d5dGkTsF53pIvpjsg==
-
-esbuild-darwin-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.36.tgz#3d9324b21489c70141665c2e740d6e84f16f725d"
-  integrity sha512-kkl6qmV0dTpyIMKagluzYqlc1vO0ecgpviK/7jwPbRDEv5fejRTaBBEE2KxEQbTHcLhiiDbhG7d5UybZWo/1zQ==
-
-esbuild-darwin-arm64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.36.tgz#2a8040c2e465131e5281034f3c72405e643cb7b2"
-  integrity sha512-q8fY4r2Sx6P0Pr3VUm//eFYKVk07C5MHcEinU1BjyFnuYz4IxR/03uBbDwluR6ILIHnZTE7AkTUWIdidRi1Jjw==
-
-esbuild-freebsd-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.36.tgz#d82c387b4d01fe9e8631f97d41eb54f2dbeb68a3"
-  integrity sha512-Hn8AYuxXXRptybPqoMkga4HRFE7/XmhtlQjXFHoAIhKUPPMeJH35GYEUWGbjteai9FLFvBAjEAlwEtSGxnqWww==
-
-esbuild-freebsd-arm64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.36.tgz#e8ce2e6c697da6c7ecd0cc0ac821d47c5ab68529"
-  integrity sha512-S3C0attylLLRiCcHiJd036eDEMOY32+h8P+jJ3kTcfhJANNjP0TNBNL30TZmEdOSx/820HJFgRrqpNAvTbjnDA==
-
-esbuild-linux-32@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.36.tgz#a4a261e2af91986ea62451f2db712a556cb38a15"
-  integrity sha512-Eh9OkyTrEZn9WGO4xkI3OPPpUX7p/3QYvdG0lL4rfr73Ap2HAr6D9lP59VMF64Ex01LhHSXwIsFG/8AQjh6eNw==
-
-esbuild-linux-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.36.tgz#4a9500f9197e2c8fcb884a511d2c9d4c2debde72"
-  integrity sha512-vFVFS5ve7PuwlfgoWNyRccGDi2QTNkQo/2k5U5ttVD0jRFaMlc8UQee708fOZA6zTCDy5RWsT5MJw3sl2X6KDg==
-
-esbuild-linux-arm64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.36.tgz#c91c21e25b315464bd7da867365dd1dae14ca176"
-  integrity sha512-24Vq1M7FdpSmaTYuu1w0Hdhiqkbto1I5Pjyi+4Cdw5fJKGlwQuw+hWynTcRI/cOZxBcBpP21gND7W27gHAiftw==
-
-esbuild-linux-arm@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.36.tgz#90e23bca2e6e549affbbe994f80ba3bb6c4d934a"
-  integrity sha512-NhgU4n+NCsYgt7Hy61PCquEz5aevI6VjQvxwBxtxrooXsxt5b2xtOUXYZe04JxqQo+XZk3d1gcr7pbV9MAQ/Lg==
-
-esbuild-linux-mips64le@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.36.tgz#40e11afb08353ff24709fc89e4db0f866bc131d2"
-  integrity sha512-hZUeTXvppJN+5rEz2EjsOFM9F1bZt7/d2FUM1lmQo//rXh1RTFYzhC0txn7WV0/jCC7SvrGRaRz0NMsRPf8SIA==
-
-esbuild-linux-ppc64le@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.36.tgz#9e8a588c513d06cc3859f9dcc52e5fdfce8a1a5e"
-  integrity sha512-1Bg3QgzZjO+QtPhP9VeIBhAduHEc2kzU43MzBnMwpLSZ890azr4/A9Dganun8nsqD/1TBcqhId0z4mFDO8FAvg==
-
-esbuild-linux-riscv64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.36.tgz#e578c09b23b3b97652e60e3692bfda628b541f06"
-  integrity sha512-dOE5pt3cOdqEhaufDRzNCHf5BSwxgygVak9UR7PH7KPVHwSTDAZHDoEjblxLqjJYpc5XaU9+gKJ9F8mp9r5I4A==
-
-esbuild-linux-s390x@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.36.tgz#3c9dab40d0d69932ffded0fd7317bb403626c9bc"
-  integrity sha512-g4FMdh//BBGTfVHjF6MO7Cz8gqRoDPzXWxRvWkJoGroKA18G9m0wddvPbEqcQf5Tbt2vSc1CIgag7cXwTmoTXg==
-
-esbuild-netbsd-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.36.tgz#e27847f6d506218291619b8c1e121ecd97628494"
-  integrity sha512-UB2bVImxkWk4vjnP62ehFNZ73lQY1xcnL5ZNYF3x0AG+j8HgdkNF05v67YJdCIuUJpBuTyCK8LORCYo9onSW+A==
-
-esbuild-openbsd-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.36.tgz#c94c04c557fae516872a586eae67423da6d2fabb"
-  integrity sha512-NvGB2Chf8GxuleXRGk8e9zD3aSdRO5kLt9coTQbCg7WMGXeX471sBgh4kSg8pjx0yTXRt0MlrUDnjVYnetyivg==
-
-esbuild-sunos-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.36.tgz#9b79febc0df65a30f1c9bd63047d1675511bf99d"
-  integrity sha512-VkUZS5ftTSjhRjuRLp+v78auMO3PZBXu6xl4ajomGenEm2/rGuWlhFSjB7YbBNErOchj51Jb2OK8lKAo8qdmsQ==
-
-esbuild-windows-32@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.36.tgz#910d11936c8d2122ffdd3275e5b28d8a4e1240ec"
-  integrity sha512-bIar+A6hdytJjZrDxfMBUSEHHLfx3ynoEZXx/39nxy86pX/w249WZm8Bm0dtOAByAf4Z6qV0LsnTIJHiIqbw0w==
-
-esbuild-windows-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.36.tgz#21b4ce8b42a4efc63f4b58ec617f1302448aad26"
-  integrity sha512-+p4MuRZekVChAeueT1Y9LGkxrT5x7YYJxYE8ZOTcEfeUUN43vktSn6hUNsvxzzATrSgq5QqRdllkVBxWZg7KqQ==
-
-esbuild-windows-arm64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.36.tgz#ba21546fecb7297667d0052d00150de22c044b24"
-  integrity sha512-fBB4WlDqV1m18EF/aheGYQkQZHfPHiHJSBYzXIo8yKehek+0BtBwo/4PNwKGJ5T0YK0oc8pBKjgwPbzSrPLb+Q==
-
-esbuild@^0.14.25:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.36.tgz#0023a73eab57886ac5605df16ee421e471a971b3"
-  integrity sha512-HhFHPiRXGYOCRlrhpiVDYKcFJRdO0sBElZ668M4lh2ER0YgnkLxECuFe7uWCf23FrcLc59Pqr7dHkTqmRPDHmw==
+esbuild-android-64@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.6.tgz#baaed943ca510c2ad546e116728132e76d1d2044"
+  integrity sha512-Z1CHSgB1crVQi2LKSBwSkpaGtaloVz0ZIYcRMsvHc3uSXcR/x5/bv9wcZspvH/25lIGTaViosciS/NS09ERmVA==
+
+esbuild-android-arm64@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.6.tgz#1c33c73d4c074969e014e31958116460c8e75a7a"
+  integrity sha512-mvM+gqNxqKm2pCa3dnjdRzl7gIowuc4ga7P7c3yHzs58Im8v/Lfk1ixSgQ2USgIywT48QWaACRa3F4MG7djpSw==
+
+esbuild-darwin-64@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.6.tgz#388592ba61bf31993d79f6311f7452aa1ef255b9"
+  integrity sha512-BsfVt3usScAfGlXJiGtGamwVEOTM8AiYiw1zqDWhGv6BncLXCnTg1As+90mxWewdTZKq3iIy8s9g8CKkrrAXVw==
+
+esbuild-darwin-arm64@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.6.tgz#194e987849dc4688654008a1792f26e948f52e74"
+  integrity sha512-CnrAeJaEpPakUobhqO4wVSA4Zm6TPaI5UY4EsI62j9mTrjIyQPXA1n4Ju6Iu5TVZRnEqV6q8blodgYJ6CJuwCA==
+
+esbuild-freebsd-64@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.6.tgz#daa72faee585ec2ec27cc65e86a6ce0786373e66"
+  integrity sha512-+qFdmqi+jkAsxsNJkaWVrnxEUUI50nu6c3MBVarv3RCDCbz7ZS1a4ZrdkwEYFnKcVWu6UUE0Kkb1SQ1yGEG6sg==
+
+esbuild-freebsd-arm64@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.6.tgz#70c8a2a30bf6bb9d547a0d8dc93aa015ec4f77f9"
+  integrity sha512-KtQkQOhnNciXm2yrTYZMD3MOm2zBiiwFSU+dkwNbcfDumzzUprr1x70ClTdGuZwieBS1BM/k0KajRQX7r504Xw==
+
+esbuild-linux-32@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.6.tgz#d69ed2335b2d68c00b3248254b432172077b7ced"
+  integrity sha512-IAkDNz3TpxwISTGVdQijwyHBZrbFgLlRi5YXcvaEHtgbmayLSDcJmH5nV1MFgo/x2QdKcHBkOYHdjhKxUAcPwg==
+
+esbuild-linux-64@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.15.6.tgz#dca821e8f129cccde23ac947fd0d4bea3b333808"
+  integrity sha512-gQPksyrEYfA4LJwyfTQWAZaVZCx4wpaLrSzo2+Xc9QLC+i/sMWmX31jBjrn4nLJCd79KvwCinto36QC7BEIU/A==
+
+esbuild-linux-arm64@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.6.tgz#c9e8bc86f3c58a7c8ff1ded5880c6a39ade7621b"
+  integrity sha512-aovDkclFa6C9EdZVBuOXxqZx83fuoq8097xZKhEPSygwuy4Lxs8J4anHG7kojAsR+31lfUuxzOo2tHxv7EiNHA==
+
+esbuild-linux-arm@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.6.tgz#354ecad0223f5b176995cf4462560eec2633de24"
+  integrity sha512-xZ0Bq2aivsthDjA/ytQZzxrxIZbG0ATJYMJxNeOIBc1zUjpbVpzBKgllOZMsTSXMHFHGrow6TnCcgwqY0+oEoQ==
+
+esbuild-linux-mips64le@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.6.tgz#f4fb941a4ff0af437deed69a2e0712983c8fff3e"
+  integrity sha512-wVpW8wkWOGizsCqCwOR/G3SHwhaecpGy3fic9BF1r7vq4djLjUcA8KunDaBCjJ6TgLQFhJ98RjDuyEf8AGjAvw==
+
+esbuild-linux-ppc64le@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.6.tgz#19774a8b52c77173f2d4f171b8a8cf839b12e686"
+  integrity sha512-z6w6gsPH/Y77uchocluDC8tkCg9rfkcPTePzZKNr879bF4tu7j9t255wuNOCE396IYEGxY7y8u2HJ9i7kjCLVw==
+
+esbuild-linux-riscv64@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.6.tgz#66bd83b065c4a1e623df02c122bc7e4e15fd8486"
+  integrity sha512-pfK/3MJcmbfU399TnXW5RTPS1S+ID6ra+CVj9TFZ2s0q9Ja1F5A1VirUUvViPkjiw+Kq3zveyn6U09Wg1zJXrw==
+
+esbuild-linux-s390x@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.6.tgz#1e024bddc75afe8dc70ed48fc9627af770d7f34b"
+  integrity sha512-OZeeDu32liefcwAE63FhVqM4heWTC8E3MglOC7SK0KYocDdY/6jyApw0UDkDHlcEK9mW6alX/SH9r3PDjcCo/Q==
+
+esbuild-netbsd-64@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.6.tgz#c11477d197f059c8794ee1691e3399201f7c4b9a"
+  integrity sha512-kaxw61wcHMyiEsSsi5ut1YYs/hvTC2QkxJwyRvC2Cnsz3lfMLEu8zAjpBKWh9aU/N0O/gsRap4wTur5GRuSvBA==
+
+esbuild-openbsd-64@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.6.tgz#b29e7faed5b8d2aeaf3884c47c1a96b1cba8e263"
+  integrity sha512-CuoY60alzYfIZapUHqFXqXbj88bbRJu8Fp9okCSHRX2zWIcGz4BXAHXiG7dlCye5nFVrY72psesLuWdusyf2qw==
+
+esbuild-sunos-64@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.6.tgz#9668f39e47179f50c0435040904b9c6e10e84a70"
+  integrity sha512-1ceefLdPWcd1nW/ZLruPEYxeUEAVX0YHbG7w+BB4aYgfknaLGotI/ZvPWUZpzhC8l1EybrVlz++lm3E6ODIJOg==
+
+esbuild-windows-32@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.6.tgz#9ddcd56e3c4fb9729a218c713c4e76bdbc1678b4"
+  integrity sha512-pBqdOsKqCD5LRYiwF29PJRDJZi7/Wgkz46u3d17MRFmrLFcAZDke3nbdDa1c8YgY78RiemudfCeAemN8EBlIpA==
+
+esbuild-windows-64@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.15.6.tgz#1eaadeadfd995e9d065d35cb3e9f02607202f339"
+  integrity sha512-KpPOh4aTOo//g9Pk2oVAzXMpc9Sz9n5A9sZTmWqDSXCiiachfFhbuFlsKBGATYCVitXfmBIJ4nNYYWSOdz4hQg==
+
+esbuild-windows-arm64@0.15.6:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.6.tgz#e18a778d354fc2ca2306688f3fedad8a3e57819e"
+  integrity sha512-DB3G2x9OvFEa00jV+OkDBYpufq5x/K7a6VW6E2iM896DG4ZnAvJKQksOsCPiM1DUaa+DrijXAQ/ZOcKAqf/3Hg==
+
+esbuild@^0.15.1:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.15.6.tgz#626e5941b98de506b862047be3c4b33f89278923"
+  integrity sha512-sgLOv3l4xklvXzzczhRwKRotyrfyZ2i1fCS6PTOLPd9wevDPArGU8HFtHrHCOcsMwTjLjzGm15gvC8uxVzQf+w==
   optionalDependencies:
-    esbuild-android-64 "0.14.36"
-    esbuild-android-arm64 "0.14.36"
-    esbuild-darwin-64 "0.14.36"
-    esbuild-darwin-arm64 "0.14.36"
-    esbuild-freebsd-64 "0.14.36"
-    esbuild-freebsd-arm64 "0.14.36"
-    esbuild-linux-32 "0.14.36"
-    esbuild-linux-64 "0.14.36"
-    esbuild-linux-arm "0.14.36"
-    esbuild-linux-arm64 "0.14.36"
-    esbuild-linux-mips64le "0.14.36"
-    esbuild-linux-ppc64le "0.14.36"
-    esbuild-linux-riscv64 "0.14.36"
-    esbuild-linux-s390x "0.14.36"
-    esbuild-netbsd-64 "0.14.36"
-    esbuild-openbsd-64 "0.14.36"
-    esbuild-sunos-64 "0.14.36"
-    esbuild-windows-32 "0.14.36"
-    esbuild-windows-64 "0.14.36"
-    esbuild-windows-arm64 "0.14.36"
+    "@esbuild/linux-loong64" "0.15.6"
+    esbuild-android-64 "0.15.6"
+    esbuild-android-arm64 "0.15.6"
+    esbuild-darwin-64 "0.15.6"
+    esbuild-darwin-arm64 "0.15.6"
+    esbuild-freebsd-64 "0.15.6"
+    esbuild-freebsd-arm64 "0.15.6"
+    esbuild-linux-32 "0.15.6"
+    esbuild-linux-64 "0.15.6"
+    esbuild-linux-arm "0.15.6"
+    esbuild-linux-arm64 "0.15.6"
+    esbuild-linux-mips64le "0.15.6"
+    esbuild-linux-ppc64le "0.15.6"
+    esbuild-linux-riscv64 "0.15.6"
+    esbuild-linux-s390x "0.15.6"
+    esbuild-netbsd-64 "0.15.6"
+    esbuild-openbsd-64 "0.15.6"
+    esbuild-sunos-64 "0.15.6"
+    esbuild-windows-32 "0.15.6"
+    esbuild-windows-64 "0.15.6"
+    esbuild-windows-arm64 "0.15.6"
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
 escape-html@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
-  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
 
 escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
 escape-string-regexp@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
@@ -2530,34 +3866,26 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-next@^12.1.5:
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-12.1.5.tgz#658cc61194a32dfd917a3db199351396ea5db1d1"
-  integrity sha512-P+DCt5ti63KhC0qNLzrAmPcwRGq8pYqgcf/NNr1E+WjCrMkWdCAXkIANTquo+kcO1adR2k1lTo5GCrNUtKy4hQ==
-  dependencies:
-    "@next/eslint-plugin-next" "12.1.5"
-    "@rushstack/eslint-patch" "1.0.8"
-    "@typescript-eslint/parser" "5.10.1"
-    eslint-import-resolver-node "0.3.4"
-    eslint-import-resolver-typescript "2.4.0"
-    eslint-plugin-import "2.25.2"
-    eslint-plugin-jsx-a11y "6.5.1"
-    eslint-plugin-react "7.29.1"
-    eslint-plugin-react-hooks "4.3.0"
+eslint-config-next@^13.2.3:
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.2.3.tgz#8a952bfd856f492684a30dd5fcdc8979c97c1cc2"
+  integrity sha512-kPulHiQEHGei9hIaaNGygHRc0UzlWM+3euOmYbxNkd2Nbhci5rrCDeMBMPSV8xgUssphDGmwDHWbk4VZz3rlZQ==
+  dependencies:
+    "@next/eslint-plugin-next" "13.2.3"
+    "@rushstack/eslint-patch" "^1.1.3"
+    "@typescript-eslint/parser" "^5.42.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-import-resolver-typescript "^3.5.2"
+    eslint-plugin-import "^2.26.0"
+    eslint-plugin-jsx-a11y "^6.5.1"
+    eslint-plugin-react "^7.31.7"
+    eslint-plugin-react-hooks "^4.5.0"
 
 eslint-config-prettier@^8.5.0:
   version "8.5.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
   integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
 
-eslint-import-resolver-node@0.3.4:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717"
-  integrity sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==
-  dependencies:
-    debug "^2.6.9"
-    resolve "^1.13.1"
-
 eslint-import-resolver-node@^0.3.6:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd"
@@ -2566,18 +3894,20 @@ eslint-import-resolver-node@^0.3.6:
     debug "^3.2.7"
     resolve "^1.20.0"
 
-eslint-import-resolver-typescript@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.4.0.tgz#ec1e7063ebe807f0362a7320543aaed6fe1100e1"
-  integrity sha512-useJKURidCcldRLCNKWemr1fFQL1SzB3G4a0li6lFGvlc5xGe1hY343bvG07cbpCzPuM/lK19FIJB3XGFSkplA==
-  dependencies:
-    debug "^4.1.1"
-    glob "^7.1.6"
-    is-glob "^4.0.1"
-    resolve "^1.17.0"
-    tsconfig-paths "^3.9.0"
+eslint-import-resolver-typescript@^3.5.2:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.5.3.tgz#db5ed9e906651b7a59dd84870aaef0e78c663a05"
+  integrity sha512-njRcKYBc3isE42LaTcJNVANR3R99H9bAxBDMNDr2W7yq5gYPxbU3MkdhsQukxZ/Xg9C2vcyLlDsbKfRDg0QvCQ==
+  dependencies:
+    debug "^4.3.4"
+    enhanced-resolve "^5.10.0"
+    get-tsconfig "^4.2.0"
+    globby "^13.1.2"
+    is-core-module "^2.10.0"
+    is-glob "^4.0.3"
+    synckit "^0.8.4"
 
-eslint-module-utils@^2.7.0:
+eslint-module-utils@^2.7.3:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz#ad7e3a10552fdd0642e1e55292781bd6e34876ee"
   integrity sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==
@@ -2585,26 +3915,26 @@ eslint-module-utils@^2.7.0:
     debug "^3.2.7"
     find-up "^2.1.0"
 
-eslint-plugin-import@2.25.2:
-  version "2.25.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.25.2.tgz#b3b9160efddb702fc1636659e71ba1d10adbe9e9"
-  integrity sha512-qCwQr9TYfoBHOFcVGKY9C9unq05uOxxdklmBXLVvcwo68y5Hta6/GzCZEMx2zQiu0woKNEER0LE7ZgaOfBU14g==
+eslint-plugin-import@^2.26.0:
+  version "2.26.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz#f812dc47be4f2b72b478a021605a59fc6fe8b88b"
+  integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
   dependencies:
     array-includes "^3.1.4"
     array.prototype.flat "^1.2.5"
     debug "^2.6.9"
     doctrine "^2.1.0"
     eslint-import-resolver-node "^0.3.6"
-    eslint-module-utils "^2.7.0"
+    eslint-module-utils "^2.7.3"
     has "^1.0.3"
-    is-core-module "^2.7.0"
+    is-core-module "^2.8.1"
     is-glob "^4.0.3"
-    minimatch "^3.0.4"
+    minimatch "^3.1.2"
     object.values "^1.1.5"
-    resolve "^1.20.0"
-    tsconfig-paths "^3.11.0"
+    resolve "^1.22.0"
+    tsconfig-paths "^3.14.1"
 
-eslint-plugin-jsx-a11y@6.5.1:
+eslint-plugin-jsx-a11y@^6.5.1:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz#cdbf2df901040ca140b6ec14715c988889c2a6d8"
   integrity sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==
@@ -2622,50 +3952,51 @@ eslint-plugin-jsx-a11y@6.5.1:
     language-tags "^1.0.5"
     minimatch "^3.0.4"
 
-eslint-plugin-react-hooks@4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz#318dbf312e06fab1c835a4abef00121751ac1172"
-  integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==
+eslint-plugin-react-hooks@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz#5f762dfedf8b2cf431c689f533c9d3fa5dcf25ad"
+  integrity sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==
 
-eslint-plugin-react@7.29.1:
-  version "7.29.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.29.1.tgz#6c40bc83142bb63d132a1b3565e2ea655411f800"
-  integrity sha512-WtzRpHMhsOX05ZrkyaaqmLl2uXGqmYooCfBxftJKlkYdsltiufGgfU7uuoHwR2lBam2Kh/EIVID4aU9e3kbCMA==
+eslint-plugin-react@7.30.0:
+  version "7.30.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.30.0.tgz#8e7b1b2934b8426ac067a0febade1b13bd7064e3"
+  integrity sha512-RgwH7hjW48BleKsYyHK5vUAvxtE9SMPDKmcPRQgtRCYaZA0XQPt5FSkrU3nhz5ifzMZcA8opwmRJ2cmOO8tr5A==
   dependencies:
-    array-includes "^3.1.4"
-    array.prototype.flatmap "^1.2.5"
+    array-includes "^3.1.5"
+    array.prototype.flatmap "^1.3.0"
     doctrine "^2.1.0"
     estraverse "^5.3.0"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
     minimatch "^3.1.2"
     object.entries "^1.1.5"
     object.fromentries "^2.0.5"
-    object.hasown "^1.1.0"
+    object.hasown "^1.1.1"
     object.values "^1.1.5"
     prop-types "^15.8.1"
     resolve "^2.0.0-next.3"
     semver "^6.3.0"
-    string.prototype.matchall "^4.0.6"
+    string.prototype.matchall "^4.0.7"
 
-eslint-plugin-react@7.29.4:
-  version "7.29.4"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz#4717de5227f55f3801a5fd51a16a4fa22b5914d2"
-  integrity sha512-CVCXajliVh509PcZYRFyu/BoUEz452+jtQJq2b3Bae4v3xBUWPLCmtmBM+ZinG4MzwmxJgJ2M5rMqhqLVn7MtQ==
+eslint-plugin-react@^7.31.7:
+  version "7.32.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10"
+  integrity sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==
   dependencies:
-    array-includes "^3.1.4"
-    array.prototype.flatmap "^1.2.5"
+    array-includes "^3.1.6"
+    array.prototype.flatmap "^1.3.1"
+    array.prototype.tosorted "^1.1.1"
     doctrine "^2.1.0"
     estraverse "^5.3.0"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
     minimatch "^3.1.2"
-    object.entries "^1.1.5"
-    object.fromentries "^2.0.5"
-    object.hasown "^1.1.0"
-    object.values "^1.1.5"
+    object.entries "^1.1.6"
+    object.fromentries "^2.0.6"
+    object.hasown "^1.1.2"
+    object.values "^1.1.6"
     prop-types "^15.8.1"
-    resolve "^2.0.0-next.3"
+    resolve "^2.0.0-next.4"
     semver "^6.3.0"
-    string.prototype.matchall "^4.0.6"
+    string.prototype.matchall "^4.0.8"
 
 eslint-scope@^7.1.1:
   version "7.1.1"
@@ -2687,18 +4018,20 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
-eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.3.0:
+eslint-visitor-keys@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
-eslint@8.13.0:
-  version "8.13.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.13.0.tgz#6fcea43b6811e655410f5626cfcf328016badcd7"
-  integrity sha512-D+Xei61eInqauAyTJ6C0q6x9mx7kTUC1KZ0m0LSEexR0V+e94K12LmWX076ZIsldwfQ2RONdaJe0re0TRGQbRQ==
+eslint@8.26.0:
+  version "8.26.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.26.0.tgz#2bcc8836e6c424c4ac26a5674a70d44d84f2181d"
+  integrity sha512-kzJkpaw1Bfwheq4VXUezFriD1GxszX6dUekM7Z3aC2o4hju+tsR/XyTC3RcoSD7jmy9VkPU3+N6YjVU2e96Oyg==
   dependencies:
-    "@eslint/eslintrc" "^1.2.1"
-    "@humanwhocodes/config-array" "^0.9.2"
+    "@eslint/eslintrc" "^1.3.3"
+    "@humanwhocodes/config-array" "^0.11.6"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
     ajv "^6.10.0"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
@@ -2708,43 +4041,45 @@ eslint@8.13.0:
     eslint-scope "^7.1.1"
     eslint-utils "^3.0.0"
     eslint-visitor-keys "^3.3.0"
-    espree "^9.3.1"
+    espree "^9.4.0"
     esquery "^1.4.0"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob-parent "^6.0.1"
-    globals "^13.6.0"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.15.0"
+    grapheme-splitter "^1.0.4"
     ignore "^5.2.0"
     import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-sdsl "^4.1.4"
     js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
     lodash.merge "^4.6.2"
-    minimatch "^3.0.4"
+    minimatch "^3.1.2"
     natural-compare "^1.4.0"
     optionator "^0.9.1"
     regexpp "^3.2.0"
     strip-ansi "^6.0.1"
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
 
 esm@^3.0.84:
   version "3.2.25"
   resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
   integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
 
-espree@^9.3.1:
-  version "9.3.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.1.tgz#8793b4bc27ea4c778c19908e0719e7b8f4115bcd"
-  integrity sha512-bvdyLmJMfwkV3NCRl5ZhJf22zBFo1y8bYh3VYb+bfzqNB4Je68P2sSuXyuFquzWLebHpNd2/d5uv7yoP9ISnGQ==
+espree@^9.4.0:
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.0.tgz#cd4bc3d6e9336c433265fc0aa016fc1aaf182f8a"
+  integrity sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==
   dependencies:
-    acorn "^8.7.0"
-    acorn-jsx "^5.3.1"
+    acorn "^8.8.0"
+    acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.3.0"
 
 esprima@^4.0.0, esprima@^4.0.1:
@@ -2825,6 +4160,11 @@ execa@^5.0.0:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+  integrity sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==
+
 expand-brackets@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
@@ -2838,6 +4178,17 @@ expand-brackets@^2.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+expect@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-28.1.1.tgz#ca6fff65f6517cf7220c2e805a49c19aea30b420"
+  integrity sha512-/AANEwGL0tWBwzLNOvO0yUdy2D52jVdNXppOqswC49sxMN2cPWsGCQdzuIf9tj6hHoBQzNvx75JUYuQAckPo3w==
+  dependencies:
+    "@jest/expect-utils" "^28.1.1"
+    jest-get-type "^28.0.2"
+    jest-matcher-utils "^28.1.1"
+    jest-message-util "^28.1.1"
+    jest-util "^28.1.1"
+
 extend-shallow@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
@@ -2903,6 +4254,17 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
+fast-glob@^3.2.11:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
@@ -2914,7 +4276,7 @@ fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-json-stable-stringify@^2.0.0:
+fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
@@ -2931,6 +4293,13 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fb-watchman@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.1.tgz#fc84fb39d2709cf3ff6d743706157bb5708a8a85"
+  integrity sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==
+  dependencies:
+    bser "2.1.1"
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -3004,6 +4373,13 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
+for-each@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
+  integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
+  dependencies:
+    is-callable "^1.1.3"
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -3048,7 +4424,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@~2.3.2:
+fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -3058,12 +4434,32 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
-functional-red-black-tree@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
-  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
+function.prototype.name@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
+  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.0"
+    functions-have-names "^1.2.2"
+
+functions-have-names@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
+fuzzysort@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fuzzysort/-/fuzzysort-2.0.1.tgz#e1bf6abbcfeefd1191900a5f56527aa0508d6934"
+  integrity sha512-SlgbPAq0eQ6JQ1h3l4MNeGH/t9DHKH8GGM0RD/6RhmJrNnSoWt3oIVaiQm9g9BPB+wAhRMeMqlUTbhbd7+Ufcg==
+
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-caller-file@^2.0.1:
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@@ -3088,11 +4484,25 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz#7ad1dc0535f3a2904bba075772763e5051f6d05f"
+  integrity sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.3"
+
 get-nonce@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
   integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
 
+get-package-type@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
+  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
+
 get-stream@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
@@ -3120,6 +4530,11 @@ get-symbol-description@^1.0.0:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
+get-tsconfig@^4.2.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.4.0.tgz#64eee64596668a81b8fce18403f94f245ee0d4e5"
+  integrity sha512-0Gdjo/9+FzsYhXCEFueo2aY1z1tpXrxWZzP7k8ul9qt1U5o8rYJwTJYmaeHdrVosYIVYkOy2iwCJ9FdpocJhPQ==
+
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
@@ -3155,7 +4570,7 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.1:
+glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
@@ -3191,26 +4606,55 @@ glob@7.1.7:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.3, glob@^7.1.6:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
-  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+glob@^7.1.3:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.1.4:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "^3.0.4"
+    minimatch "^3.1.1"
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-globals@^13.6.0, globals@^13.9.0:
-  version "13.13.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.13.0.tgz#ac32261060d8070e2719dd6998406e27d2b5727b"
-  integrity sha512-EQ7Q18AJlPwp3vUDL4mKA0KXrXyNIQyWon6T6XQiBQF0XHvRsiCSrWmmeATpUzdJN2HhWZU6Pdl0a9zdep5p6A==
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
+globals@^13.15.0:
+  version "13.15.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.15.0.tgz#38113218c907d2f7e98658af246cef8b77e90bac"
+  integrity sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==
   dependencies:
     type-fest "^0.20.2"
 
-globby@^11.0.0, globby@^11.0.3, globby@^11.0.4:
+globalthis@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
+  integrity sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==
+  dependencies:
+    define-properties "^1.1.3"
+
+globalyzer@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/globalyzer/-/globalyzer-0.1.0.tgz#cb76da79555669a1519d5a8edf093afaa0bf1465"
+  integrity sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==
+
+globby@^11.0.0, globby@^11.0.3, globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
@@ -3222,6 +4666,17 @@ globby@^11.0.0, globby@^11.0.3, globby@^11.0.4:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+globby@^13.1.2:
+  version "13.1.3"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-13.1.3.tgz#f62baf5720bcb2c1330c8d4ef222ee12318563ff"
+  integrity sha512-8krCNHXvlCgHDpegPzleMq07yMYTO2sXKASmZmquEYWEmCx6J5UTRbp5RwMJkTJGtcQ44YpiUYUiN0b9mzy8Bw==
+  dependencies:
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.11"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^4.0.0"
+
 globby@^9.2.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-9.2.0.tgz#fd029a706c703d29bdd170f4b6db3a3f7a7cb63d"
@@ -3236,6 +4691,18 @@ globby@^9.2.0:
     pify "^4.0.1"
     slash "^2.0.0"
 
+globrex@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
+  integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
+
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
 got@^9.6.0:
   version "9.6.0"
   resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85"
@@ -3253,7 +4720,7 @@ got@^9.6.0:
     to-readable-stream "^1.0.0"
     url-parse-lax "^3.0.0"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.5, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+graceful-fs@^4.1.2, graceful-fs@^4.1.5, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
   version "4.2.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
@@ -3273,6 +4740,11 @@ has-bigints@^1.0.1:
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
   integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
 
+has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -3283,6 +4755,18 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
+has-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
+  integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
+
 has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
@@ -3333,6 +4817,26 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hast-to-hyperscript@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-10.0.1.tgz#3decd7cb4654bca8883f6fcbd4fb3695628c4296"
+  integrity sha512-dhIVGoKCQVewFi+vz3Vt567E4ejMppS1haBRL6TEmeLeJVB1i/FJIIg/e6s1Bwn0g5qtYojHEKvyGA+OZuyifw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    comma-separated-tokens "^2.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+    style-to-object "^0.3.0"
+    unist-util-is "^5.0.0"
+    web-namespaces "^2.0.0"
+
+hast-util-embedded@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-embedded/-/hast-util-embedded-2.0.0.tgz#877f4261044854743fc2621f728930ca61c8376f"
+  integrity sha512-vEr54rDu2CheBM4nLkWbW8Rycf8HhkA/KsrDnlyKnvBTyhyO+vAG6twHnfUbiRGo56YeUBNCI4HFfHg3Wu+tig==
+  dependencies:
+    hast-util-is-element "^2.0.0"
+
 hast-util-from-parse5@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/hast-util-from-parse5/-/hast-util-from-parse5-7.1.0.tgz#c129dd3a24dd8a867ab8a029ca47e27aa54864b7"
@@ -3401,6 +4905,42 @@ hast-util-to-estree@^2.0.0:
     unist-util-position "^4.0.0"
     zwitch "^2.0.0"
 
+hast-util-to-html@^8.0.0, hast-util-to-html@^8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-8.0.3.tgz#4e37580872e143ea9ce0dba87918b19e4ea997e3"
+  integrity sha512-/D/E5ymdPYhHpPkuTHOUkSatxr4w1ZKrZsG0Zv/3C2SRVT0JFJG53VS45AMrBtYk0wp5A7ksEhiC8QaOZM95+A==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    ccount "^2.0.0"
+    comma-separated-tokens "^2.0.0"
+    hast-util-is-element "^2.0.0"
+    hast-util-whitespace "^2.0.0"
+    html-void-elements "^2.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+    stringify-entities "^4.0.2"
+    unist-util-is "^5.0.0"
+
+hast-util-to-mdast@^8.3.1:
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/hast-util-to-mdast/-/hast-util-to-mdast-8.3.1.tgz#b2e3b666968d3ab96a0e6ec991cca0ca5c79e3b2"
+  integrity sha512-nxLcom1oW5y/1CyaV24K16LOfYbAIS74BDbCPW6WduzAYTAVDp3g/DM1CY6Ngo+Dx5itLzvmCm7SnUHBZd3NVQ==
+  dependencies:
+    "@types/extend" "^3.0.0"
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    extend "^3.0.0"
+    hast-util-has-property "^2.0.0"
+    hast-util-is-element "^2.0.0"
+    hast-util-to-text "^3.0.0"
+    mdast-util-phrasing "^3.0.0"
+    mdast-util-to-string "^3.0.0"
+    rehype-minify-whitespace "^5.0.0"
+    trim-trailing-lines "^2.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit "^4.0.0"
+
 hast-util-to-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/hast-util-to-string/-/hast-util-to-string-2.0.0.tgz#b008b0a4ea472bf34dd390b7eea1018726ae152a"
@@ -3408,6 +4948,15 @@ hast-util-to-string@^2.0.0:
   dependencies:
     "@types/hast" "^2.0.0"
 
+hast-util-to-text@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/hast-util-to-text/-/hast-util-to-text-3.1.1.tgz#b7699a75f7a61af6e0befb67660cd78460d96dc6"
+  integrity sha512-7S3mOBxACy8syL45hCn3J7rHqYaXkxRfsX6LXEU5Shz4nt4GxdjtMUtG+T6G/ZLUHd7kslFAf14kAN71bz30xA==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    hast-util-is-element "^2.0.0"
+    unist-util-find-after "^4.0.0"
+
 hast-util-whitespace@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz#4fc1086467cc1ef5ba20673cb6b03cec3a970f1c"
@@ -3443,6 +4992,16 @@ html-encoding-sniffer@^2.0.1:
   dependencies:
     whatwg-encoding "^1.0.5"
 
+html-escaper@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
+  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
+
+html-void-elements@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-2.0.1.tgz#29459b8b05c200b6c5ee98743c41b979d577549f"
+  integrity sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==
+
 http-cache-semantics@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
@@ -3505,6 +5064,14 @@ import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
+import-local@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.1.0.tgz#b4479df8a5fd44f6cdce24070675676063c95cb4"
+  integrity sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -3547,6 +5114,15 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+internal-slot@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
+  integrity sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==
+  dependencies:
+    get-intrinsic "^1.2.0"
+    has "^1.0.3"
+    side-channel "^1.0.4"
+
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -3581,6 +5157,15 @@ is-alphanumerical@^2.0.0:
     is-alphabetical "^2.0.0"
     is-decimal "^2.0.0"
 
+is-array-buffer@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.1.tgz#deb1db4fcae48308d54ef2442706c0393997052a"
+  integrity sha512-ASfLknmY8Xa2XtB4wmbz13Wu202baeA18cJBCeCy0wXUHZF0IPyVEXqKEcd+t2fNSLLL1vC6k7lxZEojNbISXQ==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    is-typed-array "^1.1.10"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -3626,6 +5211,11 @@ is-buffer@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
   integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
 
+is-callable@^1.1.3, is-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
 is-callable@^1.1.4, is-callable@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
@@ -3638,7 +5228,14 @@ is-ci@^3.0.1:
   dependencies:
     ci-info "^3.2.0"
 
-is-core-module@^2.2.0, is-core-module@^2.7.0, is-core-module@^2.8.1:
+is-core-module@^2.10.0, is-core-module@^2.9.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
+  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
+  dependencies:
+    has "^1.0.3"
+
+is-core-module@^2.2.0, is-core-module@^2.8.1:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
   integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
@@ -3689,6 +5286,11 @@ is-descriptor@^1.0.0, is-descriptor@^1.0.2:
     is-data-descriptor "^1.0.0"
     kind-of "^6.0.2"
 
+is-docker@^2.0.0, is-docker@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
 is-empty@latest:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/is-empty/-/is-empty-1.2.0.tgz#de9bb5b278738a05a0b09a57e1fb4d4a341a9f6b"
@@ -3716,6 +5318,11 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-generator-fn@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
+  integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
+
 is-glob@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
@@ -3766,6 +5373,11 @@ is-number@^7.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
+is-path-inside@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
 is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
@@ -3836,6 +5448,17 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.2"
 
+is-typed-array@^1.1.10, is-typed-array@^1.1.9:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.10.tgz#36a5b5cb4189b575d1a3e4b08536bfb485801e3f"
+  integrity sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==
+  dependencies:
+    available-typed-arrays "^1.0.5"
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-tostringtag "^1.0.0"
+
 is-weakref@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
@@ -3853,6 +5476,13 @@ is-windows@^1.0.0, is-windows@^1.0.2:
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
   integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
 
+is-wsl@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
 isarray@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -3875,11 +5505,416 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
+  integrity sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==
+
+istanbul-lib-instrument@^5.0.4, istanbul-lib-instrument@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.0.tgz#31d18bdd127f825dd02ea7bfdfd906f8ab840e9f"
+  integrity sha512-6Lthe1hqXHBNsqvgDzGO6l03XNeu3CrG4RqQ1KM9+l5+jNGpEJfIELx1NS3SEHmJQA8np/u+E4EPRKRiu6m19A==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^6.3.0"
+
+istanbul-lib-report@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
+  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
+  dependencies:
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^3.0.0"
+    supports-color "^7.1.0"
+
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz#895f3a709fcfba34c6de5a42939022f3e4358551"
+  integrity sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
+
+istanbul-reports@^3.1.3:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.4.tgz#1b6f068ecbc6c331040aab5741991273e609e40c"
+  integrity sha512-r1/DshN4KSE7xWEknZLLLLDn5CJybV3nw01VTkp6D5jzLuELlcbudfj/eSQFvrKsJuTVCGnePO7ho82Nw9zzfw==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
+jest-changed-files@^28.0.2:
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-28.0.2.tgz#7d7810660a5bd043af9e9cfbe4d58adb05e91531"
+  integrity sha512-QX9u+5I2s54ZnGoMEjiM2WeBvJR2J7w/8ZUmH2um/WLAuGAYFQcsVXY9+1YL6k0H/AGUdH8pXUAv6erDqEsvIA==
+  dependencies:
+    execa "^5.0.0"
+    throat "^6.0.1"
+
+jest-circus@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-28.1.1.tgz#3d27da6a974d85a466dc0cdc6ddeb58daaa57bb4"
+  integrity sha512-75+BBVTsL4+p2w198DQpCeyh1RdaS2lhEG87HkaFX/UG0gJExVq2skG2pT7XZEGBubNj2CytcWSPan4QEPNosw==
+  dependencies:
+    "@jest/environment" "^28.1.1"
+    "@jest/expect" "^28.1.1"
+    "@jest/test-result" "^28.1.1"
+    "@jest/types" "^28.1.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^28.1.1"
+    jest-matcher-utils "^28.1.1"
+    jest-message-util "^28.1.1"
+    jest-runtime "^28.1.1"
+    jest-snapshot "^28.1.1"
+    jest-util "^28.1.1"
+    pretty-format "^28.1.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+    throat "^6.0.1"
+
+jest-cli@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-28.1.1.tgz#23ddfde8940e1818585ae4a568877b33b0e51cfe"
+  integrity sha512-+sUfVbJqb1OjBZ0OdBbI6OWfYM1i7bSfzYy6gze1F1w3OKWq8ZTEKkZ8a7ZQPq6G/G1qMh/uKqpdWhgl11NFQQ==
+  dependencies:
+    "@jest/core" "^28.1.1"
+    "@jest/test-result" "^28.1.1"
+    "@jest/types" "^28.1.1"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    import-local "^3.0.2"
+    jest-config "^28.1.1"
+    jest-util "^28.1.1"
+    jest-validate "^28.1.1"
+    prompts "^2.0.1"
+    yargs "^17.3.1"
+
+jest-config@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-28.1.1.tgz#e90b97b984f14a6c24a221859e81b258990fce2f"
+  integrity sha512-tASynMhS+jVV85zKvjfbJ8nUyJS/jUSYZ5KQxLUN2ZCvcQc/OmhQl2j6VEL3ezQkNofxn5pQ3SPYWPHb0unTZA==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/test-sequencer" "^28.1.1"
+    "@jest/types" "^28.1.1"
+    babel-jest "^28.1.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-circus "^28.1.1"
+    jest-environment-node "^28.1.1"
+    jest-get-type "^28.0.2"
+    jest-regex-util "^28.0.2"
+    jest-resolve "^28.1.1"
+    jest-runner "^28.1.1"
+    jest-util "^28.1.1"
+    jest-validate "^28.1.1"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^28.1.1"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
+jest-diff@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-28.1.1.tgz#1a3eedfd81ae79810931c63a1d0f201b9120106c"
+  integrity sha512-/MUUxeR2fHbqHoMMiffe/Afm+U8U4olFRJ0hiVG2lZatPJcnGxx292ustVu7bULhjV65IYMxRdploAKLbcrsyg==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^28.1.1"
+    jest-get-type "^28.0.2"
+    pretty-format "^28.1.1"
+
+jest-docblock@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-28.1.1.tgz#6f515c3bf841516d82ecd57a62eed9204c2f42a8"
+  integrity sha512-3wayBVNiOYx0cwAbl9rwm5kKFP8yHH3d/fkEaL02NPTkDojPtheGB7HZSFY4wzX+DxyrvhXz0KSCVksmCknCuA==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-each@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-28.1.1.tgz#ba5238dacf4f31d9fe23ddc2c44c01e7c23885c4"
+  integrity sha512-A042rqh17ZvEhRceDMi784ppoXR7MWGDEKTXEZXb4svt0eShMZvijGxzKsx+yIjeE8QYmHPrnHiTSQVhN4nqaw==
+  dependencies:
+    "@jest/types" "^28.1.1"
+    chalk "^4.0.0"
+    jest-get-type "^28.0.2"
+    jest-util "^28.1.1"
+    pretty-format "^28.1.1"
+
+jest-environment-node@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-28.1.1.tgz#1c86c59003a7d319fa06ea3b1bbda6c193715c67"
+  integrity sha512-2aV/eeY/WNgUUJrrkDJ3cFEigjC5fqT1+fCclrY6paqJ5zVPoM//sHmfgUUp7WLYxIdbPwMiVIzejpN56MxnNA==
+  dependencies:
+    "@jest/environment" "^28.1.1"
+    "@jest/fake-timers" "^28.1.1"
+    "@jest/types" "^28.1.1"
+    "@types/node" "*"
+    jest-mock "^28.1.1"
+    jest-util "^28.1.1"
+
+jest-get-type@^28.0.2:
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-28.0.2.tgz#34622e628e4fdcd793d46db8a242227901fcf203"
+  integrity sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA==
+
+jest-haste-map@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-28.1.1.tgz#471685f1acd365a9394745bb97c8fc16289adca3"
+  integrity sha512-ZrRSE2o3Ezh7sb1KmeLEZRZ4mgufbrMwolcFHNRSjKZhpLa8TdooXOOFlSwoUzlbVs1t0l7upVRW2K7RWGHzbQ==
+  dependencies:
+    "@jest/types" "^28.1.1"
+    "@types/graceful-fs" "^4.1.3"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^28.0.2"
+    jest-util "^28.1.1"
+    jest-worker "^28.1.1"
+    micromatch "^4.0.4"
+    walker "^1.0.8"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+jest-leak-detector@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-28.1.1.tgz#537f37afd610a4b3f4cab15e06baf60484548efb"
+  integrity sha512-4jvs8V8kLbAaotE+wFR7vfUGf603cwYtFf1/PYEsyX2BAjSzj8hQSVTP6OWzseTl0xL6dyHuKs2JAks7Pfubmw==
+  dependencies:
+    jest-get-type "^28.0.2"
+    pretty-format "^28.1.1"
+
+jest-matcher-utils@^28.0.0, jest-matcher-utils@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-28.1.1.tgz#a7c4653c2b782ec96796eb3088060720f1e29304"
+  integrity sha512-NPJPRWrbmR2nAJ+1nmnfcKKzSwgfaciCCrYZzVnNoxVoyusYWIjkBMNvu0RHJe7dNj4hH3uZOPZsQA+xAYWqsw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^28.1.1"
+    jest-get-type "^28.0.2"
+    pretty-format "^28.1.1"
+
+jest-message-util@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-28.1.1.tgz#60aa0b475cfc08c8a9363ed2fb9108514dd9ab89"
+  integrity sha512-xoDOOT66fLfmTRiqkoLIU7v42mal/SqwDKvfmfiWAdJMSJiU+ozgluO7KbvoAgiwIrrGZsV7viETjc8GNrA/IQ==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^28.1.1"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^28.1.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-mock@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-28.1.1.tgz#37903d269427fa1ef5b2447be874e1c62a39a371"
+  integrity sha512-bDCb0FjfsmKweAvE09dZT59IMkzgN0fYBH6t5S45NoJfd2DHkS3ySG2K+hucortryhO3fVuXdlxWcbtIuV/Skw==
+  dependencies:
+    "@jest/types" "^28.1.1"
+    "@types/node" "*"
+
+jest-pnp-resolver@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
+  integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
+
+jest-regex-util@^28.0.2:
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-28.0.2.tgz#afdc377a3b25fb6e80825adcf76c854e5bf47ead"
+  integrity sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw==
+
+jest-resolve-dependencies@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-28.1.1.tgz#3dffaaa56f4b41bc6b61053899d1756401763a27"
+  integrity sha512-p8Y150xYJth4EXhOuB8FzmS9r8IGLEioiaetgdNGb9VHka4fl0zqWlVe4v7mSkYOuEUg2uB61iE+zySDgrOmgQ==
+  dependencies:
+    jest-regex-util "^28.0.2"
+    jest-snapshot "^28.1.1"
+
+jest-resolve@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-28.1.1.tgz#bc2eaf384abdcc1aaf3ba7c50d1adf01e59095e5"
+  integrity sha512-/d1UbyUkf9nvsgdBildLe6LAD4DalgkgZcKd0nZ8XUGPyA/7fsnaQIlKVnDiuUXv/IeZhPEDrRJubVSulxrShA==
+  dependencies:
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^28.1.1"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^28.1.1"
+    jest-validate "^28.1.1"
+    resolve "^1.20.0"
+    resolve.exports "^1.1.0"
+    slash "^3.0.0"
+
+jest-runner@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-28.1.1.tgz#9ecdb3f27a00059986797aa6b012ba8306aa436c"
+  integrity sha512-W5oFUiDBgTsCloTAj6q95wEvYDB0pxIhY6bc5F26OucnwBN+K58xGTGbliSMI4ChQal5eANDF+xvELaYkJxTmA==
+  dependencies:
+    "@jest/console" "^28.1.1"
+    "@jest/environment" "^28.1.1"
+    "@jest/test-result" "^28.1.1"
+    "@jest/transform" "^28.1.1"
+    "@jest/types" "^28.1.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.10.2"
+    graceful-fs "^4.2.9"
+    jest-docblock "^28.1.1"
+    jest-environment-node "^28.1.1"
+    jest-haste-map "^28.1.1"
+    jest-leak-detector "^28.1.1"
+    jest-message-util "^28.1.1"
+    jest-resolve "^28.1.1"
+    jest-runtime "^28.1.1"
+    jest-util "^28.1.1"
+    jest-watcher "^28.1.1"
+    jest-worker "^28.1.1"
+    source-map-support "0.5.13"
+    throat "^6.0.1"
+
+jest-runtime@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-28.1.1.tgz#569e1dc3c36c6c4c0b29516c1c49b6ad580abdaf"
+  integrity sha512-J89qEJWW0leOsqyi0D9zHpFEYHwwafFdS9xgvhFHtIdRghbadodI0eA+DrthK/1PebBv3Px8mFSMGKrtaVnleg==
+  dependencies:
+    "@jest/environment" "^28.1.1"
+    "@jest/fake-timers" "^28.1.1"
+    "@jest/globals" "^28.1.1"
+    "@jest/source-map" "^28.0.2"
+    "@jest/test-result" "^28.1.1"
+    "@jest/transform" "^28.1.1"
+    "@jest/types" "^28.1.1"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    execa "^5.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^28.1.1"
+    jest-message-util "^28.1.1"
+    jest-mock "^28.1.1"
+    jest-regex-util "^28.0.2"
+    jest-resolve "^28.1.1"
+    jest-snapshot "^28.1.1"
+    jest-util "^28.1.1"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
+jest-snapshot@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-28.1.1.tgz#ab825c16c8d8b5e883bd57eee6ca8748c42ab848"
+  integrity sha512-1KjqHJ98adRcbIdMizjF5DipwZFbvxym/kFO4g4fVZCZRxH/dqV8TiBFCa6rqic3p0karsy8RWS1y4E07b7P0A==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.3.3"
+    "@jest/expect-utils" "^28.1.1"
+    "@jest/transform" "^28.1.1"
+    "@jest/types" "^28.1.1"
+    "@types/babel__traverse" "^7.0.6"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^28.1.1"
+    graceful-fs "^4.2.9"
+    jest-diff "^28.1.1"
+    jest-get-type "^28.0.2"
+    jest-haste-map "^28.1.1"
+    jest-matcher-utils "^28.1.1"
+    jest-message-util "^28.1.1"
+    jest-util "^28.1.1"
+    natural-compare "^1.4.0"
+    pretty-format "^28.1.1"
+    semver "^7.3.5"
+
+jest-util@^28.0.0, jest-util@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-28.1.1.tgz#ff39e436a1aca397c0ab998db5a51ae2b7080d05"
+  integrity sha512-FktOu7ca1DZSyhPAxgxB6hfh2+9zMoJ7aEQA759Z6p45NuO8mWcqujH+UdHlCm/V6JTWwDztM2ITCzU1ijJAfw==
+  dependencies:
+    "@jest/types" "^28.1.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
+jest-validate@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-28.1.1.tgz#59b7b339b3c85b5144bd0c06ad3600f503a4acc8"
+  integrity sha512-Kpf6gcClqFCIZ4ti5++XemYJWUPCFUW+N2gknn+KgnDf549iLul3cBuKVe1YcWRlaF8tZV8eJCap0eECOEE3Ug==
+  dependencies:
+    "@jest/types" "^28.1.1"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^28.0.2"
+    leven "^3.1.0"
+    pretty-format "^28.1.1"
+
+jest-watcher@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-28.1.1.tgz#533597fb3bfefd52b5cd115cd916cffd237fb60c"
+  integrity sha512-RQIpeZ8EIJMxbQrXpJQYIIlubBnB9imEHsxxE41f54ZwcqWLysL/A0ZcdMirf+XsMn3xfphVQVV4EW0/p7i7Ug==
+  dependencies:
+    "@jest/test-result" "^28.1.1"
+    "@jest/types" "^28.1.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.10.2"
+    jest-util "^28.1.1"
+    string-length "^4.0.1"
+
+jest-worker@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-28.1.1.tgz#3480c73247171dfd01eda77200f0063ab6a3bf28"
+  integrity sha512-Au7slXB08C6h+xbJPp7VIb6U0XX5Kc9uel/WFc6/rcTzGiaVCBRngBExSYuXSLFPULPSYU3cJ3ybS988lNFQhQ==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-28.1.1.tgz#3c39a3a09791e16e9ef283597d24ab19a0df701e"
+  integrity sha512-qw9YHBnjt6TCbIDMPMpJZqf9E12rh6869iZaN08/vpOGgHJSAaLLUn6H8W3IAEuy34Ls3rct064mZLETkxJ2XA==
+  dependencies:
+    "@jest/core" "^28.1.1"
+    "@jest/types" "^28.1.1"
+    import-local "^3.0.2"
+    jest-cli "^28.1.1"
+
 joycon@^3.0.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/joycon/-/joycon-3.1.1.tgz#bce8596d6ae808f8b68168f5fc69280996894f03"
   integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==
 
+js-sdsl@^4.1.4:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.1.5.tgz#1ff1645e6b4d1b028cd3f862db88c9d887f26e2a"
+  integrity sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -3933,6 +5968,11 @@ jsdom@^16.5.3:
     ws "^7.4.6"
     xml-name-validator "^3.0.0"
 
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
 json-buffer@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898"
@@ -3960,6 +6000,11 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+json5@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
+  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@@ -4006,11 +6051,21 @@ kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+kleur@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
+  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
+
 kleur@^4.0.3:
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.4.tgz#8c202987d7e577766d039a8cd461934c01cda04d"
   integrity sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==
 
+kleur@^4.1.4:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
+  integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
+
 language-subtag-registry@~0.3.2:
   version "0.3.21"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz#04ac218bea46f04cb039084602c6da9e788dd45a"
@@ -4023,6 +6078,11 @@ language-tags@^1.0.5:
   dependencies:
     language-subtag-registry "~0.3.2"
 
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
+  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -4091,11 +6151,21 @@ lodash-es@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
+lodash.memoize@4.x:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
+
 lodash.startcase@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.startcase/-/lodash.startcase-4.4.0.tgz#9436e34ed26093ed7ffae1936144350915d9add8"
@@ -4136,10 +6206,31 @@ lru-cache@^4.0.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
-lru-cache@^7.4.0:
-  version "7.8.1"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.8.1.tgz#68ee3f4807a57d2ba185b7fd90827d5c21ce82bb"
-  integrity sha512-E1v547OCgJvbvevfjgK9sNKIVXO96NnsTsFPBlg4ZxjhsJSODoH9lk8Bm0OxvHNm6Vm5Yqkl/1fErDxhYL8Skg==
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+make-dir@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
+make-error@1.x:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
+  integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
+
+makeerror@1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
+  integrity sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==
+  dependencies:
+    tmpl "1.0.5"
 
 map-cache@^0.2.2:
   version "0.2.2"
@@ -4191,7 +6282,7 @@ mdast-util-find-and-replace@^2.0.0:
     unist-util-is "^5.0.0"
     unist-util-visit-parents "^4.0.0"
 
-mdast-util-from-markdown@^1.0.0:
+mdast-util-from-markdown@^1.0.0, mdast-util-from-markdown@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-1.2.0.tgz#84df2924ccc6c995dec1e2368b2b208ad0a76268"
   integrity sha512-iZJyyvKD1+K7QX1b5jXdE7Sc5dtoTry1vzV28UZZe8Z1xVnB/czKntJ7ZAkG0tANqRnBF6p3p7GpU1y19DTf2Q==
@@ -4313,6 +6404,14 @@ mdast-util-mdxjs-esm@^1.0.0:
     mdast-util-from-markdown "^1.0.0"
     mdast-util-to-markdown "^1.0.0"
 
+mdast-util-phrasing@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-phrasing/-/mdast-util-phrasing-3.0.0.tgz#c44fcf6be61a3cb8da54ab2df22320e61d4537ce"
+  integrity sha512-S+QYsDRLkGi8U7o5JF1agKa/sdP+CNGXXLqC17pdTVL8FHHgQEiwFGa9yE5aYtUxNiFGYoaDy9V1kC85Sz86Gg==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    unist-util-is "^5.0.0"
+
 mdast-util-to-hast@^12.1.0:
   version "12.1.1"
   resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-12.1.1.tgz#89a2bb405eaf3b05eb8bf45157678f35eef5dbca"
@@ -4329,6 +6428,23 @@ mdast-util-to-hast@^12.1.0:
     unist-util-position "^4.0.0"
     unist-util-visit "^4.0.0"
 
+mdast-util-to-hast@^12.1.2:
+  version "12.1.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-12.1.2.tgz#5c793b04014746585254c7ce0bc2d117201a5d1d"
+  integrity sha512-Wn6Mcj04qU4qUXHnHpPATYMH2Jd8RlntdnloDfYLe1ErWRHo6+pvSl/DzHp6sCZ9cBSYlc8Sk8pbwb8xtUoQhQ==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    "@types/mdurl" "^1.0.0"
+    mdast-util-definitions "^5.0.0"
+    mdurl "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    trim-lines "^3.0.0"
+    unist-builder "^3.0.0"
+    unist-util-generated "^2.0.0"
+    unist-util-position "^4.0.0"
+    unist-util-visit "^4.0.0"
+
 mdast-util-to-markdown@^1.0.0, mdast-util-to-markdown@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-1.3.0.tgz#38b6cdc8dc417de642a469c4fc2abdf8c931bd1e"
@@ -4798,7 +6914,7 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-minimatch@^3.0.4, minimatch@^3.1.2:
+minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -4861,10 +6977,10 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nanoid@^3.1.30:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.2.tgz#c89622fafb4381cd221421c69ec58547a1eec557"
-  integrity sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
 nanomatch@^1.2.9:
   version "1.2.13"
@@ -4888,28 +7004,41 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-next@12.1.5:
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/next/-/next-12.1.5.tgz#7a07687579ddce61ee519493e1c178d83abac063"
-  integrity sha512-YGHDpyfgCfnT5GZObsKepmRnne7Kzp7nGrac07dikhutWQug7hHg85/+sPJ4ZW5Q2pDkb+n0FnmLkmd44htIJQ==
-  dependencies:
-    "@next/env" "12.1.5"
-    caniuse-lite "^1.0.30001283"
-    postcss "8.4.5"
-    styled-jsx "5.0.1"
+next@12.3.1:
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/next/-/next-12.3.1.tgz#127b825ad2207faf869b33393ec8c75fe61e50f1"
+  integrity sha512-l7bvmSeIwX5lp07WtIiP9u2ytZMv7jIeB8iacR28PuUEFG5j0HGAPnMqyG5kbZNBG2H7tRsrQ4HCjuMOPnANZw==
+  dependencies:
+    "@next/env" "12.3.1"
+    "@swc/helpers" "0.4.11"
+    caniuse-lite "^1.0.30001406"
+    postcss "8.4.14"
+    styled-jsx "5.0.7"
+    use-sync-external-store "1.2.0"
   optionalDependencies:
-    "@next/swc-android-arm-eabi" "12.1.5"
-    "@next/swc-android-arm64" "12.1.5"
-    "@next/swc-darwin-arm64" "12.1.5"
-    "@next/swc-darwin-x64" "12.1.5"
-    "@next/swc-linux-arm-gnueabihf" "12.1.5"
-    "@next/swc-linux-arm64-gnu" "12.1.5"
-    "@next/swc-linux-arm64-musl" "12.1.5"
-    "@next/swc-linux-x64-gnu" "12.1.5"
-    "@next/swc-linux-x64-musl" "12.1.5"
-    "@next/swc-win32-arm64-msvc" "12.1.5"
-    "@next/swc-win32-ia32-msvc" "12.1.5"
-    "@next/swc-win32-x64-msvc" "12.1.5"
+    "@next/swc-android-arm-eabi" "12.3.1"
+    "@next/swc-android-arm64" "12.3.1"
+    "@next/swc-darwin-arm64" "12.3.1"
+    "@next/swc-darwin-x64" "12.3.1"
+    "@next/swc-freebsd-x64" "12.3.1"
+    "@next/swc-linux-arm-gnueabihf" "12.3.1"
+    "@next/swc-linux-arm64-gnu" "12.3.1"
+    "@next/swc-linux-arm64-musl" "12.3.1"
+    "@next/swc-linux-x64-gnu" "12.3.1"
+    "@next/swc-linux-x64-musl" "12.3.1"
+    "@next/swc-win32-arm64-msvc" "12.3.1"
+    "@next/swc-win32-ia32-msvc" "12.3.1"
+    "@next/swc-win32-x64-msvc" "12.3.1"
+
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+  integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
+
+node-releases@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.5.tgz#280ed5bc3eba0d96ce44897d8aee478bfb3d9666"
+  integrity sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==
 
 normalize-package-data@^2.5.0:
   version "2.5.0"
@@ -4962,6 +7091,11 @@ object-inspect@^1.12.0, object-inspect@^1.9.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
   integrity sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==
 
+object-inspect@^1.12.2:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
+  integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
+
 object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -4984,6 +7118,16 @@ object.assign@^4.1.2:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
+object.assign@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
+  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
 object.entries@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.5.tgz#e1acdd17c4de2cd96d5a08487cfb9db84d881861"
@@ -4993,6 +7137,15 @@ object.entries@^1.1.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
+object.entries@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.6.tgz#9737d0e5b8291edd340a3e3264bb8a3b00d5fa23"
+  integrity sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
 object.fromentries@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.5.tgz#7b37b205109c21e741e605727fe8b0ad5fa08251"
@@ -5002,13 +7155,30 @@ object.fromentries@^2.0.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
-object.hasown@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.0.tgz#7232ed266f34d197d15cac5880232f7a4790afe5"
-  integrity sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==
+object.fromentries@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.6.tgz#cdb04da08c539cffa912dcd368b886e0904bfa73"
+  integrity sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==
   dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+object.hasown@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.1.tgz#ad1eecc60d03f49460600430d97f23882cf592a3"
+  integrity sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==
+  dependencies:
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+object.hasown@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.2.tgz#f919e21fad4eb38a57bc6345b3afd496515c3f92"
+  integrity sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==
+  dependencies:
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
 
 object.pick@^1.3.0:
   version "1.3.0"
@@ -5026,6 +7196,15 @@ object.values@^1.1.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
+object.values@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.6.tgz#4abbaa71eba47d63589d402856f908243eea9b1d"
+  integrity sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -5040,6 +7219,15 @@ onetime@^5.1.2:
   dependencies:
     mimic-fn "^2.1.0"
 
+open@^8.4.0:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
+  integrity sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==
+  dependencies:
+    define-lazy-prop "^2.0.0"
+    is-docker "^2.1.1"
+    is-wsl "^2.2.0"
+
 optionator@^0.8.1:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
@@ -5179,7 +7367,7 @@ parse-github-url@^1.0.2:
   resolved "https://registry.yarnpkg.com/parse-github-url/-/parse-github-url-1.0.2.tgz#242d3b65cbcdda14bb50439e3242acf6971db395"
   integrity sha512-kgBf6avCbO3Cn6+RnzRGLkUsv4ZVqv/VfAYkRsyBcgkshNvVBkRn1FEZcW0Jb+npXQWm2vHPnnOqFteZxRRGNw==
 
-parse-json@^5.0.0:
+parse-json@^5.0.0, parse-json@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
   integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
@@ -5266,7 +7454,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -5281,7 +7469,7 @@ pify@^4.0.1:
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
-pirates@^4.0.1:
+pirates@^4.0.1, pirates@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
   integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
@@ -5306,14 +7494,14 @@ postcss-load-config@^3.0.1:
     lilconfig "^2.0.5"
     yaml "^1.10.2"
 
-postcss@8.4.5:
-  version "8.4.5"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
-  integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==
+postcss@8.4.14:
+  version "8.4.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
   dependencies:
-    nanoid "^3.1.30"
+    nanoid "^3.3.4"
     picocolors "^1.0.0"
-    source-map-js "^1.0.1"
+    source-map-js "^1.0.2"
 
 preferred-pm@^3.0.0:
   version "3.0.3"
@@ -5340,21 +7528,34 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
-prettier@^1.19.1:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
-  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
+prettier@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
+  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
 
-prettier@^2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"
-  integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==
+pretty-format@^28.0.0, pretty-format@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-28.1.1.tgz#f731530394e0f7fcd95aba6b43c50e02d86b95cb"
+  integrity sha512-wwJbVTGFHeucr5Jw2bQ9P+VYHyLdAqedFLEkdQUVaBF/eiidDwH5OpilINq4mEfhbCjLnirt6HTTDhv1HaTIQw==
+  dependencies:
+    "@jest/schemas" "^28.0.2"
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
 
 prismjs@^1.23.0:
   version "1.28.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.28.0.tgz#0d8f561fa0f7cf6ebca901747828b149147044b6"
   integrity sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==
 
+prompts@^2.0.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
+  integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
 prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -5364,7 +7565,7 @@ prop-types@^15.7.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
-property-information@^6.0.0:
+property-information@^6.0.0, property-information@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.1.1.tgz#5ca85510a3019726cb9afed4197b7b8ac5926a22"
   integrity sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w==
@@ -5420,10 +7621,10 @@ react-dom@18.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.21.0"
 
-react-feather@^2.0.9:
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-2.0.9.tgz#6e42072130d2fa9a09d4476b0e61b0ed17814480"
-  integrity sha512-yMfCGRkZdXwIs23Zw/zIWCJO3m3tlaUvtHiXlW+3FH7cIT6fiK1iJ7RJWugXq7Fso8ZaQyUm92/GOOHXvkiVUw==
+react-feather@^2.0.10:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-2.0.10.tgz#0e9abf05a66754f7b7bb71757ac4da7fb6be3b68"
+  integrity sha512-BLhukwJ+Z92Nmdcs+EMw6dy1Z/VLiJTzEQACDUEnWMClhYnFykJCGWQx+NmwP/qQHGX/5CzQ+TGi8ofg2+HzVQ==
   dependencies:
     prop-types "^15.7.2"
 
@@ -5437,43 +7638,54 @@ react-is@^17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-remove-scroll-bar@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.2.0.tgz#d4d545a7df024f75d67e151499a6ab5ac97c8cdd"
-  integrity sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg==
-  dependencies:
-    react-style-singleton "^2.1.0"
-    tslib "^1.0.0"
-
-react-remove-scroll@^2.4.0:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.4.4.tgz#2dfff377cf17efc00de39dad51c143fc7a1b9e3e"
-  integrity sha512-EyC5ohYhaeKbThMSQxuN2i+QC5HqV3AJvNZKEdiATITexu0gHm00+5ko0ltNS1ajYJVeDgVG2baRSCei0AUWlQ==
-  dependencies:
-    react-remove-scroll-bar "^2.1.0"
-    react-style-singleton "^2.1.0"
-    tslib "^1.0.0"
-    use-callback-ref "^1.2.3"
-    use-sidecar "^1.0.1"
-
-react-style-singleton@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"
-  integrity sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
+react-remove-scroll-bar@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.3.tgz#e291f71b1bb30f5f67f023765b7435f4b2b2cd94"
+  integrity sha512-i9GMNWwpz8XpUpQ6QlevUtFjHGqnPG4Hxs+wlIJntu/xcsZVEpJcIV71K3ZkqNy2q3GfgvkD7y6t/Sv8ofYSbw==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
+react-remove-scroll@2.5.4, react-remove-scroll@^2.4.0:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz#afe6491acabde26f628f844b67647645488d2ea0"
+  integrity sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==
+  dependencies:
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
+react-remove-scroll@2.5.5:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
+  integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==
+  dependencies:
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
+react-style-singleton@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
+  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
   dependencies:
     get-nonce "^1.0.0"
     invariant "^2.2.4"
-    tslib "^1.0.0"
+    tslib "^2.0.0"
 
-react-use-gesture@^9.1.3:
-  version "9.1.3"
-  resolved "https://registry.yarnpkg.com/react-use-gesture/-/react-use-gesture-9.1.3.tgz#92bd143e4f58e69bd424514a5bfccba2a1d62ec0"
-  integrity sha512-CdqA2SmS/fj3kkS2W8ZU8wjTbVBAIwDWaRprX7OKaj7HlGwBasGEFggmk5qNklknqk9zK/h8D355bEJFTpqEMg==
-
-react@18.0.0:
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
-  integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
+react@18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
+  integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -5521,6 +7733,11 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
@@ -5542,6 +7759,15 @@ regexp.prototype.flags@^1.4.1:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
+regexp.prototype.flags@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
+  integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    functions-have-names "^1.2.2"
+
 regexpp@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
@@ -5574,6 +7800,18 @@ rehype-autolink-headings@^6.1.1:
     unified "^10.0.0"
     unist-util-visit "^4.0.0"
 
+rehype-minify-whitespace@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/rehype-minify-whitespace/-/rehype-minify-whitespace-5.0.1.tgz#79729a0146aa97a9d43e1eb4b5884974e2f37e77"
+  integrity sha512-PPp4lWJiBPlePI/dv1BeYktbwkfgXkrK59MUa+tYbMPgleod+4DvFK2PLU0O0O60/xuhHfiR9GUIUlXTU8sRIQ==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    hast-util-embedded "^2.0.0"
+    hast-util-is-element "^2.0.0"
+    hast-util-whitespace "^2.0.0"
+    unified "^10.0.0"
+    unist-util-is "^5.0.0"
+
 rehype-parse@^8.0.4:
   version "8.0.4"
   resolved "https://registry.yarnpkg.com/rehype-parse/-/rehype-parse-8.0.4.tgz#3d17c9ff16ddfef6bbcc8e6a25a99467b482d688"
@@ -5606,6 +7844,15 @@ rehype-slug@^5.0.1:
     unified "^10.0.0"
     unist-util-visit "^4.0.0"
 
+rehype-stringify@^9.0.3:
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/rehype-stringify/-/rehype-stringify-9.0.3.tgz#70e3bd6d4d29e7acf36b802deed350305d2c3c17"
+  integrity sha512-kWiZ1bgyWlgOxpqD5HnxShKAdXtb2IUljn3hQAhySeak6IOQPPt6DeGnsIh4ixm7yKJWzm8TXFuC/lPfcWHJqw==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    hast-util-to-html "^8.0.0"
+    unified "^10.0.0"
+
 relative-luminance@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/relative-luminance/-/relative-luminance-2.0.1.tgz#2babddf3a5a59673227d6f02e0f68e13989e3d13"
@@ -5631,7 +7878,7 @@ remark-mdx@^2.0.0:
     mdast-util-mdx "^2.0.0"
     micromark-extension-mdxjs "^1.0.0"
 
-remark-parse@^10.0.0:
+remark-parse@^10.0.0, remark-parse@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-10.0.1.tgz#6f60ae53edbf0cf38ea223fe643db64d112e0775"
   integrity sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==
@@ -5685,6 +7932,13 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -5700,7 +7954,12 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.17.0, resolve@^1.20.0:
+resolve.exports@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
+  integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
+
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.20.0, resolve@^1.22.0:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
@@ -5717,6 +7976,15 @@ resolve@^2.0.0-next.3:
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
+resolve@^2.0.0-next.4:
+  version "2.0.0-next.4"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
+  integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 responselike@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
@@ -5739,7 +8007,7 @@ rgb@^0.1.0:
   resolved "https://registry.yarnpkg.com/rgb/-/rgb-0.1.0.tgz#be27b291e8feffeac1bd99729721bfa40fc037b5"
   integrity sha1-vieykej+/+rBvZlylyG/pA/AN7U=
 
-rimraf@^3.0.2:
+rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
@@ -5751,10 +8019,10 @@ robust-predicates@^3.0.0:
   resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.1.tgz#ecde075044f7f30118682bd9fb3f123109577f9a"
   integrity sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==
 
-rollup@^2.60.0:
-  version "2.70.2"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.70.2.tgz#808d206a8851628a065097b7ba2053bd83ba0c0d"
-  integrity sha512-EitogNZnfku65I1DD5Mxe8JYRUCy0hkK5X84IlDtUs+O6JRMpRciXTzyCUuX11b5L5pvjH+OmFXiQ3XjabcXgg==
+rollup@^2.74.1:
+  version "2.77.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.77.0.tgz#749eaa5ac09b6baa52acc076bc46613eddfd53f4"
+  integrity sha512-vL8xjY4yOQEw79DvyXLijhnhh+R/O9zpF/LEgkCebZFtb6ELeN9H3/2T0r8+mp+fFTBHZ5qGpOpW2ela2zRt3g==
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -5777,6 +8045,15 @@ safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
+safe-regex-test@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
+  integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    is-regex "^1.1.4"
+
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@@ -5821,18 +8098,18 @@ sembear@^0.5.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-semver@^6.2.0, semver@^6.3.0:
+semver@7.x, semver@^7.3.5, semver@^7.3.7:
+  version "7.3.7"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
+  dependencies:
+    lru-cache "^6.0.0"
+
+semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.3.5:
-  version "7.3.6"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.6.tgz#5d73886fb9c0c6602e79440b97165c29581cbb2b"
-  integrity sha512-HZWqcgwLsjaX1HBD31msI/rXktuIhS+lWvdE4kN9z+8IVT4Itc7vqU2WvYsyD6/sjYCt4dEKH/m1M3dwI9CC5w==
-  dependencies:
-    lru-cache "^7.4.0"
-
 set-blocking@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@@ -5881,11 +8158,16 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
-signal-exit@^3.0.2, signal-exit@^3.0.3:
+signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
+sisteransi@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
+
 slash@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
@@ -5896,11 +8178,17 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-smartwrap@^1.2.3:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/smartwrap/-/smartwrap-1.2.5.tgz#45ee3e09ac234e5f7f17c16e916f511834f3cd23"
-  integrity sha512-bzWRwHwu0RnWjwU7dFy7tF68pDAx/zMSu3g7xr9Nx5J0iSImYInglwEVExyHLxXljy6PWMjkSAbwF7t2mPnRmg==
+slash@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
+  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
+
+smartwrap@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/smartwrap/-/smartwrap-2.0.2.tgz#7e25d3dd58b51c6ca4aba3a9e391650ea62698a4"
+  integrity sha512-vCsKNQxb7PnCNd2wY1WClWifAc2lwqsG8OaswpJkVJsvMGcnEntdTCDajZCkk93Ay1U3t/9puJmb525Rg5MZBA==
   dependencies:
+    array.prototype.flat "^1.2.3"
     breakword "^1.0.5"
     grapheme-splitter "^1.0.4"
     strip-ansi "^6.0.0"
@@ -5937,7 +8225,7 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-source-map-js@^1.0.1:
+source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -5953,26 +8241,41 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
+source-map-support@0.5.13:
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
+  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
 source-map-url@^0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
+source-map@0.8.0-beta.0:
+  version "0.8.0-beta.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
+  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
+  dependencies:
+    whatwg-url "^7.0.0"
+
 source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.7.0, source-map@^0.7.3:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
-  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
-
-source-map@~0.6.1:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-map@^0.7.0:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
 space-separated-tokens@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz#43193cec4fb858a2ce934b7f98b7f2c18107098b"
@@ -6024,6 +8327,13 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+stack-utils@^2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.5.tgz#d25265fca995154659dbbfba3b49254778d2fdd5"
+  integrity sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -6039,7 +8349,15 @@ stream-transform@^2.1.3:
   dependencies:
     mixme "^0.5.1"
 
-string-width@^4.1.0, string-width@^4.2.0:
+string-length@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
+  integrity sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==
+  dependencies:
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6048,7 +8366,7 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string.prototype.matchall@^4.0.6:
+string.prototype.matchall@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz#8e6ecb0d8a1fb1fda470d81acecb2dba057a481d"
   integrity sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==
@@ -6062,6 +8380,20 @@ string.prototype.matchall@^4.0.6:
     regexp.prototype.flags "^1.4.1"
     side-channel "^1.0.4"
 
+string.prototype.matchall@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz#3bf85722021816dcd1bf38bb714915887ca79fd3"
+  integrity sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    get-intrinsic "^1.1.3"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    regexp.prototype.flags "^1.4.3"
+    side-channel "^1.0.4"
+
 string.prototype.trimend@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
@@ -6070,6 +8402,24 @@ string.prototype.trimend@^1.0.4:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
+string.prototype.trimend@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz#914a65baaab25fbdd4ee291ca7dde57e869cb8d0"
+  integrity sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+string.prototype.trimend@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz#c4a27fa026d979d79c04f17397f250a462944533"
+  integrity sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
 string.prototype.trimstart@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
@@ -6078,6 +8428,24 @@ string.prototype.trimstart@^1.0.4:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
+string.prototype.trimstart@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz#5466d93ba58cfa2134839f81d7f42437e8c01fef"
+  integrity sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+string.prototype.trimstart@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz#e90ab66aa8e4007d92ef591bbf3cd422c56bdcf4"
+  integrity sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
 stringify-entities@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-4.0.2.tgz#13d113dc7449dc8ae4cb22c28883ee3fff8753e3"
@@ -6086,6 +8454,14 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
+stringify-entities@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-4.0.3.tgz#cfabd7039d22ad30f3cc435b0ca2c1574fc88ef8"
+  integrity sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==
+  dependencies:
+    character-entities-html4 "^2.0.0"
+    character-entities-legacy "^3.0.0"
+
 strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
@@ -6098,6 +8474,11 @@ strip-bom@^3.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
   integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
 
+strip-bom@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
+  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
+
 strip-final-newline@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
@@ -6127,10 +8508,10 @@ style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-jsx@5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.1.tgz#78fecbbad2bf95ce6cd981a08918ce4696f5fc80"
-  integrity sha512-+PIZ/6Uk40mphiQJJI1202b+/dYeTVd9ZnMPR80pgiWbjIwvN2zIp4r9et0BgqBuShh48I0gttPlAXA7WVvBxw==
+styled-jsx@5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.7.tgz#be44afc53771b983769ac654d355ca8d019dff48"
+  integrity sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA==
 
 styled-system@^5.1.5:
   version "5.1.5"
@@ -6175,13 +8556,28 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^7.1.0:
+supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
   dependencies:
     has-flag "^4.0.0"
 
+supports-color@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-hyperlinks@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.2.0.tgz#4f77b42488765891774b70c79babd87f9bd594bb"
+  integrity sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
@@ -6192,27 +8588,57 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+synckit@^0.8.4:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"
+  integrity sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==
+  dependencies:
+    "@pkgr/utils" "^2.3.1"
+    tslib "^2.5.0"
+
+tapable@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
 term-size@^2.1.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
   integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==
 
+terminal-link@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
+  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    supports-hyperlinks "^2.0.0"
+
+test-exclude@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
+  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
+  dependencies:
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^7.1.4"
+    minimatch "^3.0.4"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-theme-ui@^0.14.5:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/theme-ui/-/theme-ui-0.14.5.tgz#c056d0370cd2f50273bc9ac74eaa8bbbc489c19f"
-  integrity sha512-KrQ/5pFF/K/a+fortQg0w1VlTwhpu/b4u2pFZL1TMZLIHPwOsu/r4L3thJLkco7Gjj9lje8mIPx/L1I9Pqy3TQ==
+theme-ui@^0.14.7:
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/theme-ui/-/theme-ui-0.14.7.tgz#aea0ca2353be5f134590e70ae983e60b95033960"
+  integrity sha512-3CMyupASBnf3/b3We8VS3kSPUnk/jhXGzRCQCcHsNkA8nrxZ6pR2QABa768YRlc7EYBUlXCvyWnSmGQlX0Omog==
   dependencies:
-    "@theme-ui/color-modes" "0.14.5"
-    "@theme-ui/components" "0.14.5"
-    "@theme-ui/core" "0.14.5"
-    "@theme-ui/css" "0.14.5"
-    "@theme-ui/mdx" "0.14.5"
-    "@theme-ui/theme-provider" "0.14.5"
+    "@theme-ui/color-modes" "0.14.7"
+    "@theme-ui/components" "0.14.7"
+    "@theme-ui/core" "0.14.7"
+    "@theme-ui/css" "0.14.7"
+    "@theme-ui/mdx" "0.14.7"
+    "@theme-ui/theme-provider" "0.14.7"
 
 thenify-all@^1.0.0:
   version "1.6.0"
@@ -6228,6 +8654,19 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
+throat@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"
+  integrity sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==
+
+tiny-glob@^0.2.9:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/tiny-glob/-/tiny-glob-0.2.9.tgz#2212d441ac17928033b110f8b3640683129d31e2"
+  integrity sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==
+  dependencies:
+    globalyzer "0.1.0"
+    globrex "^0.1.2"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -6235,6 +8674,11 @@ tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
+tmpl@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
+  integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -6277,6 +8721,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 tough-cookie@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
@@ -6286,6 +8735,13 @@ tough-cookie@^4.0.0:
     punycode "^2.1.1"
     universalify "^0.1.2"
 
+tr46@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  integrity sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==
+  dependencies:
+    punycode "^2.1.0"
+
 tr46@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.1.0.tgz#fa87aa81ca5d5941da8cbf1f9b749dc969a4e240"
@@ -6298,11 +8754,21 @@ tree-kill@^1.2.2:
   resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
   integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
 
+trim-lines@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-3.0.1.tgz#d802e332a07df861c48802c04321017b1bd87338"
+  integrity sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==
+
 trim-newlines@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"
   integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
 
+trim-trailing-lines@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-2.0.0.tgz#1fdfbc20db6651bed117bc5c736f6cf052bcf421"
+  integrity sha512-lyJ/STqmYO8k9aWZbodPTrVkRh/50yFwNZ/HxKp/30eM9zf898MgQCG/NxfMnx7fZSKbaEcuZ1V+QgWrXFH6rg==
+
 trough@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/trough/-/trough-2.1.0.tgz#0f7b511a4fde65a46f18477ab38849b22c554876"
@@ -6313,7 +8779,21 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
-tsconfig-paths@^3.11.0, tsconfig-paths@^3.9.0:
+ts-jest@^28.0.5:
+  version "28.0.5"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-28.0.5.tgz#31776f768fba6dfc8c061d488840ed0c8eeac8b9"
+  integrity sha512-Sx9FyP9pCY7pUzQpy4FgRZf2bhHY3za576HMKJFs+OnQ9jS96Du5vNsDKkyedQkik+sEabbKAnCliv9BEsHZgQ==
+  dependencies:
+    bs-logger "0.x"
+    fast-json-stable-stringify "2.x"
+    jest-util "^28.0.0"
+    json5 "^2.2.1"
+    lodash.memoize "4.x"
+    make-error "1.x"
+    semver "7.x"
+    yargs-parser "^21.0.1"
+
+tsconfig-paths@^3.14.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
   integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
@@ -6323,33 +8803,38 @@ tsconfig-paths@^3.11.0, tsconfig-paths@^3.9.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.0.0, tslib@^1.8.1, tslib@^1.9.3:
+tslib@^1.0.0, tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.3.0:
+tslib@^2.0.0, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
-tsup@^5.12.6:
-  version "5.12.6"
-  resolved "https://registry.yarnpkg.com/tsup/-/tsup-5.12.6.tgz#29e057066bcc2cdd0238104e5a68e95d4f6f49a6"
-  integrity sha512-tpePOgdMRKRgazF+ujq9k1Fo44PUFUJJjRLtxq87pQrYW/Ub/fu1GpFGLzdUF9qjJ4FX1ykhf2d9mWCNy+jAtg==
+tslib@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
+  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+
+tsup@^6.2.3:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/tsup/-/tsup-6.2.3.tgz#87f57b2e53d49f1c1ab89aba21fed96aaab0ec9f"
+  integrity sha512-J5Pu2Dx0E1wlpIEsVFv9ryzP1pZ1OYsJ2cBHZ7GrKteytNdzaSz5hmLX7/nAxtypq+jVkVvA79d7S83ETgHQ5w==
   dependencies:
-    bundle-require "^3.0.2"
+    bundle-require "^3.1.0"
     cac "^6.7.12"
     chokidar "^3.5.1"
     debug "^4.3.1"
-    esbuild "^0.14.25"
+    esbuild "^0.15.1"
     execa "^5.0.0"
     globby "^11.0.3"
     joycon "^3.0.1"
     postcss-load-config "^3.0.1"
     resolve-from "^5.0.0"
-    rollup "^2.60.0"
-    source-map "^0.7.3"
+    rollup "^2.74.1"
+    source-map "0.8.0-beta.0"
     sucrase "^3.20.3"
     tree-kill "^1.2.2"
 
@@ -6360,101 +8845,108 @@ tsutils@^3.21.0:
   dependencies:
     tslib "^1.8.1"
 
-tty-table@^2.8.10:
-  version "2.8.13"
-  resolved "https://registry.yarnpkg.com/tty-table/-/tty-table-2.8.13.tgz#d484a416381973eaebbdf19c79136b390e5c6d70"
-  integrity sha512-eVV/+kB6fIIdx+iUImhXrO22gl7f6VmmYh0Zbu6C196fe1elcHXd7U6LcLXu0YoVPc2kNesWiukYcdK8ZmJ6aQ==
+tty-table@^4.1.5:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/tty-table/-/tty-table-4.1.6.tgz#6bd58338f36c94cce478c3337934d8a65ab40a73"
+  integrity sha512-kRj5CBzOrakV4VRRY5kUWbNYvo/FpOsz65DzI5op9P+cHov3+IqPbo1JE1ZnQGkHdZgNFDsrEjrfqqy/Ply9fw==
   dependencies:
-    chalk "^3.0.0"
-    csv "^5.3.1"
-    smartwrap "^1.2.3"
+    chalk "^4.1.2"
+    csv "^5.5.0"
+    kleur "^4.1.4"
+    smartwrap "^2.0.2"
     strip-ansi "^6.0.0"
     wcwidth "^1.0.1"
-    yargs "^15.1.0"
+    yargs "^17.1.1"
 
-turbo-darwin-64@1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.2.6.tgz#64e5a9b0b6600b4198a2914ea0623c0a73ce10c9"
-  integrity sha512-YNH49cZKw6rrq6ef/PMuryk3lKzE9QI0R72Yj3lcA4C5FIekUA7RZY8xZK7152r6YNgZ6aPWOQN9lauSN58gPQ==
+turbo-android-arm64@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/turbo-android-arm64/-/turbo-android-arm64-1.3.1.tgz#dae9bd087d6a17409fbd10ed82489a1ff39cbcc8"
+  integrity sha512-JcnZh9tLbZDpKaXaao/s/k4qXt3TbNEc1xEYYXurVWnqiMueGeS7QAtThVB85ZSqzj7djk+ngSrZabPy5RG25Q==
 
-turbo-darwin-arm64@1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.2.6.tgz#4a9dfe726c371dc8370e196ccabdee3ae753bef1"
-  integrity sha512-1yk0UK59qGQjFkhmSnrNrGMIVxTeMZSaJ9YhJquyQG7PPHxIpCnz4uQQkZFRb0HQDGMEmsPC49Sx4h6UBQ/3aA==
+turbo-darwin-64@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.3.1.tgz#efe64b9589f6a0f475b5123538b487d29e00d242"
+  integrity sha512-TIGDradVFoGck86VIuM38KaDeNxdKaP2ti93UpQeFw26ZhPIeTAa6wUgnz4DQP6bjIvQmXlYJ16ETZb4tFYygg==
 
-turbo-freebsd-64@1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/turbo-freebsd-64/-/turbo-freebsd-64-1.2.6.tgz#4a883575fdd0fdd37cf545a58f197ce8190b4692"
-  integrity sha512-m5G86zILy0Qc/fy/2Auu74c5St/yS+SQi8ka2Wb/uVMPQjh7VpM3mB/z7U5pZTv92w2HJ8q5krC0uLT+pH4n8Q==
+turbo-darwin-arm64@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.3.1.tgz#94a361e4e73ad02995303cf6c3d8cb03e85fcae4"
+  integrity sha512-aLBq8KiMMmop7uKBkvDt/y+eER2UzxZyUzh1KWcZ7DZB5tFZnknEUyf2qggY2vd2WcDVfQ1EUjZ0MFxhhVaVzA==
 
-turbo-freebsd-arm64@1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/turbo-freebsd-arm64/-/turbo-freebsd-arm64-1.2.6.tgz#d8457be803bd9c1b138657150f4ef2af739bdc47"
-  integrity sha512-tjbrRoN8fMuyfyKJ/Dw97cNy9CVlzoT8zZbpo1rVZkMRYpnizIDECdecoiMttBZIP9/ktNcj6nJVHh40+a0EMw==
+turbo-freebsd-64@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/turbo-freebsd-64/-/turbo-freebsd-64-1.3.1.tgz#64b8fc1b9f2ad9b76b532ffdcce267b2934ecb86"
+  integrity sha512-BOr/ifmxjlBeuDkDQLUJtzqzXQ2zPHHcI14U9Ys+z4Mza1uzQn/oSJqQvU5RuyRBVai7noMrpPS7QuKtDz0Cyg==
 
-turbo-linux-32@1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/turbo-linux-32/-/turbo-linux-32-1.2.6.tgz#4393c2ed9393326b3533e2201491384d108c0d1f"
-  integrity sha512-NBCeqsNbTQKuP+5rTwfd4dyd/LTdfUuX+4B6FxXswz6IuCHymUaCRwmRfN6TdeGRFnSP4y2tAymU5zqrI4/Leg==
+turbo-freebsd-arm64@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/turbo-freebsd-arm64/-/turbo-freebsd-arm64-1.3.1.tgz#b798af9b8898210058ca2752eadb711369f9ecea"
+  integrity sha512-bHPZjK4xnGLz6/oxl5XmWhdYOdtBMSadrGhptWSZ0wBGNn/gQzDTeZAkQeqhh25AD0eM1hzDe8QUz8GlS43lrA==
 
-turbo-linux-64@1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.2.6.tgz#4bffaba1e0593450fb808d1cbfd30480a8250129"
-  integrity sha512-27NGdEaAOkM/2Bj/QwSNI0b8VxWj9TrfqIE7ATENaMV4B+ukFgFvUkXQuJhnmb4InMxZSc8q01KaSou5P034Sw==
+turbo-linux-32@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/turbo-linux-32/-/turbo-linux-32-1.3.1.tgz#9eecada1c13f6391a7c6267349a0486987144093"
+  integrity sha512-c5okimusfvivu9wS8MKSr+rXpQAV+M4TyR9JX+spIK8B1I7AjfECAqiK2D5WFWO1bQ33bUAuxXOEpUuLpgEm+g==
 
-turbo-linux-arm64@1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.2.6.tgz#5c9f7bdf34f34f8b637f24b45c90fcd2ead7a946"
-  integrity sha512-zvk7vQ3N3QU2kKKJQ/qalAen3wkPhcoBD3NIlEwKVL2OYaSCa4UDgOSjpwLw+FAmbWh0zB5Jm8mcLXcok9xyUQ==
+turbo-linux-64@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.3.1.tgz#eaf195b90a80f238561ab11fbde17c07af481c57"
+  integrity sha512-O0pNX+N5gbmRcyZT+jsCPUNCN3DpIZHqNN35j7MT5nr0IkZa83CGbZnrEc+7Qws//jFJ26EngqD/JyRB2E8nwQ==
 
-turbo-linux-arm@1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/turbo-linux-arm/-/turbo-linux-arm-1.2.6.tgz#b050d530c0195f507f653c0b12cc6643d38c3d90"
-  integrity sha512-a0aw0kUfvUVLRV7K+5CjscJKDCLwLtb8p28KLHpjvy8EP7Us+n9DH0tZ2M/CAy02cZI7yOzbWEx0L4Q3a1Dajw==
+turbo-linux-arm64@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.3.1.tgz#ff9dc17c352c5f59440cb55cff59cb8b23db9d1b"
+  integrity sha512-D6+1MeS/x+/VCCooHPU4NIpB8qI/eW70eMRA79bqTPaxxluP0g2CaxXgucco05P51YtNsSxeVcH7X76iadON6Q==
 
-turbo-linux-mips64le@1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/turbo-linux-mips64le/-/turbo-linux-mips64le-1.2.6.tgz#d3f309d10297647b351d2d46c51039bf3f8593ff"
-  integrity sha512-5sLTNpXedD4aPCtKzbGOo3THImQVgywivFzbLgD5apkF5eYImG/1oRPH0tjdIN/uEqKFJdxniN5EnLE3uUA76g==
+turbo-linux-arm@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/turbo-linux-arm/-/turbo-linux-arm-1.3.1.tgz#6be53e62a60a3c6f3ab33585f0442eb7441ecf3a"
+  integrity sha512-f+r6JIwv/7ylxxJtgVi8cVw+6oNoD/r1IMTU6ejH8bfyMZZko4kkNwH9VYribQ44KDkJEgzdltnzFG5f6Hz10g==
 
-turbo-linux-ppc64le@1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/turbo-linux-ppc64le/-/turbo-linux-ppc64le-1.2.6.tgz#7264644c87dc46a0e72185eb101b6ea1b003afa5"
-  integrity sha512-dNIDtCXZolAdm84tCWynntcTbaOErCEbT0onuWwwhJ3CZfC68vqghkYJu7o4T8rMek0RLLcIh/Y4dNM3bp1Mvg==
+turbo-linux-mips64le@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/turbo-linux-mips64le/-/turbo-linux-mips64le-1.3.1.tgz#ceddf8c8e222e66d05f7a68a71f66a2a3a0272a3"
+  integrity sha512-yL64jgwVCziOpBcdpMxIsczkgwwOvmaqKObFKWyCNlk/LOl5NKODLwXEaryLaALtpwUAoS4ltMSI64gKqmLrOA==
 
-turbo-windows-32@1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/turbo-windows-32/-/turbo-windows-32-1.2.6.tgz#6a34b2476199097f2322a31287dc2de475b40121"
-  integrity sha512-1rzktj68Ohqi+OPeSvWqbb6Er0yS7FidRku8IQIZJ0bmwP/a5OMqIHXHoIEbn5/ceXry6vJm8aYDgm1FAKkbZw==
+turbo-linux-ppc64le@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/turbo-linux-ppc64le/-/turbo-linux-ppc64le-1.3.1.tgz#aa5658f6d19775e06b9fd136491dceab93ecffb2"
+  integrity sha512-tjnM+8RosykS1lBpOPLDXGOz/Po2h796ty17uBd7IFslWPOI16a/akFOFoLH8PCiGGJMe3CYgRhEKn4sPWNxFA==
 
-turbo-windows-64@1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.2.6.tgz#bc799919142310e268b7b0e27257ef83d404f4ba"
-  integrity sha512-91m+np5oxTRVORjkFVf2BypYjrhB+Q7ZaKqti5q4A0qLIvYs0dqGitT45j547XKWtlk2dP2ziXhYs2btDOCr4w==
+turbo-windows-32@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/turbo-windows-32/-/turbo-windows-32-1.3.1.tgz#e6e570bb381d9a4f78ea6e72102ab9bf493a3ad2"
+  integrity sha512-Snnv+TVigulqwK6guHKndMlrLw88NXj8BtHRGrEksPR0QkyuHlwLf+tHYB4HmvpUl4W9lnXQf4hsljWP64BEdw==
 
-turbo-windows-arm64@1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.2.6.tgz#5495fc0a08d725343246f468afaf61d012c1ba8f"
-  integrity sha512-92vhzWNu+ZrjMK1D6y1bjHTQjIVx0YViYCHDSQNY56STQgUleRW+aColVGs2MnZ4lv7vHhA9FIDJ19CRYpTiNA==
+turbo-windows-64@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.3.1.tgz#f891097331125c935cdaa160cc80c4cfc3e61b0e"
+  integrity sha512-gLeohHG07yIhON1Pp0YNE00i/yzip2GFhkA6HdJaK95uE5bKULpqxuO414hOS/WzGwrGVXBKCImfe24XXh5T+Q==
 
-turbo@^1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.2.6.tgz#36f2e776903f7935593d22c5d7600f46073994c1"
-  integrity sha512-7zh48qI2dTb1ktVhTyVLvleRWYVIDNlYnZt9rb8nA/evwZJC5x7ETK4a86f0f4WBAzp3A/TRbE8HNF4cGSkWvw==
+turbo-windows-arm64@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.3.1.tgz#5abe1743b93e272641018cef213b21ac6c984f04"
+  integrity sha512-0MWcHLvYgs/qdcoTFZ55nu8HhrpeiwXEMw9cbNfgqTlzy3OsrAsovYEJFyQ8KSxeploiD+QJlCdvhxx+5C0tlA==
+
+turbo@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.3.1.tgz#8091f3c8b654addaac84f9452476204a879b32ea"
+  integrity sha512-DXckoGKlZgvTn/PrHpBI/57aeXR7tfyPf2dK+4LmBczt24ELA3o6eYHeA7KzfpSYhB2LE9qveYFQ6mJ1OzGjjg==
   optionalDependencies:
-    turbo-darwin-64 "1.2.6"
-    turbo-darwin-arm64 "1.2.6"
-    turbo-freebsd-64 "1.2.6"
-    turbo-freebsd-arm64 "1.2.6"
-    turbo-linux-32 "1.2.6"
-    turbo-linux-64 "1.2.6"
-    turbo-linux-arm "1.2.6"
-    turbo-linux-arm64 "1.2.6"
-    turbo-linux-mips64le "1.2.6"
-    turbo-linux-ppc64le "1.2.6"
-    turbo-windows-32 "1.2.6"
-    turbo-windows-64 "1.2.6"
-    turbo-windows-arm64 "1.2.6"
+    turbo-android-arm64 "1.3.1"
+    turbo-darwin-64 "1.3.1"
+    turbo-darwin-arm64 "1.3.1"
+    turbo-freebsd-64 "1.3.1"
+    turbo-freebsd-arm64 "1.3.1"
+    turbo-linux-32 "1.3.1"
+    turbo-linux-64 "1.3.1"
+    turbo-linux-arm "1.3.1"
+    turbo-linux-arm64 "1.3.1"
+    turbo-linux-mips64le "1.3.1"
+    turbo-linux-ppc64le "1.3.1"
+    turbo-windows-32 "1.3.1"
+    turbo-windows-64 "1.3.1"
+    turbo-windows-arm64 "1.3.1"
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
@@ -6470,6 +8962,11 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
+type-detect@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
 type-fest@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934"
@@ -6480,6 +8977,11 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
 type-fest@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
@@ -6490,6 +8992,15 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
+typed-array-length@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb"
+  integrity sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==
+  dependencies:
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    is-typed-array "^1.1.9"
+
 typescript@^4.6.4:
   version "4.6.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.4.tgz#caa78bbc3a59e6a5c510d35703f6a09877ce45e9"
@@ -6505,6 +9016,16 @@ unbox-primitive@^1.0.1:
     has-symbols "^1.0.2"
     which-boxed-primitive "^1.0.2"
 
+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+  dependencies:
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
+    which-boxed-primitive "^1.0.2"
+
 unified@^10.0.0, unified@^10.1.2:
   version "10.1.2"
   resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"
@@ -6535,6 +9056,14 @@ unist-builder@^3.0.0:
   dependencies:
     "@types/unist" "^2.0.0"
 
+unist-util-find-after@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-find-after/-/unist-util-find-after-4.0.0.tgz#1101cebf5fed88ae3c6f3fa676e86fd5772a4f32"
+  integrity sha512-gfpsxKQde7atVF30n5Gff2fQhAc4/HTOV4CvkXpTg9wRfQhZWdXitpyXHWB6YcYgnsxLx+4gGHeVjCTAAp9sjw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+
 unist-util-generated@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-2.0.0.tgz#86fafb77eb6ce9bfa6b663c3f5ad4f8e56a60113"
@@ -6638,6 +9167,14 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
+update-browserslist-db@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.4.tgz#dbfc5a789caa26b1db8990796c2c8ebbce304824"
+  integrity sha512-jnmO2BEGUjsMOe/Fg9u0oczOe/ppIDZPebzccl1yDWGLFP16Pa1/RM5wEoKYPG2zstNcDuAStejyxsOuKINdGA==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -6657,18 +9194,30 @@ url-parse-lax@^3.0.0:
   dependencies:
     prepend-http "^2.0.0"
 
-use-callback-ref@^1.2.3:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
-  integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==
+use-callback-ref@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
+  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
+  dependencies:
+    tslib "^2.0.0"
 
-use-sidecar@^1.0.1:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.5.tgz#ffff2a17c1df42e348624b699ba6e5c220527f2b"
-  integrity sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==
+use-isomorphic-layout-effect@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
+use-sidecar@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
+  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
   dependencies:
     detect-node-es "^1.1.0"
-    tslib "^1.9.3"
+    tslib "^2.0.0"
+
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
 use@^3.1.0:
   version "3.1.1"
@@ -6690,10 +9239,14 @@ uvu@^0.5.0:
     kleur "^4.0.3"
     sade "^1.7.3"
 
-v8-compile-cache@^2.0.3:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
-  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+v8-to-istanbul@^9.0.0:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.0.1.tgz#b6f994b0b5d4ef255e17a0d17dc444a9f5132fa4"
+  integrity sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.12"
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
 
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
@@ -6750,6 +9303,13 @@ w3c-xmlserializer@^2.0.0:
   dependencies:
     xml-name-validator "^3.0.0"
 
+walker@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"
+  integrity sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==
+  dependencies:
+    makeerror "1.0.12"
+
 wcag-contrast@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/wcag-contrast/-/wcag-contrast-3.0.0.tgz#51c2df43f15162993006454b3362844205889efb"
@@ -6769,6 +9329,11 @@ web-namespaces@^2.0.0:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-2.0.1.tgz#1010ff7c650eccb2592cebeeaf9a1b253fd40692"
   integrity sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==
 
+webidl-conversions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
+  integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
+
 webidl-conversions@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
@@ -6791,6 +9356,15 @@ whatwg-mimetype@^2.3.0:
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
   integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
 
+whatwg-url@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
+  integrity sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
 whatwg-url@^8.0.0, whatwg-url@^8.5.0:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.7.0.tgz#656a78e510ff8f3937bc0bcbe9f5c0ac35941b77"
@@ -6824,6 +9398,18 @@ which-pm@2.0.0:
     load-yaml-file "^0.2.0"
     path-exists "^4.0.0"
 
+which-typed-array@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6"
+  integrity sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==
+  dependencies:
+    available-typed-arrays "^1.0.5"
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-tostringtag "^1.0.0"
+    is-typed-array "^1.1.10"
+
 which@^1.2.9:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
@@ -6852,11 +9438,28 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
+write-file-atomic@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.1.tgz#9faa33a964c1c85ff6f849b80b42a88c2c537c8f"
+  integrity sha512-nSKUxgAbyioruk6hU87QzVbY279oYT6uiwgDoujth2ju4mJ+TZau7SQBhtbTmUyuNYTuXnSyRn66FV0+eCgcrQ==
+  dependencies:
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.7"
+
 ws@^7.4.6:
   version "7.5.7"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.7.tgz#9e0ac77ee50af70d58326ecff7e85eb3fa375e67"
@@ -6877,11 +9480,21 @@ y18n@^4.0.0:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
   integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
 
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
 yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
   integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
 yaml@^1.10.2, yaml@^1.7.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
@@ -6895,6 +9508,11 @@ yargs-parser@^18.1.2, yargs-parser@^18.1.3:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^21.0.0, yargs-parser@^21.0.1:
+  version "21.0.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.0.1.tgz#0267f286c877a4f0f728fceb6f8a3e4cb95c6e35"
+  integrity sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==
+
 yargs@^15.1.0:
   version "15.4.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
@@ -6912,6 +9530,19 @@ yargs@^15.1.0:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
+yargs@^17.1.1, yargs@^17.3.1:
+  version "17.5.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.5.1.tgz#e109900cab6fcb7fd44b1d8249166feb0b36e58e"
+  integrity sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.0.0"
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"