diff --git a/packages/status-react/src/components/main-sidebar/channel-group.tsx b/packages/status-react/src/components/main-sidebar/channel-group.tsx
index 1b860cfe..6103d189 100644
--- a/packages/status-react/src/components/main-sidebar/channel-group.tsx
+++ b/packages/status-react/src/components/main-sidebar/channel-group.tsx
@@ -20,7 +20,7 @@ export const ChannelGroup = (props: Props) => {
     <ContextMenuTrigger>
       <Collapsible.Root defaultOpen>
         <CollapsibleTrigger>
-          <Text size="15" weight="500" color="black-70">
+          <Text size="15" weight="500" color="accent">
             {name}
           </Text>
           <ChevronDownIcon />
@@ -28,7 +28,7 @@ export const ChannelGroup = (props: Props) => {
         <CollapsibleContent>{children}</CollapsibleContent>
       </Collapsible.Root>
       <ContextMenu>
-        <ContextMenu.TriggerItem label="Mute Chat" icon={<BellIcon />}>
+        <ContextMenu.TriggerItem label="Mute Category" icon={<BellIcon />}>
           <ContextMenu.Item>For 15 min</ContextMenu.Item>
           <ContextMenu.Item>For 1 hour</ContextMenu.Item>
           <ContextMenu.Item>For 8 hours</ContextMenu.Item>
diff --git a/packages/status-react/src/components/main-sidebar/community-dialog.tsx b/packages/status-react/src/components/main-sidebar/community-dialog.tsx
new file mode 100644
index 00000000..ed7ab423
--- /dev/null
+++ b/packages/status-react/src/components/main-sidebar/community-dialog.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+
+import { Button, Dialog, Text, TextInput } from '~/src/system'
+
+interface Props {
+  title: string
+  description: string
+}
+
+export const CommunityDialog = (props: Props) => {
+  const { title, description } = props
+
+  return (
+    <Dialog title={title}>
+      <Dialog.Body>
+        <Text>{description}</Text>
+      </Dialog.Body>
+      <Dialog.Separator />
+      <Dialog.Body>
+        <TextInput placeholder="meow" />
+        <Text>
+          To access this community, paste community public key in Status desktop
+          or mobile app
+        </Text>
+      </Dialog.Body>
+      <Dialog.Separator />
+      <Dialog.Body>
+        <svg
+          width="171"
+          height="64"
+          viewBox="0 0 171 64"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M32.3005 0C14.4611 0 0 14.3269 0 32C0 49.6731 14.4611 64 32.3005 64C50.14 64 64.6022 49.6731 64.6022 32C64.6022 14.3269 50.14 0 32.3005 0Z"
+            fill="#4360DF"
+          />
+          <path
+            d="M32.4695 30.5975C34.0987 30.7644 35.7266 30.9312 37.7289 30.8215C43.1524 30.5232 46.4384 27.7758 46.205 23.6695C45.967 19.4912 41.5961 16.9175 37.2229 17.1587C30.0952 17.5495 24.8531 23.7255 24.2639 30.7815C25.2321 30.5587 26.2512 30.4238 27.2113 30.3712C29.2136 30.2615 30.8416 30.4284 32.4695 30.5964V30.5975ZM18.4984 39.7312C18.7225 43.5609 22.8635 45.9209 27.0068 45.6992C33.7613 45.3404 38.7261 39.6798 39.2841 33.2112C38.3667 33.4169 37.402 33.5392 36.4915 33.5884C34.5955 33.6889 33.053 33.5347 31.5094 33.3827C29.9669 33.2284 28.4245 33.0752 26.5273 33.1769C21.3892 33.4501 18.2777 35.9678 18.4972 39.7324L18.4984 39.7312Z"
+            fill="white"
+          />
+          <path
+            d="M77.1738 37.3143H81.8509C81.8509 38.0971 82.0739 38.6594 82.521 39.0011C82.9682 39.3429 83.5413 39.5131 84.2426 39.5131C84.8203 39.5131 85.294 39.408 85.6591 39.1966C86.0346 38.976 86.2218 38.6194 86.2218 38.1269C86.2218 37.8354 86.1409 37.6 85.9792 37.4183C85.8267 37.2286 85.5875 37.0629 85.2628 36.9223C84.8579 36.7422 84.4405 36.591 84.0138 36.4697C83.5054 36.3189 82.8965 36.128 82.186 35.8983C81.5764 35.7076 80.972 35.5014 80.3731 35.28C79.8456 35.0762 79.3484 34.8025 78.8954 34.4663C78.4761 34.1531 78.1326 33.7514 77.8902 33.2903C77.6568 32.8286 77.5401 32.256 77.5401 31.5726C77.5401 30.7897 77.6972 30.112 78.0127 29.5383C78.3282 28.9648 78.7833 28.4781 79.3367 28.1223C79.9064 27.7509 80.5869 27.4754 81.3783 27.2937C82.2372 27.0956 83.1169 26.9996 83.9988 27.008C85.1658 27.008 86.171 27.1383 87.0144 27.4C87.8579 27.6606 88.5476 28.0171 89.0861 28.4697C89.6245 28.9211 90.0208 29.4537 90.2738 30.0663C90.5384 30.6789 90.6701 31.3371 90.6701 32.04H85.963C85.963 31.4274 85.8012 30.9497 85.4754 30.6091C85.1611 30.2663 84.6782 30.096 84.0288 30.096C83.532 30.096 83.1045 30.2069 82.7498 30.4274C82.394 30.6389 82.216 30.96 82.216 31.392C82.216 31.6834 82.2969 31.92 82.4598 32.1006C82.6331 32.272 82.8815 32.4263 83.2062 32.568C83.5309 32.7086 83.933 32.8537 84.4101 33.0046C84.8873 33.1451 85.435 33.3154 86.0554 33.5166C86.7256 33.6971 87.3495 33.8983 87.9283 34.1189C88.5072 34.3406 89.0144 34.6114 89.4512 34.9326C89.8983 35.2446 90.2484 35.6411 90.5026 36.1234C90.7672 36.5954 90.8989 37.1977 90.8989 37.9314C90.8989 38.7954 90.7163 39.5337 90.3501 40.1463C89.9846 40.7488 89.4777 41.2553 88.8723 41.6229C88.2634 42.0046 87.5528 42.2754 86.7406 42.4366C85.9283 42.608 85.0745 42.6926 84.1814 42.6926C81.9572 42.6926 80.231 42.2354 79.0017 41.3211C77.7839 40.3977 77.1738 39.0629 77.1738 37.3143ZM92.0866 30.9257V27.4149H94.4483V23H99.2005V27.4149H102.627V30.9257H99.2005V36.2434C99.2005 36.7966 99.2513 37.2377 99.353 37.5691C99.4547 37.8914 99.5956 38.1474 99.7793 38.3383C99.9723 38.5189 100.201 38.64 100.464 38.6994C100.739 38.7497 101.043 38.7749 101.378 38.7749C101.582 38.7749 101.841 38.7703 102.156 38.76C102.47 38.7406 102.745 38.7097 102.978 38.6686V42.2857C102.623 42.3463 102.176 42.4011 101.637 42.4514C101.014 42.5057 100.389 42.5308 99.7643 42.5269C99.2051 42.5269 98.617 42.4869 97.9966 42.4069C97.3815 42.3281 96.7927 42.1116 96.275 41.7737C95.7481 41.4309 95.3114 40.9097 94.9659 40.2069C94.6205 39.4937 94.4483 38.5189 94.4483 37.2834V30.9257H92.0866ZM104.349 34.8423C104.349 33.728 104.527 32.6937 104.882 31.7394C105.219 30.8313 105.731 29.9967 106.391 29.2823C107.033 28.5953 107.803 28.038 108.66 27.6411C109.537 27.236 110.495 27.0299 111.463 27.0377C112.589 27.0377 113.566 27.2743 114.387 27.7463C115.219 28.2183 115.844 28.816 116.261 29.5394V27.4137H121.028V42.2857H116.261V40.1909C115.885 40.8743 115.28 41.4571 114.447 41.9394C113.615 42.4217 112.621 42.6629 111.463 42.6629C110.467 42.6629 109.533 42.4617 108.66 42.0594C107.803 41.6623 107.033 41.1046 106.391 40.4171C105.733 39.696 105.221 38.8574 104.882 37.9463C104.519 36.9511 104.339 35.9 104.349 34.8423ZM109.086 34.8423C109.086 35.3554 109.173 35.848 109.345 36.3189C109.527 36.7817 109.772 37.1829 110.076 37.5246C110.392 37.856 110.767 38.1269 111.204 38.3383C111.641 38.5394 112.128 38.64 112.666 38.64C113.204 38.64 113.692 38.5394 114.128 38.3383C114.554 38.1424 114.937 37.866 115.255 37.5246C115.57 37.1829 115.814 36.7817 115.986 36.3189C116.169 35.8571 116.261 35.3646 116.261 34.8423C116.261 34.3303 116.169 33.848 115.986 33.3966C115.819 32.9536 115.572 32.5449 115.255 32.1909C114.949 31.8385 114.57 31.5558 114.143 31.3623C113.679 31.1555 113.175 31.0525 112.666 31.0606C112.127 31.0606 111.641 31.1611 111.204 31.3623C110.774 31.5581 110.39 31.8403 110.076 32.1909C109.771 32.5429 109.527 32.9451 109.345 33.3966C109.172 33.848 109.086 34.3303 109.086 34.8423ZM123.588 30.9257V27.4149H125.948V23H130.701V27.4149H134.128V30.9257H130.701V36.2434C130.701 36.7966 130.752 37.2377 130.853 37.5691C130.954 37.8914 131.097 38.1474 131.28 38.3383C131.473 38.5189 131.701 38.64 131.965 38.6994C132.239 38.7497 132.544 38.7749 132.879 38.7749C133.083 38.7749 133.342 38.7703 133.656 38.76C133.971 38.7406 134.245 38.7097 134.478 38.6686V42.2857C134.124 42.3463 133.677 42.4011 133.138 42.4514C132.515 42.5057 131.89 42.5309 131.264 42.5269C130.706 42.5269 130.117 42.4869 129.498 42.4069C128.882 42.328 128.294 42.1115 127.776 41.7737C127.248 41.4309 126.811 40.9097 126.467 40.2069C126.121 39.4937 125.948 38.5189 125.948 37.2834V30.9257H123.588ZM136.84 36.2434V27.4149H141.577V35.0377C141.577 36.1029 141.77 36.9726 142.156 37.6457C142.542 38.3086 143.232 38.64 144.228 38.64C145.223 38.64 145.954 38.3029 146.421 37.6297C146.898 36.9474 147.137 36.0274 147.137 34.8731V27.4149H151.904V42.2857H147.137V40.1611C146.72 40.9451 146.086 41.5577 145.233 41.9989C144.379 42.4411 143.359 42.6617 142.171 42.6617C141.135 42.6617 140.282 42.5017 139.612 42.1806C138.993 41.8905 138.443 41.4746 137.998 40.96C137.519 40.386 137.194 39.7022 137.053 38.9714C136.911 38.2171 136.84 37.3086 136.84 36.2434ZM154.981 37.3143H159.658C159.658 38.0971 159.881 38.6594 160.328 39.0011C160.774 39.3429 161.349 39.5131 162.049 39.5131C162.628 39.5131 163.1 39.408 163.466 39.1966C163.842 38.976 164.029 38.6194 164.029 38.1269C164.029 37.8354 163.948 37.6 163.785 37.4183C163.634 37.2286 163.395 37.0629 163.07 36.9223C162.665 36.7424 162.248 36.5912 161.821 36.4697C161.313 36.3189 160.704 36.128 159.993 35.8983C159.384 35.7076 158.779 35.5015 158.18 35.28C157.653 35.0764 157.156 34.8026 156.703 34.4663C156.283 34.153 155.94 33.7513 155.698 33.2903C155.464 32.8286 155.347 32.256 155.347 31.5726C155.347 30.7897 155.505 30.112 155.819 29.5383C156.135 28.9649 156.59 28.4782 157.144 28.1223C157.714 27.7509 158.393 27.4754 159.186 27.2937C160.045 27.0955 160.924 26.9996 161.806 27.008C162.973 27.008 163.978 27.1383 164.822 27.4C165.664 27.6606 166.355 28.0171 166.893 28.4697C167.432 28.9211 167.827 29.4537 168.081 30.0663C168.348 30.6906 168.483 31.3623 168.477 32.04H163.77C163.77 31.4274 163.609 30.9497 163.283 30.6091C162.968 30.2663 162.486 30.096 161.836 30.096C161.338 30.096 160.912 30.2069 160.556 30.4274C160.201 30.6389 160.023 30.96 160.023 31.392C160.023 31.6834 160.104 31.92 160.267 32.1006C160.439 32.272 160.689 32.4263 161.014 32.568C161.338 32.7086 161.739 32.8537 162.216 33.0046C162.695 33.1451 163.242 33.3154 163.862 33.5166C164.532 33.6971 165.157 33.8983 165.736 34.1189C166.315 34.3406 166.822 34.6114 167.258 34.9326C167.706 35.2446 168.056 35.6411 168.31 36.1234C168.573 36.5954 168.706 37.1977 168.706 37.9314C168.706 38.7954 168.523 39.5337 168.157 40.1463C167.792 40.7489 167.285 41.2554 166.68 41.6229C166.071 42.0046 165.36 42.2754 164.548 42.4366C163.734 42.608 162.882 42.6926 161.989 42.6926C159.765 42.6926 158.038 42.2354 156.809 41.3211C155.591 40.3977 154.981 39.0629 154.981 37.3143Z"
+            fill="black"
+          />
+        </svg>
+        <Button>Download Status for Mac</Button>
+      </Dialog.Body>
+      <Dialog.Actions>
+        <Dialog.Cancel variant="danger">Cancel</Dialog.Cancel>
+        <Dialog.Action>Submit</Dialog.Action>
+      </Dialog.Actions>
+    </Dialog>
+  )
+}
diff --git a/packages/status-react/src/components/main-sidebar/index.tsx b/packages/status-react/src/components/main-sidebar/index.tsx
index e30f154c..fa0f9915 100644
--- a/packages/status-react/src/components/main-sidebar/index.tsx
+++ b/packages/status-react/src/components/main-sidebar/index.tsx
@@ -1,20 +1,19 @@
 import React from 'react'
 
-import { useAppState } from '~/src/contexts/app-context'
 import { EditIcon } from '~/src/icons/edit-icon'
 import { styled } from '~/src/styles/config'
-import { Box, Button } from '~/src/system'
+import { Box } from '~/src/system'
 import { Avatar } from '~/src/system/avatar'
-import { Dialog, DialogTrigger } from '~/src/system/dialog'
+import { DialogTrigger } from '~/src/system/dialog'
 import { Grid } from '~/src/system/grid'
 import { Heading } from '~/src/system/heading'
 import { IconButton } from '~/src/system/icon-button'
 import { Text } from '~/src/system/text'
-import { TextInput } from '~/src/system/text-input'
 
 import { ChannelGroup } from './channel-group'
 import { ChannelItem } from './channel-item'
 import { ChatItem } from './chat-item'
+import { CommunityDialog } from './community-dialog'
 
 const CHANNELS = {
   Public: ['welcome', 'general', 'random'],
@@ -24,8 +23,6 @@ const CHANNELS = {
 const CHATS = ['vitalik.eth', 'pvl.eth', 'Climate Change']
 
 export const MainSidebar = () => {
-  const { dispatch } = useAppState()
-
   return (
     <Wrapper>
       <DialogTrigger>
@@ -38,15 +35,10 @@ export const MainSidebar = () => {
             </Text>
           </div>
         </IdentityWrapper>
-        <Dialog title="Crypto Kitties" actionLabel="Save">
-          <Text>A community of cat lovers, meow!</Text>
-          <TextInput placeholder="meow" />
-          <Text>
-            To access this community, paste community public key in Status
-            desktop or mobile app
-          </Text>
-          <Button>Download Status for Mac</Button>
-        </Dialog>
+        <CommunityDialog
+          title="Crypto Kitties"
+          description="A community of cat lovers, meow!"
+        />
       </DialogTrigger>
 
       {Object.entries(CHANNELS).map(([group, channels]) => (
@@ -54,9 +46,9 @@ export const MainSidebar = () => {
           {channels.map(channel => (
             <ChannelItem
               key={group + channel}
+              to={`/${channel}`}
               unread={channel === 'general'}
               muted={channel === 'random'}
-              active={false}
             >
               {channel}
             </ChannelItem>
@@ -73,16 +65,13 @@ export const MainSidebar = () => {
           justify="between"
           css={{ marginBottom: 16 }}
         >
-          <Heading>Messages</Heading>
-          <IconButton
-            label="New Chat"
-            onClick={() => dispatch({ type: 'NEW_CHAT' })}
-          >
+          <Heading weight="600">Messages</Heading>
+          <IconButton label="New Chat" to="/new">
             <EditIcon />
           </IconButton>
         </Grid>
         {CHATS.map(chat => (
-          <ChatItem key={chat} unread={false} muted={false} active={false}>
+          <ChatItem key={chat} to={`/${chat}`} unread={false} muted={false}>
             {chat}
           </ChatItem>
         ))}
diff --git a/packages/status-react/src/components/main-sidebar/sidebar-item.tsx b/packages/status-react/src/components/main-sidebar/sidebar-item.tsx
index 1196dfd2..c9570ec7 100644
--- a/packages/status-react/src/components/main-sidebar/sidebar-item.tsx
+++ b/packages/status-react/src/components/main-sidebar/sidebar-item.tsx
@@ -1,30 +1,31 @@
 import React, { forwardRef } from 'react'
 
+import { NavLink } from 'react-router-dom'
+
 import { styled } from '~/src/styles/config'
 import { Avatar } from '~/src/system'
 
 import type { Ref } from 'react'
 
 interface Props {
+  to: string
   muted: boolean
   unread: boolean
-  active: boolean
   children: React.ReactNode
 }
 
-const SidebarItem = (props: Props, ref: Ref<HTMLButtonElement>) => {
-  const { muted, unread, active, children, ...buttonProps } = props
+const SidebarItem = (props: Props, ref: Ref<HTMLAnchorElement>) => {
+  const { muted, unread, children, ...buttonProps } = props
 
   return (
-    <Button
+    <Link
       ref={ref}
       state={muted ? 'muted' : unread ? 'unread' : undefined}
-      active={active}
       {...buttonProps}
     >
       <Avatar size={24} />
       {children}
-    </Button>
+    </Link>
   )
 }
 
@@ -33,7 +34,7 @@ const _SidebarItem = forwardRef(SidebarItem)
 export { _SidebarItem as SidebarItem }
 export type SidebarItemProps = Omit<Props, 'children'>
 
-const Button = styled('button', {
+const Link = styled(NavLink, {
   position: 'relative',
   fontFamily: '$sans',
   fontWeight: '$500',
@@ -50,12 +51,11 @@ const Button = styled('button', {
     background: '#E9EDF1',
   },
 
+  '&.active': {
+    background: 'rgba(233, 237, 241, 1)',
+  },
+
   variants: {
-    active: {
-      true: {
-        background: 'rgba(233, 237, 241, 1)',
-      },
-    },
     state: {
       muted: {
         color: 'rgba(0, 0, 0, 0.4)',
@@ -64,6 +64,7 @@ const Button = styled('button', {
         fontWeight: '$600',
         '&::after': {
           content: '"1"',
+          textAlign: 'center',
           position: 'absolute',
           right: 8,
           width: 22,
diff --git a/packages/status-react/src/contexts/app-context.tsx b/packages/status-react/src/contexts/app-context.tsx
index 26517a73..3e6e84f5 100644
--- a/packages/status-react/src/contexts/app-context.tsx
+++ b/packages/status-react/src/contexts/app-context.tsx
@@ -10,27 +10,14 @@ type Context = {
 const AppContext = createContext<Context | undefined>(undefined)
 
 interface State {
-  view: 'loading' | 'error' | 'chat' | 'group-chat' | 'channel' | 'new-chat'
+  state: 'loading' | 'error'
   showMembers: boolean
 }
 
-type Action =
-  | { type: 'NEW_CHAT' }
-  | { type: 'SET_CHANNEL'; channelId: string }
-  | { type: 'SET_CHAT'; chatId: string }
-  | { type: 'TOGGLE_MEMBERS' }
+type Action = { type: 'TOGGLE_MEMBERS' }
 
 const reducer: Reducer<State, Action> = (state, action) => {
   switch (action.type) {
-    case 'NEW_CHAT': {
-      return { ...state, view: 'new-chat' }
-    }
-    case 'SET_CHAT': {
-      return { ...state, view: 'chat' }
-    }
-    case 'SET_CHANNEL': {
-      return { ...state, view: 'channel' }
-    }
     case 'TOGGLE_MEMBERS': {
       return { ...state, showMembers: !state.showMembers }
     }
@@ -38,8 +25,8 @@ const reducer: Reducer<State, Action> = (state, action) => {
 }
 
 const initialState: State = {
-  view: 'channel',
-  showMembers: true,
+  state: 'loading',
+  showMembers: false,
 }
 
 interface Props {
@@ -55,7 +42,7 @@ export const AppProvider = (props: Props) => {
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>
 }
 
-export function useAppState() {
+export const useAppState = () => {
   const context = useContext(AppContext)
 
   if (!context) {
diff --git a/packages/status-react/src/index.tsx b/packages/status-react/src/index.tsx
index 7106ae8e..03b8cb54 100644
--- a/packages/status-react/src/index.tsx
+++ b/packages/status-react/src/index.tsx
@@ -1,3 +1,5 @@
-export { type CommunityProps, Community } from './modules/community'
+export type { CommunityProps } from './modules/community'
+export { Community } from './modules/community'
 export { darkTheme, lightTheme } from './styles/themes'
 export type { Config } from './types/config'
+export { HashRouter, MemoryRouter } from 'react-router-dom'
diff --git a/packages/status-react/src/modules/community/index.tsx b/packages/status-react/src/modules/community/index.tsx
index 9af1c363..3a13f2e6 100644
--- a/packages/status-react/src/modules/community/index.tsx
+++ b/packages/status-react/src/modules/community/index.tsx
@@ -1,5 +1,6 @@
 import React, { useRef } from 'react'
 
+import { BrowserRouter } from 'react-router-dom'
 import styled, { ThemeProvider } from 'styled-components'
 
 import { AppProvider } from '~/src/contexts/app-context'
@@ -19,37 +20,44 @@ import type { Config } from '~/src/types/config'
 type Props = Config
 
 export const Community = (props: Props) => {
-  const { theme, environment, publicKey } = props
+  const {
+    theme,
+    environment,
+    publicKey,
+    router: Router = BrowserRouter,
+  } = props
 
   const ref = useRef<HTMLHeadingElement>(null)
 
   return (
-    <AppProvider>
-      <ThemeProvider theme={theme}>
-        <NarrowProvider myRef={ref}>
-          <ModalProvider>
-            <ToastProvider>
-              <Wrapper ref={ref}>
-                <GlobalStyle />
-                <IdentityProvider>
-                  <MessengerProvider
-                    publicKey={publicKey}
-                    environment={environment}
-                  >
-                    <ChatStateProvider>
-                      <ScrollProvider>
-                        <Messenger />
-                        <div id="modal-root" />
-                      </ScrollProvider>
-                    </ChatStateProvider>
-                  </MessengerProvider>
-                </IdentityProvider>
-              </Wrapper>
-            </ToastProvider>
-          </ModalProvider>
-        </NarrowProvider>
-      </ThemeProvider>
-    </AppProvider>
+    <Router>
+      <AppProvider>
+        <ThemeProvider theme={theme}>
+          <NarrowProvider myRef={ref}>
+            <ModalProvider>
+              <ToastProvider>
+                <Wrapper ref={ref}>
+                  <GlobalStyle />
+                  <IdentityProvider>
+                    <MessengerProvider
+                      publicKey={publicKey}
+                      environment={environment}
+                    >
+                      <ChatStateProvider>
+                        <ScrollProvider>
+                          <Messenger />
+                          <div id="modal-root" />
+                        </ScrollProvider>
+                      </ChatStateProvider>
+                    </MessengerProvider>
+                  </IdentityProvider>
+                </Wrapper>
+              </ToastProvider>
+            </ModalProvider>
+          </NarrowProvider>
+        </ThemeProvider>
+      </AppProvider>
+    </Router>
   )
 }
 
diff --git a/packages/status-react/src/modules/community/messenger.tsx b/packages/status-react/src/modules/community/messenger.tsx
index 75219010..8c16b58f 100644
--- a/packages/status-react/src/modules/community/messenger.tsx
+++ b/packages/status-react/src/modules/community/messenger.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 
-import { Chat } from '~/src/components/chat'
+import { Route, Routes } from 'react-router-dom'
+
 import { MainSidebar } from '~/src/components/main-sidebar'
-import { NewChat } from '~/src/components/new-chat'
-import { useAppState } from '~/src/contexts/app-context'
+import { Chat } from '~/src/routes/chat'
+import { NewChat } from '~/src/routes/new-chat'
 import { styled } from '~/src/styles/config'
 
 // import { AgreementModal } from '~/src/components/Modals/AgreementModal'
@@ -41,13 +42,13 @@ import { styled } from '~/src/styles/config'
 // }
 
 export function Messenger() {
-  const { state } = useAppState()
-
   return (
     <Wrapper>
       <MainSidebar />
-      {state.view === 'new-chat' && <NewChat />}
-      {(state.view === 'channel' || state.view === 'chat') && <Chat />}
+      <Routes>
+        <Route path="/:id" element={<Chat />} />
+        <Route path="/new" element={<NewChat />} />
+      </Routes>
     </Wrapper>
   )
 }
diff --git a/packages/status-react/src/components/chat/chat-input.tsx b/packages/status-react/src/routes/chat/chat-input.tsx
similarity index 100%
rename from packages/status-react/src/components/chat/chat-input.tsx
rename to packages/status-react/src/routes/chat/chat-input.tsx
diff --git a/packages/status-react/src/components/chat/chat-message.tsx b/packages/status-react/src/routes/chat/chat-message.tsx
similarity index 100%
rename from packages/status-react/src/components/chat/chat-message.tsx
rename to packages/status-react/src/routes/chat/chat-message.tsx
diff --git a/packages/status-react/src/components/chat/index.tsx b/packages/status-react/src/routes/chat/index.tsx
similarity index 96%
rename from packages/status-react/src/components/chat/index.tsx
rename to packages/status-react/src/routes/chat/index.tsx
index a24a3006..2b617e91 100644
--- a/packages/status-react/src/components/chat/index.tsx
+++ b/packages/status-react/src/routes/chat/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { MemberSidebar } from '~/src/components/member-sidebar'
 import { useAppState } from '~/src/contexts/app-context'
 import { ChatProvider } from '~/src/contexts/chat-context'
 import { styled } from '~/src/styles/config'
@@ -8,7 +9,6 @@ import { Flex } from '~/src/system/flex'
 import { Heading } from '~/src/system/heading'
 import { Text } from '~/src/system/text'
 
-import { MemberSidebar } from '../member-sidebar'
 import { ChatInput } from './chat-input'
 import { ChatMessage } from './chat-message'
 import { Navbar } from './navbar'
diff --git a/packages/status-react/src/components/chat/navbar.tsx b/packages/status-react/src/routes/chat/navbar.tsx
similarity index 100%
rename from packages/status-react/src/components/chat/navbar.tsx
rename to packages/status-react/src/routes/chat/navbar.tsx
diff --git a/packages/status-react/src/routes/new-chat/index.tsx b/packages/status-react/src/routes/new-chat/index.tsx
new file mode 100644
index 00000000..7ad2b865
--- /dev/null
+++ b/packages/status-react/src/routes/new-chat/index.tsx
@@ -0,0 +1,432 @@
+import React, { useCallback, useMemo, useState } from 'react'
+
+import { BellIcon } from '~/src/icons/bell-icon'
+// import styled from 'styled-components'
+import { styled } from '~/src/styles/config'
+import { Box, Button, IconButton, TextInput } from '~/src/system'
+
+import { ActivityButton } from '../../components/ActivityCenter/ActivityButton'
+import { BackButton } from '../../components/Buttons/BackButton'
+import { buttonStyles } from '../../components/Buttons/buttonStyle'
+import { ChatInput } from '../../components/Chat-legacy/ChatInput'
+import { CrossIcon } from '../../components/Icons/CrossIcon'
+import { Member } from '../../components/Members/Member'
+import { SearchBlock } from '../../components/SearchBlock'
+import { textMediumStyles } from '../../components/Text'
+import { ChatState, useChatState } from '../../contexts/chatStateProvider'
+import { useUserPublicKey } from '../../contexts/identityProvider'
+import { useMessengerContext } from '../../contexts/messengerProvider'
+import { useNarrow } from '../../contexts/narrowProvider'
+
+import type { ChannelData } from '../../models/ChannelData'
+
+interface Props {
+  setEditGroup?: (val: boolean) => void
+  activeChannel?: ChannelData
+}
+
+export const NewChat = (props: Props) => {
+  const { setEditGroup, activeChannel } = props
+
+  const narrow = useNarrow()
+  const userPK = useUserPublicKey()
+  const [query, setQuery] = useState('')
+  const [groupChatMembersIds, setGroupChatMembersIds] = useState<string[]>(
+    activeChannel?.members?.map(member => member.id) ?? []
+  )
+  const { contacts, createGroupChat, addMembers } = useMessengerContext()
+
+  const groupChatMembers = useMemo(
+    () => groupChatMembersIds.map(id => contacts[id]).filter(e => !!e),
+    [groupChatMembersIds, contacts]
+  )
+
+  const contactsList = useMemo(() => {
+    return Object.values(contacts)
+      .filter(
+        member =>
+          member.id.includes(query) ||
+          member?.customName?.includes(query) ||
+          member.trueName.includes(query)
+      )
+      .filter(member => !groupChatMembersIds.includes(member.id))
+  }, [query, groupChatMembersIds, contacts])
+
+  const setChatState = useChatState()[1]
+
+  const addMember = useCallback(
+    (member: string) => {
+      setGroupChatMembersIds((prevMembers: string[]) => {
+        if (
+          prevMembers.find(mem => mem === member) ||
+          prevMembers.length >= 5
+        ) {
+          return prevMembers
+        } else {
+          return [...prevMembers, member]
+        }
+      })
+      setQuery('')
+    },
+    [setGroupChatMembersIds]
+  )
+  const removeMember = useCallback(
+    (member: string) => {
+      setGroupChatMembersIds(prev => prev.filter(e => e != member))
+    },
+    [setGroupChatMembersIds]
+  )
+
+  const createChat = useCallback(
+    (group: string[]) => {
+      if (userPK) {
+        const newGroup = group.slice()
+        newGroup.push(userPK)
+        createGroupChat(newGroup)
+        setChatState(ChatState.ChatBody)
+      }
+    },
+    [userPK, createGroupChat, setChatState]
+  )
+
+  const handleCreationClick = useCallback(() => {
+    if (!activeChannel) {
+      createChat(groupChatMembers.map(member => member.id))
+    } else {
+      addMembers(
+        groupChatMembers.map(member => member.id),
+        activeChannel.id
+      )
+    }
+    setEditGroup?.(false)
+  }, [activeChannel, groupChatMembers, createChat, addMembers, setEditGroup])
+
+  return (
+    <Wrapper>
+      <NavbarWrapper>
+        <Box css={{ flex: 1 }}>
+          <TextInput />
+        </Box>
+        <Button
+          // disabled={groupChatMembers.length === 0}
+          onClick={handleCreationClick}
+        >
+          Confirm
+        </Button>
+        <IconButton label="Show Activity Center">
+          <BellIcon />
+        </IconButton>
+      </NavbarWrapper>
+    </Wrapper>
+  )
+
+  // return (
+  //   <Wrapper className={`${narrow && 'narrow'}`}>
+  //     <CreationBar
+  //       className={`${groupChatMembers.length === 5 && narrow && 'limit'}`}
+  //     >
+  //       {narrow && (
+  //         <BackButton
+  //           onBtnClick={() =>
+  //             setEditGroup
+  //               ? setEditGroup?.(false)
+  //               : setChatState(ChatState.ChatBody)
+  //           }
+  //           className="narrow"
+  //         />
+  //       )}
+  //       <Column>
+  //         <InputBar>
+  //           <InputText>To:</InputText>
+  //           <StyledList>
+  //             {groupChatMembers.map(member => (
+  //               <StyledMember key={member.id}>
+  //                 <StyledName>
+  //                   {member?.customName?.slice(0, 10) ??
+  //                     member.trueName.slice(0, 10)}
+  //                 </StyledName>
+  //                 <CloseButton onClick={() => removeMember(member.id)}>
+  //                   <CrossIcon memberView={true} />
+  //                 </CloseButton>
+  //               </StyledMember>
+  //             ))}
+  //           </StyledList>
+  //           {groupChatMembers.length < 5 && (
+  //             <SearchMembers>
+  //               <Input
+  //                 value={query}
+  //                 onInput={e => setQuery(e.currentTarget.value)}
+  //               />
+  //             </SearchMembers>
+  //           )}
+  //           {!narrow && groupChatMembers.length === 5 && (
+  //             <LimitAlert>5 user Limit reached</LimitAlert>
+  //           )}
+  //         </InputBar>
+  //         {narrow && groupChatMembers.length === 5 && (
+  //           <LimitAlert className="narrow">5 user Limit reached</LimitAlert>
+  //         )}
+  //       </Column>
+  //       <Button
+  //         disabled={groupChatMembers.length === 0}
+  //         onClick={handleCreationClick}
+  //       >
+  //         Confirm
+  //       </Button>
+
+  //       <IconButton label="Show Activity Center">
+  //         <BellIcon />
+  //       </IconButton>
+
+  //       {!narrow && <ActivityButton className="creation" />}
+  //       {!narrow && (
+  //         <SearchBlock
+  //           query={query}
+  //           discludeList={groupChatMembersIds}
+  //           onClick={addMember}
+  //         />
+  //       )}
+  //     </CreationBar>
+  //     {((!setEditGroup && groupChatMembers.length === 0) || narrow) &&
+  //       Object.keys(contacts).length > 0 && (
+  //         <Contacts>
+  //           <ContactsHeading>Contacts</ContactsHeading>
+  //           <ContactsList>
+  //             {userPK && narrow
+  //               ? contactsList.map(contact => (
+  //                   <Contact key={contact.id}>
+  //                     <Member
+  //                       contact={contact}
+  //                       isOnline={contact.online}
+  //                       onClick={() => addMember(contact.id)}
+  //                     />
+  //                   </Contact>
+  //                 ))
+  //               : Object.values(contacts)
+  //                   .filter(
+  //                     e => e.id != userPK && !groupChatMembersIds.includes(e.id)
+  //                   )
+  //                   .map(contact => (
+  //                     <Contact key={contact.id}>
+  //                       <Member
+  //                         contact={contact}
+  //                         isOnline={contact.online}
+  //                         onClick={() => addMember(contact.id)}
+  //                       />
+  //                     </Contact>
+  //                   ))}
+  //           </ContactsList>
+  //         </Contacts>
+  //       )}
+  //     {!setEditGroup && Object.keys(contacts).length === 0 && (
+  //       <EmptyContacts>
+  //         <EmptyContactsHeading>
+  //           You only can send direct messages to your Contacts.{' '}
+  //         </EmptyContactsHeading>
+  //         <EmptyContactsHeading>
+  //           {' '}
+  //           Send a contact request to the person you would like to chat with,
+  //           you will be able to chat with them once they have accepted your
+  //           contact request.
+  //         </EmptyContactsHeading>
+  //       </EmptyContacts>
+  //     )}
+
+  //     {!activeChannel && (
+  //       <ChatInput
+  //         createChat={createChat}
+  //         group={groupChatMembers.map(member => member.id)}
+  //       />
+  //     )}
+  // </Wrapper>
+  // )
+}
+
+const Wrapper = styled('div', {
+  flex: 1,
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'stretch',
+  background: '#fff',
+})
+
+const NavbarWrapper = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  // justifyContent: 'space-between',
+  gap: '$4',
+  padding: '10px 16px',
+})
+
+// const Wrapper = styled.div`
+//   height: 100%;
+//   display: flex;
+//   flex-direction: column;
+//   justify-content: space-between;
+//   flex: 1;
+//   background-color: ${({ theme }) => theme.bodyBackgroundColor};
+//   padding: 8px 16px;
+
+//   &.narrow {
+//     width: 100%;
+//     max-width: 100%;
+//   }
+// `
+
+// const CreationBar = styled.div`
+//   display: flex;
+//   align-items: center;
+//   margin-bottom: 24px;
+//   position: relative;
+
+//   &.limit {
+//     align-items: flex-start;
+//   }
+// `
+
+// const Column = styled.div`
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   flex: 1;
+//   margin-right: 16px;
+//   overflow-x: hidden;
+// `
+
+// const InputBar = styled.div`
+//   display: flex;
+//   align-items: center;
+//   width: 100%;
+//   height: 44px;
+//   background-color: ${({ theme }) => theme.inputColor};
+//   border: 1px solid ${({ theme }) => theme.inputColor};
+//   border-radius: 8px;
+//   padding: 6px 16px;
+
+//   ${textMediumStyles}
+// `
+
+// const Input = styled.input`
+//   width: 100%;
+//   min-width: 20px;
+//   background-color: ${({ theme }) => theme.inputColor};
+//   border: 1px solid ${({ theme }) => theme.inputColor};
+//   outline: none;
+//   resize: none;
+
+//   ${textMediumStyles}
+
+//   &:focus {
+//     outline: none;
+//     caret-color: ${({ theme }) => theme.notificationColor};
+//   }
+// `
+
+// const InputText = styled.div`
+//   color: ${({ theme }) => theme.secondary};
+//   margin-right: 8px;
+// `
+
+// const CreationBtn = styled.button`
+//   padding: 11px 24px;
+//   ${buttonStyles}
+
+//   &:disabled {
+//     background: ${({ theme }) => theme.inputColor};
+//     color: ${({ theme }) => theme.secondary};
+//   }
+// `
+
+// const StyledList = styled.div`
+//   display: flex;
+//   overflow-x: scroll;
+//   margin-right: 8px;
+
+//   &::-webkit-scrollbar {
+//     display: none;
+//   }
+// `
+
+// const StyledMember = styled.div`
+//   display: flex;
+//   align-items: center;
+//   padding: 4px 4px 4px 8px;
+//   background: ${({ theme }) => theme.tertiary};
+//   color: ${({ theme }) => theme.bodyBackgroundColor};
+//   border-radius: 8px;
+
+//   & + & {
+//     margin-left: 8px;
+//   }
+// `
+
+// const StyledName = styled.p`
+//   color: ${({ theme }) => theme.bodyBackgroundColor};
+
+//   ${textMediumStyles}
+// `
+
+// const CloseButton = styled.button`
+//   width: 20px;
+//   height: 20px;
+// `
+
+// const Contacts = styled.div`
+//   height: calc(100% - 44px);
+//   display: flex;
+//   flex-direction: column;
+//   flex: 1;
+//   overflow: auto;
+// `
+
+// const Contact = styled.div`
+//   display: flex;
+//   align-items: center;
+//   padding: 12px 12px 0 16px;
+//   border-radius: 8px;
+
+//   &:hover {
+//     background: ${({ theme }) => theme.inputColor};
+//   }
+// `
+
+// const ContactsHeading = styled.p`
+//   color: ${({ theme }) => theme.secondary};
+
+//   ${textMediumStyles}
+// `
+
+// const ContactsList = styled.div`
+//   display: flex;
+//   flex-direction: column;
+// `
+
+// const EmptyContacts = styled(Contacts)`
+//   justify-content: center;
+//   align-items: center;
+// `
+
+// const EmptyContactsHeading = styled(ContactsHeading)`
+//   max-width: 550px;
+//   margin-bottom: 24px;
+//   text-align: center;
+// `
+
+// const SearchMembers = styled.div`
+//   position: relative;
+//   flex: 1;
+// `
+
+// const LimitAlert = styled.p`
+//   text-transform: uppercase;
+//   margin-left: auto;
+//   color: ${({ theme }) => theme.redColor};
+//   white-space: nowrap;
+
+//   &.narrow {
+//     margin: 8px 0 0;
+//   }
+// `
diff --git a/packages/status-react/src/system/icon-button/icon-button.tsx b/packages/status-react/src/system/icon-button/icon-button.tsx
index cc7625b7..bb69c612 100644
--- a/packages/status-react/src/system/icon-button/icon-button.tsx
+++ b/packages/status-react/src/system/icon-button/icon-button.tsx
@@ -1,11 +1,13 @@
 import React, { forwardRef } from 'react'
 
 import { AccessibleIcon } from '@radix-ui/react-accessible-icon'
+import { Link } from 'react-router-dom'
 
 import { Base } from './styles'
 
 import type { Variants } from './styles'
 import type { Ref } from 'react'
+import type { LinkProps } from 'react-router-dom'
 
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>
 
@@ -17,6 +19,7 @@ interface Props {
   intent?: Variants['intent']
   color?: Variants['color']
   active?: boolean
+  to?: LinkProps['to']
 }
 
 const IconButton = (props: Props, ref: Ref<HTMLButtonElement>) => {
@@ -28,9 +31,25 @@ const IconButton = (props: Props, ref: Ref<HTMLButtonElement>) => {
     intent,
     color,
     active,
+    to,
     ...buttonProps
   } = props
 
+  if (to) {
+    return (
+      <Base
+        as={Link}
+        to={to}
+        aria-label={label}
+        intent={intent}
+        color={color}
+        active={active}
+      >
+        {children}
+      </Base>
+    )
+  }
+
   return (
     <Base
       {...buttonProps}
diff --git a/packages/status-react/src/types/config.tsx b/packages/status-react/src/types/config.tsx
index 3e4baa72..6ce28472 100644
--- a/packages/status-react/src/types/config.tsx
+++ b/packages/status-react/src/types/config.tsx
@@ -1,4 +1,5 @@
 import type { Theme } from './theme'
+import type { BrowserRouter, HashRouter, MemoryRouter } from 'react-router-dom'
 
 export type Environment = 'production' | 'test'
 
@@ -6,4 +7,5 @@ export interface Config {
   publicKey: string
   environment?: Environment
   theme?: Theme
+  router?: typeof BrowserRouter | typeof MemoryRouter | typeof HashRouter
 }
diff --git a/yarn.lock b/yarn.lock
index dd0ac471..ebbc328d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,13 +2,73 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@^7.0.0":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
   integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
   dependencies:
     "@babel/highlight" "^7.16.7"
 
+"@babel/generator@^7.17.3":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.7.tgz#8da2599beb4a86194a3b24df6c085931d9ee45ad"
+  integrity sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==
+  dependencies:
+    "@babel/types" "^7.17.0"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/helper-annotate-as-pure@^7.16.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
+  integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-environment-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-function-name@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz#f1ec51551fb1c8956bc8dd95f38523b6cf375f8f"
+  integrity sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-get-function-arity@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
+  integrity sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
+  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-validator-identifier@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
@@ -23,6 +83,11 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/parser@^7.16.7", "@babel/parser@^7.17.3":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.7.tgz#fc19b645a5456c8d6fdb6cecd3c66c0173902800"
+  integrity sha512-bm3AQf45vR4gKggRfvJdYJ0gFLoCbsPxiFLSH6hTVYABptNHY6l9NrhnucVjQ/X+SPtLANT9lc0fFhikj+VBRA==
+
 "@babel/runtime-corejs3@^7.10.2":
   version "7.17.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.17.2.tgz#fdca2cd05fba63388babe85d349b6801b008fd13"
@@ -38,13 +103,46 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.13.10":
+"@babel/runtime@^7.13.10", "@babel/runtime@^7.7.6":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.7.tgz#a5f3328dc41ff39d803f311cfe17703418cf9825"
   integrity sha512-L6rvG9GDxaLgFjg41K+5Yv9OMrU98sWe+Ykmc6FDJW/+vYZMhdOMKkISgzptMaERHvS2Y2lw9MDRm2gHhlQQoA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/template@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/traverse@^7.4.5":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.3.tgz#0ae0f15b27d9a92ba1f2263358ea7c4e7db47b57"
+  integrity sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.3"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.17.3"
+    "@babel/types" "^7.17.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.16.7", "@babel/types@^7.17.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
+  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@chainsafe/libp2p-noise@^5.0.0":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@chainsafe/libp2p-noise/-/libp2p-noise-5.0.2.tgz#1fe7ae2cf453a9fbb2bd982b6941d6f866ed025f"
@@ -77,6 +175,28 @@
   dependencies:
     "@cspotcode/source-map-consumer" "0.8.0"
 
+"@emotion/is-prop-valid@^0.8.8":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
 "@eslint/eslintrc@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.1.0.tgz#583d12dbec5d4f22f333f9669f7d0b7c7815b4d3"
@@ -1004,6 +1124,27 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "^2.4.0"
 
+"@radix-ui/react-popover@^0.1.6":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-0.1.6.tgz#788e969239d9c55239678e615ab591b6b7ba5cdc"
+  integrity sha512-zQzgUqW4RQDb0ItAL1xNW4K4olUrkfV3jeEPs9rG+nsDQurO+W9TT+YZ9H1mmgAJqlthyv1sBRZGdBm4YjtD6Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.1.0"
+    "@radix-ui/react-compose-refs" "0.1.0"
+    "@radix-ui/react-context" "0.1.1"
+    "@radix-ui/react-dismissable-layer" "0.1.5"
+    "@radix-ui/react-focus-guards" "0.1.0"
+    "@radix-ui/react-focus-scope" "0.1.4"
+    "@radix-ui/react-id" "0.1.5"
+    "@radix-ui/react-popper" "0.1.4"
+    "@radix-ui/react-portal" "0.1.4"
+    "@radix-ui/react-presence" "0.1.2"
+    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-use-controllable-state" "0.1.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "^2.4.0"
+
 "@radix-ui/react-popper@0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-0.1.4.tgz#dfc055dcd7dfae6a2eff7a70d333141d15a5d029"
@@ -1060,6 +1201,14 @@
     "@radix-ui/react-use-callback-ref" "0.1.0"
     "@radix-ui/react-use-controllable-state" "0.1.0"
 
+"@radix-ui/react-separator@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-0.1.4.tgz#383ad0f82b364d9982a978d752084af3598e4090"
+  integrity sha512-ct2qE072ydvMyFiPwgO8xGE4iLGR9BsSk2tIan23TYSiNTeQ89anzkuax5vNGjey0el2vnwUcReFS0Gy7Lk2VQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "0.1.4"
+
 "@radix-ui/react-slot@0.1.2":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.1.2.tgz#e6f7ad9caa8ce81cc8d532c854c56f9b8b6307c8"
@@ -1473,6 +1622,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@^17.0.13":
+  version "17.0.13"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.13.tgz#a3323b974ee4280070982b3112351bb1952a7809"
+  integrity sha512-wEP+B8hzvy6ORDv1QBhcQia4j6ea4SFIBttHYpXKPFZRviBvknq0FRh3VrIxeXUmsPkwuXVZrVGG7KUVONmXCQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^17.0.0", "@types/react@^17.0.16":
   version "17.0.39"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
@@ -1499,6 +1655,15 @@
   dependencies:
     "@types/node" "*"
 
+"@types/styled-components@5.1.24":
+  version "5.1.24"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.24.tgz#b52ae677f03ea8a6018aa34c6c96b7018b7a3571"
+  integrity sha512-mz0fzq2nez+Lq5IuYammYwWgyLUE6OMAJTQL9D8hFLP4Pkh7gVYJii/VQWxq8/TK34g/OrkehXaFNdcEKcItug==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    csstype "^3.0.2"
+
 "@types/styled-components@^5.1.12":
   version "5.1.23"
   resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.23.tgz#11e5740047f292b42a042c60c0ef16b58d5adef6"
@@ -1632,11 +1797,30 @@ acorn-jsx@^5.3.1:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
+acorn-node@^1.6.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
+  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
+  dependencies:
+    acorn "^7.0.0"
+    acorn-walk "^7.0.0"
+    xtend "^4.0.2"
+
+acorn-walk@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
+  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
+
 acorn-walk@^8.1.1:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
 
+acorn@^7.0.0:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
 acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.0:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
@@ -1724,6 +1908,11 @@ arg@^4.1.0:
   resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
   integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
 
+arg@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb"
+  integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==
+
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
@@ -1835,6 +2024,18 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
 
+autoprefixer@^10.4.2:
+  version "10.4.2"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.2.tgz#25e1df09a31a9fba5c40b578936b90d35c9d4d3b"
+  integrity sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==
+  dependencies:
+    browserslist "^4.19.1"
+    caniuse-lite "^1.0.30001297"
+    fraction.js "^4.1.2"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
 available-typed-arrays@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
@@ -1860,6 +2061,22 @@ axobject-query@^2.2.0:
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
+"babel-plugin-styled-components@>= 1.12.0":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.6.tgz#6f76c7f7224b7af7edc24a4910351948c691fc90"
+  integrity sha512-Sk+7o/oa2HfHv3Eh8sxoz75/fFvEdHsXV4grdeHufX0nauCmymlnN0rGhIvfpMQSJMvGutJ85gvCGea4iqmDpg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+    picomatch "^2.3.0"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -2013,6 +2230,17 @@ browserslist@^4.0.0, browserslist@^4.16.6, browserslist@^4.6.6:
     node-releases "^2.0.2"
     picocolors "^1.0.0"
 
+browserslist@^4.19.1:
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.0.tgz#35951e3541078c125d36df76056e94738a52ebe9"
+  integrity sha512-bnpOoa+DownbciXj0jVGENf8VYQnE2LNWomhYuCsMmmx9Jd9lwq0WXODuwpSsp8AVdKM2/HorrzxAfbKvWTByQ==
+  dependencies:
+    caniuse-lite "^1.0.30001313"
+    electron-to-chromium "^1.4.76"
+    escalade "^3.1.1"
+    node-releases "^2.0.2"
+    picocolors "^1.0.0"
+
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -2044,6 +2272,11 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
 camelcase@^5.0.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
@@ -2054,6 +2287,11 @@ camelcase@^6.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -2069,6 +2307,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001312:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz#e11eba4b87e24d22697dae05455d5aea28550d5f"
   integrity sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==
 
+caniuse-lite@^1.0.30001297, caniuse-lite@^1.0.30001313:
+  version "1.0.30001317"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001317.tgz#0548fb28fd5bc259a70b8c1ffdbe598037666a1b"
+  integrity sha512-xIZLh8gBm4dqNX0gkzrBeyI86J2eCjWzYAs40q88smG844YIrN4tVQl/RhquHvKEKImWWFIVh1Lxe5n1G/N+GQ==
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -2096,7 +2339,7 @@ chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0, chalk@^4.1.0:
+chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -2109,7 +2352,7 @@ check-error@^1.0.2:
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
   integrity sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=
 
-chokidar@3.5.3:
+chokidar@3.5.3, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -2212,7 +2455,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@~1.1.4:
+color-name@^1.1.4, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -2348,6 +2591,11 @@ crypto-browserify@^3.12.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
 css-declaration-sorter@^6.0.3:
   version "6.1.4"
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.1.4.tgz#b9bfb4ed9a41f8dcca9bf7184d849ea94a8294b4"
@@ -2366,6 +2614,15 @@ css-select@^4.1.3:
     domutils "^2.8.0"
     nth-check "^2.0.1"
 
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@^1.1.2, css-tree@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
@@ -2479,7 +2736,7 @@ datastore-core@^7.0.0:
     it-take "^1.0.1"
     uint8arrays "^3.0.0"
 
-debug@4.3.3, debug@^4.1.1, debug@^4.2.0, debug@^4.3.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3:
+debug@4.3.3, debug@^4.1.0, debug@^4.1.1, debug@^4.2.0, debug@^4.3.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
   integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
@@ -2536,6 +2793,11 @@ define-properties@^1.1.3:
   dependencies:
     object-keys "^1.0.12"
 
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -2564,6 +2826,20 @@ detect-node-es@^1.1.0:
   resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
   integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
 
+detective@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
+  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
+  dependencies:
+    acorn-node "^1.6.1"
+    defined "^1.0.0"
+    minimist "^1.1.1"
+
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
 diff@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
@@ -2590,6 +2866,11 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
 dns-over-http-resolver@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/dns-over-http-resolver/-/dns-over-http-resolver-1.2.3.tgz#194d5e140a42153f55bb79ac5a64dd2768c36af9"
@@ -2710,6 +2991,11 @@ electron-to-chromium@^1.4.71:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.71.tgz#17056914465da0890ce00351a3b946fd4cd51ff6"
   integrity sha512-Hk61vXXKRb2cd3znPE9F+2pLWdIOmP7GjiTj45y6L3W/lO+hSnUSUhq+6lEaERWBdZOHbk2s3YV5c9xVl3boVw==
 
+electron-to-chromium@^1.4.76:
+  version "1.4.84"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.84.tgz#2700befbcb49c42c4ee162e137ff392c07658249"
+  integrity sha512-b+DdcyOiZtLXHdgEG8lncYJdxbdJWJvclPNMg0eLUDcSOSO876WA/pYjdSblUTd7eJdIs4YdIxHWGazx7UPSJw==
+
 elliptic@^6.5.3, elliptic@^6.5.4:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -3176,7 +3462,7 @@ fast-fifo@^1.0.0:
   resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.1.0.tgz#17d1a3646880b9891dfa0c54e69c5fef33cad779"
   integrity sha512-Kl29QoNbNvn4nhDsLYjyIAaIqaJB6rBx5p3sL9VjaefJ+eMFBWVZiaoguaoZfzEKr5RhAti0UgM8703akGPJ6g==
 
-fast-glob@^3.2.9:
+fast-glob@^3.2.11, fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
   integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
@@ -3277,6 +3563,11 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+fraction.js@^4.1.2:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
+  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -3365,7 +3656,7 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.1:
+glob-parent@^6.0.1, glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
@@ -3384,6 +3675,11 @@ glob@7.2.0, glob@^7.1.2, glob@^7.1.3, glob@^7.1.7:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
 globals@^13.2.0, globals@^13.6.0, globals@^13.9.0:
   version "13.12.1"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.12.1.tgz#ec206be932e6c77236677127577aa8e50bf1c5cb"
@@ -3492,6 +3788,13 @@ hi-base32@^0.5.1:
   resolved "https://registry.yarnpkg.com/hi-base32/-/hi-base32-0.5.1.tgz#1279f2ddae2673219ea5870c2121d2a33132857e"
   integrity sha512-EmBBpvdYh/4XxsnUybsPag6VikPYnN30td+vQk+GI3qpahVEG9+gTkG0aXVxTjBqQ5T6ijbWIu77O+C5WFWsnA==
 
+history@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -3501,7 +3804,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
   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==
@@ -4112,6 +4415,11 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
 json-parse-better-errors@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@@ -4361,7 +4669,7 @@ libp2p@^0.36.2:
     wherearewe "^1.0.0"
     xsalsa20 "^1.1.0"
 
-lilconfig@2.0.4, lilconfig@^2.0.3:
+lilconfig@2.0.4, lilconfig@^2.0.3, lilconfig@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.4.tgz#f4507d043d7058b380b6a8f5cb7bcd4b34cee082"
   integrity sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==
@@ -4463,7 +4771,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.15, lodash@^4.17.4:
+lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.4:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -4622,7 +4930,7 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.2.0, minimist@^1.2.5:
+minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
@@ -4769,7 +5077,7 @@ nanoid@3.2.0:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
   integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
 
-nanoid@^3.0.2, nanoid@^3.1.20, nanoid@^3.2.0:
+nanoid@^3.0.2, nanoid@^3.1.20, nanoid@^3.2.0, nanoid@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
   integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
@@ -4851,6 +5159,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
 normalize-url@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
@@ -4912,6 +5225,11 @@ object-hash@^1.3.1:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
   integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
 
+object-hash@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
+  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
+
 object-inspect@^1.11.0, object-inspect@^1.12.0, object-inspect@^1.9.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
@@ -5285,7 +5603,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -5345,6 +5663,21 @@ postcss-discard-overridden@^5.0.4:
   resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-5.0.4.tgz#cc999d6caf18ea16eff8b2b58f48ec3ddee35c9c"
   integrity sha512-3j9QH0Qh1KkdxwiZOW82cId7zdwXVQv/gRXYDnwx5pBtR1sTkU4cXRK9lp5dSdiM0r0OICO/L8J6sV1/7m0kHg==
 
+postcss-js@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00"
+  integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-load-config@^3.1.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.3.tgz#21935b2c43b9a86e6581a576ca7ee1bde2bd1d23"
+  integrity sha512-5EYgaM9auHGtO//ljHH+v/aC/TQ5LHXtL7bQajNAUBKUVKiYE8rYpFms7+V26D9FncaGe2zwCoPQsFKb5zF/Hw==
+  dependencies:
+    lilconfig "^2.0.4"
+    yaml "^1.10.2"
+
 postcss-merge-longhand@^5.0.6:
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-5.0.6.tgz#090e60d5d3b3caad899f8774f8dccb33217d2166"
@@ -5395,6 +5728,13 @@ postcss-minify-selectors@^5.1.3:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
+postcss-nested@5.0.6:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc"
+  integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==
+  dependencies:
+    postcss-selector-parser "^6.0.6"
+
 postcss-normalize-charset@^5.0.3:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-5.0.3.tgz#719fb9f9ca9835fcbd4fed8d6e0d72a79e7b5472"
@@ -5481,7 +5821,7 @@ postcss-reduce-transforms@^5.0.4:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
+postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
   version "6.0.9"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f"
   integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==
@@ -5504,7 +5844,7 @@ postcss-unique-selectors@^5.0.4:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
-postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.2, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -5518,6 +5858,15 @@ postcss@^8.4.5:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.6, postcss@^8.4.7:
+  version "8.4.8"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.8.tgz#dad963a76e82c081a0657d3a2f3602ce10c2e032"
+  integrity sha512-2tXEqGxrjvAO6U+CJzDL2Fk2kPHTv1jQsYkSoMeOis2SsYaXRO2COxTdQp99cYvif9JTXaAk9lYGc3VhJt7JPQ==
+  dependencies:
+    nanoid "^3.3.1"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 posthtml-parser@^0.10.0, posthtml-parser@^0.10.1:
   version "0.10.2"
   resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.10.2.tgz#df364d7b179f2a6bf0466b56be7b98fd4e97c573"
@@ -5652,6 +6001,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+quick-lru@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
+  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -5676,6 +6030,11 @@ react-dom@^17.0.0, react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-frame-component@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-5.2.1.tgz#6bd5ec73ef7d720f57ee8f259546ed926a941267"
+  integrity sha512-nrSh1OZuHlX69eWqJPiUkPT9S6/wxc4PpJV+vOQ4pHQQ8XmIsIT+utWT+nX32ZfANHZuKONA7JsWMUGT36CqaQ==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -5717,6 +6076,21 @@ react-remove-scroll@^2.4.0:
     use-callback-ref "^1.2.3"
     use-sidecar "^1.0.1"
 
+react-router-dom@6:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.2.2.tgz#f1a2c88365593c76b9612ae80154a13fcb72e442"
+  integrity sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==
+  dependencies:
+    history "^5.2.0"
+    react-router "6.2.2"
+
+react-router@6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.2.2.tgz#495e683a0c04461eeb3d705fe445d6cf42f0c249"
+  integrity sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==
+  dependencies:
+    history "^5.2.0"
+
 react-style-singleton@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"
@@ -5825,7 +6199,7 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.10.0, resolve@^1.10.1, resolve@^1.20.0:
+resolve@^1.10.0, resolve@^1.10.1, resolve@^1.20.0, resolve@^1.22.0:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
@@ -5980,6 +6354,11 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -6067,6 +6446,11 @@ source-map-support@~0.5.20:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
+source-map@^0.5.0:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+
 source-map@^0.6.0, source-map@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@@ -6274,6 +6658,22 @@ strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+styled-components@5.3.3, styled-components@^5.3.1:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.3.tgz#312a3d9a549f4708f0fb0edc829eb34bde032743"
+  integrity sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^0.8.8"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 stylehacks@^5.0.3:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.0.3.tgz#2ef3de567bfa2be716d29a93bf3d208c133e8d04"
@@ -6289,7 +6689,7 @@ supports-color@8.1.1:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -6326,6 +6726,33 @@ svgo@^2.4.0, svgo@^2.7.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+tailwindcss@^3.0.23:
+  version "3.0.23"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.23.tgz#c620521d53a289650872a66adfcb4129d2200d10"
+  integrity sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==
+  dependencies:
+    arg "^5.0.1"
+    chalk "^4.1.2"
+    chokidar "^3.5.3"
+    color-name "^1.1.4"
+    cosmiconfig "^7.0.1"
+    detective "^5.2.0"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.2.11"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    normalize-path "^3.0.0"
+    object-hash "^2.2.0"
+    postcss "^8.4.6"
+    postcss-js "^4.0.0"
+    postcss-load-config "^3.1.0"
+    postcss-nested "5.0.6"
+    postcss-selector-parser "^6.0.9"
+    postcss-value-parser "^4.2.0"
+    quick-lru "^5.1.1"
+    resolve "^1.22.0"
+
 terser@^5.2.0:
   version "5.11.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.11.0.tgz#2da5506c02e12cd8799947f30ce9c5b760be000f"
@@ -6368,6 +6795,11 @@ tinykeys@^1.4.0:
   resolved "https://registry.yarnpkg.com/tinykeys/-/tinykeys-1.4.0.tgz#c2986cd0184c86e943a6b17acc0352e42b542dff"
   integrity sha512-ysnVd2E4nWbNXIbHaUidcKGLTmNimqP0hdpsD0Ph5hPJ84ntCF6PHj+Jg3im9nZt9/hNsBg/E6m1psHc2KaPnQ==
 
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -6503,6 +6935,11 @@ typescript@^4.0.0, typescript@^4.5.5:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
   integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
 
+typescript@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.2.tgz#fe12d2727b708f4eef40f51598b3398baa9611d4"
+  integrity sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==
+
 uint8arrays@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/uint8arrays/-/uint8arrays-3.0.0.tgz#260869efb8422418b6f04e3fac73a3908175c63b"
@@ -6747,6 +7184,11 @@ xsalsa20@^1.1.0:
   resolved "https://registry.yarnpkg.com/xsalsa20/-/xsalsa20-1.2.0.tgz#e5a05cb26f8cef723f94a559102ed50c1b44c25c"
   integrity sha512-FIr/DEeoHfj7ftfylnoFt3rAIRoWXpx2AoDfrT2qD2wtp7Dp+COajvs/Icb7uHqRW9m60f5iXZwdsJJO3kvb7w==
 
+xtend@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
 xxhash-wasm@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/xxhash-wasm/-/xxhash-wasm-0.4.2.tgz#752398c131a4dd407b5132ba62ad372029be6f79"