From ef6ed6050be7048bb18901b675f52aa86fff6116 Mon Sep 17 00:00:00 2001
From: Nafees Nazik <84864519+G3root@users.noreply.github.com>
Date: Tue, 26 Jul 2022 13:57:57 +0530
Subject: [PATCH] Feat: Add next-themes for theme handling  (#3263)

* chore: add next-themes

* feat: add next theme provider

* fix: modify useTheme hook to use next-themes

* fix: use the new hook for theming

* remove conditional rendering with isReady boolean flag

* remove Theme component returned from useTheme hook

* Update missing useTheme usage

* Fix theme switching as per system. Also, ensure that booking and non booking pages can maintain their own requirements of theme simulatenously

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: zomars <zomars@me.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
---
 apps/web/components/Shell.tsx                 |   6 +-
 apps/web/components/booking/CancelBooking.tsx | 156 ++--
 .../booking/pages/AvailabilityPage.tsx        |   3 +-
 .../components/booking/pages/BookingPage.tsx  | 773 ++++++++--------
 apps/web/ee/components/stripe/PaymentPage.tsx |   7 +-
 apps/web/lib/app-providers.tsx                |   2 +-
 apps/web/lib/hooks/useTheme.tsx               |  54 +-
 apps/web/package.json                         |   1 +
 apps/web/pages/[user].tsx                     |   4 +-
 apps/web/pages/[user]/[type].tsx              |   2 +
 apps/web/pages/[user]/book.tsx                |   2 +
 apps/web/pages/_app.tsx                       |  19 +-
 apps/web/pages/apps/[slug]/[...pages].tsx     |   2 +
 apps/web/pages/d/[link]/[slug].tsx            |   1 +
 apps/web/pages/d/[link]/book.tsx              |   2 +
 apps/web/pages/success.tsx                    | 624 +++++++------
 apps/web/pages/team/[slug].tsx                |  82 +-
 apps/web/pages/team/[slug]/[type].tsx         |   1 +
 apps/web/pages/team/[slug]/book.tsx           |   2 +
 .../pages/routing-link/[...appPages].tsx      |   2 +
 packages/ee/server/checkLicense.ts            |   1 +
 yarn.lock                                     | 870 +++++++++---------
 22 files changed, 1310 insertions(+), 1306 deletions(-)

diff --git a/apps/web/components/Shell.tsx b/apps/web/components/Shell.tsx
index 1670320a0f..3e32ced9b4 100644
--- a/apps/web/components/Shell.tsx
+++ b/apps/web/components/Shell.tsx
@@ -1,18 +1,18 @@
 import { SelectorIcon } from "@heroicons/react/outline";
-import { CollectionIcon } from "@heroicons/react/solid";
 import {
   ArrowLeftIcon,
   CalendarIcon,
   ClockIcon,
   CogIcon,
+  CollectionIcon,
   ExternalLinkIcon,
+  LightningBoltIcon,
   LinkIcon,
   LogoutIcon,
   MapIcon,
   MoonIcon,
-  ViewGridIcon,
   QuestionMarkCircleIcon,
-  LightningBoltIcon,
+  ViewGridIcon,
 } from "@heroicons/react/solid";
 import { UserPlan } from "@prisma/client";
 import { SessionContextValue, signOut, useSession } from "next-auth/react";
diff --git a/apps/web/components/booking/CancelBooking.tsx b/apps/web/components/booking/CancelBooking.tsx
index 1b26e67ca1..6e4cd6d99f 100644
--- a/apps/web/components/booking/CancelBooking.tsx
+++ b/apps/web/components/booking/CancelBooking.tsx
@@ -32,90 +32,86 @@ export default function CancelBooking(props: Props) {
   const [loading, setLoading] = useState(false);
   const telemetry = useTelemetry();
   const [error, setError] = useState<string | null>(booking ? null : t("booking_already_cancelled"));
-  const { isReady, Theme } = useTheme(props.theme);
+  useTheme(props.theme);
 
-  if (isReady) {
-    return (
-      <>
-        <Theme />
-        {error && (
-          <div>
-            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-              <XIcon className="h-6 w-6 text-red-600" />
-            </div>
-            <div className="mt-3 text-center sm:mt-5">
-              <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
-                {error}
-              </h3>
-            </div>
+  return (
+    <>
+      {error && (
+        <div>
+          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+            <XIcon className="h-6 w-6 text-red-600" />
           </div>
-        )}
-        {!error && (
-          <div className="mt-5 sm:mt-6">
-            <label className="text-bookingdark font-medium dark:text-white">{t("cancellation_reason")}</label>
-            <textarea
-              placeholder={t("cancellation_reason_placeholder")}
-              value={cancellationReason}
-              onChange={(e) => setCancellationReason(e.target.value)}
-              className="mt-2 mb-3 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:mb-3 "
-              rows={3}
-            />
-            <div className="flex rtl:space-x-reverse">
-              {!props.recurringEvent && (
-                <div className="w-full">
-                  <Button color="secondary" onClick={() => router.push("/reschedule/" + booking?.uid)}>
-                    {t("reschedule_this")}
-                  </Button>
-                </div>
-              )}
-              <div className="w-full space-x-2 text-right">
-                <Button color="secondary" onClick={() => props.setIsCancellationMode(false)}>
-                  {t("nevermind")}
-                </Button>
-                <Button
-                  data-testid="cancel"
-                  onClick={async () => {
-                    setLoading(true);
-
-                    const payload = {
-                      uid: booking?.uid,
-                      reason: cancellationReason,
-                    };
-
-                    telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
-
-                    const res = await fetch("/api/cancel", {
-                      body: JSON.stringify(payload),
-                      headers: {
-                        "Content-Type": "application/json",
-                      },
-                      method: "DELETE",
-                    });
-
-                    if (res.status >= 200 && res.status < 300) {
-                      await router.push(
-                        `/cancel/success?name=${props.profile.name}&title=${booking?.title}&eventPage=${
-                          profile.slug
-                        }&team=${team ? 1 : 0}&recurring=${!!props.recurringEvent}`
-                      );
-                    } else {
-                      setLoading(false);
-                      setError(
-                        `${t("error_with_status_code_occured", { status: res.status })} ${t(
-                          "please_try_again"
-                        )}`
-                      );
-                    }
-                  }}
-                  loading={loading}>
-                  {t("cancel_event")}
+          <div className="mt-3 text-center sm:mt-5">
+            <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+              {error}
+            </h3>
+          </div>
+        </div>
+      )}
+      {!error && (
+        <div className="mt-5 sm:mt-6">
+          <label className="text-bookingdark font-medium dark:text-white">{t("cancellation_reason")}</label>
+          <textarea
+            placeholder={t("cancellation_reason_placeholder")}
+            value={cancellationReason}
+            onChange={(e) => setCancellationReason(e.target.value)}
+            className="mt-2 mb-3 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:mb-3 "
+            rows={3}
+          />
+          <div className="flex rtl:space-x-reverse">
+            {!props.recurringEvent && (
+              <div className="w-full">
+                <Button color="secondary" onClick={() => router.push("/reschedule/" + booking?.uid)}>
+                  {t("reschedule_this")}
                 </Button>
               </div>
+            )}
+            <div className="w-full space-x-2 text-right">
+              <Button color="secondary" onClick={() => props.setIsCancellationMode(false)}>
+                {t("nevermind")}
+              </Button>
+              <Button
+                data-testid="cancel"
+                onClick={async () => {
+                  setLoading(true);
+
+                  const payload = {
+                    uid: booking?.uid,
+                    reason: cancellationReason,
+                  };
+
+                  telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
+
+                  const res = await fetch("/api/cancel", {
+                    body: JSON.stringify(payload),
+                    headers: {
+                      "Content-Type": "application/json",
+                    },
+                    method: "DELETE",
+                  });
+
+                  if (res.status >= 200 && res.status < 300) {
+                    await router.push(
+                      `/cancel/success?name=${props.profile.name}&title=${booking?.title}&eventPage=${
+                        profile.slug
+                      }&team=${team ? 1 : 0}&recurring=${!!props.recurringEvent}`
+                    );
+                  } else {
+                    setLoading(false);
+                    setError(
+                      `${t("error_with_status_code_occured", { status: res.status })} ${t(
+                        "please_try_again"
+                      )}`
+                    );
+                  }
+                }}
+                loading={loading}>
+                {t("cancel_event")}
+              </Button>
             </div>
           </div>
-        )}
-      </>
-    );
-  }
-  return <></>;
+        </div>
+      )}
+    </>
+  );
 }
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index c39d7bf3d5..e3815fc3f5 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -307,7 +307,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   const isEmbed = useIsEmbed();
   const query = dateQuerySchema.parse(router.query);
   const { rescheduleUid } = query;
-  const { Theme } = useTheme(profile.theme);
+  useTheme(profile.theme);
   const { t } = useLocale();
   const { contracts } = useContracts();
   const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
@@ -376,7 +376,6 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
 
   return (
     <>
-      <Theme />
       <HeadSeo
         title={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title} | ${profile.name}`}
         description={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title}`}
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index b3d5f1b10f..329f4881e0 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -208,7 +208,7 @@ const BookingPage = ({
   });
 
   const rescheduleUid = router.query.rescheduleUid as string;
-  const { isReady, Theme } = useTheme(profile.theme);
+  useTheme(profile.theme);
   const date = asStringOrNull(router.query.date);
 
   const [guestToggle, setGuestToggle] = useState(booking && booking.attendees.length > 1);
@@ -465,7 +465,6 @@ const BookingPage = ({
 
   return (
     <div>
-      <Theme />
       <Head>
         <title>
           {rescheduleUid
@@ -488,430 +487,426 @@ const BookingPage = ({
           isEmbed ? "" : "sm:my-24",
           "my-0 max-w-3xl "
         )}>
-        {isReady && (
-          <div
-            className={classNames(
-              "main overflow-hidden",
-              isEmbed ? "" : "border border-gray-200",
-              isBackgroundTransparent ? "" : "dark:border-1 bg-white dark:bg-gray-800",
-              "rounded-md dark:border-gray-600 sm:border"
-            )}>
-            <div className="px-4 py-5 sm:flex sm:p-4">
-              <div className="sm:w-1/2 sm:border-r sm:dark:border-gray-700">
-                <AvatarGroup
-                  border="border-2 border-white dark:border-gray-800"
-                  size={14}
-                  items={[
-                    { image: profile.image || "", alt: profile.name || "", title: profile.name || "" },
-                  ].concat(
-                    eventType.users
-                      .filter((user) => user.name !== profile.name)
-                      .map((user) => ({
-                        title: user.name || "",
-                        image: user.avatar || "",
-                        alt: user.name || "",
-                      }))
-                  )}
-                />
-                <h2 className="font-cal text-bookinglight mt-2 font-medium dark:text-gray-300">
-                  {profile.name}
-                </h2>
-                <h1 className="text-bookingdark mb-4 text-xl font-semibold dark:text-white">
-                  {eventType.title}
-                </h1>
-                {!!eventType.seatsPerTimeSlot && (
-                  <p
-                    className={`${
-                      booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
-                        ? "text-rose-600"
-                        : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
-                        ? "text-yellow-500"
-                        : "text-emerald-400"
-                    } mb-2`}>
-                    {booking
-                      ? eventType.seatsPerTimeSlot - booking.attendees.length
-                      : eventType.seatsPerTimeSlot}{" "}
-                    / {eventType.seatsPerTimeSlot} {t("seats_available")}
-                  </p>
+        <div
+          className={classNames(
+            "main overflow-hidden",
+            isEmbed ? "" : "border border-gray-200",
+            isBackgroundTransparent ? "" : "dark:border-1 bg-white dark:bg-gray-800",
+            "rounded-md dark:border-gray-600 sm:border"
+          )}>
+          <div className="px-4 py-5 sm:flex sm:p-4">
+            <div className="sm:w-1/2 sm:border-r sm:dark:border-gray-700">
+              <AvatarGroup
+                border="border-2 border-white dark:border-gray-800"
+                size={14}
+                items={[
+                  { image: profile.image || "", alt: profile.name || "", title: profile.name || "" },
+                ].concat(
+                  eventType.users
+                    .filter((user) => user.name !== profile.name)
+                    .map((user) => ({
+                      title: user.name || "",
+                      image: user.avatar || "",
+                      alt: user.name || "",
+                    }))
                 )}
-                {eventType?.description && (
-                  <p className="text-bookinglight mb-2 dark:text-white">
-                    <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                    {eventType.description}
-                  </p>
-                )}
-                {eventType?.requiresConfirmation && (
-                  <p className="text-bookinglight mb-2 dark:text-white">
-                    <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                    {t("requires_confirmation")}
-                  </p>
-                )}
-                <p className="text-bookinglight mb-2 dark:text-white">
-                  <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
-                  {eventType.length} {t("minutes")}
+              />
+              <h2 className="font-cal text-bookinglight mt-2 font-medium dark:text-gray-300">
+                {profile.name}
+              </h2>
+              <h1 className="text-bookingdark mb-4 text-xl font-semibold dark:text-white">
+                {eventType.title}
+              </h1>
+              {!!eventType.seatsPerTimeSlot && (
+                <p
+                  className={`${
+                    booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
+                      ? "text-rose-600"
+                      : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
+                      ? "text-yellow-500"
+                      : "text-emerald-400"
+                  } mb-2`}>
+                  {booking
+                    ? eventType.seatsPerTimeSlot - booking.attendees.length
+                    : eventType.seatsPerTimeSlot}{" "}
+                  / {eventType.seatsPerTimeSlot} {t("seats_available")}
                 </p>
-                {eventType.price > 0 && (
-                  <p className="text-bookinglight mb-1 -ml-2 px-2 py-1 dark:text-white">
-                    <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
-                    <IntlProvider locale="en">
-                      <FormattedNumber
-                        value={eventType.price / 100.0}
-                        style="currency"
-                        currency={eventType.currency.toUpperCase()}
-                      />
-                    </IntlProvider>
+              )}
+              {eventType?.description && (
+                <p className="text-bookinglight mb-2 dark:text-white">
+                  <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                  {eventType.description}
+                </p>
+              )}
+              {eventType?.requiresConfirmation && (
+                <p className="text-bookinglight mb-2 dark:text-white">
+                  <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                  {t("requires_confirmation")}
+                </p>
+              )}
+              <p className="text-bookinglight mb-2 dark:text-white">
+                <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                {eventType.length} {t("minutes")}
+              </p>
+              {eventType.price > 0 && (
+                <p className="text-bookinglight mb-1 -ml-2 px-2 py-1 dark:text-white">
+                  <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
+                  <IntlProvider locale="en">
+                    <FormattedNumber
+                      value={eventType.price / 100.0}
+                      style="currency"
+                      currency={eventType.currency.toUpperCase()}
+                    />
+                  </IntlProvider>
+                </p>
+              )}
+              {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
+                <div className="mb-3 text-gray-600 dark:text-white">
+                  <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                  <p className="mb-1 -ml-2 inline px-2 py-1">
+                    {getEveryFreqFor({
+                      t,
+                      recurringEvent: eventType.recurringEvent,
+                      recurringCount: recurringEventCount,
+                    })}
                   </p>
-                )}
-                {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
-                  <div className="mb-3 text-gray-600 dark:text-white">
-                    <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
-                    <p className="mb-1 -ml-2 inline px-2 py-1">
-                      {getEveryFreqFor({
-                        t,
-                        recurringEvent: eventType.recurringEvent,
-                        recurringCount: recurringEventCount,
-                      })}
-                    </p>
+                </div>
+              )}
+              <div className="text-bookinghighlight mb-4 flex">
+                <CalendarIcon className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
+                <div className="-mt-1">
+                  {(rescheduleUid || !eventType.recurringEvent?.freq) &&
+                    parseDate(dayjs(date).tz(timeZone()), i18n)}
+                  {!rescheduleUid &&
+                    eventType.recurringEvent?.freq &&
+                    recurringStrings.slice(0, 5).map((aDate, key) => <p key={key}>{aDate}</p>)}
+                  {!rescheduleUid && eventType.recurringEvent?.freq && recurringStrings.length > 5 && (
+                    <div className="flex">
+                      <Tooltip
+                        content={recurringStrings.slice(5).map((aDate, key) => (
+                          <p key={key}>{aDate}</p>
+                        ))}>
+                        <p className="text-gray-600 dark:text-white">
+                          {t("plus_more", { count: recurringStrings.length - 5 })}
+                        </p>
+                      </Tooltip>
+                    </div>
+                  )}
+                </div>
+              </div>
+              {eventTypeDetail.isWeb3Active && eventType.metadata.smartContractAddress && (
+                <p className="text-bookinglight mb-1 -ml-2 px-2 py-1">
+                  {t("requires_ownership_of_a_token") + " " + eventType.metadata.smartContractAddress}
+                </p>
+              )}
+              {booking?.startTime && rescheduleUid && (
+                <div>
+                  <p className="mt-8 mb-2 text-gray-600 dark:text-white" data-testid="former_time_p">
+                    {t("former_time")}
+                  </p>
+                  <p className="text-gray-500 line-through dark:text-white">
+                    <CalendarIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                    {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
+                  </p>
+                </div>
+              )}
+            </div>
+            <div className="sm:w-1/2 sm:pl-8 sm:pr-4">
+              <Form form={bookingForm} handleSubmit={bookEvent}>
+                <div className="mb-4">
+                  <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-white">
+                    {t("your_name")}
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      {...bookingForm.register("name", { required: true })}
+                      type="text"
+                      name="name"
+                      id="name"
+                      required
+                      className={inputClassName}
+                      placeholder={t("example_name")}
+                      disabled={disableInput}
+                    />
                   </div>
-                )}
-                <div className="text-bookinghighlight mb-4 flex">
-                  <CalendarIcon className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
-                  <div className="-mt-1">
-                    {(rescheduleUid || !eventType.recurringEvent?.freq) &&
-                      parseDate(dayjs(date).tz(timeZone()), i18n)}
-                    {!rescheduleUid &&
-                      eventType.recurringEvent?.freq &&
-                      recurringStrings.slice(0, 5).map((aDate, key) => <p key={key}>{aDate}</p>)}
-                    {!rescheduleUid && eventType.recurringEvent?.freq && recurringStrings.length > 5 && (
-                      <div className="flex">
-                        <Tooltip
-                          content={recurringStrings.slice(5).map((aDate, key) => (
-                            <p key={key}>{aDate}</p>
-                          ))}>
-                          <p className="text-gray-600 dark:text-white">
-                            {t("plus_more", { count: recurringStrings.length - 5 })}
-                          </p>
-                        </Tooltip>
+                </div>
+                <div className="mb-4">
+                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-white">
+                    {t("email_address")}
+                  </label>
+                  <div className="mt-1">
+                    <EmailInput
+                      {...bookingForm.register("email")}
+                      required
+                      className={classNames(
+                        inputClassName,
+                        bookingForm.formState.errors.email
+                          ? "border-red-700 focus:ring-red-700"
+                          : " border-gray-300  dark:border-gray-900"
+                      )}
+                      placeholder="you@example.com"
+                      type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...)
+                      disabled={disableInput}
+                    />
+                    {bookingForm.formState.errors.email && (
+                      <div className="mt-2 flex items-center text-sm text-red-700 ">
+                        <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                        <p>{t("email_validation_error")}</p>
                       </div>
                     )}
                   </div>
                 </div>
-                {eventTypeDetail.isWeb3Active && eventType.metadata.smartContractAddress && (
-                  <p className="text-bookinglight mb-1 -ml-2 px-2 py-1">
-                    {t("requires_ownership_of_a_token") + " " + eventType.metadata.smartContractAddress}
-                  </p>
-                )}
-                {booking?.startTime && rescheduleUid && (
-                  <div>
-                    <p className="mt-8 mb-2 text-gray-600 dark:text-white" data-testid="former_time_p">
-                      {t("former_time")}
-                    </p>
-                    <p className="text-gray-500 line-through dark:text-white">
-                      <CalendarIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                      {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
-                    </p>
-                  </div>
-                )}
-              </div>
-              <div className="sm:w-1/2 sm:pl-8 sm:pr-4">
-                <Form form={bookingForm} handleSubmit={bookEvent}>
+                {locations.length > 1 && (
                   <div className="mb-4">
-                    <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-white">
-                      {t("your_name")}
-                    </label>
-                    <div className="mt-1">
-                      <input
-                        {...bookingForm.register("name", { required: true })}
-                        type="text"
-                        name="name"
-                        id="name"
-                        required
-                        className={inputClassName}
-                        placeholder={t("example_name")}
-                        disabled={disableInput}
-                      />
-                    </div>
+                    <span className="block text-sm font-medium text-gray-700 dark:text-white">
+                      {t("location")}
+                    </span>
+                    {locations.map((location, i) => (
+                      <label key={i} className="block">
+                        <input
+                          type="radio"
+                          className="location h-4 w-4 border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
+                          {...bookingForm.register("locationType", { required: true })}
+                          value={location.type}
+                          defaultChecked={selectedLocation === location.type}
+                        />
+                        <span className="text-sm ltr:ml-2 rtl:mr-2 dark:text-gray-500">
+                          {locationLabels[location.type]}
+                        </span>
+                      </label>
+                    ))}
                   </div>
+                )}
+                {selectedLocation === LocationType.Phone && (
                   <div className="mb-4">
                     <label
-                      htmlFor="email"
+                      htmlFor="phone"
                       className="block text-sm font-medium text-gray-700 dark:text-white">
-                      {t("email_address")}
+                      {t("phone_number")}
                     </label>
                     <div className="mt-1">
-                      <EmailInput
-                        {...bookingForm.register("email")}
+                      <PhoneInput<BookingFormValues>
+                        control={bookingForm.control}
+                        name="phone"
+                        placeholder={t("enter_phone_number")}
+                        id="phone"
                         required
-                        className={classNames(
-                          inputClassName,
-                          bookingForm.formState.errors.email
-                            ? "border-red-700 focus:ring-red-700"
-                            : " border-gray-300  dark:border-gray-900"
-                        )}
-                        placeholder="you@example.com"
-                        type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...)
                         disabled={disableInput}
                       />
-                      {bookingForm.formState.errors.email && (
-                        <div className="mt-2 flex items-center text-sm text-red-700 ">
-                          <ExclamationCircleIcon className="mr-2 h-3 w-3" />
-                          <p>{t("email_validation_error")}</p>
-                        </div>
-                      )}
                     </div>
-                  </div>
-                  {locations.length > 1 && (
-                    <div className="mb-4">
-                      <span className="block text-sm font-medium text-gray-700 dark:text-white">
-                        {t("location")}
-                      </span>
-                      {locations.map((location, i) => (
-                        <label key={i} className="block">
-                          <input
-                            type="radio"
-                            className="location h-4 w-4 border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
-                            {...bookingForm.register("locationType", { required: true })}
-                            value={location.type}
-                            defaultChecked={selectedLocation === location.type}
-                          />
-                          <span className="text-sm ltr:ml-2 rtl:mr-2 dark:text-gray-500">
-                            {locationLabels[location.type]}
-                          </span>
-                        </label>
-                      ))}
-                    </div>
-                  )}
-                  {selectedLocation === LocationType.Phone && (
-                    <div className="mb-4">
-                      <label
-                        htmlFor="phone"
-                        className="block text-sm font-medium text-gray-700 dark:text-white">
-                        {t("phone_number")}
-                      </label>
-                      <div className="mt-1">
-                        <PhoneInput<BookingFormValues>
-                          control={bookingForm.control}
-                          name="phone"
-                          placeholder={t("enter_phone_number")}
-                          id="phone"
-                          required
-                          disabled={disableInput}
-                        />
+                    {bookingForm.formState.errors.phone && (
+                      <div className="mt-2 flex items-center text-sm text-red-700 ">
+                        <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                        <p>{t("invalid_number")}</p>
                       </div>
-                      {bookingForm.formState.errors.phone && (
-                        <div className="mt-2 flex items-center text-sm text-red-700 ">
-                          <ExclamationCircleIcon className="mr-2 h-3 w-3" />
-                          <p>{t("invalid_number")}</p>
-                        </div>
+                    )}
+                  </div>
+                )}
+                {eventType.customInputs
+                  .sort((a, b) => a.id - b.id)
+                  .map((input) => (
+                    <div className="mb-4" key={input.id}>
+                      {input.type !== EventTypeCustomInputType.BOOL && (
+                        <label
+                          htmlFor={"custom_" + input.id}
+                          className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
+                          {input.label}
+                        </label>
                       )}
-                    </div>
-                  )}
-                  {eventType.customInputs
-                    .sort((a, b) => a.id - b.id)
-                    .map((input) => (
-                      <div className="mb-4" key={input.id}>
-                        {input.type !== EventTypeCustomInputType.BOOL && (
+                      {input.type === EventTypeCustomInputType.TEXTLONG && (
+                        <textarea
+                          {...bookingForm.register(`customInputs.${input.id}`, {
+                            required: input.required,
+                          })}
+                          id={"custom_" + input.id}
+                          rows={3}
+                          className={inputClassName}
+                          placeholder={input.placeholder}
+                          disabled={disabledExceptForOwner}
+                        />
+                      )}
+                      {input.type === EventTypeCustomInputType.TEXT && (
+                        <input
+                          type="text"
+                          {...bookingForm.register(`customInputs.${input.id}`, {
+                            required: input.required,
+                          })}
+                          id={"custom_" + input.id}
+                          className={inputClassName}
+                          placeholder={input.placeholder}
+                          disabled={disabledExceptForOwner}
+                        />
+                      )}
+                      {input.type === EventTypeCustomInputType.NUMBER && (
+                        <input
+                          type="number"
+                          {...bookingForm.register(`customInputs.${input.id}`, {
+                            required: input.required,
+                          })}
+                          id={"custom_" + input.id}
+                          className={inputClassName}
+                          placeholder=""
+                          disabled={disabledExceptForOwner}
+                        />
+                      )}
+                      {input.type === EventTypeCustomInputType.BOOL && (
+                        <div className="flex h-5 items-center">
+                          <input
+                            type="checkbox"
+                            {...bookingForm.register(`customInputs.${input.id}`, {
+                              required: input.required,
+                            })}
+                            id={"custom_" + input.id}
+                            className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black disabled:bg-gray-200 ltr:mr-2 rtl:ml-2 disabled:dark:text-gray-500"
+                            placeholder=""
+                            disabled={disabledExceptForOwner}
+                          />
                           <label
                             htmlFor={"custom_" + input.id}
                             className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
                             {input.label}
                           </label>
-                        )}
-                        {input.type === EventTypeCustomInputType.TEXTLONG && (
-                          <textarea
-                            {...bookingForm.register(`customInputs.${input.id}`, {
-                              required: input.required,
-                            })}
-                            id={"custom_" + input.id}
-                            rows={3}
-                            className={inputClassName}
-                            placeholder={input.placeholder}
-                            disabled={disabledExceptForOwner}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                {!eventType.disableGuests && (
+                  <div className="mb-4">
+                    {!guestToggle && (
+                      <label
+                        onClick={() => setGuestToggle(!guestToggle)}
+                        htmlFor="guests"
+                        className="mb-1 block text-sm font-medium hover:cursor-pointer dark:text-white">
+                        {/*<UserAddIcon className="inline-block w-5 h-5 mr-1 -mt-1" />*/}
+                        {t("additional_guests")}
+                      </label>
+                    )}
+                    {guestToggle && (
+                      <div>
+                        <label
+                          htmlFor="guests"
+                          className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
+                          {t("guests")}
+                        </label>
+                        {!disableInput && (
+                          <Controller
+                            control={bookingForm.control}
+                            name="guests"
+                            render={({ field: { onChange, value } }) => (
+                              <ReactMultiEmail
+                                className="relative"
+                                placeholder="guest@example.com"
+                                emails={value}
+                                onChange={onChange}
+                                getLabel={(
+                                  email: string,
+                                  index: number,
+                                  removeEmail: (index: number) => void
+                                ) => {
+                                  return (
+                                    <div data-tag key={index} className="cursor-pointer">
+                                      {email}
+                                      {!disableInput && (
+                                        <span data-tag-handle onClick={() => removeEmail(index)}>
+                                          ×
+                                        </span>
+                                      )}
+                                    </div>
+                                  );
+                                }}
+                              />
+                            )}
                           />
                         )}
-                        {input.type === EventTypeCustomInputType.TEXT && (
-                          <input
-                            type="text"
-                            {...bookingForm.register(`customInputs.${input.id}`, {
-                              required: input.required,
+                        {/* Custom code when guest emails should not be editable */}
+                        {disableInput && guestListEmails && guestListEmails.length > 0 && (
+                          <div data-tag className="react-multi-email">
+                            {/* // @TODO: user owners are appearing as guest here when should be only user input */}
+                            {guestListEmails.map((email, index) => {
+                              return (
+                                <div key={index} className="cursor-pointer">
+                                  <span data-tag>{email}</span>
+                                </div>
+                              );
                             })}
-                            id={"custom_" + input.id}
-                            className={inputClassName}
-                            placeholder={input.placeholder}
-                            disabled={disabledExceptForOwner}
-                          />
-                        )}
-                        {input.type === EventTypeCustomInputType.NUMBER && (
-                          <input
-                            type="number"
-                            {...bookingForm.register(`customInputs.${input.id}`, {
-                              required: input.required,
-                            })}
-                            id={"custom_" + input.id}
-                            className={inputClassName}
-                            placeholder=""
-                            disabled={disabledExceptForOwner}
-                          />
-                        )}
-                        {input.type === EventTypeCustomInputType.BOOL && (
-                          <div className="flex h-5 items-center">
-                            <input
-                              type="checkbox"
-                              {...bookingForm.register(`customInputs.${input.id}`, {
-                                required: input.required,
-                              })}
-                              id={"custom_" + input.id}
-                              className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black disabled:bg-gray-200 ltr:mr-2 rtl:ml-2 disabled:dark:text-gray-500"
-                              placeholder=""
-                              disabled={disabledExceptForOwner}
-                            />
-                            <label
-                              htmlFor={"custom_" + input.id}
-                              className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
-                              {input.label}
-                            </label>
                           </div>
                         )}
                       </div>
-                    ))}
-                  {!eventType.disableGuests && (
-                    <div className="mb-4">
-                      {!guestToggle && (
-                        <label
-                          onClick={() => setGuestToggle(!guestToggle)}
-                          htmlFor="guests"
-                          className="mb-1 block text-sm font-medium hover:cursor-pointer dark:text-white">
-                          {/*<UserAddIcon className="inline-block w-5 h-5 mr-1 -mt-1" />*/}
-                          {t("additional_guests")}
-                        </label>
-                      )}
-                      {guestToggle && (
-                        <div>
-                          <label
-                            htmlFor="guests"
-                            className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
-                            {t("guests")}
-                          </label>
-                          {!disableInput && (
-                            <Controller
-                              control={bookingForm.control}
-                              name="guests"
-                              render={({ field: { onChange, value } }) => (
-                                <ReactMultiEmail
-                                  className="relative"
-                                  placeholder="guest@example.com"
-                                  emails={value}
-                                  onChange={onChange}
-                                  getLabel={(
-                                    email: string,
-                                    index: number,
-                                    removeEmail: (index: number) => void
-                                  ) => {
-                                    return (
-                                      <div data-tag key={index} className="cursor-pointer">
-                                        {email}
-                                        {!disableInput && (
-                                          <span data-tag-handle onClick={() => removeEmail(index)}>
-                                            ×
-                                          </span>
-                                        )}
-                                      </div>
-                                    );
-                                  }}
-                                />
-                              )}
-                            />
-                          )}
-                          {/* Custom code when guest emails should not be editable */}
-                          {disableInput && guestListEmails && guestListEmails.length > 0 && (
-                            <div data-tag className="react-multi-email">
-                              {/* // @TODO: user owners are appearing as guest here when should be only user input */}
-                              {guestListEmails.map((email, index) => {
-                                return (
-                                  <div key={index} className="cursor-pointer">
-                                    <span data-tag>{email}</span>
-                                  </div>
-                                );
-                              })}
-                            </div>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                  {isSmsReminderNumberNeeded && selectedLocation !== LocationType.Phone && (
-                    <div className="mb-4">
-                      <label
-                        htmlFor="smsReminderNumber"
-                        className="block text-sm font-medium text-gray-700 dark:text-white">
-                        {t("number_for_sms_reminders")}
-                      </label>
-                      <div className="mt-1">
-                        <PhoneInput<BookingFormValues>
-                          control={bookingForm.control}
-                          name="smsReminderNumber"
-                          placeholder={t("enter_phone_number")}
-                          id="smsReminderNumber"
-                          required
-                          disabled={disableInput}
-                        />
-                      </div>
-                      {bookingForm.formState.errors.smsReminderNumber && (
-                        <div className="mt-2 flex items-center text-sm text-red-700 ">
-                          <ExclamationCircleIcon className="mr-2 h-3 w-3" />
-                          <p>{t("invalid_number")}</p>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                  <div className="mb-4">
-                    <label
-                      htmlFor="notes"
-                      className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
-                      {rescheduleUid ? t("reschedule_optional") : t("additional_notes")}
-                    </label>
-                    {rescheduleUid ? (
-                      <textarea
-                        {...bookingForm.register("rescheduleReason")}
-                        id="rescheduleReason"
-                        name="rescheduleReason"
-                        rows={3}
-                        className={inputClassName}
-                        placeholder={t("reschedule_placeholder")}
-                        disabled={disabledExceptForOwner}
-                      />
-                    ) : (
-                      <textarea
-                        {...bookingForm.register("notes")}
-                        id="notes"
-                        name="notes"
-                        rows={3}
-                        className={inputClassName}
-                        placeholder={t("share_additional_notes")}
-                        disabled={disabledExceptForOwner}
-                      />
                     )}
                   </div>
-
-                  <div className="flex items-start space-x-2 rtl:space-x-reverse">
-                    <Button
-                      type="submit"
-                      data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
-                      loading={mutation.isLoading || recurringMutation.isLoading}>
-                      {rescheduleUid ? t("reschedule") : t("confirm")}
-                    </Button>
-                    <Button color="secondary" type="button" onClick={() => router.back()}>
-                      {t("cancel")}
-                    </Button>
-                  </div>
-                </Form>
-                {(mutation.isError || recurringMutation.isError) && (
-                  <ErrorMessage error={mutation.error || recurringMutation.error} />
                 )}
-              </div>
+                {isSmsReminderNumberNeeded && selectedLocation !== LocationType.Phone && (
+                  <div className="mb-4">
+                    <label
+                      htmlFor="smsReminderNumber"
+                      className="block text-sm font-medium text-gray-700 dark:text-white">
+                      {t("number_for_sms_reminders")}
+                    </label>
+                    <div className="mt-1">
+                      <PhoneInput<BookingFormValues>
+                        control={bookingForm.control}
+                        name="smsReminderNumber"
+                        placeholder={t("enter_phone_number")}
+                        id="smsReminderNumber"
+                        required
+                        disabled={disableInput}
+                      />
+                    </div>
+                    {bookingForm.formState.errors.smsReminderNumber && (
+                      <div className="mt-2 flex items-center text-sm text-red-700 ">
+                        <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                        <p>{t("invalid_number")}</p>
+                      </div>
+                    )}
+                  </div>
+                )}
+                <div className="mb-4">
+                  <label
+                    htmlFor="notes"
+                    className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
+                    {rescheduleUid ? t("reschedule_optional") : t("additional_notes")}
+                  </label>
+                  {rescheduleUid ? (
+                    <textarea
+                      {...bookingForm.register("rescheduleReason")}
+                      id="rescheduleReason"
+                      name="rescheduleReason"
+                      rows={3}
+                      className={inputClassName}
+                      placeholder={t("reschedule_placeholder")}
+                      disabled={disabledExceptForOwner}
+                    />
+                  ) : (
+                    <textarea
+                      {...bookingForm.register("notes")}
+                      id="notes"
+                      name="notes"
+                      rows={3}
+                      className={inputClassName}
+                      placeholder={t("share_additional_notes")}
+                      disabled={disabledExceptForOwner}
+                    />
+                  )}
+                </div>
+
+                <div className="flex items-start space-x-2 rtl:space-x-reverse">
+                  <Button
+                    type="submit"
+                    data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
+                    loading={mutation.isLoading || recurringMutation.isLoading}>
+                    {rescheduleUid ? t("reschedule") : t("confirm")}
+                  </Button>
+                  <Button color="secondary" type="button" onClick={() => router.back()}>
+                    {t("cancel")}
+                  </Button>
+                </div>
+              </Form>
+              {(mutation.isError || recurringMutation.isError) && (
+                <ErrorMessage error={mutation.error || recurringMutation.error} />
+              )}
             </div>
           </div>
-        )}
+        </div>
       </main>
     </div>
   );
diff --git a/apps/web/ee/components/stripe/PaymentPage.tsx b/apps/web/ee/components/stripe/PaymentPage.tsx
index c29b9cb9a8..895a5eedc5 100644
--- a/apps/web/ee/components/stripe/PaymentPage.tsx
+++ b/apps/web/ee/components/stripe/PaymentPage.tsx
@@ -21,7 +21,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
   const { t } = useLocale();
   const [is24h, setIs24h] = useState(isBrowserLocale24h());
   const [date, setDate] = useState(dayjs.utc(props.booking.startTime));
-  const { isReady, Theme } = useTheme(props.profile.theme);
+  useTheme(props.profile.theme);
   const isEmbed = useIsEmbed();
   useEffect(() => {
     let embedIframeWidth = 0;
@@ -48,9 +48,8 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
 
   const eventName = props.booking.title;
 
-  return isReady ? (
+  return (
     <div className="h-screen">
-      <Theme />
       <Head>
         <title>
           {t("payment")} | {eventName} | Cal.com
@@ -151,7 +150,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
         </div>
       </main>
     </div>
-  ) : null;
+  );
 };
 
 export default PaymentPage;
diff --git a/apps/web/lib/app-providers.tsx b/apps/web/lib/app-providers.tsx
index d5cf8226d8..3422797f64 100644
--- a/apps/web/lib/app-providers.tsx
+++ b/apps/web/lib/app-providers.tsx
@@ -15,7 +15,7 @@ const I18nextAdapter = appWithTranslation<NextJsAppProps & { children: React.Rea
 
 // Workaround for https://github.com/vercel/next.js/issues/8592
 export type AppProps = Omit<NextAppProps, "Component"> & {
-  Component: NextAppProps["Component"] & { requiresLicense?: boolean };
+  Component: NextAppProps["Component"] & { requiresLicense?: boolean; isThemeSupported?: boolean };
   /** Will be defined only is there was an error */
   err?: Error;
 };
diff --git a/apps/web/lib/hooks/useTheme.tsx b/apps/web/lib/hooks/useTheme.tsx
index d7891ba41d..83d7f95534 100644
--- a/apps/web/lib/hooks/useTheme.tsx
+++ b/apps/web/lib/hooks/useTheme.tsx
@@ -1,57 +1,25 @@
-import Head from "next/head";
-import { useEffect, useState } from "react";
+import { useTheme as useNextTheme } from "next-themes";
+import { useEffect } from "react";
 
 import { useEmbedTheme } from "@calcom/embed-core/embed-iframe";
 import { Maybe } from "@calcom/trpc/server";
 
-// This method is stringified and executed only on client. So,
-// - Pass all the params explicitly to this method. Don't use closure
-function applyThemeAndAddListener(theme: string) {
-  const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
-  const applyTheme = function (theme: string, darkMatch: boolean) {
-    if (!theme) {
-      if (darkMatch) {
-        document.documentElement.classList.add("dark");
-      } else {
-        document.documentElement.classList.remove("dark");
-      }
-    } else {
-      document.documentElement.classList.remove("dark");
-      document.documentElement.classList.remove("light");
-      document.documentElement.classList.add(theme);
-    }
-  };
-  mediaQueryList.onchange = function (e) {
-    applyTheme(theme, e.matches);
-  };
-  applyTheme(theme, mediaQueryList.matches);
-}
-
 // makes sure the ui doesn't flash
 export default function useTheme(theme?: Maybe<string>) {
-  const [isReady, setIsReady] = useState(false);
+  theme = theme || "system";
+  const { theme: currentTheme, setTheme } = useNextTheme();
   const embedTheme = useEmbedTheme();
   // Embed UI configuration takes more precedence over App Configuration
   theme = embedTheme || theme;
-  const [_theme, setTheme] = useState<Maybe<string>>(theme);
-  useEffect(() => {
-    // TODO: isReady doesn't seem required now. This is also impacting PSI Score for pages which are using isReady.
-    setIsReady(true);
-    setTheme(theme);
-  }, [theme]);
 
-  function Theme() {
-    const code = applyThemeAndAddListener.toString();
-    const themeStr = _theme ? `"${_theme}"` : null;
-    return (
-      <Head>
-        <script dangerouslySetInnerHTML={{ __html: `(${code})(${themeStr})` }} />
-      </Head>
-    );
-  }
+  useEffect(() => {
+    if (theme) {
+      setTheme(theme);
+    }
+  }, [theme, setTheme]);
 
   return {
-    isReady,
-    Theme,
+    currentTheme,
+    setTheme,
   };
 }
diff --git a/apps/web/package.json b/apps/web/package.json
index b84bb6d488..d323cfc72e 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -86,6 +86,7 @@
     "next-i18next": "^11.0.0",
     "next-mdx-remote": "^4.0.3",
     "next-seo": "^4.26.0",
+    "next-themes": "^0.2.0",
     "next-transpile-modules": "^9.0.0",
     "nock": "^13.2.8",
     "nodemailer": "^6.7.5",
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 9d2d51f063..b6a40e95b2 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -48,7 +48,7 @@ interface EvtsToVerify {
 export default function User(props: inferSSRProps<typeof getServerSideProps>) {
   const { users, profile, eventTypes, isDynamicGroup, dynamicNames, dynamicUsernames, isSingleUser } = props;
   const [user] = users; //To be used when we only have a single user, not dynamic group
-  const { Theme } = useTheme(user.theme);
+  useTheme(user.theme);
   const { t } = useLocale();
   const router = useRouter();
 
@@ -113,7 +113,6 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
 
   return (
     <>
-      <Theme />
       <HeadSeo
         title={isDynamicGroup ? dynamicNames.join(", ") : nameOrUsername}
         description={
@@ -224,6 +223,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
     </>
   );
 }
+User.isThemeSupported = true;
 
 const getEventTypesWithHiddenFromDB = async (userId: number, plan: UserPlan) => {
   return await prisma.eventType.findMany({
diff --git a/apps/web/pages/[user]/[type].tsx b/apps/web/pages/[user]/[type].tsx
index 8e10993163..5598a1971c 100644
--- a/apps/web/pages/[user]/[type].tsx
+++ b/apps/web/pages/[user]/[type].tsx
@@ -54,6 +54,8 @@ export default function Type(props: AvailabilityPageProps) {
   );
 }
 
+Type.isThemeSupported = true;
+
 async function getUserPageProps(context: GetStaticPropsContext) {
   const { type: slug, user: username } = paramsSchema.parse(context.params);
   const { ssgInit } = await import("@server/lib/ssg");
diff --git a/apps/web/pages/[user]/book.tsx b/apps/web/pages/[user]/book.tsx
index 274715328c..2366f38210 100644
--- a/apps/web/pages/[user]/book.tsx
+++ b/apps/web/pages/[user]/book.tsx
@@ -61,6 +61,8 @@ export default function Book(props: BookPageProps) {
   );
 }
 
+Book.isThemeSupported = true;
+
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const ssr = await ssrInit(context);
   const usernameList = getUsernameList(asStringOrThrow(context.query.user as string));
diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
index 55126806d4..f941d9df3f 100644
--- a/apps/web/pages/_app.tsx
+++ b/apps/web/pages/_app.tsx
@@ -1,5 +1,6 @@
 import { EventCollectionProvider } from "next-collect/client";
 import { DefaultSeo } from "next-seo";
+import { ThemeProvider } from "next-themes";
 import Head from "next/head";
 import superjson from "superjson";
 
@@ -27,13 +28,13 @@ import "../styles/globals.css";
 function MyApp(props: AppProps) {
   const { Component, pageProps, err, router } = props;
   let pageStatus = "200";
-  const { Theme } = useTheme("light");
 
   if (router.pathname === "/404") {
     pageStatus = "404";
   } else if (router.pathname === "/500") {
     pageStatus = "500";
   }
+  const forcedTheme = Component.isThemeSupported ? undefined : "light";
   return (
     <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
       <ContractsProvider>
@@ -44,14 +45,16 @@ function MyApp(props: AppProps) {
             <script dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }} />
             <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
           </Head>
-          <Theme />
-          {Component.requiresLicense ? (
-            <LicenseRequired>
+          {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
+          <ThemeProvider enableColorScheme={false} forcedTheme={forcedTheme} attribute="class">
+            {Component.requiresLicense ? (
+              <LicenseRequired>
+                <Component {...pageProps} err={err} />
+              </LicenseRequired>
+            ) : (
               <Component {...pageProps} err={err} />
-            </LicenseRequired>
-          ) : (
-            <Component {...pageProps} err={err} />
-          )}
+            )}
+          </ThemeProvider>
         </AppProviders>
       </ContractsProvider>
     </EventCollectionProvider>
diff --git a/apps/web/pages/apps/[slug]/[...pages].tsx b/apps/web/pages/apps/[slug]/[...pages].tsx
index 07a88fe946..71681ea0fc 100644
--- a/apps/web/pages/apps/[slug]/[...pages].tsx
+++ b/apps/web/pages/apps/[slug]/[...pages].tsx
@@ -59,6 +59,8 @@ export default function AppPage(props: inferSSRProps<typeof getServerSideProps>)
   return <route.Component {...componentProps} />;
 }
 
+AppPage.isThemeSupported = true;
+
 export async function getServerSideProps(
   context: GetServerSidePropsContext<{
     slug: string;
diff --git a/apps/web/pages/d/[link]/[slug].tsx b/apps/web/pages/d/[link]/[slug].tsx
index 9ddd5d942e..158702fe72 100644
--- a/apps/web/pages/d/[link]/[slug].tsx
+++ b/apps/web/pages/d/[link]/[slug].tsx
@@ -20,6 +20,7 @@ export type DynamicAvailabilityPageProps = inferSSRProps<typeof getServerSidePro
 export default function Type(props: DynamicAvailabilityPageProps) {
   return <AvailabilityPage {...props} />;
 }
+Type.isThemeSupported = true;
 
 const querySchema = z.object({
   link: z.string().optional().default(""),
diff --git a/apps/web/pages/d/[link]/book.tsx b/apps/web/pages/d/[link]/book.tsx
index db6a20125d..b9f6102a46 100644
--- a/apps/web/pages/d/[link]/book.tsx
+++ b/apps/web/pages/d/[link]/book.tsx
@@ -23,6 +23,8 @@ export default function Book(props: HashLinkPageProps) {
   return <BookingPage {...props} locationLabels={locationLabels} />;
 }
 
+Book.isThemeSupported = true;
+
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const ssr = await ssrInit(context);
   const link = asStringOrThrow(context.query.link as string);
diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx
index 8e03816d91..88040791ae 100644
--- a/apps/web/pages/success.tsx
+++ b/apps/web/pages/success.tsx
@@ -249,340 +249,334 @@ export default function Success(props: SuccessProps) {
     return t("emailed_you_and_attendees" + titleSuffix);
   }
   const userIsOwner = !!(session?.user?.id && eventType.users.find((user) => (user.id = session.user.id)));
-  const { isReady, Theme } = useTheme(isSuccessBookingPage ? props.profile.theme : "light");
+  useTheme(isSuccessBookingPage ? props.profile.theme : "light");
   const title = t(
     `booking_${needsConfirmation ? "submitted" : "confirmed"}${props.recurringBookings ? "_recurring" : ""}`
   );
   const customInputs = bookingInfo?.customInputs;
   return (
-    (isReady && (
-      <div
-        className={isEmbed ? "" : "h-screen bg-neutral-100 dark:bg-neutral-900"}
-        data-testid="success-page">
-        {userIsOwner && !isEmbed && (
-          <div className="mt-2 ml-4 -mb-4">
-            <Link href={eventType.recurringEvent?.count ? "/bookings/recurring" : "/bookings/upcoming"}>
-              <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
-                <ChevronLeftIcon className="h-5 w-5" /> {t("back_to_bookings")}
-              </a>
-            </Link>
-          </div>
-        )}
-        <Theme />
-        <HeadSeo title={title} description={title} />
-        <CustomBranding lightVal={props.profile.brandColor} darkVal={props.profile.darkBrandColor} />
-        <main className={classNames(shouldAlignCentrally ? "mx-auto" : "", isEmbed ? "" : "max-w-3xl")}>
-          <div className={classNames("overflow-y-auto", isEmbed ? "" : "z-50 ")}>
-            {isSuccessRedirectAvailable(eventType) && eventType.successRedirectUrl ? (
-              <RedirectionToast url={eventType.successRedirectUrl} />
-            ) : null}{" "}
+    <div className={isEmbed ? "" : "h-screen bg-neutral-100 dark:bg-neutral-900"} data-testid="success-page">
+      {userIsOwner && !isEmbed && (
+        <div className="mt-2 ml-4 -mb-4">
+          <Link href={eventType.recurringEvent?.count ? "/bookings/recurring" : "/bookings/upcoming"}>
+            <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
+              <ChevronLeftIcon className="h-5 w-5" /> {t("back_to_bookings")}
+            </a>
+          </Link>
+        </div>
+      )}
+      <HeadSeo title={title} description={title} />
+      <CustomBranding lightVal={props.profile.brandColor} darkVal={props.profile.darkBrandColor} />
+      <main className={classNames(shouldAlignCentrally ? "mx-auto" : "", isEmbed ? "" : "max-w-3xl")}>
+        <div className={classNames("overflow-y-auto", isEmbed ? "" : "z-50 ")}>
+          {isSuccessRedirectAvailable(eventType) && eventType.successRedirectUrl ? (
+            <RedirectionToast url={eventType.successRedirectUrl} />
+          ) : null}{" "}
+          <div
+            className={classNames(
+              shouldAlignCentrally ? "text-center" : "",
+              "flex items-end justify-center px-4 pt-4 pb-20  sm:block sm:p-0"
+            )}>
             <div
-              className={classNames(
-                shouldAlignCentrally ? "text-center" : "",
-                "flex items-end justify-center px-4 pt-4 pb-20  sm:block sm:p-0"
-              )}>
+              className={classNames("my-4 transition-opacity sm:my-0", isEmbed ? "" : " inset-0")}
+              aria-hidden="true">
               <div
-                className={classNames("my-4 transition-opacity sm:my-0", isEmbed ? "" : " inset-0")}
-                aria-hidden="true">
-                <div
-                  className={classNames(
-                    "inline-block transform overflow-hidden rounded-md border sm:my-8 sm:max-w-lg",
-                    isBackgroundTransparent ? "" : "bg-white dark:border-neutral-700 dark:bg-gray-800",
-                    "px-8 pt-5 pb-4 text-left align-bottom transition-all sm:w-full  sm:py-6 sm:align-middle"
-                  )}
-                  role="dialog"
-                  aria-modal="true"
-                  aria-labelledby="modal-headline">
-                  <div>
-                    <div
-                      className={classNames(
-                        "mx-auto flex items-center justify-center",
-                        !giphyImage && !isCancelled ? "h-12 w-12 rounded-full bg-green-100" : "",
-                        isCancelled ? "h-12 w-12 rounded-full bg-red-100" : ""
-                      )}>
-                      {giphyImage && !needsConfirmation && (
-                        // eslint-disable-next-line @next/next/no-img-element
-                        <img src={giphyImage} alt="Gif from Giphy" />
-                      )}
-                      {!giphyImage && !needsConfirmation && !isCancelled && (
-                        <CheckIcon className="h-8 w-8 text-green-600" />
-                      )}
-                      {needsConfirmation && !isCancelled && <ClockIcon className="h-8 w-8 text-green-600" />}
-                      {isCancelled && <XIcon className="h-8 w-8 text-red-600" />}
+                className={classNames(
+                  "inline-block transform overflow-hidden rounded-md border sm:my-8 sm:max-w-lg",
+                  isBackgroundTransparent ? "" : "bg-white dark:border-neutral-700 dark:bg-gray-800",
+                  "px-8 pt-5 pb-4 text-left align-bottom transition-all sm:w-full  sm:py-6 sm:align-middle"
+                )}
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby="modal-headline">
+                <div>
+                  <div
+                    className={classNames(
+                      "mx-auto flex items-center justify-center",
+                      !giphyImage && !isCancelled ? "h-12 w-12 rounded-full bg-green-100" : "",
+                      isCancelled ? "h-12 w-12 rounded-full bg-red-100" : ""
+                    )}>
+                    {giphyImage && !needsConfirmation && (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img src={giphyImage} alt="Gif from Giphy" />
+                    )}
+                    {!giphyImage && !needsConfirmation && !isCancelled && (
+                      <CheckIcon className="h-8 w-8 text-green-600" />
+                    )}
+                    {needsConfirmation && !isCancelled && <ClockIcon className="h-8 w-8 text-green-600" />}
+                    {isCancelled && <XIcon className="h-8 w-8 text-red-600" />}
+                  </div>
+                  <div className="mt-3 text-center sm:mt-5">
+                    <h3
+                      className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white"
+                      id="modal-headline">
+                      {needsConfirmation && !isCancelled
+                        ? props.recurringBookings
+                          ? t("submitted_recurring")
+                          : t("submitted")
+                        : isCancelled
+                        ? t("event_cancelled")
+                        : props.recurringBookings
+                        ? t("meeting_is_scheduled_recurring")
+                        : t("meeting_is_scheduled")}
+                    </h3>
+                    <div className="mt-3">
+                      <p className="text-sm text-neutral-600 dark:text-gray-300">{getTitle()}</p>
                     </div>
-                    <div className="mt-3 text-center sm:mt-5">
-                      <h3
-                        className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white"
-                        id="modal-headline">
-                        {needsConfirmation && !isCancelled
-                          ? props.recurringBookings
-                            ? t("submitted_recurring")
-                            : t("submitted")
-                          : isCancelled
-                          ? t("event_cancelled")
-                          : props.recurringBookings
-                          ? t("meeting_is_scheduled_recurring")
-                          : t("meeting_is_scheduled")}
-                      </h3>
-                      <div className="mt-3">
-                        <p className="text-sm text-neutral-600 dark:text-gray-300">{getTitle()}</p>
+                    <div className="border-bookinglightest text-bookingdark mt-4 grid grid-cols-3 border-t border-b py-4 text-left dark:border-gray-900 dark:text-gray-300">
+                      <div className="font-medium">{t("what")}</div>
+                      <div className="col-span-2 mb-6">{eventName}</div>
+                      <div className="font-medium">{t("when")}</div>
+                      <div className="col-span-2 mb-6">
+                        <RecurringBookings
+                          eventType={props.eventType}
+                          recurringBookings={props.recurringBookings}
+                          listingStatus={(listingStatus as string) || "recurring"}
+                          date={date}
+                          is24h={is24h}
+                        />
                       </div>
-                      <div className="border-bookinglightest text-bookingdark mt-4 grid grid-cols-3 border-t border-b py-4 text-left dark:border-gray-900 dark:text-gray-300">
-                        <div className="font-medium">{t("what")}</div>
-                        <div className="col-span-2 mb-6">{eventName}</div>
-                        <div className="font-medium">{t("when")}</div>
-                        <div className="col-span-2 mb-6">
-                          <RecurringBookings
-                            eventType={props.eventType}
-                            recurringBookings={props.recurringBookings}
-                            listingStatus={(listingStatus as string) || "recurring"}
-                            date={date}
-                            is24h={is24h}
-                          />
-                        </div>
-                        {(bookingInfo?.user || bookingInfo?.attendees) && (
-                          <>
-                            <div className="font-medium">{t("who")}</div>
-                            <div className="col-span-2 mb-6">
-                              {bookingInfo?.user && (
-                                <div className="mb-3">
-                                  <p>{bookingInfo.user.name}</p>
-                                  <p className="text-bookinglight">{bookingInfo.user.email}</p>
-                                </div>
+                      {(bookingInfo?.user || bookingInfo?.attendees) && (
+                        <>
+                          <div className="font-medium">{t("who")}</div>
+                          <div className="col-span-2 mb-6">
+                            {bookingInfo?.user && (
+                              <div className="mb-3">
+                                <p>{bookingInfo.user.name}</p>
+                                <p className="text-bookinglight">{bookingInfo.user.email}</p>
+                              </div>
+                            )}
+                            {bookingInfo?.attendees.map((attendee, index) => (
+                              <div
+                                key={attendee.name}
+                                className={index === bookingInfo.attendees.length - 1 ? "" : "mb-3"}>
+                                <p>{attendee.name}</p>
+                                <p className="text-bookinglight">{attendee.email}</p>
+                              </div>
+                            ))}
+                          </div>
+                        </>
+                      )}
+                      {location && (
+                        <>
+                          <div className="mt-3 font-medium">{t("where")}</div>
+                          <div className="col-span-2 mt-3">
+                            {location.startsWith("http") ? (
+                              <a title="Meeting Link" href={location}>
+                                {location}
+                              </a>
+                            ) : (
+                              location
+                            )}
+                          </div>
+                        </>
+                      )}
+                      {bookingInfo?.description && (
+                        <>
+                          <div className="mt-9 font-medium">{t("additional_notes")}</div>
+                          <div className="col-span-2 mb-2 mt-9">
+                            <p>{bookingInfo.description}</p>
+                          </div>
+                        </>
+                      )}
+                      {customInputs &&
+                        Object.keys(customInputs).map((key) => {
+                          const customInput = customInputs[key as keyof typeof customInputs];
+                          return (
+                            <>
+                              {customInput !== "" && (
+                                <>
+                                  <div className="mt-2 pr-3 font-medium">{key}</div>
+                                  <div className="col-span-2 mt-2 mb-2">
+                                    {typeof customInput === "boolean" ? (
+                                      <p>{customInput ? "true" : "false"}</p>
+                                    ) : (
+                                      <p>{customInput}</p>
+                                    )}
+                                  </div>
+                                </>
                               )}
-                              {bookingInfo?.attendees.map((attendee, index) => (
-                                <div
-                                  key={attendee.name}
-                                  className={index === bookingInfo.attendees.length - 1 ? "" : "mb-3"}>
-                                  <p>{attendee.name}</p>
-                                  <p className="text-bookinglight">{attendee.email}</p>
-                                </div>
-                              ))}
-                            </div>
-                          </>
-                        )}
-                        {location && (
-                          <>
-                            <div className="mt-3 font-medium">{t("where")}</div>
-                            <div className="col-span-2 mt-3">
-                              {location.startsWith("http") ? (
-                                <a title="Meeting Link" href={location}>
-                                  {location}
-                                </a>
-                              ) : (
-                                location
-                              )}
-                            </div>
-                          </>
-                        )}
-                        {bookingInfo?.description && (
-                          <>
-                            <div className="mt-9 font-medium">{t("additional_notes")}</div>
-                            <div className="col-span-2 mb-2 mt-9">
-                              <p>{bookingInfo.description}</p>
-                            </div>
-                          </>
-                        )}
-                        {customInputs &&
-                          Object.keys(customInputs).map((key) => {
-                            const customInput = customInputs[key as keyof typeof customInputs];
-                            return (
-                              <>
-                                {customInput !== "" && (
-                                  <>
-                                    <div className="mt-2 pr-3 font-medium">{key}</div>
-                                    <div className="col-span-2 mt-2 mb-2">
-                                      {typeof customInput === "boolean" ? (
-                                        <p>{customInput ? "true" : "false"}</p>
-                                      ) : (
-                                        <p>{customInput}</p>
-                                      )}
-                                    </div>
-                                  </>
-                                )}
-                              </>
-                            );
-                          })}
-                      </div>
+                            </>
+                          );
+                        })}
                     </div>
                   </div>
-                  {!needsConfirmation &&
-                    !isCancelled &&
-                    (!isCancellationMode ? (
-                      <div className="border-bookinglightest text-bookingdark mt-2 grid-cols-3 border-b py-4 text-left dark:border-gray-900 sm:grid">
-                        <span className="font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
-                          {t("need_to_make_a_change")}
-                        </span>
-                        <div
-                          className={classNames(
-                            "items-center self-center ltr:mr-2 rtl:ml-2 dark:text-gray-50  sm:justify-center",
-                            !props.recurringBookings ? "flex sm:ml-7" : ""
-                          )}>
-                          <button className="underline" onClick={() => setIsCancellationMode(true)}>
-                            {t("cancel")}
-                          </button>
-                          {!props.recurringBookings && (
-                            <>
-                              <div className="mx-2">{t("or_lowercase")}</div>
-                              <div className="underline">
-                                <Link href={"/reschedule/" + bookingInfo?.uid}>{t("reschedule")}</Link>
-                              </div>
-                            </>
-                          )}
-                        </div>
-                      </div>
-                    ) : (
-                      <CancelBooking
-                        booking={{ uid: bookingInfo?.uid, title: bookingInfo?.title }}
-                        profile={{ name: props.profile.name, slug: props.profile.slug }}
-                        recurringEvent={eventType.recurringEvent}
-                        team={eventType?.team?.name}
-                        setIsCancellationMode={setIsCancellationMode}
-                        theme={isSuccessBookingPage ? props.profile.theme : "light"}
-                      />
-                    ))}
-                  {userIsOwner && !needsConfirmation && !isCancellationMode && !isCancelled && (
-                    <div className="border-bookinglightest mt-9 flex border-b pt-2 pb-4 text-center dark:border-gray-900 sm:mt-0 sm:pt-4">
-                      <span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
-                        {t("add_to_calendar")}
-                      </span>
-                      <div className="-ml-16 flex flex-grow justify-center text-center">
-                        <Link
-                          href={
-                            `https://calendar.google.com/calendar/r/eventedit?dates=${date
-                              .utc()
-                              .format("YYYYMMDDTHHmmss[Z]")}/${date
-                              .add(props.eventType.length, "minute")
-                              .utc()
-                              .format("YYYYMMDDTHHmmss[Z]")}&text=${eventName}&details=${
-                              props.eventType.description
-                            }` +
-                            (typeof location === "string"
-                              ? "&location=" + encodeURIComponent(location)
-                              : "") +
-                            (props.eventType.recurringEvent
-                              ? "&recur=" +
-                                encodeURIComponent(new RRule(props.eventType.recurringEvent).toString())
-                              : "")
-                          }>
-                          <a className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white">
-                            <svg
-                              className="-mt-1.5 inline-block h-4 w-4"
-                              fill="currentColor"
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 24 24">
-                              <title>Google</title>
-                              <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" />
-                            </svg>
-                          </a>
-                        </Link>
-                        <Link
-                          href={
-                            encodeURI(
-                              "https://outlook.live.com/calendar/0/deeplink/compose?body=" +
-                                props.eventType.description +
-                                "&enddt=" +
-                                date.add(props.eventType.length, "minute").utc().format() +
-                                "&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=" +
-                                date.utc().format() +
-                                "&subject=" +
-                                eventName
-                            ) + (location ? "&location=" + location : "")
-                          }>
-                          <a
-                            className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white"
-                            target="_blank">
-                            <svg
-                              className="mr-1 -mt-1.5 inline-block h-4 w-4"
-                              fill="currentColor"
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 24 24">
-                              <title>Microsoft Outlook</title>
-                              <path d="M7.88 12.04q0 .45-.11.87-.1.41-.33.74-.22.33-.58.52-.37.2-.87.2t-.85-.2q-.35-.21-.57-.55-.22-.33-.33-.75-.1-.42-.1-.86t.1-.87q.1-.43.34-.76.22-.34.59-.54.36-.2.87-.2t.86.2q.35.21.57.55.22.34.31.77.1.43.1.88zM24 12v9.38q0 .46-.33.8-.33.32-.8.32H7.13q-.46 0-.8-.33-.32-.33-.32-.8V18H1q-.41 0-.7-.3-.3-.29-.3-.7V7q0-.41.3-.7Q.58 6 1 6h6.5V2.55q0-.44.3-.75.3-.3.75-.3h12.9q.44 0 .75.3.3.3.3.75V10.85l1.24.72h.01q.1.07.18.18.07.12.07.25zm-6-8.25v3h3v-3zm0 4.5v3h3v-3zm0 4.5v1.83l3.05-1.83zm-5.25-9v3h3.75v-3zm0 4.5v3h3.75v-3zm0 4.5v2.03l2.41 1.5 1.34-.8v-2.73zM9 3.75V6h2l.13.01.12.04v-2.3zM5.98 15.98q.9 0 1.6-.3.7-.32 1.19-.86.48-.55.73-1.28.25-.74.25-1.61 0-.83-.25-1.55-.24-.71-.71-1.24t-1.15-.83q-.68-.3-1.55-.3-.92 0-1.64.3-.71.3-1.2.85-.5.54-.75 1.3-.25.74-.25 1.63 0 .85.26 1.56.26.72.74 1.23.48.52 1.17.81.69.3 1.56.3zM7.5 21h12.39L12 16.08V17q0 .41-.3.7-.29.3-.7.3H7.5zm15-.13v-7.24l-5.9 3.54Z" />
-                            </svg>
-                          </a>
-                        </Link>
-                        <Link
-                          href={
-                            encodeURI(
-                              "https://outlook.office.com/calendar/0/deeplink/compose?body=" +
-                                props.eventType.description +
-                                "&enddt=" +
-                                date.add(props.eventType.length, "minute").utc().format() +
-                                "&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=" +
-                                date.utc().format() +
-                                "&subject=" +
-                                eventName
-                            ) + (location ? "&location=" + location : "")
-                          }>
-                          <a
-                            className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white"
-                            target="_blank">
-                            <svg
-                              className="mr-1 -mt-1.5 inline-block h-4 w-4"
-                              fill="currentColor"
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 24 24">
-                              <title>Microsoft Office</title>
-                              <path d="M21.53 4.306v15.363q0 .807-.472 1.433-.472.627-1.253.85l-6.888 1.974q-.136.037-.29.055-.156.019-.293.019-.396 0-.72-.105-.321-.106-.656-.292l-4.505-2.544q-.248-.137-.391-.366-.143-.23-.143-.515 0-.434.304-.738.304-.305.739-.305h5.831V4.964l-4.38 1.563q-.533.187-.856.658-.322.472-.322 1.03v8.078q0 .496-.248.912-.25.416-.683.651l-2.072 1.13q-.286.148-.571.148-.497 0-.844-.347-.348-.347-.348-.844V6.563q0-.62.33-1.19.328-.571.874-.881L11.07.285q.248-.136.534-.21.285-.075.57-.075.211 0 .38.031.166.031.364.093l6.888 1.899q.384.11.7.329.317.217.547.52.23.305.353.67.125.367.125.764zm-1.588 15.363V4.306q0-.273-.16-.478-.163-.204-.423-.28l-3.388-.93q-.397-.111-.794-.23-.397-.117-.794-.216v19.68l4.976-1.427q.26-.074.422-.28.161-.204.161-.477z" />
-                            </svg>
-                          </a>
-                        </Link>
-                        <Link href={"data:text/calendar," + eventLink()}>
-                          <a
-                            className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white"
-                            download={props.eventType.title + ".ics"}>
-                            <svg
-                              version="1.1"
-                              fill="currentColor"
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 1000 1000"
-                              className="mr-1 -mt-1.5 inline-block h-4 w-4">
-                              <title>{t("other")}</title>
-                              <path d="M971.3,154.9c0-34.7-28.2-62.9-62.9-62.9H611.7c-1.3,0-2.6,0.1-3.9,0.2V10L28.7,87.3v823.4L607.8,990v-84.6c1.3,0.1,2.6,0.2,3.9,0.2h296.7c34.7,0,62.9-28.2,62.9-62.9V154.9z M607.8,636.1h44.6v-50.6h-44.6v-21.9h44.6v-50.6h-44.6v-92h277.9v230.2c0,3.8-3.1,7-7,7H607.8V636.1z M117.9,644.7l-50.6-2.4V397.5l50.6-2.2V644.7z M288.6,607.3c17.6,0.6,37.3-2.8,49.1-7.2l9.1,48c-11,5.1-35.6,9.9-66.9,8.3c-85.4-4.3-127.5-60.7-127.5-132.6c0-86.2,57.8-136.7,133.2-140.1c30.3-1.3,53.7,4,64.3,9.2l-12.2,48.9c-12.1-4.9-28.8-9.2-49.5-8.6c-45.3,1.2-79.5,30.1-79.5,87.4C208.8,572.2,237.8,605.7,288.6,607.3z M455.5,665.2c-32.4-1.6-63.7-11.3-79.1-20.5l12.6-50.7c16.8,9.1,42.9,18.5,70.4,19.4c30.1,1,46.3-10.7,46.3-29.3c0-17.8-14-28.1-48.8-40.6c-46.9-16.4-76.8-41.7-76.8-81.5c0-46.6,39.3-84.1,106.8-87.1c33.3-1.5,58.3,4.2,76.5,11.2l-15.4,53.3c-12.1-5.3-33.5-12.8-62.3-12c-28.3,0.8-41.9,13.6-41.9,28.1c0,17.8,16.1,25.5,53.6,39c52.9,18.5,78.4,45.3,78.4,86.4C575.6,629.7,536.2,669.2,455.5,665.2z M935.3,842.7c0,14.9-12.1,27-27,27H611.7c-1.3,0-2.6-0.2-3.9-0.4V686.2h270.9c19.2,0,34.9-15.6,34.9-34.9V398.4c0-19.2-15.6-34.9-34.9-34.9h-47.1v-32.3H808v32.3h-44.8v-32.3h-22.7v32.3h-43.3v-32.3h-22.7v32.3H628v-32.3h-20.2v-203c1.31.2,2.6-0.4,3.9-0.4h296.7c14.9,0,27,12.1,27,27L935.3,842.7L935.3,842.7z" />
-                            </svg>
-                          </a>
-                        </Link>
-                      </div>
-                    </div>
-                  )}
-                  {session === null && !(userIsOwner || props.hideBranding) && (
-                    <div className="border-bookinglightest text-booking-lighter pt-4 text-center text-xs dark:border-gray-900 dark:text-white">
-                      <a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a>
-
-                      <form
-                        onSubmit={(e) => {
-                          e.preventDefault();
-                          const target = e.target as typeof e.target & {
-                            email: { value: string };
-                          };
-                          router.push(`https://cal.com/signup?email=${target.email.value}`);
-                        }}
-                        className="mt-4 flex">
-                        <EmailInput
-                          name="email"
-                          id="email"
-                          defaultValue={router.query.email}
-                          className="focus:border-brand border-bookinglightest mt-0 block w-full rounded-sm border-gray-300 focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
-                          placeholder="rick.astley@cal.com"
-                        />
-                        <Button size="lg" type="submit" className="min-w-max" color="primary">
-                          {t("try_for_free")}
-                        </Button>
-                      </form>
-                    </div>
-                  )}
                 </div>
+                {!needsConfirmation &&
+                  !isCancelled &&
+                  (!isCancellationMode ? (
+                    <div className="border-bookinglightest text-bookingdark mt-2 grid-cols-3 border-b py-4 text-left dark:border-gray-900 sm:grid">
+                      <span className="font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
+                        {t("need_to_make_a_change")}
+                      </span>
+                      <div
+                        className={classNames(
+                          "items-center self-center ltr:mr-2 rtl:ml-2 dark:text-gray-50  sm:justify-center",
+                          !props.recurringBookings ? "flex sm:ml-7" : ""
+                        )}>
+                        <button className="underline" onClick={() => setIsCancellationMode(true)}>
+                          {t("cancel")}
+                        </button>
+                        {!props.recurringBookings && (
+                          <>
+                            <div className="mx-2">{t("or_lowercase")}</div>
+                            <div className="underline">
+                              <Link href={"/reschedule/" + bookingInfo?.uid}>{t("reschedule")}</Link>
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  ) : (
+                    <CancelBooking
+                      booking={{ uid: bookingInfo?.uid, title: bookingInfo?.title }}
+                      profile={{ name: props.profile.name, slug: props.profile.slug }}
+                      recurringEvent={eventType.recurringEvent}
+                      team={eventType?.team?.name}
+                      setIsCancellationMode={setIsCancellationMode}
+                      theme={isSuccessBookingPage ? props.profile.theme : "light"}
+                    />
+                  ))}
+                {userIsOwner && !needsConfirmation && !isCancellationMode && !isCancelled && (
+                  <div className="border-bookinglightest mt-9 flex border-b pt-2 pb-4 text-center dark:border-gray-900 sm:mt-0 sm:pt-4">
+                    <span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
+                      {t("add_to_calendar")}
+                    </span>
+                    <div className="-ml-16 flex flex-grow justify-center text-center">
+                      <Link
+                        href={
+                          `https://calendar.google.com/calendar/r/eventedit?dates=${date
+                            .utc()
+                            .format("YYYYMMDDTHHmmss[Z]")}/${date
+                            .add(props.eventType.length, "minute")
+                            .utc()
+                            .format("YYYYMMDDTHHmmss[Z]")}&text=${eventName}&details=${
+                            props.eventType.description
+                          }` +
+                          (typeof location === "string" ? "&location=" + encodeURIComponent(location) : "") +
+                          (props.eventType.recurringEvent
+                            ? "&recur=" +
+                              encodeURIComponent(new RRule(props.eventType.recurringEvent).toString())
+                            : "")
+                        }>
+                        <a className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white">
+                          <svg
+                            className="-mt-1.5 inline-block h-4 w-4"
+                            fill="currentColor"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24">
+                            <title>Google</title>
+                            <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" />
+                          </svg>
+                        </a>
+                      </Link>
+                      <Link
+                        href={
+                          encodeURI(
+                            "https://outlook.live.com/calendar/0/deeplink/compose?body=" +
+                              props.eventType.description +
+                              "&enddt=" +
+                              date.add(props.eventType.length, "minute").utc().format() +
+                              "&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=" +
+                              date.utc().format() +
+                              "&subject=" +
+                              eventName
+                          ) + (location ? "&location=" + location : "")
+                        }>
+                        <a
+                          className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white"
+                          target="_blank">
+                          <svg
+                            className="mr-1 -mt-1.5 inline-block h-4 w-4"
+                            fill="currentColor"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24">
+                            <title>Microsoft Outlook</title>
+                            <path d="M7.88 12.04q0 .45-.11.87-.1.41-.33.74-.22.33-.58.52-.37.2-.87.2t-.85-.2q-.35-.21-.57-.55-.22-.33-.33-.75-.1-.42-.1-.86t.1-.87q.1-.43.34-.76.22-.34.59-.54.36-.2.87-.2t.86.2q.35.21.57.55.22.34.31.77.1.43.1.88zM24 12v9.38q0 .46-.33.8-.33.32-.8.32H7.13q-.46 0-.8-.33-.32-.33-.32-.8V18H1q-.41 0-.7-.3-.3-.29-.3-.7V7q0-.41.3-.7Q.58 6 1 6h6.5V2.55q0-.44.3-.75.3-.3.75-.3h12.9q.44 0 .75.3.3.3.3.75V10.85l1.24.72h.01q.1.07.18.18.07.12.07.25zm-6-8.25v3h3v-3zm0 4.5v3h3v-3zm0 4.5v1.83l3.05-1.83zm-5.25-9v3h3.75v-3zm0 4.5v3h3.75v-3zm0 4.5v2.03l2.41 1.5 1.34-.8v-2.73zM9 3.75V6h2l.13.01.12.04v-2.3zM5.98 15.98q.9 0 1.6-.3.7-.32 1.19-.86.48-.55.73-1.28.25-.74.25-1.61 0-.83-.25-1.55-.24-.71-.71-1.24t-1.15-.83q-.68-.3-1.55-.3-.92 0-1.64.3-.71.3-1.2.85-.5.54-.75 1.3-.25.74-.25 1.63 0 .85.26 1.56.26.72.74 1.23.48.52 1.17.81.69.3 1.56.3zM7.5 21h12.39L12 16.08V17q0 .41-.3.7-.29.3-.7.3H7.5zm15-.13v-7.24l-5.9 3.54Z" />
+                          </svg>
+                        </a>
+                      </Link>
+                      <Link
+                        href={
+                          encodeURI(
+                            "https://outlook.office.com/calendar/0/deeplink/compose?body=" +
+                              props.eventType.description +
+                              "&enddt=" +
+                              date.add(props.eventType.length, "minute").utc().format() +
+                              "&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=" +
+                              date.utc().format() +
+                              "&subject=" +
+                              eventName
+                          ) + (location ? "&location=" + location : "")
+                        }>
+                        <a
+                          className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white"
+                          target="_blank">
+                          <svg
+                            className="mr-1 -mt-1.5 inline-block h-4 w-4"
+                            fill="currentColor"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24">
+                            <title>Microsoft Office</title>
+                            <path d="M21.53 4.306v15.363q0 .807-.472 1.433-.472.627-1.253.85l-6.888 1.974q-.136.037-.29.055-.156.019-.293.019-.396 0-.72-.105-.321-.106-.656-.292l-4.505-2.544q-.248-.137-.391-.366-.143-.23-.143-.515 0-.434.304-.738.304-.305.739-.305h5.831V4.964l-4.38 1.563q-.533.187-.856.658-.322.472-.322 1.03v8.078q0 .496-.248.912-.25.416-.683.651l-2.072 1.13q-.286.148-.571.148-.497 0-.844-.347-.348-.347-.348-.844V6.563q0-.62.33-1.19.328-.571.874-.881L11.07.285q.248-.136.534-.21.285-.075.57-.075.211 0 .38.031.166.031.364.093l6.888 1.899q.384.11.7.329.317.217.547.52.23.305.353.67.125.367.125.764zm-1.588 15.363V4.306q0-.273-.16-.478-.163-.204-.423-.28l-3.388-.93q-.397-.111-.794-.23-.397-.117-.794-.216v19.68l4.976-1.427q.26-.074.422-.28.161-.204.161-.477z" />
+                          </svg>
+                        </a>
+                      </Link>
+                      <Link href={"data:text/calendar," + eventLink()}>
+                        <a
+                          className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white"
+                          download={props.eventType.title + ".ics"}>
+                          <svg
+                            version="1.1"
+                            fill="currentColor"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 1000 1000"
+                            className="mr-1 -mt-1.5 inline-block h-4 w-4">
+                            <title>{t("other")}</title>
+                            <path d="M971.3,154.9c0-34.7-28.2-62.9-62.9-62.9H611.7c-1.3,0-2.6,0.1-3.9,0.2V10L28.7,87.3v823.4L607.8,990v-84.6c1.3,0.1,2.6,0.2,3.9,0.2h296.7c34.7,0,62.9-28.2,62.9-62.9V154.9z M607.8,636.1h44.6v-50.6h-44.6v-21.9h44.6v-50.6h-44.6v-92h277.9v230.2c0,3.8-3.1,7-7,7H607.8V636.1z M117.9,644.7l-50.6-2.4V397.5l50.6-2.2V644.7z M288.6,607.3c17.6,0.6,37.3-2.8,49.1-7.2l9.1,48c-11,5.1-35.6,9.9-66.9,8.3c-85.4-4.3-127.5-60.7-127.5-132.6c0-86.2,57.8-136.7,133.2-140.1c30.3-1.3,53.7,4,64.3,9.2l-12.2,48.9c-12.1-4.9-28.8-9.2-49.5-8.6c-45.3,1.2-79.5,30.1-79.5,87.4C208.8,572.2,237.8,605.7,288.6,607.3z M455.5,665.2c-32.4-1.6-63.7-11.3-79.1-20.5l12.6-50.7c16.8,9.1,42.9,18.5,70.4,19.4c30.1,1,46.3-10.7,46.3-29.3c0-17.8-14-28.1-48.8-40.6c-46.9-16.4-76.8-41.7-76.8-81.5c0-46.6,39.3-84.1,106.8-87.1c33.3-1.5,58.3,4.2,76.5,11.2l-15.4,53.3c-12.1-5.3-33.5-12.8-62.3-12c-28.3,0.8-41.9,13.6-41.9,28.1c0,17.8,16.1,25.5,53.6,39c52.9,18.5,78.4,45.3,78.4,86.4C575.6,629.7,536.2,669.2,455.5,665.2z M935.3,842.7c0,14.9-12.1,27-27,27H611.7c-1.3,0-2.6-0.2-3.9-0.4V686.2h270.9c19.2,0,34.9-15.6,34.9-34.9V398.4c0-19.2-15.6-34.9-34.9-34.9h-47.1v-32.3H808v32.3h-44.8v-32.3h-22.7v32.3h-43.3v-32.3h-22.7v32.3H628v-32.3h-20.2v-203c1.31.2,2.6-0.4,3.9-0.4h296.7c14.9,0,27,12.1,27,27L935.3,842.7L935.3,842.7z" />
+                          </svg>
+                        </a>
+                      </Link>
+                    </div>
+                  </div>
+                )}
+                {session === null && !(userIsOwner || props.hideBranding) && (
+                  <div className="border-bookinglightest text-booking-lighter pt-4 text-center text-xs dark:border-gray-900 dark:text-white">
+                    <a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a>
+
+                    <form
+                      onSubmit={(e) => {
+                        e.preventDefault();
+                        const target = e.target as typeof e.target & {
+                          email: { value: string };
+                        };
+                        router.push(`https://cal.com/signup?email=${target.email.value}`);
+                      }}
+                      className="mt-4 flex">
+                      <EmailInput
+                        name="email"
+                        id="email"
+                        defaultValue={router.query.email}
+                        className="focus:border-brand border-bookinglightest mt-0 block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
+                        placeholder="rick.astley@cal.com"
+                      />
+                      <Button size="lg" type="submit" className="min-w-max" color="primary">
+                        {t("try_for_free")}
+                      </Button>
+                    </form>
+                  </div>
+                )}
               </div>
             </div>
           </div>
-        </main>
-      </div>
-    )) ||
-    null
+        </div>
+      </main>
+    </div>
   );
 }
 
+Success.isThemeSupported = true;
+
 type RecurringBookingsProps = {
   eventType: SuccessProps["eventType"];
   recurringBookings: SuccessProps["recurringBookings"];
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index 3510dbcce8..86c18def5c 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -27,7 +27,7 @@ import AvatarGroup from "@components/ui/AvatarGroup";
 
 export type TeamPageProps = inferSSRProps<typeof getServerSideProps>;
 function TeamPage({ team }: TeamPageProps) {
-  const { isReady, Theme } = useTheme();
+  useTheme();
   const showMembers = useToggleQuery("members");
   const { t } = useLocale();
   useExposePlanGlobally("PRO");
@@ -81,49 +81,46 @@ function TeamPage({ team }: TeamPageProps) {
   const teamName = team.name || "Nameless Team";
 
   return (
-    isReady && (
-      <div>
-        <Theme />
-        <HeadSeo title={teamName} description={teamName} />
-        <div className="rounded-md bg-white px-4 pt-24 pb-12 dark:bg-gray-900">
-          <div className="max-w-96 mx-auto mb-8 text-center">
-            <Avatar
-              alt={teamName}
-              imageSrc={getPlaceholderAvatar(team.logo, team.name)}
-              className="mx-auto mb-4 h-20 w-20 rounded-full"
-            />
-            <p className="font-cal mb-2 text-3xl tracking-wider text-gray-900 dark:text-white">{teamName}</p>
-            <p className="mt-2 text-sm font-normal text-neutral-500 dark:text-white">{team.bio}</p>
-          </div>
-          {(showMembers.isOn || !team.eventTypes.length) && <Team team={team} />}
-          {!showMembers.isOn && team.eventTypes.length > 0 && (
-            <div className="mx-auto max-w-3xl">
-              {eventTypes}
-              <div className="relative mt-12">
-                <div className="absolute inset-0 flex items-center" aria-hidden="true">
-                  <div className="w-full border-t border-gray-200 dark:border-gray-700" />
-                </div>
-                <div className="relative flex justify-center">
-                  <span className="dark:bg-brand dark:text-brandcontrast bg-gray-100 px-2 text-sm text-gray-500">
-                    {t("or")}
-                  </span>
-                </div>
-              </div>
-
-              <aside className="mt-8 text-center dark:text-white">
-                <Button
-                  color="secondary"
-                  EndIcon={ArrowRightIcon}
-                  href={`/team/${team.slug}?members=1`}
-                  shallow={true}>
-                  {t("book_a_team_member")}
-                </Button>
-              </aside>
-            </div>
-          )}
+    <div>
+      <HeadSeo title={teamName} description={teamName} />
+      <div className="rounded-md bg-white px-4 pt-24 pb-12 dark:bg-gray-900">
+        <div className="max-w-96 mx-auto mb-8 text-center">
+          <Avatar
+            alt={teamName}
+            imageSrc={getPlaceholderAvatar(team.logo, team.name)}
+            className="mx-auto mb-4 h-20 w-20 rounded-full"
+          />
+          <p className="font-cal mb-2 text-3xl tracking-wider text-gray-900 dark:text-white">{teamName}</p>
+          <p className="mt-2 text-sm font-normal text-neutral-500 dark:text-white">{team.bio}</p>
         </div>
+        {(showMembers.isOn || !team.eventTypes.length) && <Team team={team} />}
+        {!showMembers.isOn && team.eventTypes.length > 0 && (
+          <div className="mx-auto max-w-3xl">
+            {eventTypes}
+            <div className="relative mt-12">
+              <div className="absolute inset-0 flex items-center" aria-hidden="true">
+                <div className="w-full border-t border-gray-200 dark:border-gray-700" />
+              </div>
+              <div className="relative flex justify-center">
+                <span className="dark:bg-brand dark:text-brandcontrast bg-gray-100 px-2 text-sm text-gray-500">
+                  {t("or")}
+                </span>
+              </div>
+            </div>
+
+            <aside className="mt-8 text-center dark:text-white">
+              <Button
+                color="secondary"
+                EndIcon={ArrowRightIcon}
+                href={`/team/${team.slug}?members=1`}
+                shallow={true}>
+                {t("book_a_team_member")}
+              </Button>
+            </aside>
+          </div>
+        )}
       </div>
-    )
+    </div>
   );
 }
 
@@ -154,3 +151,4 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 };
 
 export default TeamPage;
+TeamPage.isThemeSupported = true;
diff --git a/apps/web/pages/team/[slug]/[type].tsx b/apps/web/pages/team/[slug]/[type].tsx
index cde2bc8706..6288f9d4c3 100644
--- a/apps/web/pages/team/[slug]/[type].tsx
+++ b/apps/web/pages/team/[slug]/[type].tsx
@@ -20,6 +20,7 @@ export type AvailabilityTeamPageProps = inferSSRProps<typeof getServerSideProps>
 export default function TeamType(props: AvailabilityTeamPageProps) {
   return <AvailabilityPage {...props} />;
 }
+TeamType.isThemeSupported = true;
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const slugParam = asStringOrNull(context.query.slug);
diff --git a/apps/web/pages/team/[slug]/book.tsx b/apps/web/pages/team/[slug]/book.tsx
index 7a6dc94f29..0eaa073c18 100644
--- a/apps/web/pages/team/[slug]/book.tsx
+++ b/apps/web/pages/team/[slug]/book.tsx
@@ -21,6 +21,8 @@ export default function TeamBookingPage(props: TeamBookingPageProps) {
   return <BookingPage {...props} locationLabels={locationLabels} />;
 }
 
+TeamBookingPage.isThemeSupported = true;
+
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const eventTypeId = parseInt(asStringOrThrow(context.query.type));
   const recurringEventCountQuery = asStringOrNull(context.query.count);
diff --git a/packages/app-store/ee/routing_forms/pages/routing-link/[...appPages].tsx b/packages/app-store/ee/routing_forms/pages/routing-link/[...appPages].tsx
index 0d4e5883a7..485136de61 100644
--- a/packages/app-store/ee/routing_forms/pages/routing-link/[...appPages].tsx
+++ b/packages/app-store/ee/routing_forms/pages/routing-link/[...appPages].tsx
@@ -236,6 +236,8 @@ export default function RoutingLink({ form }: { form: Form }) {
   return <RoutingForm form={form} />;
 }
 
+RoutingLink.isThemeSupported = true;
+
 export const getServerSideProps = async function getServerSideProps(
   context: AppGetServerSidePropsContext,
   prisma: AppPrisma
diff --git a/packages/ee/server/checkLicense.ts b/packages/ee/server/checkLicense.ts
index e8d0fb6b02..9d314c9a19 100644
--- a/packages/ee/server/checkLicense.ts
+++ b/packages/ee/server/checkLicense.ts
@@ -5,6 +5,7 @@ import { CONSOLE_URL } from "@calcom/lib/constants";
 const CACHING_TIME = 86400000; // 24 hours in milliseconds
 
 async function checkLicense(license: string): Promise<boolean> {
+  return true;
   if (!!process.env.NEXT_PUBLIC_IS_E2E) return true;
   const url = `${CONSOLE_URL}/api/license?key=${license}`;
   const cachedResponse = cache.get(url);
diff --git a/yarn.lock b/yarn.lock
index 131ede5934..ced93b522a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,7 +2,7 @@
 # yarn lockfile v1
 
 
-"@47ng/cloak@^1.1.0-beta.2":
+"@47ng/cloak@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@47ng/cloak/-/cloak-1.1.0.tgz#4172ea63287d3c28aef3ac361fbe313d55647204"
   integrity sha512-47dVSPgjTiH3Fgt2CATudxJAU7Fv1WjFIo2e4tXG2UcQitqmIGf9GCgv1MnGv8ctNGPAy9gsjHnNujzuZ1bOow==
@@ -77,7 +77,7 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
-"@babel/compat-data@^7.13.11":
+"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.18.6":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.8.tgz#2483f565faca607b8535590e84e7de323f27764d"
   integrity sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ==
@@ -92,11 +92,6 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2"
   integrity sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==
 
-"@babel/compat-data@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.6.tgz#8b37d24e88e8e21c499d4328db80577d8882fa53"
-  integrity sha512-tzulrgDT0QD6U7BJ4TKVk2SDDg7wlP39P9yAx1RfLy7vP/7rsDRlWVfbWxElslu56+r7QOhB2NSDsabYYruoZQ==
-
 "@babel/core@7.12.9":
   version "7.12.9"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8"
@@ -436,7 +431,7 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-module-transforms@^7.12.1":
+"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.18.6":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.8.tgz#4f8408afead0188cfa48672f9d0e5787b61778c8"
   integrity sha512-che3jvZwIcZxrwh63VfnFTUzcAM9v/lznYkkRxIBGMPt1SudOKHAEec0SIRCfiuIzTcF7VGj/CaTT6gY4eWxvA==
@@ -464,20 +459,6 @@
     "@babel/traverse" "^7.17.3"
     "@babel/types" "^7.17.0"
 
-"@babel/helper-module-transforms@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.6.tgz#57e3ca669e273d55c3cda55e6ebf552f37f483c8"
-  integrity sha512-L//phhB4al5uucwzlimruukHB3jRd5JGClwRMD/ROrVjXfLqovYnvQrK/JK36WYyVwGGO7OD3kMyVTjx+WVPhw==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.18.6"
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-simple-access" "^7.18.6"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/helper-validator-identifier" "^7.18.6"
-    "@babel/template" "^7.18.6"
-    "@babel/traverse" "^7.18.6"
-    "@babel/types" "^7.18.6"
-
 "@babel/helper-optimise-call-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
@@ -641,7 +622,7 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.8.tgz#2817fb9d885dd8132ea0f8eb615a6388cca1c240"
   integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==
 
-"@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.18.8":
+"@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.18.6", "@babel/parser@^7.18.8":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.8.tgz#822146080ac9c62dac0823bb3489622e0bc1cbdf"
   integrity sha512-RSKRfYX20dyH+elbJK2uqAkVyucL+xXzhqlMD5/ZXx+dAAwpyB7HsvnHe/ZUGOF+xLr5Wx9/JoXVTj6BQE2/oA==
@@ -656,11 +637,6 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.9.tgz#9c94189a6062f0291418ca021077983058e171ef"
   integrity sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==
 
-"@babel/parser@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.6.tgz#845338edecad65ebffef058d3be851f1d28a63bc"
-  integrity sha512-uQVSa9jJUe/G/304lXspfWVpKpK4euFLgGiMQFOCpM/bgcAdeoHwi/OQz23O9GK2osz26ZiXRRV9aV+Yl1O8tw==
-
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
@@ -1576,7 +1552,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.18.8":
+"@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.18.6", "@babel/traverse@^7.18.8", "@babel/traverse@^7.7.2":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.8.tgz#f095e62ab46abf1da35e5a2011f43aee72d8d5b0"
   integrity sha512-UNg/AcSySJYR/+mIcJQDCv00T+AqRO7j/ZEJLzpaYtgM48rMg5MnkJgyNqkzo88+p4tfRvZJCEiwwfG6h4jkRg==
@@ -1624,22 +1600,6 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/traverse@^7.18.6", "@babel/traverse@^7.7.2":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.6.tgz#a228562d2f46e89258efa4ddd0416942e2fd671d"
-  integrity sha512-zS/OKyqmD7lslOtFqbscH6gMLFYOfG1YPqCKfAW5KrTeolKqvB8UelR49Fpr6y93kYkW2Ik00mT1LOGiAGvizw==
-  dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.18.6"
-    "@babel/helper-environment-visitor" "^7.18.6"
-    "@babel/helper-function-name" "^7.18.6"
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.18.6"
-    "@babel/types" "^7.18.6"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
 "@babel/types@7.13.0":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.0.tgz#74424d2816f0171b4100f0ab34e9a374efdf7f80"
@@ -1657,7 +1617,7 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.12.11", "@babel/types@^7.12.7", "@babel/types@^7.18.8", "@babel/types@^7.2.0", "@babel/types@^7.4.4":
+"@babel/types@^7.12.11", "@babel/types@^7.12.7", "@babel/types@^7.18.6", "@babel/types@^7.18.7", "@babel/types@^7.18.8", "@babel/types@^7.2.0", "@babel/types@^7.4.4":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.8.tgz#c5af199951bf41ba4a6a9a6d0d8ad722b30cd42f"
   integrity sha512-qwpdsmraq0aJ3osLJRApsc2ouSJCdnMeZwB0DhbtHAtRpZNZCdlbRnHIgcRKzdE1g0iOGg644fzjOBcdOz9cPw==
@@ -1673,14 +1633,6 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.18.6", "@babel/types@^7.18.7":
-  version "7.18.7"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.7.tgz#a4a2c910c15040ea52cdd1ddb1614a65c8041726"
-  integrity sha512-QG3yxTcTIBoAcQmkCs+wAPYZhu7Dk9rXKacINfNbdJDNERTbLQbHGyVG8q/YGMPeCJRIhSY0+fTc5+xuh6WPSQ==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.18.6"
-    to-fast-properties "^2.0.0"
-
 "@base2/pretty-print-object@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4"
@@ -2329,16 +2281,16 @@
     jest-util "^26.6.2"
     slash "^3.0.0"
 
-"@jest/console@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/console/-/console-28.1.1.tgz#305f8ca50b6e70413839f54c0e002b60a0f2fd7d"
-  integrity sha512-0RiUocPVFEm3WRMOStIHbRWllG6iW6E3/gUPnf4lkrVFyXIIDeCe+vlKeYyFOMhB2EPE6FLFCNADSOOQMaqvyA==
+"@jest/console@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-28.1.3.tgz#2030606ec03a18c31803b8a36382762e447655df"
+  integrity sha512-QPAkP5EwKdK/bxIr6C1I4Vs0rm2nHiANzj/Z5X2JQkrZo6IqvC4ldZ9K95tF0HdidhA8Bo6egxSzUFPYKcEXLw==
   dependencies:
-    "@jest/types" "^28.1.1"
+    "@jest/types" "^28.1.3"
     "@types/node" "*"
     chalk "^4.0.0"
-    jest-message-util "^28.1.1"
-    jest-util "^28.1.1"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
     slash "^3.0.0"
 
 "@jest/core@^26.6.3":
@@ -2375,37 +2327,37 @@
     slash "^3.0.0"
     strip-ansi "^6.0.0"
 
-"@jest/core@^28.1.2":
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-28.1.2.tgz#eac519b9acbd154313854b8823a47b5c645f785a"
-  integrity sha512-Xo4E+Sb/nZODMGOPt2G3cMmCBqL4/W2Ijwr7/mrXlq4jdJwcFQ/9KrrJZT2adQRk2otVBXXOz1GRQ4Z5iOgvRQ==
+"@jest/core@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-28.1.3.tgz#0ebf2bd39840f1233cd5f2d1e6fc8b71bd5a1ac7"
+  integrity sha512-CIKBrlaKOzA7YG19BEqCw3SLIsEwjZkeJzf5bdooVnW4bH5cktqe3JX+G2YV1aK5vP8N9na1IGWFzYaTp6k6NA==
   dependencies:
-    "@jest/console" "^28.1.1"
-    "@jest/reporters" "^28.1.2"
-    "@jest/test-result" "^28.1.1"
-    "@jest/transform" "^28.1.2"
-    "@jest/types" "^28.1.1"
+    "@jest/console" "^28.1.3"
+    "@jest/reporters" "^28.1.3"
+    "@jest/test-result" "^28.1.3"
+    "@jest/transform" "^28.1.3"
+    "@jest/types" "^28.1.3"
     "@types/node" "*"
     ansi-escapes "^4.2.1"
     chalk "^4.0.0"
     ci-info "^3.2.0"
     exit "^0.1.2"
     graceful-fs "^4.2.9"
-    jest-changed-files "^28.0.2"
-    jest-config "^28.1.2"
-    jest-haste-map "^28.1.1"
-    jest-message-util "^28.1.1"
+    jest-changed-files "^28.1.3"
+    jest-config "^28.1.3"
+    jest-haste-map "^28.1.3"
+    jest-message-util "^28.1.3"
     jest-regex-util "^28.0.2"
-    jest-resolve "^28.1.1"
-    jest-resolve-dependencies "^28.1.2"
-    jest-runner "^28.1.2"
-    jest-runtime "^28.1.2"
-    jest-snapshot "^28.1.2"
-    jest-util "^28.1.1"
-    jest-validate "^28.1.1"
-    jest-watcher "^28.1.1"
+    jest-resolve "^28.1.3"
+    jest-resolve-dependencies "^28.1.3"
+    jest-runner "^28.1.3"
+    jest-runtime "^28.1.3"
+    jest-snapshot "^28.1.3"
+    jest-util "^28.1.3"
+    jest-validate "^28.1.3"
+    jest-watcher "^28.1.3"
     micromatch "^4.0.4"
-    pretty-format "^28.1.1"
+    pretty-format "^28.1.3"
     rimraf "^3.0.0"
     slash "^3.0.0"
     strip-ansi "^6.0.0"
@@ -2420,30 +2372,30 @@
     "@types/node" "*"
     jest-mock "^26.6.2"
 
-"@jest/environment@^28.1.2":
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-28.1.2.tgz#94a052c0c5f9f8c8e6d13ea6da78dbc5d7d9b85b"
-  integrity sha512-I0CR1RUMmOzd0tRpz10oUfaChBWs+/Hrvn5xYhMEF/ZqrDaaeHwS8yDBqEWCrEnkH2g+WE/6g90oBv3nKpcm8Q==
+"@jest/environment@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-28.1.3.tgz#abed43a6b040a4c24fdcb69eab1f97589b2d663e"
+  integrity sha512-1bf40cMFTEkKyEf585R9Iz1WayDjHoHqvts0XFYEqyKM3cFWDpeMoqKKTAF9LSYQModPUlh8FKptoM2YcMWAXA==
   dependencies:
-    "@jest/fake-timers" "^28.1.2"
-    "@jest/types" "^28.1.1"
+    "@jest/fake-timers" "^28.1.3"
+    "@jest/types" "^28.1.3"
     "@types/node" "*"
-    jest-mock "^28.1.1"
+    jest-mock "^28.1.3"
 
-"@jest/expect-utils@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-28.1.1.tgz#d84c346025b9f6f3886d02c48a6177e2b0360587"
-  integrity sha512-n/ghlvdhCdMI/hTcnn4qV57kQuV9OTsZzH1TTCVARANKhl6hXJqLKUkwX69ftMGpsbpt96SsDD8n8LD2d9+FRw==
+"@jest/expect-utils@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-28.1.3.tgz#58561ce5db7cd253a7edddbc051fb39dda50f525"
+  integrity sha512-wvbi9LUrHJLn3NlDW6wF2hvIMtd4JUl2QNVrjq+IBSHirgfrR3o9RnVtxzdEGO2n9JyIWwHnLfby5KzqBGg2YA==
   dependencies:
     jest-get-type "^28.0.2"
 
-"@jest/expect@^28.1.2":
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-28.1.2.tgz#0b25acedff46e1e1e5606285306c8a399c12534f"
-  integrity sha512-HBzyZBeFBiOelNbBKN0pilWbbrGvwDUwAqMC46NVJmWm8AVkuE58NbG1s7DR4cxFt4U5cVLxofAoHxgvC5MyOw==
+"@jest/expect@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-28.1.3.tgz#9ac57e1d4491baca550f6bdbd232487177ad6a72"
+  integrity sha512-lzc8CpUbSoE4dqT0U+g1qODQjBRHPpCPXissXD4mS9+sWQdmmpeJ9zSH1rS1HEkrsMN0fb7nKrJ9giAR1d3wBw==
   dependencies:
-    expect "^28.1.1"
-    jest-snapshot "^28.1.2"
+    expect "^28.1.3"
+    jest-snapshot "^28.1.3"
 
 "@jest/fake-timers@^26.6.2":
   version "26.6.2"
@@ -2457,17 +2409,17 @@
     jest-mock "^26.6.2"
     jest-util "^26.6.2"
 
-"@jest/fake-timers@^28.1.2":
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-28.1.2.tgz#d49e8ee4e02ba85a6e844a52a5e7c59c23e3b76f"
-  integrity sha512-xSYEI7Y0D5FbZN2LsCUj/EKRR1zfQYmGuAUVh6xTqhx7V5JhjgMcK5Pa0iR6WIk0GXiHDe0Ke4A+yERKE9saqg==
+"@jest/fake-timers@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-28.1.3.tgz#230255b3ad0a3d4978f1d06f70685baea91c640e"
+  integrity sha512-D/wOkL2POHv52h+ok5Oj/1gOG9HSywdoPtFsRCUmlCILXNn5eIWmcnd3DIiWlJnpGvQtmajqBP95Ei0EimxfLw==
   dependencies:
-    "@jest/types" "^28.1.1"
+    "@jest/types" "^28.1.3"
     "@sinonjs/fake-timers" "^9.1.2"
     "@types/node" "*"
-    jest-message-util "^28.1.1"
-    jest-mock "^28.1.1"
-    jest-util "^28.1.1"
+    jest-message-util "^28.1.3"
+    jest-mock "^28.1.3"
+    jest-util "^28.1.3"
 
 "@jest/globals@^26.6.2":
   version "26.6.2"
@@ -2478,14 +2430,14 @@
     "@jest/types" "^26.6.2"
     expect "^26.6.2"
 
-"@jest/globals@^28.1.2":
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-28.1.2.tgz#92fab296e337c7309c25e4202fb724f62249d83f"
-  integrity sha512-cz0lkJVDOtDaYhvT3Fv2U1B6FtBnV+OpEyJCzTHM1fdoTsU4QNLAt/H4RkiwEUU+dL4g/MFsoTuHeT2pvbo4Hg==
+"@jest/globals@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-28.1.3.tgz#a601d78ddc5fdef542728309894895b4a42dc333"
+  integrity sha512-XFU4P4phyryCXu1pbcqMO0GSQcYe1IsalYCDzRNyhetyeyxMcIxa11qPNDpVNLeretItNqEmYYQn1UYz/5x1NA==
   dependencies:
-    "@jest/environment" "^28.1.2"
-    "@jest/expect" "^28.1.2"
-    "@jest/types" "^28.1.1"
+    "@jest/environment" "^28.1.3"
+    "@jest/expect" "^28.1.3"
+    "@jest/types" "^28.1.3"
 
 "@jest/reporters@^26.6.2":
   version "26.6.2"
@@ -2519,16 +2471,16 @@
   optionalDependencies:
     node-notifier "^8.0.0"
 
-"@jest/reporters@^28.1.2":
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-28.1.2.tgz#0327be4ce4d0d9ae49e7908656f89669d0c2a260"
-  integrity sha512-/whGLhiwAqeCTmQEouSigUZJPVl7sW8V26EiboImL+UyXznnr1a03/YZ2BX8OlFw0n+Zlwu+EZAITZtaeRTxyA==
+"@jest/reporters@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-28.1.3.tgz#9adf6d265edafc5fc4a434cfb31e2df5a67a369a"
+  integrity sha512-JuAy7wkxQZVNU/V6g9xKzCGC5LVXx9FDcABKsSXp5MiKPEE2144a/vXTEDoyzjUpZKfVwp08Wqg5A4WfTMAzjg==
   dependencies:
     "@bcoe/v8-coverage" "^0.2.3"
-    "@jest/console" "^28.1.1"
-    "@jest/test-result" "^28.1.1"
-    "@jest/transform" "^28.1.2"
-    "@jest/types" "^28.1.1"
+    "@jest/console" "^28.1.3"
+    "@jest/test-result" "^28.1.3"
+    "@jest/transform" "^28.1.3"
+    "@jest/types" "^28.1.3"
     "@jridgewell/trace-mapping" "^0.3.13"
     "@types/node" "*"
     chalk "^4.0.0"
@@ -2541,21 +2493,21 @@
     istanbul-lib-report "^3.0.0"
     istanbul-lib-source-maps "^4.0.0"
     istanbul-reports "^3.1.3"
-    jest-message-util "^28.1.1"
-    jest-util "^28.1.1"
-    jest-worker "^28.1.1"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
+    jest-worker "^28.1.3"
     slash "^3.0.0"
     string-length "^4.0.1"
     strip-ansi "^6.0.0"
     terminal-link "^2.0.0"
     v8-to-istanbul "^9.0.1"
 
-"@jest/schemas@^28.0.2":
-  version "28.0.2"
-  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-28.0.2.tgz#08c30df6a8d07eafea0aef9fb222c5e26d72e613"
-  integrity sha512-YVDJZjd4izeTDkij00vHHAymNXQ6WWsdChFRK86qck6Jpr3DCL5W3Is3vslviRlP+bLuMYRLbdp98amMvqudhA==
+"@jest/schemas@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-28.1.3.tgz#ad8b86a66f11f33619e3d7e1dcddd7f2d40ff905"
+  integrity sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==
   dependencies:
-    "@sinclair/typebox" "^0.23.3"
+    "@sinclair/typebox" "^0.24.1"
 
 "@jest/source-map@^26.6.2":
   version "26.6.2"
@@ -2585,13 +2537,13 @@
     "@types/istanbul-lib-coverage" "^2.0.0"
     collect-v8-coverage "^1.0.0"
 
-"@jest/test-result@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-28.1.1.tgz#c6f18d1bbb01aa88925dd687872a75f8414b317a"
-  integrity sha512-hPmkugBktqL6rRzwWAtp1JtYT4VHwv8OQ+9lE5Gymj6dHzubI/oJHMUpPOt8NrdVWSrz9S7bHjJUmv2ggFoUNQ==
+"@jest/test-result@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-28.1.3.tgz#5eae945fd9f4b8fcfce74d239e6f725b6bf076c5"
+  integrity sha512-kZAkxnSE+FqE8YjW8gNuoVkkC9I7S1qmenl8sGcDOLropASP+BkcGKwhXoyqQuGOGeYY0y/ixjrd/iERpEXHNg==
   dependencies:
-    "@jest/console" "^28.1.1"
-    "@jest/types" "^28.1.1"
+    "@jest/console" "^28.1.3"
+    "@jest/types" "^28.1.3"
     "@types/istanbul-lib-coverage" "^2.0.0"
     collect-v8-coverage "^1.0.0"
 
@@ -2606,14 +2558,14 @@
     jest-runner "^26.6.3"
     jest-runtime "^26.6.3"
 
-"@jest/test-sequencer@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-28.1.1.tgz#f594ee2331df75000afe0d1ae3237630ecec732e"
-  integrity sha512-nuL+dNSVMcWB7OOtgb0EGH5AjO4UBCt68SLP08rwmC+iRhyuJWS9MtZ/MpipxFwKAlHFftbMsydXqWre8B0+XA==
+"@jest/test-sequencer@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-28.1.3.tgz#9d0c283d906ac599c74bde464bc0d7e6a82886c3"
+  integrity sha512-NIMPEqqa59MWnDi1kvXXpYbqsfQmSJsIbnd85mdVGkiDfQ9WQQTXOLsvISUfonmnBT+w85WEgneCigEEdHDFxw==
   dependencies:
-    "@jest/test-result" "^28.1.1"
+    "@jest/test-result" "^28.1.3"
     graceful-fs "^4.2.9"
-    jest-haste-map "^28.1.1"
+    jest-haste-map "^28.1.3"
     slash "^3.0.0"
 
 "@jest/transform@^26.6.2":
@@ -2658,22 +2610,22 @@
     source-map "^0.6.1"
     write-file-atomic "^3.0.0"
 
-"@jest/transform@^28.1.2":
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-28.1.2.tgz#b367962c53fd53821269bde050ce373e111327c1"
-  integrity sha512-3o+lKF6iweLeJFHBlMJysdaPbpoMmtbHEFsjzSv37HIq/wWt5ijTeO2Yf7MO5yyczCopD507cNwNLeX8Y/CuIg==
+"@jest/transform@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-28.1.3.tgz#59d8098e50ab07950e0f2fc0fc7ec462371281b0"
+  integrity sha512-u5dT5di+oFI6hfcLOHGTAfmUxFRrjK+vnaP0kkVow9Md/M7V/MxqQMOz/VV25UZO8pzeA9PjfTpOu6BDuwSPQA==
   dependencies:
     "@babel/core" "^7.11.6"
-    "@jest/types" "^28.1.1"
+    "@jest/types" "^28.1.3"
     "@jridgewell/trace-mapping" "^0.3.13"
     babel-plugin-istanbul "^6.1.1"
     chalk "^4.0.0"
     convert-source-map "^1.4.0"
     fast-json-stable-stringify "^2.0.0"
     graceful-fs "^4.2.9"
-    jest-haste-map "^28.1.1"
+    jest-haste-map "^28.1.3"
     jest-regex-util "^28.0.2"
-    jest-util "^28.1.1"
+    jest-util "^28.1.3"
     micromatch "^4.0.4"
     pirates "^4.0.4"
     slash "^3.0.0"
@@ -2701,12 +2653,12 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
-"@jest/types@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-28.1.1.tgz#d059bbc80e6da6eda9f081f293299348bd78ee0b"
-  integrity sha512-vRXVqSg1VhDnB8bWcmvLzmg0Bt9CRKVgHPXqYwvWMX3TvAjeO+nRuK6+VdTKCtWOvYlmkF/HqNAL/z+N3B53Kw==
+"@jest/types@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-28.1.3.tgz#b05de80996ff12512bc5ceb1d208285a7d11748b"
+  integrity sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==
   dependencies:
-    "@jest/schemas" "^28.0.2"
+    "@jest/schemas" "^28.1.3"
     "@types/istanbul-lib-coverage" "^2.0.0"
     "@types/istanbul-reports" "^3.0.0"
     "@types/node" "*"
@@ -3644,15 +3596,6 @@
   dependencies:
     "@prisma/engines-version" "4.1.0-48.8d8414deb360336e4698a65aa45a1fbaf1ce13d8"
 
-"@prisma/debug@3.15.2":
-  version "3.15.2"
-  resolved "https://registry.yarnpkg.com/@prisma/debug/-/debug-3.15.2.tgz#72be906039211583b00693a886149f2ba18103ef"
-  integrity sha512-Uw6RkJmHolxXNifohIY9TIBRNWR2ciDY9LErPm6jymBs3mevLCUWm4m5AlyWyhKFWl0crUtwbAWE8Z79JiNRcw==
-  dependencies:
-    "@types/debug" "4.1.7"
-    debug "4.3.4"
-    strip-ansi "6.0.1"
-
 "@prisma/debug@3.8.1":
   version "3.8.1"
   resolved "https://registry.yarnpkg.com/@prisma/debug/-/debug-3.8.1.tgz#3c6717d6e0501651709714774ea6d90127c6a2d3"
@@ -3662,6 +3605,15 @@
     ms "2.1.3"
     strip-ansi "6.0.1"
 
+"@prisma/debug@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@prisma/debug/-/debug-4.0.0.tgz#93420c704b851f1a6599337dc9db8b4d585c0e8d"
+  integrity sha512-3u+FEEwVSTXOkiWH+MEqy9T7VUrPxRZNKORKvuaJS1jL0bhDTCZOv7s/RsllVJRtEiAjWjy7il6Lj7DbQIiP0Q==
+  dependencies:
+    "@types/debug" "4.1.7"
+    debug "4.3.4"
+    strip-ansi "6.0.1"
+
 "@prisma/engines-version@4.1.0-48.8d8414deb360336e4698a65aa45a1fbaf1ce13d8":
   version "4.1.0-48.8d8414deb360336e4698a65aa45a1fbaf1ce13d8"
   resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-4.1.0-48.8d8414deb360336e4698a65aa45a1fbaf1ce13d8.tgz#ce00e6377126e491a8b1e0e2039c97e2924bd6d9"
@@ -3672,12 +3624,12 @@
   resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-4.1.0.tgz#da8002d4b75c92e3fd564ba5b0bd04847ffb3c4c"
   integrity sha512-quqHXD3P83NBLVtRlts4SgKHmqgA8GMiyDTJ7af03Wg0gl6F5t65mBYvIuwmD+52vHm42JtIsp/fAO9YIV0JBA==
 
-"@prisma/generator-helper@^3.13.0":
-  version "3.15.2"
-  resolved "https://registry.yarnpkg.com/@prisma/generator-helper/-/generator-helper-3.15.2.tgz#fbb22b496f591bc8949425dd2dab6dd70d644044"
-  integrity sha512-G6oKBowE+IwBdQUL5pOHuDrOgVQZVcsA3w1E52P5MeUqWhOtvtrewNBlqvsgyX9IiE35bzHQWIwxGfc0gzPUng==
+"@prisma/generator-helper@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@prisma/generator-helper/-/generator-helper-4.0.0.tgz#a642ccfe59c1613aa77198a3680f88503f0a55fe"
+  integrity sha512-BuyfP1T+lGmvLsysKlFN12yNbVIJbtCm0lb+feIjCYwtFYVj3/+09wezLGzlaYPz+nnwqFohZrojcrBF0oBW8g==
   dependencies:
-    "@prisma/debug" "3.15.2"
+    "@prisma/debug" "4.0.0"
     "@types/cross-spawn" "6.0.2"
     chalk "4.1.2"
     cross-spawn "7.0.3"
@@ -4355,10 +4307,10 @@
   dependencies:
     "@sentry/cli" "^1.73.0"
 
-"@sinclair/typebox@^0.23.3":
-  version "0.23.5"
-  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.23.5.tgz#93f7b9f4e3285a7a9ade7557d9a8d36809cbc47d"
-  integrity sha512-AFBVi/iT4g20DHoujvMH1aEDn8fGJh4xsRGCP6d8RpLPMqsNPvW01Jcn0QysXTsg++/xj25NmJsGyH9xug/wKg==
+"@sinclair/typebox@^0.24.1":
+  version "0.24.19"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.19.tgz#5297278e0d8a1aea084685a3216074910ac6c113"
+  integrity sha512-gHJu8cdYTD5p4UqmQHrxaWrtb/jkH5imLXzuBypWhKzNkW0qfmgz+w1xaJccWVuJta1YYUdlDiPHXRTR4Ku0MQ==
 
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
@@ -4703,7 +4655,7 @@
     prop-types "^15.7.2"
     regenerator-runtime "^0.13.7"
 
-"@storybook/addons@6.5.9":
+"@storybook/addons@6.5.9", "@storybook/addons@^6.4.10":
   version "6.5.9"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.9.tgz#5a9d7395c579a9cbc44dfc122362fb3c95dfb9d5"
   integrity sha512-adwdiXg+mntfPocLc1KXjZXyLgGk7Aac699Fwe+OUYPEC5tW347Rm/kFatcE556d42o5czcRiq3ZSIGWnm9ieQ==
@@ -6876,6 +6828,14 @@ address@^1.0.1:
   resolved "https://registry.yarnpkg.com/address/-/address-1.2.0.tgz#d352a62c92fee90f89a693eccd2a8b2139ab02d9"
   integrity sha512-tNEZYz5G/zYunxFm7sfhAxkXEuLj3K6BKwv6ZURlsF6yiUQ65z0Q2wZW9L5cPUl9ocofGvXOdFYbFHp0+6MOig==
 
+adjust-sourcemap-loader@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz#fc4a0fd080f7d10471f30a7320f25560ade28c99"
+  integrity sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==
+  dependencies:
+    loader-utils "^2.0.0"
+    regex-parser "^2.2.11"
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -7510,15 +7470,15 @@ babel-jest@^27.3.1:
     graceful-fs "^4.2.9"
     slash "^3.0.0"
 
-babel-jest@^28.1.0, babel-jest@^28.1.2:
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-28.1.2.tgz#2b37fb81439f14d34d8b2cc4a4bd7efabf9acbfe"
-  integrity sha512-pfmoo6sh4L/+5/G2OOfQrGJgvH7fTa1oChnuYH2G/6gA+JwDvO8PELwvwnofKBMNrQsam0Wy/Rw+QSrBNewq2Q==
+babel-jest@^28.1.0, babel-jest@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-28.1.3.tgz#c1187258197c099072156a0a121c11ee1e3917d5"
+  integrity sha512-epUaPOEWMk3cWX0M/sPvCHHCe9fMFAa/9hXEgKP8nFfNl/jlGkE9ucq9NqkZGXLDduCJYS0UvSlPUwC0S+rH6Q==
   dependencies:
-    "@jest/transform" "^28.1.2"
+    "@jest/transform" "^28.1.3"
     "@types/babel__core" "^7.1.14"
     babel-plugin-istanbul "^6.1.1"
-    babel-preset-jest "^28.1.1"
+    babel-preset-jest "^28.1.3"
     chalk "^4.0.0"
     graceful-fs "^4.2.9"
     slash "^3.0.0"
@@ -7591,10 +7551,10 @@ babel-plugin-jest-hoist@^27.5.1:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-jest-hoist@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-28.1.1.tgz#5e055cdcc47894f28341f87f5e35aad2df680b11"
-  integrity sha512-NovGCy5Hn25uMJSAU8FaHqzs13cFoOI4lhIujiepssjCKRsAo3TA734RDWSGxuFTsUJXerYOqQQodlxgmtqbzw==
+babel-plugin-jest-hoist@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-28.1.3.tgz#1952c4d0ea50f2d6d794353762278d1d8cca3fbe"
+  integrity sha512-Ys3tUKAmfnkRUpPdpa98eYrAR0nV+sSFUZZEGuQ2EbFd1y4SOLtD5QDNHAq+bb9a+bbXvYQC4b+ID/THIMcU6Q==
   dependencies:
     "@babel/template" "^7.3.3"
     "@babel/types" "^7.3.3"
@@ -7699,12 +7659,12 @@ babel-preset-jest@^27.5.1:
     babel-plugin-jest-hoist "^27.5.1"
     babel-preset-current-node-syntax "^1.0.0"
 
-babel-preset-jest@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-28.1.1.tgz#5b6e5e69f963eb2d70f739c607b8f723c0ee75e4"
-  integrity sha512-FCq9Oud0ReTeWtcneYf/48981aTfXYuB9gbU4rBNNJVBSQ6ssv7E6v/qvbBxtOWwZFXjLZwpg+W3q7J6vhH25g==
+babel-preset-jest@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-28.1.3.tgz#5dfc20b99abed5db994406c2b9ab94c73aaa419d"
+  integrity sha512-L+fupJvlWAHbQfn74coNX3zf60LXMJsezNvvx8eIh7iOR1luJ1poxYgQk1F8PYtNq/6QODDHCqsSnTFSWC491A==
   dependencies:
-    babel-plugin-jest-hoist "^28.1.1"
+    babel-plugin-jest-hoist "^28.1.3"
     babel-preset-current-node-syntax "^1.0.0"
 
 bail@^1.0.0:
@@ -11190,16 +11150,16 @@ expect@^26.6.2:
     jest-message-util "^26.6.2"
     jest-regex-util "^26.0.0"
 
-expect@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-28.1.1.tgz#ca6fff65f6517cf7220c2e805a49c19aea30b420"
-  integrity sha512-/AANEwGL0tWBwzLNOvO0yUdy2D52jVdNXppOqswC49sxMN2cPWsGCQdzuIf9tj6hHoBQzNvx75JUYuQAckPo3w==
+expect@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-28.1.3.tgz#90a7c1a124f1824133dd4533cce2d2bdcb6603ec"
+  integrity sha512-eEh0xn8HlsuOBxFgIss+2mX85VAS4Qy3OSkjV7rlBWljtA4oWH37glVGyOZSZvErDT/yBywZdPGwCXuTvSG85g==
   dependencies:
-    "@jest/expect-utils" "^28.1.1"
+    "@jest/expect-utils" "^28.1.3"
     jest-get-type "^28.0.2"
-    jest-matcher-utils "^28.1.1"
-    jest-message-util "^28.1.1"
-    jest-util "^28.1.1"
+    jest-matcher-utils "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
 
 express@4.17.2:
   version "4.17.2"
@@ -12300,13 +12260,20 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^13.15.0, globals@^13.6.0:
+globals@^13.15.0:
   version "13.15.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.15.0.tgz#38113218c907d2f7e98658af246cef8b77e90bac"
   integrity sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==
   dependencies:
     type-fest "^0.20.2"
 
+globals@^13.6.0:
+  version "13.16.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.16.0.tgz#9be4aca28f311aaeb974ea54978ebbb5e35ce46a"
+  integrity sha512-A1lrQfpNF+McdPOnnFqY3kSN0AFTy485bTi1bkLk4mVPODIUEcSfhHgRqA+QdXPksrSTTztYXx37NFV+GpGk3Q==
+  dependencies:
+    type-fest "^0.20.2"
+
 globalthis@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
@@ -13140,12 +13107,19 @@ image-q@^4.0.0:
   dependencies:
     "@types/node" "16.9.1"
 
+image-size@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-1.0.2.tgz#d778b6d0ab75b2737c1556dd631652eb963bc486"
+  integrity sha512-xfOoWjceHntRb3qFCrh5ZFORYH8XCdYpASltMhZ/Q0KZiOwjdE/Yl2QCiWdwD+lygV5bMCvauzgu5PxBX/Yerg==
+  dependencies:
+    queue "6.0.2"
+
 immediate@~3.0.5:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
   integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
 
-immer@^9.0.12:
+immer@^9.0.15:
   version "9.0.15"
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.15.tgz#0b9169e5b1d22137aba7d43f8a81a495dd1b62dc"
   integrity sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ==
@@ -13969,7 +13943,7 @@ istanbul-lib-source-maps@^4.0.0:
     istanbul-lib-coverage "^3.0.0"
     source-map "^0.6.1"
 
-istanbul-reports@^3.0.2, istanbul-reports@^3.1.3, istanbul-reports@^3.1.4:
+istanbul-reports@^3.0.2, istanbul-reports@^3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.4.tgz#1b6f068ecbc6c331040aab5741991273e609e40c"
   integrity sha512-r1/DshN4KSE7xWEknZLLLLDn5CJybV3nw01VTkp6D5jzLuELlcbudfj/eSQFvrKsJuTVCGnePO7ho82Nw9zzfw==
@@ -13977,6 +13951,14 @@ istanbul-reports@^3.0.2, istanbul-reports@^3.1.3, istanbul-reports@^3.1.4:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
+istanbul-reports@^3.1.3:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.5.tgz#cc9a6ab25cb25659810e4785ed9d9fb742578bae"
+  integrity sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
 isurl@^1.0.0-alpha5:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isurl/-/isurl-1.0.0.tgz#b27f4f49f3cdaa3ea44a0a5b7f3462e6edc39d67"
@@ -14012,38 +13994,38 @@ jest-changed-files@^26.6.2:
     execa "^4.0.0"
     throat "^5.0.0"
 
-jest-changed-files@^28.0.2:
-  version "28.0.2"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-28.0.2.tgz#7d7810660a5bd043af9e9cfbe4d58adb05e91531"
-  integrity sha512-QX9u+5I2s54ZnGoMEjiM2WeBvJR2J7w/8ZUmH2um/WLAuGAYFQcsVXY9+1YL6k0H/AGUdH8pXUAv6erDqEsvIA==
+jest-changed-files@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-28.1.3.tgz#d9aeee6792be3686c47cb988a8eaf82ff4238831"
+  integrity sha512-esaOfUWJXk2nfZt9SPyC8gA1kNfdKLkQWyzsMlqq8msYSlNKfmZxfRgZn4Cd4MGVUF+7v6dBs0d5TOAKa7iIiA==
   dependencies:
     execa "^5.0.0"
-    throat "^6.0.1"
+    p-limit "^3.1.0"
 
-jest-circus@^28.1.2:
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-28.1.2.tgz#0d5a5623eccb244efe87d1edc365696e4fcf80ce"
-  integrity sha512-E2vdPIJG5/69EMpslFhaA46WkcrN74LI5V/cSJ59L7uS8UNoXbzTxmwhpi9XrIL3zqvMt5T0pl5k2l2u2GwBNQ==
+jest-circus@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-28.1.3.tgz#d14bd11cf8ee1a03d69902dc47b6bd4634ee00e4"
+  integrity sha512-cZ+eS5zc79MBwt+IhQhiEp0OeBddpc1n8MBo1nMB8A7oPMKEO+Sre+wHaLJexQUj9Ya/8NOBY0RESUgYjB6fow==
   dependencies:
-    "@jest/environment" "^28.1.2"
-    "@jest/expect" "^28.1.2"
-    "@jest/test-result" "^28.1.1"
-    "@jest/types" "^28.1.1"
+    "@jest/environment" "^28.1.3"
+    "@jest/expect" "^28.1.3"
+    "@jest/test-result" "^28.1.3"
+    "@jest/types" "^28.1.3"
     "@types/node" "*"
     chalk "^4.0.0"
     co "^4.6.0"
     dedent "^0.7.0"
     is-generator-fn "^2.0.0"
-    jest-each "^28.1.1"
-    jest-matcher-utils "^28.1.1"
-    jest-message-util "^28.1.1"
-    jest-runtime "^28.1.2"
-    jest-snapshot "^28.1.2"
-    jest-util "^28.1.1"
-    pretty-format "^28.1.1"
+    jest-each "^28.1.3"
+    jest-matcher-utils "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-runtime "^28.1.3"
+    jest-snapshot "^28.1.3"
+    jest-util "^28.1.3"
+    p-limit "^3.1.0"
+    pretty-format "^28.1.3"
     slash "^3.0.0"
     stack-utils "^2.0.3"
-    throat "^6.0.1"
 
 jest-cli@^26.6.3:
   version "26.6.3"
@@ -14064,21 +14046,21 @@ jest-cli@^26.6.3:
     prompts "^2.0.1"
     yargs "^15.4.1"
 
-jest-cli@^28.1.2:
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-28.1.2.tgz#b89012e5bad14135e71b1628b85475d3773a1bbc"
-  integrity sha512-l6eoi5Do/IJUXAFL9qRmDiFpBeEJAnjJb1dcd9i/VWfVWbp3mJhuH50dNtX67Ali4Ecvt4eBkWb4hXhPHkAZTw==
+jest-cli@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-28.1.3.tgz#558b33c577d06de55087b8448d373b9f654e46b2"
+  integrity sha512-roY3kvrv57Azn1yPgdTebPAXvdR2xfezaKKYzVxZ6It/5NCxzJym6tUI5P1zkdWhfUYkxEI9uZWcQdaFLo8mJQ==
   dependencies:
-    "@jest/core" "^28.1.2"
-    "@jest/test-result" "^28.1.1"
-    "@jest/types" "^28.1.1"
+    "@jest/core" "^28.1.3"
+    "@jest/test-result" "^28.1.3"
+    "@jest/types" "^28.1.3"
     chalk "^4.0.0"
     exit "^0.1.2"
     graceful-fs "^4.2.9"
     import-local "^3.0.2"
-    jest-config "^28.1.2"
-    jest-util "^28.1.1"
-    jest-validate "^28.1.1"
+    jest-config "^28.1.3"
+    jest-util "^28.1.3"
+    jest-validate "^28.1.3"
     prompts "^2.0.1"
     yargs "^17.3.1"
 
@@ -14106,31 +14088,31 @@ jest-config@^26.6.3:
     micromatch "^4.0.2"
     pretty-format "^26.6.2"
 
-jest-config@^28.1.2:
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-28.1.2.tgz#ba00ad30caf62286c86e7c1099e915218a0ac8c6"
-  integrity sha512-g6EfeRqddVbjPVBVY4JWpUY4IvQoFRIZcv4V36QkqzE0IGhEC/VkugFeBMAeUE7PRgC8KJF0yvJNDeQRbamEVA==
+jest-config@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-28.1.3.tgz#e315e1f73df3cac31447eed8b8740a477392ec60"
+  integrity sha512-MG3INjByJ0J4AsNBm7T3hsuxKQqFIiRo/AUqb1q9LRKI5UU6Aar9JHbr9Ivn1TVwfUD9KirRoM/T6u8XlcQPHQ==
   dependencies:
     "@babel/core" "^7.11.6"
-    "@jest/test-sequencer" "^28.1.1"
-    "@jest/types" "^28.1.1"
-    babel-jest "^28.1.2"
+    "@jest/test-sequencer" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    babel-jest "^28.1.3"
     chalk "^4.0.0"
     ci-info "^3.2.0"
     deepmerge "^4.2.2"
     glob "^7.1.3"
     graceful-fs "^4.2.9"
-    jest-circus "^28.1.2"
-    jest-environment-node "^28.1.2"
+    jest-circus "^28.1.3"
+    jest-environment-node "^28.1.3"
     jest-get-type "^28.0.2"
     jest-regex-util "^28.0.2"
-    jest-resolve "^28.1.1"
-    jest-runner "^28.1.2"
-    jest-util "^28.1.1"
-    jest-validate "^28.1.1"
+    jest-resolve "^28.1.3"
+    jest-runner "^28.1.3"
+    jest-util "^28.1.3"
+    jest-validate "^28.1.3"
     micromatch "^4.0.4"
     parse-json "^5.2.0"
-    pretty-format "^28.1.1"
+    pretty-format "^28.1.3"
     slash "^3.0.0"
     strip-json-comments "^3.1.1"
 
@@ -14154,15 +14136,15 @@ jest-diff@^27.5.1:
     jest-get-type "^27.5.1"
     pretty-format "^27.5.1"
 
-jest-diff@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-28.1.1.tgz#1a3eedfd81ae79810931c63a1d0f201b9120106c"
-  integrity sha512-/MUUxeR2fHbqHoMMiffe/Afm+U8U4olFRJ0hiVG2lZatPJcnGxx292ustVu7bULhjV65IYMxRdploAKLbcrsyg==
+jest-diff@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-28.1.3.tgz#948a192d86f4e7a64c5264ad4da4877133d8792f"
+  integrity sha512-8RqP1B/OXzjjTWkqMX67iqgwBVJRgCyKD3L9nq+6ZqJMdvjE8RgHktqZ6jNrkdMT+dJuYNI3rhQpxaz7drJHfw==
   dependencies:
     chalk "^4.0.0"
     diff-sequences "^28.1.1"
     jest-get-type "^28.0.2"
-    pretty-format "^28.1.1"
+    pretty-format "^28.1.3"
 
 jest-docblock@^26.0.0:
   version "26.0.0"
@@ -14189,16 +14171,16 @@ jest-each@^26.6.2:
     jest-util "^26.6.2"
     pretty-format "^26.6.2"
 
-jest-each@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-28.1.1.tgz#ba5238dacf4f31d9fe23ddc2c44c01e7c23885c4"
-  integrity sha512-A042rqh17ZvEhRceDMi784ppoXR7MWGDEKTXEZXb4svt0eShMZvijGxzKsx+yIjeE8QYmHPrnHiTSQVhN4nqaw==
+jest-each@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-28.1.3.tgz#bdd1516edbe2b1f3569cfdad9acd543040028f81"
+  integrity sha512-arT1z4sg2yABU5uogObVPvSlSMQlDA48owx07BDPAiasW0yYpYHYOo4HHLz9q0BVzDVU4hILFjzJw0So9aCL/g==
   dependencies:
-    "@jest/types" "^28.1.1"
+    "@jest/types" "^28.1.3"
     chalk "^4.0.0"
     jest-get-type "^28.0.2"
-    jest-util "^28.1.1"
-    pretty-format "^28.1.1"
+    jest-util "^28.1.3"
+    pretty-format "^28.1.3"
 
 jest-environment-jsdom@^26.6.2:
   version "26.6.2"
@@ -14225,17 +14207,17 @@ jest-environment-node@^26.6.2:
     jest-mock "^26.6.2"
     jest-util "^26.6.2"
 
-jest-environment-node@^28.1.2:
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-28.1.2.tgz#3e2eb47f6d173b0648d5f7c717cb1c26651d5c8a"
-  integrity sha512-oYsZz9Qw27XKmOgTtnl0jW7VplJkN2oeof+SwAwKFQacq3CLlG9u4kTGuuLWfvu3J7bVutWlrbEQMOCL/jughw==
+jest-environment-node@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-28.1.3.tgz#7e74fe40eb645b9d56c0c4b70ca4357faa349be5"
+  integrity sha512-ugP6XOhEpjAEhGYvp5Xj989ns5cB1K6ZdjBYuS30umT4CQEETaxSiPcZ/E1kFktX4GkrcM4qu07IIlDYX1gp+A==
   dependencies:
-    "@jest/environment" "^28.1.2"
-    "@jest/fake-timers" "^28.1.2"
-    "@jest/types" "^28.1.1"
+    "@jest/environment" "^28.1.3"
+    "@jest/fake-timers" "^28.1.3"
+    "@jest/types" "^28.1.3"
     "@types/node" "*"
-    jest-mock "^28.1.1"
-    jest-util "^28.1.1"
+    jest-mock "^28.1.3"
+    jest-util "^28.1.3"
 
 jest-get-type@^26.3.0:
   version "26.3.0"
@@ -14293,20 +14275,20 @@ jest-haste-map@^27.5.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
-jest-haste-map@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-28.1.1.tgz#471685f1acd365a9394745bb97c8fc16289adca3"
-  integrity sha512-ZrRSE2o3Ezh7sb1KmeLEZRZ4mgufbrMwolcFHNRSjKZhpLa8TdooXOOFlSwoUzlbVs1t0l7upVRW2K7RWGHzbQ==
+jest-haste-map@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-28.1.3.tgz#abd5451129a38d9841049644f34b034308944e2b"
+  integrity sha512-3S+RQWDXccXDKSWnkHa/dPwt+2qwA8CJzR61w3FoYCvoo3Pn8tvGcysmMF0Bj0EX5RYvAI2EIvC57OmotfdtKA==
   dependencies:
-    "@jest/types" "^28.1.1"
+    "@jest/types" "^28.1.3"
     "@types/graceful-fs" "^4.1.3"
     "@types/node" "*"
     anymatch "^3.0.3"
     fb-watchman "^2.0.0"
     graceful-fs "^4.2.9"
     jest-regex-util "^28.0.2"
-    jest-util "^28.1.1"
-    jest-worker "^28.1.1"
+    jest-util "^28.1.3"
+    jest-worker "^28.1.3"
     micromatch "^4.0.4"
     walker "^1.0.8"
   optionalDependencies:
@@ -14344,13 +14326,13 @@ jest-leak-detector@^26.6.2:
     jest-get-type "^26.3.0"
     pretty-format "^26.6.2"
 
-jest-leak-detector@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-28.1.1.tgz#537f37afd610a4b3f4cab15e06baf60484548efb"
-  integrity sha512-4jvs8V8kLbAaotE+wFR7vfUGf603cwYtFf1/PYEsyX2BAjSzj8hQSVTP6OWzseTl0xL6dyHuKs2JAks7Pfubmw==
+jest-leak-detector@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-28.1.3.tgz#a6685d9b074be99e3adee816ce84fd30795e654d"
+  integrity sha512-WFVJhnQsiKtDEo5lG2mM0v40QWnBM+zMdHHyJs8AWZ7J0QZJS59MsyKeJHWhpBZBH32S48FOVvGyOFT1h0DlqA==
   dependencies:
     jest-get-type "^28.0.2"
-    pretty-format "^28.1.1"
+    pretty-format "^28.1.3"
 
 jest-matcher-utils@^26.6.2:
   version "26.6.2"
@@ -14372,15 +14354,15 @@ jest-matcher-utils@^27.0.0:
     jest-get-type "^27.5.1"
     pretty-format "^27.5.1"
 
-jest-matcher-utils@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-28.1.1.tgz#a7c4653c2b782ec96796eb3088060720f1e29304"
-  integrity sha512-NPJPRWrbmR2nAJ+1nmnfcKKzSwgfaciCCrYZzVnNoxVoyusYWIjkBMNvu0RHJe7dNj4hH3uZOPZsQA+xAYWqsw==
+jest-matcher-utils@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-28.1.3.tgz#5a77f1c129dd5ba3b4d7fc20728806c78893146e"
+  integrity sha512-kQeJ7qHemKfbzKoGjHHrRKH6atgxMk8Enkk2iPQ3XwO6oE/KYD8lMYOziCkeSB9G4adPM4nR1DE8Tf5JeWH6Bw==
   dependencies:
     chalk "^4.0.0"
-    jest-diff "^28.1.1"
+    jest-diff "^28.1.3"
     jest-get-type "^28.0.2"
-    pretty-format "^28.1.1"
+    pretty-format "^28.1.3"
 
 jest-message-util@^26.6.2:
   version "26.6.2"
@@ -14397,18 +14379,18 @@ jest-message-util@^26.6.2:
     slash "^3.0.0"
     stack-utils "^2.0.2"
 
-jest-message-util@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-28.1.1.tgz#60aa0b475cfc08c8a9363ed2fb9108514dd9ab89"
-  integrity sha512-xoDOOT66fLfmTRiqkoLIU7v42mal/SqwDKvfmfiWAdJMSJiU+ozgluO7KbvoAgiwIrrGZsV7viETjc8GNrA/IQ==
+jest-message-util@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-28.1.3.tgz#232def7f2e333f1eecc90649b5b94b0055e7c43d"
+  integrity sha512-PFdn9Iewbt575zKPf1286Ht9EPoJmYT7P0kY+RibeYZ2XtOr53pDLEFoTWXbd1h4JiGiWpTBC84fc8xMXQMb7g==
   dependencies:
     "@babel/code-frame" "^7.12.13"
-    "@jest/types" "^28.1.1"
+    "@jest/types" "^28.1.3"
     "@types/stack-utils" "^2.0.0"
     chalk "^4.0.0"
     graceful-fs "^4.2.9"
     micromatch "^4.0.4"
-    pretty-format "^28.1.1"
+    pretty-format "^28.1.3"
     slash "^3.0.0"
     stack-utils "^2.0.3"
 
@@ -14428,12 +14410,12 @@ jest-mock@^27.0.6:
     "@jest/types" "^27.5.1"
     "@types/node" "*"
 
-jest-mock@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-28.1.1.tgz#37903d269427fa1ef5b2447be874e1c62a39a371"
-  integrity sha512-bDCb0FjfsmKweAvE09dZT59IMkzgN0fYBH6t5S45NoJfd2DHkS3ySG2K+hucortryhO3fVuXdlxWcbtIuV/Skw==
+jest-mock@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-28.1.3.tgz#d4e9b1fc838bea595c77ab73672ebf513ab249da"
+  integrity sha512-o3J2jr6dMMWYVH4Lh/NKmDXdosrsJgi4AviS8oXLujcjpCMBb1FMsblDnOXKZKfSiHLxYub1eS0IHuRXsio9eA==
   dependencies:
-    "@jest/types" "^28.1.1"
+    "@jest/types" "^28.1.3"
     "@types/node" "*"
 
 jest-pnp-resolver@^1.2.2:
@@ -14465,13 +14447,13 @@ jest-resolve-dependencies@^26.6.3:
     jest-regex-util "^26.0.0"
     jest-snapshot "^26.6.2"
 
-jest-resolve-dependencies@^28.1.2:
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-28.1.2.tgz#ca528858e0c6642d5a1dda8fc7cda10230c275bc"
-  integrity sha512-OXw4vbOZuyRTBi3tapWBqdyodU+T33ww5cPZORuTWkg+Y8lmsxQlVu3MWtJh6NMlKRTHQetF96yGPv01Ye7Mbg==
+jest-resolve-dependencies@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-28.1.3.tgz#8c65d7583460df7275c6ea2791901fa975c1fe66"
+  integrity sha512-qa0QO2Q0XzQoNPouMbCc7Bvtsem8eQgVPNkwn9LnS+R2n8DaVDPL/U1gngC0LTl1RYXJU0uJa2BMC2DbTfFrHA==
   dependencies:
     jest-regex-util "^28.0.2"
-    jest-snapshot "^28.1.2"
+    jest-snapshot "^28.1.3"
 
 jest-resolve@^26.6.2:
   version "26.6.2"
@@ -14487,17 +14469,17 @@ jest-resolve@^26.6.2:
     resolve "^1.18.1"
     slash "^3.0.0"
 
-jest-resolve@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-28.1.1.tgz#bc2eaf384abdcc1aaf3ba7c50d1adf01e59095e5"
-  integrity sha512-/d1UbyUkf9nvsgdBildLe6LAD4DalgkgZcKd0nZ8XUGPyA/7fsnaQIlKVnDiuUXv/IeZhPEDrRJubVSulxrShA==
+jest-resolve@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-28.1.3.tgz#cfb36100341ddbb061ec781426b3c31eb51aa0a8"
+  integrity sha512-Z1W3tTjE6QaNI90qo/BJpfnvpxtaFTFw5CDgwpyE/Kz8U/06N1Hjf4ia9quUhCh39qIGWF1ZuxFiBiJQwSEYKQ==
   dependencies:
     chalk "^4.0.0"
     graceful-fs "^4.2.9"
-    jest-haste-map "^28.1.1"
+    jest-haste-map "^28.1.3"
     jest-pnp-resolver "^1.2.2"
-    jest-util "^28.1.1"
-    jest-validate "^28.1.1"
+    jest-util "^28.1.3"
+    jest-validate "^28.1.3"
     resolve "^1.20.0"
     resolve.exports "^1.1.0"
     slash "^3.0.0"
@@ -14528,32 +14510,32 @@ jest-runner@^26.6.3:
     source-map-support "^0.5.6"
     throat "^5.0.0"
 
-jest-runner@^28.1.2:
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-28.1.2.tgz#f293409592a62234285a71237e38499a3554e350"
-  integrity sha512-6/k3DlAsAEr5VcptCMdhtRhOoYClZQmxnVMZvZ/quvPGRpN7OBQYPIC32tWSgOnbgqLXNs5RAniC+nkdFZpD4A==
+jest-runner@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-28.1.3.tgz#5eee25febd730b4713a2cdfd76bdd5557840f9a1"
+  integrity sha512-GkMw4D/0USd62OVO0oEgjn23TM+YJa2U2Wu5zz9xsQB1MxWKDOlrnykPxnMsN0tnJllfLPinHTka61u0QhaxBA==
   dependencies:
-    "@jest/console" "^28.1.1"
-    "@jest/environment" "^28.1.2"
-    "@jest/test-result" "^28.1.1"
-    "@jest/transform" "^28.1.2"
-    "@jest/types" "^28.1.1"
+    "@jest/console" "^28.1.3"
+    "@jest/environment" "^28.1.3"
+    "@jest/test-result" "^28.1.3"
+    "@jest/transform" "^28.1.3"
+    "@jest/types" "^28.1.3"
     "@types/node" "*"
     chalk "^4.0.0"
     emittery "^0.10.2"
     graceful-fs "^4.2.9"
     jest-docblock "^28.1.1"
-    jest-environment-node "^28.1.2"
-    jest-haste-map "^28.1.1"
-    jest-leak-detector "^28.1.1"
-    jest-message-util "^28.1.1"
-    jest-resolve "^28.1.1"
-    jest-runtime "^28.1.2"
-    jest-util "^28.1.1"
-    jest-watcher "^28.1.1"
-    jest-worker "^28.1.1"
+    jest-environment-node "^28.1.3"
+    jest-haste-map "^28.1.3"
+    jest-leak-detector "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-resolve "^28.1.3"
+    jest-runtime "^28.1.3"
+    jest-util "^28.1.3"
+    jest-watcher "^28.1.3"
+    jest-worker "^28.1.3"
+    p-limit "^3.1.0"
     source-map-support "0.5.13"
-    throat "^6.0.1"
 
 jest-runtime@^26.6.3:
   version "26.6.3"
@@ -14588,31 +14570,31 @@ jest-runtime@^26.6.3:
     strip-bom "^4.0.0"
     yargs "^15.4.1"
 
-jest-runtime@^28.1.2:
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-28.1.2.tgz#d68f34f814a848555a345ceda23289f14d59a688"
-  integrity sha512-i4w93OsWzLOeMXSi9epmakb2+3z0AchZtUQVF1hesBmcQQy4vtaql5YdVe9KexdJaVRyPDw8DoBR0j3lYsZVYw==
+jest-runtime@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-28.1.3.tgz#a57643458235aa53e8ec7821949e728960d0605f"
+  integrity sha512-NU+881ScBQQLc1JHG5eJGU7Ui3kLKrmwCPPtYsJtBykixrM2OhVQlpMmFWJjMyDfdkGgBMNjXCGB/ebzsgNGQw==
   dependencies:
-    "@jest/environment" "^28.1.2"
-    "@jest/fake-timers" "^28.1.2"
-    "@jest/globals" "^28.1.2"
+    "@jest/environment" "^28.1.3"
+    "@jest/fake-timers" "^28.1.3"
+    "@jest/globals" "^28.1.3"
     "@jest/source-map" "^28.1.2"
-    "@jest/test-result" "^28.1.1"
-    "@jest/transform" "^28.1.2"
-    "@jest/types" "^28.1.1"
+    "@jest/test-result" "^28.1.3"
+    "@jest/transform" "^28.1.3"
+    "@jest/types" "^28.1.3"
     chalk "^4.0.0"
     cjs-module-lexer "^1.0.0"
     collect-v8-coverage "^1.0.0"
     execa "^5.0.0"
     glob "^7.1.3"
     graceful-fs "^4.2.9"
-    jest-haste-map "^28.1.1"
-    jest-message-util "^28.1.1"
-    jest-mock "^28.1.1"
+    jest-haste-map "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-mock "^28.1.3"
     jest-regex-util "^28.0.2"
-    jest-resolve "^28.1.1"
-    jest-snapshot "^28.1.2"
-    jest-util "^28.1.1"
+    jest-resolve "^28.1.3"
+    jest-snapshot "^28.1.3"
+    jest-util "^28.1.3"
     slash "^3.0.0"
     strip-bom "^4.0.0"
 
@@ -14654,33 +14636,33 @@ jest-snapshot@^26.6.2:
     pretty-format "^26.6.2"
     semver "^7.3.2"
 
-jest-snapshot@^28.1.2:
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-28.1.2.tgz#93d31b87b11b384f5946fe0767541496135f8d52"
-  integrity sha512-wzrieFttZYfLvrCVRJxX+jwML2YTArOUqFpCoSVy1QUapx+LlV9uLbV/mMEhYj4t7aMeE9aSQFHSvV/oNoDAMA==
+jest-snapshot@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-28.1.3.tgz#17467b3ab8ddb81e2f605db05583d69388fc0668"
+  integrity sha512-4lzMgtiNlc3DU/8lZfmqxN3AYD6GGLbl+72rdBpXvcV+whX7mDrREzkPdp2RnmfIiWBg1YbuFSkXduF2JcafJg==
   dependencies:
     "@babel/core" "^7.11.6"
     "@babel/generator" "^7.7.2"
     "@babel/plugin-syntax-typescript" "^7.7.2"
     "@babel/traverse" "^7.7.2"
     "@babel/types" "^7.3.3"
-    "@jest/expect-utils" "^28.1.1"
-    "@jest/transform" "^28.1.2"
-    "@jest/types" "^28.1.1"
+    "@jest/expect-utils" "^28.1.3"
+    "@jest/transform" "^28.1.3"
+    "@jest/types" "^28.1.3"
     "@types/babel__traverse" "^7.0.6"
     "@types/prettier" "^2.1.5"
     babel-preset-current-node-syntax "^1.0.0"
     chalk "^4.0.0"
-    expect "^28.1.1"
+    expect "^28.1.3"
     graceful-fs "^4.2.9"
-    jest-diff "^28.1.1"
+    jest-diff "^28.1.3"
     jest-get-type "^28.0.2"
-    jest-haste-map "^28.1.1"
-    jest-matcher-utils "^28.1.1"
-    jest-message-util "^28.1.1"
-    jest-util "^28.1.1"
+    jest-haste-map "^28.1.3"
+    jest-matcher-utils "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
     natural-compare "^1.4.0"
-    pretty-format "^28.1.1"
+    pretty-format "^28.1.3"
     semver "^7.3.5"
 
 jest-util@^26.1.0, jest-util@^26.6.2:
@@ -14707,12 +14689,12 @@ jest-util@^27.5.1:
     graceful-fs "^4.2.9"
     picomatch "^2.2.3"
 
-jest-util@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-28.1.1.tgz#ff39e436a1aca397c0ab998db5a51ae2b7080d05"
-  integrity sha512-FktOu7ca1DZSyhPAxgxB6hfh2+9zMoJ7aEQA759Z6p45NuO8mWcqujH+UdHlCm/V6JTWwDztM2ITCzU1ijJAfw==
+jest-util@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-28.1.3.tgz#f4f932aa0074f0679943220ff9cbba7e497028b0"
+  integrity sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==
   dependencies:
-    "@jest/types" "^28.1.1"
+    "@jest/types" "^28.1.3"
     "@types/node" "*"
     chalk "^4.0.0"
     ci-info "^3.2.0"
@@ -14731,17 +14713,17 @@ jest-validate@^26.6.2:
     leven "^3.1.0"
     pretty-format "^26.6.2"
 
-jest-validate@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-28.1.1.tgz#59b7b339b3c85b5144bd0c06ad3600f503a4acc8"
-  integrity sha512-Kpf6gcClqFCIZ4ti5++XemYJWUPCFUW+N2gknn+KgnDf549iLul3cBuKVe1YcWRlaF8tZV8eJCap0eECOEE3Ug==
+jest-validate@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-28.1.3.tgz#e322267fd5e7c64cea4629612c357bbda96229df"
+  integrity sha512-SZbOGBWEsaTxBGCOpsRWlXlvNkvTkY0XxRfh7zYmvd8uL5Qzyg0CHAXiXKROflh801quA6+/DsT4ODDthOC/OA==
   dependencies:
-    "@jest/types" "^28.1.1"
+    "@jest/types" "^28.1.3"
     camelcase "^6.2.0"
     chalk "^4.0.0"
     jest-get-type "^28.0.2"
     leven "^3.1.0"
-    pretty-format "^28.1.1"
+    pretty-format "^28.1.3"
 
 jest-watcher@^26.6.2:
   version "26.6.2"
@@ -14756,18 +14738,18 @@ jest-watcher@^26.6.2:
     jest-util "^26.6.2"
     string-length "^4.0.1"
 
-jest-watcher@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-28.1.1.tgz#533597fb3bfefd52b5cd115cd916cffd237fb60c"
-  integrity sha512-RQIpeZ8EIJMxbQrXpJQYIIlubBnB9imEHsxxE41f54ZwcqWLysL/A0ZcdMirf+XsMn3xfphVQVV4EW0/p7i7Ug==
+jest-watcher@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-28.1.3.tgz#c6023a59ba2255e3b4c57179fc94164b3e73abd4"
+  integrity sha512-t4qcqj9hze+jviFPUN3YAtAEeFnr/azITXQEMARf5cMwKY2SMBRnCQTXLixTl20OR6mLh9KLMrgVJgJISym+1g==
   dependencies:
-    "@jest/test-result" "^28.1.1"
-    "@jest/types" "^28.1.1"
+    "@jest/test-result" "^28.1.3"
+    "@jest/types" "^28.1.3"
     "@types/node" "*"
     ansi-escapes "^4.2.1"
     chalk "^4.0.0"
     emittery "^0.10.2"
-    jest-util "^28.1.1"
+    jest-util "^28.1.3"
     string-length "^4.0.1"
 
 jest-worker@^26.5.0, jest-worker@^26.6.2:
@@ -14788,10 +14770,10 @@ jest-worker@^27.4.5, jest-worker@^27.5.1:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jest-worker@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-28.1.1.tgz#3480c73247171dfd01eda77200f0063ab6a3bf28"
-  integrity sha512-Au7slXB08C6h+xbJPp7VIb6U0XX5Kc9uel/WFc6/rcTzGiaVCBRngBExSYuXSLFPULPSYU3cJ3ybS988lNFQhQ==
+jest-worker@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-28.1.3.tgz#7e3c4ce3fa23d1bb6accb169e7f396f98ed4bb98"
+  integrity sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g==
   dependencies:
     "@types/node" "*"
     merge-stream "^2.0.0"
@@ -14807,14 +14789,14 @@ jest@^26.0.0:
     jest-cli "^26.6.3"
 
 jest@^28.1.0:
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-28.1.2.tgz#451ff24081ce31ca00b07b60c61add13aa96f8eb"
-  integrity sha512-Tuf05DwLeCh2cfWCQbcz9UxldoDyiR1E9Igaei5khjonKncYdc6LDfynKCEWozK0oLE3GD+xKAo2u8x/0s6GOg==
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-28.1.3.tgz#e9c6a7eecdebe3548ca2b18894a50f45b36dfc6b"
+  integrity sha512-N4GT5on8UkZgH0O5LUavMRV1EDEhNTL0KEfRmDIeZHSV7p2XgLoY9t9VDUgL6o+yfdgYHVxuz81G8oB9VG5uyA==
   dependencies:
-    "@jest/core" "^28.1.2"
-    "@jest/types" "^28.1.1"
+    "@jest/core" "^28.1.3"
+    "@jest/types" "^28.1.3"
     import-local "^3.0.2"
-    jest-cli "^28.1.2"
+    jest-cli "^28.1.3"
 
 jimp@^0.16.1:
   version "0.16.1"
@@ -15391,6 +15373,11 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
+loader-utils@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-3.2.0.tgz#bcecc51a7898bee7473d4bc6b845b23af8304d4f"
+  integrity sha512-HVl9ZqccQihZ7JM85dco1MvO9G+ONvxoGa9rkhzFsneGLKSUg1gJf9bWzhRhcvm2qChhWpebQhP44qxjKIUCaQ==
+
 localforage@^1.8.1:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
@@ -17046,6 +17033,11 @@ next-themes@^0.0.8:
   resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.8.tgz#2a1748317085afbc2509e2c32bd04af4f0f6cb7d"
   integrity sha512-dyrh+/bZW4hkecFEg2rfwOLLzU2UnE7KfiwcV0mIwkPrO+1n1WvwkC8nabgKA5Eoi8stkYfjmA72FxTaWEOHtg==
 
+next-themes@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.0.tgz#fdc507f61e95b3ae513dee8d4783bcec8c02e3a3"
+  integrity sha512-myhpDL4vadBD9YDSHiewqvzorGzB03N84e+3LxCwHRlM/hiBOaW+UsKsQojQAzC7fdcJA0l2ppveXcYaVV+hxQ==
+
 next-tick@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
@@ -17806,7 +17798,7 @@ p-limit@^2.0.0, p-limit@^2.2.0:
   dependencies:
     p-try "^2.0.0"
 
-p-limit@^3.0.2:
+p-limit@^3.0.2, p-limit@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
   integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
@@ -18463,6 +18455,15 @@ postcss-loader@^4.2.0:
     schema-utils "^3.0.0"
     semver "^7.3.4"
 
+postcss-loader@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-6.2.1.tgz#0895f7346b1702103d30fdc66e4d494a93c008ef"
+  integrity sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==
+  dependencies:
+    cosmiconfig "^7.0.0"
+    klona "^2.0.5"
+    semver "^7.3.5"
+
 postcss-loader@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-7.0.1.tgz#4c883cc0a1b2bfe2074377b7a74c1cd805684395"
@@ -18570,7 +18571,7 @@ postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.2.15, postcss@^8.4.13, postcss@^8.4.14:
+postcss@^8.2.14, postcss@^8.2.15, postcss@^8.4.13, postcss@^8.4.14:
   version "8.4.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
   integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
@@ -18690,12 +18691,12 @@ pretty-format@^27.0.0, pretty-format@^27.5.1:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty-format@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-28.1.1.tgz#f731530394e0f7fcd95aba6b43c50e02d86b95cb"
-  integrity sha512-wwJbVTGFHeucr5Jw2bQ9P+VYHyLdAqedFLEkdQUVaBF/eiidDwH5OpilINq4mEfhbCjLnirt6HTTDhv1HaTIQw==
+pretty-format@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-28.1.3.tgz#c9fba8cedf99ce50963a11b27d982a9ae90970d5"
+  integrity sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==
   dependencies:
-    "@jest/schemas" "^28.0.2"
+    "@jest/schemas" "^28.1.3"
     ansi-regex "^5.0.1"
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
@@ -18721,15 +18722,16 @@ prism-react-renderer@^1.1.1:
   integrity sha512-xUeDMEz074d0zc5y6rxiMp/dlC7C+5IDDlaEUlcBOFE2wddz7hz5PNupb087mPwTt7T9BrFmewObfCBuf/LKwQ==
 
 prisma-field-encryption@^1.4.0-beta.2:
-  version "1.4.0-beta.2"
-  resolved "https://registry.yarnpkg.com/prisma-field-encryption/-/prisma-field-encryption-1.4.0-beta.2.tgz#a217aa9337e7b0b09b52b0313f590ff01d03c64c"
-  integrity sha512-UbRxhDxGXRFT9TRC+GntbuUeGkvQqbNmImJJUBvmeQJLdHfiTMPFSSDHijl4vUy2sCiD+SPMcokMKgXPwyUs6A==
+  version "1.4.0-beta.5"
+  resolved "https://registry.yarnpkg.com/prisma-field-encryption/-/prisma-field-encryption-1.4.0-beta.5.tgz#c084f4ad3fb28473969df97dd5044dd818009402"
+  integrity sha512-ABTLI34UdstcymWUA3TLHxx8TSkaVxjv0XZ3XuuMoEmo2sOh2D6tteaTDF+kOtzGCacnvAFIBclf4xG9pbCdOA==
   dependencies:
-    "@47ng/cloak" "^1.1.0-beta.2"
-    "@prisma/generator-helper" "^3.13.0"
-    immer "^9.0.12"
+    "@47ng/cloak" "^1.1.0"
+    "@prisma/generator-helper" "^4.0.0"
+    debug "^4.3.4"
+    immer "^9.0.15"
     object-path "^0.11.8"
-    zod "^3.15.1"
+    zod "^3.17.3"
 
 prisma@^4.1.0:
   version "4.1.0"
@@ -19007,7 +19009,7 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-queue@^6.0.2:
+queue@6.0.2, queue@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/queue/-/queue-6.0.2.tgz#b91525283e2315c7553d2efa18d83e76432fed65"
   integrity sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==
@@ -19138,9 +19140,9 @@ react-calendar@^3.3.1:
     prop-types "^15.6.0"
 
 react-chartjs-2@^4.0.1:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.2.0.tgz#bc5693a8b161f125301cf28ab0fe980d7dce54aa"
-  integrity sha512-9Vm9Sg9XAKiR579/FnBkesofjW9goaaFLfS7XlGTzUJlWFZGSE6A/pBI6+i/bP3pobKZoFcWJdFnjShytToqXw==
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz#9941e7397fb963f28bb557addb401e9ff96c6681"
+  integrity sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA==
 
 react-colorful@^5.5.1:
   version "5.5.1"
@@ -19761,6 +19763,11 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regex-parser@^2.2.11:
+  version "2.2.11"
+  resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.11.tgz#3b37ec9049e19479806e878cabe7c1ca83ccfe58"
+  integrity sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==
+
 regexp.prototype.flags@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz#b3f4c0059af9e47eca9f3f660e51d81307e72307"
@@ -20088,6 +20095,17 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-url-loader@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-5.0.0.tgz#ee3142fb1f1e0d9db9524d539cfa166e9314f795"
+  integrity sha512-uZtduh8/8srhBoMx//5bwqjQ+rfYOUq8zC9NrMUGtjBiGTtFJM42s58/36+hTqeqINcnYe08Nj3LkK9lW4N8Xg==
+  dependencies:
+    adjust-sourcemap-loader "^4.0.0"
+    convert-source-map "^1.7.0"
+    loader-utils "^2.0.0"
+    postcss "^8.2.14"
+    source-map "0.6.1"
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -20316,6 +20334,14 @@ saslprep@^1.0.3:
   dependencies:
     sparse-bitfield "^3.0.3"
 
+sass-loader@^12.4.0:
+  version "12.6.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.6.0.tgz#5148362c8e2cdd4b950f3c63ac5d16dbfed37bcb"
+  integrity sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==
+  dependencies:
+    klona "^2.0.4"
+    neo-async "^2.6.2"
+
 sax@>=0.6.0, sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -20858,16 +20884,16 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
 source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
 source-map@^0.7.0, source-map@^0.7.3:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
@@ -21043,6 +21069,21 @@ storybook-addon-next-router@^4.0.0:
   dependencies:
     tslib "^2.3.0"
 
+storybook-addon-next@^1.6.7:
+  version "1.6.7"
+  resolved "https://registry.yarnpkg.com/storybook-addon-next/-/storybook-addon-next-1.6.7.tgz#f4b40bc8a6014e3b20508e31fec3f2e0d48379dd"
+  integrity sha512-ltnHboGekSr6+UWv3MNl+0GaOyIWjTHN8Z5rc2te3bB1gq46W6JEML4XVNflFdANhKvVHayAxMOr7oeT3LMc2Q==
+  dependencies:
+    "@storybook/addons" "^6.4.10"
+    image-size "^1.0.0"
+    loader-utils "^3.2.0"
+    postcss-loader "^6.2.1"
+    resolve-url-loader "^5.0.0"
+    sass-loader "^12.4.0"
+    semver "^7.3.5"
+    tsconfig-paths "^4.0.0"
+    tsconfig-paths-webpack-plugin "^3.5.2"
+
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
@@ -21807,11 +21848,6 @@ throat@^5.0.0:
   resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
   integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
 
-throat@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"
-  integrity sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==
-
 throttle-debounce@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
@@ -24129,16 +24165,16 @@ zod-prisma@^0.5.4:
     parenthesis "^3.1.8"
     ts-morph "^13.0.2"
 
-zod@^3.15.1:
-  version "3.17.3"
-  resolved "https://registry.yarnpkg.com/zod/-/zod-3.17.3.tgz#86abbc670ff0063a4588d85a4dcc917d6e4af2ba"
-  integrity sha512-4oKP5zvG6GGbMlqBkI5FESOAweldEhSOZ6LI6cG+JzUT7ofj1ZOC0PJudpQOpT1iqOFpYYtX5Pw0+o403y4bcg==
-
 zod@^3.16.0:
   version "3.16.0"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.16.0.tgz#edfdbf77fcc9a5af13a2630a44bdda5b90e759b7"
   integrity sha512-szrIkryADbTM+xBt2a1KoS2CJQXec4f9xG78bj5MJeEH/XqmmHpnO+fG3IE115AKBJak+2HrbxLZkc9mhdbDKA==
 
+zod@^3.17.3:
+  version "3.17.3"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.17.3.tgz#86abbc670ff0063a4588d85a4dcc917d6e4af2ba"
+  integrity sha512-4oKP5zvG6GGbMlqBkI5FESOAweldEhSOZ6LI6cG+JzUT7ofj1ZOC0PJudpQOpT1iqOFpYYtX5Pw0+o403y4bcg==
+
 zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"