From 4471f0bf90671eba3736e20e7d673410be235539 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Mon, 25 Jul 2022 16:11:28 -0300
Subject: [PATCH 01/15] implement emotion

---
 docs/best-practices.md                        |   4 +-
 gatsby-config.ts                              |   2 +-
 package.json                                  |   7 +-
 src/components/Accordion.tsx                  |   2 +-
 src/components/ActionCard.tsx                 |   2 +-
 src/components/AdoptionChart.tsx              |   3 +-
 src/components/AssetDownload.tsx              |   2 +-
 src/components/BannerGrid/index.tsx           |   2 +-
 src/components/BannerNotification.tsx         |   2 +-
 src/components/BeaconChainActions.tsx         |   2 +-
 src/components/BoxGrid.tsx                    |   2 +-
 src/components/Breadcrumbs.tsx                |   2 +-
 src/components/BugBountyCards.tsx             |   2 +-
 src/components/BugBountyPoints.tsx            |   8 +-
 src/components/ButtonDropdown.tsx             |   2 +-
 src/components/ButtonLink.tsx                 |   2 +-
 src/components/CallToContribute.tsx           |   2 +-
 src/components/Callout.tsx                    |   2 +-
 src/components/CalloutBanner.tsx              |   2 +-
 src/components/Card.tsx                       |   2 +-
 src/components/CardList.tsx                   |   2 +-
 src/components/Checkbox.tsx                   |   6 +-
 src/components/CodeModal.tsx                  |   2 +-
 src/components/Codeblock.tsx                  |   9 +-
 src/components/Contributors.tsx               |   2 +-
 src/components/DataProductCard.tsx            |   2 +-
 src/components/DismissibleCard.tsx            |   2 +-
 src/components/DocLink.tsx                    |   3 +-
 src/components/DocsNav.tsx                    |   2 +-
 src/components/Emoji.tsx                      |   2 +-
 src/components/EnergyConsumptionChart.tsx     |   4 +-
 src/components/EthExchanges.js                |   2 +-
 src/components/EthPriceCard.tsx               |   2 +-
 src/components/EthVideo.tsx                   |   8 +-
 src/components/EventCard.tsx                  |   2 +-
 src/components/ExpandableCard.tsx             |   2 +-
 src/components/ExpandableInfo.tsx             |   2 +-
 src/components/FeedbackCard.tsx               |   2 +-
 src/components/FeedbackWidget.tsx             |   2 +-
 src/components/FileContributors.tsx           |  19 +-
 .../FindWallet/WalletFilterSidebar.tsx        |   2 +-
 .../FindWallet/WalletPersonasSidebar.tsx      |   9 +-
 src/components/FindWallet/WalletTable.tsx     |   2 +-
 src/components/Footer.tsx                     |   2 +-
 src/components/GhostCard.tsx                  |   2 +-
 src/components/GitStars.tsx                   |   2 +-
 src/components/GlobalStyle.tsx                | 173 +++++++++++
 src/components/HorizontalCard.tsx             |   2 +-
 src/components/Icon.tsx                       |   2 +-
 src/components/ImageCard.tsx                  |   2 +-
 src/components/InfoBanner.tsx                 |   2 +-
 src/components/Layer2/Layer2Onboard.tsx       |   2 +-
 src/components/Layer2ProductCard.tsx          |   2 +-
 src/components/Layout.tsx                     |   7 +-
 src/components/Leaderboard.tsx                |   2 +-
 src/components/Link.tsx                       |   2 +-
 src/components/Logo.tsx                       |   6 +-
 src/components/MarkdownTable.tsx              |   2 +-
 src/components/MatomoOptOut.tsx               |   2 +-
 src/components/MeetupList.tsx                 |   2 +-
 src/components/MergeArticleList.tsx           |   2 +-
 src/components/MergeInfographic.tsx           |   2 +-
 src/components/Modal.tsx                      |   2 +-
 src/components/Morpher.tsx                    |   2 +-
 src/components/NakedButton.tsx                |   2 +-
 src/components/Nav/Dropdown.tsx               |   2 +-
 src/components/Nav/Menu.tsx                   |   2 +-
 src/components/Nav/Mobile.tsx                 |   2 +-
 src/components/Nav/index.tsx                  |   2 +-
 src/components/OrderedList.tsx                |   2 +-
 src/components/PageHero.tsx                   |   2 +-
 src/components/Pill.tsx                       |   2 +-
 src/components/PreMergeBanner.tsx             |   2 +-
 src/components/ProductCard.tsx                |   2 +-
 src/components/ProductList.tsx                |   2 +-
 src/components/ReleaseBanner.tsx              |   2 +-
 src/components/Roadmap.tsx                    |   2 +-
 src/components/RollupProductDevDoc.tsx        |   2 +-
 src/components/Search/Input.tsx               |   2 +-
 src/components/Search/index.tsx               |   2 +-
 src/components/SectionNav.tsx                 |   2 +-
 src/components/SelectableCard.js              |   2 +-
 src/components/ShardChainsList.tsx            |   2 +-
 src/components/SharedStyledComponents.tsx     |   2 +-
 src/components/SideNav.tsx                    |   2 +-
 src/components/SideNavMobile.tsx              |   2 +-
 src/components/SimpleTable.tsx                |   2 +-
 src/components/SkipLink.tsx                   |   2 +-
 src/components/Slider.tsx                     |   3 +-
 src/components/SocialListItem.tsx             |   2 +-
 src/components/StablecoinAccordion.tsx        |   2 +-
 src/components/StablecoinBoxGrid.tsx          |   2 +-
 .../Staking/StakingCommunityCallout.tsx       |   2 +-
 src/components/Staking/StakingComparison.tsx  |   7 +-
 .../Staking/StakingConsiderations.tsx         |   2 +-
 src/components/Staking/StakingGuides.tsx      |   2 +-
 src/components/Staking/StakingHierarchy.tsx   |   2 +-
 .../Staking/StakingHomeTableOfContents.tsx    |   2 +-
 .../Staking/StakingHowSoloWorks.tsx           |   2 +-
 .../Staking/StakingLaunchpadWidget.tsx        |   2 +-
 .../Staking/StakingProductsCardGrid.tsx       |   7 +-
 src/components/Staking/StakingStatsBox.tsx    |   2 +-
 src/components/StatLoadingMessage.tsx         |   2 +-
 src/components/StatsBoxGrid.tsx               |   2 +-
 src/components/TableOfContents.tsx            |   2 +-
 src/components/Tabs.tsx                       |   2 +-
 src/components/Tag.tsx                        |   2 +-
 src/components/TitleCardList.tsx              |   2 +-
 src/components/Tooltip.tsx                    |   2 +-
 src/components/TranslationBanner.tsx          |   2 +-
 src/components/TranslationBannerLegal.tsx     |   2 +-
 src/components/TranslationLeaderboard.tsx     |   2 +-
 src/components/TranslationsInProgress.tsx     |   2 +-
 src/components/Trilemma.tsx                   |   2 +-
 src/components/TutorialMetadata.tsx           |   2 +-
 src/components/TutorialTags.tsx               |   2 +-
 src/components/UpcomingEventsList.tsx         |   2 +-
 src/components/UpgradeArticles.tsx            |   2 +-
 src/components/UpgradeBannerNotification.tsx  |   2 +-
 src/components/UpgradeStatus.tsx              |   2 +-
 src/components/UpgradeTableOfContents.tsx     |   2 +-
 src/components/VisuallyHidden.tsx             |   2 +-
 src/components/YouTube.tsx                    |   2 +-
 src/pages-conditional/dapps.tsx               |   2 +-
 src/pages-conditional/eth.tsx                 |   2 +-
 src/pages-conditional/wallets.tsx             |   2 +-
 src/pages-conditional/what-is-ethereum.tsx    |   3 +-
 src/pages/404.tsx                             |   2 +-
 src/pages/assets.tsx                          |   8 +-
 src/pages/bug-bounty.tsx                      |   8 +-
 src/pages/community.tsx                       |   2 +-
 .../translation-program/acknowledgements.tsx  |   7 +-
 .../translation-program/contributors.tsx      |   2 +-
 src/pages/developers/index.tsx                |   2 +-
 src/pages/developers/learning-tools.tsx       |   2 +-
 src/pages/developers/local-environment.tsx    |   2 +-
 src/pages/developers/tutorials.tsx            |   2 +-
 src/pages/get-eth.tsx                         |   2 +-
 src/pages/index.tsx                           |   2 +-
 src/pages/languages.tsx                       |   2 +-
 src/pages/layer-2.js                          |   2 +-
 src/pages/learn/index.tsx                     |   2 +-
 src/pages/run-a-node.js                       |   2 +-
 src/pages/stablecoins.js                      |   2 +-
 src/pages/staking/deposit-contract.tsx        |   2 +-
 src/pages/staking/index.tsx                   |   2 +-
 src/pages/studio.tsx                          |   2 +-
 src/pages/upgrades/get-involved/index.tsx     |   8 +-
 src/pages/upgrades/index.js                   |   2 +-
 src/pages/upgrades/vision.js                  |   2 +-
 src/pages/wallets/find-wallet.tsx             |   2 +-
 src/styled.d.ts                               |   6 +-
 src/templates/docs.tsx                        |   2 +-
 src/templates/staking.tsx                     |   2 +-
 src/templates/static.tsx                      |   2 +-
 src/templates/tutorial.tsx                    |   2 +-
 src/templates/upgrade.tsx                     |   2 +-
 src/templates/use-cases.tsx                   |   2 +-
 src/theme.ts                                  | 219 +------------
 yarn.lock                                     | 289 ++++++++++++------
 160 files changed, 583 insertions(+), 518 deletions(-)
 create mode 100644 src/components/GlobalStyle.tsx

diff --git a/docs/best-practices.md b/docs/best-practices.md
index 560704e6d70..55bc8560500 100644
--- a/docs/best-practices.md
+++ b/docs/best-practices.md
@@ -111,7 +111,7 @@ export default ComponentName
   ```tsx
   // Example of styling syntax using styled-components
 
-  import styled from "styled-components"
+  import styled from "@emotion/styled"
 
   const GenericButton = styled.div`
     width: 200px;
@@ -135,7 +135,7 @@ export default ComponentName
   ```tsx
   // Example of theme.ts usage
 
-  import styled from "styled-components"
+  import styled from "@emotion/styled"
 
   const Container = styled.div`
     background: ${(props) => props.theme.colors.background};
diff --git a/gatsby-config.ts b/gatsby-config.ts
index df51dfec412..8e3a913ee74 100644
--- a/gatsby-config.ts
+++ b/gatsby-config.ts
@@ -185,7 +185,7 @@ const config: GatsbyConfig = {
       },
     },
     // CSS in JS
-    `gatsby-plugin-styled-components`,
+    `gatsby-plugin-emotion`,
     // Source assets
     {
       resolve: `gatsby-source-filesystem`,
diff --git a/package.json b/package.json
index b94493f8871..39ba1674e60 100644
--- a/package.json
+++ b/package.json
@@ -9,13 +9,14 @@
   "private": false,
   "dependencies": {
     "@apollo/client": "^3.3.13",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@formatjs/intl-locale": "^2.4.14",
     "@formatjs/intl-numberformat": "^6.1.4",
     "@mdx-js/mdx": "^1.6.5",
     "@mdx-js/react": "^1.6.5",
     "algoliasearch": "^4.3.0",
     "axios": "^0.21.2",
-    "babel-plugin-styled-components": "^1.10.7",
     "browser-lang": "^0.1.0",
     "browserslist": "^4.21.0",
     "clipboard": "^2.0.6",
@@ -26,6 +27,7 @@
     "focus-trap-react": "^8.11.2",
     "framer-motion": "^4.1.3",
     "gatsby": "^4.15.0",
+    "gatsby-plugin-emotion": "^7.19.0",
     "gatsby-plugin-gatsby-cloud": "^4.3.0",
     "gatsby-plugin-image": "^2.0.0",
     "gatsby-plugin-manifest": "^4.10.1",
@@ -37,7 +39,6 @@
     "gatsby-plugin-react-svg": "^3.1.0",
     "gatsby-plugin-sharp": "^4.10.0",
     "gatsby-plugin-sitemap": "^5.0.0",
-    "gatsby-plugin-styled-components": "^5.0.0",
     "gatsby-remark-autolink-headers": "^5.0.0",
     "gatsby-remark-copy-linked-files": "^5.0.0",
     "gatsby-remark-images": "^6.0.0",
@@ -67,7 +68,6 @@
     "react-intl": "^3.12.1",
     "react-select": "^4.3.0",
     "recharts": "^2.1.9",
-    "styled-components": "^5.1.1",
     "styled-system": "^5.1.5",
     "unist-util-visit-parents": "^2.1.2"
   },
@@ -80,7 +80,6 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/react-instantsearch-dom": "^6.12.3",
-    "@types/styled-components": "^5.1.25",
     "@types/styled-system": "^5.1.15",
     "babel-preset-gatsby": "^2.14.0",
     "github-slugger": "^1.3.0",
diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
index af7313bbbea..b8c7b36338f 100644
--- a/src/components/Accordion.tsx
+++ b/src/components/Accordion.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components"
+import styled from "@emotion/styled"
 // TODO add motion animation
 // import { motion } from "framer-motion"
 import { FakeLink } from "./SharedStyledComponents"
diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index df1c95d7f33..11e85d2aec1 100644
--- a/src/components/ActionCard.tsx
+++ b/src/components/ActionCard.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import Link from "./Link"
diff --git a/src/components/AdoptionChart.tsx b/src/components/AdoptionChart.tsx
index b15b228cc12..b383d988a86 100644
--- a/src/components/AdoptionChart.tsx
+++ b/src/components/AdoptionChart.tsx
@@ -1,5 +1,6 @@
 import React from "react"
-import styled, { useTheme } from "styled-components"
+import { useTheme } from "@emotion/react"
+import styled from "@emotion/styled"
 
 const Container = styled.div`
   display: flex;
diff --git a/src/components/AssetDownload.tsx b/src/components/AssetDownload.tsx
index cd70401518a..1a477c88af0 100644
--- a/src/components/AssetDownload.tsx
+++ b/src/components/AssetDownload.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage, getSrc } from "gatsby-plugin-image"
 
 import Translation from "../components/Translation"
diff --git a/src/components/BannerGrid/index.tsx b/src/components/BannerGrid/index.tsx
index 9f070162204..574bc9c511c 100644
--- a/src/components/BannerGrid/index.tsx
+++ b/src/components/BannerGrid/index.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 export const Banner = styled.div`
   width: 100%;
diff --git a/src/components/BannerNotification.tsx b/src/components/BannerNotification.tsx
index 794894e108f..11f6503d62d 100644
--- a/src/components/BannerNotification.tsx
+++ b/src/components/BannerNotification.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 export interface IStyledBanner {
   shouldShow: boolean
diff --git a/src/components/BeaconChainActions.tsx b/src/components/BeaconChainActions.tsx
index d7710ee4f21..51cdca046ca 100644
--- a/src/components/BeaconChainActions.tsx
+++ b/src/components/BeaconChainActions.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 import { getImage } from "gatsby-plugin-image"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 
 import { translateMessageId } from "../utils/translations"
diff --git a/src/components/BoxGrid.tsx b/src/components/BoxGrid.tsx
index 8c8bb329ecc..a64ec7663ed 100644
--- a/src/components/BoxGrid.tsx
+++ b/src/components/BoxGrid.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Emoji from "./Emoji"
 
 export interface IBoxItem {
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index f2b4b4dabf6..607a4bdfe6d 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 
 import Link from "./Link"
diff --git a/src/components/BugBountyCards.tsx b/src/components/BugBountyCards.tsx
index b084c10fd9c..50daca7cdb0 100644
--- a/src/components/BugBountyCards.tsx
+++ b/src/components/BugBountyCards.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { TranslationKey } from "../utils/translations"
 import ButtonLink from "./ButtonLink"
 
diff --git a/src/components/BugBountyPoints.tsx b/src/components/BugBountyPoints.tsx
index 490492e255e..19d12668418 100644
--- a/src/components/BugBountyPoints.tsx
+++ b/src/components/BugBountyPoints.tsx
@@ -1,8 +1,8 @@
 import React, { useContext, useState, useEffect } from "react"
-import { ThemeContext } from "styled-components"
+import { useTheme } from "@emotion/react"
 import { useStaticQuery, graphql } from "gatsby"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import axios from "axios"
 
 import Emoji from "./Emoji"
@@ -103,8 +103,8 @@ const BugBountyPoints: React.FC<IProps> = () => {
     currentDAIPriceUSD: 1,
     hasError: false,
   })
-  const themeContext = useContext(ThemeContext)
-  const isDarkTheme = themeContext.isDark
+  const theme = useTheme()
+  const isDarkTheme = theme.isDark
 
   useEffect(() => {
     axios
diff --git a/src/components/ButtonDropdown.tsx b/src/components/ButtonDropdown.tsx
index 957fee6cc5f..803caa62705 100644
--- a/src/components/ButtonDropdown.tsx
+++ b/src/components/ButtonDropdown.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, { useState, createRef } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import { motion } from "framer-motion"
 
diff --git a/src/components/ButtonLink.tsx b/src/components/ButtonLink.tsx
index b5cd8ac16c3..d852bff3bfd 100644
--- a/src/components/ButtonLink.tsx
+++ b/src/components/ButtonLink.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { margin, MarginProps } from "styled-system"
 
 import { scrollIntoView } from "../utils/scrollIntoView"
diff --git a/src/components/CallToContribute.tsx b/src/components/CallToContribute.tsx
index 5acf63c4f4e..c22f9ad8e33 100644
--- a/src/components/CallToContribute.tsx
+++ b/src/components/CallToContribute.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Link from "./Link"
 import ButtonLink from "./ButtonLink"
 import Icon from "./Icon"
diff --git a/src/components/Callout.tsx b/src/components/Callout.tsx
index 1831d1cd56d..c693df91968 100644
--- a/src/components/Callout.tsx
+++ b/src/components/Callout.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 import Translation from "./Translation"
 import { TranslationKey } from "../utils/translations"
diff --git a/src/components/CalloutBanner.tsx b/src/components/CalloutBanner.tsx
index 45b99715c87..25cac746bb5 100644
--- a/src/components/CalloutBanner.tsx
+++ b/src/components/CalloutBanner.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import Translation from "./Translation"
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 706d6f56b96..bba088be74c 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Emoji from "./Emoji"
 
 const StyledCard = styled.div`
diff --git a/src/components/CardList.tsx b/src/components/CardList.tsx
index 7d3e5243841..e9b30893093 100644
--- a/src/components/CardList.tsx
+++ b/src/components/CardList.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import Link from "./Link"
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index fa11d530c85..07a63007991 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,12 +1,12 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 const CheckboxContainer = styled.div`
   display: inline-block;
   vertical-align: middle;
 `
 
-const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
+const HiddenCheckbox = styled.input`
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -76,7 +76,7 @@ const Checkbox: React.FC<IProps> = ({
   }
   return (
     <CheckboxContainer className={className} onClick={handleClick}>
-      <HiddenCheckbox checked={checked} readOnly {...rest} />
+      <HiddenCheckbox type="checkbox" checked={checked} readOnly {...rest} />
       <StyledCheckbox
         aria-hidden="true"
         checked={checked}
diff --git a/src/components/CodeModal.tsx b/src/components/CodeModal.tsx
index 84d316dfc59..271b680c63c 100644
--- a/src/components/CodeModal.tsx
+++ b/src/components/CodeModal.tsx
@@ -1,5 +1,5 @@
 import React, { useRef } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { motion } from "framer-motion"
 
 import Icon from "./Icon"
diff --git a/src/components/Codeblock.tsx b/src/components/Codeblock.tsx
index 9cf04eb25c8..8cd02db8d26 100644
--- a/src/components/Codeblock.tsx
+++ b/src/components/Codeblock.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useContext } from "react"
-import styled, { ThemeContext } from "styled-components"
+import styled from "@emotion/styled"
+import { useTheme } from "@emotion/react"
 import Highlight, {
   defaultProps,
   Language,
@@ -283,8 +284,8 @@ const Codeblock: React.FC<IProps> = ({
   )
   const shouldShowLineNumbers = language !== "bash"
   const totalLines = codeText.split("\n").length
-  const themeContext = useContext(ThemeContext)
-  const theme = themeContext.isDark ? codeTheme.dark : codeTheme.light
+  const theme = useTheme()
+  const selectedTheme = theme.isDark ? codeTheme.dark : codeTheme.light
   return (
     <Container>
       <HightlightContainer
@@ -295,7 +296,7 @@ const Codeblock: React.FC<IProps> = ({
           {...defaultProps}
           code={codeText}
           language={language as Language}
-          theme={theme as PrismTheme}
+          theme={selectedTheme as PrismTheme}
         >
           {({ className, style, tokens, getLineProps, getTokenProps }) => (
             <StyledPre
diff --git a/src/components/Contributors.tsx b/src/components/Contributors.tsx
index 6c0576a0760..ca35703955b 100644
--- a/src/components/Contributors.tsx
+++ b/src/components/Contributors.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { shuffle } from "lodash"
 
 import ActionCard from "./ActionCard"
diff --git a/src/components/DataProductCard.tsx b/src/components/DataProductCard.tsx
index e81985128c1..c60a63113ab 100644
--- a/src/components/DataProductCard.tsx
+++ b/src/components/DataProductCard.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import Link from "./Link"
diff --git a/src/components/DismissibleCard.tsx b/src/components/DismissibleCard.tsx
index d4e3412e529..ed582960435 100644
--- a/src/components/DismissibleCard.tsx
+++ b/src/components/DismissibleCard.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import Icon from "./Icon"
 
diff --git a/src/components/DocLink.tsx b/src/components/DocLink.tsx
index 0f6fd33b59f..81e094ea24a 100644
--- a/src/components/DocLink.tsx
+++ b/src/components/DocLink.tsx
@@ -1,5 +1,6 @@
 import React from "react"
-import styled, { useTheme } from "styled-components"
+import { useTheme } from "@emotion/react"
+import styled from "@emotion/styled"
 import Icon from "./Icon"
 import Link from "./Link"
 import Emoji from "./Emoji"
diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx
index 2ea12866a80..26c39ec5d44 100644
--- a/src/components/DocsNav.tsx
+++ b/src/components/DocsNav.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import Link from "./Link"
 import Emoji from "./Emoji"
diff --git a/src/components/Emoji.tsx b/src/components/Emoji.tsx
index c41037095e0..0ce387f8421 100644
--- a/src/components/Emoji.tsx
+++ b/src/components/Emoji.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Twemoji } from "react-emoji-render"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { margin, MarginProps } from "styled-system"
 
 export interface IProps extends MarginProps {
diff --git a/src/components/EnergyConsumptionChart.tsx b/src/components/EnergyConsumptionChart.tsx
index 2e3a05e1565..7a4beb095ba 100644
--- a/src/components/EnergyConsumptionChart.tsx
+++ b/src/components/EnergyConsumptionChart.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from "react"
-import styled, { useTheme } from "styled-components"
+import { useTheme } from "@emotion/react"
+import styled from "@emotion/styled"
 import {
   BarChart,
   Bar,
@@ -20,6 +21,7 @@ const Container = styled.div`
   border-radius: 0.3rem;
 `
 
+// @ts-ignore
 const StyledText = styled(Text)`
   font-size: 10px;
 
diff --git a/src/components/EthExchanges.js b/src/components/EthExchanges.js
index c81020936a2..c65e826cf88 100644
--- a/src/components/EthExchanges.js
+++ b/src/components/EthExchanges.js
@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { useStaticQuery, graphql } from "gatsby"
 import { getImage } from "gatsby-plugin-image"
 import { useIntl } from "react-intl"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import CardList from "./CardList"
 import Link from "./Link"
diff --git a/src/components/EthPriceCard.tsx b/src/components/EthPriceCard.tsx
index 2991699f7fa..e1f8e9a4164 100644
--- a/src/components/EthPriceCard.tsx
+++ b/src/components/EthPriceCard.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import axios from "axios"
 
 import Translation from "./Translation"
diff --git a/src/components/EthVideo.tsx b/src/components/EthVideo.tsx
index 193457bdf28..4d2e74c3f7b 100644
--- a/src/components/EthVideo.tsx
+++ b/src/components/EthVideo.tsx
@@ -1,5 +1,5 @@
-import React, { useContext } from "react"
-import { ThemeContext } from "styled-components"
+import React from "react"
+import { useTheme } from "@emotion/react"
 
 import darkVideo from "../assets/ethereum-hero-dark.mp4"
 import lightVideo from "../assets/ethereum-hero-light.mp4"
@@ -10,8 +10,8 @@ export interface IProps {
 }
 
 const EthVideo: React.FC<IProps> = ({ className, videoSrc }) => {
-  const themeContext = useContext(ThemeContext)
-  const isDarkTheme = themeContext.isDark
+  const theme = useTheme()
+  const isDarkTheme = theme.isDark
 
   const src = videoSrc ? videoSrc : isDarkTheme ? darkVideo : lightVideo
 
diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx
index 28667906ac0..461015e01ef 100644
--- a/src/components/EventCard.tsx
+++ b/src/components/EventCard.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Emoji from "./Emoji"
 import ButtonLink from "./ButtonLink"
 
diff --git a/src/components/ExpandableCard.tsx b/src/components/ExpandableCard.tsx
index c7906a9ab82..35c943c4c16 100644
--- a/src/components/ExpandableCard.tsx
+++ b/src/components/ExpandableCard.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, { ComponentType, SVGProps, useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { motion } from "framer-motion"
 
 // Components
diff --git a/src/components/ExpandableInfo.tsx b/src/components/ExpandableInfo.tsx
index 536164d127a..04655e24a12 100644
--- a/src/components/ExpandableInfo.tsx
+++ b/src/components/ExpandableInfo.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { motion } from "framer-motion"
 import { GatsbyImage } from "gatsby-plugin-image"
 
diff --git a/src/components/FeedbackCard.tsx b/src/components/FeedbackCard.tsx
index c4e9f271bd5..7f857f2f50f 100644
--- a/src/components/FeedbackCard.tsx
+++ b/src/components/FeedbackCard.tsx
@@ -1,6 +1,6 @@
 // Library imports
 import React, { ReactNode, useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 // Component imports
 import { ButtonPrimary, ButtonSecondary } from "./SharedStyledComponents"
 import Translation from "./Translation"
diff --git a/src/components/FeedbackWidget.tsx b/src/components/FeedbackWidget.tsx
index 6697af209d0..36ebc0fae66 100644
--- a/src/components/FeedbackWidget.tsx
+++ b/src/components/FeedbackWidget.tsx
@@ -1,7 +1,7 @@
 // Library imports
 import React, { useState, useEffect, useRef, useMemo } from "react"
 import { useIntl } from "react-intl"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import FocusTrap from "focus-trap-react"
 // Component imports
 import { ButtonPrimary } from "./SharedStyledComponents"
diff --git a/src/components/FileContributors.tsx b/src/components/FileContributors.tsx
index 6c1338d37f9..f9e2a18bd8b 100644
--- a/src/components/FileContributors.tsx
+++ b/src/components/FileContributors.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import { useIntl } from "react-intl"
-import styled, { css } from "styled-components"
+import { css, Theme } from "@emotion/react"
+import styled from "@emotion/styled"
 import { useQuery, gql } from "@apollo/client"
 
 import ButtonLink from "./ButtonLink"
@@ -12,10 +13,14 @@ import { ButtonSecondary } from "./SharedStyledComponents"
 import { getLocaleTimestamp } from "../utils/time"
 import { Lang } from "../utils/languages"
 
-const loadingStyles = css`
+const loadingStyles = (theme: Theme) => css`
   font-size: 0;
-  background: ${({ theme }) =>
-    `linear-gradient(-90deg, ${theme.colors.lightBorder} 0%, ${theme.colors.searchBackgroundEmpty} 50%, ${theme.colors.lightBorder} 100%)`};
+  background: linear-gradient(
+    -90deg,
+    ${theme.colors.lightBorder} 0%,
+    ${theme.colors.searchBackgroundEmpty} 50%,
+    ${theme.colors.lightBorder} 100%
+  );
   background-size: 400% 400%;
   animation: pulse 1.2s ease-in-out infinite;
 
@@ -100,7 +105,7 @@ const SkeletonAvatar = styled.div`
   width: 40px;
   margin-right: 0.5rem;
   border-radius: 50%;
-  ${loadingStyles}
+  ${({ theme }) => loadingStyles(theme)}
 `
 
 const Info = styled.div`
@@ -109,7 +114,7 @@ const Info = styled.div`
 `
 
 const SkeletonInfo = styled(Info)`
-  ${loadingStyles}
+  ${({ theme }) => loadingStyles(theme)}
   height: 40px;
   flex: 1;
   border-radius: 3px;
@@ -122,7 +127,7 @@ const ButtonContainer = styled.div`
 `
 
 const SkeletonButtonContainer = styled(ButtonContainer)`
-  ${loadingStyles}
+  ${({ theme }) => loadingStyles(theme)}
   width: 145px;
   border-radius: 3px;
   @media (max-width: ${(props) => props.theme.breakpoints.l}) {
diff --git a/src/components/FindWallet/WalletFilterSidebar.tsx b/src/components/FindWallet/WalletFilterSidebar.tsx
index b24826865c6..f075fc01e79 100644
--- a/src/components/FindWallet/WalletFilterSidebar.tsx
+++ b/src/components/FindWallet/WalletFilterSidebar.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 // Components
 import Checkbox from "../Checkbox"
diff --git a/src/components/FindWallet/WalletPersonasSidebar.tsx b/src/components/FindWallet/WalletPersonasSidebar.tsx
index ae69ded8b17..edb6f03e7d9 100644
--- a/src/components/FindWallet/WalletPersonasSidebar.tsx
+++ b/src/components/FindWallet/WalletPersonasSidebar.tsx
@@ -1,6 +1,7 @@
 // Libraries
-import React, { useContext } from "react"
-import styled, { ThemeContext } from "styled-components"
+import React from "react"
+import { useTheme } from "@emotion/react"
+import styled from "@emotion/styled"
 
 // Components
 import Icon from "../Icon"
@@ -299,7 +300,7 @@ const WalletPersonasSidebar = ({
   selectedPersona,
   setSelectedPersona,
 }) => {
-  const themeContext = useContext(ThemeContext)
+  const theme = useTheme()
   const personas: Personas[] = [
     {
       title: "New to crypto",
@@ -505,7 +506,7 @@ const WalletPersonasSidebar = ({
       {personas.map((persona, idx) => {
         return (
           <Persona
-            isDark={themeContext.isDark}
+            isDark={theme.isDark}
             selected={selectedPersona === idx}
             onClick={() => {
               if (idx === selectedPersona) {
diff --git a/src/components/FindWallet/WalletTable.tsx b/src/components/FindWallet/WalletTable.tsx
index 4314c414de2..ec51ed99698 100644
--- a/src/components/FindWallet/WalletTable.tsx
+++ b/src/components/FindWallet/WalletTable.tsx
@@ -1,7 +1,7 @@
 // Libraries
 import React, { useState } from "react"
 import { getImage, GatsbyImage } from "gatsby-plugin-image"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 // Components
 import ButtonLink from "../ButtonLink"
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 747ab419836..44168633701 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import { StaticQuery, graphql } from "gatsby"
 
diff --git a/src/components/GhostCard.tsx b/src/components/GhostCard.tsx
index ce50aac9461..21c0f1617ae 100644
--- a/src/components/GhostCard.tsx
+++ b/src/components/GhostCard.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 const Container = styled.div`
   position: relative;
diff --git a/src/components/GitStars.tsx b/src/components/GitStars.tsx
index 20ac57eaec7..753317561c8 100644
--- a/src/components/GitStars.tsx
+++ b/src/components/GitStars.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Emoji from "./Emoji"
 import Icon from "./Icon"
 import Link from "./Link"
diff --git a/src/components/GlobalStyle.tsx b/src/components/GlobalStyle.tsx
new file mode 100644
index 00000000000..6932e0878d0
--- /dev/null
+++ b/src/components/GlobalStyle.tsx
@@ -0,0 +1,173 @@
+import React from "react"
+import { Global, css, useTheme } from "@emotion/react"
+
+const GlobalStyle: React.FC = () => {
+  const theme = useTheme()
+
+  return (
+    <Global
+      styles={css`
+        body {
+          background-color: ${theme.colors.background};
+          color: ${theme.colors.text};
+        }
+        a {
+          color: ${theme.colors.primary};
+          text-decoration: underline;
+        }
+        mark {
+          background: ${theme.colors.markBackground};
+          box-shadow: inset 0 -2px 0 0 rgba(69, 142, 225, 0.8);
+        }
+
+        .anchor.before {
+          fill: ${theme.colors.text};
+        }
+
+        hr {
+          background: ${theme.colors.lightBorder};
+        }
+
+        /* Legacy styles from lists.styl */
+        ul {
+          font-size: 1rem;
+          line-height: 1.6;
+          font-weight: 400;
+          margin: 2rem 0 1rem;
+          padding: 0;
+          margin: 1em;
+          list-style-type: none;
+          list-style-image: none;
+        }
+
+        li {
+          padding-left: 0.5em;
+          margin-bottom: 0.5em;
+          p:first-of-type {
+            margin-top: 0;
+          }
+          p:last-of-type {
+            margin-bottom: 0;
+          }
+          &:before {
+            content: "\2022";
+            color: ${theme.colors.primary};
+            display: inline-block;
+            width: 1em;
+            margin-left: -1em;
+            position: absolute;
+          }
+        }
+
+        /* YouTube embeds */
+        iframe {
+          display: block;
+          max-width: 560px;
+          margin: 32px 0;
+        }
+
+        h1 {
+          font-size: 3rem;
+          line-height: 1.4;
+          margin: 2rem 0;
+          font-weight: 700;
+          scroll-margin-top: ${theme.variables.navHeight};
+          scroll-snap-margin: ${theme.variables.navHeight};
+          @media (max-width: ${theme.breakpoints.m}) {
+            font-size: 2.5rem;
+          }
+        }
+
+        h2 {
+          font-size: 2rem;
+          line-height: 1.4;
+          margin: 2rem 0;
+          margin-top: 3rem;
+          font-weight: 600;
+          scroll-margin-top: ${theme.variables.navHeight};
+          scroll-snap-margin: ${theme.variables.navHeight};
+          @media (max-width: ${theme.breakpoints.m}) {
+            font-size: 1.5rem;
+          }
+        }
+
+        h3 {
+          font-size: 1.5rem;
+          line-height: 1.4;
+          margin: 2rem 0;
+          margin-top: 2.5rem;
+          font-weight: 600;
+          scroll-margin-top: ${theme.variables.navHeight};
+          scroll-snap-margin: ${theme.variables.navHeight};
+          @media (max-width: ${theme.breakpoints.m}) {
+            font-size: 1.25rem;
+          }
+        }
+
+        h4 {
+          font-size: 1.25rem;
+          line-height: 1.4;
+          font-weight: 500;
+          margin: 2rem 0;
+          scroll-margin-top: ${theme.variables.navHeight};
+          scroll-snap-margin: ${theme.variables.navHeight};
+          @media (max-width: ${theme.breakpoints.m}) {
+            font-size: 1rem;
+          }
+        }
+
+        h5 {
+          font-size: 1rem;
+          line-height: 1.4;
+          font-weight: 450;
+          margin: 2rem 0;
+          scroll-margin-top: ${theme.variables.navHeight};
+          scroll-snap-margin: ${theme.variables.navHeight};
+        }
+
+        h6 {
+          font-size: 0.9rem;
+          line-height: 1.4;
+          font-weight: 400;
+          text-transform: uppercase;
+          margin: 2rem 0;
+          scroll-margin-top: ${theme.variables.navHeight};
+          scroll-snap-margin: ${theme.variables.navHeight};
+        }
+
+        /* Anchor tag styles */
+        /* Selected specifically for mdx rendered side icon link */
+        .header-anchor {
+          position: relative;
+          display: initial;
+          margin-left: -1.5em;
+          padding-right: 0.5rem;
+          font-size: 1rem;
+          vertical-align: middle;
+
+          svg {
+            fill: ${theme.colors.primary}};
+            visibility: hidden;
+          }
+        }
+
+        h1:hover,
+        h2:hover,
+        h3:hover,
+        h4:hover,
+        h5:hover,
+        h6:hover {
+          .header-anchor svg {
+            visibility: visible;
+          }
+        }
+
+        .header-anchor:focus svg {
+          visibility: visible;
+        }
+      `}
+    />
+  )
+}
+
+export default GlobalStyle
diff --git a/src/components/HorizontalCard.tsx b/src/components/HorizontalCard.tsx
index 84c1900ae86..d9a3610486c 100644
--- a/src/components/HorizontalCard.tsx
+++ b/src/components/HorizontalCard.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Emoji from "./Emoji"
 
 const StyledCard = styled.div`
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index 44b16579a8e..20e695ff9b9 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { IconContext } from "react-icons"
 import {
   FaGithub,
diff --git a/src/components/ImageCard.tsx b/src/components/ImageCard.tsx
index de1ac8f50c1..eb97defac11 100644
--- a/src/components/ImageCard.tsx
+++ b/src/components/ImageCard.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 const StyledCard = styled.div`
diff --git a/src/components/InfoBanner.tsx b/src/components/InfoBanner.tsx
index c7c52a6a201..d0d9fe1dddb 100644
--- a/src/components/InfoBanner.tsx
+++ b/src/components/InfoBanner.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Emoji from "./Emoji"
 import { margin } from "styled-system"
 
diff --git a/src/components/Layer2/Layer2Onboard.tsx b/src/components/Layer2/Layer2Onboard.tsx
index a1356827c8c..49b2019eb06 100644
--- a/src/components/Layer2/Layer2Onboard.tsx
+++ b/src/components/Layer2/Layer2Onboard.tsx
@@ -1,7 +1,7 @@
 // Libraries
 import { GatsbyImage } from "gatsby-plugin-image"
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 
 // Components
diff --git a/src/components/Layer2ProductCard.tsx b/src/components/Layer2ProductCard.tsx
index aa46a443cb4..f21bbb0d918 100644
--- a/src/components/Layer2ProductCard.tsx
+++ b/src/components/Layer2ProductCard.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 import { useIntl } from "react-intl"
 
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 6b5e25cddf1..7a42fa2af56 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from "react"
 import { ApolloProvider } from "@apollo/client"
-import { ThemeProvider } from "styled-components"
-import styled from "styled-components"
+import { ThemeProvider } from "@emotion/react"
+import styled from "@emotion/styled"
 import { IntlProvider } from "react-intl"
 import { LocaleProvider } from "gatsby-theme-i18n"
 
-import { lightTheme, darkTheme, GlobalStyle } from "../theme"
+import { lightTheme, darkTheme } from "../theme"
 
 import Footer from "./Footer"
 import VisuallyHidden from "./VisuallyHidden"
@@ -29,6 +29,7 @@ import type { Context } from "../types"
 
 import "../styles/layout.css"
 import client from "../apollo"
+import GlobalStyle from "./GlobalStyle"
 
 const ContentContainer = styled.div`
   position: relative;
diff --git a/src/components/Leaderboard.tsx b/src/components/Leaderboard.tsx
index 72c08c9c6ea..0583c565096 100644
--- a/src/components/Leaderboard.tsx
+++ b/src/components/Leaderboard.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Emoji from "./Emoji"
 import Link from "./Link"
 
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index bc933137fc1..314e7ab1711 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -3,7 +3,7 @@ import { Link as GatsbyLink, navigate as gatsbyNavigate } from "gatsby"
 import { LocalizedLink as IntlLink } from "gatsby-theme-i18n"
 import { NavigateOptions } from "@reach/router"
 import { IntlShape } from "react-intl"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import Icon from "./Icon"
 
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index 29e4d2e5a6c..defccda7f5f 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from "react"
 import { useStaticQuery, graphql } from "gatsby"
-import { ThemeContext } from "styled-components"
+import { useTheme } from "@emotion/react"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { useIntl } from "react-intl"
 import { translateMessageId } from "../utils/translations"
@@ -9,8 +9,8 @@ export interface IProps {}
 
 const Logo: React.FC<IProps> = () => {
   const intl = useIntl()
-  const themeContext = useContext(ThemeContext)
-  const isDarkTheme = themeContext.isDark
+  const theme = useTheme()
+  const isDarkTheme = theme.isDark
   const data = useStaticQuery(graphql`
     {
       dark: file(relativePath: { eq: "ef-logo.png" }) {
diff --git a/src/components/MarkdownTable.tsx b/src/components/MarkdownTable.tsx
index bc034f4fe90..81524d68852 100644
--- a/src/components/MarkdownTable.tsx
+++ b/src/components/MarkdownTable.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 const TableContainer = styled.div`
   overflow-x: auto;
diff --git a/src/components/MatomoOptOut.tsx b/src/components/MatomoOptOut.tsx
index 2eef060f81a..dd863446b81 100644
--- a/src/components/MatomoOptOut.tsx
+++ b/src/components/MatomoOptOut.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { MATOMO_LS_KEY } from "../utils/matomo"
 
 const Container = styled.div`
diff --git a/src/components/MeetupList.tsx b/src/components/MeetupList.tsx
index 0213996f4dd..bfb627d663c 100644
--- a/src/components/MeetupList.tsx
+++ b/src/components/MeetupList.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { sortBy } from "lodash"
 
 // Components
diff --git a/src/components/MergeArticleList.tsx b/src/components/MergeArticleList.tsx
index cf51e9df353..ad11ea4a1ad 100644
--- a/src/components/MergeArticleList.tsx
+++ b/src/components/MergeArticleList.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import CardList, { CardListItem } from "./CardList"
 
 const Container = styled.div`
diff --git a/src/components/MergeInfographic.tsx b/src/components/MergeInfographic.tsx
index b6a138df035..f6deb1c1ae1 100644
--- a/src/components/MergeInfographic.tsx
+++ b/src/components/MergeInfographic.tsx
@@ -1,6 +1,6 @@
 // Library imports
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 // Component imports
 import Translation from "./Translation"
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 4d810bbddb4..76e13585c1c 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,5 +1,5 @@
 import React, { useRef } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { motion } from "framer-motion"
 
 import Icon from "./Icon"
diff --git a/src/components/Morpher.tsx b/src/components/Morpher.tsx
index 9698d4542d8..bd44a807d95 100644
--- a/src/components/Morpher.tsx
+++ b/src/components/Morpher.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Link from "./Link"
 
 const NavLink = styled(Link)`
diff --git a/src/components/NakedButton.tsx b/src/components/NakedButton.tsx
index 8d464d3a3c0..cdce6cda141 100644
--- a/src/components/NakedButton.tsx
+++ b/src/components/NakedButton.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 const NakedButton = styled.button`
   appearance: none;
diff --git a/src/components/Nav/Dropdown.tsx b/src/components/Nav/Dropdown.tsx
index 5c81606d484..a7dbe0f50d8 100644
--- a/src/components/Nav/Dropdown.tsx
+++ b/src/components/Nav/Dropdown.tsx
@@ -1,5 +1,5 @@
 import React, { useState, createRef, useContext } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import { motion } from "framer-motion"
 
diff --git a/src/components/Nav/Menu.tsx b/src/components/Nav/Menu.tsx
index 48ad4114666..b6ca6a5058d 100644
--- a/src/components/Nav/Menu.tsx
+++ b/src/components/Nav/Menu.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 
 import NavDropdown from "./Dropdown"
diff --git a/src/components/Nav/Mobile.tsx b/src/components/Nav/Mobile.tsx
index 61074b4fdba..aae66fcc995 100644
--- a/src/components/Nav/Mobile.tsx
+++ b/src/components/Nav/Mobile.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import { motion } from "framer-motion"
 
diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx
index 1bbdaf3361b..a5700191369 100644
--- a/src/components/Nav/index.tsx
+++ b/src/components/Nav/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { cloneDeep } from "lodash"
 import { useIntl } from "react-intl"
 
diff --git a/src/components/OrderedList.tsx b/src/components/OrderedList.tsx
index 049fc157b7f..05f7d2a3ccb 100644
--- a/src/components/OrderedList.tsx
+++ b/src/components/OrderedList.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 export interface IProps {
   listData: Array<React.ReactNode>
diff --git a/src/components/PageHero.tsx b/src/components/PageHero.tsx
index 43efcb6826b..110ad79f66b 100644
--- a/src/components/PageHero.tsx
+++ b/src/components/PageHero.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 import ButtonLink, { IProps as IButtonLinkProps } from "./ButtonLink"
 import { Content } from "./SharedStyledComponents"
diff --git a/src/components/Pill.tsx b/src/components/Pill.tsx
index 68ecc23fe6f..d6524b40f62 100644
--- a/src/components/Pill.tsx
+++ b/src/components/Pill.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 const Primary = styled.div<{ color?: string }>`
   display: flex;
diff --git a/src/components/PreMergeBanner.tsx b/src/components/PreMergeBanner.tsx
index 41afc6b0021..bcbccaef107 100644
--- a/src/components/PreMergeBanner.tsx
+++ b/src/components/PreMergeBanner.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import BannerNotification from "./BannerNotification"
 import Link from "./Link"
 import Translation from "./Translation"
diff --git a/src/components/ProductCard.tsx b/src/components/ProductCard.tsx
index 4c06841f84b..3da46626682 100644
--- a/src/components/ProductCard.tsx
+++ b/src/components/ProductCard.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 import { useQuery, gql } from "@apollo/client"
 
diff --git a/src/components/ProductList.tsx b/src/components/ProductList.tsx
index 8ad532bc395..a25696406d4 100644
--- a/src/components/ProductList.tsx
+++ b/src/components/ProductList.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import ButtonLink from "./ButtonLink"
diff --git a/src/components/ReleaseBanner.tsx b/src/components/ReleaseBanner.tsx
index d36be1dae93..ba313fc1b7d 100644
--- a/src/components/ReleaseBanner.tsx
+++ b/src/components/ReleaseBanner.tsx
@@ -1,7 +1,7 @@
 // Libraries
 import React, { useEffect, useState } from "react"
 import Countdown, { zeroPad } from "react-countdown"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 // Components
 import BannerNotification from "./BannerNotification"
diff --git a/src/components/Roadmap.tsx b/src/components/Roadmap.tsx
index 2762de73657..4a3f109b01a 100644
--- a/src/components/Roadmap.tsx
+++ b/src/components/Roadmap.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react"
 import { useIntl } from "react-intl"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import axios from "axios"
 
 import Translation from "./Translation"
diff --git a/src/components/RollupProductDevDoc.tsx b/src/components/RollupProductDevDoc.tsx
index 8bb2e0ebcd8..15443a78db5 100644
--- a/src/components/RollupProductDevDoc.tsx
+++ b/src/components/RollupProductDevDoc.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 // Components
 import Link from "./Link"
diff --git a/src/components/Search/Input.tsx b/src/components/Search/Input.tsx
index 1abbe832409..dc9129a7a17 100644
--- a/src/components/Search/Input.tsx
+++ b/src/components/Search/Input.tsx
@@ -1,6 +1,6 @@
 import React, { ChangeEvent, FormEvent } from "react"
 import { useIntl } from "react-intl"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { connectSearchBox } from "react-instantsearch-dom"
 
 import Icon from "../Icon"
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 63df079556d..8b849587425 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -13,7 +13,7 @@ import {
 import type { StateResultsProvided } from "react-instantsearch-core"
 import algoliasearch from "algoliasearch/lite"
 import { Hit } from "@algolia/client-search"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import Input from "./Input"
 import Link from "../Link"
diff --git a/src/components/SectionNav.tsx b/src/components/SectionNav.tsx
index 654b0c8cd88..f1423343365 100644
--- a/src/components/SectionNav.tsx
+++ b/src/components/SectionNav.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import Emoji from "./Emoji"
 import Translation from "./Translation"
diff --git a/src/components/SelectableCard.js b/src/components/SelectableCard.js
index 3da7d5c04a5..78ac215d2c6 100644
--- a/src/components/SelectableCard.js
+++ b/src/components/SelectableCard.js
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Emoji from "../components/Emoji"
 
 import Checkbox from "./Checkbox"
diff --git a/src/components/ShardChainsList.tsx b/src/components/ShardChainsList.tsx
index d943ca398b9..beef92b05e2 100644
--- a/src/components/ShardChainsList.tsx
+++ b/src/components/ShardChainsList.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import CardList, { CardListItem } from "./CardList"
 import { useIntl } from "react-intl"
 
diff --git a/src/components/SharedStyledComponents.tsx b/src/components/SharedStyledComponents.tsx
index f13ccc990f8..0bd0d746305 100644
--- a/src/components/SharedStyledComponents.tsx
+++ b/src/components/SharedStyledComponents.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { margin, MarginProps } from "styled-system"
 import Select from "react-select"
 
diff --git a/src/components/SideNav.tsx b/src/components/SideNav.tsx
index afea2c47042..53d724156f7 100644
--- a/src/components/SideNav.tsx
+++ b/src/components/SideNav.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { motion } from "framer-motion"
 import { useIntl } from "react-intl"
 
diff --git a/src/components/SideNavMobile.tsx b/src/components/SideNavMobile.tsx
index 42ac1a3d1f5..46e889c5cfc 100644
--- a/src/components/SideNavMobile.tsx
+++ b/src/components/SideNavMobile.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { motion, AnimatePresence } from "framer-motion"
 
 import Icon from "./Icon"
diff --git a/src/components/SimpleTable.tsx b/src/components/SimpleTable.tsx
index c273ec9de67..54ef5267a3f 100644
--- a/src/components/SimpleTable.tsx
+++ b/src/components/SimpleTable.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import Link from "./Link"
 import Translation from "./Translation"
diff --git a/src/components/SkipLink.tsx b/src/components/SkipLink.tsx
index 134557b289e..06ed104af78 100644
--- a/src/components/SkipLink.tsx
+++ b/src/components/SkipLink.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Translation from "./Translation"
 
 const Div = styled.div`
diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
index 9b185a5ad57..93efac2aaca 100644
--- a/src/components/Slider.tsx
+++ b/src/components/Slider.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react"
-import styled, { useTheme } from "styled-components"
+import { useTheme } from "@emotion/react"
+import styled from "@emotion/styled"
 import useEmblaCarousel from "embla-carousel-react"
 
 import Icon from "./Icon"
diff --git a/src/components/SocialListItem.tsx b/src/components/SocialListItem.tsx
index 3335a80fe89..4e0bb4cfc33 100644
--- a/src/components/SocialListItem.tsx
+++ b/src/components/SocialListItem.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 // Components
 import Icon from "./Icon"
diff --git a/src/components/StablecoinAccordion.tsx b/src/components/StablecoinAccordion.tsx
index a2f2d340ae7..c8ba50e5601 100644
--- a/src/components/StablecoinAccordion.tsx
+++ b/src/components/StablecoinAccordion.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { useStaticQuery, graphql } from "gatsby"
 import { getImage } from "gatsby-plugin-image"
 import { useIntl } from "react-intl"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 // TODO add motion animation
 // import { motion } from "framer-motion"
 import ButtonLink from "./ButtonLink"
diff --git a/src/components/StablecoinBoxGrid.tsx b/src/components/StablecoinBoxGrid.tsx
index e40c91e46b4..4ae948b4e52 100644
--- a/src/components/StablecoinBoxGrid.tsx
+++ b/src/components/StablecoinBoxGrid.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import Link, { navigate } from "./Link"
 import Emoji from "./Emoji"
diff --git a/src/components/Staking/StakingCommunityCallout.tsx b/src/components/Staking/StakingCommunityCallout.tsx
index 68ffcffc753..04bf321134e 100644
--- a/src/components/Staking/StakingCommunityCallout.tsx
+++ b/src/components/Staking/StakingCommunityCallout.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { useIntl } from "react-intl"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { graphql, useStaticQuery } from "gatsby"
 import { getImage } from "gatsby-plugin-image"
 
diff --git a/src/components/Staking/StakingComparison.tsx b/src/components/Staking/StakingComparison.tsx
index 011475e4b9c..d3493ee74bf 100644
--- a/src/components/Staking/StakingComparison.tsx
+++ b/src/components/Staking/StakingComparison.tsx
@@ -1,5 +1,6 @@
 import React, { useContext } from "react"
-import styled, { ThemeContext } from "styled-components"
+import styled from "@emotion/styled"
+import { useTheme } from "@emotion/react"
 
 import Link from "../Link"
 import Translation from "../Translation"
@@ -82,8 +83,8 @@ export interface IProps {
 }
 
 const StakingComparison: React.FC<IProps> = ({ page, className }) => {
-  const themeContext = useContext(ThemeContext)
-  const { stakingGold, stakingGreen, stakingBlue } = themeContext.colors
+  const theme = useTheme()
+  const { stakingGold, stakingGreen, stakingBlue } = theme.colors
 
   const solo: DataType = {
     title: "page-staking-dropdown-solo",
diff --git a/src/components/Staking/StakingConsiderations.tsx b/src/components/Staking/StakingConsiderations.tsx
index 4ee8f3d6388..72dfea0a574 100644
--- a/src/components/Staking/StakingConsiderations.tsx
+++ b/src/components/Staking/StakingConsiderations.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 // SVG imports
 import GreenCheck from "../../assets/staking/green-check-product-glyph.svg"
 import Caution from "../../assets/staking/caution-product-glyph.svg"
diff --git a/src/components/Staking/StakingGuides.tsx b/src/components/Staking/StakingGuides.tsx
index 782214bcb80..486874a6168 100644
--- a/src/components/Staking/StakingGuides.tsx
+++ b/src/components/Staking/StakingGuides.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 // Components
 import CardList from "../CardList"
diff --git a/src/components/Staking/StakingHierarchy.tsx b/src/components/Staking/StakingHierarchy.tsx
index 346218fb9fc..df86fa3572c 100644
--- a/src/components/Staking/StakingHierarchy.tsx
+++ b/src/components/Staking/StakingHierarchy.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 // Components
 import ButtonLink from "../ButtonLink"
diff --git a/src/components/Staking/StakingHomeTableOfContents.tsx b/src/components/Staking/StakingHomeTableOfContents.tsx
index 61b321c7a99..ea9f87482f8 100644
--- a/src/components/Staking/StakingHomeTableOfContents.tsx
+++ b/src/components/Staking/StakingHomeTableOfContents.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { motion } from "framer-motion"
 import { Link } from "gatsby"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 const StyledTableOfContentsLink = styled(Link)`
   position: relative;
diff --git a/src/components/Staking/StakingHowSoloWorks.tsx b/src/components/Staking/StakingHowSoloWorks.tsx
index 95c578df1c8..fea606ae03d 100644
--- a/src/components/Staking/StakingHowSoloWorks.tsx
+++ b/src/components/Staking/StakingHowSoloWorks.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { graphql, useStaticQuery } from "gatsby"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 
diff --git a/src/components/Staking/StakingLaunchpadWidget.tsx b/src/components/Staking/StakingLaunchpadWidget.tsx
index bd3bd5015e3..9664d72ed50 100644
--- a/src/components/Staking/StakingLaunchpadWidget.tsx
+++ b/src/components/Staking/StakingLaunchpadWidget.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 
 import { StyledSelect as Select } from "../SharedStyledComponents"
diff --git a/src/components/Staking/StakingProductsCardGrid.tsx b/src/components/Staking/StakingProductsCardGrid.tsx
index aac3ea8b35e..1dea215834e 100644
--- a/src/components/Staking/StakingProductsCardGrid.tsx
+++ b/src/components/Staking/StakingProductsCardGrid.tsx
@@ -5,7 +5,8 @@ import React, {
   useEffect,
   useState,
 } from "react"
-import styled, { ThemeContext } from "styled-components"
+import styled from "@emotion/styled"
+import { useTheme } from "@emotion/react"
 import { shuffle } from "lodash"
 // Data imports
 import stakingProducts from "../../data/staking-products.json"
@@ -344,9 +345,9 @@ export interface IProps {
 }
 
 const StakingProductCardGrid: React.FC<IProps> = ({ category }) => {
-  const themeContext = useContext(ThemeContext)
+  const theme = useTheme()
   const [rankedProducts, updateRankedProducts] = useState<Array<Product>>([])
-  const isDarkTheme = themeContext.isDark
+  const isDarkTheme = theme.isDark
 
   const [SAT, LUM] = isDarkTheme ? ["50%", "35%"] : ["75%", "60%"]
 
diff --git a/src/components/Staking/StakingStatsBox.tsx b/src/components/Staking/StakingStatsBox.tsx
index 9107c97a259..0bedf87eee3 100644
--- a/src/components/Staking/StakingStatsBox.tsx
+++ b/src/components/Staking/StakingStatsBox.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 
 import Translation from "../Translation"
diff --git a/src/components/StatLoadingMessage.tsx b/src/components/StatLoadingMessage.tsx
index 732312150d4..e99fa56eff4 100644
--- a/src/components/StatLoadingMessage.tsx
+++ b/src/components/StatLoadingMessage.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { typography, TypographyProps } from "styled-system"
 
 import Translation from "./Translation"
diff --git a/src/components/StatsBoxGrid.tsx b/src/components/StatsBoxGrid.tsx
index 3e8be80cd7d..254522ace9a 100644
--- a/src/components/StatsBoxGrid.tsx
+++ b/src/components/StatsBoxGrid.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import axios from "axios"
 import { kebabCase } from "lodash"
diff --git a/src/components/TableOfContents.tsx b/src/components/TableOfContents.tsx
index ac7ad197628..cf92b988c0d 100644
--- a/src/components/TableOfContents.tsx
+++ b/src/components/TableOfContents.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useContext } from "react"
 import { motion } from "framer-motion"
 import { Link } from "gatsby"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import ButtonLink from "./ButtonLink"
 import Icon from "./Icon"
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index 5caf5e75daf..3612afc2513 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode, useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 const TabList = styled.ul`
   display: flex;
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
index 24e9e5dc36f..2c9c92303e4 100644
--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Icon from "./Icon"
 
 export interface IIsActive {
diff --git a/src/components/TitleCardList.tsx b/src/components/TitleCardList.tsx
index 3c4fa5dff52..34f93919b4c 100644
--- a/src/components/TitleCardList.tsx
+++ b/src/components/TitleCardList.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 import Icon from "./Icon"
 import Link from "./Link"
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 154e4ee0c3b..3b72c61e0a4 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -1,5 +1,5 @@
 import React, { MouseEventHandler, ReactNode, useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import * as utils from "../utils/isMobile"
 
 const Container = styled.div`
diff --git a/src/components/TranslationBanner.tsx b/src/components/TranslationBanner.tsx
index aa2bb282bb3..84d21411266 100644
--- a/src/components/TranslationBanner.tsx
+++ b/src/components/TranslationBanner.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import ButtonLink from "./ButtonLink"
 import Icon from "./Icon"
diff --git a/src/components/TranslationBannerLegal.tsx b/src/components/TranslationBannerLegal.tsx
index e30563fe7ca..0253fd52e44 100644
--- a/src/components/TranslationBannerLegal.tsx
+++ b/src/components/TranslationBannerLegal.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, { useEffect, useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 // Component
 import { ButtonPrimary } from "./SharedStyledComponents"
diff --git a/src/components/TranslationLeaderboard.tsx b/src/components/TranslationLeaderboard.tsx
index bb38f96ab89..bbfa8693e04 100644
--- a/src/components/TranslationLeaderboard.tsx
+++ b/src/components/TranslationLeaderboard.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { reverse, sortBy } from "lodash"
 
 // Components
diff --git a/src/components/TranslationsInProgress.tsx b/src/components/TranslationsInProgress.tsx
index febd0a3e57e..024a1dfd577 100644
--- a/src/components/TranslationsInProgress.tsx
+++ b/src/components/TranslationsInProgress.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import axios from "axios"
 
 import { FakeLinkExternal, CardItem } from "./SharedStyledComponents"
diff --git a/src/components/Trilemma.tsx b/src/components/Trilemma.tsx
index 886d18da3fe..8efe64fae2a 100644
--- a/src/components/Trilemma.tsx
+++ b/src/components/Trilemma.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { motion } from "framer-motion"
 import { useIntl } from "react-intl"
 
diff --git a/src/components/TutorialMetadata.tsx b/src/components/TutorialMetadata.tsx
index 38ef6d70fc2..b4d1d0b932f 100644
--- a/src/components/TutorialMetadata.tsx
+++ b/src/components/TutorialMetadata.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import CopyToClipboard from "./CopyToClipboard"
 import Pill from "./Pill"
diff --git a/src/components/TutorialTags.tsx b/src/components/TutorialTags.tsx
index ee2e3cc49e2..6b56320052a 100644
--- a/src/components/TutorialTags.tsx
+++ b/src/components/TutorialTags.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import Pill from "./Pill"
 
diff --git a/src/components/UpcomingEventsList.tsx b/src/components/UpcomingEventsList.tsx
index ff86ab8e26f..970453bda5b 100644
--- a/src/components/UpcomingEventsList.tsx
+++ b/src/components/UpcomingEventsList.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, { useEffect, useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 // Components
 import EventCard from "./EventCard"
diff --git a/src/components/UpgradeArticles.tsx b/src/components/UpgradeArticles.tsx
index 22148591ee0..699025985ed 100644
--- a/src/components/UpgradeArticles.tsx
+++ b/src/components/UpgradeArticles.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { dannyArticles, benArticles } from "../data/ethUpgradeArticles"
 
 import CardList from "./CardList"
diff --git a/src/components/UpgradeBannerNotification.tsx b/src/components/UpgradeBannerNotification.tsx
index ef4029c927c..7ac1c316dfd 100644
--- a/src/components/UpgradeBannerNotification.tsx
+++ b/src/components/UpgradeBannerNotification.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import BannerNotification from "./BannerNotification"
 import Emoji from "./Emoji"
 import Link from "./Link"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 const StyledBannerNotification = styled(BannerNotification)`
   display: flex;
diff --git a/src/components/UpgradeStatus.tsx b/src/components/UpgradeStatus.tsx
index c4ea5d08942..f13d9e8f621 100644
--- a/src/components/UpgradeStatus.tsx
+++ b/src/components/UpgradeStatus.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { TranslationKey } from "../utils/translations"
 import Translation from "./Translation"
 
diff --git a/src/components/UpgradeTableOfContents.tsx b/src/components/UpgradeTableOfContents.tsx
index 0b2660a4841..8679a3d3c08 100644
--- a/src/components/UpgradeTableOfContents.tsx
+++ b/src/components/UpgradeTableOfContents.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { motion } from "framer-motion"
 import { Link } from "gatsby"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import type { Item as ItemTableOfContents } from "./TableOfContents"
 
diff --git a/src/components/VisuallyHidden.tsx b/src/components/VisuallyHidden.tsx
index 9c1414322e4..dbfe2b42b11 100644
--- a/src/components/VisuallyHidden.tsx
+++ b/src/components/VisuallyHidden.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 // "Accessibility/SEO Friendly CSS Hiding"
 // Source: https://css-tricks.com/snippets/css/accessibilityseo-friendly-css-hiding/
diff --git a/src/components/YouTube.tsx b/src/components/YouTube.tsx
index 9a45cc14f3c..c6d1cd6969d 100644
--- a/src/components/YouTube.tsx
+++ b/src/components/YouTube.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 const Figure = styled.figure`
   display: block;
diff --git a/src/pages-conditional/dapps.tsx b/src/pages-conditional/dapps.tsx
index 70dc0dbd3cf..5dd67c7693b 100644
--- a/src/pages-conditional/dapps.tsx
+++ b/src/pages-conditional/dapps.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
diff --git a/src/pages-conditional/eth.tsx b/src/pages-conditional/eth.tsx
index 8deba7266a0..c503933950c 100644
--- a/src/pages-conditional/eth.tsx
+++ b/src/pages-conditional/eth.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { useIntl } from "react-intl"
 import { graphql, PageProps } from "gatsby"
diff --git a/src/pages-conditional/wallets.tsx b/src/pages-conditional/wallets.tsx
index e5581dd5716..760716d40a4 100644
--- a/src/pages-conditional/wallets.tsx
+++ b/src/pages-conditional/wallets.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { useIntl } from "react-intl"
 import { graphql, PageProps } from "gatsby"
diff --git a/src/pages-conditional/what-is-ethereum.tsx b/src/pages-conditional/what-is-ethereum.tsx
index e3c5b4043f7..54cdaf719f2 100644
--- a/src/pages-conditional/what-is-ethereum.tsx
+++ b/src/pages-conditional/what-is-ethereum.tsx
@@ -1,5 +1,6 @@
 import React from "react"
-import styled, { useTheme } from "styled-components"
+import styled from "@emotion/styled"
+import { useTheme } from "@emotion/react"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 2d922b8f22b..d428b840456 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import Link from "../components/Link"
 import Translation from "../components/Translation"
diff --git a/src/pages/assets.tsx b/src/pages/assets.tsx
index b56b8154470..f097aa9f729 100644
--- a/src/pages/assets.tsx
+++ b/src/pages/assets.tsx
@@ -1,7 +1,7 @@
 import React, { useContext } from "react"
 import { useIntl } from "react-intl"
-import { ThemeContext } from "styled-components"
-import styled from "styled-components"
+import { useTheme } from "@emotion/react"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { graphql, PageProps } from "gatsby"
 
@@ -78,8 +78,8 @@ const Header = styled.header`
 
 const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
   const intl = useIntl()
-  const themeContext = useContext(ThemeContext)
-  const isDarkTheme = themeContext.isDark
+  const theme = useTheme()
+  const isDarkTheme = theme.isDark
   const assetPageHeroImage = isDarkTheme
     ? data.ethDiamondPurpleHero
     : data.ethDiamondBlackHero
diff --git a/src/pages/bug-bounty.tsx b/src/pages/bug-bounty.tsx
index 2a3b00a12d3..881306f7af7 100644
--- a/src/pages/bug-bounty.tsx
+++ b/src/pages/bug-bounty.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, useContext } from "react"
-import { ThemeContext } from "styled-components"
-import styled from "styled-components"
+import { useTheme } from "@emotion/react"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
@@ -265,8 +265,8 @@ const BugBountiesPage = ({
   location,
 }: PageProps<Queries.BugBountyPageQuery, Context>) => {
   const intl = useIntl()
-  const themeContext = useContext(ThemeContext)
-  const isDarkTheme = themeContext.isDark
+  const theme = useTheme()
+  const isDarkTheme = theme.isDark
 
   // TODO sort query isn't working :(
   const consensusBountyHuntersNodes = data.consensusBountyHunters
diff --git a/src/pages/community.tsx b/src/pages/community.tsx
index abc1d2a5952..84d9e35d59c 100644
--- a/src/pages/community.tsx
+++ b/src/pages/community.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
diff --git a/src/pages/contributing/translation-program/acknowledgements.tsx b/src/pages/contributing/translation-program/acknowledgements.tsx
index 7356c59e682..c9efbbdd8b3 100644
--- a/src/pages/contributing/translation-program/acknowledgements.tsx
+++ b/src/pages/contributing/translation-program/acknowledgements.tsx
@@ -3,7 +3,8 @@ import React, { useContext } from "react"
 import { graphql, PageProps } from "gatsby"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { useIntl } from "react-intl"
-import styled, { ThemeContext } from "styled-components"
+import styled from "@emotion/styled"
+import { useTheme } from "@emotion/react"
 import type { Context } from "../../../types"
 
 // Components
@@ -109,8 +110,8 @@ const TranslatorAcknowledgements = ({
   location,
 }: PageProps<Queries.TranslatorAcknowledgementsPageQuery, Context>) => {
   const intl = useIntl()
-  const themeContext = useContext(ThemeContext)
-  const isDarkTheme = themeContext.isDark
+  const theme = useTheme()
+  const isDarkTheme = theme.isDark
   const themedCertificateImage = isDarkTheme
     ? data.darkThemeCertificate
     : data.lightThemeCertificate
diff --git a/src/pages/contributing/translation-program/contributors.tsx b/src/pages/contributing/translation-program/contributors.tsx
index 58702eb23f5..d72c66cda6a 100644
--- a/src/pages/contributing/translation-program/contributors.tsx
+++ b/src/pages/contributing/translation-program/contributors.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import { graphql, PageProps } from "gatsby"
 import type { Context } from "../../../types"
diff --git a/src/pages/developers/index.tsx b/src/pages/developers/index.tsx
index bee7e2e3248..59cf99dbf0e 100644
--- a/src/pages/developers/index.tsx
+++ b/src/pages/developers/index.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
diff --git a/src/pages/developers/learning-tools.tsx b/src/pages/developers/learning-tools.tsx
index 261a35affa2..39ecc854f2c 100644
--- a/src/pages/developers/learning-tools.tsx
+++ b/src/pages/developers/learning-tools.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { graphql, PageProps } from "gatsby"
 import { getImage } from "gatsby-plugin-image"
 import { useIntl } from "react-intl"
diff --git a/src/pages/developers/local-environment.tsx b/src/pages/developers/local-environment.tsx
index effe08a7a50..2cb0b658a6f 100644
--- a/src/pages/developers/local-environment.tsx
+++ b/src/pages/developers/local-environment.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
diff --git a/src/pages/developers/tutorials.tsx b/src/pages/developers/tutorials.tsx
index 9c2f210dcbe..52bd0e18690 100644
--- a/src/pages/developers/tutorials.tsx
+++ b/src/pages/developers/tutorials.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
 
diff --git a/src/pages/get-eth.tsx b/src/pages/get-eth.tsx
index c649ee1f59a..215885f8b90 100644
--- a/src/pages/get-eth.tsx
+++ b/src/pages/get-eth.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { graphql, PageProps } from "gatsby"
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e616d307419..87d6d99e382 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { useIntl } from "react-intl"
 import { graphql, PageProps } from "gatsby"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import type { Context } from "../types"
 
diff --git a/src/pages/languages.tsx b/src/pages/languages.tsx
index b7751d0fe98..687f43130f8 100644
--- a/src/pages/languages.tsx
+++ b/src/pages/languages.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 
 import PageMetadata from "../components/PageMetadata"
diff --git a/src/pages/layer-2.js b/src/pages/layer-2.js
index e1546e2d5fe..6c480a2d7ca 100644
--- a/src/pages/layer-2.js
+++ b/src/pages/layer-2.js
@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from "react"
 import { graphql } from "gatsby"
 import { getImage, GatsbyImage } from "gatsby-plugin-image"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 
 // Data
diff --git a/src/pages/learn/index.tsx b/src/pages/learn/index.tsx
index 0dfb7f3db07..d39f33533c1 100644
--- a/src/pages/learn/index.tsx
+++ b/src/pages/learn/index.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { graphql, PageProps } from "gatsby"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { useIntl } from "react-intl"
diff --git a/src/pages/run-a-node.js b/src/pages/run-a-node.js
index 4dedf829903..11b96138ef1 100644
--- a/src/pages/run-a-node.js
+++ b/src/pages/run-a-node.js
@@ -3,7 +3,7 @@ import React from "react"
 import { graphql } from "gatsby"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { useIntl } from "react-intl"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 // Assets
 import Dappnode from "../assets/run-a-node/dappnode.svg"
diff --git a/src/pages/stablecoins.js b/src/pages/stablecoins.js
index cb51959a40a..86084e357cf 100644
--- a/src/pages/stablecoins.js
+++ b/src/pages/stablecoins.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useMemo } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { graphql } from "gatsby"
 import { useIntl } from "react-intl"
diff --git a/src/pages/staking/deposit-contract.tsx b/src/pages/staking/deposit-contract.tsx
index 6353df951ae..2cdc6f87c1f 100644
--- a/src/pages/staking/deposit-contract.tsx
+++ b/src/pages/staking/deposit-contract.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { graphql, PageProps } from "gatsby"
 import makeBlockie from "ethereum-blockies-base64"
 import { getImage } from "gatsby-plugin-image"
diff --git a/src/pages/staking/index.tsx b/src/pages/staking/index.tsx
index dec6ea58cd8..38666ea70a5 100644
--- a/src/pages/staking/index.tsx
+++ b/src/pages/staking/index.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
 import { getImage } from "gatsby-plugin-image"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import ButtonDropdown, {
   List as ButtonDropdownList,
diff --git a/src/pages/studio.tsx b/src/pages/studio.tsx
index f90ed4b7044..76e9b4145f1 100644
--- a/src/pages/studio.tsx
+++ b/src/pages/studio.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import Link from "../components/Link"
 import Emoji from "../components/Emoji"
diff --git a/src/pages/upgrades/get-involved/index.tsx b/src/pages/upgrades/get-involved/index.tsx
index a473b00997c..a1e3c24a7f1 100644
--- a/src/pages/upgrades/get-involved/index.tsx
+++ b/src/pages/upgrades/get-involved/index.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useState, useEffect, ReactNode } from "react"
-import { ThemeContext } from "styled-components"
-import styled from "styled-components"
+import { useTheme } from "@emotion/react"
+import styled from "@emotion/styled"
 import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
 import { shuffle } from "lodash"
@@ -186,8 +186,8 @@ const GetInvolvedPage = ({
   location,
 }: PageProps<Queries.GetInvolvedPageQuery>) => {
   const intl = useIntl()
-  const themeContext = useContext(ThemeContext)
-  const isDarkTheme = themeContext.isDark
+  const theme = useTheme()
+  const isDarkTheme = theme.isDark
 
   // TODO sort query isn't working :(
   const bountyHunters: Array<Person> = [...data.bountyHunters.nodes].sort(
diff --git a/src/pages/upgrades/index.js b/src/pages/upgrades/index.js
index 072c39c40d8..65358cfc19f 100644
--- a/src/pages/upgrades/index.js
+++ b/src/pages/upgrades/index.js
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { graphql } from "gatsby"
 import { useIntl } from "react-intl"
diff --git a/src/pages/upgrades/vision.js b/src/pages/upgrades/vision.js
index d33de1e1ea5..ff5c2d54028 100644
--- a/src/pages/upgrades/vision.js
+++ b/src/pages/upgrades/vision.js
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { graphql } from "gatsby"
 import { useIntl } from "react-intl"
 import { getImage } from "gatsby-plugin-image"
diff --git a/src/pages/wallets/find-wallet.tsx b/src/pages/wallets/find-wallet.tsx
index 791cb4612bb..21841e41de8 100644
--- a/src/pages/wallets/find-wallet.tsx
+++ b/src/pages/wallets/find-wallet.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react"
 import { graphql } from "gatsby"
 import { getImage, GatsbyImage } from "gatsby-plugin-image"
 import { useIntl } from "react-intl"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { shuffle } from "lodash"
 
 // Components
diff --git a/src/styled.d.ts b/src/styled.d.ts
index ed218ca0541..48598f4c809 100644
--- a/src/styled.d.ts
+++ b/src/styled.d.ts
@@ -1,9 +1,9 @@
 // import original module declarations
-import "styled-components"
+import "@emotion/react"
 
 // and extend them!
-declare module "styled-components" {
-  export interface DefaultTheme {
+declare module "@emotion/react" {
+  export interface Theme {
     // TODO: to be defined better when we implement a UI lib
     isDark: boolean
     colors: any
diff --git a/src/templates/docs.tsx b/src/templates/docs.tsx
index 9a54de24355..92a3af8821e 100644
--- a/src/templates/docs.tsx
+++ b/src/templates/docs.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from "react"
 import { graphql, PageProps } from "gatsby"
 import { MDXProvider } from "@mdx-js/react"
 import { MDXRenderer } from "gatsby-plugin-mdx"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import BannerNotification from "../components/BannerNotification"
 import ButtonLink from "../components/ButtonLink"
diff --git a/src/templates/staking.tsx b/src/templates/staking.tsx
index 2d7a868e89d..e23c64e6be9 100644
--- a/src/templates/staking.tsx
+++ b/src/templates/staking.tsx
@@ -3,7 +3,7 @@ import { graphql, PageProps } from "gatsby"
 import { MDXRenderer } from "gatsby-plugin-mdx"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { MDXProvider } from "@mdx-js/react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import ButtonLink from "../components/ButtonLink"
 import ButtonDropdown, {
diff --git a/src/templates/static.tsx b/src/templates/static.tsx
index 3b4af7285b7..9d52a7ca38a 100644
--- a/src/templates/static.tsx
+++ b/src/templates/static.tsx
@@ -3,7 +3,7 @@ import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
 import { MDXProvider } from "@mdx-js/react"
 import { MDXRenderer } from "gatsby-plugin-mdx"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import ButtonLink from "../components/ButtonLink"
 import Breadcrumbs from "../components/Breadcrumbs"
diff --git a/src/templates/tutorial.tsx b/src/templates/tutorial.tsx
index 5281e7c6a47..5810dc6abfd 100644
--- a/src/templates/tutorial.tsx
+++ b/src/templates/tutorial.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import { graphql, PageProps } from "gatsby"
 import { MDXProvider } from "@mdx-js/react"
 import { MDXRenderer } from "gatsby-plugin-mdx"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import ButtonLink from "../components/ButtonLink"
 import Card from "../components/Card"
diff --git a/src/templates/upgrade.tsx b/src/templates/upgrade.tsx
index 09b497cc76c..d6f194aae31 100644
--- a/src/templates/upgrade.tsx
+++ b/src/templates/upgrade.tsx
@@ -3,7 +3,7 @@ import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
 import { MDXProvider } from "@mdx-js/react"
 import { MDXRenderer } from "gatsby-plugin-mdx"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 
 import ButtonLink from "../components/ButtonLink"
diff --git a/src/templates/use-cases.tsx b/src/templates/use-cases.tsx
index 9cfc254f35d..b601fd8cbb0 100644
--- a/src/templates/use-cases.tsx
+++ b/src/templates/use-cases.tsx
@@ -3,7 +3,7 @@ import { useIntl } from "react-intl"
 import { graphql, PageProps } from "gatsby"
 import { MDXProvider } from "@mdx-js/react"
 import { MDXRenderer } from "gatsby-plugin-mdx"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 
 import ButtonLink from "../components/ButtonLink"
diff --git a/src/theme.ts b/src/theme.ts
index 7109ee44858..3ca5ab38efb 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,4 +1,3 @@
-import { createGlobalStyle, DefaultTheme } from "styled-components"
 import { mix } from "polished"
 
 const white = "#ffffff"
@@ -385,7 +384,7 @@ const darkColors = {
 const lightThemeColors = Object.assign({}, baseColors, lightColors)
 const darkThemeColors = Object.assign({}, baseColors, darkColors)
 
-const theme: DefaultTheme = {
+const theme = {
   isDark: false, // Overwritten in Object.assign
   colors: {}, // Overwritten in Object.assign
   fonts: {
@@ -431,219 +430,3 @@ export const darkTheme = Object.assign(
   { isDark: true },
   { colors: darkThemeColors }
 )
-
-// Dynamic global styles
-// Unfortunately Prettier doesn't format `createGlobalStyle`
-// TODO external link styles no longer working...
-// Seemingly nothing that doesn't involve a theme variable?
-export const GlobalStyle = createGlobalStyle`
-  body {
-    background-color: ${(props) => props.theme.colors.background};
-    color: ${(props) => props.theme.colors.text};
-  }
-  a {
-    color: ${(props) => props.theme.colors.primary};
-    text-decoration: underline;
-  }
-  mark {
-    background: ${(props) => props.theme.colors.markBackground};
-    box-shadow: inset 0 -2px 0 0 rgba(69,142,225,.8);
-  }
-
-  .anchor.before {
-    fill: ${(props) => props.theme.colors.text};
-  }
-
-  hr {
-    background: ${(props) => props.theme.colors.lightBorder};
-  }
-
-  /* Legacy styles from lists.styl */
-  ul {
-    font-size: 1rem;
-    line-height: 1.6;
-    font-weight: 400;
-    margin: 2rem 0 1rem;
-    padding: 0;
-    margin: 1em;
-    list-style-type: none;
-    list-style-image: none;
-  }
-
-  li {
-    padding-left: .5em;
-    margin-bottom: .5em;
-      p:first-of-type {
-        margin-top: 0;
-      }
-      p:last-of-type {
-        margin-bottom: 0;
-      }
-    &:before {
-      content: "\2022";
-      color: ${(props) => props.theme.colors.primary};
-      display: inline-block;
-      width: 1em;
-      margin-left: -1em;
-      position: absolute;
-    }
-  }
-
-  /* YouTube embeds */
-  iframe {
-    display: block;
-    max-width: 560px;
-    margin: 32px 0;
-  }
-  
-  h1 {
-    font-size: 3rem;
-    line-height: 1.4;
-    margin: 2rem 0;
-    font-weight: 700;
-    scroll-margin-top: ${theme.variables.navHeight};
-    scroll-snap-margin: ${theme.variables.navHeight};
-    @media (max-width: ${theme.breakpoints.m}) {
-      font-size: 2.5rem;
-    }
-  }
-  
-  h2 {
-    font-size: 2rem;
-    line-height: 1.4;
-    margin: 2rem 0;
-    margin-top: 3rem;
-    font-weight: 600;
-    scroll-margin-top: ${theme.variables.navHeight};
-    scroll-snap-margin: ${theme.variables.navHeight};
-    @media (max-width: ${theme.breakpoints.m}) {
-      font-size: 1.5rem;
-    }
-  }
-  
-  h3 {
-    font-size: 1.5rem;
-    line-height: 1.4;
-    margin: 2rem 0;
-    margin-top: 2.5rem;
-    font-weight: 600;
-    scroll-margin-top: ${theme.variables.navHeight};
-    scroll-snap-margin: ${theme.variables.navHeight};
-    @media (max-width: ${theme.breakpoints.m}) {
-      font-size: 1.25rem;
-    }
-  }
-  
-  h4 {
-    font-size: 1.25rem;
-    line-height: 1.4;
-    font-weight: 500;
-    margin: 2rem 0;
-    scroll-margin-top: ${theme.variables.navHeight};
-    scroll-snap-margin: ${theme.variables.navHeight};
-    @media (max-width: ${theme.breakpoints.m}) {
-      font-size: 1rem;
-    }
-  }
-  
-  h5 {
-    font-size: 1rem;
-    line-height: 1.4;
-    font-weight: 450;
-    margin: 2rem 0;
-    scroll-margin-top: ${theme.variables.navHeight};
-    scroll-snap-margin: ${theme.variables.navHeight};
-  }
-
-  h6 {
-    font-size: 0.9rem;
-    line-height: 1.4;
-    font-weight: 400;
-    text-transform: uppercase;
-    margin: 2rem 0;
-    scroll-margin-top: ${theme.variables.navHeight};
-    scroll-snap-margin: ${theme.variables.navHeight};
-  }
-
-  /* Anchor tag styles */
-  /* Selected specifically for mdx rendered side icon link */
-  .header-anchor {
-    position: relative;
-    display: initial;
-    margin-left: -1.5em;
-    padding-right: 0.5rem;
-    font-size: 1rem;
-    vertical-align: middle;
-
-    svg {
-      fill: ${(props) => props.theme.colors.primary};
-      visibility: hidden;
-    }
-  }
-
-  h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
-    .header-anchor svg {
-      visibility: visible;
-    }
-  }
-
-  .header-anchor:focus svg {
-    visibility: visible;
-  }
-
-`
-// H6 basically only uses as labels as per design system
-
-// Old Mixins for referecne
-// export const Mixins = {
-//   textLevel1: `
-//     font-size: 3rem;
-//     line-height: 1.4;
-//     margin: 2rem 0;
-//     font-weight: 400;
-//   `,
-//   textLevel2: `
-//     font-size: 2rem;
-//     line-height: 1.4;
-//     margin: 2rem 0;
-//     font-weight: 600;
-//   `,
-//   textLevel3: `
-//     font-size: 1.5rem;
-//     line-height: 1.4;
-//     margin: 1.5rem 0 2rem;
-//     font-weight: 600;
-//   `,
-//   textLevel4: `
-//     font-size: 1.25rem;
-//     line-height: 1.4;
-//     font-weight: 400;
-//     margin-top: 2rem;
-//   `,
-//   textLevel5: `
-//     font-size: 1rem;
-//     line-height: 1.6;
-//     font-weight: 400;
-//     margin-top: 2rem;
-//   `,
-//   textLevel6: `
-//     font-size: .875rem;
-//     line-height: 1.6;
-//     font-weight: 400;
-//     letter-spacing: 0.04em;
-//     margin: 1.14em 0;
-//     text-transform uppercase
-//   `,
-//   textLevel7: `
-//     font-size: 1rem;
-//     line-height: 1.6;
-//     font-weight: 400;
-//     margin: 2rem 0 1rem;
-//   `,
-//   textLevel8: `
-//     font-size: .875rem;
-//     line-height:1.6;
-//     margin: 1.14em 0;
-//     font-weight: 400;
-//   `,
-// }
diff --git a/yarn.lock b/yarn.lock
index 9a828fe29b1..faa3445ea94 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -340,7 +340,7 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     jsesc "^2.5.1"
 
-"@babel/helper-annotate-as-pure@^7.15.4", "@babel/helper-annotate-as-pure@^7.16.0":
+"@babel/helper-annotate-as-pure@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz#9a1f0ebcda53d9a2d00108c4ceace6a5d5f1f08d"
   integrity sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==
@@ -354,6 +354,13 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-annotate-as-pure@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
+  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.16.5":
   version "7.16.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.5.tgz#a8429d064dce8207194b8bf05a70a9ea828746af"
@@ -532,7 +539,7 @@
   dependencies:
     "@babel/types" "^7.17.0"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.0.0-beta.49", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.15.4", "@babel/helper-module-imports@^7.16.0":
+"@babel/helper-module-imports@^7.0.0-beta.49", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3"
   integrity sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==
@@ -546,6 +553,13 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-module-imports@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.16.5":
   version "7.16.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.16.5.tgz#530ebf6ea87b500f60840578515adda2af470a29"
@@ -598,6 +612,11 @@
   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-plugin-utils@^7.18.6":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz#4b8aea3b069d8cb8a72cdfe28ddf5ceca695ef2f"
+  integrity sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==
+
 "@babel/helper-remap-async-to-generator@^7.16.5":
   version "7.16.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.5.tgz#e706646dc4018942acb4b29f7e185bc246d65ac3"
@@ -674,6 +693,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
   integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
 
+"@babel/helper-validator-identifier@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
+  integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
+
 "@babel/helper-validator-option@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
@@ -974,6 +998,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.17.12"
 
+"@babel/plugin-syntax-jsx@^7.12.13", "@babel/plugin-syntax-jsx@^7.18.6", "@babel/plugin-syntax-jsx@^7.2.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
+  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-syntax-jsx@^7.16.5":
   version "7.16.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.5.tgz#bf255d252f78bc8b77a17cadc37d1aa5b8ed4394"
@@ -1393,6 +1424,17 @@
     "@babel/plugin-syntax-jsx" "^7.17.12"
     "@babel/types" "^7.17.12"
 
+"@babel/plugin-transform-react-jsx@^7.12.1":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.18.6.tgz#2721e96d31df96e3b7ad48ff446995d26bc028ff"
+  integrity sha512-Mz7xMPxoy9kPS/JScj6fJs03TZ/fZ1dJPlMjRAgTaxaS0fUBk8FV/A2rRgfPsVCZqALNwMexD+0Uaf5zlcKPpw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-jsx" "^7.18.6"
+    "@babel/types" "^7.18.6"
+
 "@babel/plugin-transform-react-jsx@^7.16.5":
   version "7.16.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.16.5.tgz#5298aedc5f81e02b1cb702e597e8d6a346675765"
@@ -1683,7 +1725,7 @@
     "@babel/parser" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.16.5", "@babel/traverse@^7.4.5":
+"@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.16.5":
   version "7.16.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.5.tgz#d7d400a8229c714a59b87624fc67b0f1fbd4b2b3"
   integrity sha512-FOCODAzqUMROikDYLYxl4nmwiLlu85rNqBML/A5hKRVXG2LV8d0iMqgPzdYTcIpjZEBB7D6UDU9vxRZiriASdQ==
@@ -1739,11 +1781,54 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.18.6":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.9.tgz#7148d64ba133d8d73a41b3172ac4b83a1452205f"
+  integrity sha512-WwMLAg2MvJmt/rKEVQBBhIVffMmnilX4oe0sRe7iPOHIGsqpruFHHdrfj4O1CMMtgMtCU4oPafZjDPCRgO57Wg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    to-fast-properties "^2.0.0"
+
 "@builder.io/partytown@^0.5.2":
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/@builder.io/partytown/-/partytown-0.5.4.tgz#1a89069978734e132fa4a59414ddb64e4b94fde7"
   integrity sha512-qnikpQgi30AS01aFlNQV6l8/qdZIcP76mp90ti+u4rucXHsn4afSKivQXApqxvrQG9+Ibv45STyvHizvxef/7A==
 
+"@emotion/babel-plugin-jsx-pragmatic@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.1.5.tgz#27debfe9c27c4d83574d509787ae553bf8a34d7e"
+  integrity sha512-y+3AJ0SItMDaAgGPVkQBC/S/BaqaPACkQ6MyCI2CUlrjTxKttTVfD3TMtcs7vLEcLxqzZ1xiG0vzwCXjhopawQ==
+  dependencies:
+    "@babel/plugin-syntax-jsx" "^7.2.0"
+
+"@emotion/babel-plugin@^11.2.0", "@emotion/babel-plugin@^11.7.1":
+  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/babel-preset-css-prop@^11.2.0":
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-11.2.0.tgz#c7e945f56b2610b438f0dc8ae5253fc55488de0e"
+  integrity sha512-9XLQm2eLPYTho+Cx1LQTDA1rATjoAaB4O+ds55XDvoAa+Z16Hhg8y5Vihj3C8E6+ilDM8SV5A9Z6z+yj0YIRBg==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.12.1"
+    "@babel/runtime" "^7.7.2"
+    "@emotion/babel-plugin" "^11.2.0"
+    "@emotion/babel-plugin-jsx-pragmatic" "^0.1.5"
+
 "@emotion/cache@^11.4.0", "@emotion/cache@^11.7.1":
   version "11.7.1"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539"
@@ -1755,24 +1840,42 @@
     "@emotion/weak-memoize" "^0.2.5"
     stylis "4.0.13"
 
+"@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.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8":
+"@emotion/is-prop-valid@^0.8.2":
   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/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":
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
-"@emotion/memoize@^0.7.4":
+"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
   integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
@@ -1790,6 +1893,19 @@
     "@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.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
@@ -1801,17 +1917,39 @@
     "@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/sheet@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2"
   integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
 
-"@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/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/unitless@^0.7.4", "@emotion/unitless@^0.7.5":
+"@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":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@@ -1821,6 +1959,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
   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.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
@@ -3683,7 +3826,7 @@
   dependencies:
     "@types/unist" "*"
 
-"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.1":
+"@types/hoist-non-react-statics@^3.3.1":
   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==
@@ -3890,15 +4033,6 @@
   dependencies:
     "@types/node" "*"
 
-"@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/styled-system@^5.1.15":
   version "5.1.15"
   resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.15.tgz#075f969cc028a895dba916c07708e2fe828d7077"
@@ -4855,6 +4989,15 @@ babel-plugin-lodash@^3.3.4:
     lodash "^4.17.10"
     require-package-name "^2.0.1"
 
+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-macros@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
@@ -4904,31 +5047,6 @@ babel-plugin-remove-graphql-queries@^4.4.0:
     "@babel/runtime" "^7.15.4"
     gatsby-core-utils "^3.4.0"
 
-"babel-plugin-styled-components@>= 1.12.0":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.2.tgz#0fac11402dc9db73698b55847ab1dc73f5197c54"
-  integrity sha512-7eG5NE8rChnNTDxa6LQfynwgHTVOYYaHJbUYSlOhk8QBXIQiMBKq4gyfHBBKPrxUcVBXVJL61ihduCpCQbuNbw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.0"
-    "@babel/helper-module-imports" "^7.16.0"
-    babel-plugin-syntax-jsx "^6.18.0"
-    lodash "^4.17.11"
-
-babel-plugin-styled-components@^1.10.7:
-  version "1.13.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz#1f1cb3927d4afa1e324695c78f690900e3d075bc"
-  integrity sha512-meGStRGv+VuKA/q0/jXxrPNWEm4LPfYIqxooDTdmh8kFsP/Ph7jJG5rUPwUPX3QHUvggwdbgdGpo88P/rRYsVw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.15.4"
-    "@babel/helper-module-imports" "^7.15.4"
-    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=
-
 babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0:
   version "7.0.0-beta.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz#aa213c1435e2bffeb6fca842287ef534ad05d5cf"
@@ -5529,11 +5647,6 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.1.tgz#250fd350cfd555d0d2160b1d51510eaf8326e86e"
   integrity sha512-tVI4q5jjFV5CavAU8DXfza/TJcZutVKo/5Foskmsqcm0MsL91moHvwiGNnqaa2o6PF/7yT5ikDRcVcl8Rj6LCA==
 
-camelize@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
-  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
-
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -6099,7 +6212,7 @@ convert-hrtime@^3.0.0:
   resolved "https://registry.yarnpkg.com/convert-hrtime/-/convert-hrtime-3.0.0.tgz#62c7593f5809ca10be8da858a6d2f702bcda00aa"
   integrity sha512-7V+KqSvMiHp8yWDuwfww06XleMWVVB9b9tURBx+G7UTADuo5hYPuowKloz4OzOqbPezxgo+fdQ1522WzPG4OeA==
 
-convert-source-map@^1.7.0:
+convert-source-map@^1.5.0, convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -6316,11 +6429,6 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-color-keywords@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
-  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
-
 css-declaration-sorter@^6.0.3:
   version "6.1.3"
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz#e9852e4cf940ba79f509d9425b137d1f94438dc2"
@@ -6398,15 +6506,6 @@ css-selector-parser@^1.0.0, css-selector-parser@^1.1.0:
   resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-1.4.1.tgz#03f9cb8a81c3e5ab2c51684557d5aaf6d2569759"
   integrity sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==
 
-css-to-react-native@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
-  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
-  dependencies:
-    camelize "^1.0.0"
-    css-color-keywords "^1.0.0"
-    postcss-value-parser "^4.0.2"
-
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -8092,6 +8191,11 @@ find-cache-dir@^3.3.1, find-cache-dir@^3.3.2:
     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@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@@ -8505,6 +8609,14 @@ gatsby-parcel-config@0.6.0:
     "@parcel/transformer-raw" "2.5.0"
     "@parcel/transformer-react-refresh-wrap" "2.5.0"
 
+gatsby-plugin-emotion@^7.19.0:
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-emotion/-/gatsby-plugin-emotion-7.19.0.tgz#1e1d3251ce986f4dfc3c72feb4aafb5c6b2121a3"
+  integrity sha512-sESLf2cUH91sFFzgylRKb5Vc/9cS9ca9KeG1/kjTRuONNBuu0tgiSQnrCPkfxa4Ij9xEO4QlgjKFhwHZNCu3Tw==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@emotion/babel-preset-css-prop" "^11.2.0"
+
 gatsby-plugin-gatsby-cloud@^4.3.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-gatsby-cloud/-/gatsby-plugin-gatsby-cloud-4.4.0.tgz#a71076f01a71086e5b03a1ed7464127d7aadb330"
@@ -8681,13 +8793,6 @@ gatsby-plugin-sitemap@^5.0.0:
     minimatch "^3.0.4"
     sitemap "^7.0.0"
 
-gatsby-plugin-styled-components@^5.0.0:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-styled-components/-/gatsby-plugin-styled-components-5.4.0.tgz#bb632ac9ecdf12a657dbb9f2c310e6ea105f86a7"
-  integrity sha512-YsQJW4nuhuSIRrLRwexXWmrqIgirFWfYVtdhPTIHcrq5VCDW2OkMw/Kn+WNpHt1GUmP+3piKfKtofeF61xKwuw==
-  dependencies:
-    "@babel/runtime" "^7.15.4"
-
 gatsby-plugin-typescript@^4.15.0:
   version "4.15.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-typescript/-/gatsby-plugin-typescript-4.15.0.tgz#422162615de6f7efc223a32457cfdcbc13593de8"
@@ -9793,7 +9898,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -10272,7 +10377,7 @@ is-core-module@^2.2.0:
   dependencies:
     has "^1.0.3"
 
-is-core-module@^2.8.1:
+is-core-module@^2.8.1, is-core-module@^2.9.0:
   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==
@@ -11234,7 +11339,7 @@ lodash.without@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
   integrity sha1-PNRXSgC2e643OpS3SHcmQFB7eqw=
 
-lodash@4.17.21, lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@~4.17.0:
+lodash@4.17.21, lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@~4.17.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -14258,6 +14363,15 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
+resolve@^1.12.0:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^1.14.2, resolve@^1.20.0, resolve@^1.3.2:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
@@ -14636,11 +14750,6 @@ shallow-equal@^1.2.1:
   resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
   integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
 
-shallowequal@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
-  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
-
 sharp@^0.30.1, sharp@^0.30.3:
   version "0.30.6"
   resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.30.6.tgz#02264e9826b5f1577509f70bb627716099778873"
@@ -14901,7 +15010,7 @@ source-map@0.7.3, source-map@^0.7.3, source-map@~0.7.2:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
-source-map@^0.5.0, source-map@^0.5.6, source-map@~0.5.3:
+source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.3:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -15291,22 +15400,6 @@ style-value-types@4.1.4:
     hey-listen "^1.0.8"
     tslib "^2.1.0"
 
-styled-components@^5.1.1:
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.3.tgz#312a3d9a549f4708f0fb0edc829eb34bde032743"
-  integrity sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^0.8.8"
-    "@emotion/stylis" "^0.8.4"
-    "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1.12.0"
-    css-to-react-native "^3.0.0"
-    hoist-non-react-statics "^3.0.0"
-    shallowequal "^1.1.0"
-    supports-color "^5.5.0"
-
 styled-system@^5.1.5:
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.5.tgz#e362d73e1dbb5641a2fd749a6eba1263dc85075e"
@@ -15355,7 +15448,7 @@ sudo-prompt@^8.2.0:
   resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-8.2.5.tgz#cc5ef3769a134bb94b24a631cc09628d4d53603e"
   integrity sha512-rlBo3HU/1zAJUrkY6jNxDOC9eVYliG6nS4JA8u8KAshITd07tafMc/Br7xQwCSseXwJ2iCcHCE8SNWX3q8Z+kw==
 
-supports-color@^5.3.0, supports-color@^5.5.0:
+supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==

From 7df7863b7d73b36814d53369bb2c7ad2713f7bab Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Tue, 26 Jul 2022 10:01:18 -0300
Subject: [PATCH 02/15] initial chakra setup

---
 gatsby-config.ts                      |   7 +
 package.json                          |   4 +-
 src/@chakra-ui/gatsby-plugin/theme.ts |   9 +
 yarn.lock                             | 846 +++++++++++++++++++++++++-
 4 files changed, 844 insertions(+), 22 deletions(-)
 create mode 100644 src/@chakra-ui/gatsby-plugin/theme.ts

diff --git a/gatsby-config.ts b/gatsby-config.ts
index 92bd8663c36..b4099fcff70 100644
--- a/gatsby-config.ts
+++ b/gatsby-config.ts
@@ -186,6 +186,13 @@ const config: GatsbyConfig = {
     },
     // CSS in JS
     `gatsby-plugin-emotion`,
+    {
+      resolve: "@chakra-ui/gatsby-plugin",
+      options: {
+        resetCSS: false,
+        isUsingColorMode: true,
+      },
+    },
     // Source assets
     {
       resolve: `gatsby-source-filesystem`,
diff --git a/package.json b/package.json
index db30ffef30a..dd612ea4670 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
   "private": false,
   "dependencies": {
     "@apollo/client": "^3.3.13",
+    "@chakra-ui/gatsby-plugin": "^3.0.1",
+    "@chakra-ui/react": "^1.0.0",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@formatjs/intl-locale": "^2.4.14",
@@ -25,7 +27,7 @@
     "embla-carousel-react": "^6.2.0",
     "ethereum-blockies-base64": "^1.0.2",
     "focus-trap-react": "^8.11.2",
-    "framer-motion": "^4.1.3",
+    "framer-motion": "^6.5.1",
     "gatsby": "^4.15.0",
     "gatsby-plugin-emotion": "^7.19.0",
     "gatsby-plugin-gatsby-cloud": "^4.3.0",
diff --git a/src/@chakra-ui/gatsby-plugin/theme.ts b/src/@chakra-ui/gatsby-plugin/theme.ts
new file mode 100644
index 00000000000..6e1d4c2a56d
--- /dev/null
+++ b/src/@chakra-ui/gatsby-plugin/theme.ts
@@ -0,0 +1,9 @@
+import { extendTheme } from "@chakra-ui/react"
+
+const theme = {
+  colors: {
+    primary: "rebeccapurple",
+  },
+}
+
+export default extendTheme(theme)
diff --git a/yarn.lock b/yarn.lock
index 5dc4306673c..1387c0100f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1707,6 +1707,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.13":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
+  integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.12.7", "@babel/template@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
@@ -1794,6 +1801,566 @@
   resolved "https://registry.yarnpkg.com/@builder.io/partytown/-/partytown-0.5.4.tgz#1a89069978734e132fa4a59414ddb64e4b94fde7"
   integrity sha512-qnikpQgi30AS01aFlNQV6l8/qdZIcP76mp90ti+u4rucXHsn4afSKivQXApqxvrQG9+Ibv45STyvHizvxef/7A==
 
+"@chakra-ui/accordion@1.4.11":
+  version "1.4.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/accordion/-/accordion-1.4.11.tgz#31c0f17cd7b7c92f784307b87de73d8a8c4cf9f7"
+  integrity sha512-d/gvSgGwcZaJXxXqGmecpAgko/tUYb5vR0E0B2/V/z9AVbS8ei//fbiO9+8Ouyl/K46oWHWYj5vt8iTadlZleg==
+  dependencies:
+    "@chakra-ui/descendant" "2.1.3"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/transition" "1.4.8"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/alert@1.3.7":
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/alert/-/alert-1.3.7.tgz#f36020ffc3b2c26be67025c56bccbf0639a81a67"
+  integrity sha512-fFpJYBpHOIK/BX4BVl/xafYiDBUW+Bq/gUYDOo4iAiO4vHgxo74oa+yOwSRNlNjAgIX7pi2ridsYQALKyWyxxQ==
+  dependencies:
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/anatomy@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/anatomy/-/anatomy-1.3.0.tgz#38a40dd6f2bb076fe8bebe8fb8e4769ea005e03d"
+  integrity sha512-vj/lcHkCuq/dtbl69DkNsftZTnrGEegB90ODs1B6rxw8iVMdDSYkthPPFAkqzNs4ppv1y2IBjELuVzpeta1OHA==
+  dependencies:
+    "@chakra-ui/theme-tools" "^1.3.6"
+
+"@chakra-ui/avatar@1.3.11":
+  version "1.3.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/avatar/-/avatar-1.3.11.tgz#abd8ffa9ad54756e549730f984fdae621ae51baa"
+  integrity sha512-/eRRK48Er92/QWAfWhxsJIN0gZBBvk+ew4Hglo+pxt3/NDnfTF2yPE7ZN29Dl6daPNbyTOpoksMwaU2mZIqLgA==
+  dependencies:
+    "@chakra-ui/image" "1.1.10"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/breadcrumb@1.3.6":
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/breadcrumb/-/breadcrumb-1.3.6.tgz#fe22e162c37add5830bd1292172bb11d859c6f35"
+  integrity sha512-iXxienBO6RUnJEcDvyDWyRt+mzPyl7/b6N8i0vrjGKGLpgtayJFvIdo33tFcvx6TCy7V9hiE3HTtZnNomWdR6A==
+  dependencies:
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/button@1.5.10":
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/button/-/button-1.5.10.tgz#c339f78197b6bd63f109003177fd640ae6e6a632"
+  integrity sha512-IVEOrleI378CckAa3b3CTUHMPZRfpy6LPwn1Mx3sMpHEkDTKu8zJcjgEvCE8HYzNC1KbwBsa1PfTgk40ui6EtA==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/spinner" "1.2.6"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/checkbox@1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/checkbox/-/checkbox-1.7.1.tgz#cd733f177d88c477ae5ece228b81cddc67b70c0e"
+  integrity sha512-9Io97yn8OrdaIynCj+3Z/neJV7lTT1MtcdYh3BKMd7WnoJDkRY/GlBM8zsdgC5Wvm+ZQ1M83t0YvRPKLLzusyA==
+  dependencies:
+    "@chakra-ui/form-control" "1.6.0"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+    "@chakra-ui/visually-hidden" "1.1.6"
+
+"@chakra-ui/clickable@1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/clickable/-/clickable-1.2.6.tgz#7f3deef71580acf47c2395cac2c1734f43418a3f"
+  integrity sha512-89SsrQwwwAadcl/bN8nZqqaaVhVNFdBXqQnxVy1t07DL5ezubmNb5SgFh9LDznkm9YYPQhaGr3W6HFro7iAHMg==
+  dependencies:
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/close-button@1.2.7":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/close-button/-/close-button-1.2.7.tgz#6f3073618ae777d7e36a80fb17bc00aaa790e7a5"
+  integrity sha512-cYTxfgrIlPU4IZm1sehZXxx/TNQBk9c3LBPvTpywEM8GVRGINh4YLq8WiMaPtO+TDNBnKoWS/jS4IHnR+abADw==
+  dependencies:
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/color-mode@1.4.8":
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/color-mode/-/color-mode-1.4.8.tgz#e5367b909f5b4c782b239f9d37d4cf1a44c28559"
+  integrity sha512-iD4126DVQi06c6ARr3uf3R2rtEu8aBVjW8rhZ+lOsV26Z15iCJA7OAut13Xu06fcZvgjSB/ChDy6Sx9sV9UjHA==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-env" "1.1.6"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/control-box@1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/control-box/-/control-box-1.1.6.tgz#15a40a2cab525799988ae53948b61eed81a7f177"
+  integrity sha512-EUcq5f854puG6ZA6wAWl4107OPl8+bj4MMHJCa48BB0qec0U8HCEtxQGnFwJmaYLalIAjMfHuY3OwO2A3Hi9hA==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/counter@1.2.10":
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/counter/-/counter-1.2.10.tgz#544de1f53b783e8577cc74208ae1b0ca74385834"
+  integrity sha512-HQd09IuJ4z8M8vWajH+99jBWWSHDesQZmnN95jUg3HKOuNleLaipf2JFdrqbO1uWQyHobn2PM6u+B+JCAh2nig==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/css-reset@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/css-reset/-/css-reset-1.1.3.tgz#da65507ea1d69ed309bc34619881e23b5004ec7d"
+  integrity sha512-AgfrE7bRTJvNi/4zIfacI/kBHmHmHEIeQtHwCvk/0qM9V2gK1VM3ctYlnibf7BTh17F/UszweOGRb1lHSPfWjw==
+
+"@chakra-ui/descendant@2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/descendant/-/descendant-2.1.3.tgz#6198ccce207b3d8697dedefff6886f18ca13b5ce"
+  integrity sha512-aNYNv99gEPENCdw2N5y3FvL5wgBVcLiOzJ2TxSwb4EVYszbgBZ8Ry1pf7lkoSfysdxD0scgy2cVyxO8TsYTU4g==
+  dependencies:
+    "@chakra-ui/react-utils" "^1.2.3"
+
+"@chakra-ui/editable@1.4.2":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/editable/-/editable-1.4.2.tgz#92d5266e737d52df1edc91c21a05c0a6048f881f"
+  integrity sha512-a5zKghA/IvG7yNkmFl7Z9c2KSsf0FgyijsNPTg/4S5jxyz13QJtoTg40tdpyaxHHCT25y25iUcV4FYCj6Jd01w==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/focus-lock@1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/focus-lock/-/focus-lock-1.2.6.tgz#ecdc9688651c55c67f9059720f0885ea7c02b979"
+  integrity sha512-ZJNE1oNdUM1aGWuCJ+bxFa/d3EwxzfMWzTKzSvKDK50GWoUQQ10xFTT9nY/yFpkcwhBvx1KavxKf44mIhIbSog==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+    react-focus-lock "2.5.2"
+
+"@chakra-ui/form-control@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/form-control/-/form-control-1.6.0.tgz#a2a7b82a385f75fababf3947d39e227b4d073929"
+  integrity sha512-MtUE98aocP2QTgvyyJ/ABuG33mhT3Ox56phKreG3HzbUKByMwrbQSm1QcAgyYdqSZ9eKB2tXx+qgGNh+avAfDA==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/gatsby-plugin@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/gatsby-plugin/-/gatsby-plugin-3.0.1.tgz#57ff89824c5931564f59ed9f850c17185aac3362"
+  integrity sha512-MxdXIvUnuZrdSCswpWEKXJzzSUueC0/8GYQXOLzhrs7ltJmWZBrLuQEt/cH/FZLcaBn43WKeSJMg2k4aLH+axQ==
+
+"@chakra-ui/hooks@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-1.9.1.tgz#7a00659e6bb4d56cf56022071eca0b77a7df1ac1"
+  integrity sha512-SEeh1alDKzrP9gMLWMnXOUDBQDKF/URL6iTmkumTn6vhawWNla6sPrcMyoCzWdMzwUhZp3QNtCKbUm7dxBXvPw==
+  dependencies:
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+    compute-scroll-into-view "1.0.14"
+    copy-to-clipboard "3.3.1"
+
+"@chakra-ui/icon@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-2.0.5.tgz#d57f53e6a2c7ae1bae7292a1778fd466c02e2e29"
+  integrity sha512-ZrqRvCCIxGr4qFd/r1pmtd9tobRmv8KAxV7ygFoc/t4vOSKTcVIjhE12gsI3FzgvXM15ZFVwsxa1zodwgo5neQ==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/image@1.1.10":
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-1.1.10.tgz#65bae4086559937d25c728660ae743bce9360cb2"
+  integrity sha512-PJZmhQ/R1PgdMyCRjALfoyq1FNh/WzMAw70sliHLtLcb9hBXniwQZuckYfUshCkUoFBj/ow9d4byn9Culdpk7Q==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/input@1.4.6":
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/input/-/input-1.4.6.tgz#455f24e7a3f401ef10b50b68d9b0537676fbfec5"
+  integrity sha512-Ljy/NbOhh9cNQxKTWQRsT4aQiXs2vVya+Cj5NpMAz08NFFjPZovsTawhI7m6ejT5Vsh76QYjh2rOLLI3fWqQQw==
+  dependencies:
+    "@chakra-ui/form-control" "1.6.0"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/layout@1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/layout/-/layout-1.8.0.tgz#f95e78168644b45ac7327e4e0cfb1f0e6f7c3b4d"
+  integrity sha512-GJtEKez5AZu0XQTxI6a6jwA/hMDD36pP0HBxBOGuHP1hWCebDzMjraiMfWiP9w7hKERFE4j19kocHxIXyocfJA==
+  dependencies:
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/live-region@1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/live-region/-/live-region-1.1.6.tgz#135461a19ae2d479eefb012376ffa0f500b83b16"
+  integrity sha512-9gPQHXf7oW0jXyT5R/JzyDMfJ3hF70TqhN8bRH4fMyfNr2Se+SjztMBqCrv5FS5rPjcCeua+e0eArpoB3ROuWQ==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/media-query@2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/media-query/-/media-query-2.0.4.tgz#25e8074a19613d4ccce880a1f92c8e733708b079"
+  integrity sha512-kn6g/L0IFFUHz2v4yiCsBnhg9jUeA7525Z+AWl+BPtvryi7i9J+AJ27y/QAge7vUGy4dwDeFyxOZTs2oZ9/BsA==
+  dependencies:
+    "@chakra-ui/react-env" "1.1.6"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/menu@1.8.11":
+  version "1.8.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/menu/-/menu-1.8.11.tgz#a9508db5dd346f9ec02492536d93b7ab8db54319"
+  integrity sha512-8K65xItPsdMvSfuGWYIGigOF/QMcy7+D48UIEO/Hu0u0ckd11/JXbpSIFPddH5fYedclJ18PGRohTne487OVjQ==
+  dependencies:
+    "@chakra-ui/clickable" "1.2.6"
+    "@chakra-ui/descendant" "2.1.3"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/popper" "2.4.3"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/transition" "1.4.8"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/modal@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/modal/-/modal-1.11.1.tgz#fedd757726cbc7ec3b614e1b0c7b46c7244f988e"
+  integrity sha512-B2BBDonHb04vbPLAWgko1JYBwgW8ZNSLyhTJK+rbrCsRSgazuLTcwq4hdyJqrYNWtaQEfSwpAXqJ7joMZdv59A==
+  dependencies:
+    "@chakra-ui/close-button" "1.2.7"
+    "@chakra-ui/focus-lock" "1.2.6"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/portal" "1.3.10"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/transition" "1.4.8"
+    "@chakra-ui/utils" "1.10.4"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.4.1"
+
+"@chakra-ui/number-input@1.4.7":
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/number-input/-/number-input-1.4.7.tgz#9d150c20a7d301e2ffe600251e68d9b6f70fcce0"
+  integrity sha512-LorGRZFMipom8vCUEbLi2s7bTHF2Fgiu766W0jTbzMje+8Z1ZoRQunH9OZWQnxnWQTUfUM2KBW8KwToYh1ojfQ==
+  dependencies:
+    "@chakra-ui/counter" "1.2.10"
+    "@chakra-ui/form-control" "1.6.0"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/pin-input@1.7.10":
+  version "1.7.10"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/pin-input/-/pin-input-1.7.10.tgz#833bab2c0a283d835997e9db8b615f46865d5385"
+  integrity sha512-Uz5vFK+ZevQtdYHBkddSFCrY44bweXLanpSv9X/D0pWpdML09qfPiKX4ydGzfRoS2u4L8NUtN86IcvdOQLhHQg==
+  dependencies:
+    "@chakra-ui/descendant" "2.1.3"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/popover@1.11.9":
+  version "1.11.9"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/popover/-/popover-1.11.9.tgz#283a52c969f27ee7119774c255b786af6c9b2766"
+  integrity sha512-hJ1/Lwukox3ryTN7W1wnj+nE44utfLwQYvfUSdatt5dznnh8k0P6Wx7Hmjm1cYffRavBhqzwua/QZDWjJN9N0g==
+  dependencies:
+    "@chakra-ui/close-button" "1.2.7"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/popper" "2.4.3"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/popper@2.4.3":
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/popper/-/popper-2.4.3.tgz#fcdc917d13a56b9d44868c78a009e4dd692697a2"
+  integrity sha512-TGzFnYt3mtIVkIejtYIAu4Ka9DaYLzMR4NgcqI6EtaTvgK7Xep+6RTiY/Nq+ZT3l/eaNUwqHRFoNrDUg1XYasA==
+  dependencies:
+    "@chakra-ui/react-utils" "1.2.3"
+    "@popperjs/core" "^2.9.3"
+
+"@chakra-ui/portal@1.3.10":
+  version "1.3.10"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/portal/-/portal-1.3.10.tgz#d85b2cf1a8b3e2eca260d8e3ad485da0ee29856b"
+  integrity sha512-t2KQ6MXbyf1qFYxWw/bs//CnwD+Clq7mbsP1Y7g+THCz2FvlLlMj45BWocLB30NoNyA8WCS2zyMBszW2/qvDiA==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/progress@1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/progress/-/progress-1.2.6.tgz#4a3a40e826c8c72160d3c8ff411e86244e280ebc"
+  integrity sha512-thaHRIYTVktgV78vJMNwzfCX+ickhSpn2bun6FtGVUphFx4tjV+ggz+IGohm6AH2hapskoR1mQU2iNZb6BK0hQ==
+  dependencies:
+    "@chakra-ui/theme-tools" "1.3.6"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/provider@1.7.14":
+  version "1.7.14"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/provider/-/provider-1.7.14.tgz#74d19e3066ab02f2c14fa32d22dc12f8367b56f7"
+  integrity sha512-FCA33CZy/jFzExglKMioeri8sr9NtDTcNVPnx95ZJiA7WpfFo0xuZ6/fMC4DwIQPkJKbSIZBXYLZ3U10Ntylrw==
+  dependencies:
+    "@chakra-ui/css-reset" "1.1.3"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/portal" "1.3.10"
+    "@chakra-ui/react-env" "1.1.6"
+    "@chakra-ui/system" "1.12.1"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/radio@1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/radio/-/radio-1.5.1.tgz#d2b691fde944c20eb594873f72eb61dfb84b15da"
+  integrity sha512-zO5eShz+j68A7935jJ2q5u3brX/bjPEGh9Pj2+bnKbmC9Vva6jEzBSJsAx9n4WbkAzR3xDMGWsbpivFp8X1tJw==
+  dependencies:
+    "@chakra-ui/form-control" "1.6.0"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+    "@chakra-ui/visually-hidden" "1.1.6"
+
+"@chakra-ui/react-env@1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-env/-/react-env-1.1.6.tgz#9915b02fd1f8ca62ccf578eaec793f1c4dea78b0"
+  integrity sha512-L90LNvCfe04FTkN9OPok/o2e60zLJNBH8Im/5dUHvqy7dXLXok8ZDad5vEL46XmGbhe7O8fbxhG6FmAYdcCHrQ==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/react-utils@1.2.3", "@chakra-ui/react-utils@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-utils/-/react-utils-1.2.3.tgz#3356c9299bc8faada8fac6c5886ca65ec95bb5be"
+  integrity sha512-r8pUwCVVB7UPhb0AiRa9ZzSp4xkMz64yIeJ4O4aGy4WMw7TRH4j4QkbkE1YC9tQitrXrliOlvx4WWJR4VyiGpw==
+  dependencies:
+    "@chakra-ui/utils" "^1.10.4"
+
+"@chakra-ui/react@^1.0.0":
+  version "1.8.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react/-/react-1.8.8.tgz#ca697dea94d94138043ef6fd62836b39107b4abd"
+  integrity sha512-/XqL25J0i0h+usAXBngn/RTG2u1oQRzbhHe9tNHwFyNbx/izIADhQW/6ji06QU0KtaRIU77XvgSAyTtMJY1KmA==
+  dependencies:
+    "@chakra-ui/accordion" "1.4.11"
+    "@chakra-ui/alert" "1.3.7"
+    "@chakra-ui/avatar" "1.3.11"
+    "@chakra-ui/breadcrumb" "1.3.6"
+    "@chakra-ui/button" "1.5.10"
+    "@chakra-ui/checkbox" "1.7.1"
+    "@chakra-ui/close-button" "1.2.7"
+    "@chakra-ui/control-box" "1.1.6"
+    "@chakra-ui/counter" "1.2.10"
+    "@chakra-ui/css-reset" "1.1.3"
+    "@chakra-ui/editable" "1.4.2"
+    "@chakra-ui/form-control" "1.6.0"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/image" "1.1.10"
+    "@chakra-ui/input" "1.4.6"
+    "@chakra-ui/layout" "1.8.0"
+    "@chakra-ui/live-region" "1.1.6"
+    "@chakra-ui/media-query" "2.0.4"
+    "@chakra-ui/menu" "1.8.11"
+    "@chakra-ui/modal" "1.11.1"
+    "@chakra-ui/number-input" "1.4.7"
+    "@chakra-ui/pin-input" "1.7.10"
+    "@chakra-ui/popover" "1.11.9"
+    "@chakra-ui/popper" "2.4.3"
+    "@chakra-ui/portal" "1.3.10"
+    "@chakra-ui/progress" "1.2.6"
+    "@chakra-ui/provider" "1.7.14"
+    "@chakra-ui/radio" "1.5.1"
+    "@chakra-ui/react-env" "1.1.6"
+    "@chakra-ui/select" "1.2.11"
+    "@chakra-ui/skeleton" "1.2.14"
+    "@chakra-ui/slider" "1.5.11"
+    "@chakra-ui/spinner" "1.2.6"
+    "@chakra-ui/stat" "1.2.7"
+    "@chakra-ui/switch" "1.3.10"
+    "@chakra-ui/system" "1.12.1"
+    "@chakra-ui/table" "1.3.6"
+    "@chakra-ui/tabs" "1.6.10"
+    "@chakra-ui/tag" "1.2.7"
+    "@chakra-ui/textarea" "1.2.11"
+    "@chakra-ui/theme" "1.14.1"
+    "@chakra-ui/toast" "1.5.9"
+    "@chakra-ui/tooltip" "1.5.1"
+    "@chakra-ui/transition" "1.4.8"
+    "@chakra-ui/utils" "1.10.4"
+    "@chakra-ui/visually-hidden" "1.1.6"
+
+"@chakra-ui/select@1.2.11":
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/select/-/select-1.2.11.tgz#7762f2b7974a4587b4eb9536eb93b2295381aa9f"
+  integrity sha512-6Tis1+ZrRjQeWhQfziQn3ZdPphV5ccafpZOhiPdTcM2J1XcXOlII+9rHxvaW+jx7zQ5ly5o8kd7iXzalDgl5wA==
+  dependencies:
+    "@chakra-ui/form-control" "1.6.0"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/skeleton@1.2.14":
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/skeleton/-/skeleton-1.2.14.tgz#c2028b03a975c76b13aaecdbbe168872079177b8"
+  integrity sha512-R0v4DfQ2yjXCJf9SzhTmDb2PLx5//LxsRbjjgRa8qJCR4MZaGswPrekp4dP8YjY8aEYzuZbvHU12T3vqZBk2GA==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/media-query" "2.0.4"
+    "@chakra-ui/system" "1.12.1"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/slider@1.5.11":
+  version "1.5.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/slider/-/slider-1.5.11.tgz#e03585188547dad3dafdb4a4cbd64bfbf8a4025b"
+  integrity sha512-THkGU2BsA6XMosXcEVQkWVRftqUIAKCb+y4iEpR3C2ztqL7Fl/CbIGwyr5majhPhKc275rb8dfxwp8R0L0ZIiQ==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/spinner@1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/spinner/-/spinner-1.2.6.tgz#d85fb3d763a69d40570b591507c5087dba38e6c4"
+  integrity sha512-GoUCccN120fGRVgUtfuwcEjeoaxffB+XsgpxX7jhWloXf8b6lkqm68bsxX4Ybb2vGN1fANI98/45JmrnddZO/A==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+    "@chakra-ui/visually-hidden" "1.1.6"
+
+"@chakra-ui/stat@1.2.7":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/stat/-/stat-1.2.7.tgz#e173171d80f9e756966604e620987bbd7590d291"
+  integrity sha512-m76jumFW1N+mCG4ytrUz9Mh09nZtS4OQcADEvOslfdI5StwwuzasTA1tueaelPzdhBioMwFUWL05Fr1fXbPJ/Q==
+  dependencies:
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/utils" "1.10.4"
+    "@chakra-ui/visually-hidden" "1.1.6"
+
+"@chakra-ui/styled-system@1.19.0":
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-1.19.0.tgz#102fadaefc1a2dfd8e0c4837eafa660531a08419"
+  integrity sha512-z+bMfWs6jQGkpgarge1kmk78DuDhJIXRUMyRqZ3+CiIkze88bIIsww6mV2i8tEfUfTAvALeMnlYZ1DYsHsTTJw==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+    csstype "3.0.9"
+
+"@chakra-ui/switch@1.3.10":
+  version "1.3.10"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/switch/-/switch-1.3.10.tgz#6b0a3f199e6e654dbab6e01ccc762e1b29611c62"
+  integrity sha512-V6qDLY6oECCbPyu7alWWOAhSBI4+SAuT6XW/zEQbelkwuUOiGO1ax67rTXOmZ59A2AaV1gqQFxDh8AcbvwO5XQ==
+  dependencies:
+    "@chakra-ui/checkbox" "1.7.1"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/system@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-1.12.1.tgz#608655ef3f7cb82eedd8f20d2546458d90d77cce"
+  integrity sha512-Rp09/rMuPA3hF38OJxeQciGO9N0Ie1GxwHRAw1AFA/TY3fVyK9pNI5oN+J/1cAxq7v9yKdIr1YfnruJTI9xfEg==
+  dependencies:
+    "@chakra-ui/color-mode" "1.4.8"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/styled-system" "1.19.0"
+    "@chakra-ui/utils" "1.10.4"
+    react-fast-compare "3.2.0"
+
+"@chakra-ui/table@1.3.6":
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/table/-/table-1.3.6.tgz#e271676dc03cd4c684e4041df2cf394d86a28510"
+  integrity sha512-7agZAgAeDFKviqStvixqnLAH54+setzhx67EztioZTr5Xu+6hQ4rotfJbu8L4i587pcbNg98kCEXEkidjw0XRQ==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/tabs@1.6.10":
+  version "1.6.10"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tabs/-/tabs-1.6.10.tgz#503e528930f9ba467681279ee709c72ba24950b8"
+  integrity sha512-ClOOHT3Wnf3l9X4F2S6ysPsHMDgKSTgkXpB9Qe0odwpT49ZXNjSAYYaXzO16l+Eq/m2u1HzLkXVsL42HIeOiNQ==
+  dependencies:
+    "@chakra-ui/clickable" "1.2.6"
+    "@chakra-ui/descendant" "2.1.3"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/tag@1.2.7":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tag/-/tag-1.2.7.tgz#5861a92e83e63825f6fe563921d2704e921b585f"
+  integrity sha512-RKrKOol4i/CnpFfo3T9LMm1abaqM+5Bs0soQLbo1iJBbBACY09sWXrQYvveQ2GYzU/OrAUloHqqmKjyVGOlNtg==
+  dependencies:
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/textarea@1.2.11":
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/textarea/-/textarea-1.2.11.tgz#24209862cf9227d79228222b7cff2c50f7ff0add"
+  integrity sha512-RDWbMyC87/AFRX98EnVum5eig/7hhcvS1BrqW5lvmTgrpr7KVr80Dfa8hUj58Iq37Z7AqZijDPkBn/zg7bPdIg==
+  dependencies:
+    "@chakra-ui/form-control" "1.6.0"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/theme-tools@1.3.6", "@chakra-ui/theme-tools@^1.3.6":
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-1.3.6.tgz#2e5b5c192efd685c158e940a5cedcb0eb51f8602"
+  integrity sha512-Wxz3XSJhPCU6OwCHEyH44EegEDQHwvlsx+KDkUDGevOjUU88YuNqOVkKtgTpgMLNQcsrYZ93oPWZUJqqCVNRew==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+    "@ctrl/tinycolor" "^3.4.0"
+
+"@chakra-ui/theme@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-1.14.1.tgz#84ce1643d4d7c89509e714ac989bcf8acd5578b8"
+  integrity sha512-VeNZi+zD3yDwzvZm234Cy3vnalCzQ+dhAgpHdIYzGO1CYO8DPa+ROcQ70rUueL7dSvUz15KOiGTw6DAl7LXlGA==
+  dependencies:
+    "@chakra-ui/anatomy" "1.3.0"
+    "@chakra-ui/theme-tools" "1.3.6"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/toast@1.5.9":
+  version "1.5.9"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/toast/-/toast-1.5.9.tgz#45521dc521186ce88aad07a3796545d15a6f9697"
+  integrity sha512-rns04bGdMcG7Ijg45L+PfuEW4rCd0Ycraix4EJQhcl9RXI18G9sphmlp9feidhZAkI6Ukafq1YvyvkBfkKnIzQ==
+  dependencies:
+    "@chakra-ui/alert" "1.3.7"
+    "@chakra-ui/close-button" "1.2.7"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/theme" "1.14.1"
+    "@chakra-ui/transition" "1.4.8"
+    "@chakra-ui/utils" "1.10.4"
+    "@reach/alert" "0.13.2"
+
+"@chakra-ui/tooltip@1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tooltip/-/tooltip-1.5.1.tgz#c338476aa0f00fc89f6357bc22725329f90d8d5d"
+  integrity sha512-EUAlDdlCBt63VpEVtj/RkFjHQVN/xA9gEAumngQdi1Sp+OXPYCBM9GwSY0NwrM1RfKBnhPSH9wz7FwredJWeaw==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/popper" "2.4.3"
+    "@chakra-ui/portal" "1.3.10"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+    "@chakra-ui/visually-hidden" "1.1.6"
+
+"@chakra-ui/transition@1.4.8":
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/transition/-/transition-1.4.8.tgz#ac0f4675da929ae69fc9d6db6a1edf61e982772c"
+  integrity sha512-5uc8LEuCH7+0h++wqAav/EktTHOjbLDSTXQlU9fzPIlNNgyf2eXrHVN2AGMGKiMR9Z4gS7umQjZ54r0w/mZ/Fw==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/utils@1.10.4", "@chakra-ui/utils@^1.10.4":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-1.10.4.tgz#40a32d4efd8684b2e7432a40b285796383eacfd3"
+  integrity sha512-AM91VQQxw8F4F1WDA28mqKY6NFIOuzc2Ekkna88imy2OiqqmYH0xkq8J16L2qj4cLiLozpYqba3C79pWioy6FA==
+  dependencies:
+    "@types/lodash.mergewith" "4.6.6"
+    css-box-model "1.2.1"
+    framesync "5.3.0"
+    lodash.mergewith "4.6.2"
+
+"@chakra-ui/visually-hidden@1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-1.1.6.tgz#7a546a5aebe4779c8f18d65b1f0e56249720f28d"
+  integrity sha512-Xzy5bA0UA+IyMgwJizQYSEdgz8cC/tHdmFB3CniXzmpKTSK8mJddeEBl+cGbXHBzxEUhH7xF1eaS41O+0ezWEQ==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+
+"@ctrl/tinycolor@^3.4.0":
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz#75b4c27948c81e88ccd3a8902047bcd797f38d32"
+  integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
+
 "@emotion/babel-plugin-jsx-pragmatic@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.1.5.tgz#27debfe9c27c4d83574d509787ae553bf8a34d7e"
@@ -3168,6 +3735,59 @@
     "@lezer/lr" "^0.15.4"
     json5 "^2.2.1"
 
+"@motionone/animation@^10.12.0":
+  version "10.13.1"
+  resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.13.1.tgz#ebacb50df4b7eb4957cf398c221ae10852f28520"
+  integrity sha512-dxQ+1wWxL6iFHDy1uv6hhcPjIdOg36eDT56jN4LI7Z5HZRyLpq8x1t7JFQclo/IEIb+6Bk4atmyinGFdXVECuA==
+  dependencies:
+    "@motionone/easing" "^10.13.1"
+    "@motionone/types" "^10.13.0"
+    "@motionone/utils" "^10.13.1"
+    tslib "^2.3.1"
+
+"@motionone/dom@10.12.0":
+  version "10.12.0"
+  resolved "https://registry.yarnpkg.com/@motionone/dom/-/dom-10.12.0.tgz#ae30827fd53219efca4e1150a5ff2165c28351ed"
+  integrity sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==
+  dependencies:
+    "@motionone/animation" "^10.12.0"
+    "@motionone/generators" "^10.12.0"
+    "@motionone/types" "^10.12.0"
+    "@motionone/utils" "^10.12.0"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
+"@motionone/easing@^10.13.1":
+  version "10.13.1"
+  resolved "https://registry.yarnpkg.com/@motionone/easing/-/easing-10.13.1.tgz#7927b7fe96135989e37c2cda957e4101a4b85aa8"
+  integrity sha512-INEsInHHDHVgx0dp5qlXi1lMXBqYicgLMMSn3zfGzaIvcaEbI1Uz8BoyNV4BiclTupG7RYIh+T6BU83ZcEe74g==
+  dependencies:
+    "@motionone/utils" "^10.13.1"
+    tslib "^2.3.1"
+
+"@motionone/generators@^10.12.0":
+  version "10.13.1"
+  resolved "https://registry.yarnpkg.com/@motionone/generators/-/generators-10.13.1.tgz#d4989d887b864e0aefbbec63eed35ce298a73773"
+  integrity sha512-+HK5u2YcNJCckTTqfOLgSVcrWv2z1dVwrSZEMVJuAh0EnWEWGDJRvMBoPc0cFf/osbkA2Rq9bH2+vP0Ex/D8uw==
+  dependencies:
+    "@motionone/types" "^10.13.0"
+    "@motionone/utils" "^10.13.1"
+    tslib "^2.3.1"
+
+"@motionone/types@^10.12.0", "@motionone/types@^10.13.0":
+  version "10.13.0"
+  resolved "https://registry.yarnpkg.com/@motionone/types/-/types-10.13.0.tgz#b22c549931ebd88ed5528158b5d611dc9dbb3756"
+  integrity sha512-qegk4qg8U1N9ZwAJ187BG3TkZz1k9LP/pvNtCSlqdq/PMUDKlCFG4ZnjJ481P0IOH/vIw1OzIbKIuyg0A3rk9g==
+
+"@motionone/utils@^10.12.0", "@motionone/utils@^10.13.1":
+  version "10.13.1"
+  resolved "https://registry.yarnpkg.com/@motionone/utils/-/utils-10.13.1.tgz#14919dfcda36b54b184fff690bc0125d554f60cd"
+  integrity sha512-TjDPTIppaf3ofBXQv4ZzAketJgN0sclALXfZ6mfrkjJkOy83mLls9744F+6S+VKCpBmvbZcBY4PQfrfhAfeMtA==
+  dependencies:
+    "@motionone/types" "^10.13.0"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
 "@netlify/functions@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@netlify/functions/-/functions-1.0.0.tgz#5b6c02fafc567033c93b15a080cc021e5f10f254"
@@ -3550,6 +4170,38 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
+"@popperjs/core@^2.9.3":
+  version "2.11.5"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
+  integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
+
+"@reach/alert@0.13.2":
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/@reach/alert/-/alert-0.13.2.tgz#71c4a848d51341f1d6d9eaae060975391c224870"
+  integrity sha512-LDz83AXCrClyq/MWe+0vaZfHp1Ytqn+kgL5VxG7rirUvmluWaj/snxzfNPWn0Ma4K2YENmXXRC/iHt5X95SqIg==
+  dependencies:
+    "@reach/utils" "0.13.2"
+    "@reach/visually-hidden" "0.13.2"
+    prop-types "^15.7.2"
+    tslib "^2.1.0"
+
+"@reach/utils@0.13.2":
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.13.2.tgz#87e8fef8ebfe583fa48250238a1a3ed03189fcc8"
+  integrity sha512-3ir6cN60zvUrwjOJu7C6jec/samqAeyAB12ZADK+qjnmQPdzSYldrFWwDVV5H0WkhbYXR3uh+eImu13hCetNPQ==
+  dependencies:
+    "@types/warning" "^3.0.0"
+    tslib "^2.1.0"
+    warning "^4.0.3"
+
+"@reach/visually-hidden@0.13.2":
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.13.2.tgz#ee21de376a7e57e60dc92d95a671073796caa17e"
+  integrity sha512-sPZwNS0/duOuG0mYwE5DmgEAzW9VhgU3aIt1+mrfT/xiT9Cdncqke+kRBQgU708q/Ttm9tWsoHni03nn/SuPTQ==
+  dependencies:
+    prop-types "^15.7.2"
+    tslib "^2.1.0"
+
 "@sideway/address@^4.1.3":
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.3.tgz#d93cce5d45c5daec92ad76db492cc2ee3c64ab27"
@@ -3873,7 +4525,14 @@
   dependencies:
     "@types/node" "*"
 
-"@types/lodash@^4.14.92":
+"@types/lodash.mergewith@4.6.6":
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.mergewith/-/lodash.mergewith-4.6.6.tgz#c4698f5b214a433ff35cb2c75ee6ec7f99d79f10"
+  integrity sha512-RY/8IaVENjG19rxTZu9Nukqh0W2UrYgmBj5sdns4hWRZaV8PqR7wIKHFKzvOTjo4zVRV7sVI+yFhAJql12Kfqg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*", "@types/lodash@^4.14.92":
   version "4.14.182"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
   integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
@@ -4066,6 +4725,11 @@
     "@types/unist" "*"
     "@types/vfile-message" "*"
 
+"@types/warning@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
+  integrity sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==
+
 "@types/websocket@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@types/websocket/-/websocket-1.0.2.tgz#d2855c6a312b7da73ed16ba6781815bf30c6187a"
@@ -4723,6 +5387,13 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+aria-hidden@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.1.3.tgz#bb48de18dc84787a3c6eee113709c473c64ec254"
+  integrity sha512-RhVWFtKH5BiGMycI72q2RAFMLQi8JP9bLuQXgR5a8Znp7P5KOIADSJeyfI8PCVxLEp067B2HbP5JIiI/PXIZeA==
+  dependencies:
+    tslib "^1.0.0"
+
 aria-query@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@@ -6126,6 +6797,11 @@ compression@^1.7.4:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
+compute-scroll-into-view@1.0.14:
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.14.tgz#80e3ebb25d6aa89f42e533956cb4b16a04cfe759"
+  integrity sha512-mKDjINe3tc6hGelUMNDzuhorIUZ7kS7BwyY0r2wQd2HOH2tRuJykiC06iSEX8y1TuhNzvz4GcJnK16mM2J1NMQ==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -6246,6 +6922,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@3.9.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.9.0.tgz#29da39385f16b71e1915565aa0385c4e0963ad56"
@@ -6424,6 +7107,13 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
+css-box-model@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
+  dependencies:
+    tiny-invariant "^1.0.6"
+
 css-declaration-sorter@^6.0.3:
   version "6.1.3"
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz#e9852e4cf940ba79f509d9425b137d1f94438dc2"
@@ -6619,6 +7309,11 @@ csso@^4.0.2, csso@^4.2.0:
   dependencies:
     css-tree "^1.1.2"
 
+csstype@3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
+  integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
+
 csstype@^3.0.2:
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
@@ -6904,6 +7599,11 @@ detect-libc@^2.0.0, detect-libc@^2.0.1:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.1.tgz#e1897aa88fa6ad197862937fbc0441ef352ee0cd"
   integrity sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==
 
+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 detect-port-alt@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/detect-port-alt/-/detect-port-alt-1.1.6.tgz#24707deabe932d4a3cf621302027c2b266568275"
@@ -8249,6 +8949,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+focus-lock@^0.9.1:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.9.2.tgz#9d30918aaa99b1b97677731053d017f82a540d5b"
+  integrity sha512-YtHxjX7a0IC0ZACL5wsX8QdncXofWpGPNoVMuI/nZUrPGp6LmNI6+D5j0pPj+v8Kw5EpweA+T5yImK0rnWf7oQ==
+  dependencies:
+    tslib "^2.0.3"
+
 focus-trap-react@^8.11.2:
   version "8.11.2"
   resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-8.11.2.tgz#92c6dc65bc96cbc14660a5f4b3bd434b61c1960b"
@@ -8327,15 +9034,16 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
-framer-motion@^4.1.3:
-  version "4.1.17"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-4.1.17.tgz#4029469252a62ea599902e5a92b537120cc89721"
-  integrity sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==
+framer-motion@^6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.5.1.tgz#802448a16a6eb764124bf36d8cbdfa6dd6b931a7"
+  integrity sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==
   dependencies:
-    framesync "5.3.0"
+    "@motionone/dom" "10.12.0"
+    framesync "6.0.1"
     hey-listen "^1.0.8"
-    popmotion "9.3.6"
-    style-value-types "4.1.4"
+    popmotion "11.0.3"
+    style-value-types "5.0.0"
     tslib "^2.1.0"
   optionalDependencies:
     "@emotion/is-prop-valid" "^0.8.2"
@@ -8347,6 +9055,13 @@ framesync@5.3.0:
   dependencies:
     tslib "^2.1.0"
 
+framesync@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
+  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+  dependencies:
+    tslib "^2.1.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -9280,6 +9995,11 @@ get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-port@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
@@ -11299,6 +12019,11 @@ lodash.merge@^4.4.0, lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash.mergewith@4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
+  integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
+
 lodash.pick@^4.2.1:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
@@ -13021,14 +13746,14 @@ polished@^4.1.4:
   dependencies:
     "@babel/runtime" "^7.16.7"
 
-popmotion@9.3.6:
-  version "9.3.6"
-  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.3.6.tgz#b5236fa28f242aff3871b9e23721f093133248d1"
-  integrity sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==
+popmotion@11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
+  integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
   dependencies:
-    framesync "5.3.0"
+    framesync "6.0.1"
     hey-listen "^1.0.8"
-    style-value-types "4.1.4"
+    style-value-types "5.0.0"
     tslib "^2.1.0"
 
 posix-character-classes@^0.1.0:
@@ -13703,6 +14428,13 @@ rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-clientside-effect@^1.2.5:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a"
+  integrity sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+
 react-countdown@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/react-countdown/-/react-countdown-2.3.2.tgz#4cc27f28f2dcd47237ee66e4b9f6d2a21fc0b0ad"
@@ -13765,11 +14497,23 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-fast-compare@^3.0.0, react-fast-compare@^3.1.1:
+react-fast-compare@3.2.0, react-fast-compare@^3.0.0, react-fast-compare@^3.1.1:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
+react-focus-lock@2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.5.2.tgz#f1e4db5e25cd8789351f2bd5ebe91e9dcb9c2922"
+  integrity sha512-WzpdOnEqjf+/A3EH9opMZWauag7gV0BxFl+EY4ElA4qFqYsUsBLnmo2sELbN5OC30S16GAWMy16B9DLPpdJKAQ==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    focus-lock "^0.9.1"
+    prop-types "^15.6.2"
+    react-clientside-effect "^1.2.5"
+    use-callback-ref "^1.2.5"
+    use-sidecar "^1.0.5"
+
 react-helmet@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
@@ -13852,6 +14596,25 @@ react-refresh@^0.9.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.9.0.tgz#71863337adc3e5c2f8a6bfddd12ae3bfe32aafbf"
   integrity sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==
 
+react-remove-scroll-bar@^2.1.0:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.3.tgz#e291f71b1bb30f5f67f023765b7435f4b2b2cd94"
+  integrity sha512-i9GMNWwpz8XpUpQ6QlevUtFjHGqnPG4Hxs+wlIJntu/xcsZVEpJcIV71K3ZkqNy2q3GfgvkD7y6t/Sv8ofYSbw==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
+react-remove-scroll@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.4.1.tgz#e0af6126621083a5064591d367291a81b2d107f5"
+  integrity sha512-K7XZySEzOHMTq7dDwcHsZA6Y7/1uX5RsWhRXVYv8rdh+y9Qz2nMwl9RX/Mwnj/j7JstCGmxyfyC0zbVGXYh3mA==
+  dependencies:
+    react-remove-scroll-bar "^2.1.0"
+    react-style-singleton "^2.1.0"
+    tslib "^1.0.0"
+    use-callback-ref "^1.2.3"
+    use-sidecar "^1.0.1"
+
 react-resize-detector@^7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-7.1.2.tgz#8ef975dd8c3d56f9a5160ac382ef7136dcd2d86c"
@@ -13893,6 +14656,15 @@ react-smooth@^2.0.1:
     fast-equals "^2.0.0"
     react-transition-group "2.9.0"
 
+react-style-singleton@^2.1.0, react-style-singleton@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
+  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^2.0.0"
+
 react-test-renderer@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
@@ -15387,10 +16159,10 @@ style-to-object@^0.2.1:
   dependencies:
     inline-style-parser "0.1.1"
 
-style-value-types@4.1.4:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-4.1.4.tgz#80f37cb4fb024d6394087403dfb275e8bb627e75"
-  integrity sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==
+style-value-types@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
+  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
   dependencies:
     hey-listen "^1.0.8"
     tslib "^2.1.0"
@@ -15691,6 +16463,11 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tiny-invariant@^1.0.6:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
+  integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
+
 tinycolor2@^1.4.1:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
@@ -15772,6 +16549,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
@@ -15866,12 +16648,12 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.0.0, tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@~2.4.0:
+tslib@^2, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.3.1, tslib@~2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
@@ -16405,6 +17187,21 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-callback-ref@^1.2.3, use-callback-ref@^1.2.5:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
+  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
+  dependencies:
+    tslib "^2.0.0"
+
+use-sidecar@^1.0.1, use-sidecar@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
+  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@@ -16564,6 +17361,13 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"

From 665bf746327444347913eebcee1741f5bb1c3e09 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Tue, 26 Jul 2022 19:33:59 -0300
Subject: [PATCH 03/15] tmp

---
 gatsby-config.ts                      |  7 ++++++-
 src/@chakra-ui/gatsby-plugin/theme.ts | 12 +++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/gatsby-config.ts b/gatsby-config.ts
index b4099fcff70..1596923a6bc 100644
--- a/gatsby-config.ts
+++ b/gatsby-config.ts
@@ -185,7 +185,12 @@ const config: GatsbyConfig = {
       },
     },
     // CSS in JS
-    `gatsby-plugin-emotion`,
+    {
+      resolve: `gatsby-plugin-emotion`,
+      options: {
+        labelFormat: "[filename]--[local]",
+      },
+    },
     {
       resolve: "@chakra-ui/gatsby-plugin",
       options: {
diff --git a/src/@chakra-ui/gatsby-plugin/theme.ts b/src/@chakra-ui/gatsby-plugin/theme.ts
index 6e1d4c2a56d..88eb9bbfba8 100644
--- a/src/@chakra-ui/gatsby-plugin/theme.ts
+++ b/src/@chakra-ui/gatsby-plugin/theme.ts
@@ -1,9 +1,15 @@
-import { extendTheme } from "@chakra-ui/react"
+import { extendTheme, type ThemeConfig, type Theme } from "@chakra-ui/react"
 
-const theme = {
+const config: ThemeConfig = {
+  cssVarPrefix: "eth",
+  initialColorMode: "light",
+  useSystemColorMode: false,
+}
+
+const theme: Theme = {
   colors: {
     primary: "rebeccapurple",
   },
 }
 
-export default extendTheme(theme)
+export default extendTheme({ config, theme })

From a47a5e5c5db86ac231b667399840c77a29bbd923 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Sat, 30 Jul 2022 20:31:44 -0300
Subject: [PATCH 04/15] read dark mode from chakra state

---
 src/components/Layout.tsx    | 28 ++++++----------------------
 src/components/Nav/index.tsx | 12 +++++++-----
 2 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 7a42fa2af56..934adebeaf4 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react"
 import { ApolloProvider } from "@apollo/client"
+import { useColorMode } from "@chakra-ui/react"
 import { ThemeProvider } from "@emotion/react"
 import styled from "@emotion/styled"
 import { IntlProvider } from "react-intl"
@@ -87,25 +88,18 @@ const Layout: React.FC<IProps> = ({
   pageContext,
   children,
 }) => {
-  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(false)
+  const { colorMode } = useColorMode()
   const [isZenMode, setIsZenMode] = useState<boolean>(false)
   const [shouldShowSideNav, setShouldShowSideNav] = useState<boolean>(false)
 
+  const isDarkTheme = colorMode === "dark"
+
   const locale = pageContext.locale
   const messages = require(`../intl/${locale}.json`)
 
   // Exit Zen Mode on 'esc' click
   useKeyPress(`Escape`, () => handleZenModeChange(false))
 
-  // set isDarkTheme based on browser/app user preferences
-  useEffect(() => {
-    if (localStorage && localStorage.getItem("dark-theme") !== null) {
-      setIsDarkTheme(localStorage.getItem("dark-theme") === "true")
-    } else {
-      setIsDarkTheme(window.matchMedia("(prefers-color-scheme: dark)").matches)
-    }
-  }, [])
-
   useEffect(() => {
     if (path.includes("/docs/")) {
       setShouldShowSideNav(true)
@@ -125,13 +119,6 @@ const Layout: React.FC<IProps> = ({
     }
   }, [path, location])
 
-  const handleThemeChange = (): void => {
-    setIsDarkTheme(!isDarkTheme)
-    if (localStorage) {
-      localStorage.setItem("dark-theme", String(!isDarkTheme))
-    }
-  }
-
   const handleZenModeChange = (val?: boolean): void => {
     // Use 'val' param if provided. Otherwise toggle
     const newVal = val !== undefined ? val : !isZenMode
@@ -142,6 +129,7 @@ const Layout: React.FC<IProps> = ({
     }
   }
 
+  // TODO: tmp - for backward compatibility with old theme
   const theme = isDarkTheme ? darkTheme : lightTheme
 
   const isPageLanguageEnglish = pageContext.isDefaultLang
@@ -177,11 +165,7 @@ const Layout: React.FC<IProps> = ({
             />
             <ContentContainer>
               <VisuallyHidden isHidden={isZenMode}>
-                <Nav
-                  handleThemeChange={handleThemeChange}
-                  isDarkTheme={isDarkTheme}
-                  path={path}
-                />
+                <Nav path={path} />
                 {shouldShowSideNav && <SideNavMobile path={path} />}
               </VisuallyHidden>
               <SkipLinkAnchor id="main-content" />
diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx
index a5700191369..ab57b976468 100644
--- a/src/components/Nav/index.tsx
+++ b/src/components/Nav/index.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react"
+import { useColorMode } from "@chakra-ui/react"
 import styled from "@emotion/styled"
 import { cloneDeep } from "lodash"
 import { useIntl } from "react-intl"
@@ -133,17 +134,18 @@ const NavIcon = styled(Icon)`
 `
 
 export interface IProps {
-  handleThemeChange: () => void
-  isDarkTheme: boolean
   path: string
 }
 
 // TODO display page title on mobile
-const Nav: React.FC<IProps> = ({ handleThemeChange, isDarkTheme, path }) => {
+const Nav: React.FC<IProps> = ({ path }) => {
+  const { colorMode, toggleColorMode } = useColorMode()
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [isSearchOpen, setIsSearchOpen] = useState(false)
   const intl = useIntl()
 
+  const isDarkTheme = colorMode === "dark"
+
   const linkSections: ISections = {
     useEthereum: {
       text: "use-ethereum",
@@ -431,7 +433,7 @@ const Nav: React.FC<IProps> = ({ handleThemeChange, isDarkTheme, path }) => {
             <RightItems>
               <Search useKeyboardShortcut />
               <ThemeToggle
-                onClick={handleThemeChange}
+                onClick={toggleColorMode}
                 aria-label={
                   isDarkTheme ? "Switch to Light Theme" : "Switch to Dark Theme"
                 }
@@ -452,7 +454,7 @@ const Nav: React.FC<IProps> = ({ handleThemeChange, isDarkTheme, path }) => {
             isSearchOpen={isSearchOpen}
             isDarkTheme={isDarkTheme}
             toggleMenu={handleMenuToggle}
-            toggleTheme={handleThemeChange}
+            toggleTheme={toggleColorMode}
             linkSections={mobileLinkSections}
           />
         </NavContent>

From adafb66445a9516f83a5e82127315cfb5436ad41 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Sun, 31 Jul 2022 01:18:12 -0300
Subject: [PATCH 05/15] refactor global styles

---
 .../gatsby-plugin/foundations/colors.ts       |  12 +
 .../gatsby-plugin/foundations/index.ts        |  17 +
 src/@chakra-ui/gatsby-plugin/styles.ts        |   5 +
 src/@chakra-ui/gatsby-plugin/theme.ts         |  22 +-
 src/components/GlobalStyle.tsx                | 674 +++++++++++++++++-
 src/components/Layout.tsx                     |   3 +-
 src/styles/layout.css                         | 634 ----------------
 7 files changed, 690 insertions(+), 677 deletions(-)
 create mode 100644 src/@chakra-ui/gatsby-plugin/foundations/colors.ts
 create mode 100644 src/@chakra-ui/gatsby-plugin/foundations/index.ts
 create mode 100644 src/@chakra-ui/gatsby-plugin/styles.ts
 delete mode 100644 src/styles/layout.css

diff --git a/src/@chakra-ui/gatsby-plugin/foundations/colors.ts b/src/@chakra-ui/gatsby-plugin/foundations/colors.ts
new file mode 100644
index 00000000000..b8975b4ce03
--- /dev/null
+++ b/src/@chakra-ui/gatsby-plugin/foundations/colors.ts
@@ -0,0 +1,12 @@
+export type Colors = typeof colors
+
+const colors = {
+  blue: {
+    500: "#1c1cff",
+  },
+  orange: {
+    500: "#ff7324",
+  },
+}
+
+export default colors
diff --git a/src/@chakra-ui/gatsby-plugin/foundations/index.ts b/src/@chakra-ui/gatsby-plugin/foundations/index.ts
new file mode 100644
index 00000000000..288b129c2c9
--- /dev/null
+++ b/src/@chakra-ui/gatsby-plugin/foundations/index.ts
@@ -0,0 +1,17 @@
+import colors from "./colors"
+
+const foundations = {
+  // breakpoints,
+  // zIndices,
+  // radii,
+  // blur,
+  colors,
+  // ...typography,
+  // sizes,
+  // shadows,
+  // space: spacing,
+  // borders,
+  // transition,
+}
+
+export default foundations
diff --git a/src/@chakra-ui/gatsby-plugin/styles.ts b/src/@chakra-ui/gatsby-plugin/styles.ts
new file mode 100644
index 00000000000..8546f84b29d
--- /dev/null
+++ b/src/@chakra-ui/gatsby-plugin/styles.ts
@@ -0,0 +1,5 @@
+const styles = {
+  global: (props) => ({}),
+}
+
+export default styles
diff --git a/src/@chakra-ui/gatsby-plugin/theme.ts b/src/@chakra-ui/gatsby-plugin/theme.ts
index 88eb9bbfba8..23de2cd1d59 100644
--- a/src/@chakra-ui/gatsby-plugin/theme.ts
+++ b/src/@chakra-ui/gatsby-plugin/theme.ts
@@ -1,4 +1,14 @@
-import { extendTheme, type ThemeConfig, type Theme } from "@chakra-ui/react"
+import {
+  extendTheme,
+  type ThemeConfig,
+  type ThemeOverride,
+} from "@chakra-ui/react"
+
+// Global style overrides
+import styles from "./styles"
+
+// Foundational style overrides
+import foundations from "./foundations"
 
 const config: ThemeConfig = {
   cssVarPrefix: "eth",
@@ -6,10 +16,10 @@ const config: ThemeConfig = {
   useSystemColorMode: false,
 }
 
-const theme: Theme = {
-  colors: {
-    primary: "rebeccapurple",
-  },
+const theme: ThemeOverride = {
+  config,
+  styles,
+  ...foundations,
 }
 
-export default extendTheme({ config, theme })
+export default extendTheme(theme)
diff --git a/src/components/GlobalStyle.tsx b/src/components/GlobalStyle.tsx
index 6932e0878d0..92befe4f9dc 100644
--- a/src/components/GlobalStyle.tsx
+++ b/src/components/GlobalStyle.tsx
@@ -7,13 +7,648 @@ const GlobalStyle: React.FC = () => {
   return (
     <Global
       styles={css`
+        /* ==================================== */
+        /* Legacy global styles from layout.css */
+        /* ==================================== */
+
+        html {
+          font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
+            Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji,
+            Segoe UI Emoji, Segoe UI Symbol;
+          -ms-text-size-adjust: 100%;
+          -webkit-text-size-adjust: 100%;
+          font-size: 1rem;
+        }
         body {
-          background-color: ${theme.colors.background};
-          color: ${theme.colors.text};
+          margin: 0;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+        }
+
+        article,
+        aside,
+        details,
+        figcaption,
+        figure,
+        footer,
+        header,
+        main,
+        menu,
+        nav,
+        section,
+        summary {
+          display: block;
+        }
+        audio,
+        canvas,
+        progress,
+        video {
+          display: inline-block;
+        }
+        audio:not([controls]) {
+          display: none;
+          height: 0;
+        }
+        progress {
+          vertical-align: baseline;
+        }
+        [hidden],
+        template {
+          display: none;
         }
         a {
-          color: ${theme.colors.primary};
+          background-color: transparent;
+          text-decoration: none;
+          -webkit-text-decoration-skip: objects;
+        }
+        a:active,
+        a:hover {
+          outline-width: 0;
+        }
+        abbr[title] {
+          border-bottom: none;
           text-decoration: underline;
+          text-decoration: underline dotted;
+        }
+        b,
+        strong {
+          font-weight: inherit;
+          font-weight: bolder;
+        }
+        dfn {
+          font-style: italic;
+        }
+        mark {
+          background-color: #ffff00;
+          color: #000000;
+        }
+        small {
+          font-size: 80%;
+        }
+        sub,
+        sup {
+          font-size: 75%;
+          line-height: 0;
+          position: relative;
+          vertical-align: baseline;
+        }
+        sub {
+          bottom: -0.25em;
+        }
+        sup {
+          top: -0.5em;
+        }
+        img {
+          border-style: none;
+        }
+        svg:not(:root) {
+          overflow: hidden;
+        }
+        code,
+        kbd,
+        pre,
+        samp {
+          font-family: "SFMono-Regular", Consolas, "Roboto Mono",
+            "Droid Sans Mono", "Liberation Mono", Menlo, Courier, monospace;
+          font-size: 1em;
+        }
+        figure {
+          margin: 1em 40px;
+        }
+        hr {
+          box-sizing: content-box;
+          height: 0;
+          overflow: visible;
+        }
+        button,
+        input,
+        optgroup,
+        select,
+        textarea {
+          font: inherit;
+          margin: 0;
+        }
+        optgroup {
+          font-weight: 700;
+        }
+        button,
+        input {
+          overflow: visible;
+        }
+        button,
+        select {
+          text-transform: none;
+        }
+        [type="reset"],
+        [type="submit"],
+        button,
+        html [type="button"] {
+          -webkit-appearance: button;
+        }
+        [type="button"]::-moz-focus-inner,
+        [type="reset"]::-moz-focus-inner,
+        [type="submit"]::-moz-focus-inner,
+        button::-moz-focus-inner {
+          border-style: none;
+          padding: 0;
+        }
+        [type="button"]:-moz-focusring,
+        [type="reset"]:-moz-focusring,
+        [type="submit"]:-moz-focusring,
+        button:-moz-focusring {
+          outline: 1px dotted ButtonText;
+        }
+        fieldset {
+          border: 1px solid silver;
+          margin: 0 2px;
+          padding: 0.35em 0.625em 0.75em;
+        }
+        legend {
+          box-sizing: border-box;
+          color: inherit;
+          display: table;
+          max-width: 100%;
+          padding: 0;
+          white-space: normal;
+        }
+        textarea {
+          overflow: auto;
+        }
+        [type="checkbox"],
+        [type="radio"] {
+          box-sizing: border-box;
+          padding: 0;
+        }
+        [type="number"]::-webkit-inner-spin-button,
+        [type="number"]::-webkit-outer-spin-button {
+          height: auto;
+        }
+        [type="search"] {
+          -webkit-appearance: textfield;
+          outline-offset: -2px;
+        }
+        [type="search"]::-webkit-search-cancel-button,
+        [type="search"]::-webkit-search-decoration {
+          -webkit-appearance: none;
+        }
+        ::-webkit-input-placeholder {
+          color: inherit;
+          opacity: 0.54;
+        }
+        ::-webkit-file-upload-button {
+          -webkit-appearance: button;
+          font: inherit;
+        }
+        html {
+          font: 100%/1.6em georgia, serif;
+          box-sizing: border-box;
+          overflow-y: scroll;
+        }
+        * {
+          box-sizing: inherit;
+          scroll-margin-top: 6rem;
+        }
+        *:before {
+          box-sizing: inherit;
+        }
+        *:after {
+          box-sizing: inherit;
+        }
+        body {
+          font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
+            Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji,
+            Segoe UI Emoji, Segoe UI Symbol;
+          font-weight: normal;
+          word-wrap: break-word;
+          font-kerning: normal;
+          -moz-font-feature-settings: "kern", "liga", "clig", "calt";
+          -ms-font-feature-settings: "kern", "liga", "clig", "calt";
+          -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
+          font-feature-settings: "kern", "liga", "clig", "calt";
+        }
+        img {
+          max-width: 100%;
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+        }
+        h1 {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+          color: inherit;
+          font-weight: 500;
+          text-rendering: optimizeLegibility;
+          font-size: 2.25rem;
+          line-height: 1.1;
+        }
+        h2 {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+          color: inherit;
+          font-weight: 700;
+          text-rendering: optimizeLegibility;
+          font-size: 1.62671rem;
+          line-height: 1.1;
+        }
+        h3 {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 2rem;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+          color: inherit;
+          font-weight: 500;
+          text-rendering: optimizeLegibility;
+          font-size: 1.38316rem;
+          line-height: 1.1;
+        }
+        h4 {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 2rem;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+          color: inherit;
+          font-weight: 600;
+          text-rendering: optimizeLegibility;
+          font-size: 1.2rem;
+          line-height: 1.1;
+        }
+        h5 {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 2rem;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+          color: inherit;
+          font-weight: 500;
+          text-rendering: optimizeLegibility;
+          font-size: 1rem;
+          line-height: 1.1;
+        }
+        h6 {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+          color: inherit;
+          font-weight: 500;
+          text-rendering: optimizeLegibility;
+          font-size: 0.85028rem;
+          line-height: 1.1;
+        }
+        hgroup {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+        }
+        ul {
+          margin-left: 1.45rem;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+          list-style-position: outside;
+          list-style-image: none;
+        }
+        ol {
+          margin-left: 1.45rem;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+          list-style-position: outside;
+          list-style-image: none;
+        }
+        dl {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+        }
+        dd {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+        }
+        p {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+        }
+        figure {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+        }
+        pre {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          margin-bottom: 1.45rem;
+          font-size: 0.85rem;
+          line-height: 1.42;
+          background: hsla(0, 0%, 0%, 0.04);
+          border-radius: 3px;
+          overflow: auto;
+          word-wrap: normal;
+          white-space: pre-wrap;
+          padding: 1.45rem;
+        }
+        table {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+          font-size: 1rem;
+          line-height: 1.45rem;
+          border-collapse: collapse;
+          width: 100%;
+        }
+        th,
+        td {
+          hyphens: auto;
+        }
+        fieldset {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+        }
+        blockquote {
+          margin-left: 1.45rem;
+          margin-right: 1.45rem;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+        }
+        form {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+        }
+        noscript {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+        }
+        iframe {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+        }
+        hr {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 4rem;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 0;
+          background: hsla(0, 0%, 0%, 0.2);
+          border: none;
+          height: 1px;
+        }
+        address {
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 0;
+          margin-bottom: 1.45rem;
+        }
+        b {
+          font-weight: bold;
+        }
+        strong {
+          font-weight: bold;
+        }
+        dt {
+          font-weight: bold;
+        }
+        th {
+          font-weight: bold;
+        }
+        li {
+          margin-bottom: calc(1.45rem / 2);
+        }
+        ol li {
+          padding-left: 0;
+        }
+        ul li {
+          padding-left: 0;
+        }
+        li > ol {
+          margin-left: 1.45rem;
+          margin-bottom: calc(1.45rem / 2);
+          margin-top: calc(1.45rem / 2);
+        }
+        li > ul {
+          margin-left: 1.45rem;
+          margin-bottom: calc(1.45rem / 2);
+          margin-top: calc(1.45rem / 2);
+        }
+        blockquote *:last-child {
+          margin-bottom: 0;
+        }
+        li *:last-child {
+          margin-bottom: 0;
+        }
+        p *:last-child {
+          margin-bottom: 0;
+        }
+        li > p {
+          margin-bottom: calc(1.45rem / 2);
+        }
+        code {
+          font-size: 1em;
+          line-height: 1.45em;
+        }
+        kbd {
+          font-family: "SFMono-Regular", Consolas, "Roboto Mono",
+            "Droid Sans Mono", "Liberation Mono", Menlo, Courier, monospace;
+          font-size: 0.625rem;
+          line-height: 1.56rem;
+        }
+        samp {
+          font-size: 0.85rem;
+          line-height: 1.45rem;
+        }
+        abbr {
+          border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+          cursor: help;
+        }
+        acronym {
+          border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+          cursor: help;
+        }
+        abbr[title] {
+          border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+          cursor: help;
+          text-decoration: none;
+        }
+        thead {
+          text-align: left;
+        }
+        td,
+        th {
+          text-align: left;
+          border-bottom: 1px solid hsla(0, 13%, 72%, 0.12);
+          font-feature-settings: "tnum";
+          -moz-font-feature-settings: "tnum";
+          -ms-font-feature-settings: "tnum";
+          -webkit-font-feature-settings: "tnum";
+          padding-left: 0.96667rem;
+          padding-right: 0.96667rem;
+          padding-top: 0.725rem;
+          padding-bottom: calc(0.725rem - 1px);
+        }
+        th:first-child,
+        td:first-child {
+          padding-left: 0;
+        }
+        th:last-child,
+        td:last-child {
+          padding-right: 0;
+        }
+        tt {
+          background-color: hsla(255, 13%, 18%, 1);
+          color: #968af6;
+          border-radius: 2px;
+          font-family: "SFMono-Regular", Consolas, "Roboto Mono",
+            "Droid Sans Mono", "Liberation Mono", Menlo, Courier, monospace;
+          padding: 0.2em;
+        }
+        code {
+          background-color: hsla(0, 0%, 0%, 0.04);
+          border-radius: 3px;
+          font-family: "SFMono-Regular", Consolas, "Roboto Mono",
+            "Droid Sans Mono", "Liberation Mono", Menlo, Courier, monospace;
+          padding: 0.2em;
+        }
+        pre code {
+          background: none;
+          line-height: 1.42;
+        }
+        code:before,
+        tt:before,
+        tt:after,
+        pre code:before,
+        pre code:after,
+        pre tt:before,
+        pre tt:after {
+          content: "";
+        }
+        @media only screen and (max-width: 480px) {
+          html {
+            font-size: 100%;
+          }
+        }
+
+        /* Assets page */
+
+        .assets-page .gatsby-resp-image-wrapper {
+          max-height: 200px !important;
+        }
+        .assets-page .gatsby-resp-image-image {
+          width: auto !important;
+        }
+
+        /* =========================================== */
+        /* END OF LEGACY GLOBAL STYLES from layout.css */
+        /* =========================================== */
+
+        body {
+          background-color: ${theme.colors.background};
+          color: ${theme.colors.text};
         }
         mark {
           background: ${theme.colors.markBackground};
@@ -28,37 +663,6 @@ const GlobalStyle: React.FC = () => {
           background: ${theme.colors.lightBorder};
         }
 
-        /* Legacy styles from lists.styl */
-        ul {
-          font-size: 1rem;
-          line-height: 1.6;
-          font-weight: 400;
-          margin: 2rem 0 1rem;
-          padding: 0;
-          margin: 1em;
-          list-style-type: none;
-          list-style-image: none;
-        }
-
-        li {
-          padding-left: 0.5em;
-          margin-bottom: 0.5em;
-          p:first-of-type {
-            margin-top: 0;
-          }
-          p:last-of-type {
-            margin-bottom: 0;
-          }
-          &:before {
-            content: "\2022";
-            color: ${theme.colors.primary};
-            display: inline-block;
-            width: 1em;
-            margin-left: -1em;
-            position: absolute;
-          }
-        }
-
         /* YouTube embeds */
         iframe {
           display: block;
@@ -146,7 +750,7 @@ const GlobalStyle: React.FC = () => {
           vertical-align: middle;
 
           svg {
-            fill: ${theme.colors.primary}};
+            fill: ${theme.colors.primary};
             visibility: hidden;
           }
         }
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 934adebeaf4..33895c1a7fe 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -7,6 +7,7 @@ import { IntlProvider } from "react-intl"
 import { LocaleProvider } from "gatsby-theme-i18n"
 
 import { lightTheme, darkTheme } from "../theme"
+import GlobalStyle from "./GlobalStyle"
 
 import Footer from "./Footer"
 import VisuallyHidden from "./VisuallyHidden"
@@ -28,9 +29,7 @@ import { isMobile } from "../utils/isMobile"
 
 import type { Context } from "../types"
 
-import "../styles/layout.css"
 import client from "../apollo"
-import GlobalStyle from "./GlobalStyle"
 
 const ContentContainer = styled.div`
   position: relative;
diff --git a/src/styles/layout.css b/src/styles/layout.css
deleted file mode 100644
index 40e131c7bfc..00000000000
--- a/src/styles/layout.css
+++ /dev/null
@@ -1,634 +0,0 @@
-html {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-    Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
-    Segoe UI Symbol;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  font-size: 1rem;
-}
-body {
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-progress {
-  vertical-align: baseline;
-}
-[hidden],
-template {
-  display: none;
-}
-a {
-  background-color: transparent;
-  text-decoration: none;
-  -webkit-text-decoration-skip: objects;
-}
-a:active,
-a:hover {
-  outline-width: 0;
-}
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-b,
-strong {
-  font-weight: inherit;
-  font-weight: bolder;
-}
-dfn {
-  font-style: italic;
-}
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-mark {
-  background-color: #ffff00;
-  color: #000000;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-img {
-  border-style: none;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
-  font-size: 1em;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font: inherit;
-  margin: 0;
-}
-optgroup {
-  font-weight: 700;
-}
-button,
-input {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-[type="reset"],
-[type="submit"],
-button,
-html [type="button"] {
-  -webkit-appearance: button;
-}
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner,
-button::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring,
-button:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-fieldset {
-  border: 1px solid silver;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-textarea {
-  overflow: auto;
-}
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-html {
-  font: 100%/1.6em georgia, serif;
-  box-sizing: border-box;
-  overflow-y: scroll;
-}
-* {
-  box-sizing: inherit;
-  scroll-margin-top: 6rem;
-}
-*:before {
-  box-sizing: inherit;
-}
-*:after {
-  box-sizing: inherit;
-}
-body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-    Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
-    Segoe UI Symbol;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
-  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-  font-feature-settings: "kern", "liga", "clig", "calt";
-}
-img {
-  max-width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-}
-h1 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-weight: 500;
-  text-rendering: optimizeLegibility;
-  font-size: 2.25rem;
-  line-height: 1.1;
-}
-h2 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-weight: 700;
-  text-rendering: optimizeLegibility;
-  font-size: 1.62671rem;
-  line-height: 1.1;
-}
-h3 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 2rem;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-weight: 500;
-  text-rendering: optimizeLegibility;
-  font-size: 1.38316rem;
-  line-height: 1.1;
-}
-h4 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 2rem;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-weight: 600;
-  text-rendering: optimizeLegibility;
-  font-size: 1.2rem;
-  line-height: 1.1;
-}
-h5 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 2rem;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-weight: 500;
-  text-rendering: optimizeLegibility;
-  font-size: 1rem;
-  line-height: 1.1;
-}
-h6 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-weight: 500;
-  text-rendering: optimizeLegibility;
-  font-size: 0.85028rem;
-  line-height: 1.1;
-}
-hgroup {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-ul {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-ol {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-dl {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-dd {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-p {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-figure {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-pre {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 0.85rem;
-  line-height: 1.42;
-  background: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  overflow: auto;
-  word-wrap: normal;
-  white-space: pre-wrap;
-  padding: 1.45rem;
-}
-table {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 1rem;
-  line-height: 1.45rem;
-  border-collapse: collapse;
-  width: 100%;
-}
-th,
-td {
-  hyphens: auto;
-}
-fieldset {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-blockquote {
-  margin-left: 1.45rem;
-  margin-right: 1.45rem;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-form {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-noscript {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-iframe {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-hr {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 4rem;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 0;
-  background: hsla(0, 0%, 0%, 0.2);
-  border: none;
-  height: 1px;
-}
-address {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-b {
-  font-weight: bold;
-}
-strong {
-  font-weight: bold;
-}
-dt {
-  font-weight: bold;
-}
-th {
-  font-weight: bold;
-}
-li {
-  margin-bottom: calc(1.45rem / 2);
-}
-ol li {
-  padding-left: 0;
-}
-ul li {
-  padding-left: 0;
-}
-li > ol {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-li > ul {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-blockquote *:last-child {
-  margin-bottom: 0;
-}
-li *:last-child {
-  margin-bottom: 0;
-}
-p *:last-child {
-  margin-bottom: 0;
-}
-li > p {
-  margin-bottom: calc(1.45rem / 2);
-}
-code {
-  font-size: 1em;
-  line-height: 1.45em;
-}
-kbd {
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
-  font-size: 0.625rem;
-  line-height: 1.56rem;
-}
-samp {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-abbr {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-acronym {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-abbr[title] {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-  text-decoration: none;
-}
-thead {
-  text-align: left;
-}
-td,
-th {
-  text-align: left;
-  border-bottom: 1px solid hsla(0, 13%, 72%, 0.12);
-  font-feature-settings: "tnum";
-  -moz-font-feature-settings: "tnum";
-  -ms-font-feature-settings: "tnum";
-  -webkit-font-feature-settings: "tnum";
-  padding-left: 0.96667rem;
-  padding-right: 0.96667rem;
-  padding-top: 0.725rem;
-  padding-bottom: calc(0.725rem - 1px);
-}
-th:first-child,
-td:first-child {
-  padding-left: 0;
-}
-th:last-child,
-td:last-child {
-  padding-right: 0;
-}
-tt {
-  background-color: hsla(255, 13%, 18%, 1);
-  color: #968af6;
-  border-radius: 2px;
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
-  padding: 0.2em;
-}
-code {
-  background-color: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
-  padding: 0.2em;
-}
-pre code {
-  background: none;
-  line-height: 1.42;
-}
-code:before,
-tt:before,
-tt:after,
-pre code:before,
-pre code:after,
-pre tt:before,
-pre tt:after {
-  content: "";
-}
-@media only screen and (max-width: 480px) {
-  html {
-    font-size: 100%;
-  }
-}
-
-/* Assets page */
-
-.assets-page .gatsby-resp-image-wrapper {
-  max-height: 200px !important;
-}
-.assets-page .gatsby-resp-image-image {
-  width: auto !important;
-}

From 000263dd3da0b227e3bf97282c022b3b28c85721 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Sun, 31 Jul 2022 13:00:50 -0300
Subject: [PATCH 06/15] override chakra global styles to fix conflicts with old
 styles

---
 src/@chakra-ui/gatsby-plugin/styles.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/@chakra-ui/gatsby-plugin/styles.ts b/src/@chakra-ui/gatsby-plugin/styles.ts
index 8546f84b29d..959ca1917ee 100644
--- a/src/@chakra-ui/gatsby-plugin/styles.ts
+++ b/src/@chakra-ui/gatsby-plugin/styles.ts
@@ -1,5 +1,12 @@
 const styles = {
-  global: (props) => ({}),
+  global: (_props) => ({
+    // TODO: remove these overrides as we adopt the new Design System
+    // override default global Chakra styles to keep compatibility with old theme
+    // https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/styles.ts
+    body: {
+      lineHeight: "1.6rem",
+    },
+  }),
 }
 
 export default styles

From b0a1ab68b7ce769a0af956eae423682b1ab708f3 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Sun, 31 Jul 2022 13:07:22 -0300
Subject: [PATCH 07/15] refactor global styles

---
 src/components/GlobalStyle.tsx | 1275 ++++++++++++++++----------------
 1 file changed, 637 insertions(+), 638 deletions(-)

diff --git a/src/components/GlobalStyle.tsx b/src/components/GlobalStyle.tsx
index 92befe4f9dc..bf43ac970f0 100644
--- a/src/components/GlobalStyle.tsx
+++ b/src/components/GlobalStyle.tsx
@@ -1,650 +1,649 @@
 import React from "react"
 import { Global, css, useTheme } from "@emotion/react"
 
-const GlobalStyle: React.FC = () => {
-  const theme = useTheme()
+// TODO: remove these legacy global styles as we adopt the new Design System
 
-  return (
-    <Global
-      styles={css`
-        /* ==================================== */
-        /* Legacy global styles from layout.css */
-        /* ==================================== */
+// legacy global styles from `src/styles/layout.css`
+const oldLayoutCSS = css`
+  html {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+      Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+      Segoe UI Symbol;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    font-size: 1rem;
+  }
+  body {
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
-        html {
-          font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
-            Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji,
-            Segoe UI Emoji, Segoe UI Symbol;
-          -ms-text-size-adjust: 100%;
-          -webkit-text-size-adjust: 100%;
-          font-size: 1rem;
-        }
-        body {
-          margin: 0;
-          -webkit-font-smoothing: antialiased;
-          -moz-osx-font-smoothing: grayscale;
-        }
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  main,
+  menu,
+  nav,
+  section,
+  summary {
+    display: block;
+  }
+  audio,
+  canvas,
+  progress,
+  video {
+    display: inline-block;
+  }
+  audio:not([controls]) {
+    display: none;
+    height: 0;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  [hidden],
+  template {
+    display: none;
+  }
+  a {
+    background-color: transparent;
+    text-decoration: none;
+    -webkit-text-decoration-skip: objects;
+  }
+  a:active,
+  a:hover {
+    outline-width: 0;
+  }
+  abbr[title] {
+    border-bottom: none;
+    text-decoration: underline;
+    text-decoration: underline dotted;
+  }
+  b,
+  strong {
+    font-weight: inherit;
+    font-weight: bolder;
+  }
+  dfn {
+    font-style: italic;
+  }
+  mark {
+    background-color: #ffff00;
+    color: #000000;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  img {
+    border-style: none;
+  }
+  svg:not(:root) {
+    overflow: hidden;
+  }
+  code,
+  kbd,
+  pre,
+  samp {
+    font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
+      "Liberation Mono", Menlo, Courier, monospace;
+    font-size: 1em;
+  }
+  figure {
+    margin: 1em 40px;
+  }
+  hr {
+    box-sizing: content-box;
+    height: 0;
+    overflow: visible;
+  }
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font: inherit;
+    margin: 0;
+  }
+  optgroup {
+    font-weight: 700;
+  }
+  button,
+  input {
+    overflow: visible;
+  }
+  button,
+  select {
+    text-transform: none;
+  }
+  [type="reset"],
+  [type="submit"],
+  button,
+  html [type="button"] {
+    -webkit-appearance: button;
+  }
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner,
+  button::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring,
+  button:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  fieldset {
+    border: 1px solid silver;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+  }
+  legend {
+    box-sizing: border-box;
+    color: inherit;
+    display: table;
+    max-width: 100%;
+    padding: 0;
+    white-space: normal;
+  }
+  textarea {
+    overflow: auto;
+  }
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box;
+    padding: 0;
+  }
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [type="search"] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
+  [type="search"]::-webkit-search-cancel-button,
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-input-placeholder {
+    color: inherit;
+    opacity: 0.54;
+  }
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+  }
+  html {
+    font: 100%/1.6em georgia, serif;
+    box-sizing: border-box;
+    overflow-y: scroll;
+  }
+  * {
+    box-sizing: inherit;
+    scroll-margin-top: 6rem;
+  }
+  *:before {
+    box-sizing: inherit;
+  }
+  *:after {
+    box-sizing: inherit;
+  }
+  body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+      Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+      Segoe UI Symbol;
+    font-weight: normal;
+    word-wrap: break-word;
+    font-kerning: normal;
+    -moz-font-feature-settings: "kern", "liga", "clig", "calt";
+    -ms-font-feature-settings: "kern", "liga", "clig", "calt";
+    -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
+    font-feature-settings: "kern", "liga", "clig", "calt";
+  }
+  img {
+    max-width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+  }
+  h1 {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+    color: inherit;
+    font-weight: 500;
+    text-rendering: optimizeLegibility;
+    font-size: 2.25rem;
+    line-height: 1.1;
+  }
+  h2 {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+    color: inherit;
+    font-weight: 700;
+    text-rendering: optimizeLegibility;
+    font-size: 1.62671rem;
+    line-height: 1.1;
+  }
+  h3 {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 2rem;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+    color: inherit;
+    font-weight: 500;
+    text-rendering: optimizeLegibility;
+    font-size: 1.38316rem;
+    line-height: 1.1;
+  }
+  h4 {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 2rem;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+    color: inherit;
+    font-weight: 600;
+    text-rendering: optimizeLegibility;
+    font-size: 1.2rem;
+    line-height: 1.1;
+  }
+  h5 {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 2rem;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+    color: inherit;
+    font-weight: 500;
+    text-rendering: optimizeLegibility;
+    font-size: 1rem;
+    line-height: 1.1;
+  }
+  h6 {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+    color: inherit;
+    font-weight: 500;
+    text-rendering: optimizeLegibility;
+    font-size: 0.85028rem;
+    line-height: 1.1;
+  }
+  hgroup {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+  }
+  ul {
+    margin-left: 1.45rem;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+    list-style-position: outside;
+    list-style-image: none;
+  }
+  ol {
+    margin-left: 1.45rem;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+    list-style-position: outside;
+    list-style-image: none;
+  }
+  dl {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+  }
+  dd {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+  }
+  p {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+  }
+  figure {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+  }
+  pre {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    margin-bottom: 1.45rem;
+    font-size: 0.85rem;
+    line-height: 1.42;
+    background: hsla(0, 0%, 0%, 0.04);
+    border-radius: 3px;
+    overflow: auto;
+    word-wrap: normal;
+    white-space: pre-wrap;
+    padding: 1.45rem;
+  }
+  table {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+    font-size: 1rem;
+    line-height: 1.45rem;
+    border-collapse: collapse;
+    width: 100%;
+  }
+  th,
+  td {
+    hyphens: auto;
+  }
+  fieldset {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+  }
+  blockquote {
+    margin-left: 1.45rem;
+    margin-right: 1.45rem;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+  }
+  form {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+  }
+  noscript {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+  }
+  iframe {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+  }
+  hr {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 4rem;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 0;
+    background: hsla(0, 0%, 0%, 0.2);
+    border: none;
+    height: 1px;
+  }
+  address {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+  }
+  b {
+    font-weight: bold;
+  }
+  strong {
+    font-weight: bold;
+  }
+  dt {
+    font-weight: bold;
+  }
+  th {
+    font-weight: bold;
+  }
+  li {
+    margin-bottom: calc(1.45rem / 2);
+  }
+  ol li {
+    padding-left: 0;
+  }
+  ul li {
+    padding-left: 0;
+  }
+  li > ol {
+    margin-left: 1.45rem;
+    margin-bottom: calc(1.45rem / 2);
+    margin-top: calc(1.45rem / 2);
+  }
+  li > ul {
+    margin-left: 1.45rem;
+    margin-bottom: calc(1.45rem / 2);
+    margin-top: calc(1.45rem / 2);
+  }
+  blockquote *:last-child {
+    margin-bottom: 0;
+  }
+  li *:last-child {
+    margin-bottom: 0;
+  }
+  p *:last-child {
+    margin-bottom: 0;
+  }
+  li > p {
+    margin-bottom: calc(1.45rem / 2);
+  }
+  code {
+    font-size: 1em;
+    line-height: 1.45em;
+  }
+  kbd {
+    font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
+      "Liberation Mono", Menlo, Courier, monospace;
+    font-size: 0.625rem;
+    line-height: 1.56rem;
+  }
+  samp {
+    font-size: 0.85rem;
+    line-height: 1.45rem;
+  }
+  abbr {
+    border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+    cursor: help;
+  }
+  acronym {
+    border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+    cursor: help;
+  }
+  abbr[title] {
+    border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+    cursor: help;
+    text-decoration: none;
+  }
+  thead {
+    text-align: left;
+  }
+  td,
+  th {
+    text-align: left;
+    border-bottom: 1px solid hsla(0, 13%, 72%, 0.12);
+    font-feature-settings: "tnum";
+    -moz-font-feature-settings: "tnum";
+    -ms-font-feature-settings: "tnum";
+    -webkit-font-feature-settings: "tnum";
+    padding-left: 0.96667rem;
+    padding-right: 0.96667rem;
+    padding-top: 0.725rem;
+    padding-bottom: calc(0.725rem - 1px);
+  }
+  th:first-child,
+  td:first-child {
+    padding-left: 0;
+  }
+  th:last-child,
+  td:last-child {
+    padding-right: 0;
+  }
+  tt {
+    background-color: hsla(255, 13%, 18%, 1);
+    color: #968af6;
+    border-radius: 2px;
+    font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
+      "Liberation Mono", Menlo, Courier, monospace;
+    padding: 0.2em;
+  }
+  code {
+    background-color: hsla(0, 0%, 0%, 0.04);
+    border-radius: 3px;
+    font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
+      "Liberation Mono", Menlo, Courier, monospace;
+    padding: 0.2em;
+  }
+  pre code {
+    background: none;
+    line-height: 1.42;
+  }
+  code:before,
+  tt:before,
+  tt:after,
+  pre code:before,
+  pre code:after,
+  pre tt:before,
+  pre tt:after {
+    content: "";
+  }
+  @media only screen and (max-width: 480px) {
+    html {
+      font-size: 100%;
+    }
+  }
 
-        article,
-        aside,
-        details,
-        figcaption,
-        figure,
-        footer,
-        header,
-        main,
-        menu,
-        nav,
-        section,
-        summary {
-          display: block;
-        }
-        audio,
-        canvas,
-        progress,
-        video {
-          display: inline-block;
-        }
-        audio:not([controls]) {
-          display: none;
-          height: 0;
-        }
-        progress {
-          vertical-align: baseline;
-        }
-        [hidden],
-        template {
-          display: none;
-        }
-        a {
-          background-color: transparent;
-          text-decoration: none;
-          -webkit-text-decoration-skip: objects;
-        }
-        a:active,
-        a:hover {
-          outline-width: 0;
-        }
-        abbr[title] {
-          border-bottom: none;
-          text-decoration: underline;
-          text-decoration: underline dotted;
-        }
-        b,
-        strong {
-          font-weight: inherit;
-          font-weight: bolder;
-        }
-        dfn {
-          font-style: italic;
-        }
-        mark {
-          background-color: #ffff00;
-          color: #000000;
-        }
-        small {
-          font-size: 80%;
-        }
-        sub,
-        sup {
-          font-size: 75%;
-          line-height: 0;
-          position: relative;
-          vertical-align: baseline;
-        }
-        sub {
-          bottom: -0.25em;
-        }
-        sup {
-          top: -0.5em;
-        }
-        img {
-          border-style: none;
-        }
-        svg:not(:root) {
-          overflow: hidden;
-        }
-        code,
-        kbd,
-        pre,
-        samp {
-          font-family: "SFMono-Regular", Consolas, "Roboto Mono",
-            "Droid Sans Mono", "Liberation Mono", Menlo, Courier, monospace;
-          font-size: 1em;
-        }
-        figure {
-          margin: 1em 40px;
-        }
-        hr {
-          box-sizing: content-box;
-          height: 0;
-          overflow: visible;
-        }
-        button,
-        input,
-        optgroup,
-        select,
-        textarea {
-          font: inherit;
-          margin: 0;
-        }
-        optgroup {
-          font-weight: 700;
-        }
-        button,
-        input {
-          overflow: visible;
-        }
-        button,
-        select {
-          text-transform: none;
-        }
-        [type="reset"],
-        [type="submit"],
-        button,
-        html [type="button"] {
-          -webkit-appearance: button;
-        }
-        [type="button"]::-moz-focus-inner,
-        [type="reset"]::-moz-focus-inner,
-        [type="submit"]::-moz-focus-inner,
-        button::-moz-focus-inner {
-          border-style: none;
-          padding: 0;
-        }
-        [type="button"]:-moz-focusring,
-        [type="reset"]:-moz-focusring,
-        [type="submit"]:-moz-focusring,
-        button:-moz-focusring {
-          outline: 1px dotted ButtonText;
-        }
-        fieldset {
-          border: 1px solid silver;
-          margin: 0 2px;
-          padding: 0.35em 0.625em 0.75em;
-        }
-        legend {
-          box-sizing: border-box;
-          color: inherit;
-          display: table;
-          max-width: 100%;
-          padding: 0;
-          white-space: normal;
-        }
-        textarea {
-          overflow: auto;
-        }
-        [type="checkbox"],
-        [type="radio"] {
-          box-sizing: border-box;
-          padding: 0;
-        }
-        [type="number"]::-webkit-inner-spin-button,
-        [type="number"]::-webkit-outer-spin-button {
-          height: auto;
-        }
-        [type="search"] {
-          -webkit-appearance: textfield;
-          outline-offset: -2px;
-        }
-        [type="search"]::-webkit-search-cancel-button,
-        [type="search"]::-webkit-search-decoration {
-          -webkit-appearance: none;
-        }
-        ::-webkit-input-placeholder {
-          color: inherit;
-          opacity: 0.54;
-        }
-        ::-webkit-file-upload-button {
-          -webkit-appearance: button;
-          font: inherit;
-        }
-        html {
-          font: 100%/1.6em georgia, serif;
-          box-sizing: border-box;
-          overflow-y: scroll;
-        }
-        * {
-          box-sizing: inherit;
-          scroll-margin-top: 6rem;
-        }
-        *:before {
-          box-sizing: inherit;
-        }
-        *:after {
-          box-sizing: inherit;
-        }
-        body {
-          font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
-            Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji,
-            Segoe UI Emoji, Segoe UI Symbol;
-          font-weight: normal;
-          word-wrap: break-word;
-          font-kerning: normal;
-          -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-          -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-          -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-          font-feature-settings: "kern", "liga", "clig", "calt";
-        }
-        img {
-          max-width: 100%;
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-        }
-        h1 {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-          color: inherit;
-          font-weight: 500;
-          text-rendering: optimizeLegibility;
-          font-size: 2.25rem;
-          line-height: 1.1;
-        }
-        h2 {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-          color: inherit;
-          font-weight: 700;
-          text-rendering: optimizeLegibility;
-          font-size: 1.62671rem;
-          line-height: 1.1;
-        }
-        h3 {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 2rem;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-          color: inherit;
-          font-weight: 500;
-          text-rendering: optimizeLegibility;
-          font-size: 1.38316rem;
-          line-height: 1.1;
-        }
-        h4 {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 2rem;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-          color: inherit;
-          font-weight: 600;
-          text-rendering: optimizeLegibility;
-          font-size: 1.2rem;
-          line-height: 1.1;
-        }
-        h5 {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 2rem;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-          color: inherit;
-          font-weight: 500;
-          text-rendering: optimizeLegibility;
-          font-size: 1rem;
-          line-height: 1.1;
-        }
-        h6 {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-          color: inherit;
-          font-weight: 500;
-          text-rendering: optimizeLegibility;
-          font-size: 0.85028rem;
-          line-height: 1.1;
-        }
-        hgroup {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-        }
-        ul {
-          margin-left: 1.45rem;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-          list-style-position: outside;
-          list-style-image: none;
-        }
-        ol {
-          margin-left: 1.45rem;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-          list-style-position: outside;
-          list-style-image: none;
-        }
-        dl {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-        }
-        dd {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-        }
-        p {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-        }
-        figure {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-        }
-        pre {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          margin-bottom: 1.45rem;
-          font-size: 0.85rem;
-          line-height: 1.42;
-          background: hsla(0, 0%, 0%, 0.04);
-          border-radius: 3px;
-          overflow: auto;
-          word-wrap: normal;
-          white-space: pre-wrap;
-          padding: 1.45rem;
-        }
-        table {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-          font-size: 1rem;
-          line-height: 1.45rem;
-          border-collapse: collapse;
-          width: 100%;
-        }
-        th,
-        td {
-          hyphens: auto;
-        }
-        fieldset {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-        }
-        blockquote {
-          margin-left: 1.45rem;
-          margin-right: 1.45rem;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-        }
-        form {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-        }
-        noscript {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-        }
-        iframe {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-        }
-        hr {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 4rem;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 0;
-          background: hsla(0, 0%, 0%, 0.2);
-          border: none;
-          height: 1px;
-        }
-        address {
-          margin-left: 0;
-          margin-right: 0;
-          margin-top: 0;
-          padding-bottom: 0;
-          padding-left: 0;
-          padding-right: 0;
-          padding-top: 0;
-          margin-bottom: 1.45rem;
-        }
-        b {
-          font-weight: bold;
-        }
-        strong {
-          font-weight: bold;
-        }
-        dt {
-          font-weight: bold;
-        }
-        th {
-          font-weight: bold;
-        }
-        li {
-          margin-bottom: calc(1.45rem / 2);
-        }
-        ol li {
-          padding-left: 0;
-        }
-        ul li {
-          padding-left: 0;
-        }
-        li > ol {
-          margin-left: 1.45rem;
-          margin-bottom: calc(1.45rem / 2);
-          margin-top: calc(1.45rem / 2);
-        }
-        li > ul {
-          margin-left: 1.45rem;
-          margin-bottom: calc(1.45rem / 2);
-          margin-top: calc(1.45rem / 2);
-        }
-        blockquote *:last-child {
-          margin-bottom: 0;
-        }
-        li *:last-child {
-          margin-bottom: 0;
-        }
-        p *:last-child {
-          margin-bottom: 0;
-        }
-        li > p {
-          margin-bottom: calc(1.45rem / 2);
-        }
-        code {
-          font-size: 1em;
-          line-height: 1.45em;
-        }
-        kbd {
-          font-family: "SFMono-Regular", Consolas, "Roboto Mono",
-            "Droid Sans Mono", "Liberation Mono", Menlo, Courier, monospace;
-          font-size: 0.625rem;
-          line-height: 1.56rem;
-        }
-        samp {
-          font-size: 0.85rem;
-          line-height: 1.45rem;
-        }
-        abbr {
-          border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-          cursor: help;
-        }
-        acronym {
-          border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-          cursor: help;
-        }
-        abbr[title] {
-          border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-          cursor: help;
-          text-decoration: none;
-        }
-        thead {
-          text-align: left;
-        }
-        td,
-        th {
-          text-align: left;
-          border-bottom: 1px solid hsla(0, 13%, 72%, 0.12);
-          font-feature-settings: "tnum";
-          -moz-font-feature-settings: "tnum";
-          -ms-font-feature-settings: "tnum";
-          -webkit-font-feature-settings: "tnum";
-          padding-left: 0.96667rem;
-          padding-right: 0.96667rem;
-          padding-top: 0.725rem;
-          padding-bottom: calc(0.725rem - 1px);
-        }
-        th:first-child,
-        td:first-child {
-          padding-left: 0;
-        }
-        th:last-child,
-        td:last-child {
-          padding-right: 0;
-        }
-        tt {
-          background-color: hsla(255, 13%, 18%, 1);
-          color: #968af6;
-          border-radius: 2px;
-          font-family: "SFMono-Regular", Consolas, "Roboto Mono",
-            "Droid Sans Mono", "Liberation Mono", Menlo, Courier, monospace;
-          padding: 0.2em;
-        }
-        code {
-          background-color: hsla(0, 0%, 0%, 0.04);
-          border-radius: 3px;
-          font-family: "SFMono-Regular", Consolas, "Roboto Mono",
-            "Droid Sans Mono", "Liberation Mono", Menlo, Courier, monospace;
-          padding: 0.2em;
-        }
-        pre code {
-          background: none;
-          line-height: 1.42;
-        }
-        code:before,
-        tt:before,
-        tt:after,
-        pre code:before,
-        pre code:after,
-        pre tt:before,
-        pre tt:after {
-          content: "";
-        }
-        @media only screen and (max-width: 480px) {
-          html {
-            font-size: 100%;
-          }
-        }
+  /* Assets page */
 
-        /* Assets page */
+  .assets-page .gatsby-resp-image-wrapper {
+    max-height: 200px !important;
+  }
+  .assets-page .gatsby-resp-image-image {
+    width: auto !important;
+  }
+`
 
-        .assets-page .gatsby-resp-image-wrapper {
-          max-height: 200px !important;
-        }
-        .assets-page .gatsby-resp-image-image {
-          width: auto !important;
-        }
+const GlobalStyle: React.FC = () => {
+  const theme = useTheme()
 
-        /* =========================================== */
-        /* END OF LEGACY GLOBAL STYLES from layout.css */
-        /* =========================================== */
+  return (
+    <Global
+      styles={css`
+        ${oldLayoutCSS}
 
         body {
           background-color: ${theme.colors.background};

From 1ed4dea4a84dd691f77e3599227f64bfc3f78e28 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Mon, 1 Aug 2022 17:19:45 -0300
Subject: [PATCH 08/15] cleanup

---
 src/@chakra-ui/gatsby-plugin/foundations/colors.ts |  9 +--------
 src/@chakra-ui/gatsby-plugin/foundations/index.ts  | 10 ----------
 2 files changed, 1 insertion(+), 18 deletions(-)

diff --git a/src/@chakra-ui/gatsby-plugin/foundations/colors.ts b/src/@chakra-ui/gatsby-plugin/foundations/colors.ts
index b8975b4ce03..747ebd8f907 100644
--- a/src/@chakra-ui/gatsby-plugin/foundations/colors.ts
+++ b/src/@chakra-ui/gatsby-plugin/foundations/colors.ts
@@ -1,12 +1,5 @@
 export type Colors = typeof colors
 
-const colors = {
-  blue: {
-    500: "#1c1cff",
-  },
-  orange: {
-    500: "#ff7324",
-  },
-}
+const colors = {}
 
 export default colors
diff --git a/src/@chakra-ui/gatsby-plugin/foundations/index.ts b/src/@chakra-ui/gatsby-plugin/foundations/index.ts
index 288b129c2c9..c358f7b91a8 100644
--- a/src/@chakra-ui/gatsby-plugin/foundations/index.ts
+++ b/src/@chakra-ui/gatsby-plugin/foundations/index.ts
@@ -1,17 +1,7 @@
 import colors from "./colors"
 
 const foundations = {
-  // breakpoints,
-  // zIndices,
-  // radii,
-  // blur,
   colors,
-  // ...typography,
-  // sizes,
-  // shadows,
-  // space: spacing,
-  // borders,
-  // transition,
 }
 
 export default foundations

From 38dae97bf60e0c182aeecd7864e9d99e1d9a5c65 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Tue, 2 Aug 2022 11:18:43 -0300
Subject: [PATCH 09/15] refactor

---
 src/components/Layout.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 33895c1a7fe..97633d43f18 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react"
 import { ApolloProvider } from "@apollo/client"
-import { useColorMode } from "@chakra-ui/react"
+import { useColorModeValue } from "@chakra-ui/react"
 import { ThemeProvider } from "@emotion/react"
 import styled from "@emotion/styled"
 import { IntlProvider } from "react-intl"
@@ -87,12 +87,12 @@ const Layout: React.FC<IProps> = ({
   pageContext,
   children,
 }) => {
-  const { colorMode } = useColorMode()
+  // TODO: tmp - for backward compatibility with old theme
+  const theme = useColorModeValue(lightTheme, darkTheme)
+
   const [isZenMode, setIsZenMode] = useState<boolean>(false)
   const [shouldShowSideNav, setShouldShowSideNav] = useState<boolean>(false)
 
-  const isDarkTheme = colorMode === "dark"
-
   const locale = pageContext.locale
   const messages = require(`../intl/${locale}.json`)
 
@@ -128,9 +128,6 @@ const Layout: React.FC<IProps> = ({
     }
   }
 
-  // TODO: tmp - for backward compatibility with old theme
-  const theme = isDarkTheme ? darkTheme : lightTheme
-
   const isPageLanguageEnglish = pageContext.isDefaultLang
   const isPageContentEnglish = !!pageContext.isContentEnglish
   const isLegal = !!pageContext.isLegal

From 0afb02598bb5e50a48a88699685c41b51eb59f5c Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 4 Aug 2022 12:37:43 -0300
Subject: [PATCH 10/15] update docs

---
 docs/best-practices.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/docs/best-practices.md b/docs/best-practices.md
index 55bc8560500..985e5dc1891 100644
--- a/docs/best-practices.md
+++ b/docs/best-practices.md
@@ -104,12 +104,12 @@ export default ComponentName
 ## Styling
 
 - `src/theme.ts` - Declares site color themes, breakpoints and other constants (try to utilize these colors first)
-- We use [styled-components](https://styled-components.com/)
+- We use [emotion](https://emotion.sh/)
 
   - Tagged template literals are used to style custom components
 
   ```tsx
-  // Example of styling syntax using styled-components
+  // Example of styling syntax using emotion
 
   import styled from "@emotion/styled"
 
@@ -128,8 +128,6 @@ export default ComponentName
   // ie: <PrimaryButton>Text</PrimaryButton>
   ```
 
-  - Recommended VS Code Plugin: `vscode-styled-components` <br>To install: Open VS Code > `Ctrl+P` / `Cmd+P` > Run: <br>`ext install vscode-styled-components`
-
 - Values from `src/theme.ts` are automatically passed as a prop object to styled components
 
   ```tsx

From 0578a6e49a432fc34c0d9640dd35221c6e82ebb7 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 4 Aug 2022 13:27:51 -0300
Subject: [PATCH 11/15] fix link styles on global styles

---
 src/components/GlobalStyle.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/GlobalStyle.tsx b/src/components/GlobalStyle.tsx
index bf43ac970f0..73051e12c61 100644
--- a/src/components/GlobalStyle.tsx
+++ b/src/components/GlobalStyle.tsx
@@ -649,6 +649,10 @@ const GlobalStyle: React.FC = () => {
           background-color: ${theme.colors.background};
           color: ${theme.colors.text};
         }
+        a {
+          color: ${theme.colors.primary};
+          text-decoration: underline;
+        }
         mark {
           background: ${theme.colors.markBackground};
           box-shadow: inset 0 -2px 0 0 rgba(69, 142, 225, 0.8);

From 52f1ba35bab0bb3a53b76ced0ee9a8c6fe1276d9 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 4 Aug 2022 14:16:52 -0300
Subject: [PATCH 12/15] add more doc on global styles

---
 src/@chakra-ui/gatsby-plugin/styles.ts | 16 +++++++++++++---
 src/components/GlobalStyle.tsx         | 14 ++++++++++++--
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/@chakra-ui/gatsby-plugin/styles.ts b/src/@chakra-ui/gatsby-plugin/styles.ts
index 959ca1917ee..665efe23c1b 100644
--- a/src/@chakra-ui/gatsby-plugin/styles.ts
+++ b/src/@chakra-ui/gatsby-plugin/styles.ts
@@ -1,8 +1,18 @@
 const styles = {
   global: (_props) => ({
-    // TODO: remove these overrides as we adopt the new Design System
-    // override default global Chakra styles to keep compatibility with old theme
-    // https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/styles.ts
+    /**
+     * Current scenario: we have 2 palces where global styles are defined.
+     * - Our legacy global styles under `src/components/GlobalStyle.ts`
+     * - Chakra also defines its own global styles. Check them here:
+     *  https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/styles.ts
+     *
+     * Having those 2 global styles creates some style conflicts. Here we
+     * override some of the default Chakra globals in order to keep the same
+     * styles as we had in the legacy one.
+     *
+     * TODO: remove these overrides as we adopt the new Design System and we
+     * don't need the global styles anymore
+     */
     body: {
       lineHeight: "1.6rem",
     },
diff --git a/src/components/GlobalStyle.tsx b/src/components/GlobalStyle.tsx
index 73051e12c61..7d3f9584ce2 100644
--- a/src/components/GlobalStyle.tsx
+++ b/src/components/GlobalStyle.tsx
@@ -1,9 +1,19 @@
 import React from "react"
 import { Global, css, useTheme } from "@emotion/react"
 
-// TODO: remove these legacy global styles as we adopt the new Design System
+/**
+ * These are legacy global styles. Global styles that were created when
+ * `styled-components` were used. We have merged all of those old global
+ * styles in one place, this component.
+ *
+ * As we transition from our old theme `src/theme.ts` to our new theme
+ * `src/@chakra-ui/gatsby-plugin/theme.ts`, we need to keep these
+ * styles.
+ *
+ * TODO: remove this file when all of our components use the new theme
+ */
 
-// legacy global styles from `src/styles/layout.css`
+// legacy global styles from the old `src/styles/layout.css`
 const oldLayoutCSS = css`
   html {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,

From d65cf6cb7f59b27ceba4c30ab184e7b5eb34e292 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 4 Aug 2022 17:09:52 -0300
Subject: [PATCH 13/15] use system color mode by default

---
 src/@chakra-ui/gatsby-plugin/theme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/@chakra-ui/gatsby-plugin/theme.ts b/src/@chakra-ui/gatsby-plugin/theme.ts
index 23de2cd1d59..6f09fbc4590 100644
--- a/src/@chakra-ui/gatsby-plugin/theme.ts
+++ b/src/@chakra-ui/gatsby-plugin/theme.ts
@@ -13,7 +13,7 @@ import foundations from "./foundations"
 const config: ThemeConfig = {
   cssVarPrefix: "eth",
   initialColorMode: "light",
-  useSystemColorMode: false,
+  useSystemColorMode: true,
 }
 
 const theme: ThemeOverride = {

From 69ed9f153d90d567d7d50f98af75650d24198d35 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Mon, 8 Aug 2022 12:23:39 -0300
Subject: [PATCH 14/15] fix types

---
 src/components/Link.tsx         | 2 ++
 src/components/Search/Input.tsx | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 314e7ab1711..d55b94caa72 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -208,6 +208,8 @@ const Link: React.FC<IProps> = ({
 
   // Use `gatsby-theme-i18n` Link (which prepends lang path)
   return (
+    // @ts-ignore: IntlLink is requiring a `language` prop but that prop should
+    // be optional. Opened issue: https://github.com/gatsbyjs/themes/issues/171
     <InternalLink
       dir={dir}
       className={isGlossary ? `is-glossary ${className}` : className}
diff --git a/src/components/Search/Input.tsx b/src/components/Search/Input.tsx
index dc9129a7a17..9657e3e4f7d 100644
--- a/src/components/Search/Input.tsx
+++ b/src/components/Search/Input.tsx
@@ -62,7 +62,7 @@ interface IInputProps
   query: string
   setQuery: (query: string) => void
   refine: (query: string) => void
-  inputRef: React.MutableRefObject<HTMLInputElement>
+  inputRef: React.RefObject<HTMLInputElement>
 }
 
 const Input: React.FC<IInputProps> = ({

From 0c2dec7a35a410b10200b9fa9e93e2370d1abeb1 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 8 Aug 2022 20:43:15 +0200
Subject: [PATCH 15/15] Update src/@chakra-ui/gatsby-plugin/styles.ts

---
 src/@chakra-ui/gatsby-plugin/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/@chakra-ui/gatsby-plugin/styles.ts b/src/@chakra-ui/gatsby-plugin/styles.ts
index 665efe23c1b..aef4806b0c8 100644
--- a/src/@chakra-ui/gatsby-plugin/styles.ts
+++ b/src/@chakra-ui/gatsby-plugin/styles.ts
@@ -1,7 +1,7 @@
 const styles = {
   global: (_props) => ({
     /**
-     * Current scenario: we have 2 palces where global styles are defined.
+     * Current scenario: we have 2 places where global styles are defined.
      * - Our legacy global styles under `src/components/GlobalStyle.ts`
      * - Chakra also defines its own global styles. Check them here:
      *  https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/styles.ts