Update public-api.mdx

apps/docs/package.json

@@ -8,7 +8,7 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
     "dev": "PORT=4000 next",
     "lint": "eslint . --ignore-path .gitignore",
-    "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
+    "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx,.mdx --fix",
     "lint:report": "eslint . --format json --output-file ../../lint-results/docs.json",
     "start": "PORT=4000 next start",
     "type-check": "tsc --pretty --noEmit"

apps/docs/pages/availability.mdx

@@ -8,8 +8,7 @@ title: Availability
 
 1. Go to [Your Availability](https://app.cal.com/availability) page within your cal.com account.
 2. On the availability page you can manage your availability to suit your working day accordingly.
-You can also troubleshoot your availability if your calendar does not look like it is blocking out the correct times.
-
+   You can also troubleshoot your availability if your calendar does not look like it is blocking out the correct times.
 
 ## Troubleshooting availability
 
@@ -24,4 +23,5 @@ This will tell you when your calendar shows you as busy, so you can understand w
 By doing this you will know understand why certain times are available and others are blocked.
 
 ## In team settings availability set to only Mondays but the calendar shows availability on other days as well
+
 It’s showing as available on days other than Monday because only you have set your availability to only Mondays, whereas the rest of the team haven't made that setting.

apps/docs/pages/billing.mdx

@@ -3,26 +3,34 @@ title: Billing
 ---
 
 # Billing
+
 ## How the trial works
+
 You are given FREE access for 14 days of our PRO subscription, you can use this to test and try out our product and see if it works for you. No credit card is required to sign up and you decide if you want to upgrade to a PRO subscription afterwards.
 
 ## How to cancel the trial
+
 If you are looking to cancel the trial and want to downgrade to the free option you can contact our support team where we will be happy to help you make that change!
 
 ## How to upgrade
+
 If you are looking at upgrading from our FREE subscription to our PRO subscription, head over to cal.com/upgrade where you can easily upgrade hassle free.
 
 ## How to downgrade
+
 1. Go to your [Billing Settings](https://app.cal.com/settings/billing).
 2. From here you can press the button called `Go to the billing Portal`. That will take you to the page where you can upgrade/downgrade your plan.
 
 ## How to delete your account
+
 You can delete your account from within the [Settings](https://app.cal.com/settings/profile) option. Just scroll all the way down and click on `Delete Account`.
 
 ## Purchasing a premium username
+
 We've reserved a ton of premium usernames, such as short handles or first names to prevent name squatters. To find out if your username is premium, head over to [cal.com/signup](https://cal.com/signup) and choose your desired username. From here you will be taken straight to checkout and after proceeding your Cal.com account will be created with your desired username.
 
 ## Manage your subscription
+
 1. Go to your [Billing Settings](https://app.cal.com/settings/billing).
 2. From here you can press the button called `Go to the billing Portal`.
 3. This will take you to an external site provided by Stripe as they deal with all our payments.
@@ -30,8 +38,9 @@ We've reserved a ton of premium usernames, such as short handles or first names
 Some users may not be able to access Billing as their billing email is different to their account email. If this is the case, you can change the email associated with your account in [Profile Settings](https://app.cal.com/settings/profile).
 
 ## Subscription for each team member
+
 If your team requires multiple event types then each team member has to be subscribed to our paid plan. If that is something that isn’t necessary for your team, you can proceed with your FREE plan.
 
 ## Discount for non-profits and students
-We offer 50% for non-profit organizations and students. Just raise a ticket with our support team and submit the necessary proof of status.
 
+We offer 50% for non-profit organizations and students. Just raise a ticket with our support team and submit the necessary proof of status.

apps/docs/pages/developer/adding-css.mdx

@@ -6,9 +6,7 @@ import Callout from "nextra-theme-docs/callout";
 
 # Adding CSS
 
-<Callout>
-  Adding or modifying CSS counts as changing the code, so as per [our license](https://github.com/calcom/cal.com/blob/main/LICENSE) you must either open-source your modified version or purchase an enterprise license.
-</Callout>
+<Callout />
 
 Cal.com uses [TailwindCSS](https://tailwindcss.com) as a replacement for traditional CSS styling within the application, but some people prefer to add CSS styles themselves.
 
@@ -17,20 +15,21 @@ CSS files should be stored in the `styles` directory within the codebase.
 Within the `styles` directory, you will find a single CSS file, `global.css`. We suggest not to add to this file, and instead create new CSS files and import them into the application. This helps reduce conflicts when pulling in changes that we've made to either of the existing CSS files.
 
 ## Adding new stylesheets
+
 Firstly, create the CSS file inside the `styles` directory.
 
 Then, open the `pages/_app.tsx` file, and you will see the following two lines:
+
 ```javascript
 import "../styles/globals.css";
 ```
 
 Duplicate one of these import statements and change the path to link to your new CSS stylesheet, like so:
+
 ```javascript
 import "../styles/your-new-stylesheet.css";
 ```
 
-<Callout type="warning" emoji="⚠️">
-  These styles will apply to all pages and components in your application.
-</Callout>
+<Callout type="warning" emoji="⚠️" />
 
 Due to the global nature of stylesheets, and to avoid conflicts, you may **only import them inside `pages/_app.tsx`**.

apps/docs/pages/developer/app-store.mdx

@@ -53,8 +53,9 @@ On the app store page you can customize your apps description by adding a markdo
 The `/static` folder is where you can store your app icon and any images that your `DESCRIPTION.md` may use.
 
 ## Adding Your App to the App Store
+
 To render your app on the app store page, go to `packages/app-store/index.ts`. Import your app into the file and add it to the `appStore` object.
 
-Under `packages/app-store/components.tsx`,  in the `InstallAppButtonMap` object dynamically import your install button. Your install button should live under `{your_app}/components`.
+Under `packages/app-store/components.tsx`, in the `InstallAppButtonMap` object dynamically import your install button. Your install button should live under `{your_app}/components`.
 
 If you need any help feel free to join us on [Slack](https://cal.com/slack)

apps/docs/pages/developer/code-styling.mdx

@@ -3,6 +3,7 @@ title: Code styling
 ---
 
 # Code Styling
+
 Keeping our code styles consistent is key to making the repository easy to read and work with.
 
 We use a number of style guides written by other amazing companies, simply because they are widely used and because we like working with them.
@@ -10,10 +11,13 @@ We use a number of style guides written by other amazing companies, simply becau
 We don't expect you to study every single rule of each style guide, but these are great reference points as to how your code should be styled. We may reject a pull request if your code style significantly differs from these style guides however.
 
 ## ESLint & Prettier
+
 Cal.com uses the ESLint and Prettier formatting tools, and the repository comes with defined rules for each tool. We recommend setting up both tools and using these to help automatically style your code to our guidelines.
 
 ## JavaScript/TypeScript
+
 We use the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) for all JavaScript and TypeScript code.
 
 ## HTML & CSS
+
 We use the [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) for any HTML and CSS markup. However, exceptions to the HTML guide apply where JSX differentiates from standard HTML.

apps/docs/pages/developer/migrations.mdx

@@ -3,14 +3,17 @@ title: Migrations
 ---
 
 # Database Migrations
+
 As described in the [upgrade guide](https://docs.cal.com/self-hosting/upgrade), you should use the `yarn workspace @calcom/prisma db-migrate` or `yarn workspace @calcom/prisma db-deploy` command to update the database.
 
 We use database migrations in order to handle changes to the database schema in a more secure and stable way. This is actually very common. The thing is that when just changing the schema in `schema.prisma` without creating migrations, the update to the newer database schema can damage or delete all data in production mode, since the system sometimes doesn't know how to transform the data from A to B. Using migrations, each step is reproducable, transparent and can be undone in a simple way.
 
 ## Creating migrations
+
 If you are modifying the codebase and make a change to the `schema.prisma` file, you must create a migration.
 
 To create a migration for your previously changed `schema.prisma`, simply run the following:
+
 ```sh
 yarn workspace @calcom/prisma db-migrate
 ```
@@ -24,7 +27,9 @@ Always keep an eye on what migrations Prisma is generating. Prisma often happily
 :::
 
 ## Error: The database schema is not empty
+
 Prisma uses a database called `_prisma_migrations` to keep track of which migrations have been applied and which haven't. If your local migrations database doesn't match up with what's in the actual database, then Prisma will throw the following error:
+
 ```text
 Error: P3005
 
@@ -34,6 +39,7 @@ The database schema for `localhost:5432` is not empty. Read more about how to ba
 In order to fix this, we need to tell Prisma which migrations have already been applied.
 
 This can be done by running the following command, replacing `migration_name` with each migration that you have already applied:
+
 ```sh
 yarn prisma migrate resolve --applied migration_name
 ```

apps/docs/pages/developer/pre-fill.mdx

@@ -11,14 +11,17 @@ Usually when they go to the link, all that is needed will be the time of the boo
 Pre-filling booking fields can save a lot of time and speed up processes with filling out these forms, and assist with a smooth integration with your existing website or app.
 
 You can pre-fill a user’s name and email address like so:
+
 ```text
 cal.com/rick/quick-chat/?email=attendee@example.com&name=John
 ```
+
 The data is persisted through the 3 booking pages; and is used to prefill the booking form.
 
 Guests can also be added to the link, there is also no limit to the amount of guests you wish to add.
 
 These should be added to your link like this:
+
 ```text
 guest=guest1@example.com&guest=guest2@example.com
 ```

apps/docs/pages/event-types.mdx

@@ -3,9 +3,11 @@ title: Event Types
 ---
 
 # Event Types
+
 Event types allow you to create different events for different occasions when booking a time with you in your calendar. These can be named differently, have different time durations and the choice of platform can change.
 
 ## Creating an event type
+
 1. Go to [Your Event Types](https://app.cal.com/event-types).
 2. Click the button at the top right of your screen saying '+ New Event Type'.
 3. Create the title of your new event.
@@ -16,6 +18,7 @@ Event types allow you to create different events for different occasions when bo
 8. Your event has now been created!
 
 ## Editing event types
+
 1. Go to [Your Event Types](https://app.cal.com/event-types).
 2. Click anywhere within the box of the event you would like to edit.
    (From here you can edit the basic settings of your event)
@@ -24,20 +27,23 @@ Event types allow you to create different events for different occasions when bo
 5. Your event type has now been updated.
 
 ## Deleting event types
+
 1. Go to [Your Event Types](https://app.cal.com/event-types).
 2. Click anywhere within the box of the event, just like you would if you were editing the event.
 3. From this page, just to the right, a button saying 'delete' will appear. Click this and your event will be deleted!
 
 ## How to block a time slot before/after a meeting
+
 You can block out a time frame in your calendar only after the meeting. You can do this by selecting `Show advanced settings` of your Event Type. The setting is labeled `Time-slot intervals`.
 
 ## Setting up specific availability for each type of Event
+
 Head to `Show advanced settings` of your event. At the bottom you can set up specific availability for different Event Types.
 
 ## Availability not showing on a certain day in your calendar
+
 Head over to your event and once you click on `Show advanced settings`, make sure your time zones are correct. Also, check if you have any calendar events scheduled that could overlap with your availability.
 
 ## People can't book me even though there is still a couple of hours left on my availability for today
+
 Head over to your event and once you click on `Show advanced settings`, have a look at the `Minimum booking notice`. It probably overlaps with your availability so make sure that notice fits your desired time frame for meetings. For example, if someone wants to book a meeting with you at 16:15 and it’s already 15:30, your 90 minutes minimum booking notice doesn’t allow that meeting to be booked.
-
-

apps/docs/pages/faq.mdx

@@ -5,13 +5,16 @@ title: FAQs
 # Frequently asked questions
 
 ## Does Cal.com support a custom domain?
+
 This is possible with our self-hosted option.
 
 ## Is there a possibility of multi-bookings for events where more people can book at the same time?
+
 As it stands this is currently not possible. We always keep an eye on the limitations like these that our users point to us. We’ve had requests in the past for the multi-booking feature and this is on our priority list.
 
 ## How to quickly block further bookings?
+
 1. Click on the lower left corner of your dashboard where your username is displayed.
 2. That initates a dropdown menu. Click on `Set youself as away`.
 
-This is a method to disable your Cal.com account which won't allow any bookings once initiated. However, bookings made before turning on *away mode* will still be booked.
+This is a method to disable your Cal.com account which won't allow any bookings once initiated. However, bookings made before turning on _away mode_ will still be booked.

apps/docs/pages/import.mdx

@@ -13,22 +13,22 @@ Once you've pasted your access token, we import your account data in less than a
 Naturally, we take security very seriously when it comes to importing your data from other accounts, so that's why we never store your access token, and use it once to query the Calendly/SavvyCal APIs, populate your account with the data it returns, and then your key is destroyed from memory. All of the importer code can be [freely viewed on GitHub](https://github.com/calcom/cal.com/tree/main/pages/api/import), so you can be assured we're not using your data for malicious purposes.
 
 ## Calendly
+
 The following steps will help you retrieve your Calendly access token, which you will need to present at the import screen of the onboarding process.
+
 1. Go to the Calendly website and click on **My Account** in the top right
 2. Now click on **Integrations** in the top right
 3. Scroll to the bottom and click on **API & Webhooks**
 4. Click the blue **Generate new token** button and type in anything you'd like as the app name
 5. Press **Copy token** and then paste it into the Cal.com importer
-<Callout>
-  Even though we don't store your access token, you can press **Revoke** to destroy the access token from the **API & Webhooks** page once the import is complete.
-</Callout>
+   <Callout />
 
 ## SavvyCal
+
 The following steps will help you retrieve your SavvyCal access token, which you will need to present at the import screen of the onboarding process.
+
 1. Head to the SavvyCal website and click **Settings** in the sidebar
 2. Click the **Developers** tab, and under **Personal access tokens**, click the blue **Create a token** link
 3. Give the token any name you'd like, and then confirm
 4. Click to copy the token, and then paste the token into the Cal.com importer
-<Callout>
-  Even though we don't store your access token, you can press the trash icon to revoke the access token from the **Developers** tab once the import is complete.
-</Callout>
+   <Callout />

apps/docs/pages/index.mdx

@@ -14,4 +14,4 @@ If you don't already know what Cal.com is about, please head over to [our websit
 
 Want to help make these docs even better? This site is fully open source, and the source code is available on [GitHub](https://github.com/calcom/cal.com/tree/main/apps/docs). You can also click the edit button at the bottom of any page to start editing the source code and start a pull request.
 
-<Bleed>![Telemedicine Example](https://cal.com/telemedicine-example.svg)</Bleed>
+<Bleed />

apps/docs/pages/integrations/embed.mdx

@@ -2,7 +2,7 @@
 title: Embed
 ---
 
-import Anchor from "../../components/Anchor"
+import Anchor from "../../components/Anchor";
 
 # Embed
 
@@ -10,7 +10,7 @@ The Embed allows your website visitors to book a meeting with you directly from
 
 ## Install on any website
 
-Install the following Vanilla JS Snippet to get embed to work on any website. After that you can <a href="#popular-ways-in-which-you-can-embed-on-your-website">choose any of the ways</a> to show your Cal Link embedded on your website.
+Install the following Vanilla JS Snippet to get embed to work on any website. After that you can <a href="#popular-ways-in-which-you-can-embed-on-your-website" /> to show your Cal Link embedded on your website.
 
 ```html
 <script>
@@ -41,9 +41,9 @@ Install the following Vanilla JS Snippet to get embed to work on any website. Af
         }
         p(cal, ar);
       };
-    })(window, "https://cal.com/embed.js", "init");
-    Cal("init")
-  </script>
+  })(window, "https://cal.com/embed.js", "init");
+  Cal("init");
+</script>
 ```
 
 ## Install with a Framework
@@ -60,7 +60,7 @@ yarn add @calcom/embed-react
 
 You can use Vanilla JS Snippet to install
 
-<Anchor as="H2">Popular ways in which you can embed on your website</Anchor>
+<Anchor as="H2" />
 
 Assuming that you have followed the steps of installing and initializing the snippet, you can show the embed in following ways:
 
@@ -69,7 +69,7 @@ Assuming that you have followed the steps of installing and initializing the sni
 Show the embed inline inside a container element. It would take the width and height of the container element.
 
 <details>
-  <summary>_Vanilla JS_</summary>
+  <summary />
 
 ```html
 <script>
@@ -88,18 +88,19 @@ Show the embed inline inside a container element. It would take the width and he
 
 *Sample sandbox*
 ```
+
 <iframe src="https://codesandbox.io/embed/vanilla-js-inline-embed-r27n67?fontsize=14&hidenavigation=1&theme=dark"
      style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
      title="Cal Component - Embed Inline Demo[React][TypeScript]"
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>
+    />
 </details>
 
 ####
 
 <details>
-<summary>_React_</summary>
+<summary />
 
 ```jsx
 import Cal from "@calcom/embed-react";
@@ -118,14 +119,14 @@ const MyComponent = () => (
 );
 ```
 
-*Sample sandbox*
+_Sample sandbox_
 
 <iframe src="https://codesandbox.io/embed/cal-component-embed-inline-demo-react-typescript-d1zlcn?fontsize=14&hidenavigation=1&theme=dark"
      style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
      title="Cal Component - Embed Inline Demo[React][TypeScript]"
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>
+    />
 </details>
 
 ### Popup on any existing element
@@ -134,29 +135,32 @@ To show the embed as a popup on clicking an element, add `data-cal-link` attribu
 
 <details>
 
-<summary>Vanilla JS</summary>
+<summary />
 
 To show the embed as a popup on clicking an element, simply add `data-cal-link` attribute to the element.
 
-*Sample sandbox*
-<iframe src="https://codesandbox.io/embed/popup-on-click-of-an-existing-element-y9lcuo?fontsize=14&hidenavigation=1&theme=dark"
-     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
-     title="Cal Component - Embed Inline Demo[React][TypeScript]"
-     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>
+_Sample sandbox_
 
-  <button data-cal-link="jane" data-cal-config="A valid config JSON"></button>
+<iframe
+  src="https://codesandbox.io/embed/popup-on-click-of-an-existing-element-y9lcuo?fontsize=14&hidenavigation=1&theme=dark"
+  style={{ width: "100%", height: "500px", border: 0, borderRadius: "4px", overflow: "hidden" }}
+  title="Cal Component - Embed Inline Demo[React][TypeScript]"
+  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
+
+  <button data-cal-link="jane" data-cal-config="A valid config JSON" />
 </details>
 <details>
-  <summary>React</summary>
+  <summary />
   ```jsx
     import "@calcom/embed-react";
 
     const MyComponent = ()=> {
       return <button data-cal-link="jane" data-cal-config='A valid config JSON'></button>
     }
-```
+
+````
 
 *Sample sandbox*
 <iframe src="https://codesandbox.io/embed/embed-popup-on-click-of-an-existing-element-demo-react-sc967e?fontsize=14&hidenavigation=1&theme=dark"
@@ -164,7 +168,7 @@ To show the embed as a popup on clicking an element, simply add `data-cal-link`
      title="Cal Component - Embed Inline Demo[React][TypeScript]"
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>
+    />
 
 </details>
 
@@ -177,15 +181,17 @@ To show the embed as a popup on clicking an element, simply add `data-cal-link`
     calLink: "jane",
   });
 </script>
-```
+````
 
-*Sample sandbox*
-<iframe src="https://codesandbox.io/embed/embed-floating-button-popup-all-websites-cg7pru?fontsize=14&hidenavigation=1&theme=dark"
-     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
-     title="Cal Component - Embed Inline Demo[React][TypeScript]"
-     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>
+_Sample sandbox_
+
+<iframe
+  src="https://codesandbox.io/embed/embed-floating-button-popup-all-websites-cg7pru?fontsize=14&hidenavigation=1&theme=dark"
+  style={{ width: "100%", height: "500px", border: 0, borderRadius: "4px", overflow: "hidden" }}
+  title="Cal Component - Embed Inline Demo[React][TypeScript]"
+  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
 
 ## Supported Instructions
 
@@ -197,9 +203,9 @@ Appends embed inline as the child of the element.
 
 ```html
 <script>
-Cal("inline", { elementOrSelector, calLink });
+  Cal("inline", { elementOrSelector, calLink });
 </script>
-````
+```
 
 - `elementOrSelector` - Give it either a valid CSS selector or an HTMLElement instance directly
 
@@ -211,7 +217,7 @@ Configure UI for embed. Make it look part of your webpage.
 
 ```html
 <script>
-Cal("inline", { styles });
+  Cal("inline", { styles });
 </script>
 ```
 
@@ -225,38 +231,40 @@ If you want to open cal link on some action. Make it pop open instantly by prelo
 
 ```html
 <script>
-Cal("preload", { calLink });
+  Cal("preload", { calLink });
 </script>
 ```
 
 - `calLink` - Cal Link that you want to embed e.g. john. Just give the username. No need to give the full URL [https://cal.com/john]()
 
 ## Actions
+
 You can listen to an action that occurs in embedded cal link as follows. You can think of them as DOM events. We are avoiding the term "events" to not confuse it with Cal Events.
+
 ```html
 <script>
-Cal("on", {
-  action: "ANY_ACTION_NAME",
-  callback: (e)=>{
-    // `data` is properties for the event.
-    // `type` is the name of the action(You can also call it type of the action.) This would be same as "ANY_ACTION_NAME" except when ANY_ACTION_NAME="*" which listens to all the events.
-    // `namespace` tells you the Cal namespace for which the event is fired/
-    const {data, type, namespace} = e.detail;
-  }
-})
+  Cal("on", {
+    action: "ANY_ACTION_NAME",
+    callback: (e) => {
+      // `data` is properties for the event.
+      // `type` is the name of the action(You can also call it type of the action.) This would be same as "ANY_ACTION_NAME" except when ANY_ACTION_NAME="*" which listens to all the events.
+      // `namespace` tells you the Cal namespace for which the event is fired/
+      const { data, type, namespace } = e.detail;
+    },
+  });
 </script>
 ```
 
 Following are the list of supported actions.
-- 
-| Action               | Description                                                                                                                        | Properties                                                                                                                                                                                                                                                                             |
-|----------------------|------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| eventTypeSelected    | When user chooses an event-type from the listing.                                                                                  | eventType:object // Event Type that has been selected"                                                                                                                                                                                                                               |
-| bookingSuccessful    | When the booking is successfully done. It might not be confirmed.                                                                  | confirmed: boolean; //Whether confirmation from organizer is pending or not  <br/><br/>eventType: "Object for Event Type that has been booked";  <br/><br/>date: string; // Date of Event  <br/><br/>duration: number; //Duration of booked Event  <br/><br/>organizer: object //Organizer details like name, timezone, email  |
-| linkReady            | Tells that the link is ready to be shown now.                                                                                      | None                                                                                                                                                                                                                                                                                   |
-| linkFailed           | Fired if link fails to load                                                                                                        | code: number; // Error Code <br/><br/>msg: string;  //Human Readable msg  <br/><br/>data: object // More details to debug the error                                                                                                                                                                     |
-| __iframeReady        | It is fired when the embedded iframe is ready to communicate with parent snippet. This is mostly for internal use by Embed Snippet | None                                                                                                                                                                                                                                                                                   |
-| __windowLoadComplete | Tells that window load for iframe is complete                                                                                      | None                                                                                                                                                                                                                                                                                   |
-| __dimensionChanged   | Tells that dimensions of the content inside the iframe changed.                                                                    | iframeWidth:number, iframeHeight:number                                                                                                                                                                                                                                              |
 
-_Actions that start with __ are internal._
+- | Action                 | Description                                                                                                                        | Properties                                                                                                                                                                                                                                                                                                                |
+  | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+  | eventTypeSelected      | When user chooses an event-type from the listing.                                                                                  | eventType:object // Event Type that has been selected"                                                                                                                                                                                                                                                                    |
+  | bookingSuccessful      | When the booking is successfully done. It might not be confirmed.                                                                  | confirmed: boolean; //Whether confirmation from organizer is pending or not <br/><br/>eventType: "Object for Event Type that has been booked"; <br/><br/>date: string; // Date of Event <br/><br/>duration: number; //Duration of booked Event <br/><br/>organizer: object //Organizer details like name, timezone, email |
+  | linkReady              | Tells that the link is ready to be shown now.                                                                                      | None                                                                                                                                                                                                                                                                                                                      |
+  | linkFailed             | Fired if link fails to load                                                                                                        | code: number; // Error Code <br/><br/>msg: string; //Human Readable msg <br/><br/>data: object // More details to debug the error                                                                                                                                                                                         |
+  | \_\_iframeReady        | It is fired when the embedded iframe is ready to communicate with parent snippet. This is mostly for internal use by Embed Snippet | None                                                                                                                                                                                                                                                                                                                      |
+  | \_\_windowLoadComplete | Tells that window load for iframe is complete                                                                                      | None                                                                                                                                                                                                                                                                                                                      |
+  | \_\_dimensionChanged   | Tells that dimensions of the content inside the iframe changed.                                                                    | iframeWidth:number, iframeHeight:number                                                                                                                                                                                                                                                                                   |
+
+_Actions that start with \_\_ are internal._

apps/docs/pages/integrations/google.mdx

@@ -3,6 +3,7 @@ title: Google
 ---
 
 # Google Calendar
+
 The Google Calendar integration checks for availability in your Google Calendars and creates bookings for you.
 
 ## Removing Permissions for Cal to access your Google Account
@@ -17,6 +18,7 @@ The Google Calendar integration checks for availability in your Google Calendars
 To remove a product from your account that isn't listed in your Google Account, visit [Google Support](https://support.google.com) for more info on a specific product.
 
 ## Obtaining the Google API Credentials
+
 1. Open [Google API Console](https://console.cloud.google.com/apis/dashboard). If you don't have a project in your Google Cloud subscription, you'll need to create one before proceeding further. Under Dashboard pane, select Enable APIS and Services.
 2. In the search box, type calendar and select the Google Calendar API search result.
 3. Enable the selected API.

apps/docs/pages/integrations/introduction.mdx

@@ -5,6 +5,7 @@ title: Introduction
 # Integrations
 
 ## Connecting new calendars
+
 1. Go to the [Cal App Store](https://app.cal.com/apps).
 2. Located at the top right of the screen, press the button saying '+ Connect A New App'
 3. Choose the account your calendar is connected too by clicking 'Add'. (e.g. Google, Office 365, Zoom)

apps/docs/pages/integrations/microsoft.mdx

@@ -3,9 +3,11 @@ title: Microsoft
 ---
 
 # Outlook/Microsoft 365
+
 The Outlook integration enables you to use your outlook.com or Microsoft 365 account to use for conflict checking and event bookings.
 
 ## Obtaining Microsoft Graph Client ID and Secret
+
 1. Open [Azure App Registration](https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps) and select New registration
 2. Name your application
 3. Set **Who can use this application or access this API?** to **Accounts in any organizational directory (Any Azure AD directory - Multitenant)**

apps/docs/pages/integrations/slack.mdx

@@ -4,18 +4,21 @@ Title: Slack
 
 # Slack
 
-## Connecting 
+## Connecting
+
 Connecting the bot is easy - If you are a workspace admin, the install button will add the bot to the workspace and also authorize your account with the bot. If you are a normal user, the install button will connect your Slack account with Cal.com. This will allow you to perform commands in Slack.
 
 ## Commands
+
 `/today` - This command will display all meetings you have in your Cal.com profile for the current day. This will send a hidden message (not visible to anyone other than you) to the channel you issued the command in.
 
 `/create-event` - It will display a modal allowing you to simply create a meeting invite with anyone in Slack. Success/Error information will be displayed in a private direct message from the bot.
 
-`/links` - This command will post all your Cal.com meeting links into the current Slack channel you are in. **Note**: The bot needs to have permission to talk in the channel you are sending the message in. Otherwise, you won't be able to send your links. 
+`/links` - This command will post all your Cal.com meeting links into the current Slack channel you are in. **Note**: The bot needs to have permission to talk in the channel you are sending the message in. Otherwise, you won't be able to send your links.
 
 As this is the beggining stage of our Slack integration, we plan on adding more commands in the future that will further improve your Cal.com experience.
 
 ## Self-Hosted
-If you are using our self-hosted version, please refer to our documentation in 
+
+If you are using our self-hosted version, please refer to our documentation in
 [cal.com/README.md](https://github.com/calcom/cal.com/blob/main/README.md#obtaining-slack-client-id-and-secret-and-signing-secret)

apps/docs/pages/public-api.mdx

@@ -1,18 +1,14 @@
-import Bleed from 'nextra-theme-docs/bleed'
-import Head from "next/head";
 import IframeResizer from "iframe-resizer-react";
-import {useWindowSize} from "../lib/useWindowSize";
-
+import Head from "next/head";
+import Bleed from "nextra-theme-docs/bleed";
 
 <Bleed full>
-  <Head><title>Public API | Cal.com</title></Head>
+  <Head />
   <IframeResizer
     autoResize
     src={process.env.NEXT_PUBLIC_SWAGGER_DOCS_URL || "https://developer.cal.com"}
     frameBorder="0"
     style={{
-      width: useWindowSize().width > 768 ? "calc(100vw - 16rem)": "100vw",
-      minHeight: useWindowSize().width > 768 ? "100vh" : "200vh",
       height: "auto",
       border: 0,
     }}

apps/docs/pages/self-hosting/docker.mdx

@@ -16,9 +16,9 @@ Make sure you have `docker` & `docker-compose` installed on the server / system.
 
 ### Option #1: Docker Hub
 
-   ```bash
-   docker pull calendso/calendso
-   ```
+```bash
+docker pull calendso/calendso
+```
 
 or
 

apps/docs/pages/self-hosting/install.mdx

@@ -61,10 +61,7 @@ yarn dx
 
         <details>
 
-            <summary>
-            If you don't know how to configure the DATABASE_URL, then follow the steps here to create a quick DB
-            using Heroku
-            </summary>
+            <summary />
 
             1. Create a free account with [Heroku](https://www.heroku.com/).
 

apps/docs/pages/self-hosting/upgrade.mdx

@@ -10,7 +10,7 @@ title: Upgrade
    ```sh
    git pull
    ```
-2. Apply database migrations by running <b>one of</b> the following commands:
+2. Apply database migrations by running <b /> the following commands:
 
    In a development environment, run:
 

apps/docs/pages/settings.mdx

@@ -3,10 +3,12 @@ title: Settings
 ---
 
 # Settings
+
 ## Setting up or making changes to your Profile
 
 1. Go to your [Profile Settings](https://app.cal.com/settings/profile).
 2. From this page you are able to edit the following:
+
 - Your URL Username
 - Your Display Name
 - Your About Information
@@ -15,6 +17,7 @@ title: Settings
 - Your Chosen 'First Day Of The Week'
 - Light or Dark Mode for your Booking Page
 - Enabling or Disabling cal.com Branding on your Booking Page
+
 3. Once you have completed all your changes, press that 'save' button located at the bottom right of your page.
 
 ## Reset your password
@@ -41,6 +44,7 @@ Go to [Profile Settings](https://app.cal.com/settings/profile). There, you will
 You have now successfully enabled Two-Factor Authentication
 
 ## Disable 2FA
+
 1. Go to [Your Account Security Settings](https://app.cal.com/settings/security).
 2. Located at the bottom of your screen, click on the tab labeled 'Disable Two-Factor Authentication'.
 3. Enter your Password.

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 impovments to match Figma as close as possible. Like our Figma library, we will be adding more components as we go along.</p>
-  <p>Our <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">Figma</a> library is avalible for anyone to view and use. If you have any questions or concerns, please reach out to the design team.</p>
+<div 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 impovments to match Figma as close as possible. Like our Figma
+    library, we will be adding more components as we go along.
+  </p>
+  <p>
+    Our{" "}
+    <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">
+      Figma
+    </a>{" "}
+    library is avalible for anyone to view and use. If you have any questions or concerns, please reach out to
+    the design team.
+  </p>
 </div>
 
-<img src="/sb-cover.jpg" />
+<img src="/sb-cover.jpg" />

packages/config/eslint-preset.js

@@ -1,7 +1,13 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ["plugin:playwright/playwright-test", "next", "plugin:prettier/recommended", "turbo"],
+  extends: [
+    "plugin:playwright/playwright-test",
+    "next",
+    "plugin:prettier/recommended",
+    "turbo",
+    "plugin:mdx/recommended",
+  ],
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: ["./tsconfig.json"],

packages/config/package.json

@@ -24,6 +24,7 @@
     "@typescript-eslint/eslint-plugin": "^5.33.1",
     "@typescript-eslint/parser": "^5.33.1",
     "eslint": "^8.22.0",
+    "eslint-plugin-mdx": "^2.0.5",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwind-scrollbar": "^2.0.1",

packages/ui/components/alert/alert.stories.mdx

@@ -1,53 +1,92 @@
-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>
 
 <Title offset title="Alert" suffix="Variants" />
 
 <Canvas>
-  <Story
-    name="Alert">
-    <VariantsTable titles={['Default']} columnMinWidth={150}>
+  <Story name="Alert">
+    <VariantsTable titles={["Default"]} columnMinWidth={150}>
       <VariantRow variant="Success">
-        <Alert severity="success" title="Summarise what happened" message="Describe what can be done about it here." />
+        <Alert
+          severity="success"
+          title="Summarise what happened"
+          message="Describe what can be done about it here."
+        />
       </VariantRow>
       <VariantRow variant="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."
+        />
       </VariantRow>
       <VariantRow variant="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."
+        />
       </VariantRow>
       <VariantRow variant="Neutral">
-        <Alert severity="neutral" title="Summarise what happened" message="Describe what can be done about it here." />
+        <Alert
+          severity="neutral"
+          title="Summarise what happened"
+          message="Describe what can be done about it here."
+        />
       </VariantRow>
     </VariantsTable>
   </Story>

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} />
 

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,104 +39,110 @@ 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>
 
 <Title offset title="Avatar" suffix="Variants" />
 
 <Canvas>
-  <Story
-    name="Avatar">
-    <VariantsTable titles={['Default']} columnMinWidth={150}>
+  <Story name="Avatar">
+    <VariantsTable titles={["Default"]} columnMinWidth={150}>
       <VariantRow variant="Sm">
         <Avatar size="sm" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
       </VariantRow>

packages/ui/components/badge/badge.stories.mdx

@@ -1,83 +1,60 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable, VariantRow } from '@calcom/storybook/components'
-import { FiPlus } 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 { FiPlus } 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>
-  </Example>
-  <Example title="Green/Success">
-    <Badge variant="success">Badge text</Badge>
-  </Example>
-  <Example title="Orange/Default">
-    <Badge variant="default">Badge text</Badge>
-  </Example>
-  <Example title="Red/Error">
-    <Badge variant="red">Badge text</Badge>
-  </Example>
+  <Example title="Gray" />
+  <Example title="Green/Success" />
+  <Example title="Orange/Default" />
+  <Example title="Red/Error" />
 </Examples>
 
 <Examples title="Variants">
-  <Example title="Default">
-    <Badge>Button text</Badge>
-  </Example>
-  <Example title="With Dot">
-    <Badge withDot>Button Text</Badge>
-  </Example>
-  <Example title="With Icon">
-    <Badge StartIcon={FiPlus}>Button Text</Badge>
-  </Example>
+  <Example title="Default" />
+  <Example title="With Dot" />
+  <Example title="With Icon" />
 </Examples>
 
-
 ## Alert Badges
 
-
 ## Usage
+
 Alet badge is used in conjunction with an item, profile or label to indicate numeric value and messages assocciated with them.
 
-
-
 <Title offset title="Badge" suffix="Variants" />
 
 <Canvas>
   <Story name="All Variants">
-    <VariantsTable titles={['Default','With Dot', 'With Icon']} columnMinWidth={150}>
-      <VariantRow variant="Default">
-        <Badge variant="default" >Badge text</Badge>
-        <Badge variant="default" withDot>Badge text</Badge>
-        <Badge variant="default" StartIcon={FiPlus}>Badge text</Badge>
-      </VariantRow>
-      <VariantRow variant="Success">
-        <Badge variant="success" >Badge text</Badge>
-        <Badge variant="success" withDot>Badge text</Badge>
-        <Badge variant="success" StartIcon={FiPlus}>Badge text</Badge>
-      </VariantRow>
-      <VariantRow variant="gray">
-        <Badge variant="gray" >Badge text</Badge>
-        <Badge variant="gray" withDot>Badge text</Badge>
-        <Badge variant="gray" StartIcon={FiPlus}>Badge text</Badge>
-      </VariantRow>
-      <VariantRow variant="error">
-        <Badge variant="error" >Badge text</Badge>
-        <Badge variant="error" withDot>Badge text</Badge>
-        <Badge variant="error" StartIcon={FiPlus}>Badge text</Badge>
-      </VariantRow>
+    <VariantsTable titles={["Default", "With Dot", "With Icon"]} columnMinWidth={150}>
+      <VariantRow variant="Default" />
+      <VariantRow variant="Success" />
+      <VariantRow variant="gray" />
+      <VariantRow variant="error" />
     </VariantsTable>
   </Story>
 </Canvas>

packages/ui/components/breadcrumb/breadcrumb.stories.mdx

@@ -1,26 +1,23 @@
-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>
-      <BreadcrumbItem href="/">Test</BreadcrumbItem>
-    </Breadcrumb>
+    <Breadcrumb />
   </Example>
 </Examples>
 
 ## Usage
+
 When hovering over the button, there should be a tooltip to explain the context of the button, so the user can understand the result of action.

packages/ui/components/button/button.stories.mdx

@@ -1,130 +1,121 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
-import { FiPlus, FiX } from '../icon';
-import { Button } from './Button';
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  VariantsTable,
+  VariantColumn,
+  VariantRow,
+  RowTitles,
+  CustomArgsTable,
+} from "@calcom/storybook/components";
+
+import { FiPlus, FiX } 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>
-}>
-  <Example title="Primary">
-    <Button className="sb-fake-pseudo--focus">Button text</Button>
-  </Example>
-  <Example title="Secondary">
-    <Button color="secondary">Button text</Button>
-  </Example>
-  <Example title="Minimal">
-    <Button color="minimal">Button text</Button>
-  </Example>
+<Examples
+  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" />
+  <Example title="Secondary" />
+  <Example title="Minimal" />
 </Examples>
 
 <Examples title="State">
-  <Example title="Default">
-    <Button>Button text</Button>
-  </Example>
-  <Example title="Hover">
-      <Button className="sb-pseudo--hover">Button text</Button>
-  </Example>
-  <Example title="Focus">
-    <Button className="sb-pseudo--focus">Button text</Button>
-  </Example>
-  <Example title="Disabled">
-    <Button disabled>Button text</Button>
-  </Example>
-  <Example title="Loading">
-    <Button loading>Button text</Button>
-  </Example>
+  <Example title="Default" />
+  <Example title="Hover" />
+  <Example title="Focus" />
+  <Example title="Disabled" />
+  <Example title="Loading" />
 </Examples>
 
 <Examples title="Icons">
-  <Example title="Default">
-    <Button>Button text</Button>
-  </Example>
-  <Example title="Icon left">
-      <Button StartIcon={FiPlus}>Button text</Button>
-  </Example>
-  <Example title="Icon right">
-    <Button EndIcon={FiPlus}>Button text</Button>
-  </Example>
+  <Example title="Default" />
+  <Example title="Icon left" />
+  <Example title="Icon right" />
 </Examples>
 
 <Examples title="Icons">
   <Example title="Icon Normal">
-      <Button StartIcon={FiX} variant="icon" size="base" color="minimal"></Button>
+    <Button StartIcon={FiX} variant="icon" size="base" color="minimal" />
   </Example>
   <Example title="Icon Small">
-      <Button StartIcon={FiX} variant="icon" size="sm" color="minimal"></Button>
+    <Button StartIcon={FiX} variant="icon" size="sm" color="minimal" />
   </Example>
-   <Example title="Icon Loading">
-      <Button StartIcon={FiX} variant="icon" size="sm" color="minimal" loading></Button>
+  <Example title="Icon Loading">
+    <Button StartIcon={FiX} variant="icon" size="sm" color="minimal" loading />
   </Example>
 </Examples>
 
 ## Anatomy
+
 Button are clickable elements that initiates user actions. Labels in the button guide users to what action will occur when the user interacts with it.
 
 ## Usage
 
-<Note>In general, there should be only one Primary button in any application context</Note>
-<Note>Aim to use maximum 2 words for the button label. Button size can be flexible based on the visual hierarchy and devices. </Note>
-<Note>Hover state variant for Mobile button is an option for assistive device.</Note>
+<Note />
+<Note />
+<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>
-        <Button color="minimal">Button text</Button>
-        <Button color="destructive">Button text</Button>
-        <Button color="destructive" variant="icon" StartIcon={FiX}></Button>
+        <Button />
+        <Button color="secondary" />
+        <Button color="minimal" />
+        <Button color="destructive" />
+        <Button color="destructive" variant="icon" StartIcon={FiX} />
       </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="destructive" variant="icon" StartIcon={FiX}></Button>
+        <Button className="sb-pseudo--hover" />
+        <Button className="sb-pseudo--hover" color="secondary" />
+        <Button className="sb-pseudo--hover" color="minimal" />
+        <Button className="sb-pseudo--hover" color="destructive" />
+        <Button className="sb-pseudo--hover" color="destructive" variant="icon" StartIcon={FiX} />
       </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="destructive" variant="icon" StartIcon={FiX}></Button>
+        <Button className="sb-pseudo--focus" />
+        <Button className="sb-pseudo--focus" color="secondary" />
+        <Button className="sb-pseudo--focus" color="minimal" />
+        <Button className="sb-pseudo--focus" color="destructive" />
+        <Button className="sb-pseudo--focus" color="destructive" variant="icon" StartIcon={FiX} />
       </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="destructive" variant="icon" StartIcon={FiX}></Button>
+        <Button loading />
+        <Button loading color="secondary" />
+        <Button loading color="minimal" />
+        <Button loading color="destructive" />
+        <Button loading color="destructive" variant="icon" StartIcon={FiX} />
       </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="destructive" variant="icon" StartIcon={FiX}></Button>
+        <Button disabled />
+        <Button disabled color="secondary" />
+        <Button disabled color="minimal" />
+        <Button disabled color="destructive" />
+        <Button disabled color="destructive" variant="icon" StartIcon={FiX} />
       </VariantRow>
     </VariantsTable>
   </Story>

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 { FiTrash, FiNavigation, FiClipboard } 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 { FiTrash, FiNavigation, FiClipboard } 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={FiTrash} variant="icon" color="secondary" />
       <Button StartIcon={FiNavigation} 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 Variatns">
-    <VariantsTable titles={["Default",'Secondary',"Minimal"]} columnMinWidth={150}>
+  <Story name="All Variatns">
+    <VariantsTable titles={["Default", "Secondary", "Minimal"]} columnMinWidth={150}>
       <VariantRow variant="Default">
         <ButtonGroup>
-          <Button StartIcon={FiTrash} variant="icon"  />
-          <Button StartIcon={FiNavigation} variant="icon"/>
-          <Button StartIcon={FiClipboard} variant="icon"  />
+          <Button StartIcon={FiTrash} variant="icon" />
+          <Button StartIcon={FiNavigation} variant="icon" />
+          <Button StartIcon={FiClipboard} variant="icon" />
         </ButtonGroup>
         <ButtonGroup>
           <Button StartIcon={FiTrash} 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={FiTrash} variant="icon"  />
-          <Button StartIcon={FiNavigation} variant="icon"  />
-          <Button StartIcon={FiClipboard} variant="icon"  />
+          <Button StartIcon={FiTrash} variant="icon" />
+          <Button StartIcon={FiNavigation} variant="icon" />
+          <Button StartIcon={FiClipboard} variant="icon" />
         </ButtonGroup>
-         <ButtonGroup combined>
-          <Button StartIcon={FiTrash} variant="icon" color="secondary"  />
-          <Button StartIcon={FiNavigation} variant="icon" color="secondary"  />
-          <Button StartIcon={FiClipboard} variant="icon" color="secondary"  />
+        <ButtonGroup combined>
+          <Button StartIcon={FiTrash} variant="icon" color="secondary" />
+          <Button StartIcon={FiNavigation} variant="icon" color="secondary" />
+          <Button StartIcon={FiClipboard} variant="icon" color="secondary" />
         </ButtonGroup>
       </VariantRow>
     </VariantsTable>

packages/ui/components/card/card.stories.mdx

@@ -1,39 +1,49 @@
-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">
-    <VariantsTable titles={['']} columnMinWidth={150}>
+    <VariantsTable titles={[""]} columnMinWidth={150}>
       <VariantRow variant="Sidebar Card">
-          <Card
-                variant="SidebarCard"
-                thumbnailUrl={tip.thumbnailUrl}
-                mediaLink={tip.mediaLink}
-                title={tip.title}
-                description={tip.description}
-                learnMore={{ href: tip.href, text: "learn more" }}
-                actionButton={{ onClick: () => console.log("Clicked") }}
-              />
+        <Card
+          variant="SidebarCard"
+          thumbnailUrl={tip.thumbnailUrl}
+          mediaLink={tip.mediaLink}
+          title={tip.title}
+          description={tip.description}
+          learnMore={{ href: tip.href, text: "learn more" }}
+          actionButton={{ onClick: () => console.log("Clicked") }}
+        />
       </VariantRow>
     </VariantsTable>
   </Story>

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 />

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-white">

packages/ui/components/empty-screen/empty-screen.stories.mdx

@@ -1,19 +1,29 @@
-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 { FiCalendar } 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.
 
 <Canvas>
-  <Story
-    name="EmptyScreen">
+  <Story name="EmptyScreen">
     <VariantsTable titles={[]} columnMinWidth={150}>
       <VariantRow variant="Default">
         <EmptyScreen

packages/ui/components/form/checkbox/checkbox.stories.mdx

@@ -1,46 +1,56 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
-import 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 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>
 
@@ -48,16 +58,16 @@ Checkboxes are used in forms and databases to indicate an answer to a question,
   <Story name="Checkbox">
     <VariantsTable titles={[""]} columnMinWidth={150}>
       <VariantRow variant="Default">
-        <Checkbox label="Default"  />
-        <Checkbox label="Error" error/>
-        <Checkbox label="Disabled"  disabled/>
-        <Checkbox label="Disabled Checked"  checked disabled />
+        <Checkbox label="Default" />
+        <Checkbox label="Error" error />
+        <Checkbox label="Disabled" disabled />
+        <Checkbox label="Disabled Checked" checked disabled />
       </VariantRow>
-        <VariantRow variant="Description As Label">
-          <Checkbox description="Default" descriptionAsLabel  />
-          <Checkbox description="Error" error descriptionAsLabel/>
-          <Checkbox description="Disabled"  disabled descriptionAsLabel/>
-          <Checkbox description="Disabled Checked"  checked disabled descriptionAsLabel/>
+      <VariantRow variant="Description As Label">
+        <Checkbox description="Default" descriptionAsLabel />
+        <Checkbox description="Error" error descriptionAsLabel />
+        <Checkbox description="Disabled" disabled descriptionAsLabel />
+        <Checkbox description="Disabled Checked" checked disabled descriptionAsLabel />
       </VariantRow>
     </VariantsTable>
   </Story>

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>

packages/ui/components/form/select/select.stories.mdx

@@ -1,102 +1,89 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Examples, Example, Note, Title,CustomArgsTable, VariantRow,VariantsTable} from '@calcom/storybook/components'
-import { FiPlus } 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 { FiPlus } 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: 0, label: "Option One" },
+  { value: 1, label: "Option Two" },
 ];
 
-
 ## 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]">
-    <SelectField
-      label={"Single Select"}
-      options={options}
-    />
+    <SelectField label="Single Select" options={options} />
   </Example>
-    <Example title="Single Select [Selected]">
-    <SelectField
-      label={"Single Select"}
-      options={options}
-      defaultValue={options[0]}
-    />
+  <Example title="Single Select [Selected]">
+    <SelectField label="Single Select" options={options} defaultValue={options[0]} />
   </Example>
   <Example title="Multi Select [Unselected]">
-    <SelectField
-      label={"Multi Select"}
-      options={options}
-      isMulti={true}
-    />
+    <SelectField label="Multi Select" options={options} isMulti={true} />
   </Example>
   <Example title="Multi Select [Selected]">
-    <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}/>
-  </Example>
-  <Example title="Icon Left">
-    WIP
-    {/* <SelectField options={options} components={{ Control }}/> */}
+    <SelectField label="Default Select" options={options} />
   </Example>
+  <Example title="Icon Left" />
 </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={FiPlus}/>
-
-const GoodSelect = props => <Select {...props} components={{ Control }} />
+const Control = <IconLeading icon={FiPlus} />;
 
+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"/>
@@ -106,10 +93,10 @@ const GoodSelect = props => <Select {...props} components={{ Control }} />
   </Example> */}
 </Examples>
 
-
 ## Select Story
+
 <Canvas>
   <Story name="Default">
-      <SelectField options={options} label={"Default Select"}/>
+    <SelectField options={options} label="Default Select" />
   </Story>
 </Canvas>

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" />
     </VariantsTable>
   </Story>
 </Canvas>

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>

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>

packages/ui/components/toast/toast.stories.mdx

@@ -1,32 +1,41 @@
-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 { SuccessToast,ErrorToast,WarningToast,DefaultToast } from './';
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  VariantsTable,
+  VariantColumn,
+  RowTitles,
+  CustomArgsTable,
+} from "@calcom/storybook/components";
+
+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>

packages/ui/components/tooltip/tooltip.stories.mdx

@@ -1,32 +1,40 @@
-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">
     <TooltipProvider>
-      <VariantsTable titles={['']} columnMinWidth={150}>
+      <VariantsTable titles={[""]} columnMinWidth={150}>
         <VariantRow variant="Default">
           <Tooltip content="Copy to clipboard">
             <span
-              className="dark:text-darkgray-50 p-2 bg-brand-500 rounded-md text-gray-100 dark:bg-darkgray-900 hover:cursor-pointer"
+              className="dark:text-darkgray-50 bg-brand-500 dark:bg-darkgray-900 rounded-md p-2 text-gray-100 hover:cursor-pointer"
               onClick={() => {
-                alert('Copied!');
-              }}>
-              Hover Me
-            </span>
+                alert("Copied!");
+              }}
+            />
           </Tooltip>
         </VariantRow>
       </VariantsTable>

packages/ui/components/top-banner/topbanner.stories.mdx

@@ -1,64 +1,74 @@
-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>

yarn.lock

@@ -12088,6 +12088,17 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+cosmiconfig@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 country-flag-icons@^1.5.4:
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/country-flag-icons/-/country-flag-icons-1.5.5.tgz#04a41c83e2ea38ea28054d4e3eff9d1ce16aec1c"
@@ -13664,6 +13675,26 @@ eslint-import-resolver-typescript@^3.5.2:
     is-glob "^4.0.3"
     synckit "^0.8.4"
 
+eslint-mdx@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/eslint-mdx/-/eslint-mdx-2.0.5.tgz#f26ae220192dd368b1c1ee670282cc28c50c244a"
+  integrity sha512-1ZzcJwJNfladtuK+uuG/MdC0idc1e3d1vCI2STOq/pLcJBGuao2biWh90vEh2M93zDiNoHJGUIU7UAxupiiHFw==
+  dependencies:
+    acorn "^8.8.0"
+    acorn-jsx "^5.3.2"
+    cosmiconfig "^7.0.1"
+    espree "^9.4.0"
+    estree-util-visit "^1.2.0"
+    remark-mdx "^2.1.3"
+    remark-parse "^10.0.1"
+    remark-stringify "^10.0.2"
+    synckit "^0.8.4"
+    tslib "^2.4.0"
+    unified "^10.1.2"
+    unist-util-visit "^4.1.1"
+    uvu "^0.5.6"
+    vfile "^5.3.4"
+
 eslint-module-utils@^2.7.3:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz#ad7e3a10552fdd0642e1e55292781bd6e34876ee"
@@ -13709,6 +13740,27 @@ eslint-plugin-jsx-a11y@^6.5.1:
     language-tags "^1.0.5"
     minimatch "^3.0.4"
 
+eslint-plugin-markdown@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-markdown/-/eslint-plugin-markdown-3.0.0.tgz#69a63ab3445076a3c2eb6fce6f5114785b19d318"
+  integrity sha512-hRs5RUJGbeHDLfS7ELanT0e29Ocyssf/7kBM+p7KluY5AwngGkDf8Oyu4658/NZSGTTq05FZeWbkxXtbVyHPwg==
+  dependencies:
+    mdast-util-from-markdown "^0.8.5"
+
+eslint-plugin-mdx@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-mdx/-/eslint-plugin-mdx-2.0.5.tgz#7717a6e2f5c8f28530b1ef7a612f55430fb4726e"
+  integrity sha512-j2xN97jSlc5IoH94rJTHqYMztl46+hHzyC8Zqjx+OI1Rvv33isyf8xSSBHN6f0z8IJmgPgGsb/fH90JbvKplXg==
+  dependencies:
+    eslint-mdx "^2.0.5"
+    eslint-plugin-markdown "^3.0.0"
+    remark-mdx "^2.1.3"
+    remark-parse "^10.0.1"
+    remark-stringify "^10.0.2"
+    tslib "^2.4.0"
+    unified "^10.1.2"
+    vfile "^5.3.4"
+
 eslint-plugin-playwright@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-playwright/-/eslint-plugin-playwright-0.9.0.tgz#e14ac6c834f2704b293fc3f45cd40d771ec2e840"
@@ -13934,6 +13986,15 @@ espree@^9.3.2:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.3.0"
 
+espree@^9.4.0:
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.1.tgz#51d6092615567a2c2cff7833445e37c28c0065bd"
+  integrity sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==
+  dependencies:
+    acorn "^8.8.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.3.0"
+
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
@@ -14010,6 +14071,14 @@ estree-util-visit@^1.0.0:
     "@types/estree-jsx" "^0.0.1"
     "@types/unist" "^2.0.0"
 
+estree-util-visit@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/estree-util-visit/-/estree-util-visit-1.2.1.tgz#8bc2bc09f25b00827294703835aabee1cc9ec69d"
+  integrity sha512-xbgqcrkIVbIG+lI/gzbvd9SGTJL4zqJKBFttUl5pP27KhAjtMKbX/mQXJ7qgyXpMgVy/zvpm0xoQQaGL8OloOw==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    "@types/unist" "^2.0.0"
+
 estree-walker@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
@@ -19109,7 +19178,7 @@ mdast-util-find-and-replace@^1.1.0:
     unist-util-is "^4.0.0"
     unist-util-visit-parents "^3.0.0"
 
-mdast-util-from-markdown@^0.8.0:
+mdast-util-from-markdown@^0.8.0, mdast-util-from-markdown@^0.8.5:
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz#d1ef2ca42bc377ecb0463a987910dae89bd9a28c"
   integrity sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==
@@ -23353,6 +23422,14 @@ remark-mdx@^2.0.0:
     mdast-util-mdx "^2.0.0"
     micromark-extension-mdxjs "^1.0.0"
 
+remark-mdx@^2.1.3:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-2.2.1.tgz#0d006436acf039b526c3b6b47ea4a44b3d544db7"
+  integrity sha512-R9wcN+/THRXTKyRBp6Npo/mcbGA2iT3N4G8qUqLA5pOEg7kBidHv8K2hHidCMYZ6DXmwK18umu0K4cicgA2PPQ==
+  dependencies:
+    mdast-util-mdx "^2.0.0"
+    micromark-extension-mdxjs "^1.0.0"
+
 remark-parse@8.0.3:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-8.0.3.tgz#9c62aa3b35b79a486454c690472906075f40c7e1"
@@ -23375,7 +23452,7 @@ remark-parse@8.0.3:
     vfile-location "^3.0.0"
     xtend "^4.0.1"
 
-remark-parse@^10.0.0:
+remark-parse@^10.0.0, remark-parse@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-10.0.1.tgz#6f60ae53edbf0cf38ea223fe643db64d112e0775"
   integrity sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==
@@ -23417,7 +23494,7 @@ remark-squeeze-paragraphs@4.0.0:
   dependencies:
     mdast-squeeze-paragraphs "^4.0.0"
 
-remark-stringify@^10.0.0:
+remark-stringify@^10.0.0, remark-stringify@^10.0.2:
   version "10.0.2"
   resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-10.0.2.tgz#50414a6983f5008eb9e72eed05f980582d1f69d7"
   integrity sha512-6wV3pvbPvHkbNnWB0wdDvVFHOe1hBRAx1Q/5g/EpH4RppAII6J8Gnwe7VbHuXaoKIF6LAg6ExTel/+kNqSQ7lw==
@@ -26306,6 +26383,11 @@ typescript@^4.7.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
   integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
 
+typescript@^4.9.4:
+  version "4.9.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
+  integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
+
 tzdata@^1.0.30:
   version "1.0.36"
   resolved "https://registry.yarnpkg.com/tzdata/-/tzdata-1.0.36.tgz#e5f3998d5e95e0e65dee417ae917a16314df69e9"
@@ -26407,7 +26489,7 @@ unified@9.2.0:
     trough "^1.0.0"
     vfile "^4.0.0"
 
-unified@^10.0.0:
+unified@^10.0.0, unified@^10.1.2:
   version "10.1.2"
   resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"
   integrity sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==
@@ -26567,6 +26649,14 @@ unist-util-visit-parents@^5.0.0:
     "@types/unist" "^2.0.0"
     unist-util-is "^5.0.0"
 
+unist-util-visit-parents@^5.1.1:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz#b4520811b0ca34285633785045df7a8d6776cfeb"
+  integrity sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+
 unist-util-visit@2.0.3, unist-util-visit@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-2.0.3.tgz#c3703893146df47203bb8a9795af47d7b971208c"
@@ -26594,6 +26684,15 @@ unist-util-visit@^4.0.0:
     unist-util-is "^5.0.0"
     unist-util-visit-parents "^5.0.0"
 
+unist-util-visit@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.2.tgz#125a42d1eb876283715a3cb5cceaa531828c72e2"
+  integrity sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.1.1"
+
 universal-base64@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/universal-base64/-/universal-base64-2.1.0.tgz#511af92b3a07340fc2647036045aadb3bedcc320"
@@ -26895,6 +26994,16 @@ uvu@^0.5.0:
     kleur "^4.0.3"
     sade "^1.7.3"
 
+uvu@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"
+  integrity sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==
+  dependencies:
+    dequal "^2.0.0"
+    diff "^5.0.0"
+    kleur "^4.0.3"
+    sade "^1.7.3"
+
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
@@ -26995,6 +27104,16 @@ vfile@^5.0.0:
     unist-util-stringify-position "^3.0.0"
     vfile-message "^3.0.0"
 
+vfile@^5.3.4:
+  version "5.3.6"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-5.3.6.tgz#61b2e70690cc835a5d0d0fd135beae74e5a39546"
+  integrity sha512-ADBsmerdGBs2WYckrLBEmuETSPyTD4TuLxTrw0DvjirxW1ra4ZwkbzG8ndsv3Q57smvHxo677MHaQrY9yxH8cA==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    is-buffer "^2.0.0"
+    unist-util-stringify-position "^3.0.0"
+    vfile-message "^3.0.0"
+
 vite@^2.9.15:
   version "2.9.15"
   resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.15.tgz#2858dd5b2be26aa394a283e62324281892546f0b"