Bump @primer/react from 37.31.0 to 38.0.0 (#58243)

Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Kevin Heis <heiskr@users.noreply.github.com> Co-authored-by: Robert Sese <734194+rsese@users.noreply.github.com>
2025-12-19 18:10:59 -05:00 · 2025-11-03 16:02:13 +00:00
parent 74c18cadd0
commit 94e9c5ac4a
24 changed files with 326 additions and 278 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
        "@primer/live-region-element": "^0.7.2",
        "@primer/octicons": "^19.19.0",
        "@primer/octicons-react": "^19.14.0",
-        "@primer/react": "^37.31.0",
+        "@primer/react": "^38.0.0",
        "accept-language-parser": "^1.5.0",
        "ajv": "^8.17.1",
        "ajv-errors": "^3.0.0",
@@ -240,6 +240,7 @@
      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.2.0.tgz",
      "integrity": "sha512-1LFfa/qnMQvEOAdzlQymH0ulepxbxnCYAKJZfMci/5XJyIHWgEYnDmgnKakbTh7CH2tFQ5O60oYDvns4i9RAIg==",
      "dev": true,
+      "peer": true,
      "dependencies": {
        "@octokit/auth-token": "^4.0.0",
        "@octokit/graphql": "^7.1.0",
@@ -400,7 +401,6 @@
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "peer": true,
      "dependencies": {
        "@jridgewell/gen-mapping": "^0.3.5",
        "@jridgewell/trace-mapping": "^0.3.24"
@@ -586,7 +586,6 @@
      "version": "7.23.3",
      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.3.tgz",
      "integrity": "sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ==",
-      "peer": true,
      "engines": {
        "node": ">=6.9.0"
      }
@@ -624,14 +623,12 @@
    "node_modules/@babel/core/node_modules/convert-source-map": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "peer": true
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
    },
    "node_modules/@babel/core/node_modules/semver": {
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "peer": true,
      "bin": {
        "semver": "bin/semver.js"
      }
@@ -665,7 +662,6 @@
      "version": "7.22.15",
      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz",
      "integrity": "sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==",
-      "peer": true,
      "dependencies": {
        "@babel/compat-data": "^7.22.9",
        "@babel/helper-validator-option": "^7.22.15",
@@ -681,7 +677,6 @@
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "peer": true,
      "dependencies": {
        "yallist": "^3.0.2"
      }
@@ -690,7 +685,6 @@
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "peer": true,
      "bin": {
        "semver": "bin/semver.js"
      }
@@ -698,8 +692,7 @@
    "node_modules/@babel/helper-compilation-targets/node_modules/yallist": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "peer": true
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
    },
    "node_modules/@babel/helper-environment-visitor": {
      "version": "7.22.20",
@@ -747,7 +740,6 @@
      "version": "7.23.3",
      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
      "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
-      "peer": true,
      "dependencies": {
        "@babel/helper-environment-visitor": "^7.22.20",
        "@babel/helper-module-imports": "^7.22.15",
@@ -774,7 +766,6 @@
      "version": "7.22.5",
      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
      "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
-      "peer": true,
      "dependencies": {
        "@babel/types": "^7.22.5"
      },
@@ -813,7 +804,6 @@
      "version": "7.22.15",
      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz",
      "integrity": "sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==",
-      "peer": true,
      "engines": {
        "node": ">=6.9.0"
      }
@@ -822,7 +812,6 @@
      "version": "7.26.10",
      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.10.tgz",
      "integrity": "sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g==",
-      "peer": true,
      "dependencies": {
        "@babel/template": "^7.26.9",
        "@babel/types": "^7.26.10"
@@ -2706,6 +2695,7 @@
      "version": "7.0.2",
      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-7.0.2.tgz",
      "integrity": "sha512-ODsoD39Lq6vR6aBgvjTnA3nZGliknKboc9Gtxr7E4WDNqY24MxANKcuDQSF0jzapvGb3KWOEDrKfve4HoWGK+g==",
+      "peer": true,
      "dependencies": {
        "@octokit/auth-token": "^6.0.0",
        "@octokit/graphql": "^9.0.1",
@@ -3353,6 +3343,7 @@
      "integrity": "sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==",
      "devOptional": true,
      "license": "Apache-2.0",
+      "peer": true,
      "dependencies": {
        "playwright": "1.56.1"
      },
@@ -3364,9 +3355,9 @@
      }
    },
    "node_modules/@primer/behaviors": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.1.tgz",
-      "integrity": "sha512-9oKBGPpGTIRcBLuWmi+TAvhxxEYI9HbrWnRY6UcHFFHucp783ncoKzok7wDkeHXdKcUZU51E5NM9/k68LaPWpw==",
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.4.tgz",
+      "integrity": "sha512-+z7LNbijJqBnsz1u9Jcgrc9yPLwGmzYMnI+yBiS1oNuEW1zLH5ZE7Kp9UFRo7fqPgM/IZ8xbtdTAuBZq9DPs7g==",
      "license": "MIT"
    },
    "node_modules/@primer/css": {
@@ -3419,25 +3410,20 @@
      "license": "MIT"
    },
    "node_modules/@primer/react": {
-      "version": "37.31.0",
-      "resolved": "https://registry.npmjs.org/@primer/react/-/react-37.31.0.tgz",
-      "integrity": "sha512-sK+/Ggy05yg3TaFdJRfEmRuaZBsmFD5P7nH1qyVqO9OeT8o2jnqnlBhef8TYX0gpNrLwWNcVrIIOP2Em6T6rrA==",
+      "version": "38.0.0",
+      "resolved": "https://registry.npmjs.org/@primer/react/-/react-38.0.0.tgz",
+      "integrity": "sha512-MFmbmcal44IPxUIem9kEd7SF0XmJLjXGWMl1OQqsqMAiAhp0fEPpbrz/pmuIkCfg+5ZRJcw36RkQDrBe7fsyqg==",
      "license": "MIT",
      "dependencies": {
+        "@github/mini-throttle": "^2.1.1",
        "@github/relative-time-element": "^4.4.5",
-        "@github/tab-container-element": "4.8.2",
+        "@github/tab-container-element": "^4.8.2",
        "@lit-labs/react": "1.2.1",
        "@oddbird/popover-polyfill": "^0.5.2",
-        "@primer/behaviors": "^1.8.0",
+        "@primer/behaviors": "^1.8.2",
        "@primer/live-region-element": "^0.7.1",
        "@primer/octicons-react": "^19.13.0",
        "@primer/primitives": "10.x || 11.x",
-        "@styled-system/css": "^5.1.5",
-        "@styled-system/props": "^5.1.5",
-        "@styled-system/theme-get": "^5.1.2",
-        "@types/styled-system": "^5.1.23",
-        "@types/styled-system__css": "^5.0.16",
-        "@types/styled-system__theme-get": "^5.0.1",
        "clsx": "^2.1.1",
        "color2k": "^2.0.3",
        "deepmerge": "^4.3.1",
@@ -3447,9 +3433,7 @@
        "lodash.isempty": "^4.4.0",
        "lodash.isobject": "^3.0.2",
        "react-compiler-runtime": "^19.1.0-rc.2",
-        "react-intersection-observer": "^9.16.0",
-        "styled-system": "^5.1.5",
-        "type-check": "0.4.0"
+        "react-intersection-observer": "^9.16.0"
      },
      "engines": {
        "node": ">=12",
@@ -3459,11 +3443,9 @@
        "@types/react": "18.x || 19.x",
        "@types/react-dom": "18.x || 19.x",
        "@types/react-is": "18.x || 19.x",
-        "@types/styled-components": "^5.1.11",
        "react": "18.x || 19.x",
        "react-dom": "18.x || 19.x",
-        "react-is": "18.x || 19.x",
-        "styled-components": "5.x"
+        "react-is": "18.x || 19.x"
      },
      "peerDependenciesMeta": {
        "@types/react": {
@@ -3474,9 +3456,6 @@
        },
        "@types/react-is": {
          "optional": true
-        },
-        "@types/styled-components": {
-          "optional": true
        }
      }
    },
@@ -3876,6 +3855,7 @@
    },
    "node_modules/@styled-system/background": {
      "version": "5.1.2",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@styled-system/core": "^5.1.2"
@@ -3883,6 +3863,7 @@
    },
    "node_modules/@styled-system/border": {
      "version": "5.1.5",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@styled-system/core": "^5.1.2"
@@ -3890,6 +3871,7 @@
    },
    "node_modules/@styled-system/color": {
      "version": "5.1.2",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@styled-system/core": "^5.1.2"
@@ -3897,6 +3879,7 @@
    },
    "node_modules/@styled-system/core": {
      "version": "5.1.2",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "object-assign": "^4.1.1"
@@ -3904,10 +3887,12 @@
    },
    "node_modules/@styled-system/css": {
      "version": "5.1.5",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/@styled-system/flexbox": {
      "version": "5.1.2",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@styled-system/core": "^5.1.2"
@@ -3915,6 +3900,7 @@
    },
    "node_modules/@styled-system/grid": {
      "version": "5.1.2",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@styled-system/core": "^5.1.2"
@@ -3922,6 +3908,7 @@
    },
    "node_modules/@styled-system/layout": {
      "version": "5.1.2",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@styled-system/core": "^5.1.2"
@@ -3929,6 +3916,7 @@
    },
    "node_modules/@styled-system/position": {
      "version": "5.1.2",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@styled-system/core": "^5.1.2"
@@ -3936,6 +3924,7 @@
    },
    "node_modules/@styled-system/props": {
      "version": "5.1.5",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "styled-system": "^5.1.5"
@@ -3943,6 +3932,7 @@
    },
    "node_modules/@styled-system/shadow": {
      "version": "5.1.2",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@styled-system/core": "^5.1.2"
@@ -3950,13 +3940,7 @@
    },
    "node_modules/@styled-system/space": {
      "version": "5.1.2",
-      "license": "MIT",
-      "dependencies": {
-        "@styled-system/core": "^5.1.2"
-      }
-    },
-    "node_modules/@styled-system/theme-get": {
-      "version": "5.1.2",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@styled-system/core": "^5.1.2"
@@ -3964,6 +3948,7 @@
    },
    "node_modules/@styled-system/typography": {
      "version": "5.1.2",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@styled-system/core": "^5.1.2"
@@ -3971,6 +3956,7 @@
    },
    "node_modules/@styled-system/variant": {
      "version": "5.1.5",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@styled-system/core": "^5.1.2",
@@ -4169,6 +4155,7 @@
      "integrity": "sha512-wGA0NX93b19/dZC1J18tKWVIYWyyF2ZjT9vin/NRu0qzzvfVzWjs04iq2rQ3H65vCTQYlRqs3YHfY7zjdV+9Kw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@types/body-parser": "*",
        "@types/express-serve-static-core": "^5.0.0",
@@ -4199,7 +4186,7 @@
    },
    "node_modules/@types/hoist-non-react-statics": {
      "version": "3.3.1",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@types/react": "*",
@@ -4330,6 +4317,7 @@
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.20.tgz",
      "integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@types/prop-types": "*",
        "csstype": "^3.0.2"
@@ -4341,6 +4329,7 @@
      "integrity": "sha512-nf22//wEbKXusP6E9pfOCDwFdHAX4u172eaJI4YkDRQEZiorm6KfYnSC2SWLDMVWUOWPERmJnN0ujeAfTBLvrw==",
      "devOptional": true,
      "license": "MIT",
+      "peer": true,
      "peerDependencies": {
        "@types/react": "^18.0.0"
      }
@@ -4427,7 +4416,7 @@
      "version": "5.1.34",
      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz",
      "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@types/hoist-non-react-statics": "*",
@@ -4435,26 +4424,6 @@
        "csstype": "^3.0.2"
      }
    },
-    "node_modules/@types/styled-system": {
-      "version": "5.1.23",
-      "resolved": "https://registry.npmjs.org/@types/styled-system/-/styled-system-5.1.23.tgz",
-      "integrity": "sha512-mIwCCdhDa2ifdQCEm8ZeD8m4UEbFsokqEoT9YNOUv4alUJ8jbMKxvpr+oOwfuZgwqLh5HjWuEzwnX7DzWvjFBg==",
-      "license": "MIT",
-      "dependencies": {
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/styled-system__css": {
-      "version": "5.0.16",
-      "license": "MIT",
-      "dependencies": {
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/styled-system__theme-get": {
-      "version": "5.0.1",
-      "license": "MIT"
-    },
    "node_modules/@types/tcp-port-used": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/@types/tcp-port-used/-/tcp-port-used-1.0.4.tgz",
@@ -4531,6 +4500,7 @@
      "integrity": "sha512-pUXGCuHnnKw6PyYq93lLRiZm3vjuslIy7tus1lIQTYVK9bL8XBgJnCWm8a0KcTtHC84Yya1Q6rtll+duSMj0dg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.39.1",
        "@typescript-eslint/types": "8.39.1",
@@ -5169,6 +5139,7 @@
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -5198,6 +5169,7 @@
      "version": "8.17.1",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.3",
        "fast-uri": "^3.0.1",
@@ -5697,6 +5669,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "caniuse-lite": "^1.0.30001733",
        "electron-to-chromium": "^1.5.199",
@@ -5947,6 +5920,7 @@
      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
      "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "cheerio-select": "^2.1.0",
        "dom-serializer": "^2.0.0",
@@ -7168,6 +7142,7 @@
      "integrity": "sha512-TS9bTNIryDzStCpJN93aC5VRSW3uTx9sClUn4B87pwiCaJh220otoI0X8mJKr+VcPtniMdN8GKjlwgWGUv5ZKA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.2.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -7229,6 +7204,7 @@
      "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "eslint-config-prettier": "bin/cli.js"
      },
@@ -7487,6 +7463,7 @@
      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@rtsao/scc": "^1.1.0",
        "array-includes": "^3.1.9",
@@ -8646,7 +8623,6 @@
    "node_modules/gensync": {
      "version": "1.0.0-beta.2",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=6.9.0"
      }
@@ -8852,6 +8828,7 @@
      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.9.0.tgz",
      "integrity": "sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==",
      "dev": true,
+      "peer": true,
      "engines": {
        "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
      }
@@ -10226,6 +10203,7 @@
      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
      "dev": true,
+      "peer": true,
      "bin": {
        "jiti": "lib/jiti-cli.mjs"
      }
@@ -10322,7 +10300,6 @@
    "node_modules/json5": {
      "version": "2.2.3",
      "license": "MIT",
-      "peer": true,
      "bin": {
        "json5": "lib/cli.js"
      },
@@ -13152,6 +13129,7 @@
      "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==",
      "devOptional": true,
      "license": "Apache-2.0",
+      "peer": true,
      "bin": {
        "playwright-core": "cli.js"
      },
@@ -13204,6 +13182,7 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
      "engines": {
        "node": ">= 0.8.0"
      }
@@ -13214,6 +13193,7 @@
      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "prettier": "bin/prettier.cjs"
      },
@@ -13383,6 +13363,7 @@
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
      "dependencies": {
        "loose-envify": "^1.1.0"
      },
@@ -13403,6 +13384,7 @@
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "peer": true,
      "dependencies": {
        "loose-envify": "^1.1.0",
        "scheduler": "^0.23.2"
@@ -14070,6 +14052,7 @@
      "integrity": "sha512-d0NoFH4v6SjEK7BoX810Jsrhj7IQSYHAHLi/iSpgqKc7LaIDshFRlSg5LOymf9FqQhxEHs2W5ZQXlvy0KD45Uw==",
      "devOptional": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "chokidar": "^4.0.0",
        "immutable": "^5.0.2",
@@ -14992,6 +14975,7 @@
      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
      "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/helper-module-imports": "^7.0.0",
        "@babel/traverse": "^7.4.5",
@@ -15059,6 +15043,7 @@
    },
    "node_modules/styled-system": {
      "version": "5.1.5",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@styled-system/background": "^5.1.2",
@@ -15237,6 +15222,7 @@
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -15414,6 +15400,7 @@
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
      "dependencies": {
        "prelude-ls": "^1.2.1"
      },
@@ -15551,6 +15538,7 @@
      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
      "dev": true,
      "license": "Apache-2.0",
+      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -15898,6 +15886,7 @@
      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "napi-postinstall": "^0.2.2"
      },
@@ -16100,6 +16089,7 @@
      "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "esbuild": "^0.25.0",
        "fdir": "^6.5.0",
@@ -16208,6 +16198,7 @@
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
--- a/package.json
+++ b/package.json
@@ -161,7 +161,7 @@
    "@primer/live-region-element": "^0.7.2",
    "@primer/octicons": "^19.19.0",
    "@primer/octicons-react": "^19.14.0",
-    "@primer/react": "^37.31.0",
+    "@primer/react": "^38.0.0",
    "accept-language-parser": "^1.5.0",
    "ajv": "^8.17.1",
    "ajv-errors": "^3.0.0",
--- a/src/frame/components/article/ArticleGridLayout.tsx
+++ b/src/frame/components/article/ArticleGridLayout.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import cx from 'classnames'
-import { Box } from '@primer/react'
 import { SupportPortalVaIframe, SupportPortalVaIframeProps } from './SupportPortalVaIframe'

 import styles from './ArticleGridLayout.module.scss'
@@ -26,32 +25,31 @@ export const ArticleGridLayout = ({
  const containerBoxStyles = fullWidth ? '' : styles.containerBox
  return (
    <div className={cx(containerBoxStyles, className)}>
-      {topper && <Box gridArea="topper">{topper}</Box>}
+      {topper && <div style={{ gridArea: 'topper' }}>{topper}</div>}
      {intro && (
-        <Box id="article-intro" gridArea="intro" className="f4 pb-4">
+        <div id="article-intro" style={{ gridArea: 'intro' }} className="f4 pb-4">
          {intro}
-        </Box>
+        </div>
      )}

      {toc && (
-        <Box
+        <div
          data-container="toc"
-          gridArea="sidebar"
-          alignSelf="flex-start"
+          style={{ gridArea: 'sidebar', alignSelf: 'flex-start' }}
          className={cx(styles.sidebarBox, 'border-bottom border-lg-0 pb-4 mb-5 pb-xl-0 mb-xl-0')}
        >
          {toc}
-        </Box>
+        </div>
      )}

-      <Box data-container="article" gridArea="content" data-search="article-body">
+      <div data-container="article" style={{ gridArea: 'content' }} data-search="article-body">
        {supportPortalVaIframeProps &&
          supportPortalVaIframeProps.supportPortalUrl &&
          supportPortalVaIframeProps.vaFlowUrlParameter && (
            <SupportPortalVaIframe supportPortalVaIframeProps={supportPortalVaIframeProps} />
          )}
        {children}
-      </Box>
+      </div>
    </div>
  )
 }
--- a/src/frame/components/article/ArticleInlineLayout.tsx
+++ b/src/frame/components/article/ArticleInlineLayout.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import cx from 'classnames'
-import { Box } from '@primer/react'
 import { SupportPortalVaIframe, SupportPortalVaIframeProps } from './SupportPortalVaIframe'

 import styles from './ArticleInlineLayout.module.scss'
@@ -28,39 +27,41 @@ export const ArticleInlineLayout = ({
  return (
    <div className={cx(styles.containerBox, className)}>
      {breadcrumbs && (
-        <Box gridArea="breadcrumbs" className={cx('d-none d-xxl-block mt-3 mr-auto width-full')}>
+        <div
+          style={{ gridArea: 'breadcrumbs' }}
+          className={cx('d-none d-xxl-block mt-3 mr-auto width-full')}
+        >
          {breadcrumbs}
-        </Box>
+        </div>
      )}
      <div className={cx(styles.contentBox)}>
-        {topper && <Box gridArea="topper">{topper}</Box>}
+        {topper && <div style={{ gridArea: 'topper' }}>{topper}</div>}

        {intro && (
-          <Box id="article-intro" gridArea="intro" className="f4">
+          <div id="article-intro" style={{ gridArea: 'intro' }} className="f4">
            {intro}
-          </Box>
+          </div>
        )}

        {introCallOuts && (
-          <Box gridArea="intro" className="f4 mb-4">
+          <div style={{ gridArea: 'intro' }} className="f4 mb-4">
            {introCallOuts}
-          </Box>
+          </div>
        )}

        {toc && (
-          <Box
+          <div
            data-container="toc"
-            gridArea="sidebar"
-            alignSelf="flex-start"
+            style={{ gridArea: 'sidebar', alignSelf: 'flex-start' }}
            className={cx(styles.sidebarBox, 'border-bottom border-lg-0 pb-4 mb-5 pb-xl-0 mb-xl-0')}
          >
            {toc}
-          </Box>
+          </div>
        )}

-        <Box
+        <div
          data-container="article"
-          gridArea="content"
+          style={{ gridArea: 'content' }}
          data-search="article-body"
          className={cx(styles.articleContainer, className)}
        >
@@ -70,7 +71,7 @@ export const ArticleInlineLayout = ({
              <SupportPortalVaIframe supportPortalVaIframeProps={supportPortalVaIframeProps} />
            )}
          {children}
-        </Box>
+        </div>
      </div>
    </div>
  )
--- a/src/landings/components/ArticleCard.module.scss
+++ b/src/landings/components/ArticleCard.module.scss
@@ -0,0 +1,7 @@
+.topicsList {
+  list-style-type: none;
+}
+
+.label {
+  margin-right: 0.25rem;
+}
--- a/src/landings/components/ArticleCard.tsx
+++ b/src/landings/components/ArticleCard.tsx
@@ -3,6 +3,8 @@ import { Label } from '@primer/react'
 import { ArticleGuide } from '@/landings/components/ProductGuidesContext'
 import { Link } from '@/frame/components/Link'

+import styles from './ArticleCard.module.scss'
+
 type Props = {
  card: ArticleGuide
  typeLabel: string
@@ -23,7 +25,7 @@ export const ArticleCard = ({ tabIndex, card, typeLabel }: Props) => {
        </div>
        <p className="color-fg-muted my-3">{card.intro}</p>
        {card.topics.length > 0 && (
-          <ul style={{ listStyleType: 'none' }}>
+          <ul className={styles.topicsList}>
            {card.topics.map((topic) => {
              return (
                <li className="d-inline-block" key={topic}>
@@ -31,7 +33,7 @@ export const ArticleCard = ({ tabIndex, card, typeLabel }: Props) => {
                    data-testid="article-card-topic"
                    size="small"
                    variant="accent"
-                    sx={{ mr: 1 }}
+                    className={styles.label}
                  >
                    {topic}
                  </Label>
--- a/src/landings/components/CookBookArticleCard.module.scss
+++ b/src/landings/components/CookBookArticleCard.module.scss
@@ -0,0 +1,15 @@
+.spotlightImage {
+  background-color: gray;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  width: 100%;
+  height: auto;
+}
+
+.cardContainer {
+  min-height: 200px;
+}
+
+.label {
+  margin-right: 0.25rem;
+}
--- a/src/landings/components/CookBookArticleCard.tsx
+++ b/src/landings/components/CookBookArticleCard.tsx
@@ -1,6 +1,8 @@
 import { Label, LabelGroup, Link } from '@primer/react'
 import { ValidOcticon, getOcticonComponent } from '../lib/octicons'

+import styles from './CookBookArticleCard.module.scss'
+
 type IconType = ValidOcticon

 type Props = {
@@ -15,19 +17,7 @@ type Props = {
 }

 function setImage(image: string, alt: string) {
-  return image ? (
-    <img
-      src={image}
-      alt={alt}
-      style={{
-        backgroundColor: 'gray',
-        marginBottom: 20,
-        borderRadius: 5,
-        width: '100%',
-        height: 'auto',
-      }}
-    />
-  ) : null
+  return image ? <img src={image} alt={alt} className={styles.spotlightImage} /> : null
 }
 const spotlightClasses = 'd-flex flex-column align-items-center'
 export const CookBookArticleCard = ({
@@ -43,8 +33,7 @@ export const CookBookArticleCard = ({
  return (
    <div className="m-2">
      <div
-        style={{ minHeight: 200 }}
-        className={spotlight ? spotlightClasses : 'd-flex pb-3 border-bottom'}
+        className={`${styles.cardContainer} ${spotlight ? spotlightClasses : 'd-flex pb-3 border-bottom'}`}
      >
        {spotlight ? setImage(image, title) : null}
        {spotlight
@@ -62,7 +51,7 @@ export const CookBookArticleCard = ({
          <div className="fgColor-muted mb-3 mt-2">{description}</div>
          <LabelGroup>
            {tags.map((tag, index) => (
-              <Label key={index} variant="accent" sx={{ mr: 1 }} size="small">
+              <Label key={index} variant="accent" className={styles.label} size="small">
                {tag}
              </Label>
            ))}
--- a/src/landings/components/CookBookFilter.module.scss
+++ b/src/landings/components/CookBookFilter.module.scss
@@ -0,0 +1,13 @@
+.textInput {
+  min-width: 100%;
+}
+
+.categoryLabel {
+  color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
+  display: inline-block;
+}
+
+.complexityLabel {
+  color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
+  display: inline-block;
+}
--- a/src/landings/components/CookBookFilter.tsx
+++ b/src/landings/components/CookBookFilter.tsx
@@ -1,9 +1,11 @@
-import { TextInput, ActionMenu, ActionList, Button, Box } from '@primer/react'
+import { TextInput, ActionMenu, ActionList, Button } from '@primer/react'
 import { SearchIcon } from '@primer/octicons-react'
 import { useRef, useEffect, useState } from 'react'
 import { ArticleCardItems } from '@/landings/types'
 import { useTranslation } from '@/languages/components/useTranslation'

+import styles from './CookBookFilter.module.scss'
+
 type Props = {
  tokens: ArticleCardItems
  onSearch: (query: string) => void
@@ -61,8 +63,7 @@ export const CookBookFilter = ({
        <form onSubmit={(e) => e.preventDefault()}>
          <TextInput
            leadingVisual={SearchIcon}
-            className="m-1"
-            sx={{ minWidth: ['stretch', 'stretch', 'stretch', 'stretch'] }}
+            className={`m-1 ${styles.textInput}`}
            placeholder={t('search_articles')}
            ref={inputRef}
            autoComplete="false"
@@ -76,14 +77,7 @@ export const CookBookFilter = ({
      <div className="d-flex flex-wrap flex-md-nowrap ">
        <ActionMenu>
          <ActionMenu.Button className="col-md-1 col-sm-2 m-1">
-            <Box
-              sx={{
-                color: 'fg.muted',
-                display: 'inline-block',
-              }}
-            >
-              {t('category')}:
-            </Box>{' '}
+            <span className={styles.categoryLabel}>{t('category')}:</span>{' '}
            {categories[selectedCategory]}
          </ActionMenu.Button>
          <ActionMenu.Overlay width="auto">
@@ -103,14 +97,7 @@ export const CookBookFilter = ({

        <ActionMenu>
          <ActionMenu.Button className="col-md-1 col-sm-2 m-1">
-            <Box
-              sx={{
-                color: 'fg.muted',
-                display: 'inline-block',
-              }}
-            >
-              {t('complexity')}:
-            </Box>{' '}
+            <span className={styles.complexityLabel}>{t('complexity')}:</span>{' '}
            {complexities[selectedComplexity]}
          </ActionMenu.Button>
          <ActionMenu.Overlay width="auto">
--- a/src/landings/components/LandingHero.module.scss
+++ b/src/landings/components/LandingHero.module.scss
@@ -0,0 +1,3 @@
+.videoWrapper {
+  padding-bottom: 56.25%;
+}
--- a/src/landings/components/LandingHero.tsx
+++ b/src/landings/components/LandingHero.tsx
@@ -9,6 +9,8 @@ import { useTranslation } from '@/languages/components/useTranslation'
 import { useVersion } from '@/versions/components/useVersion'
 import { Lead } from '@/frame/components/ui/Lead'

+import styles from './LandingHero.module.scss'
+
 export const LandingHero = () => {
  const {
    productVideo,
@@ -63,7 +65,7 @@ export const LandingHero = () => {

      {productVideo && (
        <div className="col-12 col-lg-6" data-search="hide">
-          <div className="position-relative" style={{ paddingBottom: '56.25%' }}>
+          <div className={`position-relative ${styles.videoWrapper}`}>
            <iframe
              title={`${shortTitle || title} Video`}
              className="top-0 left-0 position-absolute color-shadow-large rounded-1 width-full height-full"
--- a/src/landings/components/ProductSelectionCard.module.scss
+++ b/src/landings/components/ProductSelectionCard.module.scss
@@ -0,0 +1,3 @@
+.groupIcon {
+  height: 22px;
+}
--- a/src/landings/components/ProductSelectionCard.tsx
+++ b/src/landings/components/ProductSelectionCard.tsx
@@ -2,6 +2,8 @@ import type { ProductGroupT } from '@/landings/components/ProductSelections'

 import React from 'react'
 import { Link } from '@/frame/components/Link'
+
+import styles from './ProductSelectionCard.module.scss'
 import {
  LinkExternalIcon,
  RocketIcon,
@@ -41,15 +43,11 @@ export const ProductSelectionCard = ({ group }: ProductSelectionCardProps) => {
    return null
  }

-  const groupIcon = {
-    height: '22px',
-  }
-
  function icon(productGroup: ProductGroupT) {
    if (productGroup.icon) {
      return (
        <div className="pr-3">
-          <img src={productGroup.icon} alt={productGroup.name} style={groupIcon}></img>
+          <img src={productGroup.icon} alt={productGroup.name} className={styles.groupIcon}></img>
        </div>
      )
    } else if (productGroup.octicon) {
@@ -61,7 +59,7 @@ export const ProductSelectionCard = ({ group }: ProductSelectionCardProps) => {

      return (
        <div className="mr-2">
-          {React.createElement(octicon, groupIcon as React.Attributes, null)}
+          {React.createElement(octicon, { height: '22px' } as React.Attributes, null)}
        </div>
      )
    }
--- a/src/search/components/input/AskAIResults.module.scss
+++ b/src/search/components/input/AskAIResults.module.scss
@@ -69,3 +69,35 @@ $mutedTextColor: var(--fgColor-muted, var(--color-fg-muted, #656d76));
  flex-direction: row;
  padding-left: 12px !important;
 }
+
+.thumbsUpButton {
+  border: none;
+  background-color: unset;
+  box-shadow: unset;
+
+  &.selected {
+    border: 1px solid var(--color-btn-text);
+    color: var(--fgColor-accent) !important;
+  }
+}
+
+.thumbsDownButton {
+  border: none;
+  background-color: unset;
+  box-shadow: unset;
+
+  &.selected {
+    border: 1px solid var(--color-btn-text);
+    color: var(--fgColor-accent) !important;
+  }
+}
+
+.shareButton {
+  border: none;
+  background-color: unset;
+  box-shadow: unset;
+
+  &.copied {
+    color: var(--fgColor-accent) !important;
+  }
+}
--- a/src/search/components/input/AskAIResults.tsx
+++ b/src/search/components/input/AskAIResults.tsx
@@ -414,14 +414,8 @@ export function AskAIResults({
        <div className={styles.postAnswerWidgets}>
          <IconButton
            icon={ThumbsupIcon}
-            className={'btn-octicon'}
+            className={`btn-octicon ${styles.thumbsUpButton} ${feedbackSelected === 'up' ? styles.selected : ''}`}
            aria-label={t('ai.thumbs_up')}
-            sx={{
-              border: feedbackSelected === 'up' ? '1px solid var(--color-btn-text)' : 'none',
-              backgroundColor: feedbackSelected === 'up' ? '' : 'unset',
-              boxShadow: 'unset',
-              color: feedbackSelected === 'up' ? 'var(--fgColor-accent) !important;' : '',
-            }}
            onClick={() => {
              setFeedbackSelected('up')
              announce(t('ai.thumbs_announcement'))
@@ -436,14 +430,8 @@ export function AskAIResults({
          ></IconButton>
          <IconButton
            icon={ThumbsdownIcon}
-            className={'btn-octicon'}
+            className={`btn-octicon ${styles.thumbsDownButton} ${feedbackSelected === 'down' ? styles.selected : ''}`}
            aria-label={t('ai.thumbs_down')}
-            sx={{
-              border: feedbackSelected === 'down' ? '1px solid var(--color-btn-text)' : 'none',
-              backgroundColor: feedbackSelected === 'down' ? '' : 'unset',
-              boxShadow: 'unset',
-              color: feedbackSelected === 'down' ? 'var(--fgColor-accent) !important;' : '',
-            }}
            onClick={() => {
              setFeedbackSelected('down')
              announce(t('ai.thumbs_announcement'))
@@ -457,14 +445,8 @@ export function AskAIResults({
            }}
          ></IconButton>
          <IconButton
-            sx={{
-              border: 'none',
-              backgroundColor: 'unset',
-              boxShadow: 'unset',
-              color: isCopied ? 'var(--fgColor-accent) !important;' : '',
-            }}
            icon={isCopied ? CheckIcon : ShareIcon}
-            className="btn-octicon"
+            className={`btn-octicon ${styles.shareButton} ${isCopied ? styles.copied : ''}`}
            aria-label={
              isCopied ? t('search.ai.share_copied_announcement') : t('search.ai.share_answer')
            }
@@ -483,7 +465,7 @@ export function AskAIResults({
      ) : null}
      {!aiCouldNotAnswer && !responseLoading && references && references.length > 0 ? (
        <>
-          <ActionList className={styles.referencesList} showDividers>
+          <ActionList className={styles.referencesList}>
            <ActionList.Group data-testid="ai-references">
              <ActionList.GroupHeading
                as="h3"
@@ -507,7 +489,7 @@ export function AskAIResults({
                        referenceOnSelect(source.url)
                      }}
                      active={refIndex === selectedIndex}
-                      ref={(element) => {
+                      ref={(element: HTMLLIElement | null) => {
                        if (listElementsRef.current) {
                          listElementsRef.current[refIndex] = element
                        }
@@ -525,20 +507,7 @@ export function AskAIResults({
          </ActionList>
        </>
      ) : null}
-      <div
-        aria-live="assertive"
-        style={{
-          position: 'absolute',
-          width: '1px',
-          height: '1px',
-          padding: '0',
-          margin: '-1px',
-          overflow: 'hidden',
-          clip: 'rect(0, 0, 0, 0)',
-          whiteSpace: 'nowrap',
-          border: '0',
-        }}
-      >
+      <div aria-live="assertive" className={styles.displayForScreenReader}>
        {announcement}
      </div>
    </div>
--- a/src/search/components/input/SearchOverlay.module.scss
+++ b/src/search/components/input/SearchOverlay.module.scss
@@ -72,6 +72,8 @@ $mutedTextColor: var(--fgColor-muted, var(--color-fg-muted, #656d76));
  background-color: var(--overlay-bgColor);
  overflow-y: auto;
  min-height: 15vh;
+  border-top: 1px solid
+    var(--borderColor-default, var(--color-border-default, #d0d7de));

  @include breakpoint(sm) {
    min-height: fit-content !important;
@@ -122,3 +124,76 @@ $mutedTextColor: var(--fgColor-muted, var(--color-fg-muted, #656d76));
 .noResultsFound {
  color: $mutedTextColor !important;
 }
+
+.screenReaderOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.overlayPadding {
+  padding: 0 16px 0 16px;
+}
+
+.askAILabel {
+  display: flex;
+  margin-right: 8px;
+  font-weight: bolder;
+}
+
+.askAILabelHidden {
+  display: none;
+  margin-right: 8px;
+  font-weight: bolder;
+}
+
+.stackMinWidth {
+  min-width: 34px;
+}
+
+.dividerTopMargin {
+  display: block;
+  margin-top: 16px;
+  width: 100%;
+}
+
+.dividerTopMarginHidden {
+  display: none;
+  margin-top: 16px;
+  width: 100%;
+}
+
+.dividerFullWidth {
+  width: 100%;
+}
+
+.privacyDisclaimer {
+  color: var(--color-fg-muted);
+  margin-top: 0.5rem;
+  margin-bottom: 0;
+  font-size: small;
+}
+
+.trailingVisualActive {
+  visibility: visible;
+  width: 1rem;
+}
+
+.trailingVisualHidden {
+  visibility: hidden;
+  width: 1rem;
+}
+
+.leadingVisualHidden {
+  visibility: hidden;
+}
+
+.leadingVisualVisible {
+  visibility: visible;
+}
--- a/src/search/components/input/SearchOverlay.tsx
+++ b/src/search/components/input/SearchOverlay.tsx
@@ -1,16 +1,7 @@
 import React, { useState, useRef, RefObject, useEffect, SetStateAction, useMemo } from 'react'
 import cx from 'classnames'
 import { useRouter } from 'next/router'
-import {
-  ActionList,
-  Box,
-  IconButton,
-  Overlay,
-  Spinner,
-  Stack,
-  Text,
-  TextInput,
-} from '@primer/react'
+import { ActionList, IconButton, Overlay, Spinner, Stack, TextInput, Banner } from '@primer/react'
 import {
  SearchIcon,
  XCircleFillIcon,
@@ -29,7 +20,6 @@ import {
  executeGeneralSearch,
  GENERAL_SEARCH_CONTEXT,
 } from '../helpers/execute-search-actions'
-import { Banner } from '@primer/react/experimental'
 import { useCombinedSearchResults } from '@/search/components/hooks/useAISearchAutocomplete'
 import { AskAIResults } from './AskAIResults'
 import { sendEvent, uuidv4 } from '@/events/components/events'
@@ -582,8 +572,7 @@ export function SearchOverlay({
          showDividers
          className={styles.suggestionsList}
          ref={suggestionsListHeightRef}
-          sx={{
-            // When there is an error and nothing is typed in by the user, show an empty list with no height
+          style={{
            minHeight:
              autoCompleteSearchError && !generalOptionsWithViewStatus.length
                ? '0'
@@ -605,11 +594,7 @@ export function SearchOverlay({
                </ActionList.GroupHeading>
              </li>
              <li>
-                <Box
-                  sx={{
-                    padding: '0 16px 0 16px',
-                  }}
-                >
+                <div className={styles.overlayPadding}>
                  <Banner
                    tabIndex={0}
                    className={styles.errorBanner}
@@ -619,7 +604,7 @@ export function SearchOverlay({
                    aria-live="assertive"
                    role="alert"
                  />
-                </Box>
+                </div>
              </li>
              {/* If there are general results, show bottom divider */}
              {generalOptionsWithViewStatus.length > 0 && (
@@ -652,7 +637,7 @@ export function SearchOverlay({
        showDividers
        className={styles.suggestionsList}
        ref={suggestionsListHeightRef}
-        sx={{
+        style={{
          minHeight: `${previousSuggestionsListHeight}px`,
        }}
      >
@@ -687,7 +672,7 @@ export function SearchOverlay({
        anchorSide="inside-center"
        className={cx(styles.overlayContainer, 'position-fixed')}
        // We need to override the top value of the overlay when there are header notifications
-        sx={
+        style={
          hasOpenHeaderNotifications
            ? {
                top: overlayTopValue,
@@ -700,20 +685,14 @@ export function SearchOverlay({
        ref={overlayRef}
      >
        <div className={styles.header}>
-          <Box
-            sx={{
-              display: isAskAIState ? 'flex' : 'none',
-              marginRight: '8px',
-              fontWeight: 'bolder',
-            }}
-          >
+          <div className={isAskAIState ? styles.askAILabel : styles.askAILabelHidden}>
            <IconButton
              aria-label={t('search.ai.back_to_search')}
              icon={ArrowLeftIcon}
              onClick={onBackButton}
              variant="invisible"
            ></IconButton>
-          </Box>
+          </div>
          <TextInput
            className="width-full"
            data-testid="overlay-search-input"
@@ -734,12 +713,7 @@ export function SearchOverlay({
            onKeyDown={handleKeyDown}
            placeholder={t('search.input.placeholder_no_icon')}
            trailingAction={
-              <Stack
-                justify="center"
-                sx={{
-                  minWidth: '34px',
-                }}
-              >
+              <Stack justify="center" className={styles.stackMinWidth}>
                <TextInput.Action
                  onClick={() => {
                    setSelectedIndex(-1)
@@ -765,46 +739,18 @@ export function SearchOverlay({
          />
        </div>
        <ActionList.Divider
-          sx={{
-            display: inErrorState ? 'none' : 'block',
-            marginTop: '16px',
-            width: '100%',
-          }}
+          className={inErrorState ? styles.dividerTopMarginHidden : styles.dividerTopMargin}
          aria-hidden="true"
        />
        {OverlayContents}
-        <ActionList.Divider
-          sx={{
-            width: '100%',
-          }}
-        />
+        <ActionList.Divider className={styles.dividerFullWidth} />
        <div key="description" className={styles.footer}>
-          <Text
-            as="p"
-            sx={{
-              // eslint-disable-next-line primer-react/new-color-css-vars
-              color: 'var(--color-fg-muted)',
-              marginTop: 2,
-              marginBottom: 0,
-              fontSize: 'small',
-            }}
+          <p
+            className={styles.privacyDisclaimer}
            dangerouslySetInnerHTML={{ __html: t('search.overlay.privacy_disclaimer') }}
          />
        </div>
-        <div
-          aria-live="assertive"
-          style={{
-            position: 'absolute',
-            width: '1px',
-            height: '1px',
-            padding: '0',
-            margin: '-1px',
-            overflow: 'hidden',
-            clip: 'rect(0, 0, 0, 0)',
-            whiteSpace: 'nowrap',
-            border: '0',
-          }}
-        >
+        <div aria-live="assertive" className={styles.screenReaderOnly}>
          {announcement}
        </div>
      </Overlay>
@@ -860,16 +806,16 @@ function renderSearchGroups(
  // We already show a spinner when streaming AI response, so don't want to show 2 here
  if (showSpinner && !isInAskAIState) {
    groups.push(
-      <Box
+      <div
        key="loading"
        role="status"
        className={styles.loadingContainer}
-        sx={{
+        style={{
          height: `${previousSuggestionsListHeight}px`,
        }}
      >
        <Spinner />
-      </Box>,
+      </div>,
    )
    return groups
  }
@@ -905,7 +851,7 @@ function renderSearchGroups(
            active={isActive}
            onSelect={() => performGeneralSearch()}
            aria-label={t('search.overlay.search_docs_with_query').replace('{query}', option.title)}
-            ref={(element) => {
+            ref={(element: HTMLLIElement | null) => {
              if (listElementsRef.current) {
                listElementsRef.current[index] = element
              }
@@ -917,11 +863,7 @@ function renderSearchGroups(
            {option.title}
            <ActionList.TrailingVisual
              aria-hidden
-              sx={{
-                // Hold the space even when not visible to prevent layout shift
-                visibility: isActive ? 'visible' : 'hidden',
-                width: '1rem',
-              }}
+              className={isActive ? styles.trailingVisualActive : styles.trailingVisualHidden}
            >
              <ArrowRightIcon />
            </ActionList.TrailingVisual>
@@ -940,7 +882,7 @@ function renderSearchGroups(
            className={option.isViewAllResults ? styles.viewAllSearchResults : ''}
            active={isActive}
            tabIndex={-1}
-            ref={(element) => {
+            ref={(element: HTMLLIElement | null) => {
              if (listElementsRef.current) {
                listElementsRef.current[index] = element
              }
@@ -949,7 +891,9 @@ function renderSearchGroups(
            {!option.isNoResultsFound && (
              <ActionList.LeadingVisual
                aria-hidden
-                sx={{ visibility: option.isViewAllResults ? 'hidden' : 'visible' }}
+                className={
+                  option.isViewAllResults ? styles.leadingVisualHidden : styles.leadingVisualVisible
+                }
              >
                <FileIcon />
              </ActionList.LeadingVisual>
@@ -957,11 +901,7 @@ function renderSearchGroups(
            {option.title}
            <ActionList.TrailingVisual
              aria-hidden
-              sx={{
-                // Hold the space even when not visible to prevent layout shift
-                visibility: isActive ? 'visible' : 'hidden',
-                width: '1rem',
-              }}
+              className={isActive ? styles.trailingVisualActive : styles.trailingVisualHidden}
            >
              <ArrowRightIcon />
            </ActionList.TrailingVisual>
@@ -976,15 +916,15 @@ function renderSearchGroups(
          {t('search.overlay.general_suggestions_list_heading')}
        </ActionList.GroupHeading>
        {searchLoading && isInAskAIState ? (
-          <Box
+          <div
            role="status"
            className={styles.loadingContainer}
-            sx={{
+            style={{
              height: `${previousSuggestionsListHeight}px`,
            }}
          >
            <Spinner />
-          </Box>
+          </div>
        ) : (
          items
        )}
@@ -1053,7 +993,7 @@ function renderSearchGroups(
              onSelect={() => aiAutocompleteOnSelect(option)}
              active={isActive}
              tabIndex={-1}
-              ref={(element) => {
+              ref={(element: HTMLLIElement | null) => {
                if (listElementsRef.current) {
                  listElementsRef.current[indexWithOffset] = element
                }
@@ -1065,11 +1005,7 @@ function renderSearchGroups(
              {option.term}
              <ActionList.TrailingVisual
                aria-hidden
-                sx={{
-                  // Hold the space even when not visible to prevent layout shift
-                  visibility: isActive ? 'visible' : 'hidden',
-                  width: '1rem',
-                }}
+                className={isActive ? styles.trailingVisualActive : styles.trailingVisualHidden}
              >
                <ArrowRightIcon />
              </ActionList.TrailingVisual>
--- a/src/search/components/results/NoQuery.module.scss
+++ b/src/search/components/results/NoQuery.module.scss
@@ -0,0 +1,3 @@
+.flash {
+  margin: 2rem;
+}
--- a/src/search/components/results/NoQuery.tsx
+++ b/src/search/components/results/NoQuery.tsx
@@ -3,6 +3,8 @@ import { Heading, Flash } from '@primer/react'
 import { useMainContext } from '@/frame/components/context/MainContext'
 import { useTranslation } from '@/languages/components/useTranslation'

+import styles from './NoQuery.module.scss'
+
 export function NoQuery() {
  const { t } = useTranslation('old_search')
  const mainContext = useMainContext()
@@ -15,7 +17,7 @@ export function NoQuery() {
    <>
      <Heading as="h1">{page.title}</Heading>

-      <Flash variant="danger" sx={{ margin: '2rem' }}>
+      <Flash variant="danger" className={styles.flash}>
        {t('description')}
      </Flash>
    </>
--- a/src/search/components/results/SearchResults.module.scss
+++ b/src/search/components/results/SearchResults.module.scss
@@ -17,3 +17,20 @@
  outline-offset: -2px;
  box-shadow: 0 0 0 4px inset;
 }
+
+.paginationWrapper {
+  border-radius: 6px;
+  padding: 8px;
+}
+
+.breadcrumb {
+  word-spacing: 2px;
+}
+
+.debugCode {
+  margin-right: 10px;
+}
+
+.debugText {
+  font-weight: bold;
+}
--- a/src/search/components/results/SearchResults.tsx
+++ b/src/search/components/results/SearchResults.tsx
@@ -1,4 +1,4 @@
-import { Box, Pagination, Text } from '@primer/react'
+import { Pagination } from '@primer/react'
 import { SearchIcon } from '@primer/octicons-react'
 import { useRouter } from 'next/router'
 import React, { useEffect, useRef, useState } from 'react'
@@ -106,7 +106,7 @@ function SearchResultHit({

  return (
    <div className={cx('my-6', styles.search_result)} data-testid="search-result">
-      <p className="text-normal f5 color-fg-muted" style={{ wordSpacing: 2 }}>
+      <p className={`text-normal f5 color-fg-muted ${styles.breadcrumb}`}>
        {hit.breadcrumbs.length > 1 && (
          <>
            <strong>{hit.breadcrumbs.split('/')[0]}</strong>
@@ -136,10 +136,10 @@ function SearchResultHit({
      </h2>
      {content && <div dangerouslySetInnerHTML={{ __html: content }}></div>}
      {debug && (
-        <Text as="p" fontWeight="bold">
-          score: <code style={{ marginRight: 10 }}>{hit.score}</code> popularity:{' '}
+        <p className={styles.debugText}>
+          score: <code className={styles.debugCode}>{hit.score}</code> popularity:{' '}
          <code>{hit.popularity}</code>
-        </Text>
+        </p>
      )}
    </div>
  )
@@ -171,7 +171,7 @@ function ResultsPagination({ page, totalPages }: { page: number; totalPages: num

  return (
    <div className={styles.paginationFocus}>
-      <Box borderRadius={2} p={2}>
+      <div className={styles.paginationWrapper}>
        <Pagination
          pageCount={Math.min(totalPages, 10)}
          currentPage={page}
@@ -194,7 +194,7 @@ function ResultsPagination({ page, totalPages }: { page: number; totalPages: num
            router.push(newPath)
          }}
        />
-      </Box>
+      </div>
    </div>
  )
 }
--- a/src/search/components/results/ValidationErrors.module.scss
+++ b/src/search/components/results/ValidationErrors.module.scss
@@ -0,0 +1,3 @@
+.flash {
+  margin: 3rem;
+}
--- a/src/search/components/results/ValidationErrors.tsx
+++ b/src/search/components/results/ValidationErrors.tsx
@@ -3,6 +3,8 @@ import { Flash } from '@primer/react'
 import { useTranslation } from '@/languages/components/useTranslation'
 import type { SearchValidationErrorEntry } from '../../types'

+import styles from './ValidationErrors.module.scss'
+
 interface Props {
  errors: SearchValidationErrorEntry[]
 }
@@ -14,7 +16,7 @@ export function ValidationErrors({ errors }: Props) {
    <div>
      {errors.map((error) => {
        return (
-          <Flash key={error.error} variant="warning" sx={{ margin: '3rem' }}>
+          <Flash key={error.error} variant="warning" className={styles.flash}>
            {t('search_validation_error')}
            <br />
            <code>{error.error}</code>