Merge pull request #597 from ente-io/revert-595-revert-back-to-emotion

Revert back to styled-components

.babelrc

@@ -1,4 +1,13 @@
 {
-    "presets": [["next/babel"]],
-    "plugins": ["@emotion/babel-plugin"]
+    "presets": ["next/babel"],
+    "plugins": [
+        [
+            "styled-components",
+            {
+                "ssr": true,
+                "displayName": true,
+                "preprocess": false
+            }
+        ]
+    ]
 }

package.json

@@ -13,13 +13,11 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@emotion/cache": "^11.9.3",
-    "@emotion/react": "^11.9.3",
-    "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.9.3",
     "@ente-io/next-with-workbox": "^1.0.3",
     "@mui/icons-material": "^5.6.2",
-    "@mui/material": "^5.8.3",
+    "@mui/material": "^5.6.2",
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
+    "@mui/styled-engine-sc": "^5.6.1",
     "@sentry/nextjs": "^6.7.1",
     "@stripe/stripe-js": "^1.13.2",
     "@typescript-eslint/eslint-plugin": "^4.25.0",
@@ -61,6 +59,7 @@
     "react-window": "^1.8.6",
     "react-window-infinite-loader": "^1.0.5",
     "scrypt-js": "^3.0.1",
+    "styled-components": "^5.3.5",
     "workbox-precaching": "^6.1.5",
     "workbox-recipes": "^6.1.5",
     "workbox-routing": "^6.1.5",
@@ -70,7 +69,6 @@
     "yup": "^0.29.3"
   },
   "devDependencies": {
-    "@emotion/babel-plugin": "^11.9.2",
     "@next/bundle-analyzer": "^9.5.3",
     "@types/debounce-promise": "^3.1.3",
     "@types/libsodium-wrappers": "^0.7.8",
@@ -82,7 +80,9 @@
     "@types/react-select": "^4.0.15",
     "@types/react-window": "^1.8.2",
     "@types/react-window-infinite-loader": "^1.0.3",
+    "@types/styled-components": "^5.1.25",
     "@types/yup": "^0.29.7",
+    "babel-plugin-styled-components": "^1.11.1",
     "eslint": "^7.27.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^8.3.0",
@@ -101,5 +101,8 @@
       "eslint --fix",
       "prettier --write --ignore-unknown"
     ]
+  },
+  "resolutions": {
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
   }
 }

src/components/AddToCollectionBtn.tsx

@@ -1,7 +1,7 @@
-import { styled } from '@mui/material';
 import React from 'react';
+import styled from 'styled-components';
 
-const Wrapper = styled('button')`
+const Wrapper = styled.button`
     border: none;
     background-color: #51cd7c;
     position: fixed;

src/components/CodeBlock/styledComponents.tsx

@@ -1,6 +1,7 @@
 import { IconButton } from '@mui/material';
 import { CenteredFlex } from 'components/Container';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
+
 export const Wrapper = styled(CenteredFlex)`
     position: relative;
     background: ${({ theme }) => theme.palette.accent.dark};
@@ -14,7 +15,7 @@ export const CopyButtonWrapper = styled(IconButton)`
     margin: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const CodeWrapper = styled('div')`
+export const CodeWrapper = styled.div`
     padding: 36px 36px 16px 16px;
     border-radius: ${({ theme }) => theme.shape.borderRadius}px;
 `;

src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx

@@ -19,7 +19,12 @@ const SortByOptionCreator =
             <MenuItem onClick={handleClick} style={{ paddingLeft: '5px' }}>
                 <ListItemIcon style={{ minWidth: '25px' }}>
                     {activeSortBy === props.sortBy && (
-                        <TickIcon sx={{ fontSize: 16 }} />
+                        <TickIcon
+                            css={`
+                                height: 16px;
+                                width: 16px;
+                            `}
+                        />
                     )}
                 </ListItemIcon>
                 <ListItemText>{props.children}</ListItemText>

src/components/Collections/CollectionBar/ScrollButton.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import styled, { css } from 'styled-components';
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import { SCROLL_DIRECTION } from 'hooks/useComponentScroll';
-import { css, styled } from '@mui/material';
 
-const Wrapper = styled('button')<{ direction: SCROLL_DIRECTION }>`
+const Wrapper = styled.button<{ direction: SCROLL_DIRECTION }>`
     position: absolute;
     z-index: 2;
     top: 7px;

src/components/Collections/CollectionShare/publicShare/switch.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SwitchProps, Switch } from '@mui/material';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
+
 const PublicShareSwitch = styled((props: SwitchProps) => (
     <Switch
         focusVisibleClassName=".Mui-focusVisible"

src/components/Collections/CollectionShare/styledComponents.tsx

@@ -1,12 +1,13 @@
-import { styled } from '@mui/material';
-export const ManageSectionLabel = styled('summary')(
+import styled from 'styled-components';
+
+export const ManageSectionLabel = styled.summary(
     ({ theme }) => `
     text-align: center;
     margin-bottom:${theme.spacing(1)};
 `
 );
 
-export const ManageSectionOptions = styled('section')(
+export const ManageSectionOptions = styled.section(
     ({ theme }) => `
     margin-bottom:${theme.spacing(4)};
 `

src/components/Collections/styledComponents.ts

@@ -1,6 +1,7 @@
 import { Box } from '@mui/material';
 import { PaddedContainer } from 'components/Container';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
+
 export const CollectionListWrapper = styled(Box)`
     position: relative;
     overflow: hidden;
@@ -18,7 +19,7 @@ export const CollectionInfoBarWrapper = styled(Box)`
     margin-bottom: 24px;
 `;
 
-export const ScrollContainer = styled('div')`
+export const ScrollContainer = styled.div`
     width: 100%;
     height: 100px;
     overflow: auto;
@@ -26,33 +27,34 @@ export const ScrollContainer = styled('div')`
     display: flex;
 `;
 
-export const CollectionTile = styled('div')`
+export const CollectionTile = styled.div`
     display: flex;
     position: relative;
     border-radius: 4px;
     user-select: none;
     cursor: pointer;
+    background-size: cover;
     & > img {
         object-fit: cover;
-        width: 100%;
-        height: 100%;
+        max-width: 100%;
+        min-height: 100%;
         flex: 1;
         pointer-events: none;
     }
 `;
 
-export const CollectionTileWrapper = styled('div')`
+export const CollectionTileWrapper = styled.div`
     margin-right: 4px;
 `;
 
-export const ActiveIndicator = styled('div')`
+export const ActiveIndicator = styled.div`
     height: 3px;
     background-color: ${({ theme }) => theme.palette.text.primary};
     margin-top: 18px;
     border-radius: 2px;
 `;
 
-export const Hider = styled('div')<{ hide: boolean }>`
+export const Hider = styled.div<{ hide: boolean }>`
     display: ${(props) => (props.hide ? 'none' : 'block')};
 `;
 
@@ -84,7 +86,7 @@ export const ResultPreviewTile = styled(AllCollectionTile)`
     border-radius: 4px;
 `;
 
-export const CollectionTileTextOverlay = styled('div')`
+export const CollectionTileTextOverlay = styled.div`
     height: 100%;
     width: 100%;
     position: absolute;

src/components/Container.ts

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import { default as MuiStyled } from '@mui/styled-engine';
 import { IMAGE_CONTAINER_MAX_WIDTH } from 'constants/gallery';
 
@@ -15,13 +15,13 @@ const VerticallyCentered = MuiStyled(Box)`
 
 export default VerticallyCentered;
 
-export const DisclaimerContainer = styled('div')`
+export const DisclaimerContainer = styled.div`
     margin: 16px 0;
     color: rgb(158, 150, 137);
     font-size: 14px;
 `;
 
-export const IconButton = styled('button')`
+export const IconButton = styled.button`
     background: none;
     border: none;
     border-radius: 50%;
@@ -38,18 +38,18 @@ export const IconButton = styled('button')`
     }
 `;
 
-export const Row = styled('div')`
+export const Row = styled.div`
     display: flex;
     align-items: center;
     margin-bottom: ${({ theme }) => theme.spacing(2)};
     flex: 1;
 `;
 
-export const Label = styled('div')<{ width?: string }>`
+export const Label = styled.div<{ width?: string }>`
     width: ${(props) => props.width ?? '70%'};
     color: ${(props) => props.theme.palette.text.secondary};
 `;
-export const Value = styled('div')<{ width?: string }>`
+export const Value = styled.div<{ width?: string }>`
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -62,7 +62,7 @@ export const FlexWrapper = styled(Box)`
     align-items: center;
 `;
 
-export const FreeFlowText = styled('div')`
+export const FreeFlowText = styled.div`
     word-break: break-word;
     min-width: 30%;
     text-align: left;

src/components/DeleteBtn.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import constants from 'utils/strings/constants';
 import { IconWithMessage } from './IconWithMessage';
 
-const Wrapper = styled('button')`
+const Wrapper = styled.button`
     border: none;
     background-color: #ff6666;
     position: fixed;

src/components/EmptyScreen.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import { Button } from 'react-bootstrap';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import constants from 'utils/strings/constants';
 import { DeduplicateContext } from 'pages/deduplicate';
 
-const Wrapper = styled('div')`
+const Wrapper = styled.div`
     display: flex;
     justify-content: center;
     align-items: center;

src/components/EnteLogo.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { styled } from '@mui/material';
-const LogoImage = styled('img')`
+import styled from 'styled-components';
+
+const LogoImage = styled.img`
     height: 18px;
     padding: 0 3px;
 `;

src/components/ExportInProgress.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Button, ProgressBar } from 'react-bootstrap';
 import { ExportProgress } from 'types/export';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import constants from 'utils/strings/constants';
 import { ExportStage } from 'constants/export';
 
-export const ComfySpan = styled('span')`
+export const ComfySpan = styled.span`
     word-spacing: 1rem;
     color: #ddd;
 `;

src/components/ExportModal.tsx

@@ -5,7 +5,7 @@ import exportService from 'services/exportService';
 import { ExportProgress, ExportStats } from 'types/export';
 import { getLocalFiles } from 'services/fileService';
 import { User } from 'types/user';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import { sleep } from 'utils/common';
 import { getExportRecordFileUID } from 'utils/export';
 import { logError } from 'utils/sentry';
@@ -20,7 +20,7 @@ import InProgressIcon from './icons/InProgressIcon';
 import DialogBox from './DialogBox';
 import { ExportStage, ExportType } from 'constants/export';
 
-const FolderIconWrapper = styled('div')`
+const FolderIconWrapper = styled.div`
     width: 15%;
     margin-left: 10px;
     cursor: pointer;
@@ -32,7 +32,7 @@ const FolderIconWrapper = styled('div')`
     }
 `;
 
-const ExportFolderPathContainer = styled('span')`
+const ExportFolderPathContainer = styled.span`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

src/components/FavButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { styled } from '@mui/material';
-const HeartUI = styled('button')<{
+import styled from 'styled-components';
+
+const HeartUI = styled.button<{
     isClick: boolean;
     size: number;
 }>`

src/components/FullScreenDropZone.tsx

@@ -1,20 +1,20 @@
 import React, { useEffect, useState } from 'react';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import constants from 'utils/strings/constants';
 import CloseIcon from '@mui/icons-material/Close';
 
-const CloseButtonWrapper = styled('div')`
+const CloseButtonWrapper = styled.div`
     position: absolute;
     top: 10px;
     right: 10px;
     cursor: pointer;
 `;
-const DropDiv = styled('div')`
+const DropDiv = styled.div`
     flex: 1;
     display: flex;
     flex-direction: column;
 `;
-const Overlay = styled('div')`
+const Overlay = styled.div`
     border-width: 8px;
     left: 0;
     top: 0;

src/components/LoadingOverlay.tsx

@@ -1,5 +1,6 @@
-import { styled } from '@mui/material';
-export const LoadingOverlay = styled('div')`
+import styled from 'styled-components';
+
+export const LoadingOverlay = styled.div`
     left: 0;
     top: 0;
     outline: none;

src/components/LogoImg.tsx

@@ -1,5 +1,6 @@
-import { styled } from '@mui/material';
-export default styled('img')`
+import styled from 'styled-components';
+
+export default styled.img`
     height: 25px;
     vertical-align: bottom;
     padding-right: 15px;

src/components/Navbar/SelectionBar.tsx

@@ -1,5 +1,6 @@
 import NavbarBase from 'components/Navbar/base';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
+
 export const SelectionBar = styled(NavbarBase)`
     position: fixed;
     z-index: 2;

src/components/Navbar/base.tsx

@@ -1,5 +1,6 @@
 import { FlexWrapper } from 'components/Container';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
+
 const NavbarBase = styled(FlexWrapper)`
     padding: 0 20px;
     min-height: 64px;

src/components/Notification.tsx

@@ -45,11 +45,11 @@ export default function Notification({ open, onClose, attributes }: Iprops) {
                 component={Button}
                 color={attributes.variant}
                 onClick={handleClick}
-                sx={{
-                    textAlign: 'left',
-                    width: '320px',
-                    padding: '12px 16px',
-                }}>
+                css={`
+                    width: 320px;
+                    padding: 12px 16px;
+                `}
+                sx={{ textAlign: 'left' }}>
                 <Stack
                     flex={'1'}
                     spacing={2}
@@ -68,8 +68,11 @@ export default function Notification({ open, onClose, attributes }: Iprops) {
                         {attributes?.action && (
                             <Typography
                                 mb={0.5}
-                                variant="button"
-                                fontWeight={'bold'}>
+                                css={`
+                                    font-size: 16px;
+                                    font-weight: 600;
+                                    line-height: 19px;
+                                `}>
                                 {attributes?.action.text}
                             </Typography>
                         )}

src/components/PhotoFrame.tsx

@@ -2,7 +2,7 @@ import { GalleryContext } from 'pages/gallery';
 import PreviewCard from './pages/gallery/PreviewCard';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { EnteFile } from 'types/file';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import DownloadManager from 'services/downloadManager';
 import constants from 'utils/strings/constants';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -30,7 +30,7 @@ import { Search } from 'types/search';
 import { logError } from 'utils/sentry';
 import { CustomError } from 'utils/error';
 
-const Container = styled('div')`
+const Container = styled.div`
     display: block;
     flex: 1;
     width: 100%;

src/components/PhotoList.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useContext } from 'react';
 import { VariableSizeList as List } from 'react-window';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import { EnteFile } from 'types/file';
 import {
     IMAGE_CONTAINER_MAX_WIDTH,
@@ -49,7 +49,7 @@ export interface TimeStampListItem {
     fileCount?: number;
 }
 
-const ListItem = styled('div')`
+const ListItem = styled.div`
     display: flex;
     justify-content: center;
 `;

src/components/PhotoSwipe/styledComponents/Legend.tsx

@@ -1,5 +1,6 @@
-import { styled } from '@mui/material';
-export const Legend = styled('span')`
+import styled from 'styled-components';
+
+export const Legend = styled.span`
     font-size: 20px;
     color: #ddd;
     display: inline;

src/components/PhotoSwipe/styledComponents/LegendContainer.tsx

@@ -1,5 +1,6 @@
-import { styled } from '@mui/material';
-export const LegendContainer = styled('div')`
+import styled from 'styled-components';
+
+export const LegendContainer = styled.div`
     display: flex;
     justify-content: space-between;
 `;

src/components/PhotoSwipe/styledComponents/LivePhotoBtn.tsx

@@ -1,5 +1,6 @@
-import { styled } from '@mui/material';
-export const LivePhotoBtn = styled('button')`
+import styled from 'styled-components';
+
+export const LivePhotoBtn = styled.button`
     position: absolute;
     bottom: 6vh;
     right: 6vh;

src/components/PhotoSwipe/styledComponents/Pre.tsx

@@ -1,5 +1,6 @@
-import { styled } from '@mui/material';
-export const Pre = styled('p')`
+import styled from 'styled-components';
+
+export const Pre = styled.pre`
     color: #aaa;
     padding: 7px 15px;
 `;

src/components/Search/SearchStatsContainer.tsx

@@ -1,5 +1,6 @@
-import { styled } from '@mui/material';
-const SearchStatsContainer = styled('div')(
+import styled from 'styled-components';
+
+const SearchStatsContainer = styled.div(
     ({ theme }) => `
     display: flex;
     justify-content: center;

src/components/Search/optionWithInfo.tsx

@@ -18,7 +18,12 @@ export const OptionWithInfo = (props) => (
 const LabelWithInfo = ({ data }: { data: SearchOption }) => (
     <>
         <Box className="main" px={2} py={1}>
-            <Typography variant="caption" mb={1}>
+            <Typography
+                css={`
+                    font-size: 12px;
+                    line-height: 16px;
+                `}
+                mb={1}>
                 {constants.SEARCH_TYPE(data.type)}
             </Typography>
             <SpaceBetweenFlex>

src/components/Search/styledComponents.tsx

@@ -3,7 +3,7 @@ import {
     FlexWrapper,
     FluidContainer,
 } from 'components/Container';
-import { styled, css } from '@mui/material';
+import styled, { css } from 'styled-components';
 
 export const SearchBarWrapper = styled(CenteredFlex)<{ isOpen: boolean }>`
     ${(props) =>

src/components/Sidebar/styledComponents.tsx

@@ -1,7 +1,8 @@
 import { Drawer, Divider, styled } from '@mui/material';
+import { default as MuiStyled } from '@mui/styled-engine';
 import CircleIcon from '@mui/icons-material/Circle';
 
-export const DrawerSidebar = styled(Drawer)(({ theme }) => ({
+export const DrawerSidebar = MuiStyled(Drawer)(({ theme }) => ({
     '& .MuiPaper-root': {
         width: '320px',
         padding: theme.spacing(2, 1, 4, 1),
@@ -10,7 +11,7 @@ export const DrawerSidebar = styled(Drawer)(({ theme }) => ({
 
 DrawerSidebar.defaultProps = { anchor: 'left' };
 
-export const PaddedDivider = styled(Divider)<{
+export const PaddedDivider = MuiStyled(Divider)<{
     invisible?: boolean;
     spaced?: boolean;
 }>(({ theme, invisible, spaced }) => ({

src/components/TruncateText.tsx

@@ -1,7 +1,8 @@
 import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
-import { styled } from '@mui/material';
-export const EllipseText = styled('div')`
+import styled from 'styled-components';
+
+export const EllipseText = styled.div`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

src/components/TwoFactor/styledComponents.ts

@@ -1,6 +1,7 @@
 import VerticallyCentered from 'components/Container';
-import { styled } from '@mui/material';
-export const QRCode = styled('img')(
+import styled from 'styled-components';
+
+export const QRCode = styled.img(
     ({ theme }) => `
     height: 200px;
     width: 200px;

src/components/UploadProgress/styledComponents.tsx

@@ -1,5 +1,6 @@
-import { styled } from '@mui/material';
-export const NotUploadSectionHeader = styled('div')(
+import styled from 'styled-components';
+
+export const NotUploadSectionHeader = styled.div(
     ({ theme }) => `
     text-align: center;
     color: ${theme.palette.danger.main};
@@ -8,7 +9,7 @@ export const NotUploadSectionHeader = styled('div')(
 `
 );
 
-export const InProgressItemContainer = styled('div')`
+export const InProgressItemContainer = styled.div`
     display: inline-block;
     & > span {
         display: inline-block;
@@ -26,7 +27,7 @@ export const InProgressItemContainer = styled('div')`
     }
 `;
 
-export const ResultItemContainer = styled('div')`
+export const ResultItemContainer = styled.div`
     position: relative;
     top: 5px;
     display: inline-block;

src/components/UploadProgress/title.tsx

@@ -20,7 +20,16 @@ const IconButtonWithBG = styled(IconButton)(({ theme }) => ({
 }));
 
 const UploadProgressTitleText = ({ expanded }) => (
-    <Typography variant={expanded ? 'title' : 'subtitle'}>
+    <Typography
+        {...(expanded ? { variant: 'title' } : {})}
+        css={
+            !expanded &&
+            `
+font-size: 24px;
+font-weight: 600;
+line-height: 36px;
+`
+        }>
         {constants.FILE_UPLOAD}
     </Typography>
 );

src/components/icons/InProgressIcon.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { styled } from '@mui/material';
-const Rotate = styled('div')<{ disabled }>`
+import styled from 'styled-components';
+
+const Rotate = styled.div<{ disabled }>`
     width: 24px;
     height: 27px;
     ${(props) =>

src/components/icons/LivePhotoIndicatorOverlay.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { styled } from '@mui/material';
-const Wrapper = styled('div')`
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
     font-size: 10px;
     position: absolute;
     padding: 2px;

src/components/pages/dedupe/SelectedFileOptions.tsx

@@ -3,14 +3,14 @@ import { SelectionBar } from '../../Navbar/SelectionBar';
 import constants from 'utils/strings/constants';
 import DeleteIcon from 'components/icons/DeleteIcon';
 import React, { useContext } from 'react';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import { DeduplicateContext } from 'pages/deduplicate';
 import { IconWithMessage } from 'components/IconWithMessage';
 import { AppContext } from 'pages/_app';
 import CloseIcon from '@mui/icons-material/Close';
 import BackButton from '@mui/icons-material/ArrowBackOutlined';
 
-const VerticalLine = styled('div')`
+const VerticalLine = styled.div`
     position: absolute;
     width: 1px;
     top: 0;
@@ -18,7 +18,7 @@ const VerticalLine = styled('div')`
     background: #303030;
 `;
 
-const CheckboxText = styled('div')`
+const CheckboxText = styled.div`
     margin-left: 0.5em;
     font-size: 16px;
     margin-right: 0.8em;

src/components/pages/gallery/AddCollectionButton.tsx

@@ -2,10 +2,10 @@ import { Typography } from '@mui/material';
 import CollectionCard from 'components/Collections/CollectionCard';
 import { CollectionSelectorTile } from 'components/Collections/styledComponents';
 import React from 'react';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import constants from 'utils/strings/constants';
 
-const ImageContainer = styled('div')`
+const ImageContainer = styled.div`
     position: absolute;
     width: 100%;
     height: 100%;
@@ -25,7 +25,12 @@ export default function AddCollectionButton({
             collectionTile={CollectionSelectorTile}
             onClick={() => showNextModal()}
             latestFile={null}>
-            <Typography variant="body2" fontWeight={'bold'}>
+            <Typography
+                css={`
+                    font-size: 14px;
+                    font-weight: 600;
+                    line-height: 20px;
+                `}>
                 {constants.CREATE_COLLECTION}
             </Typography>
             <ImageContainer>+</ImageContainer>

src/components/pages/gallery/AlertBanner.tsx

@@ -1,14 +1,14 @@
 import { FlexWrapper } from 'components/Container';
 import WarningIcon from 'components/icons/WarningIcon';
 import React from 'react';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import { ButtonVariant, getVariantColor } from './LinkButton';
 
 interface Props {
     bannerMessage?: any;
     variant?: string;
 }
-const Banner = styled('div')`
+const Banner = styled.div`
     border: 1px solid ${getVariantColor(ButtonVariant.warning)};
     border-radius: 8px;
     padding: 16px 28px;

src/components/pages/gallery/OptionIcon.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { styled } from '@mui/material';
-export const OptionIconWrapper = styled('div')`
+import styled from 'styled-components';
+
+export const OptionIconWrapper = styled.div`
     display: inline-block;
     opacity: 0;
     font-weight: bold;

src/components/pages/gallery/PlanSelector/plans/planTile.tsx

@@ -1,6 +1,6 @@
-import { css, styled } from '@mui/material';
+import styled, { css } from 'styled-components';
 
-export const PlanTile = styled('div')<{ currentlySubscribed: boolean }>`
+export const PlanTile = styled.div<{ currentlySubscribed: boolean }>`
     border-radius: 20px;
     width: 220px;
     border: 2px solid #333;

src/components/pages/gallery/PreviewCard.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
 import { EnteFile } from 'types/file';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import PlayCircleOutlineOutlinedIcon from '@mui/icons-material/PlayCircleOutlineOutlined';
 import DownloadManager from 'services/downloadManager';
 import useLongPress from 'utils/common/useLongPress';
@@ -28,7 +28,7 @@ interface IProps {
     isInsSelectRange?: boolean;
 }
 
-const Check = styled('input')<{ active: boolean }>`
+const Check = styled.input<{ active: boolean }>`
     appearance: none;
     position: absolute;
     z-index: 10;
@@ -87,7 +87,7 @@ const Check = styled('input')<{ active: boolean }>`
     }
 `;
 
-export const HoverOverlay = styled('div')<{ checked: boolean }>`
+export const HoverOverlay = styled.div<{ checked: boolean }>`
     opacity: 0;
     left: 0;
     top: 0;
@@ -100,7 +100,7 @@ export const HoverOverlay = styled('div')<{ checked: boolean }>`
         'background:linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0))'};
 `;
 
-export const InSelectRangeOverLay = styled('div')<{ active: boolean }>`
+export const InSelectRangeOverLay = styled.div<{ active: boolean }>`
     opacity: ${(props) => (!props.active ? 0 : 1)};
     left: 0;
     top: 0;
@@ -111,7 +111,7 @@ export const InSelectRangeOverLay = styled('div')<{ active: boolean }>`
     ${(props) => props.active && 'background:rgba(81, 205, 124, 0.25)'};
 `;
 
-export const FileAndCollectionNameOverlay = styled('div')`
+export const FileAndCollectionNameOverlay = styled.div`
     width: 100%;
     bottom: 0;
     left: 0;
@@ -135,7 +135,7 @@ export const FileAndCollectionNameOverlay = styled('div')`
     position: absolute;
 `;
 
-export const SelectedOverlay = styled('div')<{ selected: boolean }>`
+export const SelectedOverlay = styled.div<{ selected: boolean }>`
     z-index: 5;
     position: absolute;
     left: 0;
@@ -146,7 +146,7 @@ export const SelectedOverlay = styled('div')<{ selected: boolean }>`
     border-radius: 4px;
 `;
 
-const Cont = styled('div')<{ disabled: boolean }>`
+const Cont = styled.div<{ disabled: boolean }>`
     background: #222;
     display: flex;
     width: fit-content;

src/components/pages/gallery/UploadButton.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined';
 import { Button } from '@mui/material';
 import constants from 'utils/strings/constants';
 
-const Wrapper = styled('div')<{ isDisabled: boolean }>`
+const Wrapper = styled.div<{ isDisabled: boolean }>`
     display: flex;
     align-items: center;
     justify-content: center;

src/components/pages/gallery/UploadStrategyChoiceModal.tsx

@@ -34,7 +34,7 @@ function UploadStrategyChoiceModal({
                 </CenteredFlex>
                 <SpaceBetweenFlex>
                     <Button
-                        size="medium"
+                        size="large"
                         color="accent"
                         onClick={() => {
                             props.onClose();
@@ -46,7 +46,7 @@ function UploadStrategyChoiceModal({
                     <strong>{constants.OR}</strong>
 
                     <Button
-                        size="medium"
+                        size="large"
                         color="accent"
                         onClick={() => {
                             props.onClose();

src/components/pages/sharedAlbum/AbuseReportForm.tsx

@@ -8,7 +8,7 @@ import { Col, Form, FormControl, Row } from 'react-bootstrap';
 import { reportAbuse } from 'services/publicCollectionService';
 import constants from 'utils/strings/constants';
 import * as Yup from 'yup';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import { AbuseReportDetails, AbuseReportRequest } from 'types/publicCollection';
 import { AppContext } from 'pages/_app';
 
@@ -52,7 +52,7 @@ const defaultInitialValues: FormValues = {
     },
 };
 
-const Wrapper = styled('div')`
+const Wrapper = styled.div`
     padding: 5px 20px;
 `;
 

src/components/pages/sharedAlbum/GoToEnte.tsx

@@ -1,16 +1,16 @@
 import { ENTE_WEBSITE_LINK } from 'constants/urls';
 import React, { useEffect, useState } from 'react';
 import { Button } from 'react-bootstrap';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import GetDeviceOS, { OS } from 'utils/common/deviceDetection';
 import constants from 'utils/strings/constants';
 
-const Wrapper = styled('div')`
+const Wrapper = styled.div`
     position: fixed;
     right: 20px;
 `;
 
-const NoStyleAnchor = styled('a')`
+const NoStyleAnchor = styled.a`
     color: inherit;
     text-decoration: none !important;
     &:hover {

src/components/pages/sharedAlbum/ReportAbuse.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Button } from 'react-bootstrap';
-import { styled } from '@mui/material';
-const Container = styled('div')`
+import styled from 'styled-components';
+
+const Container = styled.div`
     position: fixed;
     bottom: 7%;
     right: 2%;

src/createEmotionCache.js

@@ -1,7 +0,0 @@
-import createCache from '@emotion/cache';
-
-// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
-// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
-export default function createEmotionCache() {
-    return createCache({ key: 'css', prepend: true });
-}

src/pages/_app.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, useEffect, useRef, useState } from 'react';
+import styled, { ThemeProvider as SThemeProvider } from 'styled-components';
 import AppNavbar from 'components/Navbar/app';
 import constants from 'utils/strings/constants';
 import { useRouter } from 'next/router';
@@ -16,21 +17,19 @@ import Head from 'next/head';
 import { logUploadInfo } from 'utils/upload';
 import LoadingBar from 'react-top-loading-bar';
 import DialogBox from 'components/DialogBox';
-import { styled, ThemeProvider } from '@mui/material/styles';
-import { CacheProvider, EmotionCache } from '@emotion/react';
-import createEmotionCache from '../createEmotionCache';
+import { ThemeProvider as MThemeProvider } from '@mui/material/styles';
 import darkThemeOptions from 'themes/darkThemeOptions';
 import { CssBaseline } from '@mui/material';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import * as types from 'styled-components/cssprop'; // need to css prop on styled component
 import { SetDialogBoxAttributes, DialogBoxAttributes } from 'types/dialogBox';
 import {
     getFamilyPortalRedirectURL,
     getRoadmapRedirectURL,
 } from 'services/userService';
 import { CustomError } from 'utils/error';
-import PropTypes from 'prop-types';
-import { AppProps } from 'next/app';
 
-export const MessageContainer = styled('div')`
+export const MessageContainer = styled.div`
     background-color: #111;
     padding: 0;
     font-size: 14px;
@@ -73,19 +72,7 @@ const redirectMap = new Map([
     ['families', getFamilyPortalRedirectURL],
 ]);
 
-// Client-side cache, shared for the whole session of the user in the browser.
-const clientSideEmotionCache = createEmotionCache();
-
-interface MyAppProps extends AppProps {
-    emotionCache?: EmotionCache;
-}
-
-export default function MyApp(props: MyAppProps) {
-    const {
-        Component,
-        emotionCache = clientSideEmotionCache,
-        pageProps,
-    } = props;
+export default function App({ Component, err }) {
     const router = useRouter();
     const [loading, setLoading] = useState(false);
     const [offline, setOffline] = useState(
@@ -236,7 +223,7 @@ export default function MyApp(props: MyAppProps) {
     const closeMessageDialog = () => setMessageDialogView(false);
 
     return (
-        <CacheProvider value={emotionCache}>
+        <>
             <Head>
                 <title>{constants.TITLE}</title>
                 <meta
@@ -245,68 +232,66 @@ export default function MyApp(props: MyAppProps) {
                 />
             </Head>
 
-            <ThemeProvider theme={darkThemeOptions}>
-                <CssBaseline />
-                {showNavbar && <AppNavbar />}
-                <MessageContainer>
-                    {offline && constants.OFFLINE_MSG}
-                </MessageContainer>
-                {sharedFiles &&
-                    (router.pathname === '/gallery' ? (
-                        <MessageContainer>
-                            {constants.FILES_TO_BE_UPLOADED(sharedFiles.length)}
-                        </MessageContainer>
-                    ) : (
-                        <MessageContainer>
-                            {constants.LOGIN_TO_UPLOAD_FILES(
-                                sharedFiles.length
-                            )}
-                        </MessageContainer>
-                    ))}
-                {flashMessage && (
-                    <FlashMessageBar
-                        flashMessage={flashMessage}
-                        onClose={() => setFlashMessage(null)}
-                    />
-                )}
-                <LoadingBar color="#51cd7c" ref={loadingBar} />
+            <MThemeProvider theme={darkThemeOptions}>
+                <SThemeProvider theme={darkThemeOptions}>
+                    <CssBaseline />
+                    {showNavbar && <AppNavbar />}
+                    <MessageContainer>
+                        {offline && constants.OFFLINE_MSG}
+                    </MessageContainer>
+                    {sharedFiles &&
+                        (router.pathname === '/gallery' ? (
+                            <MessageContainer>
+                                {constants.FILES_TO_BE_UPLOADED(
+                                    sharedFiles.length
+                                )}
+                            </MessageContainer>
+                        ) : (
+                            <MessageContainer>
+                                {constants.LOGIN_TO_UPLOAD_FILES(
+                                    sharedFiles.length
+                                )}
+                            </MessageContainer>
+                        ))}
+                    {flashMessage && (
+                        <FlashMessageBar
+                            flashMessage={flashMessage}
+                            onClose={() => setFlashMessage(null)}
+                        />
+                    )}
+                    <LoadingBar color="#51cd7c" ref={loadingBar} />
 
-                <DialogBox
-                    open={messageDialogView}
-                    onClose={closeMessageDialog}
-                    attributes={dialogMessage}
-                />
+                    <DialogBox
+                        open={messageDialogView}
+                        onClose={closeMessageDialog}
+                        attributes={dialogMessage}
+                    />
 
-                <AppContext.Provider
-                    value={{
-                        showNavBar,
-                        sharedFiles,
-                        resetSharedFiles,
-                        setDisappearingFlashMessage,
-                        redirectURL,
-                        setRedirectURL,
-                        startLoading,
-                        finishLoading,
-                        closeMessageDialog,
-                        setDialogMessage,
-                    }}>
-                    {loading ? (
-                        <VerticallyCentered>
-                            <EnteSpinner>
-                                <span className="sr-only">Loading...</span>
-                            </EnteSpinner>
-                        </VerticallyCentered>
-                    ) : (
-                        <Component {...pageProps} />
-                    )}
-                </AppContext.Provider>
-            </ThemeProvider>
-        </CacheProvider>
+                    <AppContext.Provider
+                        value={{
+                            showNavBar,
+                            sharedFiles,
+                            resetSharedFiles,
+                            setDisappearingFlashMessage,
+                            redirectURL,
+                            setRedirectURL,
+                            startLoading,
+                            finishLoading,
+                            closeMessageDialog,
+                            setDialogMessage,
+                        }}>
+                        {loading ? (
+                            <VerticallyCentered>
+                                <EnteSpinner>
+                                    <span className="sr-only">Loading...</span>
+                                </EnteSpinner>
+                            </VerticallyCentered>
+                        ) : (
+                            <Component err={err} setLoading={setLoading} />
+                        )}
+                    </AppContext.Provider>
+                </SThemeProvider>
+            </MThemeProvider>
+        </>
     );
 }
-
-MyApp.propTypes = {
-    Component: PropTypes.elementType.isRequired,
-    emotionCache: PropTypes.object,
-    pageProps: PropTypes.object.isRequired,
-};

src/pages/_document.tsx

@@ -1,19 +1,38 @@
 import React from 'react';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
-
-import createEmotionServer from '@emotion/server/create-instance';
-import theme from '../themes/darkThemeOptions';
-import createEmotionCache from '../createEmotionCache';
+import { ServerStyleSheet } from 'styled-components';
 
 export default class MyDocument extends Document {
+    static async getInitialProps(ctx) {
+        const sheet = new ServerStyleSheet();
+        const originalRenderPage = ctx.renderPage;
+
+        try {
+            ctx.renderPage = () =>
+                originalRenderPage({
+                    enhanceApp: (App) => (props) =>
+                        sheet.collectStyles(<App {...props} />),
+                });
+
+            const initialProps = await Document.getInitialProps(ctx);
+            return {
+                ...initialProps,
+                styles: (
+                    <>
+                        {initialProps.styles}
+                        {sheet.getStyleElement()}
+                    </>
+                ),
+            };
+        } finally {
+            sheet.seal();
+        }
+    }
+
     render() {
         return (
             <Html lang="en">
                 <Head>
-                    <meta
-                        name="theme-color"
-                        content={theme.palette.primary.main}
-                    />
                     <meta
                         name="description"
                         content="ente is a privacy focussed photo storage service that offers end-to-end encryption."
@@ -36,8 +55,6 @@ export default class MyDocument extends Document {
                         name="apple-mobile-web-app-status-bar-style"
                         content="black"
                     />
-                    {/* Inject MUI styles first to match with the prepend: true configuration. */}
-                    {(this.props as any).emotionStyleTags}
                 </Head>
                 <body>
                     <Main />
@@ -47,62 +64,3 @@ export default class MyDocument extends Document {
         );
     }
 }
-
-// `getInitialProps` belongs to `_document` (instead of `_app`),
-// it's compatible with static-site generation (SSG).
-MyDocument.getInitialProps = async (ctx) => {
-    // Resolution order
-    //
-    // On the server:
-    // 1. app.getInitialProps
-    // 2. page.getInitialProps
-    // 3. document.getInitialProps
-    // 4. app.render
-    // 5. page.render
-    // 6. document.render
-    //
-    // On the server with error:
-    // 1. document.getInitialProps
-    // 2. app.render
-    // 3. page.render
-    // 4. document.render
-    //
-    // On the client
-    // 1. app.getInitialProps
-    // 2. page.getInitialProps
-    // 3. app.render
-    // 4. page.render
-
-    const originalRenderPage = ctx.renderPage;
-
-    // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
-    // However, be aware that it can have global side effects.
-    const cache = createEmotionCache();
-    const { extractCriticalToChunks } = createEmotionServer(cache);
-
-    ctx.renderPage = () =>
-        originalRenderPage({
-            enhanceApp: (App: any) =>
-                function EnhanceApp(props) {
-                    return <App emotionCache={cache} {...props} />;
-                },
-        });
-
-    const initialProps = await Document.getInitialProps(ctx);
-    // This is important. It prevents Emotion to render invalid HTML.
-    // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
-    const emotionStyles = extractCriticalToChunks(initialProps.html);
-    const emotionStyleTags = emotionStyles.styles.map((style) => (
-        <style
-            data-emotion={`${style.key} ${style.ids.join(' ')}`}
-            key={style.key}
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: style.css }}
-        />
-    ));
-
-    return {
-        ...initialProps,
-        emotionStyleTags,
-    };
-};

src/pages/deduplicate/index.tsx

@@ -22,13 +22,13 @@ import DeduplicateOptions from 'components/pages/dedupe/SelectedFileOptions';
 import { PAGES } from 'constants/pages';
 import router from 'next/router';
 import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import { syncCollections } from 'services/collectionService';
 
 export const DeduplicateContext = createContext<DeduplicateContextType>(
     DefaultDeduplicateContext
 );
-export const Info = styled('div')`
+export const Info = styled.div`
     padding: 24px;
     font-size: 18px;
 `;

src/pages/gallery/index.tsx

@@ -14,7 +14,7 @@ import {
     trashFiles,
     deleteFromTrash,
 } from 'services/fileService';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import {
     syncCollections,
     getFavItemIds,
@@ -104,7 +104,7 @@ import SearchResultInfo from 'components/Search/SearchResultInfo';
 import { NotificationAttributes } from 'types/Notification';
 import { ITEM_TYPE, TimeStampListItem } from 'components/PhotoList';
 
-export const DeadCenter = styled('div')`
+export const DeadCenter = styled.div`
     flex: 1;
     display: flex;
     justify-content: center;
@@ -112,7 +112,7 @@ export const DeadCenter = styled('div')`
     text-align: center;
     flex-direction: column;
 `;
-const AlertContainer = styled('div')`
+const AlertContainer = styled.div`
     background-color: #111;
     padding: 5px 0;
     font-size: 14px;

src/pages/index.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import Carousel from 'react-bootstrap/Carousel';
 import Button from 'react-bootstrap/Button';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import { AppContext } from './_app';
 import Login from 'components/Login';
 import { useRouter } from 'next/router';
@@ -13,7 +13,7 @@ import localForage from 'utils/storage/localForage';
 import { logError } from 'utils/sentry';
 import { getAlbumSiteHost, PAGES } from 'constants/pages';
 
-const Container = styled('div')`
+const Container = styled.div`
     display: flex;
     flex: 1;
     align-items: center;
@@ -25,7 +25,7 @@ const Container = styled('div')`
     }
 `;
 
-const SlideContainer = styled('div')`
+const SlideContainer = styled.div`
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -38,7 +38,7 @@ const SlideContainer = styled('div')`
     }
 `;
 
-const DesktopBox = styled('div')`
+const DesktopBox = styled.div`
     flex: 1;
     height: 100%;
     padding: 10px;
@@ -52,7 +52,7 @@ const DesktopBox = styled('div')`
     }
 `;
 
-const MobileBox = styled('div')`
+const MobileBox = styled.div`
     display: none;
 
     @media (max-width: 1024px) {
@@ -62,13 +62,13 @@ const MobileBox = styled('div')`
     }
 `;
 
-const SideBox = styled('div')`
+const SideBox = styled.div`
     display: flex;
     flex-direction: column;
     min-width: 320px;
 `;
 
-const TextContainer = styled('div')`
+const TextContainer = styled.div`
     padding: 20px;
     max-width: 300px;
     margin: 0 auto;
@@ -80,14 +80,14 @@ const UpperText = styled(TextContainer)`
     margin-bottom: 20px;
 `;
 
-const FeatureText = styled('div')`
+const FeatureText = styled.div`
     color: #51cd7c;
     font-weight: bold;
     padding-top: 20px;
     font-size: 24px;
 `;
 
-const Img = styled('img')`
+const Img = styled.img`
     height: 250px;
     object-fit: contain;
 

src/types/theme/styled.d.ts

@@ -0,0 +1,7 @@
+// styled.d.ts
+import 'styled-components';
+import { Theme } from '@mui/material';
+
+declare module 'styled-components' {
+    export interface DefaultTheme extends Theme {}
+}

src/utils/strings/englishConstants.tsx

@@ -2,7 +2,7 @@ import { Box, Typography } from '@mui/material';
 import Link from '@mui/material/Link';
 import LinkButton from 'components/pages/gallery/LinkButton';
 import React from 'react';
-import { styled } from '@mui/material';
+import styled from 'styled-components';
 import { SuggestionType } from 'types/search';
 import { formatNumberWithCommas } from '.';
 
@@ -18,11 +18,11 @@ const dateString = function (date) {
     });
 };
 
-const Strong = styled('strong')`
+const Strong = styled.strong`
     color: #ddd;
 `;
 
-const Logo = styled('img')`
+const Logo = styled.img`
     height: 18px;
     vertical-align: middle;
     margin-top: -3px;

yarn.lock

@@ -51,7 +51,7 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
-"@babel/helper-annotate-as-pure@^7.14.5", "@babel/helper-annotate-as-pure@^7.15.4":
+"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.14.5", "@babel/helper-annotate-as-pure@^7.15.4":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.15.4.tgz"
   integrity sha512-QwrtdNvUNsPCj2lfNQacsGSQvGX8ee1ttrBrcozUP2Sv/jylewBP/8QFe6ZkBsC8T/GYWonNAWJV4aRR9AL2DA==
@@ -185,11 +185,6 @@
   resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz"
   integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
 
-"@babel/helper-plugin-utils@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96"
-  integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==
-
 "@babel/helper-remap-async-to-generator@^7.14.5", "@babel/helper-remap-async-to-generator@^7.15.4":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.15.4.tgz"
@@ -461,13 +456,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.12.13":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.17.12.tgz#834035b45061983a491f60096f61a2e7c5674a47"
-  integrity sha512-spyY3E3AURfxh/RHtjx5j6hs8am5NbUBGfcZ2vB3uShSpZdQyXSf5rR5Mk76vbtlAZOelyVQ71Fg0x9SG4fsog==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
-
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz"
@@ -884,13 +872,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.7.2":
-  version "7.18.3"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
-  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/template@^7.15.4":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz"
@@ -900,7 +881,7 @@
     "@babel/parser" "^7.15.4"
     "@babel/types" "^7.15.4"
 
-"@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4":
+"@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.4.5":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.15.4.tgz"
   integrity sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==
@@ -923,24 +904,6 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
-"@emotion/babel-plugin@^11.7.1", "@emotion/babel-plugin@^11.9.2":
-  version "11.9.2"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz#723b6d394c89fb2ef782229d92ba95a740576e95"
-  integrity sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.12.13"
-    "@babel/plugin-syntax-jsx" "^7.12.13"
-    "@babel/runtime" "^7.13.10"
-    "@emotion/hash" "^0.8.0"
-    "@emotion/memoize" "^0.7.5"
-    "@emotion/serialize" "^1.0.2"
-    babel-plugin-macros "^2.6.1"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^4.0.0"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-    stylis "4.0.13"
-
 "@emotion/cache@^11.4.0":
   version "11.4.0"
   resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.4.0.tgz"
@@ -952,37 +915,19 @@
     "@emotion/weak-memoize" "^0.2.5"
     stylis "^4.0.3"
 
-"@emotion/cache@^11.7.1", "@emotion/cache@^11.9.3":
-  version "11.9.3"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.9.3.tgz#96638449f6929fd18062cfe04d79b29b44c0d6cb"
-  integrity sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==
-  dependencies:
-    "@emotion/memoize" "^0.7.4"
-    "@emotion/sheet" "^1.1.1"
-    "@emotion/utils" "^1.0.0"
-    "@emotion/weak-memoize" "^0.2.5"
-    stylis "4.0.13"
-
 "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@^1.1.2":
+"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz#34ad6e98e871aa6f7a20469b602911b8b11b3a95"
   integrity sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==
   dependencies:
     "@emotion/memoize" "^0.7.4"
 
-"@emotion/is-prop-valid@^1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz#f0907a416368cf8df9e410117068e20fe87c0a3a"
-  integrity sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==
-  dependencies:
-    "@emotion/memoize" "^0.7.4"
-
-"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
+"@emotion/memoize@^0.7.4":
   version "0.7.5"
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz"
   integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
@@ -1000,19 +945,6 @@
     "@emotion/weak-memoize" "^0.2.5"
     hoist-non-react-statics "^3.3.1"
 
-"@emotion/react@^11.9.3":
-  version "11.9.3"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.9.3.tgz#f4f4f34444f6654a2e550f5dab4f2d360c101df9"
-  integrity sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@emotion/babel-plugin" "^11.7.1"
-    "@emotion/cache" "^11.9.3"
-    "@emotion/serialize" "^1.0.4"
-    "@emotion/utils" "^1.1.0"
-    "@emotion/weak-memoize" "^0.2.5"
-    hoist-non-react-statics "^3.3.1"
-
 "@emotion/serialize@^1.0.0", "@emotion/serialize@^1.0.2":
   version "1.0.2"
   resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz"
@@ -1024,49 +956,17 @@
     "@emotion/utils" "^1.0.0"
     csstype "^3.0.2"
 
-"@emotion/serialize@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.4.tgz#ff31fd11bb07999611199c2229e152faadc21a3c"
-  integrity sha512-1JHamSpH8PIfFwAMryO2bNka+y8+KA5yga5Ocf2d7ZEiJjb7xlLW7aknBGZqJLajuLOvJ+72vN+IBSwPlXD1Pg==
-  dependencies:
-    "@emotion/hash" "^0.8.0"
-    "@emotion/memoize" "^0.7.4"
-    "@emotion/unitless" "^0.7.5"
-    "@emotion/utils" "^1.0.0"
-    csstype "^3.0.2"
-
-"@emotion/server@^11.4.0":
-  version "11.4.0"
-  resolved "https://registry.yarnpkg.com/@emotion/server/-/server-11.4.0.tgz#3ae1d74cb31c7d013c3c76e88c0c4439076e9f66"
-  integrity sha512-IHovdWA3V0DokzxLtUNDx4+hQI82zUXqQFcVz/om2t44O0YSc+NHB+qifnyAOoQwt3SXcBTgaSntobwUI9gnfA==
-  dependencies:
-    "@emotion/utils" "^1.0.0"
-    html-tokenize "^2.0.0"
-    multipipe "^1.0.2"
-    through "^2.3.8"
-
 "@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.2":
   version "1.0.2"
   resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.2.tgz"
   integrity sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw==
 
-"@emotion/sheet@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.1.tgz#015756e2a9a3c7c5f11d8ec22966a8dbfbfac787"
-  integrity sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA==
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/styled@^11.9.3":
-  version "11.9.3"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.9.3.tgz#47f0c71137fec7c57035bf3659b52fb536792340"
-  integrity sha512-o3sBNwbtoVz9v7WB1/Y/AmXl69YHmei2mrVnK7JgyBJ//Rst5yqPZCecEJlMlJrFeWHp+ki/54uN265V2pEcXA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@emotion/babel-plugin" "^11.7.1"
-    "@emotion/is-prop-valid" "^1.1.3"
-    "@emotion/serialize" "^1.0.4"
-    "@emotion/utils" "^1.1.0"
-
-"@emotion/unitless@^0.7.5":
+"@emotion/unitless@^0.7.4", "@emotion/unitless@^0.7.5":
   version "0.7.5"
   resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@@ -1076,11 +976,6 @@
   resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz"
   integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
 
-"@emotion/utils@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf"
-  integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==
-
 "@emotion/weak-memoize@^0.2.5":
   version "0.2.5"
   resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz"
@@ -1156,18 +1051,18 @@
   resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz"
   integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
 
-"@mui/base@5.0.0-alpha.84":
-  version "5.0.0-alpha.84"
-  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.84.tgz#83c580c9b04b4e4efe3fb39572720470b0d7cc29"
-  integrity sha512-uDx+wGVytS+ZHiWHyzUyijY83GSIXJpzSJ0PGc/8/s+8nBzeHvaPKrAyJz15ASLr52hYRA6PQGqn0eRAsB7syQ==
+"@mui/base@5.0.0-alpha.77":
+  version "5.0.0-alpha.77"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.77.tgz#a88985597708c354520579e4f76e617b29f8f593"
+  integrity sha512-Zqm3qlczGViD3lJSYo8ZnQLHJ3PwGYftbDfVuh2Rq5OD88F7H6oDILlqknzty59NDkeSVO2qlymYmHOY1nLodg==
   dependencies:
     "@babel/runtime" "^7.17.2"
     "@emotion/is-prop-valid" "^1.1.2"
     "@mui/types" "^7.1.3"
-    "@mui/utils" "^5.8.0"
+    "@mui/utils" "^5.6.1"
     "@popperjs/core" "^2.11.5"
     clsx "^1.1.1"
-    prop-types "^15.8.1"
+    prop-types "^15.7.2"
     react-is "^17.0.2"
 
 "@mui/icons-material@^5.6.2":
@@ -1177,70 +1072,69 @@
   dependencies:
     "@babel/runtime" "^7.17.2"
 
-"@mui/material@^5.8.3":
-  version "5.8.3"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.8.3.tgz#86681d14c1a119d1d9b6b981c864736d075d095f"
-  integrity sha512-8UecY/W9SMtEZm5PMCUcMbujajVP6fobu0BgBPiIWwwWRblZVEzqprY6v1P2me7qCyrve4L4V/rqAKPKhVHOSg==
+"@mui/material@^5.6.2":
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.6.2.tgz#bcd0ecdb265aca1bfee11773f6561aeedaa25b45"
+  integrity sha512-bwMvroBrMgUTwUh/BcjhtcJwEw9uH4chV3+ZSj6RckOJtMj8U4yEeD7S4NgHE8Ioj5eObKFzHpih/cTD1sDRpg==
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@mui/base" "5.0.0-alpha.84"
-    "@mui/system" "^5.8.3"
+    "@mui/base" "5.0.0-alpha.77"
+    "@mui/system" "^5.6.2"
     "@mui/types" "^7.1.3"
-    "@mui/utils" "^5.8.0"
+    "@mui/utils" "^5.6.1"
     "@types/react-transition-group" "^4.4.4"
     clsx "^1.1.1"
-    csstype "^3.1.0"
+    csstype "^3.0.11"
     hoist-non-react-statics "^3.3.2"
-    prop-types "^15.8.1"
+    prop-types "^15.7.2"
     react-is "^17.0.2"
     react-transition-group "^4.4.2"
 
-"@mui/private-theming@^5.8.0":
-  version "5.8.0"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.8.0.tgz#7d927e7e12616dc10b0dcbe665df2c00ed859796"
-  integrity sha512-MjRAneTmCKLR9u2S4jtjLUe6gpHxlbb4g2bqpDJ2PdwlvwsWIUzbc/gVB4dvccljXeWxr5G2M/Co2blXisvFIw==
+"@mui/private-theming@^5.6.2":
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.6.2.tgz#c42da32f8b9481ba12885176c0168a355727c189"
+  integrity sha512-IbrSfFXfiZdyhRMC2bgGTFtb16RBQ5mccmjeh3MtAERWuepiCK7gkW5D9WhEsfTu6iez+TEjeUKSgmMHlsM2mg==
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@mui/utils" "^5.8.0"
-    prop-types "^15.8.1"
+    "@mui/utils" "^5.6.1"
+    prop-types "^15.7.2"
 
-"@mui/styled-engine@^5.8.0":
-  version "5.8.0"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.8.0.tgz#89ed42efe7c8749e5a60af035bc5d3a6bea362bf"
-  integrity sha512-Q3spibB8/EgeMYHc+/o3RRTnAYkSl7ROCLhXJ830W8HZ2/iDiyYp16UcxKPurkXvLhUaILyofPVrP3Su2uKsAw==
+"@mui/styled-engine-sc@^5.6.1", "@mui/styled-engine@^5.6.1", "@mui/styled-engine@npm:@mui/styled-engine-sc@latest":
+  name "@mui/styled-engine"
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine-sc/-/styled-engine-sc-5.6.1.tgz#d9505c005eeefa5c7d7ef9c03e63324db889ee09"
+  integrity sha512-BMY5Pb8YgOxvvwg9s6mPeDgzha4244/KgRmHvTVPBmvqypbiLPApR6SNyYON+1/3kLHt3TpmxrlRY3jPiZF2QQ==
   dependencies:
-    "@babel/runtime" "^7.17.2"
-    "@emotion/cache" "^11.7.1"
-    prop-types "^15.8.1"
+    prop-types "^15.7.2"
 
-"@mui/system@^5.8.3":
-  version "5.8.3"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.8.3.tgz#66db174f1b5c244eb73dbc48527509782a22ec0a"
-  integrity sha512-/tyGQcYqZT0nl98qV9XnGiedTO+V7VHc28k4POfhMJNedB1CRrwWRm767DeEdc5f/8CU2See3WD16ikP6pYiOA==
+"@mui/system@^5.6.2":
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.6.2.tgz#04687d60d6a1f0f9df2c9d817b4942dac6b44aac"
+  integrity sha512-Wg9TRbvavSwEYk6UdpnoDx+CqJfaAN7AzlmwEx7DtGmx0snFVBST8FVb1Ev1vXosxEnq6/fe7ZDRobFVewvEPQ==
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@mui/private-theming" "^5.8.0"
-    "@mui/styled-engine" "^5.8.0"
+    "@mui/private-theming" "^5.6.2"
+    "@mui/styled-engine" "^5.6.1"
     "@mui/types" "^7.1.3"
-    "@mui/utils" "^5.8.0"
+    "@mui/utils" "^5.6.1"
     clsx "^1.1.1"
-    csstype "^3.1.0"
-    prop-types "^15.8.1"
+    csstype "^3.0.11"
+    prop-types "^15.7.2"
 
 "@mui/types@^7.1.3":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.3.tgz#d7636f3046110bcccc63e6acfd100e2ad9ca712a"
   integrity sha512-DDF0UhMBo4Uezlk+6QxrlDbchF79XG6Zs0zIewlR4c0Dt6GKVFfUtzPtHCH1tTbcSlq/L2bGEdiaoHBJ9Y1gSA==
 
-"@mui/utils@^5.8.0":
-  version "5.8.0"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.8.0.tgz#4b1d19cbcf70773283375e763b7b3552b84cb58f"
-  integrity sha512-7LgUtCvz78676iC0wpTH7HizMdCrTphhBmRWimIMFrp5Ph6JbDFVuKS1CwYnWWxRyYKL0QzXrDL0lptAU90EXg==
+"@mui/utils@^5.6.1":
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.6.1.tgz#4ab79a21bd481555d9a588f4b18061b3c28ea5db"
+  integrity sha512-CPrzrkiBusCZBLWu0Sg5MJvR3fKJyK3gKecLVX012LULyqg2U64Oz04BKhfkbtBrPBbSQxM+DWW9B1c9hmV9nQ==
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@types/prop-types" "^15.7.5"
+    "@types/prop-types" "^15.7.4"
     "@types/react-is" "^16.7.1 || ^17.0.0"
-    prop-types "^15.8.1"
+    prop-types "^15.7.2"
     react-is "^17.0.2"
 
 "@next/bundle-analyzer@^9.5.3":
@@ -1560,6 +1454,14 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@*":
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/http-proxy@^1.17.5":
   version "1.17.7"
   resolved "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.7.tgz"
@@ -1622,7 +1524,7 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
-"@types/prop-types@^15.7.5":
+"@types/prop-types@^15.7.4":
   version "15.7.5"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
@@ -1732,6 +1634,15 @@
   resolved "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz"
   integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
 
+"@types/styled-components@^5.1.25":
+  version "5.1.25"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.25.tgz#0177c4ab5fa7c6ed0565d36f597393dae3f380ad"
+  integrity sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    csstype "^3.0.2"
+
 "@types/tapable@^1":
   version "1.0.8"
   resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz"
@@ -2087,15 +1998,6 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-macros@^2.6.1:
-  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-polyfill-corejs2@^0.2.2:
   version "0.2.2"
   resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.2.tgz"
@@ -2120,6 +2022,21 @@ babel-plugin-polyfill-regenerator@^0.2.2:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.2.2"
 
+"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^1.11.1:
+  version "1.13.2"
+  resolved "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz"
+  integrity sha512-Vb1R3d4g+MUfPQPVDMCGjm3cDocJEUTR7Xq7QS95JWWeksN1wdFRYpD2kulDgI3Huuaf1CZd+NK4KQmqUFh5dA==
+  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.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz"
@@ -2242,11 +2159,6 @@ buffer-from@^1.0.0:
   resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
-buffer-from@~0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-0.1.2.tgz#15f4b9bcef012044df31142c14333caf6e0260d0"
-  integrity sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg==
-
 builtin-modules@^3.1.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz"
@@ -2270,6 +2182,11 @@ callsites@^3.0.0:
   resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-lite@^1.0.30001254:
   version "1.0.30001255"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001255.tgz"
@@ -2436,7 +2353,7 @@ content-type@~1.0.4:
   resolved "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-source-map@^1.5.0, convert-source-map@^1.7.0:
+convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -2481,17 +2398,6 @@ core-util-is@~1.0.0:
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-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"
-
 cosmiconfig@^7.0.0:
   version "7.0.1"
   resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz"
@@ -2540,16 +2446,30 @@ crypto-random-string@^1.0.0:
   resolved "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz"
   integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
+csstype@^3.0.11:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
+  integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
+
 csstype@^3.0.2:
   version "3.0.8"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
-csstype@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
-  integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
-
 damerau-levenshtein@^1.0.6:
   version "1.0.7"
   resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz"
@@ -2670,13 +2590,6 @@ dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1:
     "@babel/runtime" "^7.8.7"
     csstype "^3.0.2"
 
-duplexer2@^0.1.2:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
-  integrity sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==
-  dependencies:
-    readable-stream "^2.0.2"
-
 duplexer@^0.1.1:
   version "0.1.2"
   resolved "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz"
@@ -3180,11 +3093,6 @@ finalhandler@~1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.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@^2.0.0, find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz"
@@ -3444,7 +3352,7 @@ heic-decode@^1.1.2:
   dependencies:
     libheif-js "^1.10.0"
 
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -3461,17 +3369,6 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
-html-tokenize@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/html-tokenize/-/html-tokenize-2.0.1.tgz#c3b2ea6e2837d4f8c06693393e9d2a12c960be5f"
-  integrity sha512-QY6S+hZ0f5m1WT8WffYN+Hg+xm/w5I8XeUcAq/ZYP5wVC8xbKi4Whhru3FtrAebD5EhBW8rmFzkDI6eCAuFe2w==
-  dependencies:
-    buffer-from "~0.1.1"
-    inherits "~2.0.1"
-    minimist "~1.2.5"
-    readable-stream "~1.0.27-1"
-    through2 "~0.4.1"
-
 http-errors@1.7.2:
   version "1.7.2"
   resolved "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz"
@@ -3564,7 +3461,7 @@ immediate@~3.0.5:
   resolved "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz"
   integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
 
-import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
+import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -3590,7 +3487,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -3653,13 +3550,6 @@ is-core-module@^2.2.0, is-core-module@^2.6.0:
   dependencies:
     has "^1.0.3"
 
-is-core-module@^2.8.1:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
-  integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
-  dependencies:
-    has "^1.0.3"
-
 is-date-object@^1.0.1:
   version "1.0.5"
   resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz"
@@ -3813,11 +3703,6 @@ is-weakref@^1.0.1:
   dependencies:
     call-bind "^1.0.2"
 
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
-  integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==
-
 isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
@@ -4087,7 +3972,7 @@ lodash.truncate@^4.4.2:
   resolved "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz"
   integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
 
-lodash@^4.17.15, lodash@^4.17.21:
+lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -4212,7 +4097,7 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.2.0, minimist@^1.2.5, minimist@~1.2.5:
+minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
@@ -4239,14 +4124,6 @@ ms@2.1.2, ms@^2.1.1:
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-multipipe@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/multipipe/-/multipipe-1.0.2.tgz#cc13efd833c9cda99f224f868461b8e1a3fd939d"
-  integrity sha512-6uiC9OvY71vzSGX8lZvSqscE7ft9nPupJ8fMjrCNRAUy2LREUW42UL+V/NTrogr6rFgRydUrCX4ZitfpSNkSCQ==
-  dependencies:
-    duplexer2 "^0.1.2"
-    object-assign "^4.1.0"
-
 nanoid@^3.1.30:
   version "3.3.1"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz"
@@ -4362,11 +4239,6 @@ object-keys@^1.0.12, object-keys@^1.1.1:
   resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object-keys@~0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-0.4.0.tgz#28a6aae7428dd2c3a92f3d95f21335dd204e0336"
-  integrity sha512-ncrLw+X55z7bkl5PnUvHwFK9FcGuFYo9gtjws2XtSzL+aZ8tm830P60WJ0dSmFVaSalWieW5MD7kEdnXda9yJw==
-
 object.assign@^4.1.0, object.assign@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz"
@@ -4529,7 +4401,7 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-parse@^1.0.6, path-parse@^1.0.7:
+path-parse@^1.0.6:
   version "1.0.7"
   resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
@@ -4643,6 +4515,11 @@ pngjs@^3.4.0:
   resolved "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
 
+postcss-value-parser@^4.0.2:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz"
+  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
+
 postcss@8.4.5:
   version "8.4.5"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz"
@@ -4694,15 +4571,6 @@ prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
-prop-types@^15.8.1:
-  version "15.8.1"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
-  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.13.1"
-
 property-expr@^2.0.2:
   version "2.0.4"
   resolved "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz"
@@ -4833,7 +4701,7 @@ react-input-autosize@^3.0.0:
   dependencies:
     prop-types "^15.5.8"
 
-react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.3.2, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -4951,7 +4819,7 @@ read-pkg@^3.0.0:
     normalize-package-data "^2.3.2"
     path-type "^3.0.0"
 
-readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@~2.3.6:
+readable-stream@^2.0.6, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -4973,16 +4841,6 @@ readable-stream@^3.6.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readable-stream@~1.0.17, readable-stream@~1.0.27-1:
-  version "1.0.34"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
-  integrity sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
 readable-web-to-node-stream@^3.0.0:
   version "3.0.2"
   resolved "https://registry.npmjs.org/readable-web-to-node-stream/-/readable-web-to-node-stream-3.0.2.tgz"
@@ -5079,15 +4937,6 @@ resolve@^1.10.0, resolve@^1.14.2, resolve@^1.20.0:
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
-resolve@^1.12.0:
-  version "1.22.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
-  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
-  dependencies:
-    is-core-module "^2.8.1"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
 resolve@^2.0.0-next.3:
   version "2.0.0-next.3"
   resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz"
@@ -5299,6 +5148,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.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
@@ -5371,7 +5225,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
-source-map@^0.5.0, source-map@^0.5.7:
+source-map@^0.5.0:
   version "0.5.7"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -5495,11 +5349,6 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-string_decoder@~0.10.x:
-  version "0.10.31"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
-  integrity sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==
-
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
@@ -5568,22 +5417,33 @@ strtok3@^6.2.4:
     "@tokenizer/token" "^0.3.0"
     peek-readable "^4.0.1"
 
+styled-components@^5.3.5:
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
+  integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 styled-jsx@5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.0.tgz"
   integrity sha512-qUqsWoBquEdERe10EW8vLp3jT25s/ssG1/qX5gZ4wu15OZpmSMFI2v+fWlRhLfykA5rFtlJ1ME8A8pm/peV4WA==
 
-stylis@4.0.13:
-  version "4.0.13"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
-  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
-
 stylis@^4.0.3:
   version "4.0.10"
   resolved "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz"
   integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -5604,11 +5464,6 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-preserve-symlinks-flag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
-  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
-
 synchronous-promise@^2.0.13:
   version "2.0.15"
   resolved "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.15.tgz"
@@ -5659,14 +5514,6 @@ text-table@^0.2.0:
   resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-through2@~0.4.1:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-0.4.2.tgz#dbf5866031151ec8352bb6c4db64a2292a840b9b"
-  integrity sha512-45Llu+EwHKtAZYTPPVn3XZHBgakWMN3rokhEv5hu596XP+cNgplMg+Gj+1nmAvj+L0K7+N49zBKx5rah5u0QIQ==
-  dependencies:
-    readable-stream "~1.0.17"
-    xtend "~2.1.1"
-
 through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.npmjs.org/through/-/through-2.3.8.tgz"
@@ -6216,19 +6063,12 @@ xml-js@^1.6.11:
   dependencies:
     sax "^1.2.4"
 
-xtend@~2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-2.1.2.tgz#6efecc2a4dad8e6962c4901b337ce7ba87b5d28b"
-  integrity sha512-vMNKzr2rHP9Dp/e1NQFnLQlwlhp9L/LfvnsVdHxN1f+uggyVI3i08uD14GPvCToPkdsRfyPqIyYGmIk58V98ZQ==
-  dependencies:
-    object-keys "~0.4.0"
-
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0, yaml@^1.7.2:
+yaml@^1.10.0:
   version "1.10.2"
   resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==