@patternfly/react-docs 7.6.0-prerelease.8 → 7.6.0-prerelease.9

package/patternfly-docs/generated/components/page/react.js

@@ -1,1352 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { useState, useLayoutEffect, useRef } from 'react';
-import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-menu-bars-icon';
-import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
-const pageData = {
-  "id": "Page",
-  "section": "components",
-  "subsection": "",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react",
-  "tabName": null,
-  "slug": "/components/page/react",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Page/examples/Page.md",
-  "relPath": "packages/react-core/src/components/Page/examples/Page.md",
-  "propComponents": [
-    {
-      "name": "Page",
-      "description": "",
-      "props": [
-        {
-          "name": "additionalGroupedContent",
-          "type": "React.ReactNode",
-          "description": "Additional content of the group"
-        },
-        {
-          "name": "banner",
-          "type": "React.ReactNode",
-          "description": "Banner component for the page. This will be rendered above a breadcrumb if one is also passed."
-        },
-        {
-          "name": "breadcrumb",
-          "type": "React.ReactNode",
-          "description": "Breadcrumb component for the page"
-        },
-        {
-          "name": "breadcrumbProps",
-          "type": "PageBreadcrumbProps",
-          "description": "Additional props of the breadcrumb"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the main section of the page layout (e.g. <PageSection />)"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the page layout"
-        },
-        {
-          "name": "defaultManagedSidebarIsOpen",
-          "type": "boolean",
-          "description": "If true, the managed sidebar is initially open for desktop view",
-          "defaultValue": "true"
-        },
-        {
-          "name": "dockContent",
-          "type": "React.ReactNode",
-          "description": "Content to render in the vertical dock when variant of docked is used. At mobile viewports, this content will be replaced with the content passed to masthead.",
-          "beta": true
-        },
-        {
-          "name": "drawerDefaultSize",
-          "type": "string",
-          "description": "Sets default drawer size"
-        },
-        {
-          "name": "drawerMaxSize",
-          "type": "string",
-          "description": "Sets the maximum drawer size"
-        },
-        {
-          "name": "drawerMinSize",
-          "type": "string",
-          "description": "Sets the minimum drawer size"
-        },
-        {
-          "name": "getBreakpoint",
-          "type": "(width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'",
-          "description": "The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class\nYou can override the default getBreakpoint function to return breakpoints at different sizes than the default\nYou can view the default getBreakpoint function here:\nhttps://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts",
-          "defaultValue": "(width: number): 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' => {\n  if (width === null) {\n    return null;\n  }\n  if (width >= globalWidthBreakpoints['2xl']) {\n    return '2xl';\n  }\n  if (width >= globalWidthBreakpoints.xl) {\n    return 'xl';\n  }\n  if (width >= globalWidthBreakpoints.lg) {\n    return 'lg';\n  }\n  if (width >= globalWidthBreakpoints.md) {\n    return 'md';\n  }\n  if (width >= globalWidthBreakpoints.sm) {\n    return 'sm';\n  }\n  return 'default';\n}"
-        },
-        {
-          "name": "getVerticalBreakpoint",
-          "type": "(height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'",
-          "description": "The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class\nYou can override the default getVerticalBreakpoint function to return breakpoints at different sizes than the default\nYou can view the default getVerticalBreakpoint function here:\nhttps://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts",
-          "defaultValue": "(height: number): 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' => {\n  if (height === null) {\n    return null;\n  }\n  if (height >= globalHeightBreakpoints['2xl']) {\n    return '2xl';\n  }\n  if (height >= globalHeightBreakpoints.xl) {\n    return 'xl';\n  }\n  if (height >= globalHeightBreakpoints.lg) {\n    return 'lg';\n  }\n  if (height >= globalHeightBreakpoints.md) {\n    return 'md';\n  }\n  if (height >= globalHeightBreakpoints.sm) {\n    return 'sm';\n  }\n  return 'default';\n}"
-        },
-        {
-          "name": "groupProps",
-          "type": "PageGroupProps",
-          "description": "Additional props of the group"
-        },
-        {
-          "name": "horizontalSubnav",
-          "type": "React.ReactNode",
-          "description": "Horizontal sub navigation component for the page"
-        },
-        {
-          "name": "isBreadcrumbGrouped",
-          "type": "boolean",
-          "description": "Flag indicating if the breadcrumb should be in a group"
-        },
-        {
-          "name": "isBreadcrumbWidthLimited",
-          "type": "boolean",
-          "description": "Flag indicating if breadcrumb width should be limited",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isContentFilled",
-          "type": "boolean",
-          "description": "Enables children to fill the available vertical space. Child page sections or groups that should fill should be passed the isFilled property."
-        },
-        {
-          "name": "isDockExpanded",
-          "type": "boolean",
-          "description": "Flag indicating the docked nav is expanded on mobile. Only applies when variant is docked.",
-          "beta": true
-        },
-        {
-          "name": "isDockTextExpanded",
-          "type": "boolean",
-          "description": "Flag indicating the docked nav should display text on desktop. Only applies when variant is docked, and\nwill handle toggling the visibility of the text in individual isDocked components.",
-          "beta": true
-        },
-        {
-          "name": "isHorizontalSubnavGrouped",
-          "type": "boolean",
-          "description": "Flag indicating if the horizontal sub navigation should be in a group"
-        },
-        {
-          "name": "isHorizontalSubnavWidthLimited",
-          "type": "boolean",
-          "description": "Flag indicating if horizontal sub navigation width should be limited"
-        },
-        {
-          "name": "isManagedSidebar",
-          "type": "boolean",
-          "description": "If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into\nthe sidebar component or add a callback onSidebarToggle function into the Masthead component",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isNotificationDrawerExpanded",
-          "type": "boolean",
-          "description": "Flag indicating Notification drawer in expanded",
-          "defaultValue": "false"
-        },
-        {
-          "name": "mainAriaLabel",
-          "type": "string",
-          "description": "Accessible label, can be used to name main section"
-        },
-        {
-          "name": "mainComponent",
-          "type": "'main' | 'div'",
-          "description": "HTML component used as main component of the page. Defaults to 'main', only pass in 'div' if another 'main' element already exists.",
-          "defaultValue": "'main'"
-        },
-        {
-          "name": "mainContainerId",
-          "type": "string",
-          "description": "an id to use for the [role=\"main\"] element"
-        },
-        {
-          "name": "mainTabIndex",
-          "type": "number | null",
-          "description": "tabIndex to use for the [role=\"main\"] element, null to unset it",
-          "defaultValue": "-1"
-        },
-        {
-          "name": "masthead",
-          "type": "React.ReactNode",
-          "description": "The horizontal masthead content (e.g. <Masthead />). When using the docked variant, this content will only render at mobile viewports."
-        },
-        {
-          "name": "notificationDrawer",
-          "type": "React.ReactNode",
-          "description": "Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />)"
-        },
-        {
-          "name": "onNotificationDrawerExpand",
-          "type": "(event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void",
-          "description": "Callback when notification drawer panel is finished expanding.",
-          "defaultValue": "() => null"
-        },
-        {
-          "name": "onPageResize",
-          "type": "((event: MouseEvent | TouchEvent | React.KeyboardEvent, object: any) => void) | null",
-          "description": "Can add callback to be notified when resize occurs, for example to set the sidebar isSidebarOpen prop to false for a width < 768px\nReturns object { mobileView: boolean, windowSize: number }"
-        },
-        {
-          "name": "role",
-          "type": "string",
-          "description": "Sets the value for role on the <main> element"
-        },
-        {
-          "name": "sidebar",
-          "type": "React.ReactNode",
-          "description": "Sidebar component for a side nav, recommended to be a PageSidebar. If set to null, the page grid layout\nwill render without a sidebar."
-        },
-        {
-          "name": "skipToContent",
-          "type": "React.ReactElement<any>",
-          "description": "Skip to content component for the page"
-        },
-        {
-          "name": "variant",
-          "type": "'default' | 'docked'",
-          "description": "Indicates the layout variant",
-          "beta": true
-        }
-      ]
-    },
-    {
-      "name": "PageSidebar",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the page sidebar (e.g. <PageSidebarBody />"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the page sidebar",
-          "defaultValue": "''"
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "description": "Sidebar id",
-          "defaultValue": "'page-sidebar'"
-        },
-        {
-          "name": "isManagedSidebar",
-          "type": "boolean",
-          "description": "If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into\nthe sidebar component or add a callback onSidebarToggle function into the Masthead component"
-        },
-        {
-          "name": "isSidebarOpen",
-          "type": "boolean",
-          "description": "Programmatically manage if the sidebar is shown, if isManagedSidebar is set to true in the Page component, this prop is managed",
-          "defaultValue": "true"
-        }
-      ]
-    },
-    {
-      "name": "PageSidebarBody",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the page sidebar body"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the page sidebar body"
-        },
-        {
-          "name": "isContextSelector",
-          "type": "boolean",
-          "description": "Flag indicating that the page sidebar body is for a context selector/perspective switcher"
-        },
-        {
-          "name": "isFilled",
-          "type": "boolean",
-          "description": "Flag indicating that the page sidebar body should fill the available vertical space."
-        },
-        {
-          "name": "usePageInsets",
-          "type": "boolean",
-          "description": "Flag indicating that the page sidebar body should use page insets."
-        }
-      ]
-    },
-    {
-      "name": "PageSection",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Adds an accessible name to the page section. Required when the hasOverflowScroll prop is set to true.\nThis prop should also be passed in if a heading is not being used to describe the content of the page section."
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the section"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the section",
-          "defaultValue": "''"
-        },
-        {
-          "name": "component",
-          "type": "React.JSX.IntrinsicElements",
-          "description": "Sets the base component to render. Defaults to section",
-          "defaultValue": "'section'"
-        },
-        {
-          "name": "hasBodyWrapper",
-          "type": "boolean",
-          "description": "Flag indicating whether children passed to the component should be wrapped by a PageBody.\nSet this to false in order to pass multiple, custom PageBody's as children.",
-          "defaultValue": "true",
-          "beta": true
-        },
-        {
-          "name": "hasOverflowScroll",
-          "type": "boolean",
-          "description": "Flag indicating if the PageSection has a scrolling overflow",
-          "defaultValue": "false"
-        },
-        {
-          "name": "hasShadowBottom",
-          "type": "boolean",
-          "description": "Modifier indicating if PageSection should have a shadow at the bottom",
-          "defaultValue": "false"
-        },
-        {
-          "name": "hasShadowTop",
-          "type": "boolean",
-          "description": "Modifier indicating if PageSection should have a shadow at the top",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isCenterAligned",
-          "type": "boolean",
-          "description": "Flag indicating if the section content is center aligned. isWidthLimited must be set for this to work",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isFilled",
-          "type": "boolean",
-          "description": "Enables the page section to fill the available vertical space if true, or disable filling if false."
-        },
-        {
-          "name": "isNoPlainOnGlass",
-          "type": "boolean",
-          "description": "Prevents the page section from automatically applying plain styling when glass theme is enabled.",
-          "defaultValue": "false",
-          "beta": true
-        },
-        {
-          "name": "isPlain",
-          "type": "boolean",
-          "description": "Adds plain styling to the page section.",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isStickyStuck",
-          "type": "boolean",
-          "description": "Flag indicating if the section has stuck styling, applied when the section is not at the edge of the scroll parent container.",
-          "defaultValue": "false",
-          "beta": true
-        },
-        {
-          "name": "isWidthLimited",
-          "type": "boolean",
-          "description": "Limits the width of the section",
-          "defaultValue": "false"
-        },
-        {
-          "name": "padding",
-          "type": "{\n  default?: 'padding' | 'noPadding';\n  sm?: 'padding' | 'noPadding';\n  md?: 'padding' | 'noPadding';\n  lg?: 'padding' | 'noPadding';\n  xl?: 'padding' | 'noPadding';\n  '2xl'?: 'padding' | 'noPadding';\n}",
-          "description": "Padding at various breakpoints."
-        },
-        {
-          "name": "stickyBase",
-          "type": "'top' | 'bottom'",
-          "description": "Applies the base sticky positioning to the top or bottom of the scroll parent container.",
-          "beta": true
-        },
-        {
-          "name": "stickyOnBreakpoint",
-          "type": "{\n  default?: 'top' | 'bottom';\n  sm?: 'top' | 'bottom';\n  md?: 'top' | 'bottom';\n  lg?: 'top' | 'bottom';\n  xl?: 'top' | 'bottom';\n  '2xl'?: 'top' | 'bottom';\n}",
-          "description": "Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints"
-        },
-        {
-          "name": "type",
-          "type": "'default' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard'",
-          "description": "Section type variant",
-          "defaultValue": "'default'"
-        },
-        {
-          "name": "variant",
-          "type": "'default' | 'secondary'",
-          "description": "Section background color variant. This will only apply when the type prop has the \"default\" value.",
-          "defaultValue": "'default'"
-        }
-      ]
-    },
-    {
-      "name": "PageGroup",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Adds an accessible name to the page group when the hasOverflowScroll prop is set to true."
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside of the PageGroup"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes to apply to the PageGroup",
-          "defaultValue": "''"
-        },
-        {
-          "name": "hasOverflowScroll",
-          "type": "boolean",
-          "description": "Flag indicating if the PageGroup has a scrolling overflow",
-          "defaultValue": "false"
-        },
-        {
-          "name": "hasShadowBottom",
-          "type": "boolean",
-          "description": "Modifier indicating if PageGroup should have a shadow at the bottom",
-          "defaultValue": "false"
-        },
-        {
-          "name": "hasShadowTop",
-          "type": "boolean",
-          "description": "Modifier indicating if PageGroup should have a shadow at the top",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isFilled",
-          "type": "boolean",
-          "description": "Enables the page group to fill the available vertical space if true, or disable filling if false."
-        },
-        {
-          "name": "isNoPlainOnGlass",
-          "type": "boolean",
-          "description": "Prevents the page group from automatically applying plain styling when glass theme is enabled.",
-          "defaultValue": "false",
-          "beta": true
-        },
-        {
-          "name": "isPlain",
-          "type": "boolean",
-          "description": "Adds plain styling to the page group.",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isStickyStuck",
-          "type": "boolean",
-          "description": "Flag indicating if the group has stuck styling, applied when the group is not at the edge of the scroll parent container.",
-          "defaultValue": "false",
-          "beta": true
-        },
-        {
-          "name": "stickyBase",
-          "type": "'top' | 'bottom'",
-          "description": "Applies the base sticky positioning to the top or bottom of the scroll parent container.",
-          "beta": true
-        },
-        {
-          "name": "stickyOnBreakpoint",
-          "type": "{\n  default?: 'top' | 'bottom';\n  sm?: 'top' | 'bottom';\n  md?: 'top' | 'bottom';\n  lg?: 'top' | 'bottom';\n  xl?: 'top' | 'bottom';\n  '2xl'?: 'top' | 'bottom';\n}",
-          "description": "Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints"
-        }
-      ]
-    },
-    {
-      "name": "PageBreadcrumb",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Adds an accessible name to the breadcrumb section. Required when the hasOverflowScroll prop is set to true."
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside of the PageBreadcrumb"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes to apply to the PageBreadcrumb",
-          "defaultValue": "''"
-        },
-        {
-          "name": "hasBodyWrapper",
-          "type": "boolean",
-          "description": "Flag indicating whether children passed to the component should be wrapped by a PageBody.\nSet this to false in order to pass multiple, custom PageBody's as children.",
-          "defaultValue": "true",
-          "beta": true
-        },
-        {
-          "name": "hasOverflowScroll",
-          "type": "boolean",
-          "description": "Flag indicating if the PageBreadcrumb has a scrolling overflow",
-          "defaultValue": "false"
-        },
-        {
-          "name": "hasShadowBottom",
-          "type": "boolean",
-          "description": "Flag indicating if PageBreadcrumb should have a shadow at the bottom",
-          "defaultValue": "false"
-        },
-        {
-          "name": "hasShadowTop",
-          "type": "boolean",
-          "description": "Flag indicating if PageBreadcrumb should have a shadow at the top",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isWidthLimited",
-          "type": "boolean",
-          "description": "Limits the width of the breadcrumb"
-        },
-        {
-          "name": "stickyOnBreakpoint",
-          "type": "{\n  default?: 'top' | 'bottom';\n  sm?: 'top' | 'bottom';\n  md?: 'top' | 'bottom';\n  lg?: 'top' | 'bottom';\n  xl?: 'top' | 'bottom';\n  '2xl'?: 'top' | 'bottom';\n}",
-          "description": "Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints"
-        }
-      ]
-    },
-    {
-      "name": "PageToggleButton",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Adds accessible text to the button.",
-          "defaultValue": "'Side navigation toggle'"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the button"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the button"
-        },
-        {
-          "name": "component",
-          "type": "React.ElementType<any> | React.ComponentType<any>",
-          "description": "Sets the base component to render. defaults to button"
-        },
-        {
-          "name": "countOptions",
-          "type": "BadgeCountObject",
-          "description": "Adds count number to button"
-        },
-        {
-          "name": "hamburgerVariant",
-          "type": "'expand' | 'collapse'",
-          "description": "Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button."
-        },
-        {
-          "name": "hasNoPadding",
-          "type": "boolean",
-          "description": "Applies no padding on a plain button variant. Use when plain button is placed inline with text"
-        },
-        {
-          "name": "icon",
-          "type": "React.ReactNode | null",
-          "description": "Icon for the button."
-        },
-        {
-          "name": "iconPosition",
-          "type": "'start' | 'end' | 'left' | 'right'",
-          "description": "Sets position of the icon. Note: \"left\" and \"right\" are deprecated. Use \"start\" and \"end\" instead"
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "description": "Button id",
-          "defaultValue": "'nav-toggle'"
-        },
-        {
-          "name": "inoperableEvents",
-          "type": "string[]",
-          "description": "Events to prevent when the button is in an aria-disabled state"
-        },
-        {
-          "name": "isAriaDisabled",
-          "type": "boolean",
-          "description": "Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute"
-        },
-        {
-          "name": "isBlock",
-          "type": "boolean",
-          "description": "Adds block styling to button"
-        },
-        {
-          "name": "isCircle",
-          "type": "boolean",
-          "description": "Flag indicating the button is a circle button. Intended for buttons that only contain an icon..",
-          "beta": true
-        },
-        {
-          "name": "isClicked",
-          "type": "boolean",
-          "description": "Adds clicked styling to button."
-        },
-        {
-          "name": "isDanger",
-          "type": "boolean",
-          "description": "Adds danger styling to secondary or link button variants"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean",
-          "description": "Adds disabled styling and disables the button using the disabled html attribute"
-        },
-        {
-          "name": "isDocked",
-          "type": "boolean",
-          "description": "Flag indicating the button is a docked variant button. For use in docked navigation.",
-          "beta": true
-        },
-        {
-          "name": "isExpanded",
-          "type": "boolean",
-          "description": "Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true."
-        },
-        {
-          "name": "isFavorite",
-          "type": "boolean",
-          "description": "Adds favorite styling to a button"
-        },
-        {
-          "name": "isFavorited",
-          "type": "boolean",
-          "description": "Flag indicating whether the button is favorited or not, only when isFavorite is true."
-        },
-        {
-          "name": "isHamburger",
-          "type": "boolean",
-          "description": "Flag indicating the button is a hamburger button. This will override the icon property."
-        },
-        {
-          "name": "isHamburgerButton",
-          "type": "boolean",
-          "description": "Flag indicating whether the hamburger button variation with animations should be used."
-        },
-        {
-          "name": "isInline",
-          "type": "boolean",
-          "description": "Adds inline styling to a link button"
-        },
-        {
-          "name": "isLoading",
-          "type": "boolean",
-          "description": "Adds progress styling to button"
-        },
-        {
-          "name": "isSettings",
-          "type": "boolean",
-          "description": "Flag indicating the button is a settings button. This will override the icon property."
-        },
-        {
-          "name": "isSidebarOpen",
-          "type": "boolean",
-          "description": "True if the sidebar is shown",
-          "defaultValue": "true"
-        },
-        {
-          "name": "isTextExpanded",
-          "type": "boolean",
-          "description": "Flag indicating the docked button should display text. Only applies when isDocked is true.",
-          "beta": true
-        },
-        {
-          "name": "onSidebarToggle",
-          "type": "() => void",
-          "description": "Callback function to handle the sidebar toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true",
-          "defaultValue": "() => undefined as any"
-        },
-        {
-          "name": "ouiaId",
-          "type": "number | string",
-          "description": "Value to overwrite the randomly generated data-ouia-component-id."
-        },
-        {
-          "name": "ouiaSafe",
-          "type": "boolean",
-          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
-        },
-        {
-          "name": "size",
-          "type": "'default' | 'sm' | 'lg'",
-          "description": "Adds styling which affects the size of the button"
-        },
-        {
-          "name": "spinnerAriaLabel",
-          "type": "string",
-          "description": "Accessible label for the spinner to describe what is loading"
-        },
-        {
-          "name": "spinnerAriaLabelledBy",
-          "type": "string",
-          "description": "Id of element which describes what is being loaded"
-        },
-        {
-          "name": "spinnerAriaValueText",
-          "type": "string",
-          "description": "Text describing that current loading status or progress"
-        },
-        {
-          "name": "state",
-          "type": "'read' | 'unread' | 'attention'",
-          "description": "Sets state of the stateful button variant. Default is \"unread\""
-        },
-        {
-          "name": "tabIndex",
-          "type": "number",
-          "description": "Sets the button tabindex."
-        },
-        {
-          "name": "type",
-          "type": "'button' | 'submit' | 'reset'",
-          "description": "Sets button type"
-        },
-        {
-          "name": "variant",
-          "type": "'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control' | 'stateful'",
-          "description": "Adds button variant styles"
-        }
-      ]
-    }
-  ],
-  "cssPrefix": [
-    "pf-v6-c-page"
-  ],
-  "examples": [
-    "Vertical navigation",
-    "Multiple sidebar body",
-    "Horizontal navigation",
-    "Uncontrolled navigation",
-    "Filled page sections",
-    "Main section padding",
-    "Main section variations",
-    "Group section",
-    "Centered section",
-    "Plain sections and groups",
-    "Dynamic sticky section"
-  ]
-};
-pageData.liveContext = {
-  useState,
-  useLayoutEffect,
-  useRef,
-  RhUiMenuBarsIcon,
-  pageSectionWidthLimitMaxWidth
-};
-pageData.examples = {
-  'Vertical navigation': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  PageSidebar,\n  PageSidebarBody,\n  PageSection,\n  PageToggleButton,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\n\nexport const PageVerticalNav: React.FunctionComponent = () => {\n  const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n  const onSidebarToggle = () => {\n    setIsSidebarOpen(!isSidebarOpen);\n  };\n\n  const headerToolbar = (\n    <Toolbar id=\"vertical-toolbar\">\n      <ToolbarContent>\n        <ToolbarItem>header-tools</ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton\n            isHamburgerButton\n            aria-label=\"Global navigation\"\n            isSidebarOpen={isSidebarOpen}\n            onSidebarToggle={onSidebarToggle}\n            id=\"vertical-nav-toggle\"\n          />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n            Logo\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  const sidebar = (\n    <PageSidebar isSidebarOpen={isSidebarOpen} id=\"vertical-sidebar\">\n      <PageSidebarBody>Navigation</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  return (\n    <Page masthead={masthead} sidebar={sidebar}>\n      <PageSection aria-labelledby=\"section-1\">\n        <h2 id=\"section-1\">Vertical nav example section 1</h2>\n      </PageSection>\n      <PageSection variant=\"secondary\" aria-labelledby=\"section-2\">\n        <h2 id=\"section-2\">Vertical nav example section 2 with secondary variant styling</h2>\n      </PageSection>\n      <PageSection aria-labelledby=\"section-3\">\n        <h2 id=\"section-3\">Vertical nav example section 3</h2>\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Vertical navigation","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To add a vertical sidebar to a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Page>`}
-        </code>
-        {`, pass a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageSidebar>`}
-        </code>
-        {` component into the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`sidebar`}
-        </code>
-        {` property. To render navigation in the sidebar, pass a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageSidebarBody>`}
-        </code>
-        {` component to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageSidebar>`}
-        </code>
-        {`.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`The `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isSidebarOpen`}
-        </code>
-        {` property helps facilitate the opening and closing of the sidebar and should be 'true' when the sidebar is visible.`}
-      </p>
-    </Example>,
-  'Multiple sidebar body': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  PageSidebar,\n  PageSidebarBody,\n  PageSection,\n  PageToggleButton,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\n\nexport const PageMultipleSidebarBody: React.FunctionComponent = () => {\n  const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n  const onSidebarToggle = () => {\n    setIsSidebarOpen(!isSidebarOpen);\n  };\n\n  const headerToolbar = (\n    <Toolbar id=\"multiple-sidebar-body-toolbar\">\n      <ToolbarContent>\n        <ToolbarItem>header-tools</ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton\n            aria-label=\"Global navigation\"\n            isSidebarOpen={isSidebarOpen}\n            onSidebarToggle={onSidebarToggle}\n            id=\"multiple-sidebar-body-nav-toggle\"\n            isHamburgerButton\n          />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n            Logo\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  const sidebar = (\n    <PageSidebar isSidebarOpen={isSidebarOpen} id=\"multiple-sidebar-body-sidebar\">\n      <PageSidebarBody isContextSelector>\n        First sidebar body (for a context selector/perspective switcher)\n      </PageSidebarBody>\n      <PageSidebarBody usePageInsets>Second sidebar body (with insets)</PageSidebarBody>\n      <PageSidebarBody isFilled={true}>Third sidebar body (with fill)</PageSidebarBody>\n      <PageSidebarBody isFilled={false} usePageInsets>\n        Fourth sidebar body (with insets and no fill)\n      </PageSidebarBody>\n    </PageSidebar>\n  );\n\n  return (\n    <Page masthead={masthead} sidebar={sidebar}>\n      <PageSection aria-labelledby=\"section-1\">\n        <h2 id=\"section-1\">Multiple sidebar body example section 1</h2>\n      </PageSection>\n      <PageSection aria-labelledby=\"section-2\">\n        <h2 id=\"section-2\">Multiple sidebar body example section 2</h2>\n      </PageSection>\n      <PageSection aria-labelledby=\"section-3\">\n        <h2 id=\"section-3\">Multiple sidebar body example section 3</h2>\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Multiple sidebar body","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`You can have multiple `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageSidebarBody>`}
-        </code>
-        {` components inside the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageSidebar>`}
-        </code>
-        {` for more customization. You can modify the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageSidebarBody>`}
-        </code>
-        {` further by passing the following properties:`}
-      </p>
-      
-      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          
-          <code {...{"className":"ws-code "}}>
-            {`usePageInsets`}
-          </code>
-          {` will modify the component's insets to match page insets`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          
-          <code {...{"className":"ws-code "}}>
-            {`isFilled={true}`}
-          </code>
-          {` will cause the component to grow to fill the available vertical space`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          
-          <code {...{"className":"ws-code "}}>
-            {`isFilled={false}`}
-          </code>
-          {` will cause the component to `}
-          
-          <strong {...{"className":""}}>
-            {`not`}
-          </strong>
-          {` grow to fill the available vertical space`}
-        </li>
-        
-
-      </ul>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`By default, the last `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageSidebarBody>`}
-        </code>
-        {` will grow to fill the available vertical space. This can be changed by passing `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isFilled={false}`}
-        </code>
-        {` as demonstrated in the following example.`}
-      </p>
-    </Example>,
-  'Horizontal navigation': props => 
-    <Example {...pageData} {...props} {...{"code":"import {\n  Page,\n  Masthead,\n  MastheadMain,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  PageSection,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\n\nexport const PageHorizontalNav: React.FunctionComponent = () => {\n  const headerToolbar = (\n    <Toolbar id=\"horizontal-toolbar\">\n      <ToolbarContent>\n        <ToolbarItem>Navigation</ToolbarItem>\n        <ToolbarItem>header-tools</ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead inset={{ default: 'insetXs' }}>\n      <MastheadMain>\n        <MastheadBrand>\n          <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n            Logo\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  return (\n    <Page masthead={masthead}>\n      <PageSection aria-labelledby=\"section-1\">\n        <h2 id=\"section-1\">Horizontal nav example section 1</h2>\n      </PageSection>\n      <PageSection variant=\"secondary\" aria-labelledby=\"section-2\">\n        <h2 id=\"section-2\">Horizontal nav example section 2 with secondary variant styling</h2>\n      </PageSection>\n      <PageSection aria-labelledby=\"section-3\">\n        <h2 id=\"section-3\">Horizontal nav example section 3</h2>\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Horizontal navigation","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To add horizontal navigation to the top of a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Page>`}
-        </code>
-        {`, add the navigation inside of a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<ToolbarItem>`}
-        </code>
-        {` in the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Toolbar>`}
-        </code>
-        {` that is passed to the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<MastheadContent>`}
-        </code>
-        {` of the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Masthead>`}
-        </code>
-        {`.`}
-      </p>
-    </Example>,
-  'Uncontrolled navigation': props => 
-    <Example {...pageData} {...props} {...{"code":"import {\n  Page,\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  PageSidebar,\n  PageSidebarBody,\n  PageSection,\n  PageToggleButton,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\n\nexport const PageUncontrolledNav: React.FunctionComponent = () => {\n  const headerToolbar = (\n    <Toolbar id=\"uncontrolled-toolbar\">\n      <ToolbarContent>\n        <ToolbarItem>header-tools</ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton isHamburgerButton aria-label=\"Global navigation\" id=\"uncontrolled-nav-toggle\" />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n            Logo\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  const sidebar = (\n    <PageSidebar id=\"uncontrolled-sidebar\">\n      <PageSidebarBody>Navigation</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  return (\n    <Page isManagedSidebar masthead={masthead} sidebar={sidebar}>\n      <PageSection aria-labelledby=\"section-1\">\n        <h2 id=\"section-1\">Uncontrolled nav example section 1</h2>\n      </PageSection>\n      <PageSection aria-labelledby=\"section-2\">\n        <h2 id=\"section-2\">Uncontrolled nav example section 2</h2>\n      </PageSection>\n      <PageSection aria-labelledby=\"section-3\">\n        <h2 id=\"section-3\">Uncontrolled nav example section 3</h2>\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Uncontrolled navigation","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`When the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isManagedSidebar`}
-        </code>
-        {` property is true, it manages the sidebar open/close state, removing the need to pass both `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isSidebarOpen`}
-        </code>
-        {` into the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageSidebar>`}
-        </code>
-        {` and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`onSidebarToggle`}
-        </code>
-        {` into the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageToggleButton>`}
-        </code>
-        {`.`}
-      </p>
-    </Example>,
-  'Filled page sections': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  PageSidebar,\n  PageSidebarBody,\n  PageSection,\n  PageToggleButton,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\n\nexport const PageWithOrWithoutFill: React.FunctionComponent = () => {\n  const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n  const onSidebarToggle = () => {\n    setIsSidebarOpen(!isSidebarOpen);\n  };\n\n  const headerToolbar = (\n    <Toolbar id=\"fill-toolbar\">\n      <ToolbarContent>\n        <ToolbarItem>header-tools</ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton\n            isHamburgerButton\n            aria-label=\"Global navigation\"\n            isSidebarOpen={isSidebarOpen}\n            onSidebarToggle={onSidebarToggle}\n            id=\"fill-nav-toggle\"\n          />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n            Logo\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  const sidebar = (\n    <PageSidebar isSidebarOpen={isSidebarOpen} id=\"fill-sidebar\">\n      <PageSidebarBody>Navigation</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  return (\n    <Page isContentFilled masthead={masthead} sidebar={sidebar}>\n      <PageSection aria-labelledby=\"section-1\">\n        <h2 id=\"section-1\">Section without fill</h2>\n      </PageSection>\n      <PageSection isFilled={true} variant=\"secondary\" aria-labelledby=\"section-2\">\n        <h2 id=\"section-2\">Section with fill</h2>\n      </PageSection>\n      <PageSection aria-labelledby=\"section-3\">\n        <h2 id=\"section-3\">Another section without fill</h2>\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Filled page sections","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`By default, page sections will not expand to fill in the available vertical space in a page.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To change this default behavior, pass `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isContentFilled`}
-        </code>
-        {` to the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Page>`}
-        </code>
-        {` component and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isFilled={true}`}
-        </code>
-        {` to any child `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageSection>`}
-        </code>
-        {` or `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageGroup>`}
-        </code>
-        {` component that you want to fill the space. If multiple components are set to fill, then the available space will be split equally between them.`}
-      </p>
-    </Example>,
-  'Main section padding': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  PageSidebar,\n  PageSidebarBody,\n  PageSection,\n  PageToggleButton,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\n\nexport const PageMainSectionPadding: React.FunctionComponent = () => {\n  const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n  const onSidebarToggle = () => {\n    setIsSidebarOpen(!isSidebarOpen);\n  };\n\n  const headerToolbar = (\n    <Toolbar id=\"main-padding-toolbar\">\n      <ToolbarContent>\n        <ToolbarItem>header-tools</ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton\n            aria-label=\"Global navigation\"\n            isSidebarOpen={isSidebarOpen}\n            onSidebarToggle={onSidebarToggle}\n            id=\"main-padding-nav-toggle\"\n            isHamburgerButton\n          />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n            Logo\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  const sidebar = (\n    <PageSidebar isSidebarOpen={isSidebarOpen} id=\"main-padding-sidebar\">\n      <PageSidebarBody>Navigation</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  return (\n    <Page masthead={masthead} sidebar={sidebar}>\n      <PageSection aria-labelledby=\"section-1\">\n        <h2 id=\"section-1\">Section with default padding</h2>\n      </PageSection>\n      <PageSection padding={{ default: 'noPadding' }} aria-labelledby=\"section-2\">\n        <h2 id=\"section-2\">Section with no padding</h2>\n      </PageSection>\n      <PageSection padding={{ default: 'noPadding', md: 'padding' }} aria-labelledby=\"section-3\">\n        <h2 id=\"section-3\">Section with padding on medium</h2>\n      </PageSection>\n      <PageSection padding={{ md: 'noPadding' }} aria-labelledby=\"section-4\">\n        <h2 id=\"section-4\">Section with no padding on medium</h2>\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Main section padding","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To adjust the padding of a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageSection>`}
-        </code>
-        {`, you can pass in different values to the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`padding`}
-        </code>
-        {` property. These values should be aligned to a specific breakpoint: 'default', 'sm', 'md', 'lg', 'xl', and '2xl'. Each breakpoint passed into the property should be given a value of either ‘padding’ or ‘noPadding’.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`As the page's viewport width increases, breakpoints inherit the padding behavior of the previous breakpoint. For example, padding that is set on 'lg' also applies to 'xl' and '2xl'.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To remove padding entirely, pass 'noPadding' to the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`default`}
-        </code>
-        {` breakpoint. For example, the second section in this example passes in `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`padding={{ default: 'noPadding' }}`}
-        </code>
-        {`. Since no specific breakpoints are mentioned, every breakpoint will have 'noPadding'.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To add padding at specific breakpoints, pass in "padding" at those breakpoints. For example, the third section in this example passes in `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`padding={{ default: 'noPadding', md: 'padding' }}`}
-        </code>
-        {`. At 'md', 'lg', 'xl', and '2xl' breakpoints, the default value will be overwritten, and padding will be added.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To remove padding at specific breakpoints, pass in 'noPadding' at those breakpoints. For example, the fourth section in this example passes in `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`padding={{ md: 'noPadding' }}`}
-        </code>
-        {`, which means that 'md', 'lg' 'xl', and '2xl' breakpoints will have `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`noPadding`}
-        </code>
-        {`.`}
-      </p>
-    </Example>,
-  'Main section variations': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  PageSidebar,\n  PageSidebarBody,\n  PageSection,\n  PageToggleButton,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\n\nexport const PageMainSectionPadding: React.FunctionComponent = () => {\n  const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n  const onSidebarToggle = () => {\n    setIsSidebarOpen(!isSidebarOpen);\n  };\n\n  const headerToolbar = (\n    <Toolbar id=\"main-variations-toolbar\">\n      <ToolbarContent>\n        <ToolbarItem>header-tools</ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const header = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton\n            aria-label=\"Global navigation\"\n            isSidebarOpen={isSidebarOpen}\n            onSidebarToggle={onSidebarToggle}\n            id=\"main-variations-nav-toggle\"\n            isHamburgerButton\n          />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n            Logo\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  const sidebar = (\n    <PageSidebar isSidebarOpen={isSidebarOpen} id=\"main-variations-sidebar\">\n      <PageSidebarBody>Navigation</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  return (\n    <Page header={header} sidebar={sidebar}>\n      <PageSection type=\"subnav\" aria-label=\"With subnav type\">\n        Section with <code>type=\"subnav\"</code> for horizontal subnav navigation\n      </PageSection>\n      <PageSection type=\"nav\" aria-label=\"With nav type\">\n        Section with <code>type=\"nav\"</code> for tertiary navigation\n      </PageSection>\n      <PageSection type=\"tabs\" aria-label=\"With tabs type\">\n        Section with <code>type=\"tabs\"</code> for tabs\n      </PageSection>\n      <PageSection type=\"breadcrumb\" aria-label=\"With breadcrumb type\">\n        Section with <code>type=\"breadcrumb\"</code> for breadcrumbs\n      </PageSection>\n      <PageSection aria-label=\"With default type\">\n        Section without <code>type</code> prop or <code>type=\"default\"</code> for main sections\n      </PageSection>\n      <PageSection type=\"wizard\" aria-label=\"With wizard type\">\n        Section with <code>type=\"wizard\"</code> for wizards\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Main section variations","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`This example shows all types of page sections.`}
-      </p>
-    </Example>,
-  'Group section': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  PageSidebar,\n  PageSidebarBody,\n  PageSection,\n  PageGroup,\n  PageBreadcrumb,\n  PageToggleButton,\n  Breadcrumb,\n  BreadcrumbItem,\n  Nav,\n  NavList,\n  NavItem,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\n\nexport const PageGroupSection: React.FunctionComponent = () => {\n  const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n  const onSidebarToggle = () => {\n    setIsSidebarOpen(!isSidebarOpen);\n  };\n\n  const headerToolbar = (\n    <Toolbar id=\"group-section-toolbar\">\n      <ToolbarContent>\n        <ToolbarItem>header-tools</ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton\n            aria-label=\"Global navigation\"\n            isSidebarOpen={isSidebarOpen}\n            onSidebarToggle={onSidebarToggle}\n            id=\"group-section-nav-toggle\"\n            isHamburgerButton\n          />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n            Logo\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  const sidebar = (\n    <PageSidebar isSidebarOpen={isSidebarOpen} id=\"group-section-sidebar\">\n      <PageSidebarBody>Navigation</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  return (\n    <Page masthead={masthead} sidebar={sidebar}>\n      <PageGroup>\n        <Nav aria-label=\"Group section navigation\" variant=\"horizontal-subnav\">\n          <NavList>\n            <NavItem href=\"#\" itemId={0} isActive>\n              System panel\n            </NavItem>\n            <NavItem href=\"#\" itemId={1}>\n              Policy\n            </NavItem>\n            <NavItem href=\"#\" itemId={2}>\n              Authentication\n            </NavItem>\n            <NavItem href=\"#\" itemId={3}>\n              Network services\n            </NavItem>\n            <NavItem href=\"#\" itemId={4}>\n              Server\n            </NavItem>\n          </NavList>\n        </Nav>\n        <PageBreadcrumb>\n          <Breadcrumb>\n            <BreadcrumbItem>Section home</BreadcrumbItem>\n            <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n            <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n            <BreadcrumbItem to=\"#\" isActive>\n              Section landing\n            </BreadcrumbItem>\n          </Breadcrumb>\n        </PageBreadcrumb>\n        <PageSection aria-labelledby=\"grouped-section\">\n          <h2 id=\"grouped-section\">Grouped section</h2>\n        </PageSection>\n      </PageGroup>\n      <PageSection aria-labelledby=\"section-1\">\n        <h2 id=\"section-1\">Grouped example section 1</h2>\n      </PageSection>\n      <PageSection aria-labelledby=\"section-2\">\n        <h2 id=\"section-2\">Grouped example section 2</h2>\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Group section","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To group page content sections, add 1 or more `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageGroup>`}
-        </code>
-        {` components to a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Page>`}
-        </code>
-        {`.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`The following example adds a group containing `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageBreadcrumb>`}
-        </code>
-        {` and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageSection>`}
-        </code>
-        {` components.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To add additional components and information to a group, you may use the following properties:`}
-      </p>
-      
-      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`To indicate that a breadcrumb should be in a group, use `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`isBreadcrumbGrouped`}
-          </code>
-          {`.`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`To indicate that horizontal sub navigation should be in a group, use `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`isHorizontalSubnavGrouped`}
-          </code>
-          {`.`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`To specify additional group content, use `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`additionalGroupedContent`}
-          </code>
-          {`.`}
-        </li>
-        
-
-      </ul>
-    </Example>,
-  'Centered section': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  PageSidebar,\n  PageSidebarBody,\n  PageSection,\n  PageToggleButton,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem,\n  Card,\n  CardBody\n} from '@patternfly/react-core';\nimport pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';\n\nexport const PageCenteredSection: React.FunctionComponent = () => {\n  const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n  const onSidebarToggle = () => {\n    setIsSidebarOpen(!isSidebarOpen);\n  };\n\n  const headerToolbar = (\n    <Toolbar id=\"centered-toolbar\">\n      <ToolbarContent>\n        <ToolbarItem>header-tools</ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton\n            aria-label=\"Global navigation\"\n            isSidebarOpen={isSidebarOpen}\n            onSidebarToggle={onSidebarToggle}\n            id=\"centered-nav-toggle\"\n            isHamburgerButton\n          />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n            Logo\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  const sidebar = (\n    <PageSidebar isSidebarOpen={isSidebarOpen} id=\"centered-section-sidebar\">\n      <PageSidebarBody>Navigation</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  return (\n    <Page masthead={masthead} sidebar={sidebar}>\n      <PageSection isWidthLimited isCenterAligned aria-label=\"width limited page section\">\n        <Card>\n          <CardBody>\n            When a width limited page section is wider than the value of\n            <code>{pageSectionWidthLimitMaxWidth.name}</code>, the section will be centered in the main section.\n            <br />\n            <br />\n            The content in this example is placed in a card to better illustrate how the section behaves when it is\n            centered. A card is not required to center a page section.\n          </CardBody>\n        </Card>\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Centered section","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`By default, a page section spans the width of the page. To reduce the width of a section, use the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isWidthLimited`}
-        </code>
-        {` property. To center align width-limited page sections, use the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isCenterAligned`}
-        </code>
-        {` property. When the main content area of a page is wider than the value of a centered, width-limited page section's `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`--pf-v6-c-page--section--m-limit-width--MaxWidth`}
-        </code>
-        {` custom property, the section will automatically be centered.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`The content in this example is placed in a card to better illustrate how the section behaves when it is centered, but a card is not required to center a page section.`}
-      </p>
-    </Example>,
-  'Plain sections and groups': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadMain,\n  MastheadToggle,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  PageSidebar,\n  PageSidebarBody,\n  PageSection,\n  PageGroup,\n  PageToggleButton,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\n\nexport const PagePlainSections: React.FunctionComponent = () => {\n  const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n  const onSidebarToggle = () => {\n    setIsSidebarOpen(!isSidebarOpen);\n  };\n\n  const headerToolbar = (\n    <Toolbar id=\"plain-sections-toolbar\">\n      <ToolbarContent>\n        <ToolbarItem>header-tools</ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton\n            aria-label=\"Plain sections example navigation\"\n            isSidebarOpen={isSidebarOpen}\n            onSidebarToggle={onSidebarToggle}\n            id=\"plain-sections-nav-toggle\"\n            isHamburgerButton\n          />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n            Logo\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  const sidebar = (\n    <PageSidebar isSidebarOpen={isSidebarOpen} id=\"plain-sections-sidebar\">\n      <PageSidebarBody>Navigation</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  return (\n    <Page masthead={masthead} sidebar={sidebar}>\n      <PageSection isPlain aria-label=\"Plain section example\">\n        <h2>Plain PageSection</h2>\n        <p>\n          This section uses <code>isPlain</code> to apply plain styling with no background color.\n        </p>\n      </PageSection>\n      <PageSection aria-label=\"Default section example\">\n        <h2>Default PageSection</h2>\n        <p>This section has the default styling with a background color.</p>\n      </PageSection>\n      <PageGroup isPlain>\n        <PageSection aria-label=\"Section in plain group\">\n          <h2>PageSection inside Plain PageGroup</h2>\n          <p>\n            This section is inside a PageGroup with <code>isPlain</code> applied.\n          </p>\n        </PageSection>\n        <PageSection aria-label=\"Another section in plain group\">\n          <h2>Another Section in Plain Group</h2>\n          <p>Both sections are grouped with plain styling.</p>\n        </PageSection>\n      </PageGroup>\n      <PageSection variant=\"secondary\" aria-label=\"Secondary variant section\">\n        <h2>Secondary Variant Section</h2>\n        <p>This section uses the secondary variant for contrast.</p>\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Plain sections and groups","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To remove the default background color from a page section or group, use the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isPlain`}
-        </code>
-        {` property on `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageSection>`}
-        </code>
-        {` or `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<PageGroup>`}
-        </code>
-        {` components.`}
-      </p>
-    </Example>,
-  'Dynamic sticky section': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useLayoutEffect, useState, useRef } from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadMain,\n  MastheadBrand,\n  MastheadLogo,\n  MastheadContent,\n  PageSection,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem,\n  Breadcrumb,\n  BreadcrumbItem,\n  Content\n} from '@patternfly/react-core';\n\nconst useIsStuckFromScrollParent = ({\n  shouldTrack,\n  scrollParentRef\n}: {\n  shouldTrack: boolean;\n  scrollParentRef: React.RefObject<any>;\n}): boolean => {\n  const [isStuck, setIsStuck] = useState(false);\n\n  useLayoutEffect(() => {\n    if (!shouldTrack) {\n      setIsStuck(false);\n      return;\n    }\n\n    const scrollElement = scrollParentRef.current;\n    if (!scrollElement) {\n      setIsStuck(false);\n      return;\n    }\n\n    const syncFromScroll = () => {\n      setIsStuck(scrollElement.scrollTop > 0);\n    };\n    syncFromScroll();\n    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });\n    return () => scrollElement.removeEventListener('scroll', syncFromScroll);\n  }, [shouldTrack, scrollParentRef]);\n\n  return isStuck;\n};\n\nexport const PageDynamicStickySection: React.FunctionComponent = () => {\n  const scrollParentRef = useRef<HTMLDivElement>(null);\n  const isStickyStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef });\n\n  const headerToolbar = (\n    <Toolbar id=\"dynamic-sticky-toolbar\">\n      <ToolbarContent>\n        <ToolbarItem>header-tools</ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadBrand>\n          <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n            Logo\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  return (\n    <Page masthead={masthead}>\n      <div ref={scrollParentRef} style={{ overflowY: 'auto', height: '100%' }}>\n        <PageSection type=\"breadcrumb\" stickyBase=\"top\" isStickyStuck={isStickyStuck}>\n          <Breadcrumb>\n            <BreadcrumbItem>Section home</BreadcrumbItem>\n            <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n            <BreadcrumbItem to=\"#\" isActive>\n              Section landing\n            </BreadcrumbItem>\n          </Breadcrumb>\n        </PageSection>\n        <PageSection>\n          <Content>\n            <h1>Main title</h1>\n            <p>\n              Scroll the container to see the breadcrumb section above dynamically apply its stuck styling. The section\n              uses <code>stickyBase=&quot;top&quot;</code> to remain fixed at the top of the scroll parent, and{' '}\n              <code>isStickyStuck</code> is toggled via a scroll event listener to apply visual styling when the section\n              is no longer at the top edge.\n            </p>\n          </Content>\n        </PageSection>\n        {Array.from({ length: 30 }, (_, i) => (\n          <PageSection key={i} variant={i % 2 === 0 ? 'default' : 'secondary'}>\n            <Content>\n              <p>{`Section ${i + 1} content`}</p>\n            </Content>\n          </PageSection>\n        ))}\n      </div>\n    </Page>\n  );\n};\n","title":"Dynamic sticky section","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`A page section may be made sticky with separate control of its sticky positioning and stuck styling using the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`stickyBase`}
-        </code>
-        {` and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isStickyStuck`}
-        </code>
-        {` properties. The `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`stickyBase`}
-        </code>
-        {` property accepts a value of `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`"top"`}
-        </code>
-        {` or `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`"bottom"`}
-        </code>
-        {` and applies the base sticky positioning in the given direction. The `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isStickyStuck`}
-        </code>
-        {` property applies visual "stuck" styling such as a background, box shadow, and border, and should be toggled based on the scroll position of the scroll parent container.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`In this example, a scroll event listener on the scroll parent container toggles `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isStickyStuck`}
-        </code>
-        {` when `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`scrollTop > 0`}
-        </code>
-        {`, so the stuck styling appears only when the content is scrolled.`}
-      </p>
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Examples`}
-    </AutoLinkHeader>
-    <AutoLinkHeader {...{"id":"basic-page-components","headingLevel":"h3","className":"ws-title ws-h3"}}>
-      {`Basic page components`}
-    </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`A page will typically contain the following components:`}
-    </p>
-    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`A `}
-        <code {...{"className":"ws-code "}}>
-          {`<Page>`}
-        </code>
-        {` with a `}
-        <code {...{"className":"ws-code "}}>
-          {`masthead`}
-        </code>
-        {` prop that often contains a `}
-        <PatternflyThemeLink {...{"to":"/components/masthead","className":""}}>
-          {`masthead`}
-        </PatternflyThemeLink>
-        {` component`}
-      </li>
-    </ul>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`The `}
-      <code {...{"className":"ws-code "}}>
-        {`<MastheadMain>`}
-      </code>
-      {` component includes the smaller area that typically contains the `}
-      <code {...{"className":"ws-code "}}>
-        {`<MastheadToggle>`}
-      </code>
-      {` and a `}
-      <code {...{"className":"ws-code "}}>
-        {`<MastheadLogo>`}
-      </code>
-      {`. `}
-      <code {...{"className":"ws-code "}}>
-        {`<MastheadContent>`}
-      </code>
-      {` represents the main portion of the masthead, and will typically contain a `}
-      <code {...{"className":"ws-code "}}>
-        {`<Toolbar>`}
-      </code>
-      {` or other menu-like components, like a `}
-      <code {...{"className":"ws-code "}}>
-        {`<Dropdown>`}
-      </code>
-      {`.`}
-    </p>
-    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`Mastheads contain a `}
-        <code {...{"className":"ws-code "}}>
-          {`<MastheadMain>`}
-        </code>
-        {` component, which includes the `}
-        <code {...{"className":"ws-code "}}>
-          {`<MastheadToggle>`}
-        </code>
-        {`, a `}
-        <code {...{"className":"ws-code "}}>
-          {`<MastheadLogo>`}
-        </code>
-        {`, and the page's toolbar (via `}
-        <code {...{"className":"ws-code "}}>
-          {`<MastheadContent>`}
-        </code>
-        {`.) The `}
-        <code {...{"className":"ws-code "}}>
-          {`<MastheadToggle>`}
-        </code>
-        {` component contains a `}
-        <code {...{"className":"ws-code "}}>
-          {`<PageToggleButton>`}
-        </code>
-        {`, and the `}
-        <code {...{"className":"ws-code "}}>
-          {`<MastheadLogo>`}
-        </code>
-        {` component contains a `}
-        <code {...{"className":"ws-code "}}>
-          {`<MastheadBrand>`}
-        </code>
-        {`.`}
-      </li>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`1 or more `}
-        <code {...{"className":"ws-code "}}>
-          {`<PageSidebarBody>`}
-        </code>
-        {` components inside `}
-        <code {...{"className":"ws-code "}}>
-          {`<PageSidebar>`}
-        </code>
-        {` for vertical navigation or other sidebar content`}
-      </li>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`1 or more `}
-        <code {...{"className":"ws-code "}}>
-          {`<PageSection>`}
-        </code>
-        {` components`}
-      </li>
-    </ul>
-    {React.createElement(pageData.examples["Vertical navigation"])}
-    {React.createElement(pageData.examples["Multiple sidebar body"])}
-    {React.createElement(pageData.examples["Horizontal navigation"])}
-    {React.createElement(pageData.examples["Uncontrolled navigation"])}
-    {React.createElement(pageData.examples["Filled page sections"])}
-    {React.createElement(pageData.examples["Main section padding"])}
-    {React.createElement(pageData.examples["Main section variations"])}
-    {React.createElement(pageData.examples["Group section"])}
-    {React.createElement(pageData.examples["Centered section"])}
-    {React.createElement(pageData.examples["Plain sections and groups"])}
-    {React.createElement(pageData.examples["Dynamic sticky section"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsPageReactDocs';
-Component.pageData = pageData;
-
-export default Component;