From 921bc442704732016fe0908d9d19677cf8145d98 Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Tue, 13 Jul 2021 16:13:15 +0200
Subject: [PATCH] Implement studio.globalToolbar

---
 packages/plugin-r3f/package.json              |   1 +
 packages/plugin-r3f/src/components/Editor.tsx |  59 +-
 .../src/components/Toolbar/Toolbar.tsx        | 203 ++---
 .../Toolbar/utils/CompactModeSelect.tsx       |  46 +-
 .../components/Toolbar/utils/IconButton.tsx   |  35 +-
 .../src/components/Toolbar/utils/Tooltip.tsx  |  16 +-
 packages/plugin-r3f/src/index.tsx             |   8 +
 packages/plugin-r3f/src/store.ts              |  17 +
 theatre/core/src/propTypes/index.ts           |  20 +
 theatre/package.json                          |   2 +-
 theatre/studio/src/Studio.ts                  |  25 +-
 theatre/studio/src/TheatreStudio.ts           |  35 +-
 theatre/studio/src/UI.ts                      |   7 +-
 theatre/studio/src/UIRoot/UIRoot.tsx          |  38 +-
 theatre/studio/src/UIRoot/UIRootWrapper.tsx   |  28 -
 .../propEditors/DeterminePropEditor.tsx       |   1 +
 .../toolbars/GlobalToolbar/GlobalToolbar.tsx  |  35 +
 yarn.lock                                     | 781 +++---------------
 18 files changed, 433 insertions(+), 924 deletions(-)
 delete mode 100644 theatre/studio/src/UIRoot/UIRootWrapper.tsx
 create mode 100644 theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx

diff --git a/packages/plugin-r3f/package.json b/packages/plugin-r3f/package.json
index 24f65c5..b0b2b92 100644
--- a/packages/plugin-r3f/package.json
+++ b/packages/plugin-r3f/package.json
@@ -43,6 +43,7 @@
     "@theatre/core": "workspace:*",
     "@theatre/studio": "workspace:*",
     "lodash-es": "^4.17.21",
+    "polished": "^4.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
diff --git a/packages/plugin-r3f/src/components/Editor.tsx b/packages/plugin-r3f/src/components/Editor.tsx
index 75a7eeb..2d431e5 100644
--- a/packages/plugin-r3f/src/components/Editor.tsx
+++ b/packages/plugin-r3f/src/components/Editor.tsx
@@ -6,11 +6,10 @@ import {useEditorStore} from '../store'
 import {OrbitControls} from '@react-three/drei'
 import shallow from 'zustand/shallow'
 import root from 'react-shadow/styled-components'
-import Toolbar from './Toolbar/Toolbar'
 import ProxyManager from './ProxyManager'
 import studio from '@theatre/studio'
 import {useVal} from '@theatre/dataverse-react'
-import styled, {createGlobalStyle} from 'styled-components'
+import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
 
 const GlobalStyle = createGlobalStyle`
   :host {
@@ -52,12 +51,13 @@ const EditorScene = () => {
 
   return (
     <>
-      {showGrid && <gridHelper args={[1000, 1000, 0x444444, 0x888888]} />}
+      {showGrid && <gridHelper args={[20, 20, '#6e6e6e', '#4a4b4b']} />}
       {showAxes && <axesHelper args={[500]} />}
       {/* @ts-ignore */}
       <OrbitControls ref={orbitControlsRef} enableDamping={false} />
       <primitive object={helpersRoot}></primitive>
       <ProxyManager orbitControlsRef={orbitControlsRef} />
+      <color attach="background" args={[0.24, 0.24, 0.24]} />
     </>
   )
 }
@@ -106,29 +106,36 @@ const Editor: VFC = () => {
 
   return (
     <root.div>
-      <GlobalStyle />
-      <Wrapper id="theatre-plugin-r3f-root" visible={true}>
-        <Toolbar />
-        {sceneSnapshot ? (
-          <>
-            <CanvasWrapper>
-              <Canvas
-                // @ts-ignore
-                colorManagement
-                camera={initialEditorCamera}
-                onCreated={({gl}) => {
-                  gl.setClearColor('white')
-                }}
-                shadowMap
-                pixelRatio={window.devicePixelRatio}
-                onPointerMissed={() => studio.__experimental_setSelection([])}
-              >
-                <EditorScene />
-              </Canvas>
-            </CanvasWrapper>
-          </>
-        ) : null}
-      </Wrapper>
+      <StyleSheetManager disableVendorPrefixes>
+        <>
+          <GlobalStyle />
+          <Wrapper id="theatre-plugin-r3f-root" visible={true}>
+            {/* <Toolbar /> */}
+            {sceneSnapshot ? (
+              <>
+                <CanvasWrapper>
+                  <Canvas
+                    // @ts-ignore
+                    colorManagement
+                    camera={initialEditorCamera}
+                    onCreated={({gl}) => {
+                      gl.setClearColor('white')
+                    }}
+                    shadowMap
+                    dpr={[1, 2]}
+                    fog={'red'}
+                    onPointerMissed={() =>
+                      studio.__experimental_setSelection([])
+                    }
+                  >
+                    <EditorScene />
+                  </Canvas>
+                </CanvasWrapper>
+              </>
+            ) : null}
+          </Wrapper>
+        </>
+      </StyleSheetManager>
     </root.div>
   )
 }
diff --git a/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx b/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx
index 97d1fd4..7162563 100644
--- a/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx
+++ b/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx
@@ -1,5 +1,4 @@
 import type {VFC} from 'react'
-import {useState} from 'react'
 import React from 'react'
 import TransformControlsModeSelect from './TransformControlsModeSelect'
 import {useEditorStore} from '../../store'
@@ -13,35 +12,8 @@ import studio from '@theatre/studio'
 import {getSelected} from '../useSelected'
 import {useVal} from '@theatre/dataverse-react'
 import IconButton from './utils/IconButton'
-import {PortalContext} from 'reakit'
 import styled from 'styled-components'
 
-const Container = styled.div`
-  z-index: 50;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  pointer-events: none;
-`
-
-const TopRow = styled.div`
-  position: relative;
-  margin: 1.25rem;
-  height: 100%;
-
-  display: flex;
-  flex: 1 1 0%;
-  justify-content: space-between;
-  align-items: flex-start;
-`
-
-const Tools = styled.div`
-  display: flex;
-  gap: 1rem;
-`
-
 const ToolGroup = styled.div`
   pointer-events: auto;
 `
@@ -59,111 +31,102 @@ const Toolbar: VFC = () => {
   const viewportShading =
     useVal(editorObject?.props.viewport.shading) ?? 'rendered'
 
-  const [wrapper, setWrapper] = useState<null | HTMLDivElement>(null)
-
   if (!editorObject) return <></>
 
   return (
-    <PortalContext.Provider value={wrapper}>
-      <Container ref={setWrapper}>
-        <TopRow>
-          <Tools>
-            <ToolGroup>
-              <TransformControlsModeSelect
-                value={transformControlsMode}
-                onChange={(value) =>
-                  studio.transaction(({set}) =>
-                    set(editorObject!.props.transformControls.mode, value),
-                  )
-                }
-              />
-            </ToolGroup>
-            <ToolGroup>
-              <TransformControlsSpaceSelect
-                value={transformControlsSpace}
-                onChange={(space) => {
-                  studio.transaction(({set}) => {
-                    set(editorObject.props.transformControls.space, space)
-                  })
-                }}
-              />
-            </ToolGroup>
-            <ToolGroup>
-              <ViewportShadingSelect
-                value={viewportShading}
-                onChange={(shading) => {
-                  studio.transaction(({set}) => {
-                    set(editorObject.props.viewport.shading, shading)
-                  })
-                }}
-              />
-            </ToolGroup>
-            <ToolGroup>
-              <IconButton
-                label="Focus on selected"
-                icon={<RiFocus3Line />}
-                onClick={() => {
-                  const orbitControls =
-                    useEditorStore.getState().orbitControlsRef?.current
-                  const selected = getSelected()
+    <>
+      <ToolGroup>
+        <TransformControlsModeSelect
+          value={transformControlsMode}
+          onChange={(value) =>
+            studio.transaction(({set}) =>
+              set(editorObject!.props.transformControls.mode, value),
+            )
+          }
+        />
+      </ToolGroup>
+      <ToolGroup>
+        <TransformControlsSpaceSelect
+          value={transformControlsSpace}
+          onChange={(space) => {
+            studio.transaction(({set}) => {
+              set(editorObject.props.transformControls.space, space)
+            })
+          }}
+        />
+      </ToolGroup>
+      <ToolGroup>
+        <ViewportShadingSelect
+          value={viewportShading}
+          onChange={(shading) => {
+            studio.transaction(({set}) => {
+              set(editorObject.props.viewport.shading, shading)
+            })
+          }}
+        />
+      </ToolGroup>
+      <ToolGroup>
+        <IconButton
+          label="Focus on selected"
+          icon={<RiFocus3Line />}
+          onClick={() => {
+            const orbitControls =
+              useEditorStore.getState().orbitControlsRef?.current
+            const selected = getSelected()
 
-                  let focusObject
+            let focusObject
 
-                  if (selected) {
-                    focusObject =
-                      useEditorStore.getState().editablesSnapshot![selected]
-                        .proxyObject
-                  }
+            if (selected) {
+              focusObject =
+                useEditorStore.getState().editablesSnapshot![selected]
+                  .proxyObject
+            }
 
-                  if (orbitControls && focusObject) {
-                    focusObject.getWorldPosition(
-                      // @ts-ignore TODO
-                      orbitControls.target as Vector3,
-                    )
-                  }
-                }}
-              />
-            </ToolGroup>
-            <ToolGroup>
-              <IconButton
-                label="Align object to view"
-                icon={<GiPocketBow />}
-                onClick={() => {
-                  const camera = (
-                    useEditorStore.getState().orbitControlsRef
-                      ?.current as $FixMe
-                  )?.object
+            if (orbitControls && focusObject) {
+              focusObject.getWorldPosition(
+                // @ts-ignore TODO
+                orbitControls.target as Vector3,
+              )
+            }
+          }}
+        />
+      </ToolGroup>
+      <ToolGroup>
+        <IconButton
+          label="Align object to view"
+          icon={<GiPocketBow />}
+          onClick={() => {
+            const camera = (
+              useEditorStore.getState().orbitControlsRef?.current as $FixMe
+            )?.object
 
-                  const selected = getSelected()
+            const selected = getSelected()
 
-                  let proxyObject
+            let proxyObject
 
-                  if (selected) {
-                    proxyObject =
-                      useEditorStore.getState().editablesSnapshot![selected]
-                        .proxyObject
+            if (selected) {
+              proxyObject =
+                useEditorStore.getState().editablesSnapshot![selected]
+                  .proxyObject
 
-                    if (proxyObject && camera) {
-                      const direction = new Vector3()
-                      const position = camera.position.clone()
+              if (proxyObject && camera) {
+                const direction = new Vector3()
+                const position = camera.position.clone()
 
-                      camera.getWorldDirection(direction)
-                      proxyObject.position.set(0, 0, 0)
-                      proxyObject.lookAt(direction)
+                camera.getWorldDirection(direction)
+                proxyObject.position.set(0, 0, 0)
+                proxyObject.lookAt(direction)
 
-                      proxyObject.parent!.worldToLocal(position)
-                      proxyObject.position.copy(position)
+                proxyObject.parent!.worldToLocal(position)
+                proxyObject.position.copy(position)
 
-                      proxyObject.updateMatrix()
-                    }
-                  }
-                }}
-              />
-            </ToolGroup>
-          </Tools>
-        </TopRow>
-      </Container>
-    </PortalContext.Provider>
+                proxyObject.updateMatrix()
+              }
+            }
+          }}
+        />
+      </ToolGroup>
+    </>
   )
 }
 
diff --git a/packages/plugin-r3f/src/components/Toolbar/utils/CompactModeSelect.tsx b/packages/plugin-r3f/src/components/Toolbar/utils/CompactModeSelect.tsx
index 2f00f68..f696f13 100644
--- a/packages/plugin-r3f/src/components/Toolbar/utils/CompactModeSelect.tsx
+++ b/packages/plugin-r3f/src/components/Toolbar/utils/CompactModeSelect.tsx
@@ -13,42 +13,38 @@ interface OptionButtonProps<Option> {
   onClick: () => void
 }
 
-const _TooltipRef = styled(TooltipReference)<{selected: boolean}>`
+const TheButton = styled(TooltipReference)<{selected: boolean}>`
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  width: auto;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 11px;
+  line-height: 1.25em;
   font-weight: 600;
-  height: 1.75rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  border: 0 transparent;
+  height: 24px;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  border: 1px solid #22222238;
 
-  &:first-child {
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
-  }
-
-  &:last-child {
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
-  }
+  border-radius: 2px;
 
   &:focus {
     outline: none;
   }
 
-  color: ${({selected}) => (selected ? 'white' : 'rgba(55, 65, 81, 1)')};
-  background-color: ${({selected}) =>
-    selected ? 'rgba(6, 95, 70, 1)' : 'rgba(243, 244, 246, 1);'};
+  color: #e6e6e5;
+  background-color: rgba(0, 0, 0, 0.1);
 
   &:hover {
-    background-color: ${({selected}) =>
-      selected ? 'rgba(6, 78, 59, 1)' : 'rgba(229, 231, 235, 1);'};
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+  }
+
+  &.selected,
+  &.selected:hover {
+    color: white;
+    background-color: rgba(0, 0, 0, 0.5);
   }
 `
 
@@ -62,15 +58,16 @@ function OptionButton<Option>({
   const tooltip = useTooltipState()
   return (
     <>
-      <_TooltipRef
+      <TheButton
         {...tooltip}
         forwardedAs={Button}
         selected={option === value}
+        className={option === value ? 'selected' : undefined}
         aria-label={label}
         onClick={onClick}
       >
         {icon}
-      </_TooltipRef>
+      </TheButton>
       <Tooltip {...tooltip}>{label}</Tooltip>
     </>
   )
@@ -89,6 +86,7 @@ interface CompactModeSelectProps<Option> {
 
 const Container = styled(Group)`
   display: flex;
+  gap: 2px;
 `
 
 const CompactModeSelect = <Option extends string | number>({
diff --git a/packages/plugin-r3f/src/components/Toolbar/utils/IconButton.tsx b/packages/plugin-r3f/src/components/Toolbar/utils/IconButton.tsx
index fa67efa..774cfb6 100644
--- a/packages/plugin-r3f/src/components/Toolbar/utils/IconButton.tsx
+++ b/packages/plugin-r3f/src/components/Toolbar/utils/IconButton.tsx
@@ -5,45 +5,48 @@ import {Button} from 'reakit'
 import type {IconType} from 'react-icons'
 import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
 import styled from 'styled-components'
+import {transparentize} from 'polished'
 
 export interface IconButtonProps extends Exclude<ButtonProps, 'children'> {
   icon: ReactElement<IconType>
   label: string
 }
 
-const _TooltipRef = styled(TooltipReference)`
+const TheButton = styled(TooltipReference)`
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  width: auto;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 11px;
+  line-height: 1.25em;
   font-weight: 600;
-  height: 1.75rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  height: 24px;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  color: #e6e6e5;
+  background-color: #313131ba;
+  border: 0 transparent;
 
   &:first-child {
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
   }
 
   &:last-child {
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
   }
 
   &:focus {
     outline: none;
   }
 
-  color: rgba(55, 65, 81, 1);
-  background-color: rgba(243, 244, 246, 1);
+  color: #e6e6e5;
+  background-color: #313131;
 
   &:hover {
-    background-color: rgba(229, 231, 235, 1);
+    background-color: ${transparentize(0.5, '#313131')};
   }
 
   border: 0 transparent;
@@ -53,14 +56,14 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     const tooltip = useTooltipState()
     return (
       <>
-        <_TooltipRef
+        <TheButton
           {...props}
           {...tooltip}
           forwardedAs={Button}
           aria-label={label}
         >
           {icon}
-        </_TooltipRef>
+        </TheButton>
         <Tooltip {...tooltip}>{label}</Tooltip>
       </>
     )
diff --git a/packages/plugin-r3f/src/components/Toolbar/utils/Tooltip.tsx b/packages/plugin-r3f/src/components/Toolbar/utils/Tooltip.tsx
index 76d1b90..aaff56f 100644
--- a/packages/plugin-r3f/src/components/Toolbar/utils/Tooltip.tsx
+++ b/packages/plugin-r3f/src/components/Toolbar/utils/Tooltip.tsx
@@ -1,24 +1,22 @@
 import type {VFC} from 'react'
 import React from 'react'
 import {Tooltip as TooltipImpl, TooltipReference, useTooltipState} from 'reakit'
-
+import {transparentize} from 'polished'
 import type {TooltipProps} from 'reakit'
 import styled from 'styled-components'
 
 export {TooltipReference, useTooltipState}
 
 const Container = styled(TooltipImpl)`
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding: 3px 5px;
 
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  border-radius: 0.125rem;
-  background-color: rgba(55, 65, 81, 1);
+  font-size: 11px;
+  line-height: 1.25em;
+  border-radius: 2px;
+  background-color: ${transparentize(0.5, '#313131')};
   color: white;
   pointer-events: none;
+  font-weight: 500;
 `
 
 export const Tooltip: VFC<TooltipProps> = ({className, ...props}) => (
diff --git a/packages/plugin-r3f/src/index.tsx b/packages/plugin-r3f/src/index.tsx
index 05ca203..4c5a86d 100644
--- a/packages/plugin-r3f/src/index.tsx
+++ b/packages/plugin-r3f/src/index.tsx
@@ -8,8 +8,16 @@ export type {EditorHelperProps} from './components/EditorHelper'
 export {default as editable} from './components/editable'
 export {bindToCanvas} from './store'
 export type {EditableState, BindFunction} from './store'
+import studio from '@theatre/studio'
+import Toolbar from './components/Toolbar/Toolbar'
 
 if (process.env.NODE_ENV === 'development') {
+  studio.extend({
+    id: '@theatre/plugin-r3f',
+    globalToolbar: {
+      component: Toolbar,
+    },
+  })
   const editorRoot = document.createElement('div')
   document.body.appendChild(editorRoot)
 
diff --git a/packages/plugin-r3f/src/store.ts b/packages/plugin-r3f/src/store.ts
index 054adc3..c4d8682 100644
--- a/packages/plugin-r3f/src/store.ts
+++ b/packages/plugin-r3f/src/store.ts
@@ -306,6 +306,23 @@ const editorSheetObjectConfig = types.compound({
         },
         {as: 'menu', label: 'Shading'},
       ),
+      mode: types.stringLiteral(
+        'translate',
+        {
+          translate: 'Translate',
+          rotate: 'Rotate',
+          scale: 'Scale',
+        },
+        {as: 'switch', label: 'Mode'},
+      ),
+      space: types.stringLiteral(
+        'world',
+        {
+          local: 'Local',
+          world: 'World',
+        },
+        {as: 'switch', label: 'Space'},
+      ),
     },
     {label: 'Viewport Config'},
   ),
diff --git a/theatre/core/src/propTypes/index.ts b/theatre/core/src/propTypes/index.ts
index d03ab19..941da8d 100644
--- a/theatre/core/src/propTypes/index.ts
+++ b/theatre/core/src/propTypes/index.ts
@@ -124,6 +124,25 @@ export const compound = <Props extends IValidCompoundProps>(
   }
 }
 
+export interface PropTypeConfig_CSSRGBA
+  extends IBasePropType<{r: number; g: number; b: number; a: number}> {
+  type: 'cssrgba'
+  default: {r: number; g: number; b: number; a: number}
+}
+
+export const rgba = (
+  defaultValue: {r: number; b: number; g: number; a: number},
+  extras?: PropTypeConfigExtras,
+): PropTypeConfig_CSSRGBA => {
+  return {
+    type: 'cssrgba',
+    valueType: null as $IntentionalAny,
+    [s]: 'TheatrePropType',
+    label: extras?.label,
+    default: defaultValue,
+  }
+}
+
 export interface PropTypeConfig_Enum extends IBasePropType<{}> {
   type: 'enum'
   cases: Record<string, PropTypeConfig>
@@ -135,6 +154,7 @@ export type PropTypeConfig_AllPrimitives =
   | PropTypeConfig_Boolean
   | PropTypeConfig_String
   | PropTypeConfig_StringLiteral<$IntentionalAny>
+  | PropTypeConfig_CSSRGBA
 
 export type PropTypeConfig =
   | PropTypeConfig_AllPrimitives
diff --git a/theatre/package.json b/theatre/package.json
index 7bf399a..3046eb5 100644
--- a/theatre/package.json
+++ b/theatre/package.json
@@ -63,7 +63,6 @@
     "json-touch-patch": "^0.11.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
-    "microbundle": "^0.13.0",
     "nanoid": "^3.1.23",
     "npm-run-all": "^4.1.5",
     "null-loader": "^4.0.1",
@@ -77,6 +76,7 @@
     "react-shadow": "^19.0.2",
     "react-use": "^17.2.4",
     "react-use-gesture": "^9.1.3",
+    "reakit": "^1.3.8",
     "redux": "^3.7.2",
     "redux-actions": "^2.6.5",
     "rimraf": "^3.0.2",
diff --git a/theatre/studio/src/Studio.ts b/theatre/studio/src/Studio.ts
index e73b527..3adc4fb 100644
--- a/theatre/studio/src/Studio.ts
+++ b/theatre/studio/src/Studio.ts
@@ -9,7 +9,7 @@ import type {
   ITransactionPrivateApi,
 } from './StudioStore/StudioStore'
 import StudioStore from './StudioStore/StudioStore'
-import type {IStudio} from './TheatreStudio'
+import type {IExtension, IStudio} from './TheatreStudio'
 import TheatreStudio from './TheatreStudio'
 import {nanoid} from 'nanoid/non-secure'
 import type Project from '@theatre/core/projects/Project'
@@ -30,6 +30,11 @@ export class Studio {
   private readonly _store = new StudioStore()
   private _corePrivateApi: typeof privateAPI | undefined
 
+  private _extensions: Atom<{byId: Record<string, IExtension>}> = new Atom({
+    byId: {},
+  })
+  readonly extensionsP = this._extensions.pointer.byId
+
   constructor() {
     this.address = {studioId: nanoid(10)}
     this.publicApi = new TheatreStudio(this)
@@ -90,4 +95,22 @@ export class Studio {
   get corePrivateAPI() {
     return this._corePrivateApi
   }
+
+  extend(extension: IExtension) {
+    if (!extension || typeof extension !== 'object') {
+      throw new Error(`Extensions must be JS objects`)
+    }
+
+    if (typeof extension.id !== 'string') {
+      throw new Error(`extension.id must be a string`)
+    }
+
+    if (this._extensions.getState().byId[extension.id]) {
+      throw new Error(
+        `An extension with the id of ${extension.id} already exists`,
+      )
+    }
+
+    this._extensions.setIn(['byId', extension.id], extension)
+  }
 }
diff --git a/theatre/studio/src/TheatreStudio.ts b/theatre/studio/src/TheatreStudio.ts
index 3e331af..b13001a 100644
--- a/theatre/studio/src/TheatreStudio.ts
+++ b/theatre/studio/src/TheatreStudio.ts
@@ -3,7 +3,7 @@ import studioTicker from '@theatre/studio/studioTicker'
 import type {IDerivation, Pointer} from '@theatre/dataverse'
 import {prism} from '@theatre/dataverse'
 import SimpleCache from '@theatre/shared/utils/SimpleCache'
-import type {VoidFn} from '@theatre/shared/utils/types'
+import type {$IntentionalAny, VoidFn} from '@theatre/shared/utils/types'
 import type {IScrub} from '@theatre/studio/Scrub'
 
 import type {Studio} from '@theatre/studio/Studio'
@@ -11,12 +11,39 @@ import {isSheetObjectPublicAPI} from '@theatre/shared/instanceTypes'
 import {getOutlineSelection} from './selectors'
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
 import getStudio from './getStudio'
+import type React from 'react'
+import type {
+  PropTypeConfig_Boolean,
+  PropTypeConfig_Compound,
+} from '@theatre/core/propTypes'
 
 export interface ITransactionAPI {
   set<V>(pointer: Pointer<V>, value: V): void
   unset<V>(pointer: Pointer<V>): void
 }
 
+export interface IPanelType<DataType extends PropTypeConfig_Compound<{}>> {
+  sheetName: string
+  dataType: DataType
+  component: React.ComponentType<{
+    id: string
+    object: ISheetObject<
+      PropTypeConfig_Compound<{
+        visible: PropTypeConfig_Boolean
+        data: DataType
+      }>
+    >
+  }>
+}
+
+export type IExtension = {
+  id: string
+  globalToolbar?: {
+    component: React.ComponentType<{}>
+  }
+  panes?: Record<string, IPanelType<$IntentionalAny>>
+}
+
 export interface IStudio {
   readonly ui: {
     show(): void
@@ -34,6 +61,8 @@ export interface IStudio {
   ): VoidFunction
 
   readonly selection: Array<ISheetObject>
+
+  extend(extension: IExtension): void
 }
 
 export default class TheatreStudio implements IStudio {
@@ -62,6 +91,10 @@ export default class TheatreStudio implements IStudio {
    */
   constructor(internals: Studio) {}
 
+  extend(extension: IExtension): void {
+    getStudio().extend(extension)
+  }
+
   transaction(fn: (api: ITransactionAPI) => void): void {
     return getStudio().transaction(({set, unset}) => {
       return fn({set, unset})
diff --git a/theatre/studio/src/UI.ts b/theatre/studio/src/UI.ts
index 641af71..37515a2 100644
--- a/theatre/studio/src/UI.ts
+++ b/theatre/studio/src/UI.ts
@@ -1,4 +1,4 @@
-import UIRootWrapper from '@theatre/studio/UIRoot/UIRootWrapper'
+import UIRoot from '@theatre/studio/UIRoot/UIRoot'
 import type {$IntentionalAny} from '@theatre/shared/utils/types'
 import React from 'react'
 import ReactDOM from 'react-dom'
@@ -54,10 +54,7 @@ export default class UI {
       this._renderTimeout = undefined
       this._documentBodyUIIsRenderedIn = document.body
       this._documentBodyUIIsRenderedIn.appendChild(this.containerEl)
-      ReactDOM.render(
-        React.createElement(UIRootWrapper, {studio: this.studio}),
-        this.containerShadow,
-      )
+      ReactDOM.render(React.createElement(UIRoot), this.containerShadow)
     }
     this._renderTimeout = setTimeout(renderCallback, 10)
   }
diff --git a/theatre/studio/src/UIRoot/UIRoot.tsx b/theatre/studio/src/UIRoot/UIRoot.tsx
index 802c150..190ca9e 100644
--- a/theatre/studio/src/UIRoot/UIRoot.tsx
+++ b/theatre/studio/src/UIRoot/UIRoot.tsx
@@ -1,13 +1,15 @@
 import getStudio from '@theatre/studio/getStudio'
-import type {Studio} from '@theatre/studio/Studio'
 import {usePrism} from '@theatre/dataverse-react'
 import {val} from '@theatre/dataverse'
 import React from 'react'
-import {createGlobalStyle, StyleSheetManager} from 'styled-components'
-import EnsureProjectsDontHaveErrors from './EnsureProjectsDontHaveErrors'
+import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
 import PanelsRoot from './PanelsRoot'
 import ProvideTheme from './ProvideTheme'
 import TheTrigger from './TheTrigger'
+import GlobalToolbar from '@theatre/studio/toolbars/GlobalToolbar/GlobalToolbar'
+import useRefAndState from '@theatre/studio/utils/useRefAndState'
+import {PortalContext} from 'reakit'
+import type {$IntentionalAny} from '@theatre/shared/utils/types'
 
 const GlobalStyle = createGlobalStyle`
   :host {
@@ -28,13 +30,28 @@ const GlobalStyle = createGlobalStyle`
   }
 `
 
-export default function UIRoot({studio}: {studio: Studio}) {
+const Container = styled.div`
+  z-index: 50;
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  pointer-events: none;
+`
+
+export default function UIRoot() {
+  const studio = getStudio()
+  const [containerRef, container] = useRefAndState<HTMLDivElement>(
+    undefined as $IntentionalAny,
+  )
   const inside = usePrism(() => {
     const visiblityState = val(studio.atomP.ahistoric.visibilityState)
     const initialised = val(studio.atomP.ephemeral.initialised)
 
     const shouldShowTrigger = visiblityState === 'onlyTriggerIsVisible'
     const shouldShowPanels = visiblityState === 'everythingIsVisible'
+    const shouldShowGlobalToolbar = visiblityState !== 'everythingIsHidden'
 
     return !initialised ? null : (
       <StyleSheetManager
@@ -44,13 +61,18 @@ export default function UIRoot({studio}: {studio: Studio}) {
         <>
           <GlobalStyle />
           <ProvideTheme>
-            {shouldShowTrigger && <TheTrigger />}
-            {shouldShowPanels && <PanelsRoot />}
+            <PortalContext.Provider value={container}>
+              <Container ref={containerRef}>
+                {shouldShowGlobalToolbar && <GlobalToolbar />}
+                {shouldShowTrigger && <TheTrigger />}
+                {shouldShowPanels && <PanelsRoot />}
+              </Container>
+            </PortalContext.Provider>
           </ProvideTheme>
         </>
       </StyleSheetManager>
     )
-  }, [studio])
+  }, [studio, containerRef, container])
 
-  return <EnsureProjectsDontHaveErrors>{inside}</EnsureProjectsDontHaveErrors>
+  return inside
 }
diff --git a/theatre/studio/src/UIRoot/UIRootWrapper.tsx b/theatre/studio/src/UIRoot/UIRootWrapper.tsx
deleted file mode 100644
index ef72cde..0000000
--- a/theatre/studio/src/UIRoot/UIRootWrapper.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type {Studio} from '@theatre/studio/Studio'
-import React from 'react'
-import UIRoot from './UIRoot'
-
-export default class UIRootWrapper extends React.Component<{
-  studio: Studio
-}> {
-  state = {UIRoot}
-  componentDidMount() {
-    const self = this
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      typeof module === 'object' &&
-      module &&
-      module.hot
-    ) {
-      module.hot.accept('./UIRoot', () => {
-        const UIRoot = require('./UIRoot').default
-        self.setState({UIRoot})
-      })
-    }
-  }
-  render() {
-    const UIRoot = this.state.UIRoot
-    const rootEl = <UIRoot studio={this.props.studio} />
-    return rootEl
-  }
-}
diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/DeterminePropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/DeterminePropEditor.tsx
index 16b60ff..df6772d 100644
--- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/DeterminePropEditor.tsx
+++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/DeterminePropEditor.tsx
@@ -68,6 +68,7 @@ const propEditorByPropType: {
   enum: () => <></>,
   boolean: BooleanPropEditor,
   stringLiteral: StringLiteralPropEditor,
+  cssrgba: () => <></>,
 }
 
 const DeterminePropEditor: React.FC<{
diff --git a/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx
new file mode 100644
index 0000000..d2447df
--- /dev/null
+++ b/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx
@@ -0,0 +1,35 @@
+import {useVal} from '@theatre/dataverse-react'
+import getStudio from '@theatre/studio/getStudio'
+import React from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div`
+  position: fixed;
+  z-index: 50;
+  top: 12px;
+  right: 12px;
+  left: 12px;
+  pointer-events: none;
+
+  display: flex;
+  gap: 1rem;
+`
+
+const GlobalToolbar: React.FC<{}> = (props) => {
+  const groups: Array<React.ReactNode> = []
+  const extensions = useVal(getStudio().extensionsP)
+
+  for (const [, extension] of Object.entries(extensions)) {
+    if (extension.globalToolbar) {
+      groups.push(
+        <extension.globalToolbar.component
+          key={'extensionToolbar-' + extension.id}
+        />,
+      )
+    }
+  }
+
+  return <Container>{groups}</Container>
+}
+
+export default GlobalToolbar
diff --git a/yarn.lock b/yarn.lock
index 0119d8a..34db134 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -41,7 +41,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13":
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.12.13":
   version: 7.12.13
   resolution: "@babel/code-frame@npm:7.12.13"
   dependencies:
@@ -71,7 +71,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:7.13.14, @babel/core@npm:^7.1.0, @babel/core@npm:^7.12.10, @babel/core@npm:^7.4.4, @babel/core@npm:^7.7.5":
+"@babel/core@npm:7.13.14, @babel/core@npm:^7.1.0, @babel/core@npm:^7.4.4, @babel/core@npm:^7.7.5":
   version: 7.13.14
   resolution: "@babel/core@npm:7.13.14"
   dependencies:
@@ -234,7 +234,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.12.1, @babel/helper-create-class-features-plugin@npm:^7.13.0":
+"@babel/helper-create-class-features-plugin@npm:^7.13.0":
   version: 7.13.11
   resolution: "@babel/helper-create-class-features-plugin@npm:7.13.11"
   dependencies:
@@ -388,7 +388,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.12.13, @babel/helper-module-imports@npm:^7.13.12":
+"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.12.13, @babel/helper-module-imports@npm:^7.13.12":
   version: 7.13.12
   resolution: "@babel/helper-module-imports@npm:7.13.12"
   dependencies:
@@ -589,7 +589,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.12.13, @babel/parser@npm:^7.13.13, @babel/parser@npm:^7.3.3, @babel/parser@npm:^7.4.4":
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.12.13, @babel/parser@npm:^7.13.13, @babel/parser@npm:^7.4.4":
   version: 7.13.13
   resolution: "@babel/parser@npm:7.13.13"
   bin:
@@ -655,18 +655,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-class-properties@npm:7.12.1":
-  version: 7.12.1
-  resolution: "@babel/plugin-proposal-class-properties@npm:7.12.1"
-  dependencies:
-    "@babel/helper-create-class-features-plugin": ^7.12.1
-    "@babel/helper-plugin-utils": ^7.10.4
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 690cbec3df2c4a1ec12c8a99b87dd4cc9aee07627dea957031549997267ee6ce59727ba44266dd83d3c6fb4cf759d14017ad9a530bf3d8f4447780947031449a
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-class-properties@npm:^7.13.0":
   version: 7.13.0
   resolution: "@babel/plugin-proposal-class-properties@npm:7.13.0"
@@ -1031,7 +1019,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-meta@npm:^7.10.4, @babel/plugin-syntax-import-meta@npm:^7.8.3":
+"@babel/plugin-syntax-import-meta@npm:^7.8.3":
   version: 7.10.4
   resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4"
   dependencies:
@@ -1053,7 +1041,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.12.1, @babel/plugin-syntax-jsx@npm:^7.12.13":
+"@babel/plugin-syntax-jsx@npm:^7.12.13":
   version: 7.12.13
   resolution: "@babel/plugin-syntax-jsx@npm:7.12.13"
   dependencies:
@@ -1322,7 +1310,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-flow-strip-types@npm:^7.12.10, @babel/plugin-transform-flow-strip-types@npm:^7.13.0, @babel/plugin-transform-flow-strip-types@npm:^7.4.4":
+"@babel/plugin-transform-flow-strip-types@npm:^7.4.4":
   version: 7.13.0
   resolution: "@babel/plugin-transform-flow-strip-types@npm:7.13.0"
   dependencies:
@@ -1561,7 +1549,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx@npm:^7.0.0, @babel/plugin-transform-react-jsx@npm:^7.12.11, @babel/plugin-transform-react-jsx@npm:^7.12.17, @babel/plugin-transform-react-jsx@npm:^7.13.12":
+"@babel/plugin-transform-react-jsx@npm:^7.0.0, @babel/plugin-transform-react-jsx@npm:^7.12.17, @babel/plugin-transform-react-jsx@npm:^7.13.12":
   version: 7.13.12
   resolution: "@babel/plugin-transform-react-jsx@npm:7.13.12"
   dependencies:
@@ -1588,7 +1576,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regenerator@npm:^7.12.1, @babel/plugin-transform-regenerator@npm:^7.12.13":
+"@babel/plugin-transform-regenerator@npm:^7.12.13":
   version: 7.12.13
   resolution: "@babel/plugin-transform-regenerator@npm:7.12.13"
   dependencies:
@@ -1713,85 +1701,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:^7.12.11, @babel/preset-env@npm:^7.4.4":
-  version: 7.13.12
-  resolution: "@babel/preset-env@npm:7.13.12"
-  dependencies:
-    "@babel/compat-data": ^7.13.12
-    "@babel/helper-compilation-targets": ^7.13.10
-    "@babel/helper-plugin-utils": ^7.13.0
-    "@babel/helper-validator-option": ^7.12.17
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.13.12
-    "@babel/plugin-proposal-async-generator-functions": ^7.13.8
-    "@babel/plugin-proposal-class-properties": ^7.13.0
-    "@babel/plugin-proposal-dynamic-import": ^7.13.8
-    "@babel/plugin-proposal-export-namespace-from": ^7.12.13
-    "@babel/plugin-proposal-json-strings": ^7.13.8
-    "@babel/plugin-proposal-logical-assignment-operators": ^7.13.8
-    "@babel/plugin-proposal-nullish-coalescing-operator": ^7.13.8
-    "@babel/plugin-proposal-numeric-separator": ^7.12.13
-    "@babel/plugin-proposal-object-rest-spread": ^7.13.8
-    "@babel/plugin-proposal-optional-catch-binding": ^7.13.8
-    "@babel/plugin-proposal-optional-chaining": ^7.13.12
-    "@babel/plugin-proposal-private-methods": ^7.13.0
-    "@babel/plugin-proposal-unicode-property-regex": ^7.12.13
-    "@babel/plugin-syntax-async-generators": ^7.8.4
-    "@babel/plugin-syntax-class-properties": ^7.12.13
-    "@babel/plugin-syntax-dynamic-import": ^7.8.3
-    "@babel/plugin-syntax-export-namespace-from": ^7.8.3
-    "@babel/plugin-syntax-json-strings": ^7.8.3
-    "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4
-    "@babel/plugin-syntax-nullish-coalescing-operator": ^7.8.3
-    "@babel/plugin-syntax-numeric-separator": ^7.10.4
-    "@babel/plugin-syntax-object-rest-spread": ^7.8.3
-    "@babel/plugin-syntax-optional-catch-binding": ^7.8.3
-    "@babel/plugin-syntax-optional-chaining": ^7.8.3
-    "@babel/plugin-syntax-top-level-await": ^7.12.13
-    "@babel/plugin-transform-arrow-functions": ^7.13.0
-    "@babel/plugin-transform-async-to-generator": ^7.13.0
-    "@babel/plugin-transform-block-scoped-functions": ^7.12.13
-    "@babel/plugin-transform-block-scoping": ^7.12.13
-    "@babel/plugin-transform-classes": ^7.13.0
-    "@babel/plugin-transform-computed-properties": ^7.13.0
-    "@babel/plugin-transform-destructuring": ^7.13.0
-    "@babel/plugin-transform-dotall-regex": ^7.12.13
-    "@babel/plugin-transform-duplicate-keys": ^7.12.13
-    "@babel/plugin-transform-exponentiation-operator": ^7.12.13
-    "@babel/plugin-transform-for-of": ^7.13.0
-    "@babel/plugin-transform-function-name": ^7.12.13
-    "@babel/plugin-transform-literals": ^7.12.13
-    "@babel/plugin-transform-member-expression-literals": ^7.12.13
-    "@babel/plugin-transform-modules-amd": ^7.13.0
-    "@babel/plugin-transform-modules-commonjs": ^7.13.8
-    "@babel/plugin-transform-modules-systemjs": ^7.13.8
-    "@babel/plugin-transform-modules-umd": ^7.13.0
-    "@babel/plugin-transform-named-capturing-groups-regex": ^7.12.13
-    "@babel/plugin-transform-new-target": ^7.12.13
-    "@babel/plugin-transform-object-super": ^7.12.13
-    "@babel/plugin-transform-parameters": ^7.13.0
-    "@babel/plugin-transform-property-literals": ^7.12.13
-    "@babel/plugin-transform-regenerator": ^7.12.13
-    "@babel/plugin-transform-reserved-words": ^7.12.13
-    "@babel/plugin-transform-shorthand-properties": ^7.12.13
-    "@babel/plugin-transform-spread": ^7.13.0
-    "@babel/plugin-transform-sticky-regex": ^7.12.13
-    "@babel/plugin-transform-template-literals": ^7.13.0
-    "@babel/plugin-transform-typeof-symbol": ^7.12.13
-    "@babel/plugin-transform-unicode-escapes": ^7.12.13
-    "@babel/plugin-transform-unicode-regex": ^7.12.13
-    "@babel/preset-modules": ^0.1.4
-    "@babel/types": ^7.13.12
-    babel-plugin-polyfill-corejs2: ^0.1.4
-    babel-plugin-polyfill-corejs3: ^0.1.3
-    babel-plugin-polyfill-regenerator: ^0.1.2
-    core-js-compat: ^3.9.0
-    semver: ^6.3.0
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: e86ef0d986e388b5c4efd0b426975cc1e41d0aecea9b94ba54904ad06f2ba92d5ee82c3a073edb21cd7ca15b2a22970478cbdd63a69fb2f01d65161904aa998c
-  languageName: node
-  linkType: hard
-
 "@babel/preset-env@npm:^7.14.4":
   version: 7.14.4
   resolution: "@babel/preset-env@npm:7.14.4"
@@ -1875,16 +1784,82 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-flow@npm:^7.12.1":
-  version: 7.13.13
-  resolution: "@babel/preset-flow@npm:7.13.13"
+"@babel/preset-env@npm:^7.4.4":
+  version: 7.13.12
+  resolution: "@babel/preset-env@npm:7.13.12"
   dependencies:
+    "@babel/compat-data": ^7.13.12
+    "@babel/helper-compilation-targets": ^7.13.10
     "@babel/helper-plugin-utils": ^7.13.0
     "@babel/helper-validator-option": ^7.12.17
-    "@babel/plugin-transform-flow-strip-types": ^7.13.0
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.13.12
+    "@babel/plugin-proposal-async-generator-functions": ^7.13.8
+    "@babel/plugin-proposal-class-properties": ^7.13.0
+    "@babel/plugin-proposal-dynamic-import": ^7.13.8
+    "@babel/plugin-proposal-export-namespace-from": ^7.12.13
+    "@babel/plugin-proposal-json-strings": ^7.13.8
+    "@babel/plugin-proposal-logical-assignment-operators": ^7.13.8
+    "@babel/plugin-proposal-nullish-coalescing-operator": ^7.13.8
+    "@babel/plugin-proposal-numeric-separator": ^7.12.13
+    "@babel/plugin-proposal-object-rest-spread": ^7.13.8
+    "@babel/plugin-proposal-optional-catch-binding": ^7.13.8
+    "@babel/plugin-proposal-optional-chaining": ^7.13.12
+    "@babel/plugin-proposal-private-methods": ^7.13.0
+    "@babel/plugin-proposal-unicode-property-regex": ^7.12.13
+    "@babel/plugin-syntax-async-generators": ^7.8.4
+    "@babel/plugin-syntax-class-properties": ^7.12.13
+    "@babel/plugin-syntax-dynamic-import": ^7.8.3
+    "@babel/plugin-syntax-export-namespace-from": ^7.8.3
+    "@babel/plugin-syntax-json-strings": ^7.8.3
+    "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4
+    "@babel/plugin-syntax-nullish-coalescing-operator": ^7.8.3
+    "@babel/plugin-syntax-numeric-separator": ^7.10.4
+    "@babel/plugin-syntax-object-rest-spread": ^7.8.3
+    "@babel/plugin-syntax-optional-catch-binding": ^7.8.3
+    "@babel/plugin-syntax-optional-chaining": ^7.8.3
+    "@babel/plugin-syntax-top-level-await": ^7.12.13
+    "@babel/plugin-transform-arrow-functions": ^7.13.0
+    "@babel/plugin-transform-async-to-generator": ^7.13.0
+    "@babel/plugin-transform-block-scoped-functions": ^7.12.13
+    "@babel/plugin-transform-block-scoping": ^7.12.13
+    "@babel/plugin-transform-classes": ^7.13.0
+    "@babel/plugin-transform-computed-properties": ^7.13.0
+    "@babel/plugin-transform-destructuring": ^7.13.0
+    "@babel/plugin-transform-dotall-regex": ^7.12.13
+    "@babel/plugin-transform-duplicate-keys": ^7.12.13
+    "@babel/plugin-transform-exponentiation-operator": ^7.12.13
+    "@babel/plugin-transform-for-of": ^7.13.0
+    "@babel/plugin-transform-function-name": ^7.12.13
+    "@babel/plugin-transform-literals": ^7.12.13
+    "@babel/plugin-transform-member-expression-literals": ^7.12.13
+    "@babel/plugin-transform-modules-amd": ^7.13.0
+    "@babel/plugin-transform-modules-commonjs": ^7.13.8
+    "@babel/plugin-transform-modules-systemjs": ^7.13.8
+    "@babel/plugin-transform-modules-umd": ^7.13.0
+    "@babel/plugin-transform-named-capturing-groups-regex": ^7.12.13
+    "@babel/plugin-transform-new-target": ^7.12.13
+    "@babel/plugin-transform-object-super": ^7.12.13
+    "@babel/plugin-transform-parameters": ^7.13.0
+    "@babel/plugin-transform-property-literals": ^7.12.13
+    "@babel/plugin-transform-regenerator": ^7.12.13
+    "@babel/plugin-transform-reserved-words": ^7.12.13
+    "@babel/plugin-transform-shorthand-properties": ^7.12.13
+    "@babel/plugin-transform-spread": ^7.13.0
+    "@babel/plugin-transform-sticky-regex": ^7.12.13
+    "@babel/plugin-transform-template-literals": ^7.13.0
+    "@babel/plugin-transform-typeof-symbol": ^7.12.13
+    "@babel/plugin-transform-unicode-escapes": ^7.12.13
+    "@babel/plugin-transform-unicode-regex": ^7.12.13
+    "@babel/preset-modules": ^0.1.4
+    "@babel/types": ^7.13.12
+    babel-plugin-polyfill-corejs2: ^0.1.4
+    babel-plugin-polyfill-corejs3: ^0.1.3
+    babel-plugin-polyfill-regenerator: ^0.1.2
+    core-js-compat: ^3.9.0
+    semver: ^6.3.0
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: b4f3e74e52def7fe63bd0b1f46c8be217c3df17d04cf31072e2c3297bc906c96ce0d3076959b52680ab684c44d54e068a612a0cb5e63ce490e2428d0010840a2
+  checksum: e86ef0d986e388b5c4efd0b426975cc1e41d0aecea9b94ba54904ad06f2ba92d5ee82c3a073edb21cd7ca15b2a22970478cbdd63a69fb2f01d65161904aa998c
   languageName: node
   linkType: hard
 
@@ -1903,7 +1878,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-react@npm:^7.12.10, @babel/preset-react@npm:^7.13.13":
+"@babel/preset-react@npm:^7.13.13":
   version: 7.13.13
   resolution: "@babel/preset-react@npm:7.13.13"
   dependencies:
@@ -1942,7 +1917,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.8.4":
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.8.4":
   version: 7.13.10
   resolution: "@babel/runtime@npm:7.13.10"
   dependencies:
@@ -3582,7 +3557,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/plugin-alias@npm:^3.1.1, @rollup/plugin-alias@npm:^3.1.2":
+"@rollup/plugin-alias@npm:^3.1.2":
   version: 3.1.2
   resolution: "@rollup/plugin-alias@npm:3.1.2"
   dependencies:
@@ -3593,51 +3568,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/plugin-babel@npm:^5.2.2":
-  version: 5.3.0
-  resolution: "@rollup/plugin-babel@npm:5.3.0"
-  dependencies:
-    "@babel/helper-module-imports": ^7.10.4
-    "@rollup/pluginutils": ^3.1.0
-  peerDependencies:
-    "@babel/core": ^7.0.0
-    "@types/babel__core": ^7.1.9
-    rollup: ^1.20.0||^2.0.0
-  peerDependenciesMeta:
-    "@types/babel__core":
-      optional: true
-  checksum: 44efa786f256b46bc4b51866278586306b12eba1b68738f4535ee013cd2fd3b6baed7a7adebf1f179019f054c5c10e9c202360b117851f612cd7e7f5cb4be3e7
-  languageName: node
-  linkType: hard
-
-"@rollup/plugin-commonjs@npm:^17.0.0":
-  version: 17.1.0
-  resolution: "@rollup/plugin-commonjs@npm:17.1.0"
-  dependencies:
-    "@rollup/pluginutils": ^3.1.0
-    commondir: ^1.0.1
-    estree-walker: ^2.0.1
-    glob: ^7.1.6
-    is-reference: ^1.2.1
-    magic-string: ^0.25.7
-    resolve: ^1.17.0
-  peerDependencies:
-    rollup: ^2.30.0
-  checksum: 9b162f93090e5bf544c85bb835a29f65371726d2e6161aa1a048bbb708b77433184e5836e7118e2c6277f9a9a7b5835f56e420d2040b1b623b03ca76db4b5d10
-  languageName: node
-  linkType: hard
-
-"@rollup/plugin-json@npm:^4.1.0":
-  version: 4.1.0
-  resolution: "@rollup/plugin-json@npm:4.1.0"
-  dependencies:
-    "@rollup/pluginutils": ^3.0.8
-  peerDependencies:
-    rollup: ^1.20.0 || ^2.0.0
-  checksum: 07bc6bc83d07aefd35278e4e1a125e65210061b3dcab50c0f01273c54f43a60a3e01c1a0fed451e35d592ef1cbc8288ec8148a6229cf8cca9cdbf11a6d2d7d1c
-  languageName: node
-  linkType: hard
-
 "@rollup/plugin-multi-entry@npm:^4.0.0":
   version: 4.0.0
   resolution: "@rollup/plugin-multi-entry@npm:4.0.0"
@@ -3650,22 +3580,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/plugin-node-resolve@npm:^11.0.1":
-  version: 11.2.1
-  resolution: "@rollup/plugin-node-resolve@npm:11.2.1"
-  dependencies:
-    "@rollup/pluginutils": ^3.1.0
-    "@types/resolve": 1.17.1
-    builtin-modules: ^3.1.0
-    deepmerge: ^4.2.2
-    is-module: ^1.0.0
-    resolve: ^1.19.0
-  peerDependencies:
-    rollup: ^1.20.0||^2.0.0
-  checksum: ae1bed46a949a1d8c077e021751c0140a523f731bea464ed0bfc3d335096493d1638be2a756f72d96f1f3a00fbdad8ba8fad8e86381d3eafce5ea2dffd62f175
-  languageName: node
-  linkType: hard
-
 "@rollup/plugin-replace@npm:^2.4.2":
   version: 2.4.2
   resolution: "@rollup/plugin-replace@npm:2.4.2"
@@ -3701,7 +3615,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/pluginutils@npm:^3.0.8, @rollup/pluginutils@npm:^3.1.0":
+"@rollup/pluginutils@npm:^3.1.0":
   version: 3.1.0
   resolution: "@rollup/pluginutils@npm:3.1.0"
   dependencies:
@@ -3804,6 +3718,7 @@ __metadata:
     "@types/react": ^17.0.9
     "@types/styled-components": ^5.1.9
     lodash-es: ^4.17.21
+    polished: ^4.1.3
     react: ^17.0.2
     react-dom: ^17.0.2
     react-icons: ^4.2.0
@@ -3911,13 +3826,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:*":
-  version: 0.0.47
-  resolution: "@types/estree@npm:0.0.47"
-  checksum: 28cba548c7b61855f4ff0c20146512e71fb578253e3cb24baf1acf660c626a8a271f99848e8a8c4e0e87f177cfce28e8d1fcecb65a4aad4a92ba48fd73179289
-  languageName: node
-  linkType: hard
-
 "@types/estree@npm:0.0.39":
   version: 0.0.39
   resolution: "@types/estree@npm:0.0.39"
@@ -4142,15 +4050,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/resolve@npm:1.17.1":
-  version: 1.17.1
-  resolution: "@types/resolve@npm:1.17.1"
-  dependencies:
-    "@types/node": "*"
-  checksum: 8e72a73574f9489760662498c1ad512a8d4084a5db15f327e0d785cb277bb0a3146cd049241a8e3268bd0ed204ad3ee7b4a6b4622ef681e70547be9af258ca6a
-  languageName: node
-  linkType: hard
-
 "@types/scheduler@npm:*":
   version: 0.16.1
   resolution: "@types/scheduler@npm:0.16.1"
@@ -4854,13 +4753,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"asyncro@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "asyncro@npm:3.0.0"
-  checksum: 3dbba0649d0d8d01f4e5190107022c09d56f2d7ce86229b14ded02f89b800ec96c79f48bb8ae49b5501eab8535428cd52bdf9f2b5fce2816ed6e6777e1b254eb
-  languageName: node
-  linkType: hard
-
 "at-least-node@npm:^1.0.0":
   version: 1.0.0
   resolution: "at-least-node@npm:1.0.0"
@@ -4877,24 +4769,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"autoprefixer@npm:^10.1.0":
-  version: 10.2.5
-  resolution: "autoprefixer@npm:10.2.5"
-  dependencies:
-    browserslist: ^4.16.3
-    caniuse-lite: ^1.0.30001196
-    colorette: ^1.2.2
-    fraction.js: ^4.0.13
-    normalize-range: ^0.1.2
-    postcss-value-parser: ^4.1.0
-  peerDependencies:
-    postcss: ^8.1.0
-  bin:
-    autoprefixer: bin/autoprefixer
-  checksum: bd346dd75b7cb3bc8edca6e36edf1f4e0ae5bf0a51b2ac6d07523efd21d272d8932643f9a9410b4ee2ff36936531f7b6fa9d30d87b044579612f249fb96b9c78
-  languageName: node
-  linkType: hard
-
 "autoprefixer@npm:^10.2.5, autoprefixer@npm:^10.2.6":
   version: 10.2.6
   resolution: "autoprefixer@npm:10.2.6"
@@ -5111,17 +4985,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-macros@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "babel-plugin-macros@npm:3.0.1"
-  dependencies:
-    "@babel/runtime": ^7.12.5
-    cosmiconfig: ^7.0.0
-    resolve: ^1.19.0
-  checksum: f1a523136365b5bfb23bfc05d3d0b91358adc854a3440d3ea6220b6427bf43d8ea25b7f01ade618af943005d82f449389d02446a4b097a87ccd7eeab14921e03
-  languageName: node
-  linkType: hard
-
 "babel-plugin-polyfill-corejs2@npm:^0.1.4":
   version: 0.1.10
   resolution: "babel-plugin-polyfill-corejs2@npm:0.1.10"
@@ -5215,24 +5078,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-transform-async-to-promises@npm:^0.8.15":
-  version: 0.8.15
-  resolution: "babel-plugin-transform-async-to-promises@npm:0.8.15"
-  checksum: 1226b08145e085572f1d99bc46c0a5ea3128d160999b2242f199ed1249d2777b6bb3d123440e8e1b95b04e863b6f1aadba099bdfabca033827d5f2cc4285badd
-  languageName: node
-  linkType: hard
-
-"babel-plugin-transform-replace-expressions@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "babel-plugin-transform-replace-expressions@npm:0.2.0"
-  dependencies:
-    "@babel/parser": ^7.3.3
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 24c67759289e066c7a7b2645181e900281637eb8c92ec710146e4519a598f502708f525a3f9a288af232d324fe39e07c23e1770549199f1a4f90239efb863a3b
-  languageName: node
-  linkType: hard
-
 "babel-polyfill@npm:^6.26.0":
   version: 6.26.0
   resolution: "babel-polyfill@npm:6.26.0"
@@ -5554,15 +5399,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"brotli-size@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "brotli-size@npm:4.0.0"
-  dependencies:
-    duplexer: 0.1.1
-  checksum: 32727e85a7b8af5cfa1fa4c885ce9c214f02ae1169377bce1f72ef970b7a7dec90c4e978c5a68f3cdcdd2fa0314559a3f02131ad849f1d18c8a8cf907c909136
-  languageName: node
-  linkType: hard
-
 "browser-process-hrtime@npm:^1.0.0":
   version: 1.0.0
   resolution: "browser-process-hrtime@npm:1.0.0"
@@ -5714,13 +5550,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"builtin-modules@npm:^3.1.0":
-  version: 3.2.0
-  resolution: "builtin-modules@npm:3.2.0"
-  checksum: f0e7240f70ae472a0a0167bf76d2e828c73028fe60be8cd229939c38a27527ea68c92f700553dac1316fa124af3037bc7a765ca0e029a03d2e9201dfb372ea24
-  languageName: node
-  linkType: hard
-
 "builtin-status-codes@npm:^3.0.0":
   version: 3.0.0
   resolution: "builtin-status-codes@npm:3.0.0"
@@ -5925,7 +5754,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001181, caniuse-lite@npm:^1.0.30001196":
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001181":
   version: 1.0.30001207
   resolution: "caniuse-lite@npm:1.0.30001207"
   checksum: c0f1097c43be5178b56f4ae8829c57e3aa4658eaf8c8b9c06612dd7c43667e0b1122d7a61e5b0d73076e601df74917f43532b45ccf9ac5c207e4892f682b2087
@@ -5962,7 +5791,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^1.0.0, chalk@npm:^1.1.3":
+"chalk@npm:^1.1.3":
   version: 1.1.3
   resolution: "chalk@npm:1.1.3"
   dependencies:
@@ -6459,15 +6288,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"concat-with-sourcemaps@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "concat-with-sourcemaps@npm:1.1.0"
-  dependencies:
-    source-map: ^0.6.1
-  checksum: fdde7c621e5f8e1015670294ec5d524787b0eb53c422222dc10a0b2b2762a310197043aba526a3ed5f8933fb44e68d40e8119723bbf20f1f95d43699960f6933
-  languageName: node
-  linkType: hard
-
 "config-chain@npm:^1.1.12":
   version: 1.1.12
   resolution: "config-chain@npm:1.1.12"
@@ -7662,14 +7482,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"duplexer@npm:0.1.1":
-  version: 0.1.1
-  resolution: "duplexer@npm:0.1.1"
-  checksum: cd332f728a580abef8a87b38e129c7425d34b7dcc4e1b596da300bb3309e10ba51848429a0c0d1f134b66cae8c9ffe1371e3718c74a6f57da2a544a589b21216
-  languageName: node
-  linkType: hard
-
-"duplexer@npm:^0.1.1, duplexer@npm:^0.1.2":
+"duplexer@npm:^0.1.1":
   version: 0.1.2
   resolution: "duplexer@npm:0.1.2"
   checksum: 5c2ccea7c8e130bffabeafeadaf58dd38d4abd1b2c563d462f026f78d4b2f2085d64342b964660241591ade874f9a54890a965324f6c56e2bd1924d0cf583c5a
@@ -8277,13 +8090,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"estree-walker@npm:^0.6.1":
-  version: 0.6.1
-  resolution: "estree-walker@npm:0.6.1"
-  checksum: a63b94b841fcda2d79ff8e313b4ea8439b3364094ba66547289814bd7da4399a54cd33849b23504d239266430f219a142627071201a9fb6eb488bd025575f8fc
-  languageName: node
-  linkType: hard
-
 "estree-walker@npm:^1.0.1":
   version: 1.0.1
   resolution: "estree-walker@npm:1.0.1"
@@ -8291,13 +8097,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"estree-walker@npm:^2.0.1":
-  version: 2.0.2
-  resolution: "estree-walker@npm:2.0.2"
-  checksum: 378cc9d3be56962c5219c55ad1fde732cb7d55a11cde5acbf5995f39ddd0e98c1095a43c0ef15a520d1d6910e816bd3daff5fc5d7d38baaf8b12d5a2970df57c
-  languageName: node
-  linkType: hard
-
 "esutils@npm:^2.0.2":
   version: 2.0.3
   resolution: "esutils@npm:2.0.3"
@@ -8615,16 +8414,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"figures@npm:^1.0.1":
-  version: 1.7.0
-  resolution: "figures@npm:1.7.0"
-  dependencies:
-    escape-string-regexp: ^1.0.5
-    object-assign: ^4.1.0
-  checksum: 17f76820de5201632650d0ea10b5485111677df96423a2401158e85eeb277344551fea908d4ca7407f4fa99ac2e7a70839ece89ce6185e7fa6787245aeb7fd87
-  languageName: node
-  linkType: hard
-
 "figures@npm:^3.0.0":
   version: 3.2.0
   resolution: "figures@npm:3.2.0"
@@ -8669,13 +8458,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"filesize@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "filesize@npm:6.1.0"
-  checksum: 5c0c4be4861bacdfcb701f1162aad6d6fe3724cbb69fcb9f55b3adfbb43d83d776790446a3d10da1cecf3616fc91b5d73ee3ab174ff1e141c983418cb83f9c9c
-  languageName: node
-  linkType: hard
-
 "fill-range@npm:^4.0.0":
   version: 4.0.0
   resolution: "fill-range@npm:4.0.0"
@@ -8823,13 +8605,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fraction.js@npm:^4.0.13":
-  version: 4.0.13
-  resolution: "fraction.js@npm:4.0.13"
-  checksum: 1e9ec132b09f17f3e41aa53508197901277f11896f6adc0b51a4b38511e6236813a471488c319221f4fadf7c854be9566a4924215623b460364591d80e1791c3
-  languageName: node
-  linkType: hard
-
 "fraction.js@npm:^4.1.1":
   version: 4.1.1
   resolution: "fraction.js@npm:4.1.1"
@@ -8860,17 +8635,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:8.1.0":
-  version: 8.1.0
-  resolution: "fs-extra@npm:8.1.0"
-  dependencies:
-    graceful-fs: ^4.2.0
-    jsonfile: ^4.0.0
-    universalify: ^0.1.0
-  checksum: 056a96d4f55ab8728b021e251175a4a6440d1edb5845e6c2e8e010019bde3e63de188a0eb99386c21c71804ca1a571cd6e08f507971f10a2bc4f4f7667720fa4
-  languageName: node
-  linkType: hard
-
 "fs-extra@npm:^10.0.0":
   version: 10.0.0
   resolution: "fs-extra@npm:10.0.0"
@@ -9269,13 +9033,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"globalyzer@npm:0.1.0":
-  version: 0.1.0
-  resolution: "globalyzer@npm:0.1.0"
-  checksum: 44d8bd60b2ad2b976e54352d40a3166c9c80a19f72be029e2873fdea19f5ad09e696e12f712aa8a1449a24c391712e0769f1a537c7744e78f597e695b0d3ca12
-  languageName: node
-  linkType: hard
-
 "globby@npm:^11.0.2, globby@npm:^11.0.3":
   version: 11.0.3
   resolution: "globby@npm:11.0.3"
@@ -9290,13 +9047,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"globrex@npm:^0.1.2":
-  version: 0.1.2
-  resolution: "globrex@npm:0.1.2"
-  checksum: 78825a08abba1994cc3f79a3812a627cf22ac676b08e3b812a7c284af47d39d4dcddff6ac811cb994e817949df1ea53a17c13aa561d9c265b4d3fc34b7362990
-  languageName: node
-  linkType: hard
-
 "glsl-noise@npm:^0.0.0":
   version: 0.0.0
   resolution: "glsl-noise@npm:0.0.0"
@@ -9321,24 +9071,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"gzip-size@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "gzip-size@npm:3.0.0"
-  dependencies:
-    duplexer: ^0.1.1
-  checksum: f3f12838b29dba067999fc61bcae52bab1d6687312c6e3d74a41069b8d8b8197fa56287ce13320b29fda8cd48521678e39745236e31841ecd5469e65d7f8b73d
-  languageName: node
-  linkType: hard
-
-"gzip-size@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "gzip-size@npm:6.0.0"
-  dependencies:
-    duplexer: ^0.1.2
-  checksum: 37e0d62ce9db9c8684e056ed65d64485c0921b37a6bda61c119d1de171ec5302d700440c9898679e0715ea61f9907a0117828bf3bbc4e6b7b728ded0957426b6
-  languageName: node
-  linkType: hard
-
 "handlebars@npm:^4.7.6":
   version: 4.7.7
   resolution: "handlebars@npm:4.7.7"
@@ -9887,15 +9619,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"import-cwd@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "import-cwd@npm:3.0.0"
-  dependencies:
-    import-from: ^3.0.0
-  checksum: 5689cfc5d26336ed9ae15a2c725d881845a2455a75fdd92cf715fa92e13ede901cf95c7bb48aeca9b7612f23d53380ff762defc804403f653eedcf53c37e9e5c
-  languageName: node
-  linkType: hard
-
 "import-fresh@npm:^2.0.0":
   version: 2.0.0
   resolution: "import-fresh@npm:2.0.0"
@@ -9916,15 +9639,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"import-from@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "import-from@npm:3.0.0"
-  dependencies:
-    resolve-from: ^5.0.0
-  checksum: ba66d42da541286fe50afe800a506534560c067eac7fa1c5fa83b4ea69eb92952adf6bff4ae6a3ea2e45780a874aa0341e4101e6ebc3f9b8fd6b83ac29fafe1b
-  languageName: node
-  linkType: hard
-
 "import-local@npm:^3.0.2":
   version: 3.0.2
   resolution: "import-local@npm:3.0.2"
@@ -10391,13 +10105,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"is-module@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "is-module@npm:1.0.0"
-  checksum: 2cbd41e2760874130b76aee84cc53120c4feef0d0f196fa665326857b444c8549909cc840f3f3a59652a7e8df46146a77f6c0f3f70a578704e03670975843e74
-  languageName: node
-  linkType: hard
-
 "is-negative-zero@npm:^2.0.1":
   version: 2.0.1
   resolution: "is-negative-zero@npm:2.0.1"
@@ -10479,15 +10186,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"is-reference@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "is-reference@npm:1.2.1"
-  dependencies:
-    "@types/estree": "*"
-  checksum: 9daa3d7c4dc159e326be68c025a43bf714b36a6d065c2cc6907f7c44d010867dd10ec7f74bff37cb5d2000ac8b03c94cde3d69c85dc9a56a887ce576200ad01f
-  languageName: node
-  linkType: hard
-
 "is-regex@npm:^1.1.2":
   version: 1.1.2
   resolution: "is-regex@npm:1.1.2"
@@ -11257,7 +10955,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"jest-worker@npm:^26.2.1, jest-worker@npm:^26.6.2":
+"jest-worker@npm:^26.6.2":
   version: 26.6.2
   resolution: "jest-worker@npm:26.6.2"
   dependencies:
@@ -11546,18 +11244,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"jsonfile@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "jsonfile@npm:4.0.0"
-  dependencies:
-    graceful-fs: ^4.1.6
-  dependenciesMeta:
-    graceful-fs:
-      optional: true
-  checksum: a40b7b64da41c84b0dc7ad753737ba240bb0dc50a94be20ec0b73459707dede69a6f89eb44b4d29e6994ed93ddf8c9b6e57f6b1f09dd707567959880ad6cee7f
-  languageName: node
-  linkType: hard
-
 "jsonfile@npm:^6.0.1":
   version: 6.1.0
   resolution: "jsonfile@npm:6.1.0"
@@ -11646,13 +11332,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"kleur@npm:^4.1.3":
-  version: 4.1.4
-  resolution: "kleur@npm:4.1.4"
-  checksum: 18e52c52a0138448dea0137d09ace853e096f1bbc32b99d8781254258b892214718f5f7c2bc25f25d5fb84b4086bca465a4c0b7562e27ae3a25116f77ea6436f
-  languageName: node
-  linkType: hard
-
 "ktx-parse@npm:^0.2.1":
   version: 0.2.1
   resolution: "ktx-parse@npm:0.2.1"
@@ -12260,18 +11939,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"maxmin@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "maxmin@npm:2.1.0"
-  dependencies:
-    chalk: ^1.0.0
-    figures: ^1.0.1
-    gzip-size: ^3.0.0
-    pretty-bytes: ^3.0.0
-  checksum: 8e4dc6b7cce7c4c06a4cdef8fff6d41c0c4bc1397258325bfe2a6c07832b556969f82292a1156dcabd08f6559b880afe436bca4204b3fd7a0b74a0e3ec6878e3
-  languageName: node
-  linkType: hard
-
 "md5.js@npm:^1.3.4":
   version: 1.3.5
   resolution: "md5.js@npm:1.3.5"
@@ -12364,55 +12031,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"microbundle@npm:^0.13.0":
-  version: 0.13.0
-  resolution: "microbundle@npm:0.13.0"
-  dependencies:
-    "@babel/core": ^7.12.10
-    "@babel/plugin-proposal-class-properties": 7.12.1
-    "@babel/plugin-syntax-import-meta": ^7.10.4
-    "@babel/plugin-syntax-jsx": ^7.12.1
-    "@babel/plugin-transform-flow-strip-types": ^7.12.10
-    "@babel/plugin-transform-react-jsx": ^7.12.11
-    "@babel/plugin-transform-regenerator": ^7.12.1
-    "@babel/preset-env": ^7.12.11
-    "@babel/preset-flow": ^7.12.1
-    "@babel/preset-react": ^7.12.10
-    "@rollup/plugin-alias": ^3.1.1
-    "@rollup/plugin-babel": ^5.2.2
-    "@rollup/plugin-commonjs": ^17.0.0
-    "@rollup/plugin-json": ^4.1.0
-    "@rollup/plugin-node-resolve": ^11.0.1
-    asyncro: ^3.0.0
-    autoprefixer: ^10.1.0
-    babel-plugin-macros: ^3.0.1
-    babel-plugin-transform-async-to-promises: ^0.8.15
-    babel-plugin-transform-replace-expressions: ^0.2.0
-    brotli-size: ^4.0.0
-    builtin-modules: ^3.1.0
-    camelcase: ^6.2.0
-    escape-string-regexp: ^4.0.0
-    filesize: ^6.1.0
-    gzip-size: ^6.0.0
-    kleur: ^4.1.3
-    lodash.merge: ^4.6.2
-    postcss: ^8.2.1
-    pretty-bytes: ^5.4.1
-    rollup: ^2.35.1
-    rollup-plugin-bundle-size: ^1.0.3
-    rollup-plugin-postcss: ^4.0.0
-    rollup-plugin-terser: ^7.0.2
-    rollup-plugin-typescript2: ^0.29.0
-    sade: ^1.7.4
-    tiny-glob: ^0.2.8
-    tslib: ^2.0.3
-    typescript: ^4.1.3
-  bin:
-    microbundle: dist/cli.js
-  checksum: 76cda7377ab60443b63570ddacbf81b406096f34cbf01126bfefa5c8e06bf3d093d12e58649cf2789d56d07d3084c37491af8b3faddf5590b0df3c4c601c14bc
-  languageName: node
-  linkType: hard
-
 "micromatch@npm:^3.0.4, micromatch@npm:^3.1.10, micromatch@npm:^3.1.4":
   version: 3.1.10
   resolution: "micromatch@npm:3.1.10"
@@ -12714,13 +12332,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"mri@npm:^1.1.0":
-  version: 1.1.6
-  resolution: "mri@npm:1.1.6"
-  checksum: 87a09465063063da6d69d98ac75a6206a597c7533561c74e8aab5e6490ebe2a0e94c583fb6e02429e1f4291286a9549eb6a9699c83f5bad252c2c9b4eada97da
-  languageName: node
-  linkType: hard
-
 "ms@npm:2.0.0":
   version: 2.0.0
   resolution: "ms@npm:2.0.0"
@@ -14279,16 +13890,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"postcss-load-config@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "postcss-load-config@npm:3.0.1"
-  dependencies:
-    cosmiconfig: ^7.0.0
-    import-cwd: ^3.0.0
-  checksum: e71f181552a8e6c52577034d440ef3599af353caab29e6f124b8e969f00cbc1dc7a2640e352920891892a4b0f0e5084d73a89a0512d128b6a91384d8d5833cd6
-  languageName: node
-  linkType: hard
-
 "postcss-merge-longhand@npm:^4.0.11":
   version: 4.0.11
   resolution: "postcss-merge-longhand@npm:4.0.11"
@@ -14832,22 +14433,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"pretty-bytes@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "pretty-bytes@npm:3.0.1"
-  dependencies:
-    number-is-nan: ^1.0.0
-  checksum: b2dd0a014cb3726d50ef0526bdfe9ad0c606f20ad0e531159394549697930bf9f92e909e83402dde4f5531a7607592bb177fdaca1d451e6b648b5b11688a3877
-  languageName: node
-  linkType: hard
-
-"pretty-bytes@npm:^5.4.1":
-  version: 5.6.0
-  resolution: "pretty-bytes@npm:5.6.0"
-  checksum: 2a2db3daaee5c7271dbc68cc875118f4e2b6697e9e4e73b4ea5d5639f50cff2c1f1f7db4775119974eff86fdbd1fac2a5d9f16bc41d90626821a9f6a0e6e26cf
-  languageName: node
-  linkType: hard
-
 "pretty-format@npm:^26.0.0, pretty-format@npm:^26.6.2":
   version: 26.6.2
   resolution: "pretty-format@npm:26.6.2"
@@ -14924,13 +14509,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"promise.series@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "promise.series@npm:0.2.0"
-  checksum: 51fb6c8e50d756a1ce934407fd2bc8f3dcee2bf280c7bbd8cc95925f58358625059adf4437801556d6d381d84e91b6e98fda9780e601fe56f81a856ea8f95e25
-  languageName: node
-  linkType: hard
-
 "prompts@npm:^2.0.1":
   version: 2.4.1
   resolution: "prompts@npm:2.4.1"
@@ -15154,7 +14732,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"randombytes@npm:^2.0.0, randombytes@npm:^2.0.1, randombytes@npm:^2.0.5, randombytes@npm:^2.1.0":
+"randombytes@npm:^2.0.0, randombytes@npm:^2.0.1, randombytes@npm:^2.0.5":
   version: 2.1.0
   resolution: "randombytes@npm:2.1.0"
   dependencies:
@@ -15926,16 +15504,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-resolve@1.17.0:
-  version: 1.17.0
-  resolution: "resolve@npm:1.17.0"
-  dependencies:
-    path-parse: ^1.0.6
-  checksum: 5e3cdb8cf68c20b0c5edeb6505e7fab20c6776af0cae4b978836e557420aef7bb50acd25339bbb143b7f80533aa1988c7e827a0061aee9c237926a7d2c41f8d0
-  languageName: node
-  linkType: hard
-
-"resolve@^1.1.5, resolve@^1.1.6, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.4.0, resolve@npm:^1.2.0":
+"resolve@^1.1.5, resolve@^1.1.6, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.20.0, resolve@^1.4.0, resolve@npm:^1.2.0":
   version: 1.20.0
   resolution: "resolve@npm:1.20.0"
   dependencies:
@@ -16032,16 +15601,6 @@ resolve@1.17.0:
   languageName: node
   linkType: hard
 
-"rollup-plugin-bundle-size@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "rollup-plugin-bundle-size@npm:1.0.3"
-  dependencies:
-    chalk: ^1.1.3
-    maxmin: ^2.1.0
-  checksum: 513b3fff6f865e7eca405448adc1fbac5535a0959da9a11b95e626f305e1cede37dee8aae43a5b247e4ab062fa6daf654fb82b3e5a7db3541194f3556c223229
-  languageName: node
-  linkType: hard
-
 "rollup-plugin-dts@npm:^3.0.2":
   version: 3.0.2
   resolution: "rollup-plugin-dts@npm:3.0.2"
@@ -16058,82 +15617,6 @@ resolve@1.17.0:
   languageName: node
   linkType: hard
 
-"rollup-plugin-postcss@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "rollup-plugin-postcss@npm:4.0.0"
-  dependencies:
-    chalk: ^4.1.0
-    concat-with-sourcemaps: ^1.1.0
-    cssnano: ^4.1.10
-    import-cwd: ^3.0.0
-    p-queue: ^6.6.2
-    pify: ^5.0.0
-    postcss-load-config: ^3.0.0
-    postcss-modules: ^4.0.0
-    promise.series: ^0.2.0
-    resolve: ^1.19.0
-    rollup-pluginutils: ^2.8.2
-    safe-identifier: ^0.4.2
-    style-inject: ^0.3.0
-  peerDependencies:
-    postcss: 8.x
-  checksum: 89795a34e7f20d631f6cce042da9a77f4dd21bba2d1b08fde550defca1b29a085ad17689a57b19912b345cb642f5988afa714c99642ccb44529c9e8a40a345ab
-  languageName: node
-  linkType: hard
-
-"rollup-plugin-terser@npm:^7.0.2":
-  version: 7.0.2
-  resolution: "rollup-plugin-terser@npm:7.0.2"
-  dependencies:
-    "@babel/code-frame": ^7.10.4
-    jest-worker: ^26.2.1
-    serialize-javascript: ^4.0.0
-    terser: ^5.0.0
-  peerDependencies:
-    rollup: ^2.0.0
-  checksum: 553cc21efcea3e4d46c61fbd41cb4a82a3ab8e02ae4ce7c03f9248dea93e5a91c3624e2271490ee05b2bb481568305733b496d968d3ac9c99b777a588a336f01
-  languageName: node
-  linkType: hard
-
-"rollup-plugin-typescript2@npm:^0.29.0":
-  version: 0.29.0
-  resolution: "rollup-plugin-typescript2@npm:0.29.0"
-  dependencies:
-    "@rollup/pluginutils": ^3.1.0
-    find-cache-dir: ^3.3.1
-    fs-extra: 8.1.0
-    resolve: 1.17.0
-    tslib: 2.0.1
-  peerDependencies:
-    rollup: ">=1.26.3"
-    typescript: ">=2.4.0"
-  checksum: 6ca2dfc4b41e4e3d2baef2b33b3744f2aad619407f2571e8c831ce60ffc9b91b2e660f7d10f9c8474b8503fc628eb430309d25e4c0bcee51f84f62e45ce54174
-  languageName: node
-  linkType: hard
-
-"rollup-pluginutils@npm:^2.8.2":
-  version: 2.8.2
-  resolution: "rollup-pluginutils@npm:2.8.2"
-  dependencies:
-    estree-walker: ^0.6.1
-  checksum: 6922c1a26df033cc3da4650106244fb2211b5ddf72a93be5010cbe51a0817c9abcab08f61cbc3f5fc906b2701df123d8c9b0dae0a34e69dd07218e34e5d357b8
-  languageName: node
-  linkType: hard
-
-"rollup@npm:^2.35.1":
-  version: 2.44.0
-  resolution: "rollup@npm:2.44.0"
-  dependencies:
-    fsevents: ~2.3.1
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  bin:
-    rollup: dist/bin/rollup
-  checksum: 8142c058b297e478b4b0a1fcf114aac26a3ac2b9bb18b15af3895751a4c161708789f6a72f3bc02148cff8482a8dc69c303bd052cb56f2e61fcb4218c734cb11
-  languageName: node
-  linkType: hard
-
 "rollup@npm:^2.50.5":
   version: 2.50.5
   resolution: "rollup@npm:2.50.5"
@@ -16189,15 +15672,6 @@ resolve@1.17.0:
   languageName: node
   linkType: hard
 
-"sade@npm:^1.7.4":
-  version: 1.7.4
-  resolution: "sade@npm:1.7.4"
-  dependencies:
-    mri: ^1.1.0
-  checksum: cff044d607d226858dc3a23fed521b152cc3a14aa62e4533fac5c6a4b39807135636328419447f05a35783b81264f18e5fd5aeb47f10f2e3a9a423864fbb83f9
-  languageName: node
-  linkType: hard
-
 "safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:^5.1.1, safe-buffer@npm:^5.1.2, safe-buffer@npm:^5.2.0, safe-buffer@npm:~5.2.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
@@ -16212,13 +15686,6 @@ resolve@1.17.0:
   languageName: node
   linkType: hard
 
-"safe-identifier@npm:^0.4.2":
-  version: 0.4.2
-  resolution: "safe-identifier@npm:0.4.2"
-  checksum: 659986cb9f995387032675b89eed8a0a129af7fece421ed0488072644b7c29266aa76c01576d1c4eb24764048da9be3cc65ab643a8732be277dae0d7590cb086
-  languageName: node
-  linkType: hard
-
 "safe-regex@npm:^1.1.0":
   version: 1.1.0
   resolution: "safe-regex@npm:1.1.0"
@@ -16395,15 +15862,6 @@ resolve@1.17.0:
   languageName: node
   linkType: hard
 
-"serialize-javascript@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "serialize-javascript@npm:4.0.0"
-  dependencies:
-    randombytes: ^2.1.0
-  checksum: f17305aaabab9ae443505d1bf477c13b09adb7031c397d18400bec16f43f788febdd3311ca6043fdebd1d446cfa70a5804ef7268da54351dec51080f56d52fa9
-  languageName: node
-  linkType: hard
-
 "serialize-to-js@npm:^3.0.0":
   version: 3.1.1
   resolution: "serialize-to-js@npm:3.1.1"
@@ -16768,7 +16226,7 @@ resolve@1.17.0:
   languageName: node
   linkType: hard
 
-"source-map-support@npm:^0.5.17, source-map-support@npm:^0.5.6, source-map-support@npm:~0.5.10, source-map-support@npm:~0.5.12, source-map-support@npm:~0.5.19":
+"source-map-support@npm:^0.5.17, source-map-support@npm:^0.5.6, source-map-support@npm:~0.5.10, source-map-support@npm:~0.5.12":
   version: 0.5.19
   resolution: "source-map-support@npm:0.5.19"
   dependencies:
@@ -16806,7 +16264,7 @@ resolve@1.17.0:
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.7.3, source-map@npm:~0.7.2":
+"source-map@npm:^0.7.3":
   version: 0.7.3
   resolution: "source-map@npm:0.7.3"
   checksum: 351ce26ffa1ebf203660c0d70d7566c81e65d2d994d1c2d94da140808e02da34961673ce12ecea9b40797b96fbeb8c70bf71a4ad9f779f1a4fdbba75530bb386
@@ -17304,13 +16762,6 @@ resolve@1.17.0:
   languageName: node
   linkType: hard
 
-"style-inject@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "style-inject@npm:0.3.0"
-  checksum: 1ff06fa7d2f1724ca333c402eff1b221a4bc829c617743639e02e7e4ee1ee276443994917c34521c3b826805d84e8e4bbc69e8f74a21fcda87d4647c624f377d
-  languageName: node
-  linkType: hard
-
 "styled-components@npm:^5.3.0":
   version: 5.3.0
   resolution: "styled-components@npm:5.3.0"
@@ -17626,19 +17077,6 @@ resolve@1.17.0:
   languageName: node
   linkType: hard
 
-"terser@npm:^5.0.0":
-  version: 5.6.1
-  resolution: "terser@npm:5.6.1"
-  dependencies:
-    commander: ^2.20.0
-    source-map: ~0.7.2
-    source-map-support: ~0.5.19
-  bin:
-    terser: bin/terser
-  checksum: 55348dd25452f0a1690040f943a890dc3e33b8711b1c0592ef1114b2eca51d6ec8db8f8f769f1483b088575c07f44b7e92b3dda5f430ff6fa8c2ebd461db26f9
-  languageName: node
-  linkType: hard
-
 "test-exclude@npm:^6.0.0":
   version: 6.0.0
   resolution: "test-exclude@npm:6.0.0"
@@ -17753,7 +17191,6 @@ resolve@1.17.0:
     json-touch-patch: ^0.11.2
     lodash: ^4.17.21
     lodash-es: ^4.17.21
-    microbundle: ^0.13.0
     nanoid: ^3.1.23
     npm-run-all: ^4.1.5
     null-loader: ^4.0.1
@@ -17767,6 +17204,7 @@ resolve@1.17.0:
     react-shadow: ^19.0.2
     react-use: ^17.2.4
     react-use-gesture: ^9.1.3
+    reakit: ^1.3.8
     redux: ^3.7.2
     redux-actions: ^2.6.5
     rimraf: ^3.0.2
@@ -17881,16 +17319,6 @@ resolve@1.17.0:
   languageName: node
   linkType: hard
 
-"tiny-glob@npm:^0.2.8":
-  version: 0.2.8
-  resolution: "tiny-glob@npm:0.2.8"
-  dependencies:
-    globalyzer: 0.1.0
-    globrex: ^0.1.2
-  checksum: 85bf5cb2254f3c85ee15bc1b5e2dad17e2ca3c9ebcd94dc0847820308f2c5ab89bcf60d7b395fe430519608da2e4bd464a967807112abaa50aa54a6375fc7584
-  languageName: node
-  linkType: hard
-
 "tiny-inflate@npm:^1.0.0, tiny-inflate@npm:^1.0.3":
   version: 1.0.3
   resolution: "tiny-inflate@npm:1.0.3"
@@ -18160,13 +17588,6 @@ resolve@1.17.0:
   languageName: node
   linkType: hard
 
-"tslib@npm:2.0.1":
-  version: 2.0.1
-  resolution: "tslib@npm:2.0.1"
-  checksum: 7b42337a07f536c9650c72471cdf51317f07eb981692e91b8979fee3f6e20136a8f047e6ecdc5f2f3201132a6cc4e0096fa3c58655eba3803bf7fe739ccd088e
-  languageName: node
-  linkType: hard
-
 "tslib@npm:^1.10.0, tslib@npm:^1.8.1, tslib@npm:^1.9.0":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
@@ -18312,16 +17733,6 @@ resolve@1.17.0:
   languageName: node
   linkType: hard
 
-typescript@^4.1.3:
-  version: 4.2.3
-  resolution: "typescript@npm:4.2.3"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 06e8470f317db6f5e2fce809b20eb84a67a7d8179057abff36e5427bd1b891bd08e54581ff81f0fa36aef9b6d1eb0f54eaf6e2643c6dbd4e37a0adcc41eed256
-  languageName: node
-  linkType: hard
-
 "typescript@npm:^4.3.2":
   version: 4.3.2
   resolution: "typescript@npm:4.3.2"
@@ -18478,7 +17889,7 @@ typescript@^4.1.3:
   languageName: node
   linkType: hard
 
-"universalify@npm:^0.1.0, universalify@npm:^0.1.2":
+"universalify@npm:^0.1.2":
   version: 0.1.2
   resolution: "universalify@npm:0.1.2"
   checksum: 420fc6547357782c700d53e9a92506a8e95345b13e97684c8f9ab75237912ec2ebb6af8ac10d4f7406b7b6bd21c58f6c5c0811414fb0b4091b78b4743fa6806e