diff --git a/editor/components/app-runner/code-sandbox-runner.tsx b/editor/components/app-runner/csb-runner.tsx
similarity index 100%
rename from editor/components/app-runner/code-sandbox-runner.tsx
rename to editor/components/app-runner/csb-runner.tsx
diff --git a/editor/components/app-runner/index.ts b/editor/components/app-runner/index.ts
index 26417807..856d919b 100644
--- a/editor/components/app-runner/index.ts
+++ b/editor/components/app-runner/index.ts
@@ -1,4 +1,4 @@
 export * from "./app-runner";
-export * from "./code-sandbox-runner";
+export * from "./csb-runner";
 export * from "./flutter-app-runner";
 export * from "./react-app-runner";
diff --git a/editor/components/app-runner/react-app-runner.tsx b/editor/components/app-runner/react-app-runner.tsx
index c0d31020..e7d29d67 100644
--- a/editor/components/app-runner/react-app-runner.tsx
+++ b/editor/components/app-runner/react-app-runner.tsx
@@ -1,6 +1,6 @@
 import { k } from "@designto/react";
 import React from "react";
-import { CodeSandBoxView } from "./code-sandbox-runner";
+import { CodeSandBoxView } from "./csb-runner";
 
 export function ReactAppRunner(props: {
   source: string;
diff --git a/editor/components/app-runner/vanilla-app-runner.tsx b/editor/components/app-runner/vanilla-app-runner.tsx
index d9a52e2f..1ec30c96 100644
--- a/editor/components/app-runner/vanilla-app-runner.tsx
+++ b/editor/components/app-runner/vanilla-app-runner.tsx
@@ -5,15 +5,40 @@ export function VanillaRunner({
   height,
   source,
   enableInspector = true,
+  style,
 }: {
   width: string;
   height: string;
   source: string;
   componentName: string;
   enableInspector?: boolean;
+  style?: React.CSSProperties;
 }) {
   const ref = useRef<HTMLIFrameElement>();
 
+  useEffect(() => {
+    if (ref.current) {
+      function disablezoom() {
+        ref.current.contentWindow.addEventListener(
+          "wheel",
+          (event) => {
+            const { ctrlKey } = event;
+            if (ctrlKey) {
+              event.preventDefault();
+              return;
+            }
+          },
+          { passive: false }
+        );
+      }
+      ref.current.contentWindow.addEventListener(
+        "DOMContentLoaded",
+        disablezoom,
+        false
+      );
+    }
+  }, [ref.current]);
+
   useEffect(() => {
     if (ref.current && enableInspector) {
       ref.current.onload = () => {
@@ -56,6 +81,7 @@ export function VanillaRunner({
   return (
     <iframe
       ref={ref}
+      style={style}
       sandbox="allow-same-origin"
       srcDoc={inlinesource}
       width={width}
diff --git a/editor/components/canvas/controller-zoom-control.tsx b/editor/components/canvas/controller-zoom-control.tsx
new file mode 100644
index 00000000..07ea95bd
--- /dev/null
+++ b/editor/components/canvas/controller-zoom-control.tsx
@@ -0,0 +1,148 @@
+import React from "react";
+import styled from "@emotion/styled";
+import RefreshSharpIcon from "@material-ui/icons/RefreshSharp";
+
+export function ZoomControl({
+  scale,
+  stepper,
+  onChange,
+}: {
+  onChange: (scale: number) => void;
+  resetControl?: boolean;
+  select?: boolean;
+  stepper?: boolean;
+  scale: number;
+}) {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const displayScale = (scale * 100).toFixed(0);
+  const mincontrol = 0;
+  return (
+    <Wrapper>
+      <Controls>
+        <ControlsContainer>
+          <Valuedisplay
+            onMouseEnter={() => setIsEditing(true)}
+            onClick={() => setIsEditing(true)}
+          >
+            {isEditing ? (
+              <StyledInput
+                autoFocus
+                min={mincontrol * 100}
+                onChange={(e) => {
+                  const num = Number(e.target.value.replace(/[^0-9]/g, ""));
+                  const scae = num / 100;
+                  if (scae >= mincontrol) {
+                    onChange(scae);
+                  }
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    setIsEditing(false);
+                  }
+                }}
+                onMouseLeave={() => setIsEditing(false)}
+                onBlur={() => setIsEditing(false)}
+                value={displayScale}
+                defaultValue={displayScale}
+                type="number"
+              />
+            ) : (
+              <>
+                <ReadonlyValue>{displayScale}</ReadonlyValue>
+                <PercentText>%</PercentText>
+              </>
+            )}
+          </Valuedisplay>
+          {scale !== 1 && (
+            <RefreshSharpIcon
+              onClick={() => onChange(1)}
+              style={{ color: "white", fontSize: 18 }}
+            />
+          )}
+        </ControlsContainer>
+      </Controls>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  flex: none;
+  gap: 10px;
+  box-sizing: border-box;
+  padding: 10px 24px;
+`;
+
+const Controls = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  flex: none;
+  gap: 10px;
+  height: 24px;
+  box-sizing: border-box;
+  border-radius: 4px;
+  padding: 4px;
+  background-color: #252526;
+  box-shadow: #25252650 0px 0px 0px 16px inset;
+`;
+
+const ControlsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  flex: none;
+  gap: 4px;
+  height: 16px;
+  box-sizing: border-box;
+`;
+
+const Valuedisplay = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  flex: none;
+  gap: 1px;
+  height: 16px;
+  box-sizing: border-box;
+`;
+
+const ReadonlyValue = styled.span`
+  color: rgba(124, 124, 124, 1);
+  text-overflow: ellipsis;
+  font-size: 14px;
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  text-align: left;
+`;
+
+const PercentText = styled.span`
+  color: rgba(124, 124, 124, 1);
+  text-overflow: ellipsis;
+  font-size: 14px;
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  text-align: left;
+`;
+
+const StyledInput = styled.input`
+  border: none;
+  outline: none;
+  border-radius: 4px;
+  color: white;
+  background-color: transparent;
+  width: 32px;
+
+  /* hide number arrow */
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+`;
diff --git a/editor/components/canvas/default-canvas.tsx b/editor/components/canvas/default-canvas.tsx
deleted file mode 100644
index d92459d7..00000000
--- a/editor/components/canvas/default-canvas.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from "react";
-
-export function DefaultCanvas() {
-  return <>CANVAS GOES HERE</>;
-}
diff --git a/editor/components/canvas/index.ts b/editor/components/canvas/index.ts
index 30d0eb7d..2fd115d1 100644
--- a/editor/components/canvas/index.ts
+++ b/editor/components/canvas/index.ts
@@ -1,2 +1 @@
-export * from "./default-canvas";
-export * from "./figma-embed-canvas";
+export * from "./interactive-canvas";
diff --git a/editor/components/canvas/interactive-canvas.tsx b/editor/components/canvas/interactive-canvas.tsx
new file mode 100644
index 00000000..baa486fa
--- /dev/null
+++ b/editor/components/canvas/interactive-canvas.tsx
@@ -0,0 +1,140 @@
+import React, { useRef, useState } from "react";
+import styled from "@emotion/styled";
+import { usePinch } from "@use-gesture/react";
+import { Resizable } from "re-resizable";
+import { ZoomControl } from "./controller-zoom-control";
+
+export function InteractiveCanvas({
+  children,
+  defaultSize,
+}: {
+  defaultSize: { width: number; height: number };
+  children?: React.ReactNode;
+}) {
+  const [scale, setScale] = useState(1);
+
+  return (
+    <InteractiveCanvasWrapper id="interactive-canvas">
+      <ScalableFrame onRescale={setScale} scale={scale}>
+        <Controls>
+          <ZoomControl scale={scale} onChange={setScale} />
+        </Controls>
+        <ScalingAreaStaticRoot>
+          <ScalingArea scale={scale}>
+            <ResizableFrame defaultSize={defaultSize} scale={scale}>
+              {children}
+            </ResizableFrame>
+          </ScalingArea>
+        </ScalingAreaStaticRoot>
+      </ScalableFrame>
+    </InteractiveCanvasWrapper>
+  );
+}
+
+const InteractiveCanvasWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+`;
+
+const Controls = styled.div`
+  z-index: 2;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+`;
+
+const ScalingAreaStaticRoot = styled.div`
+  display: flex;
+  align-items: flex-start; // when transform origin is top center.
+  padding-top: 20px;
+  justify-content: center;
+  align-content: flex-start;
+  align-self: stretch;
+  flex: 1;
+  max-height: 100vh; // TODO: make dynamic
+`;
+
+function ScalableFrame({
+  children,
+  scale,
+  onRescale,
+}: {
+  scale: number;
+  onRescale?: (scale: number) => void;
+  children?: React.ReactNode;
+}) {
+  const ref = useRef();
+
+  usePinch(
+    (state) => {
+      const prevscale = scale;
+      const { offset } = state;
+      const thisscale = offset[0];
+      // const newscale = thisscale - prevscale;
+      onRescale(thisscale);
+    },
+    { target: ref }
+  );
+
+  return (
+    <div
+      id="scale-event-listener"
+      ref={ref}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        flex: 1,
+        alignItems: "center",
+        alignContent: "center",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+const ScalingArea = ({
+  scale,
+  children,
+}: {
+  scale: number;
+  children: React.ReactNode;
+}) => {
+  return (
+    <div
+      style={{
+        transform: `scale(${scale})`,
+        transformOrigin: "top center",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+function ResizableFrame({
+  scale,
+  children,
+  defaultSize,
+}: {
+  defaultSize?: { width: number; height: number };
+  scale: number;
+  children?: React.ReactNode;
+}) {
+  return (
+    <Resizable
+      defaultSize={
+        defaultSize ?? {
+          width: 500,
+          height: 500,
+        }
+      }
+      scale={scale}
+    >
+      {children}
+    </Resizable>
+  );
+}
diff --git a/editor/components/canvas/README.md b/editor/components/design-preview-as-is/README.md
similarity index 100%
rename from editor/components/canvas/README.md
rename to editor/components/design-preview-as-is/README.md
diff --git a/editor/components/canvas/figma-embed-canvas.tsx b/editor/components/design-preview-as-is/asis-preview-figma-embed.tsx
similarity index 83%
rename from editor/components/canvas/figma-embed-canvas.tsx
rename to editor/components/design-preview-as-is/asis-preview-figma-embed.tsx
index 8d7cf31a..4828d60a 100644
--- a/editor/components/canvas/figma-embed-canvas.tsx
+++ b/editor/components/design-preview-as-is/asis-preview-figma-embed.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { FigmaEmbedInput } from "@design-sdk/figma-url";
 import { FigmaEmbed } from "@reflect-blocks/figma-embed";
-export function FigmaEmbedCanvas(props: {
+export function AsisPreviewFigmaEmbed(props: {
   src: FigmaEmbedInput;
   width?: string;
   height?: string;
diff --git a/editor/components/design-preview-as-is/index.ts b/editor/components/design-preview-as-is/index.ts
new file mode 100644
index 00000000..3bdde4b6
--- /dev/null
+++ b/editor/components/design-preview-as-is/index.ts
@@ -0,0 +1 @@
+export * from "./asis-preview-figma-embed";
diff --git a/editor/components/design-preview/design-preview.tsx b/editor/components/design-preview/design-preview.tsx
index 303eaff0..d1272f83 100644
--- a/editor/components/design-preview/design-preview.tsx
+++ b/editor/components/design-preview/design-preview.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { FigmaEmbedCanvas } from "components/canvas";
+import { AsisPreviewFigmaEmbed } from "components/design-preview-as-is";
 
 interface DesignPreviewConfig {
   fileid: string;
@@ -19,7 +19,7 @@ export function DesignPreview(props: {
       switch (config.displayAs) {
         case "embed":
           return (
-            <FigmaEmbedCanvas
+            <AsisPreviewFigmaEmbed
               src={{
                 fileid: config.fileid,
                 nodeid: config.sceneid, // scene id is node id here.
diff --git a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx
index f8496a3c..a23bedc9 100644
--- a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx
+++ b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx
@@ -12,11 +12,11 @@ export function AppbarFragmentForCanvas() {
 }
 
 const RootWrapperAppbarFragmentForCanvas = styled.div`
+  z-index: 10;
   display: flex;
   justify-content: center;
   flex-direction: row;
   align-items: center;
-  flex: 1;
   gap: 10px;
   align-self: stretch;
   background-color: rgba(37, 37, 38, 1);
diff --git a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx
index 235378ef..9e8aa2ad 100644
--- a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx
+++ b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx
@@ -26,6 +26,7 @@ export function AppbarFragmentForCodeEditor() {
 }
 
 const RootWrapperAppbarFragmentForCodeEditor = styled.div`
+  z-index: 10;
   display: flex;
   justify-content: center;
   flex-direction: row;
diff --git a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-sidebar.tsx b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-sidebar.tsx
index 420bb6d4..1176401d 100644
--- a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-sidebar.tsx
+++ b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-sidebar.tsx
@@ -4,16 +4,23 @@ import styled from "@emotion/styled";
 export function AppbarFragmentForSidebar() {
   return (
     <RootWrapperAppbarFragmentForSidebar>
-      <IconsMdiMenu
+      <div
+        style={{
+          width: 24,
+          height: 24,
+        }}
+      ></div>
+      {/* <IconsMdiMenu
         // TODO: replace resource
         src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/333b/8550/4bdd6a7ceffe5b23b37bc68c1fb7a4ab"
         alt="image of IconsMdiMenu"
-      ></IconsMdiMenu>
+      ></IconsMdiMenu> */}
     </RootWrapperAppbarFragmentForSidebar>
   );
 }
 
 const RootWrapperAppbarFragmentForSidebar = styled.div`
+  z-index: 10;
   display: flex;
   justify-content: flex-start;
   flex-direction: row;
diff --git a/editor/components/index.ts b/editor/components/index.ts
index bb2d21e3..3dca018c 100644
--- a/editor/components/index.ts
+++ b/editor/components/index.ts
@@ -1,5 +1,5 @@
 export * as figmacomp from "./figma";
-export * as canvas from "./canvas";
+export * as canvas from "./design-preview-as-is";
 export * as code from "./code-editor";
 export * as runner from "./app-runner";
 export * as visualization from "./visualization";
diff --git a/editor/hooks/use-design.ts b/editor/hooks/use-design.ts
index 4cae517d..e0b727fb 100644
--- a/editor/hooks/use-design.ts
+++ b/editor/hooks/use-design.ts
@@ -24,7 +24,7 @@ configure_auth_credentials({
 /**
  * query param for design input
  */
-const P_DESIGN = "design";
+export const P_DESIGN = "design";
 
 type UseDesignProp =
   | (UseDesignFromRouter & UseDesingOptions)
@@ -114,12 +114,14 @@ export function useDesign({
         const _2_converted_to_reflect = convert.intoReflectNode(
           _1_converted_to_figma
         );
-        setDesign(<TargetNodeConfig>{
+
+        const res = <TargetNodeConfig>{
           ...targetnodeconfig,
           raw: last_response,
           figma: _1_converted_to_figma,
           reflect: _2_converted_to_reflect,
-        });
+        };
+        setDesign(res);
       } else {
         if (figmaAccessToken || personalAccessToken) {
           fetch
@@ -163,7 +165,7 @@ export function useDesign({
         }
       }
     }
-  }, [router, figmaAccessToken]);
+  }, [router, figmaAccessToken, props["url"]]);
   return design;
 }
 
diff --git a/editor/icons/home-logo.tsx b/editor/icons/home-logo.tsx
index f0398d62..5a89f527 100644
--- a/editor/icons/home-logo.tsx
+++ b/editor/icons/home-logo.tsx
@@ -5,10 +5,26 @@ export const HomeLogo = ({ size = 42 }: { size?: number }) => {
   return (
     <HomeLogo42 size={size}>
       {/* TODO: replace asset */}
-      <LogoShapeOnlyArtwork
-        src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/b255/41fd/5561b9a9e4b1fc7bffb16600f95b232a"
-        alt="image of LogoShapeOnlyArtwork"
-      ></LogoShapeOnlyArtwork>
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 42 42"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M27.6584 13.8687L27.5796 28.2889L41.5271 41.9212V27.7373V27.5009L41.525 27.4989C41.3978 19.9495 35.2382 13.8687 27.6584 13.8687Z"
+          fill="white"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M26.02 7.17866C19.0948 7.95373 13.7111 13.8284 13.7111 20.9606V27.5797L13.9475 42L0 28.3677V13.8687V13.7899L0.000217973 13.7901C0.042516 6.16679 6.23543 0 13.8687 0C19.1022 0 23.6587 2.89894 26.02 7.17866Z"
+          fill="white"
+        />
+      </svg>
     </HomeLogo42>
   );
 };
@@ -20,12 +36,3 @@ const HomeLogo42 = styled.div<{ size: number }>`
   -webkit-user-drag: none;
   user-select: none;
 `;
-
-const LogoShapeOnlyArtwork = styled.img`
-  object-fit: cover;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-`;
diff --git a/editor/layouts/panel/workspace-content-panel.tsx b/editor/layouts/panel/workspace-content-panel.tsx
index 9ff27c91..d1ff4958 100644
--- a/editor/layouts/panel/workspace-content-panel.tsx
+++ b/editor/layouts/panel/workspace-content-panel.tsx
@@ -16,13 +16,16 @@ export function WorkspaceContentPanel({
   disableBorder?: boolean;
 }) {
   return (
-    <Container backgroundColor={backgroundColor} disableBorder={disableBorder}>
+    <WorkspaceCPanel
+      backgroundColor={backgroundColor}
+      disableBorder={disableBorder}
+    >
       {children}
-    </Container>
+    </WorkspaceCPanel>
   );
 }
 
-const Container = styled.div<{
+const WorkspaceCPanel = styled.div<{
   backgroundColor: string;
   disableBorder: boolean;
 }>`
diff --git a/editor/next.config.js b/editor/next.config.js
index 60879498..f4149bf9 100644
--- a/editor/next.config.js
+++ b/editor/next.config.js
@@ -92,6 +92,11 @@ const withTM = require("next-transpile-modules")([
 
 module.exports = withTM({
   webpack: (config) => {
+    config.module.rules.push({
+      type: "javascript/auto",
+      test: /\.mjs$/,
+      include: /node_modules/,
+    });
     return config;
   },
   async redirects() {
diff --git a/editor/package.json b/editor/package.json
index 215f0803..1e10ed84 100644
--- a/editor/package.json
+++ b/editor/package.json
@@ -19,12 +19,14 @@
     "@emotion/css": "^11.5.0",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
+    "@frogress/line": "^1.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@modulz/design-system": "^0.6.1",
     "@monaco-editor/react": "^4.1.3",
     "@reflect-blocks/figma-embed": "^0.0.5",
+    "@use-gesture/react": "^10.2.2",
     "@visx/gradient": "^1.7.0",
     "@visx/group": "^1.7.0",
     "@visx/hierarchy": "^1.7.0",
@@ -34,6 +36,7 @@
     "cuid": "^2.1.8",
     "dart-style": "^1.3.2-dev",
     "firebase": "^9.6.0",
+    "framer-motion": "^5.3.1",
     "idb": "^6.1.2",
     "moment": "^2.29.1",
     "monaco-editor": "^0.24.0",
@@ -44,7 +47,9 @@
     "react-dom": "17.0.1",
     "react-json-tree": "^0.15.0",
     "react-resizable": "^3.0.1",
-    "recoil": "^0.2.0"
+    "react-spring": "^9.3.2",
+    "recoil": "^0.2.0",
+    "styled-components": "^5.3.3"
   },
   "devDependencies": {
     "@babel/core": "^7.14.0",
diff --git a/editor/pages/figma/inspect-component.tsx b/editor/pages/figma/inspect-component.tsx
index 7c63c0e6..fe5ea97e 100644
--- a/editor/pages/figma/inspect-component.tsx
+++ b/editor/pages/figma/inspect-component.tsx
@@ -58,7 +58,7 @@ export default function InspectComponent() {
       >
         <WorkspaceContentPanelGridLayout>
           <WorkspaceContentPanel>
-            <canvas.FigmaEmbedCanvas
+            <canvas.AsisPreviewFigmaEmbed
               src={{ url: design.url }}
               width="100%"
               height="100%"
diff --git a/editor/pages/figma/to-reflect.tsx b/editor/pages/figma/to-reflect.tsx
index 9f22502f..aede6225 100644
--- a/editor/pages/figma/to-reflect.tsx
+++ b/editor/pages/figma/to-reflect.tsx
@@ -14,7 +14,7 @@ export default function FigmaToReflectNodePage() {
 
   return (
     <>
-      <canvas.FigmaEmbedCanvas src={{ url: targetNodeConfig?.url }} />
+      <canvas.AsisPreviewFigmaEmbed src={{ url: targetNodeConfig?.url }} />
       <visualize_node.HorizontalHierarchyTreeVisualization
         key={reflect?.id}
         width={1000}
diff --git a/editor/pages/figma/to-token.tsx b/editor/pages/figma/to-token.tsx
index b0cb28c2..7fc746fd 100644
--- a/editor/pages/figma/to-token.tsx
+++ b/editor/pages/figma/to-token.tsx
@@ -56,7 +56,7 @@ export default function FigmaToReflectWidgetTokenPage() {
       >
         <WorkspaceContentPanelGridLayout>
           <WorkspaceContentPanel>
-            <canvas.FigmaEmbedCanvas
+            <canvas.AsisPreviewFigmaEmbed
               src={{ url: design.url }}
               width="100%"
               height="100%"
diff --git a/editor/pages/to-code/index.tsx b/editor/pages/to-code/index.tsx
index 595ef3ab..cfba864e 100644
--- a/editor/pages/to-code/index.tsx
+++ b/editor/pages/to-code/index.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useEffect,
-  useState,
-  useCallback,
-  useReducer,
-  useMemo,
-} from "react";
+import React, { useEffect, useCallback, useReducer } from "react";
 import { useRouter } from "next/router";
 import { SigninToContinueBannerPrmoptProvider } from "components/prompt-banner-signin-to-continue";
 import { Editor } from "scaffolds/editor";
@@ -17,7 +11,7 @@ import {
 import { WorkspaceAction } from "core/actions";
 import { createInitialWorkspaceState } from "core/states";
 import { workspaceReducer } from "core/reducers";
-import { useDesign, useDesignFile } from "hooks";
+import { P_DESIGN, useDesign, useDesignFile } from "hooks";
 import {
   get_enable_components_config_from_query,
   get_framework_config_from_query,
@@ -27,6 +21,8 @@ import { PendingState } from "core/utility-types";
 import { DesignInput } from "@designto/config/input";
 import { convert } from "@design-sdk/figma-node-conversion";
 import { mapper } from "@design-sdk/figma-remote";
+import { parseFileAndNodeId } from "@design-sdk/figma-url";
+import { TargetNodeConfig } from "query/target-node";
 
 const pending_workspace_state = createPendingWorkspaceState();
 //
@@ -69,81 +65,128 @@ export default function Page() {
   }, []);
   // endregion global state
 
-  const design = useDesign({ type: "use-router", router: router });
+  const _design_param: string = router.query[P_DESIGN] as string;
+  const _input = parseFileAndNodeId(_design_param);
+  const design = useDesign({ type: "use-url", url: _design_param });
 
   useEffect(() => {
-    if (initialState.type === "success") return;
-
-    if (design) {
-      // TODO: set preferences to workspace state.
-      const framework_config = get_framework_config_from_query(router.query);
-      const isDebug = router.query.debug;
-      const preview_runner_framework = get_preview_runner_framework(
-        router.query
-      );
-      const enable_components = get_enable_components_config_from_query(
-        router.query
-      );
-      initialDispatcher({
-        type: "set",
-        value: {
-          selectedNodes: [design.node],
-          selectedLayersOnPreview: [],
-          selectedPage: null, // TODO:
-          design: {
-            pages: [], // TODO:
-            key: design.file,
-            input: DesignInput.fromApiResponse({
-              ...design,
-              entry: design.reflect,
-            }),
-          },
-        },
-      });
-    }
-  }, [design, router]);
+    // TODO: set preferences to workspace state.
+    const framework_config = get_framework_config_from_query(router.query);
+    const isDebug = router.query.debug;
+    const preview_runner_framework = get_preview_runner_framework(router.query);
+    const enable_components = get_enable_components_config_from_query(
+      router.query
+    );
+  }, [router.query]);
 
   // background whole file fetching
-  const file = useDesignFile({ file: design?.file });
+  const file = useDesignFile({ file: _input?.file });
   const prevstate =
     initialState.type == "success" && initialState.value.history.present;
-  const selectedPage = useMemo(() => {
-    if (prevstate.selectedNodes && file?.document?.children) {
-      return prevstate.selectedNodes.length > 0
-        ? file.document.children.find((page) => {
-            return isChildrenOf(prevstate.selectedNodes[0], page);
+
+  const selectedPage = (pages: { id: string }[], selectedNodes: string[]) => {
+    if (prevstate.selectedPage) {
+      return prevstate.selectedPage;
+    }
+
+    if (selectedNodes && pages) {
+      return selectedNodes.length > 0
+        ? pages.find((page) => {
+            return isChildrenOf(selectedNodes[0], page);
           })?.id ?? null
         : // find page of current selection.
           null;
     }
-    return null;
-  }, [file?.document?.children]);
+
+    return file?.document?.children?.[0].id ?? null; // otherwise, return first page.
+  };
+
+  function initializeDesign(design: TargetNodeConfig): EditorSnapshot {
+    return {
+      selectedNodes: [design.node],
+      selectedLayersOnPreview: [],
+      selectedPage: null,
+      design: {
+        pages: [],
+        key: design.file,
+        input: DesignInput.fromApiResponse({
+          ...design,
+          entry: design.reflect,
+        }),
+      },
+    };
+  }
 
   useEffect(() => {
-    if (file && prevstate) {
-      const val: EditorSnapshot = {
-        ...prevstate,
-        design: {
-          ...prevstate.design,
-          pages: file.document.children.map((page) => ({
-            id: page.id,
-            name: page.name,
-            children: page["children"]?.map((child) => {
-              const _mapped = mapper.mapFigmaRemoteToFigma(child);
-              return convert.intoReflectNode(_mapped);
-            }),
-            type: "design",
-          })),
-        },
-        selectedPage: selectedPage,
-      };
+    if (design) {
+      if (initialState.type === "success") return;
+      initialDispatcher({
+        type: "set",
+        value: initializeDesign(design),
+      });
+    }
+  }, [design, router.query]);
+
+  useEffect(() => {
+    if (_input?.node) {
+      if (!design) {
+        // if target design is specified, whole file fetching should wait until design is loaded.
+        return;
+      }
+    }
+    if (file) {
+      let val: EditorSnapshot;
+
+      const pages = file.document.children.map((page) => ({
+        id: page.id,
+        name: page.name,
+        children: page["children"]?.map((child) => {
+          const _mapped = mapper.mapFigmaRemoteToFigma(child);
+          return convert.intoReflectNode(_mapped);
+        }),
+        type: "design",
+      }));
+
+      if (prevstate) {
+        val = {
+          ...prevstate,
+          design: {
+            ...prevstate.design,
+            pages: pages,
+          },
+          selectedPage: selectedPage(pages, prevstate.selectedNodes),
+        };
+      } else {
+        if (design) {
+          const initialState = initializeDesign(design);
+          val = {
+            ...initialState,
+            design: {
+              ...initialState.design,
+              pages: pages,
+            },
+            selectedPage: selectedPage(pages, initialState.selectedNodes),
+          };
+        } else {
+          val = {
+            selectedNodes: [],
+            selectedLayersOnPreview: [],
+            design: {
+              input: null,
+              key: _input.file,
+              pages: pages,
+            },
+            selectedPage: selectedPage(pages, null),
+          };
+        }
+      }
 
       initialDispatcher({
         type: "set",
         value: val,
       });
     }
-  }, [file?.document?.children]);
+  }, [_input?.url, design, file?.document?.children]);
   // endregion
 
   const safe_value =
@@ -166,6 +209,7 @@ type Tree = {
 };
 
 function isChildrenOf(child: string, parent: Tree) {
+  if (!parent) return false;
   if (child === parent.id) return true;
   if (parent.children?.length === 0) return false;
   return parent.children?.some((c) => isChildrenOf(child, c)) ?? false;
diff --git a/editor/scaffolds/canvas/canvas.tsx b/editor/scaffolds/canvas/canvas.tsx
index 0e3a33fa..c7f36698 100644
--- a/editor/scaffolds/canvas/canvas.tsx
+++ b/editor/scaffolds/canvas/canvas.tsx
@@ -3,6 +3,8 @@ import styled from "@emotion/styled";
 import { PreviewAndRunPanel } from "components/preview-and-run";
 import { EditorAppbarFragments, EditorSidebar } from "components/editor";
 import { Result } from "@designto/code";
+import { InteractiveCanvas } from "components/canvas";
+import { VanillaRunner } from "components/app-runner/vanilla-app-runner";
 
 export function Canvas({
   preview,
@@ -16,29 +18,34 @@ export function Canvas({
   preview: Result;
 }) {
   return (
-    <>
+    <CanvasContainer id="canvas">
       <EditorAppbarFragments.Canvas />
-      {preview ? (
-        <PreviewAndRunPanel
-          // key={_key_for_preview}
-          config={{
-            src: preview.scaffold.raw,
-            platform: "vanilla",
-            componentName: preview.name,
-            sceneSize: originsize && {
-              w: originsize.width,
-              h: originsize.height,
-            },
-            initialMode: "run",
-            fileid: fileid,
-            sceneid: sceneid,
-            hideModeChangeControls: true,
-          }}
-        />
-      ) : (
-        <EditorCanvasSkeleton />
-      )}
-    </>
+      {/* <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          flex: 1,
+        }}
+      > */}
+      <InteractiveCanvas key={fileid + sceneid} defaultSize={originsize}>
+        {preview ? (
+          <VanillaRunner
+            key={preview.scaffold.raw}
+            style={{
+              borderRadius: 4,
+              boxShadow: "0px 0px 48px #00000020",
+            }}
+            source={preview.scaffold.raw}
+            width="100%"
+            height="100%"
+            componentName={preview.name}
+          />
+        ) : (
+          <EditorCanvasSkeleton />
+        )}
+      </InteractiveCanvas>
+      {/* </div> */}
+    </CanvasContainer>
   );
 }
 
@@ -61,3 +68,10 @@ const EditorCanvasSkeleton = () => {
     />
   );
 };
+
+const CanvasContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: calc((100vw - 200px) / 2); // TODO: make this dynamic
+  height: 100%;
+`;
diff --git a/editor/scaffolds/editor/editor.tsx b/editor/scaffolds/editor/editor.tsx
index c25c582b..27162704 100644
--- a/editor/scaffolds/editor/editor.tsx
+++ b/editor/scaffolds/editor/editor.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import styled from "@emotion/styled";
 import { useRouter } from "next/router";
 import { DefaultEditorWorkspaceLayout } from "layouts/default-editor-workspace-layout";
-import { PreviewAndRunPanel } from "components/preview-and-run";
 import {
   WorkspaceContentPanel,
   WorkspaceContentPanelGridLayout,
@@ -31,6 +30,7 @@ import {
   find_node_by_id_under_inpage_nodes,
 } from "utils/design-query";
 import { vanilla_presets } from "@grida/builder-config-preset";
+import { EditorSkeleton } from "./skeleton";
 
 export function Editor() {
   const router = useRouter();
@@ -168,104 +168,114 @@ export function Editor() {
   );
 
   const { code, scaffold, name: componentName } = result ?? {};
+  const _initially_loaded = state.design?.pages?.length > 0;
+  const _initial_load_progress =
+    [!!state.design?.input, !!result, state.design?.pages?.length > 0].filter(
+      Boolean
+    ).length / 3;
 
   return (
-    <DefaultEditorWorkspaceLayout
-      backgroundColor={"rgba(37, 37, 38, 1)"}
-      leftbar={<EditorSidebar />}
-    >
-      <WorkspaceContentPanelGridLayout>
-        <WorkspaceContentPanel>
-          <Canvas
-            preview={preview}
-            fileid={state?.design?.key}
-            sceneid={root?.id}
-            originsize={{
-              width: root?.entry?.width,
-              height: root?.entry?.height,
-            }}
-          />
-        </WorkspaceContentPanel>
-        <WorkspaceContentPanel backgroundColor={"rgba(30, 30, 30, 1)"}>
-          <CodeEditorContainer>
-            {/* <EditorAppbarFragments.CodeEditor /> */}
-            <CodeOptionsControl
-              initialPreset={router.query.framework as string}
-              fallbackPreset="react_default"
-              onUseroptionChange={(o) => {
-                set_framework_config(get_framework_config(o.framework));
+    <>
+      {!_initially_loaded && (
+        <EditorSkeleton percent={_initial_load_progress + 0.2} />
+      )}
+      <DefaultEditorWorkspaceLayout
+        backgroundColor={"rgba(37, 37, 38, 1)"}
+        leftbar={<EditorSidebar />}
+      >
+        <WorkspaceContentPanelGridLayout>
+          <WorkspaceContentPanel>
+            <Canvas
+              preview={preview}
+              fileid={state?.design?.key}
+              sceneid={root?.id}
+              originsize={{
+                width: root?.entry?.width,
+                height: root?.entry?.height,
               }}
             />
-            <CodeEditor
-              key={code?.raw}
-              height="100vh"
-              options={{
-                automaticLayout: true,
-              }}
-              files={
-                code
-                  ? {
-                      "index.tsx": {
-                        raw: code.raw,
-                        language: framework_config.language,
-                        name: "index.tsx",
-                      },
-                    }
-                  : {
-                      loading: {
-                        raw: "Reading design...",
-                        language: "text",
-                        name: "loading",
-                      },
-                    }
-              }
-            />
-          </CodeEditorContainer>
-        </WorkspaceContentPanel>
-        {wstate.preferences.debug_mode && (
-          <WorkspaceBottomPanelDockLayout resizable>
-            <WorkspaceContentPanel>
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "stretch",
+          </WorkspaceContentPanel>
+          <WorkspaceContentPanel backgroundColor={"rgba(30, 30, 30, 1)"}>
+            <CodeEditorContainer>
+              {/* <EditorAppbarFragments.CodeEditor /> */}
+              <CodeOptionsControl
+                initialPreset={router.query.framework as string}
+                fallbackPreset="react_default"
+                onUseroptionChange={(o) => {
+                  set_framework_config(get_framework_config(o.framework));
                 }}
-              >
-                <div style={{ flex: 1 }}>
-                  <ClearRemoteDesignSessionCache
-                    key={root.id}
-                    file={state.design.key}
-                    node={root.id}
-                  />
-                  <br />
-                  {(root.entry.origin === "INSTANCE" ||
-                    root.entry.origin === "COMPONENT") && (
-                    <button
-                      onClick={() => {
-                        router.push({
-                          pathname: "/figma/inspect-component",
-                          query: router.query,
-                        });
-                      }}
-                    >
-                      inspect component
-                    </button>
-                  )}
-                </div>
+              />
+              <CodeEditor
+                key={code?.raw}
+                height="100vh"
+                options={{
+                  automaticLayout: true,
+                }}
+                files={
+                  code
+                    ? {
+                        "index.tsx": {
+                          raw: code.raw,
+                          language: framework_config.language,
+                          name: "index.tsx",
+                        },
+                      }
+                    : {
+                        loading: {
+                          raw: "Reading design...",
+                          language: "text",
+                          name: "loading",
+                        },
+                      }
+                }
+              />
+            </CodeEditorContainer>
+          </WorkspaceContentPanel>
+          {wstate.preferences.debug_mode && (
+            <WorkspaceBottomPanelDockLayout resizable>
+              <WorkspaceContentPanel>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "stretch",
+                  }}
+                >
+                  <div style={{ flex: 1 }}>
+                    <ClearRemoteDesignSessionCache
+                      key={root.id}
+                      file={state.design.key}
+                      node={root.id}
+                    />
+                    <br />
+                    {(root.entry.origin === "INSTANCE" ||
+                      root.entry.origin === "COMPONENT") && (
+                      <button
+                        onClick={() => {
+                          router.push({
+                            pathname: "/figma/inspect-component",
+                            query: router.query,
+                          });
+                        }}
+                      >
+                        inspect component
+                      </button>
+                    )}
+                  </div>
 
-                <div style={{ flex: 2 }}>
-                  <WidgetTree data={root.entry} />
-                </div>
-                <div style={{ flex: 2 }}>
-                  <WidgetTree data={result.widget} />
+                  <div style={{ flex: 2 }}>
+                    <WidgetTree data={root.entry} />
+                  </div>
+                  <div style={{ flex: 2 }}>
+                    <WidgetTree data={result.widget} />
+                  </div>
                 </div>
-              </div>
-            </WorkspaceContentPanel>
-          </WorkspaceBottomPanelDockLayout>
-        )}
-      </WorkspaceContentPanelGridLayout>
-    </DefaultEditorWorkspaceLayout>
+              </WorkspaceContentPanel>
+            </WorkspaceBottomPanelDockLayout>
+          )}
+        </WorkspaceContentPanelGridLayout>
+      </DefaultEditorWorkspaceLayout>
+    </>
   );
 }
 
diff --git a/editor/scaffolds/editor/skeleton.tsx b/editor/scaffolds/editor/skeleton.tsx
new file mode 100644
index 00000000..e984bdd2
--- /dev/null
+++ b/editor/scaffolds/editor/skeleton.tsx
@@ -0,0 +1,209 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { HomeLogo } from "icons/home-logo";
+import { AnimatedLineProgressBar } from "@frogress/line";
+
+export function EditorSkeleton({ percent = 0 }: { percent?: number }) {
+  return (
+    <SkeletonWrap>
+      <LoadingIndicatorContainer>
+        <HomeLogo />
+        <AnimatedLineProgressBar
+          containerColor="#838383"
+          progressColor="#fff"
+          defaultValue={0}
+          percent={percent * 100}
+        />
+      </LoadingIndicatorContainer>
+      <Body>
+        <SidebarMock>
+          <ListMock>
+            {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
+              <MockItem1 key={i.toString()}>
+                <BaseHierarchyItem>
+                  <Frame55>
+                    <Frame52></Frame52>
+                    <Frame324></Frame324>
+                  </Frame55>
+                </BaseHierarchyItem>
+              </MockItem1>
+            ))}
+          </ListMock>
+        </SidebarMock>
+        <CanvasMock></CanvasMock>
+        <CodeEditorMock></CodeEditorMock>
+      </Body>
+    </SkeletonWrap>
+  );
+}
+
+const SkeletonWrap = styled.div`
+  width: 100vw;
+  height: 100vh;
+  z-index: 99;
+  position: absolute;
+  background-color: rgba(37, 37, 38, 1);
+`;
+
+const LoadingIndicatorContainer = styled.div`
+  z-index: 100;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+  box-sizing: border-box;
+  position: absolute;
+  margin: auto;
+  /* pos */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -44px;
+  margin-left: -110px;
+  width: 220px;
+  height: 88px;
+`;
+
+const HomeLogo42 = styled.div`
+  width: 42px;
+  height: 42px;
+  position: relative;
+`;
+
+const LogoShapeOnlyArtwork = styled.img`
+  object-fit: cover;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+`;
+
+const Loading = styled.div`
+  width: 221px;
+  height: 6px;
+  overflow: hidden;
+  background-color: rgba(131, 131, 131, 1);
+  position: relative;
+`;
+
+const Rectangle892 = styled.div`
+  width: 120px;
+  height: 6px;
+  background-color: rgba(255, 255, 255, 1);
+  position: absolute;
+  left: 0px;
+  top: 0px;
+`;
+
+const Body = styled.div`
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: start;
+  box-sizing: border-box;
+  position: absolute;
+`;
+
+const SidebarMock = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: start;
+  flex: none;
+  gap: 10px;
+  width: 200px;
+  box-sizing: border-box;
+  padding: 100px 10px 10px;
+`;
+
+const ListMock = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  align-items: start;
+  flex: none;
+  gap: 0;
+  width: 180px;
+  height: 330px;
+  box-sizing: border-box;
+`;
+
+const MockItem1 = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  align-items: start;
+  flex: 1;
+  gap: 10px;
+  align-self: stretch;
+  background-color: rgba(37, 37, 38, 1);
+  box-sizing: border-box;
+  opacity: 0.2;
+`;
+
+const BaseHierarchyItem = styled.div`
+  height: 30px;
+  border-radius: 6px;
+  position: relative;
+  align-self: stretch;
+`;
+
+const Frame55 = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  box-sizing: border-box;
+  position: absolute;
+  left: 8px;
+  top: calc((calc((50% + 0px)) - 7px));
+  width: 150px;
+  height: 14px;
+`;
+
+const Frame52 = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: start;
+  flex: none;
+  gap: 5px;
+  width: 29px;
+  height: 12px;
+  box-sizing: border-box;
+`;
+
+const LayerTokensExpandStateIndicator = styled.img`
+  width: 12px;
+  height: 12px;
+  object-fit: cover;
+`;
+
+const NodeIconsPlaceholder = styled.img`
+  width: 12px;
+  height: 12px;
+  object-fit: cover;
+`;
+
+const Frame324 = styled.div`
+  width: 117px;
+  height: 14px;
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+`;
+
+const CanvasMock = styled.div`
+  flex: 1;
+  align-self: stretch;
+`;
+
+const CodeEditorMock = styled.div`
+  flex: 1;
+  align-self: stretch;
+  background-color: rgba(30, 30, 30, 1);
+`;
diff --git a/yarn.lock b/yarn.lock
index 0d6b156d..3695f582 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -224,7 +224,7 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
-"@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3"
   integrity sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==
@@ -999,7 +999,7 @@
     "@babel/parser" "^7.16.0"
     "@babel/types" "^7.16.0"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.0", "@babel/traverse@^7.16.3", "@babel/traverse@^7.7.2":
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.0", "@babel/traverse@^7.16.3", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2":
   version "7.16.3"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.3.tgz#f63e8a938cc1b780f66d9ed3c54f532ca2d14787"
   integrity sha512-eolumr1vVMjqevCpwVO99yN/LoGL0EyHiLO5I043aYQvwOJ9eR5UsZSClHVCzfhBduMAsSzgA/6AyqPjNayJag==
@@ -1586,6 +1586,13 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
+"@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
 "@emotion/is-prop-valid@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz#29ef6be1e946fb4739f9707def860f316f668cde"
@@ -1593,6 +1600,11 @@
   dependencies:
     "@emotion/memoize" "^0.7.4"
 
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
@@ -1638,7 +1650,12 @@
     "@emotion/serialize" "^1.0.2"
     "@emotion/utils" "^1.0.0"
 
-"@emotion/unitless@^0.7.5":
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4", "@emotion/unitless@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@@ -2032,6 +2049,13 @@
     "@flutter-builder/flutter-material-icons" "0.0.5"
     dart-style "^1.3.2-dev"
 
+"@frogress/line@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@frogress/line/-/line-1.1.0.tgz#8add65b3a4d038ff74cc571bf6a30bbb0f1958bb"
+  integrity sha512-I/soWcaQDvGH2nlIu5EjxaswSdtFtC+IwsO5tVUWHWZwJJrnTiGcahCN76KEfOupAfA2QbW27yeHjVNcbsTlQw==
+  dependencies:
+    dedent "^0.7.0"
+
 "@grpc/grpc-js@^1.3.2":
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.4.4.tgz#59336f13d77bc446bbdf2161564a32639288dc5b"
@@ -3643,6 +3667,91 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@react-spring/animated@~9.3.0":
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.3.1.tgz#ffc4706121e8406efeaeacb407b42b5022943b46"
+  integrity sha512-23YaERZ++BwZ8F8PxPFqrpOwp/JZun1Pj6aHZtPAU42j5LycBRasT9XMw7Eyr7zNFhT+rl3R3wFfd4WX6Ax+UA==
+  dependencies:
+    "@react-spring/shared" "~9.3.0"
+    "@react-spring/types" "~9.3.0"
+
+"@react-spring/core@~9.3.0":
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.3.1.tgz#b98e1dca1eb4871dec75fdab350327e8a5222865"
+  integrity sha512-8rmfmEHLHGtF1CUiXRn64YJqsXNxv2cGX8oNnBnsuoE33c48Zc34t2VIMB4R9q5zwIUCvDBGfiEenA8ZAPxqOQ==
+  dependencies:
+    "@react-spring/animated" "~9.3.0"
+    "@react-spring/shared" "~9.3.0"
+    "@react-spring/types" "~9.3.0"
+
+"@react-spring/konva@~9.3.0":
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.3.1.tgz#7a915c1c912a81dc27d1a1bc31eb47c0a2a0c643"
+  integrity sha512-woG2DeDcUlz5hB8g9pA/tyUWU6dMrAzyUsNiBWVCyI9UqKA7CUKjz+ODOUi+hS++3Kz7kZSr3u0zzHHfxvoTPQ==
+  dependencies:
+    "@react-spring/animated" "~9.3.0"
+    "@react-spring/core" "~9.3.0"
+    "@react-spring/shared" "~9.3.0"
+    "@react-spring/types" "~9.3.0"
+
+"@react-spring/native@~9.3.0":
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.3.1.tgz#e1ac9d04d833b8d97e2d63630c4204f71915a29a"
+  integrity sha512-NAC1wHIUvy1umCVQRxcS+31Dmr9NszBY06sHy3jR8/HVuKNtaDUARVF3AYL/HfbIy4m6yR3tcIkM2NQ0SO+rZA==
+  dependencies:
+    "@react-spring/animated" "~9.3.0"
+    "@react-spring/core" "~9.3.0"
+    "@react-spring/shared" "~9.3.0"
+    "@react-spring/types" "~9.3.0"
+
+"@react-spring/rafz@~9.3.0":
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.3.1.tgz#8dd6a598ffea487252b75d05d199e4aca5ea9d5e"
+  integrity sha512-fEBMCarGVl+/2kdO+g6Zig4F+3ymwmcGN8S71gb1c7Cbbxb87kviPz8EhshfIHoiLeJPGlqwcuGbxNmZbBamvA==
+
+"@react-spring/shared@~9.3.0":
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.3.1.tgz#e7f22a4b8f5fea4491fa6a24c108db5abd19ddba"
+  integrity sha512-jhPpxzURGo6Nty90ex1lkxmZae7w/VAbnGmb/nXcYoZwSoNR+W2aAd00iXsh2ZGz6MgoJOsc495JeG3uC7Am8A==
+  dependencies:
+    "@react-spring/rafz" "~9.3.0"
+    "@react-spring/types" "~9.3.0"
+
+"@react-spring/three@~9.3.0":
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.3.1.tgz#91a50851639c5a88fed8f76b4e25ff388d2b24e7"
+  integrity sha512-40iRIX2DrY+a81hIliOog6TMg/ZAtHGeZr95r0vKAsl+iX1g9Hs8XCS4wTeQIUgydZpbpShk/JL6mkcstEfBdw==
+  dependencies:
+    "@react-spring/animated" "~9.3.0"
+    "@react-spring/core" "~9.3.0"
+    "@react-spring/shared" "~9.3.0"
+    "@react-spring/types" "~9.3.0"
+
+"@react-spring/types@~9.3.0":
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.3.1.tgz#20f392ecad15a1ea6c0865ffe86ca5016c05a278"
+  integrity sha512-W/YMJMX35XgGGzX0gKORBTwnvQ+1loDOFN3XlZkW5fgpEY+7VkRUpPyqPWXQr3n6lHrsLmHIGdpznqZi54ACTQ==
+
+"@react-spring/web@~9.3.0":
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.3.1.tgz#5b377ba7ad52e746c2b59e2738c021de3f219d0b"
+  integrity sha512-sisZIgFGva/Z+xKWPSfXpukF0AP3kR9ALTxlHL87fVotMUCJX5vtH/YlVcywToEFwTHKt3MpI5Wy2M+vgVEeaw==
+  dependencies:
+    "@react-spring/animated" "~9.3.0"
+    "@react-spring/core" "~9.3.0"
+    "@react-spring/shared" "~9.3.0"
+    "@react-spring/types" "~9.3.0"
+
+"@react-spring/zdog@~9.3.0":
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.3.1.tgz#70fccd80c35248217de6252c4c2ffca16b4cff2f"
+  integrity sha512-QflA/fII9zWe9CSOA8QGSLMjUwyrtD1TX6YVzUSn/nlr2f7PlZPijdpdu9Cvdirgss472cUS7cRIUfll0TepqA==
+  dependencies:
+    "@react-spring/animated" "~9.3.0"
+    "@react-spring/core" "~9.3.0"
+    "@react-spring/shared" "~9.3.0"
+    "@react-spring/types" "~9.3.0"
+
 "@reflect-blocks/figma-embed@^0.0.5":
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/@reflect-blocks/figma-embed/-/figma-embed-0.0.5.tgz#68b0b8de5d3774ac694e6f0aada3def61f587367"
@@ -4005,6 +4114,18 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@use-gesture/core@10.2.2":
+  version "10.2.2"
+  resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.2.tgz#80e5e5ec6551bcca66f5d9a3302744b0979caf0f"
+  integrity sha512-jIaKSHsruYcFEhUHVoFYLuucIVTx1QjUc8CEHD+SPZtwpY8kBPG0lHeNd6ZpX01llBaEygm3cPWFm+SstjTRoQ==
+
+"@use-gesture/react@^10.2.2":
+  version "10.2.2"
+  resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.2.tgz#3cb5023a5182872863fcb6a7be2a936e5f58e184"
+  integrity sha512-ZRi/xAm/LWfWuAY3IKwCjdXylXAVIubcj3j100KcTdGPqfxxyYUhoT7bNOMMWu8H3oWiXbdwvZ90Wd5f/KfHMA==
+  dependencies:
+    "@use-gesture/core" "10.2.2"
+
 "@visx/curve@1.7.0":
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/@visx/curve/-/curve-1.7.0.tgz#b8c8ae902de469ae43014c78ed9bfda8aed8137c"
@@ -4661,7 +4782,17 @@ babel-plugin-polyfill-regenerator@^0.2.3:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.2.4"
 
-babel-plugin-syntax-jsx@6.18.0:
+"babel-plugin-styled-components@>= 1.12.0":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.2.tgz#0fac11402dc9db73698b55847ab1dc73f5197c54"
+  integrity sha512-7eG5NE8rChnNTDxa6LQfynwgHTVOYYaHJbUYSlOhk8QBXIQiMBKq4gyfHBBKPrxUcVBXVJL61ihduCpCQbuNbw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+
+babel-plugin-syntax-jsx@6.18.0, babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
   integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
@@ -5131,6 +5262,11 @@ camelcase@^6.0.0, camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001113, caniuse-lite@^1.0.30001154, caniuse-lite@^1.0.30001274:
   version "1.0.30001279"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001279.tgz#eb06818da481ef5096a3b3760f43e5382ed6b0ce"
@@ -5710,6 +5846,11 @@ crypto-random-string@^1.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
   integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
 css-loader@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-1.0.0.tgz#9f46aaa5ca41dbe31860e3b62b8e23c42916bf56"
@@ -5770,6 +5911,15 @@ css-selector-tokenizer@^0.7.0:
     cssesc "^3.0.0"
     fastparse "^1.1.2"
 
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-vendor@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
@@ -6005,6 +6155,11 @@ datauri@^3.0.0:
     image-size "0.8.3"
     mimer "1.1.0"
 
+debounce@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
 debug@3.1.0, debug@=3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
@@ -6956,6 +7111,28 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+framer-motion@^5.3.1:
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-5.4.5.tgz#180047afe6d4e41b8b69eb76cfad13d7a0351073"
+  integrity sha512-OjKfSMO22a9bTedhQ4diwZWCcmwoZmfrkalv4adhHTH2/cXa2eoFAmmPzs6aNpENbMrn47YmlWGwZtYNycXFLg==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    popmotion "11.0.3"
+    react-merge-refs "^1.1.0"
+    react-use-measure "^2.1.1"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
+  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+  dependencies:
+    tslib "^2.1.0"
+
 from2@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
@@ -7333,6 +7510,11 @@ he@1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -7342,7 +7524,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -10011,6 +10193,16 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+popmotion@11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
+  integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+
 popper.js@1.16.1-lts:
   version "1.16.1-lts"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
@@ -10151,6 +10343,11 @@ postcss-value-parser@^3.3.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
+postcss-value-parser@^4.0.2:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
 postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
@@ -10549,6 +10746,11 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-merge-refs@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
+  integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==
+
 react-modal-promise@^0.7.6:
   version "0.7.6"
   resolved "https://registry.yarnpkg.com/react-modal-promise/-/react-modal-promise-0.7.6.tgz#feef31ca98c3b10ea0397a4a2e9ab1020b123f99"
@@ -10586,6 +10788,18 @@ react-resizable@^3.0.1, react-resizable@^3.0.4:
     prop-types "15.x"
     react-draggable "^4.0.3"
 
+react-spring@^9.3.2:
+  version "9.3.2"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.3.2.tgz#1456ef1ab1a3997c6c39693a9fd18cfd46c92930"
+  integrity sha512-LMFgjvTJVg2ltthzgJcZ7siOdRig7L8wJZIHrc7p6ss4AaJ446xHzm9L2ZQha1ZC9QVY8/e6XfLhMTFAG6dtjw==
+  dependencies:
+    "@react-spring/core" "~9.3.0"
+    "@react-spring/konva" "~9.3.0"
+    "@react-spring/native" "~9.3.0"
+    "@react-spring/three" "~9.3.0"
+    "@react-spring/web" "~9.3.0"
+    "@react-spring/zdog" "~9.3.0"
+
 react-style-singleton@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"
@@ -10610,6 +10824,13 @@ react-use-gesture@^9.1.3:
   resolved "https://registry.yarnpkg.com/react-use-gesture/-/react-use-gesture-9.1.3.tgz#92bd143e4f58e69bd424514a5bfccba2a1d62ec0"
   integrity sha512-CdqA2SmS/fj3kkS2W8ZU8wjTbVBAIwDWaRprX7OKaj7HlGwBasGEFggmk5qNklknqk9zK/h8D355bEJFTpqEMg==
 
+react-use-measure@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.1.1.tgz#5824537f4ee01c9469c45d5f7a8446177c6cc4ba"
+  integrity sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==
+  dependencies:
+    debounce "^1.2.1"
+
 react-use-size@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/react-use-size/-/react-use-size-2.0.4.tgz#14f513e310d8962a30919e64fdd746b8211a3f0d"
@@ -11127,6 +11348,11 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 sharp@0.26.2:
   version "0.26.2"
   resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.26.2.tgz#3d5777d246ae32890afe82a783c1cbb98456a88c"
@@ -11622,6 +11848,30 @@ style-loader@1.2.1:
     loader-utils "^2.0.0"
     schema-utils "^2.6.6"
 
+style-value-types@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
+  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^2.1.0"
+
+styled-components@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.3.tgz#312a3d9a549f4708f0fb0edc829eb34bde032743"
+  integrity sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^0.8.8"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 styled-jsx@3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.2.tgz#2474601a26670a6049fb4d3f94bd91695b3ce018"
@@ -11656,7 +11906,7 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^5.3.0, supports-color@^5.4.0:
+supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
