diff --git a/package.json b/package.json
index 4d0d7d9f..f30a02ef 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "test:one": "polkadot-dev-run-test --env browser"
   },
   "devDependencies": {
-    "@polkadot/dev": "^0.72.29",
+    "@polkadot/dev": "^0.72.32",
     "@polkadot/x-bundle": "^11.1.3",
     "@types/node": "^18.15.11",
     "react": "^18.2.0",
diff --git a/packages/react-identicon/src/Identicon.tsx b/packages/react-identicon/src/Identicon.tsx
index ab8374b6..a987ee2e 100644
--- a/packages/react-identicon/src/Identicon.tsx
+++ b/packages/react-identicon/src/Identicon.tsx
@@ -6,23 +6,13 @@ import type { IdentityProps as Props, Props as ComponentProps } from './types.js
 
 import React from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import styledComponents, { StyledInterface } from 'styled-components';
 
 import { ICON_DEFAULT_HOST, settings } from '@polkadot/ui-settings';
 import { isHex, isU8a, u8aToHex } from '@polkadot/util';
 import { decodeAddress, encodeAddress, ethereumEncode } from '@polkadot/util-crypto';
 
 import { Beachball, Empty, Ethereum, Jdenticon, Polkadot } from './icons/index.js';
-
-// 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
-const styled = (
-  (styledComponents as unknown as { styled: StyledInterface }).styled ||
-  (styledComponents as unknown as { default: StyledInterface }).default ||
-  styledComponents as unknown as StyledInterface
-);
+import { styled } from './styled.js';
 
 const Fallback = Beachball;
 
diff --git a/packages/react-identicon/src/icons/Ethereum.tsx b/packages/react-identicon/src/icons/Ethereum.tsx
index 80076fae..cb834669 100644
--- a/packages/react-identicon/src/icons/Ethereum.tsx
+++ b/packages/react-identicon/src/icons/Ethereum.tsx
@@ -5,17 +5,8 @@ import type { Props } from '../types.js';
 
 import makeBlockie from 'ethereum-blockies-base64';
 import React, { useMemo } from 'react';
-import styledComponents, { StyledInterface } 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
-const styled = (
-  (styledComponents as unknown as { styled: StyledInterface }).styled ||
-  (styledComponents as unknown as { default: StyledInterface }).default ||
-  styledComponents as unknown as StyledInterface
-);
+import { styled } from '../styled.js';
 
 interface ImgProps {
   size: number;
diff --git a/packages/react-identicon/src/styled.ts b/packages/react-identicon/src/styled.ts
new file mode 100644
index 00000000..1a478942
--- /dev/null
+++ b/packages/react-identicon/src/styled.ts
@@ -0,0 +1,16 @@
+// 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
+);
diff --git a/packages/react-qr/src/Display.tsx b/packages/react-qr/src/Display.tsx
index 672ced69..e9e1c49c 100644
--- a/packages/react-qr/src/Display.tsx
+++ b/packages/react-qr/src/Display.tsx
@@ -2,24 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import styledComponents, { StyledInterface } from 'styled-components';
 
 import { objectSpread } from '@polkadot/util';
 import { xxhashAsHex } from '@polkadot/util-crypto';
 
 import { qrcode } from './qrcode.js';
+import { styled } from './styled.js';
 import { createFrames, createImgSize } from './util.js';
 
-// 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
-const styled = (
-  (styledComponents as unknown as { styled: StyledInterface }).styled ||
-  (styledComponents as unknown as { default: StyledInterface }).default ||
-  styledComponents as unknown as StyledInterface
-);
-
 interface Props {
   className?: string;
   size?: string | number;
diff --git a/packages/react-qr/src/Scan.tsx b/packages/react-qr/src/Scan.tsx
index bf60941f..8bb71ee4 100644
--- a/packages/react-qr/src/Scan.tsx
+++ b/packages/react-qr/src/Scan.tsx
@@ -3,20 +3,10 @@
 
 import React, { useCallback, useMemo } from 'react';
 import Reader from 'react-qr-reader';
-import styledComponents, { StyledInterface } from 'styled-components';
 
+import { styled } from './styled.js';
 import { createImgSize } from './util.js';
 
-// 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
-const styled = (
-  (styledComponents as unknown as { styled: StyledInterface }).styled ||
-  (styledComponents as unknown as { default: StyledInterface }).default ||
-  styledComponents as unknown as StyledInterface
-);
-
 interface Props {
   className?: string;
   delay?: number;
diff --git a/packages/react-qr/src/styled.ts b/packages/react-qr/src/styled.ts
new file mode 100644
index 00000000..ede699cf
--- /dev/null
+++ b/packages/react-qr/src/styled.ts
@@ -0,0 +1,16 @@
+// Copyright 2017-2023 @polkadot/react-qr 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
+);
diff --git a/packages/vue-identicon/src/Identicon.ts b/packages/vue-identicon/src/Identicon.ts
index 4103e3e6..6bc06050 100644
--- a/packages/vue-identicon/src/Identicon.ts
+++ b/packages/vue-identicon/src/Identicon.ts
@@ -1,9 +1,10 @@
 // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { VNode } from 'vue';
 import type { Prefix } from '@polkadot/util-crypto/address/types';
 
-import { defineComponent, VNode } from 'vue';
+import { defineComponent } from 'vue';
 
 import { isHex, isU8a, u8aToHex } from '@polkadot/util';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
diff --git a/packages/vue-identicon/src/icons/Beachball.ts b/packages/vue-identicon/src/icons/Beachball.ts
index dfbb530b..166fa2de 100644
--- a/packages/vue-identicon/src/icons/Beachball.ts
+++ b/packages/vue-identicon/src/icons/Beachball.ts
@@ -1,7 +1,9 @@
 // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { defineComponent, VNode } from 'vue';
+import type { VNode } from 'vue';
+
+import { defineComponent } from 'vue';
 
 import { beachballIcon } from '@polkadot/ui-shared';
 
diff --git a/packages/vue-identicon/src/icons/Jdenticon.ts b/packages/vue-identicon/src/icons/Jdenticon.ts
index 3390b8f8..933bd7b6 100644
--- a/packages/vue-identicon/src/icons/Jdenticon.ts
+++ b/packages/vue-identicon/src/icons/Jdenticon.ts
@@ -1,8 +1,10 @@
 // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { VNode } from 'vue';
+
 import * as jdenticon from 'jdenticon';
-import { defineComponent, VNode } from 'vue';
+import { defineComponent } from 'vue';
 
 type PropsType = {
   publicKey: string,
diff --git a/packages/vue-identicon/src/icons/Polkadot.ts b/packages/vue-identicon/src/icons/Polkadot.ts
index 0e327542..05c78ae5 100644
--- a/packages/vue-identicon/src/icons/Polkadot.ts
+++ b/packages/vue-identicon/src/icons/Polkadot.ts
@@ -1,7 +1,9 @@
 // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { defineComponent, VNode } from 'vue';
+import type { VNode } from 'vue';
+
+import { defineComponent } from 'vue';
 
 import { polkadotIcon } from '@polkadot/ui-shared';
 
diff --git a/yarn.lock b/yarn.lock
index 07d92fe4..08302b28 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1415,34 +1415,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/dev-test@npm:^0.72.29":
-  version: 0.72.29
-  resolution: "@polkadot/dev-test@npm:0.72.29"
+"@polkadot/dev-test@npm:^0.72.32":
+  version: 0.72.32
+  resolution: "@polkadot/dev-test@npm:0.72.32"
   dependencies:
     jsdom: ^21.1.1
     tslib: ^2.5.0
-  checksum: f82b2be6539dc359b9d6574f9694266ebd6b63cd686630a9049b9bf88d86d13f96b8763b514a074007bfa5cfec27d3fc58db4e002c022237ad54416752d76d17
+  checksum: 81f6649827db6f43efdf6ea7f7b13b83e9ca9be9058c588cde62e695836e26c135dba26804c4832288c2690ed174a24dfd11d574c49053dfedd5bb30e913a801
   languageName: node
   linkType: hard
 
-"@polkadot/dev-ts@npm:^0.72.29":
-  version: 0.72.29
-  resolution: "@polkadot/dev-ts@npm:0.72.29"
+"@polkadot/dev-ts@npm:^0.72.32":
+  version: 0.72.32
+  resolution: "@polkadot/dev-ts@npm:0.72.32"
   dependencies:
     json5: ^2.2.3
     tslib: ^2.5.0
     typescript: ^5.0.3
-  checksum: 97af0e678ed25d5538d435f8e091564f462411d79b024e3ccc45eba55f3c05e4e476cc402039d6bb9dc2542a585b082833f484e71bc49a9ce3d2ead07971c5d1
+  checksum: 4d9783e83cde12ba1677273cbb89e56223d0b6d4b75452f14dd0ab612f264e40a888d79b081044f447815f7aaf584ccd5f299dce0291e9a0443135a9b070b546
   languageName: node
   linkType: hard
 
-"@polkadot/dev@npm:^0.72.29":
-  version: 0.72.29
-  resolution: "@polkadot/dev@npm:0.72.29"
+"@polkadot/dev@npm:^0.72.32":
+  version: 0.72.32
+  resolution: "@polkadot/dev@npm:0.72.32"
   dependencies:
     "@eslint/js": ^8.37.0
-    "@polkadot/dev-test": ^0.72.29
-    "@polkadot/dev-ts": ^0.72.29
+    "@polkadot/dev-test": ^0.72.32
+    "@polkadot/dev-ts": ^0.72.32
     "@rollup/plugin-alias": ^4.0.3
     "@rollup/plugin-commonjs": ^24.0.1
     "@rollup/plugin-dynamic-import-vars": ^2.0.3
@@ -1503,7 +1503,7 @@ __metadata:
     polkadot-exec-rollup: scripts/polkadot-exec-rollup.mjs
     polkadot-exec-tsc: scripts/polkadot-exec-tsc.mjs
     polkadot-exec-webpack: scripts/polkadot-exec-webpack.mjs
-  checksum: d7b62ff4405b35626f07b9b9a4401b3a45db5cb3cc5f2bbccba583c1ffbb24e8327e757cf98894fc47f9176fbc95d859e1ea286d1e9fd6805994f739f98698ab
+  checksum: f4ab710a54a211bf5b99e88eaae73945312952213c0d405590348fd14576887d401a44546659773b0801ae77204973808f5b0eb8cf39cad1a910520a1b8b506f
   languageName: node
   linkType: hard
 
@@ -11053,7 +11053,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "root-workspace-0b6124@workspace:."
   dependencies:
-    "@polkadot/dev": ^0.72.29
+    "@polkadot/dev": ^0.72.32
     "@polkadot/x-bundle": ^11.1.3
     "@types/node": ^18.15.11
     react: ^18.2.0