diff --git a/hasura/metadata/tables.yaml b/hasura/metadata/tables.yaml
index 7837e8358..1f01db5c2 100644
--- a/hasura/metadata/tables.yaml
+++ b/hasura/metadata/tables.yaml
@@ -90,6 +90,64 @@
       columns:
       - name
       filter: {}
+- table:
+    schema: public
+    name: Map
+  insert_permissions:
+  - role: player
+    permission:
+      check: {}
+      columns:
+      - author_address
+      - data
+      - name
+      - id
+      backend_only: false
+  - role: public
+    permission:
+      check: {}
+      columns:
+      - author_address
+      - data
+      - name
+      - id
+      backend_only: false
+  select_permissions:
+  - role: player
+    permission:
+      columns:
+      - author_address
+      - data
+      - name
+      - id
+      filter: {}
+  - role: public
+    permission:
+      columns:
+      - author_address
+      - data
+      - name
+      - id
+      filter: {}
+  update_permissions:
+  - role: player
+    permission:
+      columns:
+      - author_address
+      - data
+      - name
+      - id
+      filter: {}
+      check: null
+  - role: public
+    permission:
+      columns:
+      - author_address
+      - data
+      - name
+      - id
+      filter: {}
+      check: null
 - table:
     schema: public
     name: Player
diff --git a/hasura/migrations/1606958646709_create_table_public_Map/down.sql b/hasura/migrations/1606958646709_create_table_public_Map/down.sql
new file mode 100644
index 000000000..3b1e60205
--- /dev/null
+++ b/hasura/migrations/1606958646709_create_table_public_Map/down.sql
@@ -0,0 +1 @@
+DROP TABLE "public"."Map";
diff --git a/hasura/migrations/1606958646709_create_table_public_Map/up.sql b/hasura/migrations/1606958646709_create_table_public_Map/up.sql
new file mode 100644
index 000000000..8f6844bc8
--- /dev/null
+++ b/hasura/migrations/1606958646709_create_table_public_Map/up.sql
@@ -0,0 +1,2 @@
+CREATE EXTENSION IF NOT EXISTS pgcrypto;
+CREATE TABLE "public"."Map"("id" uuid NOT NULL DEFAULT gen_random_uuid(), "author_address" text NOT NULL, "name" Text NOT NULL, "data" Text NOT NULL, PRIMARY KEY ("id") , UNIQUE ("id"));
diff --git a/packages/codegen/schema.graphql b/packages/codegen/schema.graphql
index fc1180832..7110d19a2 100644
--- a/packages/codegen/schema.graphql
+++ b/packages/codegen/schema.graphql
@@ -1037,6 +1037,206 @@ input json_comparison_exp {
   _nin: [json!]
 }
 
+"""
+columns and relationships of "Map"
+"""
+type Map {
+  author_address: String!
+  data: String!
+  id: uuid!
+  name: String!
+}
+
+"""
+aggregated selection of "Map"
+"""
+type Map_aggregate {
+  aggregate: Map_aggregate_fields
+  nodes: [Map!]!
+}
+
+"""
+aggregate fields of "Map"
+"""
+type Map_aggregate_fields {
+  count(columns: [Map_select_column!], distinct: Boolean): Int
+  max: Map_max_fields
+  min: Map_min_fields
+}
+
+"""
+order by aggregate values of table "Map"
+"""
+input Map_aggregate_order_by {
+  count: order_by
+  max: Map_max_order_by
+  min: Map_min_order_by
+}
+
+"""
+input type for inserting array relation for remote table "Map"
+"""
+input Map_arr_rel_insert_input {
+  data: [Map_insert_input!]!
+  on_conflict: Map_on_conflict
+}
+
+"""
+Boolean expression to filter rows from the table "Map". All fields are combined with a logical 'AND'.
+"""
+input Map_bool_exp {
+  _and: [Map_bool_exp]
+  _not: Map_bool_exp
+  _or: [Map_bool_exp]
+  author_address: String_comparison_exp
+  data: String_comparison_exp
+  id: uuid_comparison_exp
+  name: String_comparison_exp
+}
+
+"""
+unique or primary key constraints on table "Map"
+"""
+enum Map_constraint {
+  """unique or primary key constraint"""
+  Map_pkey
+}
+
+"""
+input type for inserting data into table "Map"
+"""
+input Map_insert_input {
+  author_address: String
+  data: String
+  id: uuid
+  name: String
+}
+
+"""aggregate max on columns"""
+type Map_max_fields {
+  author_address: String
+  data: String
+  id: uuid
+  name: String
+}
+
+"""
+order by max() on columns of table "Map"
+"""
+input Map_max_order_by {
+  author_address: order_by
+  data: order_by
+  id: order_by
+  name: order_by
+}
+
+"""aggregate min on columns"""
+type Map_min_fields {
+  author_address: String
+  data: String
+  id: uuid
+  name: String
+}
+
+"""
+order by min() on columns of table "Map"
+"""
+input Map_min_order_by {
+  author_address: order_by
+  data: order_by
+  id: order_by
+  name: order_by
+}
+
+"""
+response of any mutation on the table "Map"
+"""
+type Map_mutation_response {
+  """number of affected rows by the mutation"""
+  affected_rows: Int!
+
+  """data of the affected rows by the mutation"""
+  returning: [Map!]!
+}
+
+"""
+input type for inserting object relation for remote table "Map"
+"""
+input Map_obj_rel_insert_input {
+  data: Map_insert_input!
+  on_conflict: Map_on_conflict
+}
+
+"""
+on conflict condition type for table "Map"
+"""
+input Map_on_conflict {
+  constraint: Map_constraint!
+  update_columns: [Map_update_column!]!
+  where: Map_bool_exp
+}
+
+"""
+ordering options when selecting data from "Map"
+"""
+input Map_order_by {
+  author_address: order_by
+  data: order_by
+  id: order_by
+  name: order_by
+}
+
+"""
+primary key columns input for table: "Map"
+"""
+input Map_pk_columns_input {
+  id: uuid!
+}
+
+"""
+select columns of table "Map"
+"""
+enum Map_select_column {
+  """column name"""
+  author_address
+
+  """column name"""
+  data
+
+  """column name"""
+  id
+
+  """column name"""
+  name
+}
+
+"""
+input type for updating data in table "Map"
+"""
+input Map_set_input {
+  author_address: String
+  data: String
+  id: uuid
+  name: String
+}
+
+"""
+update columns of table "Map"
+"""
+enum Map_update_column {
+  """column name"""
+  author_address
+
+  """column name"""
+  data
+
+  """column name"""
+  id
+
+  """column name"""
+  name
+}
+
 """
 columns and relationships of "me"
 """
@@ -1272,6 +1472,19 @@ type mutation_root {
   """
   delete_Guild_by_pk(id: uuid!): Guild
 
+  """
+  delete data from the table: "Map"
+  """
+  delete_Map(
+    """filter the rows which have to be deleted"""
+    where: Map_bool_exp!
+  ): Map_mutation_response
+
+  """
+  delete single row from the table: "Map"
+  """
+  delete_Map_by_pk(id: uuid!): Map
+
   """
   delete data from the table: "Player"
   """
@@ -1468,6 +1681,28 @@ type mutation_root {
     on_conflict: Guild_on_conflict
   ): Guild
 
+  """
+  insert data into the table: "Map"
+  """
+  insert_Map(
+    """the rows to be inserted"""
+    objects: [Map_insert_input!]!
+
+    """on conflict condition"""
+    on_conflict: Map_on_conflict
+  ): Map_mutation_response
+
+  """
+  insert a single row into the table: "Map"
+  """
+  insert_Map_one(
+    """the row to be inserted"""
+    object: Map_insert_input!
+
+    """on conflict condition"""
+    on_conflict: Map_on_conflict
+  ): Map
+
   """
   insert data into the table: "Player"
   """
@@ -1712,6 +1947,26 @@ type mutation_root {
     pk_columns: Guild_pk_columns_input!
   ): Guild
 
+  """
+  update data of the table: "Map"
+  """
+  update_Map(
+    """sets the columns of the filtered rows to the given values"""
+    _set: Map_set_input
+
+    """filter the rows which have to be updated"""
+    where: Map_bool_exp!
+  ): Map_mutation_response
+
+  """
+  update single row of the table: "Map"
+  """
+  update_Map_by_pk(
+    """sets the columns of the filtered rows to the given values"""
+    _set: Map_set_input
+    pk_columns: Map_pk_columns_input!
+  ): Map
+
   """
   update data of the table: "Player"
   """
@@ -3386,6 +3641,49 @@ type query_root {
   """fetch data from the table: "Guild" using primary key columns"""
   Guild_by_pk(id: uuid!): Guild
 
+  """
+  fetch data from the table: "Map"
+  """
+  Map(
+    """distinct select on columns"""
+    distinct_on: [Map_select_column!]
+
+    """limit the number of rows returned"""
+    limit: Int
+
+    """skip the first n rows. Use only with order_by"""
+    offset: Int
+
+    """sort the rows by one or more columns"""
+    order_by: [Map_order_by!]
+
+    """filter the rows returned"""
+    where: Map_bool_exp
+  ): [Map!]!
+
+  """
+  fetch aggregated fields from the table: "Map"
+  """
+  Map_aggregate(
+    """distinct select on columns"""
+    distinct_on: [Map_select_column!]
+
+    """limit the number of rows returned"""
+    limit: Int
+
+    """skip the first n rows. Use only with order_by"""
+    offset: Int
+
+    """sort the rows by one or more columns"""
+    order_by: [Map_order_by!]
+
+    """filter the rows returned"""
+    where: Map_bool_exp
+  ): Map_aggregate!
+
+  """fetch data from the table: "Map" using primary key columns"""
+  Map_by_pk(id: uuid!): Map
+
   """
   fetch data from the table: "Player"
   """
@@ -4316,6 +4614,49 @@ type subscription_root {
   """fetch data from the table: "Guild" using primary key columns"""
   Guild_by_pk(id: uuid!): Guild
 
+  """
+  fetch data from the table: "Map"
+  """
+  Map(
+    """distinct select on columns"""
+    distinct_on: [Map_select_column!]
+
+    """limit the number of rows returned"""
+    limit: Int
+
+    """skip the first n rows. Use only with order_by"""
+    offset: Int
+
+    """sort the rows by one or more columns"""
+    order_by: [Map_order_by!]
+
+    """filter the rows returned"""
+    where: Map_bool_exp
+  ): [Map!]!
+
+  """
+  fetch aggregated fields from the table: "Map"
+  """
+  Map_aggregate(
+    """distinct select on columns"""
+    distinct_on: [Map_select_column!]
+
+    """limit the number of rows returned"""
+    limit: Int
+
+    """skip the first n rows. Use only with order_by"""
+    offset: Int
+
+    """sort the rows by one or more columns"""
+    order_by: [Map_order_by!]
+
+    """filter the rows returned"""
+    where: Map_bool_exp
+  ): Map_aggregate!
+
+  """fetch data from the table: "Map" using primary key columns"""
+  Map_by_pk(id: uuid!): Map
+
   """
   fetch data from the table: "Player"
   """
diff --git a/packages/metamaps/.babelrc b/packages/metamaps/.babelrc
deleted file mode 100644
index 3af6d738e..000000000
--- a/packages/metamaps/.babelrc
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    "presets": [
-      "next/babel"
-    ],
-    "plugins": [
-      [
-        "styled-components",
-        {
-          "ssr": true,
-          "displayName": true,
-          "preprocess": false
-        }
-      ]
-    ]
-  }
\ No newline at end of file
diff --git a/packages/metamaps/.eslintrc.json b/packages/metamaps/.eslintrc.json
deleted file mode 100644
index 16d45e390..000000000
--- a/packages/metamaps/.eslintrc.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "rules": {
-    "react/react-in-jsx-scope": "off"
-  },
-  "overrides": [
-    {
-      "files": ["./pages/**/*.{ts,tsx}"],
-      "rules": {
-        // NextJS requires default exports for pages
-        "import/no-default-export": "off",
-        "import/prefer-default-export": "error"
-      }
-    }
-  ]
-}
diff --git a/packages/metamaps/README.md b/packages/metamaps/README.md
index 12ae35f32..685c29db0 100644
--- a/packages/metamaps/README.md
+++ b/packages/metamaps/README.md
@@ -15,8 +15,4 @@ Runs TypeScript to check if there are any type errors
 
 ### `yarn build`
 
-Builds the app and exports the static site for production to the `out` folder.
-
-### `yarn start`
-
-Runs the NextJS server for production use (We generate a static site right now, not running a server)
+Builds the app and exports the static site for production to the `build` folder.
\ No newline at end of file
diff --git a/packages/metamaps/codegen.yml b/packages/metamaps/codegen.yml
new file mode 100644
index 000000000..4f0847fa7
--- /dev/null
+++ b/packages/metamaps/codegen.yml
@@ -0,0 +1,17 @@
+overwrite: true
+require:
+  - ts-node/register
+generates:
+  ./graphql/autogen/types.tsx:
+    schema: '../codegen/schema.graphql'
+    documents:
+      - ./graphql/**/(!(*.d)).ts
+    plugins:
+      - typescript
+      - typescript-operations
+      - typescript-urql
+      - add:
+          content: '/* eslint-disable */'
+    config:
+      gqlImport: fake-tag
+      skipTypename: true
diff --git a/packages/metamaps/components/Circle.tsx b/packages/metamaps/components/Circle.tsx
deleted file mode 100644
index b652ae2e8..000000000
--- a/packages/metamaps/components/Circle.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { FC } from 'react';
-import { useDrag } from 'react-dnd';
-import { connect } from 'react-redux';
-
-import { CircleContainer } from '../styles/Mapping';
-
-export interface CircleProps {
-    dispatch: any;
-    id: number;
-    type: string;
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-
-    selectedItem: number;
-    resizingItem: boolean;
-
-    mouseX: number;
-    mouseY: number;
-
-    url: string;
-    popup: string;
-}
-
-export const CircleComponent: FC<CircleProps> = ({
-    dispatch,
-    selectedItem,
-    resizingItem,
-    mouseX,
-    mouseY,
-    id,
-    type,
-    left,
-    top,
-    width,
-    height,
-
-    url,
-    popup,
-}) => {
-    const [, drag] = useDrag({
-        item: { id, type, left, top }
-    })
-
-    if (selectedItem === id && resizingItem) {
-        let rleft; let rtop; let rwidth; let rheight;
-
-        if (mouseX > left) {
-            rleft = left;
-            rwidth = mouseX - left + 5;
-        } else {
-            rleft = mouseX - 5;
-            rwidth = left - mouseX + 5;
-        }
-
-        if (mouseY > top) {
-            rtop = top;
-            rheight = mouseY - top + 5;
-        } else {
-            rtop = mouseY - 5;
-            rheight = top - mouseY + 5;
-        }
-
-        dispatch({ type: 'UPDATE_VECTOR', rleft, rtop, rwidth, rheight });
-
-        return (
-            <CircleContainer
-                ref={drag}
-                style={{ left: rleft, top: rtop, width: rwidth, height: rheight }}
-                data-id={id}
-                data-type={type}
-                onClick={(e: any) => dispatch({ type: 'RESIZE_ITEM_UPDATE' })}
-            >
-                <div className="circle" />
-            </CircleContainer>
-        )
-    } if (url) {
-        return(
-            <a href={url}>
-                <CircleContainer
-                    ref={drag}
-                    style={{ left, top, width, height }}
-                    data-id={id}
-                    data-type={type}
-                >
-                    <div className="circle" />
-                </CircleContainer>
-            </a>
-        )
-    } 
-        return (
-            <CircleContainer
-                ref={drag}
-                style={{ left, top, width, height }}
-                data-id={id}
-                data-type={type}
-                data-popup={popup}
-                onClick={(e: any) => dispatch({ type: 'OPEN_POPUP', popup })}
-            >
-                <div className="circle" />
-            </CircleContainer>
-        )
-    
-}
-
-export const Circle = connect(
-    (state: any) => ({
-        selectedItem: state.selectedItem,
-        resizingItem: state.resizingItem,
-
-        mouseX: state.mouseX,
-        mouseY: state.mouseY,
-    })
-)(CircleComponent);
\ No newline at end of file
diff --git a/packages/metamaps/components/Container.tsx b/packages/metamaps/components/Container.tsx
deleted file mode 100644
index 0b7af358e..000000000
--- a/packages/metamaps/components/Container.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { FC } from 'react';
-import { useDrop, XYCoord } from 'react-dnd';
-import { connect } from 'react-redux';
-
-import { MappingContainer } from '../styles/Mapping';
-import { Circle } from './Circle';
-import { Image } from './Image';
-import { Line } from './Line';
-import { Square } from './Square';
-
-export interface ContainerProps {
-  dispatch: any;
-  items: Array<any>;
-}
-
-export const ContainerComponent: FC<ContainerProps> = ({ dispatch, items }) => {
-  const [, drop] = useDrop({
-    accept: ['SQUARE', 'CIRCLE', 'LINE', 'IMAGE'],
-    drop(item: any, monitor) {
-      const delta = monitor.getDifferenceFromInitialOffset() as XYCoord;
-      const left = Math.round(item.left + delta.x);
-      const top = Math.round(item.top + delta.y);
-
-      dispatch({ type: 'UPDATE_POSITION', object: item.type, index: item.id, left, top })
-    }
-  });
-
-  return(
-    <MappingContainer ref={drop}>
-      {
-        items.map((item, id) => {
-          switch (item.type) {
-            case 'SQUARE':
-              return(
-                <Square
-                  key={id.toString()}
-                  id={id}
-                  type={item.type}
-                  left={item.left}
-                  top={item.top}
-                  width={item.width}
-                  height={item.height}
-                  url={item.url}
-                  popup={item.popup}/>
-              )
-            case 'CIRCLE':
-              return(
-                <Circle
-                  key={id.toString()}
-                  id={id}
-                  type={item.type}
-                  left={item.left}
-                  top={item.top}
-                  width={item.width}
-                  height={item.height}
-                  url={item.url}
-                  popup={item.popup}/>
-              )
-            case 'LINE':
-              return(
-                <Line
-                  key={id.toString()}         
-                  id={id}
-                  type={item.type}
-                  left={item.left}
-                  top={item.top}
-                  width={item.width}
-                  height={item.height}
-                  x1={item.x1}
-                  y1={item.y1}
-                  x2={item.x2}
-                  y2={item.y2}/>
-              )
-            case 'IMAGE':
-              return(
-                <Image
-                  key={id.toString()}
-                  id={id}
-                  type={item.type}
-                  left={item.left}
-                  top={item.top}
-                  width={item.width}
-                  height={item.height}
-                  url={item.url}
-                  popup={item.popup}/>
-              )
-            default: 
-              return(
-                <div/>
-              )
-          }
-        })
-      }
-    </MappingContainer>
-  )
-}
-
-export const Container = connect(
-  (state: any) => ({
-    items: state.items,
-  })
-)(ContainerComponent);
\ No newline at end of file
diff --git a/packages/metamaps/components/Image.tsx b/packages/metamaps/components/Image.tsx
deleted file mode 100644
index 7eced03a6..000000000
--- a/packages/metamaps/components/Image.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { FC } from 'react';
-import { useDrag } from 'react-dnd';
-import { connect } from 'react-redux';
-
-import { ImageContainer } from '../styles/Mapping';
-
-export interface ImageProps {
-    dispatch: any;
-    id: number;
-    type: string;
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-
-    selectedItem: number;
-    resizingItem: boolean;
-
-    mouseX: number;
-    mouseY: number;
-
-    url: string;
-    popup: string;
-}
-
-export const ImageComponent: FC<ImageProps> = ({
-    dispatch,
-
-    id,
-    type,
-    left,
-    top,
-    width,
-    height,
-
-    selectedItem,
-    resizingItem,
-    mouseX,
-    mouseY,
-
-    url,
-    popup,
-}) => {
-    const [, drag] = useDrag({
-        item: { id, type, left, top }
-    })
-
-    if (selectedItem === id && resizingItem) {
-        let rleft; let rtop; let rwidth; let rheight;
-
-        if (mouseX > left) {
-            rleft = left;
-            rwidth = mouseX - left + 5;
-        } else {
-            rleft = mouseX - 5;
-            rwidth = left - mouseX + 5;
-        }
-
-        if (mouseY > top) {
-            rtop = top;
-            rheight = mouseY - top + 5;
-        } else {
-            rtop = mouseY - 5;
-            rheight = top - mouseY + 5;
-        }
-
-        dispatch({ type: 'UPDATE_VECTOR', rleft, rtop, rwidth, rheight });
-
-        return(
-            <ImageContainer
-                ref={drag}
-                style={{ left: rleft, top: rtop, width: rwidth, height: rheight }}
-                data-id={id}
-                data-type={type}
-                onClick={(e: any) => dispatch({ type: 'RESIZE_ITEM_UPDATE' })}
-            >
-                <img id={`image-${id}`} alt={id.toString()}/>
-            </ImageContainer>
-        )
-    } if (url) {
-        return (
-            <a href={url}>
-                <ImageContainer
-                    ref={drag}
-                    style={{ left, top, width, height }}
-                    data-id={id}
-                    data-type={type}
-                >
-                    <img id={`image-${id}`} alt={id.toString()}/>
-                </ImageContainer>
-            </a>
-        )
-    } 
-        return (
-            <ImageContainer
-                ref={drag}
-                style={{ left, top, width, height }}
-                data-id={id}
-                data-type={type}
-            >
-                <img id={`image-${id}`} alt={id.toString()}/>
-            </ImageContainer>
-        )
-    
-}
-
-export const Image = connect(
-    (state: any) => ({
-        selectedItem: state.selectedItem,
-        resizingItem: state.resizingItem,
-
-        mouseX: state.mouseX,
-        mouseY: state.mouseY,
-    })
-)(ImageComponent);
\ No newline at end of file
diff --git a/packages/metamaps/components/Line.tsx b/packages/metamaps/components/Line.tsx
deleted file mode 100644
index 28a84d8e9..000000000
--- a/packages/metamaps/components/Line.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { FC } from 'react';
-import { useDrag } from 'react-dnd';
-import { connect } from 'react-redux';
-
-import { LineContainer } from '../styles/Mapping';
-import { LineColor } from '../styles/Styles';
-
-export interface LineProps {
-    dispatch: any;
-    id: number;
-    type: string;
-
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-
-    createLine: boolean;
-    menuX: number;
-    menuY: number;
-    mouseX: number;
-    mouseY: number;
-}
-
-export const LineComponent: FC<LineProps> = ({ dispatch, menuX, menuY, mouseX, mouseY, createLine, id, type, left, top, width, height, x1, y1, x2, y2 }) => {
-    const [, drag] = useDrag({ item: { id, type, left, top } })
-
-    if (createLine) {
-        let rleft: number; let rtop: number; let rwidth: number; let rheight: number;
-
-        if (mouseX > menuX) {
-            rleft = menuX;
-            rwidth = mouseX - menuX + 5;
-        } else {
-            rleft = mouseX - 5;
-            rwidth = menuX - mouseX + 5;
-        }
-
-        if (mouseY > menuY) {
-            rtop = menuY;
-            rheight = mouseY - menuY + 5;
-        } else {
-            rtop = mouseY - 5;
-            rheight = menuY - mouseY + 5;
-        }
-        
-        const X1 = x1;
-        const X2 = rwidth;
-        let Y1 = y1;
-        let Y2 = rheight;
-
-        if (mouseX > menuX && mouseY < menuY) {
-            Y1 = rheight;
-            Y2 = 0;
-        }
-
-        if (mouseX < menuX && mouseY > menuY) {
-            Y1 = rheight;
-            Y2 = 0;
-        }
-
-        return(
-            <LineContainer
-                ref={drag}
-                style={{ left: rleft, top: rtop, width: rwidth, height: rheight }}
-                data-id={id}
-                data-type={type}
-                onClick={(e: any) => dispatch({
-                    type: 'DRAW_LINE',
-                    index: id,
-                    rleft,
-                    rtop,
-                    rwidth,
-                    rheight,
-                    x1: X1,
-                    x2: X2,
-                    y1: Y1,
-                    y2: Y2,
-                })}
-            >
-                <polyline
-                    points={`${X1},${Y1} ${X2},${Y2}`}
-                    style={{ fill: 'none', stroke: LineColor, strokeWidth: 5 }}
-                />
-            </LineContainer>
-        )
-    }
-
-    return (
-        <LineContainer
-            ref={drag}
-            style={{ left, top, width, height }}
-            data-id={id}
-            data-type={type}
-        >
-            <polyline
-                points={`${x1},${y1} ${x2},${y2}`}
-                style={{ fill: 'none', stroke: LineColor, strokeWidth: 5 }}
-            />
-        </LineContainer>
-    )
-    
-}
-
-export const Line = connect(
-    (state: any) => ({
-        createLine: state.createLine,
-        menuX: state.menuX,
-        menuY: state.menuY,
-        mouseX: state.mouseX,
-        mouseY: state.mouseY,
-    })
-)(LineComponent);
\ No newline at end of file
diff --git a/packages/metamaps/components/Loading.tsx b/packages/metamaps/components/Loading.tsx
deleted file mode 100644
index f1f82ef09..000000000
--- a/packages/metamaps/components/Loading.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { CircularProgress } from "@chakra-ui/core";
-import { FC } from 'react';
-import { connect } from 'react-redux';
-
-import { LoadingContainer } from '../styles/Loading';
-
-export interface LoadingInterface {
-    loading: boolean;
-}
-
-export const LoadingComponent: FC<LoadingInterface> = ({ loading }) => {
-    return(
-        <LoadingContainer style={{ opacity: loading ? 1 : 0}}>
-            <CircularProgress isIndeterminate color="blue" size="92px" />
-        </LoadingContainer>
-    );
-}
-
-export const Loading = connect(
-    (state: any) => ({
-        loading: state.loading,
-    })
-)(LoadingComponent);
\ No newline at end of file
diff --git a/packages/metamaps/components/Menu.tsx b/packages/metamaps/components/Menu.tsx
deleted file mode 100644
index 00fe53025..000000000
--- a/packages/metamaps/components/Menu.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import { Button, ButtonGroup } from '@chakra-ui/core';
-import { FC } from 'react';
-import { connect } from 'react-redux';
-
-import { MenuContainer } from '../styles/Menu';
-import { ButtonColor,WhiteColor } from '../styles/Styles';
-
-export interface MenuProps {
-    dispatch: any;
-    menu: boolean;
-    menuType: string;
-    selectedItem: number;
-    menuX: number;
-    menuY: number;
-    urlText: string;
-    popupText: string;
-};
-
-export const MenuComponent: FC<MenuProps> = ({ dispatch, menu, menuType, selectedItem, menuX, menuY, urlText, popupText }) => {
-    if (menuType === 'normal') {
-        return(
-            <MenuContainer style={{ left: menuX, top: menuY, opacity: menu ? 1 : 0, pointerEvents: menu ? 'inherit': 'none' }}>
-                <ButtonGroup spacing={4}>
-                    <Button
-                        size="sm"
-                        leftIcon="plus-square"
-                        backgroundColor={ButtonColor}
-                        color={WhiteColor}
-                        onClick={(e: any) => {
-                            dispatch({ type: 'CREATE_SQUARE' })
-                        }}
-                        >Square</Button>
-                    <Button
-                        size="sm"
-                        leftIcon="plus-square"
-                        backgroundColor={ButtonColor}
-                        color={WhiteColor}
-                        onClick={(e: any) => {
-                            dispatch({ type: 'CREATE_CIRCLE' })
-                        }}
-                        >Circle</Button>
-                    <Button
-                        size="sm"
-                        leftIcon="plus-square"
-                        backgroundColor={ButtonColor}
-                        color={WhiteColor}
-                        onClick={(e: any) => {
-                            dispatch({ type: 'CREATE_LINE' })
-                        }}
-                        >Line</Button>
-                    <Button
-                        size="sm"
-                        leftIcon="plus-square"
-                        backgroundColor={ButtonColor}
-                        color={WhiteColor}
-                        onClick={(e: any) => {
-                            const el: any = document.querySelector('input#file-input');
-                            el.click();
-                            dispatch({ type: 'CREATE_IMAGE' });
-                        }}
-                        >Image</Button>
-
-                    <input
-                        id="file-input"
-                        type="file"
-                        accept="image/*"
-                        onChange={(e: any) => {
-                            const el: any = document.querySelector('input#file-input');
-                            const file = el.files[0];
-                            const reader = new FileReader();
-                            reader.onload = (e2: any) => {
-                                const img: any = document.querySelector(`img#image-${selectedItem}`);
-                                img.setAttribute('src', e2.target.result);
-                            }
-                            reader.readAsDataURL(file);
-                        }}
-                    />
-                </ButtonGroup>
-            </MenuContainer>
-        )
-    } if (menuType === 'SQUARE' || menuType === 'CIRCLE' || menuType === 'IMAGE') {
-        return(
-            <MenuContainer style={{ left: menuX, top: menuY, opacity: menu ? 1 : 0, pointerEvents: menu ? 'inherit': 'none' }}>
-                <ButtonGroup spacing={4}>
-                    <Button
-                        size="sm"
-                        leftIcon="plus-square"
-                        backgroundColor={ButtonColor}
-                        color={WhiteColor}
-                        onClick={(e: any) => {
-                            dispatch({ type: 'RESIZE_ITEM', index: selectedItem })
-                        }}
-                        >Resize</Button>
-                    <Button
-                        data-type="no-left-click"
-                        size="sm"
-                        leftIcon="plus-square"
-                        backgroundColor={ButtonColor}
-                        color={WhiteColor}
-                        onClick={(e: any) => {
-                            e.preventDefault();
-                            dispatch({ type: 'UPDATE_URL_BUTTON', index: selectedItem })
-                        }}
-                        >Add URL</Button>
-                    <Button
-                        data-type="no-left-click"
-                        size="sm"
-                        leftIcon="plus-square"
-                        backgroundColor={ButtonColor}
-                        color={WhiteColor}
-                        onClick={(e: any) => {
-                            dispatch({ type: 'UPDATE_POPUP_BUTTON', index: selectedItem })
-                        }}
-                        >Add Popup</Button>
-                    <Button
-                        size="sm"
-                        leftIcon="plus-square"
-                        backgroundColor={ButtonColor}
-                        color={WhiteColor}
-                        onClick={(e: any) => {
-                            dispatch({ type: 'DELETE_ITEM', index: selectedItem })
-                        }}
-                        >Delete</Button>
-                </ButtonGroup>
-            </MenuContainer>
-        )
-    } if (menuType === 'LINE') {
-        return(
-            <MenuContainer style={{ left: menuX, top: menuY, opacity: menu ? 1 : 0, pointerEvents: menu ? 'inherit': 'none' }}>
-                <ButtonGroup spacing={4}>
-                    <Button
-                        size="sm"
-                        leftIcon="plus-square"
-                        backgroundColor={ButtonColor}
-                        color={WhiteColor}
-                        onClick={(e: any) => {
-                            dispatch({ type: 'DELETE_ITEM', index: selectedItem })
-                        }}
-                        >Delete</Button>
-                </ButtonGroup>
-            </MenuContainer>
-        )
-    } if (menuType === 'url') {
-        return(
-            <MenuContainer style={{ left: menuX, top: menuY, opacity: menu ? 1 : 0, pointerEvents: menu ? 'inherit': 'none' }} data-type="no-left-click">
-                <input
-                    data-type="no-left-click"
-                    type="text"
-                    placeholder="URL"
-                    value={urlText}
-                    onChange={e => dispatch({ type: 'UPDATE_URL_TEXT', value: e.target.value })}
-                />
-                <ButtonGroup spacing={4}>
-                    <Button
-                        size="sm"
-                        leftIcon="plus-square"
-                        backgroundColor={ButtonColor}
-                        color={WhiteColor}
-                        onClick={(e: any) => {
-                            dispatch({ type: 'UPDATE_URL', index: selectedItem })
-                        }}
-                        >Update URL</Button>
-                </ButtonGroup>
-            </MenuContainer>
-        )
-    } if (menuType === 'popup') {
-        return(
-            <MenuContainer
-                className="textarea"
-                style={{ left: menuX, top: menuY, opacity: menu ? 1 : 0, pointerEvents: menu ? 'inherit': 'none' }}
-                data-type="no-left-click">
-                <textarea
-                    data-type="no-left-click"
-                    placeholder="Popup Text"
-                    value={popupText}
-                    onChange={e => dispatch({ type: 'UPDATE_POPUP_TEXT', value: e.target.value })}
-                />
-                <ButtonGroup spacing={4}>
-                    <Button
-                        size="sm"
-                        leftIcon="plus-square"
-                        backgroundColor={ButtonColor}
-                        color={WhiteColor}
-                        onClick={(e: any) => {
-                            dispatch({ type: 'UPDATE_POPUP', index: selectedItem })
-                        }}
-                        >Update Popup</Button>
-                </ButtonGroup>
-            </MenuContainer>
-        )
-    } 
-    return(<div/>)
-}
-
-export const Menu = connect(
-(state: any) => ({
-    menu: state.menu,
-    menuType: state.menuType,
-    selectedItem: state.selectedItem,
-    menuX: state.menuX,
-    menuY: state.menuY,
-    urlText: state.urlText,
-    popupText: state.popupText,
-})
-)(MenuComponent);
\ No newline at end of file
diff --git a/packages/metamaps/components/Popup.tsx b/packages/metamaps/components/Popup.tsx
deleted file mode 100644
index 7abb61ed2..000000000
--- a/packages/metamaps/components/Popup.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Button,ButtonGroup } from '@chakra-ui/core';
-import { FC } from 'react';
-import { connect } from 'react-redux';
-
-import { PopupContainer } from '../styles/App';
-import { ButtonColor,WhiteColor } from '../styles/Styles';
-
-export interface PopupProps {
-    dispatch: any;
-    renderedPopupText: string;
-    popupActive: boolean;
-}
-
-export const PopupComponent: FC<PopupProps> = ({
-    dispatch,
-    renderedPopupText,
-    popupActive,
-}) => {
-    return(
-        <PopupContainer className={popupActive ? 'active' : ''}>
-            <p>
-                {renderedPopupText}
-            </p>
-            <ButtonGroup display="flex" justifyContent="center">
-                <Button
-                    size="sm"
-                    backgroundColor={ButtonColor}
-                    color={WhiteColor}
-                    onClick={(e: any) => {
-                        dispatch({ type: 'CLOSE_POPUP' })
-                    }}
-                    >Close</Button>
-            </ButtonGroup>
-        </PopupContainer>
-    );
-}
-
-export const Popup = connect(
-    (state: any) => ({
-        renderedPopupText: state.renderedPopupText,
-        popupActive: state.popupActive,
-    })
-)(PopupComponent);
\ No newline at end of file
diff --git a/packages/metamaps/components/Square.tsx b/packages/metamaps/components/Square.tsx
deleted file mode 100644
index fd558f939..000000000
--- a/packages/metamaps/components/Square.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { FC } from 'react';
-import { useDrag } from 'react-dnd';
-import { connect } from 'react-redux';
-
-import { SquareContainer } from '../styles/Mapping';
-
-export interface SquareProps {
-    dispatch: any;
-    id: number;
-    type: string;
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-
-    selectedItem: number;
-    resizingItem: boolean;
-
-    mouseX: number;
-    mouseY: number;
-
-    url: string;
-    popup: string;
-}
-
-export const SquareComponent: FC<SquareProps> = ({
-    dispatch,
-
-    id,
-    type,
-    left,
-    top,
-    width,
-    height,
-
-    selectedItem,
-    resizingItem,
-    mouseX,
-    mouseY,
-
-    url,
-    popup,
-}) => {
-    const [, drag] = useDrag({
-        item: { id, type, left, top }
-    })
-
-    if (selectedItem === id && resizingItem) {
-        let rleft; let rtop; let rwidth; let rheight;
-
-        if (mouseX > left) {
-            rleft = left;
-            rwidth = mouseX - left + 5;
-        } else {
-            rleft = mouseX - 5;
-            rwidth = left - mouseX + 5;
-        }
-
-        if (mouseY > top) {
-            rtop = top;
-            rheight = mouseY - top + 5;
-        } else {
-            rtop = mouseY - 5;
-            rheight = top - mouseY + 5;
-        }
-
-        dispatch({ type: 'UPDATE_VECTOR', rleft, rtop, rwidth, rheight });
-
-        return(
-            <SquareContainer
-                ref={drag}
-                style={{ left: rleft, top: rtop, width: rwidth, height: rheight }}
-                data-id={id}
-                data-type={type}
-                onClick={(e: any) => dispatch({ type: 'RESIZE_ITEM_UPDATE' })}
-            />
-        )
-    } if (url) {
-        return (
-            <a href={url}>
-                <SquareContainer
-                    ref={drag}
-                    style={{ left, top, width, height }}
-                    data-id={id}
-                    data-type={type}
-                />
-            </a>
-        )
-    } 
-        return (
-            <SquareContainer
-                ref={drag}
-                style={{ left, top, width, height }}
-                data-id={id}
-                data-type={type}
-                data-popup={popup}
-                onClick={(e: any) => dispatch({ type: 'OPEN_POPUP', popup })}
-            />
-        )
-    
-}
-
-export const Square = connect(
-    (state: any) => ({
-        selectedItem: state.selectedItem,
-        resizingItem: state.resizingItem,
-
-        mouseX: state.mouseX,
-        mouseY: state.mouseY,
-    })
-)(SquareComponent);
\ No newline at end of file
diff --git a/packages/metamaps/components/ThreeBox.tsx b/packages/metamaps/components/ThreeBox.tsx
deleted file mode 100644
index 904fd9e32..000000000
--- a/packages/metamaps/components/ThreeBox.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Button,ButtonGroup } from '@chakra-ui/core';
-import { FC } from 'react';
-import { connect } from 'react-redux';
-
-import { Load3BoxUrl,Save3BoxUrl } from '../redux/ThreeBox';
-import { ButtonColor,WhiteColor } from '../styles/Styles';
-import { ThreeBoxContainer } from '../styles/ThreeBox';
-
-export interface ThreeBoxProps {
-    dispatch: any;
-    ethAccounts: Array<string>;
-    activeSpace: string;
-    items: Array<any>;
-}
-
-export const ThreeBoxComponent: FC<ThreeBoxProps> = ({
-    dispatch,
-    ethAccounts,
-    activeSpace,
-    items,
-}) => {
-    return(
-        <ThreeBoxContainer>
-            <input
-                type="text"
-                placeholder="3box Space URL"
-                value={activeSpace}
-                onChange={e => dispatch({ type: 'UPDATE_3BOX_URL', value: e.target.value })}
-            />
-            <ButtonGroup>
-                <Button
-                    size="sm"
-                    backgroundColor={ButtonColor}
-                    color={WhiteColor}
-                    onClick={async e => dispatch(await Save3BoxUrl(ethAccounts[0], activeSpace, items))}>
-                        Save
-                </Button>
-                <Button
-                    size="sm"
-                    backgroundColor={ButtonColor}
-                    color={WhiteColor}
-                    onClick={async e => dispatch(await Load3BoxUrl(ethAccounts[0], activeSpace))}>
-                        Load
-                </Button>
-            </ButtonGroup>
-        </ThreeBoxContainer>
-    );
-}
-
-export const ThreeBox = connect(
-    (state: any) => ({
-        ethAccounts: state.ethAccounts,
-        activeSpace: state.activeSpace,
-        items: state.items,
-    })
-)(ThreeBoxComponent);
\ No newline at end of file
diff --git a/packages/metamaps/components/index/Index.create.tsx b/packages/metamaps/components/index/Index.create.tsx
new file mode 100644
index 000000000..03cc3c12d
--- /dev/null
+++ b/packages/metamaps/components/index/Index.create.tsx
@@ -0,0 +1,76 @@
+import { Button, Input } from '@chakra-ui/react';
+import React, { FC, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { useMutation } from 'urql';
+
+import { CreateMap } from '../../graphql/insertMap';
+import { State } from '../../redux/Reducer.state';
+import { IndexCreateContainer } from './styles/Index.create.styles';
+
+export interface IndexCreateProps {
+  dispatch: Dispatch;
+  accounts: Array<string>;
+  create: {
+    input: string;
+    fetching: boolean;
+    error: any;
+    result: any;
+  };
+}
+
+export const IndexCreateComponent: FC<IndexCreateProps> = ({
+  dispatch,
+  accounts,
+  create,
+}) => {
+  const [state, executeMutation] = useMutation(CreateMap);
+
+  useEffect(() => {
+    dispatch({ type: 'CREATE_FETCHING', value: state.fetching });
+    dispatch({ type: 'CREATE_ERROR', value: state.error });
+    console.log(state);
+  }, [dispatch, state]);
+
+  async function insertMap(author, name) {
+    await executeMutation({ author, name });
+  }
+
+  return (
+    <IndexCreateContainer>
+      <Input
+        size="lg"
+        variant="flushed"
+        colorScheme="purple"
+        placeholder="Name of new map"
+        value={create.input}
+        onChange={(e) =>
+          dispatch({ type: 'CREATE_INPUT', value: e.target.value })
+        }
+      />
+      <Button
+        size="lg"
+        margin="0 0 0 15px"
+        width="180px"
+        colorScheme="purple"
+        isLoading={create.fetching}
+        loadingText="Creating Map"
+        onClick={(e) => {
+          if (accounts.length > 0) {
+            insertMap(accounts[0], create.input);
+            dispatch({ type: 'CREATE_INPUT', value: '' });
+          }
+        }}
+      >
+        New Map
+      </Button>
+    </IndexCreateContainer>
+  );
+};
+
+export const IndexCreate = connect((state: State) => ({
+  accounts: state.accounts,
+  create: {
+    ...state.create,
+  },
+}))(IndexCreateComponent);
diff --git a/packages/metamaps/components/index/Index.items.tsx b/packages/metamaps/components/index/Index.items.tsx
new file mode 100644
index 000000000..2719da106
--- /dev/null
+++ b/packages/metamaps/components/index/Index.items.tsx
@@ -0,0 +1,76 @@
+import { Alert, AlertIcon, CircularProgress } from '@chakra-ui/react';
+import Link from 'next/link';
+import React, { FC, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { useQuery } from 'urql';
+
+import { GetMapByAuthorQuery } from '../../graphql/getMap';
+import { State } from '../../redux/Reducer.state';
+import { IndexItemsContainer } from './styles/Index.items.styles';
+
+export interface IndexItemsProps {
+  dispatch: Dispatch;
+  accounts: Array<string>;
+}
+
+export const IndexItemsComponent: FC<IndexItemsProps> = ({
+  dispatch,
+  accounts,
+}) => {
+  const [result, reexecuteQuery] = useQuery({
+    query: GetMapByAuthorQuery,
+    variables: {
+      author: accounts[0],
+    },
+  });
+
+  const { data, fetching, error } = result;
+
+  useEffect(() => {
+    reexecuteQuery();
+  }, [dispatch, accounts, reexecuteQuery]);
+
+  return (
+    <IndexItemsContainer>
+      {fetching || accounts.length === 0 ? (
+        <div className="load-wrapper">
+          <CircularProgress isIndeterminate color="purple.300" size="42px" />
+        </div>
+      ) : (
+        ''
+      )}
+
+      {error && accounts.length > 0 ? (
+        <Alert status="error" colorScheme="red" color="black">
+          <AlertIcon />
+          There was an error retrieving your maps
+        </Alert>
+      ) : (
+        ''
+      )}
+
+      {data?.Map.length === 0 && !error ? (
+        <h3>You have not created a map yet!</h3>
+      ) : (
+        data.Map.map((map) => {
+          return (
+            <Link href={`/${map.author_address}/map/${map.id}`}>
+              <div className="map" key={map.id}>
+                <img src="/image/logo.png" alt="metamaps-logo" />
+                <div className="text">
+                  <h4>{map.name}</h4>
+                  <p>Owned by {map.author_address} (you)</p>
+                </div>
+              </div>
+            </Link>
+          );
+        })
+      )}
+    </IndexItemsContainer>
+  );
+};
+
+export const IndexItems = connect((state: State) => ({
+  accounts: state.accounts,
+}))(IndexItemsComponent);
diff --git a/packages/metamaps/components/index/Index.title.tsx b/packages/metamaps/components/index/Index.title.tsx
new file mode 100644
index 000000000..17345f540
--- /dev/null
+++ b/packages/metamaps/components/index/Index.title.tsx
@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { IndexTitleContainer } from './styles/Index.title.styles';
+
+export interface IndexTitleProps {
+  dispatch: Dispatch;
+}
+
+export const IndexTitleComponent: FC<IndexTitleProps> = ({ dispatch }) => {
+  return (
+    <IndexTitleContainer>
+      <div className="title">
+        <img src="/image/logo.png" alt="metamaps-logo" />
+        <h1>MetaMaps</h1>
+      </div>
+      <div className="subtitle">
+        <h2>A fun, interactive and engaging way to create diagrams and maps</h2>
+      </div>
+    </IndexTitleContainer>
+  );
+};
+
+export const IndexTitle = connect()(IndexTitleComponent);
diff --git a/packages/metamaps/components/index/styles/Index.create.styles.tsx b/packages/metamaps/components/index/styles/Index.create.styles.tsx
new file mode 100644
index 000000000..404b11a50
--- /dev/null
+++ b/packages/metamaps/components/index/styles/Index.create.styles.tsx
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+import {} from '../../../theme/Theme.colors';
+
+export const IndexCreateContainer = styled.div`
+  display: flex;
+  width: 100%;
+  max-width: 968px;
+  margin: auto;
+  padding: 15px 15px 45px 15px;
+`;
diff --git a/packages/metamaps/components/index/styles/Index.items.styles.tsx b/packages/metamaps/components/index/styles/Index.items.styles.tsx
new file mode 100644
index 000000000..f3ef1676f
--- /dev/null
+++ b/packages/metamaps/components/index/styles/Index.items.styles.tsx
@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+
+import { BackgroundColor } from '../../../theme/Theme.colors';
+
+export const IndexItemsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 968px;
+  min-height: 180px;
+  margin: auto;
+  padding: 15px;
+
+  h3 {
+    font-size: 24px;
+  }
+
+  div.map {
+    display: flex;
+    align-items: center;
+    background: ${BackgroundColor};
+    border-radius: 5px;
+    width: 100%;
+    padding: 15px;
+    margin: 15px 0;
+    cursor: pointer;
+
+    img {
+      height: 64px;
+      margin: 0 15px 0 0;
+    }
+
+    div.text {
+      h4 {
+        font-size: 24px;
+        font-weight: bold;
+        padding: 0 0 5px 0;
+      }
+      p {
+        font-size: 16px;
+      }
+    }
+  }
+`;
diff --git a/packages/metamaps/components/index/styles/Index.title.styles.tsx b/packages/metamaps/components/index/styles/Index.title.styles.tsx
new file mode 100644
index 000000000..82be816c1
--- /dev/null
+++ b/packages/metamaps/components/index/styles/Index.title.styles.tsx
@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+import {} from '../../../theme/Theme.colors';
+
+export const IndexTitleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 420px;
+
+  div.title {
+    display: flex;
+    align-items: center;
+    padding: 30px 0;
+
+    img {
+      height: 64px;
+    }
+
+    h1 {
+      font-size: 32px;
+      margin: 0 15px;
+      font-weight: bold;
+    }
+  }
+
+  h2 {
+    font-size: 18px;
+    font-weight: bold;
+  }
+`;
diff --git a/packages/metamaps/components/map/Map.container.tsx b/packages/metamaps/components/map/Map.container.tsx
new file mode 100644
index 000000000..e5eee9866
--- /dev/null
+++ b/packages/metamaps/components/map/Map.container.tsx
@@ -0,0 +1,151 @@
+import React, { FC, useEffect, useState } from 'react';
+import ReactFlow, { Controls, ReactFlowProvider } from 'react-flow-renderer';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { State } from '../../redux/Reducer.state';
+import { MapContext } from './Map.context';
+import { MapEdit } from './Map.edit';
+import { MapPopover } from './Map.popover';
+import { MapProfile } from './Map.profile';
+import { MapTitle } from './Map.title';
+import { MapContainer } from './styles/Map.container.styles';
+
+export interface MapProps {
+  dispatch: Dispatch;
+  data: Array<any>;
+  background: {
+    type: string;
+    url: string;
+  };
+}
+
+export const MapComponent: FC<MapProps> = ({ dispatch, data, background }) => {
+  const [dataState, setDataState] = useState(data);
+
+  useEffect(() => {
+    setDataState([]);
+    setTimeout(() => {
+      setDataState(data);
+    }, 10);
+  }, [dispatch, data]);
+
+  return (
+    <MapContainer
+      onClick={(e: any) => {
+        dispatch({ type: 'ACTIVATE_CONTEXT', active: false });
+        if (e.target.className) {
+          if (
+            e.target.className.indexOf('item') === -1 &&
+            e.target.className.indexOf('preserve-context') === -1
+          ) {
+            dispatch({ type: 'EDIT' });
+          }
+        }
+      }}
+    >
+      {background.type === 'video' ? (
+        <video autoPlay muted loop className="bg-video">
+          <source src={background.url} />
+        </video>
+      ) : (
+        ''
+      )}
+
+      <MapTitle />
+      <MapContext />
+      <MapPopover />
+      <MapEdit />
+      <MapProfile />
+
+      <ReactFlowProvider>
+        <ReactFlow
+          elements={dataState ?? []}
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '100vw',
+            height: '100vh',
+          }}
+          onContextMenu={(e: any) => {
+            e.preventDefault();
+            if (e.target.className.indexOf('map-context') !== -1) {
+              const activeIndex = e.target.getAttribute('data-id');
+              const width = e.target.style.width.replace('px', '');
+              const height = e.target.style.height.replace('px', '');
+              const text = e.target.textContent;
+
+              console.log(e.target);
+
+              dispatch({ type: 'EDIT', width, height, text });
+
+              if (e.target.className.indexOf('map-context-text') !== -1) {
+                dispatch({
+                  type: 'CONTEXT_TYPE',
+                  menu: 'text',
+                  activeIndex: Number(activeIndex),
+                });
+              } else {
+                dispatch({
+                  type: 'CONTEXT_TYPE',
+                  menu: 'object',
+                  activeIndex: Number(activeIndex),
+                });
+              }
+            } else {
+              dispatch({ type: 'CONTEXT_TYPE', menu: 'normal' });
+            }
+            dispatch({
+              type: 'ACTIVATE_CONTEXT',
+              x: e.clientX,
+              y: e.clientY,
+              active: true,
+            });
+          }}
+          onElementClick={(e, element) => {
+            if (element.data.url) {
+              window.open(element.data.url);
+            }
+          }}
+          nodesConnectable
+          onConnect={(params) =>
+            dispatch({ type: 'CONNECT_NODES', data: params })
+          }
+          onNodeDragStop={(e, node) =>
+            dispatch({ type: 'UPDATE_POSITION', item: node })
+          }
+          onNodeMouseEnter={async (e, node) => {
+            if (node.data.users) {
+              const user = node.data.users[0];
+              dispatch({
+                type: 'POPULATE_PROFILES',
+                value: node.data.users,
+                x: e.clientX,
+                y: e.clientY,
+              });
+            }
+          }}
+          onNodeMouseLeave={async (e, node) => {
+            dispatch({
+              type: 'POPULATE_PROFILES',
+              value: [],
+              x: e.clientX,
+              y: e.clientY,
+            });
+          }}
+        >
+          <Controls />
+        </ReactFlow>
+      </ReactFlowProvider>
+    </MapContainer>
+  );
+};
+
+export const Map = connect((state: State) => ({
+  data: state.map.data,
+  background: {
+    type: state.map.background.type,
+    url: state.map.background.url,
+  },
+}))(MapComponent);
diff --git a/packages/metamaps/components/map/Map.context.tsx b/packages/metamaps/components/map/Map.context.tsx
new file mode 100644
index 000000000..69c379a06
--- /dev/null
+++ b/packages/metamaps/components/map/Map.context.tsx
@@ -0,0 +1,238 @@
+import Box from '3box';
+import React, { FC } from 'react';
+import {
+  AiFillDelete,
+  AiFillFileImage,
+  AiOutlineFontSize,
+  AiOutlineLink,
+  AiOutlineUserAdd,
+  AiOutlineVideoCameraAdd,
+} from 'react-icons/ai';
+import { BiPalette, BiShapeTriangle } from 'react-icons/bi';
+import { FaHashtag, FaRegAddressCard, FaRegCircle } from 'react-icons/fa';
+import { FiTriangle } from 'react-icons/fi';
+import { IoMdResize, IoMdSquareOutline } from 'react-icons/io';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { State } from '../../redux/Reducer.state';
+import { MapContextContainer } from './styles/Map.context.styles';
+
+export interface MapContextProps {
+  dispatch: Dispatch;
+  accounts: Array<string>;
+  active: boolean;
+  type: string;
+  x: number;
+  y: number;
+}
+
+export const MapContextComponent: FC<MapContextProps> = ({
+  dispatch,
+  accounts,
+  active,
+  type,
+  x,
+  y,
+}) => {
+  return (
+    <MapContextContainer
+      style={{
+        opacity: active ? 1 : 0,
+        pointerEvents: active ? 'inherit' : 'none',
+        left: x,
+        top: y,
+      }}
+    >
+      {type === 'normal' ? (
+        <>
+          <button
+            type="button"
+            className="item"
+            onClick={(e) => dispatch({ type: 'CREATE_TEXT' })}
+          >
+            Text
+            <AiOutlineFontSize />
+          </button>
+          <button type="button" className="item">
+            Shapes
+            <BiShapeTriangle />
+            <div className="sub-context">
+              <button
+                type="button"
+                className="item"
+                onClick={(e) => dispatch({ type: 'CREATE_SQUARE' })}
+              >
+                Square
+                <IoMdSquareOutline />
+              </button>
+              <button
+                type="button"
+                className="item"
+                onClick={(e) => dispatch({ type: 'CREATE_CIRCLE' })}
+              >
+                Circle
+                <FaRegCircle />
+              </button>
+              <button
+                type="button"
+                className="item"
+                onClick={(e) => dispatch({ type: 'CREATE_TRIANGLE' })}
+              >
+                Triangle
+                <FiTriangle />
+              </button>
+            </div>
+          </button>
+
+          <input
+            style={{ display: 'none' }}
+            id="image-input"
+            type="file"
+            accept="image/*"
+            onChange={(e: any) => {
+              const el: any = document.querySelector('input#image-input');
+              const file = el.files[0];
+              const reader = new FileReader();
+              reader.onload = (e2: any) => {
+                dispatch({ type: 'CREATE_IMAGE', value: e2.target.result });
+              };
+              reader.readAsDataURL(file);
+            }}
+          />
+
+          <button
+            type="button"
+            className="item"
+            onClick={(e) => {
+              const el: any = document.querySelector('input#image-input');
+              el.click();
+            }}
+          >
+            Image
+            <AiFillFileImage />
+          </button>
+
+          <input
+            style={{ display: 'none' }}
+            id="video-input"
+            type="file"
+            accept="video/*"
+            onChange={(e: any) => {
+              const el: any = document.querySelector('input#video-input');
+              const file = el.files[0];
+              const reader = new FileReader();
+              reader.onload = (e2: any) => {
+                dispatch({ type: 'CREATE_VIDEO', value: e2.target.result });
+              };
+              reader.readAsDataURL(file);
+            }}
+          />
+
+          <button
+            type="button"
+            className="item"
+            onClick={(e) => {
+              const el: any = document.querySelector('input#video-input');
+              el.click();
+            }}
+          >
+            Video
+            <AiOutlineVideoCameraAdd />
+          </button>
+        </>
+      ) : (
+        ''
+      )}
+
+      {type === 'object' || type === 'text' ? (
+        <>
+          {type === 'text' ? (
+            <button
+              type="button"
+              className="item"
+              onClick={(e) => dispatch({ type: 'EDIT', key: 'text' })}
+            >
+              Edit Text
+              <AiOutlineFontSize />
+            </button>
+          ) : (
+            ''
+          )}
+
+          <button type="button" className="item">
+            Assign
+            <FaRegAddressCard />
+            <div className="sub-context">
+              <button
+                type="button"
+                className="item"
+                onClick={async (e) => {
+                  if (accounts.length > 0) {
+                    const value = await Box.getProfile(accounts[0]);
+                    dispatch({ type: 'ASSIGN_SELF', value });
+                  }
+                }}
+              >
+                To self
+                <AiOutlineUserAdd />
+              </button>
+              <button
+                type="button"
+                className="item"
+                onClick={(e) =>
+                  dispatch({ type: 'POPOVER_ASSIGNMENT', value: true })
+                }
+              >
+                Manage
+                <FaHashtag />
+              </button>
+            </div>
+          </button>
+          <button
+            type="button"
+            className="item"
+            onClick={(e) => dispatch({ type: 'EDIT', key: 'url' })}
+          >
+            URL
+            <AiOutlineLink />
+          </button>
+          <button
+            type="button"
+            className="item"
+            onClick={(e) => dispatch({ type: 'EDIT', key: 'resize' })}
+          >
+            Resize
+            <IoMdResize />
+          </button>
+          <button
+            type="button"
+            className="item"
+            onClick={(e) => dispatch({ type: 'EDIT', key: 'color' })}
+          >
+            Color
+            <BiPalette />
+          </button>
+          <button
+            type="button"
+            className="item"
+            onClick={(e) => dispatch({ type: 'REMOVE_ITEM' })}
+          >
+            Delete
+            <AiFillDelete />
+          </button>
+        </>
+      ) : (
+        ''
+      )}
+    </MapContextContainer>
+  );
+};
+
+export const MapContext = connect((state: State) => ({
+  accounts: state.accounts,
+  active: state.map.context.active,
+  type: state.map.context.type,
+  x: state.map.context.x,
+  y: state.map.context.y,
+}))(MapContextComponent);
diff --git a/packages/metamaps/components/map/Map.edit.tsx b/packages/metamaps/components/map/Map.edit.tsx
new file mode 100644
index 000000000..2ec0cad37
--- /dev/null
+++ b/packages/metamaps/components/map/Map.edit.tsx
@@ -0,0 +1,184 @@
+import { Button, ButtonGroup, Input } from '@chakra-ui/react';
+import React, { FC } from 'react';
+import { CirclePicker } from 'react-color';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { State } from '../../redux/Reducer.state';
+import { MapEditContainer } from './styles/Map.edit.styles';
+
+export interface MapEditProps {
+  dispatch: Dispatch;
+  active: boolean;
+  type: string;
+  edit: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  content: string;
+  url: string;
+}
+
+export const MapEditComponent: FC<MapEditProps> = ({
+  dispatch,
+  type,
+  edit,
+  x,
+  y,
+  width,
+  height,
+  content,
+  url,
+}) => {
+  return (
+    <MapEditContainer
+      style={{
+        opacity: edit ? 1 : 0,
+        pointerEvents: edit ? 'inherit' : 'none',
+        left: x,
+        top: y,
+      }}
+    >
+      {edit === 'color' ? (
+        <CirclePicker
+          onChangeComplete={(color) =>
+            dispatch({ type: 'UPDATE_COLOR', color: color.hex })
+          }
+        />
+      ) : (
+        ''
+      )}
+      {edit === 'resize' ? (
+        <div className="resize preserve-context">
+          <div className="input preserve-context">
+            <p>Width (px)</p>
+            <Input
+              placeholder="Width (px)"
+              size="md"
+              className="preserve-context"
+              value={width}
+              onChange={(e) =>
+                dispatch({
+                  type: 'UPDATE_RESIZE',
+                  key: 'width',
+                  value: e.target.value,
+                })
+              }
+            />
+          </div>
+          <div className="input preserve-context">
+            <p>Height (px)</p>
+            <Input
+              placeholder="Height (px)"
+              size="md"
+              className="preserve-context"
+              value={height}
+              onChange={(e) =>
+                dispatch({
+                  type: 'UPDATE_RESIZE',
+                  key: 'height',
+                  value: e.target.value,
+                })
+              }
+            />
+          </div>
+          <ButtonGroup
+            variant="outline"
+            size="sm"
+            display="flex"
+            justifyContent="flex-end"
+          >
+            <Button colorScheme="purple">Cancel</Button>
+            <Button
+              colorScheme="purple"
+              onClick={(e) => dispatch({ type: 'UPDATE_SIZE', width, height })}
+            >
+              Update
+            </Button>
+          </ButtonGroup>
+        </div>
+      ) : (
+        ''
+      )}
+
+      {edit === 'text' ? (
+        <div className="text preserve-context">
+          <div className="input preserve-context">
+            <p>Content</p>
+            <Input
+              placeholder="Text goes here"
+              size="md"
+              className="preserve-context"
+              value={content}
+              onChange={(e) =>
+                dispatch({ type: 'UPDATE_TEXT', value: e.target.value })
+              }
+            />
+          </div>
+          <ButtonGroup
+            variant="outline"
+            size="sm"
+            display="flex"
+            justifyContent="flex-end"
+          >
+            <Button colorScheme="purple">Cancel</Button>
+            <Button
+              colorScheme="purple"
+              onClick={(e) => dispatch({ type: 'CHANGE_TEXT', content })}
+            >
+              Update
+            </Button>
+          </ButtonGroup>
+        </div>
+      ) : (
+        ''
+      )}
+
+      {edit === 'url' ? (
+        <div className="text preserve-context">
+          <div className="input preserve-context">
+            <p>URL</p>
+            <Input
+              placeholder="URL goes here"
+              size="md"
+              className="preserve-context"
+              value={url}
+              onChange={(e) =>
+                dispatch({ type: 'UPDATE_URL', value: e.target.value })
+              }
+            />
+          </div>
+          <ButtonGroup
+            variant="outline"
+            size="sm"
+            display="flex"
+            justifyContent="flex-end"
+          >
+            <Button colorScheme="purple">Cancel</Button>
+            <Button
+              colorScheme="purple"
+              onClick={(e) => dispatch({ type: 'CHANGE_URL', url })}
+            >
+              Update
+            </Button>
+          </ButtonGroup>
+        </div>
+      ) : (
+        ''
+      )}
+    </MapEditContainer>
+  );
+};
+
+export const MapEdit = connect((state: State) => ({
+  active: state.map.context.active,
+  type: state.map.context.type,
+  edit: state.map.context.edit,
+  x: state.map.context.x,
+  y: state.map.context.y,
+  width: state.map.context.resize.width,
+  height: state.map.context.resize.height,
+  content: state.map.context.text.content,
+  url: state.map.context.text.url,
+}))(MapEditComponent);
diff --git a/packages/metamaps/components/map/Map.loader.tsx b/packages/metamaps/components/map/Map.loader.tsx
new file mode 100644
index 000000000..788706ccc
--- /dev/null
+++ b/packages/metamaps/components/map/Map.loader.tsx
@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { State } from '../../redux/Reducer.state';
+import { MapLoaderContainer } from './styles/Map.loader.styles';
+
+export interface MapLoaderProps {
+  dispatch: Dispatch;
+  loading: boolean;
+}
+
+export const MapLoaderComponent: FC<MapLoaderProps> = ({
+  dispatch,
+  loading,
+}) => {
+  return (
+    <MapLoaderContainer className={loading ? 'active' : ''}>
+      <img src="/image/logo.png" alt="metamaps-logo" />
+    </MapLoaderContainer>
+  );
+};
+
+export const MapLoader = connect((state: State) => ({
+  loading: state.map.loading,
+}))(MapLoaderComponent);
diff --git a/packages/metamaps/components/map/Map.popover.tsx b/packages/metamaps/components/map/Map.popover.tsx
new file mode 100644
index 000000000..4ed4dc153
--- /dev/null
+++ b/packages/metamaps/components/map/Map.popover.tsx
@@ -0,0 +1,262 @@
+import { Button, ButtonGroup, Input, useToast } from '@chakra-ui/react';
+import Box from '3box';
+import React, { FC, useEffect } from 'react';
+import { AiFillDelete } from 'react-icons/ai';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { useMutation } from 'urql';
+
+import { UpdateMapName } from '../../graphql/updateMap';
+import { State } from '../../redux/Reducer.state';
+import { MapPopoverContainer } from './styles/Map.popover.styles';
+
+export interface MapPopoverProps {
+  dispatch: Dispatch;
+  id: string;
+  background: boolean;
+  name: boolean;
+  assignment: boolean;
+  nameInput: string;
+  assignmentInput: string;
+  assignmentProfiles: Array<any>;
+}
+
+export const MapPopoverComponent: FC<MapPopoverProps> = ({
+  dispatch,
+  id,
+  background,
+  name,
+  assignment,
+  nameInput,
+  assignmentInput,
+  assignmentProfiles,
+}) => {
+  const toast = useToast();
+
+  const [state, executeMutation] = useMutation(UpdateMapName);
+
+  useEffect(() => {
+    dispatch({ type: 'UPDATE_NAME_FETCHING', value: state.fetching });
+    dispatch({ type: 'UPDATE_NAME_ERROR', value: state.error });
+    console.log(state);
+  }, [dispatch, state]);
+
+  async function updateMapName() {
+    await executeMutation({ id, name });
+  }
+
+  return (
+    <MapPopoverContainer
+      className={background || name || assignment ? 'active' : ''}
+    >
+      <div className="popover-wrap">
+        <div className={`popover ${background ? 'active' : ''}`}>
+          <h2>Change Background</h2>
+          <div className="options">
+            <button
+              type="button"
+              className="option"
+              onClick={(e) =>
+                dispatch({
+                  type: 'UPDATE_BACKGROUND',
+                  bgType: 'color',
+                  url: 'default',
+                })
+              }
+            >
+              <div className="option-bg" />
+              <p>Default</p>
+            </button>
+            <button
+              type="button"
+              className="option"
+              onClick={(e) =>
+                dispatch({
+                  type: 'UPDATE_BACKGROUND',
+                  bgType: 'video',
+                  url: '/video/space.mp4',
+                })
+              }
+            >
+              <div className="option-bg">
+                <video autoPlay muted loop className="video">
+                  <source src="/video/space.mp4" />
+                </video>
+              </div>
+              <p>Space</p>
+            </button>
+          </div>
+          <div className="button-wrap">
+            <Button
+              size="lg"
+              variant="outline"
+              colorScheme="purple"
+              margin="15px 0"
+              width="180px"
+              onClick={(e) =>
+                dispatch({ type: 'POPOVER_BACKGROUND', value: false })
+              }
+            >
+              Close
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="popover-wrap">
+        <div className={`popover ${name ? 'active' : ''}`}>
+          <h2>Change Name</h2>
+          <Input
+            size="lg"
+            variant="flushed"
+            colorScheme="purple"
+            placeholder="New map name"
+            textAlign="center"
+            margin="30px 15px"
+            width="calc(100% - 30px)"
+            value={nameInput}
+            onChange={(e) =>
+              dispatch({ type: 'POPOVER_NAME_INPUT', value: e.target.value })
+            }
+          />
+
+          <ButtonGroup
+            variant="outline"
+            size="lg"
+            display="flex"
+            justifyContent="center"
+          >
+            <Button
+              colorScheme="purple"
+              onClick={(e) => dispatch({ type: 'POPOVER_NAME', value: false })}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="purple"
+              onClick={async (e) => {
+                await updateMapName();
+                dispatch({ type: 'SAVE_NAME_INPUT', value: nameInput });
+              }}
+            >
+              Update
+            </Button>
+          </ButtonGroup>
+        </div>
+      </div>
+
+      <div className="popover-wrap">
+        <div className={`popover ${assignment ? 'active' : ''}`}>
+          <h2>Assign Users</h2>
+          <div className="profiles">
+            {assignmentProfiles.map((profile) => {
+              return (
+                <div className="profile" key={profile.proof_did}>
+                  <p>
+                    {profile.emoji} {profile.name}
+                  </p>
+                  <AiFillDelete
+                    onClick={(e) =>
+                      dispatch({
+                        type: 'REMOVE_ASSIGNMENT',
+                        key: profile.proof_did,
+                      })
+                    }
+                  />
+                </div>
+              );
+            })}
+          </div>
+
+          <div className="input">
+            <p className="label">Add address</p>
+            <Input
+              size="md"
+              variant="flushed"
+              colorScheme="purple"
+              placeholder="ETH address (0x...)"
+              textAlign="left"
+              width="100%"
+              margin="0 0 15px 0"
+              value={assignmentInput}
+              onChange={(e) =>
+                dispatch({
+                  type: 'POPOVER_ASSIGNMENT_INPUT',
+                  value: e.target.value,
+                })
+              }
+            />
+            <ButtonGroup
+              variant="solid"
+              size="sm"
+              display="flex"
+              justifyContent="flex-end"
+            >
+              <Button
+                colorScheme="purple"
+                width={120}
+                onClick={async (e) => {
+                  try {
+                    const value = await Box.getProfile(assignmentInput);
+                    if (!value.name) {
+                      throw new Error('Invalid address');
+                    }
+
+                    dispatch({ type: 'ADD_ASSIGNMENT', value });
+                  } catch (error) {
+                    toast({
+                      position: `bottom-right`,
+                      title: `Invalid address`,
+                      status: `error`,
+                      duration: 5000,
+                      isClosable: true,
+                    });
+                  }
+                }}
+              >
+                Add
+              </Button>
+            </ButtonGroup>
+          </div>
+
+          <ButtonGroup
+            variant="outline"
+            size="lg"
+            display="flex"
+            justifyContent="center"
+          >
+            <Button
+              colorScheme="purple"
+              onClick={(e) =>
+                dispatch({ type: 'POPOVER_ASSIGNMENT', value: false })
+              }
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="purple"
+              onClick={async (e) => {
+                dispatch({
+                  type: 'SAVE_ASSIGNMENT',
+                  value: assignmentProfiles,
+                });
+              }}
+            >
+              Save
+            </Button>
+          </ButtonGroup>
+        </div>
+      </div>
+    </MapPopoverContainer>
+  );
+};
+
+export const MapPopover = connect((state: State) => ({
+  id: state.map.id,
+  background: state.map.popover.background,
+  name: state.map.popover.name,
+  assignment: state.map.popover.assignment,
+  nameInput: state.map.popover.nameInput,
+  assignmentInput: state.map.popover.assignmentInput,
+  assignmentProfiles: state.map.popover.assignmentProfiles,
+}))(MapPopoverComponent);
diff --git a/packages/metamaps/components/map/Map.profile.tsx b/packages/metamaps/components/map/Map.profile.tsx
new file mode 100644
index 000000000..5a7152909
--- /dev/null
+++ b/packages/metamaps/components/map/Map.profile.tsx
@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { State } from '../../redux/Reducer.state';
+import { MapProfileContainer } from './styles/Map.profile.styles';
+
+export interface Profile {
+  emoji: string;
+  name: string;
+}
+
+export interface MapProfileProps {
+  profiles: {
+    data: Array<Profile>;
+    x: number;
+    y: number;
+  };
+}
+
+export const MapProfileComponent: FC<MapProfileProps> = ({ profiles }) => {
+  return (
+    <MapProfileContainer
+      style={{
+        top: profiles.y - 75,
+        left: profiles.x + 25,
+        opacity: profiles.data.length > 0 ? 1 : 0,
+      }}
+    >
+      <p>Assigned to</p>
+      {profiles.data.map((profile) => {
+        return (
+          <div className="profile">
+            <p>
+              {profile.emoji} {profile.name}
+            </p>
+          </div>
+        );
+      })}
+    </MapProfileContainer>
+  );
+};
+
+export const MapProfile = connect((state: State) => ({
+  profiles: {
+    data: state.map.profiles.data,
+    x: state.map.profiles.x,
+    y: state.map.profiles.y,
+  },
+}))(MapProfileComponent);
diff --git a/packages/metamaps/components/map/Map.title.tsx b/packages/metamaps/components/map/Map.title.tsx
new file mode 100644
index 000000000..77c164b1b
--- /dev/null
+++ b/packages/metamaps/components/map/Map.title.tsx
@@ -0,0 +1,126 @@
+import { useToast } from '@chakra-ui/react';
+import React, { FC, useEffect } from 'react';
+import { AiFillSave, AiOutlineFontSize } from 'react-icons/ai';
+import { BiImage } from 'react-icons/bi';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { useMutation } from 'urql';
+
+import { UpdateMapData } from '../../graphql/updateMap';
+import { State } from '../../redux/Reducer.state';
+import { MapTitleContainer } from './styles/Map.title.styles';
+
+export interface MapTitleProps {
+  dispatch: Dispatch;
+  toggle: boolean;
+
+  id: string;
+  counter: number;
+  name: string;
+
+  background: {
+    type: string;
+    url: string;
+  };
+
+  data: Array<any>;
+}
+
+export const MapTitleComponent: FC<MapTitleProps> = ({
+  dispatch,
+  toggle,
+  id,
+  counter,
+  name,
+  background,
+  data,
+}) => {
+  const toast = useToast();
+  const [state, executeMutation] = useMutation(UpdateMapData);
+
+  useEffect(() => {
+    dispatch({ type: 'UPDATE_DATA_FETCHING', value: state.fetching });
+    dispatch({ type: 'UPDATE_DATA_ERROR', value: state.error });
+    console.log(state);
+  }, [dispatch, state]);
+
+  async function updateMapData() {
+    const elements = data.map((item) => {
+      if (item.data.type === 'image' || item.data.type === 'video') {
+        return {
+          ...item,
+          data: {
+            ...item.data,
+            label: null,
+          },
+        };
+      }
+      return item;
+    });
+
+    await executeMutation({
+      id,
+      data: JSON.stringify({ counter, background, elements }),
+    });
+  }
+
+  return (
+    <MapTitleContainer className={toggle ? 'expanded' : 'minimized'}>
+      <button
+        className="info"
+        type="button"
+        onClick={() => dispatch({ type: 'POPOVER_TOGGLE' })}
+      >
+        <img src="/image/logo.png" alt="metamaps-logo" />
+        <h2>{name}</h2>
+      </button>
+      <div className="menu">
+        <button
+          type="button"
+          className="link"
+          onClick={() => dispatch({ type: 'POPOVER_BACKGROUND', value: true })}
+        >
+          <BiImage />
+          <p>Change Background</p>
+        </button>
+        <button
+          type="button"
+          className="link"
+          onClick={() => dispatch({ type: 'POPOVER_NAME', value: true })}
+        >
+          <AiOutlineFontSize />
+          <p>Change Name</p>
+        </button>
+        <button
+          type="button"
+          className="link"
+          onClick={async () => {
+            await updateMapData();
+            toast({
+              position: `bottom-right`,
+              title: `Map saved`,
+              status: `success`,
+              duration: 5000,
+              isClosable: true,
+            });
+          }}
+        >
+          <AiFillSave />
+          <p>Save Changes</p>
+        </button>
+      </div>
+    </MapTitleContainer>
+  );
+};
+
+export const MapTitle = connect((state: State) => ({
+  toggle: state.map.popover.toggle,
+  id: state.map.id,
+  counter: state.map.counter,
+  name: state.map.name,
+  background: {
+    type: state.map.background.type,
+    url: state.map.background.url,
+  },
+  data: state.map.data,
+}))(MapTitleComponent);
diff --git a/packages/metamaps/components/map/styles/Map.container.styles.tsx b/packages/metamaps/components/map/styles/Map.container.styles.tsx
new file mode 100644
index 000000000..74eba1700
--- /dev/null
+++ b/packages/metamaps/components/map/styles/Map.container.styles.tsx
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+import { PrimaryBackground } from '../../../theme/Theme.colors';
+
+export const MapContainer = styled.div`
+  position: relative;
+  z-index: 1;
+  width: 100vw;
+  height: 100vh;
+  background: ${PrimaryBackground};
+
+  video.bg-video {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
diff --git a/packages/metamaps/components/map/styles/Map.context.styles.tsx b/packages/metamaps/components/map/styles/Map.context.styles.tsx
new file mode 100644
index 000000000..990c91e93
--- /dev/null
+++ b/packages/metamaps/components/map/styles/Map.context.styles.tsx
@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+
+import {
+  ContextBorderColor,
+  ContextColor,
+  Easing,
+} from '../../../theme/Theme.colors';
+
+export const MapContextContainer = styled.div`
+  position: fixed;
+  left: 25px;
+  top: 25px;
+  z-index: 1111;
+  background: ${ContextColor};
+  border-radius: 5px;
+  border: 2px solid ${ContextBorderColor};
+  width: 180px;
+  transition: ${Easing};
+
+  button.item,
+  div.item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 40px;
+    padding: 0 15px;
+    font-size: 18px;
+    letter-spacing: 0.5px;
+    cursor: pointer;
+
+    transition: ${Easing};
+    border-bottom: 2px solid ${ContextBorderColor};
+    &:last-of-type {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background: ${ContextBorderColor};
+
+      div.sub-context {
+        opacity: 1;
+        pointer-events: inherit;
+      }
+    }
+
+    div.sub-context {
+      position: absolute;
+      left: 100%;
+      width: 100%;
+      top: -2px;
+
+      opacity: 0;
+      pointer-events: none;
+      transition: ${Easing};
+
+      background: ${ContextColor};
+      border-radius: 5px;
+      border: 2px solid ${ContextBorderColor};
+    }
+  }
+`;
diff --git a/packages/metamaps/components/map/styles/Map.edit.styles.tsx b/packages/metamaps/components/map/styles/Map.edit.styles.tsx
new file mode 100644
index 000000000..17b1a0dd0
--- /dev/null
+++ b/packages/metamaps/components/map/styles/Map.edit.styles.tsx
@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+import {
+  ContextBorderColor,
+  ContextColor,
+  Easing,
+} from '../../../theme/Theme.colors';
+
+export const MapEditContainer = styled.div`
+  position: fixed;
+  left: 25px;
+  top: 25px;
+  z-index: 1111;
+  padding: 15px;
+  cursor: pointer;
+
+  background: ${ContextColor};
+  border-radius: 5px;
+  border: 2px solid ${ContextBorderColor};
+  min-width: 240px;
+  transition: ${Easing};
+
+  div.input {
+    padding: 0 0 15px 0;
+    &:last-of-type {
+      padding: 0;
+    }
+
+    p {
+      font-weight: bold;
+      font-size: 14px;
+      padding: 0 0 5px 0;
+    }
+  }
+`;
diff --git a/packages/metamaps/components/map/styles/Map.loader.styles.tsx b/packages/metamaps/components/map/styles/Map.loader.styles.tsx
new file mode 100644
index 000000000..0412cd430
--- /dev/null
+++ b/packages/metamaps/components/map/styles/Map.loader.styles.tsx
@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+import { Easing, PrimaryBackground } from '../../../theme/Theme.colors';
+
+export const MapLoaderContainer = styled.div`
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9001;
+  transition: ${Easing};
+  background: ${PrimaryBackground};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  opacity: 0;
+  pointer-events: none;
+  &.active {
+    opacity: 1;
+  }
+
+  @keyframes hover {
+    0% {
+      transform: translateY(0px);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+    100% {
+      transform: translateY(0px);
+    }
+  }
+
+  img {
+    animation: hover 3s infinite;
+  }
+`;
diff --git a/packages/metamaps/components/map/styles/Map.popover.styles.tsx b/packages/metamaps/components/map/styles/Map.popover.styles.tsx
new file mode 100644
index 000000000..a05506f83
--- /dev/null
+++ b/packages/metamaps/components/map/styles/Map.popover.styles.tsx
@@ -0,0 +1,121 @@
+import styled from 'styled-components';
+
+import {
+  ContextBorderColor,
+  ContextColor,
+  Easing,
+  PrimaryBackground,
+} from '../../../theme/Theme.colors';
+
+export const MapPopoverContainer = styled.div`
+  position: fixed;
+  z-index: 1111;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+
+  background: rgba(0, 0, 0, 0.5);
+  transition: ${Easing};
+  opacity: 0;
+  pointer-events: none;
+  &.active {
+    opacity: 1;
+    pointer-events: inherit;
+  }
+
+  div.popover-wrap {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  div.popover {
+    position: relative;
+    z-index: 1111;
+    background: ${ContextColor};
+    border-radius: 5px;
+    border: 2px solid ${ContextBorderColor};
+    width: 640px;
+    max-width: 100%;
+    min-height: 240px;
+    margin: 0 0 120px 0;
+    transition: ${Easing};
+    padding: 15px 0;
+
+    opacity: 0;
+    pointer-events: none;
+    &.active {
+      opacity: 1;
+      pointer-events: inherit;
+    }
+
+    h2 {
+      font-size: 24px;
+      text-align: center;
+    }
+
+    div.input {
+      padding: 15px;
+    }
+
+    div.profiles {
+      padding: 15px 0;
+    }
+
+    div.profile {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 15px;
+      font-size: 18px;
+    }
+
+    div.button-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    div.options {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+
+      button.option {
+        width: 50%;
+        padding: 30px;
+        cursor: pointer;
+
+        div.option-bg {
+          position: relative;
+          background: ${PrimaryBackground};
+          border: 2px solid ${ContextBorderColor};
+          width: 100%;
+          height: 160px;
+          border-radius: 8px;
+          margin: 0 0 15px 0;
+          overflow: hidden;
+
+          video {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        p {
+          font-size: 18px;
+          text-align: center;
+        }
+      }
+    }
+  }
+`;
diff --git a/packages/metamaps/components/map/styles/Map.profile.styles.tsx b/packages/metamaps/components/map/styles/Map.profile.styles.tsx
new file mode 100644
index 000000000..17c32ef8d
--- /dev/null
+++ b/packages/metamaps/components/map/styles/Map.profile.styles.tsx
@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+import {
+  ContextBorderColor,
+  ContextColor,
+  Easing,
+} from '../../../theme/Theme.colors';
+
+export const MapProfileContainer = styled.div`
+  position: fixed;
+  left: 50px;
+  top: 50px;
+  width: 240px;
+  padding: 15px;
+  border: 2px solid ${ContextBorderColor};
+  background: ${ContextColor};
+  border-radius: 5px;
+  transition: ${Easing};
+  z-index: 1111;
+
+  p {
+    font-size: 14px;
+    font-weight: bold;
+    padding: 0 0 5px 0;
+  }
+
+  div.profile {
+    padding: 5px;
+    p {
+      font-weight: normal;
+    }
+
+    &:last-of-type {
+      padding-bottom: 0;
+    }
+  }
+`;
diff --git a/packages/metamaps/components/map/styles/Map.title.styles.tsx b/packages/metamaps/components/map/styles/Map.title.styles.tsx
new file mode 100644
index 000000000..45396631d
--- /dev/null
+++ b/packages/metamaps/components/map/styles/Map.title.styles.tsx
@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+
+import {
+  ContextBorderColor,
+  Easing,
+  TitleColor,
+} from '../../../theme/Theme.colors';
+
+export const MapTitleContainer = styled.div`
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 11;
+  width: 100%;
+  height: 40px;
+  background: ${TitleColor};
+  border-bottom: 2px solid ${ContextBorderColor};
+  transition: ${Easing};
+
+  &.minimized {
+    background: transparent;
+    border-bottom: 2px solid transparent;
+
+    div.menu {
+      opacity: 0;
+    }
+  }
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  button.info {
+    display: flex;
+    align-items: center;
+    padding: 0 15px;
+    cursor: pointer;
+
+    img {
+      height: 32px;
+      margin: 0 10px 0 0;
+    }
+
+    h2 {
+      font-size: 24px;
+      font-weight: bold;
+      margin: 0 0 2.5px 0;
+    }
+  }
+
+  div.menu {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    height: 100%;
+    transition: ${Easing};
+
+    button.link {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: 0 15px;
+      font-size: 18px;
+      cursor: pointer;
+
+      p {
+        margin: 0 0 0 10px;
+      }
+
+      transition: ${Easing};
+      &:hover {
+        background: ${ContextBorderColor};
+      }
+    }
+  }
+`;
diff --git a/packages/metamaps/components/shared/Metamask.tsx b/packages/metamaps/components/shared/Metamask.tsx
new file mode 100644
index 000000000..ec991ea1d
--- /dev/null
+++ b/packages/metamaps/components/shared/Metamask.tsx
@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { State } from '../../redux/Reducer.state';
+import { MetamaskContainer } from './styles/Metamask.styles';
+
+export interface MetamaskProps {
+  dispatch: Dispatch;
+  metamask: boolean;
+}
+
+export const MetamaskComponent: FC<MetamaskProps> = ({
+  dispatch,
+  metamask,
+}) => {
+  return (
+    <MetamaskContainer className={metamask ? 'active' : ''}>
+      <img src="/image/metamask.png" alt="metamask-logo" />
+      <p>Please enable Metamask to use Metamaps</p>
+    </MetamaskContainer>
+  );
+};
+
+export const Metamask = connect((state: State) => ({
+  metamask: state.metamask,
+}))(MetamaskComponent);
diff --git a/packages/metamaps/components/shared/styles/Metamask.styles.tsx b/packages/metamaps/components/shared/styles/Metamask.styles.tsx
new file mode 100644
index 000000000..4e0eabe8d
--- /dev/null
+++ b/packages/metamaps/components/shared/styles/Metamask.styles.tsx
@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+import { Easing } from '../../../theme/Theme.colors';
+
+export const MetamaskContainer = styled.div`
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1111;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  transition: ${Easing};
+  pointer-events: none;
+  &.active {
+    opacity: 0;
+  }
+
+  img {
+    height: 128px;
+    margin: 30px 0;
+  }
+
+  p {
+    font-size: 24px;
+  }
+`;
diff --git a/packages/metamaps/config.ts b/packages/metamaps/config.ts
new file mode 100644
index 000000000..fa4b9bf6f
--- /dev/null
+++ b/packages/metamaps/config.ts
@@ -0,0 +1,6 @@
+export const CONFIG = {
+  graphqlURL:
+    process.env.NEXT_PUBLIC_GRAPHQL_URL || 'http://localhost:8080/v1/graphql',
+  infuraId:
+    process.env.NEXT_PUBLIC_INFURA_ID || '781d8466252d47508e177b8637b1c2fd',
+};
diff --git a/packages/metamaps/graphql/getMap.ts b/packages/metamaps/graphql/getMap.ts
new file mode 100644
index 000000000..452eee418
--- /dev/null
+++ b/packages/metamaps/graphql/getMap.ts
@@ -0,0 +1,22 @@
+import gql from 'fake-tag';
+
+export const GetMapByAuthorQuery = gql`
+  query GetMapByAuthor($author: String!) {
+    Map(where: { author_address: { _eq: $author } }) {
+      id
+      author_address
+      name
+    }
+  }
+`;
+
+export const GetMapQuery = gql`
+  query GetMap($id: uuid!) {
+    Map_by_pk(id: $id) {
+      id
+      author_address
+      name
+      data
+    }
+  }
+`;
\ No newline at end of file
diff --git a/packages/metamaps/graphql/insertMap.ts b/packages/metamaps/graphql/insertMap.ts
new file mode 100644
index 000000000..c10029ffd
--- /dev/null
+++ b/packages/metamaps/graphql/insertMap.ts
@@ -0,0 +1,15 @@
+import gql from 'fake-tag';
+
+export const CreateMap = gql`
+  mutation createMap($author: String!, $name: String!) {
+    insert_Map_one(
+      object: {
+        author_address: $author,
+        name: $name,
+        data: ""
+      }
+    ) {
+      id
+    }
+  }
+`;
\ No newline at end of file
diff --git a/packages/metamaps/graphql/updateMap.ts b/packages/metamaps/graphql/updateMap.ts
new file mode 100644
index 000000000..37efccb09
--- /dev/null
+++ b/packages/metamaps/graphql/updateMap.ts
@@ -0,0 +1,23 @@
+import gql from 'fake-tag';
+
+export const UpdateMapName = gql`
+  mutation updateMapName($id: uuid!, $name: String!) {
+    update_Map_by_pk(
+      pk_columns: { id: $id },
+      _set: { name: $name }
+    ) {
+      id
+    }
+  }
+`;
+
+export const UpdateMapData = gql`
+  mutation updateMapName($id: uuid!, $data: String!) {
+    update_Map_by_pk(
+      pk_columns: { id: $id },
+      _set: { data: $data }
+    ) {
+      id
+    }
+  }
+`;
\ No newline at end of file
diff --git a/packages/metamaps/next-env.d.ts b/packages/metamaps/next-env.d.ts
index f85e64525..7b7aa2c77 100644
--- a/packages/metamaps/next-env.d.ts
+++ b/packages/metamaps/next-env.d.ts
@@ -1,5 +1,2 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
-
-declare module 'styled-components';
-declare module 'react-redux';
\ No newline at end of file
diff --git a/packages/metamaps/package.json b/packages/metamaps/package.json
index 73e15e823..32affaba6 100644
--- a/packages/metamaps/package.json
+++ b/packages/metamaps/package.json
@@ -1,36 +1,50 @@
 {
   "name": "@metafam/metamaps",
-  "version": "0.1.0",
-  "private": true,
+  "version": "1.0.0",
+  "main": "pages/index.tsx",
+  "license": "MIT",
   "scripts": {
-    "dev": "next",
-    "build": "next build && next export",
-    "start": "next start",
+    "dev": "npx next",
+    "build": "npx next build",
+    "export": "npx next export -o build",
+    "start": "npx next start",
     "typecheck": "tsc",
+    "generate": "graphql-codegen --config=codegen.yml",
     "precommit": "yarn lint-staged"
   },
   "dependencies": {
-    "3box": "^1.20.3",
-    "@chakra-ui/core": "^0.8.0",
-    "@emotion/core": "^10.0.28",
-    "@emotion/styled": "^10.0.27",
-    "@types/styled-components": "^5.1.1",
-    "babel-plugin-styled-components": "^1.10.7",
-    "emotion-theming": "^10.0.27",
-    "graphql": "^15.0.0",
+    "3box": "^1.21.0",
+    "@chakra-ui/react": "^1.0.1",
+    "@emotion/react": "^11.1.1",
+    "@emotion/styled": "^11.0.0",
+    "fake-tag": "^2.0.0",
+    "framer-motion": "^2.9.5",
     "immutability-helper": "^3.1.1",
-    "isomorphic-unfetch": "^3.0.0",
-    "next": "latest",
+    "next": "^9.5.3",
+    "next-images": "^1.4.1",
     "next-redux-wrapper": "^6.0.2",
-    "react": "^16.13.1",
-    "react-addons-update": "^15.6.2",
-    "react-dnd": "^11.1.3",
-    "react-dnd-html5-backend": "^11.1.3",
-    "react-dom": "^16.13.1",
+    "react-apollo": "^3.1.5",
+    "react-color": "^2.19.3",
+    "react-flow-renderer": "^8.1.1",
+    "react-icons": "^3.11.0",
     "react-redux": "^7.2.1",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
-    "styled-components": "^5.1.1",
-    "urql": "^1.9.7"
+    "styled-components": "^5.2.0",
+    "superagent": "^6.1.0",
+    "typescript": "^4.0.2",
+    "urql": "^1.11.4"
+  },
+  "devDependencies": {
+    "@types/node": "^14.10.0",
+    "@types/react": "^16.9.49",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^7.1.11",
+    "@types/styled-components": "^5.1.3",
+    "@types/superagent": "^4.1.10"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   }
 }
diff --git a/packages/metamaps/pages/[author_address]/map/[id].tsx b/packages/metamaps/pages/[author_address]/map/[id].tsx
new file mode 100644
index 000000000..d8e740d14
--- /dev/null
+++ b/packages/metamaps/pages/[author_address]/map/[id].tsx
@@ -0,0 +1,89 @@
+import { useRouter } from 'next/router';
+import React, { FC, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { useQuery } from 'urql';
+
+import { Map } from '../../../components/map/Map.container';
+import { MapLoader } from '../../../components/map/Map.loader';
+import { GetMapQuery } from '../../../graphql/getMap';
+import { State } from '../../../redux/Reducer.state';
+import { AppContainer } from '../../../theme/Theme.components';
+
+export interface MapPageProps {
+  dispatch: Dispatch;
+}
+
+export const MapPageComponent: FC<MapPageProps> = ({ dispatch }) => {
+  const router = useRouter();
+  const { id } = router.query;
+
+  const [result] = useQuery({
+    query: GetMapQuery,
+    variables: { id },
+  });
+
+  const { data, fetching, error } = result;
+
+  dispatch({ type: 'MAP_LOADING', value: fetching });
+
+  const items = data?.Map_by_pk.data
+    ? JSON.parse(data?.Map_by_pk.data)
+    : {
+        counter: 0,
+        elements: [],
+        background: {
+          type: 'color',
+          url: 'default',
+        },
+      };
+
+  items.elements = items.elements.map((item) => {
+    if (item.data.type === 'image') {
+      return {
+        ...item,
+        data: {
+          ...item.data,
+          label: (
+            <img
+              src={item.data.base64}
+              alt="metamaps-content"
+              className="map-context-video"
+            />
+          ),
+        },
+      };
+    }
+    if (item.data.type === 'video') {
+      return {
+        ...item,
+        data: {
+          ...item.data,
+          label: (
+            <video controls className="map-context-video">
+              <source src={item.data.base64} />
+            </video>
+          ), // eslint-disable-line
+        },
+      };
+    }
+    return item;
+  });
+
+  dispatch({
+    type: 'MAP_DATA',
+    id: data?.Map_by_pk.id,
+    owner: data?.Map_by_pk.author_address,
+    name: data?.Map_by_pk.name,
+    data: items,
+  });
+
+  return (
+    <AppContainer>
+      <Map />
+      <MapLoader />
+    </AppContainer>
+  );
+};
+
+export default connect((state: State) => ({}))(MapPageComponent);
diff --git a/packages/metamaps/pages/_app.tsx b/packages/metamaps/pages/_app.tsx
index e1d1dac43..806d57c2f 100644
--- a/packages/metamaps/pages/_app.tsx
+++ b/packages/metamaps/pages/_app.tsx
@@ -1,22 +1,36 @@
-import { CSSReset, ThemeProvider } from '@chakra-ui/core';
-import App, { AppContext, AppInitialProps } from "next/app";
+import { ChakraProvider, theme } from '@chakra-ui/react';
+import App, { AppContext, AppInitialProps } from 'next/app';
+import React from 'react';
 import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { createClient, Provider } from 'urql';
 
-import { wrapper } from "../redux/Reducer";
-import { Load3BoxUrl } from '../redux/ThreeBox';
+import { CONFIG } from '../config';
+import { wrapper } from '../redux/Reducer';
 
 declare const window: any;
 
+export const client = createClient({
+  url: CONFIG.graphqlURL,
+  suspense: false,
+});
+
 export interface AppProps extends AppInitialProps {
-  dispatch: any;
-  activeSpace: string;
-};
+  dispatch: Dispatch;
+}
 
 class WrappedApp extends App<AppProps> {
   public async componentDidMount() {
-    const accounts = await window.ethereum.enable();
-    this.props.dispatch({ type: 'UPDATE_ETH_ACCOUNTS', accounts });
-    this.props.dispatch(await Load3BoxUrl(accounts[0], this.props.activeSpace));
+    if (window.ethereum) {
+      try {
+        const accounts = await window.ethereum.enable();
+        this.props.dispatch({ type: 'METAMASK', value: true });
+        this.props.dispatch({ type: 'ACCOUNTS', value: accounts });
+      } catch (error) {
+        console.error(error);
+        this.props.dispatch({ type: 'METAMASK', value: false });
+      }
+    }
   }
 
   public static getInitialProps = async ({ Component, ctx }: AppContext) => {
@@ -25,27 +39,23 @@ class WrappedApp extends App<AppProps> {
         ...(Component.getInitialProps
           ? await Component.getInitialProps(ctx)
           : {}),
-        appProp: ctx.pathname
-      }
+        appProp: ctx.pathname,
+      },
     };
   };
 
   public render() {
     const { Component, pageProps } = this.props;
     return (
-      <ThemeProvider>
-        <CSSReset/>
-        <Component {...pageProps} />
-      </ThemeProvider>
-    )
+      <Provider value={client}>
+        <ChakraProvider resetCSS theme={theme}>
+          <Component {...pageProps} />
+        </ChakraProvider>
+      </Provider>
+    );
   }
 }
 
-const WrappedAppRedux = connect(
-  (state: any) => ({
-    menu: state.menu,
-    activeSpace: state.activeSpace,
-  })
-)(WrappedApp);
+const WrappedAppRedux = connect()(WrappedApp);
 
 export default wrapper.withRedux(WrappedAppRedux);
diff --git a/packages/metamaps/pages/_document.tsx b/packages/metamaps/pages/_document.tsx
index 5f903946a..b06f72b08 100644
--- a/packages/metamaps/pages/_document.tsx
+++ b/packages/metamaps/pages/_document.tsx
@@ -1,18 +1,22 @@
-import Document, { DocumentContext, DocumentInitialProps } from 'next/document'
-import { ServerStyleSheet } from 'styled-components'
+import Document, { DocumentContext, DocumentInitialProps } from 'next/document';
+import React from 'react';
+import { ServerStyleSheet } from 'styled-components';
 
 export default class WebAppDocument extends Document {
-  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
+  static async getInitialProps(
+    ctx: DocumentContext,
+  ): Promise<DocumentInitialProps> {
     const sheet = new ServerStyleSheet();
     const originalRenderPage = ctx.renderPage;
 
     try {
       ctx.renderPage = () =>
-      originalRenderPage({
-        enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
-      })
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
 
-      const initialProps = await Document.getInitialProps(ctx)
+      const initialProps = await Document.getInitialProps(ctx);
       return {
         ...initialProps,
         styles: (
@@ -21,9 +25,9 @@ export default class WebAppDocument extends Document {
             {sheet.getStyleElement()}
           </>
         ),
-      }
+      };
     } finally {
-      sheet.seal()
+      sheet.seal();
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/metamaps/pages/index.tsx b/packages/metamaps/pages/index.tsx
index 998d291f6..6926058aa 100644
--- a/packages/metamaps/pages/index.tsx
+++ b/packages/metamaps/pages/index.tsx
@@ -1,63 +1,27 @@
-import { FC } from 'react';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
+import React, { FC } from 'react';
 import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
 
-import { Container } from '../components/Container';
-import { Loading } from '../components/Loading';
-import { Menu } from '../components/Menu';
-import { Popup } from '../components/Popup';
-import { ThreeBox } from '../components/ThreeBox';
-import { App } from '../styles/App';
+import { IndexCreate } from '../components/index/Index.create';
+import { IndexItems } from '../components/index/Index.items';
+import { IndexTitle } from '../components/index/Index.title';
+import { Metamask } from '../components/shared/Metamask';
+import { State } from '../redux/Reducer.state';
+import { AppContainer } from '../theme/Theme.components';
 
-declare const window: any;
-
-export interface HomeProps {
-  dispatch: any;
-  menu: boolean;
-  activeSpace: string;
+export interface IndexProps {
+  dispatch: Dispatch;
 }
 
-export const Home: FC<HomeProps> = ({ dispatch, menu, activeSpace }) => {
-  return(
-    <App
-      onContextMenu={(e: any) => {
-          e.preventDefault();
-          dispatch({
-            type: 'TOGGLE_MENU',
-            value: true,
-            x: e.pageX,
-            y: e.pageY,
-            menuType: e.target.getAttribute('data-type'),
-            id: e.target.getAttribute('data-id')
-          })
-        }
-      }
-      onClick={(e: any) => {
-          const target = e.target.getAttribute('data-type');
-          if (target !== 'no-left-click') {
-            dispatch({ type: 'CLOSE_MENU' })
-          }
-        }
-      }
-      onMouseMove={(e: any) => {
-        dispatch({ type: 'MOUSE_POSITION', x: e.pageX, y: e.pageY });
-      }}
-    >
-    <Loading/>
-    <Popup/>
-    <ThreeBox/>
-    <DndProvider backend={HTML5Backend}>
-      <Container/>
-      <Menu/>
-    </DndProvider>
-  </App>
-  )
-}
+export const IndexComponent: FC<IndexProps> = ({ dispatch }) => {
+  return (
+    <AppContainer>
+      <Metamask />
+      <IndexTitle />
+      <IndexCreate />
+      <IndexItems />
+    </AppContainer>
+  );
+};
 
-export default connect(
-  (state: any) => ({
-    menu: state.menu,
-    activeSpace: state.activeSpace,
-  })
-)(Home);
+export default connect((state: State) => ({}))(IndexComponent);
diff --git a/packages/metamaps/public/font/Raleway.italic.ttf b/packages/metamaps/public/font/Raleway.italic.ttf
new file mode 100644
index 000000000..71d0ac4be
Binary files /dev/null and b/packages/metamaps/public/font/Raleway.italic.ttf differ
diff --git a/packages/metamaps/public/font/Raleway.normal.ttf b/packages/metamaps/public/font/Raleway.normal.ttf
new file mode 100644
index 000000000..2466a5e01
Binary files /dev/null and b/packages/metamaps/public/font/Raleway.normal.ttf differ
diff --git a/packages/metamaps/public/image/logo.png b/packages/metamaps/public/image/logo.png
new file mode 100644
index 000000000..f961dbea3
Binary files /dev/null and b/packages/metamaps/public/image/logo.png differ
diff --git a/packages/metamaps/public/image/metamask.png b/packages/metamaps/public/image/metamask.png
new file mode 100644
index 000000000..53a89f8fd
Binary files /dev/null and b/packages/metamaps/public/image/metamask.png differ
diff --git a/packages/metamaps/public/video/space.mp4 b/packages/metamaps/public/video/space.mp4
new file mode 100644
index 000000000..17f27239a
Binary files /dev/null and b/packages/metamaps/public/video/space.mp4 differ
diff --git a/packages/metamaps/redux/Reducer.map.state.tsx b/packages/metamaps/redux/Reducer.map.state.tsx
new file mode 100644
index 000000000..bc1c46947
--- /dev/null
+++ b/packages/metamaps/redux/Reducer.map.state.tsx
@@ -0,0 +1,670 @@
+import update from 'immutability-helper';
+import React from 'react';
+import { AnyAction } from 'redux';
+
+import { State } from './Reducer.state'; // eslint-disable-line
+
+export interface MapState {
+  map: {
+    loading: boolean;
+    counter: number;
+    activeIndex: number;
+
+    profiles: {
+      data: Array<any>;
+      x: number;
+      y: number;
+    };
+
+    id: string;
+    name: string;
+    owner: string;
+
+    background: {
+      type: string;
+      url: string;
+    };
+
+    data: Array<any>;
+
+    popover: {
+      toggle: boolean;
+      background: boolean;
+      assignment: boolean;
+      name: boolean;
+      nameInput: string;
+      assignmentInput: string;
+      saving: boolean;
+
+      assignmentProfiles: Array<any>;
+    };
+
+    context: {
+      type: string;
+      edit: string;
+      active: boolean;
+      x: number;
+      y: number;
+
+      resize: {
+        width: number;
+        height: number;
+      };
+
+      text: {
+        content: string;
+        url: string;
+      };
+    };
+  };
+}
+
+export const InitialMapState: MapState = {
+  map: {
+    loading: false,
+    counter: 0,
+    activeIndex: -1,
+
+    profiles: {
+      data: [],
+      x: 0,
+      y: 0,
+    },
+
+    id: '',
+    name: '',
+    owner: '',
+
+    background: {
+      type: '',
+      url: '',
+    },
+
+    data: [],
+
+    popover: {
+      toggle: false,
+      background: false,
+      name: false,
+      assignment: false,
+      nameInput: '',
+      assignmentInput: '',
+      saving: false,
+      assignmentProfiles: [],
+    },
+
+    context: {
+      type: 'normal',
+      edit: '',
+      active: false,
+      x: -1,
+      y: -1,
+
+      resize: {
+        width: 0,
+        height: 0,
+      },
+
+      text: {
+        content: '',
+        url: '',
+      },
+    },
+  },
+};
+
+export function MapActions(state: State, action: AnyAction): State {
+  switch (action.type) {
+    case 'MAP_LOADING':
+      return update(state, { map: { loading: { $set: action.value } } });
+    case 'MAP_DATA':
+      return update(state, {
+        map: {
+          id: { $set: action.id },
+          name: { $set: action.name },
+          owner: { $set: action.owner },
+          counter: { $set: action.data?.counter ?? 0 },
+          background: {
+            $set: action.data?.background ?? { type: 'color', url: 'default' },
+          },
+          data: { $set: action.data?.elements ?? [] },
+        },
+      });
+    case 'SAVE_NAME_INPUT':
+      return update(state, {
+        map: {
+          name: { $set: action.value },
+          popover: {
+            name: { $set: false },
+            nameInput: { $set: '' },
+          },
+        },
+      });
+    case 'POPULATE_PROFILES':
+      return update(state, {
+        map: {
+          profiles: {
+            data: { $set: action.value },
+            x: { $set: action.x },
+            y: { $set: action.y },
+          },
+        },
+      });
+    case 'UPDATE_BACKGROUND':
+      return update(state, {
+        map: {
+          background: {
+            type: { $set: action.bgType },
+            url: { $set: action.url },
+          },
+          popover: {
+            background: { $set: false },
+          },
+        },
+      });
+    case 'ACTIVATE_CONTEXT':
+      return update(state, {
+        map: {
+          context: {
+            active: { $set: action.active },
+            x: { $set: action.x ?? state.map.context.x },
+            y: { $set: action.y ?? state.map.context.y },
+          },
+        },
+      });
+    case 'CONTEXT_TYPE':
+      return update(state, {
+        map: {
+          activeIndex: { $set: action.activeIndex },
+          context: {
+            type: { $set: action.menu },
+          },
+        },
+      });
+    case 'EDIT':
+      return update(state, {
+        map: {
+          context: {
+            edit: { $set: action.key },
+            active: { $set: false },
+            resize: {
+              width: { $set: action.width ?? state.map.context.resize.width },
+              height: {
+                $set: action.height ?? state.map.context.resize.height,
+              },
+            },
+            text: {
+              content: { $set: action.text },
+              url: { $set: action.url },
+            },
+          },
+        },
+      });
+    case 'UPDATE_RESIZE':
+      return update(state, {
+        map: {
+          context: {
+            resize: {
+              [action.key]: { $set: action.value },
+            },
+          },
+        },
+      });
+    case 'UPDATE_TEXT':
+      return update(state, {
+        map: {
+          context: {
+            text: {
+              content: { $set: action.value },
+            },
+          },
+        },
+      });
+    case 'UPDATE_URL':
+      return update(state, {
+        map: {
+          context: {
+            text: {
+              url: { $set: action.value },
+            },
+          },
+        },
+      });
+    case 'REMOVE_ASSIGNMENT':
+      return update(state, {
+        map: {
+          popover: {
+            assignmentProfiles: {
+              $set: state.map.popover.assignmentProfiles.filter(
+                (profile) => profile.proof_did !== action.key,
+              ),
+            },
+          },
+        },
+      });
+    case 'ADD_ASSIGNMENT':
+      return update(state, {
+        map: {
+          popover: {
+            assignmentProfiles: {
+              $push: [action.value],
+            },
+          },
+        },
+      });
+    case 'SAVE_ASSIGNMENT':
+      return update(state, {
+        map: {
+          data: {
+            $set: state.map.data.filter((item) => {
+              if (item.id.toString() === state.map.activeIndex.toString()) {
+                return {
+                  ...item,
+                  data: {
+                    ...item.data,
+                    users: action.value,
+                  },
+                };
+              }
+              return item;
+            }),
+          },
+          popover: {
+            assignment: { $set: false },
+          },
+        },
+      });
+    case 'POPOVER_TOGGLE':
+      return update(state, {
+        map: { popover: { toggle: { $set: !state.map.popover.toggle } } },
+      });
+    case 'POPOVER_BACKGROUND':
+      return update(state, {
+        map: { popover: { background: { $set: action.value } } },
+      });
+    case 'POPOVER_ASSIGNMENT':
+      return update(state, {
+        map: {
+          popover: {
+            assignment: { $set: action.value },
+            assignmentProfiles: {
+              $set:
+                state.map.data.filter(
+                  (item) =>
+                    item.id.toString() === state.map.activeIndex.toString(),
+                )[0].data.users ?? [],
+            },
+          },
+        },
+      });
+    case 'POPOVER_NAME':
+      return update(state, {
+        map: { popover: { name: { $set: action.value } } },
+      });
+    case 'POPOVER_NAME_INPUT':
+      return update(state, {
+        map: { popover: { nameInput: { $set: action.value } } },
+      });
+    case 'POPOVER_ASSIGNMENT_INPUT':
+      return update(state, {
+        map: { popover: { assignmentInput: { $set: action.value } } },
+      });
+    case 'SAVING_MAP':
+      return update(state, {
+        map: { popover: { saving: { $set: action.value } } },
+      });
+    case 'CREATE_SQUARE':
+      return update(state, {
+        map: {
+          counter: { $set: state.map.counter + 1 },
+          data: {
+            $push: [
+              {
+                id: state.map.counter + 1,
+                className: `map-context-${
+                  state.map.counter + 1
+                } map-context-square`,
+                animated: true,
+                type: 'default',
+                style: { background: '#FFF', width: 100, height: 100 },
+                position: { x: state.map.context.x, y: state.map.context.y },
+                data: { label: '' },
+              },
+            ],
+          },
+        },
+      });
+    case 'CREATE_CIRCLE':
+      return update(state, {
+        map: {
+          counter: { $set: state.map.counter + 1 },
+          data: {
+            $push: [
+              {
+                id: state.map.counter + 1,
+                className: `map-context-${
+                  state.map.counter + 1
+                } map-context-circle`,
+                animated: true,
+                type: 'default',
+                style: {
+                  background: '#FFF',
+                  width: 100,
+                  height: 100,
+                  borderRadius: '50%',
+                },
+                position: { x: state.map.context.x, y: state.map.context.y },
+                data: { label: '' },
+              },
+            ],
+          },
+        },
+      });
+    case 'CREATE_TRIANGLE':
+      return update(state, {
+        map: {
+          counter: { $set: state.map.counter + 1 },
+          data: {
+            $push: [
+              {
+                id: state.map.counter + 1,
+                className: `map-context-${
+                  state.map.counter + 1
+                } map-context-triangle`,
+                animated: true,
+                type: 'default',
+                style: {
+                  width: 100,
+                  height: 100,
+                  background: `conic-gradient(at 50% 50%,transparent 135deg,#FFF 0,#FFF 225deg, transparent 0)`,
+                },
+                position: { x: state.map.context.x, y: state.map.context.y },
+                data: { label: '' },
+              },
+            ],
+          },
+        },
+      });
+    case 'CREATE_TEXT':
+      return update(state, {
+        map: {
+          counter: { $set: state.map.counter + 1 },
+          data: {
+            $push: [
+              {
+                id: state.map.counter + 1,
+                className: `map-context-${
+                  state.map.counter + 1
+                } map-context-text`,
+                animated: true,
+                type: 'default',
+                style: {
+                  width: 300,
+                  height: 100,
+                  background: 'transparent',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  color: '#FFF',
+                  fontSize: 18,
+                },
+                position: { x: state.map.context.x, y: state.map.context.y },
+                data: { label: 'Right click to change text' },
+              },
+            ],
+          },
+        },
+      });
+    case 'CREATE_IMAGE':
+      return update(state, {
+        map: {
+          counter: { $set: state.map.counter + 1 },
+          data: {
+            $push: [
+              {
+                id: state.map.counter + 1,
+                className: `map-context-${
+                  state.map.counter + 1
+                } map-context-image`,
+                animated: true,
+                type: 'default',
+                style: {
+                  width: 100,
+                  height: 100,
+                  userSelect: 'none',
+                  background: 'transparent',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  color: '#FFF',
+                  fontSize: 18,
+                },
+                position: { x: state.map.context.x, y: state.map.context.y },
+                data: {
+                  label: (
+                    <img
+                      src={action.value}
+                      alt="metamap-content"
+                      className="map-context-image"
+                    />
+                  ),
+                  type: 'image',
+                  base64: action.value,
+                },
+              },
+            ],
+          },
+        },
+      });
+    case 'CREATE_VIDEO':
+      return update(state, {
+        map: {
+          counter: { $set: state.map.counter + 1 },
+          data: {
+            $push: [
+              {
+                id: state.map.counter + 1,
+                className: `map-context-${
+                  state.map.counter + 1
+                } map-context-video`,
+                animated: true,
+                type: 'default',
+                style: {
+                  width: 100,
+                  height: 100,
+                  userSelect: 'none',
+                  background: 'transparent',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  color: '#FFF',
+                  fontSize: 18,
+                },
+                position: { x: state.map.context.x, y: state.map.context.y },
+                data: {
+                  label: (
+                    <video controls className="map-context-video">
+                      <source src={action.value} />
+                    </video>
+                  ),
+                  type: 'video',
+                  base64: action.value,
+                }, // eslint-disable-line
+              },
+            ],
+          },
+        },
+      });
+    case 'CONNECT_NODES':
+      return update(state, {
+        map: {
+          data: {
+            $push: [
+              {
+                id: `s${action.data.source}-t${action.data.target}`,
+                ...action.data,
+                animated: true,
+              },
+            ],
+          },
+        },
+      });
+    case 'UPDATE_POSITION':
+      return update(state, {
+        map: {
+          data: {
+            $set: state.map.data.map((item) => {
+              if (item.id.toString() === action.item.id.toString()) {
+                return {
+                  ...item,
+                  position: {
+                    ...item.position,
+                    x: action.item.position.x,
+                    y: action.item.position.y,
+                  },
+                };
+              }
+              return item;
+            }),
+          },
+        },
+      });
+    case 'UPDATE_COLOR':
+      return update(state, {
+        map: {
+          data: {
+            $set: state.map.data.map((item) => {
+              if (item.id.toString() === state.map.activeIndex.toString()) {
+                if (item.className.indexOf('map-context-text') !== -1) {
+                  return {
+                    ...item,
+                    style: {
+                      ...item.style,
+                      color: action.color,
+                    },
+                  };
+                }
+                if (item.className.indexOf('map-context-triangle') !== -1) {
+                  return {
+                    ...item,
+                    style: {
+                      ...item.style,
+                      background: `conic-gradient(at 50% 50%,transparent 135deg,${action.color} 0,${action.color} 225deg, transparent 0)`,
+                    },
+                  };
+                }
+                return {
+                  ...item,
+                  style: {
+                    ...item.style,
+                    background: action.color,
+                  },
+                };
+              }
+              return item;
+            }),
+          },
+        },
+      });
+    case 'UPDATE_SIZE':
+      return update(state, {
+        map: {
+          data: {
+            $set: state.map.data.map((item) => {
+              if (item.id.toString() === state.map.activeIndex.toString()) {
+                return {
+                  ...item,
+                  style: {
+                    ...item.style,
+                    width: `${action.width}px` ?? item.style.width,
+                    height: `${action.height}px` ?? item.style.height,
+                  },
+                };
+              }
+              return item;
+            }),
+          },
+        },
+      });
+    case 'CHANGE_TEXT':
+      return update(state, {
+        map: {
+          data: {
+            $set: state.map.data.map((item) => {
+              if (item.id.toString() === state.map.activeIndex.toString()) {
+                return {
+                  ...item,
+                  data: {
+                    ...item.data,
+                    label: action.content,
+                  },
+                };
+              }
+              return item;
+            }),
+          },
+        },
+      });
+    case 'CHANGE_URL':
+      return update(state, {
+        map: {
+          data: {
+            $set: state.map.data.map((item) => {
+              if (item.id.toString() === state.map.activeIndex.toString()) {
+                return {
+                  ...item,
+                  data: {
+                    ...item.data,
+                    url: action.url,
+                  },
+                };
+              }
+              return item;
+            }),
+          },
+        },
+      });
+    case 'ASSIGN_SELF':
+      return update(state, {
+        map: {
+          data: {
+            $set: state.map.data.map((item) => {
+              if (item.id.toString() === state.map.activeIndex.toString()) {
+                if (state.accounts.length > 0) {
+                  const users = item.data.users ? item.data.users : [];
+                  users.push(action.value);
+                  return {
+                    ...item,
+                    data: {
+                      ...item.data,
+                      users,
+                    },
+                  };
+                }
+              }
+              return item;
+            }),
+          },
+        },
+      });
+    case 'REMOVE_ITEM':
+      return update(state, {
+        map: {
+          data: {
+            $set: state.map.data.filter((item) => {
+              if (
+                item.id === state.map.activeIndex ||
+                Number(item.source) === state.map.activeIndex ||
+                Number(item.target) === state.map.activeIndex
+              ) {
+                return false;
+              }
+              return true;
+            }),
+          },
+        },
+      });
+    default:
+      return state;
+  }
+}
diff --git a/packages/metamaps/redux/Reducer.state.tsx b/packages/metamaps/redux/Reducer.state.tsx
index f89dab872..1d1a9f53e 100644
--- a/packages/metamaps/redux/Reducer.state.tsx
+++ b/packages/metamaps/redux/Reducer.state.tsx
@@ -1,51 +1,44 @@
-export interface State {
-    loading: boolean;
-    ethAccounts: Array<string>;
-    activeSpace: string;
-    menu: boolean;
-    menuType: string;
-    selectedItem: number;
-    resizingItem: boolean;
-    resizeVector: {
-        left: number;
-        top: number;
-        width: number;
-        height: number;
-    };
-    createLine: boolean;
-    urlText: string;
-    popupText: string;
-    renderedPopupText: string;
-    popupActive: boolean;
-    menuX: number;
-    menuY: number;
-    mouseX: number;
-    mouseY: number;
-    items: Array<any>;
+import update from 'immutability-helper';
+import { AnyAction } from 'redux';
+
+import { InitialMapState, MapActions, MapState } from './Reducer.map.state'; // eslint-disable-line
+
+export interface State extends MapState {
+  metamask: boolean;
+  accounts: Array<string>;
+  create: {
+    input: string;
+    fetching: boolean;
+    error: any;
+  };
+}
+
+export const InitialState: State = {
+  metamask: true,
+  accounts: [],
+  create: {
+    input: '',
+    fetching: false,
+    error: null,
+  },
+  ...InitialMapState,
 };
 
-export const initialState = {
-    loading: true,
-    ethAccounts: [],
-    activeSpace: 'metamap',
-    menu: false,
-    menuType: 'normal',
-    selectedItem: -1,
-    resizingItem: false,
-    resizeVector: {
-        left: 0,
-        top: 0,
-        width: 0,
-        height: 0,
-    },
-    createLine: false,
-    urlText: '',
-    popupText: '',
-    renderedPopupText: '',
-    popupActive: false,
-    menuX: 0,
-    menuY: 0,
-    mouseX: 0,
-    mouseY: 0,
-    items: [],
-};
\ No newline at end of file
+export function Actions(_state: State, action: AnyAction): State {
+  const state = MapActions(_state, action);
+
+  switch (action.type) {
+    case 'METAMASK':
+      return update(state, { metamask: { $set: action.value } });
+    case 'ACCOUNTS':
+      return update(state, { accounts: { $set: action.value } });
+    case 'CREATE_INPUT':
+      return update(state, { create: { input: { $set: action.value } } });
+    case 'CREATE_FETCHING':
+      return update(state, { create: { fetching: { $set: action.value } } });
+    case 'CREATE_ERROR':
+      return update(state, { create: { error: { $set: action.value } } });
+    default:
+      return state;
+  }
+}
diff --git a/packages/metamaps/redux/Reducer.tsx b/packages/metamaps/redux/Reducer.tsx
index c36e6227d..51ab33ca7 100644
--- a/packages/metamaps/redux/Reducer.tsx
+++ b/packages/metamaps/redux/Reducer.tsx
@@ -1,254 +1,17 @@
-import { Context, createWrapper, HYDRATE,MakeStore } from 'next-redux-wrapper';
-import { AnyAction, applyMiddleware, compose,createStore } from 'redux';
+import { createWrapper, MakeStore } from 'next-redux-wrapper';
+import { AnyAction, applyMiddleware, compose, createStore } from 'redux';
 import thunk from 'redux-thunk';
 
-import { initialState,State } from './Reducer.state';
+import { Actions, InitialState, State } from './Reducer.state';
 
-export function reducer(state: State = initialState, action: AnyAction): State {
-    if (action.type !== 'MOUSE_POSITION' && action.type !== 'UPDATE_VECTOR') {
-        console.log(state, action);
-    }
-
-    switch (action.type) {
-        case HYDRATE:
-            return { ...state, ...action.payload };
-        case 'LOADING':
-            return {
-                ...state,
-                loading: action.value,
-            };
-        case 'LOADED_3BOX_URL':
-            return {
-                ...state,
-                items: action.data,
-            };
-        case 'UPDATE_3BOX_URL':
-            return {
-                ...state,
-                activeSpace: action.value,
-            };
-        case 'UPDATE_ETH_ACCOUNTS':
-            return {
-                ...state,
-                ethAccounts: action.accounts,
-            };
-        case 'MOUSE_POSITION':
-            return {
-                ...state,
-                mouseX: action.x,
-                mouseY: action.y,
-            };
-        case 'TOGGLE_MENU':
-            return {
-                ...state,
-                menu: action.value,
-                menuType: (action.menuType ? action.menuType : 'normal'),
-                selectedItem: (action.id ? Number(action.id) : -1),
-                menuX: (action.x ? action.x : -1),
-                menuY: (action.y ? action.y : -1),
-            };
-        case 'UPDATE_URL_BUTTON':
-            return {
-                ...state,
-                menuType: 'url',
-                urlText: state.items[state.selectedItem].url,
-            };
-        case 'UPDATE_URL_TEXT':
-            return {
-                ...state,
-                urlText: action.value,
-            };
-        case 'UPDATE_URL':
-            return {
-                ...state,
-                menu: false,
-                urlText: '',
-                items: state.items.map((item, index) => {
-                    if (state.selectedItem === index) {
-                        return {
-                            ...item,
-                            url: state.urlText,
-                        };
-                    }
-                    return item;
-                }),
-            };
-        case 'UPDATE_POPUP_BUTTON':
-            return {
-                ...state,
-                menuType: 'popup',
-                popupText: state.items[state.selectedItem].popup,
-            };
-        case 'UPDATE_POPUP_TEXT':
-            return {
-                ...state,
-                popupText: action.value,
-            };
-        case 'UPDATE_POPUP':
-            return {
-                ...state,
-                menu: false,
-                popupText: '',
-                items: state.items.map((item, index) => {
-                    if (state.selectedItem === index) {
-                        return {
-                            ...item,
-                            popup: state.popupText,
-                        };
-                    }
-                    return item;
-                }),
-            };
-        case 'OPEN_POPUP':
-            return {
-                ...state,
-                renderedPopupText: action.popup,
-                popupActive: action.popup.length > 0,
-            };
-        case 'CLOSE_POPUP':
-            return {
-                ...state,
-                popupActive: false,
-            };
-        case 'CLOSE_MENU':
-            return {
-                ...state,
-                menu: false,
-            };
-        case 'CREATE_SQUARE':
-            return {
-                ...state,
-                items: state.items.concat({
-                    type: 'SQUARE',
-                    left: state.menuX,
-                    top: state.menuY,
-                    width: 100,
-                    height: 100,
-                    url: '',
-                    popup: '',
-                }),
-            };
-        case 'CREATE_CIRCLE':
-            return {
-                ...state,
-                items: state.items.concat({
-                    type: 'CIRCLE',
-                    left: state.menuX,
-                    top: state.menuY,
-                    width: 100,
-                    height: 100,
-                    url: '',
-                    popup: '',
-                }),
-            };
-        case 'CREATE_LINE':
-            return {
-                ...state,
-                createLine: true,
-                items: state.items.concat({
-                    type: 'LINE',
-                    left: state.menuX,
-                    top: state.menuY,
-                    width: 0,
-                    height: 0,
-                    x1: 0,
-                    y1: 0,
-                    x2: 0,
-                    y2: 0,
-                }),
-            };                
-        case 'CREATE_IMAGE':
-            return {
-                ...state,
-                items: state.items.concat({
-                    type: 'IMAGE',
-                    left: state.menuX,
-                    top: state.menuY,
-                    width: null,
-                    height: 100,
-                }),
-                selectedItem: state.items.length,
-            };
-        case 'DRAW_LINE':
-            return {
-                ...state,
-                createLine: false,
-                items: state.items.map((item, index) => {
-                    if (action.index === index) {
-                        return {
-                            ...item,
-                            left: action.rleft,
-                            top: action.rtop,
-                            width: action.rwidth,
-                            height: action.rheight,
-                            x1: action.x1,
-                            x2: action.x2,
-                            y1: action.y1,
-                            y2: action.y2,
-                        };
-                    }
-                    return item;
-                })
-            };
-        case 'UPDATE_POSITION':
-            return {
-                ...state,
-                items: state.items.map((item, index) => {
-                    if (action.index === index) {
-                        return {
-                            ...item,
-                            left: action.left,
-                            top: action.top,
-                        };
-                    }
-                    return item;
-                })
-            };
-        case 'UPDATE_VECTOR':
-            return {
-                ...state,
-                resizeVector: {
-                    left: action.rleft,
-                    top: action.rtop,
-                    width: action.rwidth,
-                    height: action.rheight,
-                },
-            };
-        case 'RESIZE_ITEM':
-            return {
-                ...state,
-                selectedItem: action.index,
-                resizingItem: true,
-            };
-        case 'RESIZE_ITEM_UPDATE':
-            if (state.resizingItem) {
-                return {
-                    ...state,
-                    resizingItem: false,
-                    items: state.items.map((item, index) => {
-                        if (state.selectedItem === index) {
-                            return {
-                                ...item,
-                                ...state.resizeVector,
-                            };
-                        }
-                        return item;
-                    })
-                }
-            }
-            return { ...state };
-        case 'DELETE_ITEM':
-            return {
-                ...state,
-                items: state.items.filter((item, index) => index !== action.index),
-            };
-        default:
-            return state;
-    }
+export function Reducer(state: State = InitialState, action: AnyAction): State {
+  console.log(state, action);
+  return Actions(state, action);
 }
 
-export type RootState = ReturnType<typeof reducer>;
+export type RootState = ReturnType<typeof Reducer>;
 
-export const makeStore: MakeStore<State> = (context: Context) => createStore(reducer, initialState, compose(applyMiddleware(thunk)));
+export const makeStore: MakeStore<State> = () =>
+  createStore(Reducer, InitialState, compose(applyMiddleware(thunk)));
 
-export const wrapper = createWrapper<State>(makeStore, {debug: true});
\ No newline at end of file
+export const wrapper = createWrapper(makeStore, { debug: false });
diff --git a/packages/metamaps/redux/ThreeBox.tsx b/packages/metamaps/redux/ThreeBox.tsx
deleted file mode 100644
index cf46f5939..000000000
--- a/packages/metamaps/redux/ThreeBox.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import Box from '3box';
-
-declare const window: any;
-
-export async function Load3BoxUrl(account: string, url: string) {
-    return async function(dispatch: any) {
-        try {
-            dispatch({ type: 'LOADING', value: true });
-
-            const box = await Box.openBox(account, window.ethereum);
-            await box.syncDone;
-            const space = await box.openSpace(url);
-            const data = await space.public.get('items');
-
-            dispatch({ type: 'LOADED_3BOX_URL', data: data ? JSON.parse(data) : [] });
-            dispatch({ type: 'LOADING', value: false });
-        } catch (error) {
-            console.error(error);
-            dispatch({ type: 'LOADED_3BOX_URL', data: [] });
-            dispatch({ type: 'LOADING', value: false });
-        }
-    }
-}
-
-export async function Save3BoxUrl(account: string, url: string, data: any) {
-    return async function(dispatch: any) {
-        try {
-            const box = await Box.openBox(account, window.ethereum);
-            await box.syncDone;
-            const space = await box.openSpace(url);
-            await space.public.set('items', JSON.stringify(data));
-
-            dispatch({ type: 'SAVED_3BOX_URL' });
-        } catch (error) {
-            console.error(error);
-            dispatch({ type: 'SAVED_3BOX_URL_ERROR' });
-        }
-    }
-}
\ No newline at end of file
diff --git a/packages/metamaps/redux/Types.tsx b/packages/metamaps/redux/Types.tsx
deleted file mode 100644
index c33debcfa..000000000
--- a/packages/metamaps/redux/Types.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-export interface Square {
-    type: string;
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-    url: string;
-    popup: string;
-}
-
-export interface Circle {
-    type: string;
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-    url: string;
-    popup: string;
-}
-
-export interface Line {
-    type: string;
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-}
-
-export interface Image {
-    type: string;
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-    url: string;
-    popup: string;
-}
\ No newline at end of file
diff --git a/packages/metamaps/styles/App.tsx b/packages/metamaps/styles/App.tsx
deleted file mode 100644
index 0cc17cc24..000000000
--- a/packages/metamaps/styles/App.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-
-import { BackgroundColor, ButtonColor,PopupColor, WhiteColor } from './Styles'; 
-
-export const App = styled.div`
-    background: ${BackgroundColor};
-    width: 100vw;
-    height: 100vh;
-`;
-
-export const PopupContainer = styled.div`
-    position: fixed;
-    left: calc(50% - 160px);
-    top: 180px;
-    border-radius: 8px;
-    background: ${PopupColor};
-    border: 2px solid ${ButtonColor};
-    z-index: 11;
-
-    width: 320px;
-    padding: 15px;
-
-    transition: left, top, opacity 0.25s cubic-bezier(0.45, 0, 0.55, 1);
-    opacity: 0;
-    &.active { opacity: 1; }
-
-    p {
-        color: ${WhiteColor};
-        padding: 0 0 15px 0;
-    }
-`;
\ No newline at end of file
diff --git a/packages/metamaps/styles/Loading.tsx b/packages/metamaps/styles/Loading.tsx
deleted file mode 100644
index 66d0a7a1a..000000000
--- a/packages/metamaps/styles/Loading.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-import { BackgroundColor } from './Styles'; 
-
-export const LoadingContainer = styled.div`
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1110;
-    background: ${BackgroundColor};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    transition: left, top, opacity 0.25s cubic-bezier(0.45, 0, 0.55, 1);
-    opacity: 0;
-    pointer-events: none;
-`;
\ No newline at end of file
diff --git a/packages/metamaps/styles/Mapping.tsx b/packages/metamaps/styles/Mapping.tsx
deleted file mode 100644
index 04c9fd758..000000000
--- a/packages/metamaps/styles/Mapping.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import styled from 'styled-components';
-
-import { CircleColor,SquareColor } from './Styles';
-
-export const MappingContainer = styled.div`
-    position: relative;
-    width: calc(100vw - 280px);
-    height: 100vh;
-`;
-
-export const SquareContainer = styled.div`
-    position: absolute;
-    background: ${SquareColor};
-    border-radius: 8px;
-    cursor: move;
-`;
-
-export const CircleContainer = styled.div`
-    position: absolute;
-    cursor: move;
-    div.circle {
-        width: 100%;
-        height: 100%;
-        background: ${CircleColor};
-        border-radius: 50%;
-        pointer-events: none;
-    }
-`;
-
-export const LineContainer = styled.svg`
-    position: absolute;
-    cursor: move;
-`;
-
-export const ImageContainer = styled.div`
-    position: absolute;
-    cursor: move;
-
-    img {
-        pointer-events: none;
-        height: 100%;
-    }
-`;
\ No newline at end of file
diff --git a/packages/metamaps/styles/Menu.tsx b/packages/metamaps/styles/Menu.tsx
deleted file mode 100644
index 37f4ef8bf..000000000
--- a/packages/metamaps/styles/Menu.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-
-import { ButtonColor,PopupColor } from './Styles';
-
-export const MenuContainer = styled.div`
-    position: fixed;
-    left: 0;
-    top: 0;
-    border-radius: 8px;
-    background: ${PopupColor};
-    border: 2px solid ${ButtonColor};
-
-    display: flex;
-    align-items: center;
-    padding: 10px 15px 10px 15px;
-    transition: left, top, opacity 0.25s cubic-bezier(0.45, 0, 0.55, 1);
-    opacity: 0;
-    pointer-events: none;
-
-    input[type="file"] { display: none; }
-    input[type="text"] {
-        margin: 0 15px 0 0;
-        padding: 0 10px;
-        border-radius: 5px;
-    }
-
-    &.textarea {
-        display: block;
-
-        textarea {
-            width: 100%;
-            height: 90px;
-            margin: 0 0 15px 0;
-            padding: 5px;
-            border-radius: 5px;
-        }
-    }
-`;
\ No newline at end of file
diff --git a/packages/metamaps/styles/Styles.tsx b/packages/metamaps/styles/Styles.tsx
deleted file mode 100644
index c3c61ce2a..000000000
--- a/packages/metamaps/styles/Styles.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export const BackgroundColor = `#1b0d2a`;
-export const ForegroundColor = `#a5b9f6`;
-export const WhiteColor = `#FFFFFF`;
-
-export const PopupColor = `#261942`;
-export const ButtonColor = `#392373`;
-
-export const SquareColor = `#261942`;
-export const CircleColor = `#5a32e6`;
-export const LineColor = `#b72886`;
\ No newline at end of file
diff --git a/packages/metamaps/styles/ThreeBox.tsx b/packages/metamaps/styles/ThreeBox.tsx
deleted file mode 100644
index 331c63728..000000000
--- a/packages/metamaps/styles/ThreeBox.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-import { PopupColor } from './Styles';
-
-export const ThreeBoxContainer = styled.div`
-    position: fixed;
-    left: 15px;
-    bottom: 15px;
-    z-index: 1111;
-    padding: 10px 15px;
-    background: ${PopupColor};
-    z-index: 11;
-    border-radius: 8px;
-
-    input {
-        margin: 0 15px 0 0;
-        padding: 0 10px;
-        border-radius: 5px;
-    }
-`;
\ No newline at end of file
diff --git a/packages/metamaps/theme/Theme.colors.tsx b/packages/metamaps/theme/Theme.colors.tsx
new file mode 100644
index 000000000..6afd4db13
--- /dev/null
+++ b/packages/metamaps/theme/Theme.colors.tsx
@@ -0,0 +1,20 @@
+export const PrimaryBackground = `radial-gradient(circle, rgba(62,29,98,1) 0%, rgba(62,34,93,1) 50%, rgba(27,13,42,1) 100%)`
+export const Easing = `all 0.25s cubic-bezier(0.65, 0, 0.35, 1)`;
+
+export const BackgroundColor = `#1b0d2a`;
+export const ForegroundColor = `#a5b9f6`;
+export const FontColor = `#FFFFFF`;
+
+export const PopupColor = `#261942`;
+export const ButtonColor = `#392373`;
+
+export const SquareColor = `#261942`;
+export const CircleColor = `#5a32e6`;
+export const LineColor = `#b72886`;
+
+export const AlternateColor = `#31184d`;
+
+export const TitleColor = `linear-gradient(330deg, rgba(33,33,33,1) 0%, rgba(50,50,50,1) 50%, rgba(55,55,55,1) 100%)`;
+
+export const ContextColor = `#1A1A1A`;
+export const ContextBorderColor = `#505050`;
\ No newline at end of file
diff --git a/packages/metamaps/theme/Theme.components.tsx b/packages/metamaps/theme/Theme.components.tsx
new file mode 100644
index 000000000..a2a360a03
--- /dev/null
+++ b/packages/metamaps/theme/Theme.components.tsx
@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+import { FontColor, PrimaryBackground } from './Theme.colors';
+
+export const AppContainer = styled.div`
+  @font-face {
+    font-family: Raleway;
+    src: url('/font/Raleway.normal.ttf');
+  }
+
+  position: relative;
+  font-family: Raleway;
+  background: ${PrimaryBackground};
+  color: ${FontColor};
+  width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  &.map {
+    overflow-y: hidden;
+  }
+
+  video.video {
+    position: absolute;
+    left: 0;
+    top: 0;
+    min-width: 100%;
+    min-height: 100%;
+    pointer-events: none;
+    z-index: 0;
+    object-fit: cover;
+  }
+`;
diff --git a/packages/metamaps/tsconfig.json b/packages/metamaps/tsconfig.json
index 950c49974..35d51eac9 100644
--- a/packages/metamaps/tsconfig.json
+++ b/packages/metamaps/tsconfig.json
@@ -1,17 +1,29 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "es2017"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
+    "skipLibCheck": true,
     "strict": false,
+    "forceConsistentCasingInFileNames": true,
     "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
     "isolatedModules": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "tsBuildInfoFile": "out/.tsbuildinfo",
     "jsx": "preserve"
   },
-  "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }
diff --git a/yarn.lock b/yarn.lock
index 8c11de084..c5892a597 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -29,7 +29,7 @@
     orbit-db-storage-adapter "^0.5.3"
     postmsg-rpc "^2.4.0"
 
-"3box@^1.20.3":
+"3box@^1.20.3", "3box@^1.21.0":
   version "1.22.2"
   resolved "https://registry.yarnpkg.com/3box/-/3box-1.22.2.tgz#9b091129e3abb4528760ddf1bf58a26cf5c892fc"
   integrity sha512-xgq7AF5UYHYdJCEUwZ+dISf7acSu2NPzNQle+0X+mQ6hxrzFeVnBEVOsaaHf1nQy84Sc++0+GdKlj2M8L5kNAw==
@@ -196,6 +196,28 @@
     ts-invariant "^0.4.4"
     tslib "^1.10.0"
 
+"@apollo/react-components@^3.1.5":
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/@apollo/react-components/-/react-components-3.1.5.tgz#040d2f35ce4947747efe16f76d59dcbd797ffdaf"
+  integrity sha512-c82VyUuE9VBnJB7bnX+3dmwpIPMhyjMwyoSLyQWPHxz8jK4ak30XszJtqFf4eC4hwvvLYa+Ou6X73Q8V8e2/jg==
+  dependencies:
+    "@apollo/react-common" "^3.1.4"
+    "@apollo/react-hooks" "^3.1.5"
+    prop-types "^15.7.2"
+    ts-invariant "^0.4.4"
+    tslib "^1.10.0"
+
+"@apollo/react-hoc@^3.1.5":
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/@apollo/react-hoc/-/react-hoc-3.1.5.tgz#6552d2fb4aafc59fdc8f4e353358b98b89cfab6f"
+  integrity sha512-jlZ2pvEnRevLa54H563BU0/xrYSgWQ72GksarxUzCHQW85nmn9wQln0kLBX7Ua7SBt9WgiuYQXQVechaaCulfQ==
+  dependencies:
+    "@apollo/react-common" "^3.1.4"
+    "@apollo/react-components" "^3.1.5"
+    hoist-non-react-statics "^3.3.0"
+    ts-invariant "^0.4.4"
+    tslib "^1.10.0"
+
 "@apollo/react-hooks@^3.1.5":
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/@apollo/react-hooks/-/react-hooks-3.1.5.tgz#7e710be52461255ae7fc0b3b9c2ece64299c10e6"
@@ -213,6 +235,15 @@
   dependencies:
     "@apollo/client" latest
 
+"@apollo/react-ssr@^3.1.5":
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/@apollo/react-ssr/-/react-ssr-3.1.5.tgz#53703cd493afcde567acc6d5512cab03dafce6de"
+  integrity sha512-wuLPkKlctNn3u8EU8rlECyktpOUCeekFfb0KhIKknpGY6Lza2Qu0bThx7D9MIbVEzhKadNNrzLcpk0Y8/5UuWg==
+  dependencies:
+    "@apollo/react-common" "^3.1.4"
+    "@apollo/react-hooks" "^3.1.5"
+    tslib "^1.10.0"
+
 "@ardatan/aggregate-error@0.0.6":
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/@ardatan/aggregate-error/-/aggregate-error-0.0.6.tgz#fe6924771ea40fc98dc7a7045c2e872dc8527609"
@@ -461,6 +492,13 @@
   dependencies:
     "@babel/types" "^7.12.1"
 
+"@babel/helper-module-imports@^7.7.0":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb"
+  integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==
+  dependencies:
+    "@babel/types" "^7.12.5"
+
 "@babel/helper-module-transforms@^7.10.4", "@babel/helper-module-transforms@^7.11.0", "@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.9.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.12.1.tgz#7954fec71f5b32c48e4b303b437c34453fd7247c"
@@ -1608,6 +1646,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.5":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
+  integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/standalone@^7.4.5":
   version "7.12.2"
   resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.12.2.tgz#af1068abf12c1b8296c655fdd4fce093e57f1a73"
@@ -1679,6 +1724,15 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.12.5":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.7.tgz#6039ff1e242640a29452c9ae572162ec9a8f5d13"
+  integrity sha512-MNyI92qZq6jrQkXvtIiykvl4WtoRrVV9MPn+ZfsoEENjiWcBQ3ZSHrkxnJWgWtLX3XXqX5hrSQ+X69wkmesXuQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
 "@base2/pretty-print-object@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz#860ce718b0b73f4009e153541faff2cb6b85d047"
@@ -1695,6 +1749,17 @@
     "@chakra-ui/icon" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/accordion@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/accordion/-/accordion-1.0.2.tgz#efc55327f10dbfcca527c1eec590d44c09e8f14c"
+  integrity sha512-jhR79i3J6JTNLqk4ssuoU8ZIm7c5PVIRqDzX4iduoQNzV8zKfZ/DsnMMAUUDOw/9W7Izqf3HbaqrAZaJx37mxg==
+  dependencies:
+    "@chakra-ui/descendant" "1.0.1"
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/icon" "1.0.1"
+    "@chakra-ui/transition" "1.0.2"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/alert@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/alert/-/alert-1.0.0-rc.5.tgz#94ea4b4eeac5c199e2671eaa807bf36b85b09612"
@@ -1703,6 +1768,14 @@
     "@chakra-ui/icon" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/alert@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/alert/-/alert-1.0.1.tgz#596877b3e42cab666bd6ce600786df38dc8b1162"
+  integrity sha512-2MBOxLdHm/b9xESE/pcxGhp08pt8ZPqN6bqAB1r7WovIi3RdLbDC6mYxViSgXNRzwYaTkYXSIRpEQ7PN77BIYw==
+  dependencies:
+    "@chakra-ui/icon" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/avatar@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/avatar/-/avatar-1.0.0-rc.5.tgz#80ecfb59b1f739d310c335ae625577ed6def73d3"
@@ -1711,6 +1784,14 @@
     "@chakra-ui/image" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/avatar@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/avatar/-/avatar-1.0.1.tgz#27450e78d593ff86f92d242ddeb66a25a92a6ea3"
+  integrity sha512-4Nj/kDlsaXHtmNYTNnn6QkWi96UZSwM09lSTKe/MX/YGyedCc5F1fhQclu9CO1VzLKUOwvHsRruMMu4zUoHiFA==
+  dependencies:
+    "@chakra-ui/image" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/breadcrumb@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/breadcrumb/-/breadcrumb-1.0.0-rc.5.tgz#a4f0b734674faa33ccccf3a2d73286c0ecaa3408"
@@ -1718,6 +1799,13 @@
   dependencies:
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/breadcrumb@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/breadcrumb/-/breadcrumb-1.0.1.tgz#6cab6b32115ea6af35c7bce189fbf2cf78036d6f"
+  integrity sha512-2bcPQaDw3yhVdWTipqjkvgg0OpTs75j3sCRejZgJPk6mnA7FE4RgQ7ToUp+dsd60A+j8nghcXNgnxGF90ltauQ==
+  dependencies:
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/button@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/button/-/button-1.0.0-rc.5.tgz#59e247dc6fae2bffafd876b3efe29bc68ab5567e"
@@ -1726,6 +1814,14 @@
     "@chakra-ui/spinner" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/button@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/button/-/button-1.0.1.tgz#370d4080e9b62072b1f30fb765a8eb29a3c114e3"
+  integrity sha512-O5yhhiSy5UHYJvzhFVUWGxpTSR/mdRQrSWSj7rSal6AE5LagW+vgHR2m5qt1/2asDOAvzN+VvmJRLPosFY6wuA==
+  dependencies:
+    "@chakra-ui/spinner" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/checkbox@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/checkbox/-/checkbox-1.0.0-rc.5.tgz#b8fa8b33b2f01f05001fba56281b45e289791e76"
@@ -1736,6 +1832,15 @@
     "@chakra-ui/utils" "1.0.0-rc.5"
     "@chakra-ui/visually-hidden" "1.0.0-rc.5"
 
+"@chakra-ui/checkbox@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/checkbox/-/checkbox-1.0.1.tgz#d6005a9552dcb1b3180a2c76a78b3c518ca6f22f"
+  integrity sha512-kngKZ0a0/tZ85SdUQDZ30lFwYyYlDRuXUP54oJgEKkyvjJy9DKAxms4HjnkdNMNXX/KCyBMpQ6Z7ZtKcWz083g==
+  dependencies:
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+    "@chakra-ui/visually-hidden" "1.0.1"
+
 "@chakra-ui/clickable@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/clickable/-/clickable-1.0.0-rc.5.tgz#93445e0fcba5943c48f4e95ff833a0334225ac57"
@@ -1743,6 +1848,13 @@
   dependencies:
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/clickable@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/clickable/-/clickable-1.0.1.tgz#c2dd0828239e26b5bbb577d5e64ef577e8f60c14"
+  integrity sha512-qu2/+zMbV5BIqAOW5I60uyRTNiczYJde/usrzmkoRP7cve1MvEPvNPRt0m7fgMPVvOYnMovi3vWAR5yjDSgMjQ==
+  dependencies:
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/close-button@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/close-button/-/close-button-1.0.0-rc.5.tgz#17828e7cb4d8d2e1add9f55426aa9cb12953f90b"
@@ -1751,6 +1863,14 @@
     "@chakra-ui/icon" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/close-button@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/close-button/-/close-button-1.0.1.tgz#3d3ec16d5bf46641be8a673c7426d64d69960c95"
+  integrity sha512-A1c6wJRg/QGLs9BA4uNp20Rr2fG02lnauV6A48C6iI9AKa90JYqIe8x/BBVSnD85e6+kVDExkAdCHgXUJgfUWA==
+  dependencies:
+    "@chakra-ui/icon" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/collapse@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/collapse/-/collapse-1.0.0-rc.5.tgz#3e9b07e23c317aca51054df794ebeb0c7c566d23"
@@ -1767,6 +1887,14 @@
     "@chakra-ui/hooks" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/color-mode@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/color-mode/-/color-mode-1.0.1.tgz#c6ef751be5cf057fe534850cbacac02760250821"
+  integrity sha512-iGZMxo3f+XMM5oQC7sHomNFicq22IRUmr2H/ErnU7nSQ5jwGpp9u//Q5V2CmFvg0ffmm8h6wbkD8ntkvNb5ONw==
+  dependencies:
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/control-box@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/control-box/-/control-box-1.0.0-rc.5.tgz#90e4c151f5f5f0fdf1954d0e3240dd3c2ca0a9e1"
@@ -1774,27 +1902,12 @@
   dependencies:
     "@chakra-ui/utils" "1.0.0-rc.5"
 
-"@chakra-ui/core@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/core/-/core-0.8.0.tgz#a377286becd86008448ec8cf29ceb8fc301ac2dc"
-  integrity sha512-il1I1nEWOmWJSspnC+WyArLHbHvs82hvKTNDd24wr6spa/7v2jaXFZeWDNenY35ay1NHV7Ya2StcBwQRGHMWYA==
+"@chakra-ui/control-box@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/control-box/-/control-box-1.0.1.tgz#3b40463069b2818d5571ca3821735d21e852eb70"
+  integrity sha512-RlMDTp0qTeEnuQQeOk2zgi7/CKQpKfpgASzQtg2gH5Es7YBTA/Zc13PfkN+VHliY7vuJlXIufnmelwwcC82wUw==
   dependencies:
-    "@reach/auto-id" "0.10.2"
-    "@styled-system/css" "5.1.5"
-    "@styled-system/should-forward-prop" "5.1.5"
-    "@types/styled-system" "5.1.9"
-    aria-hidden "^1.1.1"
-    body-scroll-lock "^3.0.1"
-    color "3.1.2"
-    copy-to-clipboard "3.3.1"
-    exenv "^1.2.2"
-    popper.js "^1.15.0"
-    react-animate-height "2.0.21"
-    react-focus-lock "^2.2.1"
-    react-spring "^8.0.27"
-    styled-system "5.1.5"
-    toasted-notes "3.2.0"
-    use-dark-mode "2.3.1"
+    "@chakra-ui/utils" "1.0.1"
 
 "@chakra-ui/core@next":
   version "1.0.0-rc.5"
@@ -1856,6 +1969,19 @@
     "@chakra-ui/hooks" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/counter@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/counter/-/counter-1.0.1.tgz#219520e30780e365bb7b50155bb5fdbfc21fec9d"
+  integrity sha512-HFWRsIWxSZXJFg9865bAWKyQGzY8SjiZbPRW6/IzPS4aoEY7CdWN3X5uAuQZDJnIUOXuLcH13S0rt9k8aXqMSA==
+  dependencies:
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
+"@chakra-ui/css-reset@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/css-reset/-/css-reset-1.0.0.tgz#8395921b35ef27bee0579a4d730c5ab7f7b39734"
+  integrity sha512-UaPsImGHvCgFO3ayp6Ugafu2/3/EG8wlW/8Y9Ihfk1UFv8cpV+3BfWKmuZ7IcmxcBL9dkP6E8p3/M1T0FB92hg==
+
 "@chakra-ui/css-reset@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/css-reset/-/css-reset-1.0.0-rc.5.tgz#69f8529999ce9d539a9a1e2252b42f3b861dffdf"
@@ -1868,6 +1994,13 @@
   dependencies:
     "@chakra-ui/hooks" "1.0.0-rc.5"
 
+"@chakra-ui/descendant@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/descendant/-/descendant-1.0.1.tgz#c4620308853f8eae3c48574fbcdb9efbcc182f17"
+  integrity sha512-1Pkud18gYGtRGobdMNRhWEg4GTQiZUs38dMEktLynTR0F8Cjwqw12ncWCKfhxaXp0XTkWM21cwcB6QDQtFaH9Q==
+  dependencies:
+    "@chakra-ui/hooks" "1.0.1"
+
 "@chakra-ui/drawer@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/drawer/-/drawer-1.0.0-rc.5.tgz#a59dd061c2e272e044e1a6c6eb6ebfa5f00adf08"
@@ -1885,6 +2018,14 @@
     "@chakra-ui/hooks" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/editable@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/editable/-/editable-1.0.1.tgz#d1370e67a3eadcba21b19e0a12ceab4ff3df0b32"
+  integrity sha512-JuK3Al2jMZOxlw3CwJfMeIxIUYPzz8Scs+P5hm99+/NWsQwO2qitHezvPLaPpf1/kK+8bPqAxRPI9iNZOnCgYA==
+  dependencies:
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/focus-lock@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/focus-lock/-/focus-lock-1.0.0-rc.5.tgz#15413b67ceaef5e5d8e51b4b9bfc514053858cfe"
@@ -1893,6 +2034,14 @@
     "@chakra-ui/utils" "1.0.0-rc.5"
     react-focus-lock "2.4.1"
 
+"@chakra-ui/focus-lock@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/focus-lock/-/focus-lock-1.0.1.tgz#e1da80038237fbdcfae54831966f7eaac79ce44d"
+  integrity sha512-VAhwBWusC6IxU8SkVfM6vE1gDbRV4nNhdPO5VWn+tH+xOhWy3Nydcaz/vq5MS9ir9qtlE/Pxv29q9QgKO+ZOaw==
+  dependencies:
+    "@chakra-ui/utils" "1.0.1"
+    react-focus-lock "2.4.1"
+
 "@chakra-ui/form-control@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/form-control/-/form-control-1.0.0-rc.5.tgz#615da70a2708b562d442f93b80ee63bd1b9db5dd"
@@ -1902,6 +2051,15 @@
     "@chakra-ui/icon" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/form-control@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/form-control/-/form-control-1.0.2.tgz#821879bd1d2bc09e2e39b18c1ea862506697e869"
+  integrity sha512-PEfhWbtfw1lLbMsVeCO0urZYlo198d+6Py7nA3WLppqR7nma8t1rYUSAtDVF6cMnNdIV7SeDNhm3Rk1mEDJNlg==
+  dependencies:
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/icon" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/hooks@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-1.0.0-rc.5.tgz#a610072581b8cb75c70e2ce7b92905738b6893cb"
@@ -1912,6 +2070,16 @@
     compute-scroll-into-view "1.0.14"
     copy-to-clipboard "3.3.1"
 
+"@chakra-ui/hooks@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-1.0.1.tgz#4754c82b4b51d66abc52146e96c4d3390de7ecd3"
+  integrity sha512-s4BUPss+dLbLo9NoDkvknPaBCymNdGlOsn31Jj1P/b0Yahm//zAvcnkhND9EuVdytK+E00ThZ10IhTOknqPMCQ==
+  dependencies:
+    "@chakra-ui/utils" "1.0.1"
+    "@reach/auto-id" "0.11.0"
+    compute-scroll-into-view "1.0.14"
+    copy-to-clipboard "3.3.1"
+
 "@chakra-ui/icon@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-1.0.0-rc.5.tgz#2abbaad9b3abeb0a577458d132c2a6cb64b9c61b"
@@ -1919,6 +2087,13 @@
   dependencies:
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/icon@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-1.0.1.tgz#c0b5e174f3fe5d9c638d9e854139d4482bd79a6f"
+  integrity sha512-yBPk3TPoCwxoFetNUJTz8PoL+EAEPQYE5lS3yU8Tz7y8/ZEOY5OwkmMV5arfiIRmfuNvIGnNpmDH9srsPtpFyg==
+  dependencies:
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/icons@next":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-1.0.0-rc.5.tgz#3bd4cfdffae58bdea37a8082ef2f26b97e3b2c4e"
@@ -1935,6 +2110,14 @@
     "@chakra-ui/hooks" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/image@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-1.0.1.tgz#6766a468a0d0ee8cf72b940d1c0b8f939e8fe9ad"
+  integrity sha512-wW6go//sWtmtjgnH+WLlYZ2pI5boAjqbzpnB5peD8+3+pg7r+KOA6vosdfPew6LqYC6NjJ0LiQc3hgd2v+XJEw==
+  dependencies:
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/input@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/input/-/input-1.0.0-rc.5.tgz#56b72fe3889e9b34f0f974de8886cb64324a5a77"
@@ -1943,6 +2126,14 @@
     "@chakra-ui/form-control" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/input@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/input/-/input-1.0.2.tgz#64da29efa7ddcce8a07c4a24d0257123b37b1500"
+  integrity sha512-ph+y9tsOIwtEuwzZa6lNQ+vspFUPhDNH03sLZwOZNEXoMIN0yzDB5tfrptIzcRwUyF3HFioWX99SH7UgQc/QCg==
+  dependencies:
+    "@chakra-ui/form-control" "1.0.2"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/layout@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/layout/-/layout-1.0.0-rc.5.tgz#0ce71537f6c43bfa1a42c64872b3f903c37dbb3d"
@@ -1951,11 +2142,26 @@
     "@chakra-ui/icon" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/layout@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/layout/-/layout-1.1.0.tgz#a90a74f0a5b3a6f72cd80f3168153519c53ef77e"
+  integrity sha512-sYRcUjG5cokK4HFYSZAVjRgNrlgnHPwGIez293HT3LIuY+6VuNiYeRcJ+dh3l2gWf1ziSVTZjQN/my5ip5dbPg==
+  dependencies:
+    "@chakra-ui/icon" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/live-region@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/live-region/-/live-region-1.0.0-rc.5.tgz#7a3cdf8efc561ca74eb808627a93cbd807177368"
   integrity sha512-k90pMnoUCT73D3SahBKv4xdW0P4uhUrAQ/GW7OXC9W3hTS41DVV6g8EvGoOKVkh16LJhpbM35VbEBwS07mN/0A==
 
+"@chakra-ui/live-region@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/live-region/-/live-region-1.0.1.tgz#1f597c9fab7e2e427f4f48d042fcde57841a43f6"
+  integrity sha512-MH0BmpPzLMtmEAXH3xtWyHqsetDmChnMKVxfya8kFkwDJ5c5pl3XaWWiH1BmhTvYBjJdqDzEmKN4f35uUiX3RA==
+  dependencies:
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/media-query@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/media-query/-/media-query-1.0.0-rc.5.tgz#3943e697efe8a1b1a2539d02b430e27e66a4767b"
@@ -1964,6 +2170,13 @@
     "@chakra-ui/utils" "1.0.0-rc.5"
     calculate-measurement "0.1.0"
 
+"@chakra-ui/media-query@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/media-query/-/media-query-1.0.1.tgz#374b1a7ee1a89358ff2881257669da91e16098e2"
+  integrity sha512-uiCcQ2B+IseykUGgiYNxsS3xMBCLoquVCgIV2Vrw0n8USx34vO282uXapeTGDNqLpGHGEihm5+Z/YqE0BiD74w==
+  dependencies:
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/menu@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/menu/-/menu-1.0.0-rc.5.tgz#2c2b74e5dcaf666d91f2652cf276e8c0730182e8"
@@ -1977,6 +2190,18 @@
     "@chakra-ui/utils" "1.0.0-rc.5"
     "@react-aria/interactions" "3.2.0"
 
+"@chakra-ui/menu@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/menu/-/menu-1.0.2.tgz#d20a764f86468c1828e1b508a6c084023a072a6d"
+  integrity sha512-WzHRmGZhjEf6HgoHRdjBmGFslVOieQ13uhVnZJWKQM9y7bBt94mC4K9GacTqiv7+JxiEgvCcjkxQ7Ik3EaiWxQ==
+  dependencies:
+    "@chakra-ui/clickable" "1.0.1"
+    "@chakra-ui/descendant" "1.0.1"
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/popper" "1.0.1"
+    "@chakra-ui/transition" "1.0.2"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/modal@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/modal/-/modal-1.0.0-rc.5.tgz#73642d9862ab1eacb4eb7963d6e6d09d6c622962"
@@ -1991,6 +2216,20 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.4.0"
 
+"@chakra-ui/modal@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/modal/-/modal-1.2.0.tgz#80db74aed8eb539c52182e36d080cd4478f0779a"
+  integrity sha512-pyF1IITwKOuiGkRrqJC4FYT4k/jIjhFWsWgPC7gfm9gBZISJGL3EzxvqLSNF+QkGB3lN/fjIU1F+gebBeqijZw==
+  dependencies:
+    "@chakra-ui/close-button" "1.0.1"
+    "@chakra-ui/focus-lock" "1.0.1"
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/portal" "1.0.1"
+    "@chakra-ui/transition" "1.0.2"
+    "@chakra-ui/utils" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.4.0"
+
 "@chakra-ui/number-input@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/number-input/-/number-input-1.0.0-rc.5.tgz#1a262f20a48e51d1a0b55640cadc4e7246f84d7a"
@@ -2001,6 +2240,17 @@
     "@chakra-ui/icon" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/number-input@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/number-input/-/number-input-1.0.2.tgz#a1d93f489de9eabe837281631df52a3738df8ea5"
+  integrity sha512-afLwI7lcfCxntCPSYSaaC7RTWypFO0eXQNL9RXkL7IGhDIN01X+3hjpmXU6BD3Hgb9GvPL7kECbWs9lX10351Q==
+  dependencies:
+    "@chakra-ui/counter" "1.0.1"
+    "@chakra-ui/form-control" "1.0.2"
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/icon" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/pin-input@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/pin-input/-/pin-input-1.0.0-rc.5.tgz#ca017f1c5ecbb96a0d857b01951f5e899ecb250d"
@@ -2010,6 +2260,15 @@
     "@chakra-ui/hooks" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/pin-input@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/pin-input/-/pin-input-1.0.1.tgz#ad53d52aebed57b9b00f93d1142820330863dafe"
+  integrity sha512-z7zaZPyc+CvAOC7urVk9vg18ay5Wm4yzKcMKXcuSxuzzlEexdysmBwLAO+okbWubO/LP2ec9i7i2QfCq9Ty4xQ==
+  dependencies:
+    "@chakra-ui/descendant" "1.0.1"
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/popover@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/popover/-/popover-1.0.0-rc.5.tgz#949b365b5ff6837a55592aeb894b1da875937796"
@@ -2023,6 +2282,18 @@
     "@chakra-ui/utils" "1.0.0-rc.5"
     "@react-aria/interactions" "3.2.0"
 
+"@chakra-ui/popover@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/popover/-/popover-1.0.2.tgz#b5884da067f2e53f1ee1e7d5290fccbc84861a2f"
+  integrity sha512-7C0FGZOcNIoFSgyjp25ErAuvjTDM9apV8gsz+stQG4iibP+0cDBly1NmrT5iuPoEW0LMUV/YwfyW8qUTWRByPg==
+  dependencies:
+    "@chakra-ui/close-button" "1.0.1"
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/popper" "1.0.1"
+    "@chakra-ui/portal" "1.0.1"
+    "@chakra-ui/transition" "1.0.2"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/popper@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/popper/-/popper-1.0.0-rc.5.tgz#5e5ab0434921f045fcca98da761e20455510f141"
@@ -2030,6 +2301,16 @@
   dependencies:
     "@popperjs/core" "2.4.4"
 
+"@chakra-ui/popper@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/popper/-/popper-1.0.1.tgz#4d45ed1186c3db427d0c4dd4c43b303996e717c2"
+  integrity sha512-2PJeVl9KgIQpmu2r6XKDumCELBeYdgugX1GSAXPK6lvd7tO+LiFhUl46W3k4qmzi79MmXQ3e/VLw158iTUDTeg==
+  dependencies:
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+    "@popperjs/core" "2.4.4"
+    dequal "2.0.2"
+
 "@chakra-ui/portal@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/portal/-/portal-1.0.0-rc.5.tgz#9936c7db472fc4b6e2b68aa7efa0a4f0920a28a8"
@@ -2038,6 +2319,14 @@
     "@chakra-ui/hooks" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/portal@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/portal/-/portal-1.0.1.tgz#6c1aa0015ce6387a01a5a40f2d7e2fa744b8f534"
+  integrity sha512-yHB3OX6T9GK0XoCZaZkRqIct/WrH64PrAMNnFDw9VNG9ZnEIr8RGenD0kt1G9grjB1SI58emQr5BreKUAAH2Pg==
+  dependencies:
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/progress@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/progress/-/progress-1.0.0-rc.5.tgz#cecbc6da18dfb91cb962d4879e1f30fbe9265632"
@@ -2046,6 +2335,14 @@
     "@chakra-ui/theme-tools" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/progress@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/progress/-/progress-1.0.1.tgz#3066d3fcdade8a34dc50712c9480ab75a8e789c5"
+  integrity sha512-G9LeT8Pj/UqaZ2KwtaLH8M8pAvR1bXREEetuQl5qaICxL0Ndyr2xeYd/Cpk6bKUXw5t73kLVZnecXuJJ0qDhKA==
+  dependencies:
+    "@chakra-ui/theme-tools" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/radio@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/radio/-/radio-1.0.0-rc.5.tgz#3915785c8eb5a9183c72ede1248da51f6b5d7c95"
@@ -2055,6 +2352,66 @@
     "@chakra-ui/utils" "1.0.0-rc.5"
     "@chakra-ui/visually-hidden" "1.0.0-rc.5"
 
+"@chakra-ui/radio@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/radio/-/radio-1.0.2.tgz#cfbd117e1adcec18de5827bba876c921e4b61467"
+  integrity sha512-ZOmp18zBzkcbPqdafNHZHodpa8evuH+4vbRbkgLGI+w+zS0uE1xBHpl1J97IzbQsWCFb5jG9gnGjRkZxqekwFA==
+  dependencies:
+    "@chakra-ui/form-control" "1.0.2"
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+    "@chakra-ui/visually-hidden" "1.0.1"
+
+"@chakra-ui/react@^1.0.1":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react/-/react-1.0.2.tgz#88ff0f36c28f5157b2014d594fb5a21e98bfdef1"
+  integrity sha512-/ogUAIBA2ewIVVFSL4OoF9BTmPBygZfXT7ly/XubrbStgFai8NNMsLQYldIh1/14hAWVa42YVDQHKcAzJm8dLQ==
+  dependencies:
+    "@chakra-ui/accordion" "1.0.2"
+    "@chakra-ui/alert" "1.0.1"
+    "@chakra-ui/avatar" "1.0.1"
+    "@chakra-ui/breadcrumb" "1.0.1"
+    "@chakra-ui/button" "1.0.1"
+    "@chakra-ui/checkbox" "1.0.1"
+    "@chakra-ui/close-button" "1.0.1"
+    "@chakra-ui/control-box" "1.0.1"
+    "@chakra-ui/counter" "1.0.1"
+    "@chakra-ui/css-reset" "1.0.0"
+    "@chakra-ui/editable" "1.0.1"
+    "@chakra-ui/form-control" "1.0.2"
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/icon" "1.0.1"
+    "@chakra-ui/image" "1.0.1"
+    "@chakra-ui/input" "1.0.2"
+    "@chakra-ui/layout" "1.1.0"
+    "@chakra-ui/live-region" "1.0.1"
+    "@chakra-ui/media-query" "1.0.1"
+    "@chakra-ui/menu" "1.0.2"
+    "@chakra-ui/modal" "1.2.0"
+    "@chakra-ui/number-input" "1.0.2"
+    "@chakra-ui/pin-input" "1.0.1"
+    "@chakra-ui/popover" "1.0.2"
+    "@chakra-ui/popper" "1.0.1"
+    "@chakra-ui/portal" "1.0.1"
+    "@chakra-ui/progress" "1.0.1"
+    "@chakra-ui/radio" "1.0.2"
+    "@chakra-ui/select" "1.0.2"
+    "@chakra-ui/skeleton" "1.0.1"
+    "@chakra-ui/slider" "1.0.1"
+    "@chakra-ui/spinner" "1.0.1"
+    "@chakra-ui/stat" "1.0.1"
+    "@chakra-ui/switch" "1.0.1"
+    "@chakra-ui/system" "1.0.1"
+    "@chakra-ui/tabs" "1.0.1"
+    "@chakra-ui/tag" "1.0.1"
+    "@chakra-ui/textarea" "1.0.2"
+    "@chakra-ui/theme" "1.2.0"
+    "@chakra-ui/toast" "1.1.0"
+    "@chakra-ui/tooltip" "1.0.1"
+    "@chakra-ui/transition" "1.0.2"
+    "@chakra-ui/utils" "1.0.1"
+    "@chakra-ui/visually-hidden" "1.0.1"
+
 "@chakra-ui/select@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/select/-/select-1.0.0-rc.5.tgz#a25fba6332eabc068a52bd2893ed57fddf404706"
@@ -2063,6 +2420,14 @@
     "@chakra-ui/form-control" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/select@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/select/-/select-1.0.2.tgz#165642292b30d2a2d2088cfb79182c2e1f65ad12"
+  integrity sha512-JtyyEuEp6d5ZHvBxJBZOwGTPhPTgyGda+w1S81071Nfb93PHKyuqUHhRyYBGWVDIctTXqKaoD9csoxalMXbiNw==
+  dependencies:
+    "@chakra-ui/form-control" "1.0.2"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/skeleton@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/skeleton/-/skeleton-1.0.0-rc.5.tgz#d1be272e0c7cef146e9e013b2f8a7f0d85c1af34"
@@ -2072,6 +2437,16 @@
     "@chakra-ui/system" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/skeleton@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/skeleton/-/skeleton-1.0.1.tgz#44ce397a767ccb9400adedb5ca0b172afd766949"
+  integrity sha512-R/kFxDwYwLLatd+w9l0iKPCc3eLcYCcno64+zxhY+5q4Ug/xOeYcYL0RLySbIn/n/9/iOL0clTo0E+v2qKvo4w==
+  dependencies:
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/media-query" "1.0.1"
+    "@chakra-ui/system" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/slider@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/slider/-/slider-1.0.0-rc.5.tgz#5d34f0fffa7e9dcf3ef3a0c2a871c5e4912c0ddf"
@@ -2080,6 +2455,14 @@
     "@chakra-ui/hooks" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/slider@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/slider/-/slider-1.0.1.tgz#38a95081a0c2d1bdbc7166ed8ac2035a38207ad2"
+  integrity sha512-9q4V4p/P/5azVNOxQ+ZbHCLbHHcxS82TWGd5wzcodvkx+v4n+5chboRjZrwJ157Rr0ikLZsmoKvW0mnLH8Qn0g==
+  dependencies:
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/spinner@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/spinner/-/spinner-1.0.0-rc.5.tgz#426e2d4ed1f5b64860780b5b3bbdf48b43dfa92a"
@@ -2088,6 +2471,14 @@
     "@chakra-ui/utils" "1.0.0-rc.5"
     "@chakra-ui/visually-hidden" "1.0.0-rc.5"
 
+"@chakra-ui/spinner@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/spinner/-/spinner-1.0.1.tgz#d7927e7e1fcdf71a46e94cf08ba7ae1609639c8e"
+  integrity sha512-Mdf7LG9lzsm5E/e6aG1f0YrXZTeNqlColiE+5iC/AExLBnfzzbga+fgu5az4E6p6lFqbDFO3Riz7CjuJL5RO5w==
+  dependencies:
+    "@chakra-ui/utils" "1.0.1"
+    "@chakra-ui/visually-hidden" "1.0.1"
+
 "@chakra-ui/stat@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/stat/-/stat-1.0.0-rc.5.tgz#ff853d7f99ce427a395cf40cd3f6bddcabfc5f53"
@@ -2097,6 +2488,15 @@
     "@chakra-ui/utils" "1.0.0-rc.5"
     "@chakra-ui/visually-hidden" "1.0.0-rc.5"
 
+"@chakra-ui/stat@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/stat/-/stat-1.0.1.tgz#b829d3f06f891c6aefc79202d624688451a22e75"
+  integrity sha512-Jya/dodkPj7EbSGlVtc+ssUiIU1duoVimJ9PJ697VjEOq1nOieWoienajgzboz9BZWJPOZ5w8zEp6jEwCYWzAg==
+  dependencies:
+    "@chakra-ui/icon" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+    "@chakra-ui/visually-hidden" "1.0.1"
+
 "@chakra-ui/styled-system@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-1.0.0-rc.5.tgz#2e0486fd567905df26a93b8f89d2dc7815ef38e9"
@@ -2107,6 +2507,16 @@
     css-get-unit "1.0.1"
     csstype "3.0.3"
 
+"@chakra-ui/styled-system@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-1.1.0.tgz#c0f5c104404ec500b42eed7aea9d45d93ca9540f"
+  integrity sha512-7TxpFV3GWF0Y3dDzGkBjPs5LNOzm2Xz1P5lEz9Ytm9OMbnOZLa9O+B2WszhBuTrLpARsCf7ymdSDmqG/+R6mFA==
+  dependencies:
+    "@chakra-ui/utils" "1.0.1"
+    "@styled-system/core" "5.1.2"
+    css-get-unit "1.0.1"
+    csstype "3.0.3"
+
 "@chakra-ui/switch@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/switch/-/switch-1.0.0-rc.5.tgz#891d65f8da043048fe23c45b670d0d299fa62c8c"
@@ -2115,6 +2525,14 @@
     "@chakra-ui/checkbox" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/switch@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/switch/-/switch-1.0.1.tgz#64cb446e2e16985f53ca8fb7c0ac35c93e4f1f8f"
+  integrity sha512-bJZiqqxzBVaSy6FKCxYXBj7AKmjRDRNd0cZ4sQmmL5Y2aJ7M/RQ8c3FsVrC4hiVqElqFws1MaOktqI28jw4J1g==
+  dependencies:
+    "@chakra-ui/checkbox" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/system@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-1.0.0-rc.5.tgz#0019103bee78bd5f6380f24926967ca8c4dd8e7c"
@@ -2127,6 +2545,16 @@
     "@emotion/styled" "10.0.27"
     react-fast-compare "3.2.0"
 
+"@chakra-ui/system@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-1.0.1.tgz#f5d7dcd8911ebbfeefc3522d22905f19e7137b86"
+  integrity sha512-xN5f4Bv8x9Gbb0AxWQcSAcr3YF5JWH7DynVUpBl47USdaLZGLEEJ3oNTBeatVnGAEuYz8iO6cRz87gYDwXN9Ag==
+  dependencies:
+    "@chakra-ui/color-mode" "1.0.1"
+    "@chakra-ui/styled-system" "1.1.0"
+    "@chakra-ui/utils" "1.0.1"
+    react-fast-compare "3.2.0"
+
 "@chakra-ui/tabs@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/tabs/-/tabs-1.0.0-rc.5.tgz#c0dcf0793ba9d9e633edd4f8b7d6b3a2f0c3075c"
@@ -2137,6 +2565,16 @@
     "@chakra-ui/hooks" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/tabs@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tabs/-/tabs-1.0.1.tgz#0a50225786975fdd22d21de40598e40bb77f9619"
+  integrity sha512-iUVEHRw2wb+aav7DB2gdTPa3TbQYLemFK9krH31C0trLMK90QDMtgG1JfVUdQMg33d93dCG6+po2z77mVBanOw==
+  dependencies:
+    "@chakra-ui/clickable" "1.0.1"
+    "@chakra-ui/descendant" "1.0.1"
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/tag@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/tag/-/tag-1.0.0-rc.5.tgz#1085aa9fdc10a46dd552ed3e3d19d3b67991f761"
@@ -2145,6 +2583,14 @@
     "@chakra-ui/icon" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/tag@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tag/-/tag-1.0.1.tgz#d3b663ec7bc0e3cdac37dc0d1da0b041704bd5ce"
+  integrity sha512-oIvzvna9pbQ4rKkzSNqlzE71m5JjSPzo4NHeVKCMP9FwYVEWPNNEp6PqLLxmBl8K9OZe4sMaYcHwDjW2VFlo8Q==
+  dependencies:
+    "@chakra-ui/icon" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/textarea@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/textarea/-/textarea-1.0.0-rc.5.tgz#c8e856ca4033cea5a435162be529a91abcb66fac"
@@ -2153,6 +2599,14 @@
     "@chakra-ui/form-control" "1.0.0-rc.5"
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/textarea@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/textarea/-/textarea-1.0.2.tgz#070b58c772a164551b9840775b78c680c2b12c97"
+  integrity sha512-9c3Xt0VUq0ojB34zSb8Qv6egMRegYVaA6Ufj5OXqrxabfpysP96M5W47enflcFYBAYOE8ggYw0IMMSfvqgcRjw==
+  dependencies:
+    "@chakra-ui/form-control" "1.0.2"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/theme-tools@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-1.0.0-rc.5.tgz#f709ec136b333373d12c9ee6b72a4190855c2eba"
@@ -2162,6 +2616,15 @@
     "@types/tinycolor2" "1.4.2"
     tinycolor2 "1.4.1"
 
+"@chakra-ui/theme-tools@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-1.0.1.tgz#f13e009c2b9d2e1b990854d910867cded04ed072"
+  integrity sha512-bBcaf0Zi2NNRFCs4QLL4XWIUSI1n5wMuBL6q9dAOkdrU/J9OCX0Xub86VVeQgrYYmUOMpNbaaIb1QNMCXNiJHw==
+  dependencies:
+    "@chakra-ui/utils" "1.0.1"
+    "@types/tinycolor2" "1.4.2"
+    tinycolor2 "1.4.2"
+
 "@chakra-ui/theme@1.0.0-rc.5", "@chakra-ui/theme@next":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-1.0.0-rc.5.tgz#fd275f770d190cdc52018fad6071fefa1360df65"
@@ -2169,6 +2632,13 @@
   dependencies:
     "@chakra-ui/theme-tools" "1.0.0-rc.5"
 
+"@chakra-ui/theme@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-1.2.0.tgz#4cf3337fc9389fd76ed23a8027196efe2d48a4cf"
+  integrity sha512-IcSfQPpBK9tkUmeBUF2eu5AVa3bH4DkbPlmaPwggDoQmWgcRJxyaPP1zvqJ++XAgeqXxdEKkOJuSirrmSPPbfg==
+  dependencies:
+    "@chakra-ui/theme-tools" "1.0.1"
+
 "@chakra-ui/toast@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/toast/-/toast-1.0.0-rc.5.tgz#227451005c0a39397f77dece2e5690cc118b2f36"
@@ -2182,6 +2652,19 @@
     "@reach/alert" "0.11.0"
     "@reach/rect" "0.11.0"
 
+"@chakra-ui/toast@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/toast/-/toast-1.1.0.tgz#09bd795378cd77069f634dd2f9efd8e5cffd224d"
+  integrity sha512-jC0O25a+mgF3ybsO6b2Qj2m9znrViWbxq9GucOE7RQtMmfQ2Q1KNQ/Ri+wbNNHsZreC4pCXkQKv3S+cXunSk2g==
+  dependencies:
+    "@chakra-ui/alert" "1.0.1"
+    "@chakra-ui/close-button" "1.0.1"
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/theme" "1.2.0"
+    "@chakra-ui/transition" "1.0.2"
+    "@chakra-ui/utils" "1.0.1"
+    "@reach/alert" "0.11.0"
+
 "@chakra-ui/tooltip@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/tooltip/-/tooltip-1.0.0-rc.5.tgz#ed6d5526252cefba64af17751f5c2ee01598c342"
@@ -2193,6 +2676,17 @@
     "@chakra-ui/utils" "1.0.0-rc.5"
     "@chakra-ui/visually-hidden" "1.0.0-rc.5"
 
+"@chakra-ui/tooltip@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tooltip/-/tooltip-1.0.1.tgz#257685c541748e6723cbe26c265f818ca97808d3"
+  integrity sha512-xaa9/wX41nKD6IHYzNFtLUuj4UeoIE6LwOqvE+sx/eNTFDOu2owBymJxx1DmD14phQrew2yZjAiHJ7UuAcOj/A==
+  dependencies:
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/popper" "1.0.1"
+    "@chakra-ui/portal" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+    "@chakra-ui/visually-hidden" "1.0.1"
+
 "@chakra-ui/transition@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/transition/-/transition-1.0.0-rc.5.tgz#39ae085089568be3437951a861616e1b358887eb"
@@ -2202,6 +2696,14 @@
     "@types/react-transition-group" "4.4.0"
     react-transition-group "4.4.1"
 
+"@chakra-ui/transition@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/transition/-/transition-1.0.2.tgz#569b491da5de15f8956688b694681fbc44b622b9"
+  integrity sha512-sbgQbe8ayKRi7PdV7vYvgGlO01epU7a95yFPBn7By9Q2cusNWZrCxw/rymD5BnDQlDr5xg5FhWh88wvJQSMzwA==
+  dependencies:
+    "@chakra-ui/hooks" "1.0.1"
+    "@chakra-ui/utils" "1.0.1"
+
 "@chakra-ui/utils@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-1.0.0-rc.5.tgz#7d0d1ae7670ab2dc77e44f9538c7fa881188fd9e"
@@ -2216,6 +2718,17 @@
     memoize-one "5.1.1"
     object-assign "4.1.1"
 
+"@chakra-ui/utils@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-1.0.1.tgz#b050af53ecd346163479b386d189f40c995509cf"
+  integrity sha512-ASxUtuBcZwwFTk51Lz+yt6fTbZVOWJy2kbwS+7AMXWVrZrXxMIe90zO9AMgL2oXQzHUTzBL0O+T2qK5ezAZDSw==
+  dependencies:
+    "@types/lodash.mergewith" "4.6.6"
+    "@types/object-assign" "4.0.30"
+    css-box-model "1.2.1"
+    lodash.mergewith "4.6.2"
+    object-assign "4.1.1"
+
 "@chakra-ui/visually-hidden@1.0.0-rc.5":
   version "1.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-1.0.0-rc.5.tgz#13d8914b4ea879f5d26a645ce9169e7a3362233b"
@@ -2223,6 +2736,13 @@
   dependencies:
     "@chakra-ui/utils" "1.0.0-rc.5"
 
+"@chakra-ui/visually-hidden@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-1.0.1.tgz#3341f66d2aec70513d2b3391b88e2b0d247c7fd5"
+  integrity sha512-s6mJRj7o/flxu1s5F+t0gGSMDbHEwZdurv+IBs2kaLthJJMil70lZQewduk33qiYRu3g2XjPPhzbHHzjR2aJAA==
+  dependencies:
+    "@chakra-ui/utils" "1.0.1"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -2246,6 +2766,24 @@
   resolved "https://registry.yarnpkg.com/@egoist/vue-to-react/-/vue-to-react-1.1.0.tgz#83c884b8608e8ee62e76c03e91ce9c26063a91ad"
   integrity sha512-MwfwXHDh6ptZGLEtNLPXp2Wghteav7mzpT2Mcwl3NZWKF814i5hhHnNkVrcQQEuxUroSWQqzxLkMKSb+nhPang==
 
+"@emotion/babel-plugin@^11.0.0":
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.0.0.tgz#e6f40fa81ef52775773a53d50220c597ebc5c2ef"
+  integrity sha512-w3YP0jlqrNwBBaSI6W+r80fOKF6l9QmsPfLNx5YWSHwrxjVZhM+L50gY7YCVAvlfr1/qdD1vsFN+PDZmLvt42Q==
+  dependencies:
+    "@babel/helper-module-imports" "^7.7.0"
+    "@babel/plugin-syntax-jsx" "^7.12.1"
+    "@babel/runtime" "^7.7.2"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/serialize" "^1.0.0"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "^4.0.3"
+
 "@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
@@ -2256,7 +2794,18 @@
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
-"@emotion/core@10.0.35", "@emotion/core@^10.0.20", "@emotion/core@^10.0.28", "@emotion/core@^10.0.9":
+"@emotion/cache@^11.0.0":
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.0.0.tgz#473adcaf9e04c6a0e30fb1421e79a209a96818f8"
+  integrity sha512-NStfcnLkL5vj3mBILvkR2m/5vFxo3G0QEreYKDGHNHm9IMYoT/t3j6xwjx6lMI/S1LUJfVHQqn0m9wSINttTTQ==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.0.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "^4.0.3"
+
+"@emotion/core@10.0.35", "@emotion/core@^10.0.20", "@emotion/core@^10.0.9":
   version "10.0.35"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3"
   integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==
@@ -2282,18 +2831,38 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.1", "@emotion/is-prop-valid@^0.8.8":
+"@emotion/is-prop-valid@0.8.8", "@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/memoize@0.7.4", "@emotion/memoize@^0.7.1":
+"@emotion/is-prop-valid@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.0.0.tgz#1dbe82e52a12c065d416a702e2d106e552cde5be"
+  integrity sha512-G5X0t7eR9pkhUvAY32QS3lToP9JyNF8It5CcmMvbWjmC9/Yq7IhevaKqxl+me2BKR93iTPiL/h3En1ZX/1G3PQ==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+
+"@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/react@^11.1.1":
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.1.1.tgz#4b304d494af321b0179e6763830e07cf674f0423"
+  integrity sha512-otA0Np8OnOeU9ChkOS9iuLB6vIxiM+bJiU0id33CsQn3R2Pk9ijVHnxevENIKV/P2S7AhrD8cFbUGysEciWlEA==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@emotion/cache" "^11.0.0"
+    "@emotion/serialize" "^1.0.0"
+    "@emotion/sheet" "^1.0.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
 "@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
   version "0.11.16"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
@@ -2305,11 +2874,27 @@
     "@emotion/utils" "0.11.3"
     csstype "^2.5.7"
 
+"@emotion/serialize@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.0.tgz#1a61f4f037cf39995c97fc80ebe99abc7b191ca9"
+  integrity sha512-zt1gm4rhdo5Sry8QpCOpopIUIKU+mUSpV9WNmFILUraatm5dttNEaYzUWWSboSMUE6PtN2j1cAsuvcugfdI3mw==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
 "@emotion/sheet@0.9.4":
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
   integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
 
+"@emotion/sheet@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.0.tgz#a0ef06080f339477ad4ba7f56e1c931f7ba50822"
+  integrity sha512-cdCHfZtf/0rahPDCZ9zyq+36EqfD/6c0WUqTFZ/hv9xadTUv2lGE5QK7/Z6Dnx2oRxC0usfVM2/BYn9q9B9wZA==
+
 "@emotion/styled-base@^10.0.27":
   version "10.0.31"
   resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a"
@@ -2320,7 +2905,7 @@
     "@emotion/serialize" "^0.11.15"
     "@emotion/utils" "0.11.3"
 
-"@emotion/styled@10.0.27", "@emotion/styled@^10.0.17", "@emotion/styled@^10.0.27":
+"@emotion/styled@10.0.27", "@emotion/styled@^10.0.17":
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
   integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==
@@ -2328,12 +2913,23 @@
     "@emotion/styled-base" "^10.0.27"
     babel-plugin-emotion "^10.0.27"
 
+"@emotion/styled@^11.0.0":
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.0.0.tgz#698196c2822746360a8644a73a5d842b2d1a78a5"
+  integrity sha512-498laccxJlBiJqrr2r/fx9q+Pr55D0URP2UyOkoSGLjevb8LLAFWueqthsQ5XijE66iGo7y3rzzEYdA7CHmZEQ==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@emotion/babel-plugin" "^11.0.0"
+    "@emotion/is-prop-valid" "^1.0.0"
+    "@emotion/serialize" "^1.0.0"
+    "@emotion/utils" "^1.0.0"
+
 "@emotion/stylis@0.8.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.5", "@emotion/unitless@^0.7.4":
+"@emotion/unitless@0.7.5", "@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==
@@ -2343,7 +2939,12 @@
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
   integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
 
-"@emotion/weak-memoize@0.2.5":
+"@emotion/utils@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
+  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
+
+"@emotion/weak-memoize@0.2.5", "@emotion/weak-memoize@^0.2.5":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
@@ -3252,7 +3853,7 @@
     is-promise "4.0.0"
     tslib "~2.0.1"
 
-"@graphql-typed-document-node/core@^3.0.0":
+"@graphql-typed-document-node/core@^3.0.0", "@graphql-typed-document-node/core@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.0.tgz#0eee6373e11418bfe0b5638f654df7a4ca6a3950"
   integrity sha512-wYn6r8zVZyQJ6rQaALBEln5B1pzxb9shV5Ef97kTvn6yVGrqyXVnDqnU24MXnFubR+rZjBY9NWuxX3FB2sTsjg==
@@ -3566,6 +4167,11 @@
     "@hapi/bourne" "1.x.x"
     "@hapi/hoek" "8.x.x"
 
+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@jest/console@^24.7.1", "@jest/console@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
@@ -4800,22 +5406,6 @@
     prop-types "^15.7.2"
     tslib "^2.0.0"
 
-"@reach/alert@^0.1.2":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@reach/alert/-/alert-0.1.5.tgz#4da79add0055fa4295f51e5295ed3b80257e9153"
-  integrity sha512-Ow+SB7rokGWxmm+AdOpf4eo29OaEYDqlJ1Kc9qulVX2cKjYiHQqAvkiCkSaIPkQbbyNmEXJ0c/rVpzPVvCVIAw==
-  dependencies:
-    "@reach/component-component" "^0.1.3"
-    "@reach/visually-hidden" "^0.1.4"
-
-"@reach/auto-id@0.10.2":
-  version "0.10.2"
-  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.10.2.tgz#a447af67241123dcb701ecd61931a2c786ed111e"
-  integrity sha512-PWFZevkHshiJV/z0L/5WQkWhe9QRzdZqC7N/JHRCoYo+odvCz9izXVRsxJf7p4sCuOCvnc8zNzAokFk2E1ZzDg==
-  dependencies:
-    "@reach/utils" "^0.10.2"
-    tslib "^1.11.2"
-
 "@reach/auto-id@0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.11.0.tgz#274251c1fbf9cd58d874cfc75fba289d1829368c"
@@ -4824,11 +5414,6 @@
     "@reach/utils" "0.11.0"
     tslib "^2.0.0"
 
-"@reach/component-component@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.1.3.tgz#5d156319572dc38995b246f81878bc2577c517e5"
-  integrity sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg==
-
 "@reach/observe-rect@1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
@@ -4863,15 +5448,6 @@
     tslib "^2.0.0"
     warning "^4.0.3"
 
-"@reach/utils@^0.10.2":
-  version "0.10.5"
-  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.10.5.tgz#fbac944d29565f6dd7abd0e1b13950e99b1e470b"
-  integrity sha512-5E/xxQnUbmpI/LrufBAOXjunl96DnqX6B4zC2MO2KH/dRzLug5gM5VuOwV26egsp0jvsSPxojwciOhS43px3qw==
-  dependencies:
-    "@types/warning" "^3.0.0"
-    tslib "^2.0.0"
-    warning "^4.0.3"
-
 "@reach/visually-hidden@0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.11.0.tgz#a7cd68ea2a197238dfcffbef8723db9117d31ebb"
@@ -4879,11 +5455,6 @@
   dependencies:
     tslib "^2.0.0"
 
-"@reach/visually-hidden@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.1.4.tgz#0dc4ecedf523004337214187db70a46183bd945b"
-  integrity sha512-QHbzXjflSlCvDd6vJwdwx16mSB+vUCCQMiU/wK/CgVNPibtpEiIbisyxkpZc55DyDFNUIqP91rSUsNae+ogGDQ==
-
 "@react-aria/interactions@3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.2.0.tgz#43d28489f8e1ec333127221ed1a2a7c92783dd01"
@@ -4910,21 +5481,6 @@
     "@react-types/shared" "^3.2.1"
     clsx "^1.1.1"
 
-"@react-dnd/asap@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-4.0.0.tgz#b300eeed83e9801f51bd66b0337c9a6f04548651"
-  integrity sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ==
-
-"@react-dnd/invariant@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@react-dnd/invariant/-/invariant-2.0.0.tgz#09d2e81cd39e0e767d7da62df9325860f24e517e"
-  integrity sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==
-
-"@react-dnd/shallowequal@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz#a3031eb54129f2c66b2753f8404266ec7bf67f0a"
-  integrity sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==
-
 "@react-types/shared@^3.2.0", "@react-types/shared@^3.2.1":
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.2.1.tgz#cbcffec02a7592f019916e4bd0807950a1376bcf"
@@ -5660,105 +6216,13 @@
     telejson "^3.2.0"
     util-deprecate "^1.0.2"
 
-"@styled-system/background@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/background/-/background-5.1.2.tgz#75c63d06b497ab372b70186c0bf608d62847a2ba"
-  integrity sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/border@^5.1.5":
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/@styled-system/border/-/border-5.1.5.tgz#0493d4332d2b59b74bb0d57d08c73eb555761ba6"
-  integrity sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/color@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/color/-/color-5.1.2.tgz#b8d6b4af481faabe4abca1a60f8daa4ccc2d9f43"
-  integrity sha512-1kCkeKDZkt4GYkuFNKc7vJQMcOmTl3bJY3YBUs7fCNM6mMYJeT1pViQ2LwBSBJytj3AB0o4IdLBoepgSgGl5MA==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/core@5.1.2", "@styled-system/core@^5.1.2":
+"@styled-system/core@5.1.2":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@styled-system/core/-/core-5.1.2.tgz#b8b7b86455d5a0514f071c4fa8e434b987f6a772"
   integrity sha512-XclBDdNIy7OPOsN4HBsawG2eiWfCcuFt6gxKn1x4QfMIgeO6TOlA2pZZ5GWZtIhCUqEPTgIBta6JXsGyCkLBYw==
   dependencies:
     object-assign "^4.1.1"
 
-"@styled-system/css@5.1.5", "@styled-system/css@^5.1.5":
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.1.5.tgz#0460d5f3ff962fa649ea128ef58d9584f403bbbc"
-  integrity sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A==
-
-"@styled-system/flexbox@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/flexbox/-/flexbox-5.1.2.tgz#077090f43f61c3852df63da24e4108087a8beecf"
-  integrity sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/grid@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/grid/-/grid-5.1.2.tgz#7165049877732900b99cd00759679fbe45c6c573"
-  integrity sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/layout@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/layout/-/layout-5.1.2.tgz#12d73e79887e10062f4dbbbc2067462eace42339"
-  integrity sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/position@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/position/-/position-5.1.2.tgz#56961266566836f57a24d8e8e33ce0c1adb59dd3"
-  integrity sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/shadow@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/shadow/-/shadow-5.1.2.tgz#beddab28d7de03cd0177a87ac4ed3b3b6d9831fd"
-  integrity sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/should-forward-prop@5.1.5":
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz#c392008c6ae14a6eb78bf1932733594f7f7e5c76"
-  integrity sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q==
-  dependencies:
-    "@emotion/is-prop-valid" "^0.8.1"
-    "@emotion/memoize" "^0.7.1"
-    styled-system "^5.1.5"
-
-"@styled-system/space@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/space/-/space-5.1.2.tgz#38925d2fa29a41c0eb20e65b7c3efb6e8efce953"
-  integrity sha512-+zzYpR8uvfhcAbaPXhH8QgDAV//flxqxSjHiS9cDFQQUSznXMQmxJegbhcdEF7/eNnJgHeIXv1jmny78kipgBA==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/typography@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/typography/-/typography-5.1.2.tgz#65fb791c67d50cd2900d234583eaacdca8c134f7"
-  integrity sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/variant@^5.1.5":
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/@styled-system/variant/-/variant-5.1.5.tgz#8446d8aad06af3a4c723d717841df2dbe4ddeafd"
-  integrity sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-    "@styled-system/css" "^5.1.5"
-
 "@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
@@ -6016,6 +6480,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/cookiejar@*":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@types/cookiejar/-/cookiejar-2.1.2.tgz#66ad9331f63fe8a3d3d9d8c6e3906dd10f6446e8"
+  integrity sha512-t73xJJrvdTjXrn4jLS9VSGRbz0nUY3cl2DMGDU48lKl+HR9dbbjW2A9r3g40VA++mQpy6uuHg33gy7du2BKpog==
+
 "@types/debug@^4.1.5":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
@@ -6075,7 +6544,7 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934"
   integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==
 
-"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.1":
+"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
@@ -6243,6 +6712,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.67.tgz#4f86badb292e822e3b13730a1f9713ed2377f789"
   integrity sha512-R48tgL2izApf+9rYNH+3RBMbRpPeW3N8f0I9HMhggeq4UXwBDqumJ14SDs4ctTMhG11pIOduZ4z3QWGOiMc9Vg==
 
+"@types/node@^14.10.0":
+  version "14.14.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.10.tgz#5958a82e41863cfc71f2307b3748e3491ba03785"
+  integrity sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
@@ -6303,7 +6777,7 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react-dom@*", "@types/react-dom@^16.8.3", "@types/react-dom@^16.9.8":
+"@types/react-dom@*", "@types/react-dom@^16.9.8":
   version "16.9.8"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
   integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==
@@ -6317,6 +6791,16 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-redux@^7.1.11":
+  version "7.1.11"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.11.tgz#a18e8ab3651e8e8cc94798934927937c66021217"
+  integrity sha512-OjaFlmqy0CRbYKBoaWF84dub3impqnLJUrz4u8PRjDzaa4n1A2cVmjMV81shwXyAD5x767efhA8STFGJz/r1Zg==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react-router-dom@^5.1.5":
   version "5.1.6"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.6.tgz#07b14e7ab1893a837c8565634960dc398564b1fb"
@@ -6364,7 +6848,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.10", "@types/react@^16.9.43":
+"@types/react@*", "@types/react@^16.9.43":
   version "16.9.52"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.52.tgz#c46c72d1a1d8d9d666f4dd2066c0e22600ccfde1"
   integrity sha512-EHRjmnxiNivwhGdMh9sz1Yw9AUxTSZFxKqdBWAAzyZx3sufWwx6ogqHYh/WB1m/I4ZpjkoZLExF5QTy2ekVi/Q==
@@ -6388,6 +6872,14 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/react@^16.9.49":
+  version "16.14.2"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c"
+  integrity sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -6430,7 +6922,7 @@
   resolved "https://registry.yarnpkg.com/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1"
   integrity sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==
 
-"@types/styled-components@^5.1.1":
+"@types/styled-components@^5.1.3":
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.4.tgz#11f167dbde268635c66adc89b5a5db2e69d75384"
   integrity sha512-78f5Zuy0v/LTQNOYfpH+CINHpchzMMmAt9amY2YNtSgsk1TmlKm8L2Wijss/mtTrsUAVTm2CdGB8VOM65vA8xg==
@@ -6440,12 +6932,13 @@
     "@types/react-native" "*"
     csstype "^3.0.2"
 
-"@types/styled-system@5.1.9":
-  version "5.1.9"
-  resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.9.tgz#8baac8f6eca9e0bd5768c175ca5ce1f2d6f61ade"
-  integrity sha512-QlWv6tmQV8dqk8s+LSLb9QAtmuQEnfv4f8lKKZkMgDqRFVmxJDBwEw0u4zhpxp56u0hdR+TCIk9dGfOw3TkCoQ==
+"@types/superagent@^4.1.10":
+  version "4.1.10"
+  resolved "https://registry.yarnpkg.com/@types/superagent/-/superagent-4.1.10.tgz#5e2cc721edf58f64fe9b819f326ee74803adee86"
+  integrity sha512-xAgkb2CMWUMCyVc/3+7iQfOEBE75NvuZeezvmixbUw3nmENf2tCnQkW5yQLTYqvXUQ+R6EXxdqKKbal2zM5V/g==
   dependencies:
-    csstype "^2.6.9"
+    "@types/cookiejar" "*"
+    "@types/node" "*"
 
 "@types/tapable@*", "@types/tapable@^1.0.5":
   version "1.0.6"
@@ -6653,10 +7146,13 @@
   dependencies:
     wonka "^4.0.14"
 
-"@use-it/event-listener@^0.1.2":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@use-it/event-listener/-/event-listener-0.1.5.tgz#870456241bfef66acea6395c69b66fe516bee3cd"
-  integrity sha512-SWbhB0iFcoNL1BEldApGTqfB9aoGpU82iZUVTBtZaTFNrVKAGwuQTF15N9MzRvTgyuOASWf1pCKXbdVtKZgeRg==
+"@urql/core@^1.16.0":
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/@urql/core/-/core-1.16.0.tgz#e83a2c9f744ae7804f79a4077f77701cf68b80f4"
+  integrity sha512-bGdxlVRm02q9jIj463jRNthM5haia1lccob1gXDUhpAWXJY58xYgnFPuv0pYf/MqsM67nizZRLhHgf84Knb9ZQ==
+  dependencies:
+    "@graphql-typed-document-node/core" "^3.1.0"
+    wonka "^4.0.14"
 
 "@vue/compiler-core@3.0.1":
   version "3.0.1"
@@ -8356,7 +8852,7 @@ babel-plugin-react-docgen@^4.0.0:
     lodash "^4.17.15"
     react-docgen "^5.0.0"
 
-"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.7:
+"babel-plugin-styled-components@>= 1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.11.1.tgz#5296a9e557d736c3186be079fff27c6665d63d76"
   integrity sha512-YwrInHyKUk1PU3avIRdiLyCpM++18Rs1NgyMXEAQC33rIXs/vro0A+stf4sT0Gf22Got+xRWB8Cm0tw+qkRzBA==
@@ -8893,11 +9389,6 @@ body-parser@1.19.0, body-parser@^1.16.0, body-parser@^1.19.0:
     raw-body "2.4.0"
     type-is "~1.6.17"
 
-body-scroll-lock@^3.0.1:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
-  integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
-
 bonjour@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
@@ -9762,6 +10253,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classcat@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/classcat/-/classcat-4.1.0.tgz#e8fd8623e5625187b58adf49bb669a13b6c520f4"
+  integrity sha512-RA8O5oCi1I1CF6rR4cRBROh8MtZzM4w7xKLm0jd+S6UN2G4FIto+9DVOeFc46JEZFN5PVe/EZWLQO1VU/AUH4A==
+
 classnames@2.2.6, classnames@^2.2.5, classnames@~2.2.5:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
@@ -9978,7 +10474,7 @@ color-name@^1.0.0, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.5.2, color-string@^1.5.4:
+color-string@^1.5.4:
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.4.tgz#dd51cd25cfee953d138fe4002372cc3d0e504cb6"
   integrity sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==
@@ -9986,14 +10482,6 @@ color-string@^1.5.2, color-string@^1.5.4:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
-  integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
-  dependencies:
-    color-convert "^1.9.1"
-    color-string "^1.5.2"
-
 color@^3.0.0:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
@@ -10090,7 +10578,7 @@ component-emitter@1.2.1:
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
   integrity sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=
 
-component-emitter@^1.2.1, component-emitter@~1.3.0:
+component-emitter@^1.2.1, component-emitter@^1.3.0, component-emitter@~1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
   integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
@@ -10389,7 +10877,7 @@ cookie@0.4.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
   integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
 
-cookiejar@^2.1.1:
+cookiejar@^2.1.1, cookiejar@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.2.tgz#dd8a235530752f988f9a0844f3fc589e3111125c"
   integrity sha512-Mw+adcfzPxcPeI+0WlvRrr/3lGVO0bD75SxX6811cxSh1Wbxx7xZBGK1eVtDf6si8rg2lhnUjsVLMFMfbRIuwA==
@@ -10979,7 +11467,7 @@ csstype@3.0.3, csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.3.tgz#2b410bbeba38ba9633353aff34b05d9755d065f8"
   integrity sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==
 
-csstype@^2.2.0, csstype@^2.5.2, csstype@^2.5.7, csstype@^2.6.9:
+csstype@^2.2.0, csstype@^2.5.2, csstype@^2.5.7:
   version "2.6.13"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f"
   integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==
@@ -11021,6 +11509,24 @@ d3-color@1:
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
   integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
 
+"d3-dispatch@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-2.0.0.tgz#8a18e16f76dd3fcaef42163c97b926aa9b55e7cf"
+  integrity sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==
+
+d3-drag@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-2.0.0.tgz#9eaf046ce9ed1c25c88661911c1d5a4d8eb7ea6d"
+  integrity sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==
+  dependencies:
+    d3-dispatch "1 - 2"
+    d3-selection "2"
+
+"d3-ease@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-2.0.0.tgz#fd1762bfca00dae4bacea504b1d628ff290ac563"
+  integrity sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ==
+
 d3-format@1, d3-format@^1.4.3:
   version "1.4.5"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4"
@@ -11038,7 +11544,7 @@ d3-interpolate@1, d3-interpolate@^1.3.0:
   dependencies:
     d3-color "1"
 
-"d3-interpolate@1.2.0 - 2":
+"d3-interpolate@1 - 2", "d3-interpolate@1.2.0 - 2":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163"
   integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
@@ -11081,6 +11587,11 @@ d3-scale@^3.2.1:
     d3-time "1 - 2"
     d3-time-format "2 - 3"
 
+d3-selection@2, d3-selection@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-2.0.0.tgz#94a11638ea2141b7565f883780dabc7ef6a61066"
+  integrity sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA==
+
 d3-shape@^1.2.0, d3-shape@^1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
@@ -11112,6 +11623,33 @@ d3-time@1, d3-time@^1.1.0:
   resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.0.0.tgz#ad7c127d17c67bd57a4c61f3eaecb81108b1e0ab"
   integrity sha512-2mvhstTFcMvwStWd9Tj3e6CEqtOivtD8AUiHT8ido/xmzrI9ijrUUihZ6nHuf/vsScRBonagOdj0Vv+SEL5G3Q==
 
+"d3-timer@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-2.0.0.tgz#055edb1d170cfe31ab2da8968deee940b56623e6"
+  integrity sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==
+
+d3-transition@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-2.0.0.tgz#366ef70c22ef88d1e34105f507516991a291c94c"
+  integrity sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==
+  dependencies:
+    d3-color "1 - 2"
+    d3-dispatch "1 - 2"
+    d3-ease "1 - 2"
+    d3-interpolate "1 - 2"
+    d3-timer "1 - 2"
+
+d3-zoom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-2.0.0.tgz#f04d0afd05518becce879d04709c47ecd93fba54"
+  integrity sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==
+  dependencies:
+    d3-dispatch "1 - 2"
+    d3-drag "2"
+    d3-interpolate "1 - 2"
+    d3-selection "2"
+    d3-transition "2"
+
 d64@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/d64/-/d64-1.0.0.tgz#4002a87e850cbfc9f9d9706b60fca613a3336e90"
@@ -11504,6 +12042,11 @@ deprecation@^2.0.0, deprecation@^2.3.1:
   resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
   integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
 
+dequal@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -11691,15 +12234,6 @@ dlv@^1.1.3:
   resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
   integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
 
-dnd-core@^11.1.3:
-  version "11.1.3"
-  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-11.1.3.tgz#f92099ba7245e49729d2433157031a6267afcc98"
-  integrity sha512-QugF55dNW+h+vzxVJ/LSJeTeUw9MCJ2cllhmVThVPEtF16ooBkxj0WBE5RB+AceFxMFo1rO6bJKXtqKl+JNnyA==
-  dependencies:
-    "@react-dnd/asap" "^4.0.0"
-    "@react-dnd/invariant" "^2.0.0"
-    redux "^4.0.4"
-
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -11997,6 +12531,20 @@ dynamic-dedupe@^0.3.0:
   dependencies:
     xtend "^4.0.0"
 
+easy-peasy@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/easy-peasy/-/easy-peasy-4.0.1.tgz#8b3ab1ebb43509a62dc2c37b4269a9141e33d918"
+  integrity sha512-aTvB48M2ej6dM/wllUm1F7CTWGnYOYh82SHBkvJtOZhJ/9L8Gmg/nIVqDPwJeojOWZe+gbLtpyi8DhN6fPNBYg==
+  dependencies:
+    immer "7.0.9"
+    is-plain-object "^5.0.0"
+    memoizerific "^1.11.3"
+    redux "^4.0.5"
+    redux-thunk "^2.3.0"
+    symbol-observable "^2.0.3"
+    ts-toolbelt "^8.0.7"
+    use-memo-one "^1.1.1"
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -12094,7 +12642,7 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
-emotion-theming@^10.0.19, emotion-theming@^10.0.27:
+emotion-theming@^10.0.19:
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10"
   integrity sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==
@@ -12395,6 +12943,11 @@ escape-string-regexp@2.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
   integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
 
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
 escodegen@^1.11.0, escodegen@^1.12.0, escodegen@^1.9.1:
   version "1.14.3"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
@@ -13250,11 +13803,6 @@ execa@^4.0.3:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
-exenv@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
-  integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
-
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -13413,7 +13961,7 @@ fake-merkle-patricia-tree@^1.0.1:
   dependencies:
     checkpoint-store "^1.1.0"
 
-fake-tag@2.0.0:
+fake-tag@2.0.0, fake-tag@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fake-tag/-/fake-tag-2.0.0.tgz#08ea5df950ef8635833186247f569e8406ffb4da"
   integrity sha512-QDz+8qiNQ9AfBZ31EXlID5JIbUkU3e1nXDWk4tidFzd2gy8XJaEUW1HCuDY6DUy6t2Y0nvhD6PsUc+2WYy5w0w==
@@ -13430,7 +13978,7 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
-fast-deep-equal@^3.1.1:
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@@ -13534,7 +14082,7 @@ fbjs-css-vars@^1.0.0:
   resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
   integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
 
-fbjs@^0.8.4, fbjs@^0.8.9:
+fbjs@^0.8.4:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
@@ -13914,6 +14462,11 @@ format@^0.2.0:
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
 
+formidable@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/formidable/-/formidable-1.2.2.tgz#bf69aea2972982675f00865342b982986f6b8dd9"
+  integrity sha512-V8gLm+41I/8kguQ4/o1D3RIHRmhYFG4pnNyonvua+40rqcEmT4+V71yaZ3B457xbbgCsCfjSPi65u/W6vK1U5Q==
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -13926,6 +14479,26 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+framer-motion@^2.9.5:
+  version "2.9.5"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-2.9.5.tgz#bbb185325d531c57f494cf3f6cf7719fc2c225c7"
+  integrity sha512-epSX4Co1YbDv0mjfHouuY0q361TpHE7WQzCp/xMTilxy4kXd+Z23uJzPVorfzbm1a/9q1Yu8T5bndaw65NI4Tg==
+  dependencies:
+    framesync "^4.1.0"
+    hey-listen "^1.0.8"
+    popmotion "9.0.0-rc.20"
+    style-value-types "^3.1.9"
+    tslib "^1.10.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-4.1.0.tgz#69a8db3ca432dc70d6a76ba882684a1497ef068a"
+  integrity sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==
+  dependencies:
+    hey-listen "^1.0.5"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -14135,6 +14708,16 @@ get-func-name@^2.0.0:
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
   integrity sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=
 
+get-graphql-schema@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/get-graphql-schema/-/get-graphql-schema-2.1.2.tgz#ffa418534224a75cd7afc8f87b70109ca9ec3fe9"
+  integrity sha512-1z5Hw91VrE3GrpCZE6lE8Dy+jz4kXWesLS7rCSjwOxf5BOcIedAZeTUJRIeIzmmR+PA9CKOkPTYFRJbdgUtrxA==
+  dependencies:
+    chalk "^2.4.1"
+    graphql "^14.0.2"
+    minimist "^1.2.0"
+    node-fetch "^2.2.0"
+
 get-iterator@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-iterator/-/get-iterator-1.0.2.tgz#cd747c02b4c084461fac14f48f6b45a80ed25c82"
@@ -14603,6 +15186,13 @@ graphql-tools@^6.0.15:
     "@graphql-tools/wrap" "^6.2.4"
     tslib "~2.0.1"
 
+graphql@^14.0.2:
+  version "14.7.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-14.7.0.tgz#7fa79a80a69be4a31c27dda824dc04dac2035a72"
+  integrity sha512-l0xWZpoPKpppFzMfvVyFmp9vLN7w/ZZJPefUicMCepfJeQ8sMcztloGYY9DfjVPo6tIUDzU5Hw3MUbIjj9AVVA==
+  dependencies:
+    iterall "^1.2.2"
+
 graphql@^15.0.0, graphql@^15.3.0:
   version "15.3.0"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.3.0.tgz#3ad2b0caab0d110e3be4a5a9b2aa281e362b5278"
@@ -14920,6 +15510,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+hey-listen@^1.0.5, 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==
+
 highlight.js@~9.13.0:
   version "9.13.1"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e"
@@ -14946,7 +15541,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.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==
@@ -15409,6 +16004,11 @@ immer@1.10.0:
   resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
   integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
 
+immer@7.0.9:
+  version "7.0.9"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-7.0.9.tgz#28e7552c21d39dd76feccd2b800b7bc86ee4a62e"
+  integrity sha512-Vs/gxoM4DqNAYR7pugIxi0Xc8XAun/uy7AQu4fLLqaTBHxjOP9pJ266Q9MWA/ly4z6rAFZbvViOtihxUZ7O28A==
+
 immutability-helper@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-3.1.1.tgz#2b86b2286ed3b1241c9e23b7b21e0444f52f77b7"
@@ -17198,7 +17798,7 @@ iterable-ndjson@^1.1.0:
   dependencies:
     string_decoder "^1.2.0"
 
-iterall@^1.2.1:
+iterall@^1.2.1, iterall@^1.2.2:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.3.0.tgz#afcb08492e2915cbd8a0884eb93a8c94d0d72fea"
   integrity sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==
@@ -19089,6 +19689,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
+
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -19239,7 +19844,7 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@4.17.20, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@~4.17.19, lodash@~4.17.20, lodash@~4.17.4, lodash@~4.17.5:
+lodash@4.17.20, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@~4.17.19, lodash@~4.17.20, lodash@~4.17.4, lodash@~4.17.5:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -19525,6 +20130,11 @@ marksy@^8.0.0:
     he "^1.2.0"
     marked "^0.3.12"
 
+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 math-expression-evaluator@^1.2.14:
   version "1.2.22"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.22.tgz#c14dcb3d8b4d150e5dcea9c68c8dad80309b0d5e"
@@ -19792,7 +20402,7 @@ merkle-patricia-tree@^3.0.0:
     rlp "^2.0.0"
     semaphore ">=1.0.1"
 
-methods@~1.1.2:
+methods@^1.1.2, methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
@@ -19859,7 +20469,7 @@ mime@1.6.0:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^2.4.4:
+mime@^2.4.4, mime@^2.4.6:
   version "2.4.6"
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1"
   integrity sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==
@@ -20517,7 +21127,7 @@ next-urql@2.0.0:
   dependencies:
     react-ssr-prepass "^1.2.1"
 
-next@latest:
+next@^9.5.3, next@latest:
   version "9.5.5"
   resolved "https://registry.yarnpkg.com/next/-/next-9.5.5.tgz#37a37095e7c877ed6c94ba82e34ab9ed02b4eb33"
   integrity sha512-KF4MIdTYeI6YIGODNw27w9HGzCll4CXbUpkP6MNvyoHlpsunx8ybkQHm/hYa7lWMozmsn58LwaXJOhe4bSrI0g==
@@ -20652,7 +21262,7 @@ node-fetch@2.6.0:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
   integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
 
-node-fetch@2.6.1, node-fetch@^2.5.0, node-fetch@^2.6.0, node-fetch@^2.6.1:
+node-fetch@2.6.1, node-fetch@^2.2.0, node-fetch@^2.5.0, node-fetch@^2.6.0, node-fetch@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
@@ -22304,12 +22914,22 @@ polished@^3.3.1:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+popmotion@9.0.0-rc.20:
+  version "9.0.0-rc.20"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-rc.20.tgz#f3550042ae31957b5416793ae8723200951ad39d"
+  integrity sha512-f98sny03WuA+c8ckBjNNXotJD4G2utG/I3Q23NU69OEafrXtxxSukAaJBxzbtxwDvz3vtZK69pu9ojdkMoBNTg==
+  dependencies:
+    framesync "^4.1.0"
+    hey-listen "^1.0.8"
+    style-value-types "^3.1.9"
+    tslib "^1.10.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"
   integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
 
-popper.js@^1.14.4, popper.js@^1.14.7, popper.js@^1.15.0:
+popper.js@^1.14.4, popper.js@^1.14.7:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
@@ -23300,7 +23920,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@15.7.2, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.0, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.0, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -23596,7 +24216,7 @@ qs@6.7.0:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
-qs@^6.6.0:
+qs@^6.6.0, qs@^6.9.4:
   version "6.9.4"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687"
   integrity sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==
@@ -23818,14 +24438,6 @@ react-addons-create-fragment@^15.6.2:
     loose-envify "^1.3.1"
     object-assign "^4.1.0"
 
-react-addons-update@^15.6.2:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/react-addons-update/-/react-addons-update-15.6.2.tgz#e53753c5b34887974510c882d7fb075851d5e504"
-  integrity sha1-5TdTxbNIh5dFEMiC1/sHWFHV5QQ=
-  dependencies:
-    fbjs "^0.8.9"
-    object-assign "^4.1.0"
-
 react-admin@^3.6.2:
   version "3.9.4"
   resolved "https://registry.yarnpkg.com/react-admin/-/react-admin-3.9.4.tgz#3738ef8ca7fa68140f0555f177aec2d6f0d12151"
@@ -23849,14 +24461,6 @@ react-admin@^3.6.2:
     redux "^3.7.2 || ^4.0.3"
     redux-saga "^1.0.0"
 
-react-animate-height@2.0.21:
-  version "2.0.21"
-  resolved "https://registry.yarnpkg.com/react-animate-height/-/react-animate-height-2.0.21.tgz#da9223eb0e74457d52f72da477c8626550df2ce6"
-  integrity sha512-CZHdjMD8qqp10tYtWmauWYASXxxv9vYeljxFGFtbcrbNXhsUv0w3IjxVK+0yCnyfk7769WfMZKHra4vRcbMnQg==
-  dependencies:
-    classnames "^2.2.5"
-    prop-types "^15.6.1"
-
 react-animate-height@2.0.23:
   version "2.0.23"
   resolved "https://registry.yarnpkg.com/react-animate-height/-/react-animate-height-2.0.23.tgz#2e14ac707b20ae67b87766ccfd581e693e0e7ec7"
@@ -23865,6 +24469,17 @@ react-animate-height@2.0.23:
     classnames "^2.2.5"
     prop-types "^15.6.1"
 
+react-apollo@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/react-apollo/-/react-apollo-3.1.5.tgz#36692d393c47e7ccc37f0a885c7cc5a8b4961c91"
+  integrity sha512-xOxMqxORps+WHrUYbjVHPliviomefOpu5Sh35oO3osuOyPTxvrljdfTLGCggMhcXBsDljtS5Oy4g+ijWg3D4JQ==
+  dependencies:
+    "@apollo/react-common" "^3.1.4"
+    "@apollo/react-components" "^3.1.5"
+    "@apollo/react-hoc" "^3.1.5"
+    "@apollo/react-hooks" "^3.1.5"
+    "@apollo/react-ssr" "^3.1.5"
+
 react-app-polyfill@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz#890f8d7f2842ce6073f030b117de9130a5f385f0"
@@ -23884,6 +24499,19 @@ react-clientside-effect@^1.2.2:
   dependencies:
     "@babel/runtime" "^7.0.0"
 
+react-color@^2.19.3:
+  version "2.19.3"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
+  integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
 react-dev-utils@^10.2.1:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"
@@ -23945,23 +24573,6 @@ react-dev-utils@^9.0.0:
     strip-ansi "5.2.0"
     text-table "0.2.0"
 
-react-dnd-html5-backend@^11.1.3:
-  version "11.1.3"
-  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-11.1.3.tgz#2749f04f416ec230ea193f5c1fbea2de7dffb8f7"
-  integrity sha512-/1FjNlJbW/ivkUxlxQd7o3trA5DE33QiRZgxent3zKme8DwF4Nbw3OFVhTRFGaYhHFNL1rZt6Rdj1D78BjnNLw==
-  dependencies:
-    dnd-core "^11.1.3"
-
-react-dnd@^11.1.3:
-  version "11.1.3"
-  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-11.1.3.tgz#f9844f5699ccc55dfc81462c2c19f726e670c1af"
-  integrity sha512-8rtzzT8iwHgdSC89VktwhqdKKtfXaAyC4wiqp0SywpHG12TTLvfOoL6xNEIUWXwIEWu+CFfDn4GZJyynCEuHIQ==
-  dependencies:
-    "@react-dnd/shallowequal" "^2.0.0"
-    "@types/hoist-non-react-statics" "^3.3.1"
-    dnd-core "^11.1.3"
-    hoist-non-react-statics "^3.3.0"
-
 react-docgen-typescript-loader@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/react-docgen-typescript-loader/-/react-docgen-typescript-loader-3.7.2.tgz#45cb2305652c0602767242a8700ad1ebd66bbbbd"
@@ -24000,7 +24611,7 @@ react-dom@^16.13.0, react-dom@^16.13.1, react-dom@^16.8.3, react-dom@^16.8.6:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
-react-draggable@^4.0.3:
+react-draggable@^4.0.3, react-draggable@^4.4.3:
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.3.tgz#0727f2cae5813e36b0e4962bf11b2f9ef2b406f3"
   integrity sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==
@@ -24049,7 +24660,20 @@ react-final-form@^6.3.3:
   dependencies:
     "@babel/runtime" "^7.10.0"
 
-react-focus-lock@2.4.1, react-focus-lock@^2.1.0, react-focus-lock@^2.2.1:
+react-flow-renderer@^8.1.1:
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/react-flow-renderer/-/react-flow-renderer-8.1.2.tgz#08810b901f9811efa85ace441ceda1ca18b180ca"
+  integrity sha512-qaICRY91SOwVsZktmsg0p1dFqyvqlxKIxWSh8IHgFRC1LJOeYhKsg+Dpz7UZOeEFt2HIB+bg48DE17SGJqgyoQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    classcat "^4.1.0"
+    d3-selection "^2.0.0"
+    d3-zoom "^2.0.0"
+    easy-peasy "^4.0.1"
+    fast-deep-equal "^3.1.3"
+    react-draggable "^4.4.3"
+
+react-focus-lock@2.4.1, react-focus-lock@^2.1.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.4.1.tgz#e842cc93da736b5c5d331799012544295cbcee4f"
   integrity sha512-c5ZP56KSpj9EAxzScTqQO7bQQNPltf/W1ZEBDqNDOV1XOIwvAyHX0O7db9ekiAtxyKgnqZjQlLppVg94fUeL9w==
@@ -24322,14 +24946,6 @@ react-smooth@^1.0.5:
     raf "^3.4.0"
     react-transition-group "^2.5.0"
 
-react-spring@^8.0.27:
-  version "8.0.27"
-  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
-  integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    prop-types "^15.5.8"
-
 react-ssr-prepass@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/react-ssr-prepass/-/react-ssr-prepass-1.2.1.tgz#ba867bbe60714f42977dbe1ef9b8ff469b950602"
@@ -24394,6 +25010,13 @@ react@^16.13.0, react@^16.13.1, react@^16.8.3, react@^16.8.6:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
 read-cmd-shim@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-1.0.5.tgz#87e43eba50098ba5a32d0ceb583ab8e43b961c16"
@@ -24704,7 +25327,7 @@ redux-thunk@^2.3.0:
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
   integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
 
-"redux@^3.7.2 || ^4.0.3", redux@^4.0.4, redux@^4.0.5:
+"redux@^3.7.2 || ^4.0.3", redux@^4.0.0, redux@^4.0.4, redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
   integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
@@ -26838,6 +27461,14 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
+style-value-types@^3.1.9:
+  version "3.1.9"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.1.9.tgz#faf7da660d3f284ed695cff61ea197d85b9122cc"
+  integrity sha512-050uqgB7WdvtgacoQKm+4EgKzJExVq0sieKBQQtJiU3Muh6MYcCp4T3M8+dfl6VOF2LR0NNwXBP1QYEed8DfIw==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^1.10.0"
+
 styled-components@^5.1.1:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.0.tgz#6dcb5aa8a629c84b8d5ab34b7167e3e0c6f7ed74"
@@ -26854,6 +27485,22 @@ styled-components@^5.1.1:
     shallowequal "^1.1.0"
     supports-color "^5.5.0"
 
+styled-components@^5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a"
+  integrity sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==
+  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"
+    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.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.0.tgz#32335c1a3ecfc923ba4f9c056eeb3d4699006b09"
@@ -26868,25 +27515,6 @@ styled-jsx@3.3.0:
     stylis "3.5.4"
     stylis-rule-sheet "0.0.10"
 
-styled-system@5.1.5, styled-system@^5.1.5:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.5.tgz#e362d73e1dbb5641a2fd749a6eba1263dc85075e"
-  integrity sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==
-  dependencies:
-    "@styled-system/background" "^5.1.2"
-    "@styled-system/border" "^5.1.5"
-    "@styled-system/color" "^5.1.2"
-    "@styled-system/core" "^5.1.2"
-    "@styled-system/flexbox" "^5.1.2"
-    "@styled-system/grid" "^5.1.2"
-    "@styled-system/layout" "^5.1.2"
-    "@styled-system/position" "^5.1.2"
-    "@styled-system/shadow" "^5.1.2"
-    "@styled-system/space" "^5.1.2"
-    "@styled-system/typography" "^5.1.2"
-    "@styled-system/variant" "^5.1.5"
-    object-assign "^4.1.1"
-
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -26906,6 +27534,11 @@ stylis@3.5.4:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
   integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
 
+stylis@^4.0.3:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.6.tgz#0d8b97b6bc4748bea46f68602b6df27641b3c548"
+  integrity sha512-1igcUEmYFBEO14uQHAJhCUelTR5jPztfdVKrYxRnDa5D5Dn3w0NxXupJNPr/VV/yRfZYEAco8sTIRZzH3sRYKg==
+
 subscriptions-transport-ws@0.9.18:
   version "0.9.18"
   resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.18.tgz#bcf02320c911fbadb054f7f928e51c6041a37b97"
@@ -26917,6 +27550,23 @@ subscriptions-transport-ws@0.9.18:
     symbol-observable "^1.0.4"
     ws "^5.2.0"
 
+superagent@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/superagent/-/superagent-6.1.0.tgz#09f08807bc41108ef164cfb4be293cebd480f4a6"
+  integrity sha512-OUDHEssirmplo3F+1HWKUrUjvnQuA+nZI6i/JJBdXb5eq9IyEQwPyPpqND+SSsxf6TygpBEkUjISVRN4/VOpeg==
+  dependencies:
+    component-emitter "^1.3.0"
+    cookiejar "^2.1.2"
+    debug "^4.1.1"
+    fast-safe-stringify "^2.0.7"
+    form-data "^3.0.0"
+    formidable "^1.2.2"
+    methods "^1.1.2"
+    mime "^2.4.6"
+    qs "^6.9.4"
+    readable-stream "^3.6.0"
+    semver "^7.3.2"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -27001,7 +27651,7 @@ symbol-observable@^1.0.2, symbol-observable@^1.0.4, symbol-observable@^1.1.0, sy
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
-symbol-observable@^2.0.0:
+symbol-observable@^2.0.0, symbol-observable@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-2.0.3.tgz#5b521d3d07a43c351055fa43b8355b62d33fd16a"
   integrity sha512-sQV7phh2WCYAn81oAkakC5qjq2Ml0g8ozqz03wOGnx9dDlG1de6yrF+0RAzSJD8fPUow3PTSMf2SAbOGxb93BA==
@@ -27354,6 +28004,11 @@ tinycolor2@1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
   integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
 
+tinycolor2@1.4.2, tinycolor2@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
+  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
+
 tmp@0.0.33, tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -27423,15 +28078,6 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
-toasted-notes@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/toasted-notes/-/toasted-notes-3.2.0.tgz#dc9bdc9d0083ba2af8bf26b2f71619d014acc089"
-  integrity sha512-PucSn+SUdFSYNaaL1eNw7wYkEMJ7LULCR6j1YXPlRySHgWVgf+bXjq4dYd3hdA4mvmGz9HANmI1RnzhZ8av52Q==
-  dependencies:
-    "@reach/alert" "^0.1.2"
-    "@types/react" "^16.8.10"
-    "@types/react-dom" "^16.8.3"
-
 toggle-selection@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
@@ -27609,6 +28255,11 @@ ts-pnp@^1.1.2, ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
+ts-toolbelt@^8.0.7:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-8.0.7.tgz#4dad2928831a811ee17dbdab6eb1919fc0a295bf"
+  integrity sha512-KICHyKxc5Nu34kyoODrEe2+zvuQQaubTJz7pnC5RQ19TH/Jged1xv+h8LBrouaSD310m75oAljYs59LNHkLDkQ==
+
 tsconfig-paths@^3.9.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"
@@ -27701,7 +28352,7 @@ tslib@1.10.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
 
-tslib@^1.0.0, tslib@^1.10.0, tslib@^1.11.2, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.0.0, tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -27856,6 +28507,11 @@ typescript@^3.7.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
   integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
 
+typescript@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.2.tgz#6369ef22516fe5e10304aae5a5c4862db55380e9"
+  integrity sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ==
+
 typical@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/typical/-/typical-6.0.1.tgz#89bd1a6aa5e5e96fa907fb6b7579223bff558a06"
@@ -28287,6 +28943,14 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+urql@^1.11.4:
+  version "1.11.4"
+  resolved "https://registry.yarnpkg.com/urql/-/urql-1.11.4.tgz#f4eb430d7756baf61f2906779d5a1914e9eeef0d"
+  integrity sha512-VtX8xuzwxDtVXRCf/uvy1LcAnBIfiDrKlkblq6ENVJtI3eNsq7mTTxk3F1kZCxE29GWBayQpO4kcLzhEE0OojQ==
+  dependencies:
+    "@urql/core" "^1.16.0"
+    wonka "^4.0.14"
+
 urql@^1.9.7:
   version "1.10.1"
   resolved "https://registry.yarnpkg.com/urql/-/urql-1.10.1.tgz#48353c0d02175481377fa95ff150b7449bd2f7c5"
@@ -28308,20 +28972,10 @@ use-callback-ref@^1.2.1, use-callback-ref@^1.2.3:
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.4.tgz#d86d1577bfd0b955b6e04aaf5971025f406bea3c"
   integrity sha512-rXpsyvOnqdScyied4Uglsp14qzag1JIemLeTWGKbwpotWht57hbP78aNT+Q4wdFKQfQibbUX4fb6Qb4y11aVOQ==
 
-use-dark-mode@2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/use-dark-mode/-/use-dark-mode-2.3.1.tgz#d506349c7b7e09e9977cb8a6ab4470896aa3779a"
-  integrity sha512-hmcdJR96tTustRQdaQwe6jMrZHnmPqXBxgy4jaQ4gsfhwajsCpjECuq9prgDe9XxMx/f9r96o2/md6O4Lwhwjg==
-  dependencies:
-    "@use-it/event-listener" "^0.1.2"
-    use-persisted-state "^0.3.0"
-
-use-persisted-state@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/use-persisted-state/-/use-persisted-state-0.3.0.tgz#f8e3d2fd8eee67e0c86fd596c3ea3e8121c07402"
-  integrity sha512-UlWEq0JYg7NbvcRBZ1g6Bwe4SEbYfr1wr/D5mrmfCzSxXSwsPRYygGLlsxHcW58Rf7gGwRPBT23sNVvyVn4WYg==
-  dependencies:
-    "@use-it/event-listener" "^0.1.2"
+use-memo-one@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.1.tgz#39e6f08fe27e422a7d7b234b5f9056af313bd22c"
+  integrity sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ==
 
 use-sidecar@^1.0.1:
   version "1.0.3"