@czi-sds/mcp 0.3.0 → 0.4.0

package/data/zeroheight-exports/Dialog.md

@@ -4,27 +4,27 @@ A Dialog is a window element that appears on top of content to provide informati
 
 ## Overview
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In napari hub + .org Codebases |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In napari hub + .org Codebases |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ------------------------------ |
 
 Dialogs are highly customizable and designed to accommodate a range of product needs and can optionally include overline text above the title, subtitle text below the title, or both. The interior of a Dialog can be filled with any content needed, whether that is to communicate information to the user or collect data from them via a form.
 
 There are five size options, each with a fixed width and minimum height (except for `xs` and `xxs` which have no minimum height):
 
-* `xxs` — `width: 270px`
-* `xs` —`width: 400px`
-* `s` —`width: 600px`, `min-height: 400px`
-* `m` —`width: 900px`, `min-height: 480px`
-* `l` —`width: 1200px`, `min-height: 600px`
+- `xxs` — `width: 270px`
+- `xs` —`width: 400px`
+- `s` —`width: 600px`, `min-height: 400px`
+- `m` —`width: 900px`, `min-height: 480px`
+- `l` —`width: 1200px`, `min-height: 600px`
 
 Dialogs are dismissible in a few different ways. Regardless of how a Dialog is dismissed, it will result in any selections the user has made within it being lost.
 
 Dialogs may be dismissed by:
 
-* Clicking an action Button that is configured to close, cancel, or complete an action occurring in the Dialog
-* Pressing the keyboard Esc key
-* Clicking the close Icon Button
-* Clicking outside of the Dialog. Doing this will result in any selections the user has made being lost, so it is recommended that the `canOutsideClickClose` prop remain set to `false` (the default setting) in instances where losing entered information would be a significant burden to the user
+- Clicking an action Button that is configured to close, cancel, or complete an action occurring in the Dialog
+- Pressing the keyboard Esc key
+- Clicking the close Icon Button
+- Clicking outside of the Dialog. Doing this will result in any selections the user has made being lost, so it is recommended that the `canOutsideClickClose` prop remain set to `false` (the default setting) in instances where losing entered information would be a significant burden to the user
 
 ---
 
@@ -42,12 +42,12 @@ A backdrop appears behind the active Dialog to bring emphasis to it as well as i
 
 ## Dialog Component
 
-| Below you will find an interactive Storybook iframe for Dialogs.  Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |   | **Jump to component:** Dialog |
-| --- | --- | --- |
+| Below you will find an interactive Storybook iframe for Dialogs. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |     | **Jump to component:** Dialog |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ----------------------------- |
 
 ---
 
->This component appears as it is in the default SDS codebase. Once imported into the napari hub or napari.org codebases, use a theme file to enable the napari visual appearance customization.
+> This component appears as it is in the default SDS codebase. Once imported into the napari hub or napari.org codebases, use a theme file to enable the napari visual appearance customization.
 
 ### Dialog
 
@@ -61,34 +61,34 @@ A Dialog is a window element that appears on top of content to provide informati
 
 ## Dialog Variants
 
-| The interior of a Dialog can be filled with any content needed, whether that is to communicate information to the user or collect data from them via a form. They come in four different sizes, each of which can optionally include a close Tertiary Icon Button in the top right corner, artwork above the title, and action Button(s) if the Dialog is prompting the user to take an action. In addition to their title, Dialogs can include overline text above the title, a subtitle below the title, or both.  Follow the usage criteria accompanying each variant as a guide for selecting the correct Dialog for any given use case. |   | **Jump to variant:** Persistent Dismissible Use Cases |
-| --- | --- | --- |
+| The interior of a Dialog can be filled with any content needed, whether that is to communicate information to the user or collect data from them via a form. They come in four different sizes, each of which can optionally include a close Tertiary Icon Button in the top right corner, artwork above the title, and action Button(s) if the Dialog is prompting the user to take an action. In addition to their title, Dialogs can include overline text above the title, a subtitle below the title, or both. Follow the usage criteria accompanying each variant as a guide for selecting the correct Dialog for any given use case. |     | **Jump to variant:** Persistent Dismissible Use Cases |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------------------------- |
 
 ---
 
 ## Dialog
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In CZ GEN EPI Codebase |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ GEN EPI Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ---------------------- |
 
 Dialogs are highly customizable and designed to accommodate a range of product needs; any combination of the following properties can be used:
 
-* Overline text above the title, subtitle text below the title, or both
-* Artwork above the title, whether a logo, icon, or illustration
+- Overline text above the title, subtitle text below the title, or both
+- Artwork above the title, whether a logo, icon, or illustration
 
 There are four size options, each with a fixed width and minimum height (except for `xs` which has no minimum height):
 
-* `xs` —`width: 400px`
-* `s` —`width: 600px`, `min-height: 400px`
-* `m` —`width: 900px`, `min-height: 480px`
-* `l` —`width: 1200px`, `min-height: 600px`
+- `xs` —`width: 400px`
+- `s` —`width: 600px`, `min-height: 400px`
+- `m` —`width: 900px`, `min-height: 480px`
+- `l` —`width: 1200px`, `min-height: 600px`
 
 Dialogs may be dismissed by:
 
-* Clicking an action Button that is configured to close, cancel, or complete a multi-step workflow occurring in the Dialog
-* Pressing the keyboard Esc key
-* Clicking the close Tertiary Icon Button on Dismissible Dialogs
-* Clicking outside of the Dialog. Doing this will result in any selections the user has made being lost, so it is recommended that the `canOutsideClickClose` prop remain set to `false` (the default setting) in instances where losing entered information would be a significant burden to the user
+- Clicking an action Button that is configured to close, cancel, or complete a multi-step workflow occurring in the Dialog
+- Pressing the keyboard Esc key
+- Clicking the close Tertiary Icon Button on Dismissible Dialogs
+- Clicking outside of the Dialog. Doing this will result in any selections the user has made being lost, so it is recommended that the `canOutsideClickClose` prop remain set to `false` (the default setting) in instances where losing entered information would be a significant burden to the user
 
 ### Persistent Dialog
 
@@ -98,7 +98,7 @@ Persistent Dialogs are generally used in multi-step workflows where dismissing t
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
- 
+
 
 ---
 
@@ -144,7 +144,7 @@ Nested Dialogs should only be used in specific scenarios, most notably when a us
 
 Avoid using nested dialogs when possible because it introduces layers of complexity to pages and may make it more difficult for users to anticipate the results of their actions. It may also impede usability by making it more difficult for users to quickly exit a flow. Instead, explore utilizing a multi-step Dialog workflow (see below).
 
- 
+
 
 ### Multi-step Dialog Workflow
 
@@ -158,12 +158,12 @@ The Dialog should not be dismissible and the `canOutsideClickClose` prop should
 
 ## Dialog Component
 
-| Below you will find an interactive Storybook iframe for Dialogs.  Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |   | **Jump to component:** Dialog |
-| --- | --- | --- |
+| Below you will find an interactive Storybook iframe for Dialogs. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |     | **Jump to component:** Dialog |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ----------------------------- |
 
 ---
 
->This component appears as it is in the default SDS codebase. Once imported into the CZ GEN EPI codebase, use a theme file to enable the CZ GEN EPI visual appearance customization.
+> This component appears as it is in the default SDS codebase. Once imported into the CZ GEN EPI codebase, use a theme file to enable the CZ GEN EPI visual appearance customization.
 
 ### Dialog
 
@@ -177,34 +177,34 @@ A Dialog is a window element that appears on top of content to provide informati
 
 ## Dialog Variants
 
-| The interior of a Dialog can be filled with any content needed, whether that is to communicate information to the user or collect data from them via a form. They come in four different sizes, each of which can optionally include a close Tertiary Icon Button in the top right corner, artwork above the title, and action Button(s) if the Dialog is prompting the user to take an action. In addition to their title, Dialogs can include overline text above the title, a subtitle below the title, or both.  Follow the usage criteria accompanying each variant as a guide for selecting the correct Dialog for any given use case. |   | **Jump to variant:** Persistent Dismissible Use Cases |
-| --- | --- | --- |
+| The interior of a Dialog can be filled with any content needed, whether that is to communicate information to the user or collect data from them via a form. They come in four different sizes, each of which can optionally include a close Tertiary Icon Button in the top right corner, artwork above the title, and action Button(s) if the Dialog is prompting the user to take an action. In addition to their title, Dialogs can include overline text above the title, a subtitle below the title, or both. Follow the usage criteria accompanying each variant as a guide for selecting the correct Dialog for any given use case. |     | **Jump to variant:** Persistent Dismissible Use Cases |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------------------------- |
 
 ---
 
 ## Dialog
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In CZ ID Codebase |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
 
 Dialogs are highly customizable and designed to accommodate a range of product needs; any combination of the following properties can be used:
 
-* Overline text above the title, subtitle text below the title, or both
-* Artwork above the title, whether a logo, icon, or illustration
+- Overline text above the title, subtitle text below the title, or both
+- Artwork above the title, whether a logo, icon, or illustration
 
 There are four size options, each with a fixed width and minimum height (except for `xs` which has no minimum height):
 
-* `xs` —`width: 400px`
-* `s` —`width: 600px`, `min-height: 400px`
-* `m` —`width: 900px`, `min-height: 480px`
-* `l` —`width: 1200px`, `min-height: 600px`
+- `xs` —`width: 400px`
+- `s` —`width: 600px`, `min-height: 400px`
+- `m` —`width: 900px`, `min-height: 480px`
+- `l` —`width: 1200px`, `min-height: 600px`
 
 Dialogs may be dismissed by:
 
-* Clicking an action Button that is configured to close, cancel, or complete a multi-step workflow occurring in the Dialog
-* Pressing the keyboard Esc key
-* Clicking the close Tertiary Icon Button on Dismissible Dialogs
-* Clicking outside of the Dialog. Doing this will result in any selections the user has made being lost, so it is recommended that the `canOutsideClickClose` prop remain set to `false` (the default setting) in instances where losing entered information would be a significant burden to the user
+- Clicking an action Button that is configured to close, cancel, or complete a multi-step workflow occurring in the Dialog
+- Pressing the keyboard Esc key
+- Clicking the close Tertiary Icon Button on Dismissible Dialogs
+- Clicking outside of the Dialog. Doing this will result in any selections the user has made being lost, so it is recommended that the `canOutsideClickClose` prop remain set to `false` (the default setting) in instances where losing entered information would be a significant burden to the user
 
 ### Persistent Dialog
 
@@ -214,7 +214,7 @@ Persistent Dialogs are generally used in multi-step workflows where dismissing t
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
- 
+
 
 ---
 
@@ -242,7 +242,7 @@ Click on each state below to enter inspect view and get details on its code attr
 
 In instances where the length of content contained in the Dialog results in the Dialog filling the entire height of the screen, there must be a minimum of `spaceXxl` margin above and below the Dialog window. The Dialog content scrolls when it exceeds the max-height of the dialog window; title, overline, subtitle, and any action Buttons are anchored to the top and bottom during scrolling.
 
- 
+
 
 ---
 
@@ -262,7 +262,7 @@ Nested Dialogs should only be used in specific scenarios, most notably when a us
 
 Avoid using nested dialogs when possible because it introduces layers of complexity to pages and may make it more difficult for users to anticipate the results of their actions. It may also impede usability by making it more difficult for users to quickly exit a flow. Instead, explore utilizing a multi-step Dialog workflow (see below).
 
- 
+
 
 ### Multi-step Dialog Workflow
 
@@ -276,8 +276,8 @@ The Dialog should not be dismissible and the `canOutsideClickClose` prop should
 
 ## Dialog Component
 
-| Below you will find an interactive Storybook iframe for Dialogs.  Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |   | **Jump to component:** Dialog |
-| --- | --- | --- |
+| Below you will find an interactive Storybook iframe for Dialogs. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |     | **Jump to component:** Dialog |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ----------------------------- |
 
 ---
 
@@ -285,7 +285,7 @@ The Dialog should not be dismissible and the `canOutsideClickClose` prop should
 
 Storybook
 
- 
+
 
 ---
 
@@ -295,8 +295,8 @@ A Dialog is a window element that appears on top of content to provide informati
 
 ## Overview
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In Code |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In Code |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ------- |
 
 ### Dialog Variants
 
@@ -306,24 +306,24 @@ There are two Dialog variants available—Persistent and Dismissible. They are h
 
 Any combination of the following properties can be used:
 
-* One or two Button(s), positioned to the right or left side of the dialog (positioned right by default)
-* Overline text above the title
-* Subtitle text below the title
-* Artwork above the title (logo, icon, or illustration)
+- One or two Button(s), positioned to the right or left side of the dialog (positioned right by default)
+- Overline text above the title
+- Subtitle text below the title
+- Artwork above the title (logo, icon, or illustration)
 
 There are four size options, each with a fixed width and minimum height (except for `xs` which has no minimum height):
 
-* `xs` —`width: 400px`
-* `s` —`width:  600px`, `min-height: 400px`
-* `m` —`width: 900px`, `min-height: 480px`
-* `l` —`width: 1200px`, `min-height: 600px`
+- `xs` —`width: 400px`
+- `s` —`width:  600px`, `min-height: 400px`
+- `m` —`width: 900px`, `min-height: 480px`
+- `l` —`width: 1200px`, `min-height: 600px`
 
 Users can dismiss them by:
 
-* Clicking an action Button that is configured to close, cancel, or complete a multi-step workflow occurring in the Dialog
-* Pressing the keyboard `Esc` key
-* Clicking the close Tertiary Icon Button (Dismissible variant only)
-* Clicking outside of the Dialog. Doing this will result in any selections the user has made being lost, so it is recommended that this be disabled in instances where losing entered information would be a significant burden to the user
+- Clicking an action Button that is configured to close, cancel, or complete a multi-step workflow occurring in the Dialog
+- Pressing the keyboard `Esc` key
+- Clicking the close Tertiary Icon Button (Dismissible variant only)
+- Clicking outside of the Dialog. Doing this will result in any selections the user has made being lost, so it is recommended that this be disabled in instances where losing entered information would be a significant burden to the user
 
 ---
 
@@ -341,14 +341,14 @@ Use this variant when the user is unable to dismiss the Dialog without making a
 
 Persistent Dialogs are generally used:
 
-* In multi-step workflows where dismissing the Dialog would result in a loss of progress
-* When there is a need for users to confirm they have read the content on the Dialog before proceeding, such as when they are being directed to an external site (see Dialog Use Cases section below for details).
+- In multi-step workflows where dismissing the Dialog would result in a loss of progress
+- When there is a need for users to confirm they have read the content on the Dialog before proceeding, such as when they are being directed to an external site (see Dialog Use Cases section below for details).
 
 | 1 Button | 2 Buttons | 2 Buttons, left-aligned |
-| --- | --- | --- |
+| -------- | --------- | ----------------------- |
 
 | 2 Buttons, rounded | 2 Buttons + Overline + Subtitle | 2 Buttons + Artwork |
-| --- | --- | --- |
+| ------------------ | ------------------------------- | ------------------- |
 
 ---
 
@@ -357,10 +357,10 @@ Persistent Dialogs are generally used:
 Use this variant to allow the user the ability to manually dismiss the Dialog by clicking the close Tertiary Icon Button in the Dialog's upper right corner. Dismissing the Dialog will result in any selections the user has made being lost. Dismissible Dialogs should not be used in multi-step workflows where closing the Dialog would result in a loss of progress (see Dialog Use Cases section below for details).
 
 | 0 Buttons | 1 Button | 2 Buttons | 2 Buttons, left-aligned |
-| --- | --- | --- | --- |
+| --------- | -------- | --------- | ----------------------- |
 
 | 2 Buttons, rounded | 2 Buttons + Overline + Subtitle | 2 Buttons + Artwork |
-| --- | --- | --- |
+| ------------------ | ------------------------------- | ------------------- |
 
 ---
 
@@ -384,7 +384,7 @@ Details and guidelines around complex Dialog use cases, such as nested Dialogs a
 
 #### Nested Dialogs
 
-Nested Dialogs should only be used in specific scenarios, most notably when a user is being directed to an external site and a final confirmation is needed. 
+Nested Dialogs should only be used in specific scenarios, most notably when a user is being directed to an external site and a final confirmation is needed.
 
 Avoid using nested dialogs when possible because it introduces layers of complexity to pages and may make it more difficult for users to anticipate the results of their actions. It may also impede usability by making it more difficult for users to quickly exit a flow. Instead, explore utilizing a multi-step Dialog workflow (see below).
 
@@ -398,7 +398,7 @@ The Dialog should not be dismissible to prevent any accidental loss of progress.
 
 ## Code
 
->**Note:** The code examples below must install dependencies before displaying and may take extra time to load
+> **Note:** The code examples below must install dependencies before displaying and may take extra time to load
 
 ## Dialog
 
@@ -408,17 +408,17 @@ The `Dialog` component's source code in the SDS codebase can be found here.
 
 The `Dialog` component is accompanied by a number of other accessory components that can be used to help compose dialogs, but they are not required:
 
-* Main `Dialog` component source code
-* `DialogActions`  source code
-* `DialogContent`  source code
-* `DialogPaper`  source code
-* `DialogTitle`  source code
+- Main `Dialog` component source code
+- `DialogActions` source code
+- `DialogContent` source code
+- `DialogPaper` source code
+- `DialogTitle` source code
 
 ### SDS vs MUI
 
-The SDS `Dialog` component is built on top of MUI's `Dialog` component. SDS's `Dialog` passes a styled version of the `Paper` component  (`DialogPaper`) to the `PaperComponent` prop. You can further style this `DialogPaper` component  and pass it to your SDS `Dialog` via the `PaperComponent` prop (a prop of SDS `Dialog`) if needed.
+The SDS `Dialog` component is built on top of MUI's `Dialog` component. SDS's `Dialog` passes a styled version of the `Paper` component (`DialogPaper`) to the `PaperComponent` prop. You can further style this `DialogPaper` component and pass it to your SDS `Dialog` via the `PaperComponent` prop (a prop of SDS `Dialog`) if needed.
 
-The SDS `Dialog` does **not** support the `fullScreen` prop that the MUI component has (which allows dialogs to  overtake the full screen).
+The SDS `Dialog` does **not** support the `fullScreen` prop that the MUI component has (which allows dialogs to overtake the full screen).
 
 ### MUI Documentation
 
@@ -432,30 +432,30 @@ Any custom SDS props and MUI props required for implementation are found on the
 
 Props table for the Dialog component.
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `canClickOutsideClose` | `bool` | `false` | A boolean prop that determines whether clicking outside of the Dialog should trigger its closure. |
-| `onClose` | `func` | `function(event: object, reason: string) => void` | A callback function that is invoked when the Dialog is closed. It receives two parameters: `event`. The event source of the callback. `reason`. Can be: .`escapeKeyDown`., .`backdropClick`.  |
-| `sdsSize` | `"xs"` `| "s"` `| "m"` `| "l"` | `m` | Controls the size of the Dialog component.  |
+| Name                   | Type     | Default                                           | Description                                                                                                                                                                                  |
+| ---------------------- | -------- | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | --- | ------------------------------------------ |
+| `canClickOutsideClose` | `bool`   | `false`                                           | A boolean prop that determines whether clicking outside of the Dialog should trigger its closure.                                                                                            |
+| `onClose`              | `func`   | `function(event: object, reason: string) => void` | A callback function that is invoked when the Dialog is closed. It receives two parameters: `event`. The event source of the callback. `reason`. Can be: .`escapeKeyDown`., .`backdropClick`. |
+| `sdsSize`              | `"xs"` ` | "s"` `                                            | "m"` `                                                                                                                                                                                       | "l"` | `m` | Controls the size of the Dialog component. |
 
 #### DialogTitle Props
 
 Props table for the DialogTitle component.
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `title` | `string` | `-` | This prop represents the title text to be displayed in the Dialog component.  |
-| `subtitle` | `string` | `-` | The subtitle prop allows you to include additional descriptive text beneath the title within the Dialog. |
-| `onClose` | `func` | `function(event: object, reason: string) => void` | When the `onClose` prop is set, it results in the appearance of a small `x` icon in the top-right corner of the Dialog. This `x` icon provides users with a visual cue to close the Dialog, and clicking on it invokes the specified `onClose` function. |
-| `open` | `bool` | `false` | If `true`, the component is shown. |
+| Name       | Type     | Default                                           | Description                                                                                                                                                                                                                                              |
+| ---------- | -------- | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`    | `string` | `-`                                               | This prop represents the title text to be displayed in the Dialog component.                                                                                                                                                                             |
+| `subtitle` | `string` | `-`                                               | The subtitle prop allows you to include additional descriptive text beneath the title within the Dialog.                                                                                                                                                 |
+| `onClose`  | `func`   | `function(event: object, reason: string) => void` | When the `onClose` prop is set, it results in the appearance of a small `x` icon in the top-right corner of the Dialog. This `x` icon provides users with a visual cue to close the Dialog, and clicking on it invokes the specified `onClose` function. |
+| `open`     | `bool`   | `false`                                           | If `true`, the component is shown.                                                                                                                                                                                                                       |
 
 #### DialogActions Props
 
 Props table for the DialogActions component.
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `buttonPosition` | `"left" | "right"` | `left` | Specifies the position of action buttons within the Dialog component. It can be set to either `left` or `right` , allowing you to control the alignment of these buttons. |
+| Name             | Type    | Default  | Description |
+| ---------------- | ------- | -------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `buttonPosition` | `"left" | "right"` | `left`      | Specifies the position of action buttons within the Dialog component. It can be set to either `left` or `right` , allowing you to control the alignment of these buttons. |
 
 ### Code examples
 
@@ -488,13 +488,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -505,13 +503,19 @@ h1 {
 ```tsx
 // Most minimal Dialog (just has the basic requirements)
 
-import {useState} from "react";
-import { Button, Dialog, DialogTitle, DialogContent, DialogActions } from "@czi-sds/components";
+import { useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+} from "@czi-sds/components";
 import "./styles.css";
 
 function App() {
   const [isOpen, setIsOpen] = useState(true);
-  
+
   function handleClick() {
     setIsOpen(true);
   }
@@ -519,7 +523,7 @@ function App() {
   function handleClose() {
     setIsOpen(false);
   }
-  
+
   return (
     <div className="app">
       <Button sdsStyle="minimal" sdsType="primary" onClick={handleClick}>
@@ -532,9 +536,10 @@ function App() {
           onClose={handleClose}
         />
         <DialogContent>
-          Embark on a journey of continuous improvement with our treasure trove of learning 
-          materials. This section hosts an array of tutorials, guides, and insightful 
-          articles designed to enhance your skills and deepen your understanding. 
+          Embark on a journey of continuous improvement with our treasure trove
+          of learning materials. This section hosts an array of tutorials,
+          guides, and insightful articles designed to enhance your skills and
+          deepen your understanding.
         </DialogContent>
       </Dialog>
     </div>
@@ -581,13 +586,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -608,13 +612,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
@@ -648,13 +663,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -663,13 +676,19 @@ h1 {
 **/App.tsx**
 
 ```tsx
-import {useState} from "react";
-import { Button, Dialog, DialogTitle, DialogContent, DialogActions } from "@czi-sds/components";
+import { useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+} from "@czi-sds/components";
 import "./styles.css";
 
 function App() {
   const [isOpen, setIsOpen] = useState(true);
-  
+
   function handleClick() {
     setIsOpen(true);
   }
@@ -677,25 +696,30 @@ function App() {
   function handleClose() {
     setIsOpen(false);
   }
-  
+
   return (
     <div className="app">
       <Button sdsStyle="minimal" sdsType="primary" onClick={handleClick}>
         Open Dialog
       </Button>
-      <Dialog onClose={handleClose} open={isOpen} sdsSize="xs" canClickOutsideClose={false}>
+      <Dialog
+        onClose={handleClose}
+        open={isOpen}
+        sdsSize="xs"
+        canClickOutsideClose={false}
+      >
         <DialogTitle
           title="Welcome"
           subtitle="New features showcase"
           onClose={handleClose}
         />
         <DialogContent>
-          We are thrilled to introduce you to our latest enhancements and features. 
-          In this interactive showcase, you'll have the opportunity to explore a 
-          wide range of improvements designed to elevate your user experience. 
-          Whether it's streamlined navigation, enhanced performance, or delightful 
-          visual enhancements, we've got something for everyone. Dive in and 
-          discover what's new!
+          We are thrilled to introduce you to our latest enhancements and
+          features. In this interactive showcase, you'll have the opportunity to
+          explore a wide range of improvements designed to elevate your user
+          experience. Whether it's streamlined navigation, enhanced performance,
+          or delightful visual enhancements, we've got something for everyone.
+          Dive in and discover what's new!
         </DialogContent>
       </Dialog>
     </div>
@@ -742,13 +766,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -769,13 +792,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
@@ -809,13 +843,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -824,13 +856,19 @@ h1 {
 **/App.tsx**
 
 ```tsx
-import {useState} from "react";
-import { Button, Dialog, DialogTitle, DialogContent, DialogActions } from "@czi-sds/components";
+import { useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+} from "@czi-sds/components";
 import "./styles.css";
 
 function App() {
   const [isOpen, setIsOpen] = useState(true);
-  
+
   function handleClick() {
     setIsOpen(true);
   }
@@ -838,7 +876,7 @@ function App() {
   function handleClose() {
     setIsOpen(false);
   }
-  
+
   return (
     <div className="app">
       <Button sdsStyle="minimal" sdsType="primary" onClick={handleClick}>
@@ -851,13 +889,12 @@ function App() {
           onClose={handleClose}
         />
         <DialogContent>
-          Embark on a journey of continuous improvement with our treasure trove of learning 
-          materials. This section hosts an array of tutorials, guides, and insightful 
-          articles designed to enhance your skills and deepen your understanding. 
+          Embark on a journey of continuous improvement with our treasure trove
+          of learning materials. This section hosts an array of tutorials,
+          guides, and insightful articles designed to enhance your skills and
+          deepen your understanding.
         </DialogContent>
-        <DialogActions
-          buttonPosition="right"
-        >
+        <DialogActions buttonPosition="right">
           <Button sdsStyle="square" sdsType="secondary" onClick={handleClose}>
             Secondary Action
           </Button>
@@ -910,13 +947,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -937,13 +973,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
@@ -977,13 +1024,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -994,13 +1039,19 @@ h1 {
 ```tsx
 // Most minimal Dialog (just has the basic requirements)
 
-import {useState} from "react";
-import { Button, Dialog, DialogTitle, DialogContent, DialogActions } from "@czi-sds/components";
+import { useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+} from "@czi-sds/components";
 import "./styles.css";
 
 function App() {
   const [isOpen, setIsOpen] = useState(true);
-  
+
   function handleClick() {
     setIsOpen(true);
   }
@@ -1008,7 +1059,7 @@ function App() {
   function handleClose() {
     setIsOpen(false);
   }
-  
+
   return (
     <div className="app">
       <Button sdsStyle="minimal" sdsType="primary" onClick={handleClick}>
@@ -1021,26 +1072,24 @@ function App() {
           onClose={handleClose}
         />
         <DialogContent>
-          Embark on a fulfilling journey of continuous improvement with our vast 
-          repository of valuable learning resources. Within this dedicated section, 
-          you'll find an extensive collection of meticulously crafted tutorials, 
-          comprehensive guides, and thought-provoking articles meticulously designed 
-          to enrich your skill set and provide profound insights into your field of interest.
-
-          Explore a diverse range of topics, from fundamental principles to advanced techniques, 
-          as we aim to empower you with knowledge that transcends boundaries. Whether 
-          you're a novice eager to build a strong foundation or a seasoned professional 
-          seeking to stay at the forefront of your industry, our treasure trove of educational 
-          materials is your gateway to honing your expertise.
-
-          Unlock your potential, expand your horizons, and stay ahead of the curve by immersing 
-          yourself in this wealth of knowledge. We believe that continuous learning is the key 
-          to personal and professional growth, and we're excited to accompany you on this 
+          Embark on a fulfilling journey of continuous improvement with our vast
+          repository of valuable learning resources. Within this dedicated
+          section, you'll find an extensive collection of meticulously crafted
+          tutorials, comprehensive guides, and thought-provoking articles
+          meticulously designed to enrich your skill set and provide profound
+          insights into your field of interest. Explore a diverse range of
+          topics, from fundamental principles to advanced techniques, as we aim
+          to empower you with knowledge that transcends boundaries. Whether
+          you're a novice eager to build a strong foundation or a seasoned
+          professional seeking to stay at the forefront of your industry, our
+          treasure trove of educational materials is your gateway to honing your
+          expertise. Unlock your potential, expand your horizons, and stay ahead
+          of the curve by immersing yourself in this wealth of knowledge. We
+          believe that continuous learning is the key to personal and
+          professional growth, and we're excited to accompany you on this
           educational journey, every step of the way.
         </DialogContent>
-        <DialogActions
-          buttonPosition="left"
-        >
+        <DialogActions buttonPosition="left">
           <Button sdsStyle="square" sdsType="primary" onClick={handleClose}>
             Primary Action
           </Button>
@@ -1093,13 +1142,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -1120,14 +1168,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
-