Revert "Remove Box usage and sx prop from PageLayout (#6872)"

This reverts commit 4e797ef.

Author: francinelucca

.changeset/gold-geckos-send.md

@@ -1,7 +1,6 @@
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import {Placeholder} from '../Placeholder'
 import {PageLayout} from './PageLayout'
-import classes from './PageLayout.dev.stories.module.css'
 
 const meta: Meta = {
   title: 'Components/PageLayout/Dev',
@@ -347,11 +346,11 @@ export const Default: StoryFn = args => (
     padding={args.padding}
     rowGap={args.rowGap}
     columnGap={args.columnGap}
-    className={classes.DebugPageLayout}
+    sx={{border: '1px solid red'}}
   >
     <PageLayout.Header
       padding={args['Header.padding']}
-      className={classes.SuccessColor}
+      sx={{color: 'var(--fgColor-success)'}}
       divider={{
         narrow: args['Header.divider.narrow'],
         regular: args['Header.divider.regular'],
@@ -366,7 +365,7 @@ export const Default: StoryFn = args => (
       <Placeholder height={args['Header placeholder height']} label="Header" />
     </PageLayout.Header>
     <PageLayout.Content
-      className={classes.SuccessColor}
+      sx={{color: 'var(--fgColor-success)'}}
       width={args['Content.width']}
       padding={args['Content.padding']}
       hidden={{
@@ -378,7 +377,7 @@ export const Default: StoryFn = args => (
       <Placeholder height={args['Content placeholder height']} label="Content" />
     </PageLayout.Content>
     <PageLayout.Pane
-      className={classes.SuccessColor}
+      sx={{color: 'var(--fgColor-success)'}}
       position={{
         narrow: args['Pane.position.narrow'],
         regular: args['Pane.position.regular'],
@@ -403,7 +402,7 @@ export const Default: StoryFn = args => (
       <Placeholder height={args['Pane placeholder height']} label="Pane" />
     </PageLayout.Pane>
     <PageLayout.Footer
-      className={classes.SuccessColor}
+      sx={{color: 'var(--fgColor-success)'}}
       padding={args['Footer.padding']}
       divider={{
         narrow: args['Footer.divider.narrow'],

packages/react/src/PageLayout/PageLayout.dev.stories.module.css

@@ -325,23 +325,3 @@ body[data-page-layout-dragging='true'] * {
   /* stylelint-disable-next-line primer/spacing */
   padding: var(--spacing);
 }
-
-.DraggableHandle {
-  position: absolute;
-  inset: 0 -2px;
-  cursor: col-resize;
-  background-color: transparent;
-  transition-delay: 0.1s;
-}
-
-.DraggableHandle:hover {
-  background-color: var(--bgColor-neutral-muted);
-}
-
-.DraggableHandle[data-dragging='true'] {
-  background-color: var(--bgColor-accent-emphasis);
-}
-
-.DraggableHandle[data-dragging='true']:hover {
-  background-color: var(--bgColor-accent-emphasis);
-}

packages/react/src/PageLayout/PageLayout.dev.stories.tsx

@@ -349,6 +349,7 @@ export const Default: StoryFn = args => (
     padding={args.padding}
     rowGap={args.rowGap}
     columnGap={args.columnGap}
+    sx={args.sx}
   >
     {args['Render header?'] ? (
       <PageLayout.Header