Upgrade styled-components to v5 (#3397)

* upgrade styled-components to v5

* adds changeset

* fixes type errors

* Update .changeset/proud-rules-develop.md

Co-authored-by: Josh Black <joshblack@github.com>

* updates changeset

* rm Box snapshots emitting empty mq blocks, updates snaps post-merge

---------

Co-authored-by: Josh Black <joshblack@github.com>

.changeset/proud-rules-develop.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': major
+---
+
+Upgrades styled-components to v5
+
+<!-- Changed components: _none_ -->

package.json

@@ -107,7 +107,7 @@
     "@styled-system/props": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
     "@types/react-is": "^18.2.1",
-    "@types/styled-components": "^5.1.11",
+    "@types/styled-components": "5.1.26",
     "@types/styled-system": "^5.1.12",
     "@types/styled-system__css": "^5.0.16",
     "@types/styled-system__theme-get": "^5.0.1",
@@ -185,7 +185,7 @@
     "babel-plugin-dev-expression": "0.2.3",
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-open-source": "1.3.4",
-    "babel-plugin-styled-components": "2.1.1",
+    "babel-plugin-styled-components": "2.1.3",
     "babel-plugin-transform-replace-expressions": "0.2.0",
     "babel-polyfill": "6.26.0",
     "change-case": "4.1.2",
@@ -217,7 +217,7 @@
     "jest-environment-jsdom": "29.4.3",
     "jest-fail-on-console": "3.1.1",
     "jest-matchmedia-mock": "1.1.0",
-    "jest-styled-components": "6.3.4",
+    "jest-styled-components": "7.1.1",
     "jest-watch-typeahead": "2.2.2",
     "jscodeshift": "0.14.0",
     "lint-staged": "13.2.2",
@@ -249,7 +249,8 @@
     "size-limit": "8.2.4",
     "storybook": "7.1.0",
     "storybook-addon-turbo-build": "2.0.1",
-    "styled-components": "4.4.1",
+    "storybook-css-modules": "1.0.8",
+    "styled-components": "5.3.11",
     "terser": "5.17.6",
     "ts-node": "10.9.1",
     "ts-toolbelt": "9.6.0",

src/CounterLabel/CounterLabel.tsx

@@ -34,7 +34,6 @@ const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
           )}
           {...props}
           as="span"
-          // @ts-expect-error Box is expecting a divelement, but this component forces a span element
           ref={forwardedRef}
         >
           {children}