@cloudflare/component-page 10.1.21 → 11.0.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log
 
+## 11.0.1
+
+### Patch Changes
+
+- fc455fa761: Require explicit opt-in before injecting source-file debug attributes into package build artifacts.
+- Updated dependencies [fc455fa761]
+  - @cloudflare/component-label@6.0.7
+  - @cloudflare/component-link@10.0.6
+  - @cloudflare/elements@4.0.7
+  - @cloudflare/util-cl1-compat-router@3.0.1
+
+## 11.0.0
+
+### Major Changes
+
+- 7ecedcf71d: Use router location from the CL1 compat router context and use it for page autofocus behavior while removing the `react-router-dom` peer dependency from the page component.
+
 ## 10.1.21
 
 ### Patch Changes

package/README.md

@@ -15,17 +15,34 @@ $ yarn add @cloudflare/component-page
 
 ```jsx
 import React from 'react';
-import { Page } from '../../src';
+import { Page } from '@cloudflare/component-page';
+import { CL1CompatRouterProvider } from '@cloudflare/util-cl1-compat-router';
+
+const RouterLink = ({ to, ...props }) => <a {...props} href={to} />;
+const navigate = to => {
+  window.location.assign(to);
+};
+
+const location = {
+  pathname: window.location.pathname,
+  search: window.location.search,
+  hash: window.location.hash
+};
 
 const PageComponent = () => (
-  <Page type="wide" title="Title" description="Subtitle" beta>
+  <CL1CompatRouterProvider
+    location={location}
+    navigate={navigate}
+    linkComponent={RouterLink}
+  >
+    <Page type="wide" title="Title" description="Subtitle" beta>
       <div>Awesome page content.</div>
       <div>Please buy our things.</div>
-  </Page>
+    </Page>
+  </CL1CompatRouterProvider>
 );
 
 export default PageComponent;
 
 ```
 
-

package/es/Heading.js

@@ -96,8 +96,6 @@ export function Heading(_ref5) {
 
     return /*#__PURE__*/React.createElement(Heading, _extends({
       role: role
-    }, props, {
-      "data-source-file": "@cloudflare/component-page:src/Heading.tsx:104"
-    }));
+    }, props));
   });
 }

package/es/Page.js

@@ -7,7 +7,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import React, { useEffect, useRef } from 'react';
-import { useLocation } from 'react-router-dom';
 import { createStyledComponent } from '@cloudflare/style-container';
 import { Main, Header, Div, P, Span } from '@cloudflare/elements';
 import { Label } from '@cloudflare/component-label';
@@ -18,6 +17,7 @@ import { useIsMobile } from '@cloudflare/util-responsive';
 import { Icon } from '@cloudflare/component-icon';
 import { Button } from '@cloudflare/component-button';
 import { Tooltip } from '@cloudflare/component-tooltip';
+import { useLocation } from '@cloudflare/util-cl1-compat-router';
 var maxWidthByType = {
   narrow: '64em',
   wide: '79em',
@@ -46,68 +46,55 @@ var PageHeader = _ref => {
   var titlesCount = Math.min([title, description].filter(Boolean).length, 2);
   var isMobile = useIsMobile();
   return /*#__PURE__*/React.createElement(React.Fragment, null, navigation && !isMobile && /*#__PURE__*/React.createElement(Div, {
-    mb: 4,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:72"
+    mb: 4
   }, navigation), /*#__PURE__*/React.createElement(Div, {
     display: control ? ['block', 'flex'] : 'block',
     justifyContent: "space-between",
-    mb: headerVisible ? 3 : 0,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:73"
+    mb: headerVisible ? 3 : 0
   }, /*#__PURE__*/React.createElement(Header, {
-    textAlign: centerHeader ? 'center' : undefined,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:78"
+    textAlign: centerHeader ? 'center' : undefined
   }, parentPageLabel && /*#__PURE__*/React.createElement(P, {
     my: 0,
     lineHeight: 1.5,
     color: "gray.3",
     fontWeight: 600,
-    innerRef: parentPageLabelRef,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:80"
+    innerRef: parentPageLabelRef
   }, parentPageLabel), title && /*#__PURE__*/React.createElement(Div, {
     display: "flex",
-    alignItems: "center",
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:91"
+    alignItems: "center"
   }, /*#__PURE__*/React.createElement(Heading, {
     mt: 0,
     mb: 2,
-    innerRef: titleRef,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:92"
+    innerRef: titleRef
   }, isMobile && navigation && /*#__PURE__*/React.isValidElement(navigation) && /*#__PURE__*/React.createElement(Link, {
     mr: 2,
-    onClick: navigation.props.onClick,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:94"
+    onClick: navigation.props.onClick
   }, /*#__PURE__*/React.createElement(Icon, {
-    type: "backward",
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:95"
+    type: "backward"
   })), title), beta && /*#__PURE__*/React.createElement(Label, {
     hue: "orange",
     mx: 2,
-    verticalAlign: "middle",
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:101"
+    verticalAlign: "middle"
   }, /*#__PURE__*/React.createElement(Trans, {
     _: "Beta",
-    id: "common.beta",
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:102"
+    id: "common.beta"
   }))), description && /*#__PURE__*/React.createElement(P, {
     color: "gray.3",
     mt: 0,
     mb: documentationHref ? 2 : 3,
     lineHeight: 1.25,
     fontWeight: 400,
-    wordBreak: "break-word",
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:108"
+    wordBreak: "break-word"
   }, description), documentationAsButton && !isMobile ? /*#__PURE__*/React.createElement(Tooltip, {
     place: "right",
     message: /*#__PURE__*/React.createElement(Trans, {
       id: "common.open_documentation",
-      _: 'Open documentation',
-      "data-source-file": "@cloudflare/component-page:src/Page.tsx:123"
+      _: 'Open documentation'
     }),
     Component: Span,
     buttonProps: {
       width: 'fit-content'
-    },
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:120"
+    }
   }, /*#__PURE__*/React.createElement(Button, {
     type: "primary",
     borderRadius: '20vh',
@@ -116,23 +103,19 @@ var PageHeader = _ref => {
     onClick: onDocumentationButtonClick,
     px: 3,
     py: 1,
-    ariaLabel: "open documentation - ".concat(documentationLabel),
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:131"
+    ariaLabel: "open documentation - ".concat(documentationLabel)
   }, documentationLabel)) : documentationHref && /*#__PURE__*/React.createElement(DocumentationLink, {
     fontSize: 2,
     iconSize: 14,
     mb: [3, 0],
     href: documentationHref,
-    display: "inline-block",
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:146"
+    display: "inline-block"
   }, documentationLabel ? documentationLabel : /*#__PURE__*/React.createElement(Trans, {
     id: "common.documentation",
-    _: 'Documentation',
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:156"
+    _: 'Documentation'
   }))), control), /*#__PURE__*/React.createElement(Section, {
     level: titlesCount,
-    offset: maxPageTitles - titlesCount,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:164"
+    offset: maxPageTitles - titlesCount
   }, children));
 };
 
@@ -180,21 +163,22 @@ var Page = _ref2 => {
   } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded);
 
-  var location = useLocation();
   var skipTargetRef = useRef(null);
-  var path = location === null || location === void 0 ? void 0 : location.pathname;
+  var {
+    pathname
+  } = useLocation();
   useEffect(() => {
     // If autofocus is enabled, then focus will move to the title block when
     // the page is navigated to (but not when the dash is first loaded)
     if (autofocus) {
       if (!firstPage) {
-        firstPage = path;
-      } else if (firstPage !== path || !firstLoad) {
+        firstPage = pathname;
+      } else if (firstPage !== pathname || !firstLoad) {
         focus(skipTargetRef.current);
         firstLoad = false;
       }
     }
-  }, [path]);
+  }, [pathname]);
   var sidebarInside = sidebarPosition === 'inside';
   return /*#__PURE__*/React.createElement(Main, _extends({
     "data-testid": testId,
@@ -202,25 +186,20 @@ var Page = _ref2 => {
     display: sidebar && sidebarInside ? undefined : 'flex',
     py: 4,
     mb: 4
-  }, props, {
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:237"
-  }), /*#__PURE__*/React.createElement(Div, {
+  }, props), /*#__PURE__*/React.createElement(Div, {
     ml: "auto",
     mr: sidebar && !sidebarInside ? 0 : 'auto',
     display: sidebar && sidebarInside ? ['block', 'block', 'flex'] : undefined,
     width: type === 'unbounded' ? '100%' : '90%',
-    maxWidth: maxWidthByType[type] || maxWidthByType.narrow,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:245"
+    maxWidth: maxWidthByType[type] || maxWidthByType.narrow
   }, /*#__PURE__*/React.createElement(Div, {
     width: sidebar && sidebarInside ? [1, 1, 2 / 3] : undefined,
     pr: sidebar && sidebarInside ? [0, 0, 3] : undefined,
-    mt: 0,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:254"
+    mt: 0
   }, /*#__PURE__*/React.createElement("a", {
     id: "skipTarget",
     ref: skipTargetRef,
-    tabIndex: -1,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:259"
+    tabIndex: -1
   }), /*#__PURE__*/React.createElement(PageHeader, {
     title: title,
     parentPageLabel: parentPageLabel,
@@ -235,13 +214,11 @@ var Page = _ref2 => {
     parentPageLabelRef: parentPageLabelRef,
     navigation: navigation,
     onDocumentationButtonClick: onDocumentationButtonClick,
-    documentationAsButton: documentationAsButton,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:261"
+    documentationAsButton: documentationAsButton
   })), sidebar && sidebarInside && /*#__PURE__*/React.createElement(Div, {
     width: [1, 1, 1 / 3],
     pl: [0, 0, 3],
-    pt: [4, 4, 0],
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:279"
+    pt: [4, 4, 0]
   }, sidebar)), !sidebarInside && sidebar);
 };
 

package/es/Page.stories.js

@@ -1,17 +1,39 @@
+var _excluded = ["to", "children"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 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 { CL1CompatRouterProvider } from '@cloudflare/util-cl1-compat-router';
 import Page from './Page';
+var StoryLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  var {
+    to,
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("a", _extends({}, props, {
+    href: to,
+    ref: ref
+  }), children);
+});
+StoryLink.displayName = 'StoryLink';
+var storyLocation = {
+  pathname: '/'
+};
+
+var storyNavigate = () => undefined;
+
 export default {
   title: 'Dash/Core/Page',
   component: Page,
-  decorators: [Story => /*#__PURE__*/React.createElement(BrowserRouter, {
-    "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:14"
-  }, /*#__PURE__*/React.createElement(Story, {
-    "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:15"
-  }))],
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -19,208 +41,137 @@ export default {
         component: 'A flexible page layout component with header, optional sidebar, and content area. Supports different width configurations and responsive behavior.'
       }
     }
-  }
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement(CL1CompatRouterProvider, {
+    location: storyLocation,
+    navigate: storyNavigate,
+    linkComponent: StoryLink
+  }, /*#__PURE__*/React.createElement(Story, null))]
 }; // Sample content components for stories
 
-var SampleContent = () => /*#__PURE__*/React.createElement(Div, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:32"
-}, /*#__PURE__*/React.createElement(P, {
-  mb: 4,
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:33"
-}, "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, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:37"
-}, /*#__PURE__*/React.createElement(Div, {
+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,
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:38"
+  mb: 4
 }, /*#__PURE__*/React.createElement(P, {
   mb: 2,
-  fontWeight: "bold",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:39"
-}, "Sample Card Content"), /*#__PURE__*/React.createElement(P, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:42"
-}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/React.createElement(Card, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:48"
-}, /*#__PURE__*/React.createElement(Div, {
-  p: 4,
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:49"
+  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",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:50"
-}, "Another Card"), /*#__PURE__*/React.createElement(P, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:53"
-}, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."))));
+  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, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:63"
-}, /*#__PURE__*/React.createElement(Div, {
-  p: 4,
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:64"
+var SampleSidebar = () => /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Div, {
+  p: 4
 }, /*#__PURE__*/React.createElement(P, {
   mb: 3,
-  fontWeight: "bold",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:65"
+  fontWeight: "bold"
 }, "Sidebar Content"), /*#__PURE__*/React.createElement(P, {
-  mb: 2,
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:68"
+  mb: 2
 }, "Quick Actions:"), /*#__PURE__*/React.createElement(Div, {
-  mb: 2,
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:69"
+  mb: 2
 }, /*#__PURE__*/React.createElement(Button, {
   type: "primary",
-  width: "100%",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:70"
+  width: "100%"
 }, "Primary Action")), /*#__PURE__*/React.createElement(Div, {
-  mb: 2,
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:74"
+  mb: 2
 }, /*#__PURE__*/React.createElement(Button, {
   type: "default",
-  width: "100%",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:75"
+  width: "100%"
 }, "Secondary Action")), /*#__PURE__*/React.createElement(P, {
   mt: 3,
   fontSize: 1,
-  color: "gray.3",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:79"
+  color: "gray.3"
 }, "Additional sidebar information and links can go here.")));
 
 var SampleControl = () => /*#__PURE__*/React.createElement(Div, {
   display: "flex",
-  alignItems: "center",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:87"
+  alignItems: "center"
 }, /*#__PURE__*/React.createElement(Button, {
   type: "primary",
-  mr: 2,
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:88"
+  mr: 2
 }, "Create New"), /*#__PURE__*/React.createElement(Button, {
-  type: "default",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:91"
+  type: "default"
 }, "Settings"));
 
 var SampleNavigation = () => /*#__PURE__*/React.createElement(Button, {
   type: "plain",
   iconType: "backward",
-  onClick: () => console.log('Navigate back'),
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:96"
+  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.",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:106"
-}, /*#__PURE__*/React.createElement(SampleContent, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:110"
-}));
+  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.",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:115"
-}, /*#__PURE__*/React.createElement(SampleContent, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:120"
-}));
+  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,
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:125"
-}, /*#__PURE__*/React.createElement(SampleContent, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:130"
-}));
+  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",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:135"
-}, /*#__PURE__*/React.createElement(SampleContent, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:141"
-}));
+  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'),
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:146"
-}, /*#__PURE__*/React.createElement(SampleContent, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:155"
-}));
+  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, {
-    "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:163"
-  }),
-  sidebarPosition: "inside",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:160"
-}, /*#__PURE__*/React.createElement(SampleContent, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:166"
-}));
+  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, {
-    "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:174"
-  }),
-  sidebarPosition: "outside",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:171"
-}, /*#__PURE__*/React.createElement(SampleContent, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:177"
-}));
+  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, {
-    "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:185"
-  }),
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:182"
-}, /*#__PURE__*/React.createElement(SampleContent, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:187"
-}));
+  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, {
-    "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:195"
-  }),
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:192"
-}, /*#__PURE__*/React.createElement(SampleContent, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:197"
-}));
+  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,
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:202"
-}, /*#__PURE__*/React.createElement(SampleContent, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:207"
-}));
+  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",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:212"
-}, /*#__PURE__*/React.createElement(SampleContent, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:217"
-}));
+  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",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:222"
-}, /*#__PURE__*/React.createElement(SampleContent, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:227"
-}));
+  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",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:232"
-}, /*#__PURE__*/React.createElement(SampleContent, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:237"
-}));
+  type: "unbounded"
+}, /*#__PURE__*/React.createElement(SampleContent, null));
 export var ComplexExample = () => /*#__PURE__*/React.createElement(Page, {
   title: "Complex Page Example",
   parentPageLabel: "Advanced Features",
@@ -228,51 +179,28 @@ export var ComplexExample = () => /*#__PURE__*/React.createElement(Page, {
   beta: true,
   documentationLabel: "Learn More",
   documentationHref: "https://developers.cloudflare.com",
-  control: /*#__PURE__*/React.createElement(SampleControl, {
-    "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:249"
-  }),
-  sidebar: /*#__PURE__*/React.createElement(SampleSidebar, {
-    "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:250"
-  }),
+  control: /*#__PURE__*/React.createElement(SampleControl, null),
+  sidebar: /*#__PURE__*/React.createElement(SampleSidebar, null),
   sidebarPosition: "inside",
-  navigation: /*#__PURE__*/React.createElement(SampleNavigation, {
-    "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:252"
-  }),
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:242"
-}, /*#__PURE__*/React.createElement(SampleContent, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:254"
-}));
+  navigation: /*#__PURE__*/React.createElement(SampleNavigation, null)
+}, /*#__PURE__*/React.createElement(SampleContent, null));
 export var MinimalExample = () => /*#__PURE__*/React.createElement(Page, {
-  title: "Minimal Page",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:259"
-}, /*#__PURE__*/React.createElement(P, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:260"
-}, "This is a minimal page with just a title and simple content."));
+  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.",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:265"
-}, /*#__PURE__*/React.createElement(SampleContent, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:266"
-}));
+  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.",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:271"
-}, /*#__PURE__*/React.createElement(Div, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:275"
-}, Array.from({
+  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,
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:277"
+  key: i
 }, /*#__PURE__*/React.createElement(Div, {
   p: 4,
-  mb: 4,
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:278"
+  mb: 4
 }, /*#__PURE__*/React.createElement(P, {
   mb: 2,
-  fontWeight: "bold",
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:279"
-}, "Section ", i + 1), /*#__PURE__*/React.createElement(P, {
-  "data-source-file": "@cloudflare/component-page:src/Page.stories.tsx:282"
-}, "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."))))));
+  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."))))));