diff --git a/apps/storybook/.gitignore b/apps/storybook/.gitignore
old mode 100755
new mode 100644
index 1144627266..a547bf36d8
--- a/apps/storybook/.gitignore
+++ b/apps/storybook/.gitignore
@@ -1,38 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-next-env.d.ts
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# local env files
-.env*.local
+node_modules
+dist
+dist-ssr
+*.local
 
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-
-storybook-static/
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/storybook/.storybook/i18next.js b/apps/storybook/.storybook/i18next.js
new file mode 100644
index 0000000000..ca49d8044e
--- /dev/null
+++ b/apps/storybook/.storybook/i18next.js
@@ -0,0 +1,9 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+i18n.use(initReactI18next).init({
+  resources: [],
+  debug: true,
+});
+
+export default i18n;
diff --git a/apps/storybook/.storybook/main.js b/apps/storybook/.storybook/main.js
index 25981f3543..d2d013bcb7 100644
--- a/apps/storybook/.storybook/main.js
+++ b/apps/storybook/.storybook/main.js
@@ -1,34 +1,29 @@
 const path = require("path");
 
 module.exports = {
-  stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: [
+    "../intro.stories.mdx",
+    "../../../packages/ui/components/**/*.stories.mdx",
+    "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "storybook-addon-designs",
-    "@storybook/addon-a11y",
-    "storybook-addon-next",
+    "storybook-react-i18next",
+    {
+      name: "storybook-addon-next",
+      options: {
+        nextConfigPath: path.resolve(__dirname, "../../web/next.config.js"),
+      },
+    },
   ],
   framework: "@storybook/react",
   core: {
     builder: "webpack5",
   },
-  webpackFinal: async (config) => {
-    /**
-     * Fixes font import with /
-     * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160
-     */
-    config.resolve.roots = [path.resolve(__dirname, "../public"), "node_modules"];
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      "@/interfaces": path.resolve(__dirname, "../interfaces"),
-    };
-
-    /**
-     * Why webpack5... Just why?
-     * @type {{console: boolean, process: boolean, timers: boolean, os: boolean, querystring: boolean, sys: boolean, fs: boolean, url: boolean, crypto: boolean, path: boolean, zlib: boolean, punycode: boolean, util: boolean, stream: boolean, assert: boolean, string_decoder: boolean, domain: boolean, vm: boolean, tty: boolean, http: boolean, buffer: boolean, constants: boolean, https: boolean, events: boolean}}
-     */
+  staticDirs: ["../public"],
+  webpackFinal: async (config, { configType }) => {
     config.resolve.fallback = {
       fs: false,
       assert: false,
@@ -55,7 +50,6 @@ module.exports = {
       vm: false,
       zlib: false,
     };
-
     return config;
   },
 };
diff --git a/apps/storybook/.storybook/preview-head.html b/apps/storybook/.storybook/preview-head.html
index d14ce9f633..ad4b6e8996 100644
--- a/apps/storybook/.storybook/preview-head.html
+++ b/apps/storybook/.storybook/preview-head.html
@@ -1,4 +1,5 @@
 <script>
+  window.global = window;
   window.isEmbed = ()=> {
     return location.search.includes("embed=")
   }
diff --git a/apps/storybook/.storybook/preview.js b/apps/storybook/.storybook/preview.jsx
similarity index 53%
rename from apps/storybook/.storybook/preview.js
rename to apps/storybook/.storybook/preview.jsx
index ea0d43ec00..ecc3cf53a2 100644
--- a/apps/storybook/.storybook/preview.js
+++ b/apps/storybook/.storybook/preview.jsx
@@ -1,14 +1,9 @@
-import { RouterContext } from "next/dist/shared/lib/router-context";
-import * as NextImage from "next/image";
+import { addDecorator } from "@storybook/react";
+import { I18nextProvider } from "react-i18next";
 
 import "../styles/globals.css";
-
-const OriginalNextImage = NextImage.default;
-
-Object.defineProperty(NextImage, "default", {
-  configurable: true,
-  value: (props) => <OriginalNextImage {...props} unoptimized />,
-});
+import "../styles/storybook-styles.css";
+import i18n from "./i18next";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -18,11 +13,10 @@ export const parameters = {
       date: /Date$/,
     },
   },
-  nextRouter: {
-    Provider: RouterContext.Provider,
-  },
 };
 
+addDecorator((storyFn) => <I18nextProvider i18n={i18n}>{storyFn()}</I18nextProvider>);
+
 window.getEmbedNamespace = () => {
   const url = new URL(document.URL);
   const namespace = url.searchParams.get("embed");
diff --git a/apps/storybook/README.md b/apps/storybook/README.md
deleted file mode 100644
index 97ce36c5aa..0000000000
--- a/apps/storybook/README.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Storybook & UI
-
-Storybook is home to all of our commonly used components. We use this app to visually show all components that we have within the project + automatic type documentation generated for each component.
-
-All changes to storybook/ui must require a visual/code review.
-
-- Visual reviews happen on a tool called [Chormatic](http://chromatic.com/) and these reviews will happen by our product team.
-
-- Code reviews happen as normal on any changes to storybook/ui designs
-
-## Deployment
-
-To deploy this project run
-
-```bash
-  cd apps/storybook
-```
-
-```bash
-  yarn dev
-```
diff --git a/apps/storybook/components/CustomArgsTable.tsx b/apps/storybook/components/CustomArgsTable.tsx
new file mode 100644
index 0000000000..e8feabf577
--- /dev/null
+++ b/apps/storybook/components/CustomArgsTable.tsx
@@ -0,0 +1,23 @@
+import { ArgsTable } from "@storybook/addon-docs";
+import { SortType } from "@storybook/components";
+import { PropDescriptor } from "@storybook/store";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- ignore storybook addon types component as any so we have to do
+type Component = any;
+type BaseProps = {
+  include?: PropDescriptor;
+  exclude?: PropDescriptor;
+  sort?: SortType;
+};
+
+type OfProps = BaseProps & {
+  of: "." | "^" | Component;
+};
+
+export function CustomArgsTable({ of, sort }: OfProps) {
+  return (
+    <div className="custom-args-wrapper">
+      <ArgsTable of={of} sort={sort} />
+    </div>
+  );
+}
diff --git a/apps/storybook/components/Examples.tsx b/apps/storybook/components/Examples.tsx
new file mode 100644
index 0000000000..bb32f10a6a
--- /dev/null
+++ b/apps/storybook/components/Examples.tsx
@@ -0,0 +1,31 @@
+import { classNames } from "@calcom/lib";
+
+interface ExampleProps {
+  children: React.ReactNode;
+  title: string;
+}
+export const Example = ({ children, title }: ExampleProps) => {
+  return (
+    <div className="examples-item">
+      <span className="examples-item-title">{title}</span>
+      <div className="examples-item-content">{children}</div>
+    </div>
+  );
+};
+
+interface ExamplesProps {
+  children: React.ReactNode;
+  title: string;
+  footnote?: React.ReactNode;
+  dark?: boolean;
+}
+
+export const Examples = ({ children, title, footnote = null, dark }: ExamplesProps) => {
+  return (
+    <div className={classNames("examples", dark && "dark")}>
+      <h2 className="examples-title">{title}</h2>
+      <div className="examples-content">{children}</div>
+      {!!footnote && <div className="examples-footnote">{footnote}</div>}
+    </div>
+  );
+};
diff --git a/apps/storybook/components/Note.tsx b/apps/storybook/components/Note.tsx
new file mode 100644
index 0000000000..67d077877c
--- /dev/null
+++ b/apps/storybook/components/Note.tsx
@@ -0,0 +1,5 @@
+export const Note = ({ children }: { children: React.ReactNode }) => (
+  <div className="story-note">
+    <div>{children}</div>
+  </div>
+);
diff --git a/apps/storybook/components/Title.tsx b/apps/storybook/components/Title.tsx
new file mode 100644
index 0000000000..85715ebe17
--- /dev/null
+++ b/apps/storybook/components/Title.tsx
@@ -0,0 +1,21 @@
+export const Title = ({
+  title,
+  suffix,
+  subtitle,
+  offset,
+}: {
+  title: string;
+  suffix?: string;
+  subtitle?: string;
+  offset?: boolean;
+}) => {
+  return (
+    <div className={`story-title ${offset && "offset"}`}>
+      <h1>
+        {title}
+        {suffix && <span>{suffix}</span>}
+      </h1>
+      {subtitle && <p>{subtitle}</p>}
+    </div>
+  );
+};
diff --git a/apps/storybook/components/VariantsTable.tsx b/apps/storybook/components/VariantsTable.tsx
new file mode 100644
index 0000000000..8f4e80f0db
--- /dev/null
+++ b/apps/storybook/components/VariantsTable.tsx
@@ -0,0 +1,80 @@
+import React, { ReactElement, ReactNode } from "react";
+
+import { classNames } from "@calcom/lib";
+
+export function VariantsTable({
+  children,
+  titles,
+  isDark,
+  columnMinWidth = 150,
+}: {
+  children: ReactElement<RowProps> | ReactElement<RowProps>[];
+  titles: string[];
+  isDark?: boolean;
+  // Mainly useful on mobile, so components don't get squeesed
+  columnMinWidth?: number;
+}) {
+  const columns = React.Children.toArray(children) as ReactElement<RowProps>[];
+  return (
+    <div
+      className={classNames(
+        isDark &&
+          "relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#22252A]"
+      )}>
+      <div className="z-1 relative mx-auto w-full max-w-[1200px] overflow-auto pr-8 pt-6">
+        <table>
+          <RowTitles titles={titles} />
+          {columns.map((column) => (
+            <tr className="p-2 pr-6 pb-6" key={column.props.variant}>
+              <th
+                className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]"
+                key={column.props.variant}>
+                {column.props.variant}
+              </th>
+              {React.Children.count(column.props.children) &&
+                React.Children.map(column.props.children, (cell) => (
+                  <td className="p-2 pr-6 pb-6" style={{ minWidth: `${columnMinWidth}px` }}>
+                    {cell}
+                  </td>
+                ))}
+            </tr>
+          ))}
+        </table>
+      </div>
+      {!isDark && (
+        <div data-mode="dark">
+          <VariantsTable titles={titles} isDark columnMinWidth={columnMinWidth}>
+            {children}
+          </VariantsTable>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface RowProps {
+  variant: string;
+  children: ReactNode;
+}
+
+/**
+ * There are two reasons we have this "empty" wrapper component:
+ * 1. In order to have an isolate group per variant, which we iterate through in the table component.
+ * 2. To have a way to pass the variant.
+ */
+export function VariantRow({ children }: RowProps) {
+  return <>{children}</>;
+}
+
+export function RowTitles({ titles }: { titles: string[] }) {
+  return (
+    <tr>
+      <th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" />
+      {titles.map((title) => (
+        <th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" key={title}>
+          {title}
+        </th>
+      ))}
+    </tr>
+  );
+}
diff --git a/apps/storybook/components/index.ts b/apps/storybook/components/index.ts
new file mode 100644
index 0000000000..a2abe7080a
--- /dev/null
+++ b/apps/storybook/components/index.ts
@@ -0,0 +1,5 @@
+export * from "./Examples";
+export * from "./Note";
+export * from "./VariantsTable";
+export * from "./Title";
+export * from "./CustomArgsTable";
diff --git a/apps/storybook/intro.stories.mdx b/apps/storybook/intro.stories.mdx
new file mode 100644
index 0000000000..dde9150fae
--- /dev/null
+++ b/apps/storybook/intro.stories.mdx
@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Introduction" />
+
+<div className="text-center flex flex-col items-center">
+  <h1 style={{marginBottom: '24px', marginTop: '36px'}}>Welcome to Cal.com UI</h1>
+  <p>This is the beginning of our storybook impovments to match Figma as close as possible. Like our Figma library, we will be adding more components as we go along.</p>
+  <p>Our <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">Figma</a> library is avalible for anyone to view and use. If you have any questions or concerns, please reach out to the design team.</p>
+</div>
+
+<img src="/sb-cover.jpg" />
\ No newline at end of file
diff --git a/apps/storybook/next.config.js b/apps/storybook/next.config.js
deleted file mode 100755
index c79b3b3772..0000000000
--- a/apps/storybook/next.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const withTM = require("next-transpile-modules")(["@calcom/dayjs", "@calcom/ui"]);
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-};
-
-module.exports = withTM(nextConfig);
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
index 81b116473c..2830f244ca 100644
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -1,18 +1,13 @@
 {
   "name": "@calcom/storybook",
-  "version": "0.1.0",
   "private": true,
+  "version": "0.0.0",
   "scripts": {
-    "dev:next": "next dev",
-    "build:next": "next build",
-    "start": "next start",
-    "lint": "eslint . --ignore-path .gitignore",
-    "lint:report": "eslint . --format json --output-file ../../lint-results/storybook.json",
     "dev": "start-storybook -p 6006",
-    "build": "build-storybook",
-    "chromatic": "npx chromatic --project-token=56fadc9ab496"
+    "build": "build-storybook"
   },
   "dependencies": {
+    "@calcom/config": "*",
     "@calcom/dayjs": "*",
     "@calcom/ui": "*",
     "@radix-ui/react-avatar": "^1.0.0",
@@ -25,42 +20,35 @@
     "@radix-ui/react-slider": "^1.0.0",
     "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
-    "next": "^12.2.5",
-    "next-transpile-modules": "^9.0.0",
+    "next": "^12.3.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-feather": "^2.0.10",
-    "react-hot-toast": "^2.3.0"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "@calcom/config": "*",
-    "@storybook/addon-a11y": "^6.5.10",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-vite": "^0.2.2",
-    "@storybook/builder-webpack5": "^6.5.10",
-    "@storybook/manager-webpack5": "^6.5.10",
-    "@storybook/react": "^6.5.10",
-    "@tailwindcss/line-clamp": "^0.4.0",
-    "@types/node": "16.9.1",
+    "@babel/core": "^7.19.6",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-vite": "^0.2.4",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/react": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
     "@types/react": "^18.0.17",
-    "@types/react-dom": "18.0.4",
-    "autoprefixer": "^10.4.8",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.1.0",
+    "autoprefixer": "^10.4.12",
     "babel-loader": "^8.2.5",
-    "chromatic": "^6.7.4",
-    "eslint": "^8.22.0",
-    "postcss": "^8.4.16",
-    "postcss-loader": "^7.0.0",
+    "fs": "^0.0.1-security",
+    "postcss": "^8.4.18",
+    "postcss-pseudo-companion-classes": "^0.1.1",
+    "rollup-plugin-polyfill-node": "^0.10.2",
     "storybook-addon-designs": "^6.3.1",
-    "storybook-addon-next": "^1.6.7",
-    "tailwindcss": "^3.1.8",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.7.4"
-  },
-  "readme": "ERROR: No README data found!",
-  "_id": "@calcom/storybook@0.1.0"
+    "storybook-addon-next": "^1.6.9",
+    "storybook-react-i18next": "^1.1.2",
+    "tailwindcss": "^3.2.1",
+    "typescript": "^4.6.4",
+    "vite": "^3.1.0"
+  }
 }
diff --git a/apps/storybook/pages/_app.tsx b/apps/storybook/pages/_app.tsx
deleted file mode 100755
index e9a8374578..0000000000
--- a/apps/storybook/pages/_app.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { AppProps } from "next/app";
-
-import "../styles/globals.css";
-
-function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
-}
-
-export default MyApp;
diff --git a/apps/storybook/pages/index.tsx b/apps/storybook/pages/index.tsx
deleted file mode 100755
index 785828e44a..0000000000
--- a/apps/storybook/pages/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { NextPage } from "next";
-import Head from "next/head";
-import Image from "next/image";
-
-const Home: NextPage = () => {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing <code className={styles.code}>pages/index.tsx</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a href="https://github.com/vercel/next.js/tree/canary/examples" className={styles.card}>
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}>
-            <h2>Deploy &rarr;</h2>
-            <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer">
-          Powered by{" "}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
-  );
-};
-
-export default Home;
diff --git a/apps/storybook/postcss.config.js b/apps/storybook/postcss.config.js
index 12a703d900..9d4fb12a8d 100644
--- a/apps/storybook/postcss.config.js
+++ b/apps/storybook/postcss.config.js
@@ -2,5 +2,21 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    /**
+     * We use this postcss plugin to create custom css classes for
+     * any pseudo classes (eg hover, focus) mentioned below.
+     * This way you can eg show a hover state in Storybook by adding
+     * this classname .sb-pseudo--hover to the item.
+     *
+     * These styles will only be added in storybook, and will NOT
+     * end up in the final css bundle of apps using the components.
+     */
+    "postcss-pseudo-companion-classes": {
+      prefix: "sb-pseudo--",
+      // We have to keep a restrictTo list here, because otherwise
+      // this library will have issues processing tailwind's \: prefixed classes
+      // and start adding dots everywhere, breaking this functionality.
+      restrictTo: [":hover", ":focus"],
+    },
   },
 };
diff --git a/apps/storybook/public/favicon.ico b/apps/storybook/public/favicon.ico
deleted file mode 100755
index 718d6fea48..0000000000
Binary files a/apps/storybook/public/favicon.ico and /dev/null differ
diff --git a/apps/storybook/public/fonts/Inter-roman.var.woff2 b/apps/storybook/public/fonts/Inter-roman.var.woff2
new file mode 100644
index 0000000000..6a256a068f
Binary files /dev/null and b/apps/storybook/public/fonts/Inter-roman.var.woff2 differ
diff --git a/apps/storybook/public/fonts/cal.ttf b/apps/storybook/public/fonts/cal.ttf
new file mode 100644
index 0000000000..4a2950a045
Binary files /dev/null and b/apps/storybook/public/fonts/cal.ttf differ
diff --git a/apps/storybook/public/sb-cover.jpg b/apps/storybook/public/sb-cover.jpg
new file mode 100644
index 0000000000..bc9b9ebc4b
Binary files /dev/null and b/apps/storybook/public/sb-cover.jpg differ
diff --git a/apps/storybook/public/vercel.svg b/apps/storybook/public/vercel.svg
deleted file mode 100755
index fbf0e25a65..0000000000
--- a/apps/storybook/public/vercel.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>
\ No newline at end of file
diff --git a/apps/storybook/stories/Avatar.stories.tsx b/apps/storybook/stories/Avatar.stories.tsx
deleted file mode 100644
index c10b990821..0000000000
--- a/apps/storybook/stories/Avatar.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import Avatar from "@calcom/ui/v2/core/Avatar";
-
-export default {
-  title: "Avatar",
-  component: Avatar,
-} as ComponentMeta<typeof Avatar>;
-
-export const Default = () => {
-  return (
-    <>
-      <Avatar size="sm" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
-      <Avatar size="lg" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
-    </>
-  );
-};
-
-export const Accepted = () => {
-  return (
-    <>
-      <Avatar size="sm" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" accepted />
-      <Avatar size="lg" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" accepted />
-    </>
-  );
-};
diff --git a/apps/storybook/stories/AvatarGroup.stories.tsx b/apps/storybook/stories/AvatarGroup.stories.tsx
deleted file mode 100644
index 385157afce..0000000000
--- a/apps/storybook/stories/AvatarGroup.stories.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { ComponentMeta } from "@storybook/react";
-
-import AvatarGroup from "@calcom/ui/v2/core/AvatarGroup";
-
-export default {
-  title: "Avatar/Group",
-  component: AvatarGroup,
-} as ComponentMeta<typeof AvatarGroup>;
-
-const IMAGES = [
-  {
-    image: "https://cal.com/stakeholder/peer.jpg",
-    alt: "Peer",
-    title: "Peer Richelsen",
-  },
-  {
-    image: "https://cal.com/stakeholder/bailey.jpg",
-    alt: "Bailey",
-    title: "Bailey Pumfleet",
-  },
-  {
-    image: "https://cal.com/stakeholder/alex-van-andel.jpg",
-    alt: "Alex",
-    title: "Alex Van Andel",
-  },
-  {
-    image: "https://cal.com/stakeholder/ciaran.jpg",
-    alt: "Ciarán",
-    title: "Ciarán Hanrahan",
-  },
-  {
-    image: "https://cal.com/stakeholder/peer.jpg",
-    alt: "Peer",
-    title: "Peer Richelsen",
-  },
-  {
-    image: "https://cal.com/stakeholder/bailey.jpg",
-    alt: "Bailey",
-    title: "Bailey Pumfleet",
-  },
-  {
-    image: "https://cal.com/stakeholder/alex-van-andel.jpg",
-    alt: "Alex",
-    title: "Alex Van Andel",
-  },
-  {
-    image: "https://cal.com/stakeholder/ciaran.jpg",
-    alt: "Ciarán",
-    title: "Ciarán Hanrahan",
-  },
-];
-
-export const Default = () => {
-  return (
-    <TooltipProvider>
-      <AvatarGroup size="lg" items={IMAGES} />
-    </TooltipProvider>
-  );
-};
diff --git a/apps/storybook/stories/Badge.stories.tsx b/apps/storybook/stories/Badge.stories.tsx
deleted file mode 100644
index ad7d6b473c..0000000000
--- a/apps/storybook/stories/Badge.stories.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { Bell } from "react-feather";
-
-import Badge from "@calcom/ui/v2/core/Badge";
-
-export default {
-  title: "Badge",
-  component: Badge,
-} as ComponentMeta<typeof Badge>;
-
-export const All = () => (
-  <div className="">
-    <h1>Default</h1>
-    <div className="mb-4 flex space-x-2">
-      <Badge variant="gray">Badge</Badge>
-      <Badge variant="red">Badge</Badge>
-      <Badge variant="green">Badge</Badge>
-      <Badge variant="orange">Badge</Badge>
-      <Badge variant="blue">Badge</Badge>
-    </div>
-    <h1>Icons</h1>
-    <div className="mb-4 flex space-x-2">
-      <Badge variant="gray" StartIcon={Bell}>
-        Badge
-      </Badge>
-      <Badge variant="red" StartIcon={Bell}>
-        Badge
-      </Badge>
-      <Badge variant="green" StartIcon={Bell}>
-        Badge
-      </Badge>
-      <Badge variant="orange" StartIcon={Bell}>
-        Badge
-      </Badge>
-      <Badge variant="blue" StartIcon={Bell}>
-        Badge
-      </Badge>
-    </div>
-    <h1>Large</h1>
-    <div className="flex space-x-2">
-      <Badge variant="gray" size="lg">
-        Badge
-      </Badge>
-      <Badge variant="red" size="lg">
-        Badge
-      </Badge>
-      <Badge variant="green" size="lg">
-        Badge
-      </Badge>
-      <Badge variant="orange" size="lg">
-        Badge
-      </Badge>
-      <Badge variant="blue" size="lg">
-        Badge
-      </Badge>
-    </div>
-  </div>
-);
diff --git a/apps/storybook/stories/Banner.stories.tsx b/apps/storybook/stories/Banner.stories.tsx
deleted file mode 100644
index 9ca2fdc32d..0000000000
--- a/apps/storybook/stories/Banner.stories.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Info } from "react-feather";
-
-import Banner from "@calcom/ui/v2/core/banner";
-
-export default {
-  title: "Banner",
-  component: Banner,
-} as ComponentMeta<typeof Banner>;
-
-export const Default = () => {
-  return (
-    <Banner
-      variant="neutral"
-      title="Summarise what happened"
-      description="Describe what can be done about it here."
-      Icon={Info}
-      onDismiss={() => console.log("dismissed")}
-    />
-  );
-};
-
-export const Warning = () => {
-  return (
-    <Banner
-      variant="warning"
-      title="Summarise what happened"
-      description="Describe what can be done about it here."
-      Icon={Info}
-      onDismiss={() => console.log("dismissed")}
-    />
-  );
-};
-
-export const Error = () => {
-  return (
-    <Banner
-      variant="error"
-      title="Summarise what happened"
-      description="Describe what can be done about it here."
-      errorMessage="Event creation failed"
-      Icon={Info}
-      onDismiss={() => console.log("dismissed")}
-    />
-  );
-};
diff --git a/apps/storybook/stories/Breadcrumb.stories.tsx b/apps/storybook/stories/Breadcrumb.stories.tsx
deleted file mode 100644
index 3cc70298ee..0000000000
--- a/apps/storybook/stories/Breadcrumb.stories.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import Breadcrumb, { BreadcrumbItem } from "@calcom/ui/v2/core/Breadcrumb";
-
-export default {
-  title: "Breadcrumbs",
-  component: Breadcrumb,
-} as ComponentMeta<typeof Breadcrumb>;
-
-export const Default = () => (
-  <Breadcrumb>
-    <BreadcrumbItem href="/">Home</BreadcrumbItem>
-    <BreadcrumbItem href="/">Test</BreadcrumbItem>
-  </Breadcrumb>
-);
-
-Default.parameters = {
-  nextRouter: {
-    path: "/test",
-    asPath: "/test",
-  },
-};
diff --git a/apps/storybook/stories/Button.stories.tsx b/apps/storybook/stories/Button.stories.tsx
deleted file mode 100644
index f789325d9c..0000000000
--- a/apps/storybook/stories/Button.stories.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { Trash2 } from "react-feather";
-
-import Button from "@calcom/ui/v2/core/Button";
-
-export default {
-  title: "Button",
-  component: Button,
-  argTypes: {
-    color: {
-      options: ["primary", "secondary", "minimal", "destructive"],
-      control: { type: "select" },
-    },
-    disabled: {
-      options: [true, false],
-      control: { type: "boolean" },
-    },
-    loading: {
-      options: [true, false],
-      control: { type: "boolean" },
-    },
-    size: {
-      options: ["base", "lg", "icon"],
-      control: { type: "radio" },
-    },
-  },
-} as ComponentMeta<typeof Button>;
-
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
-export const All = () => (
-  <div>
-    <TooltipProvider>
-      <h1>Primary</h1>
-      <div className="flex space-x-2">
-        <Button aria-label="Button Text">Button Text</Button>
-        <Button disabled aria-label="Button Text">
-          Button Text
-        </Button>
-      </div>
-      <h1>Secondary</h1>
-      <div className="flex space-x-2">
-        <Button color="secondary" aria-label="Button Text">
-          Button Text
-        </Button>
-        <Button disabled color="secondary" aria-label="Button Text">
-          Button Text
-        </Button>
-        <Button size="icon" color="secondary" StartIcon={Trash2} aria-label="Button Text" />
-      </div>
-      <h1>Minimal</h1>
-      <div className="flex">
-        <Button color="minimal" aria-label="Button Text">
-          Button Text
-        </Button>
-        <Button disabled color="minimal" aria-label="Button Text">
-          Button Text
-        </Button>
-        <Button size="icon" color="minimal" StartIcon={Trash2} aria-label="Button Text" />
-      </div>
-      <h1>Destructive</h1>
-      <Button size="icon" color="destructive" StartIcon={Trash2} aria-label="Button Text" />
-      <h1>Tooltip</h1>
-      <Button
-        tooltip="Deletes EventTypes"
-        size="icon"
-        color="destructive"
-        StartIcon={Trash2}
-        aria-label="Button Text"
-      />
-    </TooltipProvider>
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  color: "primary",
-  children: "Button Text",
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Default.args,
-  disabled: true,
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  ...Default.args,
-  loading: true,
-};
-export const Icon = Template.bind({});
-Icon.args = {
-  color: "secondary",
-  StartIcon: Trash2,
-  size: "icon",
-};
diff --git a/apps/storybook/stories/ButtonGroup.stories.tsx b/apps/storybook/stories/ButtonGroup.stories.tsx
deleted file mode 100644
index d86b019dcc..0000000000
--- a/apps/storybook/stories/ButtonGroup.stories.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { ComponentMeta } from "@storybook/react";
-import { ArrowLeft, ArrowRight, Clipboard, Navigation2, Trash2 } from "react-feather";
-
-import Button from "@calcom/ui/v2/core/Button";
-import ButtonGroup from "@calcom/ui/v2/core/ButtonGroup";
-
-export default {
-  title: "Button Group",
-  component: ButtonGroup,
-  decorators: [
-    (Story) => (
-      <TooltipProvider>
-        <Story />
-      </TooltipProvider>
-    ),
-  ],
-} as ComponentMeta<typeof ButtonGroup>;
-
-export const Default = () => (
-  <ButtonGroup>
-    <Button StartIcon={Trash2} size="icon" color="secondary" />
-    <Button StartIcon={Navigation2} size="icon" color="secondary" />
-    <Button StartIcon={Clipboard} size="icon" color="secondary" />
-  </ButtonGroup>
-);
-
-export const Combined = () => (
-  <div className="flex flex-col space-y-2">
-    <ButtonGroup combined>
-      <Button StartIcon={Trash2} size="icon" color="secondary" />
-      <Button StartIcon={Navigation2} size="icon" color="secondary" />
-      <Button StartIcon={Clipboard} size="icon" color="secondary" />
-    </ButtonGroup>
-    <ButtonGroup combined>
-      <Button StartIcon={ArrowLeft} size="icon" color="secondary" />
-      <Button StartIcon={ArrowRight} size="icon" color="secondary" />
-      <Button StartIcon={ArrowRight} href="/" size="icon" color="secondary" />
-    </ButtonGroup>
-  </div>
-);
diff --git a/apps/storybook/stories/Cards.stories.tsx b/apps/storybook/stories/Cards.stories.tsx
deleted file mode 100644
index dabf31f6b6..0000000000
--- a/apps/storybook/stories/Cards.stories.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { useState } from "react";
-
-import Card, { BaseCardProps } from "@calcom/ui/v2/core/Card";
-
-export default {
-  title: "Cards",
-  component: Card,
-} as ComponentMeta<typeof Card>;
-
-const profileProps: BaseCardProps[] = [
-  {
-    variant: "ProfileCard",
-    title: "Alex Fisher",
-    image:
-      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
-    description: "Co-founder at Attio. Book a meeting to discuss enterprise deals.",
-  },
-  {
-    variant: "ProfileCard",
-    title: "Julian Wan",
-    image:
-      "https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80",
-    description: "Co-founder at Attio. Book a meeting to discuss enterprise deals.",
-  },
-];
-
-export const Profile = () => {
-  return (
-    <div className="flex w-full space-x-2 bg-gray-200 p-4">
-      <Card {...profileProps[0]} />
-      <Card {...profileProps[1]} />
-    </div>
-  );
-};
-
-const appStoreProps: BaseCardProps = {
-  variant: "AppStore",
-  title: "Giphy",
-  image: "https://app.cal.com/api/app-store/giphy/icon.svg",
-  description: "Add GIFs to spice up your booking confirmations.",
-  actionButton: {
-    href: "#",
-    child: "View Details",
-  },
-};
-
-export const AppStore = () => {
-  return (
-    <div className="w-full bg-gray-200 p-4">
-      <Card {...appStoreProps} />
-    </div>
-  );
-};
-
-const sidebarCardProps: BaseCardProps = {
-  variant: "SidebarCard",
-  thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg",
-  mediaLink: "https://www.youtube.com/watch?v=60HJt8DOVNo",
-  title: "Dynamic boooking links",
-  description: "Booking link that allows people to quickly schedule meetings.",
-  learnMore: {
-    href: "https://cal.com/blog/cal-v-1-9",
-    text: "Learn more",
-  },
-};
-
-export const SidebarCard = () => {
-  const [visible, setVisible] = useState(true); // save state in localStorage, cookie or db
-  return (
-    <header className="w-full max-w-[225px] bg-gray-100 p-3">
-      {visible && (
-        <div>
-          <Card {...sidebarCardProps} actionButton={{ onClick: () => setVisible(false), child: "Dismiss" }} />
-        </div>
-      )}
-    </header>
-  );
-};
diff --git a/apps/storybook/stories/Checkbox.stories.tsx b/apps/storybook/stories/Checkbox.stories.tsx
deleted file mode 100644
index 01b8fd8780..0000000000
--- a/apps/storybook/stories/Checkbox.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import Checkbox from "@calcom/ui/v2/core/form/Checkbox";
-
-export default {
-  title: "Checkbox",
-  component: Checkbox,
-} as ComponentMeta<typeof Checkbox>;
-
-export const All = () => (
-  <div className="flex flex-col space-y-2">
-    <Checkbox label="Default" description="Toggle on and off something" />
-    <Checkbox label="Error" description="Toggle on and off something" error />
-    <Checkbox label="Disabled" description="Toggle on and off something" disabled />
-    <Checkbox label="Disabled Checked" description="Toggle on and off something" checked disabled />
-    <hr />
-    <Checkbox description="Default" descriptionAsLabel />
-    <Checkbox description="Error" descriptionAsLabel error />
-    <Checkbox description="Disabled" descriptionAsLabel disabled />
-    <Checkbox description="Disabled" descriptionAsLabel disabled checked />
-  </div>
-);
-
-export const CheckboxField = () => <Checkbox description="Default" descriptionAsLabel />;
-export const CheckboxError = () => <Checkbox description="Error" descriptionAsLabel />;
-export const CheckboxDisabled = () => (
-  <>
-    <Checkbox description="Disabled" descriptionAsLabel disabled />
-    <Checkbox description="Disabled" descriptionAsLabel disabled checked />
-  </>
-);
diff --git a/apps/storybook/stories/Colors.stories.tsx b/apps/storybook/stories/Colors.stories.tsx
deleted file mode 100644
index c895e03a3a..0000000000
--- a/apps/storybook/stories/Colors.stories.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import { useState } from "react";
-
-import ColorPicker from "@calcom/ui/v2/core/colorpicker";
-
-// eslint-disable-next-line import/no-anonymous-default-export
-export default {
-  title: "Colors",
-  component: ColorPicker,
-};
-const COLORS = {
-  brand: {
-    50: "#f3f3f4",
-    100: "#e7e8e9",
-    200: "#c4c5c9",
-    300: "#a0a3a9",
-    400: "#585d68",
-    500: "#111827", // Brand color
-    600: "#0f1623",
-    700: "#0d121d",
-    800: "#0a0e17",
-    900: "#080c13",
-  },
-  gray: {
-    50: "#F8F8F8",
-    100: "#F5F5F5",
-    200: "#E1E1E1",
-    300: "#CFCFCF",
-    400: "#ACACAC",
-    500: "#888888",
-    600: "#494949",
-    700: "#3E3E3E",
-    800: "#313131",
-    900: "#292929",
-  },
-  neutral: {
-    50: "#F8F8F8",
-    100: "#F5F5F5",
-    200: "#E1E1E1",
-    300: "#CFCFCF",
-    400: "#ACACAC",
-    500: "#888888",
-    600: "#494949",
-    700: "#3E3E3E",
-    800: "#313131",
-    900: "#292929",
-  },
-  primary: {
-    50: "#F4F4F4",
-    100: "#E8E8E8",
-    200: "#C6C6C6",
-    300: "#A3A3A3",
-    400: "#5F5F5F",
-    500: "#1A1A1A",
-    600: "#171717",
-    700: "#141414",
-    800: "#101010",
-    900: "#0D0D0D",
-  },
-  secondary: {
-    50: "#F5F8F7",
-    100: "#EBF0F0",
-    200: "#CDDAD9",
-    300: "#AEC4C2",
-    400: "#729894",
-    500: "#356C66",
-    600: "#30615C",
-    700: "#28514D",
-    800: "#20413D",
-    900: "#223B41",
-  },
-  red: {
-    50: "#FEF2F2",
-    100: "#FEE2E2",
-    200: "#FECACA",
-    300: "#FCA5A5",
-    400: "#F87171",
-    500: "#EF4444",
-    600: "#DC2626",
-    700: "#B91C1C",
-    800: "#991B1B",
-    900: "#7F1D1D",
-  },
-  orange: {
-    50: "#FFF7ED",
-    100: "#FFEDD5",
-    200: "#FED7AA",
-    300: "#FDBA74",
-    400: "#FB923C",
-    500: "#F97316",
-    600: "#EA580C",
-    700: "#C2410C",
-    800: "#9A3412",
-    900: "#7C2D12",
-  },
-  green: {
-    50: "#ECFDF5",
-    100: "#D1FAE5",
-    200: "#A7F3D0",
-    300: "#6EE7B7",
-    400: "#34D399",
-    500: "#10B981",
-    600: "#059669",
-    700: "#047857",
-    800: "#065F46",
-    900: "#064E3B",
-  },
-};
-export const All = () => {
-  return (
-    <div className="w-full">
-      <div>
-        {Object.keys(COLORS.brand).map((color) => (
-          <div className="flex flex-row space-x-2" key={COLORS.brand[color]}>
-            <div className="w-full">Brand</div>
-            <div className="w-full">{color}</div>
-            <div className="w-full">{COLORS.brand[color]}</div>
-            <div
-              style={{
-                backgroundColor: COLORS.brand[color],
-                width: "100%",
-                height: "32px",
-              }}
-            />
-          </div>
-        ))}
-        <hr />
-        {Object.keys(COLORS.gray).map((color) => (
-          <div className="flex flex-row space-x-2" key={COLORS.gray[color]}>
-            <div className="w-full">gray</div>
-            <div className="w-full">{color}</div>
-            <div className="w-full">{COLORS.gray[color]}</div>
-            <div
-              style={{
-                backgroundColor: COLORS.gray[color],
-                width: "100%",
-                height: "32px",
-              }}
-            />
-          </div>
-        ))}
-        <hr />
-        {Object.keys(COLORS.secondary).map((color) => (
-          <div className="flex flex-row space-x-2" key={COLORS.secondary[color]}>
-            <div className="w-full">secondary</div>
-            <div className="w-full">{color}</div>
-            <div className="w-full">{COLORS.secondary[color]}</div>
-            <div
-              style={{
-                backgroundColor: COLORS.secondary[color],
-                width: "100%",
-                height: "32px",
-              }}
-            />
-          </div>
-        ))}
-        <hr />
-        {Object.keys(COLORS.red).map((color) => (
-          <div className="flex flex-row space-x-2" key={COLORS.red[color]}>
-            <div className="w-full">red</div>
-            <div className="w-full">{color}</div>
-            <div className="w-full">{COLORS.red[color]}</div>
-            <div
-              style={{
-                backgroundColor: COLORS.red[color],
-                width: "100%",
-                height: "32px",
-              }}
-            />
-          </div>
-        ))}
-        <hr />
-        {Object.keys(COLORS.orange).map((color) => (
-          <div className="flex flex-row space-x-2" key={COLORS.orange[color]}>
-            <div className="w-full">orange</div>
-            <div className="w-full">{color}</div>
-            <div className="w-full">{COLORS.orange[color]}</div>
-            <div
-              style={{
-                backgroundColor: COLORS.orange[color],
-                width: "100%",
-                height: "32px",
-              }}
-            />
-          </div>
-        ))}
-        <hr />
-        {Object.keys(COLORS.green).map((color) => (
-          <div className="flex flex-row space-x-2" key={COLORS.green[color]}>
-            <div className="w-full">green</div>
-            <div className="w-full">{color}</div>
-            <div className="w-full">{COLORS.green[color]}</div>
-            <div
-              style={{
-                backgroundColor: COLORS.green[color],
-                width: "100%",
-                height: "32px",
-              }}
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-export const ColorPickerComponent = () => {
-  const [color, setColor] = useState("3B82F6");
-  return <ColorPicker defaultValue={color} onChange={(val) => setColor(val)} />;
-};
diff --git a/apps/storybook/stories/DatePicker.stories.tsx b/apps/storybook/stories/DatePicker.stories.tsx
deleted file mode 100644
index 948a8dfc7f..0000000000
--- a/apps/storybook/stories/DatePicker.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useState } from "react";
-
-import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
-
-export default {
-  title: "Datepicker",
-  component: DatePicker,
-};
-
-export const Default = () => {
-  const [selected, setSelected] = useState<Date>(new Date());
-  return (
-    <div style={{ width: "455px" }}>
-      <DatePicker selected={selected} onChange={setSelected} locale="en" />
-    </div>
-  );
-};
diff --git a/apps/storybook/stories/DateRangePicker.stories.tsx b/apps/storybook/stories/DateRangePicker.stories.tsx
deleted file mode 100644
index 154ace1bdc..0000000000
--- a/apps/storybook/stories/DateRangePicker.stories.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import "@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css";
-import { useState } from "react";
-
-import DateRangePicker from "@calcom/ui/v2/core/form/date-range-picker/DateRangePicker";
-import "@calcom/ui/v2/core/form/date-range-picker/styles.css";
-
-function getISOLocalDate(date) {
-  const year = padStart(date.getFullYear(), 4);
-  const month = padStart(date.getMonth() + 1);
-  const day = padStart(date.getDate());
-
-  return [`${year}-${month}-${day}`];
-}
-
-function padStart(num, val = 2) {
-  const numStr = `${num}`;
-  if (numStr.length >= val) {
-    return num;
-  }
-
-  return `0000${numStr}`.slice(-val);
-}
-
-export default {
-  title: "Date Range Picker",
-  component: DateRangePicker,
-} as ComponentMeta<typeof DateRangePicker>;
-
-export const Default: ComponentStory<typeof DateRangePicker> = () => {
-  const [startDate, setStartDate] = useState<Date>(new Date());
-  const [endDate, setEndDate] = useState<Date>(new Date());
-  return (
-    <div>
-      <DateRangePicker
-        startDate={getISOLocalDate(startDate) as unknown as Date}
-        endDate={getISOLocalDate(endDate) as unknown as Date}
-        onDatesChange={({ startDate, endDate }) => {
-          setStartDate(startDate);
-          setEndDate(endDate);
-        }}
-      />
-    </div>
-  );
-};
diff --git a/apps/storybook/stories/EmptyScreen.stories.tsx b/apps/storybook/stories/EmptyScreen.stories.tsx
deleted file mode 100644
index b9e64441d2..0000000000
--- a/apps/storybook/stories/EmptyScreen.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { Bell } from "react-feather";
-
-import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
-
-export default {
-  title: "pattern/Empty Screen",
-  component: EmptyScreen,
-  decorators: [
-    (Story) => (
-      <div className="flex items-center justify-center">
-        <Story />
-      </div>
-    ),
-  ],
-} as ComponentMeta<typeof EmptyScreen>;
-
-export const Default = () => (
-  <EmptyScreen
-    Icon={Bell}
-    headline="Empty State Header"
-    description="Ullamco dolor nulla sint nulla occaecat aliquip id elit fugiat et excepteur magna. Nisi tempor anim do tempor irure fugiat ad occaecat. Mollit ea eiusmod pariatur sunt deserunt eu eiusmod. Sit reprehenderit "
-    buttonText="Veniam ut ipsum"
-    buttonOnClick={() => console.log("Button Clicked")}
-  />
-);
diff --git a/apps/storybook/stories/FormStep.stories.tsx b/apps/storybook/stories/FormStep.stories.tsx
deleted file mode 100644
index 507725f124..0000000000
--- a/apps/storybook/stories/FormStep.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { useState } from "react";
-
-import FormStep from "@calcom/ui/v2/core/form/FormStep";
-
-export default {
-  title: "Form Step",
-  component: FormStep,
-} as ComponentMeta<typeof FormStep>;
-
-export const Default = () => {
-  const STEPS = 4;
-  const [currentStep, setCurrentStep] = useState(1);
-  return (
-    <div className="flex flex-col items-center justify-center space-y-14 p-20">
-      <div className="w-1/2">
-        <FormStep steps={STEPS} currentStep={currentStep} />
-        <div className="flex space-x-2 pt-4">
-          <button onClick={() => currentStep - 1 > 0 && setCurrentStep((old) => old - 1)}>Previous</button>
-          <button onClick={() => currentStep + 1 < STEPS + 1 && setCurrentStep((old) => old + 1)}>
-            Next
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/storybook/stories/HorizontalTab.stories.tsx b/apps/storybook/stories/HorizontalTab.stories.tsx
deleted file mode 100644
index f8d33092b3..0000000000
--- a/apps/storybook/stories/HorizontalTab.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-// Disabling until we figure out what is happening with the RouterMock.
-import { ComponentMeta } from "@storybook/react";
-
-import { HorizontalTabItemProps } from "@calcom/ui/v2/core/navigation/tabs/HorizontalTabItem";
-import HorizontalTabs from "@calcom/ui/v2/core/navigation/tabs/HorizontalTabs";
-
-export default {
-  title: "Horizontal Tabs",
-  component: HorizontalTabs,
-} as ComponentMeta<typeof HorizontalTabs>;
-
-const HorizontalTabsPropsDefault: HorizontalTabItemProps[] = [
-  {
-    name: "Tab One",
-    href: "/tab-one",
-  },
-  {
-    name: "Tab Two",
-    href: "/tab-two",
-  },
-  {
-    name: "Tab Disabled",
-    href: "/tab-disabled",
-    disabled: true,
-  },
-];
-
-export const Default = () => (
-  <div className="w-full p-4">
-    <HorizontalTabs tabs={HorizontalTabsPropsDefault} />
-  </div>
-);
-
-Default.parameters = {
-  nextRouter: {
-    path: "/[page]",
-    asPath: "/tab-one",
-  },
-};
diff --git a/apps/storybook/stories/Input.stories.tsx b/apps/storybook/stories/Input.stories.tsx
deleted file mode 100644
index 343a38f93d..0000000000
--- a/apps/storybook/stories/Input.stories.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { Copy } from "react-feather";
-
-import { TextAreaField, TextField, PasswordField } from "@calcom/ui/v2/core/form/fields";
-import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
-
-export default {
-  title: "Inputs",
-  component: TextField,
-  argTypes: {
-    disabled: {
-      options: [false, true],
-    },
-  },
-} as ComponentMeta<typeof TextField>;
-
-const TextInputTemplate: ComponentStory<typeof TextField> = (args) => <TextField {...args} />;
-// name="demo" label="Demo Label" hint="Hint text"
-export const TextInput = TextInputTemplate.bind({});
-TextInput.args = {
-  name: "demo",
-  label: "Demo Label",
-  hint: "Hint Text",
-  disabled: false,
-};
-
-export const TextInputPrefix = TextInputTemplate.bind({});
-TextInputPrefix.args = {
-  name: "demo",
-  label: "Demo Label",
-  hint: "Hint Text",
-  addOnLeading: "https://",
-  disabled: false,
-};
-
-export const TextInputSuffix = TextInputTemplate.bind({});
-TextInputSuffix.args = {
-  name: "demo",
-  label: "Demo Label",
-  hint: "Hint Text",
-  addOnSuffix: "Minutes",
-  disabled: false,
-};
-
-export const TextInputPrefixIcon = TextInputTemplate.bind({});
-TextInputPrefixIcon.args = {
-  name: "demo",
-  label: "Demo Label",
-  hint: "Hint Text",
-  addOnFilled: false,
-  addOnSuffix: <Copy />,
-  disabled: false,
-};
-export const TextInputSuffixIcon = TextInputTemplate.bind({});
-TextInputSuffixIcon.args = {
-  name: "demo",
-  label: "Demo Label",
-  hint: "Hint Text",
-  addOnFilled: false,
-  addOnLeading: <Copy />,
-  disabled: false,
-};
-
-export const TextAreaInput: ComponentStory<typeof TextAreaField> = () => (
-  <TextAreaField name="Text-area-input" label="Text Area" />
-);
-
-export const DatePickerInput: ComponentStory<typeof DatePicker> = () => <DatePicker date={new Date()} />;
-
-export const PasswordInput: ComponentStory<typeof PasswordField> = () => (
-  <TooltipProvider>
-    <PasswordField />
-  </TooltipProvider>
-);
diff --git a/apps/storybook/stories/Modal.stories.tsx b/apps/storybook/stories/Modal.stories.tsx
deleted file mode 100644
index 43caaa81cb..0000000000
--- a/apps/storybook/stories/Modal.stories.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useState } from "react";
-import { Info } from "react-feather";
-
-import { Button, Dialog, DialogContent, DialogTrigger, TextField } from "@calcom/ui/v2";
-
-export default {
-  title: "pattern/Modal",
-  component: Dialog,
-};
-
-export const Creation = () => {
-  const [open, setOpen] = useState(false);
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button onClick={() => setOpen(true)}>Open Modal</Button>
-      </DialogTrigger>
-      <DialogContent
-        title="Header"
-        description="Optional Description"
-        type="creation"
-        actionText="Create"
-        actionOnClick={() => setOpen(false)}>
-        <TextField name="Label" />
-        <TextField name="Label" />
-        <TextField name="Label" />
-        <TextField name="Label" />
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export const Confirmation = () => {
-  const [open, setOpen] = useState(false);
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button>Open Modal</Button>
-      </DialogTrigger>
-      <DialogContent
-        title="Header"
-        description="Optional Description"
-        type="confirmation"
-        actionText="Confirm"
-        Icon={Info}
-        actionOnClick={() => setOpen(false)}
-      />
-    </Dialog>
-  );
-};
diff --git a/apps/storybook/stories/Notifcations.stories.tsx b/apps/storybook/stories/Notifcations.stories.tsx
deleted file mode 100644
index d3dc505630..0000000000
--- a/apps/storybook/stories/Notifcations.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { Toaster } from "react-hot-toast";
-
-import { Button, showToast } from "@calcom/ui/v2";
-
-export default {
-  title: "Notifcations-Toasts",
-  decorators: [
-    (Story) => (
-      <>
-        <Story />
-        <Toaster />
-      </>
-    ),
-  ],
-} as ComponentMeta<typeof All>; // We have to fake this type as the story for this component isn't really a component.
-
-export const All = () => (
-  <div className="flex space-x-2">
-    <Button onClick={() => showToast("This is a Neutral toast", "warning")}>Neutral</Button>
-    <Button onClick={() => showToast("This is a Success toast", "success")}>Success</Button>
-    <Button onClick={() => showToast("This is a Error toast", "error")}>Error</Button>
-  </div>
-);
diff --git a/apps/storybook/stories/PageHeader.stories.tsx b/apps/storybook/stories/PageHeader.stories.tsx
deleted file mode 100644
index 9b6ef5f143..0000000000
--- a/apps/storybook/stories/PageHeader.stories.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { Search } from "react-feather";
-
-import { Button, TextField } from "@calcom/ui/v2";
-import PageHeader from "@calcom/ui/v2/core/PageHeader";
-
-export default {
-  title: "pattern/Page Header",
-  component: PageHeader,
-  decorators: [
-    (Story) => (
-      <div className="">
-        <Story />
-      </div>
-    ),
-  ],
-} as ComponentMeta<typeof PageHeader>;
-
-export const Default = () => (
-  <PageHeader title="Title" description="Some description about the header above" />
-);
-
-export const ButtonRight = () => (
-  <PageHeader
-    title="Title"
-    description="Some description about the header above"
-    rightAlignedComponent={<Button>Button Text</Button>}
-  />
-);
-export const ComingSoon = () => (
-  <PageHeader
-    title="Title"
-    description="Some description about the header above"
-    badgeText="Coming Soon"
-    badgeVariant="gray"
-  />
-);
-export const SearchInstalledApps = () => (
-  <PageHeader
-    title="Search booking"
-    description="See upcoming and past events booking through your event type link"
-    rightAlignedComponent={
-      <TextField
-        containerClassName="h-9 max-h-9"
-        addOnLeading={<Search />}
-        name="search"
-        labelSrOnly
-        placeholder="WIP"
-      />
-    }
-  />
-);
diff --git a/apps/storybook/stories/Radio.stories.tsx b/apps/storybook/stories/Radio.stories.tsx
deleted file mode 100644
index 39ebf8cbad..0000000000
--- a/apps/storybook/stories/Radio.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as Radio from "@calcom/ui/v2/core/form/radio-area/Radio";
-import { RadioField } from "@calcom/ui/v2/core/form/radio-area/Radio";
-
-export default {
-  title: "Radio",
-  component: RadioField,
-};
-
-export const RadioGroupDemo = () => {
-  return (
-    <form>
-      <Radio.Group aria-label="View density" defaultValue="default">
-        <RadioField label="Default" id="r1" value="1" />
-        <RadioField label="Next" id="r2" value="2" />
-        <RadioField label="Disabled" id="r3" disabled value="1" />
-      </Radio.Group>
-    </form>
-  );
-};
diff --git a/apps/storybook/stories/Select.stories.tsx b/apps/storybook/stories/Select.stories.tsx
deleted file mode 100644
index 265f7548ef..0000000000
--- a/apps/storybook/stories/Select.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import { Select } from "@calcom/ui/v2";
-import MultiDropdownSelect from "@calcom/ui/v2/modules/event-types/MultiDropdownSelect";
-
-export default {
-  title: "Form/Select",
-  component: Select,
-} as ComponentMeta<typeof Select>;
-
-const singleOptions = [
-  {
-    label: "Select",
-    value: 0,
-  },
-  ...[5, 10, 15, 20, 30, 45, 60, 90, 120].map((minutes) => ({
-    label: minutes + " " + "minutes",
-    value: minutes,
-  })),
-];
-const multiOptions = [
-  {
-    label: "Select",
-    value: 0,
-  },
-  ...[5, 10, 15, 20, 30, 45, 60, 90, 120].map((minutes) => ({
-    label: minutes + " " + "minutes",
-    value: minutes,
-  })),
-];
-
-export const Single = () => <Select options={singleOptions} />;
-export const Multi = () => <MultiDropdownSelect options={multiOptions} />;
diff --git a/apps/storybook/stories/Switch.stories.tsx b/apps/storybook/stories/Switch.stories.tsx
deleted file mode 100644
index 4b46911c18..0000000000
--- a/apps/storybook/stories/Switch.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import { Switch } from "@calcom/ui/v2";
-
-export default {
-  title: "Switch",
-  component: Switch,
-} as ComponentMeta<typeof Switch>;
-
-export const All = () => (
-  <div className="flex flex-col space-y-2">
-    <p>Checked works in app but storybook doesnt like it</p>
-    <Switch label="Default" />
-  </div>
-);
diff --git a/apps/storybook/stories/TabItem.stories.tsx b/apps/storybook/stories/TabItem.stories.tsx
deleted file mode 100644
index 1ad50ccee2..0000000000
--- a/apps/storybook/stories/TabItem.stories.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-// Disabling until we figure out what is happening with the RouterMock.
-import { ComponentMeta } from "@storybook/react";
-import { Link } from "react-feather";
-
-import { VerticalTabItem } from "@calcom/ui/v2";
-
-export default {
-  title: "VerticalTabItem",
-  component: VerticalTabItem,
-} as ComponentMeta<typeof VerticalTabItem>;
-
-const TabItemProps = {
-  name: "Event Setup",
-  icon: Link,
-  href: "/settings/event",
-  info: "60 mins, Zoom",
-};
-
-export const Default = () => (
-  <div className="h-20 w-full bg-gray-100 p-4">
-    <VerticalTabItem {...TabItemProps} />
-  </div>
-);
-export const Active = () => (
-  <div className="h-20 w-full bg-gray-100 p-4">
-    <VerticalTabItem {...TabItemProps} />
-  </div>
-);
-
-// Mocking next router to show active state
-Active.parameters = {
-  nextRouter: {
-    path: "/settings/[tab]",
-    asPath: "/settings/event",
-  },
-};
-
-export const Disabled = () => (
-  <div className="h-20 w-full bg-gray-100 p-4">
-    <VerticalTabItem {...TabItemProps} disabled />
-  </div>
-);
-
-export const NoIconNoInfo = () => (
-  <div className="h-20 w-full bg-gray-100 p-4">
-    <VerticalTabItem name="Event Setup" href="/settings/event" />
-  </div>
-);
-
-export const IconNoInfo = () => (
-  <div className="h-20 w-full bg-gray-100 p-4">
-    <VerticalTabItem name="Event Setup" href="/settings/event" icon={Link} />
-  </div>
-);
-
-export const IconNoInfoActive = () => (
-  <div className="h-20 w-full bg-gray-100 p-4">
-    <VerticalTabItem name="Event Setup" href="/settings/events" icon={Link} />
-  </div>
-);
-
-IconNoInfoActive.paramaters = {
-  nextRouter: {
-    path: "/settings/[tab]",
-    asPath: "/settings/events",
-  },
-};
diff --git a/apps/storybook/stories/ToggleGroup.stories.tsx b/apps/storybook/stories/ToggleGroup.stories.tsx
deleted file mode 100644
index 212841aae6..0000000000
--- a/apps/storybook/stories/ToggleGroup.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import { ToggleGroup } from "@calcom/ui/v2/core/form/ToggleGroup";
-
-export default {
-  title: "Toggle Group",
-  component: ToggleGroup,
-} as ComponentMeta<typeof ToggleGroup>;
-
-export const Default = () => {
-  return (
-    <ToggleGroup
-      defaultValue="12"
-      options={[
-        { value: "12", label: "12h" },
-        { value: "24", label: "24h" },
-      ]}
-    />
-  );
-};
diff --git a/apps/storybook/stories/VerticalTab.stories.tsx b/apps/storybook/stories/VerticalTab.stories.tsx
deleted file mode 100644
index 40336879d1..0000000000
--- a/apps/storybook/stories/VerticalTab.stories.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-// Disabling until we figure out what is happening with the RouterMock.
-import { ComponentMeta } from "@storybook/react";
-import { Calendar, Clock, Grid, Link, RefreshCw, User, Users } from "react-feather";
-
-import VerticalTabs from "@calcom/ui/v2/core/navigation/tabs/VerticalTabs";
-
-export default {
-  title: "Vertical Tabs",
-  component: VerticalTabs,
-} as ComponentMeta<typeof VerticalTabs>;
-
-const VerticalTabsPropsDefault = [
-  {
-    name: "Security",
-    icon: Link,
-    href: "/security",
-  },
-  {
-    name: "Profile",
-    icon: User,
-    href: "/profile",
-  },
-  {
-    name: "Calendar Sync",
-    icon: RefreshCw,
-    href: "/cal-sync",
-  },
-  {
-    name: "Teams",
-    icon: Users,
-    href: "/Teams",
-  },
-];
-
-export const Default = () => (
-  <div className="w-full p-4" style={{ backgroundColor: "#F9FAFB" }}>
-    <VerticalTabs tabs={VerticalTabsPropsDefault} />
-  </div>
-);
-
-Default.parameters = {
-  nextRouter: {
-    path: "/[page]",
-    asPath: "/profile",
-  },
-};
-
-const VerticalTabsPropsInfo = [
-  {
-    name: "Event Setup",
-    icon: Link,
-    href: "/events",
-    info: "60 Mins, Zoom",
-  },
-  {
-    name: "Availability",
-    icon: Calendar,
-    href: "/availability",
-    info: "Working Hours",
-  },
-  {
-    name: "Limits",
-    icon: Clock,
-    href: "/limits",
-    info: "Buffers, Limits & more...",
-  },
-  {
-    name: "Apps",
-    icon: Grid,
-    href: "/apps",
-    info: "3 apps - 0 active",
-  },
-];
-
-export const Info = () => (
-  <div className="w-full p-4" style={{ backgroundColor: "#F9FAFB" }}>
-    <VerticalTabs tabs={VerticalTabsPropsInfo} />
-  </div>
-);
-Info.parameters = {
-  nextRouter: {
-    path: "/[page]",
-    asPath: "/events",
-  },
-};
diff --git a/apps/storybook/storybook-static/favicon.ico b/apps/storybook/storybook-static/favicon.ico
new file mode 100644
index 0000000000..428500fde1
Binary files /dev/null and b/apps/storybook/storybook-static/favicon.ico differ
diff --git a/apps/storybook/storybook-static/sb-cover.jpg b/apps/storybook/storybook-static/sb-cover.jpg
new file mode 100644
index 0000000000..bc9b9ebc4b
Binary files /dev/null and b/apps/storybook/storybook-static/sb-cover.jpg differ
diff --git a/apps/storybook/styles/globals.css b/apps/storybook/styles/globals.css
old mode 100755
new mode 100644
index 19ed75475a..9cf51c189d
--- a/apps/storybook/styles/globals.css
+++ b/apps/storybook/styles/globals.css
@@ -2,13 +2,4 @@
 @tailwind components;
 @tailwind utilities;
 
-@import "../../../packages/ui/v2/core/form/date-range-picker/styles.css";
-@import "../../../node_modules/@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css";
-
-:root {
-  --brand-color: #292929;
-  --brand-text-color: #ffffff;
-  --brand-color-dark-mode: #fafafa;
-  --brand-text-color-dark-mode: #292929;
-  font-family: 'Inter', sans-serif;
-}
+@import "../../../packages/ui/styles/shared-globals.css"
\ No newline at end of file
diff --git a/apps/storybook/styles/storybook-styles.css b/apps/storybook/styles/storybook-styles.css
new file mode 100644
index 0000000000..896dfa6379
--- /dev/null
+++ b/apps/storybook/styles/storybook-styles.css
@@ -0,0 +1,189 @@
+.sbdocs {
+  font-family: 'Inter var' !important;
+  padding: 0!important;
+}
+
+#docs-root {
+  overflow: hidden;
+}
+
+.sbdocs.sbdocs-h1 {
+  font-family: "Cal Sans", "sans-serif" !important;
+  font-weight: 600;
+  font-size: 36px;
+  margin: 0 0 82px 0;
+}
+
+.sbdocs.sbdocs-h2 {
+  font-size: 20px;
+  font-weight: 500;
+  border: none;
+  border-top: 2px solid rgba(0, 0, 0, 0.12);
+  padding-top: 12px!important;
+  padding-bottom: 12px!important;
+  margin: 82px 0 0 0;
+}
+
+.sbdocs.sbdocs-p {
+  max-width: 560px;
+  margin: 0 0 12px 0;
+}
+
+.sbdocs.sbdocs-content {
+  width: 1200px;
+  max-width: 100%;
+}
+
+/** Docs table **/
+.custom-args-wrapper{
+  max-height: 600px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  margin-bottom: 1rem;
+}
+
+.docblock-argstable-body {
+  box-shadow: none!important;
+  font-size: 14px;
+}
+
+/* .docblock-argstable-head tr th, */
+.docblock-argstable-body tr td {
+  /* padding-left: 0!important; */
+  padding: 20px !important;
+}
+
+/** Column titles **/
+.docblock-argstable-body tr td > span,
+.docblock-argstable-head tr th > span {
+  color: #525252 !important;
+  font-weight: 500 !important;
+}
+
+.docblock-argstable-body div p,
+.docblock-argstable-body div span {
+  color: #8F8F8F !important;
+}
+
+/** Custom components **/
+.story-title {
+  margin: 0 0 82px 0;
+}
+
+.story-title.offset {
+  margin-top: 100px;
+}
+
+.story-title h1 {
+  font-family: "Cal Sans", "sans-serif" !important;
+  font-weight: 600;
+  font-size: 36px;
+}
+
+.story-title h1 span {
+  color: #9CA3AF;
+  font-family: 'Inter var';
+  font-weight: normal;
+  display: inline-block;
+  margin-left: 8px;
+}
+
+.story-title p {
+  color: #111827;
+  font-size: 16px;
+}
+
+.examples {
+  background-color: #F9FAFB;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+}
+
+.examples-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 30px 0;
+}
+
+.examples-title {
+  color: #8F8F8F;
+  font-size: 14px;
+  margin-bottom: 30px;
+}
+
+.examples-item-title {
+  font-size: 12px;
+  color: #8F8F8F;
+  margin-bottom: 12px;
+  display: block;
+}
+
+.examples-item {
+  margin: 0 20px;
+}
+
+.examples-footnote p,
+.examples-footnote ul,
+.examples-footnote li {
+  color: #8F8F8F;
+  font-size: 14px;
+}
+
+.examples-footnote ul {
+  padding-left: 8px;
+}
+
+.examples-footnote li {
+  margin: 0!important;
+}
+
+.story-note {
+  background-color: #F9FAFB;
+  font-size: 14px;
+  padding: 20px;
+  margin-bottom: 12px;
+  border-radius: 8px;
+}
+
+.story-note > div {
+  max-width: 600px;
+}
+
+/** SB Docs Preview **/
+.sbdocs-preview {
+  width: 100vw;
+  left: calc((100vw - 1200px) / -2);
+  box-shadow: none !important;
+  margin: 0 !important;
+  border: none !important;
+  border-radius: none!important;
+}
+
+.docs-story > div:first-child {
+  padding: 0!important;
+  margin: 0!important;
+}
+
+.docs-story .innerZoomElementWrapper > div {
+  border: none !important;
+}
+
+.sb-main-padded {
+  padding: 0!important;
+}
+
+@media screen and (max-width: 1200px) {
+  .sbdocs-preview {
+    left: -24px;
+    width: calc(100vw + 48px);
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .sbdocs.sbdocs-content {
+    padding: 24px !important;
+  }
+}
diff --git a/apps/storybook/tailwind.config.js b/apps/storybook/tailwind.config.js
index d86d3c88e6..c42f7605c7 100644
--- a/apps/storybook/tailwind.config.js
+++ b/apps/storybook/tailwind.config.js
@@ -1,167 +1,7 @@
+const base = require("@calcom/config/tailwind-preset");
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["../../packages/ui/**/*.{js,ts,jsx,tsx}", "./stories/**/*.{js,ts,tsx,jsx}"],
-  darkMode: "class",
-  theme: {
-    fontFamily: {
-      cal: ["Cal Sans", "sans-serif"],
-      mono: ["Roboto Mono", "monospace"],
-    },
-    extend: {
-      colors: {
-        /* your primary brand color */
-        brandcontrast: "var(--brand-text-color)",
-        darkmodebrand: "var(--brand-color-dark-mode)",
-        darkmodebrandcontrast: "var(--brand-text-color-dark-mode)",
-        bookinglightest: "var(--booking-lightest-color)",
-        bookinglighter: "var(--booking-lighter-color)",
-        bookinglight: "var(--booking-light-color)",
-        bookingmedian: "var(--booking-median-color)",
-        bookingdark: "var(--booking-dark-color)",
-        bookingdarker: "var(--booking-darker-color)",
-        bookinghighlight: "var(--booking-highlight-color)",
-        black: "#111111",
-        brand: {
-          // Figure out a way to automate this for self hosted users
-          // Goto https://javisperez.github.io/tailwindcolorshades to generate your brand color
-          50: "#d1d5db",
-          100: "#9ca3af",
-          200: "#6b7280",
-          300: "#4b5563",
-          400: "#374151",
-          500: "#111827", // Brand color
-          600: "#0f1623",
-          700: "#0d121d",
-          800: "#0a0e17",
-          900: "#080c13",
-          DEFAULT: "#111827",
-        },
-        gray: {
-          50: "#F9FAFB",
-          100: "#F3F4F6",
-          200: "#E5E7EB",
-          300: "#D1D5DB",
-          400: "#9CA3AF",
-          500: "#6B7280",
-          600: "#4B5563",
-          700: "#374151",
-          800: "#1F2937",
-          900: "#111827",
-        },
-        neutral: {
-          50: "#F8F8F8",
-          100: "#F5F5F5",
-          200: "#E1E1E1",
-          300: "#CFCFCF",
-          400: "#ACACAC",
-          500: "#888888",
-          600: "#494949",
-          700: "#3E3E3E",
-          800: "#313131",
-          900: "#292929",
-        },
-        primary: {
-          50: "#F4F4F4",
-          100: "#E8E8E8",
-          200: "#C6C6C6",
-          300: "#A3A3A3",
-          400: "#5F5F5F",
-          500: "#1A1A1A",
-          600: "#171717",
-          700: "#141414",
-          800: "#101010",
-          900: "#0D0D0D",
-        },
-        secondary: {
-          50: "#F5F8F7",
-          100: "#EBF0F0",
-          200: "#CDDAD9",
-          300: "#AEC4C2",
-          400: "#729894",
-          500: "#356C66",
-          600: "#30615C",
-          700: "#28514D",
-          800: "#20413D",
-          900: "#223B41",
-        },
-        red: {
-          50: "#FFF5F5",
-          100: "#FFE3E2",
-          200: "#FFC9C9",
-          300: "#FEA8A8",
-          400: "#FF8787",
-          500: "#FF6B6B",
-          600: "#FA5352",
-          700: "#F03E3F",
-          800: "#E03130",
-          900: "#C92B2B",
-        },
-        orange: {
-          50: "#FFF4E5",
-          100: "#FFE8CC",
-          200: "#FFD8A8",
-          300: "#FFBF78",
-          400: "#FFA94E",
-          500: "#FF922B",
-          600: "#FD7E14",
-          700: "#F76706",
-          800: "#E8580C",
-          900: "#D94810",
-        },
-        green: {
-          50: "#EBFCEE",
-          100: "#D2F9D9",
-          200: "#B1F2BA",
-          300: "#8CE99A",
-          400: "#69DB7C",
-          500: "#51CF66",
-          600: "#40C057",
-          700: "#36B24D",
-          800: "#2F9E44",
-          900: "#2B8A3E",
-        },
-        blue: {
-          50: "#E7F5FF",
-          100: "#D0EBFF",
-          200: "#A4D8FF",
-          300: "#74C0FC",
-          400: "#4DABF7",
-          500: "#339AF0",
-          600: "#238BE6",
-          700: "#1C7ED7",
-          800: "#1971C2",
-          900: "#1763AB",
-        },
-      },
-      fontFamily: {
-        cal: ["inter", "sans-serif"],
-        mono: ["Roboto Mono", "monospace"],
-      },
-      maxHeight: (theme) => ({
-        0: "0",
-        97: "25rem",
-        ...theme("spacing"),
-        full: "100%",
-        screen: "100vh",
-      }),
-      minHeight: (theme) => ({
-        0: "0",
-        ...theme("spacing"),
-        full: "100%",
-        screen: "100vh",
-      }),
-      minWidth: (theme) => ({
-        0: "0",
-        ...theme("spacing"),
-        full: "100%",
-        screen: "100vw",
-      }),
-      maxWidth: (theme, { breakpoints }) => ({
-        0: "0",
-        ...theme("spacing"),
-        ...breakpoints(theme("screens")),
-        full: "100%",
-        screen: "100vw",
-      }),
-    },
-  },
+  ...base,
+  darkMode: ["class", '[data-mode="dark"]'],
+  content: [...base.content, "../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}", "./stories/**/*.{js,ts,tsx,jsx}"],
 };
diff --git a/apps/storybook/tsconfig.json b/apps/storybook/tsconfig.json
old mode 100755
new mode 100644
diff --git a/apps/storybook/tsconfig.node.json b/apps/storybook/tsconfig.node.json
new file mode 100644
index 0000000000..80a01331d0
--- /dev/null
+++ b/apps/storybook/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  }
+}
diff --git a/apps/web/components/App.tsx b/apps/web/components/App.tsx
index 5908ca8106..d015da908a 100644
--- a/apps/web/components/App.tsx
+++ b/apps/web/components/App.tsx
@@ -11,7 +11,7 @@ import { App as AppType } from "@calcom/types/App";
 import { Button, SkeletonButton } from "@calcom/ui";
 import { Icon } from "@calcom/ui/Icon";
 import Shell from "@calcom/ui/Shell";
-import Badge from "@calcom/ui/v2/core/Badge";
+import { Badge } from "@calcom/ui/components/badge";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 import DisconnectIntegration from "@components/integrations/DisconnectIntegration";
diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx
index d8a0a5d047..1606c06bb4 100644
--- a/apps/web/components/Embed.tsx
+++ b/apps/web/components/Embed.tsx
@@ -6,8 +6,9 @@ import { components, ControlProps } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/components";
 import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
-import { Button, HorizontalTabs, showToast, Switch } from "@calcom/ui/v2";
+import { HorizontalTabs, showToast, Switch } from "@calcom/ui/v2";
 import { Dialog, DialogClose, DialogContent } from "@calcom/ui/v2/core/Dialog";
 
 import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
diff --git a/apps/web/components/apps/App.tsx b/apps/web/components/apps/App.tsx
index 758cf3c59c..83d5e2420b 100644
--- a/apps/web/components/apps/App.tsx
+++ b/apps/web/components/apps/App.tsx
@@ -10,8 +10,9 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { App as AppType } from "@calcom/types/App";
 import { Icon } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/components";
 import { showToast, SkeletonText } from "@calcom/ui/v2";
-import { Button, SkeletonButton, Shell } from "@calcom/ui/v2";
+import { SkeletonButton, Shell } from "@calcom/ui/v2";
 import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
 
 import HeadSeo from "@components/seo/head-seo";
diff --git a/apps/web/components/apps/CalendarListContainer.tsx b/apps/web/components/apps/CalendarListContainer.tsx
index 137a6ebffc..644b9601e4 100644
--- a/apps/web/components/apps/CalendarListContainer.tsx
+++ b/apps/web/components/apps/CalendarListContainer.tsx
@@ -8,7 +8,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
 import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
-import { Alert, Button, EmptyScreen } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { Alert, EmptyScreen } from "@calcom/ui/v2";
 import { List } from "@calcom/ui/v2/core/List";
 import { ShellSubHeading } from "@calcom/ui/v2/core/Shell";
 import Switch from "@calcom/ui/v2/core/Switch";
diff --git a/apps/web/components/apps/OmniInstallAppButton.tsx b/apps/web/components/apps/OmniInstallAppButton.tsx
index 18a90a2702..cffa762fc8 100644
--- a/apps/web/components/apps/OmniInstallAppButton.tsx
+++ b/apps/web/components/apps/OmniInstallAppButton.tsx
@@ -5,8 +5,8 @@ import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/components/button";
 import { showToast } from "@calcom/ui/v2";
-import Button from "@calcom/ui/v2/core/Button";
 
 /**
  * Use this component to allow installing an app from anywhere on the app.
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 0ee17dac21..42412d19a2 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -11,9 +11,9 @@ import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { inferQueryInput, inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
 import { TextArea } from "@calcom/ui/form/fields";
-import Badge from "@calcom/ui/v2/core/Badge";
-import Button from "@calcom/ui/v2/core/Button";
 import MeetingTimeInTimezones from "@calcom/ui/v2/core/MeetingTimeInTimezones";
 import Tooltip from "@calcom/ui/v2/core/Tooltip";
 import showToast from "@calcom/ui/v2/core/notifications";
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index b7c72b173f..478c83fc31 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -40,9 +40,9 @@ import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
+import { Button } from "@calcom/ui/components";
 import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
 import { EmailInput, Form } from "@calcom/ui/form/fields";
-import { Button } from "@calcom/ui/v2";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
diff --git a/apps/web/components/dialog/RescheduleDialog.tsx b/apps/web/components/dialog/RescheduleDialog.tsx
index f5ce72002c..940f9c6265 100644
--- a/apps/web/components/dialog/RescheduleDialog.tsx
+++ b/apps/web/components/dialog/RescheduleDialog.tsx
@@ -4,8 +4,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/components/button";
 import { TextArea } from "@calcom/ui/form/fields";
-import Button from "@calcom/ui/v2/core/Button";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 interface IRescheduleDialog {
diff --git a/apps/web/components/getting-started/components/CalendarItem.tsx b/apps/web/components/getting-started/components/CalendarItem.tsx
index 9ee3854909..12effe2442 100644
--- a/apps/web/components/getting-started/components/CalendarItem.tsx
+++ b/apps/web/components/getting-started/components/CalendarItem.tsx
@@ -1,7 +1,7 @@
 import { InstallAppButtonWithoutPlanCheck } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { App } from "@calcom/types/App";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 
 interface ICalendarItem {
   title: string;
diff --git a/apps/web/components/getting-started/components/ConnectedCalendarItem.tsx b/apps/web/components/getting-started/components/ConnectedCalendarItem.tsx
index 06f60db445..cc57b136ea 100644
--- a/apps/web/components/getting-started/components/ConnectedCalendarItem.tsx
+++ b/apps/web/components/getting-started/components/ConnectedCalendarItem.tsx
@@ -1,7 +1,4 @@
-import { DotsHorizontalIcon } from "@heroicons/react/solid";
-
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui/v2";
 
 import { CalendarSwitch } from "./CalendarSwitch";
 
diff --git a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
index d916aa68ed..acea65cc0f 100644
--- a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
+++ b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
@@ -7,8 +7,8 @@ import { DEFAULT_SCHEDULE } from "@calcom/lib/availability";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc, TRPCClientErrorLike } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
+import { Button } from "@calcom/ui/components/button";
 import { Form } from "@calcom/ui/form/fields";
-import { Button } from "@calcom/ui/v2";
 
 interface ISetupAvailabilityProps {
   nextStep: () => void;
diff --git a/apps/web/components/getting-started/steps-views/UserProfile.tsx b/apps/web/components/getting-started/steps-views/UserProfile.tsx
index 8c6d2382c0..7f7f96db04 100644
--- a/apps/web/components/getting-started/steps-views/UserProfile.tsx
+++ b/apps/web/components/getting-started/steps-views/UserProfile.tsx
@@ -6,7 +6,9 @@ import { useForm } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { User } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button, showToast, TextArea } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { TextArea } from "@calcom/ui/components/form";
+import { showToast } from "@calcom/ui/v2";
 import ImageUploader from "@calcom/ui/v2/core/ImageUploader";
 
 import { AvatarSSR } from "@components/ui/AvatarSSR";
diff --git a/apps/web/components/getting-started/steps-views/UserSettings.tsx b/apps/web/components/getting-started/steps-views/UserSettings.tsx
index f55dc32a04..e45ed6aff1 100644
--- a/apps/web/components/getting-started/steps-views/UserSettings.tsx
+++ b/apps/web/components/getting-started/steps-views/UserSettings.tsx
@@ -6,8 +6,8 @@ import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { User } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
+import { Button } from "@calcom/ui/components/button";
 import TimezoneSelect from "@calcom/ui/form/TimezoneSelect";
-import { Button } from "@calcom/ui/v2";
 
 import { UsernameAvailability } from "@components/ui/UsernameAvailability";
 
diff --git a/apps/web/components/integrations/SubHeadingTitleWithConnections.tsx b/apps/web/components/integrations/SubHeadingTitleWithConnections.tsx
index f6e083859d..8effb21250 100644
--- a/apps/web/components/integrations/SubHeadingTitleWithConnections.tsx
+++ b/apps/web/components/integrations/SubHeadingTitleWithConnections.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-import Badge from "@calcom/ui/Badge";
+import { Badge } from "@calcom/ui/components/badge";
 
 function pluralize(opts: { num: number; plural: string; singular: string }) {
   if (opts.num === 0) {
diff --git a/apps/web/components/security/DisableTwoFactorModal.tsx b/apps/web/components/security/DisableTwoFactorModal.tsx
index 79739eb5c5..d4923fdd37 100644
--- a/apps/web/components/security/DisableTwoFactorModal.tsx
+++ b/apps/web/components/security/DisableTwoFactorModal.tsx
@@ -5,8 +5,8 @@ import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { PasswordField } from "@calcom/ui/components/form";
 import { Form, Label } from "@calcom/ui/form/fields";
-import { PasswordField } from "@calcom/ui/v2/core/form/fields";
 
 import TwoFactor from "@components/auth/TwoFactor";
 
diff --git a/apps/web/components/security/DisableUserImpersonation.tsx b/apps/web/components/security/DisableUserImpersonation.tsx
index b7eb269f3a..09d874fb9a 100644
--- a/apps/web/components/security/DisableUserImpersonation.tsx
+++ b/apps/web/components/security/DisableUserImpersonation.tsx
@@ -1,7 +1,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import Badge from "@calcom/ui/Badge";
 import Button from "@calcom/ui/Button";
+import { Badge } from "@calcom/ui/components/badge";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonation: boolean }) => {
diff --git a/apps/web/components/security/EnableTwoFactorModal.tsx b/apps/web/components/security/EnableTwoFactorModal.tsx
index 8ebc95cac7..653f575b46 100644
--- a/apps/web/components/security/EnableTwoFactorModal.tsx
+++ b/apps/web/components/security/EnableTwoFactorModal.tsx
@@ -5,7 +5,7 @@ import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
-import { Form } from "@calcom/ui/v2/core/form/fields";
+import { Form } from "@calcom/ui/components/form";
 
 import TwoFactor from "@components/auth/TwoFactor";
 
diff --git a/apps/web/components/security/TwoFactorAuthSection.tsx b/apps/web/components/security/TwoFactorAuthSection.tsx
index 4a2b03325e..a48550fae9 100644
--- a/apps/web/components/security/TwoFactorAuthSection.tsx
+++ b/apps/web/components/security/TwoFactorAuthSection.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
-import Badge from "@calcom/ui/Badge";
 import Button from "@calcom/ui/Button";
+import { Badge } from "@calcom/ui/components/badge";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
diff --git a/apps/web/components/settings/CalendarSwitch.tsx b/apps/web/components/settings/CalendarSwitch.tsx
index 0c3ed10117..89e42fa983 100644
--- a/apps/web/components/settings/CalendarSwitch.tsx
+++ b/apps/web/components/settings/CalendarSwitch.tsx
@@ -3,7 +3,7 @@ import { useMutation } from "@tanstack/react-query";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import Badge from "@calcom/ui/v2/core/Badge";
+import { Badge } from "@calcom/ui/components/badge";
 import Switch from "@calcom/ui/v2/core/Switch";
 import showToast from "@calcom/ui/v2/core/notifications";
 
diff --git a/apps/web/components/settings/DisableTwoFactorModal.tsx b/apps/web/components/settings/DisableTwoFactorModal.tsx
index a183c8fa07..1a1a68d352 100644
--- a/apps/web/components/settings/DisableTwoFactorModal.tsx
+++ b/apps/web/components/settings/DisableTwoFactorModal.tsx
@@ -3,10 +3,10 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
+import { Form, Label } from "@calcom/ui/components/form";
+import { PasswordField } from "@calcom/ui/components/form";
 import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
-import { Form, Label } from "@calcom/ui/v2/core/form/fields";
-import { PasswordField } from "@calcom/ui/v2/core/form/fields";
 
 import TwoFactor from "@components/auth/TwoFactor";
 
diff --git a/apps/web/components/settings/EnableTwoFactorModal.tsx b/apps/web/components/settings/EnableTwoFactorModal.tsx
index 002b8fbd99..d094720fc2 100644
--- a/apps/web/components/settings/EnableTwoFactorModal.tsx
+++ b/apps/web/components/settings/EnableTwoFactorModal.tsx
@@ -3,9 +3,9 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
+import { Form, TextField } from "@calcom/ui/components/form";
 import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
-import { Form, TextField } from "@calcom/ui/v2/core/form/fields";
 
 import TwoFactor from "@components/auth/TwoFactor";
 
diff --git a/apps/web/components/team/DisableTeamImpersonation.tsx b/apps/web/components/team/DisableTeamImpersonation.tsx
index 95c9b0aa19..0208c47845 100644
--- a/apps/web/components/team/DisableTeamImpersonation.tsx
+++ b/apps/web/components/team/DisableTeamImpersonation.tsx
@@ -1,7 +1,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import Badge from "@calcom/ui/Badge";
 import Button from "@calcom/ui/Button";
+import { Badge } from "@calcom/ui/components/badge";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 /** @deprecated Use `packages/features/ee/teams/components/DisableTeamImpersonation.tsx` */
diff --git a/apps/web/components/team/TeamListItem.tsx b/apps/web/components/team/TeamListItem.tsx
index 58a83de7be..214daf0763 100644
--- a/apps/web/components/team/TeamListItem.tsx
+++ b/apps/web/components/team/TeamListItem.tsx
@@ -6,8 +6,8 @@ import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
-import Button from "@calcom/ui/v2/core/Button";
-import ButtonGroup from "@calcom/ui/v2/core/ButtonGroup";
+import { Button } from "@calcom/ui/components/button";
+import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
 import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
 import { Dialog, DialogTrigger } from "@calcom/ui/v2/core/Dialog";
 import Dropdown, {
diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx
index f73905609a..9a32b05d57 100644
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
-import { Avatar } from "@calcom/ui/v2";
+import { Avatar } from "@calcom/ui/components";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
diff --git a/apps/web/components/ui/TableActions.tsx b/apps/web/components/ui/TableActions.tsx
index dde018c08c..e29a9d6447 100644
--- a/apps/web/components/ui/TableActions.tsx
+++ b/apps/web/components/ui/TableActions.tsx
@@ -7,7 +7,7 @@ import Dropdown, {
   DropdownMenuPortal,
 } from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 
 import { SVGComponent } from "@lib/types/SVGComponent";
 
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index dc38ecce3d..d14f613737 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -13,8 +13,8 @@ import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
 import { Icon, StarIconSolid } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/v2";
-import { Input, Label } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components/button";
+import { Input, Label } from "@calcom/ui/components/form";
 
 export enum UsernameChangeStatusEnum {
   NORMAL = "NORMAL",
diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index af4fd1a4f6..6be9c1bcd5 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -9,7 +9,7 @@ import { trpc } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
-import { Input, Label, Button } from "@calcom/ui/v2";
+import { Button, Input, Label } from "@calcom/ui/components";
 
 interface ICustomUsernameProps {
   currentUsername: string | undefined;
diff --git a/apps/web/components/v2/eventtype/AvailabilityTab.tsx b/apps/web/components/v2/eventtype/AvailabilityTab.tsx
index c5d7b8131f..6b98bced32 100644
--- a/apps/web/components/v2/eventtype/AvailabilityTab.tsx
+++ b/apps/web/components/v2/eventtype/AvailabilityTab.tsx
@@ -9,8 +9,9 @@ import { weekdayNames } from "@calcom/lib/weekday";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { Icon } from "@calcom/ui";
-import { Badge, SettingsToggle } from "@calcom/ui/v2";
-import Button from "@calcom/ui/v2/core/Button";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+import { SettingsToggle } from "@calcom/ui/v2";
 import Select from "@calcom/ui/v2/core/form/select";
 import { SkeletonText } from "@calcom/ui/v2/core/skeleton";
 
diff --git a/apps/web/components/v2/eventtype/CustomInputTypeForm.tsx b/apps/web/components/v2/eventtype/CustomInputTypeForm.tsx
index 9676abb12d..5eeed7467f 100644
--- a/apps/web/components/v2/eventtype/CustomInputTypeForm.tsx
+++ b/apps/web/components/v2/eventtype/CustomInputTypeForm.tsx
@@ -2,7 +2,9 @@ import { EventTypeCustomInput, EventTypeCustomInputType } from "@prisma/client";
 import React, { FC } from "react";
 import { Controller, SubmitHandler, useForm, useWatch } from "react-hook-form";
 
-import { Button, Select, TextArea, TextField } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { TextField } from "@calcom/ui/components/form";
+import { Select } from "@calcom/ui/v2";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
diff --git a/apps/web/components/v2/eventtype/EditLocationDialog.tsx b/apps/web/components/v2/eventtype/EditLocationDialog.tsx
index 4e3c832c38..7a1f6e19a2 100644
--- a/apps/web/components/v2/eventtype/EditLocationDialog.tsx
+++ b/apps/web/components/v2/eventtype/EditLocationDialog.tsx
@@ -17,10 +17,10 @@ import {
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/components";
+import { Label, Form } from "@calcom/ui/components/form";
 import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
 import { Dialog, DialogContent } from "@calcom/ui/v2";
-import { Button, Label } from "@calcom/ui/v2";
-import { Form } from "@calcom/ui/v2";
 import { Select } from "@calcom/ui/v2/";
 
 import { QueryCell } from "@lib/QueryCell";
diff --git a/apps/web/components/v2/eventtype/EventAdvancedTab.tsx b/apps/web/components/v2/eventtype/EventAdvancedTab.tsx
index 323f2b1134..a6c882cac0 100644
--- a/apps/web/components/v2/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/v2/eventtype/EventAdvancedTab.tsx
@@ -1,4 +1,3 @@
-import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { EventTypeCustomInput } from "@prisma/client/";
 import Link from "next/link";
 import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
@@ -12,20 +11,8 @@ import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import {
-  Button,
-  CustomInputItem,
-  Dialog,
-  DialogContent,
-  Label,
-  SettingsToggle,
-  showToast,
-  Skeleton,
-  Switch,
-  TextField,
-  Tooltip,
-} from "@calcom/ui/v2";
-import CheckboxField from "@calcom/ui/v2/core/form/Checkbox";
+import { Checkbox, Button, TextField, Label } from "@calcom/ui/components";
+import { CustomInputItem, Dialog, DialogContent, SettingsToggle, showToast, Tooltip } from "@calcom/ui/v2";
 
 import CustomInputTypeForm from "@components/v2/eventtype/CustomInputTypeForm";
 
@@ -335,7 +322,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
                     }}
                   />
                   <div className="mt-2">
-                    <CheckboxField
+                    <Checkbox
                       description={t("show_attendees")}
                       onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
                       defaultChecked={!!eventType.seatsShowAttendees}
diff --git a/apps/web/components/v2/eventtype/EventAppsTab.tsx b/apps/web/components/v2/eventtype/EventAppsTab.tsx
index f1bed4a23f..d792853e49 100644
--- a/apps/web/components/v2/eventtype/EventAppsTab.tsx
+++ b/apps/web/components/v2/eventtype/EventAppsTab.tsx
@@ -10,7 +10,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
 import ErrorBoundary from "@calcom/ui/ErrorBoundary";
-import { Button, EmptyScreen } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { EmptyScreen } from "@calcom/ui/v2";
 
 type EventType = Pick<EventTypeSetupInfered, "eventType">["eventType"] &
   EventTypeAppCardComponentProps["eventType"];
diff --git a/apps/web/components/v2/eventtype/EventLimitsTab.tsx b/apps/web/components/v2/eventtype/EventLimitsTab.tsx
index 437b6e212a..8b9a147d33 100644
--- a/apps/web/components/v2/eventtype/EventLimitsTab.tsx
+++ b/apps/web/components/v2/eventtype/EventLimitsTab.tsx
@@ -9,7 +9,9 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PeriodType } from "@calcom/prisma/client";
 import type { BookingLimit } from "@calcom/types/Calendar";
 import { Icon } from "@calcom/ui";
-import { Select, Switch, Label, Input, MinutesField, Button, SettingsToggle } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { Label, Input, MinutesField } from "@calcom/ui/components/form";
+import { Select, SettingsToggle } from "@calcom/ui/v2";
 import DateRangePicker from "@calcom/ui/v2/core/form/date-range-picker/DateRangePicker";
 
 export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">) => {
diff --git a/apps/web/components/v2/eventtype/EventSetupTab.tsx b/apps/web/components/v2/eventtype/EventSetupTab.tsx
index 1a7eaf7e35..0d25278d98 100644
--- a/apps/web/components/v2/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/v2/eventtype/EventSetupTab.tsx
@@ -10,7 +10,9 @@ import { getEventLocationType, EventLocationType } from "@calcom/app-store/locat
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui/Icon";
-import { Select, Label, TextField, Button, Skeleton } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { Label, TextField } from "@calcom/ui/components/form";
+import { Select, Skeleton } from "@calcom/ui/v2";
 
 import { slugify } from "@lib/slugify";
 
diff --git a/apps/web/components/v2/eventtype/EventTeamTab.tsx b/apps/web/components/v2/eventtype/EventTeamTab.tsx
index 96a7210989..8117a5fcac 100644
--- a/apps/web/components/v2/eventtype/EventTeamTab.tsx
+++ b/apps/web/components/v2/eventtype/EventTeamTab.tsx
@@ -6,7 +6,9 @@ import { Controller, useFormContext } from "react-hook-form";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui";
-import { Avatar, Button, Label, Select, CheckedTeamSelect } from "@calcom/ui/v2";
+import { Button, Avatar } from "@calcom/ui/components";
+import { Label } from "@calcom/ui/components/form";
+import { Select, CheckedTeamSelect } from "@calcom/ui/v2";
 
 interface IMemberToValue {
   id: number | null;
diff --git a/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
index b887100a2b..adfe239001 100644
--- a/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
@@ -11,16 +11,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc, TRPCClientError } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
-import {
-  Button,
-  ButtonGroup,
-  HorizontalTabs,
-  Label,
-  showToast,
-  Switch,
-  Tooltip,
-  VerticalTabs,
-} from "@calcom/ui/v2";
+import { Button, ButtonGroup, Label } from "@calcom/ui/components";
+import { HorizontalTabs, showToast, Switch, Tooltip, VerticalTabs } from "@calcom/ui/v2";
 import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
 import { Dialog } from "@calcom/ui/v2/core/Dialog";
 import Divider from "@calcom/ui/v2/core/Divider";
diff --git a/apps/web/components/v2/eventtype/RecurringEventController.tsx b/apps/web/components/v2/eventtype/RecurringEventController.tsx
index b5a1b91902..f7f4c57c65 100644
--- a/apps/web/components/v2/eventtype/RecurringEventController.tsx
+++ b/apps/web/components/v2/eventtype/RecurringEventController.tsx
@@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Frequency } from "@calcom/prisma/zod-utils";
 import type { RecurringEvent } from "@calcom/types/Calendar";
 import { Alert } from "@calcom/ui/Alert";
-import { Label, Select, Switch, SettingsToggle } from "@calcom/ui/v2";
+import { Select, SettingsToggle } from "@calcom/ui/v2";
 
 type RecurringEventControllerProps = {
   recurringEvent: RecurringEvent | null;
diff --git a/apps/web/pages/apps/installed/[category].tsx b/apps/web/pages/apps/installed/[category].tsx
index f3cffac435..ee8209d379 100644
--- a/apps/web/pages/apps/installed/[category].tsx
+++ b/apps/web/pages/apps/installed/[category].tsx
@@ -9,8 +9,8 @@ import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { App } from "@calcom/types/App";
 import { AppGetServerSidePropsContext } from "@calcom/types/AppGetServerSideProps";
 import { Icon } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/components/button";
 import { Alert } from "@calcom/ui/v2/core/Alert";
-import Button from "@calcom/ui/v2/core/Button";
 import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
 import { List } from "@calcom/ui/v2/core/List";
 import { ShellSubHeading } from "@calcom/ui/v2/core/Shell";
diff --git a/apps/web/pages/auth/forgot-password/[id].tsx b/apps/web/pages/auth/forgot-password/[id].tsx
index 6eb1191c91..a48d286cfd 100644
--- a/apps/web/pages/auth/forgot-password/[id].tsx
+++ b/apps/web/pages/auth/forgot-password/[id].tsx
@@ -7,11 +7,10 @@ import React, { useMemo } from "react";
 
 import dayjs from "@calcom/dayjs";
 import prisma from "@calcom/prisma";
-import { Button, Input, TextField } from "@calcom/ui/v2";
+import { Button, TextField } from "@calcom/ui/components";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
-import { HeadSeo } from "@components/seo/head-seo";
 import AuthContainer from "@components/ui/AuthContainer";
 
 type Props = {
diff --git a/apps/web/pages/auth/forgot-password/index.tsx b/apps/web/pages/auth/forgot-password/index.tsx
index b35e4c5c57..7a93cfcf1c 100644
--- a/apps/web/pages/auth/forgot-password/index.tsx
+++ b/apps/web/pages/auth/forgot-password/index.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { SyntheticEvent } from "react";
 
-import { EmailField, Button } from "@calcom/ui/v2";
+import { Button, EmailField } from "@calcom/ui/components";
 
 import { getSession } from "@lib/auth";
 import { useLocale } from "@lib/hooks/useLocale";
diff --git a/apps/web/pages/auth/login.tsx b/apps/web/pages/auth/login.tsx
index 74637779dc..2923122509 100644
--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@@ -14,7 +14,8 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calco
 import prisma from "@calcom/prisma";
 import { Icon } from "@calcom/ui";
 import { Alert } from "@calcom/ui/Alert";
-import { Button, EmailField, PasswordField } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { EmailField, PasswordField } from "@calcom/ui/components/form";
 import SAMLLogin from "@calcom/ui/v2/modules/auth/SAMLLogin";
 
 import { ErrorCode, getSession } from "@lib/auth";
diff --git a/apps/web/pages/auth/logout.tsx b/apps/web/pages/auth/logout.tsx
index 55d1935062..f822092768 100644
--- a/apps/web/pages/auth/logout.tsx
+++ b/apps/web/pages/auth/logout.tsx
@@ -6,7 +6,7 @@ import { useEffect } from "react";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui/Icon";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
diff --git a/apps/web/pages/auth/setup.tsx b/apps/web/pages/auth/setup.tsx
index f5b789ef20..522846291b 100644
--- a/apps/web/pages/auth/setup.tsx
+++ b/apps/web/pages/auth/setup.tsx
@@ -10,7 +10,7 @@ import { isPasswordValid } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { TextField, EmailField, PasswordField, Label } from "@calcom/ui/v2";
+import { TextField, EmailField, PasswordField, Label } from "@calcom/ui/components/form";
 import WizardForm from "@calcom/ui/v2/core/WizardForm";
 
 const StepDone = () => {
diff --git a/apps/web/pages/auth/signin.tsx b/apps/web/pages/auth/signin.tsx
index 279e6d1518..916cbcb994 100644
--- a/apps/web/pages/auth/signin.tsx
+++ b/apps/web/pages/auth/signin.tsx
@@ -1,7 +1,7 @@
 import { GetServerSidePropsContext } from "next";
 import { getProviders, signIn, getSession, getCsrfToken } from "next-auth/react";
 
-import { Button } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components/button";
 
 type Provider = {
   name: string;
diff --git a/apps/web/pages/auth/verify.tsx b/apps/web/pages/auth/verify.tsx
index 39fb5a2e10..c7248c9f77 100644
--- a/apps/web/pages/auth/verify.tsx
+++ b/apps/web/pages/auth/verify.tsx
@@ -8,7 +8,7 @@ import z from "zod";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/v2/";
+import { Button } from "@calcom/ui/components";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 import Loader from "@components/Loader";
diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
index 236843552c..adbda9ca92 100644
--- a/apps/web/pages/availability/[schedule].tsx
+++ b/apps/web/pages/availability/[schedule].tsx
@@ -11,12 +11,12 @@ import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import type { Schedule as ScheduleType } from "@calcom/types/schedule";
 import { Icon } from "@calcom/ui";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
+import { Form, Label } from "@calcom/ui/components/form";
 import Shell from "@calcom/ui/v2/core/Shell";
 import Switch from "@calcom/ui/v2/core/Switch";
 import TimezoneSelect from "@calcom/ui/v2/core/TimezoneSelect";
 import VerticalDivider from "@calcom/ui/v2/core/VerticalDivider";
-import { Form, Label } from "@calcom/ui/v2/core/form/fields";
 import showToast from "@calcom/ui/v2/core/notifications";
 import { Skeleton, SkeletonText } from "@calcom/ui/v2/core/skeleton";
 
diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx
index a1f943ccc1..12e3251b2b 100644
--- a/apps/web/pages/bookings/[status].tsx
+++ b/apps/web/pages/bookings/[status].tsx
@@ -9,7 +9,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryInput, inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import { Icon } from "@calcom/ui/Icon";
-import { Button, EmptyScreen } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { EmptyScreen } from "@calcom/ui/v2";
 import BookingLayout from "@calcom/ui/v2/core/layouts/BookingLayout";
 
 import { useInViewObserver } from "@lib/hooks/useInViewObserver";
diff --git a/apps/web/pages/cancel/[uid].tsx b/apps/web/pages/cancel/[uid].tsx
index df77655a0e..43fd77cecd 100644
--- a/apps/web/pages/cancel/[uid].tsx
+++ b/apps/web/pages/cancel/[uid].tsx
@@ -15,7 +15,7 @@ import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
 import { localStorage } from "@calcom/lib/webstorage";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 
 import { getSession } from "@lib/auth";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index a6e61a66ac..9f52cc118a 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -9,7 +9,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { TRPCClientError } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import { Badge, Button, ButtonGroup, Dialog, EmptyScreen, showToast, Switch, Tooltip } from "@calcom/ui/v2";
+import { Button, ButtonGroup, Badge } from "@calcom/ui/components";
+import { Dialog, EmptyScreen, showToast, Switch, Tooltip } from "@calcom/ui/v2";
 import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
 import Dropdown, {
   DropdownItem,
diff --git a/apps/web/pages/getting-started/[[...step]].tsx b/apps/web/pages/getting-started/[[...step]].tsx
index 06931244de..6e6540d111 100644
--- a/apps/web/pages/getting-started/[[...step]].tsx
+++ b/apps/web/pages/getting-started/[[...step]].tsx
@@ -7,7 +7,7 @@ import { z } from "zod";
 import { getSession } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { User } from "@calcom/prisma/client";
-import { Button } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components/button";
 
 import prisma from "@lib/prisma";
 
diff --git a/apps/web/pages/sandbox/Badge.tsx b/apps/web/pages/sandbox/Badge.tsx
index ee06ab8052..87961f176c 100644
--- a/apps/web/pages/sandbox/Badge.tsx
+++ b/apps/web/pages/sandbox/Badge.tsx
@@ -1,4 +1,4 @@
-import { Badge, BadgeProps } from "@calcom/ui/Badge";
+import { Badge, BadgeProps } from "@calcom/ui/components/badge";
 
 import { sandboxPage } from ".";
 
diff --git a/apps/web/pages/settings/admin/impersonation.tsx b/apps/web/pages/settings/admin/impersonation.tsx
index b320a35510..099c767f92 100644
--- a/apps/web/pages/settings/admin/impersonation.tsx
+++ b/apps/web/pages/settings/admin/impersonation.tsx
@@ -2,7 +2,7 @@ import { signIn } from "next-auth/react";
 import { useRef } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { TextField, Button } from "@calcom/ui/v2";
+import { Button, TextField } from "@calcom/ui/components";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
 
diff --git a/apps/web/pages/settings/billing/index.tsx b/apps/web/pages/settings/billing/index.tsx
index 7df75f2895..11a1072fbb 100644
--- a/apps/web/pages/settings/billing/index.tsx
+++ b/apps/web/pages/settings/billing/index.tsx
@@ -5,7 +5,7 @@ import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import { Button } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components/button";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 
diff --git a/apps/web/pages/settings/developer/api-keys.tsx b/apps/web/pages/settings/developer/api-keys.tsx
index 164ad1c2a4..240999b46b 100644
--- a/apps/web/pages/settings/developer/api-keys.tsx
+++ b/apps/web/pages/settings/developer/api-keys.tsx
@@ -7,7 +7,8 @@ import ApiKeyListItem from "@calcom/features/ee/api-keys/components/v2/ApiKeyLis
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import { EmptyScreen, Button } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { EmptyScreen } from "@calcom/ui/v2";
 import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
 import Meta from "@calcom/ui/v2/core/Meta";
 import SkeletonLoader from "@calcom/ui/v2/core/apps/SkeletonLoader";
diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index ea923442ce..91fede56c1 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -2,12 +2,12 @@ import { Controller, useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import Badge from "@calcom/ui/v2/core/Badge";
-import { Button } from "@calcom/ui/v2/core/Button";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+import { Form } from "@calcom/ui/components/form";
 import Meta from "@calcom/ui/v2/core/Meta";
 import Switch from "@calcom/ui/v2/core/Switch";
 import ColorPicker from "@calcom/ui/v2/core/colorpicker";
-import { Form } from "@calcom/ui/v2/core/form/fields";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
 import { SkeletonContainer, SkeletonText, SkeletonButton } from "@calcom/ui/v2/core/skeleton";
diff --git a/apps/web/pages/settings/my-account/calendars.tsx b/apps/web/pages/settings/my-account/calendars.tsx
index b3ff71a87d..972408f30c 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -7,8 +7,9 @@ import DestinationCalendarSelector from "@calcom/features/calendars/DestinationC
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import { Alert, Button } from "@calcom/ui/v2";
-import Badge from "@calcom/ui/v2/core/Badge";
+import { Button } from "@calcom/ui/components";
+import { Badge } from "@calcom/ui/components/badge";
+import { Alert } from "@calcom/ui/v2";
 import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
diff --git a/apps/web/pages/settings/my-account/conferencing.tsx b/apps/web/pages/settings/my-account/conferencing.tsx
index 6d7cc95993..55b090c309 100644
--- a/apps/web/pages/settings/my-account/conferencing.tsx
+++ b/apps/web/pages/settings/my-account/conferencing.tsx
@@ -3,7 +3,8 @@ import { useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Button } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/v2";
 import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
diff --git a/apps/web/pages/settings/my-account/general.tsx b/apps/web/pages/settings/my-account/general.tsx
index 6ae90a6d7f..6ad8b30d3c 100644
--- a/apps/web/pages/settings/my-account/general.tsx
+++ b/apps/web/pages/settings/my-account/general.tsx
@@ -4,10 +4,10 @@ import { useForm, Controller } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
+import { Form, Label } from "@calcom/ui/components/form";
 import Meta from "@calcom/ui/v2/core/Meta";
 import TimezoneSelect from "@calcom/ui/v2/core/TimezoneSelect";
-import { Form, Label } from "@calcom/ui/v2/core/form/fields";
 import Select from "@calcom/ui/v2/core/form/select";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index 115a1a7231..c187c33933 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -5,19 +5,18 @@ import { useRef, useState, BaseSyntheticEvent, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
-import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Icon } from "@calcom/ui";
 import { Alert } from "@calcom/ui/Alert";
-import Avatar from "@calcom/ui/v2/core/Avatar";
-import { Button } from "@calcom/ui/v2/core/Button";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Button } from "@calcom/ui/components/button";
+import { Form, Label, TextField, PasswordField } from "@calcom/ui/components/form";
 import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/v2/core/Dialog";
 import ImageUploader from "@calcom/ui/v2/core/ImageUploader";
 import Meta from "@calcom/ui/v2/core/Meta";
-import { Form, Label, TextField, PasswordField } from "@calcom/ui/v2/core/form/fields";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
 import { SkeletonContainer, SkeletonText, SkeletonButton, SkeletonAvatar } from "@calcom/ui/v2/core/skeleton";
diff --git a/apps/web/pages/settings/security/impersonation.tsx b/apps/web/pages/settings/security/impersonation.tsx
index bfd27553f7..35300a90b5 100644
--- a/apps/web/pages/settings/security/impersonation.tsx
+++ b/apps/web/pages/settings/security/impersonation.tsx
@@ -2,8 +2,9 @@ import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Label, showToast } from "@calcom/ui/v2";
-import { Switch, Skeleton, Form, Button } from "@calcom/ui/v2/core";
+import { Button } from "@calcom/ui/components";
+import { Label, Form } from "@calcom/ui/components/form";
+import { Switch, Skeleton, showToast } from "@calcom/ui/v2/core";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 
diff --git a/apps/web/pages/settings/security/password.tsx b/apps/web/pages/settings/security/password.tsx
index 7bc2673b89..a2eeac65b1 100644
--- a/apps/web/pages/settings/security/password.tsx
+++ b/apps/web/pages/settings/security/password.tsx
@@ -5,9 +5,9 @@ import { useForm } from "react-hook-form";
 import { identityProviderNameMap } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
+import { Form, PasswordField } from "@calcom/ui/components/form";
 import Meta from "@calcom/ui/v2/core/Meta";
-import { Form, PasswordField } from "@calcom/ui/v2/core/form/fields";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
 
diff --git a/apps/web/pages/settings/security/two-factor-auth.tsx b/apps/web/pages/settings/security/two-factor-auth.tsx
index ba81a3e293..259c3f0d29 100644
--- a/apps/web/pages/settings/security/two-factor-auth.tsx
+++ b/apps/web/pages/settings/security/two-factor-auth.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import Badge from "@calcom/ui/v2/core/Badge";
+import { Badge } from "@calcom/ui/components/badge";
 import Loader from "@calcom/ui/v2/core/Loader";
 import Meta from "@calcom/ui/v2/core/Meta";
 import Switch from "@calcom/ui/v2/core/Switch";
diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx
index 9567fdd13f..7b5aa44610 100644
--- a/apps/web/pages/signup.tsx
+++ b/apps/web/pages/signup.tsx
@@ -8,8 +8,8 @@ import { isSAMLLoginEnabled } from "@calcom/features/ee/sso/lib/saml";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
 import { Alert } from "@calcom/ui/Alert";
-import Button from "@calcom/ui/v2/core/Button";
-import { EmailField, PasswordField, TextField } from "@calcom/ui/v2/core/form/fields";
+import { Button } from "@calcom/ui/components/button";
+import { EmailField, PasswordField, TextField } from "@calcom/ui/components/form";
 import { HeadSeo } from "@calcom/web/components/seo/head-seo";
 import { asStringOrNull } from "@calcom/web/lib/asStringOrNull";
 import { WEBAPP_URL } from "@calcom/web/lib/config/constants";
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index 224c904d42..27b2033ad7 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -13,8 +13,7 @@ import useTheme from "@calcom/lib/hooks/useTheme";
 import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { Icon } from "@calcom/ui/Icon";
-import { Avatar } from "@calcom/ui/v2";
-import { Button } from "@calcom/ui/v2/core";
+import { Button, Avatar } from "@calcom/ui/components";
 import EventTypeDescription from "@calcom/ui/v2/modules/event-types/EventTypeDescription";
 
 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 3b54332f3f..2e973e25e3 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -3,9 +3,9 @@ import { useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/components/button";
 import { Shell } from "@calcom/ui/v2";
 import { Alert } from "@calcom/ui/v2/core/Alert";
-import Button from "@calcom/ui/v2/core/Button";
 import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
 
 import SkeletonLoaderTeamList from "@components/team/SkeletonloaderTeamList";
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index d21de8b6f3..72fd642bbd 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@import "../../../packages/ui/styles/shared-globals.css";
+
 body  {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
diff --git a/packages/app-store/applecalendar/pages/setup/index.tsx b/packages/app-store/applecalendar/pages/setup/index.tsx
index 20a21d526f..1cbc6ab4f8 100644
--- a/packages/app-store/applecalendar/pages/setup/index.tsx
+++ b/packages/app-store/applecalendar/pages/setup/index.tsx
@@ -4,7 +4,8 @@ import { useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert, Button, Form, TextField } from "@calcom/ui/v2";
+import { Button, Form, TextField } from "@calcom/ui/components";
+import { Alert } from "@calcom/ui/v2";
 
 export default function AppleCalendarSetup() {
   const { t } = useLocale();
diff --git a/packages/app-store/caldavcalendar/pages/setup/index.tsx b/packages/app-store/caldavcalendar/pages/setup/index.tsx
index 67219de946..24a8562d70 100644
--- a/packages/app-store/caldavcalendar/pages/setup/index.tsx
+++ b/packages/app-store/caldavcalendar/pages/setup/index.tsx
@@ -4,7 +4,8 @@ import { useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert, Button, Form, TextField } from "@calcom/ui/v2";
+import { Button, Form, TextField } from "@calcom/ui/components";
+import { Alert } from "@calcom/ui/v2";
 
 export default function CalDavCalendarSetup() {
   const { t } = useLocale();
diff --git a/packages/app-store/closecomothercalendar/pages/setup/index.tsx b/packages/app-store/closecomothercalendar/pages/setup/index.tsx
index 6ce7ac746b..d9ae9f1bfe 100644
--- a/packages/app-store/closecomothercalendar/pages/setup/index.tsx
+++ b/packages/app-store/closecomothercalendar/pages/setup/index.tsx
@@ -7,7 +7,8 @@ import { Toaster } from "react-hot-toast";
 import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Form, showToast, TextField } from "@calcom/ui/v2";
+import { Button, TextField, Form } from "@calcom/ui/components";
+import { showToast } from "@calcom/ui/v2";
 
 const formSchema = z.object({
   api_key: z.string(),
diff --git a/packages/app-store/ee/routing-forms/components/FormActions.tsx b/packages/app-store/ee/routing-forms/components/FormActions.tsx
index 1e7d49c3dc..ebe407c59b 100644
--- a/packages/app-store/ee/routing-forms/components/FormActions.tsx
+++ b/packages/app-store/ee/routing-forms/components/FormActions.tsx
@@ -12,18 +12,15 @@ import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
 import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
 import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
+import { Button, ButtonProps } from "@calcom/ui/components/button";
+import { Form, TextField, TextAreaField } from "@calcom/ui/components/form";
 import {
-  Button,
-  ButtonProps,
   Dropdown,
   DropdownMenuItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
-  Form,
   showToast,
   Switch,
-  TextField,
-  TextAreaField,
 } from "@calcom/ui/v2";
 
 import { EmbedButton, EmbedDialog } from "@components/Embed";
diff --git a/packages/app-store/ee/routing-forms/components/SingleForm.tsx b/packages/app-store/ee/routing-forms/components/SingleForm.tsx
index 3c0d65fc14..0ba4f75f80 100644
--- a/packages/app-store/ee/routing-forms/components/SingleForm.tsx
+++ b/packages/app-store/ee/routing-forms/components/SingleForm.tsx
@@ -6,9 +6,9 @@ import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import { Form } from "@calcom/ui/form/fields";
-import { showToast, DropdownMenuSeparator } from "@calcom/ui/v2";
-import { ButtonGroup, TextAreaField, TextField, Tooltip, Button, VerticalDivider } from "@calcom/ui/v2";
+import { Button, ButtonGroup } from "@calcom/ui/components";
+import { Form, TextAreaField, TextField } from "@calcom/ui/components/form";
+import { showToast, DropdownMenuSeparator, Tooltip, VerticalDivider } from "@calcom/ui/v2";
 import Meta from "@calcom/ui/v2/core/Meta";
 import SettingsToggle from "@calcom/ui/v2/core/SettingsToggle";
 import { ShellMain } from "@calcom/ui/v2/core/Shell";
diff --git a/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx b/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx
index c240e948de..e2e8095d5e 100644
--- a/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx
+++ b/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx
@@ -11,7 +11,8 @@ import {
 } from "react-awesome-query-builder";
 
 import { Icon } from "@calcom/ui/Icon";
-import { Button as CalButton, TextArea, TextField, SelectWithValidation as Select } from "@calcom/ui/v2";
+import { Button as CalButton, TextArea, TextField } from "@calcom/ui/components";
+import { SelectWithValidation as Select } from "@calcom/ui/v2";
 
 // import { mapListValues } from "../../../../utils/stuff";
 
diff --git a/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx
index 7586df8fb8..cec6c5dfe3 100644
--- a/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx
@@ -13,7 +13,8 @@ import {
   AppSsrInit,
 } from "@calcom/types/AppGetServerSideProps";
 import { Icon } from "@calcom/ui";
-import { Button, EmptyScreen, SelectField, TextAreaField, TextField, Shell } from "@calcom/ui/v2";
+import { Button, TextAreaField, TextField } from "@calcom/ui/components";
+import { EmptyScreen, SelectField, Shell } from "@calcom/ui/v2";
 import { BooleanToggleGroupField } from "@calcom/ui/v2/core/form/BooleanToggleGroup";
 import FormCard from "@calcom/ui/v2/core/form/FormCard";
 
diff --git a/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
index a07063766d..2017aa5ab9 100644
--- a/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
@@ -6,9 +6,9 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { AppGetServerSidePropsContext, AppPrisma, AppUser } from "@calcom/types/AppGetServerSideProps";
 import { Icon } from "@calcom/ui/Icon";
-import { ButtonGroup, DropdownMenuSeparator, Tooltip } from "@calcom/ui/v2";
+import { Badge, ButtonGroup } from "@calcom/ui/components";
+import { DropdownMenuSeparator, Tooltip } from "@calcom/ui/v2";
 import { EmptyScreen } from "@calcom/ui/v2";
-import { Badge } from "@calcom/ui/v2";
 import { List, ListLinkItem } from "@calcom/ui/v2/core/List";
 import Shell, { ShellMain } from "@calcom/ui/v2/core/Shell";
 
diff --git a/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx
index 906e863516..72e013d549 100644
--- a/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx
@@ -14,7 +14,8 @@ import {
 } from "@calcom/types/AppGetServerSideProps";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
 import { Icon } from "@calcom/ui";
-import { Button, TextField, SelectWithValidation as Select, TextArea, Shell } from "@calcom/ui/v2";
+import { Button, TextField, TextArea } from "@calcom/ui/components";
+import { SelectWithValidation as Select, Shell } from "@calcom/ui/v2";
 import FormCard from "@calcom/ui/v2/core/form/FormCard";
 
 import SingleForm from "../../components/SingleForm";
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 6a9d9a9cdf..974b23287f 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
@@ -13,7 +13,7 @@ import useTheme from "@calcom/lib/hooks/useTheme";
 import { trpc } from "@calcom/trpc/react";
 import { AppGetServerSidePropsContext, AppPrisma } from "@calcom/types/AppGetServerSideProps";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Button } from "@calcom/ui/v2/";
+import { Button } from "@calcom/ui/components";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
diff --git a/packages/app-store/exchange2013calendar/pages/setup/index.tsx b/packages/app-store/exchange2013calendar/pages/setup/index.tsx
index 73904caa78..436abd1df2 100644
--- a/packages/app-store/exchange2013calendar/pages/setup/index.tsx
+++ b/packages/app-store/exchange2013calendar/pages/setup/index.tsx
@@ -4,7 +4,8 @@ import { useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert, Button, Form, TextField } from "@calcom/ui/v2";
+import { Button, Form, TextField } from "@calcom/ui/components";
+import { Alert } from "@calcom/ui/v2";
 
 export default function Exchange2013CalendarSetup() {
   const { t } = useLocale();
diff --git a/packages/app-store/exchange2016calendar/pages/setup/index.tsx b/packages/app-store/exchange2016calendar/pages/setup/index.tsx
index 0179c9ef9d..62a9d37544 100644
--- a/packages/app-store/exchange2016calendar/pages/setup/index.tsx
+++ b/packages/app-store/exchange2016calendar/pages/setup/index.tsx
@@ -4,7 +4,8 @@ import { useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert, Button, Form, TextField } from "@calcom/ui/v2";
+import { Button, Form, TextField } from "@calcom/ui/components";
+import { Alert } from "@calcom/ui/v2";
 
 export default function Exchange2016CalendarSetup() {
   const { t } = useLocale();
diff --git a/packages/app-store/exchangecalendar/pages/setup/index.tsx b/packages/app-store/exchangecalendar/pages/setup/index.tsx
index 101b76492c..a47cfb9fd2 100644
--- a/packages/app-store/exchangecalendar/pages/setup/index.tsx
+++ b/packages/app-store/exchangecalendar/pages/setup/index.tsx
@@ -6,16 +6,8 @@ import { Toaster } from "react-hot-toast";
 import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import {
-  Alert,
-  Button,
-  EmailField,
-  Form,
-  PasswordField,
-  TextField,
-  SelectField,
-  Switch,
-} from "@calcom/ui/v2";
+import { Button, EmailField, Form, PasswordField, TextField } from "@calcom/ui/components";
+import { Alert, SelectField, Switch } from "@calcom/ui/v2";
 
 import { ExchangeAuthentication } from "../../enums";
 
diff --git a/packages/app-store/fathom/extensions/EventTypeAppCard.tsx b/packages/app-store/fathom/extensions/EventTypeAppCard.tsx
index f46ed5f8e4..dc6ee96165 100644
--- a/packages/app-store/fathom/extensions/EventTypeAppCard.tsx
+++ b/packages/app-store/fathom/extensions/EventTypeAppCard.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
 import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
 import AppCard from "@calcom/app-store/_components/AppCard";
 import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
-import { TextField } from "@calcom/ui/v2";
+import { TextField } from "@calcom/ui/components/form";
 
 import { appDataSchema } from "../zod";
 
diff --git a/packages/app-store/ga4/extensions/EventTypeAppCard.tsx b/packages/app-store/ga4/extensions/EventTypeAppCard.tsx
index f46ed5f8e4..dc6ee96165 100644
--- a/packages/app-store/ga4/extensions/EventTypeAppCard.tsx
+++ b/packages/app-store/ga4/extensions/EventTypeAppCard.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
 import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
 import AppCard from "@calcom/app-store/_components/AppCard";
 import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
-import { TextField } from "@calcom/ui/v2";
+import { TextField } from "@calcom/ui/components/form";
 
 import { appDataSchema } from "../zod";
 
diff --git a/packages/app-store/stripepayment/extensions/EventTypeAppCard.tsx b/packages/app-store/stripepayment/extensions/EventTypeAppCard.tsx
index 1b5ef38851..7548c075a4 100644
--- a/packages/app-store/stripepayment/extensions/EventTypeAppCard.tsx
+++ b/packages/app-store/stripepayment/extensions/EventTypeAppCard.tsx
@@ -5,7 +5,8 @@ import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
 import AppCard from "@calcom/app-store/_components/AppCard";
 import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert, TextField } from "@calcom/ui/v2";
+import { TextField } from "@calcom/ui/components";
+import { Alert } from "@calcom/ui/v2";
 
 import { appDataSchema } from "../zod";
 
diff --git a/packages/app-store/types.d.ts b/packages/app-store/types.d.ts
index ba281b498a..b49d4d2ed7 100644
--- a/packages/app-store/types.d.ts
+++ b/packages/app-store/types.d.ts
@@ -4,7 +4,7 @@ import { z } from "zod";
 import { _EventTypeModel } from "@calcom/prisma/zod";
 import { inferQueryOutput } from "@calcom/trpc/react";
 import { ButtonBaseProps } from "@calcom/ui/Button";
-import { ButtonBaseProps as v2ButtonBaseProps } from "@calcom/ui/v2/core/Button";
+import { ButtonBaseProps as v2ButtonBaseProps } from "@calcom/ui/components/button";
 
 export type IntegrationOAuthCallbackState = {
   returnTo: string;
diff --git a/packages/app-store/weather_in_your_calendar/components/AppSettings.tsx b/packages/app-store/weather_in_your_calendar/components/AppSettings.tsx
index a0ec329f94..38851da5c4 100644
--- a/packages/app-store/weather_in_your_calendar/components/AppSettings.tsx
+++ b/packages/app-store/weather_in_your_calendar/components/AppSettings.tsx
@@ -1,12 +1,12 @@
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/v2/core/Button";
-import { TextField } from "@calcom/ui/v2/core/form/fields";
+import { Button } from "@calcom/ui/components/button";
+import { TextField } from "@calcom/ui/components/form";
 
-/* 
+/*
 import * as Radio from "@calcom/ui/v2/core/form/radio-area/Radio";
-import { RadioField } from "@calcom/ui/v2/core/form/radio-area/Radio"; 
+import { RadioField } from "@calcom/ui/v2/core/form/radio-area/Radio";
 */
 
 export default function AppSettings() {
diff --git a/packages/app-store/wipemycalother/components/confirmDialog.tsx b/packages/app-store/wipemycalother/components/confirmDialog.tsx
index 9a0e7a27cc..63ad62aaeb 100644
--- a/packages/app-store/wipemycalother/components/confirmDialog.tsx
+++ b/packages/app-store/wipemycalother/components/confirmDialog.tsx
@@ -7,7 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import logger from "@calcom/lib/logger";
 import { trpc } from "@calcom/trpc/react";
 import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 interface IConfirmDialogWipe {
diff --git a/packages/app-store/wipemycalother/components/wipeMyCalActionButton.tsx b/packages/app-store/wipemycalother/components/wipeMyCalActionButton.tsx
index 41b35ac8cb..1727204854 100644
--- a/packages/app-store/wipemycalother/components/wipeMyCalActionButton.tsx
+++ b/packages/app-store/wipemycalother/components/wipeMyCalActionButton.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 
 import { ConfirmDialog } from "./confirmDialog";
 
diff --git a/packages/app-store/zapier/components/TemplateCard.tsx b/packages/app-store/zapier/components/TemplateCard.tsx
index ffc3ab11f7..fe2c72e171 100644
--- a/packages/app-store/zapier/components/TemplateCard.tsx
+++ b/packages/app-store/zapier/components/TemplateCard.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components/button";
 
 import { Template } from "./AppSettings";
 
diff --git a/packages/app-store/zapier/pages/setup/index.tsx b/packages/app-store/zapier/pages/setup/index.tsx
index 953ef18e53..81365b7be7 100644
--- a/packages/app-store/zapier/pages/setup/index.tsx
+++ b/packages/app-store/zapier/pages/setup/index.tsx
@@ -6,7 +6,8 @@ import { Toaster } from "react-hot-toast";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { ClipboardCopyIcon } from "@calcom/ui/Icon";
-import { Button, Loader, showToast, Tooltip } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { showToast, Tooltip } from "@calcom/ui/v2";
 
 export interface IZapierSetupProps {
   inviteLink: string;
diff --git a/packages/features/bookings/UnconfirmedBookingBadge.tsx b/packages/features/bookings/UnconfirmedBookingBadge.tsx
index 538c8f6d2a..375776f733 100644
--- a/packages/features/bookings/UnconfirmedBookingBadge.tsx
+++ b/packages/features/bookings/UnconfirmedBookingBadge.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import Badge from "@calcom/ui/v2/core/Badge";
+import { Badge } from "@calcom/ui/components/badge/Badge";
 
 export default function UnconfirmedBookingBadge() {
   const { t } = useLocale();
diff --git a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
index a361b01428..b937ff3ac6 100644
--- a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
@@ -2,13 +2,13 @@ import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
-import Badge from "@calcom/ui/Badge";
 import Button from "@calcom/ui/Button";
 import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
 import { ListItem } from "@calcom/ui/List";
 import { Tooltip } from "@calcom/ui/Tooltip";
+import { Badge } from "@calcom/ui/components/badge";
 
 export type TApiKeys = inferQueryOutput<"viewer.apiKeys.list">[number];
 
diff --git a/packages/features/ee/api-keys/components/v2/ApiKeyDialogForm.tsx b/packages/features/ee/api-keys/components/v2/ApiKeyDialogForm.tsx
index c58ef2da86..09df889004 100644
--- a/packages/features/ee/api-keys/components/v2/ApiKeyDialogForm.tsx
+++ b/packages/features/ee/api-keys/components/v2/ApiKeyDialogForm.tsx
@@ -9,10 +9,10 @@ import { trpc } from "@calcom/trpc/react";
 import { DialogFooter } from "@calcom/ui/Dialog";
 import { ClipboardCopyIcon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
+import { Button } from "@calcom/ui/components/button";
+import { Form, TextField } from "@calcom/ui/components/form";
 import { DatePicker } from "@calcom/ui/v2";
-import Button from "@calcom/ui/v2/core/Button";
 import Switch from "@calcom/ui/v2/core/Switch";
-import { Form, TextField } from "@calcom/ui/v2/core/form/fields";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 export default function ApiKeyDialogForm({
diff --git a/packages/features/ee/api-keys/components/v2/ApiKeyListItem.tsx b/packages/features/ee/api-keys/components/v2/ApiKeyListItem.tsx
index 70f2a11191..6ce58ceb70 100644
--- a/packages/features/ee/api-keys/components/v2/ApiKeyListItem.tsx
+++ b/packages/features/ee/api-keys/components/v2/ApiKeyListItem.tsx
@@ -4,8 +4,8 @@ import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import Badge from "@calcom/ui/v2/core/Badge";
-import Button from "@calcom/ui/v2/core/Button";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
 import Dropdown, {
   DropdownItem,
   DropdownMenuContent,
diff --git a/packages/features/ee/sso/components/ConfigDialogForm.tsx b/packages/features/ee/sso/components/ConfigDialogForm.tsx
index 4505a4c7d0..5b1ed6e0c1 100644
--- a/packages/features/ee/sso/components/ConfigDialogForm.tsx
+++ b/packages/features/ee/sso/components/ConfigDialogForm.tsx
@@ -5,9 +5,9 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
 import { DialogFooter } from "@calcom/ui/Dialog";
+import { Button } from "@calcom/ui/components/button";
+import { Form, TextArea } from "@calcom/ui/components/form";
 import { showToast } from "@calcom/ui/v2";
-import Button from "@calcom/ui/v2/core/Button";
-import { Form, TextArea } from "@calcom/ui/v2/core/form/fields";
 
 interface TeamSSOValues {
   metadata: string;
diff --git a/packages/features/ee/sso/components/SAMLConfiguration.tsx b/packages/features/ee/sso/components/SAMLConfiguration.tsx
index ff5bf0df60..1ccc17d1a1 100644
--- a/packages/features/ee/sso/components/SAMLConfiguration.tsx
+++ b/packages/features/ee/sso/components/SAMLConfiguration.tsx
@@ -7,8 +7,8 @@ import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
 import { Alert } from "@calcom/ui/Alert";
 import { ClipboardCopyIcon } from "@calcom/ui/Icon";
-import { Button, showToast, Label } from "@calcom/ui/v2";
-import Badge from "@calcom/ui/v2/core/Badge";
+import { Button, Label, Badge } from "@calcom/ui/components";
+import { showToast } from "@calcom/ui/v2";
 import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
 import { Dialog, DialogTrigger, DialogContent } from "@calcom/ui/v2/core/Dialog";
 import Meta from "@calcom/ui/v2/core/Meta";
diff --git a/packages/features/ee/support/components/HelpMenuItem.tsx b/packages/features/ee/support/components/HelpMenuItem.tsx
index 7bb422013c..b191da3abc 100644
--- a/packages/features/ee/support/components/HelpMenuItem.tsx
+++ b/packages/features/ee/support/components/HelpMenuItem.tsx
@@ -5,7 +5,7 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 import ContactMenuItem from "./ContactMenuItem";
diff --git a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
index e5a430ae58..bf5b444617 100644
--- a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
+++ b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
@@ -3,7 +3,8 @@ import { SyntheticEvent, useMemo, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Dialog, DialogContent, Select } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { Dialog, DialogContent, Select } from "@calcom/ui/v2";
 
 type MembershipRoleOption = {
   label: string;
diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx
index 869cec284c..8a01e6b3eb 100644
--- a/packages/features/ee/teams/components/MemberInvitationModal.tsx
+++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx
@@ -4,8 +4,8 @@ import React, { useState, SyntheticEvent, useMemo } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Button, Dialog, DialogContent, DialogFooter, Select, TextField } from "@calcom/ui/v2";
+import { Button, TextField } from "@calcom/ui/components";
+import { Dialog, DialogContent, DialogFooter, Select } from "@calcom/ui/v2";
 
 type MemberInvitationModalProps = {
   isOpen: boolean;
diff --git a/packages/features/ee/teams/components/MemberListItem.tsx b/packages/features/ee/teams/components/MemberListItem.tsx
index ae631e1552..90fb7cc91f 100644
--- a/packages/features/ee/teams/components/MemberListItem.tsx
+++ b/packages/features/ee/teams/components/MemberListItem.tsx
@@ -7,9 +7,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { Icon } from "@calcom/ui/Icon";
+import { Button, ButtonGroup, Avatar } from "@calcom/ui/components";
 import {
-  Button,
-  ButtonGroup,
   Dialog,
   DialogContent,
   DialogTrigger,
@@ -22,7 +21,6 @@ import {
   showToast,
   Tooltip,
 } from "@calcom/ui/v2/core";
-import Avatar from "@calcom/ui/v2/core/Avatar";
 import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
 
 import MemberChangeRoleModal from "./MemberChangeRoleModal";
diff --git a/packages/features/ee/teams/components/TeamAvailabilityModal.tsx b/packages/features/ee/teams/components/TeamAvailabilityModal.tsx
index 57615a9251..2bb8605e09 100644
--- a/packages/features/ee/teams/components/TeamAvailabilityModal.tsx
+++ b/packages/features/ee/teams/components/TeamAvailabilityModal.tsx
@@ -3,9 +3,9 @@ import React, { useState, useEffect } from "react";
 import dayjs from "@calcom/dayjs";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
+import { Avatar } from "@calcom/ui/components/avatar";
 import Select from "@calcom/ui/form/Select";
 import TimezoneSelect, { ITimezone } from "@calcom/ui/form/TimezoneSelect";
-import { Avatar } from "@calcom/ui/v2";
 import DatePicker from "@calcom/ui/v2/core/form/DatePicker";
 
 import LicenseRequired from "../../common/components/LicenseRequired";
diff --git a/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx b/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx
index 7b224666bd..c5e7f70bbe 100644
--- a/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx
+++ b/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx
@@ -7,7 +7,7 @@ import { CAL_URL } from "@calcom/lib/constants";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import Select from "@calcom/ui/form/Select";
 import TimezoneSelect, { ITimezone } from "@calcom/ui/form/TimezoneSelect";
-import { Avatar } from "@calcom/ui/v2";
+import { Avatar } from "@calcom/ui/components/avatar";
 import DatePicker from "@calcom/ui/v2/core/form/DatePicker";
 
 import TeamAvailabilityTimes from "./TeamAvailabilityTimes";
diff --git a/packages/features/ee/teams/components/TeamInviteListItem.tsx b/packages/features/ee/teams/components/TeamInviteListItem.tsx
index 05421ae835..568c9e2c8d 100644
--- a/packages/features/ee/teams/components/TeamInviteListItem.tsx
+++ b/packages/features/ee/teams/components/TeamInviteListItem.tsx
@@ -5,14 +5,8 @@ import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
-import {
-  Avatar,
-  Button,
-  Dropdown,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@calcom/ui/v2";
+import { Avatar, Button } from "@calcom/ui/components";
+import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/v2";
 
 interface Props {
   team: {
diff --git a/packages/features/ee/teams/components/v2/AddNewTeamMembers.tsx b/packages/features/ee/teams/components/v2/AddNewTeamMembers.tsx
index 6d2fbe8774..ae4387137e 100644
--- a/packages/features/ee/teams/components/v2/AddNewTeamMembers.tsx
+++ b/packages/features/ee/teams/components/v2/AddNewTeamMembers.tsx
@@ -6,9 +6,9 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import Avatar from "@calcom/ui/v2/core/Avatar";
-import Badge from "@calcom/ui/v2/core/Badge";
-import Button from "@calcom/ui/v2/core/Button";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
 import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2/core/skeleton";
 
 const AddNewTeamMemberSkeleton = () => {
diff --git a/packages/features/ee/teams/components/v2/CreateNewTeam.tsx b/packages/features/ee/teams/components/v2/CreateNewTeam.tsx
index b48bc128ea..c3f2c781d2 100644
--- a/packages/features/ee/teams/components/v2/CreateNewTeam.tsx
+++ b/packages/features/ee/teams/components/v2/CreateNewTeam.tsx
@@ -5,9 +5,9 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import slugify from "@calcom/lib/slugify";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import { Button, Avatar } from "@calcom/ui/v2";
+import { Button, Avatar } from "@calcom/ui/components";
+import { Form, TextField } from "@calcom/ui/components/form";
 import ImageUploader from "@calcom/ui/v2/core/ImageUploader";
-import { Form, TextField } from "@calcom/ui/v2/core/form/fields";
 
 const CreateANewTeamForm = (props: { nextStep: () => void; setTeamId: (teamId: number) => void }) => {
   const { t } = useLocale();
diff --git a/packages/features/ee/teams/components/v2/TeamAvailabilityModal.tsx b/packages/features/ee/teams/components/v2/TeamAvailabilityModal.tsx
index 67c6e75d18..f155d0fab3 100644
--- a/packages/features/ee/teams/components/v2/TeamAvailabilityModal.tsx
+++ b/packages/features/ee/teams/components/v2/TeamAvailabilityModal.tsx
@@ -4,9 +4,9 @@ import dayjs from "@calcom/dayjs";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
+import { Avatar, Label } from "@calcom/ui/components";
 import TimezoneSelect, { ITimezone } from "@calcom/ui/form/TimezoneSelect";
-import { Avatar, Label, Select } from "@calcom/ui/v2";
-import { DatePicker } from "@calcom/ui/v2";
+import { Select, DatePicker } from "@calcom/ui/v2";
 
 import LicenseRequired from "../../../common/components/LicenseRequired";
 import TeamAvailabilityTimes from "./TeamAvailabilityTimes";
diff --git a/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx b/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx
index 7b224666bd..c5e7f70bbe 100644
--- a/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx
+++ b/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx
@@ -7,7 +7,7 @@ import { CAL_URL } from "@calcom/lib/constants";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import Select from "@calcom/ui/form/Select";
 import TimezoneSelect, { ITimezone } from "@calcom/ui/form/TimezoneSelect";
-import { Avatar } from "@calcom/ui/v2";
+import { Avatar } from "@calcom/ui/components/avatar";
 import DatePicker from "@calcom/ui/v2/core/form/DatePicker";
 
 import TeamAvailabilityTimes from "./TeamAvailabilityTimes";
diff --git a/packages/features/ee/teams/pages/availability.tsx b/packages/features/ee/teams/pages/availability.tsx
index 9da7fc7b45..69089901b7 100644
--- a/packages/features/ee/teams/pages/availability.tsx
+++ b/packages/features/ee/teams/pages/availability.tsx
@@ -8,7 +8,7 @@ import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { Alert } from "@calcom/ui/Alert";
 import Loader from "@calcom/ui/Loader";
 import Shell from "@calcom/ui/Shell";
-import { Avatar } from "@calcom/ui/v2";
+import { Avatar } from "@calcom/ui/components/avatar";
 
 import LicenseRequired from "../../common/components/LicenseRequired";
 import TeamAvailabilityScreen from "../components/TeamAvailabilityScreen";
diff --git a/packages/features/ee/teams/pages/team-appearance-view.tsx b/packages/features/ee/teams/pages/team-appearance-view.tsx
index ab6b99d40b..6465fc7c31 100644
--- a/packages/features/ee/teams/pages/team-appearance-view.tsx
+++ b/packages/features/ee/teams/pages/team-appearance-view.tsx
@@ -4,7 +4,8 @@ import { Controller, useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Form, showToast, Switch } from "@calcom/ui/v2/core";
+import { Button, Form } from "@calcom/ui/components";
+import { showToast, Switch } from "@calcom/ui/v2/core";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 
diff --git a/packages/features/ee/teams/pages/team-members-view.tsx b/packages/features/ee/teams/pages/team-members-view.tsx
index 50138e4310..4d49cb0c42 100644
--- a/packages/features/ee/teams/pages/team-members-view.tsx
+++ b/packages/features/ee/teams/pages/team-members-view.tsx
@@ -6,7 +6,8 @@ import { useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
-import { Alert, Button } from "@calcom/ui/v2/core";
+import { Button } from "@calcom/ui/components";
+import { Alert } from "@calcom/ui/v2/core";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 
diff --git a/packages/features/ee/teams/pages/team-profile-view.tsx b/packages/features/ee/teams/pages/team-profile-view.tsx
index 6eac130f8f..9592cc6d44 100644
--- a/packages/features/ee/teams/pages/team-profile-view.tsx
+++ b/packages/features/ee/teams/pages/team-profile-view.tsx
@@ -10,20 +10,11 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import objectKeys from "@calcom/lib/objectKeys";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import {
-  Button,
-  Dialog,
-  DialogTrigger,
-  Form,
-  LinkIconButton,
-  showToast,
-  TextField,
-} from "@calcom/ui/v2/core";
-import Avatar from "@calcom/ui/v2/core/Avatar";
+import { Avatar, Button, Label, TextArea, Form, TextField } from "@calcom/ui/components";
+import { Dialog, DialogTrigger, LinkIconButton, showToast } from "@calcom/ui/v2/core";
 import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
 import ImageUploader from "@calcom/ui/v2/core/ImageUploader";
 import Meta from "@calcom/ui/v2/core/Meta";
-import { Label, TextArea } from "@calcom/ui/v2/core/form/fields";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 
 interface TeamProfileValues {
diff --git a/packages/features/ee/workflows/components/v2/AddActionDialog.tsx b/packages/features/ee/workflows/components/v2/AddActionDialog.tsx
index eb3251630e..e4ddd58f1b 100644
--- a/packages/features/ee/workflows/components/v2/AddActionDialog.tsx
+++ b/packages/features/ee/workflows/components/v2/AddActionDialog.tsx
@@ -6,19 +6,9 @@ import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, Checkbox, EmailField, Form, Label } from "@calcom/ui/components";
 import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
-import {
-  Button,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  EmailField,
-  Form,
-  Label,
-  Select,
-} from "@calcom/ui/v2";
-import CheckboxField from "@calcom/ui/v2/core/form/Checkbox";
+import { Dialog, DialogClose, DialogContent, DialogFooter, Select } from "@calcom/ui/v2";
 
 import { WORKFLOW_ACTIONS } from "../../lib/constants";
 import { getWorkflowActionOptions } from "../../lib/getOptions";
@@ -135,7 +125,7 @@ export const AddActionDialog = (props: IAddActionDialog) => {
                     name="numberRequired"
                     control={form.control}
                     render={() => (
-                      <CheckboxField
+                      <Checkbox
                         defaultChecked={form.getValues("numberRequired") || false}
                         description={t("make_phone_number_required")}
                         onChange={(e) => form.setValue("numberRequired", e.target.checked)}
diff --git a/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx b/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx
index eaa6e0be05..348c37bb01 100644
--- a/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx
+++ b/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx
@@ -1,6 +1,5 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui";
-import { Label } from "@calcom/ui/v2";
 import {
   Dropdown,
   DropdownMenuContent,
diff --git a/packages/features/ee/workflows/components/v2/EmptyScreen.tsx b/packages/features/ee/workflows/components/v2/EmptyScreen.tsx
index 5fad1b1500..2b4d4901f3 100644
--- a/packages/features/ee/workflows/components/v2/EmptyScreen.tsx
+++ b/packages/features/ee/workflows/components/v2/EmptyScreen.tsx
@@ -4,7 +4,7 @@ import { Icon as FeatherIcon } from "react-feather";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SVGComponent } from "@calcom/types/SVGComponent";
 import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components/button";
 
 type WorkflowExampleType = {
   Icon: FeatherIcon;
diff --git a/packages/features/ee/workflows/components/v2/EventWorkflowsTab.tsx b/packages/features/ee/workflows/components/v2/EventWorkflowsTab.tsx
index aecdb25c07..7e545b398d 100644
--- a/packages/features/ee/workflows/components/v2/EventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/v2/EventWorkflowsTab.tsx
@@ -8,7 +8,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import { Button, showToast, Switch, Tooltip, EmptyScreen } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { showToast, Switch, Tooltip, EmptyScreen } from "@calcom/ui/v2";
 
 import LicenseRequired from "../../../common/components/v2/LicenseRequired";
 import { getActionIcon } from "../../lib/getActionIcon";
diff --git a/packages/features/ee/workflows/components/v2/TimeTimeUnitInput.tsx b/packages/features/ee/workflows/components/v2/TimeTimeUnitInput.tsx
index 8c3b96b261..5774f7e529 100644
--- a/packages/features/ee/workflows/components/v2/TimeTimeUnitInput.tsx
+++ b/packages/features/ee/workflows/components/v2/TimeTimeUnitInput.tsx
@@ -3,13 +3,8 @@ import { UseFormReturn } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui/Icon";
-import {
-  Dropdown,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  TextField,
-} from "@calcom/ui/v2";
+import { TextField } from "@calcom/ui/components/form";
+import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/v2";
 
 import { getWorkflowTimeUnitOptions } from "../../lib/getOptions";
 import type { FormValues } from "../../pages/v2/workflow";
diff --git a/packages/features/ee/workflows/components/v2/WorkflowDetailsPage.tsx b/packages/features/ee/workflows/components/v2/WorkflowDetailsPage.tsx
index 314dbe08cd..501d4ffd02 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowDetailsPage.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowDetailsPage.tsx
@@ -1,4 +1,3 @@
-import { ArrowDownIcon } from "@heroicons/react/outline";
 import { WorkflowActions, WorkflowTemplates } from "@prisma/client";
 import { useRouter } from "next/router";
 import { Dispatch, SetStateAction, useMemo, useState } from "react";
@@ -8,8 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/v2";
-import { Label, TextField } from "@calcom/ui/v2";
+import { Button, Label, TextField } from "@calcom/ui/components";
 import MultiSelectCheckboxes, { Option } from "@calcom/ui/v2/core/form/MultiSelectCheckboxes";
 
 import type { FormValues } from "../../pages/v2/workflow";
diff --git a/packages/features/ee/workflows/components/v2/WorkflowListPage.tsx b/packages/features/ee/workflows/components/v2/WorkflowListPage.tsx
index f74575eea4..0688e35457 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowListPage.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowListPage.tsx
@@ -8,9 +8,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
+import { Button, ButtonGroup } from "@calcom/ui/components";
 import {
-  Button,
-  ButtonGroup,
   Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index 912a63c167..3bdb8e5db0 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -15,11 +15,12 @@ import { trpc } from "@calcom/trpc/react";
 import { Dialog } from "@calcom/ui/Dialog";
 import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/components";
+import { Checkbox } from "@calcom/ui/components";
+import { EmailField, Label, TextArea } from "@calcom/ui/components/form";
 import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
-import { Button, DialogClose, DialogContent } from "@calcom/ui/v2";
+import { DialogClose, DialogContent } from "@calcom/ui/v2";
 import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
-import CheckboxField from "@calcom/ui/v2/core/form/Checkbox";
-import { EmailField, Label, TextArea } from "@calcom/ui/v2/core/form/fields";
 import Select from "@calcom/ui/v2/core/form/select";
 import showToast from "@calcom/ui/v2/core/notifications";
 
@@ -320,7 +321,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                       name={`steps.${step.stepNumber - 1}.numberRequired`}
                       control={form.control}
                       render={() => (
-                        <CheckboxField
+                        <Checkbox
                           defaultChecked={
                             form.getValues(`steps.${step.stepNumber - 1}.numberRequired`) || false
                           }
diff --git a/packages/features/ee/workflows/pages/v2/index.tsx b/packages/features/ee/workflows/pages/v2/index.tsx
index 015665a38a..861a5252f6 100644
--- a/packages/features/ee/workflows/pages/v2/index.tsx
+++ b/packages/features/ee/workflows/pages/v2/index.tsx
@@ -4,9 +4,9 @@ import { useRouter } from "next/router";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
-import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { Icon } from "@calcom/ui";
-import { Alert, Button, showToast } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { showToast } from "@calcom/ui/v2";
 import Shell from "@calcom/ui/v2/core/Shell";
 
 import LicenseRequired from "../../../common/components/v2/LicenseRequired";
diff --git a/packages/features/ee/workflows/pages/v2/workflow.tsx b/packages/features/ee/workflows/pages/v2/workflow.tsx
index 3d9f71429a..b4c6a21ace 100644
--- a/packages/features/ee/workflows/pages/v2/workflow.tsx
+++ b/packages/features/ee/workflows/pages/v2/workflow.tsx
@@ -18,8 +18,9 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { stringOrNumber } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
+import { Button, Form } from "@calcom/ui/components";
 import { Option } from "@calcom/ui/form/MultiSelectCheckboxes";
-import { Alert, Button, Form, showToast } from "@calcom/ui/v2";
+import { showToast, Alert } from "@calcom/ui/v2";
 import Shell from "@calcom/ui/v2/core/Shell";
 
 import LicenseRequired from "../../../common/components/v2/LicenseRequired";
diff --git a/packages/features/schedules/components/NewScheduleButton.tsx b/packages/features/schedules/components/NewScheduleButton.tsx
index 51c0293135..c7ef6c6152 100644
--- a/packages/features/schedules/components/NewScheduleButton.tsx
+++ b/packages/features/schedules/components/NewScheduleButton.tsx
@@ -7,7 +7,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
 import { Form } from "@calcom/ui/form/fields";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 export function NewScheduleButton({ name = "new-schedule" }: { name?: string }) {
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index 095b760056..e9ef5c9774 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -21,8 +21,8 @@ import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { TimeRange } from "@calcom/types/schedule";
 import { Icon } from "@calcom/ui";
 import Dropdown, { DropdownMenuContent, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
+import { Button } from "@calcom/ui/components/button";
 import { Select, Switch } from "@calcom/ui/v2";
-import Button from "@calcom/ui/v2/core/Button";
 import { SkeletonText } from "@calcom/ui/v2/core/skeleton";
 
 export type FieldPathByValue<TFieldValues extends FieldValues, TValue> = {
diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx
index 254b873222..9f7d9eb22d 100644
--- a/packages/features/schedules/components/ScheduleListItem.tsx
+++ b/packages/features/schedules/components/ScheduleListItem.tsx
@@ -7,8 +7,8 @@ import { Availability } from "@calcom/prisma/client";
 import { inferQueryOutput } from "@calcom/trpc/react";
 import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
-import Badge from "@calcom/ui/v2/core/Badge";
-import Button from "@calcom/ui/v2/core/Button";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
 
 export function ScheduleListItem({
   schedule,
diff --git a/packages/features/webhooks/components/WebhookForm.tsx b/packages/features/webhooks/components/WebhookForm.tsx
index dee72ea5e8..19f23e24fe 100644
--- a/packages/features/webhooks/components/WebhookForm.tsx
+++ b/packages/features/webhooks/components/WebhookForm.tsx
@@ -6,9 +6,9 @@ import { classNames } from "@calcom/lib";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput } from "@calcom/trpc/react";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
+import { Form, Label, TextArea, TextField } from "@calcom/ui/components/form";
 import Switch from "@calcom/ui/v2/core/Switch";
-import { Form, Label, TextArea, TextField } from "@calcom/ui/v2/core/form/fields";
 import Select from "@calcom/ui/v2/core/form/select";
 
 import customTemplate, { hasTemplateIntegration } from "../lib/integrationTemplate";
diff --git a/packages/features/webhooks/components/WebhookListItem.tsx b/packages/features/webhooks/components/WebhookListItem.tsx
index 37d7298d14..7de19018a6 100644
--- a/packages/features/webhooks/components/WebhookListItem.tsx
+++ b/packages/features/webhooks/components/WebhookListItem.tsx
@@ -2,8 +2,8 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
-import Badge from "@calcom/ui/v2/core/Badge";
-import Button from "@calcom/ui/v2/core/Button";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
 import Switch from "@calcom/ui/v2/core/Switch";
 import { Tooltip } from "@calcom/ui/v2/core/Tooltip";
 import showToast from "@calcom/ui/v2/core/notifications";
diff --git a/packages/features/webhooks/components/WebhookTestDisclosure.tsx b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
index 8ef384bb75..c85d7f229e 100644
--- a/packages/features/webhooks/components/WebhookTestDisclosure.tsx
+++ b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
@@ -3,8 +3,8 @@ import { useWatch } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
-import Badge from "@calcom/ui/v2/core/Badge";
-import Button from "@calcom/ui/v2/core/Button";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 export default function WebhookTestDisclosure() {
diff --git a/packages/features/webhooks/pages/webhooks-view.tsx b/packages/features/webhooks/pages/webhooks-view.tsx
index fdde2f3edb..96a7ef378c 100644
--- a/packages/features/webhooks/pages/webhooks-view.tsx
+++ b/packages/features/webhooks/pages/webhooks-view.tsx
@@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
 import { EmptyScreen, SkeletonText } from "@calcom/ui/v2";
-import { Button } from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 
diff --git a/packages/ui/Badge.tsx b/packages/ui/Badge.tsx
deleted file mode 100644
index 8e5a8c86f6..0000000000
--- a/packages/ui/Badge.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-
-import classNames from "@calcom/lib/classNames";
-
-export type BadgeProps = {
-  variant: "default" | "success" | "gray";
-} & JSX.IntrinsicElements["span"];
-
-export const Badge = function Badge(props: BadgeProps) {
-  const { variant, className, ...passThroughProps } = props;
-
-  return (
-    <span
-      {...passThroughProps}
-      className={classNames(
-        "inline-block rounded-sm px-2 py-0.5 text-xs font-bold",
-        variant === "default" && "bg-yellow-100 text-yellow-800",
-        variant === "success" && "bg-green-100 text-green-800",
-        variant === "gray" && "bg-gray-200 text-gray-800",
-        className
-      )}>
-      {props.children}
-    </span>
-  );
-};
-
-export default Badge;
diff --git a/packages/ui/__WHATSUP_WITH_ALL_THESE_VERSIONS.md b/packages/ui/__WHATSUP_WITH_ALL_THESE_VERSIONS.md
new file mode 100644
index 0000000000..5d512eb235
--- /dev/null
+++ b/packages/ui/__WHATSUP_WITH_ALL_THESE_VERSIONS.md
@@ -0,0 +1,27 @@
+# Whatsup with all these version?
+
+We're currently in the progress of merging multiple versions of our UI library into one new version.
+
+## Version 1
+Anything version 1 is in the root, or in the root folders skeleton, form, booker and apps.
+
+## Version 2
+Anything version 2 is in the v2 folder
+
+## New version
+We're currently creating all new components following new standards in the components directory. The /styles directory contains the shared tailwind styles.
+
+### Adding new components
+For adding new components it is important to take a few patterns into account:
+* All components should be added in /components
+* All components should be in a folder, no tsx files directly in the root
+* All components should contain stories and MDX documentation (which is why they can't live in the root, since that would result in a lot of duplication)
+
+### Migration process
+We're currently migrating existing components step by step, this process looks as following:
+* New components only should get added in /components
+* Any existing components in v2 are reviewed, updated if needed and then moved to the /components directory
+* After v2 is moved, the old v2 component should be deleted, as well as any v1 version of that component. All places in the monorepo where we use this component, should use the newest version by then.
+
+### End state
+The envisioned end state is a state where only the /components directory exists. In this directory all components should have documentation and stories.
\ No newline at end of file
diff --git a/packages/ui/v2/core/Avatar.tsx b/packages/ui/components/avatar/Avatar.tsx
similarity index 97%
rename from packages/ui/v2/core/Avatar.tsx
rename to packages/ui/components/avatar/Avatar.tsx
index 6c6e3d9300..bd341471af 100644
--- a/packages/ui/v2/core/Avatar.tsx
+++ b/packages/ui/components/avatar/Avatar.tsx
@@ -24,7 +24,7 @@ const sizesPropsBySize = {
   lg: "w-16", // 64px
 } as const;
 
-export default function Avatar(props: AvatarProps) {
+export function Avatar(props: AvatarProps) {
   const { imageSrc, gravatarFallbackMd5, size, alt, title } = props;
   const sizeClassname = sizesPropsBySize[size];
   const rootClass = classNames("rounded-full aspect-square", sizeClassname, "h-auto");
diff --git a/packages/ui/v2/core/AvatarGroup.tsx b/packages/ui/components/avatar/AvatarGroup.tsx
similarity index 96%
rename from packages/ui/v2/core/AvatarGroup.tsx
rename to packages/ui/components/avatar/AvatarGroup.tsx
index 066ef3d69d..2ff784a59e 100644
--- a/packages/ui/v2/core/AvatarGroup.tsx
+++ b/packages/ui/components/avatar/AvatarGroup.tsx
@@ -1,6 +1,6 @@
 import classNames from "@calcom/lib/classNames";
 
-import Avatar from "./Avatar";
+import { Avatar } from "./Avatar";
 
 export type AvatarGroupProps = {
   size: "sm" | "lg";
@@ -57,5 +57,3 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
     </ul>
   );
 };
-
-export default AvatarGroup;
diff --git a/packages/ui/components/avatar/avatar.stories.mdx b/packages/ui/components/avatar/avatar.stories.mdx
new file mode 100644
index 0000000000..c006a66a5e
--- /dev/null
+++ b/packages/ui/components/avatar/avatar.stories.mdx
@@ -0,0 +1,139 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
+import { Icon } from "@calcom/ui/Icon";
+import {Avatar} from './Avatar';
+import {AvatarGroup} from './AvatarGroup';
+
+<Meta title="UI/Avatar" component={Avatar} />
+
+<Title title="Avatar" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
+
+
+
+## Definition
+An avatar group signals that there is more than 1 person associated with an item
+
+## Structure
+Avatar group can be composed differently based on the number of user profile.
+
+<CustomArgsTable of={Avatar} />
+
+<Examples title="Avatar style">
+  <Example title="Small">
+    <Avatar size="sm" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
+  </Example>
+  <Example title="Large">
+    <Avatar size="lg" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
+  </Example>
+</Examples>
+
+<ArgsTable of={Avatar} />
+
+### Avatar Group
+<ArgsTable of={AvatarGroup} />
+<Examples title="Avatar Group ">
+  <Example title="Small">
+    <AvatarGroup size="sm" items={[
+  {
+    image: "https://cal.com/stakeholder/peer.jpg",
+    alt: "Peer",
+    title: "Peer Richelsen",
+  },
+  {
+    image: "https://cal.com/stakeholder/bailey.jpg",
+    alt: "Bailey",
+    title: "Bailey Pumfleet",
+  },
+  {
+    image: "https://cal.com/stakeholder/alex-van-andel.jpg",
+    alt: "Alex",
+    title: "Alex Van Andel",
+  },
+  {
+    image: "https://cal.com/stakeholder/ciaran.jpg",
+    alt: "Ciarán",
+    title: "Ciarán Hanrahan",
+  },
+  {
+    image: "https://cal.com/stakeholder/peer.jpg",
+    alt: "Peer",
+    title: "Peer Richelsen",
+  },
+  {
+    image: "https://cal.com/stakeholder/bailey.jpg",
+    alt: "Bailey",
+    title: "Bailey Pumfleet",
+  },
+  {
+    image: "https://cal.com/stakeholder/alex-van-andel.jpg",
+    alt: "Alex",
+    title: "Alex Van Andel",
+  },
+  {
+    image: "https://cal.com/stakeholder/ciaran.jpg",
+    alt: "Ciarán",
+    title: "Ciarán Hanrahan",
+  },
+]}/>
+  </Example>
+<Example title="large">
+    <AvatarGroup size="lg" items={[
+  {
+    image: "https://cal.com/stakeholder/peer.jpg",
+    alt: "Peer",
+    title: "Peer Richelsen",
+  },
+  {
+    image: "https://cal.com/stakeholder/bailey.jpg",
+    alt: "Bailey",
+    title: "Bailey Pumfleet",
+  },
+  {
+    image: "https://cal.com/stakeholder/alex-van-andel.jpg",
+    alt: "Alex",
+    title: "Alex Van Andel",
+  },
+  {
+    image: "https://cal.com/stakeholder/ciaran.jpg",
+    alt: "Ciarán",
+    title: "Ciarán Hanrahan",
+  },
+  {
+    image: "https://cal.com/stakeholder/peer.jpg",
+    alt: "Peer",
+    title: "Peer Richelsen",
+  },
+  {
+    image: "https://cal.com/stakeholder/bailey.jpg",
+    alt: "Bailey",
+    title: "Bailey Pumfleet",
+  },
+  {
+    image: "https://cal.com/stakeholder/alex-van-andel.jpg",
+    alt: "Alex",
+    title: "Alex Van Andel",
+  },
+  {
+    image: "https://cal.com/stakeholder/ciaran.jpg",
+    alt: "Ciarán",
+    title: "Ciarán Hanrahan",
+  },
+]}/>
+  </Example>
+</Examples>
+
+<Title offset title="Avatar" suffix="Variants" />
+
+<Canvas>
+  <Story
+    name="Avatar">
+    <VariantsTable titles={['Default']} columnMinWidth={150}>
+      <VariantRow variant="Sm">
+        <Avatar size="sm" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
+      </VariantRow>
+      <VariantRow variant="Lg">
+        <Avatar size="lg" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
+      </VariantRow>
+    </VariantsTable>
+  </Story>
+</Canvas>
diff --git a/packages/ui/components/avatar/index.ts b/packages/ui/components/avatar/index.ts
new file mode 100644
index 0000000000..6758a3ccd2
--- /dev/null
+++ b/packages/ui/components/avatar/index.ts
@@ -0,0 +1,2 @@
+export * from "./Avatar";
+export * from "./AvatarGroup";
diff --git a/packages/ui/v2/core/Badge.tsx b/packages/ui/components/badge/Badge.tsx
similarity index 76%
rename from packages/ui/v2/core/Badge.tsx
rename to packages/ui/components/badge/Badge.tsx
index ae3703e592..819217e469 100644
--- a/packages/ui/v2/core/Badge.tsx
+++ b/packages/ui/components/badge/Badge.tsx
@@ -1,4 +1,5 @@
 import { Icon } from "react-feather";
+import { GoPrimitiveDot } from "react-icons/go";
 
 import classNames from "@calcom/lib/classNames";
 
@@ -24,12 +25,22 @@ export type BadgeProps = {
   size?: keyof typeof classNameBySize;
   StartIcon?: Icon;
   bold?: boolean;
+  withDot?: boolean;
   rounded?: boolean;
 } & JSX.IntrinsicElements["div"];
 
 export const Badge = function Badge(props: BadgeProps) {
-  const { variant, className, size = "default", rounded, StartIcon, bold, ...passThroughProps } = props;
-
+  const {
+    variant = "default",
+    className,
+    size = "default",
+    rounded,
+    StartIcon,
+    withDot,
+    bold,
+    ...passThroughProps
+  } = props;
+  const hasIconOrDot = StartIcon || withDot;
   return (
     <div
       {...passThroughProps}
@@ -37,16 +48,15 @@ export const Badge = function Badge(props: BadgeProps) {
         "inline-flex items-center justify-center py-0.5 px-[6px] text-xs",
         bold ? "font-semibold" : "font-normal",
         rounded ? "min-w-5 min-h-5 rounded-full pt-1" : "rounded-md",
-        !StartIcon ? classNameBySize[size] : "",
+        !hasIconOrDot ? classNameBySize[size] : "",
         badgeClassNameByVariant[variant],
         className
       )}>
       <>
         {StartIcon && <StartIcon className="mr-1 h-3 w-3 stroke-[3px]" />}
+        {withDot && <GoPrimitiveDot className="mr-1 h-3 w-3 stroke-[3px]" />}
         {props.children}
       </>
     </div>
   );
 };
-
-export default Badge;
diff --git a/packages/ui/components/badge/badge.stories.mdx b/packages/ui/components/badge/badge.stories.mdx
new file mode 100644
index 0000000000..999e66bedf
--- /dev/null
+++ b/packages/ui/components/badge/badge.stories.mdx
@@ -0,0 +1,83 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable, VariantRow } from '@calcom/storybook/components'
+import { Icon } from "@calcom/ui/Icon";
+import { Badge } from './Badge';
+
+<Meta title="UI/Badge" component={Badge} />
+
+<Title title="Bages" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
+
+
+## Definition
+Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object. We provide three different type of badge such as status, alert, and brand badge.
+
+Status badge communicate status information.  It is generally used within a container such as accordion and tables to label status for easy scanning.
+## Structure
+
+<CustomArgsTable of={Badge} />
+
+
+<Examples title="Badge style">
+  <Example title="Gray">
+    <Badge variant="gray" >Badge text</Badge>
+  </Example>
+  <Example title="Green/Success">
+    <Badge variant="success">Badge text</Badge>
+  </Example>
+  <Example title="Orange/Default">
+    <Badge variant="default">Badge text</Badge>
+  </Example>
+  <Example title="Red/Error">
+    <Badge variant="red">Badge text</Badge>
+  </Example>
+</Examples>
+
+<Examples title="Variants">
+  <Example title="Default">
+    <Badge>Button text</Badge>
+  </Example>
+  <Example title="With Dot">
+    <Badge withDot>Button Text</Badge>
+  </Example>
+  <Example title="With Icon">
+    <Badge StartIcon={Icon.FiPlus}>Button Text</Badge>
+  </Example>
+</Examples>
+
+
+## Alert Badges
+
+
+## Usage
+Alet badge is used in conjunction with an item, profile or label to indicate numeric value and messages assocciated with them.
+
+
+
+<Title offset title="Badge" suffix="Variants" />
+
+<Canvas>
+  <Story name="All Variants">
+    <VariantsTable titles={['Default','With Dot', 'With Icon']} columnMinWidth={150}>
+      <VariantRow variant="Default">
+        <Badge variant="default" >Badge text</Badge>
+        <Badge variant="default" withDot>Badge text</Badge>
+        <Badge variant="default" StartIcon={Icon.FiPlus}>Badge text</Badge>
+      </VariantRow>
+      <VariantRow variant="Success">
+        <Badge variant="success" >Badge text</Badge>
+        <Badge variant="success" withDot>Badge text</Badge>
+        <Badge variant="success" StartIcon={Icon.FiPlus}>Badge text</Badge>
+      </VariantRow>
+      <VariantRow variant="gray">
+        <Badge variant="gray" >Badge text</Badge>
+        <Badge variant="gray" withDot>Badge text</Badge>
+        <Badge variant="gray" StartIcon={Icon.FiPlus}>Badge text</Badge>
+      </VariantRow>
+      <VariantRow variant="error">
+        <Badge variant="error" >Badge text</Badge>
+        <Badge variant="error" withDot>Badge text</Badge>
+        <Badge variant="error" StartIcon={Icon.FiPlus}>Badge text</Badge>
+      </VariantRow>
+    </VariantsTable>
+  </Story>
+</Canvas>
diff --git a/packages/ui/components/badge/index.ts b/packages/ui/components/badge/index.ts
new file mode 100644
index 0000000000..ae21190ba6
--- /dev/null
+++ b/packages/ui/components/badge/index.ts
@@ -0,0 +1 @@
+export * from "./Badge";
diff --git a/packages/ui/v2/core/Breadcrumb.tsx b/packages/ui/components/breadcrumb/Breadcrumb.tsx
similarity index 100%
rename from packages/ui/v2/core/Breadcrumb.tsx
rename to packages/ui/components/breadcrumb/Breadcrumb.tsx
diff --git a/packages/ui/components/breadcrumb/breadcrumb.stories.mdx b/packages/ui/components/breadcrumb/breadcrumb.stories.mdx
new file mode 100644
index 0000000000..f80a6754ee
--- /dev/null
+++ b/packages/ui/components/breadcrumb/breadcrumb.stories.mdx
@@ -0,0 +1,28 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Examples, Example, Note, Title,CustomArgsTable } from '@calcom/storybook/components'
+import { Icon } from "@calcom/ui/Icon";
+
+import { Breadcrumb } from './Breadcrumb';
+
+<Meta title="UI/Breadcrumbs" component={Breadcrumb} />
+
+<Title title="Breadcrumbs" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
+
+
+## Structure
+
+<CustomArgsTable of={Breadcrumb} />
+
+
+<Examples title="Breadcrumb style"
+>
+  <Example title="Primary">
+    <Breadcrumb>
+      <BreadcrumbItem href="/">Home</BreadcrumbItem>
+      <BreadcrumbItem href="/">Test</BreadcrumbItem>
+    </Breadcrumb>
+  </Example>
+</Examples>
+
+## Usage
+When hovering over the button, there should be a tooltip to explain the context of the button, so the user can understand the result of action.
diff --git a/packages/ui/components/breadcrumb/index.ts b/packages/ui/components/breadcrumb/index.ts
new file mode 100644
index 0000000000..3bc34d185a
--- /dev/null
+++ b/packages/ui/components/breadcrumb/index.ts
@@ -0,0 +1 @@
+export * from "./Breadcrumb";
diff --git a/packages/ui/v2/core/Button.tsx b/packages/ui/components/button/Button.tsx
similarity index 99%
rename from packages/ui/v2/core/Button.tsx
rename to packages/ui/components/button/Button.tsx
index b240f7dbcd..8ca9edcb9c 100644
--- a/packages/ui/v2/core/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -4,7 +4,7 @@ import { Icon } from "react-feather";
 
 import classNames from "@calcom/lib/classNames";
 
-import { Tooltip } from "./Tooltip";
+import Tooltip from "../../v2/core/Tooltip";
 
 export type ButtonBaseProps = {
   /* Primary: Signals most important actions at any given point in the application.
@@ -152,5 +152,3 @@ const Wrapper = ({ children, tooltip }: { tooltip?: string; children: React.Reac
 
   return <Tooltip content={tooltip}>{children}</Tooltip>;
 };
-
-export default Button;
diff --git a/packages/ui/components/button/button.stories.mdx b/packages/ui/components/button/button.stories.mdx
new file mode 100644
index 0000000000..3b5cdfae7f
--- /dev/null
+++ b/packages/ui/components/button/button.stories.mdx
@@ -0,0 +1,111 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
+import { Icon } from "@calcom/ui/Icon";
+
+import { Button } from './Button';
+
+<Meta title="UI/Button" component={Button} />
+
+<Title title="Buttons" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
+
+
+## Definition
+Button are clickable elements that initiates user actions. Labels in the button guide users to what action will occur when the user interacts with it.
+
+## Structure
+
+<CustomArgsTable of={Button} />
+
+
+<Examples title="Button style" footnote={
+  <ul>
+  <li>Primary: Signals most important actions at any given point in the application.</li>
+  <li>Secondary: Gives visual weight to actions that are important</li>
+  <li>Minimal: Used for actions that we want to give very little significane to</li>
+  </ul>
+}>
+  <Example title="Primary">
+    <Button className="sb-fake-pseudo--focus">Button text</Button>
+  </Example>
+  <Example title="Secondary">
+    <Button color="secondary">Button text</Button>
+  </Example>
+  <Example title="Minimal">
+    <Button color="minimal">Button text</Button>
+  </Example>
+</Examples>
+
+<Examples title="State">
+  <Example title="Default">
+    <Button>Button text</Button>
+  </Example>
+  <Example title="Hover">
+      <Button className="sb-pseudo--hover">Button text</Button>
+  </Example>
+  <Example title="Focus">
+    <Button className="sb-pseudo--focus">Button text</Button>
+  </Example>
+  <Example title="Disabled">
+    <Button disabled>Button text</Button>
+  </Example>
+  <Example title="Loading">
+    <Button loading>Button text</Button>
+  </Example>
+</Examples>
+
+<Examples title="Icons">
+  <Example title="Default">
+    <Button>Button text</Button>
+  </Example>
+  <Example title="Icon left">
+      <Button StartIcon={Icon.FiPlus}>Button text</Button>
+  </Example>
+  <Example title="Icon right">
+    <Button EndIcon={Icon.FiPlus}>Button text</Button>
+  </Example>
+</Examples>
+
+
+## Anatomy
+Button are clickable elements that initiates user actions. Labels in the button guide users to what action will occur when the user interacts with it.
+
+## Usage
+
+<Note>In general, there should be only one Primary button in any application context</Note>
+<Note>Aim to use maximum 2 words for the button label. Button size can be flexible based on the visual hierarchy and devices. </Note>
+<Note>Hover state variant for Mobile button is an option for assistive device.</Note>
+
+<Title offset title="Buttons" suffix="Variants" />
+
+
+<Canvas>
+  <Story name="All variants">
+    <VariantsTable titles={['Primary', 'Secondary', 'Minimal']} columnMinWidth={150}>
+      <VariantRow variant="Default">
+        <Button>Button text</Button>
+        <Button color="secondary">Button text</Button>
+        <Button color="minimal">Button text</Button>
+      </VariantRow>
+      <VariantRow variant="Hover">
+        <Button className="sb-pseudo--hover">Button text</Button>
+        <Button className="sb-pseudo--hover" color="secondary">Button text</Button>
+        <Button className="sb-pseudo--hover" color="minimal">Button text</Button>
+      </VariantRow>
+      <VariantRow variant="Focus">
+        <Button className="sb-pseudo--focus">Button text</Button>
+        <Button className="sb-pseudo--focus" color="secondary">Button text</Button>
+        <Button className="sb-pseudo--focus" color="minimal">Button text</Button>
+      </VariantRow>
+      <VariantRow variant="Loading">
+        <Button loading>Button text</Button>
+        <Button loading color="secondary">Button text</Button>
+        <Button loading color="minimal">Button text</Button>
+      </VariantRow>
+      <VariantRow variant="Disabled">
+        <Button disabled>Button text</Button>
+        <Button disabled color="secondary">Button text</Button>
+        <Button disabled color="minimal">Button text</Button>
+      </VariantRow>
+    </VariantsTable>
+  </Story>
+</Canvas>
diff --git a/packages/ui/components/button/index.ts b/packages/ui/components/button/index.ts
new file mode 100644
index 0000000000..e22c29adcf
--- /dev/null
+++ b/packages/ui/components/button/index.ts
@@ -0,0 +1 @@
+export * from "./Button";
diff --git a/packages/ui/v2/core/ButtonGroup.tsx b/packages/ui/components/buttonGroup/ButtonGroup.tsx
similarity index 91%
rename from packages/ui/v2/core/ButtonGroup.tsx
rename to packages/ui/components/buttonGroup/ButtonGroup.tsx
index eac1ab97cb..9f7102a074 100644
--- a/packages/ui/v2/core/ButtonGroup.tsx
+++ b/packages/ui/components/buttonGroup/ButtonGroup.tsx
@@ -13,7 +13,7 @@ type Props = { children: React.ReactNode; combined?: boolean; containerProps?: J
  * We dont need to add border to the right as we never remove it
  */
 
-export default function ButtonGroup({ children, combined = false, containerProps }: Props) {
+export function ButtonGroup({ children, combined = false, containerProps }: Props) {
   return (
     <div
       {...containerProps}
diff --git a/packages/ui/components/buttonGroup/buttongroup.stories.mdx b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
new file mode 100644
index 0000000000..662148c086
--- /dev/null
+++ b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
@@ -0,0 +1,84 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantsRow } from '@calcom/storybook/components'
+import { Icon } from "@calcom/ui/Icon";
+
+import { ButtonGroup} from './ButtonGroup';
+import { Button} from '../button/Button';
+
+<Meta title="UI/Button Group" component={ButtonGroup} />
+
+<Title title="Button Group" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
+
+## Definition
+Button group enables multiple buttons to be combined into a single unit. It offers users access to frequently performed, related actions.
+
+## Structure
+
+<CustomArgsTable of={ButtonGroup} />
+
+
+<Examples title="Breadcrumb style"
+  footNote ={
+    <ul>
+      <li>
+        Seperated: In general, seperated button group style can be included in container such as card, modal, and page.
+      </li>
+      <li>
+        Combined: Combined button group can be used standalone e.g. mini toggles for calendars
+      </li>
+    </ul>
+  }
+>
+  <Example title="Default" >
+    <ButtonGroup>
+      <Button StartIcon={Icon.FiTrash} size="icon" color="secondary" />
+      <Button StartIcon={Icon.FiNavigation} size="icon" color="secondary" />
+      <Button StartIcon={Icon.FiClipboard} size="icon" color="secondary" />
+    </ButtonGroup>
+  </Example>
+  <Example title="Combined">
+    <ButtonGroup combined>
+      <Button StartIcon={Icon.FiTrash} size="icon" color="secondary" />
+      <Button StartIcon={Icon.FiNavigation} size="icon" color="secondary" />
+      <Button StartIcon={Icon.FiClipboard} size="icon" color="secondary" />
+    </ButtonGroup>
+  </Example>
+</Examples>
+
+
+<Canvas>
+  <Story
+    name="All Variatns">
+    <VariantsTable titles={["Default",'Secondary',"Minimal"]} columnMinWidth={150}>
+      <VariantRow variant="Default">
+        <ButtonGroup>
+          <Button StartIcon={Icon.FiTrash} size="icon"  />
+          <Button StartIcon={Icon.FiNavigation} size="icon"/>
+          <Button StartIcon={Icon.FiClipboard} size="icon"  />
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button StartIcon={Icon.FiTrash} size="icon" color="secondary" />
+          <Button StartIcon={Icon.FiNavigation} size="icon" color="secondary" />
+          <Button StartIcon={Icon.FiClipboard} size="icon" color="secondary" />
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button StartIcon={Icon.FiTrash} size="icon" color="minimal" />
+          <Button StartIcon={Icon.FiNavigation} size="icon" color="minimal" />
+          <Button StartIcon={Icon.FiClipboard} size="icon" color="minimal" />
+        </ButtonGroup>
+      </VariantRow>
+      <VariantRow variant="Combined">
+        <ButtonGroup combined>
+          <Button StartIcon={Icon.FiTrash} size="icon"  />
+          <Button StartIcon={Icon.FiNavigation} size="icon"  />
+          <Button StartIcon={Icon.FiClipboard} size="icon"  />
+        </ButtonGroup>
+         <ButtonGroup combined>
+          <Button StartIcon={Icon.FiTrash} size="icon" color="secondary"  />
+          <Button StartIcon={Icon.FiNavigation} size="icon" color="secondary"  />
+          <Button StartIcon={Icon.FiClipboard} size="icon" color="secondary"  />
+        </ButtonGroup>
+      </VariantRow>
+    </VariantsTable>
+  </Story>
+</Canvas>
diff --git a/packages/ui/components/buttonGroup/index.ts b/packages/ui/components/buttonGroup/index.ts
new file mode 100644
index 0000000000..d22eaf4c2e
--- /dev/null
+++ b/packages/ui/components/buttonGroup/index.ts
@@ -0,0 +1 @@
+export * from "./ButtonGroup";
diff --git a/packages/ui/v2/core/form/Checkbox.tsx b/packages/ui/components/form/checkbox/Checkbox.tsx
similarity index 100%
rename from packages/ui/v2/core/form/Checkbox.tsx
rename to packages/ui/components/form/checkbox/Checkbox.tsx
diff --git a/packages/ui/components/form/checkbox/checkbox.stories.mdx b/packages/ui/components/form/checkbox/checkbox.stories.mdx
new file mode 100644
index 0000000000..cea9068d50
--- /dev/null
+++ b/packages/ui/components/form/checkbox/checkbox.stories.mdx
@@ -0,0 +1,66 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantsRow } from '@calcom/storybook/components'
+import { Icon } from "@calcom/ui/Icon";
+
+import Checkbox from './Checkbox';
+
+
+<Meta title="UI/Form/Checkbox" component={Checkbox} />
+
+<Title title="Checkbox  " suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
+
+## Definition
+Checkboxes are used in forms and databases to indicate an answer to a question, apply a batch of settings or allow the user to make a multi-selection from a list. Alternatively, a single checkbox may be used for making single selections
+## Structure
+
+<CustomArgsTable of={Checkbox} />
+
+
+<Examples title="Checkbox style">
+  <Example title="Default" >
+    <Checkbox label="Default"  />
+  </Example>
+  <Example title="Error" >
+    <Checkbox label="Error" error/>
+  </Example>
+  <Example title="Disabled" >
+    <Checkbox label="Disabled"  disabled/>
+  </Example>
+  <Example title="Disabled" >
+    <Checkbox label="Disabled Checked"  checked disabled />
+  </Example>
+</Examples>
+
+<Examples title="Description As Label">
+  <Example title="Default" >
+    <Checkbox descriptionAsLabel description="Default Description"  />
+  </Example>
+  <Example title="Error" >
+    <Checkbox descriptionAsLabel description="Default Description"  error/>
+  </Example>
+  <Example title="Disabled" >
+    <Checkbox descriptionAsLabel description="Default Description"  disabled/>
+  </Example>
+  <Example title="Disabled" >
+    <Checkbox descriptionAsLabel description="Default Description"  disabled checked/>
+  </Example>
+</Examples>
+
+<Canvas>
+  <Story name="Checkbox">
+    <VariantsTable titles={[""]} columnMinWidth={150}>
+      <VariantsRow variant="Default">
+        <Checkbox label="Default"  />
+        <Checkbox label="Error" error/>
+        <Checkbox label="Disabled"  disabled/>
+        <Checkbox label="Disabled Checked"  checked disabled />
+      </VariantsRow>
+        <VariantsRow variant="Description As Label">
+          <Checkbox description="Default" descriptionAsLabel  />
+          <Checkbox description="Error" error descriptionAsLabel/>
+          <Checkbox description="Disabled"  disabled descriptionAsLabel/>
+          <Checkbox description="Disabled Checked"  checked disabled descriptionAsLabel/>
+      </VariantsRow>
+    </VariantsTable>
+  </Story>
+</Canvas>
diff --git a/packages/ui/components/form/checkbox/index.ts b/packages/ui/components/form/checkbox/index.ts
new file mode 100644
index 0000000000..b1de1e0f8f
--- /dev/null
+++ b/packages/ui/components/form/checkbox/index.ts
@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox";
diff --git a/packages/ui/components/form/index.ts b/packages/ui/components/form/index.ts
new file mode 100644
index 0000000000..88cae220de
--- /dev/null
+++ b/packages/ui/components/form/index.ts
@@ -0,0 +1,4 @@
+export * from "./checkbox";
+export * from "./inputs/HintOrErrors";
+export * from "./inputs/Input";
+export * from "./inputs/Label";
diff --git a/packages/ui/components/form/inputs/HintOrErrors.tsx b/packages/ui/components/form/inputs/HintOrErrors.tsx
new file mode 100644
index 0000000000..e66e55351b
--- /dev/null
+++ b/packages/ui/components/form/inputs/HintOrErrors.tsx
@@ -0,0 +1,102 @@
+import { X, Circle, Check } from "react-feather";
+import { FieldValues, useFormContext } from "react-hook-form";
+
+// TODO: Refactor import once V1 migration has happened
+import { Icon } from "../../../Icon";
+
+export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
+  hintErrors?: string[];
+  fieldName: string;
+  t: (key: string) => string;
+}) {
+  const methods = useFormContext() as ReturnType<typeof useFormContext> | null;
+  /* If there's no methods it means we're using these components outside a React Hook Form context */
+  if (!methods) return null;
+  const { formState } = methods;
+  const { hintErrors, fieldName, t } = props;
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const fieldErrors: FieldErrors<T> | undefined = formState.errors[fieldName];
+
+  if (!hintErrors && fieldErrors && !fieldErrors.message) {
+    // no hints passed, field errors exist and they are custom ones
+    return (
+      <div className="text-gray mt-2 flex items-center text-sm text-gray-700">
+        <ul className="ml-2">
+          {Object.keys(fieldErrors).map((key: string) => {
+            return (
+              <li key={key} className="text-blue-700">
+                {t(`${fieldName}_hint_${key}`)}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  }
+
+  if (hintErrors && fieldErrors) {
+    // hints passed, field errors exist
+    return (
+      <div className="text-gray mt-2 flex items-center text-sm text-gray-700">
+        <ul className="ml-2">
+          {hintErrors.map((key: string) => {
+            const submitted = formState.isSubmitted;
+            const error = fieldErrors[key] || fieldErrors.message;
+            return (
+              <li
+                key={key}
+                className={error !== undefined ? (submitted ? "text-red-700" : "") : "text-green-600"}>
+                {error !== undefined ? (
+                  submitted ? (
+                    <X size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
+                  ) : (
+                    <Circle fill="currentColor" size="5" className="mr-2 inline-block" />
+                  )
+                ) : (
+                  <Check size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
+                )}
+                {t(`${fieldName}_hint_${key}`)}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  }
+
+  // errors exist, not custom ones, just show them as is
+  if (fieldErrors) {
+    return (
+      <div className="text-gray mt-2 flex items-center text-sm text-red-700">
+        <Icon.FiInfo className="mr-1 h-3 w-3" />
+        <>{fieldErrors.message}</>
+      </div>
+    );
+  }
+
+  if (!hintErrors) return null;
+
+  // hints passed, no errors exist, proceed to just show hints
+  return (
+    <div className="text-gray mt-2 flex items-center text-sm text-gray-700">
+      <ul className="ml-2">
+        {hintErrors.map((key: string) => {
+          // if field was changed, as no error exist, show checked status and color
+          const dirty = formState.dirtyFields[fieldName];
+          return (
+            <li key={key} className={!!dirty ? "text-green-600" : ""}>
+              {!!dirty ? (
+                <Icon.FiCheck size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
+              ) : (
+                <Icon.FiCircle fill="currentColor" size="5" className="mr-2 inline-block" />
+              )}
+              {t(`${fieldName}_hint_${key}`)}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
diff --git a/packages/ui/v2/core/form/fields.tsx b/packages/ui/components/form/inputs/Input.tsx
similarity index 70%
rename from packages/ui/v2/core/form/fields.tsx
rename to packages/ui/components/form/inputs/Input.tsx
index 0a0f6464eb..9f281e12c5 100644
--- a/packages/ui/v2/core/form/fields.tsx
+++ b/packages/ui/components/form/inputs/Input.tsx
@@ -1,22 +1,15 @@
-import { useId } from "@radix-ui/react-id";
-import React, { forwardRef, ReactElement, ReactNode, Ref, useCallback, useState } from "react";
-import { Check, Circle, Info, X, Eye, EyeOff } from "react-feather";
-import {
-  FieldErrors,
-  FieldValues,
-  FormProvider,
-  SubmitHandler,
-  useFormContext,
-  UseFormReturn,
-} from "react-hook-form";
+import { forwardRef, ReactElement, ReactNode, Ref, useCallback, useId, useState } from "react";
+import React from "react";
+import { Eye, EyeOff } from "react-feather";
+import { FieldValues, FormProvider, SubmitHandler, useFormContext, UseFormReturn } from "react-hook-form";
 
 import classNames from "@calcom/lib/classNames";
 import { getErrorFromUnknown } from "@calcom/lib/errors";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Skeleton, Tooltip } from "@calcom/ui/v2";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Skeleton, Tooltip, Alert, showToast } from "@calcom/ui/v2";
 
-import { Alert } from "../../../Alert";
+import { HintsOrErrors } from "./HintOrErrors";
+import { Label } from "./Label";
 
 type InputProps = JSX.IntrinsicElements["input"];
 
@@ -33,113 +26,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(pro
   );
 });
 
-export function Label(props: JSX.IntrinsicElements["label"]) {
-  return (
-    <label
-      {...props}
-      className={classNames("mb-2 block text-sm font-medium leading-none text-gray-700", props.className)}>
-      {props.children}
-    </label>
-  );
-}
-
-function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
-  hintErrors?: string[];
-  fieldName: string;
-  t: (key: string) => string;
-}) {
-  const methods = useFormContext() as ReturnType<typeof useFormContext> | null;
-  /* If there's no methods it means we're using these components outside a React Hook Form context */
-  if (!methods) return null;
-  const { formState } = methods;
-  const { hintErrors, fieldName, t } = props;
-
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const fieldErrors: FieldErrors<T> | undefined = formState.errors[fieldName];
-
-  if (!hintErrors && fieldErrors && !fieldErrors.message) {
-    // no hints passed, field errors exist and they are custom ones
-    return (
-      <div className="text-gray mt-2 flex items-center text-sm text-gray-700">
-        <ul className="ml-2">
-          {Object.keys(fieldErrors).map((key: string) => {
-            return (
-              <li key={key} className="text-blue-700">
-                {t(`${fieldName}_hint_${key}`)}
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    );
-  }
-
-  if (hintErrors && fieldErrors) {
-    // hints passed, field errors exist
-    return (
-      <div className="text-gray mt-2 flex items-center text-sm text-gray-700">
-        <ul className="ml-2">
-          {hintErrors.map((key: string) => {
-            const submitted = formState.isSubmitted;
-            const error = fieldErrors[key] || fieldErrors.message;
-            return (
-              <li
-                key={key}
-                className={error !== undefined ? (submitted ? "text-red-700" : "") : "text-green-600"}>
-                {error !== undefined ? (
-                  submitted ? (
-                    <X size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
-                  ) : (
-                    <Circle fill="currentColor" size="5" className="mr-2 inline-block" />
-                  )
-                ) : (
-                  <Check size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
-                )}
-                {t(`${fieldName}_hint_${key}`)}
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    );
-  }
-
-  // errors exist, not custom ones, just show them as is
-  if (fieldErrors) {
-    return (
-      <div className="text-gray mt-2 flex items-center text-sm text-red-700">
-        <Info className="mr-1 h-3 w-3" />
-        <>{fieldErrors.message}</>
-      </div>
-    );
-  }
-
-  if (!hintErrors) return null;
-
-  // hints passed, no errors exist, proceed to just show hints
-  return (
-    <div className="text-gray mt-2 flex items-center text-sm text-gray-700">
-      <ul className="ml-2">
-        {hintErrors.map((key: string) => {
-          // if field was changed, as no error exist, show checked status and color
-          const dirty = formState.dirtyFields[fieldName];
-          return (
-            <li key={key} className={!!dirty ? "text-green-600" : ""}>
-              {!!dirty ? (
-                <Check size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
-              ) : (
-                <Circle fill="currentColor" size="5" className="mr-2 inline-block" />
-              )}
-              {t(`${fieldName}_hint_${key}`)}
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-}
-
 export function InputLeading(props: JSX.IntrinsicElements["div"]) {
   return (
     <span className="inline-flex flex-shrink-0 items-center rounded-l-sm border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm">
@@ -184,7 +70,7 @@ const Addon = ({ isFilled, children, className, error }: AddonProps) => (
   </div>
 );
 
-const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputField(props, ref) {
+export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputField(props, ref) {
   const id = useId();
   const { t: _t, isLocaleReady, i18n } = useLocale();
   const t = props.t || _t;
@@ -378,7 +264,7 @@ export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>
         <Alert
           className="mt-1"
           severity="error"
-          message={<>{methods.formState.errors[props.name]!.message}</>}
+          message={<>{methods.formState.errors[props.name]?.message}</>}
         />
       )}
     </div>
diff --git a/packages/ui/components/form/inputs/Label.tsx b/packages/ui/components/form/inputs/Label.tsx
new file mode 100644
index 0000000000..b68eff1ec5
--- /dev/null
+++ b/packages/ui/components/form/inputs/Label.tsx
@@ -0,0 +1,11 @@
+import { classNames } from "@calcom/lib";
+
+export function Label(props: JSX.IntrinsicElements["label"]) {
+  return (
+    <label
+      {...props}
+      className={classNames("mb-2 block text-sm font-medium leading-none text-gray-700", props.className)}>
+      {props.children}
+    </label>
+  );
+}
diff --git a/packages/ui/components/form/inputs/inputs.stories.mdx b/packages/ui/components/form/inputs/inputs.stories.mdx
new file mode 100644
index 0000000000..7acd25cb27
--- /dev/null
+++ b/packages/ui/components/form/inputs/inputs.stories.mdx
@@ -0,0 +1,83 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Examples, Example, Note, Title,CustomArgsTable, VariantRow,VariantsTable} from '@calcom/storybook/components'
+import { Icon } from "@calcom/ui/Icon";
+
+import {InputField} from "./Input"
+
+<Meta title="UI/Form/Input Field" component={InputField} />
+
+<Title title="Inputs" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
+
+## Definition
+Text fields allow users to input and edit text into the product. Usually appear in forms and modals. Various options can be shown with the field to communicate the input requirements.## Structure
+
+## Structure
+<CustomArgsTable of={InputField} />
+
+
+<Examples title="Inputs" footnote={
+  <ul>
+    <li>The width is flexible but the height is fixed for both desktop and mobile.  </li>
+  </ul>
+}>
+  <Example title="Default">
+    <InputField placeholder="Default"/>
+  </Example>
+</Examples>
+
+<Examples title="Input Types">
+  <Example title="Default">
+    <InputField placeholder="Default"/>
+  </Example>
+  <Example title="Prefix">
+    <InputField placeholder="Prefix" addOnLeading={<>Prefix</>}/>
+  </Example>
+  <Example title="Suffix">
+    <InputField placeholder="Suffic" addOnSuffix={<>Suffix</>}/>
+  </Example>
+  <Example title="Focused">
+    <InputField placeholder="Focused"  className="sb-pseudo--focus"/>
+  </Example>
+  <Example title="Hovered">
+    <InputField placeholder="Hovered" className="sb-pseudo--hover"/>
+  </Example>
+  <Example title="Error">
+    <InputField placeholder="Error" error="Error"/>
+  </Example>
+</Examples>
+
+<Examples title="Input Text">
+  <Example title="Default">
+    <InputField />
+  </Example>
+  <Example title="Placeholder">
+    <InputField placeholder="Placeholder"/>
+  </Example>
+  <Example title="Filled">
+    <InputField value="Filled"/>
+  </Example>
+</Examples>
+
+<Title offset title="Input" suffix="Variants" />
+
+<Canvas>
+  <Story name="All Variants">
+    <VariantsTable titles={['Default','Focused', 'Hovered']} columnMinWidth={150}>
+      <VariantRow variant="Default">
+        <InputField placeholder="Default"/>
+        <InputField placeholder="Focused"  className="sb-pseudo--focus"/>
+        <InputField placeholder="Hovered" className="sb-pseudo--hover"/>
+      </VariantRow>
+      <VariantRow variant="Prefixed">
+        <InputField placeholder="Default" addOnLeading={<>Prefix</>}/>
+        <InputField placeholder="Focused"  className="sb-pseudo--focus" addOnLeading={<>Prefix</>}/>
+        <InputField placeholder="Hovered" className="sb-pseudo--hover" addOnLeading={<>Prefix</>}/>
+      </VariantRow>
+      <VariantRow variant="Suffix">
+        <InputField placeholder="Default" addOnSuffix={<>Prefix</>}/>
+        <InputField placeholder="Focused"  className="sb-pseudo--focus" addOnSuffix={<>Prefix</>}/>
+        <InputField placeholder="Hovered" className="sb-pseudo--hover" addOnSuffix={<>Prefix</>}/>
+      </VariantRow>
+    </VariantsTable>
+  </Story>
+</Canvas>
diff --git a/packages/ui/components/index.ts b/packages/ui/components/index.ts
new file mode 100644
index 0000000000..119c6ef058
--- /dev/null
+++ b/packages/ui/components/index.ts
@@ -0,0 +1,6 @@
+export * from "./avatar";
+export * from "./button";
+export * from "./buttonGroup";
+export * from "./badge";
+export * from "./breadcrumb";
+export * from "./form";
diff --git a/packages/ui/styles/shared-globals.css b/packages/ui/styles/shared-globals.css
new file mode 100644
index 0000000000..f47d80cf8e
--- /dev/null
+++ b/packages/ui/styles/shared-globals.css
@@ -0,0 +1,13 @@
+@font-face {
+  font-family: "Cal Sans";
+  src: url("/fonts/cal.ttf");
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("/fonts/Inter-roman.var.woff2") format("woff2");
+}
diff --git a/packages/ui/v2/core/Card.tsx b/packages/ui/v2/core/Card.tsx
index c0249756ee..e0398a667d 100644
--- a/packages/ui/v2/core/Card.tsx
+++ b/packages/ui/v2/core/Card.tsx
@@ -4,7 +4,7 @@ import React from "react";
 
 import classNames from "@calcom/lib/classNames";
 
-import Button from "./Button";
+import { Button } from "../../components/button";
 
 export type BaseCardProps = {
   image?: string;
diff --git a/packages/ui/v2/core/ConfirmationDialogContent.tsx b/packages/ui/v2/core/ConfirmationDialogContent.tsx
index 995100966f..bd1142c585 100644
--- a/packages/ui/v2/core/ConfirmationDialogContent.tsx
+++ b/packages/ui/v2/core/ConfirmationDialogContent.tsx
@@ -3,7 +3,8 @@ import React, { PropsWithChildren, ReactNode } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui/Icon";
-import { Button, DialogClose, DialogContent } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { DialogClose, DialogContent } from "@calcom/ui/v2";
 
 export type ConfirmationDialogContentProps = {
   confirmBtn?: ReactNode;
diff --git a/packages/ui/v2/core/Dialog.tsx b/packages/ui/v2/core/Dialog.tsx
index daa9340f23..5015cdf121 100644
--- a/packages/ui/v2/core/Dialog.tsx
+++ b/packages/ui/v2/core/Dialog.tsx
@@ -6,7 +6,7 @@ import { Icon } from "react-feather";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import Button from "./Button";
+import { Button } from "../../components/button";
 
 export type DialogProps = React.ComponentProps<typeof DialogPrimitive["Root"]> & {
   name?: string;
diff --git a/packages/ui/v2/core/EmptyScreen.tsx b/packages/ui/v2/core/EmptyScreen.tsx
index 34adc79a2f..65a0952d53 100644
--- a/packages/ui/v2/core/EmptyScreen.tsx
+++ b/packages/ui/v2/core/EmptyScreen.tsx
@@ -4,7 +4,7 @@ import { IconType } from "react-icons";
 
 import { SVGComponent } from "@calcom/types/SVGComponent";
 
-import Button from "./Button";
+import { Button } from "../../components/button";
 
 export default function EmptyScreen({
   Icon,
diff --git a/packages/ui/v2/core/ImageUploader.tsx b/packages/ui/v2/core/ImageUploader.tsx
index 7a7867218d..8f106c43fc 100644
--- a/packages/ui/v2/core/ImageUploader.tsx
+++ b/packages/ui/v2/core/ImageUploader.tsx
@@ -4,7 +4,7 @@ import Cropper from "react-easy-crop";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 
 type ReadAsMethod = "readAsText" | "readAsDataURL" | "readAsArrayBuffer" | "readAsBinaryString";
 
diff --git a/packages/ui/v2/core/PageHeader.tsx b/packages/ui/v2/core/PageHeader.tsx
index 2cc440e512..00383f48f1 100644
--- a/packages/ui/v2/core/PageHeader.tsx
+++ b/packages/ui/v2/core/PageHeader.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-import Badge, { badgeClassNameByVariant } from "./Badge";
+import { Badge, badgeClassNameByVariant } from "../../components/badge";
 
 type Props = {
   title: string;
diff --git a/packages/ui/v2/core/Segment.tsx b/packages/ui/v2/core/Segment.tsx
index 90ddbfad4f..6875d00a47 100644
--- a/packages/ui/v2/core/Segment.tsx
+++ b/packages/ui/v2/core/Segment.tsx
@@ -1,7 +1,7 @@
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import React from "react";
 
-import { Label } from "./form";
+import { Label } from "../../components/form";
 
 type SegmentProps = {
   label: string;
diff --git a/packages/ui/v2/core/SettingsToggle.tsx b/packages/ui/v2/core/SettingsToggle.tsx
index 0778e5c475..f9cd167906 100644
--- a/packages/ui/v2/core/SettingsToggle.tsx
+++ b/packages/ui/v2/core/SettingsToggle.tsx
@@ -1,8 +1,8 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 
+import { Label } from "../../components/form";
 import Switch from "./Switch";
-import { Label } from "./form";
 
 type Props = {
   children?: ReactNode;
diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx
index 4cb618360c..af7344ecc8 100644
--- a/packages/ui/v2/core/Shell.tsx
+++ b/packages/ui/v2/core/Shell.tsx
@@ -29,7 +29,7 @@ import Dropdown, {
 } from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
 import TimezoneChangeDialog from "@calcom/ui/TimezoneChangeDialog";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 import showToast from "@calcom/ui/v2/core/notifications";
 import Tips from "@calcom/ui/v2/modules/tips/Tips";
 
diff --git a/packages/ui/v2/core/TableActions.tsx b/packages/ui/v2/core/TableActions.tsx
index 4a95a4aa99..37addd32fc 100644
--- a/packages/ui/v2/core/TableActions.tsx
+++ b/packages/ui/v2/core/TableActions.tsx
@@ -2,7 +2,7 @@ import React, { FC } from "react";
 
 import { SVGComponent } from "@calcom/types/SVGComponent";
 import { Icon } from "@calcom/ui/Icon";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 import {
   DropdownMenuContent,
   DropdownMenuItem,
diff --git a/packages/ui/v2/core/WizardForm.tsx b/packages/ui/v2/core/WizardForm.tsx
index 365a8d7160..1da07e5fac 100644
--- a/packages/ui/v2/core/WizardForm.tsx
+++ b/packages/ui/v2/core/WizardForm.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 
 import classNames from "@calcom/lib/classNames";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 import Stepper from "@calcom/ui/v2/core/Stepper";
 
 type DefaultStep = {
diff --git a/packages/ui/v2/core/apps/AppCard.tsx b/packages/ui/v2/core/apps/AppCard.tsx
index 42ed812d35..903251d456 100644
--- a/packages/ui/v2/core/apps/AppCard.tsx
+++ b/packages/ui/v2/core/apps/AppCard.tsx
@@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { App } from "@calcom/types/App";
 import { Icon } from "@calcom/ui/Icon";
 import { showToast } from "@calcom/ui/v2";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 
 interface AppCardProps {
   app: App;
diff --git a/packages/ui/v2/core/banner.tsx b/packages/ui/v2/core/banner.tsx
index f9b0d9ecb6..3a4acb7199 100644
--- a/packages/ui/v2/core/banner.tsx
+++ b/packages/ui/v2/core/banner.tsx
@@ -3,7 +3,7 @@ import { Icon } from "react-feather";
 
 import classNames from "@calcom/lib/classNames";
 
-import Button from "./Button";
+import { Button } from "../../components/button";
 
 const stylesByVariant = {
   neutral: { background: "bg-gray-100 ", text: "!text-gray-800", hover: "hover:!bg-gray-200" },
diff --git a/packages/ui/v2/core/form/BooleanToggleGroup.tsx b/packages/ui/v2/core/form/BooleanToggleGroup.tsx
index 7cc0ea3b65..cd348355d5 100644
--- a/packages/ui/v2/core/form/BooleanToggleGroup.tsx
+++ b/packages/ui/v2/core/form/BooleanToggleGroup.tsx
@@ -5,7 +5,7 @@ import { useState } from "react";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Label } from "./fields";
+import { Label } from "../../../components/form/inputs/Label";
 
 const boolean = (yesNo: "yes" | "no") => (yesNo === "yes" ? true : yesNo === "no" ? false : undefined);
 const yesNo = (boolean?: boolean) => (boolean === true ? "yes" : boolean === false ? "no" : undefined);
diff --git a/packages/ui/v2/core/form/index.ts b/packages/ui/v2/core/form/index.ts
index 3e18b80a33..5049b54846 100644
--- a/packages/ui/v2/core/form/index.ts
+++ b/packages/ui/v2/core/form/index.ts
@@ -1,6 +1,5 @@
 export * from "./radio-area";
-export * from "./fields";
-export { default as Checkbox } from "./Checkbox";
+export { default as Checkbox } from "../../../components/form/checkbox/Checkbox";
 export { default as DatePicker } from "./DatePicker";
 export { default as Select, SelectWithValidation, SelectField, getReactSelectProps } from "./select";
 
diff --git a/packages/ui/v2/core/form/select/Select.tsx b/packages/ui/v2/core/form/select/Select.tsx
index 5ffee42575..a1a0a8281d 100644
--- a/packages/ui/v2/core/form/select/Select.tsx
+++ b/packages/ui/v2/core/form/select/Select.tsx
@@ -12,7 +12,7 @@ import ReactSelect, {
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Label } from "../fields";
+import { Label } from "../../../../components/form/inputs/Label";
 import {
   ControlComponent,
   InputComponent,
diff --git a/packages/ui/v2/core/index.ts b/packages/ui/v2/core/index.ts
index 0d0f8de7dd..921d0b55a7 100644
--- a/packages/ui/v2/core/index.ts
+++ b/packages/ui/v2/core/index.ts
@@ -1,10 +1,4 @@
 export * from "./Alert";
-export { default as Avatar } from "./Avatar";
-export { default as AvatarGroup } from "./AvatarGroup";
-export { default as Badge } from "./Badge";
-export * from "./Breadcrumb";
-export * from "./Button";
-export { default as ButtonGroup } from "./ButtonGroup";
 export * from "./Card";
 export * from "./Dialog";
 export { default as Dropdown } from "./Dropdown";
@@ -33,4 +27,3 @@ export type { HorizontalTabItemProps } from "./navigation/tabs/HorizontalTabItem
 export * from "./Portal";
 export * from "./Segment";
 export { default as SettingsToggle } from "./SettingsToggle";
-
diff --git a/packages/ui/v2/core/layouts/SettingsLayout.tsx b/packages/ui/v2/core/layouts/SettingsLayout.tsx
index 76564b8464..a0fe60a024 100644
--- a/packages/ui/v2/core/layouts/SettingsLayout.tsx
+++ b/packages/ui/v2/core/layouts/SettingsLayout.tsx
@@ -10,11 +10,11 @@ import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 
 import ErrorBoundary from "../../../ErrorBoundary";
 import { Icon } from "../../../Icon";
-import { Badge } from "../Badge";
+import { Badge } from "../../../components/badge";
 import { useMeta } from "../Meta";
 import Shell from "../Shell";
 import { VerticalTabItemProps } from "../navigation/tabs/VerticalTabItem";
diff --git a/packages/ui/v2/modules/auth/SAMLLogin.tsx b/packages/ui/v2/modules/auth/SAMLLogin.tsx
index 813d1da44f..81c478fdb0 100644
--- a/packages/ui/v2/modules/auth/SAMLLogin.tsx
+++ b/packages/ui/v2/modules/auth/SAMLLogin.tsx
@@ -8,7 +8,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 
 interface Props {
   samlTenantID: string;
diff --git a/packages/ui/v2/modules/event-types/CheckedTeamSelect.tsx b/packages/ui/v2/modules/event-types/CheckedTeamSelect.tsx
index bef93839a3..4e85729d86 100644
--- a/packages/ui/v2/modules/event-types/CheckedTeamSelect.tsx
+++ b/packages/ui/v2/modules/event-types/CheckedTeamSelect.tsx
@@ -5,7 +5,8 @@ import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui/Icon";
 
-import { Avatar, Select } from "../..";
+import { Avatar } from "../../../components";
+import { Select } from "../../core/form";
 
 type CheckedSelectOption = {
   avatar: string;
diff --git a/packages/ui/v2/modules/event-types/CreateEventType.tsx b/packages/ui/v2/modules/event-types/CreateEventType.tsx
index ca7682c15c..97f4813c31 100644
--- a/packages/ui/v2/modules/event-types/CreateEventType.tsx
+++ b/packages/ui/v2/modules/event-types/CreateEventType.tsx
@@ -15,8 +15,9 @@ import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
 import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import { Icon } from "@calcom/ui/Icon";
-import Avatar from "@calcom/ui/v2/core/Avatar";
-import Button from "@calcom/ui/v2/core/Button";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Button } from "@calcom/ui/components/button";
+import { Form, TextAreaField, TextField } from "@calcom/ui/components/form";
 import { Dialog, DialogClose, DialogContent } from "@calcom/ui/v2/core/Dialog";
 import Dropdown, {
   DropdownMenuContent,
@@ -25,7 +26,6 @@ import Dropdown, {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@calcom/ui/v2/core/Dropdown";
-import { Form, TextAreaField, TextField } from "@calcom/ui/v2/core/form/fields";
 import * as RadioArea from "@calcom/ui/v2/core/form/radio-area/RadioAreaGroup";
 import showToast from "@calcom/ui/v2/core/notifications";
 
diff --git a/packages/ui/v2/modules/event-types/CustomInputItem.tsx b/packages/ui/v2/modules/event-types/CustomInputItem.tsx
index 227d3109e3..ec81f2d3f4 100644
--- a/packages/ui/v2/modules/event-types/CustomInputItem.tsx
+++ b/packages/ui/v2/modules/event-types/CustomInputItem.tsx
@@ -1,8 +1,8 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui";
-import Badge from "@calcom/ui/v2/core/Badge";
-import Button from "@calcom/ui/v2/core/Button";
-import ButtonGroup from "@calcom/ui/v2/core/ButtonGroup";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
 
 type Props = {
   required?: boolean;
@@ -19,7 +19,7 @@ function CustomInputItem({ required, deleteOnClick, editOnClick, type, question
       <div className="flex flex-col">
         <div className="flex items-center">
           <span className="pr-2 text-sm font-semibold leading-none text-black">{question}</span>
-          <Badge variant="default" color="gray">
+          <Badge variant="default" color="gray" withDot={false}>
             {required ? t("required") : t("optional")}
           </Badge>
         </div>
diff --git a/packages/ui/v2/modules/event-types/EventTypeDescription.tsx b/packages/ui/v2/modules/event-types/EventTypeDescription.tsx
index c9ec558488..4f746f766f 100644
--- a/packages/ui/v2/modules/event-types/EventTypeDescription.tsx
+++ b/packages/ui/v2/modules/event-types/EventTypeDescription.tsx
@@ -9,7 +9,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { baseEventTypeSelect } from "@calcom/prisma";
 import { EventTypeModel } from "@calcom/prisma/zod";
 import { Icon } from "@calcom/ui";
-import Badge from "@calcom/ui/v2/core/Badge";
+import { Badge } from "@calcom/ui/components/badge";
 
 export type EventTypeDescriptionProps = {
   eventType: Pick<
diff --git a/packages/ui/v2/modules/integrations/DisconnectIntegration.tsx b/packages/ui/v2/modules/integrations/DisconnectIntegration.tsx
index b0e473ec46..f0b66d0c70 100644
--- a/packages/ui/v2/modules/integrations/DisconnectIntegration.tsx
+++ b/packages/ui/v2/modules/integrations/DisconnectIntegration.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import { Button, ButtonProps } from "@calcom/ui/v2/core/Button";
+import { Button, ButtonProps } from "@calcom/ui/components/button";
 import { Dialog, DialogTrigger, DialogContent } from "@calcom/ui/v2/core/Dialog";
 import showToast from "@calcom/ui/v2/core/notifications";
 
diff --git a/yarn.lock b/yarn.lock
index a9732549c3..0450f95824 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -100,6 +100,11 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2"
   integrity sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==
 
+"@babel/compat-data@^7.19.3":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.19.4.tgz#95c86de137bf0317f3a570e1b6e996b427299747"
+  integrity sha512-CHIGpJcUQ5lU9KrPHTjBMhVwQG6CQjxfg36fGXl3qk/Gik1WwWachaXFuo0uCWJT/mStOKtcbFJCaVLihC1CMw==
+
 "@babel/core@7.12.9":
   version "7.12.9"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8"
@@ -228,6 +233,27 @@
     json5 "^2.2.1"
     semver "^6.3.0"
 
+"@babel/core@^7.18.13", "@babel/core@^7.19.6":
+  version "7.19.6"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.19.6.tgz#7122ae4f5c5a37c0946c066149abd8e75f81540f"
+  integrity sha512-D2Ue4KHpc6Ys2+AxpIx1BZ8+UegLLLE2p3KJEuJRKmokHOtl49jQ5ny1773KsGLZs8MQvBidAF6yWUJxRqtKtg==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.19.6"
+    "@babel/helper-compilation-targets" "^7.19.3"
+    "@babel/helper-module-transforms" "^7.19.6"
+    "@babel/helpers" "^7.19.4"
+    "@babel/parser" "^7.19.6"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.6"
+    "@babel/types" "^7.19.4"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.1"
+    semver "^6.3.0"
+
 "@babel/generator@7.13.9":
   version "7.13.9"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.13.9.tgz#3a7aa96f9efb8e2be42d38d80e2ceb4c64d8de39"
@@ -291,6 +317,15 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.19.6":
+  version "7.19.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.19.6.tgz#9e481a3fe9ca6261c972645ae3904ec0f9b34a1d"
+  integrity sha512-oHGRUQeoX1QrKeJIKVe0hwjGqNnVYsM5Nep5zo0uE0m42sLH+Fsd2pStJ5sRM1bNyTUUoz0pe2lTeMJrb/taTA==
+  dependencies:
+    "@babel/types" "^7.19.4"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
@@ -353,6 +388,16 @@
     browserslist "^4.20.2"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.19.3":
+  version "7.19.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.3.tgz#a10a04588125675d7c7ae299af86fa1b2ee038ca"
+  integrity sha512-65ESqLGyGmLvgR0mst5AdW1FkNlj9rQsCKduzEoEPhBCDFGXvz2jW6bXFG6i0/MrV2s7hhXjjb2yAzcPuQlLwg==
+  dependencies:
+    "@babel/compat-data" "^7.19.3"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.21.3"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.6.tgz#6f15f8459f3b523b39e00a99982e2c040871ed72"
@@ -458,6 +503,14 @@
     "@babel/template" "^7.18.6"
     "@babel/types" "^7.18.9"
 
+"@babel/helper-function-name@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c"
+  integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
+  dependencies:
+    "@babel/template" "^7.18.10"
+    "@babel/types" "^7.19.0"
+
 "@babel/helper-get-function-arity@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
@@ -542,6 +595,20 @@
     "@babel/traverse" "^7.18.9"
     "@babel/types" "^7.18.9"
 
+"@babel/helper-module-transforms@^7.19.6":
+  version "7.19.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.19.6.tgz#6c52cc3ac63b70952d33ee987cbee1c9368b533f"
+  integrity sha512-fCmcfQo/KYr/VXXDIyd3CBGZ6AFhPFy1TfSEJ+PilGVlQT6jcbqtHAM4C1EciRqMza7/TpOUZliuSH+U6HAhJw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.19.4"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.6"
+    "@babel/types" "^7.19.4"
+
 "@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"
@@ -604,6 +671,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-simple-access@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.19.4.tgz#be553f4951ac6352df2567f7daa19a0ee15668e7"
+  integrity sha512-f9Xq6WqBFqaDfbCzn2w85hwklswz5qsKlh7f08w4Y9yhJHpnNC0QemtSkK5YyOY8kPGvyiwdzZksGUhnGdaUIg==
+  dependencies:
+    "@babel/types" "^7.19.4"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.18.6.tgz#7dff00a5320ca4cf63270e5a0eca4b268b7380d9"
@@ -630,6 +704,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
   integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
 
+"@babel/helper-string-parser@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
+  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+
 "@babel/helper-validator-identifier@^7.12.11", "@babel/helper-validator-identifier@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
@@ -640,6 +719,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
   integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
 
+"@babel/helper-validator-identifier@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
+  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
+
 "@babel/helper-validator-option@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
@@ -696,6 +780,15 @@
     "@babel/traverse" "^7.18.9"
     "@babel/types" "^7.18.9"
 
+"@babel/helpers@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.19.4.tgz#42154945f87b8148df7203a25c31ba9a73be46c5"
+  integrity sha512-G+z3aOx2nfDHwX/kyVii5fJq+bgscg89/dJNWpYeKeBv3v9xX8EIabmx1k6u9LS04H7nROFVRVK+e3k0VHp+sw==
+  dependencies:
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.4"
+    "@babel/types" "^7.19.4"
+
 "@babel/highlight@^7.16.7":
   version "7.16.10"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
@@ -749,6 +842,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.9.tgz#f2dde0c682ccc264a9a8595efd030a5cc8fd2539"
   integrity sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg==
 
+"@babel/parser@^7.19.6":
+  version "7.19.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.6.tgz#b923430cb94f58a7eae8facbffa9efd19130e7f8"
+  integrity sha512-h1IUp81s2JYJ3mRkdxJgs4UvmSsRvDrx5ICSJbPvtWYv5i1nTBGcBpnog+89rAFMwvvru6E5NUHdBe01UeSzYA==
+
 "@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"
@@ -1790,6 +1888,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.19.4", "@babel/traverse@^7.19.6":
+  version "7.19.6"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.19.6.tgz#7b4c865611df6d99cb131eec2e8ac71656a490dc"
+  integrity sha512-6l5HrUCzFM04mfbG09AagtYyR2P0B71B1wN7PfSPiksDPz2k5H9CBC1tcZpz2M8OxbKTPccByoOJ22rUKbpmQQ==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.19.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.19.6"
+    "@babel/types" "^7.19.4"
+    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"
@@ -1840,6 +1954,15 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.19.0", "@babel/types@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.19.4.tgz#0dd5c91c573a202d600490a35b33246fed8a41c7"
+  integrity sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    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"
@@ -2004,7 +2127,7 @@
     "@devtools-ds/themes" "^1.2.0"
     clsx "1.1.0"
 
-"@discoveryjs/json-ext@^0.5.3", "@discoveryjs/json-ext@^0.5.7":
+"@discoveryjs/json-ext@^0.5.3":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
@@ -2116,6 +2239,16 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@esbuild/android-arm@0.15.12":
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.12.tgz#e548b10a5e55b9e10537a049ebf0bc72c453b769"
+  integrity sha512-IC7TqIqiyE0MmvAhWkl/8AEzpOtbhRNDo7aph47We1NbE5w2bt/Q+giAhe0YYeVpYnIhGMcuZY92qDK6dQauvA==
+
+"@esbuild/linux-loong64@0.15.12":
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.12.tgz#475b33a2631a3d8ca8aa95ee127f9a61d95bf9c1"
+  integrity sha512-tZEowDjvU7O7I04GYvWQOS4yyP9E/7YlsB0jjw1Ycukgr2ycEzKyIk5tms5WnLBymaewc6VmRKnn5IJWgK4eFw==
+
 "@eslint/eslintrc@^1.0.5", "@eslint/eslintrc@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz#29f92c30bb3e771e4a2048c95fa6855392dfac4f"
@@ -3464,6 +3597,11 @@
     "@jridgewell/sourcemap-codec" "^1.4.10"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@jridgewell/resolve-uri@3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+
 "@jridgewell/resolve-uri@^3.0.3":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c"
@@ -3487,6 +3625,11 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@jridgewell/sourcemap-codec@1.4.14":
+  version "1.4.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
 "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.11"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
@@ -3524,6 +3667,14 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@jridgewell/trace-mapping@^0.3.14":
+  version "0.3.17"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
+  integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
 "@jsdevtools/ono@^7.1.3":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
@@ -3698,6 +3849,11 @@
   resolved "https://registry.yarnpkg.com/@next/env/-/env-12.2.5.tgz#d908c57b35262b94db3e431e869b72ac3e1ad3e3"
   integrity sha512-vLPLV3cpPGjUPT3PjgRj7e3nio9t6USkuew3JE/jMeon/9Mvp1WyR18v3iwnCuX7eUAm1HmAbJHHLAbcu/EJcw==
 
+"@next/env@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.3.1.tgz#18266bd92de3b4aa4037b1927aa59e6f11879260"
+  integrity sha512-9P9THmRFVKGKt9DYqeC2aKIxm8rlvkK38V1P1sRE7qyoPBIs8l9oo79QoSdPtOWfzkbDAVUqvbQGgTMsb8BtJg==
+
 "@next/eslint-plugin-next@12.2.5":
   version "12.2.5"
   resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.2.5.tgz#4f3acccd2ed4f9300fbf9fd480cc8a0b261889a8"
@@ -3710,66 +3866,131 @@
   resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.2.5.tgz#903a5479ab4c2705d9c08d080907475f7bacf94d"
   integrity sha512-cPWClKxGhgn2dLWnspW+7psl3MoLQUcNqJqOHk2BhNcou9ARDtC0IjQkKe5qcn9qg7I7U83Gp1yh2aesZfZJMA==
 
+"@next/swc-android-arm-eabi@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.1.tgz#b15ce8ad376102a3b8c0f3c017dde050a22bb1a3"
+  integrity sha512-i+BvKA8tB//srVPPQxIQN5lvfROcfv4OB23/L1nXznP+N/TyKL8lql3l7oo2LNhnH66zWhfoemg3Q4VJZSruzQ==
+
 "@next/swc-android-arm64@12.2.5":
   version "12.2.5"
   resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.2.5.tgz#2f9a98ec4166c7860510963b31bda1f57a77c792"
   integrity sha512-vMj0efliXmC5b7p+wfcQCX0AfU8IypjkzT64GiKJD9PgiA3IILNiGJr1fw2lyUDHkjeWx/5HMlMEpLnTsQslwg==
 
+"@next/swc-android-arm64@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.3.1.tgz#85d205f568a790a137cb3c3f720d961a2436ac9c"
+  integrity sha512-CmgU2ZNyBP0rkugOOqLnjl3+eRpXBzB/I2sjwcGZ7/Z6RcUJXK5Evz+N0ucOxqE4cZ3gkTeXtSzRrMK2mGYV8Q==
+
 "@next/swc-darwin-arm64@12.2.5":
   version "12.2.5"
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.2.5.tgz#31b1c3c659d54be546120c488a1e1bad21c24a1d"
   integrity sha512-VOPWbO5EFr6snla/WcxUKtvzGVShfs302TEMOtzYyWni6f9zuOetijJvVh9CCTzInnXAZMtHyNhefijA4HMYLg==
 
+"@next/swc-darwin-arm64@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.1.tgz#b105457d6760a7916b27e46c97cb1a40547114ae"
+  integrity sha512-hT/EBGNcu0ITiuWDYU9ur57Oa4LybD5DOQp4f22T6zLfpoBMfBibPtR8XktXmOyFHrL/6FC2p9ojdLZhWhvBHg==
+
 "@next/swc-darwin-x64@12.2.5":
   version "12.2.5"
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.2.5.tgz#2e44dd82b2b7fef88238d1bc4d3bead5884cedfd"
   integrity sha512-5o8bTCgAmtYOgauO/Xd27vW52G2/m3i5PX7MUYePquxXAnX73AAtqA3WgPXBRitEB60plSKZgOTkcpqrsh546A==
 
+"@next/swc-darwin-x64@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.1.tgz#6947b39082271378896b095b6696a7791c6e32b1"
+  integrity sha512-9S6EVueCVCyGf2vuiLiGEHZCJcPAxglyckTZcEwLdJwozLqN0gtS0Eq0bQlGS3dH49Py/rQYpZ3KVWZ9BUf/WA==
+
 "@next/swc-freebsd-x64@12.2.5":
   version "12.2.5"
   resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.2.5.tgz#e24e75d8c2581bfebc75e4f08f6ddbd116ce9dbd"
   integrity sha512-yYUbyup1JnznMtEBRkK4LT56N0lfK5qNTzr6/DEyDw5TbFVwnuy2hhLBzwCBkScFVjpFdfiC6SQAX3FrAZzuuw==
 
+"@next/swc-freebsd-x64@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.1.tgz#2b6c36a4d84aae8b0ea0e0da9bafc696ae27085a"
+  integrity sha512-qcuUQkaBZWqzM0F1N4AkAh88lLzzpfE6ImOcI1P6YeyJSsBmpBIV8o70zV+Wxpc26yV9vpzb+e5gCyxNjKJg5Q==
+
 "@next/swc-linux-arm-gnueabihf@12.2.5":
   version "12.2.5"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.2.5.tgz#46d8c514d834d2b5f67086013f0bd5e3081e10b9"
   integrity sha512-2ZE2/G921Acks7UopJZVMgKLdm4vN4U0yuzvAMJ6KBavPzqESA2yHJlm85TV/K9gIjKhSk5BVtauIUntFRP8cg==
 
+"@next/swc-linux-arm-gnueabihf@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.1.tgz#6e421c44285cfedac1f4631d5de330dd60b86298"
+  integrity sha512-diL9MSYrEI5nY2wc/h/DBewEDUzr/DqBjIgHJ3RUNtETAOB3spMNHvJk2XKUDjnQuluLmFMloet9tpEqU2TT9w==
+
 "@next/swc-linux-arm64-gnu@12.2.5":
   version "12.2.5"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.2.5.tgz#91f725ac217d3a1f4f9f53b553615ba582fd3d9f"
   integrity sha512-/I6+PWVlz2wkTdWqhlSYYJ1pWWgUVva6SgX353oqTh8njNQp1SdFQuWDqk8LnM6ulheVfSsgkDzxrDaAQZnzjQ==
 
+"@next/swc-linux-arm64-gnu@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.1.tgz#8863f08a81f422f910af126159d2cbb9552ef717"
+  integrity sha512-o/xB2nztoaC7jnXU3Q36vGgOolJpsGG8ETNjxM1VAPxRwM7FyGCPHOMk1XavG88QZSQf+1r+POBW0tLxQOJ9DQ==
+
 "@next/swc-linux-arm64-musl@12.2.5":
   version "12.2.5"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.2.5.tgz#e627e8c867920995810250303cd9b8e963598383"
   integrity sha512-LPQRelfX6asXyVr59p5sTpx5l+0yh2Vjp/R8Wi4X9pnqcayqT4CUJLiHqCvZuLin3IsFdisJL0rKHMoaZLRfmg==
 
+"@next/swc-linux-arm64-musl@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.1.tgz#0038f07cf0b259d70ae0c80890d826dfc775d9f3"
+  integrity sha512-2WEasRxJzgAmP43glFNhADpe8zB7kJofhEAVNbDJZANp+H4+wq+/cW1CdDi8DqjkShPEA6/ejJw+xnEyDID2jg==
+
 "@next/swc-linux-x64-gnu@12.2.5":
   version "12.2.5"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.2.5.tgz#83a5e224fbc4d119ef2e0f29d0d79c40cc43887e"
   integrity sha512-0szyAo8jMCClkjNK0hknjhmAngUppoRekW6OAezbEYwHXN/VNtsXbfzgYOqjKWxEx3OoAzrT3jLwAF0HdX2MEw==
 
+"@next/swc-linux-x64-gnu@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.1.tgz#c66468f5e8181ffb096c537f0dbfb589baa6a9c1"
+  integrity sha512-JWEaMyvNrXuM3dyy9Pp5cFPuSSvG82+yABqsWugjWlvfmnlnx9HOQZY23bFq3cNghy5V/t0iPb6cffzRWylgsA==
+
 "@next/swc-linux-x64-musl@12.2.5":
   version "12.2.5"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.2.5.tgz#be700d48471baac1ec2e9539396625584a317e95"
   integrity sha512-zg/Y6oBar1yVnW6Il1I/08/2ukWtOG6s3acdJdEyIdsCzyQi4RLxbbhkD/EGQyhqBvd3QrC6ZXQEXighQUAZ0g==
 
+"@next/swc-linux-x64-musl@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.1.tgz#c6269f3e96ac0395bc722ad97ce410ea5101d305"
+  integrity sha512-xoEWQQ71waWc4BZcOjmatuvPUXKTv6MbIFzpm4LFeCHsg2iwai0ILmNXf81rJR+L1Wb9ifEke2sQpZSPNz1Iyg==
+
 "@next/swc-win32-arm64-msvc@12.2.5":
   version "12.2.5"
   resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.2.5.tgz#a93e958133ad3310373fda33a79aa10af2a0aa97"
   integrity sha512-3/90DRNSqeeSRMMEhj4gHHQlLhhKg5SCCoYfE3kBjGpE63EfnblYUqsszGGZ9ekpKL/R4/SGB40iCQr8tR5Jiw==
 
+"@next/swc-win32-arm64-msvc@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.1.tgz#83c639ee969cee36ce247c3abd1d9df97b5ecade"
+  integrity sha512-hswVFYQYIeGHE2JYaBVtvqmBQ1CppplQbZJS/JgrVI3x2CurNhEkmds/yqvDONfwfbttTtH4+q9Dzf/WVl3Opw==
+
 "@next/swc-win32-ia32-msvc@12.2.5":
   version "12.2.5"
   resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.2.5.tgz#4f5f7ba0a98ff89a883625d4af0125baed8b2e19"
   integrity sha512-hGLc0ZRAwnaPL4ulwpp4D2RxmkHQLuI8CFOEEHdzZpS63/hMVzv81g8jzYA0UXbb9pus/iTc3VRbVbAM03SRrw==
 
+"@next/swc-win32-ia32-msvc@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.1.tgz#52995748b92aa8ad053440301bc2c0d9fbcf27c2"
+  integrity sha512-Kny5JBehkTbKPmqulr5i+iKntO5YMP+bVM8Hf8UAmjSMVo3wehyLVc9IZkNmcbxi+vwETnQvJaT5ynYBkJ9dWA==
+
 "@next/swc-win32-x64-msvc@12.2.5":
   version "12.2.5"
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.2.5.tgz#20fed129b04a0d3f632c6d0de135345bb623b1e4"
   integrity sha512-7h5/ahY7NeaO2xygqVrSG/Y8Vs4cdjxIjowTZ5W6CKoTKn7tmnuxlUc2h74x06FKmbhAd9agOjr/AOKyxYYm9Q==
 
+"@next/swc-win32-x64-msvc@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.1.tgz#27d71a95247a9eaee03d47adee7e3bd594514136"
+  integrity sha512-W1ijvzzg+kPEX6LAc+50EYYSEo0FVu7dmTE+t+DM4iOLqgGHoW9uYSz9wCVdkXOEEMP9xhXfGpcSxsfDucyPkA==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -4806,20 +5027,25 @@
   resolved "https://registry.yarnpkg.com/@resvg/resvg-wasm/-/resvg-wasm-2.0.0-alpha.4.tgz#fc2f86186a9641df030d8f9f3f9d995899cd1ecb"
   integrity sha512-pWIG9a/x1ky8gXKRhPH1OPKpHFoMN1ISLbJ+O+gPXQHIAKhNd5I28RlWf7q576hAOQA9JZTlo3p/M2uyLzJmmw==
 
-"@rollup/plugin-sucrase@4.0.4":
+"@rollup/plugin-inject@^4.0.0":
   version "4.0.4"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-sucrase/-/plugin-sucrase-4.0.4.tgz#0a3b3d97cdc239ec3399f5a10711f751e9f95d98"
-  integrity sha512-YH4J8yoJb5EVnLhAwWxYAQNh2SJOR+SdZ6XdgoKEv6Kxm33riYkM8MlMaggN87UoISP52qAFyZ5ey56wu6umGg==
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-inject/-/plugin-inject-4.0.4.tgz#fbeee66e9a700782c4f65c8b0edbafe58678fbc2"
+  integrity sha512-4pbcU4J/nS+zuHk+c+OL3WtmEQhqxlZ9uqfjQMQDOHOPld7PsCd8k5LWs8h5wjwJN7MgnAn768F2sDxEP4eNFQ==
   dependencies:
-    "@rollup/pluginutils" "^4.1.1"
-    sucrase "^3.20.0"
+    "@rollup/pluginutils" "^3.1.0"
+    estree-walker "^2.0.1"
+    magic-string "^0.25.7"
 
-"@rollup/plugin-virtual@3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-virtual/-/plugin-virtual-3.0.0.tgz#8c3f54b4ab4b267d9cd3dcbaedc58d4fd1deddca"
-  integrity sha512-K9KORe1myM62o0lKkNR4MmCxjwuAXsZEtIHpaILfv4kILXTOrXt/R2ha7PzMcCHPYdnkWPiBZK8ed4Zr3Ll5lQ==
+"@rollup/pluginutils@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
+  integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
+  dependencies:
+    "@types/estree" "0.0.39"
+    estree-walker "^1.0.1"
+    picomatch "^2.2.2"
 
-"@rollup/pluginutils@^4.1.1", "@rollup/pluginutils@^4.2.1":
+"@rollup/pluginutils@^4.2.1":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
   integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
@@ -4865,16 +5091,6 @@
     "@sentry/utils" "6.19.7"
     tslib "^1.9.3"
 
-"@sentry/browser@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.17.4.tgz#2e4ad09180905929b823d01e2a029f10933c0a03"
-  integrity sha512-cNLQ/6ea0KOZyLKXGLTdgfqWYdg43+T/uF9D/hmc6kp/5qXm2dR3FcFRZX6OicaENM3dXvSoBIF6bSWmcszRtQ==
-  dependencies:
-    "@sentry/core" "7.17.4"
-    "@sentry/types" "7.17.4"
-    "@sentry/utils" "7.17.4"
-    tslib "^1.9.3"
-
 "@sentry/cli@^1.73.0":
   version "1.74.5"
   resolved "https://registry.yarnpkg.com/@sentry/cli/-/cli-1.74.5.tgz#4a5c622913087c9ab6f82994da9a7526423779b8"
@@ -4888,19 +5104,6 @@
     proxy-from-env "^1.1.0"
     which "^2.0.2"
 
-"@sentry/cli@^1.74.6":
-  version "1.74.6"
-  resolved "https://registry.yarnpkg.com/@sentry/cli/-/cli-1.74.6.tgz#c4f276e52c6f5e8c8d692845a965988068ebc6f5"
-  integrity sha512-pJ7JJgozyjKZSTjOGi86chIngZMLUlYt2HOog+OJn+WGvqEkVymu8m462j1DiXAnex9NspB4zLLNuZ/R6rTQHg==
-  dependencies:
-    https-proxy-agent "^5.0.0"
-    mkdirp "^0.5.5"
-    node-fetch "^2.6.7"
-    npmlog "^4.1.2"
-    progress "^2.0.3"
-    proxy-from-env "^1.1.0"
-    which "^2.0.2"
-
 "@sentry/core@6.19.7":
   version "6.19.7"
   resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.19.7.tgz#156aaa56dd7fad8c89c145be6ad7a4f7209f9785"
@@ -4912,15 +5115,6 @@
     "@sentry/utils" "6.19.7"
     tslib "^1.9.3"
 
-"@sentry/core@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.17.4.tgz#62686e1b2baf4e7ba3d9ca57d91d2dfc643b8250"
-  integrity sha512-U3ABSJBKGK8dJ01nEG2+qNOb6Wv7U3VqoajiZxfV4lpPWNFGCoEhiTytxBlFTOCmdUH8209zSZiWJZaDLy+TSA==
-  dependencies:
-    "@sentry/types" "7.17.4"
-    "@sentry/utils" "7.17.4"
-    tslib "^1.9.3"
-
 "@sentry/hub@6.19.7":
   version "6.19.7"
   resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.19.7.tgz#58ad7776bbd31e9596a8ec46365b45cd8b9cfd11"
@@ -4940,16 +5134,6 @@
     localforage "^1.8.1"
     tslib "^1.9.3"
 
-"@sentry/integrations@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.17.4.tgz#facdc4abb1d4714175c7d66bab634a898cc7eead"
-  integrity sha512-9vL0RRLuMnj0mj61THgRhDUCgTGYbRoCT6HmLGrErHjyTG3d7lUgUwTBQPgw9qYLss1uLKoEtRvcxgtW7ef0BA==
-  dependencies:
-    "@sentry/types" "7.17.4"
-    "@sentry/utils" "7.17.4"
-    localforage "^1.8.1"
-    tslib "^1.9.3"
-
 "@sentry/minimal@6.19.7":
   version "6.19.7"
   resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.19.7.tgz#b3ee46d6abef9ef3dd4837ebcb6bdfd01b9aa7b4"
@@ -4974,25 +5158,6 @@
     "@sentry/webpack-plugin" "1.18.8"
     tslib "^1.9.3"
 
-"@sentry/nextjs@^7.17.3":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.17.4.tgz#9c6d71d17e37da3fcbe753a374e93307a56dbf02"
-  integrity sha512-l4aHhkYjiC49yvvu/iG0CZGpAfmWdVQ4PlcnzqO9XY40So1LixY7idJEDefqx6LSZ1+VadpZT0o6iRwHfuOllQ==
-  dependencies:
-    "@rollup/plugin-sucrase" "4.0.4"
-    "@rollup/plugin-virtual" "3.0.0"
-    "@sentry/core" "7.17.4"
-    "@sentry/integrations" "7.17.4"
-    "@sentry/node" "7.17.4"
-    "@sentry/react" "7.17.4"
-    "@sentry/tracing" "7.17.4"
-    "@sentry/types" "7.17.4"
-    "@sentry/utils" "7.17.4"
-    "@sentry/webpack-plugin" "1.20.0"
-    chalk "3.0.0"
-    rollup "2.78.0"
-    tslib "^1.9.3"
-
 "@sentry/node@6.19.7":
   version "6.19.7"
   resolved "https://registry.yarnpkg.com/@sentry/node/-/node-6.19.7.tgz#32963b36b48daebbd559e6f13b1deb2415448592"
@@ -5007,19 +5172,6 @@
     lru_map "^0.3.3"
     tslib "^1.9.3"
 
-"@sentry/node@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.17.4.tgz#647ebcbd7228e5fa326dc3f95aceab34771205d3"
-  integrity sha512-cR+Gsir9c/tzFWxvk4zXkMQy6tNRHEYixHrb88XIjZVYDqDS9l2/bKs5nJusdmaUeLtmPp5Et2o7RJyS7gvKTQ==
-  dependencies:
-    "@sentry/core" "7.17.4"
-    "@sentry/types" "7.17.4"
-    "@sentry/utils" "7.17.4"
-    cookie "^0.4.1"
-    https-proxy-agent "^5.0.0"
-    lru_map "^0.3.3"
-    tslib "^1.9.3"
-
 "@sentry/react@6.19.7":
   version "6.19.7"
   resolved "https://registry.yarnpkg.com/@sentry/react/-/react-6.19.7.tgz#58cc2d6da20f7d3b0df40638dfbbbc86c9c85caf"
@@ -5032,17 +5184,6 @@
     hoist-non-react-statics "^3.3.2"
     tslib "^1.9.3"
 
-"@sentry/react@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.17.4.tgz#1d2c752841ace0561043be6a863de9fc7437f64c"
-  integrity sha512-Hw8lgeCgUthgVQ5OG24/iZWGNXnxodVfCmfngeIfqUWeFgQUae1V833GNkYZCiE5j2yjNVh3LL2bXA8PnvMCEg==
-  dependencies:
-    "@sentry/browser" "7.17.4"
-    "@sentry/types" "7.17.4"
-    "@sentry/utils" "7.17.4"
-    hoist-non-react-statics "^3.3.2"
-    tslib "^1.9.3"
-
 "@sentry/tracing@6.19.7":
   version "6.19.7"
   resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.19.7.tgz#54bb99ed5705931cd33caf71da347af769f02a4c"
@@ -5054,26 +5195,11 @@
     "@sentry/utils" "6.19.7"
     tslib "^1.9.3"
 
-"@sentry/tracing@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.17.4.tgz#1254f4eb7397e1134248de1dade33d2fec864005"
-  integrity sha512-9Fz6DI16ddnd970mlB5MiCNRSmSXp4SVZ1Yv3L22oS3kQeNxjBTE+htYNwJzSPrQp9aL/LqTYwlnrCy24u9XQA==
-  dependencies:
-    "@sentry/core" "7.17.4"
-    "@sentry/types" "7.17.4"
-    "@sentry/utils" "7.17.4"
-    tslib "^1.9.3"
-
 "@sentry/types@6.19.7":
   version "6.19.7"
   resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.19.7.tgz#c6b337912e588083fc2896eb012526cf7cfec7c7"
   integrity sha512-jH84pDYE+hHIbVnab3Hr+ZXr1v8QABfhx39KknxqKWr2l0oEItzepV0URvbEhB446lk/S/59230dlUUIBGsXbg==
 
-"@sentry/types@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.17.4.tgz#476522bc988989101e7aee9eee3c3f8f16fa59ea"
-  integrity sha512-QJj8vO4AtxuzQfJIzDnECSmoxwnS+WJsm1Ta2Cwdy+TUCBJyWpW7aIJJGta76zb9gNPGb3UcAbeEjhMJBJeRMQ==
-
 "@sentry/utils@6.19.7":
   version "6.19.7"
   resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.19.7.tgz#6edd739f8185fd71afe49cbe351c1bbf5e7b7c79"
@@ -5082,14 +5208,6 @@
     "@sentry/types" "6.19.7"
     tslib "^1.9.3"
 
-"@sentry/utils@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.17.4.tgz#b8f4fb6a329765b97668b34f6d397e8de2169fef"
-  integrity sha512-ioG0ANy8uiWzig82/e7cc+6C9UOxkyBzJDi1luoQVDH6P0/PvM8GzVU+1iUVUipf8+OL1Jh09GrWnd5wLm3XNQ==
-  dependencies:
-    "@sentry/types" "7.17.4"
-    tslib "^1.9.3"
-
 "@sentry/webpack-plugin@1.18.8":
   version "1.18.8"
   resolved "https://registry.yarnpkg.com/@sentry/webpack-plugin/-/webpack-plugin-1.18.8.tgz#247a73a0aa9e28099a736bbe89ca0d35cbac7636"
@@ -5097,14 +5215,6 @@
   dependencies:
     "@sentry/cli" "^1.73.0"
 
-"@sentry/webpack-plugin@1.20.0":
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/@sentry/webpack-plugin/-/webpack-plugin-1.20.0.tgz#e7add76122708fb6b4ee7951294b521019720e58"
-  integrity sha512-Ssj1mJVFsfU6vMCOM2d+h+KQR7QHSfeIP16t4l20Uq/neqWXZUQ2yvQfe4S3BjdbJXz/X4Rw8Hfy1Sd0ocunYw==
-  dependencies:
-    "@sentry/cli" "^1.74.6"
-    webpack-sources "^2.0.0 || ^3.0.0"
-
 "@shuding/opentype.js@1.4.0-beta.0":
   version "1.4.0-beta.0"
   resolved "https://registry.yarnpkg.com/@shuding/opentype.js/-/opentype.js-1.4.0-beta.0.tgz#5d1e7e9e056f546aad41df1c5043f8f85d39e24b"
@@ -5230,40 +5340,18 @@
   resolved "https://registry.yarnpkg.com/@stablelib/utf8/-/utf8-1.0.1.tgz#fd5e7ad353b7e3cd1ce85e49099360e57693cfd1"
   integrity sha512-FrYD1xadah/TtAP6VJ04lDD5h9rdDj/d8wH/jMYTtHqZBv9z2btdvEU8vTxdjdkFmo1b/BH+t3R1wi/mYhCCNg==
 
-"@storybook/addon-a11y@^6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-6.5.10.tgz#a907cbd3f1889ba367828435a58ecc9dac42f6ba"
-  integrity sha512-BnDbLg7YEAX1aEyiB+gDFYMXIbiSFH/M0CdwPCq7T7o8cqULKOHtQkndMja1soMxsqHAVH8AGvVVZ8VlaxaJ3Q==
+"@storybook/addon-actions@6.5.13", "@storybook/addon-actions@^6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.5.13.tgz#84535dda78c7fe15fc61f19a23ed1440952f3c76"
+  integrity sha512-3Tji0gIy95havhTpSc6CsFl5lNxGn4O5Y1U9fyji+GRkKqDFOrvVLYAHPtLOpYdEI5tF0bDo+akiqfDouY8+eA==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/channels" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/api" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/components" "6.5.13"
+    "@storybook/core-events" "6.5.13"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/theming" "6.5.10"
-    axe-core "^4.2.0"
-    core-js "^3.8.2"
-    global "^4.4.0"
-    lodash "^4.17.21"
-    react-sizeme "^3.0.1"
-    regenerator-runtime "^0.13.7"
-    ts-dedent "^2.0.0"
-    util-deprecate "^1.0.2"
-
-"@storybook/addon-actions@6.5.10", "@storybook/addon-actions@^6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.5.10.tgz#83ec807a899e0412cf98037647f256c45cc32bf5"
-  integrity sha512-vpCnEu81fmtYzOf0QsRYoDuf9wXgVVl2VysE1dWRebRhIUDU0JurrthTnw322e38D4FzaoNGqZE7wnBYBohzZA==
-  dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/core-events" "6.5.10"
-    "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/theming" "6.5.10"
+    "@storybook/theming" "6.5.13"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
     global "^4.4.0"
@@ -5277,18 +5365,18 @@
     util-deprecate "^1.0.2"
     uuid-browser "^3.1.0"
 
-"@storybook/addon-backgrounds@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.5.10.tgz#9ab2d2165fe35d265d9d6013fc174fa8528a272f"
-  integrity sha512-5uzQda3dh891h7BL8e9Ymk7BI+QgkkzDJXuA4mHjOXfIiD3S3efhJI8amXuBC2ZpIr6zmVit0MqZVyoVve46cQ==
+"@storybook/addon-backgrounds@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.5.13.tgz#37629db582501aa22bddf492a9f01d6614aaa993"
+  integrity sha512-b4JX7JMY7e50y1l6g71D+2XWV3GO0TO2z1ta8J6W4OQt8f44V7sSkRQaJUzXdLjQMrA+Anojuy1ZwPjVeLC6vg==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/api" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/components" "6.5.13"
+    "@storybook/core-events" "6.5.13"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/theming" "6.5.10"
+    "@storybook/theming" "6.5.13"
     core-js "^3.8.2"
     global "^4.4.0"
     memoizerific "^1.11.3"
@@ -5296,47 +5384,47 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-controls@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.5.10.tgz#275ddcd0f4dc1a107777b425417a8f252f52a91e"
-  integrity sha512-lC2y3XcolmQAJwFurIyGrynAHPWmfNtTCdu3rQBTVGwyxCoNwdOOeC2jV0BRqX2+CW6OHzJr9frNWXPSaZ8c4w==
+"@storybook/addon-controls@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.5.13.tgz#14c8f9379337768bf03f59d19f1a16f3c41418ab"
+  integrity sha512-lYq3uf2mlVevm0bi6ueL3H6TpUMRYW9s/pTNTVJT225l27kLdFR9wEKxAkCBrlKaTgDLJmzzDRsJE3NLZlR/5Q==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/core-common" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/api" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/components" "6.5.13"
+    "@storybook/core-common" "6.5.13"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/node-logger" "6.5.10"
-    "@storybook/store" "6.5.10"
-    "@storybook/theming" "6.5.10"
+    "@storybook/node-logger" "6.5.13"
+    "@storybook/store" "6.5.13"
+    "@storybook/theming" "6.5.13"
     core-js "^3.8.2"
     lodash "^4.17.21"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.5.10.tgz#dde18b5659e8033651e139a231a7f69306433b92"
-  integrity sha512-1kgjo3f0vL6GN8fTwLL05M/q/kDdzvuqwhxPY/v5hubFb3aQZGr2yk9pRBaLAbs4bez0yG0ASXcwhYnrEZUppg==
+"@storybook/addon-docs@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.5.13.tgz#fd82893946b0fa6f0657f16bf6a94637ab4b7532"
+  integrity sha512-RG/NjsheD9FixZ789RJlNyNccaR2Cuy7CtAwph4oUNi3aDFjtOI8Oe9L+FOT7qtVnZLw/YMjF+pZxoDqJNKLPw==
   dependencies:
     "@babel/plugin-transform-react-jsx" "^7.12.12"
     "@babel/preset-env" "^7.12.11"
     "@jest/transform" "^26.6.2"
     "@mdx-js/react" "^1.6.22"
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/core-common" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/api" "6.5.13"
+    "@storybook/components" "6.5.13"
+    "@storybook/core-common" "6.5.13"
+    "@storybook/core-events" "6.5.13"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/docs-tools" "6.5.10"
+    "@storybook/docs-tools" "6.5.13"
     "@storybook/mdx1-csf" "^0.0.1"
-    "@storybook/node-logger" "6.5.10"
-    "@storybook/postinstall" "6.5.10"
-    "@storybook/preview-web" "6.5.10"
-    "@storybook/source-loader" "6.5.10"
-    "@storybook/store" "6.5.10"
-    "@storybook/theming" "6.5.10"
+    "@storybook/node-logger" "6.5.13"
+    "@storybook/postinstall" "6.5.13"
+    "@storybook/preview-web" "6.5.13"
+    "@storybook/source-loader" "6.5.13"
+    "@storybook/store" "6.5.13"
+    "@storybook/theming" "6.5.13"
     babel-loader "^8.0.0"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
@@ -5348,58 +5436,58 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-essentials@^6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.5.10.tgz#d56f0f972e3bd5eae6c79b2126f510c5c020b62d"
-  integrity sha512-PT2aiR4vgAyB0pl3HNBUa4/a7NDRxASxAazz7zt9ZDirkipDKfxwdcLeRoJzwSngVDWEhuz5/paN5x4eNp4Hww==
+"@storybook/addon-essentials@^6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.5.13.tgz#274b8e6b556af4cd43b63fab361fa7d19c704e76"
+  integrity sha512-G9FVAWV7ixjVLWeLgIX+VT90tcAk6yQxfZQegfg5ucRilGysJCDaNnoab4xuuvm1R40TfFhba3iAGZtQYsddmw==
   dependencies:
-    "@storybook/addon-actions" "6.5.10"
-    "@storybook/addon-backgrounds" "6.5.10"
-    "@storybook/addon-controls" "6.5.10"
-    "@storybook/addon-docs" "6.5.10"
-    "@storybook/addon-measure" "6.5.10"
-    "@storybook/addon-outline" "6.5.10"
-    "@storybook/addon-toolbars" "6.5.10"
-    "@storybook/addon-viewport" "6.5.10"
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/core-common" "6.5.10"
-    "@storybook/node-logger" "6.5.10"
+    "@storybook/addon-actions" "6.5.13"
+    "@storybook/addon-backgrounds" "6.5.13"
+    "@storybook/addon-controls" "6.5.13"
+    "@storybook/addon-docs" "6.5.13"
+    "@storybook/addon-measure" "6.5.13"
+    "@storybook/addon-outline" "6.5.13"
+    "@storybook/addon-toolbars" "6.5.13"
+    "@storybook/addon-viewport" "6.5.13"
+    "@storybook/addons" "6.5.13"
+    "@storybook/api" "6.5.13"
+    "@storybook/core-common" "6.5.13"
+    "@storybook/node-logger" "6.5.13"
     core-js "^3.8.2"
     regenerator-runtime "^0.13.7"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-interactions@^6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-interactions/-/addon-interactions-6.5.10.tgz#c1d635b972bb7d21ccfe9b3bd928916683d92b26"
-  integrity sha512-+O/ZuQjonpFmTdFRqjCimQTx4S4c1+S3dYCn6gD/E4xzqlQn1BQaER3paX/aBUKb3oRaSO9RUQ+uxePM4zBEwA==
+"@storybook/addon-interactions@^6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-interactions/-/addon-interactions-6.5.13.tgz#622d6672785045fa71a7677f49076ae2beae351a"
+  integrity sha512-FPOeS7AT/Odxl6z7E0qYI4F0Sh06jFRttRvSgpKC5P2lYUWUstLP5TC8N+F5ijBeLfIdIsf5zBK7l5Y/cluueg==
   dependencies:
     "@devtools-ds/object-inspector" "^1.1.2"
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/core-common" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/api" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/components" "6.5.13"
+    "@storybook/core-common" "6.5.13"
+    "@storybook/core-events" "6.5.13"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/instrumenter" "6.5.10"
-    "@storybook/theming" "6.5.10"
+    "@storybook/instrumenter" "6.5.13"
+    "@storybook/theming" "6.5.13"
     core-js "^3.8.2"
     global "^4.4.0"
     jest-mock "^27.0.6"
     polished "^4.2.2"
     ts-dedent "^2.2.0"
 
-"@storybook/addon-links@^6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.5.10.tgz#f66568fbc84b942032ac2de85f799d69fcf77922"
-  integrity sha512-r3WzYIPz7WjHiaPObC2Tg6bHuZRBb/Kt/X+Eitw+jTqBel7ksvkO36tn81q8Eyj61qIdNQmUWAaX/0aewT0kLA==
+"@storybook/addon-links@^6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.5.13.tgz#816816907e28ca1cccb58908360628d1b3914513"
+  integrity sha512-K/LYYu9R/Xoah5h9MNh4mSHOic3q5csqjderLqr2YW/KPYiuNubgvzEbAAbzI5xq5JrtAZqnINrZUv2A4CyYbQ==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/core-events" "6.5.13"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/router" "6.5.10"
+    "@storybook/router" "6.5.13"
     "@types/qs" "^6.9.5"
     core-js "^3.8.2"
     global "^4.4.0"
@@ -5408,71 +5496,60 @@
     regenerator-runtime "^0.13.7"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-measure@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-6.5.10.tgz#afac72a15d927f9f2119e2218017d757a8c8c6a4"
-  integrity sha512-ss7L1H5K5hXygDIoVwj+QyVXbve5V67x7CofLiLCgQYuJzfO16+sPGjiTGWMpTb4ijox2uKWnTkpilt5bCjXgw==
+"@storybook/addon-measure@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-6.5.13.tgz#05c0e9813fee84a13ba1172444ea99ee083acdbd"
+  integrity sha512-pi5RFB9YTnESRFtYHAVRUrgEI5to0TFc4KndtwcCKt1fMJ8OFjXQeznEfdj95PFeUvW5TNUwjL38vK4LhicB+g==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/api" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/components" "6.5.13"
+    "@storybook/core-events" "6.5.13"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/addon-outline@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-6.5.10.tgz#a49164697344de1bd11d35a5ce21e59afc0dd19c"
-  integrity sha512-AjdaeQ+/iBKmGrAqRW4niwMB6AkgGnYmSzVs5Cf6F/Sb4Dp+vzgLNOwLABD9qs8Ri8dvHl5J4QpVwQKUhYZaOQ==
+"@storybook/addon-outline@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-6.5.13.tgz#e4233e7d268cd0e1b814c253e8756fb459a341bf"
+  integrity sha512-8d8taPheO/tryflzXbj2QRuxHOIS8CtzRzcaglCcioqHEMhOIDOx9BdXKdheq54gdk/UN94HdGJUoVxYyXwZ4Q==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/api" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/components" "6.5.13"
+    "@storybook/core-events" "6.5.13"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
     core-js "^3.8.2"
     global "^4.4.0"
     regenerator-runtime "^0.13.7"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-postcss@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-postcss/-/addon-postcss-2.0.0.tgz#ec61cb9bb2662f408072b35c466c7df801c28498"
-  integrity sha512-Nt82A7e9zJH4+A+VzLKKswUfru+T6FJTakj4dccP0i8DSn7a0CkzRPrLuZBq8tg4voV6gD74bcDf3gViCVBGtA==
+"@storybook/addon-toolbars@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.5.13.tgz#0e67552786f08a6c0a443eaaef21ee565acca839"
+  integrity sha512-Qgr4wKRSP+gY1VaN7PYT4TM1um7KY341X3GHTglXLFHd8nDsCweawfV2shaX3WxCfZmVro8g4G+Oest30kLLCw==
   dependencies:
-    "@storybook/node-logger" "^6.1.14"
-    css-loader "^3.6.0"
-    postcss "^7.0.35"
-    postcss-loader "^4.2.0"
-    style-loader "^1.3.0"
-
-"@storybook/addon-toolbars@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.5.10.tgz#750e6c7fa50a54dac7fe5df7b7c239fb02a4456c"
-  integrity sha512-S0Ljc6Wv+bPbx2e0iTveJ6bBDqjsemu+FZD4qDLsHreoI7DAcqyrF5Def1l8xNohixIVpx8dQpYXRtyzNlXekg==
-  dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/theming" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/api" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/components" "6.5.13"
+    "@storybook/theming" "6.5.13"
     core-js "^3.8.2"
     regenerator-runtime "^0.13.7"
 
-"@storybook/addon-viewport@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.5.10.tgz#4c6151d7e8177b07df8dcb4c61e842dac949215b"
-  integrity sha512-RFMd+4kZljyuJjR9OJ2bFXHrSG7VTi5FDZYWEU+4W1sBxzC+JhnVnUP+HJH3gUxEFIRQC5neRzwWRE9RUUoALQ==
+"@storybook/addon-viewport@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.5.13.tgz#97771ed2f4ca1bef83d25174ce07db8557cdf795"
+  integrity sha512-KSfeuCSIjncwWGnUu6cZBx8WNqYvm5gHyFvkSPKEu0+MJtgncbUy7pl53lrEEr6QmIq0GRXvS3A0XzV8RCnrSA==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/core-events" "6.5.10"
-    "@storybook/theming" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/api" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/components" "6.5.13"
+    "@storybook/core-events" "6.5.13"
+    "@storybook/theming" "6.5.13"
     core-js "^3.8.2"
     global "^4.4.0"
     memoizerific "^1.11.3"
@@ -5496,6 +5573,23 @@
     global "^4.4.0"
     regenerator-runtime "^0.13.7"
 
+"@storybook/addons@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.13.tgz#61ec5eab07879400d423d60bb397880d10ee5e73"
+  integrity sha512-18CqzNnrGMfeZtiKz+R/3rHtSNnfNwz6y6prIQIbWseK16jY8ELTfIFGviwO5V2OqpbHDQi5+xQQ63QAIb89YA==
+  dependencies:
+    "@storybook/api" "6.5.13"
+    "@storybook/channels" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/core-events" "6.5.13"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    "@storybook/router" "6.5.13"
+    "@storybook/theming" "6.5.13"
+    "@types/webpack-env" "^1.16.0"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/addons@^6.4.10":
   version "6.5.9"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.9.tgz#5a9d7395c579a9cbc44dfc122362fb3c95dfb9d5"
@@ -5536,6 +5630,29 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/api@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.13.tgz#8671e580721ff68d209fcde2975f967ae79b7d64"
+  integrity sha512-xVSmB7/IuFd6G7eiJjbI2MuS7SZunoUM6d+YCWpjiehfMeX47MXt1gZtOwFrgJC1ShZlefXFahq/dvxwtmWs+w==
+  dependencies:
+    "@storybook/channels" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/core-events" "6.5.13"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    "@storybook/router" "6.5.13"
+    "@storybook/semver" "^7.3.2"
+    "@storybook/theming" "6.5.13"
+    core-js "^3.8.2"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    regenerator-runtime "^0.13.7"
+    store2 "^2.12.0"
+    telejson "^6.0.8"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/api@6.5.9":
   version "6.5.9"
   resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.9.tgz#303733214c9de0422d162f7c54ae05d088b89bf9"
@@ -5559,16 +5676,16 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/builder-vite@^0.2.2":
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-vite/-/builder-vite-0.2.2.tgz#8d10281bcc39dde3fc6f62b70f80b271980c79e7"
-  integrity sha512-kFY/Rbk+Bu5KmXOCP8CMxp6gfbNGGyNZwikWZe21NHcrVzwHg/aTs+MR37maRqlWcpJvTZmbkKMHak0+vDqpvw==
+"@storybook/builder-vite@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-vite/-/builder-vite-0.2.4.tgz#61b33584a64df01781dd029bea3ff30c6e17b172"
+  integrity sha512-SYAIheTva4Dpqi7Xs+H6oqPOpVA3xu+1k+OnLPKfgR6sVEnLHvPKn80n3NOKdqXoXkO0ou9OVnZaS2A55vnx+A==
   dependencies:
     "@joshwooding/vite-plugin-react-docgen-typescript" "0.0.5"
-    "@rollup/pluginutils" "^4.2.1"
     "@storybook/core-common" "^6.4.3"
     "@storybook/mdx1-csf" "^0.0.4"
     "@storybook/node-logger" "^6.4.3"
+    "@storybook/semver" "^7.3.2"
     "@storybook/source-loader" "^6.4.3"
     "@vitejs/plugin-react" "^2.0.0"
     ast-types "^0.14.2"
@@ -5580,28 +5697,28 @@
     slash "^3.0.0"
     sveltedoc-parser "^4.2.1"
 
-"@storybook/builder-webpack4@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.5.10.tgz#79e95323577a37349ab3c81193fa249ac5c50173"
-  integrity sha512-AoKjsCNoQQoZXYwBDxO8s+yVEd5FjBJAaysEuUTHq2fb81jwLrGcEOo6hjw4jqfugZQIzYUEjPazlvubS78zpw==
+"@storybook/builder-webpack4@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.5.13.tgz#35b22c49562d72934a0bc311657989f3b43be575"
+  integrity sha512-Agqy3IKPv3Nl8QqdS7PjtqLp+c0BD8+/3A2ki/YfKqVz+F+J34EpbZlh3uU053avm1EoNQHSmhZok3ZlWH6O7A==
   dependencies:
     "@babel/core" "^7.12.10"
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/channel-postmessage" "6.5.10"
-    "@storybook/channels" "6.5.10"
-    "@storybook/client-api" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/core-common" "6.5.10"
-    "@storybook/core-events" "6.5.10"
-    "@storybook/node-logger" "6.5.10"
-    "@storybook/preview-web" "6.5.10"
-    "@storybook/router" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/api" "6.5.13"
+    "@storybook/channel-postmessage" "6.5.13"
+    "@storybook/channels" "6.5.13"
+    "@storybook/client-api" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/components" "6.5.13"
+    "@storybook/core-common" "6.5.13"
+    "@storybook/core-events" "6.5.13"
+    "@storybook/node-logger" "6.5.13"
+    "@storybook/preview-web" "6.5.13"
+    "@storybook/router" "6.5.13"
     "@storybook/semver" "^7.3.2"
-    "@storybook/store" "6.5.10"
-    "@storybook/theming" "6.5.10"
-    "@storybook/ui" "6.5.10"
+    "@storybook/store" "6.5.13"
+    "@storybook/theming" "6.5.13"
+    "@storybook/ui" "6.5.13"
     "@types/node" "^14.0.10 || ^16.0.0"
     "@types/webpack" "^4.41.26"
     autoprefixer "^9.8.6"
@@ -5633,27 +5750,27 @@
     webpack-hot-middleware "^2.25.1"
     webpack-virtual-modules "^0.2.2"
 
-"@storybook/builder-webpack5@^6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-6.5.10.tgz#de78a8a262410bbe65eecc62f2beaed1fe44dd5d"
-  integrity sha512-Hcsm/TzGRXHndgQCftt+pzI7GQJRqAv8A8ie5b3aFcodhJfK0qzZsQD4Y4ZWxXh1I/xe5t74Kl2qUJ40PX+geA==
+"@storybook/builder-webpack5@^6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-6.5.13.tgz#b40a6fc0ff22b6e7c7e1a46a8fc3c24cf14833f8"
+  integrity sha512-juNH31ZljWbaoBD6Yx2/iQ4G66UBkwq+cFUqLzgVROKMXmYaT0AJYbfyY8CgGqcXkc+sqNA63yWaLWd8/K9vTg==
   dependencies:
     "@babel/core" "^7.12.10"
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/channel-postmessage" "6.5.10"
-    "@storybook/channels" "6.5.10"
-    "@storybook/client-api" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/core-common" "6.5.10"
-    "@storybook/core-events" "6.5.10"
-    "@storybook/node-logger" "6.5.10"
-    "@storybook/preview-web" "6.5.10"
-    "@storybook/router" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/api" "6.5.13"
+    "@storybook/channel-postmessage" "6.5.13"
+    "@storybook/channels" "6.5.13"
+    "@storybook/client-api" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/components" "6.5.13"
+    "@storybook/core-common" "6.5.13"
+    "@storybook/core-events" "6.5.13"
+    "@storybook/node-logger" "6.5.13"
+    "@storybook/preview-web" "6.5.13"
+    "@storybook/router" "6.5.13"
     "@storybook/semver" "^7.3.2"
-    "@storybook/store" "6.5.10"
-    "@storybook/theming" "6.5.10"
+    "@storybook/store" "6.5.13"
+    "@storybook/theming" "6.5.13"
     "@types/node" "^14.0.10 || ^16.0.0"
     babel-loader "^8.0.0"
     babel-plugin-named-exports-order "^0.0.2"
@@ -5677,26 +5794,26 @@
     webpack-hot-middleware "^2.25.1"
     webpack-virtual-modules "^0.4.1"
 
-"@storybook/channel-postmessage@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.5.10.tgz#be8971b4b7f91b664bb2c6965fdfb073d541a03e"
-  integrity sha512-t9PTA0UzFvYa3IlOfpBOolfrRMPTjUMIeCQ6FNyM0aj5GqLKSvoQzP8NeoRpIrvyf6ljFKKdaMaZ3fiCvh45ag==
+"@storybook/channel-postmessage@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.5.13.tgz#cdb36cf4180bd75687c0c4ec75248044ac975828"
+  integrity sha512-R79MBs0mQ7TV8M/a6x/SiTRyvZBidDfMEEthG7Cyo9p35JYiKOhj2535zhW4qlVMESBu95pwKYBibTjASoStPw==
   dependencies:
-    "@storybook/channels" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/channels" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/core-events" "6.5.13"
     core-js "^3.8.2"
     global "^4.4.0"
     qs "^6.10.0"
     telejson "^6.0.8"
 
-"@storybook/channel-websocket@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-6.5.10.tgz#bd1316a9b555229b215e5054a76b57c503dd8adc"
-  integrity sha512-RTXMZbMWCS3xU+4GVIdfnUXsKcwg/WTozy88/5OxaKjGw6KgRedqLAQJKJ6Y5XlnwIcWelirkHj/COwTTXhbPg==
+"@storybook/channel-websocket@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-6.5.13.tgz#b7a55149295a77004bb156a4ceefc44839f52bb3"
+  integrity sha512-kwh667H+tzCiNvs92GNwYOwVXdj9uHZyieRAN5rJtTBJ7XgLzGkpTEU50mWlbc0nDKhgE0qYvzyr5H393Iy5ug==
   dependencies:
-    "@storybook/channels" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
+    "@storybook/channels" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
     core-js "^3.8.2"
     global "^4.4.0"
     telejson "^6.0.8"
@@ -5710,6 +5827,15 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/channels@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.13.tgz#f3f86b90a7832484ee3dcbc6845f5a47f62f028f"
+  integrity sha512-sGYSilE30bz0jG+HdHnkv0B4XkAv2hP+KRZr4xmnv+MOOQpRnZpJ5Z3HVU16s17cj/83NWihKj6BuKcEVzyilg==
+  dependencies:
+    core-js "^3.8.2"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/channels@6.5.9":
   version "6.5.9"
   resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.9.tgz#abfab89a6587a2688e9926d4aafeb11c9d8b2e79"
@@ -5719,18 +5845,18 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/client-api@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.5.10.tgz#0bc3f68ce014ce1ffd560472a893ba04be370f09"
-  integrity sha512-3wBWZl3NvMFgMovgEh+euiARAT2FXzpvTF4Q1gerGMNNDlrGxHnFvSuy4FHg/irtOGLa4yLz43ULFbYtpKw0Lg==
+"@storybook/client-api@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.5.13.tgz#0bd89339c08898e0409c5a1dd719ed4807b400cb"
+  integrity sha512-uH1mAWbidPiuuTdMUVEiuaNOfrYXm+9QLSP1MMYTKULqEOZI5MSOGkEDqRfVWxbYv/iWBOPTQ+OM9TQ6ecYacg==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/channel-postmessage" "6.5.10"
-    "@storybook/channels" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/channel-postmessage" "6.5.13"
+    "@storybook/channels" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/core-events" "6.5.13"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/store" "6.5.10"
+    "@storybook/store" "6.5.13"
     "@types/qs" "^6.9.5"
     "@types/webpack-env" "^1.16.0"
     core-js "^3.8.2"
@@ -5753,6 +5879,14 @@
     core-js "^3.8.2"
     global "^4.4.0"
 
+"@storybook/client-logger@6.5.13", "@storybook/client-logger@^6.4.0":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.13.tgz#83f332dd9bb4ff1696d16b0cc24561df90905264"
+  integrity sha512-F2SMW3LWFGXLm2ENTwTitrLWJgmMXRf3CWQXdN2EbkNCIBHy5Zcbt+91K4OX8e2e5h9gjGfrdYbyYDYOoUCEfA==
+  dependencies:
+    core-js "^3.8.2"
+    global "^4.4.0"
+
 "@storybook/client-logger@6.5.9":
   version "6.5.9"
   resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.9.tgz#dc1669abe8c45af1cc38f74c6f4b15ff33e63014"
@@ -5761,35 +5895,35 @@
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/components@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.10.tgz#268e1269bc3d262f7dcec13f96c3b844919687b8"
-  integrity sha512-9OhgB8YQfGwOKjo/N96N5mrtJ6qDVVoEM1zuhea32tJUd2eYf0aSWpryA9VnOM0V1q/8DAoCg5rPBMYWMBU5uw==
+"@storybook/components@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.13.tgz#a05fc969458760b348d640f26c2cad310ab35030"
+  integrity sha512-6Hhx70JK5pGfKCkqMU4yq/BBH+vRTmzj7tZKfPwba+f8VmTMoOr/2ysTQFRtXryiHB6Z15xBYgfq5x2pIwQzLQ==
   dependencies:
-    "@storybook/client-logger" "6.5.10"
+    "@storybook/client-logger" "6.5.13"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/theming" "6.5.10"
+    "@storybook/theming" "6.5.13"
     core-js "^3.8.2"
     memoizerific "^1.11.3"
     qs "^6.10.0"
     regenerator-runtime "^0.13.7"
     util-deprecate "^1.0.2"
 
-"@storybook/core-client@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.5.10.tgz#90c86923236c8efff33d454a0dc552f6df4346b1"
-  integrity sha512-THsIjNrOrampTl0Lgfjvfjk1JnktKb4CQLOM80KpQb4cjDqorBjJmErzUkUQ2y3fXvrDmQ/kUREkShET4XEdtA==
+"@storybook/core-client@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.5.13.tgz#5e2a155af5773c4211a0e1fcd72e0cefea52b7ae"
+  integrity sha512-YuELbRokTBdqjbx/R4/7O4rou9kvbBIOJjlUkor9hdLLuJ3P0yGianERGNkZFfvcfMBAxU0p52o7QvDldSR3kA==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/channel-postmessage" "6.5.10"
-    "@storybook/channel-websocket" "6.5.10"
-    "@storybook/client-api" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/channel-postmessage" "6.5.13"
+    "@storybook/channel-websocket" "6.5.13"
+    "@storybook/client-api" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/core-events" "6.5.13"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/preview-web" "6.5.10"
-    "@storybook/store" "6.5.10"
-    "@storybook/ui" "6.5.10"
+    "@storybook/preview-web" "6.5.13"
+    "@storybook/store" "6.5.13"
+    "@storybook/ui" "6.5.13"
     airbnb-js-shims "^2.2.1"
     ansi-to-html "^0.6.11"
     core-js "^3.8.2"
@@ -5801,7 +5935,63 @@
     unfetch "^4.2.0"
     util-deprecate "^1.0.2"
 
-"@storybook/core-common@6.5.10", "@storybook/core-common@^6.4.3":
+"@storybook/core-common@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.5.13.tgz#941fe2aea3326c2d524d095870a4150b9f9b1845"
+  integrity sha512-+DVZrRsteE9pw0X5MNffkdBgejQnbnL+UOG3qXkE9xxUamQALnuqS/w1BzpHE9WmOHuf7RWMKflyQEW3OLKAJg==
+  dependencies:
+    "@babel/core" "^7.12.10"
+    "@babel/plugin-proposal-class-properties" "^7.12.1"
+    "@babel/plugin-proposal-decorators" "^7.12.12"
+    "@babel/plugin-proposal-export-default-from" "^7.12.1"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.12.1"
+    "@babel/plugin-proposal-object-rest-spread" "^7.12.1"
+    "@babel/plugin-proposal-optional-chaining" "^7.12.7"
+    "@babel/plugin-proposal-private-methods" "^7.12.1"
+    "@babel/plugin-proposal-private-property-in-object" "^7.12.1"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-transform-arrow-functions" "^7.12.1"
+    "@babel/plugin-transform-block-scoping" "^7.12.12"
+    "@babel/plugin-transform-classes" "^7.12.1"
+    "@babel/plugin-transform-destructuring" "^7.12.1"
+    "@babel/plugin-transform-for-of" "^7.12.1"
+    "@babel/plugin-transform-parameters" "^7.12.1"
+    "@babel/plugin-transform-shorthand-properties" "^7.12.1"
+    "@babel/plugin-transform-spread" "^7.12.1"
+    "@babel/preset-env" "^7.12.11"
+    "@babel/preset-react" "^7.12.10"
+    "@babel/preset-typescript" "^7.12.7"
+    "@babel/register" "^7.12.1"
+    "@storybook/node-logger" "6.5.13"
+    "@storybook/semver" "^7.3.2"
+    "@types/node" "^14.0.10 || ^16.0.0"
+    "@types/pretty-hrtime" "^1.0.0"
+    babel-loader "^8.0.0"
+    babel-plugin-macros "^3.0.1"
+    babel-plugin-polyfill-corejs3 "^0.1.0"
+    chalk "^4.1.0"
+    core-js "^3.8.2"
+    express "^4.17.1"
+    file-system-cache "^1.0.5"
+    find-up "^5.0.0"
+    fork-ts-checker-webpack-plugin "^6.0.4"
+    fs-extra "^9.0.1"
+    glob "^7.1.6"
+    handlebars "^4.7.7"
+    interpret "^2.2.0"
+    json5 "^2.1.3"
+    lazy-universal-dotenv "^3.0.1"
+    picomatch "^2.3.0"
+    pkg-dir "^5.0.0"
+    pretty-hrtime "^1.0.3"
+    resolve-from "^5.0.0"
+    slash "^3.0.0"
+    telejson "^6.0.8"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+    webpack "4"
+
+"@storybook/core-common@^6.4.3":
   version "6.5.10"
   resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.5.10.tgz#6b93449548b0890f5c68d89f0ca78e092026182c"
   integrity sha512-Bx+VKkfWdrAmD8T51Sjq/mMhRaiapBHcpG4cU5bc3DMbg+LF2/yrgqv/cjVu+m5gHAzYCac5D7gqzBgvG7Myww==
@@ -5864,6 +6054,13 @@
   dependencies:
     core-js "^3.8.2"
 
+"@storybook/core-events@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.13.tgz#a8c0cc92694f09981ca6501d5c5ef328db18db8a"
+  integrity sha512-kL745tPpRKejzHToA3/CoBNbI+NPRVk186vGxXBmk95OEg0TlwgQExP8BnqEtLlRZMbW08e4+6kilc1M1M4N5w==
+  dependencies:
+    core-js "^3.8.2"
+
 "@storybook/core-events@6.5.9":
   version "6.5.9"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.9.tgz#5b0783c7d22a586c0f5e927a61fe1b1223e19637"
@@ -5871,23 +6068,23 @@
   dependencies:
     core-js "^3.8.2"
 
-"@storybook/core-server@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.5.10.tgz#ada3d647833c02cb8c742281c1f314ff866f96f8"
-  integrity sha512-jqwpA0ccA8X5ck4esWBid04+cEIVqirdAcqJeNb9IZAD+bRreO4Im8ilzr7jc5AmQ9fkqHs2NByFKh9TITp8NQ==
+"@storybook/core-server@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.5.13.tgz#5f0f13b73122f73b9d27962616815305da2a5b28"
+  integrity sha512-vs7tu3kAnFwuINio1p87WyqDNlFyZESmeh9s7vvrZVbe/xS/ElqDscr9DT5seW+jbtxufAaHsx+JUTver1dheQ==
   dependencies:
     "@discoveryjs/json-ext" "^0.5.3"
-    "@storybook/builder-webpack4" "6.5.10"
-    "@storybook/core-client" "6.5.10"
-    "@storybook/core-common" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/builder-webpack4" "6.5.13"
+    "@storybook/core-client" "6.5.13"
+    "@storybook/core-common" "6.5.13"
+    "@storybook/core-events" "6.5.13"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/csf-tools" "6.5.10"
-    "@storybook/manager-webpack4" "6.5.10"
-    "@storybook/node-logger" "6.5.10"
+    "@storybook/csf-tools" "6.5.13"
+    "@storybook/manager-webpack4" "6.5.13"
+    "@storybook/node-logger" "6.5.13"
     "@storybook/semver" "^7.3.2"
-    "@storybook/store" "6.5.10"
-    "@storybook/telemetry" "6.5.10"
+    "@storybook/store" "6.5.13"
+    "@storybook/telemetry" "6.5.13"
     "@types/node" "^14.0.10 || ^16.0.0"
     "@types/node-fetch" "^2.5.7"
     "@types/pretty-hrtime" "^1.0.0"
@@ -5922,18 +6119,18 @@
     ws "^8.2.3"
     x-default-browser "^0.4.0"
 
-"@storybook/core@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.5.10.tgz#15ec8be85943251e25c2c24e80e20dcacc4fed65"
-  integrity sha512-K86yYa0tYlMxADlwQTculYvPROokQau09SCVqpsLg3wJCTvYFL4+SIqcYoyBSbFmHOdnYbJgPydjN33MYLiOZQ==
+"@storybook/core@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.5.13.tgz#4c657c5d8d243f1187dad8763a275d555426957e"
+  integrity sha512-kw1lCgbsxzUimGww6t5rmuWJmFPe9kGGyzIqvj4RC4BBcEsP40LEu9XhSfvnb8vTOLIULFZeZpdRFfJs4TYbUw==
   dependencies:
-    "@storybook/core-client" "6.5.10"
-    "@storybook/core-server" "6.5.10"
+    "@storybook/core-client" "6.5.13"
+    "@storybook/core-server" "6.5.13"
 
-"@storybook/csf-tools@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.5.10.tgz#ae6f1ebd4951e8978c8fe3e08ddd2bd269bf922b"
-  integrity sha512-H77kZQEisu7+skzeIbNZwmE09OqLjwJTeFhLN1pcjxKVa30LEI3pBHcNBxVKqgxl+Yg3KkB7W/ArLO2N+i2ohw==
+"@storybook/csf-tools@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.5.13.tgz#cb5cd26083a594bf31b19a66a250ad94863822f6"
+  integrity sha512-63Ev+VmBqzwSwfUzbuXOLKBD5dMTK2zBYLQ9anTVw70FuTikwTsGIbPgb098K0vsxRCgxl7KM7NpivHqtZtdjw==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/generator" "^7.12.11"
@@ -5957,44 +6154,44 @@
   dependencies:
     lodash "^4.17.15"
 
-"@storybook/docs-tools@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-6.5.10.tgz#30baa62c1ca3a18b13625b6b305e23e39f404416"
-  integrity sha512-/bvYgOO+CxMEcHifkjJg0A60OTGOhcjGxnsB1h0gJuxMrqA/7Qwc108bFmPiX0eiD1BovFkZLJV4O6OY7zP5Vw==
+"@storybook/docs-tools@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-6.5.13.tgz#00c7041ac7bc827d12731face909351a5af0cb3f"
+  integrity sha512-hB+hk+895ny4SW84j3X5iV55DHs3bCfTOp7cDdcZJdQrlm0wuDb4A6d4ffNC7ZLh9VkUjU6ST4VEV5Bb0Cptow==
   dependencies:
     "@babel/core" "^7.12.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/store" "6.5.10"
+    "@storybook/store" "6.5.13"
     core-js "^3.8.2"
     doctrine "^3.0.0"
     lodash "^4.17.21"
     regenerator-runtime "^0.13.7"
 
-"@storybook/instrumenter@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/instrumenter/-/instrumenter-6.5.10.tgz#5443f5fdb25ddb589ede2e2f0147becaffd405cb"
-  integrity sha512-3yKJW68wTnGYEts2mJQG6M7ZE+fe54fuy5lBBzRtvWnC15uWTxuaiFp2kxH5b+stSCi4m71ws45RNiEafdBgEQ==
+"@storybook/instrumenter@6.5.13", "@storybook/instrumenter@^6.4.0":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/instrumenter/-/instrumenter-6.5.13.tgz#bcb743e2a2c92ba284b2d5cac41bbe3d2c8e8d12"
+  integrity sha512-izRF64BU+gGCP7qE1N3kOVLSv5Xk4M0OWcRmFIXoIS46qNDzmd8hmbkkx3M9wrvw0kcQ97kIyADF+UInbcr/dQ==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/core-events" "6.5.13"
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/manager-webpack4@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.5.10.tgz#41bae252b863484f293954ef2d2dc80bf3e028f1"
-  integrity sha512-N/TlNDhuhARuFipR/ZJ/xEVESz23iIbCsZ4VNehLHm8PpiGlQUehk+jMjWmz5XV0bJItwjRclY+CU3GjZKblfQ==
+"@storybook/manager-webpack4@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.5.13.tgz#73350ac3e8a10494158df3c1ea01dd7f329bec8e"
+  integrity sha512-pURzS5W3XM0F7bCBWzpl7TRsuy+OXFwLXiWLaexuvo0POZe31Ueo2A1R4rx3MT5Iee8O9mYvG2XTmvK9MlLefQ==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-transform-template-literals" "^7.12.1"
     "@babel/preset-react" "^7.12.10"
-    "@storybook/addons" "6.5.10"
-    "@storybook/core-client" "6.5.10"
-    "@storybook/core-common" "6.5.10"
-    "@storybook/node-logger" "6.5.10"
-    "@storybook/theming" "6.5.10"
-    "@storybook/ui" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/core-client" "6.5.13"
+    "@storybook/core-common" "6.5.13"
+    "@storybook/node-logger" "6.5.13"
+    "@storybook/theming" "6.5.13"
+    "@storybook/ui" "6.5.13"
     "@types/node" "^14.0.10 || ^16.0.0"
     "@types/webpack" "^4.41.26"
     babel-loader "^8.0.0"
@@ -6022,20 +6219,20 @@
     webpack-dev-middleware "^3.7.3"
     webpack-virtual-modules "^0.2.2"
 
-"@storybook/manager-webpack5@^6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack5/-/manager-webpack5-6.5.10.tgz#dff8e53615906284b68df013935e8a6234ddaafe"
-  integrity sha512-uRo+6e5MiVOtyFVMYIKVqvpDveCjHyzXBfetSYR7rKEZoaDMEnLLiuF7DIH12lzxwmzCJ1gIc4lf5HFiTMNkgw==
+"@storybook/manager-webpack5@^6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack5/-/manager-webpack5-6.5.13.tgz#3d88d4ec7dfce6413da944e94e28f3b7a1af4b51"
+  integrity sha512-lQEZacSfeRsbqfJE7TVk35Hm1vkr0I2i1pyYqM+4862gRbMh1nJQXbJ5GqZ+Fo/bf0ZfyFZ32jGDIJAFdlpkuQ==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-transform-template-literals" "^7.12.1"
     "@babel/preset-react" "^7.12.10"
-    "@storybook/addons" "6.5.10"
-    "@storybook/core-client" "6.5.10"
-    "@storybook/core-common" "6.5.10"
-    "@storybook/node-logger" "6.5.10"
-    "@storybook/theming" "6.5.10"
-    "@storybook/ui" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/core-client" "6.5.13"
+    "@storybook/core-common" "6.5.13"
+    "@storybook/node-logger" "6.5.13"
+    "@storybook/theming" "6.5.13"
+    "@storybook/ui" "6.5.13"
     "@types/node" "^14.0.10 || ^16.0.0"
     babel-loader "^8.0.0"
     case-sensitive-paths-webpack-plugin "^2.3.0"
@@ -6106,10 +6303,10 @@
     npmlog "^5.0.1"
     pretty-hrtime "^1.0.3"
 
-"@storybook/node-logger@^6.1.14":
-  version "6.5.9"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.9.tgz#129cfe0d0f79cab4f6a2ba194d39516680b1626f"
-  integrity sha512-nZZNZG2Wtwv6Trxi3FrnIqUmB55xO+X/WQGPT5iKlqNjdRIu/T72mE7addcp4rbuWCQfZUhcDDGpBOwKtBxaGg==
+"@storybook/node-logger@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.13.tgz#f4833ae220efe841747c4fead26419d6625af8d9"
+  integrity sha512-/r5aVZAqZRoy5FyNk/G4pj7yKJd3lJfPbAaOHVROv2IF7PJP/vtRaDkcfh0g2U6zwuDxGIqSn80j+qoEli9m5A==
   dependencies:
     "@types/npmlog" "^4.1.2"
     chalk "^4.1.0"
@@ -6117,24 +6314,24 @@
     npmlog "^5.0.1"
     pretty-hrtime "^1.0.3"
 
-"@storybook/postinstall@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.5.10.tgz#b25378da036bce7b318c6732733aa5ad43449f37"
-  integrity sha512-xqUdpnFHYkn8MgtV+QztvIsRWa6jQUk7QT1Mu17Y0S7PbslNGsuskRPHenHhACXBJF+TM86R+4BaAhnVYTmElw==
+"@storybook/postinstall@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.5.13.tgz#b57b68682b853fd451061c06becd1eff18a75cf8"
+  integrity sha512-qmqP39FGIP5NdhXC5IpAs9cFoYx9fg1psoQKwb9snYb98eVQU31uHc1W2MBUh3lG4AjAm7pQaXJci7ti4jOh3g==
   dependencies:
     core-js "^3.8.2"
 
-"@storybook/preview-web@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/preview-web/-/preview-web-6.5.10.tgz#81bf5d3f5fca9e26099c057206bd8e684225989b"
-  integrity sha512-sTC/o5gkvALOtcNgtApGKGN9EavvSxRHBeBh+5BQjV2qQ8ap+26RsfUizNBECAa2Jrn4osaDYn9HRhJLFL69WA==
+"@storybook/preview-web@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/preview-web/-/preview-web-6.5.13.tgz#332cac4c95e3fd760c9eb8448dfa50fdb3b6255b"
+  integrity sha512-GNNYVzw4SmRua3dOc52Ye6Us4iQbq5GKQ56U3iwnzZM3TBdJB+Rft94Fn1/pypHujEHS8hl5Xgp9td6C1lLCow==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/channel-postmessage" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/channel-postmessage" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/core-events" "6.5.13"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/store" "6.5.10"
+    "@storybook/store" "6.5.13"
     ansi-to-html "^0.6.11"
     core-js "^3.8.2"
     global "^4.4.0"
@@ -6159,24 +6356,24 @@
     react-docgen-typescript "^2.1.1"
     tslib "^2.0.0"
 
-"@storybook/react@^6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.5.10.tgz#6e9f5cf5e4c81d966774c08c87fb2414052db454"
-  integrity sha512-m8S1qQrwA7pDGwdKEvL6LV3YKvSzVUY297Fq+xcTU3irnAy4sHDuFoLqV6Mi1510mErK1r8+rf+0R5rEXB219g==
+"@storybook/react@^6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.5.13.tgz#9b02c4515b6c6a13ce92f1bb4869c20c8ae05dfa"
+  integrity sha512-4gO8qihEkVZ8RNm9iQd7G2iZz4rRAHizJ6T5m58Sn21fxfyg9zAMzhgd0JzXuPXR8lTTj4AvRyPv1Qx7b43smg==
   dependencies:
     "@babel/preset-flow" "^7.12.1"
     "@babel/preset-react" "^7.12.10"
     "@pmmmwh/react-refresh-webpack-plugin" "^0.5.3"
-    "@storybook/addons" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core" "6.5.10"
-    "@storybook/core-common" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/core" "6.5.13"
+    "@storybook/core-common" "6.5.13"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/docs-tools" "6.5.10"
-    "@storybook/node-logger" "6.5.10"
+    "@storybook/docs-tools" "6.5.13"
+    "@storybook/node-logger" "6.5.13"
     "@storybook/react-docgen-typescript-plugin" "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0"
     "@storybook/semver" "^7.3.2"
-    "@storybook/store" "6.5.10"
+    "@storybook/store" "6.5.13"
     "@types/estree" "^0.0.51"
     "@types/node" "^14.14.20 || ^16.0.0"
     "@types/webpack-env" "^1.16.0"
@@ -6211,6 +6408,17 @@
     qs "^6.10.0"
     regenerator-runtime "^0.13.7"
 
+"@storybook/router@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.13.tgz#c8bfed96f2343b097d416cfc95194038365fce94"
+  integrity sha512-sf5aogfirH5ucD0d0hc2mKf2iyWsZsvXhr5kjxUQmgkcoflkGUWhc34sbSQVRQ1i8K5lkLIDH/q2s1Zr2SbzhQ==
+  dependencies:
+    "@storybook/client-logger" "6.5.13"
+    core-js "^3.8.2"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/router@6.5.9":
   version "6.5.9"
   resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.9.tgz#4740248f8517425b2056273fb366ace8a17c65e8"
@@ -6230,7 +6438,23 @@
     core-js "^3.6.5"
     find-up "^4.1.0"
 
-"@storybook/source-loader@6.5.10", "@storybook/source-loader@^6.4.3":
+"@storybook/source-loader@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.5.13.tgz#40e6e42888b8c12b43a505ffa6c6f1f2cebb0b0d"
+  integrity sha512-tHuM8PfeB/0m+JigbaFp+Ld0euFH+fgOObH2W9rjEXy5vnwmaeex/JAdCprv4oL+LcDQEERqNULUUNIvbcTPAg==
+  dependencies:
+    "@storybook/addons" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    core-js "^3.8.2"
+    estraverse "^5.2.0"
+    global "^4.4.0"
+    loader-utils "^2.0.0"
+    lodash "^4.17.21"
+    prettier ">=2.2.1 <=2.3.0"
+    regenerator-runtime "^0.13.7"
+
+"@storybook/source-loader@^6.4.3":
   version "6.5.10"
   resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.5.10.tgz#f62b4c7b1933976a20913ddc149d55026ef4c872"
   integrity sha512-1RxxRumpjs8VUUwES9LId+cuNQnixhZAcwCxd6jaKkTZbjiQCtAhXX6DBTjJGV1u/JnCsqEp5b1wB8j/EioNHw==
@@ -6246,14 +6470,14 @@
     prettier ">=2.2.1 <=2.3.0"
     regenerator-runtime "^0.13.7"
 
-"@storybook/store@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.5.10.tgz#85df17a8d57af0cba3934b3c6046537e2bca9abd"
-  integrity sha512-RswrSYh2IiKkytFPxP9AvP+hekjrvHK2ILvyDk2ZgduCN4n5ivsekOb+N3M2t+dq1eLuW9or5n2T4OWwAwjxxQ==
+"@storybook/store@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.5.13.tgz#0281bdf0e24c880f85ea75ae47b6a84e8545b5f8"
+  integrity sha512-GG6lm+8fBX1tNUnX7x3raBOjYhhf14bPWLtYiPlxDTFEMs3sJte7zWKZq6NQ79MoBLL6jjzTeolBfDCBw6fiWQ==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/core-events" "6.5.13"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
@@ -6267,13 +6491,13 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/telemetry@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-6.5.10.tgz#742b05a55dfe8470ce4cb371f3f3f2c02f96e816"
-  integrity sha512-+M5HILDFS8nDumLxeSeAwi1MTzIuV6UWzV4yB2wcsEXOBTdplcl9oYqFKtlst78oOIdGtpPYxYfivDlqxC2K4g==
+"@storybook/telemetry@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-6.5.13.tgz#a190001f679ce7899c72b53710765685281fe567"
+  integrity sha512-PFJEfGbunmfFWabD3rdCF8EHH+45578OHOkMPpXJjqXl94vPQxUH2XTVKQgEQJbYrgX0Vx9Z4tSkdMHuzYDbWQ==
   dependencies:
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-common" "6.5.10"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/core-common" "6.5.13"
     chalk "^4.1.0"
     core-js "^3.8.2"
     detect-package-manager "^2.0.1"
@@ -6285,6 +6509,17 @@
     read-pkg-up "^7.0.1"
     regenerator-runtime "^0.13.7"
 
+"@storybook/testing-library@^0.0.13":
+  version "0.0.13"
+  resolved "https://registry.yarnpkg.com/@storybook/testing-library/-/testing-library-0.0.13.tgz#417c87d4ea62895092ec5fdf67027ae201254f45"
+  integrity sha512-vRMeIGer4EjJkTgI8sQyK9W431ekPWYCWL//OmSDJ64IT3h7FnW7Xg6p+eqM3oII98/O5pcya5049GxnjaPtxw==
+  dependencies:
+    "@storybook/client-logger" "^6.4.0"
+    "@storybook/instrumenter" "^6.4.0"
+    "@testing-library/dom" "^8.3.0"
+    "@testing-library/user-event" "^13.2.1"
+    ts-dedent "^2.2.0"
+
 "@storybook/theming@6.5.10":
   version "6.5.10"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.10.tgz#052100979c1270fc8f60653c1a13a6f047318109"
@@ -6295,6 +6530,16 @@
     memoizerific "^1.11.3"
     regenerator-runtime "^0.13.7"
 
+"@storybook/theming@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.13.tgz#3f905eb9f72ddc28d096384290999057987f3083"
+  integrity sha512-oif5NGFAUQhizo50r+ctw2hZNLWV4dPHai+L/gFvbaSeRBeHSNkIcMoZ2FlrO566HdGZTDutYXcR+xus8rI28g==
+  dependencies:
+    "@storybook/client-logger" "6.5.13"
+    core-js "^3.8.2"
+    memoizerific "^1.11.3"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/theming@6.5.9":
   version "6.5.9"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.9.tgz#13f60a3a3cd73ceb5caf9f188e1627e79f1891aa"
@@ -6305,20 +6550,20 @@
     memoizerific "^1.11.3"
     regenerator-runtime "^0.13.7"
 
-"@storybook/ui@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.5.10.tgz#f56095a1a39ae5a203f2ac7f3dba86341a5927d5"
-  integrity sha512-6iaoaRAiTqB1inTw35vao+5hjcDE0Qa0A3a9ZIeNa6yHvpB1k0lO/N/0PMrRdVvySYpXVD1iry4z4QYdo1rU+w==
+"@storybook/ui@6.5.13":
+  version "6.5.13"
+  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.5.13.tgz#16b25fd839cdafc2b9989c548bc1ffb711b33dee"
+  integrity sha512-MklJuSg4Bc+MWjwhZVmZhJaucaeEBUMMa2V9oRWbIgZOdRHqdW72S2vCbaarDAYfBQdnfaoq1GkSQiw+EnWOzA==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/channels" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/core-events" "6.5.10"
-    "@storybook/router" "6.5.10"
+    "@storybook/addons" "6.5.13"
+    "@storybook/api" "6.5.13"
+    "@storybook/channels" "6.5.13"
+    "@storybook/client-logger" "6.5.13"
+    "@storybook/components" "6.5.13"
+    "@storybook/core-events" "6.5.13"
+    "@storybook/router" "6.5.13"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.5.10"
+    "@storybook/theming" "6.5.13"
     core-js "^3.8.2"
     memoizerific "^1.11.3"
     qs "^6.10.0"
@@ -6337,6 +6582,13 @@
   resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.35.0.tgz#f809e2e5e0a00f01aa12e8aed0b89d27728c05c0"
   integrity sha512-UIuzpbJqgXCTvJhY/aZYvBtaKdMfQgnIv6kkLlfRJ9smZcC4zoPvq3j7k9wobYI+idHAWP4BRiPnqA8lvzJCtg==
 
+"@swc/helpers@0.4.11":
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.11.tgz#db23a376761b3d31c26502122f349a21b592c8de"
+  integrity sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==
+  dependencies:
+    tslib "^2.4.0"
+
 "@swc/helpers@0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.3.tgz#16593dfc248c53b699d4b5026040f88ddb497012"
@@ -6409,6 +6661,20 @@
     "@tanstack/query-core" "4.3.8"
     use-sync-external-store "^1.2.0"
 
+"@testing-library/dom@^8.3.0":
+  version "8.19.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.19.0.tgz#bd3f83c217ebac16694329e413d9ad5fdcfd785f"
+  integrity sha512-6YWYPPpxG3e/xOo6HIWwB/58HukkwIVTOaZ0VwdMVjhRUX/01E4FtQbck9GazOOj7MXHc5RBzMrU86iBJHbI+A==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^5.0.0"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.9"
+    lz-string "^1.4.4"
+    pretty-format "^27.0.2"
+
 "@testing-library/dom@^8.5.0":
   version "8.17.1"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.17.1.tgz#2d7af4ff6dad8d837630fecd08835aee08320ad7"
@@ -6432,6 +6698,13 @@
     "@testing-library/dom" "^8.5.0"
     "@types/react-dom" "^18.0.0"
 
+"@testing-library/user-event@^13.2.1":
+  version "13.5.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295"
+  integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -6687,6 +6960,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
   integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
 
+"@types/estree@0.0.39":
+  version "0.0.39"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
+  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
+
 "@types/estree@^0.0.46":
   version "0.0.46"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.46.tgz#0fb6bfbbeabd7a30880504993369c4bf1deab1fe"
@@ -6968,11 +7246,16 @@
   dependencies:
     "@types/node" "*"
 
-"@types/node@*", "@types/node@16.9.1", "@types/node@>=12.0.0", "@types/node@>=8.1.0", "@types/node@^12.12.54", "@types/node@^12.12.6", "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0":
+"@types/node@*", "@types/node@16.9.1", "@types/node@>=12.0.0", "@types/node@>=8.1.0", "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0":
   version "16.9.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.9.1.tgz#0611b37db4246c937feef529ddcc018cf8e35708"
   integrity sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==
 
+"@types/node@^12.12.54", "@types/node@^12.12.6":
+  version "12.20.55"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
+  integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
+
 "@types/nodemailer@^6.4.5":
   version "6.4.5"
   resolved "https://registry.yarnpkg.com/@types/nodemailer/-/nodemailer-6.4.5.tgz#09011ac73259245475d1688e4ba101860567dc39"
@@ -7058,6 +7341,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@^18.0.6":
+  version "18.0.8"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.8.tgz#d2606d855186cd42cc1b11e63a71c39525441685"
+  integrity sha512-C3GYO0HLaOkk9dDAz3Dl4sbe4AKUGTCfFIZsz3n/82dPNN8Du533HzKatDxeUYWu24wJgMP1xICqkWk1YOLOIw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-gtm-module@^2.0.1":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/react-gtm-module/-/react-gtm-module-2.0.1.tgz#b2c6cd14ec251d6ae7fa576edf1d43825908a378"
@@ -7218,7 +7508,7 @@
   resolved "https://registry.yarnpkg.com/@types/webidl-conversions/-/webidl-conversions-6.1.1.tgz#e33bc8ea812a01f63f90481c666334844b12a09e"
   integrity sha512-XAahCdThVuCFDQLT7R7Pk/vqeObFNL3YqRyFZg+AqAP/W1/w3xHaIxuW7WszQqTbIBOPRcItYJIou3i/mppu3Q==
 
-"@types/webpack-env@^1.16.0", "@types/webpack-env@^1.17.0":
+"@types/webpack-env@^1.16.0":
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.17.0.tgz#f99ce359f1bfd87da90cc4a57cab0a18f34a48d0"
   integrity sha512-eHSaNYEyxRA5IAG0Ym/yCyf86niZUIF/TpWKofQI/CVfh5HsMEUyfE2kwFxha4ow0s5g0LfISQxpDKjbRDrizw==
@@ -7492,6 +7782,19 @@
     magic-string "^0.26.2"
     react-refresh "^0.14.0"
 
+"@vitejs/plugin-react@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-2.1.0.tgz#4c99df15e71d2630601bd3018093bdc787d40e55"
+  integrity sha512-am6rPyyU3LzUYne3Gd9oj9c4Rzbq5hQnuGXSMT6Gujq45Il/+bunwq3lrB7wghLkiF45ygMwft37vgJ/NE8IAA==
+  dependencies:
+    "@babel/core" "^7.18.13"
+    "@babel/plugin-transform-react-jsx" "^7.18.10"
+    "@babel/plugin-transform-react-jsx-development" "^7.18.6"
+    "@babel/plugin-transform-react-jsx-self" "^7.18.6"
+    "@babel/plugin-transform-react-jsx-source" "^7.18.6"
+    magic-string "^0.26.2"
+    react-refresh "^0.14.0"
+
 "@wagmi/core@^0.5.4":
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/@wagmi/core/-/core-0.5.4.tgz#494143f1e5cad75f29d38574f5387b6456876d9c"
@@ -8695,6 +8998,18 @@ autolinker@^3.11.0:
   dependencies:
     tslib "^2.3.0"
 
+autoprefixer@^10.4.12:
+  version "10.4.12"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.12.tgz#183f30bf0b0722af54ee5ef257f7d4320bb33129"
+  integrity sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q==
+  dependencies:
+    browserslist "^4.21.4"
+    caniuse-lite "^1.0.30001407"
+    fraction.js "^4.2.0"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
 autoprefixer@^10.4.8:
   version "10.4.8"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.8.tgz#92c7a0199e1cfb2ad5d9427bd585a3d75895b9e5"
@@ -8735,11 +9050,6 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
-axe-core@^4.2.0:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.2.tgz#dcf7fb6dea866166c3eab33d68208afe4d5f670c"
-  integrity sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==
-
 axe-core@^4.3.5:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.1.tgz#7dbdc25989298f9ad006645cd396782443757413"
@@ -9026,11 +9336,6 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
-batch-processor@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
-  integrity sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==
-
 bcrypt-pbkdf@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
@@ -9398,6 +9703,16 @@ browserslist@^4.21.3:
     node-releases "^2.0.6"
     update-browserslist-db "^1.0.5"
 
+browserslist@^4.21.4:
+  version "4.21.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987"
+  integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==
+  dependencies:
+    caniuse-lite "^1.0.30001400"
+    electron-to-chromium "^1.4.251"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.9"
+
 bs-logger@0.x:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
@@ -9758,6 +10073,11 @@ caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001373:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001378.tgz#3d2159bf5a8f9ca093275b0d3ecc717b00f27b67"
   integrity sha512-JVQnfoO7FK7WvU4ZkBRbPjaot4+YqxogSDosHv0Hv5mWpUESmN+UubMU6L/hGz8QlQ2aY5U0vR6MOs6j/CXpNA==
 
+caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001407:
+  version "1.0.30001425"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001425.tgz#52917791a453eb3265143d2cd08d80629e82c735"
+  integrity sha512-/pzFv0OmNG6W0ym80P3NtapU0QEiDS3VuYAZMGoLLqiC7f6FJFe1MjpQDREGApeenD9wloeytmVDj+JLXPC6qw==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -9794,14 +10114,6 @@ chalk@2.3.0:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
-chalk@3.0.0, chalk@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
-  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 chalk@4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.1.tgz#c80b3fab28bf6371e6863325eee67e618b77e6ad"
@@ -9838,6 +10150,14 @@ chalk@^2.0.0, chalk@^2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 change-case@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/change-case/-/change-case-2.3.1.tgz#2c4fde3f063bb41d00cd68e0d5a09db61cbe894f"
@@ -9964,14 +10284,6 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
-chromatic@^6.7.4:
-  version "6.7.4"
-  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-6.7.4.tgz#2fa8d5e0fca75d3720cd894b156653d070bf1824"
-  integrity sha512-QW4i8RQsON0JVnFnRf+8y70aIJptvC0Oi/26YJ669Dl03WmJRpobNO5qWFPTiv3KFKMc1Qf6/qFsRVZCtn+bfA==
-  dependencies:
-    "@discoveryjs/json-ext" "^0.5.7"
-    "@types/webpack-env" "^1.17.0"
-
 chrome-trace-event@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
@@ -10039,9 +10351,9 @@ clean-css@^4.2.3:
     source-map "~0.6.0"
 
 clean-css@^5.2.2:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.0.tgz#ad3d8238d5f3549e83d5f87205189494bc7cbb59"
-  integrity sha512-YYuuxv4H/iNb1Z/5IbMRoxgrzjWGhOEFfd+groZ5dMCVkpENiMZmwspdrzBo9286JjM1gZJPAyL7ZIdzuvu2AQ==
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.1.tgz#d0610b0b90d125196a2894d35366f734e5d7aa32"
+  integrity sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==
   dependencies:
     source-map "~0.6.0"
 
@@ -11597,18 +11909,16 @@ electron-to-chromium@^1.4.202:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.222.tgz#2ba24bef613fc1985dbffea85df8f62f2dec6448"
   integrity sha512-gEM2awN5HZknWdLbngk4uQCVfhucFAfFzuchP3wM3NN6eow1eDU0dFy2kts43FB20ZfhVFF0jmFSTb1h5OhyIg==
 
+electron-to-chromium@^1.4.251:
+  version "1.4.284"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz#61046d1e4cab3a25238f6bf7413795270f125592"
+  integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==
+
 electron-to-chromium@^1.4.76, electron-to-chromium@^1.4.84:
   version "1.4.103"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.103.tgz#abfe376a4d70fa1e1b4b353b95df5d6dfd05da3a"
   integrity sha512-c/uKWR1Z/W30Wy/sx3dkZoj4BijbXX85QKWu9jJfjho3LBAXNEGAEW3oWiGb+dotA6C6BzCTxL2/aLes7jlUeg==
 
-element-resize-detector@^1.2.2:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.4.tgz#3e6c5982dd77508b5fa7e6d5c02170e26325c9b1"
-  integrity sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==
-  dependencies:
-    batch-processor "1.0.0"
-
 elliptic@6.5.4, elliptic@^6.4.0, elliptic@^6.5.2, elliptic@^6.5.3, elliptic@^6.5.4:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -11689,18 +11999,18 @@ enhanced-resolve@^4.5.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-enhanced-resolve@^5.7.0:
-  version "5.9.2"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz#0224dcd6a43389ebfb2d55efee517e5466772dd9"
-  integrity sha512-GIm3fQfwLJ8YZx2smuHpBKkXC1yOk+OBEmKckVyL0i/ea8mqDEykK3ld5dgH1QYPNyT/lIllxV2LULnxCHaHkA==
+enhanced-resolve@^5.10.0, enhanced-resolve@^5.9.3:
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
+  integrity sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-enhanced-resolve@^5.9.3:
-  version "5.10.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
-  integrity sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==
+enhanced-resolve@^5.7.0:
+  version "5.9.2"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz#0224dcd6a43389ebfb2d55efee517e5466772dd9"
+  integrity sha512-GIm3fQfwLJ8YZx2smuHpBKkXC1yOk+OBEmKckVyL0i/ea8mqDEykK3ld5dgH1QYPNyT/lIllxV2LULnxCHaHkA==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -11899,101 +12209,201 @@ esbuild-android-64@0.14.31:
   resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.31.tgz#4b7dfbbeee62b3495ba78220b85fb590eb68d5bf"
   integrity sha512-MYkuJ91w07nGmr4EouejOZK2j/f5TCnsKxY8vRr2+wpKKfHD1LTJK28VbZa+y1+AL7v1V9G98ezTUwsV3CmXNw==
 
+esbuild-android-64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.12.tgz#5e8151d5f0a748c71a7fbea8cee844ccf008e6fc"
+  integrity sha512-MJKXwvPY9g0rGps0+U65HlTsM1wUs9lbjt5CU19RESqycGFDRijMDQsh68MtbzkqWSRdEtiKS1mtPzKneaAI0Q==
+
 esbuild-android-arm64@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.31.tgz#24c3d693924e044fb0d23206c3e627502b10b930"
   integrity sha512-0rkH/35s7ZVcsw6nS0IAkR0dekSbjZGWdlOAf3jV0lGoPqqw0x6/TmaV9w7DQgUERTH1ApmPlpAMU4kVkCq9Jg==
 
+esbuild-android-arm64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.12.tgz#5ee72a6baa444bc96ffcb472a3ba4aba2cc80666"
+  integrity sha512-Hc9SEcZbIMhhLcvhr1DH+lrrec9SFTiRzfJ7EGSBZiiw994gfkVV6vG0sLWqQQ6DD7V4+OggB+Hn0IRUdDUqvA==
+
 esbuild-darwin-64@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.31.tgz#285fbdb6dc74d4410f43dee59e6a14ebff82a9d7"
   integrity sha512-kP6xPZHxtJa36Hb0jC05L3VzQSZBW2f3bpnQS20czXTRGEmM2GDiYpGdI5g2QYaw6vC4PYXjnigq8usd9g9jnQ==
 
+esbuild-darwin-64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.12.tgz#70047007e093fa1b3ba7ef86f9b3fa63db51fe25"
+  integrity sha512-qkmqrTVYPFiePt5qFjP8w/S+GIUMbt6k8qmiPraECUWfPptaPJUGkCKrWEfYFRWB7bY23FV95rhvPyh/KARP8Q==
+
 esbuild-darwin-arm64@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.31.tgz#b39c471a8134ce2c7811eb96fab9c500b256261c"
   integrity sha512-1ZMog4hkNsdBGtDDtsftUqX6S9N52gEx4vX5aVehsSptgoBFIar1XrPiBTQty7YNH+bJasTpSVaZQgElCVvPKQ==
 
+esbuild-darwin-arm64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.12.tgz#41c951f23d9a70539bcca552bae6e5196696ae04"
+  integrity sha512-z4zPX02tQ41kcXMyN3c/GfZpIjKoI/BzHrdKUwhC/Ki5BAhWv59A9M8H+iqaRbwpzYrYidTybBwiZAIWCLJAkw==
+
 esbuild-freebsd-64@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.31.tgz#7ca700ef60ae12154bae63094ad41b21c6ae1a23"
   integrity sha512-Zo0BYj7QpVFWoUpkv6Ng0RO2eJ4zk/WDaHMO88+jr5HuYmxsOre0imgwaZVPquTuJnCvL1G48BFucJ3tFflSeQ==
 
+esbuild-freebsd-64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.12.tgz#a761b5afd12bbedb7d56c612e9cfa4d2711f33f0"
+  integrity sha512-XFL7gKMCKXLDiAiBjhLG0XECliXaRLTZh6hsyzqUqPUf/PY4C6EJDTKIeqqPKXaVJ8+fzNek88285krSz1QECw==
+
 esbuild-freebsd-arm64@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.31.tgz#f793085c7184fcd08649b8d185edc5c2ce112e82"
   integrity sha512-t85bS6jbRpmdjr4pdr/FY/fpx8lo1vv9S7BAs2EsXKJQhRDMIiC3QW+k2acYJoRuqirlvJcJVFQGCq/PfyC1kA==
 
+esbuild-freebsd-arm64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.12.tgz#6b0839d4d58deabc6cbd96276eb8cbf94f7f335e"
+  integrity sha512-jwEIu5UCUk6TjiG1X+KQnCGISI+ILnXzIzt9yDVrhjug2fkYzlLbl0K43q96Q3KB66v6N1UFF0r5Ks4Xo7i72g==
+
 esbuild-linux-32@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.31.tgz#cac97ec7da6fbde0c21dbe08babd0d2a034f317d"
   integrity sha512-XYtOk/GodSkv+UOYVwryGpGPuFnszsMvRMKq6cIUfFfdssHuKDsU9IZveyCG44J106J39ABenQ5EetbYtVJHUw==
 
+esbuild-linux-32@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.12.tgz#bd50bfe22514d434d97d5150977496e2631345b4"
+  integrity sha512-uSQuSEyF1kVzGzuIr4XM+v7TPKxHjBnLcwv2yPyCz8riV8VUCnO/C4BF3w5dHiVpCd5Z1cebBtZJNlC4anWpwA==
+
 esbuild-linux-64@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.31.tgz#ec94cd5228e6777d2feb3c24a1fe1cbf8817d6da"
   integrity sha512-Zf9CZxAxaXWHLqCg/QZ/hs0RU0XV3IBxV+ENQzy00S4QOTnZAvSLgPciILHHrVJ0lPIlb4XzAqlLM5y6iI2LIw==
 
+esbuild-linux-64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.15.12.tgz#074bb2b194bf658245f8490f29c01ffcdfa8c931"
+  integrity sha512-QcgCKb7zfJxqT9o5z9ZUeGH1k8N6iX1Y7VNsEi5F9+HzN1OIx7ESxtQXDN9jbeUSPiRH1n9cw6gFT3H4qbdvcA==
+
 esbuild-linux-arm64@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.31.tgz#d119188fccd6384db5c703de24c46dacaee3e9e8"
   integrity sha512-V/H0tv+xpQ9IOHM+o85oCKNNidIEc5CcnDWl0V+hPd2F03dqdbFkWPBGphx8rD4JSQn6UefUQ1iH7y1qIzO8Fw==
 
+esbuild-linux-arm64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.12.tgz#3bf789c4396dc032875a122988efd6f3733f28f5"
+  integrity sha512-HtNq5xm8fUpZKwWKS2/YGwSfTF+339L4aIA8yphNKYJckd5hVdhfdl6GM2P3HwLSCORS++++7++//ApEwXEuAQ==
+
 esbuild-linux-arm@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.31.tgz#63e10846886901e5632a591d44160f95c5d12ba7"
   integrity sha512-RpiaeHPRlgCCDskxoyIsI49BhcDtZ4cl8+SLffizDm0yMNWP538SUg0ezQ2TTOPj3/svaGIbkRDwYtAon0Sjkg==
 
+esbuild-linux-arm@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.12.tgz#b91b5a8d470053f6c2c9c8a5e67ec10a71fe4a67"
+  integrity sha512-Wf7T0aNylGcLu7hBnzMvsTfEXdEdJY/hY3u36Vla21aY66xR0MS5I1Hw8nVquXjTN0A6fk/vnr32tkC/C2lb0A==
+
 esbuild-linux-mips64le@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.31.tgz#1cd44f72cde6489a5d6deea7c54efa6f3d6590ee"
   integrity sha512-9/oBfAckInRuUg6AEgdCLLn6KJ6UOJDOLmUinTsReVSg6AfV6wxYQJq9iQM2idRogP7GUpomJ+bvCdWXpotQRQ==
 
+esbuild-linux-mips64le@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.12.tgz#2fb54099ada3c950a7536dfcba46172c61e580e2"
+  integrity sha512-Qol3+AvivngUZkTVFgLpb0H6DT+N5/zM3V1YgTkryPYFeUvuT5JFNDR3ZiS6LxhyF8EE+fiNtzwlPqMDqVcc6A==
+
 esbuild-linux-ppc64le@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.31.tgz#3b5ccc05e5b8ef5c494f30a61fdd27811d2bbeeb"
   integrity sha512-NMcb14Pg+8q8raGkzor9/R3vQwKzgxE3694BtO2SDLBwJuL2C1dQ1ZtM1t7ZvArQBgT8RiZVxb0/3fD+qGNk7g==
 
+esbuild-linux-ppc64le@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.12.tgz#9e3b8c09825fb27886249dfb3142a750df29a1b7"
+  integrity sha512-4D8qUCo+CFKaR0cGXtGyVsOI7w7k93Qxb3KFXWr75An0DHamYzq8lt7TNZKoOq/Gh8c40/aKaxvcZnTgQ0TJNg==
+
 esbuild-linux-riscv64@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.31.tgz#d74ca78c8ed1d9b40bc907a9e3ef6e83fc06189c"
   integrity sha512-l13yvmsVfawAnoYfcpuvml+nTlrOmtdceXYufSkXl2DOb0JKcuR6ARlAzuQCDcpo49SOJy1cCxpwlOIsUQBfzA==
 
+esbuild-linux-riscv64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.12.tgz#923d0f5b6e12ee0d1fe116b08e4ae4478fe40693"
+  integrity sha512-G9w6NcuuCI6TUUxe6ka0enjZHDnSVK8bO+1qDhMOCtl7Tr78CcZilJj8SGLN00zO5iIlwNRZKHjdMpfFgNn1VA==
+
 esbuild-linux-s390x@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.31.tgz#1bd547b8b027e323b77a838d265cb56ece2543af"
   integrity sha512-GIwV9mY3koYja9MCSkKLk1P7rj+MkPV0UsGsZ575hEcIBrXeKN9jBi6X/bxDDPEN/SUAH35cJhBNrZU4x9lEfg==
 
+esbuild-linux-s390x@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.12.tgz#3b1620220482b96266a0c6d9d471d451a1eab86f"
+  integrity sha512-Lt6BDnuXbXeqSlVuuUM5z18GkJAZf3ERskGZbAWjrQoi9xbEIsj/hEzVnSAFLtkfLuy2DE4RwTcX02tZFunXww==
+
 esbuild-netbsd-64@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.31.tgz#964a45dbad4fac92aa0a15056e38a182735bd6c6"
   integrity sha512-bJ+pyLvKQm+Obp5k7/Wk8e9Gdkls56F1aiI3uptoIfOIUqsZImH7pDyTrSufwqsFp62kO9LRuwXnjDwQtPyhFQ==
 
+esbuild-netbsd-64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.12.tgz#276730f80da646859b1af5a740e7802d8cd73e42"
+  integrity sha512-jlUxCiHO1dsqoURZDQts+HK100o0hXfi4t54MNRMCAqKGAV33JCVvMplLAa2FwviSojT/5ZG5HUfG3gstwAG8w==
+
 esbuild-openbsd-64@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.31.tgz#7d2a1d46450321b0459263d3e7072e6d3924ce46"
   integrity sha512-NRAAPPca05H9j9Xab0kVXK0V6/pyZGGy8d2Y8KS0BMwWEydlD4KCJDmH8/7bWCKYLRGOOCE9/GPBJyPWHFW3sg==
 
+esbuild-openbsd-64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.12.tgz#bd0eea1dd2ca0722ed489d88c26714034429f8ae"
+  integrity sha512-1o1uAfRTMIWNOmpf8v7iudND0L6zRBYSH45sofCZywrcf7NcZA+c7aFsS1YryU+yN7aRppTqdUK1PgbZVaB1Dw==
+
 esbuild-sunos-64@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.31.tgz#3b3e4363951cd1dda14a14fee6d94ca426108e0c"
   integrity sha512-9uA+V8w9Eehu4ldb95lPWdgCMcMO5HH6pXmfkk5usn3JsSZxKdLKsXB4hYgP80wscZvVYXJl2G+KNxsUTfPhZw==
 
+esbuild-sunos-64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.12.tgz#5e56bf9eef3b2d92360d6d29dcde7722acbecc9e"
+  integrity sha512-nkl251DpoWoBO9Eq9aFdoIt2yYmp4I3kvQjba3jFKlMXuqQ9A4q+JaqdkCouG3DHgAGnzshzaGu6xofGcXyPXg==
+
 esbuild-windows-32@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.31.tgz#997026a41c04535bfb7c014a0458940b49145820"
   integrity sha512-VGdncQTqoxD9q3v/dk0Yugbmx2FzOkcs0OemBYc1X9KXOLQYH0uQbLJIckZdZOC3J+JKSExbYFrzYCOwWPuNyA==
 
+esbuild-windows-32@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.12.tgz#a4f1a301c1a2fa7701fcd4b91ef9d2620cf293d0"
+  integrity sha512-WlGeBZHgPC00O08luIp5B2SP4cNCp/PcS+3Pcg31kdcJPopHxLkdCXtadLU9J82LCfw4TVls21A6lilQ9mzHrw==
+
 esbuild-windows-64@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.31.tgz#5d4b0ea686c9b60036303b3415c472f2761bdafc"
   integrity sha512-v/2ye5zBqpmCzi3bLCagStbNQlnOsY7WtMrD2Q0xZxeSIXONxji15KYtVee5o7nw4lXWbQSS1BL8G6BBMvtq4A==
 
+esbuild-windows-64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.15.12.tgz#bc2b467541744d653be4fe64eaa9b0dbbf8e07f6"
+  integrity sha512-VActO3WnWZSN//xjSfbiGOSyC+wkZtI8I4KlgrTo5oHJM6z3MZZBCuFaZHd8hzf/W9KPhF0lY8OqlmWC9HO5AA==
+
 esbuild-windows-arm64@0.14.31:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.31.tgz#4f3b9fc34c4a33abbd0171df6cbb657ccbdbfc67"
   integrity sha512-RXeU42FJoG1sriNHg73h4S+5B7L/gw+8T7U9u8IWqSSEbY6fZvBh4uofugiU1szUDqqP00GHwZ09WgYe3lGZiw==
 
+esbuild-windows-arm64@0.15.12:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.12.tgz#9a7266404334a86be800957eaee9aef94c3df328"
+  integrity sha512-Of3MIacva1OK/m4zCNIvBfz8VVROBmQT+gRX6pFTLPngFYcj6TFH/12VveAqq1k9VB2l28EoVMNMUCcmsfwyuA==
+
 esbuild@^0.14.27:
   version "0.14.31"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.31.tgz#f7d0db114edc615f66d84972ee9fbd2b267f4029"
@@ -12020,6 +12430,34 @@ esbuild@^0.14.27:
     esbuild-windows-64 "0.14.31"
     esbuild-windows-arm64 "0.14.31"
 
+esbuild@^0.15.9:
+  version "0.15.12"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.15.12.tgz#6c8e22d6d3b7430d165c33848298d3fc9a1f251c"
+  integrity sha512-PcT+/wyDqJQsRVhaE9uX/Oq4XLrFh0ce/bs2TJh4CSaw9xuvI+xFrH2nAYOADbhQjUgAhNWC5LKoUsakm4dxng==
+  optionalDependencies:
+    "@esbuild/android-arm" "0.15.12"
+    "@esbuild/linux-loong64" "0.15.12"
+    esbuild-android-64 "0.15.12"
+    esbuild-android-arm64 "0.15.12"
+    esbuild-darwin-64 "0.15.12"
+    esbuild-darwin-arm64 "0.15.12"
+    esbuild-freebsd-64 "0.15.12"
+    esbuild-freebsd-arm64 "0.15.12"
+    esbuild-linux-32 "0.15.12"
+    esbuild-linux-64 "0.15.12"
+    esbuild-linux-arm "0.15.12"
+    esbuild-linux-arm64 "0.15.12"
+    esbuild-linux-mips64le "0.15.12"
+    esbuild-linux-ppc64le "0.15.12"
+    esbuild-linux-riscv64 "0.15.12"
+    esbuild-linux-s390x "0.15.12"
+    esbuild-netbsd-64 "0.15.12"
+    esbuild-openbsd-64 "0.15.12"
+    esbuild-sunos-64 "0.15.12"
+    esbuild-windows-32 "0.15.12"
+    esbuild-windows-64 "0.15.12"
+    esbuild-windows-arm64 "0.15.12"
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -12439,6 +12877,11 @@ estree-util-visit@^1.0.0:
     "@types/estree-jsx" "^0.0.1"
     "@types/unist" "^2.0.0"
 
+estree-walker@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
+  integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
+
 estree-walker@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
@@ -13031,6 +13474,17 @@ fast-glob@^3.2.11, fast-glob@^3.2.7, fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.2.12:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-parse@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.3.tgz#43e5c61ee4efa9265633046b770fb682a7577c4d"
@@ -13616,6 +14070,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
+fs@^0.0.1-security:
+  version "0.0.1-security"
+  resolved "https://registry.yarnpkg.com/fs/-/fs-0.0.1-security.tgz#8a7bd37186b6dddf3813f23858b57ecaaf5e41d4"
+  integrity sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==
+
 fsevents@^1.2.7:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
@@ -17151,6 +17610,13 @@ lz-string@^1.4.4:
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
   integrity sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==
 
+magic-string@^0.25.7:
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
+  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
 magic-string@^0.26.1, magic-string@^0.26.2:
   version "0.26.2"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.2.tgz#5331700e4158cd6befda738bb6b0c7b93c0d4432"
@@ -17548,13 +18014,20 @@ mem@^8.1.1:
     map-age-cleaner "^0.1.3"
     mimic-fn "^3.1.0"
 
-memfs@^3.1.2, memfs@^3.2.2:
+memfs@^3.1.2:
   version "3.4.7"
   resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.4.7.tgz#e5252ad2242a724f938cb937e3c4f7ceb1f70e5a"
   integrity sha512-ygaiUSNalBX85388uskeCyhSAoOSgzBbtVCr9jA2RROssFL9Q19/ZXFqS+2Th2sr1ewNIWgFdLzLC3Yl1Zv+lw==
   dependencies:
     fs-monkey "^1.0.3"
 
+memfs@^3.2.2:
+  version "3.4.9"
+  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.4.9.tgz#403bb953776d72fef4e39e1197a25ffa156d143a"
+  integrity sha512-3rm8kbrzpUGRyPKSGuk387NZOwQ90O4rI9tsWQkzNW7BLSnKGp23RsEsKK8N8QVCrtJoAMqy3spxHC4os4G6PQ==
+  dependencies:
+    fs-monkey "^1.0.3"
+
 "memoize-one@>=3.1.1 <6", memoize-one@^5.0.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
@@ -18418,7 +18891,7 @@ mysql2@2.3.3:
     seq-queue "^0.0.5"
     sqlstring "^2.3.2"
 
-mz@^2.4.0, mz@^2.7.0:
+mz@^2.4.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
   integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
@@ -18636,6 +19109,32 @@ next@^12.2.5:
     "@next/swc-win32-ia32-msvc" "12.2.5"
     "@next/swc-win32-x64-msvc" "12.2.5"
 
+next@^12.3.1:
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/next/-/next-12.3.1.tgz#127b825ad2207faf869b33393ec8c75fe61e50f1"
+  integrity sha512-l7bvmSeIwX5lp07WtIiP9u2ytZMv7jIeB8iacR28PuUEFG5j0HGAPnMqyG5kbZNBG2H7tRsrQ4HCjuMOPnANZw==
+  dependencies:
+    "@next/env" "12.3.1"
+    "@swc/helpers" "0.4.11"
+    caniuse-lite "^1.0.30001406"
+    postcss "8.4.14"
+    styled-jsx "5.0.7"
+    use-sync-external-store "1.2.0"
+  optionalDependencies:
+    "@next/swc-android-arm-eabi" "12.3.1"
+    "@next/swc-android-arm64" "12.3.1"
+    "@next/swc-darwin-arm64" "12.3.1"
+    "@next/swc-darwin-x64" "12.3.1"
+    "@next/swc-freebsd-x64" "12.3.1"
+    "@next/swc-linux-arm-gnueabihf" "12.3.1"
+    "@next/swc-linux-arm64-gnu" "12.3.1"
+    "@next/swc-linux-arm64-musl" "12.3.1"
+    "@next/swc-linux-x64-gnu" "12.3.1"
+    "@next/swc-linux-x64-musl" "12.3.1"
+    "@next/swc-win32-arm64-msvc" "12.3.1"
+    "@next/swc-win32-ia32-msvc" "12.3.1"
+    "@next/swc-win32-x64-msvc" "12.3.1"
+
 nextra-theme-docs@^1.2.2:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/nextra-theme-docs/-/nextra-theme-docs-1.2.6.tgz#e6d5d8788534ae62d589db96df65f1a6e8b60bcc"
@@ -19989,15 +20488,6 @@ postcss-loader@^6.2.1:
     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"
-  integrity sha512-VRviFEyYlLjctSM93gAZtcJJ/iSkPZ79zWbN/1fSH+NisBByEiVLqpdVDrPLVSi8DX0oJo12kL/GppTBdKVXiQ==
-  dependencies:
-    cosmiconfig "^7.0.0"
-    klona "^2.0.5"
-    semver "^7.3.7"
-
 postcss-modules-extract-imports@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
@@ -20066,6 +20556,18 @@ postcss-nested@5.0.6:
   dependencies:
     postcss-selector-parser "^6.0.6"
 
+postcss-nested@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735"
+  integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-pseudo-companion-classes@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-pseudo-companion-classes/-/postcss-pseudo-companion-classes-0.1.1.tgz#3ba005ef2af406752e1a227b381699e9e7d0c09d"
+  integrity sha512-CJqiANNTMXqKKzaQHANdYGdpqoRbUvsXGWHEbzJ4hsTf2TF/Jj2fONWdsaXANIXIPjlfoIn/++W7FnKKrnZkNg==
+
 postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.6:
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
@@ -20079,7 +20581,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@8.4.14, postcss@^8.2.14, postcss@^8.2.15, postcss@^8.4.13, postcss@^8.4.14:
+postcss@8.4.14, postcss@^8.2.14, 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==
@@ -20088,7 +20590,7 @@ postcss@8.4.14, postcss@^8.2.14, postcss@^8.2.15, postcss@^8.4.13, postcss@^8.4.
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.39"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
   integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
@@ -20096,6 +20598,15 @@ 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.17, postcss@^8.4.18:
+  version "8.4.18"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.18.tgz#6d50046ea7d3d66a85e0e782074e7203bc7fbca2"
+  integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@^8.4.16:
   version "8.4.16"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.16.tgz#33a1d675fac39941f5f445db0de4db2b6e01d43c"
@@ -21066,16 +21577,6 @@ react-select@^5.4.0:
     prop-types "^15.6.0"
     react-transition-group "^4.3.0"
 
-react-sizeme@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-3.0.2.tgz#4a2f167905ba8f8b8d932a9e35164e459f9020e4"
-  integrity sha512-xOIAOqqSSmKlKFJLO3inBQBdymzDuXx4iuwkNcJmC96jeiOg5ojByvL+g3MW9LPEsojLbC6pf68zOfobK8IPlw==
-  dependencies:
-    element-resize-detector "^1.2.2"
-    invariant "^2.2.4"
-    shallowequal "^1.1.0"
-    throttle-debounce "^3.0.1"
-
 react-ssr-prepass@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/react-ssr-prepass/-/react-ssr-prepass-1.5.0.tgz#bc4ca7fcb52365e6aea11cc254a3d1bdcbd030c5"
@@ -21840,12 +22341,12 @@ rlp@^2.0.0, rlp@^2.2.3, rlp@^2.2.4:
   dependencies:
     bn.js "^5.2.0"
 
-rollup@2.78.0:
-  version "2.78.0"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.78.0.tgz#00995deae70c0f712ea79ad904d5f6b033209d9e"
-  integrity sha512-4+YfbQC9QEVvKTanHhIAFVUFSRsezvQF8vFOJwtGfb9Bb+r014S+qryr9PSmw8x6sMnPkmFBGAvIFVQxvJxjtg==
-  optionalDependencies:
-    fsevents "~2.3.2"
+rollup-plugin-polyfill-node@^0.10.2:
+  version "0.10.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-polyfill-node/-/rollup-plugin-polyfill-node-0.10.2.tgz#b2128646851fcb9475ddfd5bc22ca1a8c568738d"
+  integrity sha512-5GMywXiLiuQP6ZzED/LO/Q0HyDi2W6b8VN+Zd3oB0opIjyRs494Me2ZMaqKWDNbGiW4jvvzl6L2n4zRgxS9cSQ==
+  dependencies:
+    "@rollup/plugin-inject" "^4.0.0"
 
 "rollup@>=2.59.0 <2.78.0":
   version "2.77.3"
@@ -21854,6 +22355,13 @@ rollup@2.78.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+rollup@~2.78.0:
+  version "2.78.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.78.1.tgz#52fe3934d9c83cb4f7c4cb5fb75d88591be8648f"
+  integrity sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 rootpath@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/rootpath/-/rootpath-0.1.2.tgz#5b379a87dca906e9b91d690a599439bef267ea6b"
@@ -22316,11 +22824,6 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallowequal@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
-  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
-
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -22752,10 +23255,10 @@ storybook-addon-designs@^6.3.1:
   dependencies:
     "@figspec/react" "^1.0.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==
+storybook-addon-next@^1.6.9:
+  version "1.6.9"
+  resolved "https://registry.yarnpkg.com/storybook-addon-next/-/storybook-addon-next-1.6.9.tgz#ee88b522fa294a5144891c8439300eb7a67b014d"
+  integrity sha512-MrzR+Zw4Dzl0mh5C8xPW4suUqh+Sh6/iEXGU5ehW9e1TMavlFbic84xTErHsKrIYNb4jpExsYob4hlhzLqxOjw==
   dependencies:
     "@storybook/addons" "^6.4.10"
     image-size "^1.0.0"
@@ -22765,7 +23268,19 @@ storybook-addon-next@^1.6.7:
     sass-loader "^12.4.0"
     semver "^7.3.5"
     tsconfig-paths "^4.0.0"
-    tsconfig-paths-webpack-plugin "^3.5.2"
+    tsconfig-paths-webpack-plugin "^4.0.0"
+
+storybook-i18n@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/storybook-i18n/-/storybook-i18n-1.1.4.tgz#f463287fa7d8c79c8283c4e7157c8557ebaf408f"
+  integrity sha512-0xD005aEBWhuDFU9oO5Yf+33MZQa/NWa2CWjkBODhcqC+N5WJhEPGUSQs8o9AqzQoRpIBOMQ3CS0cbRGbBuTxQ==
+
+storybook-react-i18next@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/storybook-react-i18next/-/storybook-react-i18next-1.1.2.tgz#991a6cad525e4e811da44037d64f485a3c0899d5"
+  integrity sha512-7KT/wIpV0C5IfExMZ/vfEpPVdXaHNPYhl3XkaGtLfQjmqS+EsNLbR4LyKcQaB8oKtMWMdEbg9mQ4aBJWPBdK/w==
+  dependencies:
+    storybook-i18n "^1.1.2"
 
 stream-browserify@^2.0.1:
   version "2.0.2"
@@ -23152,23 +23667,16 @@ styled-jsx@5.0.4:
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.4.tgz#5b1bd0b9ab44caae3dd1361295559706e044aa53"
   integrity sha512-sDFWLbg4zR+UkNzfk5lPilyIgtpddfxXEULxhujorr5jtePTUqiPDc5BC0v1NRqTr/WaFBGQQUoYToGlF4B2KQ==
 
+styled-jsx@5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.7.tgz#be44afc53771b983769ac654d355ca8d019dff48"
+  integrity sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA==
+
 stylis@4.0.13:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
   integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
 
-sucrase@^3.20.0:
-  version "3.28.0"
-  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.28.0.tgz#7fd8b3118d2155fcdf291088ab77fa6eefd63c4c"
-  integrity sha512-TK9600YInjuiIhVM3729rH4ZKPOsGeyXUwY+Ugu9eilNbdTFyHr6XcAGYbRVZPDgWj6tgI7bx95aaJjHnbffag==
-  dependencies:
-    commander "^4.0.0"
-    glob "7.1.6"
-    lines-and-columns "^1.1.6"
-    mz "^2.7.0"
-    pirates "^4.0.1"
-    ts-interface-checker "^0.1.9"
-
 superagent@^5.1.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/superagent/-/superagent-5.3.1.tgz#d62f3234d76b8138c1320e90fa83dc1850ccabf1"
@@ -23442,6 +23950,35 @@ tailwindcss@^3.1.8:
     quick-lru "^5.1.1"
     resolve "^1.22.1"
 
+tailwindcss@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.1.tgz#1bd828fff3172489962357f8d531c184080a6786"
+  integrity sha512-Uw+GVSxp5CM48krnjHObqoOwlCt5Qo6nw1jlCRwfGy68dSYb/LwS9ZFidYGRiM+w6rMawkZiu1mEMAsHYAfoLg==
+  dependencies:
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    color-name "^1.1.4"
+    detective "^5.2.1"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.2.12"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    lilconfig "^2.0.6"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.17"
+    postcss-import "^14.1.0"
+    postcss-js "^4.0.0"
+    postcss-load-config "^3.1.4"
+    postcss-nested "6.0.0"
+    postcss-selector-parser "^6.0.10"
+    postcss-value-parser "^4.2.0"
+    quick-lru "^5.1.1"
+    resolve "^1.22.1"
+
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -23547,7 +24084,18 @@ terser-webpack-plugin@^4.2.3:
     terser "^5.3.4"
     webpack-sources "^1.4.3"
 
-terser-webpack-plugin@^5.0.3, terser-webpack-plugin@^5.1.3:
+terser-webpack-plugin@^5.0.3:
+  version "5.3.6"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.6.tgz#5590aec31aa3c6f771ce1b1acca60639eab3195c"
+  integrity sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.14"
+    jest-worker "^27.4.5"
+    schema-utils "^3.1.1"
+    serialize-javascript "^6.0.0"
+    terser "^5.14.1"
+
+terser-webpack-plugin@^5.1.3:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.3.tgz#8033db876dd5875487213e87c627bca323e5ed90"
   integrity sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ==
@@ -23567,7 +24115,17 @@ terser@^4.1.2, terser@^4.6.3:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
-terser@^5.10.0, terser@^5.3.4, terser@^5.7.2:
+terser@^5.10.0, terser@^5.14.1:
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.15.1.tgz#8561af6e0fd6d839669c73b92bdd5777d870ed6c"
+  integrity sha512-K1faMUvpm/FBxjBXud0LWVAGxmvoPbZbfTCYbSgaaYQaIXI3/TdI7a7ZGA73Zrou6Q8Zmz3oeUTsp/dj+ag2Xw==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.2"
+    acorn "^8.5.0"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
+terser@^5.3.4, terser@^5.7.2:
   version "5.14.1"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.14.1.tgz#7c95eec36436cb11cf1902cc79ac564741d19eca"
   integrity sha512-+ahUAE+iheqBTDxXhTisdA8hgvbEG1hHOQ9xmNjeUJSoi6DU/gMrKNcfZjHkyY6Alnuyc+ikYJaxxfHkT3+WuQ==
@@ -23615,11 +24173,6 @@ thirty-two@^1.0.2:
   resolved "https://registry.yarnpkg.com/thirty-two/-/thirty-two-1.0.2.tgz#4ca2fffc02a51290d2744b9e3f557693ca6b627a"
   integrity sha1-TKL//AKlEpDSdEueP1V2k8prYno=
 
-throttle-debounce@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
-  integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
-
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -23871,11 +24424,6 @@ ts-essentials@^7.0.3:
   resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-7.0.3.tgz#686fd155a02133eedcc5362dc8b5056cde3e5a38"
   integrity sha512-8+gr5+lqO3G84KdiTSMRLtuyJ+nTBVRKuCrK4lidMPdVeEp0uqC875uE5NMcaA7YYMN7XsNiFQuMvasF8HT/xQ==
 
-ts-interface-checker@^0.1.9:
-  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
-  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
-
 ts-jest@^28.0.8:
   version "28.0.8"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-28.0.8.tgz#cd204b8e7a2f78da32cf6c95c9a6165c5b99cc73"
@@ -23922,16 +24470,16 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tsconfig-paths-webpack-plugin@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-3.5.2.tgz#01aafff59130c04a8c4ebc96a3045c43c376449a"
-  integrity sha512-EhnfjHbzm5IYI9YPNVIxx1moxMI4bpHD2e0zTXeDNQcwjjRaGepP7IhTHJkyDBG0CAOoxRfe7jCG630Ou+C6Pw==
+tsconfig-paths-webpack-plugin@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-4.0.0.tgz#84008fc3e3e0658fdb0262758b07b4da6265ff1a"
+  integrity sha512-fw/7265mIWukrSHd0i+wSwx64kYUSAKPfxRDksjKIYTxSAp9W9/xcZVBF4Kl0eqQd5eBpAQ/oQrc5RyM/0c1GQ==
   dependencies:
     chalk "^4.1.0"
     enhanced-resolve "^5.7.0"
-    tsconfig-paths "^3.9.0"
+    tsconfig-paths "^4.0.0"
 
-tsconfig-paths@^3.14.1, tsconfig-paths@^3.9.0:
+tsconfig-paths@^3.14.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
   integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
@@ -24269,6 +24817,11 @@ typeorm@0.3.10:
     xml2js "^0.4.23"
     yargs "^17.3.1"
 
+typescript@^4.6.4:
+  version "4.8.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"
+  integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
+
 typescript@^4.7.4:
   version "4.7.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
@@ -24618,6 +25171,14 @@ update-browserslist-db@^1.0.5:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+update-browserslist-db@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"
+  integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 update-input-width@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/update-input-width/-/update-input-width-1.2.2.tgz#9a6a35858ae8e66fbfe0304437b23a4934fc7d37"
@@ -24963,6 +25524,18 @@ vite@^2.9.15:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vite@^3.1.0:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-3.1.8.tgz#fa29144167d19b773baffd65b3972ea4c12359c9"
+  integrity sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==
+  dependencies:
+    esbuild "^0.15.9"
+    postcss "^8.4.16"
+    resolve "^1.22.1"
+    rollup "~2.78.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
@@ -25032,7 +25605,7 @@ watchpack@^1.7.4:
     chokidar "^3.4.1"
     watchpack-chokidar2 "^2.0.1"
 
-watchpack@^2.2.0, watchpack@^2.3.1:
+watchpack@^2.2.0, watchpack@^2.3.1, watchpack@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
   integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
@@ -25376,7 +25949,7 @@ webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-"webpack-sources@^2.0.0 || ^3.0.0", webpack-sources@^3.2.3:
+webpack-sources@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
@@ -25389,9 +25962,9 @@ webpack-virtual-modules@^0.2.2:
     debug "^3.0.0"
 
 webpack-virtual-modules@^0.4.1:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.4.tgz#a19fcf371923c59c4712d63d7d194b1e4d8262cc"
-  integrity sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.6.tgz#3e4008230731f1db078d9cb6f68baf8571182b45"
+  integrity sha512-5tyDlKLqPfMqjT3Q9TAqf2YqjwmnUleZwzJi1A5qXnlBCdj2AtOJ6wAWdglTIDOPgOiOrXeBeFcsQ8+aGQ6QbA==
 
 webpack@4:
   version "4.46.0"
@@ -25422,7 +25995,7 @@ webpack@4:
     watchpack "^1.7.4"
     webpack-sources "^1.4.1"
 
-"webpack@>=4.43.0 <6.0.0", webpack@^5.9.0:
+"webpack@>=4.43.0 <6.0.0":
   version "5.73.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.73.0.tgz#bbd17738f8a53ee5760ea2f59dce7f3431d35d38"
   integrity sha512-svjudQRPPa0YiOYa2lM/Gacw0r6PvxptHj4FuEKQ2kX05ZLkjbVc5MnPs6its5j7IZljnIqSVo/OsY2X0IpHGA==
@@ -25452,6 +26025,36 @@ webpack@4:
     watchpack "^2.3.1"
     webpack-sources "^3.2.3"
 
+webpack@^5.9.0:
+  version "5.74.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.74.0.tgz#02a5dac19a17e0bb47093f2be67c695102a55980"
+  integrity sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==
+  dependencies:
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^0.0.51"
+    "@webassemblyjs/ast" "1.11.1"
+    "@webassemblyjs/wasm-edit" "1.11.1"
+    "@webassemblyjs/wasm-parser" "1.11.1"
+    acorn "^8.7.1"
+    acorn-import-assertions "^1.7.6"
+    browserslist "^4.14.5"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.10.0"
+    es-module-lexer "^0.9.0"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.9"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.1.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.1.3"
+    watchpack "^2.4.0"
+    webpack-sources "^3.2.3"
+
 websocket@^1.0.32:
   version "1.0.34"
   resolved "https://registry.yarnpkg.com/websocket/-/websocket-1.0.34.tgz#2bdc2602c08bf2c82253b730655c0ef7dcab3111"