@czi-sds/mcp 0.3.0 → 0.4.0

package/data/zeroheight-exports/Callout.md

@@ -6,15 +6,15 @@ Callouts are used within the flow of the page to highlight information to the us
 
 ## Callout Variants
 
-| Callouts come in three different variants for designers to use depending on the type of information they need to display and whether they want the user to have the ability to manually dismiss them or not. All Callout variants can be set to automatically dismiss after a designated period of time (8 seconds by default).  Callouts appear within the flow of the page as opposed to Notifications which appear outside of the page's flow on top of other elements. They span the full width of the `<div>` they are placed within.  Follow the usage criteria accompanying each variant as a guide for selecting the correct Callout for any given use case. |   | **Jump to variant:** Persistent Dismissible Expandable Intent Variations |
-| --- | --- | --- |
+| Callouts come in three different variants for designers to use depending on the type of information they need to display and whether they want the user to have the ability to manually dismiss them or not. All Callout variants can be set to automatically dismiss after a designated period of time (8 seconds by default). Callouts appear within the flow of the page as opposed to Notifications which appear outside of the page's flow on top of other elements. They span the full width of the `<div>` they are placed within. Follow the usage criteria accompanying each variant as a guide for selecting the correct Callout for any given use case. |     | **Jump to variant:** Persistent Dismissible Expandable Intent Variations |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ------------------------------------------------------------------------ |
 
 ---
 
 ## Callout
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In CZ GEN EPI Codebase |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ GEN EPI Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ---------------------- |
 
 ### Persistent Callout
 
@@ -26,7 +26,7 @@ An additional block of text can be added in addition to the Callout's title if m
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
- 
+
 
 ---
 
@@ -52,7 +52,7 @@ Additional content, whether more text or relevant components, can be included in
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
- 
+
 
 ---
 
@@ -73,27 +73,27 @@ There are four different intents that all Callout variants can communicate—Inf
 Each intent is demonstrated below using the Persistent Callout for reference. Regardless of variant, the colors and icons used are the same:
 
 | **Error** | **Info** |
-| --- | --- |
+| --------- | -------- |
 
 | **Success** | **Warning** |
-| --- | --- |
+| ----------- | ----------- |
 
 ## Code
 
 ## Callout Component
 
-| Below you will find an interactive Storybook iframe for Callouts.  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:** Callout |
-| --- | --- | --- |
+| Below you will find an interactive Storybook iframe for Callouts. 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:** Callout |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------------------------------ |
 
 ---
 
->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.
 
 ### Callout
 
 Storybook
 
- 
+
 
 ---
 
@@ -103,15 +103,15 @@ Callouts are used within the flow of the page to highlight information to the us
 
 ## Callout Variants
 
-| Callouts come in three different variants for designers to use depending on the type of information they need to display and whether they want the user to have the ability to manually dismiss them or not. All Callout variants can be set to automatically dismiss after a designated period of time (8 seconds by default).  Callouts appear within the flow of the page as opposed to Notifications which appear outside of the page's flow on top of other elements. They span the full width of the `<div>` they are placed within.  Follow the usage criteria accompanying each variant as a guide for selecting the correct Callout for any given use case. |   | **Jump to variant:** Persistent Dismissible Expandable Intent Variations |
-| --- | --- | --- |
+| Callouts come in three different variants for designers to use depending on the type of information they need to display and whether they want the user to have the ability to manually dismiss them or not. All Callout variants can be set to automatically dismiss after a designated period of time (8 seconds by default). Callouts appear within the flow of the page as opposed to Notifications which appear outside of the page's flow on top of other elements. They span the full width of the `<div>` they are placed within. Follow the usage criteria accompanying each variant as a guide for selecting the correct Callout for any given use case. |     | **Jump to variant:** Persistent Dismissible Expandable Intent Variations |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ------------------------------------------------------------------------ |
 
 ---
 
 ## Callout
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In CZ ID Codebase |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
 
 ### Persistent Callout
 
@@ -123,11 +123,11 @@ An additional block of text can be added in addition to the Callout's title if m
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
- 
+
 
 ---
 
- 
+
 
 ### Dismissible Callout
 
@@ -151,7 +151,7 @@ Additional content, whether more text or relevant components, can be included in
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
- 
+
 
 ---
 
@@ -174,17 +174,17 @@ There are four different intents that all Callout variants can communicate—Inf
 Each intent is demonstrated below using the Persistent Callout for reference. Regardless of variant, the colors and icons used are the same:
 
 | **Error** | **Info** |
-| --- | --- |
+| --------- | -------- |
 
 | **Success** | **Warning** |
-| --- | --- |
+| ----------- | ----------- |
 
 ## Code
 
 ## Callout Component
 
-| Below you will find an interactive Storybook iframe for Callouts.  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:** Callout |
-| --- | --- | --- |
+| Below you will find an interactive Storybook iframe for Callouts. 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:** Callout |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------------------------------ |
 
 ---
 
@@ -200,8 +200,8 @@ Callouts are used within the flow of the page to highlight information to the us
 
 ## Overview
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In Code |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In Code |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ------- |
 
 ### Callout Variants
 
@@ -224,7 +224,7 @@ Default
 Use Callout – Persistent when communicating information that should remain on the screen and can't be manually dismissed by the user. Additional text may be displayed below the Callout's title.
 
 | Default | Default + Alert Text |
-| --- | --- |
+| ------- | -------------------- |
 
 ---
 
@@ -233,7 +233,7 @@ Use Callout – Persistent when communicating information that should remain on
 Use when communicating information that doesn't need to remain on the screen and, therefore, may be dismissed by the user. Additional text may be displayed below the Callout's title.
 
 | Default | Default + Alert Text |
-| --- | --- |
+| ------- | -------------------- |
 
 ---
 
@@ -242,7 +242,7 @@ Use when communicating information that doesn't need to remain on the screen and
 Use when communicating a lot of information that may be useful, but isn't strictly necessary for the user to see, since the additional content may be hidden by the Accordion. Additional text may be displayed below the Callout's title, outside of the accordion. This Callout variant remains on the screen and can't be manually dismissed by the user.
 
 | Collapsed | Collapsed + Alert Text | Expanded + Content Module | Expanded + Alert Text + Content Module |
-| --- | --- | --- | --- |
+| --------- | ---------------------- | ------------------------- | -------------------------------------- |
 
 ---
 
@@ -259,11 +259,11 @@ There are four different intents that Callouts can communicate: Info, Negative,
 Each intent is demonstrated below using the Persistent variant for reference. Regardless of variant, the colors and icons used are the same.
 
 | 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
 
 ## Callout
 
@@ -273,19 +273,19 @@ The component's source code in the SDS codebase can be found here.
 
 ### SDS vs MUI
 
-The SDS `Callout` component is built upon the MUI `Alert` component (as is the SDS `Notification` component), but there are some important differences: 
+The SDS `Callout` component is built upon the MUI `Alert` component (as is the SDS `Notification` component), but there are some important differences:
 
-* **Color:** SDS's `Callout` component has its own `intent` prop designed for setting both the color and default icon, and takes the values of `"info"`, `"error"`, `"success"`, or `"warning"`. MUI's `Alert`  instead uses the `severity` prop for this purpose (`severity` can also be used for SDS's `Notification`,  and will take the same values as `intent`; this is not recommended)
-* **Titles:** SDS's `Callout` uses the `CalloutTitle` in place of the `AlertTitle` used by MUI's `Alert` to wrap title text. It is a stylized version of `AlertTitle`, and can be imported with `import { CalloutTitle } from "@czi-sds/components"`
-* **Expanding and closing:** SDS's `Callout` introduces a prop called `expandable` that, when `true`,  allows any additional text (beyond the title text) to be visible or hidden by toggling a chevron (automatically added) in the top right of the callout  (`expandable` should ideally only be used if there *is* in fact text in addition to the title text; otherwise the chevron will still appear but will not do anything functional because there will be no extra text to reveal). If the ability to close the Callout is desired, pass a callback function to `onClose`, and SDS will automatically render a close button. SDS uses MUI's Alert `action` prop under the hood, in case there is a need to further override the behavior
-* **Transitions:** SDS's `Callout` uses the `Grow` transition component by default
-* **Icons:** Like with MUI's `Alert`, SDS's `Callout` also shows an icon to the left of the title text. This can be changed manually (it also changes automatically based on the `intent`  setting; see first bullet). The format for setting the `icon`  prop for SDS's `Notification` is slightly different than for MUI, in that it invokes the `Icon`  component:
+- **Color:** SDS's `Callout` component has its own `intent` prop designed for setting both the color and default icon, and takes the values of `"info"`, `"error"`, `"success"`, or `"warning"`. MUI's `Alert` instead uses the `severity` prop for this purpose (`severity` can also be used for SDS's `Notification`, and will take the same values as `intent`; this is not recommended)
+- **Titles:** SDS's `Callout` uses the `CalloutTitle` in place of the `AlertTitle` used by MUI's `Alert` to wrap title text. It is a stylized version of `AlertTitle`, and can be imported with `import { CalloutTitle } from "@czi-sds/components"`
+- **Expanding and closing:** SDS's `Callout` introduces a prop called `expandable` that, when `true`, allows any additional text (beyond the title text) to be visible or hidden by toggling a chevron (automatically added) in the top right of the callout (`expandable` should ideally only be used if there _is_ in fact text in addition to the title text; otherwise the chevron will still appear but will not do anything functional because there will be no extra text to reveal). If the ability to close the Callout is desired, pass a callback function to `onClose`, and SDS will automatically render a close button. SDS uses MUI's Alert `action` prop under the hood, in case there is a need to further override the behavior
+- **Transitions:** SDS's `Callout` uses the `Grow` transition component by default
+- **Icons:** Like with MUI's `Alert`, SDS's `Callout` also shows an icon to the left of the title text. This can be changed manually (it also changes automatically based on the `intent` setting; see first bullet). The format for setting the `icon` prop for SDS's `Notification` is slightly different than for MUI, in that it invokes the `Icon` component:
 
-	`icon={<Icon sdsSize="l" sdsIcon="download" sdsType="static" />`
+  `icon={<Icon sdsSize="l" sdsIcon="download" sdsType="static" />`
 
-	Additionally, setting `icon={false}` has no effect, and `iconMapping` does not work to change icons associated to `intent` or `severity`.  
+  Additionally, setting `icon={false}` has no effect, and `iconMapping` does not work to change icons associated to `intent` or `severity`.
 
-* **Variants:** The `variant` prop is not available for SDS's `Callout` component.
+- **Variants:** The `variant` prop is not available for SDS's `Callout` component.
 
 ### MUI Documentation
 
@@ -295,18 +295,18 @@ Documentation for the underlying MUI `Alert` component 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 |
-| --- | --- | --- | --- |
-| `autoDismiss` | `bool` | `false` | Control the automatic dismissal behavior of `Callouts`. Specify a numeric value in milliseconds to set the duration after which the callout will automatically disappear. Alternatively, set `autoDismiss` to `false` to keep the callout visible until manually dismissed. |
-| `intent` | `"info"` `| "negative"` `| "positive"` `| "notice"` | `-` | The color of the component. |
-| `icon` | `ReactNode` | `-` | Icon displayed to the left of the `Callout` title. |
-| `onClose` | `func` | `function(event: React.SyntheticEvent) => void` | 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. |
-| `title` | `string` | `-` | Callout title |
-| `hideTitle` | `boolean` | `false` | If set to `true`, Hides the Callout title |
-| `body` | `string` | `-` | Callout body |
-| `hideBody` | `boolean` | `false` | If set to `true`, Hides the Callout body |
-| `children` | `ReactNode` | `-` | Extra content to show in the component slot section of the Callout |
-| `sdsStyle` | `| "persistent"``| "expandable"``| "dismissible"` | `"persistent"` | Defines the style of the Callout:   - "persistent": Cannot be closed.   - "expandable": Includes a chevron icon to toggle extra content visibility.   - "dismissible": Includes an “x” icon for manual dismissal. |
+| Name          | Type        | Default                                         | Description                                                                                                                                                                                                                                                                 |
+| ------------- | ----------- | ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `autoDismiss` | `bool`      | `false`                                         | Control the automatic dismissal behavior of `Callouts`. Specify a numeric value in milliseconds to set the duration after which the callout will automatically disappear. Alternatively, set `autoDismiss` to `false` to keep the callout visible until manually dismissed. |
+| `intent`      | `"info"` `  | "negative"` `                                   | "positive"` `                                                                                                                                                                                                                                                               | "notice"`      | `-`            | The color of the component.                                                                                                                                                                                    |
+| `icon`        | `ReactNode` | `-`                                             | Icon displayed to the left of the `Callout` title.                                                                                                                                                                                                                          |
+| `onClose`     | `func`      | `function(event: React.SyntheticEvent) => void` | 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.                                                                                                 |
+| `title`       | `string`    | `-`                                             | Callout title                                                                                                                                                                                                                                                               |
+| `hideTitle`   | `boolean`   | `false`                                         | If set to `true`, Hides the Callout title                                                                                                                                                                                                                                   |
+| `body`        | `string`    | `-`                                             | Callout body                                                                                                                                                                                                                                                                |
+| `hideBody`    | `boolean`   | `false`                                         | If set to `true`, Hides the Callout body                                                                                                                                                                                                                                    |
+| `children`    | `ReactNode` | `-`                                             | Extra content to show in the component slot section of the Callout                                                                                                                                                                                                          |
+| `sdsStyle`    | `           | "persistent"``                                  | "expandable"``                                                                                                                                                                                                                                                              | "dismissible"` | `"persistent"` | Defines the style of the Callout:  - "persistent": Cannot be closed.  - "expandable": Includes a chevron icon to toggle extra content visibility.  - "dismissible": Includes an “x” icon for manual dismissal. |
 
 ### Code examples
 
@@ -339,13 +339,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -355,20 +353,19 @@ h1 {
 
 ```tsx
 // Most minimal Callout (just has the basic requirements)
-      
+
 import { Callout, CalloutTitle } from "@czi-sds/components";
 import "./styles.css";
 
 function App() {
   return (
     <div className="app">
-      <Callout
-        intent="info"
-      >
+      <Callout intent="info">
         <CalloutTitle>Callout box</CalloutTitle>
-        The Callout Box component is a versatile UI element designed to draw attention to important 
-        information or messages within your interface. With its clean and elegant design, the 
-        Callout Box helps highlight key content, alerts, or contextual details. 
+        The Callout Box component is a versatile UI element designed to draw
+        attention to important information or messages within your interface.
+        With its clean and elegant design, the Callout Box helps highlight key
+        content, alerts, or contextual details.
       </Callout>
     </div>
   );
@@ -414,13 +411,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -441,20 +437,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"
+}
 ```
 
 ---
 
 #### Expandable Callout
 
-The Expandable `Callout` component provides an interactive and space-efficient way to present information. By default, it displays a brief summary, however, users can expand it to reveal more detailed content, similar to an accordion. This feature is particularly useful for sharing additional context or insights while keeping the initial interface clutter-free. 
+The Expandable `Callout` component provides an interactive and space-efficient way to present information. By default, it displays a brief summary, however, users can expand it to reveal more detailed content, similar to an accordion. This feature is particularly useful for sharing additional context or insights while keeping the initial interface clutter-free.
 
 **/styles.css**
 
@@ -481,13 +488,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -497,23 +502,21 @@ h1 {
 
 ```tsx
 // Expandable Callout
-      
+
 import { Callout, CalloutTitle } from "@czi-sds/components";
 import "./styles.css";
 
 function App() {
   return (
     <div className="app">
-      <Callout
-        intent="notice"
-        expandable
-      >
+      <Callout intent="notice" expandable>
         <CalloutTitle>Attention Required</CalloutTitle>
-        The Warning Callout serves as a visual alert to draw immediate attention to critical 
-        information that requires action or consideration. Its distinct appearance, coupled 
-        with the "Attention Required" message, signals urgency and prompts users to take 
-        appropriate steps. Use this component strategically to ensure vital messages are 
-        noticed promptly and acted upon, enhancing user awareness and responsiveness.
+        The Warning Callout serves as a visual alert to draw immediate attention
+        to critical information that requires action or consideration. Its
+        distinct appearance, coupled with the "Attention Required" message,
+        signals urgency and prompts users to take appropriate steps. Use this
+        component strategically to ensure vital messages are noticed promptly
+        and acted upon, enhancing user awareness and responsiveness.
       </Callout>
     </div>
   );
@@ -559,13 +562,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -586,20 +588,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"
+}
 ```
 
 ---
 
 #### Dismissible Callout
 
-The dismissible `Callout` variant provides users with the ability to dismiss it at their convenience. It includes a close button located in the top right corner, offering a familiar interaction pattern for users to remove the `Callout` from view. Moreover, the `onClose` prop allows developers to define custom actions that are triggered when the `Callout` is closed. 
+The dismissible `Callout` variant provides users with the ability to dismiss it at their convenience. It includes a close button located in the top right corner, offering a familiar interaction pattern for users to remove the `Callout` from view. Moreover, the `onClose` prop allows developers to define custom actions that are triggered when the `Callout` is closed.
 
 **/styles.css**
 
@@ -626,13 +639,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -642,7 +653,7 @@ h1 {
 
 ```tsx
 // Closable Callout
-      
+
 import { useState } from "react";
 import { Callout, CalloutTitle, Button } from "@czi-sds/components";
 import "./styles.css";
@@ -650,28 +661,30 @@ import "./styles.css";
 function App() {
   const [dismissed, setDismissed] = useState(false);
   const handleClick = () => {
-    setDismissed(prev => !prev);
-  }
+    setDismissed((prev) => !prev);
+  };
   return (
     <div className="app">
-      {
-        !dismissed ?
-          <Callout
-            intent="negative"
-            dismissed={dismissed}
-            onClose={() => {
-              console.log("Callout closed!");
-              setDismissed(true);
-            }}
-          >
-            <CalloutTitle>An Error Occurred</CalloutTitle>
-            The Error Callout is a crucial component for communicating critical errors or issues 
-            to users. With its distinct appearance and the message "An Error Occurred," it 
-            ensures that users are immediately informed about unexpected situations that 
-            require attention.
-          </Callout> : 
-          <Button onClick={handleClick} sdsType="primary" sdsStyle="rounded">Reset Callout</Button>
-      }
+      {!dismissed ? (
+        <Callout
+          intent="negative"
+          dismissed={dismissed}
+          onClose={() => {
+            console.log("Callout closed!");
+            setDismissed(true);
+          }}
+        >
+          <CalloutTitle>An Error Occurred</CalloutTitle>
+          The Error Callout is a crucial component for communicating critical
+          errors or issues to users. With its distinct appearance and the
+          message "An Error Occurred," it ensures that users are immediately
+          informed about unexpected situations that require attention.
+        </Callout>
+      ) : (
+        <Button onClick={handleClick} sdsType="primary" sdsStyle="rounded">
+          Reset Callout
+        </Button>
+      )}
     </div>
   );
 }
@@ -716,13 +729,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -743,14 +755,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"
+}
 ```
 
 ---
-