@commercetools/nimbus-mcp 0.1.0 → 2.11.0

package/data/docs/routes/components-feedback-alert.json

@@ -0,0 +1,696 @@
+{
+  "meta": {
+    "id": "Components-Alert",
+    "title": "Alert",
+    "exportName": "Alert",
+    "description": "For urgent, high-impact messages, such as system alerts, alert banners are used to ensure visibility and encourage immediate user response.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/alert/alert.mdx",
+    "menu": [
+      "Components",
+      "Feedback",
+      "Alert"
+    ],
+    "route": "components/feedback/alert",
+    "tags": [
+      "component",
+      "alert",
+      "notification",
+      "status",
+      "banner"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Variables",
+        "href": "#variables",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Adjustable elements",
+        "href": "#adjustable-elements",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Buttons and links",
+        "href": "#buttons-and-links",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Close and dismiss buttons",
+        "href": "#close-and-dismiss-buttons",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Title and description",
+        "href": "#title-and-description",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Style",
+        "href": "#style",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Outlined",
+        "href": "#outlined",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Flat",
+        "href": "#flat",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Width",
+        "href": "#width",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          2,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Color palette",
+        "href": "#color-palette",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Positive",
+        "href": "#positive",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          3,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Info",
+        "href": "#info",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          3,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Warning",
+        "href": "#warning",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          3,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Critical",
+        "href": "#critical",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          3,
+          4
+        ],
+        "parent": "root"
+      }
+    ],
+    "figmaLink": "https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=2702-5723",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "guidelines",
+        "title": "Guidelines",
+        "order": 2
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      },
+      {
+        "key": "a11y",
+        "title": "Accessibility",
+        "order": 4
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nThese specifications define the standard styles and variations for icon buttons\nwithin our design system, covering different visual treatments for diverse use\ncases.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Figma library](https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=2702-5723)\n\n## Variables\n\nGet familiar with the features.\n\n### Adjustable elements\n\nSeveral of the features are flexible and optional for many use cases.\nNon-optional elements are the message, and the icons that are tied to the type\nof messaging.\n\n#### Buttons and links\n\nThe alert component allows for two buttons and links within the paragraph\nmessage. These buttons and links can be customized for any messaging needs.\n\n#### Close and dismiss buttons\n\nFeatures that may be used for closing or dismissing the alert message are\noptional. Removing these elements will make this message persistent for the\nuser. There is no need to duplicate a close action, using the close icon in the\nright corner or a dismiss button is enough for a user.\n\n#### Title and description\n\nThe message is needed in all uses. Please always utilize messaging for the user.\nUse of the title is optional, use if it gives greater clarity to the user.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"column\">\n    <Alert.Root colorPalette=\"critical\" variant=\"outlined\">\n      <Alert.Title>Lorem Ipsum</Alert.Title>\n      <Alert.Description>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Link>Read more</Link>\n      </Alert.Description>\n      <Alert.Actions>\n        <Stack direction=\"row\" alignItems=\"center\">\n          <Button variant=\"outline\">Dismiss</Button>\n          <Button variant=\"outline\">View changes</Button>\n        </Stack>\n      </Alert.Actions>\n      <Alert.DismissButton />\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"info\" variant=\"outlined\">\n      <Alert.Title>Lorem Ipsum</Alert.Title>\n      <Alert.Description>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Link>Read more</Link>\n      </Alert.Description>\n      <Alert.DismissButton />\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"warning\" variant=\"outlined\">\n      <Alert.Title>Lorem Ipsum</Alert.Title>\n      <Alert.Description>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Link>Read more</Link>\n      </Alert.Description>\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"positive\" variant=\"outlined\">\n      <Alert.Description>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Link>Read more</Link>\n      </Alert.Description>\n    </Alert.Root>\n  </Stack>\n)\n```\n\n### Style\n\n#### Outlined\n\nUse when getting attention is more important. These can be used inline, but they\ntake up space and it is not as easy to slide into compact areas as much the flat\nvariant.\n\n```jsx live\nconst App = () => (\n  <Alert.Root colorPalette=\"positive\" variant=\"outlined\" width=\"8000\">\n    <Alert.Title>Success! Your Account is Verified</Alert.Title>\n    <Alert.Description>\n      Congratulations! Your account has been successfully verified. You now have full access to all features.\n    </Alert.Description>\n  </Alert.Root>\n)\n```\n\n#### Flat\n\nUse for inline messages specific to a field. You can also use this in dense\nareas with popovers. Do not use as a global page alert. In these placements, use\nlinks instead of buttons if a user needs to navigate to more information.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"column\" alignItems=\"start\">\n    <Text fontWeight=\"500\">Email</Text>\n    <TextInput type=\"email\" />\n    <Alert.Root colorPalette=\"positive\" variant=\"flat\">\n      <Alert.Description>\n        Email is verified\n      </Alert.Description>\n    </Alert.Root>\n  </Stack>\n)\n```\n\n#### Width\n\nThe width is flexible, intended for many inline placements and page wide areas.\n\n```jsx live\nconst App = () => (\n  <Grid templateColumns=\"repeat(6, 1fr)\" gap=\"400\">\n    <Grid.Item colSpan={2}>\n      <Alert.Root colorPalette=\"critical\" variant=\"outlined\">\n        <Alert.Description>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Link>Read more</Link>\n        </Alert.Description>\n      </Alert.Root>\n    </Grid.Item>\n\n    <Grid.Item colSpan={3}>\n      <Alert.Root colorPalette=\"critical\" variant=\"outlined\">\n        <Alert.Description>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Link>Read more</Link>\n        </Alert.Description>\n      </Alert.Root>\n    </Grid.Item>\n\n    <Grid.Item colSpan={6}>\n      <Alert.Root colorPalette=\"critical\" variant=\"outlined\">\n        <Alert.Description>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Link>Read more</Link>\n        </Alert.Description>\n        <Alert.Actions>\n          <Button variant=\"outline\">View Changes</Button>\n        </Alert.Actions>\n        <Alert.DismissButton />\n      </Alert.Root>\n    </Grid.Item>\n  </Grid>\n);\n```\n\n### Color palette\n\n#### Positive\n\nPositive alerts should be used for important updates, and product wide\nannouncements. They should not be used in place of toasts or confirmation\nmessages.\n\n```jsx live\nconst App = () => (\n  <Grid templateColumns=\"repeat(2, 1fr)\" gap=\"400\">\n    <Alert.Root colorPalette=\"positive\" variant=\"outlined\">\n      <Alert.Title>Success! Your Account is Verified</Alert.Title>\n      <Alert.Description>\n        Congratulations! Your account has been successfully verified. You now have full access to all features.\n      </Alert.Description>\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"positive\" variant=\"flat\">\n      <Alert.Title>Success! Your Account is Verified</Alert.Title>\n      <Alert.Description>\n        Congratulations! Your account has been successfully verified. You now have full access to all features.\n      </Alert.Description>\n    </Alert.Root>\n  </Grid>\n);\n```\n\n#### Info\n\nShould be used when extra explanation is needed, this alert is meant to be more\ntemporary than using an info icon with a tooltip which declutters persistent\ninformation for users.\n\n```jsx live\nconst App = () => (\n  <Grid templateColumns=\"repeat(2, 1fr)\" gap=\"400\">\n    <Alert.Root colorPalette=\"info\" variant=\"outlined\">\n      <Alert.Title>New Feature Available</Alert.Title>\n      <Alert.Description>\n        We've added a new 'Smart Suggestions' feature to help you find relevant content faster. <Link>Check it out in your settings.</Link>\n      </Alert.Description>\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"info\" variant=\"flat\">\n      <Alert.Title>New Feature Available</Alert.Title>\n      <Alert.Description>\n        We've added a new 'Smart Suggestions' feature to help you find relevant content faster. <Link>Check it out in your settings.</Link>\n      </Alert.Description>\n    </Alert.Root>\n  </Grid>\n)\n```\n\n#### Warning\n\nMessages potential problems or situations that require user attention to prevent\nissues. They require the user to take action to make needed corrections or\nconfirmation.\n\n```jsx live\nconst App = () => (\n  <Grid templateColumns=\"repeat(2, 1fr)\" gap=\"400\">\n    <Alert.Root colorPalette=\"warning\" variant=\"outlined\">\n      <Alert.Title>Low Storage Space</Alert.Title>\n      <Alert.Description>\n        Your device is running low on storage. Some features may be disabled until you free up space. <Link>Manage storage.</Link>\n      </Alert.Description>\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"warning\" variant=\"flat\">\n      <Alert.Title>Low Storage Space</Alert.Title>\n      <Alert.Description>\n        Your device is running low on storage. Some features may be disabled until you free up space. <Link>Manage storage.</Link>\n      </Alert.Description>\n    </Alert.Root>\n  </Grid>\n)\n```\n\n#### Critical\n\nThese are used to message immediate, severe problems that require urgent action.\nThey indicate that something has already gone wrong and needs to be addressed\nimmediately.\n\n```jsx live\nconst App = () => (\n  <Grid templateColumns=\"repeat(2, 1fr)\" gap=\"400\">\n    <Alert.Root colorPalette=\"critical\" variant=\"outlined\">\n      <Alert.Title>Payment Processing Error</Alert.Title>\n      <Alert.Description>\n        A payment processing error occurred for order #12345. Please <Link>verify your payment gateway settings</Link> immediately to prevent further issues.\n      </Alert.Description>\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"critical\" variant=\"flat\">\n      <Alert.Title>Payment Processing Error</Alert.Title>\n      <Alert.Description>\n        A payment processing error occurred for order #12345. Please <Link>verify your payment gateway settings</Link> immediately to prevent further issues.\n      </Alert.Description>\n    </Alert.Root>\n  </Grid>\n)\n```\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nThese specifications define the standard styles and variations for icon buttons\nwithin our design system, covering different visual treatments for diverse use\ncases.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Figma library](https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=2702-5723)\n\n## Variables\n\nGet familiar with the features.\n\n### Adjustable elements\n\nSeveral of the features are flexible and optional for many use cases.\nNon-optional elements are the message, and the icons that are tied to the type\nof messaging.\n\n#### Buttons and links\n\nThe alert component allows for two buttons and links within the paragraph\nmessage. These buttons and links can be customized for any messaging needs.\n\n#### Close and dismiss buttons\n\nFeatures that may be used for closing or dismissing the alert message are\noptional. Removing these elements will make this message persistent for the\nuser. There is no need to duplicate a close action, using the close icon in the\nright corner or a dismiss button is enough for a user.\n\n#### Title and description\n\nThe message is needed in all uses. Please always utilize messaging for the user.\nUse of the title is optional, use if it gives greater clarity to the user.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"column\">\n    <Alert.Root colorPalette=\"critical\" variant=\"outlined\">\n      <Alert.Title>Lorem Ipsum</Alert.Title>\n      <Alert.Description>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Link>Read more</Link>\n      </Alert.Description>\n      <Alert.Actions>\n        <Stack direction=\"row\" alignItems=\"center\">\n          <Button variant=\"outline\">Dismiss</Button>\n          <Button variant=\"outline\">View changes</Button>\n        </Stack>\n      </Alert.Actions>\n      <Alert.DismissButton />\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"info\" variant=\"outlined\">\n      <Alert.Title>Lorem Ipsum</Alert.Title>\n      <Alert.Description>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Link>Read more</Link>\n      </Alert.Description>\n      <Alert.DismissButton />\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"warning\" variant=\"outlined\">\n      <Alert.Title>Lorem Ipsum</Alert.Title>\n      <Alert.Description>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Link>Read more</Link>\n      </Alert.Description>\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"positive\" variant=\"outlined\">\n      <Alert.Description>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Link>Read more</Link>\n      </Alert.Description>\n    </Alert.Root>\n  </Stack>\n)\n```\n\n### Style\n\n#### Outlined\n\nUse when getting attention is more important. These can be used inline, but they\ntake up space and it is not as easy to slide into compact areas as much the flat\nvariant.\n\n```jsx live\nconst App = () => (\n  <Alert.Root colorPalette=\"positive\" variant=\"outlined\" width=\"8000\">\n    <Alert.Title>Success! Your Account is Verified</Alert.Title>\n    <Alert.Description>\n      Congratulations! Your account has been successfully verified. You now have full access to all features.\n    </Alert.Description>\n  </Alert.Root>\n)\n```\n\n#### Flat\n\nUse for inline messages specific to a field. You can also use this in dense\nareas with popovers. Do not use as a global page alert. In these placements, use\nlinks instead of buttons if a user needs to navigate to more information.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"column\" alignItems=\"start\">\n    <Text fontWeight=\"500\">Email</Text>\n    <TextInput type=\"email\" />\n    <Alert.Root colorPalette=\"positive\" variant=\"flat\">\n      <Alert.Description>\n        Email is verified\n      </Alert.Description>\n    </Alert.Root>\n  </Stack>\n)\n```\n\n#### Width\n\nThe width is flexible, intended for many inline placements and page wide areas.\n\n```jsx live\nconst App = () => (\n  <Grid templateColumns=\"repeat(6, 1fr)\" gap=\"400\">\n    <Grid.Item colSpan={2}>\n      <Alert.Root colorPalette=\"critical\" variant=\"outlined\">\n        <Alert.Description>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Link>Read more</Link>\n        </Alert.Description>\n      </Alert.Root>\n    </Grid.Item>\n\n    <Grid.Item colSpan={3}>\n      <Alert.Root colorPalette=\"critical\" variant=\"outlined\">\n        <Alert.Description>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Link>Read more</Link>\n        </Alert.Description>\n      </Alert.Root>\n    </Grid.Item>\n\n    <Grid.Item colSpan={6}>\n      <Alert.Root colorPalette=\"critical\" variant=\"outlined\">\n        <Alert.Description>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Link>Read more</Link>\n        </Alert.Description>\n        <Alert.Actions>\n          <Button variant=\"outline\">View Changes</Button>\n        </Alert.Actions>\n        <Alert.DismissButton />\n      </Alert.Root>\n    </Grid.Item>\n  </Grid>\n);\n```\n\n### Color palette\n\n#### Positive\n\nPositive alerts should be used for important updates, and product wide\nannouncements. They should not be used in place of toasts or confirmation\nmessages.\n\n```jsx live\nconst App = () => (\n  <Grid templateColumns=\"repeat(2, 1fr)\" gap=\"400\">\n    <Alert.Root colorPalette=\"positive\" variant=\"outlined\">\n      <Alert.Title>Success! Your Account is Verified</Alert.Title>\n      <Alert.Description>\n        Congratulations! Your account has been successfully verified. You now have full access to all features.\n      </Alert.Description>\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"positive\" variant=\"flat\">\n      <Alert.Title>Success! Your Account is Verified</Alert.Title>\n      <Alert.Description>\n        Congratulations! Your account has been successfully verified. You now have full access to all features.\n      </Alert.Description>\n    </Alert.Root>\n  </Grid>\n);\n```\n\n#### Info\n\nShould be used when extra explanation is needed, this alert is meant to be more\ntemporary than using an info icon with a tooltip which declutters persistent\ninformation for users.\n\n```jsx live\nconst App = () => (\n  <Grid templateColumns=\"repeat(2, 1fr)\" gap=\"400\">\n    <Alert.Root colorPalette=\"info\" variant=\"outlined\">\n      <Alert.Title>New Feature Available</Alert.Title>\n      <Alert.Description>\n        We've added a new 'Smart Suggestions' feature to help you find relevant content faster. <Link>Check it out in your settings.</Link>\n      </Alert.Description>\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"info\" variant=\"flat\">\n      <Alert.Title>New Feature Available</Alert.Title>\n      <Alert.Description>\n        We've added a new 'Smart Suggestions' feature to help you find relevant content faster. <Link>Check it out in your settings.</Link>\n      </Alert.Description>\n    </Alert.Root>\n  </Grid>\n)\n```\n\n#### Warning\n\nMessages potential problems or situations that require user attention to prevent\nissues. They require the user to take action to make needed corrections or\nconfirmation.\n\n```jsx live\nconst App = () => (\n  <Grid templateColumns=\"repeat(2, 1fr)\" gap=\"400\">\n    <Alert.Root colorPalette=\"warning\" variant=\"outlined\">\n      <Alert.Title>Low Storage Space</Alert.Title>\n      <Alert.Description>\n        Your device is running low on storage. Some features may be disabled until you free up space. <Link>Manage storage.</Link>\n      </Alert.Description>\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"warning\" variant=\"flat\">\n      <Alert.Title>Low Storage Space</Alert.Title>\n      <Alert.Description>\n        Your device is running low on storage. Some features may be disabled until you free up space. <Link>Manage storage.</Link>\n      </Alert.Description>\n    </Alert.Root>\n  </Grid>\n)\n```\n\n#### Critical\n\nThese are used to message immediate, severe problems that require urgent action.\nThey indicate that something has already gone wrong and needs to be addressed\nimmediately.\n\n```jsx live\nconst App = () => (\n  <Grid templateColumns=\"repeat(2, 1fr)\" gap=\"400\">\n    <Alert.Root colorPalette=\"critical\" variant=\"outlined\">\n      <Alert.Title>Payment Processing Error</Alert.Title>\n      <Alert.Description>\n        A payment processing error occurred for order #12345. Please <Link>verify your payment gateway settings</Link> immediately to prevent further issues.\n      </Alert.Description>\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"critical\" variant=\"flat\">\n      <Alert.Title>Payment Processing Error</Alert.Title>\n      <Alert.Description>\n        A payment processing error occurred for order #12345. Please <Link>verify your payment gateway settings</Link> immediately to prevent further issues.\n      </Alert.Description>\n    </Alert.Root>\n  </Grid>\n)\n```\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Variables",
+          "href": "#variables",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Adjustable elements",
+          "href": "#adjustable-elements",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Buttons and links",
+          "href": "#buttons-and-links",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Close and dismiss buttons",
+          "href": "#close-and-dismiss-buttons",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Title and description",
+          "href": "#title-and-description",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Style",
+          "href": "#style",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Outlined",
+          "href": "#outlined",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Flat",
+          "href": "#flat",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Width",
+          "href": "#width",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Color palette",
+          "href": "#color-palette",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Positive",
+          "href": "#positive",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            3,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Info",
+          "href": "#info",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            3,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Warning",
+          "href": "#warning",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            3,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Critical",
+          "href": "#critical",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            3,
+            4
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "a11y": {
+      "mdx": "\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone, including people with disabilities, by addressing visual, auditory,\ncognitive, and physical limitations.\n\n```jsx live\nconst App = () => (\n  <Alert.Root colorPalette=\"critical\" variant=\"outlined\">\n    <Alert.Title>Payment Processing Error</Alert.Title>\n    <Alert.Description>\n      A payment processing error occurred for order #12345. Please <Link>verify your\n      payment gateway settings</Link> immediately to prevent further issues.\n    </Alert.Description>\n    <Alert.Actions>\n      <Button variant=\"outline\">View changes</Button>\n    </Alert.Actions>\n    <Alert.DismissButton />\n  </Alert.Root>\n);\n```\n\n### Accessibility standards\n\n- **Info and relationships:** Ensure the alert's content and purpose are\n  programmatically determinable. Use `ARIA` attributes like `aria-live` and\n  `aria-atomic` to announce dynamic content changes to assistive technologies.\n- **Non-text content:** If the alert contains non-text content (e.g., icons),\n  provide text alternatives (e.g., alt text for images).\n- **Color contrast:** Ensure sufficient color contrast between the alert's text\n  and background.\n- **Use of color:** Don't rely solely on color to convey the alert's meaning.\n  Use additional visual cues like icons or text.\n- **Keyboard accessibility:** If the alert contains interactive elements (e.g.,\n  buttons), ensure they are keyboard operable. If the alert requires dismissal,\n  ensure it can be dismissed using the keyboard (e.g., Esc key).\n- **Focus visible:** If the alert contains interactive elements, provide a clear\n  visual focus indicator.\n- **On focus:** Ensure that the alert doesn't cause unexpected changes to the\n  page or context.\n- **Error identification:** If the alert indicates an error, clearly identify\n  and describe the error in text.\n- **Labels or instructions:** Provide clear and concise messages that are easy\n  to understand.\n- **Name, role, value:** Use appropriate semantic `HTML` and `ARIA` attributes\n  to define the alert's role, name, and value. This ensures compatibility with\n  assistive technologies. Use `role=\"alert\"` or `role=\"alertdialog\"` to define\n  the alert.\n- **Status messages:** For status messages that don't interrupt the user, use\n  `role=\"status\"` instead of `role=\"alert\"`.\n",
+      "toc": [
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { Alert, type AlertProps } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nThe Alert component uses a compound component pattern. You must wrap all parts in `Alert.Root`. The component automatically handles layout and icon selection based on the `colorPalette`.\n\n```jsx live-dev\nconst App = () => (\n  <Alert.Root colorPalette=\"info\">\n    <Alert.Title>Information</Alert.Title>\n    <Alert.Description>\n      This is a basic alert message notifying you of a change.\n    </Alert.Description>\n  </Alert.Root>\n)\n```\n\n## Usage examples\n\n### Color palettes\n\nThe `colorPalette` prop determines the semantic color and the accompanying icon. The following examples demonstrate every palette available for this component (`positive`, `warning`, `critical`, `info`).\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Alert.Root colorPalette=\"positive\">\n      <Alert.Title>Positive</Alert.Title>\n      <Alert.Description>Operation completed successfully.</Alert.Description>\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"warning\">\n      <Alert.Title>Warning</Alert.Title>\n      <Alert.Description>Please review your changes.</Alert.Description>\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"critical\">\n      <Alert.Title>Critical</Alert.Title>\n      <Alert.Description>An error occurred while saving.</Alert.Description>\n    </Alert.Root>\n\n    <Alert.Root colorPalette=\"info\">\n      <Alert.Title>Info</Alert.Title>\n      <Alert.Description>New updates are available.</Alert.Description>\n    </Alert.Root>\n  </Stack>\n)\n```\n\n### Visual variants\n\nTwo visual variants are available to suit different interface needs: `outlined` (default) and `flat`.\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Alert.Root variant=\"outlined\" colorPalette=\"info\">\n      <Alert.Title>Outlined (Default)</Alert.Title>\n      <Alert.Description>\n        Best for high-contrast environments or when the alert needs to stand out against a colored background.\n      </Alert.Description>\n    </Alert.Root>\n\n    <Alert.Root variant=\"flat\" colorPalette=\"info\">\n      <Alert.Title>Flat</Alert.Title>\n      <Alert.Description>\n        A subtler look, suitable for dense interfaces or secondary notifications.\n      </Alert.Description>\n    </Alert.Root>\n  </Stack>\n)\n```\n\n### Flexible composition\n\nThe component parts (`Title`, `Description`, `Actions`, `DismissButton`) can be composed as needed. The `Alert.Root` handles the layout regardless of the order in JSX.\n\n**Title only:**\n\n```jsx live-dev\nconst App = () => (\n  <Alert.Root colorPalette=\"positive\">\n    <Alert.Title>Success: Item created.</Alert.Title>\n  </Alert.Root>\n)\n```\n\n**Description only:**\n\n```jsx live-dev\nconst App = () => (\n  <Alert.Root colorPalette=\"info\">\n    <Alert.Description>\n      System maintenance scheduled for tonight at 02:00 UTC.\n    </Alert.Description>\n  </Alert.Root>\n)\n```\n\n### Adding actions\n\nUse `Alert.Actions` to group action buttons. These will be positioned correctly within the alert layout.\n\n```jsx live-dev\nconst App = () => (\n  <Alert.Root colorPalette=\"warning\">\n    <Alert.Title>Storage Limit Reached</Alert.Title>\n    <Alert.Description>\n      You have used 95% of your available storage.\n    </Alert.Description>\n    <Alert.Actions>\n      <Stack direction=\"row\" gap=\"200\">\n        <Button variant=\"solid\">Upgrade Plan</Button>\n        <Button variant=\"ghost\">Dismiss</Button>\n      </Stack>\n    </Alert.Actions>\n  </Alert.Root>\n)\n```\n\n### Dismissible alerts\n\nAdd the `Alert.DismissButton` to provide a close action. You must handle the dismissal logic (e.g., removing the alert from the DOM) yourself.\n\n```jsx live-dev\nconst App = () => {\n  const [isVisible, setIsVisible] = useState(true);\n\n  if (!isVisible) {\n    return (\n      <Button onPress={() => setIsVisible(true)}>\n        Reset Example\n      </Button>\n    );\n  }\n\n  return (\n    <Alert.Root colorPalette=\"info\" variant=\"outlined\">\n      <Alert.Title>Dismissible Alert</Alert.Title>\n      <Alert.Description>\n        Click the close button to dismiss this message.\n      </Alert.Description>\n      <Alert.DismissButton onPress={() => setIsVisible(false)} />\n    </Alert.Root>\n  );\n}\n```\n\n## Component requirements\n\n## Accessibility\n\nThe `Alert` component has built-in accessibility features:\n\n- **Role**: The root element automatically has `role=\"alert\"`. This informs screen readers that the content is important and time-sensitive. Because of `role=\"alert\"`'s intrusive nature, the `Alert` component should be used sparingly and only in situations where the user's immediate attention is required.\n- **Icons**: Decorative icons are automatically hidden from screen readers to avoid redundancy.\n- **Dismiss Button**: The `Alert.DismissButton` comes with a default accessible label (\"Dismiss\") which can be localized or overridden via `aria-label`.\n\nIf your use case requires tracking and analytics for this component, it is good practice to add a **persistent**, **unique** id to the component:\n\n```tsx\nconst PERSISTENT_ID = \"example-alert\";\n\nexport const Example = () => (\n  <Alert.Root id={PERSISTENT_ID}>\n    <Alert.Title>Notification</Alert.Title>\n  </Alert.Root>\n);\n```\n\n### Composition constraints\n\nThe `Alert` component manages its own layout grid. To ensure correct placement:\n\n- Keep sub-components (`Title`, `Description`, `Actions`, `DismissButton`) as direct children of `Alert.Root`.\n- Do not wrap sub-components in other elements (like `div` or `Stack`), as these wrappers will be rendered as part of the layout and may break the visual structure.\n- You *can* use layout components *inside* `Alert.Actions` or `Alert.Description` to organize content within those slots.\n\n## API reference\n\n<PropsTable id=\"Alert\" />\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using Alert within your application. As the component's internal functionality is already tested by Nimbus, these patterns help you verify your integration and application-specific logic.\n\n### Basic Rendering Tests\n\nVerify the alert renders with the expected content and role\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { Alert, Button, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Alert - Basic rendering\", () => {\n  it(\"renders the alert message\", () => {\n    render(\n      <NimbusProvider>\n        <Alert.Root colorPalette=\"critical\">\n          <Alert.Title>Error saving</Alert.Title>\n          <Alert.Description>Connection lost</Alert.Description>\n        </Alert.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"alert\")).toBeInTheDocument();\n    expect(screen.getByText(\"Error saving\")).toBeInTheDocument();\n    expect(screen.getByText(\"Connection lost\")).toBeInTheDocument();\n  });\n\n  it(\"renders with title only\", () => {\n    render(\n      <NimbusProvider>\n        <Alert.Root colorPalette=\"positive\">\n          <Alert.Title>Success: Item created.</Alert.Title>\n        </Alert.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"alert\")).toBeInTheDocument();\n    expect(screen.getByText(\"Success: Item created.\")).toBeInTheDocument();\n  });\n\n  it(\"renders with description only\", () => {\n    render(\n      <NimbusProvider>\n        <Alert.Root colorPalette=\"info\">\n          <Alert.Description>\n            System maintenance scheduled for tonight at 02:00 UTC.\n          </Alert.Description>\n        </Alert.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"alert\")).toBeInTheDocument();\n    expect(\n      screen.getByText(\"System maintenance scheduled for tonight at 02:00 UTC.\")\n    ).toBeInTheDocument();\n  });\n});\n```\n\n### Interaction Tests\n\nTest interactions with actions and dismiss buttons\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { Alert, Button, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Alert - Interactions\", () => {\n  it(\"calls the dismiss handler when clicked\", async () => {\n    const user = userEvent.setup();\n    const handleDismiss = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <Alert.Root>\n          <Alert.Title>Notification</Alert.Title>\n          <Alert.DismissButton onPress={handleDismiss} />\n        </Alert.Root>\n      </NimbusProvider>\n    );\n\n    const dismissBtn = screen.getByRole(\"button\", { name: /dismiss/i });\n    await user.click(dismissBtn);\n\n    expect(handleDismiss).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"handles action clicks\", async () => {\n    const user = userEvent.setup();\n    const handleAction = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <Alert.Root>\n          <Alert.Title>Confirmation</Alert.Title>\n          <Alert.Actions>\n            <Button onPress={handleAction}>Confirm</Button>\n          </Alert.Actions>\n        </Alert.Root>\n      </NimbusProvider>\n    );\n\n    await user.click(screen.getByRole(\"button\", { name: \"Confirm\" }));\n    expect(handleAction).toHaveBeenCalled();\n  });\n});\n```\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-alert--docs)\n\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Color palettes",
+          "href": "#color-palettes",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Visual variants",
+          "href": "#visual-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Flexible composition",
+          "href": "#flexible-composition",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Adding actions",
+          "href": "#adding-actions",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Dismissible alerts",
+          "href": "#dismissible-alerts",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Composition constraints",
+          "href": "#composition-constraints",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic Rendering Tests",
+          "href": "#basic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Interaction Tests",
+          "href": "#interaction-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "guidelines": {
+      "mdx": "\n## Guidelines\n\nAlert guidelines focus on delivering important and timely messages to users in a\nclear, noticeable, and accessible way, ensuring they understand the significance\nof the information and any required actions, while minimizing disruption to\ntheir workflow.\n\n### Writing guidelines\n\n- **Clarity and urgency:** Use clear, short messages with titles that match the\n  alert's urgency, and use visuals to reinforce it.\n- **User experience:** Place alerts strategically, allow dismissal when\n  available, provide actionable content, and avoid overuse to prevent alert\n  fatigue. Excessive and poorly designed alerts can lead to alert fatigue, a\n  state of desensitization where individuals disregard or fail to act upon\n  critical notifications due to overexposure, often stemming from alerts that\n  are too frequent, irrelevant to the user's context, or lacking in actionable\n  information.\n  - **Flat styled:** Use inline in forms and within popovers when needed. These\n    can be used inside forms to signal validation status.\n  - **Outlined styled:** Be mindful of how many alerts occur on one page. These\n    are best used for page or product wide information. They are not meant to be\n    used as toasts.\n- **Accessibility and design:** Maintain consistent styling, use color and icons\n  effectively, and ensure alerts are accessible to all users. For example, do\n  not use the information colorPalette to communicate a critical error.\n\n### Usage\n\nCorrect usage guides for alerts are important for we do not want to fatigue\nusers to a point where alert messages are ignored.\n\n> [!TIP]\\\n> When to use\n\n- **Do use alerts for important information:** Reserve alerts for critical,\n  urgent, or highly relevant messages that require user attention.\n- **Do choose the right alert type:** Match the alert's colorPalette and visual\n  style to the severity of the message (positive, informational, warning,\n  critical).\n- **Do provide clear and concise messages:** Write messages that are easy to\n  understand and avoid jargon.\n- **Do include actionable items:** If necessary, provide clear calls to action\n  (buttons, links) to help users resolve the issue.\n- **Do allow users to dismiss alerts:** Give users the option to dismiss alerts\n  when they are no longer relevant.\n- **Do place alerts strategically:** Position alerts where they are easily\n  noticed but don't disrupt the user's workflow.\n- **Do maintain consistency:** Use consistent styling and behavior for alerts\n  across your application or website.\n\n> [!CAUTION]\\\n> When not to use\n\n- **Don't overuse alerts:** Avoid using alerts for minor or non-essential\n  information. Try to keep to one alert per view for most interactions. Overuse\n  leads to alert fatigue.\n- **Don't use alerts for regular updates:** Use other UI elements (e.g., toasts,\n  confirmation, and error states) for non-urgent updates.\n- **Don't obscure critical content:** Avoid placing alerts in a way that blocks\n  important information or functionality.\n- **Don't use confusing or ambiguous language:** Ensure alert messages are clear\n  and easy to understand.\n- **Don't create unnecessary interruptions:** Avoid using alerts that abruptly\n  interrupt the user's workflow without a valid reason.\n- **Don't make them too hard to dismiss:** Ensure that the user can easily close\n  an alert.\n\n### Use the correct colorPalette\n\nEnsure that you choose the correct colorPalette that will suit your message\nbest. If you choose the wrong type, it will confuse users.\n\n> [!TIP]\\\n> **Do**\n>\n> - This message correctly aligns message with the colorPalette needed to let\n>   the user know the information should be taken seriously.\n> - There is enough detailed information for the user to understand the issue\n>   and how to perform next steps to correct it.\n> - Utilizing actionable buttons to guide the user faster to the area that needs\n>   to be addressed is useful and convenient.\n\n```jsx live\nconst App = () => (\n  <Alert.Root colorPalette=\"critical\" variant=\"outlined\">\n    <Alert.Title>Payment Processing Error</Alert.Title>\n    <Alert.Description>\n      A payment processing error occurred for order #12345. Please <Link>verify your\n      payment gateway settings</Link> immediately to prevent further issues.\n    </Alert.Description>\n    <Alert.Actions>\n      <Button variant=\"outline\">Go to settings</Button>\n    </Alert.Actions>\n  </Alert.Root>\n);\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - This message does not align with the correct colorPalette needed.\n> - There isn’t enough information for the user to understand how to fix the\n>   issue, or what went wrong. Provide more detailed information and advice to\n>   clear the error.\n> - This type of message is critical, rethink about allowing the user to clear\n>   the message instead of fixing the issue.\n> - You do not need to use both a close icon and a dismiss button.\n\n```jsx live\nconst App = () => (\n  <Alert.Root colorPalette=\"positive\" variant=\"outlined\">\n    <Alert.Title>Payment Processing Error</Alert.Title>\n    <Alert.Actions>\n      <Button variant=\"outline\">Dismiss</Button>\n    </Alert.Actions>\n    <Alert.DismissButton />\n  </Alert.Root>\n);\n```\n\n### Placements\n\nAlerts are very flexible and can be placed in line or within pages, but be\nmindful not to use alert placement to cover or mask features that a user means\nto use. Judge if this message is permanent, or if it would be okay to allow the\nuser to dismiss the alert to clean up their experience once digesting the\ninformation provided in the alert.\n\nAlerts should not hover or lay on top of other elements.\n\n> [!TIP]\\\n> **Do**\n>\n> - Place inline where the information makes sense and is needed most without\n>   covering access to surrounding elements.\n> - Allow for the user to clear messages when applicable to keep their UI clean,\n>   and if they find non-critical information distracting.\n> - If information is needed permanently in the UI, try using another component\n>   like the info icon paired with the tooltip or popover.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"column\" width=\"8000\">\n    <Alert.Root colorPalette=\"critical\" variant=\"outlined\">\n      <Alert.Title>Account needs validation</Alert.Title>\n      <Alert.Description>\n        To edit these fields you must first validate your account. Please check your email.\n      </Alert.Description>\n    </Alert.Root>\n    <Text fontWeight=\"500\">Product price mode</Text>\n    <TextInput isInvalid />\n  </Stack>\n);\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Do not use alerts for form errors, instead use error helper text that\n>   populates below the field.\n> - Do not cover other elements on the page with the alert.\n> - Do not restrict the user from clearing messages when applicable. (Critical\n>   and warning messages are more likely to be persistent. Judge if the content\n>   needs to persist.)\n\n```jsx live\nconst App = () => (\n  <Box>\n    <Stack direction=\"column\">\n      <Text fontWeight=\"500\">Product price mode</Text>\n      <TextInput isInvalid />\n    </Stack>\n\n   <Alert.Root colorPalette=\"critical\" variant=\"outlined\" width=\"9600\" position=\"relative\" top=\"-500\" left=\"500\">\n      <Alert.Title>Product price mode error</Alert.Title>\n      <Alert.Description>\n        This price mode has not been defined.\n      </Alert.Description>\n      <Alert.Actions>\n        <Button variant=\"outline\">Define price mode</Button>\n      </Alert.Actions>\n    </Alert.Root>\n  </Box>\n);\n```\n\n> [!TIP]\\\n> **Do**\n>\n> - With form specific validation alerts, use the flat styled alerts. Keep\n>   warnings short in these locations, and if needed, include links for users.\n> - When there is more information needed, you can use flat-styled alerts within\n>   popovers.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"column\">\n    <Text fontWeight=\"500\">Customer group</Text>\n    <TextInput isDisabled />\n    <Alert.Root colorPalette=\"warning\" variant=\"flat\">\n      <Alert.Description>You do not have access to edit this field</Alert.Description>\n    </Alert.Root>\n  </Stack>\n);\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Do not put error messages within info popovers, use error or alert messaging\n>   that is shown to the user instead of hiding them in areas that require\n>   interaction.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"column\">\n    <Text fontWeight=\"500\">Customer group</Text>\n    <TextInput isInvalid />\n    <Alert.Root colorPalette=\"critical\" variant=\"flat\" position=\"relative\" top=\"-1000\" width=\"8000\">\n      <Alert.Description>This customer group does not exist or may have been deleted. Try again.</Alert.Description>\n    </Alert.Root>\n  </Stack>\n);\n```\n",
+      "toc": [
+        {
+          "value": "Guidelines",
+          "href": "#guidelines",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Writing guidelines",
+          "href": "#writing-guidelines",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage",
+          "href": "#usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Use the correct colorPalette",
+          "href": "#use-the-correct-colorpalette",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Placements",
+          "href": "#placements",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            4
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}