@cloudflare/component-page 10.0.16 → 10.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 10.1.1
+
+### Patch Changes
+
+- @cloudflare/component-link@9.0.17
+
+## 10.1.0
+
+### Minor Changes
+
+- 82021ffb37: Default Page docs button to use Span for Tooltip, not button which creates invalid HTML
+
 ## 10.0.16
 
 ### Patch Changes

package/dist/Page.stories.d.ts

@@ -0,0 +1,118 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.ComponentType<{
+    title?: React.ReactNode;
+    parentPageLabel?: React.ReactNode;
+    description?: React.ReactNode;
+    documentationLabel?: React.ReactNode;
+    documentationHref?: string | undefined;
+    control?: React.ReactNode;
+    children?: React.ReactNode;
+    centerHeader?: boolean | undefined;
+    beta?: boolean | undefined;
+    titleRef?: React.RefObject<HTMLHeadingElement> | undefined;
+    parentPageLabelRef?: React.RefObject<HTMLHeadingElement> | undefined;
+    navigation?: React.ReactNode;
+    onDocumentationButtonClick?: (() => void) | undefined;
+    documentationAsButton?: boolean | undefined;
+    type?: ("narrow" | "wide" | "unbounded") | undefined;
+    className?: string | undefined;
+    testId?: string | undefined;
+    sidebar?: React.ReactNode;
+    sidebarPosition?: "left" | "inside" | "outside" | undefined;
+    autofocus?: boolean | undefined;
+    p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
+    color?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    height?: import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined;
+    width?: import("csstype").WidthProperty<string | number> | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | undefined;
+    cursor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    display?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    fontSize?: import("csstype").FontSizeProperty<string | number> | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | undefined;
+    fontWeight?: import("csstype").FontWeightProperty | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | undefined;
+    textDecoration?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    margin?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
+    marginLeft?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
+    marginRight?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
+    marginTop?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
+    marginBottom?: import("csstype").MarginBottomProperty<string | number> | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | undefined;
+    padding?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
+    paddingLeft?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
+    paddingRight?: import("csstype").PaddingRightProperty<string | number> | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | undefined;
+    paddingTop?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
+    paddingBottom?: import("csstype").PaddingBottomProperty<string | number> | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | undefined;
+    gap?: import("csstype").GapProperty<string | number> | [import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined] | [import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined] | undefined;
+    m?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
+    ml?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
+    mr?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
+    mt?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
+    mb?: import("csstype").MarginBottomProperty<string | number> | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | undefined;
+    mx?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
+    my?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
+    pl?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
+    pr?: import("csstype").PaddingRightProperty<string | number> | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | undefined;
+    pt?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
+    pb?: import("csstype").PaddingBottomProperty<string | number> | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | undefined;
+    px?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
+    py?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
+    minWidth?: import("csstype").MinWidthProperty<string | number> | [import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined] | [import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined] | undefined;
+    minHeight?: import("csstype").MinHeightProperty<string | number> | [import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined] | [import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined] | undefined;
+    maxWidth?: import("csstype").MaxWidthProperty<string | number> | [import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined] | [import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined] | undefined;
+    maxHeight?: import("csstype").MaxHeightProperty<string | number> | [import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined] | [import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined] | undefined;
+    backgroundColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderLeftColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderRightColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderTopColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderBottomColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderStyle?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderTopStyle?: import("csstype").BorderTopStyleProperty | [import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined] | [import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined] | undefined;
+    borderBottomStyle?: import("csstype").BorderBottomStyleProperty | [import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined] | [import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined] | undefined;
+    borderLeftStyle?: import("csstype").BorderLeftStyleProperty | [import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined] | [import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined] | undefined;
+    borderRightStyle?: import("csstype").BorderRightStyleProperty | [import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined] | [import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined] | undefined;
+    borderWidth?: import("csstype").BorderWidthProperty<string | number> | [import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined] | [import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined] | undefined;
+    borderTopWidth?: import("csstype").BorderTopWidthProperty<string | number> | [import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined] | [import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined] | undefined;
+    borderBottomWidth?: import("csstype").BorderBottomWidthProperty<string | number> | [import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined] | [import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined] | undefined;
+    borderLeftWidth?: import("csstype").BorderLeftWidthProperty<string | number> | [import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined] | [import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined] | undefined;
+    borderRightWidth?: import("csstype").BorderRightWidthProperty<string | number> | [import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined] | [import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined] | undefined;
+    borderRadius?: import("csstype").BorderRadiusProperty<string | number> | [import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined] | [import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined] | undefined;
+    borderTopLeftRadius?: import("csstype").BorderTopLeftRadiusProperty<string | number> | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | undefined;
+    borderTopRightRadius?: import("csstype").BorderTopRightRadiusProperty<string | number> | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | undefined;
+    borderBottomLeftRadius?: import("csstype").BorderBottomLeftRadiusProperty<string | number> | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | undefined;
+    borderBottomRightRadius?: import("csstype").BorderBottomRightRadiusProperty<string | number> | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | undefined;
+    textAlign?: import("csstype").TextAlignProperty | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | undefined;
+    verticalAlign?: import("csstype").VerticalAlignProperty<string | number> | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | undefined;
+    alignItems?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    alignSelf?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    justifyContent?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    textTransform?: import("csstype").TextTransformProperty | [import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined] | [import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined] | undefined;
+    boxSizing?: import("csstype").BoxSizingProperty | [import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined] | [import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined] | undefined;
+    flexDirection?: import("csstype").FlexDirectionProperty | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | undefined;
+    flexBasis?: import("csstype").FlexBasisProperty<string | number> | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | undefined;
+    flexGrow?: import("csstype").GlobalsNumber | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | undefined;
+    gridTemplateColumns?: import("csstype").GridTemplateColumnsProperty<string | number> | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | undefined;
+    innerRef?: React.Ref<never> | undefined;
+    gridColumnSpan?: number | number[] | "all" | "end" | undefined;
+    gridColumnPad?: number | number[] | undefined;
+    gridRowSpan?: number | number[] | undefined;
+    gridRowPad?: number | number[] | undefined;
+    gridAlign?: ("start" | "end" | "center" | "stretch") | undefined;
+    gridJustify?: ("start" | "end" | "center" | "stretch") | undefined;
+}>>;
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const WithParentLabel: () => JSX.Element;
+export declare const WithBeta: () => JSX.Element;
+export declare const WithDocumentation: () => JSX.Element;
+export declare const WithDocumentationButton: () => JSX.Element;
+export declare const WithSidebarInside: () => JSX.Element;
+export declare const WithSidebarOutside: () => JSX.Element;
+export declare const WithControl: () => JSX.Element;
+export declare const WithNavigation: () => JSX.Element;
+export declare const CenteredHeader: () => JSX.Element;
+export declare const NarrowWidth: () => JSX.Element;
+export declare const WideWidth: () => JSX.Element;
+export declare const UnboundedWidth: () => JSX.Element;
+export declare const ComplexExample: () => JSX.Element;
+export declare const MinimalExample: () => JSX.Element;
+export declare const NoTitle: () => JSX.Element;
+export declare const LongContent: () => JSX.Element;

package/es/Page.js

@@ -9,7 +9,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import { createStyledComponent } from '@cloudflare/style-container';
-import { Main, Header, Div, P } from '@cloudflare/elements';
+import { Main, Header, Div, P, Span } from '@cloudflare/elements';
 import { Label } from '@cloudflare/component-label';
 import { Trans } from '@cloudflare/intl-react';
 import { Heading, Section } from './Heading';
@@ -90,7 +90,11 @@ var PageHeader = _ref => {
     message: /*#__PURE__*/React.createElement(Trans, {
       id: "common.open_documentation",
       _: 'Open documentation'
-    })
+    }),
+    Component: Span,
+    buttonProps: {
+      width: 'fit-content'
+    }
   }, /*#__PURE__*/React.createElement(Button, {
     type: "primary",
     borderRadius: '20vh',

package/es/Page.stories.js

@@ -0,0 +1,175 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { Button } from '@cloudflare/component-button';
+import { Card } from '@cloudflare/component-card';
+import { Div, P } from '@cloudflare/elements';
+import Page from './Page';
+export default {
+  title: 'Dash/Core/Page',
+  component: Page,
+  decorators: [Story => /*#__PURE__*/React.createElement(BrowserRouter, null, /*#__PURE__*/React.createElement(Story, null))],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'A flexible page layout component with header, optional sidebar, and content area. Supports different width configurations and responsive behavior.'
+      }
+    }
+  }
+}; // Sample content components for stories
+
+var SampleContent = () => /*#__PURE__*/React.createElement(Div, null, /*#__PURE__*/React.createElement(P, {
+  mb: 4
+}, "This is sample page content. The Page component provides a consistent layout structure with header, optional sidebar, and main content area."), /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Div, {
+  p: 4,
+  mb: 4
+}, /*#__PURE__*/React.createElement(P, {
+  mb: 2,
+  fontWeight: "bold"
+}, "Sample Card Content"), /*#__PURE__*/React.createElement(P, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Div, {
+  p: 4
+}, /*#__PURE__*/React.createElement(P, {
+  mb: 2,
+  fontWeight: "bold"
+}, "Another Card"), /*#__PURE__*/React.createElement(P, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."))));
+
+var SampleSidebar = () => /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Div, {
+  p: 4
+}, /*#__PURE__*/React.createElement(P, {
+  mb: 3,
+  fontWeight: "bold"
+}, "Sidebar Content"), /*#__PURE__*/React.createElement(P, {
+  mb: 2
+}, "Quick Actions:"), /*#__PURE__*/React.createElement(Div, {
+  mb: 2
+}, /*#__PURE__*/React.createElement(Button, {
+  type: "primary",
+  width: "100%"
+}, "Primary Action")), /*#__PURE__*/React.createElement(Div, {
+  mb: 2
+}, /*#__PURE__*/React.createElement(Button, {
+  type: "default",
+  width: "100%"
+}, "Secondary Action")), /*#__PURE__*/React.createElement(P, {
+  mt: 3,
+  fontSize: 1,
+  color: "gray.3"
+}, "Additional sidebar information and links can go here.")));
+
+var SampleControl = () => /*#__PURE__*/React.createElement(Div, {
+  display: "flex",
+  alignItems: "center"
+}, /*#__PURE__*/React.createElement(Button, {
+  type: "primary",
+  mr: 2
+}, "Create New"), /*#__PURE__*/React.createElement(Button, {
+  type: "default"
+}, "Settings"));
+
+var SampleNavigation = () => /*#__PURE__*/React.createElement(Button, {
+  type: "plain",
+  iconType: "backward",
+  onClick: () => console.log('Navigate back')
+}, "Back to Dashboard");
+
+export var Default = () => /*#__PURE__*/React.createElement(Page, {
+  title: "Page Title",
+  description: "This is a description of what this page is about and what users can expect to find here."
+}, /*#__PURE__*/React.createElement(SampleContent, null));
+export var WithParentLabel = () => /*#__PURE__*/React.createElement(Page, {
+  title: "Settings",
+  parentPageLabel: "Account Management",
+  description: "Configure your account settings and preferences."
+}, /*#__PURE__*/React.createElement(SampleContent, null));
+export var WithBeta = () => /*#__PURE__*/React.createElement(Page, {
+  title: "New Feature",
+  description: "This is a beta feature that is still in development.",
+  beta: true
+}, /*#__PURE__*/React.createElement(SampleContent, null));
+export var WithDocumentation = () => /*#__PURE__*/React.createElement(Page, {
+  title: "API Documentation",
+  description: "Learn how to integrate with our API endpoints.",
+  documentationLabel: "View API Docs",
+  documentationHref: "https://developers.cloudflare.com"
+}, /*#__PURE__*/React.createElement(SampleContent, null));
+export var WithDocumentationButton = () => /*#__PURE__*/React.createElement(Page, {
+  title: "Advanced Configuration",
+  description: "Configure advanced settings for your application.",
+  documentationLabel: "Help",
+  documentationAsButton: true,
+  onDocumentationButtonClick: () => console.log('Documentation button clicked')
+}, /*#__PURE__*/React.createElement(SampleContent, null));
+export var WithSidebarInside = () => /*#__PURE__*/React.createElement(Page, {
+  title: "Dashboard",
+  description: "Overview of your account activity and quick actions.",
+  sidebar: /*#__PURE__*/React.createElement(SampleSidebar, null),
+  sidebarPosition: "inside"
+}, /*#__PURE__*/React.createElement(SampleContent, null));
+export var WithSidebarOutside = () => /*#__PURE__*/React.createElement(Page, {
+  title: "Analytics",
+  description: "View detailed analytics and performance metrics.",
+  sidebar: /*#__PURE__*/React.createElement(SampleSidebar, null),
+  sidebarPosition: "outside"
+}, /*#__PURE__*/React.createElement(SampleContent, null));
+export var WithControl = () => /*#__PURE__*/React.createElement(Page, {
+  title: "User Management",
+  description: "Manage users and their permissions.",
+  control: /*#__PURE__*/React.createElement(SampleControl, null)
+}, /*#__PURE__*/React.createElement(SampleContent, null));
+export var WithNavigation = () => /*#__PURE__*/React.createElement(Page, {
+  title: "Project Details",
+  description: "View and edit project configuration.",
+  navigation: /*#__PURE__*/React.createElement(SampleNavigation, null)
+}, /*#__PURE__*/React.createElement(SampleContent, null));
+export var CenteredHeader = () => /*#__PURE__*/React.createElement(Page, {
+  title: "Welcome",
+  description: "Welcome to your dashboard. Get started by exploring the features below.",
+  centerHeader: true
+}, /*#__PURE__*/React.createElement(SampleContent, null));
+export var NarrowWidth = () => /*#__PURE__*/React.createElement(Page, {
+  title: "Narrow Page",
+  description: "This page uses the narrow width configuration for focused content.",
+  type: "narrow"
+}, /*#__PURE__*/React.createElement(SampleContent, null));
+export var WideWidth = () => /*#__PURE__*/React.createElement(Page, {
+  title: "Wide Page",
+  description: "This page uses the wide width configuration for more content.",
+  type: "wide"
+}, /*#__PURE__*/React.createElement(SampleContent, null));
+export var UnboundedWidth = () => /*#__PURE__*/React.createElement(Page, {
+  title: "Unbounded Page",
+  description: "This page uses the unbounded width configuration for full-width content.",
+  type: "unbounded"
+}, /*#__PURE__*/React.createElement(SampleContent, null));
+export var ComplexExample = () => /*#__PURE__*/React.createElement(Page, {
+  title: "Complex Page Example",
+  parentPageLabel: "Advanced Features",
+  description: "This example shows multiple features working together including beta label, documentation, controls, and sidebar.",
+  beta: true,
+  documentationLabel: "Learn More",
+  documentationHref: "https://developers.cloudflare.com",
+  control: /*#__PURE__*/React.createElement(SampleControl, null),
+  sidebar: /*#__PURE__*/React.createElement(SampleSidebar, null),
+  sidebarPosition: "inside",
+  navigation: /*#__PURE__*/React.createElement(SampleNavigation, null)
+}, /*#__PURE__*/React.createElement(SampleContent, null));
+export var MinimalExample = () => /*#__PURE__*/React.createElement(Page, {
+  title: "Minimal Page"
+}, /*#__PURE__*/React.createElement(P, null, "This is a minimal page with just a title and simple content."));
+export var NoTitle = () => /*#__PURE__*/React.createElement(Page, {
+  description: "A page without a title, showing just the description."
+}, /*#__PURE__*/React.createElement(SampleContent, null));
+export var LongContent = () => /*#__PURE__*/React.createElement(Page, {
+  title: "Long Content Example",
+  description: "This page demonstrates how the component handles longer content."
+}, /*#__PURE__*/React.createElement(Div, null, Array.from({
+  length: 10
+}, (_, i) => /*#__PURE__*/React.createElement(Card, {
+  key: i
+}, /*#__PURE__*/React.createElement(Div, {
+  p: 4,
+  mb: 4
+}, /*#__PURE__*/React.createElement(P, {
+  mb: 2,
+  fontWeight: "bold"
+}, "Section ", i + 1), /*#__PURE__*/React.createElement(P, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))))));

package/lib/Page.js

@@ -113,7 +113,11 @@ var PageHeader = function PageHeader(_ref) {
     message: /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
       id: "common.open_documentation",
       _: 'Open documentation'
-    })
+    }),
+    Component: _elements.Span,
+    buttonProps: {
+      width: 'fit-content'
+    }
   }, /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
     type: "primary",
     borderRadius: '20vh',

package/lib/Page.stories.js

@@ -0,0 +1,292 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithSidebarOutside = exports.WithSidebarInside = exports.WithParentLabel = exports.WithNavigation = exports.WithDocumentationButton = exports.WithDocumentation = exports.WithControl = exports.WithBeta = exports.WideWidth = exports.UnboundedWidth = exports.NoTitle = exports.NarrowWidth = exports.MinimalExample = exports.LongContent = exports.Default = exports.ComplexExample = exports.CenteredHeader = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _componentButton = require("@cloudflare/component-button");
+
+var _componentCard = require("@cloudflare/component-card");
+
+var _elements = require("@cloudflare/elements");
+
+var _Page = _interopRequireDefault(require("./Page"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Dash/Core/Page',
+  component: _Page.default,
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(Story, null));
+  }],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'A flexible page layout component with header, optional sidebar, and content area. Supports different width configurations and responsive behavior.'
+      }
+    }
+  }
+}; // Sample content components for stories
+
+exports.default = _default;
+
+var SampleContent = function SampleContent() {
+  return /*#__PURE__*/_react.default.createElement(_elements.Div, null, /*#__PURE__*/_react.default.createElement(_elements.P, {
+    mb: 4
+  }, "This is sample page content. The Page component provides a consistent layout structure with header, optional sidebar, and main content area."), /*#__PURE__*/_react.default.createElement(_componentCard.Card, null, /*#__PURE__*/_react.default.createElement(_elements.Div, {
+    p: 4,
+    mb: 4
+  }, /*#__PURE__*/_react.default.createElement(_elements.P, {
+    mb: 2,
+    fontWeight: "bold"
+  }, "Sample Card Content"), /*#__PURE__*/_react.default.createElement(_elements.P, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/_react.default.createElement(_componentCard.Card, null, /*#__PURE__*/_react.default.createElement(_elements.Div, {
+    p: 4
+  }, /*#__PURE__*/_react.default.createElement(_elements.P, {
+    mb: 2,
+    fontWeight: "bold"
+  }, "Another Card"), /*#__PURE__*/_react.default.createElement(_elements.P, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."))));
+};
+
+var SampleSidebar = function SampleSidebar() {
+  return /*#__PURE__*/_react.default.createElement(_componentCard.Card, null, /*#__PURE__*/_react.default.createElement(_elements.Div, {
+    p: 4
+  }, /*#__PURE__*/_react.default.createElement(_elements.P, {
+    mb: 3,
+    fontWeight: "bold"
+  }, "Sidebar Content"), /*#__PURE__*/_react.default.createElement(_elements.P, {
+    mb: 2
+  }, "Quick Actions:"), /*#__PURE__*/_react.default.createElement(_elements.Div, {
+    mb: 2
+  }, /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
+    type: "primary",
+    width: "100%"
+  }, "Primary Action")), /*#__PURE__*/_react.default.createElement(_elements.Div, {
+    mb: 2
+  }, /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
+    type: "default",
+    width: "100%"
+  }, "Secondary Action")), /*#__PURE__*/_react.default.createElement(_elements.P, {
+    mt: 3,
+    fontSize: 1,
+    color: "gray.3"
+  }, "Additional sidebar information and links can go here.")));
+};
+
+var SampleControl = function SampleControl() {
+  return /*#__PURE__*/_react.default.createElement(_elements.Div, {
+    display: "flex",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
+    type: "primary",
+    mr: 2
+  }, "Create New"), /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
+    type: "default"
+  }, "Settings"));
+};
+
+var SampleNavigation = function SampleNavigation() {
+  return /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
+    type: "plain",
+    iconType: "backward",
+    onClick: function onClick() {
+      return console.log('Navigate back');
+    }
+  }, "Back to Dashboard");
+};
+
+var Default = function Default() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "Page Title",
+    description: "This is a description of what this page is about and what users can expect to find here."
+  }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
+};
+
+exports.Default = Default;
+
+var WithParentLabel = function WithParentLabel() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "Settings",
+    parentPageLabel: "Account Management",
+    description: "Configure your account settings and preferences."
+  }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
+};
+
+exports.WithParentLabel = WithParentLabel;
+
+var WithBeta = function WithBeta() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "New Feature",
+    description: "This is a beta feature that is still in development.",
+    beta: true
+  }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
+};
+
+exports.WithBeta = WithBeta;
+
+var WithDocumentation = function WithDocumentation() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "API Documentation",
+    description: "Learn how to integrate with our API endpoints.",
+    documentationLabel: "View API Docs",
+    documentationHref: "https://developers.cloudflare.com"
+  }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
+};
+
+exports.WithDocumentation = WithDocumentation;
+
+var WithDocumentationButton = function WithDocumentationButton() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "Advanced Configuration",
+    description: "Configure advanced settings for your application.",
+    documentationLabel: "Help",
+    documentationAsButton: true,
+    onDocumentationButtonClick: function onDocumentationButtonClick() {
+      return console.log('Documentation button clicked');
+    }
+  }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
+};
+
+exports.WithDocumentationButton = WithDocumentationButton;
+
+var WithSidebarInside = function WithSidebarInside() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "Dashboard",
+    description: "Overview of your account activity and quick actions.",
+    sidebar: /*#__PURE__*/_react.default.createElement(SampleSidebar, null),
+    sidebarPosition: "inside"
+  }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
+};
+
+exports.WithSidebarInside = WithSidebarInside;
+
+var WithSidebarOutside = function WithSidebarOutside() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "Analytics",
+    description: "View detailed analytics and performance metrics.",
+    sidebar: /*#__PURE__*/_react.default.createElement(SampleSidebar, null),
+    sidebarPosition: "outside"
+  }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
+};
+
+exports.WithSidebarOutside = WithSidebarOutside;
+
+var WithControl = function WithControl() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "User Management",
+    description: "Manage users and their permissions.",
+    control: /*#__PURE__*/_react.default.createElement(SampleControl, null)
+  }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
+};
+
+exports.WithControl = WithControl;
+
+var WithNavigation = function WithNavigation() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "Project Details",
+    description: "View and edit project configuration.",
+    navigation: /*#__PURE__*/_react.default.createElement(SampleNavigation, null)
+  }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
+};
+
+exports.WithNavigation = WithNavigation;
+
+var CenteredHeader = function CenteredHeader() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "Welcome",
+    description: "Welcome to your dashboard. Get started by exploring the features below.",
+    centerHeader: true
+  }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
+};
+
+exports.CenteredHeader = CenteredHeader;
+
+var NarrowWidth = function NarrowWidth() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "Narrow Page",
+    description: "This page uses the narrow width configuration for focused content.",
+    type: "narrow"
+  }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
+};
+
+exports.NarrowWidth = NarrowWidth;
+
+var WideWidth = function WideWidth() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "Wide Page",
+    description: "This page uses the wide width configuration for more content.",
+    type: "wide"
+  }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
+};
+
+exports.WideWidth = WideWidth;
+
+var UnboundedWidth = function UnboundedWidth() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "Unbounded Page",
+    description: "This page uses the unbounded width configuration for full-width content.",
+    type: "unbounded"
+  }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
+};
+
+exports.UnboundedWidth = UnboundedWidth;
+
+var ComplexExample = function ComplexExample() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "Complex Page Example",
+    parentPageLabel: "Advanced Features",
+    description: "This example shows multiple features working together including beta label, documentation, controls, and sidebar.",
+    beta: true,
+    documentationLabel: "Learn More",
+    documentationHref: "https://developers.cloudflare.com",
+    control: /*#__PURE__*/_react.default.createElement(SampleControl, null),
+    sidebar: /*#__PURE__*/_react.default.createElement(SampleSidebar, null),
+    sidebarPosition: "inside",
+    navigation: /*#__PURE__*/_react.default.createElement(SampleNavigation, null)
+  }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
+};
+
+exports.ComplexExample = ComplexExample;
+
+var MinimalExample = function MinimalExample() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "Minimal Page"
+  }, /*#__PURE__*/_react.default.createElement(_elements.P, null, "This is a minimal page with just a title and simple content."));
+};
+
+exports.MinimalExample = MinimalExample;
+
+var NoTitle = function NoTitle() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    description: "A page without a title, showing just the description."
+  }, /*#__PURE__*/_react.default.createElement(SampleContent, null));
+};
+
+exports.NoTitle = NoTitle;
+
+var LongContent = function LongContent() {
+  return /*#__PURE__*/_react.default.createElement(_Page.default, {
+    title: "Long Content Example",
+    description: "This page demonstrates how the component handles longer content."
+  }, /*#__PURE__*/_react.default.createElement(_elements.Div, null, Array.from({
+    length: 10
+  }, function (_, i) {
+    return /*#__PURE__*/_react.default.createElement(_componentCard.Card, {
+      key: i
+    }, /*#__PURE__*/_react.default.createElement(_elements.Div, {
+      p: 4,
+      mb: 4
+    }, /*#__PURE__*/_react.default.createElement(_elements.P, {
+      mb: 2,
+      fontWeight: "bold"
+    }, "Section ", i + 1), /*#__PURE__*/_react.default.createElement(_elements.P, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.")));
+  })));
+};
+
+exports.LongContent = LongContent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-page",
   "description": "Cloudflare Page Component",
-  "version": "10.0.16",
+  "version": "10.1.1",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@cloudflare/component-label": "^6.0.3",
-    "@cloudflare/component-link": "^9.0.16",
+    "@cloudflare/component-link": "^9.0.17",
     "@cloudflare/elements": "^4.0.3",
     "@cloudflare/intl-react": "^1.9.80"
   },

package/src/Page.stories.tsx

@@ -0,0 +1,295 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { BrowserRouter } from 'react-router-dom';
+import { Button } from '@cloudflare/component-button';
+import { Card } from '@cloudflare/component-card';
+import { Div, P } from '@cloudflare/elements';
+import Page from './Page';
+
+export default {
+  title: 'Dash/Core/Page',
+  component: Page,
+  decorators: [
+    (Story: any) => (
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
+    )
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A flexible page layout component with header, optional sidebar, and content area. Supports different width configurations and responsive behavior.'
+      }
+    }
+  }
+} as ComponentMeta<typeof Page>;
+
+// Sample content components for stories
+const SampleContent = () => (
+  <Div>
+    <P mb={4}>
+      This is sample page content. The Page component provides a consistent
+      layout structure with header, optional sidebar, and main content area.
+    </P>
+    <Card>
+      <Div p={4} mb={4}>
+        <P mb={2} fontWeight="bold">
+          Sample Card Content
+        </P>
+        <P>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </P>
+      </Div>
+    </Card>
+    <Card>
+      <Div p={4}>
+        <P mb={2} fontWeight="bold">
+          Another Card
+        </P>
+        <P>
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat.
+        </P>
+      </Div>
+    </Card>
+  </Div>
+);
+
+const SampleSidebar = () => (
+  <Card>
+    <Div p={4}>
+      <P mb={3} fontWeight="bold">
+        Sidebar Content
+      </P>
+      <P mb={2}>Quick Actions:</P>
+      <Div mb={2}>
+        <Button type="primary" width="100%">
+          Primary Action
+        </Button>
+      </Div>
+      <Div mb={2}>
+        <Button type="default" width="100%">
+          Secondary Action
+        </Button>
+      </Div>
+      <P mt={3} fontSize={1} color="gray.3">
+        Additional sidebar information and links can go here.
+      </P>
+    </Div>
+  </Card>
+);
+
+const SampleControl = () => (
+  <Div display="flex" alignItems="center">
+    <Button type="primary" mr={2}>
+      Create New
+    </Button>
+    <Button type="default">Settings</Button>
+  </Div>
+);
+
+const SampleNavigation = () => (
+  <Button
+    type="plain"
+    iconType="backward"
+    onClick={() => console.log('Navigate back')}
+  >
+    Back to Dashboard
+  </Button>
+);
+
+export const Default = () => (
+  <Page
+    title="Page Title"
+    description="This is a description of what this page is about and what users can expect to find here."
+  >
+    <SampleContent />
+  </Page>
+);
+
+export const WithParentLabel = () => (
+  <Page
+    title="Settings"
+    parentPageLabel="Account Management"
+    description="Configure your account settings and preferences."
+  >
+    <SampleContent />
+  </Page>
+);
+
+export const WithBeta = () => (
+  <Page
+    title="New Feature"
+    description="This is a beta feature that is still in development."
+    beta={true}
+  >
+    <SampleContent />
+  </Page>
+);
+
+export const WithDocumentation = () => (
+  <Page
+    title="API Documentation"
+    description="Learn how to integrate with our API endpoints."
+    documentationLabel="View API Docs"
+    documentationHref="https://developers.cloudflare.com"
+  >
+    <SampleContent />
+  </Page>
+);
+
+export const WithDocumentationButton = () => (
+  <Page
+    title="Advanced Configuration"
+    description="Configure advanced settings for your application."
+    documentationLabel="Help"
+    documentationAsButton={true}
+    onDocumentationButtonClick={() =>
+      console.log('Documentation button clicked')
+    }
+  >
+    <SampleContent />
+  </Page>
+);
+
+export const WithSidebarInside = () => (
+  <Page
+    title="Dashboard"
+    description="Overview of your account activity and quick actions."
+    sidebar={<SampleSidebar />}
+    sidebarPosition="inside"
+  >
+    <SampleContent />
+  </Page>
+);
+
+export const WithSidebarOutside = () => (
+  <Page
+    title="Analytics"
+    description="View detailed analytics and performance metrics."
+    sidebar={<SampleSidebar />}
+    sidebarPosition="outside"
+  >
+    <SampleContent />
+  </Page>
+);
+
+export const WithControl = () => (
+  <Page
+    title="User Management"
+    description="Manage users and their permissions."
+    control={<SampleControl />}
+  >
+    <SampleContent />
+  </Page>
+);
+
+export const WithNavigation = () => (
+  <Page
+    title="Project Details"
+    description="View and edit project configuration."
+    navigation={<SampleNavigation />}
+  >
+    <SampleContent />
+  </Page>
+);
+
+export const CenteredHeader = () => (
+  <Page
+    title="Welcome"
+    description="Welcome to your dashboard. Get started by exploring the features below."
+    centerHeader={true}
+  >
+    <SampleContent />
+  </Page>
+);
+
+export const NarrowWidth = () => (
+  <Page
+    title="Narrow Page"
+    description="This page uses the narrow width configuration for focused content."
+    type="narrow"
+  >
+    <SampleContent />
+  </Page>
+);
+
+export const WideWidth = () => (
+  <Page
+    title="Wide Page"
+    description="This page uses the wide width configuration for more content."
+    type="wide"
+  >
+    <SampleContent />
+  </Page>
+);
+
+export const UnboundedWidth = () => (
+  <Page
+    title="Unbounded Page"
+    description="This page uses the unbounded width configuration for full-width content."
+    type="unbounded"
+  >
+    <SampleContent />
+  </Page>
+);
+
+export const ComplexExample = () => (
+  <Page
+    title="Complex Page Example"
+    parentPageLabel="Advanced Features"
+    description="This example shows multiple features working together including beta label, documentation, controls, and sidebar."
+    beta={true}
+    documentationLabel="Learn More"
+    documentationHref="https://developers.cloudflare.com"
+    control={<SampleControl />}
+    sidebar={<SampleSidebar />}
+    sidebarPosition="inside"
+    navigation={<SampleNavigation />}
+  >
+    <SampleContent />
+  </Page>
+);
+
+export const MinimalExample = () => (
+  <Page title="Minimal Page">
+    <P>This is a minimal page with just a title and simple content.</P>
+  </Page>
+);
+
+export const NoTitle = () => (
+  <Page description="A page without a title, showing just the description.">
+    <SampleContent />
+  </Page>
+);
+
+export const LongContent = () => (
+  <Page
+    title="Long Content Example"
+    description="This page demonstrates how the component handles longer content."
+  >
+    <Div>
+      {Array.from({ length: 10 }, (_, i) => (
+        <Card key={i}>
+          <Div p={4} mb={4}>
+            <P mb={2} fontWeight="bold">
+              Section {i + 1}
+            </P>
+            <P>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur.
+            </P>
+          </Div>
+        </Card>
+      ))}
+    </Div>
+  </Page>
+);

package/src/Page.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import { createStyledComponent } from '@cloudflare/style-container';
-import { Main, Header, Div, P } from '@cloudflare/elements';
+import { Main, Header, Div, P, Span } from '@cloudflare/elements';
 import { Label } from '@cloudflare/component-label';
 import { Trans } from '@cloudflare/intl-react';
 import { Heading, Section } from './Heading';
@@ -125,6 +125,8 @@ const PageHeader = ({
                   _={'Open documentation'}
                 />
               }
+              Component={Span}
+              buttonProps={{ width: 'fit-content' }}
             >
               <Button
                 type="primary"