From 0438701bda2edd3064dc2d26e4b2e64d5d9d6dcc Mon Sep 17 00:00:00 2001
From: Joel Hooks <joelhooks@gmail.com>
Date: Thu, 28 Jul 2022 21:01:21 -0700
Subject: [PATCH 1/7] chore: run react 18 codemods

---
 .../src/components/call-to-action-form.tsx    |   4 +-
 apps/badass/src/components/layout.tsx         |   9 +-
 apps/badass/src/components/navigation.tsx     |  12 +-
 apps/badass/src/components/podcast-player.tsx |   4 +-
 apps/badass/src/components/spinner.tsx        |   8 +-
 apps/badass/src/pages/[article].tsx           |   5 +-
 apps/badass/src/pages/answer.tsx              |   4 +-
 apps/badass/src/pages/articles.tsx            |   4 +-
 apps/badass/src/pages/index.tsx               |   8 +-
 .../badass/src/templates/article-template.tsx |  19 +--
 .../src/components/blob.tsx                   |   4 +-
 .../src/components/color-mode-toggle.tsx      |   2 +-
 .../src/components/icon.tsx                   |   4 +-
 .../src/components/spinner.tsx                |  12 +-
 apps/compilersforhumans/src/layouts/index.tsx |   2 +-
 apps/compilersforhumans/src/pages/answer.tsx  |   4 +-
 .../src/templates/article.tsx                 |   4 +-
 .../src/components/app/layout.tsx             |   2 +-
 .../src/components/images/index.tsx           |  12 +-
 .../src/components/mdx/code-block.tsx         |  15 ++-
 .../src/components/mdx/headings.tsx           |   8 +-
 .../src/components/mdx/highlights.tsx         |   6 +-
 .../src/components/mdx/link.tsx               |   2 +-
 .../src/components/mdx/lists.tsx              |   2 +-
 apps/cssdestructured/src/pages/answer.tsx     |   4 +-
 .../src/components/app/layout.tsx             |   2 +-
 .../src/components/article-assets.tsx         |   7 +-
 .../src/components/color-mode-toggle.tsx      |   6 +-
 .../convertkit-subscribe-and-tag.tsx          |  10 +-
 apps/engmanagement/src/components/share.tsx   |  23 +++-
 apps/engmanagement/src/components/spinner.tsx |  12 +-
 apps/engmanagement/src/layouts/index.tsx      |   2 +-
 apps/engmanagement/src/pages/answer.tsx       |   4 +-
 apps/engmanagement/src/pages/login.tsx        |   4 +-
 apps/engmanagement/src/templates/article.tsx  |  23 ++--
 .../src/components/app/layout.tsx             |   4 +-
 .../src/components/app/main.tsx               |   4 +-
 .../cards/horizontal-resource-card.tsx        |   9 +-
 .../cards/verticle-resource-card.tsx          |   4 +-
 .../src/components/color-mode-toggle.tsx      |   2 +-
 .../forms/convertkit/subscribe-form.tsx       |   4 +-
 apps/escuelafrontend/src/components/logo.tsx  |   4 +-
 .../src/components/markdown.tsx               |   4 +-
 .../src/components/mdx/code.tsx               |  19 ++-
 .../components/pages/home/jumbotron/index.tsx |   4 +-
 .../src/components/waves/hero-wave.tsx        |   2 +-
 apps/escuelafrontend/src/layouts/article.tsx  |  20 +--
 apps/escuelafrontend/src/layouts/index.tsx    |   2 +-
 apps/escuelafrontend/src/layouts/profile.tsx  |  26 ++--
 apps/escuelafrontend/src/pages/_app.tsx       |   5 +-
 apps/escuelafrontend/src/pages/acceso.tsx     |   4 +-
 .../src/pages/articulos/index.tsx             |   2 +-
 .../src/pages/cursos/index.tsx                |   4 +-
 apps/fronttoback/src/components/layout.tsx    |   2 +-
 apps/fronttoback/src/pages/answer.tsx         |   4 +-
 apps/kcdbundle/src/layouts/index.tsx          |   2 +-
 apps/kcdbundle/src/pages/buy/email.tsx        |   2 +-
 apps/kcdbundle/src/pages/buy/index.tsx        |   2 +-
 .../src/components/app/color-mode-toggle.tsx  |   2 +-
 .../src/components/app/layout.tsx             |   2 +-
 .../src/components/app/spinner.tsx            |  12 +-
 .../src/components/button/index.tsx           |   2 +-
 .../src/components/images/index.tsx           |  24 +++-
 apps/keyboardlegend/src/pages/answer.tsx      |   4 +-
 .../src/components/layout.tsx                 |   6 +-
 .../src/components/learn/achievements.tsx     |   8 +-
 .../src/components/learn/cta.tsx              |  16 ++-
 .../src/components/learn/module/index.tsx     |   7 +-
 .../src/components/learn/module/lessons.tsx   |   7 +-
 .../src/components/learn/module/play.tsx      |   7 +-
 .../src/hooks/use-cio.tsx                     |   4 +-
 .../next-product-starter/src/pages/answer.tsx |   4 +-
 apps/next-product-starter/src/pages/buy.tsx   |   4 +-
 .../src/pages/invoice.tsx                     |   4 +-
 apps/next-product-starter/src/pages/learn.tsx |   4 +-
 apps/next-product-starter/src/pages/login.tsx |   2 +-
 .../src/pages/video/[slug].tsx                |  15 ++-
 .../src/templates/article.tsx                 |   4 +-
 apps/protailwind/src/components/layout.tsx    |   2 +-
 .../src/components/scenes/city/camera.tsx     |   4 +-
 .../src/components/scenes/city/index.tsx      |   6 +-
 .../src/components/scenes/city/model.tsx      |   2 +-
 apps/protailwind/src/pages/answer.tsx         |   4 +-
 .../src/components/app/color-mode-toggle.tsx  |   2 +-
 .../src/components/app/layout.tsx             |   2 +-
 .../src/components/icons/external-link.tsx    |   4 +-
 .../src/components/icons/sr-logo.tsx          |  10 +-
 .../src/components/mdx/blockquote.tsx         |   4 +-
 .../src/components/mdx/client-profile.tsx     |   4 +-
 .../components/mdx/contributor-profile.tsx    |   8 +-
 apps/skillrecordings/src/components/share.tsx |  23 +++-
 .../src/templates/case-study.tsx              |   7 +-
 .../src/components/app/footer.tsx             |   4 +-
 .../src/components/app/layout.tsx             |   2 +-
 .../src/components/app/navigation.tsx         |  10 +-
 .../src/components/breadcrumb.tsx             |   2 +-
 .../src/components/certificate/dialog.tsx     |   9 +-
 .../src/components/certificate/form.tsx       |   4 +-
 .../src/components/certificate/index.tsx      |   2 +-
 .../contact/contact-email-field.tsx           |  10 +-
 .../src/components/content/share.tsx          |   4 +-
 .../src/components/dialog.tsx                 |   2 +-
 .../src/components/feedback/fields.tsx        |   8 +-
 .../src/components/feedback/form.tsx          |  13 +-
 .../src/components/images/index.tsx           |   4 +-
 .../src/components/mdx/headings.tsx           |  24 +++-
 .../src/components/mdx/index.tsx              |  28 ++--
 .../src/components/mdx/link.tsx               |   2 +-
 .../src/components/portable-text/index.tsx    |  23 ++--
 .../src/components/pricing.tsx                |  15 +--
 .../src/components/primary-newsletter-cta.tsx |   4 +-
 .../src/components/product-tiers.tsx          |   2 +-
 .../src/components/redeem-dialog.tsx          |   5 +-
 .../src/components/sale-banner.tsx            |   6 +-
 .../src/components/sale-countdown.tsx         |  16 +--
 .../src/components/spinner.tsx                |   8 +-
 .../src/components/team/copy-invite-link.tsx  |   4 +-
 .../src/components/team/index.tsx             |   2 +-
 .../components/team/self-redeem-button.tsx    |  14 +-
 .../src/context/feedback-context.tsx          |   4 +-
 .../src/context/pricing-check-context.tsx     |   2 +-
 .../src/context/progress-context.tsx          |   4 +-
 .../src/pages/[article].tsx                   |   5 +-
 .../pages/accessibility-reviews/[slug].tsx    |   4 +-
 .../src/pages/accessibility-reviews/index.tsx |   2 +-
 .../testingaccessibility/src/pages/answer.tsx |   4 +-
 .../src/pages/articles.tsx                    |   4 +-
 apps/testingaccessibility/src/pages/buy.tsx   |   2 +-
 .../src/pages/contact.tsx                     |   2 +-
 apps/testingaccessibility/src/pages/index.tsx |   2 +-
 .../src/pages/invoices/[merchantChargeId].tsx |  12 +-
 .../src/pages/invoices/index.tsx              |   4 +-
 .../[module]/[section]/[lesson]/index.tsx     |   6 +-
 .../pages/learn/[module]/[section]/index.tsx  |   2 +-
 .../src/pages/learn/[module]/index.tsx        |   4 +-
 .../src/pages/learn/index.tsx                 |   6 +-
 apps/testingaccessibility/src/pages/login.tsx |   4 +-
 .../src/pages/team/index.tsx                  |   2 +-
 .../src/pages/thanks/purchase.tsx             |   7 +-
 .../src/pages/thanks/redeem.tsx               |   4 +-
 .../src/pages/welcome/index.tsx               |  44 ++++---
 .../src/pages/workshops/[slug].tsx            |   5 +-
 .../src/pages/workshops/index.tsx             |   2 +-
 .../src/templates/article-template.tsx        |  19 +--
 .../src/templates/lesson-template.tsx         |  22 ++--
 .../src/templates/live-workshop-template.tsx  |   9 +-
 .../src/templates/module-template.tsx         |  17 ++-
 .../src/templates/section-template.tsx        |   8 +-
 apps/total-typescript/src/Layout.tsx          |   4 +-
 apps/tsforjs/src/components/layout.tsx        |   2 +-
 apps/tsforjs/src/pages/answer.tsx             |   4 +-
 .../src/components/app/footer.tsx             |   9 +-
 .../src/components/app/layout.tsx             |   6 +-
 .../src/components/app/navigation.tsx         |  10 +-
 .../src/components/learn/achievements.tsx     |   8 +-
 .../src/components/learn/cta.tsx              |  16 ++-
 .../src/components/learn/module/index.tsx     |   7 +-
 .../src/components/learn/module/lessons.tsx   |   7 +-
 .../src/components/learn/module/play.tsx      |   7 +-
 .../src/components/mdx/annotation.tsx         |   4 +-
 .../src/components/mdx/badge.tsx              |   7 +-
 .../src/components/mdx/grid.tsx               |   2 +-
 .../src/components/mdx/list.tsx               |   4 +-
 .../src/components/spinner.tsx                |   8 +-
 apps/typescriptcourse/src/hooks/use-cio.tsx   |   4 +-
 apps/typescriptcourse/src/pages/[article].tsx |   5 +-
 apps/typescriptcourse/src/pages/answer.tsx    |   4 +-
 apps/typescriptcourse/src/pages/articles.tsx  |   4 +-
 apps/typescriptcourse/src/pages/invoice.tsx   |   4 +-
 apps/typescriptcourse/src/pages/learn.tsx     |   4 +-
 apps/typescriptcourse/src/pages/login.tsx     |   2 +-
 .../src/templates/email-course.tsx            |   7 +-
 .../portable-text-article-template.tsx        |  21 +--
 apps/typescriptcourse/src/templates/root.tsx  |   8 +-
 packages/commerce/src/components/index.tsx    |  49 ++++---
 .../src/components/upgrade-purchase.tsx       |   8 +-
 packages/convertkit/src/forms/popup/index.tsx |   8 +-
 .../forms/subscribe-to-convertkit/index.tsx   |   4 +-
 .../convertkit/src/hooks/use-convertkit.tsx   |   4 +-
 .../templates/next/src/components/layout.tsx  |   2 +-
 .../src/components/primary-newsletter-cta.tsx |   4 +-
 .../templates/next/src/pages/answer.tsx       |   4 +-
 packages/player/src/components/bezel.tsx      |   4 +-
 .../player/src/components/big-play-button.tsx |   2 +-
 packages/player/src/components/code-block.tsx |   5 +-
 .../player/src/components/control-bar.tsx     |   4 +-
 .../closed-captions-menu-button-control.tsx   | 107 ++++++++-------
 .../controls/forward-replay-control.tsx       |  99 +++++++-------
 .../controls/fullscreen-toggle-control.tsx    |  65 +++++-----
 .../controls/play-toggle-control.tsx          |  64 +++++----
 .../playback-rate-menu-button-control.tsx     | 122 +++++++++---------
 .../components/controls/progress-control.tsx  |   4 +-
 .../controls/side-panel-toggle-control.tsx    |   6 +-
 .../controls/volume-menu-button-control.tsx   |   4 +-
 .../components/core/clickable-component.tsx   |  85 ++++++------
 packages/player/src/components/cue-bar.tsx    |   8 +-
 packages/player/src/components/cue-form.tsx   |   2 +-
 packages/player/src/components/hls-source.tsx |   2 +-
 .../src/components/listbox/listbox-button.tsx |   2 +-
 .../player/src/components/loading-spinner.tsx |   4 +-
 .../src/components/menu/menu-button.tsx       |   2 +-
 .../player/src/components/menu/menu-item.tsx  |   2 +-
 packages/player/src/components/menu/menu.tsx  |   2 +-
 packages/player/src/components/player.tsx     |   4 +-
 .../src/components/popup/popup-button.tsx     |   2 +-
 .../player/src/components/popup/popup.tsx     |   2 +-
 .../player/src/components/poster-image.tsx    |   4 +-
 .../player/src/components/progress-bar.tsx    |   2 +-
 .../player/src/components/seek-bar/index.tsx  |   2 +-
 .../components/seek-bar/load-progress-bar.tsx |   4 +-
 .../components/seek-bar/play-progress-bar.tsx |   4 +-
 packages/player/src/components/shortcut.tsx   |   2 +-
 packages/player/src/components/side-panel.tsx |   2 +-
 .../time-controls/current-time-display.tsx    |   4 +-
 .../time-controls/duration-display.tsx        |   4 +-
 .../time-controls/remaining-time-display.tsx  |   4 +-
 .../components/time-controls/time-divider.tsx |   5 +-
 packages/player/src/components/video.tsx      |   2 +-
 .../components/volume-control/volume-bar.tsx  |   5 +-
 .../volume-control/volume-level.tsx           |   2 +-
 packages/player/src/context/video-context.tsx |  12 +-
 packages/player/src/hooks/use-cue.ts          |   2 +-
 packages/quiz/src/components/markdown.tsx     |   8 +-
 .../quiz/src/components/question/code.tsx     |   8 +-
 .../quiz/src/components/question/essay.tsx    |   8 +-
 .../components/question/multiple-choice.tsx   |   8 +-
 .../question/multiple-image-choice.tsx        |   8 +-
 packages/quiz/src/pages/answer.tsx            |   6 +-
 .../react/src/components/button/index.tsx     |  10 +-
 packages/react/src/components/code-block.tsx  |   5 +-
 packages/react/src/components/footer.tsx      |   2 +-
 packages/react/src/components/input/index.tsx |  14 +-
 packages/react/src/components/navigation.tsx  |   4 +-
 packages/react/src/components/share-links.tsx |  14 +-
 packages/react/src/components/spinner.tsx     |  12 +-
 packages/react/src/layouts/index.tsx          |   6 +-
 .../viewer/src/contexts/viewer-context.tsx    |   4 +-
 237 files changed, 1217 insertions(+), 861 deletions(-)

diff --git a/apps/badass/src/components/call-to-action-form.tsx b/apps/badass/src/components/call-to-action-form.tsx
index 7e1a7ae008..d6c352e145 100644
--- a/apps/badass/src/components/call-to-action-form.tsx
+++ b/apps/badass/src/components/call-to-action-form.tsx
@@ -10,7 +10,9 @@ import {
   SubscribeToConvertkitForm,
 } from '@skillrecordings/convertkit'
 
-export const CallToActionForm: React.FC<any> = ({content}) => {
+export const CallToActionForm: React.FC<React.PropsWithChildren<any>> = ({
+  content,
+}) => {
   const router = useRouter()
 
   return (
diff --git a/apps/badass/src/components/layout.tsx b/apps/badass/src/components/layout.tsx
index fbbcee55be..15c7f6d34d 100644
--- a/apps/badass/src/components/layout.tsx
+++ b/apps/badass/src/components/layout.tsx
@@ -5,12 +5,9 @@ import config from '../config'
 import {first} from 'lodash'
 import Navigation from './navigation'
 
-const Layout: React.FC<LayoutProps & {withFooter?: boolean}> = ({
-  children,
-  withFooter,
-  meta,
-  ...props
-}) => {
+const Layout: React.FC<
+  React.PropsWithChildren<LayoutProps & {withFooter?: boolean}>
+> = ({children, withFooter, meta, ...props}) => {
   const defaultMeta = {
     title: config.defaultTitle,
     description: config.description,
diff --git a/apps/badass/src/components/navigation.tsx b/apps/badass/src/components/navigation.tsx
index 22c4e5c08d..564f791da7 100644
--- a/apps/badass/src/components/navigation.tsx
+++ b/apps/badass/src/components/navigation.tsx
@@ -42,7 +42,7 @@ const Navigation = () => {
   )
 }
 
-const DesktopNav: React.FC = () => {
+const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <div className={cx('sm:flex hidden w-full pl-10 gap-2 h-full justify-end')}>
       <NavSlots>
@@ -53,7 +53,7 @@ const DesktopNav: React.FC = () => {
   )
 }
 
-const MobileNav: React.FC = () => {
+const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <Menu as="div" className="sm:hidden relative inline-block text-left z-10">
       {({open}) => (
@@ -98,11 +98,15 @@ const MobileNav: React.FC = () => {
   )
 }
 
-const NavSlots: React.FC = ({children}) => {
+const NavSlots: React.FC<React.PropsWithChildren<unknown>> = ({children}) => {
   return <div className="flex items-center">{children}</div>
 }
 
-const NavLink: React.FC<{href: string}> = ({href, children, ...props}) => {
+const NavLink: React.FC<React.PropsWithChildren<{href: string}>> = ({
+  href,
+  children,
+  ...props
+}) => {
   const router = useRouter()
   const isActive = href.endsWith(router.pathname)
 
diff --git a/apps/badass/src/components/podcast-player.tsx b/apps/badass/src/components/podcast-player.tsx
index 2b064d563d..3a39071142 100644
--- a/apps/badass/src/components/podcast-player.tsx
+++ b/apps/badass/src/components/podcast-player.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react'
 
-const PodcastPlayer: React.FC<{simplecastId: string}> = ({simplecastId}) => {
+const PodcastPlayer: React.FC<
+  React.PropsWithChildren<{simplecastId: string}>
+> = ({simplecastId}) => {
   return (
     <div className="relative">
       <iframe
diff --git a/apps/badass/src/components/spinner.tsx b/apps/badass/src/components/spinner.tsx
index 578718530c..50cf6e6fbe 100644
--- a/apps/badass/src/components/spinner.tsx
+++ b/apps/badass/src/components/spinner.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react'
 import cx from 'classnames'
 
-const Spinner: React.FunctionComponent<{
-  className?: string
-}> = ({className = '', ...rest}) => (
+const Spinner: React.FunctionComponent<
+  React.PropsWithChildren<{
+    className?: string
+  }>
+> = ({className = '', ...rest}) => (
   <svg
     className={cx('animate-spin', className)}
     xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/badass/src/pages/[article].tsx b/apps/badass/src/pages/[article].tsx
index 6d1f9d43b6..83343ec117 100644
--- a/apps/badass/src/pages/[article].tsx
+++ b/apps/badass/src/pages/[article].tsx
@@ -88,7 +88,10 @@ type ArticlePageProps = {
   hasSubscribed: boolean
 }
 
-const ArticlePage: React.FC<ArticlePageProps> = ({article, hasSubscribed}) => {
+const ArticlePage: React.FC<React.PropsWithChildren<ArticlePageProps>> = ({
+  article,
+  hasSubscribed,
+}) => {
   return <ArticleTemplate article={article} hasSubscribed={hasSubscribed} />
 }
 
diff --git a/apps/badass/src/pages/answer.tsx b/apps/badass/src/pages/answer.tsx
index a263977e5c..e5ae9fc612 100644
--- a/apps/badass/src/pages/answer.tsx
+++ b/apps/badass/src/pages/answer.tsx
@@ -3,7 +3,9 @@ import {QuizAnswerPage} from '@skillrecordings/quiz'
 import {QuestionSet} from '@skillrecordings/types'
 import Layout from '@skillrecordings/react/dist/layouts'
 
-const Answer: React.FC<{questionSet: QuestionSet}> = ({questionSet}) => {
+const Answer: React.FC<React.PropsWithChildren<{questionSet: QuestionSet}>> = ({
+  questionSet,
+}) => {
   return (
     <Layout noIndex meta={{title: 'Quiz'}}>
       <div className="h-full w-full flex flex-col items-center justify-center py-24 px-5">
diff --git a/apps/badass/src/pages/articles.tsx b/apps/badass/src/pages/articles.tsx
index a33d8f1dcd..e113b9f3ed 100644
--- a/apps/badass/src/pages/articles.tsx
+++ b/apps/badass/src/pages/articles.tsx
@@ -18,7 +18,9 @@ type ArticlesProps = {
   articles: SanityDocument[]
 }
 
-const Articles: React.FC<ArticlesProps> = ({articles}) => {
+const Articles: React.FC<React.PropsWithChildren<ArticlesProps>> = ({
+  articles,
+}) => {
   return (
     <Layout meta={meta} className="overflow-hidden">
       <header className="relative px-5 py-28 overflow-hidden text-white bg-[#082C1B] bg-noise">
diff --git a/apps/badass/src/pages/index.tsx b/apps/badass/src/pages/index.tsx
index 8a0224bcfe..f33059b55e 100644
--- a/apps/badass/src/pages/index.tsx
+++ b/apps/badass/src/pages/index.tsx
@@ -31,7 +31,7 @@ const LandingPage = () => {
 
 export default LandingPage
 
-const Header: React.FC<any> = ({content}) => {
+const Header: React.FC<React.PropsWithChildren<any>> = ({content}) => {
   return (
     <header className="lg:min-h-[calc(100vh-200px)] flex flex-col items-center lg:justify-center justify-start text-center px-5">
       <Image
@@ -58,7 +58,9 @@ const Header: React.FC<any> = ({content}) => {
   )
 }
 
-const SecretSauceSection: React.FC<any> = ({content}) => {
+const SecretSauceSection: React.FC<React.PropsWithChildren<any>> = ({
+  content,
+}) => {
   return (
     <section className="relative sm:pb-16 pb-8 flex flex-col items-center justify-center text-center px-5">
       <div className="relative translate-y-10">
@@ -117,7 +119,7 @@ const SecretSauceSection: React.FC<any> = ({content}) => {
   )
 }
 
-const ProjectsSection: React.FC<any> = ({content}) => {
+const ProjectsSection: React.FC<React.PropsWithChildren<any>> = ({content}) => {
   return (
     <section className="flex flex-col items-center justify-center py-16 text-center px-5">
       <div
diff --git a/apps/badass/src/templates/article-template.tsx b/apps/badass/src/templates/article-template.tsx
index 00457a7fd3..04d4390043 100644
--- a/apps/badass/src/templates/article-template.tsx
+++ b/apps/badass/src/templates/article-template.tsx
@@ -23,10 +23,9 @@ type ArticleTemplateProps = {
   hasSubscribed: boolean
 }
 
-const ArticleTemplate: React.FC<ArticleTemplateProps> = ({
-  article,
-  hasSubscribed,
-}) => {
+const ArticleTemplate: React.FC<
+  React.PropsWithChildren<ArticleTemplateProps>
+> = ({article, hasSubscribed}) => {
   const {title, description, body, subscribersOnly, date, cta, ogImage} =
     article
   const shortDescription =
@@ -70,7 +69,9 @@ const ArticleTemplate: React.FC<ArticleTemplateProps> = ({
 
 export default ArticleTemplate
 
-const Header: React.FC<{title: string; date: string}> = ({title, date}) => {
+const Header: React.FC<
+  React.PropsWithChildren<{title: string; date: string}>
+> = ({title, date}) => {
   return (
     <header className="flex flex-col items-center relative px-5 pt-16 pb-8 overflow-hidden text-white bg-[#082C1B] bg-noise">
       <div className="flex flex-col items-center max-w-screen-md mx-auto w-full relative z-10">
@@ -103,7 +104,9 @@ const Header: React.FC<{title: string; date: string}> = ({title, date}) => {
   )
 }
 
-const CTAContainer: React.FC = ({children}) => {
+const CTAContainer: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   return (
     <section
       id="subscribe"
@@ -121,7 +124,7 @@ type GetCTAProps = {
   router: NextRouter
 }
 
-const getCTA: React.FC<GetCTAProps> = ({
+const getCTA: React.FC<React.PropsWithChildren<GetCTAProps>> = ({
   subscribersOnly,
   hasSubscribed,
   cta,
@@ -236,7 +239,7 @@ const ContinueReadingSubscribeForm = () => {
   )
 }
 
-const Share: React.FC<{title: string}> = ({title}) => {
+const Share: React.FC<React.PropsWithChildren<{title: string}>> = ({title}) => {
   const router = useRouter()
   const url = process.env.NEXT_PUBLIC_URL + router.asPath
   const className =
diff --git a/apps/compilersforhumans/src/components/blob.tsx b/apps/compilersforhumans/src/components/blob.tsx
index 8cc36e2228..e21f5bfdba 100644
--- a/apps/compilersforhumans/src/components/blob.tsx
+++ b/apps/compilersforhumans/src/components/blob.tsx
@@ -93,7 +93,9 @@ const Scene = ({theme}: any) => {
   )
 }
 
-const Blob: React.FC<{className?: string}> = ({className = ''}) => {
+const Blob: React.FC<React.PropsWithChildren<{className?: string}>> = ({
+  className = '',
+}) => {
   const {resolvedTheme: theme} = useTheme()
 
   return (
diff --git a/apps/compilersforhumans/src/components/color-mode-toggle.tsx b/apps/compilersforhumans/src/components/color-mode-toggle.tsx
index adf93ca119..615aabad4b 100644
--- a/apps/compilersforhumans/src/components/color-mode-toggle.tsx
+++ b/apps/compilersforhumans/src/components/color-mode-toggle.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {useTheme} from 'next-themes'
 
-const DarkModeToggle: React.FC = () => {
+const DarkModeToggle: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [mounted, setMounted] = React.useState(false)
   const {theme, setTheme} = useTheme()
   React.useEffect(() => setMounted(true), [])
diff --git a/apps/compilersforhumans/src/components/icon.tsx b/apps/compilersforhumans/src/components/icon.tsx
index 2ded993e4f..edf7128f3e 100644
--- a/apps/compilersforhumans/src/components/icon.tsx
+++ b/apps/compilersforhumans/src/components/icon.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react'
 
-const Icon: React.FC<{className: string}> = ({className}) => {
+const Icon: React.FC<React.PropsWithChildren<{className: string}>> = ({
+  className,
+}) => {
   return (
     <svg
       className={className}
diff --git a/apps/compilersforhumans/src/components/spinner.tsx b/apps/compilersforhumans/src/components/spinner.tsx
index b269f192a7..95debda3c6 100644
--- a/apps/compilersforhumans/src/components/spinner.tsx
+++ b/apps/compilersforhumans/src/components/spinner.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react'
 
-const Spinner: React.FunctionComponent<{
-  className?: string
-  size?: number
-  color?: string
-}> = ({className = '', size = 6}) => (
+const Spinner: React.FunctionComponent<
+  React.PropsWithChildren<{
+    className?: string
+    size?: number
+    color?: string
+  }>
+> = ({className = '', size = 6}) => (
   <svg
     className={`animate-spin h-${size} w-${size} ${className}`}
     xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/compilersforhumans/src/layouts/index.tsx b/apps/compilersforhumans/src/layouts/index.tsx
index 6259b14752..37c0d0a0bf 100644
--- a/apps/compilersforhumans/src/layouts/index.tsx
+++ b/apps/compilersforhumans/src/layouts/index.tsx
@@ -9,7 +9,7 @@ type LayoutProps = {
   className?: string
 }
 
-const Layout: FunctionComponent<LayoutProps> = ({
+const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className,
   meta,
diff --git a/apps/compilersforhumans/src/pages/answer.tsx b/apps/compilersforhumans/src/pages/answer.tsx
index 422c2f0941..9aa56b4839 100644
--- a/apps/compilersforhumans/src/pages/answer.tsx
+++ b/apps/compilersforhumans/src/pages/answer.tsx
@@ -4,7 +4,9 @@ import {QuizAnswerPage} from '@skillrecordings/quiz'
 import {QuestionSet} from '@skillrecordings/types'
 import getConfig from '@skillrecordings/quiz/dist/config'
 
-const Answer: React.FC<{questionSet: QuestionSet}> = ({questionSet}) => {
+const Answer: React.FC<React.PropsWithChildren<{questionSet: QuestionSet}>> = ({
+  questionSet,
+}) => {
   return (
     <Layout noIndex meta={{title: 'Quiz'}}>
       <div className="h-full w-full flex flex-col items-center justify-center py-24 px-5">
diff --git a/apps/compilersforhumans/src/templates/article.tsx b/apps/compilersforhumans/src/templates/article.tsx
index 41dc111ccf..69ef0ff66c 100644
--- a/apps/compilersforhumans/src/templates/article.tsx
+++ b/apps/compilersforhumans/src/templates/article.tsx
@@ -6,7 +6,9 @@ type ArticleTemplateProps = {
   meta?: any
 }
 
-const ArticleTemplate: React.FC<ArticleTemplateProps> = ({meta, children}) => {
+const ArticleTemplate: React.FC<
+  React.PropsWithChildren<ArticleTemplateProps>
+> = ({meta, children}) => {
   const {title} = meta
 
   return (
diff --git a/apps/cssdestructured/src/components/app/layout.tsx b/apps/cssdestructured/src/components/app/layout.tsx
index 450b24880c..bf84a97252 100644
--- a/apps/cssdestructured/src/components/app/layout.tsx
+++ b/apps/cssdestructured/src/components/app/layout.tsx
@@ -13,7 +13,7 @@ type LayoutProps = {
   nav?: React.ReactElement | null
 }
 
-const Layout: FunctionComponent<LayoutProps> = ({
+const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className,
   meta,
diff --git a/apps/cssdestructured/src/components/images/index.tsx b/apps/cssdestructured/src/components/images/index.tsx
index 64afc1f31e..4dc6cb7d1f 100644
--- a/apps/cssdestructured/src/components/images/index.tsx
+++ b/apps/cssdestructured/src/components/images/index.tsx
@@ -1,7 +1,9 @@
 import React from 'react'
 import {motion} from 'framer-motion'
 
-const Logo: React.FC<{className?: string}> = ({className = ''}) => {
+const Logo: React.FC<React.PropsWithChildren<{className?: string}>> = ({
+  className = '',
+}) => {
   return (
     <div
       aria-hidden
@@ -29,7 +31,7 @@ const Logo: React.FC<{className?: string}> = ({className = ''}) => {
   )
 }
 
-const Blocks1: React.FC<any> = (props) => {
+const Blocks1: React.FC<React.PropsWithChildren<any>> = (props) => {
   return (
     <svg
       className={props.className}
@@ -315,7 +317,7 @@ const GridVisual = () => {
   )
 }
 
-const Left: React.FC<any> = ({className}) => {
+const Left: React.FC<React.PropsWithChildren<any>> = ({className}) => {
   return (
     <svg
       className={className}
@@ -398,7 +400,7 @@ const Left: React.FC<any> = ({className}) => {
   )
 }
 
-const Right: React.FC<any> = ({className}) => {
+const Right: React.FC<React.PropsWithChildren<any>> = ({className}) => {
   return (
     <svg
       className={className}
@@ -502,7 +504,7 @@ const Right: React.FC<any> = ({className}) => {
   )
 }
 
-const Bottom: React.FC<any> = (props) => {
+const Bottom: React.FC<React.PropsWithChildren<any>> = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/cssdestructured/src/components/mdx/code-block.tsx b/apps/cssdestructured/src/components/mdx/code-block.tsx
index 75ab85769e..9bee67c214 100644
--- a/apps/cssdestructured/src/components/mdx/code-block.tsx
+++ b/apps/cssdestructured/src/components/mdx/code-block.tsx
@@ -10,7 +10,7 @@ type CodeBlockProps = {
   metastring: string
 }
 
-const CodeBlock: React.FC<CodeBlockProps> = ({
+const CodeBlock: React.FC<React.PropsWithChildren<CodeBlockProps>> = ({
   language,
   metastring,
   children,
@@ -96,17 +96,20 @@ const CodeBlock: React.FC<CodeBlockProps> = ({
 
 export default CodeBlock
 
-const Line: React.FC<{highlight?: boolean}> = ({highlight, children}) => (
-  <div className={highlight ? 'bg-white bg-opacity-5' : ''}>{children}</div>
-)
+const Line: React.FC<React.PropsWithChildren<{highlight?: boolean}>> = ({
+  highlight,
+  children,
+}) => <div className={highlight ? 'bg-white bg-opacity-5' : ''}>{children}</div>
 
-const Number: React.FC = ({children}) => (
+const Number: React.FC<React.PropsWithChildren<unknown>> = ({children}) => (
   <span className="line-number opacity-20 text-xs w-7 inline-block select-none pointer-events-none">
     {children}
   </span>
 )
 
-const CopyToClipboard: React.FC<{code: string}> = ({code}) => {
+const CopyToClipboard: React.FC<React.PropsWithChildren<{code: string}>> = ({
+  code,
+}) => {
   const [isCopied, setCopied] = useClipboard(code, {successDuration: 1000})
 
   return (
diff --git a/apps/cssdestructured/src/components/mdx/headings.tsx b/apps/cssdestructured/src/components/mdx/headings.tsx
index 2d18488639..2938724d97 100644
--- a/apps/cssdestructured/src/components/mdx/headings.tsx
+++ b/apps/cssdestructured/src/components/mdx/headings.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const H1: React.FC<any> = ({
+const H1: React.FC<React.PropsWithChildren<any>> = ({
   className = 'pt-16 md:-mx-16 mx-0',
   children,
   ...props
@@ -11,7 +11,7 @@ const H1: React.FC<any> = ({
     </h1>
   )
 }
-const H2: React.FC<any> = ({
+const H2: React.FC<React.PropsWithChildren<any>> = ({
   className = 'py-4 md:-mx-16 mx-0',
   children,
   ...props
@@ -22,7 +22,7 @@ const H2: React.FC<any> = ({
     </h2>
   )
 }
-const H3: React.FC<any> = ({
+const H3: React.FC<React.PropsWithChildren<any>> = ({
   className = 'pt-0 pb-8 md:-mx-16 mx-0',
   children,
   ...props
@@ -33,7 +33,7 @@ const H3: React.FC<any> = ({
     </h3>
   )
 }
-const H4: React.FC<any> = ({
+const H4: React.FC<React.PropsWithChildren<any>> = ({
   className = 'md:-mx-16 mx-0',
   children,
   ...props
diff --git a/apps/cssdestructured/src/components/mdx/highlights.tsx b/apps/cssdestructured/src/components/mdx/highlights.tsx
index 20a894d59c..e2ce896293 100644
--- a/apps/cssdestructured/src/components/mdx/highlights.tsx
+++ b/apps/cssdestructured/src/components/mdx/highlights.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const HighlightedText: React.FC<any> = (props) => {
+const HighlightedText: React.FC<React.PropsWithChildren<any>> = (props) => {
   return (
     <mark className="bg-white bg-opacity-10 rounded-tr-lg px-1 pb-0.5">
       {props.children}
@@ -8,7 +8,7 @@ const HighlightedText: React.FC<any> = (props) => {
   )
 }
 
-const WithStars: React.FC<any> = (props) => {
+const WithStars: React.FC<React.PropsWithChildren<any>> = (props) => {
   return (
     <strong {...props}>
       <svg
@@ -48,7 +48,7 @@ const WithStars: React.FC<any> = (props) => {
   )
 }
 
-const ParagraphWithArrow: React.FC<any> = (props) => {
+const ParagraphWithArrow: React.FC<React.PropsWithChildren<any>> = (props) => {
   return <strong>{props.children}</strong>
 }
 
diff --git a/apps/cssdestructured/src/components/mdx/link.tsx b/apps/cssdestructured/src/components/mdx/link.tsx
index 6307aac458..2cd0ae98a6 100644
--- a/apps/cssdestructured/src/components/mdx/link.tsx
+++ b/apps/cssdestructured/src/components/mdx/link.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const Link: React.FC<any> = (props) => {
+const Link: React.FC<React.PropsWithChildren<any>> = (props) => {
   return (
     <a
       className="border-b-2 focus:ring-1 focus:ring-offset-2 focus:ring-offset-background focus:ring-brand-cream rounded-sm focus:outline-none border-brand-brightYellow border-opacity-75 hover:border-opacity-100 transition-all ease-in-out duration-300"
diff --git a/apps/cssdestructured/src/components/mdx/lists.tsx b/apps/cssdestructured/src/components/mdx/lists.tsx
index 6d9eae5e5f..4b81ea7f73 100644
--- a/apps/cssdestructured/src/components/mdx/lists.tsx
+++ b/apps/cssdestructured/src/components/mdx/lists.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const Li: React.FC<any> = (props) => {
+const Li: React.FC<React.PropsWithChildren<any>> = (props) => {
   return <li className="before:bg-transparent">{props.children}</li>
 }
 
diff --git a/apps/cssdestructured/src/pages/answer.tsx b/apps/cssdestructured/src/pages/answer.tsx
index d5e3bb94ee..9b42b9385b 100644
--- a/apps/cssdestructured/src/pages/answer.tsx
+++ b/apps/cssdestructured/src/pages/answer.tsx
@@ -10,7 +10,9 @@ import groq from 'groq'
 
 const QUIZ_SLUG = 'email-course'
 
-const Answer: React.FC<{quiz: QuizResource}> = ({quiz}) => {
+const Answer: React.FC<React.PropsWithChildren<{quiz: QuizResource}>> = ({
+  quiz,
+}) => {
   const questionSet: QuestionSet = transformSanityQuiz(quiz)
 
   return (
diff --git a/apps/engmanagement/src/components/app/layout.tsx b/apps/engmanagement/src/components/app/layout.tsx
index cbee482f24..5e6b6fddd3 100644
--- a/apps/engmanagement/src/components/app/layout.tsx
+++ b/apps/engmanagement/src/components/app/layout.tsx
@@ -12,7 +12,7 @@ type LayoutProps = {
   footer?: React.ReactElement | null
 }
 
-const Layout: FunctionComponent<LayoutProps> = ({
+const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className,
   meta,
diff --git a/apps/engmanagement/src/components/article-assets.tsx b/apps/engmanagement/src/components/article-assets.tsx
index 0ade354143..28720eb906 100644
--- a/apps/engmanagement/src/components/article-assets.tsx
+++ b/apps/engmanagement/src/components/article-assets.tsx
@@ -167,10 +167,9 @@ const TheFutureOfRemoteWorkBackground = () => {
   )
 }
 
-const TheValueOfValuesExample: React.FC<{number?: Number}> = ({
-  children,
-  number,
-}) => {
+const TheValueOfValuesExample: React.FC<
+  React.PropsWithChildren<{number?: Number}>
+> = ({children, number}) => {
   const childrenArr: React.ReactNode[] = React.Children.toArray(children)
   const firstElement: React.ReactNode = childrenArr[0]
   const header: React.ReactNode =
diff --git a/apps/engmanagement/src/components/color-mode-toggle.tsx b/apps/engmanagement/src/components/color-mode-toggle.tsx
index b0c4050e14..615aabad4b 100644
--- a/apps/engmanagement/src/components/color-mode-toggle.tsx
+++ b/apps/engmanagement/src/components/color-mode-toggle.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { useTheme } from 'next-themes'
+import {useTheme} from 'next-themes'
 
-const DarkModeToggle: React.FC = () => {
+const DarkModeToggle: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [mounted, setMounted] = React.useState(false)
-  const { theme, setTheme } = useTheme()
+  const {theme, setTheme} = useTheme()
   React.useEffect(() => setMounted(true), [])
 
   return (
diff --git a/apps/engmanagement/src/components/convertkit-subscribe-and-tag.tsx b/apps/engmanagement/src/components/convertkit-subscribe-and-tag.tsx
index 1270edd48c..2f0373b4b4 100644
--- a/apps/engmanagement/src/components/convertkit-subscribe-and-tag.tsx
+++ b/apps/engmanagement/src/components/convertkit-subscribe-and-tag.tsx
@@ -6,10 +6,12 @@ import Spinner from 'components/spinner'
 import * as Yup from 'yup'
 import {useRouter} from 'next/router'
 
-const ConvertkitSubscribeAndTagForm: React.FC<{
-  tag?: string
-  idNum?: string
-}> = ({tag, idNum = '1'}) => {
+const ConvertkitSubscribeAndTagForm: React.FC<
+  React.PropsWithChildren<{
+    tag?: string
+    idNum?: string
+  }>
+> = ({tag, idNum = '1'}) => {
   const {subscriber} = useConvertkit()
   const [submitting, setSubmitting] = React.useState<boolean>(false)
   const router = useRouter()
diff --git a/apps/engmanagement/src/components/share.tsx b/apps/engmanagement/src/components/share.tsx
index 215faac34d..59ae8bc641 100644
--- a/apps/engmanagement/src/components/share.tsx
+++ b/apps/engmanagement/src/components/share.tsx
@@ -125,7 +125,10 @@ const icons = {
 const style =
   'rounded-lg bg-gray-400 bg-opacity-10 hover:bg-opacity-20 transition-all ease-in-out duration-200 flex items-center justify-center p-3 m-1'
 
-const Twitter: React.FC<ShareProps> = ({link, message}) => (
+const Twitter: React.FC<React.PropsWithChildren<ShareProps>> = ({
+  link,
+  message,
+}) => (
   <a
     href={links.twitter(link, message)}
     className={style}
@@ -137,7 +140,7 @@ const Twitter: React.FC<ShareProps> = ({link, message}) => (
   </a>
 )
 
-const Facebook: React.FC<ShareProps> = ({link}) => (
+const Facebook: React.FC<React.PropsWithChildren<ShareProps>> = ({link}) => (
   <a
     href={links.facebook(link)}
     className={style}
@@ -149,7 +152,10 @@ const Facebook: React.FC<ShareProps> = ({link}) => (
   </a>
 )
 
-const Reddit: React.FC<ShareProps> = ({link, message}) => (
+const Reddit: React.FC<React.PropsWithChildren<ShareProps>> = ({
+  link,
+  message,
+}) => (
   <a
     href={links.reddit(link, message)}
     className={style}
@@ -161,7 +167,9 @@ const Reddit: React.FC<ShareProps> = ({link, message}) => (
   </a>
 )
 
-const CopyToClipboard: React.FC<ShareProps> = ({link}) => {
+const CopyToClipboard: React.FC<React.PropsWithChildren<ShareProps>> = ({
+  link,
+}) => {
   const [copied, copyToClipboard] = useClipboard(link, {
     successDuration: 700,
   })
@@ -183,7 +191,7 @@ const CopyToClipboard: React.FC<ShareProps> = ({link}) => {
   )
 }
 
-const LinkedIn: React.FC<ShareProps> = ({link}) => (
+const LinkedIn: React.FC<React.PropsWithChildren<ShareProps>> = ({link}) => (
   <a
     href={links.linkedin(link)}
     className={style}
@@ -195,7 +203,10 @@ const LinkedIn: React.FC<ShareProps> = ({link}) => (
   </a>
 )
 
-const Hacker: React.FC<ShareProps> = ({link, message}) => (
+const Hacker: React.FC<React.PropsWithChildren<ShareProps>> = ({
+  link,
+  message,
+}) => (
   <a
     href={links.hacker(link, message)}
     className={style}
diff --git a/apps/engmanagement/src/components/spinner.tsx b/apps/engmanagement/src/components/spinner.tsx
index 7537c653ea..95debda3c6 100644
--- a/apps/engmanagement/src/components/spinner.tsx
+++ b/apps/engmanagement/src/components/spinner.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react'
 
-const Spinner: React.FunctionComponent<{
-  className?: string
-  size?: number
-  color?: string
-}> = ({ className = '', size = 6 }) => (
+const Spinner: React.FunctionComponent<
+  React.PropsWithChildren<{
+    className?: string
+    size?: number
+    color?: string
+  }>
+> = ({className = '', size = 6}) => (
   <svg
     className={`animate-spin h-${size} w-${size} ${className}`}
     xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/engmanagement/src/layouts/index.tsx b/apps/engmanagement/src/layouts/index.tsx
index 89f8288527..200bf5a828 100644
--- a/apps/engmanagement/src/layouts/index.tsx
+++ b/apps/engmanagement/src/layouts/index.tsx
@@ -10,7 +10,7 @@ type LayoutProps = {
   hideNav?: boolean
 }
 
-const Layout: FunctionComponent<LayoutProps> = ({
+const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className,
   meta,
diff --git a/apps/engmanagement/src/pages/answer.tsx b/apps/engmanagement/src/pages/answer.tsx
index ba02a3d1a7..02cf7cab57 100644
--- a/apps/engmanagement/src/pages/answer.tsx
+++ b/apps/engmanagement/src/pages/answer.tsx
@@ -4,7 +4,9 @@ import {QuizAnswerPage} from '@skillrecordings/quiz'
 import {QuestionSet} from '@skillrecordings/types'
 import getConfig from '@skillrecordings/quiz/dist/config'
 
-const Answer: React.FC<{questionSet: QuestionSet}> = ({questionSet}) => {
+const Answer: React.FC<React.PropsWithChildren<{questionSet: QuestionSet}>> = ({
+  questionSet,
+}) => {
   return (
     <Layout noIndex meta={{title: 'Quiz'}}>
       <div className="h-full w-full flex flex-col items-center justify-center py-24 px-5">
diff --git a/apps/engmanagement/src/pages/login.tsx b/apps/engmanagement/src/pages/login.tsx
index fad80f175c..c4242d4717 100644
--- a/apps/engmanagement/src/pages/login.tsx
+++ b/apps/engmanagement/src/pages/login.tsx
@@ -5,7 +5,9 @@ import {GetServerSideProps} from 'next'
 import Image from 'next/image'
 import Layout from 'components/app/layout'
 
-const Login: React.FC<{csrfToken: string}> = ({csrfToken}) => {
+const Login: React.FC<React.PropsWithChildren<{csrfToken: string}>> = ({
+  csrfToken,
+}) => {
   const {
     register,
     formState: {errors},
diff --git a/apps/engmanagement/src/templates/article.tsx b/apps/engmanagement/src/templates/article.tsx
index 5aa330ee9d..882889ff12 100644
--- a/apps/engmanagement/src/templates/article.tsx
+++ b/apps/engmanagement/src/templates/article.tsx
@@ -31,11 +31,9 @@ type AuthorProps = {
   url: string
 }
 
-const ShareArticle: React.FC<{title: string; slug: string}> = ({
-  children,
-  title,
-  slug,
-}) => {
+const ShareArticle: React.FC<
+  React.PropsWithChildren<{title: string; slug: string}>
+> = ({children, title, slug}) => {
   return (
     <div className="flex items-center md:flex-row flex-col md:space-x-2 md:space-y-0 space-y-5">
       {children}
@@ -60,7 +58,11 @@ const ShareArticle: React.FC<{title: string; slug: string}> = ({
   )
 }
 
-const Author: React.FC<AuthorProps> = ({name, image, url}) => {
+const Author: React.FC<React.PropsWithChildren<AuthorProps>> = ({
+  name,
+  image,
+  url,
+}) => {
   return (
     <a href={url} target="_blank" rel="noopener noreferrer" className="group">
       <div className="relative z-10 flex items-center justify-center">
@@ -84,12 +86,9 @@ const Author: React.FC<AuthorProps> = ({name, image, url}) => {
   )
 }
 
-const ArticleTemplate: React.FC<ArticleTemplateProps> = ({
-  meta,
-  children,
-  footer = true,
-  subscribeForm = true,
-}) => {
+const ArticleTemplate: React.FC<
+  React.PropsWithChildren<ArticleTemplateProps>
+> = ({meta, children, footer = true, subscribeForm = true}) => {
   const {title, image, published, description, images, background} = meta
   const author = meta.author || {
     name: config.author,
diff --git a/apps/escuelafrontend/src/components/app/layout.tsx b/apps/escuelafrontend/src/components/app/layout.tsx
index 757f01614f..18f9d465ac 100644
--- a/apps/escuelafrontend/src/components/app/layout.tsx
+++ b/apps/escuelafrontend/src/components/app/layout.tsx
@@ -4,7 +4,9 @@ import Header from './header'
 import Main from './main'
 import Footer from './footer'
 
-const Layout: FunctionComponent = ({children}) => {
+const Layout: FunctionComponent<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   return (
     <>
       <Header />
diff --git a/apps/escuelafrontend/src/components/app/main.tsx b/apps/escuelafrontend/src/components/app/main.tsx
index 33fa718317..06578bab08 100644
--- a/apps/escuelafrontend/src/components/app/main.tsx
+++ b/apps/escuelafrontend/src/components/app/main.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react'
 import {FunctionComponent} from 'react'
 
-const Main: FunctionComponent = ({children}) => {
+const Main: FunctionComponent<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   return <div className={`w-full flex flex-col flex-grow p-5`}>{children}</div>
 }
 
diff --git a/apps/escuelafrontend/src/components/cards/horizontal-resource-card.tsx b/apps/escuelafrontend/src/components/cards/horizontal-resource-card.tsx
index 1a82cbd8fb..2623b82598 100644
--- a/apps/escuelafrontend/src/components/cards/horizontal-resource-card.tsx
+++ b/apps/escuelafrontend/src/components/cards/horizontal-resource-card.tsx
@@ -8,12 +8,9 @@ type HorizontalResourceCardProps = {
   className?: string
 }
 
-const HorizontalResourceCard: React.FC<HorizontalResourceCardProps> = ({
-  resource,
-  location,
-  className = 'p-5 sm:p-8 ',
-  ...props
-}) => {
+const HorizontalResourceCard: React.FC<
+  React.PropsWithChildren<HorizontalResourceCardProps>
+> = ({resource, location, className = 'p-5 sm:p-8 ', ...props}) => {
   className = `${className} text-black h-full dark:text-white bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg dark:bg-opacity-80 bg-opacity-80 hover:shadow-md rounded overflow-hidden hover:-translate-y-2 hover:scale-[1.01] transform transition-all ease-in-out duration-300 flex flex-col justify-start items-between shadow dark:border dark:border-gray-700 dark:border-opacity-50`
 
   return (
diff --git a/apps/escuelafrontend/src/components/cards/verticle-resource-card.tsx b/apps/escuelafrontend/src/components/cards/verticle-resource-card.tsx
index fb7ccdb46d..d733212588 100644
--- a/apps/escuelafrontend/src/components/cards/verticle-resource-card.tsx
+++ b/apps/escuelafrontend/src/components/cards/verticle-resource-card.tsx
@@ -10,7 +10,9 @@ type VerticalResourceCardProps = {
   featuredResource?: boolean
 }
 
-const VerticalResourceCard: React.FC<VerticalResourceCardProps> = ({
+const VerticalResourceCard: React.FC<
+  React.PropsWithChildren<VerticalResourceCardProps>
+> = ({
   resource,
   location,
   className = 'px-5 py-12 sm:px-8',
diff --git a/apps/escuelafrontend/src/components/color-mode-toggle.tsx b/apps/escuelafrontend/src/components/color-mode-toggle.tsx
index e1fb238db4..e47e85d3e0 100644
--- a/apps/escuelafrontend/src/components/color-mode-toggle.tsx
+++ b/apps/escuelafrontend/src/components/color-mode-toggle.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {useTheme} from 'next-themes'
 
-const DarkModeToggle: React.FC = () => {
+const DarkModeToggle: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [mounted, setMounted] = React.useState(false)
   const {theme, setTheme} = useTheme()
   React.useEffect(() => setMounted(true), [])
diff --git a/apps/escuelafrontend/src/components/forms/convertkit/subscribe-form.tsx b/apps/escuelafrontend/src/components/forms/convertkit/subscribe-form.tsx
index 99bb06b1d4..bdc9cd287c 100644
--- a/apps/escuelafrontend/src/components/forms/convertkit/subscribe-form.tsx
+++ b/apps/escuelafrontend/src/components/forms/convertkit/subscribe-form.tsx
@@ -1,7 +1,9 @@
 import {useConvertkit} from '@skillrecordings/convertkit'
 import * as React from 'react'
 
-const SubscribeForm: React.FC<{onSubmit?: () => void; className?: string}> = ({
+const SubscribeForm: React.FC<
+  React.PropsWithChildren<{onSubmit?: () => void; className?: string}>
+> = ({
   onSubmit,
   className = 'relative py-16 lg:py-40 xl:py-48 md:py-32 sm:py-24',
 }) => {
diff --git a/apps/escuelafrontend/src/components/logo.tsx b/apps/escuelafrontend/src/components/logo.tsx
index 0e0ead6673..2fd339577d 100644
--- a/apps/escuelafrontend/src/components/logo.tsx
+++ b/apps/escuelafrontend/src/components/logo.tsx
@@ -6,7 +6,9 @@ type LogoProps = {
   className?: string
 }
 
-const Logo: FunctionComponent<LogoProps> = ({className}) => {
+const Logo: FunctionComponent<React.PropsWithChildren<LogoProps>> = ({
+  className,
+}) => {
   return (
     <div
       className={`flex items-center space-x-2 font-fibra dark:hover:text-white hover:text-gray-900 sm:text-3xl text-2xl font-bold tracking-tight leading-tight transition-colors ease-in-out duration-100 ${className}`}
diff --git a/apps/escuelafrontend/src/components/markdown.tsx b/apps/escuelafrontend/src/components/markdown.tsx
index e2c9fe56b4..b24d557a29 100644
--- a/apps/escuelafrontend/src/components/markdown.tsx
+++ b/apps/escuelafrontend/src/components/markdown.tsx
@@ -2,7 +2,9 @@ import * as React from 'react'
 import ReactMarkdown from 'react-markdown'
 import gfm from 'remark-gfm'
 
-const Markdown: React.FunctionComponent<any> = (props) => {
+const Markdown: React.FunctionComponent<React.PropsWithChildren<any>> = (
+  props,
+) => {
   return <ReactMarkdown remarkPlugins={[gfm]} {...props} />
 }
 
diff --git a/apps/escuelafrontend/src/components/mdx/code.tsx b/apps/escuelafrontend/src/components/mdx/code.tsx
index 6a7ed170c1..b0c0f503e9 100644
--- a/apps/escuelafrontend/src/components/mdx/code.tsx
+++ b/apps/escuelafrontend/src/components/mdx/code.tsx
@@ -9,7 +9,7 @@ type CodeBlockProps = {
   metastring: string
 }
 
-const CodeBlock: FunctionComponent<CodeBlockProps> = ({
+const CodeBlock: FunctionComponent<React.PropsWithChildren<CodeBlockProps>> = ({
   language,
   metastring,
   children,
@@ -86,18 +86,23 @@ const CodeBlock: FunctionComponent<CodeBlockProps> = ({
 
 export default CodeBlock
 
-const Line: FunctionComponent<{highlight?: boolean}> = ({
-  highlight,
-  children,
-}) => <div className={highlight ? 'bg-gray-800' : ''}>{children}</div>
+const Line: FunctionComponent<
+  React.PropsWithChildren<{highlight?: boolean}>
+> = ({highlight, children}) => (
+  <div className={highlight ? 'bg-gray-800' : ''}>{children}</div>
+)
 
-const Number: FunctionComponent = ({children}) => (
+const Number: FunctionComponent<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => (
   <span className="inline-block text-xs text-gray-500 pointer-events-none select-none line-number w-7">
     {children}
   </span>
 )
 
-const CopyToClipboard: FunctionComponent<{code: string}> = ({code}) => {
+const CopyToClipboard: FunctionComponent<
+  React.PropsWithChildren<{code: string}>
+> = ({code}) => {
   const [isCopied, setCopied] = useClipboard(code, {successDuration: 1000})
   return (
     <button
diff --git a/apps/escuelafrontend/src/components/pages/home/jumbotron/index.tsx b/apps/escuelafrontend/src/components/pages/home/jumbotron/index.tsx
index 9c02c40977..3245ee96a3 100644
--- a/apps/escuelafrontend/src/components/pages/home/jumbotron/index.tsx
+++ b/apps/escuelafrontend/src/components/pages/home/jumbotron/index.tsx
@@ -8,7 +8,9 @@ type JumbotronProps = {
   resource: any
 }
 
-const Jumbotron: FunctionComponent<JumbotronProps> = ({resource}) => {
+const Jumbotron: FunctionComponent<React.PropsWithChildren<JumbotronProps>> = ({
+  resource,
+}) => {
   const {image, title, description, path, meta} = resource
 
   return (
diff --git a/apps/escuelafrontend/src/components/waves/hero-wave.tsx b/apps/escuelafrontend/src/components/waves/hero-wave.tsx
index 5106e41043..a27a54e239 100644
--- a/apps/escuelafrontend/src/components/waves/hero-wave.tsx
+++ b/apps/escuelafrontend/src/components/waves/hero-wave.tsx
@@ -5,7 +5,7 @@ type WaveProps = {
   duration?: number
 }
 
-const HeroWave: React.FC<WaveProps> = ({
+const HeroWave: React.FC<React.PropsWithChildren<WaveProps>> = ({
   className = 'text-gray-100 transition-colors duration-100 ease-in-out fill-current dark:text-gray-900',
   duration = '20',
 }) => {
diff --git a/apps/escuelafrontend/src/layouts/article.tsx b/apps/escuelafrontend/src/layouts/article.tsx
index 47a910bf24..737956f3cc 100644
--- a/apps/escuelafrontend/src/layouts/article.tsx
+++ b/apps/escuelafrontend/src/layouts/article.tsx
@@ -15,7 +15,9 @@ type ArticleTemplateProps = {
   meta?: any
 }
 
-const ArticleTemplate: React.FC<ArticleTemplateProps> = ({meta}) => {
+const ArticleTemplate: React.FC<
+  React.PropsWithChildren<ArticleTemplateProps>
+> = ({meta}) => {
   const {
     title = 'Missing title',
     instructor = {name: 'Unknown Instructor'},
@@ -139,13 +141,15 @@ const ArticleTemplate: React.FC<ArticleTemplateProps> = ({meta}) => {
 
 export default ArticleTemplate
 
-const Instructor: FunctionComponent<{
-  instructor: {
-    slug?: string
-    name?: string
-    image?: any
-  }
-}> = ({instructor}) => {
+const Instructor: FunctionComponent<
+  React.PropsWithChildren<{
+    instructor: {
+      slug?: string
+      name?: string
+      image?: any
+    }
+  }>
+> = ({instructor}) => {
   const {slug, name, image} = instructor
 
   return (
diff --git a/apps/escuelafrontend/src/layouts/index.tsx b/apps/escuelafrontend/src/layouts/index.tsx
index 18d2d3a320..cbc35eaa97 100644
--- a/apps/escuelafrontend/src/layouts/index.tsx
+++ b/apps/escuelafrontend/src/layouts/index.tsx
@@ -7,7 +7,7 @@ type LayoutProps = {
   className?: string
 }
 
-const Layout: FunctionComponent<LayoutProps> = ({
+const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className = '',
   meta,
diff --git a/apps/escuelafrontend/src/layouts/profile.tsx b/apps/escuelafrontend/src/layouts/profile.tsx
index 86ad238632..dc946a821e 100644
--- a/apps/escuelafrontend/src/layouts/profile.tsx
+++ b/apps/escuelafrontend/src/layouts/profile.tsx
@@ -13,7 +13,9 @@ type ProfileTemplateProps = {
   meta?: any
 }
 
-const ProfileTemplate: React.FC<ProfileTemplateProps> = ({meta}) => {
+const ProfileTemplate: React.FC<
+  React.PropsWithChildren<ProfileTemplateProps>
+> = ({meta}) => {
   const {allArticles = {}, instructor = {name: 'Unknown instructor'}} = meta
 
   const featuredResource = instructor.featuredResource
@@ -105,16 +107,18 @@ const AllArticles = (allArticles: any) => {
   )
 }
 
-const Instructor: FunctionComponent<{
-  instructor: {
-    name: string
-    image: any
-    twitter: string
-    website: string
-    bio: string
-    title: string
-  }
-}> = ({instructor}) => {
+const Instructor: FunctionComponent<
+  React.PropsWithChildren<{
+    instructor: {
+      name: string
+      image: any
+      twitter: string
+      website: string
+      bio: string
+      title: string
+    }
+  }>
+> = ({instructor}) => {
   const {name, image, twitter, bio, website, title} = instructor
 
   return (
diff --git a/apps/escuelafrontend/src/pages/_app.tsx b/apps/escuelafrontend/src/pages/_app.tsx
index 29bbee94cf..8a6e821ea9 100644
--- a/apps/escuelafrontend/src/pages/_app.tsx
+++ b/apps/escuelafrontend/src/pages/_app.tsx
@@ -23,7 +23,10 @@ declare global {
   }
 }
 
-const App: React.FC<AppProps> = ({Component, pageProps}) => {
+const App: React.FC<React.PropsWithChildren<AppProps>> = ({
+  Component,
+  pageProps,
+}) => {
   const AppComponent = Component as any
 
   const router = useRouter()
diff --git a/apps/escuelafrontend/src/pages/acceso.tsx b/apps/escuelafrontend/src/pages/acceso.tsx
index 3291110ce0..ce12c07865 100644
--- a/apps/escuelafrontend/src/pages/acceso.tsx
+++ b/apps/escuelafrontend/src/pages/acceso.tsx
@@ -3,7 +3,9 @@ import {getCsrfToken, getProviders} from 'next-auth/react'
 import {useForm} from 'react-hook-form'
 import {GetServerSideProps} from 'next'
 
-const Login: React.FC<{csrfToken: string}> = ({csrfToken}) => {
+const Login: React.FC<React.PropsWithChildren<{csrfToken: string}>> = ({
+  csrfToken,
+}) => {
   const {
     register,
     formState: {errors},
diff --git a/apps/escuelafrontend/src/pages/articulos/index.tsx b/apps/escuelafrontend/src/pages/articulos/index.tsx
index 83916a83cf..66f0394294 100644
--- a/apps/escuelafrontend/src/pages/articulos/index.tsx
+++ b/apps/escuelafrontend/src/pages/articulos/index.tsx
@@ -3,7 +3,7 @@ import groq from 'groq'
 import {sanityClient} from 'utils/sanity-client'
 import {HorizontalResourceCard} from 'components/cards/horizontal-resource-card'
 
-const Blog: React.FC = (allArticles: any) => {
+const Blog: React.FC<React.PropsWithChildren<unknown>> = (allArticles: any) => {
   return (
     <div className="max-w-screen-xl mx-auto">
       <h1 className="w-full max-w-screen-lg py-16 m-auto mb-10 text-4xl font-extrabold tracking-tight text-center text-black transition-all duration-500 ease-in-out dark:text-white md:text-5xl leading-tighter sm:text-5xl lg:text-6xl xl:text-7xl">
diff --git a/apps/escuelafrontend/src/pages/cursos/index.tsx b/apps/escuelafrontend/src/pages/cursos/index.tsx
index 362e8f0be1..ead26fe908 100644
--- a/apps/escuelafrontend/src/pages/cursos/index.tsx
+++ b/apps/escuelafrontend/src/pages/cursos/index.tsx
@@ -3,7 +3,9 @@ import groq from 'groq'
 import {sanityClient} from 'utils/sanity-client'
 import {VerticalResourceCard} from 'components/cards/verticle-resource-card'
 
-const Cursos: React.FC = (allCourses: any) => {
+const Cursos: React.FC<React.PropsWithChildren<unknown>> = (
+  allCourses: any,
+) => {
   return (
     <div className="max-w-screen-xl mx-auto">
       <h1 className="w-full max-w-screen-lg py-16 m-auto mb-10 text-4xl font-extrabold tracking-tight text-center text-black transition-all duration-500 ease-in-out dark:text-white md:text-5xl leading-tighter sm:text-5xl lg:text-6xl xl:text-7xl">
diff --git a/apps/fronttoback/src/components/layout.tsx b/apps/fronttoback/src/components/layout.tsx
index 453b11537e..ad3d74141f 100644
--- a/apps/fronttoback/src/components/layout.tsx
+++ b/apps/fronttoback/src/components/layout.tsx
@@ -11,7 +11,7 @@ type LayoutProps = {
   children?: any
 }
 
-const Layout: FunctionComponent<LayoutProps> = ({
+const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className,
   meta,
diff --git a/apps/fronttoback/src/pages/answer.tsx b/apps/fronttoback/src/pages/answer.tsx
index ffa8ecb66f..d82ae8f65d 100644
--- a/apps/fronttoback/src/pages/answer.tsx
+++ b/apps/fronttoback/src/pages/answer.tsx
@@ -4,7 +4,9 @@ import {QuestionSet} from '@skillrecordings/types'
 import getConfig from '@skillrecordings/quiz/dist/config'
 import Layout from 'components/layout'
 
-const Answer: React.FC<{questionSet: QuestionSet}> = ({questionSet}) => {
+const Answer: React.FC<React.PropsWithChildren<{questionSet: QuestionSet}>> = ({
+  questionSet,
+}) => {
   return (
     <Layout noIndex meta={{title: 'Quiz'}}>
       <header className="flex items-center justify-center w-full sm:pt-16 sm:pb-0 pt-5 pb-5">
diff --git a/apps/kcdbundle/src/layouts/index.tsx b/apps/kcdbundle/src/layouts/index.tsx
index b0a2a8d53c..bd12b601ed 100644
--- a/apps/kcdbundle/src/layouts/index.tsx
+++ b/apps/kcdbundle/src/layouts/index.tsx
@@ -10,7 +10,7 @@ type LayoutProps = {
   noFooter?: boolean
 }
 
-const Layout: FunctionComponent<LayoutProps> = ({
+const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className,
   meta,
diff --git a/apps/kcdbundle/src/pages/buy/email.tsx b/apps/kcdbundle/src/pages/buy/email.tsx
index f7f003d9ac..31c88855bf 100644
--- a/apps/kcdbundle/src/pages/buy/email.tsx
+++ b/apps/kcdbundle/src/pages/buy/email.tsx
@@ -41,7 +41,7 @@ const testingJavaScriptSellable: any = {
 
 export const sellables = [epicReactSellable, testingJavaScriptSellable]
 
-const BuyEmailForm: React.FC<BuyEmailFormProps> = ({
+const BuyEmailForm: React.FC<React.PropsWithChildren<BuyEmailFormProps>> = ({
   className,
   children,
   button = 'Complete Your Purchase',
diff --git a/apps/kcdbundle/src/pages/buy/index.tsx b/apps/kcdbundle/src/pages/buy/index.tsx
index d774f84809..03310181bb 100644
--- a/apps/kcdbundle/src/pages/buy/index.tsx
+++ b/apps/kcdbundle/src/pages/buy/index.tsx
@@ -5,7 +5,7 @@ import config from 'config'
 
 import Purchase from '../../components/commerce/purchase'
 
-const Buy: FunctionComponent = () => {
+const Buy: FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Layout meta={{title: `Buy ${config.defaultTitle}`}} noFooter>
       <div className="w-full mx-auto md:py-32 py-16 flex flex-col items-center justify-center px-5">
diff --git a/apps/keyboardlegend/src/components/app/color-mode-toggle.tsx b/apps/keyboardlegend/src/components/app/color-mode-toggle.tsx
index cc32324ec4..6f5efb8f41 100644
--- a/apps/keyboardlegend/src/components/app/color-mode-toggle.tsx
+++ b/apps/keyboardlegend/src/components/app/color-mode-toggle.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {useTheme} from 'next-themes'
 
-const DarkModeToggle: React.FC = () => {
+const DarkModeToggle: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [mounted, setMounted] = React.useState(false)
   const {resolvedTheme: theme, setTheme} = useTheme()
   React.useEffect(() => setMounted(true), [])
diff --git a/apps/keyboardlegend/src/components/app/layout.tsx b/apps/keyboardlegend/src/components/app/layout.tsx
index bddc9abc9d..f7363a0771 100644
--- a/apps/keyboardlegend/src/components/app/layout.tsx
+++ b/apps/keyboardlegend/src/components/app/layout.tsx
@@ -8,7 +8,7 @@ type LayoutProps = {
   className?: string
 }
 
-const Layout: FunctionComponent<LayoutProps> = ({
+const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className,
   meta,
diff --git a/apps/keyboardlegend/src/components/app/spinner.tsx b/apps/keyboardlegend/src/components/app/spinner.tsx
index b269f192a7..95debda3c6 100644
--- a/apps/keyboardlegend/src/components/app/spinner.tsx
+++ b/apps/keyboardlegend/src/components/app/spinner.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react'
 
-const Spinner: React.FunctionComponent<{
-  className?: string
-  size?: number
-  color?: string
-}> = ({className = '', size = 6}) => (
+const Spinner: React.FunctionComponent<
+  React.PropsWithChildren<{
+    className?: string
+    size?: number
+    color?: string
+  }>
+> = ({className = '', size = 6}) => (
   <svg
     className={`animate-spin h-${size} w-${size} ${className}`}
     xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/keyboardlegend/src/components/button/index.tsx b/apps/keyboardlegend/src/components/button/index.tsx
index 78bb4e2008..b31fe1159f 100644
--- a/apps/keyboardlegend/src/components/button/index.tsx
+++ b/apps/keyboardlegend/src/components/button/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {Button} from '@skillrecordings/react/dist/components'
 
-const StyledButton: React.FC = (props) => {
+const StyledButton: React.FC<React.PropsWithChildren<unknown>> = (props) => {
   return (
     <Button
       className="relative flex items-center justify-center group rounded-lg focus:outline-none"
diff --git a/apps/keyboardlegend/src/components/images/index.tsx b/apps/keyboardlegend/src/components/images/index.tsx
index 22266458e4..9eab7cd759 100644
--- a/apps/keyboardlegend/src/components/images/index.tsx
+++ b/apps/keyboardlegend/src/components/images/index.tsx
@@ -4,7 +4,9 @@ const primary500 = '#FF74A1'
 const primary300 = '#FFD1E0'
 const primary100 = '#FFF4F8'
 
-const Logo: React.FC<{className?: string}> = ({className = ''}) => {
+const Logo: React.FC<React.PropsWithChildren<{className?: string}>> = ({
+  className = '',
+}) => {
   return (
     <svg
       className={className}
@@ -121,7 +123,9 @@ const Logo: React.FC<{className?: string}> = ({className = ''}) => {
   )
 }
 
-const Grid1: React.FC<{className?: string}> = ({className = ''}) => {
+const Grid1: React.FC<React.PropsWithChildren<{className?: string}>> = ({
+  className = '',
+}) => {
   return (
     <svg
       className={className}
@@ -141,7 +145,9 @@ const Grid1: React.FC<{className?: string}> = ({className = ''}) => {
   )
 }
 
-const ThumbsUp: React.FC<{className?: string}> = ({className = ''}) => {
+const ThumbsUp: React.FC<React.PropsWithChildren<{className?: string}>> = ({
+  className = '',
+}) => {
   return (
     <svg
       className={className}
@@ -403,7 +409,9 @@ const ThumbsUp: React.FC<{className?: string}> = ({className = ''}) => {
   )
 }
 
-const Signature: React.FC<{className?: string}> = ({className = ''}) => {
+const Signature: React.FC<React.PropsWithChildren<{className?: string}>> = ({
+  className = '',
+}) => {
   return (
     <svg
       className={className}
@@ -484,7 +492,9 @@ const Signature: React.FC<{className?: string}> = ({className = ''}) => {
   )
 }
 
-const Confirm: React.FC<{className?: string}> = ({className = ''}) => {
+const Confirm: React.FC<React.PropsWithChildren<{className?: string}>> = ({
+  className = '',
+}) => {
   return (
     <svg
       className={className}
@@ -539,7 +549,9 @@ const Confirm: React.FC<{className?: string}> = ({className = ''}) => {
     </svg>
   )
 }
-const Confirmed: React.FC<{className?: string}> = ({className = ''}) => {
+const Confirmed: React.FC<React.PropsWithChildren<{className?: string}>> = ({
+  className = '',
+}) => {
   return (
     <svg
       className={className}
diff --git a/apps/keyboardlegend/src/pages/answer.tsx b/apps/keyboardlegend/src/pages/answer.tsx
index 81495b879e..0dec5de9e0 100644
--- a/apps/keyboardlegend/src/pages/answer.tsx
+++ b/apps/keyboardlegend/src/pages/answer.tsx
@@ -4,7 +4,9 @@ import {QuizAnswerPage} from '@skillrecordings/quiz'
 import {QuestionSet} from '@skillrecordings/types'
 import getConfig from '@skillrecordings/quiz/dist/config'
 
-const Answer: React.FC<{questionSet: QuestionSet}> = ({questionSet}) => {
+const Answer: React.FC<React.PropsWithChildren<{questionSet: QuestionSet}>> = ({
+  questionSet,
+}) => {
   return (
     <Layout noIndex meta={{title: 'Quiz'}}>
       <div className="h-full w-full flex flex-col items-center justify-center py-24 px-5">
diff --git a/apps/next-product-starter/src/components/layout.tsx b/apps/next-product-starter/src/components/layout.tsx
index c6b9d492f1..1c0e6b129a 100644
--- a/apps/next-product-starter/src/components/layout.tsx
+++ b/apps/next-product-starter/src/components/layout.tsx
@@ -4,7 +4,11 @@ import type {LayoutProps} from '@skillrecordings/react/dist/layouts'
 import config from '../config'
 import {first} from 'lodash'
 
-const Layout: React.FC<LayoutProps> = ({children, meta, ...props}) => {
+const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
+  children,
+  meta,
+  ...props
+}) => {
   const defaultMeta = {
     title: config.defaultTitle,
     description: config.description,
diff --git a/apps/next-product-starter/src/components/learn/achievements.tsx b/apps/next-product-starter/src/components/learn/achievements.tsx
index 8f47c35ebf..66945f638d 100644
--- a/apps/next-product-starter/src/components/learn/achievements.tsx
+++ b/apps/next-product-starter/src/components/learn/achievements.tsx
@@ -4,9 +4,11 @@ import useAchievements from 'hooks/use-achievements'
 import Markdown from 'react-markdown'
 import Spinner from '@skillrecordings/react/dist/components/spinner'
 
-const Achievements: React.FC<{
-  purchasedBundle: SellableResource | undefined
-}> = ({purchasedBundle}) => {
+const Achievements: React.FC<
+  React.PropsWithChildren<{
+    purchasedBundle: SellableResource | undefined
+  }>
+> = ({purchasedBundle}) => {
   const {achievements} = useAchievements(purchasedBundle)
   return (
     <div className="space-y-2">
diff --git a/apps/next-product-starter/src/components/learn/cta.tsx b/apps/next-product-starter/src/components/learn/cta.tsx
index 2a0c076694..fafb60759d 100644
--- a/apps/next-product-starter/src/components/learn/cta.tsx
+++ b/apps/next-product-starter/src/components/learn/cta.tsx
@@ -5,13 +5,15 @@ import Link from 'next/link'
 import pluralize from 'pluralize'
 import Spinner from '@skillrecordings/react/dist/components/spinner'
 
-const CallToAction: React.FC<{
-  viewer: Viewer
-  nextLesson: any
-  currentModule: any
-  firstLesson: any
-  progress: any
-}> = ({viewer, firstLesson, nextLesson, progress, currentModule}) => {
+const CallToAction: React.FC<
+  React.PropsWithChildren<{
+    viewer: Viewer
+    nextLesson: any
+    currentModule: any
+    firstLesson: any
+    progress: any
+  }>
+> = ({viewer, firstLesson, nextLesson, progress, currentModule}) => {
   const {completedLessonsCount, totalLessons} = progress
   const leftToWatch = totalLessons - completedLessonsCount
   const greeting = isEmpty(viewer?.name)
diff --git a/apps/next-product-starter/src/components/learn/module/index.tsx b/apps/next-product-starter/src/components/learn/module/index.tsx
index 926d74c26d..851621b284 100644
--- a/apps/next-product-starter/src/components/learn/module/index.tsx
+++ b/apps/next-product-starter/src/components/learn/module/index.tsx
@@ -13,7 +13,12 @@ type ModuleProps = {
   i: number
 }
 
-const Module: React.FC<ModuleProps> = ({resource, items, progress, i}) => {
+const Module: React.FC<React.PropsWithChildren<ModuleProps>> = ({
+  resource,
+  items,
+  progress,
+  i,
+}) => {
   const [isExpanded, setExpanded] = React.useState(false)
   const {isModuleCompleted} = progress
   return (
diff --git a/apps/next-product-starter/src/components/learn/module/lessons.tsx b/apps/next-product-starter/src/components/learn/module/lessons.tsx
index 01d840cffa..f9488c29a2 100644
--- a/apps/next-product-starter/src/components/learn/module/lessons.tsx
+++ b/apps/next-product-starter/src/components/learn/module/lessons.tsx
@@ -4,10 +4,9 @@ import Link from 'next/link'
 import type {LessonResource} from '@skillrecordings/types'
 import {convertTimeWithTitles} from '@skillrecordings/time'
 
-const Lessons: React.FC<{items: LessonResource[]; progress: any}> = ({
-  items,
-  progress,
-}) => {
+const Lessons: React.FC<
+  React.PropsWithChildren<{items: LessonResource[]; progress: any}>
+> = ({items, progress}) => {
   const {completedLessons} = progress
 
   function isLessonCompleted(slug: string) {
diff --git a/apps/next-product-starter/src/components/learn/module/play.tsx b/apps/next-product-starter/src/components/learn/module/play.tsx
index 29674b40fa..29dd447a1b 100644
--- a/apps/next-product-starter/src/components/learn/module/play.tsx
+++ b/apps/next-product-starter/src/components/learn/module/play.tsx
@@ -3,10 +3,9 @@ import Link from 'next/link'
 import type {LessonResource} from '@skillrecordings/types'
 import find from 'lodash/find'
 
-const Play: React.FC<{items: LessonResource[]; progress: any}> = ({
-  items,
-  progress,
-}) => {
+const Play: React.FC<
+  React.PropsWithChildren<{items: LessonResource[]; progress: any}>
+> = ({items, progress}) => {
   const {isModuleInProgress, completedLessons, isModuleCompleted} = progress
 
   const buttonText = isModuleCompleted
diff --git a/apps/next-product-starter/src/hooks/use-cio.tsx b/apps/next-product-starter/src/hooks/use-cio.tsx
index fd08035817..59302519b4 100644
--- a/apps/next-product-starter/src/hooks/use-cio.tsx
+++ b/apps/next-product-starter/src/hooks/use-cio.tsx
@@ -28,7 +28,9 @@ export const CioContext = React.createContext<{
   cioIdentify: (id: string, options?: any) => void
 }>({loadingSubscriber: true, cioIdentify})
 
-export const CioProvider: React.FunctionComponent = ({children}) => {
+export const CioProvider: React.FunctionComponent<
+  React.PropsWithChildren<unknown>
+> = ({children}) => {
   const [subscriber, setSubscriber] = React.useState<CIOSubscriber>()
   const [loadingSubscriber, setLoadingSubscriber] = React.useState(true)
   React.useEffect(() => {
diff --git a/apps/next-product-starter/src/pages/answer.tsx b/apps/next-product-starter/src/pages/answer.tsx
index 601b0a65f6..0107567947 100644
--- a/apps/next-product-starter/src/pages/answer.tsx
+++ b/apps/next-product-starter/src/pages/answer.tsx
@@ -4,7 +4,9 @@ import {QuestionSet} from '@skillrecordings/types'
 import getConfig from '@skillrecordings/quiz/dist/config'
 import Layout from '../components/layout'
 
-const Answer: React.FC<{questionSet: QuestionSet}> = ({questionSet}) => {
+const Answer: React.FC<React.PropsWithChildren<{questionSet: QuestionSet}>> = ({
+  questionSet,
+}) => {
   return (
     <Layout noIndex meta={{title: 'Quiz'}}>
       <div className="h-full w-full flex flex-col items-center justify-center py-24 px-5">
diff --git a/apps/next-product-starter/src/pages/buy.tsx b/apps/next-product-starter/src/pages/buy.tsx
index ad6fafa9b4..d3c4eab3f7 100644
--- a/apps/next-product-starter/src/pages/buy.tsx
+++ b/apps/next-product-starter/src/pages/buy.tsx
@@ -27,7 +27,9 @@ type BuyProps = {
   bundles: SellableResource[]
 }
 
-const Buy: FunctionComponent<BuyProps> = ({bundles}) => {
+const Buy: FunctionComponent<React.PropsWithChildren<BuyProps>> = ({
+  bundles,
+}) => {
   const sellable = bundles[0]
   return (
     <Layout meta={{title: `Buy ${config.defaultTitle}`}}>
diff --git a/apps/next-product-starter/src/pages/invoice.tsx b/apps/next-product-starter/src/pages/invoice.tsx
index aad6bbf6e8..89d65bce58 100644
--- a/apps/next-product-starter/src/pages/invoice.tsx
+++ b/apps/next-product-starter/src/pages/invoice.tsx
@@ -37,7 +37,9 @@ const getTotalPrice = (purchases: any) => {
   )
 }
 
-const Invoice: React.FunctionComponent = () => {
+const Invoice: React.FunctionComponent<
+  React.PropsWithChildren<unknown>
+> = () => {
   const {sitePurchases, viewer} = useViewer()
   const [invoiceInfo, setInvoiceInfo] = useLocalStorage('invoice-info', '')
   const firstPurchase = get(sitePurchases, '[0]')
diff --git a/apps/next-product-starter/src/pages/learn.tsx b/apps/next-product-starter/src/pages/learn.tsx
index ef5e96014d..c6622b9829 100644
--- a/apps/next-product-starter/src/pages/learn.tsx
+++ b/apps/next-product-starter/src/pages/learn.tsx
@@ -33,7 +33,9 @@ interface Props {
   }[]
 }
 
-const Learn: FunctionComponent<Props> = ({bundles}) => {
+const Learn: FunctionComponent<React.PropsWithChildren<Props>> = ({
+  bundles,
+}) => {
   const purchasedBundle = usePurchasedBundle(bundles)
   const isVerifying = useLoginRequired()
   const isVerifyingBulkPurchase = useRedirectUnclaimedBulkToInvoice()
diff --git a/apps/next-product-starter/src/pages/login.tsx b/apps/next-product-starter/src/pages/login.tsx
index bf6fec0e49..01d7b2c33b 100644
--- a/apps/next-product-starter/src/pages/login.tsx
+++ b/apps/next-product-starter/src/pages/login.tsx
@@ -18,7 +18,7 @@ type LoginFormProps = {
   track?: any
 }
 
-const LoginForm: FunctionComponent<LoginFormProps> = ({
+const LoginForm: FunctionComponent<React.PropsWithChildren<LoginFormProps>> = ({
   className,
   children,
   button = 'Email a login link',
diff --git a/apps/next-product-starter/src/pages/video/[slug].tsx b/apps/next-product-starter/src/pages/video/[slug].tsx
index 686710b4e5..e5fa589ac0 100644
--- a/apps/next-product-starter/src/pages/video/[slug].tsx
+++ b/apps/next-product-starter/src/pages/video/[slug].tsx
@@ -192,10 +192,9 @@ type VideoResourcesListProps = {
   currentResource: any
 }
 
-const VideoResourcesList: React.FC<VideoResourcesListProps> = ({
-  resources,
-  currentResource,
-}) => {
+const VideoResourcesList: React.FC<
+  React.PropsWithChildren<VideoResourcesListProps>
+> = ({resources, currentResource}) => {
   return (
     <ul>
       {resources.map((videoResource: VideoResource, i: number) => {
@@ -231,7 +230,11 @@ const VideoResourcesList: React.FC<VideoResourcesListProps> = ({
   )
 }
 
-const VideoCue: React.FC<any> = ({cue, note, isActive}) => {
+const VideoCue: React.FC<React.PropsWithChildren<any>> = ({
+  cue,
+  note,
+  isActive,
+}) => {
   const cueRef = React.useRef<any>(null)
   const videoService = useVideo()
   const viewer = useSelector(videoService, selectViewer)
@@ -309,7 +312,7 @@ const VideoCue: React.FC<any> = ({cue, note, isActive}) => {
   )
 }
 
-const VideoCuesList: React.FC<any> = () => {
+const VideoCuesList: React.FC<React.PropsWithChildren<any>> = () => {
   const cues = useMetadataCues()
   const videoService = useVideo()
 
diff --git a/apps/next-product-starter/src/templates/article.tsx b/apps/next-product-starter/src/templates/article.tsx
index a0d8221549..b0b8cb8bdd 100644
--- a/apps/next-product-starter/src/templates/article.tsx
+++ b/apps/next-product-starter/src/templates/article.tsx
@@ -7,7 +7,9 @@ type ArticleTemplateProps = {
   meta?: any
 }
 
-const ArticleTemplate: React.FC<ArticleTemplateProps> = ({meta, children}) => {
+const ArticleTemplate: React.FC<
+  React.PropsWithChildren<ArticleTemplateProps>
+> = ({meta, children}) => {
   const {title} = meta
 
   return (
diff --git a/apps/protailwind/src/components/layout.tsx b/apps/protailwind/src/components/layout.tsx
index b1a259c258..0ae39cb0dc 100644
--- a/apps/protailwind/src/components/layout.tsx
+++ b/apps/protailwind/src/components/layout.tsx
@@ -11,7 +11,7 @@ type LayoutProps = {
   children?: any
 }
 
-const Layout: FunctionComponent<LayoutProps> = ({
+const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className,
   meta,
diff --git a/apps/protailwind/src/components/scenes/city/camera.tsx b/apps/protailwind/src/components/scenes/city/camera.tsx
index c673d502a4..220383a1b1 100644
--- a/apps/protailwind/src/components/scenes/city/camera.tsx
+++ b/apps/protailwind/src/components/scenes/city/camera.tsx
@@ -16,7 +16,9 @@ type CameraProps = {
   animateOnScroll?: boolean
 }
 
-const Camera: React.FC<CameraProps> = ({animateOnScroll = true}) => {
+const Camera: React.FC<React.PropsWithChildren<CameraProps>> = ({
+  animateOnScroll = true,
+}) => {
   const set = useThree(({set}) => set)
   const camera = useThree(({camera}) => camera)
   const size = useThree(({size}) => size)
diff --git a/apps/protailwind/src/components/scenes/city/index.tsx b/apps/protailwind/src/components/scenes/city/index.tsx
index c6df577f71..b29d5340e6 100644
--- a/apps/protailwind/src/components/scenes/city/index.tsx
+++ b/apps/protailwind/src/components/scenes/city/index.tsx
@@ -21,7 +21,7 @@ type SceneProps = {
   className?: string
 }
 
-const Scene: React.FC<SceneProps> = ({
+const Scene: React.FC<React.PropsWithChildren<SceneProps>> = ({
   camera = <Camera />,
   className = 'w-full h-screen absolute',
 }) => {
@@ -174,7 +174,9 @@ type PlaneProps = {
   backgroundColor: string
 }
 
-const Plane: React.FC<PlaneProps> = ({backgroundColor}) => {
+const Plane: React.FC<React.PropsWithChildren<PlaneProps>> = ({
+  backgroundColor,
+}) => {
   return (
     <>
       <mesh position={[0, -0.2, 0]} rotation={[MathUtils.degToRad(-90), 0, 0]}>
diff --git a/apps/protailwind/src/components/scenes/city/model.tsx b/apps/protailwind/src/components/scenes/city/model.tsx
index d82a25a842..1add04559a 100644
--- a/apps/protailwind/src/components/scenes/city/model.tsx
+++ b/apps/protailwind/src/components/scenes/city/model.tsx
@@ -3,7 +3,7 @@ import {useGLTF} from '@react-three/drei'
 
 const GLTF_PATH = '/assets/city.gltf'
 
-const CityModel: React.FC<any> = (props) => {
+const CityModel: React.FC<React.PropsWithChildren<any>> = (props) => {
   const group = React.useRef<any>(null)
   const {nodes}: any = useGLTF(GLTF_PATH, false, false)
   const color = props.color || '#1F2738'
diff --git a/apps/protailwind/src/pages/answer.tsx b/apps/protailwind/src/pages/answer.tsx
index bc52c8d006..2ef901a257 100644
--- a/apps/protailwind/src/pages/answer.tsx
+++ b/apps/protailwind/src/pages/answer.tsx
@@ -7,7 +7,9 @@ import Image from 'next/image'
 
 const CK_TAG_TEST = 3214078
 
-const Answer: React.FC<{questionSet: QuestionSet}> = ({questionSet}) => {
+const Answer: React.FC<React.PropsWithChildren<{questionSet: QuestionSet}>> = ({
+  questionSet,
+}) => {
   return (
     <Layout noIndex meta={{title: 'Quiz'}} className="bg-slate-900">
       <header className="flex items-center justify-center w-full sm:pt-16 sm:pb-0 pt-5 pb-5">
diff --git a/apps/skillrecordings/src/components/app/color-mode-toggle.tsx b/apps/skillrecordings/src/components/app/color-mode-toggle.tsx
index cc32324ec4..6f5efb8f41 100644
--- a/apps/skillrecordings/src/components/app/color-mode-toggle.tsx
+++ b/apps/skillrecordings/src/components/app/color-mode-toggle.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {useTheme} from 'next-themes'
 
-const DarkModeToggle: React.FC = () => {
+const DarkModeToggle: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [mounted, setMounted] = React.useState(false)
   const {resolvedTheme: theme, setTheme} = useTheme()
   React.useEffect(() => setMounted(true), [])
diff --git a/apps/skillrecordings/src/components/app/layout.tsx b/apps/skillrecordings/src/components/app/layout.tsx
index bddc9abc9d..f7363a0771 100644
--- a/apps/skillrecordings/src/components/app/layout.tsx
+++ b/apps/skillrecordings/src/components/app/layout.tsx
@@ -8,7 +8,7 @@ type LayoutProps = {
   className?: string
 }
 
-const Layout: FunctionComponent<LayoutProps> = ({
+const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className,
   meta,
diff --git a/apps/skillrecordings/src/components/icons/external-link.tsx b/apps/skillrecordings/src/components/icons/external-link.tsx
index 84a2350490..446a4ae2ae 100644
--- a/apps/skillrecordings/src/components/icons/external-link.tsx
+++ b/apps/skillrecordings/src/components/icons/external-link.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react'
 
-const ExternalLinkIcon: React.FC<any> = ({className}) => {
+const ExternalLinkIcon: React.FC<React.PropsWithChildren<any>> = ({
+  className,
+}) => {
   return (
     <svg
       className={className}
diff --git a/apps/skillrecordings/src/components/icons/sr-logo.tsx b/apps/skillrecordings/src/components/icons/sr-logo.tsx
index 5426286b0d..6ef6a924b0 100644
--- a/apps/skillrecordings/src/components/icons/sr-logo.tsx
+++ b/apps/skillrecordings/src/components/icons/sr-logo.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react'
 
-const SkillRecordingsLogo: React.FunctionComponent<{
-  className?: string
-  fill?: boolean
-}> = ({className, fill = false}) => {
+const SkillRecordingsLogo: React.FunctionComponent<
+  React.PropsWithChildren<{
+    className?: string
+    fill?: boolean
+  }>
+> = ({className, fill = false}) => {
   return (
     <svg
       className={className}
diff --git a/apps/skillrecordings/src/components/mdx/blockquote.tsx b/apps/skillrecordings/src/components/mdx/blockquote.tsx
index a9447e413a..d678defb1e 100644
--- a/apps/skillrecordings/src/components/mdx/blockquote.tsx
+++ b/apps/skillrecordings/src/components/mdx/blockquote.tsx
@@ -4,7 +4,9 @@ type BlockquoteProps = {
   children: React.ReactNode
 }
 
-const Blockquote: React.FC<BlockquoteProps> = ({children}) => {
+const Blockquote: React.FC<React.PropsWithChildren<BlockquoteProps>> = ({
+  children,
+}) => {
   return (
     <blockquote className="not-prose p-5 dark:border-gray-700 border-gray-300 border-l-[3px] dark:bg-gray-800 bg-gray-100 dark:text-gray-200 text-gray-800 relative not-italic font-normal">
       <div className="absolute -right-3 -top-3 w-10 h-10 rounded-full bg-amber-500 flex items-center justify-center">
diff --git a/apps/skillrecordings/src/components/mdx/client-profile.tsx b/apps/skillrecordings/src/components/mdx/client-profile.tsx
index 8d2836c92a..3eade3a8b8 100644
--- a/apps/skillrecordings/src/components/mdx/client-profile.tsx
+++ b/apps/skillrecordings/src/components/mdx/client-profile.tsx
@@ -6,7 +6,9 @@ type ClientProfileProps = {
   client: Contributor
 }
 
-const ClientProfileBox: React.FC<ClientProfileProps> = ({client, children}) => {
+const ClientProfileBox: React.FC<
+  React.PropsWithChildren<ClientProfileProps>
+> = ({client, children}) => {
   const {name, label, image} = client
 
   return (
diff --git a/apps/skillrecordings/src/components/mdx/contributor-profile.tsx b/apps/skillrecordings/src/components/mdx/contributor-profile.tsx
index ed8a6de310..97ee7f8034 100644
--- a/apps/skillrecordings/src/components/mdx/contributor-profile.tsx
+++ b/apps/skillrecordings/src/components/mdx/contributor-profile.tsx
@@ -8,11 +8,9 @@ type ContributorProfileBoxProps = {
   label: string
 }
 
-const ContributorProfileBox: React.FC<ContributorProfileBoxProps> = ({
-  children,
-  label,
-  contributors,
-}) => {
+const ContributorProfileBox: React.FC<
+  React.PropsWithChildren<ContributorProfileBoxProps>
+> = ({children, label, contributors}) => {
   return (
     <div className="contributor-profile-box not-prose dark:bg-gray-800 bg-gray-100 flex flex-col justify-center">
       {children && <div className="px-5 pt-5">{children}</div>}
diff --git a/apps/skillrecordings/src/components/share.tsx b/apps/skillrecordings/src/components/share.tsx
index d7c5dc3522..b17fa84339 100644
--- a/apps/skillrecordings/src/components/share.tsx
+++ b/apps/skillrecordings/src/components/share.tsx
@@ -125,7 +125,10 @@ const icons = {
 const style =
   'rounded-md bg-gray-400 bg-opacity-10 hover:bg-opacity-20 transition-all ease-in-out duration-200 flex items-center justify-center p-3 m-1'
 
-const Twitter: React.FC<ShareProps> = ({link, message}) => (
+const Twitter: React.FC<React.PropsWithChildren<ShareProps>> = ({
+  link,
+  message,
+}) => (
   <a
     href={links.twitter(link, message)}
     className={style}
@@ -137,7 +140,7 @@ const Twitter: React.FC<ShareProps> = ({link, message}) => (
   </a>
 )
 
-const Facebook: React.FC<ShareProps> = ({link}) => (
+const Facebook: React.FC<React.PropsWithChildren<ShareProps>> = ({link}) => (
   <a
     href={links.facebook(link)}
     className={style}
@@ -149,7 +152,10 @@ const Facebook: React.FC<ShareProps> = ({link}) => (
   </a>
 )
 
-const Reddit: React.FC<ShareProps> = ({link, message}) => (
+const Reddit: React.FC<React.PropsWithChildren<ShareProps>> = ({
+  link,
+  message,
+}) => (
   <a
     href={links.reddit(link, message)}
     className={style}
@@ -161,7 +167,9 @@ const Reddit: React.FC<ShareProps> = ({link, message}) => (
   </a>
 )
 
-const CopyToClipboard: React.FC<ShareProps> = ({link}) => {
+const CopyToClipboard: React.FC<React.PropsWithChildren<ShareProps>> = ({
+  link,
+}) => {
   const [copied, copyToClipboard] = useClipboard(link, {
     successDuration: 700,
   })
@@ -183,7 +191,7 @@ const CopyToClipboard: React.FC<ShareProps> = ({link}) => {
   )
 }
 
-const LinkedIn: React.FC<ShareProps> = ({link}) => (
+const LinkedIn: React.FC<React.PropsWithChildren<ShareProps>> = ({link}) => (
   <a
     href={links.linkedin(link)}
     className={style}
@@ -195,7 +203,10 @@ const LinkedIn: React.FC<ShareProps> = ({link}) => (
   </a>
 )
 
-const Hacker: React.FC<ShareProps> = ({link, message}) => (
+const Hacker: React.FC<React.PropsWithChildren<ShareProps>> = ({
+  link,
+  message,
+}) => (
   <a
     href={links.hacker(link, message)}
     className={style}
diff --git a/apps/skillrecordings/src/templates/case-study.tsx b/apps/skillrecordings/src/templates/case-study.tsx
index 45b66b0130..9ecedf658e 100644
--- a/apps/skillrecordings/src/templates/case-study.tsx
+++ b/apps/skillrecordings/src/templates/case-study.tsx
@@ -6,10 +6,9 @@ import {Twitter, Facebook, Reddit, LinkedIn} from 'components/share'
 import {useRouter} from 'next/router'
 import config from 'config'
 
-const CaseStudyTemplate: React.FC<CaseStudyTemplateProps> = ({
-  children,
-  meta,
-}) => {
+const CaseStudyTemplate: React.FC<
+  React.PropsWithChildren<CaseStudyTemplateProps>
+> = ({children, meta}) => {
   const {title, published, image, client} = meta
   const router = useRouter()
   const shareUrl = `https://${config.siteUrl}${router.pathname}`
diff --git a/apps/testingaccessibility/src/components/app/footer.tsx b/apps/testingaccessibility/src/components/app/footer.tsx
index 91fca74658..1830183306 100644
--- a/apps/testingaccessibility/src/components/app/footer.tsx
+++ b/apps/testingaccessibility/src/components/app/footer.tsx
@@ -11,7 +11,7 @@ import {useConvertkit} from '@skillrecordings/convertkit'
 
 type FooterProps = {}
 
-const Footer: React.FC<FooterProps> = () => {
+const Footer: React.FC<React.PropsWithChildren<FooterProps>> = () => {
   const router = useRouter()
   const {isSignedIn, canViewInvoice, canViewTeam} = useNavState()
   const {subscriber} = useConvertkit()
@@ -136,7 +136,7 @@ type NavLinkProps = {
   onClick?: () => void
 }
 
-const NavLink: React.FC<NavLinkProps> = ({
+const NavLink: React.FC<React.PropsWithChildren<NavLinkProps>> = ({
   href,
   children,
   onClick,
diff --git a/apps/testingaccessibility/src/components/app/layout.tsx b/apps/testingaccessibility/src/components/app/layout.tsx
index 21bda7138a..be18cd0416 100644
--- a/apps/testingaccessibility/src/components/app/layout.tsx
+++ b/apps/testingaccessibility/src/components/app/layout.tsx
@@ -23,7 +23,7 @@ type LayoutProps = {
   defaultCoupon?: DefaultCoupon
 }
 
-const Layout: FunctionComponent<LayoutProps> = ({
+const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className,
   meta,
diff --git a/apps/testingaccessibility/src/components/app/navigation.tsx b/apps/testingaccessibility/src/components/app/navigation.tsx
index 0bd5e46eb5..925ece1494 100644
--- a/apps/testingaccessibility/src/components/app/navigation.tsx
+++ b/apps/testingaccessibility/src/components/app/navigation.tsx
@@ -29,7 +29,7 @@ const Navigation = () => {
   )
 }
 
-const DesktopNav: React.FC = () => {
+const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
   const {isSignedIn, canViewTeam} = useNavState()
   const {userLoadingStatus} = useUser()
   const {setIsFeedbackDialogOpen} = useFeedback()
@@ -64,7 +64,7 @@ const DesktopNav: React.FC = () => {
   )
 }
 
-const MobileNav: React.FC = () => {
+const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
   const {isSignedIn, canViewTeam, canViewInvoice} = useNavState()
   const {userLoadingStatus} = useUser()
   return (
@@ -176,7 +176,7 @@ const MobileNav: React.FC = () => {
   )
 }
 
-const NavSlots: React.FC = ({children}) => {
+const NavSlots: React.FC<React.PropsWithChildren<unknown>> = ({children}) => {
   return <div className="flex items-center">{children}</div>
 }
 
@@ -185,7 +185,7 @@ type NavLinkProps = React.PropsWithChildren<{
   onClick?: () => void
 }>
 
-const NavLink: React.FC<NavLinkProps> = ({
+const NavLink: React.FC<React.PropsWithChildren<NavLinkProps>> = ({
   href,
   children,
   onClick,
@@ -293,7 +293,7 @@ const SignOutButton = React.forwardRef<HTMLButtonElement, MenuLinkProps>(
   },
 )
 
-const AccountMenu: React.FC = () => {
+const AccountMenu: React.FC<React.PropsWithChildren<unknown>> = () => {
   const {canViewInvoice} = useNavState()
   return (
     <Menu as="div" className="relative inline-block text-left z-10 h-full">
diff --git a/apps/testingaccessibility/src/components/breadcrumb.tsx b/apps/testingaccessibility/src/components/breadcrumb.tsx
index dfdd1ba5a3..ef22d640c1 100644
--- a/apps/testingaccessibility/src/components/breadcrumb.tsx
+++ b/apps/testingaccessibility/src/components/breadcrumb.tsx
@@ -20,7 +20,7 @@ type BreadcrumbProps = {
   lesson?: Page
 }
 
-const BreadcrumbNav: React.FC<BreadcrumbProps> = ({
+const BreadcrumbNav: React.FC<React.PropsWithChildren<BreadcrumbProps>> = ({
   module,
   section,
   lesson,
diff --git a/apps/testingaccessibility/src/components/certificate/dialog.tsx b/apps/testingaccessibility/src/components/certificate/dialog.tsx
index 9ff2d44b50..1dc1d40551 100644
--- a/apps/testingaccessibility/src/components/certificate/dialog.tsx
+++ b/apps/testingaccessibility/src/components/certificate/dialog.tsx
@@ -9,12 +9,9 @@ type CertificateDialogProps = {
   isOpen: boolean
 }
 
-const CertificateDialog: React.FC<CertificateDialogProps> = ({
-  handleCloseDialog,
-  module,
-  isOpen,
-  children,
-}) => {
+const CertificateDialog: React.FC<
+  React.PropsWithChildren<CertificateDialogProps>
+> = ({handleCloseDialog, module, isOpen, children}) => {
   return (
     <Dialog
       title="Get your certificate"
diff --git a/apps/testingaccessibility/src/components/certificate/form.tsx b/apps/testingaccessibility/src/components/certificate/form.tsx
index c8776f5344..ce46d11ee7 100644
--- a/apps/testingaccessibility/src/components/certificate/form.tsx
+++ b/apps/testingaccessibility/src/components/certificate/form.tsx
@@ -3,7 +3,9 @@ import {useSession} from 'next-auth/react'
 import {DownloadIcon} from '@heroicons/react/outline'
 import {SanityDocument} from '@sanity/client'
 
-const CertificateForm: React.FC<{module?: SanityDocument}> = ({module}) => {
+const CertificateForm: React.FC<
+  React.PropsWithChildren<{module?: SanityDocument}>
+> = ({module}) => {
   const {data: session} = useSession()
   const POST_URL = module
     ? `/api/certificate/modules/${module.slug}`
diff --git a/apps/testingaccessibility/src/components/certificate/index.tsx b/apps/testingaccessibility/src/components/certificate/index.tsx
index 246e8c6d63..14fdd23953 100644
--- a/apps/testingaccessibility/src/components/certificate/index.tsx
+++ b/apps/testingaccessibility/src/components/certificate/index.tsx
@@ -9,7 +9,7 @@ type CertificateProps = {
   module: SanityDocument
 }
 
-const GetCertificate: React.FC<CertificateProps> = ({
+const GetCertificate: React.FC<React.PropsWithChildren<CertificateProps>> = ({
   isAvailable = false,
   module,
 }) => {
diff --git a/apps/testingaccessibility/src/components/contact/contact-email-field.tsx b/apps/testingaccessibility/src/components/contact/contact-email-field.tsx
index fcd55937f4..92b9ab7edb 100644
--- a/apps/testingaccessibility/src/components/contact/contact-email-field.tsx
+++ b/apps/testingaccessibility/src/components/contact/contact-email-field.tsx
@@ -6,10 +6,12 @@ import Spinner from 'components/spinner'
 import isEmpty from 'lodash/isEmpty'
 import {useUser} from '../../hooks/use-user'
 
-const ContactEmailField: React.FC<{
-  errors: FormikErrors<FeedbackFormValues>
-  touched: FormikTouched<FeedbackFormValues>
-}> = ({errors, touched}) => {
+const ContactEmailField: React.FC<
+  React.PropsWithChildren<{
+    errors: FormikErrors<FeedbackFormValues>
+    touched: FormikTouched<FeedbackFormValues>
+  }>
+> = ({errors, touched}) => {
   const {user, userLoadingStatus} = useUser()
   const [field] = useField({
     name: 'email',
diff --git a/apps/testingaccessibility/src/components/content/share.tsx b/apps/testingaccessibility/src/components/content/share.tsx
index bdbb4aea41..7ad66edf56 100644
--- a/apps/testingaccessibility/src/components/content/share.tsx
+++ b/apps/testingaccessibility/src/components/content/share.tsx
@@ -9,7 +9,9 @@ import {
 } from '@skillrecordings/react'
 import {toast} from 'react-hot-toast'
 
-const Share: React.FC<{link: string; message: string}> = ({link, message}) => {
+const Share: React.FC<
+  React.PropsWithChildren<{link: string; message: string}>
+> = ({link, message}) => {
   return (
     <div className="flex">
       <Twitter link={link} message={message} />
diff --git a/apps/testingaccessibility/src/components/dialog.tsx b/apps/testingaccessibility/src/components/dialog.tsx
index 03ff648ab2..697a0baa2d 100644
--- a/apps/testingaccessibility/src/components/dialog.tsx
+++ b/apps/testingaccessibility/src/components/dialog.tsx
@@ -8,7 +8,7 @@ type DialogProps = {
   title: string
 }
 
-const DialogComp: React.FC<DialogProps> = ({
+const DialogComp: React.FC<React.PropsWithChildren<DialogProps>> = ({
   handleCloseDialog,
   children,
   isOpen,
diff --git a/apps/testingaccessibility/src/components/feedback/fields.tsx b/apps/testingaccessibility/src/components/feedback/fields.tsx
index b2cac22b3e..89b036a179 100644
--- a/apps/testingaccessibility/src/components/feedback/fields.tsx
+++ b/apps/testingaccessibility/src/components/feedback/fields.tsx
@@ -10,7 +10,7 @@ import Link from '@tiptap/extension-link'
 import cx from 'classnames'
 import {getEmoji} from '@skillrecordings/skill-api/dist/client'
 
-export const FeedbackField: React.FC<any> = ({
+export const FeedbackField: React.FC<React.PropsWithChildren<any>> = ({
   label = 'Your feedback',
   errors,
   touched,
@@ -82,7 +82,7 @@ export const FeedbackField: React.FC<any> = ({
   )
 }
 
-export const EmotionField: React.FC<any> = (props) => {
+export const EmotionField: React.FC<React.PropsWithChildren<any>> = (props) => {
   const [field] = useField({name: props.name})
   return (
     <div>
@@ -143,7 +143,9 @@ export const EmotionField: React.FC<any> = (props) => {
   )
 }
 
-export const CategoryField: React.FC<any> = (props) => {
+export const CategoryField: React.FC<React.PropsWithChildren<any>> = (
+  props,
+) => {
   const [field] = useField({name: props.name})
   return (
     <div>
diff --git a/apps/testingaccessibility/src/components/feedback/form.tsx b/apps/testingaccessibility/src/components/feedback/form.tsx
index 4dbf0a3ecd..074dc61bbe 100644
--- a/apps/testingaccessibility/src/components/feedback/form.tsx
+++ b/apps/testingaccessibility/src/components/feedback/form.tsx
@@ -20,7 +20,7 @@ const FeedbackValidationSchema = Yup.object().shape({
 })
 
 export const FeedbackForm: React.FC<
-  React.PropsWithChildren<{location: string}>
+  React.PropsWithChildren<React.PropsWithChildren<{location: string}>>
 > = ({location}) => {
   const {initialValues, submitFeedbackForm, isSubmitted, error} =
     useFeedbackForm({location})
@@ -50,7 +50,9 @@ export const FeedbackForm: React.FC<
   )
 }
 
-export const ErrorMessage: React.FC = ({children}) => {
+export const ErrorMessage: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   return (
     <div
       aria-live="polite"
@@ -95,10 +97,9 @@ type SubmitButtonProps = {
   isSubmitting: boolean
 }
 
-export const SubmitButton: React.FC<SubmitButtonProps> = ({
-  isSubmitting,
-  children,
-}) => {
+export const SubmitButton: React.FC<
+  React.PropsWithChildren<SubmitButtonProps>
+> = ({isSubmitting, children}) => {
   return (
     <button
       type="submit"
diff --git a/apps/testingaccessibility/src/components/images/index.tsx b/apps/testingaccessibility/src/components/images/index.tsx
index f7124a0fec..75d38e15bc 100644
--- a/apps/testingaccessibility/src/components/images/index.tsx
+++ b/apps/testingaccessibility/src/components/images/index.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 
-const Logo: React.FC<{className?: string}> = ({className = ''}) => {
+const Logo: React.FC<React.PropsWithChildren<{className?: string}>> = ({
+  className = '',
+}) => {
   return (
     <svg
       aria-hidden="true"
diff --git a/apps/testingaccessibility/src/components/mdx/headings.tsx b/apps/testingaccessibility/src/components/mdx/headings.tsx
index ae9369b886..b618c4e368 100644
--- a/apps/testingaccessibility/src/components/mdx/headings.tsx
+++ b/apps/testingaccessibility/src/components/mdx/headings.tsx
@@ -1,27 +1,43 @@
 import React from 'react'
 
-const H1: React.FC<any> = ({className = '', children, ...props}) => {
+const H1: React.FC<React.PropsWithChildren<any>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
   return (
     <h1 className={className} {...props}>
       {children}
     </h1>
   )
 }
-const H2: React.FC<any> = ({className = '', children, ...props}) => {
+const H2: React.FC<React.PropsWithChildren<any>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
   return (
     <h2 className={className} {...props}>
       {children}
     </h2>
   )
 }
-const H3: React.FC<any> = ({className = '', children, ...props}) => {
+const H3: React.FC<React.PropsWithChildren<any>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
   return (
     <h3 className={className} {...props}>
       {children}
     </h3>
   )
 }
-const H4: React.FC<any> = ({className = '', children, ...props}) => {
+const H4: React.FC<React.PropsWithChildren<any>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
   return (
     <h4 className={className} {...props}>
       {children}
diff --git a/apps/testingaccessibility/src/components/mdx/index.tsx b/apps/testingaccessibility/src/components/mdx/index.tsx
index 8ed70bb141..71664abc2d 100644
--- a/apps/testingaccessibility/src/components/mdx/index.tsx
+++ b/apps/testingaccessibility/src/components/mdx/index.tsx
@@ -31,7 +31,7 @@ type SectionProps = {
   ariaLabel?: string
 }
 
-const Section: React.FC<SectionProps> = ({
+const Section: React.FC<React.PropsWithChildren<SectionProps>> = ({
   children,
   image,
   className,
@@ -64,7 +64,9 @@ type BlockquoteProps = {
   children: React.ReactNode
 }
 
-const Blockquote: React.FC<BlockquoteProps> = ({children}) => {
+const Blockquote: React.FC<React.PropsWithChildren<BlockquoteProps>> = ({
+  children,
+}) => {
   return <blockquote className="not-prose">{children}</blockquote>
 }
 
@@ -75,7 +77,7 @@ type TestimonialProps = {
   iconClassName?: string
 }
 
-const Testimonial: React.FC<TestimonialProps> = ({
+const Testimonial: React.FC<React.PropsWithChildren<TestimonialProps>> = ({
   children,
   author,
   className,
@@ -112,7 +114,9 @@ const Testimonial: React.FC<TestimonialProps> = ({
 
 type DividerProps = 'trees' | 'route'
 
-const Divider: React.FC<{type: DividerProps}> = ({type}) => {
+const Divider: React.FC<React.PropsWithChildren<{type: DividerProps}>> = ({
+  type,
+}) => {
   const getImageForType = (type: DividerProps) => {
     switch (type) {
       case 'trees':
@@ -142,7 +146,9 @@ type ListProps = {
   children: React.ReactNode
 }
 
-const ListOfQuestions: React.FC<ListProps> = ({children}) => {
+const ListOfQuestions: React.FC<React.PropsWithChildren<ListProps>> = ({
+  children,
+}) => {
   const childrenArr = React.Children.toArray(children)
   return (
     <ul className="relative list-none sm:px-7 px-4">
@@ -172,7 +178,9 @@ type PlansGridProps = {
   }[]
 }
 
-const PlansGrid: React.FC<PlansGridProps> = ({columns}) => {
+const PlansGrid: React.FC<React.PropsWithChildren<PlansGridProps>> = ({
+  columns,
+}) => {
   return (
     <div className="not-prose py-10 sm:px-0 px-5">
       <ul className="grid md:grid-cols-2 grid-cols-1 gap-16 w-full max-w-screen-md mx-auto">
@@ -210,7 +218,7 @@ type StepsProps = {
   }[]
 }
 
-const Steps: React.FC<StepsProps> = ({data}) => {
+const Steps: React.FC<React.PropsWithChildren<StepsProps>> = ({data}) => {
   return (
     <div className="not-prose max-w-screen-sm mx-auto px-5">
       <ul className="space-y-12">
@@ -241,13 +249,15 @@ type StepProps = {
   title: string
 }
 
-const Step: React.FC<StepProps> = ({title}) => {
+const Step: React.FC<React.PropsWithChildren<StepProps>> = ({title}) => {
   return <li>{title}</li>
 }
 
 type WorkshopsListProps = {}
 
-const WorkshopsList: React.FC<WorkshopsListProps> = () => {
+const WorkshopsList: React.FC<
+  React.PropsWithChildren<WorkshopsListProps>
+> = () => {
   return (
     <div className="not-prose pt-10">
       <ul className="text-lg max-w-screen-lg w-full mx-auto space-y-24 px-5">
diff --git a/apps/testingaccessibility/src/components/mdx/link.tsx b/apps/testingaccessibility/src/components/mdx/link.tsx
index ed9fe04107..bd174868db 100644
--- a/apps/testingaccessibility/src/components/mdx/link.tsx
+++ b/apps/testingaccessibility/src/components/mdx/link.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const Link: React.FC<any> = (props) => {
+const Link: React.FC<React.PropsWithChildren<any>> = (props) => {
   return (
     <a
       className="focus:ring-1 focus:ring-offset-2 focus:ring-offset-background focus:ring-brand-cream rounded-sm focus:outline-none transition-all ease-in-out duration-300"
diff --git a/apps/testingaccessibility/src/components/portable-text/index.tsx b/apps/testingaccessibility/src/components/portable-text/index.tsx
index 3b8b681358..1f7b0154bb 100644
--- a/apps/testingaccessibility/src/components/portable-text/index.tsx
+++ b/apps/testingaccessibility/src/components/portable-text/index.tsx
@@ -36,12 +36,13 @@ Refractor.registerLanguage(jsx)
 Refractor.registerLanguage(yaml)
 Refractor.registerLanguage(css)
 
-const Video: React.FC<{
-  url: string
-  title: string
-  videoResource: {_ref: string}
-}> = ({url, title, videoResource}) => {
-
+const Video: React.FC<
+  React.PropsWithChildren<{
+    url: string
+    title: string
+    videoResource: {_ref: string}
+  }>
+> = ({url, title, videoResource}) => {
   const [isMounted, setIsMounted] = React.useState(false)
   React.useEffect(() => {
     setIsMounted(true)
@@ -133,11 +134,9 @@ const BodyImage = ({value}: BodyImageProps) => {
   )
 }
 
-export const InternalLink: React.FC<InternalLinkProps> = ({
-  value,
-  children,
-  ...props
-}) => {
+export const InternalLink: React.FC<
+  React.PropsWithChildren<InternalLinkProps>
+> = ({value, children, ...props}) => {
   const {slug = {}, type = 'lesson', hash, modules} = value
   const resourceSlug = slug.current
 
@@ -170,7 +169,7 @@ export const InternalLink: React.FC<InternalLinkProps> = ({
   )
 }
 
-const ExternalLink: React.FC<ExternalLinkProps> = ({
+const ExternalLink: React.FC<React.PropsWithChildren<ExternalLinkProps>> = ({
   value,
   children,
   ...props
diff --git a/apps/testingaccessibility/src/components/pricing.tsx b/apps/testingaccessibility/src/components/pricing.tsx
index 048d797f92..d4c7fa5624 100644
--- a/apps/testingaccessibility/src/components/pricing.tsx
+++ b/apps/testingaccessibility/src/components/pricing.tsx
@@ -36,7 +36,7 @@ type PricingProps = {
  * @param couponId
  * @constructor
  */
-export const Pricing: React.FC<PricingProps> = ({
+export const Pricing: React.FC<React.PropsWithChildren<PricingProps>> = ({
   product,
   purchased = false,
   purchases = [],
@@ -322,12 +322,9 @@ type RegionalPricingBoxProps = {
   index: number
 }
 
-const RegionalPricingBox: React.FC<RegionalPricingBoxProps> = ({
-  pppCoupon,
-  activeCoupon,
-  setActiveCoupon,
-  index,
-}) => {
+const RegionalPricingBox: React.FC<
+  React.PropsWithChildren<RegionalPricingBoxProps>
+> = ({pppCoupon, activeCoupon, setActiveCoupon, index}) => {
   const regionNames = new Intl.DisplayNames(['en'], {type: 'region'})
 
   if (!pppCoupon.country) {
@@ -381,7 +378,9 @@ type RibbonProps = {
   }
 }
 
-const Ribbon: React.FC<RibbonProps> = ({appliedMerchantCoupon}) => {
+const Ribbon: React.FC<React.PropsWithChildren<RibbonProps>> = ({
+  appliedMerchantCoupon,
+}) => {
   return (
     <div className="absolute -top-3 -right-3 aspect-square w-32 overflow-hidden rounded">
       <div className="absolute top-0 left-0 h-3 w-3 bg-amber-500"></div>
diff --git a/apps/testingaccessibility/src/components/primary-newsletter-cta.tsx b/apps/testingaccessibility/src/components/primary-newsletter-cta.tsx
index 45a8c2672e..3a6459465c 100644
--- a/apps/testingaccessibility/src/components/primary-newsletter-cta.tsx
+++ b/apps/testingaccessibility/src/components/primary-newsletter-cta.tsx
@@ -6,7 +6,9 @@ import {
 } from '@skillrecordings/convertkit'
 import {useRouter} from 'next/router'
 
-export const PrimaryNewsletterCta: React.FC = ({children}) => {
+export const PrimaryNewsletterCta: React.FC<
+  React.PropsWithChildren<unknown>
+> = ({children}) => {
   const router = useRouter()
   return (
     <section
diff --git a/apps/testingaccessibility/src/components/product-tiers.tsx b/apps/testingaccessibility/src/components/product-tiers.tsx
index fb4ffbbb27..5b47dbe54d 100644
--- a/apps/testingaccessibility/src/components/product-tiers.tsx
+++ b/apps/testingaccessibility/src/components/product-tiers.tsx
@@ -5,7 +5,7 @@ import {useCoupon} from '../hooks/use-coupon'
 import {CommerceProps} from '../utils/props-for-commerce'
 import {PriceCheckProvider} from '../context/pricing-check-context'
 
-export const PricingTiers: React.FC<CommerceProps> = ({
+export const PricingTiers: React.FC<React.PropsWithChildren<CommerceProps>> = ({
   couponFromCode,
   products,
   userId,
diff --git a/apps/testingaccessibility/src/components/redeem-dialog.tsx b/apps/testingaccessibility/src/components/redeem-dialog.tsx
index c70f6d5ce6..336eb4e623 100644
--- a/apps/testingaccessibility/src/components/redeem-dialog.tsx
+++ b/apps/testingaccessibility/src/components/redeem-dialog.tsx
@@ -97,7 +97,10 @@ const RedeemDialog = ({open = false, couponId}: RedeemDialogProps) => {
 
 export default RedeemDialog
 
-const Content: React.FC = ({children, ...props}) => {
+const Content: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+  ...props
+}) => {
   return (
     <AlertDialogPrimitive.Portal>
       <AlertDialogPrimitive.Overlay className="fixed bg-black bg-opacity-30 backdrop-blur-sm inset-0 z-40" />
diff --git a/apps/testingaccessibility/src/components/sale-banner.tsx b/apps/testingaccessibility/src/components/sale-banner.tsx
index 7ab0a85902..86a4866f1a 100644
--- a/apps/testingaccessibility/src/components/sale-banner.tsx
+++ b/apps/testingaccessibility/src/components/sale-banner.tsx
@@ -27,7 +27,7 @@ type CountdownProps = CountdownRenderProps & {
   percentOff: number
 }
 
-const CountdownRenderer: React.FC<CountdownProps> = ({
+const CountdownRenderer: React.FC<React.PropsWithChildren<CountdownProps>> = ({
   days,
   hours,
   minutes,
@@ -78,7 +78,9 @@ const CountdownRenderer: React.FC<CountdownProps> = ({
   )
 }
 
-const GoToPricingButton: React.FC = ({children}) => {
+const GoToPricingButton: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   const router = useRouter()
   const shouldReduceMotion = useReducedMotion()
   const isLandingPage = router.pathname === '/' || router.pathname === '/buy'
diff --git a/apps/testingaccessibility/src/components/sale-countdown.tsx b/apps/testingaccessibility/src/components/sale-countdown.tsx
index 82eba6ae2b..e1f96d4779 100644
--- a/apps/testingaccessibility/src/components/sale-countdown.tsx
+++ b/apps/testingaccessibility/src/components/sale-countdown.tsx
@@ -1,7 +1,10 @@
 import React from 'react'
 import Countdown, {zeroPad, CountdownRenderProps} from 'react-countdown'
 
-const SaleCountdown: React.FC<any> = ({coupon, ...rest}) => {
+const SaleCountdown: React.FC<React.PropsWithChildren<any>> = ({
+  coupon,
+  ...rest
+}) => {
   // storing coupon in state so that it doesn't rerender
   // and cause layout shift when quantity changes
   const [storedCoupon, setStoredCoupon] = React.useState(coupon)
@@ -21,14 +24,9 @@ const SaleCountdown: React.FC<any> = ({coupon, ...rest}) => {
 
 export default SaleCountdown
 
-const CountdownRenderer: React.FC<CountdownRenderProps> = ({
-  days,
-  hours,
-  minutes,
-  seconds,
-  completed,
-  ...rest
-}) => {
+const CountdownRenderer: React.FC<
+  React.PropsWithChildren<CountdownRenderProps>
+> = ({days, hours, minutes, seconds, completed, ...rest}) => {
   const [srValues] = React.useState({
     days,
     hours,
diff --git a/apps/testingaccessibility/src/components/spinner.tsx b/apps/testingaccessibility/src/components/spinner.tsx
index 578718530c..50cf6e6fbe 100644
--- a/apps/testingaccessibility/src/components/spinner.tsx
+++ b/apps/testingaccessibility/src/components/spinner.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react'
 import cx from 'classnames'
 
-const Spinner: React.FunctionComponent<{
-  className?: string
-}> = ({className = '', ...rest}) => (
+const Spinner: React.FunctionComponent<
+  React.PropsWithChildren<{
+    className?: string
+  }>
+> = ({className = '', ...rest}) => (
   <svg
     className={cx('animate-spin', className)}
     xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/testingaccessibility/src/components/team/copy-invite-link.tsx b/apps/testingaccessibility/src/components/team/copy-invite-link.tsx
index a8dfd8f26e..127c2978ce 100644
--- a/apps/testingaccessibility/src/components/team/copy-invite-link.tsx
+++ b/apps/testingaccessibility/src/components/team/copy-invite-link.tsx
@@ -3,7 +3,9 @@ import {Button} from '@skillrecordings/react'
 import {useCopyToClipboard} from 'react-use'
 import toast from 'react-hot-toast'
 
-const CopyInviteLink: React.FC<{bulkCouponId: string}> = ({bulkCouponId}) => {
+const CopyInviteLink: React.FC<
+  React.PropsWithChildren<{bulkCouponId: string}>
+> = ({bulkCouponId}) => {
   const [_, setCopied] = useCopyToClipboard()
   const inviteLink = `${process.env.NEXT_PUBLIC_URL}?code=${bulkCouponId}`
 
diff --git a/apps/testingaccessibility/src/components/team/index.tsx b/apps/testingaccessibility/src/components/team/index.tsx
index e37f1c3805..0d6de9ac52 100644
--- a/apps/testingaccessibility/src/components/team/index.tsx
+++ b/apps/testingaccessibility/src/components/team/index.tsx
@@ -17,7 +17,7 @@ type InviteTeamProps = {
   setPersonalPurchase: (props: any) => void
 }
 
-const InviteTeam: React.FC<InviteTeamProps> = ({
+const InviteTeam: React.FC<React.PropsWithChildren<InviteTeamProps>> = ({
   purchase,
   existingPurchase,
   session,
diff --git a/apps/testingaccessibility/src/components/team/self-redeem-button.tsx b/apps/testingaccessibility/src/components/team/self-redeem-button.tsx
index f45005ae8d..a5dacf27a5 100644
--- a/apps/testingaccessibility/src/components/team/self-redeem-button.tsx
+++ b/apps/testingaccessibility/src/components/team/self-redeem-button.tsx
@@ -3,12 +3,14 @@ import {handleSelfRedeem} from 'utils/handle-self-redeem'
 import {Button} from '@skillrecordings/react'
 import {Purchase} from '@skillrecordings/database'
 
-const SelfRedeemButton: React.FC<{
-  userEmail: string | null | undefined
-  bulkCouponId: string
-  onSuccess: (redeemedPurchase: Purchase) => void
-  className?: string
-}> = ({
+const SelfRedeemButton: React.FC<
+  React.PropsWithChildren<{
+    userEmail: string | null | undefined
+    bulkCouponId: string
+    onSuccess: (redeemedPurchase: Purchase) => void
+    className?: string
+  }>
+> = ({
   userEmail,
   bulkCouponId,
   onSuccess,
diff --git a/apps/testingaccessibility/src/context/feedback-context.tsx b/apps/testingaccessibility/src/context/feedback-context.tsx
index 51d5fbe8be..a4a8eed1c6 100644
--- a/apps/testingaccessibility/src/context/feedback-context.tsx
+++ b/apps/testingaccessibility/src/context/feedback-context.tsx
@@ -21,7 +21,9 @@ export function useFeedback() {
 
 export const FeedbackContext = React.createContext(defaultFeedbackContext)
 
-export const FeedbackProvider: React.FC<any> = ({children}) => {
+export const FeedbackProvider: React.FC<React.PropsWithChildren<any>> = ({
+  children,
+}) => {
   const [isFeedbackDialogOpen, setIsFeedbackDialogOpen] =
     React.useState<boolean>(false)
   const [location, setLocation] = React.useState<string>('navigation')
diff --git a/apps/testingaccessibility/src/context/pricing-check-context.tsx b/apps/testingaccessibility/src/context/pricing-check-context.tsx
index e15244b97a..c78ebb9f51 100644
--- a/apps/testingaccessibility/src/context/pricing-check-context.tsx
+++ b/apps/testingaccessibility/src/context/pricing-check-context.tsx
@@ -22,7 +22,7 @@ export function usePriceCheck() {
 
 export const PriceCheckContext = React.createContext(defaultPriceCheckContext)
 
-export const PriceCheckProvider: React.FC<any> = ({
+export const PriceCheckProvider: React.FC<React.PropsWithChildren<any>> = ({
   children,
   purchasedProductIds,
 }) => {
diff --git a/apps/testingaccessibility/src/context/progress-context.tsx b/apps/testingaccessibility/src/context/progress-context.tsx
index 84d38a583e..e39ea062ae 100644
--- a/apps/testingaccessibility/src/context/progress-context.tsx
+++ b/apps/testingaccessibility/src/context/progress-context.tsx
@@ -48,7 +48,9 @@ function useLoadProgress() {
   }
 }
 
-export const ProgressProvider: React.FC = ({children}) => {
+export const ProgressProvider: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   const {progress, status, refetch} = useLoadProgress()
   return (
     <ProgressContext.Provider
diff --git a/apps/testingaccessibility/src/pages/[article].tsx b/apps/testingaccessibility/src/pages/[article].tsx
index 01a3feaf6b..1790fe5b5b 100644
--- a/apps/testingaccessibility/src/pages/[article].tsx
+++ b/apps/testingaccessibility/src/pages/[article].tsx
@@ -105,7 +105,10 @@ type ArticlePageProps = {
   hasSubscribed: boolean
 }
 
-const ArticlePage: React.FC<ArticlePageProps> = ({article, hasSubscribed}) => {
+const ArticlePage: React.FC<React.PropsWithChildren<ArticlePageProps>> = ({
+  article,
+  hasSubscribed,
+}) => {
   return <ArticleTemplate article={article} hasSubscribed={hasSubscribed} />
 }
 
diff --git a/apps/testingaccessibility/src/pages/accessibility-reviews/[slug].tsx b/apps/testingaccessibility/src/pages/accessibility-reviews/[slug].tsx
index fb7016daa5..fa456d92ab 100644
--- a/apps/testingaccessibility/src/pages/accessibility-reviews/[slug].tsx
+++ b/apps/testingaccessibility/src/pages/accessibility-reviews/[slug].tsx
@@ -21,7 +21,7 @@ import {MDXRemote} from 'next-mdx-remote'
 import {format} from 'date-fns'
 import {useRouter} from 'next/router'
 
-const Review: React.FC<any> = ({review, body}) => {
+const Review: React.FC<React.PropsWithChildren<any>> = ({review, body}) => {
   const {hlsUrl, title, date, description, videoPoster, subtitlesUrl} = review
 
   const meta = {
@@ -114,7 +114,7 @@ const Review: React.FC<any> = ({review, body}) => {
   )
 }
 
-const Page: React.FC<any> = (props) => {
+const Page: React.FC<React.PropsWithChildren<any>> = (props) => {
   return (
     <VideoProvider>
       <Review {...props} />
diff --git a/apps/testingaccessibility/src/pages/accessibility-reviews/index.tsx b/apps/testingaccessibility/src/pages/accessibility-reviews/index.tsx
index be98813f7a..8bd5fd77ed 100644
--- a/apps/testingaccessibility/src/pages/accessibility-reviews/index.tsx
+++ b/apps/testingaccessibility/src/pages/accessibility-reviews/index.tsx
@@ -13,7 +13,7 @@ const meta = {
   },
 }
 
-const Reviews: React.FC<any> = ({reviews}) => {
+const Reviews: React.FC<React.PropsWithChildren<any>> = ({reviews}) => {
   return (
     <Layout meta={meta}>
       <main>
diff --git a/apps/testingaccessibility/src/pages/answer.tsx b/apps/testingaccessibility/src/pages/answer.tsx
index 954cc314ca..1ebdc5f34c 100644
--- a/apps/testingaccessibility/src/pages/answer.tsx
+++ b/apps/testingaccessibility/src/pages/answer.tsx
@@ -4,7 +4,9 @@ import {QuestionSet} from '@skillrecordings/types'
 import Layout from 'components/app/layout'
 import getConfig from '@skillrecordings/quiz/dist/config'
 
-const Answer: React.FC<{questionSet: QuestionSet}> = ({questionSet}) => {
+const Answer: React.FC<React.PropsWithChildren<{questionSet: QuestionSet}>> = ({
+  questionSet,
+}) => {
   return (
     <Layout noIndex meta={{title: 'Quiz'}}>
       <div className="h-full w-full flex flex-col items-center justify-center py-24">
diff --git a/apps/testingaccessibility/src/pages/articles.tsx b/apps/testingaccessibility/src/pages/articles.tsx
index 09c0955a17..8feaccb9e9 100644
--- a/apps/testingaccessibility/src/pages/articles.tsx
+++ b/apps/testingaccessibility/src/pages/articles.tsx
@@ -18,7 +18,9 @@ type ArticlesProps = {
   articles: SanityDocument[]
 }
 
-const Articles: React.FC<ArticlesProps> = ({articles}) => {
+const Articles: React.FC<React.PropsWithChildren<ArticlesProps>> = ({
+  articles,
+}) => {
   return (
     <Layout meta={meta}>
       <main>
diff --git a/apps/testingaccessibility/src/pages/buy.tsx b/apps/testingaccessibility/src/pages/buy.tsx
index b0356a2969..e8ce5ecf17 100644
--- a/apps/testingaccessibility/src/pages/buy.tsx
+++ b/apps/testingaccessibility/src/pages/buy.tsx
@@ -9,7 +9,7 @@ import FAQ from '../components/content/faq-section'
 import Layout from 'components/app/layout'
 import Image from 'next/image'
 
-const Buy: React.FC<CommerceProps> = ({
+const Buy: React.FC<React.PropsWithChildren<CommerceProps>> = ({
   couponFromCode,
   purchases = [],
   userId,
diff --git a/apps/testingaccessibility/src/pages/contact.tsx b/apps/testingaccessibility/src/pages/contact.tsx
index 44da6a04b1..95161f0c13 100644
--- a/apps/testingaccessibility/src/pages/contact.tsx
+++ b/apps/testingaccessibility/src/pages/contact.tsx
@@ -4,7 +4,7 @@ import Layout from 'components/app/layout'
 import ContactForm from '../components/contact/contact-form'
 import {getOgImage} from 'utils/get-og-image'
 
-const ContactFormPage: React.FC = () => {
+const ContactFormPage: React.FC<React.PropsWithChildren<unknown>> = () => {
   const ogImage = getOgImage('Contact')
   return (
     <Layout
diff --git a/apps/testingaccessibility/src/pages/index.tsx b/apps/testingaccessibility/src/pages/index.tsx
index 83f5e7139e..006a8941bc 100644
--- a/apps/testingaccessibility/src/pages/index.tsx
+++ b/apps/testingaccessibility/src/pages/index.tsx
@@ -27,7 +27,7 @@ export const getServerSideProps: GetServerSideProps = async ({
   return await propsForCommerce({req, query})
 }
 
-const Home: React.FC<CommerceProps> = ({
+const Home: React.FC<React.PropsWithChildren<CommerceProps>> = ({
   couponFromCode,
   purchases = [],
   userId,
diff --git a/apps/testingaccessibility/src/pages/invoices/[merchantChargeId].tsx b/apps/testingaccessibility/src/pages/invoices/[merchantChargeId].tsx
index 5c774ae665..558b04aa85 100644
--- a/apps/testingaccessibility/src/pages/invoices/[merchantChargeId].tsx
+++ b/apps/testingaccessibility/src/pages/invoices/[merchantChargeId].tsx
@@ -74,11 +74,13 @@ export const getServerSideProps: GetServerSideProps = async ({
   }
 }
 
-const Invoice: React.FC<{
-  charge: Stripe.Charge
-  product: {name: string}
-  merchantChargeId: string
-}> = ({charge, product, merchantChargeId}) => {
+const Invoice: React.FC<
+  React.PropsWithChildren<{
+    charge: Stripe.Charge
+    product: {name: string}
+    merchantChargeId: string
+  }>
+> = ({charge, product, merchantChargeId}) => {
   const [invoiceMetadata, setInvoiceMetadata] = useLocalStorage(
     'invoice-metadata',
     '',
diff --git a/apps/testingaccessibility/src/pages/invoices/index.tsx b/apps/testingaccessibility/src/pages/invoices/index.tsx
index 09dee802c5..3631510845 100644
--- a/apps/testingaccessibility/src/pages/invoices/index.tsx
+++ b/apps/testingaccessibility/src/pages/invoices/index.tsx
@@ -30,7 +30,9 @@ export const getServerSideProps: GetServerSideProps = async ({req}) => {
   }
 }
 
-const Learn: React.FC<{purchases: Purchase[]}> = ({purchases = []}) => {
+const Learn: React.FC<React.PropsWithChildren<{purchases: Purchase[]}>> = ({
+  purchases = [],
+}) => {
   return (
     <Layout meta={{title: 'Invoices'}} className="bg-green-700 bg-noise">
       <main className="max-w-2xl mx-auto w-full sm:py-16 py-8 flex-grow h-full px-5 flex flex-col">
diff --git a/apps/testingaccessibility/src/pages/learn/[module]/[section]/[lesson]/index.tsx b/apps/testingaccessibility/src/pages/learn/[module]/[section]/[lesson]/index.tsx
index 8fd8c2193a..4aaca6471e 100644
--- a/apps/testingaccessibility/src/pages/learn/[module]/[section]/[lesson]/index.tsx
+++ b/apps/testingaccessibility/src/pages/learn/[module]/[section]/[lesson]/index.tsx
@@ -150,7 +150,11 @@ type LessonPageProps = {
   lesson: SanityDocument
 }
 
-const LessonPage: React.FC<LessonPageProps> = ({module, section, lesson}) => {
+const LessonPage: React.FC<React.PropsWithChildren<LessonPageProps>> = ({
+  module,
+  section,
+  lesson,
+}) => {
   return <LessonTemplate module={module} section={section} lesson={lesson} />
 }
 
diff --git a/apps/testingaccessibility/src/pages/learn/[module]/[section]/index.tsx b/apps/testingaccessibility/src/pages/learn/[module]/[section]/index.tsx
index 6732e482f4..805025bfc8 100644
--- a/apps/testingaccessibility/src/pages/learn/[module]/[section]/index.tsx
+++ b/apps/testingaccessibility/src/pages/learn/[module]/[section]/index.tsx
@@ -136,7 +136,7 @@ type SectionPageProps = {
   modules: SanityDocument[]
 }
 
-const SectionPage: React.FC<SectionPageProps> = ({
+const SectionPage: React.FC<React.PropsWithChildren<SectionPageProps>> = ({
   module,
   section,
   modules,
diff --git a/apps/testingaccessibility/src/pages/learn/[module]/index.tsx b/apps/testingaccessibility/src/pages/learn/[module]/index.tsx
index 7158a84ffa..d16ff63317 100644
--- a/apps/testingaccessibility/src/pages/learn/[module]/index.tsx
+++ b/apps/testingaccessibility/src/pages/learn/[module]/index.tsx
@@ -62,7 +62,9 @@ type ModulePageProps = {
   module: SanityDocument
 }
 
-const ModulePage: React.FC<ModulePageProps> = ({module}) => {
+const ModulePage: React.FC<React.PropsWithChildren<ModulePageProps>> = ({
+  module,
+}) => {
   return <ModuleTemplate module={module} />
 }
 
diff --git a/apps/testingaccessibility/src/pages/learn/index.tsx b/apps/testingaccessibility/src/pages/learn/index.tsx
index c5adda1e0b..5b510797ad 100644
--- a/apps/testingaccessibility/src/pages/learn/index.tsx
+++ b/apps/testingaccessibility/src/pages/learn/index.tsx
@@ -104,9 +104,9 @@ export const getServerSideProps: GetServerSideProps = async ({
   }
 }
 
-const Learn: React.FC<{purchases: Purchase[]; product: SanityDocument}> = ({
-  product,
-}) => {
+const Learn: React.FC<
+  React.PropsWithChildren<{purchases: Purchase[]; product: SanityDocument}>
+> = ({product}) => {
   const {title, modules} = product
   const {progress, isLoadingProgress} = useProgress()
   const nextUpLesson = !isLoadingProgress && getNextUpLesson(progress, modules)
diff --git a/apps/testingaccessibility/src/pages/login.tsx b/apps/testingaccessibility/src/pages/login.tsx
index a20aa78d32..edd5d767a7 100644
--- a/apps/testingaccessibility/src/pages/login.tsx
+++ b/apps/testingaccessibility/src/pages/login.tsx
@@ -9,7 +9,9 @@ import toast from 'react-hot-toast'
 import {setupHttpTracing} from '@vercel/tracing-js'
 import {tracer} from '../utils/honeycomb-tracer'
 
-const Login: React.FC<{csrfToken: string}> = ({csrfToken}) => {
+const Login: React.FC<React.PropsWithChildren<{csrfToken: string}>> = ({
+  csrfToken,
+}) => {
   const {
     register,
     formState: {errors},
diff --git a/apps/testingaccessibility/src/pages/team/index.tsx b/apps/testingaccessibility/src/pages/team/index.tsx
index d45bdb994d..11ab0705f4 100644
--- a/apps/testingaccessibility/src/pages/team/index.tsx
+++ b/apps/testingaccessibility/src/pages/team/index.tsx
@@ -72,7 +72,7 @@ type TeamPageProps = {
   availableUpgrades: {upgradableTo: {id: string; name: string}}[]
 }
 
-const TeamPage: React.FC<TeamPageProps> = ({
+const TeamPage: React.FC<React.PropsWithChildren<TeamPageProps>> = ({
   purchase,
   existingPurchase,
   availableUpgrades,
diff --git a/apps/testingaccessibility/src/pages/thanks/purchase.tsx b/apps/testingaccessibility/src/pages/thanks/purchase.tsx
index d7f6d692f3..4097bfb971 100644
--- a/apps/testingaccessibility/src/pages/thanks/purchase.tsx
+++ b/apps/testingaccessibility/src/pages/thanks/purchase.tsx
@@ -38,10 +38,9 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   }
 }
 
-const ThanksVerify: React.FC<{name: string; email: string}> = ({
-  name,
-  email,
-}) => {
+const ThanksVerify: React.FC<
+  React.PropsWithChildren<{name: string; email: string}>
+> = ({name, email}) => {
   return (
     <Layout
       footer={null}
diff --git a/apps/testingaccessibility/src/pages/thanks/redeem.tsx b/apps/testingaccessibility/src/pages/thanks/redeem.tsx
index d00935dfa7..1f1c6391e4 100644
--- a/apps/testingaccessibility/src/pages/thanks/redeem.tsx
+++ b/apps/testingaccessibility/src/pages/thanks/redeem.tsx
@@ -33,7 +33,9 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   }
 }
 
-const ThanksRedeem: React.FC<{purchase: any; email: string}> = ({email}) => {
+const ThanksRedeem: React.FC<
+  React.PropsWithChildren<{purchase: any; email: string}>
+> = ({email}) => {
   return (
     <Layout footer={null} className="bg-green-700 bg-noise">
       <main className="flex flex-col flex-grow items-center justify-center pt-5 pb-16 px-5 text-white">
diff --git a/apps/testingaccessibility/src/pages/welcome/index.tsx b/apps/testingaccessibility/src/pages/welcome/index.tsx
index d3e382efe2..8aec847bb3 100644
--- a/apps/testingaccessibility/src/pages/welcome/index.tsx
+++ b/apps/testingaccessibility/src/pages/welcome/index.tsx
@@ -84,20 +84,22 @@ export const getServerSideProps: GetServerSideProps = async ({
   }
 }
 
-const Welcome: React.FC<{
-  purchase: {
-    merchantChargeId: string | null
-    bulkCoupon: {id: string; maxUses: number; usedCount: number} | null
-    product: {id: string; name: string}
-  }
-  existingPurchase: {
-    id: string
-    product: {id: string; name: string}
-  }
-  token: any
-  availableUpgrades: {upgradableTo: {id: string; name: string}}[]
-  upgrade: boolean
-}> = ({upgrade, purchase, token, existingPurchase, availableUpgrades}) => {
+const Welcome: React.FC<
+  React.PropsWithChildren<{
+    purchase: {
+      merchantChargeId: string | null
+      bulkCoupon: {id: string; maxUses: number; usedCount: number} | null
+      product: {id: string; name: string}
+    }
+    existingPurchase: {
+      id: string
+      product: {id: string; name: string}
+    }
+    token: any
+    availableUpgrades: {upgradableTo: {id: string; name: string}}[]
+    upgrade: boolean
+  }>
+> = ({upgrade, purchase, token, existingPurchase, availableUpgrades}) => {
   const {data: session, status} = useSession()
   const [personalPurchase, setPersonalPurchase] = React.useState(
     purchase.bulkCoupon ? existingPurchase : purchase,
@@ -135,7 +137,9 @@ const Welcome: React.FC<{
   )
 }
 
-const Header: React.FC<{upgrade: boolean}> = ({upgrade}) => {
+const Header: React.FC<React.PropsWithChildren<{upgrade: boolean}>> = ({
+  upgrade,
+}) => {
   return (
     <header className="text-white text-center pb-8 flex flex-col items-center">
       <Image
@@ -158,7 +162,9 @@ const Header: React.FC<{upgrade: boolean}> = ({upgrade}) => {
   )
 }
 
-const Invoice: React.FC<{purchase: any}> = ({purchase}: any) => {
+const Invoice: React.FC<React.PropsWithChildren<{purchase: any}>> = ({
+  purchase,
+}: any) => {
   return (
     <div className="bg-white rounded-md sm:px-8 px-5 py-5 flex items-center justify-between">
       <h2 className="font-bold flex items-center gap-1 text-xl">
@@ -184,7 +190,7 @@ const Invoice: React.FC<{purchase: any}> = ({purchase}: any) => {
   )
 }
 
-const Invite: React.FC = ({children}) => {
+const Invite: React.FC<React.PropsWithChildren<unknown>> = ({children}) => {
   return (
     <div className="sm:px-8 px-5 sm:py-8 py-5 bg-white rounded-lg">
       <h3 className="flex items-center gap-2 text-xl font-bold">
@@ -195,7 +201,7 @@ const Invite: React.FC = ({children}) => {
   )
 }
 
-const GetStarted: React.FC = () => {
+const GetStarted: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <div className="p-8 flex items-center text-center relative flex-col">
       <Image
@@ -220,7 +226,7 @@ const GetStarted: React.FC = () => {
   )
 }
 
-const Share: React.FC = () => {
+const Share: React.FC<React.PropsWithChildren<unknown>> = () => {
   const tweet = `https://twitter.com/intent/tweet/?text=Just purchased TestingAccessibility.com by @MarcySutton`
   return (
     <div className="px-8 pt-12 pb-5 flex flex-col items-center text-center max-w-lg mx-auto gap-5">
diff --git a/apps/testingaccessibility/src/pages/workshops/[slug].tsx b/apps/testingaccessibility/src/pages/workshops/[slug].tsx
index 885f3239c5..0b7c543c20 100644
--- a/apps/testingaccessibility/src/pages/workshops/[slug].tsx
+++ b/apps/testingaccessibility/src/pages/workshops/[slug].tsx
@@ -7,7 +7,10 @@ import isEmpty from 'lodash/isEmpty'
 import {sanityClient} from 'utils/sanity-client'
 import LiveWorkshopTemplate from 'templates/live-workshop-template'
 
-const LiveWorkshop: React.FC<any> = ({workshop, source}) => {
+const LiveWorkshop: React.FC<React.PropsWithChildren<any>> = ({
+  workshop,
+  source,
+}) => {
   return <LiveWorkshopTemplate workshop={workshop} source={source} />
 }
 
diff --git a/apps/testingaccessibility/src/pages/workshops/index.tsx b/apps/testingaccessibility/src/pages/workshops/index.tsx
index cc1eab3509..e2d0c56cd3 100644
--- a/apps/testingaccessibility/src/pages/workshops/index.tsx
+++ b/apps/testingaccessibility/src/pages/workshops/index.tsx
@@ -7,7 +7,7 @@ import groq from 'groq'
 import {GetServerSideProps} from 'next'
 import {sanityClient} from 'utils/sanity-client'
 
-const Workshops: React.FC<any> = ({workshops}) => {
+const Workshops: React.FC<React.PropsWithChildren<any>> = ({workshops}) => {
   const upcomingWorkshops = workshops.filter(({published}: any) => published)
   const pastWorkshops = workshops.filter(({published}: any) => !published)
 
diff --git a/apps/testingaccessibility/src/templates/article-template.tsx b/apps/testingaccessibility/src/templates/article-template.tsx
index 8f09ac0250..f1616ba61a 100644
--- a/apps/testingaccessibility/src/templates/article-template.tsx
+++ b/apps/testingaccessibility/src/templates/article-template.tsx
@@ -22,10 +22,9 @@ type ArticleTemplateProps = {
   hasSubscribed: boolean
 }
 
-const ArticleTemplate: React.FC<ArticleTemplateProps> = ({
-  article,
-  hasSubscribed,
-}) => {
+const ArticleTemplate: React.FC<
+  React.PropsWithChildren<ArticleTemplateProps>
+> = ({article, hasSubscribed}) => {
   const {title, description, body, subscribersOnly, date, cta} = article
   const ogImage = getOgImage(title)
   const shortDescription =
@@ -75,7 +74,9 @@ const ArticleTemplate: React.FC<ArticleTemplateProps> = ({
 
 export default ArticleTemplate
 
-const Header: React.FC<{title: string; date: string}> = ({title, date}) => {
+const Header: React.FC<
+  React.PropsWithChildren<{title: string; date: string}>
+> = ({title, date}) => {
   return (
     <header className="flex flex-col items-center relative px-5 pt-16 pb-8 overflow-hidden text-white bg-green-700 bg-noise">
       <div className="flex flex-col items-center max-w-screen-md mx-auto w-full relative z-10">
@@ -108,7 +109,9 @@ const Header: React.FC<{title: string; date: string}> = ({title, date}) => {
   )
 }
 
-const CTAContainer: React.FC = ({children}) => {
+const CTAContainer: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   return (
     <section
       id="subscribe"
@@ -126,7 +129,7 @@ type GetCTAProps = {
   router: NextRouter
 }
 
-const getCTA: React.FC<GetCTAProps> = ({
+const getCTA: React.FC<React.PropsWithChildren<GetCTAProps>> = ({
   subscribersOnly,
   hasSubscribed,
   cta,
@@ -241,7 +244,7 @@ const ContinueReadingSubscribeForm = () => {
   )
 }
 
-const Share: React.FC<{title: string}> = ({title}) => {
+const Share: React.FC<React.PropsWithChildren<{title: string}>> = ({title}) => {
   const router = useRouter()
   const url = process.env.NEXT_PUBLIC_URL + router.asPath
   const className =
diff --git a/apps/testingaccessibility/src/templates/lesson-template.tsx b/apps/testingaccessibility/src/templates/lesson-template.tsx
index 4fbacebcad..2bccb9de65 100644
--- a/apps/testingaccessibility/src/templates/lesson-template.tsx
+++ b/apps/testingaccessibility/src/templates/lesson-template.tsx
@@ -30,11 +30,9 @@ type LessonTemplateProps = {
   lesson: SanityDocument
 }
 
-const LessonTemplate: React.FC<LessonTemplateProps> = ({
-  module,
-  section,
-  lesson,
-}) => {
+const LessonTemplate: React.FC<
+  React.PropsWithChildren<LessonTemplateProps>
+> = ({module, section, lesson}) => {
   const {data: session} = useSession()
   const {title, body, slug} = lesson
   const {lessons} = section
@@ -144,11 +142,9 @@ type ProgressToggleProps = {
   slug: string
 }
 
-export const ProgressToggle: React.FC<ProgressToggleProps> = ({
-  isCurrentLessonCompleted,
-  toggleLessonComplete,
-  slug,
-}) => {
+export const ProgressToggle: React.FC<
+  React.PropsWithChildren<ProgressToggleProps>
+> = ({isCurrentLessonCompleted, toggleLessonComplete, slug}) => {
   const {reward} = useReward('rewardId', 'confetti', {
     zIndex: 50,
     lifetime: 50,
@@ -249,7 +245,7 @@ type UpNextProps = {
   currentLessonIndex: number
 }
 
-const UpNext: React.FC<UpNextProps> = ({
+const UpNext: React.FC<React.PropsWithChildren<UpNextProps>> = ({
   module,
   section,
   nextLesson,
@@ -341,7 +337,9 @@ type LessonNavigatorProps = {
   className?: string
 }
 
-const LessonNavigator: React.FC<LessonNavigatorProps> = ({
+const LessonNavigator: React.FC<
+  React.PropsWithChildren<LessonNavigatorProps>
+> = ({
   lessons,
   progress,
   module,
diff --git a/apps/testingaccessibility/src/templates/live-workshop-template.tsx b/apps/testingaccessibility/src/templates/live-workshop-template.tsx
index f90ca847b1..6366b138d6 100644
--- a/apps/testingaccessibility/src/templates/live-workshop-template.tsx
+++ b/apps/testingaccessibility/src/templates/live-workshop-template.tsx
@@ -4,7 +4,10 @@ import {MDXRemote} from 'next-mdx-remote'
 import Layout from 'components/app/layout'
 import Link from 'next/link'
 
-const LiveWorkshopTemplate: React.FC<any> = ({workshop, source}) => {
+const LiveWorkshopTemplate: React.FC<React.PropsWithChildren<any>> = ({
+  workshop,
+  source,
+}) => {
   const {title, date, ckFormId, description, published, status, url} = workshop
 
   const DisplayDate = () => <time dateTime={date}>{date}</time>
@@ -117,7 +120,9 @@ const LiveWorkshopTemplate: React.FC<any> = ({workshop, source}) => {
   )
 }
 
-const CalendarIcon: React.FC<{className?: string}> = ({className}) => {
+const CalendarIcon: React.FC<React.PropsWithChildren<{className?: string}>> = ({
+  className,
+}) => {
   const title = 'calendar'
   return (
     <svg
diff --git a/apps/testingaccessibility/src/templates/module-template.tsx b/apps/testingaccessibility/src/templates/module-template.tsx
index c9c9c8b343..501e202497 100644
--- a/apps/testingaccessibility/src/templates/module-template.tsx
+++ b/apps/testingaccessibility/src/templates/module-template.tsx
@@ -23,7 +23,9 @@ type ModuleTemplateProps = {
   module: SanityDocument
 }
 
-const ModuleTemplate: React.FC<ModuleTemplateProps> = ({module}) => {
+const ModuleTemplate: React.FC<
+  React.PropsWithChildren<ModuleTemplateProps>
+> = ({module}) => {
   const {slug, title, body, sections, image, resources} = module
   const ogImage = getOgImage(title, image.url)
   const {progress} = useProgress()
@@ -107,12 +109,16 @@ type Resource = {
   }
 }
 
-const Resources: React.FC<{resources: Resource[]}> = ({resources}) => {
+const Resources: React.FC<React.PropsWithChildren<{resources: Resource[]}>> = ({
+  resources,
+}) => {
   return (
     <div className="flex md:justify-start justify-center flex-wrap gap-3 max-w-screen-md mx-auto w-full md:p-0 p-5">
       {resources.map((resource) => {
         const {label, href, _type: type, image} = resource
-        const ResourceBox: React.FC = ({children}) => {
+        const ResourceBox: React.FC<React.PropsWithChildren<unknown>> = ({
+          children,
+        }) => {
           return (
             <div
               className={cx(
@@ -160,7 +166,10 @@ const Resources: React.FC<{resources: Resource[]}> = ({resources}) => {
   )
 }
 
-const Sections: React.FC<SectionsProps> = ({progress, module}) => {
+const Sections: React.FC<React.PropsWithChildren<SectionsProps>> = ({
+  progress,
+  module,
+}) => {
   return (
     <ol className="md:space-y-5 space-y-2">
       {module.sections.map((section: SanityDocument, i: number) => {
diff --git a/apps/testingaccessibility/src/templates/section-template.tsx b/apps/testingaccessibility/src/templates/section-template.tsx
index 3cc678afab..282d277d23 100644
--- a/apps/testingaccessibility/src/templates/section-template.tsx
+++ b/apps/testingaccessibility/src/templates/section-template.tsx
@@ -27,11 +27,9 @@ type SectionTemplateProps = {
   modules?: SanityDocument[]
 }
 
-const SectionTemplate: React.FC<SectionTemplateProps> = ({
-  section,
-  module,
-  modules,
-}) => {
+const SectionTemplate: React.FC<
+  React.PropsWithChildren<SectionTemplateProps>
+> = ({section, module, modules}) => {
   const {slug: sectionSlug, title, body, lessons} = section
   const image = section.image ?? module?.image
   const ogImage = getOgImage(title, image.url)
diff --git a/apps/total-typescript/src/Layout.tsx b/apps/total-typescript/src/Layout.tsx
index 1276bebb65..7d92297c1c 100644
--- a/apps/total-typescript/src/Layout.tsx
+++ b/apps/total-typescript/src/Layout.tsx
@@ -1,7 +1,9 @@
 import Script from 'next/script'
 import React from 'react'
 
-export const Layout: React.FC = ({children}) => {
+export const Layout: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   return (
     <div className="">
       <div className="flex items-center h-16 text-white bg-gray-800">
diff --git a/apps/tsforjs/src/components/layout.tsx b/apps/tsforjs/src/components/layout.tsx
index 310f20414b..d5eaa4eaf1 100644
--- a/apps/tsforjs/src/components/layout.tsx
+++ b/apps/tsforjs/src/components/layout.tsx
@@ -11,7 +11,7 @@ type LayoutProps = {
   children?: any
 }
 
-const Layout: FunctionComponent<LayoutProps> = ({
+const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className,
   meta,
diff --git a/apps/tsforjs/src/pages/answer.tsx b/apps/tsforjs/src/pages/answer.tsx
index 40a9b42b08..04e01c5c88 100644
--- a/apps/tsforjs/src/pages/answer.tsx
+++ b/apps/tsforjs/src/pages/answer.tsx
@@ -4,7 +4,9 @@ import {QuestionSet} from '@skillrecordings/types'
 import getConfig from '@skillrecordings/quiz/dist/config'
 import Layout from 'components/layout'
 
-const Answer: React.FC<{questionSet: QuestionSet}> = ({questionSet}) => {
+const Answer: React.FC<React.PropsWithChildren<{questionSet: QuestionSet}>> = ({
+  questionSet,
+}) => {
   return (
     <Layout noIndex meta={{title: 'Quiz'}} className="bg-slate-900">
       <header className="flex items-center justify-center w-full sm:pt-16 sm:pb-0 pt-5 pb-5">
diff --git a/apps/typescriptcourse/src/components/app/footer.tsx b/apps/typescriptcourse/src/components/app/footer.tsx
index bf708d73da..ad3d48d499 100644
--- a/apps/typescriptcourse/src/components/app/footer.tsx
+++ b/apps/typescriptcourse/src/components/app/footer.tsx
@@ -72,12 +72,9 @@ const Footer = () => {
   )
 }
 
-const NavLink: React.FC<{href: string; index: number}> = ({
-  href,
-  children,
-  index,
-  ...props
-}) => {
+const NavLink: React.FC<
+  React.PropsWithChildren<{href: string; index: number}>
+> = ({href, children, index, ...props}) => {
   const router = useRouter()
   const isActive = router.pathname === href
 
diff --git a/apps/typescriptcourse/src/components/app/layout.tsx b/apps/typescriptcourse/src/components/app/layout.tsx
index d06e95d6fb..9112de0ecc 100644
--- a/apps/typescriptcourse/src/components/app/layout.tsx
+++ b/apps/typescriptcourse/src/components/app/layout.tsx
@@ -15,11 +15,11 @@ export type LayoutProps = {
   }
   noIndex?: boolean
   className?: string
-  navigation?: React.FC<NavigationProps> | null
-  footer?: React.FC<any> | null
+  navigation?: React.FC<React.PropsWithChildren<NavigationProps>> | null
+  footer?: React.FC<React.PropsWithChildren<any>> | null
 }
 
-const Layout: React.FC<LayoutProps> = ({
+const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className = 'flex flex-col min-h-screen',
   meta,
diff --git a/apps/typescriptcourse/src/components/app/navigation.tsx b/apps/typescriptcourse/src/components/app/navigation.tsx
index 0f33c53b44..b92c761704 100644
--- a/apps/typescriptcourse/src/components/app/navigation.tsx
+++ b/apps/typescriptcourse/src/components/app/navigation.tsx
@@ -5,7 +5,9 @@ import {useRouter} from 'next/router'
 import cx from 'classnames'
 export type NavigationProps = {title?: string}
 
-const Navigation: React.FC<NavigationProps> = ({title = 'Product'}) => {
+const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({
+  title = 'Product',
+}) => {
   return (
     <nav
       aria-label="Main Navigation"
@@ -22,7 +24,11 @@ const Navigation: React.FC<NavigationProps> = ({title = 'Product'}) => {
   )
 }
 
-const NavLink: React.FC<{href: string}> = ({href, children, ...props}) => {
+const NavLink: React.FC<React.PropsWithChildren<{href: string}>> = ({
+  href,
+  children,
+  ...props
+}) => {
   const router = useRouter()
   const isActive = router.pathname === href
 
diff --git a/apps/typescriptcourse/src/components/learn/achievements.tsx b/apps/typescriptcourse/src/components/learn/achievements.tsx
index 8f47c35ebf..66945f638d 100644
--- a/apps/typescriptcourse/src/components/learn/achievements.tsx
+++ b/apps/typescriptcourse/src/components/learn/achievements.tsx
@@ -4,9 +4,11 @@ import useAchievements from 'hooks/use-achievements'
 import Markdown from 'react-markdown'
 import Spinner from '@skillrecordings/react/dist/components/spinner'
 
-const Achievements: React.FC<{
-  purchasedBundle: SellableResource | undefined
-}> = ({purchasedBundle}) => {
+const Achievements: React.FC<
+  React.PropsWithChildren<{
+    purchasedBundle: SellableResource | undefined
+  }>
+> = ({purchasedBundle}) => {
   const {achievements} = useAchievements(purchasedBundle)
   return (
     <div className="space-y-2">
diff --git a/apps/typescriptcourse/src/components/learn/cta.tsx b/apps/typescriptcourse/src/components/learn/cta.tsx
index 2a0c076694..fafb60759d 100644
--- a/apps/typescriptcourse/src/components/learn/cta.tsx
+++ b/apps/typescriptcourse/src/components/learn/cta.tsx
@@ -5,13 +5,15 @@ import Link from 'next/link'
 import pluralize from 'pluralize'
 import Spinner from '@skillrecordings/react/dist/components/spinner'
 
-const CallToAction: React.FC<{
-  viewer: Viewer
-  nextLesson: any
-  currentModule: any
-  firstLesson: any
-  progress: any
-}> = ({viewer, firstLesson, nextLesson, progress, currentModule}) => {
+const CallToAction: React.FC<
+  React.PropsWithChildren<{
+    viewer: Viewer
+    nextLesson: any
+    currentModule: any
+    firstLesson: any
+    progress: any
+  }>
+> = ({viewer, firstLesson, nextLesson, progress, currentModule}) => {
   const {completedLessonsCount, totalLessons} = progress
   const leftToWatch = totalLessons - completedLessonsCount
   const greeting = isEmpty(viewer?.name)
diff --git a/apps/typescriptcourse/src/components/learn/module/index.tsx b/apps/typescriptcourse/src/components/learn/module/index.tsx
index 926d74c26d..851621b284 100644
--- a/apps/typescriptcourse/src/components/learn/module/index.tsx
+++ b/apps/typescriptcourse/src/components/learn/module/index.tsx
@@ -13,7 +13,12 @@ type ModuleProps = {
   i: number
 }
 
-const Module: React.FC<ModuleProps> = ({resource, items, progress, i}) => {
+const Module: React.FC<React.PropsWithChildren<ModuleProps>> = ({
+  resource,
+  items,
+  progress,
+  i,
+}) => {
   const [isExpanded, setExpanded] = React.useState(false)
   const {isModuleCompleted} = progress
   return (
diff --git a/apps/typescriptcourse/src/components/learn/module/lessons.tsx b/apps/typescriptcourse/src/components/learn/module/lessons.tsx
index 01d840cffa..f9488c29a2 100644
--- a/apps/typescriptcourse/src/components/learn/module/lessons.tsx
+++ b/apps/typescriptcourse/src/components/learn/module/lessons.tsx
@@ -4,10 +4,9 @@ import Link from 'next/link'
 import type {LessonResource} from '@skillrecordings/types'
 import {convertTimeWithTitles} from '@skillrecordings/time'
 
-const Lessons: React.FC<{items: LessonResource[]; progress: any}> = ({
-  items,
-  progress,
-}) => {
+const Lessons: React.FC<
+  React.PropsWithChildren<{items: LessonResource[]; progress: any}>
+> = ({items, progress}) => {
   const {completedLessons} = progress
 
   function isLessonCompleted(slug: string) {
diff --git a/apps/typescriptcourse/src/components/learn/module/play.tsx b/apps/typescriptcourse/src/components/learn/module/play.tsx
index 29674b40fa..29dd447a1b 100644
--- a/apps/typescriptcourse/src/components/learn/module/play.tsx
+++ b/apps/typescriptcourse/src/components/learn/module/play.tsx
@@ -3,10 +3,9 @@ import Link from 'next/link'
 import type {LessonResource} from '@skillrecordings/types'
 import find from 'lodash/find'
 
-const Play: React.FC<{items: LessonResource[]; progress: any}> = ({
-  items,
-  progress,
-}) => {
+const Play: React.FC<
+  React.PropsWithChildren<{items: LessonResource[]; progress: any}>
+> = ({items, progress}) => {
   const {isModuleInProgress, completedLessons, isModuleCompleted} = progress
 
   const buttonText = isModuleCompleted
diff --git a/apps/typescriptcourse/src/components/mdx/annotation.tsx b/apps/typescriptcourse/src/components/mdx/annotation.tsx
index 7063e04207..b979424b4b 100644
--- a/apps/typescriptcourse/src/components/mdx/annotation.tsx
+++ b/apps/typescriptcourse/src/components/mdx/annotation.tsx
@@ -10,7 +10,7 @@ type AnnotationProps = {
   className?: string
 } & RoughNotationProps
 
-const Annotation: React.FC<AnnotationProps> = ({
+const Annotation: React.FC<React.PropsWithChildren<AnnotationProps>> = ({
   type,
   children,
   className,
@@ -49,7 +49,7 @@ const Annotation: React.FC<AnnotationProps> = ({
   )
 }
 
-const SimpleAnnotation: React.FC<AnnotationProps> = ({
+const SimpleAnnotation: React.FC<React.PropsWithChildren<AnnotationProps>> = ({
   type,
   children,
   className,
diff --git a/apps/typescriptcourse/src/components/mdx/badge.tsx b/apps/typescriptcourse/src/components/mdx/badge.tsx
index 0507865529..b29cba45ff 100644
--- a/apps/typescriptcourse/src/components/mdx/badge.tsx
+++ b/apps/typescriptcourse/src/components/mdx/badge.tsx
@@ -1,10 +1,9 @@
 import React from 'react'
 import {motion, useReducedMotion} from 'framer-motion'
 
-const AnimatedBadge: React.FC<{icon?: React.ReactElement}> = ({
-  children,
-  icon,
-}) => {
+const AnimatedBadge: React.FC<
+  React.PropsWithChildren<{icon?: React.ReactElement}>
+> = ({children, icon}) => {
   const shouldReduceMotion = useReducedMotion()
   return (
     <div className="mb-2 rounded-full inline-flex items-center justify-center shadow-xl">
diff --git a/apps/typescriptcourse/src/components/mdx/grid.tsx b/apps/typescriptcourse/src/components/mdx/grid.tsx
index f7602fdf93..8e60cef03d 100644
--- a/apps/typescriptcourse/src/components/mdx/grid.tsx
+++ b/apps/typescriptcourse/src/components/mdx/grid.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import {motion, useReducedMotion} from 'framer-motion'
 import cx from 'classnames'
 
-const AnimatedGrid: React.FC<{className?: string}> = ({
+const AnimatedGrid: React.FC<React.PropsWithChildren<{className?: string}>> = ({
   children,
   className,
   ...props
diff --git a/apps/typescriptcourse/src/components/mdx/list.tsx b/apps/typescriptcourse/src/components/mdx/list.tsx
index d7aef2618f..2e729dbc48 100644
--- a/apps/typescriptcourse/src/components/mdx/list.tsx
+++ b/apps/typescriptcourse/src/components/mdx/list.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import {motion, useReducedMotion} from 'framer-motion'
 
-const AnimatedList: React.FC<{className?: string}> = ({
+const AnimatedList: React.FC<React.PropsWithChildren<{className?: string}>> = ({
   children,
   className,
   ...props
@@ -52,7 +52,7 @@ const AnimatedList: React.FC<{className?: string}> = ({
   )
 }
 
-const CheckList: React.FC<{className?: string}> = ({
+const CheckList: React.FC<React.PropsWithChildren<{className?: string}>> = ({
   children,
   className,
   ...props
diff --git a/apps/typescriptcourse/src/components/spinner.tsx b/apps/typescriptcourse/src/components/spinner.tsx
index 578718530c..50cf6e6fbe 100644
--- a/apps/typescriptcourse/src/components/spinner.tsx
+++ b/apps/typescriptcourse/src/components/spinner.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react'
 import cx from 'classnames'
 
-const Spinner: React.FunctionComponent<{
-  className?: string
-}> = ({className = '', ...rest}) => (
+const Spinner: React.FunctionComponent<
+  React.PropsWithChildren<{
+    className?: string
+  }>
+> = ({className = '', ...rest}) => (
   <svg
     className={cx('animate-spin', className)}
     xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/typescriptcourse/src/hooks/use-cio.tsx b/apps/typescriptcourse/src/hooks/use-cio.tsx
index fd08035817..59302519b4 100644
--- a/apps/typescriptcourse/src/hooks/use-cio.tsx
+++ b/apps/typescriptcourse/src/hooks/use-cio.tsx
@@ -28,7 +28,9 @@ export const CioContext = React.createContext<{
   cioIdentify: (id: string, options?: any) => void
 }>({loadingSubscriber: true, cioIdentify})
 
-export const CioProvider: React.FunctionComponent = ({children}) => {
+export const CioProvider: React.FunctionComponent<
+  React.PropsWithChildren<unknown>
+> = ({children}) => {
   const [subscriber, setSubscriber] = React.useState<CIOSubscriber>()
   const [loadingSubscriber, setLoadingSubscriber] = React.useState(true)
   React.useEffect(() => {
diff --git a/apps/typescriptcourse/src/pages/[article].tsx b/apps/typescriptcourse/src/pages/[article].tsx
index ce7839de13..6cdae04190 100644
--- a/apps/typescriptcourse/src/pages/[article].tsx
+++ b/apps/typescriptcourse/src/pages/[article].tsx
@@ -96,7 +96,10 @@ type ArticlePageProps = {
   hasSubscribed: boolean
 }
 
-const ArticlePage: React.FC<ArticlePageProps> = ({article, hasSubscribed}) => {
+const ArticlePage: React.FC<React.PropsWithChildren<ArticlePageProps>> = ({
+  article,
+  hasSubscribed,
+}) => {
   return (
     <PortableTextArticleTemplate
       article={article}
diff --git a/apps/typescriptcourse/src/pages/answer.tsx b/apps/typescriptcourse/src/pages/answer.tsx
index eb937a5c49..d352cca8f3 100644
--- a/apps/typescriptcourse/src/pages/answer.tsx
+++ b/apps/typescriptcourse/src/pages/answer.tsx
@@ -4,7 +4,9 @@ import {QuestionSet} from '@skillrecordings/types'
 import getConfig from '@skillrecordings/quiz/dist/config'
 import Layout from '../components/app/layout'
 
-const Answer: React.FC<{questionSet: QuestionSet}> = ({questionSet}) => {
+const Answer: React.FC<React.PropsWithChildren<{questionSet: QuestionSet}>> = ({
+  questionSet,
+}) => {
   return (
     <Layout noIndex meta={{title: 'Quiz'}}>
       <div className="flex flex-col items-center justify-center w-full h-full px-5 py-24">
diff --git a/apps/typescriptcourse/src/pages/articles.tsx b/apps/typescriptcourse/src/pages/articles.tsx
index 3981dfd08e..33c120fe28 100644
--- a/apps/typescriptcourse/src/pages/articles.tsx
+++ b/apps/typescriptcourse/src/pages/articles.tsx
@@ -15,7 +15,9 @@ type ArticlesProps = {
   articles: SanityDocument[]
 }
 
-const Articles: React.FC<ArticlesProps> = ({articles}) => {
+const Articles: React.FC<React.PropsWithChildren<ArticlesProps>> = ({
+  articles,
+}) => {
   return (
     <Layout meta={meta} className="relative">
       <header className="relative px-5 overflow-hidden text-white py-28 bg-noise">
diff --git a/apps/typescriptcourse/src/pages/invoice.tsx b/apps/typescriptcourse/src/pages/invoice.tsx
index c66baa74e0..5e7cd49db9 100644
--- a/apps/typescriptcourse/src/pages/invoice.tsx
+++ b/apps/typescriptcourse/src/pages/invoice.tsx
@@ -37,7 +37,9 @@ const getTotalPrice = (purchases: any) => {
   )
 }
 
-const Invoice: React.FunctionComponent = () => {
+const Invoice: React.FunctionComponent<
+  React.PropsWithChildren<unknown>
+> = () => {
   const {sitePurchases, viewer} = useViewer()
   const [invoiceInfo, setInvoiceInfo] = useLocalStorage('invoice-info', '')
   const firstPurchase = get(sitePurchases, '[0]')
diff --git a/apps/typescriptcourse/src/pages/learn.tsx b/apps/typescriptcourse/src/pages/learn.tsx
index 77143bbda7..b85efcc8a0 100644
--- a/apps/typescriptcourse/src/pages/learn.tsx
+++ b/apps/typescriptcourse/src/pages/learn.tsx
@@ -33,7 +33,9 @@ interface Props {
   }[]
 }
 
-const Learn: FunctionComponent<Props> = ({bundles}) => {
+const Learn: FunctionComponent<React.PropsWithChildren<Props>> = ({
+  bundles,
+}) => {
   const purchasedBundle = usePurchasedBundle(bundles)
   const isVerifying = useLoginRequired()
   const isVerifyingBulkPurchase = useRedirectUnclaimedBulkToInvoice()
diff --git a/apps/typescriptcourse/src/pages/login.tsx b/apps/typescriptcourse/src/pages/login.tsx
index 8a63778f53..11e6804d66 100644
--- a/apps/typescriptcourse/src/pages/login.tsx
+++ b/apps/typescriptcourse/src/pages/login.tsx
@@ -18,7 +18,7 @@ type LoginFormProps = {
   track?: any
 }
 
-const LoginForm: FunctionComponent<LoginFormProps> = ({
+const LoginForm: FunctionComponent<React.PropsWithChildren<LoginFormProps>> = ({
   className,
   children,
   button = 'Email a login link',
diff --git a/apps/typescriptcourse/src/templates/email-course.tsx b/apps/typescriptcourse/src/templates/email-course.tsx
index cbeff7a31c..a202c248cf 100644
--- a/apps/typescriptcourse/src/templates/email-course.tsx
+++ b/apps/typescriptcourse/src/templates/email-course.tsx
@@ -29,10 +29,9 @@ export type EmailCourseTemplateProps = {
   }
 }
 
-const EmailCourseTemplate: React.FC<EmailCourseTemplateProps> = ({
-  meta,
-  children,
-}) => {
+const EmailCourseTemplate: React.FC<
+  React.PropsWithChildren<EmailCourseTemplateProps>
+> = ({meta, children}) => {
   const {
     headline,
     formImage,
diff --git a/apps/typescriptcourse/src/templates/portable-text-article-template.tsx b/apps/typescriptcourse/src/templates/portable-text-article-template.tsx
index f968097725..703d26d398 100644
--- a/apps/typescriptcourse/src/templates/portable-text-article-template.tsx
+++ b/apps/typescriptcourse/src/templates/portable-text-article-template.tsx
@@ -38,10 +38,9 @@ type ArticleTemplateProps = {
   hasSubscribed: boolean
 }
 
-const PortableTextArticleTemplate: React.FC<ArticleTemplateProps> = ({
-  article,
-  hasSubscribed,
-}) => {
+const PortableTextArticleTemplate: React.FC<
+  React.PropsWithChildren<ArticleTemplateProps>
+> = ({article, hasSubscribed}) => {
   const {title, description, body, subscribersOnly, date, cta} = article
   const {subscriber, loadingSubscriber} = useConvertkit()
 
@@ -120,7 +119,9 @@ const PortableTextArticleTemplate: React.FC<ArticleTemplateProps> = ({
 
 export default PortableTextArticleTemplate
 
-const Header: React.FC<{title: string; date: string}> = ({title, date}) => {
+const Header: React.FC<
+  React.PropsWithChildren<{title: string; date: string}>
+> = ({title, date}) => {
   return (
     <header className="relative flex flex-col items-center px-5 pt-16 pb-8 overflow-hidden text-white bg-noise">
       <div className="relative z-10 flex flex-col items-center w-full max-w-screen-md mx-auto">
@@ -179,7 +180,9 @@ const SubscribeButton = () => {
   )
 }
 
-const CTAContainer: React.FC = ({children}) => {
+const CTAContainer: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   return (
     <section
       id="subscribe"
@@ -197,7 +200,7 @@ type GetCTAProps = {
   router: NextRouter
 }
 
-const getCTA: React.FC<GetCTAProps> = ({
+const getCTA: React.FC<React.PropsWithChildren<GetCTAProps>> = ({
   subscribersOnly,
   hasSubscribed,
   cta,
@@ -312,7 +315,7 @@ const ContinueReadingSubscribeForm = () => {
   )
 }
 
-const Share: React.FC<{title: string}> = ({title}) => {
+const Share: React.FC<React.PropsWithChildren<{title: string}>> = ({title}) => {
   const router = useRouter()
   const url = process.env.NEXT_PUBLIC_URL + router.asPath
   const className =
@@ -491,7 +494,7 @@ const BodyImage = ({value}: BodyImageProps) => {
   )
 }
 
-const ExternalLink: React.FC<ExternalLinkProps> = ({
+const ExternalLink: React.FC<React.PropsWithChildren<ExternalLinkProps>> = ({
   value,
   children,
   ...props
diff --git a/apps/typescriptcourse/src/templates/root.tsx b/apps/typescriptcourse/src/templates/root.tsx
index 3d9db95201..e80463fefd 100644
--- a/apps/typescriptcourse/src/templates/root.tsx
+++ b/apps/typescriptcourse/src/templates/root.tsx
@@ -14,7 +14,9 @@ import AnimatedBadge from 'components/mdx/badge'
 import toast, {Toaster} from 'react-hot-toast'
 import {Element} from 'react-scroll'
 
-const HomeTemplate: React.FC<EmailCourseTemplateProps> = ({meta, children}) => {
+const HomeTemplate: React.FC<
+  React.PropsWithChildren<EmailCourseTemplateProps>
+> = ({meta, children}) => {
   const {headline, formImage, ckFormId, formHeadline, formSubHeadline} = meta
   const router = useRouter()
 
@@ -135,6 +137,8 @@ const SubscribeButton = () => {
   )
 }
 
-const Background: React.FC<{className: string}> = ({className}) => {
+const Background: React.FC<React.PropsWithChildren<{className: string}>> = ({
+  className,
+}) => {
   return <div aria-hidden="true" className={className} />
 }
diff --git a/packages/commerce/src/components/index.tsx b/packages/commerce/src/components/index.tsx
index deced9be99..3b57f41046 100644
--- a/packages/commerce/src/components/index.tsx
+++ b/packages/commerce/src/components/index.tsx
@@ -2,7 +2,9 @@ import React from 'react'
 import {Element} from 'react-scroll'
 import Image from 'next/image'
 
-export const CommerceHeader: React.FC = ({children}) => {
+export const CommerceHeader: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   return (
     <div className="text-center px-5 sm:py-24 py-16">
       <h2 className="pb-5 pt-10 text-4xl font-extrabold tracking-tight text-text sm:text-5xl sm:leading-10 lg:text-6xl leading-tight max-w-screen-md mx-auto">
@@ -13,10 +15,12 @@ export const CommerceHeader: React.FC = ({children}) => {
   )
 }
 
-export const CommerceBundleImage: React.FC<{
-  bundle: any
-  getBundleImage: (slug: string) => JSX.Element
-}> = ({bundle, getBundleImage}) => {
+export const CommerceBundleImage: React.FC<
+  React.PropsWithChildren<{
+    bundle: any
+    getBundleImage: (slug: string) => JSX.Element
+  }>
+> = ({bundle, getBundleImage}) => {
   const bundleImage = getBundleImage(bundle.slug)
   return bundleImage ? (
     <div className="pt-10 pb-5 w-full flex items-center justify-center ">
@@ -25,10 +29,12 @@ export const CommerceBundleImage: React.FC<{
   ) : null
 }
 
-export const CommerceBundleDescription: React.FC<{
-  bundle: any
-  getBundleDescription: (slug: string) => any[]
-}> = ({bundle, getBundleDescription, children}) => {
+export const CommerceBundleDescription: React.FC<
+  React.PropsWithChildren<{
+    bundle: any
+    getBundleDescription: (slug: string) => any[]
+  }>
+> = ({bundle, getBundleDescription, children}) => {
   return (
     <div className="flex flex-col items-center">
       <ul className="pt-8 pb-2 font-semibold">
@@ -46,7 +52,9 @@ export const CommerceBundleDescription: React.FC<{
   )
 }
 
-export const CommerceBundleItemsList: React.FC<{bundle: any}> = ({bundle}) => {
+export const CommerceBundleItemsList: React.FC<
+  React.PropsWithChildren<{bundle: any}>
+> = ({bundle}) => {
   return (
     <ul>
       {bundle.items.map((item: any, i: number) => {
@@ -71,10 +79,12 @@ export const CommerceBundleItemsList: React.FC<{bundle: any}> = ({bundle}) => {
   )
 }
 
-export const CommerceBundleDetails: React.FC<{
-  bundle: any
-  getBundleStyles: (slug: string) => string
-}> = ({bundle, getBundleStyles, children}) => {
+export const CommerceBundleDetails: React.FC<
+  React.PropsWithChildren<{
+    bundle: any
+    getBundleStyles: (slug: string) => string
+  }>
+> = ({bundle, getBundleStyles, children}) => {
   return (
     <div
       key={bundle.id}
@@ -85,7 +95,9 @@ export const CommerceBundleDetails: React.FC<{
   )
 }
 
-export const CommerceBundles: React.FC = ({children}) => {
+export const CommerceBundles: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   return (
     <div className="grid md:grid-cols-2 grid-cols-1 items-start gap-5 max-w-screen-md mx-auto">
       {children}
@@ -93,10 +105,9 @@ export const CommerceBundles: React.FC = ({children}) => {
   )
 }
 
-export const CommerceContainer: React.FC<{className?: string}> = ({
-  children,
-  className,
-}) => {
+export const CommerceContainer: React.FC<
+  React.PropsWithChildren<{className?: string}>
+> = ({children, className}) => {
   return (
     <div className={className} id="buy">
       <CommerceScrollToTarget />
diff --git a/packages/commerce/src/components/upgrade-purchase.tsx b/packages/commerce/src/components/upgrade-purchase.tsx
index a1817aaf58..b10f163793 100644
--- a/packages/commerce/src/components/upgrade-purchase.tsx
+++ b/packages/commerce/src/components/upgrade-purchase.tsx
@@ -5,9 +5,11 @@ import {useViewer} from '@skillrecordings/viewer'
 import PurchaseBundle from './purchase-bundle'
 import Image from 'next/image'
 
-const UpgradePurchase: React.FC<{
-  getBundleDescription: (slug: string) => any[]
-}> = ({getBundleDescription}) => {
+const UpgradePurchase: React.FC<
+  React.PropsWithChildren<{
+    getBundleDescription: (slug: string) => any[]
+  }>
+> = ({getBundleDescription}) => {
   const {upgradeFromSellable, upgradeToSellable} = useViewer()
 
   const pppCountry = get(
diff --git a/packages/convertkit/src/forms/popup/index.tsx b/packages/convertkit/src/forms/popup/index.tsx
index dac57a1a02..be99f363a8 100644
--- a/packages/convertkit/src/forms/popup/index.tsx
+++ b/packages/convertkit/src/forms/popup/index.tsx
@@ -63,11 +63,9 @@ type PopupConvertkitFormProps = {
   subscribeFormProps?: SubscribeFormProps
 }
 
-const PopupConvertkitForm: React.FC<PopupConvertkitFormProps> = ({
-  children,
-  peakingContent,
-  subscribeFormProps,
-}) => {
+const PopupConvertkitForm: React.FC<
+  React.PropsWithChildren<PopupConvertkitFormProps>
+> = ({children, peakingContent, subscribeFormProps}) => {
   const {
     peaking,
     handleClose,
diff --git a/packages/convertkit/src/forms/subscribe-to-convertkit/index.tsx b/packages/convertkit/src/forms/subscribe-to-convertkit/index.tsx
index 5ce049c5a3..623ece0b45 100644
--- a/packages/convertkit/src/forms/subscribe-to-convertkit/index.tsx
+++ b/packages/convertkit/src/forms/subscribe-to-convertkit/index.tsx
@@ -34,7 +34,9 @@ export type SubscribeFormProps = {
  * @param rest anything else!
  * @constructor
  */
-export const SubscribeToConvertkitForm: React.FC<SubscribeFormProps> = ({
+export const SubscribeToConvertkitForm: React.FC<
+  React.PropsWithChildren<SubscribeFormProps>
+> = ({
   formId,
   submitButtonElem,
   errorMessage = <p>Something went wrong.</p>,
diff --git a/packages/convertkit/src/hooks/use-convertkit.tsx b/packages/convertkit/src/hooks/use-convertkit.tsx
index 0664f8ce7e..c07db39a98 100644
--- a/packages/convertkit/src/hooks/use-convertkit.tsx
+++ b/packages/convertkit/src/hooks/use-convertkit.tsx
@@ -28,7 +28,9 @@ const defaultConvertKitContext: ConvertkitContextType = {
 
 export const ConvertkitContext = React.createContext(defaultConvertKitContext)
 
-export const ConvertkitProvider: React.FC<{children: any}> = ({children}) => {
+export const ConvertkitProvider: React.FC<
+  React.PropsWithChildren<{children: any}>
+> = ({children}) => {
   const [subscriber, setSubscriber] = React.useState()
   const [loadingSubscriber, setLoadingSubscriber] = React.useState(true)
   React.useEffect(() => {
diff --git a/packages/create-skill-app/templates/next/src/components/layout.tsx b/packages/create-skill-app/templates/next/src/components/layout.tsx
index 453b11537e..ad3d74141f 100644
--- a/packages/create-skill-app/templates/next/src/components/layout.tsx
+++ b/packages/create-skill-app/templates/next/src/components/layout.tsx
@@ -11,7 +11,7 @@ type LayoutProps = {
   children?: any
 }
 
-const Layout: FunctionComponent<LayoutProps> = ({
+const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className,
   meta,
diff --git a/packages/create-skill-app/templates/next/src/components/primary-newsletter-cta.tsx b/packages/create-skill-app/templates/next/src/components/primary-newsletter-cta.tsx
index e093cc37a3..57c60581f0 100644
--- a/packages/create-skill-app/templates/next/src/components/primary-newsletter-cta.tsx
+++ b/packages/create-skill-app/templates/next/src/components/primary-newsletter-cta.tsx
@@ -6,7 +6,9 @@ import {
 import {useRouter} from 'next/router'
 import common from '../text/common'
 
-export const PrimaryNewsletterCta: React.FC = ({children}) => {
+export const PrimaryNewsletterCta: React.FC<
+  React.PropsWithChildren<unknown>
+> = ({children}) => {
   const router = useRouter()
   return (
     <section
diff --git a/packages/create-skill-app/templates/next/src/pages/answer.tsx b/packages/create-skill-app/templates/next/src/pages/answer.tsx
index 8eb9cce6a9..808aad3755 100644
--- a/packages/create-skill-app/templates/next/src/pages/answer.tsx
+++ b/packages/create-skill-app/templates/next/src/pages/answer.tsx
@@ -4,7 +4,9 @@ import {QuestionSet} from '@skillrecordings/types'
 import getConfig from '@skillrecordings/quiz/dist/config'
 import Layout from 'components/layout'
 
-const Answer: React.FC<{questionSet: QuestionSet}> = ({questionSet}) => {
+const Answer: React.FC<React.PropsWithChildren<{questionSet: QuestionSet}>> = ({
+  questionSet,
+}) => {
   return (
     <Layout noIndex meta={{title: 'Quiz'}}>
       <header className="flex items-center justify-center w-full sm:pt-16 sm:pb-0 pt-5 pb-5">
diff --git a/packages/player/src/components/bezel.tsx b/packages/player/src/components/bezel.tsx
index 82e92ce0ef..cf9a388b0d 100644
--- a/packages/player/src/components/bezel.tsx
+++ b/packages/player/src/components/bezel.tsx
@@ -13,7 +13,9 @@ type BezelProps = {
  * @param className
  * @constructor
  */
-export const Bezel: React.FC<BezelProps> = ({className}) => {
+export const Bezel: React.FC<React.PropsWithChildren<BezelProps>> = ({
+  className,
+}) => {
   const videoService = useVideo()
   const [count, setCount] = React.useState(0)
   const [action, setAction] = React.useState('')
diff --git a/packages/player/src/components/big-play-button.tsx b/packages/player/src/components/big-play-button.tsx
index 3acce30622..4bc2da9bc4 100644
--- a/packages/player/src/components/big-play-button.tsx
+++ b/packages/player/src/components/big-play-button.tsx
@@ -4,7 +4,7 @@ import {useVideo} from '../context/video-context'
 import {useSelector} from '@xstate/react'
 import {selectCurrentSrc, selectHasStarted} from '../selectors'
 
-export const BigPlayButton: React.FC<any> = ({
+export const BigPlayButton: React.FC<React.PropsWithChildren<any>> = ({
   className,
   position = 'center',
 }) => {
diff --git a/packages/player/src/components/code-block.tsx b/packages/player/src/components/code-block.tsx
index 544ed9deb2..13253c94a2 100644
--- a/packages/player/src/components/code-block.tsx
+++ b/packages/player/src/components/code-block.tsx
@@ -9,7 +9,10 @@ type CodeBlockProps = {
   value: string
 }
 
-const CodeBlock: FunctionComponent<CodeBlockProps> = ({language, value}) => {
+const CodeBlock: FunctionComponent<React.PropsWithChildren<CodeBlockProps>> = ({
+  language,
+  value,
+}) => {
   return value ? (
     <Highlight {...defaultProps} code={value} language={language} theme={theme}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
diff --git a/packages/player/src/components/control-bar.tsx b/packages/player/src/components/control-bar.tsx
index 98555c9be0..814027f6c0 100644
--- a/packages/player/src/components/control-bar.tsx
+++ b/packages/player/src/components/control-bar.tsx
@@ -10,7 +10,9 @@ import {FullscreenToggleControl} from './controls/fullscreen-toggle-control'
 import {SidePanelToggleControl} from './controls/side-panel-toggle-control'
 import {ClosedCaptionsMenuButtonControl} from './controls/closed-captions-menu-button-control'
 
-export const ControlBar: React.FC = ({children}) => {
+export const ControlBar: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   return (
     <div className="cueplayer-react-control-bar">
       <div className="cueplayer-react-control-bar-left-part">
diff --git a/packages/player/src/components/controls/closed-captions-menu-button-control.tsx b/packages/player/src/components/controls/closed-captions-menu-button-control.tsx
index 8dc30913b4..46566dd5a7 100644
--- a/packages/player/src/components/controls/closed-captions-menu-button-control.tsx
+++ b/packages/player/src/components/controls/closed-captions-menu-button-control.tsx
@@ -17,63 +17,62 @@ type ClosedCaptionsMenuButtonProps = {
   onChange?: (rate: TextTrack) => void
 }
 
-export const ClosedCaptionsMenuButtonControl: React.FC<ClosedCaptionsMenuButtonProps> =
-  (props) => {
-    const {subtitles, activateSubtitlesTrack, clearSubtitlesTracks} =
-      useSubtitlesTrackList()
+export const ClosedCaptionsMenuButtonControl: React.FC<
+  React.PropsWithChildren<ClosedCaptionsMenuButtonProps>
+> = (props) => {
+  const {subtitles, activateSubtitlesTrack, clearSubtitlesTracks} =
+    useSubtitlesTrackList()
 
-    const items: ListboxItem[] = [
-      ...subtitles.map((track: TextTrack) => {
-        return {
-          mode: track.mode,
-          value: track.language,
-          label: track.label,
-        }
-      }),
-      {
-        label: 'Off',
-        value: 'off',
-      },
-    ]
+  const items: ListboxItem[] = [
+    ...subtitles.map((track: TextTrack) => {
+      return {
+        mode: track.mode,
+        value: track.language,
+        label: track.label,
+      }
+    }),
+    {
+      label: 'Off',
+      value: 'off',
+    },
+  ]
 
-    const activeTrack: any = first(
-      items.filter(
-        (track: TextTrack | ListboxItem) => track.mode === 'showing',
-      ),
-    )
+  const activeTrack: any = first(
+    items.filter((track: TextTrack | ListboxItem) => track.mode === 'showing'),
+  )
 
-    const activeItem: ListboxItem = isEmpty(activeTrack)
-      ? last(items)
-      : activeTrack
+  const activeItem: ListboxItem = isEmpty(activeTrack)
+    ? last(items)
+    : activeTrack
 
-    const groups: ListboxGroup[] = [
-      {
-        label: 'Closed Captions',
-        items,
-      },
-    ]
+  const groups: ListboxGroup[] = [
+    {
+      label: 'Closed Captions',
+      items,
+    },
+  ]
 
-    const handleSelectItem = React.useCallback(
-      (index: number) => {
-        const track = subtitles[index]
-        track?.language ? activateSubtitlesTrack(track) : clearSubtitlesTracks()
-      },
-      [subtitles],
-    )
+  const handleSelectItem = React.useCallback(
+    (index: number) => {
+      const track = subtitles[index]
+      track?.language ? activateSubtitlesTrack(track) : clearSubtitlesTracks()
+    },
+    [subtitles],
+  )
 
-    return !isEmpty(subtitles) ? (
-      <div className="cueplayer-react-closed-caption">
-        <ListboxButton
-          className={cx(props.className)}
-          selectedItem={activeItem}
-          onSelectItem={handleSelectItem}
-          items={groups}
-          title={'Closed captions'}
-        >
-          <span className="cueplayer-react-control-text">
-            {activeItem.label} subtitles
-          </span>
-        </ListboxButton>
-      </div>
-    ) : null
-  }
+  return !isEmpty(subtitles) ? (
+    <div className="cueplayer-react-closed-caption">
+      <ListboxButton
+        className={cx(props.className)}
+        selectedItem={activeItem}
+        onSelectItem={handleSelectItem}
+        items={groups}
+        title={'Closed captions'}
+      >
+        <span className="cueplayer-react-control-text">
+          {activeItem.label} subtitles
+        </span>
+      </ListboxButton>
+    </div>
+  ) : null
+}
diff --git a/packages/player/src/components/controls/forward-replay-control.tsx b/packages/player/src/components/controls/forward-replay-control.tsx
index ed55f5a4b0..0b44a37f3f 100644
--- a/packages/player/src/components/controls/forward-replay-control.tsx
+++ b/packages/player/src/components/controls/forward-replay-control.tsx
@@ -8,55 +8,56 @@ type ForwardReplayControlProps = {
   className?: string
   seconds?: 5 | 10 | 30
 }
-export const ForwardReplayControl: React.FC<ForwardReplayControlProps> =
-  React.forwardRef<HTMLButtonElement, ForwardReplayControlProps>(
-    (props, ref) => {
-      const {seconds = 10, className, mode = 'forward'} = props
-      const videoService = useVideo()
-      const video = useSelector(videoService, selectVideo)
-      const classNames = [
-        'cueplayer-react-control',
-        'cueplayer-react-button',
-        'cueplayer-react-icon',
-      ]
-      classNames.push(
-        `cueplayer-react-icon-${mode}-${seconds}`,
-        `cueplayer-react-${mode}-control`,
-      )
-      if (className) {
-        classNames.push(className)
-      }
-
-      function handleClick() {
-        // Depends mode to implement different actions
-        if (!video) return
-        if (mode === 'forward') {
-          const seekingTime = video.currentTime + seconds
-          videoService.send({
-            type: 'SEEKING',
-            seekingTime:
-              seekingTime < video.duration ? seekingTime : video.duration,
-          })
-        } else {
-          const seekingTime = video.currentTime - seconds
-          videoService.send({
-            type: 'SEEKING',
-            seekingTime: seekingTime > 0 ? seekingTime : 0,
-          })
-        }
+export const ForwardReplayControl: React.FC<
+  React.PropsWithChildren<ForwardReplayControlProps>
+> = React.forwardRef<HTMLButtonElement, ForwardReplayControlProps>(
+  (props, ref) => {
+    const {seconds = 10, className, mode = 'forward'} = props
+    const videoService = useVideo()
+    const video = useSelector(videoService, selectVideo)
+    const classNames = [
+      'cueplayer-react-control',
+      'cueplayer-react-button',
+      'cueplayer-react-icon',
+    ]
+    classNames.push(
+      `cueplayer-react-icon-${mode}-${seconds}`,
+      `cueplayer-react-${mode}-control`,
+    )
+    if (className) {
+      classNames.push(className)
+    }
 
-        videoService.send('END_SEEKING')
+    function handleClick() {
+      // Depends mode to implement different actions
+      if (!video) return
+      if (mode === 'forward') {
+        const seekingTime = video.currentTime + seconds
+        videoService.send({
+          type: 'SEEKING',
+          seekingTime:
+            seekingTime < video.duration ? seekingTime : video.duration,
+        })
+      } else {
+        const seekingTime = video.currentTime - seconds
+        videoService.send({
+          type: 'SEEKING',
+          seekingTime: seekingTime > 0 ? seekingTime : 0,
+        })
       }
 
-      return (
-        <button
-          ref={ref}
-          className={classNames.join(' ')}
-          type="button"
-          onClick={handleClick}
-        >
-          <span className="cueplayer-react-control-text">{`${mode} ${seconds} seconds`}</span>
-        </button>
-      )
-    },
-  )
+      videoService.send('END_SEEKING')
+    }
+
+    return (
+      <button
+        ref={ref}
+        className={classNames.join(' ')}
+        type="button"
+        onClick={handleClick}
+      >
+        <span className="cueplayer-react-control-text">{`${mode} ${seconds} seconds`}</span>
+      </button>
+    )
+  },
+)
diff --git a/packages/player/src/components/controls/fullscreen-toggle-control.tsx b/packages/player/src/components/controls/fullscreen-toggle-control.tsx
index 5bf5c7c621..6a5a6ba25a 100644
--- a/packages/player/src/components/controls/fullscreen-toggle-control.tsx
+++ b/packages/player/src/components/controls/fullscreen-toggle-control.tsx
@@ -10,36 +10,37 @@ type FullscrenToggleProps = {
   ref?: ForwardedRef<HTMLButtonElement>
 }
 
-export const FullscreenToggleControl: React.FC<FullscrenToggleProps> =
-  React.forwardRef<HTMLButtonElement, FullscrenToggleProps>((props, ref) => {
-    const {className} = props
-    const videoService = useVideo()
-    const isFullscreen = useSelector(videoService, selectIsFullscreen)
-    const rootElem = useSelector(videoService, selectRootElem)
+export const FullscreenToggleControl: React.FC<
+  React.PropsWithChildren<FullscrenToggleProps>
+> = React.forwardRef<HTMLButtonElement, FullscrenToggleProps>((props, ref) => {
+  const {className} = props
+  const videoService = useVideo()
+  const isFullscreen = useSelector(videoService, selectIsFullscreen)
+  const rootElem = useSelector(videoService, selectRootElem)
 
-    function handleClick() {
-      isFullscreen
-        ? videoService.send({type: 'EXIT_FULLSCREEN', element: rootElem})
-        : videoService.send({type: 'TOGGLE_FULLSCREEN', element: rootElem})
-    }
-    return (
-      <button
-        className={cx(
-          className,
-          {
-            'cueplayer-react-icon-fullscreen-exit': isFullscreen,
-            'cueplayer-react-icon-fullscreen': !isFullscreen,
-          },
-          'cueplayer-react-fullscreen-control cueplayer-react-control cueplayer-react-button cueplayer-react-icon',
-        )}
-        ref={ref}
-        type="button"
-        tabIndex={0}
-        onClick={handleClick}
-      >
-        <span className="cueplayer-react-control-text">
-          {isFullscreen ? 'Exit full screen (f)' : 'Full screen (f)'}
-        </span>
-      </button>
-    )
-  })
+  function handleClick() {
+    isFullscreen
+      ? videoService.send({type: 'EXIT_FULLSCREEN', element: rootElem})
+      : videoService.send({type: 'TOGGLE_FULLSCREEN', element: rootElem})
+  }
+  return (
+    <button
+      className={cx(
+        className,
+        {
+          'cueplayer-react-icon-fullscreen-exit': isFullscreen,
+          'cueplayer-react-icon-fullscreen': !isFullscreen,
+        },
+        'cueplayer-react-fullscreen-control cueplayer-react-control cueplayer-react-button cueplayer-react-icon',
+      )}
+      ref={ref}
+      type="button"
+      tabIndex={0}
+      onClick={handleClick}
+    >
+      <span className="cueplayer-react-control-text">
+        {isFullscreen ? 'Exit full screen (f)' : 'Full screen (f)'}
+      </span>
+    </button>
+  )
+})
diff --git a/packages/player/src/components/controls/play-toggle-control.tsx b/packages/player/src/components/controls/play-toggle-control.tsx
index bb2c0fa595..a6227148b4 100644
--- a/packages/player/src/components/controls/play-toggle-control.tsx
+++ b/packages/player/src/components/controls/play-toggle-control.tsx
@@ -4,39 +4,37 @@ import cx from 'classnames'
 import {useVideo} from '../../context/video-context'
 import {selectPaused, selectHasEnded} from '../../selectors'
 
-export const PlayToggleControl: React.FC<any> = React.forwardRef<
-  HTMLButtonElement,
-  any
->(({className}, ref) => {
-  const videoService = useVideo()
-  const paused = useSelector(videoService, selectPaused)
-  const ended = useSelector(videoService, selectHasEnded)
-  const controlText = paused ? 'Play' : 'Pause'
+export const PlayToggleControl: React.FC<React.PropsWithChildren<any>> =
+  React.forwardRef<HTMLButtonElement, any>(({className}, ref) => {
+    const videoService = useVideo()
+    const paused = useSelector(videoService, selectPaused)
+    const ended = useSelector(videoService, selectHasEnded)
+    const controlText = paused ? 'Play' : 'Pause'
 
-  function handleClick() {
-    if (paused) {
-      videoService.send('PLAY')
-    } else {
-      videoService.send('PAUSE')
+    function handleClick() {
+      if (paused) {
+        videoService.send('PLAY')
+      } else {
+        videoService.send('PAUSE')
+      }
     }
-  }
 
-  return (
-    <button
-      ref={ref}
-      className={cx(className, {
-        'cueplayer-react-play-control': true,
-        'cueplayer-react-control': true,
-        'cueplayer-react-button': true,
-        'cueplayer-react-paused': paused,
-        'cueplayer-react-playing': !paused,
-        'cueplayer-react-ended': ended,
-      })}
-      type="button"
-      tabIndex={0}
-      onClick={handleClick}
-    >
-      <span className="cueplayer-react-control-text">{controlText}</span>
-    </button>
-  )
-})
+    return (
+      <button
+        ref={ref}
+        className={cx(className, {
+          'cueplayer-react-play-control': true,
+          'cueplayer-react-control': true,
+          'cueplayer-react-button': true,
+          'cueplayer-react-paused': paused,
+          'cueplayer-react-playing': !paused,
+          'cueplayer-react-ended': ended,
+        })}
+        type="button"
+        tabIndex={0}
+        onClick={handleClick}
+      >
+        <span className="cueplayer-react-control-text">{controlText}</span>
+      </button>
+    )
+  })
diff --git a/packages/player/src/components/controls/playback-rate-menu-button-control.tsx b/packages/player/src/components/controls/playback-rate-menu-button-control.tsx
index e048aa4819..343bb6c26e 100644
--- a/packages/player/src/components/controls/playback-rate-menu-button-control.tsx
+++ b/packages/player/src/components/controls/playback-rate-menu-button-control.tsx
@@ -17,73 +17,71 @@ type PlaybackRateMenuButtonProps = {
   onChange?: (rate: number) => void
 }
 
-export const PlaybackRateMenuButtonControl: React.FC<PlaybackRateMenuButtonProps> =
-  (props) => {
-    const videoService = useVideo()
-    const playbackRate = useSelector(videoService, selectPlaybackRate)
-    const {
-      rates = [2, 1.5, 1.25, 1, 0.5, 0.25],
-      selected = playbackRate,
-      onChange,
-    } = props
+export const PlaybackRateMenuButtonControl: React.FC<
+  React.PropsWithChildren<PlaybackRateMenuButtonProps>
+> = (props) => {
+  const videoService = useVideo()
+  const playbackRate = useSelector(videoService, selectPlaybackRate)
+  const {
+    rates = [2, 1.5, 1.25, 1, 0.5, 0.25],
+    selected = playbackRate,
+    onChange,
+  } = props
 
-    const items: ListboxItem[] = rates.map((rate) => ({
-      label: `${rate}×`,
-      value: `${rate}`,
-    }))
+  const items: ListboxItem[] = rates.map((rate) => ({
+    label: `${rate}×`,
+    value: `${rate}`,
+  }))
 
-    const group: ListboxGroup = {
-      label: 'Speed',
-      items,
-    }
-    const selectedItem: ListboxItem =
-      find(items, {value: selected.toString()}) || items[3]
+  const group: ListboxGroup = {
+    label: 'Speed',
+    items,
+  }
+  const selectedItem: ListboxItem =
+    find(items, {value: selected.toString()}) || items[3]
 
-    const handleSelectItem = React.useCallback(
-      (index: number) => {
-        if (index >= 0 && index < rates.length) {
-          videoService.send({
-            type: 'PLAYBACKRATE_CHANGE',
-            playbackRate: rates[index],
-          })
-          if (onChange) {
-            onChange(rates[index])
-          }
+  const handleSelectItem = React.useCallback(
+    (index: number) => {
+      if (index >= 0 && index < rates.length) {
+        videoService.send({
+          type: 'PLAYBACKRATE_CHANGE',
+          playbackRate: rates[index],
+        })
+        if (onChange) {
+          onChange(rates[index])
         }
-      },
-      [onChange, rates, videoService],
-    )
+      }
+    },
+    [onChange, rates, videoService],
+  )
 
-    React.useEffect(() => {
-      const selectedIndex =
-        rates.indexOf(selected) > -1
-          ? rates.indexOf(selected)
-          : rates.indexOf(playbackRate) || 0
+  React.useEffect(() => {
+    const selectedIndex =
+      rates.indexOf(selected) > -1
+        ? rates.indexOf(selected)
+        : rates.indexOf(playbackRate) || 0
 
-      handleSelectItem(selectedIndex)
-    }, [handleSelectItem, playbackRate, rates, selected])
+    handleSelectItem(selectedIndex)
+  }, [handleSelectItem, playbackRate, rates, selected])
 
-    const title = `${
-      playbackRate?.toString() === '1' ? 'Normal' : playbackRate
-    } playback speed`
+  const title = `${
+    playbackRate?.toString() === '1' ? 'Normal' : playbackRate
+  } playback speed`
 
-    return (
-      <div className="cueplayer-react-playback-rate">
-        <ListboxButton
-          className={cx(
-            'cueplayer-react-playback-rate-button',
-            props.className,
-          )}
-          selectedItem={selectedItem}
-          onSelectItem={handleSelectItem}
-          title={title}
-          items={[group]}
-        >
-          <span className="cueplayer-react-control-text">Playback Rate</span>
-          <div className="cueplayer-react-playback-rate-value">
-            {`${playbackRate.toFixed(2)}x`}
-          </div>
-        </ListboxButton>
-      </div>
-    )
-  }
+  return (
+    <div className="cueplayer-react-playback-rate">
+      <ListboxButton
+        className={cx('cueplayer-react-playback-rate-button', props.className)}
+        selectedItem={selectedItem}
+        onSelectItem={handleSelectItem}
+        title={title}
+        items={[group]}
+      >
+        <span className="cueplayer-react-control-text">Playback Rate</span>
+        <div className="cueplayer-react-playback-rate-value">
+          {`${playbackRate.toFixed(2)}x`}
+        </div>
+      </ListboxButton>
+    </div>
+  )
+}
diff --git a/packages/player/src/components/controls/progress-control.tsx b/packages/player/src/components/controls/progress-control.tsx
index d6028f4630..a2f609b171 100644
--- a/packages/player/src/components/controls/progress-control.tsx
+++ b/packages/player/src/components/controls/progress-control.tsx
@@ -7,7 +7,9 @@ import {useVideo} from '../../context/video-context'
 import {findElPosition, getPointerPosition} from '../../utils'
 import {selectDuration} from '../../selectors'
 
-export const ProgressControl: React.FC<any> = (props) => {
+export const ProgressControl: React.FC<React.PropsWithChildren<any>> = (
+  props,
+) => {
   const videoService = useVideo()
   const duration = useSelector(videoService, selectDuration)
   const [mouseTime, setMouseTime] = React.useState({time: 0, position: 0})
diff --git a/packages/player/src/components/controls/side-panel-toggle-control.tsx b/packages/player/src/components/controls/side-panel-toggle-control.tsx
index 2e92ab9359..3214343699 100644
--- a/packages/player/src/components/controls/side-panel-toggle-control.tsx
+++ b/packages/player/src/components/controls/side-panel-toggle-control.tsx
@@ -9,9 +9,9 @@ type SidePanelToggleProps = {
   className?: string
 }
 
-export const SidePanelToggleControl: React.FC<SidePanelToggleProps> = ({
-  className,
-}) => {
+export const SidePanelToggleControl: React.FC<
+  React.PropsWithChildren<SidePanelToggleProps>
+> = ({className}) => {
   const videoService = useVideo()
   const withSidePanel = useSelector(videoService, selectWithSidePanel)
 
diff --git a/packages/player/src/components/controls/volume-menu-button-control.tsx b/packages/player/src/components/controls/volume-menu-button-control.tsx
index cb87df0d51..0aa9209efa 100644
--- a/packages/player/src/components/controls/volume-menu-button-control.tsx
+++ b/packages/player/src/components/controls/volume-menu-button-control.tsx
@@ -5,7 +5,9 @@ import {VolumeBar} from '../volume-control/volume-bar'
 import {useVideo} from '../../context/video-context'
 import {selectMuted, selectVolume} from '../../selectors'
 
-export const VolumeMenuButtonControl: React.FC<any> = (props) => {
+export const VolumeMenuButtonControl: React.FC<React.PropsWithChildren<any>> = (
+  props,
+) => {
   const {className, alwaysShowVolume} = props
   const [isActive, setActive] = React.useState(alwaysShowVolume)
   const videoService = useVideo()
diff --git a/packages/player/src/components/core/clickable-component.tsx b/packages/player/src/components/core/clickable-component.tsx
index b67abce5e7..7e84f72297 100644
--- a/packages/player/src/components/core/clickable-component.tsx
+++ b/packages/player/src/components/core/clickable-component.tsx
@@ -13,54 +13,55 @@ type ClickableComponentProps = {
   ref: ForwardedRef<HTMLDivElement>
 }
 
-export const ClickableComponent: React.FC<ClickableComponentProps> =
-  React.forwardRef<HTMLDivElement, ClickableComponentProps>(
-    ({className, role = 'button', tabIndex = 0, ...props}, ref) => {
-      function handleKeypress(event: KeyboardEvent | Event) {
-        // Support Space (32) or Enter (13) key operation to fire a click event
-        // @ts-ignore
-        if (event.which && (event.which === 32 || event.which === 13)) {
-          event.preventDefault()
-          handleClick(event)
-        }
+export const ClickableComponent: React.FC<
+  React.PropsWithChildren<ClickableComponentProps>
+> = React.forwardRef<HTMLDivElement, ClickableComponentProps>(
+  ({className, role = 'button', tabIndex = 0, ...props}, ref) => {
+    function handleKeypress(event: KeyboardEvent | Event) {
+      // Support Space (32) or Enter (13) key operation to fire a click event
+      // @ts-ignore
+      if (event.which && (event.which === 32 || event.which === 13)) {
+        event.preventDefault()
+        handleClick(event)
       }
+    }
 
-      function handleClick(event: MouseEvent | KeyboardEvent | Event) {
-        const {onClick} = props
-        onClick(event)
+    function handleClick(event: MouseEvent | KeyboardEvent | Event) {
+      const {onClick} = props
+      onClick(event)
+    }
+
+    function handleFocus(e: FocusEvent) {
+      document.addEventListener('keydown', handleKeypress)
+      if (props.onFocus) {
+        props.onFocus(e)
       }
+    }
 
-      function handleFocus(e: FocusEvent) {
-        document.addEventListener('keydown', handleKeypress)
-        if (props.onFocus) {
-          props.onFocus(e)
-        }
+    function handleBlur(e: FocusEvent) {
+      document.removeEventListener('keydown', handleKeypress)
+      if (props.onBlur) {
+        props.onBlur(e)
       }
+    }
 
-      function handleBlur(e: FocusEvent) {
+    React.useEffect(() => {
+      return () => {
         document.removeEventListener('keydown', handleKeypress)
-        if (props.onBlur) {
-          props.onBlur(e)
-        }
       }
+    })
 
-      React.useEffect(() => {
-        return () => {
-          document.removeEventListener('keydown', handleKeypress)
-        }
-      })
-
-      return (
-        <div
-          {...props}
-          ref={ref}
-          className={cx(className)}
-          role={role}
-          tabIndex={tabIndex}
-          onClick={handleClick}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-        />
-      )
-    },
-  )
+    return (
+      <div
+        {...props}
+        ref={ref}
+        className={cx(className)}
+        role={role}
+        tabIndex={tabIndex}
+        onClick={handleClick}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      />
+    )
+  },
+)
diff --git a/packages/player/src/components/cue-bar.tsx b/packages/player/src/components/cue-bar.tsx
index 7d2d87bea8..db24bec532 100644
--- a/packages/player/src/components/cue-bar.tsx
+++ b/packages/player/src/components/cue-bar.tsx
@@ -11,7 +11,7 @@ import ReactMarkdown from 'react-markdown'
 import {useMetadataCues} from '../hooks/use-metadata-cues'
 import {convertTimeWithTitles} from '@skillrecordings/time'
 
-export const CueBar: React.FC<any> = ({
+export const CueBar: React.FC<React.PropsWithChildren<any>> = ({
   className,
   disableCompletely,
   player,
@@ -38,7 +38,11 @@ export const CueBar: React.FC<any> = ({
   )
 }
 
-const NoteCue: React.FC<any> = ({cue, duration, className}) => {
+const NoteCue: React.FC<React.PropsWithChildren<any>> = ({
+  cue,
+  duration,
+  className,
+}) => {
   const videoService = useVideo()
   const viewer = useSelector(videoService, selectViewer)
 
diff --git a/packages/player/src/components/cue-form.tsx b/packages/player/src/components/cue-form.tsx
index 7dce2d7175..1e3038bf76 100644
--- a/packages/player/src/components/cue-form.tsx
+++ b/packages/player/src/components/cue-form.tsx
@@ -8,7 +8,7 @@ import {
   selectViewer,
 } from '../selectors'
 
-export const CueForm: React.FC = () => {
+export const CueForm: React.FC<React.PropsWithChildren<unknown>> = () => {
   const videoService = useVideo()
   const formRef = React.useRef<HTMLFormElement>(null)
   const currentTime = useSelector(videoService, selectCurrentTime)
diff --git a/packages/player/src/components/hls-source.tsx b/packages/player/src/components/hls-source.tsx
index 62be78773d..1c8ef9d388 100644
--- a/packages/player/src/components/hls-source.tsx
+++ b/packages/player/src/components/hls-source.tsx
@@ -20,7 +20,7 @@ type HLSSourceProps = {
  * @param hlsConfig
  * @constructor
  */
-export const HLSSource: React.FC<HLSSourceProps> = ({
+export const HLSSource: React.FC<React.PropsWithChildren<HLSSourceProps>> = ({
   src,
   type = 'application/x-mpegURL',
   hlsConfig,
diff --git a/packages/player/src/components/listbox/listbox-button.tsx b/packages/player/src/components/listbox/listbox-button.tsx
index fddb66e594..140779705f 100644
--- a/packages/player/src/components/listbox/listbox-button.tsx
+++ b/packages/player/src/components/listbox/listbox-button.tsx
@@ -32,7 +32,7 @@ type ListboxProps = {
   title?: string
 }
 
-export const ListboxButton: React.FC<ListboxProps> = ({
+export const ListboxButton: React.FC<React.PropsWithChildren<ListboxProps>> = ({
   items,
   selectedItem,
   className,
diff --git a/packages/player/src/components/loading-spinner.tsx b/packages/player/src/components/loading-spinner.tsx
index e996d8c9fe..ff1657d1ba 100644
--- a/packages/player/src/components/loading-spinner.tsx
+++ b/packages/player/src/components/loading-spinner.tsx
@@ -8,7 +8,9 @@ type LoadingSpinnerType = {
   className?: string
 }
 
-export const LoadingSpinner: React.FC<LoadingSpinnerType> = ({className}) => {
+export const LoadingSpinner: React.FC<
+  React.PropsWithChildren<LoadingSpinnerType>
+> = ({className}) => {
   const videoService = useVideo()
   const error = useSelector(videoService, selectHasFailed)
 
diff --git a/packages/player/src/components/menu/menu-button.tsx b/packages/player/src/components/menu/menu-button.tsx
index 929f24d5eb..b8c3bd8ade 100644
--- a/packages/player/src/components/menu/menu-button.tsx
+++ b/packages/player/src/components/menu/menu-button.tsx
@@ -4,7 +4,7 @@ import {ClickableComponent} from '../core/clickable-component'
 import {Menu} from './menu'
 import {MenuItem} from './menu-item'
 
-export const MenuButton: React.FC<any> = (props) => {
+export const MenuButton: React.FC<React.PropsWithChildren<any>> = (props) => {
   const [active, setActive] = React.useState(false)
   const {selected} = props
   const [activateIndex, setActivateIndex] = React.useState(selected || 0)
diff --git a/packages/player/src/components/menu/menu-item.tsx b/packages/player/src/components/menu/menu-item.tsx
index 36278e5757..8d5a90f276 100644
--- a/packages/player/src/components/menu/menu-item.tsx
+++ b/packages/player/src/components/menu/menu-item.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import cx from 'classnames'
 
-export const MenuItem: React.FC<any> = (props) => {
+export const MenuItem: React.FC<React.PropsWithChildren<any>> = (props) => {
   const {item, index, activateIndex} = props
 
   function handleClick() {
diff --git a/packages/player/src/components/menu/menu.tsx b/packages/player/src/components/menu/menu.tsx
index 7fe0a8b209..01b9efc103 100644
--- a/packages/player/src/components/menu/menu.tsx
+++ b/packages/player/src/components/menu/menu.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import cx from 'classnames'
 import {SyntheticEvent} from 'react'
 
-export const Menu: React.FC<any> = (props) => {
+export const Menu: React.FC<React.PropsWithChildren<any>> = (props) => {
   function handleClick(event: SyntheticEvent) {
     event.preventDefault()
     // event.stopPropagation();
diff --git a/packages/player/src/components/player.tsx b/packages/player/src/components/player.tsx
index 0545733727..31e4c0be38 100644
--- a/packages/player/src/components/player.tsx
+++ b/packages/player/src/components/player.tsx
@@ -80,7 +80,9 @@ const usePlayerState = () => {
  * @param props {PlayerProps}
  * @constructor
  */
-export const Player: React.FC<PlayerProps> = (props) => {
+export const Player: React.FC<React.PropsWithChildren<PlayerProps>> = (
+  props,
+) => {
   const {
     children,
     controls,
diff --git a/packages/player/src/components/popup/popup-button.tsx b/packages/player/src/components/popup/popup-button.tsx
index 73057dc603..6bfc4b94d5 100644
--- a/packages/player/src/components/popup/popup-button.tsx
+++ b/packages/player/src/components/popup/popup-button.tsx
@@ -3,7 +3,7 @@ import {ClickableComponent} from '../core/clickable-component'
 import cx from 'classnames'
 import {Popup} from './popup'
 
-export const PopupButton: React.FC<any> = (props) => {
+export const PopupButton: React.FC<React.PropsWithChildren<any>> = (props) => {
   const {className, inline = true, children, ...ps} = props
   return (
     <ClickableComponent
diff --git a/packages/player/src/components/popup/popup.tsx b/packages/player/src/components/popup/popup.tsx
index c2628919c0..dec0206279 100644
--- a/packages/player/src/components/popup/popup.tsx
+++ b/packages/player/src/components/popup/popup.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {SyntheticEvent} from 'react'
 
-export const Popup: React.FC<any> = ({children}) => {
+export const Popup: React.FC<React.PropsWithChildren<any>> = ({children}) => {
   function handleClick(event: SyntheticEvent) {
     event.preventDefault()
     // event.stopPropagation();
diff --git a/packages/player/src/components/poster-image.tsx b/packages/player/src/components/poster-image.tsx
index e95549137f..e6b464d46a 100644
--- a/packages/player/src/components/poster-image.tsx
+++ b/packages/player/src/components/poster-image.tsx
@@ -9,7 +9,9 @@ type PosterImageType = {
   className?: string
 }
 
-export const PosterImage: React.FC<PosterImageType> = ({poster, className}) => {
+export const PosterImage: React.FC<
+  React.PropsWithChildren<PosterImageType>
+> = ({poster, className}) => {
   const videoService = useVideo()
   const hasStarted = useSelector(videoService, selectHasStarted)
   const paused = useSelector(videoService, selectIsPaused)
diff --git a/packages/player/src/components/progress-bar.tsx b/packages/player/src/components/progress-bar.tsx
index 43811f257a..fb2e39bb22 100644
--- a/packages/player/src/components/progress-bar.tsx
+++ b/packages/player/src/components/progress-bar.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import cx from 'classnames'
 import {SeekBar} from './seek-bar'
 
-export const ProgressBar: React.FC<any> = (props) => {
+export const ProgressBar: React.FC<React.PropsWithChildren<any>> = (props) => {
   return (
     <div
       className={cx(
diff --git a/packages/player/src/components/seek-bar/index.tsx b/packages/player/src/components/seek-bar/index.tsx
index 678636b4fa..955173b527 100644
--- a/packages/player/src/components/seek-bar/index.tsx
+++ b/packages/player/src/components/seek-bar/index.tsx
@@ -14,7 +14,7 @@ import {
 } from '@reach/slider'
 import {LoadProgressBar} from './load-progress-bar'
 
-export const SeekBar: React.FC<any> = (props) => {
+export const SeekBar: React.FC<React.PropsWithChildren<any>> = (props) => {
   const videoService = useVideo()
   const duration = useSelector(videoService, selectDuration)
   const currentTime = useSelector(videoService, selectCurrentTime)
diff --git a/packages/player/src/components/seek-bar/load-progress-bar.tsx b/packages/player/src/components/seek-bar/load-progress-bar.tsx
index ea6ff71fae..88f1ee5ce0 100644
--- a/packages/player/src/components/seek-bar/load-progress-bar.tsx
+++ b/packages/player/src/components/seek-bar/load-progress-bar.tsx
@@ -5,7 +5,9 @@ import {useVideo} from '../../context/video-context'
 import {selectBuffered, selectDuration} from '../../selectors'
 import {SliderMarker} from '@reach/slider'
 
-export const LoadProgressBar: React.FC<any> = ({className}) => {
+export const LoadProgressBar: React.FC<React.PropsWithChildren<any>> = ({
+  className,
+}) => {
   const videoService = useVideo()
   const duration = useSelector(videoService, selectDuration)
   const buffered = useSelector(videoService, selectBuffered)
diff --git a/packages/player/src/components/seek-bar/play-progress-bar.tsx b/packages/player/src/components/seek-bar/play-progress-bar.tsx
index e73aeb7677..a1cf5f7772 100644
--- a/packages/player/src/components/seek-bar/play-progress-bar.tsx
+++ b/packages/player/src/components/seek-bar/play-progress-bar.tsx
@@ -4,7 +4,9 @@ import cx from 'classnames'
 import {useVideo} from '../../context/video-context'
 import {selectFormattedTime, selectPercent} from '../../selectors'
 
-export const PlayProgressBar: React.FC<any> = ({className}) => {
+export const PlayProgressBar: React.FC<React.PropsWithChildren<any>> = ({
+  className,
+}) => {
   const videoService = useVideo()
   const formattedTime = useSelector(videoService, selectFormattedTime)
   const percent = `${useSelector(videoService, selectPercent) * 100}%`
diff --git a/packages/player/src/components/shortcut.tsx b/packages/player/src/components/shortcut.tsx
index 7bd1087e5c..ac4de14491 100644
--- a/packages/player/src/components/shortcut.tsx
+++ b/packages/player/src/components/shortcut.tsx
@@ -70,7 +70,7 @@ const useShortcutState = () => {
  * @param enableGlobalShortcuts
  * @constructor
  */
-export const Shortcut: React.FC<ShortcutProps> = ({
+export const Shortcut: React.FC<React.PropsWithChildren<ShortcutProps>> = ({
   clickable = true,
   dblclickable = true,
   canAddNotes = false,
diff --git a/packages/player/src/components/side-panel.tsx b/packages/player/src/components/side-panel.tsx
index 064a4638ac..cead0e16da 100644
--- a/packages/player/src/components/side-panel.tsx
+++ b/packages/player/src/components/side-panel.tsx
@@ -10,7 +10,7 @@ type SidePanelProps = {
   videoCuesList?: React.ReactNode
 }
 
-export const SidePanel: React.FC<SidePanelProps> = ({
+export const SidePanel: React.FC<React.PropsWithChildren<SidePanelProps>> = ({
   videoResourcesList,
   videoCuesList,
 }) => {
diff --git a/packages/player/src/components/time-controls/current-time-display.tsx b/packages/player/src/components/time-controls/current-time-display.tsx
index b62f2abb14..ee8a11f98a 100644
--- a/packages/player/src/components/time-controls/current-time-display.tsx
+++ b/packages/player/src/components/time-controls/current-time-display.tsx
@@ -4,7 +4,9 @@ import cx from 'classnames'
 import {useVideo} from '../../context/video-context'
 import {selectFormattedTime} from '../../selectors'
 
-export const CurrentTimeDisplay: React.FC<any> = ({className}) => {
+export const CurrentTimeDisplay: React.FC<React.PropsWithChildren<any>> = ({
+  className,
+}) => {
   const videoService = useVideo()
   const formattedTime = useSelector(videoService, selectFormattedTime)
 
diff --git a/packages/player/src/components/time-controls/duration-display.tsx b/packages/player/src/components/time-controls/duration-display.tsx
index 8a650d114d..efbb963130 100644
--- a/packages/player/src/components/time-controls/duration-display.tsx
+++ b/packages/player/src/components/time-controls/duration-display.tsx
@@ -4,7 +4,9 @@ import {useVideo} from '../../context/video-context'
 import {useSelector} from '@xstate/react'
 import {selectFormattedDuration} from '../../selectors'
 
-export const DurationDisplay: React.FC<any> = ({className}) => {
+export const DurationDisplay: React.FC<React.PropsWithChildren<any>> = ({
+  className,
+}) => {
   const videoService = useVideo()
   const formattedTime = useSelector(videoService, selectFormattedDuration)
   return (
diff --git a/packages/player/src/components/time-controls/remaining-time-display.tsx b/packages/player/src/components/time-controls/remaining-time-display.tsx
index 86e0e20891..b98f7eac07 100644
--- a/packages/player/src/components/time-controls/remaining-time-display.tsx
+++ b/packages/player/src/components/time-controls/remaining-time-display.tsx
@@ -4,7 +4,9 @@ import {useVideo} from '../../context/video-context'
 import {useSelector} from '@xstate/react'
 import {selectFormattedRemainingTime} from '../../selectors'
 
-export const RemainingTimeDisplay: React.FC<any> = ({className}) => {
+export const RemainingTimeDisplay: React.FC<React.PropsWithChildren<any>> = ({
+  className,
+}) => {
   const videoService = useVideo()
   const formattedTime = useSelector(videoService, selectFormattedRemainingTime)
 
diff --git a/packages/player/src/components/time-controls/time-divider.tsx b/packages/player/src/components/time-controls/time-divider.tsx
index 377b385490..3020356ce0 100644
--- a/packages/player/src/components/time-controls/time-divider.tsx
+++ b/packages/player/src/components/time-controls/time-divider.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react'
 import cx from 'classnames'
 
-export const TimeDivider: React.FC<any> = ({separator = '/', className}) => {
+export const TimeDivider: React.FC<React.PropsWithChildren<any>> = ({
+  separator = '/',
+  className,
+}) => {
   return (
     <div
       className={cx(
diff --git a/packages/player/src/components/video.tsx b/packages/player/src/components/video.tsx
index acc0ea5688..730d42e100 100644
--- a/packages/player/src/components/video.tsx
+++ b/packages/player/src/components/video.tsx
@@ -35,7 +35,7 @@ type VideoProps = {
  * @param className
  * @constructor
  */
-export const Video: React.FC<VideoProps> = ({
+export const Video: React.FC<React.PropsWithChildren<VideoProps>> = ({
   children,
   loop = false,
   poster,
diff --git a/packages/player/src/components/volume-control/volume-bar.tsx b/packages/player/src/components/volume-control/volume-bar.tsx
index 8f0e64bbea..a084d8b199 100644
--- a/packages/player/src/components/volume-control/volume-bar.tsx
+++ b/packages/player/src/components/volume-control/volume-bar.tsx
@@ -10,7 +10,10 @@ import {
   SliderHandle,
 } from '@reach/slider'
 
-export const VolumeBar: React.FC<any> = ({isActive, ...props}) => {
+export const VolumeBar: React.FC<React.PropsWithChildren<any>> = ({
+  isActive,
+  ...props
+}) => {
   const {className, onMouseEnter, onMouseLeave} = props
   const videoService = useVideo()
   const volume = useSelector(videoService, selectVolume)
diff --git a/packages/player/src/components/volume-control/volume-level.tsx b/packages/player/src/components/volume-control/volume-level.tsx
index e98bebd351..81f4ac2158 100644
--- a/packages/player/src/components/volume-control/volume-level.tsx
+++ b/packages/player/src/components/volume-control/volume-level.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import cx from 'classnames'
 
-export const VolumeLevel: React.FC<any> = ({
+export const VolumeLevel: React.FC<React.PropsWithChildren<any>> = ({
   vertical = false,
   percentage = '100%',
   className,
diff --git a/packages/player/src/context/video-context.tsx b/packages/player/src/context/video-context.tsx
index 26e0b86e64..7ffb2194d5 100644
--- a/packages/player/src/context/video-context.tsx
+++ b/packages/player/src/context/video-context.tsx
@@ -29,11 +29,13 @@ export const useVideo = () => {
  *
  * @see {@link https://dev.to/mpocock1/how-to-manage-global-state-with-xstate-and-react-3if5}
  */
-export const VideoProvider: React.FC<{
-  actions?: any
-  services?: any
-  guards?: any
-}> = ({actions = {}, services = {}, guards = {}, children}) => {
+export const VideoProvider: React.FC<
+  React.PropsWithChildren<{
+    actions?: any
+    services?: any
+    guards?: any
+  }>
+> = ({actions = {}, services = {}, guards = {}, children}) => {
   const videoService = useInterpret(videoMachine, {
     actions: {...defaultActions, ...actions},
     services,
diff --git a/packages/player/src/hooks/use-cue.ts b/packages/player/src/hooks/use-cue.ts
index bef941fc9a..17ad6a3c9d 100644
--- a/packages/player/src/hooks/use-cue.ts
+++ b/packages/player/src/hooks/use-cue.ts
@@ -4,7 +4,7 @@ import {useVideo} from '../context/video-context'
 export const useCue = (cue: VTTCue) => {
   const videoService = useVideo()
   const setActive = React.useCallback(
-    function setActive(active) {
+    function setActive(active: any) {
       if (active) {
         videoService.send({type: 'ACTIVATE_CUE', cue})
       } else {
diff --git a/packages/quiz/src/components/markdown.tsx b/packages/quiz/src/components/markdown.tsx
index 2327a9e438..52ac52f29c 100644
--- a/packages/quiz/src/components/markdown.tsx
+++ b/packages/quiz/src/components/markdown.tsx
@@ -4,11 +4,9 @@ import SyntaxHighlighter, {
   SyntaxHighlighterProps,
 } from 'react-syntax-highlighter'
 
-const Markdown: React.FC<{children: any; syntaxHighlighterTheme: any}> = ({
-  children,
-  syntaxHighlighterTheme,
-  ...props
-}) => {
+const Markdown: React.FC<
+  React.PropsWithChildren<{children: any; syntaxHighlighterTheme: any}>
+> = ({children, syntaxHighlighterTheme, ...props}) => {
   return (
     <ReactMarkdown
       components={{
diff --git a/packages/quiz/src/components/question/code.tsx b/packages/quiz/src/components/question/code.tsx
index 5626462d73..f5e62213cb 100644
--- a/packages/quiz/src/components/question/code.tsx
+++ b/packages/quiz/src/components/question/code.tsx
@@ -10,9 +10,11 @@ import {
   QuestionCode,
 } from './index'
 
-const CodeSandbox: React.FC<{
-  question: QuestionProps
-}> = ({question}) => {
+const CodeSandbox: React.FC<
+  React.PropsWithChildren<{
+    question: QuestionProps
+  }>
+> = ({question}) => {
   return (
     <Question {...question}>
       <QuestionHeader />
diff --git a/packages/quiz/src/components/question/essay.tsx b/packages/quiz/src/components/question/essay.tsx
index f299eb6501..520da7c171 100644
--- a/packages/quiz/src/components/question/essay.tsx
+++ b/packages/quiz/src/components/question/essay.tsx
@@ -10,9 +10,11 @@ import {
   QuestionInput,
 } from './index'
 
-const Essay: React.FC<{
-  question: QuestionProps
-}> = ({question}) => {
+const Essay: React.FC<
+  React.PropsWithChildren<{
+    question: QuestionProps
+  }>
+> = ({question}) => {
   return (
     <Question {...question}>
       <QuestionHeader />
diff --git a/packages/quiz/src/components/question/multiple-choice.tsx b/packages/quiz/src/components/question/multiple-choice.tsx
index edaef45c38..1ade73b3ec 100644
--- a/packages/quiz/src/components/question/multiple-choice.tsx
+++ b/packages/quiz/src/components/question/multiple-choice.tsx
@@ -10,9 +10,11 @@ import {
   QuestionProps,
 } from './index'
 
-const MultipleChoice: React.FC<{
-  question: QuestionProps
-}> = ({question}) => {
+const MultipleChoice: React.FC<
+  React.PropsWithChildren<{
+    question: QuestionProps
+  }>
+> = ({question}) => {
   return (
     <Question {...question}>
       <QuestionHeader />
diff --git a/packages/quiz/src/components/question/multiple-image-choice.tsx b/packages/quiz/src/components/question/multiple-image-choice.tsx
index 2327c983fa..01895342c7 100644
--- a/packages/quiz/src/components/question/multiple-image-choice.tsx
+++ b/packages/quiz/src/components/question/multiple-image-choice.tsx
@@ -10,9 +10,11 @@ import {
   QuestionProps,
 } from './index'
 
-const MultipleImageChoice: React.FC<{
-  question: QuestionProps
-}> = ({question}) => {
+const MultipleImageChoice: React.FC<
+  React.PropsWithChildren<{
+    question: QuestionProps
+  }>
+> = ({question}) => {
   return (
     <Question {...question}>
       <QuestionHeader />
diff --git a/packages/quiz/src/pages/answer.tsx b/packages/quiz/src/pages/answer.tsx
index 75fe8844ee..20270becf9 100644
--- a/packages/quiz/src/pages/answer.tsx
+++ b/packages/quiz/src/pages/answer.tsx
@@ -13,7 +13,7 @@ type AnswerProps = {
   syntaxHighlighterTheme?: any
 }
 
-const Answer: React.FC<AnswerProps> = ({
+const Answer: React.FC<React.PropsWithChildren<AnswerProps>> = ({
   config,
   questionSet,
   syntaxHighlighterTheme,
@@ -100,7 +100,9 @@ export const sampleQuestions: QuestionSet = {
   },
 }
 
-const DevTools: React.FC<{questionSet: QuestionSet}> = ({questionSet}) => {
+const DevTools: React.FC<
+  React.PropsWithChildren<{questionSet: QuestionSet}>
+> = ({questionSet}) => {
   const [hidden, setHidden] = React.useState(false)
   const router = useRouter()
   if (process.env.NODE_ENV !== 'development' || hidden) {
diff --git a/packages/react/src/components/button/index.tsx b/packages/react/src/components/button/index.tsx
index c725955bf0..2731052a78 100644
--- a/packages/react/src/components/button/index.tsx
+++ b/packages/react/src/components/button/index.tsx
@@ -29,7 +29,9 @@ type ButtonContentProps = Pick<
   'leftIcon' | 'rightIcon' | 'children'
 >
 
-const ButtonContent: React.FC<ButtonContentProps> = (props) => {
+const ButtonContent: React.FC<React.PropsWithChildren<ButtonContentProps>> = (
+  props,
+) => {
   const {leftIcon, rightIcon, children} = props
   return (
     <>
@@ -40,7 +42,9 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
   )
 }
 
-const ButtonIcon: React.FC<JSX.IntrinsicElements['span']> = (props) => {
+const ButtonIcon: React.FC<
+  React.PropsWithChildren<JSX.IntrinsicElements['span']>
+> = (props) => {
   const {children, ...rest} = props
 
   const _children = React.isValidElement(children)
@@ -57,7 +61,7 @@ const ButtonIcon: React.FC<JSX.IntrinsicElements['span']> = (props) => {
   )
 }
 
-const Button: React.FC<ButtonProps> = ({
+const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({
   children,
   isLoading,
   isDisabled,
diff --git a/packages/react/src/components/code-block.tsx b/packages/react/src/components/code-block.tsx
index 544ed9deb2..13253c94a2 100644
--- a/packages/react/src/components/code-block.tsx
+++ b/packages/react/src/components/code-block.tsx
@@ -9,7 +9,10 @@ type CodeBlockProps = {
   value: string
 }
 
-const CodeBlock: FunctionComponent<CodeBlockProps> = ({language, value}) => {
+const CodeBlock: FunctionComponent<React.PropsWithChildren<CodeBlockProps>> = ({
+  language,
+  value,
+}) => {
   return value ? (
     <Highlight {...defaultProps} code={value} language={language} theme={theme}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
diff --git a/packages/react/src/components/footer.tsx b/packages/react/src/components/footer.tsx
index d8931ab3e8..23f2726da8 100644
--- a/packages/react/src/components/footer.tsx
+++ b/packages/react/src/components/footer.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 
 export type FooterProps = {}
 
-const Footer: React.FC<FooterProps> = () => {
+const Footer: React.FC<React.PropsWithChildren<FooterProps>> = () => {
   return <footer className="pt-24 print:hidden">©</footer>
 }
 
diff --git a/packages/react/src/components/input/index.tsx b/packages/react/src/components/input/index.tsx
index 3ca0a54ad5..e43556e215 100644
--- a/packages/react/src/components/input/index.tsx
+++ b/packages/react/src/components/input/index.tsx
@@ -8,10 +8,9 @@ type InputProps = InputHTMLAttributes<HTMLInputElement> &
     label: string
   }
 
-const Label: React.FC<LabelHTMLAttributes<HTMLLabelElement>> = ({
-  children,
-  ...rest
-}) => {
+const Label: React.FC<
+  React.PropsWithChildren<LabelHTMLAttributes<HTMLLabelElement>>
+> = ({children, ...rest}) => {
   return (
     <label data-sr-input-label {...rest}>
       {children}
@@ -19,7 +18,12 @@ const Label: React.FC<LabelHTMLAttributes<HTMLLabelElement>> = ({
   )
 }
 
-const Input: React.FC<InputProps> = ({name, label, id, ...rest}) => {
+const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
+  name,
+  label,
+  id,
+  ...rest
+}) => {
   const {required} = rest
 
   return (
diff --git a/packages/react/src/components/navigation.tsx b/packages/react/src/components/navigation.tsx
index c24e6de1cc..5fc602db23 100644
--- a/packages/react/src/components/navigation.tsx
+++ b/packages/react/src/components/navigation.tsx
@@ -4,7 +4,9 @@ import {useViewer} from '@skillrecordings/viewer'
 
 export type NavigationProps = {title?: string}
 
-const Navigation: React.FC<NavigationProps> = ({title = 'Product'}) => {
+const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({
+  title = 'Product',
+}) => {
   const {isAuthenticated, logout} = useViewer()
   return (
     <nav className="w-full flex items-center justify-between print:hidden">
diff --git a/packages/react/src/components/share-links.tsx b/packages/react/src/components/share-links.tsx
index 06cd3ce363..345bea2094 100644
--- a/packages/react/src/components/share-links.tsx
+++ b/packages/react/src/components/share-links.tsx
@@ -134,7 +134,7 @@ const icons = {
 const defaultStyle =
   'rounded-lg bg-gray-400 bg-opacity-10 hover:bg-opacity-20 transition-all ease-in-out duration-200 flex items-center justify-center p-3 m-1'
 
-const Twitter: React.FC<ShareLinkProps> = ({
+const Twitter: React.FC<React.PropsWithChildren<ShareLinkProps>> = ({
   link,
   message,
   className = defaultStyle,
@@ -151,7 +151,7 @@ const Twitter: React.FC<ShareLinkProps> = ({
   </a>
 )
 
-const Facebook: React.FC<ShareLinkProps> = ({
+const Facebook: React.FC<React.PropsWithChildren<ShareLinkProps>> = ({
   link,
   className = defaultStyle,
   children,
@@ -167,7 +167,7 @@ const Facebook: React.FC<ShareLinkProps> = ({
   </a>
 )
 
-const Reddit: React.FC<ShareLinkProps> = ({
+const Reddit: React.FC<React.PropsWithChildren<ShareLinkProps>> = ({
   link,
   message,
   className = defaultStyle,
@@ -184,7 +184,9 @@ const Reddit: React.FC<ShareLinkProps> = ({
   </a>
 )
 
-const CopyToClipboard: React.FC<ShareLinkProps & {onSuccess: () => void}> = ({
+const CopyToClipboard: React.FC<
+  React.PropsWithChildren<ShareLinkProps & {onSuccess: () => void}>
+> = ({
   link,
   onSuccess,
   className = defaultStyle + ' relative text-xs',
@@ -209,7 +211,7 @@ const CopyToClipboard: React.FC<ShareLinkProps & {onSuccess: () => void}> = ({
   )
 }
 
-const LinkedIn: React.FC<ShareLinkProps> = ({
+const LinkedIn: React.FC<React.PropsWithChildren<ShareLinkProps>> = ({
   link,
   className = defaultStyle,
   children,
@@ -225,7 +227,7 @@ const LinkedIn: React.FC<ShareLinkProps> = ({
   </a>
 )
 
-const Hacker: React.FC<ShareLinkProps> = ({
+const Hacker: React.FC<React.PropsWithChildren<ShareLinkProps>> = ({
   link,
   message,
   className = defaultStyle,
diff --git a/packages/react/src/components/spinner.tsx b/packages/react/src/components/spinner.tsx
index 9ca81f1122..1639450445 100644
--- a/packages/react/src/components/spinner.tsx
+++ b/packages/react/src/components/spinner.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react'
 
-const Spinner: React.FunctionComponent<{
-  className?: string
-  size?: number
-  color?: string
-}> = ({className = '', size = 6}) => (
+const Spinner: React.FunctionComponent<
+  React.PropsWithChildren<{
+    className?: string
+    size?: number
+    color?: string
+  }>
+> = ({className = '', size = 6}) => (
   <svg
     className={`animate-spin h-${size} w-${size} ${className}`}
     xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/react/src/layouts/index.tsx b/packages/react/src/layouts/index.tsx
index f17684cd84..3debed1486 100644
--- a/packages/react/src/layouts/index.tsx
+++ b/packages/react/src/layouts/index.tsx
@@ -8,11 +8,11 @@ export type LayoutProps = {
   noIndex?: boolean
   className?: string
   showNavigation?: boolean
-  Navigation?: React.FC<NavigationProps>
-  Footer?: React.FC<FooterProps>
+  Navigation?: React.FC<React.PropsWithChildren<NavigationProps>>
+  Footer?: React.FC<React.PropsWithChildren<FooterProps>>
 }
 
-const Layout: React.FC<LayoutProps> = ({
+const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
   children,
   className = 'p-5 flex flex-col min-h-screen',
   meta,
diff --git a/packages/viewer/src/contexts/viewer-context.tsx b/packages/viewer/src/contexts/viewer-context.tsx
index ffe6f9443c..8f70e81b32 100644
--- a/packages/viewer/src/contexts/viewer-context.tsx
+++ b/packages/viewer/src/contexts/viewer-context.tsx
@@ -106,7 +106,9 @@ function useAuthedViewer() {
   return values
 }
 
-export const ViewerProvider: FunctionComponent = ({children}) => {
+export const ViewerProvider: FunctionComponent<
+  React.PropsWithChildren<unknown>
+> = ({children}) => {
   const values = useAuthedViewer()
 
   return (

From ebb7906f2689fd9606550b9407e33ff226e984f1 Mon Sep 17 00:00:00 2001
From: Joel Hooks <joelhooks@gmail.com>
Date: Thu, 28 Jul 2022 22:26:29 -0700
Subject: [PATCH 2/7] chore(quiz): update sandpack

---
 packages/quiz/package.json                    |   3 +-
 .../quiz/src/components/question/index.tsx    |  32 +-
 packages/quiz/src/styles/index.scss           |   1 -
 pnpm-lock.yaml                                | 443 ++++++++++--------
 4 files changed, 262 insertions(+), 217 deletions(-)

diff --git a/packages/quiz/package.json b/packages/quiz/package.json
index fb435f13f3..3cfd64d008 100644
--- a/packages/quiz/package.json
+++ b/packages/quiz/package.json
@@ -22,7 +22,8 @@
   },
   "dependencies": {
     "@accessible/use-conditional-focus": "^3.0.1",
-    "@codesandbox/sandpack-react": "^0.1.15",
+    "@codesandbox/sandpack-react": "^1.3.1",
+    "@codesandbox/sandpack-themes": "^1.0.0",
     "@reach/auto-id": "^0.16.0",
     "@reach/utils": "^0.16.0",
     "@skillrecordings/analytics": "workspace:*",
diff --git a/packages/quiz/src/components/question/index.tsx b/packages/quiz/src/components/question/index.tsx
index e134d69a45..66466444ad 100644
--- a/packages/quiz/src/components/question/index.tsx
+++ b/packages/quiz/src/components/question/index.tsx
@@ -13,9 +13,11 @@ import {
   SandpackProvider,
   SandpackLayout,
   SandpackCodeEditor,
-  useCodeSandboxLink,
+  SandpackFiles,
 } from '@codesandbox/sandpack-react'
 
+import {nightOwl} from '@codesandbox/sandpack-themes'
+
 const QuestionContext = createNamedContext<InternalQuestionContextValue>(
   'QuestionContext',
   {} as InternalQuestionContextValue,
@@ -208,16 +210,14 @@ const QuestionCodeSandbox = React.forwardRef(function QuestionCodeSandbox(
 ) {
   const {formik} = React.useContext(QuestionContext)
 
-  const codeSandboxUrl = useCodeSandboxLink()
-
   React.useEffect(() => {
-    formik.setValues({answer: codeSandboxUrl})
-  }, [codeSandboxUrl])
+    formik.setValues({answer: 'NA'})
+  }, [])
 
   return (
     <Comp {...props} ref={forwardRef} data-sr-quiz-question-input="">
-      <SandpackLayout theme="night-owl">
-        <SandpackCodeEditor customStyle={{height: 400}} />
+      <SandpackLayout>
+        <SandpackCodeEditor style={{height: 400}} />
       </SandpackLayout>
     </Comp>
   )
@@ -231,20 +231,24 @@ const QuestionCode = React.forwardRef(function QuestionCode(
 ) {
   const {currentQuestion} = React.useContext(QuestionContext)
 
+  const files: SandpackFiles | undefined =
+    currentQuestion.code?.reduce<SandpackFiles>(
+      (a, v) => ({
+        ...a,
+        [`/${v.filename}`]: {code: v.code, active: v.active},
+      }),
+      {},
+    )
+
   return (
     <Comp {...props} ref={forwardRef} data-sr-quiz-question-input="">
       {currentQuestion.type === 'code' && currentQuestion.code ? (
         <SandpackProvider
           customSetup={{
             entry: `/${currentQuestion.code[0].filename}`,
-            files: currentQuestion.code?.reduce(
-              (a, v) => ({
-                ...a,
-                [v.filename]: {code: v.code, active: v.active},
-              }),
-              {},
-            ),
           }}
+          theme={nightOwl}
+          files={files}
         >
           {children}
           <QuestionCodeSandbox />
diff --git a/packages/quiz/src/styles/index.scss b/packages/quiz/src/styles/index.scss
index 74143a0b49..3e7ebc990a 100644
--- a/packages/quiz/src/styles/index.scss
+++ b/packages/quiz/src/styles/index.scss
@@ -1,4 +1,3 @@
-@import '@codesandbox/sandpack-react/dist/index.css';
 
 /* ——— QUIZ ——— */
 [data-sr-quiz] {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b1c1476d78..308cac6a7e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3136,7 +3136,8 @@ importers:
   packages/quiz:
     specifiers:
       '@accessible/use-conditional-focus': ^3.0.1
-      '@codesandbox/sandpack-react': ^0.1.15
+      '@codesandbox/sandpack-react': ^1.3.1
+      '@codesandbox/sandpack-themes': ^1.0.0
       '@reach/auto-id': ^0.16.0
       '@reach/utils': ^0.16.0
       '@skillrecordings/analytics': workspace:*
@@ -3182,7 +3183,8 @@ importers:
       yup: ^0.32.11
     dependencies:
       '@accessible/use-conditional-focus': 3.0.1_react@17.0.2
-      '@codesandbox/sandpack-react': 0.1.15_sfoxds7t5ydpegc3knd667wn6m
+      '@codesandbox/sandpack-react': 1.3.1_sfoxds7t5ydpegc3knd667wn6m
+      '@codesandbox/sandpack-themes': 1.0.0
       '@reach/auto-id': 0.16.0_sfoxds7t5ydpegc3knd667wn6m
       '@reach/utils': 0.16.0_sfoxds7t5ydpegc3knd667wn6m
       '@skillrecordings/analytics': link:../analytics
@@ -6939,208 +6941,242 @@ packages:
       react: 17.0.2
     dev: false
 
-  /@codemirror/autocomplete/0.18.8:
-    resolution: {integrity: sha512-Va1Q763Vu/rVmIazru/ZnO2kkWVq6SlmMEjeD0qmxLAypyP6j/QNdpmaPDI1qb/+Mb9VFZBbac6a0aLTTi8qxQ==}
+  /@codemirror/autocomplete/0.19.15:
+    resolution: {integrity: sha512-GQWzvvuXxNUyaEk+5gawbAD8s51/v2Chb++nx0e2eGWrphWk42isBtzOMdc3DxrxrZtPZ55q2ldNp+6G8KJLIQ==}
     dependencies:
-      '@codemirror/language': 0.18.2
-      '@codemirror/state': 0.18.7
-      '@codemirror/text': 0.18.1
-      '@codemirror/tooltip': 0.18.4
-      '@codemirror/view': 0.18.19
-      lezer-tree: 0.13.2
+      '@codemirror/language': 0.19.10
+      '@codemirror/state': 0.19.9
+      '@codemirror/text': 0.19.6
+      '@codemirror/tooltip': 0.19.16
+      '@codemirror/view': 0.19.48
+      '@lezer/common': 0.15.12
     dev: false
 
-  /@codemirror/closebrackets/0.18.0:
-    resolution: {integrity: sha512-O1RAgUkzF4nq/B8IyXenZKZ1rJi2Mc7I6y4IhWhELiTnjyQy7YdAthTsJ40mNr8kZ6gRbasYe3K7TraITElZJA==}
+  /@codemirror/closebrackets/0.19.2:
+    resolution: {integrity: sha512-ClMPzPcPP0eQiDcVjtVPl6OLxgdtZSYDazsvT0AKl70V1OJva0eHgl4/6kCW3RZ0pb2n34i9nJz4eXCmK+TYDA==}
+    deprecated: As of 0.20.0, this package has been merged into @codemirror/autocomplete
     dependencies:
-      '@codemirror/language': 0.18.2
-      '@codemirror/rangeset': 0.18.5
-      '@codemirror/state': 0.18.7
-      '@codemirror/text': 0.18.1
-      '@codemirror/view': 0.18.19
+      '@codemirror/language': 0.19.10
+      '@codemirror/rangeset': 0.19.9
+      '@codemirror/state': 0.19.9
+      '@codemirror/text': 0.19.6
+      '@codemirror/view': 0.19.48
     dev: false
 
-  /@codemirror/commands/0.18.3:
-    resolution: {integrity: sha512-nHYDG13qOirioXTAKmjl10W2L0eZ1ftvmTwvUTNY27UWVBPFSpk5zDXP3WqJ0mgMhQ4AOFLJaTjJEO3hmPComg==}
+  /@codemirror/commands/0.19.8:
+    resolution: {integrity: sha512-65LIMSGUGGpY3oH6mzV46YWRrgao6NmfJ+AuC7jNz3K5NPnH6GCV1H5I6SwOFyVbkiygGyd0EFwrWqywTBD1aw==}
     dependencies:
-      '@codemirror/language': 0.18.2
-      '@codemirror/matchbrackets': 0.18.0
-      '@codemirror/state': 0.18.7
-      '@codemirror/text': 0.18.1
-      '@codemirror/view': 0.18.19
-      lezer-tree: 0.13.2
+      '@codemirror/language': 0.19.10
+      '@codemirror/matchbrackets': 0.19.4
+      '@codemirror/state': 0.19.9
+      '@codemirror/text': 0.19.6
+      '@codemirror/view': 0.19.48
+      '@lezer/common': 0.15.12
     dev: false
 
-  /@codemirror/comment/0.18.1:
-    resolution: {integrity: sha512-Inhqs0F24WE28Fcp1dBZghwixBGv1HDwY9MjE0d5tpMY/IPGI6uT30fGyHAXrir6hUqk7eJRkO4UYnODGOnoIA==}
+  /@codemirror/comment/0.19.1:
+    resolution: {integrity: sha512-uGKteBuVWAC6fW+Yt8u27DOnXMT/xV4Ekk2Z5mRsiADCZDqYvryrJd6PLL5+8t64BVyocwQwNfz1UswYS2CtFQ==}
+    deprecated: As of 0.20.0, this package has been merged into @codemirror/commands
     dependencies:
-      '@codemirror/state': 0.18.7
-      '@codemirror/text': 0.18.1
-      '@codemirror/view': 0.18.19
+      '@codemirror/state': 0.19.9
+      '@codemirror/text': 0.19.6
+      '@codemirror/view': 0.19.48
     dev: false
 
-  /@codemirror/gutter/0.18.4:
-    resolution: {integrity: sha512-Sf2IWshMi9zwVVqpGmd2NRplY0qfrE2IiBEII9n2gB9M8hgIMg5GCyhdnsUDsOm0gcSut65W62vV7/DfYJHQCA==}
+  /@codemirror/gutter/0.19.9:
+    resolution: {integrity: sha512-PFrtmilahin1g6uL27aG5tM/rqR9DZzZYZsIrCXA5Uc2OFTFqx4owuhoU9hqfYxHp5ovfvBwQ+txFzqS4vog6Q==}
+    deprecated: As of 0.20.0, this package has been merged into @codemirror/view
     dependencies:
-      '@codemirror/rangeset': 0.18.5
-      '@codemirror/state': 0.18.7
-      '@codemirror/view': 0.18.19
+      '@codemirror/rangeset': 0.19.9
+      '@codemirror/state': 0.19.9
+      '@codemirror/view': 0.19.48
     dev: false
 
-  /@codemirror/highlight/0.18.4:
-    resolution: {integrity: sha512-3azJntqWrShOIq/0kVcdMc9k7ACL0LQErgK+A6aWXmCj5Mx0gShq+Iajy8AMQ2zB0v3nhCBgFaniL1LLD5m5hQ==}
+  /@codemirror/highlight/0.19.8:
+    resolution: {integrity: sha512-v/lzuHjrYR8MN2mEJcUD6fHSTXXli9C1XGYpr+ElV6fLBIUhMTNKR3qThp611xuWfXfwDxeL7ppcbkM/MzPV3A==}
+    deprecated: As of 0.20.0, this package has been split between @lezer/highlight and @codemirror/language
     dependencies:
-      '@codemirror/language': 0.18.2
-      '@codemirror/rangeset': 0.18.5
-      '@codemirror/state': 0.18.7
-      '@codemirror/view': 0.18.19
-      lezer-tree: 0.13.2
+      '@codemirror/language': 0.19.10
+      '@codemirror/rangeset': 0.19.9
+      '@codemirror/state': 0.19.9
+      '@codemirror/view': 0.19.48
+      '@lezer/common': 0.15.12
       style-mod: 4.0.0
     dev: false
 
-  /@codemirror/history/0.18.1:
-    resolution: {integrity: sha512-Aad3p4zs6UYKCUMXYjh7cvPK0ajuL+rMib9yBZ61w81LLl6OkM31Xrn9J6CLJmPxCwP3OJFiqBmNSBQ05oIsTw==}
+  /@codemirror/history/0.19.2:
+    resolution: {integrity: sha512-unhP4t3N2smzmHoo/Yio6ueWi+il8gm9VKrvi6wlcdGH5fOfVDNkmjHQ495SiR+EdOG35+3iNebSPYww0vN7ow==}
+    deprecated: As of 0.20.0, this package has been merged into @codemirror/commands
     dependencies:
-      '@codemirror/state': 0.18.7
-      '@codemirror/view': 0.18.19
+      '@codemirror/state': 0.19.9
+      '@codemirror/view': 0.19.48
     dev: false
 
-  /@codemirror/lang-css/0.18.0:
-    resolution: {integrity: sha512-kkU4Ug387eJoCTDDkMbXrcPBMiJ0lFWbvDaFHIuJtrMgDXJzSQ/ehx6Ife5PUBfuLU/x1JQUBdmXhW1TJzfHug==}
+  /@codemirror/lang-css/0.19.3:
+    resolution: {integrity: sha512-tyCUJR42/UlfOPLb94/p7dN+IPsYSIzHbAHP2KQHANj0I+Orqp+IyIOS++M8TuCX4zkWh9dvi8s92yy/Tn8Ifg==}
     dependencies:
-      '@codemirror/autocomplete': 0.18.8
-      '@codemirror/highlight': 0.18.4
-      '@codemirror/language': 0.18.2
-      '@codemirror/state': 0.18.7
-      lezer-css: 0.13.1
+      '@codemirror/autocomplete': 0.19.15
+      '@codemirror/highlight': 0.19.8
+      '@codemirror/language': 0.19.10
+      '@codemirror/state': 0.19.9
+      '@lezer/css': 0.15.2
     dev: false
 
-  /@codemirror/lang-html/0.18.1:
-    resolution: {integrity: sha512-NF/QkSiGiDQGF99x/gcr1oybLQRqspQ+N8HH1SSihkKjmrQBOi7yZ4jUHAmmDEU43ujDqueGZfdqg0WhyOx2CA==}
+  /@codemirror/lang-html/0.19.4:
+    resolution: {integrity: sha512-GpiEikNuCBeFnS+/TJSeanwqaOfNm8Kkp9WpVNEPZCLyW1mAMCuFJu/3xlWYeWc778Hc3vJqGn3bn+cLNubgCA==}
     dependencies:
-      '@codemirror/autocomplete': 0.18.8
-      '@codemirror/highlight': 0.18.4
-      '@codemirror/lang-css': 0.18.0
-      '@codemirror/lang-javascript': 0.18.0
-      '@codemirror/language': 0.18.2
-      '@codemirror/state': 0.18.7
-      lezer-html: 0.13.6
-      lezer-tree: 0.13.2
+      '@codemirror/autocomplete': 0.19.15
+      '@codemirror/highlight': 0.19.8
+      '@codemirror/lang-css': 0.19.3
+      '@codemirror/lang-javascript': 0.19.7
+      '@codemirror/language': 0.19.10
+      '@codemirror/state': 0.19.9
+      '@lezer/common': 0.15.12
+      '@lezer/html': 0.15.1
     dev: false
 
-  /@codemirror/lang-javascript/0.18.0:
-    resolution: {integrity: sha512-4KOkwXED9v39c17pIWoy+WKrNAYaKnAR/RRF8QZIqpuYjnMwGTe7GxMKKdq7E557fGzCVr7m34Qy7Gkhr5B41g==}
+  /@codemirror/lang-javascript/0.19.7:
+    resolution: {integrity: sha512-DL9f3JLqOEHH9cIwEqqjnP5bkjdVXeECksLtV+/MbPm+l4H+AG+PkwZaJQ2oR1GfPZKh8MVSIE94aGWNkJP8WQ==}
     dependencies:
-      '@codemirror/autocomplete': 0.18.8
-      '@codemirror/highlight': 0.18.4
-      '@codemirror/language': 0.18.2
-      '@codemirror/lint': 0.18.6
-      '@codemirror/state': 0.18.7
-      '@codemirror/view': 0.18.19
-      lezer-javascript: 0.13.4
+      '@codemirror/autocomplete': 0.19.15
+      '@codemirror/highlight': 0.19.8
+      '@codemirror/language': 0.19.10
+      '@codemirror/lint': 0.19.6
+      '@codemirror/state': 0.19.9
+      '@codemirror/view': 0.19.48
+      '@lezer/javascript': 0.15.3
     dev: false
 
-  /@codemirror/language/0.18.2:
-    resolution: {integrity: sha512-2Kz0Xyfvt1Ex2KfTUcYZ3IBxpnFCqHaJijwZknGBT7JXv9dwbOPs9SfPfL4oxVuDIHZx8JTPfoV3LTTJrm8M3Q==}
+  /@codemirror/lang-markdown/0.19.6:
+    resolution: {integrity: sha512-ojoHeLgv1Rfu0GNGsU0bCtXAIp5dy4VKjndHScITQdlCkS/+SAIfuoeowEx+nMAQwTxI+/9fQZ3xdZVznGFYug==}
     dependencies:
-      '@codemirror/state': 0.18.7
-      '@codemirror/text': 0.18.1
-      '@codemirror/view': 0.18.19
-      lezer: 0.13.5
-      lezer-tree: 0.13.2
+      '@codemirror/highlight': 0.19.8
+      '@codemirror/lang-html': 0.19.4
+      '@codemirror/language': 0.19.10
+      '@codemirror/state': 0.19.9
+      '@codemirror/view': 0.19.48
+      '@lezer/common': 0.15.12
+      '@lezer/markdown': 0.15.6
     dev: false
 
-  /@codemirror/lint/0.18.6:
-    resolution: {integrity: sha512-juE05YyDoLp9WCcR0hQagphOCIZ0r4WRocRFu9tbFwsMjfuForjn4m+wsLSDaDgp2Z9secMyOSGDpBNtVwM9lQ==}
+  /@codemirror/language/0.19.10:
+    resolution: {integrity: sha512-yA0DZ3RYn2CqAAGW62VrU8c4YxscMQn45y/I9sjBlqB1e2OTQLg4CCkMBuMSLXk4xaqjlsgazeOQWaJQOKfV8Q==}
     dependencies:
-      '@codemirror/panel': 0.18.2
-      '@codemirror/state': 0.18.7
-      '@codemirror/tooltip': 0.18.4
-      '@codemirror/view': 0.18.19
+      '@codemirror/state': 0.19.9
+      '@codemirror/text': 0.19.6
+      '@codemirror/view': 0.19.48
+      '@lezer/common': 0.15.12
+      '@lezer/lr': 0.15.8
+    dev: false
+
+  /@codemirror/lint/0.19.6:
+    resolution: {integrity: sha512-Pbw1Y5kHVs2J+itQ0uez3dI4qY9ApYVap7eNfV81x1/3/BXgBkKfadaw0gqJ4h4FDG7OnJwb0VbPsjJQllHjaA==}
+    dependencies:
+      '@codemirror/gutter': 0.19.9
+      '@codemirror/panel': 0.19.1
+      '@codemirror/rangeset': 0.19.9
+      '@codemirror/state': 0.19.9
+      '@codemirror/tooltip': 0.19.16
+      '@codemirror/view': 0.19.48
       crelt: 1.0.5
     dev: false
 
-  /@codemirror/matchbrackets/0.18.0:
-    resolution: {integrity: sha512-dPDopnZVkD54sSYdmQbyQbPdiuIA83p7XxX6Hp1ScEkOjukwCiFXiA/84x10FUTsQpUYp8bDzm7gwII119bGIw==}
+  /@codemirror/matchbrackets/0.19.4:
+    resolution: {integrity: sha512-VFkaOKPNudAA5sGP1zikRHCEKU0hjYmkKpr04pybUpQvfTvNJXlReCyP0rvH/1iEwAGPL990ZTT+QrLdu4MeEA==}
+    deprecated: As of 0.20.0, this package has been merged into @codemirror/language
     dependencies:
-      '@codemirror/language': 0.18.2
-      '@codemirror/state': 0.18.7
-      '@codemirror/view': 0.18.19
-      lezer-tree: 0.13.2
+      '@codemirror/language': 0.19.10
+      '@codemirror/state': 0.19.9
+      '@codemirror/view': 0.19.48
+      '@lezer/common': 0.15.12
     dev: false
 
-  /@codemirror/panel/0.18.2:
-    resolution: {integrity: sha512-ea/g2aAKtfmie1kD7C8GDutD/5u+uzRJr/varUiAbHKr1sAdjtz5xYvC3GBAMYMan1GOh0vD5zP1yEupJl3b3Q==}
+  /@codemirror/panel/0.19.1:
+    resolution: {integrity: sha512-sYeOCMA3KRYxZYJYn5PNlt9yNsjy3zTNTrbYSfVgjgL9QomIVgOJWPO5hZ2sTN8lufO6lw0vTBsIPL9MSidmBg==}
+    deprecated: As of 0.20.0, this package has been merged into @codemirror/view
     dependencies:
-      '@codemirror/state': 0.18.7
-      '@codemirror/view': 0.18.19
+      '@codemirror/state': 0.19.9
+      '@codemirror/view': 0.19.48
     dev: false
 
-  /@codemirror/rangeset/0.18.5:
-    resolution: {integrity: sha512-gvYniNeEbGRp74MM8EQ+0tylK85pVody4r4N5bs94msPwHQSKFkEmosl8tVmS0Z4e8gRtlB37m8/cWoRiuSz5Q==}
+  /@codemirror/rangeset/0.19.9:
+    resolution: {integrity: sha512-V8YUuOvK+ew87Xem+71nKcqu1SXd5QROMRLMS/ljT5/3MCxtgrRie1Cvild0G/Z2f1fpWxzX78V0U4jjXBorBQ==}
+    deprecated: As of 0.20.0, this package has been merged into @codemirror/state
     dependencies:
-      '@codemirror/state': 0.18.7
+      '@codemirror/state': 0.19.9
     dev: false
 
-  /@codemirror/state/0.18.7:
-    resolution: {integrity: sha512-cVyTiAC9vv90NKmGOfNtBjyIem3BqKui1L5Hfcxurp8K9votQj2oH9COcgWPnQ2Xs64yC70tEuTt9DF1pj5PFQ==}
+  /@codemirror/state/0.19.9:
+    resolution: {integrity: sha512-psOzDolKTZkx4CgUqhBQ8T8gBc0xN5z4gzed109aF6x7D7umpDRoimacI/O6d9UGuyl4eYuDCZmDFr2Rq7aGOw==}
     dependencies:
-      '@codemirror/text': 0.18.1
+      '@codemirror/text': 0.19.6
     dev: false
 
-  /@codemirror/text/0.18.1:
-    resolution: {integrity: sha512-vjXs6mi1F418kucTPlFvnCt9glKnjtYssdXb8mm1oaY/F5O+tgGVepm9Z8F7AKWCQvW8Bns1D3uLz/DOIEywIw==}
+  /@codemirror/text/0.19.6:
+    resolution: {integrity: sha512-T9jnREMIygx+TPC1bOuepz18maGq/92q2a+n4qTqObKwvNMg+8cMTslb8yxeEDEq7S3kpgGWxgO1UWbQRij0dA==}
+    deprecated: As of 0.20.0, this package has been merged into @codemirror/state
     dev: false
 
-  /@codemirror/tooltip/0.18.4:
-    resolution: {integrity: sha512-LDlDOSEfjoG24uapLN7exK3Z3JchYFKUwWqo1x/9YdlAkmD1ik7cMSQZboCquP1uJVcXhtbpKmaO6vENGVaarg==}
+  /@codemirror/tooltip/0.19.16:
+    resolution: {integrity: sha512-zxKDHryUV5/RS45AQL+wOeN+i7/l81wK56OMnUPoTSzCWNITfxHn7BToDsjtrRKbzHqUxKYmBnn/4hPjpZ4WJQ==}
+    deprecated: As of 0.20.0, this package has been merged into @codemirror/view
     dependencies:
-      '@codemirror/state': 0.18.7
-      '@codemirror/view': 0.18.19
+      '@codemirror/state': 0.19.9
+      '@codemirror/view': 0.19.48
     dev: false
 
-  /@codemirror/view/0.18.19:
-    resolution: {integrity: sha512-TmazVl8H3L+aYwlNb8xk6qADRb8KiYOO047pz51R4mGCg4Ja2siSjXktZgUvklsyWbUY7h9q+oAf4piH+mQZTw==}
+  /@codemirror/view/0.19.48:
+    resolution: {integrity: sha512-0eg7D2Nz4S8/caetCTz61rK0tkHI17V/d15Jy0kLOT8dTLGGNJUponDnW28h2B6bERmPlVHKh8MJIr5OCp1nGw==}
     dependencies:
-      '@codemirror/rangeset': 0.18.5
-      '@codemirror/state': 0.18.7
-      '@codemirror/text': 0.18.1
+      '@codemirror/rangeset': 0.19.9
+      '@codemirror/state': 0.19.9
+      '@codemirror/text': 0.19.6
       style-mod: 4.0.0
       w3c-keyname: 2.2.4
     dev: false
 
-  /@codesandbox/sandpack-client/0.1.15:
-    resolution: {integrity: sha512-/qZX+AeiHrbxu+cEMmbHYpEsgy1MDV/pBaHs2V37bJFg11RJ6fTGiruHEMYi8ai4hszdeBskQoz5gc1TON1u+w==}
+  /@codesandbox/sandpack-client/1.2.2:
+    resolution: {integrity: sha512-sTPQVS7mzpEm2ttpHFFSqkGd1A1tBZn7UTZwIjBNCXKHywrt9o7MyrdhUuS03J7MyXN+HSJ55Vz+OGD1Wv4ejQ==}
     dependencies:
       codesandbox-import-utils: 1.3.8
       lodash.isequal: 4.5.0
     dev: false
 
-  /@codesandbox/sandpack-react/0.1.15_sfoxds7t5ydpegc3knd667wn6m:
-    resolution: {integrity: sha512-ru++Drt1LuDQv8NitKH9uCCsSzLgsAIyeaCVNCP9sl/J+SImpB1TEZnmi4z+t4LpI9E0a5w/BAEt1LgkASeA4Q==}
+  /@codesandbox/sandpack-react/1.3.1_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-Ju/c6sHYvlPaX69CVXVULhOJ4zwKLKqk5wKNfhz/xINO1+Pm7xR4Qq7kDr4eYnkivmPuYY/6pyIOPWwoWkmLBA==}
     peerDependencies:
-      react: ^16.8.0 || ^17
-      react-dom: ^16.8.0 || ^17
+      react: ^16.8.0 || ^17 || ^18
+      react-dom: ^16.8.0 || ^17 || ^18
     dependencies:
       '@code-hike/classer': 0.0.0-e48fa74_react@17.0.2
-      '@codemirror/closebrackets': 0.18.0
-      '@codemirror/commands': 0.18.3
-      '@codemirror/comment': 0.18.1
-      '@codemirror/gutter': 0.18.4
-      '@codemirror/highlight': 0.18.4
-      '@codemirror/history': 0.18.1
-      '@codemirror/lang-css': 0.18.0
-      '@codemirror/lang-html': 0.18.1
-      '@codemirror/lang-javascript': 0.18.0
-      '@codemirror/language': 0.18.2
-      '@codemirror/matchbrackets': 0.18.0
-      '@codemirror/state': 0.18.7
-      '@codemirror/view': 0.18.19
-      '@codesandbox/sandpack-client': 0.1.15
+      '@codemirror/closebrackets': 0.19.2
+      '@codemirror/commands': 0.19.8
+      '@codemirror/comment': 0.19.1
+      '@codemirror/gutter': 0.19.9
+      '@codemirror/highlight': 0.19.8
+      '@codemirror/history': 0.19.2
+      '@codemirror/lang-css': 0.19.3
+      '@codemirror/lang-html': 0.19.4
+      '@codemirror/lang-javascript': 0.19.7
+      '@codemirror/lang-markdown': 0.19.6
+      '@codemirror/language': 0.19.10
+      '@codemirror/matchbrackets': 0.19.4
+      '@codemirror/state': 0.19.9
+      '@codemirror/view': 0.19.48
+      '@codesandbox/sandpack-client': 1.2.2
+      '@react-hook/intersection-observer': 3.1.1_react@17.0.2
+      '@stitches/core': 1.2.8
       codesandbox-import-util-types: 2.2.3
-      codesandbox-import-utils: 2.2.3
+      lodash.isequal: 4.5.0
+      lz-string: 1.4.4
       react: 17.0.2
+      react-devtools-inline: 4.4.0
       react-dom: 17.0.2_react@17.0.2
+      react-is: 17.0.2
+    dev: false
+
+  /@codesandbox/sandpack-themes/1.0.0:
+    resolution: {integrity: sha512-t0T6b0jIA46u9MtPmTR7nQye3CJgpzauK70NslxSuRUH7W2J39gDMbcw0GuCgjmRqiM/4bBa401OKRRKDzUPpQ==}
     dev: false
 
   /@corex/deepmerge/4.0.29:
@@ -7415,6 +7451,7 @@ packages:
       '@types/react': 17.0.45
       hoist-non-react-statics: 3.3.2
       react: 17.0.2
+    dev: false
 
   /@emotion/react/11.5.0_hx2b44akkvgcgvvtmk7ds2qk6q:
     resolution: {integrity: sha512-MYq/bzp3rYbee4EMBORCn4duPQfgpiEB5XzrZEBnUZAL80Qdfr7CEv/T80jwaTl/dnZmt9SnTa8NkTrwFNpLlw==}
@@ -7988,6 +8025,40 @@ packages:
     resolution: {integrity: sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==}
     dev: false
 
+  /@lezer/common/0.15.12:
+    resolution: {integrity: sha512-edfwCxNLnzq5pBA/yaIhwJ3U3Kz8VAUOTRg0hhxaizaI1N+qxV7EXDv/kLCkLeq2RzSFvxexlaj5Mzfn2kY0Ig==}
+    dev: false
+
+  /@lezer/css/0.15.2:
+    resolution: {integrity: sha512-tnMOMZY0Zs6JQeVjqfmREYMV0GnmZR1NitndLWioZMD6mA7VQF/PPKPmJX1f+ZgVZQc5Am0df9mX3aiJnNJlKQ==}
+    dependencies:
+      '@lezer/lr': 0.15.8
+    dev: false
+
+  /@lezer/html/0.15.1:
+    resolution: {integrity: sha512-0ZYVhu+RwN6ZMM0gNnTxenRAdoycKc2wvpLfMjP0JkKR0vMxhtuLaIpsq9KW2Mv6l7ux5vdjq8CQ7fKDvia8KA==}
+    dependencies:
+      '@lezer/lr': 0.15.8
+    dev: false
+
+  /@lezer/javascript/0.15.3:
+    resolution: {integrity: sha512-8jA2NpOfpWwSPZxRhd9BxK2ZPvGd7nLE3LFTJ5AbMhXAzMHeMjneV6GEVd7dAIee85dtap0jdb6bgOSO0+lfwA==}
+    dependencies:
+      '@lezer/lr': 0.15.8
+    dev: false
+
+  /@lezer/lr/0.15.8:
+    resolution: {integrity: sha512-bM6oE6VQZ6hIFxDNKk8bKPa14hqFrV07J/vHGOeiAbJReIaQXmkVb6xQu4MR+JBTLa5arGRyAAjJe1qaQt3Uvg==}
+    dependencies:
+      '@lezer/common': 0.15.12
+    dev: false
+
+  /@lezer/markdown/0.15.6:
+    resolution: {integrity: sha512-1XXLa4q0ZthryUEfO47ipvZHxNb+sCKoQIMM9dKs5vXZOBbgF2Vah/GL3g26BFIAEc2uCv4VQnI+lSrv58BT3g==}
+    dependencies:
+      '@lezer/common': 0.15.12
+    dev: false
+
   /@manypkg/cli/0.19.1:
     resolution: {integrity: sha512-EXBPPh6wYSKmSD5DdUjNG2rc55C2G/poIJ0D3O8tnk83o3nZh8g94JwN5/AumbSsDZ0yagmkS+DChNlRhIUG7w==}
     hasBin: true
@@ -9034,6 +9105,16 @@ packages:
       react: 17.0.2
     dev: false
 
+  /@react-hook/intersection-observer/3.1.1_react@17.0.2:
+    resolution: {integrity: sha512-OTDx8/wFaRvzFtKl1dEUEXSOqK2zVJHporiTTdC2xO++0e9FEx9wIrPis5q3lqtXeZH9zYGLbk+aB75qNFbbuw==}
+    peerDependencies:
+      react: '>=16.8'
+    dependencies:
+      '@react-hook/passive-layout-effect': 1.2.1_react@17.0.2
+      intersection-observer: 0.10.0
+      react: 17.0.2
+    dev: false
+
   /@react-hook/passive-layout-effect/1.2.1_react@17.0.2:
     resolution: {integrity: sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==}
     peerDependencies:
@@ -9744,6 +9825,10 @@ packages:
       - debug
     dev: false
 
+  /@stitches/core/1.2.8:
+    resolution: {integrity: sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==}
+    dev: false
+
   /@stitches/react/1.2.8_react@17.0.2:
     resolution: {integrity: sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==}
     peerDependencies:
@@ -12003,7 +12088,7 @@ packages:
   /axios/0.26.1:
     resolution: {integrity: sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==}
     dependencies:
-      follow-redirects: 1.15.1_debug@2.6.9
+      follow-redirects: 1.15.1
     transitivePeerDependencies:
       - debug
 
@@ -13319,14 +13404,6 @@ packages:
       lz-string: 1.4.4
     dev: false
 
-  /codesandbox-import-utils/2.2.3:
-    resolution: {integrity: sha512-ymtmcgZKU27U+nM2qUb21aO8Ut/u2S9s6KorOgG81weP+NA0UZkaHKlaRqbLJ9h4i/4FLvwmEXYAnTjNmp6ogg==}
-    dependencies:
-      codesandbox-import-util-types: 2.2.3
-      istextorbinary: 2.6.0
-      lz-string: 1.4.4
-    dev: false
-
   /collapse-white-space/1.0.6:
     resolution: {integrity: sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==}
 
@@ -14515,14 +14592,6 @@ packages:
     engines: {node: '>=0.8'}
     dev: false
 
-  /editions/2.3.1:
-    resolution: {integrity: sha512-ptGvkwTvGdGfC0hfhKg0MT+TRLRKGtUiWGBInxOm5pz7ssADezahjCUaYuZ8Dr+C05FW0AECIIPt4WBxVINEhA==}
-    engines: {node: '>=0.8'}
-    dependencies:
-      errlop: 2.2.0
-      semver: 6.3.0
-    dev: false
-
   /editorconfig/0.15.3:
     resolution: {integrity: sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==}
     hasBin: true
@@ -14627,11 +14696,6 @@ packages:
     engines: {node: '>=0.12'}
     dev: false
 
-  /errlop/2.2.0:
-    resolution: {integrity: sha512-e64Qj9+4aZzjzzFpZC7p5kmm/ccCrbLhAJplhsDXQFs87XTsXwOpH4s1Io2s90Tau/8r2j9f4l/thhDevRjzxw==}
-    engines: {node: '>=0.8'}
-    dev: false
-
   /errno/0.1.8:
     resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
     hasBin: true
@@ -14740,7 +14804,7 @@ packages:
     dev: false
 
   /es6-iterator/2.0.3:
-    resolution: {integrity: sha1-p96IkUGgWpSwhUQDstCg+/qY87c=}
+    resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==}
     dependencies:
       d: 1.0.1
       es5-ext: 0.10.53
@@ -16212,6 +16276,15 @@ packages:
   /focus-visible/5.2.0:
     resolution: {integrity: sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==}
 
+  /follow-redirects/1.15.1:
+    resolution: {integrity: sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
   /follow-redirects/1.15.1_debug@2.6.9:
     resolution: {integrity: sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==}
     engines: {node: '>=4.0'}
@@ -17829,6 +17902,10 @@ packages:
     engines: {node: '>= 0.10'}
     dev: false
 
+  /intersection-observer/0.10.0:
+    resolution: {integrity: sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==}
+    dev: false
+
   /into-stream/3.1.0:
     resolution: {integrity: sha512-TcdjPibTksa1NQximqep2r17ISRiNE9fwlfbg3F8ANdvP5/yrFTew86VcO//jk4QTaMlbjypPBq76HN2zaKfZQ==}
     engines: {node: '>=4'}
@@ -18414,15 +18491,6 @@ packages:
       textextensions: 2.6.0
     dev: false
 
-  /istextorbinary/2.6.0:
-    resolution: {integrity: sha512-+XRlFseT8B3L9KyjxxLjfXSLMuErKDsd8DBNrsaxoViABMEZlOSCstwmw0qpoFX3+U6yWU1yhLudAe6/lETGGA==}
-    engines: {node: '>=0.12'}
-    dependencies:
-      binaryextensions: 2.3.0
-      editions: 2.3.1
-      textextensions: 2.6.0
-    dev: false
-
   /jest-changed-files/25.5.0:
     resolution: {integrity: sha512-EOw9QEqapsDT7mKF162m8HFzRPbmP8qJQny6ldVOdOVBz3ACgPm/1nAn5fPQ/NDaYhX/AHkrGwwkCncpAVSXcw==}
     engines: {node: '>= 8.3'}
@@ -19791,39 +19859,6 @@ packages:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  /lezer-css/0.13.1:
-    resolution: {integrity: sha512-ke56tjG17IZ+EFiY50P2WinjhgZQB7OecRVZmYQbVuwv5iUdLemA4vLjaFsAbgoSg+4pfOms7Ns9nItoJcmFpg==}
-    deprecated: This package has been replaced by @lezer/css
-    dependencies:
-      lezer: 0.13.5
-    dev: false
-
-  /lezer-html/0.13.6:
-    resolution: {integrity: sha512-FY8ULPsyrbxSCre95hqU69ydCIbjRKoAwWSYbuBL7om6XmQ0C/M9PxV2NToWIgYGK5Yr5MzrsK/H7vsdJGpB2g==}
-    deprecated: This package has been replaced by @lezer/html
-    dependencies:
-      lezer: 0.13.5
-    dev: false
-
-  /lezer-javascript/0.13.4:
-    resolution: {integrity: sha512-nhRbeSwPZo2xVYq6TWyUhi/r9j0CFSUpkuA5J992Az2AYZFw2HnGVjixfP43DKufL+npJwSy0qcCcAHFQ2bFOQ==}
-    deprecated: This package has been replaced by @lezer/javascript
-    dependencies:
-      lezer: 0.13.5
-    dev: false
-
-  /lezer-tree/0.13.2:
-    resolution: {integrity: sha512-15ZxW8TxVNAOkHIo43Iouv4zbSkQQ5chQHBpwXcD2bBFz46RB4jYLEEww5l1V0xyIx9U2clSyyrLes+hAUFrGQ==}
-    deprecated: This package has been replaced by @lezer/common
-    dev: false
-
-  /lezer/0.13.5:
-    resolution: {integrity: sha512-cAiMQZGUo2BD8mpcz7Nv1TlKzWP7YIdIRrX41CiP5bk5t4GHxskOxWUx2iAOuHlz8dO+ivbuXr0J1bfHsWD+lQ==}
-    deprecated: This package has been replaced by @lezer/lr
-    dependencies:
-      lezer-tree: 0.13.2
-    dev: false
-
   /libbase64/1.2.1:
     resolution: {integrity: sha512-l+nePcPbIG1fNlqMzrh68MLkX/gTxk/+vdvAb388Ssi7UuUN31MI44w4Yf33mM3Cm4xDfw48mdf3rkdHszLNew==}
 
@@ -20072,7 +20107,7 @@ packages:
     dev: false
 
   /lodash.isequal/4.5.0:
-    resolution: {integrity: sha1-QVxEePK8wwEgwizhDtMib30+GOA=}
+    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
     dev: false
 
   /lodash.isinteger/4.0.4:
@@ -20242,7 +20277,7 @@ packages:
     dev: false
 
   /lz-string/1.4.4:
-    resolution: {integrity: sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=}
+    resolution: {integrity: sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==}
     hasBin: true
 
   /magic-string/0.25.7:
@@ -21934,7 +21969,7 @@ packages:
     dev: false
 
   /next-tick/1.0.0:
-    resolution: {integrity: sha1-yobR/ogoFpsBICCOPchCS524NCw=}
+    resolution: {integrity: sha512-mc/caHeUcdjnC/boPWJefDr4KUIWQNv+tlnFnJd38QMou86QtxQzBJfxgGRzvx8jazYRqrVlaHarfO72uNxPOg==}
     dev: false
 
   /next-transpile-modules/9.0.0:
@@ -24537,6 +24572,12 @@ packages:
       react-dom: 17.0.2_react@17.0.2
     dev: false
 
+  /react-devtools-inline/4.4.0:
+    resolution: {integrity: sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==}
+    dependencies:
+      es6-symbol: 3.1.3
+    dev: false
+
   /react-dom/17.0.2_react@17.0.2:
     resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
     peerDependencies:

From 41e1cba3a70a5ed05711bf7082881f4039431136 Mon Sep 17 00:00:00 2001
From: Joel Hooks <joelhooks@gmail.com>
Date: Thu, 28 Jul 2022 22:44:55 -0700
Subject: [PATCH 3/7] fix: update a few packages

---
 apps/engmanagement/package.json               |  3 +-
 .../src/components/app/layout.tsx             | 11 ++---
 .../src/components/article-assets.tsx         |  2 +-
 .../src/components/color-mode-toggle.tsx      |  4 +-
 .../convertkit-subscribe-and-tag.tsx          | 10 ++--
 apps/engmanagement/src/components/share.tsx   | 35 +++++++-------
 apps/engmanagement/src/components/spinner.tsx | 12 +++--
 apps/engmanagement/src/layouts/index.tsx      | 10 ++--
 apps/engmanagement/src/pages/answer.tsx       |  6 +--
 apps/engmanagement/src/pages/login.tsx        |  6 +--
 apps/engmanagement/src/templates/article.tsx  | 14 +++---
 apps/fronttoback/src/styles/quiz.css          |  1 -
 apps/protailwind/src/styles/quiz.css          |  1 -
 apps/testingaccessibility/package.json        |  2 +-
 apps/testingaccessibility/src/styles/quiz.css |  1 -
 pnpm-lock.yaml                                | 46 +++++++++++++------
 16 files changed, 87 insertions(+), 77 deletions(-)

diff --git a/apps/engmanagement/package.json b/apps/engmanagement/package.json
index f84ee83197..0eb56fb795 100644
--- a/apps/engmanagement/package.json
+++ b/apps/engmanagement/package.json
@@ -20,7 +20,7 @@
   "dependencies": {
     "@asbjorn/eslint-plugin-groq": "^2.0.0",
     "@next-auth/prisma-adapter": "^1.0.3",
-    "@next/mdx": "^12.0.3",
+    "@next/mdx": "^12.2.3",
     "@reach/dialog": "^0.16.2",
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/client": "^3.2.0",
@@ -65,7 +65,6 @@
     "next-auth": "^4.10.2",
     "next-mdx-remote": "^3.0.8",
     "next-sanity-image": "^3.1.7",
-
     "next-sitemap": "^3.0.5",
     "next-themes": "^0.1.1",
     "nodemailer": "^6.7.2",
diff --git a/apps/engmanagement/src/components/app/layout.tsx b/apps/engmanagement/src/components/app/layout.tsx
index 5e6b6fddd3..33c48c0901 100644
--- a/apps/engmanagement/src/components/app/layout.tsx
+++ b/apps/engmanagement/src/components/app/layout.tsx
@@ -12,14 +12,9 @@ type LayoutProps = {
   footer?: React.ReactElement | null
 }
 
-const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
-  children,
-  className,
-  meta,
-  noIndex,
-  nav,
-  footer,
-}) => {
+const Layout: FunctionComponent<
+  React.PropsWithChildren<React.PropsWithChildren<LayoutProps>>
+> = ({children, className, meta, noIndex, nav, footer}) => {
   const {
     title = config.defaultTitle,
     description,
diff --git a/apps/engmanagement/src/components/article-assets.tsx b/apps/engmanagement/src/components/article-assets.tsx
index 28720eb906..6a1b853568 100644
--- a/apps/engmanagement/src/components/article-assets.tsx
+++ b/apps/engmanagement/src/components/article-assets.tsx
@@ -168,7 +168,7 @@ const TheFutureOfRemoteWorkBackground = () => {
 }
 
 const TheValueOfValuesExample: React.FC<
-  React.PropsWithChildren<{number?: Number}>
+  React.PropsWithChildren<React.PropsWithChildren<{number?: Number}>>
 > = ({children, number}) => {
   const childrenArr: React.ReactNode[] = React.Children.toArray(children)
   const firstElement: React.ReactNode = childrenArr[0]
diff --git a/apps/engmanagement/src/components/color-mode-toggle.tsx b/apps/engmanagement/src/components/color-mode-toggle.tsx
index 615aabad4b..f7f6acd209 100644
--- a/apps/engmanagement/src/components/color-mode-toggle.tsx
+++ b/apps/engmanagement/src/components/color-mode-toggle.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react'
 import {useTheme} from 'next-themes'
 
-const DarkModeToggle: React.FC<React.PropsWithChildren<unknown>> = () => {
+const DarkModeToggle: React.FC<
+  React.PropsWithChildren<React.PropsWithChildren<unknown>>
+> = () => {
   const [mounted, setMounted] = React.useState(false)
   const {theme, setTheme} = useTheme()
   React.useEffect(() => setMounted(true), [])
diff --git a/apps/engmanagement/src/components/convertkit-subscribe-and-tag.tsx b/apps/engmanagement/src/components/convertkit-subscribe-and-tag.tsx
index 2f0373b4b4..9baa47f189 100644
--- a/apps/engmanagement/src/components/convertkit-subscribe-and-tag.tsx
+++ b/apps/engmanagement/src/components/convertkit-subscribe-and-tag.tsx
@@ -7,10 +7,12 @@ import * as Yup from 'yup'
 import {useRouter} from 'next/router'
 
 const ConvertkitSubscribeAndTagForm: React.FC<
-  React.PropsWithChildren<{
-    tag?: string
-    idNum?: string
-  }>
+  React.PropsWithChildren<
+    React.PropsWithChildren<{
+      tag?: string
+      idNum?: string
+    }>
+  >
 > = ({tag, idNum = '1'}) => {
   const {subscriber} = useConvertkit()
   const [submitting, setSubmitting] = React.useState<boolean>(false)
diff --git a/apps/engmanagement/src/components/share.tsx b/apps/engmanagement/src/components/share.tsx
index 59ae8bc641..0106c1bf74 100644
--- a/apps/engmanagement/src/components/share.tsx
+++ b/apps/engmanagement/src/components/share.tsx
@@ -125,10 +125,9 @@ const icons = {
 const style =
   'rounded-lg bg-gray-400 bg-opacity-10 hover:bg-opacity-20 transition-all ease-in-out duration-200 flex items-center justify-center p-3 m-1'
 
-const Twitter: React.FC<React.PropsWithChildren<ShareProps>> = ({
-  link,
-  message,
-}) => (
+const Twitter: React.FC<
+  React.PropsWithChildren<React.PropsWithChildren<ShareProps>>
+> = ({link, message}) => (
   <a
     href={links.twitter(link, message)}
     className={style}
@@ -140,7 +139,9 @@ const Twitter: React.FC<React.PropsWithChildren<ShareProps>> = ({
   </a>
 )
 
-const Facebook: React.FC<React.PropsWithChildren<ShareProps>> = ({link}) => (
+const Facebook: React.FC<
+  React.PropsWithChildren<React.PropsWithChildren<ShareProps>>
+> = ({link}) => (
   <a
     href={links.facebook(link)}
     className={style}
@@ -152,10 +153,9 @@ const Facebook: React.FC<React.PropsWithChildren<ShareProps>> = ({link}) => (
   </a>
 )
 
-const Reddit: React.FC<React.PropsWithChildren<ShareProps>> = ({
-  link,
-  message,
-}) => (
+const Reddit: React.FC<
+  React.PropsWithChildren<React.PropsWithChildren<ShareProps>>
+> = ({link, message}) => (
   <a
     href={links.reddit(link, message)}
     className={style}
@@ -167,9 +167,9 @@ const Reddit: React.FC<React.PropsWithChildren<ShareProps>> = ({
   </a>
 )
 
-const CopyToClipboard: React.FC<React.PropsWithChildren<ShareProps>> = ({
-  link,
-}) => {
+const CopyToClipboard: React.FC<
+  React.PropsWithChildren<React.PropsWithChildren<ShareProps>>
+> = ({link}) => {
   const [copied, copyToClipboard] = useClipboard(link, {
     successDuration: 700,
   })
@@ -191,7 +191,9 @@ const CopyToClipboard: React.FC<React.PropsWithChildren<ShareProps>> = ({
   )
 }
 
-const LinkedIn: React.FC<React.PropsWithChildren<ShareProps>> = ({link}) => (
+const LinkedIn: React.FC<
+  React.PropsWithChildren<React.PropsWithChildren<ShareProps>>
+> = ({link}) => (
   <a
     href={links.linkedin(link)}
     className={style}
@@ -203,10 +205,9 @@ const LinkedIn: React.FC<React.PropsWithChildren<ShareProps>> = ({link}) => (
   </a>
 )
 
-const Hacker: React.FC<React.PropsWithChildren<ShareProps>> = ({
-  link,
-  message,
-}) => (
+const Hacker: React.FC<
+  React.PropsWithChildren<React.PropsWithChildren<ShareProps>>
+> = ({link, message}) => (
   <a
     href={links.hacker(link, message)}
     className={style}
diff --git a/apps/engmanagement/src/components/spinner.tsx b/apps/engmanagement/src/components/spinner.tsx
index 95debda3c6..8a3b40a0ca 100644
--- a/apps/engmanagement/src/components/spinner.tsx
+++ b/apps/engmanagement/src/components/spinner.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react'
 
 const Spinner: React.FunctionComponent<
-  React.PropsWithChildren<{
-    className?: string
-    size?: number
-    color?: string
-  }>
+  React.PropsWithChildren<
+    React.PropsWithChildren<{
+      className?: string
+      size?: number
+      color?: string
+    }>
+  >
 > = ({className = '', size = 6}) => (
   <svg
     className={`animate-spin h-${size} w-${size} ${className}`}
diff --git a/apps/engmanagement/src/layouts/index.tsx b/apps/engmanagement/src/layouts/index.tsx
index 200bf5a828..a02d1324c7 100644
--- a/apps/engmanagement/src/layouts/index.tsx
+++ b/apps/engmanagement/src/layouts/index.tsx
@@ -10,13 +10,9 @@ type LayoutProps = {
   hideNav?: boolean
 }
 
-const Layout: FunctionComponent<React.PropsWithChildren<LayoutProps>> = ({
-  children,
-  className,
-  meta,
-  noIndex,
-  hideNav = false,
-}) => {
+const Layout: FunctionComponent<
+  React.PropsWithChildren<React.PropsWithChildren<LayoutProps>>
+> = ({children, className, meta, noIndex, hideNav = false}) => {
   const {
     title,
     description,
diff --git a/apps/engmanagement/src/pages/answer.tsx b/apps/engmanagement/src/pages/answer.tsx
index 02cf7cab57..da104be276 100644
--- a/apps/engmanagement/src/pages/answer.tsx
+++ b/apps/engmanagement/src/pages/answer.tsx
@@ -4,9 +4,9 @@ import {QuizAnswerPage} from '@skillrecordings/quiz'
 import {QuestionSet} from '@skillrecordings/types'
 import getConfig from '@skillrecordings/quiz/dist/config'
 
-const Answer: React.FC<React.PropsWithChildren<{questionSet: QuestionSet}>> = ({
-  questionSet,
-}) => {
+const Answer: React.FC<
+  React.PropsWithChildren<React.PropsWithChildren<{questionSet: QuestionSet}>>
+> = ({questionSet}) => {
   return (
     <Layout noIndex meta={{title: 'Quiz'}}>
       <div className="h-full w-full flex flex-col items-center justify-center py-24 px-5">
diff --git a/apps/engmanagement/src/pages/login.tsx b/apps/engmanagement/src/pages/login.tsx
index c4242d4717..cfef2e9ac4 100644
--- a/apps/engmanagement/src/pages/login.tsx
+++ b/apps/engmanagement/src/pages/login.tsx
@@ -5,9 +5,9 @@ import {GetServerSideProps} from 'next'
 import Image from 'next/image'
 import Layout from 'components/app/layout'
 
-const Login: React.FC<React.PropsWithChildren<{csrfToken: string}>> = ({
-  csrfToken,
-}) => {
+const Login: React.FC<
+  React.PropsWithChildren<React.PropsWithChildren<{csrfToken: string}>>
+> = ({csrfToken}) => {
   const {
     register,
     formState: {errors},
diff --git a/apps/engmanagement/src/templates/article.tsx b/apps/engmanagement/src/templates/article.tsx
index 882889ff12..0382cff525 100644
--- a/apps/engmanagement/src/templates/article.tsx
+++ b/apps/engmanagement/src/templates/article.tsx
@@ -32,7 +32,9 @@ type AuthorProps = {
 }
 
 const ShareArticle: React.FC<
-  React.PropsWithChildren<{title: string; slug: string}>
+  React.PropsWithChildren<
+    React.PropsWithChildren<{title: string; slug: string}>
+  >
 > = ({children, title, slug}) => {
   return (
     <div className="flex items-center md:flex-row flex-col md:space-x-2 md:space-y-0 space-y-5">
@@ -58,11 +60,9 @@ const ShareArticle: React.FC<
   )
 }
 
-const Author: React.FC<React.PropsWithChildren<AuthorProps>> = ({
-  name,
-  image,
-  url,
-}) => {
+const Author: React.FC<
+  React.PropsWithChildren<React.PropsWithChildren<AuthorProps>>
+> = ({name, image, url}) => {
   return (
     <a href={url} target="_blank" rel="noopener noreferrer" className="group">
       <div className="relative z-10 flex items-center justify-center">
@@ -87,7 +87,7 @@ const Author: React.FC<React.PropsWithChildren<AuthorProps>> = ({
 }
 
 const ArticleTemplate: React.FC<
-  React.PropsWithChildren<ArticleTemplateProps>
+  React.PropsWithChildren<React.PropsWithChildren<ArticleTemplateProps>>
 > = ({meta, children, footer = true, subscribeForm = true}) => {
   const {title, image, published, description, images, background} = meta
   const author = meta.author || {
diff --git a/apps/fronttoback/src/styles/quiz.css b/apps/fronttoback/src/styles/quiz.css
index 41688354ec..55c8fbf20f 100644
--- a/apps/fronttoback/src/styles/quiz.css
+++ b/apps/fronttoback/src/styles/quiz.css
@@ -1,4 +1,3 @@
-/* @import '@codesandbox/sandpack-react/dist/index.css'; */
 
 /* ——— QUIZ ——— */
 [data-sr-quiz] {
diff --git a/apps/protailwind/src/styles/quiz.css b/apps/protailwind/src/styles/quiz.css
index 41688354ec..55c8fbf20f 100644
--- a/apps/protailwind/src/styles/quiz.css
+++ b/apps/protailwind/src/styles/quiz.css
@@ -1,4 +1,3 @@
-/* @import '@codesandbox/sandpack-react/dist/index.css'; */
 
 /* ——— QUIZ ——— */
 [data-sr-quiz] {
diff --git a/apps/testingaccessibility/package.json b/apps/testingaccessibility/package.json
index bd092fde9a..8a0d56fd6f 100644
--- a/apps/testingaccessibility/package.json
+++ b/apps/testingaccessibility/package.json
@@ -115,7 +115,7 @@
     "nanoid": "^3.3.1",
     "next": "^12.2.3",
     "next-auth": "^4.10.2",
-    "next-mdx-remote": "^4.0.0",
+    "next-mdx-remote": "^4.1.0",
     "next-sitemap": "^3.0.5",
     "next-themes": "^0.1.1",
     "nodemailer": "^6.7.2",
diff --git a/apps/testingaccessibility/src/styles/quiz.css b/apps/testingaccessibility/src/styles/quiz.css
index a3d210a5da..cc41550b1c 100644
--- a/apps/testingaccessibility/src/styles/quiz.css
+++ b/apps/testingaccessibility/src/styles/quiz.css
@@ -1,4 +1,3 @@
-@import '@codesandbox/sandpack-react/dist/index.css';
 
 /* ——— QUIZ ——— */
 [data-sr-quiz] {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 308cac6a7e..52744ebfa5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -612,7 +612,7 @@ importers:
       '@babel/plugin-transform-react-jsx': ^7.16.0
       '@mdx-js/loader': ^1.6.22
       '@next-auth/prisma-adapter': ^1.0.3
-      '@next/mdx': ^12.0.3
+      '@next/mdx': ^12.2.3
       '@reach/dialog': ^0.16.2
       '@sanity/block-content-to-react': ^3.0.0
       '@sanity/client': ^3.2.0
@@ -719,7 +719,7 @@ importers:
     dependencies:
       '@asbjorn/eslint-plugin-groq': 2.0.0
       '@next-auth/prisma-adapter': 1.0.3_next-auth@4.10.2
-      '@next/mdx': 12.1.5_@mdx-js+loader@1.6.22
+      '@next/mdx': 12.2.3_@mdx-js+loader@1.6.22
       '@reach/dialog': 0.16.2_k2mvpji5i2ojml6m4ftklg47pa
       '@sanity/block-content-to-react': 3.0.0_react@17.0.2
       '@sanity/client': 3.3.2
@@ -2027,7 +2027,7 @@ importers:
       next-auth: ^4.10.2
       next-compose-plugins: ^2.2.1
       next-images: ^1.8.4
-      next-mdx-remote: ^4.0.0
+      next-mdx-remote: ^4.1.0
       next-sitemap: ^3.0.5
       next-themes: ^0.1.1
       nodemailer: ^6.7.2
@@ -2154,7 +2154,7 @@ importers:
       nanoid: 3.3.1
       next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
       next-auth: 4.10.2_uwv6tj4c6jl3tcycfdgw4fi3ba
-      next-mdx-remote: 4.0.0_sfoxds7t5ydpegc3knd667wn6m
+      next-mdx-remote: 4.1.0_sfoxds7t5ydpegc3knd667wn6m
       next-sitemap: 3.1.7_mvfnr67nacokwugwaexctvkqby
       next-themes: 0.1.1_lomk7fwgwcwgv5os6tnu5kl3ge
       nodemailer: 6.7.2
@@ -7451,7 +7451,6 @@ packages:
       '@types/react': 17.0.45
       hoist-non-react-statics: 3.3.2
       react: 17.0.2
-    dev: false
 
   /@emotion/react/11.5.0_hx2b44akkvgcgvvtmk7ds2qk6q:
     resolution: {integrity: sha512-MYq/bzp3rYbee4EMBORCn4duPQfgpiEB5XzrZEBnUZAL80Qdfr7CEv/T80jwaTl/dnZmt9SnTa8NkTrwFNpLlw==}
@@ -8366,6 +8365,15 @@ packages:
       '@mdx-js/react': 2.1.2_react@17.0.2
     dev: false
 
+  /@next/mdx/12.2.3_@mdx-js+loader@1.6.22:
+    resolution: {integrity: sha512-ALZ6F8A/YtIHxPV02R/y2nTdudyWrZjgftlNhP9o96V6llX45X7mnv7mHERd7b4ByrbXDmaWeD9Lbpljmzycvg==}
+    peerDependencies:
+      '@mdx-js/loader': '>=0.15.0'
+      '@mdx-js/react': '*'
+    dependencies:
+      '@mdx-js/loader': 1.6.22_react@17.0.2
+    dev: false
+
   /@next/swc-android-arm-eabi/12.2.3:
     resolution: {integrity: sha512-JxmCW9XB5PYnkGE67BdnBTdqW0SW6oMCiPMHLdjeRi4T3U4JJKJGnjQld99+6TPOfPWigtw3W7Cijp5gc+vJ/w==}
     engines: {node: '>= 10'}
@@ -12088,7 +12096,7 @@ packages:
   /axios/0.26.1:
     resolution: {integrity: sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==}
     dependencies:
-      follow-redirects: 1.15.1
+      follow-redirects: 1.15.1_debug@2.6.9
     transitivePeerDependencies:
       - debug
 
@@ -16276,15 +16284,6 @@ packages:
   /focus-visible/5.2.0:
     resolution: {integrity: sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==}
 
-  /follow-redirects/1.15.1:
-    resolution: {integrity: sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-
   /follow-redirects/1.15.1_debug@2.6.9:
     resolution: {integrity: sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==}
     engines: {node: '>=4.0'}
@@ -21902,6 +21901,23 @@ packages:
       - supports-color
     dev: false
 
+  /next-mdx-remote/4.1.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-ZdL5AFJcEqvInGkYYRKda930D6AJt1GOLX/OXFE/vTwaqV/Mw+l3/njZ4kWqvYSAkl89Z6W7WZrTtN0fd0XwPg==}
+    engines: {node: '>=14', npm: '>=7'}
+    peerDependencies:
+      react: '>=16.x <=18.x'
+      react-dom: '>=16.x <=18.x'
+    dependencies:
+      '@mdx-js/mdx': 2.1.2
+      '@mdx-js/react': 2.1.2_react@17.0.2
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      vfile: 5.3.0
+      vfile-matter: 3.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /next-sanity-image/3.1.7_nxat2lsbytb3uy2k6j2mhd6hfi:
     resolution: {integrity: sha512-mk842380HwDrlUSmyyx54MGcGcbz847c2rCTj9c75lkO+VSpuJ00+uaiJE3arktrnHAUV4XCZ+OVxJ6C1mqtBw==}
     peerDependencies:

From 0d05fadf9d0208270ec6709338b580ff9b27d6fb Mon Sep 17 00:00:00 2001
From: Vojta Holik <vojta@egghead.io>
Date: Fri, 29 Jul 2022 14:33:02 +0200
Subject: [PATCH 4/7] fix: component

---
 apps/protailwind/src/components/navigation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/protailwind/src/components/navigation.tsx b/apps/protailwind/src/components/navigation.tsx
index d3b151ed5e..3aca72d754 100644
--- a/apps/protailwind/src/components/navigation.tsx
+++ b/apps/protailwind/src/components/navigation.tsx
@@ -26,7 +26,7 @@ const DesktopNav = () => {
   )
 }
 
-const NavSlots: React.FC = ({children}) => {
+const NavSlots: React.FC<React.PropsWithChildren> = ({children}) => {
   return <div className="flex items-center">{children}</div>
 }
 

From 2e0a94578be22a607cff07f2ab34af8574ec9b1c Mon Sep 17 00:00:00 2001
From: Vojta Holik <vojta@egghead.io>
Date: Fri, 29 Jul 2022 14:48:35 +0200
Subject: [PATCH 5/7] fix: components

---
 apps/engmanagement/src/pages/[slug].tsx             |  4 +++-
 apps/typescriptcourse/src/components/app/layout.tsx | 10 +++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/engmanagement/src/pages/[slug].tsx b/apps/engmanagement/src/pages/[slug].tsx
index 4b62fe5a52..0be934a6aa 100644
--- a/apps/engmanagement/src/pages/[slug].tsx
+++ b/apps/engmanagement/src/pages/[slug].tsx
@@ -116,7 +116,9 @@ const Article = ({
       >
         <MDXRemote
           {...source}
-          components={{Example: TheValueOfValuesExample}}
+          components={{
+            Example: TheValueOfValuesExample as any,
+          }}
         />
         {!authorized && (
           <div className="absolute bottom-0 h-96 bg-gradient-to-b from-transparent to-[#111725] w-full" />
diff --git a/apps/typescriptcourse/src/components/app/layout.tsx b/apps/typescriptcourse/src/components/app/layout.tsx
index 9112de0ecc..9f913e30ee 100644
--- a/apps/typescriptcourse/src/components/app/layout.tsx
+++ b/apps/typescriptcourse/src/components/app/layout.tsx
@@ -51,9 +51,13 @@ const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
         noindex={noIndex}
       />
       <div className={className}>
-        {navigation ? navigation : isNull(navigation) ? null : <Navigation />}
-        <div className="flex flex-col justify-center flex-grow">{children}</div>
-        {footer ? footer : isNull(footer) ? null : <Footer />}
+        <>
+          {navigation ? navigation : isNull(navigation) ? null : <Navigation />}
+          <div className="flex flex-col justify-center flex-grow">
+            {children}
+          </div>
+          {footer ? footer : isNull(footer) ? null : <Footer />}
+        </>
       </div>
     </>
   )

From af4e0a8e8b155d3621571cfb4e372dc3b0f56e0e Mon Sep 17 00:00:00 2001
From: Vojta Holik <vojta@egghead.io>
Date: Fri, 29 Jul 2022 14:49:26 +0200
Subject: [PATCH 6/7] chore: bump react and its types to 18 across repo

---
 apps/badass/package.json                      |    8 +-
 apps/compilersforhumans/package.json          |    9 +-
 apps/cssdestructured/package.json             |    9 +-
 apps/engmanagement/package.json               |    8 +-
 apps/escuelafrontend/package.json             |   10 +-
 apps/fronttoback/package.json                 |    8 +-
 apps/kcdbundle/package.json                   |    9 +-
 apps/keyboardlegend/package.json              |    9 +-
 apps/next-product-starter/package.json        |    9 +-
 apps/protailwind/package.json                 |    8 +-
 apps/skillrecordings/package.json             |    9 +-
 apps/testingaccessibility/package.json        |    8 +-
 apps/total-typescript/package.json            |    8 +-
 apps/tsforjs/package.json                     |    8 +-
 apps/typescriptcourse/package.json            |    9 +-
 packages/analytics/package.json               |    8 +-
 packages/auth/package.json                    |    8 +-
 packages/axios/package.json                   |    4 +-
 packages/commerce/package.json                |    8 +-
 packages/config/package.json                  |    4 +-
 packages/convertkit/package.json              |    8 +-
 packages/cookies/package.json                 |    4 +-
 .../templates/next/package.json               |    8 +-
 packages/eslint-config-custom/package.json    |    6 +-
 packages/player/package.json                  |    8 +-
 packages/quiz/package.json                    |    8 +-
 packages/react/package.json                   |    8 +-
 packages/scripts/package.json                 |    4 +-
 packages/skill-api/package.json               |    8 +-
 packages/stripe/package.json                  |    8 +-
 packages/time/package.json                    |    4 +-
 packages/types/package.json                   |    4 +-
 packages/viewer/package.json                  |    8 +-
 pnpm-lock.yaml                                | 2492 ++++++++---------
 34 files changed, 1358 insertions(+), 1381 deletions(-)

diff --git a/apps/badass/package.json b/apps/badass/package.json
index af5367aa2e..87555f0855 100644
--- a/apps/badass/package.json
+++ b/apps/badass/package.json
@@ -73,9 +73,9 @@
     "pluralize": "^8.0.0",
     "postcss": "^8.4.14",
     "query-string": "^7.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-countdown": "^2.3.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-hot-toast": "^2.2.0",
     "react-markdown": "^8.0.2",
     "react-refractor": "^2.1.7",
@@ -108,8 +108,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-scroll": "^1.8.3",
     "@types/speakingurl": "^13.0.3",
     "assert": "^2.0.0",
diff --git a/apps/compilersforhumans/package.json b/apps/compilersforhumans/package.json
index 5a45a23c39..5403c5870d 100644
--- a/apps/compilersforhumans/package.json
+++ b/apps/compilersforhumans/package.json
@@ -54,14 +54,13 @@
     "lodash": "^4.17.21",
     "mdx-prism": "^0.3.4",
     "next": "^12.2.3",
-
     "next-sitemap": "^3.0.5",
     "next-themes": "^0.1.1",
     "pluralize": "^8.0.0",
     "query-string": "^7.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-countdown": "^2.3.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-markdown": "^7.1.0",
     "react-scroll": "^1.8.6",
     "react-stripe-checkout": "^2.6.3",
@@ -94,8 +93,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-scroll": "^1.8.3",
     "@types/remove-markdown": "^0.3.1",
     "@types/three": "^0.141.0",
diff --git a/apps/cssdestructured/package.json b/apps/cssdestructured/package.json
index 3485a39caa..8cf73e819f 100644
--- a/apps/cssdestructured/package.json
+++ b/apps/cssdestructured/package.json
@@ -69,15 +69,14 @@
     "lodash": "^4.17.21",
     "mdx-prism": "^0.3.4",
     "next": "^12.2.3",
-
     "next-sitemap": "^3.0.5",
     "next-themes": "^0.1.1",
     "pluralize": "^8.0.0",
     "postcss": "^8.4.14",
     "query-string": "^7.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-countdown": "^2.3.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-hot-toast": "^2.2.0",
     "react-intersection-observer-hook": "^2.0.3",
     "react-markdown": "^7.1.0",
@@ -111,8 +110,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-scroll": "^1.8.3",
     "@types/react-syntax-highlighter": "^13.5.2",
     "assert": "^2.0.0",
diff --git a/apps/engmanagement/package.json b/apps/engmanagement/package.json
index 0eb56fb795..d8f22d552f 100644
--- a/apps/engmanagement/package.json
+++ b/apps/engmanagement/package.json
@@ -74,9 +74,9 @@
     "preact": "^10.7.2",
     "preact-render-to-string": "^5.2.0",
     "query-string": "^7.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-countdown": "^2.3.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-hook-form": "^7.29.0",
     "react-hot-toast": "^2.2.0",
     "react-markdown": "^7.1.0",
@@ -110,8 +110,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-scroll": "^1.8.3",
     "@types/uuid": "^8.3.4",
     "assert": "^2.0.0",
diff --git a/apps/escuelafrontend/package.json b/apps/escuelafrontend/package.json
index 7b341d25f1..400d5f0156 100644
--- a/apps/escuelafrontend/package.json
+++ b/apps/escuelafrontend/package.json
@@ -76,7 +76,7 @@
     "mjml": "^4.12.0",
     "next": "^12.2.3",
     "next-auth": "^4.10.2",
-    "next-mdx-remote": "^4.0.0",
+    "next-mdx-remote": "^4.1.0",
     "next-sitemap": "^3.0.5",
     "next-themes": "^0.1.1",
     "nodemailer": "^6.7.2",
@@ -85,9 +85,9 @@
     "playwright-core": "1.15.0",
     "postcss": "^8.4.14",
     "query-string": "^7.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-countdown": "^2.3.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-hook-form": "^7.29.0",
     "react-markdown": "^7.1.0",
     "react-scroll": "^1.8.6",
@@ -117,8 +117,8 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-scroll": "^1.8.3",
     "assert": "^2.0.0",
     "commander": "^8.3.0",
diff --git a/apps/fronttoback/package.json b/apps/fronttoback/package.json
index d896da1721..c2cde4c3d5 100644
--- a/apps/fronttoback/package.json
+++ b/apps/fronttoback/package.json
@@ -22,8 +22,8 @@
     "next": "^12.2.3",
     "next-compose-plugins": "^2.2.1",
     "next-sitemap": "^3.0.5",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@next/env": "^12.2.2",
@@ -33,8 +33,8 @@
     "@types/mdx": "^2.0.2",
     "@types/mdx-js__react": "^1.5.5",
     "@types/node": "^17.0.0",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "dotenv-flow": "^3.2.0",
     "eslint": "^8.19.0",
     "eslint-config-custom": "workspace:*",
diff --git a/apps/kcdbundle/package.json b/apps/kcdbundle/package.json
index ef8e0871f8..a1dbde5af8 100644
--- a/apps/kcdbundle/package.json
+++ b/apps/kcdbundle/package.json
@@ -59,15 +59,14 @@
     "lodash": "^4.17.21",
     "mdx-prism": "^0.3.4",
     "next": "^12.2.3",
-
     "next-sitemap": "^3.0.5",
     "next-themes": "^0.1.1",
     "pluralize": "^8.0.0",
     "postcss": "^8.4.14",
     "query-string": "^7.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-countdown": "^2.3.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-markdown": "^7.1.0",
     "react-scroll": "^1.8.6",
     "react-stripe-checkout": "^2.6.3",
@@ -95,8 +94,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-scroll": "^1.8.3",
     "assert": "^2.0.0",
     "commander": "^8.3.0",
diff --git a/apps/keyboardlegend/package.json b/apps/keyboardlegend/package.json
index 8a5c2b159b..db45445d59 100644
--- a/apps/keyboardlegend/package.json
+++ b/apps/keyboardlegend/package.json
@@ -66,15 +66,14 @@
     "lodash": "^4.17.21",
     "mdx-prism": "^0.3.4",
     "next": "^12.2.3",
-
     "next-sitemap": "^3.0.5",
     "next-themes": "^0.1.1",
     "pluralize": "^8.0.0",
     "postcss": "^8.4.14",
     "query-string": "^7.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-countdown": "^2.3.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-markdown": "^7.1.0",
     "react-scroll": "^1.8.6",
     "react-stripe-checkout": "^2.6.3",
@@ -105,8 +104,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-scroll": "^1.8.3",
     "assert": "^2.0.0",
     "commander": "^8.3.0",
diff --git a/apps/next-product-starter/package.json b/apps/next-product-starter/package.json
index 18972cb753..d4b0885f8f 100644
--- a/apps/next-product-starter/package.json
+++ b/apps/next-product-starter/package.json
@@ -68,16 +68,15 @@
     "mdast-util-to-markdown": "^1.2.6",
     "mdx-prism": "^0.3.4",
     "next": "^12.2.3",
-
     "next-sitemap": "^3.0.5",
     "next-themes": "^0.1.1",
     "next-transpile-modules": "^9.0.0",
     "pluralize": "^8.0.0",
     "postcss": "^8.4.14",
     "query-string": "^7.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-countdown": "^2.3.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-markdown": "^7.1.0",
     "react-scroll": "^1.8.6",
     "react-stripe-checkout": "^2.6.3",
@@ -113,8 +112,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-scroll": "^1.8.3",
     "assert": "^2.0.0",
     "commander": "^8.3.0",
diff --git a/apps/protailwind/package.json b/apps/protailwind/package.json
index 6d7d20ddc5..854fbbfc10 100644
--- a/apps/protailwind/package.json
+++ b/apps/protailwind/package.json
@@ -68,8 +68,8 @@
     "next": "^12.2.3",
     "next-compose-plugins": "^2.2.1",
     "next-sitemap": "^3.0.5",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-hot-toast": "^2.2.0",
     "react-markdown": "^8.0.3",
     "react-query": "^3.39.1",
@@ -90,8 +90,8 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/speakingurl": "^13.0.3",
     "@types/three": "^0.141.0",
     "autoprefixer": "^10.4.2",
diff --git a/apps/skillrecordings/package.json b/apps/skillrecordings/package.json
index 4c07c2758c..f676da2252 100644
--- a/apps/skillrecordings/package.json
+++ b/apps/skillrecordings/package.json
@@ -68,15 +68,14 @@
     "mdx-embed": "^0.0.22",
     "mdx-prism": "^0.3.4",
     "next": "^12.2.3",
-
     "next-sitemap": "^3.0.5",
     "next-themes": "^0.1.1",
     "pluralize": "^8.0.0",
     "postcss": "^8.4.14",
     "query-string": "^7.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-countdown": "^2.3.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-markdown": "^7.1.0",
     "react-scroll": "^1.8.6",
     "react-stripe-checkout": "^2.6.3",
@@ -105,8 +104,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-scroll": "^1.8.3",
     "assert": "^2.0.0",
     "babel-jest": "^27.5.1",
diff --git a/apps/testingaccessibility/package.json b/apps/testingaccessibility/package.json
index 8a0d56fd6f..36057f4019 100644
--- a/apps/testingaccessibility/package.json
+++ b/apps/testingaccessibility/package.json
@@ -124,9 +124,9 @@
     "pluralize": "^8.0.0",
     "postcss": "^8.4.14",
     "query-string": "^7.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-countdown": "^2.3.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-hook-form": "^7.29.0",
     "react-hot-toast": "^2.2.0",
     "react-markdown": "^8.0.0",
@@ -182,8 +182,8 @@
     "@types/nodemailer": "^6.4.4",
     "@types/pdfkit": "^0.12.6",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-scroll": "^1.8.3",
     "@types/sanitize-html": "^2.6.2",
     "@types/speakingurl": "^13.0.3",
diff --git a/apps/total-typescript/package.json b/apps/total-typescript/package.json
index 44ecb3bfb5..7a91842307 100644
--- a/apps/total-typescript/package.json
+++ b/apps/total-typescript/package.json
@@ -26,8 +26,8 @@
     "framer-motion": "^6.4.1",
     "next": "^12.2.3",
     "next-sitemap": "^3.0.5",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-hook-form": "^7.29.0",
     "zod": "^3.14.4"
   },
@@ -38,8 +38,8 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "autoprefixer": "^10.4.2",
     "eslint": "^8.19.0",
     "eslint-config-custom": "workspace:*",
diff --git a/apps/tsforjs/package.json b/apps/tsforjs/package.json
index e4c340f971..d9e6d6f56a 100644
--- a/apps/tsforjs/package.json
+++ b/apps/tsforjs/package.json
@@ -18,8 +18,8 @@
     "feed": "^4.2.2",
     "next": "^12.2.3",
     "next-sitemap": "^3.0.5",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
@@ -27,8 +27,8 @@
     "@skillrecordings/tsconfig": "workspace:*",
     "@skillrecordings/types": "workspace:*",
     "@types/node": "^17.0.0",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.25",
     "dotenv-flow": "^3.2.0",
     "eslint": "^8.19.0",
diff --git a/apps/typescriptcourse/package.json b/apps/typescriptcourse/package.json
index 30aa6fa505..1b697c87de 100644
--- a/apps/typescriptcourse/package.json
+++ b/apps/typescriptcourse/package.json
@@ -76,15 +76,14 @@
     "mdast-util-to-markdown": "^1.2.6",
     "mdx-prism": "^0.3.4",
     "next": "^12.2.3",
-
     "next-sitemap": "^3.0.5",
     "next-themes": "^0.1.1",
     "pluralize": "^8.0.0",
     "postcss": "^8.4.14",
     "query-string": "^7.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-countdown": "^2.3.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-hot-toast": "^2.2.0",
     "react-markdown": "^7.1.0",
     "react-refractor": "^2.1.7",
@@ -125,8 +124,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-scroll": "^1.8.3",
     "@types/speakingurl": "^13.0.3",
     "@types/three": "^0.141.0",
diff --git a/packages/analytics/package.json b/packages/analytics/package.json
index e3e2b73522..7a8dd3793d 100644
--- a/packages/analytics/package.json
+++ b/packages/analytics/package.json
@@ -33,14 +33,14 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "eslint": "^8.19.0",
     "eslint-config-custom": "workspace:*",
     "jest-localstorage-mock": "^2.4.14",
     "next": "^12.2.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
diff --git a/packages/auth/package.json b/packages/auth/package.json
index 82e1e001ac..d6bc5b8203 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -48,8 +48,8 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "eslint": "^8.19.0",
     "eslint-config-custom": "workspace:*",
     "jest-localstorage-mock": "^2.4.14",
@@ -57,8 +57,8 @@
     "mockdate": "^3.0.5",
     "msw": "^0.35.0",
     "next": "^12.2.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
diff --git a/packages/axios/package.json b/packages/axios/package.json
index d360a52b90..1ae47cd01d 100644
--- a/packages/axios/package.json
+++ b/packages/axios/package.json
@@ -27,8 +27,8 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "axios": "^0.26.0",
     "esbuild-node-tsc": "^1.6.1",
     "eslint": "^8.19.0",
diff --git a/packages/commerce/package.json b/packages/commerce/package.json
index acc0aea279..d7a00e94a6 100644
--- a/packages/commerce/package.json
+++ b/packages/commerce/package.json
@@ -47,8 +47,8 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-scroll": "^1.8.3",
     "@xstate/react": "=1.5.1",
     "assert": "^2.0.0",
@@ -58,8 +58,8 @@
     "framer-motion": "^6.4.1",
     "msw": "^0.35.0",
     "next": "^12.2.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-test-renderer": "^17.0.2",
     "stripe": "^8.186.1",
     "typescript": "^4.7.4",
diff --git a/packages/config/package.json b/packages/config/package.json
index 3a4e1d463e..2802d086de 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -24,8 +24,8 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "esbuild-node-tsc": "^1.6.1",
     "eslint": "^8.19.0",
     "eslint-config-custom": "workspace:*",
diff --git a/packages/convertkit/package.json b/packages/convertkit/package.json
index 65e86dfb87..f50af08912 100644
--- a/packages/convertkit/package.json
+++ b/packages/convertkit/package.json
@@ -41,16 +41,16 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/yup": "^0.29.13",
     "esbuild-node-tsc": "^1.6.1",
     "eslint": "^8.19.0",
     "eslint-config-custom": "workspace:*",
     "framer-motion": "^6.4.1",
     "next": "^12.2.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
diff --git a/packages/cookies/package.json b/packages/cookies/package.json
index 44d04afaf4..8c090b71e4 100644
--- a/packages/cookies/package.json
+++ b/packages/cookies/package.json
@@ -32,8 +32,8 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "eslint": "^8.19.0",
     "eslint-config-custom": "workspace:*",
     "typescript": "^4.7.4"
diff --git a/packages/create-skill-app/templates/next/package.json b/packages/create-skill-app/templates/next/package.json
index 8059eb28b0..e0410729ae 100644
--- a/packages/create-skill-app/templates/next/package.json
+++ b/packages/create-skill-app/templates/next/package.json
@@ -40,8 +40,8 @@
     "next-sitemap": "^3.0.5",
     "nodemailer": "^6.7.2",
     "nodemailer-postmark-transport": "^5.2.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "slugify": "^1.6.2",
     "uuid": "^8.3.2",
     "stripe": "^8.186.1"
@@ -59,8 +59,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/nprogress": "^0.2.0",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/uuid": "^8.3.4",
     "dotenv-flow": "^3.2.0",
     "eslint": "^8.19.0",
diff --git a/packages/eslint-config-custom/package.json b/packages/eslint-config-custom/package.json
index 1b12838802..b41a825310 100644
--- a/packages/eslint-config-custom/package.json
+++ b/packages/eslint-config-custom/package.json
@@ -13,11 +13,11 @@
   "devDependencies": {
     "eslint": "^8.19.0",
     "eslint-config-react-app": "^7.0.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "typescript": "^4.7.4"
   },
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/player/package.json b/packages/player/package.json
index 69ca5e042a..d9c7b2b711 100644
--- a/packages/player/package.json
+++ b/packages/player/package.json
@@ -50,16 +50,16 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@xstate/react": "=1.5.1",
     "assert": "^2.0.0",
     "eslint": "^8.19.0",
     "eslint-config-custom": "workspace:*",
     "lodash": "^4.17.21",
     "msw": "^0.35.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-test-renderer": "^17.0.2",
     "sass": "^1.43.4",
     "typescript": "^4.7.4",
diff --git a/packages/quiz/package.json b/packages/quiz/package.json
index 3cfd64d008..d1e444c177 100644
--- a/packages/quiz/package.json
+++ b/packages/quiz/package.json
@@ -54,8 +54,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/reach__auto-id": "^0.3.1",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-syntax-highlighter": "^13.5.2",
     "@xstate/react": "=1.5.1",
     "assert": "^2.0.0",
@@ -63,8 +63,8 @@
     "eslint": "^8.19.0",
     "lodash": "^4.17.21",
     "next": "^12.2.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-test-renderer": "^17.0.2",
     "sass": "^1.43.4",
     "typescript": "^4.7.4",
diff --git a/packages/react/package.json b/packages/react/package.json
index 7f01eaaf32..610682f072 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -44,8 +44,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/nprogress": "^0.2.0",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@xstate/react": "=1.5.1",
     "esbuild-node-tsc": "^1.6.1",
     "eslint": "^8.19.0",
@@ -53,8 +53,8 @@
     "lodash": "^4.17.21",
     "msw": "^0.35.0",
     "next": "^12.2.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "sass": "^1.43.4",
     "typescript": "^4.7.4",
     "xstate": "=4.23.1"
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 53d3a9b1e2..76ca39393a 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -26,8 +26,8 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "jest-environment-jsdom": "^27.5.1",
     "jest-expect-message": "^1.0.2",
     "typescript": "^4.7.4"
diff --git a/packages/skill-api/package.json b/packages/skill-api/package.json
index e2baddcead..4441d15226 100644
--- a/packages/skill-api/package.json
+++ b/packages/skill-api/package.json
@@ -59,8 +59,8 @@
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
     "@types/oauth": "^0.9.1",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/sanitize-html": "^2.6.2",
     "autoprefixer": "^10.4.2",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
@@ -78,8 +78,8 @@
     "nodemailer-postmark-transport": "^5.2.1",
     "postcss": "^8.4.14",
     "postcss-cli": "^9.0.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "typescript": "^4.7.4",
     "whatwg-fetch": "^3.6.2"
   },
diff --git a/packages/stripe/package.json b/packages/stripe/package.json
index 7e21cb64b9..1af4571f54 100644
--- a/packages/stripe/package.json
+++ b/packages/stripe/package.json
@@ -28,13 +28,13 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "esbuild-node-tsc": "^1.6.1",
     "eslint-config-custom": "workspace:*",
     "next": "^12.2.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "stripe": "^8.186.1",
     "typescript": "^4.7.4"
   },
diff --git a/packages/time/package.json b/packages/time/package.json
index c4da347724..7d1a3dcef0 100644
--- a/packages/time/package.json
+++ b/packages/time/package.json
@@ -27,8 +27,8 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "eslint": "^8.19.0",
     "eslint-config-custom": "workspace:*",
     "typescript": "^4.7.4"
diff --git a/packages/types/package.json b/packages/types/package.json
index a4ac42ca55..73b8dfcbeb 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -23,8 +23,8 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "eslint": "^8.19.0",
     "eslint-config-custom": "workspace:*",
     "typescript": "^4.7.4"
diff --git a/packages/viewer/package.json b/packages/viewer/package.json
index 5b800452af..05e41173af 100644
--- a/packages/viewer/package.json
+++ b/packages/viewer/package.json
@@ -36,15 +36,15 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^17.0.0",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@xstate/react": "=1.5.1",
     "esbuild-node-tsc": "^1.6.1",
     "eslint": "^8.19.0",
     "eslint-config-custom": "workspace:*",
     "lodash": "^4.17.21",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "typescript": "^4.7.4",
     "xstate": "=4.23.1"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0fb557a9ca..afe61e88a8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -69,8 +69,8 @@ importers:
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
       '@types/pluralize': ^0.0.29
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/react-scroll': ^1.8.3
       '@types/speakingurl': ^13.0.3
       '@xstate/react': '=1.5.1'
@@ -104,9 +104,9 @@ importers:
       postcss-preset-env: ^7.4.2
       prettier: ^2.6.2
       query-string: ^7.1.1
-      react: 17.0.2
+      react: 18.2.0
       react-countdown: ^2.3.2
-      react-dom: 17.0.2
+      react-dom: 18.2.0
       react-hot-toast: ^2.2.0
       react-markdown: ^8.0.2
       react-refractor: ^2.1.7
@@ -127,13 +127,13 @@ importers:
       xstate: '=4.23.1'
       yup: ^0.32.11
     dependencies:
-      '@headlessui/react': 1.6.1_sfoxds7t5ydpegc3knd667wn6m
-      '@heroicons/react': 1.0.6_react@17.0.2
+      '@headlessui/react': 1.6.1_biqbaboplfbrettd7655fr4n2y
+      '@heroicons/react': 1.0.6_react@18.2.0
       '@next/mdx': 12.1.5_@mdx-js+loader@1.6.22
-      '@portabletext/react': 1.0.6_react@17.0.2
-      '@reach/dialog': 0.16.2_k2mvpji5i2ojml6m4ftklg47pa
+      '@portabletext/react': 1.0.6_react@18.2.0
+      '@reach/dialog': 0.16.2_bb2bxwco6ptpubzwpazr52qf6i
       '@sanity/client': 3.3.2
-      '@sentry/nextjs': 6.19.3_next@12.2.3+react@17.0.2
+      '@sentry/nextjs': 6.19.3_next@12.2.3+react@18.2.0
       '@skillrecordings/analytics': link:../../packages/analytics
       '@skillrecordings/auth': link:../../packages/auth
       '@skillrecordings/axios': link:../../packages/axios
@@ -149,8 +149,8 @@ importers:
       '@skillrecordings/viewer': link:../../packages/viewer
       '@stripe/stripe-js': 1.21.1
       '@tailwindcss/typography': 0.5.2_tailwindcss@3.1.4
-      '@tippyjs/react': 4.2.6_sfoxds7t5ydpegc3knd667wn6m
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@tippyjs/react': 4.2.6_biqbaboplfbrettd7655fr4n2y
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       autoprefixer: 10.4.7_postcss@8.4.14
       axios: 0.26.1
       classnames: 2.3.1
@@ -160,54 +160,54 @@ importers:
       date-fns: 2.28.0
       dotenv-flow: 3.2.0
       focus-visible: 5.2.0
-      formik: 2.2.9_react@17.0.2
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
+      formik: 2.2.9_react@18.2.0
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
       groq: 2.15.0
       hls.js: 1.1.5
       lodash: 4.17.21
       mdx-prism: 0.3.4
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
       next-sitemap: 3.1.7_next@12.2.3
-      next-themes: 0.1.1_lomk7fwgwcwgv5os6tnu5kl3ge
+      next-themes: 0.1.1_53oqlnqnxhbetdy4ljlkkvmoby
       pluralize: 8.0.0
       postcss: 8.4.14
       query-string: 7.1.1
-      react: 17.0.2
-      react-countdown: 2.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-dom: 17.0.2_react@17.0.2
-      react-hot-toast: 2.2.0_sfoxds7t5ydpegc3knd667wn6m
-      react-markdown: 8.0.3_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-refractor: 2.1.7_react@17.0.2
-      react-scroll: 1.8.7_sfoxds7t5ydpegc3knd667wn6m
+      react: 18.2.0
+      react-countdown: 2.3.2_biqbaboplfbrettd7655fr4n2y
+      react-dom: 18.2.0_react@18.2.0
+      react-hot-toast: 2.2.0_biqbaboplfbrettd7655fr4n2y
+      react-markdown: 8.0.3_3hx2ussxxho4jajbwrd6gq34qe
+      react-refractor: 2.1.7_react@18.2.0
+      react-scroll: 1.8.7_biqbaboplfbrettd7655fr4n2y
       react-stripe-checkout: 2.6.3
-      react-use: 17.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-use-clipboard: 1.0.8_sfoxds7t5ydpegc3knd667wn6m
+      react-use: 17.3.2_biqbaboplfbrettd7655fr4n2y
+      react-use-clipboard: 1.0.8_biqbaboplfbrettd7655fr4n2y
       refractor: 4.5.0
       rehype: 12.0.1
       remark-code-titles: 0.1.2
       remark-footnotes: 4.0.1
       remark-slug: 7.0.1
       speakingurl: 14.0.1
-      swr: 1.3.0_react@17.0.2
+      swr: 1.3.0_react@18.2.0
       xstate: 4.23.1
       yup: 0.32.11
     devDependencies:
       '@babel/plugin-transform-react-jsx': 7.16.0
-      '@mdx-js/loader': 1.6.22_react@17.0.2
+      '@mdx-js/loader': 1.6.22_react@18.2.0
       '@portabletext/types': 1.0.3
       '@skillrecordings/scripts': link:../../packages/scripts
       '@skillrecordings/tsconfig': link:../../packages/tsconfig
       '@skillrecordings/types': link:../../packages/types
       '@testing-library/jest-dom': 5.15.0
-      '@testing-library/react': 12.1.2_sfoxds7t5ydpegc3knd667wn6m
+      '@testing-library/react': 12.1.2_biqbaboplfbrettd7655fr4n2y
       '@types/cookie': 0.4.1
       '@types/jest': 27.5.2
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
       '@types/pluralize': 0.0.29
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/react-scroll': 1.8.3
       '@types/speakingurl': 13.0.3
       assert: 2.0.0
@@ -219,7 +219,7 @@ importers:
       next-images: 1.8.4
       postcss-preset-env: 7.7.2_postcss@8.4.14
       prettier: 2.6.2
-      react-test-renderer: 17.0.2_react@17.0.2
+      react-test-renderer: 17.0.2_react@18.2.0
       tailwindcss: 3.1.4
       typescript: 4.7.4
 
@@ -258,8 +258,8 @@ importers:
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
       '@types/pluralize': ^0.0.29
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/react-scroll': ^1.8.3
       '@types/remove-markdown': ^0.3.1
       '@types/three': ^0.141.0
@@ -296,9 +296,9 @@ importers:
       postcss-preset-env: ^7.4.2
       prettier: ^2.6.2
       query-string: ^7.1.1
-      react: 17.0.2
+      react: 18.2.0
       react-countdown: ^2.3.2
-      react-dom: 17.0.2
+      react-dom: 18.2.0
       react-markdown: ^7.1.0
       react-scroll: ^1.8.6
       react-stripe-checkout: ^2.6.3
@@ -321,9 +321,9 @@ importers:
       yup: ^0.32.11
     dependencies:
       '@next/mdx': 12.1.5_@mdx-js+loader@1.6.22
-      '@reach/dialog': 0.16.2_k2mvpji5i2ojml6m4ftklg47pa
-      '@react-three/drei': 7.20.2_fpub33zqr4d2tfulvx5iw6lfgm
-      '@react-three/fiber': 7.0.27_sb5g6l453mk54n2prv33gp6u6q
+      '@reach/dialog': 0.16.2_bb2bxwco6ptpubzwpazr52qf6i
+      '@react-three/drei': 7.20.2_5fmtig3otsjt2gwua6nanmpzta
+      '@react-three/fiber': 7.0.27_l64coo4po4cwrmp7zqxdp2wxuq
       '@skillrecordings/analytics': link:../../packages/analytics
       '@skillrecordings/auth': link:../../packages/auth
       '@skillrecordings/axios': link:../../packages/axios
@@ -339,8 +339,8 @@ importers:
       '@stripe/stripe-js': 1.21.1
       '@tailwindcss/forms': 0.5.2_tailwindcss@3.1.4
       '@tailwindcss/typography': 0.5.2_tailwindcss@3.1.4
-      '@tippyjs/react': 4.2.6_sfoxds7t5ydpegc3knd667wn6m
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@tippyjs/react': 4.2.6_biqbaboplfbrettd7655fr4n2y
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       airtable: 0.11.1
       autoprefixer: 10.4.7_postcss@8.4.14
       axios: 0.26.1
@@ -350,32 +350,32 @@ importers:
       date-fns: 2.28.0
       dotenv-flow: 3.2.0
       focus-visible: 5.2.0
-      formik: 2.2.9_react@17.0.2
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
+      formik: 2.2.9_react@18.2.0
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
       glsl-noise: 0.0.0
       glslify: 7.1.1
       lodash: 4.17.21
       mdx-prism: 0.3.4
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
       next-sitemap: 3.1.7_next@12.2.3
-      next-themes: 0.1.1_lomk7fwgwcwgv5os6tnu5kl3ge
+      next-themes: 0.1.1_53oqlnqnxhbetdy4ljlkkvmoby
       pluralize: 8.0.0
       query-string: 7.1.1
-      react: 17.0.2
-      react-countdown: 2.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-dom: 17.0.2_react@17.0.2
-      react-markdown: 7.1.0_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-scroll: 1.8.7_sfoxds7t5ydpegc3knd667wn6m
+      react: 18.2.0
+      react-countdown: 2.3.2_biqbaboplfbrettd7655fr4n2y
+      react-dom: 18.2.0_react@18.2.0
+      react-markdown: 7.1.0_3hx2ussxxho4jajbwrd6gq34qe
+      react-scroll: 1.8.7_biqbaboplfbrettd7655fr4n2y
       react-stripe-checkout: 2.6.3
-      react-use: 17.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-use-clipboard: 1.0.7_sfoxds7t5ydpegc3knd667wn6m
+      react-use: 17.3.2_biqbaboplfbrettd7655fr4n2y
+      react-use-clipboard: 1.0.7_biqbaboplfbrettd7655fr4n2y
       rehype: 12.0.0
       remark-code-titles: 0.1.2
       remark-footnotes: 4.0.1
       remark-slug: 7.0.1
       remove-markdown: 0.3.0
       stripe: 8.186.1
-      swr: 1.3.0_react@17.0.2
+      swr: 1.3.0_react@18.2.0
       tailwindcss-autofill: 1.0.2_tailwindcss@3.1.4
       tailwindcss-text-fill: 0.2.0_tailwindcss@3.1.4
       three: 0.134.0
@@ -383,20 +383,20 @@ importers:
       yup: 0.32.11
     devDependencies:
       '@babel/plugin-transform-react-jsx': 7.16.0
-      '@mdx-js/loader': 1.6.22_react@17.0.2
+      '@mdx-js/loader': 1.6.22_react@18.2.0
       '@skillrecordings/scripts': link:../../packages/scripts
       '@skillrecordings/tsconfig': link:../../packages/tsconfig
       '@skillrecordings/types': link:../../packages/types
       '@testing-library/jest-dom': 5.15.0
-      '@testing-library/react': 12.1.2_sfoxds7t5ydpegc3knd667wn6m
+      '@testing-library/react': 12.1.2_biqbaboplfbrettd7655fr4n2y
       '@types/cookie': 0.4.1
       '@types/jest': 27.5.2
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
       '@types/pluralize': 0.0.29
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/react-scroll': 1.8.3
       '@types/remove-markdown': 0.3.1
       '@types/three': 0.141.0
@@ -412,7 +412,7 @@ importers:
       postcss: 8.4.14
       postcss-preset-env: 7.7.2_postcss@8.4.14
       prettier: 2.6.2
-      react-test-renderer: 17.0.2_react@17.0.2
+      react-test-renderer: 17.0.2_react@18.2.0
       tailwindcss: 3.1.4
       typescript: 4.7.4
 
@@ -452,8 +452,8 @@ importers:
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
       '@types/pluralize': ^0.0.29
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/react-scroll': ^1.8.3
       '@types/react-syntax-highlighter': ^13.5.2
       '@xstate/react': '=1.5.1'
@@ -487,9 +487,9 @@ importers:
       postcss-preset-env: ^7.4.2
       prettier: ^2.6.2
       query-string: ^7.1.1
-      react: 17.0.2
+      react: 18.2.0
       react-countdown: ^2.3.2
-      react-dom: 17.0.2
+      react-dom: 18.2.0
       react-hot-toast: ^2.2.0
       react-intersection-observer-hook: ^2.0.3
       react-markdown: ^7.1.0
@@ -511,10 +511,10 @@ importers:
       xstate: '=4.23.1'
       yup: ^0.32.11
     dependencies:
-      '@mdx-js/react': 1.6.22_react@17.0.2
+      '@mdx-js/react': 1.6.22_react@18.2.0
       '@next/mdx': 12.1.5_6vwedlnwdegenaf6jioaeirvlu
-      '@reach/dialog': 0.16.2_k2mvpji5i2ojml6m4ftklg47pa
-      '@sanity/block-content-to-react': 3.0.0_react@17.0.2
+      '@reach/dialog': 0.16.2_bb2bxwco6ptpubzwpazr52qf6i
+      '@sanity/block-content-to-react': 3.0.0_react@18.2.0
       '@sanity/client': 3.3.2
       '@skillrecordings/analytics': link:../../packages/analytics
       '@skillrecordings/auth': link:../../packages/auth
@@ -530,53 +530,53 @@ importers:
       '@stripe/stripe-js': 1.21.1
       '@tailwindcss/forms': 0.5.2_tailwindcss@3.1.4
       '@tailwindcss/typography': 0.5.2_tailwindcss@3.1.4
-      '@tippyjs/react': 4.2.6_sfoxds7t5ydpegc3knd667wn6m
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@tippyjs/react': 4.2.6_biqbaboplfbrettd7655fr4n2y
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       autoprefixer: 10.4.7_postcss@8.4.14
       axios: 0.26.1
       client-oauth2: 4.3.3
       cookie: 0.5.0
       date-fns: 2.28.0
       dotenv-flow: 3.2.0
-      formik: 2.2.9_react@17.0.2
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
+      formik: 2.2.9_react@18.2.0
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
       groq: 2.15.0
       lodash: 4.17.21
       mdx-prism: 0.3.4
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
       next-sitemap: 3.1.7_next@12.2.3
-      next-themes: 0.1.1_lomk7fwgwcwgv5os6tnu5kl3ge
+      next-themes: 0.1.1_53oqlnqnxhbetdy4ljlkkvmoby
       pluralize: 8.0.0
       postcss: 8.4.14
       query-string: 7.1.1
-      react: 17.0.2
-      react-countdown: 2.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-dom: 17.0.2_react@17.0.2
-      react-hot-toast: 2.2.0_sfoxds7t5ydpegc3knd667wn6m
-      react-intersection-observer-hook: 2.0.3_react@17.0.2
-      react-markdown: 7.1.0_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-scroll: 1.8.7_sfoxds7t5ydpegc3knd667wn6m
+      react: 18.2.0
+      react-countdown: 2.3.2_biqbaboplfbrettd7655fr4n2y
+      react-dom: 18.2.0_react@18.2.0
+      react-hot-toast: 2.2.0_biqbaboplfbrettd7655fr4n2y
+      react-intersection-observer-hook: 2.0.3_react@18.2.0
+      react-markdown: 7.1.0_3hx2ussxxho4jajbwrd6gq34qe
+      react-scroll: 1.8.7_biqbaboplfbrettd7655fr4n2y
       react-stripe-checkout: 2.6.3
-      react-syntax-highlighter: 15.4.4_react@17.0.2
-      react-use: 17.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-use-clipboard: 1.0.7_sfoxds7t5ydpegc3knd667wn6m
+      react-syntax-highlighter: 15.4.4_react@18.2.0
+      react-use: 17.3.2_biqbaboplfbrettd7655fr4n2y
+      react-use-clipboard: 1.0.7_biqbaboplfbrettd7655fr4n2y
       rehype: 12.0.0
       rehype-shiki: 0.0.9
-      simplebar-react: 2.3.6_sfoxds7t5ydpegc3knd667wn6m
+      simplebar-react: 2.3.6_biqbaboplfbrettd7655fr4n2y
       stripe: 8.186.1
-      swr: 1.3.0_react@17.0.2
+      swr: 1.3.0_react@18.2.0
       tailwindcss-autofill: 1.0.2_tailwindcss@3.1.4
       tailwindcss-text-fill: 0.2.0_tailwindcss@3.1.4
       xstate: 4.23.1
       yup: 0.32.11
     devDependencies:
       '@babel/plugin-transform-react-jsx': 7.16.0
-      '@mdx-js/loader': 1.6.22_react@17.0.2
+      '@mdx-js/loader': 1.6.22_react@18.2.0
       '@skillrecordings/scripts': link:../../packages/scripts
       '@skillrecordings/tsconfig': link:../../packages/tsconfig
       '@skillrecordings/types': link:../../packages/types
       '@testing-library/jest-dom': 5.15.0
-      '@testing-library/react': 12.1.2_sfoxds7t5ydpegc3knd667wn6m
+      '@testing-library/react': 12.1.2_biqbaboplfbrettd7655fr4n2y
       '@types/cookie': 0.4.1
       '@types/jest': 27.5.2
       '@types/lodash': 4.14.180
@@ -584,8 +584,8 @@ importers:
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
       '@types/pluralize': 0.0.29
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/react-scroll': 1.8.3
       '@types/react-syntax-highlighter': 13.5.2
       assert: 2.0.0
@@ -601,7 +601,7 @@ importers:
       postcss-focus-visible: 6.0.4_postcss@8.4.14
       postcss-preset-env: 7.7.2_postcss@8.4.14
       prettier: 2.6.2
-      react-test-renderer: 17.0.2_react@17.0.2
+      react-test-renderer: 17.0.2_react@18.2.0
       tailwindcss: 3.1.4
       typescript: 4.7.4
 
@@ -647,8 +647,8 @@ importers:
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
       '@types/pluralize': ^0.0.29
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/react-scroll': ^1.8.3
       '@types/uuid': ^8.3.4
       '@vercel/tracing-js': ^0.5.1
@@ -694,9 +694,9 @@ importers:
       preact-render-to-string: ^5.2.0
       prettier: ^2.6.2
       query-string: ^7.1.1
-      react: 17.0.2
+      react: 18.2.0
       react-countdown: ^2.3.2
-      react-dom: 17.0.2
+      react-dom: 18.2.0
       react-hook-form: ^7.29.0
       react-hot-toast: ^2.2.0
       react-markdown: ^7.1.0
@@ -720,10 +720,10 @@ importers:
       '@asbjorn/eslint-plugin-groq': 2.0.0
       '@next-auth/prisma-adapter': 1.0.3_next-auth@4.10.2
       '@next/mdx': 12.2.3_@mdx-js+loader@1.6.22
-      '@reach/dialog': 0.16.2_k2mvpji5i2ojml6m4ftklg47pa
-      '@sanity/block-content-to-react': 3.0.0_react@17.0.2
+      '@reach/dialog': 0.16.2_bb2bxwco6ptpubzwpazr52qf6i
+      '@sanity/block-content-to-react': 3.0.0_react@18.2.0
       '@sanity/client': 3.3.2
-      '@sentry/nextjs': 6.19.3_next@12.2.3+react@17.0.2
+      '@sentry/nextjs': 6.19.3_next@12.2.3+react@18.2.0
       '@skillrecordings/analytics': link:../../packages/analytics
       '@skillrecordings/auth': link:../../packages/auth
       '@skillrecordings/axios': link:../../packages/axios
@@ -741,9 +741,9 @@ importers:
       '@stripe/stripe-js': 1.21.1
       '@tailwindcss/forms': 0.5.2_tailwindcss@3.1.4
       '@tailwindcss/typography': 0.5.2_tailwindcss@3.1.4
-      '@tippyjs/react': 4.2.6_sfoxds7t5ydpegc3knd667wn6m
+      '@tippyjs/react': 4.2.6_biqbaboplfbrettd7655fr4n2y
       '@vercel/tracing-js': 0.5.1
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       autoprefixer: 10.4.7_postcss@8.4.14
       axios: 0.26.1
       client-oauth2: 4.3.3
@@ -752,20 +752,20 @@ importers:
       date-fns: 2.28.0
       dotenv-flow: 3.2.0
       focus-visible: 5.2.0
-      formik: 2.2.9_react@17.0.2
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
+      formik: 2.2.9_react@18.2.0
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
       gray-matter: 4.0.3
       groq: 2.15.0
       jest-mock-extended: 2.0.4_g4n3hsjlbmz4ag5o32ytojordu
       jsonwebtoken: 8.5.1
       lodash: 4.17.21
       mdx-prism: 0.3.4
-      next: 12.2.3_bdqedtwv3pefsm7666rf4y5ak4
-      next-auth: 4.10.2_uwv6tj4c6jl3tcycfdgw4fi3ba
-      next-mdx-remote: 3.0.8_sfoxds7t5ydpegc3knd667wn6m
-      next-sanity-image: 3.1.7_nxat2lsbytb3uy2k6j2mhd6hfi
+      next: 12.2.3_x6hpkaqu4dxwl4unajq2h7dx44
+      next-auth: 4.10.2_veosbehjv4o6lw47zt43je3zka
+      next-mdx-remote: 3.0.8_biqbaboplfbrettd7655fr4n2y
+      next-sanity-image: 3.1.7_bxu4txjw6tc3quurwz7gkep6vi
       next-sitemap: 3.1.7_next@12.2.3
-      next-themes: 0.1.1_lomk7fwgwcwgv5os6tnu5kl3ge
+      next-themes: 0.1.1_53oqlnqnxhbetdy4ljlkkvmoby
       nodemailer: 6.7.2
       nodemailer-postmark-transport: 5.2.1_nodemailer@6.7.2
       pluralize: 8.0.0
@@ -773,34 +773,34 @@ importers:
       preact: 10.7.2
       preact-render-to-string: 5.2.0_preact@10.7.2
       query-string: 7.1.1
-      react: 17.0.2
-      react-countdown: 2.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-dom: 17.0.2_react@17.0.2
-      react-hook-form: 7.29.0_react@17.0.2
-      react-hot-toast: 2.2.0_ha54m6pwxcz4gcusjmwevbhi24
-      react-markdown: 7.1.0_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-scroll: 1.8.7_sfoxds7t5ydpegc3knd667wn6m
+      react: 18.2.0
+      react-countdown: 2.3.2_biqbaboplfbrettd7655fr4n2y
+      react-dom: 18.2.0_react@18.2.0
+      react-hook-form: 7.29.0_react@18.2.0
+      react-hot-toast: 2.2.0_npw22p3c4ehm7n7vxn2gqac44u
+      react-markdown: 7.1.0_3hx2ussxxho4jajbwrd6gq34qe
+      react-scroll: 1.8.7_biqbaboplfbrettd7655fr4n2y
       react-stripe-checkout: 2.6.3
-      react-use: 17.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-use-clipboard: 1.0.7_sfoxds7t5ydpegc3knd667wn6m
+      react-use: 17.3.2_biqbaboplfbrettd7655fr4n2y
+      react-use-clipboard: 1.0.7_biqbaboplfbrettd7655fr4n2y
       rehype: 12.0.0
       remark-code-titles: 0.1.2
       remark-footnotes: 4.0.1
       remark-slug: 7.0.1
       stripe: 8.186.1
-      swr: 1.3.0_react@17.0.2
+      swr: 1.3.0_react@18.2.0
       uuid: 8.3.2
       xstate: 4.23.1
       yup: 0.32.11
     devDependencies:
       '@babel/core': 7.16.5
       '@babel/plugin-transform-react-jsx': 7.16.0_@babel+core@7.16.5
-      '@mdx-js/loader': 1.6.22_react@17.0.2
+      '@mdx-js/loader': 1.6.22_react@18.2.0
       '@skillrecordings/scripts': link:../../packages/scripts
       '@skillrecordings/tsconfig': link:../../packages/tsconfig
       '@skillrecordings/types': link:../../packages/types
       '@testing-library/jest-dom': 5.15.0
-      '@testing-library/react': 12.1.2_sfoxds7t5ydpegc3knd667wn6m
+      '@testing-library/react': 12.1.2_biqbaboplfbrettd7655fr4n2y
       '@types/cookie': 0.4.1
       '@types/jest': 27.5.2
       '@types/jsonwebtoken': 8.5.8
@@ -808,8 +808,8 @@ importers:
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
       '@types/pluralize': 0.0.29
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/react-scroll': 1.8.3
       '@types/uuid': 8.3.4
       assert: 2.0.0
@@ -824,7 +824,7 @@ importers:
       next-images: 1.8.4
       postcss-preset-env: 7.7.2_postcss@8.4.14
       prettier: 2.6.2
-      react-test-renderer: 17.0.2_react@17.0.2
+      react-test-renderer: 17.0.2_react@18.2.0
       tailwindcss: 3.1.4
       typescript: 4.7.4
 
@@ -871,8 +871,8 @@ importers:
       '@types/mjml': ^4.7.0
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/react-scroll': ^1.8.3
       '@xstate/react': '=1.5.1'
       assert: ^2.0.0
@@ -899,7 +899,7 @@ importers:
       next-auth: ^4.10.2
       next-compose-plugins: ^2.2.1
       next-images: ^1.8.4
-      next-mdx-remote: ^4.0.0
+      next-mdx-remote: ^4.1.0
       next-sitemap: ^3.0.5
       next-themes: ^0.1.1
       nodemailer: ^6.7.2
@@ -910,9 +910,9 @@ importers:
       postcss-preset-env: ^7.4.2
       prettier: ^2.6.2
       query-string: ^7.1.1
-      react: 17.0.2
+      react: 18.2.0
       react-countdown: ^2.3.2
-      react-dom: 17.0.2
+      react-dom: 18.2.0
       react-hook-form: ^7.29.0
       react-markdown: ^7.1.0
       react-scroll: ^1.8.6
@@ -933,12 +933,12 @@ importers:
       yup: ^0.32.11
     dependencies:
       '@47ng/check-env': 2.1.0
-      '@headlessui/react': 1.6.1_sfoxds7t5ydpegc3knd667wn6m
-      '@heroicons/react': 1.0.6_react@17.0.2
+      '@headlessui/react': 1.6.1_biqbaboplfbrettd7655fr4n2y
+      '@heroicons/react': 1.0.6_react@18.2.0
       '@next-auth/prisma-adapter': 1.0.3_next-auth@4.10.2
       '@next/eslint-plugin-next': 12.1.0
       '@next/mdx': 12.1.5_@mdx-js+loader@2.1.2
-      '@reach/dialog': 0.16.2_k2mvpji5i2ojml6m4ftklg47pa
+      '@reach/dialog': 0.16.2_bb2bxwco6ptpubzwpazr52qf6i
       '@sanity/block-content-to-markdown': 0.0.5
       '@sanity/client': 3.3.2
       '@skillrecordings/analytics': link:../../packages/analytics
@@ -958,10 +958,10 @@ importers:
       '@stripe/stripe-js': 1.25.0
       '@tailwindcss/forms': 0.5.2_tailwindcss@3.1.4
       '@tailwindcss/typography': 0.5.2_tailwindcss@3.1.4
-      '@tippyjs/react': 4.2.6_sfoxds7t5ydpegc3knd667wn6m
+      '@tippyjs/react': 4.2.6_biqbaboplfbrettd7655fr4n2y
       '@types/mdx-js__react': 1.5.5
       '@types/mjml': 4.7.0
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       autoprefixer: 10.4.7_postcss@8.4.14
       axios: 0.26.1
       client-oauth2: 4.3.3
@@ -970,37 +970,37 @@ importers:
       date-fns: 2.28.0
       dotenv-flow: 3.2.0
       focus-visible: 5.2.0
-      formik: 2.2.9_react@17.0.2
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
+      formik: 2.2.9_react@18.2.0
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
       groq: 2.15.0
       lodash: 4.17.21
       mdx-prism: 0.3.4
       mjml: 4.12.0
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
-      next-auth: 4.10.2_uwv6tj4c6jl3tcycfdgw4fi3ba
-      next-mdx-remote: 4.0.0_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
+      next-auth: 4.10.2_veosbehjv4o6lw47zt43je3zka
+      next-mdx-remote: 4.1.0_biqbaboplfbrettd7655fr4n2y
       next-sitemap: 3.1.7_next@12.2.3
-      next-themes: 0.1.1_lomk7fwgwcwgv5os6tnu5kl3ge
+      next-themes: 0.1.1_53oqlnqnxhbetdy4ljlkkvmoby
       nodemailer: 6.7.2
       playwright: 1.15.0
       playwright-aws-lambda: 0.7.0_playwright-core@1.15.0
       playwright-core: 1.15.0
       postcss: 8.4.14
       query-string: 7.1.1
-      react: 17.0.2
-      react-countdown: 2.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-dom: 17.0.2_react@17.0.2
-      react-hook-form: 7.29.0_react@17.0.2
-      react-markdown: 7.1.0_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-scroll: 1.8.7_sfoxds7t5ydpegc3knd667wn6m
+      react: 18.2.0
+      react-countdown: 2.3.2_biqbaboplfbrettd7655fr4n2y
+      react-dom: 18.2.0_react@18.2.0
+      react-hook-form: 7.29.0_react@18.2.0
+      react-markdown: 7.1.0_3hx2ussxxho4jajbwrd6gq34qe
+      react-scroll: 1.8.7_biqbaboplfbrettd7655fr4n2y
       react-stripe-checkout: 2.6.3
       react-tippy: 1.4.0
-      react-use: 17.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-use-clipboard: 1.0.7_sfoxds7t5ydpegc3knd667wn6m
+      react-use: 17.3.2_biqbaboplfbrettd7655fr4n2y
+      react-use-clipboard: 1.0.7_biqbaboplfbrettd7655fr4n2y
       rehype: 12.0.1
       rehype-shiki: 0.0.9
       remark-gfm: 3.0.1
-      simplebar-react: 2.3.6_sfoxds7t5ydpegc3knd667wn6m
+      simplebar-react: 2.3.6_biqbaboplfbrettd7655fr4n2y
       slugify: 1.6.2
       stripe: 8.209.0
       xstate: 4.23.1
@@ -1012,14 +1012,14 @@ importers:
       '@skillrecordings/tsconfig': link:../../packages/tsconfig
       '@skillrecordings/types': link:../../packages/types
       '@testing-library/jest-dom': 5.16.2
-      '@testing-library/react': 12.1.4_sfoxds7t5ydpegc3knd667wn6m
+      '@testing-library/react': 12.1.4_biqbaboplfbrettd7655fr4n2y
       '@types/cookie': 0.4.1
       '@types/jest': 27.5.2
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/react-scroll': 1.8.3
       assert: 2.0.0
       commander: 8.3.0
@@ -1031,7 +1031,7 @@ importers:
       next-images: 1.8.4
       postcss-preset-env: 7.7.2_postcss@8.4.14
       prettier: 2.6.2
-      react-test-renderer: 17.0.2_react@17.0.2
+      react-test-renderer: 17.0.2_react@18.2.0
       tailwindcss: 3.1.4
       typescript: 4.7.4
 
@@ -1052,8 +1052,8 @@ importers:
       '@types/mdx': ^2.0.2
       '@types/mdx-js__react': ^1.5.5
       '@types/node': ^17.0.0
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       classnames: ^2.3.1
       dotenv-flow: ^3.2.0
       eslint: ^8.19.0
@@ -1065,15 +1065,15 @@ importers:
       next-sitemap: ^3.0.5
       postcss: ^8.4.14
       prettier: ^2.6.2
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0
       tailwindcss: ^3.1.6
       typescript: ^4.7.4
       webpack: '>=4.3.0 <5.0.0'
     dependencies:
       '@mdx-js/loader': 2.1.2_webpack@4.46.0
       '@mdx-js/mdx': 2.1.2
-      '@mdx-js/react': 2.1.2_react@17.0.2
+      '@mdx-js/react': 2.1.2_react@18.2.0
       '@next/mdx': 12.2.2_todqhrvd7cvbb36hzi2r6xttgq
       '@skillrecordings/analytics': link:../../packages/analytics
       '@skillrecordings/convertkit': link:../../packages/convertkit
@@ -1081,11 +1081,11 @@ importers:
       '@skillrecordings/react': link:../../packages/react
       classnames: 2.3.1
       feed: 4.2.2
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
       next-compose-plugins: 2.2.1
       next-sitemap: 3.1.7_hdg3gmwi2czidx5hoyjx6lzi6e
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     devDependencies:
       '@next/env': 12.2.2
       '@skillrecordings/scripts': link:../../packages/scripts
@@ -1094,8 +1094,8 @@ importers:
       '@types/mdx': 2.0.2
       '@types/mdx-js__react': 1.5.5
       '@types/node': 17.0.41
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       dotenv-flow: 3.2.0
       eslint: 8.19.0
       eslint-config-custom: link:../../packages/eslint-config-custom
@@ -1139,8 +1139,8 @@ importers:
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
       '@types/pluralize': ^0.0.29
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/react-scroll': ^1.8.3
       '@xstate/react': '=1.5.1'
       assert: ^2.0.0
@@ -1169,9 +1169,9 @@ importers:
       postcss-preset-env: ^7.4.2
       prettier: ^2.6.2
       query-string: ^7.1.1
-      react: 17.0.2
+      react: 18.2.0
       react-countdown: ^2.3.2
-      react-dom: 17.0.2
+      react-dom: 18.2.0
       react-markdown: ^7.1.0
       react-scroll: ^1.8.6
       react-stripe-checkout: ^2.6.3
@@ -1189,7 +1189,7 @@ importers:
       yup: ^0.32.11
     dependencies:
       '@next/mdx': 12.1.5_@mdx-js+loader@1.6.22
-      '@reach/dialog': 0.16.2_k2mvpji5i2ojml6m4ftklg47pa
+      '@reach/dialog': 0.16.2_bb2bxwco6ptpubzwpazr52qf6i
       '@skillrecordings/analytics': link:../../packages/analytics
       '@skillrecordings/auth': link:../../packages/auth
       '@skillrecordings/axios': link:../../packages/axios
@@ -1205,8 +1205,8 @@ importers:
       '@stripe/stripe-js': 1.21.1
       '@tailwindcss/forms': 0.5.2_tailwindcss@3.1.4
       '@tailwindcss/typography': 0.5.2_tailwindcss@3.1.4
-      '@tippyjs/react': 4.2.6_sfoxds7t5ydpegc3knd667wn6m
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@tippyjs/react': 4.2.6_biqbaboplfbrettd7655fr4n2y
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       autoprefixer: 10.4.7_postcss@8.4.14
       axios: 0.26.1
       client-oauth2: 4.3.3
@@ -1214,47 +1214,47 @@ importers:
       date-fns: 2.28.0
       dotenv-flow: 3.2.0
       focus-visible: 5.2.0
-      formik: 2.2.9_react@17.0.2
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
+      formik: 2.2.9_react@18.2.0
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
       lodash: 4.17.21
       mdx-prism: 0.3.4
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
       next-sitemap: 3.1.7_next@12.2.3
-      next-themes: 0.1.1_lomk7fwgwcwgv5os6tnu5kl3ge
+      next-themes: 0.1.1_53oqlnqnxhbetdy4ljlkkvmoby
       pluralize: 8.0.0
       postcss: 8.4.14
       query-string: 7.1.1
-      react: 17.0.2
-      react-countdown: 2.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-dom: 17.0.2_react@17.0.2
-      react-markdown: 7.1.0_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-scroll: 1.8.7_sfoxds7t5ydpegc3knd667wn6m
+      react: 18.2.0
+      react-countdown: 2.3.2_biqbaboplfbrettd7655fr4n2y
+      react-dom: 18.2.0_react@18.2.0
+      react-markdown: 7.1.0_3hx2ussxxho4jajbwrd6gq34qe
+      react-scroll: 1.8.7_biqbaboplfbrettd7655fr4n2y
       react-stripe-checkout: 2.6.3
-      react-use: 17.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-use-clipboard: 1.0.7_sfoxds7t5ydpegc3knd667wn6m
+      react-use: 17.3.2_biqbaboplfbrettd7655fr4n2y
+      react-use-clipboard: 1.0.7_biqbaboplfbrettd7655fr4n2y
       rehype: 12.0.0
       remark-code-titles: 0.1.2
       remark-footnotes: 4.0.1
       remark-slug: 7.0.1
-      swr: 1.3.0_react@17.0.2
+      swr: 1.3.0_react@18.2.0
       xstate: 4.23.1
       yup: 0.32.11
     devDependencies:
       '@babel/plugin-transform-react-jsx': 7.16.0
-      '@mdx-js/loader': 1.6.22_react@17.0.2
+      '@mdx-js/loader': 1.6.22_react@18.2.0
       '@skillrecordings/scripts': link:../../packages/scripts
       '@skillrecordings/tsconfig': link:../../packages/tsconfig
       '@skillrecordings/types': link:../../packages/types
       '@testing-library/jest-dom': 5.15.0
-      '@testing-library/react': 12.1.2_sfoxds7t5ydpegc3knd667wn6m
+      '@testing-library/react': 12.1.2_biqbaboplfbrettd7655fr4n2y
       '@types/cookie': 0.4.1
       '@types/jest': 27.5.2
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
       '@types/pluralize': 0.0.29
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/react-scroll': 1.8.3
       assert: 2.0.0
       commander: 8.3.0
@@ -1265,7 +1265,7 @@ importers:
       next-images: 1.8.4
       postcss-preset-env: 7.7.2_postcss@8.4.14
       prettier: 2.6.2
-      react-test-renderer: 17.0.2_react@17.0.2
+      react-test-renderer: 17.0.2_react@18.2.0
       tailwindcss: 3.1.4
       typescript: 4.7.4
 
@@ -1301,8 +1301,8 @@ importers:
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
       '@types/pluralize': ^0.0.29
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/react-scroll': ^1.8.3
       '@xstate/react': '=1.5.1'
       assert: ^2.0.0
@@ -1333,9 +1333,9 @@ importers:
       postcss-preset-env: ^7.4.2
       prettier: ^2.6.2
       query-string: ^7.1.1
-      react: 17.0.2
+      react: 18.2.0
       react-countdown: ^2.3.2
-      react-dom: 17.0.2
+      react-dom: 18.2.0
       react-markdown: ^7.1.0
       react-scroll: ^1.8.6
       react-stripe-checkout: ^2.6.3
@@ -1356,7 +1356,7 @@ importers:
       yup: ^0.32.11
     dependencies:
       '@next/mdx': 12.1.5_@mdx-js+loader@1.6.22
-      '@reach/dialog': 0.16.2_k2mvpji5i2ojml6m4ftklg47pa
+      '@reach/dialog': 0.16.2_bb2bxwco6ptpubzwpazr52qf6i
       '@skillrecordings/analytics': link:../../packages/analytics
       '@skillrecordings/auth': link:../../packages/auth
       '@skillrecordings/axios': link:../../packages/axios
@@ -1371,8 +1371,8 @@ importers:
       '@stripe/stripe-js': 1.21.1
       '@tailwindcss/forms': 0.5.2_tailwindcss@3.1.4
       '@tailwindcss/typography': 0.5.2_tailwindcss@3.1.4
-      '@tippyjs/react': 4.2.6_sfoxds7t5ydpegc3knd667wn6m
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@tippyjs/react': 4.2.6_biqbaboplfbrettd7655fr4n2y
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       autoprefixer: 10.4.7_postcss@8.4.14
       axios: 0.26.1
       client-oauth2: 4.3.3
@@ -1380,50 +1380,50 @@ importers:
       date-fns: 2.28.0
       dotenv-flow: 3.2.0
       focus-visible: 5.2.0
-      formik: 2.2.9_react@17.0.2
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
+      formik: 2.2.9_react@18.2.0
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
       lodash: 4.17.21
       mdx-prism: 0.3.4
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
       next-sitemap: 3.1.7_next@12.2.3
-      next-themes: 0.1.1_lomk7fwgwcwgv5os6tnu5kl3ge
+      next-themes: 0.1.1_53oqlnqnxhbetdy4ljlkkvmoby
       pluralize: 8.0.0
       postcss: 8.4.14
       query-string: 7.1.1
-      react: 17.0.2
-      react-countdown: 2.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-dom: 17.0.2_react@17.0.2
-      react-markdown: 7.1.0_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-scroll: 1.8.7_sfoxds7t5ydpegc3knd667wn6m
+      react: 18.2.0
+      react-countdown: 2.3.2_biqbaboplfbrettd7655fr4n2y
+      react-dom: 18.2.0_react@18.2.0
+      react-markdown: 7.1.0_3hx2ussxxho4jajbwrd6gq34qe
+      react-scroll: 1.8.7_biqbaboplfbrettd7655fr4n2y
       react-stripe-checkout: 2.6.3
-      react-use: 17.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-use-clipboard: 1.0.7_sfoxds7t5ydpegc3knd667wn6m
+      react-use: 17.3.2_biqbaboplfbrettd7655fr4n2y
+      react-use-clipboard: 1.0.7_biqbaboplfbrettd7655fr4n2y
       rehype: 12.0.0
       remark-code-titles: 0.1.2
       remark-footnotes: 4.0.1
       remark-slug: 7.0.1
       stripe: 8.186.1
-      swr: 1.3.0_react@17.0.2
+      swr: 1.3.0_react@18.2.0
       tailwindcss-autofill: 1.0.2_tailwindcss@3.1.4
       tailwindcss-text-fill: 0.2.0_tailwindcss@3.1.4
       xstate: 4.23.1
       yup: 0.32.11
     devDependencies:
       '@babel/plugin-transform-react-jsx': 7.16.0
-      '@mdx-js/loader': 1.6.22_react@17.0.2
+      '@mdx-js/loader': 1.6.22_react@18.2.0
       '@skillrecordings/scripts': link:../../packages/scripts
       '@skillrecordings/tsconfig': link:../../packages/tsconfig
       '@skillrecordings/types': link:../../packages/types
       '@testing-library/jest-dom': 5.15.0
-      '@testing-library/react': 12.1.2_sfoxds7t5ydpegc3knd667wn6m
+      '@testing-library/react': 12.1.2_biqbaboplfbrettd7655fr4n2y
       '@types/cookie': 0.4.1
       '@types/jest': 27.5.2
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
       '@types/pluralize': 0.0.29
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/react-scroll': 1.8.3
       assert: 2.0.0
       commander: 8.3.0
@@ -1436,7 +1436,7 @@ importers:
       next-images: 1.8.4
       postcss-preset-env: 7.7.2_postcss@8.4.14
       prettier: 2.6.2
-      react-test-renderer: 17.0.2_react@17.0.2
+      react-test-renderer: 17.0.2_react@18.2.0
       tailwindcss: 3.1.4
       typescript: 4.7.4
 
@@ -1482,8 +1482,8 @@ importers:
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
       '@types/pluralize': ^0.0.29
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/react-scroll': ^1.8.3
       '@xstate/react': '=1.5.1'
       assert: ^2.0.0
@@ -1518,9 +1518,9 @@ importers:
       postcss-preset-env: ^7.4.2
       prettier: ^2.6.2
       query-string: ^7.1.1
-      react: 17.0.2
+      react: 18.2.0
       react-countdown: ^2.3.2
-      react-dom: 17.0.2
+      react-dom: 18.2.0
       react-markdown: ^7.1.0
       react-scroll: ^1.8.6
       react-stripe-checkout: ^2.6.3
@@ -1541,9 +1541,9 @@ importers:
       yup: ^0.32.11
     dependencies:
       '@mdx-js/mdx': 2.0.0
-      '@mdx-js/react': 1.6.22_react@17.0.2
+      '@mdx-js/react': 1.6.22_react@18.2.0
       '@next/mdx': 12.1.5_6vwedlnwdegenaf6jioaeirvlu
-      '@reach/dialog': 0.16.2_k2mvpji5i2ojml6m4ftklg47pa
+      '@reach/dialog': 0.16.2_bb2bxwco6ptpubzwpazr52qf6i
       '@skillrecordings/analytics': link:../../packages/analytics
       '@skillrecordings/auth': link:../../packages/auth
       '@skillrecordings/axios': link:../../packages/axios
@@ -1561,8 +1561,8 @@ importers:
       '@supabase/supabase-js': 1.29.1
       '@tailwindcss/forms': 0.5.2_tailwindcss@3.1.4
       '@tailwindcss/typography': 0.5.2_tailwindcss@3.1.4
-      '@tippyjs/react': 4.2.6_sfoxds7t5ydpegc3knd667wn6m
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@tippyjs/react': 4.2.6_biqbaboplfbrettd7655fr4n2y
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       autoprefixer: 10.4.7_postcss@8.4.14
       axios: 0.26.1
       classnames: 2.3.1
@@ -1571,35 +1571,35 @@ importers:
       date-fns: 2.28.0
       dotenv-flow: 3.2.0
       focus-visible: 5.2.0
-      formik: 2.2.9_react@17.0.2
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
+      formik: 2.2.9_react@18.2.0
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
       hls.js: 1.1.5
       isomorphic-fetch: 3.0.0
       load-egghead-notes-mdx-url: 0.1.1
       lodash: 4.17.21
       mdast-util-to-markdown: 1.2.6
       mdx-prism: 0.3.4
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
       next-sitemap: 3.1.7_next@12.2.3
-      next-themes: 0.1.1_lomk7fwgwcwgv5os6tnu5kl3ge
+      next-themes: 0.1.1_53oqlnqnxhbetdy4ljlkkvmoby
       next-transpile-modules: 9.0.0
       pluralize: 8.0.0
       postcss: 8.4.14
       query-string: 7.1.1
-      react: 17.0.2
-      react-countdown: 2.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-dom: 17.0.2_react@17.0.2
-      react-markdown: 7.1.0_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-scroll: 1.8.7_sfoxds7t5ydpegc3knd667wn6m
+      react: 18.2.0
+      react-countdown: 2.3.2_biqbaboplfbrettd7655fr4n2y
+      react-dom: 18.2.0_react@18.2.0
+      react-markdown: 7.1.0_3hx2ussxxho4jajbwrd6gq34qe
+      react-scroll: 1.8.7_biqbaboplfbrettd7655fr4n2y
       react-stripe-checkout: 2.6.3
-      react-use: 17.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-use-clipboard: 1.0.7_sfoxds7t5ydpegc3knd667wn6m
+      react-use: 17.3.2_biqbaboplfbrettd7655fr4n2y
+      react-use-clipboard: 1.0.7_biqbaboplfbrettd7655fr4n2y
       reading-time: 1.5.0
       rehype: 12.0.0
       remark-code-titles: 0.1.2
       remark-footnotes: 4.0.1
       remark-slug: 7.0.1
-      swr: 1.3.0_react@17.0.2
+      swr: 1.3.0_react@18.2.0
       unist-util-visit: 2.0.3
       vfile: 5.3.0
       xstate: 4.23.1
@@ -1608,13 +1608,13 @@ importers:
       '@babel/plugin-transform-react-jsx': 7.16.0
       '@emotion/babel-plugin': 11.3.0
       '@emotion/babel-preset-css-prop': 11.2.0
-      '@emotion/react': 11.5.0_hx2b44akkvgcgvvtmk7ds2qk6q
-      '@mdx-js/loader': 1.6.22_react@17.0.2
+      '@emotion/react': 11.5.0_3hx2ussxxho4jajbwrd6gq34qe
+      '@mdx-js/loader': 1.6.22_react@18.2.0
       '@skillrecordings/scripts': link:../../packages/scripts
       '@skillrecordings/tsconfig': link:../../packages/tsconfig
       '@skillrecordings/types': link:../../packages/types
       '@testing-library/jest-dom': 5.15.0
-      '@testing-library/react': 12.1.2_sfoxds7t5ydpegc3knd667wn6m
+      '@testing-library/react': 12.1.2_biqbaboplfbrettd7655fr4n2y
       '@types/cookie': 0.4.1
       '@types/isomorphic-fetch': 0.0.35
       '@types/jest': 27.5.2
@@ -1623,8 +1623,8 @@ importers:
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
       '@types/pluralize': 0.0.29
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/react-scroll': 1.8.3
       assert: 2.0.0
       commander: 8.3.0
@@ -1635,7 +1635,7 @@ importers:
       next-images: 1.8.4
       postcss-preset-env: 7.7.2_postcss@8.4.14
       prettier: 2.6.2
-      react-test-renderer: 17.0.2_react@17.0.2
+      react-test-renderer: 17.0.2_react@18.2.0
       tailwindcss: 3.1.4
       typescript: 4.7.4
 
@@ -1672,8 +1672,8 @@ importers:
       '@types/lodash': ^4.14.179
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/speakingurl': ^13.0.3
       '@types/three': ^0.141.0
       '@vercel/tracing-js': ^0.5.1
@@ -1693,8 +1693,8 @@ importers:
       next-compose-plugins: ^2.2.1
       next-sitemap: ^3.0.5
       postcss: ^8.4.14
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0
       react-hot-toast: ^2.2.0
       react-markdown: ^8.0.3
       react-query: ^3.39.1
@@ -1706,13 +1706,13 @@ importers:
       typescript: ^4.7.4
       xstate: '=4.23.1'
     dependencies:
-      '@heroicons/react': 1.0.6_react@17.0.2
-      '@portabletext/react': 1.0.6_react@17.0.2
-      '@react-three/drei': 8.16.0_kywf6pnmep4vhgxm3n7fyzvqbm
-      '@react-three/fiber': 7.0.27_weaphyuqmcotibvxgot4zxypyi
-      '@react-three/postprocessing': 2.3.2_kywf6pnmep4vhgxm3n7fyzvqbm
+      '@heroicons/react': 1.0.6_react@18.2.0
+      '@portabletext/react': 1.0.6_react@18.2.0
+      '@react-three/drei': 8.16.0_zh3qwjj5yfyqyzqfoqzgw3cf4i
+      '@react-three/fiber': 7.0.27_jvurxncug65yh22s5p4pqgaif4
+      '@react-three/postprocessing': 2.3.2_zh3qwjj5yfyqyzqfoqzgw3cf4i
       '@sanity/client': 3.3.2
-      '@sentry/nextjs': 6.19.3_next@12.2.3+react@17.0.2
+      '@sentry/nextjs': 6.19.3_next@12.2.3+react@18.2.0
       '@skillrecordings/analytics': link:../../packages/analytics
       '@skillrecordings/auth': link:../../packages/auth
       '@skillrecordings/axios': link:../../packages/axios
@@ -1727,23 +1727,23 @@ importers:
       '@skillrecordings/time': link:../../packages/time
       '@skillrecordings/viewer': link:../../packages/viewer
       '@vercel/tracing-js': 0.5.1
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       classnames: 2.3.1
       date-fns: 2.28.0
       feed: 4.2.2
       focus-visible: 5.2.0
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
-      framer-motion-3d: 6.4.1_kywf6pnmep4vhgxm3n7fyzvqbm
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
+      framer-motion-3d: 6.4.1_zh3qwjj5yfyqyzqfoqzgw3cf4i
       groq: 2.15.0
-      leva: 0.9.27_sfoxds7t5ydpegc3knd667wn6m
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      leva: 0.9.27_biqbaboplfbrettd7655fr4n2y
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
       next-compose-plugins: 2.2.1
       next-sitemap: 3.1.7_6lynxinfr2uix4icggokqiwwie
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      react-hot-toast: 2.2.0_sfoxds7t5ydpegc3knd667wn6m
-      react-markdown: 8.0.3_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-query: 3.39.1_sfoxds7t5ydpegc3knd667wn6m
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-hot-toast: 2.2.0_biqbaboplfbrettd7655fr4n2y
+      react-markdown: 8.0.3_3hx2ussxxho4jajbwrd6gq34qe
+      react-query: 3.39.1_biqbaboplfbrettd7655fr4n2y
       refractor: 4.5.0
       speakingurl: 14.0.1
       three: 0.141.0
@@ -1760,15 +1760,15 @@ importers:
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/speakingurl': 13.0.3
       '@types/three': 0.141.0
       autoprefixer: 10.4.7_postcss@8.4.14
       eslint: 8.19.0
       eslint-config-custom: link:../../packages/eslint-config-custom
       postcss: 8.4.14
-      react-refractor: 2.1.7_react@17.0.2
+      react-refractor: 2.1.7_react@18.2.0
       tailwindcss: 3.1.4
       typescript: 4.7.4
 
@@ -1804,8 +1804,8 @@ importers:
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
       '@types/pluralize': ^0.0.29
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/react-scroll': ^1.8.3
       '@xstate/react': '=1.5.1'
       assert: ^2.0.0
@@ -1839,9 +1839,9 @@ importers:
       postcss-preset-env: ^7.4.2
       prettier: ^2.6.2
       query-string: ^7.1.1
-      react: 17.0.2
+      react: 18.2.0
       react-countdown: ^2.3.2
-      react-dom: 17.0.2
+      react-dom: 18.2.0
       react-markdown: ^7.1.0
       react-scroll: ^1.8.6
       react-stripe-checkout: ^2.6.3
@@ -1858,9 +1858,9 @@ importers:
       typescript: ^4.7.4
       yup: ^0.32.11
     dependencies:
-      '@mdx-js/react': 1.6.22_react@17.0.2
+      '@mdx-js/react': 1.6.22_react@18.2.0
       '@next/mdx': 12.1.5_6vwedlnwdegenaf6jioaeirvlu
-      '@reach/dialog': 0.16.2_k2mvpji5i2ojml6m4ftklg47pa
+      '@reach/dialog': 0.16.2_bb2bxwco6ptpubzwpazr52qf6i
       '@skillrecordings/analytics': link:../../packages/analytics
       '@skillrecordings/auth': link:../../packages/auth
       '@skillrecordings/axios': link:../../packages/axios
@@ -1873,8 +1873,8 @@ importers:
       '@skillrecordings/viewer': link:../../packages/viewer
       '@stripe/stripe-js': 1.21.1
       '@tailwindcss/typography': 0.5.2_tailwindcss@3.1.4
-      '@tippyjs/react': 4.2.6_sfoxds7t5ydpegc3knd667wn6m
-      '@xstate/react': 1.5.1_hx2b44akkvgcgvvtmk7ds2qk6q
+      '@tippyjs/react': 4.2.6_biqbaboplfbrettd7655fr4n2y
+      '@xstate/react': 1.5.1_3hx2ussxxho4jajbwrd6gq34qe
       autoprefixer: 10.4.7_postcss@8.4.14
       axios: 0.26.1
       classnames: 2.3.1
@@ -1883,25 +1883,25 @@ importers:
       date-fns: 2.28.0
       dotenv-flow: 3.2.0
       focus-visible: 5.2.0
-      formik: 2.2.9_react@17.0.2
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
+      formik: 2.2.9_react@18.2.0
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
       lodash: 4.17.21
-      mdx-embed: 0.0.22_6xqwaqehq7edoa4cfowcauzbza
+      mdx-embed: 0.0.22_cria5bnyif7ziksni4gkbcboea
       mdx-prism: 0.3.4
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
       next-sitemap: 3.1.7_next@12.2.3
-      next-themes: 0.1.1_lomk7fwgwcwgv5os6tnu5kl3ge
+      next-themes: 0.1.1_53oqlnqnxhbetdy4ljlkkvmoby
       pluralize: 8.0.0
       postcss: 8.4.14
       query-string: 7.1.1
-      react: 17.0.2
-      react-countdown: 2.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-dom: 17.0.2_react@17.0.2
-      react-markdown: 7.1.0_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-scroll: 1.8.7_sfoxds7t5ydpegc3knd667wn6m
+      react: 18.2.0
+      react-countdown: 2.3.2_biqbaboplfbrettd7655fr4n2y
+      react-dom: 18.2.0_react@18.2.0
+      react-markdown: 7.1.0_3hx2ussxxho4jajbwrd6gq34qe
+      react-scroll: 1.8.7_biqbaboplfbrettd7655fr4n2y
       react-stripe-checkout: 2.6.3
-      react-use: 17.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-use-clipboard: 1.0.7_sfoxds7t5ydpegc3knd667wn6m
+      react-use: 17.3.2_biqbaboplfbrettd7655fr4n2y
+      react-use-clipboard: 1.0.7_biqbaboplfbrettd7655fr4n2y
       rehype: 12.0.0
       remark-code-titles: 0.1.2
       remark-footnotes: 4.0.1
@@ -1911,12 +1911,12 @@ importers:
       yup: 0.32.11
     devDependencies:
       '@babel/plugin-transform-react-jsx': 7.16.0
-      '@mdx-js/loader': 1.6.22_react@17.0.2
+      '@mdx-js/loader': 1.6.22_react@18.2.0
       '@skillrecordings/scripts': link:../../packages/scripts
       '@skillrecordings/tsconfig': link:../../packages/tsconfig
       '@skillrecordings/types': link:../../packages/types
       '@testing-library/jest-dom': 5.15.0
-      '@testing-library/react': 12.1.2_sfoxds7t5ydpegc3knd667wn6m
+      '@testing-library/react': 12.1.2_biqbaboplfbrettd7655fr4n2y
       '@types/cookie': 0.4.1
       '@types/jest': 27.5.2
       '@types/lodash': 4.14.180
@@ -1924,8 +1924,8 @@ importers:
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
       '@types/pluralize': 0.0.29
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/react-scroll': 1.8.3
       assert: 2.0.0
       babel-jest: 27.5.1
@@ -1939,7 +1939,7 @@ importers:
       next-images: 1.8.4
       postcss-preset-env: 7.7.2_postcss@8.4.14
       prettier: 2.6.2
-      react-test-renderer: 17.0.2_react@17.0.2
+      react-test-renderer: 17.0.2_react@18.2.0
       tailwindcss: 3.1.4
       typescript: 4.7.4
 
@@ -2014,8 +2014,8 @@ importers:
       '@types/nodemailer': ^6.4.4
       '@types/pdfkit': ^0.12.6
       '@types/pluralize': ^0.0.29
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/react-scroll': ^1.8.3
       '@types/sanitize-html': ^2.6.2
       '@types/speakingurl': ^13.0.3
@@ -2075,9 +2075,9 @@ importers:
       postcss-preset-env: ^7.4.2
       prettier: ^2.6.2
       query-string: ^7.1.1
-      react: 17.0.2
+      react: 18.2.0
       react-countdown: ^2.3.2
-      react-dom: 17.0.2
+      react-dom: 18.2.0
       react-hook-form: ^7.29.0
       react-hot-toast: ^2.2.0
       react-markdown: ^8.0.0
@@ -2121,22 +2121,22 @@ importers:
       '@algolia/client-search': 4.13.0
       '@asbjorn/eslint-plugin-groq': 2.0.0
       '@casl/ability': 5.4.3
-      '@headlessui/react': 1.6.1_sfoxds7t5ydpegc3knd667wn6m
-      '@heroicons/react': 1.0.6_react@17.0.2
-      '@mdx-js/loader': 1.6.22_react@17.0.2
+      '@headlessui/react': 1.6.1_biqbaboplfbrettd7655fr4n2y
+      '@heroicons/react': 1.0.6_react@18.2.0
+      '@mdx-js/loader': 1.6.22_react@18.2.0
       '@mdx-js/mdx': 2.0.0
-      '@mdx-js/react': 1.6.22_react@17.0.2
+      '@mdx-js/react': 1.6.22_react@18.2.0
       '@next-auth/prisma-adapter': 1.0.3_next-auth@4.10.2
       '@next/mdx': 12.1.5_6vwedlnwdegenaf6jioaeirvlu
-      '@portabletext/react': 1.0.6_react@17.0.2
-      '@radix-ui/react-alert-dialog': 0.1.7_k2mvpji5i2ojml6m4ftklg47pa
-      '@radix-ui/react-dialog': 0.1.7_k2mvpji5i2ojml6m4ftklg47pa
-      '@reach/dialog': 0.16.2_k2mvpji5i2ojml6m4ftklg47pa
-      '@reach/skip-nav': 0.16.0_sfoxds7t5ydpegc3knd667wn6m
-      '@sanity/block-content-to-react': 3.0.0_react@17.0.2
+      '@portabletext/react': 1.0.6_react@18.2.0
+      '@radix-ui/react-alert-dialog': 0.1.7_bb2bxwco6ptpubzwpazr52qf6i
+      '@radix-ui/react-dialog': 0.1.7_bb2bxwco6ptpubzwpazr52qf6i
+      '@reach/dialog': 0.16.2_bb2bxwco6ptpubzwpazr52qf6i
+      '@reach/skip-nav': 0.16.0_biqbaboplfbrettd7655fr4n2y
+      '@sanity/block-content-to-react': 3.0.0_react@18.2.0
       '@sanity/client': 3.3.2
       '@sanity/webhook': 1.0.2
-      '@sentry/nextjs': 6.19.3_daclytgsfcivq2b62vwydcy3uy
+      '@sentry/nextjs': 6.19.3_5cy3dema5qwip6n7exqk4sqtji
       '@skillrecordings/analytics': link:../../packages/analytics
       '@skillrecordings/auth': link:../../packages/auth
       '@skillrecordings/axios': link:../../packages/axios
@@ -2155,14 +2155,14 @@ importers:
       '@stripe/stripe-js': 1.21.1
       '@svgdotjs/svg.js': 3.1.2
       '@tailwindcss/typography': 0.5.2_tailwindcss@3.1.4
-      '@tippyjs/react': 4.2.6_sfoxds7t5ydpegc3knd667wn6m
+      '@tippyjs/react': 4.2.6_biqbaboplfbrettd7655fr4n2y
       '@tiptap/extension-highlight': 2.0.0-beta.33_o5tsmp445vozplpzqkrs3pmjeq
       '@tiptap/extension-link': 2.0.0-beta.37_o5tsmp445vozplpzqkrs3pmjeq
       '@tiptap/extension-typography': 2.0.0-beta.20_o5tsmp445vozplpzqkrs3pmjeq
-      '@tiptap/react': 2.0.0-beta.109_glxezlolupgfapdjflfhgy332u
+      '@tiptap/react': 2.0.0-beta.109_cpkpnzstpcbd5lz5ghf7pjwsmy
       '@tiptap/starter-kit': 2.0.0-beta.184
       '@vercel/tracing-js': 0.5.1
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       algoliasearch: 4.13.0
       autoprefixer: 10.4.7_postcss@8.4.14
       axios: 0.26.1
@@ -2174,8 +2174,8 @@ importers:
       dompurify: 2.3.6
       dotenv-flow: 3.2.0
       feed: 4.2.2
-      formik: 2.2.9_react@17.0.2
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
+      formik: 2.2.9_react@18.2.0
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
       graphql-request: 4.1.0_graphql@16.5.0
       graphql-tag: 2.12.6_graphql@16.5.0
       groq: 2.15.0
@@ -2188,30 +2188,30 @@ importers:
       micro: 9.3.4
       mjml: 4.12.0
       nanoid: 3.3.1
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
-      next-auth: 4.10.2_uwv6tj4c6jl3tcycfdgw4fi3ba
-      next-mdx-remote: 4.1.0_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
+      next-auth: 4.10.2_veosbehjv4o6lw47zt43je3zka
+      next-mdx-remote: 4.1.0_biqbaboplfbrettd7655fr4n2y
       next-sitemap: 3.1.7_mvfnr67nacokwugwaexctvkqby
-      next-themes: 0.1.1_lomk7fwgwcwgv5os6tnu5kl3ge
+      next-themes: 0.1.1_53oqlnqnxhbetdy4ljlkkvmoby
       nodemailer: 6.7.2
       nodemailer-postmark-transport: 5.2.1_nodemailer@6.7.2
       pdfkit-next: 0.11.0
       pluralize: 8.0.0
       postcss: 8.4.14
       query-string: 7.1.1
-      react: 17.0.2
-      react-countdown: 2.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-dom: 17.0.2_react@17.0.2
-      react-hook-form: 7.29.0_react@17.0.2
-      react-hot-toast: 2.2.0_ha54m6pwxcz4gcusjmwevbhi24
-      react-markdown: 8.0.3_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-query: 3.39.1_sfoxds7t5ydpegc3knd667wn6m
-      react-refractor: 2.1.7_react@17.0.2
-      react-rewards: 2.0.3_sfoxds7t5ydpegc3knd667wn6m
-      react-scroll: 1.8.7_sfoxds7t5ydpegc3knd667wn6m
+      react: 18.2.0
+      react-countdown: 2.3.2_biqbaboplfbrettd7655fr4n2y
+      react-dom: 18.2.0_react@18.2.0
+      react-hook-form: 7.29.0_react@18.2.0
+      react-hot-toast: 2.2.0_npw22p3c4ehm7n7vxn2gqac44u
+      react-markdown: 8.0.3_3hx2ussxxho4jajbwrd6gq34qe
+      react-query: 3.39.1_biqbaboplfbrettd7655fr4n2y
+      react-refractor: 2.1.7_react@18.2.0
+      react-rewards: 2.0.3_biqbaboplfbrettd7655fr4n2y
+      react-scroll: 1.8.7_biqbaboplfbrettd7655fr4n2y
       react-stripe-checkout: 2.6.3
-      react-use: 17.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-use-clipboard: 1.0.7_sfoxds7t5ydpegc3knd667wn6m
+      react-use: 17.3.2_biqbaboplfbrettd7655fr4n2y
+      react-use-clipboard: 1.0.7_biqbaboplfbrettd7655fr4n2y
       refractor: 4.5.0
       rehype: 12.0.0
       rehype-shiki: 0.0.9
@@ -2223,13 +2223,13 @@ importers:
       sanity-algolia: 1.0.2
       short-uuid: 4.2.0
       shortid: 2.2.16
-      simplebar-react: 2.3.6_sfoxds7t5ydpegc3knd667wn6m
+      simplebar-react: 2.3.6_biqbaboplfbrettd7655fr4n2y
       speakingurl: 14.0.1
       stripe: 8.186.1
       svg-to-pdfkit: 0.1.8
       svg.js: 2.7.1
       svgdom: 0.1.10
-      swr: 1.3.0_react@17.0.2
+      swr: 1.3.0_react@18.2.0
       uuid: 8.3.2
       xstate: 4.23.1
       yup: 0.32.11
@@ -2240,7 +2240,7 @@ importers:
       '@skillrecordings/tsconfig': link:../../packages/tsconfig
       '@skillrecordings/types': link:../../packages/types
       '@testing-library/jest-dom': 5.15.0
-      '@testing-library/react': 12.1.2_sfoxds7t5ydpegc3knd667wn6m
+      '@testing-library/react': 12.1.2_biqbaboplfbrettd7655fr4n2y
       '@tiptap/core': 2.0.0-beta.181
       '@types/cookie': 0.4.1
       '@types/dompurify': 2.3.3
@@ -2256,8 +2256,8 @@ importers:
       '@types/nodemailer': 6.4.4
       '@types/pdfkit': 0.12.6
       '@types/pluralize': 0.0.29
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/react-scroll': 1.8.3
       '@types/sanitize-html': 2.6.2
       '@types/speakingurl': 13.0.3
@@ -2279,7 +2279,7 @@ importers:
       postcss-focus-visible: 6.0.4_postcss@8.4.14
       postcss-preset-env: 7.7.2_postcss@8.4.14
       prettier: 2.6.2
-      react-test-renderer: 17.0.2_react@17.0.2
+      react-test-renderer: 17.0.2_react@18.2.0
       tailwindcss: 3.1.4
       typescript: 4.7.4
       webpack: 5.73.0
@@ -2295,8 +2295,8 @@ importers:
       '@types/lodash': ^4.14.179
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       autoprefixer: ^10.4.2
       eslint: ^8.19.0
       eslint-config-custom: workspace:*
@@ -2304,8 +2304,8 @@ importers:
       next: ^12.2.3
       next-sitemap: ^3.0.5
       postcss: ^8.4.14
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0
       react-hook-form: ^7.29.0
       tailwindcss: ^3.1.4
       typescript: ^4.7.4
@@ -2314,12 +2314,12 @@ importers:
       '@skillrecordings/convertkit': link:../../packages/convertkit
       '@skillrecordings/scripts': link:../../packages/scripts
       '@tailwindcss/forms': 0.5.2_tailwindcss@3.1.4
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
       next-sitemap: 3.1.7_next@12.2.3
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      react-hook-form: 7.29.0_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-hook-form: 7.29.0_react@18.2.0
       zod: 3.17.3
     devDependencies:
       '@tailwindcss/typography': 0.5.2_tailwindcss@3.1.4
@@ -2328,8 +2328,8 @@ importers:
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       autoprefixer: 10.4.7_postcss@8.4.14
       eslint: 8.19.0
       eslint-config-custom: link:../../packages/eslint-config-custom
@@ -2347,8 +2347,8 @@ importers:
       '@skillrecordings/tsconfig': workspace:*
       '@skillrecordings/types': workspace:*
       '@types/node': ^17.0.0
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/styled-components': ^5.1.25
       classnames: ^2.3.1
       dotenv-flow: ^3.2.0
@@ -2358,8 +2358,8 @@ importers:
       next: ^12.2.3
       next-sitemap: ^3.0.5
       postcss: ^8.4.14
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0
       react-is: '>= 16.8.0'
       styled-components: ^5.3.5
       tailwindcss: ^3.1.4
@@ -2372,18 +2372,18 @@ importers:
       '@skillrecordings/react': link:../../packages/react
       classnames: 2.3.1
       feed: 4.2.2
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
       next-sitemap: 3.1.7_hdg3gmwi2czidx5hoyjx6lzi6e
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      styled-components: 5.3.5_le6yh75jdu4qlr45kmyuenjcbu
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      styled-components: 5.3.5_xwin6kermpfszgjtt7m5i5m4jy
     devDependencies:
       '@next/env': 12.2.2
       '@skillrecordings/tsconfig': link:../../packages/tsconfig
       '@skillrecordings/types': link:../../packages/types
       '@types/node': 17.0.41
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/styled-components': 5.1.25
       dotenv-flow: 3.2.0
       eslint: 8.19.0
@@ -2439,8 +2439,8 @@ importers:
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
       '@types/pluralize': ^0.0.29
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/react-scroll': ^1.8.3
       '@types/speakingurl': ^13.0.3
       '@types/three': ^0.141.0
@@ -2481,9 +2481,9 @@ importers:
       postcss-preset-env: ^7.4.2
       prettier: ^2.6.2
       query-string: ^7.1.1
-      react: 17.0.2
+      react: 18.2.0
       react-countdown: ^2.3.2
-      react-dom: 17.0.2
+      react-dom: 18.2.0
       react-hot-toast: ^2.2.0
       react-markdown: ^7.1.0
       react-refractor: ^2.1.7
@@ -2510,15 +2510,15 @@ importers:
       xstate: '=4.23.1'
       yup: ^0.32.11
     dependencies:
-      '@heroicons/react': 1.0.6_react@17.0.2
+      '@heroicons/react': 1.0.6_react@18.2.0
       '@mdx-js/mdx': 2.0.0
-      '@mdx-js/react': 1.6.22_react@17.0.2
+      '@mdx-js/react': 1.6.22_react@18.2.0
       '@next/mdx': 12.1.5_6vwedlnwdegenaf6jioaeirvlu
-      '@portabletext/react': 1.0.6_react@17.0.2
+      '@portabletext/react': 1.0.6_react@18.2.0
       '@portabletext/types': 1.0.3
-      '@reach/dialog': 0.16.2_k2mvpji5i2ojml6m4ftklg47pa
-      '@react-three/drei': 7.20.2_xtnhzy36qq7tbht7fvmyjzsvcy
-      '@react-three/fiber': 7.0.29_sb5g6l453mk54n2prv33gp6u6q
+      '@reach/dialog': 0.16.2_bb2bxwco6ptpubzwpazr52qf6i
+      '@react-three/drei': 7.20.2_q3lm3wbsqyl3yae2fho3a2cr24
+      '@react-three/fiber': 7.0.29_l64coo4po4cwrmp7zqxdp2wxuq
       '@sanity/client': 3.3.2
       '@skillrecordings/analytics': link:../../packages/analytics
       '@skillrecordings/auth': link:../../packages/auth
@@ -2535,8 +2535,8 @@ importers:
       '@skillrecordings/viewer': link:../../packages/viewer
       '@stripe/stripe-js': 1.21.1
       '@supabase/supabase-js': 1.29.1
-      '@tippyjs/react': 4.2.6_sfoxds7t5ydpegc3knd667wn6m
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@tippyjs/react': 4.2.6_biqbaboplfbrettd7655fr4n2y
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       autoprefixer: 10.4.7_postcss@8.4.14
       axios: 0.26.1
       classnames: 2.3.1
@@ -2546,9 +2546,9 @@ importers:
       dotenv-flow: 3.2.0
       feed: 4.2.2
       focus-visible: 5.2.0
-      formik: 2.2.9_react@17.0.2
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
-      framer-motion-3d: 6.4.1_xtnhzy36qq7tbht7fvmyjzsvcy
+      formik: 2.2.9_react@18.2.0
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
+      framer-motion-3d: 6.4.1_q3lm3wbsqyl3yae2fho3a2cr24
       groq: 2.15.0
       hls.js: 1.1.5
       isomorphic-fetch: 3.0.0
@@ -2556,23 +2556,23 @@ importers:
       lodash: 4.17.21
       mdast-util-to-markdown: 1.2.6
       mdx-prism: 0.3.4
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
       next-sitemap: 3.1.7_mvfnr67nacokwugwaexctvkqby
-      next-themes: 0.1.1_lomk7fwgwcwgv5os6tnu5kl3ge
+      next-themes: 0.1.1_53oqlnqnxhbetdy4ljlkkvmoby
       pluralize: 8.0.0
       postcss: 8.4.14
       query-string: 7.1.1
-      react: 17.0.2
-      react-countdown: 2.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-dom: 17.0.2_react@17.0.2
-      react-hot-toast: 2.2.0_ha54m6pwxcz4gcusjmwevbhi24
-      react-markdown: 7.1.0_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-refractor: 2.1.7_react@17.0.2
-      react-rough-notation: 1.0.2_sfoxds7t5ydpegc3knd667wn6m
-      react-scroll: 1.8.7_sfoxds7t5ydpegc3knd667wn6m
+      react: 18.2.0
+      react-countdown: 2.3.2_biqbaboplfbrettd7655fr4n2y
+      react-dom: 18.2.0_react@18.2.0
+      react-hot-toast: 2.2.0_npw22p3c4ehm7n7vxn2gqac44u
+      react-markdown: 7.1.0_3hx2ussxxho4jajbwrd6gq34qe
+      react-refractor: 2.1.7_react@18.2.0
+      react-rough-notation: 1.0.2_biqbaboplfbrettd7655fr4n2y
+      react-scroll: 1.8.7_biqbaboplfbrettd7655fr4n2y
       react-stripe-checkout: 2.6.3
-      react-use: 17.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-use-clipboard: 1.0.7_sfoxds7t5ydpegc3knd667wn6m
+      react-use: 17.3.2_biqbaboplfbrettd7655fr4n2y
+      react-use-clipboard: 1.0.7_biqbaboplfbrettd7655fr4n2y
       reading-time: 1.5.0
       rehype: 12.0.0
       rehype-raw: 6.1.1
@@ -2580,21 +2580,21 @@ importers:
       remark-footnotes: 4.0.1
       remark-slug: 7.0.1
       speakingurl: 14.0.1
-      swr: 1.3.0_react@17.0.2
+      swr: 1.3.0_react@18.2.0
       three: 0.134.0
       unist-util-visit: 2.0.3
       vfile: 5.3.0
       xstate: 4.23.1
       yup: 0.32.11
     devDependencies:
-      '@mdx-js/loader': 1.6.22_react@17.0.2
+      '@mdx-js/loader': 1.6.22_react@18.2.0
       '@next/env': 12.2.0
       '@skillrecordings/scripts': link:../../packages/scripts
       '@skillrecordings/tsconfig': link:../../packages/tsconfig
       '@skillrecordings/types': link:../../packages/types
       '@tailwindcss/typography': 0.5.2_tailwindcss@3.1.4
       '@testing-library/jest-dom': 5.15.0
-      '@testing-library/react': 12.1.2_sfoxds7t5ydpegc3knd667wn6m
+      '@testing-library/react': 12.1.2_biqbaboplfbrettd7655fr4n2y
       '@types/axios': 0.14.0
       '@types/cookie': 0.4.1
       '@types/isomorphic-fetch': 0.0.35
@@ -2604,8 +2604,8 @@ importers:
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
       '@types/pluralize': 0.0.29
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/react-scroll': 1.8.3
       '@types/speakingurl': 13.0.3
       '@types/three': 0.141.0
@@ -2620,7 +2620,7 @@ importers:
       next-transpile-modules: 9.0.0
       postcss-preset-env: 7.7.2_postcss@8.4.14
       prettier: 2.6.2
-      react-test-renderer: 17.0.2_react@17.0.2
+      react-test-renderer: 17.0.2_react@18.2.0
       tailwindcss: 3.1.4
       typescript: 4.7.4
       webpack: 5.73.0
@@ -2635,14 +2635,14 @@ importers:
       '@types/lodash': ^4.14.179
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       eslint: ^8.19.0
       eslint-config-custom: workspace:*
       jest-localstorage-mock: ^2.4.14
       next: ^12.2.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0
       typescript: ^4.7.4
     dependencies:
       '@skillrecordings/types': link:../types
@@ -2654,14 +2654,14 @@ importers:
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       eslint: 8.19.0
       eslint-config-custom: link:../eslint-config-custom
       jest-localstorage-mock: 2.4.14
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       typescript: 4.7.4
 
   packages/auth:
@@ -2680,8 +2680,8 @@ importers:
       '@types/lodash': ^4.14.179
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       axios: ^0.26.0
       client-oauth2: ^4.3.3
       eslint: ^8.19.0
@@ -2692,8 +2692,8 @@ importers:
       mockdate: ^3.0.5
       msw: ^0.35.0
       next: ^12.2.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0
       typescript: ^4.7.4
     dependencies:
       '@skillrecordings/analytics': link:../analytics
@@ -2714,17 +2714,17 @@ importers:
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       eslint: 8.19.0
       eslint-config-custom: link:../eslint-config-custom
       jest-localstorage-mock: 2.4.14
       jsdom: 17.0.0
       mockdate: 3.0.5
       msw: 0.35.0
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       typescript: 4.7.4
 
   packages/axios:
@@ -2738,8 +2738,8 @@ importers:
       '@types/lodash': ^4.14.179
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       axios: ^0.26.0
       esbuild-node-tsc: ^1.6.1
       eslint: ^8.19.0
@@ -2756,8 +2756,8 @@ importers:
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       axios: 0.26.1
       esbuild-node-tsc: 1.6.1_typescript@4.7.4
       eslint: 8.19.0
@@ -2784,8 +2784,8 @@ importers:
       '@types/lodash': ^4.14.179
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/react-scroll': ^1.8.3
       '@xstate/react': '=1.5.1'
       assert: ^2.0.0
@@ -2798,9 +2798,9 @@ importers:
       framer-motion: ^6.4.1
       msw: ^0.35.0
       next: ^12.2.3
-      react: 17.0.2
+      react: 18.2.0
       react-countdown: ^2.3.2
-      react-dom: 17.0.2
+      react-dom: 18.2.0
       react-scroll: ^1.8.6
       react-stripe-checkout: ^2.6.3
       react-test-renderer: ^17.0.2
@@ -2809,7 +2809,7 @@ importers:
       xstate: '=4.23.1'
       yup: ^0.32.11
     dependencies:
-      '@reach/dialog': 0.16.2_k2mvpji5i2ojml6m4ftklg47pa
+      '@reach/dialog': 0.16.2_bb2bxwco6ptpubzwpazr52qf6i
       '@skillrecordings/auth': link:../auth
       '@skillrecordings/axios': link:../axios
       '@skillrecordings/config': link:../config
@@ -2819,9 +2819,9 @@ importers:
       '@stripe/stripe-js': 1.25.0
       axios: 0.26.1
       date-fns: 2.28.0
-      formik: 2.2.9_react@17.0.2
-      react-countdown: 2.3.2_sfoxds7t5ydpegc3knd667wn6m
-      react-scroll: 1.8.7_sfoxds7t5ydpegc3knd667wn6m
+      formik: 2.2.9_react@18.2.0
+      react-countdown: 2.3.2_biqbaboplfbrettd7655fr4n2y
+      react-scroll: 1.8.7_biqbaboplfbrettd7655fr4n2y
       react-stripe-checkout: 2.6.3
       yup: 0.32.11
     devDependencies:
@@ -2829,26 +2829,26 @@ importers:
       '@skillrecordings/tsconfig': link:../tsconfig
       '@skillrecordings/types': link:../types
       '@testing-library/jest-dom': 5.16.2
-      '@testing-library/react': 12.1.4_sfoxds7t5ydpegc3knd667wn6m
+      '@testing-library/react': 12.1.4_biqbaboplfbrettd7655fr4n2y
       '@types/cookie': 0.4.1
       '@types/jest': 27.5.2
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/react-scroll': 1.8.3
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       assert: 2.0.0
       esbuild-node-tsc: 1.6.1_typescript@4.7.4
       eslint: 8.19.0
       eslint-config-custom: link:../eslint-config-custom
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
       msw: 0.35.0
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      react-test-renderer: 17.0.2_react@17.0.2
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-test-renderer: 17.0.2_react@18.2.0
       stripe: 8.209.0
       typescript: 4.7.4
       xstate: 4.23.1
@@ -2863,8 +2863,8 @@ importers:
       '@types/lodash': ^4.14.179
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       esbuild-node-tsc: ^1.6.1
       eslint: ^8.19.0
       eslint-config-custom: workspace:*
@@ -2878,8 +2878,8 @@ importers:
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       esbuild-node-tsc: 1.6.1_typescript@4.7.4
       eslint: 8.19.0
       eslint-config-custom: link:../eslint-config-custom
@@ -2900,8 +2900,8 @@ importers:
       '@types/lodash': ^4.14.179
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/yup': ^0.29.13
       axios: ^0.26.0
       cookie: ^0.5.0
@@ -2912,22 +2912,22 @@ importers:
       framer-motion: ^6.4.1
       next: ^12.2.3
       query-string: ^7.1.1
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0
       react-use: ^17.3.2
       typescript: ^4.7.4
       yup: ^0.32.11
     dependencies:
-      '@reach/dialog': 0.16.2_k2mvpji5i2ojml6m4ftklg47pa
+      '@reach/dialog': 0.16.2_bb2bxwco6ptpubzwpazr52qf6i
       '@skillrecordings/axios': link:../axios
       '@skillrecordings/config': link:../config
       '@skillrecordings/cookies': link:../cookies
       '@skillrecordings/react': link:../react
       axios: 0.26.1
       cookie: 0.5.0
-      formik: 2.2.9_react@17.0.2
+      formik: 2.2.9_react@18.2.0
       query-string: 7.1.1
-      react-use: 17.3.2_sfoxds7t5ydpegc3knd667wn6m
+      react-use: 17.3.2_biqbaboplfbrettd7655fr4n2y
       yup: 0.32.11
     devDependencies:
       '@skillrecordings/scripts': link:../scripts
@@ -2938,16 +2938,16 @@ importers:
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/yup': 0.29.13
       esbuild-node-tsc: 1.6.1_typescript@4.7.4
       eslint: 8.19.0
       eslint-config-custom: link:../eslint-config-custom
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       typescript: 4.7.4
 
   packages/cookies:
@@ -2961,8 +2961,8 @@ importers:
       '@types/lodash': ^4.14.179
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       eslint: ^8.19.0
       eslint-config-custom: workspace:*
       js-cookie: ^3.0.1
@@ -2979,8 +2979,8 @@ importers:
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       eslint: 8.19.0
       eslint-config-custom: link:../eslint-config-custom
       typescript: 4.7.4
@@ -3066,8 +3066,8 @@ importers:
       eslint-plugin-jsx-a11y: ^6.6.0
       eslint-plugin-react: ^7.30.1
       eslint-plugin-react-hooks: ^4.6.0
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0
       typescript: ^4.7.4
     dependencies:
       eslint-config-prettier: 8.5.0_eslint@8.19.0
@@ -3078,8 +3078,8 @@ importers:
     devDependencies:
       eslint: 8.19.0
       eslint-config-react-app: 7.0.1_4x5o4skxv6sl53vpwefgt23khm
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       typescript: 4.7.4
 
   packages/player:
@@ -3105,8 +3105,8 @@ importers:
       '@types/lodash': ^4.14.179
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@xstate/react': '=1.5.1'
       assert: ^2.0.0
       classnames: ^2.3.1
@@ -3117,8 +3117,8 @@ importers:
       lodash: ^4.17.21
       msw: ^0.35.0
       prism-react-renderer: ^1.2.1
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0
       react-markdown: ^5.0.3
       react-test-renderer: ^17.0.2
       sass: ^1.43.4
@@ -3127,18 +3127,18 @@ importers:
       xstate: '=4.23.1'
     dependencies:
       '@babel/core': 7.16.5
-      '@emotion/react': 11.5.0_d4n6djswslldzaeq43jc477c54
-      '@radix-ui/react-dropdown-menu': 1.0.0_k2mvpji5i2ojml6m4ftklg47pa
-      '@reach/slider': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
-      '@reach/tabs': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@emotion/react': 11.5.0_yrcg6atwuqo7iv53lhe7ebwley
+      '@radix-ui/react-dropdown-menu': 1.0.0_bb2bxwco6ptpubzwpazr52qf6i
+      '@reach/slider': 0.17.0_biqbaboplfbrettd7655fr4n2y
+      '@reach/tabs': 0.17.0_biqbaboplfbrettd7655fr4n2y
       '@skillrecordings/react': link:../react
       '@skillrecordings/time': link:../time
-      '@tippyjs/react': 4.2.6_sfoxds7t5ydpegc3knd667wn6m
+      '@tippyjs/react': 4.2.6_biqbaboplfbrettd7655fr4n2y
       classnames: 2.3.1
       hls.js: 1.1.5
       js-cookie: 3.0.1
-      prism-react-renderer: 1.2.1_react@17.0.2
-      react-markdown: 5.0.3_hx2b44akkvgcgvvtmk7ds2qk6q
+      prism-react-renderer: 1.2.1_react@18.2.0
+      react-markdown: 5.0.3_3hx2ussxxho4jajbwrd6gq34qe
       screenfull: 5.2.0
     devDependencies:
       '@emotion/babel-plugin': 11.3.0_@babel+core@7.16.5
@@ -3147,24 +3147,24 @@ importers:
       '@skillrecordings/tsconfig': link:../tsconfig
       '@skillrecordings/types': link:../types
       '@testing-library/jest-dom': 5.16.2
-      '@testing-library/react': 12.1.4_sfoxds7t5ydpegc3knd667wn6m
+      '@testing-library/react': 12.1.4_biqbaboplfbrettd7655fr4n2y
       '@types/cookie': 0.4.1
       '@types/jest': 27.5.2
       '@types/js-cookie': 3.0.2
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       assert: 2.0.0
       eslint: 8.19.0
       eslint-config-custom: link:../eslint-config-custom
       lodash: 4.17.21
       msw: 0.35.0
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      react-test-renderer: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-test-renderer: 17.0.2_react@18.2.0
       sass: 1.43.4
       typescript: 4.7.4
       xstate: 4.23.1
@@ -3195,8 +3195,8 @@ importers:
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
       '@types/reach__auto-id': ^0.3.1
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/react-syntax-highlighter': ^13.5.2
       '@xstate/react': '=1.5.1'
       assert: ^2.0.0
@@ -3208,8 +3208,8 @@ importers:
       lodash: ^4.17.21
       next: ^12.2.3
       query-string: ^7.1.1
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0
       react-markdown: ^6.0.3
       react-syntax-highlighter: ^15.4.4
       react-test-renderer: ^17.0.2
@@ -3218,11 +3218,11 @@ importers:
       xstate: '=4.23.1'
       yup: ^0.32.11
     dependencies:
-      '@accessible/use-conditional-focus': 3.0.1_react@17.0.2
-      '@codesandbox/sandpack-react': 1.3.1_sfoxds7t5ydpegc3knd667wn6m
+      '@accessible/use-conditional-focus': 3.0.1_react@18.2.0
+      '@codesandbox/sandpack-react': 1.3.1_biqbaboplfbrettd7655fr4n2y
       '@codesandbox/sandpack-themes': 1.0.0
-      '@reach/auto-id': 0.16.0_sfoxds7t5ydpegc3knd667wn6m
-      '@reach/utils': 0.16.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/auto-id': 0.16.0_biqbaboplfbrettd7655fr4n2y
+      '@reach/utils': 0.16.0_biqbaboplfbrettd7655fr4n2y
       '@skillrecordings/analytics': link:../analytics
       '@skillrecordings/auth': link:../auth
       '@skillrecordings/axios': link:../axios
@@ -3232,36 +3232,36 @@ importers:
       '@skillrecordings/react': link:../react
       axios: 0.26.1
       eslint-config-custom: link:../eslint-config-custom
-      formik: 2.2.9_react@17.0.2
+      formik: 2.2.9_react@18.2.0
       query-string: 7.1.1
-      react-markdown: 6.0.3_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-syntax-highlighter: 15.4.4_react@17.0.2
+      react-markdown: 6.0.3_3hx2ussxxho4jajbwrd6gq34qe
+      react-syntax-highlighter: 15.4.4_react@18.2.0
       yup: 0.32.11
     devDependencies:
       '@skillrecordings/scripts': link:../scripts
       '@skillrecordings/tsconfig': link:../tsconfig
       '@skillrecordings/types': link:../types
       '@testing-library/jest-dom': 5.16.2
-      '@testing-library/react': 12.1.2_sfoxds7t5ydpegc3knd667wn6m
-      '@testing-library/react-hooks': 7.0.2_7qv3rjnqa3j7exc7qtvho7thru
+      '@testing-library/react': 12.1.2_biqbaboplfbrettd7655fr4n2y
+      '@testing-library/react-hooks': 7.0.2_pqvonxj6wieqlv6l3bvjvzu5hy
       '@types/cookie': 0.4.1
       '@types/jest': 27.5.2
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/reach__auto-id': 0.3.1_sfoxds7t5ydpegc3knd667wn6m
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/reach__auto-id': 0.3.1_biqbaboplfbrettd7655fr4n2y
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/react-syntax-highlighter': 13.5.2
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       assert: 2.0.0
       esbuild-node-tsc: 1.6.1_typescript@4.7.4
       eslint: 8.19.0
       lodash: 4.17.21
-      next: 12.2.3_bra7dgvoeiis5hyys3uir3dssy
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      react-test-renderer: 17.0.2_react@17.0.2
+      next: 12.2.3_dyjg3c6zvjv6p4lxmcqda555km
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-test-renderer: 17.0.2_react@18.2.0
       sass: 1.43.4
       typescript: 4.7.4
       xstate: 4.23.1
@@ -3284,8 +3284,8 @@ importers:
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
       '@types/nprogress': ^0.2.0
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@xstate/react': '=1.5.1'
       axios: ^0.26.0
       esbuild-node-tsc: ^1.6.1
@@ -3298,8 +3298,8 @@ importers:
       nprogress: ^0.2.0
       prism-react-renderer: ^1.2.1
       query-string: ^7.1.1
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0
       react-scroll: ^1.8.6
       react-use-clipboard: ^1.0.7
       sass: ^1.43.4
@@ -3313,14 +3313,14 @@ importers:
       '@skillrecordings/config': link:../config
       '@skillrecordings/cookies': link:../cookies
       '@skillrecordings/viewer': link:../viewer
-      '@tippyjs/react': 4.2.6_sfoxds7t5ydpegc3knd667wn6m
+      '@tippyjs/react': 4.2.6_biqbaboplfbrettd7655fr4n2y
       axios: 0.26.1
-      formik: 2.2.9_react@17.0.2
+      formik: 2.2.9_react@18.2.0
       nprogress: 0.2.0
-      prism-react-renderer: 1.2.1_react@17.0.2
+      prism-react-renderer: 1.2.1_react@18.2.0
       query-string: 7.1.1
-      react-scroll: 1.8.7_sfoxds7t5ydpegc3knd667wn6m
-      react-use-clipboard: 1.0.7_sfoxds7t5ydpegc3knd667wn6m
+      react-scroll: 1.8.7_biqbaboplfbrettd7655fr4n2y
+      react-use-clipboard: 1.0.7_biqbaboplfbrettd7655fr4n2y
       yup: 0.32.11
     devDependencies:
       '@skillrecordings/scripts': link:../scripts
@@ -3332,17 +3332,17 @@ importers:
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
       '@types/nprogress': 0.2.0
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       esbuild-node-tsc: 1.6.1_typescript@4.7.4
       eslint: 8.19.0
       eslint-config-custom: link:../eslint-config-custom
       lodash: 4.17.21
       msw: 0.35.0
-      next: 12.2.3_bra7dgvoeiis5hyys3uir3dssy
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      next: 12.2.3_dyjg3c6zvjv6p4lxmcqda555km
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       sass: 1.43.4
       typescript: 4.7.4
       xstate: 4.23.1
@@ -3354,8 +3354,8 @@ importers:
       '@types/lodash': ^4.14.179
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       jest: ^27.5.1
       jest-environment-jsdom: ^27.5.1
       jest-expect-message: ^1.0.2
@@ -3370,8 +3370,8 @@ importers:
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       jest-environment-jsdom: 27.5.1
       jest-expect-message: 1.0.2
       typescript: 4.7.4
@@ -3397,8 +3397,8 @@ importers:
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
       '@types/oauth': ^0.9.1
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@types/sanitize-html': ^2.6.2
       autoprefixer: ^10.4.2
       babel-plugin-jsx-pragmatic: ^1.0.2
@@ -3422,8 +3422,8 @@ importers:
       postcss-cli: ^9.0.2
       preact: ^10.7.2
       preact-render-to-string: ^5.2.0
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0
       sanitize-html: ^2.7.0
       typescript: ^4.7.4
       whatwg-fetch: ^3.6.2
@@ -3455,8 +3455,8 @@ importers:
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
       '@types/oauth': 0.9.1
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/sanitize-html': 2.6.2
       autoprefixer: 10.4.7_postcss@8.4.14
       babel-plugin-jsx-pragmatic: 1.0.2
@@ -3468,14 +3468,14 @@ importers:
       jest: 27.5.1
       jest-watch-typeahead: 1.1.0_jest@27.5.1
       msw: 0.35.0
-      next: 12.2.3_bdqedtwv3pefsm7666rf4y5ak4
-      next-auth: 4.2.1_uwv6tj4c6jl3tcycfdgw4fi3ba
+      next: 12.2.3_x6hpkaqu4dxwl4unajq2h7dx44
+      next-auth: 4.2.1_veosbehjv4o6lw47zt43je3zka
       nodemailer: 6.7.2
       nodemailer-postmark-transport: 5.2.1_nodemailer@6.7.2
       postcss: 8.4.14
       postcss-cli: 9.1.0_postcss@8.4.14
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       typescript: 4.7.4
       whatwg-fetch: 3.6.2
 
@@ -3489,13 +3489,13 @@ importers:
       '@types/lodash': ^4.14.179
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       esbuild-node-tsc: ^1.6.1
       eslint-config-custom: workspace:*
       next: ^12.2.3
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0
       stripe: ^8.186.1
       typescript: ^4.7.4
     devDependencies:
@@ -3507,13 +3507,13 @@ importers:
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       esbuild-node-tsc: 1.6.1_typescript@4.7.4
       eslint-config-custom: link:../eslint-config-custom
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       stripe: 8.209.0
       typescript: 4.7.4
 
@@ -3527,8 +3527,8 @@ importers:
       '@types/lodash': ^4.14.179
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       eslint: ^8.19.0
       eslint-config-custom: workspace:*
       typescript: ^4.7.4
@@ -3541,8 +3541,8 @@ importers:
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       eslint: 8.19.0
       eslint-config-custom: link:../eslint-config-custom
       typescript: 4.7.4
@@ -3559,8 +3559,8 @@ importers:
       '@types/lodash': ^4.14.179
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       eslint: ^8.19.0
       eslint-config-custom: workspace:*
       typescript: ^4.7.4
@@ -3572,8 +3572,8 @@ importers:
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       eslint: 8.19.0
       eslint-config-custom: link:../eslint-config-custom
       typescript: 4.7.4
@@ -3593,16 +3593,16 @@ importers:
       '@types/lodash': ^4.14.179
       '@types/node': ^17.0.0
       '@types/nodemailer': ^6.4.4
-      '@types/react': ^17.0.42
-      '@types/react-dom': ^17.0.17
+      '@types/react': ^18.0.15
+      '@types/react-dom': ^18.0.6
       '@xstate/react': '=1.5.1'
       esbuild-node-tsc: ^1.6.1
       eslint: ^8.19.0
       eslint-config-custom: workspace:*
       lodash: ^4.17.21
       query-string: ^7.1.1
-      react: 17.0.2
-      react-dom: 17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0
       typescript: ^4.7.4
       xstate: '=4.23.1'
     dependencies:
@@ -3621,15 +3621,15 @@ importers:
       '@types/lodash': 4.14.180
       '@types/node': 17.0.41
       '@types/nodemailer': 6.4.4
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
-      '@xstate/react': 1.5.1_h67gsb3uahtysktynl56vrd26m
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
+      '@xstate/react': 1.5.1_bpg42ha2il6pcyn3wrx2rxrchm
       esbuild-node-tsc: 1.6.1_typescript@4.7.4
       eslint: 8.19.0
       eslint-config-custom: link:../eslint-config-custom
       lodash: 4.17.21
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       typescript: 4.7.4
       xstate: 4.23.1
 
@@ -3643,14 +3643,14 @@ packages:
     resolution: {integrity: sha512-FJCKCtewk0x2dAr+KYv+SZOgFoclmsBd7wH3i8oVIr09dCRrliHixMqC2g52lasqk1VNfxPjNue1ebEjlP5S+g==}
     dev: false
 
-  /@accessible/use-conditional-focus/3.0.1_react@17.0.2:
+  /@accessible/use-conditional-focus/3.0.1_react@18.2.0:
     resolution: {integrity: sha512-Vo0gdnHiLfnnATzcarqU45KYp9mkadccjL27TpfHHetT1s0NNEuyc5qirYWxDBBJDk+GaiGzNjJ4/eddkPhKVQ==}
     peerDependencies:
       react: '>=16.8'
     dependencies:
       '@accessible/tabbable': 1.1.2
-      '@react-hook/event': 1.2.3_react@17.0.2
-      react: 17.0.2
+      '@react-hook/event': 1.2.3_react@18.2.0
+      react: 18.2.0
     dev: false
 
   /@algolia/autocomplete-core/1.6.2:
@@ -6969,12 +6969,12 @@ packages:
       exec-sh: 0.3.6
       minimist: 1.2.6
 
-  /@code-hike/classer/0.0.0-e48fa74_react@17.0.2:
+  /@code-hike/classer/0.0.0-e48fa74_react@18.2.0:
     resolution: {integrity: sha512-CyPYvfl4K5Hp9uyhLhUemul56eiGOF0FNXh5ALzzK9VNhRmRmj1O0mKtLDpoccI8W90r9kQES/nW2FC8jVVieg==}
     peerDependencies:
       react: '>=16.8'
     dependencies:
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
   /@codemirror/autocomplete/0.19.15:
@@ -7178,13 +7178,13 @@ packages:
       lodash.isequal: 4.5.0
     dev: false
 
-  /@codesandbox/sandpack-react/1.3.1_sfoxds7t5ydpegc3knd667wn6m:
+  /@codesandbox/sandpack-react/1.3.1_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-Ju/c6sHYvlPaX69CVXVULhOJ4zwKLKqk5wKNfhz/xINO1+Pm7xR4Qq7kDr4eYnkivmPuYY/6pyIOPWwoWkmLBA==}
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18
       react-dom: ^16.8.0 || ^17 || ^18
     dependencies:
-      '@code-hike/classer': 0.0.0-e48fa74_react@17.0.2
+      '@code-hike/classer': 0.0.0-e48fa74_react@18.2.0
       '@codemirror/closebrackets': 0.19.2
       '@codemirror/commands': 0.19.8
       '@codemirror/comment': 0.19.1
@@ -7200,14 +7200,14 @@ packages:
       '@codemirror/state': 0.19.9
       '@codemirror/view': 0.19.48
       '@codesandbox/sandpack-client': 1.2.2
-      '@react-hook/intersection-observer': 3.1.1_react@17.0.2
+      '@react-hook/intersection-observer': 3.1.1_react@18.2.0
       '@stitches/core': 1.2.8
       codesandbox-import-util-types: 2.2.3
       lodash.isequal: 4.5.0
       lz-string: 1.4.4
-      react: 17.0.2
+      react: 18.2.0
       react-devtools-inline: 4.4.0
-      react-dom: 17.0.2_react@17.0.2
+      react-dom: 18.2.0_react@18.2.0
       react-is: 17.0.2
     dev: false
 
@@ -7465,7 +7465,7 @@ packages:
   /@emotion/memoize/0.7.5:
     resolution: {integrity: sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==}
 
-  /@emotion/react/11.5.0_d4n6djswslldzaeq43jc477c54:
+  /@emotion/react/11.5.0_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-MYq/bzp3rYbee4EMBORCn4duPQfgpiEB5XzrZEBnUZAL80Qdfr7CEv/T80jwaTl/dnZmt9SnTa8NkTrwFNpLlw==}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -7477,18 +7477,18 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/core': 7.16.5
       '@babel/runtime': 7.18.3
       '@emotion/cache': 11.5.0
       '@emotion/serialize': 1.0.2
       '@emotion/sheet': 1.0.3
       '@emotion/utils': 1.0.0
       '@emotion/weak-memoize': 0.2.5
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
       hoist-non-react-statics: 3.3.2
-      react: 17.0.2
+      react: 18.2.0
+    dev: true
 
-  /@emotion/react/11.5.0_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /@emotion/react/11.5.0_yrcg6atwuqo7iv53lhe7ebwley:
     resolution: {integrity: sha512-MYq/bzp3rYbee4EMBORCn4duPQfgpiEB5XzrZEBnUZAL80Qdfr7CEv/T80jwaTl/dnZmt9SnTa8NkTrwFNpLlw==}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -7500,16 +7500,16 @@ packages:
       '@types/react':
         optional: true
     dependencies:
+      '@babel/core': 7.16.5
       '@babel/runtime': 7.18.3
       '@emotion/cache': 11.5.0
       '@emotion/serialize': 1.0.2
       '@emotion/sheet': 1.0.3
       '@emotion/utils': 1.0.0
       '@emotion/weak-memoize': 0.2.5
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
       hoist-non-react-statics: 3.3.2
-      react: 17.0.2
-    dev: true
+      react: 18.2.0
 
   /@emotion/serialize/1.0.2:
     resolution: {integrity: sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==}
@@ -7583,37 +7583,37 @@ packages:
       '@floating-ui/core': 0.7.3
     dev: false
 
-  /@floating-ui/react-dom/0.7.2_k2mvpji5i2ojml6m4ftklg47pa:
+  /@floating-ui/react-dom/0.7.2_bb2bxwco6ptpubzwpazr52qf6i:
     resolution: {integrity: sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
       '@floating-ui/dom': 0.5.4
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      use-isomorphic-layout-effect: 1.1.1_hx2b44akkvgcgvvtmk7ds2qk6q
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      use-isomorphic-layout-effect: 1.1.1_3hx2ussxxho4jajbwrd6gq34qe
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /@headlessui/react/1.6.1_sfoxds7t5ydpegc3knd667wn6m:
+  /@headlessui/react/1.6.1_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-gMd6uIs1U4Oz718Z5gFoV0o/vD43/4zvbyiJN9Dt7PK9Ubxn+TmJwTmYwyNJc5KxxU1t0CmgTNgwZX9+4NjCnQ==}
     engines: {node: '>=10'}
     peerDependencies:
       react: ^16 || ^17 || ^18
       react-dom: ^16 || ^17 || ^18
     dependencies:
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@heroicons/react/1.0.6_react@17.0.2:
+  /@heroicons/react/1.0.6_react@18.2.0:
     resolution: {integrity: sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==}
     peerDependencies:
       react: '>= 16'
     dependencies:
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
   /@humanwhocodes/config-array/0.9.5:
@@ -8161,11 +8161,11 @@ packages:
       read-yaml-file: 1.1.0
     dev: false
 
-  /@mdx-js/loader/1.6.22_react@17.0.2:
+  /@mdx-js/loader/1.6.22_react@18.2.0:
     resolution: {integrity: sha512-9CjGwy595NaxAYp0hF9B/A0lH6C8Rms97e2JS9d3jVUtILn6pT5i5IV965ra3lIWc7Rs1GG1tBdVF7dCowYe6Q==}
     dependencies:
       '@mdx-js/mdx': 1.6.22
-      '@mdx-js/react': 1.6.22_react@17.0.2
+      '@mdx-js/react': 1.6.22_react@18.2.0
       loader-utils: 2.0.0
     transitivePeerDependencies:
       - react
@@ -8265,31 +8265,21 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /@mdx-js/react/1.6.22_react@17.0.2:
+  /@mdx-js/react/1.6.22_react@18.2.0:
     resolution: {integrity: sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==}
     peerDependencies:
       react: ^16.13.1 || ^17.0.0
     dependencies:
-      react: 17.0.2
-
-  /@mdx-js/react/2.0.0_react@17.0.2:
-    resolution: {integrity: sha512-icpMd43xqORnHSVRwALZv3ELN3IS7VS3BL+FyH2FFergQPSQ21FX0lN+OMIs0X+3dGY1L0DLhBCkMfPO+yDG7Q==}
-    peerDependencies:
-      react: '>=16'
-    dependencies:
-      '@types/mdx': 2.0.1
-      '@types/react': 17.0.45
-      react: 17.0.2
-    dev: false
+      react: 18.2.0
 
-  /@mdx-js/react/2.1.2_react@17.0.2:
+  /@mdx-js/react/2.1.2_react@18.2.0:
     resolution: {integrity: sha512-52e3DTJBrjsw3U51ZCdZ3N1IBaqnbzLIngCSXpKtiYiGr7PIqp3/P/+kym0MPTwBL/y9ZBmCieD8FyrXuEDrRw==}
     peerDependencies:
       react: '>=16'
     dependencies:
       '@types/mdx': 2.0.2
-      '@types/react': 17.0.45
-      react: 17.0.2
+      '@types/react': 18.0.15
+      react: 18.2.0
     dev: false
 
   /@mdx-js/util/1.6.22:
@@ -8369,7 +8359,7 @@ packages:
       '@prisma/client': '>=2.26.0 || >=3'
       next-auth: ^4.0.1
     dependencies:
-      next-auth: 4.10.2_uwv6tj4c6jl3tcycfdgw4fi3ba
+      next-auth: 4.10.2_veosbehjv4o6lw47zt43je3zka
     dev: false
 
   /@next/env/12.2.0:
@@ -8393,8 +8383,8 @@ packages:
       '@mdx-js/loader': '>=0.15.0'
       '@mdx-js/react': '*'
     dependencies:
-      '@mdx-js/loader': 1.6.22_react@17.0.2
-      '@mdx-js/react': 1.6.22_react@17.0.2
+      '@mdx-js/loader': 1.6.22_react@18.2.0
+      '@mdx-js/react': 1.6.22_react@18.2.0
     dev: false
 
   /@next/mdx/12.1.5_@mdx-js+loader@1.6.22:
@@ -8403,7 +8393,7 @@ packages:
       '@mdx-js/loader': '>=0.15.0'
       '@mdx-js/react': '*'
     dependencies:
-      '@mdx-js/loader': 1.6.22_react@17.0.2
+      '@mdx-js/loader': 1.6.22_react@18.2.0
     dev: false
 
   /@next/mdx/12.1.5_@mdx-js+loader@2.1.2:
@@ -8422,7 +8412,7 @@ packages:
       '@mdx-js/react': '*'
     dependencies:
       '@mdx-js/loader': 2.1.2_webpack@4.46.0
-      '@mdx-js/react': 2.1.2_react@17.0.2
+      '@mdx-js/react': 2.1.2_react@18.2.0
     dev: false
 
   /@next/mdx/12.2.3_@mdx-js+loader@1.6.22:
@@ -8431,7 +8421,7 @@ packages:
       '@mdx-js/loader': '>=0.15.0'
       '@mdx-js/react': '*'
     dependencies:
-      '@mdx-js/loader': 1.6.22_react@17.0.2
+      '@mdx-js/loader': 1.6.22_react@18.2.0
     dev: false
 
   /@next/swc-android-arm-eabi/12.2.3:
@@ -8597,14 +8587,14 @@ packages:
     resolution: {integrity: sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==}
     dev: false
 
-  /@portabletext/react/1.0.6_react@17.0.2:
+  /@portabletext/react/1.0.6_react@18.2.0:
     resolution: {integrity: sha512-j6BprLiwFz3zr1Lo6BxM2sQ1b3g1JIjGwePeuxqSfbBiEYbGXn2izEckMJ02hSa1f7+RCEUJ+Bojvtzz6BBUaw==}
     peerDependencies:
       react: ^17 || ^18
     dependencies:
       '@portabletext/toolkit': 1.0.5
       '@portabletext/types': 1.0.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
   /@portabletext/toolkit/1.0.5:
@@ -8658,7 +8648,7 @@ packages:
       '@babel/runtime': 7.18.3
     dev: false
 
-  /@radix-ui/react-alert-dialog/0.1.7_k2mvpji5i2ojml6m4ftklg47pa:
+  /@radix-ui/react-alert-dialog/0.1.7_bb2bxwco6ptpubzwpazr52qf6i:
     resolution: {integrity: sha512-b0+TWr0VRWMWM7QcXvvcwbMGNzpTmvPBSBpYcoaD+QnVo3jdJt0k0bghwbYBuywzdyuRNUFf33xwah/57w09QA==}
     peerDependencies:
       react: '>=16.8'
@@ -8666,91 +8656,91 @@ packages:
     dependencies:
       '@babel/runtime': 7.17.2
       '@radix-ui/primitive': 0.1.0
-      '@radix-ui/react-compose-refs': 0.1.0_react@17.0.2
-      '@radix-ui/react-context': 0.1.1_react@17.0.2
-      '@radix-ui/react-dialog': 0.1.7_k2mvpji5i2ojml6m4ftklg47pa
-      '@radix-ui/react-primitive': 0.1.4_react@17.0.2
-      '@radix-ui/react-slot': 0.1.2_react@17.0.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@radix-ui/react-compose-refs': 0.1.0_react@18.2.0
+      '@radix-ui/react-context': 0.1.1_react@18.2.0
+      '@radix-ui/react-dialog': 0.1.7_bb2bxwco6ptpubzwpazr52qf6i
+      '@radix-ui/react-primitive': 0.1.4_react@18.2.0
+      '@radix-ui/react-slot': 0.1.2_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /@radix-ui/react-arrow/0.1.3_react@17.0.2:
+  /@radix-ui/react-arrow/0.1.3_react@18.2.0:
     resolution: {integrity: sha512-9x1gRYdlUD5OUwY7L+M+4FY/YltDSsrNSj8QXGPbxZxL5ghWXB/4lhyIGccCwk/e8ggfmQYv9SRNmn3LavPo3A==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-primitive': 0.1.3_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-primitive': 0.1.3_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-arrow/1.0.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@radix-ui/react-arrow/1.0.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-1MUuv24HCdepi41+qfv125EwMuxgQ+U+h0A9K3BjCO/J8nVRREKHHpkD9clwfnjEDk9hgGzCnff4aUKCPiRepw==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-primitive': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-collection/1.0.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@radix-ui/react-collection/1.0.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-8i1pf5dKjnq90Z8udnnXKzdCEV3/FYrfw0n/b6NvB6piXEn3fO1bOh7HBcpG8XrnIXzxlYu2oCcR38QpyLS/mg==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-compose-refs': 1.0.0_react@17.0.2
-      '@radix-ui/react-context': 1.0.0_react@17.0.2
-      '@radix-ui/react-primitive': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-slot': 1.0.0_react@17.0.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-slot': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-compose-refs/0.1.0_react@17.0.2:
+  /@radix-ui/react-compose-refs/0.1.0_react@18.2.0:
     resolution: {integrity: sha512-eyclbh+b77k+69Dk72q3694OHrn9B3QsoIRx7ywX341U9RK1ThgQjMFZoPtmZNQTksXHLNEiefR8hGVeFyInGg==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-compose-refs/1.0.0_react@17.0.2:
+  /@radix-ui/react-compose-refs/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-context/0.1.1_react@17.0.2:
+  /@radix-ui/react-context/0.1.1_react@18.2.0:
     resolution: {integrity: sha512-PkyVX1JsLBioeu0jB9WvRpDBBLtLZohVDT3BB5CTSJqActma8S8030P57mWZb4baZifMvN7KKWPAA40UmWKkQg==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-context/1.0.0_react@17.0.2:
+  /@radix-ui/react-context/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-dialog/0.1.7_k2mvpji5i2ojml6m4ftklg47pa:
+  /@radix-ui/react-dialog/0.1.7_bb2bxwco6ptpubzwpazr52qf6i:
     resolution: {integrity: sha512-jXt8srGhHBRvEr9jhEAiwwJzWCWZoGRJ030aC9ja/gkRJbZdy0iD3FwXf+Ff4RtsZyLUMHW7VUwFOlz3Ixe1Vw==}
     peerDependencies:
       react: ^16.8 || ^17.0
@@ -8758,50 +8748,50 @@ packages:
     dependencies:
       '@babel/runtime': 7.17.2
       '@radix-ui/primitive': 0.1.0
-      '@radix-ui/react-compose-refs': 0.1.0_react@17.0.2
-      '@radix-ui/react-context': 0.1.1_react@17.0.2
-      '@radix-ui/react-dismissable-layer': 0.1.5_react@17.0.2
-      '@radix-ui/react-focus-guards': 0.1.0_react@17.0.2
-      '@radix-ui/react-focus-scope': 0.1.4_react@17.0.2
-      '@radix-ui/react-id': 0.1.5_react@17.0.2
-      '@radix-ui/react-portal': 0.1.4_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-presence': 0.1.2_react@17.0.2
-      '@radix-ui/react-primitive': 0.1.4_react@17.0.2
-      '@radix-ui/react-slot': 0.1.2_react@17.0.2
-      '@radix-ui/react-use-controllable-state': 0.1.0_react@17.0.2
+      '@radix-ui/react-compose-refs': 0.1.0_react@18.2.0
+      '@radix-ui/react-context': 0.1.1_react@18.2.0
+      '@radix-ui/react-dismissable-layer': 0.1.5_react@18.2.0
+      '@radix-ui/react-focus-guards': 0.1.0_react@18.2.0
+      '@radix-ui/react-focus-scope': 0.1.4_react@18.2.0
+      '@radix-ui/react-id': 0.1.5_react@18.2.0
+      '@radix-ui/react-portal': 0.1.4_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-presence': 0.1.2_react@18.2.0
+      '@radix-ui/react-primitive': 0.1.4_react@18.2.0
+      '@radix-ui/react-slot': 0.1.2_react@18.2.0
+      '@radix-ui/react-use-controllable-state': 0.1.0_react@18.2.0
       aria-hidden: 1.1.3
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      react-remove-scroll: 2.4.3_hx2b44akkvgcgvvtmk7ds2qk6q
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-remove-scroll: 2.4.3_3hx2ussxxho4jajbwrd6gq34qe
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /@radix-ui/react-direction/1.0.0_react@17.0.2:
+  /@radix-ui/react-direction/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-dismissable-layer/0.1.5_react@17.0.2:
+  /@radix-ui/react-dismissable-layer/0.1.5_react@18.2.0:
     resolution: {integrity: sha512-J+fYWijkX4M4QKwf9dtu1oC0U6e6CEl8WhBp3Ad23yz2Hia0XCo6Pk/mp5CAFy4QBtQedTSkhW05AdtSOEoajQ==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
       '@radix-ui/primitive': 0.1.0
-      '@radix-ui/react-compose-refs': 0.1.0_react@17.0.2
-      '@radix-ui/react-primitive': 0.1.4_react@17.0.2
-      '@radix-ui/react-use-body-pointer-events': 0.1.1_react@17.0.2
-      '@radix-ui/react-use-callback-ref': 0.1.0_react@17.0.2
-      '@radix-ui/react-use-escape-keydown': 0.1.0_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-compose-refs': 0.1.0_react@18.2.0
+      '@radix-ui/react-primitive': 0.1.4_react@18.2.0
+      '@radix-ui/react-use-body-pointer-events': 0.1.1_react@18.2.0
+      '@radix-ui/react-use-callback-ref': 0.1.0_react@18.2.0
+      '@radix-ui/react-use-escape-keydown': 0.1.0_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-dismissable-layer/1.0.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@radix-ui/react-dismissable-layer/1.0.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
@@ -8809,15 +8799,15 @@ packages:
     dependencies:
       '@babel/runtime': 7.18.3
       '@radix-ui/primitive': 1.0.0
-      '@radix-ui/react-compose-refs': 1.0.0_react@17.0.2
-      '@radix-ui/react-primitive': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-use-callback-ref': 1.0.0_react@17.0.2
-      '@radix-ui/react-use-escape-keydown': 1.0.0_react@17.0.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-escape-keydown': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-dropdown-menu/1.0.0_k2mvpji5i2ojml6m4ftklg47pa:
+  /@radix-ui/react-dropdown-menu/1.0.0_bb2bxwco6ptpubzwpazr52qf6i:
     resolution: {integrity: sha512-Ptben3TxPWrZLbInO7zjAK73kmjYuStsxfg6ujgt+EywJyREoibhZYnsSNqC+UiOtl4PdW/MOHhxVDtew5fouQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
@@ -8825,93 +8815,93 @@ packages:
     dependencies:
       '@babel/runtime': 7.18.3
       '@radix-ui/primitive': 1.0.0
-      '@radix-ui/react-compose-refs': 1.0.0_react@17.0.2
-      '@radix-ui/react-context': 1.0.0_react@17.0.2
-      '@radix-ui/react-id': 1.0.0_react@17.0.2
-      '@radix-ui/react-menu': 1.0.0_k2mvpji5i2ojml6m4ftklg47pa
-      '@radix-ui/react-primitive': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-use-controllable-state': 1.0.0_react@17.0.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-id': 1.0.0_react@18.2.0
+      '@radix-ui/react-menu': 1.0.0_bb2bxwco6ptpubzwpazr52qf6i
+      '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /@radix-ui/react-focus-guards/0.1.0_react@17.0.2:
+  /@radix-ui/react-focus-guards/0.1.0_react@18.2.0:
     resolution: {integrity: sha512-kRx/swAjEfBpQ3ns7J3H4uxpXuWCqN7MpALiSDOXiyo2vkWv0L9sxvbpZeTulINuE3CGMzicVMuNc/VWXjFKOg==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-focus-guards/1.0.0_react@17.0.2:
+  /@radix-ui/react-focus-guards/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-focus-scope/0.1.4_react@17.0.2:
+  /@radix-ui/react-focus-scope/0.1.4_react@18.2.0:
     resolution: {integrity: sha512-fbA4ES3H4Wkxp+OeLhvN6SwL7mXNn/aBtUf7DRYxY9+Akrf7dRxl2ck4lgcpPsSg3zSDsEwLcY+h5cmj5yvlug==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-compose-refs': 0.1.0_react@17.0.2
-      '@radix-ui/react-primitive': 0.1.4_react@17.0.2
-      '@radix-ui/react-use-callback-ref': 0.1.0_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-compose-refs': 0.1.0_react@18.2.0
+      '@radix-ui/react-primitive': 0.1.4_react@18.2.0
+      '@radix-ui/react-use-callback-ref': 0.1.0_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-focus-scope/1.0.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@radix-ui/react-focus-scope/1.0.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-compose-refs': 1.0.0_react@17.0.2
-      '@radix-ui/react-primitive': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-use-callback-ref': 1.0.0_react@17.0.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-id/0.1.4_react@17.0.2:
+  /@radix-ui/react-id/0.1.4_react@18.2.0:
     resolution: {integrity: sha512-/hq5m/D0ZfJWOS7TLF+G0l08KDRs87LBE46JkAvgKkg1fW4jkucx9At9D9vauIPSbdNmww5kXEp566hMlA8eXA==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-use-layout-effect': 0.1.0_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-use-layout-effect': 0.1.0_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-id/0.1.5_react@17.0.2:
+  /@radix-ui/react-id/0.1.5_react@18.2.0:
     resolution: {integrity: sha512-IPc4H/63bes0IZ1GJJozSEkSWcDyhNGtKFWUpJ+XtaLyQ1X3x7Mf6fWwWhDcpqlYEP+5WtAvfqcyEsyjP+ZhBQ==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-use-layout-effect': 0.1.0_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-use-layout-effect': 0.1.0_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-id/1.0.0_react@17.0.2:
+  /@radix-ui/react-id/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-use-layout-effect': 1.0.0_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-menu/1.0.0_k2mvpji5i2ojml6m4ftklg47pa:
+  /@radix-ui/react-menu/1.0.0_bb2bxwco6ptpubzwpazr52qf6i:
     resolution: {integrity: sha512-icW4C64T6nHh3Z4Q1fxO1RlSShouFF4UpUmPV8FLaJZfphDljannKErDuALDx4ClRLihAPZ9i+PrLNPoWS2DMA==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
@@ -8919,174 +8909,174 @@ packages:
     dependencies:
       '@babel/runtime': 7.18.3
       '@radix-ui/primitive': 1.0.0
-      '@radix-ui/react-collection': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-compose-refs': 1.0.0_react@17.0.2
-      '@radix-ui/react-context': 1.0.0_react@17.0.2
-      '@radix-ui/react-direction': 1.0.0_react@17.0.2
-      '@radix-ui/react-dismissable-layer': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-focus-guards': 1.0.0_react@17.0.2
-      '@radix-ui/react-focus-scope': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-id': 1.0.0_react@17.0.2
-      '@radix-ui/react-popper': 1.0.0_k2mvpji5i2ojml6m4ftklg47pa
-      '@radix-ui/react-portal': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-presence': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-primitive': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-roving-focus': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-slot': 1.0.0_react@17.0.2
-      '@radix-ui/react-use-callback-ref': 1.0.0_react@17.0.2
+      '@radix-ui/react-collection': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-direction': 1.0.0_react@18.2.0
+      '@radix-ui/react-dismissable-layer': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-focus-guards': 1.0.0_react@18.2.0
+      '@radix-ui/react-focus-scope': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-id': 1.0.0_react@18.2.0
+      '@radix-ui/react-popper': 1.0.0_bb2bxwco6ptpubzwpazr52qf6i
+      '@radix-ui/react-portal': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-roving-focus': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-slot': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
       aria-hidden: 1.1.3
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      react-remove-scroll: 2.5.4_hx2b44akkvgcgvvtmk7ds2qk6q
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-remove-scroll: 2.5.4_3hx2ussxxho4jajbwrd6gq34qe
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /@radix-ui/react-popper/0.1.3_react@17.0.2:
+  /@radix-ui/react-popper/0.1.3_react@18.2.0:
     resolution: {integrity: sha512-2OV2YaJv7iTZexJY3HJ7B6Fs1A/3JXd3fRGU4JY0guACfGMD1C/jSgds505MKQOTiHE/quI6j3/q8yfzFjJR9g==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
       '@radix-ui/popper': 0.1.0
-      '@radix-ui/react-arrow': 0.1.3_react@17.0.2
-      '@radix-ui/react-compose-refs': 0.1.0_react@17.0.2
-      '@radix-ui/react-context': 0.1.1_react@17.0.2
-      '@radix-ui/react-primitive': 0.1.3_react@17.0.2
-      '@radix-ui/react-use-rect': 0.1.1_react@17.0.2
-      '@radix-ui/react-use-size': 0.1.0_react@17.0.2
+      '@radix-ui/react-arrow': 0.1.3_react@18.2.0
+      '@radix-ui/react-compose-refs': 0.1.0_react@18.2.0
+      '@radix-ui/react-context': 0.1.1_react@18.2.0
+      '@radix-ui/react-primitive': 0.1.3_react@18.2.0
+      '@radix-ui/react-use-rect': 0.1.1_react@18.2.0
+      '@radix-ui/react-use-size': 0.1.0_react@18.2.0
       '@radix-ui/rect': 0.1.1
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-popper/1.0.0_k2mvpji5i2ojml6m4ftklg47pa:
+  /@radix-ui/react-popper/1.0.0_bb2bxwco6ptpubzwpazr52qf6i:
     resolution: {integrity: sha512-k2dDd+1Wl0XWAMs9ZvAxxYsB9sOsEhrFQV4CINd7IUZf0wfdye4OHen9siwxvZImbzhgVeKTJi68OQmPRvVdMg==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@floating-ui/react-dom': 0.7.2_k2mvpji5i2ojml6m4ftklg47pa
-      '@radix-ui/react-arrow': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-compose-refs': 1.0.0_react@17.0.2
-      '@radix-ui/react-context': 1.0.0_react@17.0.2
-      '@radix-ui/react-primitive': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-use-layout-effect': 1.0.0_react@17.0.2
-      '@radix-ui/react-use-rect': 1.0.0_react@17.0.2
-      '@radix-ui/react-use-size': 1.0.0_react@17.0.2
+      '@floating-ui/react-dom': 0.7.2_bb2bxwco6ptpubzwpazr52qf6i
+      '@radix-ui/react-arrow': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-rect': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-size': 1.0.0_react@18.2.0
       '@radix-ui/rect': 1.0.0
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /@radix-ui/react-portal/0.1.3_sfoxds7t5ydpegc3knd667wn6m:
+  /@radix-ui/react-portal/0.1.3_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-DrV+sPYLs0HhmX5/b7yRT6nLM9Nl6FtQe2KUG+46kiCOKQ+0XzNMO5hmeQtyq0mRf/qlC02rFu6OMsWpIqVsJg==}
     peerDependencies:
       react: ^16.8 || ^17.0
       react-dom: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-primitive': 0.1.3_react@17.0.2
-      '@radix-ui/react-use-layout-effect': 0.1.0_react@17.0.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@radix-ui/react-primitive': 0.1.3_react@18.2.0
+      '@radix-ui/react-use-layout-effect': 0.1.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-portal/0.1.4_sfoxds7t5ydpegc3knd667wn6m:
+  /@radix-ui/react-portal/0.1.4_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-MO0wRy2eYRTZ/CyOri9NANCAtAtq89DEtg90gicaTlkCfdqCLEBsLb+/q66BZQTr3xX/Vq01nnVfc/TkCqoqvw==}
     peerDependencies:
       react: ^16.8 || ^17.0
       react-dom: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-primitive': 0.1.4_react@17.0.2
-      '@radix-ui/react-use-layout-effect': 0.1.0_react@17.0.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@radix-ui/react-primitive': 0.1.4_react@18.2.0
+      '@radix-ui/react-use-layout-effect': 0.1.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-portal/1.0.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@radix-ui/react-portal/1.0.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-primitive': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-presence/0.1.1_react@17.0.2:
+  /@radix-ui/react-presence/0.1.1_react@18.2.0:
     resolution: {integrity: sha512-LsL+NcWDpFUAYCmXeH02o4pgqcSLpwxP84UIjCtpIKrsPe2vLuhcp79KC/jZJeXz+of2lUpMAxpM+eCpxFZtlg==}
     peerDependencies:
       react: '>=16.8'
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-compose-refs': 0.1.0_react@17.0.2
-      '@radix-ui/react-use-layout-effect': 0.1.0_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-compose-refs': 0.1.0_react@18.2.0
+      '@radix-ui/react-use-layout-effect': 0.1.0_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-presence/0.1.2_react@17.0.2:
+  /@radix-ui/react-presence/0.1.2_react@18.2.0:
     resolution: {integrity: sha512-3BRlFZraooIUfRlyN+b/Xs5hq1lanOOo/+3h6Pwu2GMFjkGKKa4Rd51fcqGqnVlbr3jYg+WLuGyAV4KlgqwrQw==}
     peerDependencies:
       react: '>=16.8'
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-compose-refs': 0.1.0_react@17.0.2
-      '@radix-ui/react-use-layout-effect': 0.1.0_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-compose-refs': 0.1.0_react@18.2.0
+      '@radix-ui/react-use-layout-effect': 0.1.0_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-presence/1.0.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@radix-ui/react-presence/1.0.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-compose-refs': 1.0.0_react@17.0.2
-      '@radix-ui/react-use-layout-effect': 1.0.0_react@17.0.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-primitive/0.1.3_react@17.0.2:
+  /@radix-ui/react-primitive/0.1.3_react@18.2.0:
     resolution: {integrity: sha512-fcyADaaAx2jdqEDLsTs6aX50S3L1c9K9CC6XMpJpuXFJCU4n9PGTFDZRtY2gAoXXoRCPIBsklCopSmGb6SsDjQ==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-slot': 0.1.2_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-slot': 0.1.2_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-primitive/0.1.4_react@17.0.2:
+  /@radix-ui/react-primitive/0.1.4_react@18.2.0:
     resolution: {integrity: sha512-6gSl2IidySupIMJFjYnDIkIWRyQdbu/AHK7rbICPani+LW4b0XdxBXc46og/iZvuwW8pjCS8I2SadIerv84xYA==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-slot': 0.1.2_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-slot': 0.1.2_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-primitive/1.0.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@radix-ui/react-primitive/1.0.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-slot': 1.0.0_react@17.0.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@radix-ui/react-slot': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-roving-focus/1.0.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@radix-ui/react-roving-focus/1.0.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-lHvO4MhvoWpeNbiJAoyDsEtbKqP2jkkdwsMVJ3kfqbkC71J/aXE6Th6gkZA1xHEqSku+t+UgoDjvE7Z3gsBpcg==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
@@ -9094,39 +9084,39 @@ packages:
     dependencies:
       '@babel/runtime': 7.18.3
       '@radix-ui/primitive': 1.0.0
-      '@radix-ui/react-collection': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-compose-refs': 1.0.0_react@17.0.2
-      '@radix-ui/react-context': 1.0.0_react@17.0.2
-      '@radix-ui/react-direction': 1.0.0_react@17.0.2
-      '@radix-ui/react-id': 1.0.0_react@17.0.2
-      '@radix-ui/react-primitive': 1.0.0_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-use-callback-ref': 1.0.0_react@17.0.2
-      '@radix-ui/react-use-controllable-state': 1.0.0_react@17.0.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-    dev: false
-
-  /@radix-ui/react-slot/0.1.2_react@17.0.2:
+      '@radix-ui/react-collection': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-direction': 1.0.0_react@18.2.0
+      '@radix-ui/react-id': 1.0.0_react@18.2.0
+      '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-slot/0.1.2_react@18.2.0:
     resolution: {integrity: sha512-ADkqfL+agEzEguU3yS26jfB50hRrwf7U4VTwAOZEmi/g+ITcBWe12yM46ueS/UCIMI9Py+gFUaAdxgxafFvY2Q==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-compose-refs': 0.1.0_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-compose-refs': 0.1.0_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-slot/1.0.0_react@17.0.2:
+  /@radix-ui/react-slot/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-compose-refs': 1.0.0_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-tooltip/0.1.6_sfoxds7t5ydpegc3knd667wn6m:
+  /@radix-ui/react-tooltip/0.1.6_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-0uaRpRmTCQo5yMUkDpv4LEDnaQDoeLXcNNhZonCZdbZBQ7ntvjURIWIigq1/pXZp0UX7oPpFzsXD9jUp8JT0WA==}
     peerDependencies:
       react: ^16.8 || ^17.0
@@ -9134,165 +9124,165 @@ packages:
     dependencies:
       '@babel/runtime': 7.18.3
       '@radix-ui/primitive': 0.1.0
-      '@radix-ui/react-compose-refs': 0.1.0_react@17.0.2
-      '@radix-ui/react-context': 0.1.1_react@17.0.2
-      '@radix-ui/react-id': 0.1.4_react@17.0.2
-      '@radix-ui/react-popper': 0.1.3_react@17.0.2
-      '@radix-ui/react-portal': 0.1.3_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-presence': 0.1.1_react@17.0.2
-      '@radix-ui/react-primitive': 0.1.3_react@17.0.2
-      '@radix-ui/react-slot': 0.1.2_react@17.0.2
-      '@radix-ui/react-use-controllable-state': 0.1.0_react@17.0.2
-      '@radix-ui/react-use-escape-keydown': 0.1.0_react@17.0.2
-      '@radix-ui/react-use-previous': 0.1.0_react@17.0.2
-      '@radix-ui/react-use-rect': 0.1.1_react@17.0.2
-      '@radix-ui/react-visually-hidden': 0.1.3_react@17.0.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-    dev: false
-
-  /@radix-ui/react-use-body-pointer-events/0.1.1_react@17.0.2:
+      '@radix-ui/react-compose-refs': 0.1.0_react@18.2.0
+      '@radix-ui/react-context': 0.1.1_react@18.2.0
+      '@radix-ui/react-id': 0.1.4_react@18.2.0
+      '@radix-ui/react-popper': 0.1.3_react@18.2.0
+      '@radix-ui/react-portal': 0.1.3_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-presence': 0.1.1_react@18.2.0
+      '@radix-ui/react-primitive': 0.1.3_react@18.2.0
+      '@radix-ui/react-slot': 0.1.2_react@18.2.0
+      '@radix-ui/react-use-controllable-state': 0.1.0_react@18.2.0
+      '@radix-ui/react-use-escape-keydown': 0.1.0_react@18.2.0
+      '@radix-ui/react-use-previous': 0.1.0_react@18.2.0
+      '@radix-ui/react-use-rect': 0.1.1_react@18.2.0
+      '@radix-ui/react-visually-hidden': 0.1.3_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-use-body-pointer-events/0.1.1_react@18.2.0:
     resolution: {integrity: sha512-R8leV2AWmJokTmERM8cMXFHWSiv/fzOLhG/JLmRBhLTAzOj37EQizssq4oW0Z29VcZy2tODMi9Pk/htxwb+xpA==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-use-layout-effect': 0.1.0_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-use-layout-effect': 0.1.0_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-callback-ref/0.1.0_react@17.0.2:
+  /@radix-ui/react-use-callback-ref/0.1.0_react@18.2.0:
     resolution: {integrity: sha512-Va041McOFFl+aV+sejvl0BS2aeHx86ND9X/rVFmEFQKTXCp6xgUK0NGUAGcgBlIjnJSbMYPGEk1xKSSlVcN2Aw==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-callback-ref/1.0.0_react@17.0.2:
+  /@radix-ui/react-use-callback-ref/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-controllable-state/0.1.0_react@17.0.2:
+  /@radix-ui/react-use-controllable-state/0.1.0_react@18.2.0:
     resolution: {integrity: sha512-zv7CX/PgsRl46a52Tl45TwqwVJdmqnlQEQhaYMz/yBOD2sx2gCkCFSoF/z9mpnYWmS6DTLNTg5lIps3fV6EnXg==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-use-callback-ref': 0.1.0_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-use-callback-ref': 0.1.0_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-controllable-state/1.0.0_react@17.0.2:
+  /@radix-ui/react-use-controllable-state/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-use-callback-ref': 1.0.0_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-escape-keydown/0.1.0_react@17.0.2:
+  /@radix-ui/react-use-escape-keydown/0.1.0_react@18.2.0:
     resolution: {integrity: sha512-tDLZbTGFmvXaazUXXv8kYbiCcbAE8yKgng9s95d8fCO+Eundv0Jngbn/hKPhDDs4jj9ChwRX5cDDnlaN+ugYYQ==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-use-callback-ref': 0.1.0_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-use-callback-ref': 0.1.0_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-escape-keydown/1.0.0_react@17.0.2:
+  /@radix-ui/react-use-escape-keydown/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-use-callback-ref': 1.0.0_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-layout-effect/0.1.0_react@17.0.2:
+  /@radix-ui/react-use-layout-effect/0.1.0_react@18.2.0:
     resolution: {integrity: sha512-+wdeS51Y+E1q1Wmd+1xSSbesZkpVj4jsg0BojCbopWvgq5iBvixw5vgemscdh58ep98BwUbsFYnrywFhV9yrVg==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-layout-effect/1.0.0_react@17.0.2:
+  /@radix-ui/react-use-layout-effect/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-previous/0.1.0_react@17.0.2:
+  /@radix-ui/react-use-previous/0.1.0_react@18.2.0:
     resolution: {integrity: sha512-0fxNc33rYnCzDMPSiSnfS8YklnxQo8WqbAQXPAgIaaA1jRu2qFB916PL4qCIW+avcAAqFD38vWhqDqcVmBharA==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-rect/0.1.1_react@17.0.2:
+  /@radix-ui/react-use-rect/0.1.1_react@18.2.0:
     resolution: {integrity: sha512-kHNNXAsP3/PeszEmM/nxBBS9Jbo93sO+xuMTcRfwzXsmxT5gDXQzAiKbZQ0EecCPtJIzqvr7dlaQi/aP1PKYqQ==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
       '@radix-ui/rect': 0.1.1
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-rect/1.0.0_react@17.0.2:
+  /@radix-ui/react-use-rect/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-TB7pID8NRMEHxb/qQJpvSt3hQU4sqNPM1VCTjTRjEOa7cEop/QMuq8S6fb/5Tsz64kqSvB9WnwsDHtjnrM9qew==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
       '@radix-ui/rect': 1.0.0
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-size/0.1.0_react@17.0.2:
+  /@radix-ui/react-use-size/0.1.0_react@18.2.0:
     resolution: {integrity: sha512-TcZAsR+BYI46w/RbaSFCRACl+Jh6mDqhu6GS2r0iuJpIVrj8atff7qtTjmMmfGtEDNEjhl7DxN3pr1nTS/oruQ==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-size/1.0.0_react@17.0.2:
+  /@radix-ui/react-use-size/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-use-layout-effect': 1.0.0_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@radix-ui/react-visually-hidden/0.1.3_react@17.0.2:
+  /@radix-ui/react-visually-hidden/0.1.3_react@18.2.0:
     resolution: {integrity: sha512-dPU6ZR2WQ/W9qv7E1Y8/I8ymqG+8sViU6dQQ6sfr2/8yGr0I4mmI7ywTnqXaE+YS9gHLEZHdQcEqTNESg6YfdQ==}
     peerDependencies:
       react: ^16.8 || ^17.0
     dependencies:
       '@babel/runtime': 7.18.3
-      '@radix-ui/react-primitive': 0.1.3_react@17.0.2
-      react: 17.0.2
+      '@radix-ui/react-primitive': 0.1.3_react@18.2.0
+      react: 18.2.0
     dev: false
 
   /@radix-ui/rect/0.1.1:
@@ -9307,213 +9297,213 @@ packages:
       '@babel/runtime': 7.18.3
     dev: false
 
-  /@reach/auto-id/0.16.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@reach/auto-id/0.16.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-5ssbeP5bCkM39uVsfQCwBBL+KT8YColdnMN5/Eto6Rj7929ql95R3HZUOkKIvj7mgPtEb60BLQxd1P3o6cjbmg==}
     peerDependencies:
       react: ^16.8.0 || 17.x
       react-dom: ^16.8.0 || 17.x
     dependencies:
-      '@reach/utils': 0.16.0_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@reach/utils': 0.16.0_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       tslib: 2.3.1
 
-  /@reach/auto-id/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@reach/auto-id/0.17.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-ud8iPwF52RVzEmkHq1twuqGuPA+moreumUHdtgvU3sr3/15BNhwp3KyDLrKKSz0LP1r3V4pSdyF9MbYM8BoSjA==}
     peerDependencies:
       react: ^16.8.0 || 17.x
       react-dom: ^16.8.0 || 17.x
     dependencies:
-      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@reach/utils': 0.17.0_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       tslib: 2.4.0
     dev: false
 
-  /@reach/descendants/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@reach/descendants/0.17.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-c7lUaBfjgcmKFZiAWqhG+VnXDMEhPkI4kAav/82XKZD6NVvFjsQOTH+v3tUkskrAPV44Yuch0mFW/u5Ntifr7Q==}
     peerDependencies:
       react: ^16.8.0 || 17.x
       react-dom: ^16.8.0 || 17.x
     dependencies:
-      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@reach/utils': 0.17.0_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       tslib: 2.4.0
     dev: false
 
-  /@reach/dialog/0.16.2_k2mvpji5i2ojml6m4ftklg47pa:
+  /@reach/dialog/0.16.2_bb2bxwco6ptpubzwpazr52qf6i:
     resolution: {integrity: sha512-qq8oX0cROgTb8LjOKWzzNm4SqaN9b89lJHr7UyVo2aQ6WbeNzZBxqXhGywFP7dkR+hNqOJnrA59PXFWhfttA9A==}
     peerDependencies:
       react: ^16.8.0 || 17.x
       react-dom: ^16.8.0 || 17.x
     dependencies:
-      '@reach/portal': 0.16.2_sfoxds7t5ydpegc3knd667wn6m
-      '@reach/utils': 0.16.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/portal': 0.16.2_biqbaboplfbrettd7655fr4n2y
+      '@reach/utils': 0.16.0_biqbaboplfbrettd7655fr4n2y
       prop-types: 15.8.1
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      react-focus-lock: 2.6.0_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-remove-scroll: 2.4.3_hx2b44akkvgcgvvtmk7ds2qk6q
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-focus-lock: 2.6.0_3hx2ussxxho4jajbwrd6gq34qe
+      react-remove-scroll: 2.4.3_3hx2ussxxho4jajbwrd6gq34qe
       tslib: 2.4.0
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /@reach/portal/0.16.2_sfoxds7t5ydpegc3knd667wn6m:
+  /@reach/portal/0.16.2_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-9ur/yxNkuVYTIjAcfi46LdKUvH0uYZPfEp4usWcpt6PIp+WDF57F/5deMe/uGi/B/nfDweQu8VVwuMVrCb97JQ==}
     peerDependencies:
       react: ^16.8.0 || 17.x
       react-dom: ^16.8.0 || 17.x
     dependencies:
-      '@reach/utils': 0.16.0_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@reach/utils': 0.16.0_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       tiny-warning: 1.0.3
       tslib: 2.4.0
     dev: false
 
-  /@reach/skip-nav/0.16.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@reach/skip-nav/0.16.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-SY4PdNx+hQHbeOr/+qLc+QXdRt9NTVlt0r737bOqY1WURGBIEN9sGgsmIsHluP1/bQuAe0JKdOJ/tXiwQ3Z3ug==}
     peerDependencies:
       react: ^16.8.0 || 17.x
       react-dom: ^16.8.0 || 17.x
     dependencies:
-      '@reach/utils': 0.16.0_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@reach/utils': 0.16.0_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       tslib: 2.3.1
     dev: false
 
-  /@reach/slider/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@reach/slider/0.17.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-xI0bZoMaBgNk1IshJ4szrPg7WaIEl6B5Ffgm1aYK+LPEAoUd37F9YQiIJ0ri9y0cyUvLMOmj0hQVOoKlf4ObTg==}
     peerDependencies:
       react: ^16.9.0 || 17.x
       react-dom: ^16.9.0 || 17.x
     dependencies:
-      '@reach/auto-id': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
-      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/auto-id': 0.17.0_biqbaboplfbrettd7655fr4n2y
+      '@reach/utils': 0.17.0_biqbaboplfbrettd7655fr4n2y
       prop-types: 15.8.1
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       tiny-warning: 1.0.3
       tslib: 2.4.0
     dev: false
 
-  /@reach/tabs/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@reach/tabs/0.17.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-XMw+5EaF6ZSmdkUQ45Cy8jbVp63Ksq77ZvS6zI64LHO2KPfPuTZTeUcsvvnJfA/POp3Ou9q6FRbs2d2HxWEApw==}
     peerDependencies:
       react: ^16.8.0 || 17.x
       react-dom: ^16.8.0 || 17.x
     dependencies:
-      '@reach/auto-id': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
-      '@reach/descendants': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
-      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/auto-id': 0.17.0_biqbaboplfbrettd7655fr4n2y
+      '@reach/descendants': 0.17.0_biqbaboplfbrettd7655fr4n2y
+      '@reach/utils': 0.17.0_biqbaboplfbrettd7655fr4n2y
       prop-types: 15.8.1
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       tslib: 2.4.0
     dev: false
 
-  /@reach/utils/0.16.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@reach/utils/0.16.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q==}
     peerDependencies:
       react: ^16.8.0 || 17.x
       react-dom: ^16.8.0 || 17.x
     dependencies:
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       tiny-warning: 1.0.3
       tslib: 2.4.0
 
-  /@reach/utils/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+  /@reach/utils/0.17.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-M5y8fCBbrWeIsxedgcSw6oDlAMQDkl5uv3VnMVJ7guwpf4E48Xlh1v66z/1BgN/WYe2y8mB/ilFD2nysEfdGeA==}
     peerDependencies:
       react: ^16.8.0 || 17.x
       react-dom: ^16.8.0 || 17.x
     dependencies:
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       tiny-warning: 1.0.3
       tslib: 2.4.0
     dev: false
 
-  /@react-hook/event/1.2.3_react@17.0.2:
+  /@react-hook/event/1.2.3_react@18.2.0:
     resolution: {integrity: sha512-WMBwLnYY2rubLeecsi4skl1imfx0oiXTgazV/1ByPT6WkmLvxUao3hC+mxps5D/+JK4Fq3uG9OWU/dn5jMtXyg==}
     peerDependencies:
       react: '>=16.8'
     dependencies:
-      '@react-hook/passive-layout-effect': 1.2.1_react@17.0.2
-      react: 17.0.2
+      '@react-hook/passive-layout-effect': 1.2.1_react@18.2.0
+      react: 18.2.0
     dev: false
 
-  /@react-hook/intersection-observer/3.1.1_react@17.0.2:
+  /@react-hook/intersection-observer/3.1.1_react@18.2.0:
     resolution: {integrity: sha512-OTDx8/wFaRvzFtKl1dEUEXSOqK2zVJHporiTTdC2xO++0e9FEx9wIrPis5q3lqtXeZH9zYGLbk+aB75qNFbbuw==}
     peerDependencies:
       react: '>=16.8'
     dependencies:
-      '@react-hook/passive-layout-effect': 1.2.1_react@17.0.2
+      '@react-hook/passive-layout-effect': 1.2.1_react@18.2.0
       intersection-observer: 0.10.0
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@react-hook/passive-layout-effect/1.2.1_react@17.0.2:
+  /@react-hook/passive-layout-effect/1.2.1_react@18.2.0:
     resolution: {integrity: sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==}
     peerDependencies:
       react: '>=16.8'
     dependencies:
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@react-spring/animated/9.4.5_react@17.0.2:
+  /@react-spring/animated/9.4.5_react@18.2.0:
     resolution: {integrity: sha512-KWqrtvJSMx6Fj9nMJkhTwM9r6LIriExDRV6YHZV9HKQsaolUFppgkOXpC+rsL1JEtEvKv6EkLLmSqHTnuYjiIA==}
     peerDependencies:
       react: ^16.8.0  || >=17.0.0 || >=18.0.0
     dependencies:
-      '@react-spring/shared': 9.4.5_react@17.0.2
+      '@react-spring/shared': 9.4.5_react@18.2.0
       '@react-spring/types': 9.4.5
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@react-spring/core/9.4.5_react@17.0.2:
+  /@react-spring/core/9.4.5_react@18.2.0:
     resolution: {integrity: sha512-83u3FzfQmGMJFwZLAJSwF24/ZJctwUkWtyPD7KYtNagrFeQKUH1I05ZuhmCmqW+2w1KDW1SFWQ43RawqfXKiiQ==}
     peerDependencies:
       react: ^16.8.0  || >=17.0.0 || >=18.0.0
     dependencies:
-      '@react-spring/animated': 9.4.5_react@17.0.2
+      '@react-spring/animated': 9.4.5_react@18.2.0
       '@react-spring/rafz': 9.4.5
-      '@react-spring/shared': 9.4.5_react@17.0.2
+      '@react-spring/shared': 9.4.5_react@18.2.0
       '@react-spring/types': 9.4.5
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
   /@react-spring/rafz/9.4.5:
     resolution: {integrity: sha512-swGsutMwvnoyTRxvqhfJBtGM8Ipx6ks0RkIpNX9F/U7XmyPvBMGd3GgX/mqxZUpdlsuI1zr/jiYw+GXZxAlLcQ==}
     dev: false
 
-  /@react-spring/shared/9.4.5_react@17.0.2:
+  /@react-spring/shared/9.4.5_react@18.2.0:
     resolution: {integrity: sha512-JhMh3nFKsqyag0KM5IIM8BQANGscTdd0mMv3BXsUiMZrcjQTskyfnv5qxEeGWbJGGar52qr5kHuBHtCjQOzniA==}
     peerDependencies:
       react: ^16.8.0  || >=17.0.0 || >=18.0.0
     dependencies:
       '@react-spring/rafz': 9.4.5
       '@react-spring/types': 9.4.5
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /@react-spring/three/9.4.5_u7lezm4ju2nwqz2r52syadhcvq:
+  /@react-spring/three/9.4.5_a2eujsyvlkprl2cjfcjkw6ogzu:
     resolution: {integrity: sha512-mArxfIhg9kyFL/8Y09TarS/ZKLd/qAWS4T3Ro/B46ILPfPnoPywDdw9/rknZihy/tslnviCgMrB4pZ29X1Dfxw==}
     peerDependencies:
       '@react-three/fiber': '>=6.0'
       react: ^16.11.0  || >=17.0.0 || >=18.0.0
       three: '>=0.126'
     dependencies:
-      '@react-spring/animated': 9.4.5_react@17.0.2
-      '@react-spring/core': 9.4.5_react@17.0.2
-      '@react-spring/shared': 9.4.5_react@17.0.2
+      '@react-spring/animated': 9.4.5_react@18.2.0
+      '@react-spring/core': 9.4.5_react@18.2.0
+      '@react-spring/shared': 9.4.5_react@18.2.0
       '@react-spring/types': 9.4.5
-      '@react-three/fiber': 7.0.27_weaphyuqmcotibvxgot4zxypyi
-      react: 17.0.2
+      '@react-three/fiber': 7.0.27_jvurxncug65yh22s5p4pqgaif4
+      react: 18.2.0
       three: 0.141.0
     dev: false
 
@@ -9521,7 +9511,7 @@ packages:
     resolution: {integrity: sha512-mpRIamoHwql0ogxEUh9yr4TP0xU5CWyZxVQeccGkHHF8kPMErtDXJlxyo0lj+telRF35XNihtPTWoflqtyARmg==}
     dev: false
 
-  /@react-three/drei/7.20.2_fpub33zqr4d2tfulvx5iw6lfgm:
+  /@react-three/drei/7.20.2_5fmtig3otsjt2gwua6nanmpzta:
     resolution: {integrity: sha512-ho9iQe7rawcIQ3fQIwg5tncrnZsLs3LXCP3SgMLa+txlMuJ+J9Q8dmiU/2+5I1lU/TlC1elgetxgyaRuOSqaIA==}
     peerDependencies:
       '@react-three/fiber': '>=6.0'
@@ -9533,26 +9523,26 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.18.3
-      '@react-three/fiber': 7.0.27_sb5g6l453mk54n2prv33gp6u6q
+      '@react-three/fiber': 7.0.27_l64coo4po4cwrmp7zqxdp2wxuq
       detect-gpu: 3.1.30
       glsl-noise: 0.0.0
       lodash.omit: 4.5.0
       lodash.pick: 4.4.0
-      react: 17.0.2
-      react-composer: 5.0.3_react@17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-composer: 5.0.3_react@18.2.0
+      react-dom: 18.2.0_react@18.2.0
       react-merge-refs: 1.1.0
       stats.js: 0.17.0
       three: 0.134.0
       three-mesh-bvh: 0.5.11_three@0.134.0
       three-stdlib: 2.10.2_three@0.134.0
       troika-three-text: 0.43.0_three@0.134.0
-      use-asset: 1.0.4_react@17.0.2
+      use-asset: 1.0.4_react@18.2.0
       utility-types: 3.10.0
-      zustand: 3.7.2_react@17.0.2
+      zustand: 3.7.2_react@18.2.0
     dev: false
 
-  /@react-three/drei/7.20.2_xtnhzy36qq7tbht7fvmyjzsvcy:
+  /@react-three/drei/7.20.2_q3lm3wbsqyl3yae2fho3a2cr24:
     resolution: {integrity: sha512-ho9iQe7rawcIQ3fQIwg5tncrnZsLs3LXCP3SgMLa+txlMuJ+J9Q8dmiU/2+5I1lU/TlC1elgetxgyaRuOSqaIA==}
     peerDependencies:
       '@react-three/fiber': '>=6.0'
@@ -9564,26 +9554,26 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.18.3
-      '@react-three/fiber': 7.0.29_sb5g6l453mk54n2prv33gp6u6q
+      '@react-three/fiber': 7.0.29_l64coo4po4cwrmp7zqxdp2wxuq
       detect-gpu: 3.1.30
       glsl-noise: 0.0.0
       lodash.omit: 4.5.0
       lodash.pick: 4.4.0
-      react: 17.0.2
-      react-composer: 5.0.3_react@17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-composer: 5.0.3_react@18.2.0
+      react-dom: 18.2.0_react@18.2.0
       react-merge-refs: 1.1.0
       stats.js: 0.17.0
       three: 0.134.0
       three-mesh-bvh: 0.5.11_three@0.134.0
       three-stdlib: 2.10.2_three@0.134.0
       troika-three-text: 0.43.0_three@0.134.0
-      use-asset: 1.0.4_react@17.0.2
+      use-asset: 1.0.4_react@18.2.0
       utility-types: 3.10.0
-      zustand: 3.7.2_react@17.0.2
+      zustand: 3.7.2_react@18.2.0
     dev: false
 
-  /@react-three/drei/8.16.0_kywf6pnmep4vhgxm3n7fyzvqbm:
+  /@react-three/drei/8.16.0_zh3qwjj5yfyqyzqfoqzgw3cf4i:
     resolution: {integrity: sha512-PvjNwPrIltVPHfkoG38+FvSd2v0EmxQaEsC69cQQ7T7/mMFWSNdfXrkBmBggEvxmZDNmGRIbcVNu8+VogQUQcA==}
     peerDependencies:
       '@react-three/fiber': '>=6.0'
@@ -9595,28 +9585,28 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.18.3
-      '@react-spring/three': 9.4.5_u7lezm4ju2nwqz2r52syadhcvq
-      '@react-three/fiber': 7.0.27_weaphyuqmcotibvxgot4zxypyi
-      '@use-gesture/react': 10.2.15_react@17.0.2
+      '@react-spring/three': 9.4.5_a2eujsyvlkprl2cjfcjkw6ogzu
+      '@react-three/fiber': 7.0.27_jvurxncug65yh22s5p4pqgaif4
+      '@use-gesture/react': 10.2.15_react@18.2.0
       detect-gpu: 3.1.30
       glsl-noise: 0.0.0
       lodash.omit: 4.5.0
       lodash.pick: 4.4.0
-      react: 17.0.2
-      react-composer: 5.0.3_react@17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-composer: 5.0.3_react@18.2.0
+      react-dom: 18.2.0_react@18.2.0
       react-merge-refs: 1.1.0
       stats.js: 0.17.0
-      suspend-react: 0.0.8_react@17.0.2
+      suspend-react: 0.0.8_react@18.2.0
       three: 0.141.0
       three-mesh-bvh: 0.5.11_three@0.141.0
       three-stdlib: 2.10.2_three@0.141.0
       troika-three-text: 0.46.4_three@0.141.0
       utility-types: 3.10.0
-      zustand: 3.7.2_react@17.0.2
+      zustand: 3.7.2_react@18.2.0
     dev: false
 
-  /@react-three/fiber/7.0.27_sb5g6l453mk54n2prv33gp6u6q:
+  /@react-three/fiber/7.0.27_jvurxncug65yh22s5p4pqgaif4:
     resolution: {integrity: sha512-O8zNP7QwPRzZCw4fmHwbBxC45NAd0Ysiy8NGNQF8NUReHaXI+NEwXR5QFl3O/WnZKG1XNf4/l7jtIM3GA1JPpw==}
     peerDependencies:
       react: '>=17.0'
@@ -9628,21 +9618,21 @@ packages:
     dependencies:
       '@babel/runtime': 7.18.3
       '@types/react-reconciler': 0.26.7
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       react-merge-refs: 1.1.0
-      react-reconciler: 0.26.2_react@17.0.2
+      react-reconciler: 0.26.2_react@18.2.0
       react-three-fiber: 0.0.0-deprecated
-      react-use-measure: 2.1.1_sfoxds7t5ydpegc3knd667wn6m
+      react-use-measure: 2.1.1_biqbaboplfbrettd7655fr4n2y
       resize-observer-polyfill: 1.5.1
       scheduler: 0.20.2
-      three: 0.134.0
-      use-asset: 1.0.4_react@17.0.2
+      three: 0.141.0
+      use-asset: 1.0.4_react@18.2.0
       utility-types: 3.10.0
-      zustand: 3.7.2_react@17.0.2
+      zustand: 3.7.2_react@18.2.0
     dev: false
 
-  /@react-three/fiber/7.0.27_weaphyuqmcotibvxgot4zxypyi:
+  /@react-three/fiber/7.0.27_l64coo4po4cwrmp7zqxdp2wxuq:
     resolution: {integrity: sha512-O8zNP7QwPRzZCw4fmHwbBxC45NAd0Ysiy8NGNQF8NUReHaXI+NEwXR5QFl3O/WnZKG1XNf4/l7jtIM3GA1JPpw==}
     peerDependencies:
       react: '>=17.0'
@@ -9654,21 +9644,21 @@ packages:
     dependencies:
       '@babel/runtime': 7.18.3
       '@types/react-reconciler': 0.26.7
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       react-merge-refs: 1.1.0
-      react-reconciler: 0.26.2_react@17.0.2
+      react-reconciler: 0.26.2_react@18.2.0
       react-three-fiber: 0.0.0-deprecated
-      react-use-measure: 2.1.1_sfoxds7t5ydpegc3knd667wn6m
+      react-use-measure: 2.1.1_biqbaboplfbrettd7655fr4n2y
       resize-observer-polyfill: 1.5.1
       scheduler: 0.20.2
-      three: 0.141.0
-      use-asset: 1.0.4_react@17.0.2
+      three: 0.134.0
+      use-asset: 1.0.4_react@18.2.0
       utility-types: 3.10.0
-      zustand: 3.7.2_react@17.0.2
+      zustand: 3.7.2_react@18.2.0
     dev: false
 
-  /@react-three/fiber/7.0.29_sb5g6l453mk54n2prv33gp6u6q:
+  /@react-three/fiber/7.0.29_l64coo4po4cwrmp7zqxdp2wxuq:
     resolution: {integrity: sha512-TE+/iaGrjluGsPwN2RkLXxKD4ak+unsh0YKIFKGcuAOW9jYcAyMGKAtgFO8MS7/HNCrZZQQSg23sJ8IPgtdkDg==}
     peerDependencies:
       react: '>=17.0'
@@ -9680,21 +9670,21 @@ packages:
     dependencies:
       '@babel/runtime': 7.18.3
       '@types/react-reconciler': 0.26.7
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       react-merge-refs: 1.1.0
-      react-reconciler: 0.26.2_react@17.0.2
+      react-reconciler: 0.26.2_react@18.2.0
       react-three-fiber: 0.0.0-deprecated
-      react-use-measure: 2.1.1_sfoxds7t5ydpegc3knd667wn6m
+      react-use-measure: 2.1.1_biqbaboplfbrettd7655fr4n2y
       resize-observer-polyfill: 1.5.1
       scheduler: 0.20.2
       three: 0.134.0
-      use-asset: 1.0.4_react@17.0.2
+      use-asset: 1.0.4_react@18.2.0
       utility-types: 3.10.0
-      zustand: 3.7.2_react@17.0.2
+      zustand: 3.7.2_react@18.2.0
     dev: false
 
-  /@react-three/postprocessing/2.3.2_kywf6pnmep4vhgxm3n7fyzvqbm:
+  /@react-three/postprocessing/2.3.2_zh3qwjj5yfyqyzqfoqzgw3cf4i:
     resolution: {integrity: sha512-e1veVao9XR3BP/J6OdvbR7yQq7d3lpOQuKvSQJ9LWLhPziBzHeRazU63cIwf5Dh4qy0TuxswmgWKxRn8Sxp79Q==}
     peerDependencies:
       '@react-three/fiber': '>=7.0'
@@ -9705,10 +9695,10 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      '@react-three/fiber': 7.0.27_weaphyuqmcotibvxgot4zxypyi
+      '@react-three/fiber': 7.0.27_jvurxncug65yh22s5p4pqgaif4
       postprocessing: 6.26.3_three@0.141.0
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       react-merge-refs: 1.1.0
       three: 0.141.0
       three-stdlib: 2.10.2_three@0.141.0
@@ -9825,14 +9815,14 @@ packages:
       '@sanity/block-content-to-hyperscript': 2.0.10
     dev: false
 
-  /@sanity/block-content-to-react/3.0.0_react@17.0.2:
+  /@sanity/block-content-to-react/3.0.0_react@18.2.0:
     resolution: {integrity: sha512-oHPLlIsulsnL3ITs93RIvUPBI6nAeoSFOUf16vX4T7z4wWywxP39N1DF9mAx2tV6Kjr1fJAx5GF7zfiMXYLaqA==}
     peerDependencies:
       react: '>=15.0.0'
     dependencies:
       '@sanity/block-content-to-hyperscript': 3.0.0
       prop-types: 15.7.2
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
   /@sanity/client/2.21.7:
@@ -9999,7 +9989,7 @@ packages:
       tslib: 1.14.1
     dev: false
 
-  /@sentry/nextjs/6.19.3_daclytgsfcivq2b62vwydcy3uy:
+  /@sentry/nextjs/6.19.3_5cy3dema5qwip6n7exqk4sqtji:
     resolution: {integrity: sha512-+Gw69DDW89VIi0SMqBFNZpSMhKH9VBCSubhm94gFae3u4eoRs8ZChuNuhbnScmE7OsJ4uLOnnu4Y186yCY7RpQ==}
     engines: {node: '>=6'}
     peerDependencies:
@@ -10014,12 +10004,12 @@ packages:
       '@sentry/hub': 6.19.3
       '@sentry/integrations': 6.19.3
       '@sentry/node': 6.19.3
-      '@sentry/react': 6.19.3_react@17.0.2
+      '@sentry/react': 6.19.3_react@18.2.0
       '@sentry/tracing': 6.19.3
       '@sentry/utils': 6.19.3
       '@sentry/webpack-plugin': 1.18.8
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
       tslib: 1.14.1
       webpack: 5.73.0
     transitivePeerDependencies:
@@ -10027,7 +10017,7 @@ packages:
       - supports-color
     dev: false
 
-  /@sentry/nextjs/6.19.3_next@12.2.3+react@17.0.2:
+  /@sentry/nextjs/6.19.3_next@12.2.3+react@18.2.0:
     resolution: {integrity: sha512-+Gw69DDW89VIi0SMqBFNZpSMhKH9VBCSubhm94gFae3u4eoRs8ZChuNuhbnScmE7OsJ4uLOnnu4Y186yCY7RpQ==}
     engines: {node: '>=6'}
     peerDependencies:
@@ -10042,12 +10032,12 @@ packages:
       '@sentry/hub': 6.19.3
       '@sentry/integrations': 6.19.3
       '@sentry/node': 6.19.3
-      '@sentry/react': 6.19.3_react@17.0.2
+      '@sentry/react': 6.19.3_react@18.2.0
       '@sentry/tracing': 6.19.3
       '@sentry/utils': 6.19.3
       '@sentry/webpack-plugin': 1.18.8
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
       tslib: 1.14.1
     transitivePeerDependencies:
       - encoding
@@ -10070,7 +10060,7 @@ packages:
       - supports-color
     dev: false
 
-  /@sentry/react/6.19.3_react@17.0.2:
+  /@sentry/react/6.19.3_react@18.2.0:
     resolution: {integrity: sha512-Zza1RX0+1tFCM1Hfq3Yl50cbc/ml0V/katw4aVZIU6+vEgvk5EuSFKU2LtblmJkpID7x6UwWz+1qgXumZPze6Q==}
     engines: {node: '>=6'}
     peerDependencies:
@@ -10081,7 +10071,7 @@ packages:
       '@sentry/types': 6.19.3
       '@sentry/utils': 6.19.3
       hoist-non-react-statics: 3.3.2
-      react: 17.0.2
+      react: 18.2.0
       tslib: 1.14.1
     dev: false
 
@@ -10182,12 +10172,12 @@ packages:
     resolution: {integrity: sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==}
     dev: false
 
-  /@stitches/react/1.2.8_react@17.0.2:
+  /@stitches/react/1.2.8_react@18.2.0:
     resolution: {integrity: sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==}
     peerDependencies:
       react: '>= 16.3.0'
     dependencies:
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
   /@stripe/stripe-js/1.21.1:
@@ -10335,7 +10325,7 @@ packages:
       redent: 3.0.0
     dev: true
 
-  /@testing-library/react-hooks/7.0.2_7qv3rjnqa3j7exc7qtvho7thru:
+  /@testing-library/react-hooks/7.0.2_pqvonxj6wieqlv6l3bvjvzu5hy:
     resolution: {integrity: sha512-dYxpz8u9m4q1TuzfcUApqi8iFfR6R0FaMbr2hjZJy1uC8z+bO/K4v8Gs9eogGKYQop7QsrBTFkv/BCF7MzD2Cg==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -10349,16 +10339,16 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.15.3
-      '@types/react': 17.0.45
-      '@types/react-dom': 17.0.17
+      '@types/react': 18.0.15
+      '@types/react-dom': 18.0.6
       '@types/react-test-renderer': 17.0.1
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      react-error-boundary: 3.1.3_react@17.0.2
-      react-test-renderer: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-error-boundary: 3.1.3_react@18.2.0
+      react-test-renderer: 17.0.2_react@18.2.0
     dev: true
 
-  /@testing-library/react/12.1.2_sfoxds7t5ydpegc3knd667wn6m:
+  /@testing-library/react/12.1.2_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-ihQiEOklNyHIpo2Y8FREkyD1QAea054U0MVbwH1m8N9TxeFz+KoJ9LkqoKqJlzx2JDm56DVwaJ1r36JYxZM05g==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -10367,11 +10357,11 @@ packages:
     dependencies:
       '@babel/runtime': 7.16.0
       '@testing-library/dom': 8.11.0
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: true
 
-  /@testing-library/react/12.1.4_sfoxds7t5ydpegc3knd667wn6m:
+  /@testing-library/react/12.1.4_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-jiPKOm7vyUw311Hn/HlNQ9P8/lHNtArAx0PisXyFixDDvfl8DbD6EUdbshK5eqauvBSvzZd19itqQ9j3nferJA==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -10380,19 +10370,19 @@ packages:
     dependencies:
       '@babel/runtime': 7.17.2
       '@testing-library/dom': 8.11.0
-      '@types/react-dom': 17.0.17
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@types/react-dom': 18.0.6
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: true
 
-  /@tippyjs/react/4.2.6_sfoxds7t5ydpegc3knd667wn6m:
+  /@tippyjs/react/4.2.6_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==}
     peerDependencies:
       react: '>=16.8'
       react-dom: '>=16.8'
     dependencies:
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       tippy.js: 6.3.7
     dev: false
 
@@ -10608,7 +10598,7 @@ packages:
       '@tiptap/core': 2.0.0-beta.181
     dev: false
 
-  /@tiptap/react/2.0.0-beta.109_glxezlolupgfapdjflfhgy332u:
+  /@tiptap/react/2.0.0-beta.109_cpkpnzstpcbd5lz5ghf7pjwsmy:
     resolution: {integrity: sha512-kx/I+9DbiKX+LPFYTQf1Mycbw4U77nRsuztMi5UyGoONnwVwVxOUN6sxdnsNX0uo/H0Rf5ZAtQn8vQBaTWPzsQ==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.1
@@ -10619,8 +10609,8 @@ packages:
       '@tiptap/extension-bubble-menu': 2.0.0-beta.56_o5tsmp445vozplpzqkrs3pmjeq
       '@tiptap/extension-floating-menu': 2.0.0-beta.51_o5tsmp445vozplpzqkrs3pmjeq
       prosemirror-view: 1.23.13
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
   /@tiptap/starter-kit/2.0.0-beta.184:
@@ -10792,7 +10782,7 @@ packages:
   /@types/hoist-non-react-statics/3.3.1:
     resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
     dependencies:
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
       hoist-non-react-statics: 3.3.2
     dev: true
 
@@ -10944,7 +10934,7 @@ packages:
   /@types/mdx-js__react/1.5.5:
     resolution: {integrity: sha512-k8pnaP6JXVlQh18HgL5X6sYFNC/qZnzO7R2+HsmwrwUd+JnnsU0d9lyyT0RQrHg1anxDU36S98TI/fsGtmYqqg==}
     dependencies:
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
 
   /@types/mdx/2.0.1:
     resolution: {integrity: sha512-JPEv4iAl0I+o7g8yVWDwk30es8mfVrjkvh5UeVR2sYPpZCK44vrAPsbJpIS+rJAUxLgaSAMKTEH5Vn5qd9XsrQ==}
@@ -11104,44 +11094,44 @@ packages:
       '@types/prosemirror-transform': 1.4.0
     dev: false
 
-  /@types/reach__auto-id/0.3.1_sfoxds7t5ydpegc3knd667wn6m:
+  /@types/reach__auto-id/0.3.1_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-r8epkIiBXPRBqVd7NlciwqgTjCRFeMzPW5Jhov80C5M4uMhpfgEMN+UtH193R8WVcRzbJgx5+7hNr/OaEvY4Ug==}
     deprecated: This is a stub types definition. @reach/auto-id provides its own type definitions, so you do not need this installed.
     dependencies:
-      '@reach/auto-id': 0.16.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/auto-id': 0.16.0_biqbaboplfbrettd7655fr4n2y
     transitivePeerDependencies:
       - react
       - react-dom
     dev: true
 
-  /@types/react-dom/17.0.17:
-    resolution: {integrity: sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==}
+  /@types/react-dom/18.0.6:
+    resolution: {integrity: sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==}
     dependencies:
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
     dev: true
 
   /@types/react-reconciler/0.26.7:
     resolution: {integrity: sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==}
     dependencies:
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
     dev: false
 
   /@types/react-scroll/1.8.3:
     resolution: {integrity: sha512-Xt0+Y58pwrIv+vRFxcyKDoo0gBWBR2eNMJ4XRMhQpZdGUtmjnszPi/wFEJSAY+5r83ypJsSA+hOpSc3hRpYlWw==}
     dependencies:
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
     dev: true
 
   /@types/react-syntax-highlighter/13.5.2:
     resolution: {integrity: sha512-sRZoKZBGKaE7CzMvTTgz+0x/aVR58ZYUTfB7HN76vC+yQnvo1FWtzNARBt0fGqcLGEVakEzMu/CtPzssmanu8Q==}
     dependencies:
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
     dev: true
 
   /@types/react-test-renderer/17.0.1:
     resolution: {integrity: sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==}
     dependencies:
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
     dev: true
 
   /@types/react/17.0.45:
@@ -11150,6 +11140,14 @@ packages:
       '@types/prop-types': 15.7.4
       '@types/scheduler': 0.16.2
       csstype: 3.0.11
+    dev: true
+
+  /@types/react/18.0.15:
+    resolution: {integrity: sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==}
+    dependencies:
+      '@types/prop-types': 15.7.4
+      '@types/scheduler': 0.16.2
+      csstype: 3.0.11
 
   /@types/remove-markdown/0.3.1:
     resolution: {integrity: sha512-JpJNEJEsmmltyL2LdE8KRjJ0L2ad5vgLibqNj85clohT9AyTrfN6jvHxStPshDkmtcL/ShFu0p2tbY7DBS1mqQ==}
@@ -11209,7 +11207,7 @@ packages:
     resolution: {integrity: sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==}
     dependencies:
       '@types/hoist-non-react-statics': 3.3.1
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
       csstype: 3.0.11
     dev: true
 
@@ -11603,13 +11601,13 @@ packages:
     resolution: {integrity: sha512-R8k5GHKR6J3n48K1xiWCBSnTsxmfiVCp+MYPMhFaoHT1/oIjrFA6SeMmWDl0REwP/CpBfNdQ0FwOo/0dGjPhwA==}
     dev: false
 
-  /@use-gesture/react/10.2.15_react@17.0.2:
+  /@use-gesture/react/10.2.15_react@18.2.0:
     resolution: {integrity: sha512-Hdfp17a3iHDo33jasd8GIPlIjM4wxNzn1O9apNX2VrF7X2ewzXp4wCCQ4aPqsnyvBA1WhR8KHMrBS/XWQZxTHQ==}
     peerDependencies:
       react: '>= 16.8.0'
     dependencies:
       '@use-gesture/core': 10.2.15
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
   /@vercel/ncc/0.34.0:
@@ -11832,13 +11830,13 @@ packages:
     resolution: {integrity: sha512-niT+Prh3Aff8Uf1MVBVUsaNjFj9rJAKDXuoHIKiQbB+6IUP/3J3JIhBNyZ7lDhytvXxw6ppgnwKZdDJ08UMj4Q==}
     dev: false
 
-  /@welldone-software/why-did-you-render/6.2.3_react@17.0.2:
+  /@welldone-software/why-did-you-render/6.2.3_react@18.2.0:
     resolution: {integrity: sha512-FQgi90jvC9uw2aALlonJfqaWOvU5UUBBVvdAnS2iryXwCc4YJkKsPJY5Y/LzaND3OIyk8XGUn1vTRn6hcem28Q==}
     peerDependencies:
       react: ^16 || ^17
     dependencies:
       lodash: 4.17.21
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
   /@xmldom/xmldom/0.7.5:
@@ -11850,7 +11848,7 @@ packages:
     resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==}
     dev: false
 
-  /@xstate/react/1.5.1_h67gsb3uahtysktynl56vrd26m:
+  /@xstate/react/1.5.1_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-DJHDqDlZHus08X98uMJw4KR17FRWBXLHMQ02YRxx0DMm5VLn75VwGyt4tXdlNZHQWjyk++C5c9Ichq3PdmM3og==}
     peerDependencies:
       '@xstate/fsm': ^1.0.0
@@ -11862,14 +11860,14 @@ packages:
       xstate:
         optional: true
     dependencies:
-      react: 17.0.2
-      use-isomorphic-layout-effect: 1.1.1_hx2b44akkvgcgvvtmk7ds2qk6q
-      use-subscription: 1.5.1_react@17.0.2
-      xstate: 4.23.1
+      react: 18.2.0
+      use-isomorphic-layout-effect: 1.1.1_3hx2ussxxho4jajbwrd6gq34qe
+      use-subscription: 1.5.1_react@18.2.0
     transitivePeerDependencies:
       - '@types/react'
+    dev: false
 
-  /@xstate/react/1.5.1_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /@xstate/react/1.5.1_bpg42ha2il6pcyn3wrx2rxrchm:
     resolution: {integrity: sha512-DJHDqDlZHus08X98uMJw4KR17FRWBXLHMQ02YRxx0DMm5VLn75VwGyt4tXdlNZHQWjyk++C5c9Ichq3PdmM3og==}
     peerDependencies:
       '@xstate/fsm': ^1.0.0
@@ -11881,12 +11879,12 @@ packages:
       xstate:
         optional: true
     dependencies:
-      react: 17.0.2
-      use-isomorphic-layout-effect: 1.1.1_hx2b44akkvgcgvvtmk7ds2qk6q
-      use-subscription: 1.5.1_react@17.0.2
+      react: 18.2.0
+      use-isomorphic-layout-effect: 1.1.1_3hx2ussxxho4jajbwrd6gq34qe
+      use-subscription: 1.5.1_react@18.2.0
+      xstate: 4.23.1
     transitivePeerDependencies:
       - '@types/react'
-    dev: false
 
   /@xtuc/ieee754/1.2.0:
     resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
@@ -12736,7 +12734,7 @@ packages:
       babel-plugin-syntax-jsx: 6.18.0
       lodash: 4.17.21
       picomatch: 2.3.0
-      styled-components: 5.3.5_le6yh75jdu4qlr45kmyuenjcbu
+      styled-components: 5.3.5_xwin6kermpfszgjtt7m5i5m4jy
     dev: false
 
   /babel-plugin-syntax-jsx/6.18.0:
@@ -16721,7 +16719,7 @@ packages:
     deprecated: 'Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau'
     dev: false
 
-  /formik/2.2.9_react@17.0.2:
+  /formik/2.2.9_react@18.2.0:
     resolution: {integrity: sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==}
     peerDependencies:
       react: '>=16.8.0'
@@ -16730,7 +16728,7 @@ packages:
       hoist-non-react-statics: 3.3.2
       lodash: 4.17.21
       lodash-es: 4.17.21
-      react: 17.0.2
+      react: 18.2.0
       react-fast-compare: 2.0.4
       tiny-warning: 1.0.3
       tslib: 1.14.1
@@ -16745,7 +16743,7 @@ packages:
     dependencies:
       map-cache: 0.2.2
 
-  /framer-motion-3d/6.4.1_kywf6pnmep4vhgxm3n7fyzvqbm:
+  /framer-motion-3d/6.4.1_q3lm3wbsqyl3yae2fho3a2cr24:
     resolution: {integrity: sha512-vzwB+ni3QNOO1GjLxixqC70i5air6avPRTRbwMMY+/jR+iW463kLaljprijWo8p2MeMjhZfqp0X80aITpvss8Q==}
     peerDependencies:
       '@react-three/fiber': ^7.0.27
@@ -16753,15 +16751,15 @@ packages:
       react-dom: '>=16.8 || ^17.0.0'
       three: '>=0.133'
     dependencies:
-      '@react-three/fiber': 7.0.27_weaphyuqmcotibvxgot4zxypyi
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@react-three/fiber': 7.0.29_l64coo4po4cwrmp7zqxdp2wxuq
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       react-merge-refs: 1.1.0
-      three: 0.141.0
+      three: 0.134.0
     dev: false
 
-  /framer-motion-3d/6.4.1_xtnhzy36qq7tbht7fvmyjzsvcy:
+  /framer-motion-3d/6.4.1_zh3qwjj5yfyqyzqfoqzgw3cf4i:
     resolution: {integrity: sha512-vzwB+ni3QNOO1GjLxixqC70i5air6avPRTRbwMMY+/jR+iW463kLaljprijWo8p2MeMjhZfqp0X80aITpvss8Q==}
     peerDependencies:
       '@react-three/fiber': ^7.0.27
@@ -16769,15 +16767,15 @@ packages:
       react-dom: '>=16.8 || ^17.0.0'
       three: '>=0.133'
     dependencies:
-      '@react-three/fiber': 7.0.29_sb5g6l453mk54n2prv33gp6u6q
-      framer-motion: 6.4.1_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@react-three/fiber': 7.0.27_jvurxncug65yh22s5p4pqgaif4
+      framer-motion: 6.4.1_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       react-merge-refs: 1.1.0
-      three: 0.134.0
+      three: 0.141.0
     dev: false
 
-  /framer-motion/6.4.1_sfoxds7t5ydpegc3knd667wn6m:
+  /framer-motion/6.4.1_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-JiVnG3p0mO9yWxjNx3xxJaKP4hTWdm6oIbzfMJZEMtoOahSNoDTRZA/mFPzfVNj2foKwFPOLFv/lw8UUZjyUqA==}
     peerDependencies:
       react: '>=16.8 || ^17.0.0 || ^18.0.0'
@@ -16787,8 +16785,8 @@ packages:
       framesync: 6.0.1
       hey-listen: 1.0.8
       popmotion: 11.0.3
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       style-value-types: 5.0.0
       tslib: 2.4.0
     optionalDependencies:
@@ -20150,26 +20148,26 @@ packages:
     dependencies:
       language-subtag-registry: 0.3.21
 
-  /leva/0.9.27_sfoxds7t5ydpegc3knd667wn6m:
+  /leva/0.9.27_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-om1IG38ZqNwcl0CFj0KoObqNcGClsJ72OJpMsC3O5bKtXZWch0+j2zNcffchVrg9Anr2Q444vVVocNleo0kzSA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
-      '@radix-ui/react-portal': 0.1.4_sfoxds7t5ydpegc3knd667wn6m
-      '@radix-ui/react-tooltip': 0.1.6_sfoxds7t5ydpegc3knd667wn6m
-      '@stitches/react': 1.2.8_react@17.0.2
-      '@use-gesture/react': 10.2.15_react@17.0.2
-      '@welldone-software/why-did-you-render': 6.2.3_react@17.0.2
+      '@radix-ui/react-portal': 0.1.4_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-tooltip': 0.1.6_biqbaboplfbrettd7655fr4n2y
+      '@stitches/react': 1.2.8_react@18.2.0
+      '@use-gesture/react': 10.2.15_react@18.2.0
+      '@welldone-software/why-did-you-render': 6.2.3_react@18.2.0
       colord: 2.9.2
       dequal: 2.0.2
       merge-value: 1.0.0
-      react: 17.0.2
-      react-colorful: 5.5.1_sfoxds7t5ydpegc3knd667wn6m
-      react-dom: 17.0.2_react@17.0.2
-      react-dropzone: 12.1.0_react@17.0.2
+      react: 18.2.0
+      react-colorful: 5.5.1_biqbaboplfbrettd7655fr4n2y
+      react-dom: 18.2.0_react@18.2.0
+      react-dropzone: 12.1.0_react@18.2.0
       v8n: 1.4.0
-      zustand: 3.7.2_react@17.0.2
+      zustand: 3.7.2_react@18.2.0
     dev: false
 
   /leven/3.1.0:
@@ -20993,7 +20991,7 @@ packages:
   /mdurl/1.0.1:
     resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
 
-  /mdx-embed/0.0.22_6xqwaqehq7edoa4cfowcauzbza:
+  /mdx-embed/0.0.22_cria5bnyif7ziksni4gkbcboea:
     resolution: {integrity: sha512-Wf9zsrPAYk+QVssBvKKOCqiGcWXOa0z76PObdEY5Oaq8rDvqlbSM/wv7YZ4LWiVOkNsK0mUF44A8o9QXxT+LLQ==}
     peerDependencies:
       '@mdx-js/mdx': ^1.6.16
@@ -21001,9 +20999,9 @@ packages:
       react: ^16.9.0
       react-dom: ^16.9.0
     dependencies:
-      '@mdx-js/react': 1.6.22_react@17.0.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@mdx-js/react': 1.6.22_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
   /mdx-prism/0.3.4:
@@ -22036,7 +22034,7 @@ packages:
     resolution: {integrity: sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==}
     optional: true
 
-  /nano-css/5.3.4_sfoxds7t5ydpegc3knd667wn6m:
+  /nano-css/5.3.4_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-wfcviJB6NOxDIDfr7RFn/GlaN7I/Bhe4d39ZRCJ3xvZX60LVe2qZ+rDqM49nm4YT81gAjzS+ZklhKP/Gnfnubg==}
     peerDependencies:
       react: '*'
@@ -22046,8 +22044,8 @@ packages:
       csstype: 3.0.11
       fastest-stable-stringify: 2.0.2
       inline-style-prefixer: 6.0.0
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       rtl-css-js: 1.14.1
       sourcemap-codec: 1.4.8
       stacktrace-js: 2.0.2
@@ -22125,7 +22123,7 @@ packages:
     engines: {node: '>= 0.4.0'}
     dev: false
 
-  /next-auth/4.10.2_uwv6tj4c6jl3tcycfdgw4fi3ba:
+  /next-auth/4.10.2_veosbehjv4o6lw47zt43je3zka:
     resolution: {integrity: sha512-9XeP3faA5M3LneNJuzZCrmyR1ONYVH+pNQTozLBlpzXSkVRCgy+PTLAojOGkCo5v5MWcCZNTNHUOQL6gIcYwEQ==}
     engines: {node: ^12.19.0 || ^14.15.0 || ^16.13.0}
     peerDependencies:
@@ -22145,12 +22143,12 @@ packages:
       openid-client: 5.1.4
       preact: 10.7.2
       preact-render-to-string: 5.2.0_preact@10.7.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       uuid: 8.3.2
     dev: false
 
-  /next-auth/4.2.1_uwv6tj4c6jl3tcycfdgw4fi3ba:
+  /next-auth/4.2.1_veosbehjv4o6lw47zt43je3zka:
     resolution: {integrity: sha512-XDtt7nqevkNf4EJ2zKAKkI+MFsURf11kx11vPwxrBYA1MHeqWwaWbGOUOI2ekNTvfAg4nTEJJUH3LV2cLrH3Tg==}
     engines: {node: ^12.19.0 || ^14.15.0 || ^16.13.0}
     peerDependencies:
@@ -22170,8 +22168,8 @@ packages:
       openid-client: 5.1.4
       preact: 10.7.2
       preact-render-to-string: 5.2.0_preact@10.7.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       uuid: 8.3.2
     dev: true
 
@@ -22197,40 +22195,23 @@ packages:
       webpack: 5.73.0
     dev: true
 
-  /next-mdx-remote/3.0.8_sfoxds7t5ydpegc3knd667wn6m:
+  /next-mdx-remote/3.0.8_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-WFSxt0crxG5PN/0WvaunzxzqV3wh3dPBZyhkclxwyQfLSRKzsNSArzot/4gYTOOZ/GtyRfNjbI/HtDsW2S4fqQ==}
     peerDependencies:
       react: '>=16.x <=17.x'
       react-dom: '>=16.x <=17.x'
     dependencies:
       '@mdx-js/mdx': 1.6.22
-      '@mdx-js/react': 1.6.22_react@17.0.2
+      '@mdx-js/react': 1.6.22_react@18.2.0
       esbuild: 0.12.19
       pkg-dir: 5.0.0
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /next-mdx-remote/4.0.0_sfoxds7t5ydpegc3knd667wn6m:
-    resolution: {integrity: sha512-WEEBe5OaIiiACvWsYwkf6uFnVcuam33dghDu2WpALE1BcH8Oozwvmjb0KFLURuAQsYL/yOZCTr8urmYtOZifRQ==}
-    engines: {node: '>=14', npm: '>=7'}
-    peerDependencies:
-      react: '>=16.x <=17.x'
-      react-dom: '>=16.x <=17.x'
-    dependencies:
-      '@mdx-js/mdx': 2.0.0
-      '@mdx-js/react': 2.0.0_react@17.0.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      vfile: 5.3.0
-      vfile-matter: 3.0.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /next-mdx-remote/4.1.0_sfoxds7t5ydpegc3knd667wn6m:
+  /next-mdx-remote/4.1.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-ZdL5AFJcEqvInGkYYRKda930D6AJt1GOLX/OXFE/vTwaqV/Mw+l3/njZ4kWqvYSAkl89Z6W7WZrTtN0fd0XwPg==}
     engines: {node: '>=14', npm: '>=7'}
     peerDependencies:
@@ -22238,16 +22219,16 @@ packages:
       react-dom: '>=16.x <=18.x'
     dependencies:
       '@mdx-js/mdx': 2.1.2
-      '@mdx-js/react': 2.1.2_react@17.0.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      '@mdx-js/react': 2.1.2_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       vfile: 5.3.0
       vfile-matter: 3.0.1
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /next-sanity-image/3.1.7_nxat2lsbytb3uy2k6j2mhd6hfi:
+  /next-sanity-image/3.1.7_bxu4txjw6tc3quurwz7gkep6vi:
     resolution: {integrity: sha512-mk842380HwDrlUSmyyx54MGcGcbz847c2rCTj9c75lkO+VSpuJ00+uaiJE3arktrnHAUV4XCZ+OVxJ6C1mqtBw==}
     peerDependencies:
       '@sanity/client': ^2.11.0
@@ -22256,8 +22237,8 @@ packages:
     dependencies:
       '@sanity/client': 3.3.2
       '@sanity/image-url': 0.140.22
-      next: 12.2.3_bdqedtwv3pefsm7666rf4y5ak4
-      react: 17.0.2
+      next: 12.2.3_x6hpkaqu4dxwl4unajq2h7dx44
+      react: 18.2.0
     dev: false
 
   /next-sitemap/3.1.7_6lynxinfr2uix4icggokqiwwie:
@@ -22271,7 +22252,7 @@ packages:
       '@corex/deepmerge': 4.0.29
       '@next/env': 12.2.3
       minimist: 1.2.6
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
     dev: false
 
   /next-sitemap/3.1.7_hdg3gmwi2czidx5hoyjx6lzi6e:
@@ -22285,7 +22266,7 @@ packages:
       '@corex/deepmerge': 4.0.29
       '@next/env': 12.2.2
       minimist: 1.2.6
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
     dev: false
 
   /next-sitemap/3.1.7_mvfnr67nacokwugwaexctvkqby:
@@ -22299,7 +22280,7 @@ packages:
       '@corex/deepmerge': 4.0.29
       '@next/env': 12.2.0
       minimist: 1.2.6
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
     dev: false
 
   /next-sitemap/3.1.7_next@12.2.3:
@@ -22312,19 +22293,19 @@ packages:
     dependencies:
       '@corex/deepmerge': 4.0.29
       minimist: 1.2.6
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
     dev: false
 
-  /next-themes/0.1.1_lomk7fwgwcwgv5os6tnu5kl3ge:
+  /next-themes/0.1.1_53oqlnqnxhbetdy4ljlkkvmoby:
     resolution: {integrity: sha512-Iqxt6rhS/KfK/iHJ0tfFjTcdLEAI0AgwFuAFrMwLOPK5e+MI3I+fzyvBoS+VaOS+NldUiazurhgwYhrfV0VXsQ==}
     peerDependencies:
       next: '>=11.1.1'
       react: '*'
       react-dom: '*'
     dependencies:
-      next: 12.2.3_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      next: 12.2.3_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
   /next-tick/1.0.0:
@@ -22337,7 +22318,7 @@ packages:
       enhanced-resolve: 5.8.3
       escalade: 3.1.1
 
-  /next/12.2.3_bdqedtwv3pefsm7666rf4y5ak4:
+  /next/12.2.3_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-TA0tmSA6Dk6S6kfvCNbF7CWYW8468gZUxr/3/30z4KvAQbXnl2ASYZElVe7q/hBW/1F1ee0tSBlHa4/sn+ZIBw==}
     engines: {node: '>=12.22.0'}
     hasBin: true
@@ -22359,10 +22340,10 @@ packages:
       '@swc/helpers': 0.4.3
       caniuse-lite: 1.0.30001361
       postcss: 8.4.14
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      styled-jsx: 5.0.2_hfc3cse2ox4f74hy7yokdneala
-      use-sync-external-store: 1.2.0_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      styled-jsx: 5.0.2_react@18.2.0
+      use-sync-external-store: 1.2.0_react@18.2.0
     optionalDependencies:
       '@next/swc-android-arm-eabi': 12.2.3
       '@next/swc-android-arm64': 12.2.3
@@ -22381,7 +22362,7 @@ packages:
       - '@babel/core'
       - babel-plugin-macros
 
-  /next/12.2.3_bra7dgvoeiis5hyys3uir3dssy:
+  /next/12.2.3_dyjg3c6zvjv6p4lxmcqda555km:
     resolution: {integrity: sha512-TA0tmSA6Dk6S6kfvCNbF7CWYW8468gZUxr/3/30z4KvAQbXnl2ASYZElVe7q/hBW/1F1ee0tSBlHa4/sn+ZIBw==}
     engines: {node: '>=12.22.0'}
     hasBin: true
@@ -22403,11 +22384,11 @@ packages:
       '@swc/helpers': 0.4.3
       caniuse-lite: 1.0.30001361
       postcss: 8.4.14
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       sass: 1.43.4
-      styled-jsx: 5.0.2_react@17.0.2
-      use-sync-external-store: 1.2.0_react@17.0.2
+      styled-jsx: 5.0.2_react@18.2.0
+      use-sync-external-store: 1.2.0_react@18.2.0
     optionalDependencies:
       '@next/swc-android-arm-eabi': 12.2.3
       '@next/swc-android-arm64': 12.2.3
@@ -22427,7 +22408,7 @@ packages:
       - babel-plugin-macros
     dev: true
 
-  /next/12.2.3_sfoxds7t5ydpegc3knd667wn6m:
+  /next/12.2.3_x6hpkaqu4dxwl4unajq2h7dx44:
     resolution: {integrity: sha512-TA0tmSA6Dk6S6kfvCNbF7CWYW8468gZUxr/3/30z4KvAQbXnl2ASYZElVe7q/hBW/1F1ee0tSBlHa4/sn+ZIBw==}
     engines: {node: '>=12.22.0'}
     hasBin: true
@@ -22449,10 +22430,10 @@ packages:
       '@swc/helpers': 0.4.3
       caniuse-lite: 1.0.30001361
       postcss: 8.4.14
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      styled-jsx: 5.0.2_react@17.0.2
-      use-sync-external-store: 1.2.0_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      styled-jsx: 5.0.2_ffflpilffev72dykeiwkgumppe
+      use-sync-external-store: 1.2.0_react@18.2.0
     optionalDependencies:
       '@next/swc-android-arm-eabi': 12.2.3
       '@next/swc-android-arm64': 12.2.3
@@ -24484,12 +24465,12 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /prism-react-renderer/1.2.1_react@17.0.2:
+  /prism-react-renderer/1.2.1_react@18.2.0:
     resolution: {integrity: sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==}
     peerDependencies:
       react: '>=0.14.9'
     dependencies:
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
   /prisma/4.1.1:
@@ -24887,43 +24868,43 @@ packages:
       minimist: 1.2.6
       strip-json-comments: 2.0.1
 
-  /react-clientside-effect/1.2.5_react@17.0.2:
+  /react-clientside-effect/1.2.5_react@18.2.0:
     resolution: {integrity: sha512-2bL8qFW1TGBHozGGbVeyvnggRpMjibeZM2536AKNENLECutp2yfs44IL8Hmpn8qjFQ2K7A9PnYf3vc7aQq/cPA==}
     peerDependencies:
       react: ^15.3.0 || ^16.0.0 || ^17.0.0
     dependencies:
       '@babel/runtime': 7.18.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /react-colorful/5.5.1_sfoxds7t5ydpegc3knd667wn6m:
+  /react-colorful/5.5.1_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /react-composer/5.0.3_react@17.0.2:
+  /react-composer/5.0.3_react@18.2.0:
     resolution: {integrity: sha512-1uWd07EME6XZvMfapwZmc7NgCZqDemcvicRi3wMJzXsQLvZ3L7fTHVyPy1bZdnWXM4iPjYuNE+uJ41MLKeTtnA==}
     peerDependencies:
       react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
     dependencies:
       prop-types: 15.8.1
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /react-countdown/2.3.2_sfoxds7t5ydpegc3knd667wn6m:
+  /react-countdown/2.3.2_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-Q4SADotHtgOxNWhDdvgupmKVL0pMB9DvoFcxv5AzjsxVhzOVxnttMbAywgqeOdruwEAmnPhOhNv/awAgkwru2w==}
     peerDependencies:
       react: '>= 15'
       react-dom: '>= 15'
     dependencies:
       prop-types: 15.7.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
   /react-devtools-inline/4.4.0:
@@ -24932,17 +24913,16 @@ packages:
       es6-symbol: 3.1.3
     dev: false
 
-  /react-dom/17.0.2_react@17.0.2:
-    resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
+  /react-dom/18.2.0_react@18.2.0:
+    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
-      react: 17.0.2
+      react: ^18.2.0
     dependencies:
       loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react: 17.0.2
-      scheduler: 0.20.2
+      react: 18.2.0
+      scheduler: 0.23.0
 
-  /react-dropzone/12.1.0_react@17.0.2:
+  /react-dropzone/12.1.0_react@18.2.0:
     resolution: {integrity: sha512-iBYHA1rbopIvtzokEX4QubO6qk5IF/x3BtKGu74rF2JkQDXnwC4uO/lHKpaw4PJIV6iIAYOlwLv2FpiGyqHNog==}
     engines: {node: '>= 10.13'}
     peerDependencies:
@@ -24951,24 +24931,24 @@ packages:
       attr-accept: 2.2.2
       file-selector: 0.5.0
       prop-types: 15.8.1
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /react-error-boundary/3.1.3_react@17.0.2:
+  /react-error-boundary/3.1.3_react@18.2.0:
     resolution: {integrity: sha512-A+F9HHy9fvt9t8SNDlonq01prnU8AmkjvGKV4kk8seB9kU3xMEO8J/PQlLVmoOIDODl5U2kufSBs4vrWIqhsAA==}
     engines: {node: '>=10', npm: '>=6'}
     peerDependencies:
       react: '>=16.13.1'
     dependencies:
       '@babel/runtime': 7.18.3
-      react: 17.0.2
+      react: 18.2.0
     dev: true
 
   /react-fast-compare/2.0.4:
     resolution: {integrity: sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==}
     dev: false
 
-  /react-focus-lock/2.6.0_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /react-focus-lock/2.6.0_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-2yB5KWyaefbvFDgqvsg/KpIjbqVlhIY2c/dyDcokDLhB3Ib7I4bjsrta5OkI5euUoIu5xBTyBwIQZPykUJAr1g==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -24976,57 +24956,57 @@ packages:
       '@babel/runtime': 7.18.3
       focus-lock: 0.9.2
       prop-types: 15.8.1
-      react: 17.0.2
-      react-clientside-effect: 1.2.5_react@17.0.2
-      use-callback-ref: 1.2.5_hx2b44akkvgcgvvtmk7ds2qk6q
-      use-sidecar: 1.0.5_react@17.0.2
+      react: 18.2.0
+      react-clientside-effect: 1.2.5_react@18.2.0
+      use-callback-ref: 1.2.5_3hx2ussxxho4jajbwrd6gq34qe
+      use-sidecar: 1.0.5_react@18.2.0
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /react-hook-form/7.29.0_react@17.0.2:
+  /react-hook-form/7.29.0_react@18.2.0:
     resolution: {integrity: sha512-NcJqWRF6el5HMW30fqZRt27s+lorvlCCDbTpAyHoodQeYWXgQCvZJJQLC1kRMKdrJknVH0NIg3At6TUzlZJFOQ==}
     engines: {node: '>=12.22.0'}
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18
     dependencies:
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /react-hot-toast/2.2.0_ha54m6pwxcz4gcusjmwevbhi24:
+  /react-hot-toast/2.2.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==}
     engines: {node: '>=10'}
     peerDependencies:
       react: '>=16'
       react-dom: '>=16'
     dependencies:
-      goober: 2.1.8_csstype@3.0.11
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      goober: 2.1.8
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     transitivePeerDependencies:
       - csstype
     dev: false
 
-  /react-hot-toast/2.2.0_sfoxds7t5ydpegc3knd667wn6m:
+  /react-hot-toast/2.2.0_npw22p3c4ehm7n7vxn2gqac44u:
     resolution: {integrity: sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==}
     engines: {node: '>=10'}
     peerDependencies:
       react: '>=16'
       react-dom: '>=16'
     dependencies:
-      goober: 2.1.8
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      goober: 2.1.8_csstype@3.0.11
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     transitivePeerDependencies:
       - csstype
     dev: false
 
-  /react-intersection-observer-hook/2.0.3_react@17.0.2:
+  /react-intersection-observer-hook/2.0.3_react@18.2.0:
     resolution: {integrity: sha512-6LcrY/oUtZqn7HbwLTgSk43/KdZD5LZJsWUOwQB11aMPi3OkjyDcm2dwAQ1ydlbrSDlL4fHUNXisNt4B470UJg==}
     peerDependencies:
       react: '>=16.8.0'
     dependencies:
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
   /react-is/16.13.1:
@@ -25038,19 +25018,19 @@ packages:
   /react-is/18.0.0:
     resolution: {integrity: sha512-yUcBYdBBbo3QiPsgYDcfQcIkGZHfxOaoE6HLSnr1sPzMhdyxusbfKOSUbSd/ocGi32dxcj366PsTj+5oggeKKw==}
 
-  /react-markdown/5.0.3_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /react-markdown/5.0.3_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-jDWOc1AvWn0WahpjW6NK64mtx6cwjM4iSsLHJPNBqoAgGOVoIdJMqaKX4++plhOtdd4JksdqzlDibgPx6B/M2w==}
     peerDependencies:
       '@types/react': '>=16'
       react: '>=16'
     dependencies:
       '@types/mdast': 3.0.10
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
       '@types/unist': 2.0.6
       html-to-react: 1.5.0
       mdast-add-list-metadata: 1.0.1
       prop-types: 15.8.1
-      react: 17.0.2
+      react: 18.2.0
       react-is: 16.13.1
       remark-parse: 9.0.0
       unified: 9.2.2
@@ -25060,19 +25040,19 @@ packages:
       - supports-color
     dev: false
 
-  /react-markdown/6.0.3_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /react-markdown/6.0.3_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-kQbpWiMoBHnj9myLlmZG9T1JdoT/OEyHK7hqM6CqFT14MAkgWiWBUYijLyBmxbntaN6dCDicPcUhWhci1QYodg==}
     peerDependencies:
       '@types/react': '>=16'
       react: '>=16'
     dependencies:
       '@types/hast': 2.3.4
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
       '@types/unist': 2.0.6
       comma-separated-tokens: 1.0.8
       prop-types: 15.8.1
       property-information: 5.6.0
-      react: 17.0.2
+      react: 18.2.0
       react-is: 17.0.2
       remark-parse: 9.0.0
       remark-rehype: 8.1.0
@@ -25085,20 +25065,20 @@ packages:
       - supports-color
     dev: false
 
-  /react-markdown/7.1.0_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /react-markdown/7.1.0_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-hL8cLLkTydyoKlZWZOjlU6TvMYIw9qKLh1CCzVfnhKt/R/SnKVAqiyugetXY61CkjhBqJl2C5FdU3OwHYo7SrQ==}
     peerDependencies:
       '@types/react': '>=16'
       react: '>=16'
     dependencies:
       '@types/hast': 2.3.4
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
       '@types/unist': 2.0.6
       comma-separated-tokens: 2.0.2
       hast-util-whitespace: 2.0.0
       prop-types: 15.8.1
       property-information: 6.1.0
-      react: 17.0.2
+      react: 18.2.0
       react-is: 17.0.2
       remark-parse: 10.0.0
       remark-rehype: 9.1.0
@@ -25111,7 +25091,7 @@ packages:
       - supports-color
     dev: false
 
-  /react-markdown/8.0.3_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /react-markdown/8.0.3_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-We36SfqaKoVNpN1QqsZwWSv/OZt5J15LNgTLWynwAN5b265hrQrsjMtlRNwUvS+YyR3yDM8HpTNc4pK9H/Gc0A==}
     peerDependencies:
       '@types/react': '>=16'
@@ -25119,13 +25099,13 @@ packages:
     dependencies:
       '@types/hast': 2.3.4
       '@types/prop-types': 15.7.4
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
       '@types/unist': 2.0.6
       comma-separated-tokens: 2.0.2
       hast-util-whitespace: 2.0.0
       prop-types: 15.8.1
       property-information: 6.1.0
-      react: 17.0.2
+      react: 18.2.0
       react-is: 18.0.0
       remark-parse: 10.0.0
       remark-rehype: 10.1.0
@@ -25142,7 +25122,7 @@ packages:
     resolution: {integrity: sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==}
     dev: false
 
-  /react-query/3.39.1_sfoxds7t5ydpegc3knd667wn6m:
+  /react-query/3.39.1_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-qYKT1bavdDiQZbngWZyPotlBVzcBjDYEJg5RQLBa++5Ix5jjfbEYJmHSZRZD+USVHUSvl/ey9Hu+QfF1QAK80A==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -25157,11 +25137,11 @@ packages:
       '@babel/runtime': 7.18.3
       broadcast-channel: 3.7.0
       match-sorter: 6.3.1
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /react-reconciler/0.26.2_react@17.0.2:
+  /react-reconciler/0.26.2_react@18.2.0:
     resolution: {integrity: sha512-nK6kgY28HwrMNwDnMui3dvm3rCFjZrcGiuwLc5COUipBK5hWHLOxMJhSnSomirqWwjPBJKV1QcbkI0VJr7Gl1Q==}
     engines: {node: '>=0.10.0'}
     peerDependencies:
@@ -25169,22 +25149,22 @@ packages:
     dependencies:
       loose-envify: 1.4.0
       object-assign: 4.1.1
-      react: 17.0.2
+      react: 18.2.0
       scheduler: 0.20.2
     dev: false
 
-  /react-refractor/2.1.7_react@17.0.2:
+  /react-refractor/2.1.7_react@18.2.0:
     resolution: {integrity: sha512-avNxSSsnjYg+BKpO8LVCK14KRn5pLZ+8DInMiUEeZPL6hs0SN0zafl3mJIxavGQPKyihqbXqzq4CYNflJQjaaw==}
     peerDependencies:
       react: '>=15.0.0'
     dependencies:
       prop-types: 15.8.1
-      react: 17.0.2
+      react: 18.2.0
       refractor: 3.6.0
       unist-util-filter: 2.0.3
       unist-util-visit-parents: 3.1.1
 
-  /react-remove-scroll-bar/2.2.0_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /react-remove-scroll-bar/2.2.0_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg==}
     engines: {node: '>=8.5.0'}
     peerDependencies:
@@ -25194,13 +25174,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 17.0.45
-      react: 17.0.2
-      react-style-singleton: 2.1.1_hx2b44akkvgcgvvtmk7ds2qk6q
+      '@types/react': 18.0.15
+      react: 18.2.0
+      react-style-singleton: 2.1.1_3hx2ussxxho4jajbwrd6gq34qe
       tslib: 1.14.1
     dev: false
 
-  /react-remove-scroll-bar/2.3.3_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /react-remove-scroll-bar/2.3.3_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-i9GMNWwpz8XpUpQ6QlevUtFjHGqnPG4Hxs+wlIJntu/xcsZVEpJcIV71K3ZkqNy2q3GfgvkD7y6t/Sv8ofYSbw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -25210,13 +25190,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 17.0.45
-      react: 17.0.2
-      react-style-singleton: 2.2.1_hx2b44akkvgcgvvtmk7ds2qk6q
+      '@types/react': 18.0.15
+      react: 18.2.0
+      react-style-singleton: 2.2.1_3hx2ussxxho4jajbwrd6gq34qe
       tslib: 2.4.0
     dev: false
 
-  /react-remove-scroll/2.4.3_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /react-remove-scroll/2.4.3_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-lGWYXfV6jykJwbFpsuPdexKKzp96f3RbvGapDSIdcyGvHb7/eqyn46C7/6h+rUzYar1j5mdU+XECITHXCKBk9Q==}
     engines: {node: '>=8.5.0'}
     peerDependencies:
@@ -25226,16 +25206,16 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 17.0.45
-      react: 17.0.2
-      react-remove-scroll-bar: 2.2.0_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-style-singleton: 2.1.1_hx2b44akkvgcgvvtmk7ds2qk6q
+      '@types/react': 18.0.15
+      react: 18.2.0
+      react-remove-scroll-bar: 2.2.0_3hx2ussxxho4jajbwrd6gq34qe
+      react-style-singleton: 2.1.1_3hx2ussxxho4jajbwrd6gq34qe
       tslib: 1.14.1
-      use-callback-ref: 1.2.5_hx2b44akkvgcgvvtmk7ds2qk6q
-      use-sidecar: 1.0.5_react@17.0.2
+      use-callback-ref: 1.2.5_3hx2ussxxho4jajbwrd6gq34qe
+      use-sidecar: 1.0.5_react@18.2.0
     dev: false
 
-  /react-remove-scroll/2.5.4_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /react-remove-scroll/2.5.4_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -25245,37 +25225,37 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 17.0.45
-      react: 17.0.2
-      react-remove-scroll-bar: 2.3.3_hx2b44akkvgcgvvtmk7ds2qk6q
-      react-style-singleton: 2.2.1_hx2b44akkvgcgvvtmk7ds2qk6q
+      '@types/react': 18.0.15
+      react: 18.2.0
+      react-remove-scroll-bar: 2.3.3_3hx2ussxxho4jajbwrd6gq34qe
+      react-style-singleton: 2.2.1_3hx2ussxxho4jajbwrd6gq34qe
       tslib: 2.4.0
-      use-callback-ref: 1.3.0_hx2b44akkvgcgvvtmk7ds2qk6q
-      use-sidecar: 1.1.2_hx2b44akkvgcgvvtmk7ds2qk6q
+      use-callback-ref: 1.3.0_3hx2ussxxho4jajbwrd6gq34qe
+      use-sidecar: 1.1.2_3hx2ussxxho4jajbwrd6gq34qe
     dev: false
 
-  /react-rewards/2.0.3_sfoxds7t5ydpegc3knd667wn6m:
+  /react-rewards/2.0.3_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-qww5Jtk2HmCjR9wc7+0c2iP8oCQzENZn8pnoJGi0S6o+6dAD25+ZoagLSWdoBLGVwxfP5kFBjv3VZ6L8fPk6lg==}
     peerDependencies:
       react: ^15.0.0 || ^16.0.0 || ^17.0.0
       react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0
     dependencies:
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /react-rough-notation/1.0.2_sfoxds7t5ydpegc3knd667wn6m:
+  /react-rough-notation/1.0.2_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-nS3u90cZMQrOSzUbut28nrVgc1ixMaclDloqGi1Sw5BiY3DQNQPL8cVbIVoKUxwSiWugVM5GPf9ubL/h/avoKw==}
     peerDependencies:
       react: ^17.0.0
       react-dom: ^17.0.0
     dependencies:
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       rough-notation: 0.4.0
     dev: false
 
-  /react-scroll/1.8.7_sfoxds7t5ydpegc3knd667wn6m:
+  /react-scroll/1.8.7_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-fBOIwweAlhicx8RqP9tQXn/Uhd+DTtVRjw+0VBsIn1Z+MjRYLhTZ0tMoTAU1vOD3dce8mI6copexI4yWII+Luw==}
     peerDependencies:
       react: ^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0
@@ -25283,17 +25263,17 @@ packages:
     dependencies:
       lodash.throttle: 4.1.1
       prop-types: 15.8.1
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /react-shallow-renderer/16.14.1_react@17.0.2:
+  /react-shallow-renderer/16.14.1_react@18.2.0:
     resolution: {integrity: sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==}
     peerDependencies:
       react: ^16.0.0 || ^17.0.0
     dependencies:
       object-assign: 4.1.1
-      react: 17.0.2
+      react: 18.2.0
       react-is: 17.0.2
     dev: true
 
@@ -25301,7 +25281,7 @@ packages:
     resolution: {integrity: sha1-MXOocLBOWjwyGgbSTNU8YDARHEU=}
     dev: false
 
-  /react-style-singleton/2.1.1_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /react-style-singleton/2.1.1_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==}
     engines: {node: '>=8.5.0'}
     peerDependencies:
@@ -25311,14 +25291,14 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
       get-nonce: 1.0.1
       invariant: 2.2.4
-      react: 17.0.2
+      react: 18.2.0
       tslib: 1.14.1
     dev: false
 
-  /react-style-singleton/2.2.1_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /react-style-singleton/2.2.1_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -25328,14 +25308,14 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
       get-nonce: 1.0.1
       invariant: 2.2.4
-      react: 17.0.2
+      react: 18.2.0
       tslib: 2.4.0
     dev: false
 
-  /react-syntax-highlighter/15.4.4_react@17.0.2:
+  /react-syntax-highlighter/15.4.4_react@18.2.0:
     resolution: {integrity: sha512-PsOFHNTzkb3OroXdoR897eKN5EZ6grht1iM+f1lJSq7/L0YVnkJaNVwC3wEUYPOAmeyl5xyer1DjL6MrumO6Zw==}
     peerDependencies:
       react: '>= 0.14.0'
@@ -25344,19 +25324,19 @@ packages:
       highlight.js: 10.7.3
       lowlight: 1.20.0
       prismjs: 1.25.0
-      react: 17.0.2
+      react: 18.2.0
       refractor: 3.5.0
     dev: false
 
-  /react-test-renderer/17.0.2_react@17.0.2:
+  /react-test-renderer/17.0.2_react@18.2.0:
     resolution: {integrity: sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==}
     peerDependencies:
       react: 17.0.2
     dependencies:
       object-assign: 4.1.1
-      react: 17.0.2
+      react: 18.2.0
       react-is: 17.0.2
-      react-shallow-renderer: 16.14.1_react@17.0.2
+      react-shallow-renderer: 16.14.1_react@18.2.0
       scheduler: 0.20.2
     dev: true
 
@@ -25370,50 +25350,50 @@ packages:
       popper.js: 1.16.1
     dev: false
 
-  /react-universal-interface/0.6.2_react@17.0.2+tslib@2.4.0:
+  /react-universal-interface/0.6.2_react@18.2.0+tslib@2.4.0:
     resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==}
     peerDependencies:
       react: '*'
       tslib: '*'
     dependencies:
-      react: 17.0.2
+      react: 18.2.0
       tslib: 2.4.0
     dev: false
 
-  /react-use-clipboard/1.0.7_sfoxds7t5ydpegc3knd667wn6m:
+  /react-use-clipboard/1.0.7_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-blIprqARyITp0uVw/2Rh87mcujqXdH6vZ5NrcuXEhI5EmjBGxcGnwt/79+vdN7rwM6OliGj481lOj6ZCcsiYEQ==}
     peerDependencies:
       react: ^16.8.0 || ^17
       react-dom: ^16.8.0 || ^17
     dependencies:
       copy-to-clipboard: 3.3.1
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /react-use-clipboard/1.0.8_sfoxds7t5ydpegc3knd667wn6m:
+  /react-use-clipboard/1.0.8_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-QbN2kFl9uWEsELU4ONpAM98WASllAUWPSGBocbEVzRlcl1PbSa9EIdgADm6XlrcjYw9g1YQBfnCUb/5HGTOY+w==}
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18
       react-dom: ^16.8.0 || ^17 || ^18
     dependencies:
       copy-to-clipboard: 3.3.1
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /react-use-measure/2.1.1_sfoxds7t5ydpegc3knd667wn6m:
+  /react-use-measure/2.1.1_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==}
     peerDependencies:
       react: '>=16.13'
       react-dom: '>=16.13'
     dependencies:
       debounce: 1.2.1
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /react-use/17.3.2_sfoxds7t5ydpegc3knd667wn6m:
+  /react-use/17.3.2_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-bj7OD0/1wL03KyWmzFXAFe425zziuTf7q8olwCYBfOeFHY1qfO1FAMjROQLsLZYwG4Rx63xAfb7XAbBrJsZmEw==}
     peerDependencies:
       react: ^16.8.0  || ^17.0.0
@@ -25425,10 +25405,10 @@ packages:
       fast-deep-equal: 3.1.3
       fast-shallow-equal: 1.0.0
       js-cookie: 2.2.1
-      nano-css: 5.3.4_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      react-universal-interface: 0.6.2_react@17.0.2+tslib@2.4.0
+      nano-css: 5.3.4_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-universal-interface: 0.6.2_react@18.2.0+tslib@2.4.0
       resize-observer-polyfill: 1.5.1
       screenfull: 5.2.0
       set-harmonic-interval: 1.0.1
@@ -25437,12 +25417,11 @@ packages:
       tslib: 2.4.0
     dev: false
 
-  /react/17.0.2:
-    resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==}
+  /react/18.2.0:
+    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
     dependencies:
       loose-envify: 1.4.0
-      object-assign: 4.1.1
 
   /read-cache/1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
@@ -26367,6 +26346,11 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
 
+  /scheduler/0.23.0:
+    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
+    dependencies:
+      loose-envify: 1.4.0
+
   /schema-utils/1.0.0:
     resolution: {integrity: sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==}
     engines: {node: '>= 4'}
@@ -26632,15 +26616,15 @@ packages:
   /simple-concat/1.0.1:
     resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
 
-  /simplebar-react/2.3.6_sfoxds7t5ydpegc3knd667wn6m:
+  /simplebar-react/2.3.6_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-Igm/MRdt+LQ8edTTzjRoaATfXPPMByuUsVvHQHrkX7SH4jmvL85VshtOVcXFrOBspv9vqQtnIrOq/j9VmRSNDQ==}
     peerDependencies:
       react: ^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0 || ^17.0
       react-dom: ^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0 || ^17.0
     dependencies:
       prop-types: 15.7.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       simplebar: 5.3.6
     dev: false
 
@@ -27319,7 +27303,7 @@ packages:
       hey-listen: 1.0.8
       tslib: 2.4.0
 
-  /styled-components/5.3.5_le6yh75jdu4qlr45kmyuenjcbu:
+  /styled-components/5.3.5_xwin6kermpfszgjtt7m5i5m4jy:
     resolution: {integrity: sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==}
     engines: {node: '>=10'}
     requiresBuild: true
@@ -27336,14 +27320,14 @@ packages:
       babel-plugin-styled-components: 2.0.7_styled-components@5.3.5
       css-to-react-native: 3.0.0
       hoist-non-react-statics: 3.3.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       react-is: 18.0.0
       shallowequal: 1.1.0
       supports-color: 5.5.0
     dev: false
 
-  /styled-jsx/5.0.2_hfc3cse2ox4f74hy7yokdneala:
+  /styled-jsx/5.0.2_ffflpilffev72dykeiwkgumppe:
     resolution: {integrity: sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
@@ -27357,9 +27341,9 @@ packages:
         optional: true
     dependencies:
       '@babel/core': 7.16.5
-      react: 17.0.2
+      react: 18.2.0
 
-  /styled-jsx/5.0.2_react@17.0.2:
+  /styled-jsx/5.0.2_react@18.2.0:
     resolution: {integrity: sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
@@ -27372,7 +27356,7 @@ packages:
       babel-plugin-macros:
         optional: true
     dependencies:
-      react: 17.0.2
+      react: 18.2.0
 
   /stylehacks/5.1.0_postcss@8.4.14:
     resolution: {integrity: sha512-SzLmvHQTrIWfSgljkQCw2++C9+Ne91d/6Sp92I8c5uHTcy/PgeHamwITIbBW9wnFTY/3ZfSXR9HIL6Ikqmcu6Q==}
@@ -27507,12 +27491,12 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  /suspend-react/0.0.8_react@17.0.2:
+  /suspend-react/0.0.8_react@18.2.0:
     resolution: {integrity: sha512-ZC3r8Hu1y0dIThzsGw0RLZplnX9yXwfItcvaIzJc2VQVi8TGyGDlu92syMB5ulybfvGLHAI5Ghzlk23UBPF8xg==}
     peerDependencies:
       react: '>=17.0'
     dependencies:
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
   /svg-to-pdfkit/0.1.8:
@@ -27554,12 +27538,12 @@ packages:
       upper-case: 1.1.3
     dev: false
 
-  /swr/1.3.0_react@17.0.2:
+  /swr/1.3.0_react@18.2.0:
     resolution: {integrity: sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==}
     peerDependencies:
       react: ^16.11.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
   /symbol-tree/3.2.4:
@@ -28976,16 +28960,16 @@ packages:
       extend: 2.0.2
     dev: false
 
-  /use-asset/1.0.4_react@17.0.2:
+  /use-asset/1.0.4_react@18.2.0:
     resolution: {integrity: sha512-7/hqDrWa0iMnCoET9W1T07EmD4Eg/Wmoj/X8TGBc++ECRK4m5yTsjP4O6s0yagbxfqIOuUkIxe2/sA+VR2GxZA==}
     peerDependencies:
       react: '>=17.0'
     dependencies:
       fast-deep-equal: 3.1.3
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
-  /use-callback-ref/1.2.5_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /use-callback-ref/1.2.5_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==}
     engines: {node: '>=8.5.0'}
     peerDependencies:
@@ -28995,11 +28979,11 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 17.0.45
-      react: 17.0.2
+      '@types/react': 18.0.15
+      react: 18.2.0
     dev: false
 
-  /use-callback-ref/1.3.0_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /use-callback-ref/1.3.0_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -29009,12 +28993,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 17.0.45
-      react: 17.0.2
+      '@types/react': 18.0.15
+      react: 18.2.0
       tslib: 2.4.0
     dev: false
 
-  /use-isomorphic-layout-effect/1.1.1_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /use-isomorphic-layout-effect/1.1.1_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==}
     peerDependencies:
       '@types/react': '*'
@@ -29023,21 +29007,21 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 17.0.45
-      react: 17.0.2
+      '@types/react': 18.0.15
+      react: 18.2.0
 
-  /use-sidecar/1.0.5_react@17.0.2:
+  /use-sidecar/1.0.5_react@18.2.0:
     resolution: {integrity: sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==}
     engines: {node: '>=8.5.0'}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0
     dependencies:
       detect-node-es: 1.1.0
-      react: 17.0.2
+      react: 18.2.0
       tslib: 1.14.1
     dev: false
 
-  /use-sidecar/1.1.2_hx2b44akkvgcgvvtmk7ds2qk6q:
+  /use-sidecar/1.1.2_3hx2ussxxho4jajbwrd6gq34qe:
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -29047,26 +29031,26 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 17.0.45
+      '@types/react': 18.0.15
       detect-node-es: 1.1.0
-      react: 17.0.2
+      react: 18.2.0
       tslib: 2.4.0
     dev: false
 
-  /use-subscription/1.5.1_react@17.0.2:
+  /use-subscription/1.5.1_react@18.2.0:
     resolution: {integrity: sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0
     dependencies:
       object-assign: 4.1.1
-      react: 17.0.2
+      react: 18.2.0
 
-  /use-sync-external-store/1.2.0_react@17.0.2:
+  /use-sync-external-store/1.2.0_react@18.2.0:
     resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      react: 17.0.2
+      react: 18.2.0
 
   /use/3.1.1:
     resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==}
@@ -29812,7 +29796,7 @@ packages:
     resolution: {integrity: sha512-DCo0oxvcvOTGP/f5FA6tz2Z6wF+FIcEApSTu0zV5sQgn9hoT5lZ9YRAKUraxt9oP7l4e8TnNdi8IZTCX6WCkwA==}
     dev: false
 
-  /zustand/3.7.2_react@17.0.2:
+  /zustand/3.7.2_react@18.2.0:
     resolution: {integrity: sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==}
     engines: {node: '>=12.7.0'}
     peerDependencies:
@@ -29821,7 +29805,7 @@ packages:
       react:
         optional: true
     dependencies:
-      react: 17.0.2
+      react: 18.2.0
     dev: false
 
   /zwitch/1.0.5:

From e2c6399ff266488ece3263fb19388ce95d28d394 Mon Sep 17 00:00:00 2001
From: Vojta Holik <vojta@egghead.io>
Date: Fri, 29 Jul 2022 15:14:34 +0200
Subject: [PATCH 7/7] fix: testing library renderHook

---
 packages/quiz/package.json                    |  6 +-
 packages/quiz/src/hooks/use-question.test.tsx |  4 +-
 pnpm-lock.yaml                                | 71 ++++++++++++-------
 3 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/packages/quiz/package.json b/packages/quiz/package.json
index d1e444c177..3e778281c3 100644
--- a/packages/quiz/package.json
+++ b/packages/quiz/package.json
@@ -45,9 +45,9 @@
     "@skillrecordings/scripts": "^0.0.5",
     "@skillrecordings/tsconfig": "^0.0.5",
     "@skillrecordings/types": "^0.0.5",
-    "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/cookie": "^0.4.1",
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.14.179",
diff --git a/packages/quiz/src/hooks/use-question.test.tsx b/packages/quiz/src/hooks/use-question.test.tsx
index 32e2832514..6ff85603bc 100644
--- a/packages/quiz/src/hooks/use-question.test.tsx
+++ b/packages/quiz/src/hooks/use-question.test.tsx
@@ -2,10 +2,9 @@
  * @jest-environment jsdom
  */
 import * as React from 'react'
-import {renderHook} from '@testing-library/react-hooks'
 import {QuestionResource} from '@skillrecordings/types'
 import {useQuestion} from '../index'
-import {render, screen} from '@testing-library/react'
+import {render, screen, renderHook} from '@testing-library/react'
 import Essay from '../components/question/essay'
 
 const ESSAY_QUESTION: QuestionResource = {
@@ -37,6 +36,7 @@ describe('can render questions', () => {
     const {
       result: {current},
     } = renderHook(() => useQuestion({currentQuestion: ESSAY_QUESTION}))
+
     expect(current).not.toBeUndefined()
     current && render(<Essay question={current} />)
     const submitButton = screen.getByRole('button')
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index afe61e88a8..79a745a7b0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3186,9 +3186,9 @@ importers:
       '@skillrecordings/scripts': ^0.0.5
       '@skillrecordings/tsconfig': ^0.0.5
       '@skillrecordings/types': ^0.0.5
-      '@testing-library/jest-dom': ^5.15.0
-      '@testing-library/react': ^12.1.2
-      '@testing-library/react-hooks': ^7.0.2
+      '@testing-library/jest-dom': ^5.16.4
+      '@testing-library/react': ^13.3.0
+      '@testing-library/react-hooks': ^8.0.1
       '@types/cookie': ^0.4.1
       '@types/jest': ^27.5.2
       '@types/lodash': ^4.14.179
@@ -3241,9 +3241,9 @@ importers:
       '@skillrecordings/scripts': link:../scripts
       '@skillrecordings/tsconfig': link:../tsconfig
       '@skillrecordings/types': link:../types
-      '@testing-library/jest-dom': 5.16.2
-      '@testing-library/react': 12.1.2_biqbaboplfbrettd7655fr4n2y
-      '@testing-library/react-hooks': 7.0.2_pqvonxj6wieqlv6l3bvjvzu5hy
+      '@testing-library/jest-dom': 5.16.4
+      '@testing-library/react': 13.3.0_biqbaboplfbrettd7655fr4n2y
+      '@testing-library/react-hooks': 8.0.1_ccsorpbuxjxfuevurmpi5cidym
       '@types/cookie': 0.4.1
       '@types/jest': 27.5.2
       '@types/lodash': 4.14.180
@@ -6557,13 +6557,6 @@ packages:
       core-js-pure: 3.19.1
       regenerator-runtime: 0.13.9
 
-  /@babel/runtime/7.15.3:
-    resolution: {integrity: sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      regenerator-runtime: 0.13.9
-    dev: true
-
   /@babel/runtime/7.16.0:
     resolution: {integrity: sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==}
     engines: {node: '>=6.9.0'}
@@ -10325,23 +10318,39 @@ packages:
       redent: 3.0.0
     dev: true
 
-  /@testing-library/react-hooks/7.0.2_pqvonxj6wieqlv6l3bvjvzu5hy:
-    resolution: {integrity: sha512-dYxpz8u9m4q1TuzfcUApqi8iFfR6R0FaMbr2hjZJy1uC8z+bO/K4v8Gs9eogGKYQop7QsrBTFkv/BCF7MzD2Cg==}
+  /@testing-library/jest-dom/5.16.4:
+    resolution: {integrity: sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==}
+    engines: {node: '>=8', npm: '>=6', yarn: '>=1'}
+    dependencies:
+      '@babel/runtime': 7.18.3
+      '@types/testing-library__jest-dom': 5.14.1
+      aria-query: 5.0.0
+      chalk: 3.0.0
+      css: 3.0.0
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.5.10
+      lodash: 4.17.21
+      redent: 3.0.0
+    dev: true
+
+  /@testing-library/react-hooks/8.0.1_ccsorpbuxjxfuevurmpi5cidym:
+    resolution: {integrity: sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==}
     engines: {node: '>=12'}
     peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-      react-test-renderer: '>=16.9.0'
+      '@types/react': ^16.9.0 || ^17.0.0
+      react: ^16.9.0 || ^17.0.0
+      react-dom: ^16.9.0 || ^17.0.0
+      react-test-renderer: ^16.9.0 || ^17.0.0
     peerDependenciesMeta:
+      '@types/react':
+        optional: true
       react-dom:
         optional: true
       react-test-renderer:
         optional: true
     dependencies:
-      '@babel/runtime': 7.15.3
+      '@babel/runtime': 7.18.3
       '@types/react': 18.0.15
-      '@types/react-dom': 18.0.6
-      '@types/react-test-renderer': 17.0.1
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       react-error-boundary: 3.1.3_react@18.2.0
@@ -10375,6 +10384,20 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: true
 
+  /@testing-library/react/13.3.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.18.3
+      '@testing-library/dom': 8.11.0
+      '@types/react-dom': 18.0.6
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: true
+
   /@tippyjs/react/4.2.6_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==}
     peerDependencies:
@@ -11128,12 +11151,6 @@ packages:
       '@types/react': 18.0.15
     dev: true
 
-  /@types/react-test-renderer/17.0.1:
-    resolution: {integrity: sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==}
-    dependencies:
-      '@types/react': 18.0.15
-    dev: true
-
   /@types/react/17.0.45:
     resolution: {integrity: sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==}
     dependencies: