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>

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==",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
-      "peer": true
     },
     "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==",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
-      "peer": true
     },
     "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",
+      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.4.tgz",
-      "integrity": "sha512-9oKBGPpGTIRcBLuWmi+TAvhxxEYI9HbrWnRY6UcHFFHucp783ncoKzok7wDkeHXdKcUZU51E5NM9/k68LaPWpw==",
+      "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",
+      "version": "38.0.0",
-      "resolved": "https://registry.npmjs.org/@primer/react/-/react-37.31.0.tgz",
+      "resolved": "https://registry.npmjs.org/@primer/react/-/react-38.0.0.tgz",
-      "integrity": "sha512-sK+/Ggy05yg3TaFdJRfEmRuaZBsmFD5P7nH1qyVqO9OeT8o2jnqnlBhef8TYX0gpNrLwWNcVrIIOP2Em6T6rrA==",
+      "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",
+        "react-intersection-observer": "^9.16.0"
-        "styled-system": "^5.1.5",
-        "type-check": "0.4.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",
+        "react-is": "18.x || 19.x"
-        "styled-components": "5.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",
+      "dev": true,
-      "dependencies": {
-        "@styled-system/core": "^5.1.2"
-      }
-    },
-    "node_modules/@styled-system/theme-get": {
-      "version": "5.1.2",
       "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"
       },

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",

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"
+          style={{ gridArea: 'sidebar', alignSelf: 'flex-start' }}
-          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>
   )
 }

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"
+            style={{ gridArea: 'sidebar', alignSelf: 'flex-start' }}
-            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>
   )

src/landings/components/ArticleCard.module.scss

@@ -0,0 +1,7 @@
+.topicsList {
+  list-style-type: none;
+}
+
+.label {
+  margin-right: 0.25rem;
+}

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>

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;
+}

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 ? (
+  return image ? <img src={image} alt={alt} className={styles.spotlightImage} /> : null
-    <img
-      src={image}
-      alt={alt}
-      style={{
-        backgroundColor: 'gray',
-        marginBottom: 20,
-        borderRadius: 5,
-        width: '100%',
-        height: 'auto',
-      }}
-    />
-  ) : 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={`${styles.cardContainer} ${spotlight ? spotlightClasses : 'd-flex pb-3 border-bottom'}`}
-        className={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>
             ))}

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;
+}

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"
+            className={`m-1 ${styles.textInput}`}
-            sx={{ minWidth: ['stretch', 'stretch', 'stretch', 'stretch'] }}
             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
+            <span className={styles.categoryLabel}>{t('category')}:</span>{' '}
-              sx={{
-                color: 'fg.muted',
-                display: 'inline-block',
-              }}
-            >
-              {t('category')}:
-            </Box>{' '}
             {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
+            <span className={styles.complexityLabel}>{t('complexity')}:</span>{' '}
-              sx={{
-                color: 'fg.muted',
-                display: 'inline-block',
-              }}
-            >
-              {t('complexity')}:
-            </Box>{' '}
             {complexities[selectedComplexity]}
           </ActionMenu.Button>
           <ActionMenu.Overlay width="auto">

src/landings/components/LandingHero.module.scss

@@ -0,0 +1,3 @@
+.videoWrapper {
+  padding-bottom: 56.25%;
+}

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"

src/landings/components/ProductSelectionCard.module.scss

@@ -0,0 +1,3 @@
+.groupIcon {
+  height: 22px;
+}

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>
       )
     }

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;
+  }
+}

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
+      <div aria-live="assertive" className={styles.displayForScreenReader}>
-        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',
-        }}
-      >
         {announcement}
       </div>
     </div>

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;
+}

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 {
+import { ActionList, IconButton, Overlay, Spinner, Stack, TextInput, Banner } from '@primer/react'
-  ActionList,
-  Box,
-  IconButton,
-  Overlay,
-  Spinner,
-  Stack,
-  Text,
-  TextInput,
-} 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={{
+          style={{
-            // When there is an error and nothing is typed in by the user, show an empty list with no height
             minHeight:
               autoCompleteSearchError && !generalOptionsWithViewStatus.length
                 ? '0'
@@ -605,11 +594,7 @@ export function SearchOverlay({
                 </ActionList.GroupHeading>
               </li>
               <li>
-                <Box
+                <div className={styles.overlayPadding}>
-                  sx={{
-                    padding: '0 16px 0 16px',
-                  }}
-                >
                   <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
+          <div className={isAskAIState ? styles.askAILabel : styles.askAILabelHidden}>
-            sx={{
-              display: isAskAIState ? 'flex' : 'none',
-              marginRight: '8px',
-              fontWeight: 'bolder',
-            }}
-          >
             <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
+              <Stack justify="center" className={styles.stackMinWidth}>
-                justify="center"
-                sx={{
-                  minWidth: '34px',
-                }}
-              >
                 <TextInput.Action
                   onClick={() => {
                     setSelectedIndex(-1)
@@ -765,46 +739,18 @@ export function SearchOverlay({
           />
         </div>
         <ActionList.Divider
-          sx={{
+          className={inErrorState ? styles.dividerTopMarginHidden : styles.dividerTopMargin}
-            display: inErrorState ? 'none' : 'block',
-            marginTop: '16px',
-            width: '100%',
-          }}
           aria-hidden="true"
         />
         {OverlayContents}
-        <ActionList.Divider
+        <ActionList.Divider className={styles.dividerFullWidth} />
-          sx={{
-            width: '100%',
-          }}
-        />
         <div key="description" className={styles.footer}>
-          <Text
+          <p
-            as="p"
+            className={styles.privacyDisclaimer}
-            sx={{
-              // eslint-disable-next-line primer-react/new-color-css-vars
-              color: 'var(--color-fg-muted)',
-              marginTop: 2,
-              marginBottom: 0,
-              fontSize: 'small',
-            }}
             dangerouslySetInnerHTML={{ __html: t('search.overlay.privacy_disclaimer') }}
           />
         </div>
-        <div
+        <div aria-live="assertive" className={styles.screenReaderOnly}>
-          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',
-          }}
-        >
           {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={{
+              className={isActive ? styles.trailingVisualActive : styles.trailingVisualHidden}
-                // Hold the space even when not visible to prevent layout shift
-                visibility: isActive ? 'visible' : 'hidden',
-                width: '1rem',
-              }}
             >
               <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={{
+              className={isActive ? styles.trailingVisualActive : styles.trailingVisualHidden}
-                // Hold the space even when not visible to prevent layout shift
-                visibility: isActive ? 'visible' : 'hidden',
-                width: '1rem',
-              }}
             >
               <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={{
+                className={isActive ? styles.trailingVisualActive : styles.trailingVisualHidden}
-                  // Hold the space even when not visible to prevent layout shift
-                  visibility: isActive ? 'visible' : 'hidden',
-                  width: '1rem',
-                }}
               >
                 <ArrowRightIcon />
               </ActionList.TrailingVisual>

src/search/components/results/NoQuery.module.scss

@@ -0,0 +1,3 @@
+.flash {
+  margin: 2rem;
+}

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>
     </>

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;
+}

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">
+        <p className={styles.debugText}>
-          score: <code style={{ marginRight: 10 }}>{hit.score}</code> popularity:{' '}
+          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>
   )
 }

src/search/components/results/ValidationErrors.module.scss

@@ -0,0 +1,3 @@
+.flash {
+  margin: 3rem;
+}

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>