update styled-components

Author: thomasmost

demo/package.json

@@ -20,7 +20,7 @@
 		"react-dom": "16.13.1",
 		"react-github-corner": "^2.3.0",
 		"react-scripts": "2.1.8",
-		"styled-components": "4.2.0"
+		"styled-components": "^6.0.5"
 	},
 	"scripts": {
 		"start": "react-scripts start",

packages/gatsby-mdx/package.json

@@ -24,7 +24,7 @@
 		"react-code-blocks": "*",
 		"react-dom": "^16.11.0",
 		"react-helmet": "^5.2.0",
-		"styled-components": "^4.2.0",
+		"styled-components": "^6.0.5",
 		"styled-system": "^4.2.2"
 	},
 	"keywords": [

packages/react-code-blocks/package.json

@@ -70,14 +70,14 @@
     "react-dom": "^16.13.1",
     "ts-loader": "^6.2.2",
     "tsdx": "^0.13.2",
-    "typescript": "^3.9.6",
+    "typescript": "^5.1.6",
     "typescript-plugin-styled-components": "^1.4.4"
   },
   "dependencies": {
     "@babel/runtime": "^7.10.4",
     "@types/react-syntax-highlighter": "^15.5.7",
     "react-syntax-highlighter": "^15.5.0",
-    "styled-components": "^5.1.1",
+    "styled-components": "^6.0.5",
     "tslib": "^2.6.0"
   }
 }

packages/react-code-blocks/src/components/CopyBlock.tsx

@@ -34,22 +34,24 @@ export interface CopyBlockProps {
   [x: string]: any;
 }
 
-const Button = styled.button<CopyBlockProps>`
+type CascadedProps = Partial<CopyBlockProps> & { theme: Theme };
+
+const Button = styled.button<CascadedProps>`
   position: absolute;
   top: 0.5em;
   right: 0.75em;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  background: ${p => p.theme.backgroundColor};
+  background: ${(p: CascadedProps) => p.theme.backgroundColor as string};
   margin-top: 0.15rem;
   border-radius: 0.25rem;
   max-height: 2rem;
   max-width: 2rem;
   padding: 0.25rem;
   &:hover {
-    opacity: ${p => (p.copied ? 1 : 0.5)};
+    opacity: ${(p: CascadedProps) => (p.copied ? 1 : 0.5)};
   }
   &:focus {
     outline: none;
@@ -61,11 +63,11 @@ const Button = styled.button<CopyBlockProps>`
   }
 `;
 
-const Snippet = styled.div<CopyBlockProps>`
+const Snippet = styled.div<CascadedProps>`
   position: relative;
-  background: ${p => p.theme.backgroundColor};
+  background: ${(p: CascadedProps) => p.theme.backgroundColor as string};
   border-radius: 0.25rem;
-  padding: ${p => (p.codeBlock ? `0.25rem 0.5rem 0.25rem 0.25rem` : `0.25rem`)};
+  padding: ${(p: CascadedProps) => (p.codeBlock ? `0.25rem 0.5rem 0.25rem 0.25rem` : `0.25rem`)};
 `;
 
 export default function CopyBlock({