Remove support for sx from PointerBox component

.changeset/shy-bees-hug.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Update PointerBox component to no longer support sx

packages/react/src/Pagination/Pagination.docs.json

@@ -71,11 +71,6 @@
       "type": "function",
       "defaultValue": "(props: PageProps) => ReactNode",
       "description": "Provide a custom component or render prop to render each page link within the component."
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []

packages/react/src/PointerBox/PointerBox.tsx

@@ -1,64 +1,53 @@
 import React from 'react'
 import {ThemeContext} from 'styled-components'
 import type {BoxProps} from '../Box'
-import Box from '../Box'
 import type {CaretProps} from '../internal/components/Caret'
 import Caret from '../internal/components/Caret'
-import {get} from '../constants'
-import type {SxProp} from '../sx'
-
-// FIXME: Make this work with BetterStyledSystem types
-type MutatedSxProps = {
-  sx?: {
-    bg?: string
-    backgroundColor?: string
-    borderColor?: string
-  }
-} & SxProp
 
 export type PointerBoxProps = {
   caret?: CaretProps['location']
   bg?: CaretProps['bg']
   borderColor?: CaretProps['borderColor']
   border?: CaretProps['borderWidth']
-} & BoxProps &
-  MutatedSxProps
+} & BoxProps
 
 function PointerBox(props: PointerBoxProps) {
   // don't destructure these, just grab them
   const themeContext = React.useContext(ThemeContext)
-  const {bg, border, borderColor, theme: themeProp, sx} = props
-  const {caret, children, ...boxProps} = props
-  const {bg: sxBg, backgroundColor, ...sxRest} = sx || {}
+  const {bg, border, borderColor, theme: themeProp, caret, children, ...boxProps} = props
   const theme = themeProp || themeContext
-  const customBackground = bg || sxBg || backgroundColor
+
+  const customBackground = bg ?? 'var(--bgColor-default)'
+  const customBorderColor = borderColor ?? 'var(--borderColor-default)'
+  const customBorderWidth = border ?? 'var(--borderWidth-default)'
 
   const caretProps = {
-    bg: bg || sx?.bg || sx?.backgroundColor,
-    borderColor: borderColor || sx?.borderColor,
+    bg,
+    borderColor,
     borderWidth: border,
     location: caret,
     theme,
   }
 
-  const defaultBoxProps = {borderWidth: '1px', borderStyle: 'solid', borderColor: 'border.default', borderRadius: 2}
-
   return (
-    <Box
-      {...defaultBoxProps}
-      {...boxProps}
-      sx={{
-        ...sxRest,
-        '--custom-bg': get(`colors.${customBackground}`)({theme}),
+    <div
+      style={{
+        borderWidth: customBorderWidth,
+        borderStyle: 'solid',
+        borderColor: customBorderColor,
+        borderRadius: 'var(--borderRadius-medium)',
+        position: 'relative',
+        background: customBackground,
+        ...(boxProps.style ?? {}),
         backgroundImage: customBackground
           ? `linear-gradient(var(--custom-bg), var(--custom-bg)), linear-gradient(${theme.colors.canvas.default}, ${theme.colors.canvas.default})`
           : undefined,
-        position: 'relative',
       }}
+      {...boxProps}
     >
       {children}
       <Caret {...caretProps} />
-    </Box>
+    </div>
   )
 }