Refactor to Stitches Core (#89)

* Refactor www/styles to Stitches Core

* Update package.json

* Begin refactor of `tldraw`

* More refactoring

* A bit more

* little bit more

* Update yarn.lock

* Drops React dependencies to 16.8

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

package.json

@@ -39,8 +39,8 @@
     "@testing-library/react": "^12.0.0",
     "@types/jest": "^27.0.1",
     "@types/node": "^15.0.1",
-    "@types/react": "^17.0.19",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^16.9.55",
+    "@types/react-dom": "^16.9.9",
     "@typescript-eslint/eslint-plugin": "^4.19.0",
     "@typescript-eslint/parser": "^4.19.0",
     "babel-jest": "^27.1.0",
@@ -49,8 +49,6 @@
     "init-package-json": "^2.0.4",
     "jest": "^27.1.0",
     "lerna": "^3.22.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "resize-observer-polyfill": "^1.5.1",
     "ts-jest": "^27.0.5",
     "tslib": "^2.3.0",

packages/core/package.json

@@ -37,8 +37,8 @@
     "@herbcaudill/tscpaths": "^0.0.17",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.10",
-    "@types/react": "^17.0.16",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^16.9.55",
+    "@types/react-dom": "^16.9.9",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
     "esbuild": "^0.12.24",
@@ -53,8 +53,8 @@
     "typescript": "^4.4.2"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": ">=16.8",
+    "react-dom": "^16.8 || ^17.0"
   },
   "dependencies": {
     "@tldraw/intersect": "^0.0.95",
@@ -62,4 +62,4 @@
     "@use-gesture/react": "^10.0.0-beta.24"
   },
   "gitHead": "5cb031ddc264846ec6732d7179511cddea8ef034"
-}
+}

packages/core/src/types.ts

@@ -3,10 +3,11 @@
 /* --------------------- Primary -------------------- */
 
 import type React from 'react'
-import type { ForwardedRef } from 'react'
 
 export type Patch<T> = Partial<{ [P in keyof T]: T | Partial<T> | Patch<T[P]> }>
 
+type ForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null
+
 export interface TLPage<T extends TLShape, B extends TLBinding> {
   id: string
   name?: string
@@ -296,7 +297,7 @@ export type TLShapeUtil<
   Component(
     this: TLShapeUtil<T, E, M>,
     props: TLRenderInfo<T, E, M>,
-    ref: React.ForwardedRef<E>
+    ref: ForwardedRef<E>
   ): React.ReactElement<TLRenderInfo<T, E, M>, E['tagName']>
 
   Indicator(

packages/dev/package.json

@@ -21,15 +21,15 @@
   "dependencies": {
     "@tldraw/tldraw": "^0.0.95",
     "idb": "^6.1.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "react-router": "^5.2.1",
-    "react-router-dom": "^5.3.0"
+    "react-router-dom": "^5.3.0",
+    "react": ">=16.8",
+    "react-dom": "^16.8 || ^17.0"
   },
   "devDependencies": {
     "@types/node": "^14.14.35",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
+    "@types/react": "^16.9.55",
+    "@types/react-dom": "^16.9.9",
     "@types/react-router-dom": "^5.1.8",
     "concurrently": "6.0.1",
     "create-serve": "1.0.1",
@@ -38,4 +38,4 @@
     "typescript": "4.2.3"
   },
   "gitHead": "a7dac0f83ad998e205c2aab58182cb4ba4e099a6"
-}
+}

packages/intersect/package.json

@@ -42,8 +42,6 @@
     "esbuild": "^0.12.24",
     "eslint": "^7.32.0",
     "lerna": "^4.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "ts-node": "^10.2.1",
     "tslib": "^2.3.1",
     "typedoc": "^0.22.3",
@@ -53,4 +51,4 @@
     "@tldraw/vec": "^0.0.95"
   },
   "gitHead": "5cb031ddc264846ec6732d7179511cddea8ef034"
-}
+}

packages/tldraw/package.json

@@ -36,15 +36,13 @@
     "@babel/preset-env": "^7.15.4",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.10",
-    "@types/react": "^17.0.16",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^16.9.55",
+    "@types/react-dom": "^16.9.9",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
     "esbuild": "^0.12.24",
     "eslint": "^7.32.0",
     "lerna": "^4.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "ts-node": "^10.2.1",
     "tsconfig-replace-paths": "^0.0.5",
     "tslib": "^2.3.1",
@@ -52,8 +50,8 @@
     "typescript": "^4.4.2"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": ">=16.8",
+    "react-dom": "^16.8 || ^17.0"
   },
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^0.0.20",
@@ -64,6 +62,7 @@
     "@radix-ui/react-id": "^0.0.6",
     "@radix-ui/react-radio-group": "^0.0.18",
     "@radix-ui/react-tooltip": "^0.0.20",
+    "@stitches/core": "^1.2.0",
     "@stitches/react": "^1.0.0",
     "@tldraw/core": "^0.0.95",
     "@tldraw/intersect": "^0.0.95",
@@ -73,4 +72,4 @@
     "rko": "^0.5.25"
   },
   "gitHead": "5cb031ddc264846ec6732d7179511cddea8ef034"
-}
+}

packages/tldraw/src/components/context-menu/context-menu.tsx

@@ -1,21 +1,21 @@
 import * as React from 'react'
-import styled from '~styles'
+import css from '~styles'
 import { Utils } from '@tldraw/core'
 import * as RadixContextMenu from '@radix-ui/react-context-menu'
 import { useTLDrawContext } from '~hooks'
 import { Data, AlignType, DistributeType, StretchType } from '~types'
 import {
-  Kbd,
-  IconWrapper,
+  kbd,
+  iconWrapper,
   breakpoints,
-  RowButton,
+  rowButton,
   ContextMenuArrow,
   ContextMenuDivider,
   ContextMenuButton,
   ContextMenuSubMenu,
   ContextMenuIconButton,
   ContextMenuRoot,
-  MenuContent,
+  menuContent,
 } from '../shared'
 import {
   ChevronRightIcon,
@@ -128,20 +128,20 @@ export const ContextMenu = React.memo(({ children }: ContextMenuProps): JSX.Elem
   return (
     <ContextMenuRoot>
       <RadixContextMenu.Trigger>{children}</RadixContextMenu.Trigger>
-      <MenuContent as={RadixContextMenu.Content} ref={rContent}>
+      <RadixContextMenu.Content className={menuContent()} ref={rContent}>
         {hasSelection ? (
           <>
             <ContextMenuButton onSelect={handleFlipHorizontal}>
               <span>Flip Horizontal</span>
-              <Kbd variant="menu">⇧H</Kbd>
+              <kbd className={kbd({ variant: 'menu' })}>⇧H</kbd>
             </ContextMenuButton>
             <ContextMenuButton onSelect={handleFlipVertical}>
               <span>Flip Vertical</span>
-              <Kbd variant="menu">⇧V</Kbd>
+              <kbd className={kbd({ variant: 'menu' })}>⇧V</kbd>
             </ContextMenuButton>
             <ContextMenuButton onSelect={handleDuplicate}>
               <span>Duplicate</span>
-              <Kbd variant="menu">#D</Kbd>
+              <kbd className={kbd({ variant: 'menu' })}>#D</kbd>
             </ContextMenuButton>
             <ContextMenuDivider />
             {hasGroupSelected ||
@@ -150,13 +150,13 @@ export const ContextMenu = React.memo(({ children }: ContextMenuProps): JSX.Elem
                   {hasGroupSelected && (
                     <ContextMenuButton onSelect={handleGroup}>
                       <span>Ungroup</span>
-                      <Kbd variant="menu">#⇧G</Kbd>
+                      <kbd className={kbd({ variant: 'menu' })}>#⇧G</kbd>
                     </ContextMenuButton>
                   )}
                   {hasTwoOrMore && (
                     <ContextMenuButton onSelect={handleGroup}>
                       <span>Group</span>
-                      <Kbd variant="menu">#G</Kbd>
+                      <kbd className={kbd({ variant: 'menu' })}>#G</kbd>
                     </ContextMenuButton>
                   )}
                 </>
@@ -164,19 +164,19 @@ export const ContextMenu = React.memo(({ children }: ContextMenuProps): JSX.Elem
             <ContextMenuSubMenu label="Move">
               <ContextMenuButton onSelect={handleMoveToFront}>
                 <span>To Front</span>
-                <Kbd variant="menu">#⇧]</Kbd>
+                <kbd className={kbd({ variant: 'menu' })}>#⇧]</kbd>
               </ContextMenuButton>
               <ContextMenuButton onSelect={handleMoveForward}>
                 <span>Forward</span>
-                <Kbd variant="menu">#]</Kbd>
+                <kbd className={kbd({ variant: 'menu' })}>#]</kbd>
               </ContextMenuButton>
               <ContextMenuButton onSelect={handleMoveBackward}>
                 <span>Backward</span>
-                <Kbd variant="menu">#[</Kbd>
+                <kbd className={kbd({ variant: 'menu' })}>#[</kbd>
               </ContextMenuButton>
               <ContextMenuButton onSelect={handleMoveToBack}>
                 <span>To Back</span>
-                <Kbd variant="menu">#⇧[</Kbd>
+                <kbd className={kbd({ variant: 'menu' })}>#⇧[</kbd>
               </ContextMenuButton>
             </ContextMenuSubMenu>
             <MoveToPageMenu />
@@ -186,11 +186,11 @@ export const ContextMenu = React.memo(({ children }: ContextMenuProps): JSX.Elem
             <ContextMenuDivider />
             <ContextMenuButton onSelect={handleCopy}>
               <span>Copy</span>
-              <Kbd variant="menu">#C</Kbd>
+              <kbd className={kbd({ variant: 'menu' })}>#C</kbd>
             </ContextMenuButton>
             <ContextMenuButton onSelect={handleCopySvg}>
               <span>Copy to SVG</span>
-              <Kbd variant="menu">⇧#C</Kbd>
+              <kbd className={kbd({ variant: 'menu' })}>⇧#C</kbd>
             </ContextMenuButton>
             {isDebugMode && (
               <ContextMenuButton onSelect={handleCopyJson}>
@@ -199,31 +199,31 @@ export const ContextMenu = React.memo(({ children }: ContextMenuProps): JSX.Elem
             )}
             <ContextMenuButton onSelect={handlePaste}>
               <span>Paste</span>
-              <Kbd variant="menu">#V</Kbd>
+              <kbd className={kbd({ variant: 'menu' })}>#V</kbd>
             </ContextMenuButton>
             <ContextMenuDivider />
             <ContextMenuButton onSelect={handleDelete}>
               <span>Delete</span>
-              <Kbd variant="menu">⌫</Kbd>
+              <kbd className={kbd({ variant: 'menu' })}>⌫</kbd>
             </ContextMenuButton>
           </>
         ) : (
           <>
             <ContextMenuButton onSelect={handlePaste}>
               <span>Paste</span>
-              <Kbd variant="menu">#V</Kbd>
+              <kbd className={kbd({ variant: 'menu' })}>#V</kbd>
             </ContextMenuButton>
             <ContextMenuButton onSelect={handleUndo}>
               <span>Undo</span>
-              <Kbd variant="menu">#Z</Kbd>
+              <kbd className={kbd({ variant: 'menu' })}>#Z</kbd>
             </ContextMenuButton>
             <ContextMenuButton onSelect={handleRedo}>
               <span>Redo</span>
-              <Kbd variant="menu">#⇧Z</Kbd>
+              <kbd className={kbd({ variant: 'menu' })}>#⇧Z</kbd>
             </ContextMenuButton>
           </>
         )}
-      </MenuContent>
+      </RadixContextMenu.Content>
     </ContextMenuRoot>
   )
 })
@@ -278,17 +278,16 @@ function AlignDistributeSubMenu({
 
   return (
     <ContextMenuRoot>
-      <RadixContextMenu.TriggerItem as={RowButton} bp={breakpoints}>
+      <RadixContextMenu.TriggerItem className={rowButton({ bp: breakpoints })}>
         <span>Align / Distribute</span>
-        <IconWrapper size="small">
+        <div className={iconWrapper({ size: 'small' })}>
           <ChevronRightIcon />
-        </IconWrapper>
+        </div>
       </RadixContextMenu.TriggerItem>
-      <StyledGrid
-        as={RadixContextMenu.Content}
+      <RadixContextMenu.Content
+        className={grid({ selectedStyle: hasThreeOrMore ? 'threeOrMore' : 'twoOrMore' })}
         sideOffset={2}
         alignOffset={-2}
-        selectedStyle={hasThreeOrMore ? 'threeOrMore' : 'twoOrMore'}
       >
         <ContextMenuIconButton onSelect={alignLeft}>
           <AlignLeftIcon />
@@ -326,12 +325,12 @@ function AlignDistributeSubMenu({
           </ContextMenuIconButton>
         )}
         <ContextMenuArrow offset={13} />
-      </StyledGrid>
+      </RadixContextMenu.Content>
     </ContextMenuRoot>
   )
 }
 
-const StyledGrid = styled(MenuContent, {
+const grid = css(menuContent, {
   display: 'grid',
   variants: {
     selectedStyle: {
@@ -361,13 +360,13 @@ function MoveToPageMenu(): JSX.Element | null {
 
   return (
     <ContextMenuRoot>
-      <RadixContextMenu.TriggerItem as={RowButton} bp={breakpoints}>
+      <RadixContextMenu.TriggerItem className={rowButton({ bp: breakpoints })}>
         <span>Move To Page</span>
-        <IconWrapper size="small">
+        <div className={iconWrapper({ size: 'small' })}>
           <ChevronRightIcon />
-        </IconWrapper>
+        </div>
       </RadixContextMenu.TriggerItem>
-      <MenuContent as={RadixContextMenu.Content} sideOffset={2} alignOffset={-2}>
+      <RadixContextMenu.Content className={menuContent()} sideOffset={2} alignOffset={-2}>
         {sorted.map(({ id, name }, i) => (
           <ContextMenuButton
             key={id}
@@ -378,7 +377,7 @@ function MoveToPageMenu(): JSX.Element | null {
           </ContextMenuButton>
         ))}
         <ContextMenuArrow offset={13} />
-      </MenuContent>
+      </RadixContextMenu.Content>
     </ContextMenuRoot>
   )
 }

packages/tldraw/src/components/menu/menu.tsx

@@ -2,16 +2,16 @@ import * as React from 'react'
 import { ExitIcon, HamburgerMenuIcon } from '@radix-ui/react-icons'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import {
-  FloatingContainer,
+  floatingContainer,
   DropdownMenuRoot,
-  MenuContent,
-  IconButton,
+  menuContent,
+  iconButton,
   breakpoints,
   DropdownMenuButton,
   DropdownMenuSubMenu,
   DropdownMenuDivider,
-  IconWrapper,
-  Kbd,
+  iconWrapper,
+  kbd,
 } from '~components/shared'
 import { useTLDrawContext } from '~hooks'
 import { Preferences } from './preferences'
@@ -38,43 +38,43 @@ export const Menu = React.memo(() => {
   }, [tlstate])
 
   return (
-    <FloatingContainer>
+    <div className={floatingContainer()}>
       <DropdownMenuRoot>
-        <DropdownMenu.Trigger as={IconButton} bp={breakpoints}>
+        <DropdownMenu.Trigger className={iconButton({ bp: breakpoints })}>
           <HamburgerMenuIcon />
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content as={MenuContent} sideOffset={8} align="end">
+        <DropdownMenu.Content className={menuContent()} sideOffset={8} align="end">
           <DropdownMenuButton onSelect={handleNew}>
             <span>New Project</span>
-            <Kbd variant="menu">#N</Kbd>
+            <kbd className={kbd({ variant: 'menu' })}>#N</kbd>
           </DropdownMenuButton>
           <DropdownMenuDivider />
           <DropdownMenuButton disabled onSelect={handleLoad}>
             <span>Open...</span>
-            <Kbd variant="menu">#L</Kbd>
+            <kbd className={kbd({ variant: 'menu' })}>#L</kbd>
           </DropdownMenuButton>
           <RecentFiles />
           <DropdownMenuDivider />
           <DropdownMenuButton disabled onSelect={handleSave}>
             <span>Save</span>
-            <Kbd variant="menu">#S</Kbd>
+            <kbd className={kbd({ variant: 'menu' })}>#S</kbd>
           </DropdownMenuButton>
           <DropdownMenuButton disabled onSelect={handleSave}>
             <span>Save As...</span>
-            <Kbd variant="menu">⇧#S</Kbd>
+            <kbd className={kbd({ variant: 'menu' })}>⇧#S</kbd>
           </DropdownMenuButton>
           <DropdownMenuDivider />
           <Preferences />
           <DropdownMenuDivider />
           <DropdownMenuButton disabled onSelect={handleSignOut}>
             <span>Sign Out</span>
-            <IconWrapper size="small">
+            <div className={iconWrapper({ size: 'small' })}>
               <ExitIcon />
-            </IconWrapper>
+            </div>
           </DropdownMenuButton>
         </DropdownMenu.Content>
       </DropdownMenuRoot>
-    </FloatingContainer>
+    </div>
   )
 })
 

packages/tldraw/src/components/page-options-dialog/page-options-dialog.tsx

@@ -3,11 +3,11 @@ import * as Dialog from '@radix-ui/react-alert-dialog'
 import { MixerVerticalIcon } from '@radix-ui/react-icons'
 import {
   breakpoints,
-  IconButton,
-  DialogOverlay,
-  DialogContent,
-  RowButton,
-  Divider,
+  iconButton,
+  dialogOverlay,
+  dialogContent,
+  rowButton,
+  divider,
 } from '~components/shared'
 import type { Data, TLDrawPage } from '~types'
 import { useTLDrawContext } from '~hooks'
@@ -76,30 +76,30 @@ export function PageOptionsDialog({ page, onOpen, onClose }: PageOptionsDialogPr
 
   return (
     <Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>
-      <Dialog.Trigger as={IconButton} bp={breakpoints} size="small" data-shy="true">
+      <Dialog.Trigger className={iconButton({ bp: breakpoints, size: 'small' })} data-shy="true">
         <MixerVerticalIcon />
       </Dialog.Trigger>
-      <Dialog.Overlay as={DialogOverlay} />
-      <Dialog.Content as={DialogContent} onKeyDown={stopPropagation} onKeyUp={stopPropagation}>
-        <Dialog.Action as={RowButton} bp={breakpoints} onClick={handleRename}>
+      <Dialog.Overlay className={dialogOverlay()} />
+      <Dialog.Content
+        className={dialogContent()}
+        onKeyDown={stopPropagation}
+        onKeyUp={stopPropagation}
+      >
+        <Dialog.Action className={rowButton({ bp: breakpoints })} onClick={handleRename}>
           Rename
         </Dialog.Action>
-        <Dialog.Action as={RowButton} bp={breakpoints} onClick={handleDuplicate}>
+        <Dialog.Action className={rowButton({ bp: breakpoints })} onClick={handleDuplicate}>
           Duplicate
         </Dialog.Action>
         <Dialog.Action
-          as={RowButton}
-          bp={breakpoints}
+          className={rowButton({ bp: breakpoints, warn: true })}
           disabled={!canDelete}
           onClick={handleDelete}
-          warn={true}
         >
           Delete
         </Dialog.Action>
-        <Divider />
-        <Dialog.Cancel as={RowButton} bp={breakpoints}>
-          Cancel
-        </Dialog.Cancel>
+        <div className={divider()} />
+        <Dialog.Cancel className={rowButton({ bp: breakpoints })}>Cancel</Dialog.Cancel>
       </Dialog.Content>
     </Dialog.Root>
   )

packages/tldraw/src/components/page-panel/page-panel.tsx

@@ -5,13 +5,13 @@ import {
   breakpoints,
   DropdownMenuButton,
   DropdownMenuDivider,
-  RowButton,
-  MenuContent,
-  FloatingContainer,
-  IconWrapper,
+  rowButton,
+  menuContent,
+  floatingContainer,
+  iconWrapper,
 } from '~components/shared'
 import { PageOptionsDialog } from '~components/page-options-dialog'
-import styled from '~styles'
+import css from '~styles'
 import { useTLDrawContext } from '~hooks'
 import type { Data } from '~types'
 
@@ -51,14 +51,14 @@ export function PagePanel(): JSX.Element {
 
   return (
     <DropdownMenu.Root dir="ltr" open={isOpen} onOpenChange={handleOpenChange}>
-      <FloatingContainer>
-        <RowButton as={DropdownMenu.Trigger} bp={breakpoints} variant="noIcon">
+      <div className={floatingContainer()}>
+        <DropdownMenu.Trigger className={rowButton({ bp: breakpoints, variant: 'noIcon' })}>
           <span>{currentPageName || 'Page'}</span>
-        </RowButton>
-      </FloatingContainer>
-      <MenuContent as={DropdownMenu.Content} sideOffset={8} align="start">
+        </DropdownMenu.Trigger>
+      </div>
+      <DropdownMenu.Content className={menuContent()} sideOffset={8} align="start">
         {isOpen && <PageMenuContent onClose={handleClose} />}
-      </MenuContent>
+      </DropdownMenu.Content>
     </DropdownMenu.Root>
   )
 }
@@ -86,36 +86,34 @@ function PageMenuContent({ onClose }: { onClose: () => void }) {
     <>
       <DropdownMenu.RadioGroup value={currentPageId} onValueChange={handleChangePage}>
         {sortedPages.map((page) => (
-          <ButtonWithOptions key={page.id}>
+          <div className={buttonWithOptions()} key={page.id}>
             <DropdownMenu.RadioItem
-              as={RowButton}
-              bp={breakpoints}
+              className={rowButton({ bp: breakpoints, variant: 'pageButton' })}
               value={page.id}
-              variant="pageButton"
             >
               <span>{page.name || 'Page'}</span>
               <DropdownMenu.ItemIndicator>
-                <IconWrapper size="small">
+                <div className={iconWrapper({ size: 'small' })}>
                   <CheckIcon />
-                </IconWrapper>
+                </div>
               </DropdownMenu.ItemIndicator>
             </DropdownMenu.RadioItem>
             <PageOptionsDialog page={page} onClose={onClose} />
-          </ButtonWithOptions>
+          </div>
         ))}
       </DropdownMenu.RadioGroup>
       <DropdownMenuDivider />
       <DropdownMenuButton onSelect={handleCreatePage}>
         <span>Create Page</span>
-        <IconWrapper size="small">
+        <div className={iconWrapper({ size: 'small' })}>
           <PlusIcon />
-        </IconWrapper>
+        </div>
       </DropdownMenuButton>
     </>
   )
 }
 
-const ButtonWithOptions = styled('div', {
+const buttonWithOptions = css({
   display: 'grid',
   gridTemplateColumns: '1fr auto',
   gridAutoFlow: 'column',

packages/tldraw/src/components/shared/buttons-row.tsx

@@ -1,10 +1,10 @@
-import styled from '~styles'
+import css from '~styles'
 
 /* -------------------------------------------------- */
 /*                     Buttons Row                    */
 /* -------------------------------------------------- */
 
-export const ButtonsRow = styled('div', {
+export const buttonsRow = css({
   position: 'relative',
   display: 'flex',
   width: '100%',

packages/tldraw/src/components/shared/context-menu.tsx

@@ -11,11 +11,11 @@ import {
   CheckboxItem as CMCheckboxItem,
 } from '@radix-ui/react-context-menu'
 import { breakpoints } from './breakpoints'
-import { RowButton } from './row-button'
-import { IconButton } from './icon-button'
-import { IconWrapper } from './icon-wrapper'
-import { MenuContent } from './menu'
-import styled from '~styles'
+import { rowButton } from './row-button'
+import { iconButton } from './icon-button'
+import { iconWrapper } from './icon-wrapper'
+import { menuContent } from './menu'
+import css from '~styles'
 
 /* -------------------------------------------------- */
 /*                    Context Menu                   */
@@ -42,13 +42,13 @@ export interface ContextMenuSubMenuProps {
 export function ContextMenuSubMenu({ children, label }: ContextMenuSubMenuProps): JSX.Element {
   return (
     <CMRoot dir="ltr">
-      <CMTriggerItem as={RowButton} bp={breakpoints}>
+      <CMTriggerItem className={rowButton({ bp: breakpoints })}>
         <span>{label}</span>
-        <IconWrapper size="small">
+        <div className={iconWrapper({ size: 'small' })}>
           <ChevronRightIcon />
-        </IconWrapper>
+        </div>
       </CMTriggerItem>
-      <CMContent as={MenuContent} sideOffset={2} alignOffset={-2}>
+      <CMContent className={menuContent()} sideOffset={2} alignOffset={-2}>
         {children}
         <ContextMenuArrow offset={13} />
       </CMContent>
@@ -56,16 +56,38 @@ export function ContextMenuSubMenu({ children, label }: ContextMenuSubMenuProps)
   )
 }
 
-export const ContextMenuDivider = styled(CMSeparator, {
+const contextMenuDivider = css({
   backgroundColor: '$hover',
   height: 1,
   margin: '$2 -$2',
 })
 
-export const ContextMenuArrow = styled(CMArrow, {
+export const ContextMenuDivider = React.forwardRef<
+  React.ElementRef<typeof CMSeparator>,
+  React.ComponentProps<typeof CMSeparator>
+>((props, forwardedRef) => (
+  <CMSeparator
+    {...props}
+    ref={forwardedRef}
+    className={contextMenuDivider({ className: props.className })}
+  />
+))
+
+const contextMenuArrow = css({
   fill: '$panel',
 })
 
+export const ContextMenuArrow = React.forwardRef<
+  React.ElementRef<typeof CMArrow>,
+  React.ComponentProps<typeof CMArrow>
+>((props, forwardedRef) => (
+  <CMArrow
+    {...props}
+    ref={forwardedRef}
+    className={contextMenuArrow({ className: props.className })}
+  />
+))
+
 export interface ContextMenuButtonProps {
   onSelect?: () => void
   disabled?: boolean
@@ -78,9 +100,9 @@ export function ContextMenuButton({
   disabled = false,
 }: ContextMenuButtonProps): JSX.Element {
   return (
-    <RowButton as={CMItem} bp={breakpoints} disabled={disabled} onSelect={onSelect}>
+    <CMItem className={rowButton({ bp: breakpoints })} disabled={disabled} onSelect={onSelect}>
       {children}
-    </RowButton>
+    </CMItem>
   )
 }
 
@@ -96,7 +118,7 @@ export function ContextMenuIconButton({
   disabled = false,
 }: ContextMenuIconButtonProps): JSX.Element {
   return (
-    <CMItem as={IconButton} bp={breakpoints} disabled={disabled} onSelect={onSelect}>
+    <CMItem className={iconButton({ bp: breakpoints })} disabled={disabled} onSelect={onSelect}>
       {children}
     </CMItem>
   )
@@ -117,17 +139,16 @@ export function ContextMenuCheckboxItem({
 }: ContextMenuCheckboxItemProps): JSX.Element {
   return (
     <CMCheckboxItem
-      as={RowButton}
-      bp={breakpoints}
+      className={rowButton({ bp: breakpoints })}
       onCheckedChange={onCheckedChange}
       checked={checked}
       disabled={disabled}
     >
       {children}
       <CMItemIndicator>
-        <IconWrapper size="small">
+        <div className={iconWrapper({ size: 'small' })}>
           <CheckIcon />
-        </IconWrapper>
+        </div>
       </CMItemIndicator>
     </CMCheckboxItem>
   )

packages/tldraw/src/components/shared/dialog.tsx

@@ -1,10 +1,10 @@
-import styled from '~styles'
+import css from '~styles'
 
 /* -------------------------------------------------- */
 /*                       Dialog                       */
 /* -------------------------------------------------- */
 
-export const DialogContent = styled('div', {
+export const dialogContent = css({
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -26,7 +26,7 @@ export const DialogContent = styled('div', {
   },
 })
 
-export const DialogOverlay = styled('div', {
+export const dialogOverlay = css({
   backgroundColor: 'rgba(0, 0, 0, .15)',
   position: 'fixed',
   top: 0,
@@ -35,11 +35,11 @@ export const DialogOverlay = styled('div', {
   left: 0,
 })
 
-export const DialogInputWrapper = styled('div', {
+export const dialogInputWrapper = css({
   padding: '$4 $2',
 })
 
-export const DialogTitleRow = styled('div', {
+export const dialogTitleRow = css({
   display: 'flex',
   padding: '0 0 0 $4',
   alignItems: 'center',

packages/tldraw/src/components/shared/dropdown-menu.tsx

@@ -14,12 +14,12 @@ import {
 
 import { Tooltip } from './tooltip'
 import { breakpoints } from './breakpoints'
-import { RowButton } from './row-button'
-import { IconButton } from './icon-button'
-import { IconWrapper } from './icon-wrapper'
-import { MenuContent } from './menu'
+import { rowButton } from './row-button'
+import { iconButton } from './icon-button'
+import { iconWrapper } from './icon-wrapper'
+import { menuContent } from './menu'
 
-import styled from '~styles'
+import css from '~styles'
 
 /* -------------------------------------------------- */
 /*                    Dropdown Menu                   */
@@ -56,13 +56,13 @@ export function DropdownMenuSubMenu({
 }: DropdownMenuSubMenuProps): JSX.Element {
   return (
     <DMRoot dir="ltr">
-      <DMTriggerItem as={RowButton} bp={breakpoints} disabled={disabled}>
+      <DMTriggerItem className={rowButton({ bp: breakpoints })} disabled={disabled}>
         <span>{label}</span>
-        <IconWrapper size="small">
+        <div className={iconWrapper({ size: 'small' })}>
           <ChevronRightIcon />
-        </IconWrapper>
+        </div>
       </DMTriggerItem>
-      <DMContent as={MenuContent} sideOffset={2} alignOffset={-2}>
+      <DMContent className={menuContent()} sideOffset={2} alignOffset={-2}>
         {children}
         <DropdownMenuArrow offset={13} />
       </DMContent>
@@ -70,7 +70,7 @@ export function DropdownMenuSubMenu({
   )
 }
 
-export const DropdownMenuDivider = styled(DMSeparator, {
+export const dropdownMenuDivider = css({
   backgroundColor: '$hover',
   height: 1,
   marginTop: '$2',
@@ -79,10 +79,32 @@ export const DropdownMenuDivider = styled(DMSeparator, {
   marginLeft: '-$2',
 })
 
-export const DropdownMenuArrow = styled(DMArrow, {
+export const DropdownMenuDivider = React.forwardRef<
+  React.ElementRef<typeof DMSeparator>,
+  React.ComponentProps<typeof DMSeparator>
+>((props, forwardedRef) => (
+  <DMSeparator
+    {...props}
+    ref={forwardedRef}
+    className={dropdownMenuDivider({ className: props.className })}
+  />
+))
+
+export const dropdownMenuArrow = css({
   fill: '$panel',
 })
 
+export const DropdownMenuArrow = React.forwardRef<
+  React.ElementRef<typeof DMArrow>,
+  React.ComponentProps<typeof DMArrow>
+>((props, forwardedRef) => (
+  <DMArrow
+    {...props}
+    ref={forwardedRef}
+    className={dropdownMenuArrow({ className: props.className })}
+  />
+))
+
 export interface DropdownMenuButtonProps {
   onSelect?: () => void
   disabled?: boolean
@@ -95,7 +117,7 @@ export function DropdownMenuButton({
   disabled = false,
 }: DropdownMenuButtonProps): JSX.Element {
   return (
-    <DMItem as={RowButton} bp={breakpoints} disabled={disabled} onSelect={onSelect}>
+    <DMItem className={rowButton({ bp: breakpoints })} disabled={disabled} onSelect={onSelect}>
       {children}
     </DMItem>
   )
@@ -113,7 +135,7 @@ export function DropdownMenuIconButton({
   disabled = false,
 }: DropdownMenuIconButtonProps): JSX.Element {
   return (
-    <DMItem as={IconButton} bp={breakpoints} disabled={disabled} onSelect={onSelect}>
+    <DMItem className={iconButton({ bp: breakpoints })} disabled={disabled} onSelect={onSelect}>
       {children}
     </DMItem>
   )
@@ -133,7 +155,7 @@ export function DropdownMenuIconTriggerButton({
   disabled = false,
 }: DropdownMenuIconTriggerButtonProps): JSX.Element {
   return (
-    <DMTrigger as={IconButton} bp={breakpoints} disabled={disabled}>
+    <DMTrigger className={iconButton({ bp: breakpoints })} disabled={disabled}>
       <Tooltip label={label} kbd={kbd}>
         {children}
       </Tooltip>
@@ -156,17 +178,16 @@ export function DropdownMenuCheckboxItem({
 }: MenuCheckboxItemProps): JSX.Element {
   return (
     <DMCheckboxItem
-      as={RowButton}
-      bp={breakpoints}
+      className={rowButton({ bp: breakpoints })}
       onCheckedChange={onCheckedChange}
       checked={checked}
       disabled={disabled}
     >
       {children}
       <DMItemIndicator>
-        <IconWrapper size="small">
+        <div className={iconWrapper({ size: 'small' })}>
           <CheckIcon />
-        </IconWrapper>
+        </div>
       </DMItemIndicator>
     </DMCheckboxItem>
   )

packages/tldraw/src/components/shared/floating-container.tsx

@@ -1,10 +1,10 @@
-import styled from '~styles'
+import css from '~styles'
 
 /* -------------------------------------------------- */
 /*                 Floating Container                 */
 /* -------------------------------------------------- */
 
-export const FloatingContainer = styled('div', {
+export const floatingContainer = css({
   backgroundColor: '$panel',
   border: '1px solid $panel',
   borderRadius: '4px',

packages/tldraw/src/components/shared/icon-button.tsx

@@ -1,10 +1,10 @@
-import styled from '~styles'
+import css from '~styles'
 
 /* -------------------------------------------------- */
 /*                     Icon Button                    */
 /* -------------------------------------------------- */
 
-export const IconButton = styled('button', {
+export const iconButton = css({
   position: 'relative',
   height: '32px',
   width: '32px',

packages/tldraw/src/components/shared/icon-wrapper.tsx

@@ -1,10 +1,10 @@
-import styled from '~styles'
+import css from '~styles'
 
 /* -------------------------------------------------- */
 /*                    Icon Wrapper                    */
 /* -------------------------------------------------- */
 
-export const IconWrapper = styled('div', {
+export const iconWrapper = css({
   height: '100%',
   borderRadius: '4px',
   marginRight: '1px',

packages/tldraw/src/components/shared/kbd.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled from '~styles'
+import css from '~styles'
 import { Utils } from '@tldraw/core'
 
 /* -------------------------------------------------- */
@@ -18,18 +18,18 @@ export function Kbd({
   children: string
 }): JSX.Element | null {
   return (
-    <StyledKbd variant={variant}>
+    <kbd className={kbd({ variant })}>
       {children
         .replaceAll('#', commandKey())
         .split('')
         .map((k, i) => (
           <span key={i}>{k}</span>
         ))}
-    </StyledKbd>
+    </kbd>
   )
 }
 
-export const StyledKbd = styled('kbd', {
+export const kbd = css({
   marginLeft: '$3',
   textShadow: '$2',
   textAlign: 'center',

packages/tldraw/src/components/shared/menu.tsx

@@ -1,12 +1,12 @@
 import { breakpoints } from './breakpoints'
-import styled from '~styles'
-import { RowButton } from './row-button'
+import css from '~styles'
+import { rowButton } from './row-button'
 
 /* -------------------------------------------------- */
 /*                        Menu                        */
 /* -------------------------------------------------- */
 
-export const MenuContent = styled('div', {
+export const menuContent = css({
   position: 'relative',
   overflow: 'hidden',
   userSelect: 'none',
@@ -21,7 +21,7 @@ export const MenuContent = styled('div', {
   font: '$ui',
 })
 
-export const Divider = styled('div', {
+export const divider = css({
   backgroundColor: '$hover',
   height: 1,
   marginTop: '$2',
@@ -42,13 +42,17 @@ export function MenuButton({
   children: React.ReactNode
 }): JSX.Element {
   return (
-    <RowButton bp={breakpoints} disabled={disabled} warn={warn} onSelect={onSelect}>
+    <button
+      className={rowButton({ bp: breakpoints, warn })}
+      disabled={disabled}
+      onSelect={onSelect}
+    >
       {children}
-    </RowButton>
+    </button>
   )
 }
 
-export const MenuTextInput = styled('input', {
+export const menuTextInput = css({
   backgroundColor: '$panel',
   border: 'none',
   padding: '$4 $3',

packages/tldraw/src/components/shared/radio-group.tsx

@@ -1,10 +1,18 @@
-import styled from '~styles'
+import React from 'react'
+import css from '~styles'
 import { Root as RGRoot } from '@radix-ui/react-radio-group'
 
 /* -------------------------------------------------- */
 /*                     Radio Group                    */
 /* -------------------------------------------------- */
 
-export const Group = styled(RGRoot, {
+export const group = css({
   display: 'flex',
 })
+
+export const Group = React.forwardRef<
+  React.ElementRef<typeof RGRoot>,
+  React.ComponentProps<typeof RGRoot>
+>((props, forwardedRef) => (
+  <RGRoot {...props} ref={forwardedRef} className={group({ className: props.className })} />
+))

packages/tldraw/src/components/shared/row-button.tsx

@@ -1,10 +1,10 @@
-import styled from '~styles'
+import css from '~styles'
 
 /* -------------------------------------------------- */
 /*                     Row Button                     */
 /* -------------------------------------------------- */
 
-export const RowButton = styled('button', {
+export const rowButton = css({
   position: 'relative',
   display: 'flex',
   width: '100%',

packages/tldraw/src/components/shared/tooltip.tsx

@@ -1,7 +1,7 @@
 import * as RadixTooltip from '@radix-ui/react-tooltip'
 import * as React from 'react'
-import styled from '~styles'
-import { Kbd } from './kbd'
+import css from '~styles'
+import { kbd } from './kbd'
 
 /* -------------------------------------------------- */
 /*                       Tooltip                      */
@@ -14,20 +14,25 @@ interface TooltipProps {
   side?: 'bottom' | 'left' | 'right' | 'top'
 }
 
-export function Tooltip({ children, label, kbd, side = 'top' }: TooltipProps): JSX.Element {
+export function Tooltip({
+  children,
+  label,
+  kbd: kbdProp,
+  side = 'top',
+}: TooltipProps): JSX.Element {
   return (
     <RadixTooltip.Root>
       <RadixTooltip.Trigger as="span">{children}</RadixTooltip.Trigger>
-      <StyledContent side={side} sideOffset={8}>
+      <RadixTooltip.Content className={content()} side={side} sideOffset={8}>
         {label}
-        {kbd ? <Kbd variant="tooltip">{kbd}</Kbd> : null}
-        <StyledArrow />
-      </StyledContent>
+        {kbdProp ? <kbd className={kbd({ variant: 'tooltip' })}>{kbdProp}</kbd> : null}
+        <RadixTooltip.Arrow className={arrow()} />
+      </RadixTooltip.Content>
     </RadixTooltip.Root>
   )
 }
 
-const StyledContent = styled(RadixTooltip.Content, {
+const content = css({
   borderRadius: 3,
   padding: '$3 $3 $3 $3',
   fontSize: '$1',
@@ -40,7 +45,7 @@ const StyledContent = styled(RadixTooltip.Content, {
   userSelect: 'none',
 })
 
-const StyledArrow = styled(RadixTooltip.Arrow, {
+const arrow = css({
   fill: '$tooltipBg',
   margin: '0 8px',
 })

packages/tldraw/src/components/style-panel/align-distribute.tsx

@@ -13,7 +13,7 @@ import {
 } from '@radix-ui/react-icons'
 import { AlignType, DistributeType, StretchType } from '~types'
 import { useTLDrawContext } from '~hooks'
-import { breakpoints, ButtonsRow, IconButton } from '../shared'
+import { breakpoints, buttonsRow, iconButton } from '../shared'
 
 export interface AlignDistributeProps {
   hasTwoOrMore: boolean
@@ -66,70 +66,80 @@ export const AlignDistribute = React.memo(
 
     return (
       <>
-        <ButtonsRow>
-          <IconButton bp={breakpoints} size="small" disabled={!hasTwoOrMore} onClick={alignLeft}>
+        <div className={buttonsRow()}>
+          <button
+            className={iconButton({ bp: breakpoints, size: 'small' })}
+            disabled={!hasTwoOrMore}
+            onClick={alignLeft}
+          >
             <AlignLeftIcon />
-          </IconButton>
-          <IconButton
-            bp={breakpoints}
-            size="small"
+          </button>
+          <button
+            className={iconButton({ bp: breakpoints, size: 'small' })}
             disabled={!hasTwoOrMore}
             onClick={alignCenterHorizontal}
           >
             <AlignCenterHorizontallyIcon />
-          </IconButton>
-          <IconButton bp={breakpoints} size="small" disabled={!hasTwoOrMore} onClick={alignRight}>
+          </button>
+          <button
+            className={iconButton({ bp: breakpoints, size: 'small' })}
+            disabled={!hasTwoOrMore}
+            onClick={alignRight}
+          >
             <AlignRightIcon />
-          </IconButton>
-          <IconButton
-            bp={breakpoints}
-            size="small"
+          </button>
+          <button
+            className={iconButton({ bp: breakpoints, size: 'small' })}
             disabled={!hasTwoOrMore}
             onClick={stretchHorizontally}
           >
             <StretchHorizontallyIcon />
-          </IconButton>
-          <IconButton
-            bp={breakpoints}
-            size="small"
+          </button>
+          <button
+            className={iconButton({ bp: breakpoints, size: 'small' })}
             disabled={!hasThreeOrMore}
             onClick={distributeHorizontally}
           >
             <SpaceEvenlyHorizontallyIcon />
-          </IconButton>
-        </ButtonsRow>
-        <ButtonsRow>
-          <IconButton bp={breakpoints} size="small" disabled={!hasTwoOrMore} onClick={alignTop}>
+          </button>
+        </div>
+        <div className={buttonsRow()}>
+          <button
+            className={iconButton({ bp: breakpoints, size: 'small' })}
+            disabled={!hasTwoOrMore}
+            onClick={alignTop}
+          >
             <AlignTopIcon />
-          </IconButton>
-          <IconButton
-            bp={breakpoints}
-            size="small"
+          </button>
+          <button
+            className={iconButton({ bp: breakpoints, size: 'small' })}
             disabled={!hasTwoOrMore}
             onClick={alignCenterVertical}
           >
             <AlignCenterVerticallyIcon />
-          </IconButton>
-          <IconButton bp={breakpoints} size="small" disabled={!hasTwoOrMore} onClick={alignBottom}>
+          </button>
+          <button
+            className={iconButton({ bp: breakpoints, size: 'small' })}
+            disabled={!hasTwoOrMore}
+            onClick={alignBottom}
+          >
             <AlignBottomIcon />
-          </IconButton>
-          <IconButton
-            bp={breakpoints}
-            size="small"
+          </button>
+          <button
+            className={iconButton({ bp: breakpoints, size: 'small' })}
             disabled={!hasTwoOrMore}
             onClick={stretchVertically}
           >
             <StretchVerticallyIcon />
-          </IconButton>
-          <IconButton
-            bp={breakpoints}
-            size="small"
+          </button>
+          <button
+            className={iconButton({ bp: breakpoints, size: 'small' })}
             disabled={!hasThreeOrMore}
             onClick={distributeVertically}
           >
             <SpaceEvenlyVerticallyIcon />
-          </IconButton>
-        </ButtonsRow>
+          </button>
+        </div>
       </>
     )
   }

packages/tldraw/src/components/style-panel/quick-color-select.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
-import { BoxIcon, StyleDropdownItem, StyleDropdownContent } from './styled'
+import { BoxIcon, dropdownItem, dropdownContent } from './styled'
 import { DropdownMenuIconTriggerButton } from '../shared'
 import { strokes } from '~shape'
 import { useTheme, useTLDrawContext } from '~hooks'
@@ -28,11 +28,11 @@ export const QuickColorSelect = React.memo((): JSX.Element => {
         <DropdownMenu.DropdownMenuRadioGroup
           value={color as string}
           onValueChange={handleColorChange}
-          as={StyleDropdownContent}
+          className={dropdownContent()}
         >
           {Object.keys(strokes[theme]).map((colorStyle: string) => (
             <DropdownMenu.DropdownMenuRadioItem
-              as={StyleDropdownItem}
+              className={dropdownItem()}
               key={colorStyle}
               title={colorStyle}
               value={colorStyle}

packages/tldraw/src/components/style-panel/quick-dash-select.tsx

@@ -6,8 +6,8 @@ import {
   DashDottedIcon,
   DashSolidIcon,
   DashDashedIcon,
-  StyleDropdownContent,
-  StyleDropdownItem,
+  dropdownContent,
+  dropdownItem,
 } from './styled'
 import { useTLDrawContext } from '~hooks'
 import { DashStyle, Data } from '~types'
@@ -36,16 +36,14 @@ export const QuickDashSelect = React.memo((): JSX.Element => {
       <DropdownMenuIconTriggerButton label="Dash">{dashes[dash]}</DropdownMenuIconTriggerButton>
       <DropdownMenu.Content sideOffset={8}>
         <DropdownMenu.DropdownMenuRadioGroup
-          as={StyleDropdownContent}
-          direction="vertical"
+          className={dropdownContent({ direction: 'vertical' })}
           value={dash}
           onValueChange={changeDashStyle}
         >
           {Object.keys(DashStyle).map((dashStyle: string) => (
             <DropdownMenu.DropdownMenuRadioItem
-              as={StyleDropdownItem}
+              className={dropdownItem({ isActive: dash === dashStyle })}
               key={dashStyle}
-              isActive={dash === dashStyle}
               value={dashStyle}
             >
               {dashes[dashStyle as DashStyle]}

packages/tldraw/src/components/style-panel/quick-fill-select.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as Checkbox from '@radix-ui/react-checkbox'
 import { BoxIcon, IsFilledFillIcon } from './styled'
-import { breakpoints, Tooltip, IconButton, IconWrapper } from '../shared'
+import { breakpoints, Tooltip, iconButton, iconWrapper } from '../shared'
 import { useTLDrawContext } from '~hooks'
 import type { Data } from '~types'
 
@@ -20,18 +20,17 @@ export const QuickFillSelect = React.memo((): JSX.Element => {
   return (
     <Checkbox.Root
       dir="ltr"
-      as={IconButton}
-      bp={breakpoints}
+      className={iconButton({ bp: breakpoints })}
       checked={isFilled}
       onCheckedChange={handleIsFilledChange}
     >
       <Tooltip label="Fill">
-        <IconWrapper>
+        <div className={iconWrapper()}>
           <BoxIcon />
           <Checkbox.Indicator>
             <IsFilledFillIcon />
           </Checkbox.Indicator>
-        </IconWrapper>
+        </div>
       </Tooltip>
     </Checkbox.Root>
   )

packages/tldraw/src/components/style-panel/quick-size-select.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { DropdownMenuIconTriggerButton } from '../shared/dropdown-menu'
 import { CircleIcon } from '../icons'
-import { StyleDropdownContent, StyleDropdownItem } from './styled'
+import { dropdownContent, dropdownItem } from './styled'
 import { Data, SizeStyle } from '~types'
 import { useTLDrawContext } from '~hooks'
 
@@ -31,16 +31,14 @@ export const QuickSizeSelect = React.memo((): JSX.Element => {
       </DropdownMenuIconTriggerButton>
       <DropdownMenu.Content sideOffset={8}>
         <DropdownMenu.DropdownMenuRadioGroup
-          as={StyleDropdownContent}
-          direction="vertical"
+          className={dropdownContent({ direction: 'vertical' })}
           value={size}
           onValueChange={changeSizeStyle}
         >
           {Object.keys(SizeStyle).map((sizeStyle: string) => (
             <DropdownMenu.DropdownMenuRadioItem
               key={sizeStyle}
-              as={StyleDropdownItem}
-              isActive={size === sizeStyle}
+              className={dropdownItem({ isActive: size === sizeStyle })}
               value={sizeStyle}
             >
               <CircleIcon size={sizes[sizeStyle as SizeStyle]} />

packages/tldraw/src/components/style-panel/shapes-functions.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { IconButton, ButtonsRow, breakpoints } from '../shared'
+import { iconButton, buttonsRow, breakpoints } from '../shared'
 import { Trash } from '../icons'
 import { Tooltip } from '../shared/tooltip'
 import {
@@ -108,108 +108,108 @@ export const ShapesFunctions = React.memo(() => {
 
   return (
     <>
-      <ButtonsRow>
-        <IconButton
-          bp={breakpoints}
+      <div className={buttonsRow()}>
+        <button
+          className={iconButton({ bp: breakpoints, size: 'small' })}
           disabled={!hasSelection}
-          size="small"
           onClick={handleDuplicate}
         >
           <Tooltip label="Duplicate" kbd={`#D`}>
             <CopyIcon />
           </Tooltip>
-        </IconButton>
+        </button>
 
-        <IconButton disabled={!hasSelection} size="small" onClick={handleRotate}>
+        <button
+          className={iconButton({ size: 'small' })}
+          disabled={!hasSelection}
+          onClick={handleRotate}
+        >
           <Tooltip label="Rotate">
             <RotateCounterClockwiseIcon />
           </Tooltip>
-        </IconButton>
+        </button>
 
-        <IconButton
-          bp={breakpoints}
+        <button
+          className={iconButton({ bp: breakpoints, size: 'small' })}
           disabled={!hasSelection}
-          size="small"
           onClick={handleToggleLocked}
         >
           <Tooltip label="Toogle Locked" kbd={`#L`}>
             {isAllLocked ? <LockClosedIcon /> : <LockOpen1Icon opacity={0.4} />}
           </Tooltip>
-        </IconButton>
+        </button>
 
-        <IconButton
-          bp={breakpoints}
+        <button
+          className={iconButton({ bp: breakpoints, size: 'small' })}
           disabled={!hasSelection}
-          size="small"
           onClick={handleToggleAspectRatio}
         >
           <Tooltip label="Toogle Aspect Ratio Lock">
             <AspectRatioIcon opacity={isAllAspectLocked ? 1 : 0.4} />
           </Tooltip>
-        </IconButton>
+        </button>
 
-        <IconButton
-          bp={breakpoints}
+        <button
+          className={iconButton({ bp: breakpoints, size: 'small' })}
           disabled={!isAllGrouped && !hasMultipleSelection}
-          size="small"
           onClick={handleGroup}
         >
           <Tooltip label="Group" kbd={`#G`}>
             <GroupIcon opacity={isAllGrouped ? 1 : 0.4} />
           </Tooltip>
-        </IconButton>
-      </ButtonsRow>
-      <ButtonsRow>
-        <IconButton
-          bp={breakpoints}
+        </button>
+      </div>
+      <div className={buttonsRow()}>
+        <button
+          className={iconButton({ bp: breakpoints, size: 'small' })}
           disabled={!hasSelection}
-          size="small"
           onClick={handleMoveToBack}
         >
           <Tooltip label="Move to Back" kbd={`#⇧[`}>
             <PinBottomIcon />
           </Tooltip>
-        </IconButton>
+        </button>
 
-        <IconButton
-          bp={breakpoints}
+        <button
+          className={iconButton({ bp: breakpoints, size: 'small' })}
           disabled={!hasSelection}
-          size="small"
           onClick={handleMoveBackward}
         >
           <Tooltip label="Move Backward" kbd={`#[`}>
             <ArrowDownIcon />
           </Tooltip>
-        </IconButton>
+        </button>
 
-        <IconButton
-          bp={breakpoints}
+        <button
+          className={iconButton({ bp: breakpoints, size: 'small' })}
           disabled={!hasSelection}
-          size="small"
           onClick={handleMoveForward}
         >
           <Tooltip label="Move Forward" kbd={`#]`}>
             <ArrowUpIcon />
           </Tooltip>
-        </IconButton>
+        </button>
 
-        <IconButton
-          bp={breakpoints}
+        <button
+          className={iconButton({ bp: breakpoints, size: 'small' })}
           disabled={!hasSelection}
-          size="small"
           onClick={handleMoveToFront}
         >
           <Tooltip label="More to Front" kbd={`#⇧]`}>
             <PinTopIcon />
           </Tooltip>
-        </IconButton>
+        </button>
 
-        <IconButton bp={breakpoints} disabled={!hasSelection} size="small" onClick={handleDelete}>
+        <button
+          className={iconButton({ bp: breakpoints, size: 'small' })}
+          disabled={!hasSelection}
+          onClick={handleDelete}
+        >
           <Tooltip label="Delete" kbd="⌫">
             <Trash />
           </Tooltip>
-        </IconButton>
-      </ButtonsRow>
+        </button>
+      </div>
     </>
   )
 })

packages/tldraw/src/components/style-panel/style-panel.tsx

@@ -10,14 +10,14 @@ import { QuickSizeSelect } from './quick-size-select'
 import { QuickDashSelect } from './quick-dash-select'
 import { QuickFillSelect } from './quick-fill-select'
 import { Tooltip } from '../shared/tooltip'
-import { Kbd } from '../shared/kbd'
+import { kbd } from '../shared/kbd'
 import {
-  IconButton,
-  ButtonsRow,
+  iconButton,
+  buttonsRow,
   breakpoints,
-  RowButton,
-  FloatingContainer,
-  Divider,
+  rowButton,
+  floatingContainer,
+  divider,
 } from '../shared'
 
 const isStyleOpenSelector = (s: Data) => s.appState.isStyleOpen
@@ -27,25 +27,24 @@ export function StylePanel(): JSX.Element {
   const isOpen = useSelector(isStyleOpenSelector)
 
   return (
-    <FloatingContainer direction="column">
-      <ButtonsRow>
+    <div className={floatingContainer({ direction: 'column' })}>
+      <div className={buttonsRow()}>
         <QuickColorSelect />
         <QuickSizeSelect />
         <QuickDashSelect />
         <QuickFillSelect />
-        <IconButton
-          bp={breakpoints}
+        <button
+          className={iconButton({ bp: breakpoints, size: 'small' })}
           title="Style"
-          size="small"
           onPointerDown={tlstate.toggleStylePanel}
         >
           <Tooltip label={isOpen ? 'Close' : 'More'}>
             {isOpen ? <Cross2Icon /> : <DotsHorizontalIcon />}
           </Tooltip>
-        </IconButton>
-      </ButtonsRow>
+        </button>
+      </div>
       {isOpen && <SelectedShapeContent />}
-    </FloatingContainer>
+    </div>
   )
 }
 
@@ -72,26 +71,30 @@ function SelectedShapeContent(): JSX.Element {
 
   return (
     <>
-      <Divider />
+      <div className={divider()} />
       <ShapesFunctions />
-      <Divider />
+      <div className={divider()} />
       <AlignDistribute
         hasTwoOrMore={selectedShapesCount > 1}
         hasThreeOrMore={selectedShapesCount > 2}
       />
-      <Divider />
-      <RowButton bp={breakpoints} disabled={selectedShapesCount === 0} onClick={handleCopy}>
+      <div className={divider()} />
+      <button
+        className={rowButton({ bp: breakpoints })}
+        disabled={selectedShapesCount === 0}
+        onClick={handleCopy}
+      >
         <span>Copy</span>
-        {showKbds && <Kbd variant="menu">#C</Kbd>}
-      </RowButton>
-      <RowButton bp={breakpoints} onClick={handlePaste}>
+        {showKbds && <kbd className={kbd({ variant: 'menu' })}>#C</kbd>}
+      </button>
+      <button className={rowButton({ bp: breakpoints })} onClick={handlePaste}>
         <span>Paste</span>
-        {showKbds && <Kbd variant="menu">#V</Kbd>}
-      </RowButton>
-      <RowButton bp={breakpoints} onClick={handleCopySvg}>
+        {showKbds && <kbd className={kbd({ variant: 'menu' })}>#V</kbd>}
+      </button>
+      <button className={rowButton({ bp: breakpoints })} onClick={handleCopySvg}>
         <span>Copy to SVG</span>
-        {showKbds && <Kbd variant="menu">⇧#C</Kbd>}
-      </RowButton>
+        {showKbds && <kbd className={kbd({ variant: 'menu' })}>⇧#C</kbd>}
+      </button>
     </>
   )
 }

packages/tldraw/src/components/style-panel/styled.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import styled from '~styles'
+import css from '~styles'
 
-export const StyleDropdownContent = styled('div', {
+export const dropdownContent = css({
   display: 'grid',
   padding: 4,
   gridTemplateColumns: 'repeat(4, 1fr)',
@@ -19,7 +19,7 @@ export const StyleDropdownContent = styled('div', {
   },
 })
 
-export const StyleDropdownItem = styled('button', {
+export const dropdownItem = css({
   height: '32px',
   width: '32px',
   backgroundColor: '$panel',

packages/tldraw/src/components/tldraw/tldraw.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { IdProvider } from '@radix-ui/react-id'
 import { Renderer } from '@tldraw/core'
-import styled from '~styles'
+import css from '~styles'
 import { Data, TLDrawDocument, TLDrawStatus } from '~types'
 import { TLDrawState } from '~state'
 import { TLDrawContext, useCustomFonts, useKeyboardShortcuts, useTLDrawContext } from '~hooks'
@@ -146,7 +146,7 @@ function InnerTldraw({
   }, [currentPageId, tlstate])
 
   return (
-    <Layout>
+    <div className={layout()}>
       <ContextMenu>
         <Renderer
           page={page}
@@ -205,18 +205,18 @@ function InnerTldraw({
           onMount={tlstate.handleMount}
         />
       </ContextMenu>
-      <MenuButtons>
+      <div className={menuButtons()}>
         <Menu />
         <PagePanel />
-      </MenuButtons>
-      <Spacer />
+      </div>
+      <div className={spacer()} />
       <StylePanel />
       <ToolsPanel />
-    </Layout>
+    </div>
   )
 }
 
-const Layout = styled('div', {
+const layout = css({
   position: 'absolute',
   height: '100%',
   width: '100%',
@@ -245,11 +245,11 @@ const Layout = styled('div', {
   },
 })
 
-const Spacer = styled('div', {
+const spacer = css({
   flexGrow: 2,
 })
 
-const MenuButtons = styled('div', {
+const menuButtons = css({
   display: 'flex',
   gap: 8,
 })

packages/tldraw/src/components/tools-panel/back-to-content.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { FloatingContainer, RowButton } from '../shared'
-import styled from '~styles'
+import { floatingContainer, rowButton } from '../shared'
+import css from '~styles'
 import type { Data } from '~types'
 import { useTLDrawContext } from '~hooks'
 
@@ -16,13 +16,15 @@ export const BackToContent = React.memo(() => {
   if (!isEmptyCanvas) return null
 
   return (
-    <BackToContentButton>
-      <RowButton onClick={tlstate.zoomToContent}>Back to content</RowButton>
-    </BackToContentButton>
+    <div className={backToContentButton()}>
+      <button className={rowButton()} onClick={tlstate.zoomToContent}>
+        Back to content
+      </button>
+    </div>
   )
 })
 
-const BackToContentButton = styled(FloatingContainer, {
+const backToContentButton = css(floatingContainer, {
   pointerEvents: 'all',
   width: 'fit-content',
   gridRow: 1,

packages/tldraw/src/components/tools-panel/status-bar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useTLDrawContext } from '~hooks'
 import type { Data } from '~types'
-import styled from '~styles'
+import css from '~styles'
 
 const statusSelector = (s: Data) => s.appState.status.current
 const activeToolSelector = (s: Data) => s.appState.activeTool
@@ -12,15 +12,15 @@ export function StatusBar(): JSX.Element | null {
   const activeTool = useSelector(activeToolSelector)
 
   return (
-    <StatusBarContainer size={{ '@sm': 'small' }}>
-      <Section>
+    <div className={statusBarContainer({ size: { '@sm': 'small' } })}>
+      <div className={section()}>
         {activeTool} | {status}
-      </Section>
-    </StatusBarContainer>
+      </div>
+    </div>
   )
 }
 
-const StatusBarContainer = styled('div', {
+const statusBarContainer = css({
   height: 40,
   userSelect: 'none',
   borderTop: '1px solid $border',
@@ -44,7 +44,7 @@ const StatusBarContainer = styled('div', {
   },
 })
 
-const Section = styled('div', {
+const section = css({
   whiteSpace: 'nowrap',
   overflow: 'hidden',
 })

packages/tldraw/src/components/tools-panel/styled.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { FloatingContainer } from '../shared'
+import { floatingContainer } from '../shared'
 import { Tooltip } from '../shared/tooltip'
-import styled from '~styles'
+import css from '~styles'
 
-export const ToolButton = styled('button', {
+export const toolButton = css({
   position: 'relative',
   height: '32px',
   width: '32px',
@@ -38,7 +38,7 @@ export const ToolButton = styled('button', {
   },
 })
 
-export const PrimaryToolButton = styled(ToolButton, {
+export const primaryToolButton = css(toolButton, {
   variants: {
     bp: {
       mobile: {
@@ -65,7 +65,7 @@ export const PrimaryToolButton = styled(ToolButton, {
   },
 })
 
-export const SecondaryToolButton = styled(ToolButton, {
+export const secondaryToolButton = css(toolButton, {
   variants: {
     bp: {
       mobile: {
@@ -92,7 +92,7 @@ export const SecondaryToolButton = styled(ToolButton, {
   },
 })
 
-export const TertiaryToolButton = styled(ToolButton, {
+export const tertiaryToolButton = css(toolButton, {
   variants: {
     bp: {
       mobile: {
@@ -139,20 +139,22 @@ export function PrimaryButton({
 }: PrimaryToolButtonProps): JSX.Element {
   return (
     <Tooltip label={label[0].toUpperCase() + label.slice(1)} kbd={kbd}>
-      <PrimaryToolButton
-        name={label}
-        bp={{
-          '@initial': 'mobile',
-          '@sm': 'small',
-          '@md': 'medium',
-          '@lg': 'large',
-        }}
+      <button
+        className={primaryToolButton({
+          bp: {
+            '@initial': 'mobile',
+            '@sm': 'small',
+            '@md': 'medium',
+            '@lg': 'large',
+          },
+          name: label,
+          isActive,
+        })}
         onClick={onClick}
         onDoubleClick={onDoubleClick}
-        isActive={isActive}
       >
         {children}
-      </PrimaryToolButton>
+      </button>
     </Tooltip>
   )
 }
@@ -176,20 +178,22 @@ export function SecondaryButton({
 }: SecondaryToolButtonProps): JSX.Element {
   return (
     <Tooltip label={label[0].toUpperCase() + label.slice(1)} kbd={kbd}>
-      <SecondaryToolButton
-        name={label}
-        bp={{
-          '@initial': 'mobile',
-          '@sm': 'small',
-          '@md': 'medium',
-          '@lg': 'large',
-        }}
+      <button
+        className={secondaryToolButton({
+          bp: {
+            '@initial': 'mobile',
+            '@sm': 'small',
+            '@md': 'medium',
+            '@lg': 'large',
+          },
+          name: label,
+          isActive,
+        })}
         onClick={onClick}
         onDoubleClick={onDoubleClick}
-        isActive={isActive}
       >
         {children}
-      </SecondaryToolButton>
+      </button>
     </Tooltip>
   )
 }
@@ -211,24 +215,26 @@ export function TertiaryButton({
 }: TertiaryToolProps): JSX.Element {
   return (
     <Tooltip label={label[0].toUpperCase() + label.slice(1)} kbd={kbd}>
-      <TertiaryToolButton
+      <button
+        className={tertiaryToolButton({
+          bp: {
+            '@initial': 'mobile',
+            '@sm': 'small',
+            '@md': 'medium',
+            '@lg': 'large',
+          },
+        })}
         name={label}
-        bp={{
-          '@initial': 'mobile',
-          '@sm': 'small',
-          '@md': 'medium',
-          '@lg': 'large',
-        }}
         onClick={onClick}
         onDoubleClick={onDoubleClick}
       >
         {children}
-      </TertiaryToolButton>
+      </button>
     </Tooltip>
   )
 }
 
-export const TertiaryButtonsContainer = styled(FloatingContainer, {
+export const tertiaryButtonsContainer = css(floatingContainer, {
   boxShadow: '$3',
   variants: {
     bp: {

packages/tldraw/src/components/tools-panel/tools-panel.tsx

@@ -9,11 +9,11 @@ import {
   SquareIcon,
   TextIcon,
 } from '@radix-ui/react-icons'
-import styled from '~styles'
+import css from '~styles'
 import { Data, TLDrawShapeType } from '~types'
 import { useTLDrawContext } from '~hooks'
 import { StatusBar } from './status-bar'
-import { FloatingContainer } from '../shared'
+import { floatingContainer } from '../shared'
 import { PrimaryButton, SecondaryButton } from './styled'
 import { UndoRedo } from './undo-redo'
 import { Zoom } from './zoom'
@@ -57,10 +57,10 @@ export const ToolsPanel = React.memo((): JSX.Element => {
   }, [tlstate])
 
   return (
-    <ToolsPanelContainer>
-      <LeftWrap size={{ '@initial': 'mobile', '@sm': 'small' }}>
+    <div className={toolsPanelContainer()}>
+      <div className={leftWrap({ size: { '@initial': 'mobile', '@sm': 'small' } })}>
         <Zoom />
-        <FloatingContainer>
+        <div className={floatingContainer()}>
           <SecondaryButton
             label={'Select'}
             kbd={'1'}
@@ -69,11 +69,11 @@ export const ToolsPanel = React.memo((): JSX.Element => {
           >
             <CursorArrowIcon />
           </SecondaryButton>
-        </FloatingContainer>
-      </LeftWrap>
-      <CenterWrap>
+        </div>
+      </div>
+      <div className={centerWrap()}>
         <BackToContent />
-        <FloatingContainer>
+        <div className={floatingContainer()}>
           <PrimaryButton
             kbd={'2'}
             label={TLDrawShapeType.Draw}
@@ -114,10 +114,10 @@ export const ToolsPanel = React.memo((): JSX.Element => {
           >
             <TextIcon />
           </PrimaryButton>
-        </FloatingContainer>
-      </CenterWrap>
-      <RightWrap size={{ '@initial': 'mobile', '@sm': 'small' }}>
-        <FloatingContainer>
+        </div>
+      </div>
+      <div className={rightWrap({ size: { '@initial': 'mobile', '@sm': 'small' } })}>
+        <div className={floatingContainer()}>
           <SecondaryButton
             kbd={'7'}
             label={'Lock Tool'}
@@ -126,19 +126,19 @@ export const ToolsPanel = React.memo((): JSX.Element => {
           >
             {isToolLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
           </SecondaryButton>
-        </FloatingContainer>
+        </div>
         <UndoRedo />
-      </RightWrap>
+      </div>
       {isDebugMode && (
-        <StatusWrap>
+        <div className={statusWrap()}>
           <StatusBar />
-        </StatusWrap>
+        </div>
       )}
-    </ToolsPanelContainer>
+    </div>
   )
 })
 
-const ToolsPanelContainer = styled('div', {
+const toolsPanelContainer = css({
   position: 'absolute',
   bottom: 0,
   left: 0,
@@ -160,7 +160,7 @@ const ToolsPanelContainer = styled('div', {
   },
 })
 
-const CenterWrap = styled('div', {
+const centerWrap = css({
   gridRow: 1,
   gridColumn: 2,
   display: 'flex',
@@ -171,7 +171,7 @@ const CenterWrap = styled('div', {
   gap: 12,
 })
 
-const LeftWrap = styled('div', {
+const leftWrap = css({
   gridRow: 1,
   gridColumn: 1,
   display: 'flex',
@@ -198,7 +198,7 @@ const LeftWrap = styled('div', {
   },
 })
 
-const RightWrap = styled('div', {
+const rightWrap = css({
   gridRow: 1,
   gridColumn: 3,
   display: 'flex',
@@ -225,7 +225,7 @@ const RightWrap = styled('div', {
   },
 })
 
-const StatusWrap = styled('div', {
+const statusWrap = css({
   gridRow: 2,
   gridColumn: '1 / span 3',
 })

packages/tldraw/src/components/tools-panel/undo-redo.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useTLDrawContext } from '~hooks'
-import { TertiaryButton, TertiaryButtonsContainer } from './styled'
+import { TertiaryButton, tertiaryButtonsContainer } from './styled'
 import { Undo, Redo, Trash } from '../icons'
 
 export const UndoRedo = React.memo((): JSX.Element => {
@@ -15,7 +15,7 @@ export const UndoRedo = React.memo((): JSX.Element => {
   }, [tlstate])
 
   return (
-    <TertiaryButtonsContainer bp={{ '@initial': 'mobile', '@sm': 'small' }}>
+    <div className={tertiaryButtonsContainer({ bp: { '@initial': 'mobile', '@sm': 'small' } })}>
       <TertiaryButton label="Undo" kbd="#Z" onClick={tlstate.undo}>
         <Undo />
       </TertiaryButton>
@@ -25,6 +25,6 @@ export const UndoRedo = React.memo((): JSX.Element => {
       <TertiaryButton label="Delete" kbd="⌫" onClick={handleDelete} onDoubleClick={handleClear}>
         <Trash />
       </TertiaryButton>
-    </TertiaryButtonsContainer>
+    </div>
   )
 })

packages/tldraw/src/components/tools-panel/zoom.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { ZoomInIcon, ZoomOutIcon } from '@radix-ui/react-icons'
-import { TertiaryButton, TertiaryButtonsContainer } from './styled'
+import { TertiaryButton, tertiaryButtonsContainer } from './styled'
 import { useTLDrawContext } from '~hooks'
 import type { Data } from '~types'
 
@@ -8,7 +8,7 @@ export const Zoom = React.memo((): JSX.Element => {
   const { tlstate } = useTLDrawContext()
 
   return (
-    <TertiaryButtonsContainer bp={{ '@initial': 'mobile', '@sm': 'small' }}>
+    <div className={tertiaryButtonsContainer({ bp: { '@initial': 'mobile', '@sm': 'small' } })}>
       <TertiaryButton label="Zoom Out" kbd={`#−`} onClick={tlstate.zoomOut}>
         <ZoomOutIcon />
       </TertiaryButton>
@@ -16,7 +16,7 @@ export const Zoom = React.memo((): JSX.Element => {
         <ZoomInIcon />
       </TertiaryButton>
       <ZoomCounter />
-    </TertiaryButtonsContainer>
+    </div>
   )
 })
 

packages/tldraw/src/shape/shapes/text/text.tsx

@@ -4,7 +4,7 @@ import { HTMLContainer, TLBounds, Utils, ShapeUtil } from '@tldraw/core'
 import { Vec } from '@tldraw/vec'
 import { getShapeStyle, getFontStyle, defaultStyle } from '~shape/shape-styles'
 import { TextShape, TLDrawShapeType, TLDrawToolType, TLDrawMeta } from '~types'
-import styled from '~styles'
+import css from '~styles'
 import TextAreaUtils from './text-utils'
 
 const LETTER_SPACING = -1.5
@@ -162,9 +162,9 @@ export const Text = new ShapeUtil<TextShape, HTMLDivElement, TLDrawMeta>(() => (
 
     return (
       <HTMLContainer ref={ref} {...events}>
-        <StyledWrapper isEditing={isEditing} onPointerDown={handlePointerDown}>
-          <StyledTextArea
-            id={shape.id + '_svg'}
+        <div className={wrapper({ isEditing })} onPointerDown={handlePointerDown}>
+          <textarea
+            className={textArea({ isEditing, isBinding })}
             ref={rInput}
             style={{
               font,
@@ -185,14 +185,12 @@ export const Text = new ShapeUtil<TextShape, HTMLDivElement, TLDrawMeta>(() => (
             onKeyDown={handleKeyDown}
             onPointerDown={handlePointerDown}
             autoFocus={isEditing}
-            isEditing={isEditing}
-            isBinding={isBinding}
             readOnly={!isEditing}
             wrap="off"
             dir="auto"
             datatype="wysiwyg"
           />
-        </StyledWrapper>
+        </div>
       </HTMLContainer>
     )
   },
@@ -298,7 +296,7 @@ export const Text = new ShapeUtil<TextShape, HTMLDivElement, TLDrawMeta>(() => (
 /*                       Helpers                      */
 /* -------------------------------------------------- */
 
-const StyledWrapper = styled('div', {
+const wrapper = css({
   width: '100%',
   height: '100%',
   variants: {
@@ -313,7 +311,7 @@ const StyledWrapper = styled('div', {
   },
 })
 
-const StyledTextArea = styled('textarea', {
+const textArea = css({
   position: 'absolute',
   top: 'var(--tl-padding)',
   left: 'var(--tl-padding)',

packages/tldraw/src/styles/index.ts

@@ -1,5 +1,5 @@
-import styled from './stitches.config'
+import css from './stitches.config'
 
 export * from './stitches.config'
 
-export default styled
+export default css

packages/tldraw/src/styles/stitches.config.ts

@@ -1,6 +1,6 @@
-import { createStitches, defaultThemeMap } from '@stitches/react'
+import { createStitches, defaultThemeMap } from '@stitches/core'
 
-const { styled, css, createTheme, getCssText } = createStitches({
+const { css, createTheme, getCssText } = createStitches({
   themeMap: {
     ...defaultThemeMap,
   },
@@ -134,6 +134,6 @@ const dark = createTheme({
   },
 })
 
-export default styled
+export default css
 
-export { css, getCssText, dark }
+export { getCssText, dark }

packages/vec/package.json

@@ -42,12 +42,10 @@
     "esbuild": "^0.12.24",
     "eslint": "^7.32.0",
     "lerna": "^4.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "ts-node": "^10.2.1",
     "tslib": "^2.3.1",
     "typedoc": "^0.22.3",
     "typescript": "^4.4.2"
   },
   "gitHead": "5cb031ddc264846ec6732d7179511cddea8ef034"
-}
+}

packages/www/package.json

@@ -34,4 +34,4 @@
     "typescript": "^4.4.2"
   },
   "gitHead": "838fabdbff1a66d4d7ee8aa5c5d117bc55acbff2"
-}
+}

packages/www/pages/sponsorware.tsx

@@ -1,4 +1,4 @@
-import styled from 'styles'
+import css from 'styles'
 import { getSession, signin, signout, useSession } from 'next-auth/client'
 import { GetServerSideProps } from 'next'
 import Link from 'next/link'
@@ -13,11 +13,13 @@ export default function Sponsorware(): JSX.Element {
       <Head>
         <title>tldraw</title>
       </Head>
-      <OuterContent>
-        <Content
-          size={{
-            '@sm': 'small',
-          }}
+      <div className={outerContent()}>
+        <div
+          className={content({
+            size: {
+              '@sm': 'small',
+            },
+          })}
         >
           <h1>tldraw (is sponsorware)</h1>
           <p>
@@ -50,13 +52,13 @@ export default function Sponsorware(): JSX.Element {
             </a>{' '}
             (at any level) and sign in below.
           </p>
-          <ButtonGroup>
+          <div className={buttonGroup()}>
             {session ? (
               <>
-                <Button onClick={() => signout()} variant={'secondary'}>
+                <button className={button({ variant: 'secondary' })} onClick={() => signout()}>
                   Sign Out
-                </Button>
-                <Detail>
+                </button>
+                <p className={detail()}>
                   Signed in as {session?.user?.name} ({session?.user?.email}), but it looks like
                   you&apos;re not yet a sponsor.
                   <br />
@@ -69,19 +71,19 @@ export default function Sponsorware(): JSX.Element {
                     Twitter
                   </a>
                   .
-                </Detail>
+                </p>
               </>
             ) : (
               <>
-                <Button onClick={() => signin('github')} variant={'primary'}>
+                <button className={button({ variant: 'primary' })} onClick={() => signin('github')}>
                   {loading ? 'Loading...' : 'Sign in With Github'}
-                </Button>
-                <Detail>Already a sponsor? Just sign in to visit the app.</Detail>
+                </button>
+                <p className={detail()}>Already a sponsor? Just sign in to visit the app.</p>
               </>
             )}
-          </ButtonGroup>
-        </Content>
-      </OuterContent>
+          </div>
+        </div>
+      </div>
     </>
   )
 }
@@ -96,7 +98,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   }
 }
 
-const OuterContent = styled('div', {
+const outerContent = css({
   backgroundColor: '$canvas',
   padding: '8px 8px 64px 8px',
   margin: '0 auto',
@@ -113,7 +115,7 @@ const OuterContent = styled('div', {
   height: '100%',
 })
 
-const Content = styled('div', {
+const content = css({
   width: '720px',
   padding: '8px 16px',
   maxWidth: '100%',
@@ -161,18 +163,18 @@ const Content = styled('div', {
   },
 })
 
-const ButtonGroup = styled('div', {
+const buttonGroup = css({
   display: 'grid',
   gap: '16px',
   margin: '40px 0 32px 0',
 })
 
-const Detail = styled('p', {
+const detail = css({
   fontSize: '$2',
   textAlign: 'center',
 })
 
-const Button = styled('button', {
+const button = css({
   cursor: 'pointer',
   width: '100%',
   padding: '12px 0',

packages/www/styles/index.ts

@@ -1,4 +1,4 @@
-import styled, { css, getCssText, globalStyles, light, dark } from './stitches.config'
+import css, { getCssText, globalStyles, light, dark } from './stitches.config'
 
-export default styled
-export { css, getCssText, globalStyles, light, dark }
+export default css
+export { getCssText, globalStyles, light, dark }

packages/www/styles/stitches.config.ts

@@ -1,6 +1,6 @@
-import { createStitches, defaultThemeMap } from '@stitches/react'
+import { createStitches, defaultThemeMap } from '@stitches/core'
 
-const { styled, css, globalCss, createTheme, getCssText } = createStitches({
+const { css, globalCss, createTheme, getCssText } = createStitches({
   themeMap: {
     ...defaultThemeMap,
   },
@@ -140,6 +140,6 @@ const globalStyles = globalCss({
   '*': { boxSizing: 'border-box' },
 })
 
-export default styled
+export default css
 
-export { css, getCssText, globalStyles, light, dark }
+export { getCssText, globalStyles, light, dark }

yarn.lock

@@ -164,18 +164,18 @@
     "@babel/types" "^7.15.4"
 
 "@babel/helper-module-transforms@^7.14.5", "@babel/helper-module-transforms@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.15.4.tgz#962cc629a7f7f9a082dd62d0307fa75fe8788d7c"
-  integrity sha512-9fHHSGE9zTC++KuXLZcB5FKgvlV83Ox+NLUmQTawovwlJ85+QMhk1CnVk406CQVj97LaWod6KVjl2Sfgw9Aktw==
+  version "7.15.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.15.7.tgz#7da80c8cbc1f02655d83f8b79d25866afe50d226"
+  integrity sha512-ZNqjjQG/AuFfekFTY+7nY4RgBSklgTu970c7Rj3m/JOhIu5KPBUuTA9AY6zaKcUvk4g6EbDXdBnhi35FAssdSw==
   dependencies:
     "@babel/helper-module-imports" "^7.15.4"
     "@babel/helper-replace-supers" "^7.15.4"
     "@babel/helper-simple-access" "^7.15.4"
     "@babel/helper-split-export-declaration" "^7.15.4"
-    "@babel/helper-validator-identifier" "^7.14.9"
+    "@babel/helper-validator-identifier" "^7.15.7"
     "@babel/template" "^7.15.4"
     "@babel/traverse" "^7.15.4"
-    "@babel/types" "^7.15.4"
+    "@babel/types" "^7.15.6"
 
 "@babel/helper-optimise-call-expression@^7.15.4":
   version "7.15.4"
@@ -229,10 +229,10 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
-"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9":
-  version "7.14.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
-  integrity sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==
+"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.15.7":
+  version "7.15.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
+  integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
 
 "@babel/helper-validator-option@^7.14.5":
   version "7.14.5"
@@ -268,9 +268,9 @@
     js-tokens "^4.0.0"
 
 "@babel/parser@^7.1.0", "@babel/parser@^7.15.4", "@babel/parser@^7.15.5", "@babel/parser@^7.7.2":
-  version "7.15.6"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.6.tgz#043b9aa3c303c0722e5377fef9197f4cf1796549"
-  integrity sha512-S/TSCcsRuCkmpUuoWijua0Snt+f3ewU/8spLo+4AXJCZfT0bVCzLD5MuOKdrx0mlAptbKzn5AdgEIIKXxXkz9Q==
+  version "7.15.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.7.tgz#0c3ed4a2eb07b165dfa85b3cc45c727334c4edae"
+  integrity sha512-rycZXvQ+xS9QyIcJ9HXeDWf1uxqlbVFAUq0Rq0dbc50Zb/+wUe/ehyfzGfm9KZZF0kBejYgxltBXocP+gKdL2g==
 
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.15.4":
   version "7.15.4"
@@ -2884,9 +2884,9 @@
     read-package-json-fast "^2.0.1"
 
 "@octokit/auth-token@^2.4.0", "@octokit/auth-token@^2.4.4":
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-2.4.5.tgz#568ccfb8cb46f36441fac094ce34f7a875b197f3"
-  integrity sha512-BpGYsPgJt05M7/L/5FoE1PiAbdxXFZkX/3kDYcsvd1v6UhlnE5e96dTDr0ezX/EFwciQxf3cNV0loipsURU+WA==
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-2.5.0.tgz#27c37ea26c205f28443402477ffd261311f21e36"
+  integrity sha512-r5FVUJCOLl19AxiuZD2VRZ/ORjp/4IN98Of6YJoJOkY75CIBuYfmiNHGrDwXr+aLGG55igl9QrxX3hbiXlLb+g==
   dependencies:
     "@octokit/types" "^6.0.3"
 
@@ -2921,10 +2921,10 @@
     "@octokit/types" "^6.0.3"
     universal-user-agent "^6.0.0"
 
-"@octokit/openapi-types@^10.1.5":
-  version "10.1.5"
-  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-10.1.5.tgz#deafbec805896ae963d7d3846e70b18003cafda1"
-  integrity sha512-OoShNYzhAU8p8JbGHe1rRs1GIErRtmN2230AQCJAjL5lc0AUU5OhppVe6693HIZ2eCBLUhoLPhnnnmQ5ASH7Wg==
+"@octokit/openapi-types@^10.2.2":
+  version "10.2.2"
+  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-10.2.2.tgz#6c1c839d7d169feabaf1d2a69c79439c75d979cd"
+  integrity sha512-EVcXQ+ZrC04cg17AMg1ofocWMxHDn17cB66ZHgYc0eUwjFtxS0oBzkyw2VqIrHBwVgtfoYrq1WMQfQmMjUwthw==
 
 "@octokit/plugin-enterprise-rest@^6.0.1":
   version "6.0.1"
@@ -2939,11 +2939,11 @@
     "@octokit/types" "^2.0.1"
 
 "@octokit/plugin-paginate-rest@^2.16.0":
-  version "2.16.2"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.16.2.tgz#9ca5bebbaf3e6672b345502f89ae4ef3be6c2ddd"
-  integrity sha512-WF5/MTPnFgYH6rMGuxBvbxX2S/3ygNWylakgD7njKES0Qwk5e+d/L6r/BYXSw7B6xJJ3hlwIAmUmOxxYrR+Q8A==
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.16.3.tgz#6dbf74a12a53e04da6ca731d4c93f20c0b5c6fe9"
+  integrity sha512-kdc65UEsqze/9fCISq6BxLzeB9qf0vKvKojIfzgwf4tEF+Wy6c9dXnPFE6vgpoDFB1Z5Jek5WFVU6vL1w22+Iw==
   dependencies:
-    "@octokit/types" "^6.27.2"
+    "@octokit/types" "^6.28.1"
 
 "@octokit/plugin-request-log@^1.0.0", "@octokit/plugin-request-log@^1.0.4":
   version "1.0.4"
@@ -2959,11 +2959,11 @@
     deprecation "^2.3.1"
 
 "@octokit/plugin-rest-endpoint-methods@^5.9.0":
-  version "5.10.3"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.10.3.tgz#9207e8e893d980d7828d85950bbb460b187146f2"
-  integrity sha512-eAT4gje+VR9xdSlhuHWNXsNLpiODqdqz8jqShMgaxRH82Le2nS6EV6LAo3QPZ05Fso5oGmDfJF6eq9vs1cEhdA==
+  version "5.10.4"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.10.4.tgz#97e85eb7375e30b9bf193894670f9da205e79408"
+  integrity sha512-Dh+EAMCYR9RUHwQChH94Skl0lM8Fh99auT8ggck/xTzjJrwVzvsd0YH68oRPqp/HxICzmUjLfaQ9sy1o1sfIiA==
   dependencies:
-    "@octokit/types" "^6.27.2"
+    "@octokit/types" "^6.28.1"
     deprecation "^2.3.1"
 
 "@octokit/request-error@^1.0.2":
@@ -3035,12 +3035,12 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@octokit/types@^6.0.3", "@octokit/types@^6.16.1", "@octokit/types@^6.27.2":
-  version "6.27.2"
-  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.27.2.tgz#b6f88d002aa06104f46ccaec0aaa8a5de1bf262c"
-  integrity sha512-AgajmAJh7LhStgaEaNoY1N7znst2q07CKZVdnVB/V4tmitMbk+qijmD0IkkSKulXE5RVLbJjQikJF9+XLqhsVA==
+"@octokit/types@^6.0.3", "@octokit/types@^6.16.1", "@octokit/types@^6.28.1":
+  version "6.28.1"
+  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.28.1.tgz#ab990d1fe952226055e81c7650480e6bacfb877c"
+  integrity sha512-XlxDoQLFO5JnFZgKVQTYTvXRsQFfr/GwDUU108NJ9R5yFPkA2qXhTJjYuul3vE4eLXP40FA2nysOu2zd6boE+w==
   dependencies:
-    "@octokit/openapi-types" "^10.1.5"
+    "@octokit/openapi-types" "^10.2.2"
 
 "@panva/asn1.js@^1.0.0":
   version "1.0.0"
@@ -3576,10 +3576,15 @@
   resolved "https://registry.yarnpkg.com/@sqltools/formatter/-/formatter-1.2.3.tgz#1185726610acc37317ddab11c3c7f9066966bd20"
   integrity sha512-O3uyB/JbkAEMZaP3YqyHH7TMnex7tWyCbCI4EfJdOCoN6HIhqdJBWTM6aCCiWQ/5f5wxjgU735QAIpJbjDvmzg==
 
+"@stitches/core@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@stitches/core/-/core-1.2.0.tgz#5d507e1d27af1363265dbfdfd419d8e11262efce"
+  integrity sha512-UjZHg9aWpqnRGtyewmNFEwtceRAiK7O1CjAGTBtN9bbw2N02SRZFYCTLUMxpFZi4J7juBQJKxbc7yvi+Y4Qg2g==
+
 "@stitches/react@^1.0.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@stitches/react/-/react-1.1.0.tgz#49342e085528d689b983682e112b79c5a0b0efb4"
-  integrity sha512-g1XZsmB3tFL5i9aaBx0+P4C83j3vf/PEmLc5e9PlumE5c6q3zsdbbOVr4ZC52eGm4MCvM+2bbAJ++rtTUa6ahw==
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@stitches/react/-/react-1.2.0.tgz#cdb69256d76bcb4753417d59bc42da21fd603ba1"
+  integrity sha512-GuMh610X3oJB2pdywARg1jccjAEvrDbq4iwy1SernR/4o1FX5SOTJZIjC4CquagZQjL00KFV8Cwfq/12FS6aBg==
 
 "@surma/rollup-plugin-off-main-thread@^1.4.1":
   version "1.4.2"
@@ -3762,14 +3767,14 @@
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
 "@types/node@*", "@types/node@>= 8", "@types/node@^16.7.10":
-  version "16.9.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.9.1.tgz#0611b37db4246c937feef529ddcc018cf8e35708"
-  integrity sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==
+  version "16.9.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.9.4.tgz#a12f0ee7847cf17a97f6fdf1093cb7a9af23cca4"
+  integrity sha512-KDazLNYAGIuJugdbULwFZULF9qQ13yNWEBFnfVpqlpgAAo6H/qnM9RjBgh0A0kmHf3XxAKLdN5mTIng9iUvVLA==
 
 "@types/node@^14.14.35":
-  version "14.17.15"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.15.tgz#d5ebfb62a69074ebb85cbe0529ad917bb8f2bae8"
-  integrity sha512-D1sdW0EcSCmNdLKBGMYb38YsHUS6JcM7yQ6sLQ9KuZ35ck7LYCKE7kYFHOO59ayFOY3zobWVZxf4KXhYHcHYFA==
+  version "14.17.17"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.17.tgz#4ec7b71bbcb01a4e55455b60b18b1b6a783fe31d"
+  integrity sha512-niAjcewgEYvSPCZm3OaM9y6YQrL2SEPH9PymtE6fuZAvFiP6ereCcvApGl2jKTq7copTIguX3PBvfP08LN4LvQ==
 
 "@types/node@^15.0.1":
   version "15.14.9"
@@ -3796,7 +3801,14 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
-"@types/react-dom@^17.0.2", "@types/react-dom@^17.0.9":
+"@types/react-dom@^16.9.9":
+  version "16.9.14"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.14.tgz#674b8f116645fe5266b40b525777fc6bb8eb3bcd"
+  integrity sha512-FIX2AVmPTGP30OUJ+0vadeIFJJ07Mh1m+U0rxfgyW34p3rTlXI+nlenvAxNn4BP36YyI9IJ/+UJ7Wu22N1pI7A==
+  dependencies:
+    "@types/react" "^16"
+
+"@types/react-dom@^17.0.9":
   version "17.0.9"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.9.tgz#441a981da9d7be117042e1a6fd3dac4b30f55add"
   integrity sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==
@@ -3804,9 +3816,9 @@
     "@types/react" "*"
 
 "@types/react-router-dom@^5.1.8":
-  version "5.1.8"
-  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.8.tgz#bf3e1c8149b3d62eaa206d58599de82df0241192"
-  integrity sha512-03xHyncBzG0PmDmf8pf3rehtjY0NpUj7TIN46FrT5n1ZWHPZvXz32gUyNboJ+xsL8cpg8bQVLcllptcQHvocrw==
+  version "5.1.9"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.9.tgz#e8a8f687351ecc8c68bb4161d7e4b9df4994416e"
+  integrity sha512-Go0vxZSigXTyXx8xPkGiBrrc3YbBs82KE14WENMLS6TSUKcRFSmYVbL19zFOnNFqJhqrPqEs2h5eUpJhSRrwZw==
   dependencies:
     "@types/history" "*"
     "@types/react" "*"
@@ -3820,10 +3832,19 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^17.0.16", "@types/react@^17.0.19", "@types/react@^17.0.3":
-  version "17.0.20"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.20.tgz#a4284b184d47975c71658cd69e759b6bd37c3b8c"
-  integrity sha512-wWZrPlihslrPpcKyCSlmIlruakxr57/buQN1RjlIeaaTWDLtJkTtRW429MoQJergvVKc4IWBpRhWw7YNh/7GVA==
+"@types/react@*", "@types/react@^17.0.19":
+  version "17.0.21"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.21.tgz#069c43177cd419afaab5ce26bb4e9056549f7ea6"
+  integrity sha512-GzzXCpOthOjXvrAUFQwU/svyxu658cwu00Q9ugujS4qc1zXgLFaO0kS2SLOaMWLt2Jik781yuHCWB7UcYdGAeQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/react@^16", "@types/react@^16.9.55":
+  version "16.14.15"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.15.tgz#95d8fa3148050e94bcdc5751447921adbe19f9e6"
+  integrity sha512-jOxlBV9RGZhphdeqJTCv35VZOkjY+XIEY2owwSk84BNDdDv2xS6Csj6fhi+B/q30SR9Tz8lDNt/F2Z5RF3TrRg==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -3982,17 +4003,17 @@
     "@typescript-eslint/types" "4.31.1"
     eslint-visitor-keys "^2.0.0"
 
-"@use-gesture/core@^10.0.0-beta.25":
-  version "10.0.0-beta.25"
-  resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.0.0-beta.25.tgz#4e652cb5ef679bd04a213ef0952d9e95a48960ef"
-  integrity sha512-of0lh9pMjsps6Xxn9CqLd8dJynpWvqvHMmhcY8HelLopEDAKusCSM2ACrx+gR83hBKjYrmJBXuwfMLUebZFCrA==
+"@use-gesture/core@^10.0.0-beta.26":
+  version "10.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.0.0-beta.26.tgz#275a69ed65c6463cb59872a6f0b24b66212e8bf5"
+  integrity sha512-Y+fwWlYHzGlc/c4aE3fUkQy7cE4+Tbd1CWQqAlO4czN2nGpgZksW7V98FMgCHrmMGXi+VdNSTS8WBHmw8kq3Zg==
 
 "@use-gesture/react@^10.0.0-beta.24":
-  version "10.0.0-beta.25"
-  resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.0.0-beta.25.tgz#f3034aa4fb539fefec7b44468265238b92a89594"
-  integrity sha512-bXwlYRP503Tl6iK+WxVH9Tm/S5C7lBSdKWgahEKcV6N0NKqCVkkMqz1Nrbmd51Hrexa4JGpoxNvZ7tzrVDfedw==
+  version "10.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.0.0-beta.26.tgz#9b5c3a9111d6cda62de125612fb830efcc1df571"
+  integrity sha512-TENwg1CgB+okRTBWvcMtEaKYgQvktU0ezG4sQdo/mqZXNvTzuk9g/qK4v++8UzIhj/srqRp49NPBbY0qzsgg1w==
   dependencies:
-    "@use-gesture/core" "^10.0.0-beta.25"
+    "@use-gesture/core" "^10.0.0-beta.26"
 
 "@zkochan/cmd-shim@^3.1.0":
   version "3.1.0"
@@ -4167,9 +4188,9 @@ ansi-regex@^4.1.0:
   integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
 
 ansi-regex@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
-  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
 ansi-styles@^2.2.1:
   version "2.2.1"
@@ -4298,7 +4319,7 @@ array-ify@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece"
   integrity sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=
 
-array-includes@^3.1.1, array-includes@^3.1.2, array-includes@^3.1.3:
+array-includes@^3.1.1, array-includes@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.3.tgz#c7f619b382ad2afaf5326cddfdc0afc61af7690a"
   integrity sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==
@@ -4999,9 +5020,9 @@ camelcase@^6.2.0:
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
 caniuse-lite@^1.0.30001202, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001228, caniuse-lite@^1.0.30001254:
-  version "1.0.30001257"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001257.tgz#150aaf649a48bee531104cfeda57f92ce587f6e5"
-  integrity sha512-JN49KplOgHSXpIsVSF+LUyhD8PUp6xPpAXeRrrcBh4KBeP7W864jHn6RvzJgDlrReyeVjMFJL3PLpPvKIxlIHA==
+  version "1.0.30001258"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001258.tgz#b604eed80cc54a578e4bf5a02ae3ed49f869d252"
+  integrity sha512-RBByOG6xWXUp0CR2/WU2amXz3stjKpSl5J1xU49F1n2OxD//uBZO4wCKUiG+QMGf7CHGfDDcqoKriomoGVxTeA==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -5539,17 +5560,17 @@ copy-descriptor@^0.1.0:
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
 core-js-compat@^3.14.0, core-js-compat@^3.16.0:
-  version "3.17.3"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.17.3.tgz#b39c8e4dec71ecdc735c653ce5233466e561324e"
-  integrity sha512-+in61CKYs4hQERiADCJsdgewpdl/X0GhEX77pjKgbeibXviIt2oxEjTc8O2fqHX8mDdBrDvX8MYD/RYsBv4OiA==
+  version "3.18.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.18.0.tgz#fb360652201e8ac8da812718c008cd0482ed9b42"
+  integrity sha512-tRVjOJu4PxdXjRMEgbP7lqWy1TWJu9a01oBkn8d+dNrhgmBwdTkzhHZpVJnEmhISLdoJI1lX08rcBcHi3TZIWg==
   dependencies:
     browserslist "^4.17.0"
     semver "7.0.0"
 
 core-js-pure@^3.16.0:
-  version "3.17.3"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.17.3.tgz#98ea3587188ab7ef4695db6518eeb71aec42604a"
-  integrity sha512-YusrqwiOTTn8058JDa0cv9unbXdIiIgcgI9gXso0ey4WgkFLd3lYlV9rp9n7nDCsYxXsMDTjA4m1h3T348mdlQ==
+  version "3.18.0"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.18.0.tgz#e5187347bae66448c9e2d67c01c34c4df3261dc5"
+  integrity sha512-ZnK+9vyuMhKulIGqT/7RHGRok8RtkHMEX/BGPHkHx+ouDkq+MUvf9mfIgdqhpmPDu8+V5UtRn/CbCRc9I4lX4w==
 
 core-js@^2.5.3:
   version "2.6.12"
@@ -5771,9 +5792,9 @@ data-urls@^2.0.0:
     whatwg-url "^8.0.0"
 
 date-fns@^2.16.1:
-  version "2.23.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.23.0.tgz#4e886c941659af0cf7b30fafdd1eaa37e88788a9"
-  integrity sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA==
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.24.0.tgz#7d86dc0d93c87b76b63d213b4413337cfd1c105d"
+  integrity sha512-6ujwvwgPID6zbI0o7UbURi2vlLDR9uP26+tW6Lg+Ji3w7dd0i3DOcjcClLjLPranT60SSEFBwdSyYwn/ZkPIuw==
 
 dateformat@^3.0.0:
   version "3.0.3"
@@ -6094,9 +6115,9 @@ ejs@^2.6.1:
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
 electron-to-chromium@^1.3.723, electron-to-chromium@^1.3.830:
-  version "1.3.838"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.838.tgz#d178b34a268c750c0444ba69e4c94d4c4fb3aa0d"
-  integrity sha512-65O6UJiyohFAdX/nc6KJ0xG/4zOn7XCO03kQNNbCeMRGxlWTLzc6Uyi0tFNQuuGWqySZJi8CD2KXPXySVYmzMA==
+  version "1.3.843"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.843.tgz#671489bd2f59fd49b76adddc1aa02c88cd38a5c0"
+  integrity sha512-OWEwAbzaVd1Lk9MohVw8LxMXFlnYd9oYTYxfX8KS++kLLjDfbovLOcEEXwRhG612dqGQ6+44SZvim0GXuBRiKg==
 
 elliptic@^6.5.3:
   version "6.5.4"
@@ -6370,9 +6391,9 @@ eslint-plugin-react-hooks@^4.2.0:
   integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==
 
 eslint-plugin-react@^7.23.1:
-  version "7.25.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.25.1.tgz#9286b7cd9bf917d40309760f403e53016eda8331"
-  integrity sha512-P4j9K1dHoFXxDNP05AtixcJEvIT6ht8FhYKsrkY0MPCPaUMYijhpWwNiRDZVtA8KFuZOkGSeft6QwH8KuVpJug==
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.25.2.tgz#d567a217d306b76dd110561f28074e2328ae38f8"
+  integrity sha512-elx4585wgmryanJK4C5IoSKQyVZ+e7H0t2JOOtJNBql0cuercvSShvRReuLBbfx8687yW5yv+UL7pXwMsd6adQ==
   dependencies:
     array-includes "^3.1.3"
     array.prototype.flatmap "^1.2.4"
@@ -8809,11 +8830,11 @@ jsprim@^1.2.2:
     verror "1.10.0"
 
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz#41108d2cec408c3453c1bbe8a4aae9e1e2bd8f82"
-  integrity sha512-EIsmt3O3ljsU6sot/J4E1zDRxfBNrhjyf/OKjlydwgEimQuznlM4Wv7U+ueONJMyEn1WRE0K8dhi3dVAXYT24Q==
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b"
+  integrity sha512-uP5vu8xfy2F9A6LGC22KO7e2/vGTS1MhP+18f++ZNlf0Ohaxbc9nIEwHAsejlJKyzfZzU5UIhe5ItYkitcZnZA==
   dependencies:
-    array-includes "^3.1.2"
+    array-includes "^3.1.3"
     object.assign "^4.1.2"
 
 jwa@^1.4.1:
@@ -9318,9 +9339,9 @@ map-obj@^2.0.0:
   integrity sha1-plzSkIepJZi4eRJXpSPgISIqwfk=
 
 map-obj@^4.0.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.2.1.tgz#e4ea399dbc979ae735c83c863dd31bdf364277b7"
-  integrity sha512-+WA2/1sPmDj1dlvvJmB5G6JKfY9dpn7EVBUL06+y6PoljPkh+6V1QihwxNkbcGxCRjt2b0F9K0taiCuo7MbdFQ==
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
+  integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
 map-visit@^1.0.0:
   version "1.0.0"
@@ -9329,10 +9350,10 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-marked@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-3.0.3.tgz#d81ff0f9e29cef0a177327fe009b460f31aa5862"
-  integrity sha512-4oIDhVSQ2s+xNCfek9OnZgCQR/WykGCom02JzIIvi4Pme+MIwPYqvGVW8CQWOXeoZu0TtVB6pTxIuoLm+dKqDA==
+marked@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-3.0.4.tgz#b8a1539e5e05c6ea9e93f15c0bad1d54ce890406"
+  integrity sha512-jBo8AOayNaEcvBhNobg6/BLhdsK3NvnKWJg33MAAPbvTWiG4QBn9gpW1+7RssrKu4K1dKlN+0goVQwV41xEfOA==
 
 md5.js@^1.3.4:
   version "1.3.5"
@@ -9566,9 +9587,9 @@ minipass@^2.3.5, minipass@^2.6.0, minipass@^2.9.0:
     yallist "^3.0.0"
 
 minipass@^3.0.0, minipass@^3.1.0, minipass@^3.1.1, minipass@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
-  integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.5.tgz#71f6251b0a33a49c01b3cf97ff77eda030dff732"
+  integrity sha512-+8NzxD82XQoNKNrl1d/FSi+X8wAEWR+sbYAfIvub4Nz0d22plFG72CEVVaufV8PNf4qSslFTD8VMOxNVhHCjTw==
   dependencies:
     yallist "^4.0.0"
 
@@ -11108,7 +11129,7 @@ raw-body@2.4.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react-dom@17.0.2, react-dom@^17.0.2:
+react-dom@17.0.2, "react-dom@^16.8 || ^17.0", react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
   integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
@@ -11196,7 +11217,7 @@ react-style-singleton@^2.1.0:
     invariant "^2.2.4"
     tslib "^1.0.0"
 
-react@17.0.2, react@^17.0.2:
+react@17.0.2, react@>=16.8, react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
@@ -11401,14 +11422,14 @@ reflect-metadata@^0.1.13:
   resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.13.tgz#67ae3ca57c972a2aa1642b10fe363fe32d49dc08"
   integrity sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==
 
-regenerate-unicode-properties@^8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
-  integrity sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==
+regenerate-unicode-properties@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz#54d09c7115e1f53dc2314a974b32c1c344efe326"
+  integrity sha512-3E12UeNSPfjrgwjkR81m5J7Aw/T55Tu7nUyZVQYCKEOs+2dkxEY+DpPtZzO4YruuiPb7NkYLVcyJC4+zCbk5pA==
   dependencies:
-    regenerate "^1.4.0"
+    regenerate "^1.4.2"
 
-regenerate@^1.4.0:
+regenerate@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
@@ -11447,26 +11468,26 @@ regexpp@^3.1.0:
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
 regexpu-core@^4.7.1:
-  version "4.7.1"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
-  integrity sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==
-  dependencies:
-    regenerate "^1.4.0"
-    regenerate-unicode-properties "^8.2.0"
-    regjsgen "^0.5.1"
-    regjsparser "^0.6.4"
-    unicode-match-property-ecmascript "^1.0.4"
-    unicode-match-property-value-ecmascript "^1.2.0"
-
-regjsgen@^0.5.1:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.8.0.tgz#e5605ba361b67b1718478501327502f4479a98f0"
+  integrity sha512-1F6bYsoYiz6is+oz70NWur2Vlh9KWtswuRuzJOfeYUrfPX2o8n74AnUVaOGDbUqVGO9fNHu48/pjJO4sNVwsOg==
+  dependencies:
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^9.0.0"
+    regjsgen "^0.5.2"
+    regjsparser "^0.7.0"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.0.0"
+
+regjsgen@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
   integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
 
-regjsparser@^0.6.4:
-  version "0.6.9"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.9.tgz#b489eef7c9a2ce43727627011429cf833a7183e6"
-  integrity sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==
+regjsparser@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.7.0.tgz#a6b667b54c885e18b52554cb4960ef71187e9968"
+  integrity sha512-A4pcaORqmNMDVwUjWoTzuhwMGpP+NykpfqAsEgI1FSH/EzC7lrN5TMd+kN8YCovX+jMpu8eaqXgXPCa0g8FQNQ==
   dependencies:
     jsesc "~0.5.0"
 
@@ -11880,7 +11901,7 @@ shell-quote@1.7.2:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
-shiki@^0.9.10:
+shiki@^0.9.11:
   version "0.9.11"
   resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.9.11.tgz#07d75dab2abb6dc12a01f79a397cb1c391fa22d8"
   integrity sha512-tjruNTLFhU0hruCPoJP0y+B9LKOmcqUhTpxn7pcJB3fa+04gFChuEmxmrUfOJ7ZO6Jd+HwMnDHgY3lv3Tqonuw==
@@ -11899,9 +11920,9 @@ side-channel@^1.0.4:
     object-inspect "^1.9.0"
 
 signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
-  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.4.tgz#366a4684d175b9cab2081e3681fda3747b6c51d7"
+  integrity sha512-rqYhcAnZ6d/vTPGghdrw7iumdcbXpsk1b8IG/rz+VWV51DM0p7XCtMoJ3qhPLIbp3tvyt3pKRbaaEMZYpHto8Q==
 
 sisteransi@^1.0.5:
   version "1.0.5"
@@ -11985,9 +12006,9 @@ socks-proxy-agent@^5.0.0:
     socks "^2.3.3"
 
 socks-proxy-agent@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-6.0.0.tgz#9f8749cdc05976505fa9f9a958b1818d0e60573b"
-  integrity sha512-FIgZbQWlnjVEQvMkylz64/rUggGtrKstPnx8OZyYFG0tAFR8CSBtpXxSwbFLHyeXFn/cunFL7MpuSOvDSOPo9g==
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-6.1.0.tgz#869cf2d7bd10fea96c7ad3111e81726855e285c3"
+  integrity sha512-57e7lwCN4Tzt3mXz25VxOErJKXlPfXmkMLnk310v/jwW20jWRVcgsOit+xNkN3eIEdB47GwnfAEBLacZ/wVIKg==
   dependencies:
     agent-base "^6.0.2"
     debug "^4.3.1"
@@ -12186,9 +12207,9 @@ ssri@^8.0.0, ssri@^8.0.1:
     minipass "^3.1.1"
 
 stack-utils@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.3.tgz#cd5f030126ff116b78ccb3c027fe302713b61277"
-  integrity sha512-gL//fkxfWUsIlFL2Tl42Cl6+HFALEaB1FU76I/Fy+oZjRreP7OPMXFlGbxM7NQsI0ZpUfw76sHnv0WNYuTb7Iw==
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.5.tgz#d25265fca995154659dbbfba3b49254778d2fdd5"
+  integrity sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==
   dependencies:
     escape-string-regexp "^2.0.0"
 
@@ -13009,15 +13030,15 @@ typedarray@^0.0.6:
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
 typedoc@^0.22.3:
-  version "0.22.3"
-  resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.22.3.tgz#c67aaeef22702d84267bda12dc13f192dbf9d89e"
-  integrity sha512-EOWf9Vf3Vfb/jzBzr87uoLybQw9fx3iyXLUcpQn9F2Ks1/ZJN9iGeBbYRU+VNqrWvV4T+aS7Ife7GFEJUf0ohQ==
+  version "0.22.4"
+  resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.22.4.tgz#039ac59fcdb9a8674471dc20e1623efb12be4114"
+  integrity sha512-M/a8NnPxq3/iZNNVjzFCK5gu4m//HTJIPbSS0JQVbkHJPP9wyepR12agylWTSqeVZe0xsbidVtO26+PP7iD/jw==
   dependencies:
     glob "^7.1.7"
     lunr "^2.3.9"
-    marked "^3.0.3"
+    marked "^3.0.4"
     minimatch "^3.0.4"
-    shiki "^0.9.10"
+    shiki "^0.9.11"
 
 typeorm@^0.2.30:
   version "0.2.37"
@@ -13091,28 +13112,28 @@ unbox-primitive@^1.0.1:
     has-symbols "^1.0.2"
     which-boxed-primitive "^1.0.2"
 
-unicode-canonical-property-names-ecmascript@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
-  integrity sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==
+unicode-canonical-property-names-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
+  integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
 
-unicode-match-property-ecmascript@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz#8ed2a32569961bce9227d09cd3ffbb8fed5f020c"
-  integrity sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==
+unicode-match-property-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
+  integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
   dependencies:
-    unicode-canonical-property-names-ecmascript "^1.0.4"
-    unicode-property-aliases-ecmascript "^1.0.4"
+    unicode-canonical-property-names-ecmascript "^2.0.0"
+    unicode-property-aliases-ecmascript "^2.0.0"
 
-unicode-match-property-value-ecmascript@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
-  integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
+unicode-match-property-value-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz#1a01aa57247c14c568b89775a54938788189a714"
+  integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==
 
-unicode-property-aliases-ecmascript@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
-  integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
+unicode-property-aliases-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
+  integrity sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==
 
 union-value@^1.0.0:
   version "1.0.1"