Export PageLayout from main bundle (#1882)

* Export PageLayout from main bundle

* Create odd-apes-guess.md

* Add PageLayout to sidenav

* Update .changeset/odd-apes-guess.md

Co-authored-by: Rez <rezrah@github.com>

* Update PageLayout docs

Co-authored-by: Rez <rezrah@github.com>

.changeset/odd-apes-guess.md

@@ -0,0 +1,12 @@
+---
+"@primer/react": major
+---
+
+`PageLayout` is being graduated from the `drafts` bundle to the `main` bundle. 
+
+To upgrade, rewrite your imports accordingly:
+
+```diff
+- import {PageLayout} from '@primer/react/drafts'
++ import {PageLayout} from '@primer/react'
+```

docs/content/drafts/PageLayout.mdx → docs/content/PageLayout.mdx

@@ -7,7 +7,7 @@ storybook: https://primer.style/react/storybook?path=/story/layout-pagelayout--p
 ---
 
 ```js
-import {PageLayout} from '@primer/react/drafts'
+import {PageLayout} from '@primer/react'
 ```
 
 ## Examples
@@ -20,7 +20,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 
 ### Default
 
-```jsx live drafts
+```jsx live
 <PageLayout>
   <PageLayout.Header>
     <Placeholder label="Header" height={64} />
@@ -39,7 +39,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 
 ### With dividers
 
-```jsx live drafts
+```jsx live
 <PageLayout>
   <PageLayout.Header divider="line">
     <Placeholder label="Header" height={64} />
@@ -58,7 +58,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 
 ### With pane on left
 
-```jsx live drafts
+```jsx live
 <PageLayout>
   <PageLayout.Header>
     <Placeholder label="Header" height={64} />
@@ -77,7 +77,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 
 ### With condensed spacing
 
-```jsx live drafts
+```jsx live
 <PageLayout padding="condensed" rowGap="condensed" columnGap="condensed">
   <PageLayout.Header>
     <Placeholder label="Header" height={64} />
@@ -96,7 +96,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 
 ### Without header or footer
 
-```jsx live drafts
+```jsx live
 <PageLayout>
   <PageLayout.Content>
     <Placeholder label="Content" height={240} />

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -87,6 +87,8 @@
       url: /Overlay
     - title: Pagehead
       url: /Pagehead
+    - title: PageLayout
+      url: /PageLayout
     - title: Pagination
       url: /Pagination
     - title: PointerBox

src/drafts/index.ts

@@ -11,4 +11,3 @@ export * from '../Button2'
 export * from '../ActionMenu2'
 export * from '../DropdownMenu2'
 export * from '../Label2'
-export * from '../PageLayout'

src/index.ts

@@ -8,6 +8,14 @@ export type {ThemeProviderProps} from './ThemeProvider'
 // Layout
 export {default as Box} from './Box'
 export type {BoxProps} from './Box'
+export {PageLayout} from './PageLayout'
+export type {
+  PageLayoutProps,
+  PageLayoutHeaderProps,
+  PageLayoutContentProps,
+  PageLayoutPaneProps,
+  PageLayoutFooterProps
+} from './PageLayout'
 
 // Hooks
 export {default as useDetails} from './hooks/useDetails'