feat: Use emotion for css

.gitignore

@@ -6,6 +6,7 @@
 .idea
 *.log
 tmp/
+lib/
 
 *.tern-port
 node_modules/

package.json

@@ -15,15 +15,18 @@
     "build": "./node_modules/.bin/webpack --config webpack.config.js"
   },
   "dependencies": {
+    "@emotion/core": "^10.0.35",
     "classnames": "^2.2.6",
     "debounce": "^1.2.0",
+    "emotion": "^10.0.27",
     "ramda": "^0.27.1",
     "react": "^16.13.1",
     "react-click-outside-hook": "^1.1.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.1",
     "react-toastify": "^6.0.8",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "styled-components": "^5.2.0"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.10",
@@ -33,6 +36,7 @@
     "@types/react-click-outside-hook": "^1.0.0",
     "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.9",
+    "@types/styled-components": "^5.1.3",
     "css-loader": "^4.2.2",
     "file-loader": "^6.1.0",
     "html-webpack-plugin": "^4.4.1",

src/assets/style-vars.ts

@@ -0,0 +1,17 @@
+export const MainBgColor = 'rgb(243, 223, 193)';
+export const MainBgColorDark = 'rgb(144, 87, 18)';
+export const MainTextColor = 'rgb(26, 28, 26)';
+export const MainErrorColor = 'rgb(232, 91, 30)';
+export const MainSuccessColor = 'rgb(123, 189, 70)';
+
+export const colors = {
+  MainBgColor,
+  MainBgColorDark,
+  MainTextColor,
+  MainErrorColor,
+  MainSuccessColor,
+};
+
+export default {
+  colors,
+};

src/components/App.tsx

@@ -1,19 +1,45 @@
 import React, { useMemo } from 'react';
+import { Global, css } from '@emotion/core';
+import styled from 'styled-components';
+
+import { colors } from '../assets/style-vars'
 
 import Playback from './Playback';
 import { Renderer } from './Renderer';
 
-import createEngine from '@/engine';
-import { Engine } from '@/engine/Engine';
+import createEngine from '../engine';
+import { Engine } from '../engine/Engine';
 import { Provider } from 'react-redux';
 import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css'
-import { EngineConfig } from '@/engine/types';
+import { EngineConfig } from '../engine/types';
 
 type AppProps<GS = object, MT = undefined, ST extends string = string> = {
   config: EngineConfig<GS, MT, ST>
 }
 
+const StyledToastContainer = styled(ToastContainer)`
+  .Toastify__toast {
+      background: ${colors.MainBgColor};
+      color: ${colors.MainTextColor};
+  }
+
+  .Toastify__progress-bar--default {
+      background: ${colors.MainBgColorDark};
+  }
+
+  .Toastify__progress-bar--success {
+      background: ${colors.MainSuccessColor};
+  }
+
+  .Toastify__progress-bar--error {
+      background: ${colors.MainErrorColor};
+  }
+
+  .Toastify__close-button {
+      color: ${colors.MainTextColor};
+  }
+`;
+
 export default <GS, MT, ST extends string, >({ config }: AppProps<GS, MT, ST>) => {
   const engine: Engine<GS, MT, ST> = useMemo(
     () => createEngine<GS, MT, ST>(config, config.reducer),
@@ -22,6 +48,20 @@ export default <GS, MT, ST extends string, >({ config }: AppProps<GS, MT, ST>) =
 
   return (
     <>
+      <Global styles={css`
+        @font-face {
+            font-family: 'Antic Slab Regular';
+            src:  url('./assets/fonts/AnticSlab-Regular.woff2') format('woff2');
+        }
+
+        body {
+            font-family: "Antic Slab Regular";
+            font-size: 1.5rem;
+            color: ${colors.MainTextColor};
+            background-color: ${colors.MainBgColor};
+            font-weight: 400;
+        }
+      `} />
       <Provider store={engine.store}>
         <Playback engine={engine} engineConfig={config}>
           {(_, config, backlog, location, time, next) => {
@@ -29,7 +69,7 @@ export default <GS, MT, ST extends string, >({ config }: AppProps<GS, MT, ST>) =
           }}
         </Playback>
       </Provider>
-      <ToastContainer />
+      <StyledToastContainer />
     </>
   );
 }

src/components/Dropdown.module.css

@@ -1,24 +0,0 @@
-.dropdownContainer {
-    position: relative;
-}
-.dropdownContent {
-    display: flex;
-    top: calc(100% + 5px);
-    position: absolute;
-    border: 2px solid var(--MainBgColorDark);
-    background-color: var(--MainBgColor);
-    box-sizing: border-box;
-    transition: all 0.3s ease-in;
-    padding: 5px;
-    opacity: 0;
-    z-index: 1;
-}
-
-.activateContainer {
-    cursor: pointer;
-}
-
-.dropdownContentOpen {
-    opacity: 1;
-    transition: all 0.3s ease-in;
-}

src/components/Dropdown.styles.ts

@@ -0,0 +1,28 @@
+import { css, cx } from 'emotion';
+import { colors } from '../assets/style-vars';
+
+export const dropdownContainer = css`
+    position: relative;
+`;
+
+export const dropdownContent = css`
+    display: flex;
+    top: calc(100% + 5px);
+    position: absolute;
+    border: 2px solid ${colors.MainBgColorDark};
+    background-color: ${colors.MainBgColor};
+    box-sizing: border-box;
+    transition: all 0.3s ease-in;
+    padding: 5px;
+    opacity: 0;
+    z-index: 1;
+`
+
+export const activateContainer = css`
+    cursor: pointer;
+`;
+
+export const dropdownContentOpen = css`
+    opacity: 1;
+    transition: all 0.3s ease-in;
+`;

src/components/Dropdown.tsx

@@ -1,7 +1,7 @@
-import React, { FC, useState, useEffect } from 'react';
+import React, { FC, useState } from 'react';
 
 import cn from 'classnames';
-import styles from './Dropdown.module.css';
+import * as styles from './Dropdown.styles';
 import { useClickOutside } from 'react-click-outside-hook';
 
 type ActivateFn = (toggleDropdown: () => void, label?: string, isOpen?: boolean) => React.ReactNode;

src/components/Menu.module.css

@@ -1,60 +0,0 @@
-.menuContainer {
-}
-
-.menuItem {
-    font-weight: bold;
-    position: relative;
-    padding: 0.75em 15px 0.80em 15px;
-    border: none;
-    display: block;
-    width: 100%;
-    text-align: left;
-    font-family: inherit;
-    background-color: transparent;
-}
-
-.menuItem.start {
-    font-size: 1.5em;
-}
-
-.menuItem.load {
-    font-size: 1.17em;
-}
-
-.menuItem::after {
-    content: '';
-    height: 100%;
-    position: absolute;
-    background-color: var(--MainBgColorDark);
-    width: 0;
-    z-index: -1;
-    transition: width 0.1s ease-out;
-    top: 0;
-    left: 0;
-}
-
-.menuItem:hover {
-    color: var(--MainBgColor);
-    cursor: pointer;
-}
-
-.menuItem:hover::after {
-    width: 100%;
-    transition: width 0.3s ease-in;
-}
-
-.menuTitle {
-    padding: 15px;
-    border-bottom: 2px dashed var(--MainBgColorDark);
-}
-
-.menuTitle > h1 {
-    margin: 0;
-
-}
-
-.menuTitle > h1 > small {
-    font-size: 1.4rem;
-    display: inline-block;
-}
-

src/components/Menu.styles.ts

@@ -0,0 +1,58 @@
+import { css } from 'emotion';
+import { colors } from '../assets/style-vars';
+
+const menuItem = css`
+    font-weight: bold;
+    position: relative;
+    padding: 0.75em 15px 0.80em 15px;
+    border: none;
+    display: block;
+    width: 100%;
+    text-align: left;
+    font-family: inherit;
+    background-color: transparent;
+    &.start {
+        font-size: 1.5em;
+    }
+    &.load {
+        font-size: 1.17em;
+    }
+    &:hover {
+        color: ${colors.MainBgColor};
+        cursor: pointer;
+    }
+    &::after {
+        content: '';
+        height: 100%;
+        position: absolute;
+        background-color: ${colors.MainBgColorDark};
+        width: 0;
+        z-index: -1;
+        transition: width 0.1s ease-out;
+        top: 0;
+        left: 0;
+    }
+    &:hover::after {
+        width: 100%;
+        transition: width 0.3s ease-in;
+    }
+`;
+
+const menuTitle = css`
+    padding: 15px;
+    border-bottom: 2px dashed ${colors.MainBgColorDark};
+    & > h1 {
+        margin: 0;
+    }
+    & > h1 > small {
+        font-size: 1.4rem;
+        display: inline-block;
+    }
+`;
+
+export default {
+    menuItem,
+    menuTitle,
+    start: 'start',
+    load: 'load',
+}

src/components/Menu.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 
 import cn from 'classnames';
-import styles from './Menu.module.css';
+import styles from './Menu.styles';
 
 type Props = {
   startGame: () => void;
@@ -9,7 +9,7 @@ type Props = {
 }
 
 const Menu: FC<Props> = ({ startGame, loadGame }) => (
-  <div className={styles.menuContainer}>
+  <>
     <div className={styles.menuTitle}>
       <h1>
         Discoteque Demo <br />
@@ -18,7 +18,7 @@ const Menu: FC<Props> = ({ startGame, loadGame }) => (
     </div>
     <button className={cn(styles.menuItem, styles.start)} onClick={startGame}>Start Game</button>
     <button className={cn(styles.menuItem, styles.load)} onClick={loadGame}>Load Game</button>
-  </div>
+  </>
 );
 
 export default Menu;

src/components/Playback.module.css

@@ -1,22 +0,0 @@
-.playbackContainer {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-.playbackRestart {
-    color: var(--MainBgColorDark);
-    cursor: pointer;
-}
-.playbackRestart:hover {
-    text-decoration: underline;
-}
-
-@media(max-width: 799px) {
-    .playbackRestart {
-        margin-bottom: 50px;
-    }
-}

src/components/Playback.styles.ts

@@ -0,0 +1,27 @@
+import { css } from 'emotion';
+import { colors } from '../assets/style-vars';
+
+const playbackContainer = css`
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+`;
+
+const playbackRestart = css`
+    color: ${colors.MainBgColorDark};
+    cursor: pointer;
+    @media (min-width: 799px) {
+        margin-bottom: 50px;
+    }
+    &:hover {
+        text-decoration: underline;
+    }
+`;
+
+export default {
+    playbackContainer,
+    playbackRestart,
+}

src/components/Playback.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import * as R from 'ramda';
 
-import { Engine } from '@/engine/Engine';
+import { Engine } from '../engine/Engine';
 
-import styles from '@/components/Playback.module.css';
-import { ILine, ILineOption, Chrono, ILocation, EngineConfig } from '@/engine/types';
+import styles from '../components/Playback.styles';
+import { ILine, ILineOption, Chrono, ILocation, EngineConfig } from '../engine/types';
 import { useSelector, useDispatch } from 'react-redux';
-import { setState, stateSelector } from '@/engine/lib/store';
+import { setState, stateSelector } from '../engine/lib/store';
 
 type PlaybackRenderFn<GS = any, MT = undefined, ST extends string = string> = (
   engine: Engine<GS, MT, ST>,

src/components/Renderer/Image.module.css → src/components/Renderer/Image.styles.ts

@@ -1,36 +1,34 @@
-.imageContainer {
+import { css, cx } from 'emotion';
+
+export const imageContainer = css`
     height: 10rem;
     position: absolute;
     box-sizing: border-box;
     border-top-left-radius: 6px;
     border-bottom-left-radius: 6px;
-}
+    @media(max-width: 1099px) {
+        display: none;
+    }
+    & > div {
+        width: 100%;
+        height: 100%;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+    }
+`;
 
-.imageContainerHidden {
+export const imageContainerHidden = css`
     border: 0;
     transition: all 0.2s ease-in;
     width: 0;
     left: -4px;
-}
+`;
 
-.imageContainerVisible {
+export const imageContainerVisible = css`
     transition: all 0.2s ease-out;
     border: 4px solid black;
     width: 8rem;
     top: 1rem;
     left: -8rem;
-}
-
-.imageContainer > div {
-    width: 100%;
-    height: 100%;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-@media(max-width: 1099px) {
-    .imageContainer {
-        display: none;
-    }
-}
+`;

src/components/Renderer/Image.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import styles from './Image.module.css';
+import * as styles from './Image.styles';
 
 import cn from 'classnames';
 

src/components/Renderer/index.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import * as R from 'ramda';
 import { useSelector, useDispatch } from 'react-redux';
 
-import styles from './style.module.css';
-import { stateSelector as engineStateSelector, gameStateSelector, setState, initState, resetState } from '@/engine/lib/store';
-import { IActor, ILine, ILineOption, ILocation, EngineState, Chrono, EngineConfig } from '@/engine/types';
+import * as styles from './styles';
+import { stateSelector as engineStateSelector, gameStateSelector, setState, initState, resetState } from '../../engine/lib/store';
+import { IActor, ILine, ILineOption, ILocation, EngineState, Chrono, EngineConfig } from '../../engine/types';
 import { toast } from 'react-toastify';
-import SkillTree from '@/components/SkillTree';
+import SkillTree from '../../components/SkillTree';
 
 import Image from './Image';
 import Dropdown from '../Dropdown';

src/components/Renderer/style.module.css

@@ -1,265 +0,0 @@
-.rendererContainer {
-    width: 100%;
-    max-width: 800px;
-    max-height: 600px;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    border-radius: 6px;
-    position: relative;
-    border: 4px solid var(--MainTextColor);
-    box-sizing: border-box;
-}
-
-.textContainer {
-    display: flex;
-    height: 100%;
-    overflow-y: auto;
-}
-
-.textList {
-    list-style: none;
-    margin: 0;
-    padding-left: 0;
-    margin: 15px;
-}
-
-.textList > li::before {
-    content: '>';
-    display: inline-block;
-    width: 40px;
-    text-align: center;
-}
-
-.textList > li {
-    position: relative;
-}
-
-.textList > li::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    height: 100%;
-    width: 100%;
-    background-color: var(--MainBgColor);
-    animation: lineSlide 0.6s normal forwards linear;
-    animation-iteration-count: 1;
-}
-
-@keyframes lineSlide {
-    from {
-        width: 100%;
-    }
-    to {
-        width: 0;
-    }
-}
-
-@keyframes lineSlideSuccess {
-    from {
-        width: 100%;
-        color: initial;
-    }
-    50% {
-        color: var(--MainSuccessColor);
-    }
-    to {
-        width: 0;
-        color: initial;
-    }
-}
-
-@keyframes lineSlideFail {
-    from {
-        width: 100%;
-        color: initial;
-    }
-    50% {
-        color: var(--MainFailColor);
-    }
-    to {
-        width: 0;
-        color: initial;
-    }
-}
-
-.textList > li:last-of-type {
-    margin-bottom: 15px;
-}
-
-.optionsContainer {
-    display: flex;
-    height: 200px;
-    overflow-y: auto;
-    align-items: center;
-    border-top: 2px dashed var(--MainBgColorDark);
-    padding: 0;
-}
-
-.optionsList {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-}
-
-.optionsList > div {
-    width: 100%;
-    cursor: pointer;
-    position: relative;
-    transition: color 0.4s linear;
-    box-sizing: border-box;
-    border-bottom: 2px solid var(--MainBgColorDark);
-    padding: 5px 15px 5px 15px;
-}
-
-.optionsList > div:last-of-type {
-    border-bottom: 0;
-}
-
-.optionsList > div::before {
-    content: '';
-    background-color: var(--MainBgColorDark);
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: inline-block;
-    z-index: -1;
-    width: 0;
-    height: 100%;
-    transition: width 0.4s linear;
-}
-
-.optionsList > div:hover {
-    color: var(--MainBgColor);
-}
-
-.optionsList > div:hover::before {
-    width: 100%;
-}
-
-.optionsNext {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    color: var(--MainBgColorDark);
-    font-weight: bold;
-    letter-spacing: 10px;
-    text-transform: uppercase;
-    font-size: 2rem;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-    transition: border 0.3s ease-in;
-    position: relative;
-    overflow: hidden;
-    text-align: center;
-}
-
-.optionsNext:after {
-  content: "";
-  background: var(--MainBgColorDark);
-  display: block;
-  position: absolute;
-  padding-top: 300%;
-  padding-left: 350%;
-  margin-left: -20px!important;
-  margin-top: -120%;
-  opacity: 0;
-  transition: all 1s;
-}
-
-.optionsNext:focus {
-    outline: none;
-}
-
-.optionsNext:active:after {
-  padding: 0;
-  margin: 0;
-  opacity: 1;
-  transition: 0s
-}
-
-.toolbarContainer {
-    width: 100%;
-    border-bottom: 2px dashed var(--MainBgColorDark);
-    padding: 15px;
-    position: relative;
-    box-sizing: border-box;
-    justify-content: space-between;
-    display: flex;
-    min-height: 30px;
-}
-
-.toolbarTools {
-    align-self: flex-start;
-    border-right: 1px solid var(--MainBgColorDark);
-    margin-right: 5px;
-    padding-right: 2px;
-    height: 100%;
-    display: inline-flex;
-    align-items: center;
-}
-
-.toolbarTools > .toolbarButtons {
-    display: flex;
-    flex-direction: column;
-}
-
-.toolbarButtons > .toolbarSpacer {
-    display: block;
-    height: 35px;
-    background-color: var(--MainBgColorDark);
-    border: 2px dashed var(--MainBgColorDark);
-    box-sizing: border-box;
-    magrin: 10px 0 10px 0;
-}
-
-.toolbarStatus {
-    align-self: flex-end;
-    text-align: left;
-    border-right: 1px solid var(--MainBgColorDark);
-    margin-right: 5px;
-    padding-right: 2px;
-    height: 100%;
-    display: inline-flex;
-    align-items: center;
-    flex: 2;
-}
-
-.toolbarTime {
-    text-align: right;
-    height: 100%;
-    display: inline-flex;
-    align-items: center;
-}
-
-.toolbarButtons > span {
-    display: inline-flex;
-    width: 100%;
-    transition: all 0.2s linear;
-    cursor: pointer;
-    border-bottom: 1px solid var(--MainBgColorDark);
-}
-.toolbarButtons > span:last-of-type {
-    border-bottom: 0;
-}
-.toolbarButtons > span:hover {
-    background-color: var(--MainBgColorDark);
-    color: var(--MainBgColor);
-}
-
-
-@media(max-width: 799px) {
-    .rendererContainer {
-        max-height: unset;
-        border-radius: 0;
-    }
-    .optionsList > div {
-        padding-top: 15px;
-        padding-bottom: 15px;
-    }
-}

src/components/Renderer/styles.ts

@@ -0,0 +1,224 @@
+import { css, keyframes } from 'emotion';
+import { colors } from '../../assets/style-vars';
+
+export const rendererContainer = css`
+    width: 100%;
+    max-width: 800px;
+    max-height: 600px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border-radius: 6px;
+    position: relative;
+    border: 4px solid ${colors.MainTextColor};
+    box-sizing: border-box;
+    @media(max-width: 799px) {
+        max-height: unset;
+        border-radius: 0;
+    }
+`;
+
+export const textContainer = css`
+    display: flex;
+    height: 100%;
+    overflow-y: auto;
+`;
+
+const lineSlide = keyframes`
+    from {
+        width: 100%;
+    }
+    to {
+        width: 0;
+    }
+`;
+
+export const textList = css`
+    list-style: none;
+    margin: 0;
+    padding-left: 0;
+    margin: 15px;
+    & > li {
+        position: relative;
+        &::before {
+            content: '>';
+            display: inline-block;
+            width: 40px;
+            text-align: center;
+        }
+        &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            height: 100%;
+            width: 100%;
+            background-color: ${colors.MainBgColor};
+            animation: ${lineSlide} 0.6s normal forwards linear;
+            animation-iteration-count: 1;
+        }
+        &:last-of-type {
+            margin-bottom: 15px;
+        }
+    }
+`
+
+export const optionsContainer = css`
+    display: flex;
+    height: 200px;
+    overflow-y: auto;
+    align-items: center;
+    border-top: 2px dashed ${colors.MainBgColorDark};
+    padding: 0;
+`
+
+export const optionsList = css`
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    & > div {
+        width: 100%;
+        cursor: pointer;
+        position: relative;
+        transition: color 0.4s linear;
+        box-sizing: border-box;
+        border-bottom: 2px solid ${colors.MainBgColorDark};
+        padding: 5px 15px 5px 15px;
+        @media(max-width: 799px) {
+            padding-top: 15px;
+            padding-bottom: 15px;
+        }
+        &:last-of-type {
+            border-bottom: 0;
+        }
+        &:hover {
+            color: ${colors.MainBgColor};
+        }
+        &::before {
+            content: '';
+            background-color: ${colors.MainBgColorDark};
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: inline-block;
+            z-index: -1;
+            width: 0;
+            height: 100%;
+            transition: width 0.4s linear;
+        }
+        &:hover::before {
+            width: 100%;
+        }
+    }
+`;
+
+export const optionsNext = css`
+    height: 100%;
+    width: 100%;
+    display: flex;
+    color: ${colors.MainBgColorDark};
+    font-weight: bold;
+    letter-spacing: 10px;
+    text-transform: uppercase;
+    font-size: 2rem;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    transition: border 0.3s ease-in;
+    position: relative;
+    overflow: hidden;
+    text-align: center;
+    &::after {
+        content: "";
+        background: ${colors.MainBgColorDark};
+        display: block;
+        position: absolute;
+        padding-top: 300%;
+        padding-left: 350%;
+        margin-left: -20px!important;
+        margin-top: -120%;
+        opacity: 0;
+        transition: all 1s;
+    }
+    &:focus {
+        outline: none;
+    }
+    &:active::after {
+        padding: 0;
+        margin: 0;
+        opacity: 1;
+        transition: 0s
+    }
+`;
+
+export const toolbarContainer = css`
+    width: 100%;
+    border-bottom: 2px dashed ${colors.MainBgColorDark};
+    padding: 15px;
+    position: relative;
+    box-sizing: border-box;
+    justify-content: space-between;
+    display: flex;
+    min-height: 30px;
+`;
+
+export const toolbarTools = css`
+    align-self: flex-start;
+    border-right: 1px solid ${colors.MainBgColorDark};
+    margin-right: 5px;
+    padding-right: 2px;
+    height: 100%;
+    display: inline-flex;
+    align-items: center;
+    & > .toolbarButtons {
+        display: flex;
+        flex-direction: column;
+        & > .toolbarSpacer {
+            display: block;
+            height: 35px;
+            background-color: ${colors.MainBgColorDark};
+            border: 2px dashed ${colors.MainBgColorDark};
+            box-sizing: border-box;
+            magrin: 10px 0 10px 0;
+        }
+        & > span {
+            display: inline-flex;
+            width: 100%;
+            transition: all 0.2s linear;
+            cursor: pointer;
+            border-bottom: 1px solid ${colors.MainBgColorDark};
+            &:last-of-type {
+                border-bottom: 0;
+            }
+            &:hover {
+                background-color: ${colors.MainBgColorDark};
+                color: ${colors.MainBgColor};
+            }
+        }
+    }
+`;
+
+export const toolbarButtons = 'toolbarButtons';
+export const toolbarSpacer = 'toolbarSpacer';
+
+export const toolbarStatus = css`
+    align-self: flex-end;
+    text-align: left;
+    border-right: 1px solid ${colors.MainBgColorDark};
+    margin-right: 5px;
+    padding-right: 2px;
+    height: 100%;
+    display: inline-flex;
+    align-items: center;
+    flex: 2;
+`;
+
+export const toolbarTime = css`
+    text-align: right;
+    height: 100%;
+    display: inline-flex;
+    align-items: center;
+`;

src/components/SkillTree.module.css

@@ -1,162 +0,0 @@
-.skillList {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.skillTree {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.skillItem {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    font-size: 2.5rem;
-    padding: 10px 15px 10px 15px;
-    border-bottom: 1px solid black;
-    margin-bottom: 10px;
-    box-sizing: border-box;
-    flex-direction: column;
-}
-
-.skillDesc {
-    box-sizing: border-box;
-    font-size: 1.4rem;
-    transition: all 0.4s linear;
-    padding: 10px 0 0 0;
-}
-
-.skillDescClosed {
-    height: 0;
-    opacity: 0;
-    transition: all 0.4s linear;
-}
-
-.skillDescOpen {
-    height: 100%;
-    opacity: 1;
-    transition: all 0.4s linear;
-}
-
-.skillItem:last-of-type {
-    margin-bottom: 0;
-    border-bottom: 0;
-}
-
-.skillRow {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.skillButton {
-    font-size: 2.5rem;
-    width: 3.5rem;
-    background: transparent;
-    border: 1px solid black;
-    border-radius: 6px;
-    cursor: pointer;
-    color: var(--MainBgColorDark);
-    transition: all 0.3s ease-in;
-}
-
-.skillButton:hover {
-    background-color: var(--MainBgColorDark);
-    color: var(--MainBgColor);
-    transition: all 0.3s ease-out;
-}
-
-.skillButton.disabled {
-    cursor: default;
-    color: black;
-    border: none;
-    opacity: 0;
-}
-
-.skillButton:focus {
-    outline: none;
-}
-
-.skillValue {
-    margin-left: 10px;
-    margin-right: 10px;
-    width: 2rem;
-    text-align: center;
-    display: inline-block;
-    color: var(--MainBgColorDark);
-}
-
-.skillHeader {
-    display: flex;
-    justify-content: space-between;
-    border-bottom: 2px dashed var(--MainBgColorDark);
-    padding: 15px;
-    margin-bottom: 0.67rem;
-}
-
-/* 0.67 */
-.skillHeader > h1 {
-    margin: 0;
-}
-
-.skillHeader > h1 > small {
-    font-size: 1.3rem;
-    display: inline-block;
-}
-
-.skillHeader > div {
-    display: flex;
-    align-items: center;
-    font-size: 1.8rem;
-}
-
-.skillName {
-    text-transform: capitalize;
-}
-
-.skillNameClick {
-    cursor: pointer;
-    color: var(--MainBgColorDark);
-    text-decoration: underline;
-}
-
-.skillConfirm {
-    font-size: 2.5rem;
-    letter-spacing: 10px;
-    background: transparent;
-    font-family: inherit;
-    font-weight: bold;
-    cursor: pointer;
-    border: none;
-    border-top: 2px dashed var(--MainBgColorDark);
-    width: 100%;
-    text-align: center;
-    color: var(--MainBgColorDark);
-    margin-top: auto;
-    padding: 15px;
-    transition: all 0.3s ease-in;
-}
-
-.skillConfirm:hover {
-    background-color: var(--MainBgColorDark);
-    color: var(--MainBgColor);
-    transition: all 0.3s ease-out;
-}
-
-@media(max-width: 799px) {
-    .skillName {
-        font-size: 1.8rem;
-    }
-    .skillValue {
-        font-size: 2rem;
-        margin: 0;
-    }
-    .skillButton {
-        font-size: 2rem;
-        width: 2.5rem;
-    }
-}

src/components/SkillTree.styles.ts

@@ -0,0 +1,156 @@
+import { css } from 'emotion';
+import { colors } from '../assets/style-vars';
+
+export const skillList = css`
+    list-style: none;
+    padding: 0;
+    margin: 0;
+`;
+
+export const skillTree = css`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+`;
+
+export const skillItem = css`
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    font-size: 2.5rem;
+    padding: 10px 15px 10px 15px;
+    border-bottom: 1px solid black;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+    flex-direction: column;
+    &:last-of-type {
+        margin-bottom: 0;
+        border-bottom: 0;
+    }
+`;
+
+export const skillDesc = css`
+    box-sizing: border-box;
+    font-size: 1.4rem;
+    transition: all 0.4s linear;
+    padding: 10px 0 0 0;
+`;
+
+export const skillDescClosed = css`
+    height: 0;
+    opacity: 0;
+    transition: all 0.4s linear;
+`;
+
+export const skillDescOpen = css`
+    height: 100%;
+    opacity: 1;
+    transition: all 0.4s linear;
+`;
+
+export const skillRow = css`
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+export const skillButton = css`
+    font-size: 2.5rem;
+    width: 3.5rem;
+    background: transparent;
+    border: 1px solid black;
+    border-radius: 6px;
+    cursor: pointer;
+    color: ${colors.MainBgColorDark};
+    transition: all 0.3s ease-in;
+    &:hover {
+        background-color: ${colors.MainBgColorDark};
+        color: ${colors.MainBgColor};
+        transition: all 0.3s ease-out;
+    }
+    &.disabled {
+        cursor: default;
+        color: black;
+        border: none;
+        opacity: 0;
+    }
+    &:focus {
+        outline: none;
+    }
+    @media(max-width: 799px) {
+        font-size: 2rem;
+        width: 2.5rem;
+    }
+`;
+
+export const skillValue = css`
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 2rem;
+    text-align: center;
+    display: inline-block;
+    color: ${colors.MainBgColorDark};
+    @media(max-width: 799px) {
+        font-size: 2rem;
+        margin: 0;
+    }
+`;
+
+export const skillHeader = css`
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 2px dashed ${colors.MainBgColorDark};
+    padding: 15px;
+    margin-bottom: 0.67rem;
+    & > h1 {
+        margin: 0;
+        & > small {
+            font-size: 1.3rem;
+            display: inline-block;
+        }
+    }
+    & > div {
+        display: flex;
+        align-items: center;
+        font-size: 1.8rem;
+    }
+}
+`;
+
+export const skillName = css`
+    text-transform: capitalize;
+    @media(max-width: 799px) {
+        font-size: 1.8rem;
+    }
+`;
+
+export const skillNameClick = css`
+    cursor: pointer;
+    color: ${colors.MainBgColorDark};
+    text-decoration: underline;
+`;
+
+export const skillConfirm = css`
+    font-size: 2.5rem;
+    letter-spacing: 10px;
+    background: transparent;
+    font-family: inherit;
+    font-weight: bold;
+    cursor: pointer;
+    border: none;
+    border-top: 2px dashed ${colors.MainBgColorDark};
+    width: 100%;
+    text-align: center;
+    color: $(colors.MainBgColorDark);
+    margin-top: auto;
+    padding: 15px;
+    transition: all 0.3s ease-in;
+    &:hover {
+        background-color: ${colors.MainBgColorDark};
+        color: ${colors.MainBgColor};
+        transition: all 0.3s ease-out;
+    }
+`;
+
+export const disabled = 'disabled';

src/components/SkillTree.tsx

@@ -1,10 +1,10 @@
 import React, { FC, useState, useMemo } from 'react';
 import * as R from 'ramda';
 
-import styles from './SkillTree.module.css';
+import * as styles from './SkillTree.styles';
 import { useDispatch, useSelector } from 'react-redux';
-import { stateSelector, setSkill, setSkillpoints, setState } from '@/engine/lib/store';
-import { EngineState } from '@/engine/types';
+import { stateSelector, setSkill, setSkillpoints, setState } from '../engine/lib/store';
+import { EngineState } from '../engine/types';
 
 import cn from 'classnames';
 

src/engine/Engine.ts

@@ -1,5 +1,5 @@
 import * as R from 'ramda';
-import { ILineOption, EngineState, ILineRaw, ILine, INode, LineFn, IActor, ILocation, Chrono, DayCycleFn } from './types';
+import { ILineOption, EngineState, ILineRaw, ILine, INode, LineFn, IActor, ILocation, Chrono, EngineConfig } from './types';
 import makeStore, * as actions from './lib/store';
 import { Reducer, CombinedState, Store } from 'redux';
 
@@ -13,9 +13,9 @@ const isLocation = <GS = object, MT = undefined>(node?: INode<GS, MT> | null): n
 
 export class Engine<GS = object, MT = undefined, ST extends string = string> {
     store: EngineStore<GS, MT, ST>;
-    onDayCycle: DayCycleFn;
-    public constructor(state: EngineState<GS, MT, ST>, gameReducer: Reducer, onDayCycle: DayCycleFn) {
-        this.onDayCycle = onDayCycle;
+    config: EngineConfig<GS, MT, ST>;
+    public constructor(state: EngineState<GS, MT, ST>, gameReducer: Reducer, config: EngineConfig<GS, MT, ST>) {
+        this.config = config;
         this.store = makeStore(gameReducer) as EngineStore<GS, MT, ST>;
         this.store.dispatch(actions.initEngineState(state))
         const firstLine = this.currentLine || this.next(this.gameState);
@@ -34,7 +34,7 @@ export class Engine<GS = object, MT = undefined, ST extends string = string> {
         const gameState = this.gameState;
         const line = R.pathOr<ILineRaw<GS, MT> | LineFn<GS, MT> | null>(null, [this.state.node, 'lines', this.state.line], this.state.nodeMap);
         if (line && typeof line === 'function') {
-            return this.augmentLine(line(this.state, gameState, this.store.dispatch))
+            return this.augmentLine(line(this.state, gameState, this.store.dispatch, this.config))
         }
         return this.augmentLine(line);
     }
@@ -69,7 +69,7 @@ export class Engine<GS = object, MT = undefined, ST extends string = string> {
             this.switchLocation(node);
         }
         if (typeof nextLine === 'function') {
-            const result = this.augmentLine(nextLine(this.state, gameState, this.store.dispatch));
+            const result = this.augmentLine(nextLine(this.state, gameState, this.store.dispatch, this.config));
             const defaultTime = result?.actor ? 1 : 0;
             this.store.dispatch(actions.advanceTime(result?.time || defaultTime));
             const line = result
@@ -90,12 +90,12 @@ export class Engine<GS = object, MT = undefined, ST extends string = string> {
         this.store.dispatch(actions.advanceLine(line));
         const nextLine = this.currentNode?.lines[line];
         const chrono = this.currentTime;
-        if (chrono && chrono.time === 1440) {
-            const newChrono = this.onDayCycle(chrono);
+        if (chrono && chrono.time === 1440 && this.config.onDayCycle) {
+            const newChrono = this.config.onDayCycle(chrono);
             this.store.dispatch(actions.setChrono(newChrono));
         }
         if (typeof nextLine === 'function') {
-            const line = this.augmentLine(nextLine(this.state, gameState, this.store.dispatch));
+            const line = this.augmentLine(nextLine(this.state, gameState, this.store.dispatch, this.config));
             const defaultTime = line?.actor ? 1 : 0;
             this.store.dispatch(actions.advanceTime(line?.time || defaultTime));
             return line ? [line] : this.next(gameState);

src/engine/index.ts

@@ -22,5 +22,6 @@ export default <GS = object, MT = undefined, ST extends string = string>(config:
       isOver: false,
     }
   }
-  return new Engine<GS, MT, ST>(state, reducer, config.onDayCycle || defaultDayCycleFn);
+  const supplyConfig = R.merge(config, { onDayCycle: defaultDayCycleFn });
+  return new Engine<GS, MT, ST>(state, reducer, supplyConfig);
 }

src/engine/lib/store.ts

@@ -1,6 +1,6 @@
 import * as R from 'ramda';
 import { createStore, Reducer, combineReducers } from 'redux';
-import { EngineState, Chrono } from '@/engine/types';
+import { EngineState, Chrono } from 'discoteque/lib/engine/types';
 
 type INIT = 'INIT';
 type ENGINE_INIT = 'INIT-ENGINE';

src/engine/types.ts

@@ -14,7 +14,10 @@ export interface ILineRaw<ST, MT = undefined> {
   meta?: MT;
   time?: number;
 }
-export type LineFn<ST = any, MT = undefined, SST extends string = string> = (engineState: EngineState<ST, MT, SST>, gameState: ST, gameDispatch: Dispatch<any>) => ILineRaw<ST, MT> | null | void;
+
+export type LineFn<ST = any, MT = undefined, SST extends string = string, CF = EngineConfig<ST, MT, SST>> =
+  (engineState: EngineState<ST, MT, SST>, gameState: ST, gameDispatch: Dispatch<any>, config: CF) =>
+    ILineRaw<ST, MT> | null | void;
 
 export type BuiltinNodeKind = 'node' | 'actor' | 'location';
 export interface INode<GS = object, MT = undefined, KT = BuiltinNodeKind> {

src/index.css

@@ -1,41 +0,0 @@
-@font-face {
-    font-family: 'Antic Slab Regular';
-    src:  url('./assets/fonts/AnticSlab-Regular.woff2') format('woff2');
-}
-
-body {
-    font-family: "Antic Slab Regular";
-    font-size: 1.5rem;
-    color: var(--MainTextColor);
-    background-color: var(--MainBgColor);
-    font-weight: 400;
-}
-
-:root {
-    --MainBgColor: rgb(243, 223, 193);
-    --MainBgColorDark: rgb(144, 87, 18);
-    --MainTextColor: rgb(26, 28, 26);
-    --MainErrorColor: rgb(232, 91, 30);
-    --MainSuccessColor: rgb(123, 189, 70);
-}
-
-.Toastify__toast {
-    background: var(--MainBgColor);
-    color: var(--MainTextColor);
-}
-
-.Toastify__progress-bar--default {
-    background: var(--MainBgColorDark);
-}
-
-.Toastify__progress-bar--success {
-    background: var(--MainSuccessColor);
-}
-
-.Toastify__progress-bar--error {
-    background: var(--MainErrorColor);
-}
-
-.Toastify__close-button {
-    color: var(--MainTextColor);
-}

src/index.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import App from '@/components/App';
+import App from './components/App';
 
-import '@/index.css';
-import { EngineConfig } from '@/engine/types';
+import { EngineConfig } from './engine/types';
 
 function initApp<GS = object, MT = undefined, ST extends string = string>(config: EngineConfig<GS, MT, ST>) {
     ReactDOM.render(<App<GS, MT, ST> config={config} />, document.getElementById('root'));

tsconfig.json

@@ -21,10 +21,11 @@
     "strictNullChecks": true,
     "moduleResolution": "node",
     "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
     "esModuleInterop": true,
     "baseUrl": ".",
     "paths": {
-    "@/*": ["src/*"]
+        "discoteque/lib/*": ["src/*"]
     },
     "plugins": [
       {

yarn.lock

@@ -2,13 +2,202 @@
 # yarn lockfile v1
 
 
-"@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
+"@babel/generator@^7.11.5":
+  version "7.11.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.11.6.tgz#b868900f81b163b4d464ea24545c61cbac4dc620"
+  integrity sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==
+  dependencies:
+    "@babel/types" "^7.11.5"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/helper-annotate-as-pure@^7.0.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3"
+  integrity sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a"
+  integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-get-function-arity@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
+  integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-module-imports@^7.0.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
+  integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-split-export-declaration@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz#f8a491244acf6a676158ac42072911ba83ad099f"
+  integrity sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+
+"@babel/highlight@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.10.4", "@babel/parser@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037"
+  integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==
+
+"@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
   version "7.11.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
   integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/template@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
+  integrity sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/parser" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/traverse@^7.4.5":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.11.5.tgz#be777b93b518eb6d76ee2e1ea1d143daa11e61c3"
+  integrity sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.11.5"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/parser" "^7.11.5"
+    "@babel/types" "^7.11.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.19"
+
+"@babel/types@^7.10.4", "@babel/types@^7.11.0", "@babel/types@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d"
+  integrity sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
+"@emotion/cache@^10.0.27":
+  version "10.0.29"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
+  integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
+  dependencies:
+    "@emotion/sheet" "0.9.4"
+    "@emotion/stylis" "0.8.5"
+    "@emotion/utils" "0.11.3"
+    "@emotion/weak-memoize" "0.2.5"
+
+"@emotion/core@^10.0.35":
+  version "10.0.35"
+  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3"
+  integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/cache" "^10.0.27"
+    "@emotion/css" "^10.0.27"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/sheet" "0.9.4"
+    "@emotion/utils" "0.11.3"
+
+"@emotion/css@^10.0.27":
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
+  integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
+  dependencies:
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/utils" "0.11.3"
+    babel-plugin-emotion "^10.0.27"
+
+"@emotion/hash@0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
+"@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/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
+  version "0.11.16"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
+  integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
+  dependencies:
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/unitless" "0.7.5"
+    "@emotion/utils" "0.11.3"
+    csstype "^2.5.7"
+
+"@emotion/sheet@0.9.4":
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
+  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
+
+"@emotion/stylis@0.8.5", "@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
+"@emotion/utils@0.11.3":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
+  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
+
+"@emotion/weak-memoize@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@npmcli/move-file@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@npmcli/move-file/-/move-file-1.0.1.tgz#de103070dac0f48ce49cf6693c23af59c0f70464"
@@ -60,7 +249,7 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
-"@types/hoist-non-react-statics@^3.3.0":
+"@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==
@@ -88,6 +277,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.1.tgz#56af902ad157e763f9ba63d671c39cda3193c835"
   integrity sha512-oTQgnd0hblfLsJ6BvJzzSL+Inogp3lq9fGgqRkMB/ziKMgEUaFl801OncOzUmalfzt14N0oPHMK47ipl+wbTIw==
 
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@@ -112,6 +306,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-native@*":
+  version "0.63.22"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.22.tgz#5babb88b73c892e3f23b7c18bf83c320cf872f69"
+  integrity sha512-T+ST35WEwpLFAVCGZ4efujd7eHo1yPx3lwme79pg8sLr2EEhpFbblhXkHTJmENJBEL4FbB5suOS3sMn5kuvioQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@^7.1.9":
   version "7.1.9"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.9.tgz#280c13565c9f13ceb727ec21e767abe0e9b4aec3"
@@ -135,6 +336,16 @@
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
   integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
 
+"@types/styled-components@^5.1.3":
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.3.tgz#6fab3d9c8f7d9a15cbb89d379d850c985002f363"
+  integrity sha512-HGpirof3WOhiX17lb61Q/tpgqn48jxO8EfZkdJ8ueYqwLbK2AHQe/G08DasdA2IdKnmwOIP1s9X2bopxKXgjRw==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    "@types/react-native" "*"
+    csstype "^3.0.2"
+
 "@types/tapable@*", "@types/tapable@^1.0.5":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
@@ -488,6 +699,46 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+babel-plugin-emotion@^10.0.27:
+  version "10.0.33"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03"
+  integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/serialize" "^0.11.16"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+
+babel-plugin-macros@^2.0.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.0"
+
+"babel-plugin-styled-components@>= 1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.11.1.tgz#5296a9e557d736c3186be079fff27c6665d63d76"
+  integrity sha512-YwrInHyKUk1PU3avIRdiLyCpM++18Rs1NgyMXEAQC33rIXs/vro0A+stf4sT0Gf22Got+xRWB8Cm0tw+qkRzBA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+
+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.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -679,6 +930,11 @@ callsites@^2.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
   integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
 
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
 camel-case@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.1.tgz#1fc41c854f00e2f7d0139dfeba1542d6896fe547"
@@ -697,7 +953,12 @@ camelcase@^6.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
   integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
 
-chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
+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=
+
+chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -870,6 +1131,13 @@ content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
+convert-source-map@^1.5.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -900,6 +1168,27 @@ cosmiconfig@^5.0.0:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
+cosmiconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
+  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.7.2"
+
+create-emotion@^10.0.27:
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.27.tgz#cb4fa2db750f6ca6f9a001a33fbf1f6c46789503"
+  integrity sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==
+  dependencies:
+    "@emotion/cache" "^10.0.27"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/sheet" "0.9.4"
+    "@emotion/utils" "0.11.3"
+
 cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -911,6 +1200,11 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
 css-loader@^4.2.2:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-4.3.0.tgz#c888af64b2a5b2e85462c72c0f4a85c7e2e0821e"
@@ -954,6 +1248,15 @@ css-selector-tokenizer@^0.7.0:
     cssesc "^3.0.0"
     fastparse "^1.1.2"
 
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-what@2.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
@@ -974,6 +1277,11 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+csstype@^2.5.7:
+  version "2.6.13"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f"
+  integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==
+
 csstype@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.3.tgz#2b410bbeba38ba9633353aff34b05d9755d065f8"
@@ -1218,6 +1526,14 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
+emotion@^10.0.27:
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.27.tgz#f9ca5df98630980a23c819a56262560562e5d75e"
+  integrity sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==
+  dependencies:
+    babel-plugin-emotion "^10.0.27"
+    create-emotion "^10.0.27"
+
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -1556,6 +1872,11 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@@ -1730,6 +2051,11 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
+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==
+
 globby@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
@@ -1809,7 +2135,7 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-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==
@@ -1980,6 +2306,14 @@ import-fresh@^2.0.0:
     caller-path "^2.0.0"
     resolve-from "^3.0.0"
 
+import-fresh@^3.1.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
+  integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
 import-from@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
@@ -2300,7 +2634,7 @@ jest-worker@^26.3.0:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-"js-tokens@^3.0.0 || ^4.0.0":
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
@@ -2313,11 +2647,21 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+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, json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -2391,6 +2735,11 @@ less@^3.11.1:
     native-request "^1.0.5"
     source-map "~0.6.0"
 
+lines-and-columns@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
+  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+
 loader-runner@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.0.0.tgz#02abcfd9fe6ff7a5aeb3547464746c4dc6ba333d"
@@ -2444,7 +2793,7 @@ lodash.camelcase@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
 
-lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4:
+lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==