Revert "decouple the resize handle from the vertical divider"

This reverts commit 2a2d121.

Author: japf

src/PageLayout/PageLayout.stories.tsx

@@ -701,6 +701,7 @@ export const ResizablePane: Story = args => (
           regular: args['Pane.position.regular'],
           wide: args['Pane.position.wide']
         }}
+        divider="line"
         canResizePane={true}
         paneWidthStorageKey="primer-react.pane-width"
       >

src/PageLayout/PageLayout.tsx

@@ -184,7 +184,14 @@ const verticalDividerVariants = {
   }
 }
 
-const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({variant = 'none', sx = {}}) => {
+const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({
+  variant = 'none',
+  canResize,
+  isResizing,
+  onClick,
+  onMouseDown,
+  sx = {}
+}) => {
   const responsiveVariant = useResponsiveValue(variant, 'none')
   return (
     <Box
@@ -196,66 +203,45 @@ const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({varia
         },
         sx
       )}
-    ></Box>
-  )
-}
-
-// ----------------------------------------------------------------------------
-// ResizeHandle (internal)
-
-type ResizeHandleProps = {
-  isResizing: boolean
-  onClick: (e: React.MouseEvent) => void
-  onMouseDown: (e: React.MouseEvent) => void
-} & SxProp
-
-const ResizeHandle: React.FC<React.PropsWithChildren<ResizeHandleProps>> = ({isResizing, onClick, onMouseDown, sx}) => {
-  return (
-    <Box
-      sx={merge<BetterSystemStyleObject>(
-        {
-          height: '100%',
-          position: 'relative'
-        },
-        sx
-      )}
     >
-      <Box
-        onMouseDown={onMouseDown}
-        onClick={onClick}
-        sx={{
-          width: '16px',
-          height: '100%',
-          display: 'flex',
-          justifyContent: 'center',
-          position: 'absolute',
-          transform: 'translateX(50%)',
-          right: 0,
-          opacity: isResizing ? 1 : 0,
-          cursor: 'col-resize',
-          '&:hover': {
-            animation: isResizing ? 'none' : 'resizer-appear 80ms 300ms both',
-
-            '@keyframes resizer-appear': {
-              from: {
-                opacity: 0
-              },
-
-              to: {
-                opacity: 1
-              }
-            }
-          }
-        }}
-      >
+      {canResize && (
         <Box
+          onMouseDown={onMouseDown}
+          onClick={onClick}
           sx={{
-            backgroundColor: 'accent.fg',
-            width: '1px',
-            height: '100%'
+            width: '16px',
+            height: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            position: 'absolute',
+            transform: 'translateX(50%)',
+            right: 0,
+            opacity: isResizing ? 1 : 0,
+            cursor: 'col-resize',
+            '&:hover': {
+              animation: isResizing ? 'none' : 'resizer-appear 80ms 300ms both',
+
+              '@keyframes resizer-appear': {
+                from: {
+                  opacity: 0
+                },
+
+                to: {
+                  opacity: 1
+                }
+              }
+            }
           }}
-        />
-      </Box>
+        >
+          <Box
+            sx={{
+              backgroundColor: 'accent.fg',
+              width: '1px',
+              height: '100%'
+            }}
+          />
+        </Box>
+      )}
     </Box>
   )
 }
@@ -581,14 +567,6 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           onMouseDown={onMouseDown}
           sx={{[position === 'end' ? 'marginRight' : 'marginLeft']: SPACING_MAP[columnGap]}}
         />
-        {canResizePane && (
-          <ResizeHandle
-            isResizing={isResizing}
-            onClick={onClick}
-            onMouseDown={onMouseDown}
-            sx={{[position === 'end' ? 'marginRight' : 'marginLeft']: SPACING_MAP[columnGap]}}
-          />
-        )}
         <Box
           ref={paneRef}
           sx={(theme: Theme) => ({