@czi-sds/mcp 0.3.0 → 0.4.0

package/data/zeroheight-exports/Banner.md

@@ -6,15 +6,15 @@ Banners are used to communicate product status updates to users, allowing the pr
 
 ## Banner Variants
 
-| Banners are meant to communicate product status updates to users such as system maintenance, new features, known product bugs or issues. etc. and are not meant to be used in response to an action the user has taken within the product. Use a Callout or Notification for these purposes.  There are two Banner variants meant to be used in an alternating manner, allowing multiple Banners to be stacked together while maintaining the ability to differentiate between them.  Both Banner variants can optionally be set to be manually dismissible by the user, allowing them to hide the Banner from view once it has been read.  Banners span the full width of the page.  Follow the usage criteria accompanying each variant as a guide for selecting the correct Banner for any given use case. |   | **Jump to variant:** Primary Secondary |
-| --- | --- | --- |
+| Banners are meant to communicate product status updates to users such as system maintenance, new features, known product bugs or issues. etc. and are not meant to be used in response to an action the user has taken within the product. Use a Callout or Notification for these purposes. There are two Banner variants meant to be used in an alternating manner, allowing multiple Banners to be stacked together while maintaining the ability to differentiate between them. Both Banner variants can optionally be set to be manually dismissible by the user, allowing them to hide the Banner from view once it has been read. Banners span the full width of the page. Follow the usage criteria accompanying each variant as a guide for selecting the correct Banner for any given use case. |     | **Jump to variant:** Primary Secondary |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | -------------------------------------- |
 
 ---
 
 ## Banner
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In CZ ID Codebase |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
 
 ### Primary Banner
 
@@ -24,7 +24,7 @@ If additional context or information is needed beyond the space available on the
 
 When the information being communicated on the Banner is intended to remain persistent on the screen and is not manually dismissible by the user, use a persistent Banner. To allow the user to manually dismiss the Banner, use a dismissible Banner.
 
- 
+
 
 ---
 
@@ -52,8 +52,8 @@ These rules establish how much margin should exist between and around elements.
 
 ## Banner Component
 
-| Below you will find an interactive Storybook iframe for Banners.  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:** Banner |
-| --- | --- | --- |
+| Below you will find an interactive Storybook iframe for Banners. 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:** Banner |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ----------------------------- |
 
 ---
 
@@ -69,8 +69,8 @@ Banners are used to communicate product status updates to users, allowing the pr
 
 ## Overview
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In Code |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In Code |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ------- |
 
 ### Banner Variants
 
@@ -101,7 +101,7 @@ If additional context or information is needed beyond the space available on the
 When the information being communicated on the Banner is intended to remain persistent on the screen and is not manually dismissible by the user, use a persistent Banner. To allow the user to manually dismiss the Banner, use a dismissible Banner.
 
 | Default (Persistent) | Default (Dismissible) | Hover (Dismissible) |
-| --- | --- | --- |
+| -------------------- | --------------------- | ------------------- |
 
 ---
 
@@ -114,7 +114,7 @@ If additional context or information is needed beyond the space available on the
 When the information being communicated on the Banner is intended to remain persistent on the screen and is not manually dismissible by the user, use a persistent Banner. To allow the user to manually dismiss the Banner, use a dismissible Banner.
 
 | Default (Persistent) | Default (Dismissible) | Hover (Dismissible) |
-| --- | --- | --- |
+| -------------------- | --------------------- | ------------------- |
 
 ---
 
@@ -133,16 +133,16 @@ Each intent is demonstrated below using the Dismissible variant for reference. R
 #### Primary
 
 | Info | Negative | Notice | Positive |
-| --- | --- | --- | --- |
+| ---- | -------- | ------ | -------- |
 
 #### Secondary
 
 | Info | Negative | Notice | Positive |
-| --- | --- | --- | --- |
+| ---- | -------- | ------ | -------- |
 
 ## 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
 
 ## Banner
 
@@ -154,14 +154,14 @@ The component's source code in the SDS codebase can be found here.
 
 Any custom SDS props and MUI props required for implementation are found on the table below. See the MUI documentation for additional optional props.
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `dismissed` | `bool` | `false` | If `true`, the banner has been dismissed by the user.  |
-| `dismissible` | `bool` | `true` | If `true`, the banner can be dismissed by the user.  |
-| `sdsType` | `"primary"` `| "secondary"` | `primary` | The `primary` variant has a `400` background color and white text color.  The `secondary` variant has a `100` background color and `primary` text color.  |
-| `icon` | `ReactNode` | `-` | The icon to be displayed within the banner. If not provided, a`InfoCircle` icon will be displayed. |
-| `sdsIconProps` | `Partial<IconProps>` | `-` | Additional props to be passed to the icon component. |
-| `onClose` | `fn` | `-` | Callback fired when the component requests to be closed. When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked. **Signature:**`function(event: React.SyntheticEvent) => void` `event`. The event source of the callback. |
+| Name           | Type                 | Default      | Description                                                                                                                                                                                                                                                                            |
+| -------------- | -------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `dismissed`    | `bool`               | `false`      | If `true`, the banner has been dismissed by the user.                                                                                                                                                                                                                                  |
+| `dismissible`  | `bool`               | `true`       | If `true`, the banner can be dismissed by the user.                                                                                                                                                                                                                                    |
+| `sdsType`      | `"primary"` `        | "secondary"` | `primary`                                                                                                                                                                                                                                                                              | The `primary` variant has a `400` background color and white text color. The `secondary` variant has a `100` background color and `primary` text color. |
+| `icon`         | `ReactNode`          | `-`          | The icon to be displayed within the banner. If not provided, a`InfoCircle` icon will be displayed.                                                                                                                                                                                     |
+| `sdsIconProps` | `Partial<IconProps>` | `-`          | Additional props to be passed to the icon component.                                                                                                                                                                                                                                   |
+| `onClose`      | `fn`                 | `-`          | Callback fired when the component requests to be closed. When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked. **Signature:**`function(event: React.SyntheticEvent) => void` `event`. The event source of the callback. |
 
 ### Code examples
 
@@ -194,13 +194,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -262,13 +260,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -289,13 +286,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"
+}
 ```
 
 ---
@@ -329,13 +337,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -397,13 +403,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -424,20 +429,31 @@ 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"
+}
 ```
 
 ---
 
 #### Banner with a custom background color
 
-This example shows how to implement a `Banner` component with a custom background color. 
+This example shows how to implement a `Banner` component with a custom background color.
 
 **/styles.css**
 
@@ -464,13 +480,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -536,13 +550,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -563,14 +576,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"
+}
 ```
 
 ---
-

package/data/zeroheight-exports/Borders.md

@@ -4,55 +4,55 @@ Borders are the lines that go around elements to help contain them while visuall
 
 ### Types of Borders
 
-| **Visual** |   | **Border Type** |   | **Usage** |
-| --- | --- | --- | --- | --- |
-|  |   | Standard Border |   |  Base style for all borders. Borders are used on secondary buttons, input fields, modals, dropdown menus, etc.  |
-|   |   | Dashed Border |   | Dashed borders are used in file upload/drag and drop containers and Dashed Links. |
+| **Visual** |     | **Border Type** |     | **Usage**                                                                                                     |
+| ---------- | --- | --------------- | --- | ------------------------------------------------------------------------------------------------------------- |
+|            |     | Standard Border |     | Base style for all borders. Borders are used on secondary buttons, input fields, modals, dropdown menus, etc. |
+|            |     | Dashed Border   |     | Dashed borders are used in file upload/drag and drop containers and Dashed Links.                             |
 
 ### Base Borders
 
 These borders are used throughout the SDS whenever borders in Base colors are needed.
 
-| **Visual** |   | **Usage** |   | **CSS / SCSS Variables** |   | **Value** |
-| --- | --- | --- | --- | --- | --- | --- |
-|   |   | Default |   | `--sds-border-base-default` `$sds-border-base-default` |   | `1px solid #999999` |
-|   |   | Hover |   | `--sds-border-base-hover` `$sds-border-base-hover` |   | `1px solid #000000` |
-|   |   | Disabled |   | `--sds-border-base-disabled` `$sds-border-base-disabled` |   | `1px solid #cccccc` |
-|   |   | Table borders only |   | `--sds-border-base-table` `$sds-border-base-table` |   | `1px solid #cccccc` |
-|   |   | Dividers only (`<hr>`) |   | `--sds-border-base-divider` `$sds-border-base-divider` |   | `1px solid #eaeaea` |
+| **Visual** |     | **Usage**              |     | **CSS / SCSS Variables**                                 |     | **Value**           |
+| ---------- | --- | ---------------------- | --- | -------------------------------------------------------- | --- | ------------------- |
+|            |     | Default                |     | `--sds-border-base-default` `$sds-border-base-default`   |     | `1px solid #999999` |
+|            |     | Hover                  |     | `--sds-border-base-hover` `$sds-border-base-hover`       |     | `1px solid #000000` |
+|            |     | Disabled               |     | `--sds-border-base-disabled` `$sds-border-base-disabled` |     | `1px solid #cccccc` |
+|            |     | Table borders only     |     | `--sds-border-base-table` `$sds-border-base-table`       |     | `1px solid #cccccc` |
+|            |     | Dividers only (`<hr>`) |     | `--sds-border-base-divider` `$sds-border-base-divider`   |     | `1px solid #eaeaea` |
 
 ### Link Borders
 
 Use this border type when implementing links with a dashed underline.
 
-| **Visual** |   | **Usage** |   | **CSS / SCSS Variables** |   | **Value** |
-| --- | --- | --- | --- | --- | --- | --- |
-|   |   | Dashed link (default state) |   | `--sds-border-link-dashed` `$sds-border-link-dashed` |   | `1px dashed` |
-|   |   | Dashed link (hover and pressed states) |   | `--sds-border-link-solid` `$sds-border-link-solid` |   | `1px solid` |
+| **Visual** |     | **Usage**                              |     | **CSS / SCSS Variables**                             |     | **Value**    |
+| ---------- | --- | -------------------------------------- | --- | ---------------------------------------------------- | --- | ------------ |
+|            |     | Dashed link (default state)            |     | `--sds-border-link-dashed` `$sds-border-link-dashed` |     | `1px dashed` |
+|            |     | Dashed link (hover and pressed states) |     | `--sds-border-link-solid` `$sds-border-link-solid`   |     | `1px solid`  |
 
 ### Accent Borders
 
 These borders are used throughout the SDS whenever borders in Accent colors are needed.
 
-| **Visual** |   | **Usage** |   | **CSS / SCSS Variables** |   | **Value** |
-| --- | --- | --- | --- | --- | --- | --- |
-|   |   | Default |   | `--sds-border-accent-default` `$sds-border-accent-default` |   | `1px solid #0b68f8` |
-|   |   | Hover |   | `--sds-border-accent-hover` `$sds-border-accent-hover` |   | `1px solid #0142a4` |
-|   |   | Disabled |   | `--sds-border-accent-disabled` `$sds-border-accent-disabled` |   | `1px solid #a6c9ff` |
-|   |   | Default (dashed) |   | `--sds-border-accent-dashed` `$sds-border-accent-dashed` |   | `1px dashed #0b68f8` |
+| **Visual** |     | **Usage**        |     | **CSS / SCSS Variables**                                     |     | **Value**            |
+| ---------- | --- | ---------------- | --- | ------------------------------------------------------------ | --- | -------------------- |
+|            |     | Default          |     | `--sds-border-accent-default` `$sds-border-accent-default`   |     | `1px solid #0b68f8`  |
+|            |     | Hover            |     | `--sds-border-accent-hover` `$sds-border-accent-hover`       |     | `1px solid #0142a4`  |
+|            |     | Disabled         |     | `--sds-border-accent-disabled` `$sds-border-accent-disabled` |     | `1px solid #a6c9ff`  |
+|            |     | Default (dashed) |     | `--sds-border-accent-dashed` `$sds-border-accent-dashed`     |     | `1px dashed #0b68f8` |
 
 ### Intent Borders
 
-These borders are used on elements when needing to communicate a specific intent as indicated in the *Intent* column.
+These borders are used on elements when needing to communicate a specific intent as indicated in the _Intent_ column.
 
-| **Visual** |   | **Intent** |   | **CSS / SCSS Variables** |   | **Value** |
-| --- | --- | --- | --- | --- | --- | --- |
-|   |   | Beta |   | `--sds-border-beta-default` `$sds-border-beta-default` |   | `1px solid #7a41ce` |
-|   |   | Info |   | `--sds-border-info-default` `$sds-border-info-default` |   | `1px solid #0b68f8` |
-|   |   | Negative |   | `--sds-border-negative-default` `$sds-border-negative-default` |   | `1px solid #dc132c` |
-|   |   | Neutral |   | `--sds-border-neutral-default` `$sds-border-neutral-default` |   | `1px solid #999999` |
-|   |   | Notice |   | `--sds-border-notice-default` `$sds-border-notice-default` |   | `1px solid #f5a623` |
-|  |   | Positive |   | `--sds-border-positive-default` `$sds-border-positive-default` |   | `1px solid #3cb371` |
+| **Visual** |     | **Intent** |     | **CSS / SCSS Variables**                                       |     | **Value**           |
+| ---------- | --- | ---------- | --- | -------------------------------------------------------------- | --- | ------------------- |
+|            |     | Beta       |     | `--sds-border-beta-default` `$sds-border-beta-default`         |     | `1px solid #7a41ce` |
+|            |     | Info       |     | `--sds-border-info-default` `$sds-border-info-default`         |     | `1px solid #0b68f8` |
+|            |     | Negative   |     | `--sds-border-negative-default` `$sds-border-negative-default` |     | `1px solid #dc132c` |
+|            |     | Neutral    |     | `--sds-border-neutral-default` `$sds-border-neutral-default`   |     | `1px solid #999999` |
+|            |     | Notice     |     | `--sds-border-notice-default` `$sds-border-notice-default`     |     | `1px solid #f5a623` |
+|            |     | Positive   |     | `--sds-border-positive-default` `$sds-border-positive-default` |     | `1px solid #3cb371` |
 
 ---
 
@@ -60,30 +60,30 @@ Borders are the lines that go around elements to help contain them while visuall
 
 ### Types of Borders
 
-| **Visual** |   | **Border Type** |   | **Usage** |
-| --- | --- | --- | --- | --- |
-|  |   | Standard Border |   |  Base style for all borders. Borders are used on secondary buttons, input fields, modals, dropdown menus, etc.  |
-|   |   | Dashed Border |   | Dashed borders are used in file upload/drag and drop containers and Dashed Text Links. |
+| **Visual** |     | **Border Type** |     | **Usage**                                                                                                     |
+| ---------- | --- | --------------- | --- | ------------------------------------------------------------------------------------------------------------- |
+|            |     | Standard Border |     | Base style for all borders. Borders are used on secondary buttons, input fields, modals, dropdown menus, etc. |
+|            |     | Dashed Border   |     | Dashed borders are used in file upload/drag and drop containers and Dashed Text Links.                        |
 
 ### Border Variables
 
-| **Visual** |   | **Variable** |   | **Value** |   | **Usage** |
-| --- | --- | --- | --- | --- | --- | --- |
-|  |   | `borderPrimary600` |   | `1px solid primary600;` |   | Active rounded and square buttons |
-|  |   | `borderPrimary500` |   | `1px solid primary500;` |   | Hover rounded and square buttons |
-|  |   | `borderPrimary400` |   | `1px solid primary400;` |   | Secondary buttons, active states of input containers |
-|  |   | `borderGray500` |   | `1px solid gray500;` |   | Input and dropdown hover states |
-|  |   | `borderGray400` |   | `1px solid gray400;` |   | Input borders (default states) |
-|  |   | `borderGray300` |   | `1px solid gray300;` |   | Disabled or non-interactive containers (buttons/inputs/tooltips) |
-|  |   | `borderGray200` |   | `1px solid gray200;` |   |   |
-|  |   | `borderGray100` |   | `1px solid gray100;` |   | Modals and dropdown Menus |
-|  |   | `borderSuccess400` |   | `1px solid success400;` |   |   |
-|  |   | `borderError400` |   | `1px solid error500;` |   |   |
-|  |   | `borderWarning400` |   | `1px solid warning500;` |   | Warning state on inputs |
-|  |   | `borderGray400Dashed` |   | `2px dashed gray400;` |   | File upload/drag and drop containers |
-|  |   | `borderPrimary400Dashed` |   | `2px dashed primary400;` |   | Hover states for containers with dashed borders |
-|  |   | `borderLinkDashed` |   | `1px dashed;` |   | Default bottom-border for Dashed Text Links; border color is inherited from the color used in the paragraph it is part of. |
-|  |   | `borderLinkSolid` |   | `1px solid;` |   | Hover and Pressed bottom-border for Dashed Text Links; border color is inherited from the color used in the paragraph it is part of. |
+| **Visual** |     | **Variable**             |     | **Value**                |     | **Usage**                                                                                                                            |
+| ---------- | --- | ------------------------ | --- | ------------------------ | --- | ------------------------------------------------------------------------------------------------------------------------------------ |
+|            |     | `borderPrimary600`       |     | `1px solid primary600;`  |     | Active rounded and square buttons                                                                                                    |
+|            |     | `borderPrimary500`       |     | `1px solid primary500;`  |     | Hover rounded and square buttons                                                                                                     |
+|            |     | `borderPrimary400`       |     | `1px solid primary400;`  |     | Secondary buttons, active states of input containers                                                                                 |
+|            |     | `borderGray500`          |     | `1px solid gray500;`     |     | Input and dropdown hover states                                                                                                      |
+|            |     | `borderGray400`          |     | `1px solid gray400;`     |     | Input borders (default states)                                                                                                       |
+|            |     | `borderGray300`          |     | `1px solid gray300;`     |     | Disabled or non-interactive containers (buttons/inputs/tooltips)                                                                     |
+|            |     | `borderGray200`          |     | `1px solid gray200;`     |     |                                                                                                                                      |
+|            |     | `borderGray100`          |     | `1px solid gray100;`     |     | Modals and dropdown Menus                                                                                                            |
+|            |     | `borderSuccess400`       |     | `1px solid success400;`  |     |                                                                                                                                      |
+|            |     | `borderError400`         |     | `1px solid error500;`    |     |                                                                                                                                      |
+|            |     | `borderWarning400`       |     | `1px solid warning500;`  |     | Warning state on inputs                                                                                                              |
+|            |     | `borderGray400Dashed`    |     | `2px dashed gray400;`    |     | File upload/drag and drop containers                                                                                                 |
+|            |     | `borderPrimary400Dashed` |     | `2px dashed primary400;` |     | Hover states for containers with dashed borders                                                                                      |
+|            |     | `borderLinkDashed`       |     | `1px dashed;`            |     | Default bottom-border for Dashed Text Links; border color is inherited from the color used in the paragraph it is part of.           |
+|            |     | `borderLinkSolid`        |     | `1px solid;`             |     | Hover and Pressed bottom-border for Dashed Text Links; border color is inherited from the color used in the paragraph it is part of. |
 
 ---
 
@@ -91,28 +91,27 @@ Borders are the lines that go around elements to help contain them while visuall
 
 ### Types of Borders
 
-| **Visual** |   | **Border Type** |   | **Usage** |
-| --- | --- | --- | --- | --- |
-|  |   | Standard Border |   |  Base style for all borders. Borders are used on secondary buttons, input fields, modals, dropdown menus, etc.  |
-|   |   | Dashed Border |   | Dashed borders are used in file upload/drag and drop containers and Dashed Text Links. |
+| **Visual** |     | **Border Type** |     | **Usage**                                                                                                     |
+| ---------- | --- | --------------- | --- | ------------------------------------------------------------------------------------------------------------- |
+|            |     | Standard Border |     | Base style for all borders. Borders are used on secondary buttons, input fields, modals, dropdown menus, etc. |
+|            |     | Dashed Border   |     | Dashed borders are used in file upload/drag and drop containers and Dashed Text Links.                        |
 
 ### Border Variables
 
-| **Visual** |   | **Variable** |   | **Value** |   | **Usage** |
-| --- | --- | --- | --- | --- | --- | --- |
-|  |   | `borderPrimary600` |   | `1px solid primary600;` |   | Active rounded and square buttons |
-|  |   | `borderPrimary500` |   | `1px solid primary500;` |   | Hover rounded and square buttons |
-|  |   | `borderPrimary400` |   | `1px solid primary400;` |   | Secondary buttons, active states of input containers |
-|  |   | `borderGray500` |   | `1px solid gray500;` |   | Input and dropdown hover states |
-|  |   | `borderGray400` |   | `1px solid gray400;` |   | Input borders (default states) |
-|  |   | `borderGray300` |   | `1px solid gray300;` |   | Disabled or non-interactive containers (buttons/inputs/tooltips) |
-|  |   | `borderGray200` |   | `1px solid gray200;` |   |   |
-|  |   | `borderGray100` |   | `1px solid gray100;` |   | Modals and dropdown Menus |
-|  |   | `borderSuccess400` |   | `1px solid success400;` |   |   |
-|  |   | `borderError400` |   | `1px solid error500;` |   |   |
-|  |   | `borderWarning400` |   | `1px solid warning500;` |   | Warning state on inputs |
-|  |   | `borderGray400Dashed` |   | `2px dashed gray400;` |   | File upload/drag and drop containers |
-|  |   | `borderPrimary400Dashed` |   | `2px dashed primary400;` |   | Hover states for containers with dashed borders |
-|  |   | `borderLinkDashed` |   | `1px dashed;` |   | Default bottom-border for Dashed Text Links; border color is inherited from the color used in the paragraph it is part of. |
-|  |   | `borderLinkSolid` |   | `1px solid;` |   | Hover and Pressed bottom-border for Dashed Text Links; border color is inherited from the color used in the paragraph it is part of. |
-
+| **Visual** |     | **Variable**             |     | **Value**                |     | **Usage**                                                                                                                            |
+| ---------- | --- | ------------------------ | --- | ------------------------ | --- | ------------------------------------------------------------------------------------------------------------------------------------ |
+|            |     | `borderPrimary600`       |     | `1px solid primary600;`  |     | Active rounded and square buttons                                                                                                    |
+|            |     | `borderPrimary500`       |     | `1px solid primary500;`  |     | Hover rounded and square buttons                                                                                                     |
+|            |     | `borderPrimary400`       |     | `1px solid primary400;`  |     | Secondary buttons, active states of input containers                                                                                 |
+|            |     | `borderGray500`          |     | `1px solid gray500;`     |     | Input and dropdown hover states                                                                                                      |
+|            |     | `borderGray400`          |     | `1px solid gray400;`     |     | Input borders (default states)                                                                                                       |
+|            |     | `borderGray300`          |     | `1px solid gray300;`     |     | Disabled or non-interactive containers (buttons/inputs/tooltips)                                                                     |
+|            |     | `borderGray200`          |     | `1px solid gray200;`     |     |                                                                                                                                      |
+|            |     | `borderGray100`          |     | `1px solid gray100;`     |     | Modals and dropdown Menus                                                                                                            |
+|            |     | `borderSuccess400`       |     | `1px solid success400;`  |     |                                                                                                                                      |
+|            |     | `borderError400`         |     | `1px solid error500;`    |     |                                                                                                                                      |
+|            |     | `borderWarning400`       |     | `1px solid warning500;`  |     | Warning state on inputs                                                                                                              |
+|            |     | `borderGray400Dashed`    |     | `2px dashed gray400;`    |     | File upload/drag and drop containers                                                                                                 |
+|            |     | `borderPrimary400Dashed` |     | `2px dashed primary400;` |     | Hover states for containers with dashed borders                                                                                      |
+|            |     | `borderLinkDashed`       |     | `1px dashed;`            |     | Default bottom-border for Dashed Text Links; border color is inherited from the color used in the paragraph it is part of.           |
+|            |     | `borderLinkSolid`        |     | `1px solid;`             |     | Hover and Pressed bottom-border for Dashed Text Links; border color is inherited from the color used in the paragraph it is part of. |