diff --git a/package-lock.json b/package-lock.json
index 52712a1536d..823ea540d8d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -79,7 +79,7 @@
         "eslint-plugin-jsx-a11y": "6.4.1",
         "eslint-plugin-mdx": "1.15.1",
         "eslint-plugin-prettier": "3.4.0",
-        "eslint-plugin-primer-react": "0.6.1",
+        "eslint-plugin-primer-react": "0.7.0",
         "eslint-plugin-react": "7.24.0",
         "eslint-plugin-react-hooks": "4.2.0",
         "jest": "27.0.4",
@@ -18504,9 +18504,9 @@
       }
     },
     "node_modules/eslint-plugin-primer-react": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-primer-react/-/eslint-plugin-primer-react-0.6.1.tgz",
-      "integrity": "sha512-sinHj+soe1LItPJZDPqK443viPGfuuT3NLk0dH8s2QMvmO0deL77aMD2/N3gP6iYg5eEOkVsp38eFkUSTaXm4w==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-primer-react/-/eslint-plugin-primer-react-0.7.0.tgz",
+      "integrity": "sha512-ERzMiCVPBwfG57xpSVjMuPg093GB76xtDLOiHtnYcME+40yOSKsI4lor9QnN7OjnEMj8AHgns4ixpBN8iK23nA==",
       "dev": true,
       "dependencies": {
         "@styled-system/props": "^5.1.5",
@@ -51952,9 +51952,9 @@
       }
     },
     "eslint-plugin-primer-react": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-primer-react/-/eslint-plugin-primer-react-0.6.1.tgz",
-      "integrity": "sha512-sinHj+soe1LItPJZDPqK443viPGfuuT3NLk0dH8s2QMvmO0deL77aMD2/N3gP6iYg5eEOkVsp38eFkUSTaXm4w==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-primer-react/-/eslint-plugin-primer-react-0.7.0.tgz",
+      "integrity": "sha512-ERzMiCVPBwfG57xpSVjMuPg093GB76xtDLOiHtnYcME+40yOSKsI4lor9QnN7OjnEMj8AHgns4ixpBN8iK23nA==",
       "dev": true,
       "requires": {
         "@styled-system/props": "^5.1.5",
diff --git a/package.json b/package.json
index f4151d2758b..51a0badd3be 100644
--- a/package.json
+++ b/package.json
@@ -114,7 +114,7 @@
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-mdx": "1.15.1",
     "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-primer-react": "0.6.1",
+    "eslint-plugin-primer-react": "0.7.0",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "jest": "27.0.4",
diff --git a/src/__tests__/Dropdown.types.test.tsx b/src/__tests__/Dropdown.types.test.tsx
index 2288706a8e9..93d40b5053c 100644
--- a/src/__tests__/Dropdown.types.test.tsx
+++ b/src/__tests__/Dropdown.types.test.tsx
@@ -9,11 +9,12 @@ export function shouldNotAcceptSystemProps() {
   return (
     <>
       {/* @ts-expect-error system props should not be accepted */}
-      <Dropdown.Caret backgroundColor="thistle" />,{/* @ts-expect-error system props should not be accepted */}
-      <Dropdown.Menu backgroundColor="thistle" />,{/* @ts-expect-error system props should not be accepted */}
-      <Dropdown.Item backgroundColor="thistle" />,
-      {/* this will not error for now, but once Button removes styled system props, this line should
-        be updated with a @ts-expect-error */}
+      <Dropdown.Caret backgroundColor="thistle" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Dropdown.Menu backgroundColor="thistle" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Dropdown.Item backgroundColor="thistle" />
+      {/* @ts-expect-error system props should not be accepted */}
       <Dropdown.Button backgroundColor="thistle" />
     </>
   )
diff --git a/src/stories/ConfirmationDialog.stories.tsx b/src/stories/ConfirmationDialog.stories.tsx
index 9aba5eb9161..69e9619f4e9 100644
--- a/src/stories/ConfirmationDialog.stories.tsx
+++ b/src/stories/ConfirmationDialog.stories.tsx
@@ -64,16 +64,16 @@ export const ShorthandHook = () => {
   )
   return (
     <Box display="flex" flexDirection="column" alignItems="flex-start">
-      <Button mb={2} onClick={onButtonClick}>
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
         Turn me green!
       </Button>
-      <Button mb={2} onClick={onButtonClick}>
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
         Turn me green!
       </Button>
-      <Button mb={2} onClick={onButtonClick}>
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
         Turn me green!
       </Button>
-      <Button mb={2} onClick={onButtonClick}>
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
         Turn me green!
       </Button>
     </Box>
diff --git a/src/stories/useFocusTrap.stories.tsx b/src/stories/useFocusTrap.stories.tsx
index 16be0f7c612..3a09bfa714e 100644
--- a/src/stories/useFocusTrap.stories.tsx
+++ b/src/stories/useFocusTrap.stories.tsx
@@ -165,7 +165,7 @@ export const CustomInitialFocus = () => {
     <>
       <HelperGlobalStyling />
       <Box display="flex" flexDirection="column" alignItems="flex-start">
-        <Flash mb={3}>
+        <Flash sx={{mb: 3}}>
           This story is the same as the `Focus Trap` story, except, when the trap zone is activated, the
           &ldquo;Elderberry&rdquo; button will receive the initial focus (if the trap zone container does not already
           have focus).
@@ -302,7 +302,7 @@ export const MultipleFocusTraps = () => {
     <>
       <HelperGlobalStyling />
       <Box display="flex" flexDirection="column" alignItems="flex-start">
-        <Flash mb={3}>
+        <Flash sx={{mb: 3}}>
           This story demonstrates the global nature of focus traps. When a focus trap is enabled, if there is already an
           active focus trap, it becomes suspended and pushed onto a stack. Once the newly-active focus trap is disabled,
           the most recently-suspended trap will reactivate. Suspended focus traps can be disabled, causing them to be
diff --git a/src/stories/useFocusZone.stories.tsx b/src/stories/useFocusZone.stories.tsx
index 544f1520222..03e8f1435ab 100644
--- a/src/stories/useFocusZone.stories.tsx
+++ b/src/stories/useFocusZone.stories.tsx
@@ -58,7 +58,7 @@ export const BasicFocusZone = () => {
         <Box position="absolute" right={5} top={2}>
           Last key pressed: {lastKey}
         </Box>
-        <ToggleButton mb={3} onClick={toggleFz}>
+        <ToggleButton onClick={toggleFz} sx={{mb: 3}}>
           {fzEnabled ? 'Disable' : 'Enable'} Focus Zone
         </ToggleButton>
         <MarginButton>Apple</MarginButton>
@@ -396,7 +396,7 @@ export const SpecialSituations = () => {
     <>
       <HelperGlobalStyling />
       <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Flash mb={3}>
+        <Flash sx={{mb: 3}}>
           This story is very esoteric! It only exists to show some of the nuance of the arrow key focus behavior in
           different situations. Focus treatment within your component should be evaluated for your particular UX using
           the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard">ARIA guidelines</a>.
@@ -491,7 +491,7 @@ export const ChangingSubtree = () => {
     <>
       <HelperGlobalStyling />
       <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Flash mb={3}>
+        <Flash sx={{mb: 3}}>
           This story demonstrates that focusZone is consistent even when the container&rsquo;s subtree changes.
         </Flash>
         <Box position="absolute" right={5} top={2}>
@@ -620,7 +620,7 @@ export const ActiveDescendant = () => {
     <>
       <HelperGlobalStyling />
       <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Flash mb={3}>
+        <Flash sx={{mb: 3}}>
           This story demonstrates using the `aria-activedescendant` pattern for managing both a focused element and an
           active element. Below, you can focus the input box then use the up/down arrow keys to change the active
           descendant (dark blue outline).