@commercetools/nimbus-mcp 0.1.0 → 2.10.0

package/data/docs/routes/components-layout-pagecontent.json

@@ -0,0 +1,673 @@
+{
+  "meta": {
+    "id": "Components-PageContent",
+    "title": "PageContent",
+    "exportName": "PageContent",
+    "description": "A layout component that constrains page content width and arranges content in single or multi-column layouts. It consolidates multiple width-based containers into a single compound component with explicit column control.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/page-content/page-content.mdx",
+    "menu": [
+      "Components",
+      "Layout",
+      "PageContent"
+    ],
+    "route": "components/layout/pagecontent",
+    "tags": [
+      "component",
+      "layout",
+      "page-content",
+      "columns",
+      "grid"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Key features",
+        "href": "#key-features",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Variables",
+        "href": "#variables",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Width variants",
+        "href": "#width-variants",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Wide",
+        "href": "#wide",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Narrow",
+        "href": "#narrow",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Full",
+        "href": "#full",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Column layouts",
+        "href": "#column-layouts",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Single column",
+        "href": "#single-column",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Equal columns (1/1)",
+        "href": "#equal-columns-11",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Sidebar layout (2/1)",
+        "href": "#sidebar-layout-21",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          2,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Sticky sidebar",
+        "href": "#sticky-sidebar",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Custom gap",
+        "href": "#custom-gap",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Specs",
+        "href": "#specs",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Accessibility",
+        "href": "#accessibility",
+        "depth": 2,
+        "numbering": [
+          1,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Accessibility standards",
+        "href": "#accessibility-standards",
+        "depth": 3,
+        "numbering": [
+          1,
+          4,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Predecessor",
+        "href": "#predecessor",
+        "depth": 2,
+        "numbering": [
+          1,
+          5
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "guidelines",
+        "title": "Guidelines",
+        "order": 2
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nPageContent provides a CSS grid-based centering pattern with configurable\nmax-width constraints and column layouts. It supports three width variants\n(wide, narrow, full) and three column configurations (single, equal split, and\n2:1 ratio) with built-in responsive collapse for multi-column layouts.\n\n### Key features\n\n- **Width constraints**: Three variants control the max-width of the content\n  area\n- **Column layouts**: Single, equal-split (1/1), and sidebar (2/1) column\n  configurations\n- **Responsive collapse**: Multi-column layouts collapse to a single column on\n  smaller screens\n- **Sticky sidebar**: Column-level sticky positioning for sidebar patterns\n- **Customizable gap**: Default spacing between columns can be overridden\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Merchant Center Page Content Layouts](https://docs.commercetools.com/merchant-center-customizations/development/page-content-layouts)\n\n## Variables\n\nGet familiar with the features.\n\n### Width variants\n\nThe `variant` prop controls the max-width constraint of the content area.\n\n#### Wide\n\nThe default variant. Content is constrained to a wide max-width, suitable for\nlarge forms or tables with few columns.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"wide\">\n    <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\">\n      <Text fontWeight=\"bold\" color=\"blue.12\">Wide</Text>\n      <Text>Constrained to a wide max-width. Best for large forms or tables with few columns.</Text>\n    </Box>\n  </PageContent.Root>\n)\n```\n\n#### Narrow\n\nContent is constrained to a narrower max-width, suitable for simple forms,\ncollapsible panels, and cards.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"narrow\">\n    <Box bg=\"purple.3\" padding=\"600\" borderRadius=\"200\">\n      <Text fontWeight=\"bold\" color=\"purple.12\">Narrow</Text>\n      <Text>Constrained to a narrow max-width. Best for simple forms and focused content.</Text>\n      <Text color=\"neutral.11\">The difference from wide is only visible when the viewport is wider than the narrow max-width of 3xl (768px).</Text>\n    </Box>\n  </PageContent.Root>\n)\n```\n\n#### Full\n\nContent spans the full available width with no max-width constraint. Suitable\nfor large tables and content with a horizontal reading flow.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"full\">\n    <Box bg=\"teal.3\" padding=\"600\" borderRadius=\"200\">\n      <Text fontWeight=\"bold\" color=\"teal.12\">Full</Text>\n      <Text>No width constraint. Best for large tables and horizontal reading flows.</Text>\n    </Box>\n  </PageContent.Root>\n)\n```\n\n### Column layouts\n\nThe `columns` prop controls how content is arranged within the container. Use\n`PageContent.Column` to wrap each column's content.\n\n#### Single column\n\nThe default layout. Content flows in a single column. No `PageContent.Column`\nwrappers are needed.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"wide\" columns=\"1\">\n    <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\">\n      <Text fontWeight=\"bold\" color=\"blue.12\">Single column</Text>\n      <Text>Content flows in a single, full-width column.</Text>\n    </Box>\n  </PageContent.Root>\n)\n```\n\n#### Equal columns (1/1)\n\nTwo columns of equal width. Best for grouping related content side by side to\nsave vertical space.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"wide\" columns=\"1/1\">\n    <PageContent.Column>\n      <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\">\n        <Text fontWeight=\"bold\" color=\"blue.12\">Left column</Text>\n        <Text>Equal width with the right column.</Text>\n      </Box>\n    </PageContent.Column>\n    <PageContent.Column>\n      <Box bg=\"purple.3\" padding=\"600\" borderRadius=\"200\">\n        <Text fontWeight=\"bold\" color=\"purple.12\">Right column</Text>\n        <Text>Equal width with the left column.</Text>\n      </Box>\n    </PageContent.Column>\n  </PageContent.Root>\n)\n```\n\n#### Sidebar layout (2/1)\n\nA wider main column with a narrower sidebar column. Best for forms with meta\ninformation or contextual links.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"wide\" columns=\"2/1\">\n    <PageContent.Column>\n      <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\">\n        <Text fontWeight=\"bold\" color=\"blue.12\">Main content (2fr)</Text>\n        <Text>The wider column for primary content such as forms.</Text>\n      </Box>\n    </PageContent.Column>\n    <PageContent.Column>\n      <Box bg=\"purple.3\" padding=\"600\" borderRadius=\"200\">\n        <Text fontWeight=\"bold\" color=\"purple.12\">Sidebar (1fr)</Text>\n        <Text>Narrower column for meta information.</Text>\n      </Box>\n    </PageContent.Column>\n  </PageContent.Root>\n)\n```\n\n### Sticky sidebar\n\nUse the `sticky` prop on a `PageContent.Column` to make it stick to the top of\nthe viewport during scroll. This is commonly used for sidebar navigation or meta\ninformation that should remain visible.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"wide\" columns=\"2/1\">\n    <PageContent.Column>\n      <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\" minHeight=\"300px\">\n        <Text fontWeight=\"bold\" color=\"blue.12\">Main content</Text>\n        <Text>Tall content area that creates scrollable space.</Text>\n      </Box>\n    </PageContent.Column>\n    <PageContent.Column sticky>\n      <Box bg=\"purple.3\" padding=\"600\" borderRadius=\"200\">\n        <Text fontWeight=\"bold\" color=\"purple.12\">Sticky sidebar</Text>\n        <Text>This column stays visible while scrolling.</Text>\n      </Box>\n    </PageContent.Column>\n  </PageContent.Root>\n)\n```\n\n### Custom gap\n\nThe default gap between columns is `800` (32px). Override it with the `gap`\nstyle prop for tighter or wider spacing.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"800\">\n    <PageContent.Root variant=\"wide\" columns=\"1/1\">\n      <PageContent.Column>\n        <Box bg=\"blue.3\" padding=\"400\" borderRadius=\"200\">\n          <Text fontWeight=\"bold\" color=\"blue.12\">Default gap (800)</Text>\n        </Box>\n      </PageContent.Column>\n      <PageContent.Column>\n        <Box bg=\"blue.3\" padding=\"400\" borderRadius=\"200\">\n          <Text color=\"blue.12\">32px between columns</Text>\n        </Box>\n      </PageContent.Column>\n    </PageContent.Root>\n\n    <PageContent.Root variant=\"wide\" columns=\"1/1\" gap=\"1600\">\n      <PageContent.Column>\n        <Box bg=\"purple.3\" padding=\"400\" borderRadius=\"200\">\n          <Text fontWeight=\"bold\" color=\"purple.12\">Large gap (1600)</Text>\n        </Box>\n      </PageContent.Column>\n      <PageContent.Column>\n        <Box bg=\"purple.3\" padding=\"400\" borderRadius=\"200\">\n          <Text color=\"purple.12\">64px between columns</Text>\n        </Box>\n      </PageContent.Column>\n    </PageContent.Root>\n  </Stack>\n)\n```\n\n## Specs\n\n<PropsTable id=\"PageContent\" />\n\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone.\n\n### Accessibility standards\n\n- **Semantic structure:** PageContent renders semantic `<div>` elements that\n  provide a logical content structure for assistive technologies.\n- **Reading order:** The DOM order matches the visual order, ensuring screen\n  readers present content in the expected sequence.\n- **Responsive reflow:** Multi-column layouts collapse to a single column on\n  smaller screens, maintaining readability and preventing horizontal scrolling\n  (WCAG 1.4.10 Reflow).\n- **Landmark usage:** PageContent is a layout primitive. Wrap content in\n  appropriate landmark elements (`<main>`, `<aside>`, `<section>`) to provide\n  additional context for screen readers.\n\n## Predecessor\n\nPageContent replaces the `PageContentWide`, `PageContentNarrow`, and\n`PageContentFull` components from Merchant Center Application Kit. For detailed\nmigration instructions, see the\n[Migration guide](/components/layout/pagecontent/dev#migrating-from-merchant-center-application-kit)\nin the implementation docs. For the original Application Kit documentation, see\n[Page Content Layouts](https://docs.commercetools.com/merchant-center-customizations/development/page-content-layouts).\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nPageContent provides a CSS grid-based centering pattern with configurable\nmax-width constraints and column layouts. It supports three width variants\n(wide, narrow, full) and three column configurations (single, equal split, and\n2:1 ratio) with built-in responsive collapse for multi-column layouts.\n\n### Key features\n\n- **Width constraints**: Three variants control the max-width of the content\n  area\n- **Column layouts**: Single, equal-split (1/1), and sidebar (2/1) column\n  configurations\n- **Responsive collapse**: Multi-column layouts collapse to a single column on\n  smaller screens\n- **Sticky sidebar**: Column-level sticky positioning for sidebar patterns\n- **Customizable gap**: Default spacing between columns can be overridden\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Merchant Center Page Content Layouts](https://docs.commercetools.com/merchant-center-customizations/development/page-content-layouts)\n\n## Variables\n\nGet familiar with the features.\n\n### Width variants\n\nThe `variant` prop controls the max-width constraint of the content area.\n\n#### Wide\n\nThe default variant. Content is constrained to a wide max-width, suitable for\nlarge forms or tables with few columns.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"wide\">\n    <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\">\n      <Text fontWeight=\"bold\" color=\"blue.12\">Wide</Text>\n      <Text>Constrained to a wide max-width. Best for large forms or tables with few columns.</Text>\n    </Box>\n  </PageContent.Root>\n)\n```\n\n#### Narrow\n\nContent is constrained to a narrower max-width, suitable for simple forms,\ncollapsible panels, and cards.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"narrow\">\n    <Box bg=\"purple.3\" padding=\"600\" borderRadius=\"200\">\n      <Text fontWeight=\"bold\" color=\"purple.12\">Narrow</Text>\n      <Text>Constrained to a narrow max-width. Best for simple forms and focused content.</Text>\n      <Text color=\"neutral.11\">The difference from wide is only visible when the viewport is wider than the narrow max-width of 3xl (768px).</Text>\n    </Box>\n  </PageContent.Root>\n)\n```\n\n#### Full\n\nContent spans the full available width with no max-width constraint. Suitable\nfor large tables and content with a horizontal reading flow.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"full\">\n    <Box bg=\"teal.3\" padding=\"600\" borderRadius=\"200\">\n      <Text fontWeight=\"bold\" color=\"teal.12\">Full</Text>\n      <Text>No width constraint. Best for large tables and horizontal reading flows.</Text>\n    </Box>\n  </PageContent.Root>\n)\n```\n\n### Column layouts\n\nThe `columns` prop controls how content is arranged within the container. Use\n`PageContent.Column` to wrap each column's content.\n\n#### Single column\n\nThe default layout. Content flows in a single column. No `PageContent.Column`\nwrappers are needed.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"wide\" columns=\"1\">\n    <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\">\n      <Text fontWeight=\"bold\" color=\"blue.12\">Single column</Text>\n      <Text>Content flows in a single, full-width column.</Text>\n    </Box>\n  </PageContent.Root>\n)\n```\n\n#### Equal columns (1/1)\n\nTwo columns of equal width. Best for grouping related content side by side to\nsave vertical space.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"wide\" columns=\"1/1\">\n    <PageContent.Column>\n      <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\">\n        <Text fontWeight=\"bold\" color=\"blue.12\">Left column</Text>\n        <Text>Equal width with the right column.</Text>\n      </Box>\n    </PageContent.Column>\n    <PageContent.Column>\n      <Box bg=\"purple.3\" padding=\"600\" borderRadius=\"200\">\n        <Text fontWeight=\"bold\" color=\"purple.12\">Right column</Text>\n        <Text>Equal width with the left column.</Text>\n      </Box>\n    </PageContent.Column>\n  </PageContent.Root>\n)\n```\n\n#### Sidebar layout (2/1)\n\nA wider main column with a narrower sidebar column. Best for forms with meta\ninformation or contextual links.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"wide\" columns=\"2/1\">\n    <PageContent.Column>\n      <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\">\n        <Text fontWeight=\"bold\" color=\"blue.12\">Main content (2fr)</Text>\n        <Text>The wider column for primary content such as forms.</Text>\n      </Box>\n    </PageContent.Column>\n    <PageContent.Column>\n      <Box bg=\"purple.3\" padding=\"600\" borderRadius=\"200\">\n        <Text fontWeight=\"bold\" color=\"purple.12\">Sidebar (1fr)</Text>\n        <Text>Narrower column for meta information.</Text>\n      </Box>\n    </PageContent.Column>\n  </PageContent.Root>\n)\n```\n\n### Sticky sidebar\n\nUse the `sticky` prop on a `PageContent.Column` to make it stick to the top of\nthe viewport during scroll. This is commonly used for sidebar navigation or meta\ninformation that should remain visible.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"wide\" columns=\"2/1\">\n    <PageContent.Column>\n      <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\" minHeight=\"300px\">\n        <Text fontWeight=\"bold\" color=\"blue.12\">Main content</Text>\n        <Text>Tall content area that creates scrollable space.</Text>\n      </Box>\n    </PageContent.Column>\n    <PageContent.Column sticky>\n      <Box bg=\"purple.3\" padding=\"600\" borderRadius=\"200\">\n        <Text fontWeight=\"bold\" color=\"purple.12\">Sticky sidebar</Text>\n        <Text>This column stays visible while scrolling.</Text>\n      </Box>\n    </PageContent.Column>\n  </PageContent.Root>\n)\n```\n\n### Custom gap\n\nThe default gap between columns is `800` (32px). Override it with the `gap`\nstyle prop for tighter or wider spacing.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"800\">\n    <PageContent.Root variant=\"wide\" columns=\"1/1\">\n      <PageContent.Column>\n        <Box bg=\"blue.3\" padding=\"400\" borderRadius=\"200\">\n          <Text fontWeight=\"bold\" color=\"blue.12\">Default gap (800)</Text>\n        </Box>\n      </PageContent.Column>\n      <PageContent.Column>\n        <Box bg=\"blue.3\" padding=\"400\" borderRadius=\"200\">\n          <Text color=\"blue.12\">32px between columns</Text>\n        </Box>\n      </PageContent.Column>\n    </PageContent.Root>\n\n    <PageContent.Root variant=\"wide\" columns=\"1/1\" gap=\"1600\">\n      <PageContent.Column>\n        <Box bg=\"purple.3\" padding=\"400\" borderRadius=\"200\">\n          <Text fontWeight=\"bold\" color=\"purple.12\">Large gap (1600)</Text>\n        </Box>\n      </PageContent.Column>\n      <PageContent.Column>\n        <Box bg=\"purple.3\" padding=\"400\" borderRadius=\"200\">\n          <Text color=\"purple.12\">64px between columns</Text>\n        </Box>\n      </PageContent.Column>\n    </PageContent.Root>\n  </Stack>\n)\n```\n\n## Specs\n\n<PropsTable id=\"PageContent\" />\n\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone.\n\n### Accessibility standards\n\n- **Semantic structure:** PageContent renders semantic `<div>` elements that\n  provide a logical content structure for assistive technologies.\n- **Reading order:** The DOM order matches the visual order, ensuring screen\n  readers present content in the expected sequence.\n- **Responsive reflow:** Multi-column layouts collapse to a single column on\n  smaller screens, maintaining readability and preventing horizontal scrolling\n  (WCAG 1.4.10 Reflow).\n- **Landmark usage:** PageContent is a layout primitive. Wrap content in\n  appropriate landmark elements (`<main>`, `<aside>`, `<section>`) to provide\n  additional context for screen readers.\n\n## Predecessor\n\nPageContent replaces the `PageContentWide`, `PageContentNarrow`, and\n`PageContentFull` components from Merchant Center Application Kit. For detailed\nmigration instructions, see the\n[Migration guide](/components/layout/pagecontent/dev#migrating-from-merchant-center-application-kit)\nin the implementation docs. For the original Application Kit documentation, see\n[Page Content Layouts](https://docs.commercetools.com/merchant-center-customizations/development/page-content-layouts).\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Key features",
+          "href": "#key-features",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Variables",
+          "href": "#variables",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Width variants",
+          "href": "#width-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Wide",
+          "href": "#wide",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Narrow",
+          "href": "#narrow",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Full",
+          "href": "#full",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Column layouts",
+          "href": "#column-layouts",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Single column",
+          "href": "#single-column",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Equal columns (1/1)",
+          "href": "#equal-columns-11",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Sidebar layout (2/1)",
+          "href": "#sidebar-layout-21",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Sticky sidebar",
+          "href": "#sticky-sidebar",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Custom gap",
+          "href": "#custom-gap",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Specs",
+          "href": "#specs",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Predecessor",
+          "href": "#predecessor",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { PageContent, type PageContentProps } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nThe simplest usage is a single-column width-constrained layout. No `PageContent.Column` wrappers are needed for single-column content.\n\n```jsx live-dev\nconst App = () => (\n  <PageContent.Root variant=\"wide\">\n    <Text>This content is constrained to the wide max-width.</Text>\n  </PageContent.Root>\n)\n```\n\n## Usage examples\n\n### Width variants\n\nThe `variant` prop controls the max-width constraint. Available values are `wide`, `narrow`, and `full`.\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"800\">\n   <PageContent.Root variant=\"narrow\">\n      <Box bg=\"purple.3\" padding=\"400\" borderRadius=\"200\">\n        <Text color=\"purple.12\" fontWeight=\"bold\">narrow</Text>\n        <Text color=\"neutral.11\">The difference from wide is only visible when the viewport is wider than the narrow max-width of 3xl (768px).</Text>\n      </Box>\n    </PageContent.Root>\n\n    <PageContent.Root variant=\"wide\">\n      <Box bg=\"blue.3\" padding=\"400\" borderRadius=\"200\">\n        <Text color=\"blue.12\" fontWeight=\"bold\">wide</Text>\n      </Box>\n    </PageContent.Root>\n\n    <PageContent.Root variant=\"full\">\n      <Box bg=\"teal.3\" padding=\"400\" borderRadius=\"200\">\n        <Text color=\"teal.12\" fontWeight=\"bold\">full</Text>\n      </Box>\n    </PageContent.Root>\n  </Stack>\n)\n```\n\n### Multi-column layouts\n\nUse the `columns` prop with `PageContent.Column` wrappers for multi-column layouts.\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"800\" >\n    <PageContent.Root variant=\"wide\" columns=\"1/1\">\n      <PageContent.Column>\n        <Box bg=\"blue.3\" padding=\"400\" borderRadius=\"200\">\n          <Text color=\"blue.12\" fontWeight=\"bold\">Left (equal)</Text>\n        </Box>\n      </PageContent.Column>\n      <PageContent.Column>\n        <Box bg=\"blue.3\" padding=\"400\" borderRadius=\"200\">\n          <Text color=\"blue.12\" fontWeight=\"bold\">Right (equal)</Text>\n        </Box>\n      </PageContent.Column>\n    </PageContent.Root>\n\n    <PageContent.Root variant=\"wide\" columns=\"2/1\">\n      <PageContent.Column>\n        <Box bg=\"purple.3\" padding=\"400\" borderRadius=\"200\">\n          <Text color=\"purple.12\" fontWeight=\"bold\">Main content (2fr)</Text>\n        </Box>\n      </PageContent.Column>\n      <PageContent.Column>\n        <Box bg=\"purple.3\" padding=\"400\" borderRadius=\"200\">\n          <Text color=\"purple.12\" fontWeight=\"bold\">Sidebar (1fr)</Text>\n        </Box>\n      </PageContent.Column>\n    </PageContent.Root>\n  </Stack>\n)\n```\n\n### Sticky sidebar\n\nUse the `sticky` prop on a `PageContent.Column` to make it stick during scroll. Override the default `top: 0` with the `top` style prop.\n\n```jsx live-dev\nconst App = () => (\n  <PageContent.Root variant=\"wide\" columns=\"2/1\" maxHeight=\"250px\" overflowY=\"auto\">\n    <PageContent.Column>\n      <Box bg=\"blue.3\" padding=\"400\" borderRadius=\"200\" minHeight=\"300px\">\n        <Text color=\"blue.12\" fontWeight=\"bold\">Main content area (tall)</Text>\n      </Box>\n    </PageContent.Column>\n    <PageContent.Column sticky top=\"400\">\n      <Box bg=\"purple.3\" padding=\"400\" borderRadius=\"200\">\n        <Text color=\"purple.12\" fontWeight=\"bold\">Sticky sidebar</Text>\n      </Box>\n    </PageContent.Column>\n  </PageContent.Root>\n)\n```\n\n### Custom gap\n\nThe default gap between columns is `800` (32px). Override with the `gap` style prop.\n\n```jsx live-dev\nconst App = () => (\n  <PageContent.Root variant=\"wide\" columns=\"1/1\" gap=\"1600\">\n    <PageContent.Column>\n      <Box bg=\"blue.3\" padding=\"400\" borderRadius=\"200\">\n        <Text color=\"blue.12\" fontWeight=\"bold\">Column 1</Text>\n      </Box>\n    </PageContent.Column>\n    <PageContent.Column>\n      <Box bg=\"purple.3\" padding=\"400\" borderRadius=\"200\">\n        <Text color=\"purple.12\" fontWeight=\"bold\">Column 2</Text>\n      </Box>\n    </PageContent.Column>\n  </PageContent.Root>\n)\n```\n\n## API reference\n\n<PropsTable id=\"PageContent\" />\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using PageContent within your application.\n\n### Usage Examples\n\nConsumer implementation patterns for PageContent\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { PageContent, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"PageContent - Usage examples\", () => {\n  it(\"renders a 2/1 layout with sticky sidebar\", () => {\n    render(\n      <NimbusProvider>\n        <PageContent.Root variant=\"wide\" columns=\"2/1\">\n          <PageContent.Column>Main content</PageContent.Column>\n          <PageContent.Column sticky>Sidebar</PageContent.Column>\n        </PageContent.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Main content\")).toBeInTheDocument();\n    expect(screen.getByText(\"Sidebar\")).toBeInTheDocument();\n  });\n});\n```\n\n\n## Migrating from Merchant Center Application Kit\n\n`PageContent` replaces the three separate page content containers from\n[`@commercetools-frontend/application-components`](https://docs.commercetools.com/merchant-center-customizations/development/page-content-layouts):\n\n| Application Kit Component | Nimbus Equivalent |\n|---|---|\n| `<PageContentWide>` | `<PageContent.Root variant=\"wide\">` |\n| `<PageContentNarrow>` | `<PageContent.Root variant=\"narrow\">` |\n| `<PageContentFull>` | `<PageContent.Root variant=\"full\">` |\n| `<PageContentWide columns=\"1/1\">` | `<PageContent.Root variant=\"wide\" columns=\"1/1\">` with `<PageContent.Column>` children |\n| `<PageContentWide columns=\"2/1\">` (implicit sticky right column) | `<PageContent.Root variant=\"wide\" columns=\"2/1\">` with `<PageContent.Column sticky>` |\n\nKey differences:\n\n- **Single component** with a `variant` prop instead of three separate components\n- **Explicit columns** via `<PageContent.Column>` instead of implicit `Children.toArray` splitting\n- **Opt-in sticky** via the `sticky` prop instead of automatic sticky on the right column in `2/1` mode\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-pagecontent--docs)\n- [Merchant Center Page Content Layouts](https://docs.commercetools.com/merchant-center-customizations/development/page-content-layouts) (predecessor)\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": "Width variants",
+          "href": "#width-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Multi-column layouts",
+          "href": "#multi-column-layouts",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Sticky sidebar",
+          "href": "#sticky-sidebar",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Custom gap",
+          "href": "#custom-gap",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage Examples",
+          "href": "#usage-examples-1",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Migrating from Merchant Center Application Kit",
+          "href": "#migrating-from-merchant-center-application-kit",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "guidelines": {
+      "mdx": "\n## Guidelines\n\nPageContent guidelines focus on selecting the correct width constraint and\ncolumn layout for your content, ensuring visual hierarchy and a consistent\nreading experience across page types and screen sizes.\n\n### Best practices\n\n- **Choose the right width:** Match the `variant` to the content type. Use\n  `narrow` for simple forms, `wide` for complex forms or small tables, and\n  `full` for large tables with many columns.\n- **Limit layout types per page:** Use a maximum of two different width variants\n  on a single page to maintain a consistent visual hierarchy.\n- **Use explicit columns:** Always wrap column content in `PageContent.Column`\n  components when using multi-column layouts (`1/1` or `2/1`). This makes the\n  layout structure clear and intentional.\n- **Sticky sidebar for context:** Use the `sticky` prop on sidebar columns that\n  contain meta information, navigation links, or status details that should\n  remain visible while the user scrolls through primary content.\n- **Responsive awareness:** Multi-column layouts automatically collapse to a\n  single column on smaller screens. Design content within each column to work\n  well in both its multi-column and collapsed single-column states.\n- **Consistent spacing:** Use the default gap of `800` (32px) between columns\n  for most layouts. Only override the gap when the content demands tighter or\n  wider spacing.\n\n### Usage\n\nPageContent provides the structural foundation for page-level layouts. The\ncorrect layout choice depends on the type of content being displayed and the\nreading patterns it supports.\n\n> [!TIP]\\\n> When to use\n\n- **Simple forms and focused content:** Use `variant=\"narrow\"` when form fields\n  should span the available width and the content is straightforward.\n- **Complex forms or small tables:** Use `variant=\"wide\"` for forms with\n  multiple sections or tables with a moderate number of columns.\n- **Large tables and horizontal content:** Use `variant=\"full\"` when content has\n  a strong horizontal reading flow, such as wide data tables.\n- **Side-by-side content grouping:** Use `columns=\"1/1\"` to group related\n  content into equal columns, saving vertical space.\n- **Main content with sidebar:** Use `columns=\"2/1\"` for forms or content that\n  benefits from adjacent meta information, links, or status indicators.\n\n> [!CAUTION]\\\n> When not to use\n\n- **Don't use narrow for tables:** Tables generally need more horizontal space.\n  Use `wide` or `full` instead.\n- **Don't use full for simple forms:** Forms without many columns do not benefit\n  from the full viewport width and become harder to read.\n- **Don't nest PageContent within PageContent:** Each page section should use a\n  single PageContent. Nesting creates unexpected layout behavior.\n- **Don't use equal columns (1/1) for forms and tables:** Equal columns are best\n  for grouped informational content, not for forms or tabular data.\n\n### Choosing a width variant\n\nSelect the width variant based on the primary content type on the page.\n\n> [!TIP]\\\n> **Do**\n>\n> - Use `narrow` for simple forms where fields span the full width. This\n>   focuses the user's attention and reduces unnecessary horizontal scanning.\n> - Use `wide` for forms with more complexity or small tables. Consider using\n>   `horizontalConstraint` on form fields to limit their width within the wider\n>   container.\n> - Use `full` for large data tables that benefit from the entire viewport\n>   width.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"800\">\n    <PageContent.Root variant=\"narrow\">\n      <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\">\n        <Stack gap=\"400\">\n          <Text fontWeight=\"bold\" color=\"blue.12\">Narrow: Simple form</Text>\n          <Text>Fields span the focused width.</Text>\n          <Text color=\"neutral.11\">The difference from wide is only visible when the viewport is wider than the narrow max-width of 3xl (768px).</Text>\n        </Stack>\n      </Box>\n    </PageContent.Root>\n\n    <PageContent.Root variant=\"wide\">\n      <Box bg=\"purple.3\" padding=\"600\" borderRadius=\"200\">\n        <Stack gap=\"400\">\n          <Text fontWeight=\"bold\" color=\"purple.12\">Wide: Complex form or small table</Text>\n          <Text>More room for multi-section layouts.</Text>\n        </Stack>\n      </Box>\n    </PageContent.Root>\n\n    <PageContent.Root variant=\"full\">\n      <Box bg=\"teal.3\" padding=\"600\" borderRadius=\"200\">\n        <Stack gap=\"400\">\n          <Text fontWeight=\"bold\" color=\"teal.12\">Full: Large table</Text>\n          <Text>Content spans the entire available width.</Text>\n        </Stack>\n      </Box>\n    </PageContent.Root>\n  </Stack>\n)\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Don't use `full` width for simple forms. The excessive width makes the\n>   content harder to read and creates an unfocused layout.\n> - Don't use `narrow` for data tables. The constrained width clips columns and\n>   forces horizontal scrolling.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"800\">\n    <PageContent.Root variant=\"full\">\n      <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\">\n        <Stack gap=\"400\">\n          <Text fontWeight=\"bold\" color=\"blue.12\">Full: Simple form (avoid)</Text>\n          <Text>This form does not need the full viewport width. Use narrow instead.</Text>\n        </Stack>\n      </Box>\n    </PageContent.Root>\n\n    <PageContent.Root variant=\"narrow\">\n      <Box bg=\"purple.3\" padding=\"600\" borderRadius=\"200\">\n        <Stack gap=\"400\">\n          <Text fontWeight=\"bold\" color=\"purple.12\">Narrow: Data table (avoid)</Text>\n          <Text>Tables need more room. Use wide or full instead.</Text>\n        </Stack>\n      </Box>\n    </PageContent.Root>\n  </Stack>\n)\n```\n\n### Column layout selection\n\nChoose the column layout based on how your content should be organized.\n\n> [!TIP]\\\n> **Do**\n>\n> - Use `columns=\"2/1\"` for a main content area with a sidebar for meta\n>   information, related links, or status indicators.\n> - Use the `sticky` prop on the sidebar column so it remains visible as the\n>   user scrolls through primary content.\n> - Use `columns=\"1/1\"` to group related content side by side when both\n>   sections are equally important.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"wide\" columns=\"2/1\">\n    <PageContent.Column>\n      <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\" minHeight=\"200px\">\n        <Stack gap=\"400\">\n          <Text fontWeight=\"bold\" color=\"blue.12\">Main content</Text>\n          <Text>Form fields and primary content live here.</Text>\n        </Stack>\n      </Box>\n    </PageContent.Column>\n    <PageContent.Column sticky>\n      <Box bg=\"purple.3\" padding=\"600\" borderRadius=\"200\">\n        <Stack gap=\"400\">\n          <Text fontWeight=\"bold\" color=\"purple.12\">Sticky sidebar</Text>\n          <Text>Meta information stays visible on scroll.</Text>\n        </Stack>\n      </Box>\n    </PageContent.Column>\n  </PageContent.Root>\n)\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Don't use equal columns (`1/1`) for a primary content area with a secondary\n>   sidebar. The visual weight should reflect the content hierarchy. Use `2/1`\n>   instead.\n> - Don't place tables inside multi-column layouts. Tables need the full\n>   available width of a single-column layout.\n\n```jsx live\nconst App = () => (\n  <PageContent.Root variant=\"wide\" columns=\"1/1\">\n    <PageContent.Column>\n      <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\">\n        <Stack gap=\"400\">\n          <Text fontWeight=\"bold\" color=\"blue.12\">Main form (avoid 1/1 for this)</Text>\n          <Text>This content is more important than the sidebar. Use 2/1 to reflect the hierarchy.</Text>\n        </Stack>\n      </Box>\n    </PageContent.Column>\n    <PageContent.Column>\n      <Box bg=\"purple.3\" padding=\"600\" borderRadius=\"200\">\n        <Stack gap=\"400\">\n          <Text fontWeight=\"bold\" color=\"purple.12\">Sidebar</Text>\n          <Text>Secondary content gets equal space unnecessarily.</Text>\n        </Stack>\n      </Box>\n    </PageContent.Column>\n  </PageContent.Root>\n)\n```\n\n### Combining layouts on a page\n\nMultiple PageContent sections can be stacked on a single page, but limit the\nnumber of different width variants to maintain visual consistency.\n\n> [!TIP]\\\n> **Do**\n>\n> - Stack multiple PageContent sections vertically for different content zones.\n> - Use a maximum of two different width variants on a page.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"800\">\n    <PageContent.Root variant=\"wide\" columns=\"2/1\">\n      <PageContent.Column>\n        <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\">\n          <Text fontWeight=\"bold\" color=\"blue.12\">Wide: Form section</Text>\n        </Box>\n      </PageContent.Column>\n      <PageContent.Column>\n        <Box bg=\"blue.3\" padding=\"600\" borderRadius=\"200\">\n          <Text fontWeight=\"bold\" color=\"blue.12\">Sidebar</Text>\n        </Box>\n      </PageContent.Column>\n    </PageContent.Root>\n\n    <PageContent.Root variant=\"full\">\n      <Box bg=\"purple.3\" padding=\"600\" borderRadius=\"200\">\n        <Text fontWeight=\"bold\" color=\"purple.12\">Full: Data table section</Text>\n      </Box>\n    </PageContent.Root>\n  </Stack>\n)\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Don't use more than two different layout types on a single page. Mixing\n>   narrow, wide, and full on the same page creates a disjointed visual\n>   experience.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"800\">\n    <PageContent.Root variant=\"narrow\">\n      <Box bg=\"blue.3\" padding=\"400\" borderRadius=\"200\">\n        <Text fontWeight=\"bold\" color=\"blue.12\">Narrow section</Text>\n      </Box>\n    </PageContent.Root>\n\n    <PageContent.Root variant=\"wide\">\n      <Box bg=\"purple.3\" padding=\"400\" borderRadius=\"200\">\n        <Text fontWeight=\"bold\" color=\"purple.12\">Wide section</Text>\n      </Box>\n    </PageContent.Root>\n\n    <PageContent.Root variant=\"full\">\n      <Box bg=\"teal.3\" padding=\"400\" borderRadius=\"200\">\n        <Text fontWeight=\"bold\" color=\"teal.12\">Full section (three variants is too many)</Text>\n      </Box>\n    </PageContent.Root>\n  </Stack>\n)\n```\n\n### Predecessor\n\nPageContent replaces the `PageContentWide`, `PageContentNarrow`, and\n`PageContentFull` components from Merchant Center Application Kit. For detailed\nmigration instructions, see the\n[Migration guide](/components/layout/pagecontent/dev#migrating-from-merchant-center-application-kit)\nin the implementation docs. For the original Application Kit documentation, see\n[Page Content Layouts](https://docs.commercetools.com/merchant-center-customizations/development/page-content-layouts).\n",
+      "toc": [
+        {
+          "value": "Guidelines",
+          "href": "#guidelines",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Best practices",
+          "href": "#best-practices",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage",
+          "href": "#usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Choosing a width variant",
+          "href": "#choosing-a-width-variant",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Column layout selection",
+          "href": "#column-layout-selection",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Combining layouts on a page",
+          "href": "#combining-layouts-on-a-page",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Predecessor",
+          "href": "#predecessor",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            6
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}