Bump deps (#768)

* Bump deps

* Fix build

packages/react-identicon/package.json

@@ -29,13 +29,12 @@
     "ethereum-blockies-base64": "^1.0.2",
     "jdenticon": "3.2.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "styled-components": "^5.3.11",
-    "tslib": "^2.5.3"
+    "styled-components": "^6.0.2",
+    "tslib": "^2.6.0"
   },
   "devDependencies": {
     "@types/react-copy-to-clipboard": "^5.0.4",
-    "@types/react-dom": "^18.2.4",
-    "@types/styled-components": "^5.1.26",
+    "@types/react-dom": "^18.2.6",
     "xmlserializer": "^0.6.1"
   },
   "peerDependencies": {

packages/react-identicon/src/icons/Ethereum.tsx

@@ -28,7 +28,7 @@ function Identicon ({ address, className = '', size, style = {} }: Props): React
   );
 }
 
-const StyledImg = styled.img(({ size }: ImgProps) => `
+const StyledImg = styled.img<ImgProps>(({ size }) => `
   display: block;
   height: ${size}px;
   width: ${size}px;

packages/react-identicon/src/styled.ts

@@ -1,16 +1,4 @@
 // Copyright 2017-2023 @polkadot/react-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { StyledInterface } from 'styled-components';
-
-import styledComponents from 'styled-components';
-
-// In styled-components v6, there is a named export which can be used
-// directly, i.e. "import { styled } from ..." with no more magic. Until
-// such time the cjs vs esm import here is problematic, so we hack around
-// the various shapes below
-export const styled = (
-  (styledComponents as unknown as { styled: StyledInterface }).styled ||
-  (styledComponents as unknown as { default: StyledInterface }).default ||
-  styledComponents as unknown as StyledInterface
-);
+export { styled } from 'styled-components';