@czi-sds/mcp 0.3.0 → 0.4.0

package/data/zeroheight-exports/Link.md

@@ -6,8 +6,8 @@ Links are interactive elements that, when clicked, navigate the user away from t
 
 ## Overview
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In Code |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In Code |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ------- |
 
 ### Link Variants
 
@@ -17,7 +17,7 @@ Though visually similar to Button – Minimal, Links navigate the user away from
 
 Links come in two sizes: fontXs and fontS to align with SDS' most common body copy font sizes.
 
->**Note:** When including an inline Link in your Figma designs, styles must be manually applied as there is no way to save the Link style in Figma as a text style. Use the Link Figma component for links that are not inline. 
+> **Note:** When including an inline Link in your Figma designs, styles must be manually applied as there is no way to save the Link style in Figma as a text style. Use the Link Figma component for links that are not inline.
 
 ---
 
@@ -34,7 +34,7 @@ Default
 Use Link – Default only when the Link is placed on `surface-primary`, `surface-secondary`, or `surface-tertiary` backgrounds to ensure there is enough contrast to pass visual accessibility standards, otherwise use Link – Dashed.
 
 | Default | Hover | Pressed |
-| --- | --- | --- |
+| ------- | ----- | ------- |
 
 ---
 
@@ -45,14 +45,14 @@ Use Link – Dashed when the Link is placed on a background where the Link – D
 See Borders section for Link Underline details.
 
 | Default | Hover | Pressed |
-| --- | --- | --- |
+| ------- | ----- | ------- |
 
 #### Color Rules
 
 The color of Link – Dashed and its underline should match the color of the text used in the paragraph it is placed within.
 
 | Primary Text | Secondary Text | On-fill Text |
-| --- | --- | --- |
+| ------------ | -------------- | ------------ |
 
 ---
 
@@ -60,11 +60,11 @@ The color of Link – Dashed and its underline should match the color of the tex
 
 These rules establish how much margin should exist between and around elements.
 
->**Note:** The underline for Link – Dashed is spaced lower than the default text-decoration underline.
+> **Note:** The underline for Link – Dashed is spaced lower than the default text-decoration underline.
 
 ## 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
 
 ## Link
 
@@ -74,17 +74,17 @@ The component's source code in the SDS codebase can be found here.
 
 ### MUI Documentation
 
-Documentation for the underlying MUI component can be found here. There are no differences between the SDS and MUI component. 
+Documentation for the underlying MUI component can be found here. There are no differences between the SDS and MUI component.
 
 ### Props
 
 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 |
-| --- | --- | --- | --- |
-| `sdsStyle` | `"default"` `| "dashed"` | `"default"` | The style of underline corresponding to the `text-decoration` CSS property. Default is `underline`. |
-| `sdsSize` | `"xs" | "s"` | `"xs"` | The font size of the `Link` component |
-| `fontWeight` | `"normal"`  `| "bold"`  | `"normal"` | The font weight of the `Link` component. |
+| Name         | Type          | Default   | Description |
+| ------------ | ------------- | --------- | ----------- | --------------------------------------------------------------------------------------------------- |
+| `sdsStyle`   | `"default"` ` | "dashed"` | `"default"` | The style of underline corresponding to the `text-decoration` CSS property. Default is `underline`. |
+| `sdsSize`    | `"xs"         | "s"`      | `"xs"`      | The font size of the `Link` component                                                               |
+| `fontWeight` | `"normal"` `  | "bold"`   | `"normal"`  | The font weight of the `Link` component.                                                            |
 
 ### Code examples
 
@@ -117,13 +117,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -138,9 +136,7 @@ import "./styles.css";
 function App() {
   return (
     <div className="app">
-      <Link href="#">
-        Science Design System
-      </Link>
+      <Link href="#">Science Design System</Link>
     </div>
   );
 }
@@ -185,13 +181,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -212,13 +207,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"
+}
 ```
 
 ---
@@ -252,13 +258,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -273,13 +277,13 @@ import "./styles.css";
 
 function App() {
   const theme = useTheme();
-  const semanticColors = getSemanticColors({theme});
-  
+  const semanticColors = getSemanticColors({ theme });
+
   const StyledParagraph = styled("p")`
     background-color: ${semanticColors?.accent?.surfacePrimary};
     padding: 10px;
   `;
-  
+
   return (
     <div className="app">
       <StyledParagraph>
@@ -333,13 +337,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -360,14 +363,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/Lists.md

@@ -6,29 +6,29 @@ Utilizing a list to present information makes it easier to digest or act upon wh
 
 ## List Variants
 
-| There are two types of Lists—Unordered Lists where the order of content does not matter and Ordered Lists which communicate a specific sequence for the content. Use a Header with either list type to help provide context to the content presented in the list.  Follow the usage criteria accompanying each variant as a guide for selecting the correct List for any given use case. |   | **Jump to variant:** Unordered Ordered |
-| --- | --- | --- |
+| There are two types of Lists—Unordered Lists where the order of content does not matter and Ordered Lists which communicate a specific sequence for the content. Use a Header with either list type to help provide context to the content presented in the list. Follow the usage criteria accompanying each variant as a guide for selecting the correct List for any given use case. |     | **Jump to variant:** Unordered Ordered |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | -------------------------------------- |
 
 ---
 
 ## Lists
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In napari hub + .org Codebases |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In napari hub + .org Codebases |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ------------------------------ |
 
 ### Unordered List
 
 Use when the order of the list's content does not matter.
 
 | **bodyM** | **bodyS** | **bodyXs** | **bodyXxs** |
-| --- | --- | --- | --- |
+| --------- | --------- | ---------- | ----------- |
 
 ### Ordered List
 
 Use when the list's content needs to be presented in a specific order or sequence.
 
 | **bodyM** | **bodyS** | **bodyXs** | **bodyXxs** |
-| --- | --- | --- | --- |
+| --------- | --------- | ---------- | ----------- |
 
 ---
 
@@ -37,7 +37,7 @@ Use when the list's content needs to be presented in a specific order or sequenc
 Spacing between List Items changes based on the font mixin size used. See the table below for spacing reference.
 
 | **bodyM** | **bodyS** | **bodyXs** | **bodyXxs** |
-| --- | --- | --- | --- |
+| --------- | --------- | ---------- | ----------- |
 
 ---
 
@@ -45,12 +45,12 @@ Spacing between List Items changes based on the font mixin size used. See the ta
 
 ## List Component
 
-| Below you will find an interactive Storybook iframe for Lists.  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:** List |
-| --- | --- | --- |
+| Below you will find an interactive Storybook iframe for Lists. 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:** List |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | --------------------------- |
 
 ---
 
->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.
 
 ### List
 
@@ -64,31 +64,31 @@ Utilizing a list to present information makes it easier to digest or act upon wh
 
 ## List Variants
 
-| There are two types of Lists—Unordered Lists where the order of content does not matter and Ordered Lists which communicate a specific sequence for the content. Use a Header with either list type to help provide context to the content presented in the list.  Follow the usage criteria accompanying each variant as a guide for selecting the correct List for any given use case. |   | **Jump to variant:** Unordered Ordered |
-| --- | --- | --- |
+| There are two types of Lists—Unordered Lists where the order of content does not matter and Ordered Lists which communicate a specific sequence for the content. Use a Header with either list type to help provide context to the content presented in the list. Follow the usage criteria accompanying each variant as a guide for selecting the correct List for any given use case. |     | **Jump to variant:** Unordered Ordered |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | -------------------------------------- |
 
 ---
 
 ## Lists
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In CZ GEN EPI Codebase |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ GEN EPI Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ---------------------- |
 
 ### Unordered List
 
 Use when the order of the list's content does not matter.
 
 | **fontBodyL** | **fontBodyM** | **fontBodyS** | **fontBodyXs** | **fontBodyXxs** | **fontBodyXxxs** |
-| --- | --- | --- | --- | --- | --- |
+| ------------- | ------------- | ------------- | -------------- | --------------- | ---------------- |
+
 
- 
 
 ### Ordered List
 
 Use when the list's content needs to be presented in a specific order or sequence.
 
 | **fontBodyL** | **fontBodyM** | **fontBodyS** | **fontBodyXs** | **fontBodyXxs** | **fontBodyXxxs** |
-| --- | --- | --- | --- | --- | --- |
+| ------------- | ------------- | ------------- | -------------- | --------------- | ---------------- |
 
 ---
 
@@ -97,7 +97,7 @@ Use when the list's content needs to be presented in a specific order or sequenc
 Spacing between List Items changes based on the font mixin size used. See the table below for spacing reference.
 
 | **fontBodyL** | **fontBodyM** | **fontBodyS** | **fontBodyXs** | **fontBodyXxs** | **fontBodyXxxs** |
-| --- | --- | --- | --- | --- | --- |
+| ------------- | ------------- | ------------- | -------------- | --------------- | ---------------- |
 
 ---
 
@@ -105,12 +105,12 @@ Spacing between List Items changes based on the font mixin size used. See the ta
 
 ## List Component
 
-| Below you will find an interactive Storybook iframe for Lists.  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:** List |
-| --- | --- | --- |
+| Below you will find an interactive Storybook iframe for Lists. 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:** List |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | --------------------------- |
 
 ---
 
->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.
 
 ### List
 
@@ -124,31 +124,31 @@ Utilizing a list to present information makes it easier to digest or act upon wh
 
 ## List Variants
 
-| There are two types of Lists—Unordered Lists where the order of content does not matter and Ordered Lists which communicate a specific sequence for the content. Use a Header with either list type to help provide context to the content presented in the list.  Follow the usage criteria accompanying each variant as a guide for selecting the correct List for any given use case. |   | **Jump to variant:** Unordered Ordered |
-| --- | --- | --- |
+| There are two types of Lists—Unordered Lists where the order of content does not matter and Ordered Lists which communicate a specific sequence for the content. Use a Header with either list type to help provide context to the content presented in the list. Follow the usage criteria accompanying each variant as a guide for selecting the correct List for any given use case. |     | **Jump to variant:** Unordered Ordered |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | -------------------------------------- |
 
 ---
 
 ## Lists
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In CZ ID Codebase |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
 
 ### Unordered List
 
 Use when the order of the list's content does not matter.
 
 | **fontBodyL** | **fontBodyM** | **fontBodyS** | **fontBodyXs** | **fontBodyXxs** | **fontBodyXxxs** |
-| --- | --- | --- | --- | --- | --- |
+| ------------- | ------------- | ------------- | -------------- | --------------- | ---------------- |
+
 
- 
 
 ### Ordered List
 
 Use when the list's content needs to be presented in a specific order or sequence.
 
 | **fontBodyL** | **fontBodyM** | **fontBodyS** | **fontBodyXs** | **fontBodyXxs** | **fontBodyXxxs** |
-| --- | --- | --- | --- | --- | --- |
+| ------------- | ------------- | ------------- | -------------- | --------------- | ---------------- |
 
 ---
 
@@ -157,7 +157,7 @@ Use when the list's content needs to be presented in a specific order or sequenc
 Spacing between List Items changes based on the font mixin size used. See the table below for spacing reference.
 
 | **fontBodyL** | **fontBodyM** | **fontBodyS** | **fontBodyXs** | **fontBodyXxs** | **fontBodyXxxs** |
-| --- | --- | --- | --- | --- | --- |
+| ------------- | ------------- | ------------- | -------------- | --------------- | ---------------- |
 
 ---
 
@@ -165,8 +165,8 @@ Spacing between List Items changes based on the font mixin size used. See the ta
 
 ## List Component
 
-| Below you will find an interactive Storybook iframe for Lists.  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:** List |
-| --- | --- | --- |
+| Below you will find an interactive Storybook iframe for Lists. 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:** List |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | --------------------------- |
 
 ---
 
@@ -182,8 +182,8 @@ Utilizing a list to present information makes it easier to digest or act upon wh
 
 ## Overview
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In Code |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In Code |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ------- |
 
 ### List Variants
 
@@ -204,7 +204,7 @@ Default
 Use when the list's content needs to be presented in a specific order or sequence.
 
 | fontBodyL | fontBodyM | fontBodyS | fontBodyXs | fontBodyXxs | fontBodyXxxs |
-| --- | --- | --- | --- | --- | --- |
+| --------- | --------- | --------- | ---------- | ----------- | ------------ |
 
 ---
 
@@ -213,7 +213,7 @@ Use when the list's content needs to be presented in a specific order or sequenc
 Use when the order of the list's content does not matter.
 
 | fontBodyL | fontBodyM | fontBodyS | fontBodyXs | fontBodyXxs | fontBodyXxxs |
-| --- | --- | --- | --- | --- | --- |
+| --------- | --------- | --------- | ---------- | ----------- | ------------ |
 
 ---
 
@@ -222,11 +222,11 @@ Use when the order of the list's content does not matter.
 Spacing between List Items changes based on the font size used. See the table below for spacing reference.
 
 | fontBodyL | fontBodyM | fontBodyS | fontBodyXs | fontBodyXxs | fontBodyXxxs |
-| --- | --- | --- | --- | --- | --- |
+| --------- | --------- | --------- | ---------- | ----------- | ------------ |
 
 ## 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
 
 ## List
 
@@ -238,10 +238,10 @@ 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 |
-| --- | --- | --- | --- |
-| `marginBottom` | `"xxxs"` `| "xxs"` `| "xs"` `| "s"` `| "m"` `| "l"` | `"s"` | Determines the bottom margin size for the list, controlling its spacing from other elements. |
-| `ordered` | `boolean` | `false` | Specifies the type of list component to render. When set to `true`, the list will be an ordered `"ol"` tag, while `false` will render an unordered `"ul"` tag. |
+| Name           | Type       | Default  | Description                                                                                                                                                    |
+| -------------- | ---------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | ---- | ----- | -------------------------------------------------------------------------------------------- |
+| `marginBottom` | `"xxxs"` ` | "xxs"` ` | "xs"` `                                                                                                                                                        | "s"` ` | "m"` ` | "l"` | `"s"` | Determines the bottom margin size for the list, controlling its spacing from other elements. |
+| `ordered`      | `boolean`  | `false`  | Specifies the type of list component to render. When set to `true`, the list will be an ordered `"ol"` tag, while `false` will render an unordered `"ul"` tag. |
 
 ## ListItem
 
@@ -253,11 +253,11 @@ 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 |
-| --- | --- | --- | --- |
-| `fontSize` | `"xxxs"` `| "xxs"` `| "xs"` `| "s"` `| "m"` `| "l"` | `"s"` | Sets the font size for the list items, influencing their text size. |
-| `marginBottom` | `"s"` `| "xs"` `| "xxs"` | `"xs"` | Controls the bottom margin size for the list items, affecting the spacing between list items. |
-| `ordered` | `boolean` | `false` | Specifies the style and spacings of the list item components based on the parent list element. |
+| Name           | Type       | Default  | Description                                                                                    |
+| -------------- | ---------- | -------- | ---------------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------- | ---- | ----- | ------------------------------------------------------------------- |
+| `fontSize`     | `"xxxs"` ` | "xxs"` ` | "xs"` `                                                                                        | "s"` ` | "m"` `                                                                                        | "l"` | `"s"` | Sets the font size for the list items, influencing their text size. |
+| `marginBottom` | `"s"` `    | "xs"` `  | "xxs"`                                                                                         | `"xs"` | Controls the bottom margin size for the list items, affecting the spacing between list items. |
+| `ordered`      | `boolean`  | `false`  | Specifies the style and spacings of the list item components based on the parent list element. |
 
 ### Code examples
 
@@ -290,13 +290,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -375,13 +373,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -402,13 +399,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"
+}
 ```
 
 ---
@@ -442,13 +450,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -577,13 +583,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -604,14 +609,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/Loading-Indicator.md

@@ -4,10 +4,10 @@ Loading Indicators provide feedback to users that an action is still completing,
 
 ## Overview
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In napari hub + .org Codebases |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In napari hub + .org Codebases |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ------------------------------ |
 
-Used in napari hub and napari.org to indicate when on-page components are loading. The Loading Indicator features a looping animation to signal to the user that an action is happening and to wait while it completes. 
+Used in napari hub and napari.org to indicate when on-page components are loading. The Loading Indicator features a looping animation to signal to the user that an action is happening and to wait while it completes.
 
 Note: icon spins.
 
@@ -17,22 +17,21 @@ Note: icon spins.
 
 These rules establish how much margin should exist between and around elements.
 
- 
+
 
 ## Code
 
 ## Loading Indicator Component
 
-| Below you will find an interactive Storybook iframe for the Loading Indicator.  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:** LoadingIndicator |
-| --- | --- | --- |
+| Below you will find an interactive Storybook iframe for the Loading Indicator. 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:** LoadingIndicator |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | --------------------------------------- |
 
 ---
 
->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.
 
 ### LoadingIndicator
 
 Storybook
 
-