', - }, - children: [{ type: 'text', value: 'Item 1' }], - }, - { - tagName: 'li', - children: [{ type: 'text', value: 'Item 2' }], - }, - { - tagName: 'li', - children: [{ type: 'text', value: 'Item 3' }], - }, - { - tagName: 'li', - children: [{ type: 'text', value: 'Item 4' }], - }, - { - tagName: 'li', - children: [{ type: 'text', value: 'Item 5' }], - }, - ], - }, - { - tagName: 'dl', - attributes: { - title: 'Definition List:
', - }, - children: [ - { - attributes: { - title: 'Definition term:
', - }, - tagName: 'dt', - style: { - color: 'inherit', - backgroundColor: 'inherit', - fontSize: { value: 1, unit: 'rem' }, - fontWeight: '400', - }, - children: [{ type: 'text', value: 'Generated designs' }], - }, - { - tagName: 'dd', - attributes: { - title: 'Definition description:
', - }, - style: { - color: 'inherit', - backgroundColor: 'inherit', - fontSize: { value: 2, unit: 'rem' }, - fontWeight: '600', - marginLeft: { value: 0, unit: 'px' }, - }, - children: [{ type: 'text', value: '3.4 Million' }], - }, - ], - }, - { - tagName: 'blockquote', - style: { - borderLeftWidth: { value: 4, unit: 'px' }, - borderLeftColor: { type: 'theme', path: 'primary' }, - borderLeftStyle: 'solid', - marginLeft: { value: 0, unit: 'px' }, - paddingLeft: { value: 32, unit: 'px' }, - }, - attributes: { - title: 'Blockquote:
', - }, - children: [ - { - type: 'text', - value: - '"The aim of every typographic work - the delivery of a message in the shortest, most efficient manner." - Jan Tschichold', - }, - ], - }, - { - tagName: 'abbr', - attributes: { - title: 'Abbreviation: ', - }, - children: [{ type: 'text', value: 'Abbr' }], - }, - { - tagName: 'cite', - attributes: { - title: 'Cited text: cite', - }, - children: [{ type: 'text', value: 'Cite element' }], - }, - { - tagName: 'mark', - attributes: { - title: 'Marked text: ', - }, - style: { - color: 'inherit', - backgroundColor: '#6465ff', - fontStyle: 'normal', - fontWeight: 'inherit', - }, - children: [{ type: 'text', value: 'This text is marked' }], - }, - { - tagName: 'table', - style: { - gridColumn: 'span 3', - }, - children: [ - { - tagName: 'thead', - children: [ - { - tagName: 'tr', - children: [ - { - tagName: 'th', - style: { - textAlign: 'left', - }, - children: [{ type: 'text', value: 'Name' }], - }, - { - tagName: 'th', - style: { - textAlign: 'left', - }, - children: [{ type: 'text', value: 'Email' }], - }, - { - tagName: 'th', - style: { - textAlign: 'left', - }, - children: [{ type: 'text', value: 'Favorite typeface' }], - }, - ], - }, - ], - }, - { - tagName: 'tfoot', - children: [], - }, - { - tagName: 'tbody', - children: [ - { - tagName: 'tr', - children: [ - { - tagName: 'td', - style: { - textAlign: 'left', - }, - children: [{ type: 'text', value: 'Tanner' }], - }, - { - tagName: 'td', - style: { - textAlign: 'left', - }, - children: [{ type: 'text', value: 'tanner@example.com' }], - }, - { - tagName: 'td', - style: { - textAlign: 'left', - }, - children: [{ type: 'text', value: 'Garamond' }], - }, - ], - }, - { - tagName: 'tr', - children: [ - { - tagName: 'td', - style: { - textAlign: 'left', - }, - children: [{ type: 'text', value: 'Finley' }], - }, - { - tagName: 'td', - style: { - textAlign: 'left', - }, - children: [{ type: 'text', value: 'finley@example.com' }], - }, - { - tagName: 'td', - style: { - textAlign: 'left', - }, - children: [{ type: 'text', value: 'Space Mono' }], - }, - ], - }, - { - tagName: 'tr', - children: [ - { - tagName: 'td', - style: { - textAlign: 'left', - }, - children: [{ type: 'text', value: 'Payton' }], - }, - { - tagName: 'td', - style: { - textAlign: 'left', - }, - children: [{ type: 'text', value: 'payton@example.com' }], - }, - { - tagName: 'td', - style: { - textAlign: 'left', - }, - children: [{ type: 'text', value: 'Bodini' }], - }, - ], - }, - ], - }, - ], - }, - ], - }, - { - tagName: 'section', - children: [{}], - }, - ], -} +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/library/card.tsx b/apps/docs/pages/library/card.tsx index d543bb8d..0b29287f 100644 --- a/apps/docs/pages/library/card.tsx +++ b/apps/docs/pages/library/card.tsx @@ -41,7 +41,7 @@ const initialValue: any = { display: 'block', }, attributes: { - src: 'https://source.unsplash.com/random', + src: 'https://dlu344star2bj.cloudfront.net/i/3090-0015.jpg', }, children: [], }, @@ -163,8 +163,8 @@ export default function HtmlEditorExample() { return (
- - + +

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 13e5e6d4..f8db14b5 100644 --- a/packages/config/package.json +++ b/packages/config/package.json @@ -8,7 +8,7 @@ "eslint-preset.js" ], "dependencies": { - "eslint-config-next": "^12.1.6", + "eslint-config-next": "^13.2.3", "eslint-config-prettier": "^8.5.0", "eslint-plugin-react": "7.30.0" } diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index f655bb18..ed89bf96 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,736 @@ # @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 diff --git a/packages/gui/package.json b/packages/gui/package.json index e27614b9..97ae23a3 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.127", + "version": "0.0.247", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", @@ -45,16 +45,17 @@ "@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": "^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-popover": "^1.0.0", "@radix-ui/react-select": "^0.1.1", - "@radix-ui/react-slider": "^0.1.4", - "@radix-ui/react-switch": "^0.1.5", + "@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", - "copy-to-clipboard": "^3.3.1", + "@use-gesture/react": "^10.2.17", + "copy-to-clipboard": "^3.3.2", "csstype": "^3.0.11", "culori": "^2.0.3", "downshift": "^6.1.7", @@ -62,15 +63,20 @@ "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", + "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", - "react-use-gesture": "^9.1.3", "rehype-parse": "^8.0.4", "rehype-sanitize": "^5.0.1", "rehype-stringify": "^9.0.3", - "theme-ui": "^0.14.5", + "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 index b3430cd8..97878923 100644 --- a/packages/gui/src/components/AddFieldset.tsx +++ b/packages/gui/src/components/AddFieldset.tsx @@ -1,5 +1,5 @@ -import { useCombobox } from 'downshift' -import { useEffect, useId, useRef, useState } from 'react' +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' @@ -19,19 +19,18 @@ export const AddFieldsetControl = ({ label = 'Add pseudo element or class', }: Props) => { const { setField } = useEditor() - const allItems = [...pseudoClasses, ...pseudoElements] + const allItems = [...pseudoClasses, ...pseudoElements, ...elements] const handleFilterItems = (input: string) => { - const styleItems = Object.keys(styles) - const filteredItems = allItems - .filter((item) => { - if (item.toLowerCase().startsWith(input.toLowerCase() || '')) { - return !styleItems.includes(item) - } - }) - .sort() + if (input === '') { + return allItems + } - return filteredItems + 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) => { @@ -40,13 +39,15 @@ export const AddFieldsetControl = ({ } return ( -
+
{label}
- {label} - kebabCase(str)} - clearOnSelect - /> + + {label} + kebabCase(str)} + clearOnSelect + /> +
) } diff --git a/packages/gui/src/components/Editor/Controls.tsx b/packages/gui/src/components/Editor/Controls.tsx index 262b0215..e23c66b1 100644 --- a/packages/gui/src/components/Editor/Controls.tsx +++ b/packages/gui/src/components/Editor/Controls.tsx @@ -6,8 +6,9 @@ import { isValidElement, ReactNode, useMemo, + useState, } from 'react' -import { camelCase, mapValues, uniq } from 'lodash-es' +import { camelCase, isNil, mapValues, uniq } from 'lodash-es' import { RefreshCw } from 'react-feather' import { Styles } from '../../types/css' import { Theme } from '../../types/theme' @@ -36,6 +37,15 @@ 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)) { @@ -50,7 +60,7 @@ 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) @@ -83,6 +93,10 @@ const Control = ({ field, showRemove = false, ...props }: ControlProps) => { const schema = properties[property] + if (schema.type === 'none') { + return null + } + return ( { setField(fullField, newValue) }} onRemove={showRemove ? handleRemoveProperty : undefined} + ruleset={getParentField(fullField)} + property={property} /> ) } @@ -190,7 +206,12 @@ export const Editor = ({ function regenerateAll(): any { return mapValues(allStyles, (value, property) => { return ( - properties[property].regenerate?.({ previousValue: value }) ?? value + properties[property].regenerate?.({ + theme, + previousValue: value, + ruleset: allStyles, + property, + }) ?? value ) }) } @@ -203,12 +224,12 @@ export const Editor = ({ hideResponsiveControls={hideResponsiveControls} > {showRegenerate && ( -
+
onChange(regenerateAll())} - sx={{ ml: 'auto', display: 'flex', gap: 2 }} + sx={{ ml: 'auto' }} > - Regenerate +
)} @@ -234,6 +255,7 @@ export const EditorControls = ({ ) : ( ) + const fieldsetControls = children ? null : ( ) @@ -293,7 +315,7 @@ const ControlSet = ({ field, properties }: ControlSetProps) => { const fullField = field ? joinPath(field, property) : property return isFieldsetGroup(property) ? ( - + ) : ( ) @@ -303,13 +325,16 @@ const ControlSet = ({ field, properties }: ControlSetProps) => { } type FieldsetControlProps = { - field?: KeyArg - property: string + field: string } -const FieldsetControl = ({ field, property }: FieldsetControlProps) => { - const { getField, removeField } = 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 (
{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', + mt: 3, mb: 2, }} >
- {removeInternalCSSClassSyntax(property)} + {rawFieldsetName} + {isSelectorFunction(rawFieldsetName) ? ( + <> + {'('} + { + setArgument(e.target.value) + }} + onBlur={() => { + setFields( + { + [stringifySelectorFunction(rawFieldsetName, argument)]: + styles, + }, + [field] + ) + }} + /> + {')'} + + ) : null}
- removeField(field || property)} /> + removeField(field)} />
- -
+ +

- +

) @@ -389,3 +450,18 @@ function getPropertiesFromChildren(children: ReactNode): string[] { }) 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 + }) +} 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 e02b849a..af51b475 100644 --- a/packages/gui/src/components/Editor/util.ts +++ b/packages/gui/src/components/Editor/util.ts @@ -30,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', diff --git a/packages/gui/src/components/FieldArray.tsx b/packages/gui/src/components/FieldArray.tsx index d899761d..14e3cbda 100644 --- a/packages/gui/src/components/FieldArray.tsx +++ b/packages/gui/src/components/FieldArray.tsx @@ -1,70 +1,89 @@ -import { flip, replace, remove } from '../lib/array' +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 extends EditorPropsWithLabel { +export interface FieldArrayProps extends EditorPropsWithLabel { /** * The component to render each of the individual input values. * (See `LayerProps` for what props this takes) */ itemSchema: DataTypeSchema + addItem?(currentValue: T[]): T } /** * An alternative field array that is collapsible. */ -export default function FieldArray(props: FieldArrayProps) { +export default function FieldArray({ + addItem, + ...props +}: FieldArrayProps) { const { label = '', value = [], onChange, itemSchema } = props + const [dragIndex, setDragIndex] = useState(-1) + const isDragging = dragIndex >= 0 - const handleReorder = (i1: number, i2: number) => { - if (typeof value === 'string') { - return - } - 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 ( -

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

- { - onChange(replace(value, i, newValue)) +

+ {isDragging && ( + { + handleDragDrop(dragIndex, i) + setDragIndex(-1) + }} + /> + )} +

onChange(remove(value, i))} - reorder={{ - onMoveUp: - i === 0 - ? undefined - : () => { - handleReorder(i, i - 1) - }, - onMoveDown: - i === value.length - 1 - ? undefined - : () => { - handleReorder(i, i + 1) - }, - }} - /> + > + { + onChange(replace(value, i, newValue)) + }} + onRemove={() => onChange(remove(value, i))} + onDrag={() => { + setDragIndex(i) + }} + onDragEnd={() => { + setDragIndex(-1) + }} + /> +

) })} + {isDragging && ( + { + handleDragDrop(dragIndex, value.length) + setDragIndex(-1) + }} + /> + )}

) } + +interface DropZoneProps { + onDrop(): void +} + +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 672c34d2..28d6850d 100644 --- a/packages/gui/src/components/Layers.tsx +++ b/packages/gui/src/components/Layers.tsx @@ -54,7 +54,7 @@ export default function Layers(props: LayersProps) { sx={{ border: '1px solid', borderColor: 'border', - borderRadius: 8, + borderRadius: '6px', }} > (props: LayersProps) { appearance: 'none', px: 0, py: 2, - m: 0, + mt: 2, border: 'none', background: 'none', cursor: 'pointer', diff --git a/packages/gui/src/components/html/AttributeEditor.tsx b/packages/gui/src/components/html/AttributeEditor.tsx deleted file mode 100644 index c2bb08d9..00000000 --- a/packages/gui/src/components/html/AttributeEditor.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { X } from 'react-feather' -import { Label } from '../primitives' -import IconButton from '../ui/IconButton' -import { useEffect } from 'react' -import { Combobox } from '../primitives' -import { ATTRIBUTE_MAP } from '../../data/attributes' - -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) - } - - return ( -

- Add attribute - -

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

- - {key} -

- - onChange({ ...value, [key]: e.target.value }) - } - /> - handleItemRemoved(key)}> - - -

- -

- ) - })} -

- ) -} 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} +

+ + + + 🎨 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
index 5a64a76a..974859a8 100644
--- a/packages/gui/src/components/html/Export.tsx
+++ b/packages/gui/src/components/html/Export.tsx
@@ -26,8 +26,9 @@ const CODEGEN_DISPLAY_NAMES: Record<string, string> = {
 
 type ExportProps = {
   value: HtmlNode
+  theme?: any
 }
-export const Export = ({ value }: ExportProps) => {
+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)
@@ -44,7 +45,7 @@ export const Export = ({ value }: ExportProps) => {
       gen = codegen.html
     }
 
-    gen(value).then((v: string) => {
+    gen(value, { theme }).then((v: string) => {
       setLoading(false)
 
       if (format === 'css') {
diff --git a/packages/gui/src/components/html/FontTags.tsx b/packages/gui/src/components/html/FontTags.tsx
index dd44fb53..b2a7f0c7 100644
--- a/packages/gui/src/components/html/FontTags.tsx
+++ b/packages/gui/src/components/html/FontTags.tsx
@@ -1,12 +1,14 @@
 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 { HtmlNode } from './types'
+import { useTheme } from '../providers/ThemeContext'
 
-export function getStyleFonts(style: any): string[] {
+export function getStyleFonts(style: any, theme?: Theme): string[] {
   if (!style) return []
   let fonts: string[] = []
 
@@ -20,10 +22,10 @@ export function getStyleFonts(style: any): string[] {
     }
   }
 
-  return uniq(fonts)
+  return uniq(fonts).map((font) => stringifyFontFamily(font, theme))
 }
 
-export function getHTMLTreeFonts(root: any): string[] {
+export function getHTMLTreeFonts(root: any, theme?: Theme): string[] {
   if (!root) return []
   let treeFonts: any[] = []
 
@@ -31,17 +33,21 @@ export function getHTMLTreeFonts(root: any): string[] {
     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)]
+      treeFonts = [...treeFonts, ...getHTMLTreeFonts(node, theme)]
     }
   }
 
-  return uniq(treeFonts)
+  return uniq(treeFonts).map((font) => stringifyFontFamily(font, theme))
 }
 
 interface BuildHrefProps {
@@ -49,14 +55,18 @@ interface BuildHrefProps {
   style: any
   setStaticHref: Function
   setVariableHref: Function
+  theme?: Theme
 }
 async function buildHrefs({
   tree,
   style,
   setStaticHref,
   setVariableHref,
+  theme,
 }: BuildHrefProps) {
-  const fonts = style ? getStyleFonts(style) : getHTMLTreeFonts(tree)
+  const fonts = style
+    ? getStyleFonts(style, theme)
+    : getHTMLTreeFonts(tree, theme)
   const staticHref = await buildFontFamiliesHref(fonts)
   const variableHref = await buildVariableFontFamiliesHref(fonts)
 
@@ -71,6 +81,7 @@ interface Props {
   style?: any
 }
 export function HTMLFontTags({ htmlTree = {}, style }: Props) {
+  const theme = useTheme()
   const [staticHref, setStaticHref] = useState<string>('')
   const [variableHref, setVariableHref] = useState<string>('')
 
@@ -80,6 +91,7 @@ export function HTMLFontTags({ htmlTree = {}, style }: Props) {
       style,
       setStaticHref,
       setVariableHref,
+      theme,
     })
   }, [htmlTree, style])
 
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
index e2e825a9..8db5b0e1 100644
--- a/packages/gui/src/components/html/Provider.tsx
+++ b/packages/gui/src/components/html/Provider.tsx
@@ -1,7 +1,8 @@
 import { createContext, ReactNode, useContext, useState } from 'react'
 import { htmlToEditorSchema } from '../../lib'
 import { stylesToEditorSchema } from '../../lib/transformers/styles-to-editor-schema'
-import { HtmlNode, ElementPath, ElementData } from './types'
+import { ThemeProvider } from '../providers/ThemeContext'
+import { HtmlNode, ElementPath, ElementData, ComponentData } from './types'
 
 const DEFAULT_HTML_EDITOR_VALUE = {
   selected: [],
@@ -14,13 +15,23 @@ const DEFAULT_HTML_EDITOR_VALUE = {
       <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
+  setSelected(newSelection: ElementPath | null): void
+  isEditing: boolean
+  setEditing(value: boolean): void
+  components?: ComponentData[]
+  updateComponent?(newComponent: ComponentData): void
+  hasComponents: boolean
 }
 
 export function useHtmlEditor() {
@@ -42,11 +53,13 @@ export const transformValueToSchema = (value: any): ElementData => {
   const fullValue = coerceNodeIntoUnist(value)
 
   const transformed = Object.entries(fullValue).reduce((acc, [key, val]) => {
-    let updatedValue = 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) {
@@ -68,28 +81,43 @@ export const transformValueToSchema = (value: any): 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,
-    theme,
     selected,
     setSelected: (newSelection: ElementPath | null) =>
       setSelected(newSelection),
+    components,
+    isEditing,
+    setEditing: (newValue: any) => setEditing(newValue),
+    updateComponent,
+    hasComponents: !!components.length,
+    update: onChange,
   }
 
   return (
-    <HtmlEditorContext.Provider value={fullContext}>
-      {children}
-    </HtmlEditorContext.Provider>
+    <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 c6dcd45c..00000000
--- a/packages/gui/src/components/html/Renderer.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Fragment, HTMLAttributes } from 'react'
-import { toCSSObject } from '../../lib'
-import { ElementData, ElementPath } from './types'
-import { HTMLFontTags } from './FontTags'
-import { useHtmlEditor } from './Provider'
-import { isVoidElement } from '../../lib/elements'
-import { isSamePath } from './util'
-import { useTheme } from '../providers/ThemeContext'
-import { transformValueToSchema } from '../../components/html/Provider'
-import { toReactProps } from '../../lib/codegen/to-react-props'
-
-interface HtmlRendererProps {
-  value: ElementData
-  path?: ElementPath
-  canvas?: boolean
-}
-export function HtmlRenderer({ value, canvas = true }: HtmlRendererProps) {
-  const transformedVal = transformValueToSchema(value)
-  return (
-    <>
-      <HTMLFontTags htmlTree={transformedVal} />
-      <ElementRenderer
-        value={transformedVal}
-        canvas={canvas}
-        path={[] as ElementPath}
-      />
-    </>
-  )
-}
-
-const DEFAULT_ELEMENT_STYLES_IN_CANVAS = {
-  cursor: 'default',
-}
-
-interface ElementRendererProps {
-  value: ElementData
-  path: ElementPath
-  canvas: boolean
-}
-function ElementRenderer({ value, canvas, path }: ElementRendererProps) {
-  const { selected, setSelected } = useHtmlEditor()
-  const theme = useTheme()
-  const { attributes = {}, style = {}, children = [] } = value
-  const Tag: any = value.tagName || 'div'
-
-  const sx = toCSSObject(
-    {
-      ...style,
-      ...DEFAULT_ELEMENT_STYLES_IN_CANVAS,
-    },
-    theme
-  )
-
-  if (isSamePath(path, selected) && canvas) {
-    sx.outlineWidth = 'thin'
-    sx.outlineStyle = 'solid'
-    sx.outlineColor = 'primary'
-    sx.outlineOffset = '4px'
-    sx.userSelect = 'none'
-  }
-
-  const props = toReactProps({
-    ...(canvas ? cleanAttributes(attributes) : attributes),
-    sx,
-    onClick: (e: MouseEvent) => {
-      e.stopPropagation()
-      setSelected(path)
-    },
-  })
-
-  if (isVoidElement(Tag)) {
-    return <Tag {...props} />
-  }
-
-  return (
-    <Tag {...props}>
-      {children.map((child, i) => {
-        if (child.type === 'text') {
-          return child.value
-        }
-        return (
-          <ElementRenderer
-            key={i}
-            value={child}
-            canvas={canvas}
-            path={[...path, i]}
-          />
-        )
-      })}
-    </Tag>
-  )
-}
-
-const cleanAttributes = (attributes: Record<string, string>) => {
-  const newAttributes = { ...attributes }
-
-  if (newAttributes.href) {
-    newAttributes.href = '#!'
-  }
-
-  return newAttributes
-}
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
index db2100bb..5304c0ac 100644
--- a/packages/gui/src/components/html/default-styles.ts
+++ b/packages/gui/src/components/html/default-styles.ts
@@ -1,13 +1,22 @@
-import { HTMLTag } from './types'
-
 export const DEFAULT_STYLES: Record<string, any> = {
-  [HTMLTag.Button]: {},
-  [HTMLTag.A]: {},
-  [HTMLTag.Input]: {},
-  [HTMLTag.H1]: { textAlign: 'left' },
-  [HTMLTag.H2]: { textAlign: 'left' },
-  [HTMLTag.H3]: { textAlign: 'left' },
-  [HTMLTag.H4]: { textAlign: 'left' },
-  [HTMLTag.H5]: { textAlign: 'left' },
-  [HTMLTag.H6]: { textAlign: 'left' },
+  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 2b22a064..00000000
--- a/packages/gui/src/components/html/editor.tsx
+++ /dev/null
@@ -1,720 +0,0 @@
-import { Editor } from '../Editor'
-import { HtmlNode, HTMLTag, ElementPath, ElementData } from './types'
-import * as Collapsible from '@radix-ui/react-collapsible'
-import * as Tabs from '@radix-ui/react-tabs'
-import { Fragment, useState } from 'react'
-import { isNil } from 'lodash-es'
-import { Code, Layers, X } from 'react-feather'
-import { Label, Combobox } from '../primitives'
-import { SelectInput } from '../inputs/SelectInput'
-import { AttributeEditor } from './AttributeEditor'
-import { DEFAULT_STYLES } from './default-styles'
-import { useHtmlEditor } from './Provider'
-import { isVoidElement } from '../../lib/elements'
-import { isSamePath } from './util'
-import { Export } from './Export'
-import { NodeEditorDropdown } from '../ui/dropdowns/NodeEditorDropdown'
-
-const HTML_TAGS = [
-  HTMLTag.A,
-  HTMLTag.Abbr,
-  HTMLTag.Address,
-  HTMLTag.Article,
-  HTMLTag.Aside,
-  HTMLTag.Audio,
-  HTMLTag.B,
-  HTMLTag.Bdi,
-  HTMLTag.Bdo,
-  HTMLTag.Blockquote,
-  HTMLTag.Br,
-  HTMLTag.Button,
-  HTMLTag.Caption,
-  HTMLTag.Cite,
-  HTMLTag.Code,
-  HTMLTag.Col,
-  HTMLTag.Colgroup,
-  HTMLTag.Data,
-  HTMLTag.Datalist,
-  HTMLTag.Dd,
-  HTMLTag.Del,
-  HTMLTag.Details,
-  HTMLTag.Dfn,
-  HTMLTag.Dialog,
-  HTMLTag.Div,
-  HTMLTag.Dl,
-  HTMLTag.Dt,
-  HTMLTag.Em,
-  HTMLTag.Fieldset,
-  HTMLTag.Figcaption,
-  HTMLTag.Figure,
-  HTMLTag.Footer,
-  HTMLTag.Form,
-  HTMLTag.H1,
-  HTMLTag.H2,
-  HTMLTag.H3,
-  HTMLTag.H4,
-  HTMLTag.H5,
-  HTMLTag.H6,
-  HTMLTag.Header,
-  HTMLTag.Hr,
-  HTMLTag.I,
-  HTMLTag.Img,
-  HTMLTag.Input,
-  HTMLTag.Ins,
-  HTMLTag.Kbd,
-  HTMLTag.Label,
-  HTMLTag.Legend,
-  HTMLTag.Li,
-  HTMLTag.Main,
-  HTMLTag.Mark,
-  HTMLTag.Menu,
-  HTMLTag.Menuitem,
-  HTMLTag.Meter,
-  HTMLTag.Nav,
-  HTMLTag.Noscript,
-  HTMLTag.Ol,
-  HTMLTag.Optgroup,
-  HTMLTag.Option,
-  HTMLTag.Output,
-  HTMLTag.P,
-  HTMLTag.Picture,
-  HTMLTag.Pre,
-  HTMLTag.Progress,
-  HTMLTag.Q,
-  HTMLTag.Rp,
-  HTMLTag.Rt,
-  HTMLTag.Rtc,
-  HTMLTag.Ruby,
-  HTMLTag.S,
-  HTMLTag.Samp,
-  HTMLTag.Span,
-  HTMLTag.Section,
-  HTMLTag.Select,
-  HTMLTag.Source,
-  HTMLTag.Slot,
-  HTMLTag.Small,
-  HTMLTag.Sub,
-  HTMLTag.Summary,
-  HTMLTag.Sup,
-  HTMLTag.Table,
-  HTMLTag.Tbody,
-  HTMLTag.Td,
-  HTMLTag.Template,
-  HTMLTag.TextArea,
-  HTMLTag.Tfoot,
-  HTMLTag.Th,
-  HTMLTag.Thead,
-  HTMLTag.Time,
-  HTMLTag.Tr,
-  HTMLTag.Track,
-  HTMLTag.U,
-  HTMLTag.Ul,
-  HTMLTag.Var,
-  HTMLTag.Video,
-  HTMLTag.Wbr,
-]
-
-interface HtmlEditorProps {
-  onChange(value: HtmlNode): void
-}
-
-const DEFAULT_CHILD_NODE: HtmlNode = {
-  type: 'element',
-  tagName: 'div',
-  children: [
-    {
-      type: 'text',
-      value: '',
-    },
-  ],
-}
-
-const TABS_TRIGGER_STYLES: any = {
-  all: 'unset',
-  cursor: 'pointer',
-  fontSize: 0,
-  fontWeight: 500,
-  px: 2,
-  py: 1,
-  color: 'muted',
-  display: 'inline-flex',
-  gap: '.5em',
-  alignItems: 'center',
-  '&[data-state="active"]': {
-    color: 'text',
-  },
-}
-const TABS_CONTENT_STYLES: any = {
-  width: 400,
-  height: 'calc(100vh - 81px)',
-  overflow: 'auto',
-  resize: 'horizontal',
-  borderRightWidth: '1px',
-  borderRightStyle: 'solid',
-  borderColor: '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({ onChange }: HtmlEditorProps) {
-  const {
-    value,
-    theme,
-    selected: providedSelected,
-    setSelected,
-  } = useHtmlEditor()
-
-  const selected = providedSelected || []
-  const nodeValue = getChildAtPath(value, selected)
-
-  return (
-    <div
-      sx={{
-        display: 'flex',
-        width: 'auto',
-        height: '100%',
-        '*': {
-          boxSizing: 'border-box',
-          //outline: '1px solid rgba(125,125,180,.5)',
-        },
-        '*:before': {
-          boxSizing: 'border-box',
-        },
-        '*:after': {
-          boxSizing: 'border-box',
-        },
-      }}
-    >
-      <Tabs.Root defaultValue="node">
-        <Tabs.List
-          sx={{
-            px: 2,
-            width: '100%',
-            borderRight: 'thin solid',
-            borderBottom: 'thin solid',
-            borderColor: 'border',
-            display: 'flex',
-            alignItems: 'center',
-            flexWrap: 'nowrap',
-            overflowX: 'auto',
-          }}
-        >
-          <Tabs.Trigger sx={TABS_TRIGGER_STYLES} value="node">
-            🎨 Styles
-          </Tabs.Trigger>
-          <Tabs.Trigger sx={TABS_TRIGGER_STYLES} value="tree">
-            <Layers size={12} /> Layers
-          </Tabs.Trigger>
-          <Tabs.Trigger sx={TABS_TRIGGER_STYLES} value="export">
-            <Code size={12} /> Export
-          </Tabs.Trigger>
-        </Tabs.List>
-        <Tabs.Content sx={TABS_CONTENT_STYLES} value="node">
-          <div sx={{ pt: 3, px: 3 }}>
-            <Editor
-              key={selected.join('-')}
-              theme={theme}
-              styles={nodeValue.style ?? {}}
-              onChange={(newStyles) => {
-                const newItem = { ...nodeValue, style: newStyles }
-                onChange(setChildAtPath(value, selected, newItem))
-              }}
-              showRegenerate
-              showAddProperties
-            />
-          </div>
-        </Tabs.Content>
-        <Tabs.Content sx={TABS_CONTENT_STYLES} value="tree">
-          <div sx={{}}>
-            <NodeEditor
-              value={nodeValue}
-              onChange={(newItem) =>
-                onChange(setChildAtPath(value, selected, newItem))
-              }
-              onRemove={() => {
-                onChange(removeChildAtPath(value, selected))
-                const newPath = [...selected]
-                newPath.pop()
-                setSelected(newPath)
-              }}
-            />
-            <TreeNode
-              value={value}
-              onSelect={setSelected}
-              path={[]}
-              onChange={onChange}
-            />
-          </div>
-        </Tabs.Content>
-        <Tabs.Content sx={TABS_CONTENT_STYLES} value="export">
-          <Export value={value} />
-        </Tabs.Content>
-      </Tabs.Root>
-    </div>
-  )
-}
-
-interface EditorProps {
-  value: HtmlNode
-  onChange(value: HtmlNode): void
-}
-interface TagEditorProps extends EditorProps {
-  onRemove(): void
-}
-
-function NodeEditor({ value, onChange, onRemove }: TagEditorProps) {
-  const { value: fullValue, selected } = useHtmlEditor()
-  const nodeType = value.type === 'text' ? 'text' : 'tag'
-  return (
-    <div sx={{ pb: 3, overflowY: 'auto', overflowX: 'hidden' }}>
-      <div
-        sx={{
-          mb: 2,
-          display: 'flex',
-          alignItems: 'center',
-          px: 3,
-          pt: 3,
-          width: '100%',
-        }}
-      >
-        <div sx={{ flexGrow: 1 }}>
-          <SelectInput
-            label="Type"
-            value={nodeType}
-            onChange={(value) => {
-              if (value === 'text') {
-                onChange({ type: 'text', value: '' })
-              } else {
-                onChange({
-                  type: 'element',
-                  tagName: 'div',
-                  children: [],
-                })
-              }
-            }}
-            options={['text', 'tag']}
-          />
-        </div>
-        <div sx={{ mr: -2 }}>
-          <NodeEditorDropdown
-            onRemove={onRemove}
-            onDuplicate={() => {
-              const parentPath = [...(selected || [])]
-              const childIndex = parentPath.pop() // Remove child from parent path
-              const parent = getAt(fullValue, parentPath)
-              onChange(addChildAtPath(parent, [childIndex ?? 0], { ...value }))
-            }}
-            onWrap={() => {
-              const wrappedNode: HtmlNode = {
-                type: 'element',
-                tagName: 'div',
-                children: [value],
-              }
-              return onChange(wrappedNode)
-            }}
-          />
-        </div>
-      </div>
-      <NodeSwitch value={value} onChange={onChange} />
-    </div>
-  )
-}
-
-function NodeSwitch({ value, onChange }: EditorProps) {
-  const { selected } = useHtmlEditor()
-
-  if (value.type === 'text') {
-    return (
-      <div sx={{ px: 3 }}>
-        <Label>
-          <span sx={{ display: 'block' }}>Content</span>
-          <textarea
-            rows={8}
-            sx={{
-              width: '100%',
-            }}
-            value={value.value}
-            onChange={(e) =>
-              onChange({
-                ...value,
-                value: e.target.value,
-              })
-            }
-          />
-        </Label>
-      </div>
-    )
-  }
-
-  return (
-    <div>
-      <article
-        sx={{
-          borderBottomWidth: '1px',
-          borderBottomStyle: 'solid',
-          borderBottomColor: 'border',
-          pb: 3,
-        }}
-      >
-        <div sx={{ mb: 2, px: 3 }}>
-          <Label>Tag name</Label>{' '}
-          <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 }
-              onChange({
-                ...value,
-                tagName: selectedItem,
-                style: mergedStyles,
-              })
-            }}
-            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>
-    </div>
-  )
-}
-
-interface TreeNodeProps extends EditorProps {
-  path: ElementPath
-  onSelect(path: ElementPath | null): void
-}
-
-function TreeNode({ value, path, onSelect, onChange }: TreeNodeProps) {
-  const { selected } = useHtmlEditor()
-  const [open, setOpen] = useState(true)
-  const isSelected = isSamePath(path, selected)
-
-  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,
-          }}
-          onClick={() => onSelect(path)}
-        >
-          "{value.value}"
-        </button>
-      </div>
-    )
-  }
-
-  const tagButton = (
-    <button
-      sx={{
-        cursor: 'pointer',
-        border: 'none',
-        backgroundColor: 'background',
-        color: 'text',
-        fontSize: 1,
-        fontWeight: isSelected ? 600 : 400,
-        px: 0,
-        mr: 0,
-        ml: 0,
-        textAlign: 'start',
-      }}
-      onClick={() => onSelect(path)}
-    >
-      <{value.tagName}
-      {!open || isVoidElement(value.tagName as string) ? ' /' : null}>
-    </button>
-  )
-
-  if (isVoidElement(value.tagName as string)) {
-    return tagButton
-  }
-
-  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={{ lineHeight: 1, fontFamily: 'monospace' }}>{tagButton}</span>
-      <Collapsible.Content>
-        <div sx={{ ml: 4 }}>
-          {value.children?.length ? (
-            value.children?.map((child, i) => {
-              return (
-                <Fragment key={i}>
-                  <AddChildButton
-                    onClick={() => {
-                      onChange(addChildAtPath(value, [i], DEFAULT_CHILD_NODE))
-                      onSelect([...path, i])
-                    }}
-                  />
-                  <TreeNode
-                    value={child}
-                    onSelect={onSelect}
-                    path={[...path, i]}
-                    onChange={(newChild) => {
-                      onChange({
-                        ...value,
-                        children: replaceAt(value.children ?? [], i, newChild),
-                      })
-                    }}
-                  />
-                  <AddChildButton
-                    onClick={() => {
-                      onChange(
-                        addChildAtPath(
-                          value,
-                          [value.children?.length ?? 0],
-                          DEFAULT_CHILD_NODE
-                        )
-                      )
-                      onSelect(null)
-                    }}
-                  />
-                </Fragment>
-              )
-            })
-          ) : (
-            <AddChildButton
-              onClick={() => {
-                onChange(addChildAtPath(value, [0], DEFAULT_CHILD_NODE))
-                onSelect([0])
-              }}
-            />
-          )}
-        </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={{
-              fontWeight: isSelected ? 600 : 400,
-              lineHeight: 1,
-              p: 0,
-              fontSize: 1,
-              fontFamily: 'monospace',
-            }}
-          >
-            </{value.tagName}>
-          </div>
-        </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',
-        fontSize: 0,
-        pt: 2,
-        whiteSpace: 'nowrap',
-        color: 'muted',
-        zIndex: '99',
-        transition: 'color .2s ease-in-out',
-        ':hover': {
-          color: 'text',
-        },
-      }}
-    >
-      + Add child
-    </button>
-  )
-}
-
-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 {
-  // 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)
-    ),
-  }
-}
-
-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 getAt<T>(node: ElementData, path: ElementPath) {
-  let el: ElementData | undefined = node
-  path.reverse().forEach((index) => {
-    el = el?.children?.[index]
-  })
-  return el
-}
-
-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 68c6caad..71d4a77f 100644
--- a/packages/gui/src/components/html/types.ts
+++ b/packages/gui/src/components/html/types.ts
@@ -1,111 +1,39 @@
 export interface ElementData {
   type: 'element' | 'text'
   tagName?: string
-  attributes?: Record<string, 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 type HtmlNode = ElementData
-export type ElementPath = number[]
-
-export const enum HTMLTag {
-  A = 'a',
-  Abbr = 'abbr',
-  Address = 'address',
-  Article = 'article',
-  Aside = 'aside',
-  Audio = 'audio',
-  B = 'b',
-  Bdi = 'bdi',
-  Bdo = 'bdo',
-  Blockquote = 'blockquote',
-  Br = 'br',
-  Button = 'button',
-  Caption = 'caption',
-  Cite = 'cite',
-  Code = 'code',
-  Col = 'col',
-  Colgroup = 'colgroup',
-  Data = 'data',
-  Datalist = 'datalist',
-  Dd = 'dd',
-  Del = 'del',
-  Details = 'details',
-  Dfn = 'dfn',
-  Dialog = 'dialog',
-  Div = 'div',
-  Dl = 'dl',
-  Dt = 'dt',
-  Em = 'em',
-  Fieldset = 'fieldset',
-  Figcaption = 'figcaption',
-  Figure = 'figure',
-  Footer = 'footer',
-  Form = 'form',
-  H1 = 'h1',
-  H2 = 'h2',
-  H3 = 'h3',
-  H4 = 'h4',
-  H5 = 'h5',
-  H6 = 'h6',
-  Header = 'header',
-  Hr = 'hr',
-  I = 'i',
-  Img = 'img',
-  Input = 'input',
-  Ins = 'ins',
-  Kbd = 'kbd',
-  Label = 'label',
-  Legend = 'legend',
-  Li = 'li',
-  Main = 'main',
-  Mark = 'mark',
-  Menu = 'menu',
-  Menuitem = 'menuitem',
-  Meter = 'meter',
-  Nav = 'nav',
-  Noscript ='noscript',
-  Ol = 'ol',
-  Optgroup = 'optgroup',
-  Option = 'option',
-  Output = 'output',
-  P = 'p',
-  Picture = 'picture',
-  Pre = 'pre',
-  Progress = 'progress',
-  Q = 'q',
-  Rp = 'rp',
-  Rt = 'rt',
-  Rtc = 'rtc',
-  Ruby = 'ruby',
-  S = 's',
-  Samp = 'samp',
-  Span = 'span',
-  Section = 'section',
-  Select = 'select',
-  Source = 'source',
-  Slot = 'slot',
-  Small = 'small',
-  Sub = 'sub',
-  Summary = 'summary',
-  Sup = 'sup',
-  Table = 'table',
-  Tbody = 'tbody',
-  Td = 'td',
-  Template = 'template',
-  TextArea = 'textarea',
-  Tfoot = 'tfoot',
-  Th = 'th',
-  Thead = 'thead',
-  Time = 'time',
-  Tr = 'tr',
-  Track = 'track',
-  U = 'u',
-  Ul = 'ul',
-  Var = 'var',
-  Video = 'video',
-  Wbr = 'wbr',
+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 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
index a7bbd013..47d60a81 100644
--- a/packages/gui/src/components/html/util.ts
+++ b/packages/gui/src/components/html/util.ts
@@ -1,4 +1,5 @@
-import { ElementPath } from './types'
+import { HtmlNode, ElementPath, Slot } from './types'
+import { isNil } from 'lodash-es'
 
 export const isSamePath = (
   path1: ElementPath | null,
@@ -10,3 +11,155 @@ export const isSamePath = (
 
   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/Dimension/Input.tsx b/packages/gui/src/components/inputs/Dimension/Input.tsx
index bf48cf2e..ea79f07d 100644
--- a/packages/gui/src/components/inputs/Dimension/Input.tsx
+++ b/packages/gui/src/components/inputs/Dimension/Input.tsx
@@ -4,6 +4,7 @@ import { EditorPropsWithLabel } from '../../../types/editor'
 import { UnitConversions } from '../../../lib/convert'
 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]>
@@ -85,25 +86,10 @@ interface DeleteProps {
 }
 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/FontFamily/Input.tsx b/packages/gui/src/components/inputs/FontFamily/Input.tsx
index c54e09ae..fc242163 100644
--- a/packages/gui/src/components/inputs/FontFamily/Input.tsx
+++ b/packages/gui/src/components/inputs/FontFamily/Input.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { kebabCase, uniq } from 'lodash-es'
+import { kebabCase } from 'lodash-es'
 import { useCombobox } from 'downshift'
 import { FontFamilyType } from '../../../types/css'
 import { EditorProps } from '../../../types/editor'
@@ -70,7 +70,7 @@ export function FontFamilyInput({ label, value, onChange, onRemove }: Props) {
     getFontData()
   }, [])
 
-  const themeFonts = uniq(theme.fonts?.map((f) => f.stack) || [])
+  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)
@@ -158,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}
@@ -252,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,
               }}
             >
@@ -308,6 +308,9 @@ 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
@@ -324,10 +327,11 @@ export function FontFamilyInput({ label, value, onChange, onRemove }: Props) {
               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/stops.tsx b/packages/gui/src/components/inputs/Gradient/stops.tsx
index e7de0847..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)
@@ -72,7 +80,10 @@ export default function GradientStopsField({
           onChange([
             ...value,
             {
-              color: { value: 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
+          ),
         },
       }}
     />
@@ -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}
@@ -258,7 +277,7 @@ function Marker({ value, isSelected, ...props }: MarkerProps) {
           content: "''",
           position: 'absolute',
           inset: 0,
-          backgroundColor: value.color as any,
+          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 54e0e9c7..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,7 +23,7 @@ export function stringifyGradient(gradient: Gradient): string {
         `${gradient.shape ?? 'circle'} at ${stringifyPosition(
           gradient.position
         )}`,
-        stringifyStops(gradient, '%'),
+        stringifyStops(gradient.stops, theme),
       ])
     }
     case 'conic':
@@ -30,15 +32,18 @@ export function stringifyGradient(gradient: Gradient): string {
         `from ${stringifyUnit(gradient.angle)} at ${stringifyPosition(
           gradient.position
         )}`,
-        stringifyStops(gradient, '%'),
+        stringifyStops(gradient.stops, theme),
       ])
     }
   }
 }
 
-export 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/SchemaInput.tsx b/packages/gui/src/components/inputs/SchemaInput.tsx
index dbeb97db..a966af70 100644
--- a/packages/gui/src/components/inputs/SchemaInput.tsx
+++ b/packages/gui/src/components/inputs/SchemaInput.tsx
@@ -8,12 +8,12 @@ interface Props<T> {
   schema: DataTypeSchema<T>
   label: string
   value: T
+  ruleset?: any
+  property?: string
   onChange(value: T): void
   onRemove?(): void
-  reorder?: {
-    onMoveUp?(): void
-    onMoveDown?(): void
-  }
+  onDrag?(): void
+  onDragEnd?(): void
 }
 
 /**
@@ -24,12 +24,22 @@ export function SchemaInput<T>({
   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} />
+  const content = Input && (
+    <Input
+      label=""
+      value={value}
+      onChange={onChange}
+      ruleset={ruleset}
+      property={property}
+    />
+  )
   const { hasBlockInput = () => !!content } = schema
   return (
     <Collapsible.Root defaultOpen>
@@ -39,11 +49,14 @@ export function SchemaInput<T>({
         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]': {
@@ -56,7 +69,13 @@ export function SchemaInput<T>({
           </Collapsible.Trigger>
         )}
         {InlineInput && (
-          <InlineInput label="" value={value} onChange={onChange} />
+          <InlineInput
+            label=''
+            value={value}
+            onChange={onChange}
+            ruleset={ruleset}
+            property={property}
+          />
         )}
       </InputHeader>
       {content && <Collapsible.Content>{content}</Collapsible.Content>}
diff --git a/packages/gui/src/components/inputs/SelectInput.tsx b/packages/gui/src/components/inputs/SelectInput.tsx
index 18f20158..d574d680 100644
--- a/packages/gui/src/components/inputs/SelectInput.tsx
+++ b/packages/gui/src/components/inputs/SelectInput.tsx
@@ -7,9 +7,15 @@ 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>(props: Props<T>) {
+export function SelectInput<T extends string>({
+  decorateText,
+  ...props
+}: Props<T>) {
   const { value, onChange, options = [] } = props
 
   return (
@@ -32,7 +38,9 @@ export function SelectInput<T extends string>(props: Props<T>) {
             return (
               <Select.Item key={v} value={v}>
                 <Select.ItemIndicator />
-                <Select.ItemText>{v}</Select.ItemText>
+                <Select.ItemText>
+                  {decorateText ? decorateText(v) : v}
+                </Select.ItemText>
               </Select.Item>
             )
           })}
diff --git a/packages/gui/src/components/inputs/TextInput.tsx b/packages/gui/src/components/inputs/TextInput.tsx
index 1940f68d..2f1dcf79 100644
--- a/packages/gui/src/components/inputs/TextInput.tsx
+++ b/packages/gui/src/components/inputs/TextInput.tsx
@@ -6,12 +6,12 @@ type Props = EditorPropsWithLabel<string>
 export function TextInput<T extends string>(props: Props) {
   const { value, onChange } = props
   return (
-    <div sx={{ display: 'flex', flexDirection: 'row' }}>
+    <div sx={{ width: '100%' }}>
       <input
         type="text"
         value={value}
         onChange={(e) => onChange(e.target.value as T)}
-        sx={{ width: '100%', minHeight: '1.6em', mr: 1 }}
+        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/primitives/ColorPicker/Field.tsx b/packages/gui/src/components/primitives/ColorPicker/Field.tsx
index bc20ad33..a5d0a1cf 100644
--- a/packages/gui/src/components/primitives/ColorPicker/Field.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/Field.tsx
@@ -3,8 +3,9 @@ import ValuePicker from './ValuePicker'
 import IconButton from '../../ui/IconButton'
 import { RefreshCw, Trash } from 'react-feather'
 import { Theme } from '../../../types/theme'
-import { randomColor } from '../../../lib/color'
+import { randomColor, randomHexColor } from '../../../lib/color'
 import { Color } from '../../../types/css'
+import { themeGet } from '../../../lib'
 
 export interface Props {
   value: Color
@@ -18,7 +19,9 @@ export interface Props {
    * 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
 }
 
 /**
@@ -31,6 +34,8 @@ export default function ColorPicker({
   title,
   onRemove,
   onRegenerate,
+  ruleset,
+  property,
 }: Props) {
   return (
     <div>
@@ -63,11 +68,23 @@ export default function ColorPicker({
             onClick={() => {
               // If a user-defined regenerator is given, use it
               if (onRegenerate) {
-                onChange(onRegenerate())
+                onChange(onRegenerate(theme))
                 return
               } else {
                 // Otherwise, regenerate a random color based on theme
-                onChange(randomColor(theme))
+                const path =
+                  randomColor({
+                    theme,
+                    ruleset,
+                    previousValue: value,
+                    property,
+                  }) ?? randomHexColor()
+                const color = themeGet({
+                  theme,
+                  path,
+                  property: 'color',
+                })
+                onChange(color)
               }
             }}
           >
diff --git a/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx b/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx
index e4acc32a..a525776d 100644
--- a/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx
@@ -1,11 +1,9 @@
 import * as Popover from '@radix-ui/react-popover'
-import { get } from 'lodash-es'
-import { Color } from '../../../types/css'
-import { Theme } from '../../../types/theme'
+import { themeGet } from '../../../lib'
 import { useTheme } from '../../providers/ThemeContext'
+import { joinPath } from '../../providers/util'
 import Checkerboard from './Checkerboard'
 import { hasAlpha, withFallback } from './util'
-import ColorValueDisplay from './ValueDisplay'
 
 export interface ThemeColor {
   type: 'theme'
@@ -23,6 +21,15 @@ export default function PalettePopover({
   // 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
@@ -36,7 +43,7 @@ export default function PalettePopover({
           border: '1px solid',
           borderColor: 'border',
           borderRadius: '0.25rem',
-          width: 'max-content',
+          maxWidth: '200px',
           fontSize: '0.875rem',
           textOverflow: 'ellipsis',
           overflow: 'hidden',
@@ -49,6 +56,7 @@ export default function PalettePopover({
         {/* swatch */}
         <Popover.Anchor>{<Swatch value={value} />}</Popover.Anchor>
         {value.path}
+        <span sx={{ fontSize: 0, color: 'muted' }}>{labelMeta}</span>
       </Popover.Trigger>
       <Popover.Content
         sx={{
@@ -58,6 +66,7 @@ export default function PalettePopover({
           border: '1px solid',
           borderColor: 'border',
           borderRadius: '0.5rem',
+          zIndex: 99999,
         }}
       >
         <PalettePicker value={value} onChange={onChange} {...props} />
@@ -69,7 +78,7 @@ export default function PalettePopover({
 function Swatch({ value }: { value: ThemeColor }) {
   const theme = useTheme()
   // FIXME extracting color value from path is annoying...
-  const color = get(theme.colors, value.path)
+  const color = themeGet({ theme, property: 'color', path: value.path })
   const isTransparent = hasAlpha(color)
   return (
     <div
@@ -104,7 +113,7 @@ function Swatch({ value }: { value: ThemeColor }) {
  */
 export function PalettePicker({ value, onChange }: Props) {
   const theme = useTheme()
-  const valueColor = get(theme.colors, value.path)
+  const valueColor = themeGet({ theme, property: 'color', path: value.path })
   return (
     <div>
       {/* <ColorValueDisplay value={color} onChange={onChange} /> */}
@@ -116,12 +125,18 @@ export function PalettePicker({ value, onChange }: Props) {
           return (
             <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={`${name}.${i}`}
+                    title={`${colorPath} (${rawColor})`}
                     sx={{
                       appearance: 'none',
                       WebkitAppearance: 'none',
diff --git a/packages/gui/src/components/primitives/ColorPicker/Popover.tsx b/packages/gui/src/components/primitives/ColorPicker/Popover.tsx
index 142dbdaa..d76526f6 100644
--- a/packages/gui/src/components/primitives/ColorPicker/Popover.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/Popover.tsx
@@ -54,6 +54,7 @@ export default function ColorPopover({
           border: '1px solid',
           borderColor: 'border',
           borderRadius: '0.5rem',
+          zIndex: 9999,
         }}
       >
         <ColorField value={value} onChange={onChange} {...props} />
diff --git a/packages/gui/src/components/primitives/ColorPicker/PreviewPalettePicker.tsx b/packages/gui/src/components/primitives/ColorPicker/PreviewPalettePicker.tsx
index 0263cf04..2d55ea18 100644
--- a/packages/gui/src/components/primitives/ColorPicker/PreviewPalettePicker.tsx
+++ b/packages/gui/src/components/primitives/ColorPicker/PreviewPalettePicker.tsx
@@ -53,15 +53,14 @@ export function PreviewPalettePicker({
                       appearance: 'none',
                       WebkitAppearance: 'none',
                       cursor: 'pointer',
-                      borderWidth: selected ? '2px' : '1px',
-                      borderColor: selected ? '#ff0000' : 'border',
-                      borderStyle: 'solid',
+                      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({
diff --git a/packages/gui/src/components/primitives/Combobox.tsx b/packages/gui/src/components/primitives/Combobox.tsx
index 927da31c..dd65f531 100644
--- a/packages/gui/src/components/primitives/Combobox.tsx
+++ b/packages/gui/src/components/primitives/Combobox.tsx
@@ -1,5 +1,12 @@
 import { useCombobox } from 'downshift'
-import { useEffect, useId, useRef, useState } from 'react'
+import {
+  ChangeEvent,
+  KeyboardEvent,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react'
 
 interface ComboboxInterface {
   onFilterItems: (filterValue: string) => string[]
@@ -56,16 +63,33 @@ export function Combobox({
 
   const handleItemSelected = (selectedItem: string) => {
     onItemSelected(selectedItem)
-    setFilterValue(clearOnSelect ? '' : 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"
         {...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) {
@@ -73,7 +97,19 @@ export function Combobox({
             handleFilterItems('')
           }
         }}
-        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={{
@@ -171,7 +207,7 @@ export function Combobox({
                     toggleMenu()
                   }}
                 >
-                  {item || decorateItemText(item)}
+                  {decorateItemText(item)}
                 </li>
               )
             })}
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/Input.tsx b/packages/gui/src/components/primitives/Number/Input.tsx
index 3bbf33ff..e9e9f707 100644
--- a/packages/gui/src/components/primitives/Number/Input.tsx
+++ b/packages/gui/src/components/primitives/Number/Input.tsx
@@ -1,6 +1,6 @@
 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 {
@@ -42,7 +42,7 @@ export const DraggableInput = ({
   }, [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
@@ -57,8 +57,8 @@ export const DraggableInput = ({
       if (dragging && (max || max === 0)) newValue = Math.min(newValue, max)
 
       updateValue(newValue)
-    },
-    { pointerEvents: true }
+    }
+    // { pointerEvents: true }
   )
 
   return (
diff --git a/packages/gui/src/components/providers/EditorContext.tsx b/packages/gui/src/components/providers/EditorContext.tsx
index 8298c173..0ce3060b 100644
--- a/packages/gui/src/components/providers/EditorContext.tsx
+++ b/packages/gui/src/components/providers/EditorContext.tsx
@@ -2,7 +2,7 @@ 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 { applyRecipe, parentPath } from './util'
 import { ThemeProvider, useTheme } from './ThemeContext'
 import { EditorConfigProvider, EditorConfig } from './EditorConfigContext'
 import { theme as uiTheme } from '../ui/theme'
@@ -14,6 +14,7 @@ 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
@@ -29,6 +30,14 @@ export function useEditor() {
     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
@@ -83,6 +92,7 @@ export function useEditor() {
   return {
     ...context,
     getField,
+    getParentField,
     getFields,
     setField,
     setFields,
diff --git a/packages/gui/src/components/providers/ThemeContext.tsx b/packages/gui/src/components/providers/ThemeContext.tsx
index 4647479b..2af6a3af 100644
--- a/packages/gui/src/components/providers/ThemeContext.tsx
+++ b/packages/gui/src/components/providers/ThemeContext.tsx
@@ -6,7 +6,9 @@ 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 'fontSizes':
@@ -24,7 +26,7 @@ export const useThemeProperty = (property?: string): any[] => {
     case 'colors':
       return context.colors || []
     case 'fonts':
-      return context.fonts || []
+      return context.fonts || {}
     case 'fontWeights':
       return context.fontWeights || []
     case 'letterSpacings':
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/background.tsx b/packages/gui/src/components/schemas/background.tsx
index 808d8694..ea5c0900 100644
--- a/packages/gui/src/components/schemas/background.tsx
+++ b/packages/gui/src/components/schemas/background.tsx
@@ -19,6 +19,7 @@ const repeat = joinSchemas([
   keyword(['repeat-x', 'repeat-y']),
 ])
 const size = joinSchemas([
+  keyword(['cover', 'contain']),
   tupleSchema({
     itemSchema: joinSchemas([
       keyword(['auto']),
@@ -28,7 +29,6 @@ const size = joinSchemas([
     ]),
     labels: ['x', 'y'],
   }),
-  keyword(['cover', 'contain']),
 ])
 
 export const backgroundAttachment = listSchema({ itemSchema: attachment })
diff --git a/packages/gui/src/components/schemas/border-radius.tsx b/packages/gui/src/components/schemas/border-radius.tsx
index 77386a84..e68df0c5 100644
--- a/packages/gui/src/components/schemas/border-radius.tsx
+++ b/packages/gui/src/components/schemas/border-radius.tsx
@@ -1,12 +1,12 @@
 import { joinSchemas } from './joinSchemas'
 import { lengthPercentage } from './primitives'
-import { theme } from './theme'
+import { themeScale } from './theme'
 import { tupleSchema } from './tuple'
 
 const borderRadiusItem = tupleSchema({
   itemSchema: joinSchemas([
     lengthPercentage({ range: 'nonnegative' }),
-    theme('borderRadius'),
+    themeScale('borderRadius'),
   ]),
   labels: ['x', 'y'],
 })
@@ -17,4 +17,7 @@ export const borderTopRightRadius = borderRadiusItem
 export const borderBottomRightRadius = borderRadiusItem
 
 // TODO four-valued syntax
-export const borderRadius = lengthPercentage()
+export const borderRadius = joinSchemas([
+  lengthPercentage({ range: 'nonnegative' }),
+  themeScale('borderRadius'),
+])
diff --git a/packages/gui/src/components/schemas/border.tsx b/packages/gui/src/components/schemas/border.tsx
index 2e6dbffe..2bf61c09 100644
--- a/packages/gui/src/components/schemas/border.tsx
+++ b/packages/gui/src/components/schemas/border.tsx
@@ -4,7 +4,7 @@ import { joinSchemas } from './joinSchemas'
 import { objectSchema } from './object'
 import { keyword, length } from './primitives'
 import { shorthandSchema } from './shorthand'
-import { theme } from './theme'
+import { themeScale } from './theme'
 import { tupleSchema } from './tuple'
 
 /* Border width */
@@ -12,7 +12,7 @@ import { tupleSchema } from './tuple'
 const borderWidthItem = joinSchemas([
   length({ range: 'nonnegative' }),
   keyword(['thin', 'medium', 'thick']),
-  theme('borderWidths'),
+  themeScale('borderWidths'),
 ])
 
 export const borderTopWidth = borderWidthItem
diff --git a/packages/gui/src/components/schemas/box-shadow.tsx b/packages/gui/src/components/schemas/box-shadow.tsx
index 3c869b3a..4939f874 100644
--- a/packages/gui/src/components/schemas/box-shadow.tsx
+++ b/packages/gui/src/components/schemas/box-shadow.tsx
@@ -3,6 +3,7 @@ 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({
@@ -20,6 +21,11 @@ const singleBoxShadow = objectSchema({
 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
index 6101907f..0b8349c0 100644
--- a/packages/gui/src/components/schemas/box-side.tsx
+++ b/packages/gui/src/components/schemas/box-side.tsx
@@ -2,7 +2,7 @@ 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 { Link } from 'react-feather'
+import { Maximize, Minimize } from 'react-feather'
 import { SchemaInput } from '../inputs/SchemaInput'
 
 interface CreateBoxSideSchema<T> {
@@ -23,10 +23,10 @@ export interface BoxSide<T> {
 export function boxSideSchema<T>({
   itemSchema,
 }: CreateBoxSideSchema<T>): DataTypeSchema<BoxSide<T>> {
-  function stringify(value: BoxSide<T>) {
+  function stringify(value: BoxSide<T>, ...args) {
     const { stringify, defaultValue } = itemSchema
     if (isLinked(value)) {
-      return stringify(value.top)
+      return stringify(value.top, ...args)
     }
     const {
       top,
@@ -34,17 +34,20 @@ export function boxSideSchema<T>({
       bottom = defaultValue,
       left = defaultValue,
     } = value
-    return [top, right, bottom, left].map(stringify as any).join(' ')
+    return [top, right, bottom, left]
+      .map((side) => stringify(side, ...args))
+      .join(' ')
   }
   const defaultValue = {
     top: itemSchema.defaultValue,
   }
 
-  function regenerate({ previousValue }: RegenOptions<BoxSide<T>>) {
+  function regenerate({ theme, previousValue }: RegenOptions<BoxSide<T>>) {
     return mapValues(previousValue, (value) => {
       if (value) {
         return (
-          itemSchema.regenerate?.({ previousValue: value }) ?? previousValue
+          itemSchema.regenerate?.({ theme, previousValue: value }) ??
+          previousValue
         )
       }
     }) as BoxSide<T>
@@ -53,11 +56,14 @@ export function boxSideSchema<T>({
     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)
       )
@@ -67,7 +73,7 @@ export function boxSideSchema<T>({
       const linked = isLinked(props.value)
       const linkToggle = (
         <Toggle.Root
-          title="Link inputs"
+          title="Show all directions (longhand)"
           sx={{
             p: 0,
             background: 'none',
@@ -92,13 +98,17 @@ export function boxSideSchema<T>({
             }
           }}
         >
-          <Link size={14} />
+          {linked ? (
+            <Maximize size={16} />
+          ) : (
+            <Minimize size={16} />
+          )}
         </Toggle.Root>
       )
       return (
         <div>
           {linked ? (
-            <div sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <div sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 1, }}>
               {linkToggle}
               <SchemaInput
                 schema={itemSchema}
@@ -111,6 +121,7 @@ export function boxSideSchema<T>({
               sx={{
                 display: 'grid',
                 justifyItems: 'center',
+                alignItems: 'center',
                 gridTemplateRows: '1fr max-content 1fr',
                 gridTemplateAreas: `
                 "top top top"
diff --git a/packages/gui/src/components/schemas/color.ts b/packages/gui/src/components/schemas/color.ts
index 370d3ade..51bf3a6e 100644
--- a/packages/gui/src/components/schemas/color.ts
+++ b/packages/gui/src/components/schemas/color.ts
@@ -1,5 +1,5 @@
-import { randomColor } from '../../lib/color'
-import { stringifyUnit } from '../../lib/stringify'
+import { themeGet } from '../../lib'
+import { randomColor, randomHexColor } from '../../lib/color'
 import { Color } from '../../types/css'
 import { ColorInput } from '../inputs/ColorInput'
 import PalettePopover, {
@@ -20,23 +20,54 @@ function rawColor({
     inlineInput: ColorInput,
     stringify: (value) => value,
     defaultValue,
-    regenerate: () => randomColor(),
+    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) => value.path,
+  stringify: (value, theme = {}) => {
+    return themeGet({
+      theme,
+      property: 'color',
+      path: value.path,
+    })
+  },
   defaultValue: { type: 'theme', path: 'primary' },
-  regenerate: () => randomColor(),
+  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({
@@ -44,9 +75,12 @@ export function color({
 }: {
   defaultValue?: any
 } = {}) {
-  return joinSchemas([
-    rawColor({ defaultValue }),
-    themeColor,
-    keyword(['transparent', 'currentcolor'], { type: 'system' }),
-  ])
+  return joinSchemas(
+    [
+      rawColor({ defaultValue }),
+      keyword(['currentcolor', 'transparent'], { type: 'system' }),
+      themeColor,
+    ],
+    { defaultValue }
+  )
 }
diff --git a/packages/gui/src/components/schemas/columns.tsx b/packages/gui/src/components/schemas/columns.tsx
index 0e6d2aeb..7c8bbed4 100644
--- a/packages/gui/src/components/schemas/columns.tsx
+++ b/packages/gui/src/components/schemas/columns.tsx
@@ -1,11 +1,11 @@
 import { joinSchemas } from './joinSchemas'
 import { integer, keyword, length } from './primitives'
 import { shorthandSchema } from './shorthand'
-import { theme } from './theme'
+import { themeScale } from './theme'
 
 export const columnWidth = joinSchemas([
   length(),
-  theme('sizes'),
+  themeScale('sizes'),
   keyword(['auto']),
 ])
 
diff --git a/packages/gui/src/components/schemas/dimension.tsx b/packages/gui/src/components/schemas/dimension.tsx
index bf9c8b3c..339c5d4f 100644
--- a/packages/gui/src/components/schemas/dimension.tsx
+++ b/packages/gui/src/components/schemas/dimension.tsx
@@ -1,5 +1,7 @@
+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'
@@ -51,6 +53,14 @@ function basicDimension<U extends string>({
     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]
+    },
   }
 }
 
@@ -63,3 +73,19 @@ 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
index 96a8e0c2..976055b1 100644
--- a/packages/gui/src/components/schemas/easing-function.tsx
+++ b/packages/gui/src/components/schemas/easing-function.tsx
@@ -1,3 +1,4 @@
+import { split } from '../../lib/array'
 import { EasingFunctionEditor } from '../inputs/EasingFunction'
 import { keywordValues } from '../inputs/EasingFunction/keywords'
 import { stringifyEasingFunction } from '../inputs/EasingFunction/stringify'
@@ -30,6 +31,27 @@ const rawEasingFunction: DataTypeSchema<EasingFunction> = {
       }
     }
   }) 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([
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
index d638417e..44cf7121 100644
--- a/packages/gui/src/components/schemas/function.tsx
+++ b/packages/gui/src/components/schemas/function.tsx
@@ -1,3 +1,4 @@
+import { isNil } from 'lodash-es'
 import { getInputProps } from '../../lib/util'
 import { SchemaInput } from '../inputs/SchemaInput'
 import { DataTypeSchema } from './types'
@@ -17,8 +18,8 @@ export function functionSchema<N extends string, T>(
   return {
     // a function's display type is its name
     type: name,
-    stringify(value: FunctionData<N, T>) {
-      return `${value.name}(${argsSchema.stringify(value.arguments)})`
+    stringify(value: FunctionData<N, T>, theme) {
+      return `${value.name}(${argsSchema.stringify(value.arguments, theme)})`
     },
     defaultValue: {
       name,
@@ -39,6 +40,9 @@ export function functionSchema<N extends string, T>(
     input(props) {
       return (
         <div>
+          <span sx={{ fontSize: 1, fontWeight: 600 }}>
+            {props.value.name}()
+          </span>
           <SchemaInput
             schema={argsSchema}
             {...getInputProps(props, 'arguments')}
@@ -47,5 +51,14 @@ export function functionSchema<N extends string, T>(
         </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
index 5d5c9175..95504482 100644
--- a/packages/gui/src/components/schemas/gap.tsx
+++ b/packages/gui/src/components/schemas/gap.tsx
@@ -1,12 +1,12 @@
 import { joinSchemas } from './joinSchemas'
 import { keyword, lengthPercentage } from './primitives'
-import { theme } from './theme'
+import { themeScale } from './theme'
 import { tupleSchema } from './tuple'
 
 const gapItem = joinSchemas([
   lengthPercentage({ range: 'nonnegative' }),
   keyword(['normal']),
-  theme('space'),
+  themeScale('space'),
 ])
 
 export const rowGap = gapItem
diff --git a/packages/gui/src/components/schemas/gradient.tsx b/packages/gui/src/components/schemas/gradient.tsx
index 60f1ad16..36e37fe2 100644
--- a/packages/gui/src/components/schemas/gradient.tsx
+++ b/packages/gui/src/components/schemas/gradient.tsx
@@ -1,6 +1,4 @@
-import { sortBy } from 'lodash-es'
 import { bindProps } from '../../lib/components'
-import { randomInt } from '../../lib/util'
 import GradientStopsField from '../inputs/Gradient/stops'
 import { GradientStop } from '../inputs/Gradient/types'
 import { functionSchema } from './function'
@@ -11,43 +9,25 @@ 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'
 
-export const stringifyStops = (stops: GradientStop[], unit: string = '%') => {
-  return sortBy(stops, (stop) => stop.hinting)
-    ?.filter(Boolean)
-    ?.map(({ color: hintColor, hinting }) => {
-      const resolved = color().stringify(hintColor)
-      return `${resolved} ${hinting}${unit}`
-    })
-    ?.join(', ')
-}
+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 {
-    type: 'gradient stops',
+  return listSchema({
+    itemSchema: gradientStop,
     input: bindProps(GradientStopsField, { repeating }),
-    stringify: (value) => stringifyStops(value, '%'),
-    defaultValue: [
-      { color: 'black', hinting: 0 },
-      { color: 'transparent', hinting: 100 },
-    ],
-    regenerate({ previousValue }) {
-      const newStops = previousValue.map(() => randomInt(0, 101))
-      newStops.sort()
-      return newStops.map((hinting) => {
-        return {
-          hinting,
-          color: color().regenerate!({ previousValue: 'black' }),
-        }
-      })
-    },
-    validate: ((value: any) => {
-      if (!(value instanceof Array)) return false
-      return value.every((item) => {
-        return color().validate(item.color) && number().validate(item.hinting)
-      })
-    }) as any,
-  }
+    stringify: stringifyStops,
+  })
 }
 
 const directions = [
diff --git a/packages/gui/src/components/schemas/grid.tsx b/packages/gui/src/components/schemas/grid.tsx
index 4bad7468..451c1267 100644
--- a/packages/gui/src/components/schemas/grid.tsx
+++ b/packages/gui/src/components/schemas/grid.tsx
@@ -9,7 +9,11 @@ const inflexibleBreadth = joinSchemas([
   keyword(['min-content', 'max-content', 'auto']),
 ])
 const trackBreadth = joinSchemas([
-  lengthPercentage({ range: 'nonnegative', flex: true }),
+  lengthPercentage({
+    range: 'nonnegative',
+    flex: true,
+    defaultValue: { value: 1, unit: 'fr' },
+  }),
   keyword(['min-content', 'max-content', 'auto']),
 ])
 
@@ -25,21 +29,32 @@ const trackSize = joinSchemas([
   functionSchema('fit-content', lengthPercentage()),
 ])
 
-const trackList = joinSchemas([
-  trackSize,
-  functionSchema(
-    'repeat',
-    objectSchema({
-      fields: {
-        count: integer({ defaultValue: 1 }),
-        trackList: listSchema({ itemSchema: trackSize, separator: ' ' }),
-      },
-      separator: ', ',
-    })
-  ),
+const repeatTrackCount = joinSchemas([
+  integer({ defaultValue: 3 }),
+  keyword(['auto-fit', 'auto-fill']),
 ])
 
-export const gridAutoRow = listSchema({ itemSchema: trackSize, separator: ' ' })
+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: ' ',
diff --git a/packages/gui/src/components/schemas/joinSchemas.tsx b/packages/gui/src/components/schemas/joinSchemas.tsx
index 016784d3..50db79e8 100644
--- a/packages/gui/src/components/schemas/joinSchemas.tsx
+++ b/packages/gui/src/components/schemas/joinSchemas.tsx
@@ -4,12 +4,13 @@ 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 }: JoinSchemaOptions<S> = {}
+  { type, convert, defaultType, defaultValue }: JoinSchemaOptions<S> = {}
 ): DataTypeSchema<ExtractDataType<S>> {
   let variants = {}
 
@@ -27,6 +28,7 @@ export function joinSchemas<S extends DataTypeSchema<any>>(
     type,
     convert: convert as any,
     defaultType: defaultType as any,
+    defaultValue,
   })
 }
 
diff --git a/packages/gui/src/components/schemas/list.tsx b/packages/gui/src/components/schemas/list.tsx
index 162fee09..37936e23 100644
--- a/packages/gui/src/components/schemas/list.tsx
+++ b/packages/gui/src/components/schemas/list.tsx
@@ -1,25 +1,36 @@
 import { ComponentType } from 'react'
-import FieldArray from '../FieldArray'
+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[]> {
-  const stringify = (value: T[]) => {
-    const stringified = value.map((item) => itemSchema.stringify(item))
-    return stringified.join(separator)
+  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({ previousValue }: RegenOptions<T[]>) {
+  function regenerate({ theme, previousValue }: RegenOptions<T[]>) {
     return previousValue.map((value) => {
-      return itemSchema.regenerate?.({ previousValue: value }) ?? value
+      return itemSchema.regenerate?.({ theme, previousValue: value }) ?? value
     })
   }
 
@@ -28,13 +39,10 @@ export function listSchema<T>({
     stringify,
     defaultValue,
     input(props) {
-      return (
-        <FieldArray
-          {...props}
-          itemSchema={itemSchema}
-          // regenerate={regenerate}
-        />
-      )
+      if (Input) {
+        return <Input {...props} itemSchema={itemSchema} />
+      }
+      return <FieldArray {...props} itemSchema={itemSchema} addItem={addItem} />
     },
     regenerate,
     validate: ((value: any) => {
@@ -43,5 +51,24 @@ export function listSchema<T>({
       }
       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
index 1d51e998..d0426585 100644
--- a/packages/gui/src/components/schemas/margin.tsx
+++ b/packages/gui/src/components/schemas/margin.tsx
@@ -1,13 +1,13 @@
 import { boxSideSchema } from './box-side'
 import { joinSchemas } from './joinSchemas'
 import { keyword, lengthPercentage } from './primitives'
-import { theme } from './theme'
+import { themeScale } from './theme'
 import { tupleSchema } from './tuple'
 
 const marginItem = joinSchemas([
   lengthPercentage({ themeProperty: 'space' }),
   keyword(['auto']),
-  theme('space'),
+  themeScale('space'),
 ])
 
 export const marginBottom = marginItem
diff --git a/packages/gui/src/components/schemas/object.tsx b/packages/gui/src/components/schemas/object.tsx
index 654339e9..60a27171 100644
--- a/packages/gui/src/components/schemas/object.tsx
+++ b/packages/gui/src/components/schemas/object.tsx
@@ -1,4 +1,5 @@
 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'
@@ -12,6 +13,7 @@ interface CreateObject<T extends object> {
   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>({
@@ -21,18 +23,19 @@ export function objectSchema<T extends object>({
   separator = ' ',
   stringify: providedStringify,
   defaultValue: providedDefaultValue,
+  parse,
 }: CreateObject<T>): DataTypeSchema<T> {
-  function stringify(value: T) {
+  function stringify(value: T, ...args) {
     if (providedStringify) {
       const stringifiedFields = mapValues(fields, (schema, key: keyof T) => {
-        return schema.stringify(value[key])
+        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])
+        return fields[key].stringify(value[key], ...args)
       })
       .join(separator)
   }
@@ -41,9 +44,9 @@ export function objectSchema<T extends object>({
     ...providedDefaultValue,
   } as any // IDK why the typing doesn't work
 
-  function regenerate({ previousValue }: RegenOptions<T>): T {
+  function regenerate({ theme, previousValue }: RegenOptions<T>): T {
     return mapValues(previousValue, (value, key: keyof T) => {
-      return fields[key].regenerate?.({ previousValue: value }) ?? value
+      return fields[key].regenerate?.({ theme, previousValue: value }) ?? value
     }) as T
   }
   return {
@@ -56,9 +59,10 @@ export function objectSchema<T extends object>({
           sx={{
             display: 'grid',
             gap: 2,
-            borderLeft: '4px solid',
+            borderLeft: '1px solid',
             borderColor: 'border',
             pl: 2,
+            my: 2,
           }}
         >
           {keyOrder.map((key) => {
@@ -79,5 +83,6 @@ export function objectSchema<T extends object>({
         return schema.validate(value[key])
       })
     }) as any,
+    parse,
   }
 }
diff --git a/packages/gui/src/components/schemas/options.tsx b/packages/gui/src/components/schemas/options.tsx
index 81935cab..e02d55d0 100644
--- a/packages/gui/src/components/schemas/options.tsx
+++ b/packages/gui/src/components/schemas/options.tsx
@@ -7,6 +7,7 @@ interface CreateOptions<T extends Record<string, any>> {
   order?: (keyof T)[]
   convert?(oldValue: Unionize<T>[any], newType: keyof T): T | undefined
   defaultType?: keyof T
+  defaultValue?: any
 }
 
 /**
@@ -19,12 +20,10 @@ export function optionsSchema<T extends Record<string, any>>({
   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) {
-        console.log('invalid schema:', schema)
-      }
       if (schema.validate(value)) return type
     }
 
@@ -36,11 +35,10 @@ export function optionsSchema<T extends Record<string, any>>({
   }
   function regenerate({
     previousValue,
+    ...options
   }: RegenOptions<Unionize<T>>): Unionize<T> {
     const type = getType(previousValue)
-    const newValue = variants[type].regenerate?.({
-      previousValue: previousValue,
-    })
+    const newValue = variants[type].regenerate?.({ previousValue, ...options })
     return newValue ?? previousValue
   }
 
@@ -53,13 +51,7 @@ export function optionsSchema<T extends Record<string, any>>({
       // Render the select
       return (
         <div sx={{ display: 'flex' }}>
-          {InlineInput ? (
-            <InlineInput {...props} />
-          ) : (
-            <span sx={{ fontSize: 1 }}>
-              {variants[type].stringify(props.value)}
-            </span>
-          )}
+          {InlineInput && <InlineInput {...props} />}
           <Select.Root
             value={type.toString()}
             onValueChange={(newType) => {
@@ -96,17 +88,28 @@ export function optionsSchema<T extends Record<string, any>>({
       const type = getType(value)
       return !!variants[type].input
     },
-    stringify(value) {
+    stringify(value, ...args) {
       const type = getType(value)
-      return variants[type].stringify(value)
+      return variants[type].stringify(value, ...args)
     },
-    defaultValue: variants[defaultType].defaultValue,
+    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]
+    },
   }
 }
 
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/padding.tsx b/packages/gui/src/components/schemas/padding.tsx
index 094086a9..a609e819 100644
--- a/packages/gui/src/components/schemas/padding.tsx
+++ b/packages/gui/src/components/schemas/padding.tsx
@@ -1,12 +1,12 @@
 import { boxSideSchema } from './box-side'
 import { joinSchemas } from './joinSchemas'
 import { lengthPercentage } from './primitives'
-import { theme } from './theme'
+import { themeScale } from './theme'
 import { tupleSchema } from './tuple'
 
 const paddingItem = joinSchemas([
   lengthPercentage({ range: 'nonnegative' }),
-  theme('space'),
+  themeScale('space'),
 ])
 
 export const paddingBottom = paddingItem
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/primitives.tsx b/packages/gui/src/components/schemas/primitives.tsx
index f582f4e4..8089d423 100644
--- a/packages/gui/src/components/schemas/primitives.tsx
+++ b/packages/gui/src/components/schemas/primitives.tsx
@@ -1,7 +1,6 @@
-import { compact } from 'lodash-es'
+import { compact, isInteger, toNumber } from 'lodash-es'
 import { bindProps } from '../../lib/components'
 import { choose, randomStep } from '../../lib/random'
-import { stringifyUnit } from '../../lib/stringify'
 import { randomInt } from '../../lib/util'
 import {
   CSSUnitValue,
@@ -31,17 +30,35 @@ export function percentage({
 
 export function number({
   defaultValue = 0,
-}: { defaultValue?: number } = {}): DataTypeSchema<number> {
+  range,
+  regenRange = [0, 2],
+  stringify = (x) => x.toString(),
+}: {
+  defaultValue?: number
+  range?: 'nonnegative'
+  regenRange?: [number, number]
+  stringify?(x: number): string
+} = {}): DataTypeSchema<number> {
   function regenerate() {
-    return randomStep(0, 2, 0.1)
+    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, regenerate),
-    stringify: (x: number) => x.toString(),
+    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]
+    },
   }
 }
 
@@ -135,6 +152,14 @@ export function integer({
     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]
+    },
   }
 }
 
@@ -144,7 +169,7 @@ export function ident({
   defaultValue?: string
 } = {}): DataTypeSchema<string> {
   return {
-    type: 'identifier',
+    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
@@ -152,6 +177,13 @@ export function ident({
     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]
+    },
   }
 }
 
@@ -166,6 +198,15 @@ export function string({
     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]
+    },
   }
 }
 
@@ -198,16 +239,28 @@ export function keyword<T extends string>(
     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: () => <div sx={{ fontSize: 1 }}>{value}</div>,
+    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/responsive.tsx b/packages/gui/src/components/schemas/responsive.tsx
index 34519572..6530934b 100644
--- a/packages/gui/src/components/schemas/responsive.tsx
+++ b/packages/gui/src/components/schemas/responsive.tsx
@@ -10,9 +10,9 @@ export function responsive<T>(
     type: 'responsive',
     inlineInput({ value }) {
       return (
-        <div sx={{ fontSize: 1 }}>
+        <pre sx={{ fontSize: 0 }}>
           {value.values.map((item) => itemSchema.stringify(item)).join(', ')}
-        </div>
+        </pre>
       )
     },
     input({ value, onChange }) {
@@ -38,18 +38,20 @@ export function responsive<T>(
       if (!(value.values instanceof Array)) return false
       return value.values.map(itemSchema.validate)
     }) as any,
-    regenerate({ previousValue }) {
+    regenerate({ theme, previousValue }) {
       return {
         ...previousValue,
         values: previousValue.values.map(
           (value) =>
-            itemSchema.regenerate?.({ previousValue: value }) ??
+            itemSchema.regenerate?.({ theme, previousValue: value }) ??
             itemSchema.defaultValue
         ),
       }
     },
-    stringify(value) {
-      return (value as any).values.map(itemSchema.stringify)
+    stringify(value, ...args) {
+      return (value as any).values.map((val: T) =>
+        itemSchema.stringify(val, ...args)
+      )
     },
   }
 }
diff --git a/packages/gui/src/components/schemas/scroll-margin.tsx b/packages/gui/src/components/schemas/scroll-margin.tsx
index 135d404f..75496521 100644
--- a/packages/gui/src/components/schemas/scroll-margin.tsx
+++ b/packages/gui/src/components/schemas/scroll-margin.tsx
@@ -1,13 +1,13 @@
 import { boxSideSchema } from './box-side'
 import { joinSchemas } from './joinSchemas'
 import { keyword, lengthPercentage } from './primitives'
-import { theme } from './theme'
+import { themeScale } from './theme'
 import { tupleSchema } from './tuple'
 
 const scrollMarginItem = joinSchemas([
   lengthPercentage(),
   keyword(['auto']),
-  theme('space'),
+  themeScale('space'),
 ])
 
 export const scrollMarginBottom = scrollMarginItem
diff --git a/packages/gui/src/components/schemas/scroll-padding.tsx b/packages/gui/src/components/schemas/scroll-padding.tsx
index 1f83a9de..84fdf63d 100644
--- a/packages/gui/src/components/schemas/scroll-padding.tsx
+++ b/packages/gui/src/components/schemas/scroll-padding.tsx
@@ -1,13 +1,13 @@
 import { boxSideSchema } from './box-side'
 import { joinSchemas } from './joinSchemas'
 import { keyword, lengthPercentage } from './primitives'
-import { theme } from './theme'
+import { themeScale } from './theme'
 import { tupleSchema } from './tuple'
 
 const scrollPaddingItem = joinSchemas([
   lengthPercentage(),
   keyword(['auto']),
-  theme('space'),
+  themeScale('space'),
 ])
 
 export const scrollPaddingBottom = scrollPaddingItem
diff --git a/packages/gui/src/components/schemas/shorthand.ts b/packages/gui/src/components/schemas/shorthand.ts
index edab7630..5c19a3e6 100644
--- a/packages/gui/src/components/schemas/shorthand.ts
+++ b/packages/gui/src/components/schemas/shorthand.ts
@@ -1,3 +1,4 @@
+import { isNil } from 'lodash-es'
 import { objectSchema } from './object'
 import { DataTypeSchema } from './types'
 
@@ -15,8 +16,6 @@ interface CreateShorthand<T extends object> {
 /**
  * Used for objects representing CSS shorthands, like `background` or `border`.
  * These consist of one or more optional properties.
- *
- * When certain properties are
  */
 export function shorthandSchema<T extends object>({
   type,
@@ -38,5 +37,38 @@ export function shorthandSchema<T extends object>({
         })
         .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/theme.tsx b/packages/gui/src/components/schemas/theme.tsx
index 2de520f4..2f5dd882 100644
--- a/packages/gui/src/components/schemas/theme.tsx
+++ b/packages/gui/src/components/schemas/theme.tsx
@@ -1,11 +1,12 @@
-import { useTheme } from '@emotion/react'
-import { get, range } from 'lodash-es'
-import { ThemeValue } from '../../types/css'
+import { useTheme } from '../providers/ThemeContext'
+import { get, range, sample } from 'lodash-es'
+import { ThemeNamedValue, ThemeValue } from '../../types/css'
 import { SelectInput } from '../inputs/SelectInput'
-import { length } from './primitives'
 import { DataTypeSchema } from './types'
+import { joinPath } from '../providers/util'
+import { randomInt } from '../../lib/random'
 
-export function theme(path: string): DataTypeSchema<ThemeValue> {
+export function themeScale(path: string): DataTypeSchema<ThemeValue> {
   return {
     type: 'theme',
     validate: ((value: any) => {
@@ -17,27 +18,90 @@ export function theme(path: string): DataTypeSchema<ThemeValue> {
       )
     }) as any,
     stringify(value, theme) {
-      return get(theme, `${value.path}.${value.index}`)
+      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
+      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 + 1}`}
+          value={`${props.value.index}`}
           onChange={(value) =>
             props.onChange({
               ...props.value,
-              index: +value - 1,
+              index: +value,
             })
           }
-          options={range(1, numOptions + 1).map((x) => x.toString())}
+          options={range(0, numOptions).map((x) => x.toString())}
+          decorateText={decorateText}
         />
       )
-      // return null
     },
     // 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/topLevel.ts b/packages/gui/src/components/schemas/topLevel.ts
index 1c543402..83d8122c 100644
--- a/packages/gui/src/components/schemas/topLevel.ts
+++ b/packages/gui/src/components/schemas/topLevel.ts
@@ -4,8 +4,10 @@ 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 (property === 'fontFamily') {
+  if (NO_GLOBAL_SCHEMA_PROPERTIES.includes(property)) {
     return schema
   }
   const withGlobal = joinSchemas([schema, global])
diff --git a/packages/gui/src/components/schemas/transform.tsx b/packages/gui/src/components/schemas/transform.tsx
index b5b4dbdf..cf0c911e 100644
--- a/packages/gui/src/components/schemas/transform.tsx
+++ b/packages/gui/src/components/schemas/transform.tsx
@@ -5,6 +5,8 @@ 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',
@@ -17,7 +19,7 @@ const translateX = functionSchema('translateX', lengthPercentage())
 const translateY = functionSchema('translateY', lengthPercentage())
 const translateZ = functionSchema('translateZ', lengthPercentage())
 const translate3d = functionSchema(
-  'trnaslate3d',
+  'translate3d',
   tupleSchema({
     // TODO 'z' axis should be  `length` only
     itemSchema: lengthPercentage(),
@@ -26,20 +28,21 @@ const translate3d = functionSchema(
   })
 )
 
+const scaleNumber = number({ defaultValue: 1 })
 const scale = functionSchema(
   'scale',
   tupleSchema({
-    itemSchema: number(),
+    itemSchema: scaleNumber,
     labels: ['x', 'y'],
   })
 )
-const scaleX = functionSchema('scaleX', number())
-const scaleY = functionSchema('scaleY', number())
-const scaleZ = functionSchema('scaleZ', number())
+const scaleX = functionSchema('scaleX', scaleNumber)
+const scaleY = functionSchema('scaleY', scaleNumber)
+const scaleZ = functionSchema('scaleZ', scaleNumber)
 const scale3d = functionSchema(
   'scale3d',
   tupleSchema({
-    itemSchema: number(),
+    itemSchema: scaleNumber,
     labels: ['x', 'y', 'z'],
     linkable: false,
   })
@@ -69,6 +72,7 @@ const skew = functionSchema(
   tupleSchema({
     itemSchema: angle(),
     labels: ['x', 'y'],
+    separator: ', ',
   })
 )
 const skewX = functionSchema('skewX', angle())
@@ -77,19 +81,54 @@ 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(),
-    labels: ['a', 'b', 'c', 'd', 'tx', 'ty'],
+    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: number(),
+    itemSchema: matrixNumber,
+    separator: ',',
     labels: [
       'a1',
       'b1',
@@ -108,7 +147,35 @@ const matrix3d = functionSchema(
       '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>
+      )
+    },
   })
 )
 
diff --git a/packages/gui/src/components/schemas/tuple.tsx b/packages/gui/src/components/schemas/tuple.tsx
index 08ce90c4..4f3c3b6e 100644
--- a/packages/gui/src/components/schemas/tuple.tsx
+++ b/packages/gui/src/components/schemas/tuple.tsx
@@ -1,14 +1,19 @@
-import { getInputProps } from '../../lib/util'
 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[]
 }
 
 /**
@@ -21,6 +26,8 @@ export function tupleSchema<T>({
   labels,
   linkable = true,
   separator = ' ',
+  input: CustomInput,
+  defaultValue: providedDefault,
 }: CreateTupleSchema<T>): DataTypeSchema<T[]> {
   function isLinked(value: T[]) {
     return value.length <= 1
@@ -30,22 +37,24 @@ export function tupleSchema<T>({
     ? [itemSchema.defaultValue]
     : labels.map(() => itemSchema.defaultValue)
 
-  function stringify(value: T[]) {
+  function stringify(value: T[], ...args: any[]) {
     return (
-      value?.map((item) => itemSchema.stringify(item)).join(separator) ?? null
+      value
+        ?.map((item) => itemSchema.stringify(item, ...args))
+        .join(separator) ?? null
     )
   }
 
-  function regenerate({ previousValue }: RegenOptions<T[]>) {
+  function regenerate({ theme, previousValue }: RegenOptions<T[]>) {
     return previousValue.map(
-      (item) => itemSchema.regenerate?.({ previousValue: item }) ?? item
+      (item) => itemSchema.regenerate?.({ theme, previousValue: item }) ?? item
     )
   }
 
   return {
     type: `${itemSchema.type} list`,
     stringify,
-    defaultValue,
+    defaultValue: providedDefault ?? defaultValue,
     regenerate,
     validate: ((value: any) => {
       if (!(value instanceof Array)) {
@@ -54,9 +63,11 @@ export function tupleSchema<T>({
       return value.every((item) => itemSchema.validate(item))
     }) as any,
     input(props) {
+      if (CustomInput) {
+        return <CustomInput {...props} />
+      }
       const { value, onChange } = props
       const linked = isLinked(value)
-      // const ItemInput = itemSchema.input
       return (
         <div sx={{ display: 'flex', gap: 2 }}>
           {linkable && (
@@ -75,9 +86,9 @@ export function tupleSchema<T>({
               pressed={linked}
               onPressedChange={(pressed) => {
                 if (pressed) {
-                  props.onChange([value[0]])
+                  onChange([value[0]])
                 } else {
-                  props.onChange(labels.map(() => value[0]))
+                  onChange(labels.map(() => value[0]))
                 }
               }}
             >
@@ -89,7 +100,10 @@ export function tupleSchema<T>({
               <SchemaInput
                 key={i}
                 schema={itemSchema}
-                {...getInputProps(props, i)}
+                value={value[i]}
+                onChange={(newValue) => {
+                  onChange(replace(value, i, newValue))
+                }}
                 label=""
               />
             )
diff --git a/packages/gui/src/components/schemas/types.ts b/packages/gui/src/components/schemas/types.ts
index ea3f0f58..8d414129 100644
--- a/packages/gui/src/components/schemas/types.ts
+++ b/packages/gui/src/components/schemas/types.ts
@@ -1,4 +1,5 @@
 import { ComponentType } from 'react'
+import { Token } from '../../lib/parse'
 import { EditorPropsWithLabel } from '../../types/editor'
 import { Theme } from '../../types/theme'
 
@@ -21,10 +22,20 @@ export interface DataTypeSchema<T> {
   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
index 865fd3dc..60c0e17f 100644
--- a/packages/gui/src/components/schemas/url.ts
+++ b/packages/gui/src/components/schemas/url.ts
@@ -3,5 +3,5 @@ import { string } from './primitives'
 
 export const url = functionSchema(
   'url',
-  string({ defaultValue: 'https://source.unsplash.com/random' })
+  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
index 588e8c48..3ecd21ee 100644
--- a/packages/gui/src/components/ui/InputHeader.tsx
+++ b/packages/gui/src/components/ui/InputHeader.tsx
@@ -1,16 +1,15 @@
 import { ReactNode } from 'react'
-import { ChevronDown, ChevronUp, RefreshCw, X } from 'react-feather'
+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
-  reorder?: {
-    onMoveUp?(): void
-    onMoveDown?(): void
-  }
+  onDrag?(): void
+  onDragEnd?(): void
 }
 
 export function InputHeader({
@@ -19,55 +18,51 @@ export function InputHeader({
   value,
   onChange,
   onRemove,
+  onDrag,
+  onDragEnd,
   regenerate,
-  reorder,
+  ruleset,
+  property,
 }: Props) {
+  const theme = useTheme()
   return (
     <div
       sx={{
         display: 'flex',
-        gap: 1,
         alignItems: 'center',
       }}
     >
-      {label && <Label>{label}</Label>}
+      {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', display: 'flex', gap: 1, alignItems: 'center' }}>
+      <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"
+            title="Regenerate"
             sx={{ transition: 'opacity 150ms' }}
             onClick={() => {
-              onChange(regenerate({ previousValue: value }))
+              onChange(
+                regenerate({ theme, previousValue: value, ruleset, property })
+              )
             }}
           >
-            <RefreshCw size={12} />
+            <RefreshCw size={15} strokeWidth={2} />
           </IconButton>
         )}
         {onRemove && <DeleteButton onRemove={onRemove} />}
       </div>
-      {reorder && (
-        <div
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifySelf: 'right',
-            alignSelf: 'center',
-            gap: '-0.5rem',
-          }}
-        >
-          <IconButton disabled={!reorder.onMoveUp} onClick={reorder.onMoveUp}>
-            <ChevronUp size={16} />
-          </IconButton>
-          <IconButton
-            disabled={!reorder.onMoveDown}
-            onClick={reorder.onMoveDown}
-          >
-            <ChevronDown size={16} />
-          </IconButton>
-        </div>
-      )}
     </div>
   )
 }
@@ -78,7 +73,7 @@ interface DeleteButtonProps {
 export const DeleteButton = ({ onRemove }: DeleteButtonProps) => {
   return (
     <IconButton onClick={() => onRemove()}>
-      <X size={14} strokeWidth={3} color="currentColor" />
+      <X size={16} strokeWidth={3} color="currentColor" sx={{ display: 'block' }}/>
     </IconButton>
   )
 }
diff --git a/packages/gui/src/components/ui/dropdowns/EditorDropdown.tsx b/packages/gui/src/components/ui/dropdowns/EditorDropdown.tsx
index 61c1361f..72499d84 100644
--- a/packages/gui/src/components/ui/dropdowns/EditorDropdown.tsx
+++ b/packages/gui/src/components/ui/dropdowns/EditorDropdown.tsx
@@ -1,6 +1,7 @@
 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
@@ -11,14 +12,14 @@ export const EditorDropdown = ({ onClearStyles }: EditorDropdownProps) => {
       <DropdownMenu.Trigger
         sx={{
           all: 'unset',
-          px: 3,
           lineHeight: 1,
           position: 'relative',
-          top: '1px',
           color: 'muted',
         }}
       >
-        <MoreVertical size={12} />
+        <IconButton sx={{ ml: 2 }}>
+          <MoreVertical size={16} />
+        </IconButton>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content sx={DROPDOWN_STYLES}>
         <DropdownMenu.Item sx={DROPDOWN_ITEM_STYLES} onClick={onClearStyles}>
diff --git a/packages/gui/src/components/ui/dropdowns/FieldsetDropdown.tsx b/packages/gui/src/components/ui/dropdowns/FieldsetDropdown.tsx
index c82908df..643f4cc8 100644
--- a/packages/gui/src/components/ui/dropdowns/FieldsetDropdown.tsx
+++ b/packages/gui/src/components/ui/dropdowns/FieldsetDropdown.tsx
@@ -10,15 +10,29 @@ export const FieldsetDropdown = ({ onRemove }: FieldsetDropdownProps) => {
     <DropdownMenu.Root>
       <DropdownMenu.Trigger
         sx={{
-          all: 'unset',
-          px: 3,
-          lineHeight: 1,
-          position: 'relative',
-          top: '1px',
+          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={12} />
+        <MoreVertical size={15} strokeWidth={2}  />
       </DropdownMenu.Trigger>
       <DropdownMenu.Content sx={DROPDOWN_STYLES}>
         <DropdownMenu.Item sx={DROPDOWN_ITEM_STYLES} onClick={onRemove}>
diff --git a/packages/gui/src/components/ui/dropdowns/NodeEditorDropdown.tsx b/packages/gui/src/components/ui/dropdowns/NodeEditorDropdown.tsx
index 042581cd..ae1febe6 100644
--- a/packages/gui/src/components/ui/dropdowns/NodeEditorDropdown.tsx
+++ b/packages/gui/src/components/ui/dropdowns/NodeEditorDropdown.tsx
@@ -1,6 +1,7 @@
 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
@@ -15,19 +16,33 @@ export const NodeEditorDropdown = ({
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger
-        sx={{
-          all: 'unset',
-          px: 3,
-          lineHeight: 1,
-          position: 'relative',
-          top: '1px',
-          color: 'muted',
-        }}
+      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={12} />
+        <MoreVertical size={15} />
       </DropdownMenu.Trigger>
       <DropdownMenu.Content sx={DROPDOWN_STYLES}>
-        <DropdownMenu.Item sx={{ display: 'none' }} onClick={onDuplicate}>
+        <DropdownMenu.Item sx={DROPDOWN_ITEM_STYLES} onClick={onDuplicate}>
           <div
             sx={{
               display: 'flex',
@@ -45,7 +60,8 @@ export const NodeEditorDropdown = ({
               alignItems: 'center',
             }}
           >
-            <Plus size={12} sx={{ color: 'muted', mr: 2 }} /> <span>Add parent element</span>
+            <Plus size={12} sx={{ color: 'muted', mr: 2 }} />{' '}
+            <span>Add parent element</span>
           </div>
         </DropdownMenu.Item>
         <DropdownMenu.Item sx={DROPDOWN_ITEM_STYLES} onClick={onRemove}>
diff --git a/packages/gui/src/data/attributes.ts b/packages/gui/src/data/attributes.ts
index fd188ef1..7d5521b7 100644
--- a/packages/gui/src/data/attributes.ts
+++ b/packages/gui/src/data/attributes.ts
@@ -1,17 +1,45 @@
-const GLOBAL_ATTRIBUTES = ['class', 'id', 'title',]
+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' 
+    ...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: [
@@ -28,50 +56,208 @@ export const ATTRIBUTE_MAP: Record<string, string[]> = {
   b: GLOBAL_ATTRIBUTES,
   bdi: GLOBAL_ATTRIBUTES,
   bdo: GLOBAL_ATTRIBUTES,
-  blockquote: [ ...GLOBAL_ATTRIBUTES, 'cite' ],
+  blockquote: [...GLOBAL_ATTRIBUTES, 'cite'],
   br: GLOBAL_ATTRIBUTES,
   button: [
-    'type', 
-    'disabled', 
-    'name', 
-    'value', 
+    'type',
+    'disabled',
+    'name',
+    'value',
     'autofocus',
-    'form', 
-    'formaction', 
+    'form',
+    'formaction',
     'formenctype',
     'formnovalidate',
     'formtarget',
-    'formmethod', 
+    'formmethod',
     'step',
-    'formnovalidate', 
-    'formtarget', 
+    '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',
-  ],
+  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' ],
+  dialog: [...GLOBAL_ATTRIBUTES, 'open'],
   div: GLOBAL_ATTRIBUTES,
   dl: GLOBAL_ATTRIBUTES,
   dt: GLOBAL_ATTRIBUTES,
   em: GLOBAL_ATTRIBUTES,
-  fieldset: [
+  feBlend: [
     ...GLOBAL_ATTRIBUTES,
-    'disabled',
-    'form',
-    'name',
+    ...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',
   ],
-  figcaption: GLOBAL_ATTRIBUTES, 
+  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: [
@@ -96,10 +282,10 @@ export const ATTRIBUTE_MAP: Record<string, string[]> = {
   hr: GLOBAL_ATTRIBUTES,
   i: GLOBAL_ATTRIBUTES,
   img: [
-    ...GLOBAL_ATTRIBUTES, 
-    'alt', 
-    'src', 
-    'srcset', 
+    ...GLOBAL_ATTRIBUTES,
+    'alt',
+    'src',
+    'srcset',
     'width',
     'height',
     'sizes',
@@ -111,16 +297,16 @@ export const ATTRIBUTE_MAP: Record<string, string[]> = {
     'crossorigin',
   ],
   input: [
-    ...GLOBAL_ATTRIBUTES, 
+    ...GLOBAL_ATTRIBUTES,
     // TODO: Adjust attribute list based on type value
-    'type',  
+    'type',
     'value', // all
-    'name',  // all
-    'disabled',  // almost all
+    'name', // all
+    'disabled', // almost all
     'required', // almost all
-    'checked', // radio, checkbox 
+    'checked', // radio, checkbox
     'autocomplete', // all
-    'dirname',  // text, search
+    'dirname', // text, search
     'form', // all
     'formaction', // image, submit
     'formenctype', // image, submit
@@ -129,10 +315,10 @@ export const ATTRIBUTE_MAP: Record<string, string[]> = {
     'formtarget', // image, submit
     'alt', // image
     'src', // image
-    'list', // almost all 
+    'list', // almost all
     'max', // numeric types
     'maxlength', // password, search, tel, text, url
-    'min', // numeric types 
+    'min', // numeric types
     'minlength', // password, search, tel, text, url
     'step', // numeric types
     'capture', // file
@@ -144,17 +330,11 @@ export const ATTRIBUTE_MAP: Record<string, string[]> = {
     'size', // email, password, tel, text, url
   ],
   kbd: GLOBAL_ATTRIBUTES,
-  label: [
-    ...GLOBAL_ATTRIBUTES,
-    'for',
-  ],
+  label: [...GLOBAL_ATTRIBUTES, 'for'],
   legend: GLOBAL_ATTRIBUTES,
-  li: [
-    ...GLOBAL_ATTRIBUTES,
-    'value',
-    'type',
-  ],
+  li: [...GLOBAL_ATTRIBUTES, 'value', 'type'],
   main: GLOBAL_ATTRIBUTES,
+  map: [...GLOBAL_ATTRIBUTES, 'name'],
   mark: GLOBAL_ATTRIBUTES,
   menu: GLOBAL_ATTRIBUTES,
   menuitem: GLOBAL_ATTRIBUTES,
@@ -169,27 +349,15 @@ export const ATTRIBUTE_MAP: Record<string, string[]> = {
   ],
   nav: GLOBAL_ATTRIBUTES,
   noscript: GLOBAL_ATTRIBUTES,
-  ol: [
-    ...GLOBAL_ATTRIBUTES,
-    'reversed',
-    'start',
-    'type',
-  ],
+  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',
-  ],
+  progress: [...GLOBAL_ATTRIBUTES, 'max', 'value'],
+  q: [...GLOBAL_ATTRIBUTES, 'cite'],
   rp: GLOBAL_ATTRIBUTES,
   rt: GLOBAL_ATTRIBUTES,
   rtc: GLOBAL_ATTRIBUTES,
@@ -197,10 +365,21 @@ export const ATTRIBUTE_MAP: Record<string, string[]> = {
   s: GLOBAL_ATTRIBUTES,
   samp: GLOBAL_ATTRIBUTES,
   section: GLOBAL_ATTRIBUTES,
-  slot: [
+  set: [
     ...GLOBAL_ATTRIBUTES,
-    'name',
+    'attributeName',
+    'to',
+    'begin',
+    'dur',
+    'end',
+    'min',
+    'max',
+    'restart',
+    'repeatCount',
+    'repeatDur',
+    'fill',
   ],
+  slot: [...GLOBAL_ATTRIBUTES, 'name'],
   small: GLOBAL_ATTRIBUTES,
   source: [
     ...GLOBAL_ATTRIBUTES,
@@ -218,12 +397,7 @@ export const ATTRIBUTE_MAP: Record<string, string[]> = {
   sup: GLOBAL_ATTRIBUTES,
   table: GLOBAL_ATTRIBUTES,
   tbody: GLOBAL_ATTRIBUTES,
-  td: [
-    ...GLOBAL_ATTRIBUTES,
-    'colspan',
-    'headers',
-    'rowspan',
-  ],
+  td: [...GLOBAL_ATTRIBUTES, 'colspan', 'headers', 'rowspan'],
   template: GLOBAL_ATTRIBUTES,
   textarea: [
     ...GLOBAL_ATTRIBUTES,
@@ -245,19 +419,9 @@ export const ATTRIBUTE_MAP: Record<string, string[]> = {
   tfoot: GLOBAL_ATTRIBUTES,
   th: GLOBAL_ATTRIBUTES,
   thead: GLOBAL_ATTRIBUTES,
-  time: [
-    ...GLOBAL_ATTRIBUTES,
-    'datetime',
-  ],
+  time: [...GLOBAL_ATTRIBUTES, 'datetime'],
   tr: GLOBAL_ATTRIBUTES,
-  track: [
-    ...GLOBAL_ATTRIBUTES,
-    'default',
-    'kind',
-    'label',
-    'src',
-    'srclang',
-  ],
+  track: [...GLOBAL_ATTRIBUTES, 'default', 'kind', 'label', 'src', 'srclang'],
   u: GLOBAL_ATTRIBUTES,
   ul: GLOBAL_ATTRIBUTES,
   var: GLOBAL_ATTRIBUTES,
@@ -280,4 +444,91 @@ export const ATTRIBUTE_MAP: Record<string, string[]> = {
     '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 6fd9dca2..0216be7f 100644
--- a/packages/gui/src/data/properties.ts
+++ b/packages/gui/src/data/properties.ts
@@ -25,6 +25,7 @@ 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'
@@ -35,10 +36,12 @@ 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'
@@ -59,11 +62,13 @@ import {
 } from '../components/schemas/primitives'
 import { DataTypeSchema } from '../components/schemas/types'
 import { joinSchemas } from '../components/schemas/joinSchemas'
-import { theme } from '../components/schemas/theme'
+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 = {
   input: PrimitiveType | ComponentType<EditorPropsWithLabel<any>>
@@ -94,20 +99,37 @@ const primitiveMap = {
 }
 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') {
-      // const { keywords = [], ...rest } = propertyData
       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([
-          keywords && keyword(keywords),
           schema,
-          themeProperty && theme(themeProperty),
-        ])
+          keywords && keyword(keywords),
+          themeProperty && themeSchema(themeProperty),
+        ]),
+        { defaultValue: propertyData.defaultValue }
       )
     }
   }
@@ -120,57 +142,6 @@ export const rawProperties: Record<string, any> = {
     defaultValue: 'tomato',
     keywords: ['auto', 'currentcolor', 'transparent'],
   },
-  alignContent: {
-    input: 'keyword',
-
-    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: {
-    input: 'keyword',
-
-    keywords: [
-      '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',
-    ],
-    defaultValue: 'center',
-  },
   alignmentBaseline: {
     // Can be used with tspan tref altGlyph and textPath SVG elements
     input: 'keyword',
@@ -185,28 +156,6 @@ export const rawProperties: Record<string, any> = {
       'text-top',
     ],
   },
-  alignSelf: {
-    input: 'keyword',
-
-    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',
-    ],
-  },
   all: {
     input: 'keyword',
     keywords: [],
@@ -266,7 +215,7 @@ export const rawProperties: Record<string, any> = {
     input: 'length',
     percentage: true,
     keywords: ['max-content', 'min-content', 'auto'],
-    defaultValue: { value: 'auto', unit: 'keyword' },
+    defaultValue: 'auto',
     themeProperty: 'sizes',
   },
   borderCollapse: {
@@ -518,26 +467,7 @@ export const rawProperties: Record<string, any> = {
     defaultValue: '#6465ff',
   },
   filter,
-  flexBasis: {
-    input: '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: { value: 'auto', unit: 'keyword' },
-    themeProperty: 'sizes',
-  },
+  ...flexProperties,
   flexDirection: {
     input: 'keyword',
 
@@ -566,16 +496,6 @@ export const rawProperties: Record<string, any> = {
     ],
     defaultValue: 'row wrap',
   },
-  flexGrow: {
-    input: 'number',
-    range: { number: [0, Infinity] },
-    defaultValue: 0,
-  },
-  flexShrink: {
-    input: 'number',
-    range: { number: [0, Infinity] },
-    defaultValue: 1,
-  },
   flexWrap: {
     input: 'keyword',
 
@@ -624,6 +544,7 @@ export const rawProperties: Record<string, any> = {
   },
   fontFamily: {
     input: FontFamily,
+    stringify: stringifyFontFamily,
     dependantProperties: ['fontStyle', 'fontVariationSettings'],
     defaultValue: 'Inter',
     themeProperty: 'fonts',
@@ -823,15 +744,18 @@ export const rawProperties: Record<string, any> = {
     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: {
@@ -869,71 +793,6 @@ export const rawProperties: Record<string, any> = {
     input: 'keyword',
     keywords: ['auto', 'isolate'],
   },
-  justifyContent: {
-    input: 'keyword',
-
-    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: {
-    input: '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: {
-    input: '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',
-  },
   letterSpacing: {
     input: 'length',
     percentage: true,
@@ -1124,43 +983,7 @@ export const rawProperties: Record<string, any> = {
     range: { number: [1, 10] },
     defaultValue: 2,
   },
-  outlineColor: {
-    input: 'color',
-    keywords: ['invert'],
-    defaultValue: '#6465ff',
-  },
-  outlineOffset: {
-    input: 'length',
-    percentage: true,
-    defaultValue: {
-      value: 4,
-      unit: 'px',
-    },
-  },
-  outlineStyle: {
-    input: 'keyword',
-    keywords: [
-      'none',
-      'dotted',
-      'dashed',
-      'solid',
-      'double',
-      'groove',
-      'ridge',
-      'inset',
-      'outset',
-    ],
-    defaultValue: 'solid',
-  },
-  outlineWidth: {
-    input: 'length',
-    percentage: true,
-    keywords: ['thin', 'medium', 'thick'],
-    defaultValue: {
-      value: 2,
-      unit: 'px',
-    },
-  },
+  ...outlineProperties,
   ...overflowProperties,
   overflowAnchor: {
     input: 'keyword',
@@ -1180,48 +1003,7 @@ export const rawProperties: Record<string, any> = {
   ...overscrollProperties,
   ...paddingProperties,
   ...perspectiveProperties,
-  placeItems: {
-    input: '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: {
-    input: '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',
-  },
+  ...placeProperties,
   pointerEvents: {
     input: 'keyword',
     keywords: [
@@ -1249,6 +1031,7 @@ export const rawProperties: Record<string, any> = {
     keywords: ['economy', 'exact'],
     defaultValue: 'exact',
   },
+  quotes,
   resize: {
     input: 'keyword',
     keywords: ['none', 'both', 'horizontal', 'vertical', 'block', 'inline'],
@@ -1538,10 +1321,7 @@ export const rawProperties: Record<string, any> = {
       'top',
       'bottom',
     ],
-    defaultValue: {
-      value: 'baseline',
-      unit: 'keyword',
-    },
+    defaultValue: 'baseline',
   },
   visibility: {
     input: 'keyword',
@@ -1571,8 +1351,8 @@ export const rawProperties: Record<string, any> = {
     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],
@@ -1631,7 +1411,7 @@ export const rawProperties: Record<string, any> = {
   zIndex: {
     input: 'integer',
     keywords: ['auto'],
-    defaultValue: 'auto',
+    defaultValue: 1,
   },
 }
 
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 e07a8057..210c21bd 100644
--- a/packages/gui/src/index.ts
+++ b/packages/gui/src/index.ts
@@ -18,7 +18,7 @@ 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'
 
@@ -26,6 +26,7 @@ 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
index f4ad94f9..dc5a4c9e 100644
--- a/packages/gui/src/lib/array.ts
+++ b/packages/gui/src/lib/array.ts
@@ -13,8 +13,29 @@ export function remove<T>(array: T[], index: number) {
   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/emotion.ts b/packages/gui/src/lib/codegen/emotion.ts
index 6f67d84c..6e1cbcbf 100644
--- a/packages/gui/src/lib/codegen/emotion.ts
+++ b/packages/gui/src/lib/codegen/emotion.ts
@@ -2,29 +2,33 @@ 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'
+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 = (tagName: string, props: any, children?: any[]) => {
-  const newProps = toReactProps(props)
+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)
-  }
+    if (newProps.style) {
+      const style = newProps.style
+      delete newProps.style
+      newProps.css = toCSSObject(style, theme)
+    }
 
-  return { tagName, props: newProps, children }
-}
+    return { tagName, props: newProps, children }
+  }
 
-export const emotion = async (node: HtmlNode) => {
-  const root = editorSchemaToHast(node)
-  const functionBody = stringifyHastNode(toH(h, root))
+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() {
+  export default function Component(${getPropSyntax(node)}) {
     return (
       ${functionBody}
     )
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/html.ts b/packages/gui/src/lib/codegen/html.ts
index 4600fa08..10dd729c 100644
--- a/packages/gui/src/lib/codegen/html.ts
+++ b/packages/gui/src/lib/codegen/html.ts
@@ -3,6 +3,7 @@ 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, {
@@ -12,13 +13,13 @@ export const unstyledHtml = async (node: HtmlNode) => {
   return format('html', output)
 }
 
-export const html = async (node: HtmlNode) => {
+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 }),
+    body: JSON.stringify({ html: node, theme }),
   })
 
   const html = await res.text()
diff --git a/packages/gui/src/lib/codegen/index.ts b/packages/gui/src/lib/codegen/index.ts
index 88ca0926..b43ef9a9 100644
--- a/packages/gui/src/lib/codegen/index.ts
+++ b/packages/gui/src/lib/codegen/index.ts
@@ -5,3 +5,5 @@ 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
index 365124d4..c7aebd5e 100644
--- a/packages/gui/src/lib/codegen/react.ts
+++ b/packages/gui/src/lib/codegen/react.ts
@@ -3,8 +3,9 @@ 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'
+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)
@@ -12,8 +13,11 @@ const h = (tagName: string, props: any, children?: any[]) => {
   return { tagName, props: newProps, children }
 }
 
-export const react = async (node: HtmlNode): Promise<string> => {
-  const html = await toHtml(node)
+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))
 
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.ts b/packages/gui/src/lib/codegen/stringify-hast-node-as-jsx.ts
similarity index 100%
rename from packages/gui/src/lib/codegen/stringify-hast-node.ts
rename to packages/gui/src/lib/codegen/stringify-hast-node-as-jsx.ts
diff --git a/packages/gui/src/lib/codegen/styled-jsx.ts b/packages/gui/src/lib/codegen/styled-jsx.ts
index 500716bd..f80d064a 100644
--- a/packages/gui/src/lib/codegen/styled-jsx.ts
+++ b/packages/gui/src/lib/codegen/styled-jsx.ts
@@ -3,8 +3,9 @@ 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'
+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)
@@ -12,8 +13,11 @@ const h = (tagName: string, props: any, children?: any[]) => {
   return { tagName, props: newProps, children }
 }
 
-export const styledJsx = async (node: HtmlNode): Promise<string> => {
-  const html = await toHtml(node)
+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))
 
diff --git a/packages/gui/src/lib/codegen/theme-ui.ts b/packages/gui/src/lib/codegen/theme-ui.ts
index db9c2507..375973ab 100644
--- a/packages/gui/src/lib/codegen/theme-ui.ts
+++ b/packages/gui/src/lib/codegen/theme-ui.ts
@@ -2,29 +2,36 @@ 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'
+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 = (tagName: string, props: any, children?: any[]) => {
-  const newProps = toReactProps(props)
+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)
-  }
+    if (newProps.style) {
+      const style = newProps.style
+      delete newProps.style
+      newProps.sx = toCSSObject(style, theme)
+    }
 
-  return { tagName, props: newProps, children }
-}
+    return { tagName, props: newProps, children }
+  }
 
-export const themeUI = async (node: HtmlNode) => {
-  const root = editorSchemaToHast(node)
-  const functionBody = stringifyHastNode(toH(h, root))
+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() {
+  export default function Component(${getPropSyntax(node)}) {
     return (
       ${functionBody}
     )
diff --git a/packages/gui/src/lib/codegen/to-css-object.ts b/packages/gui/src/lib/codegen/to-css-object.ts
index 45da2fcb..2d8fe635 100644
--- a/packages/gui/src/lib/codegen/to-css-object.ts
+++ b/packages/gui/src/lib/codegen/to-css-object.ts
@@ -18,29 +18,27 @@ export const stringifyProperty = (
       throw new Error(`Error stringifying ${property}\n${e}`)
     }
   }
-
-  // // font-family?
-  // if (!isCSSUnitValue(value)) {
-  //   return String(value) ?? null
-  // }
-  // return stringifyUnit(value, theme)
 }
 
 type StyleEntry = [string, Length | string | null | undefined]
 export const toCSSObject = (providedStyles: Styles, theme?: Theme): any => {
   const styles = stylesToEditorSchema(providedStyles)
-  // @ts-ignore
-  return Object.entries(styles).reduce((acc: Styles, curr: StyleEntry) => {
-    const [property, value] = curr
-    if (isNestedSelector(property.replace(/^:+/, ''))) {
+  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, theme),
+        [property]: stringifyProperty(property, value, theme),
       }
-    }
-    return {
-      ...acc,
-      [property]: stringifyProperty(property, value, theme),
-    }
-  }, {})
+    },
+    {}
+  )
+  return cssObject
 }
diff --git a/packages/gui/src/lib/codegen/to-react-props.ts b/packages/gui/src/lib/codegen/to-react-props.ts
index 8bf596bb..b62f3c55 100644
--- a/packages/gui/src/lib/codegen/to-react-props.ts
+++ b/packages/gui/src/lib/codegen/to-react-props.ts
@@ -1,9 +1,10 @@
 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 = (props: Props): Props => {
+export const toReactProps = ({ outerProps, ...props }: Props): Props => {
   return Object.entries(props).reduce((acc, curr) => {
     const [key, value] = curr
 
@@ -15,12 +16,12 @@ export const toReactProps = (props: Props): Props => {
       const propName = info.property || key
 
       return {
-        [propName]: value,
+        [propName]: stringifySlotInProp(value, outerProps),
         ...acc,
       }
     } catch (e) {
       return {
-        [key]: value,
+        [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
index b5ecc698..8ea08440 100644
--- a/packages/gui/src/lib/codegen/vue.ts
+++ b/packages/gui/src/lib/codegen/vue.ts
@@ -2,9 +2,10 @@ 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) => {
-  const src = await toHtml(node)
+export const vue = async (node: HtmlNode, options: CodegenOptions) => {
+  const src = await toHtml(node, options)
   const { html, styles } = await extractStyles(src)
 
   const output = `
diff --git a/packages/gui/src/lib/color.ts b/packages/gui/src/lib/color.ts
index 96158229..4ec37b4d 100644
--- a/packages/gui/src/lib/color.ts
+++ b/packages/gui/src/lib/color.ts
@@ -1,14 +1,102 @@
-import { flattenDeep, get, sample } from 'lodash-es'
-import { Theme } from '../types/theme'
-
-export function randomColor(theme?: Theme) {
-  if (theme && theme.colors) {
-    const path = sample(Object.keys(flattenDeep(theme.colors))) ?? ''
-    const group = get(theme.colors, path?.split('.'))
-    return sample(group.colors).value
+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'
+
+const CONTRAST_THRESHOLD = 4.5
+const CONTRAST_PROPERTY_MAP: Record<string, string> = {
+  color: 'backgroundColor',
+  backgroundColor: 'color',
+}
+
+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() {
@@ -17,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/elements.ts b/packages/gui/src/lib/elements.ts
index 6da8ab68..c0909266 100644
--- a/packages/gui/src/lib/elements.ts
+++ b/packages/gui/src/lib/elements.ts
@@ -7,3 +7,8 @@ export const isElement = (str: string): boolean => {
 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 978824f6..b7e0e3c3 100644
--- a/packages/gui/src/lib/index.ts
+++ b/packages/gui/src/lib/index.ts
@@ -1,6 +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.ts b/packages/gui/src/lib/parse.ts
index c400395a..27a15ef2 100644
--- a/packages/gui/src/lib/parse.ts
+++ b/packages/gui/src/lib/parse.ts
@@ -1,4 +1,4 @@
-type Token = string | CssFunction
+export type Token = string | CssFunction
 
 interface CssFunction {
   name: string
@@ -57,7 +57,7 @@ export function tokenizeRaw(str: string) {
   // 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
+      /(?:"[^"]*")|(?:'[^']*')|(?:[-_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/stringify.ts b/packages/gui/src/lib/stringify.ts
index d286641d..3e7cc976 100644
--- a/packages/gui/src/lib/stringify.ts
+++ b/packages/gui/src/lib/stringify.ts
@@ -13,6 +13,7 @@ import {
   removeInternalCSSClassSyntax,
 } from './classes'
 import { addPseudoSyntax } from './pseudos'
+import { themeGet } from './theme'
 
 export function stringifySelector(selector: string): string {
   if (isElement(selector)) {
@@ -87,4 +88,14 @@ export function stringifyPrimitive(value: Primitive, theme?: Theme) {
   return stringifyUnit(value)
 }
 
+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 e17abd94..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 || '']
 
@@ -35,22 +46,13 @@ type FontsArray = string[]
 type Fonts = FontsObject | FontsArray
 export const importFonts = (fonts: Fonts) => {
   if (Array.isArray(fonts)) {
-    return fonts.map((value: string) => {
+    return fonts.reduce((acc, value: string) => {
       return {
-        id: uuid(),
-        name: value,
-        stack: value,
+        ...acc,
+        [value]: value,
       }
-    })
+    }, {})
   }
-
-  return Object.entries(fonts).map(([key, value]) => {
-    return {
-      id: uuid(),
-      name: key,
-      stack: value,
-    }
-  })
 }
 
 type RawLength = number | string
diff --git a/packages/gui/src/lib/transformers/editor-schema-to-hast.ts b/packages/gui/src/lib/transformers/editor-schema-to-hast.ts
index a0d4f156..7bea0fe0 100644
--- a/packages/gui/src/lib/transformers/editor-schema-to-hast.ts
+++ b/packages/gui/src/lib/transformers/editor-schema-to-hast.ts
@@ -1,11 +1,15 @@
+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
+  removeStyleProperty?: boolean
+  addSlotSyntax?: boolean
+  addSlotTagSyntax?: boolean
 }
 export const editorSchemaToHast = (node: any, options?: Options) => {
   const propertiesToRemove: string[] = []
@@ -15,9 +19,27 @@ export const editorSchemaToHast = (node: any, options?: Options) => {
   }
 
   const processedTree = unified()
+    .use(convertComponentsToHast)
+    // @ts-ignore
     .use(attributesToProperties)
     .use(moveStyleToProperties as any)
+    // @ts-ignore
     .use(removeProperties, { propertiesToRemove })
-    .runSync(node)
+    .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 9faaf313..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,16 +1,14 @@
 import { unified } from 'unified'
 import rehypeParse from 'rehype-parse'
-import { cleanNewLines } from './plugins/clean-new-lines'
-import { propertiesToAttributes } from './plugins/properties-to-attributes'
+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()
-    .use(cleanNewLines)
-    // @ts-ignore
-    .use(propertiesToAttributes)
-    .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/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/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 9bce4296..e72aec5b 100644
--- a/packages/gui/src/lib/transformers/styles-to-editor-schema.ts
+++ b/packages/gui/src/lib/transformers/styles-to-editor-schema.ts
@@ -56,7 +56,7 @@ export const stylesToEditorSchema = (styles: any) => {
 }
 
 const transformComplexObject = (value: any): any => {
-  if (typeof value === 'string') {
+  if (typeof value === 'string' || typeof value === 'number') {
     return value
   }
 
diff --git a/packages/gui/src/lib/util.ts b/packages/gui/src/lib/util.ts
index bfa36a00..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'
@@ -31,6 +31,7 @@ export function isNestedSelector(selector: string): boolean {
     isElement(selector) ||
     isPseudoClass(selector) ||
     isPseudoElement(selector) ||
+    isSelectorFunction(selector) ||
     isInternalCSSClass(selector) ||
     false
   )
diff --git a/packages/gui/src/types/css.ts b/packages/gui/src/types/css.ts
index e46801fa..e310a4c7 100644
--- a/packages/gui/src/types/css.ts
+++ b/packages/gui/src/types/css.ts
@@ -181,3 +181,9 @@ export interface ThemeValue {
   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 b6aabdb3..ef72234c 100644
--- a/packages/gui/src/types/editor.ts
+++ b/packages/gui/src/types/editor.ts
@@ -2,6 +2,8 @@ export interface EditorProps<T, K = never> {
   value: T | K
   onChange(newValue: T | K): void
   onRemove?(): void
+  ruleset?: any
+  property?: string
 }
 
 export type EditorPropsWithLabel<T, K = never> = EditorProps<T, K> & {
diff --git a/packages/gui/src/types/modules.d.ts b/packages/gui/src/types/modules.d.ts
index e76f183f..f449a497 100644
--- a/packages/gui/src/types/modules.d.ts
+++ b/packages/gui/src/types/modules.d.ts
@@ -1,2 +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 55453a5c..488126e3 100644
--- a/packages/gui/src/types/theme.ts
+++ b/packages/gui/src/types/theme.ts
@@ -8,7 +8,7 @@ export type Theme = {
   breakpoints?: Breakpoint[]
   colors?: ColorGroup[]
   durations?: Duration[]
-  fonts?: FontFamily[]
+  fonts?: Record<string, string>
   fontSizes?: FontSize[]
   fontWeights?: FontWeight[]
   gradients?: Gradient[]
@@ -175,6 +175,6 @@ export type TextStyleProperty = {
 }
 
 export type Transition = {
-  id: string,
+  id: string
   name: string
 }
diff --git a/readme.md b/readme.md
index 01c6bf1b..9234d77c 100644
--- a/readme.md
+++ b/readme.md
@@ -2,11 +2,12 @@
 
 **_Visual development environment for CSS._**
 
-![image](https://user-images.githubusercontent.com/1748143/173137122-53686102-fda8-4da8-b75f-dd78187b8666.png)
+![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)
@@ -16,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
@@ -52,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
@@ -86,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'
diff --git a/yarn.lock b/yarn.lock
index 7633e2b1..ed172099 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -266,12 +266,12 @@
     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"
@@ -319,66 +319,67 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@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==
+"@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==
-  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"
+"@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.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"
@@ -393,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"
@@ -415,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":
@@ -444,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":
@@ -463,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"
@@ -506,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"
@@ -625,14 +627,19 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
-"@eslint/eslintrc@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz#29f92c30bb3e771e4a2048c95fa6855392dfac4f"
-  integrity sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==
+"@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.2"
+    espree "^9.4.0"
     globals "^13.15.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
@@ -640,14 +647,39 @@
     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"
@@ -946,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"
@@ -990,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"
+"@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/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=
-
-"@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.6":
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.1.6.tgz#dde3f98831f15923b25244588d924c716956292e"
-  integrity sha512-yNUtJ90NEiYFT6TJnNyofKMPYqirKDwpahcbxBgSIuABwYOdkGwzos1ZkYD51Qf0diYwpQZBeVqElTk7Q2WNqw==
+"@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"
@@ -1104,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==
@@ -1112,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"
@@ -1119,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"
@@ -1134,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"
@@ -1157,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"
@@ -1183,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"
@@ -1190,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"
@@ -1197,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"
@@ -1210,24 +1313,48 @@
     "@radix-ui/react-use-callback-ref" "0.1.0"
     "@radix-ui/react-use-escape-keydown" "0.1.0"
 
-"@radix-ui/react-dropdown-menu@^0.1.6":
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-0.1.6.tgz#3203229788cd57e552c9f19dcc7008e2b545919c"
-  integrity sha512-RZhtzjWwJ4ZBN7D8ek4Zn+ilHzYuYta9yIxFnbC0pfqMnSi67IQNONo1tuuNqtFh9SRHacPKc65zo+kBBlxtdg==
+"@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" "0.1.0"
-    "@radix-ui/react-compose-refs" "0.1.0"
-    "@radix-ui/react-context" "0.1.1"
-    "@radix-ui/react-id" "0.1.5"
-    "@radix-ui/react-menu" "0.1.6"
-    "@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-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-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.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"
 
@@ -1241,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"
@@ -1249,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"
@@ -1260,50 +1415,63 @@
     "@radix-ui/react-id" "0.1.5"
     "@radix-ui/react-primitive" "0.1.4"
 
-"@radix-ui/react-menu@0.1.6":
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-0.1.6.tgz#7f9521a10f6a9cd819b33b33d5ed9538d79b2e75"
-  integrity sha512-ho3+bhpr3oAFkOBJ8VkUb1BcGoiZBB3OmcWPqa6i5RTUKrzNX/d6rauochu2xDlWjiRtpVuiAcsTVOeIC4FbYQ==
+"@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-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-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-roving-focus" "0.1.5"
-    "@radix-ui/react-use-callback-ref" "0.1.0"
-    "@radix-ui/react-use-direction" "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@^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-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" "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/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.4.0"
+    react-remove-scroll "2.5.4"
 
 "@radix-ui/react-popper@0.1.4":
   version "0.1.4"
@@ -1320,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"
@@ -1329,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"
@@ -1338,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"
@@ -1346,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"
@@ -1361,6 +1603,22 @@
     "@radix-ui/react-use-callback-ref" "0.1.0"
     "@radix-ui/react-use-controllable-state" "0.1.0"
 
+"@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"
@@ -1386,23 +1644,23 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "^2.4.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-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" "0.1.0"
-    "@radix-ui/primitive" "0.1.0"
-    "@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-primitive" "0.1.4"
-    "@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/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"
@@ -1412,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"
@@ -1440,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"
@@ -1486,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"
@@ -1494,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"
@@ -1509,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"
@@ -1516,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"
@@ -1523,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"
@@ -1531,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"
@@ -1538,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"
@@ -1553,18 +1881,18 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@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:
+    "@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==
 
-"@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==
-  dependencies:
-    "@ndhoule/map" "^2.0.1"
-
 "@sinclair/typebox@^0.23.3":
   version "0.23.5"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.23.5.tgz#93f7b9f4e3285a7a9ade7557d9a8d36809cbc47d"
@@ -1688,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"
@@ -1695,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"
@@ -1825,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"
@@ -1930,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"
@@ -2025,50 +2365,62 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/parser@^5.21.0":
-  version "5.27.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.27.0.tgz#62bb091ed5cf9c7e126e80021bb563dcf36b6b12"
-  integrity sha512-8oGjQF46c52l7fMiPPvX4It3u3V3JipssqDfHQ2hcR0AeR8Zge+OYyKUCm5b70X72N1qXt0qgHenwN6Gc2SXZA==
+"@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.27.0"
-    "@typescript-eslint/types" "5.27.0"
-    "@typescript-eslint/typescript-estree" "5.27.0"
+    "@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.27.0":
-  version "5.27.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.27.0.tgz#a272178f613050ed62f51f69aae1e19e870a8bbb"
-  integrity sha512-VnykheBQ/sHd1Vt0LJ1JLrMH1GzHO+SzX6VTXuStISIsvRiurue/eRkTqSrG0CexHQgKG8shyJfR4o5VYioB9g==
+"@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.27.0"
-    "@typescript-eslint/visitor-keys" "5.27.0"
+    "@typescript-eslint/types" "5.54.0"
+    "@typescript-eslint/visitor-keys" "5.54.0"
 
-"@typescript-eslint/types@5.27.0":
-  version "5.27.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.27.0.tgz#c3f44b9dda6177a9554f94a74745ca495ba9c001"
-  integrity sha512-lY6C7oGm9a/GWhmUDOs3xAVRz4ty/XKlQ2fOLr8GAIryGn0+UBOoJDWyHer3UgrHkenorwvBnphhP+zPmzmw0A==
+"@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.27.0":
-  version "5.27.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.27.0.tgz#7965f5b553c634c5354a47dcce0b40b94611e995"
-  integrity sha512-QywPMFvgZ+MHSLRofLI7BDL+UczFFHyj0vF5ibeChDAJgdTV8k4xgEwF0geFhVlPc1p8r70eYewzpo6ps+9LJQ==
+"@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.27.0"
-    "@typescript-eslint/visitor-keys" "5.27.0"
+    "@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/visitor-keys@5.27.0":
-  version "5.27.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.27.0.tgz#97aa9a5d2f3df8215e6d3b77f9d214a24db269bd"
-  integrity sha512-46cYrteA2MrIAjv9ai44OQDUoCZyHeGIc4lsjCUX2WT6r4C+kidz1bNiR4017wHOPUythYeH+Sc7/cFP97KEAA==
+"@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.27.0"
+    "@typescript-eslint/types" "5.54.0"
     eslint-visitor-keys "^3.3.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==
+
+"@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:
+    "@use-gesture/core" "10.2.17"
+
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
@@ -2102,10 +2454,10 @@ acorn@^8.0.0, acorn@^8.2.4:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
   integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
 
-acorn@^8.7.1:
-  version "8.7.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30"
-  integrity sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==
+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"
@@ -2124,10 +2476,10 @@ 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"
@@ -2226,6 +2578,17 @@ array-includes@^3.1.4, array-includes@^3.1.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"
@@ -2248,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==
@@ -2268,6 +2631,27 @@ array.prototype.flatmap@^1.3.0:
     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"
@@ -2298,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"
@@ -2489,10 +2878,10 @@ builtins@^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"
 
@@ -2566,15 +2955,10 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-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==
-
-caniuse-lite@^1.0.30001358:
-  version "1.0.30001359"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001359.tgz#a1c1cbe1c2da9e689638813618b4219acbd4925e"
-  integrity sha512-Xln/BAsPzEuiVLgJ2/45IaqD9jShtk3Y33anKb4+yLwQzws3+v6odKfpgES/cDEaZMLzSChpIGdbOYtH9MyuHw==
+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"
@@ -2590,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==
@@ -2792,10 +3168,10 @@ 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.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
-  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+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"
 
@@ -2892,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==
@@ -3018,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"
@@ -3175,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"
@@ -3244,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"
@@ -3260,131 +3697,132 @@ 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"
@@ -3428,19 +3866,19 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-next@^12.1.6:
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-12.1.6.tgz#55097028982dce49159d8753000be3916ac55254"
-  integrity sha512-qoiS3g/EPzfCTkGkaPBSX9W0NGE/B1wNO3oWrd76QszVGrdpLggNqcO8+LR6MB0CNqtp9Q8NoeVrxNVbzM9hqA==
+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" "12.1.6"
+    "@next/eslint-plugin-next" "13.2.3"
     "@rushstack/eslint-patch" "^1.1.3"
-    "@typescript-eslint/parser" "^5.21.0"
+    "@typescript-eslint/parser" "^5.42.0"
     eslint-import-resolver-node "^0.3.6"
-    eslint-import-resolver-typescript "^2.7.1"
+    eslint-import-resolver-typescript "^3.5.2"
     eslint-plugin-import "^2.26.0"
     eslint-plugin-jsx-a11y "^6.5.1"
-    eslint-plugin-react "^7.29.4"
+    eslint-plugin-react "^7.31.7"
     eslint-plugin-react-hooks "^4.5.0"
 
 eslint-config-prettier@^8.5.0:
@@ -3456,16 +3894,18 @@ eslint-import-resolver-node@^0.3.6:
     debug "^3.2.7"
     resolve "^1.20.0"
 
-eslint-import-resolver-typescript@^2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz#a90a4a1c80da8d632df25994c4c5fdcdd02b8751"
-  integrity sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==
+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"
-    glob "^7.2.0"
+    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"
-    resolve "^1.22.0"
-    tsconfig-paths "^3.14.1"
+    synckit "^0.8.4"
 
 eslint-module-utils@^2.7.3:
   version "2.7.3"
@@ -3517,7 +3957,7 @@ eslint-plugin-react-hooks@^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.30.0, eslint-plugin-react@^7.29.4:
+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==
@@ -3537,6 +3977,27 @@ eslint-plugin-react@7.30.0, eslint-plugin-react@^7.29.4:
     semver "^6.3.0"
     string.prototype.matchall "^4.0.7"
 
+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.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.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.4"
+    semver "^6.3.0"
+    string.prototype.matchall "^4.0.8"
+
 eslint-scope@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.1.1.tgz#fff34894c2f65e5226d3041ac480b4513a163642"
@@ -3562,13 +4023,15 @@ eslint-visitor-keys@^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.16.0:
-  version "8.16.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.16.0.tgz#6d936e2d524599f2a86c708483b4c372c5d3bbae"
-  integrity sha512-MBndsoXY/PeVTDJeWsYj7kLZ5hQpJOfMYLsF6LicLHQWbRDG19lK5jOix4DPl8yY4SUFcE3txy86OzFLWT+yoA==
+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.3.0"
-    "@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"
@@ -3578,18 +4041,21 @@ eslint@8.16.0:
     eslint-scope "^7.1.1"
     eslint-utils "^3.0.0"
     eslint-visitor-keys "^3.3.0"
-    espree "^9.3.2"
+    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"
+    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"
@@ -3601,19 +4067,18 @@ eslint@8.16.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.2:
-  version "9.3.2"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.2.tgz#f58f77bd334731182801ced3380a8cc859091596"
-  integrity sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==
+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.1"
+    acorn "^8.8.0"
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.3.0"
 
@@ -3789,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"
@@ -3897,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"
@@ -3959,12 +4442,7 @@ function.prototype.name@^1.1.5:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
     es-abstract "^1.19.0"
-    functions-have-names "^1.2.2"
-
-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=
+    functions-have-names "^1.2.2"
 
 functions-have-names@^1.2.2:
   version "1.2.3"
@@ -4006,6 +4484,15 @@ 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"
@@ -4043,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"
@@ -4078,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==
@@ -4126,7 +4618,7 @@ glob@^7.1.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.4, glob@^7.2.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==
@@ -4150,6 +4642,18 @@ globals@^13.15.0:
   dependencies:
     type-fest "^0.20.2"
 
+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"
@@ -4162,6 +4666,17 @@ globby@^11.0.0, globby@^11.0.3, globby@^11.1.0:
     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"
@@ -4176,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"
@@ -4193,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.2.9:
+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==
@@ -4235,6 +4762,11 @@ has-property-descriptors@^1.0.0:
   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"
@@ -4298,6 +4830,13 @@ hast-to-hyperscript@^10.0.1:
     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"
@@ -4366,7 +4905,7 @@ 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.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==
@@ -4382,6 +4921,26 @@ hast-util-to-html@^8.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"
@@ -4389,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"
@@ -4546,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"
@@ -4580,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"
@@ -4625,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"
@@ -4637,6 +5228,13 @@ is-ci@^3.0.1:
   dependencies:
     ci-info "^3.2.0"
 
+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"
@@ -4688,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"
@@ -4770,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"
@@ -4840,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"
@@ -4857,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"
@@ -5284,6 +5910,11 @@ joycon@^3.0.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"
@@ -5430,6 +6061,11 @@ kleur@^4.0.3:
   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"
@@ -5525,6 +6161,11 @@ lodash.merge@^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"
@@ -5641,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==
@@ -5763,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"
@@ -5779,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"
@@ -6248,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.1, 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==
@@ -6311,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"
@@ -6338,28 +7004,31 @@ 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"
@@ -6422,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"
@@ -6444,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"
@@ -6453,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"
@@ -6462,6 +7155,15 @@ object.fromentries@^2.0.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
+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:
+    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"
@@ -6470,6 +7172,14 @@ object.hasown@^1.1.1:
     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"
   resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
@@ -6486,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"
@@ -6500,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"
@@ -6766,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"
@@ -6800,15 +7528,10 @@ 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.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"
-  integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==
+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==
 
 pretty-format@^28.0.0, pretty-format@^28.1.1:
   version "28.1.1"
@@ -6920,38 +7643,44 @@ react-is@^18.0.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.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-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"
-
-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==
+    tslib "^2.0.0"
 
 react@18.1.0:
   version "18.1.0"
@@ -7004,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"
@@ -7066,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"
@@ -7132,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==
@@ -7230,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"
@@ -7264,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"
 
@@ -7290,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"
@@ -7414,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"
@@ -7455,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==
@@ -7484,6 +8254,13 @@ source-map-url@^0.4.0:
   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"
@@ -7494,7 +8271,7 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~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, source-map@^0.7.3:
+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==
@@ -7603,6 +8380,20 @@ string.prototype.matchall@^4.0.7:
     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"
@@ -7620,6 +8411,15 @@ string.prototype.trimend@^1.0.5:
     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"
@@ -7637,6 +8437,15 @@ string.prototype.trimstart@^1.0.5:
     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"
@@ -7699,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"
@@ -7779,6 +8588,19 @@ 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"
@@ -7806,17 +8628,17 @@ text-table@^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"
@@ -7837,6 +8659,14 @@ throat@^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"
@@ -7905,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"
@@ -7917,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"
@@ -7956,33 +8803,38 @@ tsconfig-paths@^3.14.1:
     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"
 
@@ -7993,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"
@@ -8133,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"
@@ -8188,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"
@@ -8318,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"
@@ -8351,11 +9239,6 @@ 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"
@@ -8446,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"
@@ -8468,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"
@@ -8501,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"
@@ -8621,7 +9530,7 @@ yargs@^15.1.0:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
-yargs@^17.3.1:
+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==

Heading

Text Decoration

Font

Props

Layers