@commercetools/nimbus-mcp 2.11.0 → 3.1.0

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

@@ -146,10 +146,10 @@
       }
     ]
   },
-  "mdx": "\n## Overview\n\nDefaultPage is a unified compound component that structures both top-level and\ndetail views into three zones: a fixed header, a scrollable content area, and an\noptional footer.\n\nThe presence or absence of `DefaultPage.BackLink` determines which pattern is in\nuse: omit it for top-level main pages; include it for detail views that need\nback navigation.\n\n### Key features\n\n- **DefaultPage.Header** — Two-column grid that positions Title and Subtitle on\n  the left and Actions on the right\n- **DefaultPage.BackLink** — Optional back navigation link that shifts the\n  Actions area down to align with the title row; omit entirely for main pages\n- **DefaultPage.Title** — Styled `<h1>` element for the page heading\n- **DefaultPage.Subtitle** — Optional `<p>` element for secondary descriptive\n  text below the title\n- **DefaultPage.Actions** — Flex container for action buttons, right-aligned in\n  the header grid\n- **DefaultPage.TabNav** — Optional tab navigation wrapper for route-based page\n  sections; place inside `DefaultPage.Header`\n- **DefaultPage.Content** — Scrollable main content area with spacing that\n  preserves sticky positioning for child components\n- **DefaultPage.Footer** — Optional action bar for form pages; omit it and the\n  grid row collapses automatically\n- **Composable** — Arrange sub-components freely to cover read-only, editable,\n  creation, and tabbed patterns from the same primitives\n\n## Variables\n\nGet familiar with the sub-components.\n\n### Main page (no BackLink)\n\nA top-level page with title, subtitle, and header actions. Omit `BackLink` for\nany page that is not a subordinate detail view.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n        <DefaultPage.Subtitle>Manage your product catalog</DefaultPage.Subtitle>\n        <DefaultPage.Actions>\n          <Button variant=\"ghost\">Export</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Add Product</Button>\n        </DefaultPage.Actions>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box bg=\"neutral.3\" padding=\"600\" borderRadius=\"200\">\n          <Text>Content area</Text>\n        </Box>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Detail page (with BackLink)\n\nA detail view with back navigation. Adding `DefaultPage.BackLink` signals that\nthis is a subordinate page. The Actions area shifts down to align with the title\nrow automatically.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">\n          Back to products\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Wireless Headphones</DefaultPage.Title>\n        <DefaultPage.Subtitle>SKU-WH-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>Product information is displayed here.</Text>\n          <Text>Use this pattern for read-only resource views.</Text>\n        </Stack>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Form page with footer\n\nInclude `DefaultPage.Footer` for pages with save or submit actions. Omit it on\nread-only pages — the grid row collapses automatically.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/orders\">\n          Back to orders\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Edit Order</DefaultPage.Title>\n        <DefaultPage.Subtitle>Order #ORD-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box bg=\"neutral.3\" padding=\"400\" borderRadius=\"200\">\n          <Text>Form fields would go here.</Text>\n        </Box>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <Stack direction=\"row\" gap=\"200\" justify=\"flex-end\" width=\"100%\">\n          <Button variant=\"ghost\">Cancel</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Save</Button>\n        </Stack>\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Header actions\n\nAction buttons placed alongside the title using `DefaultPage.Actions`. The\nheader grid positions Actions on the right, spanning all title rows.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/discounts\">\n          Back to discounts\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Cart Discount Details</DefaultPage.Title>\n        <DefaultPage.Actions>\n          <Button size=\"sm\" variant=\"ghost\">Duplicate</Button>\n          <Button size=\"sm\" variant=\"solid\" colorPalette=\"primary\">Save</Button>\n        </DefaultPage.Actions>\n        <DefaultPage.Subtitle>10% off all items</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Discount configuration form fields would go here.</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Tab navigation\n\nCompose with the `TabNav` component inside `DefaultPage.Header` for route-based\ntab navigation. In a real app, the router renders content for the current route.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/customers\">\n          Back to customers\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Customer Details</DefaultPage.Title>\n        <DefaultPage.Subtitle>customer@example.com</DefaultPage.Subtitle>\n        <DefaultPage.TabNav>\n          <TabNav.Root aria-label=\"Customer sections\">\n            <TabNav.Item href=\"/customers/123/general\" isCurrent>General</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/addresses\">Addresses</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/orders\">Orders</TabNav.Item>\n          </TabNav.Root>\n        </DefaultPage.TabNav>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box py=\"400\">\n          <Text>General information content</Text>\n        </Box>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Flexible layout with sticky header and footer\n\nUse `layout=\"flexible\"` when the whole page should scroll. Add `stickyHeader`\nand/or `stickyFooter` to pin those zones while the page scrolls.\n\n```jsx live\nconst App = () => (\n  <Box height=\"400px\" overflow=\"auto\" border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root layout=\"flexible\" stickyHeader stickyFooter>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">\n          Back to products\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Edit product</DefaultPage.Title>\n        <DefaultPage.Subtitle>SKU-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>With flexible layout the whole page scrolls.</Text>\n          <Text>The header and footer stay pinned via sticky positioning.</Text>\n        </Stack>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <Stack direction=\"row\" gap=\"200\" justify=\"flex-end\" width=\"100%\">\n          <Button variant=\"ghost\">Cancel</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Save</Button>\n        </Stack>\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n## Accessibility\n\nDefaultPage uses semantic HTML landmarks to provide a clear document structure\nfor assistive technologies:\n\n- **Header** renders as `<header>` (banner landmark)\n- **Title** renders as `<h1>` for the page heading\n- **Content** renders as `<main>` (main landmark)\n- **Footer** renders as `<footer>` (contentinfo landmark)\n- **BackLink** renders as a semantic `<a>` element\n\nThese landmarks allow screen reader users to navigate directly between page\nsections. Because `<main>` must be unique per page, avoid nesting multiple\n`DefaultPage` components in a single view. When composing with `TabNav`, provide\nan `aria-label` on `TabNav.Root` to describe the navigation group for screen\nreaders.\n",
+  "mdx": "\n## Overview\n\nDefaultPage is a unified compound component that structures both top-level and\ndetail views into three zones: a fixed header, a scrollable content area, and an\noptional footer.\n\nThe presence or absence of `DefaultPage.BackLink` determines which pattern is in\nuse: omit it for top-level main pages; include it for detail views that need\nback navigation.\n\n### Key features\n\n- **DefaultPage.Header** — Two-column grid that positions Title and Subtitle on\n  the left and Actions on the right\n- **DefaultPage.BackLink** — Optional back navigation link that shifts the\n  Actions area down to align with the title row; omit entirely for main pages\n- **DefaultPage.Title** — Styled `<h1>` element for the page heading\n- **DefaultPage.Subtitle** — Optional `<p>` element for secondary descriptive\n  text below the title\n- **DefaultPage.Actions** — Flex container for action buttons, right-aligned in\n  the header grid\n- **DefaultPage.TabNav** — Optional tab navigation wrapper for route-based page\n  sections; place inside `DefaultPage.Header`\n- **DefaultPage.Content** — Scrollable main content area with spacing that\n  preserves sticky positioning for child components\n- **DefaultPage.Footer** — Optional action bar for form pages; omit it and the\n  grid row collapses automatically\n- **Composable** — Arrange sub-components freely to cover read-only, editable,\n  creation, and tabbed patterns from the same primitives\n\n## Variables\n\nGet familiar with the sub-components.\n\n### Main page (no BackLink)\n\nA top-level page with title, subtitle, and header actions. Omit `BackLink` for\nany page that is not a subordinate detail view.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n        <DefaultPage.Subtitle>Manage your product catalog</DefaultPage.Subtitle>\n        <DefaultPage.Actions>\n          <Button variant=\"ghost\">Export</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Add Product</Button>\n        </DefaultPage.Actions>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box bg=\"neutral.3\" padding=\"600\" borderRadius=\"200\">\n          <Text>Content area</Text>\n        </Box>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Detail page (with BackLink)\n\nA detail view with back navigation. Adding `DefaultPage.BackLink` signals that\nthis is a subordinate page. The Actions area shifts down to align with the title\nrow automatically.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">\n          Back to products\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Wireless Headphones</DefaultPage.Title>\n        <DefaultPage.Subtitle>SKU-WH-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>Product information is displayed here.</Text>\n          <Text>Use this pattern for read-only resource views.</Text>\n        </Stack>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Form page with footer\n\nInclude `DefaultPage.Footer` for pages with save or submit actions. Omit it on\nread-only pages — the grid row collapses automatically.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/orders\">\n          Back to orders\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Edit Order</DefaultPage.Title>\n        <DefaultPage.Subtitle>Order #ORD-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box bg=\"neutral.3\" padding=\"400\" borderRadius=\"200\">\n          <Text>Form fields would go here.</Text>\n        </Box>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <FormActionBar onSave={() => {}} onCancel={() => {}} />\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Header actions\n\nAction buttons placed alongside the title using `DefaultPage.Actions`. The\nheader grid positions Actions on the right, spanning all title rows.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/discounts\">\n          Back to discounts\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Cart Discount Details</DefaultPage.Title>\n        <DefaultPage.Actions>\n          <Button size=\"sm\" variant=\"ghost\">Duplicate</Button>\n          <Button size=\"sm\" variant=\"solid\" colorPalette=\"primary\">Save</Button>\n        </DefaultPage.Actions>\n        <DefaultPage.Subtitle>10% off all items</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Discount configuration form fields would go here.</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Tab navigation\n\nCompose with the `TabNav` component inside `DefaultPage.Header` for route-based\ntab navigation. In a real app, the router renders content for the current route.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/customers\">\n          Back to customers\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Customer Details</DefaultPage.Title>\n        <DefaultPage.Subtitle>customer@example.com</DefaultPage.Subtitle>\n        <DefaultPage.TabNav>\n          <TabNav.Root aria-label=\"Customer sections\">\n            <TabNav.Item href=\"/customers/123/general\" isCurrent>General</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/addresses\">Addresses</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/orders\">Orders</TabNav.Item>\n          </TabNav.Root>\n        </DefaultPage.TabNav>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box py=\"400\">\n          <Text>General information content</Text>\n        </Box>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Flexible layout with sticky header and footer\n\nUse `layout=\"flexible\"` when the whole page should scroll. Add `stickyHeader`\nand/or `stickyFooter` to pin those zones while the page scrolls.\n\n```jsx live\nconst App = () => (\n  <Box height=\"400px\" overflow=\"auto\" border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root layout=\"flexible\" stickyHeader stickyFooter>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">\n          Back to products\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Edit product</DefaultPage.Title>\n        <DefaultPage.Subtitle>SKU-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>With flexible layout the whole page scrolls.</Text>\n          <Text>The header and footer stay pinned via sticky positioning.</Text>\n        </Stack>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <FormActionBar onSave={() => {}} onCancel={() => {}} />\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n## Accessibility\n\nDefaultPage uses semantic HTML landmarks to provide a clear document structure\nfor assistive technologies:\n\n- **Header** renders as `<header>` (banner landmark)\n- **Title** renders as `<h1>` for the page heading\n- **Content** renders as `<main>` (main landmark)\n- **Footer** renders as `<footer>` (contentinfo landmark)\n- **BackLink** renders as a semantic `<a>` element\n\nThese landmarks allow screen reader users to navigate directly between page\nsections. Because `<main>` must be unique per page, avoid nesting multiple\n`DefaultPage` components in a single view. When composing with `TabNav`, provide\nan `aria-label` on `TabNav.Root` to describe the navigation group for screen\nreaders.\n",
   "views": {
     "overview": {
-      "mdx": "\n## Overview\n\nDefaultPage is a unified compound component that structures both top-level and\ndetail views into three zones: a fixed header, a scrollable content area, and an\noptional footer.\n\nThe presence or absence of `DefaultPage.BackLink` determines which pattern is in\nuse: omit it for top-level main pages; include it for detail views that need\nback navigation.\n\n### Key features\n\n- **DefaultPage.Header** — Two-column grid that positions Title and Subtitle on\n  the left and Actions on the right\n- **DefaultPage.BackLink** — Optional back navigation link that shifts the\n  Actions area down to align with the title row; omit entirely for main pages\n- **DefaultPage.Title** — Styled `<h1>` element for the page heading\n- **DefaultPage.Subtitle** — Optional `<p>` element for secondary descriptive\n  text below the title\n- **DefaultPage.Actions** — Flex container for action buttons, right-aligned in\n  the header grid\n- **DefaultPage.TabNav** — Optional tab navigation wrapper for route-based page\n  sections; place inside `DefaultPage.Header`\n- **DefaultPage.Content** — Scrollable main content area with spacing that\n  preserves sticky positioning for child components\n- **DefaultPage.Footer** — Optional action bar for form pages; omit it and the\n  grid row collapses automatically\n- **Composable** — Arrange sub-components freely to cover read-only, editable,\n  creation, and tabbed patterns from the same primitives\n\n## Variables\n\nGet familiar with the sub-components.\n\n### Main page (no BackLink)\n\nA top-level page with title, subtitle, and header actions. Omit `BackLink` for\nany page that is not a subordinate detail view.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n        <DefaultPage.Subtitle>Manage your product catalog</DefaultPage.Subtitle>\n        <DefaultPage.Actions>\n          <Button variant=\"ghost\">Export</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Add Product</Button>\n        </DefaultPage.Actions>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box bg=\"neutral.3\" padding=\"600\" borderRadius=\"200\">\n          <Text>Content area</Text>\n        </Box>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Detail page (with BackLink)\n\nA detail view with back navigation. Adding `DefaultPage.BackLink` signals that\nthis is a subordinate page. The Actions area shifts down to align with the title\nrow automatically.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">\n          Back to products\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Wireless Headphones</DefaultPage.Title>\n        <DefaultPage.Subtitle>SKU-WH-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>Product information is displayed here.</Text>\n          <Text>Use this pattern for read-only resource views.</Text>\n        </Stack>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Form page with footer\n\nInclude `DefaultPage.Footer` for pages with save or submit actions. Omit it on\nread-only pages — the grid row collapses automatically.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/orders\">\n          Back to orders\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Edit Order</DefaultPage.Title>\n        <DefaultPage.Subtitle>Order #ORD-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box bg=\"neutral.3\" padding=\"400\" borderRadius=\"200\">\n          <Text>Form fields would go here.</Text>\n        </Box>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <Stack direction=\"row\" gap=\"200\" justify=\"flex-end\" width=\"100%\">\n          <Button variant=\"ghost\">Cancel</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Save</Button>\n        </Stack>\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Header actions\n\nAction buttons placed alongside the title using `DefaultPage.Actions`. The\nheader grid positions Actions on the right, spanning all title rows.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/discounts\">\n          Back to discounts\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Cart Discount Details</DefaultPage.Title>\n        <DefaultPage.Actions>\n          <Button size=\"sm\" variant=\"ghost\">Duplicate</Button>\n          <Button size=\"sm\" variant=\"solid\" colorPalette=\"primary\">Save</Button>\n        </DefaultPage.Actions>\n        <DefaultPage.Subtitle>10% off all items</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Discount configuration form fields would go here.</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Tab navigation\n\nCompose with the `TabNav` component inside `DefaultPage.Header` for route-based\ntab navigation. In a real app, the router renders content for the current route.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/customers\">\n          Back to customers\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Customer Details</DefaultPage.Title>\n        <DefaultPage.Subtitle>customer@example.com</DefaultPage.Subtitle>\n        <DefaultPage.TabNav>\n          <TabNav.Root aria-label=\"Customer sections\">\n            <TabNav.Item href=\"/customers/123/general\" isCurrent>General</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/addresses\">Addresses</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/orders\">Orders</TabNav.Item>\n          </TabNav.Root>\n        </DefaultPage.TabNav>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box py=\"400\">\n          <Text>General information content</Text>\n        </Box>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Flexible layout with sticky header and footer\n\nUse `layout=\"flexible\"` when the whole page should scroll. Add `stickyHeader`\nand/or `stickyFooter` to pin those zones while the page scrolls.\n\n```jsx live\nconst App = () => (\n  <Box height=\"400px\" overflow=\"auto\" border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root layout=\"flexible\" stickyHeader stickyFooter>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">\n          Back to products\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Edit product</DefaultPage.Title>\n        <DefaultPage.Subtitle>SKU-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>With flexible layout the whole page scrolls.</Text>\n          <Text>The header and footer stay pinned via sticky positioning.</Text>\n        </Stack>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <Stack direction=\"row\" gap=\"200\" justify=\"flex-end\" width=\"100%\">\n          <Button variant=\"ghost\">Cancel</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Save</Button>\n        </Stack>\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n## Accessibility\n\nDefaultPage uses semantic HTML landmarks to provide a clear document structure\nfor assistive technologies:\n\n- **Header** renders as `<header>` (banner landmark)\n- **Title** renders as `<h1>` for the page heading\n- **Content** renders as `<main>` (main landmark)\n- **Footer** renders as `<footer>` (contentinfo landmark)\n- **BackLink** renders as a semantic `<a>` element\n\nThese landmarks allow screen reader users to navigate directly between page\nsections. Because `<main>` must be unique per page, avoid nesting multiple\n`DefaultPage` components in a single view. When composing with `TabNav`, provide\nan `aria-label` on `TabNav.Root` to describe the navigation group for screen\nreaders.\n",
+      "mdx": "\n## Overview\n\nDefaultPage is a unified compound component that structures both top-level and\ndetail views into three zones: a fixed header, a scrollable content area, and an\noptional footer.\n\nThe presence or absence of `DefaultPage.BackLink` determines which pattern is in\nuse: omit it for top-level main pages; include it for detail views that need\nback navigation.\n\n### Key features\n\n- **DefaultPage.Header** — Two-column grid that positions Title and Subtitle on\n  the left and Actions on the right\n- **DefaultPage.BackLink** — Optional back navigation link that shifts the\n  Actions area down to align with the title row; omit entirely for main pages\n- **DefaultPage.Title** — Styled `<h1>` element for the page heading\n- **DefaultPage.Subtitle** — Optional `<p>` element for secondary descriptive\n  text below the title\n- **DefaultPage.Actions** — Flex container for action buttons, right-aligned in\n  the header grid\n- **DefaultPage.TabNav** — Optional tab navigation wrapper for route-based page\n  sections; place inside `DefaultPage.Header`\n- **DefaultPage.Content** — Scrollable main content area with spacing that\n  preserves sticky positioning for child components\n- **DefaultPage.Footer** — Optional action bar for form pages; omit it and the\n  grid row collapses automatically\n- **Composable** — Arrange sub-components freely to cover read-only, editable,\n  creation, and tabbed patterns from the same primitives\n\n## Variables\n\nGet familiar with the sub-components.\n\n### Main page (no BackLink)\n\nA top-level page with title, subtitle, and header actions. Omit `BackLink` for\nany page that is not a subordinate detail view.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n        <DefaultPage.Subtitle>Manage your product catalog</DefaultPage.Subtitle>\n        <DefaultPage.Actions>\n          <Button variant=\"ghost\">Export</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Add Product</Button>\n        </DefaultPage.Actions>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box bg=\"neutral.3\" padding=\"600\" borderRadius=\"200\">\n          <Text>Content area</Text>\n        </Box>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Detail page (with BackLink)\n\nA detail view with back navigation. Adding `DefaultPage.BackLink` signals that\nthis is a subordinate page. The Actions area shifts down to align with the title\nrow automatically.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">\n          Back to products\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Wireless Headphones</DefaultPage.Title>\n        <DefaultPage.Subtitle>SKU-WH-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>Product information is displayed here.</Text>\n          <Text>Use this pattern for read-only resource views.</Text>\n        </Stack>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Form page with footer\n\nInclude `DefaultPage.Footer` for pages with save or submit actions. Omit it on\nread-only pages — the grid row collapses automatically.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/orders\">\n          Back to orders\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Edit Order</DefaultPage.Title>\n        <DefaultPage.Subtitle>Order #ORD-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box bg=\"neutral.3\" padding=\"400\" borderRadius=\"200\">\n          <Text>Form fields would go here.</Text>\n        </Box>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <FormActionBar onSave={() => {}} onCancel={() => {}} />\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Header actions\n\nAction buttons placed alongside the title using `DefaultPage.Actions`. The\nheader grid positions Actions on the right, spanning all title rows.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/discounts\">\n          Back to discounts\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Cart Discount Details</DefaultPage.Title>\n        <DefaultPage.Actions>\n          <Button size=\"sm\" variant=\"ghost\">Duplicate</Button>\n          <Button size=\"sm\" variant=\"solid\" colorPalette=\"primary\">Save</Button>\n        </DefaultPage.Actions>\n        <DefaultPage.Subtitle>10% off all items</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Discount configuration form fields would go here.</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Tab navigation\n\nCompose with the `TabNav` component inside `DefaultPage.Header` for route-based\ntab navigation. In a real app, the router renders content for the current route.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/customers\">\n          Back to customers\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Customer Details</DefaultPage.Title>\n        <DefaultPage.Subtitle>customer@example.com</DefaultPage.Subtitle>\n        <DefaultPage.TabNav>\n          <TabNav.Root aria-label=\"Customer sections\">\n            <TabNav.Item href=\"/customers/123/general\" isCurrent>General</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/addresses\">Addresses</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/orders\">Orders</TabNav.Item>\n          </TabNav.Root>\n        </DefaultPage.TabNav>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box py=\"400\">\n          <Text>General information content</Text>\n        </Box>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Flexible layout with sticky header and footer\n\nUse `layout=\"flexible\"` when the whole page should scroll. Add `stickyHeader`\nand/or `stickyFooter` to pin those zones while the page scrolls.\n\n```jsx live\nconst App = () => (\n  <Box height=\"400px\" overflow=\"auto\" border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root layout=\"flexible\" stickyHeader stickyFooter>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">\n          Back to products\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Edit product</DefaultPage.Title>\n        <DefaultPage.Subtitle>SKU-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>With flexible layout the whole page scrolls.</Text>\n          <Text>The header and footer stay pinned via sticky positioning.</Text>\n        </Stack>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <FormActionBar onSave={() => {}} onCancel={() => {}} />\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n## Accessibility\n\nDefaultPage uses semantic HTML landmarks to provide a clear document structure\nfor assistive technologies:\n\n- **Header** renders as `<header>` (banner landmark)\n- **Title** renders as `<h1>` for the page heading\n- **Content** renders as `<main>` (main landmark)\n- **Footer** renders as `<footer>` (contentinfo landmark)\n- **BackLink** renders as a semantic `<a>` element\n\nThese landmarks allow screen reader users to navigate directly between page\nsections. Because `<main>` must be unique per page, avoid nesting multiple\n`DefaultPage` components in a single view. When composing with `TabNav`, provide\nan `aria-label` on `TabNav.Root` to describe the navigation group for screen\nreaders.\n",
       "toc": [
         {
           "value": "Overview",
@@ -261,7 +261,7 @@
       ]
     },
     "dev": {
-      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { DefaultPage, type DefaultPageProps } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nDefaultPage uses a compound pattern to structure both main and detail views.\nAt minimum, wrap `DefaultPage.Header` (with `DefaultPage.Title`) and\n`DefaultPage.Content` inside `DefaultPage.Root`.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Your page content goes here.</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n## Layout modes\n\nDefaultPage supports two layout modes controlled by the `layout` prop on\n`DefaultPage.Root`.\n\n### Constrained layout (default)\n\nThe default mode. The page fills its parent container (`height: 100%`). Only\nthe content area scrolls — the header and footer are naturally pinned by the\nCSS grid and do not need sticky positioning. This is the recommended mode for\npages embedded inside an application shell.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"400px\" border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Only this content area scrolls in constrained mode.</Text>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <Button variant=\"solid\" colorPalette=\"primary\">Save</Button>\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Flexible layout\n\nSet `layout=\"flexible\"` when the whole page should scroll rather than just\nthe content area. This is useful for long-form pages inside a full-page scroll\ncontainer. In this mode, you can optionally pin the header or footer with\n`stickyHeader` and `stickyFooter`.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"400px\" overflow=\"auto\" border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root layout=\"flexible\" stickyHeader stickyFooter>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Edit product</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>With flexible layout the whole page scrolls.</Text>\n          <Text>Use stickyHeader / stickyFooter to pin zones.</Text>\n        </Stack>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <Button variant=\"solid\" colorPalette=\"primary\">Save changes</Button>\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n| Prop combination | Behaviour |\n|---|---|\n| `layout=\"constrained\"` (default) | Parent height filled; only content scrolls; header and footer pinned by grid |\n| `layout=\"flexible\"` | Height auto; whole page scrolls; nothing pinned |\n| `layout=\"flexible\" stickyHeader` | Flexible scroll with header pinned at top |\n| `layout=\"flexible\" stickyFooter` | Flexible scroll with footer pinned at bottom |\n| `layout=\"flexible\" stickyHeader stickyFooter` | Flexible scroll with both zones pinned |\n\n> [!TIP]\\\n> In **constrained** mode, header and footer are always pinned — you don't need\n> to set any sticky props. Switch to **flexible** mode when you want the whole\n> page to scroll, then opt in to sticky positioning as needed.\n\n> [!NOTE]\\\n> `stickyHeader` and `stickyFooter` are only accepted when `layout=\"flexible\"`.\n> TypeScript will produce a compile error if you use them without it.\n\n### Flexible layout with sticky footer only\n\nUse `stickyFooter` without `stickyHeader` when save actions must stay visible\nbut the header context can scroll away — common for long detail forms.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"400px\" overflow=\"auto\" border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root layout=\"flexible\" stickyFooter>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">Back to products</DefaultPage.BackLink>\n        <DefaultPage.Title>Edit: Classic T-Shirt</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>Scroll down — the header scrolls away but the footer stays pinned.</Text>\n          {Array.from({ length: 8 }, (_, i) => (\n            <FormField.Root key={i}>\n              <FormField.Label>{`Field ${i + 1}`}</FormField.Label>\n              <FormField.Input>\n                <TextInput placeholder={`Value for field ${i + 1}`} />\n              </FormField.Input>\n            </FormField.Root>\n          ))}\n        </Stack>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <Stack direction=\"row\" gap=\"200\">\n          <Button variant=\"solid\" colorPalette=\"primary\">Save changes</Button>\n          <Button variant=\"ghost\">Cancel</Button>\n        </Stack>\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n## Sub-components\n\n### DefaultPage.Header\n\nThe header section uses a two-column grid layout. `Title`, `Subtitle`, and any\ncustom content with `gridColumn=\"1\"` flow into the left column. `Actions` spans\nall rows on the right column and collapses when not present. When `BackLink` is\npresent, `Actions` automatically shifts down to align with the title row.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n        <DefaultPage.Actions>\n          <Button variant=\"ghost\">Export</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Add Product</Button>\n        </DefaultPage.Actions>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Content area</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### DefaultPage.Title\n\nRenders a styled `<h1>` element pinned to grid column 1. Accepts children for\nthe title text.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Content area</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### DefaultPage.Subtitle\n\nOptional subtitle rendered as a `<p>` element pinned to grid column 1, below\nthe title. Place it as a sibling of `Title` inside the `Header`.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n        <DefaultPage.Subtitle>Manage your product catalog</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Content area</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### DefaultPage.Actions\n\nA flex container with gap for action buttons. Pinned to grid column 2 (right),\nspanning all rows. When `BackLink` is present, the grid automatically shifts\n`Actions` to the title row.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n        <DefaultPage.Actions>\n          <Button variant=\"ghost\">Export</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Add Product</Button>\n        </DefaultPage.Actions>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Content area</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### DefaultPage.BackLink\n\nOptional back navigation link that renders as a semantic `<a>` element.\nRequires an `href` prop. Include it for detail views to signal the parent list\nor overview; omit it entirely for top-level main pages.\n\nAlways provide destination-specific text as children (e.g., \"Back to products\").\nA generic fallback label \"Go back\" is provided via i18n when children are\nomitted, but destination-specific text is strongly recommended for usability.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">\n          Back to products\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Wireless Headphones</DefaultPage.Title>\n        <DefaultPage.Subtitle>SKU-WH-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Product detail content</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### DefaultPage.TabNav\n\nLayout container for tab navigation in the header. Positions itself in the\nheader grid's last row at full width. Place it inside `DefaultPage.Header`,\nafter `Title` and `Subtitle`.\n\nWrap a `TabNav.Root` inside this component.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Customer Details</DefaultPage.Title>\n        <DefaultPage.Subtitle>customer@example.com</DefaultPage.Subtitle>\n        <DefaultPage.TabNav>\n          <TabNav.Root aria-label=\"Customer sections\">\n            <TabNav.Item href=\"/customers/123/general\" isCurrent>General</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/addresses\">Addresses</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/orders\">Orders</TabNav.Item>\n          </TabNav.Root>\n        </DefaultPage.TabNav>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>General information content</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### DefaultPage.Content\n\nThe main content area with scrollable overflow. Uses padding-based spacing to\npreserve sticky positioning for child components like `DataTable`.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Page Title</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box bg=\"neutral.3\" padding=\"400\" borderRadius=\"200\">\n          <Text>Content area with automatic padding spacing</Text>\n        </Box>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### DefaultPage.Footer\n\nOptional footer for page-level actions. Omit it entirely when the page has no\nform actions — the footer grid row collapses automatically when absent.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Project Settings</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box bg=\"neutral.3\" padding=\"400\" borderRadius=\"200\">\n          <Text>Form content</Text>\n        </Box>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <Stack direction=\"row\" gap=\"200\" justify=\"flex-end\" width=\"100%\">\n          <Button variant=\"ghost\">Cancel</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Save</Button>\n        </Stack>\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n> [!TIP]\\\n> Place the primary action first, followed by secondary actions (e.g., Cancel).\n> Use the `Spacer` component to push buttons apart — for example, a destructive\n> action on the left and the primary action on the right:\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Edit product</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Form content goes here.</Text>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <Stack direction=\"row\" gap=\"200\" width=\"100%\">\n          <Button colorPalette=\"critical\" variant=\"ghost\">Delete</Button>\n          <Spacer />\n          <Button variant=\"solid\" colorPalette=\"primary\">Save</Button>\n          <Button variant=\"ghost\">Cancel</Button>\n        </Stack>\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Custom elements in the header\n\nAny additional children placed in the `Header` default to column 2 (right). To\nplace a custom element on the left side of the header grid, set\n`gridColumn=\"1\"`.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title mb=\"100\">Page Title</DefaultPage.Title>\n        <Badge\n          gridColumn=\"1\"\n          justifySelf=\"flex-start\"\n          colorPalette=\"blue\"\n          size=\"xs\"\n        >\n          Custom in column 1\n        </Badge>\n        <Badge\n          colorPalette=\"mint\"\n          justifySelf=\"flex-end\"\n          size=\"xs\"\n        >\n          Custom in column 2\n        </Badge>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Content area</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n## Usage examples\n\n### Info main page (no BackLink, no Footer)\n\nFor top-level pages that display information without form actions, omit both\n`DefaultPage.BackLink` and `DefaultPage.Footer`.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n        <DefaultPage.Subtitle>Manage your product catalog</DefaultPage.Subtitle>\n        <DefaultPage.Actions>\n          <Button variant=\"ghost\">Export</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Add Product</Button>\n        </DefaultPage.Actions>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Product list content goes here.</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Form main page (with Footer)\n\nFor top-level pages with form actions, add `DefaultPage.Footer` containing\naction buttons. Omit `DefaultPage.BackLink` since this is a main-level page.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Project Settings</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <FormField.Root>\n            <FormField.Label>Project name</FormField.Label>\n            <FormField.Input>\n              <TextInput placeholder=\"e.g. My Store\" />\n            </FormField.Input>\n          </FormField.Root>\n          <FormField.Root>\n            <FormField.Label>Description</FormField.Label>\n            <FormField.Input>\n              <TextInput placeholder=\"Describe the project\" />\n            </FormField.Input>\n          </FormField.Root>\n        </Stack>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <Stack direction=\"row\" gap=\"200\" justify=\"flex-end\" width=\"100%\">\n          <Button variant=\"ghost\">Cancel</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Save</Button>\n        </Stack>\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Info detail page (with BackLink, no Footer)\n\nFor detail pages that display information without form actions, include\n`DefaultPage.BackLink` and omit `DefaultPage.Footer`.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">Back to products</DefaultPage.BackLink>\n        <DefaultPage.Title>Wireless Headphones</DefaultPage.Title>\n        <DefaultPage.Subtitle>SKU-WH-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>This is a read-only detail page with product information.</Text>\n        </Stack>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Form detail page (with BackLink and Footer)\n\nFor detail pages with form actions, include both `DefaultPage.BackLink` and\n`DefaultPage.Footer`.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/orders\">Back to orders</DefaultPage.BackLink>\n        <DefaultPage.Title>Edit Order</DefaultPage.Title>\n        <DefaultPage.Subtitle>Order #ORD-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>Form fields would go here.</Text>\n        </Stack>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <Stack direction=\"row\" gap=\"200\" justify=\"flex-end\" width=\"100%\">\n          <Button variant=\"ghost\">Cancel</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Save</Button>\n        </Stack>\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Tab navigation\n\nFor pages with route-based tab navigation, compose `TabNav` inside\n`DefaultPage.Header`. Unlike `Tabs` (which switches content panels), `TabNav`\nrenders navigation links — in a real app, the router handles content rendering.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/customers\">Back to customers</DefaultPage.BackLink>\n        <DefaultPage.Title>Customer Details</DefaultPage.Title>\n        <DefaultPage.Subtitle>customer@example.com</DefaultPage.Subtitle>\n        <DefaultPage.TabNav>\n          <TabNav.Root aria-label=\"Customer sections\">\n            <TabNav.Item href=\"/customers/123/general\" isCurrent>General</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/addresses\">Addresses</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/orders\">Orders</TabNav.Item>\n          </TabNav.Root>\n        </DefaultPage.TabNav>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box py=\"400\">\n          <Text>General information content</Text>\n        </Box>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n## Component parts\n\n| Part | Description |\n|------|-------------|\n| `DefaultPage.Root` | Page container providing layout context. Accepts `layout` (`\"constrained\"` \\| `\"flexible\"`), and `stickyHeader`/`stickyFooter` (flexible mode only) |\n| `DefaultPage.Header` | Header section; two-column grid for title area (left) and actions (right) |\n| `DefaultPage.BackLink` | Optional back navigation link (requires `href`); omit for main pages |\n| `DefaultPage.Title` | Page title (renders as `h1`) |\n| `DefaultPage.Subtitle` | Optional subtitle text (renders as `p`) |\n| `DefaultPage.Actions` | Flex container for action buttons, right-aligned in the header grid |\n| `DefaultPage.TabNav` | Layout container for tab navigation; place inside `Header` |\n| `DefaultPage.Content` | Scrollable main content area |\n| `DefaultPage.Footer` | Optional footer for form actions; omit for read-only pages |\n\n## Accessibility\n\nDefaultPage follows WCAG 2.1 AA guidelines using semantic HTML landmarks and a\nproper heading hierarchy.\n\n### Landmark roles\n\n- `DefaultPage.Header` uses the `<header>` element (banner landmark)\n- `DefaultPage.Content` uses the `<main>` element (main landmark)\n- `DefaultPage.Footer` uses the `<footer>` element (contentinfo landmark)\n- `DefaultPage.Title` renders as an `<h1>`, ensuring correct heading hierarchy\n- `DefaultPage.BackLink` renders as a semantic `<a>` element with a default\n  `aria-label` of \"Go back\" via i18n\n\n### Keyboard navigation\n\n| Key | Action |\n|-----|--------|\n| `Tab` | Move focus between interactive elements (back link, actions, tabs, content, footer buttons) |\n| `Shift + Tab` | Move focus in reverse order |\n| `Enter` / `Space` | Activate the focused link or button |\n\n### Screen reader behavior\n\n| Element | Role | Announced as |\n|---------|------|--------------|\n| `DefaultPage.Header` | `banner` | \"banner\" landmark |\n| `DefaultPage.BackLink` | `link` | Link with aria-label (e.g. \"Go back\" or custom label) |\n| `DefaultPage.Title` | `heading` (level 1) | \"Products, heading level 1\" |\n| `DefaultPage.Content` | `main` | \"main\" landmark |\n| `DefaultPage.Footer` | `contentinfo` | \"contentinfo\" landmark |\n\n### Labeling best practices\n\n- Override `DefaultPage.BackLink`'s default `aria-label=\"Go back\"` with a\n  destination-specific label (e.g. `aria-label=\"Back to products\"`) when the\n  destination context is important.\n- When composing with `TabNav`, always provide an `aria-label` on `TabNav.Root`\n  to describe the navigation group for screen readers.\n- Because `<main>` must be unique per page, avoid nesting multiple `DefaultPage`\n  components in a single view.\n\n## API reference\n\n<PropsTable id=\"DefaultPage\" />\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using DefaultPage\nwithin your application.\n\n### Main page (no back link)\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport {\n  Box,\n  Button,\n  DefaultPage,\n  NimbusProvider,\n  Stack,\n  TabNav,\n  Text,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"Main page (no back link)\", () => {\n  it(\"renders an info page with title, actions, and content\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.Title>Product Catalog</DefaultPage.Title>\n            <DefaultPage.Actions>\n              <Button>Add Product</Button>\n            </DefaultPage.Actions>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Text>Browse and manage your product catalog.</Text>\n          </DefaultPage.Content>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Product Catalog\")).toBeInTheDocument();\n    expect(screen.getByText(\"Add Product\")).toBeInTheDocument();\n    expect(\n      screen.getByText(\"Browse and manage your product catalog.\")\n    ).toBeInTheDocument();\n  });\n\n  it(\"renders a page with title and subtitle\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.Title>Orders</DefaultPage.Title>\n            <DefaultPage.Subtitle>\n              View and manage all customer orders\n            </DefaultPage.Subtitle>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Text>Order list goes here.</Text>\n          </DefaultPage.Content>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Orders\")).toBeInTheDocument();\n    expect(\n      screen.getByText(\"View and manage all customer orders\")\n    ).toBeInTheDocument();\n    expect(screen.getByText(\"Order list goes here.\")).toBeInTheDocument();\n  });\n\n  it(\"renders a form page with footer\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.Title>Create Discount</DefaultPage.Title>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Stack gap=\"400\">\n              <Text>Discount name</Text>\n              <Text>Discount value</Text>\n            </Stack>\n          </DefaultPage.Content>\n          <DefaultPage.Footer>\n            <Button>Save Discount</Button>\n            <Button variant=\"ghost\">Cancel</Button>\n          </DefaultPage.Footer>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Create Discount\")).toBeInTheDocument();\n    expect(screen.getByText(\"Save Discount\")).toBeInTheDocument();\n    expect(screen.getByText(\"Cancel\")).toBeInTheDocument();\n  });\n});\n```\n\n### Detail page (with back link)\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport {\n  Box,\n  Button,\n  DefaultPage,\n  NimbusProvider,\n  Stack,\n  TabNav,\n  Text,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"Detail page (with back link)\", () => {\n  it(\"renders an info detail page with BackLink, title, subtitle, and content\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.BackLink href=\"/products\">\n              Back to Products\n            </DefaultPage.BackLink>\n            <DefaultPage.Title>Running Shoes XL</DefaultPage.Title>\n            <DefaultPage.Subtitle>SKU: SHOES-XL-001</DefaultPage.Subtitle>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Text>Product details and attributes.</Text>\n          </DefaultPage.Content>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Back to Products\")).toBeInTheDocument();\n    expect(screen.getByText(\"Running Shoes XL\")).toBeInTheDocument();\n    expect(screen.getByText(\"SKU: SHOES-XL-001\")).toBeInTheDocument();\n    expect(\n      screen.getByText(\"Product details and attributes.\")\n    ).toBeInTheDocument();\n  });\n\n  it(\"renders a form detail page with BackLink and footer with save/cancel\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.BackLink href=\"/customers\">\n              Back to Customers\n            </DefaultPage.BackLink>\n            <DefaultPage.Title>Edit Customer</DefaultPage.Title>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Stack gap=\"400\">\n              <Text>First name</Text>\n              <Text>Last name</Text>\n              <Text>Email address</Text>\n            </Stack>\n          </DefaultPage.Content>\n          <DefaultPage.Footer>\n            <Button>Save Changes</Button>\n            <Button variant=\"ghost\">Cancel</Button>\n          </DefaultPage.Footer>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Back to Customers\")).toBeInTheDocument();\n    expect(screen.getByText(\"Edit Customer\")).toBeInTheDocument();\n    expect(screen.getByText(\"Save Changes\")).toBeInTheDocument();\n    expect(screen.getByText(\"Cancel\")).toBeInTheDocument();\n  });\n});\n```\n\n### With header actions\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport {\n  Box,\n  Button,\n  DefaultPage,\n  NimbusProvider,\n  Stack,\n  TabNav,\n  Text,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"With header actions\", () => {\n  it(\"renders a page with BackLink, Title, Actions, and Subtitle\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.BackLink href=\"/orders\">\n              Back to Orders\n            </DefaultPage.BackLink>\n            <DefaultPage.Title>Order #12345</DefaultPage.Title>\n            <DefaultPage.Actions>\n              <Button variant=\"ghost\">Cancel Order</Button>\n              <Button>Process Order</Button>\n            </DefaultPage.Actions>\n            <DefaultPage.Subtitle>\n              Placed on March 15, 2026\n            </DefaultPage.Subtitle>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Box>\n              <Text>Order items and shipment details.</Text>\n            </Box>\n          </DefaultPage.Content>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Back to Orders\")).toBeInTheDocument();\n    expect(screen.getByText(\"Order #12345\")).toBeInTheDocument();\n    expect(screen.getByText(\"Cancel Order\")).toBeInTheDocument();\n    expect(screen.getByText(\"Process Order\")).toBeInTheDocument();\n    expect(screen.getByText(\"Placed on March 15, 2026\")).toBeInTheDocument();\n  });\n});\n```\n\n### Layout modes\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport {\n  Box,\n  Button,\n  DefaultPage,\n  NimbusProvider,\n  Stack,\n  TabNav,\n  Text,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"Layout modes\", () => {\n  it(\"renders a constrained layout page (default, height: 100%)\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.Title>Product Catalog</DefaultPage.Title>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Text>\n              Constrained layout: the page fills its parent and only the content\n              area scrolls.\n            </Text>\n          </DefaultPage.Content>\n          <DefaultPage.Footer>\n            <Button>Save</Button>\n          </DefaultPage.Footer>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Product Catalog\")).toBeInTheDocument();\n    expect(\n      screen.getByText(\n        \"Constrained layout: the page fills its parent and only the content area scrolls.\"\n      )\n    ).toBeInTheDocument();\n  });\n\n  it(\"renders a flexible layout page that scrolls as a whole\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root layout=\"flexible\">\n          <DefaultPage.Header>\n            <DefaultPage.Title>Long Form Page</DefaultPage.Title>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Text>\n              Flexible layout: the whole page scrolls. Use stickyHeader or\n              stickyFooter to pin zones.\n            </Text>\n          </DefaultPage.Content>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Long Form Page\")).toBeInTheDocument();\n    expect(\n      screen.getByText(\n        \"Flexible layout: the whole page scrolls. Use stickyHeader or stickyFooter to pin zones.\"\n      )\n    ).toBeInTheDocument();\n  });\n\n  it(\"renders a flexible layout page with sticky header and footer\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root layout=\"flexible\" stickyHeader stickyFooter>\n          <DefaultPage.Header>\n            <DefaultPage.Title>Edit Customer</DefaultPage.Title>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Stack gap=\"400\">\n              <Text>First name</Text>\n              <Text>Last name</Text>\n            </Stack>\n          </DefaultPage.Content>\n          <DefaultPage.Footer>\n            <Button>Save Changes</Button>\n            <Button variant=\"ghost\">Cancel</Button>\n          </DefaultPage.Footer>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Edit Customer\")).toBeInTheDocument();\n    expect(screen.getByText(\"Save Changes\")).toBeInTheDocument();\n  });\n});\n```\n\n### With tab navigation\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport {\n  Box,\n  Button,\n  DefaultPage,\n  NimbusProvider,\n  Stack,\n  TabNav,\n  Text,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"With tab navigation\", () => {\n  it(\"renders a detail page with TabNav containing TabNav.Root and TabNav.Items\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.BackLink href=\"/products\">\n              Back to Products\n            </DefaultPage.BackLink>\n            <DefaultPage.Title>Winter Jacket</DefaultPage.Title>\n            <DefaultPage.TabNav>\n              <TabNav.Root aria-label=\"Product sections\">\n                <TabNav.Item href=\"#general\" aria-current=\"page\">\n                  General\n                </TabNav.Item>\n                <TabNav.Item href=\"#variants\">Variants</TabNav.Item>\n                <TabNav.Item href=\"#prices\">Prices</TabNav.Item>\n                <TabNav.Item href=\"#images\">Images</TabNav.Item>\n              </TabNav.Root>\n            </DefaultPage.TabNav>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Text>General product information.</Text>\n          </DefaultPage.Content>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Back to Products\")).toBeInTheDocument();\n    expect(screen.getByText(\"Winter Jacket\")).toBeInTheDocument();\n    expect(screen.getByText(\"General\")).toBeInTheDocument();\n    expect(screen.getByText(\"Variants\")).toBeInTheDocument();\n    expect(screen.getByText(\"Prices\")).toBeInTheDocument();\n    expect(screen.getByText(\"Images\")).toBeInTheDocument();\n    expect(\n      screen.getByText(\"General product information.\")\n    ).toBeInTheDocument();\n  });\n});\n```\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-layout-defaultpage--docs)\n",
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { DefaultPage, type DefaultPageProps } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nDefaultPage uses a compound pattern to structure both main and detail views.\nAt minimum, wrap `DefaultPage.Header` (with `DefaultPage.Title`) and\n`DefaultPage.Content` inside `DefaultPage.Root`.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Your page content goes here.</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n## Layout modes\n\nDefaultPage supports two layout modes controlled by the `layout` prop on\n`DefaultPage.Root`.\n\n### Constrained layout (default)\n\nThe default mode. The page fills its parent container (`height: 100%`). Only\nthe content area scrolls — the header and footer are naturally pinned by the\nCSS grid and do not need sticky positioning. This is the recommended mode for\npages embedded inside an application shell.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"400px\" border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Only this content area scrolls in constrained mode.</Text>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <Button variant=\"solid\" colorPalette=\"primary\">Save</Button>\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Flexible layout\n\nSet `layout=\"flexible\"` when the whole page should scroll rather than just\nthe content area. This is useful for long-form pages inside a full-page scroll\ncontainer. In this mode, you can optionally pin the header or footer with\n`stickyHeader` and `stickyFooter`.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"400px\" overflow=\"auto\" border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root layout=\"flexible\" stickyHeader stickyFooter>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Edit product</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>With flexible layout the whole page scrolls.</Text>\n          <Text>Use stickyHeader / stickyFooter to pin zones.</Text>\n        </Stack>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <Button variant=\"solid\" colorPalette=\"primary\">Save changes</Button>\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n| Prop combination | Behaviour |\n|---|---|\n| `layout=\"constrained\"` (default) | Parent height filled; only content scrolls; header and footer pinned by grid |\n| `layout=\"flexible\"` | Height auto; whole page scrolls; nothing pinned |\n| `layout=\"flexible\" stickyHeader` | Flexible scroll with header pinned at top |\n| `layout=\"flexible\" stickyFooter` | Flexible scroll with footer pinned at bottom |\n| `layout=\"flexible\" stickyHeader stickyFooter` | Flexible scroll with both zones pinned |\n\n> [!TIP]\\\n> In **constrained** mode, header and footer are always pinned — you don't need\n> to set any sticky props. Switch to **flexible** mode when you want the whole\n> page to scroll, then opt in to sticky positioning as needed.\n\n> [!NOTE]\\\n> `stickyHeader` and `stickyFooter` are only accepted when `layout=\"flexible\"`.\n> TypeScript will produce a compile error if you use them without it.\n\n### Flexible layout with sticky footer only\n\nUse `stickyFooter` without `stickyHeader` when save actions must stay visible\nbut the header context can scroll away — common for long detail forms.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"400px\" overflow=\"auto\" border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root layout=\"flexible\" stickyFooter>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">Back to products</DefaultPage.BackLink>\n        <DefaultPage.Title>Edit: Classic T-Shirt</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>Scroll down — the header scrolls away but the footer stays pinned.</Text>\n          {Array.from({ length: 8 }, (_, i) => (\n            <FormField.Root key={i}>\n              <FormField.Label>{`Field ${i + 1}`}</FormField.Label>\n              <FormField.Input>\n                <TextInput placeholder={`Value for field ${i + 1}`} />\n              </FormField.Input>\n            </FormField.Root>\n          ))}\n        </Stack>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <FormActionBar\n          saveLabel=\"Save changes\"\n          onSave={() => {}}\n          onCancel={() => {}}\n        />\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n## Sub-components\n\n### DefaultPage.Header\n\nThe header section uses a two-column grid layout. `Title`, `Subtitle`, and any\ncustom content with `gridColumn=\"1\"` flow into the left column. `Actions` spans\nall rows on the right column and collapses when not present. When `BackLink` is\npresent, `Actions` automatically shifts down to align with the title row.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n        <DefaultPage.Actions>\n          <Button variant=\"ghost\">Export</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Add Product</Button>\n        </DefaultPage.Actions>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Content area</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### DefaultPage.Title\n\nRenders a styled `<h1>` element pinned to grid column 1. Accepts children for\nthe title text.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Content area</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### DefaultPage.Subtitle\n\nOptional subtitle rendered as a `<p>` element pinned to grid column 1, below\nthe title. Place it as a sibling of `Title` inside the `Header`.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n        <DefaultPage.Subtitle>Manage your product catalog</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Content area</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### DefaultPage.Actions\n\nA flex container with gap for action buttons. Pinned to grid column 2 (right),\nspanning all rows. When `BackLink` is present, the grid automatically shifts\n`Actions` to the title row.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n        <DefaultPage.Actions>\n          <Button variant=\"ghost\">Export</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Add Product</Button>\n        </DefaultPage.Actions>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Content area</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### DefaultPage.BackLink\n\nOptional back navigation link that renders as a semantic `<a>` element.\nRequires an `href` prop. Include it for detail views to signal the parent list\nor overview; omit it entirely for top-level main pages.\n\nAlways provide destination-specific text as children (e.g., \"Back to products\").\nA generic fallback label \"Go back\" is provided via i18n when children are\nomitted, but destination-specific text is strongly recommended for usability.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">\n          Back to products\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Wireless Headphones</DefaultPage.Title>\n        <DefaultPage.Subtitle>SKU-WH-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Product detail content</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### DefaultPage.TabNav\n\nLayout container for tab navigation in the header. Positions itself in the\nheader grid's last row at full width. Place it inside `DefaultPage.Header`,\nafter `Title` and `Subtitle`.\n\nWrap a `TabNav.Root` inside this component.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Customer Details</DefaultPage.Title>\n        <DefaultPage.Subtitle>customer@example.com</DefaultPage.Subtitle>\n        <DefaultPage.TabNav>\n          <TabNav.Root aria-label=\"Customer sections\">\n            <TabNav.Item href=\"/customers/123/general\" isCurrent>General</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/addresses\">Addresses</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/orders\">Orders</TabNav.Item>\n          </TabNav.Root>\n        </DefaultPage.TabNav>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>General information content</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### DefaultPage.Content\n\nThe main content area with scrollable overflow. Uses padding-based spacing to\npreserve sticky positioning for child components like `DataTable`.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Page Title</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box bg=\"neutral.3\" padding=\"400\" borderRadius=\"200\">\n          <Text>Content area with automatic padding spacing</Text>\n        </Box>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### DefaultPage.Footer\n\nOptional footer for page-level actions. Omit it entirely when the page has no\nform actions — the footer grid row collapses automatically when absent.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Project Settings</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box bg=\"neutral.3\" padding=\"400\" borderRadius=\"200\">\n          <Text>Form content</Text>\n        </Box>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <FormActionBar onSave={() => {}} onCancel={() => {}} />\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n> [!TIP]\\\n> For standard save/cancel/delete footers, use the [`FormActionBar`\n> pattern](/patterns/actions/form-action-bar) — it enforces the canonical\n> button order (delete → cancel → save), variants, and loading states so you\n> don't have to reassemble them each time.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Edit product</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Form content goes here.</Text>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <FormActionBar\n          onSave={() => {}}\n          onCancel={() => {}}\n          onDelete={() => {}}\n        />\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\nDrop down to raw `Button` + `Group` / `Stack` only for non-standard layouts\nthat FormActionBar doesn't support (e.g., submit + reset + preview, or\nmulti-step wizard navigation).\n\n### Custom elements in the header\n\nAny additional children placed in the `Header` default to column 2 (right). To\nplace a custom element on the left side of the header grid, set\n`gridColumn=\"1\"`.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title mb=\"100\">Page Title</DefaultPage.Title>\n        <Badge\n          gridColumn=\"1\"\n          justifySelf=\"flex-start\"\n          colorPalette=\"blue\"\n          size=\"xs\"\n        >\n          Custom in column 1\n        </Badge>\n        <Badge\n          colorPalette=\"mint\"\n          justifySelf=\"flex-end\"\n          size=\"xs\"\n        >\n          Custom in column 2\n        </Badge>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Content area</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n## Usage examples\n\n### Info main page (no BackLink, no Footer)\n\nFor top-level pages that display information without form actions, omit both\n`DefaultPage.BackLink` and `DefaultPage.Footer`.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Products</DefaultPage.Title>\n        <DefaultPage.Subtitle>Manage your product catalog</DefaultPage.Subtitle>\n        <DefaultPage.Actions>\n          <Button variant=\"ghost\">Export</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Add Product</Button>\n        </DefaultPage.Actions>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Product list content goes here.</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Form main page (with Footer)\n\nFor top-level pages with form actions, add `DefaultPage.Footer` containing\naction buttons. Omit `DefaultPage.BackLink` since this is a main-level page.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.Title>Project Settings</DefaultPage.Title>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <FormField.Root>\n            <FormField.Label>Project name</FormField.Label>\n            <FormField.Input>\n              <TextInput placeholder=\"e.g. My Store\" />\n            </FormField.Input>\n          </FormField.Root>\n          <FormField.Root>\n            <FormField.Label>Description</FormField.Label>\n            <FormField.Input>\n              <TextInput placeholder=\"Describe the project\" />\n            </FormField.Input>\n          </FormField.Root>\n        </Stack>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <FormActionBar onSave={() => {}} onCancel={() => {}} />\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Info detail page (with BackLink, no Footer)\n\nFor detail pages that display information without form actions, include\n`DefaultPage.BackLink` and omit `DefaultPage.Footer`.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">Back to products</DefaultPage.BackLink>\n        <DefaultPage.Title>Wireless Headphones</DefaultPage.Title>\n        <DefaultPage.Subtitle>SKU-WH-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>This is a read-only detail page with product information.</Text>\n        </Stack>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Form detail page (with BackLink and Footer)\n\nFor detail pages with form actions, include both `DefaultPage.BackLink` and\n`DefaultPage.Footer`.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/orders\">Back to orders</DefaultPage.BackLink>\n        <DefaultPage.Title>Edit Order</DefaultPage.Title>\n        <DefaultPage.Subtitle>Order #ORD-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Stack gap=\"400\">\n          <Text>Form fields would go here.</Text>\n        </Stack>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <FormActionBar onSave={() => {}} onCancel={() => {}} />\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n### Tab navigation\n\nFor pages with route-based tab navigation, compose `TabNav` inside\n`DefaultPage.Header`. Unlike `Tabs` (which switches content panels), `TabNav`\nrenders navigation links — in a real app, the router handles content rendering.\n\n```jsx live-dev\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/customers\">Back to customers</DefaultPage.BackLink>\n        <DefaultPage.Title>Customer Details</DefaultPage.Title>\n        <DefaultPage.Subtitle>customer@example.com</DefaultPage.Subtitle>\n        <DefaultPage.TabNav>\n          <TabNav.Root aria-label=\"Customer sections\">\n            <TabNav.Item href=\"/customers/123/general\" isCurrent>General</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/addresses\">Addresses</TabNav.Item>\n            <TabNav.Item href=\"/customers/123/orders\">Orders</TabNav.Item>\n          </TabNav.Root>\n        </DefaultPage.TabNav>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box py=\"400\">\n          <Text>General information content</Text>\n        </Box>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n## Component parts\n\n| Part | Description |\n|------|-------------|\n| `DefaultPage.Root` | Page container providing layout context. Accepts `layout` (`\"constrained\"` \\| `\"flexible\"`), and `stickyHeader`/`stickyFooter` (flexible mode only) |\n| `DefaultPage.Header` | Header section; two-column grid for title area (left) and actions (right) |\n| `DefaultPage.BackLink` | Optional back navigation link (requires `href`); omit for main pages |\n| `DefaultPage.Title` | Page title (renders as `h1`) |\n| `DefaultPage.Subtitle` | Optional subtitle text (renders as `p`) |\n| `DefaultPage.Actions` | Flex container for action buttons, right-aligned in the header grid |\n| `DefaultPage.TabNav` | Layout container for tab navigation; place inside `Header` |\n| `DefaultPage.Content` | Scrollable main content area |\n| `DefaultPage.Footer` | Optional footer for form actions; omit for read-only pages |\n\n## Accessibility\n\nDefaultPage follows WCAG 2.1 AA guidelines using semantic HTML landmarks and a\nproper heading hierarchy.\n\n### Landmark roles\n\n- `DefaultPage.Header` uses the `<header>` element (banner landmark)\n- `DefaultPage.Content` uses the `<main>` element (main landmark)\n- `DefaultPage.Footer` uses the `<footer>` element (contentinfo landmark)\n- `DefaultPage.Title` renders as an `<h1>`, ensuring correct heading hierarchy\n- `DefaultPage.BackLink` renders as a semantic `<a>` element with a default\n  `aria-label` of \"Go back\" via i18n\n\n### Keyboard navigation\n\n| Key | Action |\n|-----|--------|\n| `Tab` | Move focus between interactive elements (back link, actions, tabs, content, footer buttons) |\n| `Shift + Tab` | Move focus in reverse order |\n| `Enter` / `Space` | Activate the focused link or button |\n\n### Screen reader behavior\n\n| Element | Role | Announced as |\n|---------|------|--------------|\n| `DefaultPage.Header` | `banner` | \"banner\" landmark |\n| `DefaultPage.BackLink` | `link` | Link with aria-label (e.g. \"Go back\" or custom label) |\n| `DefaultPage.Title` | `heading` (level 1) | \"Products, heading level 1\" |\n| `DefaultPage.Content` | `main` | \"main\" landmark |\n| `DefaultPage.Footer` | `contentinfo` | \"contentinfo\" landmark |\n\n### Labeling best practices\n\n- Override `DefaultPage.BackLink`'s default `aria-label=\"Go back\"` with a\n  destination-specific label (e.g. `aria-label=\"Back to products\"`) when the\n  destination context is important.\n- When composing with `TabNav`, always provide an `aria-label` on `TabNav.Root`\n  to describe the navigation group for screen readers.\n- Because `<main>` must be unique per page, avoid nesting multiple `DefaultPage`\n  components in a single view.\n\n## API reference\n\n<PropsTable id=\"DefaultPage\" />\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using DefaultPage\nwithin your application.\n\n### Main page (no back link)\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport {\n  Box,\n  Button,\n  DefaultPage,\n  NimbusProvider,\n  Stack,\n  TabNav,\n  Text,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"Main page (no back link)\", () => {\n  it(\"renders an info page with title, actions, and content\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.Title>Product Catalog</DefaultPage.Title>\n            <DefaultPage.Actions>\n              <Button>Add Product</Button>\n            </DefaultPage.Actions>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Text>Browse and manage your product catalog.</Text>\n          </DefaultPage.Content>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Product Catalog\")).toBeInTheDocument();\n    expect(screen.getByText(\"Add Product\")).toBeInTheDocument();\n    expect(\n      screen.getByText(\"Browse and manage your product catalog.\")\n    ).toBeInTheDocument();\n  });\n\n  it(\"renders a page with title and subtitle\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.Title>Orders</DefaultPage.Title>\n            <DefaultPage.Subtitle>\n              View and manage all customer orders\n            </DefaultPage.Subtitle>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Text>Order list goes here.</Text>\n          </DefaultPage.Content>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Orders\")).toBeInTheDocument();\n    expect(\n      screen.getByText(\"View and manage all customer orders\")\n    ).toBeInTheDocument();\n    expect(screen.getByText(\"Order list goes here.\")).toBeInTheDocument();\n  });\n\n  it(\"renders a form page with footer\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.Title>Create Discount</DefaultPage.Title>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Stack gap=\"400\">\n              <Text>Discount name</Text>\n              <Text>Discount value</Text>\n            </Stack>\n          </DefaultPage.Content>\n          <DefaultPage.Footer>\n            <Button>Save Discount</Button>\n            <Button variant=\"ghost\">Cancel</Button>\n          </DefaultPage.Footer>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Create Discount\")).toBeInTheDocument();\n    expect(screen.getByText(\"Save Discount\")).toBeInTheDocument();\n    expect(screen.getByText(\"Cancel\")).toBeInTheDocument();\n  });\n});\n```\n\n### Detail page (with back link)\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport {\n  Box,\n  Button,\n  DefaultPage,\n  NimbusProvider,\n  Stack,\n  TabNav,\n  Text,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"Detail page (with back link)\", () => {\n  it(\"renders an info detail page with BackLink, title, subtitle, and content\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.BackLink href=\"/products\">\n              Back to Products\n            </DefaultPage.BackLink>\n            <DefaultPage.Title>Running Shoes XL</DefaultPage.Title>\n            <DefaultPage.Subtitle>SKU: SHOES-XL-001</DefaultPage.Subtitle>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Text>Product details and attributes.</Text>\n          </DefaultPage.Content>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Back to Products\")).toBeInTheDocument();\n    expect(screen.getByText(\"Running Shoes XL\")).toBeInTheDocument();\n    expect(screen.getByText(\"SKU: SHOES-XL-001\")).toBeInTheDocument();\n    expect(\n      screen.getByText(\"Product details and attributes.\")\n    ).toBeInTheDocument();\n  });\n\n  it(\"renders a form detail page with BackLink and footer with save/cancel\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.BackLink href=\"/customers\">\n              Back to Customers\n            </DefaultPage.BackLink>\n            <DefaultPage.Title>Edit Customer</DefaultPage.Title>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Stack gap=\"400\">\n              <Text>First name</Text>\n              <Text>Last name</Text>\n              <Text>Email address</Text>\n            </Stack>\n          </DefaultPage.Content>\n          <DefaultPage.Footer>\n            <Button>Save Changes</Button>\n            <Button variant=\"ghost\">Cancel</Button>\n          </DefaultPage.Footer>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Back to Customers\")).toBeInTheDocument();\n    expect(screen.getByText(\"Edit Customer\")).toBeInTheDocument();\n    expect(screen.getByText(\"Save Changes\")).toBeInTheDocument();\n    expect(screen.getByText(\"Cancel\")).toBeInTheDocument();\n  });\n});\n```\n\n### With header actions\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport {\n  Box,\n  Button,\n  DefaultPage,\n  NimbusProvider,\n  Stack,\n  TabNav,\n  Text,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"With header actions\", () => {\n  it(\"renders a page with BackLink, Title, Actions, and Subtitle\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.BackLink href=\"/orders\">\n              Back to Orders\n            </DefaultPage.BackLink>\n            <DefaultPage.Title>Order #12345</DefaultPage.Title>\n            <DefaultPage.Actions>\n              <Button variant=\"ghost\">Cancel Order</Button>\n              <Button>Process Order</Button>\n            </DefaultPage.Actions>\n            <DefaultPage.Subtitle>\n              Placed on March 15, 2026\n            </DefaultPage.Subtitle>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Box>\n              <Text>Order items and shipment details.</Text>\n            </Box>\n          </DefaultPage.Content>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Back to Orders\")).toBeInTheDocument();\n    expect(screen.getByText(\"Order #12345\")).toBeInTheDocument();\n    expect(screen.getByText(\"Cancel Order\")).toBeInTheDocument();\n    expect(screen.getByText(\"Process Order\")).toBeInTheDocument();\n    expect(screen.getByText(\"Placed on March 15, 2026\")).toBeInTheDocument();\n  });\n});\n```\n\n### Layout modes\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport {\n  Box,\n  Button,\n  DefaultPage,\n  NimbusProvider,\n  Stack,\n  TabNav,\n  Text,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"Layout modes\", () => {\n  it(\"renders a constrained layout page (default, height: 100%)\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.Title>Product Catalog</DefaultPage.Title>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Text>\n              Constrained layout: the page fills its parent and only the content\n              area scrolls.\n            </Text>\n          </DefaultPage.Content>\n          <DefaultPage.Footer>\n            <Button>Save</Button>\n          </DefaultPage.Footer>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Product Catalog\")).toBeInTheDocument();\n    expect(\n      screen.getByText(\n        \"Constrained layout: the page fills its parent and only the content area scrolls.\"\n      )\n    ).toBeInTheDocument();\n  });\n\n  it(\"renders a flexible layout page that scrolls as a whole\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root layout=\"flexible\">\n          <DefaultPage.Header>\n            <DefaultPage.Title>Long Form Page</DefaultPage.Title>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Text>\n              Flexible layout: the whole page scrolls. Use stickyHeader or\n              stickyFooter to pin zones.\n            </Text>\n          </DefaultPage.Content>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Long Form Page\")).toBeInTheDocument();\n    expect(\n      screen.getByText(\n        \"Flexible layout: the whole page scrolls. Use stickyHeader or stickyFooter to pin zones.\"\n      )\n    ).toBeInTheDocument();\n  });\n\n  it(\"renders a flexible layout page with sticky header and footer\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root layout=\"flexible\" stickyHeader stickyFooter>\n          <DefaultPage.Header>\n            <DefaultPage.Title>Edit Customer</DefaultPage.Title>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Stack gap=\"400\">\n              <Text>First name</Text>\n              <Text>Last name</Text>\n            </Stack>\n          </DefaultPage.Content>\n          <DefaultPage.Footer>\n            <Button>Save Changes</Button>\n            <Button variant=\"ghost\">Cancel</Button>\n          </DefaultPage.Footer>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Edit Customer\")).toBeInTheDocument();\n    expect(screen.getByText(\"Save Changes\")).toBeInTheDocument();\n  });\n});\n```\n\n### With tab navigation\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport {\n  Box,\n  Button,\n  DefaultPage,\n  NimbusProvider,\n  Stack,\n  TabNav,\n  Text,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"With tab navigation\", () => {\n  it(\"renders a detail page with TabNav containing TabNav.Root and TabNav.Items\", () => {\n    render(\n      <NimbusProvider>\n        <DefaultPage.Root>\n          <DefaultPage.Header>\n            <DefaultPage.BackLink href=\"/products\">\n              Back to Products\n            </DefaultPage.BackLink>\n            <DefaultPage.Title>Winter Jacket</DefaultPage.Title>\n            <DefaultPage.TabNav>\n              <TabNav.Root aria-label=\"Product sections\">\n                <TabNav.Item href=\"#general\" aria-current=\"page\">\n                  General\n                </TabNav.Item>\n                <TabNav.Item href=\"#variants\">Variants</TabNav.Item>\n                <TabNav.Item href=\"#prices\">Prices</TabNav.Item>\n                <TabNav.Item href=\"#images\">Images</TabNav.Item>\n              </TabNav.Root>\n            </DefaultPage.TabNav>\n          </DefaultPage.Header>\n          <DefaultPage.Content>\n            <Text>General product information.</Text>\n          </DefaultPage.Content>\n        </DefaultPage.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Back to Products\")).toBeInTheDocument();\n    expect(screen.getByText(\"Winter Jacket\")).toBeInTheDocument();\n    expect(screen.getByText(\"General\")).toBeInTheDocument();\n    expect(screen.getByText(\"Variants\")).toBeInTheDocument();\n    expect(screen.getByText(\"Prices\")).toBeInTheDocument();\n    expect(screen.getByText(\"Images\")).toBeInTheDocument();\n    expect(\n      screen.getByText(\"General product information.\")\n    ).toBeInTheDocument();\n  });\n});\n```\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-layout-defaultpage--docs)\n",
       "toc": [
         {
           "value": "Getting started",
@@ -664,7 +664,7 @@
       ]
     },
     "guidelines": {
-      "mdx": "\n## Guidelines\n\nDefaultPage guidelines help you choose the right layout configuration for both\ntop-level and detail views, ensuring consistent navigation patterns and content\nstructure across your application.\n\n### Best practices\n\n- **Start with the simplest composition:** Every page needs `Root`, `Header`\n  with `Title`, and `Content`. Only add `BackLink`, `Actions`, `Subtitle`,\n  `TabNav`, and `Footer` when the page requires them.\n- **Use BackLink to signal detail views:** Include `DefaultPage.BackLink` for\n  any page that is subordinate to a parent list or overview. Omit it entirely\n  for top-level main pages.\n- **Always label the back link with its destination:** The back link label\n  should name where the user will go, not just say \"Back\".\n- **Keep the header concise:** Use the title for the resource name and the\n  subtitle for a secondary identifier (SKU, email, order number). Don't overload\n  the header with content that belongs in the body.\n- **Use Actions sparingly:** Limit header actions to 2–3 high-priority\n  operations. Move secondary actions into a menu or into the content area.\n- **Place form actions in the footer:** Save, cancel, and submit buttons belong\n  in `DefaultPage.Footer`, not the header. The footer stays anchored at the\n  bottom, providing a consistent location for form actions.\n- **Omit the footer for read-only pages:** Pages that display data without\n  editing don't need a footer. Removing it gives the content area more vertical\n  space and avoids implying that user input is expected.\n- **Use TabNav for multi-section navigation:** When a page has distinct content\n  sections reachable via routing, compose `TabNav` inside `DefaultPage.Header`\n  rather than stacking all sections vertically.\n\n### Usage\n\nDefaultPage works for any full-page view in your application. The pattern you\nuse depends on whether the page is a top-level main view or a subordinate detail\nview, and whether it is read-only or editable.\n\n> [!TIP]\\\n> When to use\n\n- **Top-level read-only views:** Use DefaultPage without `BackLink` or `Footer`\n  when displaying a list, table, or overview that the user cannot edit directly\n  (e.g., product list, order overview).\n- **Top-level form views:** Use DefaultPage without `BackLink` but with\n  `Footer` for top-level pages that include a form with save/cancel actions\n  (e.g., project settings, global configuration).\n- **Detail read-only views:** Use DefaultPage with `BackLink` but without\n  `Footer` when displaying information for a single resource the user cannot\n  edit (e.g., order details, customer profile in read mode).\n- **Detail editable views:** Use DefaultPage with both `BackLink` and `Footer`\n  for pages focused on editing a single resource (e.g., editing a product,\n  updating an order).\n- **Tabbed views:** Use DefaultPage with `TabNav` inside the `Header` when a\n  page (main or detail) has multiple logical sections reachable by route.\n- **Resource creation pages:** Use DefaultPage with `Footer` for \"create new\"\n  flows where the user fills out a form and submits.\n\n> [!CAUTION]\\\n> When not to use\n\n- **Modals, dialogs, or drawers:** DefaultPage is designed for full-page views\n  only. Use the appropriate overlay components for secondary workflows.\n- **Nested inside another DefaultPage:** Each view should have a single\n  DefaultPage at its root. Nesting creates duplicate `<main>` landmarks, which\n  violates WCAG.\n- **Dashboards with widget grids:** DefaultPage's single-column scrollable\n  content area is not suited for dashboard layouts with multiple side-by-side\n  widgets or summary cards.\n- **Wizards or multi-step flows:** Step-by-step creation flows need dedicated\n  wizard patterns, not a default page layout.\n\n### Choosing between main page and detail page patterns\n\nThe distinction between a main page and a detail page is determined by a single\nprop: `DefaultPage.BackLink`.\n\n| Signal | Main page pattern | Detail page pattern |\n|--------|------------------|---------------------|\n| `DefaultPage.BackLink` | Omit | Include with destination `href` |\n| Typical content | Lists, tables, overviews | Single resource: view, edit, or create |\n| Typical header | Title + Subtitle + Actions | BackLink + Title + Subtitle (+ optional Actions) |\n| Footer | Optional (form pages only) | Optional (editable pages only) |\n\nWhen in doubt: if the user navigated *into* this page from a list, it is a\ndetail page and should have a back link.\n\n### Back link labeling\n\nThe back link is the primary navigation element on detail pages. Its label\nshould clearly communicate where the user will go.\n\n> [!TIP]\\\n> **Do**\n>\n> - Label the back link with the destination: \"Back to products\", \"Back to\n>   orders\", \"Back to customers\".\n> - Keep the label short and scannable.\n> - Override the default `aria-label` with a destination-specific value when\n>   the destination context is important.\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Don't use generic labels like \"Back\" or \"Go back\" — they don't tell the\n>   user where they'll end up.\n> - Don't use the back link for unrelated navigation. It should always return\n>   to the parent list or overview.\n\n### Header content structure\n\nThe header organizes the page identity. Keep it focused on identification and\nprimary actions.\n\n> [!TIP]\\\n> **Do**\n>\n> - Use the title for the resource's primary name or identifier.\n> - Use the subtitle for a secondary identifier (SKU, email, ID, or brief\n>   description).\n> - Place 1–2 high-priority actions in `DefaultPage.Actions`.\n> - Use `gridColumn=\"1\"` for any custom element that should appear in the left\n>   column alongside the title.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">\n          Back to products\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Wireless Headphones</DefaultPage.Title>\n        <DefaultPage.Actions>\n          <Button size=\"sm\" variant=\"ghost\">Duplicate</Button>\n        </DefaultPage.Actions>\n        <DefaultPage.Subtitle>SKU-WH-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Page content goes here.</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Don't put descriptions, status badges, or metadata in the title or subtitle.\n>   These belong in the content area.\n> - Don't add more than 3 actions to the header. Use a menu for overflow\n>   actions.\n> - Don't put form submission buttons (Save, Cancel) in `Actions`. Those belong\n>   in `Footer`.\n\n### Footer usage\n\nFooter is intended for page-level form actions. Omit it entirely for read-only\npages — the grid row collapses automatically.\n\n> [!TIP]\\\n> **Do**\n>\n> - Place the primary action button on the right and secondary actions to its\n>   left.\n> - Use `variant=\"ghost\"` for secondary actions like Cancel to create visual\n>   hierarchy.\n> - Omit `DefaultPage.Footer` entirely when the page has no form actions.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/orders\">\n          Back to orders\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Edit Order</DefaultPage.Title>\n        <DefaultPage.Subtitle>Order #ORD-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box bg=\"neutral.3\" padding=\"400\" borderRadius=\"200\">\n          <Text>Form fields</Text>\n        </Box>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <Stack direction=\"row\" gap=\"200\" justify=\"flex-end\" width=\"100%\">\n          <Button variant=\"ghost\">Cancel</Button>\n          <Button variant=\"solid\" colorPalette=\"primary\">Save</Button>\n        </Stack>\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Don't include a `Footer` on read-only pages. An empty footer creates\n>   confusion about whether the page expects user input.\n> - Don't use `Footer` for navigation or informational content.\n\n",
+      "mdx": "\n## Guidelines\n\nDefaultPage guidelines help you choose the right layout configuration for both\ntop-level and detail views, ensuring consistent navigation patterns and content\nstructure across your application.\n\n### Best practices\n\n- **Start with the simplest composition:** Every page needs `Root`, `Header`\n  with `Title`, and `Content`. Only add `BackLink`, `Actions`, `Subtitle`,\n  `TabNav`, and `Footer` when the page requires them.\n- **Use BackLink to signal detail views:** Include `DefaultPage.BackLink` for\n  any page that is subordinate to a parent list or overview. Omit it entirely\n  for top-level main pages.\n- **Always label the back link with its destination:** The back link label\n  should name where the user will go, not just say \"Back\".\n- **Keep the header concise:** Use the title for the resource name and the\n  subtitle for a secondary identifier (SKU, email, order number). Don't overload\n  the header with content that belongs in the body.\n- **Use Actions sparingly:** Limit header actions to 2–3 high-priority\n  operations. Move secondary actions into a menu or into the content area.\n- **Place form actions in the footer:** Save, cancel, and submit buttons belong\n  in `DefaultPage.Footer`, not the header. The footer stays anchored at the\n  bottom, providing a consistent location for form actions.\n- **Omit the footer for read-only pages:** Pages that display data without\n  editing don't need a footer. Removing it gives the content area more vertical\n  space and avoids implying that user input is expected.\n- **Use TabNav for multi-section navigation:** When a page has distinct content\n  sections reachable via routing, compose `TabNav` inside `DefaultPage.Header`\n  rather than stacking all sections vertically.\n\n### Usage\n\nDefaultPage works for any full-page view in your application. The pattern you\nuse depends on whether the page is a top-level main view or a subordinate detail\nview, and whether it is read-only or editable.\n\n> [!TIP]\\\n> When to use\n\n- **Top-level read-only views:** Use DefaultPage without `BackLink` or `Footer`\n  when displaying a list, table, or overview that the user cannot edit directly\n  (e.g., product list, order overview).\n- **Top-level form views:** Use DefaultPage without `BackLink` but with\n  `Footer` for top-level pages that include a form with save/cancel actions\n  (e.g., project settings, global configuration).\n- **Detail read-only views:** Use DefaultPage with `BackLink` but without\n  `Footer` when displaying information for a single resource the user cannot\n  edit (e.g., order details, customer profile in read mode).\n- **Detail editable views:** Use DefaultPage with both `BackLink` and `Footer`\n  for pages focused on editing a single resource (e.g., editing a product,\n  updating an order).\n- **Tabbed views:** Use DefaultPage with `TabNav` inside the `Header` when a\n  page (main or detail) has multiple logical sections reachable by route.\n- **Resource creation pages:** Use DefaultPage with `Footer` for \"create new\"\n  flows where the user fills out a form and submits.\n\n> [!CAUTION]\\\n> When not to use\n\n- **Modals, dialogs, or drawers:** DefaultPage is designed for full-page views\n  only. Use the appropriate overlay components for secondary workflows.\n- **Nested inside another DefaultPage:** Each view should have a single\n  DefaultPage at its root. Nesting creates duplicate `<main>` landmarks, which\n  violates WCAG.\n- **Dashboards with widget grids:** DefaultPage's single-column scrollable\n  content area is not suited for dashboard layouts with multiple side-by-side\n  widgets or summary cards.\n- **Wizards or multi-step flows:** Step-by-step creation flows need dedicated\n  wizard patterns, not a default page layout.\n\n### Choosing between main page and detail page patterns\n\nThe distinction between a main page and a detail page is determined by a single\nprop: `DefaultPage.BackLink`.\n\n| Signal | Main page pattern | Detail page pattern |\n|--------|------------------|---------------------|\n| `DefaultPage.BackLink` | Omit | Include with destination `href` |\n| Typical content | Lists, tables, overviews | Single resource: view, edit, or create |\n| Typical header | Title + Subtitle + Actions | BackLink + Title + Subtitle (+ optional Actions) |\n| Footer | Optional (form pages only) | Optional (editable pages only) |\n\nWhen in doubt: if the user navigated *into* this page from a list, it is a\ndetail page and should have a back link.\n\n### Back link labeling\n\nThe back link is the primary navigation element on detail pages. Its label\nshould clearly communicate where the user will go.\n\n> [!TIP]\\\n> **Do**\n>\n> - Label the back link with the destination: \"Back to products\", \"Back to\n>   orders\", \"Back to customers\".\n> - Keep the label short and scannable.\n> - Override the default `aria-label` with a destination-specific value when\n>   the destination context is important.\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Don't use generic labels like \"Back\" or \"Go back\" — they don't tell the\n>   user where they'll end up.\n> - Don't use the back link for unrelated navigation. It should always return\n>   to the parent list or overview.\n\n### Header content structure\n\nThe header organizes the page identity. Keep it focused on identification and\nprimary actions.\n\n> [!TIP]\\\n> **Do**\n>\n> - Use the title for the resource's primary name or identifier.\n> - Use the subtitle for a secondary identifier (SKU, email, ID, or brief\n>   description).\n> - Place 1–2 high-priority actions in `DefaultPage.Actions`.\n> - Use `gridColumn=\"1\"` for any custom element that should appear in the left\n>   column alongside the title.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/products\">\n          Back to products\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Wireless Headphones</DefaultPage.Title>\n        <DefaultPage.Actions>\n          <Button size=\"sm\" variant=\"ghost\">Duplicate</Button>\n        </DefaultPage.Actions>\n        <DefaultPage.Subtitle>SKU-WH-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Text>Page content goes here.</Text>\n      </DefaultPage.Content>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Don't put descriptions, status badges, or metadata in the title or subtitle.\n>   These belong in the content area.\n> - Don't add more than 3 actions to the header. Use a menu for overflow\n>   actions.\n> - Don't put form submission buttons (Save, Cancel) in `Actions`. Those belong\n>   in `Footer`.\n\n### Footer usage\n\nFooter is intended for page-level form actions. Omit it entirely for read-only\npages — the grid row collapses automatically.\n\n> [!TIP]\\\n> **Do**\n>\n> - Place the primary action button on the right and secondary actions to its\n>   left.\n> - Use `variant=\"ghost\"` for secondary actions like Cancel to create visual\n>   hierarchy.\n> - Omit `DefaultPage.Footer` entirely when the page has no form actions.\n\n```jsx live\nconst App = () => (\n  <Box border=\"solid-25\" borderColor=\"neutral.6\" borderRadius=\"200\">\n    <DefaultPage.Root>\n      <DefaultPage.Header>\n        <DefaultPage.BackLink href=\"/orders\">\n          Back to orders\n        </DefaultPage.BackLink>\n        <DefaultPage.Title>Edit Order</DefaultPage.Title>\n        <DefaultPage.Subtitle>Order #ORD-2024-001</DefaultPage.Subtitle>\n      </DefaultPage.Header>\n      <DefaultPage.Content>\n        <Box bg=\"neutral.3\" padding=\"400\" borderRadius=\"200\">\n          <Text>Form fields</Text>\n        </Box>\n      </DefaultPage.Content>\n      <DefaultPage.Footer>\n        <FormActionBar onSave={() => {}} onCancel={() => {}} />\n      </DefaultPage.Footer>\n    </DefaultPage.Root>\n  </Box>\n)\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Don't include a `Footer` on read-only pages. An empty footer creates\n>   confusion about whether the page expects user input.\n> - Don't use `Footer` for navigation or informational content.\n\n",
       "toc": [
         {
           "value": "Guidelines",