From ab3f718e6de0675f0b6c5dda745dd4135bd47041 Mon Sep 17 00:00:00 2001
From: Katalina <kayteh@users.noreply.github.com>
Date: Thu, 8 Jul 2021 16:51:00 -0500
Subject: [PATCH] Feat/editor as preview (#294)

* try editor as preview

* add databinding for editor actions and message

* add actions, reordering base interactions

* add drag and drop ordering for categoriers

* category skeleton

* fix linting issues

* add role list and add button, non-functional

* bump packages

* add role search prototype

* yarn.lock sync

* fix lint

* remove cfw-emulator bin
---
 package.json                                  |   8 +-
 packages/api/index.ts                         |   2 +
 packages/backend-emulator/package.json        |   3 -
 .../atoms/breakpoints/BreakpointText.tsx      |  26 +
 .../design-system/atoms/breakpoints/index.ts  |   1 +
 .../atoms/button/Button.styled.ts             |   7 +
 .../atoms/text-input/TextInput.tsx            |  17 +-
 .../atoms/toggle/Toggle.styled.tsx            |   6 +-
 .../EditableServerMessage.stories.tsx         |  26 +
 .../EditableServerMessage.tsx                 |  37 +
 .../editable-server-message/index.ts          |   1 +
 .../EditorCategoryShort.spec.tsx              |  12 -
 .../EditorCategoryShort.stories.tsx           |  30 -
 .../EditorCategoryShort.styled.ts             |  60 --
 .../EditorCategoryShort.tsx                   |  31 -
 .../molecules/editor-category-short/index.ts  |   1 -
 .../EditorCategory.stories.tsx                |  35 +-
 .../editor-category/EditorCategory.styled.ts  |  77 +-
 .../editor-category/EditorCategory.tsx        | 261 +++----
 .../molecules/editor-category/index.ts        |   2 +-
 .../organisms/app-shell/AppShell.styled.tsx   |   4 +-
 .../organisms/app-shell/AppShell.tsx          |   5 +-
 .../EditorCategoriesTab.stories.tsx           |  12 -
 .../EditorCategoriesTab.styled.ts             |   8 -
 .../EditorCategoriesTab.tsx                   |  39 -
 .../organisms/editor-categories-tab/index.ts  |   1 -
 .../editor-details-tab/EditorDetailsTab.tsx   |  20 -
 .../organisms/editor-details-tab/index.ts     |   1 -
 .../editor-shell/EditorShell.stories.tsx      |  10 +-
 .../organisms/editor-shell/EditorShell.tsx    |  76 +-
 .../organisms/masthead/Masthead.stories.tsx   |  13 +
 .../organisms/masthead/Masthead.styled.tsx    |  26 +
 .../organisms/masthead/Secondary.tsx          |  46 ++
 .../design-system/organisms/masthead/index.ts |   1 +
 .../ServerCategoryEditor.styled.ts            |  49 ++
 .../ServerCategoryEditor.tsx                  | 203 ++++++
 .../organisms/server-category-editor/index.ts |   1 +
 packages/design-system/package.json           |  28 +-
 .../templates/editor/Editor.stories.tsx       |  10 +
 .../design-system/templates/editor/Editor.tsx |   2 +-
 packages/web/package.json                     |  16 +-
 packages/web/src/pages/editor.tsx             |   4 +-
 yarn.lock                                     | 680 ++++++++++--------
 43 files changed, 1157 insertions(+), 741 deletions(-)
 create mode 100644 packages/design-system/atoms/breakpoints/BreakpointText.tsx
 create mode 100644 packages/design-system/molecules/editable-server-message/EditableServerMessage.stories.tsx
 create mode 100644 packages/design-system/molecules/editable-server-message/EditableServerMessage.tsx
 create mode 100644 packages/design-system/molecules/editable-server-message/index.ts
 delete mode 100644 packages/design-system/molecules/editor-category-short/EditorCategoryShort.spec.tsx
 delete mode 100644 packages/design-system/molecules/editor-category-short/EditorCategoryShort.stories.tsx
 delete mode 100644 packages/design-system/molecules/editor-category-short/EditorCategoryShort.styled.ts
 delete mode 100644 packages/design-system/molecules/editor-category-short/EditorCategoryShort.tsx
 delete mode 100644 packages/design-system/molecules/editor-category-short/index.ts
 delete mode 100644 packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.stories.tsx
 delete mode 100644 packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.styled.ts
 delete mode 100644 packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.tsx
 delete mode 100644 packages/design-system/organisms/editor-categories-tab/index.ts
 delete mode 100644 packages/design-system/organisms/editor-details-tab/EditorDetailsTab.tsx
 delete mode 100644 packages/design-system/organisms/editor-details-tab/index.ts
 create mode 100644 packages/design-system/organisms/masthead/Secondary.tsx
 create mode 100644 packages/design-system/organisms/server-category-editor/ServerCategoryEditor.styled.ts
 create mode 100644 packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx
 create mode 100644 packages/design-system/organisms/server-category-editor/index.ts

diff --git a/package.json b/package.json
index f3b1f86..6f369ce 100644
--- a/package.json
+++ b/package.json
@@ -36,12 +36,12 @@
     "test": "jest"
   },
   "devDependencies": {
-    "@types/enzyme": "^3.10.8",
-    "@types/lodash": "^4.14.170",
+    "@types/enzyme": "^3.10.9",
+    "@types/lodash": "^4.14.171",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
-    "husky": "^6.0.0",
+    "husky": "^7.0.1",
     "is-ci": "^3.0.0",
     "jest": "26.6.0",
     "jest-enzyme": "^7.1.2",
@@ -59,7 +59,7 @@
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-prettier": "^1.2.0",
     "ts-jest": "^26.0.0",
-    "typescript": "^4.3.4"
+    "typescript": "^4.3.5"
   },
   "resolutions": {
     "webpack": "4.44.2"
diff --git a/packages/api/index.ts b/packages/api/index.ts
index b0669da..36e40f0 100644
--- a/packages/api/index.ts
+++ b/packages/api/index.ts
@@ -8,6 +8,7 @@ import { LoginBounce } from './handlers/login-bounce';
 import { LoginCallback } from './handlers/login-callback';
 import { RevokeSession } from './handlers/revoke-session';
 import { SyncFromLegacy } from './handlers/sync-from-legacy';
+import { UpdateGuild } from './handlers/update-guild';
 import { UpdateRoles } from './handlers/update-roles';
 import { Router } from './router';
 import { respond } from './utils/api-tools';
@@ -28,6 +29,7 @@ router.add('POST', 'revoke-session', RevokeSession);
 router.add('GET', 'get-slug', GetSlug);
 router.add('GET', 'get-picker-data', GetPickerData);
 router.add('PATCH', 'update-roles', UpdateRoles);
+router.add('PATCH', 'update-guild', UpdateGuild);
 router.add('POST', 'sync-from-legacy', SyncFromLegacy);
 router.add('POST', 'clear-guild-cache', ClearGuildCache);
 
diff --git a/packages/backend-emulator/package.json b/packages/backend-emulator/package.json
index 0e7e59e..7c81e71 100644
--- a/packages/backend-emulator/package.json
+++ b/packages/backend-emulator/package.json
@@ -1,9 +1,6 @@
 {
   "name": "@roleypoly/worker-emulator",
   "version": "0.1.0",
-  "bin": {
-    "cfw-emulator": "./main.js"
-  },
   "scripts": {
     "build": "node main.js --build",
     "start": "node main.js"
diff --git a/packages/design-system/atoms/breakpoints/BreakpointText.tsx b/packages/design-system/atoms/breakpoints/BreakpointText.tsx
new file mode 100644
index 0000000..a04a01b
--- /dev/null
+++ b/packages/design-system/atoms/breakpoints/BreakpointText.tsx
@@ -0,0 +1,26 @@
+import styled, { css } from 'styled-components';
+import { onSmallScreen } from './Breakpoints';
+
+const ShowOnSmall = styled.span`
+  display: none;
+  ${onSmallScreen(css`
+    display: initial;
+  `)}
+`;
+
+const ShowOnLarge = styled.span`
+  display: initial;
+  ${onSmallScreen(css`
+    display: none;
+  `)}
+`;
+
+export const BreakpointText = (props: { small: string; large: string }) => {
+  const { small, large } = props;
+  return (
+    <>
+      <ShowOnSmall>{small}</ShowOnSmall>
+      <ShowOnLarge>{large}</ShowOnLarge>
+    </>
+  );
+};
diff --git a/packages/design-system/atoms/breakpoints/index.ts b/packages/design-system/atoms/breakpoints/index.ts
index d72bd04..fea0bcd 100644
--- a/packages/design-system/atoms/breakpoints/index.ts
+++ b/packages/design-system/atoms/breakpoints/index.ts
@@ -1,3 +1,4 @@
 export * from './BreakpointProvider';
 export * from './Breakpoints';
+export * from './BreakpointText';
 export * from './Context';
diff --git a/packages/design-system/atoms/button/Button.styled.ts b/packages/design-system/atoms/button/Button.styled.ts
index 26d3247..49819ea 100644
--- a/packages/design-system/atoms/button/Button.styled.ts
+++ b/packages/design-system/atoms/button/Button.styled.ts
@@ -67,6 +67,13 @@ const colors = {
       background-color: ${palette.taupe200};
     }
   `,
+  silent: css`
+    background: none;
+    border-color: transparent;
+    :hover {
+      background-color: ${palette.taupe200};
+    }
+  `,
 };
 
 const sizes = {
diff --git a/packages/design-system/atoms/text-input/TextInput.tsx b/packages/design-system/atoms/text-input/TextInput.tsx
index 2abf17c..9bfbec3 100644
--- a/packages/design-system/atoms/text-input/TextInput.tsx
+++ b/packages/design-system/atoms/text-input/TextInput.tsx
@@ -94,18 +94,27 @@ const StyledTextarea = styled.textarea`
 export const MultilineTextInput = (
   props: TextInputProps<HTMLTextAreaElement> & { rows?: number }
 ) => {
-  const { ...rest } = props;
+  const { children, ...rest } = props;
   const [value, setValue] = React.useState(String(props.value));
-  const rows = Math.min(10, Math.max(props.rows || 2, value.split(/\r?\n/).length));
+  const rows = React.useMemo(
+    () => Math.min(10, Math.max(props.rows || 2, value.split(/\r?\n/).length)),
+    [value]
+  );
+
+  React.useEffect(() => {
+    setValue(String(props.value));
+  }, [props.value]);
+
   return (
     <StyledTextarea
       {...rest}
       rows={rows}
-      value={value}
       onChange={(eventData) => {
         setValue(eventData.target.value);
         props.onChange?.(eventData);
       }}
-    />
+    >
+      {value}
+    </StyledTextarea>
   );
 };
diff --git a/packages/design-system/atoms/toggle/Toggle.styled.tsx b/packages/design-system/atoms/toggle/Toggle.styled.tsx
index d4df415..8342f58 100644
--- a/packages/design-system/atoms/toggle/Toggle.styled.tsx
+++ b/packages/design-system/atoms/toggle/Toggle.styled.tsx
@@ -20,9 +20,9 @@ export const ToggleState = styled.div`
 export const ToggleSwitch = styled.div<{ state: boolean }>`
   display: inline-block;
   background-color: ${(props) => (props.state ? palette.green200 : 'rgba(0,0,0,0.45)')};
-  height: 1.3em;
-  width: 2.6em;
-  border-radius: 1.3em;
+  height: 1.375rem;
+  width: 2.675rem;
+  border-radius: 1.375rem;
   position: relative;
   border: 1px solid rgba(0, 0, 0, 0.1);
   top: 0.23em;
diff --git a/packages/design-system/molecules/editable-server-message/EditableServerMessage.stories.tsx b/packages/design-system/molecules/editable-server-message/EditableServerMessage.stories.tsx
new file mode 100644
index 0000000..aa1fa0f
--- /dev/null
+++ b/packages/design-system/molecules/editable-server-message/EditableServerMessage.stories.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { mastheadSlugs } from '../../fixtures/storyData';
+import { EditableServerMessage } from './EditableServerMessage';
+export default {
+  title: 'Molecules/Editable Server Message',
+  component: EditableServerMessage,
+  args: {
+    value: 'Hello World',
+    guild: mastheadSlugs[1],
+  },
+};
+
+export const editableServerMessage = (args) => {
+  const [value, setValue] = React.useState(args.value);
+  React.useEffect(() => {
+    setValue(args.value);
+  }, [args.value]);
+
+  return (
+    <EditableServerMessage
+      {...args}
+      value={value}
+      onChange={(message) => setValue(message)}
+    />
+  );
+};
diff --git a/packages/design-system/molecules/editable-server-message/EditableServerMessage.tsx b/packages/design-system/molecules/editable-server-message/EditableServerMessage.tsx
new file mode 100644
index 0000000..40cbb20
--- /dev/null
+++ b/packages/design-system/molecules/editable-server-message/EditableServerMessage.tsx
@@ -0,0 +1,37 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
+import { MultilineTextInput } from '@roleypoly/design-system/atoms/text-input';
+import {
+  AmbientLarge,
+  Text as TextTypo,
+} from '@roleypoly/design-system/atoms/typography';
+import { MessageBox } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import { GuildSlug } from '@roleypoly/types';
+import { GoEyeClosed } from 'react-icons/go';
+
+type Props = {
+  guild: GuildSlug;
+  onChange: (newMessage: string) => void;
+  value: string;
+};
+
+export const EditableServerMessage = (props: Props) => (
+  <MessageBox>
+    <TextTypo>Server Message</TextTypo>
+    <MultilineTextInput
+      rows={2}
+      value={props.value}
+      onChange={(event) => props.onChange(event.target.value)}
+      placeholder={`Hey friend from ${props.guild.name}! Pick your roles!`}
+    >
+      {props.value}
+    </MultilineTextInput>
+    <AmbientLarge style={{ display: 'flex', color: palette.taupe600 }}>
+      Shows a message to your server members.
+      <FaderOpacity isVisible={props.value.trim().length === 0}>
+        &nbsp;Since the message is empty, this won't show up.&nbsp;&nbsp;&nbsp;
+        <GoEyeClosed style={{ position: 'relative', top: 2 }} />
+      </FaderOpacity>
+    </AmbientLarge>
+  </MessageBox>
+);
diff --git a/packages/design-system/molecules/editable-server-message/index.ts b/packages/design-system/molecules/editable-server-message/index.ts
new file mode 100644
index 0000000..ba5bfc9
--- /dev/null
+++ b/packages/design-system/molecules/editable-server-message/index.ts
@@ -0,0 +1 @@
+export * from './EditableServerMessage';
diff --git a/packages/design-system/molecules/editor-category-short/EditorCategoryShort.spec.tsx b/packages/design-system/molecules/editor-category-short/EditorCategoryShort.spec.tsx
deleted file mode 100644
index e6c6cf7..0000000
--- a/packages/design-system/molecules/editor-category-short/EditorCategoryShort.spec.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { mockCategory } from '@roleypoly/design-system/fixtures/storyData';
-import { render } from '@testing-library/react';
-import { EditorCategoryShort } from './EditorCategoryShort';
-
-it('triggers onOpen when clicked', async () => {
-  const onOpen = jest.fn();
-  const view = render(<EditorCategoryShort category={mockCategory} onOpen={onOpen} />);
-
-  view.getByRole('menuitem')?.click();
-
-  expect(onOpen).toHaveBeenCalled();
-});
diff --git a/packages/design-system/molecules/editor-category-short/EditorCategoryShort.stories.tsx b/packages/design-system/molecules/editor-category-short/EditorCategoryShort.stories.tsx
deleted file mode 100644
index bc2b0a5..0000000
--- a/packages/design-system/molecules/editor-category-short/EditorCategoryShort.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { mockCategory } from '@roleypoly/design-system/fixtures/storyData';
-import ReactTooltip from 'react-tooltip';
-import styled from 'styled-components';
-import { EditorCategoryShort } from './EditorCategoryShort';
-
-const decorator = (story) => (
-  <Wrapper>
-    {story()}
-    <ReactTooltip />
-  </Wrapper>
-);
-
-export default {
-  title: 'Molecules/Short Category',
-  component: EditorCategoryShort,
-  args: {
-    category: mockCategory,
-  },
-  decorators: [decorator],
-};
-
-const Wrapper = styled.div`
-  box-shadow: 0 0 10px #000;
-`;
-
-export const shortEditor = (args) => <EditorCategoryShort {...args} />;
-export const shortEditorHidden = (args) => <EditorCategoryShort {...args} />;
-shortEditorHidden.args = {
-  category: { ...mockCategory, hidden: true },
-};
diff --git a/packages/design-system/molecules/editor-category-short/EditorCategoryShort.styled.ts b/packages/design-system/molecules/editor-category-short/EditorCategoryShort.styled.ts
deleted file mode 100644
index 2b9c2a0..0000000
--- a/packages/design-system/molecules/editor-category-short/EditorCategoryShort.styled.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { transitions } from '@roleypoly/design-system/atoms/timings';
-import styled from 'styled-components';
-
-export const GrabberBox = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 1em;
-  flex: 0;
-  cursor: grab;
-  position: relative;
-
-  ::before {
-    content: '';
-    position: absolute;
-    top: -5px;
-    left: -8px;
-    width: 32px;
-    height: 32px;
-    background-color: rgba(0, 0, 0, 0.25);
-    opacity: 0;
-    border-radius: 50%;
-    transition: opacity ${transitions.actionable}s ease-in-out;
-  }
-
-  &:hover {
-    ::before {
-      opacity: 1;
-    }
-  }
-`;
-
-export const Opener = styled.div`
-  opacity: 0;
-  transition: opacity ${transitions.actionable}s ease-in-out;
-`;
-
-export const Container = styled.div`
-  display: flex;
-  padding: 1em;
-  cursor: pointer;
-
-  &:hover {
-    ${Opener} {
-      opacity: 1;
-    }
-  }
-`;
-
-export const Name = styled.div`
-  position: relative;
-  top: -2px;
-  margin-right: 1em;
-`;
-
-export const Flags = styled.div``;
-
-export const Void = styled.div`
-  flex: 1;
-`;
diff --git a/packages/design-system/molecules/editor-category-short/EditorCategoryShort.tsx b/packages/design-system/molecules/editor-category-short/EditorCategoryShort.tsx
deleted file mode 100644
index 67f1712..0000000
--- a/packages/design-system/molecules/editor-category-short/EditorCategoryShort.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Category } from '@roleypoly/types';
-import { DragEventHandler, MouseEventHandler } from 'react';
-import { GoEyeClosed, GoGrabber, GoKebabHorizontal } from 'react-icons/go';
-import {
-  Container,
-  Flags,
-  GrabberBox,
-  Name,
-  Opener,
-  Void,
-} from './EditorCategoryShort.styled';
-
-type ShortProps = {
-  category: Category;
-  onDrag?: DragEventHandler;
-  onOpen?: MouseEventHandler;
-};
-
-export const EditorCategoryShort = (props: ShortProps) => (
-  <Container onClick={props.onOpen} role="menuitem">
-    <GrabberBox onDrag={props.onDrag} role="button">
-      <GoGrabber />
-    </GrabberBox>
-    <Name>{props.category.name}</Name>
-    <Flags>{props.category.hidden && <GoEyeClosed data-tip="Hidden to Members" />}</Flags>
-    <Void />
-    <Opener role="button">
-      <GoKebabHorizontal />
-    </Opener>
-  </Container>
-);
diff --git a/packages/design-system/molecules/editor-category-short/index.ts b/packages/design-system/molecules/editor-category-short/index.ts
deleted file mode 100644
index 0840f96..0000000
--- a/packages/design-system/molecules/editor-category-short/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './EditorCategoryShort';
diff --git a/packages/design-system/molecules/editor-category/EditorCategory.stories.tsx b/packages/design-system/molecules/editor-category/EditorCategory.stories.tsx
index 332c913..e7f2156 100644
--- a/packages/design-system/molecules/editor-category/EditorCategory.stories.tsx
+++ b/packages/design-system/molecules/editor-category/EditorCategory.stories.tsx
@@ -1,19 +1,30 @@
 import * as React from 'react';
-import { mockCategory, roleCategory, roleCategory2 } from '../../fixtures/storyData';
+import { mockCategory, roleCategory } from '../../fixtures/storyData';
 import { EditorCategory } from './EditorCategory';
 
 export default {
-  title: 'Molecules/Editor/Category',
+  title: 'Molecules/Editor Category',
+  component: EditorCategory,
+  args: {
+    title: 'Pronouns',
+    roles: roleCategory,
+    category: mockCategory,
+    selectedRoles: [],
+  },
 };
 
-export const CategoryEditor = () => {
-  const [categoryData, setCategoryData] = React.useState(mockCategory);
-  return (
-    <EditorCategory
-      category={categoryData}
-      onChange={(category) => setCategoryData(category)}
-      uncategorizedRoles={roleCategory}
-      guildRoles={[...roleCategory, ...roleCategory2]}
-    />
-  );
+export const Default = (args) => {
+  return <EditorCategory {...args} />;
+};
+export const Single = (args) => {
+  return <EditorCategory {...args} type="single" />;
+};
+Single.args = {
+  type: 'single',
+};
+export const Multi = (args) => {
+  return <EditorCategory {...args} type="single" />;
+};
+Multi.args = {
+  type: 'multi',
 };
diff --git a/packages/design-system/molecules/editor-category/EditorCategory.styled.ts b/packages/design-system/molecules/editor-category/EditorCategory.styled.ts
index b3cf806..b8e9c31 100644
--- a/packages/design-system/molecules/editor-category/EditorCategory.styled.ts
+++ b/packages/design-system/molecules/editor-category/EditorCategory.styled.ts
@@ -1,13 +1,78 @@
-import styled from 'styled-components';
+import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
+import styled, { css } from 'styled-components';
+
+export const Head = styled.div`
+  margin: 7px 5px;
+  line-height: 200%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const HeadTitle = styled.div`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+export const HeadSub = styled.div`
+  flex-shrink: 0;
+  margin-top: -4px;
+`;
+
+export const Box = styled.div`
+  display: flex;
+  align-items: top;
+  justify-content: space-between;
+  flex-wrap: wrap;
+`;
+
+export const Section = styled.div<{ big?: boolean }>`
+  padding: 7px 5px;
+  flex: 1 2 ${(props) => (props.big ? '100%' : '50%')};
+  ${onSmallScreen(css`
+    flex-basis: 100%;
+  `)}
+`;
 
 export const RoleContainer = styled.div`
   display: flex;
-  margin: 10px;
   flex-wrap: wrap;
-
   & > div {
-    /* This should be a Role element */
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    margin: 1px;
+    margin: 2.5px;
   }
 `;
+
+export const AddRoleButton = styled.div<{ long?: boolean }>`
+  border: 2px solid ${palette.taupe500};
+  color: ${palette.taupe500};
+  border-radius: 24px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all ${transitions.actionable}s ease-in-out;
+
+  &:hover {
+    background-color: ${palette.taupe100};
+    transform: translateY(-2px);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: none;
+  }
+
+  ${(props) =>
+    props.long
+      ? css`
+          padding: 0 14px;
+        `
+      : css`
+          width: 32px;
+        `};
+`;
diff --git a/packages/design-system/molecules/editor-category/EditorCategory.tsx b/packages/design-system/molecules/editor-category/EditorCategory.tsx
index 57787ef..d6485ad 100644
--- a/packages/design-system/molecules/editor-category/EditorCategory.tsx
+++ b/packages/design-system/molecules/editor-category/EditorCategory.tsx
@@ -1,142 +1,159 @@
-import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
 import { Popover } from '@roleypoly/design-system/atoms/popover';
 import { Role } from '@roleypoly/design-system/atoms/role';
-import { Space } from '@roleypoly/design-system/atoms/space';
-import { TextInput, TextInputWithIcon } from '@roleypoly/design-system/atoms/text-input';
+import { TextInput } from '@roleypoly/design-system/atoms/text-input';
 import { Toggle } from '@roleypoly/design-system/atoms/toggle';
 import { Text } from '@roleypoly/design-system/atoms/typography';
 import { RoleSearch } from '@roleypoly/design-system/molecules/role-search';
-import { Category, CategoryType, Role as RoleType } from '@roleypoly/types';
+import { Category as CategoryT, CategoryType, Role as RoleT } from '@roleypoly/types';
+import { sortBy, uniq } from 'lodash';
 import * as React from 'react';
-import { GoSearch } from 'react-icons/go';
-import { RoleContainer } from './EditorCategory.styled';
+import { GoPlus } from 'react-icons/go';
+import ReactTooltip from 'react-tooltip';
+import { AddRoleButton, Box, RoleContainer, Section } from './EditorCategory.styled';
 
-type Props = {
-  category: Category;
-  uncategorizedRoles: RoleType[];
-  guildRoles: RoleType[];
-  onChange: (category: Category) => void;
+export type CategoryProps = {
+  title: string;
+  roles: RoleT[];
+  category: CategoryT;
+  unselectedRoles: RoleT[];
+  onChange: (updatedCategory: CategoryT) => void;
 };
 
-const typeEnumToSwitch = (typeData: CategoryType) => {
-  if (typeData === CategoryType.Single) {
-    return 'Single';
-  } else {
-    return 'Multiple';
-  }
-};
+export const EditorCategory = (props: CategoryProps) => {
+  const [searchOpen, setSearchOpen] = React.useState(false);
 
-const switchToTypeEnum = (typeData: 'Single' | 'Multiple') => {
-  if (typeData === 'Single') {
-    return CategoryType.Single;
-  } else {
-    return CategoryType.Multi;
-  }
-};
-
-export const EditorCategory = (props: Props) => {
-  const [roleSearchPopoverActive, setRoleSearchPopoverActive] = React.useState(false);
-  const [roleSearchTerm, updateSearchTerm] = React.useState('');
-
-  const onUpdate =
-    (key: keyof typeof props.category, pred?: (newValue: any) => any) =>
-    (newValue: any) => {
-      props.onChange({
-        ...props.category,
-        [key]: pred ? pred(newValue) : newValue,
-      });
-    };
-
-  const handleRoleSelect = (role: RoleType) => {
-    setRoleSearchPopoverActive(false);
-    updateSearchTerm('');
-    props.onChange({
-      ...props.category,
-      roles: [...props.category.roles, role.id],
-    });
+  const updateValue = <T extends keyof CategoryT>(key: T, value: CategoryT[T]) => {
+    props.onChange({ ...props.category, [key]: value });
   };
 
-  const handleRoleDeselect = (role: RoleType) => () => {
-    props.onChange({
-      ...props.category,
-      roles: props.category.roles.filter((x) => x !== role.id),
-    });
+  const handleRoleDelete = (role: RoleT) => () => {
+    const updatedRoles = props.category.roles.filter((r) => r !== role.id);
+    updateValue('roles', updatedRoles);
+  };
+
+  const handleRoleAdd = (role: RoleT) => {
+    const updatedRoles = uniq([...props.category.roles, role.id]);
+    updateValue('roles', updatedRoles);
+    setSearchOpen(false);
+  };
+
+  const handleSearchOpen = () => {
+    setSearchOpen(true);
   };
 
   return (
-    <div>
-      <Text>Category Name</Text>
-      <TextInput
-        placeholder="Pronouns, Political, Colors..."
-        value={props.category.name}
-        onChange={onUpdate('name', (x) => x.target.value)}
-      />
-
-      <Space />
-
-      <div>
-        <Toggle
-          state={props.category.type === CategoryType.Multi}
-          onChange={onUpdate('type', (x) =>
-            x ? CategoryType.Multi : CategoryType.Single
-          )}
-        >
-          Allow users to pick multiple roles
-        </Toggle>
-      </div>
-
-      <Space />
-      <div>
-        <Toggle state={props.category.hidden} onChange={onUpdate('hidden')}>
-          Hide category from users
-        </Toggle>
-      </div>
-
-      <Space />
-      <Text>Roles</Text>
-      <Popover
-        position={'top left'}
-        headContent={null}
-        active={roleSearchPopoverActive}
-        onExit={() => setRoleSearchPopoverActive(false)}
-      >
-        {() => (
-          <RoleSearch
-            placeholder={'Type or drag a role...'}
-            roles={props.uncategorizedRoles}
-            onSelect={handleRoleSelect}
-            searchTerm={roleSearchTerm}
-            onSearchUpdate={(newTerm) => updateSearchTerm(newTerm)}
-          />
-        )}
-      </Popover>
-      <FaderOpacity isVisible={!roleSearchPopoverActive}>
-        <TextInputWithIcon
-          icon={<GoSearch />}
-          placeholder={'Type or drag a role...'}
-          onFocus={() => setRoleSearchPopoverActive(true)}
-          value={roleSearchTerm}
-          onChange={(x) => updateSearchTerm(x.target.value)}
+    <Box>
+      <Section>
+        <div>
+          <Text>Category Name</Text>
+        </div>
+        <TextInput
+          value={props.category.name}
+          onChange={(event) => updateValue('name', event.target.value)}
         />
-        <RoleContainer>
-          {props.category.roles.map((id) => {
-            const role = props.guildRoles.find((x) => x.id === id);
-            if (!role) {
-              return <></>;
-            }
+      </Section>
 
-            return (
-              <Role
-                role={role}
-                selected={false}
-                key={id}
-                type="delete"
-                onClick={handleRoleDeselect(role)}
-              />
-            );
-          })}
+      <Section>
+        <div>
+          <Text>Options</Text>
+        </div>
+        <div>
+          <Toggle
+            state={props.category.hidden}
+            onChange={(value) => updateValue('hidden', value)}
+          >
+            Show this category to members
+          </Toggle>
+          <Toggle
+            state={props.category.type === CategoryType.Multi}
+            onChange={(value) =>
+              updateValue('type', value ? CategoryType.Multi : CategoryType.Single)
+            }
+          >
+            Let members pick more than one role
+          </Toggle>
+        </div>
+      </Section>
+
+      <Section big>
+        <div>
+          <Text>Roles</Text>
+        </div>
+        <RoleContainer>
+          {props.roles.length > 0 ? (
+            <>
+              {sortBy(props.roles, 'position').map((role) => (
+                <Role
+                  key={role.id}
+                  role={role}
+                  selected={false}
+                  type="delete"
+                  onClick={handleRoleDelete(role)}
+                />
+              ))}
+              <RoleAddButton onClick={handleSearchOpen} tooltipId={props.category.id} />
+            </>
+          ) : (
+            <RoleAddButton
+              long
+              onClick={handleSearchOpen}
+              tooltipId={props.category.id}
+            />
+          )}
+          <RoleSearchPopover
+            isOpen={searchOpen}
+            onExit={() => setSearchOpen(false)}
+            unselectedRoles={props.unselectedRoles}
+            onSelect={handleRoleAdd}
+          />
         </RoleContainer>
-      </FaderOpacity>
-    </div>
+      </Section>
+
+      <ReactTooltip id={props.category.id} />
+    </Box>
+  );
+};
+
+const RoleAddButton = (props: {
+  onClick: () => void;
+  tooltipId: string;
+  long?: boolean;
+}) => (
+  <AddRoleButton
+    data-tip="Add a role to the category"
+    data-for={props.tooltipId}
+    onClick={props.onClick}
+    long={props.long}
+  >
+    {props.long && <>Add a role&nbsp;&nbsp;</>}
+    <GoPlus />
+  </AddRoleButton>
+);
+
+const RoleSearchPopover = (props: {
+  onSelect: (role: RoleT) => void;
+  onExit: (type: string) => void;
+  isOpen: boolean;
+  unselectedRoles: RoleT[];
+}) => {
+  const [searchTerm, setSearchTerm] = React.useState('');
+
+  return (
+    <Popover
+      position="top left"
+      active={props.isOpen}
+      canDefocus
+      onExit={props.onExit}
+      headContent={null}
+    >
+      {() => (
+        <RoleSearch
+          onSelect={props.onSelect}
+          roles={props.unselectedRoles}
+          searchTerm={searchTerm}
+          onSearchUpdate={setSearchTerm}
+        />
+      )}
+    </Popover>
   );
 };
diff --git a/packages/design-system/molecules/editor-category/index.ts b/packages/design-system/molecules/editor-category/index.ts
index 67c2556..f50a935 100644
--- a/packages/design-system/molecules/editor-category/index.ts
+++ b/packages/design-system/molecules/editor-category/index.ts
@@ -1 +1 @@
-export * from './EditorCategory';
+export { EditorCategory } from './EditorCategory';
diff --git a/packages/design-system/organisms/app-shell/AppShell.styled.tsx b/packages/design-system/organisms/app-shell/AppShell.styled.tsx
index 9ff0c68..bc0b6bb 100644
--- a/packages/design-system/organisms/app-shell/AppShell.styled.tsx
+++ b/packages/design-system/organisms/app-shell/AppShell.styled.tsx
@@ -2,9 +2,9 @@ import { palette } from '@roleypoly/design-system/atoms/colors';
 import { fontCSS } from '@roleypoly/design-system/atoms/fonts';
 import styled, { createGlobalStyle } from 'styled-components';
 
-export const Content = styled.div<{ small?: boolean }>`
+export const Content = styled.div<{ small?: boolean; double?: boolean }>`
   margin: 0 auto;
-  margin-top: 50px;
+  margin-top: ${(props) => (props.double ? '100px' : '50px')};
   width: ${(props) => (props.small ? '960px' : '1024px')};
   max-width: 98vw;
   max-height: calc(100vh - 50px);
diff --git a/packages/design-system/organisms/app-shell/AppShell.tsx b/packages/design-system/organisms/app-shell/AppShell.tsx
index 2e348cd..f19e2d5 100644
--- a/packages/design-system/organisms/app-shell/AppShell.tsx
+++ b/packages/design-system/organisms/app-shell/AppShell.tsx
@@ -11,6 +11,7 @@ export type AppShellProps = {
   user?: DiscordUser;
   showFooter?: boolean;
   small?: boolean;
+  double?: boolean;
   activeGuildId?: string | null;
   guilds?: GuildSlug[];
   recentGuilds?: string[];
@@ -56,7 +57,9 @@ export const AppShell = (props: AppShellProps) => (
     )}
     <OptionallyScroll shouldScroll={!props.skeleton}>
       <>
-        <Content small={props.small}>{props.children}</Content>
+        <Content small={props.small} double={props.double}>
+          {props.children}
+        </Content>
         {props.showFooter && <Footer />}
       </>
     </OptionallyScroll>
diff --git a/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.stories.tsx b/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.stories.tsx
deleted file mode 100644
index 2c9bfd6..0000000
--- a/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { guildEnum } from '@roleypoly/design-system/fixtures/storyData';
-import { EditorCategoriesTab } from './EditorCategoriesTab';
-
-export default {
-  title: 'Organisms/Editor/Categories Tab',
-  component: EditorCategoriesTab,
-  args: {
-    guild: guildEnum.guilds[0],
-  },
-};
-
-export const categoriesTab = (args) => <EditorCategoriesTab {...args} />;
diff --git a/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.styled.ts b/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.styled.ts
deleted file mode 100644
index 61c0931..0000000
--- a/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.styled.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { palette } from '@roleypoly/design-system/atoms/colors';
-import styled from 'styled-components';
-
-export const CategoryContainer = styled.div`
-  background-color: ${palette.taupe100};
-  padding: 10px;
-  margin: 15px 0;
-`;
diff --git a/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.tsx b/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.tsx
deleted file mode 100644
index 3ce66d0..0000000
--- a/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { TabDepth } from '@roleypoly/design-system/atoms/tab-view/TabView.styled';
-import { EditorCategory } from '@roleypoly/design-system/molecules/editor-category';
-import { EditorCategoryShort } from '@roleypoly/design-system/molecules/editor-category-short/EditorCategoryShort';
-import { EditorShellProps } from '@roleypoly/design-system/organisms/editor-shell';
-import { Category } from '@roleypoly/types';
-import { sortBy } from 'lodash';
-import * as React from 'react';
-import { CategoryContainer } from './EditorCategoriesTab.styled';
-
-export const EditorCategoriesTab = (props: EditorShellProps) => {
-  const [openStates, setOpenStates] = React.useState<Category['id'][]>([]);
-
-  const onCategoryOpen = (id: Category['id']) => () => {
-    setOpenStates([...new Set(openStates).add(id)]);
-  };
-
-  return (
-    <TabDepth>
-      {sortBy(props.guild.data.categories, ['position', 'id']).map((category, idx) =>
-        openStates.includes(category.id) ? (
-          <CategoryContainer key={idx}>
-            <EditorCategory
-              category={category}
-              uncategorizedRoles={[]}
-              guildRoles={props.guild.roles}
-              onChange={(category) => props.onCategoryChange?.(category)}
-            />
-          </CategoryContainer>
-        ) : (
-          <EditorCategoryShort
-            key={idx}
-            category={category}
-            onOpen={onCategoryOpen(category.id)}
-          />
-        )
-      )}
-    </TabDepth>
-  );
-};
diff --git a/packages/design-system/organisms/editor-categories-tab/index.ts b/packages/design-system/organisms/editor-categories-tab/index.ts
deleted file mode 100644
index 43cb362..0000000
--- a/packages/design-system/organisms/editor-categories-tab/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './EditorCategoriesTab';
diff --git a/packages/design-system/organisms/editor-details-tab/EditorDetailsTab.tsx b/packages/design-system/organisms/editor-details-tab/EditorDetailsTab.tsx
deleted file mode 100644
index e647c61..0000000
--- a/packages/design-system/organisms/editor-details-tab/EditorDetailsTab.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Space } from '@roleypoly/design-system/atoms/space';
-import { TabDepth } from '@roleypoly/design-system/atoms/tab-view/TabView.styled';
-import { MultilineTextInput } from '@roleypoly/design-system/atoms/text-input';
-import { Text } from '@roleypoly/design-system/atoms/typography';
-import { EditorShellProps } from '@roleypoly/design-system/organisms/editor-shell';
-import * as React from 'react';
-
-export const EditorDetailsTab = (props: EditorShellProps) => {
-  return (
-    <TabDepth>
-      <Space />
-      <Text>Server Message</Text>
-      <MultilineTextInput
-        value={props.guild.data.message}
-        onChange={(eventData) => props.onMessageChange?.(eventData.target.value)}
-      />
-      <Space />
-    </TabDepth>
-  );
-};
diff --git a/packages/design-system/organisms/editor-details-tab/index.ts b/packages/design-system/organisms/editor-details-tab/index.ts
deleted file mode 100644
index b40da5d..0000000
--- a/packages/design-system/organisms/editor-details-tab/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './EditorDetailsTab';
diff --git a/packages/design-system/organisms/editor-shell/EditorShell.stories.tsx b/packages/design-system/organisms/editor-shell/EditorShell.stories.tsx
index 296a3c8..351ef29 100644
--- a/packages/design-system/organisms/editor-shell/EditorShell.stories.tsx
+++ b/packages/design-system/organisms/editor-shell/EditorShell.stories.tsx
@@ -1,12 +1,20 @@
 import { BreakpointsProvider } from '@roleypoly/design-system/atoms/breakpoints';
 import { guildEnum } from '@roleypoly/design-system/fixtures/storyData';
 import * as React from 'react';
+import ReactTooltip from 'react-tooltip';
 import { EditorShell } from './EditorShell';
 
 export default {
   title: 'Organisms/Editor',
   component: EditorShell,
-  decorators: [(story) => <BreakpointsProvider>{story()}</BreakpointsProvider>],
+  decorators: [
+    (story) => (
+      <BreakpointsProvider>
+        {story()}
+        <ReactTooltip />
+      </BreakpointsProvider>
+    ),
+  ],
 };
 
 export const Shell = () => <EditorShell guild={guildEnum.guilds[0]} />;
diff --git a/packages/design-system/organisms/editor-shell/EditorShell.tsx b/packages/design-system/organisms/editor-shell/EditorShell.tsx
index 67d8c2c..48433b0 100644
--- a/packages/design-system/organisms/editor-shell/EditorShell.tsx
+++ b/packages/design-system/organisms/editor-shell/EditorShell.tsx
@@ -1,8 +1,9 @@
 import { Space } from '@roleypoly/design-system/atoms/space';
-import { Tab, TabView } from '@roleypoly/design-system/atoms/tab-view';
-import { EditorMasthead } from '@roleypoly/design-system/molecules/editor-masthead';
-import { EditorCategoriesTab } from '@roleypoly/design-system/organisms/editor-categories-tab';
-import { EditorDetailsTab } from '@roleypoly/design-system/organisms/editor-details-tab';
+import { EditableServerMessage } from '@roleypoly/design-system/molecules/editable-server-message';
+import { ServerMasthead } from '@roleypoly/design-system/molecules/server-masthead';
+import { SecondaryEditing } from '@roleypoly/design-system/organisms/masthead';
+import { Container } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import { ServerCategoryEditor } from '@roleypoly/design-system/organisms/server-category-editor';
 import { Category, PresentableGuild } from '@roleypoly/types';
 import deepEqual from 'deep-equal';
 import React from 'react';
@@ -17,16 +18,16 @@ export type EditorShellProps = {
 export const EditorShell = (props: EditorShellProps) => {
   const [guild, setGuild] = React.useState<PresentableGuild>(props.guild);
 
+  React.useEffect(() => {
+    setGuild(props.guild);
+  }, [props.guild]);
+
   const reset = () => {
     setGuild(props.guild);
   };
 
-  const onCategoryChange = (category: Category) => {
+  const replaceCategories = (categories: Category[]) => {
     setGuild((currentGuild) => {
-      const categories = [
-        ...currentGuild.data.categories.filter((x) => x.id !== category.id),
-        category,
-      ];
       return { ...currentGuild, data: { ...currentGuild.data, categories } };
     });
   };
@@ -37,45 +38,34 @@ export const EditorShell = (props: EditorShellProps) => {
     });
   };
 
+  const doSubmit = () => {
+    props.onGuildChange?.(guild);
+  };
+
   const hasChanges = React.useMemo(
     () => !deepEqual(guild.data, props.guild.data),
     [guild.data, props.guild.data]
   );
 
   return (
-    <div>
-      <Space />
-      <TabView
-        initialTab={0}
-        masthead={
-          <EditorMasthead
-            guild={guild}
-            onReset={reset}
-            onSubmit={() => props.onGuildChange?.(guild)}
-            showSaveReset={hasChanges}
-          />
-        }
-      >
-        <Tab title="Guild Details">
-          {() => (
-            <EditorDetailsTab
-              {...props}
-              guild={guild}
-              onMessageChange={onMessageChange}
-            />
-          )}
-        </Tab>
-        <Tab title="Categories & Roles">
-          {() => (
-            <EditorCategoriesTab
-              {...props}
-              guild={guild}
-              onCategoryChange={onCategoryChange}
-            />
-          )}
-        </Tab>
-        <Tab title="Utilities">{() => <div>hi2!</div>}</Tab>
-      </TabView>
-    </div>
+    <>
+      <SecondaryEditing
+        showReset={hasChanges}
+        guild={props.guild.guild}
+        onReset={reset}
+        onSubmit={doSubmit}
+      />
+      <Container style={{ marginTop: 95 }}>
+        <ServerMasthead guild={props.guild.guild} editable={false} />
+        <Space />
+        <EditableServerMessage
+          onChange={onMessageChange}
+          value={guild.data.message}
+          guild={guild.guild}
+        />
+        <Space />
+        <ServerCategoryEditor guild={guild} onChange={replaceCategories} />
+      </Container>
+    </>
   );
 };
diff --git a/packages/design-system/organisms/masthead/Masthead.stories.tsx b/packages/design-system/organisms/masthead/Masthead.stories.tsx
index 146cd3c..025ff7d 100644
--- a/packages/design-system/organisms/masthead/Masthead.stories.tsx
+++ b/packages/design-system/organisms/masthead/Masthead.stories.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { guild, mastheadSlugs, user } from '../../fixtures/storyData';
 import { Authed } from './Authed';
 import { Guest } from './Guest';
+import { SecondaryEditing } from './Secondary';
 import { Skeleton } from './Skeleton';
 
 export default {
@@ -12,6 +13,18 @@ export const hasGuilds = () => (
   <Authed guilds={mastheadSlugs} activeGuildId={guild.id} user={user} recentGuilds={[]} />
 );
 
+export const withSecondary = () => (
+  <>
+    <Authed
+      guilds={mastheadSlugs}
+      activeGuildId={mastheadSlugs[0].id}
+      user={user}
+      recentGuilds={[]}
+    />
+    <SecondaryEditing guild={mastheadSlugs[0]} showReset />
+  </>
+);
+
 export const noGuilds = () => (
   <Authed guilds={[]} activeGuildId={null} user={user} recentGuilds={[]} />
 );
diff --git a/packages/design-system/organisms/masthead/Masthead.styled.tsx b/packages/design-system/organisms/masthead/Masthead.styled.tsx
index 1304081..a622e11 100644
--- a/packages/design-system/organisms/masthead/Masthead.styled.tsx
+++ b/packages/design-system/organisms/masthead/Masthead.styled.tsx
@@ -91,3 +91,29 @@ export const GuildPopoverHead = styled.div`
     `)}
   }
 `;
+
+export const SecondaryBase = styled(MastheadBase)`
+  top: 50px;
+  background-color: ${palette.taupe300};
+  z-index: 99;
+  padding: 0 15px;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
+`;
+
+export const IconHolder = styled.div`
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  border: 2px solid ${palette.taupe200};
+  background-color: ${palette.taupe100};
+  margin-right: 1em;
+`;
+
+export const TextHolder = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
diff --git a/packages/design-system/organisms/masthead/Secondary.tsx b/packages/design-system/organisms/masthead/Secondary.tsx
new file mode 100644
index 0000000..7fd12d7
--- /dev/null
+++ b/packages/design-system/organisms/masthead/Secondary.tsx
@@ -0,0 +1,46 @@
+import { BreakpointText } from '@roleypoly/design-system/atoms/breakpoints';
+import { Button } from '@roleypoly/design-system/atoms/button';
+import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
+import { GuildSlug } from '@roleypoly/types';
+import { GoCheck, GoPencil } from 'react-icons/go';
+import {
+  IconHolder,
+  MastheadAlignment,
+  MastheadLeft,
+  MastheadRight,
+  SecondaryBase,
+  TextHolder,
+} from './Masthead.styled';
+
+type SecondaryEditingProps = {
+  guild: GuildSlug;
+  showReset: boolean;
+  onReset?: () => void;
+  onSubmit?: () => void;
+};
+
+export const SecondaryEditing = (props: SecondaryEditingProps) => (
+  <SecondaryBase>
+    <MastheadAlignment>
+      <MastheadLeft>
+        <TextHolder>
+          <IconHolder>
+            <GoPencil />
+          </IconHolder>
+          <BreakpointText small="Editing..." large={`Editing ${props.guild.name}...`} />
+        </TextHolder>
+      </MastheadLeft>
+      <MastheadRight>
+        <FaderOpacity isVisible={props.showReset}>
+          <Button size="small" color="silent" onClick={props.onReset}>
+            Reset
+          </Button>
+        </FaderOpacity>
+        &nbsp;&nbsp;
+        <Button size="small" onClick={props.onSubmit}>
+          Done <GoCheck />
+        </Button>
+      </MastheadRight>
+    </MastheadAlignment>
+  </SecondaryBase>
+);
diff --git a/packages/design-system/organisms/masthead/index.ts b/packages/design-system/organisms/masthead/index.ts
index 2fcce1b..373bde8 100644
--- a/packages/design-system/organisms/masthead/index.ts
+++ b/packages/design-system/organisms/masthead/index.ts
@@ -1,3 +1,4 @@
 export * from './Authed';
 export * from './Guest';
+export * from './Secondary';
 export * from './Skeleton';
diff --git a/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.styled.ts b/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.styled.ts
new file mode 100644
index 0000000..6bad385
--- /dev/null
+++ b/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.styled.ts
@@ -0,0 +1,49 @@
+import { transitions } from '@roleypoly/design-system/atoms/timings';
+import { CategoryContainer } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import styled, { css } from 'styled-components';
+
+export const CategoryActions = styled.div<{ right?: boolean }>`
+  display: flex;
+  flex-direction: row;
+
+  & > button {
+    ${(props) =>
+      props.right
+        ? css`
+            margin-left: 5px;
+          `
+        : css`
+            margin-right: 5px;
+          `};
+  }
+
+  ${(props) =>
+    props.right &&
+    css`
+      justify-content: flex-end;
+    `}
+`;
+
+export const ReorderButton = styled.div`
+  height: 40px;
+  width: 40px;
+  font-size: 20px;
+  margin-right: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color ${transitions.actionable}s ease-in-out;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.15);
+  }
+`;
+
+export const ReorderCategoryContainer = styled(CategoryContainer)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  user-select: none;
+`;
diff --git a/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx b/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx
new file mode 100644
index 0000000..c476828
--- /dev/null
+++ b/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx
@@ -0,0 +1,203 @@
+import { BreakpointText } from '@roleypoly/design-system/atoms/breakpoints';
+import { Button } from '@roleypoly/design-system/atoms/button';
+import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
+import { LargeText } from '@roleypoly/design-system/atoms/typography';
+import { EditorCategory } from '@roleypoly/design-system/molecules/editor-category';
+import { CategoryContainer } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import { Category, CategoryType, PresentableGuild, Role } from '@roleypoly/types';
+import KSUID from 'ksuid';
+import { flatten, sortBy } from 'lodash';
+import React from 'react';
+import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
+import { CgReorder } from 'react-icons/cg';
+import { GoArrowDown, GoArrowUp, GoCheck, GoGrabber, GoPlus } from 'react-icons/go';
+import {
+  CategoryActions,
+  ReorderButton,
+  ReorderCategoryContainer,
+} from './ServerCategoryEditor.styled';
+
+type Props = {
+  guild: PresentableGuild;
+  onChange: (categories: PresentableGuild['data']['categories']) => void;
+};
+
+const resetOrder = (categories: Category[]) =>
+  sortBy(categories, ['position', 'id']).map((c, index) => ({ ...c, position: index }));
+
+const forceOrder = (categories: Category[]) =>
+  categories.map((c, index) => ({ ...c, position: index }));
+
+export const ServerCategoryEditor = (props: Props) => {
+  const [reorderMode, setReorderMode] = React.useState(false);
+
+  const unselectedRoles = React.useMemo(() => {
+    const selectedRoles = flatten(props.guild.data.categories.map((c) => c.roles));
+    return props.guild.roles.filter((r) => !selectedRoles.includes(r.id));
+  }, [props.guild.data.categories, props.guild.roles]);
+
+  const updateSingleCategory = (category: Category) => {
+    const newCategories = props.guild.data.categories.map((c) => {
+      if (c.id === category.id) {
+        return category;
+      }
+      return c;
+    });
+    props.onChange(newCategories);
+  };
+
+  const createCategory = () => {
+    // Reset order now that we're creating a new category
+    const categories = resetOrder(props.guild.data.categories);
+
+    const newCategory: Category = {
+      id: KSUID.randomSync().string,
+      name: 'New Category',
+      type: CategoryType.Multi,
+      position: categories.length,
+      roles: [],
+      hidden: false,
+    };
+
+    props.onChange([...categories, newCategory]);
+  };
+
+  const onReorder = (categories: Category[] | null) => {
+    setReorderMode(false);
+    if (categories === null) {
+      return;
+    }
+
+    props.onChange(resetOrder(categories));
+  };
+
+  if (reorderMode) {
+    return <ReorderMode {...props} exitReorderMode={onReorder} />;
+  }
+
+  return (
+    <div>
+      <CategoryActions>
+        <Button color="muted" size="small" onClick={() => createCategory()}>
+          Create New <GoPlus />
+        </Button>
+        <Button color="muted" size="small" onClick={() => setReorderMode(true)}>
+          Change Order <CgReorder />
+        </Button>
+      </CategoryActions>
+      {sortBy(props.guild.data.categories, ['position', 'id']).map((category, idx) => (
+        <CategoryContainer key={idx}>
+          <EditorCategory
+            category={category}
+            title={category.name}
+            unselectedRoles={unselectedRoles}
+            roles={
+              category.roles
+                .map((role) => props.guild.roles.find((r) => r.id === role))
+                .filter((r) => r !== undefined) as Role[]
+            }
+            onChange={updateSingleCategory}
+          />
+        </CategoryContainer>
+      ))}
+    </div>
+  );
+};
+
+const ReorderMode = (
+  props: Props & { exitReorderMode: (final: Category[] | null) => void }
+) => {
+  const [categories, setCategories] = React.useState(props.guild.data.categories);
+
+  React.useEffect(() => {
+    setCategories(props.guild.data.categories);
+  }, [props.guild.data.categories]);
+
+  const handleReorder = (category: Category, direction: 'up' | 'down') => () => {
+    const newCategories = [...categories];
+    const index = newCategories.findIndex((c) => c.id === category.id);
+    const newIndex = direction === 'up' ? index - 1 : index + 1;
+
+    if (newIndex < 0 || newIndex > newCategories.length - 1) {
+      return;
+    }
+
+    newCategories.splice(index, 1);
+    newCategories.splice(newIndex, 0, category);
+    setCategories(forceOrder(newCategories));
+  };
+
+  const handleDrop = (dropEvent: DropResult) => {
+    const newCategories = [...categories];
+    const { source, destination } = dropEvent;
+
+    if (!destination || source.index === destination.index) {
+      return;
+    }
+
+    newCategories.splice(source.index, 1);
+    newCategories.splice(destination.index, 0, categories[source.index]);
+    setCategories(forceOrder(newCategories));
+  };
+
+  return (
+    <div>
+      <CategoryActions right>
+        <Button color="muted" size="small" onClick={() => props.exitReorderMode(null)}>
+          Cancel
+        </Button>
+        <Button
+          color="primary"
+          size="small"
+          onClick={() => props.exitReorderMode(categories)}
+        >
+          <BreakpointText small="Save" large="Save Order" /> <GoCheck />
+        </Button>
+      </CategoryActions>
+      <DragDropContext onDragEnd={handleDrop}>
+        <Droppable droppableId="categories">
+          {(provided, snapshot) => (
+            <div ref={provided.innerRef} {...provided.droppableProps}>
+              {sortBy(categories, ['position', 'id']).map((category, idx) => (
+                <Draggable key={category.id} index={idx} draggableId={category.id}>
+                  {(provided, snapshot) => (
+                    <ReorderCategoryContainer
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                    >
+                      <ReorderButton
+                        data-tip="Drag to reorder"
+                        style={{ cursor: 'grab' }}
+                        {...provided.dragHandleProps}
+                      >
+                        <GoGrabber />
+                      </ReorderButton>
+                      <FaderOpacity isVisible={idx !== 0}>
+                        <ReorderButton
+                          onClick={handleReorder(category, 'up')}
+                          data-tip="Move up"
+                        >
+                          <GoArrowUp />
+                        </ReorderButton>
+                      </FaderOpacity>
+                      <FaderOpacity isVisible={categories.length - 1 !== idx}>
+                        <ReorderButton
+                          onClick={handleReorder(category, 'down')}
+                          data-tip="Move down"
+                        >
+                          <GoArrowDown />
+                        </ReorderButton>
+                      </FaderOpacity>
+                      <LargeText>{category.name}</LargeText>
+                    </ReorderCategoryContainer>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </div>
+  );
+};
diff --git a/packages/design-system/organisms/server-category-editor/index.ts b/packages/design-system/organisms/server-category-editor/index.ts
new file mode 100644
index 0000000..4b2a47b
--- /dev/null
+++ b/packages/design-system/organisms/server-category-editor/index.ts
@@ -0,0 +1 @@
+export * from './ServerCategoryEditor';
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index a0d46a9..7b0cc41 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -13,6 +13,7 @@
     "ksuid": "^2.0.0",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
+    "react-beautiful-dnd": "^13.1.0",
     "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
@@ -24,23 +25,24 @@
   },
   "devDependencies": {
     "@icons/material": "^0.4.1",
-    "@storybook/addon-actions": "^6.3.2",
-    "@storybook/addon-essentials": "^6.3.2",
-    "@storybook/addon-links": "^6.3.2",
-    "@storybook/addons": "^6.3.2",
-    "@storybook/react": "^6.3.2",
-    "@storybook/theming": "^6.3.2",
+    "@storybook/addon-actions": "^6.3.3",
+    "@storybook/addon-essentials": "^6.3.3",
+    "@storybook/addon-links": "^6.3.3",
+    "@storybook/addons": "^6.3.3",
+    "@storybook/react": "^6.3.3",
+    "@storybook/theming": "^6.3.3",
     "@types/chroma-js": "^2.1.3",
     "@types/deep-equal": "^1.0.1",
-    "@types/node": "^15.12.5",
-    "@types/react": "^17.0.11",
-    "@types/react-custom-scrollbars": "^4.0.7",
-    "@types/react-dom": "^17.0.8",
-    "@types/react-helmet": "^6.1.1",
-    "@types/styled-components": "^5.1.10",
+    "@types/node": "^16.0.1",
+    "@types/react": "^17.0.14",
+    "@types/react-beautiful-dnd": "^13.1.1",
+    "@types/react-custom-scrollbars": "^4.0.8",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-helmet": "^6.1.2",
+    "@types/styled-components": "^5.1.11",
     "babel-loader": "8.1.0",
     "babel-plugin-styled-components": "^1.13.1",
     "tslint": "^6.1.3",
-    "typescript": "^4.3.4"
+    "typescript": "^4.3.5"
   }
 }
diff --git a/packages/design-system/templates/editor/Editor.stories.tsx b/packages/design-system/templates/editor/Editor.stories.tsx
index ef1c966..0cd8c67 100644
--- a/packages/design-system/templates/editor/Editor.stories.tsx
+++ b/packages/design-system/templates/editor/Editor.stories.tsx
@@ -1,8 +1,18 @@
+import ReactTooltip from 'react-tooltip';
+import { BreakpointsProvider } from '../../atoms/breakpoints';
 import { guildEnum, mastheadSlugs, user } from '../../fixtures/storyData';
 import { EditorTemplate } from './Editor';
 export default {
   title: 'Templates/Server Editor',
   component: EditorTemplate,
+  decorators: [
+    (story) => (
+      <BreakpointsProvider>
+        {story()}
+        <ReactTooltip />
+      </BreakpointsProvider>
+    ),
+  ],
   args: {
     guilds: mastheadSlugs,
     user: user,
diff --git a/packages/design-system/templates/editor/Editor.tsx b/packages/design-system/templates/editor/Editor.tsx
index a86369b..6e6169c 100644
--- a/packages/design-system/templates/editor/Editor.tsx
+++ b/packages/design-system/templates/editor/Editor.tsx
@@ -10,7 +10,7 @@ export const EditorTemplate = (
   const { guild, onCategoryChange, onMessageChange, onGuildChange, ...appShellProps } =
     props;
   return (
-    <AppShell {...appShellProps} activeGuildId={guild.id}>
+    <AppShell {...appShellProps} activeGuildId={guild.id} small double>
       <EditorShell guild={guild} onGuildChange={onGuildChange} />
     </AppShell>
   );
diff --git a/packages/web/package.json b/packages/web/package.json
index 40e64f8..632888f 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -16,20 +16,20 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-scripts": "4.0.3",
-    "typescript": "^4.3.4",
-    "web-vitals": "^2.0.1"
+    "typescript": "^4.3.5",
+    "web-vitals": "^2.1.0"
   },
   "devDependencies": {
-    "@craco/craco": "^6.1.2",
+    "@craco/craco": "^6.2.0",
     "@roleypoly/types": "*",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.1.9",
-    "@types/jest": "^26.0.23",
-    "@types/node": "^15.12.5",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.8",
-    "@types/react-helmet": "^6.1.1",
+    "@types/jest": "^26.0.24",
+    "@types/node": "^16.0.1",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-helmet": "^6.1.2",
     "babel-loader": "8.1.0",
     "cross-env": "7.0.3",
     "ts-loader": "^8.3.0",
diff --git a/packages/web/src/pages/editor.tsx b/packages/web/src/pages/editor.tsx
index 52a884e..457ab64 100644
--- a/packages/web/src/pages/editor.tsx
+++ b/packages/web/src/pages/editor.tsx
@@ -1,4 +1,4 @@
-import { Redirect } from '@reach/router';
+import { navigate, Redirect } from '@reach/router';
 import { EditorTemplate } from '@roleypoly/design-system/templates/editor';
 import { GenericLoadingTemplate } from '@roleypoly/design-system/templates/generic-loading';
 import {
@@ -87,6 +87,8 @@ const Editor = (props: EditorProps) => {
       setGuild(guild);
       setPending(false);
     }
+
+    navigate(`/s/${props.serverID}`);
   };
 
   return (
diff --git a/yarn.lock b/yarn.lock
index 95d8105..13c70f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1503,6 +1503,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.1":
+  version "7.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
+  integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.13.10":
   version "7.13.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
@@ -1621,10 +1628,10 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@craco/craco@^6.1.2":
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/@craco/craco/-/craco-6.1.2.tgz#30e45288e4609ac6b8cf828085b34acebdc60e69"
-  integrity sha512-GlQZn+g+yNlaDvIL5m6mcCoBGyFDwO4kkNx3fNFf98wuldkdWyBFoQbtOFOIb4gvkTh4VntOOxtJEoZfKs7XXw==
+"@craco/craco@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@craco/craco/-/craco-6.2.0.tgz#93847ae20899f5e810359443f2055bcf2b1a584e"
+  integrity sha512-kLc4GSdgR9D5JiZmSxtzbvBKcUFSJqMXImRjjYf5pacwiyAs3XfQwai7T+pExfLQNUnytgkL8jRFUJeYrkVr7g==
   dependencies:
     cross-spawn "^7.0.0"
     lodash "^4.17.15"
@@ -2281,17 +2288,17 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@storybook/addon-actions@6.3.2", "@storybook/addon-actions@^6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.3.2.tgz#0671a6ca17d9199239f2763398eda04e99bd1724"
-  integrity sha512-kGengy5+RrBFjRaBmtlblltLaS4GtQEDnXV3g3Geeg9+PYSVKOvh2AgdPdQrjHSJFzpOBwUr3zMhXhdWrizyiQ==
+"@storybook/addon-actions@6.3.3", "@storybook/addon-actions@^6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.3.3.tgz#dac8d7708e604fca8e360e894bf48eb4462290af"
+  integrity sha512-eanTjj3ww5kXD4l6ENmrsQCrnqiZOzvUpAr03dpoWgSGpYUbad33W2exBaj9qCDGp49a3SBnU2lsucnuZLYA/Q==
   dependencies:
-    "@storybook/addons" "6.3.2"
-    "@storybook/api" "6.3.2"
-    "@storybook/client-api" "6.3.2"
-    "@storybook/components" "6.3.2"
-    "@storybook/core-events" "6.3.2"
-    "@storybook/theming" "6.3.2"
+    "@storybook/addons" "6.3.3"
+    "@storybook/api" "6.3.3"
+    "@storybook/client-api" "6.3.3"
+    "@storybook/components" "6.3.3"
+    "@storybook/core-events" "6.3.3"
+    "@storybook/theming" "6.3.3"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
     global "^4.4.0"
@@ -2304,17 +2311,17 @@
     util-deprecate "^1.0.2"
     uuid-browser "^3.1.0"
 
-"@storybook/addon-backgrounds@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.3.2.tgz#a69775f02d33378988db8c8211697764ebea1d25"
-  integrity sha512-phn9kx/rmw6fD3Xqew31YPrAEQqUernQthKghSMgqNTR13ZMQ3NPzmcWOsnRq+ngqxB4XTSFya/BtgV7Od0XQQ==
+"@storybook/addon-backgrounds@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.3.3.tgz#fd991a1171caa836f592ad246d776f8ca1f5535d"
+  integrity sha512-8bSv3bCz+gS4lSsICbvEpxubkOPdZK/4/oOsY6neyoAKXBm6A+PHB1PJosrmK3vZVey0d4CuKUZdpA2Q/pl9Fw==
   dependencies:
-    "@storybook/addons" "6.3.2"
-    "@storybook/api" "6.3.2"
-    "@storybook/client-logger" "6.3.2"
-    "@storybook/components" "6.3.2"
-    "@storybook/core-events" "6.3.2"
-    "@storybook/theming" "6.3.2"
+    "@storybook/addons" "6.3.3"
+    "@storybook/api" "6.3.3"
+    "@storybook/client-logger" "6.3.3"
+    "@storybook/components" "6.3.3"
+    "@storybook/core-events" "6.3.3"
+    "@storybook/theming" "6.3.3"
     core-js "^3.8.2"
     global "^4.4.0"
     memoizerific "^1.11.3"
@@ -2322,24 +2329,24 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-controls@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.3.2.tgz#2e0cdc7fcc326524c5858188d4b9d45bc5473c48"
-  integrity sha512-GJzggGZVKNr1p3s/1u83JgstHEQg5+H/1LoJELiYSIrhcs+mfsRr2ULpfHRTrpUSaC3qTL7HzYkPy+FoAd+6qQ==
+"@storybook/addon-controls@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.3.3.tgz#27ee912fabc6eadad5ea9510f564dc5da4577e06"
+  integrity sha512-6oSl7hLvm2nWjv83JM4iU1sIJmaBIHJvWo1rKkyxknm/CUMZNs9YTh/TBQ5LjRemgIzO+Fq4ImJkBPY9oQbSWg==
   dependencies:
-    "@storybook/addons" "6.3.2"
-    "@storybook/api" "6.3.2"
-    "@storybook/client-api" "6.3.2"
-    "@storybook/components" "6.3.2"
-    "@storybook/node-logger" "6.3.2"
-    "@storybook/theming" "6.3.2"
+    "@storybook/addons" "6.3.3"
+    "@storybook/api" "6.3.3"
+    "@storybook/client-api" "6.3.3"
+    "@storybook/components" "6.3.3"
+    "@storybook/node-logger" "6.3.3"
+    "@storybook/theming" "6.3.3"
     core-js "^3.8.2"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.3.2.tgz#3499f82ed073c326eac5e24772161b1c715a7fab"
-  integrity sha512-y9+umLi22ow3qAivxqkDeCtqzkIhlDIFOA7HH3Wd2yDo96UAzUiGozelCycijtfcyFuzwL8cvoKB6nIiVyuWsw==
+"@storybook/addon-docs@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.3.3.tgz#e92dd5163e0f81cbbacfb091ea4909808c8afdc4"
+  integrity sha512-8+Q+SmH4yR7sAClw1Zqh4lBm545j8OS8dTbcibXDyQV2hNBer0Mw6ANb8kG+zU5k+vVY3gerGGCyQhDROk2qoQ==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/generator" "^7.12.11"
@@ -2350,20 +2357,20 @@
     "@mdx-js/loader" "^1.6.22"
     "@mdx-js/mdx" "^1.6.22"
     "@mdx-js/react" "^1.6.22"
-    "@storybook/addons" "6.3.2"
-    "@storybook/api" "6.3.2"
-    "@storybook/builder-webpack4" "6.3.2"
-    "@storybook/client-api" "6.3.2"
-    "@storybook/client-logger" "6.3.2"
-    "@storybook/components" "6.3.2"
-    "@storybook/core" "6.3.2"
-    "@storybook/core-events" "6.3.2"
+    "@storybook/addons" "6.3.3"
+    "@storybook/api" "6.3.3"
+    "@storybook/builder-webpack4" "6.3.3"
+    "@storybook/client-api" "6.3.3"
+    "@storybook/client-logger" "6.3.3"
+    "@storybook/components" "6.3.3"
+    "@storybook/core" "6.3.3"
+    "@storybook/core-events" "6.3.3"
     "@storybook/csf" "0.0.1"
-    "@storybook/csf-tools" "6.3.2"
-    "@storybook/node-logger" "6.3.2"
-    "@storybook/postinstall" "6.3.2"
-    "@storybook/source-loader" "6.3.2"
-    "@storybook/theming" "6.3.2"
+    "@storybook/csf-tools" "6.3.3"
+    "@storybook/node-logger" "6.3.3"
+    "@storybook/postinstall" "6.3.3"
+    "@storybook/source-loader" "6.3.3"
+    "@storybook/theming" "6.3.3"
     acorn "^7.4.1"
     acorn-jsx "^5.3.1"
     acorn-walk "^7.2.0"
@@ -2386,36 +2393,36 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-essentials@^6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.3.2.tgz#2182fcdbc3138fd17e10e680d6e9b182be73e3ec"
-  integrity sha512-upOMqx/66aAhr262L4oe5JS1wG2W7ZHIKQBgxMDfzrY26KcRRZVCm+omOlLJ2l4b0Gc7iZmUHkfmOhI9SPMNbw==
+"@storybook/addon-essentials@^6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.3.3.tgz#77d0b461d3525ad710c0f9c9c99a67213ef88569"
+  integrity sha512-ENwziIGaI0VLUFkqZ1Au0UsAKnRs6vRsjj9UcOpifTu6D1/u4dIsu6eyPmaKXm7rhe4z2+GObGasGJwlAyd8Ow==
   dependencies:
-    "@storybook/addon-actions" "6.3.2"
-    "@storybook/addon-backgrounds" "6.3.2"
-    "@storybook/addon-controls" "6.3.2"
-    "@storybook/addon-docs" "6.3.2"
+    "@storybook/addon-actions" "6.3.3"
+    "@storybook/addon-backgrounds" "6.3.3"
+    "@storybook/addon-controls" "6.3.3"
+    "@storybook/addon-docs" "6.3.3"
     "@storybook/addon-measure" "^2.0.0"
-    "@storybook/addon-toolbars" "6.3.2"
-    "@storybook/addon-viewport" "6.3.2"
-    "@storybook/addons" "6.3.2"
-    "@storybook/api" "6.3.2"
-    "@storybook/node-logger" "6.3.2"
+    "@storybook/addon-toolbars" "6.3.3"
+    "@storybook/addon-viewport" "6.3.3"
+    "@storybook/addons" "6.3.3"
+    "@storybook/api" "6.3.3"
+    "@storybook/node-logger" "6.3.3"
     core-js "^3.8.2"
     regenerator-runtime "^0.13.7"
     storybook-addon-outline "^1.4.1"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-links@^6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.3.2.tgz#4db9d63d0e195f5887fe74dab09ae5bb0c64275c"
-  integrity sha512-JT7HLIZRvUJ0dDkhz4daL/GdpS/JPhuRaKPonRbtLW6RFAbBjLolqALVfxRJzOsYMwStUMtnxzzgKmeLOjtPIA==
+"@storybook/addon-links@^6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.3.3.tgz#409e66bb12ff893ffe140877b13c4528fe81ba0f"
+  integrity sha512-wBPSVJ/XBJ7UH2T8FdIHMw1GVlF39GaOIdfP1mhsEAYIUTUbUNXstZTPETaO1ggSp8eSRkUO1fVI0vOWPzUT3w==
   dependencies:
-    "@storybook/addons" "6.3.2"
-    "@storybook/client-logger" "6.3.2"
-    "@storybook/core-events" "6.3.2"
+    "@storybook/addons" "6.3.3"
+    "@storybook/client-logger" "6.3.3"
+    "@storybook/core-events" "6.3.3"
     "@storybook/csf" "0.0.1"
-    "@storybook/router" "6.3.2"
+    "@storybook/router" "6.3.3"
     "@types/qs" "^6.9.5"
     core-js "^3.8.2"
     global "^4.4.0"
@@ -2429,47 +2436,47 @@
   resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-2.0.0.tgz#c40bbe91bacd3f795963dc1ee6ff86be87deeda9"
   integrity sha512-ZhdT++cX+L9LwjhGYggvYUUVQH/MGn2rwbrAwCMzA/f2QTFvkjxzX8nDgMxIhaLCDC+gHIxfJG2wrWN0jkBr3g==
 
-"@storybook/addon-toolbars@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.3.2.tgz#bad5185c764179200594d9a6dd86c9e43556962a"
-  integrity sha512-Gc2nak1MaCbC5h67TSXIvg65llidHngGHQCE2Ru6cPnTFqAtLs2QdsA72ScAOSLmwSeliVxkcoOXL9wN1vlXsg==
+"@storybook/addon-toolbars@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.3.3.tgz#ef154035153247d766bc240968eedc7b988068a2"
+  integrity sha512-y8TGt+S+qaxvesLDCFca4CfxwV+iGrETrMYATEG2gdWtQ66tZ7/JLUvaaJPyMMRj3aMiSQKQ9BCI8L4XRv5asA==
   dependencies:
-    "@storybook/addons" "6.3.2"
-    "@storybook/api" "6.3.2"
-    "@storybook/client-api" "6.3.2"
-    "@storybook/components" "6.3.2"
-    "@storybook/theming" "6.3.2"
+    "@storybook/addons" "6.3.3"
+    "@storybook/api" "6.3.3"
+    "@storybook/client-api" "6.3.3"
+    "@storybook/components" "6.3.3"
+    "@storybook/theming" "6.3.3"
     core-js "^3.8.2"
     regenerator-runtime "^0.13.7"
 
-"@storybook/addon-viewport@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.3.2.tgz#7a8f6b91ba7d8aab3f24611e4962b317eecc17d4"
-  integrity sha512-npmD2kpXyc7zPFgxOu2JBg8U702P4c2B+OvFa53jQJIKyUdjXNzGatG2FSshQmY+UpiDJyKScPJ7W/9oU7HAfw==
+"@storybook/addon-viewport@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.3.3.tgz#76d10e99394ed257dd6e140d2019d3ebabab0863"
+  integrity sha512-i1i//FsNcGxDfo+gspC/CrBj1S552QSoNFyP5Qy1+nx1HFC3AXdMFOCL+GRVSvcd21snzllRe2oPFKsDtGMZ0g==
   dependencies:
-    "@storybook/addons" "6.3.2"
-    "@storybook/api" "6.3.2"
-    "@storybook/client-logger" "6.3.2"
-    "@storybook/components" "6.3.2"
-    "@storybook/core-events" "6.3.2"
-    "@storybook/theming" "6.3.2"
+    "@storybook/addons" "6.3.3"
+    "@storybook/api" "6.3.3"
+    "@storybook/client-logger" "6.3.3"
+    "@storybook/components" "6.3.3"
+    "@storybook/core-events" "6.3.3"
+    "@storybook/theming" "6.3.3"
     core-js "^3.8.2"
     global "^4.4.0"
     memoizerific "^1.11.3"
     prop-types "^15.7.2"
     regenerator-runtime "^0.13.7"
 
-"@storybook/addons@6.3.2", "@storybook/addons@^6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.2.tgz#a116f71e07e2ca17f2c59accff8aebd0d01e3a3e"
-  integrity sha512-fzpTLKyweD0yPXnfjaOrLpKRm4AVHdGRmfJb1p6KyUTXoNRWGYHsXN3EvAdsWjTamhbL2JoQy38kvu7SmkTEug==
+"@storybook/addons@6.3.3", "@storybook/addons@^6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.3.tgz#040506adea1365699b039ff3c70a97a1a31fa766"
+  integrity sha512-EAT/MXZcAsjt9zQ15oHCyjoOVSbeas/y8+tHXFAcJKF1leZzRamg4X0hFjJWDtm0+HZWfC9qX8Rl57bIwgMRmQ==
   dependencies:
-    "@storybook/api" "6.3.2"
-    "@storybook/channels" "6.3.2"
-    "@storybook/client-logger" "6.3.2"
-    "@storybook/core-events" "6.3.2"
-    "@storybook/router" "6.3.2"
-    "@storybook/theming" "6.3.2"
+    "@storybook/api" "6.3.3"
+    "@storybook/channels" "6.3.3"
+    "@storybook/client-logger" "6.3.3"
+    "@storybook/core-events" "6.3.3"
+    "@storybook/router" "6.3.3"
+    "@storybook/theming" "6.3.3"
     core-js "^3.8.2"
     global "^4.4.0"
     regenerator-runtime "^0.13.7"
@@ -2515,19 +2522,19 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/api@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.3.2.tgz#669c9eb1b5f50659b894f374af1c3eb3d4c2ac20"
-  integrity sha512-rXe7l8mwNEvk3cqHYJ4H2XQWWY8oeezJezgt1ZBq4GvNVzVUPjASi1meXQwAYm39SdCL5+lP/hLpAZvobB1Tag==
+"@storybook/api@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.3.3.tgz#094b57959dc4c81f69a53d6f16373b69faeda3d8"
+  integrity sha512-Q8LxULCZF/ZUalamvNXLbT7x3bmH2She5TZFTyEINJF7W1UX5wluWnJ6RonAFxAK7GvLTf0wSHS7wzritJGMjg==
   dependencies:
     "@reach/router" "^1.3.4"
-    "@storybook/channels" "6.3.2"
-    "@storybook/client-logger" "6.3.2"
-    "@storybook/core-events" "6.3.2"
+    "@storybook/channels" "6.3.3"
+    "@storybook/client-logger" "6.3.3"
+    "@storybook/core-events" "6.3.3"
     "@storybook/csf" "0.0.1"
-    "@storybook/router" "6.3.2"
+    "@storybook/router" "6.3.3"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.3.2"
+    "@storybook/theming" "6.3.3"
     "@types/reach__router" "^1.3.7"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
@@ -2541,10 +2548,10 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/builder-webpack4@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.3.2.tgz#c0b285ae38f0973fb38e378defe13e99afcadfa4"
-  integrity sha512-0xKMy/9Zp+Z1EK9R2Oq4kmd2Za9OlzXoLNBHdGuwe3lqoCsXvEQHsrGdc7V5uT4HwP1KBEhn9Yl+Y7yuMDZJ0Q==
+"@storybook/builder-webpack4@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.3.3.tgz#c5fe5a83922e62da0c03ece44441a115a05f9266"
+  integrity sha512-E/UAPwR/H4t77CNIKy4xHBZ8bJ/01dAGoXknRX8RKIhD+kS97R1IUDeTqxFa4raj9n1/FV+24no4Etf6+BJCfA==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-proposal-class-properties" "^7.12.1"
@@ -2567,20 +2574,20 @@
     "@babel/preset-env" "^7.12.11"
     "@babel/preset-react" "^7.12.10"
     "@babel/preset-typescript" "^7.12.7"
-    "@storybook/addons" "6.3.2"
-    "@storybook/api" "6.3.2"
-    "@storybook/channel-postmessage" "6.3.2"
-    "@storybook/channels" "6.3.2"
-    "@storybook/client-api" "6.3.2"
-    "@storybook/client-logger" "6.3.2"
-    "@storybook/components" "6.3.2"
-    "@storybook/core-common" "6.3.2"
-    "@storybook/core-events" "6.3.2"
-    "@storybook/node-logger" "6.3.2"
-    "@storybook/router" "6.3.2"
+    "@storybook/addons" "6.3.3"
+    "@storybook/api" "6.3.3"
+    "@storybook/channel-postmessage" "6.3.3"
+    "@storybook/channels" "6.3.3"
+    "@storybook/client-api" "6.3.3"
+    "@storybook/client-logger" "6.3.3"
+    "@storybook/components" "6.3.3"
+    "@storybook/core-common" "6.3.3"
+    "@storybook/core-events" "6.3.3"
+    "@storybook/node-logger" "6.3.3"
+    "@storybook/router" "6.3.3"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.3.2"
-    "@storybook/ui" "6.3.2"
+    "@storybook/theming" "6.3.3"
+    "@storybook/ui" "6.3.3"
     "@types/node" "^14.0.10"
     "@types/webpack" "^4.41.26"
     autoprefixer "^9.8.6"
@@ -2617,14 +2624,14 @@
     webpack-hot-middleware "^2.25.0"
     webpack-virtual-modules "^0.2.2"
 
-"@storybook/channel-postmessage@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.3.2.tgz#7fe94d128b03eefbb1b6637dfa417f95bdced30e"
-  integrity sha512-6ne51RmZ7Ye9TDhPy/y5NuyQGNJ6VJcEch5E8D0nrFfNwJ5djKzkg1xatADjdhlCfQ9zPfseQVPM5IovEzEb/A==
+"@storybook/channel-postmessage@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.3.3.tgz#b25b4837be276da2cfaa2a0c488b6c25c27c5fad"
+  integrity sha512-IGDUMpq+nLTeVottYPwXyaeto/Li5VBpU6jZaiGMMaggwxAeLxjKyovv/cnKBQr/HXNO8xWl+SZfptonrS9abw==
   dependencies:
-    "@storybook/channels" "6.3.2"
-    "@storybook/client-logger" "6.3.2"
-    "@storybook/core-events" "6.3.2"
+    "@storybook/channels" "6.3.3"
+    "@storybook/client-logger" "6.3.3"
+    "@storybook/core-events" "6.3.3"
     core-js "^3.8.2"
     global "^4.4.0"
     qs "^6.10.0"
@@ -2639,25 +2646,25 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/channels@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.3.2.tgz#7759cc16177aafe825e81f63c2d033ce1ef850e8"
-  integrity sha512-fkyX0vn7KkN7p515Knm4Cfo8Z2xyO9hMPK4IReZiGz8o9vOziXHeYvdFZ07aTfcUb9ZG3ur3C7rmaEDMNfwCWA==
+"@storybook/channels@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.3.3.tgz#167c75f1a9e6a5ee9b50ab198651f87fe801eaf1"
+  integrity sha512-S20bQKlQv7Fwq+1qM4ZoBN921NvuPF3HVPKemS3REN0gSoVPjN1Ur+kRLh7Q7mAo4AWFirD+2yqA2tU5ClTGMw==
   dependencies:
     core-js "^3.8.2"
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/client-api@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.3.2.tgz#2180bd4e3ae903a1f5199651644335a1abfddcff"
-  integrity sha512-vYPTaROdmBtzKckGAbZAi8gpD2OgDB0FlsjTTe7rz8jcN1ecGRBBXlb/CJndLlAKgZqF+sramtIY3GZp0wdpPA==
+"@storybook/client-api@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.3.3.tgz#449c8971a06ea6ae4d6aef3c7ed08db52d74ac83"
+  integrity sha512-oKku+viz+fgxdLCBEYT31yM9khyLvrmicnQHA33MyMXUzhEwFlKO5aXHD4TF5ZeaGxZ8M1NSLAIz53O8QpPizg==
   dependencies:
-    "@storybook/addons" "6.3.2"
-    "@storybook/channel-postmessage" "6.3.2"
-    "@storybook/channels" "6.3.2"
-    "@storybook/client-logger" "6.3.2"
-    "@storybook/core-events" "6.3.2"
+    "@storybook/addons" "6.3.3"
+    "@storybook/channel-postmessage" "6.3.3"
+    "@storybook/channels" "6.3.3"
+    "@storybook/client-logger" "6.3.3"
+    "@storybook/core-events" "6.3.3"
     "@storybook/csf" "0.0.1"
     "@types/qs" "^6.9.5"
     "@types/webpack-env" "^1.16.0"
@@ -2680,23 +2687,23 @@
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/client-logger@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.3.2.tgz#9501ff93db254e75a7ca4a7795672528edea6548"
-  integrity sha512-1V70P4ARRHSvkAUZP/mgU3hUl7BN9kpNujbBNRcVCCv+DgsnryF+CH9xJ8nxrpOZxlj4sIG68OcMqRaV1HL/3w==
+"@storybook/client-logger@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.3.3.tgz#87aaa7b92ed2389f90317469fb99c5d066446554"
+  integrity sha512-eckaVBPYOLh5ZFWrcCS+JqXkIQMESpiR2IfmEBHpZFq8lHZRq/dpmfLnDM2HrGiRR5EvPn9/Hl9jIKLaVx3Yng==
   dependencies:
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/components@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.3.2.tgz#fa8970fdfe76246a020f757a7059f312ae2420ce"
-  integrity sha512-lwzqY7CLbo+4PxBiN9DMwtMRPG1jN9Ih6SAdB4fJdCj3bZQ7ef9peme70RvpDEIOD3MX6vu/9AKQj2wxAaHrDA==
+"@storybook/components@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.3.3.tgz#eba4fabf76e84fb70e00a82ebf4ba16c4b2ff984"
+  integrity sha512-45XDLRTXdG2bfEILwMkENdknkyVLQrqchcVh7qm+wtZEXhbtIGoTxlXYPUST+xB6MF5AXZ0c8UTm2YMgV3v3FQ==
   dependencies:
     "@popperjs/core" "^2.6.0"
-    "@storybook/client-logger" "6.3.2"
+    "@storybook/client-logger" "6.3.3"
     "@storybook/csf" "0.0.1"
-    "@storybook/theming" "6.3.2"
+    "@storybook/theming" "6.3.3"
     "@types/color-convert" "^2.0.0"
     "@types/overlayscrollbars" "^1.12.0"
     "@types/react-syntax-highlighter" "11.0.5"
@@ -2748,18 +2755,18 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/core-client@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.3.2.tgz#847426c4141b10d03a1515374315bfa48b6f5bf8"
-  integrity sha512-A354DrsBQgtfKRSNVM0WpepNZwZfb8QxBKB86LR5crfbLIAs9fxJnYmAVBF1ju1EasrIxX6kGDryH4pQYaJPXw==
+"@storybook/core-client@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.3.3.tgz#3e765df7f360b214c183b6f456b6f38b6f3d0006"
+  integrity sha512-AP9LoHJSXwxLWtwJ9xcanhXaI74ehu4UG3HLqe4FdN7tjYR9IgS3nMzSVfN7WyuI4ixUeLUlRgrak0Ic54F0ng==
   dependencies:
-    "@storybook/addons" "6.3.2"
-    "@storybook/channel-postmessage" "6.3.2"
-    "@storybook/client-api" "6.3.2"
-    "@storybook/client-logger" "6.3.2"
-    "@storybook/core-events" "6.3.2"
+    "@storybook/addons" "6.3.3"
+    "@storybook/channel-postmessage" "6.3.3"
+    "@storybook/client-api" "6.3.3"
+    "@storybook/client-logger" "6.3.3"
+    "@storybook/core-events" "6.3.3"
     "@storybook/csf" "0.0.1"
-    "@storybook/ui" "6.3.2"
+    "@storybook/ui" "6.3.3"
     airbnb-js-shims "^2.2.1"
     ansi-to-html "^0.6.11"
     core-js "^3.8.2"
@@ -2771,10 +2778,10 @@
     unfetch "^4.2.0"
     util-deprecate "^1.0.2"
 
-"@storybook/core-common@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.3.2.tgz#d1d9f14361296437983006ecea963e6af599bc34"
-  integrity sha512-draeHXXWTn1u3YzLMZdtCOy1UOXsPBQz6q5f64o8Qjkr8Htqf2IiFYPmswOq7eo9yPQZu7+nsfRcx7M1GNAQlg==
+"@storybook/core-common@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.3.3.tgz#4bc69346de398b0e2c069f2d531bc08186040a78"
+  integrity sha512-LZrZW8MgNHg6jxSFZZ29za2JFN/TjKHuo+iu2iRZUnmgQJmdkSUloasrJDq/s3CHt7wjcsYMEMTE9HqUAvMhOw==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-proposal-class-properties" "^7.12.1"
@@ -2797,7 +2804,7 @@
     "@babel/preset-react" "^7.12.10"
     "@babel/preset-typescript" "^7.12.7"
     "@babel/register" "^7.12.1"
-    "@storybook/node-logger" "6.3.2"
+    "@storybook/node-logger" "6.3.3"
     "@storybook/semver" "^7.3.2"
     "@types/glob-base" "^0.3.0"
     "@types/micromatch" "^4.0.1"
@@ -2832,24 +2839,24 @@
   dependencies:
     core-js "^3.8.2"
 
-"@storybook/core-events@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.3.2.tgz#7d1eb4f889b809d851e48d2daed5fbf43244d624"
-  integrity sha512-Mqxp2au4djPC9j8Wc97oM1iJQLAS8ZsW8CqcPxDmhl38cMfcMQiQXTk+2GDQbMxD2An2b73EU5hMMBAvNzYjog==
+"@storybook/core-events@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.3.3.tgz#4d073a601f10f928fa27207cc9e7eb313a74fc77"
+  integrity sha512-Ym/Xna7GrCF0CbTkbejzuAw7LunZ158AT2AvGYMZujGBzunYG7MlfXVoS6YjUUt8vEmGHi8g6PdD6uij4IBY8A==
   dependencies:
     core-js "^3.8.2"
 
-"@storybook/core-server@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.3.2.tgz#76392f835baea2a30122d66b3fed506f8171a955"
-  integrity sha512-ceBKdLYlhKygBOJyIWR+9i4bLVOOadsLxM9ITAIzaSqSfZiuFxoP+irnEZrZUfFA0zcLYFEW5MH2vtCCPH+fhg==
+"@storybook/core-server@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.3.3.tgz#9f9cc385ce325aeab9afa354a41554373fdd8be7"
+  integrity sha512-NfT7627eO0thpfTOwJyMCoJtCVQIgzvjnZGjUpdT7onKYh3w8cB7w85HQAvAKaAQIPidciXR5RrwAZOKPfDA5g==
   dependencies:
-    "@storybook/builder-webpack4" "6.3.2"
-    "@storybook/core-client" "6.3.2"
-    "@storybook/core-common" "6.3.2"
-    "@storybook/csf-tools" "6.3.2"
-    "@storybook/manager-webpack4" "6.3.2"
-    "@storybook/node-logger" "6.3.2"
+    "@storybook/builder-webpack4" "6.3.3"
+    "@storybook/core-client" "6.3.3"
+    "@storybook/core-common" "6.3.3"
+    "@storybook/csf-tools" "6.3.3"
+    "@storybook/manager-webpack4" "6.3.3"
+    "@storybook/node-logger" "6.3.3"
     "@storybook/semver" "^7.3.2"
     "@types/node" "^14.0.10"
     "@types/node-fetch" "^2.5.7"
@@ -2878,18 +2885,18 @@
     util-deprecate "^1.0.2"
     webpack "4"
 
-"@storybook/core@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.3.2.tgz#8c3bd78fef26395059d3710bd69ce438cdf71193"
-  integrity sha512-EPyGqTu2f2184FfZ7o1IMWbVKWkdhbIeLSnNfl5CA5ZVMFQwV8XhEJXpzWI0VopZK0hE0+ooU4M+if8JeSWulQ==
+"@storybook/core@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.3.3.tgz#15bc4e072a852c45f9253bcea836382026180495"
+  integrity sha512-aJaix3DLQrGEUovSU0Ry64ZS+E66IgM/MqrlEjiKHU3ahDbZ35Ol9P1sl3saUUPkBozbid+/+zCN9Hw7vF6RdA==
   dependencies:
-    "@storybook/core-client" "6.3.2"
-    "@storybook/core-server" "6.3.2"
+    "@storybook/core-client" "6.3.3"
+    "@storybook/core-server" "6.3.3"
 
-"@storybook/csf-tools@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.3.2.tgz#93bffc555a8a8535c3ee99e21f131860fc78e251"
-  integrity sha512-CGj4HsKwYBwp2zWmrG1RJedwrnakfxkptp/4HQ0mE9ajw28GndNZus2+IgnBsxdbzv8LYwz/rHpXRbvfDbgPFg==
+"@storybook/csf-tools@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.3.3.tgz#9f26bd7265c250080957c20c4cce5aff43158ac2"
+  integrity sha512-w2BAkUjS1Wr8nuoppvkesgJ4H+qfxBIGogKuMDny4V9R5bCFT361p02ZCNsDEjtFWaeOire2vBm3bE7eUCvwMA==
   dependencies:
     "@babel/generator" "^7.12.11"
     "@babel/parser" "^7.12.11"
@@ -2913,20 +2920,20 @@
   dependencies:
     lodash "^4.17.15"
 
-"@storybook/manager-webpack4@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.3.2.tgz#4c2621e0f6e2be2e248cf93d796bc705de34c670"
-  integrity sha512-MeYXK2H65y08meKM477PT0ygMMiHYGo9e8vl8oIXY3pp/24iiE5W+yCHH3HP5PEsKCXMml6gWM7ba44lpkuutQ==
+"@storybook/manager-webpack4@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.3.3.tgz#2679281ef4936209e54d8464a7e7b7ba9782204b"
+  integrity sha512-IUuC1SpcnE/IRPtJkFalbJdOa8gHvOkccxZW/DhJZi2QgfOvnwmErz8unX1VHkpcqHfoUWcjLYUbYVeYo0shfw==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-transform-template-literals" "^7.12.1"
     "@babel/preset-react" "^7.12.10"
-    "@storybook/addons" "6.3.2"
-    "@storybook/core-client" "6.3.2"
-    "@storybook/core-common" "6.3.2"
-    "@storybook/node-logger" "6.3.2"
-    "@storybook/theming" "6.3.2"
-    "@storybook/ui" "6.3.2"
+    "@storybook/addons" "6.3.3"
+    "@storybook/core-client" "6.3.3"
+    "@storybook/core-common" "6.3.3"
+    "@storybook/node-logger" "6.3.3"
+    "@storybook/theming" "6.3.3"
+    "@storybook/ui" "6.3.3"
     "@types/node" "^14.0.10"
     "@types/webpack" "^4.41.26"
     babel-loader "^8.2.2"
@@ -2956,10 +2963,10 @@
     webpack-dev-middleware "^3.7.3"
     webpack-virtual-modules "^0.2.2"
 
-"@storybook/node-logger@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.3.2.tgz#fc4c6f707030e04f8bc559bc188802d549b0507c"
-  integrity sha512-TJvJpysIIP3EWoyfFDmXCRC/yTReu0jIFUPdldh4FjhADjQU+JTbLwJmtcJyHoMSqfIHgUc1TB6D/B4PjYqElA==
+"@storybook/node-logger@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.3.3.tgz#e98ea1b545442b078280886878f4943397c806aa"
+  integrity sha512-YmH8jZok49HPHuG/fkKgYTrHd1jxwwjhyy/cJvzW+gr3V+4rTLv0EqVe45j2LEB8+9hEw6NyMTNzn9j1eEZvIg==
   dependencies:
     "@types/npmlog" "^4.1.2"
     chalk "^4.1.0"
@@ -2967,10 +2974,10 @@
     npmlog "^4.1.2"
     pretty-hrtime "^1.0.3"
 
-"@storybook/postinstall@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.3.2.tgz#6abe1093fd3f12614bbcd9bc90d65abaaf311587"
-  integrity sha512-RkzrEr5GyBKFEPwOJw6JFRqkCtexvqZbyQeDuQ8K5AxRoJOcdXfxtb2Qkq06wfUnexxhZ9R0ktzepdtzk89ALw==
+"@storybook/postinstall@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.3.3.tgz#8a72a323bad333743eafbd05b1fc759d146bbe19"
+  integrity sha512-J0r3haDjCRjj6jCYqTokOzXP6Udyq45HGXvjb9usY4sOH6c18fuAarcD2VmfdYJ3LqOl15U0p8zCW1QDnpvwXw==
   dependencies:
     core-js "^3.8.2"
 
@@ -2987,18 +2994,18 @@
     react-docgen-typescript "^2.0.0"
     tslib "^2.0.0"
 
-"@storybook/react@^6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.3.2.tgz#6c9b2e010874ccc991a511cfed87b134ef02bc6d"
-  integrity sha512-AwuXzvu6zKSZnWFgYWxvP1QumnJ/8VChZJ1/pCEW3IGqxtSBd7KAF7EjlmS6CqAnWP+zp9jUr7It1P9631CwNQ==
+"@storybook/react@^6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.3.3.tgz#18b1db7e5b0d57037dad4884ac07f3244619d2f2"
+  integrity sha512-dJjEugouMw0TdL/4R/lRKA6kdmS3NUmK5LfZeNyO9s/iygYwIdHowh1x5vzQO2ZUaaTKnI4OZ3GNxs+ULjUEPg==
   dependencies:
     "@babel/preset-flow" "^7.12.1"
     "@babel/preset-react" "^7.12.10"
     "@pmmmwh/react-refresh-webpack-plugin" "^0.4.3"
-    "@storybook/addons" "6.3.2"
-    "@storybook/core" "6.3.2"
-    "@storybook/core-common" "6.3.2"
-    "@storybook/node-logger" "6.3.2"
+    "@storybook/addons" "6.3.3"
+    "@storybook/core" "6.3.3"
+    "@storybook/core-common" "6.3.3"
+    "@storybook/node-logger" "6.3.3"
     "@storybook/react-docgen-typescript-plugin" "1.0.2-canary.253f8c1.0"
     "@storybook/semver" "^7.3.2"
     "@types/webpack-env" "^1.16.0"
@@ -3032,13 +3039,13 @@
     qs "^6.10.0"
     ts-dedent "^2.0.0"
 
-"@storybook/router@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.3.2.tgz#8df811af403d08ba5b9dcf005eab38bb6d3929d9"
-  integrity sha512-2oe2w1h4ucKhVub2NjKqwvJ6E6b57rA0fr8EOElPXdQXDi2fD3hFjUIXL4OdWG+GMVEqfkoje0eRCDRdjbu+yg==
+"@storybook/router@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.3.3.tgz#2e87377be3e0ac42639c0358dd6b4bd69c9a0b43"
+  integrity sha512-vS04DWSod9YvFIVSxvWbSc7Bkn/1kwpg+mnOeCSZxs50e6LflZ+5tXqAvnobeEnceTH/rjtbQBVvarx0ZfDD3g==
   dependencies:
     "@reach/router" "^1.3.4"
-    "@storybook/client-logger" "6.3.2"
+    "@storybook/client-logger" "6.3.3"
     "@types/reach__router" "^1.3.7"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
@@ -3056,13 +3063,13 @@
     core-js "^3.6.5"
     find-up "^4.1.0"
 
-"@storybook/source-loader@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.3.2.tgz#2f2132b9743c95e4f40d26a28b5255bb762e16fc"
-  integrity sha512-tg8VDBoVRrazDdvFJBtAp0ChztaF3cxmXsbWCOxYkP8u4sYDXBikJCllSGzkuSx6GUuU0kyQ0JV94Bd2ECTdOw==
+"@storybook/source-loader@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.3.3.tgz#dc92619ad951f28f8a9f313d9f6b4069f6f9cd40"
+  integrity sha512-J8ZscrKcuXPnw4HL/NYxnM5EZmv6IO1WyRAUEd7FCNlcA2E0AxuZH1WB8/l8mL5Pdsj4gISdRG3vbOFa9CwsEQ==
   dependencies:
-    "@storybook/addons" "6.3.2"
-    "@storybook/client-logger" "6.3.2"
+    "@storybook/addons" "6.3.3"
+    "@storybook/client-logger" "6.3.3"
     "@storybook/csf" "0.0.1"
     core-js "^3.8.2"
     estraverse "^5.2.0"
@@ -3090,15 +3097,15 @@
     resolve-from "^5.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/theming@6.3.2", "@storybook/theming@^6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.2.tgz#1fbee52cb46b0386431c016f5150c7c7a0a05d4b"
-  integrity sha512-XICs67cuEGQxnzJ2SYPRZiIELaUCFQsYhtBTXycJIpBUbcbysdBE7GH+3aG8PpDMaSgHWJ7qaiYEoPlhFbAv1w==
+"@storybook/theming@6.3.3", "@storybook/theming@^6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.3.tgz#4801a6a774b3e6a356e86f3c6351f79d1dc9bee7"
+  integrity sha512-+V6aDZhzesYgiRe5hb8AAmLIh2GzIDTU6N2ssVuJQkujv6XE9uiL2hfORRChVm/dKPgTr84vX2jnJ+1317iCEg==
   dependencies:
     "@emotion/core" "^10.1.1"
     "@emotion/is-prop-valid" "^0.8.6"
     "@emotion/styled" "^10.0.27"
-    "@storybook/client-logger" "6.3.2"
+    "@storybook/client-logger" "6.3.3"
     core-js "^3.8.2"
     deep-object-diff "^1.1.0"
     emotion-theming "^10.0.27"
@@ -3108,21 +3115,21 @@
     resolve-from "^5.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/ui@6.3.2":
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.3.2.tgz#af6d793a22d0e127fed7e2b041133792bf1646b6"
-  integrity sha512-Aqzr5vQsr67iDwg41CmHr/NlcNayld8PPGWqtxJ/+/fSScnKZ8KdwGoqpj64dizowoggpCCeYVZCanHhxS47Vg==
+"@storybook/ui@6.3.3":
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.3.3.tgz#65324ad55fc68c5b6fc4a83d63b0852fbdb508e4"
+  integrity sha512-zDWR8TEjnuGwVMEb1rFZ3XCAMApb00VBR1PIxN23yemizk6hWLfJvOGYGWEyqjiknS10eF/iMVv936V35Pr9Qw==
   dependencies:
     "@emotion/core" "^10.1.1"
-    "@storybook/addons" "6.3.2"
-    "@storybook/api" "6.3.2"
-    "@storybook/channels" "6.3.2"
-    "@storybook/client-logger" "6.3.2"
-    "@storybook/components" "6.3.2"
-    "@storybook/core-events" "6.3.2"
-    "@storybook/router" "6.3.2"
+    "@storybook/addons" "6.3.3"
+    "@storybook/api" "6.3.3"
+    "@storybook/channels" "6.3.3"
+    "@storybook/client-logger" "6.3.3"
+    "@storybook/components" "6.3.3"
+    "@storybook/core-events" "6.3.3"
+    "@storybook/router" "6.3.3"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.3.2"
+    "@storybook/theming" "6.3.3"
     "@types/markdown-to-jsx" "^6.11.3"
     copy-to-clipboard "^3.3.1"
     core-js "^3.8.2"
@@ -3395,10 +3402,10 @@
   resolved "https://registry.yarnpkg.com/@types/deep-equal/-/deep-equal-1.0.1.tgz#71cfabb247c22bcc16d536111f50c0ed12476b03"
   integrity sha512-mMUu4nWHLBlHtxXY17Fg6+ucS/MnndyOWyOe7MmwkoMYxvfQU2ajtRaEvqSUv+aVkMqH/C0NCI8UoVfRNQ10yg==
 
-"@types/enzyme@^3.10.8":
-  version "3.10.8"
-  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.8.tgz#ad7ac9d3af3de6fd0673773123fafbc63db50d42"
-  integrity sha512-vlOuzqsTHxog6PV79+tvOHFb6hq4QZKMq1lLD9MaWD1oec2lHTKndn76XOpSwCA0oFTaIbKVPrgM3k78Jjd16g==
+"@types/enzyme@^3.10.9":
+  version "3.10.9"
+  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.9.tgz#b2d7c7429a37d994c156b6f361e83f271a60c8aa"
+  integrity sha512-dx5UvcWe2Vtye6S9Hw2rFB7Ul9uMXOAje2FAbXvVYieQDNle9qPAo7DfvFMSztZ9NFiD3dVZ4JsRYGTrSLynJg==
   dependencies:
     "@types/cheerio" "*"
     "@types/react" "*"
@@ -3448,7 +3455,7 @@
   dependencies:
     "@types/unist" "*"
 
-"@types/hoist-non-react-statics@*":
+"@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==
@@ -3501,10 +3508,10 @@
     jest-diff "^26.0.0"
     pretty-format "^26.0.0"
 
-"@types/jest@^26.0.23":
-  version "26.0.23"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.23.tgz#a1b7eab3c503b80451d019efb588ec63522ee4e7"
-  integrity sha512-ZHLmWMJ9jJ9PTiT58juykZpL7KjwJywFN3Rr2pTSkyQfydf/rk22yS7W8p5DaVUMQ2BQC7oYiU3FjbTM/mYrOA==
+"@types/jest@^26.0.24":
+  version "26.0.24"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.24.tgz#943d11976b16739185913a1936e0de0c4a7d595a"
+  integrity sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==
   dependencies:
     jest-diff "^26.0.0"
     pretty-format "^26.0.0"
@@ -3519,10 +3526,10 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
-"@types/lodash@^4.14.170":
-  version "4.14.170"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.170.tgz#0d67711d4bf7f4ca5147e9091b847479b87925d6"
-  integrity sha512-bpcvu/MKHHeYX+qeEN8GE7DIravODWdACVA1ctevD8CN24RhPZIKMn9ntfAsrvLfSX3cR5RrBKAbYm9bGs0A+Q==
+"@types/lodash@^4.14.171":
+  version "4.14.171"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.171.tgz#f01b3a5fe3499e34b622c362a46a609fdb23573b"
+  integrity sha512-7eQ2xYLLI/LsicL2nejW9Wyko3lcpN6O/z0ZLHrEQsg280zIdCv1t/0m6UtBjUHokCGBQ3gYTbHzDkZ1xOBwwg==
 
 "@types/markdown-to-jsx@^6.11.3":
   version "6.11.3"
@@ -3573,10 +3580,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.37.tgz#a3dd8da4eb84a996c36e331df98d82abd76b516e"
   integrity sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw==
 
-"@types/node@^15.12.5":
-  version "15.12.5"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-15.12.5.tgz#9a78318a45d75c9523d2396131bd3cca54b2d185"
-  integrity sha512-se3yX7UHv5Bscf8f1ERKvQOD6sTyycH3hdaoozvaLxgUiY5lIGEeH37AD0G0Qi9kPqihPn0HOfd2yaIEN9VwEg==
+"@types/node@^16.0.1":
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.0.1.tgz#70cedfda26af7a2ca073fdcc9beb2fff4aa693f8"
+  integrity sha512-hBOx4SUlEPKwRi6PrXuTGw1z6lz0fjsibcWCM378YxsSu/6+C30L6CR49zIBKHiwNWCYIcOLjg4OHKZaFeLAug==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
@@ -3635,27 +3642,44 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-custom-scrollbars@^4.0.7":
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/@types/react-custom-scrollbars/-/react-custom-scrollbars-4.0.7.tgz#b1312ec749fcf4a01fee7466508501e072ede7ea"
-  integrity sha512-4QPZdwd+wmzWq9TyNSA/4MZFYvlQn1GlEFFkpFx8VSs13gR/L+hQne0vFnbzwlQmGG7OksthkoVpYxWJjzz95w==
+"@types/react-beautiful-dnd@^13.1.1":
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#fb3fe24a334cc757d290e75722e4d3c8368ce3a3"
+  integrity sha512-1lBBxVSutE8CQM37Jq7KvJwuA94qaEEqsx+G0dnwzG6Sfwf6JGcNeFk5jjjhJli1q2naeMZm+D/dvT/zyX4QPw==
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@^17.0.8":
-  version "17.0.8"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.8.tgz#3180de6d79bf53762001ad854e3ce49f36dd71fc"
-  integrity sha512-0ohAiJAx1DAUEcY9UopnfwCE9sSMDGnY/oXjWMax6g3RpzmTt2GMyMVAXcbn0mo8XAff0SbQJl2/SBU+hjSZ1A==
+"@types/react-custom-scrollbars@^4.0.8":
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/@types/react-custom-scrollbars/-/react-custom-scrollbars-4.0.8.tgz#a848e0e0bb82f1c4386e7e2d7c6d7c8566c1d0c1"
+  integrity sha512-Xn+nEg3uK4kNkZ5QR97fDsGkFjICo81Ys5pZ0Ov5T9NR+nDKFoB2OUjKBtQcYKcXYsprNONQaWZ4/HSQZP8ivA==
   dependencies:
     "@types/react" "*"
 
-"@types/react-helmet@^6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.1.tgz#4fde22cbcaa1b461642e1d719cc6162d95acb110"
-  integrity sha512-VmSCMz6jp/06DABoY60vQa++h1YFt0PfAI23llxBJHbowqFgLUL0dhS1AQeVPNqYfRp9LAfokrfWACTNeobOrg==
+"@types/react-dom@^17.0.9":
+  version "17.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.9.tgz#441a981da9d7be117042e1a6fd3dac4b30f55add"
+  integrity sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==
   dependencies:
     "@types/react" "*"
 
+"@types/react-helmet@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.2.tgz#e9d7d16b29e4ec5716711c52c35c3cec45819eac"
+  integrity sha512-dcfAZNlWb5JYFbO9CGfrPWLJAyFcT6UeR3u35eBbv8liY2Rg4K7fM1G5+HnwVgot+C+kVwXAZ8pLEn2jsMfTDg==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-redux@^7.1.16":
+  version "7.1.16"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.16.tgz#0fbd04c2500c12105494c83d4a3e45c084e3cb21"
+  integrity sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react-syntax-highlighter@11.0.5":
   version "11.0.5"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087"
@@ -3672,10 +3696,10 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^17.0.11":
-  version "17.0.11"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.11.tgz#67fcd0ddbf5a0b083a0f94e926c7d63f3b836451"
-  integrity sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA==
+"@types/react@^17.0.14":
+  version "17.0.14"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.14.tgz#f0629761ca02945c4e8fea99b8177f4c5c61fb0f"
+  integrity sha512-0WwKHUbWuQWOce61UexYuWTGuGY/8JvtUe/dtQ6lR4sZ3UiylHotJeWpf3ArP9+DSGUoLY3wbU59VyMrJps5VQ==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -3708,10 +3732,10 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
   integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
 
-"@types/styled-components@^5.1.10":
-  version "5.1.10"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.10.tgz#b509da9d62be8a02cefd88ec6b820f417429a503"
-  integrity sha512-g3ZfWlTiyXktASIhcfCicZtqB/fFFnq0a7kPYYxKXNggdrohp8m/9bMmmt3zDvHj2gplWDGCkZByfFnEXfbSWg==
+"@types/styled-components@^5.1.11":
+  version "5.1.11"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.11.tgz#a3a1bc0f2cdad7318d8ce219ee507e6b353503b5"
+  integrity sha512-u8g3bSw9KUiZY+S++gh+LlURGraqBe3MC5I5dygrNjGDHWWQfsmZZRTJ9K9oHU2CqWtxChWmJkDI/gp+TZPQMw==
   dependencies:
     "@types/hoist-non-react-statics" "*"
     "@types/react" "*"
@@ -6234,6 +6258,13 @@ css-blank-pseudo@^0.1.4:
   dependencies:
     postcss "^7.0.5"
 
+css-box-model@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
+  dependencies:
+    tiny-invariant "^1.0.6"
+
 css-color-keywords@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
@@ -8890,7 +8921,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.3.0:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, 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==
@@ -9131,10 +9162,10 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
-husky@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-6.0.0.tgz#810f11869adf51604c32ea577edbc377d7f9319e"
-  integrity sha512-SQS2gDTB7tBN486QSoKPKQItZw97BMOd+Kdb6ghfpBc0yXyzrddI0oDV5MkDAbuB4X2mO3/nj60TRMcYxwzZeQ==
+husky@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.1.tgz#579f4180b5da4520263e8713cc832942b48e1f1c"
+  integrity sha512-gceRaITVZ+cJH9sNHqx5tFwbzlLCVxtVZcusME8JYQ8Edy5mpGDOqD8QBCdMhpyo9a+JXddnujQ4rpY2Ff9SJA==
 
 iconv-lite@0.4.24:
   version "0.4.24"
@@ -11394,7 +11425,7 @@ memfs@^3.1.2:
   dependencies:
     fs-monkey "1.0.1"
 
-memoize-one@^5.2.1:
+memoize-one@^5.1.1, memoize-one@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
@@ -13748,6 +13779,11 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+raf-schd@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
+  integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
+
 raf@^3.1.0, raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
@@ -13823,6 +13859,19 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
+react-beautiful-dnd@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d"
+  integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    css-box-model "^1.2.0"
+    memoize-one "^5.1.1"
+    raf-schd "^4.0.2"
+    react-redux "^7.2.0"
+    redux "^4.0.4"
+    use-memo-one "^1.1.1"
+
 react-colorful@^5.1.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.2.2.tgz#0a69d0648db47e51359d343854d83d250a742243"
@@ -13988,6 +14037,18 @@ react-popper@^2.2.4:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
+react-redux@^7.2.0:
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225"
+  integrity sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/react-redux" "^7.1.16"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.13.1"
+
 react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -14275,6 +14336,13 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux@^4.0.0, redux@^4.0.4:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.0.tgz#eb049679f2f523c379f1aff345c8612f294c88d4"
+  integrity sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 reflect.ownkeys@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
@@ -16068,6 +16136,11 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tiny-invariant@^1.0.6:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
@@ -16401,10 +16474,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^4.3.4:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.4.tgz#3f85b986945bcf31071decdd96cf8bfa65f9dcbc"
-  integrity sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==
+typescript@^4.3.5:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
+  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
 
 unbox-primitive@^1.0.0:
   version "1.0.0"
@@ -16659,6 +16732,11 @@ use-latest@^1.0.0:
   dependencies:
     use-isomorphic-layout-effect "^1.0.0"
 
+use-memo-one@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"
+  integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@@ -16875,10 +16953,10 @@ web-namespaces@^1.0.0:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec"
   integrity sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==
 
-web-vitals@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-2.0.1.tgz#d122720bd9c8dd69792b19c0f6ab0346861a880f"
-  integrity sha512-niqKyp2T6xF9EzSi+xx+V6qitE0YfagzfUmDAa9qeCrIVeyfzQQ85Uy0ykeRlEVDCCqkhYccoUunNf9ZIQcvtA==
+web-vitals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-2.1.0.tgz#ebf5428875ab5bfc1056c2e80cd177001287de7b"
+  integrity sha512-npEyJP8jHf3J71t1tRTEtz9FeKp8H2udWJUUq5ykfPhhstr//TUxiYhIEzLNwk4zv2ybAilMn7v7N6Mxmuitmg==
 
 webcrypto-core@^1.2.0:
   version "1.2.0"