From 8071016848c62230a0f337d8164fc32ea9155644 Mon Sep 17 00:00:00 2001
From: zomars <zomars@me.com>
Date: Mon, 14 Aug 2023 17:42:10 -0700
Subject: [PATCH] chore: prettier

---
 .../workflows/apply-issue-labels-to-pr.yml    |   5 +-
 .github/workflows/check-if-ui-has-changed.yml |   2 +-
 .github/workflows/e2e.yml                     |   2 +-
 .github/workflows/release-docker.yaml         |   4 +-
 .github/workflows/semantic-pull-requests.yml  |   8 +-
 .gitpod.yml                                   |   2 +-
 apps/api/test/docker-compose.yml              |   6 +-
 apps/storybook/.storybook/preview-head.html   |   8 +-
 apps/storybook/intro.stories.mdx              |  22 +-
 apps/storybook/styles/storybook-styles.css    | 108 ++++-----
 apps/swagger/styles/globals.css               |  25 +-
 apps/web/styles/globals.css                   |  22 +-
 apps/web/test/docker-compose.yml              |   6 +-
 crowdin.yml                                   | 193 ++++++++-------
 inlang.config.js                              |  34 ++-
 packages/app-store-cli/src/constants.ts       |   4 +-
 .../react-awesome-query-builder/styles.css    |   1 -
 packages/app-store/skiff/config.json          |   6 +-
 packages/atoms/booker/booker.stories.mdx      |  10 +-
 packages/atoms/globals.css                    |   2 +-
 packages/config/theme/colors.css              |  80 +++---
 packages/debugging/package.json               |  10 +-
 packages/debugging/tsconfig.json              |  27 +--
 packages/emails/docker-compose.yml            |   4 +-
 packages/embeds/embed-core/preview.html       |   2 +-
 packages/embeds/embed-core/src/loader.css     |   4 +-
 packages/embeds/embed-core/src/styles.css     |  13 +-
 .../event-meta/EventMeta.stories.mdx          |  46 ++--
 .../components/calendar.stories.mdx           |  49 ++--
 .../calendars/weeklyview/styles/styles.css    |  10 +-
 .../features/insights/filters/DateSelect.css  |  40 +--
 .../schedules/components/Schedule.tsx         |   2 +-
 .../TokenHandler/tokenhandler.stories.mdx     |  17 +-
 .../ui/components/alert/alert.stories.mdx     |  63 +++--
 .../ui/components/apps/Categories.stories.mdx |  18 +-
 .../ui/components/avatar/avatar.stories.mdx   | 228 ++++++++++--------
 .../ui/components/badge/badge.stories.mdx     |  84 ++++---
 .../breadcrumb/breadcrumb.stories.mdx         |  16 +-
 .../ui/components/button/button.stories.mdx   | 216 ++++++++++-------
 .../buttonGroup/buttongroup.stories.mdx       |  86 ++++---
 packages/ui/components/card/card.stories.mdx  |  71 +++---
 .../ui/components/credits/credits.stories.mdx |  22 +-
 .../__storybook__/datatable.stories.mdx       |  10 +-
 .../ui/components/divider/divider.stories.mdx |  24 +-
 .../ui/components/editor/stylesEditor.css     |  22 +-
 .../empty-screen/empty-screen.stories.mdx     |  35 ++-
 .../form/checkbox/checkbox.stories.mdx        | 116 +++++----
 .../components/form/inputs/inputs.stories.mdx |  79 +++---
 .../components/form/select/select.stories.mdx | 106 ++++----
 .../ui/components/layout/spacing.stories.mdx  |  20 +-
 packages/ui/components/list/list.stories.mdx  |  26 +-
 packages/ui/components/logo/logo.stories.mdx  |  23 +-
 .../ui/components/sheet/sheet.stories.mdx     |  36 ++-
 .../components/skeleton/skeleton.stories.mdx  |  31 ++-
 .../ui/components/toast/toast.stories.mdx     |  53 ++--
 .../ui/components/tooltip/tooltip.stories.mdx |  99 ++++----
 .../top-banner/topbanner.stories.mdx          | 141 ++++++-----
 57 files changed, 1309 insertions(+), 1090 deletions(-)

diff --git a/.github/workflows/apply-issue-labels-to-pr.yml b/.github/workflows/apply-issue-labels-to-pr.yml
index c68e332a3c..3299b591a8 100644
--- a/.github/workflows/apply-issue-labels-to-pr.yml
+++ b/.github/workflows/apply-issue-labels-to-pr.yml
@@ -5,16 +5,15 @@ on:
     types:
       - opened
 
-
 jobs:
   label_on_pr:
     runs-on: ubuntu-latest
-    
+
     permissions:
       contents: none
       issues: read
       pull-requests: write
-    
+
     steps:
       - name: Apply labels from linked issue to PR
         uses: actions/github-script@v5
diff --git a/.github/workflows/check-if-ui-has-changed.yml b/.github/workflows/check-if-ui-has-changed.yml
index d86ee998cd..0aa91d974d 100644
--- a/.github/workflows/check-if-ui-has-changed.yml
+++ b/.github/workflows/check-if-ui-has-changed.yml
@@ -1,7 +1,7 @@
 # .github/workflows/chromatic.yml
 
 # Workflow name
-name: 'Chromatic'
+name: "Chromatic"
 
 # Event for the workflow
 on:
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 2024c6b315..d4c41d2c6c 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -44,7 +44,7 @@ jobs:
           EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
           EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
           EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
-          EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD}} 
+          EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD}}
           GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
           NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
           NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
diff --git a/.github/workflows/release-docker.yaml b/.github/workflows/release-docker.yaml
index ddbc4ea657..d0689419a0 100644
--- a/.github/workflows/release-docker.yaml
+++ b/.github/workflows/release-docker.yaml
@@ -8,7 +8,7 @@ on: # yamllint disable-line rule:truthy
   workflow_dispatch:
     inputs:
       RELEASE_TAG:
-        description: 'v{Major}.{Minor}.{Patch}'
+        description: "v{Major}.{Minor}.{Patch}"
 
 jobs:
   release:
@@ -21,7 +21,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: "Determine tag"
-        run: "echo \"RELEASE_TAG=${GITHUB_REF#refs/tags/}\" >> $GITHUB_ENV"
+        run: 'echo "RELEASE_TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV'
 
       - name: "Run remote release workflow"
         uses: "actions/github-script@v6"
diff --git a/.github/workflows/semantic-pull-requests.yml b/.github/workflows/semantic-pull-requests.yml
index cda43d3ba8..7ae42b4532 100644
--- a/.github/workflows/semantic-pull-requests.yml
+++ b/.github/workflows/semantic-pull-requests.yml
@@ -29,11 +29,11 @@ jobs:
           header: pr-title-lint-error
           message: |
             Hey there and thank you for opening this pull request! 👋🏼
-            
+
             We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.
 
             Details:
-            
+
             ```
             ${{ steps.lint_pr_title.outputs.error_message }}
             ```
@@ -41,7 +41,7 @@ jobs:
       # Delete a previous comment when the issue has been resolved
       - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
         uses: marocchino/sticky-pull-request-comment@v2
-        with:   
+        with:
           header: pr-title-lint-error
           message: |
-            Thank you for following the naming conventions! 🙏 
+            Thank you for following the naming conventions! 🙏
diff --git a/.gitpod.yml b/.gitpod.yml
index 027cfc2798..91f5198b85 100644
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -40,4 +40,4 @@ vscode:
     - bradlc.vscode-tailwindcss
     - ban.spellright
     - stripe.vscode-stripe
-    - Prisma.prisma
\ No newline at end of file
+    - Prisma.prisma
diff --git a/apps/api/test/docker-compose.yml b/apps/api/test/docker-compose.yml
index 769adab097..661e7609a0 100644
--- a/apps/api/test/docker-compose.yml
+++ b/apps/api/test/docker-compose.yml
@@ -1,5 +1,5 @@
 # Set the version of docker compose to use
-version: '3.9'
+version: "3.9"
 
 # The containers that compose the project
 services:
@@ -8,8 +8,8 @@ services:
     restart: always
     container_name: integration-tests-prisma
     ports:
-      - '5433:5432'
+      - "5433:5432"
     environment:
       POSTGRES_USER: prisma
       POSTGRES_PASSWORD: prisma
-      POSTGRES_DB: tests
\ No newline at end of file
+      POSTGRES_DB: tests
diff --git a/apps/storybook/.storybook/preview-head.html b/apps/storybook/.storybook/preview-head.html
index ad4b6e8996..01db330607 100644
--- a/apps/storybook/.storybook/preview-head.html
+++ b/apps/storybook/.storybook/preview-head.html
@@ -1,9 +1,9 @@
 <script>
   window.global = window;
-  window.isEmbed = ()=> {
-    return location.search.includes("embed=")
-  }
+  window.isEmbed = () => {
+    return location.search.includes("embed=");
+  };
 </script>
 <style>
-  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
+  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
 </style>
diff --git a/apps/storybook/intro.stories.mdx b/apps/storybook/intro.stories.mdx
index bac9969906..413564c8d2 100644
--- a/apps/storybook/intro.stories.mdx
+++ b/apps/storybook/intro.stories.mdx
@@ -1,11 +1,21 @@
-import { Meta } from '@storybook/addon-docs';
+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 improvements 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 className="flex flex-col items-center text-center">
+  <h1 style={{ marginBottom: "24px", marginTop: "36px" }}>Welcome to Cal.com UI</h1>
+  <p>
+    This is the beginning of our storybook improvements 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
+<img src="/sb-cover.jpg" />
diff --git a/apps/storybook/styles/storybook-styles.css b/apps/storybook/styles/storybook-styles.css
index 6f6752ea2f..2f188d1668 100644
--- a/apps/storybook/styles/storybook-styles.css
+++ b/apps/storybook/styles/storybook-styles.css
@@ -1,8 +1,8 @@
 @import url("../../../packages/features/calendars/weeklyview/styles/styles.css");
 
 .sbdocs {
-  font-family: 'Inter var' !important;
-  padding: 0!important;
+  font-family: "Inter var" !important;
+  padding: 0 !important;
 }
 
 #docs-root {
@@ -21,8 +21,8 @@
   font-weight: 500;
   border: none;
   border-top: 2px solid rgba(0, 0, 0, 0.12);
-  padding-top: 12px!important;
-  padding-bottom: 12px!important;
+  padding-top: 12px !important;
+  padding-bottom: 12px !important;
   margin: 82px 0 0 0;
 }
 
@@ -37,7 +37,7 @@
 }
 
 /** Docs table **/
-.custom-args-wrapper{
+.custom-args-wrapper {
   max-height: 400px;
   overflow-y: scroll;
   overflow-x: hidden;
@@ -45,7 +45,7 @@
 }
 
 .docblock-argstable-body {
-  box-shadow: none!important;
+  box-shadow: none !important;
   font-size: 14px;
 }
 
@@ -64,7 +64,7 @@
 
 .docblock-argstable-body div p,
 .docblock-argstable-body div span {
-  color: #8F8F8F !important;
+  color: #8f8f8f !important;
 }
 
 /** Custom components **/
@@ -83,8 +83,8 @@
 }
 
 .story-title h1 span {
-  color: #9CA3AF;
-  font-family: 'Inter var';
+  color: #9ca3af;
+  font-family: "Inter var";
   font-weight: normal;
   display: inline-block;
   margin-left: 8px;
@@ -96,7 +96,7 @@
 }
 
 .examples {
-  background-color: #F9FAFB;
+  background-color: #f9fafb;
   padding: 20px;
   display: flex;
   flex-direction: column;
@@ -111,14 +111,14 @@
 }
 
 .examples-title {
-  color: #8F8F8F;
+  color: #8f8f8f;
   font-size: 14px;
   margin-bottom: 30px;
 }
 
 .examples-item-title {
   font-size: 12px;
-  color: #8F8F8F;
+  color: #8f8f8f;
   margin-bottom: 12px;
   display: block;
 }
@@ -130,7 +130,7 @@
 .examples-footnote p,
 .examples-footnote ul,
 .examples-footnote li {
-  color: #8F8F8F;
+  color: #8f8f8f;
   font-size: 14px;
 }
 
@@ -139,11 +139,11 @@
 }
 
 .examples-footnote li {
-  margin: 0!important;
+  margin: 0 !important;
 }
 
 .story-note {
-  background-color: #F9FAFB;
+  background-color: #f9fafb;
   font-size: 14px;
   padding: 20px;
   margin-bottom: 12px;
@@ -161,12 +161,12 @@
   box-shadow: none !important;
   margin: 0 !important;
   border: none !important;
-  border-radius: none!important;
+  border-radius: none !important;
 }
 
 .docs-story > div:first-child {
-  padding: 0!important;
-  margin: 0!important;
+  padding: 0 !important;
+  margin: 0 !important;
 }
 
 .docs-story .innerZoomElementWrapper > div {
@@ -174,7 +174,7 @@
 }
 
 .sb-main-padded {
-  padding: 0!important;
+  padding: 0 !important;
 }
 
 @media screen and (max-width: 1200px) {
@@ -198,74 +198,72 @@
   :root {
     /* background */
 
-    --cal-bg-emphasis: #E5E7EB;
+    --cal-bg-emphasis: #e5e7eb;
     --cal-bg: white;
-    --cal-bg-subtle: #F3F4F6;
-    --cal-bg-muted: #F9FAFB;
+    --cal-bg-subtle: #f3f4f6;
+    --cal-bg-muted: #f9fafb;
     --cal-bg-inverted: #111827;
 
     /* background -> components*/
-    --cal-bg-info: #DEE9FC;
-    --cal-bg-success: #E2FBE8;
-    --cal-bg-attention: #FCEED8;
-    --cal-bg-error: #F9E3E2;
+    --cal-bg-info: #dee9fc;
+    --cal-bg-success: #e2fbe8;
+    --cal-bg-attention: #fceed8;
+    --cal-bg-error: #f9e3e2;
     --cal-bg-dark-error: #752522;
 
-
     /* Borders */
-    --cal-border-emphasis:#9CA3AF;
-    --cal-border: #D1D5DB;
-    --cal-border-subtle:#E5E7EB;
-    --cal-border-muted:#F3F4F6;
+    --cal-border-emphasis: #9ca3af;
+    --cal-border: #d1d5db;
+    --cal-border-subtle: #e5e7eb;
+    --cal-border-muted: #f3f4f6;
     --cal-border-error: #aa2e26;
 
     /* Content/Text */
     --cal-text-emphasis: #111827;
-    --cal-text:#374151;
-    --cal-text-subtle:#6B7280;
-    --cal-text-muted:#9CA3AF;
-    --cal-text-inverted:white;
+    --cal-text: #374151;
+    --cal-text-subtle: #6b7280;
+    --cal-text-muted: #9ca3af;
+    --cal-text-inverted: white;
 
     /* Content/Text -> components */
-    --cal-text-info:#253985;
-    --cal-text-success:#285231;
-    --cal-text-attention:#73321B;
-    --cal-text-error:#752522;
+    --cal-text-info: #253985;
+    --cal-text-success: #285231;
+    --cal-text-attention: #73321b;
+    --cal-text-error: #752522;
 
     /* Brand shinanigans
       -> These will be computed for the users theme at runtime.
     */
-    --cal-brand:#111827;
-    --cal-brand-emphasis:#101010;
+    --cal-brand: #111827;
+    --cal-brand-emphasis: #101010;
     --cal-brand-text: white;
   }
   .dark {
     /* background */
 
-    --cal-bg-emphasis: #2B2B2B;
+    --cal-bg-emphasis: #2b2b2b;
     --cal-bg: #101010;
-    --cal-bg-subtle: #2B2B2B;
-    --cal-bg-muted: #1C1C1C;
-    --cal-bg-inverted: #F3F4F6;
+    --cal-bg-subtle: #2b2b2b;
+    --cal-bg-muted: #1c1c1c;
+    --cal-bg-inverted: #f3f4f6;
 
     /* background -> components*/
-    --cal-bg-info: #DEE9FC;
-    --cal-bg-success: #E2FBE8;
-    --cal-bg-attention: #FCEED8;
-    --cal-bg-error: #F9E3E2;
+    --cal-bg-info: #dee9fc;
+    --cal-bg-success: #e2fbe8;
+    --cal-bg-attention: #fceed8;
+    --cal-bg-error: #f9e3e2;
     --cal-bg-dark-error: #752522;
 
-
     /* Borders */
     --cal-border-emphasis: #575757;
     --cal-border: #444444;
-    --cal-border-subtle: #2B2B2B;
-    --cal-border-muted: #1C1C1C;
+    --cal-border-subtle: #2b2b2b;
+    --cal-border-muted: #1c1c1c;
     --cal-border-error: #aa2e26;
 
     /* Content/Text */
-    --cal-text-emphasis: #F3F4F6;
-    --cal-text: #D6D6D6;
+    --cal-text-emphasis: #f3f4f6;
+    --cal-text: #d6d6d6;
     --cal-text-subtle: #757575;
     --cal-text-muted: #575757;
     --cal-text-inverted: #101010;
@@ -273,7 +271,7 @@
     /* Content/Text -> components */
     --cal-text-info: #253985;
     --cal-text-success: #285231;
-    --cal-text-attention: #73321B;
+    --cal-text-attention: #73321b;
     --cal-text-error: #752522;
 
     /* Brand shenanigans
diff --git a/apps/swagger/styles/globals.css b/apps/swagger/styles/globals.css
index 52d33738c5..f89757a3f9 100644
--- a/apps/swagger/styles/globals.css
+++ b/apps/swagger/styles/globals.css
@@ -2,8 +2,8 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
+    Droid Sans, Helvetica Neue, sans-serif;
 }
 
 a {
@@ -21,7 +21,7 @@ a {
   }
   .swagger-ui .opblock .opblock-summary {
     display: grid;
-  flex-direction: column;
+    flex-direction: column;
   }
   .opblock-summary-path {
     flex-shrink: 0;
@@ -43,22 +43,22 @@ a {
     font-size: 22px;
   }
   .swagger-ui .scheme-container {
-  padding: 14px 0;
+    padding: 14px 0;
   }
   .swagger-ui .info {
-      margin: 10px 0;
+    margin: 10px 0;
   }
   .swagger-ui .auth-wrapper {
     margin: 10px 0;
   }
   .swagger-ui .authorization__btn {
-  display: none;
+    display: none;
   }
   .swagger-ui .opblock {
     margin: 0 0 5px;
   }
   button.opblock-summary-control > svg {
-    display: none;  
+    display: none;
   }
   .swagger-ui .filter .operation-filter-input {
     border: 2px solid #d8dde7;
@@ -73,15 +73,16 @@ a {
   .swagger-ui .info .title small {
     top: 5px;
   }
-  .swagger-ui a.nostyle, .swagger-ui a.nostyle:visited {
+  .swagger-ui a.nostyle,
+  .swagger-ui a.nostyle:visited {
     width: 100%;
   }
   div.request-snippets > div.curl-command > div:nth-child(1) {
     overscroll-behavior: contain;
     overflow-x: scroll;
   }
-  .swagger-ui .opblock-body pre.microlight {  
-    font-size: 9px; 
+  .swagger-ui .opblock-body pre.microlight {
+    font-size: 9px;
   }
   .swagger-ui table tbody tr td {
     padding: 0px 0 0;
@@ -91,7 +92,7 @@ a {
     font-size: 12px;
   }
   div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > tbody > tr {
-        display: flex;
+    display: flex;
     width: 100vw;
     flex-direction: column;
     font-size: 60%;
@@ -99,4 +100,4 @@ a {
   div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > thead > tr {
     display: none;
   }
-}
\ No newline at end of file
+}
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index ae2842477b..cd8dbcdb6b 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -75,7 +75,7 @@
   /* Content/Text */
   --cal-text-emphasis: #f3f4f6;
   --cal-text: #d6d6d6;
-  --cal-text-subtle: #A5a5a5;
+  --cal-text-subtle: #a5a5a5;
   --cal-text-muted: #575757;
   --cal-text-inverted: #101010;
 
@@ -100,7 +100,7 @@
 
 ::selection {
   color: var(--cal-brand-text);
-   background: var(--cal-brand);
+  background: var(--cal-brand);
 }
 
 body  {
@@ -108,8 +108,6 @@ body  {
   -webkit-font-smoothing: antialiased;
 }
 
-
-
 /*
   Desktop App specific CSS
     https://docs.todesktop.com/
@@ -170,17 +168,17 @@ html.todesktop aside {
   margin: 0px -6px;
 }
 
-html.todesktop-platform-darwin .desktop-transparent{
+html.todesktop-platform-darwin .desktop-transparent {
   background: transparent !important;
   border: none !important;
 }
 
-html.todesktop-platform-darwin.dark main.bg-default{
-  background: rgba(0,0,0,0.6) !important
+html.todesktop-platform-darwin.dark main.bg-default {
+  background: rgba(0, 0, 0, 0.6) !important;
 }
 
-html.todesktop-platform-darwin.light main.bg-default{
-  background: rgba(255,255,255,0.8) !important
+html.todesktop-platform-darwin.light main.bg-default {
+  background: rgba(255, 255, 255, 0.8) !important;
 }
 
 /*
@@ -247,13 +245,10 @@ select:focus {
   border-color: var(--brand-color);
 }
 
-
 @layer components {
   .scroll-bar {
     @apply scrollbar-thin scrollbar-thumb-rounded-md dark:scrollbar-thumb-darkgray-300 scrollbar-thumb-gray-300 scrollbar-track-transparent;
   }
-
-
 }
 
 /* TODO: avoid global specific css */
@@ -261,7 +256,6 @@ select:focus {
   transform: translateX(16px);
 } */
 
-
 @layer components {
   /* slider */
   .slider {
@@ -512,5 +506,5 @@ select:focus {
 }
 
 .react-tel-input .flag-dropdown {
-  @apply !border-r-default !border-y-0 !border-l-0 left-0.5;
+  @apply !border-r-default left-0.5 !border-y-0 !border-l-0;
 }
diff --git a/apps/web/test/docker-compose.yml b/apps/web/test/docker-compose.yml
index 769adab097..661e7609a0 100644
--- a/apps/web/test/docker-compose.yml
+++ b/apps/web/test/docker-compose.yml
@@ -1,5 +1,5 @@
 # Set the version of docker compose to use
-version: '3.9'
+version: "3.9"
 
 # The containers that compose the project
 services:
@@ -8,8 +8,8 @@ services:
     restart: always
     container_name: integration-tests-prisma
     ports:
-      - '5433:5432'
+      - "5433:5432"
     environment:
       POSTGRES_USER: prisma
       POSTGRES_PASSWORD: prisma
-      POSTGRES_DB: tests
\ No newline at end of file
+      POSTGRES_DB: tests
diff --git a/crowdin.yml b/crowdin.yml
index 1434e029f2..88a3f8a735 100644
--- a/crowdin.yml
+++ b/crowdin.yml
@@ -1,10 +1,10 @@
 #
 # Your Crowdin credentials
 #
-"project_id_env" : "CROWDIN_PROJECT_ID"
-"api_token_env" : "CROWDIN_PERSONAL_TOKEN"
-"base_path" : "."
-"base_url" : "https://cal.crowdin.com"
+"project_id_env": "CROWDIN_PROJECT_ID"
+"api_token_env": "CROWDIN_PERSONAL_TOKEN"
+"base_path": "."
+"base_url": "https://cal.crowdin.com"
 
 #
 # Choose file structure in Crowdin
@@ -16,112 +16,111 @@
 # Files configuration
 #
 files: [
- {
-  #
-  # Source files filter
-  # e.g. "/resources/en/*.json"
-  #
-  "source" : "/apps/web/public/static/locales/en/common.json",
+    {
+      #
+      # Source files filter
+      # e.g. "/resources/en/*.json"
+      #
+      "source": "/apps/web/public/static/locales/en/common.json",
 
-  #
-  # Where translations will be placed
-  # e.g. "/resources/%two_letters_code%/%original_file_name%"
-  #
-  "translation" : "/apps/web/public/static/locales/%two_letters_code%/%original_file_name%",
+      #
+      # Where translations will be placed
+      # e.g. "/resources/%two_letters_code%/%original_file_name%"
+      #
+      "translation": "/apps/web/public/static/locales/%two_letters_code%/%original_file_name%",
+      #
+      # Files or directories for ignore
+      # e.g. ["/**/?.txt", "/**/[0-9].txt", "/**/*\?*.txt"]
+      #
+      #"ignore" : [],
 
-  #
-  # Files or directories for ignore
-  # e.g. ["/**/?.txt", "/**/[0-9].txt", "/**/*\?*.txt"]
-  #
-  #"ignore" : [],
+      #
+      # The dest allows you to specify a file name in Crowdin
+      # e.g. "/messages.json"
+      #
+      #"dest" : "",
 
-  #
-  # The dest allows you to specify a file name in Crowdin
-  # e.g. "/messages.json"
-  #
-  #"dest" : "",
+      #
+      # File type
+      # e.g. "json"
+      #
+      #"type" : "",
 
-  #
-  # File type
-  # e.g. "json"
-  #
-  #"type" : "",
+      #
+      # The parameter "update_option" is optional. If it is not set, after the files update the translations for changed strings will be removed. Use to fix typos and for minor changes in the source strings
+      # e.g. "update_as_unapproved" or "update_without_changes"
+      #
+      #"update_option" : "",
 
-  #
-  # The parameter "update_option" is optional. If it is not set, after the files update the translations for changed strings will be removed. Use to fix typos and for minor changes in the source strings
-  # e.g. "update_as_unapproved" or "update_without_changes"
-  #
-  #"update_option" : "",
+      #
+      # Start block (for XML only)
+      #
 
-  #
-  # Start block (for XML only)
-  #
+      #
+      # Defines whether to translate tags attributes.
+      # e.g. 0 or 1  (Default is 1)
+      #
+      # "translate_attributes" : 1,
 
-  #
-  # Defines whether to translate tags attributes.
-  # e.g. 0 or 1  (Default is 1)
-  #
-  # "translate_attributes" : 1,
+      #
+      # Defines whether to translate texts placed inside the tags.
+      # e.g. 0 or 1 (Default is 1)
+      #
+      # "translate_content" : 1,
 
-  #
-  # Defines whether to translate texts placed inside the tags.
-  # e.g. 0 or 1 (Default is 1)
-  #
-  # "translate_content" : 1,
+      #
+      # This is an array of strings, where each item is the XPaths to DOM element that should be imported
+      # e.g. ["/content/text", "/content/text[@value]"]
+      #
+      # "translatable_elements" : [],
 
-  #
-  # This is an array of strings, where each item is the XPaths to DOM element that should be imported
-  # e.g. ["/content/text", "/content/text[@value]"]
-  #
-  # "translatable_elements" : [],
+      #
+      # Defines whether to split long texts into smaller text segments
+      # e.g. 0 or 1 (Default is 1)
+      #
+      # "content_segmentation" : 1,
 
-  #
-  # Defines whether to split long texts into smaller text segments
-  # e.g. 0 or 1 (Default is 1)
-  #
-  # "content_segmentation" : 1,
+      #
+      # End block (for XML only)
+      #
 
-  #
-  # End block (for XML only)
-  #
+      #
+      # Start .properties block
+      #
 
-  #
-  # Start .properties block
-  #
+      #
+      # Defines whether single quote should be escaped by another single quote or backslash in exported translations
+      # e.g. 0 or 1 or 2 or 3 (Default is 3)
+      # 0 - do not escape single quote;
+      # 1 - escape single quote by another single quote;
+      # 2 - escape single quote by backslash;
+      # 3 - escape single quote by another single quote only in strings containing variables ( {0} ).
+      #
+      # "escape_quotes" : 3,
 
-  #
-  # Defines whether single quote should be escaped by another single quote or backslash in exported translations
-  # e.g. 0 or 1 or 2 or 3 (Default is 3)
-  # 0 - do not escape single quote;
-  # 1 - escape single quote by another single quote;
-  # 2 - escape single quote by backslash;
-  # 3 - escape single quote by another single quote only in strings containing variables ( {0} ).
-  #
-  # "escape_quotes" : 3,
+      #
+      # Defines whether any special characters (=, :, ! and #) should be escaped by backslash in exported translations.
+      # e.g. 0 or 1 (Default is 0)
+      # 0 - do not escape special characters
+      # 1 - escape special characters by a backslash
+      #
+      # "escape_special_characters": 0
+      #
 
-  #
-  # Defines whether any special characters (=, :, ! and #) should be escaped by backslash in exported translations.
-  # e.g. 0 or 1 (Default is 0)
-  # 0 - do not escape special characters
-  # 1 - escape special characters by a backslash
-  #
-  # "escape_special_characters": 0
-  #
+      #
+      # End .properties block
+      #
 
-  #
-  # End .properties block
-  #
+      #
+      # Does the first line contain header?
+      # e.g. true or false
+      #
+      #"first_line_contains_header" : true,
 
-  #
-  # Does the first line contain header?
-  # e.g. true or false
-  #
-  #"first_line_contains_header" : true,
-
-  #
-  # for spreadsheets
-  # e.g. "identifier,source_phrase,context,uk,ru,fr"
-  #
-  # "scheme" : "",
- }
-]
+      #
+      # for spreadsheets
+      # e.g. "identifier,source_phrase,context,uk,ru,fr"
+      #
+      # "scheme" : "",
+    },
+  ]
diff --git a/inlang.config.js b/inlang.config.js
index 18c502705f..d35efde470 100644
--- a/inlang.config.js
+++ b/inlang.config.js
@@ -1,27 +1,25 @@
-
 // see https://inlang.com/
 export async function defineConfig(env) {
-
-	const { default: i18nextPlugin } = await env.$import(
-		"https://cdn.jsdelivr.net/npm/@inlang/plugin-i18next@2/dist/index.js",
-	)
+  const { default: i18nextPlugin } = await env.$import(
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-i18next@2/dist/index.js"
+  );
 
   const { default: standardLintRules } = await env.$import(
-		"https://cdn.jsdelivr.net/npm/@inlang/plugin-standard-lint-rules@3/dist/index.js",
-	)
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-standard-lint-rules@3/dist/index.js"
+  );
 
-	return {
-		referenceLanguage: "en",
-		plugins: [
-			i18nextPlugin({
-				pathPattern: "./apps/web/public/static/locales/{language}/common.json",
-			}),
+  return {
+    referenceLanguage: "en",
+    plugins: [
+      i18nextPlugin({
+        pathPattern: "./apps/web/public/static/locales/{language}/common.json",
+      }),
       standardLintRules({
         // deactivating identical pattern because of nested
         // resources like "de-DE" and "de-AT" where "de-AT"
-        // contrains overwrites but the majority are identical patterns. 
-        identicalPattern: "off"
+        // contrains overwrites but the majority are identical patterns.
+        identicalPattern: "off",
       }),
-		],
-	}
-}
\ No newline at end of file
+    ],
+  };
+}
diff --git a/packages/app-store-cli/src/constants.ts b/packages/app-store-cli/src/constants.ts
index f23c8ff97f..581af88f7f 100644
--- a/packages/app-store-cli/src/constants.ts
+++ b/packages/app-store-cli/src/constants.ts
@@ -1,6 +1,6 @@
-import path from "path";
 import os from "os";
+import path from "path";
 
 export const APP_STORE_PATH = path.join(__dirname, "..", "..", "app-store");
 export const TEMPLATES_PATH = path.join(APP_STORE_PATH, "templates");
-export const IS_WINDOWS_PLATFORM = os.platform() === "win32";
\ No newline at end of file
+export const IS_WINDOWS_PLATFORM = os.platform() === "win32";
diff --git a/packages/app-store/routing-forms/components/react-awesome-query-builder/styles.css b/packages/app-store/routing-forms/components/react-awesome-query-builder/styles.css
index fd222750a2..6503cbdf2a 100644
--- a/packages/app-store/routing-forms/components/react-awesome-query-builder/styles.css
+++ b/packages/app-store/routing-forms/components/react-awesome-query-builder/styles.css
@@ -56,7 +56,6 @@
   width: 100%;
 }
 
-
 .cal-query-builder .rule--drag-handler,
 .cal-query-builder .rule--header {
   display: flex;
diff --git a/packages/app-store/skiff/config.json b/packages/app-store/skiff/config.json
index be427cd353..16a26b592c 100644
--- a/packages/app-store/skiff/config.json
+++ b/packages/app-store/skiff/config.json
@@ -6,9 +6,7 @@
   "logo": "icon.svg",
   "url": "https://skiff.com/blog/skiff-cal-com-launch",
   "variant": "calendar",
-  "categories": [
-    "calendar"
-  ],
+  "categories": ["calendar"],
   "publisher": "Skiff World, Inc.",
   "email": "hello@skiff.org",
   "description": "End-to-end encrypted, private calendar, email, notes, and drive.",
@@ -16,4 +14,4 @@
   "__createdUsingCli": true,
   "__template": "link-as-an-app",
   "dirName": "skiff"
-}
\ No newline at end of file
+}
diff --git a/packages/atoms/booker/booker.stories.mdx b/packages/atoms/booker/booker.stories.mdx
index 1d89ee90fd..1a9021ec8e 100644
--- a/packages/atoms/booker/booker.stories.mdx
+++ b/packages/atoms/booker/booker.stories.mdx
@@ -1,11 +1,13 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Title } from '@calcom/storybook/components'
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import { Title } from "@calcom/storybook/components";
 import { Icon } from "@calcom/ui";
-import { Booker } from './Booker';
+
+import { Booker } from "./Booker";
 
 <Meta title="Atoms/Booker" component={Booker} />
 
-<Title title="Booker"/>
+<Title title="Booker" />
 
 <Canvas>
   <Story name="Booker">
diff --git a/packages/atoms/globals.css b/packages/atoms/globals.css
index 47e4bc917b..12686157f6 100644
--- a/packages/atoms/globals.css
+++ b/packages/atoms/globals.css
@@ -7,4 +7,4 @@
 @tailwind components;
 @tailwind utilities;
 
-@import "../ui/styles/shared-globals.css";
\ No newline at end of file
+@import "../ui/styles/shared-globals.css";
diff --git a/packages/config/theme/colors.css b/packages/config/theme/colors.css
index b2f6847d4b..528238f007 100644
--- a/packages/config/theme/colors.css
+++ b/packages/config/theme/colors.css
@@ -1,46 +1,44 @@
-
 :root {
   /* background */
 
-  --cal-bg-emphasis: #E5E7EB;
+  --cal-bg-emphasis: #e5e7eb;
   --cal-bg: white;
-  --cal-bg-subtle: #F3F4F6;
-  --cal-bg-muted: #F9FAFB;
+  --cal-bg-subtle: #f3f4f6;
+  --cal-bg-muted: #f9fafb;
   --cal-bg-inverted: #111827;
 
   /* background -> components*/
-  --cal-bg-info: #DEE9FC;
-  --cal-bg-success: #E2FBE8;
-  --cal-bg-attention: #FCEED8;
-  --cal-bg-error: #F9E3E2;
+  --cal-bg-info: #dee9fc;
+  --cal-bg-success: #e2fbe8;
+  --cal-bg-attention: #fceed8;
+  --cal-bg-error: #f9e3e2;
   --cal-bg-dark-error: #752522;
 
-
   /* Borders */
-  --cal-border-emphasis:#9CA3AF;
-  --cal-border: #D1D5DB;
-  --cal-border-subtle:#E5E7EB;
-  --cal-border-muted:#F3F4F6;
+  --cal-border-emphasis: #9ca3af;
+  --cal-border: #d1d5db;
+  --cal-border-subtle: #e5e7eb;
+  --cal-border-muted: #f3f4f6;
   --cal-border-error: #aa2e26;
 
   /* Content/Text */
   --cal-text-emphasis: #111827;
-  --cal-text:#374151;
-  --cal-text-subtle:#6B7280;
-  --cal-text-muted:#9CA3AF;
-  --cal-text-inverted:white;
+  --cal-text: #374151;
+  --cal-text-subtle: #6b7280;
+  --cal-text-muted: #9ca3af;
+  --cal-text-inverted: white;
 
   /* Content/Text -> components */
-  --cal-text-info:#253985;
-  --cal-text-success:#285231;
-  --cal-text-attention:#73321B;
-  --cal-text-error:#752522;
+  --cal-text-info: #253985;
+  --cal-text-success: #285231;
+  --cal-text-attention: #73321b;
+  --cal-text-error: #752522;
 
   /* Brand shenanigans
     -> These will be computed for the users theme at runtime.
   */
-  --cal-brand:#111827;
-  --cal-brand-emphasis:#101010;
+  --cal-brand: #111827;
+  --cal-brand-emphasis: #101010;
 }
 
 /* Darkmode Colors  -- TODO: WIP*/
@@ -54,37 +52,35 @@
   --cal-bg-inverted: #f3f4f6;
 
   /* background -> components*/
-  --cal-bg-info: #DEE9FC;
-  --cal-bg-success: #E2FBE8;
-  --cal-bg-attention: #FCEED8;
-  --cal-bg-error: #F9E3E2;
+  --cal-bg-info: #dee9fc;
+  --cal-bg-success: #e2fbe8;
+  --cal-bg-attention: #fceed8;
+  --cal-bg-error: #f9e3e2;
   --cal-bg-dark-error: #752522;
 
-
   /* Borders */
-  --cal-border-emphasis:#575757;
+  --cal-border-emphasis: #575757;
   --cal-border: #444444;
-  --cal-border-subtle:#2b2b2b;
-  --cal-border-muted:#1c1c1c;
+  --cal-border-subtle: #2b2b2b;
+  --cal-border-muted: #1c1c1c;
   --cal-border-error: #aa2e26;
 
   /* Content/Text */
   --cal-text-emphasis: #f3f4f6;
-  --cal-text:#d6d6d6;
-  --cal-text-subtle:#767676;
-  --cal-text-muted:#575757;
-  --cal-text-inverted:white;
+  --cal-text: #d6d6d6;
+  --cal-text-subtle: #767676;
+  --cal-text-muted: #575757;
+  --cal-text-inverted: white;
 
   /* Content/Text -> components */
-  --cal-text-info:#253985;
-  --cal-text-success:#285231;
-  --cal-text-attention:#73321B;
-  --cal-text-error:#752522;
+  --cal-text-info: #253985;
+  --cal-text-success: #285231;
+  --cal-text-attention: #73321b;
+  --cal-text-error: #752522;
 
   /* Brand shenanigans
     -> These will be computed for the users theme at runtime.
   */
-  --cal-brand:#111827;
-  --cal-brand-emphasis:#101010;
+  --cal-brand: #111827;
+  --cal-brand-emphasis: #101010;
 }
-
diff --git a/packages/debugging/package.json b/packages/debugging/package.json
index b28ba6534d..565c4e18b5 100644
--- a/packages/debugging/package.json
+++ b/packages/debugging/package.json
@@ -1,7 +1,7 @@
 {
-	"name": "@calcom/debugging",
-	"description": "Debugging utilities",
-	"private": true,
-	"version": "1.0.0",
-	"main": "./index.ts"
+  "name": "@calcom/debugging",
+  "description": "Debugging utilities",
+  "private": true,
+  "version": "1.0.0",
+  "main": "./index.ts"
 }
diff --git a/packages/debugging/tsconfig.json b/packages/debugging/tsconfig.json
index 47cd4fedc9..4b507010c5 100644
--- a/packages/debugging/tsconfig.json
+++ b/packages/debugging/tsconfig.json
@@ -1,15 +1,14 @@
 {
-	"extends": "@calcom/tsconfig/react-library.json",
-	"compilerOptions": {
-	  "resolveJsonModule": true
-	},
-	"include": [
-	  "../../apps/web/next-env.d.ts",
-	  "../types/*.d.ts",
-	  "../types/next-auth.d.ts",
-	  "**/*.ts",
-	  "**/*.tsx"
-	],
-	"exclude": ["dist", "build", "node_modules"]
-  }
-  
\ No newline at end of file
+  "extends": "@calcom/tsconfig/react-library.json",
+  "compilerOptions": {
+    "resolveJsonModule": true
+  },
+  "include": [
+    "../../apps/web/next-env.d.ts",
+    "../types/*.d.ts",
+    "../types/next-auth.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/emails/docker-compose.yml b/packages/emails/docker-compose.yml
index 4eaf50158d..405c3ebf5f 100644
--- a/packages/emails/docker-compose.yml
+++ b/packages/emails/docker-compose.yml
@@ -1,8 +1,8 @@
 # Starts mailhog SMTP server on port 1025, web interface on port 8025
 version: "3.6"
-services:    
+services:
   mailhog:
-    image: 'mailhog/mailhog:latest'
+    image: "mailhog/mailhog:latest"
     ports:
       - "1025:1025"
       - "8025:8025"
diff --git a/packages/embeds/embed-core/preview.html b/packages/embeds/embed-core/preview.html
index 6b22e0c10e..d298b324f1 100644
--- a/packages/embeds/embed-core/preview.html
+++ b/packages/embeds/embed-core/preview.html
@@ -13,7 +13,7 @@
         margin: 10px;
       }
       .dark {
-        background-color:rgb(16 16 16);
+        background-color: rgb(16 16 16);
       }
     </style>
     <script>
diff --git a/packages/embeds/embed-core/src/loader.css b/packages/embeds/embed-core/src/loader.css
index 61e163d59e..260be6f52a 100644
--- a/packages/embeds/embed-core/src/loader.css
+++ b/packages/embeds/embed-core/src/loader.css
@@ -58,8 +58,8 @@
   border-style: solid;
   -webkit-animation: loader 2s infinite ease;
   animation: loader 2s infinite ease;
- }
+}
 
 .loader.modal-loader {
   margin: 60px auto;
-}
\ No newline at end of file
+}
diff --git a/packages/embeds/embed-core/src/styles.css b/packages/embeds/embed-core/src/styles.css
index b785bf715b..029ca24b69 100644
--- a/packages/embeds/embed-core/src/styles.css
+++ b/packages/embeds/embed-core/src/styles.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 @font-face {
-  font-family: 'Cal Sans';
+  font-family: "Cal Sans";
   src: url("https://cal.com/cal.ttf");
 }
 
@@ -12,11 +12,14 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Cal Sans';
+  font-family: "Cal Sans";
   font-weight: normal;
   letter-spacing: normal;
 }
 
-html, body, :host {
-	font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji
-}
\ No newline at end of file
+html,
+body,
+:host {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue,
+    Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
diff --git a/packages/features/bookings/components/event-meta/EventMeta.stories.mdx b/packages/features/bookings/components/event-meta/EventMeta.stories.mdx
index d177723916..faa385184c 100644
--- a/packages/features/bookings/components/event-meta/EventMeta.stories.mdx
+++ b/packages/features/bookings/components/event-meta/EventMeta.stories.mdx
@@ -1,38 +1,48 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
+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";
 
-import { EventDetails } from './Details';
-import { EventTitle } from './Title';
-import { EventMembers } from './Members';
-import { mockEvent } from './event.mock.ts';
+import { EventDetails } from "./Details";
+import { EventMembers } from "./Members";
+import { EventTitle } from "./Title";
+import { mockEvent } from "./event.mock.ts";
 
 <Meta title="Features/Events/Meta" component={EventDetails} />
 
-<Title title="Event Meta" suffix="Brief" subtitle="Version 2.0 — Last Update: 12 Dec 2022"/>
+<Title title="Event Meta" suffix="Brief" subtitle="Version 2.0 — Last Update: 12 Dec 2022" />
 
 <Examples title="Combined event meta block">
-  <div style={{maxWidth: 300}}>
+  <div style={{ maxWidth: 300 }}>
     <Example title="Event Title">
-      <EventTitle event={mockEvent}/>
+      <EventTitle event={mockEvent} />
     </Example>
     <Example title="Event Details">
-      <EventDetails event={mockEvent}/>
+      <EventDetails event={mockEvent} />
     </Example>
   </div>
 </Examples>
 
 <Canvas>
   <Story name="All variants">
-    <VariantsTable titles={['Event Meta Components']} columnMinWidth={150}>
+    <VariantsTable titles={["Event Meta Components"]} columnMinWidth={150}>
       <VariantRow variant="">
-        <div style={{maxWidth: 300}}>
-          <EventMembers users={
-            [
-              {name: "Pro example", username: "pro"},
-              {name: "Team example", username: "team"}
-            ]
-          } />
+        <div style={{ maxWidth: 300 }}>
+          <EventMembers
+            users={[
+              { name: "Pro example", username: "pro" },
+              { name: "Team example", username: "team" },
+            ]}
+          />
           <EventTitle>Quick catch-up</EventTitle>
           <EventDetails event={mockEvent} />
         </div>
diff --git a/packages/features/calendars/weeklyview/components/calendar.stories.mdx b/packages/features/calendars/weeklyview/components/calendar.stories.mdx
index 1aeea475b5..1d0f2227d0 100644
--- a/packages/features/calendars/weeklyview/components/calendar.stories.mdx
+++ b/packages/features/calendars/weeklyview/components/calendar.stories.mdx
@@ -55,30 +55,31 @@ export const Template = (args) => <Calendar {...args} />;
 </Canvas>
 
 <Canvas>
-  <Story name="Onclick Handlers"
-         args={{
-            startHour: 8,
-            endHour: 17,
-            hoverEventDuration: 30,
-          }}
-         argTypes={{
-           startHour: {
-             control: { type: "number", min: 0, max: 23, step: 1 },
-           },
-            endHour: {
-              control: { type: "number", min: 0, max: 23, step: 1 },
-            },
-           hoverEventDuration: {
-             control: { type: "number", min: 0, max: 60, step: 1 },
-           },
-         }}
-  >
-    {({...args}) => (
-      <Calendar {...args}
-                events={events}
-                onEventClick={(e) => alert(e.title)}
-                onEmptyCellClick={(date) => alert(date.toString())}
-                sortEvents
+  <Story
+    name="Onclick Handlers"
+    args={{
+      startHour: 8,
+      endHour: 17,
+      hoverEventDuration: 30,
+    }}
+    argTypes={{
+      startHour: {
+        control: { type: "number", min: 0, max: 23, step: 1 },
+      },
+      endHour: {
+        control: { type: "number", min: 0, max: 23, step: 1 },
+      },
+      hoverEventDuration: {
+        control: { type: "number", min: 0, max: 60, step: 1 },
+      },
+    }}>
+    {({ ...args }) => (
+      <Calendar
+        {...args}
+        events={events}
+        onEventClick={(e) => alert(e.title)}
+        onEmptyCellClick={(date) => alert(date.toString())}
+        sortEvents
       />
     )}
   </Story>
diff --git a/packages/features/calendars/weeklyview/styles/styles.css b/packages/features/calendars/weeklyview/styles/styles.css
index 3a28c2c150..f1b2227af3 100644
--- a/packages/features/calendars/weeklyview/styles/styles.css
+++ b/packages/features/calendars/weeklyview/styles/styles.css
@@ -1,18 +1,20 @@
 .scheduler-wrapper {
   --gridDefaultSize: 1.75rem;
   --hoursInDay: 24;
-  --minuteInHour:60;
+  --minuteInHour: 60;
   --gridMobileSize: 100vw;
   --calendar-offset-top: 28px;
 }
 
-.scheduler-grid-row-template{
+.scheduler-grid-row-template {
   grid-template-rows: var(--gridMobileSize) repeat(attr(data-gridstoperperday number), var(--gridMobileSize)) auto;
 }
 
 @media (min-width: 640px) {
   .scheduler-grid-row-template {
-    grid-template-rows: var(--gridDefaultSize) repeat(attr(data-gridstoperperday number), var(--gridDefaultSize)) auto;
+    grid-template-rows: var(--gridDefaultSize) repeat(
+        attr(data-gridstoperperday number),
+        var(--gridDefaultSize)
+      ) auto;
   }
 }
-
diff --git a/packages/features/insights/filters/DateSelect.css b/packages/features/insights/filters/DateSelect.css
index c71f910f94..054f04208a 100644
--- a/packages/features/insights/filters/DateSelect.css
+++ b/packages/features/insights/filters/DateSelect.css
@@ -10,38 +10,40 @@
   }
 }
 
-
-.tremor-DateRangePicker-calendarButton, .tremor-DateRangePicker-dropdownButton {
-  @apply  border-subtle bg-default text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-0 focus-within:ring-emphasis hover:border-subtle dark:focus-within:ring-emphasis hover:bg-subtle
+.tremor-DateRangePicker-calendarButton,
+.tremor-DateRangePicker-dropdownButton {
+  @apply border-subtle bg-default focus-within:ring-emphasis hover:border-subtle dark:focus-within:ring-emphasis hover:bg-subtle text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-0;
 }
 
-.tremor-DateRangePicker-calendarButtonText,.tremor-DateRangePicker-dropdownButtonText {
-  @apply text-default
+.tremor-DateRangePicker-calendarButtonText,
+.tremor-DateRangePicker-dropdownButtonText {
+  @apply text-default;
 }
 
-.tremor-DateRangePicker-calendarModal,.tremor-DateRangePicker-dropdownModal{
-  @apply dark:invert
+.tremor-DateRangePicker-calendarModal,
+.tremor-DateRangePicker-dropdownModal {
+  @apply dark:invert;
 }
 
-.tremor-Card-root{
-  @apply p-5
+.tremor-Card-root {
+  @apply p-5;
 }
 
-.tremor-TableCell-root{
-  @apply pl-0
+.tremor-TableCell-root {
+  @apply pl-0;
 }
 
-.recharts-responsive-container{
-  @apply -mx-4
+.recharts-responsive-container {
+  @apply -mx-4;
 }
 .tremor-Card-root > p {
-  @apply text-base font-semibold mb-2
+  @apply mb-2 text-base font-semibold;
 }
 
-.tremor-Legend-legendItem{
-  @apply ml-2
+.tremor-Legend-legendItem {
+  @apply ml-2;
 }
 
-.tremor-TableBody-root{
-  @apply divide-subtle
-}
\ No newline at end of file
+.tremor-TableBody-root {
+  @apply divide-subtle;
+}
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index aef2960e6c..5ceec95205 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -243,7 +243,7 @@ const RemoveTimeButton = ({
 const TimeRangeField = ({ className, value, onChange }: { className?: string } & ControllerRenderProps) => {
   // this is a controlled component anyway given it uses LazySelect, so keep it RHF agnostic.
   return (
-    <div className={classNames("flex flex-row gap-1",className)}>
+    <div className={classNames("flex flex-row gap-1", className)}>
       <LazySelect
         className="inline-block w-[100px]"
         value={value.start}
diff --git a/packages/ui/components/TokenHandler/tokenhandler.stories.mdx b/packages/ui/components/TokenHandler/tokenhandler.stories.mdx
index d1b66dbba1..23286f9045 100644
--- a/packages/ui/components/TokenHandler/tokenhandler.stories.mdx
+++ b/packages/ui/components/TokenHandler/tokenhandler.stories.mdx
@@ -1,14 +1,17 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable } from '@calcom/storybook/components'
-import TokenHandler from './TokenHandler'
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import { Examples, Example, Note, Title, CustomArgsTable } from "@calcom/storybook/components";
+
+import TokenHandler from "./TokenHandler";
 
 <Meta title="UI/TokenHandler" component={TokenHandler} />
 
-<Title title="TokenHandler"  subtitle="Version 0.1"/>
+<Title title="TokenHandler" subtitle="Version 0.1" />
 
 ## Structure
 
-<TokenHandler digits={[
+<TokenHandler
+  digits={[
     {
       value: "1",
       onChange: (e) => {},
@@ -33,6 +36,8 @@ import TokenHandler from './TokenHandler'
       value: "6",
       onChange: (e) => {},
     },
-  ]} digitClassName="digit-input" />
+  ]}
+  digitClassName="digit-input"
+/>
 
 #all the numbers should be visible while the first one is focused
diff --git a/packages/ui/components/alert/alert.stories.mdx b/packages/ui/components/alert/alert.stories.mdx
index cfd93b8088..b5aaea1877 100644
--- a/packages/ui/components/alert/alert.stories.mdx
+++ b/packages/ui/components/alert/alert.stories.mdx
@@ -1,33 +1,57 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title, CustomArgsTable, VariantsTable,VariantRow } from '@calcom/storybook/components'
-import { Alert } from './Alert';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import { Alert } from "./Alert";
 
 <Meta title="UI/Alert" component={Alert} />
 
-<Title title="Alert" suffix="Brief" subtitle="Version 2.0 — Last Update: 04 jan 2023"/>
+<Title title="Alert" suffix="Brief" subtitle="Version 2.0 — Last Update: 04 jan 2023" />
 
 ## Definition
+
 Alerts provide time-based feedback to the user after taking an action.
 
 ## Structure
+
 Each alert has a state to represent neutral, positive or negative responses.
 
 <CustomArgsTable of={Alert} />
 
 <Examples title="Alert style">
   <Example title="Error">
-    <Alert severity="error" title="Summarise what happened" message="Describe what can be done about it here." />
+    <Alert
+      severity="error"
+      title="Summarise what happened"
+      message="Describe what can be done about it here."
+    />
   </Example>
   <Example title="Warning">
-    <Alert severity="warning" title="Summarise what happened" message="Describe what can be done about it here." />
+    <Alert
+      severity="warning"
+      title="Summarise what happened"
+      message="Describe what can be done about it here."
+    />
   </Example>
   <Example title="With actions">
     <Alert
       severity="warning"
       title="Summarise what happened"
       message="Describe what can be done about it here."
-      actions={<><button>Cancel me</button></>}
-      />
+      actions={
+        <>
+          <button>Cancel me</button>
+        </>
+      }
+    />
   </Example>
 </Examples>
 
@@ -37,31 +61,30 @@ Each alert has a state to represent neutral, positive or negative responses.
   <Story
     name="Alert"
     args={{
-      severity: 'success',
-      title: 'Summarise what happened',
-      message: 'Describe what can be done about it here.',
+      severity: "success",
+      title: "Summarise what happened",
+      message: "Describe what can be done about it here.",
     }}
     argTypes={{
       severity: {
         control: {
-          type: 'inline-radio',
-          options: ['success', 'warning', 'error', 'neutral', 'info'],
+          type: "inline-radio",
+          options: ["success", "warning", "error", "neutral", "info"],
         },
       },
       title: {
         control: {
-          type: 'text'
-        }
+          type: "text",
+        },
       },
       message: {
         control: {
-          type: 'text'
-        }
+          type: "text",
+        },
       },
-    }}
-  >
+    }}>
     {({ severity, title, message }) => (
-      <VariantsTable titles={['Default']} columnMinWidth={150}>
+      <VariantsTable titles={["Default"]} columnMinWidth={150}>
         <VariantRow variant={severity}>
           <Alert severity={severity} title={title} message={message} />
         </VariantRow>
diff --git a/packages/ui/components/apps/Categories.stories.mdx b/packages/ui/components/apps/Categories.stories.mdx
index 92400d4e95..bb81a110f8 100644
--- a/packages/ui/components/apps/Categories.stories.mdx
+++ b/packages/ui/components/apps/Categories.stories.mdx
@@ -1,7 +1,17 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title, CustomArgsTable, VariantsTable, VariantRow } from '@calcom/storybook/components';
-import { AppStoreCategories as Categories } from './Categories';
-import { _SBAppCategoryList } from './_storybookData';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import { AppStoreCategories as Categories } from "./Categories";
+import { _SBAppCategoryList } from "./_storybookData";
 
 <Meta title="UI/apps/Categories" component={Categories} />
 
diff --git a/packages/ui/components/avatar/avatar.stories.mdx b/packages/ui/components/avatar/avatar.stories.mdx
index 671a780a62..94f650f13a 100644
--- a/packages/ui/components/avatar/avatar.stories.mdx
+++ b/packages/ui/components/avatar/avatar.stories.mdx
@@ -1,18 +1,28 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
-import {Avatar} from './Avatar';
-import {AvatarGroup} from './AvatarGroup';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+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"/>
-
-
+<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} />
@@ -29,95 +39,102 @@ Avatar group can be composed differently based on the number of user profile.
 <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",
-  },
-]}/>
+    <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 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>
 
@@ -127,27 +144,26 @@ Avatar group can be composed differently based on the number of user profile.
   <Story
     name="Avatar"
     args={{
-      size: 'sm',
-      alt: 'Avatar Story',
-      gravatarFallbackMd5: 'Ui@CAL.com',
+      size: "sm",
+      alt: "Avatar Story",
+      gravatarFallbackMd5: "Ui@CAL.com",
     }}
     argTypes={{
       size: {
         control: {
-          type: 'inline-radio',
-          options: ['sm', 'lg'],
+          type: "inline-radio",
+          options: ["sm", "lg"],
         },
       },
-      alt: { control: 'text' },
-      gravatarFallbackMd5: { control: 'text' },
-    }}
-  >
+      alt: { control: "text" },
+      gravatarFallbackMd5: { control: "text" },
+    }}>
     {({ size, alt, gravatarFallbackMd5 }) => (
-  <VariantsTable titles={['Default']} columnMinWidth={150}>
-      <VariantRow variant={size}>
-        <Avatar size={size} alt={alt} gravatarFallbackMd5={gravatarFallbackMd5} />
-      </VariantRow>
-  </VariantsTable>
+      <VariantsTable titles={["Default"]} columnMinWidth={150}>
+        <VariantRow variant={size}>
+          <Avatar size={size} alt={alt} gravatarFallbackMd5={gravatarFallbackMd5} />
+        </VariantRow>
+      </VariantsTable>
     )}
   </Story>
 </Canvas>
diff --git a/packages/ui/components/badge/badge.stories.mdx b/packages/ui/components/badge/badge.stories.mdx
index d3233ca2d4..94a4e01496 100644
--- a/packages/ui/components/badge/badge.stories.mdx
+++ b/packages/ui/components/badge/badge.stories.mdx
@@ -1,25 +1,35 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable, VariantRow } from '@calcom/storybook/components'
-import { Plus } from '../icon';
-import { Badge } from './Badge';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import { Plus } from "../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"/>
-
+<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.
+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>
+    <Badge variant="gray">Badge text</Badge>
   </Example>
   <Example title="Green/Success">
     <Badge variant="success">Badge text</Badge>
@@ -44,44 +54,46 @@ Status badge communicate status information.  It is generally used within a cont
   </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"
-  args={{
-    severity: 'default',
-    label: 'Badge text',
-  }}
-  argTypes={{
-    severity: {
-      control: {
-        type: 'inline-radio',
-        options: ['default', 'success', 'gray', 'error'],
+  <Story
+    name="All Variants"
+    args={{
+      severity: "default",
+      label: "Badge text",
+    }}
+    argTypes={{
+      severity: {
+        control: {
+          type: "inline-radio",
+          options: ["default", "success", "gray", "error"],
+        },
       },
-    },
-    label: {
-      control: {
-        type: 'text',
+      label: {
+        control: {
+          type: "text",
+        },
       },
-    },
-  }}>
+    }}>
     {({ severity, label }) => (
-  <VariantsTable titles={['Default','With Dot', 'With Icon']} columnMinWidth={150}>
-      <VariantRow variant={severity}>
-        <Badge variant={severity}>{label}</Badge>
-        <Badge variant={severity} withDot>{label}</Badge>
-        <Badge variant={severity} startIcon={Plus}>{label}</Badge>
-      </VariantRow>
-  </VariantsTable>
+      <VariantsTable titles={["Default", "With Dot", "With Icon"]} columnMinWidth={150}>
+        <VariantRow variant={severity}>
+          <Badge variant={severity}>{label}</Badge>
+          <Badge variant={severity} withDot>
+            {label}
+          </Badge>
+          <Badge variant={severity} startIcon={Plus}>
+            {label}
+          </Badge>
+        </VariantRow>
+      </VariantsTable>
     )}
   </Story>
 </Canvas>
diff --git a/packages/ui/components/breadcrumb/breadcrumb.stories.mdx b/packages/ui/components/breadcrumb/breadcrumb.stories.mdx
index df23c03cee..8fbd56164d 100644
--- a/packages/ui/components/breadcrumb/breadcrumb.stories.mdx
+++ b/packages/ui/components/breadcrumb/breadcrumb.stories.mdx
@@ -1,19 +1,18 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable } from '@calcom/storybook/components'
-import { Breadcrumb } from './Breadcrumb';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import { Examples, Example, Note, Title, CustomArgsTable } from "@calcom/storybook/components";
+
+import { Breadcrumb } from "./Breadcrumb";
 
 <Meta title="UI/Breadcrumbs" component={Breadcrumb} />
 
-<Title title="Breadcrumbs" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
-
+<Title title="Breadcrumbs" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
 
 ## Structure
 
 <CustomArgsTable of={Breadcrumb} />
 
-
-<Examples title="Breadcrumb style"
->
+<Examples title="Breadcrumb style">
   <Example title="Primary">
     <Breadcrumb>
       <BreadcrumbItem href="/">Home</BreadcrumbItem>
@@ -23,4 +22,5 @@ import { Breadcrumb } from './Breadcrumb';
 </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/button/button.stories.mdx b/packages/ui/components/button/button.stories.mdx
index fbdc1a6cca..c4cafd4e95 100644
--- a/packages/ui/components/button/button.stories.mdx
+++ b/packages/ui/components/button/button.stories.mdx
@@ -1,4 +1,5 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
 import {
   Examples,
   Example,
@@ -8,31 +9,33 @@ import {
   VariantColumn,
   RowTitles,
   CustomArgsTable,
-  VariantRow
+  VariantRow,
 } from "@calcom/storybook/components";
-import { Plus, X } from '../icon';
-import { Button } from './Button';
+
+import { Plus, X } from "../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"/>
-
+<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>
-}>
+<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>
@@ -49,7 +52,7 @@ Button are clickable elements that initiates user actions. Labels in the button
     <Button>Button text</Button>
   </Example>
   <Example title="Hover">
-      <Button className="sb-pseudo--hover">Button text</Button>
+    <Button className="sb-pseudo--hover">Button text</Button>
   </Example>
   <Example title="Focus">
     <Button className="sb-pseudo--focus">Button text</Button>
@@ -67,7 +70,7 @@ Button are clickable elements that initiates user actions. Labels in the button
     <Button>Button text</Button>
   </Example>
   <Example title="Icon left">
-      <Button StartIcon={Plus}>Button text</Button>
+    <Button StartIcon={Plus}>Button text</Button>
   </Example>
   <Example title="Icon right">
     <Button EndIcon={Plus}>Button text</Button>
@@ -76,30 +79,34 @@ Button are clickable elements that initiates user actions. Labels in the button
 
 <Examples title="Icons">
   <Example title="Icon Normal">
-      <Button StartIcon={X} variant="icon" size="base" color="minimal"></Button>
+    <Button StartIcon={X} variant="icon" size="base" color="minimal"></Button>
   </Example>
   <Example title="Icon Small">
-      <Button StartIcon={X} variant="icon" size="sm" color="minimal"></Button>
+    <Button StartIcon={X} variant="icon" size="sm" color="minimal"></Button>
   </Example>
-   <Example title="Icon Loading">
-      <Button StartIcon={X} variant="icon" size="sm" color="minimal" loading></Button>
+  <Example title="Icon Loading">
+    <Button StartIcon={X} variant="icon" size="sm" color="minimal" loading></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>
+  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', 'Destructive',"Icon"]} columnMinWidth={150}>
+    <VariantsTable titles={["Primary", "Secondary", "Minimal", "Destructive", "Icon"]} columnMinWidth={150}>
       <VariantRow variant="Default">
         <Button>Button text</Button>
         <Button color="secondary">Button text</Button>
@@ -109,94 +116,117 @@ Button are clickable elements that initiates user actions. Labels in the 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>
-        <Button className="sb-pseudo--hover" color="destructive">Button text</Button>
+        <Button className="sb-pseudo--hover" color="secondary">
+          Button text
+        </Button>
+        <Button className="sb-pseudo--hover" color="minimal">
+          Button text
+        </Button>
+        <Button className="sb-pseudo--hover" color="destructive">
+          Button text
+        </Button>
         <Button className="sb-pseudo--hover" color="destructive" variant="icon" StartIcon={X}></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>
-        <Button className="sb-pseudo--focus" color="destructive">Button text</Button>
+        <Button className="sb-pseudo--focus" color="secondary">
+          Button text
+        </Button>
+        <Button className="sb-pseudo--focus" color="minimal">
+          Button text
+        </Button>
+        <Button className="sb-pseudo--focus" color="destructive">
+          Button text
+        </Button>
         <Button className="sb-pseudo--focus" color="destructive" variant="icon" StartIcon={X}></Button>
       </VariantRow>
       <VariantRow variant="Loading">
         <Button loading>Button text</Button>
-        <Button loading color="secondary">Button text</Button>
-        <Button loading color="minimal">Button text</Button>
-        <Button loading color="destructive">Button text</Button>
+        <Button loading color="secondary">
+          Button text
+        </Button>
+        <Button loading color="minimal">
+          Button text
+        </Button>
+        <Button loading color="destructive">
+          Button text
+        </Button>
         <Button loading color="destructive" variant="icon" StartIcon={X}></Button>
       </VariantRow>
       <VariantRow variant="Disabled">
         <Button disabled>Button text</Button>
-        <Button disabled color="secondary">Button text</Button>
-        <Button disabled color="minimal">Button text</Button>
-        <Button disabled color="destructive">Button text</Button>
+        <Button disabled color="secondary">
+          Button text
+        </Button>
+        <Button disabled color="minimal">
+          Button text
+        </Button>
+        <Button disabled color="destructive">
+          Button text
+        </Button>
         <Button disabled color="minimal" variant="icon" StartIcon={X}></Button>
       </VariantRow>
     </VariantsTable>
   </Story>
-  <Story name="Button Playground"
-         args={{
-           color: 'primary',
-           size: 'base',
-           loading: false,
-           disabled: false,
-           children: 'Button text',
-           className: ''
-         }}
-         argTypes={{
-            color: {
-              control: {
-                type: 'inline-radio',
-                options: ['primary', 'secondary', 'minimal', 'destructive']
-              }
-            },
-            size: {
-              control: {
-                type: 'inline-radio',
-                options: ['base', 'sm']
-              }
-            },
-            loading: {
-              control: {
-                type: 'boolean'
-              }
-            },
-            disabled: {
-              control: {
-                type: 'boolean'
-              }
-            },
-            children: {
-              control: {
-                type: 'text'
-              }
-            },
-            className: {
-              control: {
-                type: 'inline-radio',
-                options: ['', 'sb-pseudo--hover', 'sb-pseudo--focus']
-              }
-            }
-      }}
-  >
+  <Story
+    name="Button Playground"
+    args={{
+      color: "primary",
+      size: "base",
+      loading: false,
+      disabled: false,
+      children: "Button text",
+      className: "",
+    }}
+    argTypes={{
+      color: {
+        control: {
+          type: "inline-radio",
+          options: ["primary", "secondary", "minimal", "destructive"],
+        },
+      },
+      size: {
+        control: {
+          type: "inline-radio",
+          options: ["base", "sm"],
+        },
+      },
+      loading: {
+        control: {
+          type: "boolean",
+        },
+      },
+      disabled: {
+        control: {
+          type: "boolean",
+        },
+      },
+      children: {
+        control: {
+          type: "text",
+        },
+      },
+      className: {
+        control: {
+          type: "inline-radio",
+          options: ["", "sb-pseudo--hover", "sb-pseudo--focus"],
+        },
+      },
+    }}>
     {({ color, size, loading, disabled, children, className }) => (
-  <VariantsTable titles={["Light & Dark Modes"]} columnMinWidth={150}>
-    <VariantRow variant="Button">
-      <Button
-        color={color}
-        size={size}
-        variant="default"
-        loading={loading}
-        disabled={disabled}
-        className={className}
-      >
-        {children}
-      </Button>
-    </VariantRow>
-  </VariantsTable>
+      <VariantsTable titles={["Light & Dark Modes"]} columnMinWidth={150}>
+        <VariantRow variant="Button">
+          <Button
+            color={color}
+            size={size}
+            variant="default"
+            loading={loading}
+            disabled={disabled}
+            className={className}>
+            {children}
+          </Button>
+        </VariantRow>
+      </VariantsTable>
     )}
   </Story>
 </Canvas>
diff --git a/packages/ui/components/buttonGroup/buttongroup.stories.mdx b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
index 7201ed4b90..e1005f51a7 100644
--- a/packages/ui/components/buttonGroup/buttongroup.stories.mdx
+++ b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
@@ -1,34 +1,43 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
-import { Trash, Navigation, Clipboard } from '../icon';
-import { ButtonGroup} from './ButtonGroup';
-import { Button} from '../button/Button';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import { Button } from "../button/Button";
+import { Trash, Navigation, Clipboard } from "../icon";
+import { ButtonGroup } from "./ButtonGroup";
 
 <Meta title="UI/Button Group" component={ButtonGroup} />
 
-<Title title="Button Group" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
+<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 ={
+<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
+        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" >
+  }>
+  <Example title="Default">
     <ButtonGroup>
       <Button StartIcon={Trash} variant="icon" color="secondary" />
       <Button StartIcon={Navigation} variant="icon" color="secondary" />
@@ -44,16 +53,14 @@ Button group enables multiple buttons to be combined into a single unit. It offe
   </Example>
 </Examples>
 
-
 <Canvas>
-  <Story
-    name="All Variants">
-    <VariantsTable titles={["Default",'Secondary',"Minimal"]} columnMinWidth={150}>
+  <Story name="All Variants">
+    <VariantsTable titles={["Default", "Secondary", "Minimal"]} columnMinWidth={150}>
       <VariantRow variant="Default">
         <ButtonGroup>
-          <Button StartIcon={Trash} variant="icon"  />
-          <Button StartIcon={Navigation} variant="icon"/>
-          <Button StartIcon={Clipboard} variant="icon"  />
+          <Button StartIcon={Trash} variant="icon" />
+          <Button StartIcon={Navigation} variant="icon" />
+          <Button StartIcon={Clipboard} variant="icon" />
         </ButtonGroup>
         <ButtonGroup>
           <Button StartIcon={Trash} variant="icon" color="secondary" />
@@ -68,14 +75,14 @@ Button group enables multiple buttons to be combined into a single unit. It offe
       </VariantRow>
       <VariantRow variant="Combined">
         <ButtonGroup combined>
-          <Button StartIcon={Trash} variant="icon"  />
-          <Button StartIcon={Navigation} variant="icon"  />
-          <Button StartIcon={Clipboard} variant="icon"  />
+          <Button StartIcon={Trash} variant="icon" />
+          <Button StartIcon={Navigation} variant="icon" />
+          <Button StartIcon={Clipboard} variant="icon" />
         </ButtonGroup>
-         <ButtonGroup combined>
-          <Button StartIcon={Trash} variant="icon" color="secondary"  />
-          <Button StartIcon={Navigation} variant="icon" color="secondary"  />
-          <Button StartIcon={Clipboard} variant="icon" color="secondary"  />
+        <ButtonGroup combined>
+          <Button StartIcon={Trash} variant="icon" color="secondary" />
+          <Button StartIcon={Navigation} variant="icon" color="secondary" />
+          <Button StartIcon={Clipboard} variant="icon" color="secondary" />
         </ButtonGroup>
       </VariantRow>
     </VariantsTable>
@@ -86,30 +93,29 @@ Button group enables multiple buttons to be combined into a single unit. It offe
   <Story
     name="ButtonGroup Playground"
     args={{
-      color: 'secondary',
+      color: "secondary",
       combined: false,
     }}
     argTypes={{
       color: {
         control: {
-          type: 'select',
-          options: ['primary', 'secondary', 'minimal'],
+          type: "select",
+          options: ["primary", "secondary", "minimal"],
         },
       },
       combined: {
         control: {
-          type: 'boolean',
+          type: "boolean",
         },
       },
-    }}
-  >
+    }}>
     {({ color, combined }) => (
       <VariantsTable titles={[`${color}`]} columnMinWidth={150}>
-        <VariantRow  variant="">
+        <VariantRow variant="">
           <ButtonGroup combined={combined}>
-            <Button StartIcon={Trash} variant="icon" color={color}  />
-            <Button StartIcon={Navigation} variant="icon" color={color}/>
-            <Button StartIcon={Clipboard} variant="icon"  color={color}/>
+            <Button StartIcon={Trash} variant="icon" color={color} />
+            <Button StartIcon={Navigation} variant="icon" color={color} />
+            <Button StartIcon={Clipboard} variant="icon" color={color} />
           </ButtonGroup>
         </VariantRow>
       </VariantsTable>
diff --git a/packages/ui/components/card/card.stories.mdx b/packages/ui/components/card/card.stories.mdx
index 69b83f88c9..19b246e3c4 100644
--- a/packages/ui/components/card/card.stories.mdx
+++ b/packages/ui/components/card/card.stories.mdx
@@ -1,46 +1,57 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
-import Card from './Card';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import Card from "./Card";
 
 <Meta title="UI/Card" component={Card} />
 
-<Title title="Card" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023"/>
+<Title title="Card" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023" />
 
 ## Definition
+
 All Cards used in Cal.com
 
 <CustomArgsTable of={Card} />
 
 export const tip = {
-    id: 1,
-    thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg",
-    mediaLink: "https://go.cal.com/dynamic-video",
-    title: "Dynamic booking links",
-    description: "Booking link that allows people to quickly schedule meetings.",
-    href: "https://cal.com/blog/cal-v-1-9",
-}
-
+  id: 1,
+  thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg",
+  mediaLink: "https://go.cal.com/dynamic-video",
+  title: "Dynamic booking links",
+  description: "Booking link that allows people to quickly schedule meetings.",
+  href: "https://cal.com/blog/cal-v-1-9",
+};
 
 <Canvas>
-  <Story name="Card"
-  args={{
-    thumbnailUrl: tip.thumbnailUrl,
-    mediaLink: tip.mediaLink,
-    title: tip.title,
-    description: tip.description,
-    learnMoreHref: tip.href,
-    learnMoreText: "learn more",
-  }}
-  argTypes={{
-    thumbnailUrl: { control: { type: 'text' } },
-    mediaLink: { control: { type: 'text' } },
-    title: { control: { type: 'text' } },
-    description: { control: { type: 'text' } },
-    learnMoreHref: { control: { type: 'text' } },
-    learnMoreText: { control: { type: 'text' } },
-  }}>
+  <Story
+    name="Card"
+    args={{
+      thumbnailUrl: tip.thumbnailUrl,
+      mediaLink: tip.mediaLink,
+      title: tip.title,
+      description: tip.description,
+      learnMoreHref: tip.href,
+      learnMoreText: "learn more",
+    }}
+    argTypes={{
+      thumbnailUrl: { control: { type: "text" } },
+      mediaLink: { control: { type: "text" } },
+      title: { control: { type: "text" } },
+      description: { control: { type: "text" } },
+      learnMoreHref: { control: { type: "text" } },
+      learnMoreText: { control: { type: "text" } },
+    }}>
     {({ thumbnailUrl, mediaLink, title, description, learnMoreText }) => (
-      <VariantsTable titles={['']} columnMinWidth={150}>
+      <VariantsTable titles={[""]} columnMinWidth={150}>
         <VariantRow variant="Sidebar Card">
           <Card
             variant="SidebarCard"
diff --git a/packages/ui/components/credits/credits.stories.mdx b/packages/ui/components/credits/credits.stories.mdx
index 9668ac4c4b..3764fb8fa6 100644
--- a/packages/ui/components/credits/credits.stories.mdx
+++ b/packages/ui/components/credits/credits.stories.mdx
@@ -1,17 +1,27 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
-import Credits from './Credits';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import Credits from "./Credits";
 
 <Meta title="UI/Credits" component={Credits} />
 
-<Title title="Credits" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023"/>
+<Title title="Credits" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
 
 ## Definition
+
 Shows the current copy right as well as app version name.
 
 <Canvas>
-  <Story
-    name="Credits">
+  <Story name="Credits">
     <VariantsTable titles={[]} columnMinWidth={150}>
       <VariantRow variant="Default">
         <Credits />
diff --git a/packages/ui/components/data-table/__storybook__/datatable.stories.mdx b/packages/ui/components/data-table/__storybook__/datatable.stories.mdx
index 0de5d8af1b..95807bd93a 100644
--- a/packages/ui/components/data-table/__storybook__/datatable.stories.mdx
+++ b/packages/ui/components/data-table/__storybook__/datatable.stories.mdx
@@ -12,7 +12,7 @@ import {
 
 import { DataTable } from "../";
 import { columns, filterableItems } from "./columns";
-import { dataTableDemousers,dataTableSelectionActions } from "./data";
+import { dataTableDemousers, dataTableSelectionActions } from "./data";
 
 <Meta title="UI/table/data-table" component={DataTable} />
 
@@ -22,6 +22,12 @@ import { dataTableDemousers,dataTableSelectionActions } from "./data";
 
 <Canvas>
   <Story name="Datatable">
-    <DataTable columns={columns} data={dataTableDemousers} filterableItems={filterableItems} searchKey="username" selectionOptions={dataTableSelectionActions} />
+    <DataTable
+      columns={columns}
+      data={dataTableDemousers}
+      filterableItems={filterableItems}
+      searchKey="username"
+      selectionOptions={dataTableSelectionActions}
+    />
   </Story>
 </Canvas>
diff --git a/packages/ui/components/divider/divider.stories.mdx b/packages/ui/components/divider/divider.stories.mdx
index ee2f9ee062..7db6bc4481 100644
--- a/packages/ui/components/divider/divider.stories.mdx
+++ b/packages/ui/components/divider/divider.stories.mdx
@@ -1,17 +1,27 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
-import {Divider, VerticalDivider} from './Divider';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import { Divider, VerticalDivider } from "./Divider";
 
 <Meta title="UI/Divider" component={Divider} />
 
-<Title title="Divider" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023"/>
+<Title title="Divider" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
 
 ## Definition
+
 Shows the current copy right as well as app version name.
 
 <Canvas>
-  <Story
-    name="Divider">
+  <Story name="Divider">
     <VariantsTable titles={[]} columnMinWidth={150}>
       <VariantRow variant="Horizontal">
         <div className="dark:text-inverted">
@@ -21,7 +31,7 @@ Shows the current copy right as well as app version name.
         </div>
       </VariantRow>
       <VariantRow variant="Vertical">
-        <div className="flex dark:text-inverted">
+        <div className="dark:text-inverted flex">
           Text left
           <VerticalDivider />
           Text right
diff --git a/packages/ui/components/editor/stylesEditor.css b/packages/ui/components/editor/stylesEditor.css
index e9ffd3616d..2ac72e23a5 100644
--- a/packages/ui/components/editor/stylesEditor.css
+++ b/packages/ui/components/editor/stylesEditor.css
@@ -1,4 +1,3 @@
-
 .editor a {
   text-decoration: underline;
   font-size: 14px;
@@ -10,11 +9,11 @@
 }
 
 .editor ul {
-  list-style: disc inside
+  list-style: disc inside;
 }
 
 .editor ol {
-  list-style: decimal inside
+  list-style: decimal inside;
 }
 
 .editor-container {
@@ -46,7 +45,7 @@
   tab-size: 1;
   outline: 0;
   padding: 10px 10px;
-  outline: none
+  outline: none;
 }
 
 .editor-text-bold {
@@ -69,7 +68,7 @@
 .editor-paragraph {
   margin: 0;
   position: relative;
-  color: var(--cal-text)
+  color: var(--cal-text);
 }
 
 .editor-paragraph:last-child {
@@ -83,28 +82,26 @@
   font-weight: bold;
 }
 
-
 .editor-heading-h2 {
   font-size: 20px;
   font-weight: bold;
   margin-bottom: 20px;
 }
 
-.editor-list-ul  {
+.editor-list-ul {
   margin-bottom: 12px;
 }
 
-.editor-list-ol  {
+.editor-list-ol {
   margin-bottom: 12px;
 }
 
-
 .editor-listitem {
   margin: 0px 32px;
 }
 
 .editor-nested-listitem {
- list-style-type: none;
+  list-style-type: none;
 }
 
 pre::-webkit-scrollbar {
@@ -144,7 +141,7 @@ pre::-webkit-scrollbar-thumb {
 
 .toolbar button.toolbar-item.active {
   background-color: var(--cal-bg-inverted);
-  color: var(--cal-text-inverted)
+  color: var(--cal-text-inverted);
 }
 
 .toolbar button.toolbar-item.active i {
@@ -353,7 +350,8 @@ pre::-webkit-scrollbar-thumb {
   vertical-align: -0.25em;
 }
 
-i, .icon {
+i,
+.icon {
   fill: currentColor;
 }
 
diff --git a/packages/ui/components/empty-screen/empty-screen.stories.mdx b/packages/ui/components/empty-screen/empty-screen.stories.mdx
index 9d083982c7..3d2af7e172 100644
--- a/packages/ui/components/empty-screen/empty-screen.stories.mdx
+++ b/packages/ui/components/empty-screen/empty-screen.stories.mdx
@@ -1,13 +1,24 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
 import { Calendar } from "../icon";
-import { EmptyScreen } from './EmptyScreen';
+import { EmptyScreen } from "./EmptyScreen";
 
 <Meta title="UI/EmptyScreen" component={EmptyScreen} />
 
-<Title title="EmptyScreen" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023"/>
+<Title title="EmptyScreen" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
 
 ## Definition
+
 An empty state is where no info/ apps are added to a page with typically content. There must be a text that prompts users to learn more about why they see this state if necessary.
 The CTA button can prompt the user to add the info/ apps needed for the page.
 
@@ -15,22 +26,22 @@ The CTA button can prompt the user to add the info/ apps needed for the page.
   <Story
     name="EmptyScreen"
     args={{
-      headline: 'Empty state header',
-      description: 'Do consectetur qui ex deserunt do est veniam commodo. Eiusmod eiusmod dolore nostrud pariatur mollit sit commodo.',
-      buttonText: 'Learn More',
+      headline: "Empty state header",
+      description:
+        "Do consectetur qui ex deserunt do est veniam commodo. Eiusmod eiusmod dolore nostrud pariatur mollit sit commodo.",
+      buttonText: "Learn More",
     }}
     argTypes={{
       headline: {
-        control: 'text',
+        control: "text",
       },
       description: {
-        control: 'text',
+        control: "text",
       },
       buttonText: {
-        control: 'text',
+        control: "text",
       },
-    }}
-  >
+    }}>
     {({ headline, description, buttonText }) => (
       <VariantsTable titles={[]} columnMinWidth={150}>
         <VariantRow variant="Default">
diff --git a/packages/ui/components/form/checkbox/checkbox.stories.mdx b/packages/ui/components/form/checkbox/checkbox.stories.mdx
index 128d7b4529..5185605483 100644
--- a/packages/ui/components/form/checkbox/checkbox.stories.mdx
+++ b/packages/ui/components/form/checkbox/checkbox.stories.mdx
@@ -1,89 +1,99 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
-import {CheckboxField as Checkbox} from './Checkbox';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
 
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import { CheckboxField as Checkbox } from "./Checkbox";
 
 <Meta title="UI/Form/Checkbox" component={Checkbox} />
 
-<Title title="Checkbox  " suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
+<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 title="Default">
+    <Checkbox label="Default" />
   </Example>
-  <Example title="Error" >
-    <Checkbox label="Error" error/>
+  <Example title="Error">
+    <Checkbox label="Error" error />
   </Example>
-  <Example title="Disabled" >
-    <Checkbox label="Disabled"  disabled/>
+  <Example title="Disabled">
+    <Checkbox label="Disabled" disabled />
   </Example>
-  <Example title="Disabled" >
-    <Checkbox label="Disabled Checked"  checked disabled />
+  <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 title="Default">
+    <Checkbox descriptionAsLabel description="Default Description" />
   </Example>
-  <Example title="Error" >
-    <Checkbox descriptionAsLabel description="Default Description"  error/>
+  <Example title="Error">
+    <Checkbox descriptionAsLabel description="Default Description" error />
   </Example>
-  <Example title="Disabled" >
-    <Checkbox descriptionAsLabel description="Default Description"  disabled/>
+  <Example title="Disabled">
+    <Checkbox descriptionAsLabel description="Default Description" disabled />
   </Example>
-  <Example title="Disabled" >
-    <Checkbox descriptionAsLabel description="Default Description"  disabled checked/>
+  <Example title="Disabled">
+    <Checkbox descriptionAsLabel description="Default Description" disabled checked />
   </Example>
 </Examples>
 
 <Canvas>
-  <Story name="Checkbox"
+  <Story
+    name="Checkbox"
     args={{
       label: "Default",
       description: "Default Description",
       error: false,
       disabled: false,
     }}
-         argTypes={{
-            label: {
-              control: {
-                type: 'text',
-              },
-            },
-            description: {
-              control: {
-                type: 'text',
-              },
-            },
-            error: {
-              control: {
-                type: 'boolean',
-              },
-            },
-            disabled: {
-              control: {
-                type: 'boolean',
-              },
-            }
-         }}
-  >
+    argTypes={{
+      label: {
+        control: {
+          type: "text",
+        },
+      },
+      description: {
+        control: {
+          type: "text",
+        },
+      },
+      error: {
+        control: {
+          type: "boolean",
+        },
+      },
+      disabled: {
+        control: {
+          type: "boolean",
+        },
+      },
+    }}>
     {({ label, description, error, disabled }) => (
-  <VariantsTable titles={[""]} columnMinWidth={150}>
-    <VariantRow variant="Default">
-      <Checkbox label={label} error={error} disabled={disabled} />
-    </VariantRow>
-    <VariantRow variant="Description As Label">
-      <Checkbox description={description} error={error} disabled={disabled} descriptionAsLabel/>
-    </VariantRow>
-  </VariantsTable>
+      <VariantsTable titles={[""]} columnMinWidth={150}>
+        <VariantRow variant="Default">
+          <Checkbox label={label} error={error} disabled={disabled} />
+        </VariantRow>
+        <VariantRow variant="Description As Label">
+          <Checkbox description={description} error={error} disabled={disabled} descriptionAsLabel />
+        </VariantRow>
+      </VariantsTable>
     )}
   </Story>
 </Canvas>
diff --git a/packages/ui/components/form/inputs/inputs.stories.mdx b/packages/ui/components/form/inputs/inputs.stories.mdx
index 85c7412914..84d6367e46 100644
--- a/packages/ui/components/form/inputs/inputs.stories.mdx
+++ b/packages/ui/components/form/inputs/inputs.stories.mdx
@@ -1,52 +1,67 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable, VariantRow,VariantsTable} from '@calcom/storybook/components'
-import { Select, UnstyledSelect } from "../select";
-import { InputFieldWithSelect } from './Input';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
 
-import {InputField} from "./Input"
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantRow,
+  VariantsTable,
+} from "@calcom/storybook/components";
+
+import { Select, UnstyledSelect } from "../select";
+import { InputFieldWithSelect } from "./Input";
+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"/>
+<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>
-}>
+<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"/>
+    <InputField placeholder="Default" />
   </Example>
 </Examples>
 
 <Examples title="Input Types">
   <Example title="Default">
-    <InputField placeholder="Default"/>
+    <InputField placeholder="Default" />
   </Example>
   <Example title="Prefix">
-    <InputField placeholder="Prefix" addOnLeading={<>Prefix</>}/>
+    <InputField placeholder="Prefix" addOnLeading={<>Prefix</>} />
   </Example>
   <Example title="Suffix">
-    <InputField placeholder="Suffic" addOnSuffix={<>Suffix</>}/>
+    <InputField placeholder="Suffic" addOnSuffix={<>Suffix</>} />
   </Example>
   <Example title="Suffix With Select">
-    <InputFieldWithSelect placeholder="Suffix" selectProps={{options:[{value:"TEXT",label:"Text"}]}}/>
+    <InputFieldWithSelect
+      placeholder="Suffix"
+      selectProps={{ options: [{ value: "TEXT", label: "Text" }] }}
+    />
   </Example>
   <Example title="Focused">
-    <InputField placeholder="Focused"  className="sb-pseudo--focus"/>
+    <InputField placeholder="Focused" className="sb-pseudo--focus" />
   </Example>
   <Example title="Hovered">
-    <InputField placeholder="Hovered" className="sb-pseudo--hover"/>
+    <InputField placeholder="Hovered" className="sb-pseudo--hover" />
   </Example>
   <Example title="Error">
-    <InputField placeholder="Error" error="Error"/>
+    <InputField placeholder="Error" error="Error" />
   </Example>
 </Examples>
 
@@ -55,10 +70,10 @@ Text fields allow users to input and edit text into the product. Usually appear
     <InputField />
   </Example>
   <Example title="Placeholder">
-    <InputField placeholder="Placeholder"/>
+    <InputField placeholder="Placeholder" />
   </Example>
   <Example title="Filled">
-    <InputField value="Filled"/>
+    <InputField value="Filled" />
   </Example>
 </Examples>
 
@@ -66,21 +81,21 @@ Text fields allow users to input and edit text into the product. Usually appear
 
 <Canvas>
   <Story name="All Variants">
-    <VariantsTable titles={['Default','Focused', 'Hovered']} columnMinWidth={150}>
+    <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"/>
+        <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</>}/>
+        <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</>}/>
+        <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>
diff --git a/packages/ui/components/form/select/select.stories.mdx b/packages/ui/components/form/select/select.stories.mdx
index 32b5ff9014..80bda8d100 100644
--- a/packages/ui/components/form/select/select.stories.mdx
+++ b/packages/ui/components/form/select/select.stories.mdx
@@ -1,71 +1,63 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable, VariantRow,VariantsTable} from '@calcom/storybook/components'
-import { Plus } from "../../icon";
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
 
-import { SelectField } from "./Select"
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantRow,
+  VariantsTable,
+} from "@calcom/storybook/components";
+
+import { Plus } from "../../icon";
+import { SelectField } from "./Select";
 
 <Meta title="UI/Form/Select Field" component={SelectField} />
 
-<Title title="Select" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
+<Title title="Select" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
 
 ## Definition
+
 Dropdown fields allow users to input existing options that is preset by the deisgner/ developer. It can be just one choice per field, or they might be multiple choices depends on the circumstances.
 
 ## Structure
+
 <CustomArgsTable of={SelectField} />
 
-
-
 export const options = [
-    { value: 0, label: "Option One" },
-    { value: 1, label: "Option Two" },
-    { value: 3, label: "Option Three" },
-    { value: 4, label: "Option Four" },
+  { value: 0, label: "Option One" },
+  { value: 1, label: "Option Two" },
+  { value: 3, label: "Option Three" },
+  { value: 4, label: "Option Four" },
 ];
 
-
 ## Examples
 
-<Examples title=" Single Selected / Unselected" footnote={
-  <ul>
-    <li>The difference between the types are when they are filled.  </li>
-  </ul>
-}>
+<Examples
+  title=" Single Selected / Unselected"
+  footnote={
+    <ul>
+      <li>The difference between the types are when they are filled. </li>
+    </ul>
+  }>
   <Example title="Single Select [Unselected]" isFullWidth>
-    <SelectField
-      label={"Single Select"}
-      options={options}
-    />
+    <SelectField label={"Single Select"} options={options} />
   </Example>
-    <Example title="Single Select [Selected]" isFullWidth>
-    <SelectField
-      label={"Single Select"}
-      options={options}
-      defaultValue={options[0]}
-    />
+  <Example title="Single Select [Selected]" isFullWidth>
+    <SelectField label={"Single Select"} options={options} defaultValue={options[0]} />
   </Example>
-  <Example title="Multi Select [Unselected]" isFullWidth >
-    <SelectField
-      label={"Multi Select"}
-      options={options}
-      isMulti={true}
-    />
+  <Example title="Multi Select [Unselected]" isFullWidth>
+    <SelectField label={"Multi Select"} options={options} isMulti={true} />
   </Example>
   <Example title="Multi Select [Selected]" isFullWidth>
-    <SelectField
-      label={"Multi Select"}
-      options={options}
-      isMulti={true}
-      defaultValue={options[0]}
-    />
+    <SelectField label={"Multi Select"} options={options} isMulti={true} defaultValue={options[0]} />
   </Example>
 </Examples>
 
 <Examples title="Variants">
   <Example title="Default">
-    <SelectField
-      label={"Default Select"}
-      options={options}/>
+    <SelectField label={"Default Select"} options={options} />
   </Example>
   <Example title="Icon Left">
     WIP
@@ -73,32 +65,30 @@ export const options = [
   </Example>
 </Examples>
 
-
 ## Variant Caviats (WIP) - To be updated
+
 Using Icons is a bit of a strange one cause you can't simpily pass in an icon as a prop. You have to pass in a component. To the select field.
 
 ```js
 // Bad: Inline declaration will cause remounting issues
-const BadSelect = props => (
-  <Select {...props} components={{
-    Control: ({ children, ...rest }) => (
-      <components.Control {...rest}>
-        👎 {children}
-      </components.Control>
-    )}}
+const BadSelect = (props) => (
+  <Select
+    {...props}
+    components={{
+      Control: ({ children, ...rest }) => <components.Control {...rest}>👎 {children}</components.Control>,
+    }}
   />
-)
+);
 
 // Good: Custom component declared outside of the Select scope
-const Control = <IconLeading icon={Plus}/>
-
-const GoodSelect = props => <Select {...props} components={{ Control }} />
+const Control = <IconLeading icon={Plus} />;
 
+const GoodSelect = (props) => <Select {...props} components={{ Control }} />;
 ```
 
 <Examples title="States ">
   <Example title="Default">
-    <SelectField options={options} label={"Default Select"}/>
+    <SelectField options={options} label={"Default Select"} />
   </Example>
   {/* <Example title="Hover">
     <SelectField options={options} className="sb-pseudo--hover"/>
@@ -108,13 +98,13 @@ const GoodSelect = props => <Select {...props} components={{ Control }} />
   </Example> */}
 </Examples>
 
-
 ## Select Story
+
 <Canvas>
   <Story name="Default">
-    <VariantsTable titles={['Default']} columnMinWidth={450} >
+    <VariantsTable titles={["Default"]} columnMinWidth={450}>
       <VariantRow>
-        <SelectField options={options} label={"Default Select"}/>
+        <SelectField options={options} label={"Default Select"} />
       </VariantRow>
     </VariantsTable>
   </Story>
diff --git a/packages/ui/components/layout/spacing.stories.mdx b/packages/ui/components/layout/spacing.stories.mdx
index 1bda5c54be..11c1472ec8 100644
--- a/packages/ui/components/layout/spacing.stories.mdx
+++ b/packages/ui/components/layout/spacing.stories.mdx
@@ -30,52 +30,52 @@ Defines the spacing guide used in Cal.coms design system
       <Example title="0"></Example>
       <Example title="px">
         <Tooltip content="1px">
-          <div className="h-4 w-px bg-inverted rounded-sm"> </div>
+          <div className="bg-inverted h-4 w-px rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="0.5">
         <Tooltip content="2px">
-          <div className="h-4 w-0.5 bg-inverted rounded-sm"> </div>
+          <div className="bg-inverted h-4 w-0.5 rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="1">
         <Tooltip content="4px">
-          <div className="h-4 w-1 bg-inverted rounded-sm"> </div>
+          <div className="bg-inverted h-4 w-1 rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="2">
         <Tooltip content="8px">
-          <div className="h-4 w-2 bg-inverted rounded-sm"> </div>
+          <div className="bg-inverted h-4 w-2 rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="3">
         <Tooltip content="12px">
-          <div className="h-4 w-3 bg-inverted rounded-sm"> </div>
+          <div className="bg-inverted h-4 w-3 rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="4">
         <Tooltip content="16px">
-          <div className="h-4 w-4 bg-inverted rounded-sm"> </div>
+          <div className="bg-inverted h-4 w-4 rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="5">
         <Tooltip content="20px">
-          <div className="h-4 w-5 bg-inverted rounded-sm"> </div>
+          <div className="bg-inverted h-4 w-5 rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="6">
         <Tooltip content="24px">
-          <div className="h-4 w-6 bg-inverted rounded-sm"> </div>
+          <div className="bg-inverted h-4 w-6 rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="8">
         <Tooltip content="32px">
-          <div className="h-4 w-8 bg-inverted rounded-sm"> </div>
+          <div className="bg-inverted h-4 w-8 rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="10">
         <Tooltip content="48px">
-          <div className="h-4 w-10 bg-inverted rounded-sm"> </div>
+          <div className="bg-inverted h-4 w-10 rounded-sm"> </div>
         </Tooltip>
       </Example>
     </>
diff --git a/packages/ui/components/list/list.stories.mdx b/packages/ui/components/list/list.stories.mdx
index a471c40399..805d7d95c2 100644
--- a/packages/ui/components/list/list.stories.mdx
+++ b/packages/ui/components/list/list.stories.mdx
@@ -1,21 +1,29 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
-import { List, ListItem } from './List';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import { List, ListItem } from "./List";
 
 <Meta title="UI/List" component={List} />
 
-<Title title="List" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023"/>
+<Title title="List" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
 
 ## Definition
+
 Sums it up nicely.
 
 <Canvas>
-  <Story
-    name="List">
+  <Story name="List">
     <VariantsTable titles={[]} columnMinWidth={150}>
-      <VariantRow variant="Default">
-        TODO!
-      </VariantRow>
+      <VariantRow variant="Default">TODO!</VariantRow>
     </VariantsTable>
   </Story>
 </Canvas>
diff --git a/packages/ui/components/logo/logo.stories.mdx b/packages/ui/components/logo/logo.stories.mdx
index caa0a3e23d..4cd54ee5d6 100644
--- a/packages/ui/components/logo/logo.stories.mdx
+++ b/packages/ui/components/logo/logo.stories.mdx
@@ -1,24 +1,35 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
-import Logo from './Logo';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import Logo from "./Logo";
 
 <Meta title="UI/Logo" component={Logo} />
 
-<Title title="Logo" suffix="Brief" subtitle="Version 2.0 — Last Update: 02 Jan 2023"/>
+<Title title="Logo" suffix="Brief" subtitle="Version 2.0 — Last Update: 02 Jan 2023" />
 
 ## Definition
+
 Main Cal.com brand logo
 
 <CustomArgsTable of={Logo} />
 
 <Canvas>
   <Story name="Logo">
-    <VariantsTable titles={['']} columnMinWidth={150}>
+    <VariantsTable titles={[""]} columnMinWidth={150}>
       <VariantRow variant="Small">
         <Logo small />
       </VariantRow>
       <VariantRow variant="Default">
-        <Logo  />
+        <Logo />
       </VariantRow>
     </VariantsTable>
   </Story>
diff --git a/packages/ui/components/sheet/sheet.stories.mdx b/packages/ui/components/sheet/sheet.stories.mdx
index 38f8f49b0f..a20f7467ee 100644
--- a/packages/ui/components/sheet/sheet.stories.mdx
+++ b/packages/ui/components/sheet/sheet.stories.mdx
@@ -11,6 +11,7 @@ import {
   CustomArgsTable,
 } from "@calcom/storybook/components";
 
+import { Button } from "../button";
 import {
   Sheet,
   SheetClose,
@@ -22,9 +23,6 @@ import {
   SheetTrigger,
 } from "./sheet";
 
-import {Button} from "../button";
-
-
 <Meta title="UI/Sheet" />
 
 <Title title="Sheet" suffix="Brief" subtitle="Version 2.0 — Last Update: 21 June 2023" />
@@ -36,22 +34,20 @@ A sheet is a container that can be used to display content on differnt sides of
 ## Structure
 
 <Examples title="Spacing">
-      <Sheet>
-          <SheetTrigger asChild>
-              <Button>Open default sheet</Button>
-          </SheetTrigger>
-      <SheetContent position="right" size={"default"}>
-          <SheetHeader>
-              <SheetTitle>Edit profile</SheetTitle>
-              <SheetDescription>
-              Make changes to your profile here. Click save when you're done.
-              </SheetDescription>
-          </SheetHeader>
-          <SheetFooter>
-              <SheetClose asChild>
-                <Button type="submit">Save changes</Button>
-              </SheetClose>
-          </SheetFooter>
-      </SheetContent>
+  <Sheet>
+    <SheetTrigger asChild>
+      <Button>Open default sheet</Button>
+    </SheetTrigger>
+    <SheetContent position="right" size={"default"}>
+      <SheetHeader>
+        <SheetTitle>Edit profile</SheetTitle>
+        <SheetDescription>Make changes to your profile here. Click save when you're done.</SheetDescription>
+      </SheetHeader>
+      <SheetFooter>
+        <SheetClose asChild>
+          <Button type="submit">Save changes</Button>
+        </SheetClose>
+      </SheetFooter>
+    </SheetContent>
   </Sheet>
 </Examples>
diff --git a/packages/ui/components/skeleton/skeleton.stories.mdx b/packages/ui/components/skeleton/skeleton.stories.mdx
index d9f78e9065..9277d1ab9e 100644
--- a/packages/ui/components/skeleton/skeleton.stories.mdx
+++ b/packages/ui/components/skeleton/skeleton.stories.mdx
@@ -1,35 +1,44 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
 
-import {  Skeleton, SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer } from './';
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  VariantsTable,
+  VariantColumn,
+  RowTitles,
+  CustomArgsTable,
+} from "@calcom/storybook/components";
+
+import { Skeleton, SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer } from "./";
 
 <Meta title="UI/Skeleton" component={Skeleton} />
 
-<Title title="Skeleton" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
-
+<Title title="Skeleton" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
 
 ## Definition
+
 Skeletons are used as a placeholder to the content while the content is being loaded. It is used to improve the user experience by providing a visual cue that the content is loading.
 
 ## Structure
 
 <CustomArgsTable of={Skeleton} />
 
-
-<Examples title="Skeleton Avatar" >
+<Examples title="Skeleton Avatar">
   <Example title="Primary">
     <SkeletonAvatar className="h-8 w-8" />
   </Example>
 </Examples>
 
-<Examples title="Skeleton Text" >
+<Examples title="Skeleton Text">
   <Example title="Primary">
-    <SkeletonText className="h-4 w-32"/>
+    <SkeletonText className="h-4 w-32" />
   </Example>
 </Examples>
 
-<Examples title="Skeleton Button" >
+<Examples title="Skeleton Button">
   <Example title="Primary">
-    <SkeletonButton className="h-8 w-32"/>
+    <SkeletonButton className="h-8 w-32" />
   </Example>
 </Examples>
diff --git a/packages/ui/components/toast/toast.stories.mdx b/packages/ui/components/toast/toast.stories.mdx
index 4a49c82e46..83188e647d 100644
--- a/packages/ui/components/toast/toast.stories.mdx
+++ b/packages/ui/components/toast/toast.stories.mdx
@@ -1,4 +1,5 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
 import {
   Examples,
   Example,
@@ -8,58 +9,58 @@ import {
   VariantColumn,
   RowTitles,
   CustomArgsTable,
-  VariantRow
+  VariantRow,
 } from "@calcom/storybook/components";
 
-import { SuccessToast,ErrorToast,WarningToast,DefaultToast } from './';
+import { SuccessToast, ErrorToast, WarningToast, DefaultToast } from "./";
 
 <Meta title="UI/Toasts" component={DefaultToast} />
 
-<Title title="Toasts" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
-
+<Title title="Toasts" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
 
 ## Definition
+
 Toasts are used to show an action has had a impact. If a user submits a form a toast should be shown to notify the user there has been a success
 
 ## Structure
 
 <CustomArgsTable of={DefaultToast} />
 
-
-<Examples title="Toasts" >
+<Examples title="Toasts">
   <Example title="Default">
-    <DefaultToast  message="Default Toast" toastVisible={true}/>
+    <DefaultToast message="Default Toast" toastVisible={true} />
   </Example>
   <Example title="Success">
-    <SuccessToast message="Success Toast" toastVisible={true}/>
+    <SuccessToast message="Success Toast" toastVisible={true} />
   </Example>
   <Example title="Warning">
-    <WarningToast message="Warning Toast" toastVisible={true}/>
+    <WarningToast message="Warning Toast" toastVisible={true} />
   </Example>
   <Example title="Error">
-    <ErrorToast message="Error Toast" toastVisible={true}/>
+    <ErrorToast message="Error Toast" toastVisible={true} />
   </Example>
 </Examples>
 
 ## Toast Story
 
 <Canvas>
-  <Story name="Default"
-  args={{
-    message: 'Default Toast',
-    toastVisible: true
-  }}
-         argTypes={{
-            message: { control: 'text' },
-            toastVisible: { control: 'boolean'}
-  }}>
-    {({message, toastVisible}) => (
-      <VariantsTable titles={['Default','Success', 'Warning', 'Error']} columnMinWidth={150}>
+  <Story
+    name="Default"
+    args={{
+      message: "Default Toast",
+      toastVisible: true,
+    }}
+    argTypes={{
+      message: { control: "text" },
+      toastVisible: { control: "boolean" },
+    }}>
+    {({ message, toastVisible }) => (
+      <VariantsTable titles={["Default", "Success", "Warning", "Error"]} columnMinWidth={150}>
         <VariantRow variant="Default">
-          <DefaultToast message={message} toastVisible={toastVisible}/>
-          <SuccessToast message={message} toastVisible={toastVisible}/>
-          <WarningToast message={message} toastVisible={toastVisible}/>
-          <ErrorToast message={message} toastVisible={toastVisible}/>
+          <DefaultToast message={message} toastVisible={toastVisible} />
+          <SuccessToast message={message} toastVisible={toastVisible} />
+          <WarningToast message={message} toastVisible={toastVisible} />
+          <ErrorToast message={message} toastVisible={toastVisible} />
         </VariantRow>
       </VariantsTable>
     )}
diff --git a/packages/ui/components/tooltip/tooltip.stories.mdx b/packages/ui/components/tooltip/tooltip.stories.mdx
index a09c727fd5..a70c518c39 100644
--- a/packages/ui/components/tooltip/tooltip.stories.mdx
+++ b/packages/ui/components/tooltip/tooltip.stories.mdx
@@ -1,60 +1,69 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
 import { TooltipProvider } from "@radix-ui/react-tooltip";
-import Tooltip from './Tooltip';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import Tooltip from "./Tooltip";
 
 <Meta title="UI/Tooltip" component={Tooltip} />
 
-<Title title="Tooltip" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023"/>
+<Title title="Tooltip" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023" />
 
 ## Definition
+
 Tooltip components can be used to provide additional information about an element when the user hovers over or focuses on the element.
 
 <CustomArgsTable of={Tooltip} />
 
-
-
 <Canvas>
-  <Story name="Tooltip"
-  args={{
-    alertMsg: 'Copied!',
-    hoverMsg: "Copy to clipboard",
-    content: 'Hover Me',
-  }}
-         argTypes={{
-            alertMsg: {
-              control: {
-                type: 'text',
-              },
-            },
-            hoverMsg: {
-              control: {
-                type: 'text',
-              },
-            },
-            content: {
-              control: {
-                type: 'text',
-              },
-            },
-         }}
-  >
+  <Story
+    name="Tooltip"
+    args={{
+      alertMsg: "Copied!",
+      hoverMsg: "Copy to clipboard",
+      content: "Hover Me",
+    }}
+    argTypes={{
+      alertMsg: {
+        control: {
+          type: "text",
+        },
+      },
+      hoverMsg: {
+        control: {
+          type: "text",
+        },
+      },
+      content: {
+        control: {
+          type: "text",
+        },
+      },
+    }}>
     {({ alertMsg, hoverMsg, content }) => (
-    <TooltipProvider>
-      <VariantsTable titles={['']} columnMinWidth={150}>
-        <VariantRow variant="Default">
-          <Tooltip content={`${hoverMsg}`}>
-            <span
-              className="dark:text-darkgray-50 p-2 bg-brand-default rounded-md text-gray-100 dark:bg-darkgray-900 hover:cursor-pointer"
-              onClick={() => {
-                alert(`${alertMsg}`);
-              }}>
-              {content}
-            </span>
-          </Tooltip>
-        </VariantRow>
-      </VariantsTable>
-    </TooltipProvider>
+      <TooltipProvider>
+        <VariantsTable titles={[""]} columnMinWidth={150}>
+          <VariantRow variant="Default">
+            <Tooltip content={`${hoverMsg}`}>
+              <span
+                className="dark:text-darkgray-50 bg-brand-default dark:bg-darkgray-900 rounded-md p-2 text-gray-100 hover:cursor-pointer"
+                onClick={() => {
+                  alert(`${alertMsg}`);
+                }}>
+                {content}
+              </span>
+            </Tooltip>
+          </VariantRow>
+        </VariantsTable>
+      </TooltipProvider>
     )}
   </Story>
 </Canvas>
diff --git a/packages/ui/components/top-banner/topbanner.stories.mdx b/packages/ui/components/top-banner/topbanner.stories.mdx
index 44a53efbe1..99d36acb6a 100644
--- a/packages/ui/components/top-banner/topbanner.stories.mdx
+++ b/packages/ui/components/top-banner/topbanner.stories.mdx
@@ -1,87 +1,98 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable, VariantRow } from '@calcom/storybook/components'
-import { TopBanner } from './TopBanner'
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import { TopBanner } from "./TopBanner";
 
 <Meta title="UI/TopBanner" component={TopBanner} />
 
 <Title title="TopBanner" suffix="Brief" />
 
-
 ## Definition
+
 Top banner will be position on the very top of the page to communicate on what’s wrong or what’s new.
 
-
 ## Structure
+
 Each toast has a state to represent neutral, positive or negative responses.
 
 <CustomArgsTable of={TopBanner} />
 
 <Examples title="Top Banner Style">
-  <Example title="Default" isFullWidth={true} >
-     <TopBanner
-          actions={
-            <button
-              className="border-b border-black text-sm"
-              onClick={() => {
-                console.log("test");
-              }}>
-              Action
-            </button>
-          }
-          text="Something big is happening we want you to know about."
-        />
- </Example>
-  <Example title="Warning" isFullWidth={true} >
+  <Example title="Default" isFullWidth={true}>
     <TopBanner
-          actions={
-            <button
-              className="border-b border-black text-sm"
-              onClick={() => {
-                console.log("test");
-              }}>
-              Action
-            </button>
-          }
-          variant="warning"
-          text="An app wide warning is occuring that should be resolved."
-        />
-         </Example>
-  <Example title="Error" isFullWidth={true} >
+      actions={
+        <button
+          className="border-b border-black text-sm"
+          onClick={() => {
+            console.log("test");
+          }}>
+          Action
+        </button>
+      }
+      text="Something big is happening we want you to know about."
+    />
+  </Example>
+  <Example title="Warning" isFullWidth={true}>
     <TopBanner
-          actions={
-            <button
-              className="border-b border-black text-sm"
-              onClick={() => {
-                console.log("test");
-              }}>
-              Action
-            </button>
-          }
-          variant="error"
-          text="A major error is occuring that must be resolved."
-        />
-         </Example>
+      actions={
+        <button
+          className="border-b border-black text-sm"
+          onClick={() => {
+            console.log("test");
+          }}>
+          Action
+        </button>
+      }
+      variant="warning"
+      text="An app wide warning is occuring that should be resolved."
+    />
+  </Example>
+  <Example title="Error" isFullWidth={true}>
+    <TopBanner
+      actions={
+        <button
+          className="border-b border-black text-sm"
+          onClick={() => {
+            console.log("test");
+          }}>
+          Action
+        </button>
+      }
+      variant="error"
+      text="A major error is occuring that must be resolved."
+    />
+  </Example>
 </Examples>
 
 <Canvas>
-  <Story name="TopBanner"
-         args={{
-           text: 'Something big is happening we want you to know about.',
-           variant: 'default'
-  }}
-         argTypes={{
-            variant: {
-              control: {
-                type: 'select',
-                options: ['default', 'warning', 'error'],
-              },
-            },
-           text: {
-              control: {
-                type: 'text',
-              },
-            },
-  }}>
+  <Story
+    name="TopBanner"
+    args={{
+      text: "Something big is happening we want you to know about.",
+      variant: "default",
+    }}
+    argTypes={{
+      variant: {
+        control: {
+          type: "select",
+          options: ["default", "warning", "error"],
+        },
+      },
+      text: {
+        control: {
+          type: "text",
+        },
+      },
+    }}>
     {({ text, variant, ...args }) => (
       <TopBanner
         {...args}